1
00:00:02,050 --> 00:00:04,630
Now, for this course section,

2
00:00:04,630 --> 00:00:07,330
I prepared a simple starting project,

3
00:00:07,330 --> 00:00:08,753
which you find attached.

4
00:00:09,610 --> 00:00:11,730
This starting project contains an

5
00:00:11,730 --> 00:00:13,110
app JS file,

6
00:00:13,110 --> 00:00:17,920
a package.json file and a front-end site folder.

7
00:00:17,920 --> 00:00:19,770
Now you'll see a couple of other files

8
00:00:19,770 --> 00:00:21,450
and folders for me here,

9
00:00:21,450 --> 00:00:24,220
and you get those extra files and folders.

10
00:00:24,220 --> 00:00:26,740
Namely the package-lock.json file,

11
00:00:26,740 --> 00:00:30,810
and the node modules folder by opening this integrated

12
00:00:30,810 --> 00:00:33,720
terminal here in visual studio code.

13
00:00:33,720 --> 00:00:37,820
And by then running NPM install in that attached starting

14
00:00:37,820 --> 00:00:41,293
project, which you download it and extract it.

15
00:00:42,370 --> 00:00:45,450
If you then ran NPM install in that folder,

16
00:00:45,450 --> 00:00:49,320
this package-lock.json file should be created for you.

17
00:00:49,320 --> 00:00:50,750
And more importantly,

18
00:00:50,750 --> 00:00:54,393
the node modules folder should have been created for you.

19
00:00:55,440 --> 00:00:57,460
You can ignore this, git-ignore file,

20
00:00:57,460 --> 00:01:00,163
this has nothing to do with node or express.

21
00:01:01,610 --> 00:01:05,630
Now, you will notice that the app.js file is totally empty

22
00:01:05,630 --> 00:01:08,240
because we're going to work on that together.

23
00:01:08,240 --> 00:01:12,380
But I first want to dive into that front-end site folder.

24
00:01:12,380 --> 00:01:15,550
And in there we got to go to old HTML,

25
00:01:15,550 --> 00:01:19,090
CSS and JavaScripted driven website.

26
00:01:19,090 --> 00:01:21,650
As we built it multiple times in this course,

27
00:01:21,650 --> 00:01:26,420
before we had a look at all these back-end related topics.

28
00:01:26,420 --> 00:01:31,420
And indeed the content inside this front-end site folder

29
00:01:31,670 --> 00:01:35,260
has nothing to do with node JS or express,

30
00:01:35,260 --> 00:01:36,093
though,

31
00:01:36,093 --> 00:01:39,460
we're going to change this fraud discourse section.

32
00:01:39,460 --> 00:01:41,280
Now, we can have a look at this

33
00:01:41,280 --> 00:01:43,160
starting front-end

34
00:01:43,160 --> 00:01:44,230
site here,

35
00:01:44,230 --> 00:01:46,840
by right clicking on index HTML

36
00:01:46,840 --> 00:01:49,960
and opening this with the live server extension,

37
00:01:49,960 --> 00:01:52,880
which we also use before in this course.

38
00:01:52,880 --> 00:01:57,130
If you do that, you should see a site that looks like this.

39
00:01:57,130 --> 00:02:00,800
Now, obviously the styling of this site is probably not the

40
00:02:00,800 --> 00:02:02,810
fanciest you have ever seen,

41
00:02:02,810 --> 00:02:06,750
but it's a great demo site for exploring static and dynamic

42
00:02:06,750 --> 00:02:11,120
content and how we can use node and express to serve a real

43
00:02:11,120 --> 00:02:13,830
website with dynamic content.

44
00:02:13,830 --> 00:02:18,100
So it will be a great example for this course section.

45
00:02:18,100 --> 00:02:22,720
And now here we have the starting page and does overall

46
00:02:22,720 --> 00:02:26,650
website will be about sharing restaurants that we like or

47
00:02:26,650 --> 00:02:31,130
browsing restaurants that have been shared by other users of

48
00:02:31,130 --> 00:02:33,870
this website, other visitors,

49
00:02:33,870 --> 00:02:35,640
and hence on the starting page,

50
00:02:35,640 --> 00:02:39,228
we can either browse existing restaurants. And we got some

51
00:02:39,228 --> 00:02:42,610
dummy data here, this link won't work.

52
00:02:42,610 --> 00:02:44,693
It's just a dummy placeholder.

53
00:02:45,750 --> 00:02:49,140
Or if we go back to the starting page by clicking the logo,

54
00:02:49,140 --> 00:02:52,270
we can also share our favorite restaurant with this form

55
00:02:52,270 --> 00:02:53,640
here.

56
00:02:53,640 --> 00:02:56,650
We can also use the links here in the navigation to switch

57
00:02:56,650 --> 00:02:57,960
between these pages.

58
00:02:57,960 --> 00:03:01,340
And we also got the dummy about page here,

59
00:03:01,340 --> 00:03:03,653
which just shows some static content.

60
00:03:04,650 --> 00:03:08,130
Now you can and should definitely go through the code for

61
00:03:08,130 --> 00:03:09,180
that,

62
00:03:09,180 --> 00:03:12,490
but it won't be anything you haven't seen before.

63
00:03:12,490 --> 00:03:13,830
In the recommend HTML file,

64
00:03:13,830 --> 00:03:17,890
we've got this form with input elements, labels,

65
00:03:17,890 --> 00:03:20,930
and a text area and a button.

66
00:03:20,930 --> 00:03:23,360
And, on the form element itself,

67
00:03:23,360 --> 00:03:26,780
you will see that we have no action or method yet because

68
00:03:26,780 --> 00:03:27,870
we're going to add that,

69
00:03:27,870 --> 00:03:29,913
together in this course section.

70
00:03:30,760 --> 00:03:31,860
And then the other files,

71
00:03:31,860 --> 00:03:35,070
we all just have some default HTML elements,

72
00:03:35,070 --> 00:03:37,970
which we also solved before in the course already.

73
00:03:37,970 --> 00:03:40,220
And of course in the styles folder,

74
00:03:40,220 --> 00:03:42,200
we've got some CSS styles,

75
00:03:42,200 --> 00:03:45,410
some shared styles here in shared CSS.

76
00:03:45,410 --> 00:03:49,030
And then also some page specific styles

77
00:03:49,030 --> 00:03:50,260
in the,

78
00:03:50,260 --> 00:03:54,483
in the other CSS files, which matched the HTML file names.

79
00:03:55,730 --> 00:03:58,220
We also got a little bit of JavaScript code,

80
00:03:58,220 --> 00:04:02,230
which is responsible for the responsiveness of our website.

81
00:04:02,230 --> 00:04:03,440
As specifically,

82
00:04:03,440 --> 00:04:06,350
if you were shrinking the viewport here a little bit with

83
00:04:06,350 --> 00:04:07,470
the Def tools,

84
00:04:07,470 --> 00:04:10,270
you've got this hamburger menu and you've got this

85
00:04:10,270 --> 00:04:13,450
responsive navigation, which you can open up here.

86
00:04:13,450 --> 00:04:16,490
So that is controlled with JavaScript here.

87
00:04:16,490 --> 00:04:20,260
We simply add or remove this open class here.

88
00:04:20,260 --> 00:04:23,090
When I clicked this hamburger and the debts,

89
00:04:23,090 --> 00:04:25,823
how we then open or closed this drawer.

90
00:04:26,890 --> 00:04:28,480
Because for this open closet,

91
00:04:28,480 --> 00:04:32,720
we got some styles to find in shared CSS that will ensure

92
00:04:32,720 --> 00:04:35,593
that the drawer is visible or hidden.

93
00:04:36,440 --> 00:04:39,420
Now definitely feel free to go through that code.

94
00:04:39,420 --> 00:04:43,280
I have prepared it in advance because the course section

95
00:04:43,280 --> 00:04:48,260
is not about writing this HTML CSS or browser site,

96
00:04:48,260 --> 00:04:51,740
JavaScript code. Instead in discourse section,

97
00:04:51,740 --> 00:04:55,490
I now want to show you how we can serve this page with our

98
00:04:55,490 --> 00:04:59,930
node express code. So with our own service side code.

99
00:04:59,930 --> 00:05:03,340
Why we might want to do that and how we can then handle the

100
00:05:03,340 --> 00:05:07,790
user data submission and also populate this

101
00:05:07,790 --> 00:05:08,740
restaurant list

