1
00:00:00,440 --> 00:00:03,180
It's time to add some
pets to our database.

2
00:00:03,180 --> 00:00:06,130
To start,
let's take a look at the documentation.

3
00:00:06,130 --> 00:00:09,280
Here on the homepage of Flask-SQLAlchemy.

4
00:00:09,280 --> 00:00:14,300
I'm going to scroll down to Select,
Insert, and Delete.

5
00:00:14,300 --> 00:00:16,791
And the first section here
is about inserting records,

6
00:00:16,791 --> 00:00:18,330
which is what we're trying to do.

7
00:00:20,190 --> 00:00:22,490
And it looks like it has three steps.

8
00:00:22,490 --> 00:00:26,560
We need to create the object,
add it to session, and commit to session.

9
00:00:26,560 --> 00:00:30,130
And here is how it looks
with flask-sqlalchemy.

10
00:00:30,130 --> 00:00:34,410
This is exactly the same
as what we've used before.

11
00:00:34,410 --> 00:00:37,260
And these two are almost exactly the same.

12
00:00:37,260 --> 00:00:42,960
Instead of just session.add,
we now have to .db at the beginning.

13
00:00:42,960 --> 00:00:45,100
And that's what we need
to create a new pet.

14
00:00:45,100 --> 00:00:45,620
So let's get to it.

15
00:00:50,355 --> 00:00:54,719
Inside of our add_pet function,
let's create an if statement.

16
00:00:54,719 --> 00:01:00,319
If request.form, so if there is a form,

17
00:01:00,319 --> 00:01:04,800
then we can tab these two in here.

18
00:01:05,940 --> 00:01:09,410
Then we want to use that information,
submit it to create a new pet.

19
00:01:10,430 --> 00:01:14,239
I'm going to leave these here as
a reference, especially the second one, so

20
00:01:14,239 --> 00:01:16,950
we remember how to access
all of these specific items.

21
00:01:17,990 --> 00:01:22,190
I'm going to create a new
variable called new_pet.

22
00:01:22,190 --> 00:01:27,330
And set it equal to Pet
from our model's page.

23
00:01:27,330 --> 00:01:35,480
And then we need to do name=request.form,
name.

24
00:01:35,480 --> 00:01:40,354
And I'm actually going to,
Copy all this so

25
00:01:40,354 --> 00:01:44,711
that we can repeat that over and
over again.

26
00:01:44,711 --> 00:01:49,835
Then we have age = form.age,
and then I'm going to enter

27
00:01:49,835 --> 00:01:54,810
on to the next line, just so
it doesn't get so long.

28
00:01:54,810 --> 00:02:01,128
Breed = Ctrl+V, breed,

29
00:02:01,128 --> 00:02:05,798
then we have color =

30
00:02:05,798 --> 00:02:11,300
request.form color.

31
00:02:13,620 --> 00:02:19,076
After color is size = request.form,

32
00:02:19,076 --> 00:02:26,528
size then weight, and
switch this to oops, weight.

33
00:02:29,760 --> 00:02:32,560
Oops, I've been forgetting my commas.

34
00:02:32,560 --> 00:02:34,730
Don't forget to put commas in between,
there we go.

35
00:02:36,820 --> 00:02:42,855
And then after weight is the url and
we need to call it .url,

36
00:02:42,855 --> 00:02:47,079
and then we have I
forgot what I called it,

37
00:02:47,079 --> 00:02:50,920
let me open back up my models.py.

38
00:02:50,920 --> 00:02:53,350
I called it url_tag.

39
00:02:53,350 --> 00:03:01,840
Okay, so
this will be url_tag = request-form.

40
00:03:01,840 --> 00:03:05,350
And I can't remember what this
was called on our add_pet.

41
00:03:05,350 --> 00:03:11,490
So let's pop over to add_pet to our
form and see breed, color, size, weight.

42
00:03:11,490 --> 00:03:15,600
And then here's our image alt, and
it looks like the name is alt.

43
00:03:17,280 --> 00:03:20,250
So this will be an alt, there we go.

44
00:03:22,430 --> 00:03:27,498
Okay after that comes pet_type,

45
00:03:27,498 --> 00:03:33,100
which =, oops, = request.form.

