Integrasi Template AdminLTE dengan Laravel
Post kali ini Saya mau ngasih tau caranya biar template AdminLTE bisa dipakai di laravel atau disatukan dalam project laravel.
Yang dibutuhkan adalah satu buah proyek laravel kamu dan template AdminLTE yang bisa kamu unduh di sini. Nah, setelah punya bahan-bahannya kita lanjut ke langkah selanjutnya.
Pertama, extract AdminLTE ke folder nama-proyek/public kemudian ubah nama foldernya menjadi assets. Contoh gambarnya sebagai berikut.
menjadi
Setelah itu buka file index.html dalam folder assets tadi dan salin semua isinya. Kemudian kamu buat view di nama-proyek\resources\views\ dan beri nama adminlte.blade.php (ingat extensinya harus *.blade.php). setelah terbuat file-tadi. Kemudian tempel atau paste isi dari index.html tadi di adminlte.blade.php lalu simpan.
Buat folder baru pada nama-proyek\resources\views dengan nama template.
Isi folder tersebut dengan dua file berikut :
head.blade.php
Isi dari file ini adalah isi dari file adminlte.blade.php tapi hanya bagian head, yakni dari karakter setelah tag head pembuka ( <head> ) sampai karakter sebelum akhir tag head ( </head> ). Untuk membuatnya buka file adminlte.blade.php pada views dan potong atau cut isian dari head-nya dan paste atau tempelkan pada file ini.
*Gambar tidak sampai akhir
Header.blade.php
Isi dari file ini adalah isi dari file adminlte.blade.php tapi hanya bagian header, yakni dari tag header pembuka ( <header> ) sampai akhir tag header ( </header> ). Untuk membuatnya buka file adminlte.blade.php pada views dan potong atau cut isian dari header-nya dan paste atau tempelkan pada file ini.
sampai
*gambar tidak lengkap
Setelah membuat dua buah file tadi, buka kembali file adminlte.blade.php kamu dan edit bagian dalam tag head dengan @include('template.head') dan header dengan @include('template.header'). contohnya seperti gambar di bawah ini.
*gambar tidak sampai akhir
Sekarang, kamu buka file head.blade.php kamu, sekarang kita akan mengubah semua yang berekstensi css agar dapat terbaca oleh proyek. Caranya adalah dengan menambah kode {{url('/assets/ dan menutup dengan ‘)}} contohnya dari yang awalnya
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
menjadi
<link rel="stylesheet" href="{{url('/assets/bower_components/bootstrap/dist/css/bootstrap.min.css')}}">
Dan ingat untuk mengubah semua kode yang memanggil file css. Contoh gambarnya seperti berikut.
*gambar tidak sampai akhir
Setelah itu, buka kembali file adminlte.blade.php yang tadi Kamu buat dan coba arahkan ke kode-kode di bagian bawah. Terdapat banyak kode script yang memanggil file javascript. Agar file dapat terpanggil, kita perlu melakukan seperti pada head tadi, yakni menambah {{url('/assets/ di awal, dan mengakhiri dengan ‘)}} pada semua kode yang memanggil script berekstensi js. Contohnya dari
<script src="bower_components/jquery/dist/jquery.min.js"></script>
menjadi
<script src="{{url('/assets/bower_components/fastclick/lib/fastclick.js')}}"></script>
contoh gambar tampilan kode-nya sebagai berikut.
*gambar tidak sampai akhir
Setelah semua itu, sekarang kita buat routes baru di file route. Letaknya di nama-proyek\routes\web.php dan tambahkan route berikut.
Route::get('/adminlte', function() {
return view('adminlte');
});
Sekarang coba buka browser kesayangan kamu dan jangan lupa nyalakan web service-nya. Lalu isikan alamat localhost/nama-proyek/public/adminlte dan lihat hasilnya akan sama seperti gambar di bawah ini.
Jika halaman yang muncul kekurangan fungsi seperti javascript yang tidak bekerja, mungkin ada kesalahan sewaktu pengeditan tadi. Coba untuk teliti memeriksanya. Sebenarnya hal yang sama bisa dilakukan pada komponen lainnya seperti sidebar dan lain-lainnya.
Oke segitu dulu postingan kali ini, terima kasih dan sampai jumpa di postingan selanjutnya...
About 64 Admin
No comments