1
00:00:00,210 --> 00:00:01,200
We'll come back.

2
00:00:01,200 --> 00:00:03,060
So we're going to pick up where we left off.

3
00:00:03,090 --> 00:00:05,070
We've covered index new create.

4
00:00:05,070 --> 00:00:06,710
Now we're moving on to show.

5
00:00:07,140 --> 00:00:11,880
So again the point of the show page is that it shows all the information or more information in the

6
00:00:11,880 --> 00:00:16,630
index about one particular item and the path has an idea in it.

7
00:00:16,710 --> 00:00:21,310
So ours will be bloggers slash I.D. ID initially get request.

8
00:00:21,700 --> 00:00:28,080
We were a few goals at the show route the template then we want to have links so that on the index page

9
00:00:28,480 --> 00:00:32,670
we can have a button that says read more and that will take us to the show page and then we go on to

10
00:00:32,670 --> 00:00:34,810
style the show template just a little bit.

11
00:00:34,830 --> 00:00:36,900
Let's get started by defining the route.

12
00:00:37,320 --> 00:00:47,160
So after our create we'll add in another comment and this needs to be an actor get slash blogs slash

13
00:00:47,340 --> 00:01:01,900
colon ID request and response and save and we can do as simple as that send show page to start.

14
00:01:02,790 --> 00:01:04,450
Just make sure that this works.

15
00:01:04,500 --> 00:01:05,610
So restart the server

16
00:01:08,340 --> 00:01:12,780
and we can go to blog slash anything and see show page.

17
00:01:12,780 --> 00:01:19,440
Of course the ideas will be long mongoose ideas that look like that and we wont be typing this but will

18
00:01:19,440 --> 00:01:21,140
be clicking links to see them.

19
00:01:21,510 --> 00:01:28,500
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

20
00:01:28,500 --> 00:01:32,540
button that says Read more right here next to the post itself.

21
00:01:32,730 --> 00:01:34,570
That will take us to the show page.

22
00:01:34,980 --> 00:01:41,040
So in our index template if we open it up instead of views first thing that will do is just after the

23
00:01:41,070 --> 00:01:52,330
blog body add an anchor tag and will just say read more and the H ref is going to be slash logs.

24
00:01:52,530 --> 00:01:55,430
But that ID is variable through each blog.

25
00:01:55,530 --> 00:01:57,230
So we need each Yes.

26
00:01:57,610 --> 00:02:06,020
And that needs to be a blog dot underscore ID will save restart.

27
00:02:06,420 --> 00:02:11,030
We now have a link and if we click on it watch the you are all logged slash.

28
00:02:11,040 --> 00:02:13,880
5 6 3 while blah blah.

29
00:02:14,190 --> 00:02:16,540
Same thing here with a different ID.

30
00:02:17,250 --> 00:02:22,950
All right so now we need to fill in the logic in the route which is supposed to take this Id find the

31
00:02:22,950 --> 00:02:28,710
corresponding blog and then render the show template Lets begin by finding the correct log inside that

32
00:02:28,710 --> 00:02:29,990
show route.

33
00:02:30,720 --> 00:02:39,300
So the manglers meth that we use is blague dot find by ID and that takes two arguments the ID and the

34
00:02:39,300 --> 00:02:40,220
callback.

35
00:02:40,470 --> 00:02:51,120
So the ID is right here request dot harams that ID and our callback rate there will have an error and

36
00:02:51,120 --> 00:02:55,970
then we'll call it found lock.

37
00:02:56,550 --> 00:02:57,260
There we go.

38
00:02:57,450 --> 00:03:00,750
We'll check for the error again if ever.

39
00:03:00,780 --> 00:03:02,710
And let's just do something simple.

40
00:03:02,730 --> 00:03:10,190
We'll do a redirect back to the index page.

41
00:03:10,510 --> 00:03:16,380
Eventually I'll be showing you much nicer error handling where we can show a message that says log not

