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

xây dựng nền tảng web luyện thi jlpt ứng dụng trong dạy và học tiếng nhật

91 0 0
Tài liệu đã được kiểm tra trùng lặp

Đ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 đề Xây dựng nền tảng web luyện thi JLPT ứng dụng trong dạy và học tiếng Nhật
Tác giả Dương Thị Thu Huyền
Người hướng dẫn ThS. Nguyễn Thành Trung
Trường học Trường Đại Học Phenikaa
Chuyên ngành Công nghệ thông tin Việt Nhật
Thể loại Đồ án/Khóa luận tốt nghiệp
Năm xuất bản 2023
Thành phố Hà Nội
Định dạng
Số trang 91
Dung lượng 2,2 MB

Cấu trúc

  • CHƯƠNG 1. GIỚI THIỆU ĐỀ TÀI (17)
    • 1.1 Đặt vấn đề (17)
    • 1.2 Mục tiêu và phạm vi đề tài (17)
    • 1.3 Định hướng giải pháp (17)
    • 1.4 Bố cục bài tập lớn (18)
  • CHƯƠNG 2. KHẢO SÁT VÀ PHÂN TÍCH YÊU CẦU (19)
    • 2.1 Tổng quan chức năng (19)
      • 2.1.1 Biểu đồ use case tổng quan (19)
      • 2.1.2 Phân tích usecase (32)
    • 2.2 Yêu cầu phi chức năng (55)
  • CHƯƠNG 3. CÔNG NGHỆ SỬ DỤNG (56)
    • 3.1 Ngôn ngữ Java (56)
      • 3.1.1 Java là gì? (56)
      • 3.1.2 Đặc điểm của ngôn ngữ lập trình Java (56)
    • 3.2 Ngôn ngữ Javascript (59)
      • 3.2.1 Javascript là gì ? (59)
      • 3.2.2 Ưu và nhược điểm của Javascript (59)
      • 3.2.3 Cách hoạt động của Javascript (60)
    • 3.3 Framework Spring boot (60)
    • 3.4 Framework Reactjs (60)
      • 3.4.1 Reactjs là gì (60)
      • 3.4.2 Đặc trưng của Reactjs (60)
    • 3.5 Framework Bootstrap (61)
      • 3.5.1 Bootstrap là gì ? (61)
      • 3.5.2 Tại sao nên sử dụng Bootstrap (62)
  • CHƯƠNG 4. PHÁT TRIỂN VÀ TRIỂN KHAI ỨNG DỤNG (63)
    • 4.1 Thiết kế kiến trúc (63)
    • 4.2 Thiết kế chi tiết (64)
      • 4.2.1 Thiết kế giao diện (64)
      • 4.2.2 Thiết kế cơ sở dữ liệu (67)
    • 4.3 Xây dựng ứng dụng (79)
      • 4.3.1 Thư viện và công cụ sử dụng (79)
      • 4.3.2 Kết quả đạt được (80)
      • 4.3.3 Minh hoạ các chức năng chính (81)
    • 4.4 Kiểm thử (83)
      • 4.4.1 Chức năng Login (83)
      • 4.4.2 Chức năng Manage user (86)
      • 4.4.3 Chức năng Add user (88)
  • CHƯƠNG 5. KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN (90)
    • 5.1 Kết luận (90)
    • 5.2 Copies for internal use only in Phenikaa University Hướng phát triển (0)

Nội dung

Để giải quyết vấn vấn đề trên, sản phẩm cần có các chức năng chính sau: • ADMIN: Quản lý lớp học Thêm, sửa, xóa lớp học • TEACHER: Quản lý học viên Xem thông tin chi tiết các học viên, x

GIỚI THIỆU ĐỀ TÀI

Đặt vấn đề

Hiện nay, số người học tiếng Nhật ở Việt Nam là khoảng 175000 1 người, và con số đó sẽ còn tăng trong tương lai Số lượng người học tiếng Nhật gia tăng, đồng nghĩa với việc số lượng người quan tâm, tham gia các kỳ thi đánh giá năng lực tiếng Nhật ( như JLPT, Nattest, ) hàng năm sẽ ngày càng tăng Thực tế hiện nay ngay ở trường đại học Phenikaa, cũng có rất nhiều sinh viên đang học tiếng Nhật một cách nghiêm túc ( đặc biệt sinh viên ngành ngôn ngữ Nhật và ngành Công nghệ thông tin Việt - Nhật) Do đó nhu cầu luyện thi các chứng chỉ liên quan đến tiếng Nhật như JLPT hàng năm của một bộ phận phận sinh viên Phenikaa nói riêng và cộng đồng người học tiếng Nhật nói chung là rất lớn Để đáp ứng nhu cầu ấy của bộ phận người học tiếng Nhật, tôi mong muốn phát triển trang web luyện thi JLPT để giúp những người học tiếng Nhật thuận tiện trong việc ôn tập cho các kỳ thi đánh giá năng lực tiếng Nhật.

Mục tiêu và phạm vi đề tài

Hiện nay, không khó để tìm kiếm các trang web luyện thi JLPT cả có phí và không có phí trên mạng Tuy nhiên, với mong muốn ứng dụng vào các lớp tiếng Nhật tại trường đại học Phenikaa, vấn đề về quản lý lớp học, theo dõi tình hình học tập của các học viên, giúp giảng viên có các đánh giá tương đối về các học viên của mình là điều mà các trang web luyện thi JLPT hiện nay hầu như chưa đáp ứng được Bởi vậy tôi mong muốn sẽ giải quyết các vấn đề trên qua sản phẩm này Để giải quyết vấn vấn đề trên, sản phẩm cần có các chức năng chính sau:

• ADMIN: Quản lý lớp học (Thêm, sửa, xóa lớp học)

• TEACHER: Quản lý học viên (Xem thông tin chi tiết các học viên, xem kết quả kiểm tra của từng học viên, xem kết quả chung của bài kiểm tra)

Định hướng giải pháp

Để xây dựng trang web luyện thi JLPT, giải quyết các vấn đề được nêu ở mục 1.2, tôi sử dụng các công nghệ sau: Ngôn ngữ Java, Javascript, Spring boot

1 Theo trang jpf.org.vn

Copies for internal use only in Phenikaa University framework, Reactjs framework Tôi sẽ sử dụng Reactjs để xây dựng giao diện phía người người dùng và sử dụng Spring boot để xây dựng phía server.

Bố cục bài tập lớn

Phần còn lại của báo cáo Bài tập lớn này được tổ chức như sau

Chương 2 có tên [Khảo sát và phân tích yêu cầu] sẽ phân tích chi tiết các vấn đề đã được nêu tóm tắt ở mục 1.2, tổng quan các chức năng để giúp người dùng có cái nhìn tổng quan về hệ hệ thống, các nghiệp vụ quan trọng mà hệ thống cần đáp ứng

Sau khi đã có cái nhìn tổng quan về hệ thống, trong Chương 3, tôi sẽ trình bày về các công nghệ tôi sẽ sử dụng để phát triển hệ thống Đó là những công nghệ quan trọng cần thiết trong việc xây dựng sản phẩm

Chương 4 có tên [Phát triển và triển khai ứng dụng], trong chương này, tôi sẽ trình bày các bản thiết kế như thiết kế gói, thiết kế giao diện, thiết kế CSDL, để qua đó giúp người đọc hình dung chi tiết về hệ thống, cách tiếp cận giải quyết vấn đề mà tôi chọn, quy trình tôi triển khai phần mềm

Chương 5 cũng là chương cuối cùng, trong chương này, tôi sẽ nhìn lại kết quả tôi thực hiện và so sánh với các mục tiêu ban đầu đề ra, từ đó tự rút ra bài học cho bản thân Bên cạnh đó tôi sẽ trình bày về những hướng phát triển của đề tài này trong tương lai

Copies for internal use only in Phenikaa University

KHẢO SÁT VÀ PHÂN TÍCH YÊU CẦU

Tổng quan chức năng

Như tôi có trình bày ở chương I, hiện nay số lượng người học tiếng Nhật ngày càng tăng kéo theo số lượng người có nhu cầu luyện thi các chứng chỉ đánh giá năng lực tiếng Nhật như JLPT, Nattest cũng tăng theo Vì vậy một trang web luyện thi JLPT ra đời có thể đáp ứng nhu cầu rất lớn của người học tiếng Nhật Trên thực tế hiện nay, không ít các trang web hay ứng dụng sử dụng hệ điều hành Android hoặc Apple được tạo ra với mục đích trên Các phần mềm trên có các ưu điểm sau:

❖ Xây dựng được một bộ câu hỏi lớn

❖ Có thể sử dụng một số dịch vụ web miễn phí

❖ Giúp người học có thể học mọi lúc mọi nơi Điển hình, có thể kể tới một số trang sau: riki edu, jlpt Test,

Tuy nhiên để ứng dụng các trang web, ứng dụng trên vào các lớp học tiếng Nhật tại trường Đại học Phenikaa, tôi nhận thấy một vài các hạn chế sau:

❖ Phần lớn các trang web/ phần mềm phải trả phí hoặc nếu sử dụng miễn phí sẽ không sử dụng được tất cả các chức năng

❖ Nhiều phần mềm sau khi người dùng làm xong bài chỉ biết kết quả và đáp án, không có các giải thích khiến người dùng không biết lý do tại sao câu hỏi đó mình làm sai/ đúng

❖ Quan trọng nhất là hạn chế trong việc quản lý lớp, là giáo viên sẽ không thể nắm bắt được tình hình làm bài của học sinh lớp mình

Chính vì những lý do trên, tôi đã nghĩ đến phát triển một phần mềm luyện thi JLPT ứng dụng cho sinh viên trường Phenikaa bằng việc khắc phục các hạn chế trên Các chức năng tôi sẽ tập chung phát triển trong phần mềm này là các chức năng liên quan đến vấn đề quản lý lớp học, cụ thể:

❖ ADMIN: Quản lý lớp học (Thêm, sửa, xóa lớp học)

❖ TEACHER: Quản lý học viên (Xem thông tin chi tiết các học viên, xem kết quả kiểm tra của từng học viên, xem kết quả chung của bài kiểm tra)

2.1.1 Biểu đồ use case tổng quan

Dưới đây là bảng mô tả các usecase

Copies for internal use only in Phenikaa University

Bảng 2.1 Bảng mô tả các usecase

1 US01 Login Cho phép actor đăng nhập vào hệ thống sử dụng email và password

2 US02 Login with google Cho phép actor đăng nhập vào hệ thống sử dụng tài khoản google

3 US03 Forgot password Cho phép actor reset lại mật khẩu

4 US04 Change password Cho phép actor thay đổi mật khẩu

5 US05 Logout Cho phép actor đăng xuất khỏi hệ thống

6 US06 Update Account Cho phép actor cập nhật thông tin tài khoản

7 US07 Manage user Cho phép actor xem danh sách người dùng trong hệ thống

8 US08 Add user Cho phép actor thêm một người dùng vào hệ thống

9 US09 Edit user Cho phép actor chỉnh sửa người dùng trong hệ thống

10 US10 Disable user Cho phép actor vô hiệu hóa người dùng khỏi hệ thống

11 US11 Un disable user Cho phép actor cấp lại quyền sử dụng lại hệ thống cho người dùng

12 US12 Assign user Cho phép actor thêm người dùng vào lớp học

13 US13 Un assign user Cho phép actor xóa người dùng khỏi lớp học

14 US14 Import list user Cho phép actor thêm một danh sách người dùng vào hệ thống

15 US15 Export list user Cho phép actor xuất ra file excel là

Copies for internal use only in Phenikaa University danh sách người dùng trong hệ thống

16 US16 View detail user Cho phép actor xem chi tiết người dùng

17 US17 Add class Cho phép actor thêm lớp học

18 US18 Edit class Cho phép actor chỉnh sửa thông tin lớp học

19 US19 View detail class Cho phép actor xem thông tin chi tiết từng lớp học

20 US20 Delete class Cho phép actor xóa lớp học

21 US21 Export list class Cho phép actor xuất ra file excel danh sách các lớp học

22 US22 Manage questions Cho phép actor xem danh sách các câu hỏi trong hệ thống

23 US23 Add question Cho phép actor thêm câu hỏi vào hệ thống

24 US24 Edit question Cho phép actor chỉnh sửa câu hỏi

Cho phếp actor xem chi tiết câu hỏi

26 US26 Delete question Cho phép actor xóa câu hỏi

Cho phép actor xuất ra danh sách câu hỏi

28 US28 Join class Cho phép actor tham gia lớp học

29 US29 Manage student in class

Cho phép actor xem danh sách học sinh/ giáo viên (khác actor) trong lớp học

30 US30 View detail student in class

Cho phép actor xem thông tin chi tiết của từng thanh viên trong lớp học

Copies for internal use only in Phenikaa University

31 US31 Manage exam Cho phép actor xem danh sách các bài kiểm tra trong lớp học

32 US32 Add exam Cho phép actor thêm bài kiểm tra

33 US33 Edit exam Cho phép actor chỉnh sửa bài kiểm tra

34 US34 Delete exam Cho phép actor xóa bài kiểm tra

35 US35 Manage posts Cho phép actor xem danh sách bài đăng mà mình đã tạo trong lớp học

36 US36 Add post Cho phép actor thêm bài đăng

37 US37 Edit post Cho phép actor chỉnh sửa bài đăng

38 US38 Delete post Cho phép actor xóa bài đăng

39 US39 Read the posts in class

Cho phép actor đọc các bài đăng được đăng trong lớp học

40 US40 Add comment Cho phép actor thêm bình luận dưới bài đăng

41 US41 Edit comment Cho phép actor chỉnh sửa bình luận của mình

42 US42 Delete comment Cho phép actor xóa bình luận của mình

43 US43 Reply comment Cho phép actor trả lời bình luận của người khác

44 US44 Scores sumary Cho phép actor xem tổng quan kết quả các bài kiểm tra có trong lớp

45 US45 Practice lesson Cho phép actor luyện tập các câu hỏi trắc nghiệm theo chủ đề

46 US46 Do exam Cho phép actor làm bài kiểm tra

47 US47 View all exam of class

Cho phép actor xem danh sách các bài kiểm tra trong lớp học

48 US48 Manage Notes Cho phép actor xem danh sách các

Copies for internal use only in Phenikaa University chú

49 US49 Add note Cho phép actor tạo chú thích mới

50 US50 Edit note Cho phép actor chỉnh sửa chú thích

51 US51 Delete note Cho phép actor xóa chú thích

Hình 2.1 Biểu đồ US tổng quan

Copies for internal use only in Phenikaa University

US29: Manage student in class X

Copies for internal use only in Phenikaa University

US30: View detail student in class

US39: Read the posts in class X X

US47: View all exam of class X

Hệ thống có ba tác nhân chính: Admin (Người quản trị), Teacher (Giáo viên), Student (Sinh viên/ học sinh) Các tác nhân đều có thể thực hiện các chức năng chung bao gồm: Login (đăng nhập), Login with google (Đăng nhập trên

Copies for internal use only in Phenikaa University google), log out (đăng xuất), update account (cập nhập tài khoản), change password (thay đổi mật khẩu), forgot password (quên mật khẩu)

Hình 2.2 Biểu đồ US tổng quan

Tuy nhiên, mỗi tác nhân sẽ có thể thực hiện các chức năng riêng:

1 Admin (quản trị): Admin là người có quyền hạn cao nhất, có thể thực hiện các chức năng:

❖ Manage user (quản lý người dùng) bao gồm các chức năng:

➢ Add user: Thêm mới người dùng (Tạo tài khoản cho Student và Teacher)

