Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
Create the route to add pet to the database. Use jinja templating to add info from the database to the website's homepage.
It's time to add some
pets to our database.
0:00
To start,
let's take a look at the documentation.
0:03
Here on the homepage of Flask-SQLAlchemy.
0:06
I'm going to scroll down to Select,
Insert, and Delete.
0:09
And the first section here
is about inserting records,
0:14
which is what we're trying to do.
0:16
And it looks like it has three steps.
0:20
We need to create the object,
add it to session, and commit to session.
0:22
And here is how it looks
with flask-sqlalchemy.
0:26
This is exactly the same
as what we've used before.
0:30
And these two are almost exactly the same.
0:34
Instead of just session.add,
we now have to .db at the beginning.
0:37
And that's what we need
to create a new pet.
0:42
So let's get to it.
0:45
Inside of our add_pet function,
let's create an if statement.
0:50
If request.form, so if there is a form,
0:54
then we can tab these two in here.
1:00
Then we want to use that information,
submit it to create a new pet.
1:05
I'm going to leave these here as
a reference, especially the second one, so
1:10
we remember how to access
all of these specific items.
1:14
I'm going to create a new
variable called new_pet.
1:17
And set it equal to Pet
from our model's page.
1:22
And then we need to do name=request.form,
name.
1:27
And I'm actually going to,
Copy all this so
1:35
that we can repeat that over and
over again.
1:40
Then we have age = form.age,
and then I'm going to enter
1:44
on to the next line, just so
it doesn't get so long.
1:49
Breed = Ctrl+V, breed,
1:54
then we have color =
2:01
request.form color.
2:05
After color is size = request.form,
2:13
size then weight, and
switch this to oops, weight.
2:19
Oops, I've been forgetting my commas.
2:29
Don't forget to put commas in between,
there we go.
2:32
And then after weight is the url and
we need to call it .url,
2:36
and then we have I
forgot what I called it,
2:42
let me open back up my models.py.
2:47
I called it url_tag.
2:50
Okay, so
this will be url_tag = request-form.
2:53
And I can't remember what this
was called on our add_pet.
3:01
So let's pop over to add_pet to our
form and see breed, color, size, weight.
3:05
And then here's our image alt, and
it looks like the name is alt.
3:11
So this will be an alt, there we go.
3:17
Okay after that comes pet_type,
3:22
which =, oops, = request.form.
3:27
And same thing, I'm going to check
what this one was, pet_type.
3:33
So name is pet.
3:39
So this would be called pet.
3:42
Then we have the gender =
3:47
request.form, gender and
3:51
then we have the spay status = spay.
3:56
And then after that is house_trained =
4:06
housetrained, all one word lowercase, and
4:14
then at the bottom here is the description
= request.form description, awesome, okay.
4:16
Now I'm going to
4:19
remove this since we
4:23
don't them anymore.
4:28
I going to save again.
4:35
And then we know from our documentation,
I'll pull it back up real quick.
4:38
We're done this first step where we
create the Python object like this.
4:42
So we still need to add to session and
commit it.
4:46
So here let's do db.session.add,
4:51
and we'll pass in new_pet.
4:57
And then we need db.session.commit,
wonderful.
5:02
And then the last thing we wanna do
is we want to redirect the user to
5:09
the home page.
5:12
So it kind of makes it seem like yes,
I did finish filling up the form,
5:13
because I've been sent somewhere else.
5:17
So we're going to do return and
it's going to be redirect.
5:19
And we're actually going
to need to import redirect,
5:27
I'm going to add it up here, redirect.
5:31
Save popped up right there.
5:36
And then inside,
we're going to do url_for.
5:45
And then we're going to pass in the name
of the function which is index to send
5:52
us back to the home page.
5:56
And then you can see outside of our if
statement has this handy dandy little
5:58
line here.
6:02
Will send us to the addpet.html.
6:03
So what we created here is if there
is no form that's been submitted,
6:07
then we're going to send
the user to the addpet.html page.
6:12
If there is a form that's been submitted,
like after a post,
6:18
then we're going to create a new_pet,
add it to session committed,
6:22
and then send them back
over to the homepage.
6:27
Let's give this a test.
6:33
So if you haven't already clear and
6:34
let's do python app.py, oops.
6:38
It's probably helpful if
I spell things correctly.
6:42
There we go.
6:46
I forgot a comma up here.
6:52
Yep, always got to remember those commas.
6:56
And save, there we go, now it's running.
7:00
And you can either do a command click,
tells you right here to follow the link.
7:08
Or if you still have it open from before,
just make sure you give it a refresh.
7:12
Let's give this a test, navigate to
your Add Pet page and fill out the form.
7:18
Make a random dog named Lucy,
brown and white.
7:24
Say ages 1 year, size is small,
7:30
breed is let's just call it
a terrier because I can't think
7:33
of a dog breed at the moment,
it's still 25 pounds.
7:38
And then for photo link,
7:44
I'm just gonna use pixabay to grab a free
to use image, Open Image in New Tab.
7:45
And then I can use this URL here.
7:52
And then I can say this is a brown and
white dog laying down.
7:57
This is a dog spayed,
neutered doesn't matter.
8:06
I'll say it's a girl.
8:10
Housetrained, let's say no, and
let's fill out some information.
8:12
This is a wonderful
8:17
nap time friend.
8:21
Lucy loves to lay in the sun all day.
8:26
Oops, Lucy, there we go,
and then hit Submit.
8:31
It should send us to the home page,
perfect.
8:36
Now how do we know if our data was
actually added to the database?
8:40
Well, let's pop down into our terminal.
8:45
And let's hit Ctrl+C to
cancel out of our program.
8:49
And then we're going to
access our database.
8:54
We're going to do sqlite3, if you're
on Windows, you might need a .exe here.
8:56
And you also need to make sure you have
SQLite installed on a Windows computer.
9:03
And then our database is called pets.db.
9:08
And then we're going to run .tables.
9:12
And then a SQL statement we're going to do
9:16
SELECT all FROM pet, and there's our Lucy.
9:20
We have the ID number, the timestamp,
and then the name, age, and etc.
9:26
Type .exit to exit out of SQLite.
9:37
And I'm also going to run a clear.
9:40
There we go.
9:43
Now that we have a pet in our database,
we need to display them on our home page
9:44
instead of these placeholder
dogs that we have right now.
9:48
First, let's add a couple
more pets to our database.
9:55
So we have more than one to show off.
9:57
Go ahead and add as many as you like.
10:00
You can even look up a local pet
shelter and use their info and
10:02
photos to create your pets if you want to,
see you back here in a bit.
10:05
Okay, I've added five more pets for
a total of six in my database.
10:12
It's okay if you added more or
less than I did.
10:16
Inside of our index function,
let me scroll up,
10:19
there we go,
we need to get all of our pets.
10:23
Create a variable called pets,
and let's review
10:26
the documentation to see if
querying has changed a bit too.
10:30
Right here it's showing that
we can call all to grab
10:37
all members of our database and
10:42
it looks like we can just
use our class name .query,
10:45
and then we can add .all
to grab all of our pets.
10:50
So this would be Pet.query.all.
10:56
Now we can pass this in
to our render template so
11:05
that we can use it inside
of our index.html.
11:08
We'll do comma, pets = and then we'll do
11:12
our variable name, pets, to pass it in.
11:17
And we can hit Save.
11:23
Let's pop over into index.html,
11:25
I'm going to make our terminal
a little bit smaller here.
11:28
Okay.
11:34
We have these cards that repeat the same
information over and over for each pet.
11:37
Using Flask, we can loop through our
pets to create a card for each one.
11:45
Let's use this first card to set this up.
11:52
Above the first card, let's put curly
brackets and our percent symbols.
11:56
And this will be for pet in pets because
remember we're passing in our pets
12:04
into our template, and
this is going to loop through each pet.
12:09
At the end of our loop,
after this first card to end it,
12:14
we'll do endfor, all one word.
12:19
This creates a loop in our template.
12:23
I'm going to delete the rest
of our pet cards here.
12:28
Delete.
12:35
And just to make things a little
bit clear, I'm going to tab this so
12:39
it's kind of like it's inside of this for
loop.
12:42
And let's save.
12:46
And let's jump into our homepage and
refresh.
12:48
Okay, so
now I have 1 2 3 4 5 6 which is perfect.
12:54
It repeated the same card six times
because I have six pets in my database.
12:59
To see this even more clearly,
let's add each pet specific information.
13:06
So the URL right now we'll
leave this as url_for pet.
13:12
Let's replace the placeholder
text with pet_url.
13:17
We'll need to take this and delete and
13:21
then double curlies, pet.url.
13:28
Then our alt is pet,
13:34
it was url_tag, and
13:38
then name will be pet.name.
13:42
This will be pet.age, and
then this here at the bottom
13:52
Will be pet.description, awesome.
14:00
Let's save and refresh to the browser.
14:08
And they're all of our pets, nice.
14:16
Can see each one has their photo,
their name, age, and their description.
14:19
And of course since I grabbed some
of these from my local pet shelter,
14:24
their photos get a little wonky.
14:27
But that's okay, we're just practicing.
14:30
You need to sign up for Treehouse in order to download course files.
Sign up