Vaccine List

Resources:

In this video, we are going to learn how to create list view for vaccine model using class based view.

Setup

First of all, download the Section 8 Project Code files from the resources section.

Now, extract the folder on the desktop.
Then, copy the mysite folder which is the project root directory.
Replace the mysite folder of your project with the copied mysite folder. So, if you made any mistake while writing the code in the previous section, then, it won't affect your learning in this section.
Open your project in the VS code and in the terminal, activate the virtual environment, and move to the mysite.
Then, migrate the changes to the SQLite database.
Now, create a superuser having username "admin" and password "abde@12345".

Now, are are ready to go. At first, we need to create two vaccine object Django admin panel. So, open your admin panel and create vaccine objects.

Vaccine 1:
    name = Covishield

Vaccine 2:
    name = Polio

Views

Open views.py file of vaccine.

To create class based view, you need to import View from django.views

from django.views import View

Now, create a class named VaccineList and inherit the View.

class VaccineList(View):

After that, in this view, we are going to handle the list display for vaccine model. That means, the user will send the get request and we have to show all the vaccine list.

So, we need to create a get method and then handle all the logic for list display in that method.

def get(self, request):

In this get method, we have to create a variable named vaccine list and we have to store the vaccine queryset.

from vaccine.models import Vaccine

vaccine_list = Vaccine.objects.all()

Now, create a context dictionary and add object list.

context = {
            "object_list": vaccine_list,
}

After that render the vaccine-list.html template.

return render(request, "vaccine/vaccine-list.html", context)

[Complete Code]

from django.views import View
from vaccine.models import Vaccine

class VaccineList(View):
    def get(self, request):
        vaccine_list = Vaccine.objects.all()
        context = {
            "object_list": vaccine_list,
        }
        return render(request, "vaccine/vaccine-list.html", context)

Templates

Since, we have not created any vaccine-list.html file, so, create a folder named templates.

Then create a sub folder named vaccine.

In that vaccine folder, create vaccine-list.html file.

In that file, create a for loop that iterates over object_list

{% for vaccine in object_list %}
    {{vaccine.name}}
{% endfor %}

In this way, we have created VaccineList view and a template for that view.

URL

Currently, our url path is not configured. So, open urls.py file of mysite.

Add a new path for vaccine.

path("vaccine/", include("vaccine.urls", namespace="vaccine")),

So, whenver user types vaccine/, django will route that request to vaccine.urls file.

In the vaccine folder, create a urls.py file.

First of all, import path from django.urls.

from django.urls import path

Then, import views from vaccine

from vaccine import views

Write tha app_name for this file.

app_name = "vaccine"

Then, create a urlpatterns and add path for VaccineList view.

urlpatterns = [
    path("", views.VaccineList.as_view(), name="list"),
]

In Django, when using class-based views, we need to use the .as_view() method in the URL patterns because class-based views are not callable directly.

The as_view() method is a class method that returns a callable object that can be used as a view function in the URL patterns. This is because when Django is processing a URL request, it expects to receive a callable object, such as a function or a method, that takes a request object as its argument and returns a response object.

Class-based views are not callable objects themselves, but the .as_view() method returns a callable object that can be used in the URL patterns.

[Now, visit the vaccine list view page and see the changes.]

Templates Modification

At last, lets start modifying the vaccine list template.

I have attached vaccine-list.html file in the resources section. Download it, copy its content and paste it in the html file.

{% extends 'mysite/base.html' %}
{% block title %} 
    <title>Vaccine List</title>
{% endblock title %}

{% block content %}
<div class="mt-3">

  <div class="d-flex align-items-center justify-content-between">
    <h3 class="text-center">
      <i class="fas fa-syringe"></i> Vaccine List
    </h3>
    <a href="#"><i class="fas fa-plus"></i> Create Vaccine</a>
  </div>

  <table class="table table-responsive table-hover">
    <thead>
      <tr>
        <th scope="col">Vaccine Name</th>
        <th scope="col">Number of Doses</th>
        <th scope="col">Interval</th>
        <th scope="col">Minimum Age</th>
        <th scope="col">Select</th>
      </tr>
    </thead>

    <tbody>
      {% for vaccine in object_list %}
      <tr>
        <td>{{vaccine.name|upper}}</td>
        <td>{{ vaccine.number_of_doses }}</td>
        <td>{{ vaccine.interval }}</td>
        <td>{{ vaccine.minimum_age }}</td>
        <td><a href="#" class="btn-sm btn-outline-primary">View Details</a>
        </td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
</div>
{% endblock content %}

Now, our vaccine detail page looks much more better. In this way, we have learnt how to handle list page for a given model using class based view.