42
00:03:16,380 --> 00:03:21,460
found or I'm sorry I can't find that blog and I'll take you back to the page you were just on.

43
00:03:21,630 --> 00:03:27,030
But for now we'll just always go back to Smashbox but there shouldn't be anything that causes an error

44
00:03:27,330 --> 00:03:27,780
in mice.

45
00:03:27,780 --> 00:03:30,100
Our database is completely shut off or something.

46
00:03:30,300 --> 00:03:38,790
So this really it doesn't matter for us at this point else Reds render the show template and we need

47
00:03:38,790 --> 00:03:43,150
to pass in sound blog and we'll just call it blog.

48
00:03:43,170 --> 00:03:48,230
So found blog inside the template will be called Blog.

49
00:03:48,300 --> 00:03:50,730
Now we need that show template.

50
00:03:50,730 --> 00:03:52,220
So let's make that now.

51
00:03:52,470 --> 00:03:57,370
Touch views show that Aegeus open that up

52
00:04:01,280 --> 00:04:08,790
and in here I'm going to start actually copying what I have in New which is a form and we don't want

53
00:04:08,790 --> 00:04:09,540
any of that.

54
00:04:09,720 --> 00:04:17,580
So what we do want is some of this basic stuff like the header UI main text containers segment we'll

55
00:04:17,580 --> 00:04:19,890
keep that for now.

56
00:04:20,130 --> 00:04:29,340
But inside of it instead of huge hetter let's add in the title of the post and the title should be blog

57
00:04:29,560 --> 00:04:30,290
title.

58
00:04:30,960 --> 00:04:32,560
Let's save it.

59
00:04:32,700 --> 00:04:35,580
And let's see if it works.

60
00:04:35,580 --> 00:04:41,700
So again blog is whatever we found inside of the show right here.

61
00:04:41,700 --> 00:04:48,390
We looked for it with the ID logged up find by ID if we find it if there's no error passed found flogged

62
00:04:48,390 --> 00:04:52,900
through under the name log to the show template in the show template.

63
00:04:53,190 --> 00:04:54,380
We're using blog.

64
00:04:54,780 --> 00:04:55,770
All right.

65
00:04:55,770 --> 00:04:56,450
Moment of Truth

66
00:04:59,230 --> 00:05:03,610
let's quick one of these links there we go first post.

67
00:05:04,070 --> 00:05:07,210
So if I click on this one you should see my new dog.

68
00:05:07,760 --> 00:05:08,900
And we do.

69
00:05:08,900 --> 00:05:09,330
Great.

70
00:05:09,410 --> 00:05:10,590
So we have the basics.

71
00:05:10,610 --> 00:05:12,170
The hard part really done.

72
00:05:12,170 --> 00:05:15,850
Now it's just a matter of displaying the information that we want to display.

73
00:05:16,400 --> 00:05:20,130
So we'll go back and we'll definitely want to display the image.

74
00:05:20,200 --> 00:05:23,000
We want to display the content as well.

75
00:05:23,000 --> 00:05:25,310
So I'll steal some of that from the index.

76
00:05:25,340 --> 00:05:32,280
We already have all of this written now and we'll just style it a little bit differently here.

77
00:05:32,280 --> 00:05:34,550
There we go.

78
00:05:36,200 --> 00:05:37,030
We'll just start with this.

79
00:05:37,040 --> 00:05:39,350
But we will be making this look nicer.

80
00:05:39,350 --> 00:05:42,480
Let's see what we get if we refresh.

81
00:05:42,870 --> 00:05:44,010
There's our post.

82
00:05:44,020 --> 00:05:45,430
Here is our show page.

83
00:05:45,680 --> 00:05:50,840
One thing that is worth noting is that this currently doesn't show anything that we don't see on the

84
00:05:50,840 --> 00:05:53,280
index and that's because our index shows everything.

85
00:05:53,570 --> 00:05:57,300
But most blogs do is that they show part of the post.