46
00:03:33,100 --> 00:03:39,530
And same thing, I'm going to check
what this one was, pet_type.

47
00:03:39,530 --> 00:03:40,550
So name is pet.

48
00:03:42,920 --> 00:03:44,270
So this would be called pet.

49
00:03:47,170 --> 00:03:51,728
Then we have the gender =

50
00:03:51,728 --> 00:03:56,939
request.form, gender and

51
00:03:56,939 --> 00:04:03,677
then we have the spay status = spay.

52
00:04:06,478 --> 00:04:10,327
And then after that is house_trained =

53
00:04:14,977 --> 00:04:16,541
housetrained, all one word lowercase, and

54
00:04:16,541 --> 00:04:19,767
then at the bottom here is the description
= request.form description, awesome, okay.

55
00:04:19,767 --> 00:04:23,731
Now I'm going to

56
00:04:23,731 --> 00:04:28,545
remove this since we

57
00:04:28,545 --> 00:04:33,930
don't them anymore.

58
00:04:35,220 --> 00:04:36,270
I going to save again.

59
00:04:38,200 --> 00:04:41,210
And then we know from our documentation,
I'll pull it back up real quick.

60
00:04:42,510 --> 00:04:46,100
We're done this first step where we
create the Python object like this.

61
00:04:46,100 --> 00:04:49,370
So we still need to add to session and
commit it.

62
00:04:51,180 --> 00:04:57,266
So here let's do db.session.add,

63
00:04:57,266 --> 00:05:02,025
and we'll pass in new_pet.

64
00:05:02,025 --> 00:05:09,160
And then we need db.session.commit,
wonderful.

65
00:05:09,160 --> 00:05:12,845
And then the last thing we wanna do
is we want to redirect the user to

66
00:05:12,845 --> 00:05:13,720
the home page.

67
00:05:13,720 --> 00:05:17,460
So it kind of makes it seem like yes,
I did finish filling up the form,

68
00:05:17,460 --> 00:05:19,870
because I've been sent somewhere else.

69
00:05:19,870 --> 00:05:24,920
So we're going to do return and
it's going to be redirect.

70
00:05:27,660 --> 00:05:31,141
And we're actually going
to need to import redirect,

71
00:05:31,141 --> 00:05:33,720
I'm going to add it up here, redirect.

72
00:05:36,804 --> 00:05:40,030
Save popped up right there.

73
00:05:45,580 --> 00:05:49,720
And then inside,
we're going to do url_for.

74
00:05:52,393 --> 00:05:56,006
And then we're going to pass in the name
of the function which is index to send

75
00:05:56,006 --> 00:05:57,200
us back to the home page.

76
00:05:58,500 --> 00:06:02,406
And then you can see outside of our if
statement has this handy dandy little

77
00:06:02,406 --> 00:06:03,900
line here.

78
00:06:03,900 --> 00:06:07,120
Will send us to the addpet.html.

79
00:06:07,120 --> 00:06:12,525
So what we created here is if there
is no form that's been submitted,

80
00:06:12,525 --> 00:06:18,240
then we're going to send
the user to the addpet.html page.

81
00:06:18,240 --> 00:06:22,456
If there is a form that's been submitted,
like after a post,

82
00:06:22,456 --> 00:06:27,241
then we're going to create a new_pet,
add it to session committed,

83
00:06:27,241 --> 00:06:30,340
and then send them back
over to the homepage.

84
00:06:33,100 --> 00:06:34,270
Let's give this a test.

85
00:06:34,270 --> 00:06:38,600
So if you haven't already clear and

86
00:06:38,600 --> 00:06:42,793
let's do python app.py, oops.

87
00:06:42,793 --> 00:06:45,370
It's probably helpful if
I spell things correctly.

88
00:06:46,580 --> 00:06:47,080
There we go.

89
00:06:52,885 --> 00:06:56,470
I forgot a comma up here.

90
00:06:56,470 --> 00:06:57,929
Yep, always got to remember those commas.

91
00:07:00,113 --> 00:07:04,417
And save, there we go, now it's running.

92
00:07:08,038 --> 00:07:12,660
And you can either do a command click,
tells you right here to follow the link.

93
00:07:12,660 --> 00:07:16,580
Or if you still have it open from before,
just make sure you give it a refresh.

