Hello World, Welcome to my website. This is the fourth part of the series Create project from scratch with laravel 5. In the previous part, we have discussed how to create custom admin login with laravel 5.
In this part, We will discuss how we can create read update and delete data with laravel 5. In this series, we are creating an employee management system. This part will help us to create Employee CRUD ( Create, Read, Update and Delete) with laravel. We will add, modify, view and delete employee detail in this part. I have divided this tutorial into the following parts.
- Employee Controller
- Common view for all template
- Employee Views (Create, Read, Update and Delete)
- Routes setting for accessing view
- Employee Model
- Connect the Employee Controller and Model
- Show All data from the database
- Add Data in the database
- Modify data in the database
- Delete data from the database
- Show All Employee in DataTable
- Add Employee Data from Add View
- Modify Employee Data from an update vie
- Delete Employee Data from all data view
Employee Controller
- Create Employee controller with the following command
> php artisan make:controller EmployeeController -r
In the above command, we have added the -r(resources) flag which creates the following empty functions into this employee controller.
- index
- create
- store
- show
- edit
- update
- destroy
Common View
- Create a template.blade.php file in /resources/views folder and add the following code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Employee List</title>
{{-- Bootstrap 4 --}}
<link rel="stylesheet" href="{{ asset('lib/bootstrap.min.css') }}">
<link href="{{ asset('sb-admin/vendor/fontawesome-free/css/all.min.css') }}" rel="stylesheet" type="text/css">
<link href="{{ asset('sb-admin/css/sb-admin.css') }}" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-expand navbar-dark bg-dark static-top">
<a class="navbar-brand mr-1" href="index.html">Employee Management System</a>
<button class="btn btn-link btn-sm text-white order-1 order-sm-0" id="sidebarToggle" href="#">
<i class="fas fa-bars"></i>
</button>
<ul class="ml-auto navbar-nav">
<li class="nav-item"><a class="nav-link" href="{{ url('admin/logout') }}">Logout</a></li>
</ul>
</nav>
<div id="wrapper">
{{-- Sidebar --}}
<ul class="sidebar navbar-nav">
<li class="nav-item">
<a class="nav-link" href="{{ url('/admin') }}">
<i class="fas fa-fw fa-tachometer-alt"></i>
<span>Dashboard</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{ url('admin/employees') }}">
<i class="fas fa-users"></i>
<span>Employees</span></a>
</li>
</ul>
<div id="content-wrapper">
<div class="container-fluid">
<ol class="breadcrumb">
<li class="breadcrumb-item">
<a href="#">Dashboard</a>
</li>
<li class="breadcrumb-item active">Tables</li>
</ol>
@yield('content')
</div>
</div>
</div>
<footer></footer>
<script src="{{ asset('sb-admin/vendor/jquery/jquery.min.js') }}"></script>
<script src="{{ asset('sb-admin/vendor/bootstrap/js/bootstrap.bundle.min.js') }}"></script>
<script src="{{ asset('sb-admin/vendor/jquery-easing/jquery.easing.min.js') }}"></script>
<script src="{{ asset('sb-admin/js/sb-admin.min.js') }}"></script>
</body>
</html>
In the above code, we have created a common template for all admin view.
Here i am using the SB Admin Template. Please keep all the admin files in public/sb-admin folder
Employee View
- All Employee List
- Create employee folder in /resources/views folder.
- Create index.blade.php file in /resources/views/employee folder and add the following code.
@extends('template')
@section('content')
<div class="card mb-3">
<div class="card-header">
<i class="fas fa-table"></i> Employee List
<a href="#" class="btn btn-sm btn-success float-right"><i class="fas fa-plus"></i> Add Data</a>
</div>
<div class="card-body">
<div class="table-responsive">
<table class="table table-bordered" id="dataTable" width="100%" cellspacing="0">
<thead>
<tr>
<th>Name</th>
<th>Mobile</th>
<th>Address</th>
<th>DOB</th>
<th>Department</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Mobile</th>
<th>Address</th>
<th>DOB</th>
<th>Department</th>
<th>Salary</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>1234567890</td>
<td>Edinburgh</td>
<td>2011/04/25</td>
<td>Designing</td>
<td>$320,800</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
@endsection
After adding the above, when you will run the project. You will following screen.
- Add Employee Form
- Create an add.blade.php file in /resources/views/employee folder and add the following code.
@extends('template')
@section('content')
<div class="card mb-3">
<div class="card-header">
<i class="fas fa-table"></i> Employee List
<a href="#" class="btn btn-sm btn-success float-right"><i class="fas fa-plus"></i> Add Data</a>
</div>
<div class="card-body">
<div class="table-responsive">
<form action="{{ url('admin') }}" method="post">
{{ csrf_field() }}
<table class="table table-bordered" width="100%" cellspacing="0">
<tr>
<th>Full Name</th>
<td><input placeholder="Enter Full Name" class="form-control" type="text" name="full_name" /></td>
</tr>
<tr>
<th>DOB</th>
<td><input placeholder="Enter DOB" class="form-control" type="date" name="datepicker" /></td>
</tr>
<tr>
<th>Dapartment</th>
<td>
<select class="form-control" name="department">
<option>Dapartment 1</option>
<option>Dapartment 2</option>
<option>Dapartment 3</option>
<option>Dapartment 4</option>
<option>Dapartment 5</option>
</select>
</td>
</tr>
</table>
</form>
</div>
</div>
</div>
@endsection
- Update Employee Form
Create an update.blade.php file in /resources/views/employee folder and add the following code.
@extends('template')
@section('content')
<div class="card mb-3">
<div class="card-header">
<i class="fas fa-table"></i> Employee List
<a href="#" class="btn btn-sm btn-success float-right"><i class="fas fa-plus"></i> Add Data</a>
</div>
<div class="card-body">
<div class="table-responsive">
<form action="{{ url('admin') }}" method="post">
{{ csrf_field() }}
<table class="table table-bordered" width="100%" cellspacing="0">
<tr>
<th>Full Name</th>
<td><input placeholder="Enter Full Name" class="form-control" type="text" name="full_name" /></td>
</tr>
<tr>
<th>DOB</th>
<td><input placeholder="Enter DOB" class="form-control" type="date" name="datepicker" /></td>
</tr>
<tr>
<th>Dapartment</th>
<td>
<select class="form-control" name="department">
<option>Dapartment 1</option>
<option>Dapartment 2</option>
<option>Dapartment 3</option>
<option>Dapartment 4</option>
<option>Dapartment 5</option>
</select>
</td>
</tr>
</table>
</form>
</div>
</div>
</div>
@endsection
Currently Both files have same code. After creating the model, we will do some changes in both files.
We do not need to create the delete view because when user clicks on delete button then we delete the data from the database and then return to all employee list page with success message.
Routes Setting for Accessing Views
In this section, we will set the Routing(URL path) for displaying the view.
- Open routes/web.php and add the following code at the end of the file.
Route::get('admin/employees','EmployeeController@index');
Route::get('admin/employee/create','EmployeeController@create');
Route::post('admin/employee/store','EmployeeController@store');
Route::get('admin/employee/edit/{id}','EmployeeController@edit');
Route::get('admin/employee/update/{id}','EmployeeController@update');
Route::get('admin/employee/delete/{id}','EmployeeController@destroy');
Now, try to open the application in the browser with defined URL in routes. For example:
http://localhost/laravel-apps/empsystem/public/admin/employee/create
When you open the above URL, you will see the following screen.
Employee Model
In this section, we will create model for employee.
- Open command line and run the following command to create table in database for saving the employee table.
> php artisan make:model Employee -m
Above command will create Employee model in app folder and migration file in /database/migrations folder.
- Open newly created migration file and replace the code of up method with following code.
Schema::create('employees', function (Blueprint $table) {
$table->bigIncrements('id');
$table->string('full_name');
$table->string('gender');
$table->string('mobile');
$table->string('address');
$table->string('dob');
$table->string('department');
$table->string('salary');
$table->timestamps();
});
- Run the following command to create employee table in database.
> php artisan migrate
Above command will create the employees table in database.
Connect the Employee Controller and Model
In this section, we will connect our model with the controller so that we can able to fetch and submit data in the database.
- Open Employee Controller and add the following code just above the employee class.
use App\Employee;
Now we are able to use employee model in this controller.
Show all data from data
Here we will fetch employee data through employee model to employee controller and then pass to the employee list view.
- Open Employee Controller and replace the code of the index method with the following code.
$employees=Employee::all();
return view('employee.index',[
'employees'=>$employees
]);
- Open the resources/views/employees/index.blade.php file and replace the tbody code with the following code.
@if(count($employees)>0)
@foreach($employees as $emp)
<tr>
<td>{{ $emp->full_name }}</td>
<td>{{ $emp->mobile }}</td>
<td>{{ $emp->address }}</td>
<td>{{ $emp->dob }}</td>
<td>{{ $emp->department }}</td>
<td>{{ $emp->salary }}</td>
<td>
<a href="{{ url('admin/employee/update/'.$emp->id) }}" class="text-primary"><i class="fa fa-edit"></i></a>
<a href="{{ url('admin/employee/delete/'.$emp->id) }}" class="text-danger"><i class="fa fa-trash"></i></a>
</td>
</tr>
@endforeach
@endif
Please add some dummy data through phpmyadmin in employees table.
Open the application in the browser with employee/index URL and you will see the list of dummy data like following.
Working on it 🙂