1
00:00:05,250 --> 00:00:06,410
Welcome back everyone.

2
00:00:06,420 --> 00:00:10,350
We're going to continue working on our project by setting up some core views.

3
00:00:10,350 --> 00:00:15,360
Those are the views for kind of the home page and also set up some basic templates including our base

4
00:00:15,450 --> 00:00:16,770
HVM our file.

5
00:00:16,770 --> 00:00:19,200
Let's head back over to our project text editor.

6
00:00:19,200 --> 00:00:22,770
All right here we have the apple pie file we were setting up before.

7
00:00:22,920 --> 00:00:26,210
We're going to now head over to our core page.

8
00:00:26,220 --> 00:00:32,520
So remember we have this core with in it and views and we're going to set up those views and then link

9
00:00:32,580 --> 00:00:34,200
them to some templates.

10
00:00:34,340 --> 00:00:39,640
So to begin with we're going to do is start off by opening our views up py file.

11
00:00:39,690 --> 00:00:44,580
So again to make it clear this is under core views not pie.

12
00:00:45,060 --> 00:00:54,970
And what I'm going to be doing is saying from flask in poor render template request and we're going

13
00:00:54,970 --> 00:00:58,270
to be setting up a blueprints and zoom out just a little bit here.

14
00:00:58,390 --> 00:01:08,140
And I'm also going to import blueprints then we're going to say core is equal to blueprints and we'll

15
00:01:08,140 --> 00:01:15,070
say core as the name of this blueprint and then will pass in the underscore underscore name underscore

16
00:01:15,070 --> 00:01:16,210
underscore.

17
00:01:16,240 --> 00:01:21,010
So if you want to review how blueprints work you can check out the structuring larger flask Applications

18
00:01:21,010 --> 00:01:26,650
section of the course so we'll start setting up our routes will say core routes.

19
00:01:27,140 --> 00:01:29,890
And this is just going to point to the main page.

20
00:01:30,020 --> 00:01:38,020
So we'll call this our index view and here we're going to return render a template and we'll say indexed

21
00:01:38,270 --> 00:01:39,310
each T.M..

22
00:01:39,410 --> 00:01:43,970
Now later on we're going to be passing in a list of blog posts but we haven't set up our blog posts

23
00:01:43,970 --> 00:01:47,300
models so we'll just pass an index h team L here.

24
00:01:47,300 --> 00:01:49,660
So there's still more to come.

25
00:01:49,670 --> 00:01:54,890
So keep that in mind because remember when we were first viewing that home page it has a list of all

26
00:01:54,890 --> 00:01:59,740
the blog posts available right now just going to kind of be a very basic home page and then we'll see

27
00:01:59,750 --> 00:02:02,400
at core route.

28
00:02:02,750 --> 00:02:06,620
And let's go ahead and make an info page so this will just be general information about the company

29
00:02:07,430 --> 00:02:16,520
and we'll call this view info than other info we're going to do is just say return render templates

30
00:02:16,850 --> 00:02:22,490
and this will point to a template called info H.T. mail and then go ahead and save that.

31
00:02:22,520 --> 00:02:29,270
So underneath templates what I'm going to do is I'm going to start off by creating a base HVM l file.

32
00:02:29,270 --> 00:02:31,130
So this is our base h t m l file.

33
00:02:31,130 --> 00:02:34,520
So I'm going to say T.M. enter for it to autocomplete.

34
00:02:34,550 --> 00:02:39,610
Make sure it's save this nature html file in order to get that autocomplete and inside of the head.

35
00:02:39,620 --> 00:02:45,720
I'm going to copy and paste the links from the bootstrap documentation that we've done many times before.

36
00:02:45,740 --> 00:02:48,180
So right here inside the head and a copy and paste.

37
00:02:48,200 --> 00:02:53,300
So my style sheets as well as the J query code and the bootstrap CD ends.

38
00:02:53,360 --> 00:02:58,070
So we have these links from the bootstrap documentation and then in the body.

39
00:02:58,070 --> 00:03:00,800
What are you going to do is set up my navigation bar.

40
00:03:01,220 --> 00:03:04,510
So this navigation bar it's going to show up at the top of the web page.

41
00:03:04,910 --> 00:03:12,440
And right now are just going to set it as an unordered list for the first thing and we'll say class

42
00:03:12,530 --> 00:03:17,070
is equal to NAV so we can link it to a navigation bar.

43
00:03:17,220 --> 00:03:21,000
And there's lots of different ways you can do this kind of the most basic way to set up a navigation

44
00:03:21,000 --> 00:03:21,490
bar.

45
00:03:21,570 --> 00:03:25,700
You can always check out the bootstrap documentation for like a dark navigation bar.

46
00:03:25,710 --> 00:03:26,580
What's wider.

47
00:03:26,580 --> 00:03:29,180
And so on but it's unordered lists.

48
00:03:29,200 --> 00:03:39,750
We're not going to say ally and each list item will say class is now of that link and then inside of

49
00:03:39,750 --> 00:03:46,050
this or are going to do is have an anchor that's going to link to another part of the page.

