{"id":937,"date":"2022-01-18T10:05:00","date_gmt":"2022-01-18T03:05:00","guid":{"rendered":"https:\/\/duniacoding.info\/?p=937"},"modified":"2022-01-17T20:18:53","modified_gmt":"2022-01-17T13:18:53","slug":"belajar-laravel-tampilan-pada-laravel","status":"publish","type":"post","link":"https:\/\/duniacoding.id\/blog\/belajar-laravel-tampilan-pada-laravel\/","title":{"rendered":"Belajar Laravel 8 #5 : Tampilan pada Laravel"},"content":{"rendered":"\n
\"tampilan-pada-laravel\"<\/figure>\n\n\n\n

Halo Coders!. Setelah diartikel sebelumnya kita belajar tentang Konsep MVC (Model, View, Controller)<\/code>, diartikel ini kita akan belajar Tampilan pada Laravel (View).<\/code> Folder View ini difokuskan untuk menampilkan Tampilan\/UI dari Program Laravel kita. Salah satu contohnya adalah saat teman-teman selesai install Laravel dan menjalankannya. Maka akan muncul tampilan seperti ini<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Nah, tampilan diatas ini sebenarnya diatur didalam Folder view <\/code>dengan nama welcome.blade.php<\/code>. Diartikel ini kita akan membahas detail-detail dari Folder tersebut, dan juga bagaimana cara menggunakan View dengan Efektif<\/p>\n\n\n\n

Blade Templating Tampilan pada Laravel<\/h2>\n\n\n\n

Saat kita Belajar tentang Tampilan pada Laravel (View), tentunya kita harus memahami yang namanya blade <\/code>templating. Apa itu? nah Blade ini adalah sebuah extensi file khusus pada Laravel, Blade ini berguna agar kita bisa menggunakan sebuah syntax khusus yang ada pada Laravel yaitu {{ }}<\/code>. <\/p>\n\n\n\n

Nah, Blade templating ini berguna untuk kita yang ingin menampilkan Data dari Database menggunakan Eloquent. Hal ini akan kita pelajari di artikel kedepannya. Ekstensi Blade ini sebenarnya bisa kita hilangkan dari File Views Laravel, akan tetapi akan terjadi Error dimana tanda {{ }} akan terlihat. Seperti dibawah ini<\/p>\n\n\n\n

Bisa dilihat diatas terdapat perbedaan dengan gambar pertama. Disitulah perbedaan dari adanya ekstensi blade dan tidak.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Beberapa Fitur Templating pada Laravel<\/h2>\n\n\n\n

Nah sekarang aku akan menjelaskan beberapa Fitur yang bisa kita gunakan di Templating Laravel. Fitur ini akan memudahkan kita dalam mengakomodir kebutuhan Tampilan Website kita kedepannya. <\/p>\n\n\n\n

Fitur @include<\/code><\/h3>\n\n\n\n
\"\"<\/figure>\n\n\n\n

Fitur Templating pada Laravel pertama yang akan kita bahas adalah Fitur @include<\/code> ini berguna untuk menyisipkan File View lain<\/code> kedalam File View kita<\/code>. Dimisalkan kita memiliki sebuah File View yang berisi Syntax tertentu untuk Section Navbar<\/code>. Nah kita bisa menggunakan @include<\/code> ini untuk menyelipkan section Navbar<\/code> ini ke Views <\/code>lain, jadi kita tidak perlu Copy-Paste keseluruhan Syntax dari Navbar, cukup pakai @include <\/code>saja.<\/p>\n\n\n\n

Hal ini tentunya sangat memudahkan kita apalagi saat kita ingin mengedit Section Navbar<\/code> tersebut. Cukup edit di satu tempat, lalu semua tempat yang meng @include<\/code> navbar akan otomatis ter-edit juga. Jadi cukup 1 kalo penggantian saja.<\/p>\n\n\n\n

Fitur @yeild<\/code><\/h3>\n\n\n\n
\"\"<\/figure>\n\n\n\n

Fitur Tampilan pada Laravel yang akan kita bahas berikutnya adalah Fitur @yeild<\/code>. Fitur ini merupakan fitur yang sedikit Tricky. Kalau temen-temen sudah belajar tentang include, nah @yeild<\/code> ini bisa dibilang membungkus <\/code>semua File Views <\/code>kita, lalu bisa kita Wariskan <\/code>ke Views <\/code>lain. <\/p>\n\n\n\n

Anggap saja kita memiliki sebuah File View layout.blade.php<\/code>. File View ini berisi mulai dari Navbar <\/code>hingga Footer<\/code>. Didalam File Views ini kita bisa menggunakan Fitur @yeild<\/code>, tentunya tidak lupa dengan nama pemanggilnya seperti Gambar diatas, @yeild<\/code> yang menggunakan pemanggil yaitu content<\/code>.<\/p>\n\n\n\n

Fitur @extends<\/code> dan @section<\/code><\/h3>\n\n\n\n

Setelah sebelumnya kita mempelajari Fitur @yeild<\/code>, sekarang kita akan mempelajari Fitur @extends<\/code> dan @section<\/code> di Tampilan pada Laravel. Kedua Fitur ini sebenarnya berhubungan dengan fitur @yeild<\/code>. <\/p>\n\n\n\n

Fitur @extends<\/code>, Fitur ini sebenarnya fitur yang mirip dengan @inlcude<\/code>, bedanya Fitur @extends<\/code> ini bisa membawa Fitur @yeild<\/code>, jadi kita bisa menggunakan Fitur @yeild <\/code>ini setelah kita memanggilnya menggunakan @extends<\/code>. <\/p>\n\n\n\n

Nah setelah kita memanggil sebuah File menggunakan fitur @extends<\/code>, baru kita menggunakan Fitur terakhir yaitu @section<\/code>. Fitur ini merupakan Fitur sambungan dari @yeild<\/code>, jadi tempat dimana @yeild<\/code> dituliskan akan menjadi tempat dimana @section<\/code> dituliskan juga.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Seperti gambar diatas. Harus kita pastikan juga kalau @section<\/code> juga menggunakan pemanggil yang sama dengan @yeild<\/code><\/p>\n\n\n\n

Kesimpulan<\/h2>\n\n\n\n

Nah di artikel ini kita sudah belajar tentang Tampilan pada Laravel. Kita sudah belajar beberapa Fitur Tampilan pada Laravel mulai dari @include<\/code> sampai @yeild<\/code>. Templating pada Laravel ini akan sering kita gunakan selama Delevopment karena hal ini akan memudahkan kita dalam mengolah Data View kita. Kalau teman-teman ingin belajar lebih banyak tentang Tampilan pada Laravel bisa kalian buka di Webiste Dokumentasi Laravel disini Blade Templates<\/a>. <\/p>\n\n\n\n

Teman-teman juga bisa belajar tentang konsep MVC Laravel disini<\/p>\n\n\n\n

  1. Belajar Laravel 8 #4 : Konsep MVC pada Laravel<\/a><\/li><\/ol>\n","protected":false},"excerpt":{"rendered":"

    Halo Coders!. Setelah diartikel sebelumnya kita belajar tentang Konsep MVC (Model, View, Controller), diartikel ini kita akan belajar Tampilan pada Laravel (View). Folder View ini difokuskan untuk menampilkan Tampilan\/UI dari Program...<\/p>\n","protected":false},"author":2,"featured_media":762,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[8],"tags":[93,112,49],"class_list":["post-937","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorial","tag-laravel","tag-templating","tag-tutorial"],"_links":{"self":[{"href":"https:\/\/duniacoding.id\/blog\/wp-json\/wp\/v2\/posts\/937","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/duniacoding.id\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/duniacoding.id\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/duniacoding.id\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/duniacoding.id\/blog\/wp-json\/wp\/v2\/comments?post=937"}],"version-history":[{"count":3,"href":"https:\/\/duniacoding.id\/blog\/wp-json\/wp\/v2\/posts\/937\/revisions"}],"predecessor-version":[{"id":953,"href":"https:\/\/duniacoding.id\/blog\/wp-json\/wp\/v2\/posts\/937\/revisions\/953"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/duniacoding.id\/blog\/wp-json\/wp\/v2\/media\/762"}],"wp:attachment":[{"href":"https:\/\/duniacoding.id\/blog\/wp-json\/wp\/v2\/media?parent=937"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/duniacoding.id\/blog\/wp-json\/wp\/v2\/categories?post=937"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/duniacoding.id\/blog\/wp-json\/wp\/v2\/tags?post=937"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}