Choose Vaccine

In this video, we are going to create a page to ask a patient to choose a vaccine. When the patient chooses their desired vaccine, we will redirect them to the suitable campaign.

Resources

• Code Files
• choose-vaccine.html

Code Setup

• But at first, lets setup the project code for this section.

• So, you need to download the project code files the resources section: DOWNLOAD ZIP FILE

• 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.

• Run the migrations and create a superuser.

• Create 5 Fake vaccine, center, storage, campaigns.

Views

In the views.py file of vaccination, at first, lets import some necessary functions.

from django.views import generic
from django.contrib.auth.mixins import LoginRequiredMixin
from vaccine.models import Vaccine

Now, lets create a view to display a list of vaccine to the users.

# Create a view named ChooseVaccine.
# This view will inheirt LoginRequiredMixin, because we want only authenticated users to access this view
# This view will also inherit generic.ListView because we are displaying a list of vaccine to the users.
class ChooseVaccine(LoginRequiredMixin, generic.ListView):
    # At first, we need to specify the name of model for this ListView
    model = Vaccine
    # Now, give the template name of this view
    template_name = "vaccination/choose-vaccine.html"
    # After that, we will paginate this list view by 10 objects per page.
    paginate_by = 10
    # When you paginate the list of objects, make sure you have provided ordering.
    ordering = ["name"]

Template

Now, lets create a template for this view.

Create choose-vaccine.html file in the templates folder under vaccination sub-folder. I have attached choose-vaccine.html file in the resources section. Download it and paste its content in this file.

{% extends 'mysite/base.html' %}

{% block title %} 
    <title>Choose Vaccine</title>
{% endblock title %}

{% block content %}
<div class="mt-3">
  <div class="d-flex align-items-center justify-content-between">
    <h3 class="text-center">Choose Your <i class="fas fa-syringe"></i> Vaccine</h3>
  </div>
  <table class="table table-responsive table-hover">

    <thead>
      <tr>
        <th scope="col">Name</th>
        <th scope="col">Number of Doses</th>
        <th scope="col">Interval</th>
        <th scope="col">Confirm</th>
      </tr>
    </thead>

    <tbody>
      {% for vaccine in page_obj %}
      <tr>
        <td>{{ vaccine.name|upper }}</td>
        <td>{{ vaccine.number_of_doses }}</td>
        <td>{{ vaccine.interval }}</td>
        <td><a href="#" class="btn-sm btn-outline-primary">Select</a></td>
      </tr>
      {% endfor %}
    </tbody>

  </table>

  {% include "components/pagination.html" %}

</div>
{% endblock content %}

URLS

Now, lets create a url to access this view. So, create a urls.py file in the vaccination app.

from django.urls import path
from vaccination import views

app_name = "vaccination"

urlpatterns = [
    path("choose-vaccine/", views.ChooseVaccine.as_view(), name="choose-vaccine"),
]

Now, in the urls.py file of mysite, you need to include this urls.py file.

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

Updating URLS of dashboard Page

After creating this url, we need to add this url in our dashboard.html file

                                <a href="{% url 'campaign:campaign-list' %}" class="dashboard-card-link">
                                    <i class="fas fa-calendar fs-1"></i> <br>
                                    Current <br> Campaigns
                                </a>

                                <a href="{% url 'vaccination:choose-vaccine' %}" class="dashboard-card-link">
                                    <i class="fas fa-clock fs-1"></i> <br>
                                    Schedule <br> Vaccination
                                </a>

[Run the development server and see the changes]