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
