Difference between revisions of "Python-Flask/C2/Introduction-to-Flask-Templates/English"

Latest revision as of 17:27, 27 August 2019

Title of script: Introduction to Flask Templates

Author: Siddhartha Sarkar

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

Visual Cue	Narration
Slide 1: Introduction to Flask templates	Welcome to the Spoken Tutorial on Introduction to Flask templates.
Slide 2: Learning Objectives	In this tutorial, we will learn to Use templates in Flask. Use variables inside templates. Gain insight about the View part of MVC.
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 However, you may use any other editor or browser of your choice.
Slide 5: Pre-requisites	To follow this tutorial, you should have working knowledge of Linux commands Python programming language and HTML syntax If not, then please go through the corresponding tutorials on this website.
Slide 6: MVC Architecture	Let us begin with the concept of MVC architecture. MVC paradigm separates a web app into three interlinked components. Model View and Controller.
Slide 7: MVC Architecture (Model)	Model is used to represent the application data. We will talk more about it once we introduce database related things.
Slide 8: MVC Architecture (View)	View is the presentation layer of MVC. The appearance of the app is taken care of by the View component.
Slide 9: MVC Architecture (Controller)	Controller is responsible for directing the execution flow of the app. Once the requests are sent to the server, the controller code processes the request and sends back the response.
Slide 11: MVC Architecture	The templates are part of the View part of MVC. Loosely speaking, templates are HTML pages that can be inherited. We need a template engine for handling templates.
Slide 6: Templates	So far we have simply returned HTML code from the view functions. By using templates, one can return an HTML file from the view functions.
Slide 7: Templates	One HTML file can inherit HTML code from another file with the help of templates. For example, a typical website has some logo, header, etc. common in all pages.
Slide 8: Templates	So one can write a base HTML file template. And other pages can inherit the same base HTML file template.
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]	And activate our virtualenv. Type dot space flask_venv slash bin slash activate And press Enter.
Only narration	Here onwards, please remember to press the Enter key after typing each command.
[Terminal] Type $ atom hello_flask.py	Let’s open the hello_flask.py file which we created earlier in this series, in any text editor.
[Text Editor] hello_flask.py Highlight HTML part in my_form().	Observe that the my_form() function returns raw HTML. Now we will demonstrate how we can avoid returning raw HTML code. For that we have to create our HTML template files in a separate folder called templates.
[Terminal] mkdir templates [Enter]	Switch to the terminal. And let’s create a folder named templates. Type mkdir <space> templates.
[Editor: sample_template.html] Type <!DOCTYPE html> <html> <head> <title>Hello</title> </head> <body> <h1>The firstname value is Spoken</h1> </body> </html>	Let us write a simple HTML code to print the first name in a new file sample_template.html Type the code as shown here.
Press Ctrl + S	And save the file.
Only Narration	Now let us render this HTML file via python flask app. For this demonstration, let us define a new route in our hello_flask file.
Switch to hello_flask.py in the text editor.	Switch to the file hello_flask.py in the text editor.
[Editor: hello_flask.py] @app.route('/template') def template_ex(): return render_template('sample_template.html')	In the hello_flask.py file, before the last if condition, type the code as shown here.
Highlight: render_template('sample_template.html')	Inside this route we have used the function render_template provided by Flask. This function is used to render an HTML template file. Here we pass sample_template.html as an argument to the render_template function. So, Flask will look for the file sample_template dot html inside the templates folder.
[Text Editor] Add , render_template from flask import Flask, request, render_template	In the 1st line, we will import the method render_template.
Press Ctrl + S keys	And then save the file
[Terminal]	Now switch to the terminal.
[Terminal] Type $ export FLASK_APP=hello_flask.py	And type export <space> FLASK_APP <equal to > hello underscore flask dot py
[Terminal] Type $ python3 -m flask run [Enter]	Now run the server.
[Firefox] Type http://127.0.0.1:5000/template And press Enter.	Then, open a web browser and in the address bar, type http://127.0.0.1:5000/template And press Enter.
[Firefox] Highlight the text.	We got the output of the HTML page. So we have rendered the HTML code without hardcoding it inside the python file.
Only narration	Now switch to the hello_flask.py file We can pass the variables as a parameter to the render_template method. Let us see how we can do this.
def template_ex(): fname = 'Tutorial' return render_template('sample_template.html', firstname = fname)	Update the template_ex method as shown here.
[Text Editor] highlight fname = ‘Tutorial’	I have declared a variable called fname here and assigned the value Tutorial to it.
[Text Editor] Highlight return render_template('sample_template.html', firstname = fname)	Then I have passed this variable fname to the render_template method. Now the value of the variable fname can be accessed via the variable firstname in the HTML file.
Press Ctrl + S keys	Let’s save the file.
[Text Editor] In sample_template.html Highlight Spoken	And switch to sample_template.html file. Here, we have explicitly mentioned Spoken as firstname. We will use jinja to interact the HTML file with the python file.
Slide 9: Jinja	Jinja is a powerful templating language. It allows generating HTML on the fly based on the request. It supports control structures such as if-statements and for-loops. Most importantly, it enables inheritance of HTML code.
Modify the body as <h1>The firstname value is {{ firstname }}</h1> (within double curly braces firstname)	Switch to sample_template.html file. To access a variable in Jinja, we have to write it within double curly braces. So replace the word Spoken with within-double curly braces, firstname.
Press Ctrl + S	Save the file.
[Terminal] Type $ python3 -m flask run [Enter]	And switch to the terminal. Stop the running server and start the server once again.
Type http://127.0.0.1:5000 And press Enter. Highlight Tutorial.	Then switch to the browser and refresh the page. Observe that we get Tutorial. That means we have successfully passed the variable from python to HTML.
[Text Editor] hello_flask.py def my_form(): if request.method == 'POST': firstname = request.form.get('firstname') lastname = request.form.get('lastname') return render_template('form1.html', fname=firstname, lname=lastname) return render_template('form2.html')	Once again, switch to the hello_flask.py file and update the form route as shown.
Press Ctrl + S	Save this file.
Only narration	Now we have to create two HTML files form1.html and form2.html.
Terminal Press Ctrl + C	Switch to the terminal and stop the server.
[Terminal] atom templates/form1.html templates/form2.html [Enter]	Now open form1.html and form2.html in a text editor.
[Text Editor] Show form1.html <!DOCTYPE html> <html> <head> <title> Hello </title> </head> <body> <h1>The firstname value is: {{ fname }}</h1> <h1>The lastname value is: {{ lname }}</h1> </body> </html>	In form1.html, add the following piece of code. This code will simply display the firstname and lastname.
Press Ctrl + S	Save the file.
[Text Editor] Show form2.html <!DOCTYPE html> <html> <head> <title> Hello </title> </head> <body> <form method="POST"> Firstname: <input type="text" name="firstname"><br> Lastname: <input type="text" name="lastname"><br> <input type="submit" value="Submit"><br> </form> </body> </html>	In form2.html, add the following piece of code. This code will display a form to receive firstname and lastname.
Press Ctrl + S	Save the file.
[Terminal] Type python3 -m flask run	Switch to the terminal. And run the server again.
[Browser] Type http://127.0.0.1:5000/form And press Enter.	Then switch to the browser. In the address bar, replace template with form and press Enter.
[Browser] Firstname : Spoken Lastname: Tutorial [Submit]	Enter the first name as Spoken. And last name as Tutorial. Then click on the Submit button.
[Browser] Highlight the text on screen.	We got the output as desired.
[Terminal] Press Ctrl + C Type deactivate and press Enter	Switch back to the terminal. Let’s stop the server. And deactivate the virtual environment.
Only narration	This brings us to the end of this tutorial. Let us summarise.
Slide 8: Summary	In this tutorial, we learnt about- Templating in Flask to write clean code. Using variables in the jinja2 templating language. The View part of MVC.
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

