TRƯỜNG ĐẠI HỌC CÔNG NGHIỆP HÀ NỘI HANOI UNIVERSITY OF INDUSTRY Tập san SINH VIÊN NGHIÊN CỨU KHOA HỌC Số 14 ● 2024 171
XÂY DỰNG WEBSITE QUẢN LÝ PHÒNG THỰC HÀNH KHOA ĐIỆN TỬ
DEVELOPING A MANAGEMENT WEBSITE FOR THE ELECTRONICS
DEPARTMENT'S LABORATORY ROOMS
Nguyễn Thị Thủy1,*, Vũ Thế Anh1,
Nguyễn Thị Thùy Linh1, Nguyễn Tuấn Anh2
1Lớp TTMT 01 - K15, Khoa Điện tử, Trường Đại học Công nghiệp Hà Nội
2Khoa Điện tử, Trường Đại học Công nghiệp Hà Nội
*Email: nguyenthithuy18012002@gmail.com
TÓM TẮT
Nghiên cứu này nhằm phát triển một trang web quản lý cho các phòng thực hành thuộc Khoa Điện tử. Trang web này
sẽ cung cấp một nền tảng trực tuyến để quản lý và điều phối các hoạt động của phòng thực hành, bao gồm việc đặt phòng,
theo dõi thiết bị, quản lý lịch trình, và báo cáo sự cố.
Từ khoá: Quản lý trang web, xây dựng website.
ABSTRACT
This project aims to develop a management website for the laboratory rooms of the Electronics Department. The
website will provide an online platform for managing and coordinating lab activities, including room booking, equipment
tracking, schedule management, and issue reporting.
Keywords: Website Management, Website Development.
1. GIỚI THIỆU
Trong những năm gần đây, sự phụ thuộc ngày càng tăng
vào các nền tảng kỹ thuật số để quản lý môi trường học
thuật và nghiên cứu đã làm nổi bật nhu cầu về hệ thống quản
lý hiệu quả và thân thiện với người dùng. Trong các cơ sở
giáo dục, việc quản lý hiệu quả các phòng thí nghiệm là rất
quan trọng để hỗ trợ các hoạt động giảng dạy, học tập và
nghiên cứu.
Mục tiêu chính của dự án này là phát triển một trang
web quản lý được thiết kế riêng cho các phòng thí nghiệm
.Trang web này được thiết kế để cung cấp một nền tảng
trực tuyến tích hợp giúp hợp lý hóa việc quản lý và điều
phối các hoạt động trong phòng thí nghiệm. Các chức năng
chính bao gồm đặt phòng, theo dõi thiết bị, quản lý lịch
trình và báo cáo vấn đề. Mỗi tính năng này đều quan trọng
để đảm bảo hoạt động trơn tru và sử dụng tối ưu tài nguyên
phòng thí nghiệm.
Đặt phòng là một thành phần cơ bản của hệ thống, cho
phép sinh viên và giảng viên đặt trước không gian phòng
thí nghiệm. Điều này giúp ngăn ngừa xung đột lịch trình và
đảm bảo rằng các nguồn lực được phân bổ hiệu quả. Theo
dõi thiết bị cho phép giám sát thiết bị trong phòng thí
nghiệm, cung cấp thông tin theo thời gian thực về tính khả
dụng và tình trạng của thiết bị. Điều này đặc biệt quan trọng
trong việc quản lý việc sử dụng và bảo trì các thiết bị chuyên
dụng và tốn kém.
2. CƠ SỞ LÝ THUYẾT/PHƯƠNG PHÁP NGHIÊN
CỨU
2.1. Phương pháp nghiên cứu
Tìm hiểu hệ thống thu thập dữ liệu
Phân tích chức năng, yêu cầu của website
Lựa chọn công nghệ, các công cụ lập tình để xây dựng
website
Tiến hành triển khai và thiết kế website quản lý phòng
thực hành
2.2. Cơ sở dữ liệu (Database)
Hình 1. Database
TRƯỜNG ĐẠI HỌC CÔNG NGHIỆP HÀ NỘI HANOI UNIVERSITY OF INDUSTRY Tập san SINH VIÊN NGHIÊN CỨU KHOA HỌC Số 14 ● 2024 172Cơ 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 [1].
Cơ sở dữ liệu có nhiều loại khác nhau như:
Cơ sở sở dữ liệu hướng đối tượng: Dữ liệu được lưu
trữ trong các bảng dữ liệu được hỗ trợ tính năng hướng đối
tượng để lưu trữ hành vi của đối tượng. Mỗi một bảng được
xem là một lớp dữ liệu, còn mỗi một dòng thì được xem là
một đối tượng.
Cơ sở dữ liệu quan hệ: Khi dữ liệu được lưu trữ trong
các bảng thì chúng được gọi là các thực tể. Giữa những thực
thể này có một mối quan hệ với nhau thì gọi là các quan hệ.
Mỗi quan hệ như vậy sẽ có các thuộc tính và thuộc tính quan
trọng nhất là khóa chính.
Cơ sở dữ liệu đám may cung cấp nhiều lợi ích, ví dụ
như khả năng thanh toán cho dung lượng lưu trữ trên cơ sở
mỗi lần sử dụng, khả năng mở rộng theo yêu cầu, tính sẵn
sàng cao.
2.3. Frontend
Lập trình Frontend là việc sử dụng các ngôn ngữ HTML,
CSS hay ngôn ngữ lập trình Javascript để các lập trình viên
thiết kế ra các giao diện ứng dụng hoặc trang web cho người
dùng. Những gì bạn nhìn thấy, “chạm”, “lướt”, tương tác
trên màn hình thiết bị điện tử như điện thoại, máy tính,
ipad,… chính là kết quả của lập trình Frontend và là thành
quả của Frontend Developer. [2]
Ba ngôn ngữ máy tính chính gây ảnh hưởng đến cách
người dùng tương tác với Frontend:
HTML định nghĩa cấu trúc frontend và các phần tử
DOM khác nhau trong một trang web
CSS hay còn gọi là ngôn ngữ định kiểu theo tầng, xác
định kiểu của một ứng dụng web, bao gồm những chức năng
như: phông chữ, bố cục, màu sắc,…
Javascript: sẽ thêm các lớp chức năng động bằng cách
tác động vào DOM. Không những vậy, Javascript có thể
thay đổi trên một trang web và hiển thị được những thông
tin mới. Điều này có nghĩa là các frontend có thể xử lý
những sự tương tác cơ bản của người dùng, còn những yêu
cầu phức tạp hơn sẽ do backend chịu trách nhiệm.
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, 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 ngiệm người dùng của Website. Những công cụ và kỹ
thuật mới như Responsive Website Design, Progessive
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à và cung cấp trải nghiệm
người dùng tốt hơn.
2.4. Backend
Frontend và Backend là hai khía cạnh then chốt của mọi
ứng dụng. Trong đó, Frontend là những gì người dùng có
thể nhìn thấy và bao gồm các phần tử trực quan như đồ họa,
văn bản, nút nhấn, tìm kiếm,… Backend là những dữ liệu
và cơ sở hạ tầng giúp cho ứng dụng hoạt động tốt hơn.
Ngoài ra, Backend còn lưu trữ và xử lý ứng dụng cho người
dùng. Nói cách khác, Backend giống như một bộ não của
con người, sẽ xử lý những yêu cầu, mệnh lệnh và lựa chọn
thông tin để có thể hiển thị chính xác trên màn hình. [3]
Hình 2. Lập trình Backend
Backend sử dụng một số giao thức giao tiếp và công
nghệ để hoàn thành bất kì một yêu cầu nào đó. Ngoài ra,
Backend sẽ xử lý hàng ngàn các yêu cầu riêng biệt cùng một
lúc. Backend kết hợp vs các kỹ thuật đồng thời và song
song, như phân bố yêu cầu trên nhiều máy chủ khascnhau,
ghi vào bộ nhớ đêm và có thể sao chép dữ liệu.
3. NGHIÊN CỨU PHÂN TÍCH VÀ THIẾT KẾ
WEBSITE
3.1. Mục tiêu thiết kế
Hệ thống phải cung cấp cho giảng viên một danh sách
các phòng máy cùng với các thông tin liên quan để người
học có thể xem và lựa chọn.
Khi giảng viên có yêu cầu đăng kí phòng máy, hệ thống
sẽ cung cấp form để họ điền những thông tin cần thiết, giúp
cho họ có thể thực hiện được việc đăng kí dễ dàng.
Sau khi nhận được thông tin đăng kí của giảng viên, hệ
thống sẽ xử lý thông tin nhận được một cách tự động và gửi
thông tin phản hồi tới họ để xác nhận việc đăng kí thành
công hay không. Thông tin phản hồi phải nhanh chóng và
chính xác.
Hệ thống sẽ tạo cho mỗi giảng viên một tài khoản đăng
nhập. Căn cứ vào đó, hệ thống có thể nhận biết giảng viên
TRƯỜNG ĐẠI HỌC CÔNG NGHIỆP HÀ NỘI HANOI UNIVERSITY OF INDUSTRY Tập san SINH VIÊN NGHIÊN CỨU KHOA HỌC Số 14 ● 2024 173thuộc bộ môn nào, ca nào để hiển thị phòng máy cho phù
hợp.
Hình 3. Biểu đồ trình tự đăng kí
Hình 4. Biểu đồ trình tự xem lịch thực hành
Hình 5. Lập trình Frontend bằng ReactJS
Dựa vào mô tả bài toán ở trên, có thể thấy phòng thực
hành khoa Điện tử trường Đại học Công nghiệp Hà Nội đem
lại những lợi ích sau:
Mang lại giá trị nghiệp vụ:
Tăng khả năng xử lý: thông tin được xử lý một các
dễ dàng, có thể xử lý đồng thời và chính xác.
Thu thập thông tin về phòng thực hành một cách tự
động, không mất thời gian cập nhật lại thông tin.
Đáp ứng yêu cầu nghiệp vụ một các tin cậy, chính
xác, an toàn.
Mang lại giá trị kinh tế:
Giảm biên chế cán bộ, giảm chi phí hoạt động: Nhờ
có hệ thống quản lý phòng thực hành khoa Điện tử mà hệ
thống thông tin được xử lý tự động, không phải mất công
nhận, nhập hồ sơ, giấy tờ nên giảm thiểu được số lượng cán
bộ tham gia vào công tác này, từ đó giảm chi phí hoạt động
cho tổ chức.
Tăng độ chính xác, tiết kiệm thời gian: Khi hệ thống
quản lý phòng thực hành được triển hai, công việc đăng kí
học thực hành sẽ không bị trùng lịch hoặc không đủ phòng
máy nhờ việc bố trí thời gian hợp lý.
Giảng viên sẽ tiết kiệm được thời gian, công sức khi
sử dụng hệ thống quản lý phòng máy.
Mang lại giá trị sử dụng:
Sinh viên có thể nhanh chóng tìm ra các thông tin về
phòng thực hành (ca thực hành, các trang thiết bị)
Giảng viên mất ít thời gian để tìm ra ca thực hành hợp
lý. Quá trình chờ thông báo kết quả nhanh hơn rất nhiều do
không phải thông qua các bộ phận hành chính, nghiệp vụ…
Giảng viên có thể thực hiện việc đăng kí phòng máy
để dễ dàng và thuận tiện
Thông qua hệ thống này, giảng viên cần xem thông tin
về các phòng thực hành, sau đó lựa chọn phòng thực hành
phù hợp với ca mình cần.
3.2. Các phương pháp xây dựng Frontend
ReactJs
ReactJS là một thư viện của Javascript mã nguồn mở
được phát triển bởi Meta nhằm tạo ra các ứng dụng web
nhanh hơn, render dữ liệu không chỉ thực hiện được trên
tầng server mà còn ở dưới client nữa.
Ưu điểm:
Phù hợp với đa dạng thể loại Website
Tái sử dụng các commponent
Có thể sử dụng cho cả Mobile application
Thiện thiện với SEO
Dễ dàng debug [4]
Nhược điểm:
ReatJS chỉ phục vụ cho tầng view, đây là thư viện giúp
render ra phần view hay chính là phần giao diện của chúng
ta
Tích hợp ReactJS vào các framework MVC truyền
thống yêu cầu cần phải cấu hình lại
ReactJS khá nặng so với các framework khác
Khó tiếp cận đối với người mới học web
3.3. Các phương pháp xây dựng Backend
- Python
Ưu điểm của Python:
Python có rất nhiều ưu điểm để khiến cho các nhà lập
trình web yêu thích và sử dụng nó cho ngôn ngữ lập trình
đầu tiên của mình đó là:
Đơn giản: Cú pháp đơn giản giúp cho người lập trình
dễ dàng đọc và tìm hiểu.
TRƯỜNG ĐẠI HỌC CÔNG NGHIỆP HÀ NỘI HANOI UNIVERSITY OF INDUSTRY Tập san SINH VIÊN NGHIÊN CỨU KHOA HỌC Số 14 ● 2024 174 Tốc độ: Python có tốc độ xử lý nhanh hơn so với ngôn
ngữ PHP
Tương tác: Chế độ tương tác cho phép người lập trình
thử nghiệm tương tác sửa lỗi của các đoạn mã.
Chất lượng: Thư viện có tiêu chuẩn cao, Python có
khối cơ sở dữ liệu khá lớn nhằm cung cấp giao diện cho tất
cả các CSDL thương mại lớn.
Thuận tiện: Python được biên dịch và chạy trên tất cả
các nền tảng lớn hiện nay.
Mở rộng: Với tính năng này, Python cho phép người
lập trình có thể thêm hoặc tùy chỉnh các công cụ nhằm tối
đa hiệu quả có thể đạt được trong công việc.
GUI Programming: Giúp cho việc thực hiện ảnh minh
hoạ di động một cách tự nhiên và sống động [5].
Nhược điểm:
Tất cả chúng ta đều biết không có một sản phẩm nào là
hoàn hảo tuyệt đối 100%, nó luôn luôn tồn tại những nhược
điểm và Python cũng không ngoại lệ.
-
NodeJS
NodeJS là một nền tảng được phát triển độc lập trên
Javascript. Nhờ có NodeJS mà việc xây dựng các ứng dụng
web trở nên dễ dàng hơn, đơn giản hơn. Ngoài ra, NodeJS
còn được biết tới là một mã nguồn mở và là một môi trường
cho các máy chủ trong ứng dụng mạng.
Ưu điểm của NodeJS bao gồm:
Có tốc độ xử lý nhanh nhờ cơ chế bất đồng bộ
Dễ dàng mở rộng
Nhận và xử lý nhiều kết nối với 1 single-thread, giúp
giảm lượng RAM sử dụng và hỗ trợ quá trình xử lý
Có khả năng sử lý nhiều request cùng một lúc trong
thời gian ngắn
Phù hợp để xây dựng các ứng dụng real-time
Nhược điểm:
API đôi lúc không ổn định
Việc tái sử dụng có thể gặp khó khăn do quá trình bất
đồng bộ
Hỗ trợ thư viện không đầy đủ
Có thể gay hao tổn tài nguyên và thời gian vì đây là
một quá tình biên dịch
-
Web API
API là từ viết tắt của “Application Programming
Interface” có nghĩa là với một giao diện lập trình ứng dụng.
Đây chính là một phần trung gian cho phép kết nối giữa các
ứng dụng lại với nhau và đang được sử dụng rất phổ biến
hiện nay. Nó là một dạng của một RESTful API hiện đại,
hội tụ hầu hết các điều kiện của REST cũng như các tiêu
chuẩn tương tự, được tối ưu cho các dịch vụ trực tuyến cũng
như các ứng dụng web hiện nay.
Api có thể sử dụng cho computer hardware, software
library, database system,… Bên cạnh đó, API cũng có rất
nhiều dạng khác nhau nhưng nhìn chung nó bao gồm một
số đặc tả cho: data contructure, object class, variables, hay
các remote calls.
-
Cách hoạt động của Web Api
Client gửi request dữ liệu đến máy chủ cung cấp nội
dung và các dịch vụ thông qua giao thức HTTP hoặc
HTTPS
Web server cung cấp nội dung, các ứng dụng nguồn sẽ
thực hiện kiểm tra xác thực nếu đúng, sẽ tìm đến tài nguyên
thích hợp để trả về kết quả
Server trả về kết quả theo định dạng JSON hoặc XML
thống qua giao thức HTTP hoặc HTTPS.
Dữ liệu JSON hoặc XML được trả về sẽ được chuyển
đổi thành dữ liệu Object. Sau đó thực hiện tiếp các hoạt
động tiếp theo.
3.4. Thiết kế database
Hình 6. Cơ sở dữ liệu
TRƯỜNG ĐẠI HỌC CÔNG NGHIỆP HÀ NỘI HANOI UNIVERSITY OF INDUSTRY Tập san SINH VIÊN NGHIÊN CỨU KHOA HỌC Số 14 ● 2024 1753.5. Thiết kế website
Khi truy cập vào một website, tiến trình thực thi các hoạt
động sẽ được diễn ra như mô hình hình 7.
Hình 7. Cấu trúc của một ứng dụng
Khi người dùng thực hiện một hành động bất kì trên một
giao diện web hay còn được gọi là giao diện người dùng
(Frontend), sau đó web frontend sẽ tương tác với backend.
Từ đó backend sẽ xử lý các yêu cầu và truy vấn đến cơ sở
dữ liệu – MySQL. Cơ sở dữ liệu sẽ phản hồi lại thông tin,
từ đó nhận được dữ liệu từ các bảng dữ liệu tương ứng. Cuối
cùng, frontend sẽ nhận dữ liệu và hiển thị lên giao diện,
đồng thời giao diện sẽ được cập nhật mỗi khi có sự kiện
mới, từ đó ta có thể dễ dàng theo dõi và cập nhật thông tin
một cách nhanh nhất và đơn giản nhất.
Giao diện đăng kí lịch thực hành:
Hình 8. Đăng kí lịch học thực hành
4. THỰC NGHIỆM VÀ ĐÁNH GIÁ
4.1. Sản phẩm thực tế
Về cơ bản, website đã đáp ứng được yêu cầu của bài
toán đã đề ra, đã xây dựng được trang web với giao diện dễ
nhìn, bắt mắt.
Tại đây, người dùng sẽ thực hiện đăng nhập bằng tài
khoản đã được cấp. Sau khi đăng nhập thành công, sẽ được
chuyển đến giao diện chính của trang web:
Hình 9. Phần đăng nhập tài khoản
Hình 10. Giao diện chính
Hình 11. Lấy thông tin lịch học
4.2. Đánh giá kết quả
Ưu điểm:
- Website có bố cục rõ ràng.
- Trang Web cung cấp đầy đủ thông tin cần thiết về lịch
học.
- Website có tính ứng dụng cao, có thể phát triển hơn để
tối ưu hóa trải nghiệm người dùng.
- Tốc độ phản hồi ổn định
Nhược điểm:
Do còn kiến thức còn hạn chế, nên đề tài không tránh
khỏi những thiếu sót và những vấn đề có thể xảy ra:
- Hạn chế về phương án mất wifi
- Chưa tối ưu hóa được cơ sở dữ liệu
4.3. Ứng dụng của website
Website quản lý phòng thực hành có thể:
Với vai trò quản trị:
- Quản lí lịch thực hành như thêm, xóa, cập nhật thông
tin
- Quản lý phòng học, hệ thống môn học và sinh viên
Với người dùng: