Scribd
Upload
11 views3 pages

Day 8 Tamplate Inheritance Home, About, Contact

Uploaded by

Akanksha Patil
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
11 views3 pages

Day 8 Tamplate Inheritance Home, About, Contact

Uploaded by

Akanksha Patil
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 3

Template inheritance: home.html, about.html, and contact.html.

Django project with a simple template inheritance setup for home.html, about.html, and contact.html.

Step-by-Step Guide

1. Create a Django Project: First, create a new Django project. Open your terminal and run:

django-admin startproject myproject


cd myproject

2. Create a Django App: Inside your project directory, create a new Django app:

python manage.py startapp myapp

3. Configure Installed Apps: Add your new app to the INSTALLED_APPS list in myproject/settings.py:

INSTALLED_APPS = [
...
'myapp',
]

4. Set Up Templates Directory: In myproject/settings.py, set up the templates directory:

TEMPLATES = [
{
...
'DIRS': [BASE_DIR / 'templates'],
...
},
]

5. Create Templates Structure: Create the directory structure for your templates:

mkdir -p templates/base
mkdir -p templates/myapp

6. Create Base Template: Create a base template file base.html inside the templates/base/ directory:

<!-- templates/base/base.html -->


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{% block title %}My Website{% endblock %}</title>
</head>
<body>
<header>
<nav>
<ul>
<li><a href="{% url 'home' %}">Home</a></li>
<li><a href="{% url 'about' %}">About</a></li>
<li><a href="{% url 'contact' %}">Contact</a></li>
</ul>
</nav>
</header>
<main>
{% block content %}{% endblock %}
</main>
<footer>
<p>&copy; 2024 My Website</p>
</footer>
</body>
</html>

7. Create Home Template: Create the home.html template in templates/myapp/ directory:

<!-- templates/myapp/home.html -->


{% extends 'base/base.html' %}

{% block title %}Home - My Website{% endblock %}

{% block content %}
<h1>Welcome to the Home Page</h1>
<p>This is the home page of the website.</p>
{% endblock %}

8. Create About Template: Create the about.html template in templates/myapp/ directory:

<!-- templates/myapp/about.html -->


{% extends 'base/base.html' %}

{% block title %}About - My Website{% endblock %}

{% block content %}
<h1>About Us</h1>
<p>This is the about page of the website.</p>
{% endblock %}

9. Create Contact Template: Create the contact.html template in templates/myapp/ directory:

<!-- templates/myapp/contact.html -->


{% extends 'base/base.html' %}

{% block title %}Contact - My Website{% endblock %}

{% block content %}
<h1>Contact Us</h1>
<p>This is the contact page of the website.</p>
{% endblock %}

10. Set Up URLs: Configure the URLs for your views. In myproject/urls.py, include your app’s URLs:

from django.contrib import admin


from django.urls import path, include

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

11. Create URL Config for the App: In myapp/urls.py, create URL patterns for your views:

from django.urls import path


from . import views

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

12. Create Views: In myapp/views.py, create views for each template:

from django.shortcuts import render

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

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

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

13. Run the Server: Finally, run the development server:

python manage.py runserver

Visit http://127.0.0.1:8000/ in your browser to see the home page. You can navigate to
http://127.0.0.1:8000/about/ and http://127.0.0.1:8000/contact/ to see the about and contact pages,
respectively.

You might also like