PENGGUNAAN BLADE TEMPLATE LARAVEL
Hallo lagi guys!! disini kita akan mencoba membuat
implementasi penggunaan blade template laravel sederhana dengan menggunakan
bootstrap Adminlte.
Admin LTE merupakan salah satu template yang paling sering digunakan oleh web developer sebagai backend template pada proyek yang sedang dikerjakan. template ini dibuat menggunakan framework bootsrap yang merupakan framework CSS yang paling banyak digunakan di kalangan web desainer sekarang
Blade adalah template engine bawaan dari framework laravel. Keuntungan menggunakan template engine ini adalah kemudahan dalam syntax yang dipakai. Sehingga menggunakan blade dalam mengatur layout web yang kita bangun akan menjadi lebih mudah. Penggunaan blade template harus menggunakan ekstensi .blade.php.
Yuk langsung aja ya :D
- Pastikan kamu sudah download adminLTEnya
- Unzip file tsb di file C:\xampp\htdocs\kel1\public dan Ganti file name menjadi “Asset” (sebenarnya bebas mau diganti dengan apa saja)
3. Buat route di file web.php misalnya
dengan nama admin lte. Yang akan dilakukan disini yakni pembuatan template
dasar, jadi template tersebut bisa kita gunakan beberapa kali dengan extends
dari admin lte.
Ket: Dalam route diatas kita membuat url baru dengan nama adminlte, yang
nantinya route ini akan merender view yang bernama admin lte. Jika langsung
kita buka dengan http://localhost/kel1/public/adminlte maka akan error. Jadi
ikuti dulu langkah selanjutnya ya..
4. Buat view baru yakni file
adminlte.blade.php Isi dari adminlte.blade.php ini yakni isi dari index.html
yang ada dalam admin lte yang telah direname menjadi Asset. Buka file
index.html tersebut daln copy ke dalam file adminlte.blade.php.
Jika kita coba buka kembali http://localhost/kel1/public/adminlte akan
muncul tampilan tapi belum sempurna artinya masih berantakan.
5. Untuk membuat view adminlte sempurnya
yang kia lakukan yakni : Buat file head.blade.php di
directory C:\xampp\htdocs\kel1\resources\views\template yang sebelumnya kita
telah membuat folder template dalam views . Isi dari file head.blade.php yakni
head yang ada di file adminlte.blade.php yang ditandai dengan tag <head> sampai</head> *hanya
isinya saja tidak dengan tag <head> nya. Lalu ubah link
css nya supaya template admin lte bisa terlihat rapih. Kita tambahkan link
”{{url(‘asset/...[isi ekstensi css nya tetap]...’)}}” untuk semua syntax yang
berekstensi css. Lebih jelasnya lihat gambar dibawah:
Ket: Asset diatas adalah nama folder adminlte yang telah kita rename. Setelah di
cut dan dipindahkan ke file head.blade.php.
lalu Include file
tersebut dalam adminlte.blade.php, seperti gambar dibawah:
Ket: include filenya yang berada di folder template dan nama filenya head.
Tanda titik ditas yakni sama seperti tanda slash ‘/’ yang menunjukan direktory,
karena filenya .blade maka ditandai dengan titik.
6. Buat file
header.blade.php dalam directory yang sama dengan file head. Lakukan langkah
yang sama seperti pada file head.blade.php. cut syntax header yang ada dalam
adminlte.blade.php dari awal tag <header > sampai </header> lalu
paste ke dalam file header.
Sehingga tidak ada file header dalam adminlte.blade.php. lalu include kan
kembali file header, seperti pada gambar dibawah:
7. Buat file
sidebar.blade.php. Dan lakukan langkah yang sama seperti sebelumnya.
Include sidebar dalam adminlte.blade.php
8. Buat file
footer.blade.php. cut isi footer dalam adminlte.blade.php paste ke file
footer.
lalu include kan dalam adminlte.blade.php
9. Buat file
control-sidebar.blade.php. cut syntax dalam tag <aside
class=”control-sidebar>
lalu include kan dalam adminlte.blade.php
10. Buat file script.blade.php. cut semua syntax
dengan tag <script>...</script> dan paste dalam file ini.
Tambahkan url diawalnya pada syntax yang berekstensi .js =
“{{url(‘/asset/....’)}}” seperti pada gambar seperti yang telah kita lakukan
pada syntax .css sebelumnya.
Lalu includekan kembali di file adminlte
Setelah dipisahkan maka isi file adminlte hanya 500 baris, tapi itu masih
panjang karena template utamanya masih belum kita edit, template utama yakni
‘content-wrapper’.
11. Hapus semua isi content-wrapper lalu
ketikan “@yield(‘content’)”
Jika dijalankan tampilannya masih kosong.
12. Buat route kembali di web.php.
Ket: kita membuat resource dari file data-barang dan viewnya yakni
DataBarangController. Maka kita harus membuat file index.blade.php untuk implementasi
yieldnya dan membuat file controller yakni’DataBarangController.php’.
13. Buat index.blade.php dalam directory
C:\xampp\htdocs\kel1\resources\views\data-barang yangs ebelumnya kita membuat
folder data-barang terlebih dahulu.
Ket: Extends file adminlte nya lalu buat section content. Misalnya kita
membuat heading dengan tag <h1></h1> dengan isi yakni hanya kata
‘Ini Contoh Halaman Menggunakan Template.’
14. Lalu Buat controller baru dengan nama
DataBarangController.php di direktory C:\xampp\htdocs\kel1\app\Http\Controllers
di CMD / Command Prompt, sesuai dengan yang ada dalam route.
Ket: file ini akan kita gunakan saat kita membuat template data barang.
Tapi di penjelasan kali ini kita hanya membuat template untuk data barang tapi
tampilannya hanya sebagai contoh saja. Kita bisa ubah isinya di penjelasan
selanjutnya yaa...
15. Maka kita dibuka dengan http://localhost/kel1/public/data-barang, data-barang ini kita
tentukan dalam file route yang dibuat tadi. Maka akan muncul seperti
dibawah:
Ket: jadi view ini akan sama tampilannya seperti pada adminlte awal, tapi
isinya atau content-wrippernya sudah kita edit dan diganti dengan isi yang ada
dalam section dalam file index.blade.php.
Saat kita membuka scriptnya yakni dengan menekan ctrl+u kita akan menemuka
isi contennya yakni seperti gambar dibawah yang merupakan isi dari
index.blade.php tadi.
Ya, segitu aja dari saya, semoga bermanfaat :D
referensi
https://belajarphp.net/menu-adminlte-codeigniter/
google.com
blog teman teman saya
Komentar
Posting Komentar