1. Trang chủ
  2. » Luận Văn - Báo Cáo

WEBSITE THI TOÁN ONLINE SỬ DỤNG THƯ VIỆN REACTJS

66 2 0

Đang tải... (xem toàn văn)

Tài liệu hạn chế xem trước, để xem đầy đủ mời bạn chọn Tải xuống

THÔNG TIN TÀI LIỆU

Thông tin cơ bản

Tiêu đề Website Thi Toán Online Sử Dụng Thư Viện ReactJS
Tác giả Nguyễn Trường Hiếu
Người hướng dẫn Đoàn Duy Bình
Trường học Trường Đại Học Sư Phạm Khoa Tin Học
Chuyên ngành Công Nghệ Thông Tin
Thể loại Báo Cáo Đồ Án Chuyên Ngành
Năm xuất bản 2021
Thành phố Đà Nẵng
Định dạng
Số trang 66
Dung lượng 2,74 MB

Các công cụ chuyển đổi và chỉnh sửa cho tài liệu này

Cấu trúc

  • 1. Lí do chọn đề tài (10)
  • 2. Mục tiêu nghiên cứu (10)
  • 3. Đối tượng và phạm vi nghiên cứu (10)
  • 4. Phương pháp nghiên cứu (11)
  • 5. Bố cục đề tài (11)
  • 6. Nội dung và tiến độ thực tập (12)
  • CHƯƠNG I: CƠ SỞ LÝ THUYẾT (14)
    • 1.1 Kỹ thuật tương tác người dùng( Front-End) (14)
      • 1.1.1 HTML và HTML5 (14)
      • 1.1.2 CSS và Bootstrap (18)
      • 1.1.3 JavaScript (20)
      • 1.1.4 Thư viện Reactjs (22)
    • 1.2 Cơ sở dữ liệu NoSQL (25)
      • 1.2.1 Tổng quan về NoSQL (25)
      • 1.2.2 Một số khái niệm về Firebase (25)
      • 1.2.3 Làm việc Firebase Realtime Database (26)
      • 1.2.4 Thực hiện các thao tác CRUD (27)
      • 1.2.5 Tính bảo mật và quy định (30)
  • CHƯƠNG II: PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG (32)
    • 2.1 Giới thiệu bài toán (32)
    • 2.2 Khảo sát (32)
    • 2.3 Phân tích và thiết kế hệ thống (33)
      • 2.3.1 Hoạt động của web thi online (33)
    • 2.4 Sơ đồ chức năng (34)
      • 2.4.1 Ca sử dụng tổng quát của Admin (34)
      • 2.4.2 Ca sử dụng tổng quát của thành viên (35)
      • 2.4.3 Sơ đồ hoạt động của hệ thống (36)
    • 2.5 Danh sách các Actor và UseCase (36)
      • 2.5.1 Danh sách các UseCase Admin (37)
      • 2.5.2 Danh sách các UseCase Thành viên (38)
    • 2.6 Đặc tả UseCase Admin (38)
      • 2.6.1 Đặc tả UseCase đăng nhập (38)
      • 2.6.2 Đặc tả UseCase đăng xuất (39)
      • 2.6.3 Đặc tả UseCase quản lý Thành viên (40)
      • 2.6.4 Đặc tả UseCase quản lý khóa học (41)
      • 2.6.5 Đặc tả UseCase quản lý chủ đề (41)
      • 2.6.6 Đặc tả UseCase quản lý Chuyên đề (42)
      • 2.6.7 Đặc tả UseCase quản lý câu hỏi (43)
      • 2.6.8 Đặc tả UseCase quản lý tin tức (44)
    • 2.7 Đặc tả UseCase Thành viên (44)
      • 2.7.1 Đặc tả UseCase đăng ký (44)
      • 2.7.2 Đặc tả UseCase đăng nhập (45)
      • 2.7.3 Đặc tả UseCase chỉnh sửa thông tin cá nhân (46)
      • 2.7.4 Đặc tả UseCase xem điểm thi (47)
      • 2.7.5 Đặc tả UseCase chọn chuyên đề (47)
      • 2.7.6 Đặc tả UseCase vào thi (48)
      • 2.7.7 Đặc tả UseCase liên hệ (48)
    • 2.8 Thiết kế cơ sở dữ liệu (49)
      • 2.8.1 Sơ đồ dữ liệu (49)
      • 2.8.2 Cấu trúc bảng (49)
  • CHƯƠNG III: (53)
    • 3.1. Môi trường triển khai (53)
    • 3.2. Kết quả chương trình (53)
      • 3.2.1 Giao diện trang chủ (53)
      • 3.2.2 Giao diện trang giới thiệu (56)
      • 3.2.3 Giao diện đăng nhập (57)
      • 3.2.4 Giao diện đăng ký (58)
      • 3.2.5 Giao diện trang khóa học (59)
      • 3.2.6 Giao diện trang chi tiết khóa học (60)
      • 3.2.7 Giao diện trang thi (61)
      • 3.2.8 Giao diện trang cẩm nang (62)
      • 3.2.9 Giao diện trang liên hệ (63)
    • 1. Kết quả đạt được (64)
    • 2. Hạn chế của đề tài (64)
    • 3. Hướng phát triển (65)
  • TÀI LIỆU THAM KHẢO (66)

Nội dung

