Flask

Flask Overview, Environment, Application and Routing

Copyright © 2012 Tata Consultancy Services Limited

1
 AGENDA
• Flask Overview

• Flask Installation

• Virtual Environment

• Flask Basics

• Basic Routes

• Dynamic Routing

• Debug Mode

2
 Flask Overview
Let's imagine you visit a website written with Flask

• HTML will display the

page elements.

• CSS will style the

Front End
elements

• Bootstrap will provide

You
automatic styling and
components through
CSS and JS.
3
 Flask Overview
Every major websites will perform some main operations

1. Accept Information
from the user.
2. Retrieve Information
from a database.
Front End
3. Create / Update /
Delete / information in
database.
You
4. Display information
back to the user.

4
 Flask Overview
To perform these tasks, we'll need a web framework to accept and return
information with the front-end.

Flask
Front End
Web App

You

5
 Flask Overview
Flask is the web framework that allows us to connect python code to the web.

Flask
Front End
Web App

You

6
 Flask Overview
We'll use Flask and Python to connect to HTML templates and retrieve, edit, or
return statements.

Flask
Front End
Web App

You

7
 Flask Overview
Accepting User Information

Forms
Flask
Front End
Web App

You

Database
SQLite 8
 Flask Overview
Create / Read / Update / Delete Information from the database if necessary.
CRUD

Forms
Flask
Front End
Web App

You

Database
SQLite 9
 Flask Overview
Then we'll want to return or display information back to the user.
CRUD

Forms
Flask
Front End
Web App

You

Database
SQLite 10
 Flask Overview
We'll use Jinja Templates to grab information from Python and Flask to send info
back as HTML. CRUD

Forms
Flask
Front End
Web App

You

Database
SQLite 11
 Flask Overview
This is a very high-level overview! There are many more possibilities: Payments,
Rest APIs, etc... CRUD

Forms
Flask
Front End
Web App

You

Database
SQLite 12
 Flask Overview

• Front End is rendered in the browser

o HTML

o CSS

o BOOTSTRAP

o JS, JQuery, and many more libraries!

13
 Flask Overview

• Python is the coding language that allows us to use the Flask Web
Framework.

• Flask renders HTML templates, can edit them with Jinja, and
can communicate with a database through the use of libraries
such as SQLAlchemy (Flask - SQLAlchemy).

14
 Flask Installation

• You need to have Python 3 installed in your system.

• Install flask using pip. Open CMD and type the following
command.

• If you have TCS proxy issues in installing Flask, Use:

pip install --proxy="empid:[email protected]:8080" flask

15
 Virtual Environment

• Imagine you're launched your web application and you use some
external python library.

• Then that library gets updated to a newer version, the update has
new features, but also has breaking changes.

• What can we do?

16
 Virtual Environment

• Fortunately, we can use virtual environments to help manage

dependencies.

• Each project we work on can have its own distinct environment.

• This is why we use Virtual Environments.

17
 Virtual Environment
VIRTUAL ENV

• pip install virtualenv.

• Go to your project directory in cmd.

• Creating Virtual Environment: python –m virtualenv flaskenv

• For Activation : flaskenv\Scripts\activate

• This activates your virtual environment. Now you can install necessary
packages.

• For Deactivation : deactivate

18
 Flask Basics
• Let's create our first website in Flask!

• This is the simplest site possible.

• It will simply return Hello World on a webpage.

• Make sure you're installed Flask!

o pip install flask

19
Flask Basics

20
 Basic Routes
• We just saw how to create a web application with a single page
(returned in the form of string.)

• Let's see how we can add multiple routes (multiple pages.)

• The Key to this is in the @app.route() decorator.

• The string parameter passed into the decorator determines the

URL extension that will link to the function (a.k.a view)

21
 Basic Routes
• Currently our homepage or domain is locally represented as
http://127.0.0.1:5000

• We use decorators to add on to this

• @app.route("/some_page")
• http://127.0.0.1:5000/some_page

• Once a page is deployed, 127.0.0.1 will be replaced by the

domain (www.site.com)

22
 Dynamic Routing
• Often we will want URL route extensions to be dynamic based on
the situation.

• For example we may want a page per user, so that the extension is
in the form:
• www.site.com/user/unique_user_name
• To achieve this effect we can use dynamic routes

• Dynamic routes have 2 key aspects:

• A variable in the route <variable>
• A parameter passed in to the function
23
Dynamic Routing

24
 Debug Mode

• As we learn we'll definitely make some mistakes along the way.

• We can set debug=True in our application to help us catch erros.

• Debug mode also gives us access to a console in the browser.

25
Routing Exercise

26
Routing Exercise

27
Routing Exercise

28
 Thank You

Copyright © 2012 Tata Consultancy Services Limited

29