1
00:00:05,360 --> 00:00:08,380
Welcome back to 3 for databases and views.

2
00:00:08,420 --> 00:00:12,260
We're going to continue right where we left off last time and then fill out all the tumult template

3
00:00:12,260 --> 00:00:14,870
files and then check to see if our site works.

4
00:00:14,870 --> 00:00:16,950
All right let's head back to sex ed..

5
00:00:17,030 --> 00:00:17,270
OK.

6
00:00:17,270 --> 00:00:17,700
Here we are.

7
00:00:17,710 --> 00:00:21,090
Back at the text editor I have a base h team l file.

8
00:00:21,110 --> 00:00:25,750
I'm going to use this to set up my navigation bar and then we'll extend that to the home page.

9
00:00:25,880 --> 00:00:28,760
The ad page delete page and list page.

10
00:00:28,760 --> 00:00:29,350
Let's get started.

11
00:00:29,350 --> 00:00:32,600
For base h T.M. going to collapse that sidebar.

12
00:00:32,600 --> 00:00:39,140
And for this once save say that as an HMO I can type each T.M. and then see this auto completion here

13
00:00:39,710 --> 00:00:42,300
I'm going to add in the bootstrap code for the head.

14
00:00:42,300 --> 00:00:47,420
This is just something I copy and paste from either the provided notes or the bootstrap documentation

15
00:00:47,420 --> 00:00:49,280
pages we previously discussed.

16
00:00:49,280 --> 00:00:53,200
Essentially just the link for the stylesheet and then the jey query source as well.

17
00:00:53,920 --> 00:00:55,150
So I want to set that up.

18
00:00:55,280 --> 00:01:00,940
We're going to do is start by creating a navigation bar in the body.

19
00:01:00,940 --> 00:01:04,380
So I'm going to zoom in here just a little bit and let's start.

20
00:01:04,720 --> 00:01:06,820
We're going to say Nav..

21
00:01:07,150 --> 00:01:11,170
And then for this Nev. we're going to give it a bootstrap class.

22
00:01:11,440 --> 00:01:14,220
Again it's up to you if you want to just copy and paste this.

23
00:01:14,360 --> 00:01:15,920
So it's quite a long class name.

24
00:01:15,940 --> 00:01:19,780
I'm going to just copy and paste from the notes and this is something I just copy and paste it from

25
00:01:20,080 --> 00:01:21,270
Bootstrap documentation.

26
00:01:21,280 --> 00:01:27,760
It's nav bar space nav bar expand Elgie nav bar national light B.G. dash light.

27
00:01:27,880 --> 00:01:34,780
Then once you've done that we're going to do is set a div inside of that NAV and then here will say

28
00:01:35,050 --> 00:01:37,600
the class's nav bar.

29
00:01:37,690 --> 00:01:43,050
Now and then we're going to create some anchor tags with some references.

30
00:01:43,050 --> 00:01:52,170
So here the ref is just going to be a your all for and then some view and the class we're going to give

31
00:01:52,170 --> 00:02:01,510
this incontact will say class is equal to and this class is Nav. dash item space.

32
00:02:01,540 --> 00:02:07,950
Now dash link and then once you've done that we'll have some sort of text here for the actual text that

33
00:02:07,950 --> 00:02:10,120
shows up in the navigation bar.

34
00:02:10,140 --> 00:02:15,550
I'm going to copy this and paste this a couple times for each major page in our Web site.

35
00:02:15,600 --> 00:02:22,890
So we'll have a home page we'll have an add up page a list of pups page in a delete page.

36
00:02:22,950 --> 00:02:30,060
So let's have the first one be home so change the text to be home and we want this to be the URL for

37
00:02:30,120 --> 00:02:36,980
index because if we look back at our adoption site the very first route right here is the index function.

38
00:02:37,020 --> 00:02:42,590
Then the next one is we're going to do as our pup list pup and then delete pup.

39
00:02:42,600 --> 00:02:49,700
So let's head back to base X-amount those in so the text for this one will be add up and then we'll

40
00:02:49,700 --> 00:02:58,150
say this is your L4 add underscore pup and then the next one will be list underscore the text there.

