Belajar Laravel 11 | 5. Blade Component

Summary

In this Laravel 11 tutorial for beginners, the focus is on mastering Blade, Laravel's templating engine, to streamline the management of web page appearances. The video guides viewers through creating reusable components to avoid duplication and enhance maintainability. It demonstrates how to generate components using Artisan commands, implement slots for dynamic content, and build layouts that serve as templates for entire pages. Practical examples include creating navigation and header components, dynamically changing titles based on the active page, and improving accessibility with current state indicators. The tutorial aims to make coding more modular, reusable, and concise.

Takeaways

• 😀 The video is part of an ongoing Laravel 11 tutorial series focused on beginners.
• 🛠 The episode specifically covers the use of Blade, Laravel's templating engine, to simplify the management of layouts and appearances.
• 📱 The presenter discusses the use of Alpine.js and Tailwind CSS to create an attractive user interface but points out the issue of duplication across pages.
• 🔄 To address duplication, the video introduces the concept of creating a layout system using components for better organization and reuse.
• 🗂️ The presenter demonstrates how to create a Blade component using the artisan command `php artisan make:component` followed by the component name.
• 📝 It's explained that components can be simple without a class for manipulation or more complex with additional properties.
• 🔗 The video shows how to separate parts of a website into individual components for reuse on different pages, starting with the navigation bar.
• 📖 The presenter guides viewers on how to move existing HTML code into a new component and then reference that component in the main view.
• 🎛️ The concept of 'slots' within components is introduced to allow dynamic content to be inserted into the component structure.
• 🏗️ A 'layout' component is created to serve as a template for all pages, incorporating previously made components and using slots to differentiate between pages.
• 🔄 The video concludes with a discussion on improving accessibility and reducing duplication in the code, making the website's navigation links dynamic based on the active page.

Q & A

What is the main topic discussed in this Laravel tutorial?

The main topic discussed is the creation and utilization of Blade components in Laravel, specifically focusing on making the website's layout more modular and reusable.

Why is Blade templating engine used in Laravel?

Blade is used to simplify the management of the appearance of web pages by allowing developers to efficiently create and reuse components across different views.

What are the benefits of using components in Blade?

Using components in Blade allows for a more organized system layout, reducing duplication across pages and making the website's structure more maintainable and reusable.

How can you create a new Blade component in Laravel?

A new Blade component can be created using the artisan command `php artisan make:component ComponentName`, which generates a view file and a class for the component.

What is the purpose of the 'view' flag when creating a Blade component?

The 'view' flag is used when creating a Blade component without a class, resulting in only the view file being generated, which is suitable for simple components that don't require additional class-based manipulation.

How do you include a Blade component in a view?

A Blade component can be included in a view using the `x-component-name` syntax, where 'component-name' is the name of the component file without the '.blade.php' extension.

What is a 'slot' in the context of Blade components?

A 'slot' in Blade components is a placeholder that allows you to inject content into the component, making it dynamic and customizable based on the context in which the component is used.

How can you make a component's content dynamic based on the current page in Laravel?

You can make a component's content dynamic by using slots and passing variables from the route or controller to the component, which can then be displayed conditionally within the component.

What is the significance of the 'layout' component in Blade?

The 'layout' component in Blade serves as a master template for the entire website, allowing you to define a common structure and include unique page-specific content through slots.

How can you ensure that a Blade component reflects the active state of a navigation link?

You can ensure that a navigation link reflects its active state by using the `request()->is()` method in Blade to check the current URL and conditionally apply active styles or classes.

What is the 'na-link' component mentioned in the script and what is it used for?

The 'na-link' component is a custom Blade component created to simplify and reuse the anchor tag structure across the application, particularly for navigation links, making the code more maintainable and less repetitive.

Outlines

00:00

🛠️ Introduction to Blade Components in Laravel

The script introduces viewers to the fifth episode of a Laravel series for beginners, focusing on Blade, Laravel's templating engine. The host discusses the need to organize the layout system to avoid duplication across pages, suggesting the use of components within Blade for better management. The script mentions the previous setup using Tailwind and Alpine.js for the application's view, and the current task is to separate the website's sections into reusable components. The host guides viewers on how to create components in Blade and hints at exploring the Laravel documentation for further insights into component usage.

05:01

📝 Creating and Implementing Navigation Components

The host instructs viewers to open their terminal and use the 'artisan' command to create a new Blade component named 'navbar'. After creating the component, the script explains how to structure the component and move the navigation bar's code into it. The process involves cutting the navigation bar code from the 'home' view and pasting it into the new 'navbar' component. The host then demonstrates how to replace the navigation bar code in the 'home' view with the new component, achieving a cleaner and more maintainable code structure.

