This lab will guide you through the process of writing and using Flask-WTForms form classes. This makes the process of using forms much more streamlined and "Pythonic", and will result in more robust, error-proof, and readable code. By the end of this lab, you should be ready to independently write and use form classes for your projects.
Clone this repository to your computer.
Take a look at the code - it looks a bit different than what you're used to. Namely, the code is now separated out into several files rather than being written in a single app.py
file. Since we're now writing model and form code as well as route code, this will help us to maintain some structure and separation.
To run the code, navigate to the project folder and run the following to create a virtual environment and install the required packages:
python3 -m venv venv
source venv/bin/activate
pip install -r requirements.txt
Then, rename the .env.example
file to .env
:
mv .env.example .env
Then you can run the following to run the Flask server:
python app.py
Anytime you return to the project to write code or run the Flask server, be sure to FIRST activate your virtual environment:
source venv/bin/activate
You may then run the python
and pip
normally.
When you are finished coding, simply close the terminal or type deactivate
to terminate the virutal environment.
Take a look at the books_app/forms.py
file, which contains a form we'll use to collect user data on new books. The user can add a book's title, publish date, author, audience, and genres.
Take a look at the books_app/routes.py
file, and see how the create_book
route is using the BookForm
class. Namely, we create an instance of BookForm
and pass it to the template. Then when the form is submitted, we use the data to create a new Book
object and save it to the database.
Now, run the server and test out the routes. See if you can create a few new books. Notably, you'll only be able to select authors that have already been added to the database - but don't worry, we'll be able to add new authors soon!
Test out the + New Author
and + New Genre
links. It doesn't look like they're working yet! Modify the code to add a form to each route:
- In
forms.py
, fill out theAuthorForm
class with the appropriate fields. You may need to look up how to use the fields - you can use this guide as a reference. - In
routes.py
, complete the TODOs in thecreate_author
route to instantiate anAuthorForm
, send it to the template, and use it to create a newAuthor
instance. You can use thecreate_book
route as a reference. - In
templates/create_author.html
, use theform
object to display its labels and fields. You can use thecreate_book.html
template as a reference.
Then, test it out and see if you can create a new author! Once you're satisfied with your understanding, complete the same steps for Genre
.
However, what if we want to modify a book (or author/genre) after it's created? We can use the same BookForm
to do that, too! Complete the TODOs in the book_detail
route to update the Book
object once the form is submitted.
Now you're really getting the hang of using forms! If you've made it this far, here are some stretch challenges:
- Make a
create_user
route that uses aUserForm
class to add new users to the database. - In the
profile
route, allow a user to update their information, such as username and favorite books. (We don't have any authentication yet, so that means that anyone can update any user's profile.) - Come up with your own ideas for new features and then implement them!
If you'd like more resources on working with Flask-WTForms, check out the following:
- WTForms QuickStart - Enough to get you started.
- Intro to Flask-WTForms [VIDEO] A simple introduction to get started with the basics
- WTForms Fields - All of the possible fields.
- WTForms Validators