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

TRUYỀN THÔNG VIỆT HÀN

Khoa Khoa Học Máy Tính

ĐỒ ÁN CƠ SỞ 2
ĐỀ TÀI: XÂY DỰNG WEBSITE THƯƠNG MẠI ĐIỆN TỬ
VỀ THỜI TRANG

Sinh viên thực hiện: Nguyễn Huỳnh Quang

Lớp: 22NS
Giảng viên hướng dẫn: TS Nguyễn Hữu Nhật Minh

Đà Nẵng, ngày … tháng 12 năm 2023

T r a n g 0 | 63
 TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN &
TRUYỀN THÔNG VIỆT HÀN

Khoa Khoa Học Máy Tính

ĐỒ ÁN CƠ SỞ 2
ĐỀ TÀI: XÂY DỰNG WEBSITE THƯƠNG MẠI ĐIỆN TỬ
VỀ THỜI TRANG

Sinh viên thực hiện: Nguyễn Huỳnh Quang

Lớp: 22NS
Giảng viên hướng dẫn: TS Nguyễn Hữu Nhật Minh

Đà Nẵng, tháng 12 năm 2023

T r a n g 0 | 63
`
 LỜI CẢM ƠN

Để dự án này đạt kết quả tốt đẹp, em đã nhận được sự hỗ trợ, giúp đỡ của thầy cô. Với tình
cảm sâu sắc, chân thành, cho phép chúng em được bày tỏ lòng biết ơn sâu sắc đến tất cả
quý thầy cô đã tạo điều kiện giúp đỡ trong quá trình học tập và nghiên cứu và phát triển đề
tài.
Trước hết chúng em xin gửi tới các thầy cô trường Đại học Công nghệ thông tin và truyền
thông Việt – Hàn lời chào trân trọng, lời chúc sức khỏe và lời cảm ơn sâu sắc. Với sự quan
tâm, dạy dỗ, chỉ bảo tận tình chu đáo của các giảng viên đã truyền tải các kĩ năng cần thiết,
đến nay chúng em đã có thể hoàn thành đồ án cơ sở 1.
Đặc biệt chúng em xin gửi lời cảm ơn chân thành nhất tới cô giáo –TS. Nguyễn Hữu Nhật
Minh đã quan tâm giúp đỡ, giúp đỡ tận tình chúng em hoàn thành tốt đồ án này trong thời
gian qua.
Với điều kiện thời gian cũng như kinh nghiệm còn hạn chế, đồ án này không thể tránh được
những thiếu sót. Chúng em rất mong nhận được sự chỉ bảo, đóng góp ý kiến của các thầy
cô để tôi có điều kiện bổ sung, nâng cao ý thức của mình, phục vụ tốt hơn công tác thực tế
sau này.

Chúng em xin chân thành cảm ơn!

Đà Nẵng, ngày…. tháng ….. năm 2023

Giảng Viên Sinh viên

Nguyễn Huỳnh Quang

T r a n g 1 | 63
`
NHẬN XÉT CỦA GIẢNG VIÊN HƯỚNG DẪN
……………………………………………………….
……………………………………………………….
……………………………………………………….
……………………………………………………….
……………………………………………………….
……………………………………………………….
……………………………………………………….
……………………………………………………….
……………………………………………………….

T r a n g 2 | 63
`
MỤC LỤC
Mục lục
LỜI CẢM ƠN.........................................................................1
NHẬN XÉT CỦA GIẢNG VIÊN HƯỚNG DẪN................2
MỤC LỤC...............................................................................3
Mục lục hình ảnh....................................................................5
Chương I:Khảo sát và phân tích đề tài.................................7
1 Phân tích yêu cầu của đề tài.......................................................................7
1.1 Giới thiệu đề tài.................................................................................7
1.2 Mục tiêu của đề tài............................................................................7
1.3 Logo Website....................................................................................7
2 Phân tích hệ thống cần thiết kế...................................................................8
2.1 Một số chức năng chính của trang web bao gồm:.............................8
2.2 Các hệ thống cơ bản:.........................................................................9
3 Công cụ hổ trợ..........................................................................................10
3.1 Xampp:............................................................................................10
3.2 Visual Studio Code:........................................................................11
3.3 Bootstrap 5......................................................................................11
3.4 JQuery.............................................................................................12
3.5 AJAX...............................................................................................13
4 Ngôn ngữ lập trình....................................................................................13
4.1 HTML(HyperText Markup Language):..........................................13
4.2 CSS(Cascading Style Sheets):.........................................................14
4.3 PHP(Hypertext Preprocessor).........................................................14
4.4 SQL (Structured Query Language).................................................16
4.5 JavaScript........................................................................................16
5. Các bước tiến hành..................................................................................17

Chương II :Phân Tích và thiết kế hệ thống website..........19

1 Mô tả bài bài toán.....................................................................................19
2 Thiết kế cơ sở dữ liệu...............................................................................20

T r a n g 3 | 63
`
 2.1 Mô hình liên kết thực thể(E – R).....................................................20
2.2 Mô hình quan hệ..............................................................................21
2.1 Biểu đồ use case..............................................................................22
2.3 Biểu đồ trình tự................................................................................29
2.5 Biểu đồ hoạt động...........................................................................33
ChươngIII: Triển khai xây dựng trang website................47
1 Những kết quả quan trọng........................................................................47
1.1 Trang web gồm các chức năng sau cho user:..................................47
1.2 Các chức năng của admin................................................................48
2 Giao diện Web:.........................................................................................48
2.1 Giao diện người dùng:.....................................................................48
Chương IV: Tổng kết đề tài.................................................59
1 Kết quả đạt được:.....................................................................................59
2 Ưu điểm và nhược điểm chưa làm được trong trang web........................59
2.1 Ưu điểm...........................................................................................59
2.2 Nhược điểm, và những điều chưa làm được ở web.........................60
3 Hướng phát triến trong tương lai..............................................................60

DANH MỤC CỤM TỪ VIẾT TẮT.....................................62

1.Tài liệu tham khảo....................................................................................62
2. Tài liệu Internet.......................................................................................62

T r a n g 4 | 63
`
Mục lục hình ảnh
Hình 1 Logo Website...............................................................................................................7
Hình 2 Mô hình Diagram cơ sở dữ liệu.................................................................................21
Hình 3 Use case chính...........................................................................................................22
Hình 4 Quản lý giỏ hàng........................................................................................................23
Hình 5 :Quản lý đơn hàng......................................................................................................24
Hình 6 Quản lý sản phẩm.....................................................................................................25
Hình 7: Biểu đồ trình tự đăng nhập.......................................................................................29
Hình 8 Biểu đồ trình tự đăng ký............................................................................................29
Hình 9 : Biểu đồ trình tự tìm kiếm.........................................................................................30
Hình 10 Hình 2.3.4: Biểu đồ trình tự đặt hàng......................................................................31
Hình 11 Biểu đồ trình tự giỏ hàng.........................................................................................32
Hình 12 H:Biểu đồ hoạt động tìm kiếm sản phẩm................................................................33
Hình 13 Biểu đồ hoạt động lọc chi tiết sản phẩm..................................................................34
Hình 14:Biểu đồ hoạt động đăng ký......................................................................................34
Hình 15 Biểu đồ hoạt động đăng nhập.................................................................................35
Hình 16 Biểu đồ hoạt động đăng xuất...................................................................................35
Hình 17- Biểu đồ hoạt động thay đổi thông tin người dùng..................................................36
Hình 18 - Biểu đồ hoạt động liên hệ......................................................................................37
Hình 19 Biểu đồ hoạt động thanh toán.................................................................................37
Hình 20 Biểu đồ hoạt động xem tin tức................................................................................38
Hình 21 Biểu đồ hoạt động xem tình trạng đơn hàng............................................................38
Hình 22-Biểu đồ hoạt động quản lý đơn hàng.......................................................................39
Hình 23 Biểu đồ hoạt động quản lý sản phẩm......................................................................40
Hình 24. Biểu đồ hoạt động quản lý nhà sản xuất.................................................................41
Hình 25 Biểu đồ hoạt động quản lý danh mục sản phẩm......................................................42
Hình 26 Biểu đồ hoạt động quản lý tin tức............................................................................43
Hình 27 Biểu đồ hoạt động quản lý khuyến mãi...................................................................44
Hình 28- Biểu đồ hoạt động quản lý liên hệ..........................................................................45
Hình 29- Biểu đồ hoạt động thống kê doanh thu...................................................................45
Hình 30- Biểu đồ hoạt động thay đổi chức vụ người dùng...................................................46
Hình 31 Hình ảnh trang quảng bá..........................................................................................48
Hình 32 Hình ảnh trang đăng nhập và đăng kí......................................................................49
Hình 33 Hình ảnh trang web..................................................................................................50
Hình 34 Hình ảnh trang hiển thị sản phẩm............................................................................50
Hình 35 Hình ảnh trang hiển thị chi tiết sản phẩm................................................................51
Hình 36 Hình ảnh trang hiển thị bình luận đánh giá sản phẩm.............................................51
Hình 37 Hình ảnh trang hiển thị giới thiệu sản phẩm............................................................52
Hình 38 Hình ảnh trang giỏ hàng..........................................................................................52
Hình 39 Hình ảnh trang hiển thị trang nhập địa chỉ hoàn tất đặt hàng..................................53
Hình 40 Hình ảnh trang hiển thị thông tin cá nhân................................................................53
Hình 41 Hình ảnh trang hiển thị sửa thông tin cá nhân.........................................................54
Hình 42 Hình ảnh trang hiển thị trang theo giõi tình trạng đơn hàng của mình....................54
Hình 43 Hình ảnh trang hiển thị trang theo giõi bình luận của mình...................................55
Hình 44 Hình ảnh trang chủ của ADMIN.............................................................................55
Hình 45 Hình ảnh trang quản lý sản phẩm............................................................................56
T r a n g 5 | 63
`
Hình 46 Hình ảnh trang quản lý danh mục............................................................................56
Hình 47 Hình ảnh trang quản lý sản phẩm............................................................................57
Hình 48 Hình ảnh trang quản lý thương hiệu........................................................................57
Hình 49 Hình ảnh hiển thị danh mục sản phẩm.....................................................................58
Hình 50 Hình ảnh chức năng tìm kiếm sản phẩm..................................................................58

