Laravel 8 CRUD Example with jQuery Datatable

This laravel tutorial help to add CRUD operation with datatable, I will just share laravel code to create a new record, edit a record and delete a record.

I have already shared How To Use jQuery Datatable With Laravel. We have integrated jQuery datatable with laravel.

We will cover the following functionality in this laravel tutorial :

• Create a record Template view using bootstrap.
• Create a Method to add a new record to the Database.
• Update record Template view using bootstrap.
• Update Method to save an edit record values into Database.
• Display a single record of data.
• Delete a record from Database.

Laravel CRUD Operation Example Using Datatable

As discussed earlier in this tutorial, I am extending My Previous tutorial.

Create New Record Template

Let’s create a new record functionality in this tutorial. We will add route entry, create a new view file and add logic to handle saving records into the database.

Step 1: Create a new create.blade.php file into resources/view/emp folder. We will add the below code into this file :

@extends('layouts.master')
@section('content')
<div class="main-content-inner">
<div class="page-content">
<div class="col-xs-12">
<h3 class="header smaller lighter blue">Add Employee</h3>
<form accept-charset="UTF-8" action="{{ route('emp.store')}}" method="post">
<div class="col-md-12">
<div class="form-area">
<div class="alert alert-success hide">&nbsp;</div>
<input name="_token" type="hidden" value="{{ csrf_token() }}">
<div class="alert alert-danger hide">&nbsp;</div>
<div class="form-group"><input id="employee_name" class="form-control" name="employee_name" type="text" value="{{ old('employee_name') }}" placeholder="Name"> @if ($errors->has('name')) @endif</div>
<div class="form-group"><input id="employee_salary" class="form-control" name="employee_salary" pattern="[0-9]*" type="number" placeholder="Salary Number"></div>
<div class="form-group"><input id="employee_age" class="form-control" name="employee_age" type="number" placeholder="age"></div>
<button id="submit" class="btn btn-primary pull-right" name="submit" type="submit">Add Employee</button></div>
</div>
</form></div>
</div>
</div>
@stop

Step 2: Create a button to add a new record in index.blade.php file.

<div class="clearfix well">
   <a href="/emp/create" class="btn btn-primary pull-right">Create</a>
</div>

When we clicked the above button, we will redirect to add a new record template.

Step 3: Let’s add logic to save record into the database. We will add the below code into the store method in Controllers/EmpController.php file.

public function store(Request $request)
    {
        $data = $this->validate($request, [
            'employee_name' => 'required',
            'employee_salary' => 'required|integer',
            'employee_age' => 'required|integer'
         ]);
        $emp = new Employee([
        'employee_name' => $request->'employee_name'),
        'employee_salary'=> $request->get('employee_salary'),
        'employee_age'=> $request->get('employee_age')
      ]);
      
      $emp->save();
      return redirect('/emp')->with('success', 'Employee has been added into db.');
    }

Update A Record Into Laravel

We will create a method to get data and save updated values into the database.

Step 1: Create a method to get particular employee data and send to the edit template.

public function edit($id)
    {
        $emp = Employee::find($id);

        return view('emp.update', compact('emp'));
    }

Step 2: Create a file update.blade.php into resources/view/emp folder. We will add the below code into this file :

@extends('layouts.master')
@section('content')

<div class="main-content-inner">

<div class="page-content">

<div class="col-xs-12">

<h3 class="header smaller lighter blue">Edit Employee - {{$emp->employee_name}}</h3>


<div class="col-md-12">

<div class="form-area">  
        <form role="form" method="post" action="{{ route('emp.update', $emp->id)}}" accept-charset="UTF-8">
          <input name="_method" type="hidden" value="PUT">

<div class="alert alert-success hide"></div>

           <input name="_token" type="hidden" value="{{ csrf_token() }}">

<div class="alert alert-danger hide"></div>


<div class="form-group">
            <input type="text" class="form-control" id="name" name="employee_name" value="{{$emp->employee_name}}" placeholder="Name">
</div>


<div class="form-group">
            <input type="number" pattern="[0-9]*" class="form-control" id="employee_salary" name="employee_salary" value="{{ $emp->employee_salary }}" placeholder="Salary Number">
</div>


<div class="form-group">
            <input class="form-control" type="number" id="employee_age" name="employee_age" placeholder="age" value="{{ $emp->employee_age }}">               
</div>

          <button type="submit" id="submit" name="submit" class="btn btn-primary pull-right">Update Employee</button>
        </form>
</div>

</div>


</div>

</div>

</div>

@stop

Step 3: Create a button to edit data from index.blade.php file.

<!-- edit this nerd (uses the edit method found at GET /nerds/{id}/edit -->
<a class="btn btn-small btn-info" href="{{ URL::to('emp/' . $emp->id . '/edit')}}">Edit</a>

When we clicked the above button, we will redirect to edit the new record template.

Step 4: We will add the below code into update() method under Controllers/EmpController.php file. This method is responsible to update data into the database.

public function update(Request $request, $id)
    {
        $data = $this->validate($request, [
            'employee_name'=>'required',
            'employee_salary'=> 'required|integer',
            'employee_age' => 'required|integer'
         ]);

      $emp = Employee::find($id);
      $emp->employee_name = $request->get('employee_name');
      $emp->employee_salary = $request->get('employee_salary');
      $emp->employee_age = $request->get('employee_age');
      $emp->save();
      return redirect('/emp')->with('success', 'Employee has been updated Successfully.');
    }

Show A Record Into Laravel

We will add a button to show details of an employee. We will create a method and template to display employee data.

Step 1: Create a method to get particular employee data and send it to show template,

public function show($id)
    {
        $emp = Employee::find($id);
        return view('emp.show', compact('emp'));
    }

Step 2: Create a file show.blade.php into resources/view/emp folder. We will add the below code into this file :

@extends('layouts.master') 
@section('content')

<div class="main-content-inner">

<div class="page-content">

<div class="col-xs-12">


<h3 class="header smaller lighter blue">Employee Data - {{$emp->employee_name}}</h3>

        

<div class="profile-user-info profile-user-info-striped">

<div class="profile-info-row">

<div class="profile-info-name"> Name</div>



<div class="profile-info-value">
                        {{$emp->employee_name}}
</div>

</div>



<div class="profile-info-row">

<div class="profile-info-name"> Age</div>



<div class="profile-info-value">
                        {{$emp->employee_age}}
</div>

</div>



<div class="profile-info-row">

<div class="profile-info-name"> Salary</div>



<div class="profile-info-value">
                       {{$emp->employee_salary}}
</div>

</div>

</div>


<div>
</div>

</div>

</div>


</div>

@stop

Step 3: Add a button to display data, we will add the below button into index.blade.php file.

<a class="btn btn-small btn-success" href="{{ URL::to('emp/' . $emp->id) }}">Show</a>

Delete A Record Into Laravel

Now, Implements delete record functionality into laravel.

Step 1: Add a button to delete data, we will add the below button into index.blade.php file.

<a class="btn btn-small btn-success" href="{{ URL::to('emp/' . $emp->id) }}">Show</a>

Step 2: Delete method to remove particular employee data from a database.

public function destroy($id)
    {
        $emp = Employee::find($id);
        $emp->delete();

        return redirect('/emp')->with('success', 'Employee has been deleted Successfully.');
    }