1
00:00:00,390 --> 00:00:01,300
Welcome back.

2
00:00:01,560 --> 00:00:06,300
In this video we're going to take you through the steps of creating a simple application very very simple

3
00:00:06,570 --> 00:00:12,150
and the goal here is to show you how POST requests work and express how we create routes that are listening

4
00:00:12,150 --> 00:00:18,810
for post requests then how we can test them with postman and then see how we can write a form on a different

5
00:00:18,810 --> 00:00:24,100
express template and have that form make a POST request to our express app.

6
00:00:24,180 --> 00:00:29,010
So as I mentioned we are going to make a simple application together and I am going to start from scratch

7
00:00:29,190 --> 00:00:31,380
and install and include Express.

8
00:00:31,380 --> 00:00:34,180
And then we'll get going on the actual application logic.

9
00:00:34,410 --> 00:00:42,990
So I'm going to start now and just make a new directory which I'll call post request demo CD into that

10
00:00:43,830 --> 00:00:56,310
and we'll run NPM in it and we'll just hit enter a few times change entry point.

11
00:00:56,560 --> 00:00:57,310
OK.

12
00:00:57,900 --> 00:00:59,310
There we go.

13
00:00:59,310 --> 00:01:07,010
We have our package that Jason let's now install express dash dash save.

14
00:01:08,580 --> 00:01:14,590
And while we're here let's NPM install E.J. s as well and save that.

15
00:01:15,080 --> 00:01:15,650
OK.

16
00:01:15,870 --> 00:01:17,450
Now let's create our app.

17
00:01:17,510 --> 00:01:18,750
Yes.

18
00:01:19,350 --> 00:01:26,020
And then we will open that up and add in our basic expressed code we need.

19
00:01:26,190 --> 00:01:34,470
So we're going to import it with require and then create an app variable where we execute.

20
00:01:34,470 --> 00:01:45,650
EXPRESS And while we're here we'll also do app does set you engine to be Ejay Yes and I'll save that

21
00:01:45,650 --> 00:01:45,880
.

22
00:01:46,050 --> 00:01:52,650
And then we also do our apt up listen at the bottom instead of here will do you process that.

23
00:01:52,660 --> 00:01:55,630
And we got it.

24
00:01:56,010 --> 00:02:01,750
And to process ENFP IP and our callback function.

25
00:02:01,980 --> 00:02:10,110
And lastly I'll just do a very simple come to the log server started.

26
00:02:10,890 --> 00:02:11,180
OK.

27
00:02:11,190 --> 00:02:12,510
So we have that set up.

28
00:02:12,570 --> 00:02:14,550
Now let's create our brute route

29
00:02:17,400 --> 00:02:26,850
just like that and we'll just render a template for now restaurant render called home just like that

30
00:02:27,270 --> 00:02:28,460
and save.

31
00:02:28,530 --> 00:02:30,020
Now let's make that template.

32
00:02:30,120 --> 00:02:37,650
So we need a used directory make directory views and you need to touch your file views slash home.

33
00:02:37,760 --> 00:02:38,490
Yes.

34
00:02:38,760 --> 00:02:47,540
And then open that file and inside of there we'll do a simple H-1 that says home page just like that

35
00:02:48,390 --> 00:02:49,850
and we'll make sure that works.

36
00:02:50,070 --> 00:02:58,350
So let's run node Apalachee us go back here refresh and we get home page.

37
00:02:58,790 --> 00:03:05,270
OK so we have the basic skeleton set up we have express included we have Ejaz included.

38
00:03:05,340 --> 00:03:09,260
We've set the default view engine and we have our route route.

39
00:03:09,690 --> 00:03:14,730
The app that we're going to make is basically a list of friends or friends list that you can then go

40
00:03:14,730 --> 00:03:18,780
in and through a form you can add a new friend to your list.

41
00:03:18,960 --> 00:03:24,510
And this could be anything friends or to do's or contacts or dogs just something that we're going to

42
00:03:24,510 --> 00:03:28,610
have a list of that we then can create a new one using a form.

43
00:03:28,800 --> 00:03:37,920
So we'll do friends and we're going to add in app and get slash friends and this will be the page the

44
00:03:37,920 --> 00:03:41,410
template that shows a list of friends.

45
00:03:42,990 --> 00:03:48,810
And instead of here are going to do a redstart render and we'll just call it friends and now we need

46
00:03:48,810 --> 00:03:50,120
to create that template.

47
00:03:50,400 --> 00:04:00,430
So we'll do touch views slash friend that Ejay us and then open that file just like that.

48
00:04:00,790 --> 00:04:10,460
And inside of here we'll add another H-1 just right friends list goes here and we'll run our server

49
00:04:11,250 --> 00:04:12,720
make sure that it works.

50
00:04:12,930 --> 00:04:17,290
If we go to slash friends we get friends list goes here.

51
00:04:17,610 --> 00:04:18,270
OK.

