Flask 101: How to Add a Search Form
In this post, we take a look at how to add a search form to your Flask-based web application. Read on for the awesome tutorial.
Join the DZone community and get the full member experience.
Join For Freein our last article, we added a database to our flask web application but didn’t have a way to add anything to our database. we also didn’t have a way to view anything, so, basically, we ended up having a pretty useless web application. this article will take the time to teach you how to do the following:
- create a form to add data to our database.
- use a form to edit data in our database.
- create some kind of view of what’s in the database.
adding forms to flask is pretty easy too, once you figure out what extension to install. i had heard good things about wtforms so i will be using that in this tutorial. to install wtforms you will need to install flask-wtf . installing flask-wtf is pretty easy; just open up your terminal and activate the virtual environment we set up in our first tutorial . then run the following command using pip:
pip install flask-wtfthis will install wtforms and flask-wtf (along with any dependencies) to your web app’s virtual environment.
serving html files
originally when i started this series, all i was serving up on the index page of our web application was a string. we should probably spruce that up a bit and use an actual html file. create a folder called “templates” inside the “musicdb” folder. now create a file called “index.html” inside the “templates” folder and put the following contents in it:
<doctype html>
<head>
<title>flask music database</title>
</head>
<h2>flask music database</h2>now before we update our web application code, let’s go ahead and create a search form for filtering our music database’s results.
adding a search form
when working with a database, you will want a way to search for items in it. fortunately creating a search form with wtforms is really easy. create a python script called “forms.py” and save it to the “musicdb” folder with the following contents:
# forms.py
from wtforms import form, stringfield, selectfield
class musicsearchform(form):
choices = [('artist', 'artist'),
('album', 'album'),
('publisher', 'publisher')]
select = selectfield('search for music:', choices=choices)
search = stringfield('')here we just import the items we need from the wtforms module and then we subclass the form class. in our subclass, we create a selection field (a combobox) and a string field. this allows us to filter our search to the artist, album, or publisher categories and enter a string to search for.
now we are ready to update our main application.
updating the main application
let’s rename our web application’s script from “test.py” to “main.py” and update it so it looks like this:
# main.py
from app import app
from db_setup import init_db, db_session
from forms import musicsearchform
from flask import flash, render_template, request, redirect
from models import album
init_db()
@app.route('/', methods=['get', 'post'])
def index():
search = musicsearchform(request.form)
if request.method == 'post':
return search_results(search)
return render_template('index.html', form=search)
@app.route('/results')
def search_results(search):
results = []
search_string = search.data['search']
if search.data['search'] == '':
qry = db_session.query(album)
results = qry.all()
if not results:
flash('no results found!')
return redirect('/')
else:
# display results
return render_template('results.html', results=results)
if __name__ == '__main__':
app.run()
we changed the
index()
function so it works with both post and get requests and told it to load our musicsearchform. you will note that when you first load the index page of your web app, it will execute a get and the
index()
function will render our
index.html
that we just created. of course, we didn’t actually add the form to our index.html yet, so that search form won’t appear yet.
there is also a
search_results()
that we added to handle really basic searches. however, this function won’t be called until we actually implement a way to display the results. so let’s go ahead and make the search form visible to our users.
when i was learning how to create forms with wtforms, the flask-wtf website recommended creating a template with a macro called “_formhelpers.html.” go ahead and create a file of that name and save it to your “templates” folder. then add the following to that file:
{% macro render_field(field) %}
<dt>{{ field.label }}
<dd>{{ field(**kwargs)|safe }}
{% if field.errors %}
<ul class=errors>
{% for error in field.errors %}
<li>{{ error }}</li>
{% endfor %}
</ul>
{% endif %}
</dd>
{% endmacro %}this syntax might look a little odd since it is obviously not just html. this is actually jinja2 syntax, which is the templating language used by flask. basically, anywhere you see the squiggly braces (i.e. {} ), you are seeing jinja syntax. here we pass in a field object and access its label and errors attributes. feel free to look up the documentation for additional information.
now open up your “index.html” file and update it so that it has the following contents:
<doctype html>
<head>
<title>flask music database</title>
</head>
<h2>flask music database</h2>
{% from "_formhelpers.html" import render_field %}
<form method=post>
<dl>
{{ render_field(form.select) }}
<p>
{{ render_field(form.search) }}
</dl>
<p><input type=submit value=search>
</form>the new code in this example shows how you can import the macro you created into your other html file. next, we set the form method to post and we pass the select widget and the search widget to our render_field macro. we also create a submit button with the following label: search . when you press the search button, it will post the data in the other two fields of the form to the page that it is on, which in this case is our index.html or “/”.
when that happens, the
index()
method in our
main.py
script will execute:
@app.route('/', methods=['get', 'post'])
def index():
search = musicsearchform(request.form)
if request.method == 'post':
return search_results(search)
return render_template('index.html', form=search)
you will note that we check which request method it is and if it’s the post method, then we call the
search_results()
function. if you actually press the search button at this stage, you will receive an
internal server error
because we haven’t implemented “results.html” as of yet. anyway, right now your web application should look something like this:
let’s take a moment and get the results function doing something useful.
updating the results functionality
right now, we don’t actually have any data in our database, so when we try to query it, we won’t get any results back. thus we need to make our web application indicate that no results were found. to do that we need to update the “index.html” page:
<doctype html>
<head>
<title>flask music database</title>
</head>
<h2>flask music database</h2>
{% with messages = get_flashed_messages() %}
{% if messages %}
<ul class=flashes>
{% for message in messages %}
<li>{{ message }}</li>
{% endfor %}
</ul>
{% endif %}
{% endwith %}
{% from "_formhelpers.html" import render_field %}
<form method=post>
<dl>
{{ render_field(form.select) }}
<p>
{{ render_field(form.search) }}
</dl>
<p><input type=submit value=search>
</form>you will note that the new code is a new block of jinja. here we grab “flashed” messages and display them. now we just need to run the web application and try searching for something. if all goes as planned, you should see something like this when you do a search:
wrapping up
now we have a neat little search form that we can use to search our database, although it frankly doesn’t really do all that much since our database is currently empty. in our next article, we will focus on finally creating a way to add data to the database, display search results, and edit the data too!
download code
download a tarball of the code from this article: flask_musicdv_part_iii.tar
other articles in the series
- part i – flask 101: getting started
- part ii – flask 101: adding a database
related readings
- the jinja2 website
- flask-wtforms website
- flask-sqlalchemy website
- sqlalchemy website
- a simple sqlalchemy tutorial
Published at DZone with permission of Mike Driscoll, DZone MVB. See the original article here.
Opinions expressed by DZone contributors are their own.
Comments