10:02

🏗️ Building Layouts and Dynamic Headers with Components

The script continues with the creation of a 'header' component, similar to the 'navbar' component. The host explains the concept of 'slots' in components, which allows for dynamic content that can change based on the page. The script demonstrates how to pass data to the 'header' component from the 'layout' component, ensuring that the header content changes according to the active page. The host also discusses the use of the 'layout' component to create a base template for all pages, incorporating previously created components and utilizing slots to differentiate page content.

15:02

🔗 Implementing Dynamic Links and Accessibility Features

The host guides viewers on creating a 'na-link' component for the navigation links, which includes dynamic attributes based on the current page. The script emphasizes the importance of accessibility, particularly for users with visual impairments who use screen readers. The host demonstrates how to use the 'request' function in Blade to determine the active page and dynamically set the 'aria-current' attribute for accessibility purposes. The script also covers the process of duplicating and modifying the 'na-link' component for different pages, ensuring that the navigation links reflect the active page.

20:04

🔄 Refactoring for Reusability and Reducing Duplication

The script focuses on refactoring the 'navbar' component to reduce duplication and improve code reusability. The host shows how to extract the repetitive code for navigation links into a single 'na-link' component, which can be reused across different pages. The script also covers the process of updating the 'layout' component to include the new 'na-link' component, ensuring that the navigation bar remains consistent and dynamic across all pages. The host emphasizes the benefits of this approach for maintaining a clean and accessible website structure.

25:07

📖 Conclusion and Preview of Future Episodes

In the concluding part of the script, the host summarizes the learnings from the episode, which focused on creating modular, reusable, and concise components using Blade. The host expresses gratitude and reminds viewers to stay tuned for the next episode, where they will delve into data handling for a simple blog application. The script ends with a teaser for upcoming topics, including the discussion of models, suggesting a comprehensive approach to building a Laravel application.

Keywords

💡Laravel

Laravel is a popular open-source PHP web framework, known for its elegant syntax and robust features. In the video, Laravel serves as the main framework for building a web application. The script discusses creating a series of components within Laravel, demonstrating how to utilize its templating engine, Blade, to manage the application's layout and components efficiently.

💡Blade

Blade is the templating engine included with Laravel, which allows developers to create views with ease. The video focuses on using Blade to manage the appearance and layout of web pages, showcasing how to create reusable components and layouts that can be applied across different pages of a Laravel application.

💡Component

In the context of Laravel and the video, a component refers to a reusable piece of UI that can be included in various parts of an application. The script explains how to create Blade components using the `php artisan make:component` command, which simplifies the process of managing repeated UI elements like navigation bars and headers.

💡Template inheritance

Template inheritance is a design pattern used in templating engines, including Blade, where a base template defines a common structure, and child templates can extend and override parts of it. Although the video primarily focuses on components, it mentions template inheritance as an alternative method for structuring layouts in Laravel applications.

💡Slot

A slot in Blade components is a placeholder that allows data to be passed into a component from its parent. The video explains how to use slots to make components more dynamic, allowing for the insertion of different content in the same structural component, such as varying titles in a header component across different pages.

💡Artisan

Artisan is Laravel's command-line interface (CLI) tool that provides a number of helpful commands for performing various tasks within a Laravel application. The video script includes the use of Artisan commands like `php artisan make:component` to generate new Blade components, demonstrating how to utilize this tool for rapid development.

💡Tailwind CSS

Tailwind CSS is a utility-first CSS framework mentioned in the video for its role in styling the application initially. It is noted for its highly customizable, utility-based approach to building styles, which complements the component-based architecture discussed in the video by allowing for fine-grained control over the appearance of each component.

💡Alpine.js

Alpine.js is a minimalistic JavaScript framework for adding interactivity to web applications. The video script references its use alongside Tailwind CSS for enhancing the user interface. Alpine.js is noted for its simplicity and efficiency in handling user interactions without the overhead of larger frameworks.

💡Mobile menu

The mobile menu is a UI component discussed in the video that is specifically designed for navigation on smaller screens. It is an example of a component that can be built and reused across the application, showcasing the benefits of component-based design in creating responsive and accessible web applications.

💡Layout

In the video, a layout refers to a master structure or template that defines the common arrangement of elements across different pages of a web application. The script describes creating a layout component in Blade that includes slots for差异化内容, allowing for a consistent design with customizable parts, which is crucial for maintaining a uniform look and feel while accommodating page-specific content.

💡Dynamic content

