### Buat project laravel baru ``` composer create-project laravel/laravel lara9adminlte cd lara9adminlte ``` ### Install yarn jika belum terinstall ``` npm install --global yarn ``` ### Install SASS ``` yarn add sass-loader sass resolve-url-loader --dev ``` ### Install AdminLTE 3 ``` yarn add admin-lte@^3.2 ``` ### Tambahkan di `resources/sass/app.scss` Buat file/foldernya secara manual jika belum ada ```sass // Fonts @import url("https://fonts.googleapis.com/css?family=Raleway:300,400,600"); // adminlte css @import "~admin-lte/plugins/fontawesome-free/css/all.min.css"; @import "~admin-lte/plugins/icheck-bootstrap/icheck-bootstrap.min.css"; @import "~admin-lte/dist/css/adminlte.min.css"; @import "../css/app.css"; ``` ### Tambahkan di `resources/js/bootstrap.js` Tambahkan di baris paling bawah ```js ... // adminlte require('admin-lte/plugins/jquery/jquery.min') require('admin-lte/plugins/bootstrap/js/bootstrap.bundle.min') require('admin-lte') ``` ### Ubah kodenya `webpack.mix.js` jadi seperti ini ```js mix .js('resources/js/app.js', 'public/js') .sass('resources/sass/app.scss', 'public/css') .copy( 'node_modules/admin-lte/dist/img', 'public/admin-lte/dist/img' ) .version(); ``` ### Tambahkan di `routes/web.php` ```php ... Route::get('starter', function () { return view('starter'); }); ``` ### Buat file `resources/views/starter.blade.php` Code ini modif dari `node_modules/admin-lte/starter.html` ```php AdminLTE 3 | Starter {{-- Styles --}}

Starter Page

Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Card link Another link

Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Card link Another link

Featured

Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere

Featured

Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere

{{-- Scripts --}} ``` ### Compile asset Jalankan: ``` yarn run development ``` atau (sesuai kebutuhan): ``` yarn run production ``` ### Uji coba Jalankan: ``` php artisan serve ``` Akses url: ``` http://127.0.0.1:8000/starter ``` ### Tambahkan asset css dan js sesuai kebutuhan css dan js yang kita include-kan di app.scss dan bootstrap.js itu belum final, jadi kita perlu menambahkan lagi sesuai kebutuhan Misal kita mau membuat tampilan seperti `node_modules/admin-lte/index.html`, maka kita buka dulu filenya, lalu perhatikan bagian include css dan js nya Nah dari situ kita tahu asset css dan js apa saja yang dibutuhkan

nafism05

Cara Mudah Integrasi Laravel 9 dan AdminLTE 3 2022

Join Our Newsletter. No Spam, Only the good stuff.