Flask Basic Web App

Folders

A simple folder structure:

project_root/
│
├─ app/
│  ├─ __init__.py
│  ├─ views.py
│  └─ templates/
│      ├─ index.html
│      ├─ admin.html
│      ├─ user.html
│      └─ add.html
│
└─ (env / venv for virtual environment)

• app/__init__.py – initializes the Flask application.
• app/views.py – contains routes and view functions.
• app/templates/ – contains HTML template files.

Package init

Import the Flask app from views.py so it can be used by the runner:

from .views import app

This file tells Python that app is a package and exposes the app object created inside views.py.

Views

Main imports and app object:

from flask import Flask, render_template, redirect, url_for

# Flask application instance
app = Flask(__name__)

• Flask – the main class to create the application.
• render_template – renders HTML files from the templates folder.
• redirect – redirects the user to another route.
• url_for – builds URLs for a specific route by its function name.

Route: Homepage /

@app.route("/")
def index():
    return render_template("index.html")

• @app.route("/") – URL path for the homepage.
• index() – view function that returns index.html.

Route: Admin page /admin

@app.route("/admin")
def admin():
    return render_template("admin.html")

When user goes to /admin, Flask will render admin.html.

Route with parameter: /user/<name>

@app.route("/user/<name>")
def hello_user(name):
    if name.lower() == "admin":
        return redirect(url_for("admin"))
    return render_template("user.html", user_name=name)

• <name> – dynamic URL parameter.
• If the name is admin, user is redirected to the admin page.
• Otherwise, user.html is rendered and user_name is passed to the template.

Route with integers: /add/<int:num_1>/<int:num_2>

@app.route("/add/<int:num_1>/<int:num_2>")
def add(num_1, num_2):
    result = num_1 + num_2
    return render_template("add.html", num_1=num_1, num_2=num_2, result=result)

• <int:num_1> and <int:num_2> – only accept integers in the URL.
• result = num_1 + num_2 – simple sum in Python.
• All three values (num_1, num_2, result) are sent to the template.

Templates

All HTML files live inside the app/templates folder.

• index.html
• admin.html
• user.html
• add.html

Example: user.html

We can use a variable sent from the Python function:

<h1>Hello {{ user_name }}</h1>

• – Jinja2 syntax to show a Python variable in HTML.
• The value is passed from hello_user() with user_name=name.

Run

After everything is set up, run the app:

env\Scripts\activate
flask run

• Open the given URL (usually http://127.0.0.1:5000) in your browser.
• Test routes:
  • / – homepage
  • /admin – admin page
  • /user/Elvin – user page with name
  • /add/5/7 – page that shows 5 + 7 = 12