Datatables Laravel 10 Yajra Tutorial Untuk Pemula

Apa itu datatables?

Datatables adalah salah satu plugin jQuery yang populer digunakan untuk mengelola data pada tabel secara interaktif dan efisien. Pada artikel ini, kita akan belajar cara mengimplementasikan Datatables menggunakan Laravel 10 dan paket Yajra, langkah demi langkah. Berikut adalah panduan lengkap memulai dengan Datatables untuk memunculkan data mahasiswa pada projek Laravel.

Datatables Laravel 10 Yajra Tutorial Untuk Pemula
Contoh hasil akhir dari artikel ini – Datatables Laravel Yajra


1. Instalasi Projek Laravel

Langkah pertama adalah membuat proyek Laravel baru dengan perintah berikut:

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

Setelah itu, buka proyek mahasiswa_datatables menggunakan Visual Studio Code atau editor kode pilihan Anda.



2. Instalasi Paket Datatable dari Yajra

Selanjutnya, instal paket Datatable dari Yajra dengan menjalankan perintah berikut:

composer require yajra/laravel-datatables-oracle


3. Konfigurasi file config/app.php

Tambahkan provider dan alias untuk paket Yajra Datatables pada file config/app.php:

'providers' => ServiceProvider::defaultProviders()->merge([
    // ...,
    // ...,
    // ...,
    Yajra\DataTables\DataTablesServiceProvider::class,
])->toArray(),

'aliases' => Facade::defaultAliases()->merge([
    // ...,
    // ...,
    // ...,
    'DataTables' => Yajra\DataTables\Facades\DataTables::class,
])->toArray(),


4. Publish Vendor

Untuk menerapkan konfigurasi baru, gunakan perintah:

php artisan vendor:publish --provider="Yajra\DataTables\DataTablesServiceProvider"


5. Atur Database

Sekarang, buat sebuah database dengan nama “mahasiswa_datatables” di phpmyadmin dan atur file .env yang ada di dalam projek laravel seperti ini:

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=mahasiswa_datatables
DB_USERNAME=root
DB_PASSWORD=


6. Membuat Migration dan Melakukan Migrasi

Buat migration untuk entitas “mahasiswa” dengan field yang diinginkan:

php artisan make:migration create_mahasiswas_table --create=mahasiswas

Setelah perintah di atas dijalankan, akan terbuat sebuah file migration di direktori database/migrations. Buka file tersebut dan tambahkan field yang diperlukan pada fungsi up():

    public function up()
    {
        Schema::create('mahasiswas', function (Blueprint $table) {
            $table->id();
            $table->string('nama');
            $table->string('nim')->unique();
            $table->string('jurusan');
            // Tambahkan field lain yang Anda inginkan di sini

            $table->timestamps();
        });
    }

Setelah selesai menambahkan field, lakukan migrasi database dengan perintah berikut:

php artisan migrate

Sekarang, tabel “mahasiswas” dengan field yang telah Anda tambahkan sudah siap digunakan.



7. Membuat Model

Buat model Mahasiswa untuk merepresentasikan tabel “mahasiswas”:

php artisan make:model Mahasiswa

Kemudian isi dari model ini adalah:

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;

class Mahasiswa extends Model
{
    use HasFactory;

    protected $fillable = [
        'nama',
        'nim',
        'jurusan'
        // Tambahkan field lain yang Anda inginkan di sini
    ];
}


8. Membuat Dummy Data Mahasiswa menggunakan Fitur Seed

Isi tabel “mahasiswas” dengan data dummy menggunakan fitur Seed. Kita akan buat seed untuk tabel “mahasiswas” dan tambahkan 1000 data dummy:

php artisan make:seed MahasiswaSeeder

Setelah perintah di atas dijalankan, akan terbuat sebuah file seeder di direktori database/seeders. Buka file tersebut dan tambahkan kode untuk menambahkan 1000 data dummy ke dalam tabel “mahasiswas”:

<?php

namespace Database\Seeders;

use Illuminate\Database\Seeder;
use Faker\Factory as Faker;
use App\Models\Mahasiswa;


