THIẾT KẾ WEBSITE GIỚI THIỆU VÀ BÁN ÁO MĂNG TÔ CHO SHOP BẢO MINH

Dữ liệu này được duy trì dưới dạng một tập hợp các tập tin trong hệ điềuhành hay được lưu trữ trong các hệ quản trị cơ sở dữ liệu.PHP Personal Home Page Là một ngôn ngữ lập trình kịch bả

Trang 1

MỤC LỤC

BẢNG KÝ HIỆU CÁC CỤM TỪ VIẾT TẮT 7

CHƯƠNG 1: TỔNG QUAN 8

1.1 Lý do và mục tiêu chọn đề tài 8

1.1.1 Lý do chọn đề tài 8

1.1.2.Mục tiêu của đề tài 8

1.1.3.Giới hạn phạm vi của đề tài 8

CHƯƠNG 2: CƠ SỞ LÝ THUYẾT 9

2.1.Nền tảng xây dựng 9

2.1.1 Trình bày phân tích và thiết kế hướng đối tượng UML 9

2.1.1.1 Khái niệm phân tích thiết kế hướng đối tượng và các vấn đề liên quan 9

2.1.1.2 Khái niệm UML và các vấn đề liên quan 9

2.1.2 Trình bày về HTML, CSS 11

2.1.2.1 HTML là gì ? 11

2.1.2.2 CSS là gì ? 12

2.1.3 Trình bày về Javascript và jQuery 14

2.1.3.1 Javascript 14

2.1.4 Trình bày về PHP, mô hình MVC 15

2.1.4.1 PHP là gì ? 15

2.1.4.2 Mô hình MVC 17

2.1.5 Tìm hiểu về Framework Bootstrap 18

2.1.6 Trình bày về MYSQL 19

2.1.6.1 Tìm hiểu về SQL và một số vấn đề liên quan 19

2.1.6.2 MySQL và một số vấn đề liên quan 21

2.2 Công cụ sử dụng 23

2.2.1 Tìm hiểu phầm mềm hỗ trợ phân tích thiết kế Rational Rose 23

2.2.2 Phần mềm hỗ trợ code Sublime Text 23

2.2.3 Chương trình tạo máy chủ Web XAMPP 24

2.3.Quy trình xây dựng 24

CHƯƠNG 3: NỘI DUNG THỰC HIỆN 25

Trang 2

3.1.1.Giới thiệu về đơn vị 25

3.1.2.Chức năng 25

3.1.3 Mục tiêu 25

3.1.4.Xác định yêu cầu chức năng của hệ thống 25

3.1.5.Xác định yêu cầu phi chức năng của hệ thống 27

3.2 Phân tích hệ thống 27

3.2.1 Biểu đồ chức năng (Use-case diagram) 27

3.2.1.1 Xác định và phân loại các tác nhân 28

3.2.1.2 Xây dựng biểu đồ Use-case 30

3.2.1.3 Nhóm use-case quản lý giỏ hàng 41

3.2.1.4 Nhóm use-case quản lý người dùng 48

3.2.1.5 Nhóm use-case quản lý đơn hàng 52

3.2.1.6 Quản lý use-case quản lý danh mục 56

3.2.1.7 Quản lý use-case quản lý sản phẩm 61

3.2.1.8 Quản lý use-case quản lý tin tức 66

3.2.1.9 Quản lý use-case quản lý hỗ trợ 70

3.2.2 Thiết kế hệ thống 74

3.2.2.1 Biểu đồ tuần tự (Sequence Diagram) 74

3.2.2.2 Biểu đồ hoạt động (Active Diagram) 84

3.2.2.3 Biểu đồ lớp (Class Diagram) 94

3.2.3 Thiết kế cơ sở dữ liệu 95

3.2.4 Thiết kế giao diện 99

3.2.5 Cài đặt và triển khai 100

KẾT LUẬN 108

TÀI LIỆU THAM KHẢO 109

Trang 3

MỤC LỤC HÌNH ẢNH

Hình 3 1 Use-case tổng quát 30

Hình 3 2 Use-case quản lý giỏ hàng 42

Hình 3 3 Use-case quản lý người dùngĐặc tả Use-case: 48

Hình 3 4 Use-case quản lý đơn hàng 52

Hình 3 5 Use-case quản lý danh mục 56

Hình 3 6 Use-case quản lý sản phẩm 61

Hình 3 7 Use-case Quản lý tin tức 66

Hình 3 8.Use-case quản lý hỗ trợ 71

Hình 3 9 Biểu đồ tuần tự đăng nhập 75

Hình 3 10 Biểu đồ tuần tự đăng ký 76

Hình 3 11 Biểu đồ tuần tự đăng xuất 76

Hình 3 12 Biểu đồ tuần tự thêm sản phẩm 77

Hình 3 13 Biểu đồ tuần tự sửa sản phẩm 77

Hình 3 14 Biểu đồ tuần tự xóa sản phẩm 78

Hình 3 15 Biểu đồ tuần tự thêm danh mục 78

Hình 3 16 Biểu đồ tuần tự sửa danh mục 79

Hình 3 17 Biểu đồ tuần tự xóa danh mục 79

Hình 3 18 Biểu đồ tuần tự thêm người dùng 80

Hình 3 19 Biểu đồ tuần tự sửa người dùng 80

Hình 3 20 Biểu đồ tuần tự xóa người dùng 81

Hình 3 21 Biểu đồ tuần tự thêm tin tức 81

Hình 3 22 Biểu đồ tuần tự sửa tin tức 82

Hình 3 23 Biểu đồ tuần tự xóa tin tức 82

Hình 3 24 Biểu đồ tuần tự xóa tin hỗ trợ 83

Hình 3 25 Biểu đồ tuần tự thêm sản phẩm vào giỏ hàng 83

Hình 3 26 Biểu đồ tuần tự xóa sản phẩm trong giỏ 84

Hình 3 27 Biểu đồ tuần tự thanh toán giỏ hàng 84

Hình 3 28 Biểu đồ tuần tự gửi tin hỗ trợ 85

Hình 3 29 Biểu đồ tuần tự tìm kiếm 85

Hình 3 30 Biểu đồ hoạt động đăng nhập 86

Hình 3 31 Biểu đồ hoạt động đăng ký 86

Hình 3 32 Biểu đồ hoạt động đăng xuất 86

Hình 3 33 Biểu đồ hoạt động thêm mới danh mục 87

Hình 3 34 Biểu đồ hoạt động sửa danh mục 88

Hình 3 35 Biểu đồ hoạt động xóa danh mục 88

Hình 3 36 Biểu đồ hoạt động thêm mới sản phẩm 89

Hình 3 37 Biểu đồ hoạt động sửa sản phẩm 90

Hình 3 38 Biểu đồ hoạt động xóa sản phẩm 90

Trang 4

Hình 3 40 Biểu đồ hoạt động sửa người dùng 92

Hình 3 41 Biểu đồ hoạt động xóa người dùng 92

Hình 3 42 Biểu đồ hoạt động thêm mới tin tức 93

Hình 3 43 Biểu đồ hoạt động sửa tin tức 94

Hình 3 44 Biểu đồ hoạt động xóa tin tức 94

Hình 3 45 Biểu đồ hoạt động xóa tin hỗ trợ 95