Nancyvarkey, Pravin1389, SiddharthaSarkar

Difference between revisions of "Python-Flask/C2/Introduction-to-Flask-Templates/English"

Latest revision as of 17:27, 27 August 2019

Contributors and Content Editors

Navigation menu

Personal tools

Namespaces

Variants

Views

Actions

Search

Navigation

Tools

@@ Line 7: / Line 7: @@
 {| border=1
 |-
-| | '''Visual Cue'''
+|| '''Visual Cue'''
-| | '''Narration'''
+|| '''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>
+|| Welcome to the Spoken Tutorial on '''Introduction to Flask templates'''.
-|- style="border:1pt solid #000000;padding:0.176cm;"
+|-
-| style="color:#000000;" | '''Slide 2: Learning Objectives'''
+|| '''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>
+|| In this tutorial, we will learn to
-* <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>
+* Use '''templates''' in '''Flask'''.
+* Use '''variables''' inside '''templates'''.
+* Gain insight about the '''View''' part of '''MVC'''.
-|- style="border:1pt solid #000000;padding:0.176cm;"
+|-
-||
+||'''Slides 3: System Requirements'''
+|| To record this tutorial, I’m  using
-<div style="color:#000000;">'''Slides 3: System Requirements'''</div>
+* '''Ubuntu Linux 16.04''' '''OS'''
-|| <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>
+* '''Python''' '''3.5.2'''
-* <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>
+* '''Atom text editor 1.22.1 '''and
-* <div style="color:#000000;"><span style="background-color:transparent;">'''Atom text editor 1.22.1 '''</span><span style="background-color:transparent;">and</span></div>
+* '''Firefox Web Browser'''
-* <div style="color:#000000;">'''Firefox Web Browser'''</div>
+However, you may use any other '''editor''' or '''browser''' of your choice.
+|-
+|| '''Slide 5: Pre-requisites'''
+|| To follow this tutorial, you should have working knowledge of
+* '''Linux commands'''
+* '''Python programming language '''and
+* '''HTML syntax'''
+If not, then please go through the corresponding tutorials on this website.
+|-
+|| '''Slide 6: MVC Architecture'''
+|| Let us begin with the concept of '''MVC architecture'''.
+'''MVC paradigm '''separates a '''web app''' into three interlinked components.
+* '''Model'''
+* '''View '''and
+* '''Controller'''.
+|-
+||'''Slide 7: MVC Architecture (Model)'''
+||
+* '''Model '''is used to represent the '''application data'''.
+* We will talk more about it once we introduce '''database '''related things.
-<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;"
+||'''Slide 8: MVC Architecture (View)'''
-|| <div style="color:#000000;">'''Slide 5:'''</div>
+||
+* '''View '''is the presentation layer of '''MVC'''.
+* The appearance of the '''app''' is taken care of by the '''View '''component.
+|-
+||'''Slide 9: MVC Architecture (Controller)'''
+||
+* '''Controller '''is responsible for directing the '''execution flow''' of the '''app'''.
+* Once the '''requests '''are sent to the '''server,'''
+** the '''controller '''code processes the '''request'''
+** and sends back the '''response'''.
+|-
+||'''Slide 11: MVC Architecture'''
+||
+* The '''templates '''are part of the '''View '''part of '''MVC'''.
+* Loosely speaking, '''templates''' are '''HTML '''pages that can be inherited.
+* We need a '''template engine '''for handling '''templates'''.
+|-
+||'''Slide 6''': '''Templates'''
+||
+* So far we have simply returned '''HTML''' code from the '''view functions'''.
+* By using '''templates,''' one can return an '''HTML''' file from the '''view functions'''.
+|-
+||'''Slide 7''': '''Templates'''
+||
+* One '''HTML file''' can inherit '''HTML''' code from another file with the help of '''templates'''.
+* For example, a typical '''website''' has some '''logo''', '''header,''' etc. common in all pages.
-<div style="color:#000000;">'''Pre-requisites'''</div>
+|-
+||'''Slide 8''': '''Templates'''
+||
+* So one can write a base '''HTML''' '''file''' '''template.'''
+* And other pages can inherit the same base '''HTML''' '''file template'''.
+|-
+||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
-|| <div style="color:#000000;">To follow this tutorial, you should have working knowledge of</div>* <div style="color:#000000;">'''Linux commands'''</div>
+|| Now go to the folder '''project underscore flask''' which we created earlier using '''cd''' '''command.'''
-* <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>
+|| [Terminal]
+$ . flask_venv/bin/activate [Enter]
+|| And activate our '''virtualenv'''.
-<div style="color:#000000;">$ . flask_venv/bin/activate</div>
+Type '''dot space flask_venv slash bin slash activate'''
+And press '''Enter'''.
-<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>
+|| Here onwards, please remember to press the '''Enter''' key after typing each '''command'''.
 |-
-| 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>
+|| [Terminal]
+Type $ atom hello_flask.py
+|| Let’s open the '''hello_flask.py''' file which we created earlier in this series, in any '''text editor'''.
+|-
+|| [Text Editor] hello_flask.py
-<div style="color:#000000;">Type</div>
+Highlight HTML part in my_form().
+|| Observe that the '''my_form() function''' returns '''raw HTML'''.
-<div style="color:#000000;">$ atom hello_flask.py</div>
+Now we will demonstrate how we can avoid returning raw '''HTML''' '''code'''.
-| 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>
+For that we have to create our '''HTML template''' files in a separate folder called '''templates'''.
+|-
+|| [Terminal]
-<div style="color:#000000;">Highlight HTML part in my_form().</div>
+mkdir templates [Enter]
-|| <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>
+|| Switch to the '''terminal. '''
+And let’s create a '''folder''' named '''templates.'''
-<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>
+Type '''mkdir <space> templates'''.
+|-
+||
+[Editor: sample_template.html] <br>
+Type
-<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]
-Type
-<nowiki>
 <!DOCTYPE html>