LỜI MỞ ĐẦU 1.Lí do chọn đề tài Ngày nay, ứng dụng công nghệ thông tin và việc tin học hóa được xem là một trong những yếu tố mang tính quyết định trong hoạt động của chính phủ, tổ chức, cũng như của các công ty, nó đóng vai trò hết sức quan trọng, có thể tạo ra những bước đột phá mạnh mẽ. Ứng dụng của công nghệ thông tin cũng rất rộng lớn, thâm nhập vào mọi lĩnh vực trong xã hội với mọi phương thức hoạt động hoàn toàn mới mẻ, sáng tạo mà không mất đi tính chính xác. Bằng internet, chúng ta đã thực hiện được nhiều công việc với tốc độ nhanh hơn và chi phí thấp hơn nhiều so với cách thức truyền thống. Ở nước ta hiện nay ứng dụng tin học trong các hoạt động quản lý chiếm phần lớn trong các sản phẩm phần mềm. Một số phàn mềm về quản lý như: quản lý vật tư, quản lý thư viện, quản lý tài chính, quản lý nhân sự, quản lý doanh nghiệp,… đang được sử dụng rộng rãi và rất có hiệu quả. Tuy nhiên các phần mềm hỗ trợ cho công tác giáo dục, học tập vẫn còn chưa nhiều. Với thời buổi dịch bệnh đang là một trong những vấn đề nóng của xã hội thì nhu cầu học tập và thi cử trực tuyến đang được quan tâm. Nhiều cơ sở giáo dục cũng đã và đang thực hiện việc kiểm tra năng lực bằng hình thức thi online những cũng gặp nhiều bất cập và khó khăn Dựa vào tình hình thực tế đó, em xin đề xuất và thực hiện đồ án “ Xây dựng website thi Toán online cho học sinh tiểu học” để phục vụ cho việc học tập cũng như thi cử hiện nay. 2.Mục tiêu nghiên cứu Mục tiêu: Xây dựng một website thi Toán online trực tuyến, hỗ trợ cho việc ôn tập kiến thức cũng như thi cử. Website phải xây dựng được các chức năng chính như quản lý được thành viên, thông tin các chủ đề, và các câu hỏi của bộ môn Toán. Nhiệm vụ: Để đạt được mục tiêu trên thì nhiệm vụ đặt ra của đề tài là: +Thu thập dữ liệu từ thực tế, tổng hợp phân tích dữ liệu. +Nghiên cứu các công nghệ và phần mềm cần thiết để xây dựng và phát triển website thi online. +Xây dựng các chức năng hỗ trợ người dung sử dụng một cách hiệu quả nhất. 3.Đối tượng và phạm vi nghiên cứu Đối tượng nghiên cứu gồm: Website xây dựng bằng REACTJS, HTML5, CSS3, JQUERY, JAVASCRIPT, BOOTSTRAP. Hệ quản trị cơ sở dữ liệu NoSQL(Firebase) Phạm vi nghiên cứu gồm: Nghiên cứu dữ liệu thông tin cần thiết như dữ liệu bộ câu hỏi, các chức năng của trang web. Tìm hiểu khái quát về ReactJS. 4.Phương pháp nghiên cứu 4.1Phương pháp nghiên cứu lý thuyết: +Tiến hành thu thập và nghiên cứu các tài liệu có liên quan đến đề tài. +Nghiên cứu công cụ đồ họa như Photoshop. +Nghiên cứu về ReactJS. +Nghiên cứu về Firebase. +Nghiên cứu html, css, javascript. +Phương pháp quan sát: trức tiếp quan sát, sử dụng thử một vài trang web thi Online, để phân tích ưu nhược điểm, các quy trình cơ bản với web thi Online +Phương pháp thu thập tài liệu: thông qua quá trình thu thập tài liệu từ các nguồn như mạng Internet, tổng hợp các tài liệu, nghiên cứu tài liệu, ngôn ngữ và công cụ liên quan. 4.2Phương pháp nghiên cứu thực nghiệm: +Phân tích yêu cầu thực tế và xây dựng các bước phân tích hệ thống để hỗ trợ lập trình, xây dựng ứng dụng. Đánh giá kết quả đạt được, triển khai, bảo trì. 5.Bố cục đề tài Ngoài phần mở đầu và kết luận, bố cục của đề tài bao gồm ba chương: Chương 1: Cơ sở lý thuyết Phần này trình bày về những kỹ thuật sẽ sử dụng để xây dựng và phát triển ứng dụng. Chương 2: Phân tích thiết kế hệ thống Phần này trình bày về việc phân tích thiết kế hệ thống và phân tích cơ sở dữ liệu. Chương 3: Xây dựng ứng dụng website Phần này trình bày những kết quả đạt được khi xây dựng chương trình. Đây là một đề tài tôi áp dụng những công nghệ học được trong quá trình thực tập nên trong lúc nghiên cứu có thể có nhiều sai sót. Tôi mong nhận được sự đóng góp của quý thầy cô và anh chị. 6.Nội dung và tiến độ thực tập 6.1 Nội dung thực tập •Tìm hiểu đơn vị thực tập •Làm quen với môi trường thực tập tại Công ty TNHH giải pháp công nghệ HIFIVEPLUS tại Đà Nẵng •Tìm hiểu khảo sát các ứng dụng REACTJS và Sql Server, áp dụng các khảo sát và ứng dụng vào đề tài. •Học tập các kiến thức nền tảng tại công ty để củng cố và phát huy kiến thức công nghệ để xây dựng dự án từ đó rèn luyện kỹ năng lập trình •Tiếp thu kiến thức, học hỏi kinh nghiệm từ các anh chị hỗ trợ về mặt công nghệ cũng như giao tiếp với mọi người trong công ty. •Tìm hiểu công cụ, ngôn ngữ lập trình và các công nghệ khác để áp dụng vào đồ án báo cáo thực tập. •Qua quá trình thực hiện đồ án rút ra được kinh nghiệm giải quyết vấn đề logic cũng như các vấn đề ngoại lệ từ các anh chị trong công ty •Tiếp thu những phản hồi từ GVHD và các anh chị hỗ trợ để hoàn thiện ứng dụng phù hợp với xu thế phát triển hiện nay. •Tích cực tìm kiếm và sử dụng các phương pháp nghiên cứu khác từ nhiều nguồn nhiều phương thức khác nhau để xây dựng ứng dụng.

Mục tiêu nghiên cứu

Mục tiêu của dự án là phát triển một website thi Toán online, nhằm hỗ trợ người dùng ôn tập kiến thức và chuẩn bị cho các kỳ thi Website cần tích hợp các chức năng quan trọng như quản lý thành viên, cung cấp thông tin về các chủ đề Toán học, và hệ thống câu hỏi đa dạng cho người học.

- Nhiệm vụ: Để đạt được mục tiêu trên thì nhiệm vụ đặt ra của đề tài là:

+ Thu thập dữ liệu từ thực tế, tổng hợp phân tích dữ liệu

+ Nghiên cứu các công nghệ và phần mềm cần thiết để xây dựng và phát triển website thi online

+ Xây dựng các chức năng hỗ trợ người dung sử dụng một cách hiệu quả nhất.

Phương pháp nghiên cứu

4.1 Phương pháp nghiên cứu lý thuyết:

+ Tiến hành thu thập và nghiên cứu các tài liệu có liên quan đến đề tài

+ Nghiên cứu công cụ đồ họa như Photoshop

+ Nghiên cứu html, css, javascript

Phương pháp quan sát bao gồm việc trực tiếp theo dõi và sử dụng thử một số trang web thi Online Qua đó, chúng ta có thể phân tích các ưu nhược điểm cũng như các quy trình cơ bản liên quan đến việc thi Online.

Phương pháp thu thập tài liệu bao gồm việc khai thác thông tin từ nhiều nguồn khác nhau, đặc biệt là từ Internet Quá trình này liên quan đến việc tổng hợp và nghiên cứu các tài liệu, ngôn ngữ, cũng như các công cụ liên quan để đảm bảo tính chính xác và đầy đủ của thông tin.

4.2 Phương pháp nghiên cứu thực nghiệm:

Phân tích yêu cầu thực tế là bước quan trọng trong việc xây dựng hệ thống hỗ trợ lập trình và phát triển ứng dụng Các bước phân tích hệ thống cần được thực hiện một cách có hệ thống để đảm bảo tính hiệu quả Đánh giá kết quả đạt được sau khi triển khai là cần thiết để xác định mức độ thành công và thực hiện bảo trì kịp thời.

Bố cục đề tài

Ngoài phần mở đầu và kết luận, bố cục của đề tài bao gồm ba chương:

- Chương 1: Cơ sở lý thuyết

Phần này trình bày về những kỹ thuật sẽ sử dụng để xây dựng và phát triển ứng dụng

- Chương 2: Phân tích thiết kế hệ thống

Phần này trình bày về việc phân tích thiết kế hệ thống và phân tích cơ sở dữ liệu Chương 3: Xây dựng ứng dụng website

Trong phần này, tôi sẽ trình bày những kết quả đạt được từ việc xây dựng chương trình, áp dụng các công nghệ đã học trong quá trình thực tập Tôi nhận thức rằng có thể có nhiều sai sót trong nghiên cứu này và rất mong nhận được sự đóng góp ý kiến từ quý thầy cô và anh chị.

Nội dung và tiến độ thực tập

• Tìm hiểu đơn vị thực tập

• Làm quen với môi trường thực tập tại Công ty TNHH giải pháp công nghệ HIFIVEPLUS tại Đà Nẵng

• Tìm hiểu khảo sát các ứng dụng REACTJS và Sql Server, áp dụng các khảo sát và ứng dụng vào đề tài

Học tập kiến thức nền tảng tại công ty giúp củng cố và phát huy hiểu biết về công nghệ, từ đó xây dựng dự án và rèn luyện kỹ năng lập trình hiệu quả.

• Tiếp thu kiến thức, học hỏi kinh nghiệm từ các anh chị hỗ trợ về mặt công nghệ cũng như giao tiếp với mọi người trong công ty

• Tìm hiểu công cụ, ngôn ngữ lập trình và các công nghệ khác để áp dụng vào đồ án báo cáo thực tập

Trong quá trình thực hiện đồ án, tôi đã rút ra được nhiều kinh nghiệm quý báu trong việc giải quyết các vấn đề logic cũng như các tình huống ngoại lệ, nhờ vào sự hỗ trợ và hướng dẫn từ các anh chị trong công ty.

• Tiếp thu những phản hồi từ GVHD và các anh chị hỗ trợ để hoàn thiện ứng dụng phù hợp với xu thế phát triển hiện nay

• Tích cực tìm kiếm và sử dụng các phương pháp nghiên cứu khác từ nhiều nguồn nhiều phương thức khác nhau để xây dựng ứng dụng

STT Thời gian Kết quả dự kiến

Nhận công việc, viết Đề cương, lập kế hoạch, chuẩn bị các yêu cầu để thực hiện công việc

