MACRO NEPAL
Student Management System IN HTML CSS AND JAVA SCRIPT, PHP AND MY SQL
awiskar acharya
February 19, 2026
6:52 am

Introduction to the Student Management System Project

The Student Management System (SMS) is a web-based application designed to streamline the management of student records in an educational institution. It provides a secure and user-friendly interface for administrators to perform CRUD (Create, Read, Update, Delete) operations on student data, while allowing students (clients) to log in and view their personal information. Built with HTML, CSS, and JavaScript for the frontend to ensure a responsive and interactive user experience, PHP for backend logic to handle server-side operations, and MySQL as the database for storing persistent data, this project is ideal for small-scale educational setups or as a learning tool for web development enthusiasts.

The system emphasizes simplicity, security (basic authentication), and efficiency. It includes role-based access: admins have full control over student records, while students can only access their own details. This project demonstrates key web development concepts like form handling, database interactions, session management, and basic frontend validation.

File Structure and File Names

Here's the recommended file structure for the project. Place all files in a root folder named student-management-system.

student-management-system/
├── index.html          # Login page (frontend)
├── admin_dashboard.html # Admin dashboard page (frontend)
├── student_dashboard.html # Student dashboard page (frontend)
├── styles.css          # CSS stylesheet for all pages
├── script.js           # JavaScript for frontend validation and interactions
├── config.php          # Database connection configuration
├── login.php           # Backend script for handling login
├── logout.php          # Backend script for logout
├── add_student.php     # Backend script for adding a new student (admin only)
├── view_students.php   # Backend script to fetch and display all students (admin only)
├── edit_student.php    # Backend script for editing a student (admin only)
├── delete_student.php  # Backend script for deleting a student (admin only)
├── view_profile.php    # Backend script for students to view their own profile
└── README.md           # Optional: Project documentation (not coded here)

Code for Each File

Below is the complete code for each file. Ensure you have a local server like XAMPP or WAMP installed to run PHP and MySQL. Create a MySQL database named sms_db with two tables:

  • users table (for authentication):
  CREATE TABLE users (
id INT AUTO_INCREMENT PRIMARY KEY,
username VARCHAR(50) NOT NULL,
password VARCHAR(255) NOT NULL,  -- Store hashed passwords
role ENUM('admin', 'student') NOT NULL,
student_id INT NULL  -- Links to students table for students
);
  • students table:
  CREATE TABLE students (
id INT AUTO_INCREMENT PRIMARY KEY,
name VARCHAR(100) NOT NULL,
email VARCHAR(100) NOT NULL,
age INT NOT NULL,
course VARCHAR(100) NOT NULL
);

Insert sample data:

  • Admin: username='admin', password=SHA1('admin123') (or use password_hash in PHP), role='admin'
  • Student: username='student1', password=SHA1('pass123'), role='student', student_id=1 (link to a student record)

index.html (Login Page)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Student Management System - Login</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<h1>Login to SMS</h1>
<form id="loginForm" action="login.php" method="POST">
<label for="username">Username:</label>
<input type="text" id="username" name="username" required>
<label for="password">Password:</label>
<input type="password" id="password" name="password" required>
<button type="submit">Login</button>
</form>
<p id="error" class="error"></p>
</div>
<script src="script.js"></script>
</body>
</html>

admin_dashboard.html (Admin Dashboard)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Admin Dashboard</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<h1>Admin Dashboard</h1>
<a href="logout.php">Logout</a>
<h2>Add New Student</h2>
<form action="add_student.php" method="POST">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<label for="age">Age:</label>
<input type="number" id="age" name="age" required>
<label for="course">Course:</label>
<input type="text" id="course" name="course" required>
<button type="submit">Add Student</button>
</form>
<h2>Student List</h2>
<?php include 'view_students.php'; ?>
</div>
<script src="script.js"></script>
</body>
</html>

student_dashboard.html (Student Dashboard)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Student Dashboard</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<h1>Student Dashboard</h1>
<a href="logout.php">Logout</a>
<h2>Your Profile</h2>
<?php include 'view_profile.php'; ?>
</div>
</body>
</html>

styles.css (CSS Stylesheet)

