Student Management - Copy this React, Tailwind Component to your project
<!DOCTYPE-html>-<html-lang="vi"-xmlns:th="http://www.thymeleaf.org">-<head>-<meta-charset="UTF-8">-<meta-name="viewport"-content="width=device-width,-initial-scale=1.0">-<title>Quản-lý-Sinh-viên</title>-<link-href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"-rel="stylesheet">-<link-rel="stylesheet"-href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css">-<style>-.table-responsive-{-max-height:-600px;-overflow-y:-auto;-}-</style>-</head>-<body>-<div-class="container-mt-5">-<h1-class="mb-4-text-center">Quản-lý-Sinh-viên</h1>-<div-class="row-mb-3">-<div-class="col">-<button-type="button"-class="btn-btn-primary"-data-bs-toggle="modal"-data-bs-target="#studentModal">-<i-class="bi-bi-plus-circle"></i>-Thêm-Sinh-viên-</button>-</div>-<div-class="col-md-4">-<input-type="text"-id="searchInput"-class="form-control"-placeholder="Tìm-kiếm...">-</div>-</div>-<div-class="table-responsive">-<table-class="table-table-striped-table-hover">-<thead-class="table-dark">-<tr>-<th>ID</th>-<th>Mã-sinh-viên</th>-<th>Tên-sinh-viên</th>-<th>Lớp</th>-<th>Khoa</th>-<th>Ngày-sinh</th>-<th>Hành-động</th>-</tr>-</thead>-<tbody-id="studentTableBody">-</tbody>-</table>-</div>-</div>-<!---Modal-Thêm/Sửa-Sinh-viên--->-<div-class="modal-fade"-id="studentModal"-tabindex="-1">-<div-class="modal-dialog">-<div-class="modal-content">-<div-class="modal-header">-<h5-class="modal-title"-id="modalTitle">Thêm-Sinh-viên</h5>-<button-type="button"-class="btn-close"-data-bs-dismiss="modal"></button>-</div>-<div-class="modal-body">-<form-id="studentForm">-<input-type="hidden"-id="studentId">-<div-class="mb-3">-<label-for="masinhvien"-class="form-label">Mã-sinh-viên</label>-<input-type="text"-class="form-control"-id="masinhvien"-required>-</div>-<div-class="mb-3">-<label-for="tensinhvien"-class="form-label">Tên-sinh-viên</label>-<input-type="text"-class="form-control"-id="tensinhvien"-required>-</div>-<div-class="mb-3">-<label-for="lop"-class="form-label">Lớp</label>-<input-type="text"-class="form-control"-id="lop"-required>-</div>-<div-class="mb-3">-<label-for="khoa"-class="form-label">Khoa</label>-<input-type="text"-class="form-control"-id="khoa"-required>-</div>-<div-class="mb-3">-<label-for="ngaysinh"-class="form-label">Ngày-sinh</label>-<input-type="date"-class="form-control"-id="ngaysinh"-required>-</div>-</form>-</div>-<div-class="modal-footer">-<button-type="button"-class="btn-btn-secondary"-data-bs-dismiss="modal">Đóng</button>-<button-type="button"-class="btn-btn-primary"-onclick="saveStudent()">Lưu</button>-</div>-</div>-</div>-</div>-<script-src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>-<script>-let-students-=-[];-const-modal-=-new-bootstrap.Modal(document.getElementById('studentModal'));-function-loadStudents()-{-fetch('/students')-.then(response-=>-response.json())-.then(data-=>-{-students-=-data;-displayStudents();-})-.catch(error-=>-console.error('Error:',-error));-}-function-displayStudents(filteredStudents-=-students)-{-const-tableBody-=-document.getElementById('studentTableBody');-tableBody.innerHTML-=-'';-filteredStudents.forEach(student-=>-{-const-row-=-tableBody.insertRow();-row.innerHTML-=-`-<td>${student.id}</td>-<td>${student.masinhvien}</td>-<td>${student.tensinhvien}</td>-<td>${student.lop}</td>-<td>${student.khoa}</td>-<td>${student.ngaysinh}</td>-<td>-<button-class="btn-btn-sm-btn-warning"-onclick="editStudent(${student.id})">-<i-class="bi-bi-pencil"></i>-</button>-<button-class="btn-btn-sm-btn-danger"-onclick="deleteStudent(${student.id})">-<i-class="bi-bi-trash"></i>-</button>-</td>-`;-});-}-function-saveStudent()-{-//-Kiểm-tra-các-trường-bắt-buộc-const-masinhvien-=-document.getElementById('masinhvien').value.trim();-const-tensinhvien-=-document.getElementById('tensinhvien').value.trim();-const-lop-=-document.getElementById('lop').value.trim();-const-khoa-=-document.getElementById('khoa').value.trim();-const-ngaysinh-=-document.getElementById('ngaysinh').value.trim();-//-Kiểm-tra-nếu-có-trường-nào-trống-if-(!masinhvien-||-!tensinhvien-||-!lop-||-!khoa-||-!ngaysinh)-{-alert('Vui-lòng-điền-đầy-đủ-thông-tin-sinh-viên!');-return;-}-const-student-=-{-id:-document.getElementById('studentId').value,-masinhvien:-masinhvien,-tensinhvien:-tensinhvien,-lop:-lop,-khoa:-khoa,-ngaysinh:-ngaysinh-};-const-method-=-student.id-?-'PUT'-:-'POST';-const-url-=-student.id-?-`/students/${student.id}`-:-'/students';-fetch(url,-{-method:-method,-headers:-{-'Content-Type':-'application/json',-},-body:-JSON.stringify(student),-})-.then(response-=>-{-if-(!response.ok)-{-return-response.text().then(text-=>-{-throw-new-Error(text)-});-}-return-method-===-'PUT'-?-Promise.resolve()-:-response.json();-})-.then(()-=>-{-loadStudents();-modal.hide();-})-.catch((error)-=>-{-alert(error.message-||-'Có-lỗi-xảy-ra-khi-lưu-sinh-viên');-});-}-function-editStudent(id)-{-const-student-=-students.find(s-=>-s.id-===-id);-document.getElementById('modalTitle').textContent-=-'Sửa-Sinh-viên';-document.getElementById('studentId').value-=-student.id;-document.getElementById('masinhvien').value-=-student.masinhvien;-document.getElementById('tensinhvien').value-=-student.tensinhvien;-document.getElementById('lop').value-=-student.lop;-document.getElementById('khoa').value-=-student.khoa;-document.getElementById('ngaysinh').value-=-student.ngaysinh;-modal.show();-}-function-deleteStudent(id)-{-if-(confirm('Bạn-có-chắc-chắn-muốn-xóa-sinh-viên-này?'))-{-fetch(`/students/${id}`,-{-method:-'DELETE',-})-.then(()-=>-loadStudents())-.catch((error)-=>-console.error('Error:',-error));-}-}-document.getElementById('searchInput').addEventListener('input',-function-()-{-const-searchTerm-=-this.value.toLowerCase();-const-filteredStudents-=-students.filter(student-=>-student.masinhvien.toLowerCase().includes(searchTerm)-||-student.tensinhvien.toLowerCase().includes(searchTerm)-||-student.lop.toLowerCase().includes(searchTerm)-||-student.khoa.toLowerCase().includes(searchTerm)-||-(student.ngaysinh-&&-student.ngaysinh.includes(searchTerm))-);-displayStudents(filteredStudents);-});-document.getElementById('studentModal').addEventListener('hidden.bs.modal',-function-()-{-document.getElementById('studentForm').reset();-document.getElementById('modalTitle').textContent-=-'Thêm-Sinh-viên';-document.getElementById('studentId').value-=-'';-});-loadStudents();-</script>-</body>-</html>
