Python Web Development With Flask

Learning with FlaskTask

FLASK

Flask is a Python web application framework developed by an international group of Python enthusiasts named Pocco led by Armin Ronacher. Flask is based on Werkzeug WSGI toolkit and Jinja2 template engine. Flask is often referred to as a micro framework since it aims to keep the core of an application simple yet extensible and it does not have built-in abstraction layer for database handling, nor does it have form a validation support. Instead, Flask supports the extensions to add such functionality to the application.

INTRODUCING FlaskTask

FlaskTask is a very simple and basic web App powered by Flask and its dependencies. Its function is simple — save a task for the user, and display a list of the user’s saved tasks. We shall discuss some basics of web programming with Flask while building FlaskTask.

Now, let’s get started!

1. INSTALLING FLASK AND ITS DEPENDENCIES

Flask supports versions 2.x (2.6 onward) and 3.x (3.3 onward). Installing Flask and its dependencies only require you to run a single command from your terminal (command prompt on Windows), and you get Flask installed, together with all the dependencies. However, it is advisable to install Flask in a virtual environment, to avoid compatibility and dependencies issues.

Install VirtualEnv

If you don’t have virtualenv installed previously, now is the time to do so.

Create A Virtual Environment And Activate It

Once virtualenv is successfully installed, you can now create a virtual environment which will be the home to your Flask installation. Upon successful creation, activate the virtual environment and run this command in your terminal:

pip install flask

This installs the latest version of Flask and its dependencies in your newly created virtual environment, so you don’t have to worry about separately installing dependencies. Ensure that the installation is successful, and you’re ready to build FlaskTask.

2. FLASK APPS DIRECTORY STRUCTURE, TEMPLATES, AND STATIC FILES

To get started, we’ll create a new directory to house our App. This can be placed / named anywhere / anything reasonable, but make sure not to name it with anything like ‘flask’ to avoid names clashing.

cd into this newly created directory and create a directory called FlaskTask, our App’s project root directory. This directory will contain all files needed to create FlaskTask.

Our application code is a python file, so we’ll need to create that now. This is simply a python file called ‘task.py’.

Templates

Over the years, web pages have been hard-coded by developers to return just what they put in, no dynamism. But recently, web contents can now be generated automatically by codes on the web servers and then served to the browsers as HTML pages before it is then displayed.

However, generating HTML content from Python code is cumbersome, especially when variable data and Python language elements like conditionals or loops need to be put. This would require frequent escaping from HTML.

This is where one can take advantage of Jinja2 template engine, on which Flask is based. Instead of returning hard-coded HTML from the function, a HTML file can be rendered by the render_template() function (we’ll see how this is used later). The render_template() function takes in an HTML template (in this case, it is simply a HTML code with some python expressions and statements based on the Jinja2 template system) which is then filled with values based on conditions stated in the template before it is now sent to the browser as a pure HTML code.

To do this, Flask searches for HTML templates in a special folder called ‘templates’, which should be placed directly inside our root project folder and next to our python file.

Static Files

Although Flask produces web Apps with dynamically generated contents, web Apps still need some static files such as necessary JavaScript files, CSS stylesheets, images, and so on. Normally, web servers are configured to serve your static files for you, but you’ll need to house them somewhere during development.

To keep our static files, Flask requires us to put them in a folder called ‘static’. For this we’ll create a directory called ‘static’, directly inside our root project and next to our python file.

3. URL ROUTING AND BUILDING

Our Python File

Open ‘task.py’ and add the following lines of code to it:

File ‘task.py’

from flask import Flask
app = Flask(__name__)
app.debug = True
@app.route(‘/home’)
def homepage():
    return ‘This is the home page!’
if __name__ == ‘__main__’:
    app.run()

That’s a very simple Flask app, probably the most basic. Let’s explain the code here:

• We imported Flask class from the flask module we installed. This class will be the basic building block of our app — an instance of it is our WSGI application.
• Next we create an instance of this class. The parameter given to it is the name of the application’s module or package. If you are using a single module (as in this example), you should use __name__ because depending on if it’s started as application or imported as module the name will be different ( __main__ versus the actual import name). This is needed so that Flask knows where to look for templates, static files, and so on. For more information have a look at the Flask documentation.
• The next line sets ‘debug’ variable of the instance to True, to allow us see error messages in our browser during development. However, this shouldn’t be done when packaging the app for production! ‘debug’ should be set to False (by default, it is set to False).
• We then use the route() decorator to tell Flask what URL should call the function binded to it.
• The function is given a name which is also used to generate URLs for that particular function, and returns the message we want to display in the user’s browser.

Simply run this script in your terminal, you should see something like this if all goes on well:

* Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)
* Restarting with stat
* Debugger is active!
* Debugger PIN: 144–952–702

Now, open your browser any navigate to ‘http://127.0.0.1:5000/home' to see the output.

Your browser should simply display:

This is the homepage!

That indicates that your installation and development server is up and running!

Now edit the ‘task.py’ file and make the following change:

File ‘task.py’

