Đề tài xây dựng website bán hàng cho shop trần duy hưng spring boot và angular

Use CaseCa sử dụng Một chuỗi các hành động mà hệ thống thực hiện mang lại một kếtquả quan sát được đối với ActorLớp Entity Class Lớp thực thể Mô hình hóa các thông tin lưu trữ lâu dài tr

KHOA CÔNG NGHỆ THÔNG TIN

======***======

ĐỒ ÁN TỐT NGHIỆP ĐẠI HỌC

NGÀNH CÔNG NGHỆ THÔNG TIN

Đề tài: XÂY DỰNG WEBSITE BÁN HÀNG CHO SHOP TRẦN DUY

HƯNG SPRING BOOT VÀ ANGULAR

Sinh viên: Đặng Văn Hải

Mã số sinh viên: 2018601199

Lớp: CNTT2 - K13

Hà Nội, Năm 2022

LỜI CẢM ƠN

Để có thể hoàn thành bài tập này, lời đầu tiên em xin phép gửi lời cảm ơn tới KhoaCông nghệ thông tin – Trường Đại Công nghiệp Hà Nội đã tạo điều kiện thuận lợi cho

em thực hiện bài tập môn học này

Em cũng xin chân thành cảm ơn tất cả các Thầy, các Cô trong Trường đã tận tìnhgiảng dạy, trang bị cho em những kiến thức cần thiết, quý báu để giúp em thực hiệnđược bài tập này

Đồng thời nhà trường đã tạo cho em có cơ hội được thực tập nơi mà em yêu thích,cho em bước ra đời sống thực tế để áp dụng những kiến thức mà các thầy cô giáo đãgiảng dạy Qua việc làm đồ án này em nhận ra nhiều điều mới mẻ và bổ ích trong việckinh doanh để giúp ích cho công việc sau này của bản thân

Do thời gian, trình độ cũng như kinh nghiệm còn nhiều hạn chế nên tránh khỏinhững thiếu sót trong khi thực hiện đề tài Vì vậy, em rất mong có được sự góp ý củathầy cô giáo để đề tài của em được hoàn thiện hơn

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

Sinh viên: Đặng Văn Hải

MỞ ĐẦU

Ngày nay, song song với quá trình phát triển của công nghệ và kỹ thuật thì ngànhCông nghệ thông tin đã đóng vai trò quan trọng, nó đã đạt được nhiều thành tựu rực rỡvới những bước tiến nhảy vọt Việc áp dụng công nghệ thông tin vào đời sống của conngười ngày càng tăng và tác động đến hầu hết các lĩnh vực trong đời sống.Trên thếgiới cũng như ở Việt Nam, công nghệ thông tin trở thành một ngành công nghiệp mũinhọn không thể thiếu trong việc áp dụng vào các lĩnh vực hoạt động xã hội như: Quản

lý, kinh tế, thông tin,…

Và một trong những lĩnh vực phổ biến hiện nay mà công nghệ thông tin đang pháttriên mạnh mẽ là thiết kế website bán hàng Trong những năm gần đây, điện thoạithông minh càng ngày càng có sức ảnh hưởng lớn tới nhu cầu, sinh hoạt, đời sốngkhông chỉ ở Việt Nam mà trên toàn thế giới Hàng loạt thương hiệu điện thoại thôngminh nổi tiếng được ra đời và phát triển mạnh mẽ như Apple, Samsung, Oppo,Xiaomi…đã thâm nhập thị trường Việt Nam kinh doanh thành công Bên cạnh cónhiều thương hiệu Việt Nam hình thành điển hình là Vinsmart, BPhone, Chính vìthế các đơn vị bán lẻ điện thoại ở Việt Nam ngày càng xuất hiện nhiều, và cạnh tranhhơn Và để phát triển mạnh mẽ bền vững trên thị trường thì sở hữu một website bánđiện thoại là việc không thể thiếu Nhất là trong tình hình người dùng đang dần dầntiếp cận hơn với cách mua hàng trực tuyến

Đồ án bao gồm 5 chương chính:

Chương 1: Tổng quan về đề tài.

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

Chương 3: Thiết kế cơ sở dữ liệu.

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

Chương 5: Triển khai website.

Mục lục

LỜI CẢM ƠN 2

Danh sách các ký hiệu 9

Chương 1 TỔNG QUAN VỀ ĐỀ TÀI 10

1.1 Lý do chọn đề tài 10

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

1.2.1 Mục tiêu tổng quát 10

1.2.2 Mục tiêu cụ thể 10

1.3 Giới hạn và phạm vi của đề tài 11

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

1.3.2 Phạm vi nghiên cứu 11

1.3.3 Nội dung thực hiện 11

1.4 Phương pháp tiếp cận 11

1.4.1 Về mặt lý thuyết 11

1.4.2 Về mặt lập trình 11

1.4.3 Về mặt hoạt động 12

1.5 Khảo sát sơ bộ hệ thống 12

1.5.1 Mục đích 12

1.5.2 Phương pháp 12

1.5.3 Đối tượng khảo sát 12

1.5.4 Khảo sát sơ bộ 12

1.6 Xác định yêu cầu của hệ thống 13

1.6.1 Yêu cầu chức năng 13

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

1.7 Khảo sát chi tiết hệ thống 14

1.7.1 Hoạt động của hệ thống 14

1.7.2 Tài liệu thu thập được 14

Chương 2 CƠ SỞ LÝ THUYẾT 15

2.1 Quy trình phát triển phần mềm 15

2.2 Phương pháp phân tích thiết kế hướng đối tượng 16

2.3 Thiết kế và lập trình front-end 18

2.4 Giới thiệu về ngôn ngữ JAVA 19

2.4.1 JAVA là gì 19

2.4.2 Sử dụng JAVA 20

2.4.3 Những đặc điểm cơ bản của JAVA 20

2.4.4 Tại sao lại chọn JAVA cho đề tài này? 20

2.5 Web Service 22

2.6 Giới thiệu về framework SpringBoot 23

