January 16, 2021
লারাভেল

লারাভেল ফ্রেমওয়ার্ক এবং Ajax নিয়ে বেসিক CRUD অপারেশন

By আসিফ খান / March 7, 2019

লারাভেল টিউটোরিয়ালের প্রথম পর্বে আমরা লারাভেলের সাথে এজাক্স ব্যাবহার করে কিভাবে বেসিক 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">&times;</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">&times;</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">&times;</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">&times;</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 বাটনে ক্লিক করলে ডিলিট কনফার্মেশন চাবে এবং ডাটা ডিলিট করবে । তো এই ছিল আজকের আর্টিকেল লেখার উদ্দেশ্য । আশা করি পোস্টটি ভাল লাগবে আপনাদের । পুরো প্রোজেক্ট ডাউনলোড করতে পারেন গিটহাব থেকে ।  আগামী টিউটোরিয়ালে কথা হবে । ধন্যবাদ



Comments

comments

Tags: , , , , ,

একই রকম পোস্ট

2 thoughts on “লারাভেল ফ্রেমওয়ার্ক এবং Ajax নিয়ে বেসিক CRUD অপারেশন”

  1. 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?

    Reply

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: