Table of Contents
- Introduction
- Prerequisites
- Installation
- Creating a Simple Flask App
- Routing and URL Building
- Templates and Static Files
- Forms and User Input
- Database Integration
- Deploying Flask Applications
- Conclusion
Introduction
Welcome to this tutorial on getting started with Flask, a Python microframework for building web applications. Flask is known for its simplicity and ease of use, making it a popular choice among developers for quickly prototyping and developing web applications. By the end of this tutorial, you will have a good understanding of Flask’s core concepts and be able to build your own basic web application.
Prerequisites
Before diving into Flask, it is important to have a basic understanding of Python programming. Familiarity with HTML and CSS will also be helpful, but not necessary. Additionally, make sure you have Python installed on your system.
Installation
To install Flask, you can use the pip package manager, which comes bundled with Python. Open your terminal or command prompt and run the following command:
pip install flask
This will download and install Flask and its dependencies on your system.
Creating a Simple Flask App
Let’s start by creating a simple Flask application. Open your favorite text editor and create a new Python file called app.py. In this file, import the Flask class from the flask module:
```python
from flask import Flask
app = Flask(__name__)
``` Here, we create an instance of the `Flask` class and assign it to the variable `app`. The `__name__` variable is a special Python variable that represents the name of the current module. This is required by Flask to determine where to look for resources such as templates and static files.
Next, let’s define a route and a view function for the root URL (“/”) of our application. A route is a URL pattern that Flask uses to match incoming requests. A view function is a Python function that returns the content of a response.
python
@app.route('/')
def index():
return "Hello, Flask!"
Here, we use the @app.route decorator to associate the root URL (“/”) with the index function. The index function simply returns the string “Hello, Flask!”.
To run the Flask application, add the following code at the end of the file:
python
if __name__ == '__main__':
app.run()
This code ensures that the application only runs when the file is executed directly, not when it is imported as a module.
To start the application, open your terminal or command prompt, navigate to the directory where app.py is located, and run the following command:
python app.py
You should see an output similar to this:
* Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)
Open your web browser and visit http://127.0.0.1:5000/. You should see the message “Hello, Flask!” displayed in your browser.
Congratulations! You have successfully created and run your first Flask application.
Routing and URL Building
Routing is an essential part of any web application framework. It allows you to map URLs to specific functions, giving your application structure and defining how it responds to different requests.
In Flask, you can define routes using the @app.route decorator. The decorator takes a URL pattern as an argument and associates it with a view function.
Let’s create some additional routes for our application. Modify the app.py file as follows:
```python
@app.route(‘/’)
def index():
return “Hello, Flask!”
@app.route('/about')
def about():
return "This is the about page."
@app.route('/contact')
def contact():
return "This is the contact page."
``` Here, we have defined three routes: the root URL ("/"), "/about", and "/contact". Each route is associated with a view function that returns a different message.
Save the file and restart the Flask application by running python app.py.
Open your web browser and visit http://127.0.0.1:5000/about. You should see the message “This is the about page.” Similarly, visiting http://127.0.0.1:5000/contact will display the message “This is the contact page.”
Flask also provides URL building capabilities, allowing you to generate URLs dynamically based on route names and arguments. Add the following route to the app.py file:
python
@app.route('/user/<username>')
def profile(username):
return f"Welcome, {username}!"
Here, we define a route with a variable part (“
To generate the URL for this route, we can use the url_for function provided by Flask. Modify the index function as follows:
```python
from flask import url_for
@app.route('/')
def index():
profile_url = url_for('profile', username='john')
return f"Hello, Flask! <a href='{profile_url}'>Visit my profile</a>."
``` In this example, we use the `url_for` function to generate the URL for the `profile` route. The first argument to `url_for` is the name of the route (in this case, 'profile'), and any additional arguments are used to replace the variable parts of the route.
Restart the Flask application and visit http://127.0.0.1:5000/. You should see the message “Hello, Flask! Visit my profile” with a link to http://127.0.0.1:5000/user/john.
Congratulations! You have learned how to define routes and build URLs in Flask.
Templates and Static Files
Flask allows you to separate your application logic from the presentation layer by using templates. Templates are HTML files that can contain placeholders for dynamic content.
To use templates in Flask, create a new directory called templates in the same directory as your app.py file. Inside the templates directory, create a new file called index.html with the following content:
```html
<!DOCTYPE html>
<html>
<head>
<title>Flask App</title>
</head>
<body>
<h1>Hello, Flask!</h1>
</body>
</html>
``` Modify the `index` function in `app.py` to render this template:
```python
from flask import render_template
@app.route('/')
def index():
return render_template('index.html')
``` Here, we import the `render_template` function from Flask and use it to render the `index.html` template.
Restart the Flask application and visit http://127.0.0.1:5000/. You should see the contents of the index.html template rendered in your browser.
Flask also provides a convenient way to handle static files such as CSS stylesheets, JavaScript files, and images. Create a new directory called static in the same directory as your app.py file. Inside the static directory, create a new file called styles.css with the following content:
css
h1 {
color: blue;
}
Modify the index.html file to include this stylesheet:
```html
<!DOCTYPE html>
<html>
<head>
<title>Flask App</title>
<link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}">
</head>
<body>
<h1>Hello, Flask!</h1>
</body>
</html>
``` Here, we use the `url_for` function to generate the URL for the `styles.css` stylesheet.
Restart the Flask application and visit http://127.0.0.1:5000/. You should see the text “Hello, Flask!” rendered in blue.
Congratulations! You have learned how to use templates and serve static files in Flask.
Forms and User Input
Web forms are a common way to collect data from users. Flask provides a built-in module called Werkzeug for handling form data.
Let’s create a simple contact form for our application. Modify the contact function in app.py as follows:
```python
from flask import render_template, request
@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')
# Process form data
return "Thank you for your submission!"
return render_template('contact.html')
``` Here, we import the `request` object from Flask, which provides access to the incoming request data. The `request.form` object allows us to access the form data submitted by the user.
We check the request method to determine if it is a GET or POST request. If it is a POST request, we retrieve the form data using the request.form.get method.
Create a new directory called templates in the same directory as your app.py file. Inside the templates directory, create a new file called contact.html with the following content:
```html
<!DOCTYPE html>
<html>
<head>
<title>Contact</title>
</head>
<body>
<h1>Contact</h1>
<form method="POST" action="">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required><br>
<label for="message">Message:</label>
<textarea id="message" name="message" rows="4" required></textarea><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
``` Here, we define a simple HTML form with fields for name, email, and message. The `method` attribute of the form specifies that it should be submitted using the POST method, and the `action` attribute is left empty to submit the form to the current URL.
Restart the Flask application and visit http://127.0.0.1:5000/contact. You should see the contact form rendered in your browser.
Enter some values into the form fields and click the “Submit” button. You should see the message “Thank you for your submission!” displayed.
Congratulations! You have learned how to handle forms and user input in Flask.
Database Integration
Many web applications require a database to store and retrieve data. Flask integrates well with various databases through extensions.
For this tutorial, we will use SQLite, a lightweight and file-based database. However, Flask supports other databases such as MySQL, PostgreSQL, and MongoDB.
To use SQLite with Flask, we need to install the Flask-SQLAlchemy extension. Open your terminal or command prompt and run the following command:
pip install flask-sqlalchemy
Next, let’s create a simple database model to represent a user. Modify the app.py file as follows:
```python
from flask import Flask
from flask_sqlalchemy import SQLAlchemy
app = Flask(__name__)
app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///app.db'
db = SQLAlchemy(app)
class User(db.Model):
id = db.Column(db.Integer, primary_key=True)
username = db.Column(db.String(80), unique=True, nullable=False)
def __repr__(self):
return f'<User {self.username}>'
``` Here, we import the `Flask` and `SQLAlchemy` classes from their respective modules. We create an instance of the `Flask` class and configure the database URI as 'sqlite:///app.db', which specifies that the database should be stored in a file called 'app.db' in the current directory.
We also create an instance of the SQLAlchemy class and bind it to the Flask application using the db variable.
Finally, we define a User model class that extends the db.Model base class provided by SQLAlchemy. The User model has an id column of type Integer and a username column of type String. The __repr__ method defines a string representation of the model.
To create the database and the User table, open a Python shell in the same directory as your app.py file and run the following commands:
python
from app import db
db.create_all()
This will create a file called app.db in the current directory and generate the necessary tables.
To interact with the database, we need to open a Python shell and import the necessary modules. Run the following commands in the Python shell:
python
from app import db, User
To add a new user to the database, run the following commands:
python
user = User(username='john')
db.session.add(user)
db.session.commit()
This code creates a new User object, adds it to the database session, and commits the changes, which persist the data to the database.
To query the users from the database, run the following command:
python
users = User.query.all()
This will return a list of all the users in the database.
Congratulations! You have learned how to integrate a database into your Flask application.
Deploying Flask Applications
Once you have developed your Flask application, you may want to deploy it to a production server. Flask provides various options for deploying applications, including Apache, Nginx, and hosting platforms such as Heroku and PythonAnywhere.
In this tutorial, we will focus on deploying the application to a local development server for testing purposes.
To deploy your Flask application, you can use the flask command-line interface (CLI). Open a terminal or command prompt and navigate to the directory where your app.py file is located.
Run the following command to set the Flask application environment variable:
export FLASK_APP=app.py
On Windows, use the following command instead:
set FLASK_APP=app.py
Finally, run the following command to start the development server:
flask run
You should see an output similar to this:
* Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)
Open your web browser and visit http://127.0.0.1:5000/. You should see your Flask application running.
Congratulations! You have deployed your Flask application to a local development server.
Conclusion
In this tutorial, we covered the basics of Flask, a Python microframework for web development. We learned how to install Flask, create a simple application, define routes, use templates and static files, handle user input with forms, integrate databases, and deploy the application locally.
Flask provides a flexible and minimalistic approach to web development, making it a popular choice for small to medium-sized projects. With the knowledge and skills you have gained from this tutorial, you are now ready to explore more advanced features of Flask and build more complex web applications.
Remember to check out the Flask documentation for more in-depth information and additional features that can further enhance your development experience. Happy coding!