1
00:00:02,440 --> 00:00:04,410
Now, to get started interacting

2
00:00:04,410 --> 00:00:08,330
with the database from inside our NodeJS project,

3
00:00:08,330 --> 00:00:11,420
I created a simple starting project

4
00:00:11,420 --> 00:00:12,770
so that we don't have to write

5
00:00:12,770 --> 00:00:14,600
all the code from the ground up.

6
00:00:14,600 --> 00:00:18,520
Specifically, I prepared some views and some styles,

7
00:00:18,520 --> 00:00:22,860
though I will say that the views are basically empty.

8
00:00:22,860 --> 00:00:25,630
We'll have to add more content to them together

9
00:00:25,630 --> 00:00:27,170
throughout this section.

10
00:00:27,170 --> 00:00:31,160
And the styles, of course, are only using CSS logic

11
00:00:31,160 --> 00:00:33,870
we learned about throughout this course.

12
00:00:33,870 --> 00:00:35,720
Now I'll walk you through these files

13
00:00:35,720 --> 00:00:37,160
and folders in a second.

14
00:00:37,160 --> 00:00:39,380
First of all, you can download

15
00:00:39,380 --> 00:00:40,940
this prepared starting project

16
00:00:40,940 --> 00:00:44,770
by using the file you find attached to this lecture.

17
00:00:44,770 --> 00:00:47,320
And once you did so, you can extract it

18
00:00:47,320 --> 00:00:51,110
and then move it somewhere on your system, on your machine,

19
00:00:51,110 --> 00:00:55,430
maybe the same folder where you store all the other projects

20
00:00:55,430 --> 00:00:57,930
you've worked on throughout this course.

21
00:00:57,930 --> 00:00:59,680
And once you did all of that,

22
00:00:59,680 --> 00:01:03,140
open the project in VS Code, as I did it here,

23
00:01:03,140 --> 00:01:07,340
and then there, go to Terminal, New Terminal.

24
00:01:07,340 --> 00:01:11,120
And in that terminal, this integrated terminal,

25
00:01:11,120 --> 00:01:15,080
run npm install to install all the dependencies

26
00:01:15,080 --> 00:01:16,293
this project needs.

27
00:01:18,126 --> 00:01:21,120
The package.json file was part of the attachment.

28
00:01:21,120 --> 00:01:23,730
And in there, I list all the dependencies we need

29
00:01:23,730 --> 00:01:26,750
to get started like Express

30
00:01:26,750 --> 00:01:29,260
and EJS for rendering the templates

31
00:01:29,260 --> 00:01:32,550
and Nodemon for automatically restarting the server

32
00:01:32,550 --> 00:01:35,513
during development whenever we change our code.

33
00:01:36,850 --> 00:01:38,610
Then we can close this terminal

34
00:01:38,610 --> 00:01:42,083
and now have a look at the files and folders I gave to you.

35
00:01:42,940 --> 00:01:45,870
And let's maybe start with app.js.

36
00:01:45,870 --> 00:01:48,370
In there, I got some imports to Express

37
00:01:48,370 --> 00:01:50,630
and to build in path package.

38
00:01:50,630 --> 00:01:54,230
And then I got an import to a blog.js file

39
00:01:54,230 --> 00:01:57,660
in a routes folder, which doesn't exist yet.

40
00:01:57,660 --> 00:01:59,620
We're going to add to this file together

41
00:01:59,620 --> 00:02:01,490
throughout the section.

42
00:02:01,490 --> 00:02:04,050
Next, I create my Express app,

43
00:02:04,050 --> 00:02:07,210
and then I got some basic initialization work.

44
00:02:07,210 --> 00:02:10,000
For example, here, I'm setting up the view engine

45
00:02:10,000 --> 00:02:14,340
and I tell Express.js where to find my views,

46
00:02:14,340 --> 00:02:17,420
that it's in the views folder.