# the rest of the file is cut-off!!!
@app.route(‘/homey’)
def homepage():
    return ‘This is the home page!’
# the rest of the file is cut-off!!!

Go to your browser and re-load the page, you should get an error such as:

404 error! Page Not Found

Why did this happen?

This is because your browser takes in ‘/home’ address, and your python script couldn’t find any function binded to it. Try navigating to ‘http://127.0.0.1:5000/homey' and everything should work just fine now.

This shows the significance of URL routing to your web app. But we can also generate URLs dynamically. We can do this by adding variable parts to the route() decorator as parameters.

This variable part is marked as <variable-name>. It is then passed as a keyword argument to the function with which the rule is associated. To demonstrate this, let’s edit our Python code:

# the rest of the file is cut-off!!!
# note the route rule is now ‘/home’!
@app.route(‘/home/<name>’)
def homepage(name):
    return ‘Welcome to my home page %s!’ % name
# the rest of the file is cut-off!!!

Open ‘http://127.0.0.1:5000/home/Trump' in your browser to see the output, which is something like:

Welcome to my home page Trump!

What did we do here?

We simply created a rule that can take in a variable name and pass it along to the function binded to it. This way, we can have different URLs that will return different contents based on the name passed to it! Try changing Trump in the URL to Obama, and the browser should return a corresponding page.

URL Building

The url_for() function is very useful for dynamically building a URL for a specific function. The function accepts the name of a function as first argument, and one or more keyword arguments, each corresponding to the variable part of URL. To use it, we need to import it from flask module.

The following script demonstrates use of url_for() function:

from flask import Flask, url_for
app = Flask(__name__)
app.debug = True
@app.route(‘/home’)
def homepage():
    admin_link = url_for(‘admin’)
    return “<a href=’%s’>Click here to say hi to admin!</a>” % admin_link
@app.route(‘/admin’)
def admin():
    return ‘Good day admin!!!’
if __name__ == ‘__main__’:
    app.run()

In the code above, we have avoided hard-coding URLs for different functions by using the url_for() function which returns the required URL for the function whose name is provided.

Also, we can build URLs for our static files present in the ‘static’ folder. Flask uses the folder ‘static’ as the first positional argument to the url_for() function, just like we’ll use the name of the function we want to build a URL for, and the name of the static file as a keyword argument to ‘filename’. Say we have a CSS stylesheet and an image in our ‘static’ folder. Building URLs for them, we use something like:

image_link = url_for(‘static’, filename=’titanic.jpg’)
style_link = url_for(‘static’, filename=’stylings.css’)

Now, to use them in our HTML page and Python code, we do the following:

# Python code
@app.route(‘/imagepage’):
def show_image():
    image_link = url_for(‘static’, filename=’titanic.jpg’)
    style_link = url_for(‘static’, filename=’stylings.css’)
    return render_template(‘show_image.html’, image_url=image_link, style_url=style_link)
# html code, show_image.html
<html>
<head>
    <link rel=”stylesheet” type=”text/css” href=”{{ style_url }}”>
    <title>Image Page</title>
</head>
<body>
    <p>This is a titanic Image</p>
    <img src=”{{ image_url }}” width=”200” height=”150” alt=”Titanic Image”>
</body>
</html>

This simplifies code editing, as you can change the name of your images or style sheets without worrying about changing them in your HTML code, and you’ve just avoided headaches you get when using absolute paths for your static files in HTML codes.

FlaskTask

Enough said, let’s start building FlaskTask. Remember the functions of the App? Save a task for the user, and display a list of the user’s saved tasks. For this, we’ll need three views — the home page with links to ‘Add a task’ and ‘View a task’, the view-task page that shows the tasks saved by the user, and the add-task page that gives the user text boxes to write the task and save them. We will talk about the HTTP methods needed in these HTML files in a moment.

Right now, make sure your project directory looks like this:

FlaskTask/
    FlaskTask/
       task.py
       templates/
       static/

Now, let’s add our three HTML views. Open ‘templates’ folder and create three HTML files — homepage.html, addtask.html, and viewtask.html. We’ll also use a CSS stylesheet, open the ‘static’ folder and create a CSS file — styles.css. Your project directory should look like this now:

FlaskTask/
    FlaskTask/
        task.py
        templates/
            homepage.html
            addtask.html
            viewtask.html
        static/
            styles.css

That should be all, for now at least.

4. HTTP METHODS AND REQUEST OBJECT

HTTP Methods

Http protocol is the foundation of data communication in world wide web. Different methods of data retrieval from specified URL are defined in this protocol. The HTTP method (also often called “the verb”) tells the server what the client wants to do with the requested page.The following list summarizes different http methods:

GET: The browser tells the server to just get the information stored on that page and send it. This is probably the most common method.

HEAD: The browser tells the server to get the information, but it is only interested in the headers, not the content of the page. An application is supposed to handle that as if a GET request was received but to not deliver the actual content. In Flask you don’t have to deal with that at all, the underlying Werkzeug library handles that for you.

