1
00:00:01,010 --> 00:00:01,640
Welcome back.

2
00:00:02,210 --> 00:00:07,040
You may have noticed that our code is getting bigger and bigger.

3
00:00:07,040 --> 00:00:09,260
And there are so many files right now.

4
00:00:09,650 --> 00:00:14,630
And the more files we have, the difficult it is going to be.

5
00:00:14,630 --> 00:00:22,880
Whenever we want to maintain our website or project and whenever we want to change something or add

6
00:00:22,880 --> 00:00:27,560
something, we will have to edit that thing in many, many, many files.

7
00:00:27,830 --> 00:00:31,460
And I'm going to give you an example, and I'm going to also show you a solution for this.

8
00:00:31,940 --> 00:00:39,860
So, for example, the header exists in all pages, pretty much in every single page we have.

9
00:00:40,550 --> 00:00:43,700
Also, the footer exists in every single page we have.

10
00:00:44,150 --> 00:00:49,730
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

11
00:00:49,730 --> 00:00:51,110
header and we have the Twitter.

12
00:00:52,400 --> 00:00:58,580
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

13
00:00:58,580 --> 00:00:59,090
and footer.

14
00:00:59,420 --> 00:01:06,560
If you go to register, register got BHP, you will find we have the header on Twitter.

15
00:01:07,100 --> 00:01:09,900
And this actually is a problem.

16
00:01:09,920 --> 00:01:11,060
Why is the problem?

17
00:01:11,540 --> 00:01:16,370
Because suppose that you want to edit something in the future or in the header, you would have to edit

18
00:01:16,520 --> 00:01:22,730
that thing in every single page because in every single page we have the header and the quote and this

19
00:01:22,730 --> 00:01:23,660
is about practice.

20
00:01:24,110 --> 00:01:32,420
And to fix this problem, we need to add only one single file for the header and one single file for

21
00:01:32,420 --> 00:01:32,930
the footer.

22
00:01:33,200 --> 00:01:36,140
And then we import them in every single page.

23
00:01:36,140 --> 00:01:41,030
And then whenever we want to edit the head to head the header or the footer, we can.

24
00:01:41,030 --> 00:01:47,930
It is that specific file and it will be edited automatically in all files Laney show you.

25
00:01:48,360 --> 00:01:52,040
Now let me show you what I mean and let me explain further so that you understand.

26
00:01:52,520 --> 00:01:56,510
So here, if you open up the index, you will find that we have here at the top, we have obviously

27
00:01:56,510 --> 00:01:56,990
the header.

28
00:01:57,680 --> 00:01:59,840
And at the bottom we have the footer.

29
00:02:00,500 --> 00:02:01,220
We have this footer.

30
00:02:02,000 --> 00:02:05,960
Similarly in the log in page, we have at the top we have.

31
00:02:07,160 --> 00:02:13,240
The header, as you can see, this header, the navigation bar and we also have the footer which is

32
00:02:13,240 --> 00:02:14,680
the which is the future.

33
00:02:15,100 --> 00:02:24,700
And this this process is these two sections available in all files.

34
00:02:24,700 --> 00:02:25,870
And this is about practice.

35
00:02:26,230 --> 00:02:35,200
We need to get a single files and include these two sections in these single files and then we can import

36
00:02:35,200 --> 00:02:36,730
them in all these slides.

37
00:02:36,760 --> 00:02:38,560
Let me show you what I'm what I'm going to do.

38
00:02:38,560 --> 00:02:43,540
And they will understand how effective what I'm going to do is.

39
00:02:43,930 --> 00:02:48,580
So let me get the new folder here and I'm going to name it layouts.

40
00:02:49,060 --> 00:02:49,720
Layouts.

41
00:02:50,500 --> 00:02:54,010
And then inside that layouts, I'm going to create two files.

42
00:02:54,940 --> 00:03:02,650
I'm going to create a file called Header that BHP and I'm going to create a new file inside that layouts

43
00:03:02,650 --> 00:03:03,040
called.

44
00:03:04,480 --> 00:03:05,710
Future that BHP.

45
00:03:07,760 --> 00:03:14,840
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

46
00:03:14,840 --> 00:03:22,250
the index that I'm going to copy the, the beginning of the file all the way to the end of the navigation