2.7 Giới thiệu về Angular JS 25

2.8 Esclipse là gì? 28

2.9 Visual Studio Code 28

2.10 Postman 29

2.11 MySQL 29

Chương 3 THIẾT KẾ CƠ SỞ DỮ LIỆU 30

3.1 Mô hình hóa dữ liệu 30

3.1.1 Biểu đồ thực thể liên kết 30

3.1.2 Mô tả vắn tắt các thực thể 30

3.1.3 Các quy tắc nghiệp vụ 31

3.2 Thiết kế bảng 31

3.2.1 Bảng users 31

3.2.2 Bảng admin 32

3.2.3 Bảng product 32

3.2.4 Bảng category 33

3.2.5 Bảng brand 33

3.2.6 Bảng bill 34

3.2.7 Bảng bill_detail 34

3.2.8 Bảng email_job 35

3.2.9 Bảng config 35

3.2.10 Bảng contact 36

3.3 Quan hệ giữa các bảng trong hệ quản trị CSDL 36

Chương 4 PHÂN TÍCH THIẾT KẾ HỆ THỐNG 37

4.1 Mô hình hóa chức năng 37

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

4.1.2 Mô tả chi tiết các use case 37

4.1.2.1 Mô tả use case Đăng nhập 37

4.1.2.2 Mô tả use case Đăng ký 38

4.1.2.3 Mô tả use case Xem danh mục sản phẩm 39

4.1.2.4 Mô tả use case Xem danh sách sản phẩm 39

4.1.2.5 Mô tả use case Giỏ hàng 40

4.1.2.6 Mô tả use case Thanh toán 41

4.1.2.7 Mô tả use case Xem thông tin chi tiết của sản phẩm 41

4.1.2.8 Mô tả use case Quản lý tài khoản 42

4.1.2.9 Mô tả use case Quản lý sản phẩm 45

4.2 Phân tích Use case 49

4.2.1 Biểu đồ lớp phân tích 49

4.2.1.1 Use case Đăng nhập 50

4.2.1.2 Use case Đăng ký 51

4.2.1.3 Use case Xem danh sách sản phẩm 51

4.2.1.4 Use case Xem danh mục sản phẩm 52

4.2.1.5 Use case Thanh toán 52

4.2.1.6 Use case Quản lý tài khoản 53

4.2.1.7 Use case Quản lý sản phẩm 54

4.2.2 Biểu đồ trình tự 55

4.2.2.1 Use case Đăng nhập 55

4.2.2.2 Use case Đăng ký 55

4.2.2.3 Use case Xem danh sách sản phẩm 56

4.2.2.4 Use case Xem danh mục sản phẩm 56

4.2.2.5 Use case Thanh toán 57

4.2.2.6 Use case Quản lý tài khoản 57

4.2.2.7 Use case Quản lý sản phẩm 59

4.3 Thiết kế giao diện 61

4.3.1 Hình dung màn hình 61

4.3.1.1 Giao diện người dùng 61

4.3.1.2 Giao diện quản trị 64

4.3.2 Biểu đồ lớp màn hình 67

4.3.2.1 Use case Đăng nhập 67

4.3.2.2 Use case Đăng ký 67

4.3.2.3 Use case Xem danh sách sản phẩm 68

4.3.2.4 Use case Xem danh mục sản phẩm 68

4.3.2.5 Use case Giỏ hàng 68

4.3.2.6 Use case Thanh toán 69

4.3.2.7 Use case Quản lý người dùng 69

4.3.2.8 Use case Quản lý sản phẩm 70

4.3.2.9 Use case Quản lý danh mục sản phẩm 70

Chương 5 TRIỂN KHAI WEBSITE 71

5.1 Triển khai các chức năng cho phân hệ người dùng 71

5.1.1 Trang chủ (Ví dụ) 71

5.2 Triển khai các chức năng cho phân hệ quản trị nội dung (nếu có) 72

5.3 Kiểm thử và triển khai ứng dụng 72

5.3.1 Kiểm thử 72

5.3.2 Đóng gói ứng dụng 73

5.3.3 Triển khai ứng dụng 73

KẾT LUẬN 74

TÀI LIỆU THAM KHẢO 75

Use Case

(Ca sử dụng)

Một chuỗi các hành động mà hệ thống thực hiện mang lại một kếtquả quan sát được đối với ActorLớp

Entity Class

(Lớp thực thể)

Mô hình hóa các thông tin lưu trữ lâu dài trong hệ thống, nó thường độc lập với các đối tượngkhác xung quanh

Procedure

(Phương thức)

Là một phương thức của B mà đối tượng A gọi thực hiện.Message

(Thông điệp)

Là một thông báo mà B gửi cho A

Chương 1 TỔNG QUAN VỀ ĐỀ TÀI

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

Thương mại điện tử là một hình thức mua bán và trao đổi thông tin qua internet.Công ty, doanh nghiệp có thể giới thiệu tất cả sản phẩm của mình bằng hình ảnh vàthông tin trên trang web để khách hàng có thể xem, tham khảo và lựa chọn Đây làhình thức kinh doanh tiện lợi, dễ dàng và đặc biệt đang phát triển, sẽ có cơ hội thuậnlợi lớn cho các công ty, doanh nghiệp đang trên đường phát triển tạo nên thành công vàdanh tiếng cho mình

Trong bất cứ lĩnh vực nào, thương mại điện tử cũng có lợi thế Nó không nhữnglàm giảm thời gian mà còn làm giảm chi phí cho mọi vấn đề giao dịch của con người.Việc kinh doanh qua mạng không chỉ đáp ứng nhu cầu của con người mà còn giúp chongười sử dụng so sánh giá ở nhiều nơi để mua những mặt hàng tốt, giá hợp lý Vớinhững kiến thức đã học và thời gian thực tế, em đã lựa chọn đề tài “Xây dựngwebsite bán hàng cho shop Đặng Hải bằng spring boot và angular”

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

