Trung phu NA Báo cáo đồ án website bán lap top bằng reactjs

Báo Cáo XÂY DỰNG WEBSITE BÁN LAPTOP CHO CỬA HÀNG NMD LỜI CẢM ƠN Em xin gửi lời cảm ơn chân thành và sự tri ân sâu sắc đối với các thầy cô của trường Đại học và đặc biệt là các thầy cô khoa Công nghệ t.

Báo Cáo XÂY DỰNG WEBSITE BÁN LAPTOP CHO

CỬA HÀNG NMD

LỜI CẢM ƠN

Em xin gửi lời cảm ơn chân thành và sự tri ân sâu sắc đối với các thầy cô của trường Đại học ………… và đặc biệt là các thầy cô khoa Công nghệ thông tin của trường đã tạo điều kiện cho em hoàn thành đồ án tốt nghiệp

này

Em cũng xin chân thành cảm ơn cô ………… đã nhiệt tình hướng dẫn chỉ

bảo em những kiến thưc bài học, cũng như những kiến thức thực tế trong suốtquá trình thực hiện đề tài

Mặc dù đã cố gắng hoàn thành đồ án trong phạm vi và khả năng chophép nhưng chắc chắn sẽ không tránh khỏi những thiết sót Em rất mong nhậnđược sự thông cảm, góp ý và tận tình chỉ bảo của quý thầy cô và các bạn

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

MỤC LỤC

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

1.1 Cơ sở lý thuyết 1

1.1.1 Ngôn ngữ thiết kế website 1

1.1.2 Ngôn ngữ lập trình 2

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

1.2 Công cụ - công nghệ sử dụng 5

1.2.1 Thư viện ReactJS 5

1.2.2 TypeScript 8

1.2.3 Tailwind 8

1.2.4 Mô hình MVC 9

1.2.5 Framework laravel 10

1.2.6 Phần mềm phpMyAdmin 12

1.2.7 XAMPP 13

CHƯƠNG 2: KHẢO SÁT HỆ THỐNG 14

2.1 Khảo sát hệ thống 14

2.2 Yêu cầu với hệ thống 15

CHƯƠNG 3: PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG 16

3.1 Use Case hệ thống 16

3.1.1 Use Case tổng quát 16

3.1.2 Use Case hệ thống 17

3.1.3 Use Case của tác nhân KHACHHANG 19

3.1.4 Use Case quản lý danh mục 22

3.1.5 Use Case quản lý sản phẩm 24

3.1.6 Use Case quản lý thành viên 26

3.1.7 Use Case quản lý admin 28

3.1.8 Use Case quản lý đơn hàng 30

3.2 Biểu đồ hoạt động 32

3.3 Biểu đồ tuần tự 38

3.4 Biểu đồ lớp 42

3.5 Thiết kế cơ sở dữ liệu 43

CHƯƠNG 4: GIAO DIỆN WEBSITE 48

4.1 Giao diện người dùng 48

4.1.1 Giao diện đăng nhập 48

4.1.3 Giao diện đăng ký 48

4.1.2 Giao diện trang chủ 49

4.1.3 Giao diện chi tiết sản phẩm 50

4.1.4 Giao diện mua hàng 50

4.1.5 Giao diện tra cứu hóa đơn 51

4.2 Giao diện quản trị 51

4.2.1 Giao diện quản lý danh mục 51

4.2.2 Giao diện quản lý sản phẩm 52

4.2.3 Giao diện thêm sản phẩm 52

4.2.4 Giao diện cập nhật sản phẩm 53

4.2.5 Giao diện quản lý đơn hàng 53

4.2.6 Giao diện xem chi tiết hóa đơn 54

KẾT LUẬN 55

TÀI LIỆU THAM KHẢO 56

DANH MỤC HÌNH

DANH MỤC BẢNG

CHƯƠNG 1: CƠ SỞ LÝ THUYẾT 1.1 Cơ sở lý thuyết

1.1.1 Ngôn ngữ thiết kế website

HTML:

HTML(Hypertext Markup Language – Ngôn ngữ đánh dấu siêu văn bản)

là một sự định dạng để hiển thị một trang Web Các trang Web thực ra không

có gì khác ngoài văn bản cùng với các tag HTML được sắp xếp đúng cáchhoặc các đoạn mã để trình duyệt Web biết cách thông dịch và hiển thị chúnglên màn hình Hiện nay, phiên bản mới HTML5 có một số tính năng ưu việthơn so với phiên bản cũ:

 Định nghĩa nhiều ảnh cho thiết kế responsive:

