BỘ CÔNG THƯƠNG

TRƯỜNG ĐẠI HỌC CÔNG NGHIỆP HÀ NỘI

---------------------------------------

ĐỒ ÁN TỐT NGHIỆP ĐẠI HỌC CNKT MÁY TÍNH

THIẾT KẾ WEBSITE PHỤC VỤ HOẠT ĐỘNG GIẢNG DẠY VÀ

NGHIÊN CỨU CHO KHOA ĐIỆN TỬ

CBHD: ThS. NGUYỄN VĂN CƯỜNG

Nhóm sinh viên:
1. NGUYỄN XUÂN HẢI_Mã SV:2019605026
HOÀNG VĂN SƠN
2. NGUYỄN TRỌNG BÌNH_ Mã SV: 2019600224
3. ĐỖ ĐỨC ANH_Mã SV: 2019605952

Hà Nội – Năm 2023

i

LỜI CẢM ƠN
Qua một thời gian tìm hiểu, học hỏi và triển khai đến nay, đồ án “Thiết
kế Website phục vụ hoạt động giảng dạy và nghiên cứu cho Khoa Điện tử” đã
hoàn thành. Trong suốt quá trình thực hiện đề tài, nhóm đã nhận được rất
nhiều sự giúp đỡ nhiệt tình của thầy cô và các bạn.
Xin cảm ơn giảng viên hướng dẫn là thầy ThS. Nguyễn Văn Cường,
thầy đã tận tình giúp đỡ, chỉ bảo và hướng dẫn trong suốt thời gian thực hiện
đề tài. Nhờ vào sự giúp đỡ, chỉ bảo đó của thầy mà nhóm đã hoàn thành báo
cáo thực tập. Nhóm cũng mong muốn được gửi lời cảm ơn đến các thầy cô đã
hướng dẫn và đóng góp vào quá trình thực hiện đồ án của nhóm. Sự giúp đỡ
và hướng dẫn của các thầy cô rất quan trọng đối với nhóm và giúp nhóm hoàn
thiện và nâng cao chất lượng đồ án của mình.
Nhóm rất vui và cảm kích với sự ủng hộ và động viên của gia đình và
bạn bè trong suốt quá trình thực hiện đồ án. Điều này thực sự là một động lực
rất lớn giúp nhóm vượt qua những khó khăn và hoàn thành đồ án tốt nhất có
thể.
ii

MỤC LỤC
LỜI CẢM
ƠN ....................................................................................................i MỤC
LỤC.........................................................................................................ii
DANH MỤC HÌNH
ẢNH ...............................................................................iii DANH MỤC
BẢNG BIỂU .............................................................................. v MỞ
ĐẦU........................................................................................................... 1
1. LÝ DO LỰA CHỌN ĐỀ TÀI............................................................... 1
2. MỤC TIÊU CỦA ĐỀ TÀI.................................................................... 1
3. ĐỐI TƯỢNG NGHIÊN CỨU .............................................................. 2
4. PHẠM VI NGHIÊN CỨU.................................................................... 2
5. PHƯƠNG PHÁP NGHIÊN CỨU......................................................... 2
6. Ý NGHĨA KHOA HỌC VÀ THỰC TIỄN CỦA ĐỒ ÁN.................... 2
7. CẤU TRÚC CỦA BÁO CÁO ĐỒ ÁN TỐT NGHIỆP........................ 3
CHƯƠNG 1. TỔNG QUAN VỀ LẬP TRÌNH WEBSITE.............................. 4
1.1. GIỚI THIỆU CHUNG........................................................................... 4
1.2. PHƯƠNG PHÁP LẬP TRÌNH WEBSITE ......................................... 17
1.3. WEBSITE THỐNG KÊ KHỐI LƯỢNG GIẢNG DẠY VÀ CUNG
 CẤP
THÔNG TIN NGHIÊN CỨU KHOA HỌC............................................... 25
1.4. KẾT LUẬN CHƯƠNG 1..................................................................... 25
CHƯƠNG 2. THIẾT KẾ WEBSITE THỐNG KÊ GIẢNG DẠY................. 26
2.1. PHÂN TÍCH YÊU CẦU BÀI TOÁN.................................................. 26
2.2. THIẾT KẾ Ý TƯỞNG......................................................................... 27
2.3. THIẾT KẾ CHI TIẾT .......................................................................... 33
2.4. KẾT LUẬN CHƯƠNG 2..................................................................... 45
CHƯƠNG 3. THỬ NGHIỆM VÀ ĐÁNH GIÁ ............................................. 46
3.1. VẬN HÀNH SẢN PHẨM................................................................... 46
3.2. THỬ NGHIỆM VÀ KIỂM CHỨNG SẢN PHẨM............................. 47
3.3. ĐÁNH GIÁ SẢN PHẨM .................................................................... 49
3.4. ỨNG DỤNG CỦA SẢN PHẨM ......................................................... 50
3.5. TÁC ĐỘNG CỦA SẢN PHẨM THIẾT KẾ TỚI MÔI TRƯỜNG/KINH
TẾ/ XÃ HỘI. ............................................................................................... 51
3.6. KẾT LUẬN CHƯƠNG 3..................................................................... 51
KẾT LUẬN..................................................................................................... 52
TÀI LIỆU THAM KHẢO............................................................................... 53
iii

DANH MỤC HÌNH ẢNH

Hình 1.1. Website..............................................................................................
4 Hình 1.2. Website thương mại điện
tử.............................................................. 5 Hình 1.3. Website kinh
doanh........................................................................... 6 Hình 1.4. Website
blog...................................................................................... 7 Hình 1.5.
Website danh mục đầu tư.................................................................. 7 Hình
1.6. Website sự kiện................................................................................. 8
Hình 1.7. Website cá nhân ................................................................................
9 Hình 1.8. Website thành viên..........................................................................
10 Hình 1.9. Website phi lợi
nhuận ..................................................................... 11 Hình 1.10. Trang
Website thông tin................................................................ 12 Hình 1.11. Diễn
đàn trực tuyến....................................................................... 13 Hình 1.12.
Database ........................................................................................ 19 Hình
1.13. Backend......................................................................................... 20
Hình 1.14: Frontend ........................................................................................
22 Hình 2.1. Sơ đồ khối
chung............................................................................. 33 Hình 2.2. Sơ đồ
khối cho Controller............................................................... 34 Hình 2.3.
Trang chủ ........................................................................................ 35 Hình
2.4. Trang tìm kiếm................................................................................ 35
Hình 2.5. Trang nhập dữ liệu ..........................................................................
36 Hình 2.6. Trang thống kê khối lượng giảng
dạy............................................. 36 Hình 2.7. Trang hỗ trợ điền thông tin thực
hành ............................................ 37 Hình 2.8. Trang thông tin nghiên cứu
khoa học ............................................. 37 Hình 2.9. Trang nhóm nghiên cứu
khoa học................................................... 37 Hình 2.10. Trang đăng
nhập............................................................................ 38 Hình 2.11. Trang
hướng dẫn sử dụng ............................................................. 38 Hình 2.12. Lưu
đồ thuật toán nhập lịch đầy đủ............................................... 41 Hình 2.13.
Lưu đồ thuật toán nhập lịch thực hành ......................................... 42 Hình
2.14. Lưu đồ thuật toán thống kê khối lượng giảng dạy........................ 43
iv

Hình 2.15. Lưu đồ thuật toán hỗ trợ nhập thông tin thực hành ......................
44 Hình 2.16: Routing cho các phương thức của
Website .................................. 45 Hình 3.1. Ví dụ thống kê khối lượng giảng
dạy của giảng viên Dương Thị
Hằng ...................................................................................................................
...... 46 Hình 3.2. Thông tin nghiên cứu khoa
học....................................................... 46 Hình 3.3. Kết quả kiểm chứng của
giảng viên Đinh Thị Kim Phượng .......... 48 Hình 3.4. Kết quả kiểm chứng
của giảng viên Lê Việt Tiến .......................... 48 Hình 3.5. Kết quả kiểm
chứng của giảng viên Nguyễn Văn Cường .............. 48 Hình 3.6. Kết quả
kiểm chứng của giảng viên Vũ Thị Hoàng Yến................ 49 Hình 3.7. Kết quả
kiểm chứng của giảng viên Lê Mạnh Long....................... 49
v
 DANH MỤC BẢNG BIỂU
Bảng 2.1. Bảng dữ liệu cho lịch đẩy đủ.......................................................... 39
Bảng 2.2. Bảng dữ liệu cho lịch thực hành.....................................................
40 Bảng 3.1. Bảng thống kê số giờ giảng dạy và số giờ được thanh toán của
một số giảng
viên.................................................................................................... 47
1

MỞ ĐẦU

1. LÝ DO LỰA CHỌN ĐỀ TÀI

Những năm gần đây, công cuộc đổi mới trong lĩnh vực giáo dục và đào
tạo luôn được Đảng và Nhà nước chú trọng mở rộng và phát triển, đặc biệt là
giáo dục đại học. Đi cùng với sự phát triển của thế giới, hệ thống giáo dục đại
học ở Việt Nam đã có nhiều chuyển biến mới, chất lượng đào tạo ngày càng
được nâng lên rõ rệt. Nhưng giáo dục nước nhà đang gặp nhiều thách thức và
bất cập trong công tác giảng dạy, quản lý, đảm bảo chất lượng đầu ra cho sinh
viên. Việc sử dụng Website để hỗ trợ hoạt động giảng dạy và nghiên cứu là
một giải pháp rất hiệu quả trong tình trạng hiện nay.
Trường Đại học Công nghiệp Hà Nội là một trong những trường tiên
phong áp dụng chương trình kiểm định chất lượng đào tạo theo chuẩn về phần
mềm máy tính, nhằm nâng cao hiệu quả dạy học, công tác quản lý sinh viên,
chất lượng đào tạo… Theo đó, Khoa Điện tử cũng đang trong quá trình triển
khai chương trình kiểm định đối với ngành Công nghệ Kỹ thuật Máy tính.
Trong quá trình kiểm định, có rất nhiều công đoạn được thực hiện một cách
thủ công, mất nhiều thời gian để hoàn thành theo từng chu kỳ. Nắm bắt được
sự
hạn chế đó, nhóm đã chọn đề tài “Thiết kế Website phục vụ hoạt động giảng
dạy và nghiên cứu cho Khoa Điện tử” làm đồ án tốt nghiệp chuyên ngành
Kỹ thuật máy tính của mình. Việc triển khai thiết kế một Website phục vụ cho
hoạt động giảng dạy và nghiên cứu mang lại nhiều lợi ích cho giảng viên,
nhân viên, giáo vụ, sinh viên và học viện trong việc quản lý và tra cứu thông
tin.
2. MỤC TIÊU CỦA ĐỀ TÀI

• Thiết kế được Website hỗ trợ giảng viên thống kê khối lượng giảng dạy. •

Giúp sinh viên tích luỹ được kiến thức về lập trình Website, quản lý cơ sở dữ
liệu, quản trị tài khoản.

• Giúp sinh viên rèn luyện được các kỹ năng như viết báo cáo, trình bày vấn
đề kỹ thuật, làm việc nhóm, tinh thần phấn đấu và thái độ nghiêm túc.
2

3. ĐỐI TƯỢNG NGHIÊN CỨU

• Thiết kế Website phục vụ cho Khoa Điện tử.

• Website hỗ trợ hoạt động giảng dạy và nghiên cứu cho Khoa Điện tử.

4. PHẠM VI NGHIÊN CỨU

Nghiên cứu tập trung vào:

• Kỹ thuật lập trình, cách thức hoạt động và đối tượng sử dụng trong thiết kế
Website.

• Cách sử dụng các ngôn ngữ lập trình backend (Golang) và frontend (HTML,
CSS, Javascript)
Phạm vi: được sử dụng trong Khoa Điện tử - Trường Đại Học Công Nghiệp
Hà Nội

5. PHƯƠNG PHÁP NGHIÊN CỨU

• Phương pháp thu thập thông tin từ giảng viên : Tổng hợp và phân tích hoạt

động giảng dạy và nghiên cứu cho Khoa Điện tử dựa trên việc ghi chép của
giảng viên

• Phương pháp xử lý thông tin:

• Xây dựng ý tưởng và lập kế hoạch cụ thể để thiết kế Website ứng dụng.
• Kiểm tra, chỉnh sửa, triển khai và hoàn thiện Website ứng dụng.

6. Ý NGHĨA KHOA HỌC VÀ THỰC TIỄN CỦA ĐỒ ÁN

Ý nghĩa khoa học:

• Tính toán thời gian giảng dạy một cách hợp lý

• Điều chỉnh lịch giảng dạy để đáp ứng các yêu cầu của giảng viên tại trường.

Giá trị thực tiễn:

• Hỗ trợ giảng viên thống kê vào sổ kê giờ

• Xây dựng Website giúp giảng viên tìm kiếm 1 cách dễ dàng, khoa học và
đảm bảo tính bảo mật.
3

7. CẤU TRÚC CỦA BÁO CÁO ĐỒ ÁN TỐT NGHIỆP

Báo cáo đồ án tốt nghiệp gồm ba phần chính và được tổ chức như sau: •

Chương 1: Trình bày khái quát chung về lập trình và thiết kế Website chuyên
nghiệp.

• Chương 2: Trình bày phân tích và thiết kế Website thống kê khối lượng

giảng dạy.

• Chương 3: Thực thi và đánh giá Website thống kê khối lượng giảng dạy đã

thiết kế.
4

CHƯƠNG 1. TỔNG QUAN VỀ LẬP TRÌNH WEBSITE

1.1. GIỚI THIỆU CHUNG

ava
Scri
pt,
PH
P,
Pyt
hon
,
Rub
y
và
nhi
ều
côn
g
ngh
ệ
khá
c.
Lập
trìn
h
We
bsit
e có
thể
đối
mặt
với
nhi
ều
thác
h
thứ
c
khá
c
nha
u,
tron
g
đó
bao
gồ
m
tối
ưu
hóa
và
kiể
m
thử
để
đả
m
bảo
tất
cả
chứ
c
năn
g
hoạ
 t
độn
g
tốt
trên
nhi
ều
nền
tản
g
và
trìn
h
duy
ệt
khá
c
nha
u
[1].
1.1.1. Phân loại các website
Tạo một Website là một trong những cách tốt nhất để thiết lập sự hiện
diện kỹ thuật số của một người. Theo Adobe, 38% người ngừng tương tác với
một trang Website nếu nội dung hoặc bố cục không hấp dẫn. Ngoài ra,
Nghiên cứu về Độ tin cậy Website của Stanford cho thấy phần lớn người tiêu
dùng đánh giá độ tin cậy của một công ty dựa trên trang Website [2]. Hình 1.1
minh họa một website có tên là thư viện công cộng westerville.
 Hình 1.1. Website
5

Nhưng trước khi tạo trang Website của riêng mình, lập trình viên sẽ cần
quyết định loại trang Website nào sẽ tạo. Dưới đây là danh sách một số phổ
biến nhất trên Website hiện nay:
Trang Website thương mại điện tử
Thương mại điện tử là một ý tưởng kinh doanh tốt để bán sản phẩm trực
tuyến và sử dụng mô hình dropshipping để quản lý kho hàng của người bán
hàng. Dropshipping là một mô hình kinh doanh cho phép người bán bán sản
phẩm mà không cần lưu trữ hàng hóa trong kho của mình. Thay vào đó, người
bán đặt hàng từ nhà phân phối bên thứ ba và giao hàng trực tiếp cho khách
hàng của người bán từ nhà cung cấp.Hình 1.2 minh họa trang website thương
mại điện tử uy tín của Việt Nam
 Hình 1.2. Website thương mại điện tử

Mẫu trang Website cửa hàng trực tuyến bao gồm các tính năng thương
mại điện tử có thể tùy chỉnh, như trang danh mục và thanh menu có thông tin
doanh nghiệp. Ngoài ra, thanh toán an toàn được xây dựng ngay bây giờ để
giữ an toàn cho thông tin của khách hàng khỏi tin tặc hoặc vi phạm dữ liệu.
Trang Website kinh doanh
Một trang Website doanh nghiệp có thể giúp thiết lập sự hiện diện trực
tuyến cho thương hiệu của doanh nghiệp. Trang Website này có thể được tạo
6

ra với mục đích giới thiệu công ty, sản phẩm và dịch vụ, nhận diện thương
hiệu của doanh nghiệp và cung cấp thông tin liên lạc cho khách hàng và đối
tác kinh doanh. Hình 1.3 minh họa trang website kinh doanh bán hàng Tết

Hình 1.3. Website kinh doanh

Trang Website blog
Blog là không gian để mọi người chia sẻ nội dung bằng văn bản và hình
ảnh về bất cứ điều gì họ mong muốn. Thậm chí có thể kiếm tiền bằng cách viết
blog bằng cách sử dụng các liên kết liên kết hoặc làm việc với các nhà quảng
cáo. Một số loại blog phổ biến nhất bao gồm blog du lịch, blog ẩm thực và
blog lối sống. Mặc dù ban đầu viết blog bắt đầu như một cách để các cá nhân
chia sẻ ý tưởng của họ trực tuyến, 86% doanh nghiệp hiện sử dụng viết blog
như một phần trong chiến lược tiếp thị nội dung của họ để có được khách
hàng tiềm năng thông qua lưu lượng truy cập không phải trả tiền và chia sẻ
trên mạng xã hội. Hình 1.4 minh họa trang website blog
 7

Hình 1.4. Website blog

Trang Website danh mục đầu tư
Trang Website danh mục đầu tư (portfolio Website) là một trang
Website cá nhân hoặc doanh nghiệp được thiết kế để giới thiệu các sản phẩm,
dịch vụ, tác phẩm nghệ thuật, sản phẩm kỹ thuật số, hoặc những dự án mà
người sở hữu của nó đã làm. Trang Website này có thể bao gồm các mục như
trang chủ, giới thiệu bản thân, danh mục sản phẩm hoặc dịch vụ, kỹ năng,
hình ảnh, video, các đánh giá của khách hàng và thông tin liên hệ. Hình 1.5
minh họa trang website quản lý danh mục đầu tư chứng khoán WPRO
STOCK

Hình 1.5. Website danh mục đầu tư

Các chuyên gia sáng tạo, nghệ sĩ, nhà thiết kế đồ họa, nhiếp ảnh gia, nhà
văn và các chuyên gia khác thường sử dụng trang Website danh mục đầu tư để
8

hiển thị các tác phẩm của mình và giới thiệu về bản thân mình cho nhà tuyển
dụng hoặc khách hàng tiềm năng. Những người này có thể sử dụng trang
Website này như một công cụ để trưng bày tài năng của họ, thu hút khách
hàng mới và xây dựng thương hiệu cá nhân. Sử dụng mẫu danh mục đầu tư để
làm nổi bật cá nhân là ai cũng như thành tích nghề nghiệp của cá nhân đó.
Trang Website sự kiện
Một trang Website sự kiện là một công cụ quan trọng trong việc quản lý
sự kiện. Nó cho phép người tổ chức sự kiện quản lý tất cả các khía cạnh của sự
kiện, bao gồm quản lý đăng ký, lời mời, quảng cáo, bán vé, quản lý chương
trình, theo dõi các tham gia và nhiều hơn nữa. Bằng cách sử dụng một trang
Website sự kiện, người tạo Website có thể tăng khả năng tiếp cận của sự kiện
của mình bằng cách quảng cáo trên mạng xã hội và email marketing, và cung
cấp thông tin chi tiết về sự kiện cho các tham gia tiềm năng. Bên cạnh đó,
trang Website sự kiện cũng cho phép tổ chức các sự kiện ảo để tiếp cận đến
một đối tượng khán giả lớn hơn. Hình 1.6 minh họa trang website tiếng hát
công nhân.

Hình 1.6. Website sự kiện

Sử dụng mẫu trang Website sự kiện để tạo trang Website của riêng mình.
9

Ngoài ra, hãy thêm sự kiện wix để mở khóa khả năng trả lời trực tuyến và
trình tạo bản đồ chỗ ngồi cho khách của người tổ chức sự kiện.
Trang Website cá nhân
Một trang Website cá nhân cũng có thể được sử dụng để xây dựng danh
tiếng cá nhân và quảng bá kỹ năng của cá nhân cho mục đích tìm việc làm.
Mọi người có thể tạo một trang Website cá nhân để chia sẻ thông tin về bản
thân, kinh nghiệm làm việc, dự án đã hoàn thành, kỹ năng chuyên môn và đào
tạo. Một trang Website cá nhân cũng có thể giúp mọi người tiếp cận nhiều
khách hàng tiềm năng hoặc cơ hội việc làm mới.
Các trang Website cá nhân này tương tự như danh mục đầu tư nhưng
thường chứa ít yếu tố trực quan hơn, vì mục tiêu không nhất thiết phải hiển thị
công việc trong quá khứ. Ví dụ, Hình 1.7. Website cá nhân minh hoạ một
website cá nhân.

Hình 1.7. Website cá nhân

Các trang Website cá nhân này tương tự như danh mục đầu tư nhưng
10

thường chứa ít yếu tố trực quan hơn, vì mục tiêu không nhất thiết phải hiển thị
công việc trong quá khứ.
Trang Website thành viên
Trang Website thành viên là một cách để đảm bảo tính độc quyền cho
các nội dung, dịch vụ hoặc tài nguyên của . Bằng cách yêu cầu khách truy cập
đăng ký hoặc trả phí để truy cập đầy đủ các tính năng của Website, người quản
lý trang Website có thể cung cấp các ưu đãi đặc biệt hoặc nội dung bổ sung
cho các thành viên. Điều này có thể giúp tăng doanh thu và xây dựng lòng
trung thành giữa các thành viên của Website. Các trang Website thành viên có
thể được sử dụng cho mục đích giáo dục, giải trí, thương mại điện tử và nhiều
mục đích khác. Ví dụ, Hình 1.8 minh hoạ một website thành viên.

Hình 1.8. Website thành viên

Trang Website phi lợi nhuận

Một trang Website phi lợi nhuận có thể được sử dụng để thông báo cho
khách truy cập về mục đích và hoạt động của tổ chức, và hỗ trợ cho các hoạt
động quyên góp và tài trợ. Các cá nhân, tổ chức có thể sử dụng trang Website
11

để giới thiệu những dự án mà tổ chức của cá nhân, tổ chức đang triển khai,
những hoạt động và sự kiện gần đây, cũng như cung cấp thông tin về những
người được hưởng lợi từ các hoạt động của tổ chức. Một trang Website phi lợi
nhuận cũng có thể được sử dụng để tuyển mộ tình nguyện viên và đối tác mới.
Hình 1.9 minh họa trang website Women's refugee commision.
 Hình 1.9. Website phi lợi nhuận
Trang Website thông tin
Các trang Website thông tin cung cấp cho khách truy cập thông tin về
một loại nội dung cụ thể, từ kiến thức chuyên môn đến tin tức hàng ngày. Các
trang Website bách khoa toàn thư cung cấp thông tin đa dạng về các chủ đề
khác nhau, trong khi các trang Website tin tức cung cấp các bản tin và sự kiện
mới nhất. Các trang Website thông tin thường có tính năng tìm kiếm để người
dùng có thể tìm kiếm thông tin cụ thể mà họ quan tâm. Nội dung trên các trang
Website thông tin thường dài và chi tiết, cung cấp cho người đọc nhiều thông
tin để nghiên cứu và khám phá. Hình 1.10 minh họa trang website thông tin
của báo chí mylogo
12
 Hình 1.10. Trang Website thông tin

Diễn đàn trực tuyến

Diễn đàn trực tuyến là một công cụ tuyệt vời để xây dựng cộng đồng
trực tuyến và tạo ra một không gian để thảo luận, chia sẻ thông tin và tìm
kiếm câu trả lời cho các câu hỏi. Nó cũng là một cách tuyệt vời để tạo ra
lượng truy cập trang Website liên tục và thúc đẩy sự tham gia của người dùng,
do đó tạo ra tiềm năng thu nhập. Ngoài ra, diễn đàn cũng có thể giúp tăng độ
tin cậy và uy tín của doanh nghiệp hoặc tổ chức bằng cách tạo ra một nơi để
tương tác trực tiếp với khách hàng hoặc thành viên và giải quyết các vấn đề
của họ. Hình 1.11 minh họa trang website diễn đàn trực tuyến EVFTA.
13
 Hình 1.11. Diễn đàn trực tuyến