body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 0;
}
.container {
max-width: 800px;
margin: 50px auto;
padding: 20px;
background: white;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
border-radius: 8px;
}
h1, h2 {
text-align: center;
}
form {
display: flex;
flex-direction: column;
}
label {
margin-top: 10px;
}
input, button {
padding: 10px;
margin-top: 5px;
border: 1px solid #ccc;
border-radius: 4px;
}
button {
background-color: #4CAF50;
color: white;
cursor: pointer;
margin-top: 20px;
}
button:hover {
background-color: #45a049;
}
.error {
color: red;
text-align: center;
}
table {
width: 100%;
border-collapse: collapse;
margin-top: 20px;
}
th, td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}
th {
background-color: #f2f2f2;
}
a {
color: #007BFF;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}

script.js (JavaScript for Frontend)

document.addEventListener('DOMContentLoaded', function() {
const loginForm = document.getElementById('loginForm');
if (loginForm) {
loginForm.addEventListener('submit', function(e) {
const username = document.getElementById('username').value;
const password = document.getElementById('password').value;
if (username === '' || password === '') {
e.preventDefault();
document.getElementById('error').textContent = 'Please fill in all fields.';
}
});
}
});
// Additional JS can be added for dynamic features like AJAX form submission if needed

config.php (Database Connection)

<?php
$servername = "localhost";
$username = "root";  // Default XAMPP/WAMP username
$password = "";      // Default password (empty)
$dbname = "sms_db";
// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
?>

login.php (Login Handler)

<?php
session_start();
include 'config.php';
if ($_SERVER["REQUEST_METHOD"] == "POST") {
$username = mysqli_real_escape_string($conn, $_POST['username']);
$password = sha1($_POST['password']);  // Use password_verify for production
$sql = "SELECT * FROM users WHERE username='$username' AND password='$password'";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
$row = $result->fetch_assoc();
$_SESSION['user_id'] = $row['id'];
$_SESSION['role'] = $row['role'];
$_SESSION['student_id'] = $row['student_id'];
if ($row['role'] == 'admin') {
header("Location: admin_dashboard.html");
} else {
header("Location: student_dashboard.html");
}
} else {
header("Location: index.html?error=Invalid credentials");
}
}
$conn->close();
?>

logout.php (Logout Handler)

<?php
session_start();
session_destroy();
header("Location: index.html");
?>

add_student.php (Add Student - Admin Only)

<?php
session_start();
if (!isset($_SESSION['role']) || $_SESSION['role'] != 'admin') {
header("Location: index.html");
exit();
}
include 'config.php';
if ($_SERVER["REQUEST_METHOD"] == "POST") {
$name = mysqli_real_escape_string($conn, $_POST['name']);
$email = mysqli_real_escape_string($conn, $_POST['email']);
$age = intval($_POST['age']);
$course = mysqli_real_escape_string($conn, $_POST['course']);
$sql = "INSERT INTO students (name, email, age, course) VALUES ('$name', '$email', $age, '$course')";
if ($conn->query($sql) === TRUE) {
// Optionally create a user account for the student
header("Location: admin_dashboard.html?success=Student added");
} else {
header("Location: admin_dashboard.html?error=" . $conn->error);
}
}
$conn->close();
?>

view_students.php (View All Students - Admin Only)

<?php
session_start();
if (!isset($_SESSION['role']) || $_SESSION['role'] != 'admin') {
exit();
}
include 'config.php';
$sql = "SELECT * FROM students";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
echo "<table><tr><th>ID</th><th>Name</th><th>Email</th><th>Age</th><th>Course</th><th>Actions</th></tr>";
while($row = $result->fetch_assoc()) {
echo "<tr><td>" . $row["id"]. "</td><td>" . $row["name"]. "</td><td>" . $row["email"]. "</td><td>" . $row["age"]. "</td><td>" . $row["course"]. "</td>";
echo "<td><a href='edit_student.php?id=" . $row["id"] . "'>Edit</a> | <a href='delete_student.php?id=" . $row["id"] . "' onclick='return confirm(\"Are you sure?\")'>Delete</a></td></tr>";
}
echo "</table>";
} else {
echo "No students found.";
}
$conn->close();
?>

edit_student.php (Edit Student - Admin Only)

