Introduction to Flask

View this thread on: d.buzz | hive.blog | peakd.com | ecency.com
·@kartik2085·
0.000 HBD
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.

![Flask Framework](http://gdurl.com/v5yB)

### 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:password@127.0.0.1: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.
👍 , , , , , , , , , , , , , , , , , , , , ,