Xây dāng website bán giày trāc tuyàn bàng vuejs và spring boot

Nó thật sự là một lĩnh vực cần thiÁt trong thái gian dịch ng°ái lao động trí thāc đang ngày càng nhiều, và cũng vì thÁ nhu cầu mua hàng thông tin và mua hàng trực tuyÁn do đó em đã vận d

TR¯àNG Đ¾I HàC BÁCH KHOA HÀ NÞI

ĐIâN Tþ VIàN THÔNG

Đâ ÁN TàT NGHIâP

ĐÂ TÀI: XÂY DĀNG WEBSITE BÁN GIÀY TRĀC

MĂC LĂC

LàI CÀM ¡N 1

CH¯¡NG 1: KHÀO SÁT Hà THàNG 3

1.1 Gißi thiáu đề tài 3

1.1.1 Tên đề tài 3

1.2.1 Lý do chọn đề tài 3

1.3.1 Măc tiêu 3

1.2 KhÁo sát chi tiÁt 4

1 Đái t°āng và ph°¢ng pháp khÁo sát 4

2 Thực tr¿ng hián t¿i 4

3 KÁt quÁ s¢ bộ 5

1.3 Các ph°¢ng pháp và công nghá thực hián đề tài 5

CH¯¡NG 2: Câ Sâ LÝ THUYÀT 7

2.1 Ngôn ngữ lập trình Java 7

2.1.1 Khái niám 7

2.1.2 Đặc điểm 7

a) H°ßng đái t°āng hoàn toàn 7

b) Độc lập phần cāng và há điều hành 7

c) Ngôn ngữ thông dịch 8

d) C¢ chÁ thu gom rác 9

e) Tính an toàn và bÁo mật 9

2.1.3 Āng dăng cÿa ngôn ngữ Java 10

2.2 Spring Framework 11

2.3 VueJs 12

2.3.1 Khái niám 12

2.3.2 ¯u và nh°āc điểm 13

a) ¯u điểm cÿa VueJs 13

b) Nh°āc điểm cÿa VueJs 14

2.4 PostgreSQL 14

2.4.1 Khái niám 14

2.4.2 ¯u và nh°āc điểm 15

CH¯¡NG 3: PHÂN TÍCH THIÀT KÀ Hà THàNG 17

3.1 ThiÁt kÁ há tháng 17

3.1.1 Xác định yêu cầu cÿa há tháng 17

3.1.1.1 Các yêu cầu chāc năng 17

3.1.1.2 Các yêu cầu phi chāc năng 17

1.4 3.1.2 Biểu đồ use case tổng quát và bÁng CSDL 18

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

3.1.2.2 Biểu đồ các lßp Entity cÿa há tháng 19

3.1.3 Mô tÁ chi tiÁt các use case 20

3.1.3.1 Use case <Đăng nhập= 20

3.1.3.2 Use case <Đăng ký= 22

3.1.3.3 Use case <Xem danh sách sÁn phẩm= 24

3.1.2.4 Use case <Xem chi tiÁt sÁn phẩm= 26

3.1.2.5 Use case <Tìm kiÁm sÁn phẩm= 28

3.1.2.6 Use case <Thêm vào giß hàng= 29

3.1.2.7 Use case <Xem danh sách sÁn phẩm trong giß hàng= 32

3.1.2.8 Use case <Xóa sÁn phẩm trong giß hàng= 34

3.1.2.9 Use case <Xem lịch sử mua hàng= 36

3.1.2.10 Use case <Huỷ đ¢n hàng= 38

3.1.2.11 Use case <Đặt hàng= 40

3.1.2.12 Use case <Đăng nhập há tháng quÁn lý= 42

3.1.2.13 Use case <QuÁn lý sÁn phẩm= 45

3.1.2.14 Use case <QuÁn lý đ¢n hàng= 48

CH¯¡NG 4: KÀT QUÀ Đ¾T Đ¯ĀC 52

4.1 Giao dián hoàn chỉnh và những điều đã làm đ°āc 52

4.1.1 Giao dián hoàn chỉnh 52

4.1.1.1 Giao dián trang chÿ 52

TÀI LIàU THAM KHÀO 61

DANH M ĀC HÌNH ÀNH

Hình 1 Mô tÁ trình tự biên dịch và thông dịch cÿa Java 8