52
00:04:18,270 --> 00:04:21,010
So what we're going to do is display a list of friends.

53
00:04:21,210 --> 00:04:22,890
And so we need to create that list.

54
00:04:22,890 --> 00:04:23,970
We need the data.

55
00:04:24,210 --> 00:04:32,320
So I'm going to create an array of friends names and it's going to be very simple just far friends equals

56
00:04:33,030 --> 00:04:46,080
and we'll just add in a few names here like Tony and Justin Pierre and Lilly.

57
00:04:46,290 --> 00:04:46,860
OK.

58
00:04:47,140 --> 00:04:52,450
So we have an array of friends and then we're going to pass that array of friends through to our friends

59
00:04:52,450 --> 00:04:57,580
template where we'll then loop through and display each friend as a list item.

60
00:04:57,640 --> 00:04:59,220
So we need to pass that in.

61
00:04:59,300 --> 00:05:02,770
Remember it's an object and we have two things need to do.

62
00:05:02,770 --> 00:05:09,340
We need to give it a name or a property that we'll use to look it up in the view which I would just

63
00:05:09,340 --> 00:05:15,040
call friends and our data that we're passing in as also friends which is confusing when you're just

64
00:05:15,040 --> 00:05:15,730
starting out.

65
00:05:15,760 --> 00:05:20,800
But this is what you'll see most often where you just use the same name but remember this can be anything

66
00:05:20,800 --> 00:05:21,560
at all.

67
00:05:21,580 --> 00:05:24,810
And this refers to our friend array right here.

68
00:05:25,150 --> 00:05:31,560
OK so now let's go to the template friend study genius and add in our loop and I'm going to do a for

69
00:05:31,560 --> 00:05:32,070
each.

70
00:05:32,290 --> 00:05:36,690
So I'll just write the regular javascript first without the brackets without the Ejay us.

71
00:05:36,820 --> 00:05:47,380
So we have friends for each function and our function will take friend parameter there and then we have

72
00:05:47,470 --> 00:05:50,760
our opening closing curly braces just like that.

73
00:05:50,920 --> 00:05:59,230
And instead of here what we'll do is make an ally for each one that says I have a friend just like that

74
00:05:59,230 --> 00:05:59,620
.

75
00:05:59,610 --> 00:06:05,870
Now let's go back and add in the phrases that we need no equal sign or remember this is just for logic

76
00:06:05,880 --> 00:06:06,120
.

77
00:06:06,280 --> 00:06:09,800
We don't want anything to show up on these two lines.

78
00:06:09,970 --> 00:06:16,330
So we have that done and if we save and refresh we should see an ally that says I have a friend for

79
00:06:16,330 --> 00:06:21,640
every friend in that list and let's try that out make sure we don't have any errors.

80
00:06:21,880 --> 00:06:26,890
Refresh the page and we get 5 list items that say I have a friend.

81
00:06:27,530 --> 00:06:32,130
Now we'll go back again and rather than just saying I have a friend let's actually print the friend's

82
00:06:32,140 --> 00:06:32,690
name.

83
00:06:32,950 --> 00:06:39,110
So this time we do need the equal sign because we want the value that evaluated to be added to the team

84
00:06:39,250 --> 00:06:40,620
itself right here.

85
00:06:40,750 --> 00:06:47,570
We want it to be replaced with the value of a friend which is coming from right here in our for each

86
00:06:47,570 --> 00:06:47,750
.

87
00:06:47,740 --> 00:06:49,140
Again this can be anything.

88
00:06:49,140 --> 00:06:50,620
Name it whatever we want x.

89
00:06:50,720 --> 00:06:54,010
And if it put X here it will work.

90
00:06:54,430 --> 00:07:01,300
So let me just show you that refresh and we get our five friends and because X is a terrible variable

91
00:07:01,300 --> 00:07:07,090
name many go back to friend just like that to restart the server.

92
00:07:07,120 --> 00:07:10,690
One more time and you can see nothing changes.

93
00:07:10,690 --> 00:07:12,910
OK so we have this list of friends.

94
00:07:13,060 --> 00:07:16,880
Now what we're going to do is talk about setting up the post route.

95
00:07:17,110 --> 00:07:22,840
The goal in the end is to have a form at the bottom of this page and we can type in a name into that

96
00:07:22,840 --> 00:07:27,760
form and hit the submit button and it will then add a new friend to our list.

97
00:07:27,790 --> 00:07:33,340
So we'll be pushing a new name into the Friends array and then rendering this template again which will

98
00:07:33,340 --> 00:07:37,250
then add a new bullet point and new list item for that newly added friend.

99
00:07:37,390 --> 00:07:43,000
We need to start by setting up a post-road and remember that we use a post Strout any time we are adding

100
00:07:43,000 --> 00:07:47,770
data to something when we're sending data through and we want to add it to the database whether we're

101
00:07:47,770 --> 00:07:53,800
signing up a user or we're creating a new comment or creating a new post or in this case a new friend

