JS Tutorial

Hướng dẫn phát triển dự án quản lý sinh viên bằng javascript - khoá học lập trình javascript

🧱 BƯỚC 1: TẠO CẤU TRÚC PROJECT

Tạo 3 file:


index.html
style.css
script.js

🖥️ BƯỚC 2: VIẾT GIAO DIỆN HTML

📌 2.1 Tạo form nhập sinh viên

Copy đoạn này vào index.html:


<form id="formSV" onsubmit="return addStudent()">

👉 Ý nghĩa:

Khi bấm submit → gọi hàm addStudent()

📌 2.2 Tạo các ô input


<input type="text" id="hoten" required>
<input type="text" id="masv" required>
<input type="date" id="ngaysinh">
<select id="gioitinh">
    <option>Nam</option>
    <option>Nữ</option>
</select>
<input type="text" id="lop">

👉 Mỗi input phải có id để JS lấy dữ liệu

📌 2.3 Nút chức năng


<button type="submit" id="addTag">Thêm sinh viên</button>
<button type="submit" id="editTag" style="display: none;">Sửa sinh viên</button>

👉 Ban đầu:

Hiện nút Thêm

Ẩn nút Sửa

📌 2.4 Bảng hiển thị


<tbody id="danhsach"></tbody>

👉 JS sẽ đổ dữ liệu vào đây

📌 2.5 Kết nối JS


<script src="script.js"></script>

🎨 BƯỚC 3: THÊM CSS (OPTIONAL)

Bạn có thể copy CSS của bạn, hoặc tối thiểu:


body {
    font-family: Arial;
}
table {
    width: 100%;
}

🧠 BƯỚC 4: VIẾT JAVASCRIPT

🔹 4.1 Lấy các phần tử từ HTML


var hotenTag = document.getElementById('hoten')
var masvTag = document.getElementById('masv')
var ngaysinhTag = document.getElementById('ngaysinh')
var gioitinhTag = document.getElementById('gioitinh')
var lopTag = document.getElementById('lop')
var danhsachTag = document.getElementById('danhsach')
var addTag = document.getElementById('addTag')
var editTag = document.getElementById('editTag')

👉 Đây là bước bắt buộc để JS tương tác với HTML

🔹 4.2 Tạo dữ liệu lưu trữ


var stdList = [];
var currentIndex = -1;

👉 Giải thích:

stdList: chứa danh sách sinh viên

currentIndex: dùng để biết đang sửa ai

➕ BƯỚC 5: VIẾT CHỨC NĂNG THÊM

📌 5.1 Tạo hàm addStudent


