Introduction to Flask

Repository

https://github.com/pallets/flask

What Will I Learn?

• You will be introduced to building web applications with Flask framework.
• You will learn how to setup a Flask project.
• You will learn about Flask routes.
• You will learn how to create and structure a database using Flask SQLAlchemy.

Requirements

• Basic knowledge of Python
• A code editor or an IDE to write python code

Difficulty

• Basic

Tutorial Contents

This tutorial series will explain you how to create web applications with Flask, by building a micro-blogging platform. At the end of this tutorial series you will have a good understanding of Flask and you will have built your own micro-blogger with flask.

Introduction to Flask

Flask is a framework to build web applications. This framework is very simple and easy to use. Flask is lightweight and unlike other framework it doesn't limit your project to certain rules. You can use Flask in any way you like.

Installing Flask

To install flask run the following command in your Terminal/CMD:
pip install flask
If you see any error while install flask such as "Access Denied". Run your Terminal/CMD in administrator mode.

Introduction to our Project

We will be building a sample micro-blogger. This is just going to say hello to our users.

Creating a Flask Project

Now, let's create a flask project. Create a folder and name it "micro-blogger". Structure the folder in the following way:

micro-blogger/
  app.py
  micro_blogger/
    __init__.py
    templates/
      index.html
    static/
      style.css

• The app.py file will run our application. It is the entry point of our app.
• The __init__.py file inside the micro_blogger folder will contain the code which will initialize our flask application.
• The templates directory inside the micro_blogger folder will contain all the html files of our application. The index.html file inside templates folder will contain all the html code of homepage of our web app.
• The static directory inside the micro_blogger folder will contain all the css and javascript files of our application. The style.css file inside the static folder will contain all the css code our web app.

Now that we have the folder structure of our Flask project. Let's write some code. Open the __init__.py inside the micro_blogger folder and write the following code.

from flask import Flask

app = Flask(__name__)


@app.route('/')
def index():
    return "Welcome to Micro-Blogger!"

Let's break down this code step by step.

• In the first line we have the imported the Flask framework.
• The second line creates a Flask object and store it in the app variable. The Flask object takes the __name__ variable which help flask to decide where are all the html templates and css files of the project.
• In the third line we use a decorator. A decorator is used to extend the behavior of a function. In this case we use a route decorator by typing @app.route('/'). This decorator binds the / url of our app to the index function that we defined in the next line. So, in short whenever we run the / url in our web app it runs the index function.
• Next we define the index function and inside that function we return a string "Welcome to Micro-Blogger!". This returned value will be shown in our web browser when we'll run the / url of our web app.

Now our __init__.py file is ready and it will initialize the Flask framework. Now let's write some code in the app.py file. Write the following in your app.py file

from micro_blogger import app
app.run(debug=True)

Let's again understand this code.

• Remember that we create a flask object in __init__.py file and stored it in the app variable. In the first line we are importing that app variable.
• In the second line we are running our app by calling the run function on our app variable. Note that the run function has a debug option set to true. This debug option is only for development purpose. This debug option is configure our app in such a way that it is easy to debug our code. Always remember that when you will deploy your app for production remove this debug=True from your app.

Now our app is ready to run.

• Enter the following command in your Terminal/CMD: python app.py
• This command will run the app.py file which will run our flask application. In your Terminal/CMD you will see this line Running on http://127.0.0.1:5000/
• This http://127.0.0.1:5000/ url might me different for you. So, whatever this url is in your case type that in the address bar of your web browser to run your web app.
• When you will type this url you will be taken to the / route of your web app. This will show you the following text Welcome to Micro-Blogger! in your web browser.

Remember that we added Welcome to Micro-Blogger! text as a return value in our index function in the __init__.py file, and since we used the @app.route('/') route decorator to bind the index function with the / route. This returned value is shown by the browser on the / route.

Flask Routes

We are already somewhat familiar with Flask routes. Now, let us understand the flask routes in more detail

Multiple routes for same web page.

We use the following decorator with our index function @app.route('/') to bind the index function with / route. Now, let's bind the same index function with multiple routes. Replace the code of index function with the following code.

@app.route('/')
@app.route('/home/')
@app.route('/index/')
def index():
    return "Welcome to Micro-Blogger!"

Here you can see that we have multiple routes decorator. Each route decorator has different route url, namely /, /home/ and /index/. All these three routes decorator bind the same index function with different routes. So, if you run python app.py in the Terminal/CMD and open any of the following urls
http://127.0.0.1:5000/, http://127.0.0.1:5000/home or http://127.0.0.1:5000/index, you will see the same page with Welcome to Micro-Blogger! text.
Also another thing to note is that in the route decorator I defined the route url as /home/ with a / at the end of the route url. If you define the route url with a / at the end, this route will work both on http://127.0.0.1:5000/home and http://127.0.0.1:5000/home/. On the other hand if you defined your route url as only /home your route will only work on http://127.0.0.1:5000/home and not on http://127.0.0.1:5000/home/. So, just keep thing thing in mind while writing your route urls.

Dynamic Routes

Right now we are just creating static urls. Now, let's do something dynamic. Dynamic routes are used to get arguments in your function from the url. After the index function add the following function to your __init__.py file.

