Vaccine Detail

Resources:
- Vaccine Detail HTML File

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

Views

Open views.py file of vaccine app.

Create a class based view named VaccineDetail:

class VaccineDetail(View):

In this view, create a get method that takes id as an additional argument.

def get(self, request, id):

In this get method, first we will query the vaccine with given id.

from django.http import Http404

        try:
            vaccine =  Vaccine.objects.get(id=id)
        except Vaccine.DoesNotExist:
            raise Http404("Vaccine Not Found")

Now, we have to create a context dictionary and add object field.

context = {
            "object": vaccine,
        }

Then, we need to render the vaccine-detail page.

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

Now, create a template in vaccine folder named "vaccine-detail.html.

In the template add this code:

{{ object.name }}

[Complete Code]

class VaccineDetail(View):
    def get(self, request, id):
        try:
            vaccine =  Vaccine.objects.get(id=id)
        except Vaccine.DoesNotExist:
            raise Http404("Vaccine Not Found")
        context = {
            "object": vaccine,
        }
        return render(request, "vaccine/vaccine-detail.html", context)

URL Routing

After creating the vaccine detail view, we need to create a url path for this view. So, open urls.py file of vaccine and add a new url path.

path("<int:id>/", views.VaccineDetail.as_view(), name="detail"),

Now, add this url path in the vaccine-list page.

<td><a href="{% url 'vaccine:detail' vaccine.id %}" class="btn-sm btn-outline-primary">View Details</a>

[Run the development server and see the changes.]

Templates

At last, lets modify our vaccine detail page.

I have attached vaccine-detail.html file in the resources section, download it, copy its content and then paste it in the vaccine-detail.html file.

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

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

{% block content %}
<div class="card mb-3">
  <div class="card-body">
    <h5 class="card-title mb-4"><i class="fas fa-map-marker-alt"></i> Vaccine Details</h5>

    <div class="row mb-1">
      <div class="col-5 col-sm-4 col-md-3 col-lg-2 fw-bold">
        Vaccine Name
      </div>
      <div class="col-7 col-sm-8 col-md-9 col-lg-10">
        {{ object.name }}
      </div>
    </div>

    <div class="row mb-1">
      <div class="col-5 col-sm-4 col-md-3 col-lg-2 fw-bold">
        Description
      </div>
      <div class="col-7 col-sm-8 col-md-9 col-lg-10">
        {{ object.description }}
      </div>
    </div>

    <div class="row mb-1">
      <div class="col-5 col-sm-4 col-md-3 col-lg-2 fw-bold">
        Storage Temperature
      </div>
      <div class="col-7 col-sm-8 col-md-9 col-lg-10">
        {{ object.storage_temperature }}
      </div>
    </div>

    <div class="row mb-1">
      <div class="col-5 col-sm-4 col-md-3 col-lg-2 fw-bold">
        Number of doses
      </div>
      <div class="col-7 col-sm-8 col-md-9 col-lg-10">
        {{ object.number_of_doses }}
      </div>
    </div>

    <div class="row mb-1">
      <div class="col-5 col-sm-4 col-md-3 col-lg-2 fw-bold">
        Interval
      </div>
      <div class="col-7 col-sm-8 col-md-9 col-lg-10">
        {{ object.interval }}
      </div>
    </div>

    <div class="row mb-1">
      <div class="col-5 col-sm-4 col-md-3 col-lg-2 fw-bold">
        Minimum Age
      </div>
      <div class="col-7 col-sm-8 col-md-9 col-lg-10">
        {{ object.minimum_age }}
      </div>
    </div>

    <div class="row mb-1 btn-container">
      <div class="col-12">
        <button class="btn btn-sm btn-success m-1">
          <a href="#">
            <i class="fas fa-pen"></i> Update Vaccine
          </a>
        </button>

        <button class="btn btn-sm btn-danger m-1">
          <a href="#">
            <i class="fas fa-trash"></i> Delete Vaccine
          </a>
        </button>
      </div>
    </div>
  </div>
</div>
{% endblock content %}

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