báo cáo bài tập lớn môn tương tác người máy thiết kế ứng dụng website quản lý khóa học về website nodemy

TRƯỜNG ĐẠI HỌC THỦY LỢI KHOA CÔNG NGHỆ THÔNG TIN BỘ MÔN: TƯƠNG TÁC NGƯỜI MÁY BÁO CÁO BÀI TẬP LỚN MÔN TƯƠNG TÁC NGƯỜI MÁY “Thiết kế ứng dụng website quản lý khóa học website Nodemy” SINH VIÊN THỰC HIỆN: Họ tên: Nguyễn Đức Hải Đỗ Gia Khánh Mai Huy Hùng Trịnh Khắc Hùng Lop : 61TH2 Hà Nội, 2021 I.Đề XUẤT ĐỀ BÀI 1.1 Giới thiệu đề Việc quản lý khóa học thủ cơng trước có nhiều nhược điểm: -Chỉ quản lý dễ dàng khối lượng khóa học cịn -Vé vấn đề lưu trữ, tìm kiếm khóa học khó khăn cảng ngày lượng khóa học, giảng ngày nhiều -Update video bồ xung kiến thức liên tục để theo kịp xu hướng tránh lạc hậu -Gia thành khóa học thay đối liên tục theo thời gian phụ thuộc vào thị trường mà việc update thay đơi giá thành gây nhiều lôi 1.2 Giải pháp Đề khắc phục đề trên, chúng em chọn xây dựng thiết kế ứng dụng website quản lý khóa học website Nodemy để quản lý khóa học dễ dàng Đã có nhiều phần mềm quản lý khóa học đời, Nhưng lại không đáp ứng phần giao diện tính thâm mỹ mà người sử dụng đặt chức cịn rời rạc thiếu tính liên kết Vì nhóm đặt mục tiêu thiết kế ứng dụng website quản lý khóa học Nodemy với giao diện mới, đáp ứng nhu cầu người sử dụng mang lại hiệu cao công việc lẫn học tập Yêu cầu giao diện đặt người sử dụng: -Đơn giản sử dụng, không màu mè tiết không liên quan -Các chức cần phải mơ với thực tế -Giao dién su dung tiéng Việt -Sử dụng Windows 1.3 Phân cơng thành viên tham gia Nhóm thực gồm có thành viên: -Nguyễn Đức Hải -Mai Huy Hùng - Đỗ Gia Khánh -Trịnh Khắc Hùng Các cơng việc thực thành viên nhóm: +Cả nhóm thực hiện: -Thảo luận phân tích thiết kế ứng dụng -Góp ý chỉnh sửa giao diện -Phân tích người sử dụng hệ thơng -Các chức hệ thông +Từng thành viên thực hiện: Nguyễn Đức Hải -Viết báo cáo +Chức quản lý giáo trình Mai Huy Hùng +Quan lý khóa học +Quan ly bai hoc Đỗ Gia Khánh +Chức quản lý lớp học +Chức quản lý Voucher Trịnh Khắc Hùng +Chức tìm kiếm(Search) +Chức quản lý người dùng(quản lý tài khoản) I.PHẦN TÍCH NGƯỜI SỬ DỤNG VÀ PHẦN TÍCH NHIỆM VỤ 2.1 Giới thiệu Trước đây, để tìm kiếm khóa học vừa với túi tiền kiến thức day du rat khó giao diện đập vào mắt người dùng lộn xộn khó chịu khơng biết nên đăng kí cho phù hợp Vì nhóm chúng tơi nghĩ ý tưởng “thiết kế ứng dụng website quản lý khóa học website Nodemy” dé quan lý khóa học dễ dàng hon đáp ứng nhu cầu người sử dụng 2.2 Phần tích người sử dụng Hệ thống có nhóm người dùng là: -Teacher -Quản lý hệ thơng(Admin) Nhóm Teacher: -Có chức quản lý: -Giao trinh: thêm, sửa, xóa giáo trình vào hệ thống -Khóa học: thêm, sửa, xóa khóa học -Bài học, tập: thêm, sửa, xóa học -Yêu cầu nhóm Teacher: - Có trình độ học (đại học) hiểu biết chuyên sâu ngành công nghệ thông tin để giảng dạy hướng dẫn cho người sử dụng -Có kiên thức sâu rộng Nodemy -Có trình độ tin học: Sử dụng máy tính thơng thạo Nhóm Quan lý hệ thống(Admin): Là nhóm có quyền cao hệ thống sử dụng hệ thống để: -Update, bảo trì hệ thống -Quản lý người dùng -Quản lý lớp học -Quản lý voucher -Tạo câu hỏi hỗ trợ cho người sử dụng -Có quyên thêm, sửa, xóa, tăng giảm giá khóa học -Phân quyên cho người dùng -Yêu cầu Quản lý hệ thống: -Có chun mơn CNTT (đại học cơng nghệ thơng tin trở lên) -Có kiến thức quản lý 2.3 Phân tích nhiệm vụ Thiết kế ứng dụng website quản lý khóa học website Nodemy có yêu câu chức sau: +C hức quản lý giáo trình -Gidi thiéu: +Cho phép quản lý thơng tin giáo trình website, modul sách liên quan đến lập trình website -Dữ liệu đầu vào: +Tên giáo trình, tên sách, người biên soạn, đánh giá sản phâm, giá tiên øôc, giá tiên sau sale -Xử lý: +Thêm, Sửa giáo trình điền liệu vào form +Bam nut xóa module phân quản lý sau bam nut confirm -Kết quả: +Hién thị giáo trình danh mục danh sách +Quản lý khóa học - Giới thiệu : + Cho phép quản lý thông tin khóa học „ xem thơng tin khóa học - Dữ liệu đầu vào : + Bao gồm : tên khóa học, giáo viên dạy khóa học đó, giá tiền sốc khóa học, giá tiên sau sale , đơn vị tính giá , video giới thiệu khóa học + Các khóa hoc thêm cách nhập liệu vào form tạo khóa học - Xử lý : + Thêm, sửa, xóa khóa học - Kết : Hiền thị khóa học +Quan ly bai hoc - Gidi thiéu: + cho phép quản lý học khóa học , xem thơng tin nội dung học, câu hỏi kiểm tra - Dữ liệu đầu vào + Danh sách tên học, giảng viên dạy học, tiêu đề , mô tả + Các học thêm băng cách lựa chọn form đữ liệu san - Xử lý : + thêm, sửa nhập liệu vào form + xóa học form nhập nhập liệu - Kết : + hiển thị danh sách học sau lựa chọn có +Chức tìm kiếm(Chỉ riêng cia ADMIN) - Giới thiệu: + Trang web cho phép Amin tìm kiếm danh sách người sử dụng đăng ký khóa học + Tìm kiếm theo trường : Tên người sử dụng, E-maIl, số điện thoại - Dữ liệu vào + Nhập tên người dùng, Email, Số điện thoại + Được nhập vào hệ thống cách nhập liệu qua form nhập liệu tìm kiếm Xử lý: tìm kiếm liệu hệ thống Kết : hiến thị liệu phù hợp +C hức quản lý người dùng(quản lý tài khoản) - Giới thiệu: + Hệ thống cho phép phân quyền sử dụng từ chống truy cập bất hợp pháp vào hệ thông liệu , đồng thời định rõ trách nhiệm trường hợp có xảy với hệ thông - - Dũ liệu vào: +E-mai +Mật +Họ Tên +Số điện thoại +Loại tài khoản - Xử ly: +set role(vai diễn) +set status: +chan action +view profile: sé hién thị khóa học người dùng đăng ký - _ Kết : Người dùng sử dụng chức , sử dụng khóa học mua tương ứng +Chức quản lý lớp học -GIới Thiệu : Admin có thé tạo lớp học đề thêm học viên vào nhăm quản lý user minh dang day , dé dang biét duoc user dang theo lộ trình tiễn độ hoc tap cua học viên - Dữ liệu vào : + Tên lớp học + Thời gian bắt đầu + Thời gian kết thúc + Ngày khai giảng — kết thúc + Giáo trình + Giảng viên dạy lớp + Học viên thuộc lớp + Thông tin học viên + Danh sách buổi học theo giáo trình + Nội dung buổi học + Thông tin học viên điểm danh theo buổi học + Bảng điểm - Xử lý: + Thêm lớp học : Nhập liệu vào form + Thêm học viên : Tìm theo email xác nhận thêm + Điểm danh học viên : Chỉnh sửa trạng thái điểm danh học viên tab điểm danh băng cách chọn trạng thái + Thém diém cho hoc vién : Chon diém , nhan edit , dién diém va confirm Kết : Giảng viên quản lý giáo trình , tiến độ học viên lớp học +Chire nang quan ly Voucher - Giới thiệu : User phát voueher admin , đăng ký khóa học giảm giá dự voucher có , không cộng dồn - Dữ liệu vào : + Mã voucher + Giá Giảm + Số lượng + Ngày hết hạn -Xử lý + Tạo voucher : Điền liệu vào form + Stra voucher : Chon edit bang voucher , dién dit ligu vao timg r chon save hoac chon cancle dé huy thao tac Két : Tạo voucher học viên áp dụng mua khóa học 3.1 Thiết kế tổng quan Dựa phân tích vê nhóm người sử dụng khảo sát yêu câu giao diện, chức phân mêm, nhóm chúng tơi đên tiên hành thiệt kê chia chương trình thành nhóm chức chính: + Quản lý hệ thống(Admin): có chức quản lý chung tồn hệ thống, nhóm quản trị hệ thống sử dụng để cài đặt, bảo trì quản lý hệ thống, quản lý người sử dụng +Teacher: 3.2 Thiết kế kịch mẫu +Đăng Nhập Muốn vào trang chủ hệ thống nodemy Search https://class.nodemy.vn/ øoogle Màn hình đăng nhập ra, người sử dụng phải đăng nhập vào hệ thống Email Mật khâu đăng nhập băng tài khoản google N @DEMY Dang nhap E-mail bà iM | Mật Password quên? ø Đăng nhập Hoặc đăng nhập với G Google Bạn chưa có tai khoan? Dang ky +Dang ki Người sử dụng chưa có tài khoản mật nhân đăng kí, sau form đăng kí điên đủ thơng tin HE THONG DEMY N& Dang ky Password quén? Dang nhap il +Quên mật khâu Người sử dụng click vào chô quên mật khâu hình hiên thị form Nhập Email vào Email lây mã xác nhận Quên mật Bạn quên mật mình? Đừng lo lắng! Cung cấp cho email sử dụng để đăng ký tài khoản Viblo bạn Chúng gửi cho bạn liên kết để đặt lại mật bạn qua thư * E-mail: +Trang chu Khi đăng nhập vào hệ thống, đưa người dùng đến Trang chủ người dùng chọn để xem đăng kí khóa học f 00k x œ © Google [ere * AddonsStore NÉŒÖDEMY Meet - xrz-xno x Nodemy System erat @ [Đ Newfolder KHĨA HỌC [ Chrome Bookmarks LỚP OFFLINE [| m J JSON Viewer - Chro TẠO CV HỌC TẬP MySOL z MySOL Tai Lieu - Google Dr € @ Wy Tran Khanh Duy @ + Thơng tin khóa học đăng kí NÉŒƯDEMY KHÓA HỌC LỚP OFFLINE TẠO CV HỌC TẬP @ TàầnkhánhDuy €2 an Khanh Duy @ KHÓA HỌC Đà THAM GIA TL @ er @ git a5 Khóa học HTML - CSS cắt ghép giao diện website Responsive Thành thạo GIT vận dụng vào dự án từ số0 47 46 wkwww% (97) 680.000 VND : e& 969:000-VINĐ ie a Nguyên Đình Nam -_ Học nhiều ˆ kw#w#ử¿ 50 (19 490.000 VND : & 99:990VNĐ ccm Nguyên Đình Nam _ Mới mắt + Thơng tin khóa học chưa đăng kí Aw ° ~ NÉŒƯDEMY z KHĨA HỌC - LỚP OFFLINE TẠO CV Khóa học Express.js từ đến nâng cao ##4&*w*#w*4 (1) : 00150 B) Nguyén Dinh N & Tớ “backend "ò ⁄ HỌC TẬP @ HH DANH SÁCH KHÓA HỌC node ‹J | 49% \ mongo Ễ ue Ez3 = wu Khóa học tìm hiểu NodeJS tir can ban đến Cơ sở liệu MongoDB 49 46 nâng cao kkk 980.000 & (8) VND Nguyên Dinh Nam 490-000VNĐ -_ Mới mắt {a> server ExpressJS NodeJS kkk 490.000 & (NOSQL) kết hợp (13) MySQL 0.0 VND Ngun Đình Nam ncn Khóa học MySQL - tìm hiểu chức 960:000VNÐ _ Mới mắt ` +Trang Khóa Học User xem khóa học đăng ký (0) 490.000 Œ@ VND Hồng Minh Thái 366-006 _ Mới mắt NÉƯDEMY LỚP OFFLINE TẠO CV HỌC TẬP @) FH tankhanh buy @ Era lNN Start Léarning ULL ® git 23 Khóa học đăng ký Khóa học HTML - CSS cất ghép giao diện Thành thạo GIT vận dụng vào dự án từ 47 46 website Responsive kkk 680.000 & (97) VND ý Nguyén Dinh Nam Khóa học Express.js từ đến nâng cao số kkk 5.0 (14) S00:090 VNĐ) 490.000 VND 999:000vNÐ _ Học nhiều ˆ & _ Méira mat Nguyén Dinh Nam keke ee (1) 1.900.000 VND ` & : }:600-000VND Nguyên Đình Nam _ backend - +Chhọn Khóa Học Các khóa học Nodemy Teacher thêm sửa xóa khóa học N ÉƯDEMY KHĨA HỌC Start LỚP NGOẠI TUYẾN ch Léarning CV TẠO HỌC TẬP io a @ ©) 23 0,0 DAL A MANE IC +Chỉ tiết khóa hoc Os BÀI 2: Javascript - JS (0) 0,0 DALC cece a it GitHub BÀI 3: GIT (0) nitrite MaiHuyHưng a o HTML BÀI 1: HTML - CSS 1W mir Anta 0,0 (0) (js) DAI Cc VAC NILIÂNI 9: 1V AIIVÊNI Mir ARID @ ee - Thơng tin khóa học cho người sử dụng xem đăng kí học.(Chưa đăng ký) NÉŒƯDEMY KHĨA HỌC LỚP OFFLINE TẠO CV HỌC TẬP a © @ Ne] Đỗ Gia Khánh th Cơ sở liệu MongoDB (NOSQL) két hop server ExpressJS NodeJS Khóa học giúp bạn dễ dàng tiếp cận triển khai hoàn thiện hệ thống server Node.JS kết hợp MongoDB Quản lý MongoDB với comman line GUI Robomongo, sử dụng dịch vụ cloud DB Mongo Atlas ke [Bài học:6 h @ (13) ⁄ Hỗ trợ :6 mm MONGODB LA GI? Gidi thiéukhe Tinh nang néi bat cua mongodb ma ban can biét Giam 49% 490.000 VND E0 AEG UnA Học giảng viên: Đỗ Gia Khánh 0866633805 Cân tư vân, Đăng kí tham gia ! ĐĂNG KÝ HỌC + Danh sach cac bai hoc(Chua dang ky) NÉƯDEMY KHĨA HỌC LỚP OFFLINE TẠO CV Bạn nhận Danh sách học Hướng dẫn cài mySQL Tạo Database tạo bảng mySQL Thêm sửa xóa data mySQL insert into select toán tử and, or mySQL Sử dụng wildcard để tìm liệu dạng text mySQL sử dụng between exists mySQL ghép chuỗi phép toán mySQL Sắp xếp data mySQL HỌC TẬP @ y= © Tran Khanh Duy @ - Thơng tin khóa học cho người sử dụng có thé xem va dang ki hoc.(Da đăng ký) NÉŒƯDEMY KHĨA HỌC LỚP OFFLINE TẠO CV HỌC TẬP Œ@ tý @ tankhannoy Khóa học HTML - CSS cắt ghép giao diện website Responsive &| a Nam duoc kién thirc vé html, css va c6 thé tu lam giao dién webstite tinh ae oC) [iBài học:24 Z Hỗ trợ:10 QUÁ TRÌNH HỌC TẬP: 12/24 Bài HTML & CSS £STRÊN ĐA THIẾT BỊ Xem Wuuhe +Danh sách học(Chưa đăng ký) N&/)DEMY KHOA HOC LOP OFFLINE TẠO CV HỌC TẬP v/ Tự thiết kế CV cho thân @ @ TH rrànKhánh Duy v/ Hiểu rõ cách tạo hiệu ứng animation, tạo animation thú vị Hướng dẫn cài đặt IDE visual studio code Hướng dẫn phím tắt IDE tăng tốc học tập lập trình Sử dụng Emmet kết hợp phím tắt tăng tốc độ lập trình HTML Str dung Google dev tools Tổng quan HTML CSS: Bai 1: Cach str dung CSS website CSS: Bai Lam quen vdi selector CSS CSS: Bài Các thuộc tính liên thay đổi chữ CSS, text-align, text-transform Q ||©}/©}/©]/© }/@ }|/@ ||©@ Danh sách học @ +Chọn Lớp Ngoại Tuyến(Quản lý lớp học) Lớp ngoại tuyến giúp cho Teacher , admin quản lý lớp học, thời gian học NẾỊDEMY khóaHọc CVTAO HỌCTẬP đ ø @ BW ManwHug @ % K7-KHĨACHIỀU _ -Đ Giáo viên: Phạm Tuấn Anh kó - Light Key K8 - Tối đa khóa Giáo viên: Phạm Tuấn Anh Giáo viên: Phạm Tuấn Anh Ca học 14:00 - 17:30 Ca học 09:00 - 12:00 Ca học 19:00 - 21:00 Khai giảng 07/09/2020 Khai giảng 17/06/2020 Khai giảng 16/10/2020 End 06/11/2020 End 04/09/2020 End 08/12/2020 Giáo trình Basic key Giáo trình Nodejs offline key Giáo trình Basic key learning +Chọn Học Tập Admin, Teacher tạo câu hỏi „ kiểm tra cho người dùng, người đăng kí khóa học có thê làm sau học NÉƯDEMY kHóAHỌC LỚPNGOẠITUYẾN CVTẠO a o @ + ManHuyHug a Câu hỏi ED Kiểm tra (Gì @ js #8 (3) @ js #8 (5) @ js #8 (4) @ js #8 (2) Tìm kiếm Search for the module | v @ Learn security Tạo thi Tên thi: Thời gian thì: Số câu hỏi: Chọn module: Chọn class: Admin quản lý kiểm tra NẾðDEMY kHÓAHỌC LỚPNGOẠTUYN (CVIAO [24 ¡ a @ BR MaHuyHug Câuhỏi > Kiểm tra Bài thi Time: 20 minutes Time: 60 minutes Time: 10 minutes Time: 10 minutes Số câu hỏi: 20 Số câu hỏi: 50 Số câu hỏi: 10 Số câu hỏi: 10 ĐỀ THỊ THỬ ĐỀ THỊ THỬ ĐỀ THỊ THỬ ĐỀ THỊ THỬ Time: 50 minutes Time: 20 minutes Time: minutes Số câu hỏi: 20 Sấ câu hỏi: 40 Số câu hỏi: ¬ - Quản lý giáo trình khóa học (Admin, teacher quản lý) + Hiển thị giáo trình @ ` NÉŒƯDEMY KHĨA HỌC LỚP OFFLINE TẠO CV Khóa học offline nodejs @ Bài học: 10 HỌC TẬP a % a œ@ 1s Mai Huy Hung Khóa Khóa nâng cao Bài học: Bài học: Công ty TNHH Công nghệ Nodemy Việt Nam + Tạo giáo trình Tạo Syllabus * Tên giáo trình Mơ tả * Modules Cancel +Bảng Điều Khién +Thơng Tìn Người Dùng(Quản lý người dùng Amin) @ Hiển thị thông tài khoản A Thông tin người dùng R Học lớp trang = Mai huy hưng V Add student && Chting tir Tén E-mail Dién thoai CreatedAt Vai dién Trang thai 0866633805 24/12/2021 giáo viên TÍCH CỰC Hoat déng @ Tạo thẻ hỗ trợ câu h Phạm Tuấn Anh tuananh.pta19@gmail.com Đỗ Trọng Tân dotan231199@gmail.com 10/08/2020 người dùng Nguyén Hoang Dat nguyenhoangdat99@gmail.com 10/08/2020 Lương Khắc Nam namggg465@gmail.com Vũ Việt Dũng khối Xem lí lịch ữũ TÍCH CỰC Xem lí lịch a người dùng TÍCH CỰC Xem lí lịch q 10/08/2020 người dùng TÍCH CỰC Xem lí lịch a vudunghn95@gmail.com 10/08/2020 người dùng TÍCH CỰC Xem lí lịch ag Nguyén Van Sang sangnvhe130388@fpt.edu.vn 10/08/2020 người dùng TÍCH CỰC Xem lí lịch q Nguyễn Dương Phong ndphonghe130315@gmail.com 0363235199 10/08/2020 người dùng TÍCH CỰC Xem lí lịch q Nguyễn Đình Nam namndwebdev@gmail.com 0866633805 10/08/2020 giáo viên TÍCH CỰC Xem lí lịch q Nguyễn Hải Linh 12 mrlinhdeptrai98@gmail.com 10/08/2020 giáo viên TÍCH CỰC Xem lí lịch ag khối + Quan Ly Voucher (Admin quan ly) Hiên thị thong tin vé cac Voucher , va có thê thêm Voucher Learn security Học Ở trường _“ User Profile ff = Mai huy V il & SQLSERVER Trang lớp học Voucher ® Tao tag câu hỏi hỗ t | Thém Voucher name discount quantity expired operation N30 20 2021-01-31T00:00:00.000Z Edit N20 30 111 2021-01-31T10:38:19.110Z Edit N10 10 110 2021-01-31T10:38:19.110Z Edit Lhị @ Lat Y c x Pa en A TỶ C2123) 12/26/2021 oO +Trang Giáo trình Admin va Teacher quản lý giáo trình NÉƯDEMY KHĨA HỌC LỚP OFFLINE TẠO CV HỌC TẬP Sample Syllabus (is) me G a Khóa học offline nodejs this is a sample By Admin @ Khóa Bai hoc: 10 Bai hoc: @ Bài học: Khoa nang cao Bai hoc: Công ty TNHH Công nghệ Nodemy Việt Nam + Trang gió hàng Những khóa học user chọn mua NÉŒƯDEMY KHĨA HỌC LỚP OFFLINE TẠO CV © | HỌC TẬP > Khóa học Đăng ký khóa học : (1 khóa học) Khóa học tìm hiểu NodeJS từ đến nâng cao nede ® NodeJS tảng mạnh mẽ xếp hạng công nghệ nhà phát triển chuyên nghiệp sử dụng phổ biến Hiểu chất, quy trình chạy code NodeJS đồng nghĩa bạn làm chủ lodeJS Khóa học gitip ban thao van dung NodeJS phát triển dự án 980.000 d = +.499.00%đ Bỏ qua khóa học Hoan tat dang ky THEM MỘT KHĨA HỌC MỚI Ìmongzo CA c& Ate lian Manaan IV Start Learning mm WhAa hae MuCAL The Easy Way Chi ea hh WhAa hae Daret iC thire VháÁ^¬ hn¿Ân tẤn UTM wom @