Hình 3 Biểu đồ Use case 18

Hình 4 Biểu đồ các lßp entity cÿa há tháng 19

Hình 7 Biểu đồ basic flow use case Đăng nhập 21

Hình 8 Biểu đồ VOPC use case <Đăng nhập= 22

Hình 9 Biểu đồ Basic Flow use case Đăng kí 24

Hình 10 Biểu đồ VOPC use case <Đăng kí= 24

Hình 11 Biểu đồ Basic Flow use case <Xem danh sách sÁn phẩm= 25

Hình 12 Biểu đồ VOPC use case <Xem danh sách sÁn phẩm= 26

Hình 13 Biểu đồ Basic Flow use case <Xem chi tiÁt sÁn phẩm= 27

Hình 14 Biểu đồ VOPC use case Xem chi tiÁt sÁn phẩm 27

Hình 15 Biểu đồ Basic Flow use case Tìm kiÁm sÁn phẩm 29

Hình 16 Biểu đồ VOPC use case Tìm kiÁm sÁn phẩm 29

Hình 17 Biểu đồ basic flow use case Thêm vào giß hàng 31

Hình 18 Biểu đồ VOPC use case Thêm vào giß hàng 31

Hình 19 Biểu đồ basic flow use case Xem danh sách sÁn phẩm trong giß hàng 33

Hình 20 Biểu đồ VOPC use case Xem danh sách sÁn phẩm trong giß hàng 34 Hình 21 Biểu đồ Basic Flow usecase Xóa sÁn phẩm trong giß hàng 35

Hình 22 Biểu đồ VOPC use case Xóa sÁn phẩm trong giß hàng 36

Hình 23 Biểu đồ basic flow use case Xem lịch sử mua hàng 37

Hình 24 Biểu đồ VOPC use case Xem lịch sử mua hàng 38

Hình 25 Biểu đồ Basic Flow usecase Huỷ đ¢n hàng 39

Hình 26 Biểu đồ VOPC use case Huỷ đ¢n hàng 40

Hình 27 Biểu đồ Basic Flow use case Đặt hàng 41

Hình 28 Biểu đồ VOPC use case Đặt hàng 42

Hình 29 Biểu đồ basic flow use case Đăng nhập há tháng quÁn trị 44

Hình 30 Biểu đồ VOPC use case Đăng nhập há tháng quÁn lý 44

Hình 31 Biểu đồ Basic Flow use case QuÁn Lý SÁn Phẩm 47

Hình 32 Biểu đồ VOPC use case QuÁn Lý SÁn Phẩm 48

Hình 33 Biểu đồ Basic Flow use case QuÁn lý đ¢n hàng 50

Hình 34 Biểu đồ VOPC use case QuÁn lý đ¢n hàng 51

1

L àI CÀM ¡N

tr°ßc hÁt em xin chân thành cÁm ¢n đÁn quý thầy cô trong khoa Công Nghê Thông Tin tr°áng Đ¿i Học Công Nghiáp Hà Nội lái cÁm ¢n chân thành

Đặc biát em xin gửi đÁn thầy TS Nguyßn M¿nh C°áng ng°ái đã tận tình giúp và h°ßng dẫn em hoàn thành đề tài thực tập này lái cÁm ¢n chân thành

Đồng thái nhà tr°áng cũng đã t¿o cho em môi tr°áng thực tập t¿i n¢i mà

đã học t¿i tr°áng và môi tr°áng làm viác mßi cÿa em

thành đề tài thực tập tát nghiáp nÁu có gì sai sót, kính mong có sự góp ý từ thầy

Sinh viên th āc hiãn

Vũ Duy Linh

2

L àI NÓI Đ¾U

con ng°ái Do đó công nghá thông tin ngày càng trã thành một phần quan trọng trong đái sáng xã hội Nó thật sự là một lĩnh vực cần thiÁt trong thái gian dịch

ng°ái lao động trí thāc đang ngày càng nhiều, và cũng vì thÁ nhu cầu mua hàng

thông tin và mua hàng trực tuyÁn do đó em đã vận dăng ngôn ngữ JavaScript, th° viên VueJS và công că Visual Studio Code để xây dựng website bán giày

Sinh viên th āc hiãn

Vũ Duy Linh

3

CH¯¡NG 1: KHÀO SÁT Hâ THàNG 1.1 Gißi thiãu đà tài

