1
00:00:00,090 --> 00:00:00,410
Okay.

2
00:00:00,510 --> 00:00:06,390
So picking up where we left off, if you remember in the last video where we got the HTML up and running

3
00:00:06,390 --> 00:00:08,580
the Edge's file, I said Ignore the form.

4
00:00:08,580 --> 00:00:09,910
For now, we're coming back to that.

5
00:00:09,930 --> 00:00:17,220
Well, now it's a video where we're going to get that form working and it involves a couple of new concepts.

6
00:00:17,220 --> 00:00:18,810
So hang in there.

7
00:00:18,810 --> 00:00:20,760
The MySQL part is the same.

8
00:00:20,760 --> 00:00:22,440
We've already seen how to insert.

9
00:00:23,220 --> 00:00:26,400
If we go back to this early, where is it?

10
00:00:27,090 --> 00:00:27,570
Here we go.

11
00:00:27,570 --> 00:00:30,360
We've seen how to insert the single file.

12
00:00:30,750 --> 00:00:33,390
We inserted this single rusty, the dog.

13
00:00:33,390 --> 00:00:36,750
We also saw how to do it with this object syntax.

14
00:00:36,750 --> 00:00:40,500
And then we saw how to do a bulk insert with a lot of them, which we don't need to worry about.

15
00:00:40,680 --> 00:00:42,420
So we've seen how to do this.

16
00:00:42,420 --> 00:00:44,700
Now we need to figure out a couple of things.

17
00:00:44,700 --> 00:00:48,630
One, how do we get the data from the form, this form here?

18
00:00:49,170 --> 00:00:53,220
Unstyled So this form a user types or email and hits join.

19
00:00:53,220 --> 00:00:57,360
Now, first of all, where do they send that request to?

20
00:00:57,390 --> 00:00:58,590
We need to figure that out.

21
00:00:58,590 --> 00:01:02,070
And maybe you guessed this, we need to define a route for that.

22
00:01:02,220 --> 00:01:06,390
But there's a slight difference in that route, which I'll get to in a second, because there's another

23
00:01:06,390 --> 00:01:09,150
problem, which is how does that data from the form get there?

24
00:01:09,360 --> 00:01:12,960
Well, what we want to do is use what's known as a post route.

25
00:01:12,960 --> 00:01:14,880
So there are different types of requests.

26
00:01:14,880 --> 00:01:17,400
I briefly touched on this get in post request.

27
00:01:17,400 --> 00:01:22,230
This is not a course on HTTP, so you'll kind of just have to take me out my word here that we need

28
00:01:22,230 --> 00:01:27,390
to use a post request because it allows us to send data with the request.

29
00:01:27,390 --> 00:01:33,690
The form will automatically take the data from here and send it as opposed to request to the destination

30
00:01:33,690 --> 00:01:34,950
that we tell it to send it to.

31
00:01:35,400 --> 00:01:36,990
So let me show you how we do that.

32
00:01:37,110 --> 00:01:41,430
We've already seen we deleted it honestly from the form.

33
00:01:41,430 --> 00:01:43,560
So there's no suspense here.

34
00:01:43,680 --> 00:01:48,180
We create a form element and the first thing we can do is add in method and method.

35
00:01:48,180 --> 00:01:50,100
We will set to be post.

36
00:01:50,100 --> 00:01:52,320
It can be all caps, all lowercase, doesn't matter.

37
00:01:52,320 --> 00:01:53,340
You'll see both.

38
00:01:53,850 --> 00:01:59,400
And that is saying that when this form is submitted from this button, the last button, or if a button

39
00:01:59,400 --> 00:02:01,980
is the last thing in a form, it will automatically submit the form.

40
00:02:01,980 --> 00:02:08,039
So when it's submitted it's going to be a post request and we'll send it to a route that doesn't exist

41
00:02:08,039 --> 00:02:08,580
yet.

42
00:02:08,759 --> 00:02:13,950
So we send that with action equals and then we can send it slash.

43
00:02:13,950 --> 00:02:18,180
But that would just redirect us back here, except that needs to be a get request.

44
00:02:18,180 --> 00:02:19,350
So we'll get to that in a moment.

45
00:02:19,350 --> 00:02:21,840
But we could do slash register.

