Flask – HTML Template Layout – Prerequisite For Flask CRUD Series.

  • By -Danny B.
  • Posted on
  • Posted in Career

Overview

In this example, we will build a layout with a Navigation Bar. This example demonstrates how to build a simple layout for all of your HTML templates. By including bootstrap 4, your html templates will inherit all of the bootstrap styles and components without having to include the libraries in every file. Just include the layout.

Prerequisites

Install Flask.

pip install -U Flask

Template Folder

Create a folder labeled “./templates“.

Important: the folder must be in lower case labeled exactly as templates.

Layout Template

Under templates create a file labeled “./templates/layout.html“. In the form put the following HTML code inside.

“layout.html” includes the bootstrap style and JavaScript libraries. Your actual content will inside the {% block content %}{% endblock %}.

<!doctype html>
<title>{% block title %}{% endblock %} - Flask CRUD APP</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <a class="navbar-brand" href="#">FLASK CRUD APP</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarText">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">About</a>
      </li>
    </ul>
  </div>
</nav>
<section class="content">
  {% block content %}{% endblock %}
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" ></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
  
</section>

HTML Form

Now create another HTML file labeled “./templates/userForm.html “and put ht following HTML code inside.

{% extends 'layout.html' %}
{% block content %}
<div class="container">
  <div class="row">
    <div class="col-12">
      <table class="table mt-5">
        <thead>
          <tr>
            <th scope="col">#</th>
            <th scope="col">First</th>
            <th scope="col">Last</th>
            <th scope="col">Handle</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <th scope="row">1</th>
            <td>Mark</td>
            <td>Otto</td>
            <td>@mdo</td>
          </tr>
          <tr>
            <th scope="row">2</th>
            <td>Jacob</td>
            <td>Thornton</td>
            <td>@fat</td>
          </tr>
          <tr>
            <th scope="row">3</th>
            <td>Larry</td>
            <td>the Bird</td>
            <td>@twitter</td>
          </tr>
        </tbody>
      </table>
    </div>
    
  </div>
</div>
{% endblock %}

This html file has a bootstrap table.

<table class="table mt-5">

Putting the styles table will transform a plain html table to the bootstrap table. Bootstrap’s mt-5 is the same style=”margin-top:”. You have m for margin and t for top. You can read more about this and other great features on notations here.

Python Flask API

Create a python file in the root folder and label this “./app.py” and put the following code inside of it.

from flask import Flask, render_template, request
app = Flask(__name__)
@app.route('/')
def index():
   return render_template('userForm.html')
if __name__ == '__main__':   
   app.run(debug = True)

Try It

Run the application.

python app.py

You should the following.

Previous Article
Next Article