về sÁn phẩm hay cÿa hàng cÿa mình

Nhận thấy đây là một c¢ hội tát để áp dăng đ°āc các kiÁn thāc mà bÁn thân

đã tích lũy đ°āc vào đái sáng thực tÁ em đã chọn đề tài <Xây dựng website bán

1.3.1 Māc tiêu

tuyÁn

kiám thái gian mua hàng cho khách hàng

4

1.2 KhÁo sát chi tiÁt

1.2.1 Đái t°ÿng và ph°¢ng pháp khÁo sát

1.2.2 Thāc tr¿ng hiãn t¿i

sắm qua m¿ng nhiều h¢n tr°ßc đ¿i dịch, trong đó có 36% mua sắm qua

đián tử năm 2021, tỷ lá ng°ái dùng internet tham gia mua sắm trực tuyÁn

đã tăng từ 77% trong năm 2019 lên 88% trong năm 2020

băng= mọi ho¿t động thì nhu cầu cÿa ng°ái tiêu dùng vẫn hián hữu, đặc

này mà vẫn đÁm bÁo yÁu tá an toàn do không phÁi di chuyển đÁn nhiều địa điểm mua sắm

mua và chá vận chuyển hàng đÁn nhà

r¢i vào tr¿ng thái tiêu cực nh° buồn chán, cô đ¢n, có xu h°ßng dß cáu

5

gian dài dẫn tßi viác không đ°āc tiÁp xúc vßi ng°ái khác, mua sắm qua

dùng

tuyát đái

1.3 Các ph°¢ng pháp và công nghã thāc hiãn đà tài

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

6

• IntelliJ IDEA

• VueJs

• Mô hình Client-Server

MicroSystem năm 1991 Ban đầu Java đ°āc t¿o ra nhằm măc đích viÁt phần

thực thi vßi điều kián có môi tr°áng thực thi thích hāp hỗ trā nền tÁng đó

2.1.2 Đặc đißm

a) H°ßng đái t°ÿng hoàn toàn

• Tuy nhiên, trong Java thao tác vßi con trß bị l°āc bß nhằm đÁo bÁo tính an

struct và union cũng đ°āc lo¿i bß khßi Java

b) Đßc lÁp ph¿n cāng và hã điÃu hành

tr°áng khác nhau Gọi là khÁ năng <cross-platform= KhÁ năng độc lập phần

độ nhị phân

8

đề này Ch°¢ng trình viÁt bằng ngôn ngữ Java có thể biên dịch trên nhiều lo¿i máy khác nhau mà không gặp lỗi

• â cấp độ nhị phân: Một mã biên dịch có thể ch¿y trên nhiều nền tÁng khác nhau mà không cần dịch l¿i mã nguồn Tuy nhiên cần có Java Virtual Machine để thông dịch đo¿n mã này

• Ngôn ngữ lập trình Java thuộc lo¿i ngôn ngữ thông dịch Chính xác h¢n,

• Khi viÁt mã, há tháng t¿o ra một táp.java Khi biên dịch mã nguồn cÿa ch°¢ng trình s¿ đ°āc biên dịch ra mã byte code Máy Áo Java (Java Virtual Machine) s¿ thông dịch mã byte code này thành machine code (hay native

9

đ°āc trên nhiều nền tÁng khác nhau Vßi điều kián là JVM có hỗ trā ch¿y

đo¿n mã Java là chậm h¢n các ngôn ngữ biên dịch khác (tuy nhiên vẫn ã

d) C¢ chÁ thu gom rác

• Khi t¿o ra các đái t°āng trong Java, JRE s¿ tự động cấp phát không gian bộ

• Vßi ngôn ngữ nh° C \ C++, b¿n s¿ phÁi yêu cầu hÿy vùng nhß mà b¿n

đã cấp phát, để tránh viác thất thoát vùng nhß Tuy nhiên vì một lý do nào

đó, b¿n không hÿy một vài vùng nhß, dẫn đÁn viác thất thoát và làm giÁm

• Ngôn ngữ lập trình Java hỗ trā cho b¿n điều đó, nghĩa là b¿n không phÁi tự

đã đ°āc cấp Khi không có tham chiÁu nào đÁn vùng nhß, bộ thu dọn rác s¿

e) Tính an toàn và b Áo mÁt

• Tính an toàn

th°ßc cÿa mÁng hoặc chuỗi

• Tính bÁo mật

đÁm bÁo đ°āc các quy định, quy tắc tr°ßc khi thực thi

2.1.3 Āng dāng cÿa ngôn ngÿ Java

• Các āng dāng cho hã điÃu hành Android: NÁu b¿n có một chiÁc đián

tho¿i Android thì đồng nghĩa vßi viác mọi āng dăng mà b¿n đang sử dăng đều đ°āc hình thành và phát triển trên nền tÁng Java bãi vì há điều hành Android đ°āc lập trình Java hỗ trā tái đa Vậy nên đây quÁ là một c¢ hội lßn cho các lập trình viên Java khi sự phát triển cÿa Android ngày càng lßn m¿nh Android tuy sử dăng máy Áo JVM và các package khác, nh°ng phần code thì vẫn đ°āc viÁt bằng Java

• Các āng dāng bÁo mÁt cao: Java là ngôn ngữ lập trình có tính bÁo mật

cao nên nó th°áng đ°āc sử dăng vào trong các dịch vă tài chính, ngân hàng Trên thÁ gißi hián nay có rất nhiều ngân hàng sử dăng Java để viÁt các há tháng giao dịch đián tử, các há tháng xác nhận và kiểm toán, các dự án xử

lý dữ liáu và một sá công viác quan trọng khác nh° Goldman Sachs, Citigroup, Barclays, Standard Charted và các ngân hàng khác

• Các āng dāng web Java: Lập trình Java không chỉ đ°āc sử dăng trên thiÁt

bị di động mà còn đ°āc biÁt đÁn là nền tÁng cÿa cÿa các āng dăng website Đây cũng là ngôn ngữ đ°āc sử dăng nhiều trong các āng dăng web và th°¢ng m¿i đián tử Nhiều tổ chāc chính phÿ, y tÁ, bÁo hiểm, giáo dăc, quác phòng và một sá bộ phận khác có āng dăng web đ°āc xây dựng bằng Java

11

• Các công cā ph¿n mÃm: Hián nay có rất nhiều các công că phát triển và

phần mềm hữu ích đ°āc viÁt bằng Java, ví dă: Eclipse, InetelliJ Idea và Netbans IDE

bị nhúng nh°ng sau đó ngày càng đ°āc phát triển mã rộng ra các lĩnh vực khác Bãi vậy vßi châm ngôn "viÁt một lần, ch¿y mọi n¢i" cho thấy rằng Java đang mang l¿i nhiều lāi ích to lßn

• Các công nghã Big Data: Hadoop và các công nghá big data khác cũng

đang sử dăng Java theo cách này hay cách khác, ví dă: HBase, Accumulo (mã nguồn mã) và ElasticSearch

• Trong lĩnh vāc giao dßch chāng khoán: Java có một lāi thÁ nữa đó là sử

dăng phù hāp vßi các há tháng có hiáu suất cao, bãi vì mặc dù hiáu suất có thua chút ít so vßi ngôn ngữ native, nh°ng b¿n l¿i có đ°āc sự an toàn, linh động và bÁo trì vßi tác độ nhanh h¢n

• Các āng dāng khoa hác: Hián nay Java th°áng là một lựa chọn mặc định

cho các āng dăng khoa học, bao gồm cÁ xử lý ngôn ngữ tự nhiên

2.2 Spring Framework

framework Spring thông th°áng, Spring Boot tß ra những lāi thÁ v°āt trội

● Auto config: tự động cấu hình thay lập trình viên, b¿n chỉ cần viÁt code và

● Dựa trên các Annotation để t¿o lập các bean thay vì XML

● Server Tomcat có thể đ°āc nhúng ngay trong file JAR build ra và có thể

Khi sử dăng Spring Boot, lập trình viên chỉ cần:

● Sử dăng Spring Initializr: nhập các thông tin cÿa dự án (project), chọn th°

12

● Mã mã nguồn và bắt đầu viÁt code

● Có thể ch¿y ngay trong IDE, hoặc build thành file JAR mà không cần cấu

- ¯u điểm nổi bật cÿa Spring Boot:

● Phát triển web một cách đ¢n giÁn và nhanh chóng

● Cấu hình an toàn

