Tutorial Laravel 8 Datatables – Yajra Datatables

Pada tutorial kali ini, saya akan membahas bagaimana membuat datatable di laravel 8. Untuk hasilnya nanti Anda bisa unduh di halaman github saya.

Datatable memudahkan kita untuk melakukan pencarian, pagination, ordering, sorting, dan lain sebagainya. Pada dasarnya,datatable menggunakan jQuery plugin yang memudahkan kita dalam melakukan interaksi dengan HTML table data kita.

Pada datable juga kita dapat menggunakan ajax untuk meringankan beban query di tampilan htmlnya.

Ok kita langsung saja melakukan tutorial kita.

Contents

Langkah Pertama

Install Laravel 8

Pada langkah ini, silahkan teman-teman install laravel dulu, disini saya menggunakan laravel versi 8. Saya menggunakan composer untuk menginstallnya.

composer create-project laravel/laravel:^8.0 laravel-datatable

cd example-app
 
php artisan serve

Jika teman-teman menggunakan install laravel global bisa gunakan kode berikut:

composer global require laravel/installer
 
laravel new laravel-datatable
 
cd laravel-datatable
 
php artisan serve

Namun, jika menggunakan cara tersebut. Project kita akan menggunakan versi terbaru dari laravel. Sedangkan requirement di laravel terbaru terkadang berbeda.

Install Plugin Yajra Datatable

Langkah berikutnya, kita membutuhkan plugin yajra datatable, jadi teman-teman bisa mengikut langkah berikut untuk menginstall plugin yajra datatable

composer require yajra/laravel-datatables-oracle
composer require yajra/laravel-datatables-buttons

Setelah selesai, kita tambakan alias di config provider kita.


        Yajra\DataTables\DataTablesServiceProvider::class,
        Yajra\DataTables\ButtonsServiceProvider::class,

Kemudian, kita publish vendor laravel datatable

php artisan vendor:publish

pilih 0

Setting environment

Buka file .env di laravel project kita

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

Silahkan teman-teman ubah konfigurasi database untuk dapat menyambungkan ke dalam dataabase.

Migrate default data

Lakukan migrasi data default dengan menggunakan perintah dibawah ini.

php artisan migrate

Tambahkan Data Dummy

Mari kita tambahkan data dummy sebagai contoh untuk data kita. Sebagai contoh saya akan membuat data dummy sebanyak 100.

php artisan tinker

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

Tambahkan Route

Pada langkah ini, kita akan membuat sebuah route untuk dapat mengakses url. Silahkan buka file routes/web.php kemudian tambahkan kode berikut:

routes/web.php

<?php
  
use Illuminate\Support\Facades\Route;
  
use App\Http\Controllers\UserController;
  
