1
00:00:00,660 --> 00:00:03,760
I want to make our site kind of like
Twitter was in the early days.

2
00:00:03,760 --> 00:00:06,810
You could read all of the messages in the
system on the front page when you weren't

3
00:00:06,810 --> 00:00:11,140
logged in, and of course, you saw just a
single user's messages on their page.

4
00:00:11,140 --> 00:00:12,721
So, let's copy that.

5
00:00:12,721 --> 00:00:16,310
Okay, so let's build our homepage.

6
00:00:16,310 --> 00:00:19,704
So let's come back over here, and we have
our index route that we've so

7
00:00:19,704 --> 00:00:21,820
far done really nothing with.

8
00:00:21,820 --> 00:00:22,780
All right.

9
00:00:22,780 --> 00:00:25,200
So, on the index page, we need to get the
stream.

10
00:00:25,200 --> 00:00:26,220
We need to get stuff.

11
00:00:26,220 --> 00:00:31,758
So let's say, stream, our stream of posts
is models.Post.select,

12
00:00:31,758 --> 00:00:34,680
and I'm gonna set a limit of a 100.

13
00:00:34,680 --> 00:00:37,510
If we, say this was insanely popular and

14
00:00:37,510 --> 00:00:41,840
we had 5 million posts, we wouldn't want
to select all of them.

15
00:00:41,840 --> 00:00:43,430
So we're just gonna do a 100.

16
00:00:43,430 --> 00:00:46,460
Peewee does have stuff built in for
pagination, so you can have page one,

17
00:00:46,460 --> 00:00:47,910
page two, page three.

18
00:00:47,910 --> 00:00:51,190
I'll leave that to you to look up, but
it's right there in the doc.

19
00:00:51,190 --> 00:00:59,070
So then we want to return render_template
stream.html, stream equals stream.

20
00:00:59,070 --> 00:01:00,300
Cuz that's what we're gonna run.

21
00:01:00,300 --> 00:01:02,230
We're gonna return that stream.

22
00:01:02,230 --> 00:01:04,160
And let's go ahead and save that.

23
00:01:04,160 --> 00:01:06,244
Let's build this stream.html.

24
00:01:06,244 --> 00:01:08,511
I think that will be fairly
straightforward.

25
00:01:08,511 --> 00:01:09,751
We need to get a new template.

26
00:01:09,751 --> 00:01:11,777
[BLANK_AUDIO]

27
00:01:11,777 --> 00:01:13,547
stream.html.

28
00:01:13,547 --> 00:01:15,525
[BLANK_AUDIO]

29
00:01:15,525 --> 00:01:16,481
Okay.

30
00:01:16,481 --> 00:01:20,667
So now, in stream.html,

31
00:01:20,667 --> 00:01:25,970
let's do extends layout.html.

32
00:01:25,970 --> 00:01:29,160
And let's do block content.

33
00:01:31,540 --> 00:01:32,040
End block.

34
00:01:34,470 --> 00:01:37,512
And then we'll do for post in stream.

35
00:01:37,512 --> 00:01:43,809
[BLANK_AUDIO]

36
00:01:43,809 --> 00:01:46,219
End for, okay.

37
00:01:46,219 --> 00:01:50,526
So now we have to render each of our
hosts.

38
00:01:50,526 --> 00:01:54,590
And I kind of wonder what we want that to
look like.

39
00:01:54,590 --> 00:01:58,500
So, okay, I think you've got a pretty good
idea what we wanna have in here.

40
00:01:58,500 --> 00:02:02,030
We wanna make an article tag, cuz each of
these is an article.

41
00:02:03,970 --> 00:02:06,123
And let's do an h2.

42
00:02:06,123 --> 00:02:10,090
Inside that h2, let's do an a href.

43
00:02:11,490 --> 00:02:15,906
And we'll do URL for stream username

44
00:02:15,906 --> 00:02:21,060
equals post.user.username.

45
00:02:21,060 --> 00:02:24,720
In just a moment, we're gonna build a
thing where we can go to a user's page.

46
00:02:24,720 --> 00:02:28,144
And we wanna do post.user.username.

47
00:02:30,205 --> 00:02:32,062
Okay, so that's our h2.

48
00:02:32,062 --> 00:02:35,849
We're gonna add a thing here that has a
clock,

49
00:02:35,849 --> 00:02:40,909
just a little icon, and then we're gonna
add a time element.

50
00:02:42,310 --> 00:02:49,421
And this is mainly for a nice little
JavaScript thing, post.timestamp.

51
00:02:49,421 --> 00:02:53,490
And then we're gonna give this a class of

52
00:02:54,930 --> 00:02:59,200
distime to make sure our JavaScript can
find it.

53
00:02:59,200 --> 00:03:03,800
And then, to be valid HTML5, we're going
to put in our date time.

54
00:03:03,800 --> 00:03:06,660
We're gonna do post.timestamp.

55
00:03:06,660 --> 00:03:09,390
And then we wanna call strftime on this.

56
00:03:10,790 --> 00:03:15,380
And we wanna do year, month, day,

57
00:03:15,380 --> 00:03:20,429
a space, hour, minute, second, and

58
00:03:20,429 --> 00:03:26,090
yes, as always, I did have to look that
up.

59
00:03:27,320 --> 00:03:30,479
And inside here, we want to render out
post.timestamp.

60
00:03:30,479 --> 00:03:33,267
If you wanna make this look a little
nicer,