1.1.2. Tình hình lập trình Website trong và ngoài nước

Website đã trải qua nhiều giai đoạn phát triển kể từ khi World Wide
Website được phát minh vào năm 1989 bởi Tim Berners-Lee. Dưới đây là một
số mốc thời gian quan trọng trong lịch sử phát triển web:

• Năm 1991: Tim Berners-Lee giới thiệu HTML, URL và HTTP, các công

nghệ cơ bản cho World Wide Web.

• Năm 1993: Mosaic, trình duyệt Website đầu tiên với khả năng hiển thị ảnh,

được phát hành.

• Năm 1995: JavaScript được phát hành bởi Netscape.

• Năm 1996: CSS được phát hành bởi W3C.

• Năm 1998: Google được thành lập.

• Năm 2000: XHTML được giới thiệu bởi W3C, là một phiên bản nghiêm ngặt

hơn của HTML.

• Năm 2004: Website 2.0 được đưa ra với các ứng dụng Website như Gmail,
Google Maps, và Facebook.

• Năm 2007: iPhone được giới thiệu, đưa ra một trải nghiệm Website di động
mới.
 14

• Năm 2010: HTML5 được giới thiệu, bao gồm các tính năng mới như video
và canvas.

• Năm 2015: Progressive Website Apps được giới thiệu, đưa ra một trải
nghiệm Website tương tự như ứng dụng di động.

• Năm 2019: WebAssembly được giới thiệu, cho phép các ngôn ngữ khác
nhau (không chỉ JavaScript) chạy trên trình duyệt.
Các mốc thời gian này chỉ ra rằng Website đã trải qua nhiều sự phát triển và
trở thành một phần không thể thiếu trong cuộc sống hàng ngày của chúng ta.
1.1.3. Vấn đề cần nghiên cứu
Khi lập trình viên bắt đầu dự án phát triển Website của mình , lập trình
viên phải đối mặt với nhiều thách thức, bao gồm chiến lược phát triển, ngăn
xếp công nghệ, thiết kế, khả năng tương thích, hiệu suất và quyền truy cập của
nhà phát triển, trong số những thứ khác [3].
Ngăn xếp công nghệ
Việc lựa chọn ngăn xếp công nghệ phụ thuộc vào nhiều yếu tố, bao gồm
mức độ phức tạp của trang Website - tính năng, chức năng, tích hợp, v.v.; ngân
sách và quyền truy cập vào các nhà phát triển. Với các biến số khác nhau như
vậy, việc quyết định ngăn xếp công nghệ tốt nhất phù hợp với dự án của lập
trình viên thường trở nên khó khăn.
Giải pháp cho ngăn xếp công nghệ
Việc xác định rõ các yêu cầu của dự án - quy mô và ngân sách phát triển
sẽ đảm bảo rằng lập trình viên chọn được nhóm công nghệ phù hợp cho dự án
của mình. Đây là lý do tại sao việc thu thập và phân tích yêu cầu là rất quan
trọng trước khi bắt đầu quá trình phát triển Website. Khi lập trình viên đã xác
định và phân tích các yêu cầu, việc chọn ngăn xếp công nghệ phù hợp sẽ trở
nên dễ dàng và suôn sẻ hơn.
Thiết kế UI/UX
Thiết kế giao diện người dùng trực quan và mượt mà mang lại trải
nghiệm người dùng được tối ưu hóa là một khía cạnh quan trọng của một trang
15

Website chất lượng cao. Nó giúp cải thiện tỷ lệ tương tác thông qua trải
nghiệm nâng cao cho người dùng cuối của lập trình viên.
Thiết kế giao diện người dùng phải linh hoạt để thích ứng với các tích
hợp thiết yếu đồng thời cho phép người dùng điều hướng dễ dàng và tìm thấy
thông tin họ cần. Ngược lại, một UX tốt giúp trang Website dễ sử dụng và
mang lại trải nghiệm tích cực cho người dùng. Do đó, các vấn đề về thiết kế
Website
là những thách thức quan trọng mà các nhà phát triển Website phải đối mặt.
Giải pháp thiết kế UI/UX
Đối với thiết kế, điều cần thiết là phải có các nhà thiết kế Website có
nhiều kinh nghiệm trong ngành để giúp lập trình viên hoàn thiện các mục tiêu
thiết kế của mình. Nhưng ngoài ra, lập trình viên phải thực hiện nhiều nghiên
cứu và thử nghiệm thông qua diện mạo người dùng để có những hiểu biết quan
trọng về suy nghĩ của khách hàng. Thử nghiệm A/B là một cách hiệu quả để
tìm ra cái nào hoạt động tốt nhất khi lập trình viên trình bày hai tùy chọn thiết
kế cho người dùng. Lập trình viên cũng có thể sử dụng các khung giao diện
người dùng khác nhau trong các thiết kế khác nhau để tìm ra tùy chọn hiệu quả
nhất cho các yêu cầu của mình.
Khả năng tương thích nền tảng
Khả năng tương thích nền tảng là một trong những thách thức phát triển
Website phổ biến và quan trọng nhất mà các doanh nghiệp thường gặp phải
khi xây dựng dự án của họ. Tính di động cao và khả năng tương thích đa nền
tảng là điều cần thiết để tăng mức độ tương tác và năng suất của người dùng
trên thị
trường kỹ thuật số.
Lý tưởng nhất là các trang Website của lập trình viên phải chạy trơn tru
trên nhiều trình duyệt, hệ điều hành, thiết bị và nền tảng để mang lại trải
nghiệm thực sự hấp dẫn cho người dùng cuối. Tuy nhiên, việc xây dựng một
trang Website hoặc ứng dụng Website như vậy thường trở nên phức tạp và đòi
hỏi chuyên môn tốt từ các nhà phát triển Website.
Giải pháp khả năng tương thích nền tảng
16

Thử nghiệm toàn diện là một cách để đảm bảo rằng các ứng dụng
Website của lập trình viên thực sự đa nền tảng và tương thích với các hệ thống
khác nhau. Lập trình viên cần thực hiện nhiều thử nghiệm, bao gồm tự động và
thủ công, đồng thời sử dụng các công cụ kiểm tra trình duyệt dựa trên đám
mây để đảm bảo rằng trang Website chạy liền mạch trên nhiều trình duyệt
khác nhau.
Một số công cụ đám mây đa trình duyệt phổ biến bao gồm LambdaTest,
BrowserStack, TestingBot, TestGrid, v.v. Lập trình viên cũng phải xác thực
mã của mình để đảm bảo chúng bao gồm các tính năng đa nền tảng thông qua
các khung và thư viện nâng cao.
Hiệu suất
Hiệu suất của một ứng dụng Website là một trong những mục tiêu quan
trọng nhất của bất kỳ dự án dựa trên Website nào. Lập trình viên muốn trang
Website của mình mượt mà, liền mạch, tương tác và nhanh chóng. Các trang
Website có lỗi với thời gian tải chậm và tắc nghẽn hiệu suất gây khó chịu khi
sử dụng, cuối cùng khiến người dùng bỏ đi. Đây là lý do tại sao đảm bảo hiệu
suất Website tối ưu là một trong những thách thức phát triển Website lớn nhất
mà các nhà phát triển Website phải đối mặt.
Giải pháp cải thiện hiệu suất
Các công cụ và kỹ thuật khác nhau có thể được sử dụng để đảm bảo
hiệu suất tối ưu cho các trang Website của lập trình viên. Những công cụ nổi
bật này bao gồm số liệu ứng dụng Website, chỉ số quan trọng về Website cốt
lõi của Google và kỹ thuật tối ưu hóa. Các chỉ số ứng dụng Website giúp theo
dõi các KPI quan trọng như sự cố ứng dụng, lượt tải xuống, lượt gỡ cài đặt,
giá trị lâu dài và lượt nâng cấp. Các kỹ thuật tối ưu hóa liên quan đến việc tối
ưu hóa mã, hình ảnh và nội dung để có hiệu suất tốt hơn.
Bảo mật
Bảo mật Website là một trong những thách thức cấp bách nhất mà các
nhà phát triển Website phải đối mặt do các vụ tấn công mạng ngày càng gia
 17

tăng trong thế giới kỹ thuật số. Một số cuộc tấn công mạng phổ biến được
triển khai nổi bật là kiểm soát truy cập, tập lệnh chéo trang, chèn liên kết, phá
vỡ xác thực và cấu hình sai bảo mật. Thông tin và dữ liệu quan trọng được
chia sẻ trên các ứng dụng Website, việc đảm bảo mức độ bảo mật cao để giữ
an toàn cho dữ liệu trở nên cấp thiết.
Giải pháp bảo mật
Điều quan trọng là phải có các chiến lược và giao thức bảo mật mạng
mạnh mẽ để cung cấp một khuôn khổ an toàn toàn diện cho người dùng cuối.
Một số biện pháp bảo mật được áp dụng bao gồm tích hợp chứng nhận SSL,
lưu trữ trên máy chủ bảo mật, cập nhật bảo mật thường xuyên, xác thực sinh
trắc học và đa yếu tố cũng như xác thực quyền truy cập, cùng các biện pháp
khác.
Bảo trì
Một trong những thách thức phát triển Website quan trọng mà các nhà
phát triển phải đối mặt là sau khi triển khai dự án của họ, đặc biệt là trong
trường hợp các trang Website đi vào hoạt động. Chắc chắn sẽ có các vấn đề và
lỗi khác nhau đối với các ứng dụng Website mới được tạo; do đó, cung cấp
bảo trì hiệu quả và hỗ trợ sau khi ra mắt là một phần quan trọng của quá trình
phát triển Website.
Giải pháp bảo trì
Điều quan trọng là cung cấp bảo trì liên tục cho các ứng dụng Website
của lập trình viên thông qua giám sát 24/7 và kiểm tra thường xuyên. Một
trong những khía cạnh quan trọng để đảm bảo hiệu suất trang Website mượt
mà là giảm sự phụ thuộc bằng cách sử dụng kiến trúc vi dịch vụ để cải thiện
hiệu quả và hiệu suất. Điều bắt buộc là phải có một chiến lược bảo trì được
xác định rõ ràng cho một quy trình có cấu trúc hơn nhằm đảm bảo hiệu suất
cao cho các dự án Website của lập trình viên.

1.2. PHƯƠNG PHÁP LẬP TRÌNH WEBSITE

Các thành phần để lập trình Website bao gồm [4]:

18
 Ngôn ngữ lập trình: Đây là ngôn ngữ được sử dụng để viết mã cho
Website. Các ngôn ngữ lập trình phổ biến trong lập trình Website bao gồm
HTML, CSS, JavaScript, PHP, Python, Ruby, Java, C# và nhiều ngôn ngữ
khác.
Framework: Framework là một bộ công cụ được thiết kế để giúp lập
trình viên xây dựng Website một cách nhanh chóng và dễ dàng hơn. Nó bao
gồm các thư viện, tiện ích và mô hình được thiết kế sẵn để giúp tăng tốc quá
trình phát triển.
Cơ sở dữ liệu: Cơ sở dữ liệu là nơi lưu trữ các thông tin về người dùng,
nội dung Website và các thông tin khác liên quan đến Website. Các cơ sở dữ
liệu phổ biến trong lập trình Website bao gồm MySQL, PostgreSQL,
MongoDB, Oracle và Microsoft SQL Server.
Giao diện người dùng: Giao diện người dùng là nơi mà người dùng
tương tác với Website. Nó bao gồm các thành phần như nút, form, menu, hình
ảnh, video và nội dung khác.
Website server: Website server là một phần mềm chạy trên máy chủ và
đảm nhiệm vai trò như là cầu nối giữa trình duyệt Website và các tài nguyên
được lưu trữ trên máy chủ. Các Website server phổ biến bao gồm Apache,
Nginx và IIS.
1.2.1. Cơ sở dữ liệu (Database)
Cơ sở dữ liệu là một hệ thống tổ chức và lưu trữ dữ liệu theo một cách
cấu trúc nhất định, cho phép dữ liệu được truy xuất và quản lý một cách hiệu
quả. Cơ sở dữ liệu có thể được lưu trữ trên một hoặc nhiều máy chủ và được
truy cập thông qua một phần mềm quản lý cơ sở dữ liệu (DBMS). Error! R
eference source not found. minh họa một số câu lệnh và kết quả trong
database.
19
 Hình 1.12. Database