T r a n g 6 | 63
`
Chương I:Khảo sát và phân tích đề tài

1 Phân tích yêu cầu của đề tài

1.1 Giới thiệu đề tài

Đề tài "Thiết kế website bán giày dép và quần áo" là một dự án nhằm tạo ra một trang web
chuyên về bán các loại giày dép online. Trang web sẽ được thiết kế để cung cấp cho khách
hàng một trải nghiệm mua sắm tốt nhất với nhiều sản phẩm chất lượng và đa dạng về kiểu
dáng, màu sắc và kích thước.

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

 Tìm hiểu các yêu cầu cơ bản về thiết kế website bán hàng trực tuyến.
 Nghiên cứu và phân tích thị trường bán giày dép quần áo trực tuyến tại Việt Nam.
 Thiết kế giao diện website bán giày dép quần áo đẹp mắt, dễ sử dụng và hiệu quả.
 Xây dựng hệ thống quản lý và bảo mật thông tin khách hàng trên website.
 Đảm bảo tính năng và hiệu suất của website vượt trội so với các đối thủ cạnh tranh
trên thị trường.

1.3 Logo Website

Hình 1 Logo Website

T r a n g 7 | 63
`
2 Phân tích hệ thống cần thiết kế
2.1 Một số chức năng chính của trang web bao gồm:

STT Chức năng Mô tả

1 Thiết kế giao diện Giao diện đẹp mắt, tiện lợi, dễ sử dụng

2 Ngôn ngữ Ngôn ngữ hiển thị là tiếng việt

Trang chủ Được thiết kế ấn tượng, hiện đại, các
chức năng nổi bật được hiển thị ngay tại
- Danh mục các sản trang chủ.
phẩm
- Giỏ hàng Thiết kế trang chủ với nhưng module
- Tin tức sự kiện chính trong website.
- Tìm kiếm thông tin về
sản phẩm… Những thông tin xuất hiện trên trang chủ
3 phụ thuộc vào sự quyết định của cửa hàng
- Liên hệ
trong quá trình cập nhật website các
thông tin này có thể là thông tin giới thiệu
về cửa hàng, hình ảnh sản phẩm nới hay
hình ảnh các dịch vụ khác.

Hiện thị vị trí của cửa hàng thông qua

Google Map, email, số điện thoại của cửa
hàng.
Quản lý thể loại,sản phẩm, Cho phép xem danh sách, thêm sửa xóa
Comment,tin tức, nhân viên, thể loại, sản phẩm, tin tức, nhân viên, đối
khách hàng với khách hàng thì có thể xem danh sách
4 khách hàng, còn đối với Comment thì có
thể trả lời các Comment của khách hàng
hoặc xóa những Comment không phù
hợp.
5 Tìm kiếm thông tin Cho phép tìm kiếm nội dung website
bằng các từ khóa liên quan, hoặc tìm
kiếm nâng cao theo các tiêu chí.

T r a n g 8 | 63
`
 Tìm kiếm theo mã số sản phẩm, tên gọi,
lọc sản phẩm bằng filter data, có thể lọc
theo nhiều tiêu chí khác nhau…

Liên hệ trực tuyến, đánh giá Cung cấp 1 mẫu biểu trực tuyến cho phép
sản phẩm khách hàng có thể dễ dàng gửi những
đánh giá, nhận xét cũng như những yêu
6 cầu của mình về sản phẩm đến với doanh
nghiệp.

7 Comment Đánh giá, ý kiến của khách hàng về sản

phẩm của cửa hàng.
Chức năng giỏ hàng và đặt Thêm sản phẩm vào giỏ hàng khách hàng
hàng có thể xóa các sản phẩm trong giỏ hàng
đã lựa chọn.
8 Thay đổi số lượng sản phẩm trong đơn
hàng.
Hệ thống sẽ tự động tính tổng tiền hàng
trong giỏ hàng cho quý khách.
Chức năng thanh toán Ngay khi lựa chọn hàng hóa vào giỏ hàng
khách hàng có thể đặt hàng thông qua
form thanh toán.

Nếu khách hàng chưa đăng nhập thì hệ

thống sẽ yêu cầu khách hàng đăng nhập
9 hoặc đăng ký(nếu chưa có tài khoản),
khách hàng sẽ nhập đầy đủ thông tin về
email,tên người nhận, địa chỉ nhận hàng
để hàng hóa sẽ chuyển đúng nơi.

Sau khi thanh toán đơn hàng khách hàng

sẽ nhận được thông tin chi tiết đơn hàng
thông qua email do hệ thống gửi về.
10 Đăng nhập Chức năng cho phép Admin, nhân viên,
T r a n g 9 | 63
`
 khách hàng đều có thể đăng nhập sử dụng
các chức năng của họ.
Đăng ký Chức năng cho phép Admin có thể đăng
11 ký tài khoản cho nhân viên, khách hàng
có thể đăng ký tài khoản cho riêng mình
để đăng nhập.
Bảng 1: Yêu cầu chức năng

2.2 Các hệ thống cơ bản:

 Hệ thống quản lý sản phẩm: Đây là hệ thống giúp quản lý thông tin về sản phẩm, bao
gồm tên sản phẩm, mô tả, ảnh sản phẩm, giá cả, kích thước, màu sắc và số lượng sản
phẩm có sẵn.
 Hệ thống quản lý đơn hàng: Đây là hệ thống giúp quản lý đơn hàng của khách hàng, bao
gồm thông tin về khách hàng, sản phẩm được đặt mua, số lượng, giá cả và trạng thái đơn
hàng (đã thanh toán, đang chờ xử lý, đang vận chuyển, đã giao hàng).
 Hệ thống thanh toán trực tuyến: Đây là hệ thống giúp khách hàng thanh toán cho đơn
hàng bằng các phương thức thanh toán trực tuyến như thẻ tín dụng, ví điện tử hoặc
chuyển khoản ngân hàng.
 Hệ thống quản lý tài khoản: Đây là hệ thống giúp quản lý thông tin của khách hàng, bao
gồm thông tin cá nhân, địa chỉ, lịch sử mua hàng, đơn hàng đang chờ xử lý và trạng thái
đơn hàng đã mua.
 Hệ thống hiển thị và tìm kiếm sản phẩm :Đây là hệ thống giúp người dùng xem và tìm
kiếm được những sản phẩm có trong trang web 1 cách nhanh chóng .Xem được chi tiết
của sản phẩm mình lựa chọn .

3 Công cụ hổ trợ

3.1 Xampp:

XAMPP là một gói phần mềm mã nguồn mở miễn phí, giúp tạo môi trường phát triển và
triển khai các ứng dụng web trên máy tính cá nhân của người dùng. Các thành phần chính
của XAMPP bao gồm hệ thống quản lý cơ sở dữ liệu MySQL, máy chủ web Apache, trình
thông dịch PHP và Perl, và một số công cụ hữu ích khác như phpMyAdmin, OpenSSL, và
FileZilla FTP Server.
Các ứng dụng web được xây dựng bằng các ngôn ngữ như PHP, Perl, Ruby, Python, có thể
được phát triển trên XAMPP và chạy trên môi trường localhost trên máy tính của người

T r a n g 10 | 63
`
dùng. Điều này giúp cho nhà phát triển có thể dễ dàng phát triển và kiểm thử các ứng dụng
web trước khi triển khai chúng lên môi trường web thực tế.
XAMPP cũng cung cấp cho người dùng một giao diện đơn giản và thân thiện để quản lý cơ
sở dữ liệu MySQL và quản lý các tệp tin trong thư mục htdocs. Điều này giúp cho việc phát
triển và quản lý các ứng dụng web trở nên dễ dàng hơn cho người dùng.
Với XAMPP, người dùng không cần phải cài đặt các thành phần của một môi trường phát
triển web một cách riêng lẻ trên máy tính của mình, mà thay vào đó có thể sử dụng một gói
phần mềm đầy đủ tính năng như XAMPP để tiết kiệm thời gian và công sức trong quá trình
phát triển và triển khai các ứng dụng web.

3.2 Visual Studio Code:

Visual Studio Code (viết tắt là VS Code) là một trình biên tập mã nguồn mở, miễn
phí và được phát triển bởi Microsoft. VS Code được thiết kế để hỗ trợ phát triển ứng
dụng web, nhưng cũng có thể được sử dụng để phát triển các ứng dụng khác như ứng
dụng di động và máy tính để bàn.
VS Code được tích hợp với một loạt các tính năng hữu ích như:
Hỗ trợ đa ngôn ngữ lập trình như C++, C#, Java, JavaScript, PHP, Python, Ruby, HTML,
CSS, v.v.
Hỗ trợ tạo và quản lý các dự án và tệp mã nguồn.
Hỗ trợ tính năng debugging và testing, giúp phát hiện và khắc phục các lỗi trong mã nguồn.
Hỗ trợ tính năng linter giúp kiểm tra cú pháp và định dạng mã nguồn.
Có thể sử dụng các extension của cộng đồng người dùng để mở rộng chức năng của trình
biên tập.
VS Code cũng có giao diện thân thiện và dễ sử dụng, với một loạt các phím tắt để giúp tăng
tốc độ lập trình. Ngoài ra, VS Code cũng được tích hợp với Git, cho phép người dùng quản
lý phiên bản và thực hiện các thao tác với kho lưu trữ của Git từ giao diện của trình biên
tập.
Tổng quan lại, VS Code là một trình biên tập mã nguồn mở miễn phí với nhiều tính năng
hữu ích và được cộng đồng người dùng hỗ trợ mở rộng chức năng thông qua các extension.

3.3 Bootstrap 5

Bootstrap 5 là một framework CSS phổ biến được sử dụng để phát triển giao diện web. Nó
cung cấp một bộ công cụ và tài nguyên sẵn có để tạo ra các trang web đáp ứng, hỗ trợ nhiều
thiết bị và trình duyệt khác nhau.
Khái niệm của Bootstrap 5:
Responsive Grid System: Bootstrap 5 cung cấp một hệ thống lưới đáp ứng linh hoạt, giúp
thiết kế web dễ dàng trên các thiết bị khác nhau như máy tính để bàn, máy tính bảng và điện
thoại di động.

T r a n g 11 | 63
`
CSS Components: Bootstrap 5 đi kèm với một loạt các thành phần CSS được thiết kế sẵn
như nút, menu, biểu mẫu, bảng, thẻ, carousel và nhiều hơn nữa. Những thành phần này giúp
xây dựng giao diện web nhanh chóng và dễ dàng.
JavaScript Plugins: Bootstrap 5 cung cấp các plugin JavaScript sẵn có như tooltip, modal,
collapse, carousel, và nhiều hơn nữa. Những plugin này giúp thêm tính năng tương tác động
vào trang web của bạn mà không cần viết mã JavaScript tùy chỉnh.
Thiết kế sạch và hiện đại: Bootstrap 5 có một giao diện mặc định đơn giản, tối giản và hiện
đại. Nó tuân thủ các nguyên tắc thiết kế sạch và giúp trang web của bạn trông chuyên
nghiệp và hấp dẫn.
Ưu điểm của Bootstrap 5:
Độ phổ biến và cộng đồng lớn: Bootstrap 5 là một framework phổ biến được sử dụng rộng
rãi trên toàn cầu. Điều này có nghĩa là bạn có thể dễ dàng tìm kiếm tài liệu, hỗ trợ và nguồn
lực từ cộng đồng sử dụng Bootstrap.
Tiết kiệm thời gian và công sức: Bootstrap 5 cung cấp các mẫu, giao diện và thành phần
CSS và JavaScript sẵn có, giúp bạn tiết kiệm thời gian và công sức trong việc phát triển
giao diện web.
Đáp ứng và tương thích trình duyệt tốt: Bootstrap 5 được thiết kế để tương thích với nhiều
trình duyệt và thiết bị khác nhau. Điều này giúp đảm bảo rằng trang web của bạn sẽ hoạt
động tốt trên mọi nền tảng.
Linh hoạt và dễ tùy chỉnh: Bootstrap 5 cho phép bạn tùy chỉnh và điều chỉnh giao diện web
dễ dàng thông qua CSS và các biến tùy chỉnh. Bạn có thể tuỳ chỉnh các thành phần theo ý
muốn và tạo ra giao diện riêng của mình.
Nhược điểm của Bootstrap 5:
Giao diện phổ biến: Vì Bootstrap 5 được sử dụng rộng rãi, có thể dẫn đến việc các trang
web sử dụng Bootstrap trông giống nhau. Điều này có thể làm mất đi sự độc đáo và cá nhân
hóa của trang web.
Kích thước tệp tin lớn: Bootstrap 5 có kích thước tệp tin lớn hơn so với việc viết CSS tùy
chỉnh từ đầu. Điều này có thể ảnh hưởng đến thời gian tải trang và tốc độ hiển thị.
Cần hiểu rõ: Mặc dù Bootstrap 5 rất dễ sử dụng, nhưng để tận dụng hết tiềm năng của nó,
bạn cần hiểu rõ về cách framework hoạt động và cách sử dụng các lớp và thành phần của
nó.

3.4 JQuery

jQuery là một thư viện JavaScript được thiết kế đơn giản hóa thao tác HTML DOM, cũng
như xử lý sự kiện, hoạt ảnh CSS, và Ajax.[3]

JQuery là một thư viện rất phổ biến và được sử dụng trong nhiều ứng dụng web. Nó là một
công cụ hữu ích cho các lập trình viên JavaScript ở mọi trình độ kinh nghiệm.

T r a n g 12 | 63
`
Dưới đây là một số lợi ích của việc sử dụng JQuery:

 Đơn giản hóa việc lập trình JavaScript: JQuery cung cấp một bộ các hàm và phương
thức được định sẵn giúp đơn giản hóa việc lập trình JavaScript, đặc biệt là khi thao
tác với tài liệu HTML và CSS.
 Tăng hiệu suất: JQuery được tối ưu hóa để tăng hiệu suất của ứng dụng web.
 Tăng khả năng mở rộng: JQuery có thể được mở rộng bằng các plugin của bên thứ
ba.

JQuery là một công cụ mạnh mẽ có thể giúp các lập trình viên JavaScript tạo ra các ứng
dụng web hấp dẫn và hiệu quả hơn.

3.5 AJAX
AJAX là chữ viết tắt của cụm từ Asynchronous Javascript and XML. AJAX là
phương thức trao đổi dữ liệu với máy chủ và cập nhật một hay nhiều phần của web trang,
hoàn toàn không reload lại toàn bộ trang.
Ajax được viết bằng Javascript chạy trên client, tức là mỗi browser sẽ chạy độc lập
hoàn toàn không ảnh hưởng lẫn nhau. Về mặt kỹ thuật, nó đề cập đến việc sử dụng các đối
tượng XmlHttpRequest để tương tác với một máy chủ web thông qua Javascript.
Những lợi ích mà AJAX mang lại:
- AJAX được sử dụng để thực hiện một callback. Được dùng để thực hiện việc truy xuất
dữ liệu hoặc lưu trữ dữ liệu mà không cần phải reload lại toàn bộ trang web. Với những
server nhỏ thì việc này cũng tiết kiệm được băng thông cho chúng ta hơn.
- Cần gì thì chỉ gửi dữ liệu phần đó, load lại 1 phần nhỏ để cập nhật thông tin chứ không
load cả trang. Bằng cách này thì có thể giảm thiểu được tốc độ tải trang giúp người dùng
có trải nghiệm tốt hơn.
Trang web bạn tạo ra cũng sẽ đa dạng và động hơn

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

4.1 HTML(HyperText Markup Language):

- Khái niệm: HTML là ngôn ngữ đánh dấu siêu văn bản được sử dụng để tạo nội dung trên
trang web. HTML cho phép người dùng định nghĩa và tổ chức các phần tử trên trang web,
bao gồm văn bản, hình ảnh, âm thanh, video, các liên kết, các biểu mẫu nhập liệu và các
thành phần khác.
- Ưu điểm của HTML:

T r a n g 13 | 63
`
+ Dễ học: HTML là một ngôn ngữ đơn giản và dễ hiểu, vì vậy người mới bắt đầu có thể dễ
dàng học và sử dụng nó. Nó cung cấp cho người dùng các thẻ và thuộc tính để định dạng và
hiển thị các phần tử trên trang web, từ đó giúp tối ưu hóa trải nghiệm người dùng trên nền
tảng web.
+ Độc lập nền tảng: HTML hoạt động trên nhiều nền tảng và trình duyệt khác nhau, giúp
cho các trang web được phát triển có thể hiển thị đồng nhất trên các thiết bị và trình duyệt
khác nhau.
+ Linh hoạt: HTML cho phép người dùng tạo ra các trang web đa dạng và linh hoạt với các
thành phần khác nhau như hình ảnh, video, âm thanh, văn bản, biểu mẫu và các thành phần
khác.
- Nhược điểm của HTML:
+ Giới hạn chức năng: HTML chỉ có thể tạo ra các trang web tĩnh, tức là không có tính năng
động hoặc tương tác với người dùng. Tuy nhiên, với sự kết hợp của các ngôn ngữ lập trình
phía client và server, các trang web có tính năng động và tương tác có thể được tạo ra bằng
sử dụng HTML.
+ Khó khăn trong việc tạo các giao diện đẹp mắt: HTML không thể đem lại các hiệu
ứng tuyệt đẹp như CSS và JavaScript, điều này dẫn đến khó khăn trong việc thiết kế
các giao diện web đẹp mắt và tương tác hấp dẫn. Bởi vì HTML chỉ là một ngôn ngữ
đánh dấu để định dạng và hiển thị nội dung, và nó không cung cấp các tính năng
tương tác phức tạp. Tuy nhiên, HTML vẫn rất quan trọng trong việc tạo ra các trang
web tĩnh và đơn giản, và nó là một bước đầu tiên cần thiết cho việc học các ngôn ngữ
lập trình web khác như CSS và JavaScript.
+ Khả năng bảo mật hạn chế: Mặc dù HTML là một ngôn ngữ phổ biến cho thiết kế
web, tuy nhiên nó không cung cấp các tính năng bảo mật tương đương với các ngôn
ngữ lập trình khác. Vì vậy, nếu không được áp dụng các biện pháp bảo mật thích
hợp, trang web HTML có thể dễ dàng bị tấn công bởi các hacker và phần mềm độc
hại.

4.2 CSS(Cascading Style Sheets):

- Khái niệm: CSS là ngôn ngữ định dạng trang web được sử dụng để tạo kiểu cho các phần
tử HTML, bao gồm màu sắc, font chữ, khoảng cách, kích thước và vị trí của các phần tử
trên trang web. CSS giúp cho các trang web trông chuyên nghiệp hơn và có thể điều chỉnh
các thành phần trên trang web một cách nhanh chóng và dễ dàng.
- Ưu điểm của CSS:
+ Tách biệt nội dung và kiểu dáng: CSS cho phép tách biệt nội dung và kiểu dáng của trang
web, điều này giúp cho các nhà thiết kế có thể dễ dàng chỉnh sửa các phần tử kiểu dáng mà
không ảnh hưởng đến nội dung.
+ Tăng tốc tải trang web: CSS có thể giúp giảm kích thước của các tập tin HTML và làm
tăng tốc tải trang web.

T r a n g 14 | 63
`
+ Tăng tính linh hoạt: CSS cho phép người dùng thay đổi kiểu dáng của trang web một cách
dễ dàng mà không cần phải thay đổi nội dung, giúp cho việc chỉnh sửa trang web trở nên
nhanh chóng và linh hoạt hơn.
- Nhược điểm của CSS:
+ Khó khăn trong việc học: CSS có nhiều khái niệm và cú pháp phức tạp, điều này có thể
làm cho việc học và sử dụng nó khó khăn đối với những người mới bắt đầu.
+ Phụ thuộc vào trình duyệt: Một số tính năng CSS có thể không hoạt động trên một số
trình duyệt, điều này có thể gây ra sự khác biệt giữa các phiên bản trình duyệt khác nhau.
+ Không hoàn toàn tách biệt nội dung và kiểu dáng: Mặc dù CSS cho phép tách biệt nội
dung và kiểu dáng của trang web, nhưng việc sử dụng quá nhiều lớp và định dạng khác
nhau có thể làm cho mã HTML trở nên khó đọc và khó hiểu.

4.3 PHP(Hypertext Preprocessor)

- Khái niệm: PHP là một ngôn ngữ lập trình mã nguồn mở được sử dụng phổ biến cho phía
máy chủ web. Nó được thiết kế đặc biệt để xây dựng các ứng dụng web động và trang web
tĩnh.
- Ưu điểm của PHP:
+ Dễ học và sử dụng: Với cú pháp đơn giản và dễ hiểu, PHP là ngôn ngữ lập trình lý tưởng
cho những người mới bắt đầu học về lập trình, không chỉ giúp họ nhanh chóng tiếp cận mà
còn giúp phát triển các ứng dụng web đa dạng và phong phú. Tính tiện lợi của PHP chắc
chắn là một trong những điểm mạnh của ngôn ngữ này, giúp cho việc xây dựng các trang
web chất lượng cao đơn giản hơn bao giờ hết.
+ Mã nguồn mở: Với cộng đồng phát triển lớn và tính linh hoạt cao, cho phép người dùng
có thể tùy chỉnh và phát triển các ứng dụng web phức tạp theo nhu cầu của mình. Với tính
năng miễn phí và sửa đổi mã nguồn một cách dễ dàng, PHP đã trở thành một công cụ hữu
ích cho các nhà phát triển ứng dụng web trên toàn thế giới.
+ Tương thích với nhiều hệ thống: Nó có thể hoạt động trên hầu hết các hệ thống máy chủ
web như Apache, Nginx và IIS và tương thích với nhiều hệ thống cơ sở dữ liệu phổ biến
như MySQL, PostgreSQL và Oracle. Điều này giúp các nhà phát triển có thể tùy chọn các
công cụ tối ưu nhất để xây dựng các ứng dụng web hoặc trang web cho nhiều nền tảng và
môi trường khác nhau.
+ Hỗ trợ mạnh mẽ cho web: PHP được lên kế hoạch riêng biệt để đáp ứng yêu cầu của ứng
dụng web, giúp kết nối với các thành phần như HTML, CSS và JavaScript để sản xuất
những trang web động, tương tác và chuyên nghiệp hơn. Việc sử dụng PHP mang lại khả
năng xử lý tối ưu, giúp công việc thiết kế và phát triển trang mạng trở nên dễ dàng và hiệu
quả hơn nhiều.
- Nhược điểm của ngôn ngữ PHP:
+ Hiệu suất thấp: So sánh với một số ngôn ngữ lập trình khác như Java hay C#, PHP thường
có tốc độ xử lý các ứng dụng web chậm hơn.

T r a n g 15 | 63
`
+ Quản lí mã khó khăn: Khi đối mặt với những dự án quy mô lớn, việc quản lý mã nguồn
của PHP có thể trở nên vô cùng phức tạp và gian nan đến nỗi việc thiếu sự tổ chức kỹ lưỡng
và các tiêu chuẩn mã nguồn không được đồng nhất có thể xảy ra. Việc này có thể gây ra
nhiều khó khăn và trở ngại trong quá trình phát triển và bảo trì dự án, đòi hỏi sự cẩn trọng
và khéo léo trong việc quản lý, điều chỉnh và cập nhật mã nguồn.
+ Bảo mật không đảm bảo: Nếu việc đảm bảo an ninh thông tin không được thực hiện đúng
đắn, có thể dẫn đến những hậu quả nghiêm trọng như bị chiếm quyền truy cập trái phép,
mất thông tin quan trọng, hoặc lộ thông tin cá nhân của người dùng. Vì vậy, việc để ý và
hạn chế các lỗ hổng bảo mật để đảm bảo an toàn thông tin là vô cùng cần thiết và quan
trọng.

