Menggunakan Datatables di Laravel 8 dan Livewire

Menggunakan Datatables di Laravel 8 dan Livewire

Admin
Admin・ 19 September 2021
10 min read ・ 6652 views
Series: Laravel Livewire

Laravel Livewire Datatables - Di artikel ini saya akan share tutorial bagaimana cara menggunakan datatables di laravel 8 dan livewire menggunakan livewire-datatables package by mediconesystems. Livewire-datatables package sangat membantu bagi kita yang sedang mengembangkan web menggunakan laravel dan livewire, terutama yang membutuhkan tampilan table yang lengkap dengan beberapa fitur seperti search, export excel, filter dan lain-lain.

Ok. Let's go straight to coding 👨‍💻 🚀

Langkah 1: Install Laravel

//via Laravel Installer
composer global require laravel/installer
laravel new laravel-livewire-datatables

//via Composer
composer create-project laravel/laravel laravel-livewire-datatables

Pada langkah yang pertama ini, kita perlu menginstall laravel versi terbaru (saat ini versi 8) yang akan kita coba untuk implementasi atau menggunakan datatable di laravel 8 dan livewire. Untuk installasi laravel bisa menggunakan laravel installer atau menggunakan composer seperti contoh di atas.

Silahkan memilih salah satu cara yang ingin digunakan untuk installasi laravel. Dari kedua contoh perintah installasi laravel di atas, akan sama-sama menghasilkan atau generate laravel project dengan nama laravel-livewire-datatables.

Tunggu hingga proses installasi selesai dan jika sudah selesai, jangan lupa untuk masuk ke direktori project menggunakan perintah cd laravel-livewire-datatables.

Langkah 2: Setup Datatabe

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

Selanjutnya, buat database baru untuk percobaan menggunakan datatable di laravel 8 dan livewire. Jika kamu menggunakan xampp sebagai local development, silahkan buat database baru di localhost/phpmyadmin. Disini saya beri contoh, saya membuat database baru dengan nama laravel_livewire_datatables. Kemudian jangan lupa juga untuk menyesuaikan DB_DATABASE pada file .env seperti pada contoh di atas.

Langkah 3: Setup Model & Migration

 public function up()
    {
        Schema::create('users', function (Blueprint $table) {
            $table->id();
            $table->string('name');
            $table->string('email')->unique();
            $table->string('phone')->unique();
            $table->string('address');
            $table->string('gender');
            $table->timestamps();
        });
    }

Selanjutnya, buka file database/migrations/xxxx_xx_xx_xxxxxx_create_users_table.php dan ubah method up menjadi seperti di atas. Di file ini, kita hapus beberapa field yang sudah ada dan kita tambahkan field phone, address, gender di table images seperti kode di atas. Jika sudah, save dan jalankan perintah php artisan migrate untuk memigrasi semua file migration.

 protected $fillable = [
        'name',
        'email',
        'phone',
        'address',
        'gender'
    ];

Kemudian, buka file Models/User.php dan tambahkan phone, address dan gender di dalam array protected $fillable seperti kode di atas.

Langkah 4: Generate Dummy Data

 public function definition()
    {
        $gender = $this->faker->randomElement($array = array ('male','female'));
        
        return [
            'name' => $this->faker->name(),
            'email' => $this->faker->unique()->safeEmail(),
            'phone' => $this->faker->phoneNumber(),
            'address' => $this->faker->address(),
            'gender' => $gender
        ];
    }

Oke, sekarang kita buat data dummy untuk mengisi table users yang selanjutnya akan kita tampilkan data-data tersebut menggunakan datatables di laravel 8 dan livewire. Buka file database/factories/UserFactory.php, dan ubah method definition menjadi seperti kode di atas.

php artisan tinker
User::factory()->count(100)->create()

Kita bisa menjalankan atau mengeksekusi file UserFactory.php menggunakan tinker. Caranya, buka terminal, jalankan perintah php artisan tinker dan dikuti dengan perintah User::factory()->count(100)->create() seperti kode di atas. Perintah tersebut akan membuatkan kita data dummy sebanyak 100 data untuk table users.

Langkah 5: Install Datatables Package

composer require mediconesystems/livewire-datatables

Nah, ini poin pentingnya. Kita akan menginstall livewire-datatables package via composer. Jalankan perintah seperti di atas pada terminal.

Optional

php artisan vendor:publish --provider="Mediconesystems\LivewireDatatables\LivewireDatatablesServiceProvider"

Jika kita ingin mengubah tampilan blade dan menerapkan style sendiri, jalankan perintah artisan vendor:publish seperti di atas. Datatables views akan dipublish ke resource/livewire/datatables. Dan file config livewire-datatables.php berisi format waktu dan tanggal default yang digunakan.

Langkah 6: Install Livewire

composer require livewire/livewire

Selesai menginstall laravel dan membuat database, kita lanjutkan dengan menginstall livewire di project laravel kita. Jalankan perintah seperti di atas untuk menginstall livewire.

Langkah 7: Generate Livewire Components

php artisan livewire:datatable users-table --model=user

Di langkah ketujuh, jalankan perintah seperti di atas untuk generate livewire component dengan target model User. Dengan perintah tersebut, kita akan mempunyai file livewire yang terletak di app/Http/Livewire/UsersTable.php dan sudah include dengan public property $model.

CLASS: app/Http/Livewire/UsersTable.php

Langkah 8: Setup Components

<?php

namespace App\Http\Livewire;

