Get an introduction of web forms and creation of a user input form, along with storing the responses and redirecting the user back to the main page.
- [Instructor] Let's take a look at some fundamental libraries we can use to build our application. The first package to explore is WTForms, a form generator and processor. We'll make a simple form to grab input from the user and send it back to the browser. In order to make this happen, we'll need a file for the interaction as well as a Jinja template to render the results. So first, we'll need to set your environment to run the hello.py script. Next, open hello.py in your text editor. At the top are the imports needed for our functionality from Flask and WTForms.
Note that we're importing something called flash here from Flask which will be used for passing messages back and forth between the server and the application. Next, instantiate the app. In order to use the c as our f security we're going to need to set up a secret token here. This will be passed back and forth through the posts to make sure that we're processing valid inputs. It can be anything, really, as the same code that generates the code will be comparing it. It will be validated automatically by the library.
So I've set it here to SuperSecretKey. You can set it to whatever you like. In a later movie we will talk about ways to create more secure keys. Next, we create a form class to use for our processing. Next is the route for the form, with GET and POST defined as our methods. GET will be used to read the page and POST will be used when the form is submitted. In the definition for this route, there is a function hello which will contain the meat of the application. The first thing we do is create an instance of the name form here using the form portion of the request object.
Now, if the object is a POST, we need to process the input. First, we set the name to the form input for the field name and print it to the console. Then, using the flash functionality, we pass back a friendly message to the application to display to the user. We'll see how that works in just a moment. Finally, whether the request is a POST or a GET we render the hello.html template. Now let's look at that template in the template subdirectory.
So open hello.html. It starts out with some basic HTML structure, using the Bootstrap framework. But this is what icon I call your attention to. In the body, we're going to first process any messages which are passed through using the flash function. If no messages were passed, such as an initial GET on the form, this section will simply not print anything. So we have with messages equals get flash messages if there's messages. So if there's no messages we don't print anything.
Then we started a numbered list. For message in message we create an li sending back the text part of the message itself. And then the post is more of the standard template work that we've done before with some classes to you pretty up the form using Bootstrap. So let's see what happens when we fire this up in the browser. The first Flask run. So here we are at the Form Demo, and it says "What's your name?".
So let's put this in. We've got John. Not my name, but it'll work. And this is how flash works. Flash makes it possible for you to inject information into the application from the server so you can send helpful messages, or success, or status messages back to the user.
- Working with the Flask command line
- Using response templates
- Creating web forms
- Connecting to a database
- Authenticating users
- Uploading images to an S3 pipeline
- Deploying Flask applications to Heroku with Git