Select a Subtopic

Day 20: Flask for Web Development

Flask is a lightweight and flexible web framework for Python. It's great for building small to medium-sized web applications. On Day 20, you’ll explore the basics of creating a Flask web app and how to handle routes, templates, and forms.

Topics for Day 20: Flask for Web Development

Creating a Basic Flask App
Handling Routes and Templates
Form Handling in Flask
Building a Simple To-Do App

Step-by-Step Explanation with Code

1. Setting up Flask

To start using Flask, you need to install it first. You can install it using pip:

pip install flask

2. Creating a Basic Flask App

Here's how you can create a simple "Hello, World!" app:

from flask import Flask

# Initialize the Flask app
app = Flask(__name__)

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

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

Output: When you navigate to http://127.0.0.1:5000/ in your browser, you should see "Hello, World!".

3. Handling Routes and Templates

Flask allows you to render HTML templates using the render_template() function.

<!-- templates/index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Flask App</title>
</head>
<body>
    <h1>{{ message }}</h1>
</body>
</html>

from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def hello_world():
    return render_template('index.html', message='Welcome to Flask!')

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

Output: When you visit http://127.0.0.1:5000/, you’ll see a message saying "Welcome to Flask!".

4. Form Handling in Flask

Flask also provides ways to handle user input through forms. Let's create a simple to-do app.

<!-- templates/index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>To-Do List</title>
</head>
<body>
    <h1>To-Do List</h1>
    <form action="/" method="POST">
        <input type="text" name="task" placeholder="Add a task" required>
        <input type="submit" value="Add Task">
    </form>

    <h2>Tasks:</h2>
    <ul>
        {% for task in tasks %}
            <li>{{ task }}</li>
        {% endfor %}
    </ul>
</body>
</html>

from flask import Flask, render_template, request

app = Flask(__name__)

tasks = []

@app.route('/', methods=['GET', 'POST'])
def index():
    if request.method == 'POST':
        task = request.form['task']
        tasks.append(task)

    return render_template('index.html', tasks=tasks)

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

Output: When you visit http://127.0.0.1:5000/, you'll see a form to add tasks. Upon submitting, tasks will appear below the form.

Summary

Flask Basics: Set up a basic Flask app with routes and templates.
Templates: Use the render_template() function to serve HTML with dynamic content.
Form Handling: Handle form submissions with POST requests and update content dynamically.
To-Do App: Build a simple to-do list application where users can add tasks.

Next Steps

Explore Flask Blueprints for organizing larger applications.
Create a Flask RESTful API using Flask-RESTful for advanced projects.
Integrate databases into your Flask app using SQLAlchemy.