Welcome to this hands-on guided project using Python! In this activity, you will explore the Flask Framework, learn about Routes, work with Templates, and develop a simple web project. This guide assumes no prior knowledge of web development or Python frameworks. By the end of this session, you will have a solid understanding of how to build a basic web application using Flask.
Flask is a micro web framework written in Python. It is lightweight and flexible, allowing you to add only the components you need for your project.
- Lightweight: It doesn’t force you to use specific tools or libraries.
- Flexible: You can easily extend it with additional libraries.
- Simple: It’s easy to learn and use, especially for beginners.
-
Basic Flask Application:
from flask import Flask app = Flask(__name__) @app.route('/') def hello_world(): return 'Hello, World!' if __name__ == '__main__': app.run(debug=True)
-
Flask with Debug Mode:
from flask import Flask app = Flask(__name__) @app.route('/') def index(): return 'Debug Mode is On!' if __name__ == '__main__': app.run(debug=True)
-
Flask with Custom Port:
from flask import Flask app = Flask(__name__) @app.route('/') def custom_port(): return 'Running on a custom port!' if __name__ == '__main__': app.run(port=8080)
In Flask, routes are the URLs that users can visit in your web application. Each route is associated with a specific function in your Python code, which determines what the user will see when they visit that URL.
-
Basic Route:
from flask import Flask app = Flask(__name__) @app.route('/') def home(): return "Welcome to the Home Page!"
-
Multiple Routes:
from flask import Flask app = Flask(__name__) @app.route('/') def home(): return "Home Page" @app.route('/about') def about(): return "About Page"
-
Dynamic Route:
from flask import Flask app = Flask(__name__) @app.route('/user/<username>') def show_user_profile(username): return f'User {username}'
In Flask, templates are used to create dynamic web pages. Instead of writing static HTML code for every page, you can use templates to insert dynamic content into your web pages.
-
Basic Template:
<!-- home.html --> <!DOCTYPE html> <html> <head> <title>Home Page</title> </head> <body> <h1>Welcome, {{ name }}!</h1> </body> </html>
from flask import Flask, render_template app = Flask(__name__) @app.route('/') def home(): return render_template('home.html', name="Alice")
-
Template with Loop:
<!-- tasks.html --> <!DOCTYPE html> <html> <head> <title>Tasks</title> </head> <body> <h1>Task List</h1> <ul> {% for task in tasks %} <li>{{ task }}</li> {% endfor %} </ul> </body> </html>
from flask import Flask, render_template app = Flask(__name__) @app.route('/tasks') def tasks(): task_list = ["Task 1", "Task 2", "Task 3"] return render_template('tasks.html', tasks=task_list)
-
Template with Conditional:
<!-- status.html --> <!DOCTYPE html> <html> <head> <title>Status</title> </head> <body> <h1>Status</h1> {% if status == 'active' %} <p>The user is active.</p> {% else %} <p>The user is inactive.</p> {% endif %} </body> </html>
from flask import Flask, render_template app = Flask(__name__) @app.route('/status/<status>') def status(status): return render_template('status.html', status=status)
Now that we have covered the basics of Flask, routes, and templates, let’s put everything together and build a simple web project. We will create a To-Do List Application where users can add tasks, view them, and mark them as completed.
-
Set Up Flask:
- Install Flask using pip:
pip install flask - Create a new Python file (e.g.,
app.py) and import Flask.
- Install Flask using pip:
-
Define Routes:
- Create routes for the home page (to display tasks) and a route to add new tasks.
-
Create Templates:
- Use HTML templates to display the list of tasks and a form to add new tasks.
-
Handle User Input:
- Use Flask’s
requestobject to handle form submissions and add new tasks to the list.
- Use Flask’s
-
Display Tasks:
- Use a template to loop through the list of tasks and display them on the home page.
- It might be confusing at first to understand how routes work and how they map to functions in your code. Practice by creating multiple routes and associating them with different functions.
- If you are new to HTML, working with templates might feel overwhelming. Start by creating simple static HTML pages and gradually introduce dynamic content using Jinja2.
- Handling form submissions and user input can be tricky. Make sure you understand how Flask’s
requestobject works and how to use it to capture data from forms.
In this session, we covered the basics of the Flask framework, routes, templates, and how to build a simple web project. By now, you should have a good understanding of how to:
- Set up a Flask project.
- Define routes to handle different URLs.
- Use templates to create dynamic web pages.
- Handle user input and display data on your web pages.
I encourage you to experiment with the code and try building your own projects, such as a simple calculator or a file organizer. The more you practice, the more comfortable you will become with Flask and web development in general.
- Try adding more features to the To-Do List application, such as the ability to delete tasks or mark them as completed.
- Explore Flask’s documentation to learn about more advanced features like database integration and user authentication.
Thank you for participating in this activity! If you have any questions or need further clarification, feel free to ask. Happy coding!