Với HTML 5 có thể dùng thẻ <picture> cùng với thuộc tính srcset để tạonên ảnh responsive Thẻ <picture> đại diện cho một khung ảnh, cho phép nhàphát triển khai báo nguồn ảnh khác nhau để thích ứng với kích thước khunghình, mật độ điểm ảnh màn hình, loại màn hình trong thiết kế responsive

 Hiển thị hoặc ẩn thông tin thêm:

Với thẻ <details> và <summary> có thể thêm thông tin cho một đoạn nộidung, các thông tin thêm mặc định không hiển thị Trong code, phải đặt thẻ

<summary> trong thẻ <details>, trong thẻ <summary> có thể đặt thông tinthêm muốn ẩn

 Thêm chức năng cho menu ngữ cảnh:

Với thẻ <menuitem> và <type=”context”>, có thể thêm chức năng tùychỉnh vào menu ngữ cảnh của trình duyệt Cần gán thẻ <menuitem> là thànhphần của thẻ <menu> Thẻ <menuitem> có 3 loại thuộc tính khác nhau là

 Lồng ghép header và footer:

HTML 5 cho phép lồng ghép header và footer trong nội dung của mộtsection Tính năng này có thể hữu ích nếu chúng ta muốn thêm sectioningelement, chẳng hạn như <article>

 Sử dụng mật mã nonce cho style và script:

Với HTML 5 có thể thêm mã cho style và script, có thể sử dụng thuộctính nonce cùng với thẻ <script> và thẻ <style> Mã nonce sẽ khởi tạo nhữngcon số ngẫu nhiên và duy nhất, có thể phục hồi sau mỗi lần request page, mãnonce có thể sử dụng trong bảo mật website

CSS:

CSS – được dùng để miêu tả cách trình bày các tài liệu viết bằng ngôn

ngữ HTML và XHTML CSS là viết tắt của Cascading Style Sheets CSSđược hiểu một cách đơn giản đó là cách mà chúng ra thêm các kiểu hiển thị(font chữ, kích thước, màu sắc,…) cho một tài liệu Web CSS có tác dụngchính là:

 Hạn chế tối thiểu việc làm rối HTML của trang Web bằng các thẻ quyđịnh kiểu dáng(chữ đậm, in nghiêng, ), giúp mã nguồn của trang Web trởnên gọn gàng hơn

 Tách biệt nội dung trang Web và định dạng hiển thị, dễ dàng cho việcthay đổi

 Tạo ra các kiểu dáng áp dụng được cho nhiều trang Web, tránh lặp lạiviệc định dạng cho các trang Web giống nhau

1.1.2 Ngôn ngữ lập trình

Javascript:

Javascript là một ngôn ngữ lập trình của HTML và ứng dụng Web Nóđược sử dụng phổ biến nhất, như một phần của các trang web Chúng cho

phép client-server 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.

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

 Tiêt kiệm băng thông máy chủ:

Javascript sử dụng trong thiết kế website có thể giúp tiết kiệm băngthông máy máy chủ vô cùng tốt bởi chúng được chạy trực tiếp trên máy củangười dùng Gia tăng hiệu suất, kéo dài tuổi thọ máy chủ và tiết kiệm diệntích băng thông

 Linh hoạt vận hành, tương thích tốt:

Để thực thi, trình duyệt web chỉ cần tải file JavaScript về máy chủ từ mộttên miền riêng biệt hoặc nhúng thẳng vào file HTML và chạy mà không cầntải thêm Javascript có thể chạy được trên hầu hết các trình duyệt phổ biếnhiện nay

Hầu hết các trình duyệt web đều có tích hợp sẵn trình thông dịch ngônngữ JavaScript, đảm bảo người dùng có thể sử dụng ngay mà không mất côngtải về trình duyệt, giảm tỷ lệ thực thi các chức năng của JavaScript

 Dễ dàng xử lý vấn đề:

Với lợi thế có nhiều trình duyệt hỗ trợ nên việc kiểm tra và xử lý vấn đề

dễ dàng hơn Đa số các trình duyệt web hiện nay đều có cài sẵn các công cụ

xử lý lỗi Javascript trong bảng điều khiển trình duyệt Javascript sở hữu cấutrúc dễ đọc với các nguyên tắc rõ ràng nên việc xác định và gỡ lỗi trở nên đơngiản hơn

 Nâng cao trải nghiệm người dùng:

Website sử dụng ngôn ngữ lập trình giúp thu hút người dùng bởi những

nhanh nhạy Nhờ những tính năng đó, người dùng cảm thấy thoải mái, thíchthú và tin dùng trang web hơn.

PHP:

PHP là ngôn ngữ script được tạo cho các giao tiếp phía server Do đó, nó

có thể xử lý các giao tiếp phiá server như thu thập dữ liệu, biểu mẫu, quản lýfile trên server, sửa đổi cơ sở dữ liệu và nhiều hơn

Ngôn ngữ này ban đầu được tạo ra bởi Lerdorf để theo dõi khách truycập vào trang chủ cá nhân của anh Khi trở nên phổ biến, Lerdorf phát hành

nó thành dự án nguồn mở Quyết định này khuyến khích các nhà phát triển sửdụng, sửa chữa và cải thiện, biến nó thành ngôn ngữ script sử dụng ngày nay

Dù PHP được coi là ngôn ngữ script vì mục đích chung, nhưng nó được

sử dụng rộng rãi nhất để phát triển web Khả năng nhúng vào file HTML làmột trong những tính năng nổi bật của nó

Nếu không muốn người khác xem mã nguồn, có thể ẩn bằng ngôn ngữscript này Đơn giản, chỉ cần viết code vào file PHP và nhúng vào HTML thìmọi người sẽ không biết được nội dung gốc

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

Cơ sở dữ liệu (Database) là một tập hợp các dữ liệu có tổ chức, thường

được lưu trữ và truy cập điện tử từ hệ thống máy tính Khi cơ sở dữ liệu phứctạp hơn, chúng thường được phát triển bằng cách sử dụng các kỹ thuật thiết kế

và mô hình hóa chính thức

Hệ quản trị cơ sở dữ liệu (Database Management System) là một phần

mềm để lưu trữ và truy xuất dữ liệu của người dùng trong khi xem xét cácbiện pháp bảo mật thích hợp Nó bao gồm một nhóm các chương trình thaotác cơ sở dữ liệu Hệ quản trị cơ sở dữ liệu chấp nhận yêu cầu dữ liệu từ mộtứng dụng và hướng dẫn hệ điều hành cung cấp dữ liệu cụ thể Trong các hệ

thống lớn, nó giúp người dùng và phần mềm bên thứ ba lưu trữ và truy xuất

Quy trình hoạt động khá đơn giản mỗi Client(máy khách) yêu cầu dữliệu từ Server(máy chủ), từ Server sẽ phản hồi lại các dữ liệu đó Ví dụ khingười dùng truy cập vào một trang web nào đó các Request sẽ gửi tới Server,lúc này Server sẽ nhận được Request và bắt đầu gửi dữ liệu quay lại máyngười dùng để hiển thị thông tin trang web đó lên

Hình 1.1 Mô hình hoạt động của MySQL

Một số lý do chính khiến MySQL trở nên quan trọng:

 Linh hoạt và dễ dùng: Có thể sửa source code để đáp ứng nhu cầu sửdụng mà không phải thanh toán thêm chí phí nào, quá trình cài đặt cũng đơngiản

 Hiệu năng cao: Bất kể lưu trữ dữ liệu lớn của các trang thương mạiđiện tử hoặc những hoạt động kinh doanh lớn liên quan đến công nghệ thông

 An toàn: An toàn dữ liệu luôn là vấn đề quan trọng nhất khi chọnphần mềm RDBMS Với hệ thống phân quyền truy cập và quản lý tài khoản,MySQL đặt tiêu chuẩn bảo mật rất cao.

1.2 Công cụ - công nghệ sử dụng

1.2.1 Thư viện ReactJS

ReactJS là một opensource được phát triển bởi Facebook, vào năm 2013.

Đây là một thư viện Javascript được dùng để xây dựng các tương tác với cácthành phần website Một trong những điểm nổi bật của thư viện này là việcrender dữ liệu không chỉ thực hiện phía Server, mà còn thực hiện được phíaClient

ReactJS là một thư hiện Javascript chuyên giúp các nhà phát triển xâydựng giao diện người dùng hay UI Trong lập tình ứng dụng front-end, lậptrình viên thường phải làm việc chính trên 2 thành phần: UI và xử lý tương tácngười dùng UI là tập hợp những thành phần nhìn thấy được trên bất kỳ mộtứng dụng nào, ví dụ thanh tìm kiếm, nút nhấn… Trước khi có ReactJS, lậptrình viên thường gặp khó khăn rất nhiều khi sử dụng Javascript thuần vàJquery để xây dựng UI

