Download the PHP package codeartlv/joona without Composer
On this page you can find all versions of the php package codeartlv/joona. It is possible to download/install these versions without Composer. Possible dependencies are resolved automatically.
Download codeartlv/joona
More information about codeartlv/joona
Files in codeartlv/joona
Package joona
Short Description A simple backend template for Laravel projects
License MIT
Informations about the package joona
Joona is a utility package for Laravel, designed to streamline backend development. It includes features such as user management, permission settings, and an activity log. On the frontend, it integrates Bootstrap 5 and additional UI components to enhance interface design. This package offers a quick starting point for projects that require an administration interface.
Unlike other admin panels (such as Filament), Joona promotes the creation of highly customized user interfaces by not restricting developers to predefined views for content output.
Requirements
This package is tailored for seamless integration with a brand-new Laravel 11.x installation but can also be incorporated into existing projects. Included in the package are migrations essential for creating tables. However, it's important to note that if your current project already contains tables sharing the same names, potential conflicts will arise.
Installation
- Require the package via Composer:
composer require codeartlv/joona
- Publish assets:
php artisan joona:publish
. This exports UI assets intopublic/vendor/joona
directory and registers service provider. - If using Laravel < 11, add
App\Providers\JoonaServiceProvider::class,
service provider inconfig/app.php
. - Run migrations:
php artisan migrate
- Seed defaults:
php artisan joona:seed
- To support extending CSS/JS within your project, add dependency in your files:
Your SCSS file:
Your Javascript entry point:
If your are using Vite, the basic setup could look like this:
After defining CSS/JS files, build the project:
By now, the setup should be complete. Navigate to /admin
and log in using the following credentials:
Email: admin@localhost Password: password
It's important to note that the actual password policy is stricter. You are advised to change the default user password, as the required password complexity will be higher.
Custom CSS/JS location
If you have customized location of (S)CSS/JS files, update it in app/Providers/JoonaServiceProvider.php
:
Usage
The package introduces several middlewares and templates to integrate into backend interface. It uses custom auth
guard and users are authenticated against database.
Create routes inside backend
Within the backend interface, there are both authenticated and unauthenticated routes. Authenticated routes require user authentication, while unauthenticated routes don't, but they apply additional settings such as color theme, locale, etc. To incorporate unauthenticated routes, apply the admin.web
middleware to your routes:
To add authenticated routes, use middleware admin.auth
:
Note that this still requires admin.web
middleware to provide basic settings. You can create a group for your backend routes:
Proceed to write controllers as you usually do.
Views
The package provides two layouts - a simple layout and layout with sidebar. Sidebar layout is used to add various data filtering controls.
Simple view
To use simple view, you would write your template like this:
Including metadata
You will likely need to inject additional data into <head>
even when the view is completely rendered from inside the package.
Just create resources/views/vendor/joona/head.blade.php
file and Laravel will include it inside the <head>
.
Routes
The package uses Ziggy to provide routes inside Javascript. Just call function route
and use it the same way as in Laravel.
Javascript UI components
The package provides several commonly used components that can be included in the views.
Modal dialog
A modal dialog that is loaded by remote request.
Confirmation dialog
Confirmation dialog closes automatically once any of the buttons is pressed.
Paginator
Outputs a paginator component. Pass total
(total number of rows) and size
(number of items on page).
Form
Creates a dynamic form. Form is submitted via Ajax.
When providing response to the form submission, use FormResponse
class:
When setting error on the form field, any input with provided name gets searched. If empty field name is provided, the message is rendered into dedicated alert component. If form element can't have a specific name, you can defined where the form error gets rendered by adding:
Button
Displays a button.
Alert
Displays an alert message.
Dialog
Should be included when outputting a dialog content.
Dialog example with form and save button:
Uploader
Creates a file uploader. When setting uploaded files, use instance of Codeart\Joona\View\Components\Form\UploadedFile
.
When uploading file, return response of the same class.
Writing custom components
Backend features a very simple JS framework to separate view from JS code. It utilizes data
attributes on HTML elements to which every component is binded. You are not required to use this, but for simple interactions it can be faster than to deploy React/Vue etc. framework. It's up to you anyway.
Create new component handler
First of all, if you need to add interaction to element, you create a Javascript class that collects a group functions for a problem domain. Let's say you have a blog and need to add component in the backend. Start by creating blog component handler:
Register handler at the application:
The pluginName
is an only required function for a handler. Now, let's say you need to create functionality around some HTML code. You start by referencing the handler through data
attributes:
Here, data-bind
consists of two parts - first is the name of handler (the value that pluginName
returns) and second is the name of the handler function. Based on this example, we can write handler like this:
The handler name gets converted to camel case. edit-form
becomes editForm
.
Each handler function receives 3 arguments:
element - reference to DOM node where data-bind
is assigned on;
parameters - any additional data
arguments on the node;
runtime - instance of Runtime class.
Getting instances of other components
If handler function returns and object, it is stored for later access. This way you can get other binded components from anywhere on the page or specific scope. Consider that you have two handler functions:
window.Runtime.getInstance
searches for binded component within provided scope (element
), the second argument is full name of the handler. Note that component must return a function or object to be resolved.
window.Runtime.getInstance
returns the first found component. If you presume that there can be many instances, use runtime.getInstances
.
If you want to get instance by element's id, then use runtime.getInstanceById(id)
.
Dynamically binding handler
If you load your content dynamically, after inserting new nodes into the DOM, call window.Runtime.init(context)
on the new HTML nodes. context
is the most highest DOM node you can reference that contains new HTML.
Commands
Package adds additional console commands. Please see description of each of them:
joona:seed
- creates default credentials. After running this seeds, you can authorize in backend panel with email admin@localhost
and password password
.
joona:publish
- publishes backend template assets and related packages assets.
Notes
This package adds admin
guard to auth.php
and joona
guard to configuration. Please consider this naming when adding additional guards and/or providers.