Asd Flask Tutorial

7/30/2019 Asd Flask Tutorial

1/70

Modern Web Application FrameworkPython, SQL Alchemy, Jinja2 & Flask

Devert Alexandre

December 29, 2012 Slide 1/62


2/70

Table of Contents

1 Model-View-Controller

2 Flask

3 First steps

4

Routing5 Templates

Basic template renderingUsing ressourcesTemplate inheritanceTemplate macrosTemplate language

6 Requests

Devert Alexandre Modern Web Application Framework Slide 2/62


3/70

Model-View-Controller

Most of the modern web development frameworks follow theModel-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 projectsinvolving user interfaces presenting and manipulating data.



4/70




5/70


Example for Model-View-Controller : an online managementgame

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



6/70


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 theshop the views

The methods for payment, order, shopping cart thecontrollers



7/70


Model-View-Controller also helps to organize the work

Some work on the views graphic designers, HTML,javascript

Some work on the model database, softwarearchitecture

Some work on the controls rather low-level and/orspecialized code

Some work on writing unit tests for at least the modeland the views



8/70

Table of Contents


2 Flask

3 First steps

4 Routing

5 TemplatesBasic template renderingUsing ressourcesTemplate inheritanceTemplate macrosTemplate language

6 Requests



9/70

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



10/70


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 herehttp://me.veekun.com/blog/2012/04/09/php-a-fractal-of-bad-design



11/70


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



12/70

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 needfor an IDE to be efficient with it

It is very well documented

The same ideas can be found in most web development

frameworks.



13/70

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)



14/70

Table of Contents


2 Flask

3 First steps

4 Routing

5 TemplatesBasic template renderingUsing ressourcesTemplate inheritanceTemplate macrosTemplate language

6 Requests



15/70

Hello, world !

A minimal Flask application

from f l a s k i m p o r t F l a s kapp = F la sk ( n am e )

@app . r ou te ( / )d e f h e l l o ( ) :

r e t u r n H e l l o Wo rl d !

i f n am e == m a i n :app . run ( )

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



16/70

Hello, world !You will see this



17/70

Hello, world !

This creates an application instance and run it





18/70

Hello, world !

This adds the hello method to the application instance



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

hello() returns the text data for the web browser



19/70

Debugging

Triggering the debug mode is easy




i f n am e == m a i n :a p p . r u n ( d e b ug = T r u e )

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



20/70

DebuggingThe debug mode will also helps a lot to point where theproblem is



21/70

Table of Contents


2 Flask

3 First steps

4 Routing

5 TemplatesBasic template renderingUsing ressourcesTemplate inheritance

Template macrosTemplate language

6 Requests



22/70

Function / URL mapping

When an URL is requested, Flask will look for itscorresponding function.


@app . r ou te ( / )

d e f i n d e x ( ) :r e t u r n I n d e x P ag e

@app . r ou te ( / welcome )d e f h e l l o ( ) :

r e t u r n H e l l o W or ld


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



23/70


You can defines URL with parameters

@app . r ou te ( /show name/ )

d e f p r i n t n a m e ( n ame ) :r e t u r n H e l l o , %s ! % name

It gives a nice way, intuitive way to define ressources on awebsite.



24/70


You can make URL parameters optional

@app . r ou te ( / h e l l o / )@app . r ou te ( / h e l l o / )d e f h e l l o ( n ame = N on e ) :

i f name i s None :r e t u r n A h o r s e w i t h no name

e l s e :r e t u r n A h o r s e na med %s % name



25/70


You can enforce the type of a parameter

@app . r ou te ( /team/< i n t : t e a m i d> )d e f s h ow t e am ( t e a m i d ) :

r e t u r n tea m #%d % t e a m i d

Flask will check the type for you



26/70


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

@app . r ou te ( / )d e f w e l co m e ( ) :


@app . r ou te ( / t e s t )d e f t e s t ( ) :

name = welcome r e t u r n u r l f o r % s = % s % ( n ame , u r l f o r ( n ame ) )

Especially convenient when you might have to change theURL naming scheme



27/70


url for() also works for URL with parameters

@app . r ou te ( /show name/ )d e f p r i n t n a m e ( n ame ) :

r e t u r n H e l l o , %s ! % name

@app . r ou te ( / t e s t )d e f t e s t ( ) :

f un c n am e , u s e r n a m e = p r i n t n a m e , Ale x r e t u r n u r l f o r % s = % s % ( f un c n a m e , u r l f o r ( f un c n a m e , name = u s e r n a m e ) )



28/70

Catching HTTP errors

The HTTP protocol defines several status codes.

status code meaning

