Blade templates & Layouts | Laravel 10 Tutorial #7
Summary
TLDRIn this tutorial episode, the host guides viewers through setting up the HTML template for a project using the 'Lara Blade' framework. They demonstrate how to integrate the 'index.html' file, customize the layout with Bootstrap 5 and Swatch, and create a clean, reusable dashboard. The episode also covers creating additional pages like 'terms and conditions', implementing a shared layout to avoid code duplication, and utilizing Blade's 'yield' and 'section' directives for efficient templating. Finally, the host shows how to use configuration files to dynamically change the application name displayed on the site.
Takeaways
- 😀 The video is a tutorial episode focused on creating a layout for a project using HTML and Laravel's Blade templating engine.
- 🔧 The presenter introduces an HTML template from a GitHub repository and demonstrates how to integrate it into a 'dashboard.blade' file.
- 🌐 The template utilizes Bootstrap 5 and a 'bootswatch' for a distinct visual style, emphasizing simplicity and ease of use.
- 📝 The presenter removes unused sections, such as the profile page, to streamline the layout for the current episode's focus.
- 🎨 A 'terms and conditions' page is created as an example of how to add new pages to the application without duplicating code.
- 📑 The video explains how to create a reusable layout to avoid code duplication across multiple pages in a Laravel application.
- 📐 The 'yield' directive in Blade is introduced as a way to define a section of the layout that can be filled with content from other pages.
- 📝 The 'section' directive is used to specify where the content of individual pages should be inserted into the layout.
- 🗂️ The presenter discusses the benefits of separating the navigation bar into its own file, 'nav.blade.php', for cleaner and more maintainable code.
- 🔄 The 'include' directive in Blade is demonstrated to incorporate the navigation file into the layout.
- 🛠 The video also covers how to use Laravel's configuration files and environment variables to manage application settings, such as the app name.
Q & A
What is the main focus of today's episode in the video?
-The main focus of today's episode is to learn more about Lara Blade, bring the HTML template for the project, and create the first layout.
Where can the viewers find the HTML template code for the project?
-The viewers can find the HTML template code on a GitHub repo, with the link provided in the video description.
What is the specific HTML file used for this episode?
-The specific HTML file used for this episode is index.html.
What is the role of 'bootswatch' in the project?
-Bootswatch is a theme for Bootstrap, used in the project to give it a particular design look.
What is the purpose of creating a 'terms' page in the script?
-The purpose of creating a 'terms' page is to provide a simplified terms and conditions page for the application, demonstrating how to add a second page to the project.
How does the script handle duplicated content like the header and footer in multiple pages?
-The script creates a reusable layout that includes a header and footer, and uses the Blade 'yield' directive to insert unique page content without duplication.
What is the purpose of the 'yield' directive in Blade templates?
-The 'yield' directive in Blade templates is used to define a section of content that can be filled in by child templates that extend the layout.
What is the benefit of creating a separate 'nav.blade.php' file?
-Creating a separate 'nav.blade.php' file helps to keep the layout file clean and organized by separating the navigation code from the main layout.
How can the application's name be changed using configuration files?
-The application's name can be changed by modifying the 'app.name' in the '.env' file and then accessing it in the Blade file using the 'config' function.
What does the video suggest for managing environment variables and configurations?
-The video suggests using the '.env' file to store environment variables and the 'config' folder to manage application configurations, which can be accessed within Blade files for dynamic content.
How does the video demonstrate the use of the 'include' directive in Blade?
-The video demonstrates the use of the 'include' directive by including the 'nav.blade.php' file in the layout, which allows for reusing the navigation code across different pages.
Outlines
📝 Introduction to Lara Blade Project Layout
The video begins with a welcome to a new episode focused on Lara Blade, where the presenter plans to introduce an HTML template for a project and create the initial layout. The template is available on GitHub, with a specific focus on the 'index.html' file. The presenter removes unnecessary elements like the profile page and discusses the use of Bootstrap 5 with Bootswatch for a distinct visual style. The current state of the project includes sections for sharing ideas, a search bar, follow functionality, a comments box, and login/register pages, with plans to implement authentication later. The presenter also demonstrates how to clean the app by creating secondary pages, such as a 'terms and conditions' page, using a simple closure-based route without a controller.
🛠 Creating a Reusable Layout with Blade
In this section, the presenter addresses the issue of duplicated header and footer code across multiple pages and introduces the concept of creating a reusable layout in Laravel Blade. The process involves creating a 'layout.blade.php' file within a new 'layouts' folder, where the header and footer are defined, excluding the main content section which is intended to be unique per page. The presenter uses Blade's 'yield' directive to define a 'content' section, which is then filled by extending the layout in other Blade files. The video also covers the use of the 'section' directive to replace the 'yield' content with the specific page's HTML. Additionally, the presenter simplifies the layout by separating the navigation bar into a 'nav.blade.php' file and uses the 'include' directive to incorporate it into the main layout.
🔧 Utilizing Configuration Files in Laravel
The final paragraph discusses the use of configuration files in Laravel, specifically focusing on changing the application's name from 'Laravel' to 'Ideas'. The presenter explains that configurations are stored in the '.env' file and accessed through the 'config' function in Blade files. An example is given on how to change the application name in both the 'app.php' configuration file and the '.env' file, and how to display it within the Blade template using the 'config' directive. The video concludes with a demonstration of how changing the 'app.name' in the '.env' file dynamically updates the application's name displayed on the website, emphasizing the ease of managing configurations in Laravel.
Mindmap
Keywords
💡Lara Blade
💡HTML Template
💡GitHub Repo
💡Bootstrap 5
💡Blade Template
💡CDN
💡Reusable Layout
💡Section and Yield
💡Include Directive
💡Environment Variables
💡Configuration Files
Highlights
Introduction of a new episode focused on Larablade and HTML template integration.
Availability of the project's HTML template on GitHub for public use.
Explanation of the main HTML file 'index.html' used for the project layout.
Removal of unused elements like the profile page from the HTML template.
Utilization of Bootstrap 5 and Bootswatch for a distinct visual style.
Demonstration of the current simple HTML template with CDN and JavaScript.
Overview of the initial dashboard layout featuring sharing ideas, search bar, follow, comments, and login/register pages.
Discussion on the potential need for a separate page for comments in the future.
Introduction of creating a 'terms and conditions' page using a closure without a controller.
Use of the same HTML template for the 'terms' page with added dummy text.
Identification of the issue with duplicated headers and footers across pages.
Introduction of creating a reusable layout to avoid duplication of headers and footers.
Explanation of using Blade's 'yield' directive to define a section for page-specific content.
Demonstration of extending the layout in other pages like the dashboard.
Introduction of separating the navigation bar into a separate 'nav.blade.php' file for cleaner code.
Use of the 'include' directive to incorporate the navigation file into the layout.
Explanation of using environment variables and configuration files to manage application settings.
Demonstration of changing the application name using the 'config' function in Blade templates.
Encouragement for viewers to explore the '.env' file and configuration settings on their own.
Conclusion summarizing the creation of the first reusable layout and its benefits.
Transcripts
hey guys welcome back to another episode
so in today's episode we're going to
learn more about uh Lara blade and we
are actually going to bring our HTML
template for this project and create our
first layout so as I mentioned on the
first episode we do actually have an
HTML template for this project and I
have the code on
this GitHub repo I'll have the link in
the description you guys can go actually
use it
and the main one we're going to use
actually for this episode is going to be
index.html so I'm actually going to go
ahead and I'm going to copy the HTML
Inside It's relatively short
and I'm going to paste it in our
dashboard.blade file that we created on
the previous episode and I have actually
gone ahead and removed some of the balls
that we are no longer using like the
profile page for now
so this is our HTML we are using
bootstrap 5 so I'm using something
called boot Swatch which is like a team
for bootstrap
to give us that kind of drawing look
I'll show you guys in a second
and yeah so we have one HTML here we're
using the CDN and we have one JavaScript
at the end so that's it very simple
template so let's go see how it looks
and yeah this is how it looks right now
uh we have a section for sharing our
ideas we have a search bar we can follow
people here we have a comments box here
which I think later on I will change a
little bit
I don't know if it's good to have the
comments here we might have a separate
page for that and we have a login and
register page which we will Implement
later on once we get into authentication
for now we won't be covering that so
now that we have this
I want to actually show you guys how you
can clean this app so what if you had a
second page
for example
we had a terms and conditions page as a
matter of fact let's go and create our
terms page right now
so I'll go to our web.route and I create
a terms page
and I'll do it the old school way I'm
not going to create a controller for it
I'm just going to create a closure
and I'm going to return a view with the
name of terms so I'll do that right now
and I'll use the exact same template
so I'll close this so you guys can see
this is our navigation
so this container is basically where the
main content of the website is and here
I'm going to add
a div
I suppose
did I add two divs
I did okay
I'll add a div and inside it I'll put
some Lauren ipsum so
some dummy text and if you guys are not
familiar with learn ipsum it's just some
basically nonsense data people use as
placeholder ticks or maybe it does have
meaning I'm not sure actually I don't
want to say it's nonsense but that's
with commonly used I'll put it here
so if we pretend this is our temperature
conditions
so I'll go to the terms page and you can
see it is working right we have a very
simplified terms and conditions page and
I'll even add
an H1 tag
so it is working
but one issue you might have guessed and
this is a common issue when you're also
writing with PHP right vanilla PHP is
ever hitter and our footer is duplicated
on each of the pages we make right so
throughout this application you might
have like 10 pages and we don't want to
actually have to copy and paste this
header what if you want to change this
title right do you have to do it like 10
times what if you want to change our you
know template whatever things like that
so what we need to do is actually create
a reusable layout for all our pages so
let's go about let's go and do that
I'm going to go ahead and actually
inside our reviews folder create a new
an extra folder I'm going to call it
layout yeah
and inside here I'll name another file
also named layout you could also name
your folder shared if you like but I
call it layout Dot blade.php
so inside here I'm going to go ahead and
I'm going to actually paste in our
header and footer except for this
section which is
for a specific page right so that one is
going to be unique to each page and it's
not going to be duplicated and I'll do
the same for the footer so
I'm gonna move it here
and I'll format it so it looks nice
and I'm going to add some comments
and with lower blade you can actually
add comments kind of similar with PHP so
this is how comments look you have two
open and curl braces Dash Dash and again
dash dash two closing curve bases this
is going to be comments in Blade
and I'm going to say page content goes
here right just so we have some
indicator here
so if we go save this go back to our
terms page obviously it's going to look
awful to be expected so what I want to
do is instead of having to write this
header and footer HTML all the time I
want to tell Lara blade hey go and fetch
it from this layout file right and put
our terms data this HTML inside this
container how do we go about doing that
so lower blade actually has a directive
for this it's called the yield
and basically you create a section and I
name it content
and then you're able to actually go to
another blade file such as our terms
page and tell it to extend
extends layout
so now it's going to go ahead and
actually copy all the code from
our layout.php and put it inside these
terms at PHP so I'm just going to go
ahead and refresh the page we do get a
error here
because I made a mistake with the name
so we we need to go layout dot layout
right it's a layout.blade inside the
layout folder
so and the convention here we could also
use this but I would like to use dot
that's the convention in the PHP
community so
if you refresh and you can see this is
actually kind of working now it does
look out of back and I'll tell you guys
why
right now now that we have extended it
Lara blade doesn't know where to put
this HTML right
for us we want to put it inside this div
right
that's why we put the yield yield tag
here or the yield directive so in order
to actually move this HTML inside
this container what we can do is we can
wrap it around a directive called
section
and we need to name it same as ever
yield so here I named it content I'm
going to do the same here
and by doing so we are telling Lara
blade hey go ahead copy this HTML
and move it inside
here or replace it with this yield
that's what we are basically telling
Lara blade to do so if we refresh our
page we can see now it looks very nice
it looks exactly like it did previously
right
so I'm going to go ahead and do the
exact same thing on our dashboard page
I'll get rid of all the duplicated HTML
so the footer I'll remove it
I remove this I'll remove
all of that
and I'm going to say extends layout dot
layout
and here I'm going to say section
content
again don't forget about the section
otherwise your page is going to look
weird
I'm going to save it
go back
and if you go to our root page you can
see it also looks like it did before so
we have basically created our first
reusable layout in
our lower application now one more thing
I would like to do is actually I want to
simplify this a little bit more
I actually like to separate my
navigation this navigation bar
from this layout file and the reason I
like to do that is
later on we're going to have a lot of
Blade code inside here we're going to
have our you know different Navigation
pages I like this to be a bit more clean
so what I'm going to do is I'm going to
create
in new file I'm going to call it
nav.blade.php for now
and I'm going to move our navigation
inside that file so I'll cut this I'll
go inside nav
and in order to actually use our
navigation file here we can use
something called include the include
directive and I'm going to say layout
dot nav and the include directive is
same as copying where basically or
similar to include
inside PHP right when you include
another PHP file we're basically telling
Lara blade hey go ahead find this nav
file which is here copy all of its
content and paste it here
it's same as that and so this makes our
code a bit more reusable later on if we
wanna
maybe use this navigation in a different
layout if you want or if this nav fault
gets very long
it still keeps our layout file clean and
small
so I'll go save it and it looks like it
did before no issues
now I also want to teach you guys one
more thing and that is about how to
actually use our configuration files
so here we have Twitter clone bootstrap
5 template I actually want to change
this with the name of our application
now you can technically just type in
ideas
but larval comes in with a way to store
the configuration so
and your configuration are actually
stored environment variables are stored
inside that EnV file if you go here find
the dot in v file you see a bunch of
configurations here and we'll learn
about them as we go along but we're now
at the top you have something called app
name
so that actually is the app name of your
application I'm going to actually change
that to ideas
so that's going to be our app name from
now on
and
the where this app name is actually
defined inside this config folder where
I mentioned in the episode three so if
you go inside config click on the first
one app so these are going to be
application related configuration
you will see that it's actually defined
here right
so this EnV function if you haven't used
it is I believe a public library you can
also use it in PHP all it does is read
this app name from our EnV file so from
this EnV file which stands for
environment variables
is reading it from this EnV file so
that's why it's called EnV let's read it
from EnV if it's not available
use laurable as default so I'll show you
guys the
definition it tries to find a key inside
our inverify environment variable file
if it can't find it it'll use the
default and so that's why the default
app name is laurable if you don't have
this EnV fault but we do
and for us it's called ideas
now how can we actually access this
configuration inside our blade file
well luckily for us it's actually very
easy I'll open the kind of Blade display
tag or directive right which is the
opening curl braces and I'm going to
type in config yeah it's that simple the
config function
and then you need to name give the name
of the config so as you can see inside
this config folder we have a bunch of
them right we have I don't know maybe
it's 12 or something
you first type in the name of your
config which is app
you put dot and then the specific config
that you want so inside our
app.phpconfig
we have the name configuration we have
the EnV configuration we have debug
right we have the time zone
configuration we have a bunch of them
for now I want the name configuration so
I'm just going to type in name
right so a lot of people go ahead inside
the app and take this name and
return it to us here so I'm going to
save this go back
and I'm not sure if it's visible but at
the top left we have ideas over here
we also want to change this with the
name in our own environment variable or
our configuration
so I'll copy this and find it inside our
navigation layout.nav
where is the ideas oh it's here so it's
hard coded here I'll replace here here
as well
and if you refresh you get ideas that's
it I think I left the extra space
so I'll get rid of that
and as you can see we get ideas and just
to show you it does work I'll change it
from ideas to maybe
something else
hello
and you can see it is actually working
so we are loading this from our
environment variable and that's the very
basics of configurations we will learn
more about configurations in later
episodes but I just wanted to show you
guys a little bit of a small snippet so
you guys can actually play around with
this if you like
and you can also maybe go through this
dot EnV file on your own time and see
what's available we can see we have our
database connection information our log
information and some additional stuff
here we will
work with them later on
CE we are we are going to use our
database but for now this is all we need
and yeah that's it guys so
we have created our first layout I may
rename these two later on but for now
this is good
and our page is working so hope you guys
enjoyed this episode if you have any
questions we can leave them in the
comment sections below and I try to
answer all of you guys question also
don't forget to like And subscribe for
more content
see you guys on the next episode have a
great day
تصفح المزيد من مقاطع الفيديو ذات الصلة
Load HTML pages using Express Js | Express JS Tutorial | Node Js | Learning Points
Belajar Laravel 11 | 5. Blade Component
Create Portfolio website HTML & CSS only ✅ Part - 1
How To Make Your Own Minecraft Server With Eaglercraft!
Words in the middle of the horizontal lines (CSS Mastery # 007) | Coder Champ
HTML and CSS for Beginners Part 2: Building your first web page!
5.0 / 5 (0 votes)