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.

demo: https://desolate-falls-43028.herokuapp.com/

Install Laravel

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

For this Laravel CRUD DataTable application, we need some javascript library to make this application looks good. All the ingredient look like bellow
DataTable : https://datatables.net/

bootstrap: https://getbootstrap.com/docs/4.3/getting-started/download/

Picaday : https://github.com/Pikaday/Pikaday

moment: https://momentjs.com/

After download all resource, you need to copy all resources to the public path looks like below.

Laravel 6 DataTable

Create Table

After all resource ready let’s start to build our application. Create an employee table.

Sponsored Links
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.

Create Controller

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

Edit Route

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.

Edit Layout

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.

Display Data

For displaying the data first we need to update the blade file for the base view, create a javascript file for run the datatable plugin and of course the controller for the application logic.

Blade File

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.

Create a JavaScript file

In datatable.blade.php we already include all the script that we needed. But there is 1 script that not come from the downloaded file. That’s is table.js. This JS file will handle javascript functionality in our app. So let’s create table.js in the public/js folder.

Here is the code inside table.js file

Edit Controller

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.

Delete Data

For delete data we create destroy method with the parameter is id from the single row.

Here is all code from DataTableController.

(Visited 30 times, 1 visits today)

Leave A Comment

Your email address will not be published. Required fields are marked *

13 + 10 =