4.4 SQL (Structured Query Language)

Là một ngôn ngữ lập trình dùng để truy vấn và quản lý cơ sở dữ liệu quan hệ (RDBMS -
Relational Database Management System). SQL được phát triển vào cuối những năm 1970
và đã trở thành tiêu chuẩn trong việc truy vấn cơ sở dữ liệu.
SQL bao gồm một tập hợp các câu lệnh để truy vấn và cập nhật dữ liệu trong cơ sở dữ liệu.
Các câu lệnh SQL chủ yếu được chia thành các loại sau:
DDL (Data Definition Language): Các câu lệnh DDL được sử dụng để tạo, thay đổi hoặc
xóa cấu trúc của cơ sở dữ liệu. Ví dụ như tạo bảng, chỉnh sửa thuộc tính của bảng, tạo quan
hệ giữa các bảng.
DML (Data Manipulation Language): Các câu lệnh DML được sử dụng để truy vấn và thay
đổi dữ liệu trong bảng. Ví dụ như thêm dữ liệu vào bảng, cập nhật dữ liệu trong bảng, xóa
dữ liệu khỏi bảng.
DQL (Data Query Language): Các câu lệnh DQL được sử dụng để truy vấn dữ liệu từ bảng.
Ví dụ như truy vấn dữ liệu từ bảng theo điều kiện nào đó, sắp xếp dữ liệu, thống kê dữ
liệu, ...
DCL (Data Control Language): Các câu lệnh DCL được sử dụng để quản lý quyền truy cập
vào cơ sở dữ liệu. Ví dụ như tạo người dùng mới, phân quyền truy cập cho người dùng, thu
hồi quyền truy cập của người dùng, ...
SQL là một trong những ngôn ngữ phổ biến nhất trong việc quản lý cơ sở dữ liệu quan hệ
và được sử dụng trong nhiều lĩnh vực như lập trình web, phân tích dữ liệu, kinh doanh, quản
lý dữ liệu, v.v.

T r a n g 16 | 63
`
4.5 JavaScript

JavaScript là một ngôn ngữ lập trình phía máy khách phổ biến được sử dụng để phát triển
ứng dụng web. Dưới đây là một số ưu điểm và nhược điểm của

Ưu điểm:
Tích hợp tốt trong môi trường web: JavaScript được hỗ trợ trực tiếp trong các trình duyệt
web phổ biến, điều này cho phép lập trình viên tạo ra các ứng dụng tương tác trên trình
duyệt mà không cần cài đặt phần mềm bổ sung.
Dễ học và triển khai: JavaScript có cú pháp giống với nhiều ngôn ngữ lập trình khác, nhưng
nó có một hệ sinh thái mạnh mẽ và cộng đồng phát triển lớn, giúp giảm thiểu thời gian học
và triển khai ứng dụng.
Xử lý sự kiện và tương tác người dùng: JavaScript cho phép xử lý sự kiện và tương tác
người dùng trên trình duyệt một cách dễ dàng. Nó cung cấp các API để thao tác với các
phần tử HTML, thay đổi nội dung động và tạo ra hiệu ứng tương tác.
Đa nền tảng: JavaScript có thể chạy trên nhiều nền tảng, bao gồm cả máy tính, điện thoại di
động và các thiết bị nhúng.
Cộng đồng phát triển mạnh mẽ: JavaScript có một cộng đồng lập trình viên rộng lớn, đầy đủ
tài liệu, thư viện và framework hỗ trợ. Điều này giúp lập trình viên nhanh chóng giải quyết
vấn đề và tận dụng các tài nguyên có sẵn.

Nhược điểm:
Bảo mật: Vì JavaScript chạy phía máy khách, mã nguồn JavaScript của ứng dụng có thể
được truy cập và chỉnh sửa bởi người dùng. Điều này có thể tạo ra các vấn đề về bảo mật, ví
dụ như lỗ hổng bảo mật hoặc mã độc.
Hiệu suất: JavaScript có thể chạy chậm hơn so với các ngôn ngữ lập trình phía máy chủ,
như C++ hoặc Java, đặc biệt là khi xử lý các phép toán phức tạp hoặc tải dữ liệu lớn.

5. Các bước tiến hành

- Để có thể tạo ra một trang website hoàn chỉnh, chúng ta cần phải thực hiện một số các
bước sau:
+ Bước 1: Lên kế hoạch: Để có được một trang web hiệu quả, việc xác định mục đích cũng
như đối tượng khách hàng tiềm năng và nội dung sẽ là yếu tố cốt lõi quan trọng. Bằng cách
đó, chúng ta sẽ có thể thiết kế một giao diện hấp dẫn và tính năng phù hợp, từ đó tối ưu hóa
trải nghiệm của người dùng và tiếp cận, phổ biến đến mọi người rộng hơn.
+ Bước 2: Thu thập thông tin: Để đáp ứng nhu cầu của khách hàng, chúng ta cần tiến hành
thu thập hàng loạt thông tin từ nhiều nguồn khác nhau và xung quanh các vấn đề cần làm
T r a n g 17 | 63
`
như: thực đơn, các khoản chi phí, những hình ảnh chân thực cùng video sống động, và
nhiều thứ khác nữa. Tất cả nhằm mục đích mang lại sự tiện lợi và hài lòng tuyệt đối cho quý
khách hàng.
+ Bước 3: Thiết kế giao diện: Để tạo ra một trang web hấp dẫn và dễ sử dụng, rất quan
trọng để thiết kế bố cục, sử dụng màu sắc và phông chữ một cách hiệu quả, cùng với việc
chèn hình ảnh phù hợp. Việc đầu tiên đó là thiết kế bố cục sao cho các phần trang web có sự
sắp đặt hợp lý, tạo nên một cấu trúc dễ nhìn và truy cập. Màu sắc cũng rất quan trọng, bởi vì
chúng có thể tạo ra một không gian trang web thú vị và hấp dẫn hoặc ngược lại, trở thành
một rào cản đối với người dùng. Ngoài ra, việc sử dụng phông chữ đúng cách có thể giúp
tăng tính đồng nhất và độ lôi cuốn cho trang web. Cuối cùng, hình ảnh cũng là một yếu tố
quan trọng để thu hút sự chú ý của người dùng và tạo ra một trải nghiệm trực quan và thú
vị.
+ Bước 4: Phát triển mã: Bằng việc sử dụng các ngôn ngữ lập trình phổ biến như HTML,
CSS, JavaScript,Database,SQL,Xampp và PHP, chúng ta có khả năng phát triển trang web
đầy đủ chức năng và custome hóa tùy ý. Tuy nhiên, nếu muốn tạo trang web một cách
nhanh chóng, thì sử dụng các trình quản lý nội dung (CMS) như WordPress hoặc Drupal
cũng là một lựa chọn thông minh để tiết kiệm thời gian và cải thiện hiệu suất trang web.
+ Bước 5: Kiểm thử: Để đảm bảo rằng trang web của mình đang hoạt động một cách tối ưu
trên nhiều trình duyệt và thiết bị khác nhau, chúng ta nên thường xuyên tiến hành kiểm tra
và sửa chữa các vấn đề kỹ thuật có thể phát sinh. Việc này giúp đảm bảo rằng tất cả người
dùng có trải nghiệm truy cập trang web tốt nhất có thể, không phụ thuộc vào phần cứng và
phần mềm cụ thể mà họ đang sử dụng.
+ Bước 6: Triển khai: Sử dụng Xampp để tạo 1 trang Localhost trên tính và PHPmysql để
kết nối cơ sở dữ liệu cho trang wed.
+ Bước 7: Quản lí và bảo trì và cải tiến: Sau một thời gian hoạt động thì website có thể sẽ
xuất hiện một số lỗi. Chính vì thế việc quản lí và bảo trì là hoạt động nên làm thường xuyên
để tránh những rủi ro không nên xảy ra.Tiếp thu ý kiến để update sản phẩm sau này

