লারাভেল টিউটোরিয়ালের প্রথম পর্বে আমরা লারাভেলের সাথে এজাক্স ব্যাবহার করে কিভাবে বেসিক CRUD (Create / Read / Update /Delete) অপারেশনগুলো করা যায় তা দেখবো । এই টিউটোরিয়াল প্রোজেক্টের জন্য আমরা MySQL ডাটাবেজ ব্যাবহার করবো । টিউটোরিয়ালটি কয়েকটি ধাপে ভাগ করা হয়েছেঃ
১ ) লোকাল সার্ভারে লারাভেল ইন্সটল ও কনফিগার করা
২ ) ডাটাবেজ কনফিগার করা
৩ ) মডেল ও মাইগ্রেশন তৈরি করা
৪ ) কন্ট্রোলার তৈরি করা
৫) রাউট তৈরি করা
৬ ) ভিউ তৈরি এবং AJAX দিয়ে রিকুয়েস্ট পাঠানো
লোকাল সার্ভারে লারাভেল ইন্সটল ও কনফিগার করা
প্রথমেই আমরা যে কাজটি করবো সেটি হচ্ছে লোকাল সার্ভারে লারাভেল ইন্সটল করা । সেটার জন্য আমরা কম্পোজার ইউজ করবো । তবে তার আগে কম্পিউটারে কম্পোজার ইন্সটল থাকতে হবে । CMD খুলে নিচের কমান্ডটি লিখুনঃ
composer create-project laravel/laravel Laravel-Custom-Validation
তবে যদি লারাভেল ইন্সটলার ইন্সটল করা থাকে তাহলে নিচের কমান্ড লিখেও প্রোজেক্ট তৈরি করা যেতে পারে
laravel new Laravel-Custom-Validation
লারাভেল ইন্সটল হয়ে গেলে CMD তে নিচের কমান্ড লিখুন
cd
Laravel-Custom-Validation
প্রোজেক্ট ফোল্ডারে ঢুকার পরে নিচের কমান্ডটি লিখে সার্ভার চালু করুন
php artisan serve
সার্ভার সাধারণত http://localhost:8000 এই অ্যাড্রেসে চালু হয় । এইবার ব্রাউজারে এই লিঙ্ক ওপেন করলে ডিফল্ট লারাভেলের হোম পেজ দেখতে পাবেন ।
ডাটাবেজ কনফিগার করা
ডাটাবেজ কনফিগার করার আগে app/Providers/AppServiceProvider.php
ফাইলটি ওপেন করে নিচের কোডটুকু লিখুন
<?php namespace App\Providers; use Illuminate\Support\ServiceProvider; use Illuminate\Support\Facades\Schema; class AppServiceProvider extends ServiceProvider { /** * Bootstrap any application services. * * @return void */ public function boot() { Schema::defaultStringLength(191); } /** * Register any application services. * * @return void */ public function register() { // } }
এতে করে মাইগ্রেশন চালানোর সময় এরর আসবে না । এবার আপনার প্রোজেক্টের .env
ফাইলটি ওপেন করে নিচের কোডটুকু লিখে ডাটাবেজের সাথে কানেক্ট করুন
DB_CONNECTION=mysql DB_HOST=127.0.0.1 DB_PORT=3306 DB_DATABASE=your_db_name DB_USERNAME=db_username DB_PASSWORD=db_password
উপরের কোডে আপনার ডাটাবেজের নাম , ইউজারনেম এবং পাসওয়ার্ড দিন । পুনরায় সার্ভার চালু করুন ।
মডেল ও মাইগ্রেশন তৈরি করা
এই স্টেপে আমরা মডেল এবং মাইগ্রেশন তৈরি করবো । প্রোজেক্টের সুবিধার জন্য আমরা লারাভেলের ডিফল্ট app/User.php
মডেল নিয়ে কাজ করবো এবং database/migrations/
2014_10_12_000000_create_users_table.php এই মাইগ্রেশন নিয়ে কাজ করবো ( প্রোজেক্ট ভেদে নাম ভিন্ন হতে পারে )। তবে আপনারা চাইলে নিজস্ব মডেল এবং মাইগ্রেশন তৈরি করে নিতে পারেন নিচের কমান্ডের মাধ্যমে
php artisan make:model your_model_name -m
এখন app/User.php
ফাইল ওপেন করে নিচের মতো করে কোড লিখুন
<?php namespace App; use Illuminate\Notifications\Notifiable; use Illuminate\Contracts\Auth\MustVerifyEmail; use Illuminate\Foundation\Auth\User as Authenticatable; class User extends Authenticatable { use Notifiable; /** * The attributes that are mass assignable. * * @var array */ protected $fillable = [ 'username', 'email', 'designation','password', ]; /** * The attributes that should be hidden for arrays. * * @var array */ protected $hidden = [ 'password', 'remember_token', ]; }
এবার database/migrations/
2014_10_12_000000_create_users_table.php ফাইল ওপেন করে নিচের মতো করে কোড লিখুন
<?php use Illuminate\Support\Facades\Schema; use Illuminate\Database\Schema\Blueprint; use Illuminate\Database\Migrations\Migration; class CreateUsersTable extends Migration { /** * Run the migrations. * * @return void */ public function up() { Schema::create('users', function (Blueprint $table) { $table->increments('id'); $table->string('username')->unique(); $table->string('email')->unique(); $table->string('designation'); $table->timestamp('email_verified_at')->nullable(); $table->string('password'); $table->rememberToken(); $table->timestamps(); }); } /** * Reverse the migrations. * * @return void */ public function down() { Schema::dropIfExists('users'); } }
ফাইল সেভ করে নিচের কমান্ড লিখে ডাটাবেজ মাইগ্রেট করুন
php artisan migrate
পিএইচপি মাইএডমিন থেকে ডাটাবেজ ওপেন করে দেখতে পাবেন যে টেবিল গুলো ক্রিয়েট হয়েছে ।
কন্ট্রোলার তৈরি করা
এই স্টেপে আমাদের কাজ হচ্ছে কন্ট্রোলার তৈরি করা । নিচের কমান্ডটি লিখে কন্ট্রোলার তৈরি করা হয়
php artisan make:controller UsersController
কমান্ডটি লিখার ফলে app/Http/Controllers/UsersController.php
নামে একটি কন্ট্রোলার তৈরি হয়ে গেলো ।
<?php namespace App\Http\Controllers; use Illuminate\Http\Request; use App\User; use Validator; use Response; use Illuminate\Validation\Rule; class UsersController extends Controller { // }
কন্ট্রোলারের কোড দেখতে অনেকটা উপরের কোডের মতো হবে । তবে php artisan make:controller -r UsersController
এই কমান্ডটি ইউজ করলে কন্ট্রোলার অনেকটা নিচের মতো হবে ।
<?php namespace App\Http\Controllers; use Illuminate\Http\Request; class UsersController extends Controller { /** * Display a listing of the resource. * * @return \Illuminate\Http\Response */ public function index() { // } /** * Show the form for creating a new resource. * * @return \Illuminate\Http\Response */ public function create() { // } /** * Store a newly created resource in storage. * * @param \Illuminate\Http\Request $request * @return \Illuminate\Http\Response */ public function store(Request $request) { // } /** * Display the specified resource. * * @param int $id * @return \Illuminate\Http\Response */ public function show($id) { // } /** * Show the form for editing the specified resource. * * @param int $id * @return \Illuminate\Http\Response */ public function edit($id) { // } /** * Update the specified resource in storage. * * @param \Illuminate\Http\Request $request * @param int $id * @return \Illuminate\Http\Response */ public function update(Request $request, $id) { // } /** * Remove the specified resource from storage. * * @param int $id * @return \Illuminate\Http\Response */ public function destroy($id) { // } }
রাউট তৈরি করা
এই স্টেপে আমাদের কাজ হচ্ছে রাউট তৈরি করা । routes/web.php
এই ফাইলটি ওপেন করে নিচের মতো কোড লিখুন
<?php /* |-------------------------------------------------------------------------- | Web Routes |-------------------------------------------------------------------------- | | Here is where you can register web routes for your application. These | routes are loaded by the RouteServiceProvider within a group which | contains the "web" middleware group. Now create something great! | */ Route::get('/', 'UsersController@index'); Route::post('/','UsersController@store'); Route::put('/','UsersController@update'); Route::delete('/','UsersController@destroy');
আমরা আমাদের প্রয়োজনীয় রাউট গুলো বানিয়ে ফেললাম । তবে এই রাউটগুলো এখন কাজ করবেনা । কারণ আমরা এখনো কন্ট্রোলারে মেথড তৈরি করিনি । তবে মেথড তৈরি করার আগে আমাদের ভিউ তৈরি করতে হবে ।
ভিউ তৈরি এবং AJAX দিয়ে রিকুয়েস্ট পাঠানো
এই স্টেপে আমাদের কাজ হচ্ছে ভিউ তৈরি করা । resources/views
ফোল্ডারে ঢুকে home.blade.php ফাইলটি তৈরি করুন এবং নিচের কোডগুলো লিখুন
@include('includes.header') <body> <nav class="navbar navbar-dark bg-primary" style="background-color: #00897B !important;"> <h2 class="navbar-brand ml-auto mr-auto">Laravel Ajax</h2> </nav> <div class="container mt-5"> <div class="row"> <div class="col-12"> <div class="card"> <div class="card-header"> <h2 class="float-left">Users</h2> <button class="btn btn-raised btn-success float-right" data-toggle="modal" data-target="#exampleModal">Create</button> </div> <div class="card-body"> <table class="table table-striped" id="userData"> <thead> <tr> <th scope="col" class="text-uppercase">Id</th> <th scope="col" class="text-uppercase">Username</th> <th scope="col" class="text-uppercase">Email Address</th> <th scope="col" class="text-uppercase">Designation</th> <th scope="col" class="text-uppercase">Action</th> </tr> </thead> <tbody> @foreach($users as $user) <tr class="user-{{ $user->id }}"> <td>{{ $user->id }}</td> <td>{{ $user->username }}</td> <td>{{ $user->email }}</td> <td>{{ $user->designation }}</td> <td> <button type="button" class="btn btn-primary btn-raised" data-toggle="modal" id="viewUserModal" data-target="#viewModal" data-id="{{ $user->id }}" data-username="{{ $user->username }}" data-email="{{ $user->email }}" data-designation="{{ $user->designation }}">View</button> <button class="btn btn-raised btn-info" data-toggle="modal" id="editUserModal" data-target="#editModal" data-id="{{ $user->id }}" data-username="{{ $user->username }}" data-email="{{ $user->email }}" data-designation="{{ $user->designation }}">Edit</button> <button class="btn btn-raised btn-danger" id="deleteUserModal" data-toggle="modal" data-target="#deleteModal" data-id="{{ $user->id }}">Remove</button> </td> </tr> @endforeach </tbody> </table> </div> </div> </div> </div> </div> <!-- Add New User Modal --> <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel">Add New User</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <form> <div class="form-group"> <label for="exampleInputEmail1" class="bmd-label-floating">Username</label> <input type="text" class="form-control" name="username"> <span class="text-danger usernameError"></span> </div> <div class="form-group"> <label for="exampleInputEmail1" class="bmd-label-floating">Email Address</label> <input type="email" class="form-control" name="email"> <span class="text-danger emailError"></span> </div> <div class="form-group"> <label for="exampleSelect1" class="bmd-label-floating">Designation</label> <select class="form-control" name="designation"> <option value="">--Choose a Designation--</option> <option value="android-developer">Android Developer</option> <option value="ios-programmer">iOS Programmer</option> <option value="web-developer">Web Developer</option> </select> <span class="text-danger errorDesignation"></span> </div> </form> </div> <div class="modal-footer"> <button class="btn btn-danger" data-dismiss="modal">Close</button> <button type="submit" class="btn btn-success btn-raised" id="create">Save</button> </div> </div> </div> </div> <!-- Edit User Modal --> <div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel">Edit User</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <form> <input type="hidden" class="form-control" name="edit_id"> <div class="form-group"> <label for="exampleInputEmail1" class="bmd-label-floating">Username</label> <input type="text" class="form-control" name="edit_username"> <span class="text-danger errorUsername"></span> </div> <div class="form-group"> <label for="exampleInputEmail1" class="bmd-label-floating">Email Address</label> <input type="email" class="form-control" name="edit_email"> <span class="text-danger errorEmail"></span> </div> <div class="form-group"> <label for="exampleSelect1" class="bmd-label-floating">Designation</label> <select class="form-control" name="edit_designation"> <option value=""></option> <option value="android-developer">Android Developer</option> <option value="ios-programmer">iOS Programmer</option> <option value="web-developer">Web Developer</option> </select> <span class="text-danger errorDesignation"></span> </div> </form> </div> <div class="modal-footer"> <button class="btn btn-danger" data-dismiss="modal">Close</button> <button type="submit" class="btn btn-success btn-raised" id="update">Update</button> </div> </div> </div> </div> <!-- View User Modal --> <div class="modal fade" id="viewModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel">User Details</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <form> <div class="form-group"> <input type="text" class="form-control" name="view_username" disabled> </div> <div class="form-group"> <input type="email" class="form-control" name="view_email" disabled> </div> <div class="form-group"> <select class="form-control" name="view_designation" disabled> <option value=""></option> <option value="android-developer">Android Developer</option> <option value="ios-programmer">iOS Programmer</option> <option value="web-developer">Web Developer</option> </select> </div> </form> </div> <div class="modal-footer"> <button class="btn btn-danger btn-raised" data-dismiss="modal">Close</button> </div> </div> </div> </div> <!-- Delete User Modal --> <div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel">Delete User Confirmation</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <p>Are you sure you want to remove ?</p> <input type="hidden" name="del_id"/> </div> <div class="modal-footer"> <button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button> <button type="button" class="btn btn-success btn-raised" id="delete">Remove</button> </div> </div> </div> </div> @include('includes.footer')
এখন resources/views
ফোল্ডারে ঢুকে includes নামে নতুন আরেকটি ফোল্ডার তৈরি করুন । এই ফোল্ডারের ভিতরে ঢুকে header.blade.php এবং footer.blade.php নামে ফাইল তৈরি করুন এবং নিচের মতো কোড লিখুন
header.blade.php
<!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"> <meta name="_token" content="{{ csrf_token() }}"> <link rel="stylesheet" href="https://unpkg.com/bootstrap-material-design@4.1.1/dist/css/bootstrap-material-design.min.css" integrity="sha384-wXznGJNEXNG1NFsbm0ugrLFMQPWswR3lds2VeinahP8N0zJw9VWSopbjv2x7WCvX" crossorigin="anonymous"> <link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap4.min.css"> <title>Laravel with AJAX</title> </head>
footer.blade.php
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <script src="https://unpkg.com/popper.js@1.12.6/dist/umd/popper.js" integrity="sha384-fA23ZRQ3G/J53mElWqVJEGJzU0sTs+SvzG8fXVWP+kJQ1lwFAOkcUOysnlKJC33U" crossorigin="anonymous"></script> <script src="https://unpkg.com/bootstrap-material-design@4.1.1/dist/js/bootstrap-material-design.js" integrity="sha384-CauSuKpEqAFajSpkdjv3z9t8E7RlpJ1UP0lKM/+NdtSarroVKu069AlsRPKkFBz9" crossorigin="anonymous"></script> <script>$(document).ready(function () { $('body').bootstrapMaterialDesign(); });</script> <script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script> <script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script> <script> $(document).ready(function () { $('#userData').DataTable(); }); </script> <script src="{{ asset('js/crud.js') }}"></script> </body> </html>
এইবার crud.js
নামে public/js
ফোল্ডারে একটি জাভাস্ক্রিপ্ট ফাইল তৈরি করুন । এবার কন্ট্রোলারে ঢুকে নিচের মেথডটি লিখুন ।
// add new user into the database public function store(Request $request){ $validators=Validator::make($request->all(),[ 'username'=>'required|unique:users', 'email'=>'required|email|unique:users', 'designation'=>'required' ]); if($validators->fails()){ return Response::json(['errors'=>$validators->getMessageBag()->toArray()]); }else{ $user=new User(); $user->username=$request->username; $user->email=$request->email; $user->designation=$request->designation; $user->password=bcrypt('password'); $user->save(); return response()->json($user); } }
এই মেথডটি মূলত ডাটা স্টোর করার জন্য ইউজ করা হবে । এখন জাভাস্ক্রিপ্ত ফাইলটি ওপেন করে নিচের মতো কোড লিখুন
$(document).ready(function(){ var table=$('#userData').DataTable(); // add new user $(document).on('click','#create',function(){ event.preventDefault(); var username = $('input[name=username]').val(); var email = $('input[name=email]').val(); var designation = $('select[name=designation]').val(); $.ajax({ type:'POST', url:'/', headers: { 'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content') }, data:{ username:username, email:email, designation:designation }, success:function(data){ if((data.errors)){ if(data.errors.username){ $('.usernameError').text(data.errors.username); }else{ $('.usernameError').text(''); } if (data.errors.email) { $('.emailError').text(data.errors.email); }else{ $('.emailError').text(''); } if (data.errors.designation) { $('.errorDesignation').text(data.errors.designation); }else{ $('.errorDesignation').text(''); } }else{ $('#exampleModal').modal('hide'); $('input[name=username]').val(''); $('input[name=email]').val(''); $('select[name=designation]').val(''); table.row.add($( '<tr class="user-' + data.id + '">' + '<td>'+ data.id +'</td>'+ '<td>' + data.username + '</td>' + '<td>' + data.email + '</td>' + '<td>' + data.designation + '</td>' + '<td>' + '<button type="button" class="btn btn-primary btn-raised" data-toggle="modal" data-target="#viewModal" data-id="'+ data.id +'" data-username="'+ data.username +'" data-email="'+ data.email +'" data-designation="'+ data.designation +'">View</button> '+ '<button class="btn btn-raised btn-info" data-toggle="modal" data-target="#editModal" data-id="' + data.id + '" data-username="'+ data.username +'" data-email="'+ data.email +'" data-designation="'+ data.designation +'">Edit</button> '+ '<button class="btn btn-raised btn-danger" data-id="'+ data.id +'">Remove</button>'+ '</td>' + '</tr>' )).draw(); });
এই কোডটি লারাভেলের রাউট থেকে সার্ভারে রিকুয়েস্ট পাঠাবে ডাটা স্টোর করার জন্য । এবার ডাটা ভিউ পেজে দেখানোর জন্য কন্ট্রোলারে নিচের কোড লিখুন
//load home page with datas public function index(){ $all_users=User::all(); return view('home',['users'=>$all_users]); }
অ্যাজাক্স এর মাধ্যমে ডাটা দেখাতে জাভাস্ক্রিপ্ত ফাইলটি ওপেন করে নিচের মতো কোড লিখুন
// view user data $(document).on('click', '#viewUserModal', function () { event.preventDefault(); $('input[name=view_username]').val($(this).data('username')); $('input[name=view_email]').val($(this).data('email')); $('select[name=view_designation]').val($(this).data('designation')); $('#viewModal').modal('show'); });
উপরের কোডটি মূলত Bootstrap এর মোডালের মাধ্যমে ডাটা দেখানোর জন্য ইউজ করা হয়েছে । এবার ডাটা আপডেট করার জন্য কন্ট্রোলারে নিচের মেথডটি যোগ করুন
// update user according to the id public function update(Request $request){ $validators=Validator::make($request->all(),[ 'username'=>['required',Rule::unique('users')->ignore($request->id)], 'email'=>['required','email',Rule::unique('users')->ignore($request->id)], 'designation'=>'required' ]); if($validators->fails()){ return Response::json(['errors'=>$validators->getMessageBag()->toArray()]); }else{ $user=User::findOrFail($request->id); $user->username=$request->username; $user->email=$request->email; $user->designation=$request->designation; $user->password=bcrypt('password'); $user->save(); return response()->json($user); } }
এবং জাভাস্ক্রিপ্ত ফাইলটি ওপেন করে নিচের কোডটুকু লিখুন
// view user data for editting $(document).on('click', '#editUserModal', function () { event.preventDefault(); $('input[name=edit_username]').val($(this).data('username')); $('input[name=edit_email]').val($(this).data('email')); $('select[name=edit_designation]').val($(this).data('designation')); $('input[name=edit_id]').val($(this).data('id')); $('#editModal').modal('show'); }); // update user $('.modal-footer').on('click', '#update', function () { event.preventDefault(); var username = $('input[name=edit_username]').val(); var email = $('input[name=edit_email]').val(); var designation = $('select[name=edit_designation]').val(); var id=$('input[name=edit_id]').val(); $.ajax({ type: 'PUT', url: '/', headers: { 'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content') }, data: { username: username, email: email, designation: designation, id:id }, success: function (data) { if ((data.errors)) { if (data.errors.username) { $('.errorUsername').text(data.errors.username); } else { $('.errorUsername').text(''); } if (data.errors.email) { $('.errorEmail').text(data.errors.email); } else { $('.errorEmail').text(''); } if (data.errors.designation) { $('.errorDesignation').text(data.errors.designation); } else { $('.errorDesignation').text(''); } } else { $('#editModal').modal('hide'); $('.user-'+data.id).replaceWith( '<tr class="user-' + data.id + '">' + '<td>' + data.id + '</td>' + '<td>' + data.username + '</td>' + '<td>' + data.email + '</td>' + '<td>' + data.designation + '</td>' + '<td>' + '<button type="button" class="btn btn-primary btn-raised" data-toggle="modal" data-target="#viewModal" data-id="' + data.id + '" data-username="' + data.username + '" data-email="' + data.email + '" data-designation="' + data.designation + '">View</button>' + '<button class="btn btn-raised btn-info" data-toggle="modal" data-target="#editModal" data-id="' + data.id + '" data-username="' + data.username + '" data-email="' + data.email + '" data-designation="' + data.designation + '">Edit</button>' + '<button class="btn btn-raised btn-danger" data-id="' + data.id + '">Remove</button>' + '</td>' + '</tr>' ); } } }); });
তাহলে আমাদের ডাটা স্টোর , আপডেটের কাজ শেষ । এখন শুধু বাকি থাকে ডাটা ডিলিট করার । ডাটা ডিলিট করার জন্য কন্ট্রোলারে মেথড যোগ করতে হবে
// remove user from the database public function destroy(Request $request){ User::findOrFail($request->id)->delete(); return response()->json(); }
একই ভাবে জাভাস্ক্রিপ্ট ফাইলে নিচের মতো করে কোড যোগ করুন
// open delete user modal $(document).on('click', '#deleteUserModal', function () { event.preventDefault(); $('#deleteModal').modal('show'); $('input[name=del_id]').val($(this).data('id')); }); // delete user $('.modal-footer').on('click', '#delete', function () { event.preventDefault(); $.ajax({ type: 'delete', url: '/', headers: { 'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content') }, data: { id: $('input[name=del_id]').val() }, success: function (data) { $('#deleteModal').modal('hide'); table.row($('.user-' + $('input[name=del_id]').val())).remove().draw(false); } }); });
এই কোডটি প্রধানত ডিলিট কনফার্মেশন চাবে এবং ডাটাবেজ থেকে ডাটা ডিলিট করবে ।
ফাইনাল কন্ট্রোলার কোড
<?php namespace App\Http\Controllers; use Illuminate\Http\Request; use App\User; use Validator; use Response; use Illuminate\Validation\Rule; class UsersController extends Controller { //load home page with datas public function index(){ $all_users=User::all(); return view('home',['users'=>$all_users]); } // add new user into the database public function store(Request $request){ $validators=Validator::make($request->all(),[ 'username'=>'required|unique:users', 'email'=>'required|email|unique:users', 'designation'=>'required' ]); if($validators->fails()){ return Response::json(['errors'=>$validators->getMessageBag()->toArray()]); }else{ $user=new User(); $user->username=$request->username; $user->email=$request->email; $user->designation=$request->designation; $user->password=bcrypt('password'); $user->save(); return response()->json($user); } } // update user according to the id public function update(Request $request){ $validators=Validator::make($request->all(),[ 'username'=>['required',Rule::unique('users')->ignore($request->id)], 'email'=>['required','email',Rule::unique('users')->ignore($request->id)], 'designation'=>'required' ]); if($validators->fails()){ return Response::json(['errors'=>$validators->getMessageBag()->toArray()]); }else{ $user=User::findOrFail($request->id); $user->username=$request->username; $user->email=$request->email; $user->designation=$request->designation; $user->password=bcrypt('password'); $user->save(); return response()->json($user); } } // remove user from the database public function destroy(Request $request){ User::findOrFail($request->id)->delete(); return response()->json(); } }
এবং ফাইনাল জাভাস্ক্রিপ্ট কোড হবে
$(document).ready(function(){ var table=$('#userData').DataTable(); // add new user $(document).on('click','#create',function(){ event.preventDefault(); var username = $('input[name=username]').val(); var email = $('input[name=email]').val(); var designation = $('select[name=designation]').val(); $.ajax({ type:'POST', url:'/', headers: { 'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content') }, data:{ username:username, email:email, designation:designation }, success:function(data){ if((data.errors)){ if(data.errors.username){ $('.usernameError').text(data.errors.username); }else{ $('.usernameError').text(''); } if (data.errors.email) { $('.emailError').text(data.errors.email); }else{ $('.emailError').text(''); } if (data.errors.designation) { $('.errorDesignation').text(data.errors.designation); }else{ $('.errorDesignation').text(''); } }else{ $('#exampleModal').modal('hide'); $('input[name=username]').val(''); $('input[name=email]').val(''); $('select[name=designation]').val(''); table.row.add($( '<tr class="user-' + data.id + '">' + '<td>'+ data.id +'</td>'+ '<td>' + data.username + '</td>' + '<td>' + data.email + '</td>' + '<td>' + data.designation + '</td>' + '<td>' + '<button type="button" class="btn btn-primary btn-raised" data-toggle="modal" data-target="#viewModal" data-id="'+ data.id +'" data-username="'+ data.username +'" data-email="'+ data.email +'" data-designation="'+ data.designation +'">View</button> '+ '<button class="btn btn-raised btn-info" data-toggle="modal" data-target="#editModal" data-id="' + data.id + '" data-username="'+ data.username +'" data-email="'+ data.email +'" data-designation="'+ data.designation +'">Edit</button> '+ '<button class="btn btn-raised btn-danger" data-id="'+ data.id +'">Remove</button>'+ '</td>' + '</tr>' )).draw(); } } }); }); // view user data $(document).on('click', '#viewUserModal', function () { event.preventDefault(); $('input[name=view_username]').val($(this).data('username')); $('input[name=view_email]').val($(this).data('email')); $('select[name=view_designation]').val($(this).data('designation')); $('#viewModal').modal('show'); }); // view user data for editting $(document).on('click', '#editUserModal', function () { event.preventDefault(); $('input[name=edit_username]').val($(this).data('username')); $('input[name=edit_email]').val($(this).data('email')); $('select[name=edit_designation]').val($(this).data('designation')); $('input[name=edit_id]').val($(this).data('id')); $('#editModal').modal('show'); }); // update user $('.modal-footer').on('click', '#update', function () { event.preventDefault(); var username = $('input[name=edit_username]').val(); var email = $('input[name=edit_email]').val(); var designation = $('select[name=edit_designation]').val(); var id=$('input[name=edit_id]').val(); $.ajax({ type: 'PUT', url: '/', headers: { 'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content') }, data: { username: username, email: email, designation: designation, id:id }, success: function (data) { if ((data.errors)) { if (data.errors.username) { $('.errorUsername').text(data.errors.username); } else { $('.errorUsername').text(''); } if (data.errors.email) { $('.errorEmail').text(data.errors.email); } else { $('.errorEmail').text(''); } if (data.errors.designation) { $('.errorDesignation').text(data.errors.designation); } else { $('.errorDesignation').text(''); } } else { $('#editModal').modal('hide'); $('.user-'+data.id).replaceWith( '<tr class="user-' + data.id + '">' + '<td>' + data.id + '</td>' + '<td>' + data.username + '</td>' + '<td>' + data.email + '</td>' + '<td>' + data.designation + '</td>' + '<td>' + '<button type="button" class="btn btn-primary btn-raised" data-toggle="modal" data-target="#viewModal" data-id="' + data.id + '" data-username="' + data.username + '" data-email="' + data.email + '" data-designation="' + data.designation + '">View</button> ' + '<button class="btn btn-raised btn-info" data-toggle="modal" data-target="#editModal" data-id="' + data.id + '" data-username="' + data.username + '" data-email="' + data.email + '" data-designation="' + data.designation + '">Edit</button> ' + '<button class="btn btn-raised btn-danger" data-id="' + data.id + '">Remove</button>' + '</td>' + '</tr>' ); } } }); }); // open delete user modal $(document).on('click', '#deleteUserModal', function () { event.preventDefault(); $('#deleteModal').modal('show'); $('input[name=del_id]').val($(this).data('id')); }); // delete user $('.modal-footer').on('click', '#delete', function () { event.preventDefault(); $.ajax({ type: 'delete', url: '/', headers: { 'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content') }, data: { id: $('input[name=del_id]').val() }, success: function (data) { $('#deleteModal').modal('hide'); table.row($('.user-' + $('input[name=del_id]').val())).remove().draw(false); } }); }); });
প্রোজেক্ট রান করলে নিচের মতো পেজ দেখাবে
Create বাটনে ক্লিক করলে একটা Bootstrap মডাল আসবে যেটার মাধ্যমে ডাটা স্টোর করা যাবে । View বাটনে ক্লিক করলে ইউজার ইনফরমেশন দেখাবে । Edit বাটনে ক্লিক করলে ইউজার ইনফো সহকারে এডিট অপশন আসবে । ঠিক একই ভাবে Remove বাটনে ক্লিক করলে ডিলিট কনফার্মেশন চাবে এবং ডাটা ডিলিট করবে । তো এই ছিল আজকের আর্টিকেল লেখার উদ্দেশ্য । আশা করি পোস্টটি ভাল লাগবে আপনাদের । পুরো প্রোজেক্ট ডাউনলোড করতে পারেন গিটহাব থেকে । আগামী টিউটোরিয়ালে কথা হবে । ধন্যবাদ
Hi, I got a problem after just copy & paste your code.
Everything seems ok, But ….
Let assume there have 4 users in my database, so I can see the message at the bottom “Showing 1 to 4 of 4 entries”. I’ve deleted one user, it removed one user from the list, but still, I can see the bottom message showing “Showing 1 to 4 of 4 entries” even if I search for the username of the deleted item, it shows me the result containing the deleted user. Unless I refresh the browser, the data has not removed permanently.
And same for the insert …
So, I want to know is there any solution to get rid of this problem?
Code has been updated.Hope it will help to solve your issue 🙂