- Forms 6:51
- Forms 3 questions
- Cookies 7:27
- Cookies 4 questions
- Set a Cookie 3 objectives
- Starting the Builder 6:02
- Create a JSON String 2 objectives
- Parse a JSON string 1 objective
- Items 6:27
- Looping Through Items 1 objective
- Drawing the Bear 4:32
- Loop Nested Items 2 objectives
- Flash Messages 5:28
- Flash a Message 3 objectives
- Outro 0:26
- Review: Flask Basics 8 questions
Preview
Video Player
00:00
00:00
Starting the Builder
6:02We can name our bear. Now let's see what else is available for it. Our `builder()` view is the bulk of our application, so let's get started!
Okay.
So, this was pretty cool,
0:00
being able to like name our bear and pull
the name back out.
0:02
But, I'd like to do a whole lot more.
0:05
We're supposed to have this whole bear
builder, character builder thing.
0:06
So, let's see if we can build that whole
view in one video.
0:10
All right.
0:16
So, let's add a new route.
0:17
And I'm gonna call it, builder.
0:23
And, I'm gonna call the function, builder
cuz that's just the kind of dude I am.
0:25
'Kay.
0:30
So, this builder one is gonna render our
pre-built builder template.
0:31
And really, that's all I want it to do.
0:38
So, I'm just gonna go return render
template, and
0:40
the template's name is builder.html.
0:43
And, saves is gonna be getSavedData, which
we can actually do here.
0:51
>> getSavedData.
0:59
>> Save ourselves one line of code, right?
1:02
>> And then, I wanna pass in what these
like, these default things are.
1:05
>> That are here inside options.
1:11
>> If we look in options, there is a
dictionary called defaults.
1:13
I want to pass that in.
1:16
So first, I need to import it.
1:17
So, from Options > Import Defaults.
1:20
And then, secondly, I need to pass it in
here.
1:24
So, options equals defaults.
1:28
Okay.
1:31
So, there's our builder.
1:35
And, what I want, my,
1:38
the way I'm envisioning this is after the
save, it always goes back to the builder.
1:39
So, we're gonna actually have those
redirect to builder.
1:44
Sorry, hit the wrong key.
1:50
We're gonna have those redirect to
builder, not to index.
1:52
'Kay.
1:58
So, let's see how that looks.
1:58
Let's just hit Build It.
1:59
See what happens.
2:02
All right.
2:02
Well, not a whole lot's on here.
2:05
We've got a bear.
2:07
And, I've got a button that says Update.
2:08
But, that's really all we have.
2:09
All right.
Let's just,
2:14
let's check out this builder thing.
2:14
It extends our layout, which is good.
2:17
And then, we've got, this, this block.
2:21
There's an area here to, to type something
in, and there's a bear, and that's it.
2:27
'Kay.
So, let's add a little bit.
2:33
So, the first thing we need to add is,
here in this value,
2:35
we want to print out saves.getmain.
2:38
We wanna do that thing again, so let's
refresh.
2:41
Hey!
There's Mike, cool.
2:47
Mike The Bear, that little bear.
2:49
And then, now, we want to be able to have
a bunch of colors.
2:54
So, if we look in options, and like I
said, we're not going to edit this.
2:58
But, we see we have this colors, we have
all this colors things.
3:03
So, let's add here inside this div, we're
going to loop over all of that.
3:06
So, for color in Options > Colors.
3:12
Cuz remember, we can basically just write
Python in here which is really handy.
3:19
We're gonna do this input.
3:24
It's a radio.
3:26
We'll give it an id of whatever the color
name is,
3:29
so if the color's black, it'll be black.
3:31
We're gonna call it colors.
3:33
And, the value is gonna be whatever color
we're currently on.
3:38
And, what I want to do is, I want to have
a thing here
3:43
where if this is the currently selected
color, like the, the color they've saved.
3:48
Then it will select this color.
3:53
So, we're gonna add an if here.
3:56
And, we can actually do this on the next
line, which is kind of cool.
3:59
So if saves dot get color
4:03
is equal to whatever color we're currently
on, then we want to print checked.
4:08
And, end that if and end that input.
4:16
And then, we're gonna have a label.
4:19
And, we're not gonna put anything in that
label.
4:25
Okay.
4:28
Now obviously, the HTML I'm writing here,
4:28
I know it's right because we've already
covered it with our designer.
4:31
So, let's refresh, and there's our color.
4:34
So, let's make this a little bigger.
4:36
There we go, that's not bad.
4:39
There's all of our colors.
4:40
So, we can say, all right.
4:41
Let's make it blue, hit update.
4:44
Oh.
4:47
Because we don't know what the form action
is.
4:49
So, we know how to do this.
4:50
And, that'll be for save.
4:53
Right?
4:56
Let's go back.
4:57
Let's hit Update.
4:58
Sorry, Refresh.
4:59
Hit Update.
5:03
Cool, so it came back out.
5:05
But we didn't get our color.
5:07
Let's look at our Inspector.
5:08
Blue 504, er, 054.
5:12
[BLANK_AUDIO]
5:16
[SOUND]
Oh.
5:18
This should be colors.
5:24
Refresh.
There we go.
5:28
There's our color.
5:30
So, I want to make that actually show up.
5:32
So, let's go and modify this grid this,
our class down here,
5:35
and let's add in saves.get color, so
colors.
5:40
See?
I almost did it again.
5:47
And, let's refresh that.
5:49
Hey, look at that.
5:51
Our bear is now bright orange.
5:52
That's pretty cool.
5:55
I like having a bright orange bear back
there.
5:56
Or, the blue one, that's pretty cool too.
6:00