Xây dựng website học lập trình bằng spring boot docker, nodejs, reactjs

Mô tả chi tiết use case bình luận bài viết của người dùng khác.. Hiểu và nắm bắt được tình hình chung của mọi người, cũng như xu hướng của thế giới đã đưa mọi thứ offline thành online th

Trang 1

Mục lục

GIỚI THIỆU ĐỀ TÀI 1

1 TÍNH CẤP THIẾT CỦA ĐỀ TÀI 1

2 MỤC TIÊU CỦA ĐỀ TÀI 1

3 CÁCH TIẾP CẬN VÀ PHƯƠNG PHÁP NGHIÊN CỨU 1

3.1 Đối tượng nghiên cứu 1

3.2 Phạm vi nghiên cứu 2

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

6 KẾT CẤU CỦA ĐỀ TÀI 3

PHẦN NỘI DUNG 4

CHƯƠNG 1: CƠ SỞ LÝ THUYẾT 4

1 TỔNG QUAN VỀ DOCKER 4

2 TỔNG QUAN VỀ MONGODB VÀ NOSQL 7

3 TỔNG QUAN VỀ SPRING FRAMEWORD 8

4 TỔNG QUAN VỀ REACTJS 10

CHƯƠNG 2: KHẢO SÁT HIỆN TRẠNG VÀ XÁC ĐỊNH YÊU CẦU 12

1 KHẢO SÁT HIỆN TRẠNG 12

2 PHÂN TÍCH YÊU CẦU 18

CHƯƠNG 3: MÔ HÌNH HÓA YÊU CẦU VÀ THIẾT KẾ CSDL 20

1 LƯỢC ĐỒ USECASE 20

2 PHÂN TÍCH CHỨC NĂNG, THIẾT KẾ CƠ SỞ DỮ LIỆU 36

3 THIẾT KẾ HỆ THỐNG 55

CHƯƠNG 4: THIẾT KẾ GIAO DIỆN VÀ XỬ LÝ 60

1 DANH SÁCH GIAO DIỆN NGƯỜI DÙNG 60

2 DANH SÁCH GIAO DIỆN ADMIN 69

CHƯƠNG 5: CÀI ĐẶT VÀ KIỂM THỬ 73

1 CÀI ĐẶT 73

2 KIỂM THỬ 77

PHẦN KẾT LUẬN 80

1 NHỮNG KẾT QUẢ ĐẠT ĐƯỢC 80

2 KHÓ KHĂN 80

3 ƯU ĐIỂM 80

4 HẠN CHẾ 81

DANH MỤC TÀI LIỆU THAM KHẢO 81

Trang 2

Danh mục hình ảnh

Hình 1 Giao diện học trang w3schools.com 12

Hình 2 Danh sách khóa học trang w3schools.com

Hình 3 Giao diện làm bài kiểm tra của w3schools.com 13

Hình 4 Giao diện làm bài của trang codewars.com 14

Hình 5 Danh sách khóa học trang codewars.com 15

Hình 6 Giao diện thảo luận trang codewars.com 15

Hình 7 Danh sách ngôn ngữ lập trình trang hackerank.com 16

Hình 8 Danh sách khóa học trang hackerank.com 16

Hình 9 Danh sách bài học trong hackerank.com 17

Hình 10 Giao diện làm bài rang hackerank.com 17

Hình 11 Giao diện thử thách trang hackerank.com 18

Hình 12 Lược đồ user case tổng quan 20

Hình 13 Lược đồ chi tiết use case học lập trình 21

Hình 14 Lược đồ chi tiết use case tham gia forum 21

Hình 15 Lược đồ chi tiết use case quản lý thông tin cá nhân 22

Hình 16 Lược đồ use case chi tiết chức năng đóng góp cáu hỏi 23

Hình 17 Lược đồ chi tiết chức năng quản lý khóa học 24

Hình 18 Lược đồ chi tiế chức năng quản lý thử thách 24

Hình 19 Lược đồ chi tiết chức năng quản lý user 25

Hình 20 Sơ đồ luồng dữ liệu xem danh sách bài học 36

Hình 21 Thiế kế cơ sở dữ liệu xem danh sách bài học 37

Hình 22 Sơ đồ luồng dữ liệu gửi và xem kết quả thực hành 37

Hình 23 Thiết kế cơ sở dữ liệu gửi và xem kết quả thực hành 39

Hình 24 Sơ đồ luồng dữ liệu kiểm tra compile 39

Hình 25 Sơ đồ luồng dữ liệu thảo luận khi làm bài thực hành 40

Hình 26 Thiết kế cơ sở dữ liệu chức năng thảo luận làm bài 41

Hình 27 Sơ đồ luồng dữ liệu xem danh sách bài viết tại forum 42

Hình 28 Sơ đồ luồng dữ liệu tạo và chỉnh sửa bài viết trong forum 42

Hình 29 Thiết kế cơ sở dữ liệu tạo bài viết và chỉnh sửa bài viết trong forum 44

Hình 30 Sơ đồ luồng dữ liệu bình luận bài viết của người dùng 44

Hình 31 Thiết kế cơ sở dữ liệu bình luận bài viết của người dùng 45

Hình 32 Sơ đô luồng dữ liệu trả lời bình luận của người dùng khác 46

Hình 33 Sơ đồ luồng dữ liệu bình chọn bình luận lên đầu bài viết 47

Hình 34 Sơ đồ luồng dữ liệu đóng góp và chỉnh sửa cấu hỏi 48

Hình 35 Sơ đồ luồng dữ liệu phê duyệt câu hỏi đóng góp 49

Trang 3

