#100DaysOfWeb in Python Transcripts
Chapter: Days 17-20: Calling APIs in Flask
Lecture: Creating a form in our Pokemon Template
Login or
purchase this course
to watch this video and the rest of the course contents.
0:00
Next thing we're going to do here is we're going to work on the actual template file. We're going to work backwards.
0:06
And the reason behind that is it's a bit easier to teach because we're going to start with the flow that the user will use.
0:14
And that is they will enter that color into our template, into the webpage. And they will enter that in what's called a form.
0:24
Now, in HTML they have the form tags and if anytime you have been to a website and you've typed in something and then clicked in submit that is a form.
0:34
Now, there are methods that work in the background and I'm not going to go too much into this but these methods define
0:40
how the user interacts with your page. So for example, when a user enters a color and hits submit they are posting, so post
0:50
is the method, they are posting that data through our page into our app, into the backend that Flask app. And then when they're pulling the data back
1:00
from our Flask app to the webpage that's called a get. So anytime you present data to a webpage
1:08
from your backend that's simply the webpage getting data. So there's not too much about that. That's like a default method.
1:15
But what isn't default is posting. So we have to specify that somewhere. But before we get too far into it let's create the template.
1:24
We're just going to copy Chuck into pokemon.html and then we can Vim that up. Let's get rid of h1 and the p tags
1:38
and we're left with our usual block content tags. Now, what I would like you to do here is just instead of writing this in yourself just get it
1:50
from the code but follow along and try to understand how this form is made from a HTML standpoint. So let's throw in our h1 tag for the header.
2:02
We're just going to call it Pokemon color list. Yes, there is a u in there. Yes, I'm Australian. Then we're going to throw in another tag.
2:11
Enter a color to see which Pokemon are a match. Okay, and now we open up our div that is going to house our form, okay?
2:28
We are using muay CSS so this is just to make it look pretty. You don't really have to do this yourself. Just copy it in. It'll help, all right?
2:39
And the method, as I discussed just before, is post. We are posting, this form is allowing us to post information through to our backend.
2:50
Action is the tag that actually tells you when you post that data what happens to your site. Do you stay on the same page? Do you go to another page?
3:02
That's pretty much it. So we're going to stay on the same page. We're just going to stay on the Pokemon page. It's not going to do too much.
3:10
Next we're going to create a label for our form and that label is going to be called Pokemon color.
3:16
But let's just give it a label here called Pokecolor. This is how we can reference it. We know what it's labeling in the background.
3:25
So Pokemon color, close off the label and now we have to choose the input type. So this is all creating that form.
3:36
This is just simply to create a little input field that someone can type the color in, right? So the input type is going to be text.
3:47
Class form control. Just go with this one. This is again, part of the muay CSS stuff. Now, we have an id. Now, this id is so that we can reference
3:58
this input field at any time. We're not actually going to do that at the moment. So just put it in there.
4:07
It's a good practice to put this stuff in there. And then we have the name. So the name of this input field is we're going to call it Pokecolor.
4:16
And then the placeholder text. So placeholder equals, we'll just put example blue. Yeah, let's just go with that, blue.
4:27
Now, this input placeholder, this is what you'll see in sort of a light shaded gray in the input field so that you know what sort of format, right?
4:39
And let's just throw in a line break there. Next we actually have the submit button. So we're going to create a button. Type equals submit.
4:51
And now we're going to give it some formatting so we'll call it muay button. And we'll make it a special button, button raised.
5:01
Again, these values you can find on the muay CSS site. If you want to format and style this differently go for it. And the value is submit, okay?
5:12
Don't worry too much about what these all mean. This is more just the formatting around it all. All right, and we give it everything
5:23
within this button tag, this word here in the white where it says, "Submit" that is actually what's going to be written on the button.
5:30
All right, and we close that off with a /form. And then we can close the div. All right, let's just save that for now.
5:46
And let's try and run the app and load that page. In order to load that page what do we have to do? We have to create a route for it.
5:53
So let's go back to our program vim routes.py. And let's quickly throw one in here. We're not going to do anything special other than
6:04
just returning the render template. So app.route('/pokemon'). Because we're going to call the page Pokemon
6:13
we reference that in our form with that action. So we have to keep that the same. And we'll just create a function called Pokemon.
6:23
Now, we're not going to do anything special in here. All we are going to do is return the template because we don't want to pass any data just yet.
6:32
So let's go return render template pokemon.html. That's all we're going to do. We are going to populate way more into this function.
6:43
But let's just leave it there so we can see that what we've created in the HTML template actually works. So we'll write that. Then we can do Flask run.
6:58
And we bring up the browser. All right, and we are on our 100 days page still. Let's go back to Pokemon. And there is our page.
7:08
So we have that h1 header called Pokemon color list. We have that little h3 tag, which is enter the color. We have our Pokemon color label here.
7:19
We have the input field with that little text inside that says, "Example blue." And then we have our submit button.
7:25
We can obviously change these colors and do whatever we want but we're not going to go too complex now. So the idea is any data we throw into here
7:34
will be passed back. But we haven't actually set up any of that code to receive that information. So watch what happens if I throw a color in here.
7:45
Method not allowed because we haven't allowed the post request to hit our Flask code. All we've done is we've put that
7:52
into our template but we have not told the Flask code to expect anything from our webpage. It's a nice security feature, right?
8:00
You don't want people to just be able to put code or text or anything to your backend unless it's allowed. So in this instance, method not allowed
8:10
that's because we haven't done anything with the routes.py file yet. So let's move on to that in the next video.