WEEK 10 – TUESDAY
TOPIC: Creating a Student Registration Form and Saving Data to MySQL
Learning Objectives
At the end of this lesson, students should be able to:
Create an HTML form.
Understand the
<form>tag and form fields.Submit data from a webpage.
Save student information into the MySQL database using Django.
Verify that the data has been saved.
What We Are Doing
In the previous lesson, we created a Home page and a Register page.
The Register page only displayed text.
Today, we will make it functional by creating a form that allows users to enter:
Full Name
Email
Course
When the user clicks Register, the information will be saved into the students_student table in MySQL.
STEP 1: Open register.html
Open:
students/templates/register.html
What We Are Doing
We are replacing the placeholder text with a real registration form.
Replace the content with:
<!DOCTYPE html>
<html>
<head>
<title>Student Registration</title>
</head>
<body>
<h1>Student Registration Form</h1>
<a href="/">
<button>Home</button>
</a>
<hr>
<form method="POST">
{% csrf_token %}
<label>Full Name</label><br>
<input type="text" name="full_name"><br><br>
<label>Email</label><br>
<input type="email" name="email"><br><br>
<label>Course</label><br>
<input type="text" name="course"><br><br>
<button type="submit">
Register Student
</button>
</form>
</body>
</html>
Explanation of the Code
<form method="POST">
What We Are Doing
We are creating a form that sends data to Django.
| Code | Meaning |
|---|---|
<form> | Starts a form |
method="POST" | Sends data securely to the server |
{% csrf_token %}
What We Are Doing
We are protecting the form against unauthorized requests.
| Code | Meaning |
|---|---|
{% %} | Django template tags |
csrf_token | Security token required for POST forms |
Without this line, Django will reject the form submission.
Full Name Field
<input type="text" name="full_name">
What We Are Doing
Creating a textbox for the student's full name.
| Code | Meaning |
|---|---|
input | Creates an input field |
type="text" | Accepts text |
name="full_name" | Field name sent to Django |
Email Field
<input type="email" name="email">
What We Are Doing
Creating an email input field.
The browser checks that the value looks like an email address.
Course Field
<input type="text" name="course">
What We Are Doing
Creating a textbox for the student's course.
Submit Button
<button type="submit">
Register Student
</button>
What We Are Doing
Creating a button that submits the form.
STEP 2: Open views.py
Open:
students/views.py
What We Are Doing
We are telling Django:
"When someone submits the form, save the information into the database."
Replace the register() function with:
from django.shortcuts import render, redirect
from .models import Student
def register(request):
if request.method == "POST":
full_name = request.POST["full_name"]
email = request.POST["email"]
course = request.POST["course"]
Student.objects.create(
full_name=full_name,
email=email,
course=course
)
return redirect("/")
return render(request, "register.html")
Explanation of the Code
Import
from django.shortcuts import render, redirect
What We Are Doing
Importing two tools.
| Code | Meaning |
|---|---|
render | Displays an HTML page |
redirect | Sends the user to another page |
from .models import Student
What We Are Doing
Importing the Student model so we can save data.
Check Request Method
if request.method == "POST":
What We Are Doing
Checking whether the user clicked the Register Student button.
If yes, continue.
Get Form Data
full_name = request.POST["full_name"]
What We Are Doing
Getting the value entered into the Full Name textbox.
The same happens for:
email = request.POST["email"]
course = request.POST["course"]
Save to Database
Student.objects.create(
full_name=full_name,
email=email,
course=course
)
What We Are Doing
Creating a new student record in the MySQL table.
| Code | Meaning |
|---|---|
Student | Our model |
objects | Django's manager for database operations |
create() | Insert a new row into the table |
Redirect
return redirect("/")
What We Are Doing
After saving the record, send the user back to the Home page.
STEP 3: Run the Server
python manage.py runserver
Open:
http://127.0.0.1:8000/register/
Fill in the form:
Full Name: Aisha Bello
Email: aisha@gmail.com
Course: Web Development
Click Register Student.
The data will be saved into the students_student table.
STEP 4: Verify the Data
Open MySQL Workbench.
Select the database:
USE student_portal;
View all students:
SELECT * FROM students_student;
What We Are Doing
We are asking MySQL to display every record stored in the students_student table.
If everything worked correctly, you'll see the student details you entered.
Practical Exercise
Register five students using the form.
Use
SELECT * FROM students_student;to confirm they were saved.Check the data again in the Django Admin panel (
/admin/) and compare it with the records shown in MySQL Workbench.
This completes a full cycle: the user enters data on a webpage, Django processes it, and MySQL stores it permanently.
0 comments:
Post a Comment