Hình 36 Sơ đồ luồng dữ liệu thêm khóa học 50

Hình 37 Thiết kế cơ sở dữ liệu thêm khóa học 51

Hình 38 Sơ đồ luồng dữ liệu xóa khóa học 51

Hình 39 Sơ đồ luồng dữ liệu thêm thử thách 52

Hình 40 Thiết kế cơ sở dữ liệu thêm thử thách 53

Hình 41 Sơ đồ luồng dữ liệu xóa thử thách 53

Hình 42 Lược đồ lớp server quản lý 55

Hình 43 Lược đồ lớp server compile code 56

Hình 44 Giao diện trang chủ 60

Hình 45 Giao diện forum 61

Hình 46 Giao diện mô tả chi tiết topic 62

Hình 47 Giao diện thêm topic 64

Hình 48 Giao diện gửi bình luận 65

Hình 49 Giao diện trang web học 66

Hình 50 Giao diện trang web học 2 66

Hình 51 Giao diện trang web học 3 67

Hình 52 Giao diện làm bài 68

Hình 53 Giao diện chỉnh sửa thông tin cá nhân 69

Hình 54 Giao diện quản lý khóa học 70

Hình 55 Giao diện quản lý bài học 71

Hình 56 Giao diện quản ls thử thách 72

Hình 57 Import dự án và chạy bằng eclipse (1) 75

Hình 58 Import dự án và chạy bằng eclipse (2) 76

Hình 59 Danh sách test case 80

Danh mục bảng biểu

Bảng 2 Mô tả chi tiết use case đăng xuất 26

Bảng 3 Mô tả chi tiết use case đổi mật khẩu 26

Bảng 4 Mô tả chi tiết use case xem danh sách các bài luyện 26

Bảng 5 Mô tả chi tiết use case xem danh sách các bài luyện 27

Bảng 6 Mô tả chi tiết use case xem danh sách các bài luyện thuật toán 27

Bảng 7 Mô tả chi tiết use case tìm kiếm bài thực hành 27

Bảng 8 Mô tả chi tiết use case xem chi tiết các bài lý thuyết 28

Bảng 9 Mô tả chi tiết use case gửi và xem kết quả của bài thực hành 28

Trang 4

Bảng 10 Kiểm tra cú pháp của bài thực hành 28

Bảng 11 Mô tả chi tiết use case xem thảo luận của câu hỏi thực hành 29

Bảng 12 Mô tả chi tiết use case xem danh sách bài viết tại forum 29

Bảng 13 Mô tả chi tiết use case bình luận bài viết của người dùng khác 30

Bảng 14 Trả lời bình luận của người khác 30

Bảng 15 Mô tả chi tiết use case bình chọn bình luận lên top 31

Bảng 16 Mô tả chi tiết use case xem thông cá nhân 31

Bảng 17 Mô tả chi tiết use case chỉnh sửa thông tin cá nhân 31

Bảng 18 Mô tả chi tiết use case xem lại lịch sử làm bài 32

Bảng 19 Mô tả chi tiết use case đóng góp thêm câu hỏi 32

Bảng 20 Mô tả chi tiết use case chỉnh sửa câu hỏi đã đóng góp 33

Bảng 21 Mô tả chi tiết use case phê duyệ câu hỏi đóng góp 33

Bảng 22 Mô tả chi tiết use case thêm khóa học 33

Bảng 23 Mô tả chi tiết use case xóa khóa học 34

Bảng 24 Chỉnh sửa khóa học 34

Bảng 25 Mô tả chi tiết use case thêm thử thách 35

Bảng 26 Mô tả chi tiết use case xóa thử thách 35

Bảng 27 Mô tả chi tiết use case chỉnh sửa thử thách 36

Bảng 28 Mô tả chi tiết use case quản lý người dùng 36

Bảng 29 Mô tả chi tiết giao diện trang chủ 61

Bảng 30 Mô tả chi tiết giao diện forum 62

Bảng 31 Mô tả chi tiết giao diện topic 63

Bảng 32 Mô tả chi tiết giao diện topic 65

Bảng 33 Mô tả chi tiết giao diện bình luận 65

Bảng 34 Mô tả chi tiết giao diện học 67

Bảng 35 Mô tả chi tiết giao diện làm bài 68

Bảng 36 Mô tả chi tiết giao diện thông tin người dùng 69

Bảng 37 Mô tả chi tiết giao diện quản lý khóa học 70

Bảng 38 Mô tả chi tiết giao diện quản lý bài học 72

Bảng 39 Mô tả chi tiết giao diện thử thách 73

Trang 5

GIỚI THIỆU ĐỀ TÀI

1 TÍNH CẤP THIẾT CỦA ĐỀ TÀI

Ngày nay việc tiếp thu kiến thức và luôn trao dồi cho mình những kỹ năng mới để bắt kịp với xu hướng hiện đại là một trong những điều mà ai trong chúng ta, những người muốn phát triển lâu dài đều phải làm liên tục Đặc biệt là trong nghành công nghiệp chất xám (Công nghệ thông tin) này thì chúng ta luôn phải chủ động để học những công nghệ mới, công cụ mới, và nhiều kiến thức khác nữa… để có thể áp dụng vào thực tiễn cho các dự án đời sống một cách tối ưu nhất

Tuy nhiên để học được những kiến thức mới này đối với nhiều bạn thực sự rất khó khăn, bởi vì không phải ai cũng đủ điều kiện để đến trường lớp học được, bởi nhiều lý do khác nhau như là không có thời gian đến lớp sau một ngày đi làm mệt mỏi, hay là các bạn có gia cảnh khó khăn thì việc đến trường để học những kiến thức công nghệ được xem là điều gì đó quá xa vời

