Scribd
Upload
15 views6 pages

Crud

The document is an HTML template for a Student Information Management System that includes a navbar, a table to manage student data, and modals for adding and editing student information. It utilizes Bootstrap for styling and jQuery for AJAX functionality to fetch, add, edit, and delete student records. The footer indicates the system is part of a Student Management System for the year 2024.

Uploaded by

Yxie J'vrsk
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
15 views6 pages

Crud

The document is an HTML template for a Student Information Management System that includes a navbar, a table to manage student data, and modals for adding and editing student information. It utilizes Bootstrap for styling and jQuery for AJAX functionality to fetch, add, edit, and delete student records. The footer indicates the system is part of a Student Management System for the year 2024.

Uploaded by

Yxie J'vrsk
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 6

<!

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>&copy; 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>

You might also like