Disclosure: This post may contain affiliate links, meaning I get a commission if you decide to make a purchase through my links, at no cost to you. Please read my disclosure for more info.
QUICK SUMMARY: The purpose of this tutorial is we want to learn how to create CRUD (Create, Read, Update, and Delete) with Laravel 6 DataTable. The app we will build is CRUD for employees in some companies. Laravel is used for data processing and datatable will handle how data look at the client.
This tutorial will cover basic processes on how to create CRUD on Laravel and before following this tutorial I hope you understand basic PHP and JQuery. Okay, let’s jump to the tutorial.
To create a Laravel CRUD DataTable Application, the first step we need to do is install a fresh Laravel app. To do that, open the terminal and type command below.
You can change lara6 to any as you want to the project name.
After that, create a database and update your .env file
Download the resource
DataTable : https://datatables.net/
Picaday : https://github.com/Pikaday/Pikaday
After download all resource, you need to copy all resources to the public path looks like below.
After all resource ready let’s start to build our application. Create an employee table.
php artisan make:model Models/Employee -m
Let me explain the code above. The make model command will create a model for our app and we specific where is the model located.
The -m at the end of the command means we create migration belongs to the model.
In database/migrations/YYY_MM_DD_TIMESTAMP_create_employees_table.php edit the up method so look like bellow
After that save it and run the migration with the command bellow
php artisan migrate
After running these commands the table will be created.
After creating the table, next, we need to create a controller to handle the logic. Create a controller with command bellow:
php artisan make:controller DatatableController -r
Here are available options when creating a controller in Laravel
-m, –model[=MODEL] Generate a resource controller for the given model.
-r, –resource Generate a resource controller class.
-p, –parent[=PARENT] Generate a nested resource controller class.
-h, –help Display this help message
-q, –quiet Do not output any message
-V, –version Display this application version
–ansi Force ANSI output
–no-ansi Disable ANSI output
-n, –no-interaction Do not ask any interactive question
–env[=ENV] The environment the command should run under
-v|vv|vvv, –verbose Increase the verbosity of messages: 1 for normal output, 2 for more verbose output and 3 for debug
Next, we need to modify the route for navigation in our app. Open web.php
file in routes folder and add line some code like bellow.
The resource route will handle GET, POST, and DELETE methods for our HTTP request.
After defining the route and setting the database, next we must create the base view to display the data.
Open layout view in resources/views/layout/app.blade.php
In the header tag add some code like bellow.
Before close the body tag adds some code like bellow.
After that create view file and we name it datatable.blade.php and put in resources/views/crud folder. Paste the code bellow
As you can see we extend layout from app.blade.php and include a script that only needed in datatable.blade.php file.
In the datatable.blade.php file above we create a table for initializing the DataTable and modal for creating or update the data.
Here is the code inside table.js file
After that, edit the controller. We will divide the controller into some parts.
Get All Data
To display all data we create index method with request parameter. Thus method will return JSON response data to the frontend.
Store data to the database
Next, to store data to database we create a store method to store data to database.
Get Single Data
This method is used when editing the data. We need to get single data that we want to edit.
For delete data we create destroy method with the parameter is id from the single row.
Here is all code from DataTableController.