41
00:02:58,170 --> 00:03:01,310
We can just say list of pups.

42
00:03:02,280 --> 00:03:10,220
And then your Earl here is going to be the E-L underscore pup and that will make the text say delete

43
00:03:12,990 --> 00:03:20,760
delete OK save that and then the last thing I want to do is make sure that we set up our block.

44
00:03:20,830 --> 00:03:26,890
So after that allegation bar still in the body I'm going to say create a block and I'm going to call

45
00:03:26,890 --> 00:03:32,410
this block content and let's go ahead and extend it to our home page.

46
00:03:32,680 --> 00:03:36,300
So our home page we're going to say extends Basestar.

47
00:03:36,340 --> 00:03:38,250
H T.M..

48
00:03:38,410 --> 00:03:41,640
And then we're going to set up the block content.

49
00:03:41,810 --> 00:03:45,920
And right now Elisha's put a header one that says welcome.

50
00:03:45,970 --> 00:03:46,310
All right.

51
00:03:46,320 --> 00:03:50,900
Now that we have a working home that each T.M. we want to go ahead and run the site.

52
00:03:50,910 --> 00:03:56,880
But before we do that let's set our flask app environment variable and then actually set up our migrations

53
00:03:56,970 --> 00:03:57,980
as well.

54
00:03:57,990 --> 00:04:02,340
So the first thing I want to do is notice right now I don't have my flask environment activated.

55
00:04:02,580 --> 00:04:03,890
So I will go ahead and do that.

56
00:04:03,900 --> 00:04:12,630
I will say activate and in my case I called it my flask in V I enter and notice my environment is activated.

57
00:04:12,630 --> 00:04:17,160
This is technically optional if you're using everything in your base environment that you don't need

58
00:04:17,160 --> 00:04:18,650
to use a virtual one.

59
00:04:18,660 --> 00:04:22,530
Again go ahead and review the virtual environment lectures for more information on that.

60
00:04:22,830 --> 00:04:30,930
But once we set up our environment what I need to do is set my flask app a say set flask underscore

61
00:04:31,050 --> 00:04:38,660
app equal to and then in my case I called it adoption underscore site pi.

62
00:04:38,880 --> 00:04:44,030
Remember that if you're using Mac OS or Linux The key word is export not Flast or not set.

63
00:04:44,370 --> 00:04:46,510
So let me run that.

64
00:04:46,560 --> 00:04:55,770
So that should set our flask up and the next thing I want to do is say flask D-B in it enter and then

65
00:04:55,770 --> 00:04:58,130
after a little bit it should initiate everything.

66
00:04:58,200 --> 00:04:59,800
So it looks like that's good to go.

67
00:05:00,030 --> 00:05:08,800
And then after that we're going to say flask D-B migrate and then set a message.

68
00:05:08,810 --> 00:05:14,620
So here we're going to say new tables and turn run that.

69
00:05:14,880 --> 00:05:22,130
So now we have a migrations folder created and the last thing I want to do is say flask D.B upgrade

70
00:05:23,270 --> 00:05:28,580
enter and that it should upgrade the tables to now match up with the models now that we've done that

71
00:05:28,700 --> 00:05:34,640
it's time to actually test our script will say Python and then I'm going to run adoption site that PI

72
00:05:35,300 --> 00:05:38,450
enter and I should see it running looks like it's running there.

73
00:05:38,510 --> 00:05:41,950
So we bring it back into the browser and make sure that everything's working.

74
00:05:42,020 --> 00:05:48,470
I'm going to bring it over and then if you bring it over it should look something like this.

75
00:05:48,480 --> 00:05:49,780
We see our navigation bar.

76
00:05:49,780 --> 00:05:52,440
Home output list the pups and the pup.

77
00:05:52,560 --> 00:05:54,620
And if you click on these they should work.

78
00:05:54,630 --> 00:05:58,260
But right now those templates are completely empty so they won't actually lead anywhere.

79
00:05:58,260 --> 00:06:04,510
It's just an empty page but it looks like all our views are connected correctly to our navigation bar.

80
00:06:04,530 --> 00:06:09,930
All right now we're going to continue the work of creating our add up view the list of pup's view and

81
00:06:09,930 --> 00:06:11,150
the view.

