Laravel 8 Crud Operations Example

Laravel

In this post we have learn how to Laravel 8 Crud Operations Example. Also in this post we will learn such as Laravel 8 CRUD Application Tutorial for Beginners, Laravel 8 CRUD Tutorial by Example, Laravel 8 CRUD Tutorial Example Step By Step, laravel 8 crud with image upload, laravel 8 display image ect.

Laravel 8 Crud Operations Example

Step 1: Install Laravel 5.8

In this step, if you haven’t laravel 8 application setup then we have to get fresh laravel 8 application. So run bellow command and get clean fresh laravel 8 application.

composer create-project --prefer-dist laravel/laravel blog

Step 2 : Install Yajra Datatable Package

We need to install yajra datatable composer package for datatable, so you can install using following command:

composer require yajra/laravel-datatables-oracle

After that you need to set providers and alias.

config/app.php

.....

'providers' => [
....
Yajra\DataTables\DataTablesServiceProvider::class,
]

'aliases' => [
....
'DataTables' => Yajra\DataTables\Facades\DataTables::class,
]

.....

route/web.php

<?php

  use Illuminate\Support\Facades\Route;
  use App\Http\Controllers\UserController;

  Route::get("/", [UserController::class, "index"])->name("list");

  Route::get('user', function () {
   return view('crud.form');
 })->name("user");

 Route::get("user_edit/{id}",[UserController::class, "user_edit"]);
 Route::get("user_delete/{id}",[UserController::class, "user_delete"]);
 Route::post("save_user",[UserController::class, "save_user"]);

Create view file : crud/form.blade.php

<!DOCTYPE html>
<html lang="en">
 <head>
  <title>Laravel 8 Crud Operations Example </title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>

 <div class="container">
  <h2 class="text-center">Laravel 8 Crud Operations Example</h2>
  <form action="{{ isset($user->id) ? '../save_user' : 'save_user'}}" method="post" enctype='multipart/form-data'>
  @csrf

   <input type="hidden" id="id" name="id" value="{{ isset($user->id) ? $user->id : ''}}">
   <div class="form-group">
    <label for="email">Email:</label>
    <input type="email" class="form-control" id="email" placeholder="Enter email" name="email" value="{{ isset($user->email) ? $user->email : ''}}">
  </div>
  <div class="form-group">
   <label for="pwd">Password:</label>
   <input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pwd" value="{{ isset($user->password) ? $user->password : ''}}">
 </div>

 <div class="form-group">
  <label for="country">Country:</label>
  <select name="country" id="country" class="form-control">
   <option value="india" <?= isset($user->country) && ($user->country== 'india') ? "selected" : "" ; ?>>India</option>
   <option value="srilanka" <?= isset($user->country) && ($user->country== 'srilanka') ? "selected" : "" ; ?>>SriLanka</option>
   <option value="usa" <?= isset($user->country) && ($user->country== 'usa') ? "selected" : "" ; ?>>USA</option>
  </select>
</div>

<div class="form-group">
 <label>Gender : </label>
 <label for="male">Male</label>
 <input type="radio" name="gender" value="male" <?= isset($user->gender) && ($user->gender== 'male') ? "checked" : "" ; ?>>
 <label for="female">Female</label>
 <input type="radio" name="gender" value="female" <?= isset($user->gender) && ($user->gender== 'female') ? "checked" : "" ; ?>>
</div>

<?php 
 if(isset($user->hobbies)){
   $hobbies = explode(',', $user->hobbies);
 }
?>
<div class="form-group">
  <label><strong>Hobbies :</strong></label>
  <label><input type="checkbox" name="hobbies[]" value="Reading" <?= isset($user->hobbies) && in_array("Reading", $hobbies) ? "checked" : "" ; ?>> Reading</label>
  <label><input type="checkbox" name="hobbies[]" value="Writing" <?= isset($user->hobbies) && in_array("Writing", $hobbies) ? "checked" : "" ; ?>> Writing</label>
  <label><input type="checkbox" name="hobbies[]" value="Developing" <?= isset($user->hobbies) && in_array("Developing", $hobbies) ? "checked" : "" ; ?>> Developing</label>
  <label><input type="checkbox" name="hobbies[]" value="Music" <?= isset($user->hobbies) && in_array("Music", $hobbies) ? "checked" : "" ; ?>> Music</label>
  <label><input type="checkbox" name="hobbies[]" value="Dance" <?= isset($user->hobbies) && in_array("Dance", $hobbies) ? "checked" : "" ; ?>> Dance</label>
</div> 


