1 00:00:00,350 --> 00:00:03,100 Welcome back to our last video on this blog. 2 00:00:03,310 --> 00:00:04,400 So we have to change. 3 00:00:04,400 --> 00:00:05,050 We're going to make. 4 00:00:05,100 --> 00:00:11,070 The first one is to implement the Express sanitiser that I mentioned which will help us with that problem 5 00:00:11,400 --> 00:00:17,760 where if for displaying HDMI Olafur actually rendering him a user could potentially enter some harmful 6 00:00:18,000 --> 00:00:20,030 javascript instead of a script hack. 7 00:00:20,130 --> 00:00:27,240 We don't want to run that code so we use sanitiser to help us with that basically takes that input and 8 00:00:27,240 --> 00:00:30,980 it removes all scripts out of it and just gives us the peer aged him out. 9 00:00:31,290 --> 00:00:33,660 And then we also want to style the index page a bit. 10 00:00:33,690 --> 00:00:38,820 It's looking a little bit rough and the last thing will do is make a small update to a restful Rhodes 11 00:00:38,820 --> 00:00:41,730 table just to make it a little more useful for you. 12 00:00:41,760 --> 00:00:44,000 So let's begin with the sanitiser. 13 00:00:44,400 --> 00:00:51,350 So I'm going to install a package called Express dash sanitiser dash dash. 14 00:00:51,390 --> 00:00:53,430 Save. 15 00:00:54,930 --> 00:00:55,660 OK. 16 00:00:55,710 --> 00:01:06,060 Now that that's done in our app yes we're going to require that so express sanitiser equals require 17 00:01:07,050 --> 00:01:12,080 express Desch sanitiser just like that. 18 00:01:12,330 --> 00:01:20,820 And then we have to tell our app to use it app use Express sanitiser and the only requirement is that 19 00:01:20,820 --> 00:01:23,690 this goes after all the parser. 20 00:01:23,730 --> 00:01:25,110 Define here. 21 00:01:25,270 --> 00:01:25,960 OK. 22 00:01:26,410 --> 00:01:27,730 And that's it. 23 00:01:27,750 --> 00:01:34,410 Now to use it you want to do it to start instead of are created when you create a new blog. 24 00:01:34,410 --> 00:01:36,180 So it's really create an update. 25 00:01:36,180 --> 00:01:39,900 Are the two places where we're taking data and saving into the database. 26 00:01:39,900 --> 00:01:47,340 Both times you want to make sure sanitize the input and instead of create what we want to sanitize is 27 00:01:47,340 --> 00:01:54,630 request up body up log of body which is kind of a mess remember request up body is whatever is coming 28 00:01:54,630 --> 00:02:01,230 from a form whatever data is in the request body which in our case is coming from a form then blog is 29 00:02:01,230 --> 00:02:03,770 because of this line right here. 30 00:02:04,240 --> 00:02:09,020 Blog title blog image and find finally blog body. 31 00:02:09,270 --> 00:02:11,020 And this is the one that we care about. 32 00:02:11,280 --> 00:02:13,500 So we have to do blog dot body. 33 00:02:13,590 --> 00:02:18,470 So it's kind of a long long name here but request body up blog temp body. 34 00:02:18,720 --> 00:02:25,740 And we're going to change it so that it's equal to request that sanitize and we're going to sanitize 35 00:02:25,740 --> 00:02:27,630 this entire thing. 36 00:02:29,100 --> 00:02:35,580 So we're taking what it's currently equal to sanitizing it and then changing the entire request a body 37 00:02:35,590 --> 00:02:38,670 dump logged body to equal that. 38 00:02:38,700 --> 00:02:42,230 So let me make that clear for you let's do a constable blog. 39 00:02:42,770 --> 00:02:51,510 Request that body before and after. 40 00:02:51,510 --> 00:02:53,080 Just like that. 41 00:02:53,520 --> 00:02:59,330 And let me add in something to make it a little easier to see. 42 00:02:59,340 --> 00:03:00,100 Great. 43 00:03:00,570 --> 00:03:01,080 OK. 44 00:03:01,140 --> 00:03:02,360 So let's give it a shot now. 45 00:03:02,400 --> 00:03:03,210 Start the server 46 00:03:06,990 --> 00:03:08,140 fresh the page. 47 00:03:08,250 --> 00:03:10,600 We will have to create a new post. 48 00:03:11,340 --> 00:03:18,480 Let's make one just called Demo random image and let's add in some good HMO that we want to use or to 49 00:03:18,480 --> 00:03:24,790 enter and then something bad which will just be an alert again. 50 00:03:26,680 --> 00:03:28,630 There we go. 51 00:03:28,680 --> 00:03:35,330 So if this works we should see that before has both of these and the after only has this. 52 00:03:35,730 --> 00:03:37,920 Let's take a look at what's come to about. 53 00:03:37,950 --> 00:03:38,620 Perfect. 54 00:03:38,640 --> 00:03:41,610 You can see the first time body is equal to this. 55 00:03:41,610 --> 00:03:45,320 Or we had our script tag in there the second time. 56 00:03:45,390 --> 00:03:47,360 Body only has the H-1. 57 00:03:47,820 --> 00:03:49,830 So that's all we have to do to sanitize something. 58 00:03:50,040 --> 00:03:56,690 And if we now display did we go to our new post which they believe is this one. 59 00:03:56,690 --> 00:03:59,700 Here we take a look. 60 00:03:59,730 --> 00:04:03,350 We're displaying the issue himself but there's no script tag at all. 61 00:04:03,540 --> 00:04:04,950 So that works great. 62 00:04:04,950 --> 00:04:14,380 The last thing they want to do is run the same code but do it instead of the update. 63 00:04:15,180 --> 00:04:21,040 We are right there before we update request up on the blog. 64 00:04:21,390 --> 00:04:23,110 Well did the same thing. 65 00:04:23,400 --> 00:04:24,630 A minor No. 66 00:04:24,750 --> 00:04:29,220 This would be a good use case for what's known as a middleware which we haven't really talked about 67 00:04:29,220 --> 00:04:34,170 yet but it's something that we're repeating two times in two different routes. 68 00:04:34,170 --> 00:04:39,960 What we can do is write a middleware which will run this code before these two routes but we'll cover 69 00:04:39,960 --> 00:04:40,410 middleware. 70 00:04:40,440 --> 00:04:45,270 Later in this course towards the end of EXPRESS So we're leaving it how it is for now. 71 00:04:45,720 --> 00:04:47,270 And that works just fine. 72 00:04:47,520 --> 00:04:52,840 That will sanitize it both time when you update anybody create next. 73 00:04:52,860 --> 00:04:55,300 Let's focus on or index that E.J.. 74 00:04:55,320 --> 00:04:56,050 Yes. 75 00:04:56,060 --> 00:04:57,800 So it needs a little bit of work. 76 00:04:57,850 --> 00:04:59,380 Looks like this right now. 77 00:04:59,760 --> 00:05:03,160 Let's start by deleting a few things. 78 00:05:03,600 --> 00:05:08,400 And that was one of the posts that I had created before we added the sanitiser in. 79 00:05:08,440 --> 00:05:15,820 I To delete some of these ones that don't have images just so that we end up with something easier to 80 00:05:15,820 --> 00:05:18,120 style where we can actually see the images. 81 00:05:18,570 --> 00:05:23,920 OK so we have these what we want to do is center them to start and I'm going to use a lot of the code 82 00:05:23,920 --> 00:05:25,370 that we already have used. 83 00:05:25,600 --> 00:05:32,110 So instead of our index we have a header that's good but then we're going to put everything inside of 84 00:05:33,010 --> 00:05:41,890 a div and this div will have class equal to UI main text container which is what gives us that centered 85 00:05:41,890 --> 00:05:42,800 container. 86 00:05:43,060 --> 00:05:45,730 And then inside will have our div. 87 00:05:46,060 --> 00:05:51,310 And this is basically recycled from the last little line in the last little bit we wrote for the forms 88 00:05:51,570 --> 00:05:52,690 and for the show page. 89 00:05:52,720 --> 00:05:58,890 So class equals you huge header and then we'll just put a set of index page. 90 00:05:58,930 --> 00:06:03,990 Let's just put it rest for a blog. 91 00:06:04,390 --> 00:06:05,710 Just like that. 92 00:06:05,830 --> 00:06:09,700 And then when we have that done well I added another div. 93 00:06:09,700 --> 00:06:18,370 This one will have our segment in it which gives this UI top attached segment that gives just that little 94 00:06:18,370 --> 00:06:23,770 line in the box and then inside of there are going to be looping through. 95 00:06:24,010 --> 00:06:33,100 And we set off one more line before we even get to the loop which is a div with the class UI divided 96 00:06:33,340 --> 00:06:33,880 items 97 00:06:36,970 --> 00:06:43,390 and then for each item we go inside of you I divided items and we get an automatic divider put between 98 00:06:43,390 --> 00:06:43,940 them. 99 00:06:44,170 --> 00:06:49,120 So we're going to copy this code into this you are divided items. 100 00:06:49,120 --> 00:06:53,700 What we do need to make some changes. 101 00:06:53,710 --> 00:06:58,470 The first is just in debt but we're not just going to print this inside. 102 00:06:58,510 --> 00:07:07,690 We're going to create a div class equal to item and then inside the item we have our image first and 103 00:07:07,690 --> 00:07:16,450 the image will go instead of a div with class equal to image and we'll put that out there and that will 104 00:07:16,450 --> 00:07:21,000 help constrain the size of the image so we don't get those gigantic images taking up the entire screen 105 00:07:21,030 --> 00:07:21,620 anymore. 106 00:07:21,990 --> 00:07:29,780 OK so did the image put the image inside then need another div class equal to the content. 107 00:07:30,220 --> 00:07:32,470 And this is where I will put a few things. 108 00:07:32,470 --> 00:07:38,290 First one is the title and rather than making an H-2 with a title actually and to make an anchor tag 109 00:07:39,270 --> 00:07:47,140 and or anchor tag will have class equal to Hetter but will also have a ref equal to the show page which 110 00:07:47,150 --> 00:07:53,430 and Riskin a copy that you are here just like that which you already have. 111 00:07:53,440 --> 00:07:59,740 So the read more link so the reason we're doing this so that we can end up with our header for each 112 00:07:59,740 --> 00:08:04,470 blog I can click on it to go to the show page or click on read more. 113 00:08:04,880 --> 00:08:07,410 Let's make sure we have a small syntax error. 114 00:08:07,450 --> 00:08:11,450 We're missing our closing quote right here for Atra flops. 115 00:08:12,670 --> 00:08:13,630 OK. 116 00:08:13,960 --> 00:08:18,520 Atra is the show page and then inside the brackets we have a blog title. 117 00:08:18,520 --> 00:08:19,860 It's kind of a mess. 118 00:08:19,930 --> 00:08:27,460 Then after that we'll add in a div with class equal to Metta which is just a place for us to put information 119 00:08:27,460 --> 00:08:35,080 about this particular item which in our case will just be a span with the date which we already have 120 00:08:35,090 --> 00:08:35,530 . 121 00:08:36,040 --> 00:08:42,040 But I'm going to format this date as well so blog dot created to date string which we already saw on 122 00:08:42,040 --> 00:08:51,890 the show page and then we close that live there then we'll have a div class equal to description. 123 00:08:52,210 --> 00:08:55,280 And that's where we'll put this content. 124 00:08:55,690 --> 00:08:58,230 The actual body of the blog. 125 00:08:58,600 --> 00:09:04,060 And rather than doing equal sign I'll change it back to a dash or not change it back but we'll change 126 00:09:04,060 --> 00:09:08,160 it to a dasht so that we get the actual age of our content that's now sanitized. 127 00:09:08,380 --> 00:09:17,380 Lastly I a div classical to extra and instead of that will put the button to to read more and will make 128 00:09:17,380 --> 00:09:24,430 an anchor tag and I'm going to copy a tag we already have in and change it just a little bit. 129 00:09:24,430 --> 00:09:30,710 So we don't need the classical to header anymore but we do want instead is a large button. 130 00:09:30,970 --> 00:09:35,280 So I floated basic. 131 00:09:35,470 --> 00:09:38,410 Pick your color of do Violet again. 132 00:09:39,370 --> 00:09:42,190 And we can do this a little bit. 133 00:09:42,190 --> 00:09:44,630 It's definitely a lot to look at. 134 00:09:44,950 --> 00:09:48,090 So let's put this let's put this up just a little bit. 135 00:09:48,160 --> 00:09:57,340 So after the opening here then set the anchor tag we'll have read more and we'll add on an icon 136 00:10:01,680 --> 00:10:07,360 a chevron icon which will just be a little arrow after read more. 137 00:10:07,380 --> 00:10:09,040 OK marathon there. 138 00:10:09,070 --> 00:10:10,680 Lots of stuff we added in. 139 00:10:10,750 --> 00:10:18,880 Just make sure everything is looking OK and definitely just take a look at the solution code if you 140 00:10:18,880 --> 00:10:20,470 don't want to take this from scratch. 141 00:10:20,710 --> 00:10:25,360 Let's see how it's looking for you don't have any syntax errors. 142 00:10:27,310 --> 00:10:30,570 That or we go just what we're looking for. 143 00:10:30,580 --> 00:10:37,550 So we're truncating the first 100 characters in that or as many characters as there are in this post 144 00:10:37,550 --> 00:10:37,570 . 145 00:10:37,570 --> 00:10:43,560 In this case very short click on read more the link works takes us to the show page. 146 00:10:43,690 --> 00:10:47,760 We can edit go back. 147 00:10:47,760 --> 00:10:49,170 We have her images here. 148 00:10:49,210 --> 00:10:57,370 After divided lines we have our Hetter we have this segment going around everything and we're done pretty 149 00:10:57,380 --> 00:10:57,910 much. 150 00:10:58,210 --> 00:11:04,060 So again don't feel like we definitely don't feel like you have to know all of these classes. 151 00:11:04,060 --> 00:11:04,940 I kind of just did. 152 00:11:05,140 --> 00:11:06,090 You know gave them to you. 153 00:11:06,130 --> 00:11:07,380 Rapid fire style. 154 00:11:07,510 --> 00:11:10,660 Because a point is not that you you learn all these. 155 00:11:11,080 --> 00:11:14,670 But if you do want to learn more and go to semantic dashi why dotcom. 156 00:11:14,690 --> 00:11:17,200 There's a lot of great tutorials and resources. 157 00:11:17,260 --> 00:11:21,270 It's still not as widely used as bootstrap but it's definitely growing. 158 00:11:21,400 --> 00:11:24,770 I have noticed a lot of my students would find it on their own. 159 00:11:24,880 --> 00:11:30,700 Whereas in the past I would introduce it to them after bluechip in the most the two most recent classes 160 00:11:30,700 --> 00:11:35,860 I taught the students really quickly fell in love with it without me ever showing it to them and they 161 00:11:35,870 --> 00:11:37,430 ended up using it over bootstrap. 162 00:11:37,630 --> 00:11:40,800 Most students but totally up to you. 163 00:11:40,880 --> 00:11:45,300 I enjoyed both of them and bootstrap is definitely more popular for now. 164 00:11:45,340 --> 00:11:50,780 OK so the last thing I mentioned we do is refactor our table just a tiny bit. 165 00:11:50,920 --> 00:11:56,470 And all I want to do is add in a final column for the mongoose method that corresponds to each one of 166 00:11:56,470 --> 00:11:57,140 these. 167 00:11:57,400 --> 00:12:03,510 So find by id find by 80 an update find by id add remove and so on. 168 00:12:03,860 --> 00:12:06,100 I'll be a quick review of how tables work. 169 00:12:06,110 --> 00:12:15,590 So here's a chart that age the amount we need to add in another th and we'll just call it mongoose method 170 00:12:16,930 --> 00:12:24,540 and let's open up the preview a cooking preview and move it to the bottom here. 171 00:12:24,750 --> 00:12:27,150 There's our table or new th. 172 00:12:27,460 --> 00:12:36,450 And then for index we'll add a TV in the mongoose method there for dog should be dog find. 173 00:12:36,880 --> 00:12:38,230 There you go. 174 00:12:38,230 --> 00:12:43,400 Next up we have new which actually doesn't have a monkish method at all. 175 00:12:43,450 --> 00:12:50,890 So rather than leaving it blank I'll just put in a file that it does is render a form. 176 00:12:51,130 --> 00:12:59,330 Next we have create and create is going to do a dog dot create. 177 00:13:01,150 --> 00:13:07,760 And one really cool feature if you do this life preview is as a MIDI editing the came noticed that it 178 00:13:07,750 --> 00:13:12,040 shows me when I'm selecting down here which is pretty cool. 179 00:13:12,190 --> 00:13:15,920 So you don't even have to open up the inspector and just see live. 180 00:13:16,120 --> 00:13:21,900 And if they change things they update live as well without having to save or refresh the page. 181 00:13:22,420 --> 00:13:22,820 OK. 182 00:13:22,930 --> 00:13:31,900 So then we have a show which does a dog that find by ID then we have it. 183 00:13:32,260 --> 00:13:35,400 Which also does a dog get fined by ID. 184 00:13:35,710 --> 00:13:44,830 We have to find the dog that we're editing and that's for the form and then update does a dog that trimed 185 00:13:44,830 --> 00:13:49,880 by id and update long one. 186 00:13:50,360 --> 00:14:00,830 And he is also somewhat long dog does find by id and remove every go. 187 00:14:01,300 --> 00:14:02,300 Let's take a look. 188 00:14:02,620 --> 00:14:04,250 Here's our table. 189 00:14:04,380 --> 00:14:12,410 Looks like I accidentally deleted one of the CDs here which is supposed to display what update does 190 00:14:12,670 --> 00:14:23,150 so update is supposed to update the dog stuper tickler dog then redirect somewhere. 191 00:14:24,150 --> 00:14:24,860 All right. 192 00:14:25,150 --> 00:14:26,430 Now we should be back to normal. 193 00:14:26,480 --> 00:14:28,220 Here's our table. 194 00:14:28,210 --> 00:14:31,740 So the only one that doesn't have any mongoose methods at all. 195 00:14:31,960 --> 00:14:37,390 It's going to be new because new is not finding anything the database it's not adding anything. 196 00:14:37,570 --> 00:14:40,090 It just renders us a form. 197 00:14:40,210 --> 00:14:40,570 Great. 198 00:14:40,570 --> 00:14:44,580 So hopefully this is useful for you in the future can refer to this table. 199 00:14:44,870 --> 00:14:49,150 I'll be referring back to it certainly it covers a lot of important information that we'll be using 200 00:14:49,150 --> 00:14:50,290 a lot. 201 00:14:50,290 --> 00:14:50,860 All right. 202 00:14:50,980 --> 00:14:56,280 So we finish this now we get to move on to some more fun things some more complicated apps. 203 00:14:56,360 --> 00:14:59,980 I noticed there was a little bit of America on covered a lot. 204 00:15:00,040 --> 00:15:01,710 It's always a tough one to make. 205 00:15:01,710 --> 00:15:03,870 Interesting because just a lot of information. 206 00:15:03,880 --> 00:15:11,170 But but it's important to have that credibility be able to create read update and delete an entity takes 207 00:15:11,170 --> 00:15:12,380 a lot of wraps. 208 00:15:12,380 --> 00:15:12,810 All right. 209 00:15:12,900 --> 00:15:13,920 I'll see you in the next year.