My Lecture Notes

IMPLEMENTASI PENGGUNAAN BLADE TEMPLATE LARAVEL

Disini saya akan mencoba membuat implementasi penggunaan blade template laravel sederhana dengan menggunakan bootstrap Adminlte.

Admin LTE merupakan sebuah template yang dibangun dengan framework css Bootstrap, salah satu template web berbasis bootstrap yang cocok digunakan untuk dashboard admin. Desain yang dipakai berbentuk flat yang memang menjadi tren disaat ini.

Blade adalah template engine yang disediakan oleh framework laravel atau bawaan dari framework laravel. Blade adalah konversi dari bahasa pemrograman PHP ke Blade itu sendiri agar lebih mudah dipahami dan lebih singkat. Kenapa kita harus menggunakan Blade ?, karena dengan menggunakan blade dalam mengatur layout web yang kita bangun akan lebih mudah. Mudah disini jika anda sudah mengetahui dasar – dasar blade itu sendiri.

Untuk lebih jelasnya ikuti langka dibawah ya.

Download admin lte bebas download yang mana saja, atau bisa download di github https://github.com/almasaeed2010/AdminLTE
Unzip file tsb di file C:\xampp\htdocs\kel5\public dan Ganti file name menjadi “Asset” (sebenarnya bebas mau diganti dengan apa saja)
Bikin route di file web.php misalnya dengan nama admin lte. Yang akan dilakukan disini yaitu pembuatan template dasar, jadi template tersebut bisa kita gunakan beberapa kali dengan extends dari admin lte.

Keterangan: 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/kel5/public/adminlte maka akan error. Jadi ikuti dulu langkah selanjutnya ya..
Buat view baru yaitu file adminlte.blade.php Isi dari adminlte.blade.php ini yaitu 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/kel5/public/adminlte akan muncul tampilan tapi belum sempurna artinya masih berantakan. Seharusnya tampilan nya seperti dibawah ini:
Untuk membuat view adminlte sempurnya yang kia lakukan yaitu : Buat file head.blade.php di directory C:\xampp\htdocs\kel5\resources\views\template yang sebelumnya kita telah membuat folder template dalam views . Isi dari file head.blade.php yaitu 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 syntak yang berekstensi css. Lebih jelasnya lihat gambar dibawah:

Keterangan: 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:

Keterangan: include filenya yang berada di folder template dan nama filenya head. Tanda titik ditas yaitu sama seperti tanda slash ‘/’ yang menunjukan direktory, karena filenya .blade maka ditandai dengan titik.
Buat file header.blade.php dalam directory yang sama dengan file head. Lakukan langkah yang sama seperti pada file head.blade.php. cut syntak 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:
Buat file sidebar.blade.php. Dan lakukan langkah yang sama seperti sebelumnya.

Include sidebar dalam adminlte.blade.php
Buat file footer.blade.php. cut isi footer dalam adminlte.blade.php paste ke file footer.

lalu include kan dalam adminlte.blade.php
Buat file control-sidebar.blade.php. cut syntak dalam tag <aside class=”control-sidebar>

lalu include kan dalam adminlte.blade.php
Buat file script.blade.php. cut semua syntak dengan tag <script>...</script> dan paste dalam file ini.

Tambahkan url diawalnya pada syntak yang berekstensi .js = “{{url(‘/Asset/....’)}}” seperti pada gambar seperti yang telah kita lakukan pada syntak .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 yaitu ‘content-wrapper’, isi content-wrapper yaitu seperti gambar yang berada dalam lingkaran merah dibawah:
Hapus semua isi content-wrapper lalu ketikan “@yield(‘content’)”

Jika dijalankan tampilannya masih kosong. Seperti digambar dibawah:

Keterangan: jika template sudah seperti gambar diatas sebenarnya template sudah jadi, kita tinggal kita perbaiki. Contohnya perbaiki isi nya, link-link nya dll. Yield ini nantinya akan diganti dengan section, jadi saat kita melakukan extends template maka yeald ini akan diisi dengan section content.
Buat route kembali di web.php.

Keterangan: kita membuat resource dari file data-barang dan viewnya yaitu DataBarangController. Maka kita harus membuat file index.blade.php untuk implementasi yieldnya dan membuat file controller yaitu’DataBarangController.php’.
Buat index.blade.php dalam directory C:\xampp\htdocs\kel5\resources\views\data-barang yangs ebelumnya kita membuat folder data-barang terlebih dahulu.

Keterangan: Extends file adminlte nya lalu buat section content. Misalnya kita membuat heading dengan tag <h1></h1> dengan isi yaitu hanya kata ‘Ini Contoh Halaman Menggunakan Template.’
Lalu Buat controller baru dengan nama DataBarangController.php di direktory C:\xampp\htdocs\kel5\app\Http\Controllers di CMD / Command Prompt, sesuai dengan yang ada dalam route. Seperti pada gambar dibawah:

Maka isinya akan otomatis seperti gambar dibawah:

Keterangan: 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...
Maka kita dibuka dengan http://localhost/kel5/public/data-barang, data-barang ini kita tentukan dalam file route yang dibuat tadi. Maka akan muncul seperti dibawah:

Keterangan: 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 yaitu dengan menekan ctrl+u kita akan menemuka isi contennya yaitu seperti gambar dibawah yang merupakan isi dari index.blade.php tadi.