UNIVERSITY OF SCIENCE AND TECHNOLOGY OF CHINA

SCHOOL OF SOFTWARE ENGINEERING OF USTC

Modern Web Application Framework

Python, SQL Alchemy, Jinja2 & Flask Devert Alexandre

December 29, 2012 Slide 1/62

UNIVERSITY OF SCIENCE AND TECHNOLOGY OF CHINA

SCHOOL OF SOFTWARE ENGINEERING OF USTC

Table of Contents
1 2 3 4 5

Model-View-Controller Flask First steps Routing Templates Basic template rendering Using ressources Template inheritance Template macros Template language Requests

Devert Alexandre Modern Web Application Framework Slide 2/62

UNIVERSITY OF SCIENCE AND TECHNOLOGY OF CHINA

SCHOOL OF SOFTWARE ENGINEERING OF USTC

Model-View-Controller

Most of the modern web development frameworks follow the Model-View-Controller model (MVC model)
The model : representation of data. Usually, have a

strong relation with the database

The views : what is shown to the user. Can be any kind

of user interface, usually HTML pages with Javascript.

The controls : what operation are done on the data.

Its a rather convenient way to design software projects involving user interfaces presenting and manipulating data.

Devert Alexandre Modern Web Application Framework Slide 3/62

UNIVERSITY OF SCIENCE AND TECHNOLOGY OF CHINA

SCHOOL OF SOFTWARE ENGINEERING OF USTC

Model-View-Controller

Application Controller manipulates Model updates View uses shows User

Devert Alexandre Modern Web Application Framework Slide 4/62

UNIVERSITY OF SCIENCE AND TECHNOLOGY OF CHINA

SCHOOL OF SOFTWARE ENGINEERING OF USTC

Model-View-Controller

Example for Model-View-Controller : an online management game

The rule of the game, updating the state of each player

the model
The HTML pages, showing the various screen of the

game the views

The methods called when a user click on the screen

the controllers

Devert Alexandre Modern Web Application Framework Slide 5/62

UNIVERSITY OF SCIENCE AND TECHNOLOGY OF CHINA

SCHOOL OF SOFTWARE ENGINEERING OF USTC

Model-View-Controller

Example for Model-View-Controller : an online shop

The list of products, the payment rules, delivery orders

the model
The HTML pages, showing the various screen of the

shop the views

The methods for payment, order, shopping cart the

controllers

Devert Alexandre Modern Web Application Framework Slide 6/62

UNIVERSITY OF SCIENCE AND TECHNOLOGY OF CHINA

SCHOOL OF SOFTWARE ENGINEERING OF USTC

Model-View-Controller

Model-View-Controller also helps to organize the work

Some work on the views graphic designers, HTML,

javascript
Some work on the model database, software

architecture
Some work on the controls rather low-level and/or

specialized code
Some work on writing unit tests for at least the model

and the views

Devert Alexandre Modern Web Application Framework Slide 7/62

UNIVERSITY OF SCIENCE AND TECHNOLOGY OF CHINA

SCHOOL OF SOFTWARE ENGINEERING OF USTC

Table of Contents
1 2 3 4 5

Model-View-Controller Flask First steps Routing Templates Basic template rendering Using ressources Template inheritance Template macros Template language Requests

Devert Alexandre Modern Web Application Framework Slide 8/62

UNIVERSITY OF SCIENCE AND TECHNOLOGY OF CHINA

SCHOOL OF SOFTWARE ENGINEERING OF USTC

Web application with script language

Why using a scripting language for a web application ?

More adapted language to paste together various

components (database, rendering, routing, . . . )

Make its easier to release early & often Easier to maintain & modify Speed far enough for many use case

Devert Alexandre Modern Web Application Framework Slide 9/62

UNIVERSITY OF SCIENCE AND TECHNOLOGY OF CHINA

SCHOOL OF SOFTWARE ENGINEERING OF USTC

Web application with script language

Why not PHP, or PHP framework ?
Designed to make simple web pages, not large web

applications
Awfully designed programming language very inconsistent libraries very little help for debugging many security issues many better alternatives

Detailed explanation here http://me.veekun.com/blog/2012/04/09/php-a-fractal-ofbad-design

Devert Alexandre Modern Web Application Framework Slide 10/62

UNIVERSITY OF SCIENCE AND TECHNOLOGY OF CHINA

SCHOOL OF SOFTWARE ENGINEERING OF USTC

Web application with script language

Why not using Java/JSP/JBoss/Apache/Hibernate/Spring ?

Even simple changes requires lots of coding Big changes takes a lot of planning Edit/Compile/Run takes more ressource General speed of development much reduced Working without a big fat IDE is tedious

But you can use those all this with a script-like language : Grails and Groovy

Devert Alexandre Modern Web Application Framework Slide 11/62

UNIVERSITY OF SCIENCE AND TECHNOLOGY OF CHINA

SCHOOL OF SOFTWARE ENGINEERING OF USTC

Flask

I am going to introduce the framework Flask

It is small : quick to learn and master It is complete : you can use to do serious apps It is lean : a shell and a text editor are enough, no need

for an IDE to be ecient with it

It is very well documented

The same ideas can be found in most web development frameworks.

Devert Alexandre Modern Web Application Framework Slide 12/62

UNIVERSITY OF SCIENCE AND TECHNOLOGY OF CHINA

SCHOOL OF SOFTWARE ENGINEERING OF USTC

Flask

Flask is a nice glue around existing tools

Python programming language SQL Alchemy database Jinja2 HTML template system Werkzeug WSCGI handling (CGI, but better)

Devert Alexandre Modern Web Application Framework Slide 13/62

UNIVERSITY OF SCIENCE AND TECHNOLOGY OF CHINA

SCHOOL OF SOFTWARE ENGINEERING OF USTC

Table of Contents
1 2 3 4 5

Model-View-Controller Flask First steps Routing Templates Basic template rendering Using ressources Template inheritance Template macros Template language Requests

Devert Alexandre Modern Web Application Framework Slide 14/62

UNIVERSITY OF SCIENCE AND TECHNOLOGY OF CHINA

SCHOOL OF SOFTWARE ENGINEERING OF USTC

Hello, world !

A minimal Flask application

from f l a s k i m p o r t F l a s k app = F l a s k ( n a m e ) @app . r o u t e ( / ) def h e l l o ( ) : r e t u r n H e l l o World ! if name == app . r u n ( ) main :

Run this, and open your web browser at http://127.0.0.1:5000

Devert Alexandre Modern Web Application Framework Slide 15/62

UNIVERSITY OF SCIENCE AND TECHNOLOGY OF CHINA

SCHOOL OF SOFTWARE ENGINEERING OF USTC

Hello, world !
You will see this

Devert Alexandre Modern Web Application Framework Slide 16/62

UNIVERSITY OF SCIENCE AND TECHNOLOGY OF CHINA

SCHOOL OF SOFTWARE ENGINEERING OF USTC

Hello, world !

This creates an application instance and run it

from f l a s k i m p o r t F l a s k app = F l a s k ( n a m e ) if name == app . r u n ( ) main :

Devert Alexandre Modern Web Application Framework Slide 17/62

UNIVERSITY OF SCIENCE AND TECHNOLOGY OF CHINA

SCHOOL OF SOFTWARE ENGINEERING OF USTC

Hello, world !

This adds the hello method to the application instance

@app . r o u t e ( / ) def h e l l o ( ) : r e t u r n H e l l o World !

hello() will be called every time the address / is

requested
hello() returns the text data for the web browser

Devert Alexandre Modern Web Application Framework Slide 18/62

UNIVERSITY OF SCIENCE AND TECHNOLOGY OF CHINA

SCHOOL OF SOFTWARE ENGINEERING OF USTC

Debugging

Triggering the debug mode is easy

from f l a s k i m p o r t F l a s k app = F l a s k ( n a m e ) @app . r o u t e ( / ) def h e l l o ( ) : r e t u r n H e l l o World ! if name == m a i n : app . r u n ( debug = True )

In debug mode, you can edit the code while the server runs : it will restart !

Devert Alexandre Modern Web Application Framework Slide 19/62

UNIVERSITY OF SCIENCE AND TECHNOLOGY OF CHINA

SCHOOL OF SOFTWARE ENGINEERING OF USTC

Debugging
The debug mode will also helps a lot to point where the problem is

Devert Alexandre Modern Web Application Framework Slide 20/62

UNIVERSITY OF SCIENCE AND TECHNOLOGY OF CHINA

SCHOOL OF SOFTWARE ENGINEERING OF USTC

Table of Contents
1 2 3 4 5

Model-View-Controller Flask First steps Routing Templates Basic template rendering Using ressources Template inheritance Template macros Template language Requests

Devert Alexandre Modern Web Application Framework Slide 21/62

UNIVERSITY OF SCIENCE AND TECHNOLOGY OF CHINA

SCHOOL OF SOFTWARE ENGINEERING OF USTC

Function / URL mapping

When an URL is requested, Flask will look for its corresponding function.
from f l a s k i m p o r t F l a s k app = F l a s k ( n a m e ) @app . r o u t e ( / ) def index ( ) : r e t u r n I n d e x Page @app . r o u t e ( / welcome ) def h e l l o ( ) : r e t u r n H e l l o World if name == app . r u n ( ) main :

One function return text data. It can be HTM, XML, JSON, etc.

Devert Alexandre Modern Web Application Framework Slide 22/62

UNIVERSITY OF SCIENCE AND TECHNOLOGY OF CHINA

SCHOOL OF SOFTWARE ENGINEERING OF USTC

Function / URL mapping

You can denes URL with parameters

@app . r o u t e ( / show name/<name> ) d e f p r i n t n a m e ( name ) : r e t u r n H e l l o , %s ! % name

It gives a nice way, intuitive way to dene ressources on a website.

Devert Alexandre Modern Web Application Framework Slide 23/62

UNIVERSITY OF SCIENCE AND TECHNOLOGY OF CHINA

SCHOOL OF SOFTWARE ENGINEERING OF USTC

Function / URL mapping

You can make URL parameters optional

@app . r o u t e ( / h e l l o / ) @app . r o u t e ( / h e l l o /<name> ) d e f h e l l o ( name = None ) : i f name i s None : r e t u r n A h o r s e w i t h no name else : r e t u r n A h o r s e named %s % name

Devert Alexandre Modern Web Application Framework Slide 24/62

UNIVERSITY OF SCIENCE AND TECHNOLOGY OF CHINA

SCHOOL OF SOFTWARE ENGINEERING OF USTC

Function / URL mapping

You can enforce the type of a parameter

@app . r o u t e ( / team/< i n t : t e a m i d > ) d e f show team ( t e a m i d ) : r e t u r n team #%d % t e a m i d

Flask will check the type for you

Devert Alexandre Modern Web Application Framework Slide 25/62

UNIVERSITY OF SCIENCE AND TECHNOLOGY OF CHINA

SCHOOL OF SOFTWARE ENGINEERING OF USTC

Function / URL mapping

You can translate function names to URL with url for()

@app . r o u t e ( / ) d e f welcome ( ) : r e t u r n H e l l o World ! @app . r o u t e ( / t e s t ) def test ( ) : name = welcome r e t u r n u r l f o r %s = %s % ( name ,

u r l f o r ( name ) )

Especially convenient when you might have to change the URL naming scheme

Devert Alexandre Modern Web Application Framework Slide 26/62

UNIVERSITY OF SCIENCE AND TECHNOLOGY OF CHINA

SCHOOL OF SOFTWARE ENGINEERING OF USTC

Function / URL mapping

url for() also works for URL with parameters

@app . r o u t e ( / show name/<name> ) d e f p r i n t n a m e ( name ) : r e t u r n H e l l o , %s ! % name @app . r o u t e ( / t e s t ) def test ( ) : func name , u s e r n a m e = p r i n t n a m e , A l e x r e t u r n u r l f o r %s = %s % ( func name , u r l f o r ( func name , name = u s e r n a m e ) )

Devert Alexandre Modern Web Application Framework Slide 27/62

UNIVERSITY OF SCIENCE AND TECHNOLOGY OF CHINA

SCHOOL OF SOFTWARE ENGINEERING OF USTC

Catching HTTP errors

The HTTP protocol denes several status codes. status code 400 401 402 403 404 500 501 503 meaning Bad Request Unauthorized Payment Required Forbidden Not Found Internal Server Error Not Implemented Service Unavailable

Devert Alexandre Modern Web Application Framework Slide 28/62

UNIVERSITY OF SCIENCE AND TECHNOLOGY OF CHINA

SCHOOL OF SOFTWARE ENGINEERING OF USTC

Catching HTTP errors

Using @errorhandler, you can catch such errors

@app . e r r o r h a n d l e r ( 4 0 3 ) def page forbidden ( error ) : p r i n t Hey ! You a r e n o t a l l o w e d t o a c c e s s t h i s ! @app . e r r o r h a n d l e r ( 4 0 4 ) def page not found ( error ) : p r i n t Ho no ! The r e s s o u r c e you want t o a c c e s s d o e s n o t e x i s t

