Tải bản đầy đủ (.pdf) (66 trang)

Xây dựng WEBSITE thương mại điện tử với CHATBOT tư vấn (báo cáo cuối kì đồ án 1)

Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (3.41 MB, 66 trang )

BỘ GIÁO DỤC VÀ ĐÀO TẠO

TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN
KHOA CÔNG NGHỆ PHẦN MỀM

BÁO CÁO ĐỒ ÁN 1
XÂY DỰNG WEBSITE THƯƠNG MẠI ĐIỆN TỬ
VỚI CHATBOT TƯ VẤN

Giảng viên hướng dẫn :

ThS. Trần Thị Hồng Yến

Sinh viên thực hiện 1 :

Trần Đoàn Phương - 19520230

Sinh viên thực hiện 2 :

Đỗ Đức Tâm - 19520253

Lớp

SE121.M21

:

TP HCM, tháng 06 năm 2022


BỘ GIÁO DỤC VÀ ĐÀO TẠO



TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN
KHOA CÔNG NGHỆ PHẦN MỀM

BÁO CÁO ĐỒ ÁN 1
XÂY DỰNG WEBSITE THƯƠNG MẠI ĐIỆN TỬ
VỚI CHATBOT TƯ VẤN

Giảng viên hướng dẫn :

ThS. Trần Thị Hồng Yến

Sinh viên thực hiện 1 :

Trần Đoàn Phương - 19520230

Sinh viên thực hiện 2 :

Đỗ Đức Tâm - 19520253

Lớp

SE121.M21

:

TP HCM, tháng 06 năm 2022


TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN

KHOA CÔNG NGHỆ PHẦN MỀM

CỘNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT NAM
Độc lập – Tự do – Hạnh phúc





ĐỀ CƯƠNG CHI TIẾT
TÊN ĐỀ TÀI:
XÂY DỰNG WEBSITE THƯƠNG MẠI ĐIỆN TỬ VỚI CHATBOT TƯ VẤN
Tên đề tài tiếng Anh:
BUILDING AN E-COMMERCE WEBSITE WITH CONSULTING CHATBOT
Cán bộ hướng dẫn: ThS. Trần Thị Hồng Yến
Thời gian thực hiện: Từ ngày 21/02/2022 đến ngày 10/06/2022
Sinh viên thực hiện:
Trần Đoàn Phương – 19520230
Đỗ Đức Tâm - 19520253
Nội dung đề tài:
1. Giới thiệu:
-

Trong suốt lịch sử phát triển của loài người, nhu cầu mua bán, trao đổi hàng hố ln
là một nhu cầu thiết yếu. Trước đây, hầu như mọi người đều mua sắm thông qua các
buổi họp chợ, sau này các hệ thống siêu thị, cửa hàng tiện lợi ra đời, giúp dễ dàng
hơn trong việc mua bán. Tuy nhiên, trong thời đại công nghệ phát triển như hiện nay,
mua sắm online ngày càng phổ biến hơn, đặc biệt đối với giới trẻ.

-


Có thể thấy nhiều ưu điểm vượt trội của mua sắm online so với mua trực tiếp truyền
thống:
o Nhanh chóng: chỉ mất vài thao tác để tìm được mặt hàng mình cần.
o Tiện lợi: khơng cần ra trực tiếp cửa hàng, có thể mua ở bất cứ đâu vào bất cứ
thời gian nào.

1


o Đa dạng mặt hàng: gần như có thể tìm thấy tất cả mặt hàng ở các trang thương
mại điện tử.
o Dễ dàng lựa chọn: có thể so sánh các sản phẩm dựa vào lượt đánh giá của
những người mua trước, dễ dàng cân nhắc khi mua sản phẩm.
o Giá tốt: vì sự cạnh tranh về giá trên các sàn thương mại điện tử rất cao nên các
sản phẩm thường có giá rẻ hơn hoặc bằng ngồi thị trường.
-

Hiện nay có rất nhiều website thương mại điện tử phổ biến tại Việt Nam như Shopee,
Tiki, Sendo, Lazada, ...

-

Nhận thấy tiềm năng phát triển của ngành thương mại điện tử, nhóm em mong muốn
tự tạo nên một website thương mại điện tử của riêng mình, đó là lí do chúng em chọn
đề tài này.

2. Mục tiêu:
- Xây dựng được một website thương mại điện tử đáp ứng các tiêu chí:
o Giao diện thân thiện, dễ sử dụng.

o Đáp ứng các tính năng cơ bản cần có của một website thương mại điện tử.
o Tích hợp chatbot tư vấn giúp dễ dàng hơn trong việc tra cứu thông tin.
3. Phạm vi:
 Phạm vi môi trường:
o Triển khai sản phẩm đề tài trên môi trường web.
 Phạm vi chức năng:
o Quản lý sản phẩm theo từng danh mục
o Tìm kiếm sản phẩm
o Quản lý tài khoản, thông tin khách hàng
o Quản lý giỏ hàng, thanh tốn
o Quản lý, tra cứu thơng tin đơn hàng
o Tích hợp chatbot tư vấn
4. Đối tượng:
- Người bán có nhu cầu bán sản phẩm.
2


- Khách hàng có nhu cầu mua sản phẩm.
5. Phương pháp thực hiện:
- Trải nghiệm các website thương mại điện tử hiện có, từ đó phân tích, xác định các
tính năng cần triển khai.
- Lập kế hoạch, phân công công việc cho các thành viên.
- Tìm hiểu cơng nghệ sẽ sử dụng.
- Triển khai xây dựng website theo đúng kế hoạch đã đề ra.
- Kiểm thử, phát hiện và sửa lỗi (nếu có).
- Báo cáo đồ án.
6. Cơng nghệ:
- Front-end: HTML5, CSS3, JQuery
- Back-end: PHP
- Database: MySQL

7. Kết quả mong đợi
- Xây dựng được một website thương mại điện tử với đầy đủ chức năng cơ bản.
- Giao diện thân thiện, hiện đại, dễ sử dụng, có trải nghiệm người dùng tốt.
- Tích hợp chatbot tư vấn giúp hỗ trợ khách hàng tốt hơn.
- Nắm bắt được các kiến thức cần có trong quy trình xây dựng một website.
- Có tính tiến hố: có thể phát triển, mở rộng thêm các tính năng mới trong tương lai.
- Q trình thực hiện đạt đúng tiến độ của môn học.

3


Kế hoạch thực hiện:

Thời gian

Cơng việc thực hiện

Từ 21/02/2022 đến

Tìm hiểu đề tài, phân tích yêu cầu, xác định

13/03/2022

các tính năng cần có trong sản phẩm.

Từ 14/03/2022 đến

Tìm hiểu về công nghệ sử dụng: HTML,

27/03/2022


CSS, JQUERY, PHP

Từ 28/03/2022 đến
10/04/2022
Từ 11/04/2022 đến
02/05/2022
Từ 03/05/2022 đến
29/05/2022
Từ 30/05/2022 đến
05/06/2022

Thành viên thực hiện
Cả 2 thành viên

Cả 2 thành viên

Lên bản thiết kế chi tiết giao diện trên Figma. Trần Đồn Phương
Cài đặt bên phía front-end.

Cả 2 thành viên

Cài đặt bên phía back-end.

Đỗ Đức Tâm

Hồn thiện sản phẩm và báo cáo.

Cả 2 thành viên


TP. HCM, ngày 21 tháng 02 năm 2022
Xác nhận của CBHD

Sinh viên

(Ký tên và ghi rõ họ tên)

(Ký tên và ghi rõ họ tên)

ThS. Trần Thị Hồng Yến

Trần Đoàn Phương

Đỗ Đức Tâm

4


MỤC LỤC
Chương 1. GIỚI THIỆU ĐỀ TÀI .............................................................................. 12
1.1. Tên đề tài ......................................................................................................... 12
1.2. Lí do chọn đề tài.............................................................................................. 12
1.3. Mơ tả sản phẩm ............................................................................................... 12
1.4. Chức năng chính ............................................................................................. 12
1.5. Cơng nghệ sử dụng ......................................................................................... 13
1.6. Thơng tin nhóm ............................................................................................... 13
Chương 2. CƠ SỞ LÝ THUYẾT ............................................................................... 14
2.1. HTML ............................................................................................................. 14
2.2. CSS.................................................................................................................. 15
2.3. JavaScript ........................................................................................................ 15

2.4. PHP ................................................................................................................. 17
2.5. MySQL............................................................................................................ 18
Chương 3. PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG ............................................. 21
3.1. Mơ hình hệ thống ............................................................................................ 21
3.2. Sơ đồ Use-case ................................................................................................ 22
3.3. Danh sách các use-case ................................................................................... 23
3.4. Đặc tả use-case ................................................................................................ 23
3.4.1. Use-case “Đăng nhập” ............................................................................. 23
3.4.2. Use-case “Đăng ký” ................................................................................. 24
3.4.3. Use-case “Đăng xuất” .............................................................................. 25
3.4.4. Use-case “Quản lý thông tin cá nhân” ..................................................... 26
3.4.5. Use-case “Chỉnh sửa thông tin cá nhân” .................................................. 26
3.4.6. Use-case “Đổi mật khẩu” ......................................................................... 27
3.4.7. Use-case “Tìm kiếm sản phẩm” ............................................................... 28
3.4.8. Use-case “Mua hàng” ............................................................................... 28
3.4.9. Use-case “Tra cứu đơn hàng” .................................................................. 29
3.4.10. Use-case “Đánh giá sản phẩm” ................................................................ 30
3.4.11. Use-case “Bán hàng” ................................................................................ 31
3.4.12. Use-case “Tra cứu đơn bán” .................................................................... 32
3.4.13. Use-case “Quản lý thông tin sản phẩm” .................................................. 32
5


Chương 4. THIẾT KẾ DỮ LIỆU ............................................................................... 34
4.1. Sơ đồ logic ...................................................................................................... 34
4.2. Mô tả chi tiết bảng dữ liệu .............................................................................. 35
4.2.1. Bảng “Account” ....................................................................................... 35
4.2.2. Bảng “Address” ........................................................................................ 35
4.2.3. Bảng “Product” ........................................................................................ 36
4.2.4. Bảng “ImageProduct” .............................................................................. 37

4.2.5. Bảng “Color” ............................................................................................ 37
4.2.6. Bảng “ProductInCart” .............................................................................. 37
4.2.7. Bảng “ProductInFavorite” ........................................................................ 37
4.2.8. Bảng “ProductInBill” ............................................................................... 38
4.2.9. Bảng “Bill” ............................................................................................... 38
4.2.10. Bảng “DetailBill” ..................................................................................... 38
4.2.11. Bảng “Evalute” ......................................................................................... 39
Chương 5. THIẾT KẾ GIAO DIỆN .......................................................................... 40
5.1. Danh sách màn hình ........................................................................................ 40
5.2. Chi tiết màn hình ............................................................................................. 41
5.2.1. Màn hình “Đăng nhập” ............................................................................ 41
5.2.2. Màn hình “Đăng ký” ................................................................................ 42
5.2.3. Màn hình “Trang chủ” ............................................................................. 43
5.2.4. Màn hình “Danh sách sản phẩm” ............................................................. 46
5.2.5. Màn hình “Chi tiết sản phẩm” .................................................................. 47
5.2.6. Màn hình “Giỏ hàng” ............................................................................... 49
5.2.7. Màn hình “Xác nhận đặt hàng” ................................................................ 50
5.2.8. Màn hình “u thích” .............................................................................. 52
5.2.9. Màn hình “Danh sách đơn mua” .............................................................. 53
5.2.10. Màn hình “Chi tiết đơn mua” ................................................................... 54
5.2.11. Màn hình “Đánh giá sản phẩm” ............................................................... 55
5.2.12. Màn hình “Cửa hàng của bạn” ................................................................. 56
5.2.13. Màn hình “Thêm sản phẩm” .................................................................... 57
5.2.14. Màn hình “Danh sách đơn bán” ............................................................... 58
5.2.15. Màn hình “Chi tiết đơn bán” .................................................................... 59
5.2.16. Màn hình “Quản lý tài khoản” ................................................................. 60
6


5.2.17. Màn hình “Đổi mật khẩu” ........................................................................ 61

5.2.18. Màn hình “Chatbot tư vấn” ...................................................................... 62
Chương 6. KẾT LUẬN .............................................................................................. 63
6.1. Ưu điểm........................................................................................................... 63
6.2. Hạn chế ........................................................................................................... 63
6.3. Hướng phát triển ............................................................................................. 63

7


DANH MỤC HÌNH ẢNH
Hình 2.1:Cấu trúc file html cơ bản ............................................................................... 14
Hình 2.2: Đoạn mã CSS đơn giản ................................................................................ 15
Hình 2.3: Phương thức hoạt động của JavaScript ........................................................ 16
Hình 2.4: Ngơn ngữ PHP .............................................................................................. 17
Hình 2.5: Chương trình PHP cơ bản ............................................................................ 18
Hình 2.6: Mơ hình hoạt động của MySQL ................................................................... 19
Hình 2.7: Một ví dụ sử dụng MySQL trong đồ án ....................................................... 19
Hình 3.1: Mơ hình hệ thống ......................................................................................... 21
Hình 3.2: Sơ đồ use-case tổng quát .............................................................................. 22
Hình 4.1: Sơ đồ logic dữ liệu........................................................................................ 34
Hình 5.1: Màn hình Đăng nhập .................................................................................... 41
Hình 5.2: Màn hình Đăng ký ........................................................................................ 42
Hình 5.3: Màn hình Trang chủ (phần trên)................................................................... 43
Hình 5.4: Màn hình Trang chủ (phần dưới) ................................................................. 45
Hình 5.5: Màn hình Danh sách sản phẩm..................................................................... 46
Hình 5.6: Màn hình Chi tiết sản phẩm (phần trên) ....................................................... 47
Hình 5.7: Màn hình Chi tiết sản phẩm (phần dưới)...................................................... 48
Hình 5.8: Màn hình Giỏ hàng ....................................................................................... 49
Hình 5.9: Màn hình Xác nhận đặt hàng (nửa trên) ....................................................... 50
Hình 5.10: Màn hình Xác nhận đặt hàng (nửa dưới).................................................... 51

Hình 5.11: Màn hình u thích .................................................................................... 52
Hình 5.12: Màn hình Danh sách đơn mua .................................................................... 53
Hình 5.13: Màn hình Chi tiết đơn mua ......................................................................... 54
Hình 5.14: Màn hình Đánh giá sản phẩm ..................................................................... 55
Hình 5.15: Màn hình Cửa hàng của bạn ....................................................................... 56
Hình 5.16: Màn hình Thêm sản phẩm .......................................................................... 57
Hình 5.17: Màn hình Danh sách đơn bán ..................................................................... 58
Hình 5.18: Màn hình Chi tiết đơn bán .......................................................................... 59
Hình 5.19: Màn hình Quản lý tài khoản ....................................................................... 60
Hình 5.20: Màn hình đổi mật khẩu ............................................................................... 61
Hình 5.21: Màn hình Chatbot tư vấn ............................................................................ 62

8


DANH MỤC BẢNG BIỂU
Bảng 1.1: Thơng tin thành viên nhóm .......................................................................... 13
Bảng 3.1: Danh sách các use-case chính ...................................................................... 23
Bảng 3.2: Đặc tả use-case Đăng nhập .......................................................................... 24
Bảng 3.3: Đặc tả use-case Đăng ký .............................................................................. 25
Bảng 3.4: Đặc tả use-case Đăng xuất ........................................................................... 25
Bảng 3.5: Đặc tả use-case Quản lý thông tin cá nhân .................................................. 26
Bảng 3.6: Đặc tả use-case Chỉnh sửa thông tin cá nhân ............................................... 27
Bảng 3.7: Đặc tả use-case Đổi mật khẩu ...................................................................... 28
Bảng 3.8: Đặc tả use-case Tìm kiếm sản phẩm ............................................................ 28
Bảng 3.9: Đặc tả use-case Mua hàng............................................................................ 29
Bảng 3.10: Đặc tả use-case Tra cứu đơn hàng ............................................................. 30
Bảng 3.11: Đặc tả use-case Đánh giá sản phẩm ........................................................... 31
Bảng 3.12: Đặc tả use-case “Bán hàng” ....................................................................... 31
Bảng 3.13: Đặc tả use-case Tra cứu đơn bán ............................................................... 32

Bảng 3.14: Đặc tả use-case “Quản lý thông tin sản phẩm” .......................................... 33
Bảng 4.1: Mô tả các bảng dữ liệu ................................................................................. 35
Bảng 4.2: Chi tiết bảng Account .................................................................................. 35
Bảng 4.3: Chi tiết bảng Address ................................................................................... 36
Bảng 4.4: Chi tiết bảng Product ................................................................................... 36
Bảng 4.5: Chi tiết bảng ImageProduct ......................................................................... 37
Bảng 4.6: Chi tiết bảng Color ....................................................................................... 37
Bảng 4.7: Chi tiết bảng ProductInCart ......................................................................... 37
Bảng 4.8: Chi tiết bảng ProductInFavorite ................................................................... 37
Bảng 4.9: Chi tiết bảng ProductInBill .......................................................................... 38
Bảng 4.10: Chi tiết bảng Bill ........................................................................................ 38
Bảng 4.11: Chi tiết bảng DetailBill .............................................................................. 38
Bảng 4.12: Chi tiết bảng Evalute .................................................................................. 39

9


LỜI CẢM ƠN
Đồ án “Xây dựng website thương mại điện tử với chatbot tư vấn” là đồ án đầu
tiên nhóm em triển khai trên môi trường web. Chúng em đã cố gắng tìm tịi, học hỏi,
trau dồi kiến thức khơng ngừng cả trước và trong q trình làm. Đó là một chặng đường
dài, chúng em xin gửi lời cảm ơn chân thành đến:
 Các quý thầy cô trường Đại học Cơng nghệ Thơng tin nói chung, và cơ Trần Thị
Hồng Yến nói riêng, đã tận tình giúp đỡ, truyền đạt những kiến thức bổ ích cho
chúng em, đồng thời ln lắng nghe ý kiến và góp ý cho chúng em ngày một
phát triển hơn.
 Các bạn trong nhóm đã khơng ngừng cố gắng, giúp đỡ lẫn nhau trong lúc khó
khăn, cởi mở trao đổi trong suốt quá trình thực hiện đồ án.
 Cuối cùng, xin cảm ơn gia đình, anh chị em, bạn bè là hậu phương vững chắc
cho chúng em yên tâm tập trung hoàn thành đồ án.


Thành phố Hồ Chí Minh, ngày 5 tháng 6 năm 2022

Sinh viên thực hiện

Trần Đoàn Phương – Đỗ Đức Tâm

10


NHẬN XÉT CỦA GIẢNG VIÊN HƯỚNG DẪN
..........................................................................................................................................
..........................................................................................................................................
..........................................................................................................................................
..........................................................................................................................................
..........................................................................................................................................
..........................................................................................................................................
..........................................................................................................................................
..........................................................................................................................................
..........................................................................................................................................
..........................................................................................................................................
..........................................................................................................................................
..........................................................................................................................................
..........................................................................................................................................
..........................................................................................................................................

Tp.HCM, ngày … tháng ... năm 2022
GVHD

ThS. Trần Thị Hồng Yến


11


Chương 1.

GIỚI THIỆU ĐỀ TÀI

1.1. Tên đề tài
-

Xây dựng website thương mại điện tử với chatbot tư vấn.

-

Building an E-Commerce website with consulting chatbot.

1.2. Lí do chọn đề tài
Với sự phát triển nhanh chóng của ngành thương mại điện tử, mua sắm online
dần trở nên quen thuộc với tất cả mọi người, ở mọi lứa tuổi. Các sàn thương mại
điện tử lớn hiện nay như Shopee, Lazada, Tiki đều có phát triển ứng dụng trên
mobile để dễ dàng truy cập trên điện thoại. Tuy nhiên, mobile app không thể thay
thế hồn tồn được website, bởi tính thuận tiện của nó. Website có thể truy cập
ở bất cứ đâu một cách dễ dàng mà khơng cần cài đặt gì cả, chỉ cần một trình
duyệt và có kết nối internet.
Mong muốn của chúng em là tự tạo nên một website thương mại điện tử dành
riêng cho mình, có tích hợp chatbot tư vấn để dễ dàng tra cứu thơng tin. Đó là lí
do nhóm em chọn đề tài này.
1.3. Mơ tả sản phẩm
-


Ứng dụng hỗ trợ người dùng mua hàng, bán hàng trực tuyến.

-

Triển khai trên mơi trường web.

1.4. Chức năng chính
-

Quản lý tài khoản: Đăng nhập, đăng ký, đổi mật khẩu.

-

Quản lý sản phẩm theo danh mục.

-

Rao bán sản phẩm.

-

Quản lý thơng tin sản phẩm.

-

Mua sản phẩm.

-


Đánh dấu u thích để mua sau.

-

Quản lý đơn hàng đã mua, đã bán.

-

Hệ thống đánh giá sản phẩm.

-

Quản lý thông tin cá nhân.

-

Chatbot tư vấn.
12


1.5. Công nghệ sử dụng
-

Figma: lên bản thiết kế giao diện.

-

HTML, CSS, JavaScript: cài đặt front-end.

-


PHP: cài đặt back-end.

-

MySQL: cơ sở dữ liệu.

-

Github: quản lý mã nguồn.

1.6. Thơng tin nhóm
STT

Tên thành viên

Mã sinh viên

Email

1

Trần Đồn Phương

19520230



2


Đỗ Đức Tâm

19520253



Bảng 1.1: Thơng tin thành viên nhóm

13


Chương 2.

CƠ SỞ LÝ THUYẾT

2.1. HTML
-

HTML là viết tắt của cụm tử Hyper Text Markup Language 5 – ngôn ngữ
đánh dấu siêu văn bản.

-

HTML được coi như bộ khung của một trang web, được cấu thành từ những
thẻ được cung cấp, từ đó hiển thị ra cho người dùng nội dung thô.

-

Mô tả HTML công khai đầu tiên là một tài liệu có tên "HTML Tags", lần đầu
tiên được đề cập trên Internet bởi Tim Berners-Lee – một nhà vật lý vào cuối

năm 1991. Nó mơ tả 18 phần tử bao gồm thiết kế ban đầu, tương đối đơn giản
của HTML. Ngoại trừ thẻ siêu liên kết, chúng bị ảnh hưởng mạnh bởi
SGMLguid, một định dạng tài liệu dựa trên Standard Generalized Markup
Language (SGML) tại CERN.

-

Các phiên bản tiếp theo của HTML lần lượt được phát hành: HTML2,
HTML3, HTML4, và mới nhất là HTML5. Qua mỗi phiển bản, nó dần được
cải tiến và bổ sung những tính năng cần thiết để hỗ trợ tốt hơn trong việc xây
dựng một trang web tĩnh.

Hình 2.1:Cấu trúc file html cơ bản

14


2.2. CSS
-

CSS là viết tắt của cụm từ Cascading Style Sheets.

-

CSS được sử dụng để định dạng style cho các phần tử được tạo ra bởi HTML.
Hiểu đơn giản thì HTML tạo nên bộ khung và CSS trang trí để tạo nên một
trang web đẹp mắt.

-


CSS lần đầu tiên được đề xuất bởi Håkon Wium Lie vào ngày 10 tháng 10
năm 1994. Vào thời điểm đó, Lie đang làm việc với Tim Berners-Lee (cha
đẻ của HTML) tại CERN. Một số ngôn ngữ định kiểu khác cho web đã được
đề xuất cùng lúc và các cuộc thảo luận về danh sách gửi thư cộng đồng cũng
như đồng thuận trong World Wide Web Consortium dẫn đến CSS W3C đầu
tiên (CSS1) được phát hành vào năm 1996. Đặc biệt, một đề nghị của Bert
Bos có ảnh hưởng hơn đó là ơng trở thành đồng tác giả của CSS1 và được
coi là đồng sáng tạo CSS.

-

Qua các năm, CSS được phát triển lên các phiên bản CSS2, CSS2.1, CSS3
và mới nhất là CSS4, với việc chia thành các mô đun riêng biệt, được dựa
trên các mô đun từ CSS3.

-

Dưới đây là một đoạn mã CSS đơn giản để thiết lập màu chữ và kích thước
chữ cho thẻ <body>

Hình 2.2: Đoạn mã CSS đơn giản

2.3. JavaScript
-

JavaScript là một ngơn ngữ lập trình thơng dịch được sử dụng ở phía máy
khách và phía máy chủ, cho phép tạo các trang web có các hình động chun
nghiệp. JavaScript được hỗ trợ bởi hầu hết các trình duyệt web: Chrome,
Firefox, Safari, Internet Explorer, Edge, Opera,... Hầu hết các trình duyệt di
động cho điện thoại thơng minh đều hỗ trợ JavaScript.

15


-

JavaScript chủ yếu được sử dụng cho các website nhằm cung cấp cho người
dùng trải nghiệm thân thiện hơn, bao gồm các chức năng: tự động cập nhật
các trang web, cải tiến giao diện người dùng như menu và hộp thoại,
animations, đồ họa 2D và 3D, bản đồ tương tác, trình phát video... Chế độ sử
dụng JavaScript này trong trình duyệt web cũng được gọi là javascript phía
máy khách.

-

Phiên bản đầu tiên của ngôn ngữ này được đặt tên là Mocha vào tháng 5 năm
1995, đổi tên thành LiveScript vào tháng 9 năm 1995, và được đổi tên thành
JavaScript vào tháng 12 năm 1995. Năm 1996, JavaScript đã được gửi đến
ECMA International để hồn thiện trở thành, một đặc tính kỹ thuật tiêu
chuẩn. Vào tháng 6 năm 1997, đặc tính kỹ thuật chính thức đầu tiên cho ngơn
ngữ được phát hành là ECMA-262. Phiên bản mới nhất của ngôn ngữ là
ECMAScript 2017 được phát hành vào tháng 6 năm 2017.

-

Cách hoạt động của JavaScript:

Hình 2.3: Phương thức hoạt động của JavaScript

16



-

Khi web browser tải một web page, HTML parser bắt đầu phân tích cú pháp
HTML code và tạo DOM. Bất cứ khi nào trình phân tích cú pháp gặp một chỉ
thị CSS hoặc JavaScript (inline hoặc externally loaded), nó sẽ được chuyển
giao cho CSS parser hoặc JavaScript engine theo yêu cầu.

-

JavaScript engine tải các tệp JavaScript bên ngoài và inline code, nhưng
không chạy mã ngay lập tức, mà đợi HTML và CSS phân tích hồn tất. Khi
điều này được thực hiện, JavaScript được thực thi theo thứ tự chúng được tìm
thấy trên trang web: các biến và hàm được xác định, các lời gọi hàm được
thực thi, trình xử lý sự kiện được kích hoạt,... Các hoạt động này dẫn đến việc
DOM được cập nhật bởi JavaScript và được hiển thị ngay lập tức bởi trình
duyệt.

-

Trong đồ án, nhóm em đã sử dụng JavaScript để xử lý các sự kiện onclick
cũng như ẩn/hiện các modal.

2.4. PHP

Hình 2.4: Ngơn ngữ PHP

-

PHP là viết tắt đệ quy của PHP: Hypertext Preprocessor, một loại ngôn ngữ

đặc biệt dùng để phát triển website (bao gồm Static Website và Dynamic
Website).

17


-

PHP hỗ trợ rất nhiều trong việc thay đổi, quản lý, thu thập dữ liệu bên phía
server.

Hình 2.5: Chương trình PHP cơ bản

-

Một số ưu điểm của PHP:
 PHP có mã nguồn mở và hồn tồn miễn phí cho mọi người dùng.
 PHP khơng khó và phức tạp như các ngơn ngữ lập trình khác, cụ thể
là JSP, ASP,… nên có thể phù hợp cả với những người mới, những
người khơng chun.
 PHP có hệ thống cơ sở dữ liệu được hỗ trợ dài đa dạng như MySQL;
PostgreSQL; Berkeley DB (rất hữu ích cho quản trị viên hệ thống);
Oracle; Microsoft SQL Server; SQLite,…
 PHP là nền tảng chéo giúp bạn có thể triển khai ứng dụng của mình
trên một số hệ điều hành khác nhau như Windows, Linux, Mac OS,…
 PHP có hệ thống bảo mật an tồn nhờ trang bị lệnh thốt đặc biệt.
 PHP có cộng đồng sử dụng lớn, giúp người dùng dễ dàng có được kinh
nghiệm từ người đi trước để có thể triển khai hiệu quả nhất trên thực
tế.
-


Nhóm em sử dụng PHP là ngơn ngữ chính để cài đặt bên phía back-end
cho website của mình.

2.5. MySQL
-

MySQL là một hệ quản trị cơ sở dữ liệu mã nguồn mở, được tin dùng bởi
những ứng dụng web lớn nhất thế giới như Facebook, Twitter, Youtube,
Google, Yahoo, ...
18


-

Phần mềm MySQL hồn tồn miễn phí và được phát triển, phân phối và hỗ
trợ bởi Oracle Corporation.

-

MySQL Server là máy tính hoặc hệ các máy tính cài đặt phần mềm MySQL
dành cho server để lưu trữ dữ liệu trên đó. Các máy khách có thể truy cập vào
dữ liệu trên đó. Dữ liệu được lưu trong các bảng, các bảng có mối quan hệ
với nhau.

Hình 2.6: Mơ hình hoạt động của MySQL

-

Cách thức hoạt động của MySQL:

 MySQL tạo ra các bảng lưu trữ dữ liệu, cũng như định nghĩa quan hệ
giữa các bảng.
 Client gửi yêu cầu SQL bằng câu lệnh.
 Server sẽ phản hồi thông tin và trả về kết quả cho Client.

Hình 2.7: Một ví dụ sử dụng MySQL trong đồ án

19


-

Ưu điểm của MySQL:
 Tính linh hoạt và dễ sử dụng.
 Dễ dàng cài đặt.
 Hiệu năng cao.
 An toàn nhờ hệ thống phân quyền truy cập và quản lý tài khoản.

20


Chương 3.

PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG

3.1. Mơ hình hệ thống

Hình 3.1: Mơ hình hệ thống

Trang web của nhóm em được xây dựng dựa trên mơ hình ba lớp, gồm có ba

thành phần chính:
-

Presentation Layer (GUI): Lớp này có nhiệm vụ chính giao tiếp với người
dùng. Nó gồm các thành phần giao diện (win form, web form,…) và thực
hiện các công việc như nhập liệu, hiển thị dữ liêu, kiểm tra tính đúng đắn dữ
liệu trước khi gọi lớp Business Logic Layer (BLL).

-

Business Logic Layer (BLL): Lớp này có 2 nhiệm vụ chính:
 Đây là nơi đáp ứng các yêu cầu thao tác dữ liệu của GUI layer, xử lý
chính nguồn dữ liệu từ Presentation Layer trước khi truyền xuống Data
Access Layer và lưu xuống hệ quản trị CSDL.
 Đây cịn là nơi kiểm tra các ràng buộc, tính tồn vẹn và hợp lệ dữ liệu,
thực hiện tính tốn và xử lý các yêu cầu nghiệp vụ, trước khi trả kết quả
về Presentation Layer.

21


-

Data Access Layer (DAL): Lớp này có chức năng giao tiếp với hệ quản trị
CSDL như thực hiện các công việc liên quan đến lưu trữ và truy vấn dữ liệu
( tìm kiếm, thêm, xóa, sửa,…).

3.2. Sơ đồ Use-case

Hình 3.2: Sơ đồ use-case tổng quát


22


3.3. Danh sách các use-case
STT

Ý nghĩa / Ghi chú

Tên use-case

1

Đăng nhập

Đăng nhập vào hệ thống

2

Đăng ký

Đăng ký tài khoản mới

3

Đăng xuất

Đăng xuất khỏi hệ thống

4


Quản lý thông tin cá nhân

Xem / chỉnh sửa thông tin cá nhân

5

Chỉnh sửa thông tin cá nhân

6

Đổi mật khẩu

Đổi mật khẩu

7

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

Tìm sản phẩm theo tên

8

Mua hàng

Mua sản phẩm

9

Tra cứu đơn hàng


Tra cứu đơn hàng đã mua

10

Đánh giá sản phẩm

Đánh giá sản phẩm đã mua

11

Bán hàng

Đăng bán sản phẩm mới

12

Tra cứu đơn bán

Tra cứu đơn hàng đã bán

13

Quản lý thông tin sản phẩm

Sửa thơng tin, xố sản phẩm

Sửa các thơng tin như họ tên, email, số
điện thoại, giới tính, ...


Bảng 3.1: Danh sách các use-case chính

3.4. Đặc tả use-case
3.4.1. Use-case “Đăng nhập”
Tên chức năng

Đăng nhập

Tóm tắt

Chức năng đăng nhập vào hệ thống

Dịng sự kiện chính

1. Hệ thống hiển thị form đăng nhập

23


×