Web_Dev_Grad

Inside your templates folder create 2 templates; one to display the contents of your database table and another to add records to the table. E.g. categories.html and add_category.html.

Set up the template inheritance within these to your base.html file including the content block to add to.

{% extends "base.html" %}

{% block content %}
<!-- Your content here -->
{% endblock %}

Then add a link to from the display page to the add page using a route that we will define shortly.

<a href="{{ url_for('add_category') }}">Add Category</a>

Create routes in your route.py file to point to the new pages.

@app.route("/categories")
def categories():
    return render_template("categories.html")

@app.route("/add_category", methods=["GET", "POST"])
def add_category():
    return render_template("add_category.html")

The route for add_category has methods=["GET", "POST"] because this page will serve 2 different purposes. The GET tells Flask to display the page when a link to the page is clicked. The POST handles what will happen when a form on that page is submitted. Note that other routes do not have the method set to GET because GET is the default and if there is no additional POST, specifiying GET by itself is not required.

In add_category.html, build a form. In this example Materialize is used.

{% extends "base.html" %}

{% block content %}
    <div class="row">
        <form class="col s12" method="POST" action="{{ url_for('add_category') }}">
            <div class="card-panel">
                <div class="input-field">
                    <i class="fas fa-tag prefix"></i>
                    <input id="category_name" name="category_name" type="text" class="validate" required>
                    <label for="category_name">Category Name</label>
                </div>
                <button type="submit" class="btn">Add Category</button>
            </div>
        </form>
    </div>
{% endblock %}

The key points of this are:

• method="POST" which sends data when the form is submitted.
• action="{{ url_for('add_category') }}" points to the function (route) that handles the form submission. This is why we have POST in the methods in our add_category route.
• name="category_name" in the input field must match the column name (attribute name) defined in the Model.

Ensure you have all the imports you need at the top of routes.py.

from flask import render_template, request, redirect, url_for
from project_name import app, db
from project_name.models import Category

Update the add category function for in the case of POST, it will:

• Create an instance of the Category Model with the data from the form
• Add this instance to the session
• Commit the session
• Redirect the user to another page

@app.route("/add_category", methods=["GET", "POST"])
def add_category():
    if request.method == "POST":
        # Create an new instance of the model with the form data
        category = Category(category_name=request.form.get("category_name"))
        # Add the instance to the session
        db.session.add(category)
        # Commit the session
        db.session.commit()
        # Redirect the user
        return redirect(url_for("categories"))
    return render_template("add_category.html")