82
00:06:11,310 --> 00:06:14,180
So let's go back to the templates and finish that off.

83
00:06:14,190 --> 00:06:16,680
OK let's begin with the ad him.

84
00:06:16,940 --> 00:06:20,430
And remember here we're going to connect the form from our adoption site.

85
00:06:20,460 --> 00:06:23,520
If we scroll down we already have the pup view.

86
00:06:23,520 --> 00:06:25,230
We just need to connect this form.

87
00:06:25,320 --> 00:06:29,630
Remember this form is accepting a name and then it's going to redirect to lists pup.

88
00:06:29,640 --> 00:06:34,640
So let me expand the room just a little bit here and let's work on AD H T.M..

89
00:06:34,710 --> 00:06:42,960
First off I'm going to say extends well we're going to extend from base HMO and then we're going to

90
00:06:42,960 --> 00:06:48,560
set up our block content and let's hit it up with a jumbotron.

91
00:06:48,600 --> 00:06:54,020
Some of this is not very mandatory but just to not look or make it look a little better.

92
00:06:54,090 --> 00:07:01,920
So we have our Jumbotron will create a header here that says have a puppy that needs to be adopted.

93
00:07:01,920 --> 00:07:02,930
Question mark.

94
00:07:03,100 --> 00:07:12,640
Well we'll have them added and we'll say add a new puppy to our database and then we want to insert

95
00:07:12,640 --> 00:07:13,830
the form below.

96
00:07:13,900 --> 00:07:20,470
So we create a whoops a form h t m l and the only thing we need to fill out here we don't need to fill

97
00:07:20,470 --> 00:07:24,820
out the action that redirects being handle on the flask end and we also don't need to worry about the

98
00:07:24,820 --> 00:07:27,610
class unless you want to stylize the form further.

99
00:07:27,850 --> 00:07:34,880
But right here we'll just say the method is post and then we're going to create a hit and tag will save

100
00:07:34,880 --> 00:07:43,990
form hidden underscore tag and then we'll create the form label for the name form name label.

101
00:07:44,020 --> 00:07:51,130
And then right next to it we're going to insert form name and then right after that we're going to say

102
00:07:51,670 --> 00:07:54,360
form thought submit.

103
00:07:54,380 --> 00:07:54,660
All right.

104
00:07:54,680 --> 00:07:55,760
So those are those shape.

105
00:07:56,020 --> 00:08:00,980
And let's actually go back to our home page Tim Page and make it look a little nicer and have it look

106
00:08:00,980 --> 00:08:02,380
more uniform why.

107
00:08:02,420 --> 00:08:04,510
Making the first page also a jumbotron.

108
00:08:04,570 --> 00:08:10,240
So going to grab this welcome in I'm going to put it inside that Jumbotron and save those changes.

109
00:08:10,240 --> 00:08:10,850
OK.

110
00:08:10,990 --> 00:08:14,570
So we have this form for adding let's make sure it actually works.

111
00:08:14,590 --> 00:08:17,020
I'm going to run this again.

112
00:08:17,020 --> 00:08:20,380
So Python adoption page or adoption site.

113
00:08:20,440 --> 00:08:23,670
Let's head over to the browser and make sure it's working.

114
00:08:23,680 --> 00:08:26,260
So here's my page going to refresh.

115
00:08:26,260 --> 00:08:27,250
Now it's in a jumbotron.

116
00:08:27,240 --> 00:08:32,470
If I could add up now I could see this form have a puppy that needs to be adopted added new puppy toward

117
00:08:32,500 --> 00:08:35,090
database name of puppy puppy.

118
00:08:35,170 --> 00:08:39,930
So we're going to set up a list of pups and the pups so you and the Loxley check to make sure it works.

119
00:08:40,610 --> 00:08:43,850
So continuing on next one up is the list pups.

120
00:08:44,610 --> 00:08:50,340
So we'll do a list of all the puppies and kind of the same aspects here we want to make sure we extend

121
00:08:51,340 --> 00:08:56,710
from the base a HTML page will say extends base HMO.

122
00:08:57,050 --> 00:09:05,240
Set up our blocks for the content and they'll we'll make it also on a Jumbotron we'll say jumbo AUPs

123
00:09:05,300 --> 00:09:16,180
jumbotron and then say H-1 here is a list of all available puppies and then we're going to use a little

124
00:09:16,180 --> 00:09:20,880
bit of template formatting we're going to create an ordered list.

125
00:09:20,950 --> 00:09:22,720
And let's look back at the list view

126
00:09:25,510 --> 00:09:30,730
remember here we're sending back puppies where we queried the puppy database for all the puppies so

127
00:09:30,730 --> 00:09:35,760
puppies here is a list of puppies and we're sending it back to the lists h T.M..

128
00:09:35,860 --> 00:09:45,680
So over here we're going to do then is say for pop in that puppies list that sent back will create a

129
00:09:45,680 --> 00:09:49,170
list item for each pup.

130
00:09:49,170 --> 00:09:53,760
So here we're going to see bulleted list of every puppy inside the database.

131
00:09:53,850 --> 00:09:55,440
I'm going to save that.

132
00:09:55,850 --> 00:10:01,140
And then the last video I want to make is that the view essentially is going to be a form that shows

133
00:10:01,320 --> 00:10:04,560
or allows you to fill out what you want to delete.

134
00:10:04,590 --> 00:10:14,550
So I'm going to say extends base h T.M. and it will say block contents.

135
00:10:14,740 --> 00:10:16,700
Let's make a jumbotron.

136
00:10:18,310 --> 00:10:25,170
Class and here we're going to say H-1 did a puppy get adopted.

137
00:10:26,980 --> 00:10:30,110
No say if so what.

138
00:10:30,670 --> 00:10:39,000
If so please fill out their ID to remove them from the database.

139
00:10:40,860 --> 00:10:41,440
OK.

140
00:10:41,920 --> 00:10:45,690
And then we're going to hear is Connect that back with the what's the form.

141
00:10:45,700 --> 00:10:49,220
So we have our form again no need to specify class or action here.

142
00:10:49,220 --> 00:10:53,620
That's pretty much all be handled either by bootstrap or by our flask application.

143
00:10:53,770 --> 00:11:02,720
We'll set this to post and then we're going to say form he didn't tag and make sure that's open close

144
00:11:02,750 --> 00:11:13,480
princes there we're going to say take the form id label and set that next to the form id and then take

145
00:11:13,480 --> 00:11:16,220
it and set up our submit button.

146
00:11:16,330 --> 00:11:19,800
Save that and now we pretty much have all the items connected.

147
00:11:19,960 --> 00:11:24,240
So let's do a very quick run through and make sure that our web sites are actually functioning.

148
00:11:24,540 --> 00:11:26,530
Going to restart this website.

149
00:11:26,650 --> 00:11:27,950
And let's go to the browser.

150
00:11:28,890 --> 00:11:29,990
Here's my home page.

151
00:11:30,000 --> 00:11:33,420
I'm going to zoom in a little more so it's easier for you to read.

152
00:11:33,420 --> 00:11:37,360
Keep in mind as I zoom in that made the actual navigation bar.

153
00:11:37,470 --> 00:11:39,090
So we're going to zoom in.

154
00:11:39,150 --> 00:11:39,480
There we go.

155
00:11:39,480 --> 00:11:42,320
Let's zoom in this and it's at a puppy.

156
00:11:42,330 --> 00:11:44,340
So the name of our puppy the first one.

157
00:11:44,460 --> 00:11:47,390
Let's go ahead and say Rufus boy to click out a puppy.

158
00:11:47,760 --> 00:11:51,540
And now it says here's a list of all available puppies says puppy named Rufus.

159
00:11:51,540 --> 00:11:51,870
Nice.

160
00:11:51,870 --> 00:11:53,040
Looks like it's working.

161
00:11:53,100 --> 00:11:56,020
And Rufus by default should have an idea of one.

162
00:11:56,160 --> 00:11:58,440
To add one more puppy in here.

163
00:11:58,530 --> 00:12:00,180
Let's go ahead and add two more puppies.

164
00:12:00,360 --> 00:12:06,300
We'll say Frankie now I see Rufus and Frankie going to say at a pup and let's say Sammy I'm going to

165
00:12:06,300 --> 00:12:06,980
add a puppy.

166
00:12:07,020 --> 00:12:12,070
So now I have Rufus Frankie and Sammy one two and three and have a quick list of all pups.

167
00:12:12,090 --> 00:12:13,230
That's my list.

168
00:12:13,500 --> 00:12:15,020
Now let's remove one of the puppies.

169
00:12:15,030 --> 00:12:15,810
I'm going to say delete.

170
00:12:15,810 --> 00:12:17,870
Pup said of the puppy get adopted.

171
00:12:17,880 --> 00:12:19,680
Let's imagine the first one got adopted.

172
00:12:19,680 --> 00:12:22,320
So Rufus is going to get adopted.

173
00:12:22,320 --> 00:12:25,080
So I will enter a one here for Rufus to get adopted.

174
00:12:25,110 --> 00:12:30,360
So say one removed puppy and now here's a list of all available puppies.

175
00:12:30,390 --> 00:12:36,420
I only see Frankie and Sammy so Rufus has been adopted and he's been removed from the list of puppies.

176
00:12:36,480 --> 00:12:38,130
So we have full functionality.

177
00:12:38,250 --> 00:12:43,650
We have our home page the ability to add a puppy the ability to see a list of puppies and the ability

178
00:12:43,650 --> 00:12:44,720
to delete puppies.

179
00:12:44,760 --> 00:12:46,980
And that's the main components of any Web site.

180
00:12:47,070 --> 00:12:50,880
You have a home page you have a form that accepts user information.

181
00:12:51,090 --> 00:12:56,430
You have a way of displaying information from your database and then you have a method of removing information

182
00:12:56,430 --> 00:12:57,660
from your database.

183
00:12:57,660 --> 00:13:00,380
These are the key components of any major Web site.

184
00:13:00,420 --> 00:13:04,720
And if you understand this then you pretty much understand how to make any sort of web site.

185
00:13:04,890 --> 00:13:09,750
After that it's just a matter of details of how do you return back a video instead of a list of text

186
00:13:10,020 --> 00:13:13,670
or how to turn back an image or how do you do user authentication.

187
00:13:13,770 --> 00:13:20,150
All of that stuff is just adding onto this main principle idea of being able to have a home page and

188
00:13:20,160 --> 00:13:25,830
stuff through a form retrieve information report it back and then remove information as long as you

189
00:13:25,830 --> 00:13:27,390
understand these key concepts.

190
00:13:27,390 --> 00:13:31,460
You'll have the ability to pretty much make any sort of website you want with class.

191
00:13:31,470 --> 00:13:32,000
All right.

192
00:13:32,130 --> 00:13:36,600
If you have any questions feel free to post the Q&A forums or I'm going to do now is just a very quick

193
00:13:36,630 --> 00:13:38,810
rundown and review of everything we just did.

194
00:13:39,820 --> 00:13:46,540
So coming back let's take a look at our adoption site but PI what we did here is going to zoom much

195
00:13:46,540 --> 00:13:48,480
a little bit so we can see it clearly.

196
00:13:48,670 --> 00:13:50,060
We have our imports.

197
00:13:50,200 --> 00:13:51,570
We set up replication.

198
00:13:51,710 --> 00:13:57,900
So the configuration as well is the database we have our model which the puppy model.

199
00:13:58,100 --> 00:14:03,860
Then we have our view functions one for the home page one for adding and all these have forms that we

200
00:14:03,860 --> 00:14:10,250
set up here the add form and delete form later on we'll be moving this model to its own models up by

201
00:14:10,250 --> 00:14:15,540
file and then once we set up our functions for the views we just connect them to our templates.

202
00:14:15,560 --> 00:14:19,750
I remember we used a base template that we extend to the other pages.

203
00:14:19,760 --> 00:14:20,210
All right.

204
00:14:20,360 --> 00:14:21,380
That's really the basics.

205
00:14:21,380 --> 00:14:25,790
Make sure you review this code very carefully and have a full understanding of it before continuing

206
00:14:25,790 --> 00:14:27,460
on to the next sections.

207
00:14:27,470 --> 00:14:29,120
We'll see you at the next lecture.