We'll come back.
So we're going to pick up where we left off.
We've covered index new create.
Now we're moving on to show.
So again the point of the show page is that it shows all the information or more information in the
index about one particular item and the path has an idea in it.
So ours will be bloggers slash I.D. ID initially get request.
We were a few goals at the show route the template then we want to have links so that on the index page
we can have a button that says read more and that will take us to the show page and then we go on to
style the show template just a little bit.
Let's get started by defining the route.
So after our create we'll add in another comment and this needs to be an actor get slash blogs slash
colon ID request and response and save and we can do as simple as that send show page to start.
Just make sure that this works.
So restart the server
and we can go to blog slash anything and see show page.
Of course the ideas will be long mongoose ideas that look like that and we wont be typing this but will
be clicking links to see them.
So lets do that now let's go back and add a link to the show page on the index so that we can have a
button that says Read more right here next to the post itself.
That will take us to the show page.
So in our index template if we open it up instead of views first thing that will do is just after the
blog body add an anchor tag and will just say read more and the H ref is going to be slash logs.
But that ID is variable through each blog.
So we need each Yes.
And that needs to be a blog dot underscore ID will save restart.
We now have a link and if we click on it watch the you are all logged slash.
5 6 3 while blah blah.
Same thing here with a different ID.
All right so now we need to fill in the logic in the route which is supposed to take this Id find the
corresponding blog and then render the show template Lets begin by finding the correct log inside that
show route.
So the manglers meth that we use is blague dot find by ID and that takes two arguments the ID and the
callback.
So the ID is right here request dot harams that ID and our callback rate there will have an error and
then we'll call it found lock.
There we go.
We'll check for the error again if ever.
And let's just do something simple.
We'll do a redirect back to the index page.
Eventually I'll be showing you much nicer error handling where we can show a message that says log not
found or I'm sorry I can't find that blog and I'll take you back to the page you were just on.
But for now we'll just always go back to Smashbox but there shouldn't be anything that causes an error
in mice.
Our database is completely shut off or something.
So this really it doesn't matter for us at this point else Reds render the show template and we need
to pass in sound blog and we'll just call it blog.
So found blog inside the template will be called Blog.
Now we need that show template.
So let's make that now.
Touch views show that Aegeus open that up
and in here I'm going to start actually copying what I have in New which is a form and we don't want
any of that.
So what we do want is some of this basic stuff like the header UI main text containers segment we'll
keep that for now.
But inside of it instead of huge hetter let's add in the title of the post and the title should be blog
title.
Let's save it.
And let's see if it works.
So again blog is whatever we found inside of the show right here.
We looked for it with the ID logged up find by ID if we find it if there's no error passed found flogged
through under the name log to the show template in the show template.
We're using blog.
All right.
Moment of Truth
let's quick one of these links there we go first post.
So if I click on this one you should see my new dog.
And we do.
Great.
So we have the basics.
The hard part really done.
Now it's just a matter of displaying the information that we want to display.
So we'll go back and we'll definitely want to display the image.
We want to display the content as well.
So I'll steal some of that from the index.
We already have all of this written now and we'll just style it a little bit differently here.
There we go.
We'll just start with this.
But we will be making this look nicer.
Let's see what we get if we refresh.
There's our post.
Here is our show page.
One thing that is worth noting is that this currently doesn't show anything that we don't see on the
index and that's because our index shows everything.
But most blogs do is that they show part of the post.
So if we had a 10000 Line blog post we don't want it to take up 10000 lines here.
Rather you might have a preview of a paragraph or so and then you click on read more and we'll do that
in just a moment.
But let's start by styling this a little bit.
The first thing that we have is our main text container.
We have a huge header.
And then inside of that you can add another div where we're going to put everything inside of that div
and give it a class equal to UI top attached segment.
What segment does is it puts a little border around things so it looks like instead of that you are
going to add a div class equal to item and then instead of the item we're putting all of our content
.
So will start with the image and rather than just displaying the entire image how it is we can add a
semantic class called you I centered it image which is four classes.
So you I image will just give us a nice semantic UI image but if we give it centered it will then center
the image in that container in rounded will give it some rounded corners.
It won't be circular.
You can do that with I think circle image or circular image but rounded just changes the corners a little
bit.
Let's just check that out to start.
There we go.
We're getting closer and then we'll go in here and add another device.
This one will be class equal to content if you want to know where I'm getting this from.
If you go on to item views item on semantic UI This is where I'm taking it from.
So we have div item instead of an item we can have an image and then content which is exactly what I
did.
So we have an item with content inside and that's not really the purpose.
You're not going to be an expert on semantic UI after this.
It's again just just to show you another framework but not to get you know to make you an expert in
semantic.
All right so instead of that we're then going to add in our span what they created it just like that
and will save one small change though is that this is not really ideal for a user to see what we can
do is very easily change that into a more readable date.
And there's a few methods with javascript dates.
There's one called two string.
There's one called to date string which is what we want and I'll show you what that looks like.
If I just call it right here and refresh notice that we have now I refresh and I get a nice English
human readable version.
Sunday November 1st 2015.
Perfect.
So we'll save that.
Let's keep working a little bit here.
Let's add in another div is called
description
and this is another semantic class instead of there and this at our paragraph just like that and refresh
the page.
And we have a blog post relatively done for now.
I will get rid of this div with a line inside of it.
We don't need that line.
And that's from the segment that we have here.
So if we get rid of that one and we keep the outer segment we end up with this or we can go the other
way around and get rid of the outer segment and keep the inner one just like this.
Whichever you think looks best.
I think I'll go back and keep the outer one sure.
Totally if you.
All right.
Now let's get some post in our database that I have some longer text to display or copy some lorem ipsum
.
It's like this.
And if we go back new post this time I have a different image you are wrong.
I'll be surprised.
And I'll just call this new post with longer text.
Terrible title.
Submit and we get this gigantic image here we're not styling it.
And then we get a lot of text.
So obviously we don't want all of this text on the index page that will work on that.
And if I click on read more and now get my nice blog post here but notice that everything is condensed
.
You don't have those paragraph lines that we wanted.
You can't add breaks in between.
So to make this a little bit of a better more usable blog we should let users enter HVM out which you
probably have seen if you if you ever blog for some variant of HVM now something like Wordpress or if
you use something like medium.
You don't write each T.M. yourself but you can make things bolded you can include images you can include
paragraphs italicize text.
Well if we do that now if we try and make a new post I'll keep the same image again.
And let's steal that Lorem Ipsum again.
Just part of this let's do something obvious like a strong tag around some of this.
So if it worked we would see some bolded text and submit and I'd forgot to tighten up.
That's OK.
And you'll see that our content is displayed but it's not run.
It's not shown as a time out and there's a good reason for that which is that it's not always that safe
to let users just enter their own HVM their own code and just execute it.
And you might be thinking What's the worst that can happen.
It's just etched him out.
Well what can happen is that someone could actually enter a script tag in run Javascript.
So I'll show you that later.
Right now though it's fine because we're not actually displaying the HD amount.
If we wanted to it's a really simple change one character actually.
So that's the show template.
And if we look at the show template right now we're displaying blog dot body.
If I change this equal sign to a dash Well that will actually do is take whatever blog that body returned
and evaluate that.
Run it as code rather than just displaying the string.
So if I refresh the page we now get our strong tag right there.
And if I expected it you'd see it's an actual strong tag.
So changing it from an equal sign to a dash is really powerful.
It then actually evaluates the code.
So if we do another post same image and this time we do a first paragraph and the closing paragraph
and then we duplicate that and then once get some larm ipsum and just steal some of these lines.
We'll just have two simple paragraphs.
You'll see that we end up now
after our giant images we end up with two paragraphs here.
Which is great because now a user can actually enter in content and specify the style.
But here's a problem.
So if I enter in something random here I can do this script
and I can just type some code in here and just do something stupid like I asked you.
Sure.
All of these are misspelled.
And if I enter this now this is HDMI it is going to be run and it's a script tag which means this will
be run a job script.
So when I go to that page now I get that alert.
Obviously a single alert is not that bad but you could probably imagine that things can escalate from
there.
There are ways of preventing that issue of getting rid of any script tags.
I'll show you how to do that at the end is an optional video in this series.
It's called sanitising our inputs.
There if there is a package called the Express sanitiser that will do it for us.
We just tell it to sanitize it property which will just get rid of any script tags inside of it.
We don't have to write that code.
OK.
So let's go back though we have a few issues.
One these images.
Yes we'll get back to styling these.
But let's start by truncating these posts so we don't see all this content on the index page.
Let's leave it to the first 100 characters and then put an ellipsis afterwards.
So delimit a string.
It's actually really simple.
We saw early on when we talked about javascript we use the substring method.
So on our index page rather than the entire blog body will do clogged up body substring zero first character
up until.
And we want the hundred ish character that's fine for now.
And I always get this wrong.
It's a lower case s substring.
Seems like it should be camel case like it's two words but it's not.
All right.
So now if we try this out you see that we now have these truncated posts and let's just add in that
simple ellipsis here.
So substring and then outside of that yes dot dot dot and then we have our rebore link.
So now our show page serves a purpose where we see a little bit.
And then you can click read more and see the entire post.
Great.
So we've covered a lot in this video.
You talked about show talked about using the ID in the route how would to get requests.
We set up the route we took the ID and found the corresponding blog then rendered a template.
But we also talked about some new things including on the show template using the dash here rather than
an equal sign which will actually render code to run the code and render the result.
And then we also saw to date string which is a nice way of transforming a date into a better format
.
It's still not that flexible.
There are great libraries which one called Moment Jap's which lets you specify the exact format that
you want.
We might want something that looks like the month slash the day slash the year and we might want something
where the month is abbreviated or we might want the entire month and the entire day of the week rather
than Sun in Nov.
You can do that with moment J s much better way of handling dates if you want to be very explicit in
the format that you want.
Its just a simple library you can install it just like Jay Querrey or any other client side library
but we're going to go with this for now.
Built into javascript.
We don't need any extra code other than a single line here.
Great.
And then the last thing with using substring instead of an index which is more for a view you haven't
seen this in a while but we did see it early on.
First argument is where we want to make the first cut second argument is where we want to make the second
cut.
We take everything in between.
Great.
All right.
Can the next video we're going to work on update and edit