47
00:02:17,420 --> 00:02:22,420
And then I ensure that incoming request bodies are parsed

48
00:02:22,950 --> 00:02:27,950
and data is extracted from them with help of line 13,

49
00:02:28,370 --> 00:02:31,090
where I set up a built-in middleware

50
00:02:31,090 --> 00:02:34,003
that will do that request body parsing.

51
00:02:34,840 --> 00:02:38,730
And then here, I also do make sure

52
00:02:38,730 --> 00:02:41,360
that static files are served.

53
00:02:41,360 --> 00:02:45,060
And that these are concepts I covered in earlier sections,

54
00:02:45,060 --> 00:02:47,790
for example, in the templates section.

55
00:02:47,790 --> 00:02:49,730
So therefore, definitely have a look

56
00:02:49,730 --> 00:02:51,770
at those course sections again,

57
00:02:51,770 --> 00:02:54,470
if this is all brand new to you.

58
00:02:54,470 --> 00:02:56,530
These are all concepts we learned about,

59
00:02:56,530 --> 00:02:58,450
and therefore I'm not going to explain them

60
00:02:58,450 --> 00:02:59,913
from the ground up again.

61
00:03:01,090 --> 00:03:04,840
This line 14 basically makes sure that we can load CSS

62
00:03:04,840 --> 00:03:07,973
and JavaScript files without issues, for example.

63
00:03:08,890 --> 00:03:12,510
Then I'm using the blogRoutes, which I'm importing here.

64
00:03:12,510 --> 00:03:15,640
Though, as I mentioned, this file doesn't exist yet,

65
00:03:15,640 --> 00:03:18,290
so we're going to set up those routes together

66
00:03:18,290 --> 00:03:20,300
in a couple of minutes.

67
00:03:20,300 --> 00:03:22,020
I already used them here though,

68
00:03:22,020 --> 00:03:23,853
so we don't have to do that later.

69
00:03:24,860 --> 00:03:28,570
And then I have a default error handling middleware here,

70
00:03:28,570 --> 00:03:33,210
which in the end ensures that this 500 template is served

71
00:03:33,210 --> 00:03:35,090
whenever anything goes wrong.

72
00:03:35,090 --> 00:03:37,100
And that's a concept we learned about

73
00:03:37,100 --> 00:03:40,320
in an earlier course section already as well.

74
00:03:40,320 --> 00:03:42,710
We learned about this error handling

75
00:03:42,710 --> 00:03:44,740
in our Express application

76
00:03:44,740 --> 00:03:49,290
where we can handle 404 or 500 errors.

77
00:03:49,290 --> 00:03:52,360
And we did learn about this general error handling

78
00:03:52,360 --> 00:03:54,603
middleware there as well.

79
00:03:55,730 --> 00:04:00,240
So therefore that's the app.js file, not too fancy,

80
00:04:00,240 --> 00:04:03,780
really just some basics we learned about before.

81
00:04:03,780 --> 00:04:07,200
Let's now have a look at the other folders and files.

82
00:04:07,200 --> 00:04:09,100
And there we have the public folder

83
00:04:09,100 --> 00:04:12,570
with a nested styles folder inside of it.

84
00:04:12,570 --> 00:04:16,540
And then that styles folder, we got some CSS files.

85
00:04:16,540 --> 00:04:20,760
Now feel free to go through that CSS code on your own.

86
00:04:20,760 --> 00:04:22,650
It's really just some basic code

87
00:04:22,650 --> 00:04:25,770
using concepts we learned about throughout this course,

88
00:04:25,770 --> 00:04:29,470
setting some colors, fonts, margins,

89
00:04:29,470 --> 00:04:32,230
and doing the same for form,

90
00:04:32,230 --> 00:04:35,640
elements like inputs and text areas,

91
00:04:35,640 --> 00:04:40,220
and then also managing some lists of data and so on.

92
00:04:40,220 --> 00:04:43,320
Really not too fancy and not too much.

