Xây dựng website trao đổi đồ stuff exchange tại thành phố đà nẵng

Tên đề tài: Xây dựng website trao đổi đồ Stuff Exchange tại thành phố Đà NẵngSinh viên thực hiện: Nguyễn Thị Thu Thủy Nội dung tóm tắt Chúng ta đang sống trong một xã hội tiêu dùng đồ đạ

TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT

TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT

……….

……….

……….

……….

……….

……….

……….

……….

……….

……….

……….

……….

……….

……….

……….

……….

……….

……….

……….

……….

……….

……….

……….

……….

……….

……….

……….

……….

I

……….

……….

……….

……….

……….

……….

……….

……….

……….

……….

……….

……….

……….

……….

……….

……….

……….

……….

……….

……….

……….

……….

……….

……….

……….

……….

……….

……….

……….

II

Tên đề tài: Xây dựng website trao đổi đồ Stuff Exchange tại thành phố Đà Nẵng

Sinh viên thực hiện: Nguyễn Thị Thu Thủy

Nội dung tóm tắt

Chúng ta đang sống trong một xã hội tiêu dùng đồ đạc lớn, nhưng đáng tiếc,nhiều đồ vật lại bị lãng phí vì không sử dụng hoặc không còn nhu cầu sử dụng Tìnhtrạng này gây lãng phí tài nguyên, tăng chi phí và gây ô nhiễm môi trường do tạo ralượng lớn rác thải Để giải quyết vấn đề này, em đã lên ý tưởng xây dựng một trangweb trao đổi đồ mang tên Stuff Exchange, nhằm giúp giải quyết những vấn đề trên.Stuff Exchange là một nền tảng trực tuyến giúp người dùng dễ dàng và tiện lợitrao đổi đồ vật không sử dụng với những người khác Đây là một cách tái sử dụngnhững đồ vật không còn sử dụng để giảm lượng rác thải và tiết kiệm tài nguyên Trênnền tảng này, bạn có thể trao đổi đồ gia dụng, đồ điện tử, quần áo, sách và nhiều mặthàng khác

Không chỉ giúp giảm lượng rác thải, Stuff Exchange còn giúp bạn tiết kiệm chiphí bằng cách tìm kiếm những món đồ cần thiết mà không cần phải mua mới Bạn cóthể tìm thấy những đồ vật mong muốn và trao đổi với người dùng khác một cách dễdàng Điều này không chỉ giúp bạn tiết kiệm tiền mà còn giúp bảo vệ môi trường bằngcách giảm thiểu lượng đồ bị vứt bỏ

Để sử dụng nền tảng này, bạn chỉ cần đăng ký tài khoản và tạo một danh sáchnhững đồ vật mà bạn muốn trao đổi Sau đó, bạn có thể dễ dàng tìm kiếm các mặt hàngkhác trên nền tảng và đề xuất một giao dịch hoặc đồng ý với một giao dịch được đềxuất bởi người dùng khác

Với Stuff Exchange, chúng ta có thể cùng nhau xây dựng một cộng đồng bềnvững, giảm thiểu lãng phí tài nguyên và bảo vệ môi trường Hãy tham gia ngay để trảinghiệm lợi ích của việc tái sử dụng và trao đổi đồ vật không sử dụng đến

Bài báo cáo ngoài các nội dung gồm phần mở đầu và kết thì có bố cục 3 chương:CHƯƠNG 1: CƠ SỞ LÝ THUYẾT

Chương này trình bày tổng quan về việc sử dụng các phần mềm hỗ trợ xây dựngứng dụng, các công cụ thường xuyên sử dụng để xây dựng nền tảng cho bài toán Mô

tả một số công nghệ mới hỗ trợ phát triển ứng dụng

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

III

bày những hướng chức năng cơ bản cho người dùng, sơ đồ cơ sở dữ liệu…

CHƯƠNG 3: TRIỂN KHAI VÀ ĐÁNH GIÁ KẾT QUẢ

Trên cơ sở tìm hiểu và phân tích bài toán liên quan, đặc biệt là các chức năng hệthống Từ các phân tích hệ thống và dữ liệu có được, ứng dụng được triển khai và cậpnhật

IV

KHOA CÔNG NGHỆ SỐ NAM

Độc lập - Tự do - Hạnh phúc

NHIỆM VỤ ĐỒ ÁN TỐT NGHIỆP

Giảng viên hướng dẫn: ThS Đỗ Phú huy

Sinh viên thực hiện: Nguyễn Thị Thu Thủy Mã SV: 1911505310266

1 Tên đề tài: Xây dựng website Trao đổi đồ StuffExchange tại thành phố Đà Nẵng

2 Các số liệu, tài liệu ban đầu:

Những nhu cầu chính của người dùng khi sử dụng website có thể bao gồm:

- Dựa trên nhu cầu về giao dịch và trao đổi sản phẩm Người dùng website để tìm

kiếm các sản phẩm hoặc dịch vụ mà họ quan tâm và muốn trao đổi Họ có nhu cầu

tìm thấy những giao dịch phù hợp và thuận tiện

- Dựa vào nhu cầu tiết kiệm và hạn chế rác thải của mọi người Nhờ vào điều này mà

mọi người có thể dễ dàng tìm kiếm những sản phẩm yêu thích theo nhu cầu, có thể

tái sử dụng món đồ và hạn chế lượng rác thải ra môi trường

- Dựa vào nhu cầu muốn trao đổi được tìm thấy thông qua các nhóm qua Facebook,

qua các cửa hàng thanh lý

