Building my first web app – part two
The next step is to add the shopping list to the page. This part of the web app will work as a shopping list that I can use to add items that I need to purchase, and then check off when it has been purchased. It would be good to have a location where it can be purchased from, as well.
Again, I’m going to base this on the other work that I’ve already done.
As a later addition, I might like to have multiple shopping lists – perhaps even configurable –
I think the steps that I will be using will be as follows.
Create a branch of my elsinore_app
Navigate to the directory elsinore_app
Start the virtual environment: source elsinore/bin/activate
Now create a new branch: git checkout -b shopping
Push the new branch to the remote.
git push -u orign shopping
Make sure the flask is pointing to the right place
export FLASK_APP=project
export FLASK_DEBUG=1
Create a new template
Let’s call it list.html
Needs to extend the base class, and live in the templates directory:
{% extends “base.html” %}
{% block content %}
<h1 class=”title”>
Flask Login Example
</h1>
<h2 class=”subtitle”>
Easy authentication and authorization in Flask.
</h2>
{% endblock %}
I will come back and configure this
Update the index.html page menu to point to the list.html
This is actually wrong. What I need to do is update the base.html file to add another item to the nav bar called list.
<div id=”navbarMenuHeroA” class=”navbar-menu”>
<div class=”navbar-end”>
<a href=”{{ url_for(‘main.index’) }}” class=”navbar-item”>
Home
</a>
{% if current_user.is_authenticated %}
<a href=”{{ url_for(‘main.profile’) }}” class=”navbar-item”>
Profile
</a>
{% endif %}
{% if current_user.is_authenticated %}
<a href=”{{ url_for(‘main.list’) }}” class=”navbar-item”>
List
</a>
{% endif %}
<a href=”{{ url_for(‘auth.login’) }}” class=”navbar-item”>
Login
</a>
<a href=”{{ url_for(‘auth.signup’) }}” class=”navbar-item”>
Sign Up
</a>
{% if current_user.is_authenticated %}
<a href=”{{ url_for(‘auth.logout’) }}” class=”navbar-item”>
Logout
</a>
{% endif %}
</div>
Write a route in main.py to point to the list.html
Now I need to get the route to work properly- then test it.
Doing this in main.py.
Adding a new route:
@main.route(‘/list’)
@login_required
def list():
return render_template(‘list.html’)
Okay, this appears to be working. We can now return a page when we call it.
Let’s edit the page so it’s obviously different.
Set up the html on the list.html page
I’m copying this directly from the previous app.
This goes in list.html:
<h1>Shopping List App</h1>
<form action=“/list/add” method=”post”>
<div>
<label>Item</label>
<input type=”text” name=”title” placeholder=”Enter item to purchase”>
<label>Location</label>
<input type=”text” name=”location” placeholder=”Enter purchase location”>
<br>
<button type=”submit”>Add</button>
</div>
</form>
<hr>
{% for item in shopping_list %}
<p>{{item.id }} | {{ item.title }} | {{ item.location }}</p>
{% if item.purchased == False %}
<span>Not Purchased</span>
{% else %}
<span>Purchased</span>
{% endif %}
<a href=“/list/update/{{ item.id }}”>Update</a>
<a href=“/list/delete/{{ item.id }}”>Delete</a>
{% endfor %}
Okay, this seems to work. I can see the text fields to add different things, but when I press the add button, it tries to call an ‘add’ page or route, but it doesn’t work.
That’s okay, because I haven’t written it yet.
Add the routes to the page.
The previous one I am working from is called app.py
In this example, we will refer to main.py.
The route needs to change, too. It will no longer be /add but /list/add and so on.
So, I am going to write and test the add route first. This is what the route looks like:
@main.route(“/list/add”, methods=[“POST”])
def add():
title = request.form.get(“title”)
location = request.form.get(“location”)
new_item = ShoppingList(title=title, location=location, purchased=False)
db.session.add(new_item)
db.session.commit()
return redirect(url_for(“home”))
Need to import the model
Add the class shopping list to the db page.
Now, the next thing we need to do is create a table in our database that reflects our class.
The first thing that we will do is
Create the table list in the database
Write the functions for the routes – using @loginrequred so that only logged in people can access them.