● Có thể hỗ trā YAML

● Có tính quÁn trị cao

● Dß dàng āng dăng Spring và các sự kián

● Có thể cấu hình ã bên ngoài và t¿o ra những táp thuộc tính

● Tính bÁo mật cao

2.3 VueJs

2.3.1 Khái ni ãm

• Vuejs đ°āc gọi tắt là Vue (đ°āc phát âm là /vjuː/, nó giáng nh° từ view

trong tiÁng Anh) Vue.js là một framework rất linh động đ°āc dùng phổ

biÁn để xây dựng nên các giao dián ng°ái dùng Hoàn toàn khác vßi các framework nguyên khái thì Vue th°áng sã hữu thiÁt kÁ từ đầu theo những

13

h°ßng cho phép cũng nh° khuyÁn khích làm viác để phát triển dß dàng h¢n các āng dăng theo từng b°ßc một

• Một khi đã phát triển lßp giao dián thì ng°ái dùng chỉ cần sử dăng lo¿i th°

vián lõi cÿa Vue Ngoài ra, nÁu nh° b¿n kÁt hāp vßi các kỹ thuật thiên h°ßng hián đ¿i thì Vue cũng có thể đáp āng đ°āc dß dàng mọi nhu cầu xây

dựng āng dăng cÿa một trang vßi độ phāc t¿p cao h¢n

2.3.2 ¯u và nh°ÿc đißm

• ¯u đißm cÿa VueJs

- No build step required: NÁu sử dăng Vue thì b¿n s¿ không cần

phÁi trÁi qua quá nhiều b°ßc để build mà có thể đi thẳng vào vấn

đề một cách dß dàng Bãi vì, Vue không cần sử dăng build tool

quá phāc t¿p mßi có thể xây dựng āng dăng, b¿n chỉ cần khai báo

một script là có thể phát triển một āng dăng bằng Vue

- Vue có thể t¿o cấu trúc dự án nhanh chóng h¢n nhá vào command

line interface

- Hián nay, tài liáu về Vue ngày càng đa d¿ng, rõ ràng về ngôn ngữ

nên b¿n có thể dß dàng trã thành chuyên gia về nó

- Vue sã hữu một há sinh thái vững chắc nên có thể cung cấp một sá

tián ích rất hữu ích cho viác xây dựng một āng dăng giao dián

điển hình nhất Nó có thể bao gồm: vue-router, vuex,

vue-test-utils, vue-dev- tools, vue-cli, …

14

- Nền tÁng Vue sã hữu tính năng tái thiểu bãi khÁ năng tập trung vào viác

kÁt xuất giao dián cho ng°ái dùng và các t°¢ng tác cÿa nó Chính vì vậy,

nó s¿ cung cấp tái thiểu những tính năng cần thiÁt cho viác thiÁt kÁ và xây dựng kiÁn trúc Nó s¿ giúp b¿n lo¿i bß đ°āc các tính năng không cần thiÁt ra khßi th° vián trong lõi Vue.js và đÁm bÁo cho framework nhß

gọn và mềm dẻo h¢n

• Nh°ÿc đißm cÿa VueJs

Tuy đã khắc phăc đ°āc nhiều nh°āc điểm từ đàn anh nh°ng Vue.js

- ThiÁu hỗ trā tài chính cho các dự án quy mô lßn do vị thÁ ch°a thể

bằng Angular hay React

- Nguồn tài nguyên gißi h¿n do còn non trẻ

2.4 PostgreSQL

2.4.1 Khái ni ãm

• PostgreSQL là một há tháng quÁn trị c¢ sã dữ liáu quan há-đái t°āng (object-relational database management system) có măc đích chung, há

• PostgreSQL đ°āc phát triển dựa trên POSTGRES 4.2 t¿i phòng khoa học

• PostgreSQL đ°āc thiÁt kÁ để ch¿y trên các nền tÁng t°¢ng tự UNIX Tuy

đ°āc trên nhiều nền tÁng khác nhau nh° Mac OS X, Solaris và Windows