- Các tài liệu tham khảo lấy từ nhiều nguồn khác nhau thông qua việc tìm kiếm

thông tin trên các phương tiện truyền thông và một số website nước ngoài

Từ việc hiểu và đáp ứng những nhu cầu này, StuffExchange có thể tạo ra trải nghiệm

người dùng tốt và hấp dẫn, khuyến khích người dùng sử dụng và tham gia vào cộng

đồng trao đổi sản phẩm

3 Nội dung chính của đồ án:

Bài báo cáo ngoài các nội dung gồm phần mở đầu và kết thì có bố cục 3 chương:

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

- Chương này trình bày tổng quan về việc sử dụng các phần mềm hỗ trợ xây dựng

ứng dụng, các công cụ thường xuyên sử dụng để xây dựng nền tảng cho bài toán

- Mô tả một số công nghệ mới hỗ trợ phát triển ứng dụng.

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

- Khảo sát yêu cầu

- Chương này trình bày một hướng tiếp cận trong việc phân tích hệ thống

- Trình bày những hướng chức năng cơ bản cho người dùng, sơ đồ cơ sở dữ liệu…

V

- Trên cơ sở tìm hiểu và phân tích bài toán liên quan, đặc biệt là các chức năng hệ

thống

- Từ các phân tích hệ thống và dữ liệu có được, ứng dụng được triển khai và cập

nhật

- Công cụ xây dựng, thiết kế giao diện và xây dựng hệ thống

Chương 4: Kết luận và hướng phát triển

- Kết luận những các năng đã làm được và chưa làm được

- Đưa ra hướng phát triển

LỜI NÓI ĐẦU

Lời đầu tiên, em xin chân thành cảm ơn Trường Đại Học Sư phạm Kỹ thuật – Đại

học Đà Nẵng đã tạo điều kiện cho em có được môi trường học tập và những sự hỗ trợ tốt nhất để em có thể hoàn thành đồ án tốt nghiệp này.

Em xin cảm ơn quý thầy cô thuộc khoa Công Nghệ Số trường Đại Học Sư Phạm

Kỹ Thuật - Đại Học Đà Nẵng đã truyền đạt những kiến thức cần thiết và những kinh nghiệm quý báu cho em trong suốt thời gian 4 năm trên giảng đường để em có thể

thực hiện tốt đề tài này Đặc biệt, em xin gửi lời cảm ơn chân thành tới thầy ThS Lê

Vũ- giáo viên chủ nhiệm lớp 19T2 cùng với thầy ThS Đỗ Phú Huy đã giúp đỡ chúng

em rất nhiều trong quá trình học tập và công việc.

Trong quá trình thực hiện đề tài, do kiến thức và thời gian còn hạn chế nên không thể tránh khỏi những sai sót Vì vậy em mong quý thầy, cô thông cảm và góp ý

để em có thể hoàn thiện đề tài Và những lời góp ý đó có thể giúp em có thể tránh được những sai lầm sau này.

Em xin chân thành cảm ơn!

Đà Nẵng, ngày 07 tháng 6 năm 2023

Sinh viên thực hiện

Nguyễn Thị Thu Thủy

VII

VIII

CAM ĐOAN

Em xin cam đoan:

1 Những nội dung trong luận văn này do tôi thực hiện dưới sự hướng dẫn của Ths

Sinh viên thực hiện

Nguyễn Thị Thu Thủy

IX

MỤC LỤC

NHẬN XÉT CỦA NGƯỜI HƯỚNG DẪN I NHẬN XÉT CỦA NGƯỜI PHẢN BIỆN II LỜI NÓI ĐẦU VII CAM ĐOAN VIII MỤC LỤC IX MỤC LỤC HÌNH ẢNH XIV DANH MỤC BẢNG BIỂU XVI DANH MỤC CHỮ VIẾT TẮT TIẾNG VIỆT XVII DANH MỤC CHỮ VIẾT TẮT TIẾNG ANH XVIII

MỞ ĐẦU 1

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

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

3 Nhiệm vụ 2

2 Đối tượng nghiên cứu và phạm vi nghiên cứu 2

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

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

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

4 Giải pháp công nghệ 2

5 Cấu trúc đồ án 3

5.1 Phần mở đầu 3

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

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

5.4 Chương 3: Kết quả triển khai hệ thống 3

X

5.5 Phần Kết luận 3

Chương 1 CƠ SỞ LÝ THUYẾT 4

1.1 Giới thiệu hệ quản trị Cơ sở dữ liệu MySQL 4

1.1.1 Đặc điểm của MySQL 4

1.1.2 Các lợi ích của hệ quản trị Cơ sở dữ liệu MySQL 5

1.2 Giới thiệu ngôn ngữ lập trình Javascript 6

1.2.1 Giới thiệu Javascript 6

1.2.2 Công dụng của Javascript 7

1.2.3 Javascript hoạt động như thế nào? 7

1.2.4 Thư viện Javascript 8

1.3 Angular– Framework 8

1.3.1 Khái quát về Angular 8

1.3.2 Các tính năng cơ bản của Angular 9

1.3.3 Lợi ích và hạn chế của Angular 10

1.4 Javaspring boot 11

1.4.1 Khái quát JavaSpring boot 11

1.4.2 Một số tính năng quan trọng của Spring Boot 11

1.5 Công cụ sử dụng phát triển hệ thống 12

1.5.1 Visual Studio Code 12

1.6 Postman 13

1.6.1 Khái niệm 13

1.6.2 Lợi ích sử dụng 13

Chương 2 PHÂN TÍCH, THIẾT KẾ HỆ THỐNG 15

2.1 Xác định các tác nhân 15

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

XI

2.2.1 Khách vãng lai 15

2.2.2 Khách thành viên 15

2.2.3 Quản trị viên 16

2.3 Yêu cầu chất lượng 16

2.4 Sơ đồ Usecase cho hệ thống 17

2.5 Sơ đồ Usecase cho hệ thống 17

2.5.1 Sơ đồ Usecase chức năng Quản lý sản phẩm (Người dùng) 18

2.5.2 Sơ đồ Usecase chức năng Tìm kiếm 18

2.5.3 Sơ đồ Usecase Xem chi tiết sản phẩm 19

2.6 Đặc tả chức năng 19

2.6.1 Usecase Đăng ký 19

2.6.2 Usecase Đăng nhập 21

2.6.3 Usecase Đăng sản phẩm 23

2.6.4 Usecase Gửi yêu cầu trao đổi 24

2.6.5 Usecase Nhận yêu cầu trao đổi 26

2.6.6 Usecase Tìm kiếm 28

2.6.7 Usecase Quản lý sản phẩm 29

2.7 Thiết kế cơ sở dữ liệu hệ thống 33

2.7.1 tbl_User 33

2.7.2 tbl_UserAuthority 33

2.7.3 tbl_Authority 33

2.7.4 tbl_ Profile 33

2.7.5 tbl_Level 34

2.7.6 tbl_Ward 34

2.7.7 tbl_District 34

XII

2.7.8 tbl_City 35

2.7.9 tbl_Product 35

2.7.10 tbl_ Favorite 35

2.7.11 tbl_ProductCategory 36

2.7.12 tbl_Category 36

2.7.13 tbl_Image 36

2.7.14 tbl_File 36

2.7.15 tbl_NotificationToken 37

2.7.16 tbl_Exchange 37

Chương 3 KẾT QUẢ TRIỂN KHAI HỆ THỐNG 39

3.1 Thiết kế giao diện 39

3.1.1 Trang Đăng ký 39

3.1.2 Trang Đăng nhập 40

3.1.3 Trang chủ 41

3.1.4 Trang sản phẩm 42

3.1.5 Trang trao đổi 43

3.1.6 Trang cập nhật thông tin cá nhân 44

3.1.7 Trang sản phẩm yêu thích 45

3.1.8 Trang Đăng sản phẩm 46

3.1.9 Trang quản lý sản phẩm (Khách thành viên) 47

3.1.10 Trang Tìm kiếm 48

3.1.11 Trang nhắn tin 49

3.1.12 Trang thống kê 50

3.1.13 Trang quản lý người dùng 51

Chương 4 KẾT LUẬN 52

XIII

4.1 Ưu điểm 52

4.2 Hạn chế 52

4.3 Hướng phát triển 52

TÀI LIỆU THAM KHẢO 54

XIV

MỤC LỤC HÌNH ẢNH

Hình 1.1: Minh họa cho logo MySQL 4

Hình 1.2: Hoạt động giữa máy chủ và máy khách 5

Hình 1.3: Logo của Javascript 6

Hình 1.4: Logo Angular 9

Hình 1.5: Minh họa các tính năng của Angular 10

Hình 1.6: Hình ảnh minh họa Logo Spring 11

Hình 1.7: Hình ảnh minh họa logo Visual Studio Code 12

Hình 2.1: Sơ đồ Usecase cho hệ thống 17

Hình 2.2: Sơ đồ Usecase chức năng Quản lý sản phẩm 18

Hình 2.3: Sơ đồ Usecase chức năng Tìm kiếm 18

Hình 2.4: Sơ đồ Usecase chức năng Xem chi tiết sản phẩm 19

Hình 2.5: Sơ đồ hoạt động chức năng Đăng ký 21

Hình 2.6: Sơ đồ hoạt động chức năng Đăng sản phẩm 24

Hình 2.7: Sơ đồ hoạt động chức năng Gửi yêu cầu trao đổi 26

Hình 2.8: Sơ đồ hoạt động chức năng Nhận yêu cầu trao đổi 28

Hình 2.9: Kịch bản chức năng Tìm kiếm 29

Hình 2.10: Sơ đồ hoạt động chức năng Tìm kiếm 29

Hình 2.11: Sơ đồ hoạt động chức năng Quản lý giỏ hàng 31

Hình 2.12: Sơ đồ ERD của hệ thống 32

Hình 3.1: Giao diện trang Đăng Ký 39

Hình 3.2: Giao diện trang Đăng nhập 40

Hình 3.3: Giao diện trang chủ 41

Hình 3.4: Giao diện sản phẩm 42

Hình 3.5: Giao diện trang trao đổi 43

Hình 3.6: Giao diện trang Cập nhật thông tin cá nhân 44

Hình 3.7: Giao diện trang Sản phẩm yêu thích 45

Hình 3.8: Giao diện trang Đăng sản phẩm 46

XV

Hình 3.9: Giao diện trang Quản lý sản phẩm 47

Hình 3.10: Giao diện trang danh sách khóa học - Giảng viên 48

Hình 3.11: Giao diện trang Nhắn tin 49

Hình 3.12: Giao diện trang thống kê 50

Hình 3.13: Giao diện trang quản lý người dùng 51

XVI

DANH MỤC BẢNG BIỂU

Bảng 2 1: Kịch bảng chức năng Đăng ký 20

Bảng 2 2: Kịch bản chức năng Đăng nhập 22

Bảng 2 3: Kịch bản chức năng Đăng sản phẩm 23

Bảng 2 4: Kịch bản chức năng Gửi yêu cầu trao đỏi 25

Bảng 2 5: Kịch bản chức năng Nhận yêu cầu trao đổi 27

Bảng 2 6: Kịch bản chức năng Tìm kiếm 29

Bảng 2 7: Thông tin dữ liệu bảng Tài khoản người dùng 33

Bảng 2 8: Thông tin dữ liệu bảng Chi tiết quyền 33

Bảng 2 9: Thông tin dữ liệu bảng Quyền 33

Bảng 2 10: Thông tin dữ liệu bảng Thông tin người dùng 34

Bảng 2 11: Thông tin dữ liệu bảng Gói người dùng 34

Bảng 2 12: Thông tin dữ liệu bảng Phường xã 34

Bảng 2 13: Thông tin dữ liệu bảng Quận huyện 34

Bảng 2 14: Thông tin dữ liệu bảng Tỉnh/ Thành phố 35

Bảng 2 15: Thông tin dữ liệu bảng Sản phẩm 35

Bảng 2 16: Thông tin dữ liệu bảng Sản phẩm yêu thích 36

Bảng 2 17: Thông tin dữ liệu bảng Chi tiết danh mục sản phẩm 36

Bảng 2 18: Thông tin dữ liệu bảng Danh mục 36

Bảng 2 19: Thông tin dữ liệu bảng Hình ảnh 36

Bảng 2 20: Thông tin dữ liệu bảng File 37

Bảng 2 21: Thông tin dữ liệu bảng Thông báo 37

Bảng 2 22: Thông tin dữ liệu bảng trao đổi 38

XVII

DANH MỤC CHỮ VIẾT TẮT TIẾNG VIỆT

XVIII

DANH MỤC CHỮ VIẾT TẮT TIẾNG ANH

STT Chữ viết tắt Giải nghĩa Nghĩa tiếng Việt

1 HTML Hyper Text Markup Language Ngôn ngữ đánh dấu siêu văn bản

2 CSS Cascading Style Sheets

Ngôn ngữ định dạng các phần tử

được tạo ra bởi ngôn ngữ đánh

dấu siêu văn bản

3 JS Javascript Ngôn ngữ lập trình phía client

4 MVC Model – View – Controller Mô hình kiến trúc xây dựng ứng

dụng

5 UI User interface Giao diện người dùng

6 API Application Programming

Interface

Giao diện chương trình ứng dụng

XIX

MỞ ĐẦU

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

Mỗi quyển sách đã đọc là một kho tàng tri thức đầy giá trị Nhưng đáng tiếc,nhiều người mua sách về chỉ để xếp lên giá, không bao giờ đọc lại Đối lập vớiđiều đó, có nhiều bạn trẻ đam mê sách nhưng lại gặp khó khăn khi muốn tìm muanhững cuốn sách hiếm hoặc đã hết bản Điều này làm ta nhận ra rằng việc lãng phítài nguyên sách đang diễn ra một cách vô tình Chẳng phải ai cũng muốn lãng phí,chỉ đơn giản là họ không biết cách chia sẻ với người khác

Dù tỷ lệ giới trẻ đọc sách ngày càng giảm, sự yêu thích văn hóa đọc vẫn khôngbao giờ ngừng phát triển Và tại đây, ngồi trên ghế nhà trường, là một sinh viênđam mê đọc sách, em không muốn để tài nguyên sách bị lãng phí Em muốn chia

sẻ sách với mọi người, tạo một cầu nối để mọi người có thể trao đổi sách và nhiềuhơn thế nữa - trao đổi mọi thứ

Với ý tưởng này, em mong muốn “Xây dựng website trao đổi đồ StuffExchange tại Thành phố Đà Nẵng” Thay vì vứt bỏ hoặc lãng phí những đồ

cũ, chúng ta có thể mang chúng đi đổi lấy những thứ mình cần Trang web này sẽ

mở ra không gian để mọi người tiếp cận những sản phẩm đa dạng và "đổi món"những món đồ mình đang cần Đặc biệt, trong thời kỳ kinh tế khó khăn và biếnđộng, khái niệm "tiết kiệm" trở thành yếu tố quan trọng hàng đầu trong cuộc sốnghàng ngày

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

 Xây dựng website mang tên “StuffExchange”

 Xây dựng một website với giao diện trực quan, dễ dàng sử dụng nhằm giúp mọingười có thể trao đổi đồ nhanh chóng:

 Khách vãng lai: Tìm kiếm lọc, xem danh mục, xem tất cả sản phẩm trongdanh mục, xem sản phẩm, xem chi tiết sản phẩm, xem bình luận, đăng ký

 Khách thành viên: Đăng nhập, cập nhật thông tin cá nhân, đổi mật khẩu,xem thông báo, xem sản phẩm yêu thích, xem tất cả sản phẩm mình đã

đăng, thêm sửa xóa bài đăng, trao đổi sản phẩm, hành động trao đổi, tròchuyện, báo cáo bài viết, báo cáo người dùng

 Quản trị viên: Quản lý tài khoản, quản lý bài đăng, quản lý danh mục, thống

kê, khóa tài khoản, thống kê số lượng người dùng, lượt trao đổi