102
00:05:08,740 --> 00:05:13,190
here with dynamic data that will be fetched from the server,

103
00:05:13,190 --> 00:05:17,100
and that will display the actual restaurant data that has

104
00:05:17,100 --> 00:05:19,470
been submitted by users through that

105
00:05:19,470 --> 00:05:22,130
share a restaurant page.

106
00:05:22,130 --> 00:05:25,770
That's what we're going to work on in this course section.

107
00:05:25,770 --> 00:05:26,603
And therefore,

108
00:05:26,603 --> 00:05:30,360
let me actually start with outlining the problems we have

109
00:05:30,360 --> 00:05:32,430
with this current website,

110
00:05:32,430 --> 00:05:36,640
which does not use any custom server-side code.

111
00:05:36,640 --> 00:05:40,560
The problem we have is that if we try to share a restaurant,

112
00:05:40,560 --> 00:05:42,550
if you want to submit this form,

113
00:05:42,550 --> 00:05:45,720
we encounter the same difficulties as we have them in the

114
00:05:45,720 --> 00:05:47,850
forums course section

115
00:05:47,850 --> 00:05:49,930
where we gotten away

116
00:05:49,930 --> 00:05:50,770
of storing that

117
00:05:50,770 --> 00:05:54,070
data of handling that submitted form.

118
00:05:54,070 --> 00:05:57,290
Because we need a custom server side code for it,

119
00:05:57,290 --> 00:06:00,410
as you saw it in the previous course section,

120
00:06:00,410 --> 00:06:03,800
where we started to store user input in a file.

121
00:06:03,800 --> 00:06:07,360
We might want to do something similar here.

122
00:06:07,360 --> 00:06:10,770
And then of course, once we get stored data,

123
00:06:10,770 --> 00:06:14,670
we want to show that here on browse restaurants,

124
00:06:14,670 --> 00:06:16,760
instead of that dummy data,

125
00:06:16,760 --> 00:06:20,760
we want to show to real data that while submitted by users.

126
00:06:20,760 --> 00:06:22,320
And that means of course, that

127
00:06:22,320 --> 00:06:23,153
A,

128
00:06:23,153 --> 00:06:26,630
we need to let users submit data and handle that.

129
00:06:26,630 --> 00:06:28,840
That's what I said a couple of seconds ago,

130
00:06:28,840 --> 00:06:29,673
but

131
00:06:29,673 --> 00:06:30,762
B,

132
00:06:30,762 --> 00:06:32,750
we then also need to generate this page.

133
00:06:32,750 --> 00:06:36,340
This restaurants HTML file dynamically?

134
00:06:36,340 --> 00:06:40,000
Because at the moment in this restaurant's HTML file,

135
00:06:40,000 --> 00:06:44,010
we got this dummy restaurant item here, this list item.

136
00:06:44,010 --> 00:06:48,350
But of course, that's, hard-coded here into this HTML page.

137
00:06:48,350 --> 00:06:50,700
That's not what we want on our website.

138
00:06:50,700 --> 00:06:53,400
We want real data, dynamic data,

139
00:06:53,400 --> 00:06:57,260
which changes as users use our website.

140
00:06:57,260 --> 00:06:59,020
And I did talk about that before,

141
00:06:59,020 --> 00:07:01,510
when I showed you Amazon.com.

142
00:07:01,510 --> 00:07:02,343
There,

143
00:07:02,343 --> 00:07:03,920
we also have dynamic data.

144
00:07:03,920 --> 00:07:05,670
We have products that change.

145
00:07:05,670 --> 00:07:08,250
A cart, that changes.

146
00:07:08,250 --> 00:07:09,720
It's the same here, now.

147
00:07:09,720 --> 00:07:12,500
We have data that should change as users,

148
00:07:12,500 --> 00:07:13,520
use our website.

149
00:07:13,520 --> 00:07:14,353
And therefore,

150
00:07:14,353 --> 00:07:18,340
we need a custom backend, custom server-side code to handle

151
00:07:18,340 --> 00:07:22,060
and store submitted data and to then generate dynamic

152
00:07:22,060 --> 00:07:26,120
responses instead of using the same pre-written static,

153
00:07:26,120 --> 00:07:28,593
HTML file over and over again.