bÁn (MVCC), có nghĩa là đọc không bao giá chặn viác ghi và ng°āc l¿i Tính năng này là một trong những lý do chính t¿i sao các doanh nghiáp thích Postgres h¢n MySQL Nh° Postgres giÁi thích, "Không giáng nh° hầu hÁt các há tháng c¢ sã dữ liáu khác sử dăng khóa để kiểm soát đồng thái, Postgres duy trì tính nhất quán cÿa dữ liáu bằng cách sử dăng mô hình đa vũ tră Điều này có nghĩa là trong khi truy vấn c¢ sã dữ liáu, mỗi giao dịch s¿ thấy một Ánh chăp nhanh dữ liáu ( phiên bÁn c¢ sã dữ liáu ) nh° một sá thái gian tr°ßc, bất kể tr¿ng thái hián t¿i cÿa dữ liáu c¢ bÁn Điều này bÁo vá giao dịch khßi viác xem dữ liáu không nhất quán có thể

do (khác) cập nhật giao dịch đồng thái trên cùng các hàng dữ liáu, cung cấp sự cô lập giao dịch cho mỗi phiên c¢ sã dữ liáu "

nhiều ng°ái đọc và ng°ái viÁt t°¢ng tác đồng thái vßi c¢ sã dữ liáu

liáu Một lāi ích phă là quá trình này cung cấp một sự thúc đẩy hiáu quÁ lßn

quan há tiêu chuẩn là PostgreSQL l°u trữ nhiều thông tin h¢n trong danh măc cÿa nó: không chỉ thông tin về bÁng và cột, mà còn thông tin về kiểu

dữ liáu, hàm, ph°¢ng pháp truy cập, v.v." cÿa Postgres Ng°ái dùng có thể sửa đổi các bÁng này, có nghĩa là ng°ái dùng có thể mã rộng Postgres, không giáng nh° hầu hÁt các há tháng c¢ sã dữ liáu thông th°áng, đòi hßi các thay đổi đ°āc mã hóa cāng trong mã nguồn để sửa đổi phần mềm

Nh°ÿc đißm:

16

• Postgres không thuộc sã hữu cÿa một tổ chāc Vì vậy, nó đã gặp khó khăn khi đ°a tên cÿa mình ra khßi đó mặc dù có đầy đÿ tính năng và có thể so

h¢n MySQL vì PostgreSQL tập trung vào khÁ năng t°¢ng thích

• Nhiều āng dăng nguồn mã hỗ trā MySQL, nh°ng có thể không hỗ trā PostgreSQL

• Về sá liáu hiáu suất, nó chậm h¢n MySQL

17

CH¯¡NG 3: PHÂN TÍCH THIÀT KÀ Hâ THàNG

3.1 Thi Át kÁ hã tháng

3.1.1 Xác đßnh yêu c¿u cÿa hã tháng

3.1.1.1 Các yêu c ¿u chāc năng

● Há tháng cung cấp cho khách hàng đầy đÿ thông tin về sÁn phẩm nh°:

● Khách hàng có thể xem gißi thiáu chi tiÁt về các sÁn phẩm nh° giá tiền, th°¢ng hiáu, kích cÿ, màu sắc

● Khách hàng mua sÁn phẩm trực tiÁp trên website

● Viác có tài khoÁn trên há tháng còn giúp khách hàng chỉnh sửa các

thân đã đặt

● Ngoài ra, khách hàng còn có thể để l¿i thông tin ã phần liên há để nhân viên hỗ trā giÁi quyÁt khi có thắc mắc

● Cần đăng nhập tr°ßc vào há tháng quÁn lý cửa hàng

● QuÁn trị viên có thể xem đ°āc doanh sá cÿa cửa hàng, xem các đ¢n hàng

● QuÁn trị viên còn có thêm thêm, sửa, xóa sÁn phẩm cÿa mình

3.1.1.2 Các yêu c ¿u phi chāc năng

18

1.4 3.1.2 Bißu đã use case tổng quát và bÁng CSDL

3.1.2.1 Bi ßu đã use case tổng quát

Admin User

DangKy

TimKiemSanPham XemDanhSachSanPham

19

3.1.2.2 Bi ßu đã các lßp Entity cÿa hã tháng

20

3.1.3 Mô t Á chi tiÁt các use case

3.1.3.1 Use case <Đăng nhÁp=

a Mô t Á chi tiÁt

Tên use case: Đăng nhập

Mô t Á v¿n t¿t: Use case này cho phép khách hàng đăng nhập vào āng dăng

