Creating a View to Display Data

For this stage we need to do the following things

1. Import our models into views.py
2. Create a view that gets the data for the model
3. Add a URL for the view
4. Create a template to display the data
5. Add a link to the template in base.html

Importing the Models

At the top of the views.py file, add this line.

from .models import ProductType, Product, Review

The "." points it at the current directory.

Create the View

Our first data view will retrieve all the producttypes. Our view will look at lot like the index view but with an additional element, a context. The context, in this case, will consist of a list to contain all the producttype data. We can access the data through the "objects" attribute. Objects, further, has the attributes "all" which will return all the objects in the database, "get" which returns a single object by id or "filter" which takes a query argument. We will use "all."

Here is the view:

def gettypes(request):
    type_list=ProductType.objects.all()
    return render(request, 'techapp/types.html' ,{'type_list' : type_list})

The variable "type_list" is a list that receives the ProductType objects. The context in the return render line is within the curly braces{ }. It needs to match the variable name of the list. This list is what will be passed to the template with the data.

Add the URL

Next we need to add the URL to urls.py.

Here is urls.py with the new url added.

from django.urls import path
from . import views

urlpatterns=[
    path('', views.index, name='index'),
    path('gettypes/', views.gettypes, name='types'),
]

Create the Template

Next we need to create the html template. Like index.html the template will be in templates/techapp/. It needs to be named exactly what we named it in the view: "types.html"

First we extend the base.html and then we start the content block. I have added a simple heading with h2 tags. Next I start a table. The class "table" is a Bootstrap style. It makes the table look nicer. I make a table row and set up the column headings. Then I start a for loop where I loop through the list that the view passed to the template. For each item in the list I create a new row and display the typename and typedescription. These are field names from the model and must match the model exactly in case and spelling. Finally, I close the for and close the content area. Here is the template code.

{% extends 'base.html' %}
{% block content %}
<h1>Product Types</h1>
<table class='table'>
 <tr>
     <th>Name</th>
     <th>Description</th>
 </tr>
 {% for t in type_list %}
   <tr>
       <td>{{ t.typename }}</td>
       <td>{{ t.typedescription }}</td>
   </tr>

 {% endfor %}


</table>


{% endblock %}

Add a Link to base.html

Finally we open base.html and add a link to our new page. The link goes in the unordered list in the navbar section. In the link instead of an absolute path, we use a url keyword and the "name" we gave the url in urls.py.

 <ul class="nav navbar-nav">
      <li><a href="{% url 'types' %}">Product Types</a></li>
               
  </ul>

Make sure everything is saved and run the server. Navigate to http://127.0.0.1:8000/techapp/

You should see something like this:

Click the product types menu option.

Previous Next