Difference between revisions of "Python-Flask/C2/Request-Response-Cycle-in-a-Flask-Web-App/English"

From Script | Spoken-Tutorial
Jump to: navigation, search
(Created page with "'''Title of script: The Request-Response Cycle in a Flask web app''' '''Author: Siddhartha Sarkar''' Keywords: ​Video tutorial, Python Flask, view functions, request objec...")
 
(Script synced with video.)
Line 8: Line 8:
  
 
{| class="wikitable" style="border-spacing:0;width:17.489cm;"
 
{| class="wikitable" style="border-spacing:0;width:17.489cm;"
|- style="background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;"
+
|- style="border:1pt solid #000000;padding:0.176cm;"
 
| align=center| '''Visual Cue'''
 
| align=center| '''Visual Cue'''
 
| align=center| '''Narration'''
 
| align=center| '''Narration'''
|- style="background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;"
+
|- style="border:1pt solid #000000;padding:0.176cm;"
 
|| '''Slide 1: The Request-Response Cycle in a Flask web app'''
 
|| '''Slide 1: The Request-Response Cycle in a Flask web app'''
 
|| Welcome to the Spoken Tutorial on''' the request-response cycle in a Flask web app.'''
 
|| Welcome to the Spoken Tutorial on''' the request-response cycle in a Flask web app.'''
|- style="background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;"
+
|- style="border:1pt solid #000000;padding:0.176cm;"
 
|| '''Slide 2: Learning Objectives'''
 
|| '''Slide 2: Learning Objectives'''
 
|| In this tutorial, we will learn
 
|| In this tutorial, we will learn
Line 23: Line 23:
  
  
|- style="background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;"
+
|- style="border:1pt solid #000000;padding:0.176cm;"
 
|| '''Slides 3: System Requirements'''
 
|| '''Slides 3: System Requirements'''
 
|| To record this tutorial, I’m using
 
|| To record this tutorial, I’m using
Line 30: Line 30:
 
* <div style="margin-left:1.27cm;margin-right:0cm;">'''Atom text editor 1.22.1 '''and''' '''</div>
 
* <div style="margin-left:1.27cm;margin-right:0cm;">'''Atom text editor 1.22.1 '''and''' '''</div>
 
* <div style="margin-left:1.27cm;margin-right:0cm;">'''Firefox web browser'''</div>
 
* <div style="margin-left:1.27cm;margin-right:0cm;">'''Firefox web browser'''</div>
 +
 +
 +
  
  
 
You can use any text editor and web browser of your choice.
 
You can use any text editor and web browser of your choice.
|- style="background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;"
+
|- style="border:1pt solid #000000;padding:0.176cm;"
 
|| '''Slide 5:'''
 
|| '''Slide 5:'''
  
Line 39: Line 42:
  
  
|| To follow this tutorial, you should have working knowledge of
+
 
* <div style="margin-left:1.27cm;margin-right:0cm;">'''Linux commands'''</div>
+
|| To follow this tutorial, you should have working knowledge of* <div style="margin-left:1.27cm;margin-right:0cm;">'''Linux commands'''</div>
 +
 
 
* <div style="margin-left:1.27cm;margin-right:0cm;">'''Python programming '''and </div>
 
* <div style="margin-left:1.27cm;margin-right:0cm;">'''Python programming '''and </div>
 
* <div style="margin-left:1.27cm;margin-right:0cm;">'''HTML '''syntax</div>
 
* <div style="margin-left:1.27cm;margin-right:0cm;">'''HTML '''syntax</div>
 +
 +
 +
 +
  
 
If not, then please go through the corresponding tutorials on this website. http://spoken-tutorial.org
 
If not, then please go through the corresponding tutorials on this website. http://spoken-tutorial.org
|- style="background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;"
+
|- style="border:1pt solid #000000;padding:0.176cm;"
 
|| '''Slide 6''': '''The request object'''
 
|| '''Slide 6''': '''The request object'''
 
|| We already said that the '''Flask app''' instance has to process the received '''request'''.
 
|| We already said that the '''Flask app''' instance has to process the received '''request'''.
Line 51: Line 59:
  
 
For processing, the '''app '''instance needs to have access to certain information.
 
For processing, the '''app '''instance needs to have access to certain information.
|- style="background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;"
+
|- style="border:1pt solid #000000;padding:0.176cm;"
 
|| '''Slide 6''': '''The request object'''
 
|| '''Slide 6''': '''The request object'''
 
|| A few '''objects '''are provided to the '''view functions,''' where the processing takes place.
 
|| A few '''objects '''are provided to the '''view functions,''' where the processing takes place.
Line 60: Line 68:
  
 
This '''object '''encapsulates the contents of the '''HTTP request '''sent by the '''client'''.
 
This '''object '''encapsulates the contents of the '''HTTP request '''sent by the '''client'''.
|- style="background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;"
+
|- style="border:1pt solid #000000;padding:0.176cm;"
 
|| '''Slide 7''': '''The request object'''
 
|| '''Slide 7''': '''The request object'''
 
|| The incoming '''request '''data can be of several forms. For example
 
|| The incoming '''request '''data can be of several forms. For example
Line 69: Line 77:
 
We will discuss them in detail in this tutorial.
 
We will discuss them in detail in this tutorial.
 
|-
 
|-
| style="background-color:#ffffff;border-top:1pt solid #000001;border-bottom:0.5pt solid #000001;border-left:0.5pt solid #000001;border-right:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;" | Open a Terminal window
+
| style="background-color:#ffffff;border-top:1pt solid #000000;border-bottom:0.5pt solid #000000;border-left:0.5pt solid #000000;border-right:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;" | Open a Terminal window
 +
 
  
  
| style="background-color:#ffffff;border-top:1pt solid #000001;border-bottom:0.5pt solid #000001;border-left:0.5pt solid #000001;border-right:0.5pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;" | Let us open the '''Terminal''' by pressing '''Ctrl''', '''Alt''' and '''T''' keys simultaneously on the keyboard.
+
| style="background-color:#ffffff;border-top:1pt solid #000000;border-bottom:0.5pt solid #000000;border-left:0.5pt solid #000000;border-right:0.5pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;" | Let us open the '''Terminal''' by pressing '''Ctrl''', '''Alt''' and '''T''' keys simultaneously on the keyboard.
|- style="background-color:#ffffff;border:0.5pt solid #000001;padding:0.106cm;"
+
|- style="background-color:#ffffff;border:0.5pt solid #000000;padding:0.106cm;"
 
|| [Terminal]
 
|| [Terminal]
  
 
Type cd project_flask & Press Enter
 
Type cd project_flask & Press Enter
 
|| Now go to the folder '''project underscore flask''' which we created earlier using '''cd''' '''command.'''
 
|| Now go to the folder '''project underscore flask''' which we created earlier using '''cd''' '''command.'''
|- style="background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;"
+
|- style="border:1pt solid #000000;padding:0.176cm;"
 
|| [Terminal]
 
|| [Terminal]
  
Line 95: Line 104:
  
 
And press '''Enter'''.
 
And press '''Enter'''.
|- style="background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;"
+
|- style="border:1pt solid #000000;padding:0.176cm;"
 
|| [Terminal]
 
|| [Terminal]
  
 
Highlight (flask_venv)
 
Highlight (flask_venv)
 
|| Notice that we are now inside the '''virtual environment flask_venv.'''
 
|| Notice that we are now inside the '''virtual environment flask_venv.'''
|- style="background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;"
+
|- style="border:1pt solid #000000;padding:0.176cm;"
 
|| [Terminal]
 
|| [Terminal]
  
Line 107: Line 116:
 
$ atom hello_flask.py
 
$ atom hello_flask.py
 
|| Let’s open the '''hello_flask.py''' file in a text editor, which we created earlier in this series..
 
|| Let’s open the '''hello_flask.py''' file in a text editor, which we created earlier in this series..
|- style="background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;"
+
|- style="border:1pt solid #000000;padding:0.176cm;"
 
|| [Text Editor]
 
|| [Text Editor]
 +
  
 
Type “'', request''”
 
Type “'', request''”
 +
 +
  
 
|| Let’s look at how the '''request object''' is made available in a '''view function'''.
 
|| Let’s look at how the '''request object''' is made available in a '''view function'''.
Line 119: Line 131:
  
 
In the line '''from flask import Flask, '''we will add '''comma space request'''
 
In the line '''from flask import Flask, '''we will add '''comma space request'''
|- style="background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;"
+
|- style="border:1pt solid #000000;padding:0.176cm;"
 
|| [Text editor]
 
|| [Text editor]
  
Line 138: Line 150:
  
  
|- style="background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;"
+
|- style="border:1pt solid #000000;padding:0.176cm;"
 
|| Highlight  
 
|| Highlight  
  
Line 147: Line 159:
  
  
|- style="background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;"
+
|- style="border:1pt solid #000000;padding:0.176cm;"
 
|| Press Ctrl+S
 
|| Press Ctrl+S
 
|| Save the file.
 
|| Save the file.
|- style="background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;"
+
|- style="border:1pt solid #000000;padding:0.176cm;"
 
|| [Terminal]
 
|| [Terminal]
  
Line 161: Line 173:
  
 
|| Let us start the '''server''' to see the changes.
 
|| Let us start the '''server''' to see the changes.
 +
 +
 +
Switch to the terminal.
  
  
Line 167: Line 182:
  
 
And press '''Enter'''.
 
And press '''Enter'''.
|- style="background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;"
+
|- style="border:1pt solid #000000;padding:0.176cm;"
 
|| [Terminal]
 
|| [Terminal]
  
Line 182: Line 197:
  
 
And press '''Enter'''.
 
And press '''Enter'''.
|- style="background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;"
+
|- style="border:1pt solid #000000;padding:0.176cm;"
 
|| [Firefox]
 
|| [Firefox]
  
Line 190: Line 205:
  
 
And press Enter.
 
And press Enter.
|| Next, open a web browser.
+
|| Now, open a web browser.
  
  
In the '''address bar,''' type [http://127.0.0.1:5000/ http://localhost:5000/] and press '''Enter'''.
+
In the '''address bar,''' type [http://127.0.0.1:5000/ http://localhost:5000] and press '''Enter'''.
|- style="background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;"
+
|- style="border:1pt solid #000000;padding:0.176cm;"
 
|| Highlight the output
 
|| Highlight the output
 
|| We got the output as '''Hello World.'''
 
|| We got the output as '''Hello World.'''
|- style="background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;"
+
|- style="border:1pt solid #000000;padding:0.176cm;"
 
|| [Terminal]
 
|| [Terminal]
 
|| Switch to the '''terminal '''once again.
 
|| Switch to the '''terminal '''once again.
|- style="background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;"
+
|- style="border:1pt solid #000000;padding:0.176cm;"
 
|| Highlight “Request method is Get”
 
|| Highlight “Request method is Get”
 
|| Observe that the current '''request method '''is “'''GET'''”.
 
|| Observe that the current '''request method '''is “'''GET'''”.
Line 212: Line 227:
  
 
It specifies the '''parameters''' in the '''URL''' of the '''request '''itself.
 
It specifies the '''parameters''' in the '''URL''' of the '''request '''itself.
|- style="background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;"
+
|- style="border:1pt solid #000000;padding:0.176cm;"
 
|| Only narration.
 
|| Only narration.
 
|| Now let us see how one can send '''data''' to the '''server '''using the '''request object'''.
 
|| Now let us see how one can send '''data''' to the '''server '''using the '''request object'''.
Line 221: Line 236:
  
 
The simplest one is via '''Query Arguments'''.
 
The simplest one is via '''Query Arguments'''.
|- style="background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;"
+
|- style="border:1pt solid #000000;padding:0.176cm;"
||  
+
|| [Text Editor]
[Text Editor]
+
  
 
Type
 
Type
 +
  
 
@app.route('/query')
 
@app.route('/query')
Line 233: Line 248:
 
(Tab)framework = request.args['framework']
 
(Tab)framework = request.args['framework']
  
<nowiki>(Tab)return '''<h1>The framework value is: {}</h1>'''.format(framework)
+
<nowiki>(Tab)return '''<h1>The framework value is: {}</h1>'''.format(framework)</nowiki>
</nowiki>
+
 
|| Let us define a new '''route''' to explain this.  
 
|| Let us define a new '''route''' to explain this.  
  
Line 245: Line 259:
  
 
We will call it as '''query'''.
 
We will call it as '''query'''.
|- style="background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;"
+
|- style="border:1pt solid #000000;padding:0.176cm;"
 
|| Press Ctrl+S
 
|| Press Ctrl+S
 
|| Save the file.
 
|| Save the file.
|- style="background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;"
+
|- style="border:1pt solid #000000;padding:0.176cm;"
 
|| Highlight  
 
|| Highlight  
  
<nowiki>
+
 
<h1>The framework value is: {}</h1>
+
<nowiki><h1>The framework value is: {}</h1></nowiki>
</nowiki>
+
 
|| Here we have written the '''statement''' inside the '''HTML’s h1 heading tag'''.  
 
|| Here we have written the '''statement''' inside the '''HTML’s h1 heading tag'''.  
|- style="background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;"
+
|- style="border:1pt solid #000000;padding:0.176cm;"
 
|| Highlight '''args''' in
 
|| Highlight '''args''' in
  
Line 272: Line 285:
  
 
We will use this '''attribute '''to retrieve the '''data '''sent as '''query arguments.'''
 
We will use this '''attribute '''to retrieve the '''data '''sent as '''query arguments.'''
|- style="background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;"
+
|- style="border:1pt solid #000000;padding:0.176cm;"
 
|| [Terminal]
 
|| [Terminal]
 
|| Switch to the '''terminal'''.
 
|| Switch to the '''terminal'''.
|- style="background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;"
+
|- style="border:1pt solid #000000;padding:0.176cm;"
 
|| Press Ctrl+C
 
|| Press Ctrl+C
 
|| Press '''Ctrl''' and '''C''' keys to stop the '''server'''.
 
|| Press '''Ctrl''' and '''C''' keys to stop the '''server'''.
|- style="background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;"
+
|- style="border:1pt solid #000000;padding:0.176cm;"
 
|| Type
 
|| Type
  
Line 287: Line 300:
  
 
And press '''Enter'''.
 
And press '''Enter'''.
|- style="background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;"
+
|- style="border:1pt solid #000000;padding:0.176cm;"
 
|| [Firefox]
 
|| [Firefox]
 
|| Switch to the '''web browser. '''
 
|| Switch to the '''web browser. '''
|- style="background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;"
+
|- style="border:1pt solid #000000;padding:0.176cm;"
 
|| Type  
 
|| Type  
  
Line 299: Line 312:
  
 
and press '''Enter'''.
 
and press '''Enter'''.
|- style="background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;"
+
|- style="border:1pt solid #000000;padding:0.176cm;"
 
|| Highlight the error
 
|| Highlight the error
 
|| We get a “'''Bad request'''” error.
 
|| We get a “'''Bad request'''” error.
|- style="background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;"
+
|- style="border:1pt solid #000000;padding:0.176cm;"
 
|| [Terminal]
 
|| [Terminal]
 
|| Switch back to the '''terminal'''.
 
|| Switch back to the '''terminal'''.
|- style="background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;"
+
|- style="border:1pt solid #000000;padding:0.176cm;"
 
|| Highlight
 
|| Highlight
  
  
 
"GET /query HTTP/1.1" 400 -
 
"GET /query HTTP/1.1" 400 -
 +
  
  
Line 319: Line 333:
  
 
'''400 code''' indicates that the '''server''' could not understand the '''request''' due to invalid '''syntax'''.
 
'''400 code''' indicates that the '''server''' could not understand the '''request''' due to invalid '''syntax'''.
|- style="background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;"
+
|- style="border:1pt solid #000000;padding:0.176cm;"
 
|| Only narration.
 
|| Only narration.
 
|| So now we have to find out where this '''syntax''' issue has occurred.
 
|| So now we have to find out where this '''syntax''' issue has occurred.
Line 328: Line 342:
  
 
This is called '''debugging'''.
 
This is called '''debugging'''.
|- style="background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;"
+
|- style="border:1pt solid #000000;padding:0.176cm;"
 
|| [Text Editor]
 
|| [Text Editor]
 +
  
 
Press Ctrl+C
 
Press Ctrl+C
  
 
|| For this, we have to start the '''server''' in the '''debug mode'''.
 
|| For this, we have to start the '''server''' in the '''debug mode'''.
 +
  
 
Before that, we need to stop the current '''server''' by pressing '''Ctrl''' and '''C '''keys together.
 
Before that, we need to stop the current '''server''' by pressing '''Ctrl''' and '''C '''keys together.
|- style="background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;"
+
|- style="border:1pt solid #000000;padding:0.176cm;"
 
|| [Terminal]
 
|| [Terminal]
  
Line 343: Line 359:
 
$ export FLASK_ENV=development
 
$ export FLASK_ENV=development
 
|| Then type '''export <space>FLASK <underscore> ENV <equal to> development'''
 
|| Then type '''export <space>FLASK <underscore> ENV <equal to> development'''
 +
  
 
and press '''Enter'''.
 
and press '''Enter'''.
|- style="background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;"
+
|- style="border:1pt solid #000000;padding:0.176cm;"
 
|| [Terminal]
 
|| [Terminal]
  
 
Type
 
Type
 +
  
 
$ python3 -m flask run
 
$ python3 -m flask run
Line 357: Line 375:
  
 
And press '''Enter'''.
 
And press '''Enter'''.
|- style="background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;"
+
|- style="border:1pt solid #000000;padding:0.176cm;"
 
|| [Terminal]
 
|| [Terminal]
  
Line 365: Line 383:
  
  
|- style="background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;"
+
 
 +
|- style="border:1pt solid #000000;padding:0.176cm;"
 
|| [Firefox]
 
|| [Firefox]
  
Line 374: Line 393:
  
 
Since the '''debug mode''' is active, we have received a '''traceback''' of errors.
 
Since the '''debug mode''' is active, we have received a '''traceback''' of errors.
 
  
 
This means that we get the line numbers where the errors have occurred in different files.
 
This means that we get the line numbers where the errors have occurred in different files.
|- style="background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;"
+
|- style="border:1pt solid #000000;padding:0.176cm;"
 
|| Highlight the different error lines in the traceback of errors.
 
|| Highlight the different error lines in the traceback of errors.
 
  
  
 
|| The '''traceback''' includes the errors from the corresponding '''flask''' files as well.
 
|| The '''traceback''' includes the errors from the corresponding '''flask''' files as well.
 
  
 
This is because an error in one file causes errors in other files as well.
 
This is because an error in one file causes errors in other files as well.
 
  
 
This is termed as the '''cascading''' '''effect'''.
 
This is termed as the '''cascading''' '''effect'''.
 
  
 
We have to look for the error in a file that we have written.
 
We have to look for the error in a file that we have written.
|- style="background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;"
+
|- style="border:1pt solid #000000;padding:0.176cm;"
 
|| Highlight
 
|| Highlight
  
Line 398: Line 412:
 
framework = request.args['framework']
 
framework = request.args['framework']
 
|| Scroll down and search for the error in the file '''hello_flask.py'''
 
|| Scroll down and search for the error in the file '''hello_flask.py'''
|- style="background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;"
+
|- style="border:1pt solid #000000;padding:0.176cm;"
 
|| Highlight
 
|| Highlight
 
  
 
BadRequestKeyError
 
BadRequestKeyError
  
  
 
+
|| We have a '''BadRequestKeyError'''.
|| We have a '''BadRequestKeyError''' here.
+
 
+
  
 
That means that the '''key “framework”''' for the '''dictionary request.args''' does not exist.
 
That means that the '''key “framework”''' for the '''dictionary request.args''' does not exist.
 
  
 
To rectify this, we have to modify that line.
 
To rectify this, we have to modify that line.
|- style="background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;"
+
|- style="border:1pt solid #000000;padding:0.176cm;"
 
|| [Text editor]
 
|| [Text editor]
 
  
 
Type
 
Type
 
  
 
framework = request.args.get('framework')
 
framework = request.args.get('framework')
 
|| Switch to the '''editor'''.
 
|| Switch to the '''editor'''.
  
 +
Now change the '''line '''as shown.
  
Now change the '''framework value '''as shown.
 
  
 
+
|- style="border:1pt solid #000000;padding:0.176cm;"
|- style="background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;"
+
 
|| Press Ctrl+S
 
|| Press Ctrl+S
 
|| Save the file.
 
|| Save the file.
|- style="background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;"
+
|- style="border:1pt solid #000000;padding:0.176cm;"
 
|| [Text Editor]
 
|| [Text Editor]
 
  
 
Highlight
 
Highlight
 
  
 
framework = request.args.get('framework')
 
framework = request.args.get('framework')
 
|| Now even if the '''key''' is not found, '''python''' will handle this properly.
 
|| Now even if the '''key''' is not found, '''python''' will handle this properly.
 +
  
 
That means, instead of causing a '''400 error''', it will return '''None'''.
 
That means, instead of causing a '''400 error''', it will return '''None'''.
|- style="background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;"
+
|- style="border:1pt solid #000000;padding:0.176cm;"
 
|| [Terminal]
 
|| [Terminal]
 
|| Switch to the '''terminal.'''
 
|| Switch to the '''terminal.'''
|- style="background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;"
+
|- style="border:1pt solid #000000;padding:0.176cm;"
 
|| Press Ctrl+C
 
|| Press Ctrl+C
 
|| Once again stop the '''server''' by pressing '''Ctrl''' and '''C''' keys together.
 
|| Once again stop the '''server''' by pressing '''Ctrl''' and '''C''' keys together.
|- style="background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;"
+
|- style="border:1pt solid #000000;padding:0.176cm;"
 
|| Type python3 -m flask run
 
|| Type python3 -m flask run
 
|| Then run the '''server''' again.
 
|| Then run the '''server''' again.
|- style="background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;"
+
|- style="border:1pt solid #000000;padding:0.176cm;"
 
|| [Firefox]
 
|| [Firefox]
 
|| Go back to the '''browser''' and refresh the page.
 
|| Go back to the '''browser''' and refresh the page.
|- style="background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;"
+
|- style="border:1pt solid #000000;padding:0.176cm;"
 
|| Click on the refresh button.
 
|| Click on the refresh button.
|| Now we have the output that we expected.  
+
|| Now we have the output as expected.  
  
  
 
The '''framework value''' is '''None'''.
 
The '''framework value''' is '''None'''.
|- style="background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;"
+
|- style="border:1pt solid #000000;padding:0.176cm;"
 
||  
 
||  
 
|| Next, we will send some value for the '''framework '''via the '''URL'''.
 
|| Next, we will send some value for the '''framework '''via the '''URL'''.
|- style="background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;"
+
|- style="border:1pt solid #000000;padding:0.176cm;"
 
|| [Firefox]
 
|| [Firefox]
  
Line 468: Line 474:
 
Click on the address bar
 
Click on the address bar
 
|| '''args''' gets the part of the '''URL '''after the question mark in the form of a '''python dictionary'''.
 
|| '''args''' gets the part of the '''URL '''after the question mark in the form of a '''python dictionary'''.
|- style="background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;"
+
|- style="border:1pt solid #000000;padding:0.176cm;"
 
|| [Firefox]
 
|| [Firefox]
  
Line 476: Line 482:
  
  
'''Question mark framework <equal to> my underscore flask'''
+
'''Question mark framework <equal to> my_flask'''
  
 
And press '''Enter.'''
 
And press '''Enter.'''
|- style="background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;"
+
|- style="border:1pt solid #000000;padding:0.176cm;"
 
|| Highlight:
 
|| Highlight:
  
  
The framework value is: my_flask
+
<nowiki>The framework value is: my_flask</nowiki>
 
|| So now we have the '''framework attribute''' of the '''dictionary''' set to '''my_flask'''.
 
|| So now we have the '''framework attribute''' of the '''dictionary''' set to '''my_flask'''.
  
  
 
We got the result as expected.
 
We got the result as expected.
|- style="background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;"
+
|- style="border:1pt solid #000000;padding:0.176cm;"
 
|| '''Slide 8''': '''form attribute'''
 
|| '''Slide 8''': '''form attribute'''
 
|| The '''request object''' has one more important '''attribute''' called '''‘form’'''.
 
|| The '''request object''' has one more important '''attribute''' called '''‘form’'''.
Line 500: Line 506:
  
 
Let us look at an example.
 
Let us look at an example.
|- style="background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;"
+
|- style="border:1pt solid #000000;padding:0.176cm;"
 
|| [Text Editor]
 
|| [Text Editor]
  
  
 
Type
 
Type
 +
  
 
@app.route('/form', methods=['GET', 'POST'])  
 
@app.route('/form', methods=['GET', 'POST'])  
 +
 +
  
 
|| We will see how '''form data''' can be sent and received using the '''request object.'''
 
|| We will see how '''form data''' can be sent and received using the '''request object.'''
 +
  
 
Let us define a new '''route''' called '''form'''.
 
Let us define a new '''route''' called '''form'''.
 +
  
 
We allow both '''GET''' and '''POST''' as possible '''request''' '''methods'''.
 
We allow both '''GET''' and '''POST''' as possible '''request''' '''methods'''.
  
Before the''' if statement,''' type the code as shown here.
+
 
|- style="background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;"
+
Type the code as shown here.
 +
|- style="border:1pt solid #000000;padding:0.176cm;"
 
|| [Text Editor]
 
|| [Text Editor]
  
  
 
Type
 
Type
 +
  
 
def my_form():
 
def my_form():
Line 528: Line 541:
  
 
lastname = request.form.get('lastname')
 
lastname = request.form.get('lastname')
|| Now inside this '''form route''', define a '''view function''' '''my_form'''()
+
|| Inside the '''form route''', define a '''view function''' '''my_form'''()
  
  
Once again, type the code as shown here.
 
  
|- style="background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;"
+
 
 +
 
 +
|- style="border:1pt solid #000000;padding:0.176cm;"
 
|| Highlight:
 
|| Highlight:
  
Line 543: Line 557:
 
lastname = request.form.get('lastname')
 
lastname = request.form.get('lastname')
 
||  
 
||  
 +
  
  
 
This '''block''' will get executed, if the '''request''' is via '''POST method.'''
 
This '''block''' will get executed, if the '''request''' is via '''POST method.'''
|- style="background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;"
+
|- style="border:1pt solid #000000;padding:0.176cm;"
 
|| '''Slide 9''': '''POST method'''
 
|| '''Slide 9''': '''POST method'''
 
|| In '''POST request method'''
 
|| In '''POST request method'''
 
  
 
* <div style="margin-left:1.27cm;margin-right:0cm;">the '''client''' will send '''data''' to the '''server''' using the '''form'''.</div>
 
* <div style="margin-left:1.27cm;margin-right:0cm;">the '''client''' will send '''data''' to the '''server''' using the '''form'''.</div>
 
* <div style="margin-left:1.27cm;margin-right:0cm;">This is to update the '''server''' with some information</div>
 
* <div style="margin-left:1.27cm;margin-right:0cm;">This is to update the '''server''' with some information</div>
  
 
+
|- style="border:1pt solid #000000;padding:0.176cm;"
|- style="background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;"
+
 
|| '''Slide 9''': '''POST method'''
 
|| '''Slide 9''': '''POST method'''
|| * <div style="margin-left:1.27cm;margin-right:0cm;">For example - you enter your '''username''' and '''password''' while logging in to a website.</div>
+
||  
 +
* <div style="margin-left:1.27cm;margin-right:0cm;">For example - you enter your '''username''' and '''password''' while logging in to a website.</div>
 
* <div style="margin-left:1.27cm;margin-right:0cm;">In contrast, '''GET request method '''is used to get or read some '''data '''from the '''server'''.</div>
 
* <div style="margin-left:1.27cm;margin-right:0cm;">In contrast, '''GET request method '''is used to get or read some '''data '''from the '''server'''.</div>
  
  
|- style="background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;"
+
|- style="border:1pt solid #000000;padding:0.176cm;"
 
|| Only narration  
 
|| Only narration  
  
Line 569: Line 583:
  
 
We will obtain the entered values from the '''request object''' using the '''form''' '''attribute'''.
 
We will obtain the entered values from the '''request object''' using the '''form''' '''attribute'''.
|- style="background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;"
+
|- style="border:1pt solid #000000;padding:0.176cm;"
|| [Text Editor]
+
|| Switch back to the '''editor'''.
+
|- style="background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;"
+
 
|| Type
 
|| Type
  
  
<nowiki>html_string1 = '''<h1>The firstname value is: {}</h1> </nowiki>
+
<nowiki>html_string1 = '''<h1>The firstname value is: {}</h1></nowiki>
  
<nowiki> <h1>The lastname value is: {}</h1>'''.format(firstname, lastname) </nowiki>
+
<nowiki><h1>The lastname value is: {}</h1>'''.format(firstname, lastname)</nowiki>
  
  
 
return html_string1
 
return html_string1
|| Inside the '''if condition''' which checks the''' post method, '''type the following piece of code.
+
|| Inside the '''if condition''' which checks the''' post method, '''type this code.
  
  
This code will display the values of '''firstname''' and '''lastname'''.
+
This code will display the '''firstname''' as well as the '''lastname'''.
  
  
  
|- style="background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;"
+
|- style="border:1pt solid #000000;padding:0.176cm;"
 
|| [Text Editor]
 
|| [Text Editor]
  
Line 608: Line 619:
  
 
return html_string2
 
return html_string2
|| Now outside the''' if condition''', type the following code.
+
|| Now outside this''' if condition''', we type this code.
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
  
  
  
 
This will simply display a '''web form''' in the output, if the '''request method''' is '''GET.'''
 
This will simply display a '''web form''' in the output, if the '''request method''' is '''GET.'''
|- style="background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;"
+
|- style="border:1pt solid #000000;padding:0.176cm;"
 
|| Press Ctrl + S
 
|| Press Ctrl + S
 
|| Save the file.
 
|| Save the file.
|- style="background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;"
+
|- style="border:1pt solid #000000;padding:0.176cm;"
 
|| [Terminal]
 
|| [Terminal]
 
|| Switch back to the '''terminal'''.
 
|| Switch back to the '''terminal'''.
|- style="background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;"
+
|- style="border:1pt solid #000000;padding:0.176cm;"
 
|| Press Ctrl+C
 
|| Press Ctrl+C
 
|| Stop the '''server''' by pressing '''Ctrl''' and '''C''' keys together.
 
|| Stop the '''server''' by pressing '''Ctrl''' and '''C''' keys together.
|- style="background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;"
+
|- style="border:1pt solid #000000;padding:0.176cm;"
 
|| Type python3 -m flask run
 
|| Type python3 -m flask run
 
|| Then run the '''server''' again.
 
|| Then run the '''server''' again.
|- style="background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;"
+
|- style="border:1pt solid #000000;padding:0.176cm;"
 
|| [Firefox]
 
|| [Firefox]
  
  
 
Type [http://127.0.0.1:5000/form http://127.0.0.1:5000/form]
 
Type [http://127.0.0.1:5000/form http://127.0.0.1:5000/form]
 
  
  
Line 658: Line 647:
  
 
In the '''address bar''' type the '''URL''' as '''http://localhost:5000/form''' and press '''Enter.'''
 
In the '''address bar''' type the '''URL''' as '''http://localhost:5000/form''' and press '''Enter.'''
|- style="background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;"
+
|- style="border:1pt solid #000000;padding:0.176cm;"
 
||  
 
||  
 
|| The page is displayed with a '''form'''.
 
|| The page is displayed with a '''form'''.
|- style="background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;"
+
|- style="border:1pt solid #000000;padding:0.176cm;"
 
||  
 
||  
 
|| Let us enter some values in the '''form'''.
 
|| Let us enter some values in the '''form'''.
|- style="background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;"
+
|- style="border:1pt solid #000000;padding:0.176cm;"
 
|| Type '''First name''' as '''Spoken.'''
 
|| Type '''First name''' as '''Spoken.'''
  
Line 676: Line 665:
  
 
And then click on '''Submit '''button''' '''located at the bottom of the''' web form.'''
 
And then click on '''Submit '''button''' '''located at the bottom of the''' web form.'''
|- style="background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;"
+
|- style="border:1pt solid #000000;padding:0.176cm;"
 
|| [Firefox]
 
|| [Firefox]
  
Line 683: Line 672:
  
 
The text in the browser
 
The text in the browser
|| Here we have retrieved the '''firstname''' and '''lastname''' from the '''request object'''.
+
|| Here we have received the '''firstname''' and '''lastname''' from the '''request object'''.
  
  
  
|- style="background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;"
+
|- style="border:1pt solid #000000;padding:0.176cm;"
||
+
|| So this shows how the '''form attribute '''of the '''request''' '''object''' is used.
+
|- style="background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;"
+
 
|| [Text Editor]
 
|| [Text Editor]
 
|| The last thing I want to talk in this section is about “'''500: Internal Server Error'''”.
 
|| The last thing I want to talk in this section is about “'''500: Internal Server Error'''”.
Line 696: Line 682:
  
 
This is one of the most frequent errors you will encounter during '''flask''' '''app''' development.
 
This is one of the most frequent errors you will encounter during '''flask''' '''app''' development.
|- style="background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;"
+
|- style="border:1pt solid #000000;padding:0.176cm;"
 
||  
 
||  
 
|| Let us write a '''code snippet''' to demonstrate this.
 
|| Let us write a '''code snippet''' to demonstrate this.
|- style="background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;"
+
|- style="border:1pt solid #000000;padding:0.176cm;"
 
|| [Text Editor]
 
|| [Text Editor]
|| Switch to the '''editor'''.
+
|| Switch back to the '''editor'''.
|- style="background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;"
+
|- style="border:1pt solid #000000;padding:0.176cm;"
 
|| Type inside user(name):
 
|| Type inside user(name):
  
Line 716: Line 702:
  
 
Save the file.
 
Save the file.
|- style="background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;"
+
|- style="border:1pt solid #000000;padding:0.176cm;"
 
|| [Terminal]
 
|| [Terminal]
 
|| Switch to the '''terminal.'''
 
|| Switch to the '''terminal.'''
|- style="background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;"
+
|- style="border:1pt solid #000000;padding:0.176cm;"
 
|| Press Ctrl+C
 
|| Press Ctrl+C
 
|| Stop the '''server''' by pressing '''Ctrl''' and '''C''' keys together.
 
|| Stop the '''server''' by pressing '''Ctrl''' and '''C''' keys together.
|- style="background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;"
+
|- style="border:1pt solid #000000;padding:0.176cm;"
 
|| Type python3 -m flask run
 
|| Type python3 -m flask run
 
|| Now run the '''server''' again.
 
|| Now run the '''server''' again.
|- style="background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;"
+
|- style="border:1pt solid #000000;padding:0.176cm;"
 
|| [Firefox]
 
|| [Firefox]
  
Line 737: Line 723:
  
 
In the '''address bar''' type the '''URL''' as '''http://localhost:5000/user/Sid''' and press '''Enter'''
 
In the '''address bar''' type the '''URL''' as '''http://localhost:5000/user/Sid''' and press '''Enter'''
|- style="background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;"
+
|- style="border:1pt solid #000000;padding:0.176cm;"
 
|| [Firefox]
 
|| [Firefox]
|| Observe that we have received '''ZeroDivisionError'''.
+
|| Observe that we have a '''ZeroDivisionError'''.
|- style="background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;"
+
|- style="border:1pt solid #000000;padding:0.176cm;"
 
|| Highlight star
 
|| Highlight star
 
|| Let’s switch to the '''terminal''' to see the '''HTTP status code'''.
 
|| Let’s switch to the '''terminal''' to see the '''HTTP status code'''.
 
|-
 
|-
| style="background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;" | [Terminal]
+
| style="border:1pt solid #000000;padding:0.176cm;" | [Terminal]
  
  
Line 754: Line 740:
  
  
| style="background-color:#ffffff;border-top:1pt solid #000001;border-bottom:0.5pt solid #000001;border-left:0.5pt solid #000001;border-right:0.5pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;" | Here we can see '''HTTP response code''' as '''500.'''
+
| style="border-top:1pt solid #000000;border-bottom:0.5pt solid #000000;border-left:0.5pt solid #000000;border-right:0.5pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;" | Here we can see '''HTTP response code''' as '''500.'''
  
  
Line 760: Line 746:
  
  
The '''500''' error implies that, there’s something wrong in the '''web server'''.
+
The '''500''' error simply implies that, there’s something wrong in the '''web server'''.
 
|-
 
|-
| style="background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;" |  
+
| style="border:1pt solid #000000;padding:0.176cm;" |  
| style="background-color:#ffffff;border-top:1pt solid #000001;border-bottom:0.5pt solid #000001;border-left:0.5pt solid #000001;border-right:0.5pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;" | Since we have the '''debug mode '''on, we know the specific reason for the error.
+
| style="border-top:1pt solid #000000;border-bottom:0.5pt solid #000000;border-left:0.5pt solid #000000;border-right:0.5pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;" | Since we have the '''debug mode '''on, we know the specific reason for the error.
 
|-
 
|-
| style="background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;" |  
+
| style="border:1pt solid #000000;padding:0.176cm;" |  
| style="background-color:#ffffff;border-top:1pt solid #000001;border-bottom:0.5pt solid #000001;border-left:0.5pt solid #000001;border-right:0.5pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;" | With this we come to the end of this tutorial.
+
| style="border-top:1pt solid #000000;border-bottom:0.5pt solid #000000;border-left:0.5pt solid #000000;border-right:0.5pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;" | With this we come to the end of this tutorial.
  
 
Let us summarise.
 
Let us summarise.
|- style="background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;"
+
|- style="border:1pt solid #000000;padding:0.176cm;"
 
|| Slide 10: Summary
 
|| Slide 10: Summary
 
|| In this tutorial, we learnt about,
 
|| In this tutorial, we learnt about,
Line 781: Line 767:
  
 
|-
 
|-
| style="background-color:#ffffff;border-top:1pt solid #000001;border-bottom:0.5pt solid #000001;border-left:0.5pt solid #000001;border-right:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;" | <span style="background-color:#ffffff;">Slide: About Spoken Tutorial project</span>
+
| style="border-top:1pt solid #000000;border-bottom:0.5pt solid #000000;border-left:0.5pt solid #000000;border-right:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;" | Slide: About Spoken Tutorial project
| style="background-color:#ffffff;border-top:1pt solid #000001;border-bottom:0.5pt solid #000001;border-left:0.5pt solid #000001;border-right:0.5pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;" | <span style="background-color:#ffffff;">The video at the following link summarises the Spoken Tutorial project.</span>
+
| style="border-top:1pt solid #000000;border-bottom:0.5pt solid #000000;border-left:0.5pt solid #000000;border-right:0.5pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;" | The video at the following link summarises the Spoken Tutorial project.
  
  
 
Please download and watch it.
 
Please download and watch it.
 
|-
 
|-
| style="background-color:#ffffff;border-top:1pt solid #000001;border-bottom:0.5pt solid #000001;border-left:0.5pt solid #000001;border-right:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;" | Slide:
+
| style="background-color:#ffffff;border-top:1pt solid #000000;border-bottom:0.5pt solid #000000;border-left:0.5pt solid #000000;border-right:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;" | Slide:
  
 
Spoken Tutorial workshops
 
Spoken Tutorial workshops
| style="background-color:#ffffff;border-top:1pt solid #000001;border-bottom:0.5pt solid #000001;border-left:0.5pt solid #000001;border-right:0.5pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;" | <span style="background-color:#ffffff;">The&nbsp;</span><span style="background-color:#ffffff;">'''Spoken Tutorial Project'''</span><span style="background-color:#ffffff;">&nbsp;team </span>conducts workshops and gives certificates.
+
| style="background-color:#ffffff;border-top:1pt solid #000000;border-bottom:0.5pt solid #000000;border-left:0.5pt solid #000000;border-right:0.5pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;" | <span style="background-color:#ffffff;">The&nbsp;</span><span style="background-color:#ffffff;">'''Spoken Tutorial Project'''</span><span style="background-color:#ffffff;">&nbsp;team </span>conducts workshops and gives certificates.
  
  
 
For more details, please write to us.
 
For more details, please write to us.
|- style="background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;"
+
|- style="border:1pt solid #000000;padding:0.176cm;"
 
|| Slide:
 
|| Slide:
  
Line 800: Line 786:
 
|| Please post your timed queries in this forum.
 
|| Please post your timed queries in this forum.
 
|-
 
|-
| style="background-color:#ffffff;border-top:1pt solid #000001;border-bottom:0.5pt solid #000001;border-left:0.5pt solid #000001;border-right:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;" | Slide: Acknowledgement
+
| style="background-color:#ffffff;border-top:1pt solid #000000;border-bottom:0.5pt solid #000000;border-left:0.5pt solid #000000;border-right:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;" | Slide: Acknowledgement
| style="background-color:#ffffff;border-top:1pt solid #000001;border-bottom:0.5pt solid #000001;border-left:0.5pt solid #000001;border-right:0.5pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;" | <span style="background-color:#ffffff;">Spoken Tutorial Project is funded by NMEICT, MHRD, Government of India.</span>
+
| style="border-top:1pt solid #000000;border-bottom:0.5pt solid #000000;border-left:0.5pt solid #000000;border-right:0.5pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;" | Spoken Tutorial Project is funded by NMEICT, MHRD, Government of India.
  
  
 
More information on this mission is available at this link.
 
More information on this mission is available at this link.
|- style="background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;"
+
|- style="border:1pt solid #000000;padding:0.176cm;"
 
||  
 
||  
 
|| This is Siddhartha Sarkar signing off.  
 
|| This is Siddhartha Sarkar signing off.  

Revision as of 17:29, 21 January 2019

Title of script: The Request-Response Cycle in a Flask web app

Author: Siddhartha Sarkar

Keywords: ​Video tutorial, Python Flask, view functions, request object, HTTP response, debugging.


Visual Cue Narration
Slide 1: The Request-Response Cycle in a Flask web app Welcome to the Spoken Tutorial on the request-response cycle in a Flask web app.
Slide 2: Learning Objectives In this tutorial, we will learn
  • About the request-response cycle in Flask.
  • Different attributes of the request object.
  • Different types of request data.
  • Several HTTP response codes.


Slides 3: System Requirements To record this tutorial, I’m using
  • Ubuntu Linux 16.04 OS
  • Python 3.5.2
  • Atom text editor 1.22.1 and
  • Firefox web browser



You can use any text editor and web browser of your choice.

Slide 5:

Pre-requisites


To follow this tutorial, you should have working knowledge of*
Linux commands
  • Python programming and
  • HTML syntax



If not, then please go through the corresponding tutorials on this website. http://spoken-tutorial.org

Slide 6: The request object We already said that the Flask app instance has to process the received request.


For processing, the app instance needs to have access to certain information.

Slide 6: The request object A few objects are provided to the view functions, where the processing takes place.


One of these objects is the request object.


This object encapsulates the contents of the HTTP request sent by the client.

Slide 7: The request object The incoming request data can be of several forms. For example
  • Query arguments sent as part of the URL in the browser.
  • Form data collected from web forms.


We will discuss them in detail in this tutorial.

Open a Terminal window


Let us open the Terminal by pressing Ctrl, Alt and T keys simultaneously on the keyboard.
[Terminal]

Type cd project_flask & Press Enter

Now go to the folder project underscore flask which we created earlier using cd command.
[Terminal]


$ . flask_venv/bin/activate


[Enter]

Let us activate our virtualenv.


Type the command


Dot space flask_venv slash bin slash activate

And press Enter.

[Terminal]

Highlight (flask_venv)

Notice that we are now inside the virtual environment flask_venv.
[Terminal]

Type

$ atom hello_flask.py

Let’s open the hello_flask.py file in a text editor, which we created earlier in this series..
[Text Editor]


Type “, request


Let’s look at how the request object is made available in a view function.


We will import the request object from the flask library.


In the line from flask import Flask, we will add comma space request

[Text editor]

Type in hello_world():

(As the first line)


print("Request method is " + request.method)

The request object has many attributes.


Let us access request inside the hello_world view function.


Next to the function definition, type the code as shown.


Highlight


print("Request method is " + request.method)

This will print the method attribute of the request object.


Press Ctrl+S Save the file.
[Terminal]

Type


$ export FLASK_APP=hello_flask.py


Let us start the server to see the changes.


Switch to the terminal.


Type export <space> FLASK_APP <equal to > hello underscore flask dot py


And press Enter.

[Terminal]

Type


$ python3 -m flask run

[Enter]

Now type

python3 <space> hyphen m <space> flask <space> run


And press Enter.

[Firefox]

Type

http://localhost:5000/

And press Enter.

Now, open a web browser.


In the address bar, type http://localhost:5000 and press Enter.

Highlight the output We got the output as Hello World.
[Terminal] Switch to the terminal once again.
Highlight “Request method is Get” Observe that the current request method is “GET”.


The request object is indeed accessible inside the view functions.


The GET HTTP method is used to retrieve data from the web server.


It specifies the parameters in the URL of the request itself.

Only narration. Now let us see how one can send data to the server using the request object.


There are a number of ways to do this.


The simplest one is via Query Arguments.

[Text Editor]

Type


@app.route('/query')

def query_args():

(Tab)framework = request.args['framework']

(Tab)return '''<h1>The framework value is: {}</h1>'''.format(framework)

Let us define a new route to explain this.


Switch back to the editor.


Before the if condition, type the code as shown here.


We will call it as query.

Press Ctrl+S Save the file.
Highlight


<h1>The framework value is: {}</h1>

Here we have written the statement inside the HTML’s h1 heading tag.
Highlight args in

framework = request.args['framework']


Here we have an attribute called args in the request object.


This is a dictionary object.


It has the parsed contents of the query string in the URL.


We will use this attribute to retrieve the data sent as query arguments.

[Terminal] Switch to the terminal.
Press Ctrl+C Press Ctrl and C keys to stop the server.
Type


$ python3 -m flask run [Enter]

Press the up arrow key to get the command to run the flask application.


And press Enter.

[Firefox] Switch to the web browser.
Type

http://localhost:5000/query

And press Enter.

In the address bar, next to 5000 type slash query

and press Enter.

Highlight the error We get a “Bad request” error.
[Terminal] Switch back to the terminal.
Highlight


"GET /query HTTP/1.1" 400 -


Notice that this response has HTTP code 400.


This is one of the common errors you will encounter while developing Flask applications.


400 code indicates that the server could not understand the request due to invalid syntax.

Only narration. So now we have to find out where this syntax issue has occurred.


We will scan the code to spot the error.


This is called debugging.

[Text Editor]


Press Ctrl+C

For this, we have to start the server in the debug mode.


Before that, we need to stop the current server by pressing Ctrl and C keys together.

[Terminal]

Type

$ export FLASK_ENV=development

Then type export <space>FLASK <underscore> ENV <equal to> development


and press Enter.

[Terminal]

Type


$ python3 -m flask run

Now type

python3<space>(hyphen)m<space>flask<space>run


And press Enter.

[Terminal]


Highlight Debug mode: on

Observe that now it says debug mode is on.


[Firefox]


Click on the refresh button.

Go back to the browser and refresh the page.


Since the debug mode is active, we have received a traceback of errors.

This means that we get the line numbers where the errors have occurred in different files.

Highlight the different error lines in the traceback of errors.


The traceback includes the errors from the corresponding flask files as well.

This is because an error in one file causes errors in other files as well.

This is termed as the cascading effect.

We have to look for the error in a file that we have written.

Highlight


framework = request.args['framework']

Scroll down and search for the error in the file hello_flask.py
Highlight

BadRequestKeyError


We have a BadRequestKeyError.

That means that the key “framework” for the dictionary request.args does not exist.

To rectify this, we have to modify that line.

[Text editor]

Type

framework = request.args.get('framework')

Switch to the editor.

Now change the line as shown.


Press Ctrl+S Save the file.
[Text Editor]

Highlight

framework = request.args.get('framework')

Now even if the key is not found, python will handle this properly.


That means, instead of causing a 400 error, it will return None.

[Terminal] Switch to the terminal.
Press Ctrl+C Once again stop the server by pressing Ctrl and C keys together.
Type python3 -m flask run Then run the server again.
[Firefox] Go back to the browser and refresh the page.
Click on the refresh button. Now we have the output as expected.


The framework value is None.

Next, we will send some value for the framework via the URL.
[Firefox]


Click on the address bar

args gets the part of the URL after the question mark in the form of a python dictionary.
[Firefox]


Type http://127.0.0.1:5000/query?framework=my_flask

In the address bar, next to the word query type:


Question mark framework <equal to> my_flask

And press Enter.

Highlight:


The framework value is: my_flask

So now we have the framework attribute of the dictionary set to my_flask.


We got the result as expected.

Slide 8: form attribute The request object has one more important attribute called ‘form’.


It can be used to collect data from the user using a web form.


And then store the data as a dictionary in the form attribute.


Let us look at an example.

[Text Editor]


Type


@app.route('/form', methods=['GET', 'POST'])


We will see how form data can be sent and received using the request object.


Let us define a new route called form.


We allow both GET and POST as possible request methods.


Type the code as shown here.

[Text Editor]


Type


def my_form():

if request.method == 'POST':

firstname = request.form.get('firstname')

lastname = request.form.get('lastname')

Inside the form route, define a view function my_form()



Highlight:


if request.method == 'POST':

firstname = request.form.get('firstname')

lastname = request.form.get('lastname')


This block will get executed, if the request is via POST method.

Slide 9: POST method In POST request method
  • the client will send data to the server using the form.
  • This is to update the server with some information
Slide 9: POST method
  • For example - you enter your username and password while logging in to a website.
  • In contrast, GET request method is used to get or read some data from the server.


Only narration


Now let us store the form values into some variables.


We will obtain the entered values from the request object using the form attribute.

Type


html_string1 = '''<h1>The firstname value is: {}</h1>

<h1>The lastname value is: {}</h1>'''.format(firstname, lastname)


return html_string1

Inside the if condition which checks the post method, type this code.


This code will display the firstname as well as the lastname.


[Text Editor]


Type


html_string2 = <form method="POST">

Firstname: <input type="text" name="firstname">

Lastname: <input type="text" name="lastname">

<input type="submit" value="Submit">

</form>


return html_string2

Now outside this if condition, we type this code.


This will simply display a web form in the output, if the request method is GET.

Press Ctrl + S Save the file.
[Terminal] Switch back to the terminal.
Press Ctrl+C Stop the server by pressing Ctrl and C keys together.
Type python3 -m flask run Then run the server again.
[Firefox]


Type http://127.0.0.1:5000/form


Switch to the browser.


In the address bar type the URL as http://localhost:5000/form and press Enter.

The page is displayed with a form.
Let us enter some values in the form.
Type First name as Spoken.


Last name as Tutorial

I will type the First name as Spoken.


Last name as Tutorial.


And then click on Submit button located at the bottom of the web form.

[Firefox]


Highlight

The text in the browser

Here we have received the firstname and lastname from the request object.


[Text Editor] The last thing I want to talk in this section is about “500: Internal Server Error”.


This is one of the most frequent errors you will encounter during flask app development.

Let us write a code snippet to demonstrate this.
[Text Editor] Switch back to the editor.
Type inside user(name):


a = 10/0

In the user view function, before the return statement type

a <equal to> 10 slash zero


As we are dividing 10 by zero, we should get an error.


Save the file.

[Terminal] Switch to the terminal.
Press Ctrl+C Stop the server by pressing Ctrl and C keys together.
Type python3 -m flask run Now run the server again.
[Firefox]


Type http://localhost:5000/user/Sid


Switch to the browser.


In the address bar type the URL as http://localhost:5000/user/Sid and press Enter

[Firefox] Observe that we have a ZeroDivisionError.
Highlight star Let’s switch to the terminal to see the HTTP status code.
[Terminal]


Highlight


"GET /user/error HTTP/1.1" 500


Here we can see HTTP response code as 500.


Which means we have encountered an internal server error.


The 500 error simply implies that, there’s something wrong in the web server.

Since we have the debug mode on, we know the specific reason for the error.
With this we come to the end of this tutorial.

Let us summarise.

Slide 10: Summary In this tutorial, we learnt about,


  • The request-response cycle in Flask.
  • Different attributes of the request object.
  • Different types of request data.
  • Several HTTP response codes.


Slide: About Spoken Tutorial project The video at the following link summarises the Spoken Tutorial project.


Please download and watch it.

Slide:

Spoken Tutorial workshops

The Spoken Tutorial Project team conducts workshops and gives certificates.


For more details, please write to us.

Slide:

Forum for specific questions:

Please post your timed queries in this forum.
Slide: Acknowledgement Spoken Tutorial Project is funded by NMEICT, MHRD, Government of India.


More information on this mission is available at this link.

This is Siddhartha Sarkar signing off.

Thanks for watching.

Contributors and Content Editors

Pravin1389, SiddharthaSarkar