Weather API With Python and Flask Part 2

4 min readSep 14, 2020

Now that we have a basic Flask app set up, we can begin to start building html templates that will be rendered in the browser. First before we begin, we need a specific directory set up for this to work correctly. Flask expects to find a directory in the same directory that the app.py file is in called templates. So we need a path that looks like this

/projectfolder/templates/index.html

Now within this directory, we can create the index.html file. Now we could build a separate html page that looks like this for every page:

<!DOCTYPE html>
<html>
  <head>
    <title>Weather</title>    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  </head>
  <body>
  </body>
</html>

But that would have a lot of code that is repeated on each page. Instead of rewriting each page over and over again it would be much easier if we were able to just make a base template that has all of the code that is the same on every page and just add in the unique code for each page. Luckily Jinja2 provides us with a way to do this. So in addition to the index.html file we are also going to create an base.html file as well in the same directory. Let’s start with our base.html.

<!DOCTYPE html>
<html>
  <head>
    <title>Weather</title>    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="stylesheet" href="https://bootswatch.com/4/minty/bootstrap.min.css">
    <link rel="stylesheet" href="/../static/main.css">
  </head>
  <body>
    {% block content %}
    {% endblock content %}
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>-->
  </body>
</html>

This is pretty much just a normal html file. In the head tags we give the website a title, give it a few meta tags and link a couple different stylesheets that we are going to use in a second. In the body tag you will see a few javascript script tags to get some libraries that are apart of bootstrap but you will notice something that you usually won’t see in just pure html above that. {% block content%} {% endblock content %} This is a jinja2 tag that will create a content block. Within this content block we can put whatever html that we will want for each individual page. This just tells jinja2 where to insert the unique code at.

Now that we have our base.html set up we can set up our index.html.

{% extends 'base.html' %}
{% block content %}
<div class="main" style="background-color: #f5f5f5; height: 100vh;">
    <div class="container h-100">
        <div class="row justify-content-center">
            <div class="col-md-6 col-sm-12 col-6-12 pt-5">
                <form method="POST" class="card border-0 p-3 shadow-sm">
                    <div class="form-group">
                        <input type="text" class="form-control" name="city" placeholder="Indianapolis">
                    </div>                    <div class="form-group">
                        <input type="text" class="form-control" name="country" placeholder="US">
                    </div>                    <div class="form-group">
                        <button class="btn btn-info btn-block">Get Weather&lt;/button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
{% endblock content %}

First we write a line that tells jinja2 that we want to use base.html as the base template. After that we need to open up the content block that we created in our base template. In this example we called it content so we write the same line we wrote in our base template {% block content %}. After this we can start building our html. This project just consists of a simple html form. We use bootstrap a lot to build this. If you don’t know bootstrap or how it works you can go view their documentation to get an understanding about how the grid system works and how their style classes work. Very important pieces to note in this html is that we need to make sure we have the form method set as “POST”, we will check for a post request on the Flask side next. Its also important to give each form element a name. We will use this name to pull out the data submitted for each input. Other than that it is just basic html to set up a form with some bootstrap classes. It is very important to close the content block once you finish the html. {% endblock content %}

We are now ready to build the functionality with python and use these templates to display the data. That will be part of the third and final installment of this series.

Weather API With Python and Flask Part 2

Written by LegionScript

No responses yet