Hệ thống tìm kiếm dễ dàng, giao diện thân thiện Chỉ cần đăng nhập vào hệthống với tài khoản đã có hay chỉ cần vài thao tác đăng ký đơn giản là khách hàng cóthể tự do chọn mua và tạo đơn đặt hàng tại hệ thống.

1.3 Giới hạn và phạm vi của đề tài

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

• Đối tượng nghiên cứu của đề tài là môi trường website động, có kết nối CSDL

• Khách thể nghiên cứu: Các loại điện thoại di động thông minh, hóa đơn, khách hàng, cơ sở quản lý

1.3.2 Phạm vi nghiên cứu

• Tại website hoanghamobile.com

• Phạm vi thời gian: 08/05/2022

• Ý nghĩa khoa học và thực tiễn của đề tài

1.3.3 Nội dung thực hiện

- Là một Website chuyên bán các sản phẩm về điện thoại di động thông minh chomọi cá nhân, hoặc tập thể

- Là một Website động, các thông tin được cập nhật, quản lý và lưu trên Database

- Người dùng truy cập vào Website có thể xem, tìm kiếm, mua các sản phẩm,hoặcđặt hàng sản phẩm

- Các sản phẩm được sắp xếp hợp lý Vì vậy người dùng sẽ có cái nhìn tổng quan vềtất cả các sản phẩm hiện có

- Người dùng có thể xem chi tiết từng sản phẩm (có hình ảnh minh hoạ sản phẩm).

- Khách hàng cũng có thể bỏ đi những sản phẩm không vừa ý đã có trong giỏ hàng

- Nếu đã quyết định mua các sản phẩm trong giỏ hàng thì người dùng click vào mụcthanh toán để hoàn tất việc mua hàng

- Giá của đơn hàng sẽ có trong giỏ hàng

- Có thể gửi liên hệ cho cửa hàng

1.4.2 Về mặt lập trình

- Sử dụng ngôn ngữ Java và hệ quản trị MySql để xây dựng một trang web động

1.4.3 Về mặt hoạt động

- Dựa theo website: Hoanghamobile.com

- Website cho phép khách hàng xem danh sách, chi tiết và đặt mua điện thoại trực tuyến

- Sử dụng ngôn ngữ Java và hệ quản trị MySql để xây dựng một trang web động

1.5 Khảo sát sơ bộ hệ thống

1.5.1 Mục đích

❖Nhằm làm rõ yêu cầu hệ thống

❖Tiếp cận nghiệp vụ chuyên môn, môi trường hoạt động của hệ thống

❖Tìm hiểu chức năng, cách thức hoạt động của hệ thống

❖Thu thập thông tin, sổ sách, mẫu biểu phục vụ cho pha phân tích

❖Thu thập thông tin nghiệp vụ, các quy trình xử lý

1.5.2 Phương pháp

❖Quan sát trực tiếp

❖Phỏng vấn

❖Nghiên cứu mẫu biểu

1.5.3 Đối tượng khảo sát

❖Nhân lực:

Nhân viên bán hàng

o Nhân viên giám sát

❖Mức độ tự động hóa hiện tại: Nhập và in hóa đơn từ 1 máy tính

❖Nhược điểm: Khi khách hàng muốn mua hàng phải trực tiếp đến cửa hàngmua sản phẩm Và khách đông việc thanh toán sẽ bị chậm vì phải chờ đợi

❖Hướng phát triển của hệ thống hiện tại: Cần xây dưng 1 hệ thống websitequản lý hoạt động bán hàng và thống kê thu chi Khách hàng có thể đặt hàng

ở mọi nơi chỉ với 1 chiếc điện thoại di động, máy tính có kết nối internet

1.6 Xác định yêu cầu của hệ thống

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

Đáp ứng những yêu cầu cơ bản của 1 website bán hàng phổ thông:

❖ Cần phân quyền cho các nhóm người dùng

❖ Giao diện người dùng cần tương thích cho mọi loại màn hình

❖ Các chức năng tìm kiếm, lọc sản phẩm cần tối ưu nhất có thể nhằm giúpkhách hàng dễ dàng tìm kiếm được các sản phẩm muốn mua

❖ Các nút của website:

+ Nhóm các nút để chọn loại hàng hóa muốn mua

+ Nút thêm vào giỏ hàng

+ Nút xem chi tiết

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

❖Giao diện phải sắp xếp dễ sử dụng và phải có tính tương tác với người dùng

❖Thời gian phản hồi nhanh

❖Độ bảo mật thông tin cao

❖Chi phí vừa phải

❖Không vi phạm bản quyền thiết kế hoăc phải xin phép, mua bản quyền

❖Hệ thống phải được bảo trì thường xuyên, dễ sử dụng

❖Người sử dụng có thể tìm kiếm từ khóa sản phẩm mình muốn mua

❖Hệ thống phải hỗ trợ nhiều định dạng văn bản hình ảnh tài liệu

1.7 Khảo sát chi tiết hệ thống

1.7.1 Hoạt động của hệ thống

Hoạt động bán hàng

❖ Khi có khách hàng đặt hàng, hệ thống sẽ chuyển yêu cầu vào hàng chờ

và đợi nhân viên xác nhận trạng thái đã giao hàng hoặc chưa Đồng thời

hệ thống tự động tính toán và đưa ra tổng tiền cần trả cho tất cả sảnphẩm khách hàng đặt

Báo cáo, thống kê

Khi có yêu cầu thống kê doanh số bán hàng thì hệ thống sẽ tổng hợp các hóađơn và đưa ra kết quả tổng hợp

1.7.2 Tài liệu thu thập được

❖ Một số mẫu hóa đơn thanh toán thu thập được

Hình 1.7.2.1 Mẫu hóa đơn 1

Hình 1.7.2.2 Mẫu hóa đơn 2

2.1 Quy trình phát triển phần mềm

Quy trình của một phần mềm cụ thể được chia thành các giai đoạn như sau:

- Nghiên cứu sơ bộ (Preliminary Investigation hay còn gọi là Feasibility Study): Một