Để tăng tốc quá trình phát triển và giảm thiểu rủi ro xảy ra trong khicoding, React còn cung cấp khả năng Reusable Code(tái sử dụng code) bằngcách đưa ra 2 khái niệm quan trọng: JSX và Virtual DOM

JSX(nói ngắn gọn là Javascript extension) là một React extension giúpchúng ta dễ dàng thay đổi cây DOM bằng các HTML-style code đơn giản VàReactJS browser hỗ trợ toàn bộ những trình duyệt web hiện đại, có thể sửdụng JSX trên bất kỳ trình duyệt nào đang làm việc

Hình 1.2 JSX Code style

Nếu không sử dụng ReactJS (và JSX), website sẽ sử dụng HTML để cậpnhật lại cây DOM(quá trình thay đổi diễn ra tự nhiên trên trang mà ngườidùng không cần tải lại trang) Cách này sẽ ổn với các trang web nhỏ, đơngiản, static, nhưng với các website lớn, đặc biệt thiên về xử lý tương tác, điềunày sẽ làm ảnh hưởng performance website nghiêm trọng vì toàn bộ câyDOM phải reload lại mỗi lần người dùng nhấn tính năng yêu cầu tải lại trang.Tuy nhiên, nếu sử dụng JSX sẽ giúp cây DOM cập nhật cho chính DOM

đó, ReactJS đã khởi tạo Virtual DOM(DOM ảo) Virtual DOM là bản copycủa Real DOM(DOM thật) trên trang đó, và ReactJS sử dụng bản copy để tìmkiếm đúng phần mà DOM thật cần cập nhật khi bất kỳ sự kiện nào khiếnthành phần trong nó thay đổi(như việc người dùng nhấn vào một nút)

Hình 1.3 So sánh Virtual DOM và Real DOM 1.2.2 TypeScript

TypeScript là một dự án mã nguồn mở được phát triển bởi Microsoft, có

thể được coi là phiên bản nâng cao của JavaScript bởi việc bổ sung tùy chọnkiểu tĩnh và lớp hướng đối tượng mà JavaScript không có

Lý do nên sử dụng TypeScript:

 Nhiều Framework lựa chọn: Hiện nay các Javascript Framework đãdần khuyến khích nên sử dụng TypeScript để phát triển, nhưAngularJS 2.0 và Ionic 2.0

 Là mã nguồn mở: TypeScript là một mã nguồn mở nên hoàn toàn cóthể sử dụng mà không mất phí, bên cạnh đó còn có cộng đồng hỗ trợ

 Hỗ trợ các tính năng của Javascript phiên bản mới nhất: TypeScriptluôn đảm bảo việc sử dụng đầy đủ các kỹ thuật mới nhất củaJavascript, như version hiện tại là ECMAScript 2015 (ES6)

1.2.3 Tailwind

Tailwind là một tập hợp các lớp tiện ích (class) cấp thấp Tailwind CSS

là một utility-first CSS framework, giống như Bootstrap, nó có những class built-in có thể dùng Tailwind CSS có nhiều các class bao gồm các thuộc tính

CSS khác nhau và quan trọng, có thể dễ dàng mở rộng tạo mới những class bằng chính những class của nó.

Tailwind có nhiều class mới hơn, tiện lợi hơn Bootstrap Và hơn nữa, việc có nhiều những class với quy tắc đặt tên cực kỳ thân thiện với người dùng, người dùng cũng có thể nhìn vào class đó và có thể biết được class này style gì

1.2.4 Mô hình MVC

Mô hình MVC là một mô hình lập trình web được sử dụng rộng rãi hiện

nay, được viết tắt bởi ba từ Model – View – Controller, tương ứng với ba bộphận tạo nên cấu trúc của ứng dụng Mỗi thành phần kiến trúc được xây dựng

để xử lý khía cạnh phát triển cụ thể của một ứng dụng

Hình 1.4 Mô hình MVC trong PHP

Chức năng cụ thể của từng bộ phận trong mô hình MVC:

View là một phần của ứng dụng chịu trách nhiệm cho việc trình bày dữliệu Thành phần này được tạo bởi dữ liệu thu thập từ dữ liệu mô hình, vàgiúp người dùng có cái nhìn trực quan về trang web, cũng như ứng dụng.

 Model:

Model của kiến trúc MVC là thành phần chính đảm nhiệm chức năng lưutrữ dữ liệu và các bộ phận logic liên quan của toàn bộ ứng dụng Model chịutrách nhiệm cho các thao tác dữ liệu giữa Controller hoặc bất kỳ logic nghiệp

vụ liên quan nào khác như cho phép xem, truy xuất dữ liệu

 Controller:

Controller xử lý tương tác người dùng của ứng dụng Nó xử lý dữ liệuđầu vào từ bàn phím và chuột của người dùng, sau đó thông báo tới View vàModel Controller gửi các lệnh tới Model để thay đổi trạng thái của Model.Controller cũng gửi các lệnh tương tự tới View để thực hiện các thay đổi vềgiao diện

1.2.5 Framework laravel

Framework chính là một thư viện với các tài nguyên có sẵn cho từng

lĩnh vực để lập trình viên sử dụng thay vì phải tự thiết kế Với Framework, lậptrình viên chỉ cần tìm hiểu và khai thác những tài nguyên đó, gắn kết chúnglại với nhau và hoàn chỉnh sản phẩm của mình

Laravel là một PHP framework mã nguồn mở miễn phí, phát triển bởi

Taylor Otwell và có mục tiêu hỗ trợ phát triển các ứng dụng web theo môhình MVC Những tính năng nổi bật của Laravel làm cho Laravel Frameworkkhác biệt so với các Web Framework khác:

 Tính mô đun:

Tính mô đun là khả năng một thành phần ứng dụng web có thể tách rời

và kêt hợp lại Có thể phân chia logic nghiệp vụ thành các mo-đun khác nhau,tất cả đều hoạt động cùng nhau để làm cho ứng dụng web hoạt động

Sử dụng cấu trúc mô-đun có thể thiết kế và phát triển ứng dụng doanhnghiệp quy mô lớn một cách dễ dàng Laravel cung cấp các hướng dẫn rất đơngiản để tạo các mô-đun hoặc package trong Laravel.

 Tính năng xác thực:

Xác thực là một phần không thể thiếu của bất kỳ website hiện đại nào.Viết các thực trong các Framework khác có thể mất rất nhiều thời gian.Nhưng với Laravel thì ngược lại, chỉ cần chạy một lệnh đơn giản, đã có thểtạo một hệ thống xác thực đầy đủ chức năng

 Tính năng Caching:

Caching(bộ nhớ đệm) là một kỹ thuật để lưu trữ dữ liệu trong một vị trílưu trữ tạm thời có thể lấy ra nhanh chóng khi cần, chủ yếu được sử dụng đểlàm tăng hiệu suất của website Điều này giúp Laravel giảm thời gian xử lý vàtăng hiệu suất rất nhiều

 Database Query Builder:

Database Query Builder của Laravel cung cấp một cách thuận tiện để tạocác truy cấp cơ sở dữ liệu Nó đi kèm với vô số chức năng của trình trợ giúp

Laravel cung cấp bảo mật để chống lại các cuộc tấn công truy vấn cơ sở

dữ liệu An toàn khi xử lý với dữ liệu mà người dùng cung cấp

1.2.6 Phần mềm phpMyAdmin

PhpMyAdmin là phần mềm mã nguồn mở được viết bằng ngôn ngữ PHP

giúp quản trị cơ sở dữ liệu MySQL thông qua giao diện web Đây là công cụquản trị MySQL phổ biến nhất được sử dụng bởi hàng triệu người dùng trêntoàn thế giới, đặc biệt là các nhà quản trị cơ sở dữ liệu hay databaseadministrator

Hình 1.5 Giao diện phần mềm PhpMyAdmin

Các tính năng chung của PhpMyAdmin:

 Quản lý cơ sở dữ liệu: Tạo mới, sửa, xóa; thêm bảng, hàng, trường;tìm kiếm các đối tượng

 Quản lý người dùng(user): Thêm, sửa, xóa(phân quyền)

 Nhập xuất dữ liệu(Import/Export): Hỗ trợ các định dạng SQL, XML

và CSV

 Sao lưu và khôi phục(Backup/Restore): Thao tác thủ công

 Tạo đồ họa của bố cục cơ sở dữ liệu ở các định dạng khác nhau

 Tạo truy vấn phức tạp bằng cách sử dụng Query-by-example(QBE)

1.2.7 XAMPP

XAMPP là chương trình tạo web server được ứng dụng trên các hệ điều

