Post

Laravel and Vuejs #5

Kembali lagi dengan SHAREHUB ID. Pada article yang lalu kita sudah belajar membuat End Point Test menggunakan Postman. Kali ini tutorial pembuatan aplikasi sederhana buku tamu akan dilanjutkan dengan bagaimana melakukan blade templating di Laravel.

Baiklah, segera kita mulai saja. Kembali ke text editor anda dan buat file baru bernama master.blade.php  pada directory views, tepatnya pada " resources/views ". File yang kita buat tersebut akan kita gunakan sebagai layout pada semua views yang akan kita buat.

Bila telah berhasil membuat file master.blade.php tadi, maka segera buka file tersebut dan tambahkan code sebagai berikut.

master blade

master blade ini adalah blade yang akan kita gunakan sebagai layout ataupun parent untuk blade - blade lain yang akan kita buat. Pada line 27 seperti pada gambar, dapat anda lihat " @yield('content') ". Inilah yang dimaksud dengan blade templatting, dimana pada bagian tersebut nantinya yang akan berisi section dari blade yang merupakan child dari master blade.

Selanjutnya, pada directory Views, buatlah folder/directory baru bernama " signatures ", lalu pada directory tersebut buatlah 2 file baru dengan nama " index.blade.php, dan sign.blade.php ". Setelah berhasil, masih pada text eitor anda, buka file index.blade.php yang berada pada directory signatures tadi dan tambahkan code sebagi berikut.

index blade

Dapat anda lihat pada line pertama bahwa index blade merupakan hasil inherit dari master blade. Dan " @section('content') " adalah child section yang tadi telah kita deklarasi di master blade. Sebagai tips, jangan pernah lupa untuk menutup section yang sudah dibuat. Bagaimana menutup section dapat dilihat pada line 11.

Selanjutnya beralih pada file sign.blade.php, lalu tambahkan code sebagai berikut.

sign blade

Baiklah, sampai disini untuk blade templating. Bila anda perhatikan pada index blade terdapat tag element " <signatures></signatures> " dan pada sign blade terdapat tag element " <signature-form></signature-form> ". Tag element tersebut nantinya akan berisi component Vue.js yang akan kita buat pada article selanjutnya.

Sekian yang dapat saya sampaikan. Terimakasih.