102
00:07:54,540 --> 00:07:55,400
a post route.

103
00:07:55,420 --> 00:07:59,390
Is what makes the most sense although it isn't the only option.

104
00:07:59,530 --> 00:08:02,120
For now we're going to treat it as if it is the only option.

105
00:08:02,140 --> 00:08:08,260
So get it's just for retrieving information and a post is for sending new data to be added or to be

106
00:08:08,260 --> 00:08:10,810
used somehow on the server side.

107
00:08:11,140 --> 00:08:18,790
And all we need to write is apt up post and the name of the route let's call it add friend just like

108
00:08:18,790 --> 00:08:26,290
that and it looks the same with the request and response and we'll leave it as this for now.

109
00:08:26,410 --> 00:08:31,770
And inside we'll just do a rest up send We won't make a template just RES dot send.

110
00:08:32,080 --> 00:08:41,040
You have reached the post route just like that.

111
00:08:41,080 --> 00:08:46,930
So now let's see if we can trigger this out if we can hit it add friend as a post request by using postman

112
00:08:47,030 --> 00:08:47,820
.

113
00:08:47,950 --> 00:08:55,090
So I'm going to take this URL and copy this over to postman and where we want to make a request.

114
00:08:55,090 --> 00:09:00,880
We can start by just doing sosh friends as a get request and you see we get back each team him with

115
00:09:00,880 --> 00:09:02,270
the five friends.

116
00:09:02,270 --> 00:09:08,970
But now let's make a post request and we're making it to slash add friend.

117
00:09:09,550 --> 00:09:15,130
And now if we send a post request we get a message can not post add friend and that's for a silly reason

118
00:09:15,150 --> 00:09:15,290
.

119
00:09:15,400 --> 00:09:18,490
We need to restart the server any time we add a new route.

120
00:09:18,850 --> 00:09:22,770
And now if we go back and send the request again we get a message.

121
00:09:22,930 --> 00:09:24,740
You have reached the post route.

122
00:09:24,820 --> 00:09:29,380
So we're sending in post request and we're doing it through postman rather than using a form but it's

123
00:09:29,380 --> 00:09:31,010
the same exact idea.

124
00:09:31,030 --> 00:09:32,130
It works the same way.

125
00:09:32,170 --> 00:09:36,650
We send a post request and this code is being run right here.

126
00:09:36,710 --> 00:09:42,300
OK so the next thing that we want to do is use a form to send that post request.

127
00:09:42,430 --> 00:09:48,960
So I'm going to go to the friends study each page and at the bottom a lot of form and this form will

128
00:09:48,970 --> 00:09:51,320
submit to that route.

129
00:09:51,670 --> 00:09:54,390
So remember there are two important attributes.

130
00:09:54,440 --> 00:09:57,900
There is action and then method.

131
00:09:58,540 --> 00:09:59,790
So let's start with method.

132
00:09:59,920 --> 00:10:06,780
We want to send a post request and action is the you are a whole which is slash and friend.

133
00:10:07,420 --> 00:10:10,700
And again that needs to match this rate here.

134
00:10:10,990 --> 00:10:13,440
Slash add friend as a post.

135
00:10:13,910 --> 00:10:14,620
All right.

136
00:10:14,620 --> 00:10:22,330
And instead of here we're going to have a single input type equals text and then we also want to have

137
00:10:22,330 --> 00:10:25,880
a placeholder that says name or whatever we want to put there.

138
00:10:25,900 --> 00:10:31,540
That's just the placeholder text and then we'll also add a button at the end and this will just say

139
00:10:32,260 --> 00:10:37,180
I made a new friend and save that.

140
00:10:37,890 --> 00:10:40,320
And so this will create a form for us right now.

141
00:10:40,690 --> 00:10:46,930
If I restart the server and I go back and I refresh the page I now have a form here and if we inspect

142
00:10:46,930 --> 00:10:54,430
it it has those two attributes where we have action it's ADD friend method is post and it has a single

143
00:10:54,430 --> 00:10:55,090
input.

144
00:10:55,420 --> 00:11:00,150
And if I type something into here I made a new friend today named Bob and they click.

145
00:11:00,160 --> 00:11:02,500
I made a new friend.

146
00:11:02,770 --> 00:11:04,560
You can see that we're getting that response.

147
00:11:04,570 --> 00:11:09,070
You have reached the post route which means that we are sending a post request and that we're sending

148
00:11:09,070 --> 00:11:09,980
it to the right place.

149
00:11:10,030 --> 00:11:14,140
Slash add friend but we're not doing anything in that route.

150
00:11:14,140 --> 00:11:19,570
Aside from responding with this message and what we actually want to do is take the data from the form

151
00:11:19,920 --> 00:11:21,240
you want to take Bob.

152
00:11:21,430 --> 00:11:25,990
And then we want to add it to the friends array and then we want the user to come back to this page

153
00:11:26,080 --> 00:11:28,060
where they can see Bob as new bullet point