<div class="form-group">
 <label for="photo">Photo:</label>
 <input type="file" class="form-control" id="photo" name="photo">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>

</body>
</html>

Create model file : User.php

<?php

  namespace App;
  use Illuminate\Database\Eloquent\Model;

  class User extends Model
  {

  }

Create controller file :

<?php

  namespace App\Http\Controllers;

  use Illuminate\Http\Request;
  use App\User;
  use DataTables;
  use File;
  class UserController extends Controller
  {

   function index(Request $request){
    if ($request->ajax()) {
    $data = User::latest()->get();
    return Datatables::of($data)
    ->addIndexColumn()
    ->addColumn('action', function($row){

   $btn = '<a href="user" class="edit btn btn-primary btn-sm">+</a>
          <a href="user_edit/'.$row->id.'" class="edit btn btn-warning btn-sm"><i class="fas fa-edit"></i></a>
          <a href="user_delete/'.$row->id.'" class="edit btn btn-danger btn-sm">X</a>
         ';

      return $btn;
   })
   ->addColumn('photo', function ($photo) {
   return '<img src="public/uploads/'.$photo->photo.'" border="0" width="40" class="img-rounded" align="center" />';
})
->rawColumns(['photo','action']) 
->make(true);
}

return view('crud.list');
}

function save_user(Request $request){
  $id = $request->id;
  if(!empty($id)){
  $user = User::find($request->id);

  $hobbies = implode(',', $request->hobbies);
  if($request->hasFile('photo')) {
    if (File::exists(public_path("uploads/{$user->photo}"))) {
       File::delete(public_path("uploads/{$user->photo}"));
    }

   $img = time()."_".$request->photo->getClientOriginalName();
   $request->photo->move(public_path('uploads'), $img);
 }else{
   $img = $user['photo'];
}

$user->email = $request->email;
$user->password = $request->pwd;
$user->country = $request->country;
$user->gender = $request->gender;
$user->hobbies = $hobbies;
$user->photo = $img;
$user->save();
return back();
}else if(empty($id)){

$img = time()."_".$request->photo->getClientOriginalName();
$hobbies = implode(',', $request->hobbies);
$request->photo->move(public_path('uploads'), $img);

$user = new User;
$user->email = $request->email;
$user->password = $request->pwd;
$user->country = $request->country;
$user->gender = $request->gender;
$user->hobbies = $hobbies;
$user->photo = $img;

$user->save();
return back();
}
}

function user_delete($id){
  $user = User::find($id);
  if (File::exists(public_path("uploads/{$user->photo}"))) {
    File::delete(public_path("uploads/{$user->photo}"));
  }
$user->delete();
return redirect()->route('user');
}

function user_edit($id){
  $user["user"] = User::find($id);

  return view("crud.form",$user);
}
}

Create view file : list.blade.php

<!DOCTYPE html>
<html>
 <head>
  <title>Laravel 8 Datatables Tutorial - Web-tuts.com</title>
  <meta name="csrf-token" content="{{ csrf_token() }}">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" />
  <link href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet">
  <link href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap4.min.css" rel="stylesheet">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script> 
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.js"></script>
  <script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
  <script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" integrity="sha512-HK5fgLBL+xu6dm/Ii3z4xhlSUyZgTT9tuc/hSrtw6uzJOvgRr2a9jyxxT1ely+B+xFAmJKVSTbpM/CuL7qxO8w==" crossorigin="anonymous" />
</head>
<body>

  <div class="container">
   <h1>Laravel 8 Datatables Tutorial <br/> Web-tuts.com</h1>
   <table class="table table-bordered data-table">
    <thead>
     <tr>
      <th>No</th>
      <th>Email</th>
      <th>Password</th>
      <th>Country</th>
      <th>Gender</th>
      <th>Hobbies</th>
      <th>Photo</th>
     <th width="100px">Action</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
 </table>
</div>

</body>

<script type="text/javascript">
 $(function () {

  var table = $('.data-table').DataTable({
    processing: true,
    serverSide: true,
    ajax: "{{ route('list') }}",
    columns: [
      {data: 'DT_RowIndex', name: 'DT_RowIndex'},
      {data: 'email', name: 'email'},
      {data: 'password', name: 'password'},
      {data: 'country', name: 'country'},
      {data: 'gender', name: 'gender'},
      {data: 'hobbies', name: 'hobbies'},
      {data: 'photo', name: 'photo'},
      {data: 'action', name: 'action', orderable: false, searchable: false},
    ]
 });

});
</script>
</html>

Related posts:

Read Also :  Laravel Razorpay Payment Gateway Example