Belajar Laravel 11 | 5. Blade Component
Summary
TLDRIn 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
🛠️ 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.
📝 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.
🏗️ 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.
🔗 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.
🔄 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.
📖 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.
Mindmap
Keywords
💡Laravel
💡Blade
💡Component
💡Template inheritance
💡Slot
💡Artisan
💡Tailwind CSS
💡Alpine.js
💡Mobile menu
💡Layout
💡Dynamic content
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]
Ver Más Videos Relacionados
Introducing Blazor Components [Pt 3] | Front-end Web Development with .NET for Beginners
Blade templates & Layouts | Laravel 10 Tutorial #7
Explaining Figma Components Like You’re Five (Simplest Way Possible)
useContext Hook | Mastering React: An In-Depth Zero to Hero Video Series
05. Controllers - Laravel 11 tutorial for beginners
Conditional Rendering | Mastering React: An In-Depth Zero to Hero Video Series
5.0 / 5 (0 votes)