94
00:07:18,490 --> 00:07:23,250
Let's give this a test, navigate to
your Add Pet page and fill out the form.

95
00:07:24,760 --> 00:07:29,090
Make a random dog named Lucy,
brown and white.

96
00:07:30,460 --> 00:07:33,404
Say ages 1 year, size is small,

97
00:07:33,404 --> 00:07:38,664
breed is let's just call it
a terrier because I can't think

98
00:07:38,664 --> 00:07:44,200
of a dog breed at the moment,
it's still 25 pounds.

99
00:07:44,200 --> 00:07:45,978
And then for photo link,

100
00:07:45,978 --> 00:07:52,310
I'm just gonna use pixabay to grab a free
to use image, Open Image in New Tab.

101
00:07:52,310 --> 00:07:54,260
And then I can use this URL here.

102
00:07:57,400 --> 00:08:04,420
And then I can say this is a brown and
white dog laying down.

103
00:08:06,220 --> 00:08:10,440
This is a dog spayed,
neutered doesn't matter.

104
00:08:10,440 --> 00:08:12,130
I'll say it's a girl.

105
00:08:12,130 --> 00:08:17,200
Housetrained, let's say no, and
let's fill out some information.

106
00:08:17,200 --> 00:08:21,763
This is a wonderful

107
00:08:21,763 --> 00:08:26,045
nap time friend.

108
00:08:26,045 --> 00:08:29,426
Lucy loves to lay in the sun all day.

109
00:08:31,566 --> 00:08:36,670
Oops, Lucy, there we go,
and then hit Submit.

110
00:08:36,670 --> 00:08:38,980
It should send us to the home page,
perfect.

111
00:08:40,410 --> 00:08:43,840
Now how do we know if our data was
actually added to the database?

112
00:08:45,410 --> 00:08:47,490
Well, let's pop down into our terminal.

113
00:08:49,280 --> 00:08:54,250
And let's hit Ctrl+C to
cancel out of our program.

114
00:08:54,250 --> 00:08:56,460
And then we're going to
access our database.

115
00:08:56,460 --> 00:09:03,730
We're going to do sqlite3, if you're
on Windows, you might need a .exe here.

116
00:09:03,730 --> 00:09:08,160
And you also need to make sure you have
SQLite installed on a Windows computer.

117
00:09:08,160 --> 00:09:12,080
And then our database is called pets.db.

118
00:09:12,080 --> 00:09:16,050
And then we're going to run .tables.

119
00:09:16,050 --> 00:09:20,971
And then a SQL statement we're going to do

120
00:09:20,971 --> 00:09:26,720
SELECT all FROM pet, and there's our Lucy.

121
00:09:26,720 --> 00:09:33,739
We have the ID number, the timestamp,
and then the name, age, and etc.

122
00:09:37,495 --> 00:09:40,540
Type .exit to exit out of SQLite.

123
00:09:40,540 --> 00:09:41,820
And I'm also going to run a clear.

124
00:09:43,000 --> 00:09:44,190
There we go.

125
00:09:44,190 --> 00:09:48,414
Now that we have a pet in our database,
we need to display them on our home page

126
00:09:48,414 --> 00:09:51,650
instead of these placeholder
dogs that we have right now.

127
00:09:55,030 --> 00:09:57,450
First, let's add a couple
more pets to our database.

128
00:09:57,450 --> 00:10:00,170
So we have more than one to show off.

129
00:10:00,170 --> 00:10:02,480
Go ahead and add as many as you like.

130
00:10:02,480 --> 00:10:05,916
You can even look up a local pet
shelter and use their info and

131
00:10:05,916 --> 00:10:09,860
photos to create your pets if you want to,
see you back here in a bit.

132
00:10:12,060 --> 00:10:16,620
Okay, I've added five more pets for
a total of six in my database.

133
00:10:16,620 --> 00:10:19,740
It's okay if you added more or
less than I did.

134
00:10:19,740 --> 00:10:23,430
Inside of our index function,
let me scroll up,

135
00:10:23,430 --> 00:10:26,670
there we go,
we need to get all of our pets.

136
00:10:26,670 --> 00:10:30,875
Create a variable called pets,
and let's review

137
00:10:30,875 --> 00:10:35,890
the documentation to see if
querying has changed a bit too.

