Welcome back to our last video on this blog.
So we have to change.
We're going to make.
The first one is to implement the Express sanitiser that I mentioned which will help us with that problem
where if for displaying HDMI Olafur actually rendering him a user could potentially enter some harmful
javascript instead of a script hack.
We don't want to run that code so we use sanitiser to help us with that basically takes that input and
it removes all scripts out of it and just gives us the peer aged him out.
And then we also want to style the index page a bit.
It's looking a little bit rough and the last thing will do is make a small update to a restful Rhodes
table just to make it a little more useful for you.
So let's begin with the sanitiser.
So I'm going to install a package called Express dash sanitiser dash dash.
Save.
OK.
Now that that's done in our app yes we're going to require that so express sanitiser equals require
express Desch sanitiser just like that.
And then we have to tell our app to use it app use Express sanitiser and the only requirement is that
this goes after all the parser.
Define here.
OK.
And that's it.
Now to use it you want to do it to start instead of are created when you create a new blog.
So it's really create an update.
Are the two places where we're taking data and saving into the database.
Both times you want to make sure sanitize the input and instead of create what we want to sanitize is
request up body up log of body which is kind of a mess remember request up body is whatever is coming
from a form whatever data is in the request body which in our case is coming from a form then blog is
because of this line right here.
Blog title blog image and find finally blog body.
And this is the one that we care about.
So we have to do blog dot body.
So it's kind of a long long name here but request body up blog temp body.
And we're going to change it so that it's equal to request that sanitize and we're going to sanitize
this entire thing.
So we're taking what it's currently equal to sanitizing it and then changing the entire request a body
dump logged body to equal that.
So let me make that clear for you let's do a constable blog.
Request that body before and after.
Just like that.
And let me add in something to make it a little easier to see.
Great.
OK.
So let's give it a shot now.
Start the server
fresh the page.
We will have to create a new post.
Let's make one just called Demo random image and let's add in some good HMO that we want to use or to
enter and then something bad which will just be an alert again.
There we go.
So if this works we should see that before has both of these and the after only has this.
Let's take a look at what's come to about.
Perfect.
You can see the first time body is equal to this.
Or we had our script tag in there the second time.
Body only has the H-1.
So that's all we have to do to sanitize something.
And if we now display did we go to our new post which they believe is this one.
Here we take a look.
We're displaying the issue himself but there's no script tag at all.
So that works great.
The last thing they want to do is run the same code but do it instead of the update.
We are right there before we update request up on the blog.
Well did the same thing.
A minor No.
This would be a good use case for what's known as a middleware which we haven't really talked about
yet but it's something that we're repeating two times in two different routes.
What we can do is write a middleware which will run this code before these two routes but we'll cover
middleware.
Later in this course towards the end of EXPRESS So we're leaving it how it is for now.
And that works just fine.
That will sanitize it both time when you update anybody create next.
Let's focus on or index that E.J..
Yes.
So it needs a little bit of work.
Looks like this right now.
Let's start by deleting a few things.
And that was one of the posts that I had created before we added the sanitiser in.
I To delete some of these ones that don't have images just so that we end up with something easier to
style where we can actually see the images.
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
that we already have used.
So instead of our index we have a header that's good but then we're going to put everything inside of
a div and this div will have class equal to UI main text container which is what gives us that centered
container.
And then inside will have our div.
And this is basically recycled from the last little line in the last little bit we wrote for the forms
and for the show page.
So class equals you huge header and then we'll just put a set of index page.
Let's just put it rest for a blog.
Just like that.
And then when we have that done well I added another div.
This one will have our segment in it which gives this UI top attached segment that gives just that little
line in the box and then inside of there are going to be looping through.
And we set off one more line before we even get to the loop which is a div with the class UI divided
items
and then for each item we go inside of you I divided items and we get an automatic divider put between
them.
So we're going to copy this code into this you are divided items.
What we do need to make some changes.
The first is just in debt but we're not just going to print this inside.
We're going to create a div class equal to item and then inside the item we have our image first and
the image will go instead of a div with class equal to image and we'll put that out there and that will
help constrain the size of the image so we don't get those gigantic images taking up the entire screen
anymore.
OK so did the image put the image inside then need another div class equal to the content.
And this is where I will put a few things.
First one is the title and rather than making an H-2 with a title actually and to make an anchor tag
and or anchor tag will have class equal to Hetter but will also have a ref equal to the show page which
and Riskin a copy that you are here just like that which you already have.
So the read more link so the reason we're doing this so that we can end up with our header for each
blog I can click on it to go to the show page or click on read more.
Let's make sure we have a small syntax error.
We're missing our closing quote right here for Atra flops.
OK.
Atra is the show page and then inside the brackets we have a blog title.
It's kind of a mess.
Then after that we'll add in a div with class equal to Metta which is just a place for us to put information
about this particular item which in our case will just be a span with the date which we already have
.
But I'm going to format this date as well so blog dot created to date string which we already saw on
the show page and then we close that live there then we'll have a div class equal to description.
And that's where we'll put this content.
The actual body of the blog.
And rather than doing equal sign I'll change it back to a dash or not change it back but we'll change
it to a dasht so that we get the actual age of our content that's now sanitized.
Lastly I a div classical to extra and instead of that will put the button to to read more and will make
an anchor tag and I'm going to copy a tag we already have in and change it just a little bit.
So we don't need the classical to header anymore but we do want instead is a large button.
So I floated basic.
Pick your color of do Violet again.
And we can do this a little bit.
It's definitely a lot to look at.
So let's put this let's put this up just a little bit.
So after the opening here then set the anchor tag we'll have read more and we'll add on an icon
a chevron icon which will just be a little arrow after read more.
OK marathon there.
Lots of stuff we added in.
Just make sure everything is looking OK and definitely just take a look at the solution code if you
don't want to take this from scratch.
Let's see how it's looking for you don't have any syntax errors.
That or we go just what we're looking for.
So we're truncating the first 100 characters in that or as many characters as there are in this post
.
In this case very short click on read more the link works takes us to the show page.
We can edit go back.
We have her images here.
After divided lines we have our Hetter we have this segment going around everything and we're done pretty
much.
So again don't feel like we definitely don't feel like you have to know all of these classes.
I kind of just did.
You know gave them to you.
Rapid fire style.
Because a point is not that you you learn all these.
But if you do want to learn more and go to semantic dashi why dotcom.
There's a lot of great tutorials and resources.
It's still not as widely used as bootstrap but it's definitely growing.
I have noticed a lot of my students would find it on their own.
Whereas in the past I would introduce it to them after bluechip in the most the two most recent classes
I taught the students really quickly fell in love with it without me ever showing it to them and they
ended up using it over bootstrap.
Most students but totally up to you.
I enjoyed both of them and bootstrap is definitely more popular for now.
OK so the last thing I mentioned we do is refactor our table just a tiny bit.
And all I want to do is add in a final column for the mongoose method that corresponds to each one of
these.
So find by id find by 80 an update find by id add remove and so on.
I'll be a quick review of how tables work.
So here's a chart that age the amount we need to add in another th and we'll just call it mongoose method
and let's open up the preview a cooking preview and move it to the bottom here.
There's our table or new th.
And then for index we'll add a TV in the mongoose method there for dog should be dog find.
There you go.
Next up we have new which actually doesn't have a monkish method at all.
So rather than leaving it blank I'll just put in a file that it does is render a form.
Next we have create and create is going to do a dog dot create.
And one really cool feature if you do this life preview is as a MIDI editing the came noticed that it
shows me when I'm selecting down here which is pretty cool.
So you don't even have to open up the inspector and just see live.
And if they change things they update live as well without having to save or refresh the page.
OK.
So then we have a show which does a dog that find by ID then we have it.
Which also does a dog get fined by ID.
We have to find the dog that we're editing and that's for the form and then update does a dog that trimed
by id and update long one.
And he is also somewhat long dog does find by id and remove every go.
Let's take a look.
Here's our table.
Looks like I accidentally deleted one of the CDs here which is supposed to display what update does
so update is supposed to update the dog stuper tickler dog then redirect somewhere.
All right.
Now we should be back to normal.
Here's our table.
So the only one that doesn't have any mongoose methods at all.
It's going to be new because new is not finding anything the database it's not adding anything.
It just renders us a form.
Great.
So hopefully this is useful for you in the future can refer to this table.
I'll be referring back to it certainly it covers a lot of important information that we'll be using
a lot.
All right.
So we finish this now we get to move on to some more fun things some more complicated apps.
I noticed there was a little bit of America on covered a lot.
It's always a tough one to make.
Interesting because just a lot of information.
But but it's important to have that credibility be able to create read update and delete an entity takes
a lot of wraps.
All right.
I'll see you in the next year.