Azeez Aremu
Django way

Django way

Django Views in Action

Django Views in Action

Azeez Aremu's photo
Azeez Aremu

Published on May 5, 2021

7 min read

Subscribe to my newsletter and never miss my upcoming articles

Welcome, So we have successfully performed CRUD Action with Django and it is time to show our visitors the students we have registered successfully and probably allow them to search for any registered student. In this article, we will

  • Fetch all student details from the database and present the result to our visitors.

    For the above we won't make use of the API or admin panel to fetch as we did in the last article

  • Fetch student's details based on the visitor's input search
  • Allow user to add a new student to the database from the browser

Recall, our only table in the database has six fields namely: name, grade, level, active, date_admitted, and reg_no. Also, we have populated our table with some data in the last post. Also, don't forget we have routed our project to our application from the project urls.py file to application urls.py.

Recall that we define what is to be passed or fetched from the database in the views.py file and also what is to be passed to the HTML file to be presented to the website visitors i.e views.py and urls.py files are the bridge that connects our database to our HTML file.

Establish users visiting address

According to Django Architecture, We will need an address which the browser will use to communicate to a Django running server. Simply paste the code below in the urls.py in the application folder

from django.urls import path
from .views import student_views 

urlpatterns = [
        path('student_list', student_views, name = "student_views"), 
       ]

The above code simply tells Django to go to the views.py file and perform the action defined in the student_views function if the address it received from the browser has its subdomain to be /student_list.

So it is time to define what will be done in the student_views function, But before we do that let's simply note down what we need from the database and what we need to pass to the HTML file.

We will need to

  • Fetch all the students details at once and send the gotten list to the HTML file

  • Fetch the requested registered student and send his/her details to the HTML file.

Simply past the code below in the views.py file in our application folder

from .models import students #line 1

def student_views(request): #Line 3 (Function-based view)
    student_list = students.objects.all() #Line 4
    context = {'student_list':student_list} #Line 5
    return render(request, 'first_model/index.html', context=context) # Line 6

The code above simply do the following

  • Line 1: import our table from the database for us to query

  • Line 3: define our function with the name student_views. Recall we have two types of views ( function-based views and class-based views).

  • Line 4: It queries the student table in the database and selects all populated rows and columns it can find.

  • Line 5: This creates a key to value pair, the key will serve as a reference in the HTML file that will point to the student_list we got from the database

  • Line 6: This tells Django to present to the browser the HTML file named index.html in the first_models folder located in the templates folder.

As of now, we do not have a templates folder, now let's quickly do that

  • first, go to the base directory (which contains the manage.py file) and create a folder with the name templates.
  • Second, go to the settings.py file and locate the templates definition as shown below. Add BASE_DIR / 'templates' in the empty square bracket.

Screenshot (108).png

  • create a folder in the templates and name it first_model and then create the index.html file in it. Paste the code below in the index.html file
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Student Database</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" >
</head>
<body>

    {% block content %}
    <table class="table">
        <thead>
          <tr>
            <th scope="col">#</th>
            <th scope="col">Name</th>
            <th scope="col">Level</th>
            <th scope="col">City</th>
            <th scope="col">Date Admmited</th>
            <th scope="col">Registration Number</th>
            <th scope="col">Active</th>
        </tr>
        </thead>
        <body>
            <!--Loop through the list -->
            {% for student in student_list %} 
            <tr>
                <th scope="row">{{student.id}}</th>
                <td>{{student.name}}</td>
                <td>{{student.level}}</td>
                <td>{{student.city}}</td>
                <td>{{student.date_admitted}}</td>
                <td>{{student.reg_no}}</td>
                <td>{{student.active}}</td>
            </tr>
           {% endfor %}
        </tbody>
      </table>
      {% endblock %}
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js" ></script>
</body>
</html>

The {% block content %} {% endblock %} used above will enable us to reuse the content of the page in another HTML document with just replacing the content within the {% block content %} {% endblock %} Now save all files and then go to your terminal and navigate to the directory that has our project's manage.py file to run the server with the command below

python manage.py runserver

So with the server running successfully, go to the browser and type in the address 127.0.0.1:8000/student_list to give you the result below

Screenshot (109).png

Well done 👍, First mission completed successfully. Now to the second mission.

To accept input to be used to fetch specific student from the database, the steps below can be taken

  • Create an HTML file named search.html in the first_model folder in our templates. This file will have a form that will allow the visitors to input the student registration number. The form can be of either POST or GET method, since we are only fetching and not adding to the database we will use GET request. Paste the code below in the file.
{% extends 'first_model/index.html' %}

{% block content %}