use App\Models\User;
use Mediconesystems\LivewireDatatables\Http\Livewire\LivewireDatatable;
use Mediconesystems\LivewireDatatables\Column;
use Mediconesystems\LivewireDatatables\NumberColumn;
use Mediconesystems\LivewireDatatables\DateColumn;

class UsersTable extends LivewireDatatable
{
    public $model = User::class;

    public function columns()
    {
        return [
            NumberColumn::name('id')
                ->label('ID')
                ->defaultSort('asc')
                ->sortBy('id'),

            Column::name('name')
                ->label('Name'),

            Column::name('email')
                ->label('Email'),

            Column::name('phone')
                ->label('Phone'),

            DateColumn::name('created_at')
                ->label('Created at')
        ];
    }
}

Selanjutnya, kita perlu setup component livewire yang telah kita generate di langkah sebelumnya. Buka file app/Http/Livewire/UsersTable.php dan ubah kode yang ada menjadi seperti di atas. Disini, kita set column yang ingin ditampilkan di datatables yaitu column id, name, email, phone dan created at. Di dalam method columns, kita juga menggunakan class NumberColumn, Column dan DateColumn, untuk itu kita juga perlu menggunakan trait tersebut di file ini.

Langkah 9: Setup View

<!DOCTYPE html>
<html>
    <head>
        <title>Laravel 8 Livewire Datatables</title>
        @livewireStyles
        <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
    </head>
    <body>
        <div class="container mx-auto">
            <h1 class="py-2 text-xl text-center">Laravel 8 Livewire Datatables</h1>
            <div class="py-4">
                <livewire:users-table/>
            </div>
        </div>
    </body>
    @livewireScripts
</html>

Dan terakhir, kita setup view untuk menampilkan data-data dari table users ke dalam bentuk datatables. Buka file welcome.blade.php, kemudian ubah kode yang ada menjadi seperti kode di atas. Disini kita memakai tailwindcss, kenapa ? karena by default livewire-datatables package ini memang menggunakan class-class tailwindcss untuk stylingnya. Jangan lupa juga untuk menyertakan script @livewireStyles dan @livewireScripts dari Livewire. Kemudian untuk livewire component, kita gunakan component users-table.

Testing

laravel 8 livewire datatables example

Oke, sampai disini kita telah sama-sama belajar bagaimana cara menggunakan datatables di laravel 8 dan livewire menggunakan livewire-datatables package dengan cara yang sangat mudah. Untuk melihat hasilnya, jalankan laravel project dengan perintah php artisan serve lalu buka laravel project di browser. Maka hasilnya akan seperti gambar di atas.

Bagaimana cara menambahkan fitur pencarian ?

Untuk menambahkan fitur pencarian, caranya dengan menambahkan method searchable() di column yang ingin digunakan sebagai parameter dalam pencarian.

Contoh:

 public function columns()
    {
        return [
            NumberColumn::name('id')
                ->label('ID')
                ->defaultSort('asc')
                ->sortBy('id'),

            Column::name('name')
                ->label('Name')
                ->searchable(),

            Column::name('email')
                ->label('Email')
                ->searchable(),

            Column::name('phone')
                ->label('Phone')
                ->searchable(),

            DateColumn::name('created_at')
                ->label('Created at')
        ];
    }

Untuk contoh cara menambahkan fitur pencarian di livewire-datatables bisa dilihat pada kode di atas. Pada kode di atas akan ditambahkan fitur pencarian dengan parameter name, email dan phone.

Bagaimana cara menambahkan filter ?

Untuk menambahkan fitur filter data di livewire datatables, caranya dengan menambahkan method filterable() di column yang ingin ditambahkan filter.

Contoh:

Column::name('name')
          ->label('Name')
          ->searchable()
          ->filterable(),

Bagaimana cara menambahkan fitur export excel ?

Untuk menambahkan fitur export excel di livewire-datatable cukup mudah, yaitu dengan menambahkan property exportable di script livewire component.

Contoh:

<livewire:users-table exportable/>

Ada cara yang lebih ringkas ?

Ada. Untuk penggunaan dasar, bisa menggunakan livewire-datatable component di blade view dan berikan model yang ditargetkan.

Contoh:

<livewire:datatable
    model="App\Models\User"
    include="id, name, email, phone, address, created_at"
    dates="created_at"
    searchable="name, email, phone"
    exportable
    />

Untuk contoh script penggunaan dasar livewire datatables bisa dilihat pada contoh kode di atas. Dengan kode tersebut, target model adalah User.php dan data yang ingin ditampilkan ke datatables adalah id, name, email, phone, address dan created_at (untuk data created_at, kita gunakan format dates). Selain itu, dengan kode tersebut kita juga menambahkan fitur pencarian dengan parameter name, email dan phone serta menambahkan fitur export excel.

using datatables in laravel 8 and livewire

Jika menggunakan datatables di livewire dengan kode penggunaan dasar seperti contoh di atas, kita tidak memerlukan lagi livewire component seperti UsersTable.php yang telah kita generate di awal artikel ini tadi. Untuk mencobanya, silahkan hapus atau rename file UsersTable.php, kemudian buka di browser kembali, maka hasilnya sama saja seperti gambar di atas.

sekian artikel tentang cara penggunaan datatables di laravel 8 dan livewire kali ini, untuk penggunaan lebih kompleks silahkan kunjungi repository dan website resmi di link di bawah ini. Semoga artikel ini bisa bermanfaat, selamat mencoba dan sampai jumpa di artikel berikutnya. 👋

 

📖 Explore the official repository: livewire-datatables

🌐 Official Site: livewire-datatables.com

Tinggalkan Komentar
Loading Comments