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ệ
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ốt
quá 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 cho
phé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 q 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

Hình 1.1. Mơ hình hoạt động của MySQL
Hình 1.2. JSX Code style
Hình 1.3. So sánh Virtual DOM và Real DOM
Hình 1.4. Mơ hình MVC trong PHP
Hình 1.5. Giao diện phần mềm PhpMyAdmin
Hình 3.1. Use Case tổng quát
Hình 3.2. Use Case hệ thống
Hình 3.3. Use Case của tác nhân KHACHHANG
Hình 3.4. Use Case quản lý danh mục
Hình 3.5. Use Case quản lý sản phẩm
Hình 3.6. Use Case quản lý thành viên
Hình 3.7. Use Case quản lý admin
Hình 3.8. Use Case quản lý đơn hàng
Hình 3.9. Biểu đồ hoạt động Đăng ký
Hình 3.10. Biểu đồ hoạt động Đăng nhập
Hình 3.11. Biểu đồ hoạt động Xem chi tiết dữ liệu

Hình 3.12. Biểu đồ hoạt động Thêm dữ liệu
Hình 3.13. Biểu đồ hoạt động Cập nhật dữ liệu
Hình 3.14. Biểu đồ hoạt động Xóa dữ liệu
Hình 3.15. Biểu đồ tuần tự Thêm dữ liệu
Hình 3.16. Biểu đồ tuần tự Cập nhật dữ liệu
Hình 3.17. Biểu đồ tuần tự Tìm kiếm dữ liệu
Hình 3.18. Biểu đồ tuần tự Xóa dữ liệu
Hình 3.19. Biểu đồ lớp


Hình 4.1. Giao diện đăng nhập
Hình 4.2. Giao diện đăng ký
Hình 4.3. Giao diện trang chủ
Hình 4.4. Giao diện chi tiết sản phẩm
Hình 4.5. Giao diện mua hàng
Hình 4.6. Giao diện tra cứu hóa đơn
Hình 4.7. Giao diện quản lý danh mục
Hình 4.8. Giao diện quản lý sản phẩm
Hình 4.9. Giao diện thêm sản phẩm
Hình 4.10. Giao diện cập nhật sản phẩm
Hình 4.11. Giao diện quản lý đơn hàng
Hình 4.12. Giao diện xem chi tiết hóa đơn


DANH MỤC BẢNG

Bảng 3.1. Bảng admin
Bảng 3.2. Bảng user
Bảng 3.3. Bảng product
Bảng 3.4. Bảng categories

Bảng 3.5. Bảng order
Bảng 3.6. Bảng transaction
Bảng 3.7. Bảng products_category
Bảng 3.8. Bảng products_images


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 ngồi văn bản cùng với các tag HTML được sắp xếp đúng cách
hoặc các đoạn mã để trình duyệt Web biết cách thơng dịch và hiển thị chúng
lê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ệt
hơ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ẻ cùng với thuộc tính srcset để tạo
nên ảnh responsive. Thẻ đạ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 khung
hì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ội
dung, 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 tin
thê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ùy
chỉnh vào menu ngữ cảnh của trình duyệt. Cần gán thẻ <menuitem> là thành
phần của thẻ <menu>. Thẻ <menuitem> có 3 loại thuộc tính khác nhau là
“checkbox”, “command”, “radio”. Nó có khả năng thêm nhiều hơn một menu.

-1-


 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ột
section. Tính năng này có thể hữu ích nếu chúng ta muốn thêm sectioning
element, 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ộc
tính nonce cùng với thẻ <script> và thẻ <style>. Mã nonce sẽ khởi tạo những
con 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ụng
chí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ệc
thay đổi.
 Tạo ra các kiểu dáng áp dụng được cho nhiều trang Web, tránh lặp lại
việc định dạng cho các trang Web giống nhau.

1.1.2. Ngơn ngữ lập trình
 Javascript:

-2-


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ăng
thơ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ủa
ngườ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ện
tí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ột
tên miền riêng biệt hoặc nhúng thẳng vào file HTML và chạy mà khơng cần
tải thêm. Javascript có thể chạy được trên hầu hết các trình duyệt phổ biến
hiệ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ơn
ngữ JavaScript, đảm bảo người dùng có thể sử dụng ngay mà khơng mất cơng
tả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ấu
trú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 đơn

giản hơn.
 Nâng cao trải nghiệm người dùng:
-3-


Website sử dụng ngơn ngữ lập trình giúp thu hút người dùng bởi những
tính năng ưu việt, hình ảnh sinh động hấp dẫn, chức năng lướt và tương tác
nhanh nhạy. Nhờ những tính năng đó, người dùng cảm thấy thoải mái, thích
thú 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 truy
cậ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ức
tạ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ác

biệ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 thao
tá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
-4-


ứ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
dữ liệu.
MySQL là một hệ thống quản trị cơ sở dữ liệu mã nguồn mở (Relational
Database Management System, viết tắt là RDBMS) hoạt động theo mơ hình
client-server. MySQL là một trong số các phần mềm của RDBMS, nhưng
thường được cho là một vì độ quá phổ biến của nó. Các ứng dụng web lớn
nhất như Facebook, Youtube, Google... đều dùng MySQL cho mục đích lưu
trữ dữ liệu.
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ụ khi
ngườ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áy
ngườ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 tốn thêm chí phí nào, q trình cài đặt cũng đơn
giản.

-5-


 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
tin, MySQL cũng có thể đáp ứng.
 An tồn: An tồn dữ liệu luôn là vấn đề quan trọng nhất khi chọn phầ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ác
thành phần website. Một trong những điểm nổi bật của thư viện này là việc
render dữ liệu khơng chỉ thực hiện phía Server, mà cịn thực hiện được phía
Client.
ReactJS là một thư hiện Javascript chuyên giúp các nhà phát triển xây
dựng giao diện người dùng hay UI. Trong lập tình ứng dụng front-end, lập
trì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ác
ngườ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ập
trì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 khi
coding, React còn cung cấp khả năng Reusable Code(tái sử dụng code) bằng
cá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úp
chúng ta dễ dàng thay đổi cây DOM bằng các HTML-style code đơn giản. Và
-6-

ReactJS browser hỗ trợ tồ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ập
nhật lại cây DOM(quá trình thay đổi diễn ra tự nhiên trên trang mà người
dùng không cần tải lại trang). Cách này sẽ ổn với các trang web nhỏ, đơn
giản, static, nhưng với các website lớn, đặc biệt thiên về xử lý tương tác, điều
này sẽ làm ảnh hưởng performance website nghiêm trọng vì tồn bộ cây
DOM 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 copy
của Real DOM(DOM thật) trên trang đó, và ReactJS sử dụng bản copy để tìm
kiếm đúng phần mà DOM thật cần cập nhật khi bất kỳ sự kiện nào khiến
thành phần trong nó thay đổi(như việc người dùng nhấn vào một nút).

-7-


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ọn
kiể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 hồn tồ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: TypeScript
luôn đảm bảo việc sử dụng đầy đủ các kỹ thuật mới nhất của
Javascript, 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

-8-


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:

-9-


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ưu
trữ dữ liệu và các bộ phận logic liên quan của toàn bộ ứng dụng. Model chịu
trá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 ngun 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ập
trì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úng
lại với nhau và hồ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 Framework
khác biệt so với các Web Framework khác:
 Tính mơ đun:

- 10 -


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 doanh
nghiệp quy mô lớn một cách dễ dàng. Laravel cung cấp các hướng dẫn rất đơn
giả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ạo
cá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
có thể để lọc dữ liệu.
Có thể thực hiện các truy vấn phức tạp một cách dễ dàng bằng join trong
Laravel. Cú pháp Query Builder rất dễ hiểu và làm cho việc viết các truy vấn
cơ sở dữ liệu trở nên nhẹ nhàng hơn rất nhiều.

 Tính năng bảo mật rất tốt:
Laravel cung cấp cách tạo các ứng dụng web an toàn. Lưu trữ tất cả các
mật khẩu dưới dạng hash, thay vì mật khẩu text đơn giản.
- 11 -


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 tồ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ên
toàn thế giới, đặc biệt là các nhà quản trị cơ sở dữ liệu hay database
administrator.

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).

- 12 -


 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.

- 13 -


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ộng
thị trường bằng hình thức kinh doanh online. Cửa hàng đang phục vụ nhiều
loại laptop khác nhau để hướng tới đa dạng người tiêu dùng khác nhau, bên
cạnh đó cửa hàng cịn có nhiều hoạt động quan trọng như bn bán, giao
dị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ủa
cử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ẩm
nằm trong kho. Lưu các thông tin về sản phẩm như tên sản phẩm, danh mục
sản phẩm, giá, hình ảnh minh họa, thông số kỹ thuật, bảo hành... để người
dù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ện
cho 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 tin
giao 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ửa
hà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ười
dù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ửa

hàng, để nhập hàng theo đúng xu hướng của người tiêu dùng tại thời điểm đó.

- 14 -


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ầu
cầ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ì.

- 15 -


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

- 16 -

3.1.2. Use Case hệ thống

Hình 3.2. Use Case hệ thống
 UseCase Đăng ký:

 Tác nhân: Khách hàng.
 Mô tả tổng quát: Khách hàng truy cập website có thể đăng ký thành
viên, xem các sản phẩm và chi tiết sản phẩm, tìm kiếm các sản phẩm
mong muốn.

 Đ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ánh
A1.
 Dòng sự kiện rẽ nhánh A1:
- 17 -


 Hệ thống thông báo việc nhập dữ liệu không hợp lệ.
 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ập
và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ủa
tà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 đăng
nhậ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.

- 18 -