Hình 3 46 Biểu đồ hoạt động thêm sản phẩm mới vào giỏ hàng 95

Hình 3 47 Biểu đồ hoạt động xóa sản phẩm khỏi giỏ hàng 96

Hình 3 48 Biểu đồ hoạt động thanh toán giỏ hàng 96

Hình 3 49 Biểu đồ hoạt động gửi tin hỗ trợ 97

Hình 3 50 Biểu đồ hoạt động tìm kiếm 97

Hình 3 51 Giao diện trang chủ 102

Hình 3 52 Giao diện gửi phản hồi 103

Hình 3 53 Giao diện đăng nhập 103

Trang 5

MỤC LỤC BẢ

Bảng 3 1 Xác định các Actor và Use-case 28

Bảng 3 2 Đặc tả Use-case quản lý giỏ hàng 30

Bảng 3 3 Đặc tả Use-case Quản lý đơn hàng 32

Bảng 3 4 Đặc tả Use-case quản lý danh mục 33

Bảng 3 5 Đặc tả Use-case quản lý sản phẩm 34

Bảng 3 6 Đặc tả Use-case quản lý tin tức 36

Bảng 3 7 Đặc tả Use-case quản lý hỗ trợ 37

Bảng 3 8 Đặc tả Use-case đăng nhập 38

Bảng 3 9 Đặc tả Use-case đăng xuất 40

Bảng 3 10 Đặc tả Use-case đăng ký 41

Bảng 3 11 Đặc tả Use-case em giỏ hàng 42

Bảng 3 12 Đặc tả Use-case xóa giỏ hàng 43

Bảng 3 13 Đặc tả Use-case xóa sản phẩm trong giỏ hàng 44

Bảng 3 14 Đặc tả Use-case thanh toán giỏ hàng 45

Bảng 3 15 Đặc tả Use-case thêm sản phẩm vào giỏ hàng 46

Bảng 3 16 Đặc tả Use-case cập nhập giỏ hàng 47

Bảng 3 17 Đặc tả Use-case thêm người dùng 49

Bảng 3 18 Đặc tả Use-case sửa người dùng 50

Bảng 3 19 Đặc tả Use-case xóa sản phẩm 51

Bảng 3 20 Đặc tả Use-case hủy đơn hàng 52

Bảng 3 21 Đặc tả Use-case xóa đơn hàng 53

Bảng 3 22 Đặc tả Use-case đã giao hàng 54

Bảng 3 23 Đặc tả Use-case xem đơn hàng 55

Bảng 3 24 Đặc tả Use-case thêm danh mục 56

Bảng 3 25 Đặc tả Use-case sửa danh mục 57

Bảng 3 26 Đặc tả Use-case xóa danh mục 58

Bảng 3 27 Đặc tả Use-case xem danh mục 59

Bảng 3 28 Đặc tả Use-case chọn danh mục 60

Bảng 3 29 Đặc tả Use-case thêm sản phẩm 61

Bảng 3 30 Đặc tả Use-case sửa sản phẩm 62

Bảng 3 31 Đặc tả Use-case xóa sản phẩm 63

Bảng 3 32 Đặc tả Use-case xem sản phẩm 64

Bảng 3 33 Đặc tả Use-case tìm kiếm sản phẩm 65

Bảng 3 34 Đặc tả use-case thêm tin tức 67

Bảng 3 35 Đặc tả Use-case sửa tin tức 68

Bảng 3 36 Đặc tả Use-case xóa tin tức 69

Bảng 3 37 Đặc tả Use-case xem tin tức 70

Bảng 3 38 Đặc tả Use-case xóa tin hỗ trợ 72

Trang 6

Bảng 3 40 Đặc tả Use-case gửi tin hỗ trợ 73

Bảng 3 41 Bảng cơ sở dữ liệu sản phẩm 98

Bảng 3 42 Bảng cơ sở dữ liệu danh mục 99

Bảng 3 43 Bảng cơ sở dữ liệu chi tiết hóa đơn 100

Bảng 3 44 Bảng cơ sở dữ liệu tin tức 100

Bảng 3 45 Bảng cơ sở dữ liệu hóa đơn 101

Bảng 3 46 Bảng cơ sở dữ liệu hỗ trợ 101

Bảng 3 47 Bảng cơ sở dữ liệu người dùng 102

Y

Trang 7

BẢNG KÝ HIỆU CÁC CỤM TỪ VIẾT TẮT

MYSQL My Structured

Query

MySQL không phải là một ngôn ngữ truy vấn mà là một

hệ quản lý cơ sở dữ liệu Nó là phần mềm dùng để lưu trữ

và quản lý cơ sở dữ liệu

CSS Cascading Style

Sheet

Trong tin học, các tập tin định kiểu theo tầng – dịch

từ tiếng Anh là Cascading Style Sheets (CSS) – đượcdùng để miêu tả cách trình bày các tài liệu viết bằng ngônngữ HTML và XHTML

UML Unified Modeling

Language

Là một ngôn ngữ mô hình gồm các ký hiệu đồ họa mà cácphương pháp hướng đối tượng sử dụng để thiết kế các hệthống thông tin một cách nhanh chóng

HTML Hyper Text Markup

Language

Là ngôn ngữ được thiết kế ra để tạo nên các trang web

Javascript Java Script JavaScript là một ngôn ngữ lập trình kịch bản Ngôn ngữ

này được dùng rộng rãi cho các trang web, nhưng cũngđược dùng để tạo khả năng viết script sử dụng các đốitượng nằm sẵn trong các ứng dụng

JQuery Jquery Thư viện của Javascript

MVC

Model-View-Controller

Mô hình thiết kế phần mềmCSDL Cơ sở dữ liệu Là một tập hợp thông tin có cấu trúc Dữ liệu này được

duy trì dưới dạng một tập hợp các tập tin trong hệ điềuhành hay được lưu trữ trong các hệ quản trị cơ sở dữ liệu.PHP Personal Home

Page

Là một ngôn ngữ lập trình kịch bản hay một loại mã lệnh chủ yếu được dùng để phát triển các ứng dụng viết cho máy chủ, mã nguồn mở Nó rất thích hợp với web và

có thể dễ dàng nhúng vào trang HTML

Trang 8

CHƯƠNG 1: TỔNG QUAN 1.1 Lý do và mục tiêu chọn đề tài

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

Cuộc cách mạng công nghiệp 4.0 đang trong giai đoạn khởi phát và sẽ tác độngđến mọi lĩnh vực kinh tế - xã hội Trên thực tế, cuộc cách mạng công nghiệp 4.0 tronglĩnh vực bán lẻ đang âm thầm diễn ra và nó đã mở ra nhiều cơ hội phát triển cho ViệtNam, hiện nay nó đã tạo nên những thay đổi đột phá từ những tiêu chuẩn dịch vụ đadạng, hiệu quả và nhanh chóng dựa trên nền tảng công nghệ số

Đối với người tiêu dùng Việt tại các cửa hàng bán lẻ truyền thống có một sự bấttiện mà ai cũng biết đó là việc khi đi mua sắm thì luôn phải tự đến cửa hàng xem sảnphẩm lựa chọn Thậm chí phải ra ngoài đường khi trời mưa hay nắng đến tận cửa hàng

để mua đồ khi cần gấp