T r a n g 18 | 63
`
Chương II :Phân Tích và thiết kế hệ thống
website
1 Mô tả bài bài toán
Website thương mại điện tử về thời trang
₋Người quản trị nắm được tình hình mua bán, lưu trữ hàng hóa, doanh thu của
website, thống kê thông tin mua bán theo hàng tháng, hàng quí và hiển thị trên trang admin.
Trang web sẽ là người giới thiệu cho khách hàng.
₋Việc mua bán mô hình sẽ được thực hiện như sau:
₋Người quản lý sẽ quản lý tài khoản của khách, thông tin khách hàng, các danh mục ,
thương hiệu, sản phẩm , xác nhận đơn hàng.
₋Người quản lý thông qua tính năng của web hoặc khách liên hệ đến để tư vấn
cho khách.
₋Khách hàng sử dụng tính năng của website để đăng ký/đăng nhập, lựa chọn loại
hình sản phẩm, tìm kiếm các mặt hàng.
₋Khi khách hàng cảm thấy ưng ý sản phẩm nào khách hàng sẽ thêm sản phẩm
vào giỏ hàng sau đó chọn đặt hàng, trang web sẽ hiển thị khách hàng cần nhập thông tin địa
chỉ giao hàng và xác nhận đơn hàng. Thông tin đơn hàng sẽ được người quản lý kiểm duyệt
và xác nhận. Khách hàng muốn kiểm tra thông tin đơn hàng có thể vào quản lý đơn hàng
xem lại những đơn hàng mình đã đặt.
₋Người quản lý sẽ có chức năng thêm, xóa, cập nhật thông tin thông tin loại
hàng, thương hiệu, sản phẩm. Ngoài ra người quản lý còn xác nhận đơn hàng khi khách
hàng đặt hàng từ trang web của mình, khách hàng sẽ đặt hàng và được người quản lý xác
nhận, khi xác nhận xong người quản lý sẽ giao hàng, khi giao xong sẽ để trạng thái đơn
hàng là đã nhận.

T r a n g 19 | 63
`
 2 Thiết kế cơ sở dữ liệu
2.1 Mô hình liên kết thực thể(E – R)

Kiểu
STT Thuộc tính Thuộc tính khóa
thực thể
1 admin Id_admin,email , password. Id_admin

2 user Id_user,email,full_name,password Id_user

User Id_user, email, full_name,dia_chi , std , gioi_tinh ,ngay_sinh

2 Id_user
detial , CCCD , img

Id_product ,name,img,price,quantity,describe, id_ category,

3 products id_item
id_ brand

4 order id_order, id_user , dia_chi, total_price, time, status Id_donhang

order id_od , id_order, id_product, quantity, size , unit_price, retail

5 id_od
details price

6 brand Id_brand, namebrand, img. Id_brand

7 category Id_category, name_category, size, img Id_category

8 comment Id_comment ,id_product, id_user,comment_content ,time Id_comment

Hình 2.1: Bảng dữ liệu toàn bộ các bảng có trong trang web

T r a n g 20 | 63
`
2.2 Mô hình quan hệ

Hình 2 Mô hình Diagram cơ sở dữ liệu

T r a n g 21 | 63
`
2.1 Biểu đồ use case

2.1.1 Các use case chính

Hình 3 Use case chính

Hình2.2.1: Use case chính

T r a n g 22 | 63
`
2.1.2 Quan hệ giữa các use case
Quản lý giỏ hàng:

Hình 4 Quản lý giỏ hàng

T r a n g 23 | 63
`
Quản lý đơn hàng:

Hình 5 :Quản lý đơn hàng

Quản lý sản phẩm:

T r a n g 24 | 63
`
 Hình 6 Quản lý sản phẩm

4 nếu trạng thái sản phẩm bằng 0 thì nút xóa sẽ không hiển thị.
Tiền điều kiện: Tài khoản đăng nhập phải mang quyền admin hoặc nhân viên.
Hậu điều kiện: Người dùng đã cập nhật sản phẩm thành công.
Các yêu cầu đặc biệt: Không có.
Điểm mở rộng: Không có.
2.2.4 Quản lý hóa đơn
Mô tả vắn tắt:
Use case này cho phép người dùng (admin) sửa trạng thái hóa đơn.
Luồng sự kiện:

- Luồng cơ bản:

1. Use case này bắt đầu người dùng chọn mục danh sách hóa đơn. Hệ thống sẽ hiển thị
danh sách đơn hàng trong bảng hoadon.
2. Thanh toán: Người dùng nhấn nút thanh toán, hệ thống sẽ cập nhật trạng thái của
hóa đơn đó thành 1 trong bảng hoadon và hiện thị lại danh sách hóa đơn.

- Luồng rẽ nhánh:

T r a n g 25 | 63
`
 1. Tại luồng cơ bản 2 nếu người dùng nhấn nút thoát Use case kết thúc.
Tiền điều kiện: Tài khoản phải đăng nhập với quyền quản trị hoặc nhân viên.
Hậu điều kiện: Người dùng đã cập nhật đơn hàng thành công.
Các yêu cầu đặc biệt: Không có.
Điểm mở rộng: Không có.
1
Mô tả vắn tắt:
Use case này cho phép khách hàng (người mua hàng) thanh toán sản phẩm trong giỏ
hàng.
Luồng sự kiện:

- Luồng cơ bản:

1. Use case này bắt đầu khách hàng nhấn vào nút đặt hàng trong giỏ hàng. Hệ thống sẽ
hiển thị form đặt hàng.
2. Khách hàng nhập thông tin cá nhân (tên, số điện thoại, email, địa chỉ, ghi chú), chọn
hình thức thanh toán và nhấn vào nút xác nhận hệ thống kiểm tra thông tin và thêm
vào bảng hoadon và hoadonchitiet. Use case kết thúc.

- Luồng rẽ nhánh:

Tại luồng cơ bản 2 nếu thông tin khách hàng nhập vào không hợp lệ hệ thống sẽ
thông báo lỗi và yêu cầu nhập lại, khách hàng tiếp tục nhập hoặc thoát. Use case kết
thúc.
Tiền điều kiện: Trong giỏ hàng phải có sản phẩm và khách hàng phải đã đăng
nhập.
Hậu điều kiện: Khách hàng đã cập nhật giỏ hàng thành công.
Các yêu cầu đặc biệt: Không có.
Điểm mở rộng: Không có.
2.2.6 Quản lý giỏ hàng
Mô tả vắn tắt:

T r a n g 26 | 63
`
 Use case này cho phép khách hàng (người mua hàng) xem, sửa số lượng sản
phẩm, xóa sản phẩm khỏi giỏ hàng.
Luồng sự kiện:
Luồng cơ bản:
Xem giỏ hàng: Use case này bắt đầu khách hàng chọn giỏ hàng hoặc nhấn vào
nút đặt hàng. Hệ thống sẽ hiển thị giỏ hàng.
Sửa số lượng sản phẩm trong giỏ hàng: Khách hàng lựa chọn số lượng sản phẩm
theo ý, hệ thống sẽ tự động cập nhật lại số lượng và giá để hiển thị. Use case kết
thúc.
Xóa sản phẩm trong giỏ hàng:
Khách hàng click vào nút “ x”trong giỏ hàng, hệ thống sẽ xóa sản phẩm ra khỏi
giỏ hàng và hiển thị lại. Use case kết thúc.
Luồng rẽ nhánh:
Tại luồng cơ bản 1 nếu giỏ hàng không có sản phẩm thì hệ thống sẽ hiển thì
thông báo giỏ hàng trống.Nếu khách hàng nhấn nút thoát Use case kết thúc.
Tiền điều kiện: Trong giỏ hàng phải có sản phẩm.
Hậu điều kiện: Khách hàng đã cập nhật giỏ hàng thành công.
Các yêu cầu đặc biệt: Không có.
Điểm mở rộng: Không có.
2.2.7 Quản lý khách hàng
Mô tả vắn tắt:
Use case này cho phép admin xem danh sách khách hàng.
Luồng sự kiện:
Luồng cơ bản:
Use case này bắt đầu khi người dùng (adminnhấn vào nút danh sách khách hàng
trong menu khách hàng, hệ thống hiển thị danh sách các khách hàng trong bảng
users lên màn hình.
Luồng rẽ nhánh:
Khi người dùng nhấn nút thoát thì Use case kết thúc.
Tiền điều kiện: Tài khoản đăng nhập phải mang quyền admin,nhân viên .
Hậu điều kiện: Không có.
T r a n g 27 | 63
`
 Các yêu cầu đặc biệt: Không có.