138
00:10:37,050 --> 00:10:42,048
Right here it's showing that
we can call all to grab

139
00:10:42,048 --> 00:10:45,071
all members of our database and

140
00:10:45,071 --> 00:10:50,185
it looks like we can just
use our class name .query,

141
00:10:50,185 --> 00:10:54,850
and then we can add .all
to grab all of our pets.

142
00:10:56,890 --> 00:11:02,910
So this would be Pet.query.all.

143
00:11:05,390 --> 00:11:08,962
Now we can pass this in
to our render template so

144
00:11:08,962 --> 00:11:12,490
that we can use it inside
of our index.html.

145
00:11:12,490 --> 00:11:17,191
We'll do comma, pets = and then we'll do

146
00:11:17,191 --> 00:11:21,770
our variable name, pets, to pass it in.

147
00:11:23,350 --> 00:11:24,540
And we can hit Save.

148
00:11:25,710 --> 00:11:28,673
Let's pop over into index.html,

149
00:11:28,673 --> 00:11:34,120
I'm going to make our terminal
a little bit smaller here.

150
00:11:34,120 --> 00:11:34,620
Okay.

151
00:11:37,226 --> 00:11:45,320
We have these cards that repeat the same
information over and over for each pet.

152
00:11:45,320 --> 00:11:52,195
Using Flask, we can loop through our
pets to create a card for each one.

153
00:11:52,195 --> 00:11:56,110
Let's use this first card to set this up.

154
00:11:56,110 --> 00:12:02,890
Above the first card, let's put curly
brackets and our percent symbols.

155
00:12:04,290 --> 00:12:09,032
And this will be for pet in pets because
remember we're passing in our pets

156
00:12:09,032 --> 00:12:13,100
into our template, and
this is going to loop through each pet.

157
00:12:14,440 --> 00:12:19,848
At the end of our loop,
after this first card to end it,

158
00:12:19,848 --> 00:12:23,920
we'll do endfor, all one word.

159
00:12:23,920 --> 00:12:26,040
This creates a loop in our template.

160
00:12:28,610 --> 00:12:33,199
I'm going to delete the rest
of our pet cards here.

161
00:12:35,959 --> 00:12:37,255
Delete.

162
00:12:39,020 --> 00:12:42,449
And just to make things a little
bit clear, I'm going to tab this so

163
00:12:42,449 --> 00:12:44,970
it's kind of like it's inside of this for
loop.

164
00:12:46,810 --> 00:12:48,500
And let's save.

165
00:12:48,500 --> 00:12:52,710
And let's jump into our homepage and
refresh.

166
00:12:54,750 --> 00:12:59,113
Okay, so
now I have 1 2 3 4 5 6 which is perfect.

167
00:12:59,113 --> 00:13:06,550
It repeated the same card six times
because I have six pets in my database.

168
00:13:06,550 --> 00:13:11,360
To see this even more clearly,
let's add each pet specific information.

169
00:13:12,810 --> 00:13:16,530
So the URL right now we'll
leave this as url_for pet.

170
00:13:17,990 --> 00:13:21,260
Let's replace the placeholder
text with pet_url.

171
00:13:21,260 --> 00:13:28,117
We'll need to take this and delete and

172
00:13:28,117 --> 00:13:34,340
then double curlies, pet.url.

173
00:13:34,340 --> 00:13:38,288
Then our alt is pet,

174
00:13:38,288 --> 00:13:42,469
it was url_tag, and

175
00:13:42,469 --> 00:13:48,289
then name will be pet.name.

176
00:13:52,409 --> 00:13:56,831
This will be pet.age, and
then this here at the bottom

177
00:14:00,309 --> 00:14:08,940
Will be pet.description, awesome.

178
00:14:08,940 --> 00:14:11,233
Let's save and refresh to the browser.

179
00:14:16,129 --> 00:14:18,510
And they're all of our pets, nice.

180
00:14:19,540 --> 00:14:24,400
Can see each one has their photo,
their name, age, and their description.

181
00:14:24,400 --> 00:14:27,603
And of course since I grabbed some
of these from my local pet shelter,

182
00:14:27,603 --> 00:14:29,160
their photos get a little wonky.

183
00:14:30,560 --> 00:14:32,510
But that's okay, we're just practicing.