Project: Student Registration System

Frontend: HTML, CSS, JavaScript/jQuery

Backend: Python (Django Framework)

Project Overview:

The Student Registration System is a dynamic, web-based application designed to allow

students to register for courses, update personal details, delete records, and view a list of all
registered students. The application emphasizes a smooth, interactive user experience, with all
actions handled via AJAX to prevent page reloads.

This system is targeted at students who have completed their 10th class and are looking to join
an intermediate college.

Features:

1. User Interface:
○ Developed using HTML and CSS for a clean, responsive layout.
○ JavaScript/jQuery for form validation, event handling, and dynamic content
updates.
○ AJAX is used to load and submit data, ensuring that all interactions, such as
form submissions and updates, occur without reloading the page.
2. Core Functionalities:
○ Registration Form: Students can input their personal, academic, and contact
details.
○ Edit Student Details: Enables students to modify existing data.
○ Delete Student Records: Allows students or admins to remove records with a
confirmation step.
○ View Registered Students: Displays a table with all registered students,
including search and filtering capabilities.

Key Components:

1. Website Tabs:
○ Home: A welcoming page providing an overview of the college.
○ Contact Us: A form where users can submit inquiries and messages.
○ About Us: Information about the college’s history, vision, and mission.
○ Careers: A section listing job opportunities with all relevant details.
○ Registration: The main page where students fill out the registration form.
2. Frontend Pages:
○ Home:
■ Content: Brief introductory content about the college.
■ CSS: A professionally designed landing page with an academic theme.
○ Contact Us:
■ Fields: Name, Email, Subject, Message (all submitted via AJAX).
○ About Us:
■ Static content describing the college’s background and values.
○ Careers:
■ Displays job listings dynamically.
■ Example content (displayed in the Careers tab via AJAX):
○
Junior Lecturer Job Opening
Location: Hyderabad (Madhapur)
Position: Junior Lecturer (All Subjects)
Years of Experience: 2 years
Qualification: M.Sc. with specialization
Teaching Experience: Required

○ Key Requirements:
■ Teaching Experience: 1 year (Preferred)
■ Lecturer Experience: 1 year (Preferred)
■ Qualification: Master’s Degree (M.Sc.)
○ Job Details:
■ Type: Full-time, Permanent
■ Pay Range: ₹8,407.59 - ₹35,000.00 per month
■ Schedule: Day shift
■ Note: Only candidates with an M.Sc. and teaching experience should
apply.
■ Contact: 9966723725
■ Work Location: In person (Nagole, Hyderabad)
○ Registration Form:
■ The student registration form includes fields for personal, academic, and
contact details (see below).
■ AJAX-based submission to ensure smooth interaction without page
reloads.
Registration Form Fields:

1. Name
○ Type: Text Input
○ Validation: Required, max length 100 characters.
2. Roll Number
○ Type: Number Input
○ Validation: Required, unique.
3. Email
○ Type: Email Input
○ Validation: Required, must follow valid email format.
4. Course
○ Type: Dropdown (Select Input)
○ Options: C.E.C, M.P.C, Bi.P.C, M.E.C
○ Validation: Required.
5. Date of Birth
○ Type: Date Input
○ Validation: Required.
6. Father’s Name
○ Type: Text Input
○ Validation: Required, max length 100 characters.
7. Mother’s Name
○ Type: Text Input
○ Validation: Required, max length 100 characters.
8. Gender
○ Type: Radio Buttons
○ Options: Male, Female, Other
○ Validation: Required.
9. Phone Number
○ Type: Text Input
○ Validation: Required, must be exactly 10 digits.
10. Hobbies
○ Type: Checkboxes
○ Options: Reading, Sports, Music, Dancing, Other
○ Validation: Optional.
11. Percentage of Marks in 10th Class
○ Type: Number Input
○ Validation: Required, must be between 0 and 100.
12. Coaching
○ Type: Dropdown (Select Input)
○ Options: AP CET, IIT, AIEEE
○ Validation: Required.
 13. Hostel or Day Scholar
○ Type: Dropdown (Select Input)
○ Options: Day Scholar, Hostel
○ Validation: Required.
14. Address
○ Type: Text Area
○ Validation: Required, max length 250 characters.
15. About Yourself
○ Type: Text Area
○ Validation: max length 500 characters.
16. Photo Upload
○ Type: File Input
○ Validation: Required, must be an image file (e.g., jpg, png).

Backend (Django) Integration with AJAX:

● Register a Student: Form data is submitted via AJAX to the Django backend, which
processes and stores the information.
● Edit Student Details: The existing student data is fetched via AJAX, displayed in the
form, and updated via another AJAX request.
● Delete Student Records: A confirmation step is presented, and upon approval, the
record is deleted via AJAX.
● View Registered Students: All student records are displayed in a table, dynamically
populated via AJAX calls.

AJAX Functionality:

● All core interactions, including form submission, data updates, deletion, and data
retrieval, are handled using AJAX to provide a seamless, uninterrupted user experience
without reloading the page.

CSS Styling:

● Clean and minimalistic design.

● Responsive layout to ensure compatibility with both desktop and mobile devices.
● Smooth tab navigation and transitions for a polished look and feel.
This project is an end-to-end registration and management system, providing a comprehensive
and seamless experience for both users and admins.

Student List Display Page:

This page presents a clear, concise view of all registered students. Each student's key details
are displayed in a table format, with options for editing and deleting their information.

Columns Displayed:

1. Student Name:
○ Displays the full name of the student.
2. Course:
○ Shows the selected course (e.g., C.E.C, M.P.C, Bi.P.C, M.E.C) in which the
student has enrolled.
3. Percentage of Marks in 10th Class:
○ Displays the student's academic score (as a percentage) achieved in the 10th
class.
4. Registration Number:
○ Shows the unique roll number assigned to each student for easy identification.
5. Actions:
○ Edit: A button that allows the user to edit the student's details. Clicking this
triggers an AJAX request to fetch the student's current data and populate the
form for editing without reloading the page.
○ Delete: A button that allows the user to delete the student's record. Before
deletion, a confirmation prompt will be shown. Upon confirmation, the record will
be deleted via an AJAX call to avoid page reloads.

Additional Features:

● Table Search/Filter:
○ An input field is provided to allow users to search or filter students based on the
displayed columns (e.g., by name, course, or registration number).
● AJAX Functionality:
○ All edit and delete actions will happen asynchronously via AJAX, ensuring a
smooth, uninterrupted user experience without page refreshes
Example: Student display page: