+- Sick Gaming (https://www.sickgaming.net)
+-- Forum: Programming (https://www.sickgaming.net/forum-76.html)
+--- Forum: Python (https://www.sickgaming.net/forum-83.html)
+--- Thread: [Tut] Ten Easy Steps to Your First Python Flask App (/thread-99584.html)
[Tut] Ten Easy Steps to Your First Python Flask App - xSicKxBot - 06-17-2022
Ten Easy Steps to Your First Python Flask App
<div><div class="kk-star-ratings kksr-valign-top kksr-align-left " data-payload="{"align":"left","id":"420533","slug":"default","valign":"top","reference":"auto","count":"0","readonly":"","score":"0","best":"5","gap":"5","greet":"Rate this post","legend":"0\/5 - (0 votes)","size":"24","width":"0","_legend":"{score}\/{best} - ({count} {votes})"}">
<div class="kksr-stars">
<div class="kksr-stars-inactive">
<div class="kksr-star" data-star="1" style="padding-right: 5px">
<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
</p></div>
<div class="kksr-star" data-star="2" style="padding-right: 5px">
<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
</p></div>
<div class="kksr-star" data-star="3" style="padding-right: 5px">
<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
</p></div>
<div class="kksr-star" data-star="4" style="padding-right: 5px">
<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
</p></div>
<div class="kksr-star" data-star="5" style="padding-right: 5px">
<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
</p></div>
</p></div>
<div class="kksr-stars-active" style="width: 0px;">
<div class="kksr-star" style="padding-right: 5px">
<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
</p></div>
<div class="kksr-star" style="padding-right: 5px">
<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
</p></div>
<div class="kksr-star" style="padding-right: 5px">
<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
</p></div>
<div class="kksr-star" style="padding-right: 5px">
<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
</p></div>
<div class="kksr-star" style="padding-right: 5px">
<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
</p></div>
</p></div>
</div>
<div class="kksr-legend"> <span class="kksr-muted">Rate this post</span> </div>
</div>
<h2>Project Description</h2>
<p><strong>Story</strong>: Assume you work in the IT Department of Right-On Realtors. </p>
<p>Your boss asks you to create a simple website the Realtors can query to view current Home Sales.</p>
<p>He would like this website created using the <a rel="noreferrer noopener" href="https://flask-plugins.readthedocs.io/en/master/" target="_blank">Flask</a> framework in Python.</p>
<p>In this article, we’ll create a simple website app to query real estate stats from a CSV on the server that looks like this:</p>
<div class="wp-block-image">
<figure class="aligncenter size-full"><img loading="lazy" width="768" height="383" src="https://blog.finxter.com/wp-content/uploads/2022/06/image-113.png" alt="" class="wp-image-420560" srcset="https://blog.finxter.com/wp-content/uploads/2022/06/image-113.png 768w, https://blog.finxter.com/wp-content/uploads/2022/06/image-113-300x150.png 300w" sizes="(max-width: 768px) 100vw, 768px" /></figure>
</div>
<h2>What is Flask?</h2>
<p><a rel="noreferrer noopener" href="https://flask-plugins.readthedocs.io/en/master/" target="_blank">Flask</a> is a web app framework created with ease of use in mind. Without much training, you can easily create a simple web application. <a rel="noreferrer noopener" href="https://flask-plugins.readthedocs.io/en/master/" target="_blank">Flask</a> works with <a rel="noreferrer noopener" href="https://getbootstrap.com/" target="_blank">Bootstrap</a>, <a rel="noreferrer noopener" href="https://www.w3schools.com/html/" target="_blank">HTML</a>, <a rel="noreferrer noopener" href="https://www.w3schools.com/css/default.asp" target="_blank">CSS</a>, and <a rel="noreferrer noopener" href="https://jinja.palletsprojects.com/en/3.0.x/" target="_blank">Jinja </a>(to name a few) to create a website.</p>
<h2>Step 1: Set Up a Virtual Environment</h2>
<p>All your projects share the same globally installed libraries. But some of them may require different versions or incompatible libraries. </p>
<p>This is where virtual environments come into play. </p>
<p><strong>A virtual environment serves as a “sandbox” for your Python program. </strong>You can install any external library or version there without having any global impact. </p>
<p>The <strong>virtual environments are isolated, independent, and separate.</strong></p>
<p class="has-base-background-color has-background">Click <a rel="noreferrer noopener" href="https://blog.finxter.com/python-virtual-environments-with-venv-a-step-by-step-guide/" target="_blank">here</a> for instructions on setting up and activating a virtual environment.</p>
<h2>Step 2: Install Libraries</h2>
<p>Before our code executes successfully, two (2) new libraries will require installation.</p>
<ul>
<li>The <a rel="noreferrer noopener" href="https://blog.finxter.com/pandas-quickstart/" target="_blank"><em>Pandas</em></a> library enables access to/from a <em>DataFrame</em>.</li>
<li>The <em><a rel="noreferrer noopener" href="https://blog.finxter.com/pandas-quickstart/" target="_blank"></a><a rel="noreferrer noopener" href="https://flask-plugins.readthedocs.io/en/master/" target="_blank">Flask</a> </em>library allows us to create and render our website.</li>
</ul>
<p>To install these libraries, navigate to an <a rel="noreferrer noopener" href="https://blog.finxter.com/best-python-ide/" target="_blank">IDE</a> terminal. At the command prompt (<code>$</code>), execute the code below. For the terminal used in this example, the command prompt is a dollar sign (<code>$</code>). Your terminal prompt may be different.</p>
<pre class="EnlighterJSRAW" data-enlighter-language="generic" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">$ pip install pandas</pre>
<p>Hit the <code><Enter></code> key on the keyboard to start the installation process.</p>
<pre class="EnlighterJSRAW" data-enlighter-language="generic" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">$ pip install flask</pre>
<p>Hit the <code><Enter></code> key on the keyboard to start the installation process.</p>
<h2>Step 3: Set up the Folder Structure</h2>
<p>We want to have the following folder structure.</p>
<div class="wp-block-image">
<figure class="aligncenter size-full"><img loading="lazy" width="359" height="185" src="https://blog.finxter.com/wp-content/uploads/2022/06/image-108.png" alt="" class="wp-image-420535" srcset="https://blog.finxter.com/wp-content/uploads/2022/06/image-108.png 359w, https://blog.finxter.com/wp-content/uploads/2022/06/image-108-300x155.png 300w" sizes="(max-width: 359px) 100vw, 359px" /></figure>
</div>
<p>Then set up the <code>app.py</code> file that is responsible for most of the Flask action and create a basic template file from which all of the HTML files served by your app will inherit.</p>
<p>Follow our in-depth guide on how to set this up here:</p>
<p class="has-base-background-color has-background"><img src="https://s.w.org/images/core/emoji/14.0.0/72x72/1f30d.png" alt="?" class="wp-smiley" style="height: 1em; max-height: 1em;" /> <strong><a rel="noreferrer noopener" href="https://blog.finxter.com/build-website-with-flask-part-1/" data-type="URL" data-id="https://blog.finxter.com/build-website-with-flask-part-1/" target="_blank">Tutorial</a></strong>: Learn more about how to accomplish this step.</p>
</p>
<h2>Step 4: Routes and Dynamic Content</h2>
<p>First, add routes to your web project, so people can navigate to different parts of your website. You can do this by replacing the <code>app.py</code> file with the following code:</p>
<pre class="EnlighterJSRAW" data-enlighter-language="generic" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">app = Flask(__name__) @app.route('/') # home
def index(): return render_template("index.html") @app.route('/reports') # reports
def reports(): return render_template("reports.html") @app.route('/contact') # contact
def contact(): return render_template("contact.html")</pre>
<p>Second, you create blank HTML files that inherit from the base template and that should be returned after calling each of those URLs <code>'https://yourwebsite.com/'</code>, <code>'https://yourwebsite.com/reports'</code>, and <code>'https://yourwebsite.com/contact'</code>.</p>
<p>Third, add <a rel="noreferrer noopener" href="https://jinja.palletsprojects.com/en/3.0.x/" target="_blank">Jinja</a> to the base template file so that you can add some dynamically created content to your website—it shouldn’t return the same content for all users after all!</p>
<p class="has-base-background-color has-background"><img src="https://s.w.org/images/core/emoji/14.0.0/72x72/1f30d.png" alt="?" class="wp-smiley" style="height: 1em; max-height: 1em;" /> <strong><a href="https://blog.finxter.com/build-website-with-flask-part-2/" data-type="URL" data-id="https://blog.finxter.com/build-website-with-flask-part-2/" target="_blank" rel="noreferrer noopener">Tutorial</a></strong>: Learn more about how to accomplish this step.</p>
<h2>Step 5: Styling, Navigation, and Running the App Locally</h2>
<p><a rel="noreferrer noopener" href="https://getbootstrap.com/" target="_blank">Bootstrap</a> is a popular framework that contains numerous HTML, API, and JS code snippets. These snippets assist web designers/developers everywhere create a responsive website.</p>
<p>Add Bootstrap to your project and create a navigation bar using the provided styling options.</p>
<p>Next, you can run your app with a simple command in your shell and view it in your browser:</p>
<div class="wp-block-image">
<figure class="aligncenter size-full is-resized"><img loading="lazy" src="https://blog.finxter.com/wp-content/uploads/2022/06/image-110.png" alt="" class="wp-image-420551" width="665" height="64" srcset="https://blog.finxter.com/wp-content/uploads/2022/06/image-110.png 665w, https://blog.finxter.com/wp-content/uploads/2022/06/image-110-300x29.png 300w" sizes="(max-width: 665px) 100vw, 665px" /></figure>
</div>
<div class="wp-block-image">
<figure class="aligncenter size-full"><img loading="lazy" width="737" height="159" src="https://blog.finxter.com/wp-content/uploads/2022/06/image-109.png" alt="" class="wp-image-420549" srcset="https://blog.finxter.com/wp-content/uploads/2022/06/image-109.png 737w, https://blog.finxter.com/wp-content/uploads/2022/06/image-109-300x65.png 300w" sizes="(max-width: 737px) 100vw, 737px" /></figure>
</div>
<p class="has-base-background-color has-background"><img src="https://s.w.org/images/core/emoji/14.0.0/72x72/1f30d.png" alt="?" class="wp-smiley" style="height: 1em; max-height: 1em;" /> <strong><a href="https://blog.finxter.com/build-website-with-flask-part-3/" data-type="URL" data-id="https://blog.finxter.com/build-website-with-flask-part-3/" target="_blank" rel="noreferrer noopener">Tutorial</a></strong>: Learn more about how to accomplish this step.</p>
<h2>Step 6: Forms for User Input and Output</h2>
<p>Add a Form with elements to an HTML page. Then add <a rel="noreferrer noopener" href="https://jinja.palletsprojects.com/en/3.0.x/" target="_blank">Jinja</a> to the Reports page and update the code in app.py to get the HTML Form working.</p>
<p>Your project will look like this at this point:</p>
<div class="wp-block-image">
<figure class="aligncenter size-full"><img loading="lazy" width="768" height="176" src="https://blog.finxter.com/wp-content/uploads/2022/06/image-111.png" alt="" class="wp-image-420555" srcset="https://blog.finxter.com/wp-content/uploads/2022/06/image-111.png 768w, https://blog.finxter.com/wp-content/uploads/2022/06/image-111-300x69.png 300w" sizes="(max-width: 768px) 100vw, 768px" /></figure>
</div>
<p>Congratulations, users can now input numbers into the front-end and your Python code will process them on the back-end! </p>
<div class="wp-block-image">
<figure class="aligncenter size-full"><img loading="lazy" width="498" height="498" src="https://blog.finxter.com/wp-content/uploads/2022/06/DancingUnicornChubbicornGIF.gif" alt="" class="wp-image-420556"/></figure>
</div>
<p>To view any changes, Flask needs to be re-started. To perform this task, navigate to the command prompt and enter CTRL+C (stop), then flask run (re-start).</p>
<p class="has-base-background-color has-background"><img src="https://s.w.org/images/core/emoji/14.0.0/72x72/1f30d.png" alt="?" class="wp-smiley" style="height: 1em; max-height: 1em;" /> <strong><a href="https://blog.finxter.com/build-website-with-flask-part-4/" data-type="URL" data-id="https://blog.finxter.com/build-website-with-flask-part-4/" target="_blank" rel="noreferrer noopener">Tutorial</a></strong>: Learn more about how to accomplish this step.</p>
<h2>Step 7: Data Processing at the Back-End</h2>
<p>Next, read in the <strong><em>Real Estate CSV</em></strong> file to a DataFrame and allow users to query the results based on the entered Zip code and display the results on the Reports page.</p>
<p>It’ll look like so:</p>
<div class="wp-block-image">
<figure class="aligncenter size-full"><img loading="lazy" width="768" height="511" src="https://blog.finxter.com/wp-content/uploads/2022/06/image-112.png" alt="" class="wp-image-420558" srcset="https://blog.finxter.com/wp-content/uploads/2022/06/image-112.png 768w, https://blog.finxter.com/wp-content/uploads/2022/06/image-112-300x200.png 300w" sizes="(max-width: 768px) 100vw, 768px" /></figure>
</div>
<p class="has-base-background-color has-background"><img src="https://s.w.org/images/core/emoji/14.0.0/72x72/1f30d.png" alt="?" class="wp-smiley" style="height: 1em; max-height: 1em;" /> <strong><a href="https://blog.finxter.com/build-website-with-flask-part-5/" data-type="URL" data-id="https://blog.finxter.com/build-website-with-flask-part-5/" target="_blank" rel="noreferrer noopener">Tutorial</a></strong>: Learn more about how to accomplish this step.</p>
<h2>Step 8: Data Cleaning</h2>
<p>In this step, you write some Python code to validate the Zip Code to make sure the user input is correct. You’ll clean up the data and reformat the sales price of the real estate objects for clarity of presentation.</p>
<p class="has-base-background-color has-background"><img src="https://s.w.org/images/core/emoji/14.0.0/72x72/1f30d.png" alt="?" class="wp-smiley" style="height: 1em; max-height: 1em;" /> <strong><a href="https://blog.finxter.com/build-website-with-flask-part-6/" data-type="URL" data-id="https://blog.finxter.com/build-website-with-flask-part-6/" target="_blank" rel="noreferrer noopener">Tutorial</a></strong>: Learn more about how to accomplish this step.</p>
<h2>Step 9: Stylesheets</h2>
<p>Next, we’ll add a stylesheet, and add some specific styles to the navigation bar and the remaining HTML pages. Styling should come after the core functionality is implemented—which at this point is done! <img src="https://s.w.org/images/core/emoji/14.0.0/72x72/1f642.png" alt="?" class="wp-smiley" style="height: 1em; max-height: 1em;" /></p>
<p>After this step, the website will look much cleaner and prettier:</p>
<figure class="wp-block-image size-full"><img loading="lazy" width="768" height="383" src="https://blog.finxter.com/wp-content/uploads/2022/06/image-113.png" alt="" class="wp-image-420560" srcset="https://blog.finxter.com/wp-content/uploads/2022/06/image-113.png 768w, https://blog.finxter.com/wp-content/uploads/2022/06/image-113-300x150.png 300w" sizes="(max-width: 768px) 100vw, 768px" /></figure>
</p>
<p class="has-base-background-color has-background"><img src="https://s.w.org/images/core/emoji/14.0.0/72x72/1f30d.png" alt="?" class="wp-smiley" style="height: 1em; max-height: 1em;" /> <strong><a href="https://blog.finxter.com/build-website-with-flask-part-7/" data-type="URL" data-id="https://blog.finxter.com/build-website-with-flask-part-7/" target="_blank" rel="noreferrer noopener">Tutorial</a></strong>: Learn more about how to accomplish this step.</p>
<h2>Step 10: Contact Us and Email Automation</h2>
<p>The last step makes sure that users can contact you via the contact page. We’ll style it too using CSS and stylesheets and email the form values to you using the Flask functionality. </p>
<div class="wp-block-image">
<figure class="aligncenter size-full"><img loading="lazy" width="615" height="631" src="https://blog.finxter.com/wp-content/uploads/2022/06/image-114.png" alt="" class="wp-image-420562" srcset="https://blog.finxter.com/wp-content/uploads/2022/06/image-114.png 615w, https://blog.finxter.com/wp-content/uploads/2022/06/image-114-292x300.png 292w" sizes="(max-width: 615px) 100vw, 615px" /></figure>
</div>
<p class="has-base-background-color has-background"><img src="https://s.w.org/images/core/emoji/14.0.0/72x72/1f30d.png" alt="?" class="wp-smiley" style="height: 1em; max-height: 1em;" /> <strong><a href="https://blog.finxter.com/build-website-with-flask-part-8/" data-type="URL" data-id="https://blog.finxter.com/build-website-with-flask-part-8/" target="_blank" rel="noreferrer noopener">Tutorial</a></strong>: Learn more about how to accomplish this step.</p>
<h2>Summary</h2>
<p>This post has summarized the steps necessary to create a simple real estate related website with Flask. If you have followed the outlined steps and read the tutorials linked after each step, you should now have a running prototype website on your local computer.</p>
<p>You should also know the basics of how to create a dynamic and interactive website in Python, a skill that is sought-after by many companies today as a freelance or employed <a rel="noreferrer noopener" href="https://blog.finxter.com/full-stack-web-developer-income-and-opportunity/" data-type="post" data-id="326336" target="_blank">full-stack web developer</a>!</p>
<p><strong>Tutorials You Should Check Out Next</strong></p>
<ul>
<li><a rel="noreferrer noopener" href="https://blog.finxter.com/web-developer-income-and-opportunity/" data-type="post" data-id="314633" target="_blank">Web Developer – Income and Opportunity</a></li>
<li><a rel="noreferrer noopener" href="https://blog.finxter.com/flask-developer-income-and-opportunity/" data-type="post" data-id="251723" target="_blank">Flask Developer – Income and Opportunity</a></li>
<li><a href="https://blog.finxter.com/python-developer-income-and-opportunity/" data-type="post" data-id="189354">Python Developer – Income and Opportunity</a></li>
</ul>
<hr class="wp-block-separator has-alpha-channel-opacity"/>
<h2>Nerd Humor</h2>
<div class="wp-block-image">
<figure class="aligncenter size-full"><img loading="lazy" width="733" height="913" src="https://blog.finxter.com/wp-content/uploads/2022/06/image-72.png" alt="" class="wp-image-410345" srcset="https://blog.finxter.com/wp-content/uploads/2022/06/image-72.png 733w, https://blog.finxter.com/wp-content/uploads/2022/06/image-72-241x300.png 241w" sizes="(max-width: 733px) 100vw, 733px" /><figcaption><em>Oh yeah, I didn’t even know they renamed it the Willis Tower in 2009, because I know a normal amount about skyscrapers.</em> — <a rel="noreferrer noopener" href="https://imgs.xkcd.com/comics/or_whatever_2x.png" data-type="URL" data-id="https://imgs.xkcd.com/comics/or_whatever_2x.png" target="_blank">xkcd</a> (source)</figcaption></figure>
</div>
</div>
https://www.sickgaming.net/blog/2022/06/13/ten-easy-steps-to-your-first-python-flask-app/