86
00:05:57,440 --> 00:06:02,550
So if we had a 10000 Line blog post we don't want it to take up 10000 lines here.

87
00:06:02,750 --> 00:06:08,060
Rather you might have a preview of a paragraph or so and then you click on read more and we'll do that

88
00:06:08,060 --> 00:06:08,880
in just a moment.

89
00:06:08,990 --> 00:06:11,720
But let's start by styling this a little bit.

90
00:06:11,960 --> 00:06:15,670
The first thing that we have is our main text container.

91
00:06:15,980 --> 00:06:17,370
We have a huge header.

92
00:06:17,990 --> 00:06:23,450
And then inside of that you can add another div where we're going to put everything inside of that div

93
00:06:23,810 --> 00:06:28,890
and give it a class equal to UI top attached segment.

94
00:06:28,990 --> 00:06:35,030
What segment does is it puts a little border around things so it looks like instead of that you are

95
00:06:35,030 --> 00:06:43,640
going to add a div class equal to item and then instead of the item we're putting all of our content

96
00:06:43,640 --> 00:06:44,010
.

97
00:06:44,030 --> 00:06:50,270
So will start with the image and rather than just displaying the entire image how it is we can add a

98
00:06:50,270 --> 00:06:59,220
semantic class called you I centered it image which is four classes.

99
00:06:59,270 --> 00:07:05,300
So you I image will just give us a nice semantic UI image but if we give it centered it will then center

100
00:07:05,300 --> 00:07:08,580
the image in that container in rounded will give it some rounded corners.

101
00:07:08,600 --> 00:07:09,810
It won't be circular.

102
00:07:09,950 --> 00:07:15,170
You can do that with I think circle image or circular image but rounded just changes the corners a little

103
00:07:15,170 --> 00:07:16,470
bit.

104
00:07:16,490 --> 00:07:20,720
Let's just check that out to start.

105
00:07:20,930 --> 00:07:21,720
There we go.

106
00:07:21,740 --> 00:07:27,630
We're getting closer and then we'll go in here and add another device.

107
00:07:27,770 --> 00:07:32,660
This one will be class equal to content if you want to know where I'm getting this from.

108
00:07:32,720 --> 00:07:40,120
If you go on to item views item on semantic UI This is where I'm taking it from.

109
00:07:40,610 --> 00:07:46,790
So we have div item instead of an item we can have an image and then content which is exactly what I

110
00:07:46,790 --> 00:07:47,090
did.

111
00:07:47,090 --> 00:07:51,140
So we have an item with content inside and that's not really the purpose.

112
00:07:51,140 --> 00:07:53,740
You're not going to be an expert on semantic UI after this.

113
00:07:53,900 --> 00:07:59,180
It's again just just to show you another framework but not to get you know to make you an expert in

114
00:07:59,180 --> 00:08:00,800
semantic.

115
00:08:00,810 --> 00:08:09,110
All right so instead of that we're then going to add in our span what they created it just like that

116
00:08:10,390 --> 00:08:18,200
and will save one small change though is that this is not really ideal for a user to see what we can

117
00:08:18,200 --> 00:08:22,620
do is very easily change that into a more readable date.

118
00:08:23,000 --> 00:08:26,860
And there's a few methods with javascript dates.

119
00:08:26,870 --> 00:08:29,860
There's one called two string.

120
00:08:30,290 --> 00:08:36,110
There's one called to date string which is what we want and I'll show you what that looks like.

121
00:08:36,260 --> 00:08:44,240
If I just call it right here and refresh notice that we have now I refresh and I get a nice English

122
00:08:44,240 --> 00:08:45,260
human readable version.

123
00:08:45,260 --> 00:08:48,260
Sunday November 1st 2015.

124
00:08:48,350 --> 00:08:49,180
Perfect.

125
00:08:49,190 --> 00:08:51,010
So we'll save that.

126
00:08:51,810 --> 00:08:53,610
Let's keep working a little bit here.

127
00:08:53,930 --> 00:08:57,470
Let's add in another div is called

