<!
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Student Information Management</title>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/
bootstrap.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- Custom CSS -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- Navbar -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">Student Management</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-
label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link active" aria-current="page"
href="#">Home</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Container for Student Table -->
<div class="container mt-5">
<div class="row">
<div class="col-lg-12">
<h2 class="text-center mb-4">Manage Student Information</h2>
<!-- Add Student Button -->
<div class="mb-3">
<button type="button" class="btn btn-primary" data-bs-
toggle="modal" data-bs-target="#addStudentModal">
Add Student
</button>
</div>
<!-- Student Table -->
<table id="table" class="table table-bordered">
<thead class="table-dark">
<tr>
<th>Name</th>
<th>Course</th>
<th>Year Level</th>
<th>Section</th>
<th>Number</th>
<th>Email</th>
<th>Action</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<script>
$(document).ready(function() {
// Fetch student data and populate the table
function fetchStudents() {
$.ajax({
url: 'fetch_student.php', // URL to the PHP script
type: 'GET',
dataType: 'json',
success: function(data) {
// Clear existing table rows
var tableBody = $('.table tbody');
tableBody.empty();
// Loop through the data and append rows to the table
$.each(data, function(index, student) {
var row = '<tr>' +
'<td>' + student.name + '</td>' +
'<td>' + student.course + '</td>' +
'<td>' + student.year_level + '</td>' +
'<td>' + student.section + '</td>' +
'<td>' + student.number + '</td>' +
'<td>' + student.email + '</td>' +
'<td>' +
'<button class="btn btn-warning btn-sm edit-btn" data-
stud_id="' + student.stud_id + '">Edit</button> ' +
'<button class="btn btn-danger btn-sm delete-btn" data-
stud_id="' + student.stud_id + '">Delete</button>' +
'</td>' +
'</tr>';
tableBody.append(row);
});
},
error: function(xhr, status, error) {
alert('An error occurred while fetching data: ' + error);
}
});
}
// Call the function to fetch students on page load
fetchStudents();
// Delete Student
$(document).on('click', '.delete-btn', function() {
var studentId = $(this).data('stud_id');
if (confirm("Are you sure you want to delete this student?")) {
$.ajax({
url: 'delete_student.php',
type: 'POST',
data: { stud_id: studentId },
success: function(response) {
if (response.includes("Student Deleted Successfully")) {
alert(response);
fetchStudents();
} else {
alert("Error: " + response);
}
},
error: function(xhr, status, error) {
alert('An error occurred: ' + error);
}
});
}
});
});
</script>
</div>
</div>
</div>
<!-- Add Student Modal -->
<div class="modal fade" id="addStudentModal" tabindex="-1" aria-
labelledby="addStudentModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="addStudentModalLabel">Add New
Student</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal"
aria-label="Close"></button>
</div>
<div class="modal-body">
<form id="addStudentForm">
<div class="mb-3">
<label for="studentName" class="form-label">Student
Name</label>
<input type="text" class="form-control"
id="studentName" name="name" required>
</div>
<div class="mb-3">
<label for="studentCourse"
class="form-label">Course</label>
<input type="text" class="form-control"
id="studentCourse" name="course" required>
</div>
<div class="mb-3">
<label for="studentYear" class="form-label">Year
Level</label>
<input type="text" class="form-control"
id="studentYear" name="year" required>
</div>
<div class="mb-3">
<label for="studentSection" class="form-
label">Section</label>
<input type="text" class="form-control"
id="studentSection" name="section" required>
</div>
<div class="mb-3">
<label for="studentNumber"
class="form-label">Number</label>
<input type="text" class="form-control"
id="studentNumber" name="number" required>
</div>
<div class="mb-3">
<label for="studentEmail"
class="form-label">Email</label>
<input type="email" class="form-control"
id="studentEmail" name="email" required>
</div>
<button type="submit" class="btn btn-primary">Add
Student</button>
</form>
</div>
</div>
</div>
</div>
<!-- Edit Student Modal -->
<div class="modal fade" id="editStudentModal" tabindex="-1" aria-
labelledby="editStudentModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="editStudentModalLabel">Edit Student
Information</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal"
aria-label="Close"></button>
</div>
<div class="modal-body">
<form id="editStudentForm">
<input type="hidden" id="editStudentId" name="stud_id">
<div class="mb-3">
<label for="editStudentName" class="form-label">Student
Name</label>
<input type="text" class="form-control"
id="editStudentName" name="name" required>
</div>
<div class="mb-3">
<label for="editStudentCourse" class="form-
label">Course</label>
<input type="text" class="form-control"
id="editStudentCourse" name="course" required>
</div>
<div class="mb-3">
<label for="editStudentYear" class="form-label">Year
Level</label>
<input type="text" class="form-control"
id="editStudentYear" name="year" required>
</div>
<div class="mb-3">
<label for="editStudentSection" class="form-
label">Section</label>
<input type="text" class="form-control"
id="editStudentSection" name="section" required>
</div>
<div class="mb-3">
<label for="editStudentNumber" class="form-
label">Number</label>
<input type="text" class="form-control"
id="editStudentNumber" name="number" required>
</div>
<div class="mb-3">
<label for="editStudentEmail" class="form-
label">Email</label>
<input type="email" class="form-control"
id="editStudentEmail" name="email" required>
</div>
<button type="submit" class="btn btn-primary">Save
Changes</button>
</form>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function() {
// Open Edit Modal and Populate Data
$(document).on('click', '.btn-warning', function() {
var row = $(this).closest('tr');
var studId = row.find('.delete-btn').data('stud_id');
var name = row.find('td:eq(0)').text();
var course = row.find('td:eq(1)').text();
var year = row.find('td:eq(2)').text();
var section = row.find('td:eq(3)').text();
var number = row.find('td:eq(4)').text();
var email = row.find('td:eq(5)').text();
// Populate the edit modal form fields
$('#editStudentId').val(studId);
$('#editStudentName').val(name);
$('#editStudentCourse').val(course);
$('#editStudentYear').val(year);
$('#editStudentSection').val(section);
$('#editStudentNumber').val(number);
$('#editStudentEmail').val(email);
// Show the edit modal
var editModal = new
bootstrap.Modal(document.getElementById('editStudentModal'));
editModal.show();
});
// Handle Edit Form Submission
$('#editStudentForm').on('submit', function(e) {
e.preventDefault();
var editData = $(this).serialize();
$.ajax({
url: 'edit_student.php',
type: 'POST',
data: editData,
success: function(response) {
if (response.includes("Student Updated Successfully")) {
alert(response);
var modal =
bootstrap.Modal.getInstance(document.getElementById('editStudentModal'));
modal.hide();
fetchStudents();
} else {
alert("Error: " + response);
}
},
error: function(xhr, status, error) {
alert('An error occurred: ' + error);
}
});
});
// Handle Add Form Submission
$('#addStudentForm').on('submit', function(e) {
e.preventDefault();
var studentData = $(this).serialize();
$.ajax({
url: 'add_student.php',
type: 'POST',
data: studentData,
success: function(response) {
if (response.includes("Data Added Successfully")) {
alert(response);
$('#addStudentForm')[0].reset();
var modal =
bootstrap.Modal.getInstance(document.getElementById('addStudentModal'));
modal.hide();
fetchStudents();
} else {
alert("Error: " + response);
}
},
error: function(xhr, status, error) {
alert('An error occurred: ' + error);
}
});
});
});
</script>
<!-- Footer -->
<footer class="footer mt-auto py-3 bg-dark text-white">
<div class="container text-center">
<span>© 2024 Student Management System</span>
</div>
</footer>
<!-- Bootstrap JS -->
<script
src="https://cdn.jsdelivr.net/npm/
[email protected]/dist/js/bootstrap.bundle.m
in.js"></script>
</body>
</html>
