This post is also available in:
English
Hallo apa kabar teman semuanya, kali ini kita akan membahas laravel kembali. Untuk pemabahasannya, kamu dapat implementasi Datatables pada Laravel.
Package laravel yang akan kita gunakan yaitu Yjra Datatbles Server Side. Package ini sangat berguna ketika kamu mempunyai ribuan data dan kamu ingin sekali memmiliki tampilan yang lebih user friendly maka kita harus menggunakan package laravel. Kali ini kita akan menampilkan data dinamis dengan beberapa fitur seperti pagination dan search.
DataTables adalah plug-in yang didukung oleh jQuery yang sering dikenal sebagai perpustakaan Javascript. Ini adalah alat yang sangat fleksibel dan dinamis.
Kita langsung saja ke dalam pembahasannya:
- Install Laravel
- Buat Database & Setup .ENV
- Instal Laravel Datatables
- Set Up Model and Migrations
- Create DataTable Controller
- Tentukan Rute
- Display Data Dengan Yajra Datatables
Kamu dapat mempelajari tutorial lainnya di sini:
Integrasi Social Media Share di Laravel
Integrasi Paypal Payment Gateway Dengan Laravel
Install Laravel
laravel new laravel-datatables
Langkah pertama yang kita lakukan adalah install projek laravel. Ataug gunakan printah di bawah ini untuk melakukan install.
composer create-project laravel/laravel laravel-datatables
Kita telah melakuakn install projek larave menggunakan composer. Selanjutkan kita akan lakuakn configurasi database.
Buat Database & Setup .ENV
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=laravel_datatables
DB_USERNAME=root
DB_PASSWORD=
Kali ini kamu harus buat terlebih dahulu databasenya dan atur konfigurasi database di .ENV.
Instal Laravel Datatables
Plugin ini menangani pekerjaan sisi server dari plugin DataTables jQuery melalui opsi AJAX dengan mempertimbangkan Eloquent ORM, Fluent Query Builder atau Collection.
Masukan perintah di bawah ini untuk melakukan install package datatables.
composer require yajra/laravel-datatables-oracle
atau
composer require yajra/laravel-datatables-oracle:"^10.0"
Setelah melakuakan instal package selesai, masukan service provider di bawah ini ke dalam config/app.php.
.....
.....
'providers' => [
....
....
Yajra\DataTables\DataTablesServiceProvider::class,
]
'aliases' => [
....
....
'DataTables' => Yajra\DataTables\Facades\DataTables::class,
]
.....
.....
Jalankan perintah di bawah ini:
php artisan vendor:publish --provider="Yajra\DataTables\DataTablesServiceProvider"
Set Up Model and Migrations
Buatlah sebuah database produk.
php artisan make:migrations create_products_table
Buka file database/migrations/timestamp_create_products_table.php. Dan sesuaikan kodenya seperti di bawah ini:
public function up()
{
Schema::create('students', function (Blueprint $table) {
$table->bigIncrements('id');
$table->string('product_code');
$table->string('product_name');
$table->timestamps();
});
}
Langkah selanjutnya buatlah model product.
php artisan make:model Products -m
Dan sesuaikan kodenya seperti di bawah ini:
<?php
namespace App\Models;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
class Product extends Model
{
use HasFactory;
/**
* The attributes that are mass assignable.
*
* @var array
*/
protected $fillable = [
'product_code','product_name'
];
}
Jalankan perintah migrasi, dengan perintah di bawah ini:
php artisan migrate
Setelah lakukan migrate dan telah terbuah tabel product di database, kamu harus lakukan input data atau buat sebuah data dummy sebanyak banyaknya. Karena kita akan lakukan uji coba pada aplikasi yang kita buat.
Create DataTable Controller
Langkah selanjutnya kita buat sebuah controller yang berfungsi untuk menampilkan data yang akan kira kirim datanya ke datatables. Buatlah sebiah controller seperti di bawah ini.
php artisan make:controller ProductController
Buka file controller di app/Http/Controllers/StudentController.php dan sesuai kodenya seperti di bawah ini.
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Models\Product;
use DataTables;
class StudentController extends Controller
{
public function index()
{
return view('welcome');
}
public function index()
{
if(\request()->ajax()){
$data = Product::latest()->get();
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('products.index');
}
}
Tentukan Rute
Setelah kita membuat contoller, maka kita buat route. Buka file routes/web.php dan sesuaikan kodenya.
<?php
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\ProductController;
/*
|--------------------------------------------------------------------------
| 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::resource('products', ProductController::class);
Display Data Dengan Yajra Datatables
Langkag terakhir kita buat sebuah blade untuk menampilkan database yang telah kita buat sebelumnya. Saya tambahkan beberapa plugin untuk mendukung tampilan yang menarik.
Buka file resources/views/welcome.blade.php. Masukan kode di bawah ini.
<!DOCTYPE html>
<html>
<head>
<title>Laravel Datatables Tutorial</title>
<meta name="csrf-token" content="{{ csrf_token() }}">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"/>
<link href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css" rel="stylesheet">
<link href="https://cdn.datatables.net/1.10.21/css/dataTables.bootstrap4.min.css" rel="stylesheet">
</head>
<body>
<div class="container mt-5">
<h2 class="mb-4">Laravel Yajra Datatables Example</h2>
<table id="myTable" class="table table-bordered">
<thead>
<tr>
<th>No</th>
<th>Kode Barang</th>
<th>Nama Barang</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</body>
<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.21/js/jquery.dataTables.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/1.10.21/js/dataTables.bootstrap4.min.js"></script>
<script type="text/javascript">
$(function () {
var table = $('#myTable').DataTable({
processing: true,
serverSide: true,
ajax: "{{ route('products.index') }}",
columns: [
{data: 'DT_RowIndex', name: 'DT_RowIndex'},
{data: 'kode_barang', name: 'kode_barang'},
{data: 'nama_barang', name: 'nama_barang'},
]
});
});
</script>
</html>
Selanjutnya kita jalankan perintah php artisan serve untuk melihat hasil dari progres yang kamu buat menggunakan browser.
php artisan serve
http://127.0.0.1:8000/products

Demikian tutorial kali ini yang dapat saya sampaikan, semoga bermanfaat. Jika ada yang ingin di tanyakan, silahkan komen di bawah.
Terimakasih.