Nasrul Hazim Bin Mohamad

Laravel: Datatable

Feb
18

Assalamualaikum / Hi,

Today I will share how to use Datatables in your Laravel project.

I will cover on:

  1. Setting up Datatables
  2. Compiling Datatables Asset with Laravel Mix
  3. Create route for Datatables
  4. Create reusable Blade Template for Datatable

Part 1: Installation

Create a new laravel project. Install package.json dependencies with npm install or yarn install. Add Datatable and Datatable Bootstrap 4 – yarn add datatables.net datatables.net-bs4 --dev. --dev means that we only need this on development since we will compile it once and used the compiled version for our application.

Open up webpack.mix.js and update the file as following.

Then run npm run prod – this should create public/js/datatables.js and public/css/datatables.css

The next thing you need to install is the Yajra Laravel Datatablescomposer require yajra/laravel-datatables:^1.0 and then run php artisan vendor:publish --tag=datatables.

If you’re running on minimum of Laravel 5.5, thanks to package discovery. No need to setup config/app.php. ­čÖé

Part 2: Datatable Routes

In this part, I’m going to show how I manage Datatable routes.

The starting point is the app/Providers/RouteServiceProvider.php. Open up the file and we will duplicate one of the method – mapApiRoutes() – and name it as mapDatatableRoutes().

Next, create routes/datatable.php file and we can start write datatable routes in the file. As you can see, with this method, your datatable routes will be much cleaner and organised in a separate route file.

This is just an approach to make your route file easier to maintain. The other option, you may use macro.

Following are the sample datatable route that we will use in this post.

<?php 

Route::get('user', 'UserController')->name('user');

Part 3: Basic Datatable Controller

In this part, I’ll show how I manage the controllers for datatables. As you can see from my mapDatatableRoutes(), I have namespace for the datatable route to App\Http\Controllers\Datatable. This approach just to make your datable controllers well organise.

You can create your first datatable controller with php artisan make:controller Datatable/UserController and you can copy paste the basic setup of the datatable controller.

Part 4: View

In this part, I’ll show how I create basic datatable blade component that reusable – of course, you can use VueJs as well, but I’ll keep it simple for now.

By default, I have this resources/views/components/table.blade.php, which I always use for table based view.

Next, create resources/views/components/datatable.blade.php.

Now we are prepared with the requirements on datatable – Datatable JS & CSS, Laravel Datatable by Yajra, dedicated route and namespace to keep codes well organised. Next, we will test our setup.

Part 5: Final Countdown

We will list out users using datatable. Make sure to run php artisan make:auth and add @stack('styles') and @stack('scripts') in resources/views/layouts/app.blade.php.

Previously you have setup the route and controller. Next is to create a controller, route and a view to display the data from datatable. Following are the setup.

Create the controller – php artisan make:controller UserController -r

Create resources/views/users/index.blade.php

Add route for the view in routes/web.php: Route::get('/users', 'UserController@index')->name('user');

Next (2 more steps!), seed some data with tinker php artisan tinker, then factory(\App\User::class,100)->create();.

And finally, run php artisan serve, the go the browser – http://127.0.0.1/users, you have as the datatable display nicely!

Conclusion

So, as conclusion, the tedious part is to setup the requirement for the datatable. Once you’re done, you will probably will involved with creating route, controller for the datatable and view, and view for the controller view.

You can extend the datatable blade component based on your needs. As for me, for now, the basic setup is good enough.

Here the repository for this post example.

Should I create a package for this?

Thanks! Happy Coding!

Laravel: Route Macro

Dec
30

Here I want to show, how to extend existing route – get, post, etc. for your application.

I’m going to create a new route Route::setting('module'), which will create all necessary route setup.

Now register this new macro in your AppServiceProvider, in register() method.

Then, you can start use the new route.

To use this new route, you need a controller.

So run php artisan make:controller Settings/ApplicationSettingController -r

Then you may add in routes/web.php to register a new route setting.

In this case, you just need to add Route::setting('application').

Then run php artisan route:list. You should get something like the following:

4 Essential Laravel Packages for Your Web Application Development

Dec
20

Assalamualaikum,

Recently I’ve been working with developing Laravel packages for my own use and Laravel’s community. It’s quite fun and interesting how you can separate the modules or features from Laravel’s main application and make it as a package, which later on you can reuse it over and over again.

Here are some of the packages I’ve created so far. You may want to try it out, and please do make a report if there’s any issues.

  1. Artisan Extended – this package mainly to add more artisan commands to simplify and speed up your development progress.┬áHere the list of commands available:
    1. clear:cache – Put application under maintenance, clear common caches files, and put the application up again
    2. clear:serve – Run clear:cache and serve the application
    3. make:route – Create a new route
    4. make:view – Create a new plain view or resourceful view
    5. make:resourceful – Create a new resourceful controller
    6. make:scaffold – Create a new model, migration, resourceful controller and views (but still, need to enhance to accept columns details)
    7. secure:cookie – Secure your cookie
  2. Themer – The package main purpose to support theming in Laravel’s applications. It’s provide a middleware, and an artisan command(make:theme) to create a new theme.
  3. Setting – A simple helper to have a setting for your application.
  4. Subscriptions – The┬ápackage is used for SaaS based applications. It’s allow you to add new package┬áservices, and enable your customers to subscribe to your SaaS application.
Sample Subscription Implementation in SaaS Application

Sample Subscription Implementation in SaaS Application

Do play around with the packages, and do report issues if there’s any, or if you think there’s need enhancement, do submit your proposal.

Laravel: Artisan Extended – make:route

Dec
14

Assalamualaikum,

Yesterday, I’ve shared ideas on how to manage your Laravel’s route in Laravel: Managing Routes post.

Today, I want to share with you guys how to create easily the resourceful route, with or without prefix (yes, you can make route version too!).

First thing first, let’s create a new Laravel project and require the Artisan Extended package to your Laravel Project.

Once you’re done with installation of Artisan Extended package, you may run now in terminal the following commands:

php artisan make:route Post

This will create a new Routes directory in your app folder, and a file named Post.php(app/Routes/Post.php), and you will have \App\Routes\Post::routes(); in your routes/web.php. You may run php artisan route:list to check the route created just now.

Now, let say you want to add prefix to your route:

php artisan make:route -p v1 Post

Then, you will have \App\Routes\V1\Post::routes(); in your routes/web.php

How about I want a prefix of V1, but I want to differentiate between admin and normal user? Here how you can do it:

php artisan make:route -p v1 Admin/User && php artisan make:route -p v1 User

Now you should have \App\Routes\V1\Admin\User::routes(); and \App\Routes\V1\User::routes(); in your routes/web.php.

That’s it. It’s easy now to manage your routes.

All your routes will be store in app/Routes directory from now on and you just need to update your route files manually in case you need some extra routes in the class.

Here are some other tricks you may use:

php artisan make:route -m web,auth -p v1 Post

This will create a route in app/Routes/V1/Post.php and having middlewares of web & auth in routes/web.php

php artisan make:route -m auth:api,jwt -p v1 -a Post

This will create a route in app/Routes/API/V1/Post.php and having middlewares of auth:api & jwt in routes/api.php

Please take note that, the make:route is intended for resourceful route.

There’s some other useful Artisan commands available in Artisan Extended package, you may want to read here.

More test & result:

Create Routes

Create Routes

The Routes Structure

The Routes Structure Generated

Resourceful Controllers Automatically Created If Not Exist

Resourceful Controllers Automatically Created If Not Exist

Routes for Web

Routes for Web

Routes for API

Routes for API