46
00:02:21,840 --> 00:02:23,640
We'll make up a route that doesn't exist.

47
00:02:23,640 --> 00:02:27,510
So right now this form is going to take us to a page that doesn't exist.

48
00:02:27,510 --> 00:02:28,710
And if I try it.

49
00:02:31,790 --> 00:02:32,660
Massive.

50
00:02:33,900 --> 00:02:35,600
Oh, this is still much bigger than it is.

51
00:02:35,600 --> 00:02:37,310
In reality, it's about this size.

52
00:02:37,580 --> 00:02:38,720
But that's harder to read.

53
00:02:38,720 --> 00:02:40,040
So I'm just increasing the font.

54
00:02:40,310 --> 00:02:43,730
So if I enter something in here and click join.

55
00:02:43,730 --> 00:02:46,820
Now it tells me cannot post a slash register.

56
00:02:47,240 --> 00:02:47,810
Great.

57
00:02:47,810 --> 00:02:50,630
So we need to define a post root to slash register.

58
00:02:51,140 --> 00:02:54,470
And again, the reason we're doing post is it allows us to send the form data.

59
00:02:54,470 --> 00:02:58,910
But what I could also do if I did a get request, I'll show you what happens.

60
00:02:58,910 --> 00:03:01,730
We already have a get root defined a couple of them.

61
00:03:01,730 --> 00:03:04,040
Let's do a get request to slash joke.

62
00:03:04,220 --> 00:03:10,040
So what that means is that when this form is submitted, it's going to send the data to slash joke as

63
00:03:10,040 --> 00:03:11,680
a get, which we already have.

64
00:03:11,690 --> 00:03:14,870
That's what this get comes from get slash joke.

65
00:03:14,900 --> 00:03:23,390
So if I restart and try it again this time, if I enter whatever and I click join now you'll see it

66
00:03:23,390 --> 00:03:25,040
takes me to slash joke.

67
00:03:25,580 --> 00:03:29,720
There's also a question mark here, so that's something to consider.

68
00:03:30,050 --> 00:03:35,690
What's happening is that our data isn't being sent because we're not giving it a name to be sent under.

69
00:03:36,200 --> 00:03:44,780
So what we do is assign our input here a name, and this will be the label for whatever this is right

70
00:03:44,780 --> 00:03:46,010
here, which is email.

71
00:03:46,010 --> 00:03:48,530
So that's the best thing we could put their email.

72
00:03:48,530 --> 00:03:52,640
So when our data is sent off by the form, it will be referred to as email.

73
00:03:52,640 --> 00:03:54,710
And there's only one piece of data that we need.

74
00:03:55,190 --> 00:03:59,060
If we had multiple things in our form, we might have email and first name and last name and they could

75
00:03:59,060 --> 00:04:00,380
all have a name.

76
00:04:00,770 --> 00:04:04,700
So now if we do, it actually don't need to restart the server to do that.

77
00:04:05,240 --> 00:04:13,400
But now if I do blah at gmail.com and I hit join, now notice that my URL is hard to read but it says

78
00:04:13,400 --> 00:04:14,600
slash joke.

79
00:04:14,600 --> 00:04:20,000
We sent a get request slash joke and then it appends email equals blah percent.

80
00:04:20,000 --> 00:04:23,690
40 is what it's doing for the at sign gmail.com.

81
00:04:24,110 --> 00:04:27,980
So you can see our form data is making it here to a different request.

82
00:04:27,980 --> 00:04:32,690
But this is not a post request and we want it to be a post request for really.

83
00:04:32,690 --> 00:04:36,560
The main reason is that we don't want our data just to be appended like this in the URL.

84
00:04:36,830 --> 00:04:38,180
We could get away with that.

85
00:04:38,180 --> 00:04:42,740
The standard way of sending data from a form, if you're adding it into a database is to do it as a

86
00:04:42,740 --> 00:04:43,820
post request.

87
00:04:43,820 --> 00:04:45,290
This is known as a query string.

88
00:04:45,290 --> 00:04:46,760
There's a lot of terminology here.

89
00:04:47,030 --> 00:04:48,050
This doesn't matter.

90
00:04:48,050 --> 00:04:49,940
We don't want it to work this way.

91
00:04:49,940 --> 00:04:55,640
I'm just telling you that it's not a conventional it's not a good practice if you're doing like a search

92
00:04:55,640 --> 00:04:56,510
form or something.

93
00:04:56,510 --> 00:04:57,290
This makes sense.

94
00:04:57,290 --> 00:05:03,410
And you may have noticed search forms and search results will often have query strings after the root.

95
00:05:03,440 --> 00:05:04,520
We don't want that.

96
00:05:04,520 --> 00:05:11,690
We want to send our data using a post request and not to slash joke, but to slash register.

97
00:05:12,290 --> 00:05:16,670
Now the problem is how do we create a root that will listen for that?

98
00:05:17,450 --> 00:05:22,130
Essentially, what we're trying to do back to this handy dandy animation is something like this.

99
00:05:22,130 --> 00:05:23,000
Hello server.

100
00:05:23,000 --> 00:05:23,900
I would like to sign up.

101
00:05:23,900 --> 00:05:29,360
Here's my email, pass the email to the server and then our node app, our express app is going to take

102
00:05:29,360 --> 00:05:33,020
that email and run an insert query with my SQL.

103
00:05:33,050 --> 00:05:35,360
My SQL hopefully says Great, it worked.

104
00:05:35,600 --> 00:05:41,600
Then we get back either something like this thanks for registering page or we just redirect back to

105
00:05:41,600 --> 00:05:42,170
the home.

106
00:05:42,290 --> 00:05:43,580
So we'll decide on that.

107
00:05:43,580 --> 00:05:50,240
So how do we get it to how do we get the Express app, the right side here in the green to accept this

108
00:05:50,240 --> 00:05:54,380
email or to even know that a request is being made to slash register?

109
00:05:57,270 --> 00:05:59,760
With this Epcot post.

110
00:05:59,760 --> 00:06:01,530
This is how we define a post drought.

111
00:06:01,950 --> 00:06:03,330
Just like a jet route.

112
00:06:03,330 --> 00:06:04,670
Except it's an outpost.

113
00:06:04,710 --> 00:06:06,150
Everything else is the same.

114
00:06:06,450 --> 00:06:08,040
So let's do that now.

115
00:06:09,300 --> 00:06:14,580
App dot post slash register which will needs to match whatever we put here.

116
00:06:14,580 --> 00:06:17,130
So if this was registration or create user.

117
00:06:17,930 --> 00:06:24,920
Then this needs to be registration or create user and our same requests in response.

118
00:06:25,010 --> 00:06:29,300
This will only be triggered when a post request is sent to register.

119
00:06:30,470 --> 00:06:41,420
So just to prove that, let's do a console.log post request sent to slash register just like this.

120
00:06:41,870 --> 00:06:43,820
And now if I restart my server.

121
00:06:45,890 --> 00:06:51,890
If you go back here, if I submit this form, I'll make it take up half the window here.

122
00:06:51,920 --> 00:06:53,060
Watch down here.

123
00:06:53,180 --> 00:06:57,050
And I go here and I type whatever I want in here and I click join now.

124
00:06:57,680 --> 00:07:01,250
Notice that we get our post request sent to slash register.

125
00:07:01,820 --> 00:07:09,110
And if I try and get there another way, like by just going to slash register, this is sending a get

126
00:07:09,110 --> 00:07:09,610
request.

127
00:07:09,620 --> 00:07:10,790
We haven't actually discussed that.

128
00:07:10,790 --> 00:07:17,000
But when you just go click on a link or you enter a URL manually that is sending a get request and that's

129
00:07:17,000 --> 00:07:19,270
why it's telling me I cannot get slash register.

130
00:07:19,280 --> 00:07:24,260
So essentially the only way that we're going to be able to in practice, that we'll be able to get to

131
00:07:24,380 --> 00:07:27,950
this root here and trigger this code is through the form.

132
00:07:28,160 --> 00:07:29,930
So one more time, put something in here.

133
00:07:29,930 --> 00:07:30,890
Watch down there.

134
00:07:32,150 --> 00:07:34,160
A post request is being sent every time.

135
00:07:35,150 --> 00:07:40,610
So what we want to do now is be able to extract the data that's being sent.