Chính vì vậy em đã chọn đề tài “Thiết kế website giới thiệu và bán áo măng tôcho shop Bảo Minh” với mục đích nghiên cứu, tìm hiểu về ngôn ngữ lập trình PHP,HTML, CSS

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

Xây dựng được website giới thiệu và bán áo măng tô cho shop Bảo Minh , tiệnlợi cho người dùng khi xem và mua hàng trực tuyến mà không phải đến của hàng

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

- Xây dựng chương trình dựa trên ngôn ngữ đánh dấu siêu văn bản (HTML),

CSS, JS, JQUERY

- Hệ quản trị cơ sở dữ liệu MySQL tích hợp cùng webserver trong XAMPP.

Trang 9

CHƯƠNG 2: CƠ SỞ LÝ THUYẾT 2.1.Nền tảng xây dựng

Ứng dụng quản lý nhân sự sẽ được xây dựng dựa trên HTML, CSS, JavaScript,PHP và hệ quản trị cơ sở dữ liệu MySQL

2.1.1 Trình bày phân tích và thiết kế hướng đối tượng UML.

2.1.1.1 Khái niệm phân tích thiết kế hướng đối tượng và các vấn đề liên quan

Phân tích và thiết kế hướng đối tượng (OOAD – Object Oriented Analysis and Design): là phân tích xem hệ thống gồm những đối tượng nào trong trong hệ

thống và chúng tương tác, liên kết với nhau như thế nào, từ việc mô tả được tất cả cácđối tượng và sự tương tác của chúng sẽ giúp chúng ta hiểu rõ về hệ thống và cài đặtđược nó

Ưu điểm:

- Gần gũi với thế giới thực

- Tái sử dụng dễ dàng

- Đóng gói, che dấu thông tin làm cho hệ thống tin cậy hơn

- Thừa kế giảm chi phí, hệ thống có tính mở cao

- Với hệ thống lớn và phức tạp, hoặc có nhiều luồng dữ liệu khác nhau, sử dụngphương pháp hướng đối tượng giúp tận dụng khả năng bảo vệ giữ liệu ngoài racòn tiết kiệm công sức và tài nguyên

Nhược điểm: Phương pháp này khá phức tạp, khó theo dõi được luồng dữ liệu

do có nhiều luồng dữ liệu ở đầu vào

Các giai đoạn phân tích thiết kế hướng đối tượng:

- Phân tích hướng đối tượng (Object Oriented Analysis)

- Thiết kế hướng đối tượng (Object Oriented Design)

- Lập trình hướng đối tượng (Object Oriented Programming)

2.1.1.2 Khái niệm UML và các vấn đề liên quan.

UML (Unified Modeling Language) là một ngôn ngữ mô hình hóa tổng quát,

trực quan bằng hình ảnh, dùng để đặc tả (Specifying), mô hình hóa trực quan(Visualizing), hình dung xây dựng (Constructing) và tài liệu hóa (Documenting), các

Trang 10

UML sử dụng để vẽ cho nhiều lĩnh vực khác nhau như phần mềm, cơ khí, xây

dựng v… trong phạm vi đồ án chỉ nghiên cứu cách sử dụng UML cho phân tích vàthiết kế hướng đối tượng trong ngành phần mềm OOAD sử dụng UML bao gồm cácthành phần sau:

- View (góc nhìn)

- Diagram (bản vẽ)

- Notations (ký hiệu)

- Mechanisms (qui tắc, cơ chế)

Bảng 2.1: Các vấn đề liên quan đến UML

- Mô tả yêu cầu chức năng của hệ thống

- Mô tả tương tác giữa người sử dụng với hệ thống

- Biểu đồ tuần tự: Mô tả tương tác giữa các đối tượng

theo trình tự thời gian và thông điệp được truyền đigiữa các lớp

- Biểu đồ cộng tác: Không theo thứ tự nhưng biểu diễn

tổng quát giao tiếp giữa các đối tượng

- Mô tả các hoạt động, luồng xử lý bên trong hệ thống

Nó có thể được sử dụng để mô tả các qui trình nghiệp

vụ trong hệ thống, các luồng của một chức năng hoặccác hoạt động của một đối tượng

7 Trạng thái - Mô tả vòng đời của đối tượng từ khi nó được tạo ra tới

Trang 11

HTML (HyperText Markup Language) là ngôn ngữ đánh dấu siêu văn bản,

dùng để tạo ra các trang web

HTML bao gồm một tập hợp các thẻ dùng để:

● Định nghĩa cấu trúc của trang web

● Định dạng nội dung của trang web

● Tạo các siêu liên kết để liên kết đến những trang web khác

● Chèn âm thanh, hình ảnh, video,… vào trang web

- Tập tin HTML là gì ?

● Tập tin HTML là một tập tin text có chứa các thẻ HTML (tập tin có phần mởrộng là html)

● Tập tin HTML còn được gọi là một trang web

● Nếu cú pháp có bị sai thì trình duyệt vẫn không bão lỗi, nhưng nó sẽ hiển thịkhông như ý muốn

Trang 12

● Các thẻ gồm một cặp thẻ đóng và mở được gọi là thẻ kép (Ví dụ: <b></b>,

<p></p>, <i></i>)

● Một số thẻ có thêm các thuộc tính: Dùng để chỉ định một số thuộc tính khácliên quan đến thẻ Nếu có, sẽ được khai báo trong thẻ mở (Ví dụ: <p align =

“center”>align là một thuộc tính dùng để căn lề cho đoạn văn bản</p>)

- Cấu trúc cơ bản của một tập tin HTML:

Một tập tin HTML được bắt đầu bằng thẻ <html> và kết thúc bởi </html> Bêntrong cặp thẻ <html></html> được chia thành hai phần chính:

1 Phần <head>: chứa tiêu đề trang web, các tập tin hỗ trợ, cách khai báo,…

2 Phần <body>: chứa các nội dung mà bạn muốn hiển thị ra màn hình

Hình 2.1 Cấu hình cơ bản tập tin HTML

2.1.2.2 CSS là gì ?

- Khái niệm CSS

CSS (Cascading Style Sheet) là mã sử dụng dùng để trình bày bố cục của một

website dựa vào các thẻ HTML CSS là ngôn ngữ quy định cách trình bày của các thẻHTML trên trang web CSS được tổ chức World Wide Web (W3C) giới thiệu vào năm

1996 Hiện này CSS đang là ngôn ngữ đang được sử dụng rất nhiều trong lập trìnhweb, có thể nói CSS ra đời đã tạo nên một cuộc cách mạng

CSS chỉ đơn thuần là một file có phần mở rộng là css, trong file này chứa

những câu lệnh CSS, mỗi câu lệnh CSS sẽ định dạng một phần nhất định của tài liệuHTML, như màu sắc, font chữ

- Ưu điểm CSS

Trang 13

● CSS có thể tách riêng phần định dạng ra khỏi nội dung trang web.

● CSS giúp người thiết kế kiểm soát toàn bộ giao diện nhanh nhất và hiệu quảnhất Giúp lập trình viên tiết kiệm công sức rất nhiều trong việc thiết kế giao diệnwebstie