Điểm mở rộng: Không có.
2.2.8 Tìm kiếm sản phẩm
Mô tả vắn tắt:
Use case này cho khách hàng tìm kiếm nhanh chóng sản phẩm mình mong muốn.
Luồng sự kiện:
Luồng cơ bản:
Use case này bắt đầu khi khách hàng click con trỏ chuột vào ô nhập thông tin,
khách hàng sẽ nhập tên sản phẩm. Khi khách hàng nhấn nút tìm kiếm thì hệ
thống sẽ hiện thị danh sách sản phẩm tương ứng với ô tìm kiếm.
Luồng rẽ nhánh: Khi khách hàng nhấn nút thoát hoặc trang chủ thì Use case kết
thúc.
Tiền điều kiện: không có.
Hậu điều kiện: Không có.
Các yêu cầu đặc biệt: Không có.
Điểm mở rộng: Không có.
2.2.9 Bình luận
Mô tả vắn tắt:
Use case cho phép khách hàng bình luân về sản phẩm.
Luồng sự kiện:
Luồng cơ bản:
Use case này bắt đầu khách hàng thành viên nhập thông tin ô bình luận và nhấn
vào nút Comment, hệ thống sẽ hiện thị Comment của khách hàng lên màn hình.
Luồng rẽ nhánh: Nếu khách hàng nhấn nút trang chủ hoặc nút thoát thì Use case
kết thúc.
Tiền điều kiện: Khách hàng đã đăng nhập.
Hậu điều kiện: Khách hàng thêm bình luận vào bảng comment.
Các yêu cầu đặc biệt: Không có.
Điểm mở rộng: Không có.

T r a n g 28 | 63
`
2.3 Biểu đồ trình tự
2.3.1 Use case đăng nhập

- Biểu đồ trình tự

Hình 7: Biểu đồ trình tự đăng nhập

2.3.2 Use case đăng ký

- Biểu đồ trình tự

Hình 8 Biểu đồ trình tự đăng ký

T r a n g 29 | 63
`
2.3.3 Use case tìm kiếm
- Biểu đồ trình tự

Hình 9 : Biểu đồ trình tự tìm kiếm

2.3.4 Use case đặt hàng

- Biểu đồ trình tự

T r a n g 30 | 63
`
 Hình 10 Hình 2.3.4: Biểu đồ trình tự đặt hàng

T r a n g 31 | 63
`
2.3.5 Use case giỏ hàng
- Biểu đồ trình tự

Hình 11 Biểu đồ trình tự giỏ hàng

T r a n g 32 | 63
`
2.5 Biểu đồ hoạt động
2.5.1 Tìm kiếm sản phẩm

Hình 12 H:Biểu đồ hoạt động tìm kiếm sản phẩm

2.5.2 Lọc chi tiết sản phẩm

T r a n g 33 | 63
` Hình 13 Biểu đồ hoạt động lọc chi tiết sản phẩm
 2.5.3 Đăng ký

Hình 14:Biểu đồ hoạt động đăng ký

2.5.4 Đăng nhập

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

T r a n g 34 | 63
`
 2.5.5 Đăng xuất

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

2.5.6 Thay đổi thông tin người dùng

Hình 17- Biểu đồ hoạt động thay đổi thông tin người dùng
T r a n g 35 | 63
`
2.5.7 Liên hệ

Hình 18 - Biểu đồ hoạt động liên hệ

2.5.8Thanh toán

Hình 19 Biểu đồ hoạt động thanh toán

T r a n g 36 | 63
`
 2.5.9Xem tin tức

Hình 20 Biểu đồ hoạt động xem tin tức

2.5.10 Xem tình trạng đơn hàng

Hình 21 Biểu đồ hoạt động xem tình trạng đơn hàng

T r a n g 37 | 63
`
 2.5.11 Quản lý đơn hàng

Hình 22- Biểu đồ hoạt động quản lý đơn hàng

T r a n g 38 | 63
`
 2.5.12 Quản lý sản phẩm

Hình 23 - Biểu đồ hoạt động quản lý sản phẩm

T r a n g 39 | 63
`
 2.5.13 Quản lý nhà sản xuất

Hình 24. - Biểu đồ hoạt động quản lý nhà sản xuất

T r a n g 40 | 63
`
 2.5.14 Quản lý danh mục sản phẩm

Hình 25 Biểu đồ hoạt động quản lý danh mục sản phẩm

T r a n g 41 | 63
`
 2.5.15 Quản lý tin tức

Hình 26 Biểu đồ hoạt động quản lý tin tức

T r a n g 42 | 63
`
 2.5.16 Quản lý khuyến mãi

Hình 27 Biểu đồ hoạt động quản lý khuyến mãi

T r a n g 43 | 63
`
 2.5.17 Quản lý liên hệ

Hình 28- Biểu đồ hoạt động quản lý liên hệ

2.5.18 Thống kê doanh thu

Hình 29- Biểu đồ hoạt động thống kê doanh thu

