MODULE 7

Integrative Programming & Technology

Web Framework Flask

BSIT 3A

Prepared by:

REYNEL M. MARGELINO
Faculty
Lesson Objectives:
At the end of this lesson, you will be able to:
• Understand Flask as Python Web Framework
• Learn how to create routes (or views) with Flask.
• Learn how to serve static content and files using Flask.
• Learn how to serve dynamic content using the Jinja Templating Engine.
• Learn how to build a Flask application, hands-on.

WEB FRAMEWORK (FLASK)

• Web Application Framework or simply Web Framework represents a
collection of libraries and modules that enables a web application
developer to write applications without having to bother about low-level
details such as protocols, thread management etc.

• Flask is a web application framework written in Python

• Armin Ronacher, who leads an international group of Python enthusiasts
named Pocco, develops it.

• Flask is based on Werkzeug WSGI toolkit and Jinja2 template engine. Both
are Pocco projects.

WHAT IS WSGI ?
• Web Server Gateway Interface (WSGI) has been adopted as a standard
protocol for Python web application development. WSGI is a specification
for a universal interface between the web server and the web applications.

WHAT IS WERKZEUG?

• It is a WSGI toolkit, which implements requests, response objects, and other

utility functions. This enables building a web framework on top of it. The Flask
framework uses Werkzeug as one of its bases.
WHAT IS JINJA2 ?

• Jinja2 is a popular templating engine for Python. A web templating system

combines a template with a certain data source to render dynamic web
pages.
• Flask is often referred to as a micro framework. It aims to keep the core of
an application simple yet extensible.

GETTING STARTED WITH FLASK

1. Download and Install XAMPP as your local web server

Link- [Link]

2. Download and Install with python exe

Link- [Link]
3. Create Folder on your documents
a. Go to Users

Your PC name

Documents

Create a folder named it f2

b. Open your cmd and type cd

Note: Used Command Prompt or in Visual studio Terminal

 c. Then type py -m venv env #this is the code to setup
Just keep on waiting until it is finished

d. Type the following code to create folder for Scripts and activate it
(“env\Scripts\activate”)

Note: notice the (env) is

Activated.

and type this in your cmd or terminal: pip install Flask

• The following command to get Flask activated in your
virtualenv:
Note: need to upgrade the pip as mentioned above.
([Link] -m pip install --upgrade pip)

e. You should have folder same as image below

f. Subfolder is generated same as below

 96

STARTING TO CODE AND IMPLEMENT FLASK

1. Create a document using notepad ++, sublime, visual studio code or

other free text editor.
2. Saving the first file [Link] at the location inside of f2 folder with env folder
3. Copy the codes below for [Link]

Note: Importing flask module in the project is mandatory. An object of Flask class
is our WSGI application.
Flask constructor takes the name of current module ( name ) as argument.
The route() function of the Flask class is a decorator, which tells the application
which URL should call the associated function.
[Link](rule, options)
• The rule parameter represents URL binding with the function.
• The options is a list of parameters to be forwarded to the underlying Rule
object.
In the above example, ‘/’ URL is bound with hello_world() function. Hence, when
the home page of web server is opened in browser, the output of this function
will be rendered.
Finally the run() method of Flask class runs the application on the local
development server.
4. Activate and run flask using your cmd and follow the code below.
( $env:FLASK_APP = "[Link]" )
(flask run)

5. Copy the [Link] which is prompted below of the cmd

and paste it to you URL browser.

6. Output should the same as image below.

 7. Inside env or environment folder create folder named it as “templates”
and inside it creates also an html file named it as [Link]

Note:

TEMPLATES are files that contain static data as well as placeholders for dynamic
data. A template is rendered with specific data to produce a final document.
Flask uses the Jinja template library to render templates.
In your application, you will use templates to render HTML which will display in the
user’s browser. In Flask, Jinja is configured to autoescape any data that isrendered
in HTML templates. This means that it’s safe to render user input; any characters
they’ve entered that could mess with the HTML, such as < and > will be escaped
with safe values that look the same in the browser but don’t causeunwanted
effects.

8. Copy the code below to you [Link]

 Note: Each page in the application will have the same basic layout around a
different body. Instead of writing the entire HTML structure in each template,
each template will extend a base template and override specific sections.

Link tag will serve as the frame and connection of css and bootstrap
9. Inside f2 folder create folder named it as “static” and
inside it create css file named it as [Link]

10. In [Link] copy the codes below

11. The image below explains the flask python code.

Create another [Link] ([Link]) and wire the code bellow and paste
it.
12. The output should be the same as below

FLASK POST METHOD

• POST is used to send HTML form data to server. Data received by POST
method is not cached by server.
• A POST request is used to send data to the server, for example, customer
information, file upload, etc. using HTML forms.

CODING USING POST IN PYTHON FLASK

1. Create a document using notepad ++, sublime, visual code or other free
text editor.
2. Saving the first file named cal_main.py at the location f2 folder with env
folder.
3. Copy the codes below for cal_main.py
Note:
‘POST’ The POST method will passing the data from the input tags and submit button

‘num1’ and ‘num2’- variables

average=(float(num1)+float(num2))/2 -formula to compute the average

return render_template(“[Link]”,average=average) –return value of the

function

4. Create a file and name it as cal_base.html save it to templates folder inside

the f2 folder and copy the codes below. It will serve as the Graphic User
Interface of the web application.
 {{average}} is the variable formula that is being called to display the answer

5. Follow the procedure in running the flask that is mention above.

6. The output put should be the same as below
SUMMARY

• Web Application Framework or simply Web Framework represents a

collection of libraries and modules that enables a web application
developer to write applications without having to bother about low-level
details such as protocols, thread management etc.

• Flask is a web application framework written in Python

• Templates are files that contain static data as well as placeholders for
dynamic data. A template is rendered with specific data to produce a final
document. Flask uses the Jinja template library to render templates.
• Jinja2 is a popular templating engine for Python. A web templating system
combines a template with a certain data source to render dynamic web
pages.
• The route() function of the Flask class is a decorator, which tells the
application which URL should call the associated function.
• POST is used to send HTML form data to server. Data received by POST
method is not cached by server.