giai đoạn nghiên cứu sơ bộ thích đáng sẽ lập nên tập hợp các yêu cầu (dù ở mức độkhái quát cao) đối với một hệ thống khả thi và được mong muốn, kể cả về phương diện

kỹ thuật lẫn xã hội Kết quả của giai đoạn nghiên cứu sơ bộ là Báo cáo kết quả nghiêncứu tính khả thi Khi hệ thống tương lai được chấp nhận dựa trên bản báo cáo nàycũng là lúc giai đoạn Phân tích bắt đầu

- Phân tích yêu cầu (Analysis): Kết quả của giai đoạn phân tích là bản Đặc Tả Yêu Cầu(Requirements)

- Thiết kế hệ thống (Design of the System): Đặc Tả Thiết Kế (Design Specifications).Bản Đặc Tả Thiết Kế Chi Tiết sẽ được chuyển sang cho các lập trình viên để thực hiệngiai đoạn xây dựng phần mềm.

- Xây dựng phần mềm (Software Construction): Thử nghiệm đơn vị: Người viết codechạy thử các phần chương trình của mình với dữ liệu giả (test/dummy data) Việc nàyđược thực hiện theo một kế hoạch thử, cũng do chính người viết code soạn ra Mụcđích chính trong giai đoạn thử nghiệm này là xem chương trình có cho ra những kếtquả mong đợi Giai đoạn thử nghiệm đơn vị nhiều khi được gọi là "Thử hộp trắng"(White Box Testing) Thử nghiệm đơn vị độc lập: Công việc này do một thành viênkhác trong nhóm đảm trách Cần chọn người không có liên quan trực tiếp đến việc viếtcode của đơn vị chương trình cần thử nghiệm để đảm bảo tính “độc lập” Công việclần này cũng được thực hiện dựa trên kế hoạch thử do người viết code soạn lên

- Thử nghiệm hệ thống (System Testing): Sau khi các thủ tục đã được thử nghiệmriêng, cần phải thử nghiệm toàn bộ hệ thống Mọi thủ tục được tích hợp và chạy thử,kiểm tra xem mọi chi tiết ghi trong Đặc Tả Yêu Cầu và những mong chờ của ngườidùng có được thoả mãn Dữ liệu thử cần được chọn lọc đặc biệt, kết quả cần đượcphân tích để phát hiện mọi lệch lạc so với mong chờ

- Thực hiện, triển khai (System Implementation): Trong giai đoạn này, hệ thống vừaphát triển sẽ được triển khai sao cho phía người dùng Trước khi để người dùng thật sựbắt tay vào sử dụng hệ thống, nhóm các nhà phát triển cần tạo các file dữ liệu cần thiếtcũng như huấn luyện cho người dùng, để đảm bảo hệ thống được sử dụng hữu hiệunhất

- Bảo trì, nâng cấp (System Maintenance): Tùy theo các biến đổi trong môi trường sửdụng, hệ thống có thể trở nên lỗi thời hay cần phải được sửa đổi nâng cấp để sử dụng

có hiệu quả Hoạt động bảo trì hệ thống có thể rất khác biệt tùy theo mức độ sửa đổi vànâng cấp cần thiết

2.2 Phương pháp phân tích thiết kế hướng đối tượng

UML có thể được sử dụng trong nhiều giai đoạn, từ phát triển, thiết kế cho tớithực hiện và bảo trì Vì mục đích chính của ngôn ngữ này là dùng các biểu đồ hướng

đối tượng để mô tả hệ thống nên miền ứng dụng của UML bao gồm nhiều loại hệthống khác nhau như:

- Hệ thống thống tin (Information System): Cất giữ, lấy, biến đổi biểu diễn thông tincho người sử dụng Xử lý những khoảng dữ liệu lớn có các quan hệ phức tạp, màchúng được lưu trữ trong các cơ sở dữ liệu quan hệ hay hướng đối tượng

- Hệ thống kỹ thuật (Technical System): Xử lý và điều khiển các thiết bị kỹ thuật nhưviễn thông, hệ thống quân sự, hay các quá trình công nghiệp Đây là loại thiết bị phải

xử lý các giao tiếp đặc biệt, không có phần mềm chuẩn và thường là các hệ thống thờigian thực (real time)

- Hệ thống nhúng (Embeded System): Thực hiện trên phần cứng gắn vào các thiết bịnhư điện thoại di động, điều khiển xe hơi, … Điều này được thực hiện bằng việc lậptrình mức thấp với hỗ trợ thời gian thực Những hệ thống này thường không có cácthiết bị như màn hình đĩa cứng, …

- Hệ thống phân bố (Distributed System): Được phân bố trên một số máy cho phéptruyền dữ liệu từ nơi này đến nơi khác một cách dễ dàng Chúng đòi hỏi các cơ chếliên lạc đồng bộ để đảm bảo toàn vẹn dữ liệu và thường được xây dựng trên một số các

kỹ thuật đối tượng như CORBA, COM/DCOM, hay Java Beans/RMI

- Hệ thống Giao dịch (Business System): Mô tả mục đích, tài nguyên (con người, máytính, …), các quy tắc (luật pháp, chiến thuật kinh doanh, cơ chế, …), và công việc hoạtđộng kinh doanh

- Phần mềm hệ thống (System Software): Định nghĩa cơ sở hạ tầng kỹ thuật cho phầnmềm khác sử dụng, chẳng hạn như hệ điều hành, cơ sở dữ liệu, giao diện người sửdụng

UML và các giai đoạn phát triển hệ thống

- Preliminary Investigation: Use cases thể hiện các yêu cầu của người dùng Phần miêu

tả use case xác định các yêu cầu, phần diagram thể hiện mối quan hệ và giao tiếp với

hệ thống - Analysis: Mục đích chính của giai đọan này là trừu tượng hóa và tìm hiểucác cơ cấu có trong phạm vi bài toán Class diagrams trên bình diện trừu tượng hóa cácthực thể ngoài đời thực được sử dụng để làm rõ sự tồn tại cũng như mối quan hệ củachúng Chỉ những lớp (class) nằm trong phạm vi bài toán mới đáng quan tâm