Hiểu và nắm bắt được tình hình chung của mọi người, cũng như xu hướng của thế giới

đã đưa mọi thứ offline thành online thì hôm nay nhóm em đã quyết định làm ra một website giúp mọi người có thể lên học và trao dồi kinh nghiệm về lập trình, từ đó để có thể tạo bước đệm vững chắc để chúng ta có thể áp dụng vào công việc một cách có hiệu quả và tối ưu tiết kiệm chi phí nhất, cũng như cùng nhau chung sức đưa đất nước thành một trong những nước dẫn đầu về công nghệ thông tin nói riêng và các nghành công nghiệp khác nói chung

2 MỤC TIÊU CỦA ĐỀ TÀI

 Xây dựng website cho người dùng có thể:

 Là nơi ôn tập và học lý thuyết

 Luyện các bài tập thực hành

 Luyện giải các thuật toán, các bài tập phỏng vấn

 Tạo một forum cho người dùng có thể trao đổi kiến thức cùng nhau

3 CÁCH TIẾP CẬN VÀ PHƯƠNG PHÁP NGHIÊN CỨU

3.1 Đối tượng nghiên cứu

 Học sinh

 Sinh viên

Trang 6

 Những người có nhu học các ngôn ngữ mới

 Tìm hiểu cách xây dựng thiết kế một hệ thống compiler code

 Tìm hiểu cách thiết kế UI/UX một cách rõ ràng

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

liên quan đến các công nghệ đang tìm hiểu

chị và bạn bè có kinh nghiệm liên quan đến các vấn đề của tiểu luận để tạo tính chính xác và khoa học của đề tài

kết

quả thành phẩm của website

4 KẾT QUẢ DỰ KIẾN ĐẠT ĐƯỢC

 Xây dựng một hệ thống compiler code cho nhiều ngôn ngữ bao gồm các thành phần:

 Container docker cho từng ngôn ngữ

 Rest api cho client

 Xây dựng một hệ thống client bằng nodejs sử dụng hệ thống compile code để xây

dựng một trang web cho người dùng có thể:

 Học lý thuyết và thực hành

 Có thể thảo luận đóng góp xây dựng thông qua forum riêng

Trang 7

5 Ý NGHĨA KHOA HỌC THỰC TIỄN

Đề tài hướng đến khả năng tiếp thu, nâng cao kỹ năng lập trình, nghiên cứu công

nghệ mới và trên hết là đáp ứng nhu cầu ôn tập và học tập cho các đợt phòng vấn của doanh nghiệp

6 KẾT CẤU CỦA ĐỀ TÀI

Chương 1: Khảo sát hiện trạng và xác định yêu cầu

Chương 2: Mô hình hóa yêu cầu và thiết kế cơ sở dữ liệu

Chương 3: Thiết kế giao diện và xử lý

Chương 4: Lập trình

Chương 5: Kiểm thử phần mềm

Trang 8

PHẦN NỘI DUNG CHƯƠNG 1: CƠ SỞ LÝ THUYẾT

1 TỔNG QUAN VỀ DOCKER

1.1 Docker là gì?

Docker là một nền tảng cho developers và sysadmin để develop, deploy và run application với container Nó cho phép tạo các môi trường độc lập và tách biệt để khởi chạy và phát triển ứng dụng và môi trường này được gọi là container Khi cần deploy lên bất kỳ server nào chỉ cần run container của Docker thì application của bạn sẽ được khởi chạy ngay lập tức

1.2 Lợi ích của docker

 Khả năng start và stop chỉ vài giây, nhanh hơn nhiều so với sử dụng máy ảo

 Khởi chạy container trên các hệ thống khác nhau mà bạn muốn

 Việc xây dựng và loại bỏ nhanh và tốn ít chi phí hơn việc sử dụng máy ảo

 Dễ dàng thiết lập môi trường làm việc Chỉ cần 1 file config và config 1 lần duy nhất và không bao giờ phải cài đặt lại các dependencies

 Nó sẽ tách biệt môi trường máy thật và máy thật của bạn Đảm bảo việc chạy

và khởi tạo ứng dụng không ảnh hưởng tới máy thật của bạn khi có vấn đề xảy

Docker Engine: dùng để tạo ra Docker image và chạy Docker container

Docker Hub: dịch vụ lưu trữ giúp chứa các Docker image

Một số khái niệm khác:

Docker Machine: Tạo ra các Docker engine trên máy chủ

Docker Compose: chạy ứng dụng bằng cách định nghĩa cấu hình các Docker container

thông qua tệp cấu hình

Trang 9

Docker image: một dạng tập hợp các tệp của ứng dụng, được tạo ra bởi Docker engine

Nội dung của các Docker image sẽ không bị thay đổi khi di chuyển Docker image được dùng để chạy các Docker container

Docker Container: một dạng runtime của các Docker image, dùng để làm môi trường

chạy ứng dụng

Dockerfile: là một tập tin dạng text chứa một tập các câu lệnh để tạo mới một Image trong Docker Một số lệnh trong dockerfile:

FROM <base_image>:<phiên_bản>: đây là câu lệnh bắt buộc phải có trong bất kỳ

Dockerfile nào Nó dùng để khai báo base Image mà chúng ta sẽ build mới Image của chúng ta

MAINTAINER <tên_tác_giả>: câu lệnh này dùng để khai báo trên tác giả tạo ra

Image, chúng ta có thể khai báo nó hoặc không

RUN <câu_lệnh>: chúng ta sử dụng lệnh này để chạy một command cho việc cài đặt

các công cụ cần thiết cho Image của chúng ta

CMD <câu_lệnh>: trong một Dockerfile thì chúng ta chỉ có duy nhất một câu lệnh

CMD, câu lệnh này dùng để xác định quyền thực thi của các câu lệnh khi chúng ta tạo mới Image

ADD <src> <dest>: câu lệnh này dùng để copy một tập tin local hoặc remote nào đó

(khai báo bằng <src>) vào một vị trí nào đó trên Container (khai báo bằng dest)

ENV <tên_biến>: định nghĩa biến môi trường trong Container

ENTRYPOINT <câu_lệnh>: định nghĩa những command mặc định, cái mà sẽ được

chạy khi container running

VOLUME <tên_thư_mục>: dùng để truy cập hoặc liên kết một thư mục nào đó trong

Container

Trang 10

1.5 Các lệnh cơ bản

 Liệt kê danh sách image/container:

- $ docker image/container ls

 Xóa image/container:

- $ docker image/container rm <tên image/container >

 Xóa tất cả image hiện có:

- $ docker image rm $(docker images –a –q)

 Danh sách tất container hiện có:

- $ docker ps –a

 Dừng một container cụ thể:

- $ docker stop <tên container>

 Chạy container từ image và thay đổi tên container:

- $ docker run –name <tên container> <tên image>

 Dừng tất container:

- $ docker stop $(docker ps –a –q)

 Xóa tất cả container hiện có:

- $ docker rm $(docker ps –a –q)

 Hiển thị log một container:

- $ docker logs <tên container>

 Xây một image từ container:

- $ docker build -t <tên container>

 Tạo một container chạy ngầm:

- $ docker run -d <tên image>

 Tải một image trên docker hub:

- $ docker pull <tên image>

 Khởi chạy một container:

- $ docker start <tên container>

Trang 11

2 TỔNG QUAN VỀ MONGODB VÀ NOSQL

NoSQL là 1 dạng CSDL mã nguồn mở và được viết tắt bởi: None-Relational SQL hay

có nơi thường gọi là 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

NoSQL ra đời như là 1 mảnh vá cho những khuyết điểm và thiếu xót cũng như hạn chế của mô hình dữ liệu quan hệ RDBMS (Relational Database Management System- Hệ quản trị cơ sở dữ liệu quan hệ) về tốc độ, tính năng, khả năng mở rộng,

Với NoSQL bạn có thể mở rộng dữ liệu mà không lo tới những việc như tạo khóa ngoại, khóa chính, kiểm tra ràng buộc.v.v

NoSQL bỏ qua tính toàn vẹn của dữ liệu và transaction để đổi lấy hiệu suất nhanh và khả năng mở rộng

NoSQL được sử dụng ở rất nhiều công ty, tập đoàn lớn, ví dụ như FaceBook sử dụng Cassandra do FaceBook phát triển, Google phát triển và sử dụng BigTable, …

So với RDBMS thì trong MongoDB collection ứng với table, còn document sẽ ứng với row, MongoDB sẽ dùng các document thay cho row trong RDBMS

Các collection trong MongoDB được cấu trúc rất linh hoạt, cho phép các dữ liệu lưu trữ không cần tuân theo một cấu trúc nhất định

Trang 12

Thông tin liên quan được lưu trữ cùng nhau để truy cập truy vấn nhanh thông qua ngôn

ngữ truy vấn MongoDB

 Do MongoDB sử dụng lưu trữ dữ liệu dưới dạng Document JSON nên mỗi một collection sẽ có các kích cỡ và các document khác nhau, linh hoạt trong việc lưu trữ dữ liệu, nên bạn muốn gì thì cứ insert vào thoải mái

 Dữ liệu trong MongoDB không có sự ràng buộc lẫn nhau, không có join như trong RDBMS nên khi insert, xóa hay update nó không cần phải mất thời gian kiểm tra xem có thỏa mãn các ràng buộc dữ liệu như trong RDBMS

 MongoDB rất dễ mở rộng (Horizontal Scalability) Trong MongoDB có một khái niệm cluster là cụm các node chứa dữ liệu giao tiếp với nhau, khi muốn

mở rộng hệ thống ta chỉ cần thêm một node với vào cluster:

 Trường dữ liệu “_id” luôn được tự động đánh index (chỉ mục) để tốc độ truy vấn thông tin đạt hiệu suất cao nhất

 Khi có một truy vấn dữ liệu, bản ghi được cached lên bộ nhớ Ram, để phục

vụ lượt truy vấn sau diễn ra nhanh hơn mà không cần phải đọc từ ổ cứng

 Hiệu năng cao: Tốc độ truy vấn (find, update, insert, delete) của MongoDB nhanh hơn hẳn so với các hệ quản trị cơ sở dữ liệu quan hệ (RDBMS) Với một lượng dữ liệu đủ lớn thì thử nghiệm cho thấy tốc độ insert của MongoDB

có thể nhanh tới gấp 100 lần so với MySQL

3 TỔNG QUAN VỀ SPRING FRAMEWORD

Là framework phát triển ứng dụng phổ biến nhất dành cho Java Enterprise,

là một Java Platform mã nguồn mở, một giải pháp gọn nhẹ dành cho Java Enterprise Với Spring Framework các nhà phát triển có thể tạo ra các mã có hiệu suất cao, dễ kiểm

thử và có thể sử dụng lại được

Trang 13

3.2 Lợi ích của sử dụng spring framework

 Spring cho phép các nhà phát triển tạo các ứng dụng cấp Enterprise sử dụng các POJO

 Spring được tổ chức theo kiểu mô đun

 Spring sử dụng một số công nghệ hiện có như ORM Framework, logging framworks, JEE, JDK timers và các công nghệ view khác

 Dễ dàng kiểm thử một chương trình viết bằng spring

 Web framework của spring là một Web MVC framework có thiết kế tốt, nó

là một thay thế tuyệt vời cho Structs và các công nghệ kém phổ biến khác

 Spring cung cấp một số API thuận tiện để dịch các ngoại lệ cụ thể ( ném bởi JDBC, Hibernate, hoặc JDO chẳng hạn )

 IoC container có trọng lượng nhẹ Điều này có lợi ích cho việc phiển và triển khai các ựng dụng trên các máy tính có bộ nhớ và tài nguyên CPU hạn chế

 Spring cung cấp một bộ chứa giao diện quản lý các transaction nhất quán có

thể mở rộng (Ví dụ như sử dụng một cơ sỏ dữ liệu)

Trang 14

+ Spring for Android

+ Spring session

Đối với mỗi dự án cụ thể thì có một cách config nhất định vì thế bạn có thể tham khảo tại đây để biết rõ hơn về cách sử dụng cụ thể

4 TỔNG QUAN VỀ REACTJS

4.1 Reactjs là gì?

React là thư viện JavaScript phổ biến nhất để xây dựng giao diện người dùng (UI) Nó cho tốc độ phản hồi tuyệt vời khi user nhập liệu bằng cách sử dụng phương pháp mới

để render trang web

Một trong những điểm hấp dẫn của React là thư viện này không chỉ hoạt động trên phía client, mà còn được render trên server và có thể kết nối với nhau React so sánh sự thay đổi giữa các giá trị của lần render này với lần render trước và cập nhật ít thay đổi nhất

sẽ tính toán sự thay đổi giữa object và tree thật, điều này sẽ giúp tối ưu hoá việc render DOM tree thật

re-JSX:

JSX là một dạng ngôn ngữ cho phép viết các mã HTML trong Javascript Đặc điểm: Faster: Nhanh hơn JSX thực hiện tối ưu hóa trong khi biên dịch sang mã Javacsript Các mã này cho thời gian thực hiện nhanh hơn nhiều so với một mã tương đương viết trực tiếp bằng Javascript Safer: an toàn hơn Ngược với Javascript, JSX là kiểu statically-typed, nghĩa là nó được biên dịch trước khi chạy, giống như Java, C++ Vì thế các lỗi sẽ được phát hiện ngay trong quá trình biên dịch Ngoài ra, nó cũng cung cấp

Trang 15