● Do được tách rời khỏi nội dung trang web, nên các mã HTML sẽ gọn gànghơn, giúp lập trình viên thuận tiện trong việc chỉnh sửa giao diện web Kích thước củafile html cũng được giảm đáng kể Hơn thế nữa sẽ được trình duyệt tải một lần vàdùng nhiều lần (cache), do đó sẽ giúp tốc độ load trang web nhanh hơn

- Các cách khai báo CSS:

Có 3 cách để khai báo CSS: khai báo CSS cục bộ, khai báo CSS nội tuyến,khai báo CSS ngoại tuyến

+ Khai báo CSS cục bộ:

Viết mã CSS trực tiếp trong thẻ HTML, cụ thể là trong thuộc tính style, CSScục bộ chỉ có tác dụng trong thẻ HTML được khai báo

Ví dụ:

+ Khai báo CSS nội tuyến:

CSS nội tuyến là phần mã CSS được khai báo trong cặp thẻ <style> </style> vàđặt trong phần <head> </head> của file HTML Khi sử dụng CSS nội tuyến nó sẽ cótác dụng lên file html được khai báo nhưng không ảnh hưởng đến các file khác trongcùng một website

Trang 14

Đây là cách khai báo CSS được sử dụng nhiều nhất trong thực tế và cách khaibáo này mới tận dụng được hết thế mạnh mà CSS mang lại, tách biệt hoàn toàn khỏifile html, người thiết kế chỉ cần viết một file CSS duy nhất mà sử dụng nhiều lầntrong ứng dụng của họ.

Nó có phạm vi ảnh hưởng đến toàn bộ website chứ không phải một file htmlriêng biệt Do đó mỗi khi muốn thay đổi thuộc tính hiển thị của một thành phần nào đótrong website chỉ cần chỉnh file CSS này thay vì phải chỉnh sửa tất cả các file htmltrong ứng dụng

Để khai báo CSS ngoại tuyến, ta chỉ cần tạo một file có tên ví dụ như style.css,sau đó chèn đoạn code sau trong phần <head> </head> của trang web

Đoạn code cần chèn: <link rel = “stylesheet” href= “style.css” >

2.1.3 Trình bày về Javascript và jQuery

2.1.3.1 Javascript

JavaScript là một ngôn ngữ lập trình của HTML và WEB Nó là nhẹ và được

sử dụng phổ biến nhất như là một phần của các trang web, mà sự thi hành của chúngcho phép Client-Side script tương tác với người sử dụng và tạo các trang web động

Nó là một ngôn ngữ chương trình thông dịch với các khả năng hướng đối tượng

JavaScript được biết đến đầu tiên với tên Mocha, và sau đó là LiveScript,

nhưng Hãng Netscape thay đổi tên của nó thành JavaScript, bởi vì sự phổ biến như làmột hiện tượng của Java lúc bấy giờ JavaScript xuất hiện lần đầu trong Netscape 2.0năm 1995 với tên LiveScript Core đa năng của ngôn ngữ này đã được nhúng vàoNetscape, IE, và các trình duyệt khác

Các lợi thế của việc sử dụng JavaScript là:

● Sự tương tác Server ít hơn: có thể xác nhận đầu vào (input) người sử dụng

trước khi gửi trang tới Server Điều này làm tiết kiệm lưu lượng tải ở Server, nghĩa làServer tải ít hơn

● Phản hồi ngay lập tức tới khách truy cập: Họ không phải chờ cho một

trang web tải lại để thấy xem nếu họ đã quên nhập cái gì đó

● Khả năng tương tác tăng lên: Bạn có thể tạo các giao diện mà phản ứng lại

khi người sử dụng rê chuột qua chúng hoặc kích hoạt chúng thông qua bàn phím

Trang 15

● Giao diện phong phú hơn: Bạn có thể sử dụng JavaScript để bao gồm

những mục như các thành phần Drag và Drop (DnD) và các con trượt (Slider) để cungcấp một Rich Interface (Giao diện giàu tính năng) tới site khách truy cập của bạn

Hạn chế của Javascript

● Client-side JavaScript không cho phép đọc và ghi các file, bởi vì lý do bảomật

● JavaScript không được sử dụng cho việc kết nối mạng các ứng dụng bởi vìkhông có những hỗ trợ có sẵn

● JavaScript không có bất kỳ khả năng đa luồng hoặc đa xử lý

2.1.4 Trình bày về PHP, mô hình MVC

2.1.4.1 PHP là gì ?

PHP là viết tắt của chữ "Hypertext Preprocessor", đây là một ngôn ngữ lập

trình được sử dụng để viết ở phía máy chủ (lập trình web) Hiện nay có rất nhiều ngônngữ có thể viết ở máy chủ như C#, Java, Python và PHP chính là một trong nhữngngôn ngữ của nhóm này

PHP có cú pháp đơn giản, tốc độ nhanh và nhỏ gọn, dễ học và thời gian để tiếp

cập PHP ngắn hơn so với các ngôn ngữ lập trình khác nên hiện nay PHP đang chiếm

số lượng lập trình viên tương đối lớn, có thể gọi là lớn nhất Hiện PHP có rất nhiềucác CMS mã nguồn mở như WordPress, OpenCart, NukeViet cùng với đó là cácframework như Laravel, Symfony, CodeIgniter, … nên nó rất đa dạng và đáp ứng hầuhết các website thông thường từ blog cá nhân cho đến website giới thiệu công ty vàbán hàng

PHP sử dụng cặp thẻ mở <?php và thẻ đóng ?>, phía bên trong chính là nội

dung của mã code PHP

PHP chạy trên môi trường Webserver và lưu trữ dữ liệu thông qua hệ quản trị

cở sở dữ liệu nên PHP thường đi kèm với Apache, MySQL và hệ điều hành Linux(LAMP) Trong đó:

● Apache: là một phần mền web server có nhiệm vụ tiếp cận request từ trìnhduyệt người dùng sau đó chuyển giao cho PHP xử lý và gửi trả lại cho trình duyệt

● MySQL cũng tương tự như các hệ quản trị cở sở dữ liệu khác như Oracle,SQL Server,… đóng vai trò là lưu trữ và truy vấn dữ liệu Phần này, em xin có phần

Trang 16

● Linux: hệ điều hành mã nguồn mở được sử dụng rất rộng rãi cho các webserver Thông thường các phiên bản được sử dụng nhiều nhất là RedHat EnterpriseLinux, Ubuntu,…

- Một số tính chất của file PHP:

● Các file PHP trả về kết quả cho trình duyệt là một trang HTML thuần

● Các file PHP có thể chứa văn bản (Text), các thẻ HTML (HTML tags) vàđoạn mã kịch bản (Script)

● Các file PHP có phần mở rộng là: php, php3, phpml

● Các file code php phải sử dụng thẻ mở <?php hoặc <? và phải có đóng ?>.

● File code PHP sử dụng encode: UTF-8 without BOOM

● Từ phiên bản 4.0 trở về sau mới hỗ trợ session

- Quy trình hoạt động của PHP:

Khi người sử dụng gọi trang PHP, Web Server sẽ triệu gọi PHP Engine đểthông dịch dịch trang PHP và trả kết quả cho người dùng như hình 2.2 bên dưới

Trang 17

Hình 2.2 Quy trình hoạt động của PHP

2.1.4.2 Mô hình MVC

MVC (Model – View – Controller): Mô hình MVC là một kiến trúc phần