Dynamic content in the context of the video pertains to the ability to change the content of components based on the context in which they are used. This is demonstrated through the use of slots and passing variables to components, such as changing the title of a header component based on the active page. This concept is central to creating a flexible and reusable component system within Laravel applications.

Highlights

Introduction to Laravel 11 for beginners, focusing on Blade templating engine.

Explanation of how Blade can simplify the management of display layouts.

Utilization of Tailwind and Alpine.js for an attractive user interface.

Discussion on the drawbacks of duplication in layout and the benefits of a layout system.

Tutorial on creating components within Blade for better layout management.

Guide on organizing website sections into separate components for reuse.

Walkthrough of removing unnecessary elements like the mobile menu button.

Introduction to Blade components and directives for concise PHP functionality.

Explanation of how to create a Blade component using the artisan command.

Demonstration of converting the navigation bar into a reusable Blade component.

Instructions on how to dynamically change the header title based on the page.

Technique to send data from each page to the layout component.

Creating a dynamic header component with slots for customizable titles.

Building a layout component to serve as a template for all pages.

Method to call the layout component and fill slots with page-specific content.

Fixing issues with static headers across different pages.

Improving accessibility by ensuring active page indicators are clear to screen readers.

Creating a 'na-link' component to simplify and streamline navigation link coding.

Final review of the episode's learnings on Blade components and looking forward to future episodes on data handling for a simple blog application.

Transcripts

Halo teman-teman semua Kembali lagi

bersama saya sandi kagali di channel wpu

dan kali ini kita masih ada di seri atau

playlist belajar laravel 11 untuk pemula

ya di episode kelima kali ini kita masih

akan belajar mengenai Blade ya sebuah

templating engine milik laravel yang

digunakan untuk mempermudah kita

mengelola tampilan ya Nah setelah

sebelumnya kita bikin tampilannya udah

cukup menarik menggunakan tilwin dan

juga Alpine nah tapi mungkin teman-teman

melihat ada beberapa kekurangan kita

melakukan duplikasi pada setiap

halamannya nah alangkah lebih baik Kalau

misal akan kita rapihkan sehingga kita

punya sebuah sistem layout nah sistem

layout ini akan kita buat menggunakan

komponen di dalamnya agar lebih mudah

pengelolaannya jadi buat kalian yang

penasaran gimana cara bikin komponen di

dalam Blade di laravel kita langsung

lihat aja materinya Oke teman-teman kita

kembali lagi di aplikasi larafel kita

kalau teman-teman ingat kita sudah punya

sebuah view di dalam folder resource

kita ya view-nya block ya ini kita ah

simpan atau kita sudah buat menggunakan

tailwin yang sudah kita rapihin secara

fitur nya udah sebenarnya udah oke ya

teman-teman kalau jalanin website-nya

Misalnya menggunakan herd kita tinggal

ke sites terus kita jalanin ya Nah ini

dia website-nya jadi Sudah ada navigasi

di bagian atas yang di bagian profil-nya

udah bisa kita klik ada bagian header ya

kita sebutnya ya Jadi yang atas ini

adalah navb yang tengah Ini adalah

header yang bawah ini adalah main atau

contonentnya Oke Dan kalau misalkan kita

kecilin Ini juga udah bisa kita rapihkan

Oh ini masih ada ya ini belum kita hapus

nih nih tombol notification-nya nah ini

boleh kita hapus tapi topik kita hari

ini adalah untuk memisahkan

bagian-bagian dalam website kita tadi

menjadi sebuah komponen terpisah agar

bisa kita gunakan ulang untuk

halaman-halaman yang lain Oke jadi kita

buka lagi file-nya tadi harusnya ada di

home ya bukan blog ya teman-teman buka

halaman

home.blade.php terus kita Scroll ke

bagian mobile menunya nah ini mobile

menu button ada di bagian mana sih Tom

cook-nya nah ini di bawah Tom cook ada

button teman-teman cari button kita

tutup terus kita hapus Nah itu dulu yang

harus kita lakukan ini kalau kita

kecilin harusnya udah hilang ya Sip

sudah berikutnya kita akan pelajari yang

namanya Blade komponen dulu ya Coba kita

buka lagi dokumentasi lar felnya

teman-teman ke larfel ke bagian

documentation sebelah kiri teman-teman

cari di bagian the basic ada Blade temp

Blades ya klik aja n di sini kita bisa

lihat cara pakai Blade ya kalau kita

Scroll yang pertama kita bisa ngirim

data kita sudah tahu caranya ya di dalam

view-nya kita bisa kirim array terus

juga kita bisa menampilkan data

menggunakan kurungkur awal 2 Begini Nah

kalau misalkan menggunakan kurungk awal