400 Bad Request401 Unauthorized

402 Payment Required403 Forbidden404 Not Found500 Internal Server Error501 Not Implemented503 Service Unavailable



29/70

Catching HTTP errors

Using @errorhandler, you can catch such errors

@a pp . e r r o r h a n d l e r ( 4 0 3 )d e f p a g e f o r b i d d e n ( e r r o r ) :

p r i n t Hey ! You a re n ot a l l ow e d t o a c ce s s t h i s !

@a pp . e r r o r h a n d l e r ( 4 0 4 )d e f p a g e n o t f o u n d ( e r r o r ) :

p r i n t Ho no ! The r e s s o u r c e you want t o a c c es s d oe s n ot e x i s t : (



30/70

Throwing HTTP errors

It is also possible to throw HTTP errors with abort

@app . r ou te ( / s h o w a c c o u n t i n f o s )d e f s h o w a c c o u n t i n f o s ( ) :

i f n ot u s e r . l o g g e d i n :a b o r t ( 4 0 1 )

# Do t h i n g s . . .

For instance, an error 401 to deny access to ressources



31/70

Table of Contents


2 Flask

3 First steps

4 Routing



6 Requests



32/70

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 toseparade the view code from the remaining code


Th d f l


33/70

The need for templates

Flask uses Jinja2 as template system. There are many otherstemplate 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 different for every language you can think of


B i l d i


34/70

Basic template rendering

The function render template takes a path to an HTML file,and arbitrary parameters

from f l a s k i m p o r t F l as k , r e n d e r t e m p l a t eapp = F la sk ( n am e )

@app . r ou te ( / h e l l o / )@app . r ou te ( / h e l l o / )d e f h e l l o ( n ame = N on e ) :

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 tm l , name = name)


What will be returned will the content of hello.html


B i l d i


35/70


The HTML file hello.html

< t i t l e>The w e b si t e t h at s a ys H e l lo t o y ou

{% i f name %}H e l l o , {{ name }} !{% e l s e %}H e ll o , t h i n g w i th no name !{% e n d i f %}

Its no ordinary HTML there are instruction mixed in !


B i t l t d i


36/70





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


B i t l t d i


37/70





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




38/70





Blocks of code are put between {% %}




39/70


Flask assumes that all your templates will be in a templatedirectory, relative to your script

| t e m p l a t e s| || | h e l l o . h t ml|| t e s t . p y


Using ressources


40/70

Using ressources

If you wish to use other file ressources, like pictures or CSSfiles, you can put them in directory named static

| t e m p l a t e s| || | h e l l o . h t ml

|| s t a t i c| || | s t y l e . c s s|| t e s t . p y

Those resource are not dynamic, not generated on the fly likethe HTML code, hence the name static


Using ressources


41/70

Using ressources

Then, to use those ressources, you can again use url for

< t i t l e>The w e b si t e t h at s a ys H e l lo t o y ou< 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 ) }}>



Template inheritance


42/70


On a typical website, different views follow a similar design




43/70






44/70






45/70






46/70


Jinja2 provides a simple way to share a common templateand specialize it : template inheritance

{% e x t en d s b a s e . h t m l %}

{% b l o ck c o nt e nt %}{% i f name %}H e l l o , {{ name }} !{% e l s e %}H e ll o , t h i n g w i th no name !{% e n d i f %}

{% e n d b l o c k %}

hello.html extends base.html




47/70


Jinja2 provides a simple way to share a common templateand specialize it : template inheritance

{% e x t en d s b a s e . h t m l %}

{% b l o ck c o nt e nt %}{% i f name %}Goodbye , {{ name }} !{% e l s e %}G oo db ye , t h i n g w i t h no name !{% e n d i f %}

{% e n d b l o c k %}

goodbye.html extends base.html




48/70

pAnd base.html look like this

< t i t l e>S a l ut e . com , t he w e bs i te t h at s a l u t e s you< 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 a l u t e . com

The w e b si t e t h at s a l u t e s you

{% b l o ck c o nt e nt %}{% e n d b l o c k %}

S a l u t e . c o m

S i t e d e s i g n &amp ; c o p y r i g h t &c op y ; A l e x a nd r e D e ve r t




49/70

p

On the Python side, hello.html and goodbye.html are justnormal HTML pages, nothing special to do

@app . r ou te ( / h e l l o / )@app . r ou te ( / h e l l o / )

d e f h e l l o ( n ame = N on e ) :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 tm l , name = name)

@app . r ou te ( / g o o d b ye / )@app . r ou te ( / g o o d b y e / )d e f goodbye (name = None ):

