MỤC LỤC MỞ ĐẦU.................................................................................................. 14 CHƯƠNG I: GIỚI THIỆU TỔNG QUAN ĐƠN VỊ THỰC TẬP............... 16 1. Cơ cấu tổ chức và nhân sự của công ty ITECHCO............................... 17 2. Tình hình hoạt động kinh doanh ......................................................... 18 3. Chiến lược, định hướng của doanh nghiệp trong thời gian tới................ 20 4. Quy trình sản xuất bài giảng cao cấp................................................... 22 5. Nhiệm vụ thực tập............................................................................. 24 CHƯƠNG II: CƠ SỞ LÍ LUẬN................................................................ 25 2. 1 Giới thiệu về E-learning .................................................................... 25 2.1.1 Khái niệm E-learning................................................................... 25 2.1.2 Lợi ích từ E-learning.................................................................... 27 2.1.3 Thành phần và cấu trúc của E-learning .......................................... 28 2.2. Giới thiệu về công cụ hỗ trợ thiết kế Web – XAMPP ........................... 31 2.2.1 XAMPP -phần mềm hỗ trợ Web ................................................... 31 2.2.2 Các ứng dụng tích hợp trong XAMPP ........................................... 32 2.3 Giới thiệu về Ant Design.................................................................... 34 CHƯƠNG III : QUÁ TRÌNH THỰC TẬP LẬP TRÌNH CÁC CHỨC NĂNG ĐƯỢC GIAO TRONG DỰ ÁN TẠI DOANH NGHIỆP............................ 36 3.1. Thư viện làm giống trang cũ............................................................ 36 3.2. Lỗi khi bấm f5 ở trang chương trình thi đua...................................... 38 3.3. Chỉnh trang quá trình học tập........................................................... 39 3.4. Chứng chỉ ngoài............................................................................. 40 3.5. Sửa lớp học chưa hoàn thành........................................................... 42 3.6. HSG: Đánh dấu trong chi tiết khóa học ............................................ 43 3.7. Tổng hợp lỗi hệ thống 4.................................................................. 44 3.8. Tổng hợp lỗi giao diện 7 ................................................................. 50 3.9. Danh hiệu học tập........................................................................... 53 3.10. Tổng hợp lỗi giao diện 3.............................................................. 54 8 3.11. FE – Đề xuất khóa học: khi nhấn lưu thì disable và hiển thị xoay để user biết hệ thống đang thực hiện.............................................................. 60 3.12. Thay đổi trang 404 của react thành trang khác UI khác đẹp hơn đáp ứng được cả night mode........................................................................... 60 3.13. Tổng hợp lỗi giao diện 2.............................................................. 61 3.14. Lịch sử chương trình thi đua......................................................... 66 3.15. Menu Bottom trang học viên........................................................ 66 3.16. Tổng hợp lỗi giao diện................................................................. 70 3.17. Khóa học đề xuất ........................................................................ 75 3.18. Yêu cầu hỗ trợ ............................................................................ 76 3.19. Tổng hợp lỗi giao diện 9.............................................................. 77 3.20. Tổng hợp lỗi web 10.................................................................... 81 3.21. HSG : Trang quá trình học tập...................................................... 83 KẾT LUẬN.............................................................................................. 85 TÀI LIỆU THAM KHẢO.......................................................................
GIỚI THIỆU TỔNG QUAN ĐƠN VỊ THỰC TẬP
Cơ cấu tổ chức và nhân sự của công ty ITECHCO
Hình 1 Sơ đồ cơ cấu tổ chức công ty ITECHCO
Cơ cấu tổ chức trong Công ty được bố trí theo mô hình chiến lược do Ban Giám đốc đề ra với phương châm “Đơn giản – Hiệu quả” ITECHCO chú trọng vào chuyên môn hóa và sự phối hợp chặt chẽ giữa các trung tâm chức năng và phòng ban hỗ trợ
Cơ cấu tổ chức phân theo chức năng được quản lý và điều hành chặt chẽ theo mô hình thông tin hai chiều tương tác hợp lý Cho phép mệnh lệnh cấp cao nhất được đi theo con đường ngắn nhất, rõ ràng nhất tới mọi nhân viên, do đó công việc được triển khai đúng mục tiêu, đúng người, đúng việc
Ban Giám đốc: điều hành hoạt động kinh doanh hằng ngày của công ty, ban hành quy chế quản lý nội bộ công ty Đưa ra tầm nhìn chiến lược kinh doanh cho công ty
Phòng kỹ thuật: Hỗ trợ về mặt xây dựng, quản lý, điều hành website Quản lý, thực hiện các dự án về SEO, thiết kế Website, bảo trì… của công ty Đảm bảo các dự án được hoàn thành tốt và theo đúng tiến độ, hợp đồng được ký kết
18 Phòng kinh doanh: Tìm hiểu nhu cầu, thiết kế các dự án, xây dựng chiến dịch quảng cáo, thúc đẩy bán hàng Lập kế hoạch và xây dựng các chiến lược Marketing cho từng sản phẩm dịch vụ mà công ty cung cấp Tìm hiểu nhu cầu, xác định mục tiêu, định vị thương hiệu của công ty Tiếp nhận và phản hồi những thắc mắc của khách hàng, có trách nhiệm với khách hàng
Phòng đào tạo – Tổ chức: Thực hiện tạo các gói khóa học theo yêu cầu của khách hàng về nghiệp vụ mà họ cung cấp, tổ chức ghi hinh, quay tài liệu giới thiệu về đơn vị của khách hàng Thiết kế logo, hình ảnh, slide quảng cáo theo yêu cầu của khách hàng
Phòng nhân sự: Quản lý thông tin hồ sơ nhân viên đang làm việc trong công ty, phụ trách việc tuyển dụng nhân sự trong công ty Thực hiện các nghiệp vụ về nhân sự như chấm công, đóng bảo hiểm,…
Phòng kế toán: Phụ trách về hành chính nhân sự trong công ty Quản lý hoạt động tài chính- kế toán trong công ty Quản lý, thống kê vốn, lợi nhuận trước, sau thuế cùng các hoạt động giao dịch khác đem lại cái nhìn tổng quan nhất về tình hình hoạt động kinh doanh của công ty.
Tình hình hoạt động kinh doanh
Dịch vụ: Thiết kế website, dịch vụ học tập – đào tạo trực tuyến, thiết kế logo, thiết kế hình ảnh, quay video về các sản phẩm và dịch vụ của khách hàng
Thiết kế website theo yêu cầu của khách hàng, sử dụng các ngôn ngữ và các công cụ hỗ trợ để tăng hiệu năng của trang web và trãi nghiệm của người dùng Các công cụ và ngôn ngữ thường dùng như: HTML/CSS, Javascript, WordPress, Bootstrap, React,…
❖ Dịch vụ học tập – đào tạo trực tuyến
Là một trong nhưng công việc chủ yêu của công ty, tạo ra các khóa học theo yêu cầu của khách hàng để training nhân viên trong công ty, đánh giá thi đua
19 và lộ trình học tập của nhân viên Cung cấp các slide bài giảng, các trò chơi có tích hợp các câu hỏi bài tập, kì thi trực tuyến, …
❖ Thiết kế hình ảnh,logo
Tạo các hình ảnh,logo cung cấp cho khách hàng khi cần thay đổi logo, trong các buổi workshop, các cuộc họp Thiết kế và chỉnh sửa các hình ảnh về sản phẩm của khách hàng, tạo các hoạt ảnh về sản phẩm của khách hàng
❖ Quay video về các sản phẩm và dịch vụ của khách hàng
Thực hiện quay video về các sản phẩm của khách hàng, hỗ trợ khách hàng quay video trãi nghiệm của người dùng, quảng cáo các sản phẩm mà khách hàng cung cấp Chỉnh sửa các video về nghiệp vụ mà khách hàng cung cấp
Kết quả hoạt động kinh doanh của công ty 3 năm gần đây Đơn vị: triệu Việt Nam đồng
4.Thuế thu nhập doanh nghiệp 112 121 193
5.Lợi nhuận sau thuế thu nhập doanh nghiệp 386 581 771
Kết quả hoạt động kinh doanh công ty Itechco
Doanh thu: qua bảng số liệu tình hình hoạt động của doanh nghiệp 3 năm gần đây ta thấy tổng doanh thu của công ty qua mỗi năm đều tăng và có xu hướng tăng mạnh Nếu năm 2020 doanh thu mới chỉ đạt 1.022 triệu đồng thì tới năm
2022 doanh thu đã đạt 1.801 triệu đồng Như vậy sau 2 năm tổng doanh thu của công ty đã tăng lên 779 triệu đồng ( 76,19%) điều đó cho thấy sự tăng trưởng nhanh chóng về doanh thu của công ty
20 Chi phí: Với thị trường kinh tế nói chung và Việt Nam nói riêng có nhiều biến động đã khiến cho chi phí của công ty dành cho các hoạt động kinh doanh cũng biến động theo Chi phí năm 20121 là 524 triệu đồng so với 2020 là 472 triệu đồng giảm 52 triệu đồng (9,92%) và so với năm 2022 với tổng chi phí là 837 triệu đồng thì tổng chi phí năm 2022 lại tăng so với năm 2021 là
Lợi nhuận: Với mức thuế suất đóng cho Nhà nước hàng năm là 25% và doanh nghiệp cũng phải chi rất nhiều cho các hoạt động kinh doanh cũng như các hoạt động khác nhưng tổng doanh thu của doanh nghiệp qua các năm vẫn tăng và tăng nhanh đã giúp doanh nghiệp thu được lợi nhuận từ hoạt động kinh doanh của mình và lợi nhuận cũng tăng dần theo năm hoạt động Năm
2020 lợi nhuận sau thuế chỉ đạt 386 triệu đồng, năm 2021 đã tăng lên 581 triệu đồng và tới năm 2023 thì lợi nhuận sau thuế của doanh nghiệp đã tăng lên 771 triệu đồng
Công ty ITECHCO được thành lập và đi vào hoạt động trong thời gian nền kinh tế Thế giới nói chung và Việt Nam nói riêng đang trong vòng xoáy suy thoái Việc quý công ty vẫn duy trì hoạt động, đóng góp vào ngân sách Nhà nước hàng năm đều cho thấy được sự thích nghi mạnh mẽ của công ty với sự biến động môi trường.
Chiến lược, định hướng của doanh nghiệp trong thời gian tới
− Tập trung vào khách hàng: Đưa khách hàng vào trung tâm của chiến lược kinh doanh bằng cách cung cấp cho họ các sản phẩm và dịch vụ đào tạo trực tuyến phù hợp với nhu cầu của họ
− Phát triển sản phẩm và dịch vụ: Đầu tư vào nghiên cứu và phát triển để tạo ra các sản phẩm và dịch vụ đào tạo trực tuyến mới, nâng cấp các tính năng và cải tiến hệ thống để tăng tính cạnh tranh
− Chiến lược giá cả: Sử dụng chiến lược giá để tạo ra sự khác biệt so với đối thủ, thu hút khách hàng và tăng doanh số bán hàng Có thể áp dụng các
21 gói dịch vụ tùy chỉnh cho các doanh nghiệp, trường học hoặc cá nhân với giá cả hợp lý
− Tăng trưởng doanh nghiệp: Tập trung vào việc mở rộng quy mô và tăng trưởng doanh nghiệp bằng cách mở rộng thị trường, đầu tư vào phát triển kinh doanh và thu hút các nhà đầu tư Ngoài ra, có thể tạo ra các sản phẩm và dịch vụ mới để mở rộng thị trường
− Chiến lược tiếp thị và quảng cáo: Sử dụng các chiến lược tiếp thị và quảng cáo để xây dựng thương hiệu, quảng bá sản phẩm và dịch vụ, tăng cơ hội tăng trưởng doanh số Có thể sử dụng quảng cáo trên các trang web đào tạo trực tuyến khác hoặc thông qua các chiến dịch trực tuyến
− Chiến lược đa dạng hóa: Đầu tư vào nhiều lĩnh vực kinh doanh khác nhau như đào tạo ngôn ngữ, phát triển kỹ năng cho doanh nghiệp để tăng tính cạnh tranh và giúp khách hàng tiếp cận các dịch vụ mới
− Chiến lược hợp tác và đối tác: Hợp tác với các đối tác để tạo ra giá trị gia tăng cho khách hàng, tăng tính cạnh tranh và mở rộng thị trường Có thể hợp tác với các doanh nghiệp, trường học, tổ chức phi chính phủ và các - Nơi hội tụ, sân chơi học hỏi và là điểm đến tin cậy cho khách hàng - Doanh thu tăng trưởng bình quân: 45% năm
− Lợi nhuận tăng trưởng bình quân: 50% năm
− Lộ trình đến năm 2025 thuộc top 10 Công ty công nghệ hàng đầu
Trở thành một trong những công ty dẫn đầu trong lĩnh vực đào tạo trực tuyến, đem lại những giá trị vượt trội cho khách hàng của mình và là một nơi cung cấp các giải pháp đào tạo chất lượng nhất cho các doanh nghiệp, tổ chức, trường học và cá nhân trên toàn thế giới.Đầu tư vào nghiên cứu và phát triển để tạo ra những sản phẩm và dịch vụ đào tạo trực tuyến tốt nhất, đáp ứng nhu cầu ngày càng cao của khách hàng và giúp họ đạt được mục tiêu của mình.Tạo ra một
22 môi trường làm việc năng động, sáng tạo và có ý thức trách nhiệm đối với cộng đồng để giúp cho công ty phát triển bền vững và thịnh vượng
Sứ mệnh của Công ty:
− Đem công nghệ thông tin đến gần hơn với mọi người
− Cung cấp dịch vụ giải pháp trực tuyến chất lượng cao với giá thành cạnh trạnh nhất
− Hỗ trợ các doanh nghiệp tạo ra được những nhân viên có đầy đủ kiến thức và nghiệp vụ nhất Định hướng phát triển của Công ty
− Mở rộng thị trường: Công ty sẽ tiếp tục mở rộng thị trường đến các quốc gia và khu vực mới, tăng cường đầu tư vào các chiến lược marketing để nâng cao nhận thức thương hiệu và thu hút khách hàng mới
− Nâng cao chất lượng sản phẩm: Công ty sẽ tiếp tục đầu tư vào nghiên cứu và phát triển để tạo ra những sản phẩm và dịch vụ đào tạo trực tuyến chất lượng cao nhất, đáp ứng nhu cầu ngày càng cao của khách hàng và giúp họ đạt được mục tiêu của mình
− Phát triển đa dạng hóa sản phẩm: Công ty sẽ tiếp tục phát triển các sản phẩm mới để đáp ứng nhu cầu đa dạng của khách hàng, bao gồm các khóa học trực tuyến, ứng dụng học tập, công cụ hỗ trợ đào tạo và dịch vụ tư vấn
− Tăng cường hợp tác đối tác: Công ty sẽ tăng cường hợp tác với các đối tác trong và ngoài nước, bao gồm các tổ chức đào tạo, doanh nghiệp và các nhà cung cấp công nghệ để đem lại lợi ích cho cả hai bên và tạo ra giá trị cho khách hàng
− Nâng cao năng lực nhân sự: Công ty sẽ tiếp tục đầu tư vào đào tạo và phát triển nhân sự, tạo điều kiện thuận lợi để nhân viên có thể nâng cao kỹ năng và đóng góp hiệu quả hơn cho công ty.
Quy trình sản xuất bài giảng cao cấp
Có 5 quy trình sản xuất bài giảng cao cấp:
Hình 3: Quy trình sản xuất bài giảng cao cấp
❖ So sánh chuẩn E-learning | Định hướng gói chuẩn E-learning
STT Chức năng SCORM xAPI
1 Theo dõi kết quả hoàn thành x x
3 Theo dõi kết quả Đậu/Rớt (1 lần) x x
4 Báo cáo kết quả ghi nhận 1 lần x x
5 Không cần hệ thống E-learning x
6 Khong cần trình duyệt Internet x
7 Dữ liệu kết quả kiểm tra chi tiết x
9 Chuyển đổi nền tảng/thiết bị x
11 Theo dõi mô phỏng nâng cao x
12 Theo dõi học ngoại tuyến (offline) x
13 Theo dõi học tập trên điện thoại x
14 Theo dõi dõi học tập trong khoảng thời gian dài x
15 Theo dõi mô hình kết hợp x
16 Báo cáo kết quả ghi nhân nhiều lần x
Bảng so sánh chuẩn E-learning | Định hướng gói chuẩn E-learning
Hình 2: Hình ảnh chức năng hệ thống
Nhiệm vụ thực tập
- Đợt thực tập này là một đợt quan trọng và cần thiết để em có cơ hội tiếp cận, học hỏi những điều mới mẻ về môi trường việc làm cũng như tiếp thu kiến thức về những công nghệ mới Chính vì vậy em đã tận dụng cơ hội
25 này để nghiên cứu, thực hành và tham gia vào dự án của công ty để trau dồi thêm kinh nghiệm của bản thân
- Dưới đây là danh sách những công việc đã được em ghi lại trong đợt thực tập này:
• Nắm flow các tính chất của các chức năng trên hệ thống, hiểu được cách tổ chức tổ cũng như là quy trình của chức năng hệ thống Tìm hiểu lý thuyết cơ bản về công nghệ blockchain
• Tìm hiểu về dự án của công ty
• Lập trình các chức năng được giao trong dự án Hoa Sen Group.
CƠ SỞ LÍ LUẬN
Khái niệm E-learning
Hiện nay, trên thế giới cho có rất nhiều quan điểm và định nghĩa về E-learning Trong phần hướng dẫn này, chúng tôi xin trích ra một số định nghĩa đặc trưng nhất:
E-learning là sử dụng các công nghệ web và Internet trong học tập (William Horton)
- Việc học tập được truyền tài hoặc hỗ trợ qua công nghệ điện tử Việc truyền tải qua nhiều kỹ thuật khác nhau như Internet, ti vi, băng video, các hệ thống giảng dạy thông minh, và việc đào tạo dựa trên máy tính
Việc truyền tải các hoạt động, quá trình và sự kiện đào tạo và học tập thông qua các phương tiện điện tử như Internet, Intranet, Extranet, CD-ROM, băng video, DVD, ti vi, các thiết bị các nhân (E-learningsite)
Tóm lại, E-learning được hiểu một cách chung nhất là quá trình học thông qua các phương tiện điện tử, quá trình học thông qua mạng Internet và các công nghệ Web Nhìn từ góc độ kỹ thuật, có thể định nghĩa "E-learning" là hình thức đào tạo có sự hỗ trợ của công nghệ điện tử, quá trình học thông qua web, qua máy tính, lớp học ảo và sự liên kết số Nội dung được phân phối đến các lớp
26 học thông qua mạng Internet, Intranet/Extranet, băng Audio và Video, vệ tỉnh quảng bá, truyền hình, CD-ROM, và các phương tiện điện tử khác
Hình 3: Hệ thống đào tạo và học tập trực tuyến
Trong mô hình này, hệ thống đào tạo bao gồm 4 thành phần, được chuyển tài đến người đọc thông qua các phương tiện truyền thông điện tử
- Nội dung: Các nội dung đào tạo, bài giảng được thể hiện thông qua các phương tiện truyền thông điện tử, đa phương tiện Ví dụ, một File hướng dẫn người học sử dụng Moodle được tạo lập bằng phần mềm Adobe, bài giảng CBT viết bằng công cụ
- Phân phối: Việc phân phối các nội dung đào tạo được thực hiện thông qua các phương tiện điện tử Ví dụ, tài liệu được gởi cho học sinh thông qua email, học sinh học trên trang web, học qua đĩa CD-ROM đa phương tiện,
- Quản lý: Quá trình học tập, đào tạo được thực hiện hoàn toàn nhờ các phương tiện truyền thông điện tử Ví dụ như việc đăng ký học được thực hiện qua
27 mạnghay bằng tin nhắn SMS; việc theo dõi tiến độ học tập, thi, kiểm tra đánh giá đều được thực hiện qua mạng Internet hay các phương tiện điện tử
- Hợp tác: Sự hợp tác, trao đổi của người học cũng được thông qua phương tiện truyền thông điện tử Ví dụ như việc trao đổi thảo luận thông qua Email, Chatting, diễn đàn trên mạng,
Với sự phát triển của Viễn thông – Công nghệ Thông tin, E-learning được hiểu một cách trực quan hơn là quá trình học thông qua mạng Internet và công nghệ web.
Lợi ích từ E-learning
E-learning được xem là phương thức đào tạo cho tương lai Về bản chất, có thể coi E-learning cũng là một hình thức đào tạo từ xa và nó có những điểm khác biệt so với đào tạo truyền thống Những đặc điểm nổi bật của E-learning so với đào tạo truyền thống là:
- Đào tạo mọi lúc mọi nơi: Truyền đạt kiến thức theo yêu cầu Học viên có thể truy cập các khóa học từ bất kỳ nơi đâu như văn phòng làm việc, tại nhà, tại những điểm Internet công cộng, 24 giờ một ngày, 7 ngày trong tuần Đào tạo bất cứ lúc nào và bất cứ ai cũng có thể trở thành học viên
- Tính linh động: Học sinh có thể lựa chọn cách học và khoá học sao cho phù hợp với mình Có thể học khoá học có sự hướng dẫn của giáo viên trực tuyến hoặc học các khoá học tự tương tác (Interactive self- Pace course) và có sự trợ giúp của thư viện trực tuyến
- Tiết kiệm chi phí: Học sinh không cần tốn nhiều thời gian và chi phí cho việc đi lại Bất cứ lúc nào muốn học đều có thể học được mà không mất thời gian phải lên lớp cả ngày mà chỉ cần ngồi ở nhà hay trên xe bus cũng được Học viên chỉ tốn chi phí cho việc đăng ký khoá học và cho Internet
Tối ưu: Bạn có thể tự đánh giá khả năng của mình hoặc một nhóm để lập ra mô hình đào tạo sao cho phù hợp nhất với nhu cầu của mình
- Đánh giá: E-Learning cho phép các học sinh tham gia các khoá học có thể theo
28 dõi quá trình và kết quả học tập của mình Ngoài ra qua những bài kiểm tra giáo viên quản lý cũngdễ dàng đánh giá mức độ tiến triển trong quá trình học của các học sinh | trong khoa học
- Sự đa dạng: Hàng trăm khóa học chuyên sâu về kỹ năng thương mại, công nghệ thông tin sẵn sàng phục vụ cho việc học.
Thành phần và cấu trúc của E-learning
a Mô hình chức năng
Mô hình chức năng có thể cung cấp một cái nhìn trực quan về các thành phần tạo nên môi trường E-learning và những đối tượng thông tin giữa chúng Học viện nghiên cứu công nghệ giáo dục từ xa (ADL Advanced Distributed Learning) đưa ra mô hình tham chiếu đối tượng nội dung chia sẻ SCORM - Sharable Content Object Reference Model) mô tả tổng quát chức năng của một hệ thống E-learning
- Hệ thống quản lý nội dung học tập (LCMS-Learning Content Managerment System): là một môi trường đa người dùng cho phép giáo viên và cơ sở đào tạo kết hợp để tạo ra, lưu trữ, sử dụng lại, quản lý và phân phối nội dung bài giảng điện tử từ một kho dữ liệu trung tâm Để cung cấp khả năng tương thích giữa các hệ thống, LCMS được thiết kế sao cho phù hợp với các tiêu chuẩn về siêu dữ liệu nội dung, đóng gói nội dung và truyền thông nội dung
Hình 4: Mô hình chức năng hệ thống quản lí
- Hệ thống quản lý học tập (LMS - Learning Managerment System): khác với LCMS chỉ tập trung vào xây dựng và phát triển nội dung, LMS như là một hệ thống dịch vụ hỗ trợ và quản lý quá trình học tập của học viên Các dịch vụ như đăng ký, giúp đỡ, kiểm tra, được tích hợp vào LMS b Mô hình hệ thống
Một cách tổng thể, một hệ thống e-learning bao gồm 3 phần chính (Hình 1.3):
- Hạ tầng truyền thông và mạng: Bao gồm các thiết bị đầu cuối (người dùng), thiết bị tại các cơ sở cung cấp dịch vụ, mạng truyền thông
- Hạ tầng phần mềm: Các phần mềm LMS, LCMS (Marcomedia, Aurthorware, Toolbook, )
- Nội dung đào tạo (hạ tầng thông tin): Phần quan trọng của E-learning là nội dung các khoá học, các chương trình đào tạo và các phần mềm dạy học
Có nhóm 3 hệ tiêu chuẩn đặc trưng cho các công nghệ E-learning là ISO/IEC JTC1 SC36, IEEE LTSC, CEN/ISSS Ngày nay, tiêu chuẩn E-learning được biết đến nhiều nhất là tiêu chuẩn SCORM được đưa ra bởi ADL
Hình 5: Mô hình hệ thống của E-learning c Hoạt động của hệ thống E-learning
Một hệ thống đào tạo có hiệu quả, chất lượng cao phải được xây dựng dựa trên các yếu tố: nhu cầu của học sinh và kết quả dự kiến của khóa học Dựa vào những yếu tổ này, có thể đưa ra một mô hình cấu trúc điển hình E-learning như sau:
Hình 7: Giảng viên
Giới thiệu về công cụ hỗ trợ thiết kế Web – XAMPP
Hình 8: Trưởng đơn vị 2.2 Giới thiệu về công cụ hỗ trợ thiết kế Web – XAMPP
2.2.1 XAMPP -phần mềm hỗ trợ Web
XAMPP là phần mềm ứng dụng được phát triển bởi Apache friends, là chương trình tạo máy chủ Web (Web servser) được tích hợp sẵn Apache, PHP, My SQL, FTP Server, Mail Server và các công cụ như phpMyadmin Không như Appserv, Xampp có chương trình quản lý khá tiện lợi, cho phép chủ động bật tắt hoặc khởi động lại các dịch vụ máy chủ bất kỳ lúc nào XAMPP là có sẵn cho Microsoft Windows, Linus, Solaris, và Mac OS X, và được sử dụng chủ yếu cho các dự án phát triển web Phần mềm này rất hữu ích trong khi bạn đang tạo các trang web động bằng cách sử dụng ngôn ngữ lập trình như PHP, JSP, Servlets, hoặc các công cụ thiết kế Web như Joomla
Hình 9: Giao diện XAMPP trên trình duyệt
32 XAMPP đòi hỏi chỉ có một tập tin zip, rar, 7z, hoặc exe được tải về và chạy XAMPP được cập nhật thường xuyên để kết hợp các phiên bản mới nhất của Apache /
My SQL / PHP và Perl Nó cũng đi kèm với một số module khác bao gồm OpenSSL và phpMyadmin
Cài đặt XAMPP tốn ít thời gian hơn so với việc cài đặt mỗi thành phần của nó một cách riêng biệt Khép kín, nhiều trường hợp của XAMPP có thể tồn tại trên một máy tính duy nhất, và bất kỳ trường hợp nào có thể được sao chép từ máy này sang máy khác
Nó được cung cấp trong cả hai phiên bản đầy đủ tiêu chuẩn, và một phiên bản nhỏ hơn
2.2.2 Các ứng dụng tích hợp trong XAMPP
+ Apache: hay là chương trình máy chủ HTTP là một chương trình dành cho máy chủ đối thoại qua giao thức HTTP Apache chạy trên các hệ điều hành tương tự như Unix, Microsoft Windows, Novell Netware và các hệ điều hành khác Apache đóng một vai trò quan trọng trong quá trình phát triển của mạng web thế giới
Khi được phát hành lần đầu, Apache là chương trình máy chủ mã nguồn mở duy nhất có khả năng cạnh tranh với chương trình máy chủ tương tự của Netscape Communications Corporation mà ngày nay được biết đến qua tên thương mại Sun Java System Web Server Từ đó trở đi, Apache đã không ngừng tiến triển và trở thành một phần mềm có sức cạnh tranh mạnh so với các chương trình máy chủ khác về mặt hiệu suất và tính năng phong phủ Từ tháng 4 năm 1996, Apache trở thành một chương trình máy chủ HTTP thông dụng nhất Hơn nữa, Apache thường được dùng để so sánh với các phần mềm khác có chức năng tương tự Tính đến tháng 1 năm 2007 thi Apache chiếm đến 60% thị trường các chương trình phân phối trang web
33 Apache được phát triển và duy trì bởi một cộng đồng mã nguồn mở dưới sự bảo trợ của Apache Software Foundation Apache được phát hành với giấy phép Apache License và là một phần mềm miễn phí
+ MySQL: là hệ quản trị CSDL mã nguồn mở phổ biến nhất thế giới và được các nhà phát triển rất ưa chuộng trong quá trình phát triển ứng dụng Vì MySQL là cơ sở dữ liệu tốc độ cao, ổn định và dễ sử dụng, có tính khá chuyển, hoạt động trên nhiều hệ điều hành cung cấp một hệ thống lớn các hàm tiện ích rất mạnh Với tốc độ và tỉnh bảo mật cao, MySQL rất thích hợp cho các ứng dụng có truy cập CSDL trên internet MySQL miễn phí hoàn toàn cho nên bạn có thể tải về MySQL từ trang chủ Nó có nhiều phiên bản cho các hệ điều hành khác nhau: phiên bản Win32 cho các hệ điều hành dòng Windows, Linux, Mac OS X, Unix, FreeBSD, NetBSD, Novell NetWare,
SGI Irix, Solaris, SunOS MySQL là một trong những ví dụ rất cơ bản về Hệ Quản trị Cơ sở dữ liệu quan hệ sử dụng Ngôn ngữ truy vấn có cấu trúc (SQL)
MySQL được sử dụng cho việc bổ trợ PHP, Perl và nhiều ngôn ngữ khác, nó làm nơi lưu trữ những thông tin trên các trang web viết bằng PHP hay Perl
Hình 10: Hai ứng dụng cần thiết chạy trên XAMPP trong suốt quá trình thiết kế trang Web
34 + PHP (Hypertext Preprocessor): là một ngôn ngữ lập trình kịch bản hay một loại mã lệnh chủ yếu được dùng để phát triển các ứng dụng viết cho máy chủ, mã nguồn mở, dùng cho mục đích tổng quát Nó rất thích hợp với Web và có thể dễ dàng nhưng vào trang HTML Do được tối ưu hóa cho các ứng dụng web, tốc độ nhanh, nhỏ gọn, cú pháp giống C và Java, dễ học và thời gian xây dựng sản phẩm tương đối ngắn hơn so với các ngôn ngữ khác nên PHP đã nhanh chóng trở thành một ngôn ngữ lập trình web phổ biến nhất thế giới,
Ngôn ngữ, các thư viện, tài liệu gốc của PHP được xây dựng bởi cộng đồng và có sự đóng góp rất lớn của Zend Inc, công ty do các nhà phát triển cốt lõi của PHP lập nên nhằm tạo ra một môi trường chuyên nghiệp để đưa PHP phát triển ở quy mô doanh nghiệp
+ Perl: (Practical Extraction and Report Language ngôn ngữ kết xuất và báo cáo thực dụng) được Larry Wall xây dựng từ năm 1987, với mục đích chính là tạo ra một ngôn ngữ lập trình có khả năng chắt lọc một lượng lớn dữ liệu và cho phép xử lí dữ liệu nhằm thu được kết quả cần tìm
Perl là ngôn ngữ thông dụng trong lĩnh vực quản trị hệ thống và xử lí các trang Web do có các ưu điểm sau:
• Có các thao tác quản lí tập tin, xử lí thông tin thuận tiện
• Thao tác với chuỗi kí tự rất tốt
• Đã có một thư viện mã lệnh lớn do cộng đồng sử dụng Perl đóng góp (CPAN)
Cú pháp lệnh của Perl khá giống với C, từ các kí hiệu đến tên các hàm, do đó, nhiều người (đã có kinh nghiệm với C) thấy Perl dễ học Perl khá linh hoạt và cho phép người sử dụng giải quyết với cùng một vấn đề được đặt ra theo nhiều cách khác nhau.
QUÁ TRÌNH THỰC TẬP LẬP TRÌNH CÁC CHỨC NĂNG ĐƯỢC GIAO TRONG DỰ ÁN TẠI DOANH NGHIỆP
Thư viện làm giống trang cũ
Hình 12: Giao diện yêu cầu của thư viện
+ Khi click vào icon cho link tới trang xem pdf
- Các chức năng đã lập trình:
+ Khi click vào icon cho link tới trang xem pdf
Hình 13: Giao diện khi click vào icon cho link tới trang xem pdf
Hình 14: Giao diện khi đã chỉnh Skeleton
Lỗi khi bấm f5 ở trang chương trình thi đua
Hình 15: Giao diện yêu cầu lỗi khi bấm f5 ở trang chương trình thi đua
- Mô tả: đây trang chương trình thi đua trong E-learning không chỉ giúp cải thiện hiệu quả học tập mà còn tạo ra một môi trường học tập thú vị và đầy thử thách cho học viên
+ Chỉnh sửa lại đường dẫn khi bấm vào chương trình thi đua
- Các chức năng đã lập trình:
+ Chỉnh sửa lại đường dẫn khi bấm vào chương trình thi đua
Hình 16: Giao diện hoạt động lại của chương trình thi đua
Chỉnh trang quá trình học tập
Hình 17: Giao diện yêu cầu của trang quá trình học tập
- Mô tả: đây trang chương trình thi đua trong E-learning không chỉ giúp cải thiện chất lượng học tập
+ Chỉnh trang quá trình học tập theo yêu cầu
- Các chức năng đã lập trình:
+ Chỉnh trang quá trình học tập theo yêu cầu
Hình 18: Giao diện quá trình học tập sau khi chỉnh sửa
Chứng chỉ ngoài
Hình 19: Giao diện yêu cầu của chứng chỉ ngoài
- Mô tả: đây là trang Chứng chỉ ngoài trong E-learning không chỉ là nơi để học viên nhận được công nhận cho thành tích của mình mà còn đóng vai trò quan trọng trong việc tạo động lực
+ Hủy bỏ trong quá trình thêm mới chứng chỉ
+ Ẩn nút lưu nếu là loại chứng chỉ TTT (Hiện tại không phải chứng chỉ TTT vẫn ẩn nút lưu)
- Các chức năng đã lập trình:
Hình 20: Giao diện thông báo xóa chứng chỉ
Hình 21: Giao diện thêm chứng chỉ
+ Hủy bỏ trong quá trình thêm mới chứng chỉ
Hình 22: Giao diện thêm chứng chỉ ngoài
42 + Ẩn nút lưu nếu là loại chứng chỉ TTT (Hiện tại không phải chứng chỉ TTT vẫn ẩn nút lưu)
Hình 23: Kết quả giao diện theo yêu cầu ẩn hiện nút “Lưu” theo từng chứng chỉ
Sửa lớp học chưa hoàn thành
Hình 24: Giao diện yêu cầu sửa danh sách chưa hoàn thành
- Mô tả: Đây là trang danh sách học viên không hoàn thành khóa học trong E- learning đóng vai trò quan trọng trong việc theo dõi, đánh giá và cải thiện chất lượng giảng dạy cũng như hỗ trợ học viên đạt được mục tiêu học tập
+ Thêm cột hình thức E-learning/ Tập trung
- Các chức năng đã lập trình:
+ Thêm cột hình thức E-learning/ Tập trung
Hình 25: Giao diện sau khi hoàn thành “Danh sách lớp học chưa hoàn thành”
HSG: Đánh dấu trong chi tiết khóa học
Hình 26: Giao diện yêu cầu “Đánh dấu trong chi tiết khóa học”
- Mô tả: Đây là thành phần "Đánh dấu" trong chi tiết khóa học E-learning không chỉ giúp học viên theo dõi và quản lý tiến độ học tập
44 + Làm nhiệm vụ theo yêu cầu
- Các chức năng đã lập trình:
+ Làm nhiệm vụ theo yêu cầu
Hình 27: Giao diện sau khi chỉnh sửa theo yêu cầu
Tổng hợp lỗi hệ thống 4
Hình 28: Giao diện yêu cầu “Tổng hợp lỗi hệ thống 4”
+ Bo góc card trong hệ thống
+ Chỉnh css tràn nội dung
45 + Chỉnh tiêu đề của các card thành thẻ Link để có cùng màu link
+ Hiển thị 2 từ cuối cùng trong tên
+ Lỗi duplicate thông báo không có dữ liệu
+ Mất màu ghi chú khóa E-learning & Offline trong lịch đào tạo
+ Chỉnh sửa thanh tìm kiếm thẳng hàng với nội dung trong thư viện
+ Nội dung dưới cuối bị mất khi mở rộng những menu con ra
+ Chỉnh khoảng cách giữa các kỳ thi
+ Chỉnh nút bị mất CSS và style màu sắc 2 card trang home chưa đồng bộ + Chỉnh nút bị mất CSS và style màu sắc 2 card trang home chưa đồng bộ + Trang thi chỉnh như hình
+ Kiểm tra và chỉnh sửa bo góc của tất cả card trong hệ thống
+ Kiểm tra responsive của card khóa học, kì thi và video sharing ở dashboard, sửa lỗi chữ rớt dòng
+ Sử dụng css chỉnh tràn nội dung, hiển thị tối đa 4 dòng
+ Chỉnh tiêu đề của các card thành thẻ Link để có cùng màu link
+ Chỉ hiển thị 2 từ cuối cùng trong tên VD: Nguyễn Đắc Tùng => Đắc Tùng + Lỗi duplicate thông báo không có dữ liệu
+ Mất màu ghi chú Kh EElearning & Offline trong lịch đào tạo
+ Chỉnh sửa thanh tìm kiếm thẳng hàng với nội dung trong thư viện
+ Nội dung dưới cuối bị mất khi mở rộng những menu con ra
- Các chức năng đã lập trình:
+ Bo góc card trong hệ thống
Hình 29: Giao diện khi chỉnh sửa bo góc trong hệ thống
Tương tự với các card trong hệ thống
Hình 30: Giao diện khi chỉnh sửa Lỗi chữ rớt dòng
+ Chỉnh css tràn nội dung
Hình 31: Giao diện khi chỉnh sửa chỉnh css tràn nội dung
+ Chỉnh tiêu đề của các card thành thẻ Link để có cùng màu link
Hình 32: Giao diện chỉnh sửa tiêu đề của các card thành thẻ Link để có cùng màu link
+ Hiển thị 2 từ cuối cùng trong tên
Hình 33: Giao diện chỉnh sửa hiển thị 2 từ cuối cùng trong tên
+ Lỗi duplicate thông báo không có dữ liệu
Hình 34: Giao diện chỉnh sửa lỗi duplicate thông báo không có dữ liệu
+ Mất màu ghi chú khóa E-learning & Offline trong lịch đào tạo
Hình 35: Giao diện chỉnh sửa Mất màu ghi chú khóa E-learning & Offline trong lịch đào tạo
+ Chỉnh sửa thanh tìm kiếm thẳng hàng với nội dung trong thư viện
Hình 36: thanh tìm kiếm thẳng hàng với nội dung trong thư viện
+ Nội dung dưới cuối bị mất khi mở rộng những menu con ra
Hình 37: Giao diện chỉnh sửa Nội dung dưới cuối bị mất khi mở rộng những menu con ra
+ Chỉnh khoảng cách giữa các kỳ thi
Hình 38: Giao diện chỉnh khoảng cách giữa các kỳ thi
+ Chỉnh nút bị mất CSS và style màu sắc 2 card trang home chưa đồng bộ
Hình 39: Giao diện chỉnh nút bị mất CSS và style màu sắc 2 card trang home chưa đồng bộ
+ Trang thi chỉnh như hình
Hình 40: Giao diện chỉnh sửa trang thi
Tổng hợp lỗi giao diện 7
Hình 41: Giao diện yêu cầu của tổng hợp lỗi giao diện 7
+ Chỉnh danh sách khảo sát theo mô tả H1
+ Chỉnh các loại sách và tài liệu trong thư viện theo mô tả H2
+ Nút tải về không hoạt động: Các loại sách và tài liệu
+ Đồng bộ thiết kế card: Kiểm tra các hover có những card thiếu icon quyển sách ở giữa
+ Không đọc PDF trên trình duyệt, tham khảo: https://projects.wojtekmaj.pl/react-pdf/
+ Clear bộ lọc khi chuyển sang thư viện khác
+ Bỏ border của các card video đào tạo
- Các chức năng đã lập trình:
+ Chỉnh danh sách khảo sát theo mô tả H1
Hình 42: Giao diện chỉnh sửa trang khảo sát
+ Nút tải về không hoạt động: Các loại sách và tài liệu
Hình 43: Giao diện chỉnh sửa nút tải không hoạt động của trang thư viện
+ Đồng bộ thiết kế card: Kiểm tra các hover có những card thiếu icon quyển sách ở giữa
Hình 44: Giao diện chỉnh sửa đồng bộ card
+ Không đọc PDF trên trình duyệt, tham khảo: https://projects.wojtekmaj.pl/react-pdf/
Hình 45: Giao diện chỉnh sửa đọc trên React-PDF
53 + Clear bộ lọc khi chuyển sang thư viện khác
Hình 46: Giao diện khi xóa một số bộ lọc không cần thiết
Danh hiệu học tập
Hình 47: Giao diện yêu cầu của “Danh hiệu học tập”
- Mô tả: trang “Danh hiệu học tập” trong E-learning dùng để công nhận và ghi nhận thành tích của học viên mà còn tạo động lực, thúc đẩy sự tham gia và tương tác, xây dựng hồ sơ học tập, và khuyến khích học tập
+ Chuyển chức năng Lịch sử huy hiệu
(resources/js/components/Reactjs/UserMedalHistory) sang thông tin học viên
+ Đổ dữ liệu cho bảng
- Các chức năng đã lập trình:
+ Chuyển chức năng Lịch sử huy hiệu
(resources/js/components/Reactjs/UserMedalHistory) sang thông tin học viên và đổ dữ liệu cho bảng
Hình 48: Giao diện chuyển và render cho “Danh hiệu học tập”
Tổng hợp lỗi giao diện 3
Hình 49: Giao diện yêu cầu của tổng hợp giao diện 3
- Mô tả: Đây là thành phần cho phép người dùng có thể thao tác nhanh hơn
55 khi muốn liên hệ, xem địa chỉ đạo tạo cũng như góp ý một cách dễ dàng hơn
+ Đóng popup khi đã chọn thay đổi ảnh đại diện
+ Đổi text “ Số lượng ” => “ Thời gian ”
+ Đổi vị trí night mode và trang quản trị
+ Đổi vị trí các nút button trong đề xuất khóa học mới
+ Skeleton cho trang khảo sát
+ Đổi text trong chương trình thi đua
+Kiếm tra trên URL và đổi text “ Đào tạo ” => “ Khóa học ”
+ Đổi text trang thông tin học viên => Chưa đổi
+ Bật / tắt night mode khi click vào text
+Đa ngôn ngữ cho night mode
+ Ẩn ngôn ngữ đang đứng, nếu hệ thống có 1 ngôn ngữ cho ẩn icon luôn => + Chưa ẩn đc ngôn ngữ đang đứng
+ Đóng modal chọn ảnh đại diện bị lỗi
+ Hiện số 0 khi không có điểm thưởng
+ Bật/tắt night mode khi click vào text
+ Đổi bộ lọc trạng thái kỳ thi
+ Ẩn ngôn ngữ đang đứng, nếu hệ thống có 1 ngôn ngữ cho ẩn icon luôn +Đổi tên học viên và email thành text => “Thông tin học viên”
+Đổi text số lượng ở card quà tặng =>“Thời gian”
+ Kiểm tra tất cả form ở học viên và chỉnh sửa button của form theo mô tả + Thêm skeleton loading cho trang khảo sát
+ Thêm đa ngôn ngữ cho night mode => Giao diện tối
+ Sửa text trong trang chi tiết chương trình thi đua như hình
+ Breadcumb khóa học sai => Kiểm tra cả khóa học online, offline và khóa học của tôi
- Các chức năng đã lập trình:
+ Đóng popup khi đã chọn thay đổi ảnh đại diện
Hình 50: Giao diện chỉnh sửa chức năng đóng popup
+ Đổi text “ Số lượng ” => “ Thời gian ”
Hình 51: Giao diện Đổi text “ Số lượng ” => “ Thời gian ”
+ Đổi vị trí night mode và trang quản trị
Hình 52: Giao diện đổi vị trí night mode và trang quản trị
+ Đổi vị trí các nút button trong đề xuất khóa học mới
Hình 53: Giao diện sau khi đổi vị trí các nút button trong đề xuất khóa học mới
+ Skeleton cho trang khảo sát
Hình 54: Giao diện loading trang khảo sát
58 + Đổi text trong chương trình thi đua
Hình 55: Giao diện sau khi đổi text trong chương trình thi đua
+Kiếm tra trên URL và đổi text “ Đào tạo ” => “ Khóa học ”
Hình 56: Giao diện sau khi kiểm tra Breadcrum
Hình 57: Giao diện sau khi đổi hình ảnh giao diện khi rỗng
Tương tự với tất cả trong hệ thống
+ Đổi text trang thông tin học viên
Hình 58: Giao diện sau khi đổi text trang thông tin học viên
+ Bật / tắt night mode khi click vào text
Hình 59: Giao diện sau khi chỉnh sửa bật / tắt night mode khi click vào text
+Đa ngôn ngữ cho night mode và Ẩn ngôn ngữ đang đứng, nếu hệ thống có
1 ngôn ngữ cho ẩn icon luôn
Hình 60: Kết quả giao diện đa ngôn ngữ theo yêu cầu
60 3.11 FE – Đề xuất khóa học: khi nhấn lưu thì disable và hiển thị xoay để user biết hệ thống đang thực hiện
+ Đề xuất khóa học: khi nhấn lưu thì disable và hiển thị xoay để user biết hệ thống đang thực hiện
- Các chức năng đã lập trình:
+ Đề xuất khóa học: khi nhấn lưu thì disable và hiển thị xoay để user biết hệ thống đang thực hiện
Hình 61: Giao diện sau khi thêm yêu cầu của đề xuất khóa học
Thay đổi trang 404 của react thành trang khác UI khác đẹp hơn đáp ứng được cả night mode
Hình 62: Giao diện yêu cầu của trang 404
- Mô tả: duy trì trải nghiệm người dùng khi họ truy cập vào các đường dẫn không tồn tại trên trang web của bạn
- Các thành phần: button dẫn đến trang chủ
+ Thay trang báo lỗi 404 của react thành trang khác UI đẹp hơn
- Các chức năng đã lập trình:
+ Thay trang báo lỗi 404 của react thành trang khác UI đẹp hơn
Hình 63: Giao diện trang 404 sau khi thay đổi
Tổng hợp lỗi giao diện 2
Hình 64: Giao diện yêu cầu của tổng hợp lỗi giao diện 2
- Mô tả: Chỉnh sửa cho những lỗi trong hệ thống cho dự án này
+ Thêm ảnh viền vào top 10 học viên điểm cao nhất như mô tả trên H1 + Thay đổi component Empty hợp lệ cho tất cả chức năng ở học viên kèm text mô tả tương ứng (Tương tự H2)
+ Đổi text ‘Video sharing’ và ‘Học liệu đào tạo video’ ở giao diện học viên thành ‘Video đào tạo’
+ Kiểm tra & sửa tất cả link bị sai trong dashboard học viên
+ Chỉnh sửa nút xem file đính kèm trong chứng chỉ bên ngoài
+ Phục hồi css trong bài khảo sát (như khảo sát trên uat)
+ Chuyển button bộ lọc khóa học sang bên trái
+ Copy link video sharing chưa đúng
+ Đổi component và đổi text phù hợp
+ Đổi text thành “ Video đào tạo ”
+ Sửa icon có hover bàn tay
+ Các link bị sai ở dashboard học viên
+ Copy link video đào tạo
+ Bỏ lọc theo ngày bắt đầu và ngày kết thúc trong khảo sát
- Các chức năng đã lập trình:
+ Thêm ảnh viền vào top 10 học viên điểm cao nhất như mô tả trên H1
Hình 65: Giao diện sau khi thêm ảnh viền vào top 10 học viên điểm cao nhất như mô tả trên H1
+ Thay đổi component Empty hợp lệ cho tất cả chức năng ở học viên kèm text mô tả tương ứng (Tương tự H2)
Hình 66: Giao diện của những trang đã thay đổi Empty
Tương tự với các Empty trong hệ thống
+ Đổi text ‘Video sharing’ và ‘Học liệu đào tạo video’ ở giao diện học viên thành ‘Video đào tạo’
Hình 67: Giao diện sau khi đổi text
64 + Kiểm tra & sửa tất cả link bị sai trong dashboard học viên
Hình 68: Giao diện của những chức năng đã chỉnh sửa những link bị sai của dashboard học viên
+ Chỉnh sửa nút xem file đính kèm trong chứng chỉ bên ngoài
Hình 69: Giao diện thông tin bảng “Chứng chỉ ngoài”
Nếu là loại chứng chỉ TTT thì ân nút “Lưu” còn nếu loại chứng chỉ rỗng không phải là “TTT” thì hiển thị nút lưu khi nhấp vào tên chứng chỉ
65 Trường hợp không phải là loại chứng chỉ TTT
Hình 70: Giao diện của trường hợp không phải là loại chứng chỉ TTT
Trường hợp là loại chứng chỉ TTT
Hình 71: Giao diện của trường hợp không phải là loại chứng chỉ TTT
Lịch sử chương trình thi đua
Hình 72: Giao diện yêu cầu của “Lịch sử chương trình thi đua”
- Mô tả: Lịch sử huy hiệu cho học viên là một bảng hoặc danh sách ghi lại các huy hiệu mà học viên đã nhận được trong quá trình học tập của họ
+ Thêm link lịch sử huy hiệu
+ Tạo giao diện lịch sử huy hiệu theo yêu cầu
- Các chức năng đã lập trình:
+ Giao diện lịch sử huy hiệu
Hình 73: Giao diện thêm bảng lịch sử huy hiệu
Menu Bottom trang học viên
Hình 74: Giao diện yêu cầu của Menu Bottom trang học viên
- Mô tả: Đây là thành phần cho phép người dùng có thể thao tác nhanh hơn khi muốn liên hệ, xem địa chỉ đạo tạo cũng như góp ý một cách dễ dàng hơn
- Các thành phần: Mục liên hệ, mục địa điểm đào tạo, mục góp ý
+ Thêm link trang góp ý, địa điểm đào tạo, liên hệ
+ Chuyển trang Contact.js cũ thành cấu trúc thư mục mới
+ Chuyển các component trong Googlemap cũ thành cấu trúc mới
+ Thêm link trang cho các thư mục trên vào menu bottom
- Các chức năng đã lập trình:
Hình 75: Giao diện của thành phần “Liên hệ”
68 Mục "Liên hệ" trong trang học viên của một hệ thống E-learning thường có các chức năng
• Hỗ trợ và Giải đáp Thắc mắc: Cung cấp thông tin liên hệ để học viên có thể đặt câu hỏi hoặc nhờ hỗ trợ về các vấn đề kỹ thuật, học tập, hoặc các vấn đề khác liên quan đến khóa học
• Phản hồi và Góp ý: Học viên có thể gửi phản hồi về trải nghiệm học tập, chất lượng khóa học, hoặc góp ý để cải thiện hệ thống
• Hỗ trợ Kỹ thuật: Đưa ra thông tin liên hệ với bộ phận hỗ trợ kỹ thuật để giải quyết các vấn đề kỹ thuật như lỗi đăng nhập, vấn đề truy cập nội dung, hoặc các lỗi phần mềm
Giúp đảm bảo rằng học viên có thể nhận được sự hỗ trợ cần thiết trong quá trình học tập và sử dụng hệ thống E-learning
+ Mục Địa điểm đào tạo
Hình 76: Giao diện “Địa điểm đào tạo”
Mục “Địa điểm đào tạo” trong trang học viên của hệ thống E-learning thường có các chức năng sau:
1 Cung cấp thông tin về địa điểm đào tạo: Hiển thị các địa chỉ nơi diễn ra các khóa học trực tiếp hoặc các trung tâm đào tạo của hệ thống E-learning
2 Hướng dẫn di chuyển: Cung cấp hướng dẫn chi tiết về cách di chuyển đến các địa điểm đào tạo, bao gồm các phương tiện giao thông công cộng, bãi đỗ xe, và các hướng đi
3 Lịch học và sự kiện: Hiển thị lịch trình các buổi học, hội thảo, hoặc các sự kiện liên quan đến đào tạo được tổ chức tại địa điểm đó
Giúp học viên có cái nhìn tổng quan và chi tiết hơn về nơi họ sẽ học, giúp họ chuẩn bị tốt hơn trước khi đến học trực tiếp
Hình 77: Giao diện “Góp ý”
Mục góp ý trong trang học viên của hệ thống E-learning được sử dụng để thu thập phản hồi từ người học về chất lượng khóa học, nội dung giảng dạy, hiệu quả của phương pháp giảng dạy và các yếu tố khác liên quan đến trải nghiệm học tập của họ
1, Cải thiện chất lượng khóa học: Phản hồi từ học viên giúp các nhà phát triển khóa học và giảng viên nhận ra những điểm mạnh và điểm yếu của khóa học, từ đó cải thiện nội dung và phương pháp giảng dạy
2, Nâng cao trải nghiệm học tập: Góp ý từ học viên giúp nhà quản lý E- learning nhận diện những vấn đề kỹ thuật hoặc khó khăn mà học viên gặp phải, từ đó tối ưu hóa trải nghiệm học tập trên hệ thống
3, Đánh giá giảng viên: Phản hồi về giảng viên giúp họ hiểu rõ hơn về hiệu quả giảng dạy của mình và có những điều chỉnh phù hợp để nâng cao chất lượng giảng dạy
4, Xây dựng môi trường học tập tốt hơn: Nhận diện các yếu tố cần cải thiện trong môi trường học tập, chẳng hạn như giao diện người dùng, tài liệu học tập, hoạt động tương tác, và các công cụ hỗ trợ học tập
Đảm bảo rằng phản hồi của bạn được trình bày một cách cụ thể và xây dựng để giúp nhà quản lý hệ thống có thể hiểu rõ và thực hiện các cải tiến cần thiết.
Tổng hợp lỗi giao diện
Hình 78: Giao diện yêu cầu của tổng hợp lỗi giao diện
+ Chưa xem được PDF ở trang: Tài liệu, sách điện tử
+ Lỗi hình không cùng style
+ Click vào icon xem trực tiếp lỗi
+ Chiều cao cho ngắn lại hơi dài
+ Thay đổi số lượng card trên một dòng: Sách điện tử, tài liệu & sách nói
71 + Các button đánh giá chưa đồng bộ
+ Chỉnh sửa tiêu đề theo yêu cầu trên hình
+ Thêm border cho Card giống Khóa học
+ Thay đổi tất cả loading của thư viện thành skeleton hợp lệ (Chưa đạt) + Ẩn nền xám vào border
+ Ẩn tất cả input tìm kiếm tác giả và nút xóa tìm kiếm trong thư viện + Thay thế các button sử dụng css thành Button của Antd
+ Kích thước Card chưa hợp lệ (Test nhiều kích thước hình ảnh khác nhau)
- Các chức năng đã lập trình:
+ Chưa xem được PDF ở trang: Tài liệu, sách điện tử khi nhấn vào nút “Xem” như hình dưới:
Hình 79: Giao diện sách trong thư viện
72 Thì PDF của React-PDF sẽ được hiển thị như hình sau :
Hình 80: Giao diện khi click chuột vào xem
+ Lỗi hình không cùng style
Hình 81: Task yêu cầu chưa cùng kích thước đối với thẻ
Hình 82: Giao diện của tất cả kích thước các thẻ đều như nhau sau khi chỉnh sửa
+ Chiều cao cho ngắn lại hơi dài
Hình 83: Task yêu cầu lỗi kích thước thẻ quá dài
Hình 84: Hình ảnh giao diện sau khi sửa lỗi kích thước của thẻ
+ Thay đổi số lượng card trên một dòng: Sách điện tử, tài liệu & sách nói
Hình 85: Giao diện sau khi thay đổi số lượng card trong một dòng
+ Các button đánh giá chưa đồng bộ
Hình 86: Giao diện button hình ảnh khi đã chỉnh sửa
Nét đứt cho nút “hủy” loại dash, loại primary cho nút “lưu” cho toàn hệ thống
+ Thêm border cho Card giống Khóa học
Hình 87: Giao diện sau khi chỉnh sửa thêm border cho Card giống Khóa học
75 + Ẩn tất cả input tìm kiếm tác giả và nút xóa tìm kiếm trong thư viện
Hình 88: Hình ảnh theo yêu cầu của task
Hình 89: Giao diện kết quả sau khi ẩn
Khóa học đề xuất
Hình 90: Giao diện của task “Khóa học đề xuất”
- Mô tả: nhằm mục đích cung cấp kiến thức và kỹ năng cần thiết trong lĩnh vực học tập, giúp họ nâng cao năng lực và giá trị bản thân
+ Các nút và trạng thái bị lỗi hiển thị
+ Không gửi, xóa được đề xuất khóa học (Nút Gửi & Nút Xóa không hoạt động)
- Các chức năng đã lập trình:
+ Các nút và trạng thái bị lỗi hiển thị
Hình 91: Giao diện thông báo cho nút xóa
Hình 92: Giao diện thông báo cho nút gửi
Yêu cầu hỗ trợ
Hình 93: Giao diện yêu cầu của task “Yêu cầu hỗ trợ”
- Mô tả: Đây là thành phần trong E-learning không chỉ giúp học viên nhận được sự trợ giúp kịp thời và nâng cao trải nghiệm học tập mà còn hỗ trợ nhà cung cấp khóa học trong việc cải thiện chất lượng giảng dạy và tạo ra một môi trường học tập tích cực, hỗ trợ lẫn nhau
+ Hiện thị thông tin người nhận ra ngoài
- Các chức năng đã lập trình:
+ Hiện thị thông tin người nhận ra ngoài
Hình 94: Giao diện sau khi sửa hiển thị thông tin của người nhận
Tổng hợp lỗi giao diện 9
Hình 95: Giao diện của task “Tổng hợp lỗi giao diện 9”
+ Sửa card khóa học như thiết kế, tất cả trang có card khóa học + Lỗi rớt chữ ở trang tin tức
+ Chỉnh sửa khảo sát giống hình mô tả
+ Chỉnh theo màu hệ thống
+ Chỉnh sửa chiều vừa với nội dung tin tức
+ Chỉnh tiêu đề các card video sharing giống khóa học
+ Chỉnh sửa chiều cao nội dung Chương trình thi đua
+ Bỏ margin vị trí trong hình ở các card kì thi
- Các chức năng đã lập trình:
+ Sửa card khóa học như thiết kế, tất cả trang có card khóa học
Hình 96: Giao diện sau khi chỉnh sửa card khóa học như thiết kế
+ Lỗi rớt chữ ở trang tin tức
Hình 97: Giao diện sau khi chỉnh sửa lỗi rớt chữ ở trang tin tức
+ Chỉnh sửa khảo sát giống hình mô tả
Hình 98: Giao diện sau khi chỉnh sửa khảo sát theo mô tả
Hình 99: Giao diện sau khi chỉnh sửa skeleton khóa học
+ Chỉnh theo màu hệ thống
Hình 100: Giao diện sau khi chỉnh sửa theo màu hệ thống
+ Chỉnh sửa chiều vừa với nội dung tin tức
Hình 101: Giao diện sau khi chỉnh sửa vừa với nội dung tin tức
+ Chỉnh tiêu đề các card video sharing giống khóa học
Hình 102: Giao diện sau khi chỉnh sửa tiêu đề các card video sharing giống khóa học
+ Chỉnh sửa chiều cao nội dung Chương trình thi đua
Hình 103: Giao diện sau khi chỉnh sửa chiều cao của thẻ Content nội dung
Chương trình thi đua
+ Bỏ margin vị trí trong hình ở các card kì thi
Hình 104: Giao diện sau bỏ margin vị trí trong hình ở các card kì thi
Tổng hợp lỗi web 10
Hình 105: Giao diện yêu cầu của task “Tổng hợp lỗi web 10”
+ Ảnh sai kích thước (Tỉ lệ: 350*500)
+ Thực hiện như mô tả H3
- Các chức năng đã lập trình:
Hình 106: Giao diện diện sau khi chỉnh sửa theo yêu cầu style của hệ thống
+ Ảnh sai kích thước (Tỉ lệ: 350*500)
Hình 107: Giao diện sau khi chỉnh sửa kích thước sách theo tỉ lệ yêu cầu
+ Thực hiện như mô tả H3
Hình 108: Giao diện sau khi chỉnh sửa theo thiết kế của ant design
Hình 109: Giao diện chỉnh sửa đồng bộ icon menu