mềm, được tạo ra với mục đích quản lý và xây dựng dự án phần mềm có hệ thống hơn

Mô hình MVC được dùng khá rộng rãi và đặc biệt là trong các ngôn ngữ lập trìnhWeb Mô hình MVC chia 1 ứng dụng ra 3 thành phần khác nhau : Model, View vàController Với việc sử dụng mô hình MVC giúp cho mỗi thành phần có một nhiệm vụriêng biệt và độc lập với các thành phần còn lại

Nhiệm vụ của từng phần trong mô hình MVC:

● Model: chịu trách nhiệm tương tác với cơ sở dữ liệu, có thể thực thi truy vấn

thông thường hoặc trả về dữ liệu dạng đóng gói cho Controller xử lý và điều hướng

● View: có nhiệm vụ chứa mã giao diện hoặc nhận dữ liệu trả về từ Controller.

● Controller: chịu trách nhiệm nhận các request được gửi lên từ người dùng,

sau đó sẽ xử lý và điều hướng dữ liệu trả về

Trang 18

Hình 2.3 Mô hình MVC

Ưu điểm của MVC: Thể hiện tính chuyên nghiệp trong lập trình, phân tích

thiết kế Do được chia thành các thành phần độc lập nên giúp phát triển ứng dụngnhanh, đơn giản, dễ nâng cấp, bảo trì

Nhược điểm của MVC: Đối với dự án nhỏ việc áp dụng mô hình MC gây cồng

kềnh, tốn thời gian trong quá trình phát triển Tốn thời gian trung chuyển dữ liệu củacác thành phần

2.1.5 Tìm hiểu về Framework Bootstrap

Bootstrap là một front-end framework miễn phí giúp quá trình phát triển web

được nhanh chóng và dễ dàng hơn

Bootstrap bao gồm các mẫu thiết kế dựa trên HTML và CSS như typography,

forms, buttons, tables, navigation, modals, images carousels,… cũng như các pluginJavaScript tùy chọn

Bootstrap cũng cung cấp cho người sử dụng khả năng tạo ra các renponsive

designs một cách dễ dàng

Bootstrap ban đầu có tên Twitter Blueprint được phát triển bởi Mark Otto và

Jacob Thornton tại Twitter

Bootstrap là một trong những framework được sử dụng nhiều nhất trên thế giới

để xây dựng một giao diện website Bootstrap đã xây dựng nên một chuẩn riêng và rấtđược nhiều người dùng ưa chuộng Chính vì thế, chúng ta hay nghe tới một cụm từ rấtthông dụng: “Thiết kế theo chuẩn Bootstrap”

- Ưu điểm của Bootstrap:

● Dễ sử dụng: bất kỳ ai có kiến thức cơ bản về HTML và CSS đều có thể bắtđầu sử dụng Bootstrap

Trang 19

● Các tính năng đáp ứng (Responsive features): renponsive CSS của Bootstrapđiều chỉnh cho điện thoại, máy tính bảng, máy tính để bàn.

● Cách tiếp cận hướng làm web hiện hành nhất hiện nay Mobile-first: trongBootstrap 3, mobile-first là một phần của core framwork

● Khả năng tương thích trình duyệt: Bootstrap tương thích với tất cả các trìnhduyệt hiện tại như Chorme, Firefox, Internet Explorer, Edge, Safari và Opera

- Các phiên bản của Bootstrap:

● Bootstrap 1.0: được phát hành vào ngày 19/08/2011 Ở phiên bản đầu tiên

của Bootstrap, chưa được hỗ trợ trên màn hình mobile

● Bootstrap 2.0: được phát hành vào ngày 31/01/2012 Trên phiên bản này so

với phiên bản Bootstrap 11.0 trước đã được bổ sung hệ thống Gird-Layout 12 cột.Thêm một số thành phần (component) mới Và thay đổi một vài thành phần sẵn có.Nhưng vẫn chưa hỗ trợ trên màn hình mobile

● Bootstrap 3.0: được phát hành vào ngày 19/08/2013 Ở trên phiên bản này

các thành phần được thiết kế lại theo phong cách thiết kế phẳng (flat design) Và lầnđầu tiên, ở trên phiên bản 3.0 này Bootstrap đã hỗ trợ trên các thiết bị mobile

● Bootstrap 4.0: được phát hành vào ngày 19/01/2018 Đối với phiên bản 4.0

này gần như được viết lại hoàn toàn từ phiên bản 3.0 Nhưng lại được đánh giá dễ sửdụng hơn rất nhiều so với phiên bản 3.0 trước Đây cũng là phiên bản được sử dụngnhiều nhất hiện nay

2.1.6 Trình bày về MYSQL

2.1.6.1 Tìm hiểu về SQL và một số vấn đề liên quan.

SQL (Struct Querry Language): là ngôn ngữ truy vấn mang tính cấu trúc Nó

được thiết kế để quản lý dữ liệu trong một hệ thống quản lý cơ sở dữ liệu quan hệ(RDBMS) SQL là ngôn ngữ cơ sở dữ liệu, được sử dụng để tạo, xóa trong cơ sở dữliệu, lấy các hàng và sửa đổi các hàng

SQL được sử dụng để điều khiển tất cả các chức năng mà một hệ quản trị cơ sở

dữ liệu cung cấp cho người dùng bao gồm:

- Định nghĩa dữ liệu: SQL cung cấp khả năng định nghĩa các cơ sở dữ liệu,

các cấu trúc lưu trữ và tổ chức dữ liệu cũng như mối quan hệ giữa các thành phần dữliệu

Trang 20

- Đảm bảo toàn vẹn dữ liệu: SQL định nghĩa các ràng buộc toàn vẹn trong cơ

sở dữ liệu nhờ đó đảm bảo tính hợp lệ và chính xác của dữ liệu trước các thao tác cậpnhật cũng như các lỗi của hệ thống

- Điều khiển truy cập: SQL có thể được sử dụng để cấp phát và kiểm soát các

thao tác củangười sử dụng trên dữ liệu, đảm bảo sự an toàn cho cơ sở dữ liệu

- Truy xuất và thao tác dữ liệu: Với SQL, người dùng có thể dễ dàng thực

hiện các thao tác truy xuất, bổ sung, cập nhật và loại bỏ dữ liệu trong các cơ sở dữ liệu

- Các lệnh trong SQL: Căn cứ vảo bản chất của các lệnh để phân chia ra làm

các loại

- Ngôn ngữ định nghĩa dữ liệu (Data Definition Language - DLL): gồm có cáclệnh:

+ Create: Lệnh tạo mới một đối tượng trong Database

+ Alter: Lệnh sửa đổi một đối tượng trong Database

+ Drop: Lệnh xóa một đối tượng trong Database

Ngôn ngữ điều khiển dữ liệu (Data Control Language – DCL): gồm có các lệnh:

+ Grant: Lệnh trao quyền cho người dùng

+ Revoke: Lệnh thu hồi quyền đã trao cho người dùng

Ngôn ngữ thao tác dữ liệu (Data Manipulation Language - DML) gồm có các lệnh:

+ Select : Lấy bản ghi

+ Insert : Tạo một bản ghi

+ Update: Sửa dổi bản ghi

+ Delete: Xóa bản ghi

+ Truncate: Xóa toàn bộ dữ liệu trong bảng