class MahasiswaSeeder extends Seeder
{
    /**
     * Run the database seeds.
     */
    public function run()
    {
        $faker = Faker::create('id_ID');

        for ($i = 1; $i <= 1000; $i++) {
            Mahasiswa::create([
                'nama' => $faker->name,
                'nim' => $faker->unique()->numerify('#######'),
                'jurusan' => $faker->randomElement(['Teknik Informatika', 'Sistem Informasi', 'Teknik Elektro', 'Manajemen']),
                // Tambahkan field lain yang Anda inginkan di sini
            ]);
        }
    }
}

Setelah kode di atas ditambahkan, jalankan perintah untuk melakukan seeding:

php artisan db:seed --class=MahasiswaSeeder

Sekarang, tabel “mahasiswas” akan berisi 1000 data dummy yang telah ditambahkan.



9. Membuat Routes

Buat rute untuk mengakses data mahasiswa pada routes/web.php:

use App\Http\Controllers\MahasiswaController;

Route::get('/', [MahasiswaController::class, 'index'])->name('mahasiswa.index');


10. Membuat Controller

Buat MahasiswaController untuk mengatur data mahasiswa:

php artisan make:controller MahasiswaController

Implementasikan logika untuk mengambil data mahasiswa dari database pada MahasiswaController:

<?php

namespace App\Http\Controllers;

use App\Models\Mahasiswa;
use Yajra\DataTables\DataTables;


use Illuminate\Http\Request;

class MahasiswaController extends Controller
{
    public function index(Request $request)
    {
        if ($request->ajax()) {
            $data = Mahasiswa::select('*');
            return Datatables::of($data)
                ->addIndexColumn()
                ->addColumn('action', function ($row) {
                    $actionBtn = '<a href="javascript:void(0)" class="edit btn btn-success btn-sm">Edit</a> <a href="javascript:void(0)" class="delete btn btn-danger btn-sm">Delete</a>';
                    return $actionBtn;
                })
                ->rawColumns(['action'])
                ->make(true);
        }

        return view('mahasiswa.index'); // Ubah "ke alamat view yang anda buat" menjadi nama view yang sesuai
    }
}


11. Membuat View

Buat view mahasiswa/index.blade.php dengan kode berikut:

<!DOCTYPE html>
<html>
<head>
    <title>Datatables Laravel</title>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.1/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.datatables.net/1.11.4/css/dataTables.bootstrap5.min.css" rel="stylesheet">
    <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
    <script src="https://cdn.datatables.net/1.11.4/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
    <script src="https://cdn.datatables.net/1.11.4/js/dataTables.bootstrap5.min.js"></script>
</head>
<body>

<div class="container">
    <h1>Datatables Laravel 10 Yajra Tutorial Pemula - Chippiko</h1>
    <table class="table table-bordered data-table">
        <thead>
        <tr>
            <th>No</th>
            <th>Nama</th>
            <th>NIM</th>
            <th>Jurusan</th>
            <th width="140px">Action</th>
        </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
</div>

</body>

<script type="text/javascript">
    $(function () {

        var table = $('.data-table').DataTable({
            processing: true,
            serverSide: true,
            ajax: "{{ route('mahasiswa.index') }}", // Ubah route ke route yang sesuai dengan data mahasiswa
            columns: [
                {data: 'DT_RowIndex', name: 'DT_RowIndex', orderable: false, searchable: false},
                {data: 'nama', name: 'nama'},
                {data: 'nim', name: 'nim'},
                {data: 'jurusan', name: 'jurusan'},
                {data: 'action', name: 'action', orderable: false, searchable: false},
            ]
        });

    });
</script>
</html>

Baca juga: Belajar CRUD Laravel



12. Menjalankan Aplikasi

Terakhir, jalankan aplikasi menggunakan perintah:

php artisan serve

Sekarang Anda telah berhasil mengimplementasikan Yajra Datatables pada proyek Laravel 10. Dengan menggunakan fitur ini, Anda dapat dengan mudah mengelola data pada tabel dengan cara yang lebih interaktif dan efisien. Selamat mencoba!

Sumber: codeanddeploy.com

Similar Posts