2 katanya semua isi variabelnya itu

melewati dulu fungsi PHP namanya html

speciesial karakter ini untuk

menghindari crosside scripting ya kalau

website kita mau dijahatin menggunakan

script Nah itu bisa diamankan lewat html

special charge kalau kita pakai kurung

kurawal 2 begini terus juga kita jadi

bisa memanggil fungsi PHP ya kita

Panggil fungsi juga bisa di dalamung

kurawal 2 dan yang lainnya teman-teman

bisa baca ya Cara pakainya cuman yang

akan kita baca adalah atau yang akan

kita pakai adalah komponen Oh I ini ada

juga directives ya Jadi directives ini

kita bisa menggunakan fungsi-fungsi di

dalam PHP atau statement-statement di

dalam PHP dengan lebih ringkas misalkan

mau nulis if n teman-teman cukup

tambahkan add di depannya terus ada

unless gitu ya jadi ada banyak yang

nanti akan banyak kita pakai juga Scroll

kita cari bagian komponen

teman-teman nah ini ketemu ya bagian

komponen Jadi bagaimana membuat View

pada Lara file kita menjadi sebuah

komponen nah cara bikin komponen kita

bisa bikin menggunakan perintah artisan

ya PHP artisan make.2 komponen spasi

nama komponennya apa nanti akan

dibuatkan sebuah komponen berupa views

di dalam folder komponen tapi nanti juga

kita akan dapat kelasnya kelas komponen

kalau misalkan nanti kita mau modifikasi

atau mau menambahkan property-prerti

lain ke dalam komponen kita tapi kalau

misalkan kita enggak mau bikin kelasnya

misalkan mau bikin komponennya simpel

aja L enggak butuh kelas buat manipulasi

isinya kalian tambahkan minus-minus view

nanti kita coba dua-duanya yang pakai

kelas sama yang enggak pakai kelas oke

terus juga cara manggilnya begini ya

Jadi nanti ada x-nya terus nama dari

komponennya apa cara menampilkan

komponennya begini jadi kayaknya kita

langsung coba aja ya Oke jadi sekarang

kita kembali dulu ke kode kita ingat

teman-teman ya sebenarnya kalau misalkan

kita

bagi struktur website kita kan kebagi

jadi tiga ya kita sudah bahas di episode

sebelumnya ada navigasi ada header dan

ada main Nah nanti navigasi ini yang

paling utama kita akan jadikan sebagai

sebuah komponen terpisah Oke jadi saya

minta sekarang teman-teman buka

terminalnya boleh pencet conttrol back

tick ingat kita lagi jalanin NPM rand

Dev ini enggak usah dimatikan kalau

teman-teman yang belum jalanin jalanin

dulu NPM Run Dev Jadi kalian jangan

ganggu-ganggu Terminal yang ini kita

akan bikin terminal baru aja klik new

terminal di sini tanda tambah jadi

sekarang kita punya dua ya terminal di

sini kita akan ketikkan perintahnya PHP

artisan make.2

komonen komponen pertama yang akan kita

bikin namanya navb biasanya nama

komponen ditulis diawali dengan huruf

besar ya jadi nulisnya gini karena dia

akan merepresentasikan nama kelas atau

gini aja L nafbar gini ya nanti akan

dibuatkan sebuah file komponen ada view

dan ada class Jadi dua buah ya bukan

sebuah pencet enter udah dibuat ada di

dalam view componen snafb Coba kita

close dulu kita buka struktur foldernya

sekarang ada folder komponen di dalamnya

ada navb yang isinya kosong Wah terus

langsung dibuatkan ini ada quote Ya jadi

kalau kita bikin komponen sama larfelnya

dibikinin Div kosong yang isinya ada

quote dan quot-nya ini ganti-ganti ya

kalau kalian bikin komponen lain kuatnya

beda lagi tapi enggak hanya view kita

juga dibikinkan ada di dalam folder app

view komonen tuh sekarang jadi ada

folder view-nya ada navb Nah nanti

teman-teman di sini kalau butuh sesuatu

yang lebih kompleks terkait komponennya

ya tapi kayaknya sekarang kita enggak

akan dulu ubah-ubah kelasnya ya kita

Biarkan aja kita close kita fokus yang

ada di dalam NAV barnya aja nah jadi

kita nanti akan memindahkan saya tutup

dulu saya barnya kode yang ada di home

bagian NAV bar-nya ini semuanya kita Cut

kita pindahkan ke dalam navb ini div-nya

dihapus aja kita simpan ke sini Jadi

kita pindahin sehingga di dalam home-nya

kita cukup ganti dengan nama komponennya

aja kalian cukup tulis X

