Cara menggunakan laravel 9 vite bootstrap

Era laravel 9 telah tiba. Resmi rilis pada 8 Februari 2022 kemarin dengan persyaratan PHP minimum versi 8.0 - 8.1. Walaupun Laravel AdminLTE pada saat tulisan ini dibuat belum mengeluarkan versi terbarunya yang mendukung Laravel 9 tetapi kita masih bisa melakukan penginstalan seperti biasanya.

Instalasi Laravel 9

Kita akan gunakan perintah composer untuk menginstal laravel 9.

composer create-project laravel/laravel adminlte-l9

Instalasi Laravel-AdminLTE

Masuk ke dalam folder adminlte-l9

cd adminlte-l9

Ketik perintah Composer berikut untuk melakukan instalasi package laravel-adminlte:

composer require jeroennoten/laravel-adminlte

Lanjutkan dengan perintah:

php artisan adminlte:install

Instal Laravel UI dengan perintah berikut:

composer require laravel/ui

Gunakan perintah di bawah ini untuk menggenerate file controller dan view blade yang akan menangani otentikasi seperti login, register, forget password, dan lain-lain.

php artisan ui bootstrap --auth

Lanjutkan dengan menginstall package npm dan menjalankan run untuk kompile.

npm install && npm run dev

Ada tambahan untuk kita instal

npm install resolve-url-loader@^5.0.0 --save-dev --legacy-peer-deps

Buat file webpack.mix.js

Sejak Laravel menggunakan Vite, file webpack.mix.js tidak tersedia sehingga kita harus menambahkan file tersebut di root folder. Lalu masukkan ke dalam file tersebut dengan isi sebagai berikut:

const mix = require('laravel-mix'); let productionSourceMaps = false; /* |-------------------------------------------------------------------------- | Mix Asset Management |-------------------------------------------------------------------------- | | Mix provides a clean, fluent API for defining some Webpack build steps | for your Laravel application. By default, we are compiling the Sass | file for the application as well as bundling up all the JS files. | */ mix.js('resources/js/app.js', 'public/js') .sass('resources/sass/app.scss', 'public/css') .sourceMaps(productionSourceMaps, 'source-map');

Instalasi package yang diperlukan

Bootstrap yang kita install melalui perintah composer require jeroennoten/laravel-adminlte6 adalah bootstrap 5 sehingga kita perlu menghapusnya dan menggantinya dengan bootstrap 4.

npm remove bootstrap npm i bootstrap@4.6.1 -P

Hapus juga popperjs/core:

cd adminlte-l90

Install package lainnya:

cd adminlte-l91

Ganti:

cd adminlte-l92

Dengan:

cd adminlte-l93

Membuat Database

cd adminlte-l94

Buka project kita dengan  teks editor yang anda inginkan seperti VSCode. Buka file .env dan edit pada bagian database:

cd adminlte-l95

Jalankan migrate:

cd adminlte-l96

Install View Auth

Ganti view blade login, register, lupa password, konfirmasi email, dll ke tampilan view blade adminlte.

cd adminlte-l97

Ketik: yes, pada pertanyaan yang muncul: The authentication views already exists. Want to replace the views? (yes/no) [no]:

Jalankan Server

cd adminlte-l98

Buka Browser, ketik: composer require jeroennoten/laravel-adminlte7.

Hasilnya:

Pergi ke halaman Register dengan klik menu "Register".

Isikan sesuai dengan form, lalu klik "Register" untuk menyimpan. Proses selanjutnya akan membawa anda langsung ke dashboard.

Berikutnya kita akan mengubah tampilan dashboard default dengan tampilan AdminLTE, caranya pergi ke composer require jeroennoten/laravel-adminlte8

cd adminlte-l99

Hapus dan ganti dengan:

composer require jeroennoten/laravel-adminlte0

Hasilnya:

Menampilkan Foto User di Top Navbar

Buka model composer require jeroennoten/laravel-adminlte9 yang berada di dalam folder php artisan adminlte:install0, tambahkan kode berikut setelah method php artisan adminlte:install1:

composer require jeroennoten/laravel-adminlte1

Selanjutnya buka php artisan adminlte:install2 (baris 67 - 72).

composer require jeroennoten/laravel-adminlte2

Ubah nilainya menjadi seperti berikut:

composer require jeroennoten/laravel-adminlte3

Hasilnya:

Jika ingin menggunakan avatar atau foto profile yang tetap tidak berubah-ubah, kita bisa mempersiapkan gambar yang ingin kita jadikan avatar. Kita simpan dalam folder public, sebelumnya kita buatkan dulu folder images dalam folder publik, khusus untuk menyimpan gambar.

Buka kembali php artisan adminlte:install3, lalu ganti method php artisan adminlte:install4 menjadi:

composer require jeroennoten/laravel-adminlte4

Anda bisa mengganti php artisan adminlte:install5 sesuai dengan nama gambar yang anda miliki.

Hasilnya:

Lalu Bagaimana kalau kita ingin mengubah photonya tidak statis melainkan dinamis sesuai dengan foto yang kita simpan di database? Maka kita perlu menambahkan kolom foto atau avatar pada table user dan memanggilnya dengan Auth. Contoh:

composer require jeroennoten/laravel-adminlte5

Pada judul berikutnya kita akan coba melakukannya. Sampai saat ini pembahasan dicukupkan sampai di sini. Selamat mencoba.