লারাভেল টিউটোরিয়ালের প্রথম পর্বে আমরা লারাভেলের সাথে এজাক্স ব্যাবহার করে কিভাবে বেসিক 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 বাটনে ক্লিক করলে ডিলিট কনফার্মেশন চাবে এবং ডাটা ডিলিট করবে । তো এই ছিল আজকের আর্টিকেল লেখার উদ্দেশ্য । আশা করি পোস্টটি ভাল লাগবে আপনাদের । পুরো প্রোজেক্ট ডাউনলোড করতে পারেন গিটহাব থেকে । আগামী টিউটোরিয়ালে কথা হবে । ধন্যবাদ
Comments
একই রকম পোস্ট
2 thoughts on “লারাভেল ফ্রেমওয়ার্ক এবং Ajax নিয়ে বেসিক CRUD অপারেশন”
Leave a Reply
This site uses Akismet to reduce spam. Learn how your comment data is processed.
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 🙂