navbar nah ini artinya Saya akan

mengambil komponen yang nama filenya

navbar.blade.php ini kalau kita save

kita lihat

hasilnya refresh sama aja Nab ini

tampilnya sama tapi sekarang udah masuk

ke dalam komponen gitu enak ya kita bisa

tarik ya itu yang pertama navb Dulu

Sekarang kita mau mau bikin header juga

jadi komponen terpisah Oke jadi caranya

sama kita buka lagi Terminal sekarang

kita ketik PHP artisan make

component header nah tapi karena header

ini simpel banget saya enggak akan bikin

kelas ya kalau enggak mau dibikin kelas

teman-teman kasih flag-nya atau

tambahannya view gini jadi pada saat

dienter yang dibuat hanya komponennya

saja lihat di sini ada header ya kita

buka tapi kalau di folder componen

enggak ada ya oke lihat nih ada quotes

yang berbeda ya sekarang kita pindahin

na barnya atau headernya ya kita Cut

kita ganti jadi apa X header begini kita

simpan ke header ini kita hapus kita

simpan nah udah ya kita coba lihat

hasilnya ini gak ada masalah nah tapi

teman-teman pahami bahwa Ketika nanti

kita pindah halaman itu kan headernya

ganti-ganti ya di sini home di sini blog

di sini about gitu di yang terakhir

kontak gitu penginnya kan gitu kalau

misalkan kita lakukan seperti ini Lihat

tulisan homepage ini kita tulis secara

hard code nanti yang akan terjadi adalah

semua halaman headernya tulisannya

homepage Nah kan alangkah lebih baik

kalau tiap halaman tuh beda-beda namanya

sesuai dengan halaman itu fungsinya buat

apa Nah ini kita bisa bikin komponennya

sedikit lebih lebih dinamis dengan

menambahkan yang namanya slot gitu ya

jadi teman-teman tulisan homepage ini

teman-teman bisa ganti dengan mencetak

variabel

slot Begini Nah nanti apapun yang ada di

dalam variabel slot itu akan ngambil

dari apapun yang teman-teman tulis di

dalam komponennya jadi kalau saya tulis

di sininya

homepage maka tulisan homepage akan

masuk ke dalam komponen nya untuk

menggantikan tulisan slot gitu Keren kan

jadi sekarang ini tetap homepage jadi

kebayang dong pada saat nanti saya

pindah halaman Harusnya kita bisa ganti

tulisannya sesuai dengan apa yang kita

mau Oke Mantap ya jadi itu cara kita

bikin komponen secara sederhana nah dan

berikutnya agar kita bisa menggunakan

template keseluruhan halamannya di

berbagai halaman kita butuh yang namanya

layout oke Apa itu layout kita kembali

ke dokumentasinya Nah sekarang

teman-teman lihat di bagian komponen ya

kalau kita Scroll atau kita balik dulu

ke daftar isinya di atas ya jadi di

daftar isinya kalian bisa lihat ada

building layouts Nah ini nih ya kita

coba klik jadi untuk membuat layout itu

ada dua caranya itu bisa menggunakan

komponen yang akan kita coba sekarang

atau bisa juga menggunakan template

inheritance atau pewarisan dari template

nah ini kalau teman-teman yang pernah

ngikutin playlist laraf 8 kita

menggunakan teknik yang ini yang

template inheritance ya kita menggunakan

yield section dan juga extens nah

sekarang kita mau coba cara yang berbeda

yaitu menggunakan komponen gitu ya jadi

nanti kita akan bikin sebuah komponen

namanya layout nanti otomatis layout ini

akan menjadi template untuk keseluruhan

halaman kita nanti semuanya kita simpan

ke dalam layout beserta dengan

komponen-komponen yang sudah kita buat

tadi tinggal nanti kita bikin slotnya di

sini slot yang akan membedakan antara

satu halaman dengan halaman yang lain

nanti kalau misalkan layout-nya sudah

jadi tinggal kita Panggil di halaman

yang kita butuhkan Dengan cara memanggil

X layout aja ya kita cobain ya kita

kembali lagi ke

kodenya kita bikin dulu ya kita buka

lagi Terminal kita ketik PHP artisan

make

component layout

Oke sudah kita tutup lagi terminalnya

kita lihat sekarang kita udah punya

layout ya harusnya Nah sekarang kita

buka kita akan simpan seluruh kode yang

ada di halaman home jadi kita pencet

ctrl a terus ctrl X aja ya kita

pindahkan ke dalam layout ini kita hapus

kita simpan di sini semua oke terus

nanti di layout-nya di bagian main itu

kan yang membedakan antara satu halaman

