Running a Python website

Flask Logo

What the heck is Flask?

We will be using Flask to run a website
where we can interact with our database.

Flask is a Python framework for websites

This means it is a bunch of Python code that
someone else wrote to do common website tasks.

An HTML and CSS website run with Python

A Flask website still uses HTML and CSS,
but pages can also display data from Python.

Allows you to run code before displaying a page

Every Flask page is processed in Python
before being displayed to the user.

Allows you to re-use code across pages

Flask support templates and includes,
so you can write code once and re-use it.

Built in support for database access

We can use Python to access our database
and then pass the results into an HTML page.

Set up new project from starter

Download and unzip the Flask starter kit.
Download Flask Starter

Copy the public folder

Copy the whole folder called “public”
which is inside the flask-starter.

Paste ‘public’ into your project folder

You should now have two folders in your project:
the db folder, and a new public folder.

Flask tour

Let’s take a quick look at what
we have included in the starter.

The static folder

This is where you keep all of your images
and also any CSS or JavaScript you need.

Templates folder

A Flask template is the HTML layout
for a page (or pages) in your website.

eg. index, user-profile, contact, generic-page

Random Python init file

This file is required by Python so that
it knows to look here for project files.

The data manager handles database connections

This file contains some helper functions to
keep our database connected on every page.

The routes file manages your site’s pages

Maps web page URLs to Python functions.
Most of your Python code will go in here!

Run project

A Flask website is a Python app,
so we need to start it running.

Set the correct database name

DATABASE = 'db/message-board.db'

Open the file datamanager.py and
update the database file path.

Create a run script

from public import website

Create a new file in your project
called runserver.py with the code above.

Execute the ‘run server’ script from the shell

python runserver.py

Some text should be displayed
to confirm the app is running.

Open the site in a browser

Open your web browser and navigate to
the url localhost:5000 to see your site.

Create routes and templates

We have a home page, but we need
to set up some other pages too.

Page to post a new message

We need a page where a user can
type in and submit a new message.

Template for new message

<h1>Post a new message</h1>


  <label>What's happening?</label>
  <input type="text">

  <input type="submit" value="Post message">


Create a template called new-message.html
containing the HTML code provided.

Route for new message

# new message page
def new_message():
    return render_template('new-message.html')

Add a new route to routes.py which shows
the template new-message for the url /new-message.

Check new message page works

Navigate to the “new message” page
in your browser and check it exists!

Template for sign in

<h1>Sign in</h1>


  <input type="text">

  <input type="text">

  <input type="submit" value="Log in">


Create a template called sign-in.html
which contains a simple sign in form.

Route for sign in

# sign in page
def sign_in():
    return render_template('sign-in.html')

Add a new route to which shows the
sign in template at the url /sign-in.

Check sign in page works

Navigate to the “sign in” page
in your browser to check it exists!

Challenge: Sign out page

Create a new template and route
for the site url /sign-out.

It should just say “You are signed out”.

Challenge: Test Site

Write a list of all your routes
then test each in the browser.

Tick them off if they work correctly!

Create navigation

We can use a base template to define
the same basic layout for use on every page.

Create a base template

In your templates folder, create a
new file called base-template.html.

Define the HTML layout

<!doctype html>




Use regular HTML to create a page
which could be considered “empty”.

Add a CSS import to the head

    <link rel="stylesheet" href="/static/css/styles.css">

The Flask starter kit comes with some
CSS for this project, which you can use.

Create a header with navigation


    <header class="page-header">

        <span class="logo">SuperChat</span>

        <nav class="main-navigation">
          <a href="/">Home</a>
          <a href="/new-message">New Message</a>

        <div class="user-info">
            <a href="/sign-out">Sign out</a>
            <a href="/sign-in">Sign in</a>



The header contains a logo, main navigation
and some information for the current user.

Add a section for page content


    <section class="page-content">


Below the header, create a section which
will contain different content for each page.

Define a template block called content

<section class="page-content">

    {% block content %}{% endblock %}


A Flask template block defines where dynamic
content should be injected into the template.

Apply the base template to the home page

{% extends "base-template.html" %}

{% block content %}

  <li>Messages go here</li>
  <li>Another message</li>
  <li>Plus a third one</li>
{% endblock %}

Edit the index.html template so that it extends
the base template and defines the content block.

Check that it works

Check in your browser to see if the
base template was properly applied.

Apply base template to all templates

For all other templates, extend the base template
and wrap the page content in a content block.

Test your navigation

Reload your site in the browser
and click to each page to test it.

Thumbs Up!

Flask: Complete!

Take me to the next chapter!