<?php
session_start();
if (!isset($_SESSION['role']) || $_SESSION['role'] != 'admin') {
header("Location: index.html");
exit();
}
include 'config.php';
if ($_SERVER["REQUEST_METHOD"] == "POST") {
$id = intval($_POST['id']);
$name = mysqli_real_escape_string($conn, $_POST['name']);
$email = mysqli_real_escape_string($conn, $_POST['email']);
$age = intval($_POST['age']);
$course = mysqli_real_escape_string($conn, $_POST['course']);
$sql = "UPDATE students SET name='$name', email='$email', age=$age, course='$course' WHERE id=$id";
if ($conn->query($sql) === TRUE) {
header("Location: admin_dashboard.html?success=Student updated");
} else {
header("Location: admin_dashboard.html?error=" . $conn->error);
}
} else {
$id = intval($_GET['id']);
$sql = "SELECT * FROM students WHERE id=$id";
$result = $conn->query($sql);
$row = $result->fetch_assoc();
?>
<form action="edit_student.php" method="POST">
<input type="hidden" name="id" value="<?php echo $row['id']; ?>">
<label for="name">Name:</label>
<input type="text" name="name" value="<?php echo $row['name']; ?>" required>
<label for="email">Email:</label>
<input type="email" name="email" value="<?php echo $row['email']; ?>" required>
<label for="age">Age:</label>
<input type="number" name="age" value="<?php echo $row['age']; ?>" required>
<label for="course">Course:</label>
<input type="text" name="course" value="<?php echo $row['course']; ?>" required>
<button type="submit">Update Student</button>
</form>
<?php
}
$conn->close();
?>

delete_student.php (Delete Student - Admin Only)

<?php
session_start();
if (!isset($_SESSION['role']) || $_SESSION['role'] != 'admin') {
header("Location: index.html");
exit();
}
include 'config.php';
$id = intval($_GET['id']);
$sql = "DELETE FROM students WHERE id=$id";
if ($conn->query($sql) === TRUE) {
header("Location: admin_dashboard.html?success=Student deleted");
} else {
header("Location: admin_dashboard.html?error=" . $conn->error);
}
$conn->close();
?>

view_profile.php (View Profile - Student Only)

<?php
session_start();
if (!isset($_SESSION['role']) || $_SESSION['role'] != 'student' || !isset($_SESSION['student_id'])) {
header("Location: index.html");
exit();
}
include 'config.php';
$id = intval($_SESSION['student_id']);
$sql = "SELECT * FROM students WHERE id=$id";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
$row = $result->fetch_assoc();
echo "<p><strong>Name:</strong> " . $row['name'] . "</p>";
echo "<p><strong>Email:</strong> " . $row['email'] . "</p>";
echo "<p><strong>Age:</strong> " . $row['age'] . "</p>";
echo "<p><strong>Course:</strong> " . $row['course'] . "</p>";
} else {
echo "Profile not found.";
}
$conn->close();
?>

Features of the Project

Admin Side Features:

  • Login Authentication: Secure login with role-based redirection.
  • Add Student: Form to create new student records.
  • View Students: Display all students in a table with edit/delete options.
  • Edit Student: Update existing student details.
  • Delete Student: Remove student records with confirmation.
  • Logout: Secure session termination.

Client (Student) Side Features:

  • Login Authentication: Students log in to access their dashboard.
  • View Profile: Display personal details like name, email, age, and course.
  • Logout: End session securely.

The system uses sessions for authentication, preventing unauthorized access. Frontend validation ensures basic input checks, while backend escapes inputs to prevent SQL injection (note: use prepared statements for production).

Step-by-Step Guide to Use the Project

  1. Setup Environment:
  • Install XAMPP (or similar) and start Apache and MySQL services.
  • Create the database sms_db in phpMyAdmin and run the SQL queries above to create tables and insert sample data.
  1. Place Files:
  • Create a folder student-management-system in htdocs (XAMPP path: C:\xampp\htdocs).
  • Copy all files into this folder.
  1. Configure Database:
  • Edit config.php if your MySQL credentials differ (e.g., username/password).
  1. Run the Project:
  • Open a browser and go to http://localhost/student-management-system/index.html.
  • Login as admin (username: admin, password: admin123) to access admin dashboard.
  • Login as student (username: student1, password: pass123) to access student dashboard.
  1. Admin Usage:
  • Add a student via the form.
  • View the list, edit, or delete entries.
  1. Student Usage:
  • View your profile details.
  1. Testing and Enhancements:
  • Test forms and links.
  • For production, use password_hash/password_verify, prepared statements, and add more features like search or pagination.
  • Debug errors using browser console or PHP error logs.

This project is ready-to-run and can be expanded for more advanced features like email notifications or file uploads. If issues arise, check server logs or database connections.

Category : SOURCE CODE

Leave a Reply

Your email address will not be published. Required fields are marked *


Macro Nepal Helper