Welcome back.
You may have noticed that our code is getting bigger and bigger.
And there are so many files right now.
And the more files we have, the difficult it is going to be.
Whenever we want to maintain our website or project and whenever we want to change something or add
something, we will have to edit that thing in many, many, many files.
And I'm going to give you an example, and I'm going to also show you a solution for this.
So, for example, the header exists in all pages, pretty much in every single page we have.
Also, the footer exists in every single page we have.
For example, if you go to the if you go to the let's say to the cart, you will find that we have the
header and we have the Twitter.
If you go to the log in page, if you go here to a log in that BHP, you will find that we have header
and footer.
If you go to register, register got BHP, you will find we have the header on Twitter.
And this actually is a problem.
Why is the problem?
Because suppose that you want to edit something in the future or in the header, you would have to edit
that thing in every single page because in every single page we have the header and the quote and this
is about practice.
And to fix this problem, we need to add only one single file for the header and one single file for
the footer.
And then we import them in every single page.
And then whenever we want to edit the head to head the header or the footer, we can.
It is that specific file and it will be edited automatically in all files Laney show you.
Now let me show you what I mean and let me explain further so that you understand.
So here, if you open up the index, you will find that we have here at the top, we have obviously
the header.
And at the bottom we have the footer.
We have this footer.
Similarly in the log in page, we have at the top we have.
The header, as you can see, this header, the navigation bar and we also have the footer which is
the which is the future.
And this this process is these two sections available in all files.
And this is about practice.
We need to get a single files and include these two sections in these single files and then we can import
them in all these slides.
Let me show you what I'm what I'm going to do.
And they will understand how effective what I'm going to do is.
So let me get the new folder here and I'm going to name it layouts.
Layouts.
And then inside that layouts, I'm going to create two files.
I'm going to create a file called Header that BHP and I'm going to create a new file inside that layouts
called.
Future that BHP.
And in the header, what I'm going to do is that I'm going to copy the I'm going to copy the code from
the index that I'm going to copy the, the beginning of the file all the way to the end of the navigation
bar.
I'm going to copy all of this all the way through the end of the navigation bar.
And then I'm going to remove it.
I'm going to remove it, and then I'm going to paste it in the header that BHP and I'm going to go back
to the index and then I'm going to scroll until the end of the file and then I'm going to copy the footer
as well as the script, as well as the body and the as well as the body and the email.
I'm going to copy these and then I'm going to remove them from the index and then I'm going to place
them in the future that, that BHP and what I'm going to do is that I'm going to click now on file and
then save all.
Now, if I go to the main page, let me go to the main page and you will find that my file, my, my,
my website has been ruined.
As you can see, the design now is, is, has been ruined.
As you can see, the design is now terrible.
Why?
Because they removed the header and the future.
But don't worry.
What I'm going to do now is that I'm going to head on over to the index and at the top of the index.
What I'm going to do is that I'm going to say BHP.
And then I'm going to say include.
And what I'm going to include is that I'm going to include layouts.
Layouts.
Forest lush heather.
Got BHP, BHP and then at the bottom what I'm going to do is that I'm going to say here.
BHP.
And then I'm going to say include, include.
And then I'm going to say layouts.
Layouts or slash footer that BHP.
And let me now save and.
Leading the innovative browser and showing you how outstanding this is.
Leading our refresh and show you what's going to happen if I refresh.
So if I refresh, guess what?
The design is back, boom, the design is back and we have redesigned back and everything is fine right
now.
And as you can see, what I did is that I included the footer in a single file and the header in is
in a separate file in a single and separate file, and then I imported them into the index.
Now we need to repeat the same exact process in all pages.
And you might be again, you might be wondering why would we do this?
Why am I doing this?
The reason is because now if you edit something in the header, for example, if you edit the if you
want to edit the header, if you if you want to edit the navigation bar, it will be edited in all pages
without the need of going through every single file without going through each single file.
I'm changing the header.
It's changing the navigation bar.
Imagine how difficult it would be if you had to change something in the navigation bar.
And you your card was and your your navigation bar exists.
The code exists in every single file.
You would have to go through every single file on that thing in every single file.
And this is going to take it's just going to take forever.
But if you if you if you just if you follow this design pattern, you will never have to go through
each single file.
Instead, you just need to edit that thing in the header and it will be edited automatically in the
in all pages.
Let me now go through each single page and change and repeat the process.
So in the account let me go to the account and the account at the top.
What we want to do is that we want to remove this part and you have to be very, very careful, wisely
removing, by the way, don't remove the beach because this beach record is belongs the beach.
B logic belongs to every single to to each single page and shouldn't be removed.
What we are removing is that we are removing the email card, the header of the navigation bar this
part as well as the navigation bar.
And then what we are doing instead is that we are importing important gear using the include function.
And then here I'm including obtaining layouts.
Layouts or slash header that BHP and in the future we we need to repeat the same we need to remove the
footer hearing to remove the footer.
You ask the future as well as the script and the closing of the real antibody.
And then here you need to say include layouts footer that BHP and you need to repeat the same process
for all 444 or every single page.
So let me do this quickly.
Let me go to the cart and then again we need, we need to leave the BHP code.
Don't remove the BHP.
Could be careful.
So here I'm going to remove the this part.
And then I'm going to remove the navigation bar.
This navigation bar.
And instead I'm going to basically this this line of code include layouts that reach me.
And at the bottom I'm going to remove a four footer as well as the script JavaScript and the body and
the email.
And then I'm saying your layouts, which are that we we need to do the same to all these pages.
So let me do all of this and consider this your homework.
You need to do all of this.
I'm going to try to.
Go a little faster because we don't want to waste a lot of time on this.
And we have the log in.
We did I think we did this.
We didn't do this through the log into this.
And let me say your for year and then at the top.
We just need to remove this part.
As well as the navigation bar.
And then we need to say include layouts, whether that be with the order details, we need to do the
same at the bottom.