function addStudent() {

📌 5.2 Lấy dữ liệu từ form


let std = {
    hoten: hotenTag.value,
    masv: masvTag.value,
    ngaysinh: ngaysinhTag.value,
    gioitinh: gioitinhTag.value,
    lop: lopTag.value
}

👉 Tạo object sinh viên

📌 5.3 Phân biệt THÊM và SỬA


if(currentIndex >= 0) {

👉 Trường hợp SỬA


stdList[currentIndex] = std
currentIndex = -1
displayAll()

addTag.style.display = 'block'
editTag.style.display = 'none'

👉 Trường hợp THÊM


stdList.push(std)
addStudentHTML(std, stdList.length - 1)

📌 5.4 Ngăn reload trang


return false

📋 BƯỚC 6: HIỂN THỊ DANH SÁCH

📌 6.1 Hàm hiển thị toàn bộ


function displayAll() {
    danhsachTag.innerHTML = ''

👉 Xóa bảng


for (var i = 0; i < stdList.length; i++) {
    addStudentHTML(stdList[i], i)
}

👉 Render lại toàn bộ

🧾 BƯỚC 7: HIỂN THỊ 1 SINH VIÊN


function addStudentHTML(item, i) {
    danhsachTag.innerHTML += `
    <tr>
        <td>${item.hoten}</td>
        <td>${item.masv}</td>
        <td>${item.ngaysinh}</td>
        <td>${item.gioitinh}</td>
        <td>${item.lop}</td>
        <td>
            <button onclick="editStudent(${i})">Edit</button>
            <button onclick="deleteStudent(${i})">Delete</button>
        </td>
    </tr>`
}

👉 Đây là bước render dữ liệu ra bảng

❌ BƯỚC 8: XOÁ SINH VIÊN


function deleteStudent(index) {
    if(confirm('Ban co muon xoa sinh vien nay khong?')) {

👉 Xác nhận


stdList.splice(index, 1)
displayAll()

👉 Xóa và cập nhật lại bảng

✏️ BƯỚC 9: SỬA SINH VIÊN

📌 9.1 Lưu index


currentIndex = index

📌 9.2 Đổ dữ liệu lên form


let std = stdList[index]

hotenTag.value = std.hoten
masvTag.value = std.masv
ngaysinhTag.value = std.ngaysinh
gioitinhTag.value = std.gioitinh
lopTag.value = std.lop

📌 9.3 Đổi nút


addTag.style.display = 'none'
editTag.style.display = 'block'

🔄 BƯỚC 10: LUỒNG HOẠT ĐỘNG

➤ THÊM

Nhập form → submit → push vào mảng → hiển thị

➤ SỬA

Click Edit → dữ liệu lên form → submit → update

➤ XOÁ

Click Delete → xác nhận → xoá → render lại

🧪 BƯỚC 11: TEST

Hãy thử:

Thêm 3 sinh viên

Sửa 1 sinh viên

Xoá 1 sinh viên

👉 Nếu mọi thứ hoạt động → bạn đã thành công 🎉

Source Code:

#script.js

var hotenTag = document.getElementById('hoten')
var masvTag = document.getElementById('masv')
var ngaysinhTag = document.getElementById('ngaysinh')
var gioitinhTag = document.getElementById('gioitinh')
var lopTag = document.getElementById('lop')
var danhsachTag = document.getElementById('danhsach')
var addTag = document.getElementById('addTag')
var editTag = document.getElementById('editTag')

var stdList = []; //Global -> su dung trong ca du an.
//stdList -> dai dien cho 1 phan tu trong mang -> index: 0, 1, 2, ..., n
var currentIndex = -1;

function addStudent() {
	let std = {
		'hoten': hotenTag.value,
		'masv': masvTag.value,
		'ngaysinh': ngaysinhTag.value,
		'gioitinh': gioitinhTag.value,
		'lop': lopTag.value
	}
	if(currentIndex >= 0) {
		//edit
		stdList[currentIndex] = std
		currentIndex = -1
		displayAll();
		addTag.style.display = 'block'
		editTag.style.display = 'none'
	} else {
		//add
		stdList.push(std)
		addStudentHTML(std, stdList.length - 1)
	}

	return false
}

function displayAll() {
	danhsachTag.innerHTML = ''

	for (var i = 0; i < stdList.length; i++) {
		addStudentHTML(stdList[i], i)
	}
}

function addStudentHTML(item, i) {
	danhsachTag.innerHTML += `<tr>
    		<td>${item.hoten}</td>
    		<td>${item.masv}</td>
    		<td>${item.ngaysinh}</td>
    		<td>${item.gioitinh}</td>
    		<td>${item.lop}</td>
			<td>
				<button onclick="editStudent(${i})">Edit</button>
				<button onclick="deleteStudent(${i})">Delete</button>
			</td>
    	</tr>`
}

function deleteStudent(index) {
	if(confirm('Ban co muon xoa sinh vien nay khong?')) {
		stdList.splice(index, 1)
		displayAll()
	}
}

function editStudent(index) {
	currentIndex = index
	//B1. LAY THONG TIN THANG SINH VIEN RA
	let std = stdList[index]
	//B2. HIEN THI THONG TIN SINH VIEN LEN FORM
	hotenTag.value = std.hoten
	masvTag.value = std.masv
	ngaysinhTag.value = std.ngaysinh
	gioitinhTag.value = std.gioitinh
	lopTag.value = std.lop
	//B3. LAM SAO -> PHAN BIET DUOC LA DANG THEM HAY SUA.
	addTag.style.display = 'none'
	editTag.style.display = 'block'
}

#style.css

body {
    font-family: Arial;
    background: #f4f6f9;
}

.container {
    width: 800px;
    margin: 30px auto;
    background: white;
    padding: 20px;
    border-radius: 8px;
}

h2 {
    text-align: center;
}

.form-group {
    display: flex;
    margin-bottom: 10px;
    align-items: center;
}

.form-group label {
    width: 150px;
    font-weight: bold;
}

.form-group input,
.form-group select {
    flex: 1;
    padding: 8px;
}

button {
    margin-top: 10px;
    padding: 10px;
    background: green;
    color: white;
    border: none;
    cursor: pointer;
}

button:hover {
    background: #0056b3;
}

table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}

table, th, td {
    border: 1px solid #ddd;
}

th {
    background: #007bff;
    color: white;
}

th, td {
    padding: 10px;
    text-align: center;
}

#vidu.html

<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<title>Quản lý sinh viên</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>

<div class="container">
    <h2>Nhập thông tin sinh viên</h2>

    <form id="formSV" onsubmit="return addStudent()">
        <div class="form-group">
            <label>Họ tên:</label>
            <input type="text" id="hoten" required>
        </div>

        <div class="form-group">
            <label>Mã SV:</label>
            <input type="text" id="masv" required>
        </div>

        <div class="form-group">
            <label>Ngày sinh:</label>
            <input type="date" id="ngaysinh">
        </div>

        <div class="form-group">
            <label>Giới tính:</label>
            <select id="gioitinh" abc="xyz" name="gender">
                <option>Nam</option>
                <option>Nữ</option>
            </select>
        </div>

        <div class="form-group">
            <label>Lớp:</label>
            <input type="text" id="lop" value="">
        </div>

        <div class="form-group">
            <label></label>
            <button type="submit" id="addTag">Thêm sinh viên</button>
            <button type="submit" id="editTag" style="display: none;">Sua sinh viên</button>
            <button type="reset" style="margin-left: 10px;">Xoa Form</button>
        </div>
    </form>

    <table>
        <thead>
            <tr>
                <th>Họ tên</th>
                <th>Mã SV</th>
                <th>Ngày sinh</th>
                <th>Giới tính</th>
                <th>Lớp</th>
                <th></th>
            </tr>
        </thead>
        <tbody id="danhsach">
        </tbody>
    </table>
</div>

<script src="script.js"></script>
</body>
</html>

Mục Lục