@@ Line 221: / Line 146: @@
 </head>
-<body>
+<body><br>
-	<h1>The firstname value is Spoken</h1>
+<nowiki>
+<h1>The firstname value is Spoken</h1>
+</nowiki><br>
 </body>
 </html>
-</nowiki>
-|| <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>
+|| Let us write a simple '''HTML''' code to print the first name in a new file '''sample_template.html '''
-<div style="color:#000000;">Type the code as shown here.</div>
+Type the code as shown here.
+|-
+|| Press Ctrl + S
+|| And save the file.
+|-
+|| Only Narration
+|| Now let us render this '''HTML''' file via '''python flask app'''.
+For this demonstration, let us define a new '''route''' in our '''hello_flask''' file.
+|-
+|| Switch to '''hello_flask.py''' in the '''text editor'''.
+|| Switch to the file '''hello_flask.py''' in the '''text editor'''.
+|-
+|| [Editor: hello_flask.py]
-|- style="border:1pt solid #000000;padding:0.176cm;"
+@app.route('/template')
-| 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>
+def template_ex():
-<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>
+return render_template('sample_template.html')
-|- style="border:1pt solid #000000;padding:0.176cm;"
+|| In the '''hello_flask.py''' file, before the last '''if condition''', type the code as shown here.
-|| <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>
+|-
+|| Highlight: render_template('sample_template.html')
+|| Inside this '''route''' we have used the '''function render_template''' provided by '''Flask'''.
-<div style="color:#000000;">@app.route('/template')</div>
+This '''function''' is used to render an '''HTML''' '''template file'''.
-<div style="color:#000000;">def template_ex():</div>
+Here we pass '''sample_template.html''' as an '''argument''' to the '''render_template function'''.
-<span style="background-color:transparent;color:#000000;">return render_template('sample_template.html')</span>
+So, '''Flask''' will look for the file '''sample_template dot html''' inside the '''templates folder'''.
-|| <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>
+|-
+|| [Text Editor] Add , render_template
+from flask import Flask, request, render_template
+|| In the 1st line, we will import the '''method render_template.'''
+|-
+|| Press Ctrl + S keys
+|| And then save the file
+|-
+|| [Terminal]
+|| Now switch to the '''terminal'''.
+|-
+|| [Terminal]
+Type
+$ export FLASK_APP=hello_flask.py
+|| And type  '''export <space> FLASK_APP <equal to > hello underscore flask dot py'''
+|-
+|| [Terminal]
-|- style="border:1pt solid #000000;padding:0.176cm;"
+Type $ python3 -m flask run [Enter]
-| style="color:#000000;" | Highlight: render_template('sample_template.html')
+|| Now run the '''server.'''
-|| <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>
+|-
+|| [Firefox]
+Type http://127.0.0.1:5000/template
+And press Enter.
+|| Then, open a '''web browser''' and in the '''address bar''', type
-<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>
+'''http://127.0.0.1:5000/template'''
+And press '''Enter'''.
+|-
+|| [Firefox] Highlight the text.
+|| We got the output of the '''HTML page'''.
-<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>
+So we have rendered the '''HTML code''' without hardcoding it inside the '''python''' file.
+|-
+|| Only narration
+|| Now switch to the '''hello_flask.py''' file
+We can pass the '''variables''' as a parameter to the '''render_template method.'''
-<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>
+Let us see how we can do this.
-|- style="border:1pt solid #000000;padding:0.176cm;"
+|-
-|| <div style="color:#000000;">[Text Editor] Add , render_template</div>
+|| def template_ex():
+fname = 'Tutorial'
-<div style="color:#000000;">from flask import Flask, request, render_template</div>
+return render_template('sample_template.html', firstname = fname)
-|| <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>
+|| Update the '''template_ex method''' as shown here.
-|- style="border:1pt solid #000000;padding:0.176cm;"
+|-
-| style="color:#000000;" | Press Ctrl + S keys
+|| [Text Editor] highlight fname = ‘Tutorial’
-| style="color:#000000;" | And then save the file
+|| I have declared a '''variable''' called '''fname''' here and assigned the value '''Tutorial''' to it.
-|- style="border:1pt solid #000000;padding:0.176cm;"
+|-
-| style="color:#000000;" | [Terminal]
+|| [Text Editor] Highlight
-|| <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>
+return render_template('sample_template.html', firstname = fname)
+|| Then I have passed this '''variable fname''' to the '''render_template''' '''method'''.
-<div style="color:#000000;">$ export FLASK_APP=hello_flask.py</div>
+Now the value of the '''variable fname''' can be accessed via the '''variable firstname''' in the '''HTML''' file.
-|| <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;"
+|| Press Ctrl + S keys
-|| <div style="color:#000000;">[Terminal]</div>
+|| Let’s save the file.
+|-
+|| [Text Editor]
+In sample_template.html
-<div style="color:#000000;">Type $ python3 -m flask run [Enter]</div>
+Highlight Spoken
-|| <span style="background-color:transparent;color:#000000;">Now run the </span><span style="background-color:transparent;color:#000000;">'''server.'''</span>
+|| And switch to '''sample_template.html''' file.
-|- style="border:1pt solid #000000;padding:0.176cm;"
-|| <div style="color:#000000;">[Firefox]</div>
+Here, we have explicitly mentioned '''Spoken '''as  '''firstname'''.
-<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>
+We will use '''jinja''' to interact the '''HTML''' file with the '''python''' file.
+|-
+|| '''Slide 9''': '''Jinja'''
+||
+* '''Jinja''' is a powerful '''templating''' '''language'''.
+* It allows generating '''HTML''' on the fly based on the '''request'''.
+* It supports '''control structures''' such as '''if-statements''' and '''for-loops'''.
+* Most importantly, it enables '''inheritance''' of '''HTML''' code.
+|-
+||Modify the body as
-<div style="color:#000000;">And press Enter.</div>
+<nowiki><h1>The firstname value is {{ firstname }}</h1></nowiki>
-|| <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>
+('''within double curly braces firstname''')
+|| Switch to '''sample_template.html''' file.
+To access a '''variable''' in '''Jinja,''' we have to write it within '''double''' '''curly braces'''.
-<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>
+So replace the word '''Spoken '''with '''within-double curly braces, firstname.'''
-|- style="border:1pt solid #000000;padding:0.176cm;"
+|-
-| style="color:#000000;" | [Firefox] Highlight the text.
+|| Press Ctrl + S
-|| <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>
+|| Save the file.
+|-
+|| [Terminal]
+Type $ python3 -m flask run
+[Enter]
+|| And switch to the '''terminal'''.
-<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>
+Stop the running '''server '''and '''start''' the '''server''' once again.
-|- style="border:1pt solid #000000;padding:0.176cm;"
+|-
-| style="color:#000000;" | Only narration
+|| Type http://127.0.0.1:5000
-|| <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>
+And press Enter.
-<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>
+Highlight '''Tutorial'''.
+|| Then switch to the '''browser''' and refresh the page.
+Observe that we get '''Tutorial'''.
-<div style="color:#000000;">Let us see how we can do this.</div>
+That means we have successfully passed the '''variable''' from '''python''' to '''HTML'''.
-|- style="border:1pt solid #000000;padding:0.176cm;"
+|-
-|| <div style="color:#000000;">def template_ex():</div>
+|| [Text Editor] hello_flask.py
-<div style="color:#000000;">fname = 'Tutorial'</div>
+ def my_form():
-<div style="color:#000000;">return render_template('sample_template.html', firstname = fname)</div>
+    if request.method == 'POST':
-|| <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>
+        firstname = request.form.get('firstname')
-<span style="background-color:transparent;color:#000000;">return render_template('sample_template.html', firstname = fname)</span>
+        lastname = request.form.get('lastname')
-|| <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>
+    return render_template('form1.html', fname=firstname, lname=lastname)
-<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>
+    return render_template('form2.html')
-|- style="border:1pt solid #000000;padding:0.176cm;"
+|| Once again, switch to the '''hello_flask.py''' file and update the '''form''' '''route''' as shown.
-| style="color:#000000;" | Press Ctrl + S keys
+|-
-| style="color:#000000;" | Let’s save the file.
+|| Press '''Ctrl + S'''
-|- style="border:1pt solid #000000;padding:0.176cm;"
+|| Save this file.
-|| <div style="color:#000000;">[Text Editor]</div>
+|-
+|| Only narration
+|| Now we have to create two '''HTML''' files '''form1.html''' and '''form2.html'''.
+|-
+|| Terminal
-<div style="color:#000000;">In sample_template.html</div>
+Press Ctrl + C
+|| Switch to the '''terminal''' and stop the '''server'''.
+|-
+|| [Terminal]
+atom templates/form1.html templates/form2.html  [Enter]
+|| Now open '''form1.html '''and '''form2.html''' in a '''text editor'''.
+|-
+|| [Text Editor] Show form1.html
-<div style="color:#000000;">Highlight Spoken</div>
+<!DOCTYPE html>
-|| <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>
+<html>
-<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>
+<head>
+<br>
+<nowiki>    <title> Hello </title>      </nowiki>
+<br>
+</head>
+<body>
-<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>
+<nowiki>    <h1>The firstname value is: {{ fname }}</h1>     </nowiki>
-|- style="border:1pt solid #000000;padding:0.176cm;"
+<br>
-|| <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>
+<nowiki>    <h1>The lastname value is: {{ lname }}</h1>     </nowiki>
-|| * <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>
+</body>
-|- style="border:1pt solid #000000;padding:0.176cm;"
+</html>
-||
-<div style="color:#000000;">Modify the body as</div>
+|| In '''form1.html,''' add the following piece of code.
+This code will simply display the '''firstname''' and '''lastname'''.
+|-
+|| Press '''Ctrl + S'''
+|| Save the file.
+|-
+|| [Text Editor] Show form2.html
-<div style="color:#000000;"><h1>The firstname value is {{ firstname }}</h1></div>
+<!DOCTYPE html>
+<html>
-<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>
+<head>
-|| <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>
+<br>
+<nowiki>    <title> Hello </title>      </nowiki>
+<br>
+</head>
+<body>
-<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>
+<form method="POST">
+<nowiki>    Firstname: <input type="text" name="firstname"><br></nowiki>
-<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>
+<nowiki>    Lastname: <input type="text" name="lastname"><br></nowiki>
-|- 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>
+<nowiki>    <input type="submit" value="Submit"><br></nowiki>
+</form>
-<div style="color:#000000;">$ python3 -m flask run</div>
+</body>
+</html>
+|| In '''form2.html''', add the following piece of code.
-<div style="color:#000000;">[Enter]</div>
+This code will  display a form to receive '''firstname''' and '''lastname'''.
-|| <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>
+|-
+|| Press '''Ctrl + S'''
+|| Save the file.
+|-
+|| [Terminal]
+Type python3 -m flask run
+|| Switch to the '''terminal'''.
+And run the '''server '''again.
+|-
+|| [Browser]
-<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>
+Type http://127.0.0.1:5000/form
-|- 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]
+And press Enter.
+|| Then switch to the '''browser'''.
-<div style="color:#000000;">And press Enter.</div>
+In the '''address bar''', replace '''template''' with '''form''' and press '''Enter'''.
+|-
+|| [Browser]
+Firstname : Spoken
+Lastname: Tutorial [Submit]
-<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>
+|| Enter the '''first name''' as '''Spoken.'''
-|| <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>
+And '''last name''' as '''Tutorial.'''
-<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>
+Then click on the '''Submit '''button.
+|-
+|| [Browser] Highlight the text on screen.
+|| We got the output as desired.
+|-
+|| [Terminal]
+Press '''Ctrl + C'''
-<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>
+Type '''deactivate''' and press '''Enter'''
-|- style="border:1pt solid #000000;padding:0.176cm;"
+|| Switch back to the '''terminal'''.
-|| <div style="color:#000000;">[Text Editor] hello_flask.py</div>
+Let’s stop the '''server'''.
-<div style="color:#000000;">&nbsp;def my_form():</div>
+And '''deactivate''' the '''virtual environment'''.
+|-
+|| Only narration
+|| This brings us to the end of this tutorial.
-<div style="color:#000000;">&nbsp;&nbsp;&nbsp;&nbsp;if request.method == 'POST':</div>
+Let us summarise.
+|-
+|| Slide 8: '''Summary'''
+|| In this tutorial, we learnt about-
-<div style="color:#000000;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;firstname = request.form.get('firstname')</div>
+* '''Templating''' in '''Flask''' to write clean code.
+* Using '''variables''' in the '''jinja2 templating language.'''
-<div style="color:#000000;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;lastname = request.form.get('lastname')</div>
+* The '''View''' part of '''MVC'''.
-<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&nbsp; form1.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;"><h1>The firstname value is: {{ fname }}</h1></span><span style="background-color:#ffffff;color:#000000;">&nbsp; &nbsp; </span><span style="background-color:#ffffff;color:#000000;"><h1>The lastname value is: {{ lname }}</h1></body></html></span>
-|| <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>
+|-
+|| Slide: About Spoken Tutorial project
+|| The video at the following link summarises the Spoken Tutorial project.
+Please download and watch it.
 |-
-| 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;" |
+|| Slide: Spoken Tutorial workshops
+|| The '''Spoken Tutorial Project''' team conducts workshops and gives certificates.
-<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>
+For more details, please write to us.
 |-
-| 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:
+|| 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.
+|| 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
+|| 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>
+|| Spoken Tutorial Project is funded by NMEICT, MHRD, Government of India.
+More information on this mission is available at this link.
-<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>
+|| This is Siddhartha Sarkar signing off.
-<div style="color:#000000;">Thanks for watching.</div>
+Thanks for watching.
 |-
 |}