Ngôn ngữ điều khiển giao dịch (Transaction Control Language - TCL)

+ Commit: Ủy thác giao dịch

+ Rollback: Lùi ngược lại giao dịch

+ Save Transaction: Đánh dâu một điểm trong giao dịch

Ngôn ngữ lập trình: Gồm các lệnh:

+ Declare: Khái báo biến

+ Execute: Thực thi câu lệnh

+ Open: Mở một con trỏ để truy vấn kết quả truy vấn

+ Close: Đóng một con trỏ

Trang 21

+ Fetch: Đọc một dòng trong kết quả truy vấn.

2.1.6.2 MySQL và một số vấn đề liên quan.

MySQL là một Hệ thống quản lý cơ sở dữ liệu quan hệ (RDBMS) nhanh và dễ

dàng để sử dụng MySQL đang được sử dụng cho nhiều công việc kinh doanh từ lớntới nhỏ MySQL được phát triển, được công bố, được hỗ trợ bởi MySQL AB, là mộtcông ty của Thụy Điển MySQL trở thành khá phổ biến vì nhiều lý do:

- MySQL là mã nguồn mở Vì thế, để sử dụng nó, bạn chẳng phải mất một xunào

- MySQL là một chương trình rất mạnh mẽ

- MySQL sử dụng một Form chuẩn của ngôn ngữ dữ liệu nổi tiếng là SQL

- MySQL làm việc trên nhiều Hệ điều hành và với nhiều ngôn ngữ như PHP,PERL, C, C++, Java, …

- MySQL làm việc nhanh và khỏe ngay cả với các tập dữ liệu lớn

- MySQL rất thân thiện với PHP, một ngôn ngữ rất đáng giá để tìm hiểu để pháttriển Web

- MySQL hỗ trợ các cơ sở dữ liệu lớn, lên tới 50 triệu hàng hoặc nhiều hơn nữatrong một bảng Kích cỡ file mặc định được giới hạn cho một bảng là 4 GB, nhưngbạn có thể tăng kích cỡ này (nếu hệ điều hành của bạn có thể xử lý nó) để đạt tới giớihạn lý thuyết là 8 TB

- MySQL là có thể điều chỉnh Giấy phép GPL mã nguồn mở cho phép lập trìnhviên sửa đổi phần mềm MySQL để phù hợp với môi trường cụ thể của họ

Ví dụ:

1 Quản lí tài khoản

Hiển thị toàn bộ users:

1 mysql> SELECT * FROM mysql user ;

2 Xóa null user :

3 mysql> DELETE FROM mysql user WHERE user = ' ';

4 Xóa tất cả user mà không phải root:

5 mysql> DELETE FROM mysql user WHERE NOT (host="localhost" AND user ="root");

6 Đổi tên tài khoản root (giúp bảo mật):

7 mysql> UPDATE mysql user SET user ="mydbadmin" WHERE user ="root";

8 Thay đổi mật khẩu user :

9 mysql> UPDATE mysql user SET password=PASSWORD("newpass") WHERE User ='usernam e';

10 Xóa user :

11 mysql> DELETE FROM mysql user WHERE user ="username";

Trang 22

2 Các thao tác database

Hiển thị toàn bộ databases:

1 mysql> SHOW DATABASES;

1 mysql> DROP DATABASE mydatabase;

3 Các thao tác với table :

Hiển thị toàn bộ table:

1 mysql> SHOW TABLES;

Hiển thị dữ liệu của table:

1 mysql> SELECT * FROM tablename;

Đổi tên table :

1 mysql> RENAME TABLE first TO second;

2 hoặc

3 mysql> ALTER TABLE mytable rename as mynewtable;

Xóa table:

1 mysql> DROP TABLE mytable;

4 Các thao tác với hàng & cột :

Hiển thị các column trong table:

1 mysql> DESC mytable;

2 hoặc

3 mysql> SHOW COLUMNS FROM mytable;

4 Đổi tên column:

5 mysql> UPDATE mytable SET mycolumn="newinfo" WHERE mycolumn="oldinfo";

6. Select dữ liệu:

7 mysql> SELECT * FROM mytable WHERE mycolumn='mydata' ORDER BY mycolumn2;

Trang 23

8. Insert dữ liệu vào table:

9 mysql> INSERT INTO mytable VALUES('column1data','column2data','column3data', column4data','column5data','column6data','column7data','column8data','column9 data');

10 Xóa dữ liệu trong table:

11 mysql> DELETE FROM mytable WHERE mycolumn="mydata";

2.2 Công cụ sử dụng

2.2.1 Tìm hiểu phầm mềm hỗ trợ phân tích thiết kế Rational Rose.

Rational Rose là phần mềm công cụ mạnh hỗ trợ phân tích, thiết kế hệ thống

phần mềm theo đối tượng Nó giúp ta mô hình hóa hệ thống trước khi viết mã chươngtrình

Có ba phiên bản khác nhau của Rose :

- Rose Modeler: Cho phép bạn tạo mô hình cho hệ thống, nhưng không hỗ trợ

tiến trình phát sinh mã hoặc thiết kế kỹ thuật đảo ngược

- Rose Professional: Cho phép bạn phát sinh mã trong một ngôn ngữ

- Rose Enterprise: Cho phép bạn phát sinh mã cho C++, Java, Ada, Corba,

Visual Basic, Oracle … Một mô hình có thể có các thành phần được phát sinh bằngcác ngôn ngữ khác nhau

Một số ưu điểm của Rose

- Cung cấp UML, COM, OMT, Booch 93

- Kiểm tra ngữ nghĩa

- Hỗ trợ phát sinh mã cho một số ngôn ngữ

- Mô hình hướng đối tượng

Một số nhược điểm của Rose

- Phải căn chỉnh nhiều để mô hình được đẹp

- Trong bản miễn phí không hỗ trợ sinh mã

- Dung lượng lớn

2.2.2 Phần mềm hỗ trợ code Sublime Text

Sublime Text là một text editor được viết bằng ngôn ngữ lập trình Python và

có thể được sử dụng trên nhiều nền tảng hệ điều hành khác nhau như Windows, Mac,Linux Sublime Text hỗ trợ nhiều ngôn ngữ lập trình và là một phần mềm có thể được

Trang 24

Sublime Text khác với các IDE khác ở đặc điểm nhẹ, linh hoạt trong tùy biến

và cung cấp nhiều tính năng rất tiện lợi khi lập trình

Bạn có thể tùy biến Sublime Text thông qua việc thêm các plugin hoặc tạo cácautomation task bằng việc tùy biến các đoạn snippet

Sublime Text hỗ trợ nhiều tính năng hữu ích khi lập trình như: multiple

selection, goto anything, command pallete

2.2.3 Chương trình tạo máy chủ Web XAMPP

Xampp là chương trình tạo máy chủ Web (Web Server) được tích hợp sẵn

Apache, PHP, MySQL, FTP Server, Mail Server và các công cụ như phpMyAdmin.Không như Appserv, Xampp có chương trình quản lý khá tiện lợi, cho phép chủ độngbật tắt hoặc khởi động lại các dịch vụ máy chủ bất kỳ lúc nào

Mọi người thường sử dụng để thực hành và phát triển Web phục vụ cho việchọc tập và giải trí

XAMPP là viết tắt của X + Apache + Mysql + PHP + Perl.

Chữ X là cross (platform) ám chỉ dùng được cho cả 4 hệ điều hành khác nhau : Windows, Linux, Solaris và MAC

Xampp có chương trình quản lý khá tiện lợi, cho phép chủ động bật tắt hoặc

khởi động lại các dịch vụ máy chủ bất kỳ lúc nào

Xampp chính là một phần mềm cho phép bạn giả lập môi trường server hosting cho phép bạn chạy thử demo một website ngay trên chiếc máy vi tính của bạn không cần thiết phải mua hosting hay vps.

2.3.Quy trình xây dựng

- Xây dựng giao diện

- Xây dựng chức năng đăng nhập, đăng xuất

- Chức năng xem thông tin tài khoản

- Chức năng giới thiệu mẫu sản phẩm

- Các chức năng thêm, sửa, xóa, cập nhật mẫu sản phẩm

- Chức năng chỉnh sửa thông tin người dùng

- Chức năng phân quyền người sử dụng

Trang 25

CHƯƠNG 3: NỘI DUNG THỰC HIỆN 3.1.Khảo sát hệ thống

3.1.1.Giới thiệu về đơn vị

Tên đơn vị : shop Bảo Minh

Địa chỉ : Số 276, Tôn Đức Thắng, Phường Hàng Bột, Quận Đống đa, Hà Nội

- Cho phép nhập hàng vào cơ sở dữ liệu

- Hiển thị danh sách các mặt hàng theo từng loại ( hình ảnh, giá cả, số lượng,…)

- Hiển thị hàng hóa mà khách hàng đã mua

- Hiển thị đơn đặt hàng của khách hàng

- Cung cấp khả năng tìm kiếm , khách hàng có thể truy cập từ xa để tìm kiếm

Trang 26

- User : Là những người có nhu cầu mua sắm hàng hóa Họ sẽ tìm kiếm những sản

phẩm cần thiết từ hệ thống và đặt mua các sản phẩm này Vì thế trang web phải thỏa mãn các chức năng sau :

1) Hiển thị danh sách các sản phẩm của cửa hàng để khách hàng có thể xem