3 Nhiệm vụ

 Là cơ hội để em có những kiến thức về phương pháp phát triển website, đồngthời rèn luyện cho em kỹ năng mô hình hóa, kỹ năng phân tích và thiết kế hướngđối tượng làm cơ sở để tạo ra các bản thiết kế website chất lượng cao

 Nghiên cứu những quy trình cần đổi mới để đưa vào hệ thống

 Có kỹ năng tìm kiếm và lựa chọn kiến thức để dùng vào những mục đích riêngbiệt, có các kỹ năng phát triển giữa những xu hướng đang thay đổi

 Nghiên cứu các công cụ, framework được sử dụng để xây dựng website:Angular, Java Spring Boot, MySQL

 Có được các kỹ năng thực tiễn nghề nghiệp

2 Đối tượng nghiên cứu và phạm vi nghiên cứu

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

Ứng dụng sẽ phục vụ tác nghiệp cho các tác nhân có liên quan:

 Khách vãng lai

 Khách thành viên

 Quản trị viên

b Phạm vi nghiên cứu

 Đề tài nghiên cứu chỉ áp dụng trên địa bàn Thành phố Đà Nẵng

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

 Áp dụng phương pháp nghiên cứu lý thuyết (phương pháp thu thập thông tinqua sách, các tài liệu, trang web) để tìm được các cơ sở lý thuyết liên quan đếnvấn đề mình nghiên cứu

4 Giải pháp công nghệ

 Ngôn ngữ lập trình: JavaScript

 Frontend: Angular, TypeScript

 Backend: JavaSpring Boot

 Hệ quản trị cơ sở dữ liệu: MySQL

 Công cụ hỗ trợ: StarUML, Visual Code, Postman, MySQL Workbench

5 Cấu trúc đồ án

5.1 Phần mở đầu

Giới thiệu lý do và các mục tiêu mà đề tài cần giải quyết, phạm vi nghiên cứu của

đề tài Giới thiệu tóm tắt nội dung sẽ được trình bày trong các chương trình tiếp theo.Nghiên cứu, tìm hiểu và đưa ra lý do chọn đề tài, mục tiêu và mục đích khi xây dựng

và phát triển đề tài Xác định rỏ phạm vi và đối tượng hướng đến, giải pháp công nghệ

để triển khai, xây dựng đề tài, đồng thời phân tích đặc tả yêu cầu nghiệp vụ

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

Tìm hiểu, giới thiệu tổng quát các kiến thức về ngôn ngữ lập trình JavaScript, và

hệ quản trị cơ sở dữ liệu MySQL

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

Phân tích các tác nhân và chức năng của từng tác nhân của hệ thống Thiết kế sơ

đồ use-case, sơ đồ hoạt động, sơ đồ ERD Thiết kế cơ sở dữ liệu Xây dựng kịch bảngcho từng use-case hệ thống

5.4 Chương 3: Kết quả triển khai hệ thống

Xây dựng giao diện và chức năng của hệ thống

Chương 1

CƠ SỞ LÝ THUYẾT

1.1 Giới thiệu hệ quản trị Cơ sở dữ liệu MySQL

1.1.1 Đặc điểm của MySQL

1.1.1.1 Khái niệm

MySQL là một hệ thống quản lý cơ sở dữ liệu quan hệ mã nguồn mở (RDBMS)

dựa trên ngôn ngữ truy vấn có cấu trúc (SQ)2 được phát triển, phân phối và hỗ trợ bởitập đoàn Oracle MySQL chạy trên hầu hết tất cả các nền tảng, bao gồm cả Linux,UNIX và Windows MySQL thường được kết hợp với các ứng dụng web

Hình 1.1: Minh họa cho logo MySQL

1.1.1.2 Cách thức hoạt động MySQL

MySQL dựa trên mô hình client-server Cốt lõi của MySQL là máy chủMySQL, xử lý tất cả các hướng dẫn cơ sở dữ liệu (hoặc các lệnh) Máy chủ MySQL cósẵn như là một chương trình riêng biệt để sử dụng trong môi trường mạng client-server

và như một thư viện có thể được nhúng (hoặc liên kết) vào các ứng dụng riêng biệt

MySQL hoạt động cùng với một số chương trình tiện ích hỗ trợ quản trị cơ sở

dữ liệu MySQL Các lệnh được gửi đến MySQLServer thông qua máy khách MySQL,được cài đặt trên máy tính

Hình 1.1: Hoạt động giữa máy chủ và máy kháchMySQL ban đầu được phát triển để xử lý cơ sở dữ liệu lớn một cách nhanhchóng Mặc dù MySQL thường chỉ được cài đặt trên một máy, nhưng nó có thể gửi cơ

sở dữ liệu đến nhiều vị trí, vì người dùng có thể truy cập thông qua các giao diện máykhách MySQL khác nhau Các giao diện này gửi các câu lệnh SQL đến máy chủ vàsau đó hiển thị kết quả

1.1.2 Các lợi ích của hệ quản trị Cơ sở dữ liệu MySQL

1.1.2.1 Tốc độ bảo mật cao

Sở hữu mức độ bảo mật cao giúp MySQL khó có thể bị các hacker tấn công,đảm bảo an toàn cho hoạt động của mỗi website Bởi thế, việc quản trị dữ liệu cho cácweb lớn hay nhỏ, với lượng dữ liệu nhiều hay ít đều được hỗ trợ với mức độ an toàn lýtưởng

1.1.2.2 Tốc độ nhanh chóng

Một ưu điểm không thể thiếu khi đánh giá về MySQL chính là tốc độ nhanhchóng, ấn tượng khi sử dụng Với tốc độ truy vấn, cũng như khả năng phản hồi dữ liệu

ấn tượng thì việc sử dụng MySQL luôn được đánh giá cao, trở thành lựa chọn lý tưởng

để nâng cao hiệu quả công việc

1.1.2.3 Dễ dàng sử dụng