47
00:03:22,250 --> 00:03:22,580
bar.

48
00:03:23,270 --> 00:03:27,500
I'm going to copy all of this all the way through the end of the navigation bar.

49
00:03:27,800 --> 00:03:28,970
And then I'm going to remove it.

50
00:03:29,510 --> 00:03:35,300
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

51
00:03:35,300 --> 00:03:42,500
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

52
00:03:42,500 --> 00:03:50,150
as well as the script, as well as the body and the as well as the body and the email.

53
00:03:50,150 --> 00:03:54,710
I'm going to copy these and then I'm going to remove them from the index and then I'm going to place

54
00:03:54,710 --> 00:04:01,040
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

55
00:04:01,040 --> 00:04:01,850
then save all.

56
00:04:03,170 --> 00:04:09,800
Now, if I go to the main page, let me go to the main page and you will find that my file, my, my,

57
00:04:11,090 --> 00:04:13,460
my website has been ruined.

58
00:04:13,490 --> 00:04:17,210
As you can see, the design now is, is, has been ruined.

59
00:04:18,140 --> 00:04:20,040
As you can see, the design is now terrible.

60
00:04:20,060 --> 00:04:20,510
Why?

61
00:04:20,900 --> 00:04:22,730
Because they removed the header and the future.

62
00:04:22,730 --> 00:04:23,330
But don't worry.

63
00:04:23,900 --> 00:04:28,460
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.

64
00:04:28,460 --> 00:04:32,510
What I'm going to do is that I'm going to say BHP.

65
00:04:36,380 --> 00:04:39,050
And then I'm going to say include.

66
00:04:40,220 --> 00:04:46,130
And what I'm going to include is that I'm going to include layouts.

67
00:04:46,940 --> 00:04:48,020
Layouts.

68
00:04:49,440 --> 00:04:51,600
Forest lush heather.

69
00:04:53,340 --> 00:05:00,350
Got BHP, BHP and then at the bottom what I'm going to do is that I'm going to say here.

70
00:05:01,460 --> 00:05:02,090
BHP.

71
00:05:03,230 --> 00:05:07,850
And then I'm going to say include, include.

72
00:05:08,690 --> 00:05:12,110
And then I'm going to say layouts.

73
00:05:12,620 --> 00:05:17,480
Layouts or slash footer that BHP.

74
00:05:18,970 --> 00:05:20,520
And let me now save and.

75
00:05:21,440 --> 00:05:25,010
Leading the innovative browser and showing you how outstanding this is.

76
00:05:25,010 --> 00:05:28,370
Leading our refresh and show you what's going to happen if I refresh.

77
00:05:28,370 --> 00:05:30,170
So if I refresh, guess what?

78
00:05:30,980 --> 00:05:37,640
The design is back, boom, the design is back and we have redesigned back and everything is fine right

79
00:05:37,640 --> 00:05:37,940
now.

80
00:05:38,450 --> 00:05:45,310
And as you can see, what I did is that I included the footer in a single file and the header in is

81
00:05:45,320 --> 00:05:50,810
in a separate file in a single and separate file, and then I imported them into the index.

82
00:05:51,260 --> 00:05:54,650
Now we need to repeat the same exact process in all pages.

83
00:05:55,580 --> 00:05:59,900
And you might be again, you might be wondering why would we do this?

84
00:05:59,900 --> 00:06:01,040
Why am I doing this?

85
00:06:01,310 --> 00:06:07,460
The reason is because now if you edit something in the header, for example, if you edit the if you

86
00:06:07,460 --> 00:06:14,360
want to edit the header, if you if you want to edit the navigation bar, it will be edited in all pages

87
00:06:14,690 --> 00:06:23,070
without the need of going through every single file without going through each single file.

88
00:06:23,070 --> 00:06:24,140
I'm changing the header.

89
00:06:24,320 --> 00:06:25,700
It's changing the navigation bar.

90
00:06:26,240 --> 00:06:34,220
Imagine how difficult it would be if you had to change something in the navigation bar.

91
00:06:34,520 --> 00:06:39,140
And you your card was and your your navigation bar exists.

