Python Flask Basics

Introduction

Flask is a lightweight and flexible web framework for Python. Created by Armin Ronacher, Flask is known as a micro-framework because it doesn't require particular tools or libraries, giving developers the freedom to choose components that best suit their projects. Despite its simplicity, Flask is powerful enough to build complex web applications.

In this tutorial, we'll explore the fundamental concepts of Flask and build a simple web application step by step. By the end, you'll understand how to set up routes, handle HTTP requests, render templates, and more.

Prerequisites

Before we start, make sure you have:

Python 3.6 or newer installed
Basic knowledge of Python
Understanding of HTML (helpful but not required)
A code editor of your choice

What You'll Learn

Setting up a Flask environment
Creating your first Flask application
Handling routes and URL patterns
Working with templates
Processing form data
Managing sessions and cookies

Setting Up Flask

First, let's install Flask using pip:

pip install flask

After installation, you can verify it by checking the version:

python -c "import flask; print(flask.__version__)"

Your First Flask Application

Let's create a simple "Hello, World!" application to understand the basic structure of a Flask app.

Create a new file named app.py:

from flask import Flask

# Create a Flask application instance
app = Flask(__name__)

# Define a route for the root URL
@app.route('/')
def hello_world():
    return 'Hello, World!'

# Run the application if this file is executed
if __name__ == '__main__':
    app.run(debug=True)

Run this application:

python app.py

Output:

* Serving Flask app 'app'
* Debug mode: on
* Running on http://127.0.0.1:5000 (Press CTRL+C to quit)
* Restarting with stat
* Debugger is active!
* Debugger PIN: 123-456-789

Now, open your web browser and navigate to http://127.0.0.1:5000/. You should see "Hello, World!" displayed.

Understanding the Basic Flask Components

Let's break down what's happening in our example:

1. Application Instance

app = Flask(__name__)

This creates a Flask application instance. The __name__ parameter is a Python predefined variable representing the name of the current module. Flask uses this to determine the root path of the application.

2. Routes

@app.route('/')
def hello_world():
    return 'Hello, World!'

The @app.route decorator tells Flask what URL should trigger our function. In this case, the root URL / will execute the hello_world() function.

3. Running the Application

if __name__ == '__main__':
    app.run(debug=True)

This code runs the application if the script is executed directly (not imported). The debug=True parameter enables debug mode, which provides helpful error messages and automatically reloads the server when code changes.

Defining Routes

Routes map URLs to specific functions in your application. Let's expand our example with more routes:

from flask import Flask

app = Flask(__name__)

@app.route('/')
def home():
    return 'Welcome to the Home Page!'

@app.route('/about')
def about():
    return 'About Us Page'

@app.route('/user/<username>')
def show_user_profile(username):
    return f'User: {username}'

@app.route('/post/<int:post_id>')
def show_post(post_id):
    return f'Post ID: {post_id}'

if __name__ == '__main__':
    app.run(debug=True)

In this example:

/ routes to the home function
/about routes to the about function
/user/<username> captures the username from the URL and passes it to the function
/post/<int:post_id> captures the post_id as an integer

HTTP Methods

By default, Flask routes respond only to GET requests. To handle other HTTP methods like POST, you need to specify them:

from flask import Flask, request

app = Flask(__name__)

@app.route('/login', methods=['GET', 'POST'])
def login():
    if request.method == 'POST':
        return f"Received POST data: {request.form['username']}"
    else:
        return '''
            <form method="post">
                <input type="text" name="username">
                <input type="submit" value="Login">
            </form>
        '''

if __name__ == '__main__':
    app.run(debug=True)

In this example, the login route handles both GET and POST requests. When you navigate to /login, you see a form (GET request). When you submit the form, the same route processes the data (POST request).

Templates

Instead of returning raw strings, real applications use templates to generate HTML. Flask uses the Jinja2 template engine.

First, create a templates folder in your project directory and add an HTML file named index.html:

<!DOCTYPE html>
<html>
<head>
    <title>{{ title }}</title>
</head>
<body>
    <h1>Hello, {{ name }}!</h1>
    <p>Welcome to Flask.</p>
</body>
</html>

Now modify your app to use this template:

from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def home():
    return render_template('index.html', title='Flask Tutorial', name='World')

@app.route('/user/<username>')
def user_profile(username):
    return render_template('index.html', title='User Profile', name=username)

if __name__ == '__main__':
    app.run(debug=True)

The render_template() function takes the name of a template and any variables you want to pass to it.

Static Files

For CSS, JavaScript, and images, Flask looks in a folder called static. Create this folder in your project directory:

your_app/
  ├── app.py
  ├── templates/
  │     └── index.html
  └── static/
        └── style.css

Add some CSS to style.css:

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 20px;
    background-color: #f0f0f0;
}

h1 {
    color: #333;
}

Update your template to include this CSS:

<!DOCTYPE html>
<html>
<head>
    <title>{{ title }}</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
</head>
<body>
    <h1>Hello, {{ name }}!</h1>
    <p>Welcome to Flask.</p>
</body>
</html>

The url_for() function generates a URL to the given endpoint.

Request Data and Forms

Flask makes it easy to access form data. Let's create a simple contact form:

from flask import Flask, render_template, request, redirect, url_for

app = Flask(__name__)

@app.route('/contact', methods=['GET', 'POST'])
def contact():
    if request.method == 'POST':
        name = request.form.get('name')
        email = request.form.get('email')
        message = request.form.get('message')
        
        # In a real app, you'd process this data (save to database, send email, etc.)
        print(f"Received message from {name} ({email}): {message}")
        
        return redirect(url_for('thank_you'))
    
    return render_template('contact.html')

@app.route('/thank-you')
def thank_you():
    return render_template('thank_you.html')

if __name__ == '__main__':
    app.run(debug=True)

Create contact.html in your templates folder:

<!DOCTYPE html>
<html>
<head>
    <title>Contact Us</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
</head>
<body>
    <h1>Contact Us</h1>
    <form method="post">
        <div>
            <label for="name">Name:</label>
            <input type="text" id="name" name="name" required>
        </div>
        <div>
            <label for="email">Email:</label>
            <input type="email" id="email" name="email" required>
        </div>
        <div>
            <label for="message">Message:</label>
            <textarea id="message" name="message" required></textarea>
        </div>
        <button type="submit">Send Message</button>
    </form>
</body>
</html>

And thank_you.html:

<!DOCTYPE html>
<html>
<head>
    <title>Thank You</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
</head>
<body>
    <h1>Thank You!</h1>
    <p>Your message has been received. We'll get back to you soon.</p>
    <a href="{{ url_for('contact') }}">Back to Contact Form</a>
</body>
</html>

A Real-World Example: Todo Application

Let's build a simple TODO application that demonstrates many Flask concepts:

from flask import Flask, render_template, request, redirect, url_for, session
import os

app = Flask(__name__)
app.secret_key = os.urandom(24)  # Required for session

# In-memory storage for todos (in a real app, use a database)
todos = []

@app.route('/')
def index():
    return render_template('todo_index.html', todos=todos)

@app.route('/add', methods=['POST'])
def add():
    todo = request.form.get('todo')
    if todo:
        todos.append({'task': todo, 'done': False})
    return redirect(url_for('index'))

@app.route('/toggle/<int:todo_id>')
def toggle(todo_id):
    if 0 <= todo_id < len(todos):
        todos[todo_id]['done'] = not todos[todo_id]['done']
    return redirect(url_for('index'))

@app.route('/delete/<int:todo_id>')
def delete(todo_id):
    if 0 <= todo_id < len(todos):
        del todos[todo_id]
    return redirect(url_for('index'))

if __name__ == '__main__':
    app.run(debug=True)

Create todo_index.html in your templates folder:

<!DOCTYPE html>
<html>
<head>
    <title>Todo App</title>
    <style>
        body { font-family: Arial, sans-serif; max-width: 600px; margin: 0 auto; padding: 20px; }
        ul { list-style-type: none; padding: 0; }
        li { margin: 10px 0; padding: 10px; border: 1px solid #ddd; border-radius: 4px; }
        .done { text-decoration: line-through; background-color: #f8f8f8; }
        form { margin-bottom: 20px; }
        input[type="text"] { padding: 8px; width: 70%; }
        button { padding: 8px 15px; background-color: #4CAF50; color: white; border: none; cursor: pointer; }
        .actions { float: right; }
        .actions a { margin-left: 10px; color: #666; text-decoration: none; }
    </style>
</head>
<body>
    <h1>Todo List</h1>
    
    <form method="post" action="{{ url_for('add') }}">
        <input type="text" name="todo" placeholder="Add a new task..." required>
        <button type="submit">Add</button>
    </form>
    
    <ul>
        {% for i, todo in enumerate(todos) %}
            <li class="{{ 'done' if todo.done else '' }}">
                {{ todo.task }}
                <div class="actions">
                    <a href="{{ url_for('toggle', todo_id=i) }}">
                        {{ "☑" if todo.done else "☐" }}
                    </a>
                    <a href="{{ url_for('delete', todo_id=i) }}">🗑</a>
                </div>
            </li>
        {% else %}
            <li>No tasks yet! Add one above.</li>
        {% endfor %}
    </ul>
</body>
</html>

This Todo application demonstrates:

Route handling
Form processing
Template rendering with conditionals and loops
URL building with parameters
Basic session management

Sessions and Cookies

Flask provides built-in support for sessions and cookies, allowing you to store data between requests:

from flask import Flask, session, redirect, url_for, request, render_template

app = Flask(__name__)
app.secret_key = 'your-secret-key'  # Required for session

@app.route('/')
def index():
    if 'username' in session:
        return f'Logged in as {session["username"]}'
    return 'You are not logged in'

@app.route('/login', methods=['GET', 'POST'])
def login():
    if request.method == 'POST':
        session['username'] = request.form['username']
        return redirect(url_for('index'))
    return '''
        <form method="post">
            <p>Username: <input type=text name=username>
            <p><input type=submit value=Login>
        </form>
    '''

@app.route('/logout')
def logout():
    session.pop('username', None)
    return redirect(url_for('index'))

if __name__ == '__main__':
    app.run(debug=True)

Project Structure for Larger Applications

As your Flask application grows, you'll want to organize your code better. Here's a recommended structure:

my_flask_app/
  ├── run.py              # Entry point to run the application
  ├── config.py           # Configuration settings
  ├── requirements.txt    # Project dependencies
  ├── app/
  │     ├── __init__.py   # Initialize the Flask app
  │     ├── routes.py     # Define routes
  │     ├── models.py     # Database models
  │     ├── forms.py      # Form definitions (with Flask-WTF)
  │     ├── static/       # Static files (CSS, JS, images)
  │     └── templates/    # HTML templates
  └── tests/              # Test cases
        ├── __init__.py
        └── test_routes.py

Summary

In this tutorial, we've covered the basics of Flask:

Setting up a Flask application
Creating routes and handling different HTTP methods
Working with templates using Jinja2
Including static files like CSS
Processing form data
Using sessions for user state
Building a simple Todo application

Flask's simplicity and flexibility make it an excellent choice for both beginners and experienced developers. The micro-framework approach allows you to start small and add components as needed, rather than beginning with a large, complex framework.

Next Steps and Additional Resources

To continue your Flask journey:

Learn about database integration with Flask-SQLAlchemy
Explore form handling with Flask-WTF
Study authentication with Flask-Login
Investigate API development with Flask-RESTful

Recommended Resources:

Official Flask Documentation
Flask Mega-Tutorial by Miguel Grinberg
Flask Web Development book by Miguel Grinberg

Exercises

To reinforce your learning, try these exercises:

Modify the Todo app to store tasks in a JSON file instead of memory
Create a simple blog application with posts and comments
Build a REST API for the Todo application
Add user authentication to the Todo app so each user has their own list
Implement categories for the Todo items with color coding

Good luck with your Flask journey!

If you spot any mistakes on this website, please let me know at [email protected]. I’d greatly appreciate your feedback! :)

Introduction​

Prerequisites​

What You'll Learn​

Setting Up Flask​

Your First Flask Application​

Understanding the Basic Flask Components​

1. Application Instance​

2. Routes​

3. Running the Application​

Defining Routes​

HTTP Methods​

Templates​

Static Files​

Request Data and Forms​

A Real-World Example: Todo Application​

Sessions and Cookies​

Project Structure for Larger Applications​

Summary​

Next Steps and Additional Resources​

Recommended Resources:​

Exercises​