Đồ án tốt nghiệp đại học ngành khoa học máy tính khoa học máy tính xây dựng ứng dụng hỗ trợ thiết kế giao diện website

Cùng với sự pháttriển không ngừng của công nghệ thông tin và internet, việc sử dụng các nềntảng trực tuyến để tìm kiếm cơ hội việc làm và tuyển dụng đã trở nên phổbiến và tiện lợi hơn ba

Trang 1

-ĐỒ ÁN TỐT NGHIỆP ĐẠI HỌCNGÀNH KHOA HỌC MÁY TÍNH

Trang 3

BỘ CÔNG THƯƠNG TRƯỜNG ĐẠI HỌC CÔNG NGHIỆP HÀ NỘI

-ĐỒ ÁN TỐT NGHIỆP ĐẠI HỌCNGÀNH CÔNG NGHỆ THÔNG TIN

XÂY DỰNG GIẢI PHÁP TÌM VIỆC VÀ TUYỂN DỤNG TRỰC TUYẾN

CBHD: ThS Nguyễn Thị Nhung Sinh viên: Bùi Văn Mạnh

Mã sinh viên: 2019603599

Hà Nội – Năm 2023

Trang 4

LỜI NÓI ĐẦU

Trong thế giới số hóa ngày nay, việc tìm kiếm việc làm và tuyển dụngtrực tuyến đã trở thành một phần quan trọng và không thể thiếu đối với cácdoanh nghiệp cũng như người lao động có nhu cầu tìm việc Cùng với sự pháttriển không ngừng của công nghệ thông tin và internet, việc sử dụng các nềntảng trực tuyến để tìm kiếm cơ hội việc làm và tuyển dụng đã trở nên phổbiến và tiện lợi hơn bao giờ hết

Em rất vui và tự hào khi được tham gia vào dự án "Xây dựng websitetìm việc và tuyển dụng trực tuyến" tại Đại học Công nghiệp Hà Nội Đây làmột cơ hội lớn để em có thể học hỏi và áp dụng những kiến thức, kỹ năng mà

em đã được trang bị trong quá trình học tập tại trường

Qua quá trình nghiên cứu và phát triển dự án này, em hy vọng rằngchúng ta sẽ có thể tạo ra một nền tảng trực tuyến hiệu quả, giúp người tìmviệc và nhà tuyển dụng kết nối với nhau một cách thuận tiện và nhanh chónghơn Điều này không chỉ giúp tăng cơ hội việc làm cho người lao động màcòn giúp các doanh nghiệp thuận lợi trong việc tuyển dụng nhân sự

Em xin bày tỏ lòng biết ơn chân thành đến Ban Giám hiệu, Khoa Côngnghiệp Thông Tin, Đại học Công nghiệp Hà Nội đã tạo điều kiện và cung cấpnguồn lực cho em để thực hiện dự án này Đặc biệt, em muốn gửi lời tri ânđến ThS Nguyễn Thị Nhung, người đã luôn hỗ trợ và tận tình chỉ dẫn emtrong suốt quá trình thực hiện dự án

Dù chúng ta đã cố gắng hết sức, nhưng em nhận thức rằng dự án vẫn cònnhiều hạn chế và thiếu sót Vì vậy, em rất mong nhận được sự góp ý và đónggóp xây dựng từ các thầy cô và bạn bè để dự án của chúng ta ngày càng hoànthiện và có ích hơn

Cuối cùng, em xin kính chúc Thầy Cô luôn dồi dào sức khỏe và thànhcông trong sự nghiệp giảng dạy và hướng dẫn sinh viên Cảm ơn Thầy Cô đãluôn đồng hành và hỗ trợ chúng em trong suốt thời gian qua

Sinh viên thực hiện

Bùi Văn Mạnh

Trang 5

MỤC LỤC

LỜI NÓI ĐẦU i

MỤC LỤC iii

DANH MỤC HÌNH ẢNH vii

DANH MỤC BẢNG BIỂU x

MỞ ĐẦU 1

1 Lý do chọn đề tài 1

2 Mục tiêu của đề tài 1

3 Nội dung nghiên cứu 1

4 Phạm vi đề tài 2

5 Dự kiến kết quả 2

6 Bố cục đề tài 2

CHƯƠNG 1 TỔNG QUAN VỀ CƠ SỞ LÝ THUYẾT 3

1.1 Giới thiệu về HTML, CSS và Javascript 3

1.1.1 HTML 3

1.1.2 CSS 3

1.1.3 JavaScript 4

1.2 Giới thiệu về ReactJs 4

1.3 Giới thiệu về Java 6

1.4 Giới thiệu về spring boot 8

1.5 Giới thiệu về MySQL 9

CHƯƠNG 2 PHÂN TÍCH THIẾT KẾ HỆ THỐNG 11

2.1 Đặc tả yêu cầu 11

2.2 Các yêu cầu phi chức năng 11

Trang 6

2.3 Phân tích thiết kế hệ thống 12

2.4 Mô hình hóa use case 13

2.4.1 Biểu đồ use case tổng quát 13

2.4.2 Biểu đồ use case phân rã 14

2.5 Mô tả chi tiết use case 15

2.5.1 Use case đăng ký tài khoản 15

2.5.2 Use case đăng nhập 16

2.5.3 Use case xem thông tin tài khoản 17

2.5.4 Use case thay đổi mật khẩu 17

2.5.5 Use case lấy lại mật khẩu 18

2.5.6 Use case cập nhật thông tin cá nhân 19

2.5.7 Use case xem chi tiết trang giao diện 20

2.5.8 Use case tạo trang giao diện 21

