Admin LTE 3 pada Laravel 10

Assalamu alaikum Wr. Wb

Salam Pinter Bareng Komputer, ...zero bit...

Admin LTE merupakan salah satu template tampilan yang paling banyak digunakan oleh programmer web saat membuat aplikasi berbasis web yang dikhususkan untuk admin atau istilahnya adalah CMS (Content Management System). Kalian dapat langsung mendatangi situs resmi Admin LTE dengan mengklik LINK INI. Sampai saat artikel ini dibuat versi Admin LTE yang telah dirilis adalah versi 3.2.

Dalam artikel kali ini saya ingin mengulas bagaimana cara menginstall Admin LTE 3 ke dalam projek Laravel 10 yang notabene sudah menggunakan Vite untuk melakukan proses Mixing asset - asset yang berjalan di atasnya. Termasuk nanti asset milik Admin LTE 3.

Ada beberapa cara untuk melakukan proses instalasi Admin LTE 3 ke dalam projek Laravel 10, yaitu :

1. Download packet Admin LTE 3 secara mandiri, kemudian copas semua file yang dibutuhkan untuk menjalankan Admin LTE 3 di dalam projek Laravel 10 kita satu persatu secara manual dan kita hubungkan satu persatu sehingga Admin LTE 3 bisa berjalan dengan normal secara manual. Cara pertama ini butuh pengetahuan mengenai yang baik mengenai struktur projek Laravel. Karena kalau tidak maka Admin LTE 3 tidak akan bisa jalan dengan normal bahkan dapat mempengaruhi projek Laravel yang telah jadi sebelumnya.
2. Download paket Admin LTE 3 dan langsung install ke dalam projek Laravel kita secara otomatis menggunakan bantuan COMPOSER. Catatannya: jika ingin menggunakan cara kedua ini pastikan kita terhubung dengan jaringan internet secara stabil, kemudian pastikan juga aplikasi COMPOSER sudah terinstall ke dalam komputer kita.

Pada artikel ini kita akan mempraktekkan cara yang kedua. Untuk paket Admin LTE yang akan kita gunakan adalah paket yang telah tersedia di GITHUB milik akun jeroennoten. Alasannya, tutorialnya penggunaan paketnya lengkap dan mudah untuk kita pelajari, paket ini juga telah mensupport Laravel 7 ke atas dan saya rasa cukup komplet untuk digunakan tanpa harus mendownload lagi satu - satu paket tambahan yang dibutuhkan saat menggunakan Admin LTE. 

Berikut langkah - langkah pemasangan Admin LTE 3 ke dalam projek Laravel 10 :

1. Backup terlebih dahulu projek Laravel kalian sebelum melakukan instalasi Admin LTE. Asumsinya, jika proses gagal maka kita masih tetap memiliki projek Laravel yang clean dan dapat digunakan lagi untuk percobaan instalasi berikutnya.
2. Pastikan aplikasi composer sudah terinstall ke dalam komputer dan berjalan dengan normal. Kalau belum terinstal maka lakukan instalasi terlebih dahulu aplikasi nodejs. Silakan download DISINI. Catatan: untuk mengetahui apakah sudah ada aplikasi composer atau belum di dalam komputer kita caranya sudah pernah saya bahas di dalam artikel mengenai cara instalasi Laravel 10, silakan bisa dibaca lagi DISINI.
3. Buka projek Laravel menggunakan VSCode.
4. Ketikkan perintah berikut:

     composer require jeroennoten/laravel-adminlte  
   

5. Setelah proses instalasi selesai lanjutkan dengan mengetikkan perintah berikut ini:

    composer require Laravel/ui  
   

6. Setelah proses instalasi selesai lanjutkan dengan mengetikkan perintah berikut ini:

    php artisan ui:controller  
   

7. Setelah proses instalasi selesai lanjutkan dengan mengetikkan perintah berikut ini:

    php artisan ui:auth  
   

   Catatan : Setiap pertanyaan untuk replace pastikan kalian jawab YES agar file – file halaman seperti Login, Register, dsb yang telah dibuat sebelumnya digantikan dengan file – file baru berbasis Admin LTE.
8. Setelah proses instalasi selesai lanjutkan dengan mengetikkan perintah berikut ini:

    php artisan adminlte:install --interactive  
   

   Catatan : Setiap pertanyaan pastikan kalian jawab YES.
9. Setelah proses instalasi selesai lanjutkan dengan mengetikkan perintah berikut ini:

    php artisan adminlte:plugins install
   

   Catatan : Setiap pertanyaan pastikan kalian jawab YES.
10. Setelah proses instalasi selesai lanjutkan dengan mengetikkan perintah berikut ini:

     php artisan adminlte:install --only=main_views
    

    Catatan : Setiap pertanyaan pastikan kalian jawab YES.
11. Setelah proses instalasi selesai lanjutkan dengan mengetikkan perintah berikut ini:

     php artisan adminlte:install --only=auth_views
    

    Catatan : Setiap pertanyaan pastikan kalian jawab YES.
12. Untuk memastikan semua terinstall dengan baik silakan jalankan perintah berikut :

 npm update  

 npm install  

Catatan : Pastikan tidak terjadi error saat menjalankan perintah di atas.
13. Jalankan perintah di bawah ini untuk melihat hasil tampilan yang terbaru:

 npm run dev  

14. Buka jendela terminal baru kemudian jalankan perintah di bawah ini:

 php artisan serve  

15. Untuk hasilnya dapat dilihat pada tampilan halaman login, register dan reset password yang sekarang sudah berubah.

    

    Login Page Admin LTE3

    

    Register Page Admin LTE3

    

    Reset Password Admin LTE3

Semoga artikel ini bermanfaat.