<div class="container justify-content-center">
    <div class="row mt-5 shadow justify-content-center">
        <form class="col-5 mt-4" method = "GET" action="{% url 'search_student_name' %}">
            <div class="mb-3">
              <label  class="form-label">Student Registration Number</label>
              <input type="text" class="form-control" name="registration_number">

            </div>
            <button type="submit" class="btn btn-block btn-primary mb-4 col-12">Submit</button>
        </form>

        {% if student %}
        <table class="table col-12">
            <thead>
              <tr>
                <th scope="col">Name</th>
                <th scope="col">Level</th>
                <th scope="col">City</th>
                <th scope="col">Date Admmited</th>
                <th scope="col">Registration Number</th>
                <th scope="col">Active</th>
            </tr>
            </thead>
            <tbody>
                <tr>
                    <td>{{student.name}}</td>
                    <td>{{student.level}}</td>
                    <td>{{student.city}}</td>
                    <td>{{student.date_admitted}}</td>
                    <td>{{student.reg_no}}</td>
                    <td>{{student.active}}</td>
                </tr>
            </tbody>
          </table>
        {% elif result_not_found %}
        <label  class="form-label col-12  text-center text-danger text-uppercase">{{result_not_found}}</label>
        {% endif %}
    </div>
</div>

{% endblock %}
  • update the application urls.py file with the address below
 from .views import student_views, search_student
 path('student', search_student, name = 'search_student_name'),
  • Lastly, update the views.py file with the lines of code below

    def search_student(request):
    
      if request.method == 'GET':
          registration_number = request.GET.get("registration_number")
          try:
              student = students.objects.get(reg_no = registration_number)
              return render(request, 'first_model/search.html', {'student': student})
          except students.DoesNotExist:
              if registration_number:
                  result_not_found = f"Student with the registration number {registration_number} does not exist"
                  return render(request, 'first_model/search.html', {'result_not_found': result_not_found})
      return render(request, 'first_model/search.html')
    

So save all files and then start the server. Navigate to the address 127.0.0.1:8000/student and then input non-existing registration number that is not in the database to see the result below

Screenshot (111).png Also, input the correct registration number in the database and see the result as below

Screenshot (112).png

Wow, the second mission completed 👍, Now to the last mission. Create a new HTML file named add_student.html to the first_model folder in the templates. Add the code below in the file

{% extends 'first_model/index.html' %}

{% block content %}


<div class="container justify-content-center">
    <div class="row mt-5 shadow justify-content-center">
        <form class="col-5 mt-4" method = "POST" action="{% url 'add_student_name' %}">
            {% csrf_token %}
            <h2>Add Student</h2>
            <div class="mb-3">
                <label  class="form-label">Name</label>
                <input type="text" class="form-control" name="name">
            </div>

            <div class="mb-3">
                <label  class="form-label">City</label>
                <input type="text" class="form-control" name="city">
            </div>

            <div class="mb-3">
                <label  class="form-label">Level</label>
                <input type="text" class="form-control" name="level">
            </div>

            <div class="mb-3">
                <label  class="form-label">Date Admmitted</label>
                <input type="text" class="form-control" name="date_admitted">
            </div>

            <div class="mb-3">
                <label  class="form-label">Active</label>
                <input type = "checkbox" class="" name="active">
            </div>

            <div class="mb-3">
                <label  class="form-label">Registration Number</label>
                <input type="text" class="form-control" name="reg_no">
            </div>


            <button type="submit" class="btn btn-block btn-primary mb-4 col-12">Submit</button>
        </form>
    </div>
</div>



{% endblock %}

With that done, go to the application urls.py file and update it with the lines below

from .views import student_views, search_student,add_student

#In the urlpatterns list
path('add_student', add_student, name = 'add_student_name'),

Lastly, update the views.py with the code below

def add_student(request):
    if request.method == 'POST':
        name = request.POST.get("name")
        city = request.POST.get("city")
        level = request.POST.get("level")
        date_admitted = request.POST.get('date_admitted')
        active = request.POST.get("active")
        reg_no = request.POST.get('reg_no')

        if active == "on":
            active = True
        else:
            active = False
        student = students.objects.create(
            name = name, city = city, level = level, date_admitted=date_admitted, active=active, reg_no=reg_no
        )
        return redirect('student_views')
    return render(request, 'first_model/add_student.html')

Save all files and start the server and then go to the address 127.0.0.1:8000/add_student. Fill in the details as shown below and submit.

Screenshot (113).png

visit this git repo to download the source code. That's it for today and I hope you have learnt one thing or another. Thank you for reading.

 
Share this