'Django framework: unable to load 'services' page

I'm working on a Django project.

I think there is some problem with the use of 'services' word in the django project. Please see if you can find some corrections required in the project.

The project name is Hello. There is one additional app 'home'.

When I navigate to the index, contact, or about page, all of them are working (loading) as expected.

I'm using following list item (in base.html) to navigate to the 'services' page:

<li><a class="dropdown-item" href="/services">Ice Cream</a></li>

But services page is not loading. If I change 'services' to 'service' everywhere, then it works as usual. It's giving the following error:

Following are some of the file contents:

Hello->urls.py

from django.contrib import admin
from django.urls import path, include

admin.site.site_header = "Harry Ice Cream Admin"
admin.site.site_title = "Harry Ice Cream Admin Portal"
admin.site.index_title = "Welcome to Harry Ice Creams!"

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('home.urls')),
]

home->urls.py

from django.contrib import admin
from django.urls import path
from home import views

urlpatterns = [
    path('', views.index, name='home'),
    path('about', views.about, name='about'),
    path('services', views.services, name='services'),
    path('contact', views.contact, name='contact'),
]

home->views.py

from django.shortcuts import render, HttpResponse

# Create your views here.
def index(request):
    context = {
    }
    return render(request, 'index.html',context)
    #return HttpResponse("This is homepage")

def about(request):
    context = {
    }
    return render(request, 'about.html',context)

def services(request):
    context = {
    }
    return render(request, 'services.html',context)

def contact(request):
    context = {
    }
    return render(request, 'contact.html',context)

templates->index.html

{% extends 'base.html' %}

{% block title %} Home {% endblock title %}

{% block body %}
This is body content of index page.
{% endblock body %}

templates->about.html

{% extends 'base.html' %}

{% block title %} About {% endblock title %}

{% block body %}
This is body content of about page.
{% endblock body %}

templates->services.html

{% extends 'base.html' %}

{% block title %} About {% endblock title %}

{% block body %}
This is body content of services page.
{% endblock body %}

templates->contact.html

{% extends 'base.html' %}

{% block title %} About {% endblock title %}

{% block body %}
This is body content of contactpage.
{% endblock body %}

templates->base.html

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

    <title>{% block title %} {% endblock title %} | Harry IceCreams</title>
  </head>
  <body>
    <!--nav class="navbar navbar-expand-lg navbar-light bg-light"-->
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <div class="container-fluid">
          <a class="navbar-brand" href="#">Harry Ice Creams</a>
          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
          <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav me-auto mb-2 mb-lg-0">
              <li class="nav-item">
                <a class="nav-link active" aria-current="page" href="/">Home</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="/about">About Us</a>
              </li>
              <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="/services" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                  Services
                </a>
                <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                  <li><a class="dropdown-item" href="/services">Ice Cream</a></li>
                  <li><a class="dropdown-item" href="#">Softy</a></li>
                  <li><hr class="dropdown-divider"></li>
                  <li><a class="dropdown-item" href="#">Family Pack</a></li>
                </ul>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="/contact">Contact Us</a>
              </li>

            </ul>
            <form class="d-flex">
              <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
              <button class="btn btn-outline-success" type="submit">Search</button>
            </form>
          </div>
        </div>
    </nav>

    {% block body %} {% endblock body%}
    
    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
    -->
  </body>
</html>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source

'Django framework: unable to load 'services' page

Sources

Related Questions