Có nhiều loại cơ sở dữ liệu khác nhau, bao gồm [5]:

• Cơ sở dữ liệu quan hệ (Relational Database): là loại cơ sở dữ liệu phổ biến

nhất, trong đó dữ liệu được tổ chức thành các bảng có liên quan với nhau.
Các bảng này được kết nối với nhau thông qua các khóa ngoại và khóa
chính.

• Cơ sở dữ liệu phi quan hệ (Non-Relational Database): là loại cơ sở dữ liệu

không phụ thuộc vào mối quan hệ giữa các bảng. Thay vào đó, dữ liệu được
lưu trữ dưới dạng tài liệu (document), đồ thị (graph) hoặc các tập hợp (set).

• Cơ sở dữ liệu cục bộ (Local Database): được lưu trữ trên máy tính của người
dùng và chỉ có thể được truy cập từ đó.

• Cơ sở dữ liệu trực tuyến (Online Database): được lưu trữ trên máy chủ và có

thể được truy cập từ bất kỳ địa điểm nào thông qua Internet. Các DBMS phổ
biến bao gồm MySQL, Oracle, Microsoft SQL Server, MongoDB và
PostgreSQL.
MongoDB là cơ sở dữ liệu NoSQL hướng tài liệu được sử dụng để lưu
trữ dữ liệu khối lượng lớn. MongoDB là một cơ sở dữ liệu ra đời vào khoảng
giữa những năm 2000. Nó thuộc danh mục cơ sở dữ liệu NoSQL. Loại DBMS
này sử dụng lược đồ động nghĩa là lập trình viên có thể tạo bản ghi mà không
cần xác định cấu trúc trước, chẳng hạn như trường hoặc loại và giá trị của
chúng. MongoDB cho phép lập trình viên thay đổi cấu trúc của các bản ghi mà
20

được gọi là tài liệu bằng cách thêm các trường mới hoặc xóa các trường hiện
có [6].
MYSQL là một hệ thống DBMS phổ biến và được sử dụng rộng rãi. Mã
nguồn của MYSQL có sẵn theo GNU GPL. Dự án được sở hữu và duy trì bởi
Tập đoàn Oracle. Nó là một RDBMS (Hệ thống quản lý cơ sở dữ liệu quan hệ)
và hoạt động chủ yếu trên mô hình cơ sở dữ liệu quan hệ. Nó làm cho việc
quản trị cơ sở dữ liệu dễ dàng và linh hoạt hơn. Trong MySQL, lập trình viên
cần xác định trước lược đồ cơ sở dữ liệu dựa trên các yêu cầu của mình và
thiết lập các quy tắc giúp lập trình viên quản lý mối quan hệ giữa các trường
trong bảng của mình [6].
1.2.2. Backend
Backend là mã chạy trên máy chủ, nhận yêu cầu từ máy khách và chứa
logic để gửi dữ liệu thích hợp trở lại máy khách. Back-end cũng bao gồm cơ
sở dữ liệu, sẽ lưu trữ liên tục tất cả dữ liệu cho ứng dụng. Bài viết này tập
trung vào phần cứng và phần mềm phía máy chủ giúp thực hiện điều này.
Hình 1.13 minh họa thành phần cần thiết để xây dựng backend.

Hình 1.13. Backend

Back-end là tất cả công nghệ cần thiết để xử lý yêu cầu đến, tạo và gửi
phản hồi cho khách hàng. Điều này thường bao gồm ba phần chính:
21
• Máy chủ: Đây là máy tính nhận yêu cầu.

• Ứng dụng: Đây là ứng dụng chạy trên máy chủ lắng nghe các yêu cầu, truy

xuất thông tin từ cơ sở dữ liệu và gửi phản hồi.

• Kho dữ liệu: Cơ sở dữ liệu được sử dụng để tổ chức và duy trì dữ liệu. Một

số mã thường được sử dụng để xây dựng backend: PHP và Javascript [7] PHP
là ngôn ngữ kịch bản mã nguồn mở phía máy chủ được sử dụng rộng rãi, dễ
học và sử dụng mạnh mẽ. Nó được sử dụng để tạo mọi thứ từ các Trang
Website nhỏ và các ứng dụng cơ bản đến các hệ thống thương mại điện tử và
hệ thống quản lý nội dung phức tạp.
JS, hay JavaScript, là một trong những ngôn ngữ kịch bản phổ biến và
được sử dụng phổ biến nhất trên thế giới . JavaScript là ngôn ngữ lập trình
thường được sử dụng để tạo các trang web động, ứng dụng web và thiết bị di
động cũng như trò chơi.
Để hỗ trợ xây dựng backend dễ dàng và nhanh chóng có các Framework hỗ
trợ như Expressjs, Larvarel
Express.js là một framework được xây dựng dựa trên Node.js. Nó được
tạo ra để nhanh chóng, đơn giản và dễ sử dụng. Nhiều tính năng được Express
hỗ trợ, bao gồm routing, sessions và Templating Engine. Vì Express được phát
triển bằng JavaScript nên đôi khi nó được gọi là công nghệ hiện đại [8].
Laravel là một Framework của PHP mã nguồn mở cung cấp tài liệu định
tuyến và HTML ở phía máy chủ. Được tạo bởi Tylor Otwell, Laravel dựa trên
Symfony, cung cấp các thành phần PHP có thể tái sử dụng. Lợi ích chính dựa
trên phía máy chủ, tức là các ứng dụng kiến trúc được xác định trước có thể
được phát triển thông qua các mẫu tùy chỉnh, logic, cổng web và ứng dụng
toàn ngăn xếp. Hơn nữa, lập trình viên cũng sẽ có thể quản lý và duy trì các
dự án SaaS [9].
1.2.3. Frontend
Frontend là một phần của quá trình phát triển Website, tập trung vào
giao diện người dùng và các trải nghiệm trên trình duyệt. Frontend thường
bao gồm
 22

các ngôn ngữ lập trình Website như HTML, CSS và JavaScript, và các công
cụ phát triển Website như trình biên tập mã nguồn, trình duyệt và khung thực
thi JavaScript. Hình 1.14 minh họa ý tưởng cốt lõi của frontend.

Hình 1.14: Frontend

Các công việc chính của frontend bao gồm:

• Thiết kế và phát triển giao diện người dùng của Website

• Tạo ra các tài nguyên Website như hình ảnh, biểu tượng và các tệp CSS và

JavaScript

• Thử nghiệm và sửa lỗi trên nhiều trình duyệt khác nhau

• Cải thiện hiệu suất và khả năng tương thích của Website

Frontend cũng đóng vai trò quan trọng trong việc tăng trải nghiệm
người dùng của Website. Những công cụ và kỹ thuật mới như Responsive
Website Design, Progressive Website App và Single-Page Applications giúp
cải thiện tính năng và hiệu quả của frontend, giúp trang Website của lập trình
viên hoạt động mượt mà hơn và cung cấp trải nghiệm người dùng tốt hơn. Có
một số template engine thông dụng giúp xây dựng frontend như Mustache,
Handlebars and Angularjs [10]:
Mustache là một ngôn ngữ template nhẹ với cú pháp dễ đọc và thông số
23
kỹ thuật toàn diện. Mustache cũng được coi là hệ thống logic-less đơn giản vì
nó không đi kèm với các câu lệnh luồng điều khiển rõ ràng. Hệ thống tạo
khuôn mẫu được gọi là ria mép vì mã hóa được đặc trưng bởi việc sử dụng
nhiều dấu ngoặc nhọn thường giống với bộ ria mép. Dưới đây được liệt kê là
một số ưu điểm của Mustache.
Handlebars.js là một templating engine logic giúp tách biệt mã HTML
và phần logic của mã, đồng thời cho phép lập trình viên viết code rõ ràng hơn.
Handlebars.js đơn giản hóa khối lượng công việc bằng cách giảm số lượng
vòng lặp, mảng và câu lệnh mà lập trình viên phải viết để đạt được những gì
Handlebars.js có thể làm với các mẫu. Handlebars.js là một phía templating
engine máy khách (mặc dù nó cũng có thể được sử dụng trên máy chủ) cho
JavaScript. Đó là thư viện JavaScript mà lập trình viên đưa vào trang của mình
giống như lập trình viên đưa vào bất kỳ tệp JavaScript nào khác. Nó được viết
bằng JavaScript và Handlebars.js là một trình biên dịch lấy các biểu thức
HTML và Handlebars rồi biên dịch chúng thành một hàm JavaScript.
1.2.4. Server
Một server là một thiết bị hoặc phần mềm có khả năng cung cấp dịch vụ
hoặc tài nguyên cho các máy khách có yêu cầu. Trong lập trình Website,
server là máy tính hoặc thiết bị mạng có khả năng lưu trữ và cung cấp nội
dung Website cho các máy khách. Các server Website thường được cấu hình
với phần mềm máy chủ Website như Apache, Nginx, Microsoft IIS hoặc các
giải pháp đám mây như Amazon Website Services hoặc Microsoft Azure. Các
server Website có thể cung cấp nhiều loại dịch vụ và ứng dụng Website cho
người dùng, bao gồm trang Website tĩnh, trang Website động, dịch vụ
Website, email, cơ sở dữ liệu và nhiều hơn nữa.
Máy chủ chạy Website
Máy chủ chạy Website là một máy tính hoặc thiết bị mạng được cấu
hình để cung cấp nội dung Website cho các máy khách thông qua giao thức
HTTP (Hyper Text Transfer Protocol). Máy chủ chạy Website được cài đặt
các phần
24
mềm máy chủ Website như Apache, Nginx hoặc Microsoft IIS để phục vụ nội
dung Website và các ứng dụng có liên quan trên mạng. Máy chủ Website
thường được đặt trong các trung tâm dữ liệu hoặc các trang Website lớn hoạt
động một cách riêng biệt hoặc trong một môi trường máy chủ ảo để tăng tính
sẵn sàng và khả năng mở rộng. Các máy khách truy cập vào máy chủ Website
thông qua tên miền hoặc địa chỉ IP của máy chủ và yêu cầu các tài nguyên như
Website, hình ảnh hoặc tài liệu từ máy chủ.
Cách phương thức chính giữa client và server (get, post)
Trong Website, để giao tiếp giữa máy khách (client) và máy chủ
(server), hai phương thức chính được sử dụng là GET và POST.
GET: Phương thức GET được sử dụng để yêu cầu dữ liệu từ server. Khi
máy khách gửi yêu cầu GET, nó yêu cầu một tài nguyên (ví dụ: một Website)
từ máy chủ và máy chủ sẽ trả về tài nguyên đó trong phản hồi. Dữ liệu được
gửi bằng phương thức GET thường được gửi dưới dạng các tham số trên URL.
Ví dụ: http://example.com/search?query=keyword
POST: Phương thức POST được sử dụng để gửi dữ liệu từ máy khách
đến máy chủ. Khi máy khách gửi yêu cầu POST, nó gửi dữ liệu đến máy chủ
thông qua một yêu cầu HTTP và máy chủ sẽ xử lý và trả về phản hồi. Dữ liệu
được gửi bằng phương thức POST thường được gửi trong phần thân của yêu
cầu HTTP và không hiển thị trên URL.
So sánh sự khác nhau giữa GET và POST:

• GET thường được sử dụng để yêu cầu dữ liệu, trong khi POST được sử dụng

để gửi dữ liệu.

• Dữ liệu được gửi bằng phương thức GET thường được hiển thị trên URL,

trong khi dữ liệu được gửi bằng phương thức POST được gửi trong phần
thân của yêu cầu HTTP và không hiển thị trên URL.

• Phương thức GET thường nhanh hơn và dễ dàng cho việc truy cập Website,

