View source for Python-Flask/C2/Introduction-to-Flask-Templates/English

'''Title of script: Introduction to Flask Templates'''

'''Author: Siddhartha Sarkar'''

Keywords: Video tutorial, Python Flask, flask templates, render_ template, jinja2, variables in templates.


{| border=1
|- 
| | '''Visual Cue'''
| | '''Narration'''
|- 
|| '''Slide 1: Introduction to Flask templates'''
|| <span style="background-color:transparent;color:#000000;">Welcome to the Spoken Tutorial on</span><span style="background-color:transparent;color:#000000;"> </span><span style="background-color:transparent;color:#000000;">'''Introduction to Flask templates'''</span><span style="background-color:transparent;color:#000000;">.</span>
|- style="border:1pt solid #000000;padding:0.176cm;"
| style="color:#000000;" | '''Slide 2: Learning Objectives'''
|| In this tutorial, we will learn to* <div style="color:#000000;"><span style="background-color:transparent;">Use </span><span style="background-color:transparent;">'''templates'''</span><span style="background-color:transparent;"> </span><span style="background-color:transparent;">in </span><span style="background-color:transparent;">'''Flask'''</span><span style="background-color:transparent;">.</span></div>
* <div style="color:#000000;"><span style="background-color:transparent;">Use </span><span style="background-color:transparent;">'''variables'''</span><span style="background-color:transparent;"> </span><span style="background-color:transparent;">inside </span><span style="background-color:transparent;">'''templates'''</span><span style="background-color:transparent;">.</span></div>
* <div style="color:#000000;"><span style="background-color:transparent;">Gain insight about the </span><span style="background-color:transparent;">'''View'''</span><span style="background-color:transparent;"> part of </span><span style="background-color:transparent;">'''MVC'''</span><span style="background-color:transparent;">.</span></div>


|- style="border:1pt solid #000000;padding:0.176cm;"
|| 

<div style="color:#000000;">'''Slides 3: System Requirements'''</div>
|| <div style="color:#000000;">To record this tutorial, I’m&nbsp; using</div>* <div style="color:#000000;"><span style="background-color:transparent;">'''Ubuntu Linux 16.04'''</span><span style="background-color:transparent;"> </span><span style="background-color:transparent;">'''OS'''</span></div>
* <div style="color:#000000;"><span style="background-color:transparent;">'''Python'''</span><span style="background-color:transparent;"> </span><span style="background-color:transparent;">'''3.5.2'''</span></div>
* <div style="color:#000000;"><span style="background-color:transparent;">'''Atom text editor 1.22.1 '''</span><span style="background-color:transparent;">and</span></div>
* <div style="color:#000000;">'''Firefox Web Browser'''</div>





<span style="background-color:transparent;color:#000000;">However, you may use any other </span><span style="background-color:transparent;color:#000000;">'''editor'''</span><span style="background-color:transparent;color:#000000;"> </span><span style="background-color:transparent;color:#000000;">or </span><span style="background-color:transparent;color:#000000;">'''browser'''</span><span style="background-color:transparent;color:#000000;"> </span><span style="background-color:transparent;color:#000000;">of your choice.</span>
|- style="border:1pt solid #000000;padding:0.176cm;"
|| <div style="color:#000000;">'''Slide 5:'''</div>

<div style="color:#000000;">'''Pre-requisites'''</div>



|| <div style="color:#000000;">To follow this tutorial, you should have working knowledge of</div>* <div style="color:#000000;">'''Linux commands'''</div>

* <div style="color:#000000;"><span style="background-color:transparent;">'''Python programming language '''</span><span style="background-color:transparent;">and</span></div>
* <div style="color:#000000;">'''HTML syntax'''</div>





<div style="color:#000000;">If not, then please go through the corresponding tutorials on this website.&nbsp;</div>
|- style="border:1pt solid #000000;padding:0.176cm;"
| style="color:#000000;" | '''Slide 6: MVC Architecture'''
|| <span style="background-color:transparent;color:#000000;">Let us begin with the concept of </span><span style="background-color:transparent;color:#000000;">'''MVC architecture'''</span><span style="background-color:transparent;color:#000000;">.</span>


<span style="background-color:transparent;color:#000000;">'''MVC paradigm '''</span><span style="background-color:transparent;color:#000000;">separates a </span><span style="background-color:transparent;color:#000000;">'''web app'''</span><span style="background-color:transparent;color:#000000;"> </span><span style="background-color:transparent;color:#000000;">into three interlinked components.</span>


* <div style="color:#000000;">'''Model'''</div>
* <div style="color:#000000;"><span style="background-color:transparent;">'''View '''</span><span style="background-color:transparent;">and</span></div>
* <div style="color:#000000;"><span style="background-color:transparent;">'''Controller'''</span><span style="background-color:transparent;">.</span></div>


|- style="border:1pt solid #000000;padding:0.176cm;"
|| 

<div style="color:#000000;">'''Slide 7: MVC Architecture'''</div>

<div style="color:#000000;">'''(Model)'''</div>
|| * <div style="color:#000000;"><span style="background-color:#ffffff;">'''Model '''</span><span style="background-color:#ffffff;">is used to represent the </span><span style="background-color:#ffffff;">'''application data'''</span><span style="background-color:#ffffff;">.</span></div>
* <div style="color:#000000;"><span style="background-color:#ffffff;">We will talk more about it once we introduce </span><span style="background-color:#ffffff;">'''database '''</span><span style="background-color:#ffffff;">related things.</span></div>


|- style="border:1pt solid #000000;padding:0.176cm;"
|| 

<div style="color:#000000;">'''Slide 8: MVC Architecture'''</div>

<div style="color:#000000;">'''(View)'''</div>
|| * <div style="color:#000000;"><span style="background-color:#ffffff;">'''View '''</span><span style="background-color:#ffffff;">is the presentation layer of </span><span style="background-color:#ffffff;">'''MVC'''</span><span style="background-color:#ffffff;">.</span></div>
* <div style="color:#000000;"><span style="background-color:#ffffff;">The appearance of the </span><span style="background-color:#ffffff;">'''app'''</span><span style="background-color:#ffffff;"> is taken care of by the </span><span style="background-color:#ffffff;">'''View '''</span><span style="background-color:#ffffff;">component.</span></div>


|- style="border:1pt solid #000000;padding:0.176cm;"
|| 

<div style="color:#000000;">'''Slide 9: MVC Architecture'''</div>

<div style="color:#000000;">'''(Controller)'''</div>
|| * <div style="color:#000000;"><span style="background-color:transparent;">'''Controller '''</span><span style="background-color:transparent;">is responsible for directing the </span><span style="background-color:transparent;">'''execution flow'''</span><span style="background-color:transparent;"> of the </span><span style="background-color:transparent;">'''app'''</span><span style="background-color:transparent;">.</span></div>
* <div style="color:#000000;"><span style="background-color:transparent;">Once the </span><span style="background-color:transparent;">'''requests '''</span><span style="background-color:transparent;">are sent to the </span><span style="background-color:transparent;">'''server,'''</span></div>
** <div style="color:#000000;"><span style="background-color:transparent;">the </span><span style="background-color:transparent;">'''controller '''</span><span style="background-color:transparent;">code processes the </span><span style="background-color:transparent;">'''request'''</span></div>
** <div style="color:#000000;"><span style="background-color:transparent;">and sends back the </span><span style="background-color:transparent;">'''response'''</span><span style="background-color:transparent;">.</span></div>


|- style="border:1pt solid #000000;padding:0.176cm;"
|| 



<div style="color:#000000;">'''Slide 11: MVC Architecture'''</div>
|| * <div style="color:#000000;"><span style="background-color:transparent;">The </span><span style="background-color:transparent;">'''templates '''</span><span style="background-color:transparent;">are part of the </span><span style="background-color:transparent;">'''View '''</span><span style="background-color:transparent;">part of </span><span style="background-color:transparent;">'''MVC'''</span><span style="background-color:transparent;">.</span></div>
* <div style="color:#000000;"><span style="background-color:transparent;">Loosely speaking, </span><span style="background-color:transparent;">'''templates'''</span><span style="background-color:transparent;"> are </span><span style="background-color:transparent;">'''HTML '''</span><span style="background-color:transparent;">pages that can be inherited.</span></div>
* <div style="color:#000000;"><span style="background-color:transparent;">We need a </span><span style="background-color:transparent;">'''template engine '''</span><span style="background-color:transparent;">for handling </span><span style="background-color:transparent;">'''templates'''</span><span style="background-color:transparent;">.</span></div>


|- style="border:1pt solid #000000;padding:0.176cm;"
|| 

<span style="background-color:transparent;color:#000000;">'''Slide 6'''</span><span style="background-color:transparent;color:#000000;">: </span><span style="background-color:transparent;color:#000000;">'''Templates'''</span>



|| * <div style="color:#000000;"><span style="background-color:transparent;">So far we have simply returned </span><span style="background-color:transparent;">'''HTML'''</span><span style="background-color:transparent;"> code from the </span><span style="background-color:transparent;">'''view functions'''</span><span style="background-color:transparent;">.</span></div>



* <div style="color:#000000;"><span style="background-color:transparent;">By using </span><span style="background-color:transparent;">'''templates,'''</span><span style="background-color:transparent;"> one can return an </span><span style="background-color:transparent;">'''HTML'''</span><span style="background-color:transparent;"> file from the </span><span style="background-color:transparent;">'''view functions'''</span><span style="background-color:transparent;">.</span></div>


|- style="border:1pt solid #000000;padding:0.176cm;"
|| 

<span style="background-color:transparent;color:#000000;">'''Slide 7'''</span><span style="background-color:transparent;color:#000000;">: </span><span style="background-color:transparent;color:#000000;">'''Templates'''</span>



|| * <div style="color:#000000;"><span style="background-color:transparent;">One </span><span style="background-color:transparent;">'''HTML file'''</span><span style="background-color:transparent;"> can inherit </span><span style="background-color:transparent;">'''HTML'''</span><span style="background-color:transparent;"> code from another file with the help of </span><span style="background-color:transparent;">'''templates'''</span><span style="background-color:transparent;">.</span></div>
* <div style="color:#000000;"><span style="background-color:transparent;">For example, a typical </span><span style="background-color:transparent;">'''website'''</span><span style="background-color:transparent;"> has some </span><span style="background-color:transparent;">'''logo'''</span><span style="background-color:transparent;">, </span><span style="background-color:transparent;">'''header,'''</span><span style="background-color:transparent;"> etc. common in all pages.</span></div>


|- style="border:1pt solid #000000;padding:0.176cm;"
|| 

<span style="background-color:transparent;color:#000000;">'''Slide 8'''</span><span style="background-color:transparent;color:#000000;">: </span><span style="background-color:transparent;color:#000000;">'''Templates'''</span>



|| * <div style="color:#000000;"><span style="background-color:transparent;">So one can write a base </span><span style="background-color:transparent;">'''HTML'''</span><span style="background-color:transparent;"> </span><span style="background-color:transparent;">'''file'''</span><span style="background-color:transparent;"> </span><span style="background-color:transparent;">'''template.'''</span><span style="background-color:transparent;">&nbsp;</span></div>
* <div style="color:#000000;"><span style="background-color:transparent;">And other pages can inherit the same base </span><span style="background-color:transparent;">'''HTML'''</span><span style="background-color:transparent;"> </span><span style="background-color:transparent;">'''file template'''</span><span style="background-color:transparent;">.</span></div>


|- 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:0.176cm;padding-bottom:0.176cm;padding-left:0.095cm;padding-right:0.176cm;"
|| 

<div style="color:#000000;">Open a Terminal window</div>



|| <span style="background-color:transparent;color:#000000;">Let us open the </span><span style="background-color:transparent;color:#000000;">'''Terminal'''</span><span style="background-color:transparent;color:#000000;"> </span><span style="background-color:transparent;color:#000000;">by pressing </span><span style="background-color:transparent;color:#000000;">'''Ctrl'''</span><span style="background-color:transparent;color:#000000;">, </span><span style="background-color:transparent;color:#000000;">'''Alt'''</span><span style="background-color:transparent;color:#000000;"> </span><span style="background-color:transparent;color:#000000;">and </span><span style="background-color:transparent;color:#000000;">'''T'''</span><span style="background-color:transparent;color:#000000;"> </span><span style="background-color:transparent;color:#000000;">keys simultaneously on the keyboard.</span>
|- style="background-color:#ffffff;border:0.5pt solid #000000;padding:0.106cm;"
|| <div style="color:#000000;">[Terminal]</div>

<div style="color:#000000;">Type cd project_flask & Press Enter</div>
|| <span style="background-color:transparent;color:#000000;">Now go to the folder </span><span style="background-color:transparent;color:#000000;">'''project underscore flask'''</span><span style="background-color:transparent;color:#000000;"> </span><span style="background-color:transparent;color:#000000;">which we created earlier using </span><span style="background-color:transparent;color:#000000;">'''cd'''</span><span style="background-color:transparent;color:#000000;"> </span><span style="background-color:transparent;color:#000000;">'''command.'''</span>
|-
| style="border-top:0.5pt solid #000000;border-bottom:1pt solid #000000;border-left:1pt solid #000000;border-right:1pt solid #000000;padding:0.176cm;" | <div style="color:#000000;">[Terminal]</div>


<div style="color:#000000;">$ . flask_venv/bin/activate</div>


<div style="color:#000000;">[Enter]</div>
| style="border-top:0.5pt solid #000000;border-bottom:1pt solid #000000;border-left:1pt solid #000000;border-right:1pt solid #000000;padding:0.176cm;" | <span style="background-color:transparent;color:#000000;">And activate our </span><span style="background-color:transparent;color:#000000;">'''virtualenv'''</span><span style="background-color:transparent;color:#000000;">.</span>


<div style="color:#000000;">Type</div>

<div style="color:#000000;">'''dot space flask_venv slash bin slash activate'''</div>

<span style="background-color:transparent;color:#000000;">And press </span><span style="background-color:transparent;color:#000000;">'''Enter'''</span><span style="background-color:transparent;color:#000000;">.</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:0.176cm;padding-bottom:0.176cm;padding-left:0.095cm;padding-right:0.176cm;color:#000000;" | Only narration
| 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:0.176cm;padding-bottom:0.176cm;padding-left:0.095cm;padding-right:0.176cm;" | <span style="background-color:transparent;color:#000000;">Here onwards, please remember to press the </span><span style="background-color:transparent;color:#000000;">'''Enter'''</span><span style="background-color:transparent;color:#000000;"> </span><span style="background-color:transparent;color:#000000;">key after typing each </span><span style="background-color:transparent;color:#000000;">'''command'''</span><span style="background-color:transparent;color:#000000;">.</span>
|-
| style="border-top:0.5pt solid #000000;border-bottom:1pt solid #000000;border-left:1pt solid #000000;border-right:1pt solid #000000;padding:0.176cm;" | <div style="color:#000000;">[Terminal]</div>

<div style="color:#000000;">Type</div>

<div style="color:#000000;">$ atom hello_flask.py</div>
| style="border-top:0.5pt solid #000000;border-bottom:1pt solid #000000;border-left:1pt solid #000000;border-right:1pt solid #000000;padding:0.176cm;" | <span style="background-color:transparent;color:#000000;">Let’s open the </span><span style="background-color:transparent;color:#000000;">'''hello_flask.py'''</span><span style="background-color:transparent;color:#000000;"> </span><span style="background-color:transparent;color:#000000;">file which we created earlier in this series, in any </span><span style="background-color:transparent;color:#000000;">'''text editor'''</span><span style="background-color:transparent;color:#000000;">.</span>
|- style="border:1pt solid #000000;padding:0.176cm;"
|| <div style="color:#000000;">[Text Editor] hello_flask.py</div>


<div style="color:#000000;">Highlight HTML part in my_form().</div>
|| <span style="background-color:transparent;color:#000000;">Observe that the </span><span style="background-color:transparent;color:#000000;">'''my_form() function'''</span><span style="background-color:transparent;color:#000000;"> </span><span style="background-color:transparent;color:#000000;">returns </span><span style="background-color:transparent;color:#000000;">'''raw HTML'''</span><span style="background-color:transparent;color:#000000;">.</span>


<span style="background-color:transparent;color:#000000;">Now we will demonstrate how we can avoid returning raw </span><span style="background-color:transparent;color:#000000;">'''HTML'''</span><span style="background-color:transparent;color:#000000;"> </span><span style="background-color:transparent;color:#000000;">'''code'''</span><span style="background-color:transparent;color:#000000;">.</span>


<span style="background-color:transparent;color:#000000;">For that we have to create our </span><span style="background-color:transparent;color:#000000;">'''HTML template'''</span><span style="background-color:transparent;color:#000000;"> </span><span style="background-color:transparent;color:#000000;">files in a separate folder called </span><span style="background-color:transparent;color:#000000;">'''templates'''</span><span style="background-color:transparent;color:#000000;">.</span>
|- style="border:1pt solid #000000;padding:0.176cm;"
|| <div style="color:#000000;">[Terminal]</div>


<div style="color:#000000;">mkdir templates [Enter]</div>
|| <span style="background-color:transparent;color:#000000;">Switch to the </span><span style="background-color:transparent;color:#000000;">'''terminal.&nbsp;'''</span>


<span style="background-color:transparent;color:#000000;">And let’s create a </span><span style="background-color:transparent;color:#000000;">'''folder'''</span><span style="background-color:transparent;color:#000000;"> </span><span style="background-color:transparent;color:#000000;">named </span><span style="background-color:transparent;color:#000000;">'''templates.'''</span>


<span style="background-color:transparent;color:#000000;">Type </span><span style="background-color:transparent;color:#000000;">'''mkdir <space> templates'''</span><span style="background-color:transparent;color:#000000;">.</span>
|- style="border:1pt solid #000000;padding:0.176cm;"
|| 
[Editor: sample_template.html] <br>
Type

<!DOCTYPE html>

<html>

<head>

<title>Hello</title>

</head>

<body><br>
<nowiki>
	<h1>The firstname value is Spoken</h1>
</nowiki><br>
</body>

</html>


|| <span style="background-color:transparent;color:#000000;">Let us write a simple </span><span style="background-color:transparent;color:#000000;">'''HTML'''</span><span style="background-color:transparent;color:#000000;"> </span><span style="background-color:transparent;color:#000000;">code to print the first name in a new file </span><span style="background-color:transparent;color:#000000;">'''sample_template.html&nbsp;'''</span>


<div style="color:#000000;">Type the code as shown here.</div>



|- style="border:1pt solid #000000;padding:0.176cm;"
| style="color:#000000;" | Press Ctrl + S
| style="color:#000000;" | And save the file.
|- style="border:1pt solid #000000;padding:0.176cm;"
| style="color:#000000;" | Only Narration
|| <span style="background-color:transparent;color:#000000;">Now let us render this </span><span style="background-color:transparent;color:#000000;">'''HTML'''</span><span style="background-color:transparent;color:#000000;"> </span><span style="background-color:transparent;color:#000000;">file via </span><span style="background-color:transparent;color:#000000;">'''python flask app'''</span><span style="background-color:transparent;color:#000000;">.&nbsp;</span>


<span style="background-color:transparent;color:#000000;">For this demonstration, let us define a new </span><span style="background-color:transparent;color:#000000;">'''route'''</span><span style="background-color:transparent;color:#000000;"> </span><span style="background-color:transparent;color:#000000;">in </span><span style="background-color:transparent;color:#000000;">our </span><span style="background-color:transparent;color:#000000;">'''hello_flask'''</span><span style="background-color:transparent;color:#000000;"> </span><span style="background-color:transparent;color:#000000;">file.</span>
|- style="border:1pt solid #000000;padding:0.176cm;"
|| <span style="background-color:transparent;color:#000000;">Switch to </span><span style="background-color:transparent;color:#000000;">'''hello_flask.py'''</span><span style="background-color:transparent;color:#000000;"> </span><span style="background-color:transparent;color:#000000;">in the </span><span style="background-color:transparent;color:#000000;">'''text editor'''</span><span style="background-color:transparent;color:#000000;">.</span>
|| <span style="background-color:transparent;color:#000000;">Switch to the file </span><span style="background-color:transparent;color:#000000;">'''hello_flask.py'''</span><span style="background-color:transparent;color:#000000;"> </span><span style="background-color:transparent;color:#000000;">in the </span><span style="background-color:transparent;color:#000000;">'''text editor'''</span><span style="background-color:transparent;color:#000000;">.</span>
|- style="border:1pt solid #000000;padding:0.176cm;"
|| <div style="color:#000000;">[Editor: hello_flask.py]</div>


<div style="color:#000000;">@app.route('/template')</div>

<div style="color:#000000;">def template_ex():</div>

<span style="background-color:transparent;color:#000000;">return render_template('sample_template.html')</span>
|| <span style="background-color:transparent;color:#000000;">In the </span><span style="background-color:transparent;color:#000000;">'''hello_flask.py'''</span><span style="background-color:transparent;color:#000000;"> </span><span style="background-color:transparent;color:#000000;">file, before the last</span><span style="background-color:transparent;color:#000000;"> </span><span style="background-color:transparent;color:#000000;">'''if condition'''</span><span style="background-color:transparent;color:#000000;">, type the code as shown here.</span>



|- style="border:1pt solid #000000;padding:0.176cm;"
| style="color:#000000;" | Highlight: render_template('sample_template.html')
|| <span style="background-color:transparent;color:#000000;">Inside this </span><span style="background-color:transparent;color:#000000;">'''route'''</span><span style="background-color:transparent;color:#000000;"> </span><span style="background-color:transparent;color:#000000;">we have used the </span><span style="background-color:transparent;color:#000000;">'''function render_template'''</span><span style="background-color:transparent;color:#000000;"> </span><span style="background-color:transparent;color:#000000;">provided by </span><span style="background-color:transparent;color:#000000;">'''Flask'''</span><span style="background-color:transparent;color:#000000;">.</span>


<span style="background-color:transparent;color:#000000;">This </span><span style="background-color:transparent;color:#000000;">'''function'''</span><span style="background-color:transparent;color:#000000;"> </span><span style="background-color:transparent;color:#000000;">is used to render an </span><span style="background-color:transparent;color:#000000;">'''HTML'''</span><span style="background-color:transparent;color:#000000;"> </span><span style="background-color:transparent;color:#000000;">'''template file'''</span><span style="background-color:transparent;color:#000000;">.</span>


<span style="background-color:transparent;color:#000000;">Here we pass </span><span style="background-color:transparent;color:#000000;">'''sample_template.html'''</span><span style="background-color:transparent;color:#000000;"> </span><span style="background-color:transparent;color:#000000;">as an </span><span style="background-color:transparent;color:#000000;">'''argument'''</span><span style="background-color:transparent;color:#000000;"> </span><span style="background-color:transparent;color:#000000;">to the </span><span style="background-color:transparent;color:#000000;">'''render_template function'''</span><span style="background-color:transparent;color:#000000;">.</span>


<span style="background-color:transparent;color:#000000;">So, </span><span style="background-color:transparent;color:#000000;">'''Flask'''</span><span style="background-color:transparent;color:#000000;"> </span><span style="background-color:transparent;color:#000000;">will look for the file </span><span style="background-color:transparent;color:#000000;">'''sample_template dot html'''</span><span style="background-color:transparent;color:#000000;"> </span><span style="background-color:transparent;color:#000000;">inside the </span><span style="background-color:transparent;color:#000000;">'''templates folder'''</span><span style="background-color:transparent;color:#000000;">.</span>
|- style="border:1pt solid #000000;padding:0.176cm;"
|| <div style="color:#000000;">[Text Editor] Add , render_template</div>


<div style="color:#000000;">from flask import Flask, request, render_template</div>
|| <span style="background-color:transparent;color:#000000;">In the 1st line, we will import the </span><span style="background-color:transparent;color:#000000;">'''method render_template.'''</span>
|- style="border:1pt solid #000000;padding:0.176cm;"
| style="color:#000000;" | Press Ctrl + S keys
| style="color:#000000;" | And then save the file
|- style="border:1pt solid #000000;padding:0.176cm;"
| style="color:#000000;" | [Terminal]
|| <span style="background-color:transparent;color:#000000;">Now switch to the </span><span style="background-color:transparent;color:#000000;">'''terminal'''</span><span style="background-color:transparent;color:#000000;">.</span>
|- style="border:1pt solid #000000;padding:0.176cm;"
|| <div style="color:#000000;">[Terminal]</div>

<div style="color:#000000;">Type</div>

<div style="color:#000000;">$ export FLASK_APP=hello_flask.py</div>
|| <span style="background-color:transparent;color:#000000;">And type&nbsp; </span><span style="background-color:transparent;color:#000000;">'''export <space> FLASK_APP <equal to > hello underscore flask dot py'''</span>
|- style="border:1pt solid #000000;padding:0.176cm;"
|| <div style="color:#000000;">[Terminal]</div>

<div style="color:#000000;">Type $ python3 -m flask run [Enter]</div>
|| <span style="background-color:transparent;color:#000000;">Now run the </span><span style="background-color:transparent;color:#000000;">'''server.'''</span>
|- style="border:1pt solid #000000;padding:0.176cm;"
|| <div style="color:#000000;">[Firefox]</div>


<span style="background-color:transparent;color:#000000;">Type </span>[http://127.0.0.1:5000/ http://127.0.0.1:5000/]<span style="background-color:transparent;color:#000000;">template</span>


<div style="color:#000000;">And press Enter.</div>
|| <span style="background-color:transparent;color:#000000;">Then, open a </span><span style="background-color:transparent;color:#000000;">'''web browser'''</span><span style="background-color:transparent;color:#000000;"> </span><span style="background-color:transparent;color:#000000;">and in the </span><span style="background-color:transparent;color:#000000;">'''address bar'''</span><span style="background-color:transparent;color:#000000;">, type&nbsp;</span>

<span style="background-color:transparent;color:#000000;">'''http://127.0.0.1:5000/template'''</span><span style="background-color:transparent;color:#000000;">&nbsp;</span>


<span style="background-color:transparent;color:#000000;">And press </span><span style="background-color:transparent;color:#000000;">'''Enter'''</span><span style="background-color:transparent;color:#000000;">.</span>
|- style="border:1pt solid #000000;padding:0.176cm;"
| style="color:#000000;" | [Firefox] Highlight the text.
|| <span style="background-color:transparent;color:#000000;">We got the output of the </span><span style="background-color:transparent;color:#000000;">'''HTML page'''</span><span style="background-color:transparent;color:#000000;">.</span>


<span style="background-color:transparent;color:#000000;">So we have rendered the </span><span style="background-color:transparent;color:#000000;">'''HTML code'''</span><span style="background-color:transparent;color:#000000;"> </span><span style="background-color:transparent;color:#000000;">without hardcoding it inside the </span><span style="background-color:transparent;color:#000000;">'''python'''</span><span style="background-color:transparent;color:#000000;"> </span><span style="background-color:transparent;color:#000000;">file.</span>
|- style="border:1pt solid #000000;padding:0.176cm;"
| style="color:#000000;" | Only narration
|| <span style="background-color:transparent;color:#000000;">Now switch to the </span><span style="background-color:transparent;color:#000000;">'''hello_flask.py'''</span><span style="background-color:transparent;color:#000000;"> </span><span style="background-color:transparent;color:#000000;">file</span>


<span style="background-color:transparent;color:#000000;">We can pass the </span><span style="background-color:transparent;color:#000000;">'''variables'''</span><span style="background-color:transparent;color:#000000;"> </span><span style="background-color:transparent;color:#000000;">as a parameter to the </span><span style="background-color:transparent;color:#000000;">'''render_template method.'''</span>


<div style="color:#000000;">Let us see how we can do this.</div>
|- style="border:1pt solid #000000;padding:0.176cm;"
|| <div style="color:#000000;">def template_ex():</div>

<div style="color:#000000;">fname = 'Tutorial'</div>

<div style="color:#000000;">return render_template('sample_template.html', firstname = fname)</div>
|| <span style="background-color:transparent;color:#000000;">Update the </span><span style="background-color:transparent;color:#000000;">'''template_ex method'''</span><span style="background-color:transparent;color:#000000;"> </span><span style="background-color:transparent;color:#000000;">as shown here.</span>
|- style="border:1pt solid #000000;padding:0.176cm;"
| style="color:#000000;" | [Text Editor] highlight fname = ‘Tutorial’
|| <span style="background-color:transparent;color:#000000;">I have declared a </span><span style="background-color:transparent;color:#000000;">'''variable'''</span><span style="background-color:transparent;color:#000000;"> </span><span style="background-color:transparent;color:#000000;">called </span><span style="background-color:transparent;color:#000000;">'''fname'''</span><span style="background-color:transparent;color:#000000;"> </span><span style="background-color:transparent;color:#000000;">here and assigned the value </span><span style="background-color:transparent;color:#000000;">'''Tutorial'''</span><span style="background-color:transparent;color:#000000;"> </span><span style="background-color:transparent;color:#000000;">to it.</span>
|- style="border:1pt solid #000000;padding:0.176cm;"
|| <div style="color:#000000;">[Text Editor] Highlight</div>


<span style="background-color:transparent;color:#000000;">return render_template('sample_template.html', firstname = fname)</span>
|| <span style="background-color:transparent;color:#000000;">Then I have passed this </span><span style="background-color:transparent;color:#000000;">'''variable fname'''</span><span style="background-color:transparent;color:#000000;"> </span><span style="background-color:transparent;color:#000000;">to the </span><span style="background-color:transparent;color:#000000;">'''render_template'''</span><span style="background-color:transparent;color:#000000;"> </span><span style="background-color:transparent;color:#000000;">'''method'''</span><span style="background-color:transparent;color:#000000;">.</span>


<span style="background-color:transparent;color:#000000;">Now the value of the </span><span style="background-color:transparent;color:#000000;">'''variable fname'''</span><span style="background-color:transparent;color:#000000;"> </span><span style="background-color:transparent;color:#000000;">can be accessed via the </span><span style="background-color:transparent;color:#000000;">'''variable firstname'''</span><span style="background-color:transparent;color:#000000;"> </span><span style="background-color:transparent;color:#000000;">in the </span><span style="background-color:transparent;color:#000000;">'''HTML'''</span><span style="background-color:transparent;color:#000000;"> </span><span style="background-color:transparent;color:#000000;">file.</span>
|- style="border:1pt solid #000000;padding:0.176cm;"
| style="color:#000000;" | Press Ctrl + S keys
| style="color:#000000;" | Let’s save the file.
|- style="border:1pt solid #000000;padding:0.176cm;"
|| <div style="color:#000000;">[Text Editor]</div>

<div style="color:#000000;">In sample_template.html</div>


<div style="color:#000000;">Highlight Spoken</div>
|| <span style="background-color:transparent;color:#000000;">And switch to </span><span style="background-color:transparent;color:#000000;">'''sample_template.html'''</span><span style="background-color:transparent;color:#000000;"> </span><span style="background-color:transparent;color:#000000;">file.</span>


<span style="background-color:transparent;color:#000000;">Here, we have explicitly mentioned </span><span style="background-color:transparent;color:#000000;">'''Spoken '''</span><span style="background-color:transparent;color:#000000;">as&nbsp; </span><span style="background-color:transparent;color:#000000;">'''firstname'''</span><span style="background-color:transparent;color:#000000;">.</span>


<span style="background-color:transparent;color:#000000;">We will use </span><span style="background-color:transparent;color:#000000;">'''jinja'''</span><span style="background-color:transparent;color:#000000;"> </span><span style="background-color:transparent;color:#000000;">to interact the </span><span style="background-color:transparent;color:#000000;">'''HTML'''</span><span style="background-color:transparent;color:#000000;"> </span><span style="background-color:transparent;color:#000000;">file with the </span><span style="background-color:transparent;color:#000000;">'''python'''</span><span style="background-color:transparent;color:#000000;"> </span><span style="background-color:transparent;color:#000000;">file.</span>
|- style="border:1pt solid #000000;padding:0.176cm;"
|| <span style="background-color:transparent;color:#000000;">'''Slide 9'''</span><span style="background-color:transparent;color:#000000;">: </span><span style="background-color:transparent;color:#000000;">'''Jinja'''</span>
|| * <div style="color:#000000;"><span style="background-color:transparent;">'''Jinja'''</span><span style="background-color:transparent;"> is a powerful </span><span style="background-color:transparent;">'''templating'''</span><span style="background-color:transparent;"> </span><span style="background-color:transparent;">'''language'''</span><span style="background-color:transparent;">.</span></div>
* <div style="color:#000000;"><span style="background-color:transparent;">It allows generating </span><span style="background-color:transparent;">'''HTML'''</span><span style="background-color:transparent;"> on the fly based on the </span><span style="background-color:transparent;">'''request'''</span><span style="background-color:transparent;">.</span></div>
* <div style="color:#000000;"><span style="background-color:transparent;">It supports </span><span style="background-color:transparent;">'''control structures'''</span><span style="background-color:transparent;"> such as </span><span style="background-color:transparent;">'''if-</span><span style="background-color:transparent;">statements'''</span><span style="background-color:transparent;"> and </span><span style="background-color:transparent;">'''for-loops'''</span><span style="background-color:transparent;">.</span></div>
* <div style="color:#000000;"><span style="background-color:transparent;">Most importantly, it enables </span><span style="background-color:transparent;">'''inheritance'''</span><span style="background-color:transparent;"> of </span><span style="background-color:transparent;">'''HTML'''</span><span style="background-color:transparent;"> code.</span></div>


|- style="border:1pt solid #000000;padding:0.176cm;"
|| 

<div style="color:#000000;">Modify the body as</div>


<nowiki><h1>The firstname value is {{ firstname }}</h1></nowiki>


<span style="background-color:transparent;color:#000000;">(</span><span style="background-color:transparent;color:#000000;">'''within double curly braces firstname'''</span><span style="background-color:transparent;color:#000000;">)</span>
|| <span style="background-color:transparent;color:#000000;">Switch to </span><span style="background-color:transparent;color:#000000;">'''sample_template.html'''</span><span style="background-color:transparent;color:#000000;"> </span><span style="background-color:transparent;color:#000000;">file.</span>


<span style="background-color:transparent;color:#000000;">To access a </span><span style="background-color:transparent;color:#000000;">'''variable'''</span><span style="background-color:transparent;color:#000000;"> </span><span style="background-color:transparent;color:#000000;">in </span><span style="background-color:transparent;color:#000000;">'''Jinja,'''</span><span style="background-color:transparent;color:#000000;"> </span><span style="background-color:transparent;color:#000000;">we have to write it within </span><span style="background-color:transparent;color:#000000;">'''double'''</span><span style="background-color:transparent;color:#000000;"> </span><span style="background-color:transparent;color:#000000;">'''curly braces'''</span><span style="background-color:transparent;color:#000000;">.</span>


<span style="background-color:transparent;color:#000000;">So replace the word </span><span style="background-color:transparent;color:#000000;">'''Spoken '''</span><span style="background-color:transparent;color:#000000;">with </span><span style="background-color:transparent;color:#000000;">'''within-double curly braces, firstname.'''</span>
|- style="border:1pt solid #000000;padding:0.176cm;"
| style="color:#000000;" | Press Ctrl + S
| style="color:#000000;" | Save the file.
|- style="border:1pt solid #000000;padding:0.176cm;"
|| <div style="color:#000000;">[Terminal]</div>

<div style="color:#000000;">Type</div>


<div style="color:#000000;">$ python3 -m flask run</div>

<div style="color:#000000;">[Enter]</div>
|| <span style="background-color:transparent;color:#000000;">And switch to the </span><span style="background-color:transparent;color:#000000;">'''terminal'''</span><span style="background-color:transparent;color:#000000;">.</span>


<span style="background-color:transparent;color:#000000;">Stop the running </span><span style="background-color:transparent;color:#000000;">'''server '''</span><span style="background-color:transparent;color:#000000;">and </span><span style="background-color:transparent;color:#000000;">'''start'''</span><span style="background-color:transparent;color:#000000;"> </span><span style="background-color:transparent;color:#000000;">the </span><span style="background-color:transparent;color:#000000;">'''server'''</span><span style="background-color:transparent;color:#000000;"> </span><span style="background-color:transparent;color:#000000;">once again, by typing this </span><span style="background-color:transparent;color:#000000;">'''command'''</span><span style="background-color:transparent;color:#000000;">.</span>
|- style="border:1pt solid #000000;padding:0.176cm;"
|| <div style="color:#000000;">Type&nbsp;</div>

[http://127.0.0.1:5000/ http://127.0.0.1:5000/template]

<div style="color:#000000;">And press Enter.</div>


<span style="background-color:transparent;color:#000000;">Highlight </span><span style="background-color:transparent;color:#000000;">'''Tutorial'''</span><span style="background-color:transparent;color:#000000;">.</span>
|| <span style="background-color:transparent;color:#000000;">Then switch to the </span><span style="background-color:transparent;color:#000000;">'''browser'''</span><span style="background-color:transparent;color:#000000;"> </span><span style="background-color:transparent;color:#000000;">and refresh the page.</span>


<span style="background-color:transparent;color:#000000;">Observe that, we get </span><span style="background-color:transparent;color:#000000;">'''Tutorial'''</span><span style="background-color:transparent;color:#000000;">.&nbsp;</span>


<span style="background-color:transparent;color:#000000;">That means we have successfully passed the </span><span style="background-color:transparent;color:#000000;">'''variable'''</span><span style="background-color:transparent;color:#000000;"> </span><span style="background-color:transparent;color:#000000;">from </span><span style="background-color:transparent;color:#000000;">'''python'''</span><span style="background-color:transparent;color:#000000;"> </span><span style="background-color:transparent;color:#000000;">to </span><span style="background-color:transparent;color:#000000;">'''HTML'''</span><span style="background-color:transparent;color:#000000;">.</span>
|- style="border:1pt solid #000000;padding:0.176cm;"
|| <div style="color:#000000;">[Text Editor] hello_flask.py</div>


<div style="color:#000000;">&nbsp;def my_form():</div>

<div style="color:#000000;">&nbsp;&nbsp;&nbsp;&nbsp;if request.method == 'POST':</div>

<div style="color:#000000;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;firstname = request.form.get('firstname')</div>

<div style="color:#000000;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;lastname = request.form.get('lastname')</div>


<span style="background-color:transparent;color:#000000;">&nbsp;&nbsp;&nbsp; </span><span style="background-color:transparent;color:#000000;">return render_template('form1.html', fname=firstname, lname=lastname)</span>


<div style="color:#000000;">&nbsp;&nbsp;&nbsp;&nbsp;return render_template('form2.html')</div>
|| <span style="background-color:transparent;color:#000000;">Once again, switch to the </span><span style="background-color:transparent;color:#000000;">'''hello_flask.py'''</span><span style="background-color:transparent;color:#000000;"> </span><span style="background-color:transparent;color:#000000;">file and update the </span><span style="background-color:transparent;color:#000000;">'''form'''</span><span style="background-color:transparent;color:#000000;"> </span><span style="background-color:transparent;color:#000000;">'''route'''</span><span style="background-color:transparent;color:#000000;"> </span><span style="background-color:transparent;color:#000000;">as shown.</span>



|- style="border:1pt solid #000000;padding:0.176cm;"
|| <span style="background-color:transparent;color:#000000;">Press </span><span style="background-color:transparent;color:#000000;">'''Ctrl + S'''</span>
| style="color:#000000;" | Save this file.
|- style="border:1pt solid #000000;padding:0.176cm;"
| style="color:#000000;" | Only narration
|| <span style="background-color:transparent;color:#000000;">Now we have to create two </span><span style="background-color:transparent;color:#000000;">'''HTML'''</span><span style="background-color:transparent;color:#000000;"> </span><span style="background-color:transparent;color:#000000;">files </span><span style="background-color:transparent;color:#000000;">'''form1.html'''</span><span style="background-color:transparent;color:#000000;"> </span><span style="background-color:transparent;color:#000000;">and </span><span style="background-color:transparent;color:#000000;">'''form2.html'''</span><span style="background-color:transparent;color:#000000;">.</span>
|- style="border:1pt solid #000000;padding:0.176cm;"
|| <div style="color:#000000;">Terminal</div>

<div style="color:#000000;">Press Ctrl + C</div>
|| <span style="background-color:transparent;color:#000000;">Switch to the terminal and stop the </span><span style="background-color:transparent;color:#000000;">'''server'''</span><span style="background-color:transparent;color:#000000;">.</span>
|- style="border:1pt solid #000000;padding:0.176cm;"
|| <div style="color:#000000;">[Terminal]</div>


<div style="color:#000000;">atom templates/form1.html templates/form2.html&nbsp; [Enter]</div>
|| <span style="background-color:transparent;color:#000000;">Now open </span><span style="background-color:transparent;color:#000000;">'''form1.html '''</span><span style="background-color:transparent;color:#000000;">and </span><span style="background-color:transparent;color:#000000;">'''form2.html'''</span><span style="background-color:transparent;color:#000000;"> </span><span style="background-color:transparent;color:#000000;">in a </span><span style="background-color:transparent;color:#000000;">'''text editor'''</span><span style="background-color:transparent;color:#000000;">.</span>



|- style="border:1pt solid #000000;padding:0.176cm;"
|| <div style="color:#000000;">[Text Editor] Show form1.html</div>

<!DOCTYPE html>

<html>

<head>
<br>
<nowiki>    <title> Hello </title>      </nowiki>
<br>
</head>

<body>

<nowiki>    <h1>The firstname value is: {{ fname }}</h1>     </nowiki>
<br>
<nowiki>    <h1>The lastname value is: {{ lname }}</h1>     </nowiki>

</body>

</html>

|| <span style="background-color:transparent;color:#000000;">In </span><span style="background-color:transparent;color:#000000;">'''form1.html,'''</span><span style="background-color:transparent;color:#000000;"> </span><span style="background-color:transparent;color:#000000;">add the following piece of code.</span>


<span style="background-color:transparent;color:#000000;">This code will simply display the </span><span style="background-color:transparent;color:#000000;">'''firstname'''</span><span style="background-color:transparent;color:#000000;"> </span><span style="background-color:transparent;color:#000000;">and </span><span style="background-color:transparent;color:#000000;">'''lastname'''</span><span style="background-color:transparent;color:#000000;">.</span>
|- style="border:1pt solid #000000;padding:0.176cm;"
|| <span style="background-color:transparent;color:#000000;">Press </span><span style="background-color:transparent;color:#000000;">'''Ctrl + S'''</span>
| style="color:#000000;" | Save the file.
|- style="border:1pt solid #000000;padding:0.176cm;"
|| <div style="color:#000000;">[Text Editor] Show form2.html</div>


<span style="background-color:#ffffff;color:#000000;"><!DOCTYPE html><html><head></span><span style="background-color:#ffffff;color:#000000;">&nbsp; &nbsp; </span><span style="background-color:#ffffff;color:#000000;"><title>Hello</title></head><body></span><span style="background-color:#ffffff;color:#000000;">&nbsp; &nbsp; </span><span style="background-color:#ffffff;color:#000000;"><form method="POST"></span><span style="background-color:#ffffff;color:#000000;">&nbsp; &nbsp; </span><span style="background-color:#ffffff;color:#000000;">Firstname: <input type="text" name="firstname"><br></span><span style="background-color:#ffffff;color:#000000;">&nbsp; &nbsp; </span><span style="background-color:#ffffff;color:#000000;">Lastname: <input type="text" name="lastname"><br></span><span style="background-color:#ffffff;color:#000000;">&nbsp; &nbsp; </span><span style="background-color:#ffffff;color:#000000;"><input type="submit" value="Submit"><br></span><span style="background-color:#ffffff;color:#000000;">&nbsp; &nbsp; </span><span style="background-color:#ffffff;color:#000000;">&nbsp; &nbsp; </span><span style="background-color:#ffffff;color:#000000;"></form></body></html></span>
|| <span style="background-color:transparent;color:#000000;">In </span><span style="background-color:transparent;color:#000000;">'''form2.html'''</span><span style="background-color:transparent;color:#000000;">, add the following piece of code.</span>


<span style="background-color:transparent;color:#000000;">This code will&nbsp; display a form to receive </span><span style="background-color:transparent;color:#000000;">'''firstname'''</span><span style="background-color:transparent;color:#000000;"> </span><span style="background-color:transparent;color:#000000;">and </span><span style="background-color:transparent;color:#000000;">'''lastname'''</span><span style="background-color:transparent;color:#000000;">.</span>
|- style="border:1pt solid #000000;padding:0.176cm;"
|| <span style="background-color:transparent;color:#000000;">Press </span><span style="background-color:transparent;color:#000000;">'''Ctrl + S'''</span>
| style="color:#000000;" | Again, save the file.
|- style="border:1pt solid #000000;padding:0.176cm;"
|| <div style="color:#000000;">[Terminal]</div>


<div style="color:#000000;">Type python3 -m flask run</div>
|| <span style="background-color:transparent;color:#000000;">Switch to the </span><span style="background-color:transparent;color:#000000;">'''terminal'''</span><span style="background-color:transparent;color:#000000;">.</span>


<span style="background-color:transparent;color:#000000;">And run the </span><span style="background-color:transparent;color:#000000;">'''server '''</span><span style="background-color:transparent;color:#000000;">again.</span>
|- style="border:1pt solid #000000;padding:0.176cm;"
|| <div style="color:#000000;">[Browser]</div>

<div style="color:#000000;">Type&nbsp;</div>

[http://127.0.0.1:5000/ http://127.0.0.1:5000/form]

<div style="color:#000000;">And press Enter.</div>
|| <span style="background-color:transparent;color:#000000;">Then switch to the </span><span style="background-color:transparent;color:#000000;">'''browser'''</span><span style="background-color:transparent;color:#000000;">.</span>


<span style="background-color:transparent;color:#000000;">And in the </span><span style="background-color:transparent;color:#000000;">'''address bar'''</span><span style="background-color:transparent;color:#000000;">, replace </span><span style="background-color:transparent;color:#000000;">'''template'''</span><span style="background-color:transparent;color:#000000;"> </span><span style="background-color:transparent;color:#000000;">with </span><span style="background-color:transparent;color:#000000;">'''form'''</span><span style="background-color:transparent;color:#000000;"> </span><span style="background-color:transparent;color:#000000;">and press </span><span style="background-color:transparent;color:#000000;">'''Enter'''</span><span style="background-color:transparent;color:#000000;">.</span>
|- style="border:1pt solid #000000;padding:0.176cm;"
|| <div style="color:#000000;">[Browser]</div>

<div style="color:#000000;">Firstname : Spoken</div>


<div style="color:#000000;">Lastname: Tutorial [Submit]</div>



|| <span style="background-color:transparent;color:#000000;">Enter the </span><span style="background-color:transparent;color:#000000;">'''first name'''</span><span style="background-color:transparent;color:#000000;"> </span><span style="background-color:transparent;color:#000000;">as </span><span style="background-color:transparent;color:#000000;">'''Spoken.'''</span>


<span style="background-color:transparent;color:#000000;">And </span><span style="background-color:transparent;color:#000000;">'''last name'''</span><span style="background-color:transparent;color:#000000;"> </span><span style="background-color:transparent;color:#000000;">as </span><span style="background-color:transparent;color:#000000;">'''Tutorial.'''</span>


<span style="background-color:transparent;color:#000000;">Then click on the </span><span style="background-color:transparent;color:#000000;">'''Submit '''</span><span style="background-color:transparent;color:#000000;">button.</span>
|- style="border:1pt solid #000000;padding:0.176cm;"
| style="color:#000000;" | [Browser] Highlight the text on screen.
| style="color:#000000;" | We got the output as desired.
|- style="border:1pt solid #000000;padding:0.176cm;"
|| <div style="color:#000000;">[Terminal]</div>


<span style="background-color:transparent;color:#000000;">Press </span><span style="background-color:transparent;color:#000000;">'''Ctrl + C'''</span>


<span style="background-color:transparent;color:#000000;">Type </span><span style="background-color:transparent;color:#000000;">'''deactivate'''</span><span style="background-color:transparent;color:#000000;"> </span><span style="background-color:transparent;color:#000000;">and press </span><span style="background-color:transparent;color:#000000;">'''Enter'''</span>
|| <span style="background-color:transparent;color:#000000;">Switch back to the </span><span style="background-color:transparent;color:#000000;">'''terminal'''</span><span style="background-color:transparent;color:#000000;">.</span>


<span style="background-color:transparent;color:#000000;">Let’s stop the </span><span style="background-color:transparent;color:#000000;">'''server'''</span><span style="background-color:transparent;color:#000000;">.</span>


<span style="background-color:transparent;color:#000000;">And </span><span style="background-color:transparent;color:#000000;">'''deactivate'''</span><span style="background-color:transparent;color:#000000;"> </span><span style="background-color:transparent;color:#000000;">the</span><span style="background-color:transparent;color:#000000;"> </span><span style="background-color:transparent;color:#000000;">'''virtual environment'''</span><span style="background-color:transparent;color:#000000;">.</span>
|- style="border:1pt solid #000000;padding:0.176cm;"
| style="color:#000000;" | Only narration
|| <div style="color:#000000;">This brings us to an end of this tutorial.</div>


<div style="color:#000000;">Let us summarise.</div>
|- style="border:1pt solid #000000;padding:0.176cm;"
|| <span style="background-color:transparent;color:#000000;">Slide 8: </span><span style="background-color:transparent;color:#000000;">'''Summary'''</span>
|| <div style="color:#000000;">In this tutorial, we learnt about-</div>

<div style="color:#000000;">&nbsp;</div>* <div style="color:#000000;"><span style="background-color:transparent;">'''Templating'''</span><span style="background-color:transparent;"> in </span><span style="background-color:transparent;">'''flask'''</span><span style="background-color:transparent;"> to write clean code.</span></div>
* <div style="color:#000000;"><span style="background-color:transparent;">Using </span><span style="background-color:transparent;">'''variables'''</span><span style="background-color:transparent;"> in the </span><span style="background-color:transparent;">'''jinja2 templating language.'''</span></div>
* <div style="color:#000000;"><span style="background-color:transparent;">The </span><span style="background-color:transparent;">'''View'''</span><span style="background-color:transparent;"> part of </span><span style="background-color:transparent;">'''MVC'''</span><span style="background-color:transparent;">.</span></div>


|-
| 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:0.176cm;padding-bottom:0.176cm;padding-left:0.079cm;padding-right:0.176cm;" | 

<div style="color:#000000;">Slide: About Spoken Tutorial project</div>
| 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:0.176cm;padding-bottom:0.176cm;padding-left:0.079cm;padding-right:0.176cm;" | <div style="color:#000000;">The video at the following link summarises the Spoken Tutorial project.</div>


<div style="color:#000000;">Please download and watch it.</div>
|- style="background-color:#ffffff;border:0.5pt solid #000000;padding-top:0.176cm;padding-bottom:0.176cm;padding-left:0.095cm;padding-right:0.176cm;"
|| <div style="color:#000000;">Slide:</div>

<div style="color:#000000;">Spoken Tutorial workshops</div>
|| <span style="background-color:#ffffff;color:#000000;">The&nbsp;</span><span style="background-color:#ffffff;color:#000000;">'''Spoken Tutorial Project'''</span><span style="background-color:#ffffff;color:#000000;">&nbsp;</span><span style="background-color:#ffffff;color:#000000;">team </span><span style="background-color:transparent;color:#000000;">conducts workshops and gives certificates.</span>


<div style="color:#000000;">For more details, please write to us.</div>
|-
| style="border-top:0.5pt solid #000000;border-bottom:1pt solid #000000;border-left:1pt solid #000000;border-right:1pt solid #000000;padding:0.176cm;color:#000000;" | Slide: Forum for specific questions:
| style="border-top:0.5pt solid #000000;border-bottom:1pt solid #000000;border-left:1pt solid #000000;border-right:1pt solid #000000;padding:0.176cm;color:#000000;" | Please post your timed queries in this forum.
|-
| 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:0.176cm;padding-bottom:0.176cm;padding-left:0.095cm;padding-right:0.176cm;color:#000000;" | Slide: Acknowledgement
| 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:0.176cm;padding-bottom:0.176cm;padding-left:0.095cm;padding-right:0.176cm;" | <div style="color:#000000;">Spoken Tutorial Project is funded by NMEICT, MHRD, Government of India.</div>


<div style="color:#000000;">More information on this mission is available at this link.</div>
|-
| style="border-top:0.5pt solid #000000;border-bottom:1pt solid #000000;border-left:1pt solid #000000;border-right:1pt solid #000000;padding:0.176cm;" | 
| style="border-top:0.5pt solid #000000;border-bottom:1pt solid #000000;border-left:1pt solid #000000;border-right:1pt solid #000000;padding:0.176cm;" | <div style="color:#000000;">This is Siddhartha Sarkar signing off.&nbsp;</div>


<div style="color:#000000;">Thanks for watching.</div>
|-
|}