ĐỒ ÁN THIẾT KẾ WEBSITE HỖ TRỢ NỘP VÀ CHẤM BÀI THÍ NGHIỆM ONLINE Nội dung chính của đề tài là trình bày các vấn đề liên quan hệ thống thí nghiệm online, sau đó đưa ra phương hướng giải quyết vấn đề. Đồ án được viết dựa trên nền tảng của ASP.NET MVC và cơ sở dữ liệu MongoDB. Nội dung chi tiết được trình bày qua 3 phần của báo cáo: Chương 1. Tổng quan hệ thống: Chương này sẽ giới thiệu tổng quan về hệ thống thí nghiệm online, mô tả hệ thống và các tính năng của hệ thống, đồng thời nêu ra lý thuyết về ASP.NET MVC và MongoDB, so sánh giữa SQL và NoSQL, giữa MongoDB và MySQL để thấy những ưu điểm rõ rệt của MongoDB Chương 2. Phân tích và thiết kế hệ thống: Trong chương này sẽ trình bày chi tiết các sơ đồ cần có của hệ thống, bao gồm: sơ đồ chức năng, các sơ đồ usecase và các biểu đồ hoạt động, đồng thời cũng nêu ra thuật toán xủa lý để đưa dữ liệu lên hệ thống. Chương 3. Kết quả đạt được và thử nghiệm: trình bày cơ bản về chức năng của hệ thống thông qua giao diện
TRƯỜNG ĐẠI HỌC BÁCH KHOA HÀ NỘI VIỆN ĐIỆN TỬ - VIỄN THÔNG ĐỒ ÁN TỐT NGHIỆP ĐẠI HỌC Đề tài: THIẾT KẾ WEBSITE HỖ TRỢ NỘP VÀ CHẤM BÀI THÍ NGHIỆM ONLINE Sinh viên thực hiện: Giảng viên hướng dẫn: Hà Huy Đơng Lớp ĐT04 K59 Đỗ Tồn Thắng Lớp ĐT05 K59 ThS.Vũ Song Tùng Hà Nội, 6-2019 ĐÁNH GIÁ QUYỂN ĐỒ ÁN TỐT NGHIỆP (Dùng cho giảng viên hướng dẫn) Tên giảng viên đánh giá: Họ tên Sinh viên: MSSV: Tên đồ án: Chọn mức điểm phù hợp cho sinh viên trình bày theo tiêu chí đây: Rất (1); Kém (2); Đạt (3); Giỏi (4); Xuất sắc (5) Có kết hợp lý thuyết thực hành (20) Nêu rõ tính cấp thiết quan trọng đề tài, vấn đề giả thuyết (bao gồm mục đích tính phù hợp) phạm vi ứng dụng đồ án Cập nhật kết nghiên cứu gần (trong nước/quốc tế) Nêu rõ chi tiết phương pháp nghiên cứu/giải vấn đề Có kết mơ phỏng/thưc nghiệm trình bày rõ ràng kết đạt Có khả phân tích đánh giá kết (15) Kế hoạch làm việc rõ ràng bao gồm mục tiêu phương pháp thực dựa kết nghiên cứu lý thuyết cách có hệ thống Kết trình bày cách logic dễ hiểu, tất kết phân tích đánh giá thỏa đáng Trong phần kết luận, tác giả rõ khác biệt (nếu có) kết đạt mục tiêu ban đầu đề đồng thời cung cấp lập luận để đề xuất hướng giải thực tương lai Kỹ viết đồ án (10) Đồ án trình bày mẫu quy định với cấu trúc chương logic đẹp mắt (bảng biểu, hình ảnh rõ ràng, có tiêu đề, đánh số thứ tự giải thích hay đề cập đến đồ án, có lề, dấu cách sau dấu chấm, dấu phẩy v.v), có mở đầu chương kết luận chương, có liệt kê tài liệu tham khảo có trích dẫn quy định Kỹ viết xuất sắc (cấu trúc câu chuẩn, văn phong khoa học, lập luận logic có sở, từ vựng sử dụng phù hợp v.v.) Thành tựu nghiên cứu khoa học (5) (chọn trường hợp) Có báo khoa học đăng chấp nhận đăng/đạt giải SVNC khoa 10a học giải cấp Viện trở lên/các giải thưởng khoa học (quốc tế/trong nước) từ giải trở lên/ Có đăng ký phát minh sáng chế Được báo cáo hội đồng cấp Viện hội nghị sinh viên nghiên cứu 10b khoa học không đạt giải từ giải trở lên/Đạt giải khuyến khích kỳ thi quốc gia quốc tế khác chuyên ngành TI contest 10c Khơng có thành tích nghiên cứu khoa học Điểm tổng Điểm tổng quy đổi thang 10 1 2 3 4 5 5 5 5 /50 Nhận xét khác (về thái độ tinh thần làm việc sinh viên) Ngày: … / … / 20… Người nhận xét (Ký ghi rõ họ tên) ĐÁNH GIÁ QUYỂN ĐỒ ÁN TỐT NGHIỆP (Dùng cho cán phản biện) Giảng viên đánh giá: Họ tên sinh viên: MSSV: Tên đồ án: Chọn mức điểm phù hợp cho sinh viên trình bày theo tiêu chí đây: Rất (1); Kém (2); Đạt (3); Giỏi (4); Xuất sắc (5) Có kết hợp lý thuyết thực hành (20) Nêu rõ tính cấp thiết quan trọng đề tài, vấn đề giả thuyết (bao gồm mục đích tính phù hợp) phạm vi ứng dụng đồ án Cập nhật kết nghiên cứu gần (trong nước/quốc tế) Nêu rõ chi tiết phương pháp nghiên cứu/giải vấn đề Có kết mơ phỏng/thưc nghiệm trình bày rõ ràng kết đạt Có khả phân tích đánh giá kết (15) Kế hoạch làm việc rõ ràng bao gồm mục tiêu phương pháp thực dựa kết nghiên cứu lý thuyết cách có hệ thống Kết trình bày cách logic dễ hiểu, tất kết phân tích đánh giá thỏa đáng Trong phần kết luận, tác giả rõ khác biệt (nếu có) kết đạt mục tiêu ban đầu đề đồng thời cung cấp lập luận để đề xuất hướng giải thực tương lai Kỹ viết đồ án (10) Đồ án trình bày mẫu quy định với cấu trúc chương logic đẹp mắt (bảng biểu, hình ảnh rõ ràng, có tiêu đề, đánh số thứ tự giải thích hay đề cập đến đồ án, có lề, dấu cách sau dấu chấm, dấu phẩy v.v), có mở đầu chương kết luận chương, có liệt kê tài liệu tham khảo có trích dẫn quy định Kỹ viết xuất sắc (cấu trúc câu chuẩn, văn phong khoa học, lập luận logic có sở, từ vựng sử dụng phù hợp v.v.) Thành tựu nghiên cứu khoa học (5) (chọn trường hợp) Có báo khoa học đăng chấp nhận đăng/đạt giải SVNC khoa 10a học giải cấp Viện trở lên/các giải thưởng khoa học (quốc tế/trong nước) từ giải trở lên/ Có đăng ký phát minh sáng chế Được báo cáo hội đồng cấp Viện hội nghị sinh viên nghiên cứu 10b khoa học không đạt giải từ giải trở lên/Đạt giải khuyến khích kỳ thi quốc gia quốc tế khác chuyên ngành TI contest 10c Khơng có thành tích nghiên cứu khoa học Điểm tổng 1 2 3 4 5 5 5 5 /50 Điểm tổng quy đổi thang 10 Nhận xét khác cán phản biện Ngày: … / … / 20… Người nhận xét (Ký ghi rõ họ tên) ĐÁNH GIÁ QUYỂN ĐỒ ÁN TỐT NGHIỆP (Dùng cho giảng viên hướng dẫn) Tên giảng viên đánh giá: Họ tên Sinh viên: MSSV: Tên đồ án: Chọn mức điểm phù hợp cho sinh viên trình bày theo tiêu chí đây: Rất (1); Kém (2); Đạt (3); Giỏi (4); Xuất sắc (5) Có kết hợp lý thuyết thực hành (20) Nêu rõ tính cấp thiết quan trọng đề tài, vấn đề giả thuyết (bao gồm mục đích tính phù hợp) phạm vi ứng dụng đồ án Cập nhật kết nghiên cứu gần (trong nước/quốc tế) Nêu rõ chi tiết phương pháp nghiên cứu/giải vấn đề Có kết mơ phỏng/thưc nghiệm trình bày rõ ràng kết đạt Có khả phân tích đánh giá kết (15) Kế hoạch làm việc rõ ràng bao gồm mục tiêu phương pháp thực dựa kết nghiên cứu lý thuyết cách có hệ thống Kết trình bày cách logic dễ hiểu, tất kết phân tích đánh giá thỏa đáng Trong phần kết luận, tác giả rõ khác biệt (nếu có) kết đạt mục tiêu ban đầu đề đồng thời cung cấp lập luận để đề xuất hướng giải thực tương lai Kỹ viết đồ án (10) Đồ án trình bày mẫu quy định với cấu trúc chương logic đẹp mắt (bảng biểu, hình ảnh rõ ràng, có tiêu đề, đánh số thứ tự giải thích hay đề cập đến đồ án, có lề, dấu cách sau dấu chấm, dấu phẩy v.v), có mở đầu chương kết luận chương, có liệt kê tài liệu tham khảo có trích dẫn quy định Kỹ viết xuất sắc (cấu trúc câu chuẩn, văn phong khoa học, lập luận logic có sở, từ vựng sử dụng phù hợp v.v.) Thành tựu nghiên cứu khoa học (5) (chọn trường hợp) Có báo khoa học đăng chấp nhận đăng/đạt giải SVNC khoa 10a học giải cấp Viện trở lên/các giải thưởng khoa học (quốc tế/trong nước) từ giải trở lên/ Có đăng ký phát minh sáng chế Được báo cáo hội đồng cấp Viện hội nghị sinh viên nghiên cứu 10b khoa học không đạt giải từ giải trở lên/Đạt giải khuyến khích kỳ thi quốc gia quốc tế khác chuyên ngành TI contest 10c Khơng có thành tích nghiên cứu khoa học Điểm tổng 1 2 3 4 5 5 5 5 /50 Điểm tổng quy đổi thang 10 Nhận xét khác (về thái độ tinh thần làm việc sinh viên) Ngày: … / … / 20… Người nhận xét (Ký ghi rõ họ tên) ĐÁNH GIÁ QUYỂN ĐỒ ÁN TỐT NGHIỆP (Dùng cho cán phản biện) Giảng viên đánh giá: Họ tên sinh viên: MSSV: Tên đồ án: Chọn mức điểm phù hợp cho sinh viên trình bày theo tiêu chí đây: Rất (1); Kém (2); Đạt (3); Giỏi (4); Xuất sắc (5) Có kết hợp lý thuyết thực hành (20) Nêu rõ tính cấp thiết quan trọng đề tài, vấn đề giả thuyết (bao gồm mục đích tính phù hợp) phạm vi ứng dụng đồ án Cập nhật kết nghiên cứu gần (trong nước/quốc tế) Nêu rõ chi tiết phương pháp nghiên cứu/giải vấn đề Có kết mơ phỏng/thưc nghiệm trình bày rõ ràng kết đạt Có khả phân tích đánh giá kết (15) Kế hoạch làm việc rõ ràng bao gồm mục tiêu phương pháp thực dựa kết nghiên cứu lý thuyết cách có hệ thống Kết trình bày cách logic dễ hiểu, tất kết phân tích đánh giá thỏa đáng Trong phần kết luận, tác giả rõ khác biệt (nếu có) kết đạt mục tiêu ban đầu đề đồng thời cung cấp lập luận để đề xuất hướng giải thực tương lai Kỹ viết đồ án (10) Đồ án trình bày mẫu quy định với cấu trúc chương logic đẹp mắt (bảng biểu, hình ảnh rõ ràng, có tiêu đề, đánh số thứ tự giải thích hay đề cập đến đồ án, có lề, dấu cách sau dấu chấm, dấu phẩy v.v), có mở đầu chương kết luận chương, có liệt kê tài liệu tham khảo có trích dẫn quy định Kỹ viết xuất sắc (cấu trúc câu chuẩn, văn phong khoa học, lập luận logic có sở, từ vựng sử dụng phù hợp v.v.) Thành tựu nghiên cứu khoa học (5) (chọn trường hợp) Có báo khoa học đăng chấp nhận đăng/đạt giải SVNC khoa 10a học giải cấp Viện trở lên/các giải thưởng khoa học (quốc tế/trong nước) từ giải trở lên/ Có đăng ký phát minh sáng chế Được báo cáo hội đồng cấp Viện hội nghị sinh viên nghiên cứu 10b khoa học không đạt giải từ giải trở lên/Đạt giải khuyến khích kỳ thi quốc gia quốc tế khác chun ngành TI contest 10c Khơng có thành tích nghiên cứu khoa học Điểm tổng 1 2 3 4 5 5 5 5 /50 Điểm tổng quy đổi thang 10 Nhận xét khác cán phản biện Ngày: … / … / 20… Người nhận xét (Ký ghi rõ họ tên) Hình 2.11 mơ tả hoạt động đánh giá kết 2.2 Một số thuật toán sử dụng 2.2.1 Thuật tốn tạo tập Mơ tả thuật tốn: - Ba biến tồn cụ idcount, VanDeId, _listdata - Khi nhấn button “ADD PARAGRAPH”: + Tạo div element với class “Paragraph” gán id cho div VanDEid chỗi “Vande” + idcount + Tạo textarea nhúng vào div, đồng thời tăng idcount lên + Các biến rows cols lấy giá trị từ input có id “rows” “cols” + Tạo vòng lặp kép để nhúng cell với id giá trị rows để lưu trữ liệu sau này, kết tạo ma trận cell thay cho bảng + Nhúng div vào element cha có id “footer” - Khi nhấn button “DELETE PARAGRAPH” + Tạo list chứa div với class “paragraph” + Gán VanDeId “Vande” + idcount đồng thời giảm idcount - Khi nhấn button “Create and update” + Xố giá trị _listdata + Tạo object _databaitap có dạng json sau: { header: null, value: null, bang: [], rows: 0, cols: 0, }; + Duyệt qua div có class “paragraph”, với lần duyệt thực việc sau • Gán header id div • Gán value giá trị textarea • Duyệt qua tất cell, lấy gái trị cell vào chuỗi “bang” 29 • Push _databaitap vào _listdata + Chuyển _listdata chuỗi string json submit Hình 12 Thuật tốn thêm trường tập 30 Hình 13 Thuật tốn xóa trường thêm tập 31 Hình 14 Thuật tốn upload liệu tập 32 2.2.2 Thuật tốn chuẩn hóa họ tên Hình 15 Lưu đồ thuật tốn chuẩn hóa họ tên Hình 2.12 mơ tả chi tiết thuật tốn chuẩn hóa họ tên Giải thích: -_text: Chuỗi element - length: Độ dài chuỗi 33 - value: Giá trị phần tử - toLowerCase(): Chuyển thành kí tự thường - toUpperCase(): Chuyển thành kí tự hoa - toString(): Chuyển mảng kí tự thành chuỗi kí tự - replace(/,/g,’’): Xoá tất dấu phẩy 2.3 Thiết kế sở liệu 2.3.1 Thiết kế sở liệu theo cấu trúc SQL Sơ đồ sở liệu theo cấu trúc SQL mơ tả hình 2.16 Trong hình 2.12 bảng liệu cần có lữu trữ liệu dạng SQL, bảng có khóa chính, bảng liên kết với thơng qua khóa ngoại nên liệu bảng ràng buộc với chặt chẽ, theo trình tự định Nếu muốn thêm liệu vào bảng cần tuân theo trình tự, bảng phải thêm trước, bảng phải thêm liệu sau, để tránh phát sinh lỗi trình truy vấn liệu sau Hình 16 Sơ đồ sở liệu theo cấu trúc SQL 2.3.2 Thiết kế sở liệu theo cấu trúc NoSQL Cơ sở liệu tạo MongoDB, lưu trữ dạng BSON Từ hình 2.17, colection có nhiều document, document lại có ID riêng biệt hồn tồn khơng giống ID khác, colection khơng có liên hệ ràng buộc với nhau, việc thêm document vào colection không hệ ảnh hưởng đến liệu document colection khác 34 Hình 17 Các colection 2.3.3 So sánh phương pháp thiết kế sở liệu Trong sở liệu SQL, bảng liên kết với theo khóa khóa ngoại có mối liên hệ chặt chẽ với nên việc truy vấn phức tạp thời gian Trong sở liệu NoSQL, để lưu trữ truy suất cần phải lồng ghép model liệu với theo hình 2.17 thấy: - Model người dùng có model account - Trong mơn học có nhiều thí nghiệm, thí nghiệm có câu hỏi nhiều báo cáo sinh viên, để truy suất liệu lưu trữ sau: 35 + Model môn học có dictionary thí nghiệm với key tên thí nghiệm value ThiNghiem + ThiNghiem object với thuộc tính Name paragraph, paragraph object có thuộc tính, tập cịn lại dictionary câu trả lời, chúng phân biệt với key MSSV, value chúng chuỗi string dạng json câu trả lời có cấu trúc định trước Vì việc sử dụng sở liệu theo cấu trúc NoSQL không nhiều thời gian, hợp với dự án có liệu lớn 2.4 Kết luận Trong chương trình bày chi tiết vấn đề hệ thống bao gồm: sơ đồ chức năng, sơ đồ usecase, biểu đồ hoạt động, số thuật toán dùng hệ thống xây dựng sở liệu theo cấu trúc khác để tìm ưu điểm hệ thống sử dụng sở liệu NoSQL 36 Chương Kết đạt kiểm thử Chương thể số giao diện bản, kết đạt sau lập trình dựa tảng ASP.NET MVC sở liệu MongoDB Sau hình ảnh giải thích cụ thể cho hình ảnh 3.1 Một số hình ảnh giao diện Hình Giao diện trang chủ Hình 3.1 thể giao diện trang chủ Trang chủ thiết kế đơn giản gồm vài button Trong giao diện có button Login để nhấn vào, hình đăng nhập để người dùng truy cập Ngồi hình trang chủ cịn phần thơng báo tập giáo viên thêm tập phần danh sách sinh viên chưa đạt yêu cầu thí nghiệm để sinh viên tiện theo dõi Khi nhấn vào nút Home hệ thống hiển thị lại hình đăng nhập 37 Hình Giao diện Login Hình 3.2 mơ tả giao diện đăng nhập Trong hình đăng nhập có nhập Username Password, để đăng nhập, người dùng bắt buộc phải nhập ô Nếu nhập sai hai giao diên lỗi người dùng chưa có sai mật khẩu, nhập hai người dùng đăng nhập thành cơng đến hình thực chức Hình 3 Giao diện Admin Trong hình 3.3, giao diện người quản lý thể gồm phần: quản lý môn học, quản lý sinh viên, quản lý giảng viên Khi nhấn vào đường dẫn, người 38 quản lý truy cập vào phần quản lý với đối tượng tương ứng Tại đây, người quản lý thêm mới, cập nhật, xóa đối tượng Trong hình 3.4, giao diện giáo viên tạo thí nghiệm Sau đăng nhập thành công, hệ thống hiển thị giao diện chức giáo viên, đây, với mơn học, giáo viên có quyền thêm mới, cập nhật, xóa thí nghiệm Khi nhấn thêm thí nghiệm, hệ thống hiển thị hình 6, giáo viên thêm tên thí nghiệm, sau add paragraph để nhập đề vào đó, đề dạng bảng, nhập số hàng số cột bảng vào ô bên trái button Add paragraph, hệ thống hiển thị số hàng cột tương ứng để giáo viên nhập liệu Ngồi cịn có chức xóa paragraph giáo viên nhập thừa ô hàng Sau kết thúc công việc nhập liệu, giáo viên cần nhấn button Create and update để tạo thí nghiệm, hệ thống lưu liệu Hình Giao diện giáo viên thêm thí nghiệm 39 Hình Giao diện sinh viên Hình Giao diện sinh viên làm thí nghiệm Hình 3.5 mơ tả giao diện sinh viên sau khí sinh viên đăng nhập thành cơng, hệ thống hiển thị hình chức sinh viên, sau sinh viên chọn mơn học cần làm thí nghiệm hình 3.5, hệ thống hiển thị hình làm thí nghiệm hình 3.6, đây, sinh viên tiến hành làm băng cách nhập câu trả lời vào 40 ô tương ứng,khi làm xong, sinh viên submit để nộp làm mình, hệ thống tự động chuẩn hóa cách loại bỏ tất dấu cách thừa viết hoa đầu dịng lưu lại liệu Ở hình 3.7, sau sinh viên hoàn thành câu trả lời gửi lên hệ thống, giáo viên xem làm theo mã số sinh viên sinh viên, hình này, giáo viên xem mà chỉnh sửa giá trị làm Hình Giao diện giáo viên xem làm sinh viên 3.2 Kết luận Chương trình bày sơ kết đạt thử nghiệm trình thiết kế xây dựng trang web Đây kết trình nghiên cứu thực đề tài 41 Kết luận Kết đạt Sau trình tìm hiểu lý thuyết, nghiên cứu, tiến hành thực đề tài đồ án tốt nghiệp, chúng em tiếp thu nhiều kiến thức bổ ích, kinh nghiệm thực hành thực tế Nhóm em hồn thành phần đề tài nghiên cứu Giao diện trực quan với người dùng, dễ dàng thao tác Tốc độ xử lý nhanh ổn định, xác Thao tác rành mạch, có thơng báo phản hồi tác vụ hồn thành Khó khăn gặp phải Bên cạnh kết đạt được, trình thực đề tài, chúng em gặp phải khó khăn định ảnh hưởng tới kết quả, với cố gắng chúng em hồn thành phần đề tài Đề xuất hướng phát triển Đề tài dừng lại mức hoàn bản, cần nhiều cải tiến để thực hữu dụng đưa vào thực tiễn như: -Thiết kế lại cấu trúc model -Hệ thống chấm điểm tự động thông báo kết cho giáo viên, sinh viên -Tạo App mobile giúp giáo viên theo dõi trình làm việc sinh viên, giúp sinh viên làm lúc, nơi 42 Danh mục tài liệu tham khảo [1] https://www.c-sharpcorner.com/article/simple-crud-operation-using-asp-net-mvcand-mongodb/ truy câp ngày cuối 06/03/2019 [2] https://techmaster.vn/posts/33728/aspnet-mvc-la-gi-and-tai-sao-ban-nen-su-dungno truy cập ngày cuối 07/03/2019 [3] https://viblo.asia/p/mongodb-la-gi-co-so-du-lieu-phi-quan-he-bJzKmgoPl9N truy cập ngày cuối 08/04/2019 [4] https://stackoverflow.com/ truy cập ngày cuối 06/06/2019 [5] https://www.w3schools.com/css/ truy cập ngày cuối 01/06/2019 [6] https://docs.microsoft.com/ truy cập ngày cuối 07/06/2019 [7] https://www.w3schools.com/js/js_json_syntax.asp truy cập ngày cuối 05/05/2019 43