|
|
<!doctype html>
|
|
|
<html lang="en">
|
|
|
<head>
|
|
|
<meta charset="utf-8">
|
|
|
|
|
|
<title></title>
|
|
|
|
|
|
<meta name="description" content="">
|
|
|
|
|
|
|
|
|
<meta name="apple-mobile-web-app-capable" content="yes" />
|
|
|
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
|
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
|
|
|
|
|
<!-- For syntax highlighting -->
|
|
|
<link rel="stylesheet" href="../../../../lib/css/zenburn.css">
|
|
|
<link rel="stylesheet" href="../../../../lib/css/prism.css">
|
|
|
|
|
|
<link rel="stylesheet" href="../../../../css/reveal.css">
|
|
|
<link rel="stylesheet" href="../../../../css/theme/ga-title.css" id="theme">
|
|
|
|
|
|
<!--[if lt IE 9]>
|
|
|
<script src="lib/js/html5shiv.js"></script>
|
|
|
<![endif]-->
|
|
|
|
|
|
<link rel="stylesheet" type="text/css" href="https://s3.amazonaws.com/python-ga/proxima-nova/fonts.css" />
|
|
|
|
|
|
</head>
|
|
|
|
|
|
<body class="language-javascript">
|
|
|
|
|
|
<div class="reveal">
|
|
|
|
|
|
<!-- Any section element inside of this container is displayed as a slide -->
|
|
|
<div class="slides">
|
|
|
|
|
|
|
|
|
<!--
|
|
|
title: Variables and Routing in Flask
|
|
|
type: lesson
|
|
|
duration: "01:00"
|
|
|
creator: Kevin Coyle
|
|
|
-->
|
|
|
<section id="section" class="level2 separator">
|
|
|
<h2><img src="https://s3.amazonaws.com/python-ga/images/GA_Cog_Medium_White_RGB.png" /></h2>
|
|
|
<h1>
|
|
|
Variables and Routing in Flask
|
|
|
</h1>
|
|
|
<hr />
|
|
|
</section>
|
|
|
<section id="learning-objectives" class="level2">
|
|
|
<h2>Learning Objectives</h2>
|
|
|
<p><em>After this lesson, you will be able to:</em></p>
|
|
|
<ul>
|
|
|
<li>Display variables on a webpage.</li>
|
|
|
<li>Create a route in Flask.</li>
|
|
|
</ul>
|
|
|
<hr />
|
|
|
</section>
|
|
|
<section id="multiple-routes" class="level2">
|
|
|
<h2>Multiple Routes</h2>
|
|
|
<aside class="notes">
|
|
|
<p><strong>Talking Points:</strong></p>
|
|
|
<ul>
|
|
|
<li>One of the things that makes Python so fantastic is that it is object-oriented.</li>
|
|
|
<li>Assigning variables turns them into a type of object — with an object, we can do some awesome things.</li>
|
|
|
<li>We’re going to look at variables in our Flask app. Creating variables allows us to return values of those variables, as well as provides us with all the methods and attributes in that type of object.</li>
|
|
|
<li>Routes allow us to extend this a step further — we can take variables and put them into our URL, which we can then use to render some data on the page.</li>
|
|
|
</ul>
|
|
|
</aside>
|
|
|
<ul>
|
|
|
<li>Our website is cool, but it’s just one page.</li>
|
|
|
<li>What about recipe pages? “About” pages?</li>
|
|
|
<li>We need to use <code>routes</code>.</li>
|
|
|
</ul>
|
|
|
<p>But first, we need to learn <code>variables</code>.</p>
|
|
|
<hr />
|
|
|
</section>
|
|
|
<section id="variables-again" class="level2">
|
|
|
<h2>Variables? Again?</h2>
|
|
|
<ul>
|
|
|
<li><p>Yes! Regular variables.</p>
|
|
|
<p><code>x = "this string"</code></p></li>
|
|
|
<li><p>Difference: Here, we’re in the Flask app.</p></li>
|
|
|
<li><p>Very specific use cases:</p>
|
|
|
<ul>
|
|
|
<li>Routes (We’re learning now.)</li>
|
|
|
<li>Templates (We’ll learn next.)</li>
|
|
|
<li>Requests (We’ll learn later.)</li>
|
|
|
</ul></li>
|
|
|
</ul>
|
|
|
<aside class="notes">
|
|
|
<p><strong>Talking Points:</strong></p>
|
|
|
<ul>
|
|
|
<li>When we’re talking about variables here, we’re talking about the same thing as variables in base Python.</li>
|
|
|
<li>You assign a variable to a value and that value gets stored in memory.</li>
|
|
|
<li>We’ll go over some common use cases for including variables in your Flask app.</li>
|
|
|
<li>Note, however, that using variables in templates and requests will be covered in a later lesson.</li>
|
|
|
</ul>
|
|
|
</aside>
|
|
|
<hr />
|
|
|
</section>
|
|
|
<section id="three-ways-to-read-in-a-variable" class="level2">
|
|
|
<h2>Three Ways to Read in a Variable</h2>
|
|
|
<aside class="notes">
|
|
|
<p><strong>Talking Points:</strong></p>
|
|
|
<ul>
|
|
|
<li>There are several ways to obtain the value for a variable.</li>
|
|
|
<li>Depending on that value and what it represents, there are different ways of going about entering that into our Flask app.</li>
|
|
|
<li>The first is to have the variable assignment take place right in our Flask app.</li>
|
|
|
<li>Another is to read it from a Python script, like you would for any other library.</li>
|
|
|
<li>Yet another is to read it in from a file, unlike you would import any library.</li>
|
|
|
</ul>
|
|
|
</aside>
|
|
|
<p>Variables come from:</p>
|
|
|
<ul>
|
|
|
<li>Within our Flask app.</li>
|
|
|
<li>From another Python file.</li>
|
|
|
<li>From any other file.</li>
|
|
|
</ul>
|
|
|
<hr />
|
|
|
</section>
|
|
|
<section id="method-1-set-variables-in-our-flask-app" class="level2">
|
|
|
<h2>Method 1: Set Variables in Our Flask App</h2>
|
|
|
<aside class="notes">
|
|
|
<p><strong>Talking Points:</strong></p>
|
|
|
<ul>
|
|
|
<li>The easiest way to obtain a value from a variable in Flask is to assign it directly in your Flask app.</li>
|
|
|
<li>This makes sense if we are only trying to output a very small amount of information.</li>
|
|
|
<li>Consider the following modification on our <code>Hello World</code> app.</li>
|
|
|
</ul>
|
|
|
</aside>
|
|
|
<p>These <em>aren’t</em> set inside <code>def hello()</code>.</p>
|
|
|
<ul>
|
|
|
<li>What does that make them?</li>
|
|
|
</ul>
|
|
|
<p><code>hello_variables.py</code></p>
|
|
|
<div class="sourceCode" id="cb1"><pre class="sourceCode python"><code class="sourceCode python"><a class="sourceLine" id="cb1-1" data-line-number="1"><span class="im">from</span> flask <span class="im">import</span> Flask</a>
|
|
|
<a class="sourceLine" id="cb1-2" data-line-number="2"></a>
|
|
|
<a class="sourceLine" id="cb1-3" data-line-number="3">app <span class="op">=</span> Flask(<span class="va">__name__</span>)</a>
|
|
|
<a class="sourceLine" id="cb1-4" data-line-number="4"></a>
|
|
|
<a class="sourceLine" id="cb1-5" data-line-number="5">my_job_title <span class="op">=</span> <span class="st">"Python pro"</span></a>
|
|
|
<a class="sourceLine" id="cb1-6" data-line-number="6"></a>
|
|
|
<a class="sourceLine" id="cb1-7" data-line-number="7"><span class="at">@app.route</span>(<span class="st">'/'</span>)</a>
|
|
|
<a class="sourceLine" id="cb1-8" data-line-number="8"><span class="kw">def</span> hello():</a>
|
|
|
<a class="sourceLine" id="cb1-9" data-line-number="9"> <span class="cf">return</span> <span class="st">"Hello, "</span> <span class="op">+</span> my_job_title</a>
|
|
|
<a class="sourceLine" id="cb1-10" data-line-number="10"></a>
|
|
|
<a class="sourceLine" id="cb1-11" data-line-number="11"><span class="cf">if</span> <span class="va">__name__</span> <span class="op">==</span> <span class="st">'__main__'</span>:</a>
|
|
|
<a class="sourceLine" id="cb1-12" data-line-number="12"> app.run(debug<span class="op">=</span><span class="va">True</span>)</a></code></pre></div>
|
|
|
<hr />
|
|
|
</section>
|
|
|
<section id="we-do-in-app-variables" class="level2">
|
|
|
<h2>We Do: In-App Variables</h2>
|
|
|
<ul>
|
|
|
<li>We can practice this: In your existing <code>my_website.py</code>, comment out the <code>return render_template("index.html")</code>.</li>
|
|
|
</ul>
|
|
|
<p>Instead, have:</p>
|
|
|
<div class="sourceCode" id="cb2"><pre class="sourceCode python"><code class="sourceCode python"><a class="sourceLine" id="cb2-1" data-line-number="1">my_job_title <span class="op">=</span> <span class="st">"Python pro"</span></a>
|
|
|
<a class="sourceLine" id="cb2-2" data-line-number="2"></a>
|
|
|
<a class="sourceLine" id="cb2-3" data-line-number="3"><span class="at">@app.route</span>(<span class="st">'/'</span>)</a>
|
|
|
<a class="sourceLine" id="cb2-4" data-line-number="4"><span class="kw">def</span> home():</a>
|
|
|
<a class="sourceLine" id="cb2-5" data-line-number="5"> <span class="cf">return</span> <span class="st">"Hello, "</span> <span class="op">+</span> my_job_title</a></code></pre></div>
|
|
|
<aside class="notes">
|
|
|
<p><strong>Current Code Status</strong>:</p>
|
|
|
<p>The code could look like this now:</p>
|
|
|
<div class="sourceCode" id="cb3"><pre class="sourceCode python"><code class="sourceCode python"><a class="sourceLine" id="cb3-1" data-line-number="1"><span class="im">from</span> flask <span class="im">import</span> Flask, render_template</a>
|
|
|
<a class="sourceLine" id="cb3-2" data-line-number="2">app <span class="op">=</span> Flask(<span class="va">__name__</span>)</a>
|
|
|
<a class="sourceLine" id="cb3-3" data-line-number="3"></a>
|
|
|
<a class="sourceLine" id="cb3-4" data-line-number="4">my_job_title <span class="op">=</span> <span class="st">"Python pro"</span></a>
|
|
|
<a class="sourceLine" id="cb3-5" data-line-number="5"></a>
|
|
|
<a class="sourceLine" id="cb3-6" data-line-number="6"><span class="at">@app.route</span>(<span class="st">'/'</span>)</a>
|
|
|
<a class="sourceLine" id="cb3-7" data-line-number="7"><span class="kw">def</span> home():</a>
|
|
|
<a class="sourceLine" id="cb3-8" data-line-number="8"> <span class="cf">return</span> <span class="st">"Hello, "</span> <span class="op">+</span> my_job_title</a>
|
|
|
<a class="sourceLine" id="cb3-9" data-line-number="9"></a>
|
|
|
<a class="sourceLine" id="cb3-10" data-line-number="10"><span class="kw">def</span> hello_world():</a>
|
|
|
<a class="sourceLine" id="cb3-11" data-line-number="11"> line1 <span class="op">=</span> <span class="st">"<h1><b>Hello</b> World!</h1>"</span></a>
|
|
|
<a class="sourceLine" id="cb3-12" data-line-number="12"> line2 <span class="op">=</span> <span class="st">"<p>If music be the food of love, play on!</p>"</span></a>
|
|
|
<a class="sourceLine" id="cb3-13" data-line-number="13"> line3 <span class="op">=</span> <span class="st">"<img src='https://media.giphy.com/media/sWrDT2OqxJ3Fu/giphy.gif'>"</span></a>
|
|
|
<a class="sourceLine" id="cb3-14" data-line-number="14"> total <span class="op">=</span> line1 <span class="op">+</span> line2 <span class="op">+</span> line3</a>
|
|
|
<a class="sourceLine" id="cb3-15" data-line-number="15"> <span class="co"># return render_template("index.html")</span></a>
|
|
|
<a class="sourceLine" id="cb3-16" data-line-number="16"><span class="cf">if</span> <span class="va">__name__</span> <span class="op">==</span> <span class="st">'__main__'</span>:</a>
|
|
|
<a class="sourceLine" id="cb3-17" data-line-number="17"> app.run(debug<span class="op">=</span><span class="va">True</span>)</a></code></pre></div>
|
|
|
</aside>
|
|
|
<hr />
|
|
|
</section>
|
|
|
<section id="method-2-read-variables-from-a-python-file" class="level2">
|
|
|
<h2>Method 2: Read Variables From a Python File</h2>
|
|
|
<aside class="notes">
|
|
|
<p><strong>Talking Points:</strong></p>
|
|
|
<ul>
|
|
|
<li>The next way to read in a variable is to assign it in a Python file, then import that file.</li>
|
|
|
<li>This is considered the most “pythonic” way to read variables into other Python files.</li>
|
|
|
<li>In order to use this approach, you need another file that ends in <code>.py</code>.</li>
|
|
|
<li>You then read this file into your Flask app with an <code>import <myFile></code>.</li>
|
|
|
</ul>
|
|
|
</aside>
|
|
|
<ul>
|
|
|
<li><p>You’re never limited to just one <code>.py</code> file!</p></li>
|
|
|
<li><p>New Python file: <code>mySecrets.py</code></p></li>
|
|
|
</ul>
|
|
|
<div class="sourceCode" id="cb4"><pre class="sourceCode python"><code class="sourceCode python"><a class="sourceLine" id="cb4-1" data-line-number="1">username <span class="op">=</span> <span class="st">"Guy Fieri"</span></a>
|
|
|
<a class="sourceLine" id="cb4-2" data-line-number="2">password <span class="op">=</span> <span class="st">"flavortown"</span></a></code></pre></div>
|
|
|
<p>How would we print that in our Flask app?</p>
|
|
|
<p>Any ideas?</p>
|
|
|
<hr />
|
|
|
</section>
|
|
|
<section id="we-can-import-the-file" class="level2">
|
|
|
<h2>We Can Import the File</h2>
|
|
|
<p>Your normal Flask app:</p>
|
|
|
<div class="sourceCode" id="cb5"><pre class="sourceCode python"><code class="sourceCode python"><a class="sourceLine" id="cb5-1" data-line-number="1"><span class="im">from</span> flask <span class="im">import</span> Flask</a>
|
|
|
<a class="sourceLine" id="cb5-2" data-line-number="2"><span class="im">import</span> mySecrets <span class="co">## You can import any file!</span></a>
|
|
|
<a class="sourceLine" id="cb5-3" data-line-number="3"></a>
|
|
|
<a class="sourceLine" id="cb5-4" data-line-number="4">app <span class="op">=</span> Flask(<span class="va">__name__</span>)</a>
|
|
|
<a class="sourceLine" id="cb5-5" data-line-number="5"></a>
|
|
|
<a class="sourceLine" id="cb5-6" data-line-number="6"><span class="co">## Call it like a module.</span></a>
|
|
|
<a class="sourceLine" id="cb5-7" data-line-number="7">my_name <span class="op">=</span> mySecrets.username</a>
|
|
|
<a class="sourceLine" id="cb5-8" data-line-number="8">my_password <span class="op">=</span> mySecrets.password</a>
|
|
|
<a class="sourceLine" id="cb5-9" data-line-number="9"></a>
|
|
|
<a class="sourceLine" id="cb5-10" data-line-number="10"><span class="at">@app.route</span>(<span class="st">'/'</span>)</a>
|
|
|
<a class="sourceLine" id="cb5-11" data-line-number="11"><span class="kw">def</span> hello():</a>
|
|
|
<a class="sourceLine" id="cb5-12" data-line-number="12"> <span class="cf">return</span> <span class="st">"Hello, "</span> <span class="op">+</span> my_name <span class="op">+</span> <span class="st">", welcome to "</span> <span class="op">+</span> my_password</a>
|
|
|
<a class="sourceLine" id="cb5-13" data-line-number="13"></a>
|
|
|
<a class="sourceLine" id="cb5-14" data-line-number="14"><span class="cf">if</span> <span class="va">__name__</span> <span class="op">==</span> <span class="st">'__main__'</span>:</a>
|
|
|
<a class="sourceLine" id="cb5-15" data-line-number="15"> app.run(debug<span class="op">=</span><span class="va">True</span>)</a></code></pre></div>
|
|
|
<hr />
|
|
|
</section>
|
|
|
<section id="method-2-use-cases" class="level2">
|
|
|
<h2>Method 2: Use Cases</h2>
|
|
|
<aside class="notes">
|
|
|
<p><strong>Talking Points:</strong></p>
|
|
|
<ul>
|
|
|
<li>A great use case for this is when you’d like to have your secret info (tokens, passwords, etc.) in a file that isn’t your Flask app.</li>
|
|
|
<li>When you push your code to GitHub, you can then have your Flask app open for the world to see, and your passwords safely in a file on your local drive.</li>
|
|
|
<li>Another use case is file management. Pretend you have a lot of variables that may not make it into every file, but you want a “master file” from which to read all these variables.</li>
|
|
|
</ul>
|
|
|
</aside>
|
|
|
<p>Why?</p>
|
|
|
<ul>
|
|
|
<li>You have secret info (tokens, passwords, etc.) — keep them locally!</li>
|
|
|
<li>You have many Flask pages, so you make a “master file” to hold all variables.</li>
|
|
|
</ul>
|
|
|
<hr />
|
|
|
</section>
|
|
|
<section id="your-turn-another-py-file" class="level2">
|
|
|
<h2>Your Turn: Another <code>py</code> File</h2>
|
|
|
<p>Now it’s your turn!</p>
|
|
|
<ul>
|
|
|
<li>Make a file called <code>python_variables.py</code> in the same folder as <code>my_website.py</code>.</li>
|
|
|
<li>Insert some variables into <code>python_variables.py</code> - perhaps some books you like.</li>
|
|
|
<li>Import <code>python_variables</code> into your Flask app, <code>my_website.py</code>.</li>
|
|
|
<li>Display the values from <code>python_variables</code> in your Flask app.</li>
|
|
|
</ul>
|
|
|
<hr />
|
|
|
</section>
|
|
|
<section id="method-3-reading-from-a-non-python-file" class="level2">
|
|
|
<h2>Method 3: Reading From a Non-Python File</h2>
|
|
|
<aside class="notes">
|
|
|
<ul>
|
|
|
<li>Yet another way to read variables in is in non-Python files.</li>
|
|
|
<li>Not all data/info you’ll need will be in a static Python file.</li>
|
|
|
<li>This approach is a combo of one of the earlier two approaches.</li>
|
|
|
<li>Pretend say you have another file that’s a .txt file.</li>
|
|
|
<li>We can do two things:
|
|
|
<ul>
|
|
|
<li>Read that .txt file in directly in our Flask app and set that to a variable (like Approach 1).</li>
|
|
|
<li>Read that .txt in with another file and save that to a variable which your Flask app reads (like Approach 2).
|
|
|
<ul>
|
|
|
<li>Here, we take Approach 1. First, though, we create a .txt file.</li>
|
|
|
<li>Then, we open it with <code>os</code> and <code>file open</code>.</li>
|
|
|
<li>Then, we set that .txt to a variable and print that variable in our <code>route()</code> function.</li>
|
|
|
</ul></li>
|
|
|
</ul></li>
|
|
|
</ul>
|
|
|
</aside>
|
|
|
<p>Let’s create a <code>.txt</code> file called <code>hi.txt</code> in the same folder where our app lives. We’ll include some Shakespeare poetry.</p>
|
|
|
<pre><code>So are you to my thoughts as food to life,
|
|
|
Or as sweet-seasoned showers are to the ground;</code></pre>
|
|
|
<p>How do you think we get this into our Flask app?</p>
|
|
|
<hr />
|
|
|
</section>
|
|
|
<section id="with-file-open" class="level2">
|
|
|
<h2>With File Open</h2>
|
|
|
<p>Then, we’ll add a bit in our Flask app:</p>
|
|
|
<div class="sourceCode" id="cb7"><pre class="sourceCode python"><code class="sourceCode python"><a class="sourceLine" id="cb7-1" data-line-number="1"><span class="im">import</span> os <span class="co"># Note the new import — to be in the file system.</span></a>
|
|
|
<a class="sourceLine" id="cb7-2" data-line-number="2"></a>
|
|
|
<a class="sourceLine" id="cb7-3" data-line-number="3">file_path <span class="op">=</span> <span class="st">'.'</span></a>
|
|
|
<a class="sourceLine" id="cb7-4" data-line-number="4"><span class="co"># Note the "with"! We don't need "close".</span></a>
|
|
|
<a class="sourceLine" id="cb7-5" data-line-number="5"><span class="cf">with</span> <span class="bu">open</span>(os.path.join(file_path, <span class="st">'hi.txt'</span>)) <span class="im">as</span> f:</a>
|
|
|
<a class="sourceLine" id="cb7-6" data-line-number="6"> the_text <span class="op">=</span> f.read()</a>
|
|
|
<a class="sourceLine" id="cb7-7" data-line-number="7"></a>
|
|
|
<a class="sourceLine" id="cb7-8" data-line-number="8"><span class="at">@app.route</span>(<span class="st">'/text'</span>)</a>
|
|
|
<a class="sourceLine" id="cb7-9" data-line-number="9"><span class="kw">def</span> read_txt():</a>
|
|
|
<a class="sourceLine" id="cb7-10" data-line-number="10"> <span class="cf">return</span> the_text</a></code></pre></div>
|
|
|
<hr />
|
|
|
</section>
|
|
|
<section id="you-do-add-a-.txt-file" class="level2">
|
|
|
<h2>You Do: Add a <code>.txt</code> File</h2>
|
|
|
<p>Now it’s your turn!</p>
|
|
|
<ul>
|
|
|
<li>Make a file called <code>more_variables.txt</code> in the same folder as <code>my_website.py</code>.</li>
|
|
|
<li>Write some information into <code>more_variables.txt</code> — perhaps what you’d like for breakfast tomorrow.</li>
|
|
|
<li><code>import os</code> so you can find the file.</li>
|
|
|
<li>Use this code:</li>
|
|
|
</ul>
|
|
|
<div class="sourceCode" id="cb8"><pre class="sourceCode python"><code class="sourceCode python"><a class="sourceLine" id="cb8-1" data-line-number="1"><span class="cf">with</span> <span class="bu">open</span>(os.path.join(file_path, <span class="st">'more_variables.txt'</span>)) <span class="im">as</span> f:</a>
|
|
|
<a class="sourceLine" id="cb8-2" data-line-number="2"> the_text <span class="op">=</span> f.read()</a></code></pre></div>
|
|
|
<ul>
|
|
|
<li>Display the text from <code>more_variables</code> in your Flask app.</li>
|
|
|
</ul>
|
|
|
<aside class="notes">
|
|
|
<p><strong>Current Code Status</strong>: Possible solution code:</p>
|
|
|
<div class="sourceCode" id="cb9"><pre class="sourceCode python"><code class="sourceCode python"><a class="sourceLine" id="cb9-1" data-line-number="1"><span class="im">from</span> flask <span class="im">import</span> Flask</a>
|
|
|
<a class="sourceLine" id="cb9-2" data-line-number="2"><span class="im">import</span> mySecrets <span class="co">## You can import any file!</span></a>
|
|
|
<a class="sourceLine" id="cb9-3" data-line-number="3"><span class="im">import</span> python_variables</a>
|
|
|
<a class="sourceLine" id="cb9-4" data-line-number="4"><span class="im">import</span> os <span class="co"># Note the new import — to be in the file system.</span></a>
|
|
|
<a class="sourceLine" id="cb9-5" data-line-number="5"></a>
|
|
|
<a class="sourceLine" id="cb9-6" data-line-number="6">app <span class="op">=</span> Flask(<span class="va">__name__</span>)</a>
|
|
|
<a class="sourceLine" id="cb9-7" data-line-number="7"></a>
|
|
|
<a class="sourceLine" id="cb9-8" data-line-number="8"><span class="co">## Call it like a module.</span></a>
|
|
|
<a class="sourceLine" id="cb9-9" data-line-number="9">my_name <span class="op">=</span> mySecrets.username</a>
|
|
|
<a class="sourceLine" id="cb9-10" data-line-number="10">my_password <span class="op">=</span> mySecrets.password</a>
|
|
|
<a class="sourceLine" id="cb9-11" data-line-number="11"></a>
|
|
|
<a class="sourceLine" id="cb9-12" data-line-number="12">student_name <span class="op">=</span> python_variables.student_name</a>
|
|
|
<a class="sourceLine" id="cb9-13" data-line-number="13"></a>
|
|
|
<a class="sourceLine" id="cb9-14" data-line-number="14">file_path <span class="op">=</span> <span class="st">'.'</span></a>
|
|
|
<a class="sourceLine" id="cb9-15" data-line-number="15"></a>
|
|
|
<a class="sourceLine" id="cb9-16" data-line-number="16"><span class="cf">with</span> <span class="bu">open</span>(os.path.join(file_path, <span class="st">'more_variables.txt'</span>)) <span class="im">as</span> f:</a>
|
|
|
<a class="sourceLine" id="cb9-17" data-line-number="17"> the_text <span class="op">=</span> f.read()</a>
|
|
|
<a class="sourceLine" id="cb9-18" data-line-number="18"></a>
|
|
|
<a class="sourceLine" id="cb9-19" data-line-number="19"><span class="at">@app.route</span>(<span class="st">'/text'</span>)</a>
|
|
|
<a class="sourceLine" id="cb9-20" data-line-number="20"><span class="kw">def</span> read_txt():</a>
|
|
|
<a class="sourceLine" id="cb9-21" data-line-number="21"> <span class="cf">return</span> the_text</a>
|
|
|
<a class="sourceLine" id="cb9-22" data-line-number="22"></a>
|
|
|
<a class="sourceLine" id="cb9-23" data-line-number="23"><span class="at">@app.route</span>(<span class="st">'/'</span>)</a>
|
|
|
<a class="sourceLine" id="cb9-24" data-line-number="24"><span class="kw">def</span> hello():</a>
|
|
|
<a class="sourceLine" id="cb9-25" data-line-number="25"> <span class="cf">return</span> <span class="st">"Hello, "</span> <span class="op">+</span> my_name <span class="op">+</span> <span class="st">", welcome to "</span> <span class="op">+</span> my_password <span class="op">+</span> <span class="st">". You are "</span> <span class="op">+</span> student_name <span class="op">+</span> <span class="st">". More variables are: "</span> <span class="op">+</span> the_text</a>
|
|
|
<a class="sourceLine" id="cb9-26" data-line-number="26"></a>
|
|
|
<a class="sourceLine" id="cb9-27" data-line-number="27"><span class="cf">if</span> <span class="va">__name__</span> <span class="op">==</span> <span class="st">'__main__'</span>:</a>
|
|
|
<a class="sourceLine" id="cb9-28" data-line-number="28"> app.run(debug<span class="op">=</span><span class="va">True</span>)</a></code></pre></div>
|
|
|
<hr />
|
|
|
</section>
|
|
|
<section id="knowledge-check" class="level2">
|
|
|
<h2>Knowledge Check</h2>
|
|
|
<p>What are the three approaches to read in variables to a Flask app?</p>
|
|
|
<aside class="notes">
|
|
|
<p><strong>Teaching Tip:</strong></p>
|
|
|
<ul>
|
|
|
<li>Answer: Reading directly in our Flask app, from a Python file and importing, and from a non-Python file.</li>
|
|
|
</ul>
|
|
|
</aside>
|
|
|
<hr />
|
|
|
</section>
|
|
|
<section id="part-2.-routing" class="level2">
|
|
|
<h2>Part 2. Routing</h2>
|
|
|
<hr />
|
|
|
</section>
|
|
|
<section id="what-is-that-app.route-anyway" class="level2">
|
|
|
<h2>What Is That <code>@app.route('/')</code>, Anyway?</h2>
|
|
|
<aside class="notes">
|
|
|
<strong>Talking Points:</strong> - By now, you may be wondering about that <code>@app</code> that we keep putting on the line before our function. - <code>@</code> is a way to use a “decorator.” - A decorator is a way to put one Python function into another Python function. - More formally, this process is called “wrapping a function” inside of another function. - You can check out more on decorators later, but for now, knowing that our <code>@app.route(endpoint)</code> is a way that we pass an argument — the endpoint — into a routing function. - In other words: We tell our Flask app to listen to a particular endpoint and then we have a function that happens if that endpoint gets hit.
|
|
|
</aside>
|
|
|
<p>We have:</p>
|
|
|
<ul>
|
|
|
<li>Listen to an endpoint (here, <code>/</code>).</li>
|
|
|
<li>Do <code>def home()</code> if someone goes there.</li>
|
|
|
</ul>
|
|
|
<div class="sourceCode" id="cb10"><pre class="sourceCode python"><code class="sourceCode python"><a class="sourceLine" id="cb10-1" data-line-number="1"><span class="at">@app.route</span>(<span class="st">'/'</span>) <span class="co"># When someone goes here...</span></a>
|
|
|
<a class="sourceLine" id="cb10-2" data-line-number="2"><span class="kw">def</span> home(): <span class="co"># Do this.</span></a>
|
|
|
<a class="sourceLine" id="cb10-3" data-line-number="3"> <span class="cf">return</span> render_template(<span class="st">"index.html"</span>)</a></code></pre></div>
|
|
|
<p><code>http://127.0.0.1:5000/</code> <code>=> render_template("index.html")"</code></p>
|
|
|
<p>What if we want to go to <code>http://127.0.0.1:5000/sayHi</code>?</p>
|
|
|
<hr />
|
|
|
</section>
|
|
|
<section id="suddenly-a-new-page" class="level2">
|
|
|
<h2>Suddenly, a New Page!</h2>
|
|
|
<ul>
|
|
|
<li>This is <strong>routing</strong>.</li>
|
|
|
<li>New pages on our web app!</li>
|
|
|
</ul>
|
|
|
<div class="sourceCode" id="cb11"><pre class="sourceCode python"><code class="sourceCode python"><a class="sourceLine" id="cb11-1" data-line-number="1"><span class="at">@app.route</span>(<span class="st">'/sayHi'</span>) <span class="co"># When someone goes here...</span></a>
|
|
|
<a class="sourceLine" id="cb11-2" data-line-number="2"><span class="kw">def</span> hello(): <span class="co"># Do this.</span></a>
|
|
|
<a class="sourceLine" id="cb11-3" data-line-number="3"> <span class="cf">return</span> <span class="st">"Hello, Mr. Fieri."</span></a></code></pre></div>
|
|
|
<hr />
|
|
|
</section>
|
|
|
<section id="we-do-add-a-route" class="level2">
|
|
|
<h2>We Do: Add a Route</h2>
|
|
|
<ul>
|
|
|
<li><p>In <code>my_website.py</code>, under <code>def home()</code>, add:</p>
|
|
|
<div class="sourceCode" id="cb12"><pre class="sourceCode python"><code class="sourceCode python"><a class="sourceLine" id="cb12-1" data-line-number="1"><span class="at">@app.route</span>(<span class="st">'/sayHi'</span>) <span class="co"># When someone goes here...</span></a>
|
|
|
<a class="sourceLine" id="cb12-2" data-line-number="2"><span class="kw">def</span> hello(): <span class="co"># Do this.</span></a>
|
|
|
<a class="sourceLine" id="cb12-3" data-line-number="3"> <span class="cf">return</span> <span class="st">"Hello, Mr. Fieri."</span></a></code></pre></div></li>
|
|
|
<li><p>Reload the page! Go to <code>http://127.0.0.1:5000/sayHi</code>.</p></li>
|
|
|
</ul>
|
|
|
<aside class="notes">
|
|
|
<p><strong>Current Code Status</strong>: Possible code:</p>
|
|
|
<div class="sourceCode" id="cb13"><pre class="sourceCode python"><code class="sourceCode python"><a class="sourceLine" id="cb13-1" data-line-number="1"><span class="im">from</span> flask <span class="im">import</span> Flask, render_template</a>
|
|
|
<a class="sourceLine" id="cb13-2" data-line-number="2"><span class="im">import</span> mySecrets <span class="co">## You can import any file!</span></a>
|
|
|
<a class="sourceLine" id="cb13-3" data-line-number="3"><span class="im">import</span> python_variables</a>
|
|
|
<a class="sourceLine" id="cb13-4" data-line-number="4"><span class="im">import</span> os <span class="co"># Note the new import — to be in the file system.</span></a>
|
|
|
<a class="sourceLine" id="cb13-5" data-line-number="5"></a>
|
|
|
<a class="sourceLine" id="cb13-6" data-line-number="6">app <span class="op">=</span> Flask(<span class="va">__name__</span>)</a>
|
|
|
<a class="sourceLine" id="cb13-7" data-line-number="7"></a>
|
|
|
<a class="sourceLine" id="cb13-8" data-line-number="8"><span class="co">## Call it like a module.</span></a>
|
|
|
<a class="sourceLine" id="cb13-9" data-line-number="9">my_name <span class="op">=</span> mySecrets.username</a>
|
|
|
<a class="sourceLine" id="cb13-10" data-line-number="10">my_password <span class="op">=</span> mySecrets.password</a>
|
|
|
<a class="sourceLine" id="cb13-11" data-line-number="11"></a>
|
|
|
<a class="sourceLine" id="cb13-12" data-line-number="12">student_name <span class="op">=</span> python_variables.student_name</a>
|
|
|
<a class="sourceLine" id="cb13-13" data-line-number="13"></a>
|
|
|
<a class="sourceLine" id="cb13-14" data-line-number="14">file_path <span class="op">=</span> <span class="st">'.'</span></a>
|
|
|
<a class="sourceLine" id="cb13-15" data-line-number="15"></a>
|
|
|
<a class="sourceLine" id="cb13-16" data-line-number="16"><span class="cf">with</span> <span class="bu">open</span>(os.path.join(file_path, <span class="st">'more_variables.txt'</span>)) <span class="im">as</span> f:</a>
|
|
|
<a class="sourceLine" id="cb13-17" data-line-number="17"> the_text <span class="op">=</span> f.read()</a>
|
|
|
<a class="sourceLine" id="cb13-18" data-line-number="18"></a>
|
|
|
<a class="sourceLine" id="cb13-19" data-line-number="19"><span class="at">@app.route</span>(<span class="st">'/text'</span>)</a>
|
|
|
<a class="sourceLine" id="cb13-20" data-line-number="20"><span class="kw">def</span> read_txt():</a>
|
|
|
<a class="sourceLine" id="cb13-21" data-line-number="21"> <span class="cf">return</span> the_text</a>
|
|
|
<a class="sourceLine" id="cb13-22" data-line-number="22"></a>
|
|
|
<a class="sourceLine" id="cb13-23" data-line-number="23"><span class="at">@app.route</span>(<span class="st">'/'</span>) <span class="co"># When someone goes here...</span></a>
|
|
|
<a class="sourceLine" id="cb13-24" data-line-number="24"><span class="kw">def</span> home(): <span class="co"># Do this.</span></a>
|
|
|
<a class="sourceLine" id="cb13-25" data-line-number="25"> <span class="cf">return</span> render_template(<span class="st">"index.html"</span>)</a>
|
|
|
<a class="sourceLine" id="cb13-26" data-line-number="26"></a>
|
|
|
<a class="sourceLine" id="cb13-27" data-line-number="27"><span class="at">@app.route</span>(<span class="st">'/sayHi'</span>) <span class="co"># When someone goes here...</span></a>
|
|
|
<a class="sourceLine" id="cb13-28" data-line-number="28"><span class="kw">def</span> hello(): <span class="co"># Do this.</span></a>
|
|
|
<a class="sourceLine" id="cb13-29" data-line-number="29"> <span class="cf">return</span> <span class="st">"Hello, Mr. Fieri."</span></a>
|
|
|
<a class="sourceLine" id="cb13-30" data-line-number="30"></a>
|
|
|
<a class="sourceLine" id="cb13-31" data-line-number="31"></a>
|
|
|
<a class="sourceLine" id="cb13-32" data-line-number="32"><span class="cf">if</span> <span class="va">__name__</span> <span class="op">==</span> <span class="st">'__main__'</span>:</a>
|
|
|
<a class="sourceLine" id="cb13-33" data-line-number="33"> app.run(debug<span class="op">=</span><span class="va">True</span>)</a>
|
|
|
<a class="sourceLine" id="cb13-34" data-line-number="34"></a></code></pre></div>
|
|
|
<hr />
|
|
|
</section>
|
|
|
<section id="what-is-a-route" class="level2">
|
|
|
<h2>What Is a Route?</h2>
|
|
|
<aside class="notes">
|
|
|
<p><strong>Talking Points:</strong></p>
|
|
|
<ul>
|
|
|
<li>A route in our context here consists of our <code>localhost:5000</code>, as well as the rest of our URL.</li>
|
|
|
<li>We pass the rest of our endpoint into our <code>app.route()</code> function as an argument.</li>
|
|
|
<li>This means everything inside of the parentheses and inside of quotes becomes our URL.</li>
|
|
|
</ul>
|
|
|
</aside>
|
|
|
<ul>
|
|
|
<li>The URL: <code>http://127.0.0.1:5000/sayHi</code></li>
|
|
|
<li>We <em>route</em> to different URLs:
|
|
|
<ul>
|
|
|
<li><code>http://127.0.0.1:5000/sayHi</code></li>
|
|
|
<li><code>http://127.0.0.1:5000/Cats</code></li>
|
|
|
<li><code>http://127.0.0.1:5000/profile</code></li>
|
|
|
</ul></li>
|
|
|
<li><p><code>sayHi</code>, <code>Cats</code>, <code>/</code>, and <code>profile</code> are <strong>endpoints</strong> from our main app.</p></li>
|
|
|
<li><p>We only need to add:</p>
|
|
|
<div class="sourceCode" id="cb14"><pre class="sourceCode python"><code class="sourceCode python"><a class="sourceLine" id="cb14-1" data-line-number="1"><span class="at">@app.route</span>(<span class="st">'/<endpoint>'</span>) <span class="co"># When someone goes here...</span></a>
|
|
|
<a class="sourceLine" id="cb14-2" data-line-number="2"><span class="kw">def</span> function_name(): <span class="co"># Do this.</span></a>
|
|
|
<a class="sourceLine" id="cb14-3" data-line-number="3"> <span class="cf">return</span> string</a></code></pre></div></li>
|
|
|
</ul>
|
|
|
<hr />
|
|
|
</section>
|
|
|
<section id="you-do-adding-a-route" class="level2">
|
|
|
<h2>You Do: Adding a Route</h2>
|
|
|
<ul>
|
|
|
<li>In <code>my_website.py</code>, add a new route to a <code>randnum</code> endpoint.</li>
|
|
|
<li>In the function for this endpoint, display a string that’s a random number.
|
|
|
<ul>
|
|
|
<li><em>Hint:</em> Remember the <code>random</code> module? You can use <code>randint(1, 100)</code>.</li>
|
|
|
<li><em>Hint:</em> You can turn an integer to a string with <code>str(number)</code>.</li>
|
|
|
</ul></li>
|
|
|
<li>Reload the page and go to your endpoint to try it out!</li>
|
|
|
</ul>
|
|
|
<aside class="notes">
|
|
|
<p><strong>Current Code Status</strong>:</p>
|
|
|
<div class="sourceCode" id="cb15"><pre class="sourceCode python"><code class="sourceCode python"><a class="sourceLine" id="cb15-1" data-line-number="1"><span class="im">from</span> flask <span class="im">import</span> Flask, render_template</a>
|
|
|
<a class="sourceLine" id="cb15-2" data-line-number="2"><span class="im">import</span> mySecrets <span class="co">## You can import any file!</span></a>
|
|
|
<a class="sourceLine" id="cb15-3" data-line-number="3"><span class="im">import</span> python_variables</a>
|
|
|
<a class="sourceLine" id="cb15-4" data-line-number="4"><span class="im">import</span> os <span class="co"># Note the new import — to be in the file system.</span></a>
|
|
|
<a class="sourceLine" id="cb15-5" data-line-number="5"><span class="im">import</span> random</a>
|
|
|
<a class="sourceLine" id="cb15-6" data-line-number="6"></a>
|
|
|
<a class="sourceLine" id="cb15-7" data-line-number="7">app <span class="op">=</span> Flask(<span class="va">__name__</span>)</a>
|
|
|
<a class="sourceLine" id="cb15-8" data-line-number="8"></a>
|
|
|
<a class="sourceLine" id="cb15-9" data-line-number="9"><span class="co">## Call it like a module.</span></a>
|
|
|
<a class="sourceLine" id="cb15-10" data-line-number="10">my_name <span class="op">=</span> mySecrets.username</a>
|
|
|
<a class="sourceLine" id="cb15-11" data-line-number="11">my_password <span class="op">=</span> mySecrets.password</a>
|
|
|
<a class="sourceLine" id="cb15-12" data-line-number="12"></a>
|
|
|
<a class="sourceLine" id="cb15-13" data-line-number="13">student_name <span class="op">=</span> python_variables.student_name</a>
|
|
|
<a class="sourceLine" id="cb15-14" data-line-number="14"></a>
|
|
|
<a class="sourceLine" id="cb15-15" data-line-number="15">file_path <span class="op">=</span> <span class="st">'.'</span></a>
|
|
|
<a class="sourceLine" id="cb15-16" data-line-number="16"></a>
|
|
|
<a class="sourceLine" id="cb15-17" data-line-number="17"><span class="cf">with</span> <span class="bu">open</span>(os.path.join(file_path, <span class="st">'more_variables.txt'</span>)) <span class="im">as</span> f:</a>
|
|
|
<a class="sourceLine" id="cb15-18" data-line-number="18"> the_text <span class="op">=</span> f.read()</a>
|
|
|
<a class="sourceLine" id="cb15-19" data-line-number="19"></a>
|
|
|
<a class="sourceLine" id="cb15-20" data-line-number="20"><span class="at">@app.route</span>(<span class="st">'/text'</span>)</a>
|
|
|
<a class="sourceLine" id="cb15-21" data-line-number="21"><span class="kw">def</span> read_txt():</a>
|
|
|
<a class="sourceLine" id="cb15-22" data-line-number="22"> <span class="cf">return</span> the_text</a>
|
|
|
<a class="sourceLine" id="cb15-23" data-line-number="23"></a>
|
|
|
<a class="sourceLine" id="cb15-24" data-line-number="24"><span class="at">@app.route</span>(<span class="st">'/'</span>) <span class="co"># When someone goes here...</span></a>
|
|
|
<a class="sourceLine" id="cb15-25" data-line-number="25"><span class="kw">def</span> home(): <span class="co"># Do this.</span></a>
|
|
|
<a class="sourceLine" id="cb15-26" data-line-number="26"> <span class="cf">return</span> render_template(<span class="st">"index.html"</span>)</a>
|
|
|
<a class="sourceLine" id="cb15-27" data-line-number="27"></a>
|
|
|
<a class="sourceLine" id="cb15-28" data-line-number="28"><span class="at">@app.route</span>(<span class="st">'/sayHi'</span>) <span class="co"># When someone goes here...</span></a>
|
|
|
<a class="sourceLine" id="cb15-29" data-line-number="29"><span class="kw">def</span> hello(): <span class="co"># Do this.</span></a>
|
|
|
<a class="sourceLine" id="cb15-30" data-line-number="30"> <span class="cf">return</span> <span class="st">"Hello, Mr. Fieri."</span></a>
|
|
|
<a class="sourceLine" id="cb15-31" data-line-number="31"></a>
|
|
|
<a class="sourceLine" id="cb15-32" data-line-number="32"><span class="at">@app.route</span>(<span class="st">'/randnum'</span>)</a>
|
|
|
<a class="sourceLine" id="cb15-33" data-line-number="33"><span class="kw">def</span> randnum():</a>
|
|
|
<a class="sourceLine" id="cb15-34" data-line-number="34"> <span class="cf">return</span> <span class="bu">str</span>(random.randint(<span class="dv">1</span>, <span class="dv">100</span>))</a>
|
|
|
<a class="sourceLine" id="cb15-35" data-line-number="35"></a>
|
|
|
<a class="sourceLine" id="cb15-36" data-line-number="36"><span class="cf">if</span> <span class="va">__name__</span> <span class="op">==</span> <span class="st">'__main__'</span>:</a>
|
|
|
<a class="sourceLine" id="cb15-37" data-line-number="37"> app.run(debug<span class="op">=</span><span class="va">True</span>)</a>
|
|
|
<a class="sourceLine" id="cb15-38" data-line-number="38"></a></code></pre></div>
|
|
|
<hr />
|
|
|
</section>
|
|
|
<section id="variables-in-the-route" class="level2">
|
|
|
<h2>Variables in the Route</h2>
|
|
|
<aside class="notes">
|
|
|
<p><strong>Talking Points:</strong></p>
|
|
|
<ul>
|
|
|
<li>OK, so I said these are two separate concepts, but that’s only halfway true.</li>
|
|
|
<li>We can actually assign values in the URL to into variables in our Flask app.</li>
|
|
|
<li>Why would we do this? Because we can change the URL to reflect what sort of data we wish to see.</li>
|
|
|
<li>In the code snippet you see here: We are assigning the name variable to a value, which we insert into our function and then return to the user, in the middle of a sentence.</li>
|
|
|
</ul>
|
|
|
</aside>
|
|
|
<ul>
|
|
|
<li>You can pass a variable in the route itself.</li>
|
|
|
<li>It’s a dynamic endpoint!</li>
|
|
|
<li>You can use that variable in your function.</li>
|
|
|
</ul>
|
|
|
<div class="sourceCode" id="cb16"><pre class="sourceCode python"><code class="sourceCode python"><a class="sourceLine" id="cb16-1" data-line-number="1"><span class="at">@app.route</span>(<span class="st">'/sayHi/<name>'</span>)</a>
|
|
|
<a class="sourceLine" id="cb16-2" data-line-number="2"><span class="kw">def</span> hello(name):</a>
|
|
|
<a class="sourceLine" id="cb16-3" data-line-number="3"> <span class="cf">return</span> <span class="st">"Hello, "</span> <span class="op">+</span> name <span class="op">+</span> <span class="st">", your coding skills impress me!"</span></a></code></pre></div>
|
|
|
<p><code>http://localhost:5000/sayHi/Hari</code> <code>=> Hello, Hari, your coding skills impress me!"</code></p>
|
|
|
<aside class="notes">
|
|
|
<p><strong>Current Code Status</strong>:</p>
|
|
|
<div class="sourceCode" id="cb17"><pre class="sourceCode python"><code class="sourceCode python"><a class="sourceLine" id="cb17-1" data-line-number="1"><span class="im">from</span> flask <span class="im">import</span> Flask, render_template</a>
|
|
|
<a class="sourceLine" id="cb17-2" data-line-number="2"><span class="im">import</span> mySecrets <span class="co">## You can import any file!</span></a>
|
|
|
<a class="sourceLine" id="cb17-3" data-line-number="3"><span class="im">import</span> python_variables</a>
|
|
|
<a class="sourceLine" id="cb17-4" data-line-number="4"><span class="im">import</span> os <span class="co"># Note the new import — to be in the file system.</span></a>
|
|
|
<a class="sourceLine" id="cb17-5" data-line-number="5"><span class="im">import</span> random</a>
|
|
|
<a class="sourceLine" id="cb17-6" data-line-number="6"></a>
|
|
|
<a class="sourceLine" id="cb17-7" data-line-number="7">app <span class="op">=</span> Flask(<span class="va">__name__</span>)</a>
|
|
|
<a class="sourceLine" id="cb17-8" data-line-number="8"></a>
|
|
|
<a class="sourceLine" id="cb17-9" data-line-number="9"><span class="co">## Call it like a module.</span></a>
|
|
|
<a class="sourceLine" id="cb17-10" data-line-number="10">my_name <span class="op">=</span> mySecrets.username</a>
|
|
|
<a class="sourceLine" id="cb17-11" data-line-number="11">my_password <span class="op">=</span> mySecrets.password</a>
|
|
|
<a class="sourceLine" id="cb17-12" data-line-number="12"></a>
|
|
|
<a class="sourceLine" id="cb17-13" data-line-number="13">student_name <span class="op">=</span> python_variables.student_name</a>
|
|
|
<a class="sourceLine" id="cb17-14" data-line-number="14"></a>
|
|
|
<a class="sourceLine" id="cb17-15" data-line-number="15">file_path <span class="op">=</span> <span class="st">'.'</span></a>
|
|
|
<a class="sourceLine" id="cb17-16" data-line-number="16"></a>
|
|
|
<a class="sourceLine" id="cb17-17" data-line-number="17"><span class="cf">with</span> <span class="bu">open</span>(os.path.join(file_path, <span class="st">'more_variables.txt'</span>)) <span class="im">as</span> f:</a>
|
|
|
<a class="sourceLine" id="cb17-18" data-line-number="18"> the_text <span class="op">=</span> f.read()</a>
|
|
|
<a class="sourceLine" id="cb17-19" data-line-number="19"></a>
|
|
|
<a class="sourceLine" id="cb17-20" data-line-number="20"><span class="at">@app.route</span>(<span class="st">'/text'</span>)</a>
|
|
|
<a class="sourceLine" id="cb17-21" data-line-number="21"><span class="kw">def</span> read_txt():</a>
|
|
|
<a class="sourceLine" id="cb17-22" data-line-number="22"> <span class="cf">return</span> the_text</a>
|
|
|
<a class="sourceLine" id="cb17-23" data-line-number="23"></a>
|
|
|
<a class="sourceLine" id="cb17-24" data-line-number="24"><span class="at">@app.route</span>(<span class="st">'/'</span>) <span class="co"># When someone goes here...</span></a>
|
|
|
<a class="sourceLine" id="cb17-25" data-line-number="25"><span class="kw">def</span> home(): <span class="co"># Do this.</span></a>
|
|
|
<a class="sourceLine" id="cb17-26" data-line-number="26"> <span class="cf">return</span> render_template(<span class="st">"index.html"</span>)</a>
|
|
|
<a class="sourceLine" id="cb17-27" data-line-number="27"></a>
|
|
|
<a class="sourceLine" id="cb17-28" data-line-number="28"><span class="at">@app.route</span>(<span class="st">'/sayHi/<name>'</span>)</a>
|
|
|
<a class="sourceLine" id="cb17-29" data-line-number="29"><span class="kw">def</span> hello(name):</a>
|
|
|
<a class="sourceLine" id="cb17-30" data-line-number="30"> <span class="cf">return</span> <span class="st">"Hello, "</span> <span class="op">+</span> name <span class="op">+</span> <span class="st">", your coding skills impress me!"</span></a>
|
|
|
<a class="sourceLine" id="cb17-31" data-line-number="31"></a>
|
|
|
<a class="sourceLine" id="cb17-32" data-line-number="32"><span class="at">@app.route</span>(<span class="st">'/randnum'</span>)</a>
|
|
|
<a class="sourceLine" id="cb17-33" data-line-number="33"><span class="kw">def</span> randnum():</a>
|
|
|
<a class="sourceLine" id="cb17-34" data-line-number="34"> <span class="cf">return</span> <span class="bu">str</span>(random.randint(<span class="dv">1</span>, <span class="dv">100</span>))</a>
|
|
|
<a class="sourceLine" id="cb17-35" data-line-number="35"></a>
|
|
|
<a class="sourceLine" id="cb17-36" data-line-number="36"><span class="cf">if</span> <span class="va">__name__</span> <span class="op">==</span> <span class="st">'__main__'</span>:</a>
|
|
|
<a class="sourceLine" id="cb17-37" data-line-number="37"> app.run(debug<span class="op">=</span><span class="va">True</span>)</a></code></pre></div>
|
|
|
<hr />
|
|
|
</section>
|
|
|
<section id="your-turn" class="level2">
|
|
|
<h2>Your Turn!</h2>
|
|
|
<p>Try adding route in your Flask app to have:</p>
|
|
|
<ul>
|
|
|
<li>A <code>/timesfour/<number></code> route that displays the product of an integer in the route multiplied by four.</li>
|
|
|
<li>A <code>repeat</code> route that takes a string passed into the URL, then displays it four times in a row.</li>
|
|
|
</ul>
|
|
|
<hr />
|
|
|
</section>
|
|
|
<section id="final-code-status" class="level2">
|
|
|
<h2>Final Code Status</h2>
|
|
|
<p>Your code should look similar to this:</p>
|
|
|
<div class="sourceCode" id="cb18"><pre class="sourceCode python"><code class="sourceCode python"><a class="sourceLine" id="cb18-1" data-line-number="1"><span class="im">from</span> flask <span class="im">import</span> Flask, render_template</a>
|
|
|
<a class="sourceLine" id="cb18-2" data-line-number="2"><span class="im">import</span> mySecrets <span class="co">## You can import any file!</span></a>
|
|
|
<a class="sourceLine" id="cb18-3" data-line-number="3"><span class="im">import</span> python_variables</a>
|
|
|
<a class="sourceLine" id="cb18-4" data-line-number="4"><span class="im">import</span> os <span class="co"># Note the new import — to be in the file system.</span></a>
|
|
|
<a class="sourceLine" id="cb18-5" data-line-number="5"><span class="im">import</span> random</a>
|
|
|
<a class="sourceLine" id="cb18-6" data-line-number="6"></a>
|
|
|
<a class="sourceLine" id="cb18-7" data-line-number="7">app <span class="op">=</span> Flask(<span class="va">__name__</span>)</a>
|
|
|
<a class="sourceLine" id="cb18-8" data-line-number="8"></a>
|
|
|
<a class="sourceLine" id="cb18-9" data-line-number="9"><span class="co">## Call it like a module.</span></a>
|
|
|
<a class="sourceLine" id="cb18-10" data-line-number="10">my_name <span class="op">=</span> mySecrets.username</a>
|
|
|
<a class="sourceLine" id="cb18-11" data-line-number="11">my_password <span class="op">=</span> mySecrets.password</a>
|
|
|
<a class="sourceLine" id="cb18-12" data-line-number="12"></a>
|
|
|
<a class="sourceLine" id="cb18-13" data-line-number="13">student_name <span class="op">=</span> python_variables.student_name</a>
|
|
|
<a class="sourceLine" id="cb18-14" data-line-number="14"></a>
|
|
|
<a class="sourceLine" id="cb18-15" data-line-number="15">file_path <span class="op">=</span> <span class="st">'.'</span></a>
|
|
|
<a class="sourceLine" id="cb18-16" data-line-number="16"></a>
|
|
|
<a class="sourceLine" id="cb18-17" data-line-number="17"><span class="cf">with</span> <span class="bu">open</span>(os.path.join(file_path, <span class="st">'more_variables.txt'</span>)) <span class="im">as</span> f:</a>
|
|
|
<a class="sourceLine" id="cb18-18" data-line-number="18"> the_text <span class="op">=</span> f.read()</a>
|
|
|
<a class="sourceLine" id="cb18-19" data-line-number="19"></a>
|
|
|
<a class="sourceLine" id="cb18-20" data-line-number="20"><span class="at">@app.route</span>(<span class="st">'/text'</span>)</a>
|
|
|
<a class="sourceLine" id="cb18-21" data-line-number="21"><span class="kw">def</span> read_txt():</a>
|
|
|
<a class="sourceLine" id="cb18-22" data-line-number="22"> <span class="cf">return</span> the_text</a>
|
|
|
<a class="sourceLine" id="cb18-23" data-line-number="23"></a>
|
|
|
<a class="sourceLine" id="cb18-24" data-line-number="24"><span class="at">@app.route</span>(<span class="st">'/'</span>) <span class="co"># When someone goes here...</span></a>
|
|
|
<a class="sourceLine" id="cb18-25" data-line-number="25"><span class="kw">def</span> home(): <span class="co"># Do this.</span></a>
|
|
|
<a class="sourceLine" id="cb18-26" data-line-number="26"> <span class="cf">return</span> render_template(<span class="st">"index.html"</span>)</a>
|
|
|
<a class="sourceLine" id="cb18-27" data-line-number="27"></a>
|
|
|
<a class="sourceLine" id="cb18-28" data-line-number="28"><span class="at">@app.route</span>(<span class="st">'/sayHi/<name>'</span>)</a>
|
|
|
<a class="sourceLine" id="cb18-29" data-line-number="29"><span class="kw">def</span> hello(name):</a>
|
|
|
<a class="sourceLine" id="cb18-30" data-line-number="30"> <span class="cf">return</span> <span class="st">"Hello, "</span> <span class="op">+</span> name <span class="op">+</span> <span class="st">", your coding skills impress me!"</span></a>
|
|
|
<a class="sourceLine" id="cb18-31" data-line-number="31"></a>
|
|
|
<a class="sourceLine" id="cb18-32" data-line-number="32"><span class="at">@app.route</span>(<span class="st">'/timesfour/<number>'</span>)</a>
|
|
|
<a class="sourceLine" id="cb18-33" data-line-number="33"><span class="kw">def</span> timesfour(number):</a>
|
|
|
<a class="sourceLine" id="cb18-34" data-line-number="34"> <span class="cf">return</span> <span class="bu">str</span>(<span class="bu">int</span>(number) <span class="op">*</span> <span class="dv">4</span>)</a>
|
|
|
<a class="sourceLine" id="cb18-35" data-line-number="35"></a>
|
|
|
<a class="sourceLine" id="cb18-36" data-line-number="36"><span class="at">@app.route</span>(<span class="st">'/repeat/<number>'</span>)</a>
|
|
|
<a class="sourceLine" id="cb18-37" data-line-number="37"><span class="kw">def</span> repeat(number):</a>
|
|
|
<a class="sourceLine" id="cb18-38" data-line-number="38"> <span class="cf">return</span> number <span class="op">*</span> <span class="dv">4</span></a>
|
|
|
<a class="sourceLine" id="cb18-39" data-line-number="39"></a>
|
|
|
<a class="sourceLine" id="cb18-40" data-line-number="40"><span class="cf">if</span> <span class="va">__name__</span> <span class="op">==</span> <span class="st">'__main__'</span>:</a>
|
|
|
<a class="sourceLine" id="cb18-41" data-line-number="41"> app.run(debug<span class="op">=</span><span class="va">True</span>)</a></code></pre></div>
|
|
|
<hr />
|
|
|
</section>
|
|
|
<section id="summary" class="level2">
|
|
|
<h2>Summary</h2>
|
|
|
<p>We covered variables and routing in Flask:</p>
|
|
|
<ul>
|
|
|
<li>Variables can be made:
|
|
|
<ul>
|
|
|
<li>In the Flask app: Used like normal variables.</li>
|
|
|
<li>In a Python file: Imported like a module.</li>
|
|
|
<li>In another file: Used <code>file</code> to read it.</li>
|
|
|
</ul></li>
|
|
|
<li>Routing:
|
|
|
<ul>
|
|
|
<li><code>@app.route(<endpoint>)</code> is how we make new pages in our app!</li>
|
|
|
</ul></li>
|
|
|
</ul>
|
|
|
</section>
|
|
|
|
|
|
</div>
|
|
|
<footer><span class='slide-number'></span></footer>
|
|
|
</div>
|
|
|
<script src="../../../../lib/js/head.min.js"></script>
|
|
|
<script src="../../../../js/reveal.js"></script>
|
|
|
|
|
|
<script>
|
|
|
|
|
|
var dependencies = [
|
|
|
{ src: '../../../../lib/js/classList.js', condition: function() { return !document.body.classList; } },
|
|
|
{ src: '../../../../plugin/markdown/showdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
|
|
|
{ src: '../../../../plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
|
|
|
{ src: '../../../../plugin/prism/prism.js', async: true, callback: function() { /*hljs.initHighlightingOnLoad();*/ } },
|
|
|
{ src: '../../../../plugin/zoom-js/zoom.js', async: true, condition: function() { return !!document.body.classList; } }
|
|
|
];
|
|
|
|
|
|
if (Reveal.getQueryHash().instructor === 1) {
|
|
|
dependencies.push({ src: '../../../../plugin/notes/notes.js', async: true, condition: function() { return !!document.body.classList; } });
|
|
|
}
|
|
|
// Full list of configuration options available here:
|
|
|
// https://github.com/hakimel/reveal.js#configuration
|
|
|
Reveal.initialize({
|
|
|
controls: true,
|
|
|
progress: true,
|
|
|
history: true,
|
|
|
center: false,
|
|
|
slideNumber: true,
|
|
|
|
|
|
// available themes are in /css/theme
|
|
|
theme: Reveal.getQueryHash().theme || 'default',
|
|
|
|
|
|
// default/cube/page/concave/zoom/linear/fade/none
|
|
|
transition: Reveal.getQueryHash().transition || 'slide',
|
|
|
|
|
|
// Optional libraries used to extend on reveal.js
|
|
|
dependencies: dependencies
|
|
|
});
|
|
|
|
|
|
if (Reveal.getQueryHash().instructor === 1) {
|
|
|
Reveal.configure(dependencies.push({ src: '../../../../plugin/notes/notes.js', async: true, condition: function() { return !!document.body.classList; } }));
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
Reveal.addEventListener('ready', function() {
|
|
|
if (Reveal.getCurrentSlide().classList.contains('separator-subhead')) {
|
|
|
document.getElementById('theme').setAttribute('href', '../../../../css/theme/ga-subhead.css');
|
|
|
} else if (Reveal.getCurrentSlide().classList.contains('separator')) {
|
|
|
document.getElementById('theme').setAttribute('href', '../../../../css/theme/ga-title.css')
|
|
|
} else {
|
|
|
document.getElementById('theme').setAttribute('href', '../../../../css/theme/ga.css');
|
|
|
}
|
|
|
});
|
|
|
|
|
|
Reveal.addEventListener('slidechanged', function(e) {
|
|
|
if (Reveal.getCurrentSlide().classList.contains('separator-subhead')) {
|
|
|
document.getElementById('theme').setAttribute('href', '../../../../css/theme/ga-subhead.css');
|
|
|
} else if (Reveal.getCurrentSlide().classList.contains('separator')) {
|
|
|
document.getElementById('theme').setAttribute('href', '../../../../css/theme/ga-title.css')
|
|
|
} else {
|
|
|
document.getElementById('theme').setAttribute('href', '../../../../css/theme/ga.css');
|
|
|
}
|
|
|
});
|
|
|
</script>
|
|
|
|
|
|
</body>
|
|
|
</html>
|