dengan halaman lain kan ininya aja ya

isi dari main-nya Nah di sini mau kita

ganti dengan slot jadi dolar slot Nah

kalau sudah kita save sekarang kita

kembali ke halaman home nah di halaman

home kita tinggal tulis gini teman-teman

kita Panggil komponennya X layout terus

di dalamnya kita tinggal tulis apa yang

mau kita masukin ke dalam slotnya tadi

misalnya kita tulis H3 ini adalah

halaman

homepage gu ya Kita kasih kelasnya

misalkan hurufnya mau dibikin gede Tex

XL Oke kita lihat kita kembali ke

website kita sini ya kita refresh tuh

aman sekarang halaman home kita hanya

begini aja nah sehingga lihat yah

teman-teman kerennya gini kalau kita

buka halaman blog

Oke kita buka halaman blog kita bisa

Hapus semua

isinya kita tinggal ganti dengan yang

ada di halaman home

nah ini ya Tinggal kita ganti tulisannya

apa Welcome to my blog kita lihat ya

balik ke website-nya kita klik blog tuh

sudah ya tapi ada beberapa problem nih

problem yang pertama header kita tetap

sama ya antara home dan blog tetap sama

ini harus kita perbaiki dulu perbaikinya

gimana kita lihat kita tahu kalau di

komponen header kita kita udah kasih

slot sebetul nya tapi masalahnya slot

ini kan dikirim dari layout dikirim dari

sini nah ini harus kita bikin dinamis

juga teman-teman nah gimana caranya kita

harus kirim datanya dari setiap halaman

kirimnya lewat mana kirimnya biasanya

saya lewat routes-nya jadi Coba

teman-teman buka file web-nya ada di

routes ada di web ya Nah kita akan kirim

di setiap halaman misalnya gini di home

Saya mau kasih title gini ya kirim data

namanya

title yang

berisi

homepage gini untuk blog kita

kirim

title yang namanya blog

title blog kayak gini n ini kan slot itu

didapatkan dari apapun yang kita

Tuliskan di dalam layout-nya ya di sini

nah sedangkan layout itu dipanggil dari

halaman home Nah jadi kita harus

kirimkan dulu data title karena title

itu hanya bisa dibaca di halaman home

aja nih kalau teman-teman mau ngecek ya

kita ngirimin title di halaman home kan

kita ke web nih ya title-nya di halaman

home berarti kalau kita mau cek ya

misalkan teman-teman buka Blade terus

tulis DD DD itu adalah dump and die jadi

Tampilkan variabel atau fardam terus

matikan scriptnya ini akan sering banget

kita pakai buat melakukan debug kita

tulis title dolar title Nah ini kan

title didapat dari mana title didapat

dari roots jadi title dikirim ke halaman

view home ke sini dapat nih Harusnya

kalau kita ke home dapat nah tapi kalau

title ini kita langsung akses di layout

di

sini gak bisa seang kita tulis di sini

aja dia tidak menerima dia gak tahu

title Apa karena title hanya ada di home

Nah kita harus cari cara agar halaman

home yang sudah mendapatkan title bisa

mengirimkan ke layout gitu ya jadi ini

kita hapus dulu teman-teman balik lagi

ke home Nah kita akan bikin sebuah

variabel jadi kita bikin menggunakan

komponen X

slot gitu kita mau bikin slot yang kita

kasih nama title gini yang isinya adalah

variabel title gitu jadi dikirim dulu ke

halaman home si title-nya nanti halaman

home akan jadi slot untuk layout

sehingga di layout kita bisa pakai

sekarang homepage-nya diganti dengan

title tapi title ini bukan dari routes

tapi dari home Nah sekarang title udah

bisa masuk ke header ke sini mari kita

lihat aman ya Jadi udah aman kalau masuk

blog Oh masih error kenapa Karena di

blok juga belum kita

kasih ini ya jadi harus ditambahin

juga tuh jadi ini udah

oke mantap Ya silakan teman-teman

lakukan hal yang sama untuk about dan

juga kontak itu tugasnya ya Dan Terakhir

untuk episode kali ini kita akan

jalankan bagian aktifnya ini kan kalau

saya masuk ke Blok bloknya masih belum

ada background itemnya ya Nah ini

harusnya pindah sesuai dengan mana yang

kita klik Oke kita coba balik ke halaman

navbar ya kita ke navbar karena linknya

ada di navbar kita harus lakukan dua

kali di bagian paling atas dan juga

nanti ketika mobile jadi kita benerin

satu dulu nih ketemu ya ini di bagian

paling atas teman-teman lihat di sini

ada panduan yang dikasih sama si Twin

