Kiến thức

Sử dụng Ajax CURD Laravel 6 với DataTables-Blog of Hien Tran

Laravel

Php

admin

Sử dụng Ajax CURD Laravel 6 với DataTables

Hôm nay mình sẽ hướng dẫn các bạn tạo một ví dụ đơn giản sử dụng laravel 6 kết hợp với thư viện yajra dataTable, chúng ta sẽ tạo một ứng dụng hiển thị dach sách các sản phẩm có thể thêm, sửa, xóa sản phẩm với dataTable.

Nội dung:

  • Cài đặt Laravel
  • Cài đặt Database
  • Database Migration
  • Cài đặt Yajra DataTables
  • Tạo Route, Controller & Blade View
  • Chạy ứng dụng
  • Demo

Bạn đang xem: Sử dụng Ajax CURD Laravel 6 với DataTables-Blog of Hien Tran

Cài đặt Laravel

Để tạo mới một project trong laravel chúng ta sẽ dùng câu lệnh composer :

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

Xem thêm: Cách tìm Giá trị lớn nhất và Giá trị nhỏ nhất của hàm số Lượng giác-Toán 12 chuyên đề

Cài đặt Database

Sau khi tạo xong project laravel, đi đến thưc mục của project mở file .env (nếu không có thì phải phải tạo file .env từ file .env.example ) sau đó cập nhật file .env với nội dung như dưới đây:

 DB_CONNECTION=mysql DB_HOST=127.0.0.1 DB_PORT=3306 DB_DATABASE=ten database DB_USERNAME=ten nguoi dung database DB_PASSWORD=mat khau truy cap database

Database Migration

Tiếp theo chúng ta sẽ thực hiện tạo product model và migration. Chạy câu lệnh dưới đây:

php artisan make:model Product --migration

Sau khi chạy câu lệnh trên sẽ tạo Model trong thư mục app và một file migration 2019_11_12_023506_create_products_table.php trong thư mục database/migrations. Bây giờ bạn hãy mở file migration lên và thêm vào nội dung như sau:

<?php use IlluminateSupportFacadesSchema; use IlluminateDatabaseSchemaBlueprint; use IlluminateDatabaseMigrationsMigration; class CreateProductsTable extends Migration { /** * Run the migrations. * * @return void */ public function up() { Schema::create('products', function (Blueprint $table) { $table->bigIncrements('id'); $table->string('title'); $table->string('product_code'); $table->string('description'); $table->timestamps(); }); } /** * Reverse the migrations. * * @return void */ public function down() { Schema::dropIfExists('products'); } } 

 

Bây giờ hãy chạy câu lệnh dưới đây để thực hiện tạo bảng:

php artisan migrate

Sau khi chạy câu lệnh này thì bảng products và các thuộc thính của nó được khai báo trong file migration sẽ được tạo trong database.

Xem thêm: Chromium trioxide (CrO3) 99%, Nga, 50kg/thùng

Cài đặt Yajra DataTables

Chạy câu lệnh sau để thực hiện cài đặt Yajra Datatables Packages  cho ứng dụng của bạn:

composer require yajra/laravel-datatables-oracle

Sau quá trình cài đặt thành công mở file config/app.php thêm provider và alias như sau: (lưu ý nếu trong đã tồn tại thì không cần phải thêm)

'providers' => [ YajraDatatablesDatatablesServiceProvider::class, ], 'aliases' => [ 'Datatables' => YajraDatatablesFacadesDatatables::class, ] 

Tiếp theo cần phải publish vào vendor, bạn cần chạy câu lệnh sau:

 

php artisan vendor:publish --tag=datatables

Câu lệnh trên sẽ tạo một file có tên là datatables.php trong thư mục config.

Tạo Route, Controller & Blade View

Để thêm route các bạn mở file routes/web.php và thêm nội dung như sau:

Route::get('product-list', '

[email protected]

'); Route::get('product-list/{id}/edit', '

[email protected]

'); Route::post('product-list/store', '

[email protected]

'); Route::get('product-list/delete/{id}', '

[email protected]

');

Tiếp theo chúng ta sẽ tạo controller chúng ta sẽ thực hiện câu lệnh sau:

php artisan make:controller ProductController --resource

Bây giờ bạn hãy đi đến thư mục app/Http/Controllers/ bạn sẽ thấy một file ProductController.php  được tạo mới, mở file này lên bạn sẽ thấy một số phương thức được khai báo sẵn trong này, giờ bạn hãy cập nhật lại các phương thức đó như sau:

<?php namespace AppHttpControllers; use AppProduct; use IlluminateHttpRequest; use Redirect,Response; class ProductController extends Controller { /** * Display a listing of the resource. * * @return IlluminateHttpResponse */ public function index() { if(request()->ajax()) { return datatables()->of(Product::select('*')) ->addColumn('action', 'DataTables.action') ->rawColumns(['action']) ->addIndexColumn() ->make(true); } return view('list'); } /** * Store a newly created resource in storage. * * @param IlluminateHttpRequest $request * @return IlluminateHttpResponse */ public function store(Request $request) { $productId = $request->product_id; $product = Product::updateOrCreate(['id' => $productId], ['title' => $request->title, 'product_code' => $request->product_code, 'description' => $request->description]); return Response::json($product); } /** * Show the form for editing the specified resource. * * @param AppProduct $product * @return IlluminateHttpResponse */ public function edit($id) { $where = array('id' => $id); $product = Product::where($where)->first(); return Response::json($product); } /** * Remove the specified resource from storage. * * @param AppProduct $product * @return IlluminateHttpResponse */ public function destroy($id) { $product = Product::where('id',$id)->delete(); return Response::json($product); } } 

Tiếp theo chúng ta sẽ tạo 1 view chứa các nút edit và delete.

 <a href="javascript:void(0)" data-toggle="tooltip" data-id="{{ $id }}" data-original-title="Edit" class="edit btn btn-success edit-product"> Edit </a> <a href="javascript:void(0);" id="delete-product" data-toggle="tooltip" data-original-title="Delete" data-id="{{ $id }}" class="delete btn btn-danger"> Delete </a> 

Tiếp đến sẽ tạo 1 file view để hiển thị danh sách sản phẩm

<!DOCTYPE html> <html lang="en"> <head> <!-- CSRF Token --> <meta name="csrf-token" content="{{ csrf_token() }}"> <title>Laravel DataTable Ajax Crud Tutorial - Tuts Make</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" /> <link href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.js"></script> <script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>Laravel DataTable Ajax Crud Tutorial - <a href="https://www.tutsmake.com" target="_blank">TutsMake</a></h2> <br> <a href="https://www.tutsmake.com/how-to-install-yajra-datatables-in-laravel/" class="btn btn-secondary">Back to Post</a> <a href="javascript:void(0)" class="btn btn-info ml-3" id="create-new-product">Add New</a> <br><br> <table class="table table-bordered table-striped" id="laravel_datatable"> <thead> <tr> <th>ID</th> <th>S. No</th> <th>Title</th> <th>Product Code</th> <th>Description</th> <th>Created at</th> <th>Action</th> </tr> </thead> </table> </div> <div class="modal fade" id="ajax-product-modal" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title" id="productCrudModal"></h4> </div> <div class="modal-body"> <form id="productForm" name="productForm" class="form-horizontal"> <input type="hidden" name="product_id" id="product_id"> <div class="form-group"> <label for="name" class="col-sm-2 control-label">Title</label> <div class="col-sm-12"> <input type="text" class="form-control" id="title" name="title" placeholder="Enter Tilte" value="" maxlength="50" required=""> </div> </div> <div class="form-group"> <label for="name" class="col-sm-2 control-label">Product Code</label> <div class="col-sm-12"> <input type="text" class="form-control" id="product_code" name="product_code" placeholder="Enter Tilte" value="" maxlength="50" required=""> </div> </div> <div class="form-group"> <label class="col-sm-2 control-label">Description</label> <div class="col-sm-12"> <input type="text" class="form-control" id="description" name="description" placeholder="Enter Description" value="" required=""> </div> </div> <div class="col-sm-offset-2 col-sm-10"> <button type="submit" class="btn btn-primary" id="btn-save" value="create">Save changes </button> </div> </form> </div> <div class="modal-footer"> </div> </div> </div> </div> </body> </html> 

Tiếp theo chúng ta sẽ thêm các đoạn script javascript để hiển thị danh sách , tạo, sửa, xóa sản phẩm với Datatable phần js này bạn thêm nó vào sau thẻ đóng body.

<script> var SITEURL = '{{URL::to('')}}'; $(document).ready( function () { $.ajaxSetup({ headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') } }); $('#laravel_datatable').DataTable({ processing: true, serverSide: true, ajax: { url: SITEURL + "product-list", type: 'GET', }, columns: [ {data: 'id', name: 'id', 'visible': false}, {data: 'DT_RowIndex', name: 'DT_RowIndex', orderable: false,searchable: false}, { data: 'title', name: 'title' }, { data: 'product_code', name: 'product_code' }, { data: 'description', name: 'description' }, { data: 'created_at', name: 'created_at' }, {data: 'action', name: 'action', orderable: false}, ], order: [[0, 'desc']] }); /* When user click add user button */ $('#create-new-product').click(function () { $('#btn-save').val("create-product"); $('#product_id').val(''); $('#productForm').trigger("reset"); $('#productCrudModal').html("Add New Product"); $('#ajax-product-modal').modal('show'); }); /* When click edit user */ $('body').on('click', '.edit-product', function () { var product_id = $(this).data('id'); $.get('product-list/' + product_id +'/edit', function (data) { $('#title-error').hide(); $('#product_code-error').hide(); $('#description-error').hide(); $('#productCrudModal').html("Edit Product"); $('#btn-save').val("edit-product"); $('#ajax-product-modal').modal('show'); $('#product_id').val(data.id); $('#title').val(data.title); $('#product_code').val(data.product_code); $('#description').val(data.description); }) }); $('body').on('click', '#delete-product', function () { var product_id = $(this).data("id"); if(confirm("Are You sure want to delete !")){ $.ajax({ type: "get", url: SITEURL + "product-list/delete/"+product_id, success: function (data) { var oTable = $('#laravel_datatable').dataTable(); oTable.fnDraw(false); }, error: function (data) { console.log('Error:', data); } }); } }); }); if ($("#productForm").length > 0) { $("#productForm").validate({ submitHandler: function(form) { var actionType = $('#btn-save').val(); $('#btn-save').html('Sending..'); $.ajax({ data: $('#productForm').serialize(), url: SITEURL + "product-list/store", type: "POST", dataType: 'json', success: function (data) { $('#productForm').trigger("reset"); $('#ajax-product-modal').modal('hide'); $('#btn-save').html('Save Changes'); var oTable = $('#laravel_datatable').dataTable(); oTable.fnDraw(false); }, error: function (data) { console.log('Error:', data); $('#btn-save').html('Save Changes'); } }); } }) } </script></pre> <pre>

Xem thêm: Giải Hóa 10 bài 15: Hóa trị và số oxi hóa

Chạy ứng dụng

Để chạy ứng dụng trong môi trường development bạn thực câu lệnh sau:

 php artisan serve Nếu bạn muốn chạy khác cổng 80 thì hãy thực hiện câu lệnh dưới đây php artisan serve --port=8080

Demo

Vui lòng xem demo tại

đây

Chuyên mục: Kiến thức

Related Articles

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

Check Also
Close
Back to top button