r e t u r n r e n d e r t e m p l a t e ( goodby e . html , n am e = na me )




50/70

p

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 !


Template macros


51/70

p

On a website, the same user interface elements are oftenre-used


Template macros


52/70

On a website, the same user interface elements are oftenre-used


Template macros


53/70

We can define 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 ) %}{{ t i t l e }}

{{ c a l l e r ( ) }}

{% e n d m a c r o %}

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


Template macros


54/70

Now, we can create lots of boxes.

{% e x t en d s b a s e . h t m l %}{% i m p o r t u i . h tm l a s u i %}

{% b l o ck c o nt e nt %}

{% c a l l u i . r e n d e r p a n e l ( L or em i p s u m , l e f t ) %}. . . b l a b l a . . .

{% e n d c a l l %}

{% c a l l u i . r e n d e r p a n e l ( L or em i p s u m , l e f t ) %}. . . b l a b l a . . .

{% e n d c a l l %}

{% 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 ) %}. . . b l a b l a . . .

{% 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 me f o r a l l g oo d men , l e f t ) %}

. . . b l a b l a . . .{% e n d c a l l %}

{% 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

Template macros


55/70

To use a macro, first import the file that contains that macro

{% i m p o r t u i . h tm 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 H er e , l e f t ) %}. . . b l a b l a . . .

{% e n d c a l l %}

What is between call and endcall could be any valid HTMLcode. It will be placed in place of caller in the macrodefinition.


Template language


56/70

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

It tries to imitate Python But it is not Python

Why not having full power of Python in a template ?


Template language


57/70

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 different

users. Should be fast.


Template language


58/70

The if block works like Python

{% i f s h ow a d v e r t is e m en t %}Buy Drunk Panda , t h e b e s t b e e r i n S uz ho u !{% e n d i f %}


Template language


59/70

An optional else block works can be used

{% i f s h ow a d v e r t is e m en t %}Buy Drunk Panda , t h e b e s t b e e r i n S uz ho u !{% e l s e %}Do n ot b uy a n y t h i n g{% e n d i f %}


Template language


60/70

An even elif blocks are available

{% i f s h ow b e e r a d v er t i se m e nt %}Buy Drunk Panda , t h e b e s t b e e r i n S uz ho u !

{% e l i f s h o w p i z z a a d v e r t i s e me n t %}Buy P iz za Hut , t he w or st p i z z a s e v er !{% e l s e %}Do n ot b uy a n y t h i n g{% e n d i f %}


Template language


61/70

The Jinja for loop works like the Python one

{% f o r i te m i n n a v i g a t i o n %}< l i>{{ i t e m . c a p t i o n }}

{% 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 %}


Template language


62/70

Jinja provides a loop object that can be called inside a forloop

{% f o r i te m i n n a v i g a t i o n %}< l i>{{ l o o p . i n d e x }} {{ i t e m . c a p t i o n }}

{% e n d f o r %}


Template language


63/70

This loop object provides some useful informations about thecurrent item of the loop

loop variable meaning

loop.index Current index (1-indexed)

loop.index0 Current index (0-indexed)loop.revindex Current index, reversed order (1-indexed)

loop.revindex0 Current index, reversed order (0-indexed)

loop.last True if last item

loop.first True if first item


Template language


64/70

You can filter the for loop, as in Python

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

{{ u s e r . na me }}

{% e n d f o r %}


Template language


65/70

If the sequence you iterate turns out to be empty, you cancatch this case with an else block

{% f o r u s er i n u s e r l i s t i f n ot u s er . i s h i d d e n %}

< l i>{{ u s e r . na me }}

{% e l s e %}No u s e r s f ou nd !

{% e n d f o r %}


Table of Contents


66/70


2 Flask

3 First steps

4 Routing



6 Requests


Requests


67/70

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

passwords

checkboxes

values

. . .


Requests


68/70

The HTTP protocol defines different kind of requests

GET request to send data

POST request to accept data

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


Requests


69/70

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 ou te ( / l o g i n , m et ho ds = [ GET , POST ] )d e f l o g i n ( ) :

# GET r e q u e s ti f re qu es 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 . h t m l )# POST REQUESTe l s e :

e ma il = r e q u e st . f or m [ e m a i l ]p a s s w o r d = r e q u e s t . f o r m [ passw ord ]

# Ch ec k e m a i l & p a s s w or d# TODO

r e t u r n r e n d e r t e m p l a t e ( welcome . html )


Requests


70/70

The request object hold the information sent to the server

< l a b e l>E m a i l

< l a b e l>Password

E n t e r


Asd Flask Tutorial

Documents

Transcript of Asd Flask Tutorial