Akshay Gaur

Detail View Part 1

For our details view, lets first add a few new departments to our list of departments using the admin module:

More departments added to the system.

And let us reduce the amount of information that we are presenting in the details view, and add a new link to view the details of that particular department.

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Department List</title>
</head>
<body>
    <h2>List of departments</h2>
    <br><br><br>
    {% for dept in depts %}
        Department Code: <b>{{ dept.d_code }}</b><br>
        <a href="{% url 'dept_details' pk=dept.pk %}"> Details </a><br>
    {% endfor %} 
</body>
</html>

This is how the page should look like now:

List of departments will basic info

Notice how we create the url to refer to the link. We are asking the framework to look for a url named 'dept_details' and pass the dept's primary key pk to it. Now, all we need to do is to create a view named dept_details, and accept this pk as a parameter. We will use DetailsView to render this view as we are providing details of one model's instance through this view and that is exactly what the django framework's DetailView is made for.

To create a detail view, first, open up the views.py file in students directory. And add the following lines:

from django.shortcuts import render
      
# import the generic views.
from django.views.generic import TemplateView, ListView, DetailView

# import models
from students.models import Department


class WelcomeView(TemplateView):
    """
    This is our welcome screen. Utilizes a
    template view.
    """
    template_name = 'welcome.html'


class DeptListView(ListView):
    """
    This class handles the list view for
    department model. Utilizes the list view
    """
    template_name = 'dept-list.html'
    model = Department
    context_object_name = 'depts'


class DeptDetailView(DetailView):
    """
    This is the detail view of the class.
    Uses the default detail view provided
    by Django Framework.
    """
    template_name = 'dept-details.html'
    model = Department
    context_object_name = 'dept'

You must have noticed that the webpage that we defined for this page doesn't exist ('dept-details.html'). So lets fix this by make a html file named 'dept-details.html' in the --- you guessed right --- the templates folder.

Create a skeleton like we did before and put the following:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Department details</title>
</head>
<body>
    <h2>Department Detail Screen</h2>
    <br><br><br>
    Department Name: <h3>{{ dept }}</h3>
    Department Code: <h3>{{ dept.d_code }}</h3>
    Department Chair: <h3>{{ dept.d_chair }}</h3>
</body>
</html>

So at this point, what we have is a view named DeptDetailView that knows that it would render dept-details.html. The only that remains to be done is to tell the project when to call the view that we declared. We do that in students/urls.py file so that project knows what view to call when any url is requested.

To do that, lets edit the students/urls.py and append this to the urlpatterns list:

from django.urls import path
from students import views

urlpatterns = [
    path('', views.WelcomeView.as_view(), name='welcome'),
    path('depts/', views.DeptListView.as_view(), name='dept_list'),
    path('depts/<str:pk>/details/', views.DeptDetailView.as_view(), name='dept_details'),
]

This should be enough to bring up the details view. So let us go to the dept list page and click on one of the "Details" link on that page. If everything goes according to our plan, we should see the details page like this:

Department Details