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 ■0 0- 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 Lớp : 61TH2 Hà Nội, 2021 I.Đề XUẤT ĐỀ BÀI 1.1 Giới thiệu vấn đề 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 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 -Giá 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 vấn đề 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 chúng tơi đặ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è chi tiết không liên quan -Các chức cần phải mơ với thực tế -Giao diện sử dụng 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 +Quản lý khóa học +Quản lý học Đỗ 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) II.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 đầy đủ 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” để quản lý khóa học dễ dàng đá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ý: -Giáo trình: 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 vấn (đạ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 Quản 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: +Chức quản lý giáo trình -Giới 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 gốc, giá tiền sau sale -Xử lý: +Thêm, Sửa giáo trình điền liệu vào form +Bấm nút xóa module phần quản lý sau bấm nút 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 gố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 học 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 +Quản lý học - Giới 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 cách lựa chọn form liệu có sẵn - 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 +Chức tìm kiếm(Chỉ riêng 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 +Chứ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ó 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ử lý: +set role(vai diễn) +set status: +chặn action +view profile: 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 tạo lớp học để thêm học viên vào nhằm quản lý user dạy , dễ dàng biết user theo lộ trình tiến độ học tập 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 cách chọn trạng thái + Thêm điểm cho học viên : Chọn ô điểm , nhấn edit , điền điểm confirm Kết : Giảng viên quản lý giáo trình , tiến độ học viên lớp học +Chức quản lý Voucher - Giới thiệu : User phát voucher 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 + Sửa voucher : Chọn edit bảng voucher , điền liệu vào ô r chọn save chọn cancle để hủy thao tác 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 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/ google 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 đăng nhập tài khoản google N ỘDEMY +Trang chủ 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 + Thơng tin khóa học đăng kí + Thơng tin khóa học chưa đăng kí +Trang Khóa Học User xem khóa học đăng ký +Chọn Khóa Học Các khóa học Nodemy Teacher thêm sửa xóa khóa học +Chi tiết khóa học + Danh sách học(Chưa đăng ký) Ni jDEMY KHÓA HỌC LỚP OFFLINE TẠO cv HỌCTẬP Bạn nhận (?) ■g Tràn Khánh Duy Video hướng dẫn khóa học Danh sách học Hướng dẫn cài mySQL a Tạo Database tạo bảng mySQL a Thêm sửa xóa data mySQL a insert into select toán tử and, or mySQL a Sử dụng wildcard để tìm liệu dạng text mySQL a sử dụng betvveen exists mySQL a ghép chuỗi phép toán mySQL a Sắp xếp data mySQL a +Danh sách học(Chưa đăng ký) NQDEMY KHÓA HỌC LỚPOFFLINE TẠOCV HỌC TẬP -/ Tự thiết kế cv cho thân (?) ■g Tràn Khánh Duy Q x/ Hiểu rõ vê cách tạo hiệu ứng animation, tạo animation thú vị Videọ hướng dẫn khóa học Danh sách học 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 Sử dụng Google dev tools Tổng quan HTML CSS: Bài 1: Cách sử dụng css vvebsite CSS: Bài Làm quen với selector css © CSS: Bài Các thuộc tính liên thay đổi chữ css, text-align, text-transform © +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 QDEMY KHÓA HỌC CVTẠO HỌC TẬP ũ a LỚP NGOẠI TUYÊN K7-KHÓA CHIỀU K6 - Light Keỵ Giáo viên: Phạm Tuấn Giáo viên: Phạm Anh (?) Mai Huy Hưng K8 - Tối đa khóa Giáo viên: Phạm Tuấn ĩuấn Anh ỵ ■ Anh Ca học 14:00-17:30 Ca học 09:00 - 12:00 Ca học Khai giảng 07/09/202 Khai giáng 17/06/2020 Khai giáng End 06/11/202 End 04/09/2020 Giáo trình Nodejs íline key Giáo trình Basic key 19:00-21:00 End Giáo trinh learning 16/10/202 08/12/202 Basic key +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 pLlDEMY KHÓA HỌC LỚP NGOẠI TUYẾN cv TẠO HỌC TẬP □ Mai Huy Hưng 09 Học khóa hướng dẩn video Câu hỏi Kiểm tra Q Tim kiếm js # (3) js #8 (5) js # (4) js#8(2) Search íorthe module Admin quản lý kiểm tra - Quản lý giáo trình khóa học (Admin , teacher quản lý) + Hiển thị giáo trình video hướng dẫn khóa học Khóa học offline ((8) nodejs Bài học: 10 Khóa Khóa nâng cao Bài học: Bài học: Tạo Syllabus Công ty TNHH Công nghệ Nodemy Việt Nam + Tạo giáo trình Hiển thị thơng tài khoản A Thông người dùng I R Học lớptintrang Add student ÉÈ Chứng từ +Thông Tin Người Dùng(Quản lý người dùng Amin) Tên E-mail Phạm Tuấn Anh tuanan h.ptal 9@gmai l.com Đỗ Trọng Tân dotan231199@gmail.com (?) Tạo thẻ hỗ trợ cáu TÍCH h cực I TÍCH cực TÍCH cực I Nguyễn Hoàng Đạt nguyenhoangdat99@gmail.co m 086663380 24/12/2021 giáo viên Trạng thái Lương Khắc Nam namggg465@gmail.com 10/08/2020 người dùng Vũ Việt Dũng vudunghn95@gmail.com 10/08/2020 người dùng Nguyễn Văn Sang sangnvhel 30388@fptedu.vn 10/08/2020 người dùng Điện thoại CreatedAt Vai diễn Nguyễn Dương Phong ndphonghe130315@gmail.co m Nguyễn Đình Nam người dùng 10/08/2020 người dùng namndwebdev@gmail.com 0866633805 Nguyễn Hải Linh 12 10/08/2020 mrlinhdeptrai98@gmail.com 10/08/2020 giáo viên ■ 036323519 10/08/2020 10/08/2020 giáo viên ■ người dùng I TÍCH cực I TÍCH cực TÍCH cực TÍCH cực Mai huy hưng v Hoạt động + Quản Lý Voucher (Admin quản lý) Hiển thị thông tin Voucher , thêm Voucher +Trang Giáo trình Admin Teacher quản lý giáo trình N0DEMY KHỎA HỌC LỚP OFFLINE TẠOCV HỌC TẬP □ $ © X? Admin video hướng dần khóa hộc Sample Sỵllabus ÌJSịỊ this is a sample Bài học: Khóa học offline nodejs MM*’* Khóa Bài học: Bài học: 10 Khóa nâng cao Bài học: Tạo Sylỉabus Công ty TNHH Công nghệ Nũdemy Việt Nam + Trang giỏ hàng Những khóa học user chọn mua Khóa học tìm hiểu NodeJS từ đến nâng cao NodeJS nên táng mạnh mẽ đỡ xẽp hạng cơng nghệ cóc nhà phát triển chuyên nghiệp sừ Đăng ký khóa học : (1 khóa học) 1.490.000 đ Bỏ qua khóa học dụng phồ biẽn nhđt Hiểu vẽ bán chât, quy trình chợy code NodeJS đồng nghĩa bợn làm chủ odeJS Khóa học giúp bạn thành thạo vận dụng NodeJS phớt triền dự án 980.000 đ IV N0DEMY KHÓA HỌC 4.7 LỚP OFFLINE TẠO cv HỌC TẬP □ g lgj & © ì? Mai Huy Hung Q (97) 680.000 VND Nguyễn Đình Nam 490.000 VND HTML The Easy Way Nguyễn Đình Nam Khóa học HTML - css cắt ghép giao diện vvebsite Responsive Ogit GitHub Thành thạo GIT vận dụng vào dự án từ (14) Mới mát ... 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. .. thiệu khóa học + Các khóa học 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 +Quản lý học - Giới thiệu: + cho phép quản lý học khóa học. .. Admin quản lý kiểm tra - Quản lý giáo trình khóa học (Admin , teacher quản lý) + Hiển thị giáo trình video hướng dẫn khóa học Khóa học offline ((8) nodejs Bài học: 10 Khóa Khóa nâng cao Bài học: Bài