ui-nya current itu artinya saat keadaan

aktif keadaan aktif itu kelasnya ini BG

greay text white tapi kalau misalnya

keadaan yang tidak aktif atau di gold

kelasnya yang ini gitu jadi Ini sisanya

lagi enggak aktif cara ngeceknya gini

teman-teman jadi kan kita harus pilih

dia lagi aktif apa enggak ini kalau

aktif ini kalau enggak aktif itu kita

harus lakukan Pengecekan di dalam Lara

file itu ada sebuah fungsi yang namanya

request jadi saya bisa cetak menggunakan

Blade terus saya tulis gini jika

request gini terus kita kasih meodenya

is

terus kita kasih requestnya apa request

tu url-nya sedang dalam keadaan apa

kalau saya ketik slash ini artinya

ketika halamannya berada di slash jika

halaman lagi berada di slash ini akan

menghasilkan nilai true atau false kalau

true maka Tampilkan

ini nah ini saya cut ya teman-teman ya

conttr

X terus saya kasih kutip di sini kita

bikin Pak ternari operator

true tanda tanya maka Tampilkan ini kita

kasih titik dua titik du jika false kita

kasih kutip kita copykan yang ini

semua

nah gitu Jadi kalau lagi aktif pakai

yang depan kalau lagi enggak aktif pakai

yang belakang kita coba ya satu dulu aja

save nih kita lagi di blok nih home-nya

mati kan ketika kita ke home home-nya

nyala mantap sekarang kita benerin untuk

yang blog yang blog juga sama

teman-teman tinggal copy aja segini ya

tinggal copy untuk menggantikan ini

semua sampai sini

tinggal kita paste tinggal is-nya kita

ganti dengan blog ya gak usah pakai

slash teman-teman kita lihat blog nah

udah aktif tuh Mantap ya tapi kalau

teman-teman mau bikin dia lebih keren

dan supaya ggak Terlalu banyak

duplikasinya Ya gimana kalau kita ubah

agar si tag a ini kan ini makin panjang

ya ada tulisan begininya kita ubah jadi

komponen sehingga nanti nulisnya enggak

akan terlalu panjang Mari kita bikin

dulu ya kita bikin komponen baru ini

kita clear

aja PHP artisan make.2

komponen kita kasih namanya apa Na link

aja kali ya Na link kalau teman-teman

nulisnya gini berarti nanti nama

komponennya adalah na Dash link ya ada

dash-nya karena saya mau bikin dia

simpel aja tanpa kelas kita kasih apa

tadi minus minus view udah ya pcat enter

sip udah kebikin sekarang kita buka dulu

nalink tuh ya Jadi ada dash-nya ada

minusnya kita buka tutup lagi

sidebar-nya Sekarang kita akan copykan

sat tag a ini ya kita copy kita copy

nanti kita ganti yang di halaman

nabarnya kita pindahkan ke sini ada

beberapa hal yang harus kita ubah

pertama hf-nya itu enggak akan kita

tulis manual di sini hf-nya akan kita

gunakan sesuai dengan apa yang ada di

sini jadi hf-nya enggak akan dibawa Oke

begini dihapus saja Nah jadi untuk KF

bar-nya itu bisa kita ganti komponennya

jadi gini ini kita hapus ya kita hapus

kita bikin jadi komponennya X na link Ya

ini yang isinya ada hf-nya gini jadi

hf-nya masih tetap ada dan dia akan kita

pakai di sini cara Cara pakainya gimana

cara mengirim hf ini ke dalam komponen

cara ngirimnya itu di akhir atau di di

mana pun di depan juga boleh ya kita

tulis kurung kur awal buka dolar

attribut gitu Jadi ini artinya apapun

atribut yang dituliskan di dalam

komponennya itu akan di-merge atau

digabungkan ke dalam komponennya atau ke

dalam tag aslinya oke terus

berikutnya tulisan di dalamnya ini kita

tulis home ya home ini akan masuk ke

dalam slot

Ya seperti yang udah kita coba Jadi

home-nya akan masuk ke sini nah sekarang

kita coba

jalanin ya masih aman tapi sekarang kita

ubah jadi sebuah komponen tapi kalau mau

lebih rapi lagi ini kalian harus benerin

area current-nya nih supaya

accsessibility-nya bagus ya sebenarnya

kalau website-nya sederhana sih kalian

bisa hapus tapi karena kita pengin

website kita accsesibility-nya bagus

kita harus kasih area current ini buat

menentukan saat dibaca oleh teman-teman

yang punya keterbatasan penglihatan

biasanya mereka menggunakan yang namanya

screen reader jadi website-nya itu