61
00:03:33,267 --> 00:03:38,500
then you probably wanna go ahead and copy
this strftime thing as well.

62
00:03:38,500 --> 00:03:40,350
I didn't originally have this in my plan.

63
00:03:40,350 --> 00:03:42,890
But now that I think about it, it's
probably a nicer thing to do.

64
00:03:44,240 --> 00:03:46,370
So that way, we print out the nicer
looking time.

65
00:03:47,590 --> 00:03:52,314
And then I want to add one more thing,
which we're just gonna leave as blank for

66
00:03:52,314 --> 00:03:53,040
right now.

67
00:03:53,040 --> 00:03:56,875
I wanna make a way for us to go see a
single post.

68
00:03:56,875 --> 00:04:01,317
So, what we're gonna do is we're gonna add
in a thing here,

69
00:04:01,317 --> 00:04:06,294
we'll give it a class equals view and
we'll just say view, 'kay.

70
00:04:06,294 --> 00:04:08,405
We're not gonna put the URL in there yet,
cuz we haven't built that.

71
00:04:09,815 --> 00:04:12,065
And then we're gonna do a div class equals
post.

72
00:04:13,485 --> 00:04:15,475
This is where the actual post content is.

73
00:04:16,655 --> 00:04:18,315
And we say post.content.

74
00:04:18,315 --> 00:04:21,520
Now, one of the nice things is that Flask,
or

75
00:04:21,520 --> 00:04:25,760
Jinja2 rather, won't render any malicious
HTML in here.

76
00:04:25,760 --> 00:04:28,862
So they put in HTML or whatever, it just
shows the tags,

77
00:04:28,862 --> 00:04:31,112
cuz we haven't marked it as being safe.

78
00:04:31,112 --> 00:04:32,360
'Kay.

79
00:04:32,360 --> 00:04:35,810
So, we have this thing here, this URL for
stream.

80
00:04:35,810 --> 00:04:39,960
So before we go look at this, we need to
actually have the stream view.

81
00:04:41,150 --> 00:04:43,924
So, let's go ahead and build that really
quick.

82
00:04:43,924 --> 00:04:47,420
Let's go back to app.py.

83
00:04:47,420 --> 00:04:52,426
We have index, app.route, and we'll say
stream, and

84
00:04:52,426 --> 00:04:58,914
then you remember that when we built it,
we said it might have a username.

85
00:04:58,914 --> 00:05:01,080
Oh, man, usernames.

86
00:05:01,080 --> 00:05:03,810
So we wanna make two routes, one for
stream, one for username.

87
00:05:03,810 --> 00:05:06,710
And we're actually gonna make this one
kinda smart, I think.

88
00:05:06,710 --> 00:05:11,180
We're gonna make it to where it can render
a couple of different ways.

89
00:05:12,805 --> 00:05:17,070
Okay, so by default, the template is going
to be stream.html,

90
00:05:17,070 --> 00:05:18,290
just like the one above.

91
00:05:18,290 --> 00:05:23,320
Because, in my mind, if you go to /stream,
then you get your stream.

92
00:05:23,320 --> 00:05:27,840
You get the posts that you and the people
you follow have posted.

93
00:05:27,840 --> 00:05:32,400
But if you go to stream/ and then a user
name, you get that user's posts.

94
00:05:32,400 --> 00:05:36,641
Okay, so, if there's a username and

95
00:05:36,641 --> 00:05:43,268
the username does not equal the current
user's username,

96
00:05:43,268 --> 00:05:50,029
then we want to do user equals
models.User.select.where

97
00:05:50,029 --> 00:05:55,490
models.User.username is like username.

98
00:05:55,490 --> 00:05:57,602
So what this does here, right there,

99
00:05:57,602 --> 00:06:01,020
is, that does a comparison without caring
about case.

100
00:06:01,020 --> 00:06:06,186
So if my user name is lower case
K-E-N-N-E-T-H-L-O-V-E,

101
00:06:06,186 --> 00:06:12,440
and you type in capital
K-E-N-N-E-T-H-L-O-V-E, it'll still match.

102
00:06:12,440 --> 00:06:19,700
So we'll do .get, and we'll say stream
EQUALS user.posts.limit 100.

103
00:06:19,700 --> 00:06:21,220
So, that user's posts.

104
00:06:24,250 --> 00:06:29,680
Else, otherwise, we've gotten a username
and we've gotten our own stuff, right?

105
00:06:29,680 --> 00:06:33,180
So it's our username, or, we left off the
username, and

106
00:06:33,180 --> 00:06:35,660
it's just, we're coming to our own page.

107
00:06:35,660 --> 00:06:42,500
stream equals current_user.get_stream,

108
00:06:42,500 --> 00:06:46,800
and limit is gonna be 100.

109
00:06:46,800 --> 00:06:53,328
And user equals current_user cuz we may
need a user while we're in there.

110
00:06:53,328 --> 00:06:56,521
All right?

111
00:06:56,521 --> 00:07:02,090
Now, regardless of what happened up there,
if we got a username,

112
00:07:03,090 --> 00:07:08,115
then we wanna set template equal to
user_stream.html.

113
00:07:08,115 --> 00:07:14,130
And we're gonna return render_template.

114
00:07:14,130 --> 00:07:15,540
We're gonna render whatever template we
picked.

115
00:07:16,700 --> 00:07:20,300
Our stream is gonna be the stream, and our
user is gonna be our user.