136
00:07:40,610 --> 00:07:44,480
And for now you have to trust that it's being sent, that our form data is being sent.

137
00:07:44,480 --> 00:07:47,540
We don't have a way of seeing it and the way that we see it.

138
00:07:47,600 --> 00:07:48,290
Oh, boy.

139
00:07:48,290 --> 00:07:49,820
It's a little bit complicated.

140
00:07:50,240 --> 00:07:51,950
I'm going to walk you through the steps here.

141
00:07:52,520 --> 00:07:54,530
This is the annoying setup we have to do.

142
00:07:54,530 --> 00:07:59,930
So we have to install something called body parser and I won't waste much time talking about it.

143
00:08:00,470 --> 00:08:04,910
What's happening is that Express is a lightweight framework, which means that it doesn't come with

144
00:08:04,910 --> 00:08:07,340
everything that you would possibly want.

145
00:08:07,610 --> 00:08:12,260
Pre-installed So we have to go and select certain things and body body parser is one.

146
00:08:12,260 --> 00:08:15,140
What it does is it parses the request body.

147
00:08:15,140 --> 00:08:19,070
So remember that when a request is sent, there's all this.

148
00:08:19,070 --> 00:08:22,580
It's just a giant block of text and somewhere in there.

149
00:08:23,360 --> 00:08:29,540
It says email is equal to whatever we typed in here, but it's in a giant block of text.

150
00:08:29,540 --> 00:08:32,000
It's not it's not JavaScript or anything.

151
00:08:32,000 --> 00:08:37,789
So body parser will intercept that and turn it into JavaScript that we can then use and manipulate.

152
00:08:37,940 --> 00:08:44,930
So then what we need to do, and I'm just doing this quickly, it's just copy and pasting importing

153
00:08:44,930 --> 00:08:48,800
body parser equals required body parser so we can save that.

154
00:08:48,800 --> 00:08:51,650
Make sure our package dot JSON has body parser in it.

155
00:08:52,610 --> 00:08:56,060
Then finally we need to tell our app to use it.

156
00:08:57,020 --> 00:09:00,410
So I'm also just going to copy that line and put it next to app set.

157
00:09:00,410 --> 00:09:02,540
So we have our configuration lines together.

158
00:09:03,440 --> 00:09:08,180
We're not going to go into detail in this line, but this is just requiring body parser doesn't do anything.

159
00:09:08,180 --> 00:09:14,990
We have to tell EXPRESS which is app write app is from Express that we're using body parser and this

160
00:09:14,990 --> 00:09:19,220
now allows us to extract information from post requests.

161
00:09:20,840 --> 00:09:25,280
And here's the magic line request body email.

162
00:09:25,580 --> 00:09:32,960
So what this will now store in the request body in that post route under email will be the email address

163
00:09:32,960 --> 00:09:34,430
coming from the form.

164
00:09:34,820 --> 00:09:40,400
So let me show you that if we go to our post route register rather than constant log post request sent

165
00:09:40,400 --> 00:09:45,560
to slash user, we'll also add plus request dot body email.

166
00:09:46,490 --> 00:09:51,190
Email is about that request, dot body email.

167
00:09:52,370 --> 00:09:58,280
So we definitely need to make sure that we have name equals email and then we should be good to go.

168
00:09:58,280 --> 00:09:59,390
Assuming our install went.

169
00:09:59,720 --> 00:10:01,040
Let's start the server again.

170
00:10:01,580 --> 00:10:02,720
It looks good.

171
00:10:03,650 --> 00:10:04,930
Let's go over here.

172
00:10:04,970 --> 00:10:06,710
Just going to refresh this page.

173
00:10:06,740 --> 00:10:09,980
Now I'll type C at gmail.com.

174
00:10:10,460 --> 00:10:11,360
Join now.

175
00:10:12,180 --> 00:10:13,170
And what do you know?

176
00:10:13,290 --> 00:10:21,930
Post request sent to slash register email is c at gmail.com, so whatever is typed into that form is

177
00:10:21,930 --> 00:10:24,750
being stored in request body as email.

178
00:10:25,590 --> 00:10:28,560
So body parser is doing the heavy lifting for us here.

