Flask is a popular web framework for building web applications in Python. It is lightweight, easy to use, and allows for rapid development of web applications. In this tutorial, we will walk through the process of setting up a basic Flask app and explore some of its key features.
Step 1: Installation
Before we can start building our Flask app, we need to install Flask. You can easily do this using pip, the Python package manager. Open up a terminal window and run the following command:
pip install FlaskThis will install Flask and its dependencies on your system.
Step 2: Setting up the Flask App
Now that we have Flask installed, we can start setting up our Flask app. Create a new directory for your app and navigate into it. In this directory, create a new Python file called app.py.
In app.py, import the Flask module and create an instance of the Flask class:
from flask import Flask
app = Flask(__name__)This will create a new Flask app with the name __name__. Next, we can define our routes. Routes are URLs that the app responds to. Here is an example of a simple route that displays a message:
@app.route('/')
def hello_world():
return 'Hello, World!'This route will respond to requests to the root URL of the app (/) and return the message ‘Hello, World!’. Save the file app.py and run the Flask app by executing the following command in the terminal:
FLASK_APP=app.py flask runYou should see output indicating that the app is running on http://127.0.0.1:5000/.
Step 3: Creating Templates
Flask allows you to render HTML templates using the Jinja templating engine. Create a new directory called templates in your app directory. In this directory, create a new HTML file called index.html. Here is an example of a simple HTML template:
<!DOCTYPE html>
<html>
<head>
<title>Flask App</title>
</head>
<body>
<h1>Hello, World!</h1>
</body>
</html>Next, modify the hello_world route in app.py to render this template:
from flask import render_template
@app.route('/')
def hello_world():
return render_template('index.html')Save the changes to app.py and refresh the browser to see the updated page with the rendered template.
Step 4: Handling Form Data
Flask also allows you to handle form data submitted by users. Create a new directory called forms in your app directory. In this directory, create a new HTML file called form.html:
<!DOCTYPE html>
<html>
<head>
<title>Flask Form Example</title>
</head>
<body>
<form method="POST" action="/submit">
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<button type="submit">Submit</button>
</form>
</body>
</html>Next, modify the app.py file to handle form submissions:
from flask import request
@app.route('/form')
def show_form():
return render_template('form.html')
@app.route('/submit', methods=['POST'])
def submit_form():
name = request.form['name']
return f'Hello, {name}!'In this example, we create a new route /form that displays the form and a new route /submit that handles form submissions. When the form is submitted, the data is accessed using request.form and used to display a personalized message. Save the changes to app.py and navigate to /form in your browser to see the form.
Step 5: Adding Static Files
Flask also allows you to serve static files such as CSS, JavaScript, and images. Create a new directory called static in your app directory. In this directory, add a new CSS file called style.css:
body {
background-color: #f0f0f0;
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
h1 {
color: #333;
}Next, modify the index.html file to include this CSS file:
<!DOCTYPE html>
<html>
<head>
<title>Flask App</title>
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
</head>
<body>
<h1>Hello, World!</h1>
</body>
</html>Save the changes and refresh the browser to see the updated page with the applied styles.
Step 6: Conclusion
In this tutorial, we have covered the basics of setting up a Flask app, creating routes, rendering templates, handling form data, and serving static files. Flask is a versatile and powerful web framework that can be used to build a wide range of web applications. Explore the Flask documentation for more advanced features and techniques to enhance your Flask apps. Happy coding!