- Design: Kết quả phần analysis được phát triển thành giải pháp kỹ thuật Các lớpđược mô hình hóa chi tiết để cung cấp hạ tầng kỹ thuật như giao diện, nền tảng chodatabase, … Kết quả phần Design là các đặc tả chi tiết cho giai đoạn xây dựng phầnmềm

- Development: Mô hình Design được chuyển thành code Programmer sử dụng cácUML diagrams trong giai đoạn Design để hiểu vấn đề và tạo Testing: Sử dụng cácUML diagrams trong các giai đoạn trước Có 4 hình thức kiểm tra hệ thống:

● Unit testing (class diagrams & class specifications): kiểm tra tổng đơn thể, đượcdùng để kiểm tra các lớp hay các nhóm đơn thể

● Integration testing (integration diagrams & collaboration diagrams): kiểm tra tíchhợp là kiểm tra kết hợp các component với các lớp để xem chúng hoạt động vớinhau có đúng không

● System testing (use-case diagrams): kiềm tra xem hệ thống có đáp ứng được chứcnăng mà người sử dụng yêu cầu hay không

● Acceptance testing: Kiểm tra tính chấp nhận được của hệ thống, thường được thựchiện bởi khách hàng, việc kiểm tra này thực hiện tương tự như kiểm tra hệ thống

2.3 Thiết kế và lập trình front-end

Front End là cách gọi quy trình sử dụng các ngôn ngữ HTML, CSS, JavaScriptthiết kế và xây dựng giao diện cho các trang web hoặc ứng dụng web để người dùng

có thể xem và tương tác trực tiếp trên đó

Mục tiêu của việc thiết kế trang web là giúp cho người dùng dễ dàng sử dụngkhi mở trang web Điều này rất khó khăn vì trong thực tế người dụng sử dụng rất nhiềuloại thiết bị khác nhau với kích thước và độ phân giải khác nhau, do đó buộc FrontEnd Developer phải xem xét hết các khía cạnh này khi thiết kế trang web Cần phảiđảm bảo trang web xuất hiện chính xác trên các trình duyệt khác nhau, hệ điều hànhkhác nhau và các thiết bị khác nhau

● HTLM & CSS

HTML và CSS (Cascading Style Sheets) là các ngôn ngữ cơ bản nhất để pháttriển giao diện web Nếu không thông thạo hai ngôn ngữ này bạn sẽ không thể nàothiết kế được trang web.

Đây là hai ngôn ngữ đầu tiên bạn nên học khi muốn trở thành một Front EndDeveloper

● JavaScript

JavaScript cho phép bạn có thể tạo ra rất nhiều tính năng tương tác cho trangweb Giúp cho người dùng dễ dàng sử dụng website hơn JavaScript là ngôn ngữ cóthể nói là phổ biến nhất trên thế giới và đặc biệt quan trọng đối với Front EndDeveloper

● Các frameworks của JavaScript

Có kiến thức và kỹ năng sử dụng thành thạo các Frameworks của Javascript nhưAngular JS, Backbone, Ember, ReacJS Các Frameworks này giúp lập trình viên tiếtkiệm được thời gian trong quá trình lập trình, tối ưu hóa và dễ dàng tạo ra các tươngtác thân thiện với người dùng

● Các Frontend frameworks

CSS và các frameworks front-end hiện nay phổ biến nhất là Bootstrap giúp hỗtrợ thiết kế website nhanh và chuẩn hơn Đây là Framework mà hầu hết Front Enddeveloper đều cần bạn am hiểu và vận dụng tốt

● Kinh nghiệm với CSS Preprocessors

Preprocessors là yếu tố giúp tăng tốc độ code CSS Một CSS Preprocessors bổsung thêm functionality cho CSS để CSS scalable được và dễ làm việc hơn Nó xử lýcode trước khi bạn publish lên website, và biến nó thành 1 CSS thân thiện với cross-browser và có format tốt Theo job listings thực tế thì SASS và LESS là haipreprocessors có nhu cầu cao nhất

● Thiết kế Responsive và Thiết kế Mobile

Hiện nay, tỷ lệ truy cập internet từ thiết bị di dộng đã cao hơn desktop rất nhiều,

do đó kỹ năng thiết kế mobile đóng vai trò quan trọng trong mắt các nhà tuyển dụng.Responsive design là thiết kế trang web có thể tương thích với nhiều loại thiết bị didộng có kích thước hiển thị khác nhau

2.4 Giới thiệu về ngôn ngữ JAVA

2.4.1 JAVA là gì

Java là một ngôn ngữ lập lập trình, được phát triển bởi Sun Microsystem vào năm

1995, là ngôn ngữ kế thừa trực tiếp từ C/C++ và là một ngôn ngữ lập trình hướng đốitượng

Vì sao ngôn ngữ này lại được đặt tên là Java? Java là tên một hòn đảo ở Indonesia hòn đảo nổi tiếng với loại coffee Peet và cũng là loại nước uống phổ biến của các kỹ