nhưng phương thức POST được sử dụng nhiều hơn để gửi dữ liệu vì nó
được coi là an toàn hơn với các thông tin nhạy cảm.
25
1.3. WEBSITE THỐNG KÊ KHỐI LƯỢNG GIẢNG DẠY VÀ CUNG
CẤP THÔNG TIN NGHIÊN CỨU KHOA HỌC

Các vấn đề mà thầy cô gặp phải trong quá trình thống kê số lượng giảng
dạy là rất phổ biến. Những vấn đề này có thể gây ra những sai sót không đáng
có, mất thời gian và tốn kém trong việc lưu trữ thông tin và cập nhật dữ liệu.
Một trong những giải pháp để giảm thiểu các vấn đề này là sử dụng
công nghệ thông tin để tự động hóa quá trình thống kê số lượng giảng dạy.
Thay vì sử dụng các phương pháp thủ công, các thông tin về số lượng giảng
dạy có thể được lưu trữ và quản lý thông qua hệ thống quản lý cơ sở dữ liệu.
Việc thiết kế một Website phục vụ hoạt động giảng dạy và nghiên cứu
cũng có thể giúp giảm thiểu các vấn đề này. Trang Website này có thể cung
cấp các tính năng và chức năng để đăng nhập và lưu trữ thông tin về số lượng
giảng dạy của các giáo viên, đồng thời cũng cung cấp các công cụ để thống kê
và quản lý dữ liệu một cách chính xác và hiệu quả. Việc thiết kế trang
Website này cần được đảm bảo tính bảo mật và độ tin cậy để đảm bảo an toàn
cho dữ
liệu của giảng viên. Thiết kế Website như vậy sẽ được hướng dẫn chi tiết ở
Chương 2.

1.4. KẾT LUẬN CHƯƠNG 1

Chương 1 của đồ án đã phác họa tổng quan về một Website và cách để

xây dựng nó, chương này đã giới thiệu về các công cụ, phương pháp và quy
trình cần thiết để xây dựng một Website, đồng thời mô tả chung về chức năng
và tính năng của Website. Trong chương tiếp theo, đồ án sẽ đi sâu vào phân
tích và xây dựng một Website cho “Thiết kế Website phục vụ hoạt động giảng
dạy và nghiên cứu cho Khoa Điện tử”.
26

CHƯƠNG 2. THIẾT KẾ WEBSITE THỐNG KÊ GIẢNG DẠY

2.1. PHÂN TÍCH YÊU CẦU BÀI TOÁN

2.1.1. Mục tiêu thiết kế

Thiết kế được Website có các tính năng sau:
• Hỗ trợ giảng viên thống kê khối lượng giảng dạy, xem thông tin nghiên cứu
khoa học

• Cho phép nhập, sửa đổi lịch giảng dạy

• Hiển thị thông tin về nghiên cứu của khoa Điện tử

• Tính năng đăng nhập và phân quyền cho người dùng

• Triển khai Website trên Internet

2.1.2. Điều kiện ràng buộc của thiết kế

• Thống kê khối lượng giảng dạy của Giảng viên trong Khoa Điện tử theo

tháng

• Hỗ trợ nhập tập tin chứa thông tin thực hành theo tuần

• Yêu cầu thiết kế cho phép nhập, sửa lịch giảng dạy

• Yêu cầu thiết kế cho điền thông tin thực hành

• Yêu cầu thiết kế cho phép xem thông tin nghiên cứu

2.1.3. Thông số kỹ thuật

• Độ chính xác: yêu cầu chính xác tương đối về các dữ liệu được thống kê •

Thư viện để xây dựng backend: convert-excel-to-json, exceljs, express,

mongoose

• Thư viện để xây dựng frontend: express-handlebars, bootstrap • Thời gian

phản hồi của máy chủ khi người dùng gửi yêu cầu cần tương đối nhanh

• Giao diện cần đơn giản, dễ thao tác và sử dụng

2.1.4. Tiêu chí đánh giá sản phẩm

• Thống kê chính xác khối lượng giảng dạy

• Sản phẩm dễ sử dụng

 27

• Hỗ trợ điền đúng thông tin thực hành

• Các trang Website hiển thị đúng theo các đường link hồ sơ của từng người

trong nhóm nghiên cứu

2.2. THIẾT KẾ Ý TƯỞNG

2.2.1. Các phương pháp để xây dựng Website thống kê giảng dạy
Phương pháp 1

• Sử dụng Nodejs-expressjs để xây dựng Backend

• Template handlebar, HTML, CSS, Javascript xây dựng giao diện •

Sử dụng Mongodb để lưu trữ dữ liệu

Phương pháp 2

• Sử dụng PHP-Lavarel để xây dựng Backend

• Sử dụng HTML, CSS, Javascript xây dựng giao diện

• Sử dụng MySQL để lưu trữ dữ liệu

2.2.2. Phân tích các phương pháp

Phương pháp 1
Nodejs-express.js [8]
Ưu điểm của Expess.js:

• Express có tốc độ xử lí nhanh

• Express làm cho các ứng dụng Website nhanh hơn và trong thời gian ngắn

hơn.

• Express có sự hỗ trợ cộng đồng đáng kể.

• Express cho phép các nhà phát triển sử dụng JavaScript trên cả máy chủ và
máy khách.
• Express có hỗ trợ Công cụ V8 của Google.

• Express bao gồm một hệ thống mô-đun giúp việc chia sẻ mã giữa các

chương trình Express trở nên đơn giản.

• Vì xây dựng trên Nodejs nên Express có trình quản lý gói Node.js (npm) mở
rộng hơn.
28

Nhược điểm của Express.js:

• Không hoạt động tốt hơn trên các tác vụ sử dụng nhiều CPU • Các API

được sử dụng không ổn định vì chúng thay đổi thường xuyên • Thiếu hỗ

trợ thư viện là một rủi ro đối với mã

• Làm việc với cơ sở dữ liệu quan hệ có thể phức tạp trong Expressjs
Template Handlebar [11]
Ưu điểm của Handlebarjs:

• Handlebars biên dịch mã HTML thay vì thông dịch đẩy nhanh tốc độ xử lí

• Hỗ trợ tách riêng mã HTML giúp mã nguồn rõ ràng hơn

• Xử lí các đoạn mã HTML lặp lại

• Là ngôn ngữ ít logic

Nhược điểm của Handlebarjs:

• Không phù hợp với single-page application

• Khi sử dụng Handlebarjs sẽ gặp khó khăn khi sử dụng một số framework

khác

• Để dùng Handlebarsjs cần học một số cú pháp và quy tắc mới, những quy
tắc này có thể không tương thích với các công cụ hoặc ngôn ngữ khác. •

Handlebarsjs không hỗ trợ tất cả các tính năng hoặc chức năng cần cho các
trang Website như tính tương tác, quản lý trạng thái hoặc định tuyến.
MongoDB [6]
Ưu điểm của MongoDB:

• MongoDB rất linh hoạt và có thể thích ứng với các tình huống và yêu cầu

thực tế.

• Các truy vấn có thể được thực hiện để trả về một số trường nhất định trong

tài liệu.

• MongoDB hỗ trợ trường, truy vấn dựa trên phạm vi, biểu thức chính quy,
v.v. để tìm kiếm dữ liệu từ dữ liệu được lưu trữ.

• MongoDB là một hệ thống DBMS rất dễ sử dụng, có thể dễ dàng tăng hoặc
giảm quy mô.
29

• MongoDB giúp sử dụng bộ nhớ trong để lưu trữ các bộ dữ liệu tạm thời đang
hoạt động với tốc độ nhanh hơn nhiều.

• MongoDB cung cấp các chỉ mục chính và phụ trên bất kỳ trường nào.

• MongoDB hỗ trợ sao chép cơ sở dữ liệu.

• Lập trình viên có thể sử dụng MongoDB làm hệ thống lưu trữ tệp được gọi
là GridFS.

• MongoDB cung cấp nhiều phương pháp khác nhau để thực hiện các hoạt

động tổng hợp trên dữ liệu như đường dẫn tổng hợp, thu nhỏ bản đồ hoặc
các lệnh tổng hợp mục tiêu đơn lẻ.

• MongoDB cho phép lưu trữ bất kỳ loại tệp nào có kích thước bất kỳ mà
 không ảnh hưởng đến ngăn xếp

• MongoDB về cơ bản sử dụng các đối tượng JavaScript thay cho thủ tục. •

MongoDB hỗ trợ loại bộ sưu tập đặc biệt như TTL (Time-To-Live) để lưu trữ
dữ liệu sẽ hết hạn vào một thời điểm nhất định

• Lược đồ cơ sở dữ liệu động được sử dụng trong MongoDB được gọi là

JSON • Các chỉ mục có thể được tạo để cải thiện hiệu suất tìm kiếm trong

MongoDB. Bất kỳ trường nào trong tài liệu MongoDB đều có thể được lập

chỉ mục. • Bản sao – MongoDB có thể cung cấp tính sẵn sàng cao với các bộ

bản sao • MongoDB có thể chạy trên nhiều máy chủ, cân bằng tải và/hoặc sao

chép dữ liệu để duy trì hoạt động của hệ thống trong trường hợp lỗi phần
cứng. Nhược điểm của MongoDB:

• MongoDB không phải là ACID mạnh (Nguyên tử, Tính nhất quán, Cách ly

& Độ bền) khi so sánh với nhiều hệ thống RDBMS khác.

• Các giao dịch sử dụng MongoDB rất phức tạp

• Trong MongoDB, không có điều khoản nào cho Thủ tục lưu trữ hoặc chức

năng, vì vậy lập trình viên không thể triển khai bất kỳ logic nghiệp vụ nào ở
cấp cơ sở dữ liệu, điều mà lập trình viên có thể thực hiện trong bất kỳ hệ
thống RDBMS nào.
30

Phương pháp 2
Laravel – PHP [9]
Ưu điểm của Laravel:

• Bảo mật: Laravel sử dụng nhiều phương pháp xác thực và ủy quyền để ngăn

chặn mọi hình thức truy cập trái phép. Vì vậy, bất kỳ dữ liệu nào mà
Laravel sử dụng đều an toàn và bảo mật. Và để bảo vệ bằng mật khẩu,
 Laravel mã hóa nó tương tự như WhatsApp. Mật khẩu không bao giờ được
lưu trữ trực tiếp bên trong cơ sở dữ liệu.

• Tài liệu: Tất cả các phiên bản của Laravel framework đều có tài liệu đầy đủ.

Tài liệu này bao gồm thông tin về các phương pháp viết mã, kiểu và lớp.
Những loại tài liệu này làm cho Laravel trở thành một framework thân thiện
với nhà phát triển.

• Khả năng tương thích với PHP: Các phiên bản PHP mới nhất được hỗ trợ

nguyên bản bởi khuôn khổ Laravel. Do đó, có thể bao gồm các tính năng và
bản cập nhật khác nhau của PHP. Một số trong số đó là, không gian tên,
chức năng quá tải và ẩn danh. Không giống như các framework khác, các
nhà phát triển Laravel được phép trực tiếp sử dụng chúng.

• Khả năng sử dụng lại mã: Laravel có khả năng sử dụng lại mã bằng cách

thực hiện theo phương pháp chỉnh sửa gói. Ví dụ: lập trình viên có thể chỉnh
sửa các trang để thêm các tính năng bổ sung. Các gói đã chỉnh sửa có thể
được sử dụng lại nhiều lần cho ứng dụng. Điều này đảm bảo rằng lập trình
viên có thể dễ dàng tùy chỉnh các dự án.

• Hỗ trợ cộng đồng: Bản chất mã nguồn mở của Laravel đã góp phần vào sự

phổ biến của nó. Nhiều người bắt đầu làm việc để cải thiện nó. Cộng đồng lớn
các nhà phát triển này sẵn sàng giúp lập trình viên giải quyết các vấn đề mà
lập trình viên gặp phải khi sử dụng công cụ này. Với mục đích này, có rất
nhiều diễn đàn cộng đồng và trang Website chuyên dụng. Nhược điểm của
Laravel:

• Học tập, tìm hiểu: Mặc dù Laravel đi kèm với một tài liệu toàn diện, nhưng
31

