Cara membuat filter datatable di Laravel
Cara membuat filter datatable di Laravel - Yosh sobs-sobs berjumpa lagi dengan gua, dan gua berjumpa lagi dengan sobs-sobs, gimana keadaanya semoga sobs-sobs semua diberikan kesehatan sehingga bisa menikmati segelas kopi panas dan seutas pisang goreng. untuk gambaran hasilnya akan seperti dibawah ini sobs-sobs :
Pada kesempatan kali ini gua akan sharing sobs-sobs tentang bagaimana membuat filter untuk Yajra DataTable Laravel, sedikit cerita terlebih dahulu semua bermula dahulu kala ketika gua masih polos belum punya pengetahuan apa-apa dihadapkan dengan sebuah kasus dimana gua harus mengharuskan membuat suatu filter untuk memudahkan user mencari informasi yang dia mau. pada saat itu gua bingung karena pengetahuan terbatas dan akhirnya bertekad untuk bisa, setelah menyelam kesana kemari akhirnya bisa. oke dari pada gua lupa caranya gua memutuskan untuk menuliskannya disini, itung-itung kalo lupa ya bisa liat ke blog gua sendiri. hehe Oke langsung saja
1. Instalasi Laravel
composer create-project laravel/laravel sruput-kode
pastikan segalanya sesuatu sudah siap sobs-sobs.
2. Konfigurasi .env DB_DATABASE, DB_USERNAME, DB_PASSWORD sesuai dengan punya sobs-sobs.
APP_NAME=Laravel
APP_ENV=local
APP_KEY=base64:LnYrlS8ZMnl3KvDNYHPl5lppJx7r4uwaf2fHXac1Lo8=
APP_DEBUG=true
APP_URL=http://localhost
LOG_CHANNEL=stack
LOG_DEPRECATIONS_CHANNEL=null
LOG_LEVEL=debug
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=sruput_kode
DB_USERNAME=root
DB_PASSWORD=
BROADCAST_DRIVER=log
CACHE_DRIVER=file
FILESYSTEM_DISK=local
QUEUE_CONNECTION=sync
SESSION_DRIVER=file
SESSION_LIFETIME=120
MEMCACHED_HOST=127.0.0.1
REDIS_HOST=127.0.0.1
REDIS_PASSWORD=null
REDIS_PORT=6379
MAIL_MAILER=smtp
MAIL_HOST=mailhog
MAIL_PORT=1025
MAIL_USERNAME=null
MAIL_PASSWORD=null
MAIL_ENCRYPTION=null
MAIL_FROM_ADDRESS="hello@example.com"
MAIL_FROM_NAME="${APP_NAME}"
AWS_ACCESS_KEY_ID=
AWS_SECRET_ACCESS_KEY=
AWS_DEFAULT_REGION=us-east-1
AWS_BUCKET=
AWS_USE_PATH_STYLE_ENDPOINT=false
PUSHER_APP_ID=
PUSHER_APP_KEY=
PUSHER_APP_SECRET=
PUSHER_HOST=
PUSHER_PORT=443
PUSHER_SCHEME=https
PUSHER_APP_CLUSTER=mt1
VITE_PUSHER_APP_KEY="${PUSHER_APP_KEY}"
VITE_PUSHER_HOST="${PUSHER_HOST}"
VITE_PUSHER_PORT="${PUSHER_PORT}"
VITE_PUSHER_SCHEME="${PUSHER_SCHEME}"
VITE_PUSHER_APP_CLUSTER="${PUSHER_APP_CLUSTER}"
3. Instalasi dan konfigurasi Laravel Yajra DataTables
composer require yajra/laravel-datatables-oracle:"^10.0"
Yajra\DataTables\DataTablesServiceProvider::class,
php artisan vendor:publish --tag=datatables
php artisan make:model UserDivisi -m
5. Buka file migrasi yang ada didalam folder database/migrations edit dan sesuaikan file migrasinya sobs-sobs. dan sesuaikan seperti ada yang dibawah ini
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
return new class extends Migration
{
/**
* Run the migrations.
*
* @return void
*/
public function up()
{
Schema::create('user_divisis', function (Blueprint $table) {
$table->id();
$table->string('nama_divisi'); // tambahkan ini
$table->timestamps();
});
}
/**
* Reverse the migrations.
*
* @return void
*/
public function down()
{
Schema::dropIfExists('user_divisis');
}
};
namespace App\Models;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
class UserDivisi extends Model
{
use HasFactory;
// tambahkan ini
protected $guarded = ['id'];
// tambahkan ini
public function users()
{
return $this->hasMany(User::class);
}
}
6. Oke next step kita akan berurusan dengan model User dan file migrasinya sobs-sobs.
Buka file migrasi user yang sudah ada secara default pada saat kita menginstal laravel, file tersebut berada di database/migrations dan biasanya urutan paling pertama
use Illuminate\Database\Migrations\Migration; use Illuminate\Database\Schema\Blueprint; use Illuminate\Support\Facades\Schema; return new class extends Migration { /** * Run the migrations. * * @return void */ public function up() { Schema::create('users', function (Blueprint $table) { $table->id(); $table->string('name'); $table->string('email')->unique(); $table->timestamp('email_verified_at')->nullable(); $table->string('password'); // tambahkan ini $table->integer('divisi'); // tambahkan ini $table->boolean('aktif'); $table->rememberToken(); $table->timestamps(); }); } /** * Reverse the migrations. * * @return void */ public function down() { Schema::dropIfExists('users'); } };
Oke kita sudah selesai berurusan dengan file migrasi user, selanjutnya kita baku hantam dengan User model, silahkan sobs-sobs buka User Modelnya. dan sesuaikan seperti dibawah ini :
namespace App\Models;
// use Illuminate\Contracts\Auth\MustVerifyEmail;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Foundation\Auth\User as Authenticatable;
use Illuminate\Notifications\Notifiable;
use Laravel\Sanctum\HasApiTokens;
class User extends Authenticatable
{
use HasApiTokens, HasFactory, Notifiable;
protected $fillable = [
'name',
'email',
'password',
'divisi', // tambahkan ini
'aktif', // tambahkan ini
];
protected $hidden = [
'password',
'remember_token',
];
protected $casts = [
'email_verified_at' => 'datetime',
];
// tambahkan ini
public function divisi()
{
return $this->belongsTo(UserDivisi::class, 'divisi');
}
}
7. Langkah besar selanjutnya adalah kita edit file factory user ini dilakukan karena kita akan menggunakan factory ini sebagai penghasil data dummy kita, oke buka file database/factories/UserFactory.php sesuaikan dengan dibawah sobs-sobs
namespace Database\Factories;
use Illuminate\Database\Eloquent\Factories\Factory;
use Illuminate\Support\Str;
class UserFactory extends Factory
{
public function definition()
{
return [
'name' => fake()->name(),
'email' => fake()->unique()->safeEmail(),
'email_verified_at' => now(),
'password' => '$2y$10$92IXUNpkjO0rOQ5byMi.Ye4oKoEa3Ro9llC/.og/at2.uheWG/igi', // password
'remember_token' => Str::random(10),
'divisi' => mt_rand(1, 4),
'aktif' => mt_rand(0, 1),
];
}
public function unverified()
{
return $this->state(fn (array $attributes) => [
'email_verified_at' => null,
]);
}
}
8. next kita ke file database seeder yang berada di database/seeders/DatabaseSeeder.php ubah dan sesuaikan seperti dibawah ini
namespace Database\Seeders;
// use Illuminate\Database\Console\Seeds\WithoutModelEvents;
use Illuminate\Database\Seeder;
use App\Models\User;
use App\Models\UserDivisi;
class DatabaseSeeder extends Seeder
{
public function run()
{
UserDivisi::create([
'nama_divisi' => 'marketing'
]);
UserDivisi::create([
'nama_divisi' => 'it'
]);
UserDivisi::create([
'nama_divisi' => 'manajemen'
]);
UserDivisi::create([
'nama_divisi' => 'engineer'
]);
User::factory(50)->create();
}
}
Sedikit penjelasan sobs-sobs disini gua akan membuat data UserDivisi 4 buah yaitu marketing, it, manajemen dan engineer dan data User sebanyak 50 dimana user tersebut dapat mempunyai divisi secara acak 1 sampai dengan 4 sesuai dengan id divisi dan status aktif 0 dan 1, dimana 0 dianalogikan sebagai tidak aktif dan 1 sebegai aktif
selanjutnya kita lakukan migrasi dan seed sobs dengan artisan
php artisan migrate --seed
Silahkan dicek sobs-sobs apakah data sudah ada
9. Berikutnya kita akan membuat sebuah controller sobs-sobs, silahkan sobs-sobs buat controller
php artisan make:controller WebController
Setelah controller terbuat maka selanjutnya kita edit WebController tesebut sehingga menjadi seperti dibawah ini sobs-sobs
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Models\User;
use App\Models\UserDivisi;
use Yajra\DataTables\Facades\DataTables;
class WebController extends Controller
{
public function index(Request $request)
{
$daftarDivisi = UserDivisi::orderBy('nama_divisi', 'ASC')->get();
$data = [
'daftarDivisi' => $daftarDivisi,
];
if ($request->ajax()) {
if ($request->divisi == "all") {
if ($request->status == "all") {
$user = User::with('divisi');
} else {
$user = User::with('divisi')->where('aktif', $request->status);
}
} else {
if ($request->status == 'all') {
$user = User::with('divisi')->where('divisi', $request->divisi);
} else {
$user = User::with('divisi')
->where('divisi', $request->divisi)
->where('aktif', $request->status);
}
}
return DataTables::eloquent($user)
->make(true);
}
return view('index', $data);
}
}
Berikut penjelasan singkatnya sobs-sobs pertama $daftarDivisi ini akan kita gunakan untuk mengambil semua daftar divisi yang ada nantinya hasil dari $daftarDivisi ini akan menjadi pilihan user untuk melakukan filtering data.
Selanjutnya adalah kita melakukan cek request ajax karena request datatable berupa ajax.
berikutnya kita melakukan pengecekan dari nilai yang dikirim dengan name divisi jika value divisi sama dengan 'all' artinya si user tidak melakukan filtering data divisi dan jika selain 'all' maka si user melakukan filtering data begitu juga dengan status silahkan dicermati baik-baik sobs.
lalu pertanyaan darimanakah value name divisi itu ??
yap tentunya dari data yang dikirimkan pada saat inisialisasi datatable didalam views.
10. Membuat views, silahkan sobs-sobs buat views dengan nama index.blade.php
dan ikuti seperti dibawah ini
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Sruputkode</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.13.1/datatables.min.css" />
</head>
<body>
<div class="container">
<div class="row">
<div class="col-12">
<h2 class="text-success">Sruputkode.com</h2>
<small>Sruputsss kopi anda sekarang..</small>
</div>
</div>
<div class="row mt-4 mb-5">
<div class="col-3">
<div class="mb-3">
<label for="filter-divisi" class="form-label">Divisi</label>
<select class="form-select form-select-sm" id="filter-divisi">
<option value="all" selected>Semua divisi</option>
@foreach ($daftarDivisi as $divisi)
<option value="{{ $divisi->id }}">{{ $divisi->nama_divisi }}</option>
@endforeach
</select>
</div>
</div>
<div class="col-3">
<div class="mb-3">
<label for="filter-status" class="form-label">Status</label>
<select class="form-select form-select-sm" id="filter-status">
<option value="all" selected>Semua status</option>
<option value="1">Aktif</option>
<option value="0">Tidak aktif</option>
</select>
</div>
</div>
<div class="col-12">
<table class="table" id="tabel-user">
<thead>
<tr>
<th scope="col">No</th>
<th scope="col">Nama</th>
<th scope="col">Email</th>
<th scope="col">Divisi</th>
<th scope="col">Status</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.6.1.min.js"
integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous">
</script>
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.13.1/datatables.min.js"></script>
</body>
<script>
let tabelUser = $('#tabel-user').DataTable({
autoWidth: true,
processing: true,
serverSide: true,
// sorting: false,
ajax: {
url: '/',
data: function(d) {
d.divisi = $('#filter-divisi').val();
d.status = $('#filter-status').val();
}
},
columns: [{
name: 'id',
data: 'id',
render: function(data, type, row, meta) {
return meta.row + meta.settings._iDisplayStart + 1;
}
},
{
name: 'name',
data: 'name',
},
{
name: 'email',
data: 'email',
},
{
name: 'divisi',
data: 'divisi',
render: function(data, type) {
return data.nama_divisi;
}
},
{
name: 'aktif',
data: 'aktif',
render: function(data, type) {
if (data == 1) {
return `<span class="badge text-bg-primary">Aktif</span>`;
} else {
return `<span class="badge text-bg-danger">Tidak aktif</span>`;
}
}
}
]
});
$('#filter-divisi').change(function() {
tabelUser.clear();
tabelUser.draw();
})
$('#filter-status').change(function() {
tabelUser.clear();
tabelUser.draw();
})
</script>
</html>
perhatikan sobs-sobs pada bagian datatable terutama dibagian ajax pada saat inisialisasi kita mengirimkan nilai divisi dan nilai status, nilai ini didapatkan dari masing-masing element.
dan jika nilai-nilai itu berubah maka tabel akan melakukan inisialisasi ulang dan tentunya mengirimkan nilai terbaru sobs-sobs, nah nilai tersebut yang menjadi penentu data mana saja yang ditampilkan.
11. Langkah terakhir yaitu edit routes/web.php
use App\Http\Controllers\WebController;
use Illuminate\Support\Facades\Route;
Route::get('/', [WebController::class, 'index']);
Nah mungkin artikel ini berakhir sampai disini sobs-sobs, soory ya kalo penjelasan gua tidak begitu jelas maklum kopi sudah tidak terasa hangat begitu juga dengan gorengan, Sekian dan terimakasih sobs-sobs.
See you next time.
Posting Komentar untuk "Cara membuat filter datatable di Laravel"
Posting Komentar