và lựa chọn

2) Cung cấp các chức năng tìm kiếm sản phẩm với nhu cầu của khách hàngkhi bước vào trang web là tìm kiếm các sản phẩm mà họ cần và muốn mua Đôi lúccũng có nhiều khách hàng vào website này mà không có ý định mua hay không biếtmua gì thì yêu cầu đặt ra cho hệ thống là làm thế nào để khách hàng có thể tìm kiếmnhanh và hiệu quả các sản phẩm mà họ cần tìm

3) Sau khi khách hàng lựa chọn xong những sản phẩm cần mua thì hệ thốngphải có chức năng hiển thị đơn đặt hàng để khách hàng nhập vào những thông tin cầnthiết , tránh những đòi hỏi hay những thông tin yêu cầu quá nhiều từ phía khách hàng ,tạo cảm giác thoải mái , riêng tư cho khách hàng Ngoài ra còn có một số chức năngnhư : đăng kí , đăng nhập Khách hàng có thể thay dổi mật khẩu của mình Khi bạnquan tâm đến thông tin về website như : tin tức hay giá cả Bạn có thể nhập địa chỉemail của bạn vào đó Lúc đó bạn có thể nhận được thông tin cập nhật từ website

 Admin : là người làm chủ ứng dụng , có quyền kiểm soát mọi hoạt động của

hệ thống Người này được cung cấp một username và password để đăng nhậpvào hệ thống thực hiện các chức năng của mình Nếu như quá trình đăng nhậpthành công thì nhà quản lý có những chức năng :

 Chức năng quản lý cập nhật ( thêm, sửa, xóa ) các sản phẩm trên trang web , việc này không phải dễ nó đòi hỏi chính xác

 Tiếp nhận và kiểm tra đơn đặt hàng của khách hàng Hiển thị đơn đặt hàng hay xóa bỏ đơn đặt hàng

 Thống kê các sản phẩm đã bán , còn lại , thống kê doanh thu

 Ngoài các chức năng trên thì trang web phải trình bày sao cho dễ hiểu , giao diện mang tính dễ dung và đẹp mắt , làm cho khách hàng thấy được những thông tin cần tìm , cung cấp những toong tin quảng cáo thật hấp dẫn nhưng trung thực , nhằm thu hút sự quan tâm về cửa hàng của mình và có cơ hội có nhiều khách hàng tham quan mua sắm sản phẩm của cửa hàng

Trang 27

 Điều quan trọng trong trang web mua bán trên mạng là phải đảm bảo tuyệt đốinhững thông tin lien quan đến khách hàng trong quá trình đặt mua hay thanh toán Đồng thời trang web còn phải có tính dễ nâng cấp , bảo trì , sửa chữa khi cần bổ sung , cập nhật tính năng mới.

3.1.5.Xác định yêu cầu phi chức năng của hệ thống

Về hệ thống server tại cửa hàng:

 CPU: Intel Xeon CPU E5-2630 v4 @ 2.20GHz

 Hệ thống: Windows 64-bit

 Tốc độ đường truyền hiện tại: 2.30/ 3.99 Mbps

Với cấu hình và tốc độ đường truyền trên hệ thống có thể tối ưu cho khoảng

120 người truy cập cùng một lúc với tốc độ bình thường

3.2 Phân tích hệ thống

3.2.1 Biểu đồ chức năng (Use-case diagram)

Phân tích làm rõ quy trình nghiệp vụ của ứng dụng website bán oto online gồm các chức năng chính sau :

Trang 28

3.2.1.1 Xác định và phân loại các tác nhân

Bảng 3 1 Xác định các Actor và Use-case

o Gửi hỗ trợ

 Quản lý giỏ hàng

o Xem giỏ hàng

o Thanh toán giỏ hàng

o Thêm sản phẩm vào giỏhàng

Trang 29

o Thanh toán giỏ hàng

o Thêm sản phẩm vào giỏhàng

Trang 30

3.2.1.2 Xây dựng biểu đồ Use-case

Hình 3 1 Use-case tổng quát

Đặc tả Use-case :

Bảng 3 2 Đặc tả Use-case quản lý giỏ hàng

Tên use-case Quản lý giỏ hàng

Mô tả Use-case cho phép người dùng có thể xem giỏ hàng, xóa giỏ

hàng, xóa sản phẩm trong giỏ hàng, thanh toán giỏ hàng và thêm sản phẩm vào giỏ hàng

Trang 31

 Xóa sản phẩm trong giỏ hàng

 Thanh toán giỏ hàng

 Thêm sản phẩm vào giỏ hàng

Tiền điều kiện Máy có mạng để vào trang chủ

Hậu điều kiện Vào trang chủ thành công

Luồng sự kiện

chính

Người dùng vào trang chủ

1 Từ màn hình giao diện trang chủ người dùng chọn sảnphẩm muốn mua và click thêm vào giỏ hàng

2 Từ màn hình người dùng click vào “Giỏ hàng” trênmenu

3 Chọn “Xóa giỏ hàng” nếu muốn xóa toàn bộ giỏ hàng

4 Chọn sản phẩm muốn xóa và click “Xóa” nếu muốnxóa giỏ hàng

5 Chọn “Thanh toán” để tiến hành thanh toán giỏ hànggồm các sản phẩm đã có trong giỏ