:(

Devert Alexandre Modern Web Application Framework Slide 29/62

UNIVERSITY OF SCIENCE AND TECHNOLOGY OF CHINA

SCHOOL OF SOFTWARE ENGINEERING OF USTC

Throwing HTTP errors

It is also possible to throw HTTP errors with abort

@app . r o u t e ( / s h o w a c c o u n t i n f o s ) def show account infos ( ) : i f not u s e r . l o g g e d i n : abort (401) # Do t h i n g s ...

For instance, an error 401 to deny access to ressources

Devert Alexandre Modern Web Application Framework Slide 30/62

UNIVERSITY OF SCIENCE AND TECHNOLOGY OF CHINA

SCHOOL OF SOFTWARE ENGINEERING OF USTC

Table of Contents
1 2 3 4 5

Model-View-Controller Flask First steps Routing Templates Basic template rendering Using ressources Template inheritance Template macros Template language Requests

Devert Alexandre Modern Web Application Framework Slide 31/62

UNIVERSITY OF SCIENCE AND TECHNOLOGY OF CHINA

SCHOOL OF SOFTWARE ENGINEERING OF USTC

The need for templates

Generating HTML directly with code

Easy to make very hard to read code Mix-up the control code with the view code

Text template system is a convenient and common way to separade the view code from the remaining code

Devert Alexandre Modern Web Application Framework Slide 32/62

UNIVERSITY OF SCIENCE AND TECHNOLOGY OF CHINA

SCHOOL OF SOFTWARE ENGINEERING OF USTC

The need for templates

Flask uses Jinja2 as template system. There are many others template system
Mako, for Python (if you ask me, its better than Jinja2) JSP, for Java, THE standard for Java. Allow to mix

Java & HTML.

ASP, for Microsoft products. Allow to mix VBScript &

HTML.
XSLT is a template system based on XML. Plateform

indepedent but not very convenient in practice.

Maybe 10 dierent for every language you can think of

Devert Alexandre Modern Web Application Framework Slide 33/62

UNIVERSITY OF SCIENCE AND TECHNOLOGY OF CHINA

SCHOOL OF SOFTWARE ENGINEERING OF USTC

Basic template rendering

The function render template takes a path to an HTML le, and arbitrary parameters
from f l a s k i m p o r t F l a s k , r e n d e r t e m p l a t e app = F l a s k ( n a m e ) @app . r o u t e ( / h e l l o / ) @app . r o u t e ( / h e l l o /<name> ) d e f h e l l o ( name = None ) : r e t u r n r e n d e r t e m p l a t e ( h e l l o . h t m l , name = name ) if name == app . r u n ( ) main :

What will be returned will the content of hello.html

Devert Alexandre Modern Web Application Framework Slide 34/62

UNIVERSITY OF SCIENCE AND TECHNOLOGY OF CHINA

SCHOOL OF SOFTWARE ENGINEERING OF USTC

Basic template rendering

The HTML le hello.html
< ! d o c t y p e h t m l> <h t m l> <head> < t i t l e>The w e b s i t e t h a t s a y s H e l l o t o you</ t i t l e> </ head> <body> {% i f name %} <h1>H e l l o , {{ name }} !</ h1> {% e l s e %} <h1>H e l l o , t h i n g w i t h no name !</ h1> {% e n d i f %} </ body> </ h t m l>

Its no ordinary HTML there are instruction mixed in !

Devert Alexandre Modern Web Application Framework Slide 35/62

UNIVERSITY OF SCIENCE AND TECHNOLOGY OF CHINA

SCHOOL OF SOFTWARE ENGINEERING OF USTC

Basic template rendering

The HTML le hello.html
< ! d o c t y p e h t m l> <h t m l> <head> < t i t l e>The w e b s i t e t h a t s a y s H e l l o t o you</ t i t l e> </ head> <body> {% i f name %} <h1>H e l l o , {{ name }} !</ h1> {% e l s e %} <h1>H e l l o , t h i n g w i t h no name !</ h1> {% e n d i f %} </ body> </ h t m l>

hello.html is processed to generate the HTML to send to a user. Here, we use the name variable, passed as a parameter of render template

Devert Alexandre Modern Web Application Framework Slide 35/62

UNIVERSITY OF SCIENCE AND TECHNOLOGY OF CHINA

SCHOOL OF SOFTWARE ENGINEERING OF USTC

Basic template rendering

The HTML le hello.html
< ! d o c t y p e h t m l> <h t m l> <head> < t i t l e>The w e b s i t e t h a t s a y s H e l l o t o you</ t i t l e> </ head> <body> {% i f name %} <h1>H e l l o , {{ name }} !</ h1> {% e l s e %} <h1>H e l l o , t h i n g w i t h no name !</ h1> {% e n d i f %} </ body> </ h t m l>

Variables values can be rendered to text with {{ }}

Devert Alexandre Modern Web Application Framework Slide 35/62

UNIVERSITY OF SCIENCE AND TECHNOLOGY OF CHINA

SCHOOL OF SOFTWARE ENGINEERING OF USTC

Basic template rendering

The HTML le hello.html
< ! d o c t y p e h t m l> <h t m l> <head> < t i t l e>The w e b s i t e t h a t s a y s H e l l o t o you</ t i t l e> </ head> <body> {% i f name %} <h1>H e l l o , {{ name }} !</ h1> {% e l s e %} <h1>H e l l o , t h i n g w i t h no name !</ h1> {% e n d i f %} </ body> </ h t m l>

Blocks of code are put between {% %}

Devert Alexandre Modern Web Application Framework Slide 35/62

UNIVERSITY OF SCIENCE AND TECHNOLOGY OF CHINA

SCHOOL OF SOFTWARE ENGINEERING OF USTC

Basic template rendering

Flask assumes that all your templates will be in a template directory, relative to your script
| t e m p l a t e s | | | | h e l l o . h t m l | | t e s t . py

Devert Alexandre Modern Web Application Framework Slide 36/62

UNIVERSITY OF SCIENCE AND TECHNOLOGY OF CHINA

SCHOOL OF SOFTWARE ENGINEERING OF USTC

Using ressources
If you wish to use other le ressources, like pictures or CSS les, you can put them in directory named static
| t e m p l a t e s | | | | h e l l o . h t m l | | s t a t i c | | | | s t y l e . c s s | | t e s t . py

Those resource are not dynamic, not generated on the y like the HTML code, hence the name static

Devert Alexandre Modern Web Application Framework Slide 37/62

UNIVERSITY OF SCIENCE AND TECHNOLOGY OF CHINA

SCHOOL OF SOFTWARE ENGINEERING OF USTC

Using ressources
Then, to use those ressources, you can again use url for
< ! d o c t y p e h t m l> <h t m l> <head> < t i t l e>The w e b s i t e t h a t s a y s H e l l o t o you</ t i t l e> < l i n k r e l =s t y l e s h e e t t y p e=t e x t / c s s h r e f= {{ u r l f o r ( s t a t i c , f i l e n a m e = s t y l e . c s s ) }} > </ head> <body> {% i f name %} <h1>H e l l o , {{ name }} !</ h1> {% e l s e %} <h1>H e l l o , t h i n g w i t h no name !</ h1> {% e n d i f %} </ body> </ h t m l>

Devert Alexandre Modern Web Application Framework Slide 38/62

UNIVERSITY OF SCIENCE AND TECHNOLOGY OF CHINA

SCHOOL OF SOFTWARE ENGINEERING OF USTC

Template inheritance
On a typical website, dierent views follow a similar design

Devert Alexandre Modern Web Application Framework Slide 39/62

UNIVERSITY OF SCIENCE AND TECHNOLOGY OF CHINA

SCHOOL OF SOFTWARE ENGINEERING OF USTC

Template inheritance
On a typical website, dierent views follow a similar design

Devert Alexandre Modern Web Application Framework Slide 39/62

UNIVERSITY OF SCIENCE AND TECHNOLOGY OF CHINA

SCHOOL OF SOFTWARE ENGINEERING OF USTC

Template inheritance
On a typical website, dierent views follow a similar design

Devert Alexandre Modern Web Application Framework Slide 39/62

UNIVERSITY OF SCIENCE AND TECHNOLOGY OF CHINA

SCHOOL OF SOFTWARE ENGINEERING OF USTC

Template inheritance
On a typical website, dierent views follow a similar design

Devert Alexandre Modern Web Application Framework Slide 39/62

UNIVERSITY OF SCIENCE AND TECHNOLOGY OF CHINA

SCHOOL OF SOFTWARE ENGINEERING OF USTC

Template inheritance

Jinja2 provides a simple way to share a common template and specialize it : template inheritance
{% e x t e n d s b a s e . h t m l %} {% b l o c k c o n t e n t %} {% i f name %} <h2>H e l l o , {{ name }} !</ h2> {% e l s e %} <h2>H e l l o , t h i n g w i t h no name !</ h2> {% e n d i f %} {% e n d b l o c k %}

hello.html extends base.html

Devert Alexandre Modern Web Application Framework Slide 40/62

UNIVERSITY OF SCIENCE AND TECHNOLOGY OF CHINA

SCHOOL OF SOFTWARE ENGINEERING OF USTC

Template inheritance

Jinja2 provides a simple way to share a common template and specialize it : template inheritance
{% e x t e n d s b a s e . h t m l %} {% b l o c k c o n t e n t %} {% i f name %} <h2>Goodbye , {{ name }} !</ h2> {% e l s e %} <h2>Goodbye , t h i n g w i t h no name !</ h2> {% e n d i f %} {% e n d b l o c k %}

goodbye.html extends base.html

Devert Alexandre Modern Web Application Framework Slide 40/62

UNIVERSITY OF SCIENCE AND TECHNOLOGY OF CHINA

SCHOOL OF SOFTWARE ENGINEERING OF USTC

Template inheritance
And base.html look like this

< !DOCTYPE HTML PUBLIC //W3C//DTD HTML 4 . 0 1 / /EN> <h t m l l a n g= en > <head> < t i t l e> S a l u t e . com , t h e w e b s i t e t h a t s a l u t e s you</ t i t l e> < l i n k r e l =s t y l e s h e e t t y p e=t e x t / c s s h r e f= {{ u r l f o r ( s t a t i c , f i l e n a m e = s t y l e . c s s </ head> <body> < d i v i d= c o n t a i n e r > < d i v i d= h e a d e r > <h1> S a l u t e . com </ h1> <p>The w e b s i t e t h a t s a l u t e s you</p> </ d i v> < d i v i d= c o n t e n t > {% b l o c k c o n t e n t %}{% e n d b l o c k %} </ d i v> </ d i v> < d i v i d= f o o t e r > <h2> S a l u t e . com </ h2> <p> S i t e d e s i g n &amp ; c o p y r i g h t &c o p y ; A l e x a n d r e D e v e r t</p> </ d i v> </ body> </ h t m l>

Devert Alexandre Modern Web Application Framework Slide 41/62

UNIVERSITY OF SCIENCE AND TECHNOLOGY OF CHINA

SCHOOL OF SOFTWARE ENGINEERING OF USTC

Template inheritance

On the Python side, hello.html and goodbye.html are just normal HTML pages, nothing special to do
@app . r o u t e ( / h e l l o / ) @app . r o u t e ( / h e l l o /<name> ) d e f h e l l o ( name = None ) : r e t u r n r e n d e r t e m p l a t e ( h e l l o . h t m l , name = name ) @app . r o u t e ( / g o o d b y e / ) @app . r o u t e ( / g o o d b y e/<name> ) d e f g o o d b y e ( name = None ) : r e t u r n r e n d e r t e m p l a t e ( g o o d b y e . h t m l , name = name )

Devert Alexandre Modern Web Application Framework Slide 42/62

UNIVERSITY OF SCIENCE AND TECHNOLOGY OF CHINA

SCHOOL OF SOFTWARE ENGINEERING OF USTC

Template inheritance

In this exemple, extending base.html provides

A common title Includes common ressources (css, javascript, etc.) A common header A common footer The specialized part goes in the content block.

Coherent look, code reusage, and clean separation !

Devert Alexandre Modern Web Application Framework Slide 43/62

UNIVERSITY OF SCIENCE AND TECHNOLOGY OF CHINA

SCHOOL OF SOFTWARE ENGINEERING OF USTC

Template macros
On a website, the same user interface elements are often re-used

Devert Alexandre Modern Web Application Framework Slide 44/62

UNIVERSITY OF SCIENCE AND TECHNOLOGY OF CHINA

SCHOOL OF SOFTWARE ENGINEERING OF USTC

Template macros
On a website, the same user interface elements are often re-used

Devert Alexandre Modern Web Application Framework Slide 44/62

UNIVERSITY OF SCIENCE AND TECHNOLOGY OF CHINA

SCHOOL OF SOFTWARE ENGINEERING OF USTC

Template macros
We can dene reusable HTML bits of codes.
{% macro r e n d e r p a n e l ( t i t l e , s t y l e = l e f t ) %} < d i v c l a s s= p a n e l > </ h1> <h1 c l a s s= {{ s t y l e }} >{{ t i t l e }} < d i v c l a s s= p a n e l c o n t e n t > < d i v c l a s s= {{ s t y l e }} > {{ c a l l e r ( ) }} </ d i v> </ d i v> </ d i v> {% endmacro %}

This dene a box, containing whatever caller() will put in it, and with a title. We put this in ui.html

Devert Alexandre Modern Web Application Framework Slide 45/62

UNIVERSITY OF SCIENCE AND TECHNOLOGY OF CHINA

SCHOOL OF SOFTWARE ENGINEERING OF USTC

Template macros
Now, we can create lots of boxes.
{% e x t e n d s b a s e . h t m l %} {% i m p o r t u i . h t m l a s u i %} {% b l o c k c o n t e n t %} < d i v c l a s s= t h r e e columnsl a y o u t > < d i v c l a s s= l e f t column > {% c a l l u i . r e n d e r p a n e l ( Lorem ipsum , l e f t ) %} . . . blabla . . . {% e n d c a l l %} {% c a l l u i . r e n d e r p a n e l ( Lorem ipsum , l e f t ) %} . . . blabla . . . {% e n d c a l l %} </ d i v> < d i v c l a s s= r i g h t column > {% c a l l u i . r e n d e r p a n e l ( H i s t o r y , l e f t ) %} . . . blabla . . . {% e n d c a l l %} {% c a l l u i . r e n d e r p a n e l ( Now i s t h e t i m e f o r a l l good men , l e f t ) %} . . . blabla . . . {% e n d c a l l %} </ d i v> </ d i v> {% e n d b l o c k %}

No need to copy paste the same HTML code around !

Devert Alexandre Modern Web Application Framework Slide 46/62

UNIVERSITY OF SCIENCE AND TECHNOLOGY OF CHINA

SCHOOL OF SOFTWARE ENGINEERING OF USTC

Template macros
To use a macro, rst import the le that contains that macro
{% i m p o r t u i . h t m l a s u i %}

Then you can call the macro

{% c a l l u i . r e n d e r p a n e l ( My T i t l e Here , l e f t ) %} . . . blabla . . . {% e n d c a l l %}

What is between call and endcall could be any valid HTML code. It will be placed in place of caller in the macro denition.

Devert Alexandre Modern Web Application Framework Slide 47/62

UNIVERSITY OF SCIENCE AND TECHNOLOGY OF CHINA

SCHOOL OF SOFTWARE ENGINEERING OF USTC

Template language

Jinja templates use their own language, more or less Python-like.

It tries to imitate Python But it is not Python

Why not having full power of Python in a template ?

Devert Alexandre Modern Web Application Framework Slide 48/62

UNIVERSITY OF SCIENCE AND TECHNOLOGY OF CHINA

SCHOOL OF SOFTWARE ENGINEERING OF USTC

Template language

Jinja provides a limited language because

Its a view. No business code here. Just HTML

generation.
Its a page that might be served for many dierent

users. Should be fast.

Devert Alexandre Modern Web Application Framework Slide 49/62

UNIVERSITY OF SCIENCE AND TECHNOLOGY OF CHINA

SCHOOL OF SOFTWARE ENGINEERING OF USTC

Template language

The if block works like Python

{% i f s h o w a d v e r t i s e m e n t %} <h1>Buy Drunk Panda , t h e b e s t b e e r i n Suzhou !</ h1> {% e n d i f %}

Devert Alexandre Modern Web Application Framework Slide 50/62

UNIVERSITY OF SCIENCE AND TECHNOLOGY OF CHINA

SCHOOL OF SOFTWARE ENGINEERING OF USTC

Template language

An optional else block works can be used

{% i f s h o w a d v e r t i s e m e n t %} <h1>Buy Drunk Panda , t h e b e s t b e e r i n Suzhou !</ h1> {% e l s e %} Do n o t buy a n y t h i n g {% e n d i f %}

Devert Alexandre Modern Web Application Framework Slide 51/62

UNIVERSITY OF SCIENCE AND TECHNOLOGY OF CHINA

SCHOOL OF SOFTWARE ENGINEERING OF USTC

Template language

An even elif blocks are available

{% i f s h o w b e e r a d v e r t i s e m e n t %} <h1>Buy Drunk Panda , t h e b e s t b e e r i n Suzhou !</ h1> {% e l i f s h o w p i z z a a d v e r t i s e m e n t %} <h1>Buy P i z z a Hut , t h e w o r s t p i z z a s e v e r !</ h1> {% e l s e %} Do n o t buy a n y t h i n g {% e n d i f %}

Devert Alexandre Modern Web Application Framework Slide 52/62

UNIVERSITY OF SCIENCE AND TECHNOLOGY OF CHINA

SCHOOL OF SOFTWARE ENGINEERING OF USTC

Template language
The Jinja for loop works like the Python one
{% f o r i t e m i n n a v i g a t i o n %} < l i> <a h r e f= {{ i t e m . h r e f }} >{{ i t e m . c a p t i o n }} </ a> </ l i > {% e n d f o r %}

Note that
navigation is a sequence, passed to the template item is one item of the sequence loop code is between {% for %} and {% endfor %}

Devert Alexandre Modern Web Application Framework Slide 53/62

UNIVERSITY OF SCIENCE AND TECHNOLOGY OF CHINA

SCHOOL OF SOFTWARE ENGINEERING OF USTC

Template language

Jinja provides a loop object that can be called inside a for loop
{% f o r i t e m i n n a v i g a t i o n %} < l i> <a h r e f= {{ i t e m . h r e f }} >{{ l o o p . i n d e x }} {{ i t e m . c a p t i o n }} </ a> </ l i > {% e n d f o r %}

Devert Alexandre Modern Web Application Framework Slide 54/62

UNIVERSITY OF SCIENCE AND TECHNOLOGY OF CHINA

SCHOOL OF SOFTWARE ENGINEERING OF USTC

Template language
This loop object provides some useful informations about the current item of the loop loop variable loop.index loop.index0 loop.revindex loop.revindex0 loop.last loop.rst meaning Current index (1-indexed) Current index (0-indexed) Current index, reversed order (1-indexed) Current index, reversed order (0-indexed) True if last item True if rst item

Devert Alexandre Modern Web Application Framework Slide 55/62

UNIVERSITY OF SCIENCE AND TECHNOLOGY OF CHINA

SCHOOL OF SOFTWARE ENGINEERING OF USTC

Template language

You can lter the for loop, as in Python

{% f o r u s e r i n u s e r l i s t < l i> {{ u s e r . name }} </ l i > {% e n d f o r %} i f n o t u s e r . i s h i d d e n %}

Devert Alexandre Modern Web Application Framework Slide 56/62

UNIVERSITY OF SCIENCE AND TECHNOLOGY OF CHINA

SCHOOL OF SOFTWARE ENGINEERING OF USTC

Template language

If the sequence you iterate turns out to be empty, you can catch this case with an else block
{% f o r u s e r i n u s e r l i s t < l i> {{ u s e r . name }} </ l i > {% e l s e %} No u s e r s f o u n d ! {% e n d f o r %} i f n o t u s e r . i s h i d d e n %}

Devert Alexandre Modern Web Application Framework Slide 57/62

UNIVERSITY OF SCIENCE AND TECHNOLOGY OF CHINA

SCHOOL OF SOFTWARE ENGINEERING OF USTC

Table of Contents
1 2 3 4 5

Model-View-Controller Flask First steps Routing Templates Basic template rendering Using ressources Template inheritance Template macros Template language Requests

Devert Alexandre Modern Web Application Framework Slide 58/62

UNIVERSITY OF SCIENCE AND TECHNOLOGY OF CHINA

SCHOOL OF SOFTWARE ENGINEERING OF USTC

Requests

We can send data (HTML, JSON, XML, any kind of text), but we also need to receive data
passwords checkboxes values ...

Devert Alexandre Modern Web Application Framework Slide 59/62

UNIVERSITY OF SCIENCE AND TECHNOLOGY OF CHINA

SCHOOL OF SOFTWARE ENGINEERING OF USTC

Requests

The HTTP protocol denes dierent kind of requests

GET request to send data POST request to accept data

So far, we only handled GET requests : sending HTML data.

Devert Alexandre Modern Web Application Framework Slide 60/62

UNIVERSITY OF SCIENCE AND TECHNOLOGY OF CHINA

SCHOOL OF SOFTWARE ENGINEERING OF USTC

Requests
We can also handle POST requests, like this
from f l a s k i m p o r t r e q u e s t @app . r o u t e ( / l o g i n , methods = [ GET , POST ] ) def login ( ) : # GET r e q u e s t i f r e q u e s t . method == GET : r e t u r n r e n d e r t e m p l a t e ( l o g i n . html ) # POST REQUEST else : email = r e q u e s t . form [ e m a i l ] p a s s w o r d = r e q u e s t . form [ p a s s w o r d ] # Check e m a i l & p a s s w o r d # TODO r e t u r n r e n d e r t e m p l a t e ( welcome . h t m l )

Devert Alexandre Modern Web Application Framework Slide 61/62

UNIVERSITY OF SCIENCE AND TECHNOLOGY OF CHINA

SCHOOL OF SOFTWARE ENGINEERING OF USTC

Requests

The request object hold the information sent to the server

<form name= l o g i n method= p o s t a c t i o n= {{ u r l f o r ( l o g i n ) }} > < l a b e l>E m a i l</ l a b e l> < i n p u t t y p e= t e x t name= e m a i l m a x l e n g t h= 254 /> < l a b e l>P a s s w o r d</ l a b e l> < i n p u t t y p e= p a s s w o r d name= p a s s w o r d /> <b u t t o n t y p e= s u b m i t >E n t e r</ b u t t o n> </ form>

Devert Alexandre Modern Web Application Framework Slide 62/62