dibacain kalau kalian tulis area current

sama dengan page ini artinya link ini

dibaca oleh screen reader adalah

page-nya lagi aktif Nah kan kita

penginnya page-nya enggak selalu aktif

page-nya aktif sesuai dengan request-nya

Jadi sebenarnya bisa kita lakukan hal

yang sama juga kalian bisa tulis begini

kita kurung kur awal request is tanda

tanya page atau false harusnya Begini

Nah ini benar kalau kita jalanin aman ya

secara visual enggak ada perubahan tapi

secara aksesibilitas ini lebih baik nah

tapi ini kan teman-teman Lihat kita

melakukan pengulangan ya sebenarnya gini

aja udah benar enggak ada masalah ya

tapi kalau mau lebih rapih lagi kita

bisa keluarin request ini ke dalam

komponennya gitu jadi caranya kalau kita

mau mengirimkan atribut yang kita buat

sendiri kan kalau hf ini adalah atribut

punyanya tag a ya ini bisa dikirim ke

dalam

atributs mana tadi Nah ini ya kalau

misalkan kita buka terus kita Klik Kanan

kita

inspect nih tag-nya tampil di sini kalau

kita mau ngirim

sesuatu misalkan Saya mau ngecek Apakah

aktif atau tidak saya tulis aktif ini

ini yang saya bikin

sendiri gini misalkan aktifnya teru gitu

Ya nah tapi kalau misalkan teman-teman

tulisnya true begini ini artinya yang

yang dikirim adalah string true kalau

teman-teman mau kirimnya bulean ya true

atau false teman-teman kasih titik du di

sini nah tapi kan kita enggak mau nulis

true kita mau ngecek Apakah request-nya

slash atau bukan root atau bukan nah

caranya kayak tadi kita kasih di sini

request

is gitu Jadi kalau request-nya Slash

kirimin true atau false-nya ke dalam

komponennya jadi ini kita tinggal ganti

jadi dolar

aktif gitu sama aja ini juga sama dolar

aktif sedikit lebih simpel lah ya

dikerjakannya di depan di sini tapi

kalau teman-teman Ma pakai cara yang

tadi juga boleh

ini aman ya Tuh jadi sekarang kita

tinggal duplikat aja duplikat ini kita

tinggal ganti jadi blog gitu ya Ini juga

jadi blog yang lainnya juga ya duplikat

lagi Ini jadi about ini about satu lagi

adalah

kontak kontak ini juga kontak udah jadi

ini enggak perlu lagi

[Musik]

teman-teman sip ya sekarang kalau kita

lihat blog about Oh about-nya masih

belum ya Oh ini karena ada

slash-nya is-nya jangan pakai slash tadi

blog nah sip udah ya tinggal kita copyan

ke halaman about dulu apa yang kita

copyan struktur halamannya ini kita copy

teman-teman silakan buka halaman ctrol P

ya kita ke about nah ini ctrl a ctrl V

Ini adalah

halaman halaman about satu lagi ctrol P

kontak ctrl a ctrl V ini halaman

[Musik]

kontak Nah jangan lupa tapi kita butuh

title title belum dikirim di rout-nya

ingattingak teman-teman karena kalau

enggak error dia about tuh error dia

butuh title sedangkan kita enggak ngirim

title

Oke maka kita kirim dulu di

halaman

about kontak dulu deh kita kirim di

kontak satu lagi ini

kontak satu lagi di about about karena

kita UD ngirim nama berarti tambahin

koma di sini Jadi ngirimnya dua data Oke

kita ke about kita ke kontak udah beres

semuanya Oh tadi kita mau ngecek yang

nama Berhasil enggak di dalam about ya

kita ke about kita kasih

paragraf n nama

adalah nama ya gini coba ini kan

dikirimnya nama ya atau name deh name

biar pakai bahasa

Inggris name

Ah ada ya Halaman about nama Sandika

udah halaman kontak udah blog juga aman

home juga aman jadi itu dia ya

teman-teman pembelajaran kita mengenai

bagaimana cara bikin komponen

menggunakan Blade templating engine

sehingga jauh lebih modular lebih

reusable dan lebih ringkas lagi

codingannya ya dan di video berikutnya

kita bakalan mulai masuk membahas

mengenai data yang akan kita gunakan

untuk aplikasi blog sederhana kita di

mana Nanti kita akan mulai membahas

mengenai model ya Jadi mungkin itu aja

untuk episode kali ini mudah-mudahan

bermanfaat kita ketemu lagi di episode

Berikutnya saya sandagali pamit dan

seperti biasa jangan lupa titik kom

[Musik]

[Musik]