T r a n g 44 | 63
`
2.5.19 Thay đổi chức vụ người dùng

Hình 30- Biểu đồ hoạt động thay đổi chức vụ người dùng
ChươngIII: Triển khai xây dựng trang
website
1 Những kết quả quan trọng
- Sau gần 2 tháng triển khai và thực hiện dự án thì đã thu thập được nhiều kiến thức
mới trong việc thiết kế website như học những ngôn ngữ mới, áp dụng những kĩ năng
mềm đã được học vào việc viết báo cáo, tăng khả năng vận dụng những lí thuyết vào
những dự án mang tính thực tế, hiểu biết nhiều hơn về PHP, cách kết nối cơ sở dữ liệu
với trang web cho vai trò admin, hình thành cho mình được khả năng tư duy thiết kế
hệ thống, giao diện đẹp. . Và dự án với đề tài “ thiết kế website bán giày” đã có thể
ứng dụng với 2 vai trò, đó là admin và user.

1.1 Trang web gồm các chức năng sau cho user:
- Đăng nhập
- Đăng ký
- Hiển thị danh sách đơn hàng
- Hiển thị danh sách sản phẩm
- Đề xuất sản phẩm liên quan
- Theo dõi đơn hàng
- Thêm sản phẩm vào yêu thích
- Chi tiết sản phẩm
- Bình Luận
- Thêm sản phẩm vào giỏ hàng
- Thanh Toán
- Tìm Kiếm
- Lọc filter data sản phẩm(Theo giá, danh mục, bảng chữ cái Alphabet,
thương hiệu, xuất xứ,Màu sắc, kích thước)
- Phân trang
- Backup sản phẩm vừa xóa trong giỏ hàng
- Thêm, xóa sản phẩm trong giỏ hàng

T r a n g 46 | 63
1.2 Các chức năng của admin
- Quản lý danh mục sản phẩm(Thêm,xóa,sửa)
- Quản lý user
- Quản lý đơn hàng
- Quản lý sản phẩm(Thêm, xóa, sửa)
- Quản lý lịch sử mua hàng của user
- Đăng nhập, đăng xuất
- Thông báo về đơn hàng

2 Giao diện Web:

2.1 Giao diện người dùng:

2.1.1 Trang quảng bá

Hình 31 Hình ảnh trang quảng bá

T r a n g 47 | 63
2.1.2 Đăng nhập và Đăng ký

Hình 32 Hình ảnh trang đăng nhập và đăng kí

T r a n g 48 | 63
2.1.3 Các trang chính của trang web:

Quá trình mua một đơn hàng:

Hình 33 Hình ảnh trang web

Hình 34 Hình ảnh trang hiển thị sản phẩm

T r a n g 49 | 63
 Hình 35 Hình ảnh trang hiển thị chi tiết sản phẩm

Hình 36 Hình ảnh trang hiển thị bình luận đánh giá sản phẩm

T r a n g 50 | 63
Hình 37 Hình ảnh trang hiển thị giới thiệu sản phẩm

Hình 38 Hình ảnh trang giỏ hàng

T r a n g 51 | 63
Hình 39 Hình ảnh trang hiển thị trang nhập địa chỉ hoàn tất đặt hàng

2.1.4 Trang các nhân người dùng :

Người dùng có thể xem trạng thái đơn hàng của mình , xem và điều chỉnh thông tin cá
nhân , quản lý bình luận của bạn.

Hình 40 Hình ảnh trang hiển thị thông tin cá nhân

T r a n g 52 | 63
 Hình 41 Hình ảnh trang hiển thị sửa thông tin cá nhân

Hình 42 Hình ảnh trang hiển thị trang theo giõi tình trạng đơn hàng của mình

T r a n g 53 | 63
 Hình 43 Hình ảnh trang hiển thị trang theo giõi bình luận của mình

2.2 Giao diện ADMIN:

Gồm nhiều trang khác nhau để quản lý các hoạt động của trang web : gồm quản lý
khách , quản lý sản phẩm , quản lý đơn hàng , quản lý danh mục , quản lý bình luận ,
quản lý thương hiệu .
Tất cả các trang giúp cho admin quản lý trang web hoạt động hiệu quá và chuyên
nghiệp hơi.

Hình 44 Hình ảnh trang chủ của ADMIN

T r a n g 54 | 63
Hình 45 Hình ảnh trang quản lý sản phẩm

Hình 46 Hình ảnh trang quản lý danh mục

T r a n g 55 | 63
 Hình 47 Hình ảnh trang quản lý sản phẩm

Hình 48 Hình ảnh trang quản lý thương hiệu

T r a n g 56 | 63
2.3 Các tính năng của Website :

2.3.1 Lọc danh mục ,thương hiệu:

Sử dụng dữ liệu admin lọc sản phẩm theo từng mục .

Hình 49 Hình ảnh hiển thị danh mục sản phẩm

2.3.2: Tìm kiểm sản phẩm

Sử dụng AJAX và JQUERY để sử lý tìm kiếm nhanh trên website

Hình 50 Hình ảnh chức năng tìm kiếm sản phẩm

T r a n g 57 | 63
Chương IV: Tổng kết đề tài

1 Kết quả đạt được:

Dưới sự hướng dẫn của Thầy Nguyễn Hữu Nhật Minh ,Em đã thiết kế thành
công một trang website thương mại điện tử về thơi trang . Trang web này được
xây dựng với mục tiêu mang đến cho khách hàng những sản phẩm chất lượng,
đa dạng và phong cách.
Giao diện của trang web được thiết kế đơn giản, dễ sử dụng, giúp người mua
hàng dễ dàng tìm kiếm và chọn lựa những đôi giày phù hợp với sở thích và nhu
cầu của mình. Chúng tôi chú trọng đến trải nghiệm người dùng, đảm bảo rằng
việc mua sắm trực tuyến trên trang web của chúng tôi là một trải nghiệm thuận
tiện và nhanh chóng.
Bên cạnh đó, trong quá trình xây dựng website demo, chúng em đã học hỏi được
nhiều thứ từ việc sử dụng các ứng dụng, các công cụ lập trình đến hoàn thiện các
kĩ năng tìm kiếm thông tin, khả năng linh hoạt trong lúc làm việc,..

2 Ưu điểm và nhược điểm chưa làm được trong trang web

2.1 Ưu điểm

Website được tích hợp các ngôn ngữ lập trình (php, javascript, html, css, sql,
boostrap) và công cự lập trình ( VS studio code,xampp) . Làm cho website trở
nên linh động có thể chuyển dữ liệu qua lại giữ các trang 1 cách dễ dàng.Thao
tác tìm kiếm , đặt hàng nhanh chóng giúp tăng trãi nghiệm người dùng.
 Website cơ bản đã có thể xem các sản phẩm, có các slide và hiệu ứng cơ bản giúp
website trở nên bắt mắt hơn
 Có thể chạy trên nhiều giao diện, hệ điều hành khác nhau.
 Giao diện dễ sử dụng
 Có backend dùng php, khá đầy đủ các chức năng cho người dùng có thể trải
nghiệm một cách tốt nhất

T r a n g 58 | 63
2.2 Nhược điểm, và những điều chưa làm được ở web.

Website vẫn còn nhiều vấn đề chưa giải quyết và còn nhiều chức năng chưa làm
được trong trang web:
 THiết kế trang website còn quá đơn giản và giao diện vẫn còn sơ sài
 Chưa thể khiến trang web thành 1 mã nguồn mở , và chưa có thế thêm
toàn bộ giữ liệu lên không gian mạng. Nên người dùng không thể tìm và
xem trang web ở trên máy khác .
 Chức năng thêm sản phẩm còn quá thô sơ .
 Trang admin vẫn chưa có chức năng tổng kết doanh thu , Mẫu bảng điều
khiển đăng nhập bằng cách tài khoản đến từ nền tảng khác như facebook ,
Instagram,google,…
 Chưa làm được boxchat tương tác trực tiếp với người dùng
 Chưa tối ưu hóa được chương trình .
 Vấn đề bảo mật thông tin khách hàng chưa có

3 Hướng phát triến trong tương lai

Với sự phát triển mạnh mẽ của thương mại điện tử cũng như là áp dụng
tiên tiến của khoa học kĩ thuật luôn luôn đòi hỏi con người phải luôn luôn
cố gắng hoàn thiện mọi thứ để đáp ứng nhu cầu của thị trường.
 Đẩy toàn bộ dữ liệu trang website này lên không gian mạn để tiếp cận
người dùng.
 Hoàn thiện cách chức năng thiếu ở mục nhược điểm
 Mở rộng danh mục sản phẩm:Tiếp tục tìm kiếm và cung cấp các loại giày
đa dạng từ các thương hiệu nổi tiếng khác nhau. Điều này giúp khách
hàng có nhiều lựa chọn hơn và tìm thấy đúng sản phẩm mà họ đang tìm
kiếm trên trang web .
 Cải thiện chức năng tìm kiếm: Tăng cường chức năng tìm kiếm trên trang
web để khách hàng có thể dễ dàng tìm thấy sản phẩm mong muốn. Các
tính năng tìm kiếm tiên tiến như bộ lọc, sắp xếp theo tiêu chí và gợi ý sản
phẩm sẽ được tích hợp để tăng cường trải nghiệm người dùng.
 Tích hợp đánh giá và nhận xét: Cho phép khách hàng đánh giá và viết
nhận xét về sản phẩm mà họ đã mua. Điều này giúp người mua hàng có
thêm thông tin phản hồi từ người dùng khác và đưa ra quyết định mua
sắm thông minh hơn.
 Tạo ra nội dung và hướng dẫn thời trang: Chúng tôi sẽ cung cấp nội dung
liên quan đến thời trang, bao gồm các bài viết, bí quyết phối đồ và hướng
dẫn thời trang. Điều này giúp khách hàng có thêm thông tin và cung cấp ý
tưởng để tạo ra phong cách riêng cho bản thân.

T r a n g 59 | 63
 Phát triển ứng dụng di động: Lên kế hoạch phát triển ứng dụng di động
cho trang web bán giày . Điều này giúp khách hàng tiện lợi hơn khi mua
sắm từ điện thoại di động và trải nghiệm tốt hơn trên nền tảng di động.
 Tăng cường dịch vụ khách hàng: Đầu tư vào việc cải thiện dịch vụ khách
hàng, bằng cách cung cấp hỗ trợ trực tuyến, tư vấn sản phẩm và xử lý các
yêu cầu của khách hàng một cách nhanh chóng và chuyên nghiệp.

T r a n g 60 | 63
DANH MỤC CỤM TỪ VIẾT TẮT

Cụm từ Viết tắt

STT
1 HyperText Markup Language HTML
2 Cascading Style Sheets CSS
3 Microsoft FrontPage MS FrontPage
4 World Wide Web Consortium W3C

DANH MỤC TÀI LIỆU THAM KHẢO

1.Tài liệu tham khảo.

[1]. Giáo Trình Công Nghệ Web,2018,Khoa CNTT&TT Đại Học Đà Nẵng

2. Tài liệu Internet

[1] Wikipedia https://vi.wikipedia.org/wiki/HTML
[2] Wikipedia https://vi.wikipedia.org/wiki/JavaScript
[3] Wikipedia https://vi.wikipedia.org/wiki/CSS
[4] W3school https://www.w3schools.com/css/default.asp
[5] Bootstrap https://www.w3schools.com/bootstrap
[6] W3layout Templates and Themes » W3Layouts

T r a n g 61 | 63