4.1 Kiến trúc hệ thống
- _ Trong đồ án này, em đã sử dụng kiến trúc MVC dé xây dựng hệ thống website luyện thi trắc nghiệm trực tuyến.
- MVC viết tắt của Model — Views - Controllers. là một kiến trúc phan mềm hay mô hình thiết kế được sử dụng trong kỹ thuật phần mềm. Kiến trúc MVC giúp cho các lập trình viên tách ứng dụng ra 3 thành phần khác nhau Model, View và Controller. Mỗi thành phần có một nhiệm vụ riêng biệt và độc lập với các thành phần khác.
Hình 36: Kiến trúc MVC
- Model là thành phần chứa tất cả các nghiệp vụ logic, phương thức xử lý, truy xuất database, đối tượng mô tả dữ liệu như các Class, hàm xử lý...
- View đảm nhận vai trò hiển thi thông tin, tương tác với người dùng, nơi chứa tat cả các đối tượng GUI như textbox, images...
- Controller giữ nhiệm vụ nhận điều hướng các yêu cầu từ người dùng va gọi đúng những
phương thức xử lý.
- Khi sử dụng kiến trúc MVC sẽ mang lại các lợi ích sau:
e Tao mô hình chuẩn cho dự án, giúp cho việc tiếp cận với ứng dụng dé dang.
e Trình tự xử lý rõ ràng, nhiệm vụ riêng biệt, độc lập với các thành phần khác và các thành phan có thé tương tác được với nhau.
e Quy hoạch các thành phan riêng biệt giúp cho quá trình phát triển, quản lý, vận hành, bảo trì ứng dụng thuận lợi hơn, đồng thời dễ dàng kiểm soát được luồng xử lý của ứng
dụng.
e Mô hình triển khai rõ ràng, mach lạc, xử lý nghiệp vụ tốt, dé dàng triển khai các ứng
dụng vừa.
4.2 Một số giao diện của hệ thống
SVTH: Hồ Quốc Cường - DI7CNPM5 55
Đồ án tốt nghiệp Đại học Chương 4: Xây dựng và kiểm thử hệ thống
Danh sách câu hỏi
MÃ CÂU HỎI CÂU TRẢ LỜI
1. for example
; The small business owner decided to use a stock photo database... 2. with regard to hire a full-time photographer. Bin case
4. rather than
1. delegate
> Ms. Ooshima went on a business trip to Singapore unexpectedly,so 2. complete she had to ....some of her tasks to her subordinates. 3 invest
4.reply
1.admits 3 The security guard refused Mr. Dillon... because he could not 2. admittedly
provide a valid employee badge. 3. admittance 4. admitting
1. between 4 The airline representative apologized for the cancellation but 2. against
explained that it was due to factors.... the company’s control 3 throughout 4. beyond
1. mobilization s The Grand Villa neighborhood is known for having the city’s largest 2. concentration
of high-end boutiques. 3. recipient 4.commodity
Previous 1
Hình 37: Giao diện danh sách câu hỏi
2 3
Search
5 Next
ĐÁP AN
rather than
delegate
admittance
beyond
concentration
TUY CHON
um am
“am am
Giáo viên có thé xem danh sách các câu hỏi trong ngân hàng câu hỏi, danh sách câu hỏi có sử dụng phân trang. Trên màn hình danh sách câu hỏi, giáo viên có thể tìm kiếm câu hỏi theo nội dung câu hỏi. Giáo viên có thể chỉnh sửa hoặc xóa các câu hỏi bất kì bằng cách nhắn vào các nút tùy chọn. Khi giáo viên muốn thêm 1 câu hỏi mới có thể click vào nút “Add Question” và giao diện chỉ tiết câu hỏi sẽ hiện ra. Nếu giáo viên muốn import nhiều câu hỏi thì có thể chọn chức nang “Import câu hỏi từ file excel” thì hệ thống sẽ chuyên hướng đến giao diện import file
excel.
Upload file question
Chon môn học Môn học
| Choose File | No file chosen
“>
SVTH: Hồ Quốc Cường — DI7CNPM5 56
Đồ án tốt nghiệp Đại học Chương 4: Xây dựng và kiểm thử hệ thống
Hình 38: Giao diện import câu hỏi từ file excel
Tai giao diện Import câu hỏi từ file excel này, giáo viên sẽ chon | file excel có các câu
hỏi đã chuẩn bị từ trước, sau đó chọn môn học tương ứng và click nút UPLOAD. Hệ thống sẽ lưu
các câu hỏi trong file excel vào cơ sở dữ liệu và thông báo có bao nhiêu câu hỏi được import thành công.
Thêm câu hỏi mới
Nội dung câu hỏi Danh sách câu trả lời
Chọn môn học
for example
Tiéng anh ¢
with regard to
Nội dung câu hỏi incase
The small business owner decided to use a stock photo database © rather tha hire a full-time photographer.
Mức độ
© Dễ @Trung bình O Khó
Hình 39: Giao diện chỉ tiết câu hỏi
Giao diện “chi tiết câu hỏi” sẽ hiển thị thông tin câu hỏi khi giáo viên chọn chức năng
chỉnh sửa câu hỏi hoặc thêm mới câu hỏi. Sau khi nhập hoặc chỉnh sửa thông tin của câu hỏi thì
click “Lưu thay đôi” hệ thống sẽ lưu lại câu hỏi. Giáo viên có thé chọn “Hủy” dé quay trở về
trang danh sách câu hỏi
Danh Sách Đề Thi
THEM ĐỀ THỊ + earch Ầ
MÃ ĐỀ THỜI GIAN BD THỊ 'THỜI GIAN KT THỊ MÔN HỌC SỐ CÂU HOI LỰA CHỌN
1 01-12-2021 700 01-12-2021 8:00 Kiếm tra giữa kì 50 (F Ti + 2 02-12-2021 9:00 02-12-2021 1035 Kiếm tra IS phút 20 (Z2m-+
Previous 1 2 Next
Hình 40: Giao điện danh sách đề kiểm tra
SVTH: Hồ Quốc Cường — DI7CNPM5 57
Đồ án tốt nghiệp Đại học Chương 4: Xây dựng và kiểm thử hệ thống
Giáo viên có thê xem danh sách các dé kiêm tra đã tạo, danh sách đê kiêm tra có sử dụng phân trang. Trên màn hình danh sách đê kiêm tra, giáo viên có thê tìm kiêm dé kiêm tra theo tên.
Giáo viên có thê chỉnh sửa hoặc xóa đê kiêm tra kiêm bât kì băng cách nhân vào các nút tùy chọn. Khi giáo viên muôn thêm | đê kiêm tra mới có thê click vào nút “Thém dé thi” và giao diện chi tiêt đê kiêm tra sẽ hiện ra. Nêu giáo viên muôn giao đê kiêm tra cho lớp học có thê click vào
nút oop?
Tieng anh ¥ Danh Sách Câu Hỏi
Loại câu hỏi
' STT NỘI DUNG CÂU TRÀ LỜI ĐÁP ÁN Bi
Dễ TB Khó 3
6 4 a eny1
— 1 The new security system can provide... by phone when a window or door has been opened. sems alerts
Tổng số câu hỏi Balert 4 alerted - J. between
factors... the company’s control. 3.throughout 4, beyond
Tuy Chon 1 delegate Ms. Ooshima went on a business trip to Singapore unexpectedly, so she had to....someofher 2. complete
3 delegate tasks to her subordinates. 3.invest
Thời gian mở đề Á. reply
mm/dd/yyyy ~:~ - Oo
- 1. for example Thời gian đóng đề 2. with regard
The small business owner decided to use stock photo database.... hire a full-time mg
mm/dd/yy --:-- -- n 4 . to rather thanw photographer.
: 3.in case
Tên bài thi 4. rather than
Tên bài thi
Thời gian làm (phút) Làn 7
security guard refused Mr. 7 o 3 admittedly
Thời gian lam Bà 5 The security quard refused Mr. Dilon.... because he could not provide a valid employee badge. 2S D TT. admittance |
4. admitting
Previous 1 2 Next
Hình 41: Giao diện chỉ tiết dé kiểm tra
Tại giao diện “chi tiết đề kiểm tra”, giáo viên có thể random các câu hỏi theo môn học cho đề kiểm tra hoặc thêm từng câu hỏi, có thê xóa câu hỏi trong đề kiểm tra. Sau khi chọn được bộ câu hỏi, giáo viên, nhập thông tin về thời gian, tên của đề kiểm tra và chọn tạo đề thi thì hệ thống sẽ kiểm tra thông tin và lưu đề kiểm tra vào cơ sở dit liệu.
SVTH: Hồ Quốc Cường - DI7CNPM5 58
Đồ án tốt nghiệp Đại học Chương 4: Xây dựng và kiểm thử hệ thống
Danh sách Lớp Học Tìm kiếm <a
MA TÊN LỚP. MÔN HỌC THỜI GIAN BẮT ĐẦU KẾT THUC TUY CHON
ủ11 Lập trỡnh web nhúm 10 - Thứ 2 Lập trỡnh web. 070000 - 09:00:00 01/01/2022 01/04/2021 D7]: |
2 Co sở dữ liệu nhóm 2- Thứ 5 CSDL 070000 - 09:00:00 01/01/2022 01/04/2021 am
Nhập môn công nghệ phần mềm nhóm 7 - Thứ 4 Lập trình web. 070000 - 09:00:00 01/01/2022 01/04/2021 L2]: |
Previous 1 Next
Hình 42: Giao diện danh sách lop hoc
Giáo viên có thể xem danh sách các lớp học đã tạo, danh sách lớp học có sử dụng phân trang. Trên màn hình danh sách lớp học, giáo viên có thể tìm kiếm lớp học theo tên lớp. Giáo viên có thé chỉnh sửa hoặc xóa lớp học bat kỳ bằng cách nhấn vào các nút tùy chọn. Khi giáo viên muốn thêm 1 lớp học mới có thể click vào nút “Thêm lớp học” và giao diện “chỉ tiết thông
tin lớp học” sẽ hiện ra.
Thêm lớp học
Thứ 2
mm/dd/yyyy a mm/dd/yyyy a
Môn học °
|]. nam Hình 43: Giao diện chỉ tiết thông tin lớp học
Giao diện “chi tiết thông tin lớp học” sẽ hiền thị thông tin của lớp học khi giáo viên chọn
chức năng chỉnh sửa hoặc thêm mới lớp học. Sau khi nhập hoặc chỉnh sửa thông tin của lớp học
thì click “Lưu thay đổi” hệ thống sẽ lưu lại lớp học. Giáo viên có thé chọn “Hủy” dé quay trở về
trang danh sách lớp học.
SVTH: Hồ Quốc Cường — DI7CNPM5 59
Đồ án tốt nghiệp Đại học Chương 4: Xây dựng và kiểm thử hệ thống
Danh sách Sinh viên của lớp Lap | cmessmven | Tứ kiếm Ce]
trình web nhóm 10 - Thứ 2
Chọn lớp. +
MÃ SV HỌ TÊN SỐ CMND. GIỚI TÍNH NGÀY SINH TUY CHON
1 Nguyễn Văn A 012544545 Nam 01/01/1999 m 2 Nguyễn Thị B 43434234 Nữ 02/0/1999 m
Previous 1 Next
Hình 44: Giao diện danh sách sinh viên của lớp học
Giáo viên có thể xem danh sách sinh viên theo lớp học, danh sách sinh viên theo lớp học có sử dụng phân trang. Trên màn hình danh sách sinh viên theo lớp học, giáo viên có thé chọn các lớp học muốn xem hoặc tìm kiếm sinh viên theo tên. Giáo viên có thể xóa sinh viên bất ky khỏi lớp hoc bằng cách nhấn vào nút tùy chọn. Khi giáo viên muốn thêm 1 sinh viên vào lớp học đã chọn có thé click vào nút “Thêm sinh viên” va giao diện “thêm sinh viên vào lớp học” sẽ hiện
ra.
Thêm sinh viên vào lớp hoc
Chon sinh viên
Niên khóa
CMND. Giới tính
Địa chỉ
a
Hình 45: Giao diện thêm sinh viên vào lớp hoc
Trên giao diện “Thêm sinh viên vào lớp học” giáo viên có thể search sinh viên theo mã sinh viên hoặc theo tên. Sau khi sẽ chọn đúng sinh viên muốn thêm vào lớp và click “Lưu thay đổi” dé cập nhật thông tin vào cơ sở dữ liệu. Giáo viên có thé chọn “Hủy” dé quay trở về trang
danh sách lớp học.
SVTH: Hồ Quốc Cường — DI7CNPM5 60
Đồ án tốt nghiệp Đại học Chương 4: Xây dựng và kiểm thử hệ thống
Danh sách các bài kiểm tra lớp Tìm kiếm a Lập trình Web - Nhóm 10
Chọn lớp °
MÃ ĐỀ TÊN ĐỀ ƠI GIẦN BAT THOLGIAN KET SỐ CÂU HOI TÙY CHỌNĐẦU THÚC
D Kiếm tra giữa kì 070000 08:00:00 40 Bik
2 Kiếm tra cuối kì 070000 082090 60 Bill
Hình 46: Giao diện danh sách các bài kiểm tra của lớp học
Giáo viên có thể xem danh sách các đề kiểm tra theo lớp học, danh sách các dé kiểm tra theo lớp hoc có sử dung phân trang. Trên màn hình danh sách dé kiểm tra theo lớp học, giáo viên chọn các lớp muốn xem hoặc xem chỉ tiết 1 đề kiểm tra bất kì hoặc xóa đề kiểm tra của lớp học đó bằng cách nhấn vào các nút tùy chọn. Khi giáo viên muốn thêm 1 đề thi lớp học đã chọn có thé click vào nút “Thém đề thi”.
) MASV HỌ TÊN SỐ CMND. GIỚI TÍNH NGÀY SINH TUY CHON
) 2 Nguyễn Thị 8 43434234 Nữ 02/01/1999 Bw
oO 3 Trần Hoang 43434234 Nam 02/01/1999 fe fa] = |
Previous 1 Next
Hình 47: Giao diện danh sách sinh viên
Admin có thể xem danh sách sinh viên có trong hệ thống, danh sách sinh viên có sử dụng phân trang. Trên màn hình danh sách sinh viên, admin có thé tìm kiếm sinh viên theo tên, xem chỉ tiết hoặc xóa một sinh viên bat kì khỏi hệ thống bằng cách nhắn vào các tùy chọn. Khi admin muốn thêm 1 sinh viên vào hệ thống thì sẽ chọn “Thêm sinh viên” và giao diện “chi tiết thông tin
sinh viên” sẽ hiện ra.
SVTH: Hồ Quốc Cường — DI7CNPM5 61
Đồ án tốt nghiệp Đại học Chương 4: Xây dựng và kiểm thử hệ thống
Thông tỉn sinh viên
Họ tên sinh viên.
Số chứng minh nhân dân
Nam hd
Địa chỉ ê quá Quê quán Năm nhập hoc Năm tốt nghiệp
ẽ]—_—F_P}ẽ}———
Hình 48: Giao diện chỉ tiết thông tin sinh viên
Giao diện “chi tiết thông tin sinh viên” sẽ hiển thị thông tin của sinh viên khi admin chọn
chức năng chỉnh sửa hoặc thêm moi sinh viên. Sau khi nhập hoặc chỉnh sửa thông tin của sinh
viên thì click “Lưu thay đổi” hệ thống sẽ lưu lại thông tin của sinh viên. Admin có thé chọn
“Hủy” để quay trở về trang danh sách sinh viên.
Câu 1: Html viết tắt là gi?
@ HyperText Markup Language
Hyperlinks and Text Markup Languag Home Tool Markup Language
Hyperlinks Markup Language
Cau 1: CSS viét tat la gi?
Cascading Style Sheets
Custom Style Sheets
Customize Sheets Style Cascading Search Sheets
Cau 1: Web standards?
Mozilla Microsoft
The World Wide Web Consortium
Previous 1 2 Next
câu hỏi:
mm 7 ì l
5 6 7 8
SVTH: Hồ Quốc Cường — DI7CNPM5 62
Đồ án tốt nghiệp Đại học Chương 4: Xây dựng và kiểm thử hệ thống
Hình 49: Giao diện chỉ tiết bài kiểm tra của sinh viên
Khi sinh viên chọn chức năng làm bài kiểm tra và chọn bài kiểm tra tương ứng thì giao diện “chi tiết bài kiểm tra của sinh viên” sẽ hiện ra. Tại đây, sinh viên sẽ chọn các đáp án phù hợp và nộp bài. Sau khi nộp bài hệ thống sẽ kiểm tra kết quả và thông báo kết quả cho sinh viên.
Môn: Lập trình Web
Bài kiểm tra: Kiểm tra giữa kì Điểm: 10.0
Thời gian lam: 07:00:00
Thời kết thúc: 07:58:00
Xem Chỉ Tiết Kết Quả
Môn: Lập trình Web.
Bài kiểm tra: Kiểm tra cuối kì Điểm: 8.0
Thời gian lam: 07:00:00 Thời kết thúc: 08:10:00
Xem Chỉ Tiết Kết Quả
Hình 50: Giao diện xem lịch sw các bài kiêm tra cua sinh viên
Khi sinh viên chọn chức năng xem lịch sử bài kiêm tra thì giao diện “lịch sử các bài kiêm tra của sinh viên” sẽ hiện ra. Tại đây, sinh viên có thé chọn xem chi tiét kêt qua dé xem chi tiệt các câu hỏi của bài kiêm tra.
4.3 Kết luận
Chương này trình bày về kiến trúc được sử dụng dé xây dựng hệ thống website luyện thi trắc nghiệm trực tuyến. Thực hiện cài đặt các chức năng của hệ thống như: quản lý sinh viên, quản lý các lớp học sinh viên, quản lý ngân hàng câu hỏi, quản lý đề kiểm tra, sinh viên tham gia kiểm tra, xem lịch sử kiểm tra.
SVTH: Hồ Quốc Cường — DI7CNPM5 63
Đồ án tốt nghiệp Đại học Kết luận