50
00:03:46,060 --> 00:03:57,880
So for instance right now we can say A.F. And here we can say that home its breath is going to be your

51
00:03:57,880 --> 00:04:06,000
L underscore 4 and here will just link it to core index.

52
00:04:06,140 --> 00:04:12,050
So that's going to have a text saying home on the navigation bar that links back to the actual core

53
00:04:12,080 --> 00:04:15,720
index page or over we say core because we're using that blueprint.

54
00:04:15,800 --> 00:04:17,660
We don't just say index.

55
00:04:17,660 --> 00:04:18,080
OK.

56
00:04:18,260 --> 00:04:22,340
So this is essentially what every single navigationally item is going to look like.

57
00:04:22,820 --> 00:04:24,800
So let's add one more for that info.

58
00:04:25,750 --> 00:04:31,280
All say info here and then type in info or we can even say about.

59
00:04:31,310 --> 00:04:37,660
So like about the company and then we're going to add in some more links that are actually not going

60
00:04:37,660 --> 00:04:43,100
to be functional first but just go ahead and say the breath is a single hash tag.

61
00:04:43,120 --> 00:04:44,830
So that basically means it's empty.

62
00:04:44,950 --> 00:04:48,520
And these are going to be our log in log out views.

63
00:04:48,640 --> 00:04:51,600
So we're going to create those right now but we're not actually going to use them yet.

64
00:04:51,880 --> 00:04:58,780
So we'll say we're going to need of you to log out as a user and then we're also going to when a user

65
00:04:58,780 --> 00:05:05,160
is locked in have them be able to view their own account and then we'll also want them to be able to

66
00:05:05,190 --> 00:05:08,900
create a post again notice right now.

67
00:05:08,900 --> 00:05:10,690
These traps are essentially blank.

68
00:05:10,760 --> 00:05:15,130
So we're also be later on adding in some logic to check for users authenticated.

69
00:05:15,320 --> 00:05:16,600
But we haven't really introduced those yet.

70
00:05:16,610 --> 00:05:18,970
So we're kind of building this out slowly.

71
00:05:19,450 --> 00:05:19,840
OK.

72
00:05:19,940 --> 00:05:25,670
So we have our log out account and create post and then we'll go ahead and create the other links that

73
00:05:25,670 --> 00:05:27,930
we want which is a log link.

74
00:05:28,250 --> 00:05:29,670
So we'll say log in.

75
00:05:29,780 --> 00:05:33,710
And another one if they're not logged in they may want to register as an user.

76
00:05:33,710 --> 00:05:36,890
So I will say register.

77
00:05:36,950 --> 00:05:37,460
There we go.

78
00:05:37,460 --> 00:05:39,350
So there are an ordered list ready to go.

79
00:05:39,350 --> 00:05:46,220
The last thing I want to do is set up a container division so I'll say class container and that kind

80
00:05:46,220 --> 00:05:51,890
of fits everything center middle and then this is where we'll start off and create our block and will

81
00:05:51,890 --> 00:05:54,010
color block content.

82
00:05:54,050 --> 00:05:54,550
OK.

83
00:05:54,710 --> 00:05:57,490
So we did quite a bit of stuff right here in our base HTL.

84
00:05:57,730 --> 00:06:02,840
Let's zoom out so we can get the basic understanding of it all we did really was we did or bootstrap

85
00:06:02,870 --> 00:06:03,570
imports.

86
00:06:03,710 --> 00:06:08,350
And then inside the body was set up our navigation bar right now has a link for everything.

87
00:06:08,570 --> 00:06:12,830
Typically we were actually running this Web site we're not going to want to show log out log in and

88
00:06:12,830 --> 00:06:14,240
register all at once.

89
00:06:14,330 --> 00:06:17,850
We'll only want to show certain things that pending If the user has been authenticated or not.

90
00:06:18,020 --> 00:06:21,500
So later on we'll be adding in some logic when we actually create users.

91
00:06:21,520 --> 00:06:26,660
But right now he created this navigation bar so it saved those changes and we're going to create two

92
00:06:26,660 --> 00:06:27,290
more views.

93
00:06:27,290 --> 00:06:31,490
One is the index page view and the other one is the information page.

94
00:06:31,490 --> 00:06:36,380
So underneath the templates we're going to say a new file.

95
00:06:36,420 --> 00:06:43,220
So let's say that in New File under these templates and we'll say indexed the HTL.

96
00:06:43,310 --> 00:06:45,010
So here's our extended C.M..

97
00:06:45,200 --> 00:06:47,960
We're going to say it extends from base the each T.M..

98
00:06:47,980 --> 00:06:51,920
So now has that nice navigation bar and this one.

99
00:06:51,950 --> 00:06:53,870
We say block contents.

100
00:06:54,380 --> 00:06:58,070
And here I'm just going to create a jumbotron.

101
00:06:58,250 --> 00:07:06,810
So that's a type of component from Bootstrap elysée H-1 puppy company blog.

102
00:07:07,040 --> 00:07:08,790
So essentially the welcome page for that.

103
00:07:08,930 --> 00:07:10,180
So that's all it's going to have for now.

104
00:07:10,180 --> 00:07:15,200
Later on we'll see that we're going to add in logic to actually display the blog post but we'll need

105
00:07:15,200 --> 00:07:17,850
to do some more views in order for that to work.

106
00:07:17,900 --> 00:07:21,000
And after that we'll go ahead and set up our info that each team.

107
00:07:21,270 --> 00:07:24,690
So I'll say new file info.

108
00:07:24,790 --> 00:07:30,920
HMO and again for this we're going to extend from that baseline HTL file and then we're going to set

109
00:07:30,920 --> 00:07:33,390
up our block content.

110
00:07:33,740 --> 00:07:36,560
And here let's have this be a Jumbotron as well.

111
00:07:36,740 --> 00:07:45,180
So say Jumbotron H-1 info about our company and then is going to create some Lorem Ipsum here instead

112
00:07:45,200 --> 00:07:49,160
of a paragraph type so just type in the entry that paragraph tag.

113
00:07:49,190 --> 00:07:53,490
And then if you start typing out Lorem you should be able to then enter lorem ipsum.

114
00:07:53,660 --> 00:08:00,580
And this is just some kind of nonsense Latin characters are words in order to have us fill some space.

115
00:08:00,650 --> 00:08:01,170
OK.

116
00:08:01,340 --> 00:08:06,320
So let's go ahead and mix this all actually connected in order to do that we need to make sure we registered

117
00:08:06,320 --> 00:08:07,110
that blueprint.

118
00:08:07,130 --> 00:08:13,700
So remember back in core we have this blueprint for core what I need to do is now register that inside

119
00:08:13,700 --> 00:08:17,180
my in it PI file in order for it to successfully connect.

120
00:08:17,180 --> 00:08:23,230
So what I'm going to do is come to it by Rimmer's puppy company blog and at that pie.

121
00:08:23,660 --> 00:08:37,050
And what I will be doing here is saying from puppy company blog that core views import core.

122
00:08:37,430 --> 00:08:43,720
So now that important core because remember in views that pie here we have this core blueprint so I've

123
00:08:43,790 --> 00:08:45,910
imported that here that's that blueprint.

124
00:08:45,950 --> 00:08:47,070
Now you just need to register it.

125
00:08:47,200 --> 00:08:54,330
So I'm going to say take the app and register the blueprint of Core.

126
00:08:54,680 --> 00:08:55,140
OK.

127
00:08:55,350 --> 00:08:59,570
So we're going to be doing this for the users the blog posts and the error pages.

128
00:08:59,580 --> 00:09:02,910
But right now we're just registering one single blueprint.

129
00:09:03,330 --> 00:09:04,810
So let's save that as well.

130
00:09:04,830 --> 00:09:09,050
And now that should be able to link to our overall app thought pie.

131
00:09:09,180 --> 00:09:11,960
So let's look at the main components again before we actually run this.

132
00:09:12,000 --> 00:09:17,220
We have our views that we created we created a core blueprint and routed that using the index and info

133
00:09:17,220 --> 00:09:22,390
pages and those views are now linked to these template files along with this base h team L.

134
00:09:22,680 --> 00:09:26,830
And then we are in it PI registered that blueprint.

135
00:09:26,850 --> 00:09:28,930
So let's run this and see how it works.

136
00:09:29,280 --> 00:09:33,490
Well say Python app that PI enter to run it looks like it's running.

137
00:09:33,510 --> 00:09:40,080
So let's bring in a browser so we can check it out and your web site should now look something like

138
00:09:40,080 --> 00:09:40,680
this.

139
00:09:40,680 --> 00:09:42,210
Let me zoom in just a little bit.

140
00:09:42,210 --> 00:09:48,420
Notice we have this navigation bar we have a home about the log out account create post log in and register.

141
00:09:48,630 --> 00:09:51,120
All of these are not going to be viewable at the end.

142
00:09:51,120 --> 00:09:54,610
We'll only view some of them depending if they're locked in or not.

143
00:09:54,620 --> 00:09:59,340
But right now if you click on any of the later ones you shouldn't see any links in the only ones that

144
00:09:59,340 --> 00:10:02,310
will work or the home which will basically refresh this.

145
00:10:02,310 --> 00:10:06,970
And then if you click on About It will take you to this info about our company.

146
00:10:06,990 --> 00:10:07,560
OK.

147
00:10:07,680 --> 00:10:10,290
So we've set up our core views.

148
00:10:10,290 --> 00:10:14,430
We're still going to work a lot more on this home page in order to list out the blog post.

149
00:10:14,430 --> 00:10:19,710
But so far we set up our core blueprint which is a big step forward as far as setting up the components

150
00:10:20,040 --> 00:10:24,390
coming up next we're going to continue to build off this project by beginning to set up our users and

151
00:10:24,390 --> 00:10:27,530
blog posts and seeing how those models will work for each other.

152
00:10:27,540 --> 00:10:28,680
We'll see you at the next lecture.