➢ Import list user: Thêm mới một danh sách người dùng thông qua việc tải lên file excel

➢ Edit user: Chỉnh sửa thông tin người dùng trong hệ thống

➢ Disable user: Chặn người dùng sử dụng hệ thống

Copies for internal use only in Phenikaa University

➢ Un disable user: Bỏ chặn người dùng, cho phép người dùng sử dụng lại hệ thống

➢ Assign user into class: Thêm người dùng vào lớp học

➢ Un assign user into class: Xóa người dùng khỏi class

➢ Export excel: Xuất ra file excel danh sách người dùng trong hệ thống

❖ Manage class (quản lý lớp học) bao gồm các chức năng sau:

➢ Add class: Tạo mới lớp học

➢ Edit class: Cập nhật lại thông tin lớp học

➢ Delete class: Xóa lớp học khỏi hệ thống

➢ Export excel: Xuất ra file excel danh sách các lớp học

❖ Manage question (quản lý câu hỏi) bao gồm các chức năng sau:

➢ Add question: Tạo mới câu hỏi cho hệ thống

➢ Edit question: Chỉnh sửa câu hỏi

➢ Delete question: Xóa câu hỏi

➢ Export excel: Xuất ra file excel danh sách các câu hỏi

Copies for internal use only in Phenikaa University

Hình 2.3 Biểu đồ US tổng quan

2 Teacher (giáo viên): Teacher là người phụ trách giảng dạy trong lớp học, có thể thực hiện các chức năng sau:

Join class (tham gia lớp học): Teacher truy cập lớp học để thực hiện các chức năng trong lớp

Sau khi TEACHER tham gia lớp học có thể thực hiện các chức năng dưới đây:

❖ Manage question (quản lý câu hỏi): Giống như Admin, Teacher có thể thực hiện quản lý câu hỏi thông qua các chức năng sau:

➢ Add question: Thêm câu hỏi

➢ Edit question: Chỉnh sửa câu hỏi

➢ Delete question: Xóa câu hỏi

➢ Export excel: Xuất ra file excel danh sách câu hỏi

Copies for internal use only in Phenikaa University

❖ Manage student in class (quản lý học sinh trong lớp học): Teacher có thể quản lý các học sinh trong lớp học mình dưới các chức năng xem danh sách sinh viên, xem thông tin chi tiết của từng sinh viên

❖ Manage exam (quản lý bài kiểm tra): Teacher có thể thực hiện các chức năng sau:

➢ Add exam: Tao mới bài kiểm tra

➢ Edit exam: Chỉnh sửa bài kiểm tra

➢ Delete exam: Xóa bài kiểm tra

❖ Manage post (quản lý bài đăng): Teacher có thể thực hiện các chức năng sau:

➢ Add post: Thêm một bài đăng mới

➢ Edit post: Chỉnh sửa bài đăng của mình

➢ Delete post: Xóa bài đăng

❖ Scores sumary: Teacher có thể xem tổng quan kết quả các bài kiểm tra của các sinh viên trong lớp

Copies for internal use only in Phenikaa University

3 Student (học sinh/ sinh viên): Student là học viên/ học sinh của các lớp học, có thể thực hiện các chức năng sau:

Join class (tham gia lớp học): Student truy cập lớp học để thực hiện các chức năng trong lớp

Sau khi TEACHER tham gia lớp học có thể thực hiện các chức năng dưới đây:

❖ Practice lesson (Thực hành bài học): Student có thể thực hành luyện tập các bài học theo 4 chủ đề: Goi(từ vựng), Bunbou(ngữ pháp), Choukai(nghe hiểu), Dokkai(đọc hiểu)

❖ Do exam (Làm bài kiểm tra): Student có thể làm bài kiểm tra định kì do Teacher tạo

Copies for internal use only in Phenikaa University

❖ Read post in class: Student có thể xem được các bài đăng được Teacher đăng tải trên lớp học.khi truy cập vào từng bài đăng, student có thể thực hiện các chức năng sau:

➢ Add comment: Thêm bình luận

➢ Edit comment: Sửa bình luận

➢ Delete comment: Xóa bình luận

➢ Reply comment: Trả lời bình luận của người dùng khác

❖ Manage notes (quản lý ghi chú): Student có thể thức hiện các chức năng dưới đây:

➢ Add note: Tạo mới ghi chú

➢ Edit note: Chỉnh sửa ghi chú

➢ Delete note: Xóa ghi chú

Copies for internal use only in Phenikaa University

Bảng 2.3 Usecase Description của UC01

Description Cho phép actor đăng nhập vào hệ thống

Actor ADMIN, STUDENT, TEACHER Trigger Có yêu cầu đăng nhập vào hệ thống

Pre - Actor yêu cầu truy cập trang web

Copies for internal use only in Phenikaa University condition

Post - condition Đăng nhập thành công

2 Hệ thống kiểm tra email pasword

3 Actor nhập lại emai, password (Nếu có lỗi)

4 Lặp lại bước 2 cho đến khi hết lỗi Gửi yêu cầu đăng nhập lên server

5 Kiểm tra lại dữ liệu gửi lên Nếu có lỗi sẽ dừng quá trình đăng nhập và trả thông báo cho front end

6 Hiển thị thông báo lỗi cho người dùng( nếu có lỗi) Quay lại 1

7 Dữ liệu gửi lên thỏa mãn Server sẽ kiểm

Copies for internal use only in Phenikaa University tra email và password có tồn tại trong CSDL Nếu không tồn tại gửi thông báo lỗi, nếu có gửi thông báo thành công cho FE

8 FE hiển thị thông báo cho người dùng Nếu thông báo lỗi, quay lại bước 1

9 Người dùng đăng nhập thành công, được redirect vào trang chủ

Bảng 2.5 Business Rules của UC01

1 Dữ liệu nhập vào phải thỏa mãn yêu cầu

✓ Email phải đúng định dạng của một email

✓ Có ít nhất 8 ký tự

✓ Có ít nhất một ký tự viết hoa, một ký tự viết thường

✓ Có ít nhất một ký tự là số

✓ Có ít nhất một ký tự đặc biệt

Copies for internal use only in Phenikaa University

Bảng 2.6 Usecase Description của UC02

Name Login with google Code UC02

Description Cho phép actor đăng nhập vào hệ thống

Actor ADMIN, STUDENT, TEACHER Trigger Có yêu cầu đăng nhập vào hệ thống , actor click button [Login with google]

Actor yêu cầu truy cập trang web

Post - condition Đăng nhập thành công

Main flow: Login with google

2 Google server nhận được yêu cầu,actor chọn email

4 Google server trả về refresh -token và gửi

Copies for internal use only in Phenikaa University cho server

5 Server sau khi nhận được refresh - token, dùng refresh - token gửi lên google server để lấy authen -token

6 google server nhận được yêu cầu trả về authen - token cho server

7 Server sau khi nhận được authen - token, dùng authen - token gửi lên google server để lấy thông tin email đó

8 Google server, nhận được request từ server, sẽ trả về cho server thông tin người dùng email

9 Server nhận được thông tin google gửi về Server kiểm tra email có tồn tại trong CSDL không Nếu không gửi thông báo lỗi, nếu có gửi thông báo đăng nhập thành công, kèm thông tin token cho người dùng

Copies for internal use only in Phenikaa University

10 Người dùng nhận được thông báo từ server Nếu thông báo lỗi quay lại bước

11 Đăng nhập thành công, người dùng được redirect vào trang chủ

Bảng 2.8 Use case description của UC03

Name Forgot password Code UC03

Description Cho phép actor reset lại mật khẩu

Actor ADMIN, STUDENT, TEACHER Trigger Tại giao diện trang [Login], click button [Forgot password]

Actor yêu cầu truy cập trang web login

Copies for internal use only in Phenikaa University

1 Tại trang login, click button [forgot password]

2 Nhập email, sau đó click button [send]