tính năng gỡ lỗi khi biên dịch rất tốt Easier: Dễ dàng hơn JSX kế thừa dựa trên Javascript, vì vậy rất dễ dàng để cho các lập trình viên Javascripts có thể sử dụng (tham khảo tại https://jsx.github.io/)

Components:

React được xây dựng xung quanh các component, chứ không dùng template như các framework khác Trong React, chúng ta xây dựng trang web sử dụng những thành phần (component) nhỏ Chúng ta có thể tái sử dụng một component ở nhiều nơi, với các trạng thái hoặc các thuộc tính khác nhau, trong một component lại có thể chứa thành phần khác Mỗi component trong React có một trạng thái riêng, có thể thay đổi, và React sẽ thực hiện cập nhật component dựa trên những thay đổi của trạng thái Mọi thứ React đều là component Chúng giúp bảo trì mã code khi làm việc với các dự án lớn Một react component đơn giản chỉ cần một method render Có rất nhiều methods khả dụng khác, nhưng render là method chủ đạo

Props và State:

Props: giúp các component tương tác với nhau, component nhận input gọi là props, và trả thuộc tính mô tả những gì component con sẽ render Prop là bất biến State: thể hiện trạng thái của ứng dụng, khi state thay đồi thì component đồng thời render lại để cập nhật UI

Trang 16

4.3 Lợi ích của Reactjs

 Dễ sử dụng

 Có hỗ trợ Reusable Component

 Viết component dễ dàng hơn

 Hiệu suất tốt hơn với virtual dom

 Thân thiện với việc SEO

CHƯƠNG 2: KHẢO SÁT HIỆN TRẠNG VÀ XÁC ĐỊNH YÊU CẦU

Trang 17

Hình 2 Danh sách khóa học trang w3schools.com

Hình 3 Giao diện làm bài kiểm tra của w3schools.com

b Ưu điểm:

 Tốc độ load trang nhanh

 Giao diện rõ rang dễ nhìn

 Dễ dàng tìm kiếm nội dung cần học

 Nội dung đa dạng

 Có responsive web phù hợp trên các thiết bị

 Thanh tìm kiếm có hỗ trợ từ khóa tìm kiếm nhanh

Trang 18

 Có bổ sung, cập nhật nội dung

 Nội dung cơ bản đầy đủ

 Có phần “Try it yourself” để người học dễ hình dung

 Trang web phổ biến hầu hết mọi lập trình viên front-end back-end đều biết

 Có bài kiểm tra kiến thức

 Có cấp chứng chỉ cho các khóa học

c Nhược điểm:

 Nội dung căn bản, không có nhiều kiến thức nâng cao và cũ

 Bài kiểm tra còn đơn giản (Hình thức trắc nghiệm)

 Chứng chỉ không có giá trị cao

1.2 Trang web thực hành code Codewar.com

a Hình ảnh:

Hình 4 Giao diện làm bài của trang codewars.com

Trang 19

b Ưu điểm:

 Hỗ trợ nhiều ngôn ngữ lập trình

 Có hệ thống đóng góp câu hỏi

 Giao diện làm bài đơn giản

 Có hệ thống thảo luận lời giải

 Giao diện mới lạ

 Có sắp sếp câu trả lời hay nhất

 Hệ thống phản hồi vẫn còn chậm

 Giao diện vẫn còn phức tạp đối với người bắt đầu sử dụng

Hình 5 Danh sách khóa học trang codewars.com Hình 6 Giao diện thảo luận trang codewars.com

Trang 20

1.3 Trang web học lập lý thuyết lập trình Hackerrank.com

a Hình ảnh:

Hình 7 Danh sách ngôn ngữ lập trình trang hackerank.com

Hình 8 Danh sách khóa học trang hackerank.com

Trang 21

Hình 9 Danh sách bài học trong hackerank.com

Hình 10 Giao diện làm bài rang hackerank.com

Trang 22

Hình 11 Giao diện thử thách trang hackerank.com

b Ưu điểm:

 Giao diện người dùng dễ sử dụng

 Hỗ trợ nhiều ngôn ngữ rõ ràng

 Có nhiều dạng câu hỏi được sắp xếp từ dễ tới khó

 Có hệ thống xếp hạng thứ bậc giải bài tập của bạn

 Hệ thống truy cập nhanh

 Chưa có hệ thống forum thảo luận

 Hệ thống thảo luận câu hỏi được thiết kế không đẹp rõ ràng

2 PHÂN TÍCH YÊU CẦU

2.1 Yêu cầu về chức năng

 Lưu trữ, và chỉnh sửa thông tin về:

- Thông tin chi tiết về người dùng

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

- Thông tin chi tiết về bài học

- Thông tin chi tiết về thử thách

- Thông tin chi tiết về topic trong forum

- Thông tin chi tiết về comment

Trang 23

 Tìm kiếm tra cứu:

- Tìm kiếm bài viết trong forum

 Thực thi chương trình gồm các ngôn ngữ:

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

 Giao diện thân thiện dễ sử dụng

 Tốc độ xử lý nhanh

 Khả năng tương tác nhiều người dùng với nhau

Trang 24

CHƯƠNG 3: MÔ HÌNH HÓA YÊU CẦU VÀ THIẾT KẾ

CSDL

1 LƯỢC ĐỒ USECASE

1.1 Lược đồ use case tổng quan

Hình 12 Lược đồ user case tổng quan

Trang 25

1.2 Lược đồ use case chi tiết chức năng

1.2.1 Lược đồ use case chi tiết chức năng học lập trình

Hình 13 Lược đồ chi tiết use case học lập trình

1.2.2 Lược đồ use case chi tiết chức năng tham gia forum

Hình 14 Lược đồ chi tiết use case tham gia forum

Trang 26

1.2.3 Lược đồ use case chi tiết chức năng quản lý thông tin cá nhân

Hình 15 Lược đồ chi tiết use case quản lý thông tin cá nhân

1.2.4 Lược đồ use case chi tiết chức năng đóng góp câu hỏi

Trang 27

Hình 16 Lược đồ use case chi tiết chức năng đóng góp cáu hỏi

1.2.5 Lược đồ use case chi tiết chức năng quản lý khóa học

Trang 28

Hình 17 Lược đồ chi tiết chức năng quản lý khóa học

1.2.6 Lược đồ use case chi tiết chức năng quản lý thử thách

Hình 18 Lược đồ chi tiế chức năng quản lý thử thách

Trang 29

1.2.7 Lược đồ use case chi tiết chức năng quản lý user

Hình 19 Lược đồ chi tiết chức năng quản lý user

1.3 Mô tả chi tiết use case

① Nhập email vào khung Email

② Nhập mật khẩu vào khung Password

③ Nhấn nút Login

Bảng 1 Mô tả chi tiết use case đăng nhặp

1.3.2 Đăng xuất

Trang 30

Đăng xuất

Mô tả Người dùng đăng nhập vào ứng dụng với tài khoản đã đăng ký Tác nhân kích hoạt Người dùng

Tiền điều kiện Đã đăng nhập

Các bước thực hiện ① Nhập vào nút đăng xuất ở góc phải màn hình

Bảng 2 Mô tả chi tiết use case đăng xuất

① Nhập vào nút quên mật khẩu ở màn hình login

② Nhập email muốn lấy lại mật khẩu vào ô email

③ Nhấn nút gửi

③ Nhấn vào link được gửi tới email

③ Nhập lại mật khẩu mới và ấn thay đổi

Bảng 3 Mô tả chi tiết use case đổi mật khẩu

1.3.4 Xem danh sách các bài luyện

Xem danh sách các bài luyện phỏng vấn

Mô tả Người dùng đăng nhập vào phần xem danh sách các bài theo chủ để Tác nhân kích hoạt Người dùng

Các bước thực hiện ①Nhấp vào nút xem danh sách các bài phỏng vấn

Bảng 4 Mô tả chi tiết use case xem danh sách các bài luyện

1.3.5 Xem danh sách các bài luyện cú pháp ngôn ngữ

Trang 31

Xem danh sách các bài luyện cú pháp theo ngôn ngữ

Mô tả Người dùng đăng nhập vào phần xem danh sách các bài theo chủ để ữ Tác nhân kích hoạt Người dùng

Các bước thực hiện ①Nhấp vào nút xem danh sách các bài cú pháp ngôn ngữ

Bảng 5 Mô tả chi tiết use case xem danh sách các bài luyện

1.3.6 Xem danh sách các bài luyện thuật toán

Xem danh sách các bài luyện thuật toán

Mô tả Người dùng đăng nhập vào phần xem danh sách các bài theo chủ để Tác nhân kích hoạt Người dùng

Các bước thực hiện ①Nhấp vào nút xem danh sách các bài luyện thuật toán

Bảng 6 Mô tả chi tiết use case xem danh sách các bài luyện thuật toán

1.3.7 Tìm kiếm bài thực hành theo trình độ, theo ngôn ngữ, theo mức độ phổ biến

Tìm kiếm bài thực hành theo các tiêu chí

Mô tả Người dùng đăng nhập vào phần bài học và có thể tìm kiếm các bài học

theo các tiêu chí khác nhau

Tác nhân kích hoạt Người dùng

Các bước thực hiện

① Điền keywork vào thanh tìm kiếm

① Điền chọn tiêu chỉ lọc muốn tìm kiếm kế bên ô search

① Nhấn vào nút tìm kiếm

Bảng 7 Mô tả chi tiết use case tìm kiếm bài thực hành

1.3.8 Xem chi tiết các bài lý thuyết

Trang 32

Xem chi tiết các bài lý thuyết

Mô tả Người dùng nhấp vào một bài học bất kỳ để xem chi tiết

① Chọn vào một bài học

① Ấn chọn phần lý thuyết

Bảng 8 Mô tả chi tiết use case xem chi tiết các bài lý thuyết

1.3.9 Gửi và xem kết quả của bài thực hành

Gửi và xem kết quả của bài thực hành

Mô tả Người dùng làm phần thực hành của một bài học sau đó nộp và xem kết

quả Tác nhân kích hoạt Người dùng

Tiền điều kiện Cú pháp không bị sai

① Ấn chọn phần thực hành

① Thực hiện bài làm, sau đó nhấn nút nộp bài

Bảng 9 Mô tả chi tiết use case gửi và xem kết quả của bài thực hành

1.3.10 Kiểm tra cú pháp của bài thực hành

Kiểm tra cú pháp của bài học

Mô tả Kiểm tra cú pháp của code trước khi người dùng nộp bài

Tiền điều kiện Cú pháp không bị sai

① Ấn chọn phần thực hành

① Thực hiện bài làm, sau đó nhấn nút test để kiểm tra

Bảng 10 Kiểm tra cú pháp của bài thực hành

1.3.11 Xem thảo luận của câu hỏi thực hành

Trang 33

Xem thảo luận của câu hỏi thực hành

Mô tả Xem thảo luận và cách giải của các người dùng khác cho câu hỏi của

mình

① Ấn chọn phần thảo luận để xem thảo luận

Bảng 11 Mô tả chi tiết use case xem thảo luận của câu hỏi thực hành

1.3.12 Tạo bài viết và chỉnh sửa bài viết ở forum

Tạo bài viết và chỉnh sửa bài viết tại forum

Mô tả Tạo mới, và chỉnh sửa bài viết sau khi tạo mới

① Nhấn chọn vào forum

① Nhấn vào button thêm bài viết

① Điền các trường bắt buộc

① Sau đó nhấn nút đăng

1.3.13 Xem danh sách bài viết tại forum

Xem danh sách bài viết tại forum

Mô tả Hiển thị danh sách bài viết mới nhất khi vào forum

Các bước thực hiện ① Nhấn chọn vào forum để chuyển tới trang chủ forum

Bảng 12 Mô tả chi tiết use case xem danh sách bài viết tại forum

1.3.14 Bình luận bài viết của người dùng khác

Trang 34

Bình luận bài viết tại forum

Mô tả Bình luận các bài viết trong forum

① Nhấn chọn vào forum để chuyển tới trang chủ forum

① Chọn bài viết muốn bình luận

① Kéo xuống dưới cuối bài viết để thêm bình luận

① Điền bình luận

① Sau đó nhấn nút gửi

Bảng 13 Mô tả chi tiết use case bình luận bài viết của người dùng khác 1.3.15 Trả lời bình luận của người dùng khác

Trả lời bình luận của người dùng

Mô tả Cho phép phản hồi bình luận của người dùng khác Tác nhân kích hoạt Người dùng

Bảng 14 Trả lời bình luận của người khác

1.3.16 Bình chọn bình luận hay lên top của bài viết

Vote bình luận

Mô tả Cho phép vote bình luận của người dùng khác

Trang 35

① Rê chuột vào bình luận mà muốn vote

① Nhấn vào nút vote

Bảng 15 Mô tả chi tiết use case bình chọn bình luận lên top

1.3.17 Xem thông tin cá nhân

Xem Thông tin cá nhân

Mô tả Cho phép người dùng có thể xem thông tin cá nhân của mình Tác nhân kích hoạt Người dùng

① Cick vào avatar của tài khoản bên gốc phải

① Sau đó chọn phần thông tin người dùng

Bảng 16 Mô tả chi tiết use case xem thông cá nhân

1.3.18 Chỉnh sửa thông tin cá nhân

Chỉnh sửa thông tin cá nhân

Mô tả Cho phép người dùng có thể chỉnh sửa thông tin cá nhân của mình Tác nhân kích hoạt Người dùng

① Sau đó chọn phần thông tin người dùng

① Sau đó chọn phần cập nhận thông tin người dùng

① Chỉnh sửa những trường được cho phép

① Sau đó nhấn nút lưu

Bảng 17 Mô tả chi tiết use case chỉnh sửa thông tin cá nhân

1.3.19 Xem lại lịch sử làm bài

Trang 36

Xem lại lịch sử làm bài

Mô tả Cho phép người dùng có thể xem lại lịch sử làm bài của mình

Tiền điều kiện Đã từng làm bài thực hành

① Sau đó chọn phần lịch sử làm bài để xem lại lịch sử làm bài

Bảng 18 Mô tả chi tiết use case xem lại lịch sử làm bài

1.3.20 Đóng góp thêm câu hỏi

Đóng góp thêm câu hỏi

Mô tả Cho phép người dùng có thể đóng góp câu hỏi cho hệ thống

Tác nhân kích hoạt Người dùng, quản trị viên

① Tại trang chủ, nhấp vào phần đóng góp câu hỏi

① Nhấp vào phần thêm câu hỏi mới

① Điền những trường bắt buộc

① Đợi admin xét duyệt câu hỏi

Bảng 19 Mô tả chi tiết use case đóng góp thêm câu hỏi

1.3.21 Chỉnh sửa câu hỏi đã đóng góp

Đóng góp thêm câu hỏi

Mô tả Cho phép người dùng có thể chỉnh sửa câu hỏi sau khi đã đóng góp Tác nhân kích hoạt Người dùng, quản trị viên

Tiền điều kiện Đã đóng góp câu hỏi cần sửa

① Tại trang chủ, nhấp vào phần đóng góp câu hỏi

① Tại mục danh sách đóng góp, nhấp vào nút chỉnh sửa tại câu hỏi cần chỉnh sửa

Trang 37

① Chỉnh sửa những trường thông tin bạn muốn

① Đợi admin xét duyệt câu hỏi

Bảng 20 Mô tả chi tiết use case chỉnh sửa câu hỏi đã đóng góp

1.3.22 Phê duyệt câu hỏi đóng góp

Phê duyệt câu hỏi đóng góp

Mô tả Admin sẽ là người quản lý những câu hỏi đóng góp của người dùng Tác nhân kích hoạt Quản trị viên

Tiền điều kiện Đã đăng nhập vào trang admin

① Tại trang quản trị ấn vào phần quản lý đóng góp câu hỏi

① Danh sách nhưng câu hỏi mới được đóng góp sẽ được hiển thị lên, admin nhấn vào nút chấp nhận hoặc từ chối câu hỏi

Bảng 21 Mô tả chi tiết use case phê duyệ câu hỏi đóng góp

1.3.23 Thêm khóa học

Thêm một khóa học mới

Mô tả Admin có thể thêm một khóa học mới

Tác nhân kích hoạt Quản trị viên

① Tại trang quản trị ấn vào phần khóa học

① Nhấn vào button thêm khóa học

① Điền đầy đủ thông tin khóa học

① Sau khi tạo thành công khóa học, bạn sẽ được chuyển tới trang quản

lý khóa học đó để quản lý các bài học của mình

① Ấn vào tạo một bài học mới, điền đầy đủ thông tin

① Ấn vào tạo một bài thực hành đối với bài học đó nếu có

Bảng 22 Mô tả chi tiết use case thêm khóa học

Trang 38

1.3.24 Xóa khóa học

Xóa khóa học

Mô tả Xóa một khóa học hiện có

① Nhấn vào một khóa học để xem thông tin chi tiết

① Ấn vào nút xóa khóa học

① Xác nhận xóa khóa học

* Lưu ý: khi xóa khóa học thì tất cả các bài học đều bị xóa theo

Bảng 23 Mô tả chi tiết use case xóa khóa học

1.3.25 Chỉnh sửa khóa học

Chỉnh sửa một khóa học

Mô tả Chỉnh sửa khóa học

① Nhấn vào một khóa học để xem thông tin chi tiết

① Ấn vào chỉnh sửa khóa học

① Chỉnh sửa những trường được cho phép

① Nhấn vào nút xác nhận, và lưu

Bảng 24 Chỉnh sửa khóa học

Trang 39

1.3.26 Thêm thử thách

Thêm thử thách

Mô tả Thêm thử thách cho người dùng kiểm tra kiến thức

① Tại trang quản trị ấn vào phần tử thách

① Danh sách thử thách hiện ra, nhấn vào nút thêm thử thách

① Điền thông tin thử thách, và nhấn nút lưu

Bảng 25 Mô tả chi tiết use case thêm thử thách

1.3.27 Xóa thử thách

Xóa thử thách

Mô tả Xóa thử thách đã được tạo

① Danh sách thử thách hiện ra, chọn thử thách đã tạo

① Nhấn vào nút xóa,và xác nhận

Bảng 26 Mô tả chi tiết use case xóa thử thách

1.3.28 Chỉnh sửa thử thách

Chỉnh sửa thử thách

Mô tả Chỉnh sửa thử thách đã tạo

① Danh sách thử thách hiện ra, chọn thử thách đã tạo

Trang 40

① Nhấn vào chỉnh sửa,và xác nhận

Bảng 27 Mô tả chi tiết use case chỉnh sửa thử thách

1.3.29 Quản lý người dùng

Quản lý người dùng

Mô tả Chỉnh sửa thử thách đã tạo

① Tại trang quản trị ấn vào phần người dung

① Ấn vào nút thêm để thêm một người dùng Hoặc nhấn chọn vào một user đã tạo để chỉnh sửa hoặc xóa

Bảng 28 Mô tả chi tiết use case quản lý người dùng

2 PHÂN TÍCH CHỨC NĂNG, THIẾT KẾ CƠ SỞ DỮ LIỆU

2.1 Xem danh sách bài học

Sơ đồ luồng dữ liệu:

Hình 20 Sơ đồ luồng dữ liệu xem danh sách bài học

B2: Mở kết nối cơ sở dữ liệu

B3: Kiểm tra D1 và xác thực đầu vào D1

B4: Trả lại kết quả D6 cho người dùng

Định dạng
Số trang	86
Dung lượng	4,67 MB