128
00:09:00,260 --> 00:09:01,070
description

129
00:09:05,190 --> 00:09:12,770
and this is another semantic class instead of there and this at our paragraph just like that and refresh

130
00:09:12,770 --> 00:09:14,040
the page.

131
00:09:15,170 --> 00:09:18,170
And we have a blog post relatively done for now.

132
00:09:18,170 --> 00:09:21,350
I will get rid of this div with a line inside of it.

133
00:09:21,350 --> 00:09:22,540
We don't need that line.

134
00:09:22,730 --> 00:09:25,330
And that's from the segment that we have here.

135
00:09:25,730 --> 00:09:33,320
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

136
00:09:33,320 --> 00:09:38,230
way around and get rid of the outer segment and keep the inner one just like this.

137
00:09:38,480 --> 00:09:40,060
Whichever you think looks best.

138
00:09:40,100 --> 00:09:47,330
I think I'll go back and keep the outer one sure.

139
00:09:48,050 --> 00:09:49,360
Totally if you.

140
00:09:49,790 --> 00:09:50,370
All right.

141
00:09:50,420 --> 00:09:56,840
Now let's get some post in our database that I have some longer text to display or copy some lorem ipsum

142
00:09:56,850 --> 00:09:57,330
.

143
00:09:57,990 --> 00:10:00,300
It's like this.

144
00:10:01,250 --> 00:10:06,110
And if we go back new post this time I have a different image you are wrong.

145
00:10:06,200 --> 00:10:07,130
I'll be surprised.

146
00:10:07,430 --> 00:10:12,020
And I'll just call this new post with longer text.

147
00:10:12,020 --> 00:10:13,350
Terrible title.

148
00:10:13,360 --> 00:10:19,630
Submit and we get this gigantic image here we're not styling it.

149
00:10:19,630 --> 00:10:21,060
And then we get a lot of text.

150
00:10:21,100 --> 00:10:25,110
So obviously we don't want all of this text on the index page that will work on that.

151
00:10:25,270 --> 00:10:31,930
And if I click on read more and now get my nice blog post here but notice that everything is condensed

152
00:10:31,930 --> 00:10:32,420
.

153
00:10:32,500 --> 00:10:35,240
You don't have those paragraph lines that we wanted.

154
00:10:35,250 --> 00:10:37,080
You can't add breaks in between.

155
00:10:37,210 --> 00:10:43,870
So to make this a little bit of a better more usable blog we should let users enter HVM out which you

156
00:10:43,880 --> 00:10:50,140
probably have seen if you if you ever blog for some variant of HVM now something like Wordpress or if

157
00:10:50,140 --> 00:10:51,660
you use something like medium.

158
00:10:51,700 --> 00:10:56,440
You don't write each T.M. yourself but you can make things bolded you can include images you can include

159
00:10:56,440 --> 00:10:58,690
paragraphs italicize text.

160
00:10:59,000 --> 00:11:03,100
Well if we do that now if we try and make a new post I'll keep the same image again.

161
00:11:03,940 --> 00:11:06,720
And let's steal that Lorem Ipsum again.

162
00:11:06,940 --> 00:11:15,180
Just part of this let's do something obvious like a strong tag around some of this.

163
00:11:15,220 --> 00:11:21,370
So if it worked we would see some bolded text and submit and I'd forgot to tighten up.

164
00:11:21,380 --> 00:11:24,580
That's OK.

165
00:11:24,730 --> 00:11:28,270
And you'll see that our content is displayed but it's not run.

166
00:11:28,300 --> 00:11:33,920
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

167
00:11:33,970 --> 00:11:38,740
to let users just enter their own HVM their own code and just execute it.

168
00:11:38,800 --> 00:11:41,110
And you might be thinking What's the worst that can happen.

169
00:11:41,120 --> 00:11:42,140
It's just etched him out.

170
00:11:42,220 --> 00:11:46,870
Well what can happen is that someone could actually enter a script tag in run Javascript.