POST: The browser tells the server that it wants to post some new information to that URL and that the server must ensure the data is stored and only stored once. This is how HTML forms usually transmit data to the server.

PUT: Similar to POST but the server might trigger the store procedure multiple times by overwriting the old values more than once. Now you might be asking why this is useful, but there are some good reasons to do it this way. Consider that the connection is lost during transmission: in this situation a system between the browser and the server might receive the request safely a second time without breaking things. With POST that would not be possible because it must only be triggered once.

DELETE: Remove the information at the given location.

OPTIONS: Provides a quick way for a client to figure out which methods are supported by this URL. Starting with Flask 0.6, this is implemented for you automatically.

By default, Flask route responds to the GET requests. However, this preference can be altered by providing ‘methods’ argument to route() decorator. An example is given below:

@app.route(‘/loginpage’, methods=[‘POST’, ‘GET’])
def login():
    # code goes here

We’ll be using the ‘POST’ method frequently to post data from HTML form elements to our back-end for processing.

Request Object

The data submitted by the user from form elements are sent to the data as global request objects. In order to process them in our Python code, we need to import ‘request’ class from flask module. The request object contains some important attributes such as:

• form: It is a dictionary object containing key-value pairs of form parameters and their values.
• args: parsed contents of query string which is part of URL after question mark (?).
• cookies: dictionary object holding Cookie names and values.
• files: data pertaining to uploaded file.
• method: current request method.

FlaskTask

Now let’s edit our ‘task.py’ file

File ‘task.py’

from flask import Flask, url_for, render_template, request
app = Flask(__name__)
app.debug = True # make sure to set this to False for production
@app.route(‘/home’)
def home():
    return render_template(‘homepage.html’, urls=url_dict, msg=None)
@app.route(‘/addtask’, methods=['POST', 'GET'])
def add_task():
    if request.method==’POST’:
        keyword = request.form[‘keyword’]
        task = request.form[‘task’]
        tasks_dict[keyword] = task
        msg = ‘Task added successfully!’
        return render_template(‘homepage.html’, urls=url_dict, msg=msg)
    return render_template(‘addtask.html’, urls=url_dict)
@app.route(‘/viewtask’)
def view_task():
    return render_template(‘viewtask.html’, tasks=tasks_dict, urls=url_dict)
with app.test_request_context():
    style_url = url_for(‘static’, filename=’styles.css’)
    viewtask_url = url_for(‘view_task’)
    addtask_url = url_for(‘add_task’)
    homepage_url = url_for(‘home’)
    url_dict = {
        ‘style’ : style_url,
        ‘view’ : viewtask_url,
        ‘add’ : addtask_url,
        ‘home’ : homepage_url,
    }
    tasks_dict = {}
if __name__ == ‘__main__’:
    app.run()

In the first line, we imported the classes we need for the App. Subsequently, we have used all the basics of Flask we discussed previously, the rest are just simple Python codes. Because FlaskTask is just a simple web app to explain some basics of Flask, we didn’t save our data using any database. Instead, we simply stored the data received from the request object as Python dictionary objects and read the values needed from there.

These are the HTML files:

File ‘homepage.html’

<!doctype html>
<html>
<head>
<link rel=”stylesheet” type=”text/css” href=”{{ urls[‘style’] }}”>
<title>FlaskType — Home</title>
</head>
<body>
{% if msg != None %}
<p>{{ msg }}</p>
{% endif %}
<h3>FlaskTask: Add and view your tasks here</h3>
<h4><a href=’{{ urls[‘view’] }}’>View Tasks</a></h4>
<h4><a href=’{{ urls[‘add’] }}’>Add Task</a></h4>
</body>
</html>

File ‘addtask.html’

<!doctype html>
<html>
<head>
<link rel=”stylesheet” type=”text/css” href=”{{ urls[‘style’] }}”>
<title>FlaskType — Add Task</title>
</head>
<body>
<h4>FlaskTask: Add your tasks here</h4>
<fieldset>
    <legend>Add Task</legend>
    <form action=’{{ urls[‘add’] }}’ method=’post’>
        <p>Your task keyword</p>
        <p><input type=’text’ name=’keyword’ placeholder=’Keyword’></p>
        <p>Your task in details</p>
        <p><input type=’text’ name=’task’ placeholder=’Write your task here’></p>
        <input type=’submit’ value=’Add Task’>
    </form>
</fieldset>
<a href=’{{ urls[‘home’] }}’>Go back to home page</a>
</body>
</html>

File ‘viewtask.html’

<!doctype html>
<html>
<head>
<link rel=”stylesheet” type=”text/css” href=”{{ urls[‘style’] }}”>
<title>FlaskType — View Tasks</title>
</head>
<body>
<p>FlaskTask: View your tasks here</p>
<table cellpadding="5px" border="1" cellspacing="5px">
{% for key in tasks %}
    <tr>
        <th> {{ key }} </th>
        <td> {{ tasks[key] }} </td>
    </tr>
{% endfor %}
</table>
<a href=’{{ urls[‘home’] }}’>Go back to home page</a>
</body>
</html>