https://script.spoken-tutorial.org/api.php?action=feedcontributions&feedformat=atom&user=SiddharthaSarkar 2026-04-10T20:50:10Z User contributions MediaWiki 1.23.17 https://script.spoken-tutorial.org/index.php/Python-Flask/C2/Introduction-to-Flask-Templates/English 2019-08-11T20:36:51Z

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

SiddharthaSarkar https://script.spoken-tutorial.org/index.php/Python-Flask/C2/Introduction-to-Flask-Templates/English 2019-08-11T19:21:23Z

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

SiddharthaSarkar https://script.spoken-tutorial.org/index.php/Python-Flask/C2/Request-Response-Cycle-in-a-Flask-Web-App/English 2019-01-21T11:59:20Z

<p>SiddharthaSarkar: Script synced with video.</p> <hr /> <div>'''Title of script: The Request-Response Cycle in a Flask web app'''<br /> <br /> '''Author: Siddhartha Sarkar'''<br /> <br /> Keywords: ​Video tutorial, Python Flask, view functions, request object, HTTP response, debugging.<br /> <br /> <br /> <br /> {| class=&quot;wikitable&quot; style=&quot;border-spacing:0;width:17.489cm;&quot;<br /> |- style=&quot;border:1pt solid #000000;padding:0.176cm;&quot;<br /> | align=center| '''Visual Cue'''<br /> | align=center| '''Narration'''<br /> |- style=&quot;border:1pt solid #000000;padding:0.176cm;&quot;<br /> || '''Slide 1: The Request-Response Cycle in a Flask web app'''<br /> || Welcome to the Spoken Tutorial on''' the request-response cycle in a Flask web app.'''<br /> |- style=&quot;border:1pt solid #000000;padding:0.176cm;&quot;<br /> || '''Slide 2: Learning Objectives'''<br /> || In this tutorial, we will learn<br /> * &lt;div style=&quot;margin-left:1.27cm;margin-right:0cm;&quot;&gt;About the '''request-response''' cycle in '''Flask'''.&lt;/div&gt;<br /> * &lt;div style=&quot;margin-left:1.27cm;margin-right:0cm;&quot;&gt;Different '''attributes''' of the '''request object'''.&lt;/div&gt;<br /> * &lt;div style=&quot;margin-left:1.27cm;margin-right:0cm;&quot;&gt;Different '''types''' of '''request data'''.&lt;/div&gt;<br /> * &lt;div style=&quot;margin-left:1.27cm;margin-right:0cm;&quot;&gt;Several '''HTTP''' '''response codes'''.&lt;/div&gt;<br /> <br /> <br /> |- style=&quot;border:1pt solid #000000;padding:0.176cm;&quot;<br /> || '''Slides 3: System Requirements'''<br /> || To record this tutorial, I’m using<br /> * &lt;div style=&quot;margin-left:1.27cm;margin-right:0cm;&quot;&gt;'''Ubuntu Linux 16.04''' '''OS'''&lt;/div&gt;<br /> * &lt;div style=&quot;margin-left:1.27cm;margin-right:0cm;&quot;&gt;'''Python''' '''3.5.2'''&lt;/div&gt;<br /> * &lt;div style=&quot;margin-left:1.27cm;margin-right:0cm;&quot;&gt;'''Atom text editor 1.22.1 '''and''' '''&lt;/div&gt;<br /> * &lt;div style=&quot;margin-left:1.27cm;margin-right:0cm;&quot;&gt;'''Firefox web browser'''&lt;/div&gt;<br /> <br /> <br /> <br /> <br /> <br /> You can use any text editor and web browser of your choice.<br /> |- style=&quot;border:1pt solid #000000;padding:0.176cm;&quot;<br /> || '''Slide 5:'''<br /> <br /> '''Pre-requisites'''<br /> <br /> <br /> <br /> || To follow this tutorial, you should have working knowledge of* &lt;div style=&quot;margin-left:1.27cm;margin-right:0cm;&quot;&gt;'''Linux commands'''&lt;/div&gt;<br /> <br /> * &lt;div style=&quot;margin-left:1.27cm;margin-right:0cm;&quot;&gt;'''Python programming '''and &lt;/div&gt;<br /> * &lt;div style=&quot;margin-left:1.27cm;margin-right:0cm;&quot;&gt;'''HTML '''syntax&lt;/div&gt;<br /> <br /> <br /> <br /> <br /> <br /> If not, then please go through the corresponding tutorials on this website. http://spoken-tutorial.org<br /> |- style=&quot;border:1pt solid #000000;padding:0.176cm;&quot;<br /> || '''Slide 6''': '''The request object'''<br /> || We already said that the '''Flask app''' instance has to process the received '''request'''.<br /> <br /> <br /> For processing, the '''app '''instance needs to have access to certain information.<br /> |- style=&quot;border:1pt solid #000000;padding:0.176cm;&quot;<br /> || '''Slide 6''': '''The request object'''<br /> || A few '''objects '''are provided to the '''view functions,''' where the processing takes place.<br /> <br /> <br /> One of these '''objects '''is the '''request object'''.<br /> <br /> <br /> This '''object '''encapsulates the contents of the '''HTTP request '''sent by the '''client'''.<br /> |- style=&quot;border:1pt solid #000000;padding:0.176cm;&quot;<br /> || '''Slide 7''': '''The request object'''<br /> || The incoming '''request '''data can be of several forms. For example<br /> * &lt;div style=&quot;margin-left:1.27cm;margin-right:0cm;&quot;&gt;'''Query arguments''' sent as part of the '''URL '''in the '''browser'''.&lt;/div&gt;<br /> * &lt;div style=&quot;margin-left:1.27cm;margin-right:0cm;&quot;&gt;'''Form data''' collected from '''web forms.'''&lt;/div&gt;<br /> <br /> <br /> We will discuss them in detail in this tutorial.<br /> |-<br /> | style=&quot;background-color:#ffffff;border-top:1pt solid #000000;border-bottom:0.5pt solid #000000;border-left:0.5pt solid #000000;border-right:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;&quot; | Open a Terminal window<br /> <br /> <br /> <br /> | style=&quot;background-color:#ffffff;border-top:1pt solid #000000;border-bottom:0.5pt solid #000000;border-left:0.5pt solid #000000;border-right:0.5pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;&quot; | Let us open the '''Terminal''' by pressing '''Ctrl''', '''Alt''' and '''T''' keys simultaneously on the keyboard.<br /> |- style=&quot;background-color:#ffffff;border:0.5pt solid #000000;padding:0.106cm;&quot;<br /> || [Terminal]<br /> <br /> Type cd project_flask &amp; Press Enter<br /> || Now go to the folder '''project underscore flask''' which we created earlier using '''cd''' '''command.'''<br /> |- style=&quot;border:1pt solid #000000;padding:0.176cm;&quot;<br /> || [Terminal]<br /> <br /> <br /> $ . flask_venv/bin/activate<br /> <br /> <br /> [Enter]<br /> || Let us activate our '''virtualenv'''.<br /> <br /> <br /> Type the command<br /> <br /> <br /> '''Dot space flask_venv slash bin slash activate'''<br /> <br /> And press '''Enter'''.<br /> |- style=&quot;border:1pt solid #000000;padding:0.176cm;&quot;<br /> || [Terminal]<br /> <br /> Highlight (flask_venv)<br /> || Notice that we are now inside the '''virtual environment flask_venv.'''<br /> |- style=&quot;border:1pt solid #000000;padding:0.176cm;&quot;<br /> || [Terminal]<br /> <br /> Type<br /> <br /> $ atom hello_flask.py<br /> || Let’s open the '''hello_flask.py''' file in a text editor, which we created earlier in this series..<br /> |- style=&quot;border:1pt solid #000000;padding:0.176cm;&quot;<br /> || [Text Editor]<br /> <br /> <br /> Type “'', request''”<br /> <br /> <br /> <br /> || Let’s look at how the '''request object''' is made available in a '''view function'''.<br /> <br /> <br /> We will import the '''request object''' from the '''flask library.'''<br /> <br /> <br /> In the line '''from flask import Flask, '''we will add '''comma space request'''<br /> |- style=&quot;border:1pt solid #000000;padding:0.176cm;&quot;<br /> || [Text editor]<br /> <br /> Type in hello_world():<br /> <br /> (As the first line)<br /> <br /> <br /> print(&quot;Request method is &quot; + request.method)<br /> || The '''request object''' has many '''attributes'''.<br /> <br /> <br /> Let us access '''request''' inside the '''hello_world view function.'''<br /> <br /> <br /> Next to the '''function''' definition, type the code as shown.<br /> <br /> <br /> <br /> |- style=&quot;border:1pt solid #000000;padding:0.176cm;&quot;<br /> || Highlight <br /> <br /> <br /> print(&quot;Request method is &quot; + request.method)<br /> || This will print the '''method attribute''' of the '''request object.'''<br /> <br /> <br /> <br /> |- style=&quot;border:1pt solid #000000;padding:0.176cm;&quot;<br /> || Press Ctrl+S<br /> || Save the file.<br /> |- style=&quot;border:1pt solid #000000;padding:0.176cm;&quot;<br /> || [Terminal]<br /> <br /> Type <br /> <br /> <br /> $ export FLASK_APP=hello_flask.py<br /> <br /> <br /> <br /> || Let us start the '''server''' to see the changes.<br /> <br /> <br /> Switch to the terminal.<br /> <br /> <br /> Type '''export &lt;space&gt; FLASK_APP &lt;equal to &gt; hello underscore flask dot py'''<br /> <br /> <br /> And press '''Enter'''.<br /> |- style=&quot;border:1pt solid #000000;padding:0.176cm;&quot;<br /> || [Terminal]<br /> <br /> Type<br /> <br /> <br /> $ python3 -m flask run<br /> <br /> [Enter]<br /> || Now type<br /> <br /> '''python3 &lt;space&gt; hyphen m &lt;space&gt; flask &lt;space&gt; run'''<br /> <br /> <br /> And press '''Enter'''.<br /> |- style=&quot;border:1pt solid #000000;padding:0.176cm;&quot;<br /> || [Firefox]<br /> <br /> Type <br /> <br /> [http://127.0.0.1:5000/ http://localhost:5000/]<br /> <br /> And press Enter.<br /> || Now, open a web browser.<br /> <br /> <br /> In the '''address bar,''' type [http://127.0.0.1:5000/ http://localhost:5000] and press '''Enter'''.<br /> |- style=&quot;border:1pt solid #000000;padding:0.176cm;&quot;<br /> || Highlight the output<br /> || We got the output as '''Hello World.'''<br /> |- style=&quot;border:1pt solid #000000;padding:0.176cm;&quot;<br /> || [Terminal]<br /> || Switch to the '''terminal '''once again.<br /> |- style=&quot;border:1pt solid #000000;padding:0.176cm;&quot;<br /> || Highlight “Request method is Get”<br /> || Observe that the current '''request method '''is “'''GET'''”.<br /> <br /> <br /> The '''request object''' is indeed accessible inside the '''view functions'''.<br /> <br /> <br /> The '''GET HTTP method''' is used to retrieve '''data''' from the '''web server'''.<br /> <br /> <br /> It specifies the '''parameters''' in the '''URL''' of the '''request '''itself.<br /> |- style=&quot;border:1pt solid #000000;padding:0.176cm;&quot;<br /> || Only narration.<br /> || Now let us see how one can send '''data''' to the '''server '''using the '''request object'''.<br /> <br /> <br /> There are a number of ways to do this.<br /> <br /> <br /> The simplest one is via '''Query Arguments'''.<br /> |- style=&quot;border:1pt solid #000000;padding:0.176cm;&quot;<br /> || [Text Editor]<br /> <br /> Type<br /> <br /> <br /> @app.route('/query')<br /> <br /> def query_args():<br /> <br /> (Tab)framework = request.args['framework']<br /> <br /> &lt;nowiki&gt;(Tab)return '''&lt;h1&gt;The framework value is: {}&lt;/h1&gt;'''.format(framework)&lt;/nowiki&gt;<br /> || Let us define a new '''route''' to explain this. <br /> <br /> <br /> Switch back to the '''editor'''.<br /> <br /> <br /> Before the '''if condition''', type the code as shown here.<br /> <br /> <br /> We will call it as '''query'''.<br /> |- style=&quot;border:1pt solid #000000;padding:0.176cm;&quot;<br /> || Press Ctrl+S<br /> || Save the file.<br /> |- style=&quot;border:1pt solid #000000;padding:0.176cm;&quot;<br /> || Highlight <br /> <br /> <br /> &lt;nowiki&gt;&lt;h1&gt;The framework value is: {}&lt;/h1&gt;&lt;/nowiki&gt;<br /> || Here we have written the '''statement''' inside the '''HTML’s h1 heading tag'''. <br /> |- style=&quot;border:1pt solid #000000;padding:0.176cm;&quot;<br /> || Highlight '''args''' in<br /> <br /> '''framework = request.args['framework']'''<br /> <br /> <br /> <br /> || Here we have an '''attribute''' called '''args''' in the '''request object'''.<br /> <br /> <br /> This is a '''dictionary object'''.<br /> <br /> <br /> It has the '''parsed''' contents of the '''query string '''in the '''URL'''.<br /> <br /> <br /> We will use this '''attribute '''to retrieve the '''data '''sent as '''query arguments.'''<br /> |- style=&quot;border:1pt solid #000000;padding:0.176cm;&quot;<br /> || [Terminal]<br /> || Switch to the '''terminal'''.<br /> |- style=&quot;border:1pt solid #000000;padding:0.176cm;&quot;<br /> || Press Ctrl+C<br /> || Press '''Ctrl''' and '''C''' keys to stop the '''server'''.<br /> |- style=&quot;border:1pt solid #000000;padding:0.176cm;&quot;<br /> || Type<br /> <br /> <br /> $ python3 -m flask run [Enter]<br /> || Press the '''up arrow''' key to get the '''command''' to run the '''flask application.'''<br /> <br /> <br /> And press '''Enter'''.<br /> |- style=&quot;border:1pt solid #000000;padding:0.176cm;&quot;<br /> || [Firefox]<br /> || Switch to the '''web browser. '''<br /> |- style=&quot;border:1pt solid #000000;padding:0.176cm;&quot;<br /> || Type <br /> <br /> [http://127.0.0.1:5000/ http://localhost:5000/query]<br /> <br /> And press Enter.<br /> || In the '''address bar''', next to '''5000''' type '''slash query'''<br /> <br /> and press '''Enter'''.<br /> |- style=&quot;border:1pt solid #000000;padding:0.176cm;&quot;<br /> || Highlight the error<br /> || We get a “'''Bad request'''” error.<br /> |- style=&quot;border:1pt solid #000000;padding:0.176cm;&quot;<br /> || [Terminal]<br /> || Switch back to the '''terminal'''.<br /> |- style=&quot;border:1pt solid #000000;padding:0.176cm;&quot;<br /> || Highlight<br /> <br /> <br /> &quot;GET /query HTTP/1.1&quot; 400 -<br /> <br /> <br /> <br /> || Notice that this '''response '''has '''HTTP code 400'''.<br /> <br /> <br /> This is one of the common errors you will encounter while developing '''Flask applications'''.<br /> <br /> <br /> '''400 code''' indicates that the '''server''' could not understand the '''request''' due to invalid '''syntax'''.<br /> |- style=&quot;border:1pt solid #000000;padding:0.176cm;&quot;<br /> || Only narration.<br /> || So now we have to find out where this '''syntax''' issue has occurred.<br /> <br /> <br /> We will scan the code to spot the error.<br /> <br /> <br /> This is called '''debugging'''.<br /> |- style=&quot;border:1pt solid #000000;padding:0.176cm;&quot;<br /> || [Text Editor]<br /> <br /> <br /> Press Ctrl+C<br /> <br /> || For this, we have to start the '''server''' in the '''debug mode'''.<br /> <br /> <br /> Before that, we need to stop the current '''server''' by pressing '''Ctrl''' and '''C '''keys together.<br /> |- style=&quot;border:1pt solid #000000;padding:0.176cm;&quot;<br /> || [Terminal]<br /> <br /> Type <br /> <br /> $ export FLASK_ENV=development<br /> || Then type '''export &lt;space&gt;FLASK &lt;underscore&gt; ENV &lt;equal to&gt; development'''<br /> <br /> <br /> and press '''Enter'''.<br /> |- style=&quot;border:1pt solid #000000;padding:0.176cm;&quot;<br /> || [Terminal]<br /> <br /> Type<br /> <br /> <br /> $ python3 -m flask run<br /> || Now type<br /> <br /> '''python3&lt;space&gt;(hyphen)m&lt;space&gt;flask&lt;space&gt;run'''<br /> <br /> <br /> And press '''Enter'''.<br /> |- style=&quot;border:1pt solid #000000;padding:0.176cm;&quot;<br /> || [Terminal]<br /> <br /> <br /> Highlight'' Debug mode: on''<br /> || Observe that now it says '''debug mode''' is '''on'''.<br /> <br /> <br /> <br /> |- style=&quot;border:1pt solid #000000;padding:0.176cm;&quot;<br /> || [Firefox]<br /> <br /> <br /> Click on the refresh button.<br /> || Go back to the '''browser''' and '''refresh''' the page.<br /> <br /> <br /> Since the '''debug mode''' is active, we have received a '''traceback''' of errors.<br /> <br /> This means that we get the line numbers where the errors have occurred in different files.<br /> |- style=&quot;border:1pt solid #000000;padding:0.176cm;&quot;<br /> || Highlight the different error lines in the traceback of errors.<br /> <br /> <br /> || The '''traceback''' includes the errors from the corresponding '''flask''' files as well.<br /> <br /> This is because an error in one file causes errors in other files as well.<br /> <br /> This is termed as the '''cascading''' '''effect'''.<br /> <br /> We have to look for the error in a file that we have written.<br /> |- style=&quot;border:1pt solid #000000;padding:0.176cm;&quot;<br /> || Highlight<br /> <br /> <br /> framework = request.args['framework']<br /> || Scroll down and search for the error in the file '''hello_flask.py'''<br /> |- style=&quot;border:1pt solid #000000;padding:0.176cm;&quot;<br /> || Highlight<br /> <br /> BadRequestKeyError<br /> <br /> <br /> || We have a '''BadRequestKeyError'''.<br /> <br /> That means that the '''key “framework”''' for the '''dictionary request.args''' does not exist.<br /> <br /> To rectify this, we have to modify that line.<br /> |- style=&quot;border:1pt solid #000000;padding:0.176cm;&quot;<br /> || [Text editor]<br /> <br /> Type<br /> <br /> framework = request.args.get('framework')<br /> || Switch to the '''editor'''.<br /> <br /> Now change the '''line '''as shown.<br /> <br /> <br /> |- style=&quot;border:1pt solid #000000;padding:0.176cm;&quot;<br /> || Press Ctrl+S<br /> || Save the file.<br /> |- style=&quot;border:1pt solid #000000;padding:0.176cm;&quot;<br /> || [Text Editor]<br /> <br /> Highlight<br /> <br /> framework = request.args.get('framework')<br /> || Now even if the '''key''' is not found, '''python''' will handle this properly.<br /> <br /> <br /> That means, instead of causing a '''400 error''', it will return '''None'''.<br /> |- style=&quot;border:1pt solid #000000;padding:0.176cm;&quot;<br /> || [Terminal]<br /> || Switch to the '''terminal.'''<br /> |- style=&quot;border:1pt solid #000000;padding:0.176cm;&quot;<br /> || Press Ctrl+C<br /> || Once again stop the '''server''' by pressing '''Ctrl''' and '''C''' keys together.<br /> |- style=&quot;border:1pt solid #000000;padding:0.176cm;&quot;<br /> || Type python3 -m flask run<br /> || Then run the '''server''' again.<br /> |- style=&quot;border:1pt solid #000000;padding:0.176cm;&quot;<br /> || [Firefox]<br /> || Go back to the '''browser''' and refresh the page.<br /> |- style=&quot;border:1pt solid #000000;padding:0.176cm;&quot;<br /> || Click on the refresh button.<br /> || Now we have the output as expected. <br /> <br /> <br /> The '''framework value''' is '''None'''.<br /> |- style=&quot;border:1pt solid #000000;padding:0.176cm;&quot;<br /> || <br /> || Next, we will send some value for the '''framework '''via the '''URL'''.<br /> |- style=&quot;border:1pt solid #000000;padding:0.176cm;&quot;<br /> || [Firefox]<br /> <br /> <br /> Click on the address bar<br /> || '''args''' gets the part of the '''URL '''after the question mark in the form of a '''python dictionary'''.<br /> |- style=&quot;border:1pt solid #000000;padding:0.176cm;&quot;<br /> || [Firefox]<br /> <br /> <br /> Type [http://127.0.0.1:5000/query?framework=my_flask http://127.0.0.1:5000/query?framework=my_flask]<br /> || In the '''address bar,''' next to the word '''query''' type:<br /> <br /> <br /> '''Question mark framework &lt;equal to&gt; my_flask'''<br /> <br /> And press '''Enter.'''<br /> |- style=&quot;border:1pt solid #000000;padding:0.176cm;&quot;<br /> || Highlight:<br /> <br /> <br /> &lt;nowiki&gt;The framework value is: my_flask&lt;/nowiki&gt;<br /> || So now we have the '''framework attribute''' of the '''dictionary''' set to '''my_flask'''.<br /> <br /> <br /> We got the result as expected.<br /> |- style=&quot;border:1pt solid #000000;padding:0.176cm;&quot;<br /> || '''Slide 8''': '''form attribute'''<br /> || The '''request object''' has one more important '''attribute''' called '''‘form’'''.<br /> <br /> <br /> It can be used to collect '''data''' from the '''user''' using a '''web form'''.<br /> <br /> <br /> And then store the '''data '''as a '''dictionary '''in the '''form attribute'''.<br /> <br /> <br /> Let us look at an example.<br /> |- style=&quot;border:1pt solid #000000;padding:0.176cm;&quot;<br /> || [Text Editor]<br /> <br /> <br /> Type<br /> <br /> <br /> @app.route('/form', methods=['GET', 'POST']) <br /> <br /> <br /> <br /> || We will see how '''form data''' can be sent and received using the '''request object.'''<br /> <br /> <br /> Let us define a new '''route''' called '''form'''.<br /> <br /> <br /> We allow both '''GET''' and '''POST''' as possible '''request''' '''methods'''.<br /> <br /> <br /> Type the code as shown here.<br /> |- style=&quot;border:1pt solid #000000;padding:0.176cm;&quot;<br /> || [Text Editor]<br /> <br /> <br /> Type<br /> <br /> <br /> def my_form():<br /> <br /> if request.method == 'POST':<br /> <br /> firstname = request.form.get('firstname')<br /> <br /> lastname = request.form.get('lastname')<br /> || Inside the '''form route''', define a '''view function''' '''my_form'''()<br /> <br /> <br /> <br /> <br /> <br /> |- style=&quot;border:1pt solid #000000;padding:0.176cm;&quot;<br /> || Highlight:<br /> <br /> <br /> if request.method == 'POST':<br /> <br /> firstname = request.form.get('firstname')<br /> <br /> lastname = request.form.get('lastname')<br /> || <br /> <br /> <br /> <br /> This '''block''' will get executed, if the '''request''' is via '''POST method.'''<br /> |- style=&quot;border:1pt solid #000000;padding:0.176cm;&quot;<br /> || '''Slide 9''': '''POST method'''<br /> || In '''POST request method'''<br /> <br /> * &lt;div style=&quot;margin-left:1.27cm;margin-right:0cm;&quot;&gt;the '''client''' will send '''data''' to the '''server''' using the '''form'''.&lt;/div&gt;<br /> * &lt;div style=&quot;margin-left:1.27cm;margin-right:0cm;&quot;&gt;This is to update the '''server''' with some information&lt;/div&gt;<br /> <br /> |- style=&quot;border:1pt solid #000000;padding:0.176cm;&quot;<br /> || '''Slide 9''': '''POST method'''<br /> || <br /> * &lt;div style=&quot;margin-left:1.27cm;margin-right:0cm;&quot;&gt;For example - you enter your '''username''' and '''password''' while logging in to a website.&lt;/div&gt;<br /> * &lt;div style=&quot;margin-left:1.27cm;margin-right:0cm;&quot;&gt;In contrast, '''GET request method '''is used to get or read some '''data '''from the '''server'''.&lt;/div&gt;<br /> <br /> <br /> |- style=&quot;border:1pt solid #000000;padding:0.176cm;&quot;<br /> || Only narration <br /> <br /> <br /> || Now let us store the '''form''' values into some '''variables'''.<br /> <br /> <br /> We will obtain the entered values from the '''request object''' using the '''form''' '''attribute'''.<br /> |- style=&quot;border:1pt solid #000000;padding:0.176cm;&quot;<br /> || Type<br /> <br /> <br /> &lt;nowiki&gt;html_string1 = '''&lt;h1&gt;The firstname value is: {}&lt;/h1&gt;&lt;/nowiki&gt;<br /> <br /> &lt;nowiki&gt;&lt;h1&gt;The lastname value is: {}&lt;/h1&gt;'''.format(firstname, lastname)&lt;/nowiki&gt;<br /> <br /> <br /> return html_string1<br /> || Inside the '''if condition''' which checks the''' post method, '''type this code.<br /> <br /> <br /> This code will display the '''firstname''' as well as the '''lastname'''.<br /> <br /> <br /> <br /> |- style=&quot;border:1pt solid #000000;padding:0.176cm;&quot;<br /> || [Text Editor]<br /> <br /> <br /> Type<br /> <br /> <br /> html_string2 = '''&lt;form method=&quot;POST&quot;&gt;<br /> <br /> Firstname: &lt;input type=&quot;text&quot; name=&quot;firstname&quot;&gt;&lt;br&gt;<br /> <br /> Lastname: &lt;input type=&quot;text&quot; name=&quot;lastname&quot;&gt;&lt;br&gt;<br /> <br /> &lt;input type=&quot;submit&quot; value=&quot;Submit&quot;&gt;&lt;br&gt;<br /> <br /> &lt;/form&gt;'''<br /> <br /> <br /> return html_string2<br /> || Now outside this''' if condition''', we type this code.<br /> <br /> <br /> <br /> This will simply display a '''web form''' in the output, if the '''request method''' is '''GET.'''<br /> |- style=&quot;border:1pt solid #000000;padding:0.176cm;&quot;<br /> || Press Ctrl + S<br /> || Save the file.<br /> |- style=&quot;border:1pt solid #000000;padding:0.176cm;&quot;<br /> || [Terminal]<br /> || Switch back to the '''terminal'''.<br /> |- style=&quot;border:1pt solid #000000;padding:0.176cm;&quot;<br /> || Press Ctrl+C<br /> || Stop the '''server''' by pressing '''Ctrl''' and '''C''' keys together.<br /> |- style=&quot;border:1pt solid #000000;padding:0.176cm;&quot;<br /> || Type python3 -m flask run<br /> || Then run the '''server''' again.<br /> |- style=&quot;border:1pt solid #000000;padding:0.176cm;&quot;<br /> || [Firefox]<br /> <br /> <br /> Type [http://127.0.0.1:5000/form http://127.0.0.1:5000/form]<br /> <br /> <br /> || Switch to the '''browser'''.<br /> <br /> <br /> In the '''address bar''' type the '''URL''' as '''http://localhost:5000/form''' and press '''Enter.'''<br /> |- style=&quot;border:1pt solid #000000;padding:0.176cm;&quot;<br /> || <br /> || The page is displayed with a '''form'''.<br /> |- style=&quot;border:1pt solid #000000;padding:0.176cm;&quot;<br /> || <br /> || Let us enter some values in the '''form'''.<br /> |- style=&quot;border:1pt solid #000000;padding:0.176cm;&quot;<br /> || Type '''First name''' as '''Spoken.'''<br /> <br /> <br /> '''Last name '''as''' Tutorial'''<br /> || I will type the '''First name''' as '''Spoken.'''<br /> <br /> <br /> '''Last name '''as''' Tutorial.'''<br /> <br /> <br /> And then click on '''Submit '''button''' '''located at the bottom of the''' web form.'''<br /> |- style=&quot;border:1pt solid #000000;padding:0.176cm;&quot;<br /> || [Firefox]<br /> <br /> <br /> Highlight<br /> <br /> The text in the browser<br /> || Here we have received the '''firstname''' and '''lastname''' from the '''request object'''.<br /> <br /> <br /> <br /> |- style=&quot;border:1pt solid #000000;padding:0.176cm;&quot;<br /> || [Text Editor]<br /> || The last thing I want to talk in this section is about “'''500: Internal Server Error'''”.<br /> <br /> <br /> This is one of the most frequent errors you will encounter during '''flask''' '''app''' development.<br /> |- style=&quot;border:1pt solid #000000;padding:0.176cm;&quot;<br /> || <br /> || Let us write a '''code snippet''' to demonstrate this.<br /> |- style=&quot;border:1pt solid #000000;padding:0.176cm;&quot;<br /> || [Text Editor]<br /> || Switch back to the '''editor'''.<br /> |- style=&quot;border:1pt solid #000000;padding:0.176cm;&quot;<br /> || Type inside user(name):<br /> <br /> <br /> a = 10/0<br /> || In the '''user view function''', before the''' return statement''' type<br /> <br /> '''a &lt;equal to&gt; 10 slash zero'''<br /> <br /> <br /> As we are dividing 10 by zero, we should get an error.<br /> <br /> <br /> Save the file.<br /> |- style=&quot;border:1pt solid #000000;padding:0.176cm;&quot;<br /> || [Terminal]<br /> || Switch to the '''terminal.'''<br /> |- style=&quot;border:1pt solid #000000;padding:0.176cm;&quot;<br /> || Press Ctrl+C<br /> || Stop the '''server''' by pressing '''Ctrl''' and '''C''' keys together.<br /> |- style=&quot;border:1pt solid #000000;padding:0.176cm;&quot;<br /> || Type python3 -m flask run<br /> || Now run the '''server''' again.<br /> |- style=&quot;border:1pt solid #000000;padding:0.176cm;&quot;<br /> || [Firefox]<br /> <br /> <br /> Type http://localhost:5000/user/Sid<br /> <br /> <br /> <br /> || Switch to the '''browser'''.<br /> <br /> <br /> In the '''address bar''' type the '''URL''' as '''http://localhost:5000/user/Sid''' and press '''Enter'''<br /> |- style=&quot;border:1pt solid #000000;padding:0.176cm;&quot;<br /> || [Firefox]<br /> || Observe that we have a '''ZeroDivisionError'''.<br /> |- style=&quot;border:1pt solid #000000;padding:0.176cm;&quot;<br /> || Highlight star<br /> || Let’s switch to the '''terminal''' to see the '''HTTP status code'''.<br /> |-<br /> | style=&quot;border:1pt solid #000000;padding:0.176cm;&quot; | [Terminal]<br /> <br /> <br /> Highlight<br /> <br /> <br /> &quot;GET /user/error HTTP/1.1&quot; 500<br /> <br /> <br /> <br /> | style=&quot;border-top:1pt solid #000000;border-bottom:0.5pt solid #000000;border-left:0.5pt solid #000000;border-right:0.5pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;&quot; | Here we can see '''HTTP response code''' as '''500.'''<br /> <br /> <br /> Which means we have encountered an '''internal server error'''.<br /> <br /> <br /> The '''500''' error simply implies that, there’s something wrong in the '''web server'''.<br /> |-<br /> | style=&quot;border:1pt solid #000000;padding:0.176cm;&quot; | <br /> | style=&quot;border-top:1pt solid #000000;border-bottom:0.5pt solid #000000;border-left:0.5pt solid #000000;border-right:0.5pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;&quot; | Since we have the '''debug mode '''on, we know the specific reason for the error.<br /> |-<br /> | style=&quot;border:1pt solid #000000;padding:0.176cm;&quot; | <br /> | style=&quot;border-top:1pt solid #000000;border-bottom:0.5pt solid #000000;border-left:0.5pt solid #000000;border-right:0.5pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;&quot; | With this we come to the end of this tutorial.<br /> <br /> Let us summarise.<br /> |- style=&quot;border:1pt solid #000000;padding:0.176cm;&quot;<br /> || Slide 10: Summary<br /> || In this tutorial, we learnt about,<br /> <br /> <br /> * &lt;div style=&quot;margin-left:1.27cm;margin-right:0cm;&quot;&gt;The '''request-response''' cycle in '''Flask'''.&lt;/div&gt;<br /> * &lt;div style=&quot;margin-left:1.27cm;margin-right:0cm;&quot;&gt;Different '''attributes''' of the '''request object.'''&lt;/div&gt;<br /> * &lt;div style=&quot;margin-left:1.27cm;margin-right:0cm;&quot;&gt;Different '''types''' of '''request data'''.&lt;/div&gt;<br /> * &lt;div style=&quot;margin-left:1.27cm;margin-right:0cm;&quot;&gt;Several '''HTTP''' '''response codes'''.&lt;/div&gt;<br /> <br /> <br /> |-<br /> | style=&quot;border-top:1pt solid #000000;border-bottom:0.5pt solid #000000;border-left:0.5pt solid #000000;border-right:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;&quot; | Slide: About Spoken Tutorial project<br /> | style=&quot;border-top:1pt solid #000000;border-bottom:0.5pt solid #000000;border-left:0.5pt solid #000000;border-right:0.5pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;&quot; | The video at the following link summarises the Spoken Tutorial project.<br /> <br /> <br /> Please download and watch it.<br /> |-<br /> | style=&quot;background-color:#ffffff;border-top:1pt solid #000000;border-bottom:0.5pt solid #000000;border-left:0.5pt solid #000000;border-right:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;&quot; | Slide:<br /> <br /> Spoken Tutorial workshops<br /> | style=&quot;background-color:#ffffff;border-top:1pt solid #000000;border-bottom:0.5pt solid #000000;border-left:0.5pt solid #000000;border-right:0.5pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;&quot; | &lt;span style=&quot;background-color:#ffffff;&quot;&gt;The&amp;nbsp;&lt;/span&gt;&lt;span style=&quot;background-color:#ffffff;&quot;&gt;'''Spoken Tutorial Project'''&lt;/span&gt;&lt;span style=&quot;background-color:#ffffff;&quot;&gt;&amp;nbsp;team &lt;/span&gt;conducts workshops and gives certificates.<br /> <br /> <br /> For more details, please write to us.<br /> |- style=&quot;border:1pt solid #000000;padding:0.176cm;&quot;<br /> || Slide:<br /> <br /> Forum for specific questions:<br /> || Please post your timed queries in this forum.<br /> |-<br /> | style=&quot;background-color:#ffffff;border-top:1pt solid #000000;border-bottom:0.5pt solid #000000;border-left:0.5pt solid #000000;border-right:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;&quot; | Slide: Acknowledgement<br /> | style=&quot;border-top:1pt solid #000000;border-bottom:0.5pt solid #000000;border-left:0.5pt solid #000000;border-right:0.5pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;&quot; | Spoken Tutorial Project is funded by NMEICT, MHRD, Government of India.<br /> <br /> <br /> More information on this mission is available at this link.<br /> |- style=&quot;border:1pt solid #000000;padding:0.176cm;&quot;<br /> || <br /> || This is Siddhartha Sarkar signing off. <br /> <br /> Thanks for watching.<br /> |-<br /> |}</div>

SiddharthaSarkar https://script.spoken-tutorial.org/index.php/Python-Flask/C2/First-Flask-Web-App/English 2019-01-21T11:37:24Z

<p>SiddharthaSarkar: Script synced with video.</p> <hr /> <div>'''Title of script: First Flask web application'''<br /> <br /> '''Author: Siddhartha Sarkar'''<br /> <br /> Keywords: ​Video tutorial, Python Flask, Hello World, Routes, View Functions, HTTP protocol.<br /> <br /> <br /> <br /> {| class=&quot;wikitable&quot; style=&quot;border-spacing:0;width:16.695cm;&quot;<br /> |- style=&quot;border:1pt solid #000000;padding:0.176cm;&quot;<br /> | align=center| '''Visual Cue'''<br /> | align=center| '''Narration'''<br /> |- style=&quot;border:1pt solid #000000;padding:0.176cm;&quot;<br /> || '''Slide 1: First Flask web app'''<br /> || Welcome to the spoken tutorial on''' '''the first '''Flask web application.'''<br /> |- style=&quot;border:1pt solid #000000;padding:0.176cm;&quot;<br /> || '''Slide 2: Learning Objectives'''<br /> || In this tutorial, we will learn<br /> * &lt;div style=&quot;margin-left:1.27cm;margin-right:0cm;&quot;&gt;To write and analyze our first '''Flask application'''.&lt;/div&gt;<br /> * &lt;div style=&quot;margin-left:1.27cm;margin-right:0cm;&quot;&gt;The concept of '''Routes '''and''' View''' '''functions'''.&lt;/div&gt;<br /> * &lt;div style=&quot;margin-left:1.27cm;margin-right:0cm;&quot;&gt;About '''Dynamic content''' served by dynamic '''URLs'''.&lt;/div&gt;<br /> <br /> <br /> |- style=&quot;border:1pt solid #000000;padding:0.176cm;&quot;<br /> || '''Slides 3: System Requirements'''<br /> || To record this tutorial, I’m using<br /> * &lt;div style=&quot;margin-left:1.27cm;margin-right:0cm;&quot;&gt;'''Ubuntu Linux 16.04''' '''OS'''&lt;/div&gt;<br /> * &lt;div style=&quot;margin-left:1.27cm;margin-right:0cm;&quot;&gt;'''Python''' '''3.5.2'''&lt;/div&gt;<br /> * &lt;div style=&quot;margin-left:1.27cm;margin-right:0cm;&quot;&gt;'''Atom text editor 1.22.1 '''and''' '''&lt;/div&gt;<br /> * &lt;div style=&quot;margin-left:1.27cm;margin-right:0cm;&quot;&gt;'''Firefox web browser'''&lt;/div&gt;<br /> <br /> <br /> You can use any text editor and web browser of your choice.<br /> |- style=&quot;border:1pt solid #000000;padding:0.176cm;&quot;<br /> || '''Slide 5:'''<br /> <br /> '''Pre-requisites'''<br /> <br /> <br /> <br /> || To follow this tutorial, you should have working knowledge on<br /> * &lt;div style=&quot;margin-left:1.27cm;margin-right:0cm;&quot;&gt;'''Linux commands''' and&lt;/div&gt;<br /> <br /> * &lt;div style=&quot;margin-left:1.27cm;margin-right:0cm;&quot;&gt;Basic '''Python programming'''&lt;/div&gt;<br /> <br /> <br /> If not, then please go through the corresponding tutorials on this website. http://spoken-tutorial.org<br /> |-<br /> | style=&quot;background-color:#ffffff;border-top:1pt solid #000000;border-bottom:0.5pt solid #000000;border-left:0.5pt solid #000000;border-right:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;&quot; | Open a Terminal window<br /> <br /> <br /> <br /> | style=&quot;background-color:#ffffff;border-top:1pt solid #000000;border-bottom:0.5pt solid #000000;border-left:0.5pt solid #000000;border-right:0.5pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;&quot; | Let us open the '''Terminal''' by pressing '''Ctrl''', '''Alt''' and '''T''' keys simultaneously on the keyboard.<br /> |- style=&quot;background-color:#ffffff;border:0.5pt solid #000000;padding:0.106cm;&quot;<br /> || [Terminal]<br /> <br /> Type cd project_flask &amp; Press Enter<br /> || Now go to the folder '''project underscore flask''' which we created earlier using '''cd''' '''command.'''<br /> |- style=&quot;border:1pt solid #000000;padding:0.176cm;&quot;<br /> || [Terminal]<br /> <br /> <br /> $ . flask_venv/bin/activate<br /> <br /> <br /> [Enter]<br /> || Let us activate our '''virtualenv'''.<br /> <br /> <br /> Type the command<br /> <br /> <br /> '''Dot space flask_venv slash bin slash activate'''<br /> <br /> <br /> And press '''Enter'''.<br /> <br /> <br /> '''(dot)''' refers to the present working '''directory'''.<br /> |- style=&quot;border:1pt solid #000000;padding:0.176cm;&quot;<br /> || [Terminal]<br /> <br /> Highlight (flask_venv)<br /> || Notice that we are now inside the''' virtual environment flask_venv.'''<br /> |- style=&quot;border:1pt solid #000000;padding:0.176cm;&quot;<br /> || Only narration<br /> || Open the file '''hello_flask.py '''in a '''text editor'''.<br /> <br /> <br /> I will be using the '''atom text editor '''but you can use your prefered '''text editor.'''<br /> |- style=&quot;border:1pt solid #000000;padding:0.176cm;&quot;<br /> || [Terminal]<br /> <br /> <br /> $ atom hello_flask.py<br /> || I will type the command.<br /> <br /> '''atom&lt;space&gt; hello underscore flask dot py'''<br /> <br /> <br /> and press '''Enter.'''<br /> <br /> <br /> <br /> <br /> Now let us understand what the code does, line by line.<br /> |- style=&quot;border:1pt solid #000000;padding:0.176cm;&quot;<br /> || [Text Editor]<br /> <br /> Highlight<br /> <br /> “from flask import Flask”<br /> || The first line is '''from flask import Flask.'''<br /> <br /> <br /> It simply says '''import''' '''Flask''' '''module''' from '''flask''' folder. <br /> |- style=&quot;border:1pt solid #000000;padding:0.176cm;&quot;<br /> || [Text Editor]<br /> <br /> Point to the left pane of Atom.<br /> <br /> <br /> Collapse flask_venv-&gt;lib-&gt;python3.5-&gt;site-packages<br /> <br /> And hover over flask foder.<br /> || Look at the '''directory structure''' &lt;span style=&quot;color:#000000;&quot;&gt;If we use atom editor, we can see the folder structure in the left pane. Else we have to show in the file browser. As we will be using atom editor throughout this series, we don't need to switch to the file browser.&lt;/span&gt;&lt;span style=&quot;color:#000000;&quot;&gt;+pravin1389@gmail.com &lt;/span&gt;<br /> <br /> &lt;span style=&quot;color:#000000;&quot;&gt;Can you pls confirm what Siddharth is saying?&lt;/span&gt;&lt;span style=&quot;color:#000000;&quot;&gt;We are using Atom throughout the course. If they use other editors they will see the same phenomenon in the respective directory where flask gets installed.&lt;/span&gt;<br /> <br /> &lt;span style=&quot;color:#000000;&quot;&gt;We expect that they will use Atom.&lt;/span&gt;&lt;span style=&quot;color:#000000;&quot;&gt;This is a problem if learners are using other text editors like gedit, nano, etc.&lt;/span&gt;at the left pane of the '''Atom text editor''' window.<br /> <br /> <br /> Observe that there is no '''flask''' folder in the '''project'''. <br /> <br /> <br /> So how does the '''compiler''' find and import the '''Flask module'''?<br /> <br /> <br /> '''Python''' is set to look for '''modules''' in the '''site-packages'''.<br /> |- style=&quot;border:1pt solid #000000;padding:0.176cm;&quot;<br /> || Highlight<br /> <br /> <br /> app = Flask(__name__)<br /> || In the second line, we have created an '''object''' for the '''flask class.'''<br /> <br /> <br /> This '''object''' of the '''Flask class''' is our '''WSGI application.'''<br /> <br /> <br /> '''WSGI''' stands for '''Web Server Gateway Interface.'''<br /> <br /> <br /> We will come to what '''WSGI''' is later.<br /> <br /> <br /> This takes an '''argument double underscore name double underscore. '''<br /> <br /> <br /> This '''argument''' basically refers to the name of the file.<br /> <br /> <br /> In our case it is “'''hello_flask'''”.<br /> <br /> <br /> '''Flask''' uses this '''argument''' to determine the '''root path''' of the '''application'''.<br /> |- style=&quot;border:1pt solid #000000;padding:0.176cm;&quot;<br /> || [Text Editor]<br /> <br /> <br /> Highlight<br /> <br /> @app.route('/')<br /> || In the next line, the''' route function''' of the '''Flask class''' is a '''decorator.'''<br /> <br /> <br /> It tells the '''application''', which '''URL''' should call the associated '''function'''.<br /> <br /> <br /> In this case, '''root slash''' is the '''URL'''. <br /> <br /> <br /> It refers to '''home''' or top '''domain'''.<br /> |- style=&quot;border:1pt solid #000000;padding:0.176cm;&quot;<br /> || [Text Editor]<br /> <br /> <br /> Highlight<br /> <br /> @app.route('/')<br /> || '''Decorators''' are a standard feature of the '''Python''' language.<br /> <br /> <br /> They can modify the behavior of a '''function''' in different ways. <br /> <br /> <br /> In our case, it is used to associate a '''function''' with a '''URL'''.<br /> <br /> <br /> To know more about '''decorators''' you may refer to the '''Python Spoken Tutorial series'''.<br /> |- style=&quot;border:1pt solid #000000;padding:0.176cm;&quot;<br /> || '''Slide 5: Routes (img 1)'''<br /> || Let us understand the concept of '''routes''' in detail now.<br /> <br /> <br /> Look at this diagram.<br /> <br /> <br /> This shows a simplified '''client''' and '''server''' diagram.<br /> |- style=&quot;border:1pt solid #000000;padding:0.176cm;&quot;<br /> || '''Slide 6: Routes (img 2)'''<br /> <br /> <br /> <br /> || The client sends a '''request''' to the '''web server'''.<br /> <br /> <br /> In our case, the '''web browser''' is the '''client'''.<br /> |- style=&quot;border:1pt solid #000000;padding:0.176cm;&quot;<br /> || '''Slide 7: Routes (img 3)'''<br /> || Then the '''web server''' has to process the '''request''' and generate a '''response'''.<br /> <br /> <br /> And the '''Flask application '''instance does this job.<br /> <br /> <br /> The '''web server''' sends the '''request''' to the '''Flask application''' instance.<br /> |- style=&quot;border:1pt solid #000000;padding:0.176cm;&quot;<br /> || '''Slide 8: Routes (img 4)'''<br /> || On receiving the '''request''' the '''app''' matches it with the available '''route patterns'''.<br /> <br /> <br /> <br /> |- style=&quot;border:1pt solid #000000;padding:0.176cm;&quot;<br /> || '''Slide 9: Routes '''<br /> ||<br /> * &lt;div style=&quot;margin-left:1.27cm;margin-right:0cm;&quot;&gt;Thus the '''application''' instance knows which '''function''' to execute for which '''URL'''.&lt;/div&gt;<br /> * &lt;div style=&quot;margin-left:1.27cm;margin-right:0cm;&quot;&gt;This happens because it keeps a mapping of the '''URLs''' to '''functions'''.&lt;/div&gt;<br /> * &lt;div style=&quot;margin-left:1.27cm;margin-right:0cm;&quot;&gt;Here we need the concept of '''routes'''.&lt;/div&gt;<br /> <br /> <br /> |- style=&quot;border:1pt solid #000000;padding:0.176cm;&quot;<br /> || '''Slide 9: Routes '''<br /> || <br /> * &lt;div style=&quot;margin-left:1.27cm;margin-right:0cm;&quot;&gt;The association between a '''URL''' and the '''function''' that handles it, is called a '''route'''.&lt;/div&gt;<br /> * &lt;div style=&quot;margin-left:1.27cm;margin-right:0cm;&quot;&gt;The '''Flask app''' executes the associated '''function''' and returns a '''response'''.&lt;/div&gt;<br /> <br /> <br /> |- style=&quot;border:1pt solid #000000;padding:0.176cm;&quot;<br /> || '''Slide 9: Routes '''<br /> || <br /> * &lt;div style=&quot;margin-left:1.27cm;margin-right:0cm;&quot;&gt;'''Routes''' can be either '''static''' or '''dynamic'''.&lt;/div&gt;<br /> * &lt;div style=&quot;margin-left:1.27cm;margin-right:0cm;&quot;&gt;In the present case, we have a static '''route'''.&lt;/div&gt;<br /> <br /> <br /> <br /> <br /> <br /> We will discuss '''dynamic routes''' in a moment.<br /> |- style=&quot;border:1pt solid #000000;padding:0.176cm;&quot;<br /> || [Text Editor]<br /> <br /> <br /> Highlight<br /> <br /> def hello_world():<br /> || Let’s come back to our '''“hello world” app.'''<br /> <br /> <br /> In the next line, we define the associated '''function''' for this '''route'''. <br /> <br /> <br /> This '''function''' gets executed when the '''root URL''' is hit.<br /> <br /> <br /> In our case the '''root''' '''URL''' is [http://127.0.0.1:5000/ http://127.0.0.1:5000]<br /> <br /> <br /> Here, we have named the '''function''' as “'''hello_world'''”.<br /> <br /> <br /> However, you may choose any other name of your choice.<br /> <br /> <br /> This '''function''' associated with a '''route '''is called ‘'''view function'''’.<br /> |- style=&quot;border:1pt solid #000000;padding:0.176cm;&quot;<br /> || [Text Editor]<br /> <br /> <br /> Highlight<br /> <br /> return 'Hello, World!'<br /> || The next line says '''return 'Hello, World!''''<br /> <br /> <br /> So this '''view function''' simply returns a '''string “Hello World”. '''<br /> |- style=&quot;border:1pt solid #000000;padding:0.176cm;&quot;<br /> || [Text Editor]<br /> <br /> <br /> Type<br /> <br /> <br /> if __name__ == '__main__':(Tab) app.run()<br /> || Now let us add a few more lines of code at the end.<br /> <br /> <br /> Line 8 and 9.<br /> |- style=&quot;border:1pt solid #000000;padding:0.176cm;&quot;<br /> || [Text Editor]<br /> <br /> <br /> Highlight<br /> <br /> <br /> if __name__ == '__main__':(Tab) app.run()<br /> || This is a customary common practice.<br /> <br /> <br /> This ensures that '''server '''is launched only if the '''script''' runs directly from the '''terminal'''.<br /> <br /> <br /> Otherwise '''app dot run''' is skipped.<br /> <br /> <br /> It may happen that a '''script''' is being called from another '''script'''.<br /> <br /> <br /> In that case the imported '''script''' should not start a new '''server'''.<br /> <br /> <br /> Hence we follow this practice.<br /> |- style=&quot;border:1pt solid #000000;padding:0.176cm;&quot;<br /> || '''Ctrl+S'''<br /> || Let us save the file by pressing '''Ctrl''' and '''S''' keys.<br /> |- style=&quot;border:1pt solid #000000;padding:0.176cm;&quot;<br /> || [Terminal]<br /> <br /> Type <br /> <br /> <br /> $ export FLASK_APP=hello_flask.py<br /> || Now back in the '''terminal''' and run the''' hello world app.'''<br /> <br /> <br /> Type '''export &lt;space&gt; FLASK_APP &lt;equal to &gt; hello underscore flask dot py'''<br /> <br /> <br /> Press '''Enter'''.<br /> |- style=&quot;border:1pt solid #000000;padding:0.176cm;&quot;<br /> || [Terminal]<br /> <br /> Type<br /> <br /> <br /> $ python3 -m flask run<br /> || Now type<br /> <br /> <br /> '''python3 &lt;space&gt; hyphen m &lt;space&gt; flask &lt;space&gt; run'''<br /> <br /> <br /> And press '''Enter'''.<br /> <br /> <br /> We can see a message '''“Running on [http://127.0.0.1:5000/ http://127.0.0.1:5000/]”'''<br /> <br /> <br /> Here, '''127.0.0.1''' is the '''IP''' '''address''' for the '''localhost'''.<br /> <br /> <br /> '''Flask app''' is running in the '''local host''' on '''port 5000.'''<br /> |- style=&quot;border:1pt solid #000000;padding:0.176cm;&quot;<br /> || [Firefox]<br /> <br /> <br /> Type <br /> <br /> [http://127.0.0.1:5000/ http://127.0.0.1:5000/]<br /> <br /> And press Enter.<br /> || Now, open any '''web browser. '''<br /> <br /> <br /> In the '''address bar''', type [http://127.0.0.1:5000/ http://127.0.0.1:5000/] and press '''Enter'''.<br /> |- style=&quot;border:1pt solid #000000;padding:0.176cm;&quot;<br /> || [Firefox]<br /> <br /> Highlight ‘Hello, World!’<br /> || We can see the message ‘'''Hello, World!'''’ written in the browser window. <br /> |- style=&quot;border:1pt solid #000000;padding:0.176cm;&quot;<br /> || <br /> || Switch back to the '''terminal'''.<br /> <br /> <br /> Stop the '''server''' by pressing '''Ctrl''' and '''C '''keys together.<br /> |- style=&quot;border:1pt solid #000000;padding:0.176cm;&quot;<br /> || [Terminal]<br /> <br /> <br /> atom hello_flask.py<br /> || Now we will write code for a '''dynamic''' '''route''' and also define a '''view function''' called '''hello_user'''.<br /> <br /> <br /> Switch to '''the editor window.'''<br /> |- style=&quot;border:1pt solid #000000;padding:0.176cm;&quot;<br /> || Type<br /> <br /> <br /> @app.route('/user/&lt;username&gt;')<br /> <br /> def hello_user(username):<br /> <br /> &lt;nowiki&gt;(Tab) return '&lt;h1&gt;Hello, %s!&lt;/h1&gt;' % username &lt;/nowiki&gt;<br /> || Before the''' if condition''', type the code as shown here.<br /> <br /> <br /> <br /> |- style=&quot;border:1pt solid #000000;padding:0.176cm;&quot;<br /> || Highlight<br /> <br /> <br /> @app.route('/user/&lt;username&gt;')<br /> <br /> <br /> <br /> || This '''route''' has a '''URL''', '''home/user/&lt;username&gt;'''<br /> <br /> <br /> where '''home''' is the '''root''' '''domain''' '''URL''' of the '''server'''.<br /> <br /> <br /> whereas, '''username''' is a '''variable'''.<br /> <br /> <br /> We will use this '''variable '''in the '''view''' '''function''' to change the content in the browser.<br /> |- style=&quot;border:1pt solid #000000;padding:0.176cm;&quot;<br /> || Highlight<br /> <br /> <br /> def hello_user(username):<br /> <br /> &lt;nowiki&gt;(Tab) return '&lt;h1&gt;Hello, %s!&lt;/h1&gt;' % username &lt;/nowiki&gt;<br /> || This '''function '''will simply return a string '''‘Hello’''' '''username'''.<br /> <br /> <br /> Note that the output in the '''browser '''will vary as per the '''username''' in the '''URL'''.<br /> <br /> <br /> '''h1''' is the level one '''heading tag '''of '''HTML'''.<br /> |- style=&quot;border:1pt solid #000000;padding:0.176cm;&quot;<br /> || <br /> || Let us save the file by pressing '''Ctrl''' and '''S''' keys<br /> <br /> <br /> Switch back to the terminal.<br /> |- style=&quot;border:1pt solid #000000;padding:0.176cm;&quot;<br /> || [Terminal]<br /> <br /> $ python3 -m flask run [Enter]<br /> || Run the '''app''' by executing the following command.<br /> <br /> <br /> <br /> |- style=&quot;border:1pt solid #000000;padding:0.176cm;&quot;<br /> || [Firefox]<br /> <br /> <br /> Type <br /> <br /> [http://127.0.0.1:5000/ http://127.0.0.1:5000/]user/Sid <br /> <br /> [Enter]<br /> || Switch to the '''web browser'''.<br /> <br /> <br /> In the''' address bar''', type [http://127.0.0.1:5000/ http://127.0.0.1:5000/]user/Sid <br /> <br /> <br /> and press '''Enter'''.<br /> |- style=&quot;border:1pt solid #000000;padding:0.176cm;&quot;<br /> || [Firefox]<br /> <br /> <br /> Type <br /> <br /> [http://127.0.0.1:5000/ http://127.0.0.1:5000/]user/Tom<br /> <br /> [Enter]<br /> || We got the output as '''“Hello Sid!”.'''<br /> <br /> <br /> Now let’s try '''Tom''' instead of '''Sid'''<br /> <br /> In the '''address bar''', replace '''Sid''' with '''Tom.'''<br /> <br /> <br /> Press '''Enter'''.<br /> <br /> <br /> The output has changed to '''‘Hello Tom!’ '''<br /> <br /> <br /> We have a dynamic '''URL''' in play here.<br /> |- style=&quot;border:1pt solid #000000;padding:0.176cm;&quot;<br /> || Slide 10: Example URL <br /> || This is what you may have observed in '''facebook''' as well.<br /> <br /> <br /> '''Facebook''' individual '''users''' have a '''URL''' of the type:<br /> <br /> [http://www.facebook.com/profile_id www.facebook.com/profile_id]<br /> <br /> <br /> Here '''profile_id''' refers to the unique '''ID''' of a '''facebook user.'''<br /> <br /> <br /> Depending on the unique '''ID, facebook server''' fetches the individual '''profile pages'''.Switch to the '''browser window'''.<br /> |- style=&quot;border:1pt solid #000000;padding:0.176cm;&quot;<br /> || [Firefox]<br /> <br /> <br /> Type <br /> <br /> [http://127.0.0.1:5000/ http://127.0.0.1:5000/]posts<br /> <br /> [Enter]<br /> || Let’s try a '''URL''' for which we did not define a '''route'''.<br /> <br /> <br /> Switch to the '''browser '''window.<br /> <br /> <br /> Replace '''/user/tom''' with '''posts '''and press '''Enter.'''<br /> <br /> <br /> Observe that we got '''Not found''' message.<br /> |- style=&quot;border:1pt solid #000000;padding:0.176cm;&quot;<br /> || [Terminal]<br /> <br /> <br /> Highlight 404.<br /> <br /> <br /> Highlight 200’s.<br /> || Switch to the '''terminal'''.<br /> <br /> <br /> Observe that, the '''server''' has returned a '''404 response code.'''<br /> <br /> <br /> This '''error code''' indicates that the web page requested for, does not exist.<br /> <br /> <br /> Whereas most previous '''response codes''' were '''200'''.<br /> <br /> <br /> We will discuss in detail these '''HTTP responses''' in the upcoming tutorials.<br /> |-<br /> | style=&quot;background-color:#ffffff;border-top:1pt solid #000000;border-bottom:0.5pt solid #000000;border-left:0.5pt solid #000000;border-right:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;&quot; | Press Ctrl+c simultaneously <br /> | style=&quot;background-color:#ffffff;border-top:1pt solid #000000;border-bottom:0.5pt solid #000000;border-left:0.5pt solid #000000;border-right:0.5pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;&quot; | To stop the '''server''', press '''Ctrl''' and '''C''' keys simultaneously.<br /> |-<br /> | style=&quot;border-top:1pt solid #000000;border-bottom:0.5pt solid #000000;border-left:0.5pt solid #000000;border-right:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;&quot; | [Terminal]<br /> <br /> <br /> Type deactivate and press Enter<br /> | style=&quot;border-top:1pt solid #000000;border-bottom:0.5pt solid #000000;border-left:0.5pt solid #000000;border-right:0.5pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;&quot; | We will deactivate the '''Virtual Environment.'''<br /> <br /> <br /> Type '''deactivate''' and press '''Enter'''.<br /> |-<br /> | style=&quot;border-top:1pt solid #000000;border-bottom:0.5pt solid #000000;border-left:0.5pt solid #000000;border-right:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;&quot; | <br /> | style=&quot;border-top:1pt solid #000000;border-bottom:0.5pt solid #000000;border-left:0.5pt solid #000000;border-right:0.5pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;&quot; | This brings us to the end of this tutorial.<br /> <br /> <br /> Let us summarise<br /> |- style=&quot;border:1pt solid #000000;padding:0.176cm;&quot;<br /> || Slide 10: Summary<br /> || In this tutorial, we learnt about<br /> <br /> <br /> * &lt;div style=&quot;margin-left:1.27cm;margin-right:0cm;&quot;&gt;The working of our first '''Flask application.'''&lt;/div&gt;<br /> * &lt;div style=&quot;margin-left:1.27cm;margin-right:0cm;&quot;&gt;The concepts of '''routes '''and the view '''functions.'''&lt;/div&gt;<br /> * &lt;div style=&quot;margin-left:1.27cm;margin-right:0cm;&quot;&gt;Running a '''Flask app '''in a '''Web''' '''browser'''.&lt;/div&gt;<br /> * &lt;div style=&quot;margin-left:1.27cm;margin-right:0cm;&quot;&gt;'''Dynamic content''' served by dynamic '''URLs'''.&lt;/div&gt;<br /> <br /> <br /> |-<br /> | style=&quot;border-top:1pt solid #000000;border-bottom:0.5pt solid #000000;border-left:0.5pt solid #000000;border-right:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;&quot; | Slide: About Spoken Tutorial project<br /> | style=&quot;border-top:1pt solid #000000;border-bottom:0.5pt solid #000000;border-left:0.5pt solid #000000;border-right:0.5pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;&quot; | The video at the following link summarises the Spoken Tutorial project.<br /> <br /> <br /> Please download and watch it.<br /> |-<br /> | style=&quot;background-color:#ffffff;border-top:1pt solid #000000;border-bottom:0.5pt solid #000000;border-left:0.5pt solid #000000;border-right:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;&quot; | Slide:<br /> <br /> Spoken Tutorial workshops<br /> | style=&quot;background-color:#ffffff;border-top:1pt solid #000000;border-bottom:0.5pt solid #000000;border-left:0.5pt solid #000000;border-right:0.5pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;&quot; | &lt;span style=&quot;background-color:#ffffff;&quot;&gt;The&amp;nbsp;&lt;/span&gt;&lt;span style=&quot;background-color:#ffffff;&quot;&gt;'''Spoken Tutorial Project'''&lt;/span&gt;&lt;span style=&quot;background-color:#ffffff;&quot;&gt;&amp;nbsp;team &lt;/span&gt;conducts workshops and gives certificates.<br /> <br /> <br /> For more details, please write to us.<br /> |- style=&quot;border:1pt solid #000000;padding:0.176cm;&quot;<br /> || Slide 13:<br /> <br /> Forum for specific questions:<br /> || Please post your timed queries in this forum.<br /> |-<br /> | style=&quot;background-color:#ffffff;border-top:1pt solid #000000;border-bottom:0.5pt solid #000000;border-left:0.5pt solid #000000;border-right:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;&quot; | Slide: Acknowledgement<br /> | style=&quot;border-top:1pt solid #000000;border-bottom:0.5pt solid #000000;border-left:0.5pt solid #000000;border-right:0.5pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;&quot; | Spoken Tutorial Project is funded by NMEICT, MHRD, Government of India.<br /> <br /> <br /> More information on this mission is available at this link.<br /> |- style=&quot;border:1pt solid #000000;padding:0.176cm;&quot;<br /> || <br /> || This is Siddhartha Sarkar signing off. <br /> <br /> <br /> Thanks for watching.<br /> |-<br /> |}</div>

SiddharthaSarkar https://script.spoken-tutorial.org/index.php/Python-Flask/C2/Installation-of-Python-Flask/English 2019-01-21T11:22:52Z

<p>SiddharthaSarkar: Script synced with video.</p> <hr /> <div>'''Title of script: Installation of Python Flask'''<br /> <br /> '''Author: Siddhartha Sarkar'''<br /> <br /> Keywords: ​Video tutorial, Python Flask, Installation, Virtual Environment.<br /> <br /> <br /> <br /> {| class=&quot;wikitable&quot; style=&quot;border-spacing:0;width:16.51cm;&quot;<br /> |- style=&quot;border:1pt solid #000000;padding:0.176cm;&quot;<br /> | align=center| '''Visual Cue'''<br /> | align=center| '''Narration'''<br /> |- style=&quot;border:1pt solid #000000;padding:0.176cm;&quot;<br /> || Slide 1: Installation of Python Flask<br /> || Welcome to the spoken tutorial on''' Installation of Python Flask.'''<br /> |- style=&quot;border:1pt solid #000000;padding:0.176cm;&quot;<br /> || Slide 2: Learning Objectives<br /> || In this tutorial we will learn to<br /> * &lt;div style=&quot;margin-left:1.27cm;margin-right:0cm;&quot;&gt;Create a '''Virtual Environment.'''&lt;/div&gt;<br /> * &lt;div style=&quot;margin-left:1.27cm;margin-right:0cm;&quot;&gt;Activate and deactivate the '''Virtual Environment'''.&lt;/div&gt;<br /> * &lt;div style=&quot;margin-left:1.27cm;margin-right:0cm;&quot;&gt;Install packages inside the '''Virtual Environment'''.&lt;/div&gt;<br /> * &lt;div style=&quot;margin-left:1.27cm;margin-right:0cm;&quot;&gt;And launch a '''Flask application'''.&lt;/div&gt;<br /> <br /> <br /> |- style=&quot;border:1pt solid #000000;padding:0.176cm;&quot;<br /> || Slides 3: System Requirements<br /> || To record this tutorial, I’m using<br /> * &lt;div style=&quot;margin-left:1.27cm;margin-right:0cm;&quot;&gt;'''Ubuntu Linux 16.04''' '''OS'''&lt;/div&gt;<br /> * &lt;div style=&quot;margin-left:1.27cm;margin-right:0cm;&quot;&gt;'''Python''' '''3.5.2'''&lt;/div&gt;<br /> * &lt;div style=&quot;margin-left:1.27cm;margin-right:0cm;&quot;&gt;'''Atom text editor 1.22.1 '''&lt;/div&gt;<br /> * &lt;div style=&quot;margin-left:1.27cm;margin-right:0cm;&quot;&gt;'''Firefox web browser''' and&lt;/div&gt;<br /> * &lt;div style=&quot;margin-left:1.27cm;margin-right:0cm;&quot;&gt;A working '''Internet''' connection.&lt;/div&gt;<br /> <br /> <br /> You can use any text editor and web browser of your choice.<br /> |- style=&quot;border:1pt solid #000000;padding:0.176cm;&quot;<br /> || Slide 5:<br /> <br /> Pre-requisites<br /> <br /> || To follow this tutorial, you should have working knowledge on<br /> * &lt;div style=&quot;margin-left:1.27cm;margin-right:0cm;&quot;&gt;'''Linux commands''' and&lt;/div&gt;<br /> <br /> * &lt;div style=&quot;margin-left:1.27cm;margin-right:0cm;&quot;&gt;Basic '''Python programming'''&lt;/div&gt;<br /> <br /> <br /> If not, then please go through the corresponding tutorials on this website. <br /> |- style=&quot;border:1pt solid #000000;padding:0.176cm;&quot;<br /> || Slide 6: Virtual Environment<br /> || <br /> * &lt;div style=&quot;margin-left:1.27cm;margin-right:0cm;&quot;&gt;A '''virtual environment''' is a self-contained '''directory tree. '''&lt;/div&gt;<br /> * &lt;div style=&quot;margin-left:1.27cm;margin-right:0cm;&quot;&gt;It contains a '''Python installation''' for a particular version of '''Python'''. &lt;/div&gt;<br /> * &lt;div style=&quot;margin-left:1.27cm;margin-right:0cm;&quot;&gt;Additional '''packages''' can be installed inside the '''virtual environment'''.&lt;/div&gt;<br /> <br /> <br /> |- style=&quot;border:1pt solid #000000;padding:0.176cm;&quot;<br /> || Slide 6: Virtual Environment<br /> <br /> &lt;div style=&quot;color:#0000ff;&quot;&gt;(pronounce as v-e-n-v)&lt;/div&gt;<br /> || <br /> * &lt;div style=&quot;margin-left:1.27cm;margin-right:0cm;&quot;&gt;'''Venv '''is the short form for '''virtual environment.'''&lt;/div&gt;<br /> * &lt;div style=&quot;margin-left:1.27cm;margin-right:0cm;&quot;&gt;'''Venv '''is used to avoid conflict between different '''Python installations'''. &lt;/div&gt;<br /> <br /> <br /> |- style=&quot;border:1pt solid #000000;padding:0.176cm;&quot;<br /> || Slide 7: Virtual Environment<br /> || <br /> * &lt;div style=&quot;margin-left:1.27cm;margin-right:0cm;&quot;&gt;For every '''project,''' we can have a separate '''Venv'''.&lt;/div&gt;<br /> * &lt;div style=&quot;margin-left:1.27cm;margin-right:0cm;&quot;&gt;We will install '''Venv '''via a '''package''' called '''pip'''.&lt;/div&gt;<br /> <br /> <br /> |- style=&quot;border:1pt solid #000000;padding:0.176cm;&quot;<br /> || Slide 8: Pip<br /> || <br /> * &lt;div style=&quot;margin-left:1.27cm;margin-right:0cm;&quot;&gt;'''Pip '''is a '''package manager '''program.&lt;/div&gt;<br /> * &lt;div style=&quot;margin-left:1.27cm;margin-right:0cm;&quot;&gt;Used to install, upgrade, and remove '''Python packages. '''&lt;/div&gt;<br /> * &lt;div style=&quot;margin-left:1.27cm;margin-right:0cm;&quot;&gt;'''Pip3 '''is the '''Python3 '''version of '''pip'''&lt;/div&gt;<br /> <br /> <br /> |- style=&quot;border:1pt solid #000000;padding:0.176cm;&quot;<br /> || Slide: Pip3 installation<br /> || <br /> * &lt;div style=&quot;margin-left:1.27cm;margin-right:0cm;&quot;&gt;To check if '''pip3''' is already installed, type the following command in the '''terminal:'''&lt;/div&gt;<br /> <br /> <br /> '''pip3 &lt;space&gt; hyphen hyphen version '''and press''' Enter.'''<br /> * &lt;div style=&quot;margin-left:1.27cm;margin-right:0cm;&quot;&gt;If it gives a '''version''' number, then you don’t need to install it again.&lt;/div&gt;<br /> * &lt;div style=&quot;margin-left:1.27cm;margin-right:0cm;&quot;&gt;Else, install '''pip3''' using the following command in the '''terminal''':&lt;/div&gt;<br /> <br /> <br /> <br /> '''sudo &lt;space&gt; apt &lt;space&gt; install &lt;space&gt; python3-pip'''<br /> |- style=&quot;border:1pt solid #000000;padding:0.176cm;&quot;<br /> || Open the terminal<br /> || Open the '''terminal''' by pressing '''Ctrl''', '''Alt''' and '''T''' keys together.<br /> |- style=&quot;border:1pt solid #000000;padding:0.176cm;&quot;<br /> || Type pip3 --version [Enter]<br /> || Let us check the version of '''pip.'''<br /> <br /> <br /> Type '''pip3 &lt;space&gt; hyphen hyphen version '''and press''' Enter.'''<br /> |- style=&quot;border:1pt solid #000000;padding:0.176cm;&quot;<br /> || <br /> <br /> Point to pip version<br /> || You should be able to see some valid '''pip3''' version number.<br /> <br /> <br /> In my case it is '''pip 18.0''' for '''python 3.5'''.<br /> |- style=&quot;border:1pt solid #000000;padding:0.176cm;&quot;<br /> | style=&quot;color:#0000ff;&quot; | (pronounce as virtual-e-n-v).<br /> || Next let us install '''Virtualenv.'''<br /> |- style=&quot;border:1pt solid #000000;padding:0.176cm;&quot;<br /> || Type<br /> <br /> $ sudo pip3 install virtualenv [Enter]<br /> || Type '''sudo &lt;space&gt; pip3 &lt;space&gt; install &lt;space&gt; virtualenv'''<br /> <br /> <br /> And press''' Enter.'''Provide the '''admin password '''and press''' Enter.'''<br /> |-<br /> | style=&quot;border-top:1pt solid #000000;border-bottom:0.5pt solid #000000;border-left:0.5pt solid #000000;border-right:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;&quot; | Only narration<br /> | style=&quot;border-top:1pt solid #000000;border-bottom:0.5pt solid #000000;border-left:0.5pt solid #000000;border-right:0.5pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;&quot; | Next, I will create a folder named '''project_flask.'''<br /> <br /> <br /> This folder will help me to organize my files in a single place.<br /> |-<br /> | style=&quot;border-top:1pt solid #000000;border-bottom:0.5pt solid #000000;border-left:0.5pt solid #000000;border-right:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;&quot; | [Terminal]<br /> <br /> <br /> Type mkdir project_flask [Enter]<br /> | style=&quot;border-top:1pt solid #000000;border-bottom:0.5pt solid #000000;border-left:0.5pt solid #000000;border-right:0.5pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;&quot; | To do so, type '''mkdir &lt;space&gt; project underscore flask '''and press '''Enter.'''<br /> |-<br /> | style=&quot;border-top:1pt solid #000000;border-bottom:0.5pt solid #000000;border-left:0.5pt solid #000000;border-right:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;&quot; | [Terminal]<br /> <br /> <br /> Type cd project_flask [Enter]<br /> | style=&quot;border-top:1pt solid #000000;border-bottom:0.5pt solid #000000;border-left:0.5pt solid #000000;border-right:0.5pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;&quot; | Type '''cd &lt;space&gt;''' '''project underscore flask''' and press '''Enter.'''<br /> |- style=&quot;border:1pt solid #000000;padding:0.176cm;&quot;<br /> || Only narration<br /> || Now let us create a new '''virtual environment''' inside our newly created '''directory'''.<br /> |- style=&quot;border:1pt solid #000000;padding:0.176cm;&quot;<br /> || [Terminal]<br /> <br /> Typing<br /> <br /> $ virtualenv -p python3 flask_venv<br /> || So type <br /> <br /> '''virtualenv &lt;space&gt; &lt;hyphen&gt; p &lt;space&gt; python3 &lt;space&gt; flask_venv'''<br /> <br /> <br /> This will create a '''virtual environment''' named '''flask_venv'''.<br /> <br /> <br /> You may choose any other name for the '''virtual environment'''.<br /> <br /> <br /> The '''hyphen p''' flag is used to specify which''' python interpreter''' is to be used.<br /> |- style=&quot;border:1pt solid #000000;padding:0.176cm;&quot;<br /> || [Enter]<br /> || Now press '''Enter.'''<br /> |- style=&quot;border:1pt solid #000000;padding:0.176cm;&quot;<br /> || [Terminal]<br /> <br /> Typing<br /> <br /> <br /> $ virtualenv -h [Enter]<br /> || For '''help''', type the following command in the '''terminal.'''<br /> <br /> '''virtualenv -h '''and press '''Enter.'''<br /> <br /> <br /> Here, we can see the list of available commands and options.<br /> |- style=&quot;border:1pt solid #000000;padding:0.176cm;&quot;<br /> || Highlight -p and its description.<br /> || Observe that '''-p''' is used to specify the version of the '''python interpreter''' to be used.<br /> |- style=&quot;border:1pt solid #000000;padding:0.176cm;&quot;<br /> || [Terminal]<br /> <br /> Type $ ls [Enter]<br /> || Type '''ls''' and press '''Enter.'''<br /> <br /> <br /> Note that we have a folder named '''flask_venv''' in our current '''directory'''.<br /> |- style=&quot;border:1pt solid #000000;padding:0.176cm;&quot;<br /> || [Terminal]<br /> <br /> Type<br /> <br /> <br /> $ ls flask_venv [Enter]<br /> || Now, let us see the contents of '''flask_venv directory'''.<br /> <br /> <br /> Type '''ls &lt;space&gt; flask underscore venv'''<br /> <br /> <br /> Press''' Enter'''.<br /> |- style=&quot;border:1pt solid #000000;padding:0.176cm;&quot;<br /> || [Terminal]<br /> <br /> Point to the list of directories in the terminal<br /> || Observe that there are a number of files and directories inside '''flask_venv'''.<br /> |- style=&quot;border:1pt solid #000000;padding:0.176cm;&quot;<br /> || [Terminal] Point to bin<br /> || '''bin​''' contains the executable files.<br /> |- style=&quot;border:1pt solid #000000;padding:0.176cm;&quot;<br /> || [Terminal] Point to lib<br /> || '''lib​''' contains supporting library files.<br /> |- style=&quot;border:1pt solid #000000;padding:0.176cm;&quot;<br /> || [Terminal] Point to site-packages<br /> || Packages ​installed in this '''environment''' will appear in<br /> <br /> '''site-packages'''.<br /> |- style=&quot;border:1pt solid #000000;padding:0.176cm;&quot;<br /> || [Terminal] Point to <br /> <br /> lib/ python3.5 directory<br /> || '''site-packages''' can be found ​inside '''lib slash python3.5 directory.'''<br /> |- style=&quot;border:1pt solid #000000;padding:0.176cm;&quot;<br /> || <br /> || Next, we have to '''activate''' this '''virtual environment'''. <br /> <br /> <br /> '''Activate''' means, from now on all the''' python commands''' will run inside this '''venv'''.<br /> |- style=&quot;border:1pt solid #000000;padding:0.176cm;&quot;<br /> || [Terminal]<br /> <br /> Typing<br /> <br /> $ . flask_venv/bin/activate<br /> <br /> <br /> <br /> || To do that, we have to run the '''activate''' executable from the '''bin directory'''. <br /> <br /> <br /> Type '''dot &lt;space&gt; flask &lt;underscore&gt; venv slash bin slash activate'''<br /> <br /> <br /> Press '''Enter.'''<br /> |- style=&quot;border:1pt solid #000000;padding:0.176cm;&quot;<br /> || <br /> || The '''shell''' now uses an instance of '''Python '''from our '''virtual environment.'''<br /> |- style=&quot;border:1pt solid #000000;padding:0.176cm;&quot;<br /> || [Terminal]<br /> <br /> Highlight<br /> <br /> (flask_env)<br /> || Once activated, notice the change in the '''terminal'''. <br /> <br /> <br /> We can see the name of the virtual environment '''flask_venv''' inside parentheses, in the '''terminal'''.<br /> <br /> <br /> This indicates that we are inside an activated '''virtual''' '''environment''' called '''flask_venv'''.<br /> |- style=&quot;border:1pt solid #000000;padding:0.176cm;&quot;<br /> || [Terminal]<br /> <br /> Type<br /> <br /> $ python3 -V<br /> || We should now make sure that we are using '''Python 3''' inside this '''Virtual Environment.''' <br /> <br /> <br /> For that, type '''python3 &lt;space&gt; hyphen capital V''' and press '''Enter.'''<br /> <br /> <br /> In my case it shows '''Python 3.5.2'''.<br /> |- style=&quot;border:1pt solid #000000;padding:0.176cm;&quot;<br /> || [Terminal]<br /> <br /> Typing<br /> <br /> $ pip3 install flask<br /> || Next let us install '''flask''' inside '''venv'''.<br /> <br /> <br /> Type '''pip3&lt;space&gt; install &lt;space&gt; flask '''and press '''Enter.'''<br /> <br /> <br /> This will install the '''Flask''' package only for this '''venv''' and not system wide. <br /> |- style=&quot;border:1pt solid #000000;padding:0.176cm;&quot;<br /> || [Terminal]<br /> <br /> Highlight<br /> <br /> “...installed Flask-1.0.2 Jinja2-2.10 MarkupSafe-1.0 Werkzeug-0.14.1...”<br /> || Some associated packages like '''Jinja2''', '''MarkupSafe''' and '''Werkzeug''' will also get installed.<br /> |- style=&quot;border:1pt solid #000000;padding:0.176cm;&quot;<br /> || [Terminal]<br /> <br /> <br /> Type<br /> <br /> <br /> $pip list<br /> || To confirm, whether '''Flask''' has been installed or not, type <br /> <br /> '''pip &lt;space&gt; list'''<br /> <br /> <br /> And press '''Enter.'''<br /> |- style=&quot;border:1pt solid #000000;padding:0.176cm;&quot;<br /> || [Terminal]<br /> <br /> <br /> Highlight flask, jinja2, werkzeug.<br /> || Observe that we have '''flask, jinja2, werkzeug''' etc.<br /> <br /> <br /> That means our '''Flask''' installation was successful.<br /> |- style=&quot;border:1pt solid #000000;padding:0.176cm;&quot;<br /> || [Terminal]<br /> || Let us see the working of '''Flask''' by writing a simple '''‘hello world’ app'''.<br /> |- style=&quot;border:1pt solid #000000;padding:0.176cm;&quot;<br /> || Only narration<br /> || Let’s create a '''python''' file at the same level as '''flask_venv'''.<br /> <br /> <br /> This is so that the '''flask_venv '''is logically separated from the '''hello world app'''.<br /> |- style=&quot;border:1pt solid #000000;padding:0.176cm;&quot;<br /> || Only narration<br /> || I will be using '''atom text editor.'''<br /> <br /> <br /> However, you can use any''' text editor''' of your choice.<br /> |- style=&quot;border:1pt solid #000000;padding:0.176cm;&quot;<br /> || [Terminal]<br /> <br /> <br /> $ atom hello_flask.py<br /> || Type the command<br /> <br /> <br /> '''atom &lt;space&gt; hello underscore flask dot py'''<br /> <br /> <br /> and press '''Enter.'''<br /> |- style=&quot;border:1pt solid #000000;padding:0.176cm;&quot;<br /> || <br /> || This will open the file in the '''text editor '''window.<br /> |- style=&quot;border:1pt solid #000000;padding:0.176cm;&quot;<br /> || [Text Editor]<br /> <br /> <br /> from flask import Flask<br /> <br /> app = Flask(__name__)<br /> <br /> <br /> @app.route('/')<br /> <br /> def hello_world():<br /> <br /> (Tab)return 'Hello, World!'<br /> || Type the code as shown here. <br /> <br /> <br /> Which will launch a very simple '''built-in server.'''<br /> <br /> <br /> <br /> |- style=&quot;border:1pt solid #000000;padding:0.176cm;&quot;<br /> || [Text Editor]<br /> || We will discuss this '''program''' and its '''elements''' in detail in later tutorials.<br /> |- style=&quot;border:1pt solid #000000;padding:0.176cm;&quot;<br /> || Save the file by pressing Ctrl+S.<br /> || For now, let’s save the file by pressing '''Ctrl and S''' keys together.<br /> |- style=&quot;border:1pt solid #000000;padding:0.176cm;&quot;<br /> || Click close button.<br /> || Then close the editor by clicking on the '''close''' button at the top left corner of the window.<br /> |- style=&quot;border:1pt solid #000000;padding:0.176cm;&quot;<br /> || [Terminal]<br /> <br /> Type<br /> <br /> <br /> $ export FLASK_APP=hello_flask.py<br /> || Come back to the '''terminal''', and type<br /> <br /> '''export &lt;space&gt; FLASK_APP &lt;equal to&gt; hello underscore flask dot py'''<br /> <br /> <br /> And press '''Enter'''.<br /> |- style=&quot;border:1pt solid #000000;padding:0.176cm;&quot;<br /> || Only narration.<br /> || This command sets an '''environment variable '''named '''FLASK_APP''' with the '''python '''file-name.<br /> <br /> <br /> The '''FLASK_APP variable '''specifies the '''module '''to import while running our '''app'''.<br /> <br /> <br /> This tells the '''terminal''' which '''flask app '''to work with.<br /> |- style=&quot;border:1pt solid #000000;padding:0.176cm;&quot;<br /> || [Terminal]<br /> <br /> <br /> Type<br /> <br /> $ echo $FLASK_APP<br /> || It is possible to verify that we have indeed set '''FLASK_APP variable''' by the filename.<br /> <br /> <br /> To do that type<br /> <br /> '''echo &lt;space&gt; &lt;dollar&gt; FLASK underscore APP'''<br /> <br /> And press''' Enter.'''<br /> |- style=&quot;border:1pt solid #000000;padding:0.176cm;&quot;<br /> || Point to the output<br /> || Observe that we got the filename '''hello underscore flask dot py''' back.<br /> |- style=&quot;border:1pt solid #000000;padding:0.176cm;&quot;<br /> || [Terminal]<br /> <br /> Type<br /> <br /> <br /> $ python3 -m flask run<br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> [Enter]<br /> || Now type<br /> <br /> '''python3 &lt;space&gt; hyphen m &lt;space&gt; flask &lt;space&gt; run'''<br /> <br /> <br /> This command runs the '''flask application''' named '''hello underscore flask'''.<br /> <br /> <br /> The file to execute is the one given by the '''FLASK_APP environment variable.'''<br /> <br /> <br /> We have already set that in the previous step.<br /> <br /> <br /> Press '''Enter'''.<br /> |- style=&quot;border:1pt solid #000000;padding:0.176cm;&quot;<br /> || Point to the message<br /> || If all goes well, you should see a message <br /> <br /> '''“Running on [http://127.0.0.1:5000/ http://127.0.0.1:5000/]”'''<br /> <br /> <br /> This implies that the '''server''' is running locally.<br /> |- style=&quot;border:1pt solid #000000;padding:0.176cm;&quot;<br /> || [Firefox]<br /> <br /> Type <br /> <br /> [http://127.0.0.1:5000/ http://127.0.0.1:5000/]<br /> <br /> And press Enter.<br /> || Now, open a web browser.<br /> <br /> <br /> In the address bar, type [http://127.0.0.1:5000/ http://127.0.0.1:5000/] and press '''Enter'''.<br /> |- style=&quot;border:1pt solid #000000;padding:0.176cm;&quot;<br /> || Highlight ‘Hello, World!’<br /> || We can see the message ‘'''Hello, World!'''’ written in the browser window. <br /> <br /> <br /> Which means that '''Flask '''is working fine in the '''Virtual Environment'''.<br /> |-<br /> | style=&quot;background-color:#ffffff;border-top:1pt solid #000000;border-bottom:0.5pt solid #000000;border-left:0.5pt solid #000000;border-right:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;&quot; | Switch to Terminal<br /> | style=&quot;background-color:#ffffff;border-top:1pt solid #000000;border-bottom:0.5pt solid #000000;border-left:0.5pt solid #000000;border-right:0.5pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;&quot; | Let us go back to the '''terminal.'''<br /> |-<br /> | style=&quot;background-color:#ffffff;border-top:1pt solid #000000;border-bottom:0.5pt solid #000000;border-left:0.5pt solid #000000;border-right:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;&quot; | Press Ctrl+c simultaneously <br /> | style=&quot;background-color:#ffffff;border-top:1pt solid #000000;border-bottom:0.5pt solid #000000;border-left:0.5pt solid #000000;border-right:0.5pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;&quot; | To stop the '''server''', press '''Ctrl''' and '''C''' keys simultaneously.<br /> |-<br /> | style=&quot;border-top:1pt solid #000000;border-bottom:0.5pt solid #000000;border-left:0.5pt solid #000000;border-right:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;&quot; | [Terminal]<br /> <br /> Type deactivate and press Enter<br /> | style=&quot;border-top:1pt solid #000000;border-bottom:0.5pt solid #000000;border-left:0.5pt solid #000000;border-right:0.5pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;&quot; | When the '''Virtual Environment''' is not in use, we can deactivate it.<br /> <br /> <br /> To do so, type '''deactivate''' and press '''Enter'''.<br /> |-<br /> | style=&quot;border-top:1pt solid #000000;border-bottom:0.5pt solid #000000;border-left:0.5pt solid #000000;border-right:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;&quot; | [Terminal]<br /> <br /> Point the shell prompt<br /> | style=&quot;border-top:1pt solid #000000;border-bottom:0.5pt solid #000000;border-left:0.5pt solid #000000;border-right:0.5pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;&quot; | We can see that the '''flask_venv '''name disappears from the '''command prompt.'''<br /> |-<br /> | style=&quot;border-top:1pt solid #000000;border-bottom:0.5pt solid #000000;border-left:0.5pt solid #000000;border-right:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;&quot; | Narration only<br /> | style=&quot;border-top:1pt solid #000000;border-bottom:0.5pt solid #000000;border-left:0.5pt solid #000000;border-right:0.5pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;&quot; | With this, we come to the end of this tutorial.<br /> <br /> <br /> Let us summarize.<br /> |- style=&quot;border:1pt solid #000000;padding:0.176cm;&quot;<br /> || Slide 9: Summary<br /> || In this tutorial we learnt to* &lt;div style=&quot;margin-left:1.27cm;margin-right:0cm;&quot;&gt;Create a '''Virtual Environment.'''&lt;/div&gt;<br /> * &lt;div style=&quot;margin-left:1.27cm;margin-right:0cm;&quot;&gt;Activate and deactivate the '''Virtual Environment'''.&lt;/div&gt;<br /> * &lt;div style=&quot;margin-left:1.27cm;margin-right:0cm;&quot;&gt;Install '''Flask '''and&lt;/div&gt;<br /> * &lt;div style=&quot;margin-left:1.27cm;margin-right:0cm;&quot;&gt;Launch '''“Hello world”''' in '''Flask'''.&lt;/div&gt;<br /> <br /> <br /> |-<br /> | style=&quot;border-top:1pt solid #000000;border-bottom:0.5pt solid #000000;border-left:0.5pt solid #000000;border-right:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;&quot; | Slide: About Spoken Tutorial project<br /> | style=&quot;border-top:1pt solid #000000;border-bottom:0.5pt solid #000000;border-left:0.5pt solid #000000;border-right:0.5pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;&quot; | The video at the following link summarises the Spoken Tutorial project.<br /> <br /> <br /> Please download and watch it.<br /> |-<br /> | style=&quot;background-color:#ffffff;border-top:1pt solid #000000;border-bottom:0.5pt solid #000000;border-left:0.5pt solid #000000;border-right:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;&quot; | Slide:<br /> <br /> Spoken Tutorial workshops<br /> | style=&quot;background-color:#ffffff;border-top:1pt solid #000000;border-bottom:0.5pt solid #000000;border-left:0.5pt solid #000000;border-right:0.5pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;&quot; | &lt;span style=&quot;background-color:#ffffff;&quot;&gt;The&amp;nbsp;&lt;/span&gt;&lt;span style=&quot;background-color:#ffffff;&quot;&gt;'''Spoken Tutorial Project'''&lt;/span&gt;&lt;span style=&quot;background-color:#ffffff;&quot;&gt;&amp;nbsp;team &lt;/span&gt;conducts workshops and gives certificates.<br /> <br /> <br /> For more details, please write to us.<br /> |-<br /> | style=&quot;border-top:1pt solid #000000;border-bottom:0.5pt solid #000000;border-left:0.5pt solid #000000;border-right:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;&quot; | Slide: Forum for specific questions:<br /> | style=&quot;border-top:1pt solid #000000;border-bottom:0.5pt solid #000000;border-left:0.5pt solid #000000;border-right:0.5pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;&quot; | * &lt;div style=&quot;margin-left:1.27cm;margin-right:0cm;&quot;&gt;Do you have questions in this Spoken Tutorial?&lt;/div&gt;<br /> * &lt;div style=&quot;margin-left:1.27cm;margin-right:0cm;&quot;&gt;Please visit this site&lt;/div&gt;<br /> * &lt;div style=&quot;margin-left:1.27cm;margin-right:0cm;&quot;&gt;Choose the minute and second where you have the question.&lt;/div&gt;<br /> * &lt;div style=&quot;margin-left:1.27cm;margin-right:0cm;&quot;&gt;Explain your question briefly.&lt;/div&gt;<br /> * &lt;div style=&quot;margin-left:1.27cm;margin-right:0cm;&quot;&gt;Someone from our team will answer them.&lt;/div&gt;<br /> <br /> <br /> |-<br /> | style=&quot;border-top:1pt solid #000000;border-bottom:0.5pt solid #000000;border-left:0.5pt solid #000000;border-right:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;&quot; | Slide: Forum for specific questions:<br /> | style=&quot;border-top:1pt solid #000000;border-bottom:0.5pt solid #000000;border-left:0.5pt solid #000000;border-right:0.5pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;&quot; | * &lt;div style=&quot;margin-left:1.27cm;margin-right:0cm;&quot;&gt;The Spoken Tutorial forum is for specific questions on this tutorial.&lt;/div&gt;<br /> * &lt;div style=&quot;margin-left:1.27cm;margin-right:0cm;&quot;&gt;Please do not post unrelated and general questions on them.&lt;/div&gt;<br /> * &lt;div style=&quot;margin-left:1.27cm;margin-right:0cm;&quot;&gt;This will help reduce the clutter.&lt;/div&gt;<br /> * &lt;div style=&quot;margin-left:1.27cm;margin-right:0cm;&quot;&gt;With less clutter, we can use these discussion as instructional material.&lt;/div&gt;<br /> <br /> <br /> |-<br /> | style=&quot;background-color:#ffffff;border-top:1pt solid #000000;border-bottom:0.5pt solid #000000;border-left:0.5pt solid #000000;border-right:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;&quot; | Slide: Acknowledgement<br /> | style=&quot;border-top:1pt solid #000000;border-bottom:0.5pt solid #000000;border-left:0.5pt solid #000000;border-right:0.5pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;&quot; | Spoken Tutorial Project is funded by NMEICT, MHRD, Government of India.<br /> <br /> <br /> More information on this mission is available at this link.<br /> |- style=&quot;border:1pt solid #000000;padding:0.176cm;&quot;<br /> || <br /> || This is Siddhartha Sarkar signing off. Thanks for watching.<br /> |-<br /> |}</div>

SiddharthaSarkar https://script.spoken-tutorial.org/index.php/Python-Flask/C2/Request-Response-Cycle-in-a-Flask-Web-App/English 2018-12-26T12:29:42Z

<p>SiddharthaSarkar: Created page with &quot;'''Title of script: The Request-Response Cycle in a Flask web app''' '''Author: Siddhartha Sarkar''' Keywords: ​Video tutorial, Python Flask, view functions, request objec...&quot;</p> <hr /> <div>'''Title of script: The Request-Response Cycle in a Flask web app'''<br /> <br /> '''Author: Siddhartha Sarkar'''<br /> <br /> Keywords: ​Video tutorial, Python Flask, view functions, request object, HTTP response, debugging.<br /> <br /> <br /> <br /> {| class=&quot;wikitable&quot; style=&quot;border-spacing:0;width:17.489cm;&quot;<br /> |- style=&quot;background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;&quot;<br /> | align=center| '''Visual Cue'''<br /> | align=center| '''Narration'''<br /> |- style=&quot;background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;&quot;<br /> || '''Slide 1: The Request-Response Cycle in a Flask web app'''<br /> || Welcome to the Spoken Tutorial on''' the request-response cycle in a Flask web app.'''<br /> |- style=&quot;background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;&quot;<br /> || '''Slide 2: Learning Objectives'''<br /> || In this tutorial, we will learn<br /> * &lt;div style=&quot;margin-left:1.27cm;margin-right:0cm;&quot;&gt;About the '''request-response''' cycle in '''Flask'''.&lt;/div&gt;<br /> * &lt;div style=&quot;margin-left:1.27cm;margin-right:0cm;&quot;&gt;Different '''attributes''' of the '''request object'''.&lt;/div&gt;<br /> * &lt;div style=&quot;margin-left:1.27cm;margin-right:0cm;&quot;&gt;Different '''types''' of '''request data'''.&lt;/div&gt;<br /> * &lt;div style=&quot;margin-left:1.27cm;margin-right:0cm;&quot;&gt;Several '''HTTP''' '''response codes'''.&lt;/div&gt;<br /> <br /> <br /> |- style=&quot;background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;&quot;<br /> || '''Slides 3: System Requirements'''<br /> || To record this tutorial, I’m using<br /> * &lt;div style=&quot;margin-left:1.27cm;margin-right:0cm;&quot;&gt;'''Ubuntu Linux 16.04''' '''OS'''&lt;/div&gt;<br /> * &lt;div style=&quot;margin-left:1.27cm;margin-right:0cm;&quot;&gt;'''Python''' '''3.5.2'''&lt;/div&gt;<br /> * &lt;div style=&quot;margin-left:1.27cm;margin-right:0cm;&quot;&gt;'''Atom text editor 1.22.1 '''and''' '''&lt;/div&gt;<br /> * &lt;div style=&quot;margin-left:1.27cm;margin-right:0cm;&quot;&gt;'''Firefox web browser'''&lt;/div&gt;<br /> <br /> <br /> You can use any text editor and web browser of your choice.<br /> |- style=&quot;background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;&quot;<br /> || '''Slide 5:'''<br /> <br /> '''Pre-requisites'''<br /> <br /> <br /> || To follow this tutorial, you should have working knowledge of<br /> * &lt;div style=&quot;margin-left:1.27cm;margin-right:0cm;&quot;&gt;'''Linux commands'''&lt;/div&gt;<br /> * &lt;div style=&quot;margin-left:1.27cm;margin-right:0cm;&quot;&gt;'''Python programming '''and &lt;/div&gt;<br /> * &lt;div style=&quot;margin-left:1.27cm;margin-right:0cm;&quot;&gt;'''HTML '''syntax&lt;/div&gt;<br /> <br /> If not, then please go through the corresponding tutorials on this website. http://spoken-tutorial.org<br /> |- style=&quot;background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;&quot;<br /> || '''Slide 6''': '''The request object'''<br /> || We already said that the '''Flask app''' instance has to process the received '''request'''.<br /> <br /> <br /> For processing, the '''app '''instance needs to have access to certain information.<br /> |- style=&quot;background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;&quot;<br /> || '''Slide 6''': '''The request object'''<br /> || A few '''objects '''are provided to the '''view functions,''' where the processing takes place.<br /> <br /> <br /> One of these '''objects '''is the '''request object'''.<br /> <br /> <br /> This '''object '''encapsulates the contents of the '''HTTP request '''sent by the '''client'''.<br /> |- style=&quot;background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;&quot;<br /> || '''Slide 7''': '''The request object'''<br /> || The incoming '''request '''data can be of several forms. For example<br /> * &lt;div style=&quot;margin-left:1.27cm;margin-right:0cm;&quot;&gt;'''Query arguments''' sent as part of the '''URL '''in the '''browser'''.&lt;/div&gt;<br /> * &lt;div style=&quot;margin-left:1.27cm;margin-right:0cm;&quot;&gt;'''Form data''' collected from '''web forms.'''&lt;/div&gt;<br /> <br /> <br /> We will discuss them in detail in this tutorial.<br /> |-<br /> | style=&quot;background-color:#ffffff;border-top:1pt solid #000001;border-bottom:0.5pt solid #000001;border-left:0.5pt solid #000001;border-right:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;&quot; | Open a Terminal window<br /> <br /> <br /> | style=&quot;background-color:#ffffff;border-top:1pt solid #000001;border-bottom:0.5pt solid #000001;border-left:0.5pt solid #000001;border-right:0.5pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;&quot; | Let us open the '''Terminal''' by pressing '''Ctrl''', '''Alt''' and '''T''' keys simultaneously on the keyboard.<br /> |- style=&quot;background-color:#ffffff;border:0.5pt solid #000001;padding:0.106cm;&quot;<br /> || [Terminal]<br /> <br /> Type cd project_flask &amp; Press Enter<br /> || Now go to the folder '''project underscore flask''' which we created earlier using '''cd''' '''command.'''<br /> |- style=&quot;background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;&quot;<br /> || [Terminal]<br /> <br /> <br /> $ . flask_venv/bin/activate<br /> <br /> <br /> [Enter]<br /> || Let us activate our '''virtualenv'''.<br /> <br /> <br /> Type the command<br /> <br /> <br /> '''Dot space flask_venv slash bin slash activate'''<br /> <br /> And press '''Enter'''.<br /> |- style=&quot;background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;&quot;<br /> || [Terminal]<br /> <br /> Highlight (flask_venv)<br /> || Notice that we are now inside the '''virtual environment flask_venv.'''<br /> |- style=&quot;background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;&quot;<br /> || [Terminal]<br /> <br /> Type<br /> <br /> $ atom hello_flask.py<br /> || Let’s open the '''hello_flask.py''' file in a text editor, which we created earlier in this series..<br /> |- style=&quot;background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;&quot;<br /> || [Text Editor]<br /> <br /> Type “'', request''”<br /> <br /> || Let’s look at how the '''request object''' is made available in a '''view function'''.<br /> <br /> <br /> We will import the '''request object''' from the '''flask library.'''<br /> <br /> <br /> In the line '''from flask import Flask, '''we will add '''comma space request'''<br /> |- style=&quot;background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;&quot;<br /> || [Text editor]<br /> <br /> Type in hello_world():<br /> <br /> (As the first line)<br /> <br /> <br /> print(&quot;Request method is &quot; + request.method)<br /> || The '''request object''' has many '''attributes'''.<br /> <br /> <br /> Let us access '''request''' inside the '''hello_world view function.'''<br /> <br /> <br /> Next to the '''function''' definition, type the code as shown.<br /> <br /> <br /> <br /> |- style=&quot;background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;&quot;<br /> || Highlight <br /> <br /> <br /> print(&quot;Request method is &quot; + request.method)<br /> || This will print the '''method attribute''' of the '''request object.'''<br /> <br /> <br /> <br /> |- style=&quot;background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;&quot;<br /> || Press Ctrl+S<br /> || Save the file.<br /> |- style=&quot;background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;&quot;<br /> || [Terminal]<br /> <br /> Type <br /> <br /> <br /> $ export FLASK_APP=hello_flask.py<br /> <br /> <br /> <br /> || Let us start the '''server''' to see the changes.<br /> <br /> <br /> Type '''export &lt;space&gt; FLASK_APP &lt;equal to &gt; hello underscore flask dot py'''<br /> <br /> <br /> And press '''Enter'''.<br /> |- style=&quot;background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;&quot;<br /> || [Terminal]<br /> <br /> Type<br /> <br /> <br /> $ python3 -m flask run<br /> <br /> [Enter]<br /> || Now type<br /> <br /> '''python3 &lt;space&gt; hyphen m &lt;space&gt; flask &lt;space&gt; run'''<br /> <br /> <br /> And press '''Enter'''.<br /> |- style=&quot;background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;&quot;<br /> || [Firefox]<br /> <br /> Type <br /> <br /> [http://127.0.0.1:5000/ http://localhost:5000/]<br /> <br /> And press Enter.<br /> || Next, open a web browser.<br /> <br /> <br /> In the '''address bar,''' type [http://127.0.0.1:5000/ http://localhost:5000/] and press '''Enter'''.<br /> |- style=&quot;background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;&quot;<br /> || Highlight the output<br /> || We got the output as '''Hello World.'''<br /> |- style=&quot;background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;&quot;<br /> || [Terminal]<br /> || Switch to the '''terminal '''once again.<br /> |- style=&quot;background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;&quot;<br /> || Highlight “Request method is Get”<br /> || Observe that the current '''request method '''is “'''GET'''”.<br /> <br /> <br /> The '''request object''' is indeed accessible inside the '''view functions'''.<br /> <br /> <br /> The '''GET HTTP method''' is used to retrieve '''data''' from the '''web server'''.<br /> <br /> <br /> It specifies the '''parameters''' in the '''URL''' of the '''request '''itself.<br /> |- style=&quot;background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;&quot;<br /> || Only narration.<br /> || Now let us see how one can send '''data''' to the '''server '''using the '''request object'''.<br /> <br /> <br /> There are a number of ways to do this.<br /> <br /> <br /> The simplest one is via '''Query Arguments'''.<br /> |- style=&quot;background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;&quot;<br /> || <br /> [Text Editor]<br /> <br /> Type<br /> <br /> @app.route('/query')<br /> <br /> def query_args():<br /> <br /> (Tab)framework = request.args['framework']<br /> <br /> &lt;nowiki&gt;(Tab)return '''&lt;h1&gt;The framework value is: {}&lt;/h1&gt;'''.format(framework)<br /> &lt;/nowiki&gt;<br /> || Let us define a new '''route''' to explain this. <br /> <br /> <br /> Switch back to the '''editor'''.<br /> <br /> <br /> Before the '''if condition''', type the code as shown here.<br /> <br /> <br /> We will call it as '''query'''.<br /> |- style=&quot;background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;&quot;<br /> || Press Ctrl+S<br /> || Save the file.<br /> |- style=&quot;background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;&quot;<br /> || Highlight <br /> <br /> &lt;nowiki&gt;<br /> &lt;h1&gt;The framework value is: {}&lt;/h1&gt;<br /> &lt;/nowiki&gt;<br /> || Here we have written the '''statement''' inside the '''HTML’s h1 heading tag'''. <br /> |- style=&quot;background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;&quot;<br /> || Highlight '''args''' in<br /> <br /> '''framework = request.args['framework']'''<br /> <br /> <br /> <br /> || Here we have an '''attribute''' called '''args''' in the '''request object'''.<br /> <br /> <br /> This is a '''dictionary object'''.<br /> <br /> <br /> It has the '''parsed''' contents of the '''query string '''in the '''URL'''.<br /> <br /> <br /> We will use this '''attribute '''to retrieve the '''data '''sent as '''query arguments.'''<br /> |- style=&quot;background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;&quot;<br /> || [Terminal]<br /> || Switch to the '''terminal'''.<br /> |- style=&quot;background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;&quot;<br /> || Press Ctrl+C<br /> || Press '''Ctrl''' and '''C''' keys to stop the '''server'''.<br /> |- style=&quot;background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;&quot;<br /> || Type<br /> <br /> <br /> $ python3 -m flask run [Enter]<br /> || Press the '''up arrow''' key to get the '''command''' to run the '''flask application.'''<br /> <br /> <br /> And press '''Enter'''.<br /> |- style=&quot;background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;&quot;<br /> || [Firefox]<br /> || Switch to the '''web browser. '''<br /> |- style=&quot;background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;&quot;<br /> || Type <br /> <br /> [http://127.0.0.1:5000/ http://localhost:5000/query]<br /> <br /> And press Enter.<br /> || In the '''address bar''', next to '''5000''' type '''slash query'''<br /> <br /> and press '''Enter'''.<br /> |- style=&quot;background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;&quot;<br /> || Highlight the error<br /> || We get a “'''Bad request'''” error.<br /> |- style=&quot;background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;&quot;<br /> || [Terminal]<br /> || Switch back to the '''terminal'''.<br /> |- style=&quot;background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;&quot;<br /> || Highlight<br /> <br /> <br /> &quot;GET /query HTTP/1.1&quot; 400 -<br /> <br /> <br /> || Notice that this '''response '''has '''HTTP code 400'''.<br /> <br /> <br /> This is one of the common errors you will encounter while developing '''Flask applications'''.<br /> <br /> <br /> '''400 code''' indicates that the '''server''' could not understand the '''request''' due to invalid '''syntax'''.<br /> |- style=&quot;background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;&quot;<br /> || Only narration.<br /> || So now we have to find out where this '''syntax''' issue has occurred.<br /> <br /> <br /> We will scan the code to spot the error.<br /> <br /> <br /> This is called '''debugging'''.<br /> |- style=&quot;background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;&quot;<br /> || [Text Editor]<br /> <br /> Press Ctrl+C<br /> <br /> || For this, we have to start the '''server''' in the '''debug mode'''.<br /> <br /> Before that, we need to stop the current '''server''' by pressing '''Ctrl''' and '''C '''keys together.<br /> |- style=&quot;background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;&quot;<br /> || [Terminal]<br /> <br /> Type <br /> <br /> $ export FLASK_ENV=development<br /> || Then type '''export &lt;space&gt;FLASK &lt;underscore&gt; ENV &lt;equal to&gt; development'''<br /> <br /> and press '''Enter'''.<br /> |- style=&quot;background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;&quot;<br /> || [Terminal]<br /> <br /> Type<br /> <br /> $ python3 -m flask run<br /> || Now type<br /> <br /> '''python3&lt;space&gt;(hyphen)m&lt;space&gt;flask&lt;space&gt;run'''<br /> <br /> <br /> And press '''Enter'''.<br /> |- style=&quot;background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;&quot;<br /> || [Terminal]<br /> <br /> <br /> Highlight'' Debug mode: on''<br /> || Observe that now it says '''debug mode''' is '''on'''.<br /> <br /> <br /> |- style=&quot;background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;&quot;<br /> || [Firefox]<br /> <br /> <br /> Click on the refresh button.<br /> || Go back to the '''browser''' and '''refresh''' the page.<br /> <br /> <br /> Since the '''debug mode''' is active, we have received a '''traceback''' of errors.<br /> <br /> <br /> This means that we get the line numbers where the errors have occurred in different files.<br /> |- style=&quot;background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;&quot;<br /> || Highlight the different error lines in the traceback of errors.<br /> <br /> <br /> <br /> || The '''traceback''' includes the errors from the corresponding '''flask''' files as well.<br /> <br /> <br /> This is because an error in one file causes errors in other files as well.<br /> <br /> <br /> This is termed as the '''cascading''' '''effect'''.<br /> <br /> <br /> We have to look for the error in a file that we have written.<br /> |- style=&quot;background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;&quot;<br /> || Highlight<br /> <br /> <br /> framework = request.args['framework']<br /> || Scroll down and search for the error in the file '''hello_flask.py'''<br /> |- style=&quot;background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;&quot;<br /> || Highlight<br /> <br /> <br /> BadRequestKeyError<br /> <br /> <br /> <br /> || We have a '''BadRequestKeyError''' here.<br /> <br /> <br /> That means that the '''key “framework”''' for the '''dictionary request.args''' does not exist.<br /> <br /> <br /> To rectify this, we have to modify that line.<br /> |- style=&quot;background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;&quot;<br /> || [Text editor]<br /> <br /> <br /> Type<br /> <br /> <br /> framework = request.args.get('framework')<br /> || Switch to the '''editor'''.<br /> <br /> <br /> Now change the '''framework value '''as shown.<br /> <br /> <br /> |- style=&quot;background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;&quot;<br /> || Press Ctrl+S<br /> || Save the file.<br /> |- style=&quot;background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;&quot;<br /> || [Text Editor]<br /> <br /> <br /> Highlight<br /> <br /> <br /> framework = request.args.get('framework')<br /> || Now even if the '''key''' is not found, '''python''' will handle this properly.<br /> <br /> That means, instead of causing a '''400 error''', it will return '''None'''.<br /> |- style=&quot;background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;&quot;<br /> || [Terminal]<br /> || Switch to the '''terminal.'''<br /> |- style=&quot;background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;&quot;<br /> || Press Ctrl+C<br /> || Once again stop the '''server''' by pressing '''Ctrl''' and '''C''' keys together.<br /> |- style=&quot;background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;&quot;<br /> || Type python3 -m flask run<br /> || Then run the '''server''' again.<br /> |- style=&quot;background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;&quot;<br /> || [Firefox]<br /> || Go back to the '''browser''' and refresh the page.<br /> |- style=&quot;background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;&quot;<br /> || Click on the refresh button.<br /> || Now we have the output that we expected. <br /> <br /> <br /> The '''framework value''' is '''None'''.<br /> |- style=&quot;background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;&quot;<br /> || <br /> || Next, we will send some value for the '''framework '''via the '''URL'''.<br /> |- style=&quot;background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;&quot;<br /> || [Firefox]<br /> <br /> <br /> Click on the address bar<br /> || '''args''' gets the part of the '''URL '''after the question mark in the form of a '''python dictionary'''.<br /> |- style=&quot;background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;&quot;<br /> || [Firefox]<br /> <br /> <br /> Type [http://127.0.0.1:5000/query?framework=my_flask http://127.0.0.1:5000/query?framework=my_flask]<br /> || In the '''address bar,''' next to the word '''query''' type:<br /> <br /> <br /> '''Question mark framework &lt;equal to&gt; my underscore flask'''<br /> <br /> And press '''Enter.'''<br /> |- style=&quot;background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;&quot;<br /> || Highlight:<br /> <br /> <br /> The framework value is: my_flask<br /> || So now we have the '''framework attribute''' of the '''dictionary''' set to '''my_flask'''.<br /> <br /> <br /> We got the result as expected.<br /> |- style=&quot;background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;&quot;<br /> || '''Slide 8''': '''form attribute'''<br /> || The '''request object''' has one more important '''attribute''' called '''‘form’'''.<br /> <br /> <br /> It can be used to collect '''data''' from the '''user''' using a '''web form'''.<br /> <br /> <br /> And then store the '''data '''as a '''dictionary '''in the '''form attribute'''.<br /> <br /> <br /> Let us look at an example.<br /> |- style=&quot;background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;&quot;<br /> || [Text Editor]<br /> <br /> <br /> Type<br /> <br /> @app.route('/form', methods=['GET', 'POST']) <br /> <br /> || We will see how '''form data''' can be sent and received using the '''request object.'''<br /> <br /> Let us define a new '''route''' called '''form'''.<br /> <br /> We allow both '''GET''' and '''POST''' as possible '''request''' '''methods'''.<br /> <br /> Before the''' if statement,''' type the code as shown here.<br /> |- style=&quot;background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;&quot;<br /> || [Text Editor]<br /> <br /> <br /> Type<br /> <br /> def my_form():<br /> <br /> if request.method == 'POST':<br /> <br /> firstname = request.form.get('firstname')<br /> <br /> lastname = request.form.get('lastname')<br /> || Now inside this '''form route''', define a '''view function''' '''my_form'''()<br /> <br /> <br /> Once again, type the code as shown here.<br /> <br /> |- style=&quot;background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;&quot;<br /> || Highlight:<br /> <br /> <br /> if request.method == 'POST':<br /> <br /> firstname = request.form.get('firstname')<br /> <br /> lastname = request.form.get('lastname')<br /> || <br /> <br /> <br /> This '''block''' will get executed, if the '''request''' is via '''POST method.'''<br /> |- style=&quot;background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;&quot;<br /> || '''Slide 9''': '''POST method'''<br /> || In '''POST request method'''<br /> <br /> <br /> * &lt;div style=&quot;margin-left:1.27cm;margin-right:0cm;&quot;&gt;the '''client''' will send '''data''' to the '''server''' using the '''form'''.&lt;/div&gt;<br /> * &lt;div style=&quot;margin-left:1.27cm;margin-right:0cm;&quot;&gt;This is to update the '''server''' with some information&lt;/div&gt;<br /> <br /> <br /> |- style=&quot;background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;&quot;<br /> || '''Slide 9''': '''POST method'''<br /> || * &lt;div style=&quot;margin-left:1.27cm;margin-right:0cm;&quot;&gt;For example - you enter your '''username''' and '''password''' while logging in to a website.&lt;/div&gt;<br /> * &lt;div style=&quot;margin-left:1.27cm;margin-right:0cm;&quot;&gt;In contrast, '''GET request method '''is used to get or read some '''data '''from the '''server'''.&lt;/div&gt;<br /> <br /> <br /> |- style=&quot;background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;&quot;<br /> || Only narration <br /> <br /> <br /> || Now let us store the '''form''' values into some '''variables'''.<br /> <br /> <br /> We will obtain the entered values from the '''request object''' using the '''form''' '''attribute'''.<br /> |- style=&quot;background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;&quot;<br /> || [Text Editor]<br /> || Switch back to the '''editor'''.<br /> |- style=&quot;background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;&quot;<br /> || Type<br /> <br /> <br /> &lt;nowiki&gt;html_string1 = '''&lt;h1&gt;The firstname value is: {}&lt;/h1&gt; &lt;/nowiki&gt;<br /> <br /> &lt;nowiki&gt; &lt;h1&gt;The lastname value is: {}&lt;/h1&gt;'''.format(firstname, lastname) &lt;/nowiki&gt;<br /> <br /> <br /> return html_string1<br /> || Inside the '''if condition''' which checks the''' post method, '''type the following piece of code.<br /> <br /> <br /> This code will display the values of '''firstname''' and '''lastname'''.<br /> <br /> <br /> <br /> |- style=&quot;background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;&quot;<br /> || [Text Editor]<br /> <br /> <br /> Type<br /> <br /> <br /> html_string2 = '''&lt;form method=&quot;POST&quot;&gt;<br /> <br /> Firstname: &lt;input type=&quot;text&quot; name=&quot;firstname&quot;&gt;&lt;br&gt;<br /> <br /> Lastname: &lt;input type=&quot;text&quot; name=&quot;lastname&quot;&gt;&lt;br&gt;<br /> <br /> &lt;input type=&quot;submit&quot; value=&quot;Submit&quot;&gt;&lt;br&gt;<br /> <br /> &lt;/form&gt;'''<br /> <br /> <br /> return html_string2<br /> || Now outside the''' if condition''', type the following code.<br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> This will simply display a '''web form''' in the output, if the '''request method''' is '''GET.'''<br /> |- style=&quot;background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;&quot;<br /> || Press Ctrl + S<br /> || Save the file.<br /> |- style=&quot;background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;&quot;<br /> || [Terminal]<br /> || Switch back to the '''terminal'''.<br /> |- style=&quot;background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;&quot;<br /> || Press Ctrl+C<br /> || Stop the '''server''' by pressing '''Ctrl''' and '''C''' keys together.<br /> |- style=&quot;background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;&quot;<br /> || Type python3 -m flask run<br /> || Then run the '''server''' again.<br /> |- style=&quot;background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;&quot;<br /> || [Firefox]<br /> <br /> <br /> Type [http://127.0.0.1:5000/form http://127.0.0.1:5000/form]<br /> <br /> <br /> <br /> || Switch to the '''browser'''.<br /> <br /> <br /> In the '''address bar''' type the '''URL''' as '''http://localhost:5000/form''' and press '''Enter.'''<br /> |- style=&quot;background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;&quot;<br /> || <br /> || The page is displayed with a '''form'''.<br /> |- style=&quot;background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;&quot;<br /> || <br /> || Let us enter some values in the '''form'''.<br /> |- style=&quot;background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;&quot;<br /> || Type '''First name''' as '''Spoken.'''<br /> <br /> <br /> '''Last name '''as''' Tutorial'''<br /> || I will type the '''First name''' as '''Spoken.'''<br /> <br /> <br /> '''Last name '''as''' Tutorial.'''<br /> <br /> <br /> And then click on '''Submit '''button''' '''located at the bottom of the''' web form.'''<br /> |- style=&quot;background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;&quot;<br /> || [Firefox]<br /> <br /> <br /> Highlight<br /> <br /> The text in the browser<br /> || Here we have retrieved the '''firstname''' and '''lastname''' from the '''request object'''.<br /> <br /> <br /> <br /> |- style=&quot;background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;&quot;<br /> || <br /> || So this shows how the '''form attribute '''of the '''request''' '''object''' is used.<br /> |- style=&quot;background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;&quot;<br /> || [Text Editor]<br /> || The last thing I want to talk in this section is about “'''500: Internal Server Error'''”.<br /> <br /> <br /> This is one of the most frequent errors you will encounter during '''flask''' '''app''' development.<br /> |- style=&quot;background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;&quot;<br /> || <br /> || Let us write a '''code snippet''' to demonstrate this.<br /> |- style=&quot;background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;&quot;<br /> || [Text Editor]<br /> || Switch to the '''editor'''.<br /> |- style=&quot;background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;&quot;<br /> || Type inside user(name):<br /> <br /> <br /> a = 10/0<br /> || In the '''user view function''', before the''' return statement''' type<br /> <br /> '''a &lt;equal to&gt; 10 slash zero'''<br /> <br /> <br /> As we are dividing 10 by zero, we should get an error.<br /> <br /> <br /> Save the file.<br /> |- style=&quot;background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;&quot;<br /> || [Terminal]<br /> || Switch to the '''terminal.'''<br /> |- style=&quot;background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;&quot;<br /> || Press Ctrl+C<br /> || Stop the '''server''' by pressing '''Ctrl''' and '''C''' keys together.<br /> |- style=&quot;background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;&quot;<br /> || Type python3 -m flask run<br /> || Now run the '''server''' again.<br /> |- style=&quot;background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;&quot;<br /> || [Firefox]<br /> <br /> <br /> Type http://localhost:5000/user/Sid<br /> <br /> <br /> <br /> || Switch to the '''browser'''.<br /> <br /> <br /> In the '''address bar''' type the '''URL''' as '''http://localhost:5000/user/Sid''' and press '''Enter'''<br /> |- style=&quot;background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;&quot;<br /> || [Firefox]<br /> || Observe that we have received '''ZeroDivisionError'''.<br /> |- style=&quot;background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;&quot;<br /> || Highlight star<br /> || Let’s switch to the '''terminal''' to see the '''HTTP status code'''.<br /> |-<br /> | style=&quot;background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;&quot; | [Terminal]<br /> <br /> <br /> Highlight<br /> <br /> <br /> &quot;GET /user/error HTTP/1.1&quot; 500<br /> <br /> <br /> <br /> | style=&quot;background-color:#ffffff;border-top:1pt solid #000001;border-bottom:0.5pt solid #000001;border-left:0.5pt solid #000001;border-right:0.5pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;&quot; | Here we can see '''HTTP response code''' as '''500.'''<br /> <br /> <br /> Which means we have encountered an '''internal server error'''.<br /> <br /> <br /> The '''500''' error implies that, there’s something wrong in the '''web server'''.<br /> |-<br /> | style=&quot;background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;&quot; | <br /> | style=&quot;background-color:#ffffff;border-top:1pt solid #000001;border-bottom:0.5pt solid #000001;border-left:0.5pt solid #000001;border-right:0.5pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;&quot; | Since we have the '''debug mode '''on, we know the specific reason for the error.<br /> |-<br /> | style=&quot;background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;&quot; | <br /> | style=&quot;background-color:#ffffff;border-top:1pt solid #000001;border-bottom:0.5pt solid #000001;border-left:0.5pt solid #000001;border-right:0.5pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;&quot; | With this we come to the end of this tutorial.<br /> <br /> Let us summarise.<br /> |- style=&quot;background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;&quot;<br /> || Slide 10: Summary<br /> || In this tutorial, we learnt about,<br /> <br /> <br /> * &lt;div style=&quot;margin-left:1.27cm;margin-right:0cm;&quot;&gt;The '''request-response''' cycle in '''Flask'''.&lt;/div&gt;<br /> * &lt;div style=&quot;margin-left:1.27cm;margin-right:0cm;&quot;&gt;Different '''attributes''' of the '''request object.'''&lt;/div&gt;<br /> * &lt;div style=&quot;margin-left:1.27cm;margin-right:0cm;&quot;&gt;Different '''types''' of '''request data'''.&lt;/div&gt;<br /> * &lt;div style=&quot;margin-left:1.27cm;margin-right:0cm;&quot;&gt;Several '''HTTP''' '''response codes'''.&lt;/div&gt;<br /> <br /> <br /> |-<br /> | style=&quot;background-color:#ffffff;border-top:1pt solid #000001;border-bottom:0.5pt solid #000001;border-left:0.5pt solid #000001;border-right:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;&quot; | &lt;span style=&quot;background-color:#ffffff;&quot;&gt;Slide: About Spoken Tutorial project&lt;/span&gt;<br /> | style=&quot;background-color:#ffffff;border-top:1pt solid #000001;border-bottom:0.5pt solid #000001;border-left:0.5pt solid #000001;border-right:0.5pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;&quot; | &lt;span style=&quot;background-color:#ffffff;&quot;&gt;The video at the following link summarises the Spoken Tutorial project.&lt;/span&gt;<br /> <br /> <br /> Please download and watch it.<br /> |-<br /> | style=&quot;background-color:#ffffff;border-top:1pt solid #000001;border-bottom:0.5pt solid #000001;border-left:0.5pt solid #000001;border-right:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;&quot; | Slide:<br /> <br /> Spoken Tutorial workshops<br /> | style=&quot;background-color:#ffffff;border-top:1pt solid #000001;border-bottom:0.5pt solid #000001;border-left:0.5pt solid #000001;border-right:0.5pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;&quot; | &lt;span style=&quot;background-color:#ffffff;&quot;&gt;The&amp;nbsp;&lt;/span&gt;&lt;span style=&quot;background-color:#ffffff;&quot;&gt;'''Spoken Tutorial Project'''&lt;/span&gt;&lt;span style=&quot;background-color:#ffffff;&quot;&gt;&amp;nbsp;team &lt;/span&gt;conducts workshops and gives certificates.<br /> <br /> <br /> For more details, please write to us.<br /> |- style=&quot;background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;&quot;<br /> || Slide:<br /> <br /> Forum for specific questions:<br /> || Please post your timed queries in this forum.<br /> |-<br /> | style=&quot;background-color:#ffffff;border-top:1pt solid #000001;border-bottom:0.5pt solid #000001;border-left:0.5pt solid #000001;border-right:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;&quot; | Slide: Acknowledgement<br /> | style=&quot;background-color:#ffffff;border-top:1pt solid #000001;border-bottom:0.5pt solid #000001;border-left:0.5pt solid #000001;border-right:0.5pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;&quot; | &lt;span style=&quot;background-color:#ffffff;&quot;&gt;Spoken Tutorial Project is funded by NMEICT, MHRD, Government of India.&lt;/span&gt;<br /> <br /> <br /> More information on this mission is available at this link.<br /> |- style=&quot;background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;&quot;<br /> || <br /> || This is Siddhartha Sarkar signing off. <br /> <br /> Thanks for watching.<br /> |-<br /> |}</div>

SiddharthaSarkar https://script.spoken-tutorial.org/index.php/Python-Flask/C2/First-Flask-Web-App/English 2018-12-25T22:32:43Z

<p>SiddharthaSarkar: Created page with &quot;'''Title of script: First Flask web application''' '''Author: Siddhartha Sarkar''' Keywords: ​Video tutorial, Python Flask, Hello World, Routes, View Functions, HTTP proto...&quot;</p> <hr /> <div>'''Title of script: First Flask web application'''<br /> <br /> '''Author: Siddhartha Sarkar'''<br /> <br /> Keywords: ​Video tutorial, Python Flask, Hello World, Routes, View Functions, HTTP protocol.<br /> <br /> <br /> <br /> {| class=&quot;wikitable&quot; style=&quot;border-spacing:0;width:16.695cm;&quot;<br /> |- style=&quot;background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;&quot;<br /> | align=center| '''Visual Cue'''<br /> | align=center| '''Narration'''<br /> |- style=&quot;background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;&quot;<br /> || '''Slide 1: First Flask web app'''<br /> || Welcome to the spoken tutorial on''' '''the first '''Flask web application.'''<br /> |- style=&quot;background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;&quot;<br /> || '''Slide 2: Learning Objectives'''<br /> || In this tutorial, we will learn<br /> * &lt;div style=&quot;margin-left:1.27cm;margin-right:0cm;&quot;&gt;To write and analyze our first '''Flask application'''.&lt;/div&gt;<br /> * &lt;div style=&quot;margin-left:1.27cm;margin-right:0cm;&quot;&gt;The concept of '''Routes '''and''' View''' '''functions'''.&lt;/div&gt;<br /> * &lt;div style=&quot;margin-left:1.27cm;margin-right:0cm;&quot;&gt;About '''Dynamic content''' served by dynamic '''URLs'''.&lt;/div&gt;<br /> <br /> <br /> |- style=&quot;background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;&quot;<br /> || '''Slides 3: System Requirements'''<br /> || To record this tutorial, I’m using<br /> * &lt;div style=&quot;margin-left:1.27cm;margin-right:0cm;&quot;&gt;'''Ubuntu Linux 16.04''' '''OS'''&lt;/div&gt;<br /> * &lt;div style=&quot;margin-left:1.27cm;margin-right:0cm;&quot;&gt;'''Python''' '''3.5.2'''&lt;/div&gt;<br /> * &lt;div style=&quot;margin-left:1.27cm;margin-right:0cm;&quot;&gt;'''Atom text editor 1.22.1 '''and''' '''&lt;/div&gt;<br /> * &lt;div style=&quot;margin-left:1.27cm;margin-right:0cm;&quot;&gt;'''Firefox web browser'''&lt;/div&gt;<br /> <br /> <br /> <br /> <br /> <br /> You can use any text editor and web browser of your choice.<br /> |- style=&quot;background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;&quot;<br /> || '''Slide 5:'''<br /> <br /> '''Pre-requisites'''<br /> <br /> <br /> || To follow this tutorial, you should have working knowledge on<br /> * &lt;div style=&quot;margin-left:1.27cm;margin-right:0cm;&quot;&gt;'''Linux commands''' and&lt;/div&gt;<br /> <br /> * &lt;div style=&quot;margin-left:1.27cm;margin-right:0cm;&quot;&gt;Basic '''Python programming'''&lt;/div&gt;<br /> <br /> <br /> If not, then please go through the corresponding tutorials on this website. http://spoken-tutorial.org<br /> |-<br /> | style=&quot;background-color:#ffffff;border-top:1pt solid #000001;border-bottom:0.5pt solid #000001;border-left:0.5pt solid #000001;border-right:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;&quot; | Open a Terminal window<br /> <br /> <br /> <br /> | style=&quot;background-color:#ffffff;border-top:1pt solid #000001;border-bottom:0.5pt solid #000001;border-left:0.5pt solid #000001;border-right:0.5pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;&quot; | Let us open the '''Terminal''' by pressing '''Ctrl''', '''Alt''' and '''T''' keys simultaneously on the keyboard.<br /> |- style=&quot;background-color:#ffffff;border:0.5pt solid #000001;padding:0.106cm;&quot;<br /> || [Terminal]<br /> <br /> Type cd project_flask &amp; Press Enter<br /> || Now go to the folder '''project underscore flask''' which we created earlier using '''cd''' '''command.'''<br /> |- style=&quot;background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;&quot;<br /> || [Terminal]<br /> <br /> <br /> $ . flask_venv/bin/activate<br /> <br /> <br /> [Enter]<br /> || Let us activate our '''vitualenv'''.<br /> <br /> <br /> Type the command<br /> <br /> <br /> '''Dot space flask_venv slash bin slash activate'''<br /> <br /> <br /> And press '''Enter'''.<br /> <br /> <br /> '''(dot)''' refers to the present working '''directory'''.<br /> |- style=&quot;background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;&quot;<br /> || [Terminal]<br /> <br /> Highlight (flask_venv)<br /> || Notice that we are now inside the''' virtual environment flask_venv.'''<br /> |- style=&quot;background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;&quot;<br /> || <br /> || Open the file '''hello_flask.py '''in a '''text editor'''.<br /> <br /> <br /> I will be using the '''atom text editor '''but you can use your prefered '''text editor.'''<br /> |- style=&quot;background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;&quot;<br /> || [Terminal]<br /> <br /> <br /> $ atom hello_flask.py<br /> || I will type the command.<br /> <br /> '''atom&lt;space&gt; hello underscore flask dot py'''<br /> <br /> <br /> and press '''Enter.'''<br /> <br /> <br /> <br /> <br /> Now let us understand what the code does, line by line.<br /> |- style=&quot;background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;&quot;<br /> || [Text Editor]<br /> <br /> Highlight<br /> <br /> “from flask import Flask”<br /> || The first line is '''from flask import Flask.'''<br /> <br /> <br /> It simply says '''import''' '''Flask''' '''module''' from '''flask''' folder. <br /> |- style=&quot;background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;&quot;<br /> || [Text Editor]<br /> <br /> Point to the left pane of Atom.<br /> <br /> <br /> Collapse flask_venv-&gt;lib-&gt;python3.5-&gt;site-packages<br /> <br /> And hover over flask foder.<br /> || Look at the '''directory structure''' at the left pane of the '''Atom text editor''' window.<br /> <br /> <br /> Observe that there is no '''flask''' folder in the '''project'''. <br /> <br /> <br /> So how does the '''compiler''' find and import the '''Flask module'''?<br /> <br /> <br /> '''Python''' is set to look for '''modules''' in the '''site-packages'''.<br /> |- style=&quot;background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;&quot;<br /> || Highlight<br /> <br /> <br /> app = Flask(__name__)<br /> || In the second line, we have created an '''object''' for the '''flask class.'''<br /> <br /> <br /> This '''object''' of the '''Flask class''' is our '''WSGI application.'''<br /> <br /> <br /> '''WSGI''' stands for '''Web Server Gateway Interface.'''<br /> <br /> <br /> We will come to what '''WSGI''' is later.<br /> <br /> <br /> This takes an '''argument double underscore name double underscore. '''<br /> <br /> <br /> This '''argument''' basically refers to the name of the file.<br /> <br /> <br /> In our case it is “'''hello_flask'''”.<br /> <br /> <br /> '''Flask''' uses this '''argument''' to determine the '''root path''' of the '''application'''.<br /> |- style=&quot;background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;&quot;<br /> || [Text Editor]<br /> <br /> <br /> Highlight<br /> <br /> @app.route('/')<br /> || In the next line, the''' route function''' of the '''Flask class''' is a '''decorator.'''<br /> <br /> <br /> It tells the '''application''', which '''URL''' should call the associated '''function'''.<br /> <br /> <br /> In this case, '''root slash''' is the '''URL'''. <br /> <br /> <br /> It refers to '''home''' or top '''domain'''.<br /> |- style=&quot;background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;&quot;<br /> || [Text Editor]<br /> <br /> <br /> Highlight<br /> <br /> @app.route('/')<br /> || '''Decorators''' are a standard feature of the '''Python''' language.<br /> <br /> <br /> They can modify the behavior of a '''function''' in different ways. <br /> <br /> <br /> In our case, it is used to associate a '''function''' with a '''URL'''.<br /> <br /> <br /> To know more about '''decorators''' you may refer to the '''Python Spoken Tutorial series'''.<br /> |- style=&quot;background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;&quot;<br /> || '''Slide 5: Routes (img 1)'''<br /> || Let us understand the concept of '''routes''' in detail now.<br /> <br /> <br /> Look at this diagram.<br /> <br /> <br /> This shows a simplified '''client''' and '''server''' diagram.<br /> |- style=&quot;background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;&quot;<br /> || '''Slide 6: Routes (img 2)'''<br /> <br /> <br /> <br /> || The client sends a '''request''' to the '''web server'''.<br /> <br /> <br /> In our case, the '''web browser''' is the '''client'''.<br /> |- style=&quot;background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;&quot;<br /> || '''Slide 7: Routes (img 3)'''<br /> || Then the '''web server''' has to process the '''request''' and generate a '''response'''.<br /> <br /> <br /> And the '''Flask application '''instance does this job.<br /> <br /> <br /> The '''web server''' sends the '''request''' to the '''Flask application''' instance.<br /> |- style=&quot;background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;&quot;<br /> || '''Slide 8: Routes (img 4)'''<br /> || On receiving the '''request''' the '''app''' matches it with the available '''route patterns'''.<br /> <br /> <br /> <br /> |- style=&quot;background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;&quot;<br /> || '''Slide 9: Routes '''<br /> || <br /> * &lt;div style=&quot;margin-left:1.27cm;margin-right:0cm;&quot;&gt;Thus the '''application''' instance knows which '''function''' to execute for which '''URL'''.&lt;/div&gt;<br /> * &lt;div style=&quot;margin-left:1.27cm;margin-right:0cm;&quot;&gt;This happens because it keeps a mapping of the '''URLs''' to '''functions'''.&lt;/div&gt;<br /> * &lt;div style=&quot;margin-left:1.27cm;margin-right:0cm;&quot;&gt;Here we need the concept of '''routes'''.&lt;/div&gt;<br /> <br /> <br /> |- style=&quot;background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;&quot;<br /> || '''Slide 9: Routes '''<br /> || <br /> * &lt;div style=&quot;margin-left:1.27cm;margin-right:0cm;&quot;&gt;The association between a '''URL''' and the '''function''' that handles it, is called a '''route'''.&lt;/div&gt;<br /> * &lt;div style=&quot;margin-left:1.27cm;margin-right:0cm;&quot;&gt;The '''Flask app''' executes the associated '''function''' and returns a '''response'''.&lt;/div&gt;<br /> <br /> <br /> |- style=&quot;background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;&quot;<br /> || '''Slide 9: Routes '''<br /> || <br /> * &lt;div style=&quot;margin-left:1.27cm;margin-right:0cm;&quot;&gt;'''Routes''' can be either '''static''' or '''dynamic'''.&lt;/div&gt;<br /> * &lt;div style=&quot;margin-left:1.27cm;margin-right:0cm;&quot;&gt;In the present case, we have a static '''route'''.&lt;/div&gt;<br /> <br /> <br /> <br /> <br /> <br /> We will discuss '''dynamic routes''' in a moment.<br /> |- style=&quot;background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;&quot;<br /> || [Text Editor]<br /> <br /> <br /> Highlight<br /> <br /> def hello_world():<br /> || Let’s come back to our '''“hello world” app.'''<br /> <br /> <br /> In the next line, we define the associated '''function''' for this '''route'''. <br /> <br /> <br /> This '''function''' gets executed when the '''root URL''' is hit.<br /> <br /> <br /> In our case the '''root''' '''URL''' is [http://127.0.0.1:5000/ http://127.0.0.1:5000]<br /> <br /> <br /> Here, we have named the '''function''' as “'''hello_world'''”.<br /> <br /> <br /> However, you may choose any other name of your choice.<br /> <br /> <br /> This '''function''' associated with a '''route '''is called ‘'''view function'''’.<br /> |- style=&quot;background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;&quot;<br /> || [Text Editor]<br /> <br /> <br /> Highlight<br /> <br /> return 'Hello, World!'<br /> || The next line says '''return 'Hello, World!''''<br /> <br /> <br /> So this '''view function''' simply returns a '''string “Hello World”. '''<br /> |- style=&quot;background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;&quot;<br /> || [Text Editor]<br /> <br /> <br /> Type<br /> <br /> <br /> if __name__ == '__main__':<br /> <br /> (Tab) app.run()<br /> || Now let us add a few more lines of code at the end.<br /> <br /> <br /> Line 9 and 10.<br /> |- style=&quot;background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;&quot;<br /> || [Text Editor]<br /> <br /> <br /> Highlight<br /> <br /> <br /> if __name__ == '__main__':<br /> <br /> (Tab) app.run()<br /> || This is a customary common practice.<br /> <br /> <br /> This ensures that '''server '''is launched only if the '''script''' runs directly from the '''terminal'''.<br /> <br /> <br /> Otherwise '''app dot run''' is skipped.<br /> <br /> <br /> It may happen that a '''script''' is being called from another '''script'''.<br /> <br /> <br /> In that case the imported '''script''' should not start a new '''server'''.<br /> <br /> <br /> Hence we follow this practice.<br /> |- style=&quot;background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;&quot;<br /> || '''Ctrl+S'''<br /> || Let us save the file by pressing '''Ctrl''' and '''S''' keys.<br /> <br /> <br /> Then close the editor window.<br /> |- style=&quot;background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;&quot;<br /> || [Terminal]<br /> <br /> Type <br /> <br /> <br /> $ export FLASK_APP=hello_flask.py<br /> || Now back in the '''terminal''' and run the''' hello world app.'''<br /> <br /> <br /> Type '''export &lt;space&gt; FLASK_APP &lt;equal to &gt; hello underscore flask dot py'''<br /> <br /> <br /> Press '''Enter'''.<br /> |- style=&quot;background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;&quot;<br /> || [Terminal]<br /> <br /> Type<br /> <br /> <br /> $ python3 -m flask run<br /> || Now type<br /> <br /> <br /> '''python3 &lt;space&gt; hyphen m &lt;space&gt; flask &lt;space&gt; run'''<br /> <br /> <br /> And press '''Enter'''.<br /> <br /> <br /> We can see a message '''“Running on [http://127.0.0.1:5000/ http://127.0.0.1:5000/]”'''<br /> <br /> <br /> Here, '''127.0.0.1''' is the '''IP''' '''address''' for the '''localhost'''.<br /> <br /> <br /> '''Flask app''' is running in the '''local host''' on '''port 5000.'''<br /> |- style=&quot;background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;&quot;<br /> || [Firefox]<br /> <br /> <br /> Type <br /> <br /> [http://127.0.0.1:5000/ http://127.0.0.1:5000/]<br /> <br /> And press Enter.<br /> || Now, open any '''web browser. '''<br /> <br /> <br /> In the '''address bar''', type [http://127.0.0.1:5000/ http://127.0.0.1:5000/] and press '''Enter'''.<br /> |- style=&quot;background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;&quot;<br /> || [Firefox]<br /> <br /> Highlight ‘Hello, World!’<br /> || We can see the message ‘'''Hello, World!'''’ written in the browser window. <br /> |- style=&quot;background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;&quot;<br /> || <br /> || Switch back to the '''terminal'''.<br /> <br /> <br /> Stop the '''server''' by pressing '''Ctrl''' and '''C '''keys together.<br /> |- style=&quot;background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;&quot;<br /> || [Terminal]<br /> <br /> <br /> atom hello_flask.py<br /> || Now we will write code for a '''dynamic''' '''route''' and also define a '''view function''' called '''hello_user'''.<br /> <br /> <br /> Open the '''hello_flask.py''' in any '''text editor.'''<br /> |- style=&quot;background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;&quot;<br /> || Type<br /> <br /> <br /> @app.route('/user/&lt;username&gt;')<br /> <br /> def hello_user(username):<br /> <br /> &lt;nowiki&gt;(Tab) return '&lt;h1&gt;Hello, %s!&lt;/h1&gt;' % username &lt;/nowiki&gt;<br /> || Before the''' if condition''', type the code as shown here.<br /> <br /> <br /> |- style=&quot;background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;&quot;<br /> || Highlight<br /> <br /> <br /> @app.route('/user/&lt;username&gt;')<br /> <br /> <br /> || This '''route''' has a '''URL''', '''home/user/&lt;username&gt;'''<br /> <br /> <br /> where '''home''' is the '''root''' '''domain''' '''URL''' of the '''server'''.<br /> <br /> <br /> In our case the '''root''' '''URL''' is [http://127.0.0.1:5000/ http://127.0.0.1:5000]<br /> <br /> <br /> whereas, '''username''' is a '''variable'''.<br /> <br /> <br /> We will use this '''variable '''in the '''view''' '''function''' to change the content in the browser.<br /> |- style=&quot;background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;&quot;<br /> || Highlight<br /> <br /> <br /> def hello_user(username):<br /> <br /> &lt;nowiki&gt;<br /> (Tab) return '&lt;h1&gt;Hello, %s!&lt;/h1&gt;' % username &lt;/nowiki&gt;<br /> || This '''function '''will simply return a string '''‘Hello’''' '''username'''.<br /> <br /> <br /> Note that the output in the '''browser '''will vary as per the '''username''' in the '''URL'''.<br /> <br /> <br /> '''h1''' is the level one '''heading tag '''of '''HTML'''.<br /> |- style=&quot;background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;&quot;<br /> || <br /> || Let us save the file by pressing '''Ctrl''' and '''S''' keys<br /> <br /> <br /> Close the editor window.<br /> |- style=&quot;background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;&quot;<br /> || [Terminal]<br /> <br /> $ python3 -m flask run [Enter]<br /> || Run the '''app''' by executing the following command.<br /> <br /> <br /> <br /> |- style=&quot;background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;&quot;<br /> || [Firefox]<br /> <br /> <br /> Type <br /> <br /> http://127.0.0.1:5000/user/Sid <br /> <br /> [Enter]<br /> || Switch to the '''web browser'''.<br /> <br /> <br /> In the''' address bar''', type [http://127.0.0.1:5000/ http://127.0.0.1:5000/]user/Sid <br /> <br /> <br /> and press '''Enter'''.<br /> |- style=&quot;background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;&quot;<br /> || [Firefox]<br /> <br /> <br /> Type <br /> <br /> http://127.0.0.1:5000/user/Tom<br /> <br /> [Enter]<br /> || We got the output as '''“Hello Sid!”.'''<br /> <br /> <br /> Now let’s try '''tom''' instead of '''sid'''<br /> <br /> In the '''address bar''', replace '''sid''' with '''tom.'''<br /> <br /> <br /> Press '''Enter'''.<br /> <br /> <br /> The output has changed to '''‘Hello Tom!’ '''<br /> <br /> <br /> We have a dynamic '''URL''' in play here.<br /> |- style=&quot;background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;&quot;<br /> || Slide 10: Example URL <br /> || This is what you may have observed in '''facebook''' as well.<br /> <br /> <br /> '''Facebook''' individual '''users''' have a '''URL''' of the type:<br /> <br /> [http://www.facebook.com/profile_id www.facebook.com/profile_id]<br /> <br /> <br /> Here '''profile_id''' refers to the unique '''ID''' of a '''facebook user.'''<br /> <br /> <br /> Depending on the unique '''ID, facebook server''' fetches the individual '''profile pages'''.<br /> |- style=&quot;background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;&quot;<br /> || [Firefox]<br /> <br /> <br /> Type <br /> <br /> http://127.0.0.1:5000/posts<br /> <br /> [Enter]<br /> || Let’s try a '''URL''' for which we did not define a '''route'''.<br /> <br /> <br /> Switch to the '''browser '''window.<br /> <br /> <br /> Replace '''/user/tom''' with '''posts '''and press '''Enter.'''<br /> <br /> <br /> Observe that we got '''Not found''' message.<br /> |- style=&quot;background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;&quot;<br /> || [Terminal]<br /> <br /> <br /> Highlight 404.<br /> <br /> <br /> Highlight 200’s.<br /> || Switch to the '''terminal'''.<br /> <br /> <br /> Observe that, the '''server''' has returned a '''404 response code.'''<br /> <br /> <br /> This '''error code''' indicates that the web page requested for, does not exist.<br /> <br /> <br /> Whereas most previous '''response codes''' were '''200'''.<br /> <br /> <br /> We will discuss in detail these '''HTTP responses''' in the upcoming tutorials.<br /> |-<br /> | style=&quot;background-color:#ffffff;border-top:1pt solid #000001;border-bottom:0.5pt solid #000001;border-left:0.5pt solid #000001;border-right:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;&quot; | Press Ctrl+c simultaneously <br /> | style=&quot;background-color:#ffffff;border-top:1pt solid #000001;border-bottom:0.5pt solid #000001;border-left:0.5pt solid #000001;border-right:0.5pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;&quot; | To stop the '''server''', press '''Ctrl''' and '''C''' keys simultaneously.<br /> |-<br /> | style=&quot;background-color:#ffffff;border-top:1pt solid #000001;border-bottom:0.5pt solid #000001;border-left:0.5pt solid #000001;border-right:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;&quot; | [Terminal]<br /> <br /> <br /> Type deactivate and press Enter<br /> | style=&quot;background-color:#ffffff;border-top:1pt solid #000001;border-bottom:0.5pt solid #000001;border-left:0.5pt solid #000001;border-right:0.5pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;&quot; | We will deactivate the '''Virtual Environment.'''<br /> <br /> <br /> Type '''deactivate''' and press '''Enter'''.<br /> |-<br /> | style=&quot;background-color:#ffffff;border-top:1pt solid #000001;border-bottom:0.5pt solid #000001;border-left:0.5pt solid #000001;border-right:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;&quot; | <br /> | style=&quot;background-color:#ffffff;border-top:1pt solid #000001;border-bottom:0.5pt solid #000001;border-left:0.5pt solid #000001;border-right:0.5pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;&quot; | This brings us to the end of this tutorial.<br /> <br /> <br /> Let us summarise<br /> |- style=&quot;background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;&quot;<br /> || Slide 10: Summary<br /> || In this tutorial, we learnt about<br /> <br /> * &lt;div style=&quot;margin-left:1.27cm;margin-right:0cm;&quot;&gt;The working of our first '''Flask application.'''&lt;/div&gt;<br /> * &lt;div style=&quot;margin-left:1.27cm;margin-right:0cm;&quot;&gt;The concepts of '''routes '''and the view '''functions.'''&lt;/div&gt;<br /> * &lt;div style=&quot;margin-left:1.27cm;margin-right:0cm;&quot;&gt;Running a '''Flask app '''in a '''Web''' '''browser'''.&lt;/div&gt;<br /> * &lt;div style=&quot;margin-left:1.27cm;margin-right:0cm;&quot;&gt;'''Dynamic content''' served by dynamic '''URLs'''.&lt;/div&gt;<br /> <br /> <br /> |-<br /> | style=&quot;background-color:#ffffff;border-top:1pt solid #000001;border-bottom:0.5pt solid #000001;border-left:0.5pt solid #000001;border-right:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;&quot; | &lt;span style=&quot;background-color:#ffffff;&quot;&gt;Slide: About Spoken Tutorial project&lt;/span&gt;<br /> | style=&quot;background-color:#ffffff;border-top:1pt solid #000001;border-bottom:0.5pt solid #000001;border-left:0.5pt solid #000001;border-right:0.5pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;&quot; | &lt;span style=&quot;background-color:#ffffff;&quot;&gt;The video at the following link summarises the Spoken Tutorial project.&lt;/span&gt;<br /> <br /> <br /> Please download and watch it.<br /> |-<br /> | style=&quot;background-color:#ffffff;border-top:1pt solid #000001;border-bottom:0.5pt solid #000001;border-left:0.5pt solid #000001;border-right:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;&quot; | Slide:<br /> <br /> Spoken Tutorial workshops<br /> | style=&quot;background-color:#ffffff;border-top:1pt solid #000001;border-bottom:0.5pt solid #000001;border-left:0.5pt solid #000001;border-right:0.5pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;&quot; | &lt;span style=&quot;background-color:#ffffff;&quot;&gt;The&amp;nbsp;&lt;/span&gt;&lt;span style=&quot;background-color:#ffffff;&quot;&gt;'''Spoken Tutorial Project'''&lt;/span&gt;&lt;span style=&quot;background-color:#ffffff;&quot;&gt;&amp;nbsp;team &lt;/span&gt;conducts workshops and gives certificates.<br /> <br /> <br /> For more details, please write to us.<br /> |- style=&quot;background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;&quot;<br /> || Slide 13:<br /> <br /> Forum for specific questions:<br /> || Please post your timed queries in this forum.<br /> |-<br /> | style=&quot;background-color:#ffffff;border-top:1pt solid #000001;border-bottom:0.5pt solid #000001;border-left:0.5pt solid #000001;border-right:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;&quot; | Slide: Acknowledgement<br /> | style=&quot;background-color:#ffffff;border-top:1pt solid #000001;border-bottom:0.5pt solid #000001;border-left:0.5pt solid #000001;border-right:0.5pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;&quot; | &lt;span style=&quot;background-color:#ffffff;&quot;&gt;Spoken Tutorial Project is funded by NMEICT, MHRD, Government of India.&lt;/span&gt;<br /> <br /> <br /> More information on this mission is available at this link.<br /> |- style=&quot;background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;&quot;<br /> || <br /> || This is Siddhartha Sarkar signing off. <br /> <br /> <br /> Thanks for watching.<br /> |-<br /> |}</div>

SiddharthaSarkar https://script.spoken-tutorial.org/index.php/Python-Flask/C2/Installation-of-Python-Flask/English 2018-12-25T20:32:18Z

<p>SiddharthaSarkar: Tutorial 2</p> <hr /> <div>'''Title of script: Installation of Python Flask'''<br /> <br /> '''Author: Siddhartha Sarkar'''<br /> <br /> Keywords: ​Video tutorial, Python Flask, Installation, Virtual Environment.<br /> <br /> <br /> <br /> {| class=&quot;wikitable&quot; style=&quot;border-spacing:0;width:16.51cm;&quot;<br /> |- style=&quot;border:1pt solid #000000;padding:0.176cm;&quot;<br /> | align=center| '''Visual Cue'''<br /> | align=center| '''Narration'''<br /> |- style=&quot;border:1pt solid #000000;padding:0.176cm;&quot;<br /> || Slide 1: Installation of Python Flask<br /> || Welcome to the spoken tutorial on''' Installation of Python Flask.'''<br /> |- style=&quot;border:1pt solid #000000;padding:0.176cm;&quot;<br /> || Slide 2: Learning Objectives<br /> || In this tutorial we will learn to<br /> * &lt;div style=&quot;margin-left:1.27cm;margin-right:0cm;&quot;&gt;Create a '''Virtual Environment.'''&lt;/div&gt;<br /> * &lt;div style=&quot;margin-left:1.27cm;margin-right:0cm;&quot;&gt;Activate and deactivate the '''Virtual Environment'''.&lt;/div&gt;<br /> * &lt;div style=&quot;margin-left:1.27cm;margin-right:0cm;&quot;&gt;Install packages inside the '''Virtual Environment'''.&lt;/div&gt;<br /> * &lt;div style=&quot;margin-left:1.27cm;margin-right:0cm;&quot;&gt;And launch a '''Flask application'''.&lt;/div&gt;<br /> <br /> <br /> |- style=&quot;border:1pt solid #000000;padding:0.176cm;&quot;<br /> || Slides 3: System Requirements<br /> || To record this tutorial, I’m using<br /> * &lt;div style=&quot;margin-left:1.27cm;margin-right:0cm;&quot;&gt;'''Ubuntu Linux 16.04''' '''OS'''&lt;/div&gt;<br /> * &lt;div style=&quot;margin-left:1.27cm;margin-right:0cm;&quot;&gt;'''Python''' '''3.5.2'''&lt;/div&gt;<br /> * &lt;div style=&quot;margin-left:1.27cm;margin-right:0cm;&quot;&gt;'''Atom text editor 1.22.1 '''&lt;/div&gt;<br /> * &lt;div style=&quot;margin-left:1.27cm;margin-right:0cm;&quot;&gt;'''Firefox web browser''' and&lt;/div&gt;<br /> * &lt;div style=&quot;margin-left:1.27cm;margin-right:0cm;&quot;&gt;A working '''Internet''' connection.&lt;/div&gt;<br /> <br /> <br /> You can use any text editor and web browser of your choice.<br /> |- style=&quot;border:1pt solid #000000;padding:0.176cm;&quot;<br /> || Slide 5:<br /> <br /> Pre-requisites<br /> <br /> <br /> || To follow this tutorial, you should have working knowledge on<br /> * &lt;div style=&quot;margin-left:1.27cm;margin-right:0cm;&quot;&gt;'''Linux commands''' and&lt;/div&gt;<br /> <br /> * &lt;div style=&quot;margin-left:1.27cm;margin-right:0cm;&quot;&gt;Basic '''Python programming'''&lt;/div&gt;<br /> <br /> <br /> If not, then please go through the corresponding tutorials on this website. <br /> |- style=&quot;border:1pt solid #000000;padding:0.176cm;&quot;<br /> || Slide 6: Virtual Environment<br /> || <br /> * &lt;div style=&quot;margin-left:1.27cm;margin-right:0cm;&quot;&gt;A '''virtual environment''' is a self-contained '''directory tree. '''&lt;/div&gt;<br /> * &lt;div style=&quot;margin-left:1.27cm;margin-right:0cm;&quot;&gt;It contains a '''Python installation''' for a particular version of '''Python'''. &lt;/div&gt;<br /> * &lt;div style=&quot;margin-left:1.27cm;margin-right:0cm;&quot;&gt;Additional '''packages''' can be installed inside the '''virtual environment'''.&lt;/div&gt;<br /> <br /> <br /> |- style=&quot;border:1pt solid #000000;padding:0.176cm;&quot;<br /> || Slide 6: Virtual Environment<br /> <br /> &lt;div style=&quot;color:#0000ff;&quot;&gt;(pronounce as v-e-n-v)&lt;/div&gt;<br /> || <br /> * &lt;div style=&quot;margin-left:1.27cm;margin-right:0cm;&quot;&gt;'''Venv '''is the short form for '''virtual environment.'''&lt;/div&gt;<br /> * &lt;div style=&quot;margin-left:1.27cm;margin-right:0cm;&quot;&gt;'''Venv '''is used to avoid conflict between different '''Python installations'''. &lt;/div&gt;<br /> <br /> <br /> |- style=&quot;border:1pt solid #000000;padding:0.176cm;&quot;<br /> || Slide 7: Virtual Environment<br /> || <br /> * &lt;div style=&quot;margin-left:1.27cm;margin-right:0cm;&quot;&gt;For every '''project,''' we can have a separate '''Venv'''.&lt;/div&gt;<br /> * &lt;div style=&quot;margin-left:1.27cm;margin-right:0cm;&quot;&gt;We will install '''Venv '''via a '''package''' called '''pip'''.&lt;/div&gt;<br /> <br /> <br /> |- style=&quot;border:1pt solid #000000;padding:0.176cm;&quot;<br /> || Slide 8: Pip<br /> || <br /> * &lt;div style=&quot;margin-left:1.27cm;margin-right:0cm;&quot;&gt;'''Pip '''is a '''package manager '''program.&lt;/div&gt;<br /> * &lt;div style=&quot;margin-left:1.27cm;margin-right:0cm;&quot;&gt;It is used to install, upgrade, and remove '''Python packages. '''&lt;/div&gt;<br /> * &lt;div style=&quot;margin-left:1.27cm;margin-right:0cm;&quot;&gt;'''Pip3 '''is the '''Python3 '''version of '''pip'''&lt;/div&gt;<br /> <br /> <br /> |- style=&quot;border:1pt solid #000000;padding:0.176cm;&quot;<br /> || Slide: Pip3 installation<br /> || <br /> * &lt;div style=&quot;margin-left:1.27cm;margin-right:0cm;&quot;&gt;To check if '''pip3''' is already installed, type the following command in the '''terminal:'''&lt;/div&gt;<br /> <br /> <br /> '''pip3 &lt;space&gt; hyphen hyphen version '''and press''' Enter.'''* &lt;div style=&quot;margin-left:1.27cm;margin-right:0cm;&quot;&gt;If it gives a '''version''' number, then you don’t need to install it again.&lt;/div&gt;<br /> * &lt;div style=&quot;margin-left:1.27cm;margin-right:0cm;&quot;&gt;Else, install '''pip3''' using the following command in the '''terminal''':&lt;/div&gt;<br /> <br /> <br /> <br /> '''sudo &lt;space&gt; apt &lt;space&gt; install &lt;space&gt; python3-pip'''<br /> |- style=&quot;border:1pt solid #000000;padding:0.176cm;&quot;<br /> || Open the terminal<br /> || Open the '''terminal''' by pressing '''Ctrl''', '''Alt''' and '''T''' keys together.<br /> |- style=&quot;border:1pt solid #000000;padding:0.176cm;&quot;<br /> || Type pip3 --version [Enter]<br /> || Let us check the version of '''pip.'''<br /> <br /> <br /> Type '''pip3 &lt;space&gt; hyphen hyphen version '''and press''' Enter.'''<br /> |- style=&quot;border:1pt solid #000000;padding:0.176cm;&quot;<br /> || <br /> <br /> Point to pip version<br /> || You should be able to see some valid '''pip3''' version number.<br /> <br /> <br /> In my case it is '''pip 8.1.1''' for '''python 3.5'''.<br /> |- style=&quot;border:1pt solid #000000;padding:0.176cm;&quot;<br /> | style=&quot;color:#0000ff;&quot; | (pronounce as virtual-e-n-v).<br /> || Next let us install '''Virtualenv.'''<br /> |- style=&quot;border:1pt solid #000000;padding:0.176cm;&quot;<br /> || Type<br /> <br /> $ sudo pip3 install virtualenv [Enter]<br /> || Type '''sudo &lt;space&gt; pip3 &lt;space&gt; install &lt;space&gt; virtualenv'''<br /> <br /> <br /> And press''' Enter.'''<br /> |-<br /> | style=&quot;border-top:1pt solid #000000;border-bottom:0.5pt solid #000000;border-left:0.5pt solid #000000;border-right:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;&quot; | Only narration<br /> | style=&quot;border-top:1pt solid #000000;border-bottom:0.5pt solid #000000;border-left:0.5pt solid #000000;border-right:0.5pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;&quot; | Next, I will create a folder named '''project_flask.'''<br /> <br /> <br /> This folder will help me to organize my files in a single place.<br /> |-<br /> | style=&quot;border-top:1pt solid #000000;border-bottom:0.5pt solid #000000;border-left:0.5pt solid #000000;border-right:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;&quot; | [Terminal]<br /> <br /> <br /> Type mkdir project_flask [Enter]<br /> | style=&quot;border-top:1pt solid #000000;border-bottom:0.5pt solid #000000;border-left:0.5pt solid #000000;border-right:0.5pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;&quot; | To do so, type '''mkdir &lt;space&gt; project underscore flask '''and press '''Enter.'''<br /> |-<br /> | style=&quot;border-top:1pt solid #000000;border-bottom:0.5pt solid #000000;border-left:0.5pt solid #000000;border-right:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;&quot; | [Terminal]<br /> <br /> <br /> Type cd project_flask [Enter]<br /> | style=&quot;border-top:1pt solid #000000;border-bottom:0.5pt solid #000000;border-left:0.5pt solid #000000;border-right:0.5pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;&quot; | Then, type '''cd &lt;space&gt;''' '''project underscore flask''' and press '''Enter.'''<br /> |- style=&quot;border:1pt solid #000000;padding:0.176cm;&quot;<br /> || Only narration<br /> || Now let us create a new '''virtual environment''' inside our newly created '''directory'''.<br /> |- style=&quot;border:1pt solid #000000;padding:0.176cm;&quot;<br /> || [Terminal]<br /> <br /> Typing<br /> <br /> $ virtualenv -p python3 flask_venv<br /> || So type <br /> <br /> '''virtualenv &lt;space&gt; &lt;hyphen&gt; p &lt;space&gt; python3 &lt;space&gt; flask_venv'''<br /> <br /> <br /> This will create a '''virtual environment''' named '''flask_venv'''.<br /> <br /> <br /> You may choose any other name for the '''virtual environment'''.<br /> <br /> <br /> The '''hyphen p''' flag is used to specify which''' python interpreter''' is to be used.<br /> |- style=&quot;border:1pt solid #000000;padding:0.176cm;&quot;<br /> || [Enter]<br /> || Now press '''Enter.'''<br /> |- style=&quot;border:1pt solid #000000;padding:0.176cm;&quot;<br /> || [Terminal]<br /> <br /> Typing<br /> <br /> <br /> $ virtualenv -h [Enter]<br /> || For '''help''', type the following command in the '''terminal'''<br /> <br /> '''virtualenv -h '''and press '''Enter.'''<br /> <br /> <br /> Here, we can see the list of available commands and options.<br /> |- style=&quot;border:1pt solid #000000;padding:0.176cm;&quot;<br /> || Highlight -p and its description.<br /> || Observe that '''-p''' is used to specify the version of the '''python interpreter''' to be used.<br /> |- style=&quot;border:1pt solid #000000;padding:0.176cm;&quot;<br /> || [Terminal]<br /> <br /> Type $ ls [Enter]<br /> || Type '''ls''' and press '''Enter.'''<br /> <br /> <br /> Note that we have a folder named '''flask_venv''' in our current '''directory'''.<br /> |- style=&quot;border:1pt solid #000000;padding:0.176cm;&quot;<br /> || [Terminal]<br /> <br /> Type<br /> <br /> <br /> $ ls flask_venv [Enter]<br /> || Now, let us see the contents of '''flask_venv directory'''.<br /> <br /> <br /> Type '''ls &lt;space&gt; flask underscore venv'''<br /> <br /> <br /> Press''' Enter'''.<br /> |- style=&quot;border:1pt solid #000000;padding:0.176cm;&quot;<br /> || [Terminal]<br /> <br /> Point to the list of directories in the terminal<br /> || Observe that there are a number of files and directories inside '''flask_venv'''.<br /> |- style=&quot;border:1pt solid #000000;padding:0.176cm;&quot;<br /> || [Terminal] Point to bin<br /> || '''bin​''' contains the executable files.<br /> |- style=&quot;border:1pt solid #000000;padding:0.176cm;&quot;<br /> || [Terminal] Point to lib<br /> || '''lib​''' contains supporting library files.<br /> |- style=&quot;border:1pt solid #000000;padding:0.176cm;&quot;<br /> || [Terminal] Point to site-packages<br /> || Packages ​installed in this '''environment''' will appear in<br /> <br /> '''site-packages'''.<br /> |- style=&quot;border:1pt solid #000000;padding:0.176cm;&quot;<br /> || [Terminal] Point to <br /> <br /> lib/ python3.5 directory<br /> || '''site-packages''' can be found ​inside '''lib slash python3.5 directory.'''<br /> |- style=&quot;border:1pt solid #000000;padding:0.176cm;&quot;<br /> || <br /> || Next, we have to '''activate''' this '''virtual environment'''. <br /> <br /> <br /> '''Activate''' means, from now on all the''' python commands''' will run inside this '''venv'''.<br /> |- style=&quot;border:1pt solid #000000;padding:0.176cm;&quot;<br /> || [Terminal]<br /> <br /> Typing<br /> <br /> $ . flask_venv/bin/activate<br /> <br /> <br /> <br /> || To do that, we have to run the '''activate''' executable from the '''bin directory'''. <br /> <br /> <br /> Type '''dot &lt;space&gt; flask &lt;underscore&gt; venv slash bin slash activate'''<br /> <br /> <br /> Press '''Enter.'''<br /> |- style=&quot;border:1pt solid #000000;padding:0.176cm;&quot;<br /> || <br /> || The '''shell''' now uses an instance of '''Python '''from our '''virtual environment.'''<br /> |- style=&quot;border:1pt solid #000000;padding:0.176cm;&quot;<br /> || [Terminal]<br /> <br /> Highlight<br /> <br /> (flask_env)<br /> || Once activated, notice the change in the '''terminal'''. <br /> <br /> <br /> We can see the name of the environment '''flask_venv''' inside parentheses, in the '''terminal'''.<br /> <br /> <br /> This indicates that we are inside an activated '''virtual''' '''environment''' called '''flask_venv'''.<br /> |- style=&quot;border:1pt solid #000000;padding:0.176cm;&quot;<br /> || [Terminal]<br /> <br /> Type<br /> <br /> $ python3 -V<br /> || We should now make sure that we are using '''Python 3''' inside this '''Virtual Environment.''' <br /> <br /> <br /> For that, type '''python3 &lt;space&gt; hyphen capital V''' and press '''Enter.'''<br /> <br /> <br /> In my case it shows '''Python 3.5.2'''.<br /> |- style=&quot;border:1pt solid #000000;padding:0.176cm;&quot;<br /> || [Terminal]<br /> <br /> Typing<br /> <br /> $ pip3 install flask<br /> || Next let us install '''flask''' inside '''venv'''.<br /> <br /> <br /> Type '''pip3&lt;space&gt; install &lt;space&gt; flask '''and press '''Enter.'''<br /> <br /> <br /> This will install the '''Flask''' package only for this '''venv''' and not system wide. <br /> |- style=&quot;border:1pt solid #000000;padding:0.176cm;&quot;<br /> || [Terminal]<br /> <br /> Highlight<br /> <br /> “...installed Flask-1.0.2 Jinja2-2.10 MarkupSafe-1.0 Werkzeug-0.14.1...”<br /> || Some associated packages like '''Jinja2''', '''MarkupSafe''' and '''Werkzeug''' will also get installed.<br /> |- style=&quot;border:1pt solid #000000;padding:0.176cm;&quot;<br /> || [Terminal]<br /> <br /> <br /> Type<br /> <br /> <br /> $pip list<br /> || To confirm, whether '''Flask''' has been installed or not, type <br /> <br /> '''pip &lt;space&gt; list'''<br /> <br /> <br /> And press '''Enter.'''<br /> |- style=&quot;border:1pt solid #000000;padding:0.176cm;&quot;<br /> || [Terminal]<br /> <br /> <br /> Highlight flask, jinja2, werkzeug.<br /> || Observe that we have '''flask, jinja2, werkzeug''' etc.<br /> <br /> <br /> That means our '''Flask''' installation is successful.<br /> |- style=&quot;border:1pt solid #000000;padding:0.176cm;&quot;<br /> || [Terminal]<br /> || Let us see the working of '''Flask''' by writing a simple '''‘hello world’ app'''.<br /> |- style=&quot;border:1pt solid #000000;padding:0.176cm;&quot;<br /> || Only narration<br /> || Let’s create a '''python''' file at the same level as '''flask_venv'''.<br /> <br /> <br /> This is so that the '''flask_venv '''is logically separated from the '''hello world app'''.<br /> |- style=&quot;border:1pt solid #000000;padding:0.176cm;&quot;<br /> || Only narration<br /> || I will be using the '''atom text editor.'''<br /> <br /> <br /> However, you can use any''' text editor''' of your choice.<br /> |- style=&quot;border:1pt solid #000000;padding:0.176cm;&quot;<br /> || [Terminal]<br /> <br /> <br /> $ atom hello_flask.py<br /> || Type the command<br /> <br /> '''atom &lt;space&gt; hello underscore flask dot py'''<br /> <br /> and press '''Enter.'''<br /> |- style=&quot;border:1pt solid #000000;padding:0.176cm;&quot;<br /> || <br /> || A text editor called '''Atom''' will open.<br /> <br /> <br /> This will open the file in the '''text editor '''window.<br /> |- style=&quot;border:1pt solid #000000;padding:0.176cm;&quot;<br /> || [Text Editor]<br /> <br /> <br /> Close the default tabs.<br /> || If you open the '''Atom''' editor, for the first time you may see two default tabs.<br /> <br /> <br /> “'''Welcome'''” and “'''Telemetry Consent'''”. <br /> <br /> <br /> Click on the '''close''' buttons next to these tabs to close them.<br /> |- style=&quot;border:1pt solid #000000;padding:0.176cm;&quot;<br /> || [Text Editor]<br /> <br /> <br /> from flask import Flask<br /> <br /> app = Flask(__name__)<br /> <br /> <br /> @app.route('/')<br /> <br /> def hello_world():<br /> <br /> (Tab)return 'Hello, World!'<br /> || Type the code as shown here. <br /> <br /> <br /> Which will launch a very simple '''built-in server.'''<br /> <br /> <br /> <br /> |- style=&quot;border:1pt solid #000000;padding:0.176cm;&quot;<br /> || [Text Editor]<br /> || We will discuss this '''program''' and its '''elements''' in detail in later tutorials.<br /> |- style=&quot;border:1pt solid #000000;padding:0.176cm;&quot;<br /> || Save the file by pressing Ctrl+S.<br /> || For now, let’s save the file by pressing '''Ctrl and S''' keys together.<br /> |- style=&quot;border:1pt solid #000000;padding:0.176cm;&quot;<br /> || Click close button.<br /> || Then close the editor by clicking on the '''close''' button at the top left corner of the window.<br /> |- style=&quot;border:1pt solid #000000;padding:0.176cm;&quot;<br /> || [Terminal]<br /> <br /> Type<br /> <br /> <br /> $ export FLASK_APP=hello_flask.py<br /> || Come back to the '''terminal''', and type<br /> <br /> '''export &lt;space&gt; FLASK_APP &lt;equal to&gt; hello underscore flask dot py'''<br /> <br /> <br /> And press '''Enter'''.<br /> |- style=&quot;border:1pt solid #000000;padding:0.176cm;&quot;<br /> || Only narration.<br /> || This command sets an '''environment variable '''named '''FLASK_APP''' with the '''python '''file-name.<br /> <br /> <br /> The '''FLASK_APP variable '''specifies the '''module '''to import while running our '''app'''.<br /> <br /> <br /> This tells the '''terminal''' which '''flask app '''to work with.<br /> |- style=&quot;border:1pt solid #000000;padding:0.176cm;&quot;<br /> || [Terminal]<br /> <br /> <br /> Type<br /> <br /> $ echo $FLASK_APP<br /> || It is possible to verify that we have indeed set '''FLASK_APP variable''' by the filename.<br /> <br /> <br /> To do that type<br /> <br /> '''echo &lt;space&gt; &lt;dollar&gt; FLASK underscore APP'''<br /> <br /> And press''' Enter.'''<br /> |- style=&quot;border:1pt solid #000000;padding:0.176cm;&quot;<br /> || Point to the output<br /> || Observe that we got the filename '''hello underscore flask dot py''' back.<br /> |- style=&quot;border:1pt solid #000000;padding:0.176cm;&quot;<br /> || [Terminal]<br /> <br /> Type<br /> <br /> <br /> $ python3 -m flask run<br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> [Enter]<br /> || Now type<br /> <br /> '''python3 &lt;space&gt; hyphen m &lt;space&gt; flask &lt;space&gt; run'''<br /> <br /> <br /> This command runs the '''flask application''' named '''hello underscore flask'''.<br /> <br /> <br /> The file to execute is the one given by the '''FLASK_APP environment variable.'''<br /> <br /> <br /> We have already set that in the previous step.<br /> <br /> <br /> Press '''Enter'''.<br /> |- style=&quot;border:1pt solid #000000;padding:0.176cm;&quot;<br /> || Point to the message<br /> || If all goes well, you should see a message <br /> <br /> '''“Running on [http://127.0.0.1:5000/ http://127.0.0.1:5000/]”'''<br /> <br /> <br /> This implies that the '''server''' is running locally.<br /> |- style=&quot;border:1pt solid #000000;padding:0.176cm;&quot;<br /> || [Firefox]<br /> <br /> Type <br /> <br /> [http://127.0.0.1:5000/ http://127.0.0.1:5000/]<br /> <br /> And press Enter.<br /> || Now, open a web browser.<br /> <br /> <br /> In the address bar, type [http://127.0.0.1:5000/ http://127.0.0.1:5000/] and press '''Enter'''.<br /> |- style=&quot;border:1pt solid #000000;padding:0.176cm;&quot;<br /> || Highlight ‘Hello, World!’<br /> || We can see the message ‘'''Hello, World!'''’ written in the browser window. <br /> <br /> <br /> Which means that '''Flask '''is working fine in the '''Virtual Environment'''.<br /> |-<br /> | style=&quot;background-color:#ffffff;border-top:1pt solid #000000;border-bottom:0.5pt solid #000000;border-left:0.5pt solid #000000;border-right:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;&quot; | Switch to Terminal<br /> | style=&quot;background-color:#ffffff;border-top:1pt solid #000000;border-bottom:0.5pt solid #000000;border-left:0.5pt solid #000000;border-right:0.5pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;&quot; | Let us go back to the '''terminal.'''<br /> |-<br /> | style=&quot;background-color:#ffffff;border-top:1pt solid #000000;border-bottom:0.5pt solid #000000;border-left:0.5pt solid #000000;border-right:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;&quot; | Press Ctrl+c simultaneously <br /> | style=&quot;background-color:#ffffff;border-top:1pt solid #000000;border-bottom:0.5pt solid #000000;border-left:0.5pt solid #000000;border-right:0.5pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;&quot; | To stop the '''server''', press '''Ctrl''' and '''C''' keys simultaneously.<br /> |-<br /> | style=&quot;border-top:1pt solid #000000;border-bottom:0.5pt solid #000000;border-left:0.5pt solid #000000;border-right:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;&quot; | [Terminal]<br /> <br /> Type deactivate and press Enter<br /> | style=&quot;border-top:1pt solid #000000;border-bottom:0.5pt solid #000000;border-left:0.5pt solid #000000;border-right:0.5pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;&quot; | When the '''Virtual Environment''' is not in use, we can deactivate it.<br /> <br /> <br /> To do so, type '''deactivate''' and press '''Enter'''.<br /> |-<br /> | style=&quot;border-top:1pt solid #000000;border-bottom:0.5pt solid #000000;border-left:0.5pt solid #000000;border-right:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;&quot; | [Terminal]<br /> <br /> Point the shell prompt<br /> | style=&quot;border-top:1pt solid #000000;border-bottom:0.5pt solid #000000;border-left:0.5pt solid #000000;border-right:0.5pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;&quot; | We can see that the '''flask_venv '''name disappears from the '''command prompt.'''<br /> |-<br /> | style=&quot;border-top:1pt solid #000000;border-bottom:0.5pt solid #000000;border-left:0.5pt solid #000000;border-right:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;&quot; | <br /> | style=&quot;border-top:1pt solid #000000;border-bottom:0.5pt solid #000000;border-left:0.5pt solid #000000;border-right:0.5pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;&quot; | With this, we come to the end of this tutorial.<br /> <br /> <br /> Let us summarize.<br /> |- style=&quot;border:1pt solid #000000;padding:0.176cm;&quot;<br /> || Slide 9: Summary<br /> || In this tutorial we learnt to<br /> * &lt;div style=&quot;margin-left:1.27cm;margin-right:0cm;&quot;&gt;Create a '''Virtual Environment.'''&lt;/div&gt;<br /> * &lt;div style=&quot;margin-left:1.27cm;margin-right:0cm;&quot;&gt;Activate and deactivate the '''Virtual Environment'''.&lt;/div&gt;<br /> * &lt;div style=&quot;margin-left:1.27cm;margin-right:0cm;&quot;&gt;Install '''Flask '''and&lt;/div&gt;<br /> * &lt;div style=&quot;margin-left:1.27cm;margin-right:0cm;&quot;&gt;Launch '''“Hello world”''' in '''Flask'''.&lt;/div&gt;<br /> <br /> <br /> |-<br /> | style=&quot;border-top:1pt solid #000000;border-bottom:0.5pt solid #000000;border-left:0.5pt solid #000000;border-right:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;&quot; | Slide: About Spoken Tutorial project<br /> | style=&quot;border-top:1pt solid #000000;border-bottom:0.5pt solid #000000;border-left:0.5pt solid #000000;border-right:0.5pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;&quot; | The video at the following link summarises the Spoken Tutorial project.<br /> <br /> <br /> Please download and watch it.<br /> |-<br /> | style=&quot;background-color:#ffffff;border-top:1pt solid #000000;border-bottom:0.5pt solid #000000;border-left:0.5pt solid #000000;border-right:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;&quot; | Slide:<br /> <br /> Spoken Tutorial workshops<br /> | style=&quot;background-color:#ffffff;border-top:1pt solid #000000;border-bottom:0.5pt solid #000000;border-left:0.5pt solid #000000;border-right:0.5pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;&quot; | &lt;span style=&quot;background-color:#ffffff;&quot;&gt;The&amp;nbsp;&lt;/span&gt;&lt;span style=&quot;background-color:#ffffff;&quot;&gt;'''Spoken Tutorial Project'''&lt;/span&gt;&lt;span style=&quot;background-color:#ffffff;&quot;&gt;&amp;nbsp;team &lt;/span&gt;conducts workshops and gives certificates.<br /> <br /> <br /> For more details, please write to us.<br /> |-<br /> | style=&quot;border-top:1pt solid #000000;border-bottom:0.5pt solid #000000;border-left:0.5pt solid #000000;border-right:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;&quot; | Slide: Forum for specific questions:<br /> | style=&quot;border-top:1pt solid #000000;border-bottom:0.5pt solid #000000;border-left:0.5pt solid #000000;border-right:0.5pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;&quot; | <br /> * &lt;div style=&quot;margin-left:1.27cm;margin-right:0cm;&quot;&gt;Do you have questions in this Spoken Tutorial?&lt;/div&gt;<br /> * &lt;div style=&quot;margin-left:1.27cm;margin-right:0cm;&quot;&gt;Please visit this site&lt;/div&gt;<br /> * &lt;div style=&quot;margin-left:1.27cm;margin-right:0cm;&quot;&gt;Choose the minute and second where you have the question.&lt;/div&gt;<br /> * &lt;div style=&quot;margin-left:1.27cm;margin-right:0cm;&quot;&gt;Explain your question briefly.&lt;/div&gt;<br /> * &lt;div style=&quot;margin-left:1.27cm;margin-right:0cm;&quot;&gt;Someone from our team will answer them.&lt;/div&gt;<br /> <br /> <br /> |-<br /> | style=&quot;border-top:1pt solid #000000;border-bottom:0.5pt solid #000000;border-left:0.5pt solid #000000;border-right:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;&quot; | Slide: Forum for specific questions:<br /> | style=&quot;border-top:1pt solid #000000;border-bottom:0.5pt solid #000000;border-left:0.5pt solid #000000;border-right:0.5pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;&quot; | <br /> * &lt;div style=&quot;margin-left:1.27cm;margin-right:0cm;&quot;&gt;The Spoken Tutorial forum is for specific questions on this tutorial.&lt;/div&gt;<br /> * &lt;div style=&quot;margin-left:1.27cm;margin-right:0cm;&quot;&gt;Please do not post unrelated and general questions on them.&lt;/div&gt;<br /> * &lt;div style=&quot;margin-left:1.27cm;margin-right:0cm;&quot;&gt;This will help reduce the clutter.&lt;/div&gt;<br /> * &lt;div style=&quot;margin-left:1.27cm;margin-right:0cm;&quot;&gt;With less clutter, we can use these discussion as instructional material.&lt;/div&gt;<br /> <br /> <br /> |-<br /> | style=&quot;background-color:#ffffff;border-top:1pt solid #000000;border-bottom:0.5pt solid #000000;border-left:0.5pt solid #000000;border-right:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;&quot; | Slide: Acknowledgement<br /> | style=&quot;border-top:1pt solid #000000;border-bottom:0.5pt solid #000000;border-left:0.5pt solid #000000;border-right:0.5pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;&quot; | Spoken Tutorial Project is funded by NMEICT, MHRD, Government of India.<br /> <br /> <br /> More information on this mission is available at this link.<br /> |- style=&quot;border:1pt solid #000000;padding:0.176cm;&quot;<br /> || <br /> || This is Siddhartha Sarkar signing off. Thanks for watching.<br /> |-<br /> |}</div>

SiddharthaSarkar https://script.spoken-tutorial.org/index.php/User:SiddharthaSarkar 2018-12-19T13:49:54Z

<p>SiddharthaSarkar: First edit</p> <hr /> <div>'''Presently contributing to Python Flask Spoken tutorial Series.'''</div>

SiddharthaSarkar