1 00:00:02,100 --> 00:00:05,260 Okay, so let's get started with that. 2 00:00:05,260 --> 00:00:09,270 And let's get started with defining some routes, 3 00:00:09,270 --> 00:00:11,060 because if we don't do that, 4 00:00:11,060 --> 00:00:16,059 we won't be able to visit any site on this overall website. 5 00:00:16,140 --> 00:00:18,830 Hence, I'll add this routes folder 6 00:00:18,830 --> 00:00:21,710 and it should be named routes because in app.js, 7 00:00:21,710 --> 00:00:24,500 I'm importing from the routes folder. 8 00:00:24,500 --> 00:00:29,213 And in there, we wanna create this blog.js file like this. 9 00:00:30,980 --> 00:00:35,270 Now in this blog.js file, I wanna set up an Express router 10 00:00:35,270 --> 00:00:39,140 as we learned in the previous course sections. 11 00:00:39,140 --> 00:00:41,530 So there in the Advanced Backend 12 00:00:41,530 --> 00:00:44,220 and Express.js course section, 13 00:00:44,220 --> 00:00:46,040 you learned that Express.js 14 00:00:46,040 --> 00:00:48,720 has this built-in router feature 15 00:00:48,720 --> 00:00:53,050 which can be used by importing Express like this, 16 00:00:53,050 --> 00:00:54,980 and then creating a router 17 00:00:54,980 --> 00:00:57,943 by calling express.Router as a function. 18 00:00:59,550 --> 00:01:01,050 And then on this router, 19 00:01:01,050 --> 00:01:05,010 you learned you can register get or post routes 20 00:01:05,010 --> 00:01:07,480 with the get or post methods. 21 00:01:07,480 --> 00:01:10,140 And you can then define for which path 22 00:01:10,140 --> 00:01:12,123 which route should become active. 23 00:01:13,090 --> 00:01:16,250 And then once you added all these route definitions, 24 00:01:16,250 --> 00:01:20,793 you can export the configured router with module.exports. 25 00:01:21,730 --> 00:01:23,850 And it's this configured router 26 00:01:23,850 --> 00:01:27,710 that will be picked up in app.js here in line five 27 00:01:27,710 --> 00:01:30,550 and that will be used in line 16 here 28 00:01:30,550 --> 00:01:33,600 so that all the routes we define in blog.js 29 00:01:33,600 --> 00:01:36,683 are applied for every incoming request. 30 00:01:39,070 --> 00:01:44,070 So therefore in blog.js, I will now define a first route. 31 00:01:46,460 --> 00:01:49,430 And the first route I wanna define 32 00:01:49,430 --> 00:01:52,170 is actually the root route. 33 00:01:52,170 --> 00:01:57,170 What happens if a user just visits our domain.com/nothing 34 00:01:58,640 --> 00:02:03,640 so here on our local machine local host 3000/nothing? 35 00:02:04,790 --> 00:02:08,863 3000 because I'm listening on port 3000 here. 36 00:02:09,880 --> 00:02:13,630 Hence, the first route is a get route to /nothing. 37 00:02:13,630 --> 00:02:16,550 And then we can define this anonymous function 38 00:02:16,550 --> 00:02:19,440 that takes this request and response object, 39 00:02:19,440 --> 00:02:23,910 these two objects, and here we can then return a view 40 00:02:23,910 --> 00:02:26,983 or render a view to be precise. 41 00:02:28,220 --> 00:02:30,650 But to be very precise, 42 00:02:30,650 --> 00:02:34,800 I actually don't wanna serve anything on /nothing. 43 00:02:34,800 --> 00:02:36,890 Instead, I'll duplicate this 44 00:02:36,890 --> 00:02:41,000 and I wanna handle the requests to /posts. 45 00:02:41,000 --> 00:02:45,310 And here, I then wanna render this all posts view, 46 00:02:45,310 --> 00:02:49,193 this posts-list.ejs file to be precise. 47 00:02:51,300 --> 00:02:55,450 So it's here in /posts in this second route here 48 00:02:55,450 --> 00:02:57,490 where I will use this response object 49 00:02:57,490 --> 00:03:00,220 to call the built-in render method 50 00:03:00,220 --> 00:03:05,220 and render the posts-list.ejs file, 51 00:03:05,400 --> 00:03:10,400 without .ejs here as you learned, just the name of the view. 52 00:03:10,550 --> 00:03:13,530 And then Express will automatically look for this file 53 00:03:13,530 --> 00:03:17,640 in the views folder as explained early in the course. 54 00:03:17,640 --> 00:03:20,820 So here, I will then return this list of posts, 55 00:03:20,820 --> 00:03:22,100 though at the moment, of course, 56 00:03:22,100 --> 00:03:25,130 we don't really have any posts yet for the moment, 57 00:03:25,130 --> 00:03:26,843 it will just be an empty view. 58 00:03:28,430 --> 00:03:32,690 But if a user just visits /nothing instead of /posts, 59 00:03:32,690 --> 00:03:36,980 I simply wanna redirect the user to /posts. 60 00:03:36,980 --> 00:03:39,240 So therefore, here in this first route, 61 00:03:39,240 --> 00:03:44,240 we can use res.redirect to issue a redirect 62 00:03:44,440 --> 00:03:47,560 and redirect the user to /posts 63 00:03:47,560 --> 00:03:52,180 so that you can visit either /nothing or /posts, 64 00:03:52,180 --> 00:03:54,320 you will ultimately end up on /posts 65 00:03:55,380 --> 00:03:58,503 and view that posts-list template here. 66 00:04:00,940 --> 00:04:03,670 And hence, if we save all of that 67 00:04:03,670 --> 00:04:06,363 and we open that terminal again, 68 00:04:08,010 --> 00:04:11,980 we can now go there and run npm start 69 00:04:12,890 --> 00:04:15,100 to invoke this start script, 70 00:04:15,100 --> 00:04:17,959 which is defined in the package.json file, 71 00:04:17,959 --> 00:04:21,029 which will use nodemon to run our app.js file 72 00:04:21,029 --> 00:04:23,150 and spin up that server. 73 00:04:23,150 --> 00:04:24,593 So that's what I'll do now. 74 00:04:25,500 --> 00:04:30,500 And with that done, if you visit local host 3000, 75 00:04:30,620 --> 00:04:34,400 you should automatically be redirected to /posts 76 00:04:34,400 --> 00:04:37,683 and you view this page, which doesn't have any posts yet. 77 00:04:38,550 --> 00:04:40,560 Now, I'm zoomed in quite a bit here. 78 00:04:40,560 --> 00:04:42,560 Otherwise, it would look like this. 79 00:04:42,560 --> 00:04:46,010 And please also note that I haven't defined any styles 80 00:04:46,010 --> 00:04:50,000 for a mobile view here since this is not primarily 81 00:04:50,000 --> 00:04:53,620 about the styling or the mobile usability, 82 00:04:53,620 --> 00:04:56,870 but instead it really just is about MySQL 83 00:04:56,870 --> 00:04:58,623 and working with SQL. 84 00:04:59,740 --> 00:05:02,530 So now this works and we can view this page 85 00:05:02,530 --> 00:05:05,050 and that's a great first step. 86 00:05:05,050 --> 00:05:06,743 Now, how should we continue? 87 00:05:07,610 --> 00:05:11,270 Of course, it would be nice to view a couple of posts here, 88 00:05:11,270 --> 00:05:12,840 but for that to happen, 89 00:05:12,840 --> 00:05:15,933 we first of all, need to be able to create posts. 90 00:05:16,970 --> 00:05:20,730 So therefore, here if I click create post, 91 00:05:20,730 --> 00:05:24,570 that tries to load /new-post. 92 00:05:24,570 --> 00:05:29,570 It tries to load local host 3000/new-post. 93 00:05:29,570 --> 00:05:32,230 But of course, we don't handle that route yet, 94 00:05:32,230 --> 00:05:34,423 which is why I'm getting this error. 95 00:05:35,740 --> 00:05:38,730 Therefore, back in blog.js, 96 00:05:38,730 --> 00:05:41,580 if I shrink this terminal but I'll keep it open 97 00:05:41,580 --> 00:05:45,470 to keep this process running, back in blog.js, 98 00:05:45,470 --> 00:05:48,950 we can add a third route here, 99 00:05:48,950 --> 00:05:52,550 still a get route because it's still a URL 100 00:05:52,550 --> 00:05:56,490 which will just be entered into the URL bar of the browser. 101 00:05:56,490 --> 00:06:00,510 Here, the path we wanna handle is /new-post 102 00:06:00,510 --> 00:06:01,440 because in the end, 103 00:06:01,440 --> 00:06:05,370 that's the path this link tried to lead to. 104 00:06:05,370 --> 00:06:07,240 Of course, you could handle a different path, 105 00:06:07,240 --> 00:06:10,560 but then you have to change the link in your template. 106 00:06:10,560 --> 00:06:12,820 So here it's /new-post 107 00:06:12,820 --> 00:06:15,620 and then we got this anonymous function again 108 00:06:15,620 --> 00:06:18,440 with the request and response objects. 109 00:06:18,440 --> 00:06:22,290 And in here, we don't wanna talk to the database 110 00:06:22,290 --> 00:06:24,640 and create a new-post yet. 111 00:06:24,640 --> 00:06:27,560 Instead, we wanna display the page that allows the user 112 00:06:27,560 --> 00:06:30,260 to enter the data for the new-post 113 00:06:30,260 --> 00:06:32,280 because storing the new-post 114 00:06:32,280 --> 00:06:34,420 will then be a second step thereafter. 115 00:06:34,420 --> 00:06:36,680 The first step is to display a page 116 00:06:36,680 --> 00:06:39,670 where the post data can be entered. 117 00:06:39,670 --> 00:06:42,040 And such a page exists here. 118 00:06:42,040 --> 00:06:44,740 It's this create-post.ejs file 119 00:06:44,740 --> 00:06:48,540 which renders a form with a couple of form inputs, 120 00:06:48,540 --> 00:06:52,110 basically an input and another input in a text area, 121 00:06:52,110 --> 00:06:55,330 and then a dropdown where we can select the author. 122 00:06:55,330 --> 00:06:57,530 That will become interesting soon. 123 00:06:57,530 --> 00:07:01,900 But for the moment, it's just this dummy skeleton page 124 00:07:01,900 --> 00:07:04,200 which is missing some crucial data, 125 00:07:04,200 --> 00:07:07,733 which I wanna render here if we visit new-post. 126 00:07:08,590 --> 00:07:10,820 So we can response.render here 127 00:07:10,820 --> 00:07:15,563 and then render this create-post template. 128 00:07:17,550 --> 00:07:21,030 And with that, if we now save that and reload, 129 00:07:21,030 --> 00:07:24,000 this local host 3000 new post page, 130 00:07:24,000 --> 00:07:25,753 we should now see that form, 131 00:07:26,700 --> 00:07:30,460 but this form is now not fully functional 132 00:07:30,460 --> 00:07:33,830 because whilst we could enter some data here, 133 00:07:33,830 --> 00:07:36,000 this dropdown doesn't work. 134 00:07:36,000 --> 00:07:37,950 It is not a dropdown. 135 00:07:37,950 --> 00:07:40,100 If you click it, nothing happens. 136 00:07:40,100 --> 00:07:44,450 And it should work, it showed display a list of authors 137 00:07:44,450 --> 00:07:47,100 that is fetched from our database 138 00:07:47,100 --> 00:07:50,180 because we are storing authors in our database. 139 00:07:50,180 --> 00:07:53,400 We created some initial authors a couple of minutes ago, 140 00:07:53,400 --> 00:07:56,740 and I wanna fetch those offers from the database 141 00:07:56,740 --> 00:08:01,050 and populate this dropdown with that author data. 142 00:08:01,050 --> 00:08:04,830 And that's now first time we'll interact with the database 143 00:08:04,830 --> 00:08:07,230 from inside our Node.js code 144 00:08:07,230 --> 00:08:11,690 because now we need dynamic data that's stored in a database 145 00:08:11,690 --> 00:08:14,600 to present it to the visitor of the website. 146 00:08:14,600 --> 00:08:17,703 To be precise, to present it on this page here.