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