và mật khẩu rồi sau đó ấn nút <Đăng nhập= Há tháng s¿ lấy ra thông tin cÿa tài khoÁn trong bÁng User Há tháng hiển thị thông báo đăng nhập thành công và quay về màn hình trang chÿ

Use case kÁt thúc

ghi trong bÁng USER Há tháng s¿ hiển thị thông báo lỗi và yêu cầu

thao tác

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

Các yêu c ¿u đặc biãt: Khách hàng cần nhập đúng các thông tin yêu cầu để

đăng nhập

Ti Ãn điÃu kiãn: Khách hàng đã có tài khoÁn

H Áu điÃu kiãn: Đăng nhập thành công khách hàng đ°āc thực hián các chāc

năng cần tài khoÁn để sử dăng

Đißm mã rßng: Không có

b Bi ßu đã Basic Flow

21

Downloaded by Vu Vu (quangchinhlas199@gmail.com)

22

c Bi ßu đã VOPC

3.1.3.2 Use case <Đăng ký=

a Mô t Á chi tiÁt

Tên use case: Đăng ký

Mô t Á v¿n t¿t: Use case cho phép khách hàng đăng ký tài khoÁn để đăng

nhập vào trang web

email) để t¿o tài khoÁn

email, mật khẩu và xác thực mật khẩu rồi sau đó ấn nút <Đăng Ký= Há tháng hiển thị thông báo đăng kí tài khoÁn thành công và quay về màn hình trang chÿ

Use case kÁt thúc

Downloaded by Vu Vu (quangchinhlas199@gmail.com)

23

định sẵn Há tháng s¿ hiển thị thông báo nhập sai định d¿ng cÿa email

và mật khẩu tuỳ theo định d¿ng ng°ái dùng nhập sai

há tháng s¿ hiển thị thông báo tài khoÁn đã tồn t¿i và yêu cầu ng°ái dùng nhập l¿i

Các yêu c ¿u đặc biãt: Khách hàng cần nhập đúng các thông tin yêu cầu để

đăng ký tài khoÁn

Ti Ãn điÃu kiãn: Không có

H Áu điÃu kiãn: Đăng ký thành công s¿ có một bÁn ghi mßi trong bÁng Users

và User_Role

Đißm mã rßng: Không có

b Bi ßu đã Basic Flow

Downloaded by Vu Vu (quangchinhlas199@gmail.com)

24

c Bi ßu đã VOPC

3.1.3.3 Use case <Xem danh sách sÁn phẩm=

a Mô t Á chi tiÁt

Tên use case: Xem danh sách sÁn phẩm

Mô t Á v¿n t¿t: Use case này cho phép khách hàng xem các sÁn phẩm trong

Downloaded by Vu Vu (quangchinhlas199@gmail.com)

25

gồm: id, tên sÁn phẩm, Ánh, giá thành sau đó hiển thị lên màn hình

Use case kÁt thúc

kÁt nái đ°āc vßi c¢ sã dữ liáu thì há tháng s¿ hiển thị thông báo lỗi và

- Ti Ãn điÃu kiãn: Không có

- H Áu điÃu kiãn: Không có

- Đißm mã rßng: Không có

b Bi ßu đã Basic Flow

Downloaded by Vu Vu (quangchinhlas199@gmail.com)

26

c Bi ßu đã VOPC

3.1.2.4 Use case <Xem chi tiÁt sÁn phẩm=

a Mô t Á chi tiÁt

Tên use case: Xem chi tiÁt sÁn phẩm

Mô t Á v¿n t¿t: Use case này cho phép khách hàng xem thông tin chi tiÁt

tháng s¿ lấy thông tin sÁn phẩm (Ánh, giá, tên sÁn phẩm, gißi thiáu về sÁn

màn hình

Use case kÁt thúc

Downloaded by Vu Vu (quangchinhlas199@gmail.com)

27

b Bi ßu đã Basic Flow

c Bi ßu đã VOPC

: User : ChiTietSanPhamUI :

ChiTietSanPhamController : ChiTietSanPhamController

: Product : ICSDL : CSDL 1: click vao anh hoac ten san pham( )

2: lay thong tin san pham( )

3: doc bang Product( )

4: doc bang Product( ) 5: get Product by Id( )

6: return ketqua 7: hien thi chi tiet san pham( )

Downloaded by Vu Vu (quangchinhlas199@gmail.com)