UI tools to perform CRUD operations on Eloquent models







UI tools to perform CRUD operations on Eloquent models

Installation and setup

composer require helori/laravel-crudui

Configure your application:

// config/app.php
'providers' => [

Publish and run the migrations:

php artisan vendor:publish --provider="Helori\LaravelCrudui\CruduiServiceProvider" --tag="migrations"
php artisan migrate

Install frontend dependencies:

bower init
bower install jquery --save
bower install bootstrap --save
bower install angular --save
bower install jquery-ui --save
bower install jqueryui-touch-punch --save
bower install font-awesome --save
bower install tinymce --save

Update your gulpfile:

        "public/js/crudui.js", "."
        "public/css/crudui.css", "."

If not done yet, install gulp and elixir thanks to the built-in's laravel package.json, and then run Gulp

sudo npm install

How to use

There are to ways to use this module:

  • Use the config file to define the models to be managed.
  • Create your own controllers by inheriting CrudBaseController.

Using the config file

Publish the config file:

php artisan vendor:publish --provider="Helori\LaravelCrudui\CruduiServiceProvider" --tag="config"

Define the models to be managed:

// config/laravel-crudui.php
return [
    'models' => [
        'articles' => [
	    	'model_class' => \App\Article::class,
	    	'page_name' => 'grarticlesoups',
	    	'route_url' => '/crud/articles',

	    	'menu_title' => 'Articles',
	    	'list_title' => 'Articles list',
	    	'edit_title' => 'Edit article',
	    	'add_text' => 'Add article',

	    	'sort_by' => 'id',
	    	'sort_dir' => 'asc',
	    	'sortable' => false,
	    	'limit' => 10,

	    	'fields' => [
	            ['type' => 'text', 'name' => 'title', 'title' => 'Title', 'list' => true, 'edit' => true, 'filter' => true],
	            'filter' => false],
	            ['type' => 'checkbox', 'name' => 'published', 'title' => 'Published', 'list' => false, 'edit' => true, 'filter' => false],
	            ['type' => 'textarea', 'name' => 'content', 'title' => 'COntent', 'list' => false, 'edit' => true, 'filter' => false],

Create the corresponding tables:

php artisan make:migration create_articles_table
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;

class CreateArticlesTable extends Migration
    public function up()
        Schema::create('articles', function (Blueprint $table) {

    public function down()
php artisan migrate

Create Eloquent models for your tables:

php artisan make:model Article.php
// app/Article.php
namespace App;
use Illuminate\Database\Eloquent\Model;

class Article extends Model
	protected $table = 'articles';
    protected $dates = ['created_at', 'updated_at'];
    public $timestamps = true;
    protected $hidden = [];
    protected $guarded = [];

Add this list of generic routes to your routes.php. Note that the routes can be customized as you need but they must contain the {model} and optionally the {id} parameters in this order. Also note that chosen paths must match paths used in your menu view (see below).

// app/Http/routes.php
Route::get('/crud/{model}/items', array('uses' => '\Helori\LaravelCrudui\Controllers\[email protected]'));
Route::get('/crud/{model}/create-item', array('uses' => '\Helori\LaravelCrudui\Controllers\[email protected]'));
Route::post('/crud/{model}/store-item', array('uses' => '\Helori\LaravelCrudui\Controllers\[email protected]'));
Route::get('/crud/{model}/edit-item/{id}', array('uses' => '\Helori\LaravelCrudui\Controllers\[email protected]'));
Route::post('/crud/{model}/update-item/{id}', array('uses' => '\Helori\LaravelCrudui\Controllers\[email protected]'));
Route::get('/crud/{model}/delete-item/{id}', array('uses' => '\Helori\LaravelCrudui\Controllers\[email protected]'));
Route::post('/crud/{model}/update-position', array('uses' => '\Helori\LaravelCrudui\Controllers\[email protected]'));
Route::get('/ru/{model}/items', array('uses' => '\Helori\LaravelCrudui\Controllers\[email protected]'));
Route::post('/ru/{model}/update-item/{id}', array('uses' => '\Helori\LaravelCrudui\Controllers\[email protected]'));

Create the links to access each table management (for example in a navigation bar):

// e.g. : resources/views/menu.blade.php
@foreach(config('laravel-crudui.models') as $key => $model)
    <li class="<% (isset($page_name) && $page_name == $model['page_name']) ? ' active' : '' %>">
        <a href="<% $model['route_url'] %>/items"><% $model['menu_title'] %></a>

Inheriting CrudBaseController

If your controllers inherits CrudBaseController, create the routes by adding :

$models = ['medias', 'articles'];
foreach($models as $model)
    $controller = ucfirst(camel_case($model)).'Controller';
    Route::get('/crudbase/'.$model.'/items', array('uses' => $controller.'@getItems'));
    Route::get('/crudbase/'.$model.'/create-item', array('uses' => $controller.'@getCreateItem'));
    Route::post('/crudbase/'.$model.'/store-item', array('uses' => $controller.'@postStoreItem'));
    Route::get('/crudbase/'.$model.'/edit-item/{id}', array('uses' => $controller.'@getEditItem'));
    Route::post('/crudbase/'.$model.'/update-item/{id}', array('uses' => $controller.'@postUpdateItem'));
    Route::get('/crudbase/'.$model.'/delete-item/{id}', array('uses' => $controller.'@getDeleteItem'));
    Route::post('/crudbase/'.$model.'/update-position', array('uses' => $controller.'@postUpdatePosition'));