3 server kiểm tra định dạng email Nếu sai định dạng trả về lỗi Nếu đúng kiểm tra có tồn tại người dùng có email gửi lên không Nếu không gửi thông báo lỗi Nếu có tạo token từ các thông tin lấy được của người dùng đó, lưu token vào CSDL, sau đó gửi email reset password kèm token đó vào mail người dùng gửi lên

5 Người dùng nhận được thông báo lỗi thì quay lại bước 1

Copies for internal use only in Phenikaa University

6 Người dùng nhận được mail reset password, click vào đường link gửi tới, và đặt lại password Sau đó click nút [send] gửi password mới kèm token nhận được lên server

7 Server nhận được yêu cầu từ client, kiểm tra password có thỏa mãn điều kiện , và kiểm tra token có trong CSDL không Nếu thỏa mãn lưu lại password mới vào CSDL và xóa token

8 Actor tiến hành đăng nhập vào hệ thống với mật khẩu vừa đặt thành công

Bảng 2.10 Business Rules của UC03

1 Các trường hợp không được thực hiện reset password

❖ Email gửi lên không đúng định dạng

❖ Email không tồn tại trong CSDL

❖ Chưa đổi password lần đầu

Copies for internal use only in Phenikaa University

Bảng 2.11 Usecase Description của UC04

Description Cho phép actor thay đổi mật khẩu

Actor ADMIN, STUDENT, TEACHER Trigger Đăng nhập lần đầu vào hệ thống / Click button [Change password]

Actor đã đăng nhập vào hệ thống

Thay đổi mật khẩu thành công

1 Nhập passwod hiện tại và password mới

2 Hệ thống kiểm tra password

3 Actor nhập lại password (Nếu có lỗi)

4 Lặp lại bước 2 cho đến khi hết lỗi Gửi

Copies for internal use only in Phenikaa University yêu cầu thay đổi password lên server

5 Kiểm tra lại dữ liệu gửi lên Nếu có lỗi sẽ trả thông báo lỗi cho

6 Hiển thị thông báo lỗi cho người dùng( nếu có lỗi) Quay lại bước

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

1 Yêu cầu xác thực người gửi request, sử dụng JWT

2 Yêu cầu ghi lại log trên server

3 Yêu cầu xử lý exception trên server

Copies for internal use only in Phenikaa University

CÔNG NGHỆ SỬ DỤNG

Ngôn ngữ Java

Java là một trong những ngôn ngữ lập trình hướng đối tượng Nó được sử dụng trong phát triển phần mềm, trang web, game hay ứng dụng trên các thiết bị di động

Java được khởi đầu bởi James Gosling và bạn đồng nghiệp ở Sun MicroSystem năm 1991 Ban đầu Java được tạo ra nhằm mục đích viết phần mềm cho các sản phẩm gia dụng, và có tên là Oak

Java được phát hành năm 1994, đến năm 2010 được Oracle mua lại từ Sun MicroSystem

Java được tạo ra với tiêu chí “Viết (code) một lần, thực thi khắp nơi” (Write Once, Run Anywhere – WORA) Chương trình phần mềm viết bằng Java có thể chạy trên mọi nền tảng (platform) khác nhau thông qua một môi trường thực thi với điều kiện có môi trường thực thi thích hợp hỗ trợ nền tảng đó

3.1.2 Đặc điểm của ngôn ngữ lập trình Java

❖ Hướng đối tượng hoàn toàn

Trong quá trình tạo ra một ngôn ngữ mới phục vụ cho mục đích chạy được trên nhiều nền tảng, các kỹ sư của Sun MicroSystem muốn tạo ra một ngôn ngữ dễ học và quen thuộc với đa số người lập trình Vì vậy họ đã sử dụng lại các cú pháp của C và C++

Tuy nhiên, trong Java thao tác với con trỏ bị lược bỏ nhằm đảo bảo tính an toàn và dễ sử dụng hơn Các thao tác overload, goto hay các cấu trúc như struct và union cũng được loại bỏ khỏi Java

❖ Độc lập phần cứng và hệ điều hành

2 Theo https://inside.java/2023/09/19/the-arrival-of-java-21/

Copies for internal use only in Phenikaa University

Một chương trình viết bằng ngôn ngữ Java có thể chạy tốt ở nhiều môi trường khác nhau Gọi là khả năng “cross-platform” Khả năng độc lập phần cứng và hệ điều hành được thể hiện ở 2 cấp độ là cấp độ mã nguồn và cấp độ nhị phân Ở cấp độ mã nguồn: Kiểu dữ liệu trong Java nhất quán cho tất cả các hệ điều hành và phần cứng khác nhau Java có riêng một bộ thư viện để hỗ trợ vấn đề này Chương trình viết bằng ngôn ngữ Java có thể biên dịch trên nhiều loại máy khác nhau mà không gặp lỗi Ở cấp độ nhị phân: Một mã biên dịch có thể chạy trên nhiều nền tảng khác nhau mà không cần dịch lại mã nguồn Tuy nhiên cần có Java Virtual Machine để thông dịch đoạn mã này

Ngôn ngữ lập trình thường được chia ra làm 2 loại (tùy theo các hiện thực hóa ngôn ngữ đó) là ngôn ngữ thông dịch và ngôn ngữ biên dịch

➢ Thông dịch (Interpreter) : Nó dịch từng lệnh rồi chạy từng lệnh, lần sau muốn chạy lại thì phải dịch lại

➢ Biên dịch (Compiler): Code sau khi được biên dịch sẽ tạo ra 1 file thường là exe, và file exe này có thể đem sử dụng lại không cần biên dịch nữa Ngôn ngữ lập trình Java thuộc loại ngôn ngữ thông dịch Chính xác hơn, Java là loại ngôn ngữ vừa biên dịch vừa thông dịch Cụ thể như sau:

Khi viết mã, hệ thống tạo ra một tệp java Khi biên dịch mã nguồn của chương trình sẽ được biên dịch ra mã byte code Máy ảo Java (Java Virtual Machine) sẽ thông dịch mã byte code này thành machine code (hay native code) khi nhận được yêu cầu chạy chương trình Ưu điểm : Phương pháp này giúp các đoạn mã viết bằng Java có thể chạy được trên nhiều nền tảng khác nhau Với điều kiện là JVM có hỗ trợ chạy trên nền tảng này

Nhược điểm : Cũng như các ngôn ngữ thông dịch khác, quá trình chạy các đoạn mã Java là chậm hơn các ngôn ngữ biên dịch khác (tuy nhiên vẫn ở trong một mức chấp nhận được)

Copies for internal use only in Phenikaa University

❖ Cơ chế thu gom rác tự động

Khi tạo ra các đối tượng trong Java, JRE sẽ tự động cấp phát không gian bộ nhớ cho các đối tượng ở trên heap

Với ngôn ngữ như C C++, bạn sẽ phải yêu cầu hủy vùng nhớ mà bạn đã cấp phát, để tránh việc thất thoát vùng nhớ Tuy nhiên vì một lý do nào đó, bạn không hủy một vài vùng nhớ, dẫn đến việc thất thoát và làm giảm hiệu năng chương trình

Ngôn ngữ lập trình Java hỗ trợ cho bạn điều đó, nghĩa là bạn không phải tự gọi hủy các vùng nhớ Bộ thu dọn rác của Java sẽ theo vết các tài nguyên đã được cấp Khi không có tham chiếu nào đến vùng nhớ, bộ thu dọn rác sẽ tiến hành thu hồi vùng nhớ đã được cấp phát

Java hỗ trợ lập trình đa tiến trình (multithread) để thực thi các công việc đồng thời Đồng thời cũng cung cấp giải pháp đồng bộ giữa các tiến trình (giải pháp sử dụng priority…)

❖ Tính an toàn và bảo mật

Ngôn ngữ lập trình Java yêu cầu chặt chẽ về kiểu dữ liệu

Dữ liệu phải được khai báo tường minh

Không sử dụng con trỏ và các phép toán với con trỏ