93
00:04:43,320 --> 00:04:45,240
The only interesting line is,

94
00:04:45,240 --> 00:04:46,640
or the only interesting part

95
00:04:46,640 --> 00:04:50,410
is this part at the bottom of posts.css

96
00:04:50,410 --> 00:04:53,560
with this white-space: pre-wrap rule,

97
00:04:53,560 --> 00:04:55,920
and I'll come back to that later.

98
00:04:55,920 --> 00:04:57,960
You'll see it in action later.

99
00:04:57,960 --> 00:05:01,850
This will be important for preserving line breaks

100
00:05:01,850 --> 00:05:05,930
that we might enter into our blog post text.

101
00:05:05,930 --> 00:05:08,640
And again, I'll come back to that later,

102
00:05:08,640 --> 00:05:09,473
but other than that,

103
00:05:09,473 --> 00:05:12,490
it's really just straightforward CSS code

104
00:05:12,490 --> 00:05:14,970
using all the concepts you'll learn about

105
00:05:14,970 --> 00:05:16,223
throughout this course.

106
00:05:17,170 --> 00:05:18,530
Now in the views folder,

107
00:05:18,530 --> 00:05:21,540
I prepared a couple of EJS files,

108
00:05:21,540 --> 00:05:24,150
the error pages here, for example,

109
00:05:24,150 --> 00:05:27,940
and then also a file for listing all the blog posts,

110
00:05:27,940 --> 00:05:30,900
for showing the details about a blog post.

111
00:05:30,900 --> 00:05:34,840
But you will notice that all the data is missing in there

112
00:05:34,840 --> 00:05:38,830
because the views I'm providing to you here

113
00:05:38,830 --> 00:05:43,830
really just are the frames that we'll use basically.

114
00:05:43,990 --> 00:05:47,260
We're going to populate them with some concrete data

115
00:05:47,260 --> 00:05:50,320
together throughout this course section.

116
00:05:50,320 --> 00:05:52,760
So therefore, these templates at the moment

117
00:05:52,760 --> 00:05:55,750
aren't doing too many useful things.

118
00:05:55,750 --> 00:05:57,453
They're basically just empty.

119
00:05:58,420 --> 00:06:01,380
I also got a couple of includes here for the head section,

120
00:06:01,380 --> 00:06:05,300
for example, where I import some fonts from Google Fonts

121
00:06:05,300 --> 00:06:08,200
and some global stylesheet is set up.

122
00:06:08,200 --> 00:06:11,990
So one of my own stylesheets here, and then some header,

123
00:06:11,990 --> 00:06:13,870
which we can include on the pages,

124
00:06:13,870 --> 00:06:15,720
and then also a post item,

125
00:06:15,720 --> 00:06:20,423
which we can later use on this posts-list.ejs file here.

126
00:06:21,500 --> 00:06:26,010
But again, that's all mostly empty and not fully functional

127
00:06:26,010 --> 00:06:29,270
because that's now what we will work on.

128
00:06:29,270 --> 00:06:32,280
And what we'll do now in the next lectures

129
00:06:32,280 --> 00:06:34,540
is we're going to define the routes

130
00:06:34,540 --> 00:06:37,040
that we wanna have step-by-step.

131
00:06:37,040 --> 00:06:39,430
We're going to connect to the database

132
00:06:39,430 --> 00:06:42,960
from inside this Node Express app

133
00:06:42,960 --> 00:06:47,440
so that this code here is able to talk to the database.

134
00:06:47,440 --> 00:06:50,860
And then we are going to talk to the database

135
00:06:50,860 --> 00:06:53,490
and we are going to create posts,

136
00:06:53,490 --> 00:06:56,430
read posts, delete, and update posts,

137
00:06:56,430 --> 00:06:59,120
and do all the things that were sketched out

138
00:06:59,120 --> 00:07:00,683
earlier in this section.