/*
|--------------------------------------------------------------------------
| 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('users', [UserController::class, 'index'])->name('users.index');

Buat Sebuah Controller

Teman-teman buatlah sebuah controller. Disini saya menggunakan perintah berikut:

php artisan make:controller UserController --resource

Secara otomatis akan menggenerate file UserController seperti berikut:

app/Http/Controllers/UserController.php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class UserController 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)
    {
        //
    }
}

Buat Sebuah Service Datatable

php artisan datatables:make UsersDataTable

Ubah

<?php

namespace App\DataTables;

use App\Models\UsersDataTable;
use Yajra\DataTables\Html\Button;
use Yajra\DataTables\Html\Column;
use Yajra\DataTables\Html\Editor\Editor;
use Yajra\DataTables\Html\Editor\Fields;
use Yajra\DataTables\Services\DataTable;

Menjadi

<?php

namespace App\DataTables;

use App\Models\Users;
use Yajra\DataTables\Html\Button;
use Yajra\DataTables\Html\Column;
use Yajra\DataTables\Html\Editor\Editor;
use Yajra\DataTables\Html\Editor\Fields;
use Yajra\DataTables\Services\DataTable;

Lengkapnya

<?php

namespace App\DataTables;

use App\Models\User;
use Yajra\DataTables\Html\Button;
use Yajra\DataTables\Html\Column;
use Yajra\DataTables\Html\Editor\Editor;
use Yajra\DataTables\Html\Editor\Fields;
use Yajra\DataTables\Services\DataTable;

class UsersDataTable extends DataTable
{
    /**
     * Build DataTable class.
     *
     * @param mixed $query Results from query() method.
     * @return \Yajra\DataTables\DataTableAbstract
     */
    public function dataTable($query)
    {
        return datatables()
            ->eloquent($query)
            ->addColumn('action', 'usersdatatable.action');
    }

    /**
     * Get query source of dataTable.
     *
     * @param \App\Models\UsersDataTable $model
     * @return \Illuminate\Database\Eloquent\Builder
     */
    public function query(User $model)
    {
        return $model->newQuery();
    }

    /**
     * Optional method if you want to use html builder.
     *
     * @return \Yajra\DataTables\Html\Builder
     */
    public function html()
    {
        return $this->builder()
                    ->setTableId('usersdatatable-table')
                    ->columns($this->getColumns())
                    ->minifiedAjax()
                    ->dom('Bfrtip')
                    ->orderBy(1)
                    ->buttons(
                        Button::make('create'),
                        Button::make('export'),
                        Button::make('print'),
                        Button::make('reset'),
                        Button::make('reload')
                    );
    }

    /**
     * Get columns.
     *
     * @return array
     */
    protected function getColumns()
    {
        return [
            Column::computed('action')
                  ->exportable(false)
                  ->printable(false)
                  ->width(60)
                  ->addClass('text-center'),
            Column::make('id'),
            Column::make('name'),
            Column::make('email'),
            Column::make('created_at'),
            Column::make('updated_at'),
        ];
    }

    /**
     * Get filename for export.
     *
     * @return string
     */
    protected function filename()
    {
        return 'Users_' . date('YmdHis');
    }
}

Buat Sebuah View

Langkah terakhir kita buat sebuah view seperti berikut:

<!DOCTYPE html>
<html lang="">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Laravel Datatable - Brilliansolution.com</title>

    <!-- Bootstrap CSS -->
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.datatables.net/1.12.1/css/dataTables.bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.0.3/css/buttons.dataTables.min.css">

</head>

<body>

    {!! $dataTable->table() !!}

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!-- Bootstrap JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    
    <script src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.12.1/js/dataTables.bootstrap.min.js"></script>

    <script src="https://cdn.datatables.net/buttons/1.0.3/js/dataTables.buttons.min.js"></script>
    <script src="/vendor/datatables/buttons.server-side.js"></script>
    {!! $dataTable->scripts() !!}
    <!-- jQuery -->
</body>

</html>

Sekarang, semuanya telah siap.

Silahkan teman-teman coba running aplikasi laravelnya

php artisan serve

Kemudian buka localhost:8000.

Jika ada kesulitan silahkan tinggalkan di kolom komentar.

Anda bisa unduh filenya di github saya

Related keywords

Laravel datatables
datatable laravel
yajra datatable
laravel datatable yajra

Categories:LaravelLaravel

Tags:datatables laravel 8

brillian

Tutorial Laravel 8 Datatables – Yajra Datatables

Langkah Pertama

Install Laravel 8

Install Plugin Yajra Datatable

Setting environment

Migrate default data

Tambahkan Data Dummy

Tambahkan Route

Buat Sebuah Controller

Buat Sebuah Service Datatable

Buat Sebuah View

Like this:

Leave a Reply Cancel reply

Langkah Pertama

Install Laravel 8

Install Plugin Yajra Datatable

Setting environment

Migrate default data

Tambahkan Data Dummy

Tambahkan Route

Buat Sebuah Controller

Buat Sebuah Service Datatable

Buat Sebuah View

Share this:

Like this:

Related Posts

Tutorial Laravel Jetstream Pemula #1 : Pengenalan

How to Create Laravel Website in Minute use Laravel 8

Class Qrcode Not Found Laravel

How to Make Chart js in Laravel 8

How to Generate Various QR Codes in Laravel 8 Application

Tutorial Laravel 10 React Auth Tutorial with Example

Leave a Reply Cancel reply