171
00:11:46,880 --> 00:11:48,460
So I'll show you that later.

172
00:11:48,490 --> 00:11:52,350
Right now though it's fine because we're not actually displaying the HD amount.

173
00:11:52,570 --> 00:11:56,410
If we wanted to it's a really simple change one character actually.

174
00:11:56,410 --> 00:11:58,020
So that's the show template.

175
00:11:58,320 --> 00:12:02,830
And if we look at the show template right now we're displaying blog dot body.

176
00:12:02,830 --> 00:12:10,300
If I change this equal sign to a dash Well that will actually do is take whatever blog that body returned

177
00:12:10,370 --> 00:12:11,740
and evaluate that.

178
00:12:11,800 --> 00:12:15,050
Run it as code rather than just displaying the string.

179
00:12:15,430 --> 00:12:21,290
So if I refresh the page we now get our strong tag right there.

180
00:12:21,440 --> 00:12:25,060
And if I expected it you'd see it's an actual strong tag.

181
00:12:25,060 --> 00:12:28,840
So changing it from an equal sign to a dash is really powerful.

182
00:12:28,870 --> 00:12:30,980
It then actually evaluates the code.

183
00:12:31,000 --> 00:12:38,020
So if we do another post same image and this time we do a first paragraph and the closing paragraph

184
00:12:38,830 --> 00:12:46,470
and then we duplicate that and then once get some larm ipsum and just steal some of these lines.

185
00:12:46,480 --> 00:12:49,390
We'll just have two simple paragraphs.

186
00:12:49,750 --> 00:12:51,430
You'll see that we end up now

187
00:12:54,130 --> 00:12:57,860
after our giant images we end up with two paragraphs here.

188
00:12:58,270 --> 00:13:03,070
Which is great because now a user can actually enter in content and specify the style.

189
00:13:03,310 --> 00:13:04,410
But here's a problem.

190
00:13:04,780 --> 00:13:10,600
So if I enter in something random here I can do this script

191
00:13:14,260 --> 00:13:19,460
and I can just type some code in here and just do something stupid like I asked you.

192
00:13:19,510 --> 00:13:19,880
Sure.

193
00:13:19,900 --> 00:13:21,760
All of these are misspelled.

194
00:13:22,790 --> 00:13:28,740
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

195
00:13:28,740 --> 00:13:32,200
be run a job script.

196
00:13:32,290 --> 00:13:37,180
So when I go to that page now I get that alert.

197
00:13:37,180 --> 00:13:41,950
Obviously a single alert is not that bad but you could probably imagine that things can escalate from

198
00:13:41,950 --> 00:13:42,840
there.

199
00:13:42,860 --> 00:13:46,860
There are ways of preventing that issue of getting rid of any script tags.

200
00:13:47,020 --> 00:13:51,160
I'll show you how to do that at the end is an optional video in this series.

201
00:13:51,160 --> 00:13:53,020
It's called sanitising our inputs.

202
00:13:53,140 --> 00:13:56,600
There if there is a package called the Express sanitiser that will do it for us.

203
00:13:56,590 --> 00:14:01,570
We just tell it to sanitize it property which will just get rid of any script tags inside of it.

204
00:14:01,570 --> 00:14:02,930
We don't have to write that code.

205
00:14:03,190 --> 00:14:04,030
OK.

206
00:14:04,370 --> 00:14:08,010
So let's go back though we have a few issues.

207
00:14:08,080 --> 00:14:09,640
One these images.

208
00:14:09,660 --> 00:14:11,370
Yes we'll get back to styling these.

209
00:14:11,470 --> 00:14:17,520
But let's start by truncating these posts so we don't see all this content on the index page.

210
00:14:17,650 --> 00:14:22,370
Let's leave it to the first 100 characters and then put an ellipsis afterwards.

211
00:14:22,510 --> 00:14:24,160
So delimit a string.