2.5.9 Use case chỉnh sửa trang giao diện 22

2.5.10 Use case tìm kiếm trang giao diện 23

2.5.11 Use case xóa trang giao diện 24

2.5.12 Use case xuất mã nguồn trang giao diện 25

2.5.13 Use case thêm người chỉnh sửa 26

2.6 Phân tích use case 27

2.6.1 Use case đăng kí tài khoản 27

2.6.2 Use case đăng nhập 29

2.6.3 Use case xem thông tin tài khoản 31

2.6.4 Use case lấy lại mật khẩu 32

2.6.5 Use case thay đổi mật khẩu 34

Trang 7

2.6.6 Use case cập nhật thông tin cá nhân 36

2.6.7 Use case xem chi tiết trang giao diện 38

2.6.8 Use case tạo trang giao diện 39

2.6.9 Use case chỉnh sửa trang giao diện 41

2.6.10 Use case tìm kiếm trang giao diện 43

2.6.11 Use case xóa trang giao diện 44

2.6.12 Use case thêm người chỉnh sửa 46

2.6.13 Use case xuất mã nguồn trang giao diện 48

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

2.7.1 Biểu đồ Entity Relationship Diagram 50

2.7.2 Các bảng trong cơ sở dữ liệu 50

CHƯƠNG 3 KẾT QUẢ, KIỂM THỬ VÀ ĐÁNH GIÁ 52

3.1 Giới thiệu ứng dụng 52

3.2 Một số chức năng chính của ứng dụng 52

3.2.1 Trang đăng ký tài khoản 52

3.2.2 Trang đăng nhập 53

3.2.3 Trang lấy lại mật khẩu 54

3.2.4 Trang thông tin tài khoản 54

3.2.5 Trang tạo và chỉnh sửa trang giao diện 55

3.2.6 Trang danh sách trang giao diện cá nhân 59

3.2.7 Trang danh sách trang giao diện cộng đồng 62

3.2.8 Trang xem chi tiết trang giao diện 63

3.3 Kiểm thử chương trình 63

3.3.1 Kế hoạch kiểm thử 63

Trang 8

3.3.2 Chiến lược kiểm thử 64

3.3.3 Mô hình kiểm thử 64

3.3.4 Kết quả kiểm thử 64

KẾT LUẬN 65

TÀI LIỆU THAM KHẢO 66

Trang 9

DANH MỤC HÌNH ẢNH

Hình 1.1 React JS 5

Hình 2.1:Biểu đồ use case tổng quát 14

Hình 2.2: Biểu đồ use case phân rã quản lí tài khoản 14

Hình 2.3: Biểu đồ use case phân ra quản lí trang giao diện 14

Hình 2.4: Biểu đồ hoạt động mô tả use case đăng ký tài khoản 15

Hình 2.5: Biểu đồ hoạt động use case đăng nhập 17

Hình 2.6: Biểu đồ hoạt động mô tả use case xem thông tin tài khoản 17

Hình 2.7: Biểu đồ hoạt động mô tả use case thay đổi mật khẩu 18

Hình 2.8: Biểu đồ hoạt động mô tả use case lấy lại mật khẩu 19

Hình 2.9: Biểu đồ hoạt động mô tả use case cập nhật thông tin cá nhân 20

Hình 2.10: Biểu đồ hoạt động mô tả use case xem thông tin tài khoản 21

Hình 2.11: Biểu đồ hoạt động use case tạo trang giao diện 22

Hình 2.12: Biểu đồ hoạt động use case chỉnh sửa trang giao diện 23

Hình 2.13: Biểu đồ hoạt động use case tìm kiếm trang giao diện 24

Hình 2.14: Biểu đồ hoạt động mô tả use case xóa trang giao diện 25

Hình 2.15: Biểu đồ hoạt động use case xuất mã nguồn trang giao diện 25

Hình 2.16: Biểu đồ hoạt động use case thêm người chỉnh sửa 26

Hình 2.17: Biểu đồ lớp chức năng đăng ký tài khoản 27

Hình 2.18: Biểu đồ trình tự chức năng đăng ký tài khoản 28

Hình 2.19: Biểu đồ lớp chức năng đăng nhập 29

Hình 2.20: Biểu đồ trình tự chức năng đăng nhập 30

Hình 2.21: Biểu đồ lớp chức năng xem thông tin tài khoản 31

Hình 2.22: Biểu đồ trình tự chức năng xem thông tin tài khoản 31

Hình 2.23 Biểu đồ lớp chức năng lấy lại mật khẩu 32

Hình 2.24 Biểu đồ trình tự chức năng lấy lại mật khẩu 33

Hình 2.25 Biểu đồ lớp chức năng thay đổi mật khẩu 34

Hình 2.26 Biểu đồ trình tự chức năng thay đổi mật khẩu 35

Hình 2.27 Biểu đồ lớp chức năng cập nhật thông tin cá nhân 36

Trang 10

Hình 2.28 Biểu đồ trình tự chức năng cập nhật thông tin cá nhân 37

Hình 2.29 Biểu đồ lớp chức năng xem chi tiết trang giao diện 38

Hình 2.30 Biểu đồ trình tự chức năng xem chi tiết trang giao diện 38

Hình 2.31 Biểu đồ lớp chức năng tạo trang giao diện 39

Hình 2.32 Biểu đồ trình tự chức năng tạo trang giao diện 40

Hình 2.33 Biểu đồ lớp chức năng chỉnh sửa trang giao diện 41

Hình 2.34 Biểu đồ trình tự chức năng chỉnh sửa trang giao diện 42

Hình 2.35 Biểu đồ lớp chức năng tìm kiếm trang giao diện 43

Hình 2.36 Biểu đồ trình tự chức năng tìm kiếm trang giao diện 43

Hình 2.37 Biểu đồ lớp chức năng xóa trang giao diện 44

Hình 2.38 Biểu đồ trình tự chức năng xóa trang giao diện 45

Hình 2.39 Biểu đồ lớp chức năng thêm người chỉnh sửa 46

Hình 2.40 Biểu đồ trình tự chức năng thêm người chỉnh sửa 47

Hình 2.41 Biểu đồ lớp chức năng xuất mã nguồn trang giao diện 48

Hình 2.42 Biểu đồ trình tự chức năng xuất mã nguồn trang giao diện 49

Hình 2.43 Biểu đồ Entity Relationship Diagram 50

Hình 3.1: Màn hình giao diện đăng ký tài khoản 52

Hình 3.2: Thông báo gửi đến email người dùng 53

Hình 3.3: Màn hình giao diện đăng nhập 53

Hình 3.4: Màn hình giao diện Lấy lại mật khẩu 54

Hình 3.5: Màn hình giao diện trang thông tin tài khoản cá nhân 55

Hình 3.6: Màn hình giao diện trang thông tin tài khoản của người dùng khác .55

Hình 3.7: Giao diện cấu hình trang khi tạo 56

Hình 3.8: Màn hình giao diện chỉnh sửa trang giao diện 56

Hình 3.9: Giao diện xem trước trang giao diện 57

Hình 3.10: Giao diện chức năng với trang giao diện 57

Hình 3.11: Thông báo email quyền chỉnh sửa trang giao diện 58

Trang 11

Hình 3.12: Màn hình giao diện Chỉnh sửa trang giao diện đối với người chỉnh

sửa 58

Hình 3.13: Giao diện xuất mã nguồn trang giao diện 59

Hình 3.14: Mẫu trang giao diện gợi ý 59

Hình 3.15: Mẫu trang giao diện gợi ý 59

Hình 3.16: Màn hình giao diện Danh sách trang giao diện cá nhân 60

Hình 3.17: Giao diện tìm kiếm trang 60

Hình 3.18: Chức năng khi truy cập trang giao diện cá nhân 61

Hình 3.19: Giao diện đổi tên trang 61

Hình 3.20: Giao diện xóa trang 61

Hình 3.21: Màn hình giao diện danh sách trang giao diện cộng đồng 62

Hình 3.22: Giao diện chức năng với trang cộng đồng 62

Hình 3.23: Giao diện chức năng với trang cộng đồng có quyền chỉnh sửa 63

Hình 3.24: Màn hình giao diện xem trang giao diện với chế độ xem 63

Trang 12

DANH MỤC BẢNG BIỂU

Bảng 2.1: Các use case chính của hệ thống 12

Bảng 2.2: Mô tả chi tiết use case đăng ký tài khoản 15

Bảng 2.3: Mô tả chi tiết use case đăng nhập 16

Bảng 2.4: Mô tả chi tiết use case xem thông tin tài khoản 17

Bảng 2.5: Mô tả chi tiết use case lấy lại mật khẩu 17

Bảng 2.6: Mô tả chi tiết use case lấy lại mật khẩu 18

Bảng 2.7: Mô tả chi tiết use case cập nhật thông tin cá nhân 19

Bảng 2.8: Mô tả chi tiết use case xem chi tiết trang giao diện 20

Bảng 2.9: Mô tả chi tiết use case tạo trang giao diện 21

Bảng 2.10: Mô tả chi tiết use case chỉnh sửa trang giao diện 22

Bảng 2.11: Mô tả chi tiết use case tìm kiếm trang giao diện 23

Bảng 2.12: Mô tả chi tiết use case xóa trang giao diện 24

Bảng 2.13: Mô tả chi tiết use case xuất mã nguồn trang giao diện 25

Bảng 2.14: Mô tả chi tiết use case thêm người chỉnh sửa 26

Bảng 2.15: Bảng thông tin user 50

Bảng 2.16: Bảng thông tin page_user 50

Bảng 2.17: Bảng thông tin user_shortcut_pages 51

Bảng 2.18: Bảng thông tin page 51

Bảng 2.19: Bảng thông tin saved_pages 51

Trang 13

MỞ ĐẦU

1 Lý do chọn đề tài

Hiện nay, với sự phát triển của công nghệ, việc tạo ra một trang web đẹpmắt và chuyên nghiệp trở nên quan trọng hơn bao giờ hết Tuy nhiên, nếungười dùng không có kinh nghiệm về lập trình hay thiết kế web, việc tạo ramột trang web đẹp và chuyên nghiệp có thể trở nên rất khó khăn Đó là lý do

vì sao các công cụ xây dựng trang web ngày càng trở nên phổ biến Với cáctrang web builder, người dùng không cần phải có kiến thức chuyên sâu về lậptrình hay thiết kế web, vẫn có thể tạo ra một trang web đẹp và chuyên nghiệptrong vài phút Tùy thuộc vào nhu cầu và sở thích, các web builder cung cấpnhiều mẫu giao diện đẹp mắt, các công cụ thiết kế dễ sử dụng và các tínhnăng hỗ trợ tối đa cho việc quản lý trang web Do vậy, đề tài đồ án tốt nghiệpnày em muốn giới thiệu, đồng thời phân tích và thiết kế một ứng dụng hỗ trợthiết kế giao diện website có tên là Component Craft

2 Mục tiêu của đề tài

Xây dựng ứng dụng hỗ trợ thiết kế giao diện website tập trung vào việcgiúp người dùng thiết kế giao diện ứng dụng hoặc website một cách dễ dàng

và nhanh chóng Website này sẽ cung cấp các công cụ, tài nguyên và tínhnăng hữu ích để người dùng có thể tạo ra các giao diện đẹp và chuyên nghiệp

mà không cần có kỹ năng lập trình hoặc thiết kế chuyên nghiệp

3 Nội dung nghiên cứu

- Sau khi tìm hiểu, phân tích bài toán về công cụ xây dựng web builder cũngnhư các công cụ được sử dụng phổ biến trên thị trường hiê ̣n nay thì ứngdụng hỗ trợ thiết kế và chia s攃ऀ giao website phải giải quyết được các nô ̣idung dưới đây:

 Hỗ trợ xây dựng giao diê ̣n website

 Công cụ hợp tác và phân tích giao diê ̣n với các bên liên quan hoă ̣cngười dùng khác thông qua viê ̣c chia s攃ऀ liên kết để tham gia vàoviê ̣c đánh giá và xây dựng giao diê ̣n

- Ứng dụng hỗ trợ thiết kế giao diện website Component Craft được xâydựng bao gồm các chức năng chính sau:

 Quản lý thông tin người dùng: bao gồm viê ̣c quản lý thông tin về họ

và tên, email…

Trang 14

 Quản lý cơ sở dữ liê ̣u: bao gồm thông tin về các trang giao diệnđược tạo, …

 Quản lý cộng đồng người dùng: bao gồm phân quyền người dùngđối với trang được chia s攃ऀ lên cộng đồng

● Chương 1: Tổng quan về cơ sở lý thuyết

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

● Chương 3: Kết quả, kiểm thử và đánh giá

Trang 15

CHƯƠNG 1 KHẢO SÁT HỆ THỐNG

1.1 Mô tả bài toán

Trong xã hội hiện đại, việc tìm kiếm việc làm và tuyển dụng đã trở thànhmột phần không thể thiếu của cuộc sống hàng ngày của mỗi cá nhân và tổchức Đối với người lao động, việc tìm kiếm một công việc phù hợp khôngchỉ là một nhu cầu cần thiết mà còn là một bước quan trọng trong việc xâydựng sự nghiệp và định hình tương lai cá nhân Ngược lại, đối với các doanhnghiệp, việc tuyển dụng nhân sự có kỹ năng và kinh nghiệm phù hợp là mộtyếu tố quyết định đến sự phát triển và thành công của công ty

Tuy nhiên, thị trường tuyển dụng truyền thống thường gặp phải nhiềukhó khăn và hạn chế như: thời gian tìm kiếm công việc lâu dài, chi phí quảngcáo tuyển dụng cao, khó khăn trong việc kết nối giữa người tìm việc và nhàtuyển dụng, độ tin cậy của thông tin tuyển dụng, và nhiều vấn đề khác Đểgiải quyết những vấn đề này, việc áp dụng công nghệ thông tin vào quá trìnhtìm kiếm việc làm và tuyển dụng trở thành một xu hướng không thể tránhkhỏi

Bài toán được đặt ra là xây dựng một hệ thống website tìm việc vàtuyển dụng trực tuyến, với mục tiêu giúp kết nối giữa người tìm việc và nhàtuyển dụng một cách thuận tiện, nhanh chóng và hiệu quả Hệ thống sẽ cungcấp các chức năng và tính năng như: đăng tin tuyển dụng, tìm kiếm việc làmtheo các tiêu chí khác nhau, tạo hồ sơ cá nhân, đánh giá nhà tuyển dụng vàứng viên, và giao diện thân thiện dễ sử dụng

Mục tiêu của dự án là xây dựng một hệ thống website linh hoạt, chấtlượng cao, đáp ứng được nhu cầu của cả người tìm việc và nhà tuyển dụng.Qua đó, giúp cải thiện quá trình tìm kiếm việc làm và tuyển dụng, từ đó đónggóp vào sự phát triển của cả cộng đồng và xã hội

Trong phần tiếp theo của chương này, chúng ta sẽ tiến hành khảo sát vàphân tích cụ thể hơn về yêu cầu và yếu tố cần thiết cho việc xây dựng hệthống này

1.2 Các yêu cầu chức năng

1.2.1 Đăng Tin Tuyển Dụng:

Trang 16

 Cho phép nhà tuyển dụng đăng thông tin về các vị trí việc làm cụthể, bao gồm tiêu đề công việc, mô tả công việc, yêu cầu ứngviên, lợi ích công việc và thông tin liên hệ.

 Hỗ trợ việc đăng tin theo các lĩnh vực và ngành nghề khác nhau

để dễ dàng tìm kiếm

1.2.2 Tìm Kiếm Việc Làm:

 Người tìm việc có thể tìm kiếm việc làm dựa trên các tiêu chínhư ngành nghề, vị trí, địa điểm, mức lương, và yêu cầu côngviệc

 Hỗ trợ tìm kiếm nâng cao với các tính năng lọc kết hợp để thuhẹp kết quả tìm kiếm

1.2.3 Tạo Hồ Sơ Cá Nhân:

 Cho phép người tìm việc tạo và quản lý hồ sơ cá nhân của mìnhvới các thông tin như kinh nghiệm làm việc, học vấn, kỹ năng, vàthông tin liên hệ

 Hỗ trợ tải lên hồ sơ CV và các tài liệu liên quan

1.2.4 Ứng Tuyển Việc Làm:

 Người tìm việc có thể ứng tuyển trực tiếp vào các vị trí việc làm

mà họ quan tâm thông qua website

 Cung cấp giao diện thuận tiện để gửi thông điệp hoặc liên hệ trựctiếp với nhà tuyển dụng

1.2.5 Quản Lý Tin Tuyển Dụng:

 Cho phép nhà tuyển dụng quản lý các tin tuyển dụng đã đăng,bao gồm chỉnh sửa, xoá và cập nhật thông tin

 Cung cấp thống kê và báo cáo về số lượng ứng viên đã ứng tuyểncho từng tin đăng

Trang 17

 Đảm bảo rằng cả hai bên đều nhận được thông tin kịp thời vàkhông bỏ lỡ cơ hội.

1.2.8 Bảo Mật Thông Tin:

 Đảm bảo an toàn và bảo mật cho thông tin cá nhân của người tìmviệc và nhà tuyển dụng

 Áp dụng các biện pháp bảo mật để ngăn chặn sự truy cập tráiphép vào hệ thống và lợi dụng thông tin

1.2.9 Giao Diện Thân Thiện:

 Xây dựng giao diện dễ sử dụng và thân thiện với người dùng,bao gồm cả trên máy tính và thiết bị di động

 Đảm bảo trải nghiệm người dùng mượt mà và hiệu quả

1.2.10 Hỗ Trợ Khách Hàng:

 Cung cấp các kênh hỗ trợ khách hàng như email, điện thoại, hoặcchat trực tuyến để giải đáp thắc mắc và xử lý các vấn đề phátsinh

 Các yêu cầu chức năng trên sẽ là cơ sở để xây dựng và phát triển

hệ thống website tuyển dụng và tìm việc trực tuyến một cáchtoàn diện và hiệu quả

1.3 Các yêu cầu phi chức năng

1.3.1 Hiệu suất:

 Hệ thống cần đảm bảo khả năng xử lý lớn và đồng thời của dữliệu để đảm bảo trải nghiệm người dùng mượt mà và không bịgián đoạn

 Thời gian phản hồi của hệ thống cần được giữ ở mức thấp, đảmbảo việc truy cập và sử dụng website luôn nhanh chóng và hiệuquả

1.3.2 Bảo mật:

 Hệ thống cần có các biện pháp bảo mật mạnh mẽ để bảo vệthông tin cá nhân của người dùng, bao gồm mã hóa dữ liệu, kiểmsoát truy cập và cơ chế xác thực

 Phải có cơ chế sao lưu và khôi phục dữ liệu định kỳ để đảm bảo

an toàn và tin cậy cho dữ liệu

1.3.3 Tương thích:

Trang 18

 Website cần phải tương thích với nhiều loại trình duyệt web phổbiến như Chrome, Firefox, Safari và Edge để đảm bảo mọi ngườidùng có thể truy cập và sử dụng một cách thuận tiện.

 Giao diện của website cũng cần phải tương thích với các thiết bị

di động như điện thoại thông minh và máy tính bảng

1.3.4 Dễ dàng điều hướng:

 Giao diện người dùng cần phải được thiết kế sao cho dễ dàngđiều hướng và tìm kiếm thông tin, giúp người dùng tìm đượcthông tin một cách nhanh chóng và thuận tiện

1.3.5 Dễ dàng sử dụng:

 Giao diện người dùng cần phải được thiết kế đơn giản và dễ sửdụng, giúp người dùng mới dễ dàng tiếp cận và sử dụng hệ thốngmột cách tự nhiên

1.3.6 Thân thiện với công cụ tìm kiếm (SEO):

 Cần thiết kế website sao cho thân thiện với công cụ tìm kiếm(SEO), giúp website dễ dàng được tìm thấy và xếp hạng cao trêncác trang kết quả tìm kiếm

Trang 19

CHƯƠNG 2 PHÂN TÍCH THIẾT KẾ HỆ THỐNG 2.1 Biểu đồ use case

Trang 20

2.2 Mô hình hóa use case

2.2.1 Biểu đồ use case tổng quát

Dang nhap

Dang ki tai khoan

Lay lai mat khau

Thay doi mat khau

Cap nhat thong tin ca nhan Xem thong tin tai khoan

Dang xuat

Tao trang

Xoa trang

Them nguoi chinh sua

Xuat ma nguon cua trang

Chinh sua trang Xem chi tiet trang

Tao loi tat trang

Tao ban sao chep trang

Trang 21

2.2.2 Biểu đồ use case phân rã

Thay doi mat khau

Cap nhat thong tin ca nhan Dang ki tai khoan

Xem thong tin tai khoan

Tao loi tat trang

Tao ban sao chep trang

Luu trang

Tim kiem trang

Them nguoi chinh sua

Chinh sua trang Xuat ma nguon cua trang

Xem chi tiet trang

Dang nhap Nguoi dung

Trang 22

2.3 Mô tả chi tiết use case

2.3.1 Use case đăng ký tài khoản

Bảng 2.1: Mô tả chi tiết use case đăng ký tài khoản

Tên use case Đăng ký tài khoản

Mô tả vắn tắt Use case này cho phép người dùng đăng ký tài khoản sử

dụng ứng dụng

Luồng cơ bản - Use case này bắt đầu khi người dùng kích vào nút

“Đăng ký” trên màn hình Hệ thống sẽ yêu cầu nhậpcác thông tin (Email, họ, tên) để tạo tài khoản

- Người dùng kích vào nút “Đăng ký” Hệ thốngkiểm tra thông tin đăng ký, nếu hợp lệ hiển thị thôngbáo thành công, chuyển đến màn hình Đăng nhập Usecase kết thúc

Luồng rẽ nhánh - Tại bất kì thời điểm nào trong quá trình thực hiện

use case nếu không kết nối được với cơ sở dữ liệu thì

hệ thống sẽ hiển thị một thông báo lỗi và use case kếtthúc

- Người dùng hủy thao tác, ứng dụng trở lại trạngthái ban đầu

- Ứng dụng kiểm tra thông tin đăng ký, nếu khônghợp lệ hiển thị thông báo lỗi, yêu cầu nhập lại

Tiền điều kiện Người dùng truy cập ứng dụng

Hậu điều kiện Người dùng đăng ký tài khoản thành công sẽ có một bản

ghi mới trong bảng User

Yêu cầu đặc biệt Người dùng cần nhập đúng các thông tin yêu cầu để tạo

tài khoản

Hình 2.4: Biểu đồ hoạt động mô tả use case đăng ký tài khoản

Trang 23

2.3.2 Use case đăng nhập

Bảng 2.2: Mô tả chi tiết use case đăng nhập

Tên use case Đăng nhập

Mô tả vắn tắt Use case này cho phép người dùng đăng nhập vào hệ

thống

Luồng cơ bản - Use case này bắt đầu khi người dùng ấn vào nút

“Đăng nhập” trên màn hình Hệ thống sẽ yêu cầungười dùng nhập tên đăng nhập và mật khẩu

- Người dùng nhập đầy đủ thông tin yêu cầu và kíchvào nút “Đăng nhập” Hệ thống sẽ kiểm tra thông tinđăng nhập so với thông tin trong bảng User, nếu có tàikhoản trong bảng User thì sẽ được đăng nhập vàchuyển đến trang chủ Use case kết thúc

- Khi người dùng nhập thiếu hoặc sai thông tin, hệthống sẽ hiển thị thông báo lỗi và yêu cầu nhập lại

Tiền điều kiện Người dùng đã được cấp tài khoản để sử dụng ứng dụng

Hậu điệu kiện Nếu ca sử dụng thành công, người dùng được xác minh

danh tính và sử dụng các chức năng ứng dụng

Yêu cầu đặc biệt Người dùng cần nhập đúng thông tin đăng nhập.

Trang 24

Hình 2.5: Biểu đồ hoạt động use case đăng nhập

2.3.3 Use case xem thông tin tài khoản

Bảng 2.3: Mô tả chi tiết use case xem thông tin tài khoản

Tên use case Xem thông tin tài khoản

Mô tả vắn tắt User case này cho phép người dùng xem thông tin tài

khoản

Luồng cơ bản - Use case này bắt đầu khi người dùng kích vào

avata của mình ở góc trên bên phải màn hình Hệthống sẽ lấy thông tin tài khoản từ bảng User và hiểnthị lên màn hình Use case kết thúc

Tiền điều kiện Người dùng đăng nhập vào hệ thống

Hậu điều kiện Không có

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

Hình 2.6: Biểu đồ hoạt động mô tả use case xem thông tin tài khoản

2.3.4 Use case thay đổi mật khẩu

Bảng 2.4: Mô tả chi tiết use case lấy lại mật khẩu

Tên use case Thay đổi mật khẩu

Trang 25

Tác nhân Người dùng.

Mô tả vắn tắt User case này cho phép người dùng thay đổi mật khẩu

Luồng cơ bản - Use case này bắt đầu khi người dùng vào trang

thông tin tài khoản và kích vào nút “Chỉnh sửa” mậtkhẩu Hệ thống sẽ hiển thị yêu cầu nhập mật khẩu cũ

và mật khẩu mới

- Người dùng kích vào nút “Lưu” Hệ thống sẽ sosánh mật khẩu cũ trong bảng User, nếu trùng sẽ tiềnhành cập nhật mật khẩu mới Use case kết thúc

- Khi người dùng nhập sai mật khẩu cũ, hệ thống sẽhiển thị thông báo lỗi và yêu cầu nhập lại Người dùng

có thể nhập lại hoặc kết thúc thao tác

Tiền điều kiện Người dùng cần đăng nhập vào hệ thống

Hậu điều kiện Cập nhật thành công mật khẩu của một bản ghi trong

bảng User

Hình 2.7: Biểu đồ hoạt động mô tả use case thay đổi mật khẩu

2.3.5 Use case lấy lại mật khẩu

Bảng 2.5: Mô tả chi tiết use case lấy lại mật khẩu

Tên use case Lấy lại mật khẩu

Mô tả vắn tắt User case này cho phép người dùng lấy lại mật khẩu

Luồng cơ bản - Use case này bắt đầu khi người dùng kích nút

Trang 26

“Quên mật khẩu” trong mà hình đăng nhập Hệ thống

sẽ chuyển đến màn hình lấy lại mật khẩu để ngườidùng nhập email đăng kí tài khoản

- Người dùng nhập thông tin yêu cầu và bấm nút

“Gửi lại mật khẩu”

- Ứng dụng kiểm tra thông tin, nếu email đã đăng kýtài khoản thì tiến hành gửi mail kèm thông tin mậtkhẩu mới, chuyển đến màn hình Đăng nhập Use casekết thúc

- Ứng dụng kiểm tra thông tin, nếu email chưa đăng

ký tài khoản thì hiển thị thông báo lỗi, yêu cầu nhậplại

Tiền điều kiện Ứng dụng ở trạng thái đăng nhập, hiển thị giao diện đăng

nhập

Hậu điều kiện Người dùng nhận được thông tin mật khẩu mới

Hình 2.8: Biểu đồ hoạt động mô tả use case lấy lại mật khẩu

2.3.6 Use case cập nhật thông tin cá nhân

Bảng 2.6: Mô tả chi tiết use case cập nhật thông tin cá nhân

Tên use case Cập nhật thông tin cá nhân

Trang 27

Mô tả vắn tắt User case này cho phép người dùng cập nhật thông tin cá

nhân

Luồng cơ bản - Use case này bắt đầu khi người dùng vào trang

thông tin tài khoản và kích vào nút “Chỉnh sửa”

- Hệ thống sẽ hiển thị màn hình sửa thông tin cá nhângồm Họ và Tên

- Người dùng kích vào nút “Lưu” Hệ thống sẽ tiếnhành cập nhật thông tin cá nhân mới vào bản ghi trongbảng User Use case kết thúc

- Khi người dùng bỏ trống thông tin, hệ thống sẽhiển thị thông báo lỗi và bắt buộc phải nhập

Tiền điều kiện Người dùng cần đăng nhập vào hệ thống

Hậu điều kiện Cập nhật thành công thông tin tài của một bản ghi trong

bảng User

Hình 2.9: Biểu đồ hoạt động mô tả use case cập nhật thông tin cá nhân

2.3.7 Use case xem chi tiết trang giao diện

Bảng 2.7: Mô tả chi tiết use case xem chi tiết trang giao diện

Tên use case Xem chi tiết trang giao diện

Mô tả vắn tắt User case này cho phép người dùng xem chi tiết trang

giao diện

Luồng cơ bản - Use case này bắt đầu khi người dùng kích vào một

trang trên màn hình trang chủ Hệ thống sẽ lấy thông

Trang 28

tin trang từ bảng Page và hiển thị lên màn hình Usecase kết thúc.

Hình 2.10: Biểu đồ hoạt động mô tả use case xem thông tin tài khoản

2.3.8 Use case tạo trang giao diện

Bảng 2.8: Mô tả chi tiết use case tạo trang giao diện

Tên use case Tạo trang giao diện

Mô tả vắn tắt Use case này cho phép người dùng tạo trang giao diện

Luồng cơ bản - Use case bắt đầu khi người dùng chọn chức năng

New Page

- Ứng dụng hiển thị giao diện thông tin tạo trang

- Người dùng nhập thông tin trang giao diện và chọnSubmit

- Ứng dụng kiểm tra thông tin của người dùng, nếuthông tin trang không trùng thì tiến hành tạo trang giaodiện, chuyển đến màn hình chỉnh sửa trang giao diện.Use case kết thúc

Trang 29

- Ứng dụng kiểm tra thông tin của người dùng, nếuthông tin trang bị trùng thì hiển thị thông báo lỗi, yêucầu nhập lại

Tiền điều kiện Người dùng đã đăng nhập vào ứng dụng

Hậu điều kiện Người dùng tạo trang giao diện thành công

Hình 2.11: Biểu đồ hoạt động use case tạo trang giao diện

2.3.9 Use case chỉnh sửa trang giao diện

Bảng 2.9: Mô tả chi tiết use case chỉnh sửa trang giao diện

Tên use case Chỉnh sửa trang giao diện

Mô tả vắn tắt Use case này cho phép người dùng thực hiện chức năng

chỉnh sửa trang giao diện (chỉnh sửa về phần giao diện)

Luồng cơ bản - Use case bắt đầu khi người dùng bấm chọn vào

trang giao diện muốn chỉnh sửa

- Ứng dụng hiển thị màn hình Chỉnh sửa trang giaodiện

- Người dùng chỉnh sửa trang giao diện bằng cáchkéo thả rồi bấm chọn “Lưu”

- Ứng dụng lưu thông tin chỉnh sửa lần cuối Usecase kết thúc

Trang 30

Tiền điều kiện Người dùng đã đăng nhập ứng dụng

Hậu điều kiện Người dùng chỉnh sửa trang giao diện thành công

Hình 2.12: Biểu đồ hoạt động use case chỉnh sửa trang giao diện

2.3.10Use case tìm kiếm trang giao diện

Bảng 2.10: Mô tả chi tiết use case tìm kiếm trang giao diện

Tên use case Tìm kiếm trang giao diện

tìm kiếm trang giao diện

Tìm kiếm

- Người dùng nhập thông tin tìm kiếm

- Ứng dụng hiển thị danh sách trang giao diện khớpthông tin Use case kết thúc

Tiền điều kiện Người dùng đã đăng nhập vào ứng dụng

Trang 31

Hậu điều kiện Người dùng tìm kiếm trang giao diện thành công.

Hình 2.13: Biểu đồ hoạt động use case tìm kiếm trang giao diện

2.3.11Use case xóa trang giao diện

Bảng 2.11: Mô tả chi tiết use case xóa trang giao diện

Tên use case Xóa trang giao diện

Mô tả vắn tắt User case này cho phép người dùng xóa trang giao diện

Luồng cơ bản - Use case này bắt đầu khi người dùng kích vào dấu

ba chấm ở góc trên bên phải của trang giao diện Sau

đó kích nút “Xóa”

- Hệ thống sẽ hiển thị thông báo xác nhận xóa, khingười dùng kích nút “Xóa” Hệ thống sẽ xóa bản ghi đãchọn trong bảng Page và hiển thị lại danh sách

- Ở thông báo xác nhận xóa, khi người dùng kích nút

“Hủy”, hệ thống trở lại màn hình trang chủ

Trang 32

Hình 2.14: Biểu đồ hoạt động mô tả use case xóa trang giao diện

2.3.12Use case xuất mã nguồn trang giao diện

Bảng 2.12: Mô tả chi tiết use case xuất mã nguồn trang giao diện

Tên use case Xuất mã nguồn trang giao diện