Từ ngày 10/01/2021 đến ngày 17/01/2021 Đề cương chi tiết

Phân tích và tổng hợp được các dữ liệu cần thiết

Hiểu cơ bản về Firebase

Hiểu cơ bản về lý thuyết ReactJS

Từ ngày 17/02/2021 đến ngày 21/02/2021 Đưa ra các yêu cầu chức năng cụ thể của hệ thống

Từ ngày 22/02/2021 đến ngày 28/02/2021 Đưa ra các yêu cầu chức năng cụ thể của hệ thống

Phân tích thiết kế và xây dựng các biểu đồ chức năng, hoạt động của trang web

Xây dựng được trang web với các tính năng đã phát triển

Luận văn và phần mềm cài đặt hoàn chỉnh Hoàn thành báo cáo và slide báo cáo.

CƠ SỞ LÝ THUYẾT

Kỹ thuật tương tác người dùng( Front-End)

Là thuật ngữ chỉ các giai đoạn bắt đầu của một quá trình xử lý Khái niệm này thường sử dụng trong lĩnh vực phát triển phần mềm

Trong thiết kế phần mềm, phần front-end đóng vai trò quan trọng trong việc tương tác trực tiếp với người dùng thông qua các giao diện người dùng (GUI).

HTML, viết tắt của HyperText Markup Language, là ngôn ngữ đánh dấu dùng để tạo ra các trang web trên World Wide Web Cùng với CSS và JavaScript, HTML hình thành bộ ba nền tảng kỹ thuật cho Internet Được định nghĩa như một ứng dụng đơn giản của SGML, HTML phục vụ cho các tổ chức có yêu cầu xuất bản phức tạp HTML đã trở thành tiêu chuẩn Internet do W3C duy trì, với phiên bản chính thức mới nhất là HTML 4.01 (1999), sau đó được thay thế bởi XHTML Hiện tại, HTML đang tiếp tục phát triển với phiên bản HTML5.

HTML5 là ngôn ngữ cấu trúc và trình bày nội dung cho World Wide Web Consortium (W3C), được đề xuất bởi Opera Software và sẽ là công nghệ cốt lõi của Internet trong tương lai gần Phiên bản thứ năm của HTML, ra đời năm 1990 và chuẩn hóa thành HTML4 vào năm 1997, đã xuất hiện vào tháng 12 năm 2012 như một ứng viên của W3C Mục tiêu chính của HTML5 là cải thiện khả năng hỗ trợ cho đa phương tiện mới nhất, đồng thời giữ cho ngôn ngữ dễ đọc cho con người và dễ hiểu cho các thiết bị và chương trình máy tính HTML5 vẫn giữ lại các đặc điểm cơ bản của HTML4 và bổ sung thêm các đặc tả nổi bật của XHTML, DOM, đặc biệt là JavaScript.

- Một phần tử HTML luôn có thể được nhận ra bởi nó được bao quanh bởi cặp dấu < và >

- Những thẻ HTML thường có một cặp giống như , trong đó thẻ thứ nhất là thẻ mở đầu, thẻ thứ hai là thẻ kết thúc

Nội dung của thẻ HTML nằm giữa hai đầu thẻ bắt đầu và kết thúc, và các thẻ HTML không phân biệt chữ hoa và chữ thường, ví dụ như đều có cùng ý nghĩa.

- Cấu trúc của một tài liệu HTML gồm 3 phần cơ bản:

Phần … chứa các mã và thẻ con nằm bên trong của HTML

Phần … nằm bên trong thẻ … và nằm sau thẻ

… chứa nội dung trang web

Hình 1 Cấu trúc của một tài liệu HTML

Xác định một comment, một chú thích

Xác định mẫu cho văn bản HTML

Xác định một liên kết

Xác định phần thân của văn bản HTML

Ngắt một đoạn text xuống hàng

Xác định một button

Xác định các đoạn chữ giống các đoạn mã trong máy tính

Được dùng để nhóm các thành phần bên trong khuôn mẫu một cách hợp lý

Xác định một mẫu html cho người dùng nhập

tới Xác định tiêu đề html

Xác định, khai báo thông tin về văn bản HTML

Tạo một đường ngang

Xác định một văn bản html

Hiển thị một image

Xác định một điều khiển nhập

Tạo một nhãn cho thành phần input

