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
website.run(debug=True)
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>
<form>
<label>What's happening?</label>
<input type="text">
<input type="submit" value="Post message">
</form>
Create a template called new-message.html
containing the HTML code provided.
Route for new message
# new message page
@website.route('/new-message')
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>
<form>
<label>Username</label>
<input type="text">
<label>Password</label>
<input type="text">
<input type="submit" value="Log in">
</form>
Create a template called sign-in.html
which contains a simple sign in form.
Route for sign in
# sign in page
@website.route('/sign-in')
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>
<html>
<head>
</head>
<body>
</body>
</html>
Use regular HTML to create a page
which could be considered “empty”.
Add a CSS import to the head
<head>
<link rel="stylesheet" href="/static/css/styles.css">
</head>
The Flask starter kit comes with some
CSS for this project, which you can use.
Create a header with navigation
<body>
<header class="page-header">
<span class="logo">SuperChat</span>
<nav class="main-navigation">
<a href="/">Home</a>
<a href="/new-message">New Message</a>
</nav>
<div class="user-info">
<a href="/sign-out">Sign out</a>
<a href="/sign-in">Sign in</a>
</div>
</header>
</body>
The header contains a logo, main navigation
and some information for the current user.
Add a section for page content
</header>
<section class="page-content">
</section>
</body>
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 %}
</section>
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 %}
<h1>Messages</h1>
<ol>
<li>Messages go here</li>
<li>Another message</li>
<li>Plus a third one</li>
</ol>
{% 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.
Flask: Complete!
Loading...