Cara Membuat DataTables Multiple Tables di Laravel - Perintah Join dalam SQL (Structure Query Language) berfungsi sebagai penghubung antara dua tabel atau lebih yang saling berelasi satu sama lain.
Dengan menggunakan JOIN ini kita juga dapat menampilkan data dari beberapa tabel dengan melihat value yang memiliki kesamaan antar tabel walaupun entitas yang ada didalam tabel tidak saling berelasi.
Nah pada tutorial kali ini kita masih mengulas soal DataTables di Laravel, jika sebelum-sebelumnya kita sudah belajar tentang Cara Membuat Tabel Dengan JQuery Datatables lalu di lanjutkan dengan Cara Membuat DataTables Server Side di Laravel.
Cara Membuat DataTables Multiple Tables
|
| Datatables Multiple Table |
Apa Itu SQL JOIN
JOIN merupakan perintah di MySQL untuk menggabungkan 2 atau lebih tabel berdasarkan nilai kolom yang sama diantara kedua tabel, baik tabel yang berhubungan dengan acuan Primary Key dan Foreign Key atau menggunakan acuan kesamaan value.
Jenis Relasi Join di SQL
Didalam SQL JOIN memiliki beberapa jenis yang digunakan untuk relasi tabel, berikut 3 jenis Join di SQL.
- INNER JOIN
- LEFT JOIN
- RIGHT JOIN
Detail pembahasan SQL JOIN dapat kalian baca artikel berikut Pengertian Relasi Database dan Jenis-jenis SQL Join.
Sekarang kita lanjutkan dan langsung coba membuat JOIN Multiple Tables di Laravel dan menampilkannya kedalam tabel.
Cara Menampilkan Data dari Relasi Kedalam DataTables
Kita akan melanjutkan project tutorial-datatables dengan laravel yang sudah kita buat.
Jika anda baru berkunjung ke situs saya dan ingin langsung dapat mengikuti tutorial pada sesi ini, Silahkan download projectnya di GITHUB saya atau download file zip.
Sekarang kita langsungcobatutorial, ikuti langkah-langkah dibawah ini.
Buat Struktur Tabel Artikel dan Kategori Artikel
Disini kita akan membuat dua buah tabel Artikel dan Kategori lengkap dengan relasi tabel didalam file migration.
Penting: untuk membuat relasi tabel yang baik dan sesuai standard, tabel yang mempunyai primary key sebagai master harus di dahulukan.
Seperti contoh kasus tabel Artikel memiliki relasi dengan tabel Kategori, nah tabel kategori harus didahulukan karena didalam tabel Artikel memiliki Foreign Key dari tabel Kategori sebagai kunci relasi.
Buat File Model dan Migration Untuk Tabel Kategori
Penting: Disini kita akan membuat model kategori sekaligus membuat file migration untuk struktur tabel kategori.
Masukkan perintah "php artisan make:model Kategori -m" di dalam command prompt kalian. Setelah perintah berhasil dijalankan maka ubah file migration yang baru saja anda buat seperti berikut:
Schema::create('kategoris', function (Blueprint $table) {
$table->bigIncrements('id');
$table->string('name')->unique();
$table->string('slug');
$table->timestamps();
});
Setelah model dan migration kategori kita buat sekarang kita lanjutkan membuat model artikel dan migration table.
Buat Model dan Migration Untuk Tabel Artikel
Masukkan perintah "php artisan make:model Artikel -m" di dalam terminal atau cmd. jika berhasil muncul pesan "Model created successfully." sekarang kita edit file migration seperti ini.
Schema::create('artikels', function (Blueprint $table) {
$table->bigIncrements('id');
$table->bigInteger('kategori_id')->unsigned();
$table->string('title')->unique();
$table->string('slug');
$table->text('content');
$table->timestamps();
/**
*perintah foreign() untuk membuat relasi tabel
*/
$table->foreign('kategori_id')->references('id')->on('kategori')->onDelete('NULL');
});
Jika kedua tabel Artikel dan Kategori sudah dibuat sekarang kita jalankan perintah "php artisan migrate" untuk mengubah file migration menjadi tabel.
Tabel Artikel dan Kategori Setelah di Migrasi.
|
| Gambar Tabel Artikel dan Kategori |
Seeder Untuk Mengisi Tabel Kategori Tanpa Ribet
Disini kita akan memanfaatkan fitur laravel seeder untuk mengisi tabel yang sudah kita buat dengan data acak sebagai sample data agar lebih mudah dan cepat dalam proses belajar laravel.
Jalankan perintah "php artisan make:seeder KategoriSeeder", jika perintah berhasil maka akan muncul pesan "Seeder created successfully".
Buka file KategoriSeeder didalam folder "database > seeds > KategoriSeeder.php" lalu ubah file KategoriSeeder.php seperti berikut:
use App\Kategori;
use Faker\Factory as Faker;
use Illuminate\Support\Str;
use Illuminate\Database\Seeder;
class KategoriSeeder extends Seeder
{
/**
* Run the database seeds.
*
* @return void
*/
public function run()
{
for(i=0; $i < 5; $i++){
$faker = Faker::create();
$name = $faker->sentence();
$slug = Str::make($name,'-');
Kategori::create([
'name' = $name,
'slug' = $slug,
'created_at' => now(),
'updated_at' => now(),
]);
}
}
}
Lalu jalankan perintah "php artisan db:seed --class=KategoriSeeder" untuk membuat data kategori acak lalu simpan ke dalam tabel kategori.
Seeder Untuk Mengisi Tabel Artikel Dengan Cepat
Sekarng kita akan lanjutkan membuat data acak Artikel yang berelasi dengan Kategori.
Jalankan perintah "php artisan make:seeder ArtikelSeeder", jika perintah berhasil maka akan muncul pesan "Seeder created successfully".
Buka file ArtikelSeeder didalam folder "database > seeds > ArtikelSeeder.php" lalu ubah file ArtikelSeeder.php seperti berikut:
use App\Artikel;
use Faker\Factory as Faker;
use Illuminate\Support\Str;
use Illuminate\Database\Seeder;
class ArtikelSeeder extends Seeder
{
/**
* Run the database seeds.
*
* @return void
*/
public function run()
{
/**
* Perulangan sebanyak $x untuk membuat artikel dan simpan
* Tabel Artikel
*/
$x = 50;
for($i=0; $i < $x; $i++){
$faker = Faker::create();
$title = $faker->sentence;
$slug = Str::slug($title, '-');
Artikel::create([
'title' => $title,
'slug' => $slug,
'content' => $faker->text(2000),
// rand() isi dengan id pertama dan terakhir di tabel kategori
'kategori_id' => rand(1,6),
'created_at' => now(),
'updated_at' => now(),
]);
}
}
}
Setelah kedua tabel terisi data, sekarang kita akan ke tahap berikutnya membuat method untuk relasi kedua tabel didalam Model dan perintah untuk menampilkan data dari kedua tabel di dalam Datatables.
Buat Perintah Relasi di Model Kategori dan Artikel
Kita akan menghubungkan tabel kategori dan artikel menggunakan eloquent yang nantinya kita buat untuk menampilkan data di Controllers.
Tambahkan perintah berikut didalam model Kategori:
/**
/* Define relationship with the Artikel
*
* @return void
*/
public function artikel()
{
return $this->hasMany(Artikel::class);
}
Lalu tambahkan script berikut di model Artikel:
/**
/* Define relationship with the Kategori
*
* @return void
*/
public function kategori(){
return $this->belongsTo(Kategori::class);
}
Jika kedua model sudah ditambahkan script diatas, artinya kedua tabel sudah terhubung dan dapat di panggil menggunakan perintah with() di Eloquent, sekarang kita pindah ke Controller.
Buat Controller Artikel
Jalankan perintah "php artisan make:controller ArtikelController" di terminal.
Disini kita akan memanggil model Artikel yang berelasi dengan model Kategori menggunakan Eloquent with(). Lalu kita akan membuat format data JSON sendiri agar lebih mudah di tampilkan di Datatables.
Buka file controller yang baru saja kita buat lalu tambahkan script berikut:
/**
* function untuk menampilkan artikel & kategori
* berbentuk json agar mudah ditampilkan kedalam datatables
*
* @param Request $request
* @return void
*/
public function ArtikelJson(Request $request){
// panggil model artikel dan relasi dengan model kategori
$artikels = Artikel::with('kategori')->get();
// buat variabel array
$data = [];
// looping $artikels dan masukkan data ke dalam $data
foreach($artikels as $key => $artikel){
$data[$key]['nama_artikel'] = $artikel->title;
$data[$key]['slug_artikel'] = $artikel->slug;
$data[$key]['nama_kategori'] = $artikel->kategori->name;
$data[$key]['konten'] = Str::limit($artikel->content,100);
$data[$key]['created_at'] = Carbon::parse($artikel->created_at)->isoFormat('D MMMM Y');
}
return datatables()->of($data)->make();
}
Cara Menampilkan DataTables Multiple Table Laravel
Buat folder baru dengan nama "datatablesjointable" didalam folder "resources > views > datatablesjointable" lalu file view dengan nama "index.blade.php".
Setelah anda buat sekarang kita masukkan script didalam "index.blade.php" sebagai berikut:
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Cara Membuat DataTables Join Multiple Tables</title>
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@200;600&display=swap" rel="stylesheet">
<!-- Css Bootstrap dan Jquery Datatables -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.25/css/dataTables.bootstrap4.min.css">
</head>
<body>
<div class="container">
<h4 class="alert alert-success">
Cara Membuat DataTables Join Multiple Tables
</h4>
<div class="table-responsive py-3">
<table class="table table-bordered" id="users-table">
<thead>
<tr>
<th>Judul Artikel</th>
<th>Kategori</th>
<th>Isi</th>
<th>Tanggal Dibuat</th>
</tr>
</thead>
</table>
</div>
</div>
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<!-- DataTables -->
<script src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.min.js"></script>
<!-- Bootstrap JavaScript -->
<script src="https://cdn.datatables.net/1.10.25/js/dataTables.bootstrap4.min.js"></script>
<script>
$('document').ready(function(){
$('#users-table').DataTable({
processing: true,
serverSide: true,
ajax: '/ArtikelJson',
columns: [
{ data: 'nama_artikel', name: 'nama_artikel' },
{ data: 'nama_kategori', name: 'nama_kategori' },
{ data: 'isi', name: 'isi' },
{ data: 'created_at', name: 'created_at' },
]
});
});
</script>
</body>
</html>Membuat Routing Untuk Menampilkan Data dan Memanggil JSON Artikel
Agar data JSON dapat ditampilkan kedalam datatables dengan proses server-side maka kita harus melakukan konfigurasi routing pada file web.php yang terletak didalam folder routes/web.php
Tambahkan script didalam file web.php seperti berikut:
// Route ini dibuat untuk memanggil method ArtikelJson didalam class ArtikelController
Route::get('/datatablesjointable', function () {
return view('datatablesjointable/index');
});
Route::get('/ArtikelJson', 'ArtikelController@ArtikelJson');
Setelah semuanya sudah siap sekarang kita perlu menjalankan project laravel dengan memasukan perintah didalam terminal "php artisan server".
Jika muncul pesan "Laravel development server started: http://127.0.0.1:8000" tinggal kita buka di browser kita dengan url "http://127.0.0.1:8000".
Untuk melihati hasil tutorial kali ini kita masukan url sebagai berikut: "http://127.0.0.1:8000/datatablesjointable"
Berikut ini adalah contoh tampilan DataTable Join Tables yang sudah berhasil kita buat di laravel.
|
| Contoh Tampilan DataTable Join Tables |
Kesimpulan
Apa itu Eloquent with()
with() adalah fungsi Eloquent untuk Eager Loading, dengan perintah ini model utama yang sudah kita panggil beserta relasi didalamnya akan dimuat.
Fungsi ini sangat berguna untuk memuat data dari multiple table, selain itu query yang dibutuhkan tidak terlalu panjang hanya beberapa baris perintah data yang di panggil sudah berhasil dimuat.
Cara Membuat Relasi Tabel di Laravel
Pada tutorial-datatables kali ini kita membuat contoh relasi tabel one to many dengan contoh Artikel dan Kategori, yang mana 1 kategori dimiliki banyak artikel dan 1 artikel hanya memiliki 1 kategori.