Contoh Pengerjaan Soal UKK SMK RPL Paket 2 Tahun 2023

Instalasi Laravel UI dan Yajra Datatables

Autentikasi merupakan mekanisme untuk memastikan identitas pengguna yang akan masuk ke sistem atau aplikasi. Mekanisme yang umumnya dipakai adalah pengecekan kesesuaian pasangan username atau email, dengan password yang digunakan. Biasanya, menggunakan pemrograman PHP native tanpa framework, pembuatan mekanisme login apalagi lengkap dengan registrasi pengguna, akan sangat menyita waktu. Namun Laravel menyediakan berbagai mekanisme autentikasi yang bisa digunakan, dan salah satunya adalah Laravel UI Auth, yang menyediakan mekanisme scaffolding (kerangka tampilan dan logic dasar) untuk keperluan Login, Register, Forget Password, dan sebagainya, dengan waktu penyiapan yang sangat singkat. Namun dengan perubahan yang sudah kita lakukan sebelumnya terhadap tabel users, ada beberapa kode yang perlu disesuaikan agar proses registrasi tidak error nantinya.

Yajra Datatables merupakan paket untuk memudahkan pemanfaatan komponen Datatables dengan lebih praktis di Laravel, secara server-side. Karena ada beberapa langkah pada instalasi Yajra Datatables yang beririsan dengan penyiapan Laravel UI Auth, maka bisa kita kerjakan sekaligus pada bagian ini.

Install Laravel UI dan Yajra Datatables menggunakan perintah berikut di terminal (secara bergantian, baris demi baris):

composer require laravel/ui --dev
php artisan ui bootstrap --auth
composer require yajra/laravel-datatables:9.*

CATATAN: pada saat artikel ini ditulis, sudah ada pembaruan pada Yajra Datatables terbaru menjadi versi 10.1, yang tidak compatible dengan Laravel 9, sehingga kita harus menambahkan versi yang dibutuhkan secara spesifik, dalam hal ini adalah 9.*

Lalu, lakukan instalasi Laravel Datatables Vite untuk kelengkapan komponen yang dibutuhkan:

npm i laravel-datatables-vite --save-dev

Setelah prosesnya selesai, buka file resources\js\app.js , tambahkan kode berikut pada baris terakhir, lalu simpan file:

import 'laravel-datatables-vite';

Selanjutnya, buka file resources\sass\app.scss , tambahkan kode berikut pada baris terakhir, lalu simpan file:

// DataTables
@import 'bootstrap-icons/font/bootstrap-icons.css';
@import "datatables.net-bs5/css/dataTables.bootstrap5.min.css";
@import "datatables.net-buttons-bs5/css/buttons.bootstrap5.min.css";
@import 'datatables.net-select-bs5/css/select.bootstrap5.css';

Jalankan perintah berikut pada terminal setiap akan melakukan pengujian halaman web di browser:

npm run dev

Jika Anda akses URL aplikasi di browser, sekarang seharusnya sudah muncul menu baru bernama Login dan Register.