Django

Create Base Template in Django

updated on Leave a Comment on Create Base Template in Django

📌 Introduction

In Django, instead of repeating HTML on every page, we use a base template.

👉 Benefits:

  • Reusable layout
  • Cleaner code
  • Easy maintenance

We will create:

  • Header
  • Navigation menu
  • Footer
  • Extend it in other pages

🎯 Program Statement

👉 Create a base template layout containing header, footer, and navigation.

⚙️ Step 1: Create Project and App

django-admin startproject myproject
cd myproject
python manage.py startapp myapp

⚙️ Step 2: Register App

📁 File: settings.py

Path:

myproject/myproject/settings.py

Code:

INSTALLED_APPS = [
    ...
    'myapp',
]

⚙️ Step 3: Configure Templates

📁 File: settings.py

Path:

myproject/myproject/settings.py

Code:

import os

TEMPLATES = [
    {
        'DIRS': [os.path.join(BASE_DIR, 'templates')],
        'APP_DIRS': True,
    },
]

⚙️ Step 4: Create Base Template

📁 File: base.html

🔹 Path:

myproject/templates/base.html

🔹 Code:

<!DOCTYPE html>
<html>
<head>
    <title>Django Website</title>
</head>
<body>

    <!-- Header -->
    <header>
        <h1>My Django Website</h1>
    </header>

    <!-- Navigation -->
    <nav>
        <a href="/">Home</a> |
        <a href="/about/">About</a> |
        <a href="/contact/">Contact</a>
    </nav>

    <hr>

    <!-- Dynamic Content Block -->
    {% block content %}
    {% endblock %}

    <hr>

    <!-- Footer -->
    <footer>
        <p>© 2026 My Website | All Rights Reserved</p>
    </footer>

</body>
</html>

🧠 Explanation

  • {% block content %} → placeholder
  • Child templates will replace this part
  • Header + Footer remain same

⚙️ Step 5: Create Views

📁 File: views.py

🔹 Path:

myproject/myapp/views.py

🔹 Code:

from django.shortcuts import render

def home(request):
    return render(request, 'home.html')

def about(request):
    return render(request, 'about.html')

def contact(request):
    return render(request, 'contact.html')

⚙️ Step 6: URL Mapping

📁 File: urls.py

🔹 Path:

myproject/myproject/urls.py

🔹 Code:

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

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

    path('', views.home),
    path('about/', views.about),
    path('contact/', views.contact),
]

⚙️ Step 7: Create Child Templates

📁 File: home.html

🔹 Path:

myproject/templates/home.html

🔹 Code:

{% extends 'base.html' %}

{% block content %}
<h2>Home Page</h2>
<p>Welcome to the homepage.</p>
{% endblock %}

📁 File: about.html

🔹 Path:

myproject/templates/about.html

🔹 Code:

{% extends 'base.html' %}

{% block content %}
<h2>About Page</h2>
<p>This is the about page.</p>
{% endblock %}

📁 File: contact.html

🔹 Path:

myproject/templates/contact.html

🔹 Code:

{% extends 'base.html' %}

{% block content %}
<h2>Contact Page</h2>
<p>Email: example@gmail.com</p>
{% endblock %}

⚙️ Step 8: Run Server

python manage.py runserver

🌐 Step 9: Output

👉 Home:

http://127.0.0.1:8000/

👉 About:

http://127.0.0.1:8000/about/

👉 Contact:

http://127.0.0.1:8000/contact/

✅ Output Structure:

  • Header
  • Navigation
  • Page Content (changes)
  • Footer

🧠 How It Works

  1. Base template defines layout
  2. Child templates extend it
  3. Content inserted using block
  4. Layout reused across pages

⚠️ Common Errors

❌ Missing {% extends %}

👉 Always write at top:

{% extends 'base.html' %}

❌ Block not defined

👉 Must match:

{% block content %}

❌ Wrong template name

👉 Check:

'base.html'

🧪 Practice Questions

  1. Add sidebar in base template
  2. Add CSS styling
  3. Highlight active menu
  4. Add login/logout links

🎤 Viva Questions & Answers

1. What is template inheritance in Django?

Template inheritance allows reuse of common layout using a base template. Child templates extend it and override specific parts.

2. What is {% block %}?

It defines a section that can be replaced by child templates. It acts as a placeholder.

3. What is {% extends %}?

It tells Django that a template inherits from another template. It must be written at the top.

4. Why use base template?

It avoids code repetition and ensures consistency across pages. It simplifies maintenance.

5. Can we have multiple blocks?

Yes, multiple blocks like header, footer, sidebar can be defined. Each can be overridden separately.

6. What happens if block is not defined?

Content will not be inserted and may not display. Blocks must match exactly.

7. Can we nest templates?

Yes, templates can extend other templates in multiple levels.

8. What is reusable layout?

A layout used across multiple pages without rewriting code. Base template provides this.

9. Where is base template stored?

It is stored in the templates folder, usually at project level.

10. Why is template inheritance important?

It is essential for building scalable and maintainable web applications.

🔗 Navigation

👉 Next Post: Template Inheritance with Multiple Blocks
👉 Back to List: Django Programs (60 Questions with Solutions)

Further Reading

Introduction to Django Framework and its Features

Django Practice Exercise

Examples of Array Functions in PHP

Basic Programs in PHP

Registration Form Using PDO in PHP

Inserting Information from Multiple CheckBox Selection in a Database Table in PHP

programmingempire

princites.com

You may also like...
Django

Design a Responsive Navbar and Footer using Static CSS
Django

Create a POST Form to Add Two Numbers and Display the Result
Django

Create a GET Form to Accept User Name and Display Greeting

Leave a Reply

Your email address will not be published. Required fields are marked *