Halo teman-teman semua, kembali lagi di playlist belajar Laravel 8 bersama saya Sandi Kagali di channel Web Programming Unpas. Dan di episode kali ini kita akan membahas mengenai sebuah fitur yang ada di dalam Laravel 8 yaitu Blade Templating Engine. Ya buat teman-teman yang belum tahu, Templating Engine itu adalah sebuah fitur atau tools untuk membantu kita dalam mengelola tampilan halaman web khususnya untuk sebuah framework. Dan untuk Laravel, Templating Engine-nya dinamakan dengan Blade.
Nah bagaimana blade ini bisa mempermudah kita dalam mengelola tampilan halaman web? Itu bisa yang paling sederhana ketika kita ingin bekerja dengan sebuah variable misalnya ya. Dan membuat struktur kendali seperti pengulangan, pengkondisian, sampai dengan kemudahan saat kita akan membuat sebuah layout, komponen, atau yang disebut dengan parsial. Oke ya, jadi langsung aja kita akan lihat bagaimana sih cara penggunaan blade, khususnya di Laravel versi 8 ini secara sederhana. Dan nantinya kita akan implementasikan ke dalam aplikasi yang sudah kita buat sebelumnya.
Jadi langsung aja kita masuk ke materinya. Sebelum kita masuk, kita akan coba buka dulu dokumentasi dari Blade Templating Engine untuk membantu kita memahami materi ini. Teman-teman bisa klik dokumentasi di website Laravel-nya.
Lalu di sebelah kiri, kita akan masuk ke menu The Basics. Lalu ada pilihan Blade Templates. Teman-teman bisa klik aja. Nah ini adalah dokumentasi lengkapnya, kalau nanti kita butuh untuk membaca dokumentasinya kita bisa kembali ke sini. Tapi intinya Blade itu adalah sebuah templating engine yang sudah terdapat di dalam Laravel.
Jadi kita nggak perlu install-install lagi, kita nggak perlu download-download lagi. Dimana di dalamnya katanya kita tetap bisa menggunakan sintaks PHP di dalam view kita dengan tambahan sintaks Blade di dalamnya. Nah nanti apapun yang kita tulis dengan syntax blade itu pada akhirnya akan di compile ke dalam syntax PHP biasa. Nah kalau kalian pengen tau syntax blade itu seperti apa, ini yang paling sederhana kalau kita scroll ke bawah ada bagian displaying data.
Di video sebelumnya kita udah mencoba untuk mengirimkan data di dalam route kita ke view kita. Jadi kalau misalkan kita mau kirimin data nama, kita bisa buat sebuah array di dalam parameter di view-nya. Sehingga nanti key-nya itu bisa dipakai di dalam view welcome ini contohnya ya. Jadi saya kirim data nama berisi samanta ke dalam view welcome.
Nah di dalam view welcome itu kita bisa tampilkan data nama dengan cara seperti ini. Tidak usah lagi menggunakan php echo atau tanda tanya sama dengan. Kita cukup menggunakan 2 buah kurung kurawal buka dan 2 buah kurung kurawal tutup.
Nah ini adalah sintaks echo milik blade. Fungsinya sama dengan PHP EHO, tapi ada kelebihannya. Otomatis di belakang layar itu sudah ditambahkan sebuah fungsi HTML special charge. Yang sangat berguna untuk menghindari serangan XSS atau cross-site scripting.
Ini salah satu sintaks yang paling sederhana. Nanti masih banyak lagi sintaks blade yang bisa kita gunakan. Tapi untuk sekarang kita akan coba dulu nih, mengganti sintaks yang kita punya menggunakan blade ini. Oke sekarang saya minta teman-teman kembali ke codingannya.
Kita buka file views kita yang about.blade. Ya disini kita bisa lihat bahwa kita sudah mencoba untuk menampilkan isi dari 3 buah variable yang dikirim lewat routes kita. Jadi kita punya array yang memiliki 3 buah key yang nanti key ini akan menjadi nama variable untuk dicetak disini di view-nya. Nah jadi disini caranya kita tinggal ganti aja. Lebih kecil tanda tanya sama dengan dan tanda tanya lebih besar dari ini menggunakan 2 buah kurung kurawal.
Jadi teman-teman ini bisa hapus saja. Terus kita gunakan kurung kurawal 2 kali. Lalu kasih $name.
Ini tidak perlu kalian kasih titik koma. Jadi cukup begini. Lalu kita save.
Tadi kalau teman-teman lihat, begitu saya tulis kurung kurawal 2 kali, itu otomatis dikasih tutupnya dan juga dikasih spasi di tengah-tengahnya. Nah itu gara-gara kita sudah menginstal sebuah extension yang namanya Laravel Blade Spacer. Ya buat teman-teman yang belum install silahkan install dulu. Supaya mempermudah kita nulis syntax blade-nya.
Kalau sudah ditutup aja sidebar-nya. Lakukan untuk semua variable ya. Kita ganti kurung-kurung awal.
Dollar email. Ingat gak pakai titik koma. Image juga sama. Dollar image. Dan ini kita kasih dollar name ya.
Dollar name bukan dollar email. Oke, kalau sudah kita save. Lalu kita kembali ke website kita.
Kita arahkan ke halaman about. Nah, sudah tampil ya. Sama persis seperti kita melakukan PHP echo, tapi sekarang menggunakan bantuan blade templating engine. Dan ingat, ini hanya akan bisa jalan ketika nama file kalian ada bladenya. Kalau misalkan bladenya kita hapus, maka fitur dari templating engine-nya nggak akan jalan.
Kalian lihat ini udah gak ada lagi syntax highlightingnya. Kalau kita balik ke sini. Dia akan mencetak kurung-kurawalnya bahkan ya. Jadi pastikan kalian kasih blade di sini. Kalau ada bladenya, tapi kita nggak mengetikan syntax blade sama sekali, nggak apa-apa.
Oke, jadi sebetulnya sama aja dengan PHP EHO. Bahkan teman-teman ya, ini tuh di-compile oleh Laravel-nya secara otomatis menjadi PHP EHO. Seperti biasa. Cuman kita nggak perlu tahu itu.
Tapi kalau teman-teman pengen lihat hasilnya. Itu kita bisa lihat ada di bagian storage. Jadi kalau teman-teman ke storage. Ada framework.
Folder framework. Terus ada folder views. Nah teman-teman lihat disini tiba-tiba ada banyak file ya.
File ini otomatis dibuat oleh Laravelnya. Untuk menampilkan halaman view hasil compile-nya. Ya coba kita lihat ya. Saya nggak tahu yang mana file view-nya. Kita coba buka satu-satu aja.
Cari yang about. Nah. Ini dia. Jadi sebetulnya di belakang layar ini yang dijalankan.
Ada php.eho, terus ada fungsi e untuk encoding untuk melakukan html special charge tadi, lalu cetak isi variable. Jadi sebetulnya ini yang dikerjakan. Kita nggak perlu tahu hasil compile-nya, biarkan Laravel yang mengenerate dan melakukan optimasi terhadap file-file ini.
Kita dipermudah dengan hanya menggunakan view-nya saja yang sudah pakai blade. Ya, keren teman-teman ya. Jadi ini caranya ya. Menggunakan salah satu fitur di Blade yaitu Echo.
Nah sekarang kita akan coba untuk membuat sistem layouting sederhana menggunakan bantuan templating engine Blade. Jadi yang akan saya lakukan sekarang adalah kita ubah dulu tampilan dari halaman home agar menggunakan bantuan misalnya framework bootstrap lah. Supaya mempermudah pembuatan tampilan kita. Jadi teman-teman boleh buka browser, arahkan ke dokumentasi dari bootstrap.
Kita buka getbootstrap.com Ini teman-teman sebetulnya boleh menggunakan framework yang lain ya. Ini saya mau coba tunjukkan aja gimana caranya Laravel dan Blade ini bekerja dengan framework CSS. Kita arahkan ke bagian docs.
Lalu kita scroll. Kita akan cari ke starter template. Nah ini ya.
Jadi kita akan gunakan starter template milik bootstrap. Dikopi aja. Kita balik ke sini. Ini boleh teman-teman hapus semua untuk halaman home-nya.
Lalu simpan starter template-nya. Kita akan edit sedikit. Mulai dari title-nya. Kita akan ganti.
Misalnya namanya WPU Blogs lagi. Terus tanda pipe. Lalu home. Terus ini untuk link-nya kita biarkan. Ini mengarah ke file CSS milik bootstrap.
Tapi untuk yang javascript ini akan kita hapus yang ada komentarnya ya. Supaya rapi aja. Teman-teman boleh hapus semua komentarnya. Yang option 2 pun dihapus aja. Oke, sekarang kalau kita jalankan dulu, kita save, kita lihat ke sini, kita balik ke home.
Nah, sudah jalan ya bootstrapnya. Sekarang kita akan coba tambahkan sebuah navbar. Teman-teman boleh ke bootstrapnya lagi.
Kita cari di sebelah kiri ada komponen, cari navbar. Ya, atau boleh diketik di sini aja biar cepat. Navbar gitu, klik navbar, sama aja. Kita pilih yang bagian nav di sebelah kanan ini.
Kita klik. Nah, kita akan kopikan navbar yang ini. Supaya website kita ada navbarnya ya. Klik copy. Kita simpan di bagian paling atas ini.
Sebelum H1-nya. Kita enter. Kalau sudah, sekarang kita lihat dulu hasilnya.
Nah ini sudah ada navbarnya. Tapi saya pengen bikin navbarnya dia bergeser ke tengah ya. Jadi ini kita hapus aja fluidnya.
Jadi cukup container aja. Terus saya pengen warnanya nggak warna abu-abu begini ya. Saya pengen warnanya merah deh biar terang.
Kita kasih BG Danger. Ya kalau kalian mau ganti warna lain silahkan. Ini berubah jadi merah. Tapi tulisannya saya pengen putih. Jadi ganti navbar nya jadi navbar dark.
Oke. Selanjutnya saya pengen tulisan hello world nya berada di dalam container juga. Jadi ini kita hapus.
Kita bikin sebuah div dengan kelas container. Yang di dalamnya baru ada H1. Ini halaman home gitu ya.
Jadi dia geser. Supaya turun ke bawah kita kasih aja margin top 4 misalnya. Oke. Jadi ini untuk halaman home-nya kita ganti juga tulisan di navbar-nya. Ini jadinya WPU blog gitu ya.
Terus tulisan di navbar-nya yang pertama ini home, betul. Yang kedua ini akan mengarah ke about. Yang ketiga baru mengarah ke blog-nya. Ya kita lihat dulu.
Sip, sudah. Berarti kita tinggal hapus yang keempat ya. Ini disabled-nya nggak perlu.
Kalian boleh hapus li-nya. Nah, sekarang kita akan perbaiki supaya link-nya mengarah ke tiap-tiap halaman. Untuk sementara ini kita nggak butuh area current-nya. Boleh dihapus aja.
Kita ganti yang home-nya jadi slash aja. Supaya mengarah ke routes root kita. Yang about kita ganti jadi slash about.
Dan yang blog kita ganti jadi slash posts. Atau slash blog, nggak apa-apa. Karena di routes kita mengarahnya ke blog.
Tapi yang blog itu memanggil view post. Oke, sudah kita refresh. Sekarang kalau kita ke about, sudah otomatis pindah. Tapi tampilannya masih begini ya teman-teman ya. Saya pengen tampilannya sama.
Ada navbarnya, terus ada kontainernya. Sebetulnya ini bisa kita copy aja semuanya. Jadi saya copy semua scriptnya, kita pindahkan ke about. Tapi nanti problemnya adalah kita mengulang-ulang semua scriptnya.
Kalau saya mau nambah satu link lagi, saya harus tambahkan di semua halamannya. Jadi sangat tidak praktis ya. Nah, di sini kita akan gunakan sistem layouting yang dimiliki oleh Blade.
Jadi nanti kita akan pecah template ini menjadi sebuah layout tersendiri. Dan layout itu akan digunakan di setiap halaman yang akan pakai. Nah ini keren banget nih. Jadi di Blade kalau kalian lihat dokumentasinya itu ada yang namanya Extents. Nah ini ada Extending a Layout.
Nah jadi kita akan punya sebuah layout yang akan dipakai oleh yang namanya Child View. Halaman-halaman Home, About, dan Blog itu merupakan halaman Child yang akan menggunakan sebuah layout. Nanti halaman Child ini akan mengetikan Extend di dalam skripnya.
Supaya bisa pakai layout tersebut. Supaya lebih jelas kita cobain deh. Jadi caranya gini, kita bikin dulu file layoutnya. Teman-teman boleh buka lagi sidebar-nya, arahkan ke folder views. Ini misalnya kita mau bikin sebuah folder deh.
Kita kasih nama aja foldernya layouts. Siapa tau nanti kalian mau bikin layoutnya banyak sesuai dengan halaman mana yang mau kalian pakai. Nah di dalamnya, misalnya ini saya mau bikin lagi sebuah file namanya main.blade.php. Jadi ini adalah main layout lah atau layout utama. Yang isinya ini kita akan kopikan seluruh isi dari home.
Saya tutup dulu sidebarnya. Ctrl A, Ctrl C. Saya simpan ke sini. Oke jadi ceritanya ini adalah layout utamanya.
Yang nantinya di dalam layout utamanya yang berbeda hanya isi dari kontainernya saja. Nah karena bagian ini adalah bagian yang berbeda untuk tiap-tiap halaman. Kita harus kasih tau bahwa ini ngambil dari child view-nya. Dari home, dari about, dari post nanti kalau semuanya sama.
Nah caranya kita kasih tau bahwa disini nanti akan berisi apapun yang ada di halaman-halaman childnya tadi. Caranya kalian cukup ketikan add yield. Lalu kurung buka, kurung tutup.
Diisi dengan nama dari sectionnya. Yang akan kita masukkan kesini. Misalkan kita kasih nama container.
Ya namanya bebas, terserah kalian. Tapi nanti harus sama dengan nama section di halaman-halaman childnya. Jadi ini adalah layout utama yang akan berisi apapun yang ada di dalam container.
Nah sekarang kita harus kasih tau halaman childnya. Ya teman-teman boleh buka halaman home dulu aja. Karena semua isinya sama kecuali tulisan halaman home ini. Maka kita bisa hapus semuanya. Ya teman-teman boleh hapus untuk halaman home-nya.
Jadi halaman ini akan masuk ke dalam yield ini. Akan menggantikan tulisan yield ini selama kita kasih tahu bahwa tulisan ini adalah sebuah section yang bernama container. Nah tapi jangan lupa ini harus kita tutup pakai add end section.
Oke jadi apapun yang ada di dalam section akan masuk menggantikan yield. Selama, nah ini yang harus teman-teman tulis. Kita kasih tau bahwa di halaman home ini menggunakan layout utamanya. Caranya tinggal kita kasih extend tadi. Halaman ini mengambil atau menggunakan layout main.blade.php.
Cara nulisnya kalian lihat relatif terhadap folder views. Jadi karena dia masuk dulu ke folder layouts. Kalian tulis layouts.
Setelah itu slash atau titik. Bisa gunakan titik lalu nama filenya main. Nah lihat teman-teman kalau misalkan filenya benar penyimpanannya otomatis jadi ada underscorenya nih. Kalau ada underscorenya teman-teman bisa pencet ctrl klik atau komen klik untuk langsung pindah ke tempat tujuannya.
Atau ke layoutnya. Ya kalau misalkan salah nulisnya misalkan lupa nulisin S. Nah kelihatan disini nggak nyambung nih ada yang salah.
Ya makanya ini kita kasih S supaya benar. Nah sekarang ini kalau kita save kita buka lagi halaman home kita kita refresh. Sama aja. Keren ya. Jadi halaman home kita sekarang cuma segini.
Dan ini bisa kita terapkan juga di halaman yang lain. Contohnya di halaman about. Jadi halaman about udah nggak butuh ini.
Atasnya nggak butuh. Bawahnya nggak butuh. Kita tinggal kasih tau dulu bahwa halaman ini mengambil main layout.
Kita tulis layout.main. Lalu kita bungkus semua tag HTML ini ke dalam section. Jadi teman-teman tulis add section.
Lalu container. Lalu kita tutup dengan add end section. Oke, kita lihat. Kita refresh. Kita pindah ke halaman about.
Sudah. Jadi home, about, sudah. Sekarang gimana kalau ke halaman blog? Karena masih begini ya.
Kita tinggal lakukan hal yang sama. Kita hapus semua. Kita extend dulu. Layouts.main.
Lalu kita kasih section container. Diakhiri dengan end section. Save. Kita lihat.
Refresh. Sudah ya. Ini caranya kalau misalkan kita mau membuat sebuah layout. Nah bahkan lebih keren lagi nih teman-teman ya.
Nav bar-nya itu kita bisa pisahkan menjadi sebuah komponen terpisah. Ya itu yang biasa disebut dengan partials. Jadi teman-teman bisa bikin folder baru di dalam views-nya. Ya kita kasih nama partial. Partials gini.
Ini untuk menyimpan bagian-bagian spesifik di dalam sebuah halaman. Yang nanti kita anggap sebagai komponen. Ada halaman yang pengen ada, ada halaman yang enggak. Kita bisa bongkar pasang lah istilahnya ya.
Nah disini kita bikin sebuah file baru. Misalkan kita kasih nama navbar.blade.php. Hanya untuk menyimpan navbarnya aja.
Jadi di halaman main ini kita bisa cut navbarnya. Kita blok terus kita cut. Kita pindahkan kesini. Ke halaman navbar blade. Kita save.
Lalu di halaman mainnya kita kasih tau. Menggunakan tag include. bahwa disini akan tersimpan sebuah navbar yang kita tinggal ambil dari halaman partial.navbar nah kalau benar juga nanti akan ada underscore nya supaya kita bisa lihat isinya oke ya teman-teman ya jadi ini kalau kita refresh aman semua sudah bisa kita gunakan si partial nya sebetulnya ada dua cara untuk menambahkan komponen cara pertama seperti ini bisa kita kasih add include cara kedua itu dengan betul-betul menggunakan komponen ok Jadi kalau kita masuk ke dokumentasi dari blade-nya, kita bisa lihat di sini ada yang namanya components.
Nanti cara pakainya itu kita menggunakan sintaks seperti HTML seperti ini. Tapi itu nggak akan kita bahas sekarang. Sekarang kita simple aja menggunakan sintaksnya blade atau ini istilahnya directive-nya blade.
Include, yield, section, itu namanya directive. Dan sekali lagi, semua ini tetap aja nantinya akan... di-compile ulang menjadi sintaks HTML dan PHP biasa. Oke, teman-teman ya.
Sekarang kita sudah merapikan lagi halaman kita menggunakan templating engine. Paling selanjutnya yang ingin kita ubah adalah gini. Kalau saya masuk ke halaman about, teman-teman lihat, titelnya masih home. Kalau saya masuk ke halaman blog, titelnya juga masih home. Harusnya kan ganti-ganti ya.
Nah, itu karena kita masih tulis manual di sini nih, di mainnya. Nah, gimana kalau kita bikin supaya si titelnya dinamis? Tergantung kita lagi ada di halaman mana. Coba kita sembunyikan dulu sidebarnya. Sekarang kita akan masuk ke halaman web, ke routes-nya.
Nah di sini kita akan kirimkan judul halaman ke dalam masing-masing view-nya. Jadi sekarang saya bisa tulis koma di sini. Kita kasih array.
Kita kasih title. Lalu misalkan ini titlenya adalah home. Jadi nanti waktu di view halaman home dia tahu oh titlenya harusnya home.
Untuk halaman about kita tambahkan juga di atas sini. Titlenya itu about Oke, kasih koma disini jangan lupa Dan untuk yang halaman post juga sama Kita kasih title Pake array Kita kasih post Nah kalau sudah nanti di mainnya Tinggal kita ganti nih Judul halamannya itu ngambil dari Variable tadi, title Jadi kita tinggal kasih echo Punyanya blade, kita ganti jadi dollar Title Sekarang harusnya title-nya udah berubah nih. Kalau saya ke about, berubah jadi about.
Saya ke blog, berubah jadi post. Ke home, berubah jadi home. Oh, ini untuk yang WPU blog-nya kita kasih di judul navbarnya ya. Nah ini kita kasih slash aja.
Supaya dia mengarah ke home juga. Kesini ke home. Sudah. Oke teman-teman ya. Oh dan satu lagi.
Kalau saya ke about. Ini gak aktif ya. Warnanya tetap redup.
Saya pengennya kalau di halaman tertentu. Itu navigasinya nyala gini. Kayak yang home. Kita pindahin.
Berarti itu harus pindahin aktifnya. Nah ini saya yakin ada cara yang mudahnya. Tapi kalau cara saya ini kita cek. Jadi aktifnya ini akan dicetak ketika judul halamannya apa gitu ya. Saya bisa pakai gini.
Kurung kurawal. Kita pakai blade. Ehok.
Terus kita cek menggunakan operator ternari. Kalau misalnya titlenya itu sama dengan home. Oke kalau kita lagi di halaman home.
Maka tambahkan kelas aktif. Tapi kalau tidak di halaman home, nggak usah ditambahin kelas aktif. Jadi kasih string kosong aja. Nah, kita lakukan untuk semua halaman.
Saya pindahin ke sini. Kalau ini titlenya about. Dan ini kalau titlenya adalah post.
Ini. Oke. Sekarang kita save. Kita kembali ke sini.
Kita refresh dulu. Tuh, sekarang di blog, blognya nyala. Kalau di about, aboutnya nyala. Kalau di home, home-nya nyala. Oke ya teman-teman ya, jadi sekarang kita udah bisa ngerapihin halaman kita.
Nah dan sekarang kita akan coba nih ya untuk menampilkan beberapa tulisan di dalam halaman blog ini deh. Kita kasih 2 tulisan supaya mensimulasikan halamannya punya blog post gitu. Untuk sementara kita akan kirimkan tulisannya dalam bentuk array di routes-nya.
Ya, kedepannya nanti kita akan ganti menjadi database. Tapi sekarang supaya masuk akal kita coba tambahin di sini aja. Jadi ceritanya...
Kita punya dulu deh di luar sini ya. Yang nantinya akan kita jadikan sebagai data. Jadi misalkan disini kita punya variable yang namanya blog post. Yang berupa array. Yang di dalamnya ada array lagi.
Kita bikin dia array asosiatif aja. Ceritanya ini punya beberapa nilai seperti ini. Jadi ada judulnya. Judul dari tulisannya.
Kita kasih judul post pertama. Atau apapun nama judulnya ya. Kalian silahkan kalau mau ganti. Terus ada autornya. Istilahnya penulisnya gitu ya.
Dan ada bodinya. Nah bodinya ini buat nyimpen si tulisannya. Nah ini supaya gampang saya coba balik dulu ke halaman view-nya.
Kita coba kemanapun lah ya. Terus kita coba tulis disini lorem. Supaya bisa di tab.
Nah karena kalau tadi disini gak bisa. Lorem. Tab gak bisa. Saya harus ke halaman view dulu. Supaya saya bisa men-generate tulisan.
Atau kurang banyak lah. Kita kasih lorem 80 tulisan. Tab. Nah, segini kita copy. Atau kita cut.
Kita simpan ke sini. Jadi ceritanya ini adalah tulisan blognya. Pasti nantinya lebih banyak sih daripada ini ya. Tapi nggak apa-apa.
Terus, kita punya ceritanya satu lagi. Tambahkan koma di sini. Kita copy-kan aja nih array-nya.
Kita copy array-nya. Sekarang ini judul post kedua. Oh, ini kenapa?
Apa error? Oh ini. Saya kurang kasih titik koma disini.
Oke. Sudah hilang ya errornya. Ini pause kedua. Kita kasih dodi. Terus tulisannya kita bikin beda lah ya.
Kita bikin disini lorem. Misalkan sekarang lebih banyak tulisannya. Kita kasih 100. Kita cut. Balik kesini.
Kita ganti. Oke. Jadi sekarang udah ada title, author, dan body ada dua. Ceritanya ini mau kita pakai nih ke sini.
Caranya kita kirimkan di sini post. Itu berisi, ini tambahkan koma dulu. Itu berisi data kita yang ini.
Yang pura-puranya diambil dari database misalnya. Jadi kita tulis $blow__post. Nah, tapi karena kita lihat di sini error.
Ini artinya kita nggak bisa pakai variable blog post. Karena blog postnya ada di luar routesnya. Jadi ini kita masukin dulu deh ya ke dalam. Coba kita block, kita cut, kita masukin ke sini. Ya, ini untuk sementara aja sih.
Oke, sudah ya. Sekarang sudah masuk ke dalam routes-nya. Nah, sudah ya. Sudah tidak ada error.
Jadi sekarang, blog post ini harusnya sudah bisa masuk ke dalam variable post. Dan sudah bisa kita akses di view post. Jadi di sini sudah bisa kita akses.
Coba kita lihat dulu isinya dengan menggunakan sebuah directive milik blade yang namanya add. Jadi sekarang Laravel itu bisa menggunakan DD untuk melakukan dump and die untuk melihat isi dari variable, dari object, atau dari array. Kita lihat ini $blogpost. Dump itu seperti kita melakukan per dump, tapi sekarang dengan stylenya milik Laravel.
Dan die ini untuk memberhentikan script apapun yang ada di bawah atau setelah script ini. Coba kita save, kita balik ke sini, kita refresh dulu. Sekarang ke alaman blog.
Nah, error. Oh, ini blog postnya. Harusnya post nih.
Dikasih tau omelara filenya. Kita tulisnya post. Karena kita ngirimnya post ya.
Yang ini yang kita ambil. Bukan yang ini. Oke. Save dulu.
Kita refresh. Nah, lihat. Sekarang sudah ada 2 buah array yang isinya title, author, body, title, author, body. Oke, ini berarti sudah bisa kita pakai nih. Sip ya.
Ini bisa kita hapus. Saya ingin tampilnya itu langsung di sini dalam bentuk header dan bodinya. Jadi nanti ceritanya saya punya sebuah tag HTML. Misalkan saya pakai H2, ini judul. Terus di bawahnya saya punya misalnya pakai H5.
Ini untuk penulisnya siapa. Terus di bawahnya lagi ada tag paragraph. Ini buat nulisin si tulisannya. Jadi nanti ceritanya tampilnya begini. Judul, penulisnya siapa, lalu tulisannya apa.
Tapi saya mau ngambil dari array. Oke, jadi ini saya butuh looping di sini teman-teman. Kita bisa gunakan looping punya blade.
Jadi kita bisa pakai add for each. Yang ini ya. For each kita ambil dari variable post. As post, jadi single postnya. Yang di dalamnya baru kita tulis H2.
Kita ambil dollar post isinya title ya. Title. Terus H5.
Kita ambil dollar post isinya author. Dan terakhir kita punya paragraph yang isinya dollar post key-nya body. Nah ini harusnya tampil dua-duanya. Tuh ya. Jadi udah ada nih.
Sekarang kita udah bisa ngambil isinya ceritanya dari array. Gimana kalau kita bungkus ini ke dalam sebuah artikel ya. Ada tag di HTML5 yang namanya article. Ini kita simpan tutupnya di bawah.
Oke kita rapihin dulu. Kita kasih margin bottom aja deh. Class MB misalnya 3. Oh itu udah 3. Kita kasih 5. Nah jadi ada jarak ini antara postnya.
Oke atau kita kasih disininya by deh gitu ya. By titik 2. Nah itu jadi ada lagi kita bisa pakai for each untuk meluping isi dari array. Walaupun isi arraynya sekali lagi masih berupa array yang kita tulis manual. Siap ya teman-teman ya.
Dan mungkin terakhir ini kita akan coba bikin sebuah view lagi. Dan sebuah route untuk mengakses salah satu postnya aja. Ini juga harusnya si tulisannya nggak tampil semua ya.
Harusnya tampilnya dikit aja. Sisanya nanti kita akan bisa lihat ketika kita klik postingannya. Atau istilahnya itu namanya excerpt. Sedikit aja. Begitu kita klik.
Nanti tampil satu post secara full. Nah gimana caranya? Nah ini sekali lagi masih ngakalin ya teman-teman ya. Jadi nanti gini. Di halaman postnya.
Itu saya pengen si H2 ini dibungkus pake tag A. Gini. Dibungkus pake tag A.
Saya simpan tutupnya disini. Saya enter. Oke. Ini akan mengarah ke halaman post. Tapi sekarang punya parameter.
Parameternya gimana kalau kita kasih sebuah slug. Slug ini adalah versi lain dari title. Jadi title itu kan ini. Slug itu biasanya kita ubah judulnya jadi huruf kecil semua dan setiap spasinya itu diganti pakai dash. Silahkan teman-teman tambahkan slugnya di sini.
Kasih koma di akhir. Terus kita bikin slug yang tulisannya begini. Judul, pose, pertama. Jadi ini slug-nya.
Nanti akan kita coba generate ini secara otomatis. Sekarang yang kedua. Slug-nya.
Itu judul post kedua. Slug ini nantinya nggak boleh sama. Karena jadi penanda dari masing-masing judul postingannya. Oke kita save.
Balik lagi ke post. Kita akan kirim di sini. Jadi sekarang kita punya dollar post.
Dengan key slug. Jadi kalau balik ke sini kita refresh. Sekarang.
Judulnya semua jadi link. Kalau saya sorot, teman-teman lihat di kiri bawah. Itu mengarah ke post slash judul post pertama. Kalau yang ini mengarah ke post slash judul post kedua. Ya, udah aman.
Tapi kalau di klik, masih error karena kita belum punya routes-nya. Ya, kita kembali dulu. Kita bikin routes-nya sekarang.
Kembali ke halaman web sebagai routes-nya. Kita bikin routes baru. Nah, ini halaman single post misalnya gitu ya. Kita kasih route.2.2.
Request method-nya get. Dalam kurung kita arahkan ke halaman post slash slugnya. Nah untuk dapetin slugnya kita bisa pakai kurung kurawal lalu kasih tulisan slug.
Nah ini disebutnya wildcard untuk ngambil apapun isi dari slugnya. Nah baru kita akan jalankan sebuah function. Begini.
Nanti kita panggil view-nya yaitu misalnya kita punya post deh ya. Nah gini. kasih titik koma, ini kita kasih titik koma oke, jadi nanti kita manggil view baru namanya post, tapi kita butuh ambil dulu nih, si slug nya ini kita ambil sebagai parameter disini agar nanti bisa digunakan disini, nah sekarang yang akan kita lakukan adalah, kita akan mencari postingan, blog post nya ya yang sesuai dengan slug-nya. Nah nanti ini kita ngakalin lagi kita akan copy paste lagi seluruh blog-nya gak masalah ya, ini hanya simulasi aja.
Tapi yang pasti kita harus bikin dulu post-nya teman-teman. Jadi silahkan buka lagi sidebar-nya. Kita bikin di dalam views-nya, disini di luar, hati-hati nyimpennya, namanya post.blade.php Ya, yang isinya kita extend dulu, layouts.main terus kita kasih section, end section namanya container dan Ini yang berisi H2. Nanti ini judulnya. Terus ada H5.
Ini adalah penulisnya. Ya, dan paragraph ini adalah tulisannya. Ya, atau kita simpan lagi di dalam artikel.
simpan dalam artikel kita rapihkan coba kita lihat dulu, kita masuk ke sini oh title ya title berarti kita harus kirimin dulu datanya, title kalau title disini bukan judul post tapi title dari halamannya ini single post misalnya gitu ya kita lihat, sudah, jadi ini udah ada judulnya judulnya Autornya siapa nanti tulisannya. Tapi ini masih statis ya. Mau masuk yang manapun sama.
Atau kita kasih tombol back dulu deh di bawahnya. Di bawah sini kita kasih A. Kita kembali ke post. Tulisannya back to post. Gitu.
Balik sini. Oh bukan post. Blog ya.
Refresh dulu. Terus kita back. Oke. Sip ya.
Jadi udah. Nah tinggal kita benerin nih teman-teman. Supaya ini udah ngambil dari postingan yang sudah terpilihnya. Caranya gimana? Nah ini sebenernya caranya juga gak tepat ya.
Karena ini kita akan copy paste lagi si blog postnya. Karena kita anggap seolah-olah postingannya itu nanti kita dapet dari database. Terus kita akan cari postingan yang slugnya sama dengan slug yang ada disini.
Oke. Jadi nanti kita punya misalnya gini. Kita punya for each.
Kita ambil dari blog post. S. Misalnya kita kasih nama aja post.
Kita akan looping satu per satu tulisannya. Terus nanti jika post yang keynya slug itu sama dengan slug. Nah maka kita akan ambil postingan itu. Cara ngambilnya gimana kalau kita bikin sebuah array baru deh ya.
Kita kasih new post. Ini ngakalin aja sih sebenernya. Nantinya kita gak akan melakukan ini. New post akan diisi dengan post.
Oh ini kita kasih array kosong. Jadi tadinya array terus ditimpa. Baru kita kirimin.
Ya misalkan kita kasih nama post. Kita isi dengan new post. Oke jadi ini ceritanya. Kita akan mencari blog post yang. Nama slugnya sama dengan slug yang kita klik di sini.
Oke, benar-benar masuk akal nih. Tenang aja nanti kalau udah belajar database ini bakalan kita ubah. Tapi sekarang harusnya kalau kita buka postnya, terus kita coba dede lagi, satu buah postingan, begini, ya kita lihat, refresh, kita klik.
Harusnya ada judul post pertama, yang ini. Judul post kedua. Oke. Jadi sekarang kita udah bisa pakai. Kita kasih judulnya.
Dollar post title. Autornya. Dollar post author. Dan tulisannya dollar post body.
Kita coba. Terifresh. Klik disini.
Aman ya. Kembali. Klik disini.
Aman. Begitu teman-teman ya, jadi inilah cara kita untuk menggunakan Blade Templating Engine ke dalam aplikasi Laravel kita. Mudah-mudahan kalian paham. Baik teman-teman, jadi itu materi kita untuk episode kali ini, membahas mengenai penggunaan sederhana Blade Templating Engine ke dalam aplikasi Laravel kita. Mudah-mudahan kalian paham.
Nah dan untuk penggunaan Blade yang lainnya, kita akan masih tetap akan bahas ketika kita masuk ke materi-materi lain. di seri ini. Jadi gak usah khawatir teman-teman. Tapi kalau kalian mau tahu lebih detail lagi langsung aja kembali ke dokumentasi Laravel-nya karena disitu penjelasannya sudah sangat detail sekali. Nah dan untuk video berikutnya, kita mulai akan membahas mengenai dua lagi komponen MVC yang belum kita terapkan pada aplikasi kita, yaitu model dan juga controller ya.
Karena di video kali ini kita baru membuat view-nya saja. Oke ya, jadi itu aja untuk episode kali ini. Kita akan ketemu lagi di episode berikutnya. Terima kasih teman-teman sudah menonton videonya.
Saya Sadiqa Ghali pamit dan seperti biasa, jangan lupa titik oma.