212
00:14:24,490 --> 00:14:25,850
It's actually really simple.

213
00:14:25,840 --> 00:14:31,750
We saw early on when we talked about javascript we use the substring method.

214
00:14:31,750 --> 00:14:42,800
So on our index page rather than the entire blog body will do clogged up body substring zero first character

215
00:14:42,860 --> 00:14:43,830
up until.

216
00:14:44,120 --> 00:14:48,430
And we want the hundred ish character that's fine for now.

217
00:14:48,430 --> 00:14:49,990
And I always get this wrong.

218
00:14:50,050 --> 00:14:52,680
It's a lower case s substring.

219
00:14:52,810 --> 00:14:56,380
Seems like it should be camel case like it's two words but it's not.

220
00:14:56,650 --> 00:14:57,160
All right.

221
00:14:57,250 --> 00:15:05,170
So now if we try this out you see that we now have these truncated posts and let's just add in that

222
00:15:05,170 --> 00:15:06,300
simple ellipsis here.

223
00:15:06,310 --> 00:15:13,540
So substring and then outside of that yes dot dot dot and then we have our rebore link.

224
00:15:13,610 --> 00:15:18,000
So now our show page serves a purpose where we see a little bit.

225
00:15:18,280 --> 00:15:21,470
And then you can click read more and see the entire post.

226
00:15:21,490 --> 00:15:22,000
Great.

227
00:15:22,000 --> 00:15:24,400
So we've covered a lot in this video.

228
00:15:24,680 --> 00:15:29,080
You talked about show talked about using the ID in the route how would to get requests.

229
00:15:29,090 --> 00:15:34,130
We set up the route we took the ID and found the corresponding blog then rendered a template.

230
00:15:34,420 --> 00:15:41,240
But we also talked about some new things including on the show template using the dash here rather than

231
00:15:41,230 --> 00:15:46,300
an equal sign which will actually render code to run the code and render the result.

232
00:15:46,390 --> 00:15:52,240
And then we also saw to date string which is a nice way of transforming a date into a better format

233
00:15:52,240 --> 00:15:52,510
.

234
00:15:52,510 --> 00:15:54,050
It's still not that flexible.

235
00:15:54,220 --> 00:15:59,860
There are great libraries which one called Moment Jap's which lets you specify the exact format that

236
00:15:59,870 --> 00:16:00,680
you want.

237
00:16:00,860 --> 00:16:08,710
We might want something that looks like the month slash the day slash the year and we might want something

238
00:16:08,710 --> 00:16:13,330
where the month is abbreviated or we might want the entire month and the entire day of the week rather

239
00:16:13,340 --> 00:16:15,330
than Sun in Nov.

240
00:16:15,430 --> 00:16:20,890
You can do that with moment J s much better way of handling dates if you want to be very explicit in

241
00:16:20,890 --> 00:16:21,880
the format that you want.

242
00:16:21,880 --> 00:16:27,010
Its just a simple library you can install it just like Jay Querrey or any other client side library

243
00:16:27,700 --> 00:16:29,330
but we're going to go with this for now.

244
00:16:29,500 --> 00:16:30,550
Built into javascript.

245
00:16:30,550 --> 00:16:34,450
We don't need any extra code other than a single line here.

246
00:16:34,570 --> 00:16:35,060
Great.

247
00:16:35,090 --> 00:16:40,120
And then the last thing with using substring instead of an index which is more for a view you haven't

248
00:16:40,120 --> 00:16:42,910
seen this in a while but we did see it early on.

249
00:16:43,060 --> 00:16:47,390
First argument is where we want to make the first cut second argument is where we want to make the second

250
00:16:47,380 --> 00:16:47,890
cut.

251
00:16:47,950 --> 00:16:49,880
We take everything in between.

252
00:16:49,900 --> 00:16:50,490
Great.

253
00:16:50,500 --> 00:16:50,760
All right.

254
00:16:50,770 --> 00:16:53,200
Can the next video we're going to work on update and edit