phụ

Ngoại lệ 5a Giỏ hàng không có hàng :

- Hệ thống sẽ thông báo giỏ hàng không có hàng và không thể thanh toán

Trang 32

Bảng 3 3 Đặc tả Use-case Quản lý đơn hàng

Tên use-case Quản lý đơn hàng

Mô tả Use-case cho phép quản trị có thể hủy đơn hàng, xóa đơn

hàng, chuyển trạng thái đơn hàng sang đã giao hàng hay đơn giản chỉ là xem đơn hàng

Sự kiện kích hoạt Quản trị hệ thống cần phải đăng nhập vào phần quản trị của

Tiền điều kiện Quản trị đăng nhập vào hệ thống

Hậu điều kiện Hiển thị được nội dung giỏ hàng

chính

Quản trị chọn “Quản lý giỏ hàng” trên menu chính

1 Một bảng danh sách giỏ hàng hiển thị kèm theo cácbutton chức năng

2 Người dùng chọn một trong các chức năng để thựchiện

Các bước chi tiết để thực hiện các chức năng sẽ được mô tả

ở bảng đặc tả use phía dưới

Luồng sự kiện phụ

Ngoại lệ

Bảng 3 4 Đặc tả Use-case quản lý danh mục

Tên use-case Quản lý danh mục

Mô tả Use-case cho phép quản trị có thể thêm danh mục, sửa danh

mục, xóa danh mục

Trang 33

Use-case cho phép người dùng xem danh mục và chọn danh mục để có thể lọc sản phẩm.

Sự kiện kích

hoạt

Quản trị hệ thống cần phải đăng nhập vào phần quản trị của

hệ thốngNgười dùng chỉ cần vào trang chủ

Actor Quản trị hệ thống, người dùng

Hậu điều kiện Hiển thị được nội dung danh mục

chính

Với quản trị hệ thống :

Quản trị chọn “Quản lý danh mục” trên menu chính

1 Một bảng danh sách danh mục hiển thị kèm theo cácbutton chức năng

2 Người dùng chọn một trong các chức năng để thựchiện

Với người dùng :

Người dùng chỉ cần vào trang chủ và chọn “Sản phẩm ” trênmenu chính, sau đó tiến hành chọn danh mục muốn xem bằngthanh select

phụ

Ngoại lệ

Trang 34

Bảng 3 5 Đặc tả Use-case quản lý sản phẩm

Tên use-case Quản lý Sản phẩm

Mô tả Use-case cho phép quản trị có thể thêm sản phầm, sửa sản

phẩm, xóa sản phẩmUse-case cho phép người dùng xem sản phẩm và tìm kiếm sản phẩm

Use-case liên quan  thêm sản phẩm

 sửa sản phẩm

 xóa sản phẩm

 xem sản phẩm

 tìm kiếm sản phẩm

chính

Quản trị chọn “Quản lý sản phẩm” trên menu chính

1 Một bảng danh sách sản phẩm hiển thị kèm theo các button chức năng

2 Người dùng chọn một trong các chức năng để thực hiện

Trang 35

3 Click button “tìm”

Luồng sự kiện phụ

Ngoại lệ

Trang 36

Bảng 3 6 Đặc tả Use-case quản lý tin tức

Tên use-case Quản lý tin tức

Mô tả Use-case cho phép quản trị có thể thêm tin tức, sửa tin tức,

xóa tin tứcUse-case cho phép người dùng xem tin tức

Use-case liên quan  thêm tin tức

 sửa tin tức

 xóa tin tức

chính

Quản trị chọn “Quản lý tin tức” trên menu chính

1 Một bảng danh sách tin tức hiển thị kèm theo các button chức năng

2 Người dùng chọn một trong các chức năng để thực hiện

Trang 37

Bảng 3 7 Đặc tả Use-case quản lý hỗ trợ

Tên use-case Quản lý hỗ trợ

Mô tả Use-case cho phép quản trị có thể xóa tin hỗ trợ từ người

dùng, xem tin hỗ trợ người dùng gửi lênUse-case cho phép người dùng gửi tin hỗ trợ

Sự kiện kích

hoạt

Quản trị hệ thống cần phải đăng nhập vào phần quản trị của

chính

Quản trị chọn “Quản lý hỗ trợ” trên menu chính

1 Một bảng danh sách tin hỗ trợ hiển thị kèm theo các button chức năng

2 Quản trị chọn một trong các chức năng để thực hiệnCác bước chi tiết để thực hiện các chức năng sẽ được mô tả

Với người dùng :

1 Người dùng chọn “hỗ trỡ” trên menu chính

2 Điền thông tin yêu cầu

Trang 38

Bảng 3 8 Đặc tả Use-case đăng nhập

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

Mô tả Use-case cho quản trị đăng nhập vào hệ thống để thực hiện

Tiền điều kiện Quản trị phải có tài khoản đăng nhập

Hậu điều kiện Quản trị phải đăng nhập thành công

chính

1 Màn hình đăng nhập hiển thị

2 Quản trị nhập tên đăng nhập và mật khẩu

3 Hệ thống kiểm tra thông tin đăng nhập và hiển thịthông báo kết quả

4 Nếu thành công hệ thống hiển thị trang tổng quan

5 Kết thúc Use-case

phụ

Thông tin đăng nhập không đúng: Khi quản trị nhập sai

tên đăng nhập hoặc mật khẩu:

1 Hiển thị lại giao diện trang đăng nhập và một thôngbáo yêu cầu nhập lại thông tin

2 Quay lại bước 2 trong luồng sự kiện chính

Ngoại lệ Sai thông tin đăng nhập (tài khoản hoặc mật khẩu) → Trở về

trang đăng nhập

Bảng 3 9 Đặc tả Use-case đăng xuất

Trang 39

Tên use-case Đăng xuất

Mô tả Use-case cho phép quản trị đăng xuất khỏi hệ thống để kết

thúc phiên làm việc của mình

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

Hậu điều kiện Người dùng không thể sử dụng bất kỳ chức năng nào trên hệ

thống

chính

1 Quản trị nhấn nút đăng xuất trên màn hình

2 Hệ thống xóa cookie trên trình duyệt người dùng nếucó

3 Thông báo đăng xuất thành công và kết thúc phiên làmviệc

4 Hiển thị giao diện đăng nhập

phụ

Bảng 3 10 Đặc tả Use-case đăng ký

Tên use-case Đăng ký

Mô tả Use-case cho phép người dùng đăng ký tài khoản của mình

Trang 40

Hậu điều kiện

chính

1 Hiển thị form đăng ký

2 Người dùng điền đầu đủ thông tin yêu cầu

3 Hệ thống kiểm tra các thông tin nhập vào có đúng haykhông ?

4 Nếu đúng, thông báo cho người dùng “Đăng ký tàikhoản thành công” Chuyển về trang chủ

phụ

Thông tin đăng ký không đúng: Khi người dùng nhập sai

thông tin yêu cầu:

1 Hiển thị lại giao diện trang đăng ký và một thông báoyêu cầu nhập lại thông tin

2 Quay lại bước 2 trong luồng sự kiện chính

Ngoại lệ Sai thông tin đăng → Trở về trang đăng nhập

Định dạng
Số trang	105
Dung lượng	5,73 MB