Blog Post 2 - Creating a Simple Webapp Using Flask
In this post, I will create a simple webapp called Simple Message Bank by using Flask. This webapp allows the user to submit some text messages and view them.
The link to the GitHub repository containing the code this web app.
The link to this web app by using Heroku.
We need to know some more basic skills besides Python to do this web app.
- Flask fundamentals
- Database skills (adding items to databases and displaying them)
- Basic CSS (customize our webapp)
§1. Enable Submissions
Before we create the web application with Flask, we need to create a file called app.py, which controls the overall behavior of the app. Then we need to import the Flask class from the flask package and create a line with code app = Flask(__name__).
__name__ is a special variable whose value is always equal to the name of the Python process that’s being run; in our case, it’s app.py.
Let’s create the simplest web application, which will print out “Hi, there!” to help us know some basic structure of the Flask.
We first need to add the decorator starting with symble@, then write @app.route('/'), which means the base page.
Example: In our application, the URL (“/”) is associated with the root URL. So if our site’s domain was “www.xxx.com” and we want to add routing to “www.xxx.com/hi”, we would use ‘/hi/’.
from flask import Flask
app = Flask(__name__)
# decorator
@app.route('/')
def main():
return 'Hi, there!'
We need virtual environments to run the web app.
In my example, I installed the flask package in the Anaconda environment called PIC16B. Then I created an app.py file in the text editor( I used Visual Studio Code); next, I opened the terminal inside my text editor and ran conda activate PIC16B to activate my environment. Finally, I need to write export FLASK_ENV=development; flask run at the command line. After that, we will have something like http://localhost:5000; we can copy that to our browser to run our web app.
Let’s check our web app.
Great, now we know how to create a web app now.
Now, we will use templates to create our web app. Templates are special kinds of files that resemble HTML. Then we can return our templates instead of a Python string.
Now, Inside our templates directory, I will start to create a submit template, called submit.html with three user interface elements:
- A text box for submitting a message.
- A text box for submitting the name of the user.
- A “submit” button.
Before that, we also can put navigation links inside a template called base.html. We then had the submit.html template extend base.html. This method is called template inheritance,
so we can write some re-usable code in our base.html then use
{% extend "base.html" %} and {% block %} statements to extend this re-usable code to submit.html or other pages
The curly brace { } is called jinja template tag.
- {% … %} for Statements
- {{ … }} for Expressions to print to the template output
- {# … #} for Comments not included in the template output
Let’s write our base.html template first.
<!-- base.html template-->
<!doctype html>
<title>{% block title %}{% endblock %} Simple Message Bank</title>
<nav>
<h1 id = "main_title">A Simple Message Bank</h1>
<!-- <b>Navigation:</b> -->
<ul>
<li><a href="{{ url_for('main') }}">Submit a Message</a></li>
<li>View Messages</li>
<li>Message Bank Record</li>
</ul>
</nav>
<section class="content">
<header>
{% block header %}{% endblock %}
</header>
{% block content %}{% endblock %}
</section>
The anchor element, <a>...</a> allow us able to link to other pages and documents.
href specify a URL or relative path from the location of the current HTML file.
We used the function url_for() to easily connect other template pages or files within templates.
In our case, we can click the Submit a Message, which will link us to the main page.
We also created two more lists with View Messages and Message Bank Record; later on, we will add the relative link.
Now, let’s import render_template inside the app.py file, and then render template base.html using the function render_template().
from flask import Flask,render_template
app = Flask(__name__)
# decorator
@app.route('/')
def main():
return render_template('base.html')
Let’s check our web app to see if it functions well.
Now, let’s create our submit.html template, which extends base.html.
<!-- submit.html template extend from base.html-->
{% extends 'base.html' %}
{% block header %}
<h2>{% block title %}Submit{% endblock %}</h2>
{% endblock %}
{% block content %}
<form method="post">
<!-- A text box for submitting a message -->
<label for="message">Your message:</label>
<br>
<input type="text" name="message" id="message" placeholder="Enter your message here.">
<br>
<!-- A text box for submitting the name of the user -->
<label for="handle">Your name or handle:</label>
<br>
<input type="text" name="handle" id="handle" placeholder="Enter your name here.">
<br>
<!-- A “submit” button -->
<input type="submit" value="Submit message">
</form>
{% endblock %}
We used the <form>...</form> tags to set up a web form that accepts user information: name, password, etc.
The label element specifies an attribute for, which refers to the ID of an input element.
There are many types of input elements; for example, we used the "text" type, which means we want a small area to enter text, and the "submit" type to add a button for form submission. This submit button is given the text based on the value attribute.
The method attribute has the POST and GET methods.
POST: sending data to the web pageGOT: allowing the web page to send data back to us
Let’s change our code in the app.py file to render the template submit.html using the function render_template().
from flask import Flask,render_template
app = Flask(__name__)
# decorator
@app.route('/')
def main():
return render_template('submit.html')
Now, our web app looks like this.
Here, we will write two Python functions for database management in our app.py file.
The first function is get_message_db().
-get_message_db() should handle creating the database of messages with these three features:
- Check whether there is a database called
message_dbin thegattribute of the app. If not, then connect to that database, ensuring that the connection is an attribute ofg. - Check whether a table called
messagesexists inmessage_db, and create it if not. For this purpose, the SQL command CREATE TABLE IF NOT EXISTS is helpful. Give the table an id column (integer), a handle column (text), and a message column (text). - Return the connection
g.message_db.
We need to create an init.sql file with the necessary SQL commands to create empty tables; then, we need to save the init.sql file at the same directory as the app.py file.
Let’s write the required SQL command for init.sql to creates a table with three columns id,message, and handle.
CREATE TABLE IF NOT EXISTS messages(
id INTEGER PRIMARY KEY AUTOINCREMENT,
message TEXT NOT NULL,
handle TEXT NOT NULL
);
When we create a table that has an
INTEGER PRIMARY KEYcolumn, this column is the alias of the rowid columm, so in our case, the id column is actually the rowid column, which automatically assigns an integer value whenever we insert a new row into the table. The main purpose of using attributeAUTOINCREMENTis to prevent SQLite to reuse a value that has not been used or a value from the previously deleted row. TheNOT NULLconstraint enforces a column to NOT accept NULL values.
Let’s add the function get_message_db() into our app.py file.
def get_message_db():
"""
This function will handle creating the database of messages.
Return
----------
g.message_db: the connection for the database 'message_db'
"""
# Check whether there is a database called message_db in the g attribute of the app
if 'message_db' not in g:
# if not, then connect to that database
g.message_db = sqlite3.connect('messages_db.sqlite')
# initialize our SQL database using Flask
# Check whether a table called messages exists in message_db, and create it if not
# using the SQL command CREATE TABLE IF NOT EXISTS
with current_app.open_resource('init.sql') as f:
g.message_db.cursor().executescript(f.read().decode('utf8'))
return g.message_db
The second function is insert_message(request).
-insert_message(request) should handle inserting a user message into the database of messages with thses two features:
- Extract the message and the handle from request.
- Using a cursor, insert the message into the message database. Remember that we will need to provide an ID number, the handle, and the message itself. We will need to write a SQL command to perform the insertion.
- Note: when working directly with SQL commands, it is necessary to run db.commit() after inserting a row into db in order to ensure that our row insertion has been saved.
- We should ensure that the ID number of each message is unique. One way to do this is by setting the ID number of a message equal to one plus the current number of rows in message_db.
- Don’t forget to close the database connection within the function!
Before that, we can create a function called close_message_db() to close our database. We will use this function inside our insert_message(request). Or we can write the code for closing our database inside the function insert_message(request) without creating the extra function close_message_db().
def close_message_db(e=None):
"""
This function will close the database connection
"""
db = g.pop('message_db', None)
if db is not None:
db.close()
def insert_message(request):
"""
This function will handle inserting a user message into the database of messages
"""
# get the connection for our database
db = get_message_db()
# extract the message from request
message = request.form['message']
# extract the handle from request
handle = request.form['handle']
# make sure no empty strings
if(message and handle):
# using a cursor
cursor = db.cursor()
# insert the message into the message database
cursor.execute(
'INSERT INTO messages (message, handle) VALUES (?, ?)',
(message, handle)
)
db.commit()
# close the database connection
close_message_db()
The command 'INSERT INTO messages (message, handle) VALUES (?, ?)', (message, handle) is a prepared statement or parameterized statement.
Prepare: An SQL statement template is created and sent to the database. Certain values are left unspecified, called parameters (labeled “?”). Example: INSERT INTO MyTable VALUES (?, ?, ?)
These parameters are called dynamic parameters and are represented by a ?.
Maybe, we should add some notes after the user submission.
In the next block, we will add some messages depending on the variable handle after the user submits the message and name. Then we will print out the string “Do you want to see something I like?” followed by Yes and No button. If the user clicks the Yes button, it will link to some secret page. The No button will link back to the main base page.
Let’s modify our submit.html template to reach our goal.
<!-- submit.html template extend from base.html-->
{% extends 'base.html' %}
{% block header %}
<h2>{% block title %}Submit{% endblock %}</h2>
{% endblock %}
{% block content %}
<form method="post">
<label for="message">Your message:</label>
<br>
<input type="text" name="message" id="message" placeholder="Enter your message here.">
<br>
<label for="handle">Your name or handle:</label>
<br>
<input type="text" name="handle" id="handle" placeholder="Enter your name here.">
<br>
<input type="submit" value="Submit message">
</form>
<!-- add some messages after the user submits the message and name -->
<form method="post">
<section class = see_something>
{% if handle %}
<br>
<br>
<b>Hello, {{handle}}</b>
<br>
<b>Do you want to see something I like?</b>
<br>
<!-- Adding link to the button on the onclick event -->
<button type="button" onclick="window.location.href='{{ url_for('mydog')}}';">Yes </button>
<!-- Adding link to the button on the onclick event -->
<button type="button" onclick="window.location.href='{{ url_for('main')}}';">No </button>
{% endif %}
</section>
</form>
{% endblock %}
Next, I will create a new template called mydog.html inside our templates directory. This template will print some images. Then, I will make a static directory located at the same place as our app.py file. Finally, I will save all my images inside the static directory.
Web applications often require static files, such as javascript files or CSS files that support Web display. The URL of the special endpoint static is used to generate a static file. In your programs directory, create a new directory named static. In this directory you can place images, javascript files, css files and many other files that don’t need a Python backend.
<!-- mydog.html template extend base.html-->
{% extends 'base.html' %}
{% block header %}
<h1>{% block title %}I Love Frenchie{% endblock %}</h1>
{% endblock %}
{% block content %}
<section>
<h2 id="intro">Hi, nice to meet you. My name is Moose.</h2>
<!-- create the image table -->
<table class = "mytable">
<tr>
<td><img src="{{ url_for('static', filename='d1.jpg')}}" alt="Image Error" width="200" height="200"></td>
<td><img src="{{ url_for('static', filename='d2.jpg')}}" alt="Image Error" width="200" height="200"></td>
<td><img src="{{ url_for('static', filename='d3.jpg')}}" alt="Image Error" width="200" height="200"></td>
</tr>
<tr>
<td><img src="{{ url_for('static', filename='d4.jpg')}}" alt="Image Error" width="200" height="200"></td>
<td><img src="{{ url_for('static', filename='d5.jpg')}}" alt="Image Error" width="200" height="200"></td>
<td><img src="{{ url_for('static', filename='d6.jpg')}}" alt="Image Error" width="200" height="200"></td>
</tr>
</table>
</section>
{% endblock %}
We should create a new decorator @app.route('/mydog/') with a function to render our secret page mydog.html inside the app.py file.
We also need to add the POST and GET methods for our main base page. The GET case will render the submit.html template with no other parameters. The POST case will call the function insert_message(request) to add the user’s input information to our database. Next, it will add the current date to the variable handle. Then, it will render the submit.html template with the variable handle.
We also used the function datetime.today().strftime() by importing the datetime module to allow us easily to get the current date information.
# decorator
@app.route('/', methods=['POST', 'GET'])
def main():
if request.method == 'GET':
return render_template('submit.html')
else:
insert_message(request)
# extract the message from request
message=request.form.get('message')
# extract the handle from request
handle=request.form.get('handle')
# if user entered both message andhandle, then we add the current date information
# need import datetime
# then use function 'datetime.today()'
if (message and handle):
formatted_date = datetime.datetime.today().strftime("%Y-%m-%d")
handle = "'" +handle + "' at " + formatted_date
return render_template('submit.html',handle=handle)
# decorator
@app.route('/mydog/')
def mydog():
return render_template('mydog.html')
Let’s check our web app.
After the user submits the message and name, the secret message will appear.
If the user clicks the Yes button, it will link to the secret page.
§2. Viewing Random Submissions
2.1
This section will modify our web app to allow users to view random messages from our message_db database.
Fist, we have to write a function called random_messages(n), which will return a collection of n random messages from the message_db database.
def random_messages(n):
"""
This function will return a collection of n random messages from the message_db
Parameters
----------
n: int; user-specified number of random messages
Return
----------
randommessages: list; list contains n random messages
"""
# get the connection for our database
db = get_message_db()
cursor = db.cursor()
# get the list of n random messages by using SQL command
randommessages = cursor.execute("SELECT message, handle FROM messages ORDER BY RANDOM() LIMIT '{}';".format(n)).fetchall()
# close the database connection
close_message_db()
return randommessages
Next, we need to write a new template called view.html to display the messages extracted from random_messages().
<!-- view.html template extend base.html-->
{% extends 'base.html' %}
{% block header %}
<h1>{% block title %}Some Cool Messages{% endblock %}</h1>
{% endblock %}
{% block content %}
<!-- I find some formatting from here -->
<!--https://www.digitalocean.com/community/tutorials/how-to-use-templates-in-a-flask-application -->
<!-- using inline CSS-->
<div style="width: 50%; margin: auto">
<!-- loop over random messages-->
{% for i in randmessages %}
<!-- some style for formatting-->
{% if loop.index % 2 == 0 %}
{% set bg_color = '#e6f9ff' %}
{% else %}
{% set bg_color = '#eee' %}
{% endif %}
<!-- using inline CSS-->
<div style="padding: 5px; background-color: {{ bg_color }}; margin: 20px">
<p>#{{ loop.index }}</p>
<!-- get message--> <!-- using inline CSS-->
<p style="font-size: 20px">{{ i[0] }}</p>
<small>
<!-- get name-->
<p>- {{ i[1] }}</p>
</small>
</div>
{% endfor %}
{% endblock %}
After we wrote the view.html temple, don’t forget to add the navigation link for View Message inside our base.html template.
To do so, we must modify <li>View Messages</li> to <li><a href="">View Messages</a></li> in the base.html template.
Finally, we need to add the additional decorator @app.route('/view'/) in app.py file to tell our web app to register an endpoint /view/, and define a function view() to render the view.html template with the return value of the list n random messages whenever the user visits the /view/ endpoint.
# decorator
@app.route('/view/')
def view():
return render_template('view.html', randmessages = random_messages(3))
Let’s check our web app and click the View Message.
2.2 Adding Some Extra Feature
In this section, I will modify our web app to allow the user to check all the messages from our message_db database. Assuming our message bank is not empty.
First, I will write a function all_messages() in the following block, which will return all messages in the message bank.
def all_messages():
"""
This function will return all messages in the message bank.
"""
db = get_message_db()
cursor = db.cursor()
# using SQL command to get all rows from our table
allmessages = cursor.execute("SELECT * FROM messages").fetchall()
return allmessages
Now, I will create another new my_message_bank.html template to print out a table containing all information from our message bank.
<!-- my_message_bank.html template extend from base.html-->
{% extends 'base.html' %}
{% block header %}
<h2>{% block title %}All Messages{% endblock %}</h2>
{% endblock %}
{% block content %}
<!-- create the message bank table-->
<table class = "table">
<tr class ="table_header">
<th>Number</th> <th>Message</th> <th>Name</th>
</tr>
<!-- loop over each row in our table-->
{% for row in allmessages%}
<tr class ="table_row">
<!-- loop each element in the row-->
{% for element in row %}
<td class ="table_element">{{element}}</td>
{% endfor %}
</tr>
{% endfor %}
</table>
{% endblock %}
Finally, we need to add the decorator @app.route('/my_message_bank/') in the app.py file to tell our web app to register an endpoint /my_message_bank/, and define a function my_message_bank() to render the my_message_bank.html template with the return value of the list contain all messages from our database.
# decorator
@app.route('/my_message_bank/')
def my_message_bank():
return render_template('my_message_bank.html', allmessages = all_messages())
We also need to add the navigation link for Message Bank Record inside our base.html template.
We need to change <li>Message Bank Record</li><li> to <li><a href="">Message Bank Record</a></li> in base.html.
Let’s run our web app and click the Message Bank Record.
§3. Customize Your App
In this section, I will write some CSS to customize our app!
CSS stands for Cascading Style Sheets. CSS allows us to change styles for our web pages. For instance, our web page background color, the color of the title, borders, etc. However, before doing that, we first need to create a .css file. So, I made a style.css file and stored it in the static directory that we created early.
The general syntax it follows is:
selected elements { property: value; another_property: another_value; }
h1 {
color: rgb(8, 89, 109);
font-family: Apple Chancery, cursive;
margin: 1rem 0;
text-align: center;
}
h2{
font-family: Jazz LET, fantasy;
}
#main_title{
border:rgb(226, 189, 220);
border-width: thick;
border-style: dashed;
padding: 20px;
color:rgb(27, 175, 175);
font-family: Comic Sans MS, Comic Sans, cursive;
font-size: 1.5em;
}
nav ul {
display: flex;
list-style: none;
font-size: 20px;
margin: 0;
padding: 0;
}
nav ul li a {
display: block;
padding: 0.5rem;
}
.content {
background: white;
color: rgb(5, 49, 131);
text-align: center;
}
.see_something {
border-radius: 50px;
color: rgb(48, 31, 146);
}
.mytable {
margin-left: auto;
margin-right: auto;
}
.table {
border-spacing: 0;
background-color: whitesmoke;
width:70%;
margin-left:15%;
margin-right:15%;
}
.table_row:nth-child(even){
background-color: #e5e5e5;
}
.table_header{
text-align:center;
color: rgb(202, 51, 51);
}
.table_element{
padding: 8px;
}
We then need to add the link to our external style CSS sheet, so let’s add <link rel="stylesheet" href=""> inside our base.html under our <title> tag.
Let’s check our customize web app
This is what we will see on the main base page.
After we click the View Messages, we will see this.
After we click the Message Bank Record, we will see this.
Let’s check our secret page.
