1 00:00:00,150 --> 00:00:01,250 Welcome back. 2 00:00:01,290 --> 00:00:08,310 So this video is a continuation of the last video where we did a conceptual overview of this dog demo 3 00:00:08,310 --> 00:00:11,850 app and we talked about the TO GET request routes. 4 00:00:12,180 --> 00:00:15,110 So again to reiterate same expectation to apply. 5 00:00:15,360 --> 00:00:21,690 You do not need to understand 99 percent of this code if you can just treat things as conceptual blocks 6 00:00:21,840 --> 00:00:29,910 and you can understand that this code here is responsible for the dogs get route and it somehow sends 7 00:00:29,910 --> 00:00:32,580 you back a page that has a bunch of dogs on it. 8 00:00:32,700 --> 00:00:34,660 That's all you need to know for now. 9 00:00:34,680 --> 00:00:36,720 The same applies for the new concepts. 10 00:00:36,720 --> 00:00:38,350 We're going to learn in this video. 11 00:00:38,370 --> 00:00:41,100 The focus is not syntax it's on concepts. 12 00:00:41,430 --> 00:00:47,070 So there's a third route down here that I didn't mention in the first video and it's slightly different 13 00:00:47,580 --> 00:00:49,450 in that it's a post route. 14 00:00:49,710 --> 00:00:57,300 So this code right here will only run when a user makes a POST request to slash create dog. 15 00:00:58,190 --> 00:01:03,870 And just to jog your memory a user can't make a POST request by typing something into the you or Albar 16 00:01:03,870 --> 00:01:04,140 . 17 00:01:04,290 --> 00:01:09,330 Ninety nine point nine nine nine percent of the time that they'll be making a POST request is through 18 00:01:09,330 --> 00:01:10,060 a form. 19 00:01:10,290 --> 00:01:12,970 So we're going to see that in action in just a little bit. 20 00:01:13,170 --> 00:01:16,880 But I can also demonstrate making a POST request through postman. 21 00:01:17,370 --> 00:01:20,190 So post requests to slash create dog. 22 00:01:20,370 --> 00:01:26,610 And what it will do is it will take the name in the breed that we send in the request which is what's 23 00:01:26,610 --> 00:01:33,280 happening right here name is request up body name breed request up body outbreed. 24 00:01:33,300 --> 00:01:39,720 So somehow in the request there is a name and a breed in this thing called the body and we're using 25 00:01:39,720 --> 00:01:41,020 that to make a new dog. 26 00:01:41,370 --> 00:01:46,920 And then we're redirecting the user back to slush dogs as a get request which will then run all of this 27 00:01:46,920 --> 00:01:50,850 code which you'll find all the dogs and render the dogs page. 28 00:01:51,120 --> 00:01:52,560 So a lot of things happening. 29 00:01:52,830 --> 00:01:58,910 Let's start at the very beginning by sending a simple post request to slash create dog. 30 00:01:59,250 --> 00:02:05,880 So let's go to postman and I'll change this over to the post and then we need to change the route to 31 00:02:05,880 --> 00:02:13,380 be localhost 3000 slash create dog and we need to make sure that the server is still going OK when it 32 00:02:13,380 --> 00:02:14,230 is. 33 00:02:14,730 --> 00:02:19,860 And then we can start by just hitting send where we're not going to send a name and a read and we'll 34 00:02:19,860 --> 00:02:22,090 see what happens. 35 00:02:23,550 --> 00:02:31,010 So if you look at what we got back it's the same dogs page where has Rustie why it Daisy Sitka. 36 00:02:31,200 --> 00:02:35,250 And then there's also an empty dog with no name and no breed. 37 00:02:35,310 --> 00:02:41,670 And if I go to my browser here and I refresh I make another get request to slash dogs which will trigger 38 00:02:41,670 --> 00:02:46,800 the code that retrieves all the dogs from the database and makes a little live for each one. 39 00:02:46,950 --> 00:02:53,100 You can see in fact we do have an empty dog in the database and that's because we didn't send any data 40 00:02:53,100 --> 00:02:53,120 . 41 00:02:53,130 --> 00:02:56,630 We didn't send a name and a breed to make our new dog with. 42 00:02:56,670 --> 00:03:01,300 So they were empty and our code just made an empty dog and saved it to the database. 43 00:03:01,500 --> 00:03:09,090 So to send the data with postman we can go over to body and then we can just type some stuff to add 44 00:03:09,090 --> 00:03:09,870 to the body. 45 00:03:10,080 --> 00:03:19,900 So we want a name to be Charlie and read and the value for Breede will be lab just like that. 46 00:03:19,920 --> 00:03:25,830 This is all we need to do through postman to make a post request that has name and breed inside of its 47 00:03:25,830 --> 00:03:26,430 body. 48 00:03:26,760 --> 00:03:28,210 And I'll hit send. 49 00:03:28,770 --> 00:03:30,630 Now you'll see the response we get. 50 00:03:30,660 --> 00:03:34,150 It's all the dogs again this time at the very end. 51 00:03:34,170 --> 00:03:36,090 We have Charlie as a lab. 52 00:03:36,270 --> 00:03:41,400 And if I refresh over here make another request I get all the dogs. 53 00:03:41,700 --> 00:03:43,100 Charlie has been added. 54 00:03:43,530 --> 00:03:46,090 Let's recap all of that in 30 seconds here. 55 00:03:46,290 --> 00:03:51,310 So I make a request a post request to create dog just another type of request. 56 00:03:51,540 --> 00:03:57,450 And in the request of body which is here I'm adding name and breed Charlie and lab. 57 00:03:57,840 --> 00:04:05,040 And then I hit send and then in my code on the server is listening for a post request to slash dog. 58 00:04:05,510 --> 00:04:11,370 And it creates a dog with the request somebody don't name and request somebody to outbreed which are 59 00:04:11,370 --> 00:04:13,730 those two things that we sent with postman. 60 00:04:14,220 --> 00:04:21,420 And then after it creates the dog it redirects us to slash dogs so it doesn't send us a page or any 61 00:04:21,420 --> 00:04:22,310 age to him. 62 00:04:22,470 --> 00:04:29,670 It actually runs the code in slash dogs right here which then finds all the dogs including the brand 63 00:04:29,670 --> 00:04:31,260 new one we just created. 64 00:04:31,380 --> 00:04:35,870 Charlie or in the previous case it was an empty dog with no name and no breed. 65 00:04:36,000 --> 00:04:40,500 It retrieves all of them and then it renders that dog's template that we saw. 66 00:04:40,680 --> 00:04:43,740 And for each one it makes us little ally. 67 00:04:44,640 --> 00:04:46,330 So a lot of things happening. 68 00:04:46,440 --> 00:04:48,060 It's listening for a POST request. 69 00:04:48,270 --> 00:04:52,650 It's adding a new dog to a database and it's redirecting us to slash dogs. 70 00:04:52,650 --> 00:04:56,170 Now let's talk about how we could do this with a form. 71 00:04:56,220 --> 00:05:01,920 Remember we can't make a POST request by hitting enter in the bar but we can make one using a form. 72 00:05:02,010 --> 00:05:05,630 So I'm going to add a form just to my dogs. 73 00:05:05,770 --> 00:05:06,240 Yes. 74 00:05:06,290 --> 00:05:07,330 At the very bottom. 75 00:05:07,410 --> 00:05:14,680 Just going to make a form tag and there are two parts to a form which will now make more sense we talked 76 00:05:14,680 --> 00:05:19,180 about them when I introduce forms originally but you didn't have much context to understand what they 77 00:05:19,180 --> 00:05:19,730 meant. 78 00:05:19,750 --> 00:05:24,170 So those two attributes are action and method. 79 00:05:24,520 --> 00:05:26,150 So I'll start with Method. 80 00:05:26,230 --> 00:05:30,780 We're making a post request and you often see this in all caps as well. 81 00:05:30,790 --> 00:05:31,750 It doesn't matter. 82 00:05:31,990 --> 00:05:38,870 And then the action is where we're making a post request which is just slash create dog. 83 00:05:39,120 --> 00:05:45,760 So whenever this form is submitted it will send a post request to create dog which is what we're expecting 84 00:05:45,750 --> 00:05:46,130 here. 85 00:05:46,150 --> 00:05:50,080 POST request create dog will run this code. 86 00:05:50,290 --> 00:05:52,210 Next we need to add our inputs. 87 00:05:52,270 --> 00:05:54,020 So we're going to have two inputs. 88 00:05:54,190 --> 00:06:01,720 Type equals text on both of them just like that and the out of place holder for this one that just says 89 00:06:01,720 --> 00:06:02,360 name. 90 00:06:02,500 --> 00:06:05,270 And then the next one will be for breed. 91 00:06:05,860 --> 00:06:14,770 And the last thing we'll do is have an input type be called submit which will be our button and if we 92 00:06:14,760 --> 00:06:20,520 refresh the page we now have a form but there's a problem. 93 00:06:20,590 --> 00:06:21,620 If I fill this out. 94 00:06:21,730 --> 00:06:30,760 So we add another dog here Skittles which can be a poodle when I hit submit it will send a post request 95 00:06:31,120 --> 00:06:32,870 to slash create dog. 96 00:06:33,190 --> 00:06:37,450 But watch when I do that we end up with an empty dog. 97 00:06:37,810 --> 00:06:44,350 And that's because even though I have two inputs I haven't told the browser what the name of those inputs 98 00:06:44,350 --> 00:06:44,940 are. 99 00:06:45,400 --> 00:06:53,140 And this one needs to be called name which is a little confusing name because name and this one needs 100 00:06:53,130 --> 00:06:56,870 to be breed and so does a placeholder. 101 00:06:56,880 --> 00:07:03,250 So now what we've done is by adding this name attribute we've told the browser when the user submitted 102 00:07:03,250 --> 00:07:08,600 this form send a post request to create dog with two pieces of data. 103 00:07:08,920 --> 00:07:14,920 Name should be equal to whatever's in this input and breed is equal to whatever's in this input as well 104 00:07:14,920 --> 00:07:15,430 . 105 00:07:15,490 --> 00:07:19,040 We'll be spending tons of time writing forms and dealing with the different attributes. 106 00:07:19,240 --> 00:07:20,760 So don't get too caught up in that. 107 00:07:20,920 --> 00:07:24,810 But what's important now is that we are adding data to the body. 108 00:07:24,820 --> 00:07:33,310 And if I refresh and add in Skittles who is a poodle and now I had submit you can see that it sent a 109 00:07:33,310 --> 00:07:39,260 post request and you can see that right here post to slash create dog. 110 00:07:39,880 --> 00:07:46,410 And then what happened is instead of that create dog right here it created a dog with the data from 111 00:07:46,420 --> 00:07:48,370 the form the name and the breed. 112 00:07:48,820 --> 00:07:54,060 And then after it created that dog and saved the database doesn't really matter how that works. 113 00:07:54,070 --> 00:07:56,460 But it just works. 114 00:07:56,470 --> 00:08:03,210 Then we redirect to slash dogs which is why there's actually a second little thing printed out here 115 00:08:03,220 --> 00:08:08,370 that says a get request was made to slash dogs even though I didn't actually hit enter. 116 00:08:08,380 --> 00:08:14,290 What happened is when I made a request to slash create dog as a post at the end of that it actually 117 00:08:14,290 --> 00:08:17,190 makes another request for me to slash dogs. 118 00:08:17,440 --> 00:08:23,970 And then that finds all the dogs and then it renders the dogs template which we see here and then we 119 00:08:23,980 --> 00:08:26,750 get the form at the bottom and all the dog lies. 120 00:08:26,830 --> 00:08:28,830 And that's why we see this here. 121 00:08:28,890 --> 00:08:35,580 So if you pay really close attention to this icon right here you'll actually see so at another dog named 122 00:08:35,590 --> 00:08:42,530 Snicker's keeping with the candy theme and snickers can be a lab as well. 123 00:08:42,750 --> 00:08:44,230 When I hit submit. 124 00:08:44,230 --> 00:08:46,180 Watch this very closely. 125 00:08:46,170 --> 00:08:47,390 It's going to be really quick. 126 00:08:47,800 --> 00:08:49,900 But it changed for just an instant. 127 00:08:50,200 --> 00:08:54,900 And that's important because it shows that when I make a request it actually takes me away from this 128 00:08:54,900 --> 00:09:00,180 page and then we're being redirected back here just super fast so we're not just staying on this page 129 00:09:00,190 --> 00:09:06,370 the whole time it actually takes us away for an instant and then redirects us back and shows us this 130 00:09:06,370 --> 00:09:08,980 content and that's what's happening here. 131 00:09:08,980 --> 00:09:14,000 When you make a request to slash create dog then it redirects us to slash dogs. 132 00:09:14,160 --> 00:09:19,980 And then inside dogs it renders us the dog's template which is how we see all of this in the browser 133 00:09:20,000 --> 00:09:20,350 . 134 00:09:20,670 --> 00:09:20,930 OK. 135 00:09:20,950 --> 00:09:22,350 So we covered a lot there. 136 00:09:22,360 --> 00:09:24,850 Let me just point out the important parts. 137 00:09:24,850 --> 00:09:31,480 One is that inside of our server code we can distinguish between a get request and a post request and 138 00:09:31,480 --> 00:09:37,500 we can do different code depending on what happened when and remember a get is to retrieve information 139 00:09:37,570 --> 00:09:42,250 and a post is to add or submit information which is what we're using up for. 140 00:09:42,390 --> 00:09:46,010 Slash create dog as a post is how you can create a new dog. 141 00:09:46,240 --> 00:09:50,860 And there are two things that must be in the request body the name and the breed. 142 00:09:50,980 --> 00:09:53,710 And if they're not there it will make an empty dog. 143 00:09:54,000 --> 00:10:00,100 But whatever type of dog it makes it then redirects us to slash dogs which then runs all this code. 144 00:10:00,550 --> 00:10:05,680 And the other important thing is that when we submit this there's an instantaneous refresh. 145 00:10:05,670 --> 00:10:10,890 It's really really quick but it still is a refresh where we're making a request somewhere else. 146 00:10:11,020 --> 00:10:15,250 Just like if I did this and I hit Enter we're actually making another request. 147 00:10:15,280 --> 00:10:16,500 Same idea here. 148 00:10:16,680 --> 00:10:17,880 When I hit submit. 149 00:10:18,100 --> 00:10:21,060 Keep watching right here makes a request every time. 150 00:10:21,310 --> 00:10:28,440 So that's all I want to talk about around this introduction two servers and two routes and HTP. 151 00:10:28,620 --> 00:10:29,890 We're done for now. 152 00:10:29,880 --> 00:10:35,220 So next up we're going to focus on getting our developer environment set up and installing all the tools 153 00:10:35,230 --> 00:10:38,230 that you need so that we can start writing code like this.