Xác định một chú thích cho một phần tử fieldset (đã mô tả ở trên)

  • Xác định danh sách các mục

    Xác định một liên kết

    Xác định siêu dữ liệu về một văn bản HTML

    Xác định một đoạn văn

    Xác định danh sách lựa chọn

    Xác định một kịch bản

    Được sử dụng để nhóm các inline trong văn bản HTML

    Hiển thị text đậm (mục đích nhấn mạnh)

    Xác định thông tin kiểu kiến trúc cho văn bản

    Xác định một bảng

    Xác định một nhóm nội dung của bảng

    Xác định một phần tử nội dung của bảng

    Xác định một vùng điều khiển nhập text

    Một nhóm nội dung cuối của bảng

    Xác định một phần tử tiêu đề của bảng

    Một nhóm phần tử tiêu đề của bảng

    Xác định một tiêu đề của văn bản HTML

    Xác định một hàng của bảng

      Xác định danh sách không thứ tự

      Bảng 1.1 Bảng các thẻ HTML

      ❖ HTML5 Được kế thừa đa số các thẻ của HTML phiên bản thứ tư và bổ sung thêm một số các thẻ dưới đây

      ❖ Các phần tử dạng khối

      Bạn không cần phải tạo nhận biết cho phần đầu (header) và phần cuối (footer) nữa, vì đã có các thẻ được định nghĩa sẵn.

      - : Đánh dấu một bài viết, một bình luận hoặc một thông báo

      - : Đánh dấu nội dung ngoài lề của một trang web, ví dụ như một thanh bên trái hoặc phải

      Thẻ cho phép đặt thanh điều hướng hoặc bảng kê (menu), tự động tạo ra danh sách giống như một thanh điều hướng thực sự.

      - : Với cặp thẻ này, ta có thể định nghĩa bất kỳ phân vùng nào trên trang web của mình Nó cũng khá giống so với thẻ

      ❖ Các phần tử nội tuyến (Inline elements)

      - Các kiểu đầu vào trong khuôn mẫu, giúp cho việc lựa chọn thuận tiện và chính xác hơn

      - datetime: Trình duyệt hiển thị dạng ngày tháng

      - datetime-local: Trình duyệt hiển thị dạng ngày tháng theo vùng

      - date: Trình duyệt hiển thị dạng ngày

      - month: Trình duyệt hiển thị dạng tháng

      - week: Trình duyệt hiển thị theo tuần

      - time: Trình duyệt hiển thị theo thời gian

      - number: Trình duyệt hiển thị theo dạng số

      - range: Trình duyệt hiển thị theo dạng dãy số

      - email: Trình duyệt hiểu đúng dữ liệu liệu nhập vào là email

      - url: Trình duyệt hiểu đúng dữ liệu nhập vào là kiểu đường dẫn

      - : Kết hợp với JavaScript, tạo một vùng có thể vẽ đồ họa

      - : Đính kèm đoạn phim (video)

      - : Đính kèm âm thanh

      Định vị địa lý là một tính năng quan trọng trong các ứng dụng web di động, cho phép xác định vị trí người sử dụng thông qua GPS trên điện thoại di động, iPad, hoặc bằng địa chỉ IP trên máy tính để bàn, cũng như thông qua Wi-Fi và Bluetooth.

      Các tập tin định kiểu theo tầng - Cascading Style Sheet (CSS) - được dùng để miêu tả cách trình bày các tài liệu viết bằng ngôn ngữ HTML và XHTML

      Ngôn ngữ định kiểu theo tầng (CSS) có thể áp dụng cho XML, SVG và XUL Các đặc điểm kỹ thuật của CSS được duy trì bởi Tổ chức W3C Thay vì nhúng các thẻ định kiểu trực tiếp vào nội dung HTML (hoặc XHTML), chúng ta sử dụng CSS để tách biệt nội dung và kiểu dáng.

      Hạn chế việc sử dụng các thẻ định dạng kiểu dáng như chữ đậm, chữ in nghiêng, chữ gạch chân và chữ màu trong mã HTML giúp làm gọn mã nguồn của trang Web, tách biệt nội dung và định dạng hiển thị, từ đó dễ dàng hơn cho việc cập nhật nội dung.

      Tạo ra các kiểu dáng có thể áp dụng cho nhiều trang Web, giúp tránh phải lặp lại việc định dạng cho các trang Web giống nhau

      Bootstrap là một framework giúp thiết kế website responsive một cách nhanh chóng và dễ dàng Nó bao gồm các mẫu HTML, CSS và JavaScript với các thành phần cơ bản như forms, buttons, tables, navigation, modals, và image carousels Ngoài ra, Bootstrap còn tích hợp các plugin JavaScript để hỗ trợ quá trình thiết kế responsive Được phát triển bởi Mark Otto và Jacob Thornton tại Twitter, Bootstrap đã được phát hành dưới dạng mã nguồn mở vào tháng 8 năm 2011 trên GitHub.

      Chúng ta chia một đoạn mã CSS ra gồm hai phần đó là:

      − selector: selector sẽ trỏ đến những đối tượng (HTML) chịu ảnh hưởng bởi CSS

      − declaration: các thuộc tính CSS dùng để style cho thẻ selector

      Có 3 cách để sử dụng CSS

      − Inline CSS: Áp dụng trực tiếp trên một đối tượng nhất định bằng thuộc tính style

      Internal CSS allows you to apply styles to an entire webpage by placing the CSS code within a pair of tags in the header section of the HTML document, specifically between the and tags.

      − External CSS: Đặt các thuộc tính CSS vào một tệp tin riêng biệt (*.css), khi đó có thể tham chiếu đến từ nhiều trang Web khác nhau

      − Không nên viết dạng inline bởi vì nó khó quản lý và không tốt cho SEO

      − Dạng internal có thể chấp nhận được nhưng bạn nên đặt CSS ở trên thẻ head, dạng này cũng không tốt cho SEO

      Dạng external khuyến khích sử dụng vì tách biệt HTML và CSS, giúp dễ quản lý và tối ưu cho SEO Tương tự như dạng internal, khi sử dụng thẻ link để import, bạn nên đặt nó trong thẻ head.

      Hình 2 Ví dụ về mã CSS

      Bootstrap có hai dạng tải về, mỗi dạng bao gồm các tập tin và thư mục được tổ chức hợp lý, cung cấp cả biến thể đã biên dịch và đã nén cho người dùng.

      Hình 3 Bootstrap khi đã biên dịch

      JavaScript là một ngôn ngữ lập trình kịch bản dựa trên đối tượng, phát triển từ các ý niệm nguyên mẫu và được sử dụng rộng rãi cho các trang web, cũng như để viết script cho các đối tượng trong ứng dụng Ngôn ngữ này cho phép tạo ra các trang web tương tác, với các tính năng như slideshow, pop-up quảng cáo và autocomplete của Google Được sáng tạo bởi Brendan Eich tại Netscape vào năm 1995, JavaScript ban đầu mang tên Mocha, sau đó là LiveScript, và cuối cùng được đặt tên là JavaScript để tận dụng sự phổ biến của Java Cú pháp của JavaScript tương tự như C, nhưng gần gũi hơn với Self Tập tin mã nguồn JavaScript thường có phần mở rộng js, và phiên bản mới nhất hiện nay là 1.5, tương ứng với ECMA-262 bản 3 ECMAScript là phiên bản chuẩn hóa của JavaScript, trong khi trình duyệt Mozilla phiên bản 1.8 beta 1 hỗ trợ không đầy đủ cho E4X, một phần mở rộng cho JavaScript giúp làm việc với XML, được chuẩn hóa trong ECMA-357.

      JavaScript là ngôn ngữ lập trình chủ yếu cho HTML và WEB, nổi bật với tính nhẹ và khả năng tương tác cao Được sử dụng rộng rãi trong các trang web, JavaScript cho phép thực hiện các script phía Client, tạo ra trải nghiệm người dùng động Đây là một ngôn ngữ thông dịch với các tính năng hướng đối tượng, giúp phát triển ứng dụng web hiệu quả.

      ECMA-262 Specification định nghĩa một phiên bản chuẩn của ngôn ngữ JavaScript như sau:

      − JavaScript là một ngôn ngữ chương trình thông dịch, nhẹ

      − Được thiết kế để tạo các ứng dụng mạng trung tâm

      − Bổ sung và tích hợp với Java

      − Bổ sung và tích hợp với HTML

      − Mở và đa nền tảng

      Cơ sở dữ liệu NoSQL

      NoSQL là một loại cơ sở dữ liệu mã nguồn mở không sử dụng T-SQL để truy vấn thông tin Tên gọi NoSQL được viết tắt từ cụm từ "None-Relational SQL" hoặc còn được biết đến với tên gọi "Not-Only SQL".

      NoSQL được phát triển trên Javascript Framework với kiểu dữ liệu là JSON và dạng dữ liệu theo kiểu key và value (1 đặc trưng về dữ liệu trong JSON)

      NoSQL ra đời để khắc phục những hạn chế của mô hình dữ liệu quan hệ RDBMS, bao gồm tốc độ, tính năng, khả năng mở rộng và bộ nhớ cache.

      1.2.2 Một số khái niệm về Firebase

      Firebase là dịch vụ backend do Google cung cấp, giúp rút ngắn thời gian phát triển và triển khai ứng dụng mobile Hỗ trợ cả Android và iOS, Firebase là giải pháp mạnh mẽ, đa năng và bảo mật, cần thiết cho việc xây dựng ứng dụng với hàng triệu người dùng Sử dụng Firebase mang lại nhiều lợi ích cho các nhà phát triển.

      Firebase giúp bạn xây dựng ứng dụng nhanh chóng mà không cần tốn thời gian và nhân lực cho việc quản lý hệ thống và cơ sở hạ tầng Với các chức năng như phân tích, cơ sở dữ liệu, báo cáo hoạt động và báo cáo sự cố lỗi, Firebase cho phép bạn dễ dàng phát triển và định hướng ứng dụng của mình, mang lại trải nghiệm tốt nhất cho người sử dụng.

      Firebase, được Google hỗ trợ và cung cấp, đảm bảo uy tín và chất lượng trên nền tảng phần cứng toàn cầu Nền tảng này được nhiều tập đoàn lớn và ứng dụng với hàng triệu người dùng tin tưởng sử dụng.

      Quản lý cấu hình và trải nghiệm ứng dụng Firebase được tích hợp trong một giao diện website đơn giản, cho phép các ứng dụng hoạt động độc lập nhưng vẫn liên kết chặt chẽ với dữ liệu phân tích.

      Dữ liệu trong Firebase được lưu trữ dưới dạng JSON và đồng bộ theo thời gian thực đến tất cả các kết nối client Khi phát triển ứng dụng đa nền tảng như Android, iOS và JavaScript SDKs, tất cả các client sẽ chia sẻ một cơ sở dữ liệu Firebase và tự động cập nhật với dữ liệu mới nhất.

      + Tự động tính toán quy mô ứng dụng của bạn

      Khi ứng dụng của bạn phát triển, bạn không cần lo lắng về việc nâng cấp máy chủ, vì Firebase sẽ tự động xử lý điều này Firebase quản lý hàng triệu kết nối đồng thời và hàng tỉ lượt truy vấn mỗi tháng.

      + Các tính năng bảo mật lớp đầu

      Tất cả dữ liệu được truyền qua kết nối an toàn SSL với chứng nhận 2048-bit Cơ sở dữ liệu và việc xác nhận được quản lý chi tiết theo các quy tắc bảo mật linh hoạt Logic bảo mật dữ liệu được tập trung để dễ dàng cập nhật và kiểm thử.

      Ứng dụng Firebase của bạn hỗ trợ làm việc offline, cho phép duy trì tương tác ngay cả khi gặp sự cố về internet Tất cả dữ liệu sẽ được ghi vào cơ sở dữ liệu Firebase cục bộ trước khi gửi lên server Khi kết nối internet được khôi phục, client sẽ nhận các thay đổi còn thiếu và đồng bộ hóa với trạng thái hiện tại của server.

      1.2.3 Làm việc Firebase Realtime Database

      Firebase Realtime Database là một cơ sở dữ liệu đám mây hỗ trợ đa nền tảng, bao gồm Android, iOS và Web Dữ liệu được lưu trữ dưới định dạng JSON và mọi thay đổi dữ liệu đều được phản hồi ngay lập tức, hiển thị đồng bộ trên các nền tảng và thiết bị Bài hướng dẫn này nhằm mục đích minh họa sự phản hồi theo thời gian thực của ứng dụng khi sử dụng Firebase Realtime Database.

      1.2.3.1 Dữ liệu được lưu trữ như nào - Định dạng Json

      Firebase Realtime Database lưu trữ dữ liệu dưới dạng JSON, tạo thành một cây JSON lớn với nhiều nút Để tối ưu hóa việc truy cập dữ liệu, bạn cần chuẩn bị một cấu trúc JSON hợp lý, tránh việc các nút con bị lồng nhau.

      Dưới đây là một ví dụ về việc lưu trữ danh sách các hồ sơ người dùng và các bài viết trong cây json

      Hình 6.Ví dụ lưu trữ trong cây JSON

      Firebase offers excellent support for offline data management by automatically storing data when there is no internet connection It enables persistence storage, allowing data to be retained even after the application restarts The persistence storage can be accessed using the code snippet provided below.

      1.2.4 Thực hiện các thao tác CRUD

      Trước khi bắt đầu thực hành, tôi sẽ cung cấp cho các bạn những thông tin cơ bản về việc thực thi các phương thức CRUD Để thực hiện bất kỳ phương thức nào trên cơ sở dữ liệu, cho dù là đọc hay ghi, bạn cần phải có các tham chiếu đến cơ sở dữ liệu.

      Các mã dưới đây cho phép bạn tham chiếu đến nút trên cùng của cơ sở dữ liệu JSON

      Từ đây bạn cần phải sử dụng các tên nút con phải đi qua các nút khác private DatabaseReference mDatabase; mDatabase = FirebaseDatabase.getInstance().getReference() ;

      1.2.4.1 Inserting Data Để thêm dữ liệu, bạn có thể sử dụng phương thức setValue () trên đường dẫn tham chiếu đến database Nó sẽ tạo mới và cập nhật giá trị trên đường dẫn được cung cấp Ví dụ ở dưới đã mã để thêm 1 nút được gọi là “copyright” trên cây json ở mức đỉnh

      DatabaseReference mRef = mDatabase.getReference(“copyright”); mRef.setValue(“ 2016 androidhive All rights Reserved”);

      PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG

      Giới thiệu bài toán

      Trong thời đại công nghệ hiện nay, nhiều phụ huynh cho trẻ tiếp xúc sớm với thiết bị công nghệ, nhưng thường không đúng cách, ảnh hưởng đến sự phát triển và kiến thức của trẻ Việc hướng dẫn trẻ sử dụng công nghệ một cách hợp lý để phục vụ cho học tập là rất quan trọng Đặc biệt, đối với học sinh tiểu học, việc phát triển môn Toán là cần thiết Do đó, cần xây dựng hệ thống học toán trực tuyến giúp trẻ dễ dàng tiếp cận môn học này, đồng thời giúp phụ huynh tiết kiệm chi phí và thời gian.

      Hệ thống phải đảm bảo các chức năng cơ bản dành cho khách hàng cũng như người quản trị viên hệ thống

      Hệ thống phải cho phép khách hàng đăng ký tài khoản, đăng nhập tài khoản, xem tùy chỉnh thông tin tài khoản

      Hệ thống cần thiết lập các chức năng như đăng ký, đăng nhập, xem và tùy chỉnh tài khoản, quản lý thông tin người dùng, cũng như chỉnh sửa cấu hình website.

      Khảo sát

      Để xây dựng một trang web chất lượng và hoàn thiện, tôi đã tiến hành khảo sát và tham khảo một số trang học tập và thi trực tuyến, từ đó cải thiện sản phẩm của mình một cách hiệu quả hơn.

      Các trang web tham khảo: lora.edu.vn, http://www.tienganhabc.com/, http://www.violympic.vn/, https://olm.vn/,

      Về mặt tổng thể một web học tập online cần đảm bảo những chức năng cơ bản sau:

      + Giới thiệu thông tin về website

      + Các thông tin cơ bản về nội dung website và các điều lệ

      + Thông tin chi tiết về các khóa học

      + Giá bán khóa học( nếu tốn phí) và cách liên hệ giao dịch

      + Thông tin hướng dẫn làm bài thi

      Kết luận: Việc tham khảo các trang web thi trực tuyến đã giúp em hình thành cấu trúc cơ bản của một trang web thi Các chức năng như thực hiện thi, hình thức thi và bộ câu hỏi rất quan trọng, vì chúng ảnh hưởng trực tiếp đến quá trình học tập của người dùng Nếu bộ câu hỏi không chính xác và không phù hợp với chương trình học, sẽ gây cản trở cho việc học Hơn nữa, một trang web thi online cho trẻ cần có giao diện dễ nhìn và thân thiện với người dùng, nhằm tăng sự thú vị và hứng thú cho trẻ Giao diện nên đơn giản nhưng đầy đủ tính năng, giúp tiết kiệm thời gian và chi phí.

      Phân tích và thiết kế hệ thống

      2.3.1 Hoạt động của web thi online

      Khi người dùng truy cập vào website, họ có thể xem các khóa học cần thiết và thông tin chi tiết về từng khóa học, bao gồm mô tả Để truy cập vào các chuyên đề và thực hiện học tập, người dùng cần đăng nhập tài khoản; nếu chưa có tài khoản, họ phải đăng ký Để sửa đổi thông tin tài khoản, người dùng chỉ cần vào mục sửa đổi thông tin trên giao diện website.

      Khi người dùng đăng nhập thành công, họ có thể truy cập vào các chuyên đề và bài thi để thực hiện kiểm tra Sau khi chọn các đáp án đúng trong bài thi, hệ thống sẽ thông báo điểm số cho người dùng khi kết thúc.

      - Website phải có đầy đủ các chức năng dành cho thành viên

      - Các chức năng dành cho thành viên : Đăng nhập, đăng ký, xem khóa học, liên hệ , thực hiện thi, sửa đổi thông tin

      2.3.3 Yêu cầu phi chức năng

      - Giao diện đẹp mắt, thân thiện với người dùng

      - Hệ thống xứ lý nhanh, ít bị sự cố

      - An toàn và bảo mật thông tin

      - Có tính tương thích cao

      - Tốc độ truy cập phải đảm báo tốc độ truy cập khi nhiều người dùng truy cập vào.

      Sơ đồ chức năng

      2.4.1 Ca sử dụng tổng quát của Admin

      Hình 7 Biểu đồ UseCase Admin

      ✓ Admin sẻ đăng nhập vào hệ thống bằng một tài khoản được cấp

      Trong mục quản lý thành viên, người dùng có thể thực hiện các chức năng như thêm, sửa và xóa thành viên Ngoài ra, hệ thống cho phép xem chi tiết thông tin của từng thành viên và tìm kiếm thông tin một cách dễ dàng.

      ✓ Vào mục quản lý khóa học Ở đây có thể thực hiên các chức năng thếm sửa và xóa khóa học Xem được chi tiết thông tin về khóa học

      ✓ Vào mục quản lý câu hỏi ở đây có thể xem được thông tin chi tiết về câu hỏi, có thể thêm, sửa, xóa câu hỏi

      Trong mục quản lý chủ đề, người dùng có thể quản lý các chủ đề và chuyên đề của khóa học Tại đây, bạn có thể thực hiện các thao tác như thêm, sửa, xóa và tìm kiếm các chủ đề cũng như chuyên đề một cách dễ dàng.

      ✓ Vào mục quản lý tin tức, có thể xem chi tiết tin tức, có thể thực hiện các thao tác thêm sửa xóa tin tức

      2.4.2 Ca sử dụng tổng quát của thành viên

      Hình 8 Ca sử dụng tổng quát của UseCase thành viên

      Khách hàng cần đăng nhập vào website bằng tài khoản đã đăng ký trước đó để thực hiện thi Nếu chưa có tài khoản, họ phải tiến hành đăng ký trước.

      ✓ Đăng ký: Đăng ký tài khoản vào website Khách hàng điền các thông tin cá nhân, thông tin về tài khoản vào chức năng đăng ký

      Người dùng có thể truy cập thông tin chi tiết về khóa học và các chủ đề liên quan khi đăng nhập vào hệ thống.

      ✓ Sửa thông tin: thành viên có thể sửa thông tin cá nhân của mình

      ✓ Xem điểm: Thành viên xem điểm và thông tin của mình sau khi thi

      Sau khi đăng nhập và chọn khóa học, thành viên có thể bắt đầu thi Mỗi bài thi có thời gian quy định, thành viên sẽ đọc câu hỏi và chọn đáp án Sau khi hoàn thành tất cả câu hỏi, thành viên nhấn kết thúc để xem thông báo điểm và đáp án trên màn hình.

      ✓ Liên hệ: Mọi thắc mắc của thành viên có thể liên hệ qua chức năng liên hệ của website

      2.4.3 Sơ đồ hoạt động của hệ thống

      Hình 9 Sơ đồ hoạt động của hệ thống

      Danh sách các Actor và UseCase

      Actor này có quyền thao tác với trang website và sử dụng những chức năng trên website

      Actor này có quyền tương tác với hệ thống, có quyền quản lý và kiểm soát mọi hoạt động của hệ thống

      Bảng 2.1 Danh sách các Actor

      2.5.1 Danh sách các UseCase Admin

      STT Tên Use case Ý nghĩa

      Usecase này có chức năng truy cập vào hệ thống Admin với tài khoản được cung cấp

      2 Quản lí thành viên Usecase này có chức năng quản lí thành viên của hệ thống có thể tìm kiếm, sửa thông tin,xem chi tiết thông tin

      3 Quản lí câu hỏi Usecase này có chức năng quản lí các câu hỏi của trang web, có thể sửa, thêm mới và xóa câu hỏi

      4 Quản lí khóa học Usecase này có chức năng quản lí các câu hỏi của trang web, có thể sửa, thêm mới và xóa khóa học

      5 Quản lý chủ đề Usecase này có chức năng quản lí các khóa hocnj của trang web, có thể sửa, thêm mới và xóa chủ đề

      6 Quản lý chuyên đề Usecase này có chức năng quản lí các chuyên đề của trang web, có thể sửa, thêm mới và xóa chuyên đề

      7 Quản lý tin tức Usecase này có chức năng quản lí tin tức của trang web, có thể sửa, thêm mới và xóa tin tức

      Bảng 2.2 Danh sách các UseCase Admin

      2.5.2 Danh sách các UseCase Thành viên

      STT Tên Use case Ý nghĩa

      1 Đăng kí Usecase này có chức năng giúp thành viên có thể đăng kí tài khoản cá nhân để đăng nhập vào hệ thống

      Usecase này có chức năng truy cập vào hệ thống và thoát khỏi hệ thống

      3 Xem điểm Usecase này có chức năng cho thành viên xem được số điểm mà mình đã thi

      4 Sửa thông tin cá nhân

      Usecase này có chức năng giúp thành viên có thể thay đổi thông tin cá nhân cần thiết

      5 Liên hệ Usecase này có chức năng giúp thành viên có thể liên hệ và gửi góp ý về trang web

      6 Chọn bài thi Usecase này có chức năng giúp thành viên tiến hình thi trực tuyến trên hệ thống

      7 Chọn chủ đề thi Usecase này có chức năng cho khách hàng chjonj chủ đề phù hợp với mức độ kiến thức của bản thân

      Bảng 2.3 Danh sách các UseCase Thành viên

      Đặc tả UseCase Admin

      2.6.1 Đặc tả UseCase đăng nhập

      Actor Admin sử dụng Use Case này để thực hiện chức năng đăng nhập vào hệ thống quản trị Sau khi hoàn tất đăng nhập, Admin có thể tiến hành các chức năng quản lý khác trong hệ thống.

      Hoạt động sự kiện a Sự kiện chính

      (1) Admin chọn chức năng đăng nhập từ giao diện của hệ thống

      (2) Hệ thống hiển thị trang chứa form đăng nhập

      (3) Admin nhập tài khoản của mình (bao gồm Username và Password)

      (4) Hệ thống xác nhận thông tin đăng nhập

      (5) Hiển thị trang quản lý

      (6) Kết thúc Use Case b Sự kiện khác

      (1) Admin nhập sai thông tin đăng nhập

      (2) Hệ thống từ chối đăng nhập, hiển thị thông báo

      Các yêu cầu đặc biệt

      Không có yêu cầu đặc biệt

      Trạng thái hệ thống khi bắt đầu thực hiện Use Case

      Phải đăng nhập bằng tài khoản của Admin

      Trạng thái hệ thống sau khi thực hiện Use Case

      * Trường hợp đăng nhập thành công: Hệ thống hiển thị trang chủ quản lý

      * Trường hợp đăng nhập thất bại: Hệ thống đưa ra thông báo đăng nhập không thành công và hiển thị giao diện đăng nhập

      2.6.2 Đặc tả UseCase đăng xuất

      Actor Admin là người sử dụng Use Case này Use Case này được sử dụng để thực hiện chức năng đăng xuất ra khỏi hệ thống

      - Admin chọn chức năng đăng xuất

      - Hệ thống sẽ đăng xuất ra khỏi hệ thống và hiển thị về trang đăng nhập

      Các yêu cầu đặc biệt

      Trước khi thực hiện Use Case này, Admin cần đảm bảo rằng Use Case đăng nhập vào hệ thống quản trị đã được thực hiện thành công.

      Trạng thái hệ thống khi bắt đầu thực hiện Use Case

      Trước khi thực hiện Use Case đăng xuất, Admin cần phải hoàn thành thành công Use Case đăng nhập.

      Trạng thái hệ thống sau khi thực hiện Use Case

      Hệ thống đăng xuất ra khỏi hệ thống và trở về trang chủ

      2.6.3 Đặc tả UseCase quản lý Thành viên

      Actor Admin là người sử dụng Use Case này Use Case này được sử dụng để thực hiện chức năng hiển thị và quản lý thành viên

      - Admin chọn chức năng quản lí thành viên

      - Hệ thống chuyển đến trang quản lý thành viên

      - Admin có thể lựa chọn hoạt động các chức năng

      - Hệ thống có lỗi trong quá trình xử lý

      - Hệ thống thông báo lỗi

      Các yêu cầu đặc biệt

      Trước khi thực hiện Use Case này, Admin cần đảm bảo rằng Use Case đăng nhập vào hệ thống quản trị đã được thực hiện thành công.

      Trạng thái hệ thống khi bắt đầu thực hiện Use Case

      Trước khi thực hiện Use Case này, cần đảm bảo rằng Use Case đăng nhập đã thành công Sau đó, Admin có thể lựa chọn các chức năng cần thiết để tương tác với các thành viên.

      Trạng thái hệ thống sau khi thực hiện Use Case

      * Trường hợp thành công: hệ thống xóa và cập nhật lại ở trong cơ sở dữ liệu

      * Trường hợp thất bại: Hệ thống đưa ra thông báo lỗi và trở lại

      2.6.4 Đặc tả UseCase quản lý khóa học

      Actor Admin là người sử dụng Use Case này Use Case này được sử dụng để thực hiện chức năng hiển thị và quản lý thông tin khóa học

      - Admin chọn chức năng quản lí khóa học

      - Hệ thống chuyển đến trang quản lý khóa học

      - Admin có thể lựa chọn hoạt động các chức năng

      Các dòng sự kiện khác

      - Hệ thống có lỗi trong quá trình xử lý

      - Hệ thống thông báo lỗi

      Các yêu cầu đặc biệt

      Trước khi thực hiện Use Case này, Admin cần đảm bảo rằng Use Case đăng nhập vào hệ thống quản trị đã được thực hiện thành công.

      Trạng thái hệ thống khi bắt đầu thực hiện Use Case

      Trước khi thực hiện Use Case này, cần đảm bảo rằng Use Case đăng nhập đã thành công Sau đó, Admin có thể lựa chọn các chức năng cần thiết để tương tác với Use Case.

      Trạng thái hệ thống sau khi thực hiện Use Case

      * Trường hợp thành công: hệ thống xóa và cập nhật lại ở trong cơ sở dữ liệu

      * Trường hợp thất bại: Hệ thống đưa ra thông báo lỗi và trở lại

      2.6.5 Đặc tả UseCase quản lý chủ đề

      Actor Admin sử dụng Use Case này để thực hiện chức năng hiển thị và quản lý chủ đề của khóa học.

      - Admin chọn chức năng quản lí chủ đề

      - Hệ thống chuyển đến trang quản lý chủ đề

      - Admin có thể lựa chọn hoạt động các chức năng

      - Hệ thống có lỗi trong quá trình xử lý

      - Hệ thống thông báo lỗi

      Các yêu cầu đặc biệt

      Trước khi thực hiện Use Case này, Admin yêu cầu phải hoàn thành thành công Use Case đăng nhập vào hệ thống quản trị Sau đó, cần thực hiện Use Case quản lý khóa học để thêm khóa học một cách thành công.

      Trạng thái hệ thống khi bắt đầu thực hiện Use Case

      Trước khi thực hiện Use Case này, cần đảm bảo rằng Use Case đăng nhập đã thành công Tiếp theo, Use Case quản lý khóa học phải thêm khóa học một cách thành công Sau khi hoàn tất các bước này, Admin có thể lựa chọn các chức năng cần thiết để tương tác với Use Case.

      Trạng thái hệ thống sau khi thực hiện Use Case

      * Trường hợp thành công: hệ thống xóa và cập nhật lại ở trong cơ sở dữ liệu

      * Trường hợp thất bại: Hệ thống đưa ra thông báo lỗi và trở lại

      2.6.6 Đặc tả UseCase quản lý Chuyên đề

      Actor Admin sử dụng Use Case này để thực hiện chức năng hiển thị và quản lý chuyên đề của khóa học.

      - Admin chọn chức năng quản lí chuyên đề

      - Hệ thống chuyển đến trang quản lý chuyên đề

      - Admin có thể lựa chọn hoạt động các chức năng

      - Hệ thống có lỗi trong quá trình xử lý

      - Hệ thống thông báo lỗi

      Các yêu cầu đặc biệt

      Trước khi thực hiện Use Case này, Admin cần đảm bảo rằng Use Case đăng nhập vào hệ thống quản trị đã được thực hiện thành công Sau đó, Use Case quản lý chủ đề cần được thực hiện để thêm chủ đề một cách thành công.

      Trạng thái hệ thống khi bắt đầu thực hiện Use Case

      Trước khi thực hiện Use Case này, cần đảm bảo rằng Use Case đăng nhập đã thành công Tiếp theo, Use Case quản lý chủ đề phải được thực hiện để thêm chủ đề một cách thành công Sau khi hoàn tất, Admin có thể lựa chọn các chức năng cần thiết để tương tác với Use Case.

      Trạng thái hệ thống sau khi thực hiện Use Case

      * Trường hợp thành công: hệ thống xóa và cập nhật lại ở trong cơ sở dữ liệu

      * Trường hợp thất bại: Hệ thống đưa ra thông báo lỗi và trở lại

      2.6.7 Đặc tả UseCase quản lý câu hỏi

      Actor Admin sử dụng Use Case này để thực hiện chức năng hiển thị và quản lý câu hỏi cho từng chuyên đề khóa học.

      - Admin chọn chức năng quản lí câu hỏi

      - Hệ thống chuyển đến trang quản lý câu hỏi

      - Admin có thể lựa chọn hoạt động các chức năng

      - Hệ thống có lỗi trong quá trình xử lý

      - Hệ thống thông báo lỗi

      Các yêu cầu đặc biệt

      Trước khi thực hiện Use Case này, Admin yêu cầu phải hoàn thành thành công Use Case đăng nhập vào hệ thống quản trị Sau đó, cần thực hiện Use Case quản lý chuyên đề để thêm chuyên đề một cách thành công.

      Trạng thái hệ thống khi bắt đầu thực hiện Use Case

      Đặc tả UseCase Thành viên

      2.7.1 Đặc tả UseCase đăng ký

      Diễn viên Thành viên là người sử dụng Use Case này, được áp dụng để thực hiện chức năng đăng ký vào hệ thống Sau khi hoàn tất đăng ký, thành viên mới có thể truy cập và thực hiện các chức năng khác trong hệ thống.

      - Thành viên chọn chức năng đăng ký từ giao diện của hệ thống

      - Hệ thống hiển thị trang chứa form đăng ký

      - Thành viên nhập vào thông tin của mình (bao gồm Username và Password)

      - Hệ thống xác nhận thông tin đăng ký

      - Hiển thị trang đăng nhập

      - Thành viên nhập sai thông tin đăng ký

      - Hệ thống từ chối đăng ký, hiển thị thông báo

      Các yêu cầu đặc biệt

      Không có yêu cầu đặc biệt

      Trạng thái hệ thống khi bắt đầu thực hiện Use Case

      Không đòi hỏi bất cứ điều kiện nào trước đó

      Trạng thái hệ thống sau khi thực hiện Use Case

      * Trường hợp đăng ký thành công: Hệ thống hiển thị form đăng nhập

      * Trường hợp đăng ký thất bại: Hệ thống đưa ra thông báo đăng ký không thành công và hiển thị lại giao diện đăng ký

      2.7.2 Đặc tả UseCase đăng nhập

      Diễn viên Thành viên là người sử dụng Use Case này, được thiết kế để thực hiện chức năng đăng nhập vào hệ thống Sau khi hoàn tất quá trình đăng nhập, thành viên mới có thể truy cập và thực hiện các chức năng khác trong hệ thống.

      - Thành viên chọn chức năng đăng nhập từ giao diện của hệ thống

      - Hệ thống hiển thị trang chứa form đăng nhập

      - Thành viên nhập tài khoản của mình (bao gồm Username và Password)

      - Hệ thống xác nhận thông tin đăng nhập

      - Thành viên nhập sai thông tin đăng nhập

      - Hệ thống từ chối đăng nhập, hiển thị thông báo

      Các yêu cầu đặc biệt

      Không có yêu cầu đặc biệt

      Trạng thái hệ thống khi bắt đầu thực hiện Use Case

      Không đòi hỏi bất cứ điều kiện nào trước đó

      Trạng thái hệ thống sau khi thực hiện Use Case

      * Trường hợp đăng nhập thành công: Hệ thống hiển thị trang chủ

      * Trường hợp đăng nhập thất bại: Hệ thống đưa ra thông báo đăng nhập không thành công và hiển thị giao diện đăng nhập

      2.7.3 Đặc tả UseCase chỉnh sửa thông tin cá nhân

      Actor thành viên là người sử dụng Use Case này Use Case này được sử dụng để thực hiện chức năng update thông tin chi tiết của thành viên

      - Thành viên chọn chỉnh sửa thông tin từ giao diện của hệ thống

      - Hệ thống hiển thị trang chỉnh sửa thông tin

      - Hiển thị form điền thông tin

      - Hệ thống có lỗi trong quá trình xử lý

      - Hệ thống thông báo lỗi

      Các yêu cầu đặc biệt

      Hệ thống sẽ kiễm tra nếu chưa đăng nhập thì thành viên cần phải đăng nhập rồi mới có thể sử dụng Usecase update profile được

      Trạng thái hệ thống khi bắt đầu thực hiện Use Case

      Trước khi thực hiện Use Case này, cần đảm bảo rằng Use Case đăng nhập đã thành công Sau đó, người dùng có thể lựa chọn các chức năng cần thiết để tương tác với Use Case.

      Trạng thái hệ thống sau khi thực hiện Use Case

      * Trường hợp thành công: hệ thống cập nhật lại ở trong cơ sở dữ liệu

      * Trường hợp thất bại: Hệ thống đưa ra thông báo lỗi và trở lại

      2.7.4 Đặc tả UseCase xem điểm thi

      Actor Thành viên là người sử dụng Use Case này để xem điểm thi

      - Thành viên chọn thông tin cá nhân từ giao diện của hệ thống

      - Hệ thống chuyển đến trang thông tin cá nhân

      Các yêu cầu đặc biệt

      Hệ thống sẽ kiểm tra nếu chưa đăng nhập thì thành viên cần phải đăng nhập, rồi mới có thể sử dụng Usecase xem điểm

      Trạng thái hệ thống khi bắt đầu thực hiện Use Case

      Hệ thống sẽ kiểm tra nếu chưa đăng nhập thì Thành viên cần phải đăng nhập, rồi mới có thể sử dụng Usecase xem điểm

      2.7.5 Đặc tả UseCase chọn chuyên đề

      Actor Thành viên là người sử dụng Use Case này Use Case này được sử dụng để thực hiện chức năng xem và chọn chuyên đề

      - Thành viên chọn khóa học từ giao diện của hệ thống

      - Hệ thống hiển thị trang chi tiết khóa học

      - Thành viên chọn tham gia khóa học

      - Hệ thống xác nhận thông tin đăng nhập

      - Hệ thống chuyển đến trang chuyên đề

      - Thành viên thực hiện chọn chuyên đề

      Các yêu cầu đặc biệt

      Hệ thống sẽ kiễm tra nếu chưa đăng nhập thì thành viên cần phải đăng nhập rồi mới có thể sử dụng UserCase được

      Trạng thái hệ thống khi bắt đầu thực hiện Use Case

      Trước khi thực hiện UseCase này đòi hỏi Use Case đăng nhập phải thực hiện thành công, sau đó User có thể tương tác với Usecase

      2.7.6 Đặc tả UseCase vào thi

      Actor User là người sử dụng Use Case này thực hiện thi trực tuyến

      - User chọn chuyên đề thi

      - Hệ thống hiển thị các câu hỏi để thành viên tham gia thi

      Trạng thái hệ thống khi bắt đầu thực hiện Use Case

      Trước khi thực hiện UseCase này đòi hỏi Use Case đăng nhập phải thực hiện thành công, sau đó User có thể tương tác với Usecase

      Trạng thái hệ thống sau khi thực hiện Use Case

      Thông báo kết quả vả trả lại trang chuyên đề

      2.7.7 Đặc tả UseCase liên hệ

      Actor Thành viên là người sử dụng Use Case này để liên hệ cho admin

      - Thành viên chọn mục liên hệ từ giao diện của hệ thống

      - Hệ thống chuyển đến trang liên hệ

      Các yêu cầu đặc biệt

      Hệ thống sẽ kiểm tra nếu chưa đăng nhập thì thành viên cần phải đăng nhập, rồi mới có thể sử dụng Usecase liên hệ

      Trạng thái hệ thống khi bắt đầu thực hiện Use Case

      Hệ thống sẽ kiểm tra nếu chưa đăng nhập thì Thành viên cần phải đăng nhập, rồi mới có thể sử dụng Usecase liên hệ

      Thiết kế cơ sở dữ liệu

      Hình 10 Sơ đồ dữ liệu

      IDTK Mã số tài khoản

      HoTen Tên của người dùng tài khoản

      Email Email SoDienThoai Số điện thoại

      Bảng 2.4 Mô tả bảng tài khoản

      TenQuyen Tên các quyền được phân chia

      Bảng 2.5 Mô tả bảng PHANQUYEN

      Bảng 2.6 Mô tả bảng lớp

      Img_ChuDe Ảnh đại diện chủ đề

      Bảng 2.7 Mô tả bảng chủ đề

      MoTa_Lop Mô tả thông tin chi tiết về lớp

      Img_Lop Hình ảnh avatar lớp

      NoiDung_Lop Nội dung thi chi tiết của lớp

      2.8.2.5 Bảng chi tiết chủ đề

      Bảng 2.8 Mô tả chi tiết chủ đề

      TieuDe_CauHoi Tên câu hỏi

      NoiDung Nội dung câu hỏi

      IDChiTietChuDe Mã chi tiết chủ đề

      Bảng 2.9 Mô tả bảng câu hỏi

      ThoiGianLamBai Nội dung làm bài

      Kết quả Kết quả thi

      Bảng 2.10 Mô tả bảng đề thi

      IDChiTietChuDe Mã chi tiết chủ đề Ten_ChiTietChuDe Tên các mục chuyên đề Img_ChiTietChuDe Hình ảnh đính kèm

      Img_LienHe Ảnh đính kèm

      SDT Số điện thoại liên hệ

      DiaChi Địa chỉ liên hệ

      Bảng 2.11 Mô tả bảng liên hệ

      Img_TinTuc Ảnh đính kèm

      TieuDe_TinTuc Tiêu đề tin tức

      NoiDung_TinTuc Nội dung của tin

      Bảng 2.12 Mô tả bảng tin tức

  • Ngày đăng: 07/06/2023, 15:58

    HÌNH ẢNH LIÊN QUAN

    Bảng 1.1 Bảng các thẻ HTML - WEBSITE THI TOÁN ONLINE SỬ DỤNG THƯ VIỆN REACTJS
    Bảng 1.1 Bảng các thẻ HTML (Trang 17)
    2.4  Sơ đồ chức năng - WEBSITE THI TOÁN ONLINE SỬ DỤNG THƯ VIỆN REACTJS
    2.4 Sơ đồ chức năng (Trang 34)
    2.4.3  Sơ đồ hoạt động của hệ thống - WEBSITE THI TOÁN ONLINE SỬ DỤNG THƯ VIỆN REACTJS
    2.4.3 Sơ đồ hoạt động của hệ thống (Trang 36)
    Hình 9. Sơ đồ hoạt động của hệ thống - WEBSITE THI TOÁN ONLINE SỬ DỤNG THƯ VIỆN REACTJS
    i ̀nh 9. Sơ đồ hoạt động của hệ thống (Trang 36)
    Bảng 2.2 Danh sách các UseCase Admin - WEBSITE THI TOÁN ONLINE SỬ DỤNG THƯ VIỆN REACTJS
    Bảng 2.2 Danh sách các UseCase Admin (Trang 37)
    Hình thi trực tuyến trên hệ thống - WEBSITE THI TOÁN ONLINE SỬ DỤNG THƯ VIỆN REACTJS
    Hình thi trực tuyến trên hệ thống (Trang 38)
    2.8.1  Sơ đồ dữ liệu - WEBSITE THI TOÁN ONLINE SỬ DỤNG THƯ VIỆN REACTJS
    2.8.1 Sơ đồ dữ liệu (Trang 49)
    Hình 10. Sơ đồ dữ liệu - WEBSITE THI TOÁN ONLINE SỬ DỤNG THƯ VIỆN REACTJS
    i ̀nh 10. Sơ đồ dữ liệu (Trang 49)
    Bảng 2.9 Mô tả bảng câu hỏi - WEBSITE THI TOÁN ONLINE SỬ DỤNG THƯ VIỆN REACTJS
    Bảng 2.9 Mô tả bảng câu hỏi (Trang 51)
    Bảng 2.8 Mô tả chi tiết chủ đề - WEBSITE THI TOÁN ONLINE SỬ DỤNG THƯ VIỆN REACTJS
    Bảng 2.8 Mô tả chi tiết chủ đề (Trang 51)
    Bảng 2.10 Mô tả bảng đề thi - WEBSITE THI TOÁN ONLINE SỬ DỤNG THƯ VIỆN REACTJS
    Bảng 2.10 Mô tả bảng đề thi (Trang 51)
    Bảng 2.11 Mô tả bảng liên hệ - WEBSITE THI TOÁN ONLINE SỬ DỤNG THƯ VIỆN REACTJS
    Bảng 2.11 Mô tả bảng liên hệ (Trang 52)
    Bảng 2.12 Mô tả bảng tin tức - WEBSITE THI TOÁN ONLINE SỬ DỤNG THƯ VIỆN REACTJS
    Bảng 2.12 Mô tả bảng tin tức (Trang 52)

    TÀI LIỆU CÙNG NGƯỜI DÙNG

    TÀI LIỆU LIÊN QUAN

    w