hành Linux, MacOS, Windows, Cross-platform, Solaris XAMPP hoạt động dựa trên sự tích hợp của 5 phần mềm chính là Cross-Platform(X), Apache(A),MariaDB(M), PHP(P) và Perl(P):

 X: Viết tắt của hệ điều hành mà nó hoạt động với: Linux, Windows vàMac OS X

 Apache: Web Server mã nguồn mở Apache là máy chủ được sử dụng rộng rãi nhất trên toàn thế giới để phân phối nội dung Web Ứng dụng được cung cấp dưới dạng phần mềm miễn phí bởi Apache Software Foundaton

 MySQL/MariaDB: Trong MySQL, XAMPP chứa một trong những hệquản trị cơ sở dữ liệu quan hệ phổ biến nhất trên thế giới Kết hợp với Web Server Apache và ngôn ngữ lập trình PHP, MySQL cung cấp khả năng lưu trữ

dữ liệu cho các dịch vụ Web

 PHP: Ngôn ngữ lập trình phía máy chủ PHP cho phép người dùng tạo các trang Web hoặc ứng dụng động

 Perl: Ngôn ngữ kịch bản Perl được sử dụng trong hệ quản trị hệ thống,phát triển Web và lập trình mạng

CHƯƠNG 2: KHẢO SÁT HỆ THỐNG 2.1 Khảo sát hệ thống

Cửa hàng NMD chuyên cung cấp đa dạng các loại laptop với mẫu mã vàchất lượng tốt cho người tiêu dùng Hiện nay, họ đang có chiến lược mở rộngthị trường bằng hình thức kinh doanh online Cửa hàng đang phục vụ nhiềuloại laptop khác nhau để hướng tới đa dạng người tiêu dùng khác nhau, bêncạnh đó cửa hàng còn có nhiều hoạt động quan trọng như buôn bán, giaodịch Vì vậy, cửa hàng cần có một hệ thống phần mềm chuyên nghiệp đểgiảm thiểu các rủi ro, lưu trữ lượng lớn dữ liệu và dễ dàng trong việc quản lý.Người quản lý cần quản lý các thông tin về các danh mục sản phẩm củacửa hàng, các sản phẩm cụ thể của cửa hàng đang bày bán và các sản phẩmnằm trong kho Lưu các thông tin về sản phẩm như tên sản phẩm, danh mụcsản phẩm, giá, hình ảnh minh họa, thông số kỹ thuật, bảo hành để ngườidùng lựa chọn theo các tiêu chí của bản thân

Khi có thắc mắc hay phản hồi về sản phẩm đã sử dụng, khách hàng liên

hệ với cửa hàng Khi khách hàng mua hàng của cửa hàng, các thông tin cơbản của khách hàng như họ tên, số điện thoại, địa chỉ… sẽ được lưu lại để tiệncho việc liên lạc, giao hàng cũng như thực hiện tri ân; và lưu các thông tingiao dịch như các sản phẩm khách hàng mua, số lượng, giá tiền, giảm giá vàtổng tiền…

Khách hàng sau khi sử dụng sản phẩm, có thể phản hồi các ý kiến tới cửahàng, để cửa hàng nắm bắt được chất lượng các sản phẩm và nhu cầu ngườidùng của mình Từ đó, có thể thống kê số lượng sản phẩm bán chạy của cửahàng, để nhập hàng theo đúng xu hướng của người tiêu dùng tại thời điểm đó

2.2 Yêu cầu với hệ thống

Từ những khảo sát về hệ thống cửa hàng NMD, rút ra một số yêu cầucần triển khai với hệ thống mới:

 Hệ thống phân quyền chức năng với 2 nhóm người: người quản trị vàkhách hàng

 Có các chức năng đăng ký, xem sản phẩm, xem chi tiết các sản phẩm,quản lý đơn hàng và liên hệ… với khách hàng

 Đặc quyền quản lý hệ thống: quản lý thành viên, quản lý danh mục, quản

lý sản phẩm, quản lý đơn hàng,… với các người quản trị viên của hệthống

 Các sản phẩm mới và giá cả được cập nhật liên tục

 Giao diện hệ thống thân thiện, hài hòa với người dùng

 Giao diện quản lý dễ sử dụng với quản trị viên, dễ bảo trì

CHƯƠNG 3: PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG 3.1 Use Case hệ thống

3.1.1 Use Case tổng quát