Việc sử dụng MySQL trực quan, đơn giản và dễ dàng Bởi thế, nó thích hợp vớimọi đối tượng người dùng dù có kiến thức liên quan chuyên sâu tới đâu Dù là ngườimới, hay có kinh nghiệm đều có thể ứng dụng MySQL hiệu quả để hỗ trợ tốt cho yêucầu, cho những đòi hỏi thực tế trong công việc

1.1.2.4 Dễ dàng mở rộng

Là một mã nguồn mở giúp hệ quản trị dữ liệu MySQL khi sử dụng đảm bảo dễdàng phát triển, mở rộng để đáp ứng tốt cho nhu cầu sử dụng thực tế của con người.Với yêu cầu đa dạng, ngày càng phức tạp trong phát triển và duy trì hoạt động củawebsite thì MySQL với việc dễ dàng mở rộng mang lại sự chủ động trong công việc

1.1.2.5 Hoàn toàn miễn phí

Với hệ quản trị dữ liệu MySQL khi đưa vào sử dụng giúp người dùng có khảnăng tiết kiệm chi phí hiệu quả Hoàn toàn miễn phí cũng làm nên ưu điểm, lợi ích chongười dùng khi lựa chọn MySQL để đáp ứng cho nhu cầu của chính mình Đây cũng là

lý do mà nó được tin tưởng sự dụng, được nhiều lập trình viên ưa chuộng chọn lựa

1.2 Giới thiệu ngôn ngữ lập trình Javascript

1.2.1 Giới thiệu Javascript

JavaScript là ngôn ngữ lập trình được nhà phát triển sử dụng để tạo trang web

tương tác Từ làm mới bảng tin trên trang mạng xã hội đến hiển thị hình ảnh động vàbản đồ tương tác, các chức năng của JavaScript có thể cải thiện trải nghiệm ngườidùng của trang web Là ngôn ngữ kịch bản phía máy khách, JavaScript là một trongnhững công nghệ cốt lõi của World Wide Web

Hình 1.1: Logo của Javascript

Ví dụ: khi duyệt internet, bất cứ khi nào bạn thấy quảng cáo quay vòng dạng

hình ảnh, menu thả xuống nhấp để hiển thị hoặc màu sắc phần tử thay đổi động trêntrang web cũng chính là lúc bạn thấy các hiệu ứng của JavaScript

1.2.2 Công dụng của Javascript

Trước đây, các trang web có dạng tĩnh, tương tự như các trang trong một cuốnsách Một trang tĩnh chủ yếu hiển thị thông tin theo một bố cục cố định và không làmđược mọi thứ mà chúng ta mong đợi như ở một trang web hiện đại JavaScript dầnđược biết đến như một công nghệ phía trình duyệt để làm cho các ứng dụng web linhhoạt hơn Sử dụng JavaScript, các trình duyệt có thể phản hồi tương tác của ngườidùng và thay đổi bố cục của nội dung trên trang web

Khi ngôn ngữ này phát triển hoàn thiện, các nhà phát triển JavaScript đã thiếtlập các thư viện, khung và cách thức lập trình cũng như bắt đầu sử dụng ngôn ngữ nàybên ngoài trình duyệt web Ngày nay, bạn có thể sử dụng JavaScript để thực hiện hoạtđộng phát triển cả ở phía máy khách và máy chủ

1.2.3 Javascript hoạt động như thế nào?

1.2.3.1 Phía máy khách

Sau đây là tổng quan về cách thức hoạt động của JavaScript phía máy khách:

 Trình duyệt tải một trang web khi bạn truy cập trang đó

 Trong khi tải, trình duyệt chuyển đổi trang và tất cả các phần tử của trang,chẳng hạn như các nút, nhãn và hộp thả xuống, thành một cấu trúc dữ liệu đượcgọi là Mô hình đối tượng tài liệu (DOM)

 Công cụ JavaScript của trình duyệt chuyển đổi mã JavaScript thành mãbytecode Mã này đóng vai trò là trung gian giữa cú pháp JavaScript và máy

 Các sự kiện khác nhau, chẳng hạn như nhấp vào nút, sẽ kích hoạt việc thực thikhối mã JavaScript được liên kết Sau đó, công cụ này sẽ diễn giải bytecode vàthực hiện các thay đổi đối với DOM

 Trình duyệt hiển thị DOM mới

1.2.3.2 Phía máy chủ

JavaScript phía máy chủ đề cập đến việc sử dụng ngôn ngữ viết mã trong logicmáy chủ back-end Trong trường hợp này, công cụ JavaScript nằm trực tiếp trên máychủ Hàm JavaScript phía máy chủ có thể truy cập cơ sở dữ liệu, thực hiện các phéptoán logic khác nhau và phản hồi nhiều loại sự kiện do hệ điều hành của máy chủ kích

hoạt Ưu điểm chính của viết tập lệnh phía máy chủ là bạn có khả năng tùy chỉnh linhhoạt phản hồi của trang web dựa trên yêu cầu và quyền truy cập của mình cũng nhưtheo yêu cầu thông tin từ trang web.

1.2.4 Thư viện Javascript

Thư viện JavaScript là tập hợp các đoạn mã viết sẵn mà các nhà phát triển web

có thể tái sử dụng để thực hiện các hàm JavaScript chuẩn Mã thư viện JavaScriptđược gắn vào phần còn lại của mã dự án khi cần thiết Nếu bạn coi mã ứng dụngJavaScript như một ngôi nhà thì các thư viện JavaScript sẽ giống như đồ nội thất làmsẵn mà các nhà phát triển có thể sử dụng để cải thiện chức năng của ngôi nhà