nó có thể khiến người dùng bình thường choáng ngợp. Với rất nhiều tài liệu
ngay từ cái nhìn đầu tiên, giai đoạn đầu làm việc với Laravel có thể trở nên
khó khăn. Vì vậy, người dùng cần trải qua các khóa đào tạo khác nhau để
thành thạo framework này. Hơn nữa, khung được xây dựng thông qua việc
sử dụng các quy tắc hướng đối tượng. Do đó, trước khi bắt đầu sử dụng
 Laravel, lập trình viên phải làm quen với các khái niệm về kiến trúc MVC
và hướng đối tượng.

• Nâng cấp Framework: Tương tự như các khung PHP khác, Laravel cũng gặp

sự cố khi nâng cấp phiên bản. Một số cập nhật được biết là làm gián đoạn
chức năng của Laravel. Có lẽ, do điều này có thể có sự gián đoạn trong dự
án. Vì vậy, các nhà phát triển cần lưu ý trước khi nâng cấp một trang
Website hoặc ứng dụng.

• Chuyên môn kỹ thuật: Laravel bao gồm nhiều tính năng tự động có thể làm

cho khung dễ sử dụng. Nhưng có những tính năng phức tạp khác không phải
ai cũng có thể hiểu được. Vì vậy, luôn thiếu các nhà phát triển Laravel lành
nghề trên thị trường.

• Công cụ quản lí gói Composer: Composer được sử dụng trong Laravel với

mục đích quản lý các phụ thuộc và cài đặt chúng. Mặc dù Laravel hỗ trợ
composer, nhưng sức mạnh không đạt đến mức mong đợi. Đặc biệt, khi so
sánh với các framework khác như npm, pip và Ruby gems. Hầu hết các nhà
phát triển nghiệp dư đều gặp khó khăn khi xử lý khung này.

• Phương thức thanh toán: Laravel không hỗ trợ tính năng thanh toán. Các nhà

phát triển cần dựa vào các thư viện khung để bao gồm phương thức thanh
toán. Việc tích hợp các phương thức thanh toán như PayPal và Stripe có thể
tạm thời giải quyết vấn đề. Nếu quá trình này quá rườm rà, lập trình viên có
thể chọn sử dụng một khung khác với bộ xử lý thanh toán của bên thứ ba.
MySQL [6]
Ưu điểm của MySQL:

• Hỗ trợ các tính năng như Master-Slave Replication, Scale-Out

32

• Nó hỗ trợ báo cáo giảm tải, Phân phối dữ liệu địa lý, v.v. • Chi phí rất thấp

với công cụ lưu trữ MyISAM khi được sử dụng cho các ứng dụng chỉ đọc
• Hỗ trợ công cụ lưu trữ bộ nhớ cho các bảng được sử dụng thường xuyên • Bộ

đệm truy vấn cho các câu lệnh được sử dụng nhiều lần • Lập trình viên có thể

dễ dàng tìm hiểu và khắc phục sự cố MySQL từ các nguồn khác nhau như
blog, sách.
Nhược điểm của MySQL:

• Các giao dịch liên quan đến danh mục hệ thống không tuân thủ ACID • Đôi

khi sự cố máy chủ có thể làm hỏng danh mục hệ thống • Các thủ tục được lưu

trữ không được lưu trong bộ nhớ cache • Hầu hết các bảng MYSQL được sử

dụng cho thủ tục hoặc trình kích hoạt đều được khóa trước.
Dựa vào ưu nhược điểm của hai phương pháp trên, nhóm đã quyết
định sử dụng phương pháp 1 vì:

• Expressjs hỗ trợ phát triển Website một các nhanh chóng và đơn giản. •

Expressjs cho phép sử dụng Javascript trên cả máy chủ và máy khách điều
này khiến việc phát triển Website full-stack trở nên dễ dàng và nhất quán.
Hơn cả, Javacript hiện nay được coi là một ngôn ngữ phát triển Website hiện
đại

• Handlebarjs giúp tách riêng mã HTML khiến cho cấu trúc của mã nguồn rõ
ràng dễ dàng thiết kế theo mô hình MVC

• Handlebarjs cũng hỗ trợ việc hiển thị các môn học một cách dễ dàng tránh

lặp lại quá nhiều mã HTML

• MongoBD không yêu cầu lược đồ giúp quá trình xây dựng dữ liệu nhanh

chóng

• MongoDB hỗ trợ truy vấn đến một trường một cách dễ dàng và chính xác •

Ứng dụng không cần phát triển trên nhiều ngôn ngữ nên Expressjs và
Handlebarjs chỉ tương thích với Javacript không gây trở ngại cho quá trình
 33

phát triển Website

• Dữ liệu đầu vào đơn giản không yêu cầu quá chặt chẽ về quan hệ nên

MongoDB có thể đáp ứng được nhờ thư viện Mongoose

• Expressjs làm việc phức tạp với cơ sở dữ liệu quan hệ nên chọn dữ liệu phi

quan hệ như MongoBD sẽ giúp công việc trở nên thuận lợi và dễ dàng hơn

2.3. THIẾT KẾ CHI TIẾT

2.3.1. Sơ đồ khối chung

Hình 2.1. Sơ đồ khối chung

Controller: Là thành phần cho phép kết nối giữa View và Model nên nó
đóng vai trò trung gian. Controller không phải lo lắng về việc xử lý logic dữ
liệu, nó chỉ báo cho mô hình biết phải làm gì. Nó xử lý tất cả logic nghiệp vụ
và các yêu cầu đến, thao tác dữ liệu bằng cách sử dụng thành phần Model và
tương tác với View để hiển thị đầu ra cuối cùng.
Model: Tương ứng với tất cả logic liên quan đến dữ liệu mà người dùng
làm việc cùng. Điều này có thể đại diện cho dữ liệu đang được truyền giữa các
thành phần View và Controller hoặc bất kỳ dữ liệu nào khác liên quan đến
logic nghiệp vụ. Nó có thể thêm hoặc lấy dữ liệu từ cơ sở dữ liệu. Nó đáp ứng
yêu cầu của Controller vì Controller không thể tự tương tác với cơ sở dữ liệu.
Mô hình tương tác với cơ sở dữ liệu và trả lại dữ liệu cần thiết cho Controller.
34
 View: được sử dụng cho tất cả logic giao diện người dùng của ứng
dụng. Nó tạo ra một giao diện người dùng cho người dùng. Chế độ xem được
tạo bởi dữ liệu được thu thập bởi Model nhưng những dữ liệu này không được
lấy trực tiếp mà thông qua Controller. Nó chỉ tương tác với Controller.
Client: là các trình duyệt Website có vai trò là máy khách
Database: là cơ sở dữ liệu của Website

Sơ đồ khối cho Controller

Hình 2.2. Sơ đồ khối cho Controller

Khi có yêu cầu từ Client gửi đến 3 khối:

• Khối thống kê khối lượng giảng dạy: Gửi yêu cầu đến Model để đọc dữ liệu

từ database, sau khi database phản hồi lại dữ liệu, thực hiện thống kê gửi kết
quả đến View, View sẽ kết hợp với dữ liệu đó với các logic và phản hồi lại
Khối thống kê. Sau đó Khối thống kê sẽ gửi đến Client.

• Hỗ trợ nhập thông tin thực hành: Gửi yêu cầu đến Model để đọc dữ liệu từ

database, sau khi database phản hồi lại dữ liệu gửi dữ liệu đó đến View,
View sẽ kết hợp với dữ liệu đó với các logic và phản hồi lại Khối thống kê.
Sau đó Khối thống kê sẽ gửi đến Client.

• Nhập dữ liệu: Đọc tập tin nhận, gửi dữ liệu đến Model để lưu dữ liệu vào

database, gửi yêu cầu lấy giao diện nhập mới đến View, sau khi nhận được
gửi về Client
35
2.3.2. Thiết kế từng thành phần cơ bản
Khối View
Giao diện trang chủ được minh họa như Hình 2.3

Hình 2.3. Trang chủ

Giao diện trang tìm kiếm được minh họa như Hình 2.4

Hình 2.4. Trang tìm kiếm

36

Giao diện trang nhập dữ liệu được minh họa như Hình 2.5
 Hình 2.5. Trang nhập dữ liệu

Giao diện trang thống kê khối lượng giảng dạy được minh họa như Hình 2.6

Hình 2.6. Trang thống kê khối lượng giảng dạy

37

Giao diện trang hỗ trợ thông tin thực hành được minh họa như Hình 2.7
 Hình 2.7. Trang hỗ trợ điền thông tin thực hành

Giao diện trang thông tin nghiên cứu khoa học được minh họa như Hình 2.8

Hình 2.8. Trang thông tin nghiên cứu khoa học

Giao diện trang nhóm nghiên cứu khoa học được minh họa như Hình 2.9

Hình 2.9. Trang nhóm nghiên cứu khoa học

38

Giao diện trang đăng nhập được minh họa như Hình 2.10
 Hình 2.10. Trang đăng nhập

Giao diện hướng dẫn sử dụng được minh họa như Hình 2.11

Hình 2.11. Trang hướng dẫn sử dụng

39

Khối Model
Bảng dữ liệu cho lịch đầy đủ Bảng 2.1
Field Type Description
Bomon String Tên bộ môn
Malop String Mã lớp
He String Hệ
Nganh String Ngành
Khoa String Khóa
Giangvien String Giảng viên
 SoSV String Số sinh viên
Hinhthuc String LT/ TH/ ĐA/ TTTN
Ngay String Tuần
Sotietday String Số tiết dạy trong tuần

Bảng 2.1. Bảng dữ liệu cho lịch đẩy đủ

Bảng dữ liệu cho lịch thực hành Bảng 2.2

Field Type Description
Bo_mon String Tên bộ môn
He String Hệ
Khoa String Khóa
Ma_lop String Mã lớp
Ten_nhom String Tên nhóm thực hành
Tong_so_nhom String Tổng số nhóm thực hành
SL_HS_SV String Số lượng sinh viên
Hocphan_Monhoc String Tên học phần
Ca_thu_2 String Ca dạy vào thứ 2
Phong_thu_2 String Phòng dạy vào thứ 2
Ca_thu_3 String Ca dạy vào thứ 3

40
Field Type Description
Phong_thu_3 String Phòng dạy vào thứ 3
Ca_thu_4 String Ca dạy vào thứ 4
Phong_thu_4 String Phòng dạy vào thứ 4
Ca_thu_5 String Ca dạy vào thứ 5
Phong_thu_5 String Phòng dạy vào thứ 5
 Ca_thu_6 String Ca dạy vào thứ 6
Phong_thu_6 String Phòng dạy vào thứ 6
Ca_thu_7 String Ca dạy vào thứ 7
Phong_thu_7 String Phòng dạy vào thứ 7
Ca_chu_nhat String Ca dạy vào chủ nhật
Phong_chu_nhat String Phòng dạy chủ nhật
Giang_vien String Tên giảng viên
Ngay String Tuần
Thang String Tháng
Nam String Năm

Bảng 2.2. Bảng dữ liệu cho lịch thực hành

Khối Controller

Lưu đồ thuật toán nhập lịch đầy đủ được minh hoạ trong Hình 2.12: • Trước

khi nhập lịch đầy đủ người dùng cần đăng nhập tài khoản được cấp quyền
admin, nếu không sẽ không thử thực hiện tiếp

• Tiếp đó người dùng cần nhập tập tin của lịch đầy đủ.

• Nếu tập tin có đúng định dạng (tập tin Excel có đuôi mở rộng .xlsx) thì trình

duyệt sẽ gửi yêu cầu lên server với phương thức post kèm theo dữ liệu là tập
tin vừa nhập, nếu sai hoặc chưa nhập tập tin hệ thống sẽ thông báo lỗi và
yêu cầu nhập lại.

• Sau khi server nhận được yêu cầu sẽ tiến hành đọc tập tin nhận được. Lưu

dữ liệu với các biến local với các trường dữ liệu như bảng dữ liệu lịch đầy
đủ ở phần Khối Model
41

• Tiến hành xóa những dữ liệu có trường dữ liệu “Ngay” giống với dữ liệu của
 tập tin đã nhập với phương thức deleteMany()

• Sau khi xóa xong, dữ liệu sẽ được lưu vào MongoDB với phương thức
create()

Hình 2.12. Lưu đồ thuật toán nhập lịch đầy đủ