@app.route('/users/<string:username>/')
def users(username):
    return "Hello, %s" % username

Let's understand this function

• First we have a dynamic route decorator. The url of this route is /users/<string:username>/. This route url defines that we need to have /users/ at first and after that we can have any string. Notice that we have <string:username> in the route url, which defines that we can have any string and we can use this string in our function as a variable username.
• Next we define a function called users and we take in username as an argument. Note that we can only take this username as an argument because we have defined it in the route url /users/<string:username>/ that we want to take an argument as username which will always be a string.
• Next inside the users function we just return a string in the from of Hello, username

Now you can again run your app using python app.py and type the following url in the address bar of your web browser http://127.0.0.1:5000/users/YOUR_NAME_HERE

We can take arguments in our route url in the form of following datatypes:

• string (default): accepts any text without a slash
• int: accepts positive integers
• float: accepts positive floating point values
• path: like string but also accepts slashes
• uuid: accepts UUID strings

url_for() function

url_for function will allow us to get the url of the any function which uses the route decorator.
On the top of your __init__.py file change the flask import to from flask import Flask, url_for. This line will import both flask module and url_for function. After the users function add the following code

with app.test_request_context():
    print(url_for('index'))
    print(url_for('users', username='YOUR_NAME_HERE'))

• The first line in this code is with app.test_request_context(). This test_request_context() function will help us to test our url_for function.
• next we have two lines print(url_for('index')) and print(url_for('users', username='YOUR_NAME_HERE')). In the url_for function we first put an argument as the name of the function whose url we want to get and the second argument is for dynamic routes which we can use to pass the dynamic url arugrments.

Next if you will run python app.py. You will see the urls of the function are printed

Creating a Database

To create a database, first you need to install Flask SQLAlchemy. Use the following command to install Flask SQLAlchemy
pip install Flask-SQLAlchemy
Next we need to create two files. The first is database.py and the second is config.cfg, create these files in the micro_blogger directory. After creating the files your project directory will look like this:

micro-blogger/
  app.py
  micro_blogger/
    __init__.py
    database.py
    config.cfg
    templates/
      index.html
    static/
      style.css

• The database.py file will be used to structure our database tables
• The config.py file will be used to add configuration variable to your project

Before writing any code remove the debug=True from the app.py and write the following code in the config.cfg file

SQLALCHEMY_DATABASE_URI='sqlite:////absolute/path/to/sqlite_database'
SQLALCHEMY_TRACK_MODIFICATIONS=False
DEBUG=True

• This file will set some config variable.
• The first variable is ```SQLALCHEMY_DATABASE_URI``. It is used to set the URL of your database. I will be using SQLite database but you are free to use your own. Set the required URL of your database in one of the following format:
  • Postgres: postgresql://username:password@localhost/database_name
  • MySQL: mysql://username:password@localhost/database_name
  • Orace: oracle://username:[email protected]:1521/sidname
  • SQLite: sqlite:////absolute/path/to/foo.db
• The second variable is SQLALCHEMY_TRACK_MODIFICATIONS. It is used to decide you want to store the modification of objects and emit signals. Since, we don't to do that so we will set it to false.
• Next is the DEBUG mode. Since we want to turn on the debug mode so we will set this to true.

Now you need to import Flask SQLAlchemy to your __init__.py file. To do that use the following code from flask_sqlalchemy import SQLAlchemy.

Next we need to setup database and use the config file to get the config variable. Enter the following code in __init__.py file after the initialization of the app variable.

.............
app = Flask(__name__)
app.config.from_pyfile('config.cfg')
db = SQLAlchemy(app)
.............

• The app.config.from_pyfile('config.cfg') line will import the config variable from config.cfg file and set it to our app.
• The db = SQLAlchemy(app) line will create an SQLAlchemy object and store it in the db variable.

Next we need to use our database.py to define the tables in our database. Write the following code to database.py file

from . import db


class User(db.Model):
    __tablename__ = 'users'
    id = db.Column('id', db.Integer, primary_key=True, unique=True, nullable=False)
    username = db.Column('username', db.String, unique=True, nullable=False)
    password = db.Column('password', db.Text, nullable=False)

• The first line from . import db import the db object from the __init__.py file.
• Next we create a User class. This Use class will define how you users table in the Database will be structured. Note that the argument of the User class is db.Model which will link this table to our database.
• Inside the class we have the following variables.
  • The __tablename__ variable will define the name of the table.
  • The id variable will define the id column in our database. Note that we define it using the db.Column() function. Inside this function we pass several arguments. These arguments will make the id column datatype integer, primary, unique and not nullable.
  • The username variable will define the username column in our table. This column will be datatype string, unique and not nullable.
  • The password variable will define the password column in our table. This column will be datatype text, and not nullable.

Now we just need to create the users table in our actual database. To do so open the Terminal/CMD, and enter the following commands.

C:\Users\Kartik\Desktop\micro-blogger>python
Python 3.6.5 (v3.6.5:f59c0932b4, Mar 28 2018, 17:00:18) [MSC v.1900 64 bit (AMD64)] on win32
Type "help", "copyright", "credits" or "license" for more information.
>>> from micro_blogger.database import db
>>> db.create_all()
>>>

• The first command will import the db object from the database.py file.
• The second command will create the actual tables in our database.