Mô tả vắn tắt Use case cho phép người dùng thực hiện chức năng xuất

mã nguồn trang giao diện

Luồng cơ bản - Use case này bắt đầu khi người dùng chọn chức

năng Xuất

- Ứng dụng hiển thị giao diện cấu hình xuất mãnguồn

- Người dùng nhập thông tin yêu cầu

- Ứng dụng tải xuống mã nguồn trang giao diện theoyêu cầu Use case kết thúc

Tiền điều kiện Người dùng đang chỉnh sửa trang giao diện

Hậu điều kiện Người dùng xuất mã nguồn trang giao diện thành công

Hình 2.15: Biểu đồ hoạt động use case xuất mã nguồn trang giao diện

Trang 33

2.3.13Use case thêm người chỉnh sửa

Bảng 2.13: Mô tả chi tiết use case thêm người chỉnh sửa

Tên use case Thêm người chỉnh sửa

thêm người dùng khác chỉnh sửa cho trang giao diện

Chia s攃ऀ

- Ứng dụng hiển thị giao diện thêm người chỉnh sửa

- Người dùng nhập thông tin yêu cầu

- Ứng dụng cập nhật thông tin danh sách người chỉnhsửa trang giao diện Use case kết thúc

Tiền điều kiện Người dùng đang chỉnh sửa trang giao diện

Hậu điều kiện Người dùng thêm người chỉnh sửa trang giao diện thành

Trang 34

2.4 Phân tích use case

2.4.1 Use case đăng kí tài khoản

Hình 2.17: Biểu đồ lớp chức năng đăng ký tài khoản

Trang 35

: Nguoi dung : DangKyUI : DangKyController : User

1: Kich nut dang ky tren man hinh( )

2: Hien thi man hinh dang ky( )

3: Nhap thong tin

4: Kich nut "Dang Ky"( )

5: Tao tai khoan moi( )

6: CreateUser( )

7: return ket qua

8: Chuyen den trang chu( )

Hình 2.18: Biểu đồ trình tự chức năng đăng ký tài khoản

Trang 36

2.4.2 Use case đăng nhập

DangNhapUI

Kich nut dang nhap tren man hinh()

Hien thi man hinh dang nhap()

Kich nut "Dang nhap"()

Chuyen den trang chu()

<<boundary>>

DangNhapController Kiem tra thong tin dang nhap()

Trang 37

: Nguoi dung : DangNhapUI : DangNhapController : User

1: Kich nut dang nhap tren man hinh( )

2: Hien thi man hinh dang nhap( )

3: Dien thong tin dang nhap

4: Kich nut "Dang nhap"( )

5: Kiem tra thong tin dang nhap( )

6: getEmail( )

7: getPassword( )

8: return ket qua

9: Chuyen den trang chu( )

Hình 2.20: Biểu đồ trình tự chức năng đăng nhập

Trang 38

2.4.3 Use case xem thông tin tài khoản

XemThongTinTaiKhoanUI

Kich vao avata o goc phai man hinh()

Kich nut "My profile"()

Hien thi man hinh thong tin tai khoan()

<<boundary>>

User id firstName lastName photo cover email password

getID() setID() setFirstName() getFirstName() getLastName() setLastName() getPhoto() setPhoto() getCover() setCover() getEmail() setEmail() getPassword() setPassword() CreateUser() setUserById() getUserById() getUserByEmail()

Hình 2.21: Biểu đồ lớp chức năng xem thông tin tài khoản

XemThongTinTaiKhoanController

: XemThongTinTaiKhoanController

: User

1: Kich vao avata o goc phai man hinh( )

2: Kich nut "My profile"( )

3: Lay thong tin nguoi dung( )

4: getUserById( )

5: return ket qua

6: Hien thi man hinh thong tin tai khoan( )

Hình 2.22: Biểu đồ trình tự chức năng xem thông tin tài khoản

Trang 39

2.4.4 Use case lấy lại mật khẩu

1

LayLaiMatKhauUI Kich nut "Quen mat khau" trong form dang nhap()

Hien thi man hinh nhap email da dang ky()

Kich nut "Xac nhan"()

Hien thi man hinh dang nhap()

<<boundary>>

User id firstName lastName photo cover email password getID() setID() setFirstName() getFirstName() getLastName() setLastName() getPhoto() setPhoto() getCover() setCover() getEmail() setEmail() getPassword() setPassword() CreateUser() setUserById() getUserById() getUserByEmail()

<<entity>>

LayLaiMatKhauController Gui email cap lai mat khau random() Kiem tra email()

Trang 40

: Nguoi dung : LayLaiMatKhauUI :

LayLaiMatKhauController

: LayLaiMatKhauController

: User

1: Kich nut "Quen mat khau" trong form dang nhap( )

2: Hien thi man hinh nhap email da dang ky( )

3: Nhap email

4: Kich nut "Xac nhan"( )

7: Gui email cap lai mat khau random( )

8: setPassword( )

9: return ket qua

10: Hien thi man hinh dang nhap( )

5: Kiem tra email( )

6: getEmail( )

Hình 2.24 Biểu đồ trình tự chức năng lấy lại mật khẩu

Tiêu đề	Xây dựng ứng dụng hỗ trợ thiết kế giao diện website
Tác giả	Bùi Văn Mạnh
Người hướng dẫn	ThS. Nguyễn Thị Nhung
Trường học	Trường Đại học Công nghiệp Hà Nội
Chuyên ngành	Khoa học máy tính
Thể loại	Đồ án tốt nghiệp
Năm xuất bản	2024
Thành phố	Hà Nội

Định dạng
Số trang	82
Dung lượng	1,19 MB