Lưu đồ thuật toán nhập lịch thực hành được minh hoạ trong Hình 2.13: •

Trước khi nhập lịch đầy đủ người dùng cần đăng nhập tài khoản được cấp
quyền admin, nếu không sẽ không thể thực hiện tiếp.

• Khi cần nhập lịch đầy đủ người dùng sẽ nhập tập tin của lịch thực hành và

ngày thứ Hai của tuần cần nhập.

• Nếu tập tin có đúng định dạng (tập tin Excel có đuôi mở rộng .xlsx) và đầy

đủ các thông tin thì trình duyệt sẽ gửi yêu cầu lên server với phương thức
post kèm theo dữ liệu là tập tin vừa nhập, ngày thứ Hai của tuần vừa nhập
nếu sai hoặc chưa nhập đầu đủ thông tin hệ thống sẽ thông báo lỗi và yêu
cầu nhập lại.

• Sau khi server nhận được yêu cầu sẽ tiến hành đọc tập tin nhận được. Lưu

dữ liệu với các biến local với các trường dữ liệu như bảng dữ liệu lịch thực
hành ở phần Khối Model.
42
• Tiến hành xóa những dữ liệu có trường dữ liệu “Ngay” giống với dữ liệu của
ngày thứ Hai đã nhập với phương thức deleteMany().

• Sau khi xóa xong, dữ liệu sẽ được lưu vào MongoDB với phương thức
create().

Hình 2.13. Lưu đồ thuật toán nhập lịch thực hành

Lưu đồ thuật toán thống kê khối lượng giảng dạy được minh hoạ trong Hình
2.14:

• Trước khi nhập lịch đầy đủ người dùng cần đăng nhập tài khoản, nếu không

sẽ không thử thực hiện tiếp

• Khi cần thống kê khối lượng giảng dạy người dùng cần nhập tên của giảng

viên cần thống kê và các tuần của các tháng cần thống kê (Các thứ Hai của
tuần đó)

• Nếu nhập đủ thông tin thì trình duyệt sẽ gửi yêu cầu lên server với phương

thức post kèm theo dữ liệu là tên giảng viên, các ngày thứ Hai của tuần vừa
nhập nếu sai hoặc chưa nhập đầu đủ thông tin hệ thống sẽ thông báo lỗi và
yêu cầu nhập lại.

• Sau khi server nhận được yêu cầu sẽ tiến hành tìm dữ liệu từ MongoDB với
phương thức find() có trường dữ liệu “Giangvien” và “Ngay” giống với tên
 43

giảng viên và các ngày thứ Hai nhận được, sau khi tìm xong tiến hành thống
kê khối lượng giảng dạy.

• Gửi dữ liệu về khối lượng giảng dạy vừa thống kê được đến View, View sẽ
kết hợp với các logic tạo ra giao diện thống kê khối lượng giảng dạy • Gửi
giao diện vừa tạo về trình duyệt của người dùng yêu cầu.

Hình 2.14. Lưu đồ thuật toán thống kê khối lượng giảng dạy

Lưu đồ thuật toán hỗ trợ hiển thị thông tin thực hành được minh hoạ trong
Hình 2.15:

• Trước khi nhập lịch đầy đủ người dùng cần đăng nhập tài khoản, nếu không

sẽ không thử thực hiện tiếp

• Khi cần hỗ trợ nhập thông tin thực hành người dùng cần nhập tên của giảng

viên cần thống kê và các tuần của các tháng cần thống kê (Các thứ Hai của
tuần đó)

• Nếu nhập đủ thông tin thì trình duyệt sẽ gửi yêu cầu lên server với phương

thức post kèm theo dữ liệu là tên giảng viên, các ngày thứ Hai của tuần vừa
nhập nếu sai hoặc chưa nhập đầu đủ thông tin hệ thống sẽ thông báo lỗi và
yêu cầu nhập lại.

• Sau khi server nhận được yêu cầu sẽ tiến hành tìm dữ liệu từ MongoDB với

phương thức find() có trường dữ liệu “Giang_vien” và “Ngay” giống với tên
 giảng viên và các ngày thứ Hai nhận được.
44

• Gửi dữ liệu vừa tìm được đến View, View sẽ kết hợp với các logic tạo ra
giao diện hỗ trợ nhập thông tin thực hành

• Gửi giao diện vừa tạo về trình duyệt của người dùng yêu cầu.

Hình 2.15. Lưu đồ thuật toán hỗ trợ nhập thông tin thực hành

Routing
Routing trong Node.js giúp xác định ứng dụng sẽ đáp ứng như thế nào
khi người dùng tạo một request đến một endpoint (Điểm cuối) cụ thể. Điểm
cuối đó thường là một URI hoặc một đường dẫn (Path) với một Request
method (POST, PUT, GET, ...) cụ thể.
45

Hình 2.16: Routing cho các phương thức của Website

2.3.3. Triển khai Website trên Internet

Có rất nhiều nền tảng hỗ trợ triển khai dự án Website. Trong đó Amazon Web
Service là một công cụ hỗ trợ triển khai ứng dụng Website hàng đầu. Amazon
Elastic Compute Cloud (Amazon EC2) cung cấp khả năng điện toán có thể
thay đổi quy mô trong đám mây Amazon Web Services (AWS). Có thể sử
dụng Amazon EC2 để khởi chạy số lượng hoặc số lượng máy chủ ảo tùy theo
nhu cầu. Để triển khai Website trên Amazon EC2 cần tạo một máy chủ ảo,
sau đó đẩy mã nguồn lên máy chủ ảo, cài đặt và chạy mã nguồn ở đó.

2.4. KẾT LUẬN CHƯƠNG 2

Chương này đã đưa ra cấu tạo, cách hoạt động của từng thành phần của
Website phục vụ hoạt động giảng dạy và nghiên cứu cho Khoa Điện tử, đồng
thời cũng thể hiện được phương pháp thiết kế các thành phần cấu tạo nên
Website và triển khai thành một Website hoàn chỉnh. Trong chương tiếp theo,
Website đã được triển khai và được kiểm chứng về khả năng thực thi, độ chính
xác.
46

CHƯƠNG 3. THỬ NGHIỆM VÀ ĐÁNH GIÁ

3.1. VẬN HÀNH SẢN PHẨM

 Nhóm đã tạo ra được Website thực hiện đầy đủ yêu cầu của bài toán
được xác định tại Mục 2.1. Ví dụ thống kê giảng dạy của giảng viên Dương
Thị Hằng tháng 11/2022 được minh họa như bên dưới.

Hình 3.1. Ví dụ thống kê khối lượng giảng dạy của giảng viên Dương Thị Hằng

Thông tin của nhóm Nghiên cứu khoa học :

Hình 3.2. Thông tin nghiên cứu khoa học

47

3.2. THỬ NGHIỆM VÀ KIỂM CHỨNG SẢN PHẨM

Bảng thống kê số giờ giảng dạy và số giờ được thanh toán của một số
giảng viên được thể hiện ở Bảng 3.1
T11/2022 T1/2023 T3/2023
 Tổng số Tổng số Tổng số Tổng số Tổng số Tổng
giờ giờ đề giờ giờ đề giờ số giờ
giảng nghị giảng nghị giảng đề
dạy thanh dạy thanh toán dạy nghị
toán thanh
toán

Đinh Thị 92.6 92.6 0 0 117 159.3

Kim
Phượng

Lê Việt 106.8 106.8 20 20 52 84.7

Tiến

Nguyễn 117.6 117.6 0 0 28 52

Văn
Cường

Vũ Thị 129.7 129.7 36.1 36.1 116 120.6

Hoàng
Yến

Lê Mạnh 72.6 72.6 6 6 0 0

Long

Bảng 3.1. Bảng thống kê số giờ giảng dạy và số giờ được thanh toán của
một số giảng viên

Kiểm chứng sản phẩm:

Giảng viên Đinh Thị Kim Phượng.
48
 Hình 3.3. Kết quả kiểm chứng của giảng viên Đinh Thị Kim Phượng

Giảng viên Lê Việt Tiến.

Hình 3.4. Kết quả kiểm chứng của giảng viên Lê Việt Tiến

Giảng viên Nguyễn Văn Cường.

Hình 3.5. Kết quả kiểm chứng của giảng viên Nguyễn Văn Cường

Giảng viên Vũ Thị Hoàng Yến.

49
 Hình 3.6. Kết quả kiểm chứng của giảng viên Vũ Thị Hoàng Yến

Giảng viên Lê Mạnh Long

Hình 3.7. Kết quả kiểm chứng của giảng viên Lê Mạnh Long

3.3. ĐÁNH GIÁ SẢN PHẨM

3.3.1. Ưu điểm

• Hỗ trợ giảng viên thống kê khối lượng giảng dạy, nhập thông tin thực hành

• Cho phép nhập, sửa đổi lịch giảng dạy

• Hiển thị thông tin về nghiên cứu của khoa Điện tử

• Tính năng đăng nhập và phân quyền cho người dùng

• Website hoạt động ổn trên Internet

• Giao diện đơn giản, dễ sử dụng.

• Tối ưu hóa với các thiết bị.

50
• Tính ứng dụng cao.

• Trang Website cung cấp đầy đủ nội dung.

• Nội dung dễ hiểu và dễ đọc

3.3.2. Nhược điểm

• Vẫn còn tồn tại 1 chút thiếu sót trong việc quản trị thông tin.

• Thời gian phản hồi của việc nhập dữ liệu còn chậm

• Giao diện mới dừng lại ở mức độ cơ bản chưa tối ưu được giao diện

• Chưa hỗ trợ thống kê theo nhiều tháng, kì học , năm học

3.3.3. Đánh giá của Thầy/Cô trong khoa Điện tử

• Thời gian trên website hiển thị theo chuẩn Việt Nam

• Đối với giảng viên không thuộc ban chủ nhiệm của Khoa hay giáo vụ Khoa,

chỉ được tìm kiếm khối lượng giảng dạy của chính mình.

• Phần chuẩn bị tập tin lịch thực hành theo tuần chưa yêu cầu điền đủ các

thông tin quan trọng như mã lớp và tên nhóm với định dạng số

• Yêu cầu điền đủ thông tin quan trọng: mã lớp, tên nhóm, ca thực hành,

phòng thực hành

• Màu chữ và nền trang chủ chưa phù hợp

• Chưa cho phép xem khối lượng GD trong khoảng thời gian tự chọn

3.4. ỨNG DỤNG CỦA SẢN PHẨM

• Quản lý lịch giảng dạy: Giảng viên có thể xem lịch giảng dạy trên trang web

với đầy đủ các thông tin.

• Quản lý tổng số lượng thực giảng: Giảng viên có thể xem tổng số giờ giảng

dạy, hệ số lương và tổng số giờ đề nghị thanh toán.

• Đăng tải, chia sẻ các thông tin nghiên cứu khoa học.

• Tăng sự tương tác giữa sinh viên và giảng viên khi tham gia nghiên cứu khoa
học.
51

3.5. TÁC ĐỘNG CỦA SẢN PHẨM THIẾT KẾ TỚI MÔI

TRƯỜNG/KINH TẾ/ XÃ HỘI.

3.5.1. Tác động đến kinh tế

Việc thiết kế Website của nhóm được sử dụng để thiết kế, phân công
khối lượng giảng dạy và nghiên cứu của giảng viên khoa Điện tử Trường Đại
học Công nghiệp Hà Nội. Tuy nhiên nhóm sẽ phát triển trang web đảm bảo về
nội dung, tính năng và chất lượng của sản phẩm để có thể kinh doanh sang gần
nhất là các trường Đại học khác. Từ đó đóng góp vào sự phát triển kinh tế số.
3.5.2. Tác động đến xã hội
Thiết kế Website cho nhà trường có tác động không nhỏ đến xã hội bởi
nó làm cho việc giảng dạy của giảng viên trong nhà trường dễ dàng hơn. Điều
này giúp cải thiện chất lượng giáo dục và tăng sự tiến bộ trong công nghệ.
3.5.3. Tác động đến môi trường
Quá trình thiết kế và vận hành Website có thể sử dụng một số lượng lớn
tài nguyên và vật liệu (Thiết bị phần cứng,...) để phát triển, bao gồm đáp ứng
nhu cầu về máy chủ, dùng phần mềm và lưu trữ dữ liệu, sử dụng băng thông
và tạo ra các thiết kế đồ họa. Việc sử dụng quá nhiều tài nguyên không hợp lý
có thể dẫn đến tình trạng lãng phí (Những thiết bị phần cứng không thể tái chế
có thể gây ô nhiễm môi trường) và góp phần vào sự suy thoái của môi trường
tự nhiên.

