1 00:00:00,210 --> 00:00:01,510 Well come back. 2 00:00:01,530 --> 00:00:04,700 So this is one of the more important lessons in the entire course. 3 00:00:04,890 --> 00:00:08,670 But it's also going to be very different than anything we've done thus far. 4 00:00:08,670 --> 00:00:13,260 And the reason that it's different is that I'm going to be showing you a bunch of code that you have 5 00:00:13,260 --> 00:00:18,120 never seen before and you are not expected to understand at all. 6 00:00:18,120 --> 00:00:23,730 The reason I'm doing this is I want to give you a conceptual overview of how all these pieces fit together 7 00:00:23,740 --> 00:00:23,770 . 8 00:00:23,790 --> 00:00:28,430 The database the server GET request post requests the browser. 9 00:00:28,440 --> 00:00:30,900 All of these different things requests and responses. 10 00:00:31,080 --> 00:00:35,430 I want to show all of that with a really simple working application. 11 00:00:35,430 --> 00:00:37,120 So that's what I'm going to do here. 12 00:00:37,200 --> 00:00:42,900 If I was teaching this in person this would be the point where I ask you to put your laptop down to 13 00:00:42,900 --> 00:00:43,920 close your computer. 14 00:00:44,040 --> 00:00:45,670 Obviously not a good idea here. 15 00:00:45,930 --> 00:00:50,100 But the sentiment behind that is that I don't want you to be taking notes on this. 16 00:00:50,100 --> 00:00:54,780 We're going to go over every single line and write it from scratch and make five six seven of these 17 00:00:54,780 --> 00:00:57,240 different apps using these concepts. 18 00:00:57,240 --> 00:01:03,580 So this is just about how the things fit together not the actual details of how they work. 19 00:01:03,600 --> 00:01:06,630 With that said let's go ahead and get started here. 20 00:01:07,020 --> 00:01:09,840 So this application is themed around dogs. 21 00:01:09,840 --> 00:01:11,010 It's very very simple. 22 00:01:11,010 --> 00:01:12,320 No styling at all. 23 00:01:12,420 --> 00:01:14,320 Just a few different pages. 24 00:01:14,430 --> 00:01:19,250 And the first thing we need to talk about is what this entire file is. 25 00:01:19,260 --> 00:01:21,750 So this is our server file. 26 00:01:21,750 --> 00:01:23,450 In my case it's called app dodge. 27 00:01:23,460 --> 00:01:25,720 Yes this is written in Javascript. 28 00:01:25,800 --> 00:01:30,180 And when I run this file it will actually start a server for me. 29 00:01:30,180 --> 00:01:37,560 So when I've mentioned before when we send a request to read it dot com slash search there's code on 30 00:01:37,560 --> 00:01:41,310 Reddit server that is listening for a request to read it. 31 00:01:41,310 --> 00:01:45,850 Now com slash search and then it sends you back the correct data in a response. 32 00:01:46,080 --> 00:01:50,990 When when I say there's code on Reddit server this is the kind of code we're talking about. 33 00:01:51,210 --> 00:01:56,730 So even though read is done in Python and this is javascript This is our code on the server that is 34 00:01:56,790 --> 00:02:00,620 listening for different requests and then responding with different pieces. 35 00:02:00,630 --> 00:02:05,150 There are three big chunks and this up top is just getting our application set up. 36 00:02:05,250 --> 00:02:09,370 So including the right libraries as you can see there's a few dependencies. 37 00:02:09,390 --> 00:02:11,560 Again we'll go over all of them later. 38 00:02:11,850 --> 00:02:13,570 Then we have some database stuff. 39 00:02:13,830 --> 00:02:20,910 So this is setting up our database so that our database knows every dog has a name and a breed and they're 40 00:02:20,910 --> 00:02:22,060 both strings. 41 00:02:22,470 --> 00:02:24,240 And that's all mentioned about that for now. 42 00:02:24,630 --> 00:02:28,590 And then there are these things called wraps which is where we'll spend the bulk of our time in this 43 00:02:28,590 --> 00:02:34,170 lesson before we do that though I want to point out the most important part to actually start the server 44 00:02:34,470 --> 00:02:39,040 which is at the very end here this line doesn't matter the syntax but what does matter. 45 00:02:39,050 --> 00:02:40,930 There's number here three thousand. 46 00:02:40,950 --> 00:02:46,320 What this will do is when we run this application when I run this file in my terminal it will actually 47 00:02:46,320 --> 00:02:51,860 start to server up and our application will be on port 3000. 48 00:02:51,870 --> 00:02:53,160 So let me show you what I mean. 49 00:02:53,160 --> 00:02:58,200 I'm going to start this server up by running the file again doesn't really matter what I'm doing there 50 00:02:58,200 --> 00:02:59,130 . 51 00:02:59,130 --> 00:03:03,260 And you can see I get a message serving dog demo on port 3000. 52 00:03:03,570 --> 00:03:07,650 So what I have my text editor I'm writing the code in here for my server. 53 00:03:07,860 --> 00:03:11,000 Then in my terminal I'm actually running the server. 54 00:03:11,220 --> 00:03:17,280 So now this code is being run all of this code is run and this line in particular started a server on 55 00:03:17,280 --> 00:03:18,840 port three thousand. 56 00:03:18,870 --> 00:03:26,850 So if I go to port three thousand now and the way I get there is local host Colan 3000 I see something 57 00:03:26,850 --> 00:03:28,620 that says home page. 58 00:03:28,980 --> 00:03:34,570 Let's talk about how I'm getting that home page HMO if we view page source. 59 00:03:34,950 --> 00:03:42,150 You can see all that I got as a response was a single H-1 that says home page and that's it. 60 00:03:42,150 --> 00:03:46,620 So if I go back to my server here there are a few things I want to point out. 61 00:03:46,770 --> 00:03:51,870 The first one is that in my terminal where the server has started there's a little message that was 62 00:03:51,870 --> 00:03:52,620 printed out. 63 00:03:52,780 --> 00:03:59,060 And what this tells us is that someone made a get request which is what this says here to the you arole 64 00:03:59,150 --> 00:04:00,340 slash. 65 00:04:00,630 --> 00:04:02,750 So localhost 3000 slash. 66 00:04:02,820 --> 00:04:04,160 So there's nothing afterward. 67 00:04:04,530 --> 00:04:10,560 We call this the root path or just route which is basically what we want our home page to be. 68 00:04:10,560 --> 00:04:15,840 So again I went to localhost 3000 and hit enter. 69 00:04:16,200 --> 00:04:24,120 And that got me some code but if I went to localhost 3000 slash dogs that gives me some different stuff 70 00:04:24,120 --> 00:04:26,190 back in if I view the page source on this 71 00:04:29,760 --> 00:04:35,040 can see if we get some more content that's different than the content we got the first time and that's 72 00:04:35,040 --> 00:04:38,430 because this is a different row or a different route. 73 00:04:38,430 --> 00:04:42,670 So in this case I wasn't just asking for Slash. 74 00:04:42,840 --> 00:04:44,840 I was asking for Slash dogs. 75 00:04:45,210 --> 00:04:51,510 And if you look in the terminal output you can see there's a difference between a get request to slash 76 00:04:51,990 --> 00:04:54,570 or a get request to slash dogs. 77 00:04:54,570 --> 00:04:59,630 This is just showing me so I can show you what's happening but this isn't logic or anything. 78 00:04:59,640 --> 00:05:03,010 It's just a window into the requests that are being made. 79 00:05:03,390 --> 00:05:05,330 OK so that's the request side of things. 80 00:05:05,430 --> 00:05:08,760 When I hit enter I make a request. 81 00:05:08,760 --> 00:05:09,720 Same thing here. 82 00:05:09,930 --> 00:05:12,430 I'm just making them to two different places. 83 00:05:12,780 --> 00:05:16,680 And of course I can make those get requests with postman as well. 84 00:05:16,680 --> 00:05:21,250 So let's make and get request to localhost 3000 just like that. 85 00:05:21,300 --> 00:05:25,890 Take a moment and think about what you expect us to see when I hit send. 86 00:05:27,100 --> 00:05:34,590 There we go I just get the exact same H-1 and if I do local host 3000 slash dogs which is a get request 87 00:05:35,010 --> 00:05:42,240 and I hit send I get the same HD mail that we got when I made a get request in the browser by hitting 88 00:05:42,240 --> 00:05:43,490 enter. 89 00:05:43,500 --> 00:05:47,790 Now let's talk about the logic that makes all of this happen on the server side. 90 00:05:48,110 --> 00:05:54,300 So I'm going to go back to sublime and focus on these three parts right here and in particular these 91 00:05:54,300 --> 00:05:54,940 two. 92 00:05:55,320 --> 00:06:00,230 I know I'm a broken record on this topic but the syntax is not the important part. 93 00:06:00,270 --> 00:06:04,960 We will be spending so much time on actually writing these routes that that's not significant. 94 00:06:05,010 --> 00:06:13,050 What is significant is that in this first little chunk this code is listening for a get request to slash 95 00:06:13,860 --> 00:06:15,450 so get slash. 96 00:06:15,720 --> 00:06:20,400 And when that happens we are rendering a page called home. 97 00:06:20,400 --> 00:06:27,630 So again when a get request is made to slash localhost 3000 slash nothing else then we're going to render 98 00:06:27,630 --> 00:06:29,690 something called home. 99 00:06:30,030 --> 00:06:32,660 And over here I have the file called home. 100 00:06:32,670 --> 00:06:34,560 Doesn't matter what the Ejay yess. 101 00:06:34,860 --> 00:06:38,360 And inside of it there's an H1 that says homepage. 102 00:06:38,430 --> 00:06:45,980 So let's add something else in there a paragraph low just like that and save. 103 00:06:46,720 --> 00:06:53,910 And now when they make a get request only a get request to slash I get the contents of that file home 104 00:06:54,060 --> 00:06:58,740 sent back to me and in order for those changes to work I actually have to restart my server. 105 00:06:58,800 --> 00:07:06,690 So I'll start now and watch I'll put this over on the side and I'll go back to Chrome get my server 106 00:07:06,690 --> 00:07:07,590 there again. 107 00:07:08,220 --> 00:07:11,730 I'm going to make a get request to localhost 3000. 108 00:07:11,970 --> 00:07:16,380 As you can see it tells me a get request was made to slash. 109 00:07:16,830 --> 00:07:19,530 And we got this content back. 110 00:07:19,590 --> 00:07:26,480 So again our code here is listening for we get requests slash and deciding what file to send back. 111 00:07:26,490 --> 00:07:32,580 Now here's another more complicated version of that where we're listening for a get request to slash 112 00:07:32,670 --> 00:07:33,550 dogs. 113 00:07:33,930 --> 00:07:36,250 And then there's some other code that's happening here. 114 00:07:36,390 --> 00:07:37,740 And I'll just read a comment. 115 00:07:37,740 --> 00:07:44,930 All that happens here is get all the dogs from the database so I have some in our database already. 116 00:07:45,190 --> 00:07:54,350 And then the next part is render the dogs file and we'll just leave it at that for now. 117 00:07:54,390 --> 00:07:59,430 So we're getting all the dogs in the database and rendering the dogs file which is right here. 118 00:07:59,710 --> 00:08:01,390 And this one looks a little bit different. 119 00:08:01,410 --> 00:08:02,940 It's not just him. 120 00:08:02,970 --> 00:08:05,740 We have some weird stuff here that we haven't seen before. 121 00:08:06,030 --> 00:08:13,150 But at the end of the day what happens is when I go to slash dogs our app is listening for a get request 122 00:08:13,150 --> 00:08:14,230 to slash dogs. 123 00:08:14,340 --> 00:08:19,980 When it gets one it retrieves all of the dogs in the database and each one has a name and or breed and 124 00:08:19,980 --> 00:08:22,330 then it makes a little lie for each one. 125 00:08:22,470 --> 00:08:25,600 So each one of these is an ally with a name and a breed. 126 00:08:26,100 --> 00:08:32,640 So again we have two routes slash as a get request and slash dogs as a get request and we get two different 127 00:08:32,640 --> 00:08:38,740 files and a little bit of logic when we go to slash dogs versus when we just go to slash. 128 00:08:38,880 --> 00:08:41,910 There's no logic happening nothing's happening with the database. 129 00:08:41,910 --> 00:08:44,530 It's just giving us a static page. 130 00:08:44,880 --> 00:08:46,140 But this is not static. 131 00:08:46,260 --> 00:08:49,260 This depends on what's coming from the database. 132 00:08:50,160 --> 00:08:56,830 Go back to the server here to our code and I'll talk a little bit about this line here. 133 00:08:57,480 --> 00:09:02,910 So we're rendering a page a template called Dogs which is what's written right here dogs. 134 00:09:03,120 --> 00:09:13,830 Yes but we're passing data to this template because this doesn't have an ally here that says resti dash 135 00:09:14,230 --> 00:09:20,970 mutt and it doesn't have another one afterwards in the template that says why it dash golden as you 136 00:09:20,970 --> 00:09:23,890 can see that's that's what we're getting in the browser. 137 00:09:24,000 --> 00:09:26,160 But our file doesn't have any of that. 138 00:09:26,250 --> 00:09:27,810 And that's what makes it dynamic. 139 00:09:27,840 --> 00:09:32,970 This file can be different every single time that it runs depending on what's in the database. 140 00:09:32,970 --> 00:09:39,780 So what we actually do is define a template or a pattern for what we want to happen which is for every 141 00:09:39,780 --> 00:09:48,150 dog dog stuff for each we want to make an ally where we're going to make the name bold or strong dash 142 00:09:48,300 --> 00:09:51,000 the breed just as plain text. 143 00:09:51,000 --> 00:09:55,800 So that's how we end up with this for every dog in the database that we retrieve we're going to loop 144 00:09:55,800 --> 00:10:02,610 through and make a single ally with the name in bold dash that breed not in bold. 145 00:10:02,610 --> 00:10:03,780 So leave it at that. 146 00:10:03,780 --> 00:10:05,010 Let's summarize now. 147 00:10:05,160 --> 00:10:10,140 So we have our code that creates the server right here. 148 00:10:10,140 --> 00:10:13,820 All of this is the only code responsible for making our server. 149 00:10:13,950 --> 00:10:16,190 We have some set up code doesn't really matter. 150 00:10:16,200 --> 00:10:18,820 Some database code doesn't matter much either. 151 00:10:18,840 --> 00:10:21,320 And then these two routes and those do matter a lot. 152 00:10:21,630 --> 00:10:27,240 So this is how we get different code and different files depending on the you are all that we request 153 00:10:27,780 --> 00:10:30,180 we make a request to slash as it get request. 154 00:10:30,330 --> 00:10:38,040 We get one file home we make a get request to slash dogs and a little bit more happens behind the scenes 155 00:10:38,040 --> 00:10:38,280 . 156 00:10:38,430 --> 00:10:42,720 It finds all the dogs in the database and then it renders that dogs file. 157 00:10:42,930 --> 00:10:49,170 But the dogs file is dynamic because it takes in a bunch of dogs and for each one. 158 00:10:49,170 --> 00:10:50,410 It makes an ally. 159 00:10:50,520 --> 00:10:55,230 So if we had 10000 dogs in the database we would end up with 10000 allies. 160 00:10:55,920 --> 00:11:01,770 And the very last point I want to make is that we have a text editor here that I have a terminal where 161 00:11:01,770 --> 00:11:07,650 I'm running the server and then I'm going in the browser and visiting that web page by making a request 162 00:11:07,650 --> 00:11:08,490 . 163 00:11:08,520 --> 00:11:10,370 Those are the three tools that we need. 164 00:11:10,410 --> 00:11:16,830 So those three things the text editor where we write the code at terminal or somewhere where we can 165 00:11:16,830 --> 00:11:19,780 start the server and have it listening. 166 00:11:20,100 --> 00:11:24,420 And then finally a browser where we can actually go and make requests. 167 00:11:24,630 --> 00:11:29,940 So we don't have to use a browser We could use postman but nobody uses postman to actually interact 168 00:11:29,940 --> 00:11:34,540 with our web page in the next few videos when we start writing our own web applications. 169 00:11:34,560 --> 00:11:36,780 We'll have those three same tools. 170 00:11:36,960 --> 00:11:42,440 So we're going to have a text editor a browser and a terminal or somewhere to run the server.