Tutorial Datatables Server Side dengan menggunakan Laravel 8 Yajra

Datatables sangat penting untuk menampilkan data yang besar ke dalam tabel. keuntungan utama dari tabel data adalah memberikan kepada pengguna fungsi pencarian lanjutan untuk menyaring data dan juga menyediakan banyak fungsi yang mudah digunakan seperti sortir, pagination, dan pencarian, dan fungsi lain untuk menangani data database di halaman web kita. .

Kami akan menggunakan menggunakan paket yajra/laravel-datatables-oracle untuk datatable sisi server.

Langkah 1: Instal Proyek Laravel

Pertama, buka Terminal dan jalankan perintah berikut untuk membuat proyek laravel baru:

#! /bin/bash
composer create-project --prefer-dist laravel/laravel laravel-datatable-example

atau, jika Anda telah menginstal Laravel Installer sebagai dependensi komposer global:

#! /bin/bash
laravel new laravel-datatable-example

Langkah 2: Konfigurasikan Detail Basis Data

Setelah, Instalasi Buka direktori root proyek, buka file .env, dan atur detail basis data sebagai berikut:

DB_CONNECTION=mysql 
DB_HOST=127.0.0.1 
DB_PORT=3306 
DB_DATABASE=<DATABASE NAME>
DB_USERNAME=<DATABASE USERNAME>
DB_PASSWORD=<DATABASE PASSWORD>

Langkah 3: Instal Yajra Datatables

Untuk menginstal yajra datatables, kita perlu menjalankan perintah composer. Buka terminal dan ketik perintah ini dan jalankan.

#! /bin/bash
composer require yajra/laravel-datatables-oracle:"~9.0"

Paket ini dibuat untuk menangani kinerja sisi server dari tabel data plugin jQuery melalui AJAX menggunakan Eloquent ORM, Query Builder, atau Collection.

Langkah 4: Buat Data Dummy

Pada langkah ini, kita akan membuat beberapa pengguna dummy menggunakan pabrik tinker. jadi mari kita buat catatan dummy menggunakan perintah di bawah ini:

Pertama, Buka tinker menggunakan perintah ini

php artisan tinker

Setelah membuka tinker, jalankan perintah berikut untuk membuat catatan dummy

User::factory()->count(500)->create()

Langkah 5: Tambahkan Rute

Pada langkah ini, kita perlu membuat rute untuk file layout datatables dan satu lagi untuk mendapatkan data. jadi buka  file route/web.php Anda  dan tambahkan rute berikut.

<?php

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

Route::get('users', [UserController::class, 'index'])->name('users.index');

Langkah 6: Buat Pengontrol

Pada titik ini, sekarang kita harus membuat controller baru sebagai UserController. pengontrol ini akan mengelola tata letak dan mendapatkan permintaan data dan mengembalikan respons, jadi letakkan konten di bawah ini di file pengontrol:

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Models\User;
use DataTables;

class UserController extends Controller
{
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */

    public function index(Request $request)
    {
        if ($request->ajax()) {
            $data = User::select('id','name','email')->get();
            return Datatables::of($data)->addIndexColumn()
                ->addColumn('action', function($row){
                    $btn = '<a href="javascript:void(0)" class="btn btn-primary btn-sm">View</a>';
                    return $btn;
                })
                ->rawColumns(['action'])
                ->make(true);
        }

        return view('users');
    }
}

Langkah 7: Buat File Blade

Pada langkah terakhir, mari kita buat users.blade.php(resources/views/users.blade.php) untuk layout dan kita akan menulis kode desain di sini dan meletakkan kode berikut:

<!DOCTYPE html>
<html>
<head>
    <title>Laravel 8 Server Side Datatables Tutorial</title>
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" />
    <link href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet">
    <link href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap4.min.css" rel="stylesheet">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>  
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.js"></script>
    <script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script>
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-12 table-responsive">
            <table class="table table-bordered user_datatable">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>Name</th>
                        <th>Email</th>
                        <th width="100px">Action</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
    </div>
</div>
</body>
<script type="text/javascript">
  $(function () {
    var table = $('.user_datatable').DataTable({
        processing: true,
        serverSide: true,
        ajax: "{{ route('users.index') }}",
        columns: [
            {data: 'id', name: 'id'},
            {data: 'name', name: 'name'},
            {data: 'email', name: 'email'},
            {data: 'action', name: 'action', orderable: false, searchable: false},
        ]
    });
  });
</script>
</html>

Sekarang kita siap untuk menjalankan contoh kita jadi jalankan perintah di bawah ini:

#! /bin/bash
php artisan serve

Sekarang Anda dapat membuka URL di bawah ini di browser Anda:

http://127.0.0.1:8000/

Terima kasih  telah membaca blog ini.

 

 

 

 

 

 

Bookc
Admin

Hopefully the information we provide can be useful.

Press ESC to close