Sau đây là một số cách sử dụng thư viện JavaScript phổ biến:

 Trực quan hóa dữ liệu

 Điều chỉnh DOM

 Biểu mẫu

 Các hàm toán học và văn bản

1.3 Angular– Framework

1.3.1 Khái quát về Angular

Angular là một mã nguồn mở (open source) hay Javascript framework hoàntoàn miễn phí chuyên dụng dành cho công việc viết giao diện web Đây là sản phẩmđược viết bởi Misko Hevery và Adam Abrons (một người bạn của Misko Hevery) Sau

đó, Angular chính thức được phát triển và duy trì bởi Google từ năm 2009

Hiểu theo cách đơn giản, Angular là khung làm việc của Javascript MVC phíaclient (máy khách) với mục đích phát triển ứng dụng web động Angular được xem là

framework frontend mạnh mẽ và vô cùng chuyên dụng bởi các lập trình viênthực hiện việc cắt HTML cao cấp

Hình 1.1: Logo AngularAngular là một nền tảng phát triển được xây dựng dựa trên Javascript, có khảnăng mở rộng quy mô không chỉ các dự án của một nhà phát triển mà còn các ứngdụng cấp doanh nghiệp, nó bao gồm:

 Một khuôn khổ xây dựng ứng dụng web có khả năng mở rộng dựa trên cácthành phần

 Một bộ sưu tập thư viện tốt sẽ được tích hợp nhiều tính năng như quản lý biểumẫu, định tuyến, giao tiếp máy khách-máy chủ

 Một bộ công cụ dành riêng cho nhà phát triển để bạn có thể phát triển, xây dựng

và cập nhật nhanh chóng các bộ mã

1.3.2 Các tính năng cơ bản của Angular

Một số những tính năng cơ bản mà bạn có thể thấy khi tìm hiểu về Angular đó là:

 Controller: Khả năng xử lý dữ liệu cho các đối tượng $scope để các bên giao

diện có thể hiển thị tương ứng với những dữ liệu mà nó sử dụng

 Data binding: Đây được xem là tính năng ấn tượng nhất của Angular đối với

các lập trình viên Nhờ tính tự động, tức thời mà Data Binding có thể tự độngcập nhật được những thay đổi trên giao diện dù đó là những thay đổi nhỏ nhất

 Service: Là một singleton object có thể khởi tạo cho ứng dụng một lần duy nhất

đồng thời cung cấp các phương án dữ liệu có sẵn như $rootElement, $http,

 Filter: Nhiệm vụ của tính năng này là lọc những tập hợp con từ phía bên trong

item của các mảng đồng thời trả nhanh về các mảng mới

 Temple: Là thành phần của view với khả năng hiển thị thông tin từ bộ điều

khiển

 Routing: Là sự chuyển đổi qua lại giữa các view và các action có trong

controller

Hình 1.1: Minh họa các tính năng của Angular

1.3.3 Lợi ích và hạn chế của Angular

 Bạn có thể dễ dàng thực hiện Unit Test và tái sử dụng component

 Angular hỗ trợ các lập trình viên có thể viết được ít code hơn với nhiều chứcnăng hơn

 Bạn có thể chạy được AngularJS nhanh chóng trên nhiều loại trình duyệtkhác nhau (trên cả mobile và pc)

SVTH: Nguyễn Thị Thu Thủy 10

 Angular giữ vị trí đầu bảng trong việc sử dụng thực tế, tìm kiếm khoá họchiện hành, tìm kiếm cộng đồng hỗ trợ,

 Điểm hạn chế cần khắc phục:

 Bản chất của Angular là những các Front end và Front end lại không thể bảomật được bằng Back end Chính bởi điều này mà bạn cần thiết phải xâydựng một hệ thống kiểm tra dữ liệu khi sử dụng API để kết quả trả về đượctốt nhất

 Website sẽ không hoàn toàn có thể sử dụng được dựa trên trình duyệt nếucác trình duyệt nói trên sở hữu tính năng Disable Javascript

1.4 Javaspring boot

1.4.1 Khái quát JavaSpring boot

Spring Boot là một extension của Spring Framework giúp các lập trình viên loại

bỏ các bước cấu hình phức tạp mà Spring bắt buộc Spring Boot là dự án phát triểnbởi ngôn ngữ Java (JAV) trong hệ sinh thái Spring framework

Hình 1.1: Hình ảnh minh họa Logo Spring

1.4.2 Một số tính năng quan trọng của Spring Boot

 SpringApplication: Khi lập trình xong và bạn chỉ muốn chạy thử nghiệm thì

nên làm thế nào? Bạn chỉ cần gọi run() là được, vì Spring Boot được thiết kếtheo dạng “just run” Giúp cho các lập trình viên chỉ cần cấu hình ít Springnhất, phần còn lại Spring Boot sẽ lo liệu

 Externalized Configuration: Bạn mong muốn tạo nên một ứng dụng có thể

chạy trên nhiều loại môi trường khác nhau? Spring Boot sẽ giúp bạn config cấuhình từ ngoài và ứng dụng của bạn sẽ có thể chạy thoải mái

SVTH: Nguyễn Thị Thu Thủy 11

 Profiles: Nếu có nhiều config khác nhau, bạn có thể sử dụng Profile để phân

chia từng loại cho từng môi trường để dễ dàng quản lý hơn

 Logging: Tính năng này được sử dụng cho toàn bộ chức năng log trong phạm

