Flask

Creating a web application with Flask is a great way to get started with web development in Python. Below is a step-by-step tutorial for building a simple Flask application. We'll cover the essentials: setting up the environment, creating routes, using templates, and handling forms.

Step-by-Step Flask Tutorial

1. Set Up Your Development Environment

  1. Install Python: Make sure you have Python installed. Flask works with Python 3.7 and later.
  2. Create a Project Directory:
    mkdir flask_tutorial
cd flask_tutorial
  3. Set Up a Virtual Environment:
    python -m venv venv
source venv/bin/activate   # On Windows, use `venv\Scripts\activate`
  4. Install Flask:
    pip install Flask

2. Create a Basic Flask Application

  1. Create app.py:
    from flask import Flask

app = Flask(__name__)

@app.route('/')
def home():
    return "Hello, Flask!"

if __name__ == "__main__":
    app.run(debug=True)
  2. Run the Application:
    python app.py

    Open a browser and navigate to http://127.0.0.1:5000/ to see the "Hello, Flask!" message.

3. Adding Routes and Views

Routes define the URLs that the application responds to. Views are the code that runs in response to a request for a specific route.

  1. Add More Routes:
    @app.route('/about')
def about():
    return "This is the about page"
  2. Dynamic Routes:
    @app.route('/user/<username>')
def user_profile(username):
    return f"Hello, {username}!"

4. Using Templates

Flask uses Jinja2 as its templating engine. This allows you to separate HTML from your Python code.

  1. Create a Templates Folder: Inside your project directory, create a folder called templates.
  2. Add a Template File: Create a file named index.html in the templates folder:
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Home</title>
</head>
<body>
    <h1>Welcome to Flask!</h1>
    <p>{{ message }}</p>
</body>
</html>
  3. Modify app.py to Use the Template:
    from flask import render_template

@app.route('/')
def home():
    return render_template('index.html', message="This is a Flask app!")

5. Handling Forms

To handle forms in Flask, you can use request data and create forms using HTML.

  1. Create a Form in a Template (form.html):
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Form</title>
</head>
<body>
    <h1>Submit Your Name</h1>
    <form action="/greet" method="post">
        <label for="name">Name:</label>
        <input type="text" id="name" name="name">
        <button type="submit">Submit</button>
    </form>
</body>
</html>
  2. Create a Route to Display the Form:
    @app.route('/form')
def form():
    return render_template('form.html')
  3. Create a Route to Handle Form Submission:
    from flask import request

@app.route('/greet', methods=['POST'])
def greet():
    name = request.form.get('name')
    return f"Hello, {name}!"

6. Static Files

Static files (like CSS and JavaScript) are stored in a static folder in your project directory.

  1. Create a Static Folder: Inside your project directory, create a folder called static.
  2. Add a CSS File (style.css in static):
    body {
    font-family: Arial, sans-serif;
    background-color: #f8f9fa;
}
  3. Link the CSS File in a Template (index.html):
    <head>
    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
</head>

7. Flask Application Structure

For larger applications, it's best to organize your code into multiple files and folders.

  1. Project Structure:
    flask_tutorial/
    ├── app/
    │   ├── __init__.py
    │   ├── routes.py
    │   ├── templates/
    │   │   └── index.html
    │   └── static/
    │       └── style.css
    ├── venv/
    ├── config.py
    └── run.py
  2. Modify __init__.py:
    from flask import Flask

app = Flask(__name__)

from app import routes
  3. Move Routes to routes.py:
    from app import app

@app.route('/')
def home():
    return "Hello from the organized Flask app!"
  4. Create run.py:
    from app import app

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

8. Advanced Topics and Extensions

  • Flask Extensions: Use extensions like Flask-SQLAlchemy for database integration, Flask-Migrate for database migrations, Flask-WTF for form handling, and Flask-Login for user authentication.
  • Blueprints: Organize your application into components to make it modular.
  • REST APIs: Use Flask-RESTful or Flask-Swagger to build and document APIs.

Summary

Flask is a versatile and lightweight framework that allows you to start simple and scale up as needed. This tutorial covers the basics to get you started, but there's a lot more to explore in Flask's ecosystem. As you grow more comfortable with Flask, consider diving into its documentation and experimenting with its many extensions to build more complex and feature-rich applications.

For further reading and tutorials:

Feel free to ask more questions or for more detailed examples on any specific part of Flask!

Table of Contents