Java kiểm soát chặt chẽ việc truy nhập đến mảng, chuỗi Không cho phép sử dụng các kỹ thuật tràn Do đó các truy nhập sẽ không vượt quá kích thước của mảng hoặc chuỗi

Quá trình cấp phát và giải phóng bộ nhớ được thực hiện tự động

Cơ chế xử lý lỗi giúp việc xử lý và phục hồi lỗi dễ dàng hơn

Java cung cấp một môi trường quản lý chương trình với nhiều mức khác nhau

Copies for internal use only in Phenikaa University

Mức 1 : Chỉ có thể truy xuất dữ liệu cũng như phương phức thông qua giao diện mà lớp cung cấp

Mức 2 : Trình biên dịch kiểm soát các đoạn mã sao cho tuân thủ các quy tắc của ngôn ngữ lập trình Java trước khi thông dịch

Mức 3 : Trình thông dịch sẽ kiểm tra mã byte code xem các đoạn mã này có đảm bảo được các quy định, quy tắc trước khi thực thi

Mức 4: Java kiểm soát việc nạp các lớp vào bộ nhớ để giám sát việc vi phạm giới hạn truy xuất trước khi nạp vào hệ thống.

Ngôn ngữ Javascript

JavaScript là một ngôn ngữ lập trình website, được tích hợp và nhúng trong HTML giúp website sống động hơn JavaScript cho phép kiểm soát các hành vi của trang web tốt hơn so với khi chỉ sử dụng mỗi HTML

JavaScript là ngôn ngữ lập trình được hỗ trợ hầu như trên tất cả các trình duyệt như Firefox, Chrome, … thậm chí các trình duyệt trên thiết bị di động

3.2.2 Ưu và nhược điểm của Javascript

➢ Dễ phát hiện và sửa lỗi

➢ Hoạt động trên nhiều trình duyệt, nền tảng

➢ Giúp website tương tác dễ

➢ Nhanh và nhẹ hơn các ngôn ngữ lập trình khác

➢ Có thể dùng để thực thi mã độc trên máy tính của người dùng

➢ Có thể bị triển khai khác nhau tùy từng thiết bị dẫn đến việc không đồng nhất

3 Theo trang https://completejavascript.com/

Copies for internal use only in Phenikaa University

3.2.3 Cách hoạt động của Javascript

JavaScript thường được nhúng trực tiếp vào một trang web hoặc được tham chiếu qua file js riêng Nó là ngôn ngữ lập trình từ phía khách hàng, tức là script được tải về máy của người dùng đang truy cập và được xử lý tại đó, thay vì xử lý trên máy chủ rồi mới đưa kết quả tới khách hàng.

Framework Spring boot

Spring Boot là một dự án phát triển bởi JAV (ngôn ngữ java) trong hệ sinh thái Spring framework Nó giúp cho các lập trình viên chúng ta đơn giản hóa quá trình lập trình một ứng dụng với Spring, chỉ tập trung vào việc phát triển business cho ứng dụng

Một số tính năng nổi bật của Spring boot:

❖ Tạo các ứng dụng Spring độc lập

❖ Nhúng trực tiếp Tomcat, Jetty hoặc Undertow (không cần phải deploy ra file WAR)

❖ Các starter dependency giúp việc cấu hình Maven đơn giản hơn

❖ Tự động cấu hình Spring khi cần thiết

❖ Khônh sinh code cấu hình và không yêu cầu cấu hình bằng XML

Framework Reactjs

ReactJS là một thư viện JavaScript mã nguồn mở được thiết kế bởi Facebook để tạo ra những ứng dụng web hấp dẫn, nhanh và hiệu quả với mã hóa tối thiểu Mục đích cốt lõi của ReactJS không chỉ khiến cho trang web phải thật mượt mà còn phải nhanh, khả năng mở rộng cao và đơn giản

Trong React, thay vì thường xuyên sử dụng JavaScript để thiết kế bố cục trang web thì sẽ dùng JSX JSX được đánh giá là sử dụng đơn giản hơn JavaScript và cho phép trích dẫn HTML cũng như việc sử dụng các cú pháp thẻ

4 Theo trang https://spring.io/projects/spring-boot

5 Theo trang https://react.dev/learn

Copies for internal use only in Phenikaa University

HTML để render các subcomponent JSX tối ưu hóa code khi biên soạn, vì vậy nó chạy nhanh hơn so với code JavaScript tương đương

ReactJS không có những module chuyên dụng để xử lý data, vì vậy ReactJS chia nhỏ view thành các component nhỏ có mỗi quan hệ chặt chẽ với nhau Tại sao chúng ta phải quan tâm tới cấu trúc và mối quan hệ giữa các component trong ReactJS? Câu trả lời chính là luồng truyền dữ liệu trong ReactJS: Luồng dữ liệu một chiều từ cha xuống con Việc ReactJS sử dụng one-way data flow có thể gây ra một chút khó khăn cho những người muốn tìm hiểu và ứng dụng vào trong các dự án Tuy nhiên, cơ chế này sẽ phát huy được ưu điểm của mình khi cấu trúc cũng như chức năng của view trở nên phức tạp thì ReactJS sẽ phát huy được vai trò của mình

Những Framework sử dụng Virtual-DOM như ReactJS khi Virtual-DOM thay đổi, chúng ta không cần thao tác trực tiếp với DOM trên View mà vẫn phản ánh được sự thay đổi đó Do Virtual-DOM vừa đóng vai trò là Model, vừa đóng vai trò là View nên mọi sự thay đổi trên Model đã kéo theo sự thay đổi trên View và ngược lại Có nghĩa là mặc dù chúng ta không tác động trực tiếp vào các phần tử DOM ở View nhưng vẫn thực hiện được cơ chế Data-binding Điều này làm cho tốc độ ứng dụng tăng lên đáng kể – môt lợi thế không thể tuyệt vời hơn khi sử dụng Virtula-DOM.

Framework Bootstrap

Bootstrap là 1 framework HTML, CSS, và JavaScript cho phép người dùng dễ dàng thiết kế website theo 1 chuẩn nhất định, tạo các website thân thiện với các thiết bị cầm tay như mobile, ipad, tablet,…

Bootstrap bao gồm những cái cơ bản có sẵn như: typography, forms, buttons, tables, navigation, modals, image carousels và nhiều thứ khác Trong bootstrap

6 Theo trang https://react-bootstrap.netlify.app

Copies for internal use only in Phenikaa University có thêm nhiều Component, Javascript hỗ trợ cho việc thiết kế reponsive của bạn dễ dàng, thuận tiện và nhanh chóng hơn

3.5.2 Tại sao nên sử dụng Bootstrap

Bootstrap là một trong những framework được sử dụng nhiều nhất trên thế giới để xây dựng nên một website Bootstrap đã xây dựng nên 1 chuẩn riêng và rất được người dùng ưa chuộng Chính vì thế, chúng ta hay nghe tới một cụm từ rất thông dụng "Thiết kế theo chuẩn Bootstrap"

Từ cái "chuẩn mực" này, chúng ta có thể thấy rõ được những điểm thuận lợi khi sử dụng Bootstrap

❖ Rất dễ để sử dụng: Nó đơn giản vì nó được base trên HTML, CSS và Javascript chỉ cẩn có kiến thức cơ bản về 3 cái đó là có thể sử dụng bootstrap tốt

❖ Responsive: Bootstrap xây dựng sẵn reponsive css trên các thiết bị Iphones, tablets, và desktops Tính năng này khiến cho người dùng tiết kiệm được rất nhiều thời gian trong việc tạo ra một website thân thiện với các thiết bị điện tử, thiết bị cầm tay

❖ Tương thích với trình duyệt: Nó tương thích với tất cả các trình duyệt (Chrome, Firefox, Internet Explorer, Safari, and Opera) Tuy nhiên, với IE browser, Bootstrap chỉ hỗ trợ từ IE9 trở lên Điều này vô cùng dễ hiểu vì IE8 không support HTML5 và CSS3

