Rapyd Admin: Simplifying Laravel Development

Installation

Create new laravel app then install rapyd-admin package.

(answer “y” to the question about writes "allow-plugins" to composer.json)

composer create-project --prefer-dist laravel/laravel myapp
cd myapp
composer require zofe/rapyd-admin

Then you can customize roles & permissions in app/Modules/Auth/permissions.php then run

php artisan rpd:make:home
php artisan rpd:make:auth

#then you can serve the app with
php artisan serve

Now you can login with a default admin user:

admin@laravel
admin

Rapyd Admin

Rapyd Admin enhances Laravel by offering essential admin features with modular approach:

BALL Stack Environment: Bundles Bootstrap CSS, Alpine.js, Laravel, and Livewire for a quick boilerplate.
Layout Module: Classic sidebar/navbar design based on SBAdmin 3, updated to Bootstrap 5.3 with customizable SCSS and a variety of blade anonymous components for standardized, extendable frontends.
Auth Module: Robust authentication with socialite integration, Fortify, 2FA, and role/permission management.
Custom Modules: Structured handling of components and modules, REST API endpoints, and more, with an emphasis on reusable, encapsulated code for cleaner organization and maintainability.

Generators

Rapyd has some commands to generate models, components, modules (bundled components & views isolated in a folder) via artisan command line:

Models

generate a model (via command line)

php artisan rpd:make:model {ModelName} 

# example
php artisan rpd:make:model Article

Livewire components

php artisan rpd:make {ComponentName} {Model}

# example
php artisan rpd:make UserTable User

will generate

laravel/
├─ app/
│  ├─ Livewire/
│  │  ├─ UserTable.php
│  resources/
│  │  ├─ views/
│  │  │  ├─livewire/
│  │  │  │  ├─ user_table.php

Modules & Generators

example of out of the box module structure you can use after installing rapyd-admin.

php artisan rpd:make {ComponentsName} {Model} --module={module}

# example
php artisan rpd:make Articles Article --module=Blog

Will create Blog folder in you app/Modules directory.
Three livewire components in the Livewire subfolder (ArticlesEdit, ArticlesTable, ArticlesView)
Three blade components in the Views subfolder (articles_edit, articles_table, articles_view)
Inside your Module folder you can reply (if needed) the laravel application folder structure (controllers, migrations, jobs, etc..)

laravel/
├─ app/
│  ├─ Modules/
│  │  ├─ Blog/
│  │  │  ├─ Livewire/
│  │  │  │  ├─ ArticlesEdit.php
│  │  │  │  ├─ ArticlesTable.php
│  │  │  │  ├─ ArticlesView.php
│  │  │  ├─ Views/
│  │  │  │  ├─ articles_edit.blade.php
│  │  │  │  ├─ articles_table.blade.php
│  │  │  │  ├─ articles_view.blade.php
│  │  │  ├─ routes.php

Blade views and Components

Table

A Table is a "listing component" with these features:

"input filters" to search in a custom data set
"buttons" (for example "add" record or "reset" filters)
"pagination links"
"sort links"

you can generate a Table component with:

php artisan rpd:make ArticlesTable Article

or and entire crud (Table/View/Edit) in a module named Blog with;

php artisan rpd:make Articles Article --module=Blog

Generated & Customized view can be something like:

# articles_view.blade.php
```html
<x-rpd::table
    title="Article List"
    :items="$items"
>

    <x-slot name="filters">
      <x-rpd::input col="col-8" debounce="350" model="search"  placeholder="search..." />
      <x-rpd::select col="col-4" model="author_id" :options="$authors" placeholder="author..." addempty />
    </x-slot>

    <table class="table">
        <thead>
        <tr>
            <th>
                <x-rpd::sort model="id" label="id" />
            </th>
            <th>title</th>
            <th>author</th>
            <th>body</th>
        </tr>
        </thead>
        <tbody>
        @foreach ($items as $article)
        <tr>
            <td>
                <a href="{{ route('articles.view',$article->id) }}">{{ $article->id }}</a>
            </td>
            <td>{{ $article->title }}</td>
            <td>{{ $article->author->firstname }}</td>
            <td>{{ Str::limit($article->body,50) }}</td>
        </tr>
        @endforeach
        </tbody>
    </table>

</x-rpd::table>

props

title: the heading title for this crud

content/slots

should be a html table that loops model $items
buttons: buttons panel

example: rapyd.dev/demo/articles

View

a View is a "detail page component" with :

"buttons" slot (for example back to "list" or "edit" current record)
"actions" any link that trigger a server-side

    <x-rpd::view title="Article Detail">

        <x-slot name="buttons">
            <a href="{{ route('articles') }}" class="btn btn-outline-primary">list</a>
            <a href="{{ route('articles.edit',$model->getKey()) }}" class="btn btn-outline-primary">edit</a>
        </x-slot>

        <div>Title: {{ $article->title }}</div>
        <div>Author: {{ $article->author->firstname }} {{ $model->author->lastname }}</div>
        <div><a wire:click.prevent="someAction">Download TXT version</a></div>
          
    </x-rpd::view>

props

title: the heading title for this crud

content/slots

should be a detail of $model
buttons: buttons panel
actions: buttons panel

example: rapyd.dev/demo/article/view/1

Edit

Edit is a "form component" usually binded to a model with:

"buttons" and "actions" (undo, save, etc..)
form "fields"
automatic errors massages / rules management

    <x-rpd::edit title="Article Edit">

       <x-rpd::input model="article.title" label="Title" />
       <x-rpd::rich-text model="article.body" label="Body" />

    </x-rpd::edit>

props

title: the heading title for this crud

content/slots

form fields binded with public/model properties

example: rapyd.dev/demo/article/edit/1

Fields

inside some widget views you can drastically semplify the syntax using predefined blade components that interacts with livewire

<x-rpd::input model="search" debounce="350" placeholder="search..." />

<x-rpd::select model="author_id" lazy :options="$authors" />

<!-- tom select dropdown -->
<x-rpd::select-list model="roles" multiple :options="$available_roles" label="Roles" />
or
<x-rpd::select-list model="roles" multiple endpoint="/ajax/roles" label="Roles" />

<!-- date, datetime and date-range components -->
<x-rpd::date-time model="date_time" format="dd/MM/yyyy HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss" label="DateTime" />

<x-rpd::date model="date" format="dd/MM/yyyy" value-format="yyyy-MM-dd" label="Date" />

<x-rpd::date-range
    model_from="date_from"
    model_to="date_to"
    range-separator="-"
    start-placeholder="from"
    end-placeholder="to"
    type="daterange"
    format="dd/MM/yyyy"
    value-format="yyyy-MM-dd"
/>

<x-rpd::textarea model="body" label="Body" rows="5" :help="__('the article summary')"/>

<!-- quill wysiwyg editor -->
<x-rpd::rich-text model="body" label="Body" />

props

label: label to display above the input
placeholder: placeholder to use for the empty first option
model: Livewire model property key
options: array of options e.g. (used in selects)
debounce: Livewire time in ms to bind data on keyup
lazy: Livewire bind data only on change
prepend: addon to display before input, can be used via named slot
append: addon to display after input, can be used via named slot
help: helper label to display under the input
icon: Font Awesome icon to show before input e.g. cog, envelope
size: Bootstrap input size e.g. sm, lg
rows: rows nums
multiple: allow multiple option selection (used in select-list)
endpoint: a remote url for fetch optioms (used in select-list)
format: the client-side field format (used in date and date-time)
value-format: the server-side field value format (used in date and date-time)

special tags

<!-- sort ascending/descending link actions (in a datatable view context)-->
<x-rpd::sort model="id" label="id" />

navigation

Nav Tabs: bootstrap nav-link menu with self-determined active link

<ul class="nav nav-tabs">
    <x-rpd::nav-link label="Home" route="home" />
    <x-rpd::nav-link label="Articles" route="articles" />
    <x-rpd::nav-link label="Article Detail" route="articles.view" :params="1"/>
    <x-rpd::nav-link label="Article edit" route="articles.edit" />
</ul>

Nav Items: boostrap vertical menu items / single or grouped (collapsed)

<x-rpd::nav-dropdown icon="fas fa-fw fa-book" label="KnowledgeBase" active="/kb">
    <x-rpd::nav-link label="Edit Categories" route="kb.admin.categories.table" type="collapse-item" />
    <x-rpd::nav-link label="Edit Articles" route="kb.admin.articles.table" type="collapse-item" />
</x-rpd::nav-dropdown>

Nav Sidebar: bootstrap sidebar with self-determined or segment-based active link

<x-rpd::sidebar title="Rapyd.dev" class="p-3 text-white border-end">
   <x-rpd::nav-item label="Demo" route="demo" active="/rapyd-demo" />
   <x-rpd::nav-item label="Page" route="page"  />
</x-rpd::sidebar>

Credits

Felice Ostuni
All Contributors

Inspirations:

rapyd-laravel my old laravel library (150k downloads)
livewire widely used "full-stack framework" to compose laravel application by widgets
laravel-bootstrap-components smart library which reduced the complexity of this one

License & Contacts

Rapyd is licensed under the MIT license

Please join me and review my work on Linkedin

thanks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

README.md

README.md

Rapyd Admin: Simplifying Laravel Development

Installation

Rapyd Admin

Generators

Models

Livewire components

Modules & Generators

Blade views and Components

Table

View

Edit

Fields

special tags

navigation

Credits

License & Contacts

Files

README.md

Latest commit

History

README.md

File metadata and controls

Rapyd Admin: Simplifying Laravel Development

Installation

Rapyd Admin

Generators

Models

Livewire components

Modules & Generators

Blade views and Components

Table

View

Edit

Fields

special tags

navigation

Credits

License & Contacts