-sư Sun Ban đầu Ngôn ngữ này được đặt tên là "Oak có nghĩa là "Cây sồi" - 1991)," (nhưng các luật sư của Sun xác định rằng tên đó đã được đăng ký nhãn hiệu nên cácnhà phát triển đã phải thay thế bằng một tên mới - và cũng vì lý do trên mà cái tênJava đã ra đời và trở thành tên gọi chính thức của Ngôn ngữ này - Ngôn ngữ Lập trìnhJava

2.4.3 Những đặc điểm cơ bản của JAVA

Tiêu chí hàng đầu của Ngôn ngữ Lập trình Java là "Write Once, Run

Anywhere" (Viết một lần, chạy mọi nơi), nghĩa là Java cho phép chúng ta viết code

một lần và thực thi được trên các hệ điều hành khác nhau Ví dụ, chúng ta viết codetrên Hệ điều hành Windows và nó có thể thực thi được trên các Hệ điều hành Linux vàMac OS

Với đặc điểm nổi bật đó, Java có những đặc điểm cơ bản như sau:

● Đơn giản và quen thuộc: Vì Java kế thừa trực tiếp từ C/C++ nên nó có nhữngđặc điểm của ngôn ngữ này, Java đơn giản vì mặc dù dựa trên cơ sở C++ nhưngSun đã cẩn thận lược bỏ các tính năng khó nhất của của C++ để làm cho ngônngữ này dễ sử dụng hơn

● Hướng đối tượng và quen thuộc

● Mạnh mẽ (thể hiện ở cơ chế tự động thu gom rác - Garbage Collection) và an

toàn

● Kiến trúc trung lập, độc lập nền tảng và có tính khả chuyển (Portability).

● Hiệu suất cao.

● Máy ảo (biên dịch và thông dịch)

● Phân tán

● Đa nhiệm: Ngôn ngữ Java cho phép xâ dựng trình ứng dụng, trong đó nhiều quátrình có thể xảy ra đồng thời Tính đa nhiệm cho phép các nhà lập trình có thểbiên soạn phần mềm đáp ứng tốt hơn, tương tác tốt hơn và thực hiện theo thờigian thực

●

2.4.4 Tại sao lại chọn JAVA cho đề tài này?

● Khả năng bảo mật cao

Java được đánh giá là có độ bảo mật cao hơn khá nhiều so với các ngôn ngữ lậptrình khác Do đó khi sử dụng mã nguồn này thì bạn sẽ không phải lo ngại nhiều vềvấn đề bảo mật hay tình trạng bị hack thông tin trên web

● Hoạt động mạnh mẽ

Ưu điểm tiếp theo khiến cho Java được yêu thích đó chính là có khả năng mang lạimột website hoạt động mạnh mẽ trên bất kỳ nền tảng nào Đây là ưu điểm mà khôngphải bất kỳ ngôn ngữ nào cũng có thể đảm bảo được

Bất kỳ chương trình nào nếu muốn chạy được cũng cần phải được biên dịch ra mãmáy, trong khi mã máy của từng kiến trúc CPU của mỗi máy tính là không giống nhau

Do đó trước đây, mỗi chương trình sau khi được biên dịch xong thì thường chỉ có thểchạy được trên một kiến trúc CPU cụ thể nào đó Tuy nhiên nhờ có sự ra đời của Java

mà khó khăn nêu trên đã có cách khác phục Theo đó, mỗi một chương trình được viếtbởi Java sẽ được biên dịch ra mã máy ảo Java Máy ảo này sau đó sẽ chịu trách nhiệmchuyển chương trình đó sang mã máy tương ứng, do đó có thể chạy trên bất kỳ hệ điềuhành cũng như kiến trúc CPU bất kỳ

● Thông dịch

Ngôn ngữ lập trình của Java vừa có khả năng biên dịch, vừa có khả năng thôngdịch Theo đó, chương trình nguồn viết bằng Java có đôi *.java đầu tiên được biêndịch thành tập tin có đuôi *.class, sau đó sẽ tiếp tục được thông dịch thành mã máy

● Độc lập nền, khả năng di chuyển

Các chương trình được viết bởi ngôn ngữ Java có khả năng chạy trên nhiều máytính, nhiều hệ điều hành khác nhau, chỉ cần ở đó có cài đặt máy ảo Java VirtualMachine Tóm lại, ưu điểm cực lớn của Java chính là “Viết một lần, chạy mọi nơi”(Write Once, Run Anywhere)

● Hướng đối tượng

Hướng đối tượng trong ngôn ngữ lập trình Java khá gióng với C++, tuy nhiên lại làngôn ngữ lập trình hướng đối tượng hoàn toàn.

● Đa nhiệm – đa luồng (MultiTasking - Multithreading)

Ngôn ngữ lập trình này hỗ trợ lập trình đa nhiệm, đa luồng nên cho phép chạy songsong nhiều tiến trình, tiểu trình trong cùng một thời điểm và tạo tương tác với nhau

● Hỗ trợ mạnh cho việc phát triển ứng dụng

Một trong những ưu điểm không thể không kể đến của Java chính là cung cấpnhiều công cụ, thư viện lập trình, từ đó hỗ trợ phong phú cho việc phát triển nhiều loạihình ứng dụng khác nhau như:

- J2SE (Java 2 Standard Edition) hỗ trợ phát triển những ứng dụng đơn, ứng dụngclient-server

- J2EE (Java 2 Enterprise Edition) hỗ trợ phát triển các ứng dụng thương mại

- J2ME (Java 2 Micro Edition) hỗ trợ phát triển các ứng dụng trên các thiết bị di động,không dây,

Như vậy, có thể nói rằng sự ra đời của ngôn ngữ lập trình Java đã mở ra một cuộccách mạng mới trong lĩnh vực công nghệ thông tin, tạo nền tảng cho một loạt các thayđổi như: thay đổi dần các ứng dụng bằng Java, các thế hệ máy tính sử dụng những vimạch có khả năng hỗ trợ Java, việc sử dụng và làm quen với công nghệ Java sẽ giúpchúng ta tiếp cận được với những bước tiến mới của công nghệ thông tin

Ưu điểm của Webservice

- Có sẵn trên internet hoặc mạng nội bộ,

- Sử dụng hệ thống XML messaging tiêu chuẩn,

- Không bị trói buộc vào một hệ điều hành hay ngôn ngữ lập trình nào,

- Có thể tự diễn tả chính nó thông qua một cấu trúc XML đơn giản,

- Có thể được tìm kiếm bằng những phương thức đơn giản (simple mechanism)

2.6 Giới thiệu về framework SpringBoot

Hình 2.6 Logo Spring BootSpring Boot là một module của Spring Framework, cung cấp tính năng RAD (RapidApplication Development) – Phát triển ứng dụng nhanh

Spring Boot được dùng để tạo các ứng dụng độc lập dựa trên Spring

Spring Boot không yêu cầu cấu hình XML

Nó là một chuẩn cho cấu hình thiết kế phần mềm, tăng cao năng suất cho developer

Hình 2.4.1.2 Cấu hình Spring Boot

Ưu điểm Spring Boot:

o Có các tính năng của Spring Framework

o Tạo ứng dụng độc lập, có thể chạy bằng java -jar (cho cả java web)

o Nhúng trực tiếp các ứng dụng server (Tomcat, Jetty…) do đó không cần phảitriển khai file WAR

o Cấu hình ít, tự động cậu hình bất kì khi nào có thể (Giảm thời gian viết code,tăng năng suất)

o Không yêu cầu XML config…

o Cung cấp nhiều plugin

o Chuẩn cho Microservices (Cloud support; giảm việc setup, config; các thư viện

hỗ trợ…)

2.7 Giới thiệu về Angular JS

Hình 2.7 Logo AgularAngular là một javascript framework do google phát triển để xây dựng các Single PageApplication (SPA) bằng JavaScript, HTML và TypeScript Angular cung cấp các tínhnăng tích hợp cho animation, http service và có các tính năng như auto-complete,navigation, toolbar, menus … Code được viết bằng TypeScript, biên dịch thànhJavaScript và hiển thị tương tự trong trình duyệt

Để học được angular thì bạn cần biết các kiển thức cơ bản sau:

o CSS

o JavaScript

o TypeScript

o Document Object Model (DOM)

Các phiên bản của Angular:

o Angular js: Phiên bản đầu tiền của angular là AngularJS được bắt đầu từ năm

2009 và đc ra mắt vào 20/10/2010, do lập trình viên Misko Hevery tại Googleviết ra như là một dự án kiểu “viết cho vui” Lúc đó angular js được viết theo môhình MVC (Model-View-Controller) trong đó:

▪ Model là thành phần trung tâm thể hiện hành vi của ứng dụng và quản lý dữliệu

▪ View được tạo ra dựa trên thông tin của Model

▪ Controller đóng vai trò trung gian giữa Model và View và để xử lý logic

o Angular 4:

▪ Ra mắt vào tháng 3/2017 đây là một phiên bản nâng cấp từ Angular 2 nên kiếntrúc không thay đổi nhiều ngoài việc giảm thiểu code được tạo ra từ đó giảmkích thước tệp được đóng gói xuống 60%, đẩy nhanh quá trình phát triển ứngdụng

o Angular 5: Đã được phát hành vào ngày 1 tháng 11 năm 2017 với mục tiêuthay đổi về tốc độ và kích thước nên nó nhanh hơn và nhỏ hơn angular 4 Cáctính năng mới so với angular 4:

▪ Sử dụng HTTPClient thay vì sử dụng HTTP: bởi vì nó nhanh, an toàn và hiệuquả hơn

▪ Với phiên bản Angular 5 mặc định sử dụng RxJs 5.5

▪ Multiple export aliases: Một component có thể được xuất bằng nhiều bí danh(aliases) để giảm bớt quá trình di chuyển

▪ Internationalized Pipes for Number, Date, and Currency: Các pipe mới đượcgiới thiệu để tiêu chuẩn hóa tốt hơn

▪ Tối ưu hóa build production bằng việc sử dụng công cụ build optimizer đượctích hợp sẵn vào trong CLI Công cụ này tối ưu tree shark và loại bỏ code dưthừa

▪ Cải thiện tốc độ biên dịch bằng việc dùng TypeScript transforms, giờ đây khibuild sẽ sử dụng lệnh “ng serve–aot” AOT sẽ cải thiện performace khi loadpage và nó được dùng để deploy app lên production

o Angular 6:

▪ Cập nhật CLI, command line interface: thêm 1 số lệnh mới như ng-update đểchuyển từ version trước sang version hiện tại; ng-add để thêm các tính năngcủa ứng dụng để trở thành một ứng dụng web tiến bộ

▪ Angular Element: Cho phép các component của Angular được triển khai dướidạng component web, sau đó có thể được sử dụng trong bất kỳ trang HTMLnào một cách dễ dàng

▪ Multiple Validators: cho phép nhiều Validators được áp dụng trên formbuilder

▪ Tree-shakeable providers: giúp loại bỏ mã code chết

▪ Sử dụng RxJS 6 với syntax thay đổi

o Angular 7:

▪ Được phát hành vào 18 tháng 10 năm 2018 với những thay đổi như:

● ScrollingModule: Để scroll load dữ liệu

● Drag and Drop: Chúng ta có thể dễ dàng thêm tính năng kéo và thả vàomột mục

▪ Ra mắt mới đây 6 tháng 2 năm 2020, Angular 9 di chuyển tất cả các ứng dụng

để sử dụng trình biên dịch Ivy và thời gian chạy theo mặc định Angular đãđược cập nhật để hoạt động với TypeScript 3.6 và 3.7

2.8 Esclipse là gì?

Hình 2.8 EclipseEclipse là một trình IDE dùng để lập trình Java (Eclipse cũng có thể dùng để lập trìnhcác ngôn ngữ khác nhau C/C++, PHP… nhưng mạnh nhất là về Java)

Một số IDE khác cũng dùng để lập trình Java khác như Netbeans, Intellij IDEA Trong

đó Netbeans mình thấy chủ yếu dùng trong giảng dạy, còn Intellij IDEA thì khá mớinhưng rất mạnh mẽ và hỗ trợ nhiều tính năng tuy nhiên nó hơi khó dùng với người mớilàm quen

Ở bài này mình giới thiệu cài đặt Eclipse, đây là IDE thường dùng khi làm việc vàđược các công ty phần mềm tin dùng

Eclipse là phần mềm miễn phí, với nhiều plugin tiện ích (một số plugin phải trả phímới được dùng)

2.9 Visual Studio Code

Hình 2.9 Logo Visual Studio CodeVisual Studio Code là một trình soạn thảo, biên tập code hoàn toàn miễn phí dànhđược Microsoft phát triển cho các lập trình viên và có mặt trên hầu hết các hệ điềuhành phổ biến như: Windows, Linux và macOS Có thể nói rằng, Visual Studio Code

là một sự kết hợp độc đáo – đỉnh cao giữa IDE và Code Editor

Không chỉ là soạn thảo, chỉnh sửa code, Visual Studio Code còn có thể hỗ trợ bạn làmđược rất nhiều việc như: đổi theme, hàng loạt phím tắt tiện dụng, có chức năng debug

đi kèm, hỗ trợ Git, syntax highlighting hỗ trợ quá trình gõ code, phần gợi ý code thôngminh, …

2.10 Postman

o Postman là công cụ vô cùng hữu ích cho các lập trình viên cho phép làm việc vớicác API, với chức năng Rest API mà không cần viết dòng code nào, làm cho việcgọi các Rest API trở nên đơn giản Postman hỗ trợ tất cả các phương thức HTTP,cho phép lưu lại lịch sử các lần request, rất tiện cho việc sử dụng lại khi cần

o Postman có giao diện đơn giản, cho phép gửi HTTP Request với các methodGET, POST, PUT, DELETE Postman cho phép post dữ liệu dưới dạng form(key-value), text, json và hiện kết quả trả về dạng text, hình ảnh, XML, JSON.Ngoài ra, Postman hỗ trợ cài đặt các biến môi trường (url gốc, API key, ), thuậntiện hơn khi cần kiểm tra trên nhiều môi trường

2.11 MySQL

MySQL là hệ quản trị cơ sở dữ liệu tự do nguồn mở phổ biến nhất thế giới và

được các nhà phát triển rất ưa chuộng trong quá trình phát triển ứng dụng Vì MySQL

là hệ quản trị cơ sở dữ liệu tốc độ cao, ổn định và dễ sử dụng, có tính khả chuyển, hoạtđộng trên nhiều hệ điều hành cung cấp một hệ thống lớn các hàm tiện ích rất mạnh.Với tốc độ và tính bảo mật cao, MySQL rất thích hợp cho các ứng dụng có truy cậpCSDL trên internet Người dùng có thể tải về MySQL miễn phí từ trang

chủ MySQL có nhiều phiên bản cho các hệ điều hành khác nhau: phiên bản Win32cho các hệ điều hành dòng Windows, Linux, Mac OS X, Unix, FreeBSD, NetBSD,Novell NetWare, SGI Irix, Solaris, SunOS, …

3.1 Mô hình hóa dữ liệu

3.1.1 Biểu đồ thực thể liên kết

Hình 3 1.1.1 Biểu đồ thực thể liên kết

3.1.2 Mô tả vắn tắt các thực thể

● product: Lưu thông tin chi tiết về sản phẩm của cửa hàng.

● bill: Lưu thông tin chung của đơn hang.

● bill_detail: Lưu thông tin chi tiết về của đơn hang.

● users: Lưu thông tin của người dùng bao gồm cả thông tin đăng nhập trang bán

hang

● admin: Lưu thông tin về người quản trị bao gồm cả thông tin đăng nhập trang quản

trị

● brand: Lưu thông tin về danh mục thương hiệu sản phẩm.

● category: Lưu thông tin về danh mục loại sản phẩm.

● config: Lưu thông tin cấu hình bao gồm cả email của cửa hang.

● email_job: Lưu thông tin người dùng sau khi đặt hàng cũng như nội dung để gửi

● Mỗi khách hàng có 1 giỏ hàng, mỗi giỏ hàng phải thuộc 1 khách hàng

● Mỗi khách hàng có thể lập 0, 1 hoặc nhiều đơn hàng Mỗi đơn hàng cần đượclập bởi một khách hàng

● Mỗi khách hàng có thể có một hoặc nhiều phản hồi, mỗi phản hồi phải do 1khách hàng gửi

3.3 Quan hệ giữa các bảng trong hệ quản trị CSDL

Hình 3.3 Quan hệ giữa các bảng trong csdl

Chương 4 PHÂN TÍCH THIẾT KẾ HỆ THỐNG4.1 Mô hình hóa chức năng

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

Hình 4.1.1 Biểu đồ usecase tổng quát

4.1.2 Mô tả chi tiết các use case

4.1.2.1Mô tả use case Đăng nhập

- Mô tả usecase

Mô tả Cho phép actor đăng nhâ ¬p vào hê ¬ thống

Pre-condition

Post condition Chuyển tới trang chính

- Hoạt động

Main Flow: Login thành công

1 Actor nhâ ¬p tên đăng nhâ ¬p/mâ ¬t

khẩu và click vào button Login

trên trang đăng nhâ ¬p

2 Kiểm tra tên đăng nhâ ¬p/mâ ¬t khẩu làchính xác sau đó chuyển tới trangchính

- Thông báo

MS01 “Tên Đăng Nhập và/hoặc Mật Khẩu của bạn không chính xác Vui

lòng kiểm tra và thử lại.”

Message thông báo khi actor nhâ ¬p sai tên đăng nhâ ¬p/mâ ¬t khẩu

4.1.2.2Mô tả use case Đăng ký

- Mô tả use case

Description Cho phép actor đăng ký tài khoản để đăng nhập vào hệ thống

Actor Người dùng Trigger Load form đăng ký tài

Main Flow: Đăng ký tài khoản thành công

1 Actor click vào icon user trên

trang chính

2 Actor click vào nút Sign up

3 Hiển thị toàn bộ form đăng ký tàikhoản

4.1.2.3Mô tả use case Xem danh mục sản phẩm

- Mô tả use case

Description Cho phép actor view toàn bô ¬ danh mục sản phẩm trong hê ¬

Main Flow: Hiển thị chính xác danh mục của sản phẩm

1 Actor click vào sub menu item

ở bên góc phải màn hình

2 Load thông tin toàn bô ¬ danh mục củasản phẩm

4.1.2.4Mô tả use case Xem danh sách sản phẩm

- Mô tả use case

Name Xem danh sách sản