3.6. KẾT LUẬN CHƯƠNG 3

Tóm lại việc thiết kế web là một công việc không đơn giản và yêu cầu
cần phải có kiến thức chuyên sâu về các yếu tố cơ bản của thiết kế web và lưu
ý đến các tác động của thiết kế web để bảo đảm mang đến một sản phẩm mang
trải nghiệm tốt nhất cho người dùng.
52

KẾT LUẬN

1. KẾT LUẬN

Đồ án đã đạt được những kết quả tích cực trong việc thiết kế và triển
khai Website hỗ trợ giảng dạy và nghiên cứu cho khoa Điện tử. Website được
thiết kế với nhiều tính năng hữu ích như hỗ trợ giảng viên thống kê khối
lượng giảng dạy, nhập thông tin lý thuyết/thực hành, cho phép nhập và sửa
đổi lịch giảng dạy, hiển thị thông tin nghiên cứu của khoa Điện tử, tính năng
đăng nhập và phân quyền cho người dùng.

2. KIẾN NGHỊ

Sản phẩm Website có thể được áp dụng cho khoa Điện tử để thống kê
khối lượng giảng dạy của giảng viên, cung cấp thông tin nghiên cứu khoa học

theo từng năm học. Website đã thiết kế giúp Thầy/Cô trong khoa Điện tử: •

Quản lý lịch giảng dạy

• Quản lý tổng số lượng thực giảng.

• Đăng tải, chia sẻ các thông tin nghiên cứu khoa học.

• Tăng sự tương tác giữa sinh viên và giảng viên khi tham gia nghiên cứu khoa

học.
53

TÀI LIỆU THAM KHẢO

[1] Claudia Roca (2023), What is web programming and what is it for?
[Online]. Available: https://www.thepowermba.com/en/blog/what-is
web-programming#:~:text=Web%20programming%20is%20the%20
process,and%20needs%20of%20the%20company/, accessed on May 14,
2023.
[2] Talia Cohen(2022).10 of the Most Common Types of Websites.
Available: https://www.wix.com/blog/2020/12/types-of-websites/#viewer
-6mj1j/, accessed on May 14, 2023.
[3] Colyn Emery (2022), A Brief History of Web Development [Online].
Available: https://www.techopedia.com/2/31579/networks/a-brief
history-of-web-development/, accessed on May 14, 2023.
[4] Sruthi Veeraraghavan(2023). Top 20 Best Programming Languages To
Learn [Online]. Available: https://www.simplilearn.com/best-programm
ing-languages-start-learning-today-article/ , accessed on May 14, 2023.
[5] Ben Lutkevich (2023), database (DB) [Online]. Available:
https://www.techtarget.com/searchdatamanagement/definition/databas
e#:~:text=Computer%20databases%20typically%20store%20aggregati
ons,on%20people%2C%20places%20or%20things/, accessed on May
14, 2023.
[6] David Taylor (2023), MongoDB vs MySQL – Difference Between Them
[Online]. Available: https://www.guru99.com/mongodb-vs-mysql.html/,
accessed on May 14, 2023.
[7] Daragh Ó Tuama (2022), PHP vs JavaScript: When to Use [Online].
Available: https://codeinstitute.net/global/blog/php-vs-javascript/,
accessed on May 14, 2023.
[8] Jade (2022), PHP vs Express: Which Is Right For You? [Online].
Available: https://techtrim.tech/php-vs-express/, accessed on May 14,
2023.
54

[9] Stefania Volpe (2022), Nodejs vs Laravel: How To Choose The Right
Framework. [Online]. Available: https://www.freelancermap.com/blog/
node-js-vs-laravel/, accessed on May 14, 2023.
[10] Cubet (2022), A vital comparison: Handlebars Vs Mustache Vs Angularjs
[Online]. Available: https://cubettech.com/resources/blog/a-vital
comparison-handlebars-vs-mustache-vs-angularjs/, accessed on May
14, 2023.
[11] Divyanshu Soni (2022), HTML Handlebars [Online]. Available:
https://www.scaler.com/topics/html/handlebars/, accessed on May 14,
2023.
1

PHỤ LỤC
Hướng dẫn sử dụng Website
Địa chỉ để truy cập Website: http://54.253.50.220/

Giới thiệu các thành phần trên trang Website

Website bao gồm:
Trang chủ: giới thiệu Website hỗ trợ giảng viên thống kê khối lượng giảng
dạy và cung cấp thông tin về nhóm và hướng nghiên cứu của Khoa Điện tử -
Trường Đại học Công nghiệp Hà Nội.
Tìm kiếm: Thống kê giảng dạy và hướng dẫn thực tập tốt nghiệp (TTTN), đồ
án tốt nghiệp (ĐATN) gồm:

• Xem thông tin lịch thực hành theo tuần.

• Thống kê số tiết dạy Thực hành/Lý thuyết theo tháng.

• Thống kê số giờ giảng dạy và hệ số TĐ ĐT theo tháng

Nhập dữ liệu: giúp quản trị viên tải các dữ liệu lý thuyết, thực hành, hướng
dẫn thực tập tốt nghiệp và đồ án tốt nghiệp theo năm học lên hệ thống. Tiện
ích: mô tả hướng dẫn sử dụng Website

• Nghiên cứu khoa học (NCKH): Cung cấp thông tin nghiên cứu khoa học

gồm: Giúp sinh viên nắm bắt được thông tin nghiên cứu khoa học và liên hệ
 để tham gia các nhóm nghiên cứu của Khoa.

• Hiển thị thông tin về các giảng viên và sinh viên đang tham gia nghiên cứu
2

tại Khoa.
Chức năng tìm kiếm
Chức năng thống kê khối lượng giảng dạy và hướng dẫn TTTN và
ĐATN Các bước thực hiện chức năng thống kê:

• B1: Chọn tab “Tìm kiếm” trên thanh công cụ

• B2: Chọn tab “Xem thông tin giảng dạy” và chọn tên giảng viên cần tra cứu

• B3: Chọn năm, tháng cần tra cứu rồi bấm “Tìm kiếm”

• B4: Sau khi bấm tìm kiếm, trang website sẽ hiện các thông tin liên quan đến

học phần bao gồm các thông chính: tên học phần, mã học phần, thực giảng
và hệ số TĐ ĐT
3
 Để có thể lọc danh sách chi tiết của giảng viên đã chọn, hãy chọn tên học phần,
mã lớp và hình thức giảng dạy (LT/TH/ĐA/TTTN), sau đó chọn biểu tượng bộ lọc. Ví
dụ lọc lớp “Lập trình mạng” có mã học phần “202210803153001” đối với “TH nhóm
2” sẽ trả về kết quả như Hình bên dưới.

Chức năng hiển thị thông tin thực hành theo tuần

Các bước thực hiện chức năng hiển thị thông tin thực hành theo tuần: •

B1: Chọn tab “Tìm kiếm” trên thanh công cụ

• B2: Chọn tab “Xem thông tin thực hành” và chọn tên giảng viên cần tra cứu
4
 •

B3: Chọn năm, tháng cần, ngày thứ 2 đầu tuần (đại diện cho tuần đó) và bấm
“Thông tin thực hành”

Nhập dữ liệu
Website cho phép nhập các dữ liệu sau:

• Nhập lịch đầy đủ bao gồm lịch lý thuyết, thực hành, đồ án môn học, đồ án
5

tốt nghiệp, và thực tập tốt nghiệp

• Nhập lịch thực hành theo tuần

Nhập lịch đầy đủ

Các bước nhập lịch đầy đủ
• B1: Chọn tab “Nhập dữ liệu” trên thanh công cụ và chọn “Lịch đầy đủ” • B2:

Chọn tập tin đã chuẩn bị theo mẫu, sau khi chọn xong sẽ có thông báo tên tập
tin đã chọn (Lưu ý: Tập tin chỉ chứa 1 sheet duy nhất tên là “KHOA DIEN
TU”)

• B3: Nhấn “Tải lên” và tải tập tin lịch đầy đủ lên Website

Nhập lịch thực hành theo tuần

Các bước nhập lịch thực hành theo tuần
6

• B1: Chọn tab “Nhập dữ liệu” trên thanh công cụ và chọn “Lịch thực hành” •

B2: Chọn tuần nhập (Lưu ý: Chỉ chọn thứ 2 của tuần cần nhập) • B3: Chọn tập

tin đã chuẩn bị theo mẫu, sau khi chọn xong sẽ có thông báo
tên tập tin đã chọn (Lưu ý: tập tin chỉ chứa 1 sheet duy nhất) (Tương tự như
nhập lịch đầy đủ)

• B4: Nhấn “Tải lên” và tải tập tin lịch đầy đủ lên Website (Tương tự như
 nhập lịch đầy đủ)

Hướng dẫn chuẩn bị dữ liệu

Một số lưu ý khi chuẩn bị dữ liệu:

• Để tránh những lỗi xảy ra trong quá trình xử lý dữ liệu, các ký tự đặc biệt

như !,@,#,$... không nên được sử dụng trong các trường dữ liệu. • Thông tin

về số lượng nhóm và ca thực hành chỉ được viết bằng số, không được viết
bằng chữ. Tên cũng nên được viết bằng các ký tự hoặc số hợp lệ, không sử
dụng các ký tự đặc biệt.
Lịch đầy đủ
Khái quát
Trong lịch học lý thuyết bao gồm nhữ ng thành phần chính như:

• Tên học phần

• Mã lớp

• Hệ

• Khóa

• Giảng viên

• Hình thức giảng dạy (LT/TH/ĐA/TTTN)

• Số tiết hoặc giờ giảng dạy/hướng dẫn đối với từng tuần
7
Các bước chuẩn bị
• B1: Chuẩn bị bảng dữ liệu ví dụ như Hình dưới

B2: Thêm ngày tháng năm vào bảng tính như hình minh họa Điền ngày thứ 2
của tuần đầu tiên năm học đối với hệ Đại học, ví dụ như hình bên dưới là
ngày 04 tháng 07 năm 2022.
8

Chọn ô cạnh ô ngày 04 tháng 07 năm 2022 và viết câu lệnh bằng ngày đó
cộng với 7 và sao chép công thức tới tuần cuối cùng của năm học. Ví dụ như
hình bên dưới:
Lưu ý: Chuyển đổi hàng chứa thông tin ngày về dạng minh họa bên dưới
(tháng/ngày/năm):

• B3: Điền dữ liệu thông tin học phần bắt đầu từ hàng thứ 9, như hình bên
dưới

• B4: Yêu cầu một hàng trống ở ngay sau dữ liệu liên quan đến học phần
9

• B5: Lưu tập tin dưới dạng đuôi mở rộng .xlsx

Các lưu ý
• Không gộp các mã lớp với nhau

• Sử dụng một sheet duy nhất với tên là “KHOA DIEN TU”

Lịch thực hành theo tuần

Khái quát
Trong lịch học thực hành theo tuần bao gồm những thành phần chính như:

• Tên học phần

• Mã lớp

• Hệ

• Khóa

• Giảng viên

• Ca thực hành

• Phòng thực hành

• Tên nhóm thực hành

10

Các bước chuẩn bị

• B1: Mở bảng tính mẫu

•
B2: Điền dữ liệu thông tin học phần bắt đầu từ hàng thứ 13, như hình bên
dưới

• B3: Yêu cầu một hàng trống ở ngay sau dữ liệu liên quan đến học phần

• B4: Lưu tập tin dưới dạng đuôi mở rộng xlsx

11

Các lưu ý
• Không gộp các ca, phòng với nhau

• Không gộp các mã lớp với nhau

• Sử dụng một sheet duy nhất

12
 MÃ NGUỒN
Mã nguồn có thể xem tại đường liên kết sau:
https://drive.google.com/drive/folders/
1TcGxFSQiwimMDNsIJ4r_a0h8yUD BrRu2