WEEK 9 – THURSDAY (CONTINUATION)
Learning Objectives
At the end of this lesson, students should be able to:
Create a Django view.
Create an HTML template.
Create navigation buttons.
Connect URLs to views.
Display a webpage in the browser.
STEP 1: Create a Templates Folder
What we are doing
We need a place to store our HTML pages. Django looks for HTML files inside a folder called templates.
Inside your students app, create this folder:
students/
│── templates/
Inside templates, create a file named:
home.html
STEP 2: Create the Home Page
What we are doing
We are designing the first page users will see when they open the website.
Open:
students/templates/home.html
Paste:
<!DOCTYPE html>
<html>
<head>
<title>Student Management System</title>
</head>
<body>
<h1>Welcome to Student Management System</h1>
<a href="/">
<button>Home</button>
</a>
<a href="/register/">
<button>Register</button>
</a>
</body>
</html>
Explanation
<!DOCTYPE html>– Tells the browser this is an HTML5 document.<html>– Starts the webpage.<head>– Contains information about the page.<title>– The title shown on the browser tab.<body>– Everything the user sees.<h1>– A large heading.<a>– Creates a hyperlink.href="/"– Links to the Home page.<button>– Creates a clickable button.
STEP 3: Create the Home View
What we are doing
A view decides what Django should display when a user visits a page.
Open:
students/views.py
Replace the previous code with:
from django.shortcuts import render
def home(request):
return render(request, "home.html")
Explanation
render– Displays an HTML page.home– Function that handles the Home page.request– Information sent by the browser."home.html"– The HTML page to display.
STEP 4: Create the Register View
What we are doing
We are creating another page called Register.
Add this below the home view:
def register(request):
return render(request, "register.html")
This tells Django to display register.html when the Register page is requested.
STEP 5: Create the Register Page
Inside the templates folder, create:
register.html
Paste:
<!DOCTYPE html>
<html>
<head>
<title>Register Student</title>
</head>
<body>
<h1>Student Registration Page</h1>
<a href="/">
<button>Home</button>
</a>
<a href="/register/">
<button>Register</button>
</a>
<p>This page will contain the student registration form later.</p>
</body>
</html>
STEP 6: Create URL Patterns
What we are doing
URLs tell Django which view to run when a user visits a particular web address.
Open:
students/urls.py
Replace it with:
from django.urls import path
from . import views
urlpatterns = [
path("", views.home, name="home"),
path("register/", views.register, name="register"),
]
Explanation
path()– Creates a URL.""– The Home page (/)."register/"– The Register page (/register/).views.home– Calls thehomeview.views.register– Calls theregisterview.name– Gives the URL a name that can be used elsewhere in Django.
STEP 7: Run the Server
What we are doing
We are starting Django so we can test the website.
Run:
python manage.py runserver
Open:
http://127.0.0.1:8000/
You should see:
Welcome to Student Management System
Home button
Register button
When you click Register, it should open:
http://127.0.0.1:8000/register/
and display the Student Registration Page.
Expected Result
The website will have two simple pages:
Home Page
------------------------------------
Welcome to Student Management System
[ Home ] [ Register ]
------------------------------------
Register Page
------------------------------------
Student Registration Page
[ Home ] [ Register ]
This page will contain the student
registration form later.
------------------------------------
This is a good foundation because in the next lesson you can replace the placeholder text on the Register page with a real HTML form that saves student information into your MySQL database.
0 comments:
Post a Comment