179
00:10:28,560 --> 00:10:34,110
We had to do kind of a couple of annoying lines, but let me show you what body looks like.

180
00:10:34,110 --> 00:10:36,120
So request body on its own.

181
00:10:37,020 --> 00:10:38,340
So I'm going to comment that line out.

182
00:10:38,340 --> 00:10:40,320
We're not constantly logging anything.

183
00:10:41,190 --> 00:10:49,410
Now if we go back to the form refresh and I type, I don't know H at gmail.com and I click join.

184
00:10:49,410 --> 00:10:53,070
Now this is what our request body looks like.

185
00:10:53,100 --> 00:10:56,610
Email is h gmail.com again.

186
00:10:56,610 --> 00:11:02,760
Email is coming from here, but if I get rid of body parser, let me show you what life is like without

187
00:11:02,760 --> 00:11:03,180
it.

188
00:11:03,510 --> 00:11:08,670
And I do the same exact thing h at gmail.com.

189
00:11:09,030 --> 00:11:11,310
Now there is no request body.

190
00:11:11,310 --> 00:11:12,450
It's undefined.

191
00:11:13,170 --> 00:11:14,370
I did everything else the same.

192
00:11:14,370 --> 00:11:21,600
So just the single line telling your app to use body parser is what allows us to access request body.

193
00:11:21,600 --> 00:11:28,260
So the information is still being sent to express, but express is just not doing anything with it.

194
00:11:28,860 --> 00:11:34,440
Request that body is what we need along with this body partial one to start using it.

195
00:11:34,440 --> 00:11:41,400
So it's kind of confusing, but that's the whole ethos of EXPRESS is that you add the tools you need

196
00:11:41,400 --> 00:11:42,450
as you need them.

197
00:11:42,450 --> 00:11:47,400
So rather than giving you everything at once and you might only use one out of 20 things, it gives

198
00:11:47,400 --> 00:11:51,840
you one thing, two things, and then you go and grab the other things you need.

199
00:11:51,840 --> 00:11:57,030
So if you need post requests, you need a request body to be filled in with data, then we need body

200
00:11:57,030 --> 00:11:57,600
parser.

201
00:11:58,020 --> 00:11:58,470
Okay.

202
00:11:58,860 --> 00:12:04,800
So then all we really need to do now if we're isolating request to body email, that's the email that's

203
00:12:04,800 --> 00:12:05,580
being sent.

204
00:12:05,850 --> 00:12:07,440
Let's save it to a variable.

205
00:12:10,430 --> 00:12:12,110
Now we just need to insert that.

206
00:12:12,110 --> 00:12:17,990
Make a new user, which we've already seen how to do and I won't make us type it from scratch, but

207
00:12:18,230 --> 00:12:24,260
hint, hint, we're going to be doing connection query and we've already seen how to do the query.

208
00:12:24,260 --> 00:12:27,680
It's going to be an insert into if we go back.

209
00:12:28,550 --> 00:12:30,110
Let's just copy this code here.

210
00:12:30,110 --> 00:12:34,100
This is what we've done in the past where we inserted a single user.

211
00:12:35,830 --> 00:12:37,060
Go to JJ's.

212
00:12:38,890 --> 00:12:39,970
So I have it commented out.

213
00:12:39,970 --> 00:12:41,170
I'll uncomment it.

214
00:12:41,770 --> 00:12:43,300
There's a couple of things we're doing.

215
00:12:43,450 --> 00:12:48,190
The first I made a variable called person with an email and created that.

216
00:12:48,190 --> 00:12:52,770
But we don't need that created at anymore because this is for faker.

217
00:12:52,780 --> 00:12:58,180
We actually have a real created at and then for request up body that email can just replace that.

218
00:13:00,140 --> 00:13:00,630
Okay.

219
00:13:00,860 --> 00:13:02,550
So we can get rid of that variable too.

220
00:13:02,570 --> 00:13:05,350
So this is just preparing the data to be inserted.

221
00:13:05,360 --> 00:13:06,620
We'll have a person object.

222
00:13:06,620 --> 00:13:09,200
It has an email request by email.

223
00:13:09,200 --> 00:13:12,410
And then all we need to do here, we can we don't need to store it in a variable.

224
00:13:12,440 --> 00:13:15,050
It's just connection query.

225
00:13:17,040 --> 00:13:19,150
Insert into users set.

226
00:13:19,170 --> 00:13:22,920
We passed in person and then we have our callback function.

227
00:13:22,920 --> 00:13:23,940
So this is review.

228
00:13:23,950 --> 00:13:25,290
We've already seen how to insert.

229
00:13:25,290 --> 00:13:28,590
So I want to spend a ton of time on it and rather well.

230
00:13:28,590 --> 00:13:32,690
We can start by just constantly logging the result, which will be a lot of stuff, hopefully.

231
00:13:32,700 --> 00:13:34,230
Let's see what happens now.

232
00:13:35,250 --> 00:13:36,970
We have body parts are working again.

233
00:13:37,030 --> 00:13:37,830
Okay, good.

234
00:13:38,310 --> 00:13:43,470
Now, if I go over here this time, it will insert a real user.

235
00:13:43,470 --> 00:13:45,870
So let's do a more serious email address.

236
00:13:45,960 --> 00:13:47,160
Well, I guess that doesn't matter.

237
00:13:47,190 --> 00:13:48,230
How about Miranda?

238
00:13:48,240 --> 00:13:49,560
Let's not do all caps.

239
00:13:50,460 --> 00:13:51,300
Miranda.

240
00:13:51,330 --> 00:13:53,760
Five four at Hotmail.

241
00:13:55,260 --> 00:13:56,100
Miranda.

242
00:13:56,130 --> 00:13:56,760
There we go.

243
00:13:56,790 --> 00:13:59,850
Join now and look what we get back.

244
00:13:59,880 --> 00:14:01,050
Affected rows one.

245
00:14:01,050 --> 00:14:02,670
It's this oak packet.

246
00:14:02,760 --> 00:14:04,020
All this other stuff.

247
00:14:04,410 --> 00:14:11,970
And if we went into our SQL, if we wanted to do a select star, well, it's going to take a bit.

248
00:14:12,510 --> 00:14:15,690
Let's do we'll have to type it ourselves.

249
00:14:15,690 --> 00:14:22,350
Select star from users quarter by created at limit one.

250
00:14:26,600 --> 00:14:31,820
We don't have a user's table in all caps, so, boy, we get the wrong user.

251
00:14:31,850 --> 00:14:32,870
Scared me for a moment.

252
00:14:32,900 --> 00:14:38,450
We need to also change the order at order by created that to be descending.

253
00:14:41,010 --> 00:14:41,850
And here we go.

254
00:14:41,880 --> 00:14:43,380
Miranda, 54, at Hotmail.

255
00:14:43,380 --> 00:14:44,190
So it worked.

256
00:14:44,430 --> 00:14:47,850
Long story short, it worked and we're pretty much done.

257
00:14:47,880 --> 00:14:53,180
The only other thing we have to decide is, okay, our Web apps is just kind of hanging here.

258
00:14:53,190 --> 00:14:54,090
You can see that.

259
00:14:54,210 --> 00:14:55,560
What do we do next?

260
00:14:55,560 --> 00:15:00,360
And we could either do something like a rez send.

261
00:15:01,050 --> 00:15:04,800
Thanks for joining our waitlist.

262
00:15:04,800 --> 00:15:10,050
Let's say we can start with that and if we restart the server, do it again.

263
00:15:11,220 --> 00:15:13,830
Have someone try and sign up the new email.

264
00:15:13,830 --> 00:15:19,050
Let's say Jane Doe at gmail.com.

265
00:15:19,440 --> 00:15:20,520
Click join now.

266
00:15:22,020 --> 00:15:22,660
Now we get.

267
00:15:22,680 --> 00:15:23,910
Thanks for joining our waitlist.

268
00:15:23,910 --> 00:15:26,490
So it's totally up to you how you want to structure this part.

269
00:15:27,060 --> 00:15:32,400
What I'm going to do is just have it redirect back to the same page, to the original page here, and

270
00:15:32,400 --> 00:15:35,010
we'll be able to see 503 or 504.

271
00:15:35,520 --> 00:15:36,810
It's really up to you.

272
00:15:37,500 --> 00:15:41,970
This is how you you wouldn't use red state send, but you could do a red dot render and you could make