vi nội bộ và nó được quản lý mặc định

 Bên cạnh những tính năng quan trọng nói trên, còn một số tính năng tương tựkhác như: Security, Messaging, Developing web Applications, Working withSQL Technologies, Caching, Sending Email, Validation, Calling rest Serviceswith RestTemplate/WebClient,…

Hình 1.1: Hình ảnh minh họa logo Visual Studio Code

Nó cũng cho phép tùy chỉnh, do đó, người dùng có thể thay đổi theme, phím tắt,

và các tùy chọn khác Nó miễn phí và là phần mềm mã nguồn mở theo giấy phép MITmặc dù bản phát hành của Microsoft là theo giấy phép phần mềm miễn phí

Thay vào đó, chúng được gọi thông qua khung nhập lệnh hoặc qua một tập tin

“.json” (ví dụ như tập tin tùy chỉnh của người dùng)

Khung nhập lệnh là một giao diện theo dòng lệnh Tuy nhiên, nó biến mất khingười dùng nhấp bất cứ nơi nào khác, hoặc nhấn tổ hợp phím để tương tác với một cái

Hình 1 1: Ảnh minh họa Logo phần mềm Postman

Nhờ Postman lập trình viên có thể gọi Rest API mà không cần phải viết bất kỳdòng code nào Postman có khả năng hỗ trợ mọi phương thức HTTP bao gồm: POST,PUT, DELETE, PATCH, GET,

Ngoài ra, Postman còn cho phép lập trình viên lưu lại lịch sử của các lầnrequest nên vô cùng tiện lợi cho nhu cầu sử dụng lại

1.6.2 Lợi ích sử dụng

Postman sử dụng Collection nên người dùng có thể tạo bộ sưu tập cho nhữnglệnh gọi API của họ Mỗi một bộ sưu tập đều có thể tạo ra thư mục con với nhiềurequest Đây là điểm mạnh giúp quá trình tổ chức các bộ thử nghiệm được dễ dànghơn

SVTH: Nguyễn Thị Thu Thủy 13

Trong Postman Collections và environment sẽ được import hoặc export giúpngười dùng có thể chia sẻ tệp dễ dàng hơn Ngoài ra, các liên kết trực tiếp cũng có thểđược sử dụng với mục đích chia sẻ bộ sưu tập.

Postman có khả năng test trạng thái phản hồi của HTTP

Hỗ trợ gỡ lỗi: Bộ phận bảng điều khiển của Postman có thể giúp bạn kiểm tra

dữ liệu đã xuất Từ đó, quá trình gỡ lỗi sẽ trở nên dễ dàng và linh hoạt hơn

Hỗ trợ tạo thử nghiệm: Những điểm kiểm tra thử nghiệm và xác định trạng tháiphản hồi HTTP thành công Và vai trò xác nhận có thể được thêm vào mỗi lệnh gọiAPI nhằm đảm bảo phạm vi kiểm tra

Thông qua quá trình sử dụng bộ sưu tập và newman sẽ đảm bảo các kiểm thử sẽchạy được trong những lần lặp lại Từ đó, tiết kiệm thời gian cho các thử nghiệm cóthể lặp đi lặp lại

Tích hợp liên tục: Postman có khả năng hỗ trợ tích hợp liên tục cho các hoạtđộng phát triển và có thể được duy trì

SVTH: Nguyễn Thị Thu Thủy 14

Chương 2 PHÂN TÍCH, THIẾT KẾ HỆ THỐNG2.1 Xác định các tác nhân

 Đăng nhập: Nhập tên đăng nhập, mật khẩu đã đăng ký tại website quản lý

 Đổi mật khẩu: Khi người dùng quên mật khẩu có thể lấy lại mật khẩu

 Cập nhật thông tin cá nhân: Người dùng có thể cập nhật thông tin cá nhân một cách trực quan hơn,

 Xem sản phẩm yêu thích: Người dùng có thể xem được sản phẩm yêu thích của mình

 Đăng sản phẩm: Người dùng được phép đăng những sản phẩm cần trao đổi, chỉnh sửa và xóa sản phẩm

 Báo cáo bài viết: Người dùng được phép báo cáo bài viết khi bài viết vi phạm chính sách của website

SVTH: Nguyễn Thị Thu Thủy 15

 Gửi yêu cầu trao đổi: Khi người dùng có nhu cầu đổi sản phẩm có thể yêu cầu trao đổi sản phẩm của mình và của họ với nhau.

 Chấp nhận yêu cầu trao đổi: Người dùng nhận yêu cầu từ người khác có thể chấp nhận hoặc không chấp nhận yêu cầu

 Nhắn tin: Sau khi cả 2 bên chấp nhận trao đổi thì có thể nhắn tin trực tiếp với nhau để thuận tiện trao đổi thông tin hơn

2.2.3 Quản trị viên

Kế thừa các chức năng đăng nhập của thành viên

 Quản lý người dùng: cho phép xem và khóa tài khoản khi người dùng đăng quá

3 bài vi phạm chính sách của Website

 Quản lý danh mục: cho phép thêm sửa xóa danh mục

 Quản lý bài đăng: cho phép xóa và ẩn bài đăng

 Thống kê: số lượng người dùng, tình hình trao đổi, số lượng bài viết

2.3 Yêu cầu chất lượng

 Giao diện phù hợp với đối tượng sử dụng, đơn giản, hợp lý

 Ngôn ngữ Tiếng Việt

 Đảm bảo tính bảo mật cao, an toàn người dùng

 Tốc độ xử lý và truy cập nhanh

SVTH: Nguyễn Thị Thu Thủy 16