Copies for internal use only in Phenikaa University

PHÁT TRIỂN VÀ TRIỂN KHAI ỨNG DỤNG

Thiết kế kiến trúc

Lựa chọn kiến trúc phần mềm

Kiến trúc sử dụng trong dự án là 3 layer architecture (mô hình 3 lớp)

Mô hình 3 lớp ra đời nhằm phân chia các thành phần trong hệ thống, các thành phần cùng chức năng sẽ được nhóm lại với nhau và phân chia công việc cho từng nhóm để dữ liệu không bị chồng chéo và chạy lộn xộn

Mô hình 3 lớp có cấu trúc như hình vẽ dưới đây:

Mô hình 3 lớp gồm 3 thành phần chính:

❖ Lớp này có nhiệm vụ chính là giao tiếp với người dùng Nó gồm các thành phần giao diện ( winform, webform, …) và thực hiện các công việc như nhập liệu, hiển thị dữ liệu, kiểm tra tính đúng đắn dữ liệu trước khi gọi lớp Business Logic Layer (BLL)

2 Business Logic Layer (BLL): Lớp này phân ra 2 thành nhiệm vụ:

❖ Đây là nơi đáp ứng các yêu cầu thao tác dữ liệu của GUI layer, xử lý chính nguồn dữ liệu từ Presentation Layer trước khi truyền xuống Data Access Layer và lưu xuống hệ quản trị CSDL

Copies for internal use only in Phenikaa University

❖ Đây còn là nơi kiểm tra các ràng buộc, tính toàn vẹn và hợp lệ dữ liệu, thực hiện tính toán và xử lý các yêu cầu nghiệp vụ, trước khi trả kết quả về Presentation Layer

❖ Lớp này có chức năng giao tiếp với hệ quản trị CSDL như thực hiện các công việc liên quan đến lưu trữ và truy vấn dữ liệu ( tìm kiếm, thêm, xóa, sửa,…).

Thiết kế chi tiết

❖ Thân thiện với người dùng: Đẹp, màu sắc hài hòa, dễ thao tác, các nút và kết nối dễ nhận biết, font và kích cỡ chữ dễ đọc

❖ Giao diện đơn giản nhưng vẫn bắt mắt người xem, cách sử dụng đơn giản

❖ Sắp xếp biểu tượng, vị trí các chức năng hợp lý, quen mắt với người dùng Không dùng những biểu tượng quá khó hiểu

❖ Màu sắc trong giao diện hài hòa, tăng cảm giác dễ chịu cho người dùng Không dùng những tone màu quá nóng hoặc quá chói

❖ Nội dung ngắn gọn, súc tích, từ ngữ chính xác, không gây hiểu nhầm

Dưới đây là một số hình ảnh minh họa cho một số chức năng quan trọng

Copies for internal use only in Phenikaa University

Hình 4.3 Giao diện Manage question

Copies for internal use only in Phenikaa University

Hình 4.4 Giao diện Add user

Copies for internal use only in Phenikaa University

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

Hình 4.5 Cơ sở dữ liệu

CSDL được thiết kế gồm 10 bảng như trên Hình 4.5: user, exam, class, note, post, questions, comment, question_assign_exam, user_assignment, result_exam

Copies for internal use only in Phenikaa University

Tên cột Kiểu dữ liệu Chú thích id String MD5(“UE”+STT+ “”+1 số Random) created_by String Id người tạo bản ghi mới created_date DateTime Ngày tạo bản ghi mới updated_by String Id người thực hiện cập nhật bản ghi updated_date DateTime Ngày cập nhật bản ghi avatar Varchar(100) Lưu đường dẫn dẫn tới hình đại diện người dùng tải lên dob Date Ngày sinh người dùng email Varchar(255) Email người dùng is_first_login Bit(1) Trạng thái kiểm tra xem người dùng đã login lần đầu vào hệ thống chưa

- Nếu giá trị là 0: Đã login lần đầu vào hệ thống

- Nếu giá trị là 1: Chưa login lần nào vào hệ thống

- Các giá trị khác: Không hợp lệ

Copies for internal use only in Phenikaa University first_name Varchar(255) gender Varchar(50) Giới tính của người dùng

- ‘FEMALE’: Nữ is_deleted Bit(1) Đánh dấu người dùng này bị vô hiệu hóa khỏi hệ thống

Chấp nhận 2 giá trị như sau:

- 0: Người dùng chưa bị xóa khỏi hệ thống

- 1: Người dùng đã bị xóa khỏi hệ thống last_name Varchar(255) password Varchar(255) Mật khẩu để login vào hệ thống phone Varchar(255) role Varchar(255) Vai trò người dùng trong hệ thống Chấp nhận 3 giá trị sau:

- ‘ADMIN’: Admin của hệ thống

- ‘TEACHER’: Người mang vai trò teacher

Copies for internal use only in Phenikaa University trong hệ thống

- ‘STUDENT’: Người mang vai trò student trong hệ thống token Varchar(1000) Lưu token client gửi lên trong chức năng reset mật khẩu

Tên cột Kiểu dữ liệu Chú thích id String MD5(“EX”+STT+ “”+1 số Random) created_by String created_date DateTime updated_by String updated_date DateTime finish_date Date Ngày kết thúc bài bài kiểm tra (Ngày kết thúc phải phải sau ngày bắt đầu) level Integer

Copies for internal use only in Phenikaa University name Varchar(255) Tên bài kiểm tra started_date Date Ngày bắt đầu đầu bài kiểm tra (Phải trước ngày kết thúc) time Integer Thời gian làm bài kiểm tra class_id String id class nơi có bài kiểm tra

Tên cột Kiểu dữ liệu Chú thích id String MD5(“CS”+STT+ “”+1 số Random) created_by String created_date DateTime update_by String update_date DateTime close_date Date Ngày khóa lớp học (Phải sau ngày mở lớp học) level Varchar(255) Trình độ lớp học Chấp nhận 5 giá trị:

Copies for internal use only in Phenikaa University

- N1: Lớp học luyện thi JLPT trình trình độ N1

- N2: Lớp học luyện thi JLPT trình trình độ N2

- N3: Lớp học luyện thi JLPT trình trình độ N3

- N4: Lớp học luyện thi JLPT trình trình độ N4

- N5: Lớp học luyện thi JLPT trình trình độ N5 name Varchar(255) Tên lớp học note Varchar(1000) open_date Date Ngày mở lớp học (Phải trước ngày đóng lớp học)

Tên cột Kiểu dữ liệu Chú thích id String MD5(“NE”+STT+ “”+1 số Random) created_by String created_date DateTime update_by String

Copies for internal use only in Phenikaa University update_date DateTime content LongText Nội dung ghi chú name Varchar(255) Tên gợi nhớ ghi chú

Tên cột Kiểu dữ liệu Chú thích id String MD5(“PO”+STT+ “”+1 số Random) created_by String created_date DateTime update_by String update_date DateTime content LongText Nội dung bài đăng title Varchar(255) Tiêu đề bài đăng class_id String Id lớp học nơi chứa bài đăng

Copies for internal use only in Phenikaa University

Tên cột Kiểu dữ liệu Chú thích id String MD5(“QE”+STT+ “”+1 số Random) created_by String created_date DateTime update_by String update_date DateTime answer Varchar(255) Đáp án Chấp nhận 4 giá trị sau:

- OPTION1: Đáp án là lựa chọn 1

- OPTION2: Đáp án là lựa chọn 2

- OPTION3: Đáp án là lựa chọn 3

- OPTION4: Đáp án là lựa chọn 4 explains LongText Giải thích file Varchar(255) Đường dẫn file nghe nếu topic có giá trị là

Copies for internal use only in Phenikaa University level Varchar(255) Mức độ câu hỏi Chấp nhận 5 mức độ: N1, N2, N3, N4, N5 option_one LongText Nội dung lựa chọn 1 option_two LongText Nội Dung lựa chọn 2 option_three LongText Nội Dung lựa chọn 3 option_four LongText Nội Dung lựa chọn 4 question_name LongText Câu hỏi topic Varchar(255) Chủ đề câu hỏi Chấp nhận 4 giá trị sau:

- GOI: Câu hỏi từ vựng

- BUNBOU: Câu hỏi ngữ pháp

- DOKKAI: Câu hỏi đọc hiểu

Tên cột Kiểu dữ liệu Chú thích id String MD5(“CM”+STT+ “”+1 số Random) created_by String created_date DateTime

Copies for internal use only in Phenikaa University update_by String update_date DateTime content LongText replied_comment String post_id String

Là bảng trung gian nối giữa hai hai bảng questions và exam

Bảng 4.8 bảng question_assign_exam

Tên cột Kiểu dữ liệu Chú thích id String MD5(“QAE”+STT+

“”+1 số Random) created_by String created_date DateTime update_by String update_date DateTime

Copies for internal use only in Phenikaa University core Integer exam_id String question_id String

Tên cột Kiểu dữ liệu Chú thích id String MD5(“UAE”+STT+

“”+1 số Random) created_by String created_date DateTime update_by String update_date DateTime status Varchar(255) Trạng thái người dùng trong lớp học Chấp nhận các giá trị sau:

- INVITED: Đã được admin gửi lời mời tham gia lớp học

Copies for internal use only in Phenikaa University nhận lời mời của admin tham gia lớp học

- REJECT: Từ chối lời mời của admin tham gia lớp học

- FINISH: Hoàn thành lớp học class_id String user_id String

Tên cột Kiểu dữ liệu Chú thích id String MD5(“RE”+STT+ “”+1 số Random) created_by String created_date DateTime update_by String update_date DateTime question_false Varchar(255) Danh sách id các câu hỏi người dùng trả lời sai

Copies for internal use only in Phenikaa University được ngăn cách với nhau bằng dấu phẩy

Ví dụ: ‘1,2,3’ question_true Varchar(255) Danh sách id các câu hỏi người dùng trả lời đúng được ngăn cách với nhau bằng dấu phẩy

Ví dụ: ‘1,2,3’ result Integer Điểm số bài kiểm tra started_date Date Ngày người dùng bắt đầu làm bài kiểm tra time Integer Thời gian thực tế người dùng làm exam_id String student_id String

Xây dựng ứng dụng

4.3.1 Thư viện và công cụ sử dụng

Bảng 4.11 Bảng thư viện và công cụ sử dụng

Mục đích Công cụ Địa chỉ URL

IDE lập trình Visual studio https://code.visualstudio. com/

IDE lập trình Intellji IDEA https://www.jetbrains.co m/idea/

Lưu dữ liệu My SQL https://www.mysql.com/

Copies for internal use only in Phenikaa University

Test API Postman https://www.postman.co m/

Sản phẩm chính của dự án là Website có tên “JLPT - Test” Website được xây dựng với mục đích giúp sinh viên học tiếng Nhật của trường Phenikaa có địa chỉ uy tín để luyện thi JLPT

❖ Mô tả: Website JLPT - Test, giúp sinh viên Phenikaa có thể luyện tập kiến thức thông qua bộ câu hỏi, giúp giáo viên quản lý tình hình học tập của sinh viên

❖ Một số tính năng chính:

➢ Quản lý các bài kiểm tra

➢ Luyện tập câu hỏi theo chủ đề

➢ Xem kết quả kiểm tra

➢ Xem thống kêt quả các bài kiểm tra

❖ Công nghệ sử dụng chủ yếu: Spring boot, Reactjs,

❖ Thời gian phát triển: 4 tháng

Dung lượng mã nguồn Backend: 977KB

Công nghệ sử dụng Spring boot, Reactjs

Copies for internal use only in Phenikaa University

4.3.3 Minh hoạ các chức năng chính

1 Màn hình cho chức năng Login

❖ Mô tả: Màn hình cho phép người dùng thực hiện chức năng đăng nhập hoặc đăng nhập bằng google hoặc reset mật khẩu

❖ Chú thích: Ô đăng nhập, cùng với các lựa chọn [Login with google] và

Hình 4.6 Màn hình chức năng Login

2 Màn hình cho chức năng Manage user

❖ Mô tả: Màn hình cho phép người dùng quản lý thông tin người dùng trong hệ thống

❖ Chú thích: table hiển thị danh sách người dùng, phân trang, các button

[Add user], [import file], [export file], thanh search bar

Copies for internal use only in Phenikaa University

Hình 4.7 Màn hình Manage user

3 Màn hình cho chức năng Manage Question

❖ Mô tả: Màn hình cho phép người dùng quản lý các câu hỏi trong hệ thống

❖ Chú thích: table hiển thị danh sách người dùng, phân trang, các button [Add question], [export file], thanh search bar

Hình 4.8 Màn hình Manage questions

4 Màn hình cho chức năng Add user

❖ Mô tả: Màn hình cho phép thực hiện chức năng thêm người dùng

Copies for internal use only in Phenikaa University

❖ Chú thích: Form nhập dữ liệu, các button [Save] và [Cancel]

Hình 4.9 Màn hình Add user

Kiểm thử

Bảng 4.13 Bảng kiểm thử chức năng Login

Truy cập đường dẫn [localhost:3000/login]

2 Hiển Thị form Login, button submit, button [forgot password], button [Login with google]

3 Kiểm tra dữ 1.Truy cập vào trang Báo lỗi sai email: Passed

Copies for internal use only in Phenikaa University liệu login

2 Nhập dữ liệu vào trường email định dạng email abc

4 1.Truy cập vào trang login

2 Nhập dữ liệu vào trường email

Không có hiện tượng gì xảy ra email: abc@ gmail. com

5 1.Truy cập vào trang login

2 Nhập dữ liệu vào trường email, password

(Do password có độ dài tối thiểu 8 ký tự) email: a@g mail.c om passw ord:

6 1.Truy cập vào trang login

2 Nhập dữ liệu vào trường email, password

Báo lỗi password (Do password phải chứa ít nhất 1 ký tự in hoa và 1 ký tự đặc biệt) email: a@g mail.c om passw ord: abc12

7 1.Truy cập vào trang login

2 Nhập dữ liệu vào trường email, password

Báo lỗi password (Do phải chứa ít nhất

1 ký tự đặc email: a@g mail.c om passw

Copies for internal use only in Phenikaa University biệt) ord:

8 1.Truy cập vào trang login

2 Nhập dữ liệu vào trường email, password

Không có lỗi hiển thị email: a@g mail.c om passw ord:

9 1.Truy cập vào trang login

2 Nhập dữ liệu vào trường email, password

Báo lỗi [Username or Password wrong]

Email : a@g mail.c om Passw ord:

10 Hiển thị thông báo đăng nhập thành công

@gm ail.co m Passw ord:

Copies for internal use only in Phenikaa University

4.4.2 Chức năng Manage user Điều kiện: Đã đăng nhập vào hệ thống với vai trò Admin

Bảng 4.14 Bảng kiểm thử chức năng Manage user

Tại thanh menu bên phải màn hình, click button [Manage user]

Hiển thị giao diện trang

2 Hiển thị table dữ liệu gồm các trường dữ liệu: email, role, action

Tại trường action, hiển thị các button sau:

Bên cạnh đó, hiển thị thanh search bar, button import file, button export file, button add user

Copies for internal use only in Phenikaa University

1.Truy cập vào trang [Manage user]

2 Nhập ký tự bất kỳ vào thanh search bar

Dữ liệu trong bảng đổ ra với email chứa ký tự được nhập từ search bar

1.Truy cập vào trang [Manage user]

2 Chọn số lượng hiển thị trên page

1 có 10 phần tử, page 2 có 5 phần tử

Tổng số phần tử: 15 Chọn

