Lab Manual: Designing a Basic Web Application with Menu Items using
Django
Program Title:
Design a Web Application with Different Menu Items Using Django (Basic Level)
Objective:
To design a simple Django web application with a basic navigation menu to switch between
different pages.
Software Requirements:
- Python (preferably 3.8 or above)
- Django (preferably 4.0 or above)
- Web Browser
Steps to Execute:
Step 1: Install Django and Set up Project
# Install Django
pip install django
# Create Django Project
django-admin startproject mywebsite
# Move into Project Directory
cd mywebsite
# Create Django App
python manage.py startapp myapp
Step 2: Register the App
Open mywebsite/settings.py and add "myapp" to INSTALLED_APPS.
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'myapp',
]
Step 3: Create Views
In myapp/views.py file, create three views:
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 4: Configure URLs
In mywebsite/urls.py file:
from django.contrib import admin
from django.urls import path
from myapp import views
urlpatterns = [
path('admin/', admin.site.urls),
path('', views.home, name='home'),
path('about/', views.about, name='about'),
path('contact/', views.contact, name='contact'),
]
Step 5: Create Templates
Inside myapp folder, create a folder named templates. Inside it, create three files:
home.html
<!DOCTYPE html>
<html>
<head>
<title>Home Page</title>
</head>
<body>
<h1>Welcome to My Website</h1>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/about/">About</a></li>
<li><a href="/contact/">Contact</a></li>
</ul>
<p>This is the Home Page.</p>
</body>
</html>
about.html
<!DOCTYPE html>
<html>
<head>
<title>About Page</title>
</head>
<body>
<h1>About Us</h1>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/about/">About</a></li>
<li><a href="/contact/">Contact</a></li>
</ul>
<p>This is the About Page.</p>
</body>
</html>
contact.html
<!DOCTYPE html>
<html>
<head>
<title>Contact Page</title>
</head>
<body>
<h1>Contact Us</h1>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/about/">About</a></li>
<li><a href="/contact/">Contact</a></li>
</ul>
<p>This is the Contact Page.</p>
</body>
</html>
Step 6: Run the Server
python manage.py runserver
Step 7: Test the Application
Open the browser and navigate to: http://127.0.0.1:8000/
- Home page will be displayed.
- Click on "About" or "Contact" to navigate to those pages.
Result:
The basic Django web application with different menu items was successfully created and
tested.
Conclusion:
Students learned how to create a Django project, design basic navigation, and link multiple
pages in a web application.
