Blade templates & Layouts | Laravel 10 Tutorial #7

Summary

In 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

00:00

📝 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.

05:02

🛠 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.

10:04

🔧 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.

Keywords

💡Lara Blade

Lara Blade is a typo in the transcript, likely referring to 'Laravel Blade', which is a templating engine included with the Laravel PHP framework. It allows developers to write views with plain PHP, making the process of building web pages more efficient and readable. In the video, the creator uses Laravel Blade to build the layout for a project, demonstrating its use in creating reusable components.

💡HTML Template

An HTML template refers to a pre-designed HTML file that serves as a starting point for web development. It includes the basic structure and elements that will be used throughout the website. In the context of the video, the creator discusses using an HTML template for a project, which is then integrated into the Laravel Blade files to create the initial layout.

💡GitHub Repo

A GitHub repository is a location where projects are stored and version-controlled using Git. It allows developers to collaborate on code and track changes. In the video script, the creator mentions a GitHub repository where the code for the project, including the HTML template, is stored and shared with the audience.

💡Bootstrap 5

Bootstrap 5 is a popular front-end framework used for developing responsive and mobile-first websites. It includes a set of CSS and JavaScript-based design templates for typography, forms, buttons, navigation, and other interface components. The video mentions using Bootstrap 5 with a 'bootswatch' theme to give the project a distinct visual style.

💡Blade Template

A Blade template in Laravel is a file that contains HTML along with Blade directives and control structures like loops and conditionals. It allows for the creation of dynamic views that can be rendered with data passed from the application. The video script describes the process of creating and using Blade templates for different pages of a web application.

💡CDN

CDN stands for Content Delivery Network, which is a system of distributed servers that deliver web content to users based on their geographic location. It is used to enhance the performance and availability of web resources like CSS and JavaScript files. In the video, the creator uses a CDN to include Bootstrap 5 in the project.

💡Reusable Layout

A reusable layout in web development refers to a design template that can be used across multiple pages of a website to maintain consistency and reduce redundancy. In the video, the creator discusses creating a reusable layout in Laravel Blade to avoid duplicating the header and footer across different pages.

💡Section and Yield

In Laravel Blade, 'section' and 'yield' are directives used to define and render content areas within a layout. 'Section' is used to define a content area, while 'yield' is used to specify where that content should be inserted into the layout. The video explains how to use these directives to create a dynamic layout that can be extended by other Blade files.

💡Include Directive

The 'include' directive in Blade is used to include the content of another Blade file within the current file, similar to the 'include' statement in PHP. It allows for the reuse of code, such as navigation bars or footers, across different views. The video script describes using the 'include' directive to incorporate a navigation bar into the layout.

💡Environment Variables

Environment variables are used to store configuration settings and can be accessed by an application at runtime. They are particularly useful for managing different configurations for various environments (e.g., development, testing, production). In the video, the creator shows how to change the application name in the '.env' file and access it within Blade templates.

💡Configuration Files

Configuration files contain settings and parameters that an application uses to operate. In Laravel, these are typically stored in the 'config' directory and can be accessed using the 'config' helper function. The video script explains how to modify the application name in the configuration files and display it on the web pages using Blade.

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