5 Kiểm tra kết hợp search bar và phân trang

1.Truy cập vào trang [Manage user]

2 Nhập ký tự bất kỳ vào thanh search bar

4 Chọn lại số lượng phần tử trên page

Hiển thị đúng số lượng page, phần

Search bar: abc chọn số lượng

Copies for internal use only in Phenikaa University

Bảng 4.15 Bảng kiểm thử chức năng Add user

Tại thanh menu bên phải màn hình, click button [Manage user], sau đó click button [Add user]

Hiển thị giao diện trang Add user

2 Hiển thị form nhập dữ liệu

1.Truy cập vào trang [Add user]

2 Không nhập dữ liệu trường email

2.Nhập sai định dạng dữ liệu trường email

Thông báo lỗi email: abc

2.Nhập đúng định dạng dữ liệu trường email

Người dùng có role mặc định là TEACHER

Hiển thị thông báo lỗi email đã email: admin

Copies for internal use only in Phenikaa University dữ liệu trường email, và email đã tồn tại trong hệ thống

4 Click submit tồn tại l.com

2.Nhập đúng định dạng dữ liệu trường email, và email chưa từng tồn tại trong hệ thống

Hiển thị thông báo thêm thành công, redirect về trang

Kiểm tra email vừa đăng ký, nhận được email thông báo tài khoản email:

@st.ph enikaa- uunied u.vn

Copies for internal use only in Phenikaa University

Ngày đăng: 17/07/2024, 10:42

HÌNH ẢNH LIÊN QUAN

Hình 2.1 Biểu đồ US tổng quan - xây dựng nền tảng web luyện thi jlpt ứng dụng trong dạy và học tiếng nhật
Hình 2.1 Biểu đồ US tổng quan (Trang 23)
Hình 2.2 Biểu đồ US tổng quan - xây dựng nền tảng web luyện thi jlpt ứng dụng trong dạy và học tiếng nhật
Hình 2.2 Biểu đồ US tổng quan (Trang 26)
Hình 2.3 Biểu đồ US tổng quan - xây dựng nền tảng web luyện thi jlpt ứng dụng trong dạy và học tiếng nhật
Hình 2.3 Biểu đồ US tổng quan (Trang 28)
Hình 2.4 US – Role TEACHER - xây dựng nền tảng web luyện thi jlpt ứng dụng trong dạy và học tiếng nhật
Hình 2.4 US – Role TEACHER (Trang 30)
Hình 2.5 US – Role STUDENT - xây dựng nền tảng web luyện thi jlpt ứng dụng trong dạy và học tiếng nhật
Hình 2.5 US – Role STUDENT (Trang 32)
Bảng 2.5 Business Rules của UC01 - xây dựng nền tảng web luyện thi jlpt ứng dụng trong dạy và học tiếng nhật
Bảng 2.5 Business Rules của UC01 (Trang 34)
Bảng 2.6 Usecase Description của UC02 - xây dựng nền tảng web luyện thi jlpt ứng dụng trong dạy và học tiếng nhật
Bảng 2.6 Usecase Description của UC02 (Trang 35)
Bảng 2.8 Use case description của UC03 - xây dựng nền tảng web luyện thi jlpt ứng dụng trong dạy và học tiếng nhật
Bảng 2.8 Use case description của UC03 (Trang 37)
Bảng 2.10 Business Rules của UC03 - xây dựng nền tảng web luyện thi jlpt ứng dụng trong dạy và học tiếng nhật
Bảng 2.10 Business Rules của UC03 (Trang 39)
Bảng 2.11 Usecase Description của UC04 - xây dựng nền tảng web luyện thi jlpt ứng dụng trong dạy và học tiếng nhật
Bảng 2.11 Usecase Description của UC04 (Trang 40)
Bảng 2.13 Business Rules của UC04 - xây dựng nền tảng web luyện thi jlpt ứng dụng trong dạy và học tiếng nhật
Bảng 2.13 Business Rules của UC04 (Trang 42)
Bảng 2.17 Usecase Description của UC06 - xây dựng nền tảng web luyện thi jlpt ứng dụng trong dạy và học tiếng nhật
Bảng 2.17 Usecase Description của UC06 (Trang 44)
Bảng 2.19 Business Rules của UC06 - xây dựng nền tảng web luyện thi jlpt ứng dụng trong dạy và học tiếng nhật
Bảng 2.19 Business Rules của UC06 (Trang 46)
Bảng 2.20 Usecase Description của UC08 - xây dựng nền tảng web luyện thi jlpt ứng dụng trong dạy và học tiếng nhật
Bảng 2.20 Usecase Description của UC08 (Trang 47)
Bảng 2.22 Business Rules của UC08 - xây dựng nền tảng web luyện thi jlpt ứng dụng trong dạy và học tiếng nhật
Bảng 2.22 Business Rules của UC08 (Trang 49)
Bảng 2.23 Usecase Description của UC10 - xây dựng nền tảng web luyện thi jlpt ứng dụng trong dạy và học tiếng nhật
Bảng 2.23 Usecase Description của UC10 (Trang 50)
Bảng 2.25 Businuess rules của UC10 - xây dựng nền tảng web luyện thi jlpt ứng dụng trong dạy và học tiếng nhật
Bảng 2.25 Businuess rules của UC10 (Trang 52)
Bảng 2.27 Activities của UC12 - xây dựng nền tảng web luyện thi jlpt ứng dụng trong dạy và học tiếng nhật
Bảng 2.27 Activities của UC12 (Trang 53)
Bảng 2.28 Business Rules của UC12 - xây dựng nền tảng web luyện thi jlpt ứng dụng trong dạy và học tiếng nhật
Bảng 2.28 Business Rules của UC12 (Trang 54)
Hình 4.2 Giao diện Login - xây dựng nền tảng web luyện thi jlpt ứng dụng trong dạy và học tiếng nhật
Hình 4.2 Giao diện Login (Trang 65)
Hình 4.5 Cơ sở dữ liệu - xây dựng nền tảng web luyện thi jlpt ứng dụng trong dạy và học tiếng nhật
Hình 4.5 Cơ sở dữ liệu (Trang 67)
Bảng 4.3 Bảng class - xây dựng nền tảng web luyện thi jlpt ứng dụng trong dạy và học tiếng nhật
Bảng 4.3 Bảng class (Trang 71)
4. Bảng note - xây dựng nền tảng web luyện thi jlpt ứng dụng trong dạy và học tiếng nhật
4. Bảng note (Trang 72)
Bảng 4.5 Bảng post - xây dựng nền tảng web luyện thi jlpt ứng dụng trong dạy và học tiếng nhật
Bảng 4.5 Bảng post (Trang 73)
8. Bảng question_assign_exam - xây dựng nền tảng web luyện thi jlpt ứng dụng trong dạy và học tiếng nhật
8. Bảng question_assign_exam (Trang 76)
Bảng 4.8 bảng question_assign_exam - xây dựng nền tảng web luyện thi jlpt ứng dụng trong dạy và học tiếng nhật
Bảng 4.8 bảng question_assign_exam (Trang 76)
10. Bảng result_exam - xây dựng nền tảng web luyện thi jlpt ứng dụng trong dạy và học tiếng nhật
10. Bảng result_exam (Trang 78)
Hình 4.6 Màn hình chức năng Login - xây dựng nền tảng web luyện thi jlpt ứng dụng trong dạy và học tiếng nhật
Hình 4.6 Màn hình chức năng Login (Trang 81)
Hình 4.7 Màn hình Manage user - xây dựng nền tảng web luyện thi jlpt ứng dụng trong dạy và học tiếng nhật
Hình 4.7 Màn hình Manage user (Trang 82)
Hình 4.9 Màn hình Add user - xây dựng nền tảng web luyện thi jlpt ứng dụng trong dạy và học tiếng nhật
Hình 4.9 Màn hình Add user (Trang 83)

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

TÀI LIỆU LIÊN QUAN

w