Hình 3.1 Use Case tổng quát

 Điều kiện đầu vào: Khi khách hàng truy cập và chọn đăng ký.

 Dòng sự kiện chính:

 Khách hàng chọn đăng ký

 Hệ thống hiển thị trang đăng ký

 Khách hàng nhập các trường thông tin và chọn đăng ký

 Hệ thống kiểm tra các trường dữ liệu:

▫ Nếu thỏa mãn thì chuyển đến trang chủ

▫ Nếu không thỏa mãn thì thực hiện dòng sự kiện rẽ nhánhA1

 Nhập lại thông tin.

 Quay lại bước 4 của sự kiện chính

 Điều kiện đầu ra: Lưu tài khoản khách hàng đã đăng ký

 UseCase Đăng nhập:

 Tác nhân: Người quản lý và khách hàng

 Mô tả tổng quát: Người quản lý và khách hàng đăng nhập vào hệthống

 Điều kiện đầu vào: UseCase sử dụng khi người dùng muốn đăng nhậpvào hệ thống

 Dòng sự kiện chính:

 Hệ thống yêu cầu nhập tài khoản và mật khẩu

 Người dùng nhập tài khoản và mật khẩu

 Hệ thống kiểm tra tên và mật khẩu vừa nhập:

▫ Nếu đúng sẽ kiểm tra quyền, và hiển thị quyền tương ứng củatài khoản

▫ Nếu sai thực hiện luồng sự kiện phụ A1

 Dòng sự kiện phụ A1:

 Hệ thống sẽ thông báo việc nhập dữ liệu không hợp lệ

 Người dùng nhập lại tài khoản và mật khẩu

 Quay lại bước 3 của luồng sự kiện chính, hoặc hủy bỏ việc đăngnhập, khi đó ca sử dụng kết thúc

 UseCase Đăng xuất:

 Tác nhân: Người quản lý và khách hàng

 Mô tả tổng quát: Người quản lý và khách hàng muốn thoát tài khoảnkhỏi hệ thống

 Điều kiện đầu vào: UseCase sử dụng khi người quản trị và thành viênchọn đăng xuất

 Dòng sự kiện chính:

 Hệ thống hủy việc lưu thông tin đăng nhập

 Quay về màn hình trang chủ

3.1.3 Use Case của tác nhân KHACHHANG

Hình 3.3 Use Case của tác nhân KHACHHANG

 UseCase Xem chi tiết sản phẩm:

 Tác nhân: Khách hàng

 Mô tả tổng quát: Khách hàng muốn xem chi tiết một sản phẩm

 Điều kiện đầu vào: UseCase sử dụng khi khách hàng chọn một sảnphẩm

 Dòng sự kiện chính:

 Hệ thống lấy thông tin chi tiết của sản phẩm theo mã

 Hiển thị form chi tiết sản phẩm

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

 Người dùng chọn sản phẩm muốn thêm vào giỏ hàng

 Chọn cập nhật

 Hệ thống kiểm tra số lượng sản phẩm còn lại trong cửahàng:

- Nếu còn hàng sẽ thêm vào giỏ hàng

- Nếu sai, thực hiện luồng sự kiện rẽ nhánh A1

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

 Người dùng chọn sản phẩm muốn xóa

 Chọn xóa sản phẩm

 Hệ thống xóa sản phẩm khỏi giỏ hàng của khách hàng

▫ Thanh toán đơn hàng:

 Khách hàng chọn thanh toán các sản phẩm trong giỏhàng

 Hệ thống hiển thị form thanh toán

 Khách hàng nhập các thông tin cần thiết, và chọn đặthàng.

 Hệ thống kiểm tra các trường thông tin:

- Nếu thỏa mãn thực hiện cập nhật thông tin đơn hàng

và chi tiết vào cơ sở dữ liệu

- Nếu không thì yêu cầu nhập lại

 Dòng sự kiện rẽ nhánh A1:

 Hệ thống báo số lượng sản phẩm không đủ

 Quay lại bước 2 của dòng sự kiện chính

 Đầu ra: Lưu thông tin đơn hàng vào cơ sở dữ liệu

 UseCase Tra cứu hóa đơn:

 Tác nhân: Khách hàng

 Mô tả tổng quát: Khách hàng muốn xem danh sách hóa đơn

 Điều kiện đầu vào: UseCase sử dụng khi khách hàng chọn tra cứu hóađơn

 Dòng sự kiện chính:

 Khách hàng chọn tra cứu hóa đơn

 Hệ thống hiển thị giao diện tra cứu hóa đơn

 Khách hàng chọn điều kiện muốn tra cứu, chọn tra cứu

 Hệ thống lấy danh sách tra cứu theo điều kiện của khách hàng:Nếu có danh sách, thực hiện hiển thị danh sách hóa đơn Ngượclại, hiển thị không có dữ liệu

 UseCase Liên hệ:

 Tác nhân: Khách hàng

 Mô tả tổng quát: Khách hàng liên hệ với quản lý của cửa hàng

 Đầu ra: Thông tin liên hệ được lưu vào cơ sở dữ liệu.

