Pantry Database Part 2: Django Front End

Awhile ago, I wrote a post on an idea for a pantry app that I wanted to develop.  It’s been a little while since I’ve visited this project and thought it was well overdue for me to make some progress on it.

In the first part, I designed and built a SQLite database backend for the app.  Now that I’m more experienced with databases, I am beginning to get a much better feel for when to use MySQL and when to use SQLite (or even something else).  Early on during this project, I wanted to use a SQLite database (I knew that this is the database used on phones and I was wanting to get a better handle on using SQLite).

A major feature of this app is that I want it to sync somehow between my phone and my boyfriend’s phone (and maybe even more devices).  By design, SQLite can’t be accessed by multiple users at the same time and you can’t easily access it on a remote server.  It could be possible to do this app with SQLite as initially planned, but it would go against what SQLite is built to do.  Because of that, I redid the database in MySQL.

I think the front end will be a lot more difficult for me to accomplish than the database back end.  I decided to do the front end in Django, since it is Python based and that is my strongest language.  I wrote a seven part Django tutorial recently.  The end goal of that was to have enough of an understanding of Django to build my pantry front end.  In this post, we’ll try to start getting that up and running!

Basic Design

I have never designed a web app on my own.  However, I have designed GUIs and simple webpages and I believe some of the design steps will be similar.  The first thing we want to do is get an idea of what we want the app to do and what we want it to look like.  In the first part of this series, we discussed the doing so now it is time to figure out how it will look.

There are two major functions of this web app: a list of pantry items and a list of recipes.  To start, I want to just get the recipes portion up and running (I believe this will be the more difficult of the two and I’m feeling up for a challenge).

I want the app to function first and then I will worry about the aesthetics later.  Therefore, on the front page, I’d like the app to look something like this:

  • Cookbook
    • Top Recipes
      • Top Recipe 1
      • Top Recipe 2
    • Most Recent Recipes
      • Most Recent Recipe 1
      • Most Recent Recipe 2

Each of these items should be links.  The top Cookbook link will go to a page that has all of the recipes and ways to sort them.  The Top Recipes link will go to a similar page, but with it automatically sorted by rating (or just our favorite recipes).  Finally, the Most Recent Recipes will be the same, but ordered by date.  The recipe links will go to the page that shows the actual recipe.

Create The App

The first step will be to create the app.  I already have a folder called pantrio.  I’ll navigate to that directory and type the command:

This creates a folder called cookbook within my pantrio directory.  Inside this directory are the following folders and files:

Make sure that this creates the apps.py file.  Older versions of Django might not create the file automatically and it is needed.  If it doesn’t add the file, delete the cookbook directory, update Django through pip, and try again.

Create The View

Think of the views.py file as essentially a group of classes which will help define the look of specific elements on different pages.  For example, this is where we will define that we want our recipes to be listed alphabetically.  Open the cookbook/views.py file and add the following to it:

The IndexView class is for the index page (the main or front page), the DetailView page is for recipes, and the ResultsView is a temporary view that might be used in the future.

Within each class, we define the template that we will be using (we will create this actual file later) as well as any specifics for how the elements should be organized.

Next, we need to link these views to URLs.  Create a file within the cookbook directory called urls.py and put the following in it:

This defines the URL patterns for the app and links them to our views that we just defined.  Now, we need to link these URLs to the project.  Open the file pantrio/urls.py and edit it to look like this:

This tells the project that we are wanting to include our new Cookbook urls and views.

Update the Database

Any time we add new views or models, we need to update the database.  To do that, navigate to the folder that contains the manage.py file and type the command

Create The Model

The models define what information will be in the elements on a specific page.  For the recipes, we have three major items: the recipes themselves (name, date created, total prep time, number of servings, etc), ingredients (including the amounts), and the steps.  Each of these items gets its own class in the models file:

Though the syntax is quite different, this is very similar to defining tables in a database.  In fact, Django will create a database based on the information in these tables!  We need to be careful that our data types (such as CharField, DateField, etc) are correct and large enough.

Activate The Model

Since we made changes to the model, we need to “migrate” it.  This essentially means telling Django to update and/or create any new tables into the database.  Navigate to the project’s settings file (for me, this is pantrio/settings.py) and add the following to the INSTALLED_APPS list:

Finally, navigate to the manage.py file and run the command:

You should receive an output that looks something like this:

Make the App Modifable in the Admin

Next, we need to make the Cookbook app modifable in the admin tool (this is off by default).  Navigate to the cookbook/admin.py file and add the following:

This tells the admin tool what we want to be able to edit (Ingredient and Step) and in general how we want it to look.  Check to make sure it works by going to: http://127.0.0.1:8000/admin/

Create .html Templates

Finally, we need to create the templates.  This could be done at any time, and perhaps maybe should be done first so that you can test after each step.  However, without knowing what views and models you will use, it might be difficult to create the templates.

First, create a series of folders like this within the cookbook directory: templates/cookbook/

Next, create your .html templates.  For me, this is index.html, recipe_view.html, and results.html.

My index.html file contains this:

This puts “Cookbook” large on the top of the page, then lists each recipe title in bullet points.  Each of these is a link.  They are alphabetized because our view orders them alphabetically.

Next, the recipe_view.html file is the template for each actual recipe.  That file contains:

Check to make sure it works: http://127.0.0.1:8000/cookbook/

Add A Recipe With The Admin Tool

Finally, lets add a recipe and check it out!  Go to the admin tool (http://127.0.0.1:8000/admin/) and click on Recipes under Cookbook:

Capture

On the upper right portion of the page, click “Add Recipe + “.  You’ll be taken to a page that looks like this:

Capture

Fill in the information for the recipe and click save.  Next, go to the app (http://127.0.0.1:8000/cookbook/).  I’ve added three recipes, so my cookbook page looks like this:

Capture

A recipe page looks like this:

Capture

That’s it!  I’m pretty excited to have this app up and running.  Before starting this, I still didn’t have a good feel for Django, even though I went through the 7 part tutorial.  This project helped me understand Django a lot more and I’m excited to be able to use this new tool.  Next, I’d like to add the following capabilities (this list is not in any order):

  • Add more recipe information (serving size, number of calories, prep time, total time, etc)
  • Add search capabilities (by recipe name, ingredient(s), number of calories, etc)
  • Add filtering capabilities to search/browse
  • Add pantry inventory capabilities
  • Make the app look and feel a little more professional

Have questions or suggestions?  Please feel free to comment below or contact me.

Leave a Reply

Your email address will not be published. Required fields are marked *