273
00:15:41,970 --> 00:15:44,290
a thank you page if you wanted to.

274
00:15:44,310 --> 00:15:48,810
But what I'm going to do is show you another line which is just red dot redirect.

275
00:15:50,640 --> 00:15:54,420
So red is being response up here, red dot redirect to slash.

276
00:15:54,420 --> 00:15:56,400
And now I'll just take us back to the home page.

277
00:15:56,400 --> 00:15:58,350
So effectively what's happening.

278
00:15:59,070 --> 00:16:02,760
Right restart one more time is we're on the home page.

279
00:16:02,850 --> 00:16:05,940
504 is how many we just got from the database.

280
00:16:05,940 --> 00:16:14,390
I entered a new one Dave et Dave dot com I click join now it's going to hit this post route slash register.

281
00:16:14,400 --> 00:16:20,460
We're extracting the email from that form data in the body and then we're inserting it as a new person

282
00:16:20,460 --> 00:16:22,410
in a new user in our database.

283
00:16:22,410 --> 00:16:29,340
When that finishes, we're redirecting back to Slash, which starts this whole process over.

284
00:16:29,700 --> 00:16:33,930
It's going to then select all the count of all users.

285
00:16:33,930 --> 00:16:40,320
Then it's going to There's my cat, then it's going to render our home page with that count.

286
00:16:40,320 --> 00:16:45,600
So to the user it will just look like this page refreshes and this goes from 504 to 505.

287
00:16:45,630 --> 00:16:47,580
But behind the scenes, a lot more is happening.

288
00:16:48,390 --> 00:16:49,230
And there we go.

289
00:16:50,640 --> 00:16:51,770
So that's awesome.

290
00:16:51,780 --> 00:16:53,030
Hopefully you think that's cool.

291
00:16:53,040 --> 00:16:54,630
All we have left is to style it.

292
00:16:54,780 --> 00:17:02,250
If you would like a little bit more detail on the the insert part and I can go over that a bit more

293
00:17:02,250 --> 00:17:03,690
if you'd like and what's happening here.

294
00:17:03,690 --> 00:17:06,420
But if you feel like you've got a grasp on it, you want to move on to styling.

295
00:17:06,420 --> 00:17:07,170
Go ahead.

296
00:17:08,280 --> 00:17:13,740
So just to reiterate, we could have also done it a little bit more manually if we wanted to.

297
00:17:13,740 --> 00:17:22,589
We could have written a query like this if I did var query and I could have done insert into user's

298
00:17:24,329 --> 00:17:24,960
email.

299
00:17:24,960 --> 00:17:27,180
So this should be more familiar values.

300
00:17:27,180 --> 00:17:30,900
And then I would do parentheses plus.

301
00:17:32,800 --> 00:17:33,640
Request that body.

302
00:17:33,830 --> 00:17:40,360
Email plus clothing, closing parentheses like that.

303
00:17:40,660 --> 00:17:42,430
And that could be our query.

304
00:17:42,790 --> 00:17:47,110
So this would turn into, let's say, request that body.

305
00:17:47,110 --> 00:17:48,460
That email is Dave at Dave.

306
00:17:49,420 --> 00:17:54,580
It would turn into Dave at Dave like that.

307
00:17:55,300 --> 00:17:58,600
So we could we could also do this query this way.

308
00:17:58,990 --> 00:18:01,960
And then all we would need to do is pass.

309
00:18:03,560 --> 00:18:06,050
Q Right here, if that makes sense.

310
00:18:06,050 --> 00:18:07,640
So that's another way of doing it.

311
00:18:07,760 --> 00:18:14,270
But this is kind of the standard way of doing it with the MySQL library or the MySQL package that we've

312
00:18:14,270 --> 00:18:14,870
been using.

313
00:18:14,870 --> 00:18:16,600
So I'm going to get rid of that.

314
00:18:16,610 --> 00:18:21,800
But either way, maybe the syntax is more unfamiliar if you don't know JavaScript.

315
00:18:21,800 --> 00:18:29,000
But this is what we already saw as to how to insert a single piece of information, a single row into

316
00:18:29,000 --> 00:18:31,790
a table, and it's working great.