3.1.4 Use Case quản lý danh mục

Hình 3.4 Use Case quản lý danh mục

 Tác nhân: Người quản trị

 Mô tả tổng quát: Người quản trị quản lý các danh mục, giúp quản lýcác sản phẩm dễ dàng

 Điều kiện đầu vào: Người dùng đăng nhập thành công, với quyềnquản trị

 Dòng sự kiện chính:

 Quản trị đăng nhập hệ thống

 Hệ thống kiểm tra tài khoản và quyền, nếu đúng thì truy cập hệthống, và chọn quản lý danh mục

 Hệ thống hiển thị danh sách danh mục, và các chức năng: thêm,sửa và xóa và tìm kiếm danh mục:

▫ Thêm thông tin danh mục:

 Hệ thống hiển thị form nhập thông tin danh mục

 Người quản lý nhập thông tin danh mục

 Nhập nút thêm danh mục

 Hệ thống kiểm tra các trường dữ liệu:

- Nếu thỏa mãn, thì thực hiện bước tiếp theo

- Nếu không, thì thực hiện luồng sự kiện A1

 Hệ thống thông báo thêm danh mục thành công

 Hệ thống lưu lại thông tin danh mục

▫ Sửa thông tin danh mục:

 Hệ thống hiển thị form cập nhật thông tin danh mục

 Người quản lý nhập thông tin cần thay đổi

 Nhập nút cập nhật danh mục

 Hệ thống kiểm tra các trường dữ liệu:

- Nếu thỏa mãn, thì thực hiện bước tiếp theo

- Nếu không, thì thực hiện luồng sự kiện A1

 Hệ thống thông báo cập nhật danh mục thành công

 Hệ thống cập nhật thông tin danh mục

▫ Xóa danh mục:

 Người quản lý chọn thông tin danh mục cần xóa

 Hệ thống kiểm tra:

- Nếu không có ràng buộc, thực hiện bước tiếp theo

- Ngược lại, hủy xóa

 Hệ thống báo lỗi.

 Quản trị thưc hiện nhập lại dữ liệu

 Quay lại bước 3 của sự kiện phụ

 Điều kiện đầu ra: Danh sách các danh mục được cập nhật đầy đủ vào

cơ sở dữ liệu

3.1.5 Use Case quản lý sản phẩm

Hình 3.5 Use Case quản lý sản phẩm

 Tác nhân: Người quản trị

 Mô tả tổng quát: Người quản trị quản lý các sản phẩm của cửa hàng

 Điều kiện đầu vào: Người dùng đăng nhập thành công, với quyềnquản trị

▫ Thêm thông tin sản phẩm:

 Hệ thống hiển thị form nhập thông tin sản phẩm

 Người quản lý nhập thông tin sản phẩm

 Nhập nút thêm sản phẩm

 Hệ thống kiểm tra các trường dữ liệu:

- Nếu thỏa mãn, thì thực hiện bước tiếp theo

- Nếu không, thì thực hiện luồng sự kiện A1

 Hệ thống thông báo thêm sản phẩm thành công

 Hệ thống lưu lại thông tin sản phẩm

▫ Sửa thông tin sản phẩm:

 Hệ thống hiển thị form cập nhật thông tin sản phẩm

 Người quản lý nhập thông tin cần thay đổi

 Nhập nút cập nhật sản phẩm

 Hệ thống kiểm tra các trường dữ liệu:

- Nếu thỏa mãn, thì thực hiện bước tiếp theo

- Nếu không, thì thực hiện luồng sự kiện A1

 Hệ thống thông báo cập nhật sản phẩm thành công

 Hệ thống cập nhật thông tin sản phẩm

▫ Tìm kiếm sản phẩm:

 Nhập từ khóa cần tìm

 Nhấn nút tìm kiếm

 Hệ thống kiểm tra thông tin sản phẩm:

- Nếu có hiển thị danh sách sản phẩm

- Nếu không, thực hiện sự kiện rẽ nhánh A1

▫ Xóa sản phẩm: