017-Django Main Index Page

Objectives: Django Main Index Page

Django Main Index Page

Django Main Index Page

1. Create the Main Template

Create main.html in the templates folder:

{% raw %}{% extends "master.html" %}{% endraw %} {% raw %}{% block title %}{% endraw %} My Tennis Club {% raw %}{% endblock %}{% endraw %} {% raw %}{% block content %}{% endraw %}

My Tennis Club

Members

Check out all our members

{% raw %}{% endblock %}{% endraw %}

Tip:

This template will be displayed when someone visits the root URL (127.0.0.1:8000/).

2. Add Main View

Add a view called main in views.py to handle requests to the root URL:

from django.http import HttpResponse
from django.template import loader
from .models import Member

def main(request):
  template = loader.get_template('main.html')
  return HttpResponse(template.render())

The main view loads the main.html template and renders it for the user.

3. Add URL for Main Page

Update urls.py to include the main view:

from django.urls import path
from . import views

urlpatterns = [
  path('', views.main, name='main'),
  path('members/', views.members, name='members'),
  path('members/details/', views.details, name='details'),
]

4. Add Link Back to Main Page

In all_members.html, add a link back to the main page inside the content block:

{% raw %}{% block content %}{% endraw %}

HOME

Members

{% raw %}{% endblock %}{% endraw %}

Example:

Visiting 127.0.0.1:8000/ now shows the main index page with a link to all members. The members page also has a link back to the main page for easy navigation.

5. Start the Server

Run the Django development server:

python manage.py runserver

Open 127.0.0.1:8000/ in your browser to see the main index page.

Advice:

  • Always create a main landing page for better user navigation.
  • Keep links consistent between pages for smooth navigation.
  • Use the master template to maintain consistent layout across pages.

Reference Book: N/A

Author name: SIR H.A.Mwala Work email: biasharaboraofficials@gmail.com
#MWALA_LEARN Powered by MwalaJS #https://mwalajs.biasharabora.com
#https://educenter.biasharabora.com

:: 1::

⬅ ➡