92
00:06:40,670 --> 00:06:43,280
The code exists in every single file.

93
00:06:43,280 --> 00:06:47,900
You would have to go through every single file on that thing in every single file.

94
00:06:47,900 --> 00:06:50,600
And this is going to take it's just going to take forever.

95
00:06:50,930 --> 00:06:59,450
But if you if you if you just if you follow this design pattern, you will never have to go through

96
00:06:59,450 --> 00:07:00,590
each single file.

97
00:07:00,590 --> 00:07:05,360
Instead, you just need to edit that thing in the header and it will be edited automatically in the

98
00:07:05,510 --> 00:07:06,260
in all pages.

99
00:07:06,710 --> 00:07:11,210
Let me now go through each single page and change and repeat the process.

100
00:07:11,210 --> 00:07:15,920
So in the account let me go to the account and the account at the top.

101
00:07:15,920 --> 00:07:23,300
What we want to do is that we want to remove this part and you have to be very, very careful, wisely

102
00:07:23,420 --> 00:07:31,190
removing, by the way, don't remove the beach because this beach record is belongs the beach.

103
00:07:31,190 --> 00:07:36,680
B logic belongs to every single to to each single page and shouldn't be removed.

104
00:07:37,040 --> 00:07:42,860
What we are removing is that we are removing the email card, the header of the navigation bar this

105
00:07:42,860 --> 00:07:45,530
part as well as the navigation bar.

106
00:07:46,220 --> 00:07:54,920
And then what we are doing instead is that we are importing important gear using the include function.

107
00:07:55,700 --> 00:07:59,210
And then here I'm including obtaining layouts.

108
00:08:00,520 --> 00:08:09,460
Layouts or slash header that BHP and in the future we we need to repeat the same we need to remove the

109
00:08:09,460 --> 00:08:12,130
footer hearing to remove the footer.

110
00:08:13,640 --> 00:08:19,660
You ask the future as well as the script and the closing of the real antibody.

111
00:08:19,670 --> 00:08:27,680
And then here you need to say include layouts footer that BHP and you need to repeat the same process

112
00:08:27,680 --> 00:08:30,920
for all 444 or every single page.

113
00:08:30,920 --> 00:08:33,770
So let me do this quickly.

114
00:08:33,770 --> 00:08:38,170
Let me go to the cart and then again we need, we need to leave the BHP code.

115
00:08:38,180 --> 00:08:39,350
Don't remove the BHP.

116
00:08:39,350 --> 00:08:40,490
Could be careful.

117
00:08:42,410 --> 00:08:45,200
So here I'm going to remove the this part.

118
00:08:46,830 --> 00:08:48,930
And then I'm going to remove the navigation bar.

119
00:08:50,110 --> 00:08:51,160
This navigation bar.

120
00:08:51,580 --> 00:08:56,140
And instead I'm going to basically this this line of code include layouts that reach me.

121
00:08:56,740 --> 00:09:03,730
And at the bottom I'm going to remove a four footer as well as the script JavaScript and the body and

122
00:09:03,730 --> 00:09:04,570
the email.

123
00:09:05,050 --> 00:09:12,010
And then I'm saying your layouts, which are that we we need to do the same to all these pages.

124
00:09:12,010 --> 00:09:15,850
So let me do all of this and consider this your homework.

125
00:09:15,850 --> 00:09:17,860
You need to do all of this.

126
00:09:17,860 --> 00:09:19,390
I'm going to try to.

127
00:09:23,050 --> 00:09:26,710
Go a little faster because we don't want to waste a lot of time on this.

128
00:09:32,120 --> 00:09:33,890
And we have the log in.

129
00:09:34,160 --> 00:09:35,600
We did I think we did this.

130
00:09:35,600 --> 00:09:37,130
We didn't do this through the log into this.

131
00:09:37,130 --> 00:09:42,350
And let me say your for year and then at the top.

132
00:09:44,650 --> 00:09:46,210
We just need to remove this part.

133
00:09:47,760 --> 00:09:49,200
As well as the navigation bar.

134
00:09:49,200 --> 00:09:55,830
And then we need to say include layouts, whether that be with the order details, we need to do the

135
00:09:55,830 --> 00:09:56,850
same at the bottom.