ATOM_Báo cáo cuối kỳ Website bán nước giải khát

TRƯỜNG ĐẠI HỌC GIA ĐỊNH
KHOA CÔNG NGHỆ THÔNG TIN

TIỂU LUẬN CUỐI KỲ
MÔN: YÊU CẦU PHẦN MỀM

ĐỀ TÀI

Xây Dựng Website Bán Nước Giải Khát

Giảng Viên: Phạm Sữ Tiến Trình
Sinh Viên: Nguyễn Đức Phát
MSSV: 2108110196
Lớp: K15DCPM07
Ngành: Kỹ Thuật Phần Mềm

TP. HỒ CHÍ MINH, NĂM 2023


Khoa/Viện: …………………………
NHẬN XÉT VÀ CHẤM ĐIỂM CỦA GIẢNG VIÊN
TIỂU LUẬN MÔN: Yêu Cầu Phần Mềm
1. Họ và tên sinh viên: Nguyễn Đức Phát
Tên đề tài: Xây Dựng Website Bán Nước Ép Hoa Quả
2. Nhận xét:

a) Những kết quả đạt được:
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................

............................................................................................................................................
b) Những hạn chế:
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
2. Điểm đánh giá (theo thang điểm 10, làm tròn đến 0.5):
Sinh viên:……………………………………………………………………
Điểm số:……….……Điểm chữ:……………………………………………
TP. HCM, ngày … tháng … năm
20……
Giảng viên chấm thi
(Ký và ghi rõ họ tên)


Mục Lục

Giới thiệu đề tài..............................................................................................................1
Lời cảm ơn.....................................................................................................................1
Lời mở đầu.....................................................................................................................2
Chương 1: Giới thiệu & mô tả về đề tài
1. Lý Do Chọn Đề Tài....................................................................................................2
1.2. Đánh giá..................................................................................................................3
1.3. Đối tượng và phạm vi của ứng dụng.......................................................................3
1.2.Ý nghĩa thực tiễn......................................................................................................3
1.2. Đặt bài toán.............................................................................................................3
1.5.1 Chức năng............................................................................................................10
1.5.2 Yêu cầu đặt ra......................................................................................................10
1.6 Các giai đoạn triển khai dự án................................................................................11
1.7 Vấn đề - Giải pháp.................................................................................................11

Chương 2: Cơ sở lý thuyết
1.2. Giới thiệu HTML....................................................................................................3
2.4 Giới Thiệu Visual Studio Code..............................................................................11
1.2. Giới thiệu CSS.........................................................................................................3
1.2. Giới thiệu Java Scrip...............................................................................................3
1.2. Giới thiệu Bootstrap................................................................................................3
2.2 Tổng quan về hệ quản trị cơ sở dữ liệu SQL Sever.................................................9
Chương 3:Đặc tả yêu cầu các chức năng của phần mềm sử dụng SRS
3.1 Sơ Đồ Use Case......................................................................................................11
3.1 Đặc Tả Use case.....................................................................................................11
3.1 Quy Trình Nghiệp Vụ............................................................................................11
3.1 Xác định yêu cầu....................................................................................................11
3.1.1 Yêu cầu chức năng..............................................................................................12
3.1.2 Yêu cầu hệ thống.................................................................................................12
3.3 Cơ sở dữ liệu hệ thống...........................................................................................17
Chương 4: Thiết kế giao diện cho từng chức năng
3.6 Thiết kế giao diện hệ thống....................................................................................20
KẾT LUẬN
4.1 KẾT LUẬN ĐỀ TÀI..............................................................................................24
4.1.1 Đánh giá chung....................................................................................................24
4.1.2 Hướng phát triển và mở rộng đề tài....................................................................25
4.2 LỜI KẾT................................................................................................................25

3


Giới thiệu về đề tài.
Trong bối cảnh kinh kế thị trường hiện nay, việc mỗi công ty, cửa hàng hay
thậm chí cá nhân có một hay nhiều website là một việc bình thường, xong việc khai
khác dữ liệu từ website biến những tác động lên website trở thành những dữ liệu có

ích lại là 1 vấn đề khá cịn mới mẻ. Vấn đề còn bỏ ngỏ, nhận thấy cơ hội, khả năng
phát triển, em nhận đề tài “Xây Dựng Website Bán Nước Giải Khát ” nhằm mục đích
đưa các giải pháp, triển khai thực tiễn 1 số thuật toán nhằm phân tích dữ liệu cho
người dùng.
Nhu cầu về nước giải khát và đồ uống liên quan đang ngày càng tăng, đặc biệt trong
xã hội hiện đại với nhịp sống nhanh, công việc căng thẳng và sự quan tâm ngày càng
cao đối với sức khỏe và chất lượng cuộc sống. Điều này địi hỏi sự cải tiến trong hình
thức kinh doanh và tiếp cận khách hàng để đáp ứng nhu cầu ngày càng đa dạng và cao
cấp của người tiêu dùng. Dưới đây là một số điểm mấu chốt về nhu cầu tăng cao và sự
cải tiến trong hình thức kinh doanh và tiếp cận khách hàng.
Sự tiện lợi và đa dạng trong việc mua sắm trực tuyến đã thu hút đông đảo khách
hàng, bao gồm cả thị trường nước giải khát. Dưới đây là một số lý do nổi bật cho việc
mua sắm nước giải khát trực tuyến được ưa chuộng.
Tiểu luận này nhằm tập trung trình bày về quá trình xây dựng và phát triển một Xây
Dựng Website Bán Nước Giải Khát nhằm giải quyết các thách thức trong việc kinh
doanh quản lý . Dự án này sẽ hướng đến việc tạo ra một Website dễ sử dụng, cung
cấp thơng tin sản phẩm chính xác và đáng tin cậy, và đảm bảo tính bảo mật và an tồn
dữ liệu.
Mục tiêu của tiểu luận
Trình bày quy trình xây dựng Xây Dựng Website Bán Nước Giải Khát và các công
nghệ liên quan. Đề xuất một giao diện người dùng thân thiện, dễ sử dụng để chọn lựa
đặt hàng các món nước
Giải thích các chức năng chính của Website, bao gồm Trang chủ, Danh mục sản phẩm,
Trang sản phẩm chi tiết, Giỏ hàng, Thanh toán, Đăng ký và Đăng nhập, Trang giới
thiệu, Trang liên hệ, Quản lý tài khoản.....
Lời cảm ơn
Em xin gửi lời cảm ơn chân thành đến Thầy Phạm Sữ Tiến Trình về việc xem xét và
đánh giá bài báo cáo môn học của em. Sự quan tâm và hỗ trợ từ Thầy đã đóng vai trị
quan trọng trong q trình thực hiện báo cáo này. Em biết ơn sự chỉ dẫn và hướng
dẫn chuyên môn của Thầy trong suốt q trình nghiên cứu và viết báo cáo. Những

góp ý và nhận xét từ Thầy đã giúp em hiểu rõ hơn về chủ đề môn học và cải thiện bài
báo cáo của mình. Em cũng muốn bày tỏ lịng biết ơn đặc biệt đến Thầy về sự tận tâm
và kiến thức sâu sắc mà Thầy đã chia sẻ trong quá trình giảng dạy mơn học. Những
kiến thức này đã trang bị cho em những kỹ năng quan trọng trong lĩnh vực này.
Cuối cùng, em xin chân thành cảm ơn Thầy Phạm Sữ Tiến Trình em sẽ tiếp tục nỗ lực
và áp dụng những kiến thức đã học được để phát triển trong lĩnh vực này.
Em Xin chân thành cảm ơn và kính chúc Thầy sức khỏe, thành cơng và hạnh phúc.

4


Lý do Chọn Đề Tài
Khi internet ra đời, không ai nghĩ rằng nó sẽ phát triển đến ngày hơm nay,
nó len lỏi đến mọi ngó ngánh trong cuộc sống, trở thành 1 phần không thể thiếu.
Chỉ cần ngồi nhà và cả thế giới trong tầm tay bạn. Cũng như vậy, khi internet đã trở
nên phổ biến, việc mua bán qua mạng internet phát triển cũng phát triển theo đó.
Xong bên cạnh đó, việc nắm bắt tìm hiểu, phân tích nhu cầu tiêu dùng là một phần
vơ cùng quan trọng, nó giúp người tiêu dùng dễ dàng chọn lựa sản phẩm phù hợp,
giúp các nhà kinh doanh quyết định đón đầu xu thế của khách hàng.
Bên cạnh đó, việc phát triển website đi kèm những tính năng nâng cao giúp
tối ưu hóa việc trải nghiệm website của người dùng cũng là cách giúp website phát
triển 1 cách bền vững và có hiệu quả.
Lý do gồm những điểm sau








Trend và nhu cầu thị trường:
Tiềm năng kinh doanh:
Phù hợp với chủ đề chính của ngành học:
Nền tảng quảng bá thương hiệu:
Kết hợp kinh doanh truyền thống và trực tuyến:
Thu hút đối tượng khách hàng trẻ tuổi:
Tối ưu hóa quy trình kinh doanh:

Đánh giá
Ưu điểm:
 Tiện lợi và dễ truy cập: Website Bán Nước Giải Khát cung cấp sự tiện lợi cho
khách hàng khi có thể dễ dàng truy cập từ bất kỳ thiết bị có kết nối internet nào.
Khách hàng có thể mua sắm và đặt hàng mọi lúc, mọi nơi mà không cần phải đến
cửa hàng truyền thống.
 Đa dạng sản phẩm: Website cho phép hiển thị và quảng bá rộng rãi các loại nước
giải khát và đồ uống liên quan. Khách hàng có thể dễ dàng tìm kiếm, so sánh và
lựa chọn sản phẩm phù hợp với nhu cầu và sở thích cá nhân.
 Tăng cường trải nghiệm mua sắm: Website cung cấp trải nghiệm mua sắm trực
tuyến thuận tiện và hấp dẫn. Khách hàng có thể xem thơng tin chi tiết về sản
phẩm, đánh giá của khách hàng khác và nhận được các ưu đãi, khuyến mãi đặc
biệt.
 Giao dịch và thanh tốn tiện lợi: Khách hàng có thể thực hiện giao dịch và thanh
toán trực tuyến qua nhiều phương thức khác nhau như thẻ tín dụng, chuyển khoản
ngân hàng hay ví điện tử. Điều này giúp tiết kiệm thời gian và tạo cảm giác an
toàn khi mua sắm.
 Tiếp cận đối tượng khách hàng rộng rãi: Website Bán Nước Giải Khát có khả
năng tiếp cận đối tượng khách hàng rộng rãi, bao gồm cả khách hàng trong khu
vực địa lý xa, do đó mở rộng thị trường kinh doanh và tiềm năng tăng doanh số
bán hàng.

Nhược điểm:
 Cạnh tranh sịng phẳng: Thị trường nước giải khát trực tuyến có nhiều đối thủ
cạnh tranh, do đó, website cần đặc biệt chú trọng đến việc thiết kế và trải nghiệm
người dùng để nổi bật và thu hút khách hàng.

5


 Khó khăn trong vận chuyển và bảo quản: Vận chuyển nước giải khát có thể gặp
khó khăn và tăng chi phí vận chuyển do tính chất dễ bị hỏng của sản phẩm. Hơn
nữa, việc bảo quản nước giải khát trong quá trình giao hàng cần được quản lý cẩn
thận để đảm bảo chất lượng sản phẩm.
 Tin cậy và bảo mật thơng tin: Một số khách hàng có thể cảm thấy lo lắng về vấn
đề bảo mật thông tin và tin cậy khi mua hàng trực tuyến. Do đó, website cần có
các biện pháp bảo mật và xác thực để đảm bảo an tồn cho thơng tin cá nhân của
khách hàng.
 Hỗ trợ và dịch vụ khách hàng: Đối với các vấn đề kỹ thuật hoặc thắc mắc trong
quá trình mua sắm, khách hàng có thể gặp khó khăn trong việc liên hệ và nhận hỗ
trợ từ doanh nghiệp qua website.
 Chi phí phát triển và duy trì: Xây dựng và duy trì một website chun nghiệp địi
hỏi đầu tư tài chính và nhân lực. Để đảm bảo hoạt động ổn định và nâng cao trải
nghiệm người dùng, website cần được cập nhật và bảo trì thường xuyên.
1.3. Đối tượng và phạm vi của ứng dụng

1.3.1 Đối tượng
Hệ thống quản lý điểm được xây dựng hướng đến các đối tượng:
Người quản trị hệ thống

1.3.2 Phạm Vi
Người tiêu dùng cá nhân: Đây là đối tượng chính của website, bao gồm cả người trẻ,

người trưởng thành, và người già có nhu cầu mua sắm nước giải khát và đồ uống liên
quan để thưởng thức hoặc sử dụng hàng ngày. Và các doanh nghiệp và tổ chức, người
mua quà tặng, người yêu thích thương hiệu nước giải khát.....
1.4 Ý nghĩa thực tiễn
- Phát triển các sản phẩm công nghệ phù hợp với nhu cầu của xã hội, qua đó rèn
luyện , trau đồi, phát triển kiến thức của bản thân nhằm đáp ứng nhu cầu của các
nhà tuyển dụng sau khi ra trường, tạo ra sản phẩm thực tế có giá trị sử dụng trong
cuộc sống.
- Việc tạo ra một Website Bán Nước Giải Khát có giá trị thực tiễn và hấp dẫn cho
người dùng là một q trình thử thách, địi hỏi sự sáng tạo và nỗ lực từ đội ngũ phát
triển. Qua việc thực hiện dự án này, họ sẽ rèn luyện và phát triển kỹ năng quản lý dự
án, giải quyết vấn đề, làm việc nhóm và giao tiếp hiệu quả. Những kỹ năng này rất
quan trọng trong việc tiến xa hơn trong sự nghiệp và đáp ứng yêu cầu của các nhà
tuyển dụng sau khi ra trường.
- Xây Dựng Website Bán Nước Giải Khát cũng tạo ra sản phẩm thực tế và có giá trị
sử dụng trong cuộc sống. Website này giúp khách hàng trải nghiệm mua sắm tiện lợi,
tìm kiếm và lựa chọn những sản phẩm nước giải khát phù hợp với nhu cầu và sở thích
6


của họ. Đồng thời, doanh nghiệp cũng có cơ hội tiếp cận đối tượng khách hàng rộng
rãi và thúc đẩy doanh số bán hàng. Việc mang đến giá trị thực tế và hữu ích cho cả
khách hàng và doanh nghiệp sẽ giúp Website Bán Nước Giải Khát tạo ra một vị trí
cạnh tranh và bền vững trên thị trường kinh doanh trực tuyến.
1.5 Đặt bài toán
Bài toán đặt ra: Xây dựng website bán nước giải khát gồm bao gồm các chức năng
của 1 website bán hàng đơn thuần.
Qua quá trình khảo sát các nguồn thông tin từ thầy giáo hướng dẫn, bạn bè,
những người có kinh nghiệm trong phát triển website, trải nghiệm thực tế trên một
số website bán nước giải khát có thương hiệu như

1.
2.
3.
4.
5.
6.
7.

Trà Sữa Gong Cha: />Trà Sữa Koi Thé: />Trà Sữa Heytea: />Trà Sữa Tiger Sugar: />Trà Sữa CoCo Fresh Tea & Juice: />Trà Sữa Sharetea: />Trà Sữa The Alley: />
1.5.1 Chức năng
Đây là website bán nước giải khát và giới thiệu sản phẩm của cửa hàng, công ty đến
người tiêu dùng với các thông tin chi tiết mặt hàng, hình ảnh mơ tả sản phẩm, giá
cả, khuyến mãi, ưu đãi với người mua hàng. Website cần bao gồm các chức năng
sau:
- Cho phép cập nhập hàng hóa vào CSDL
- Hiển thị danh sách các mặt hàng hóa
- Hiển thị các mặt hàng người dùng đã chọn sau quá trình tìm hiểu sản phẩm
- Hiển thị thông tin khách hàng
- Quản lý đơn đặt hàng
- Cập nhập hàng hóa, nhà sản xuất, ...
- Xử lý đơn hàng
1.5.2 Yêu cầu đặt ra
Hệ thống có 2 phần:
a. Phần thứ nhất: Khách hàng
Khách hàng có nhu cầu mua hàng, họ sẽ tìm kiếm mặt hàng trên website, khi
quyết định mua sẽ đặt hàng thông qua giao diện website. Đơn hàng sẽ được chuyển
về cho cửa hàng, cơng ty. Vì vậy giao diện khách hàng cần có các chức năng sau:
Giao diện người dùng thân thiện, nhằm đánh mạnh vào nhu cầu, tâm lý mua sắm
của người dùng. Việc người dùng sử dụng website của bạn thêm một giây là gia
tăng thêm tỷ lệ mua hàng của khách hàng.

Hiển thị các danh sách các mặt hàng để khách hàng xem, lựa chọn và mua
Sau khi khách hàng đã lựa chọn xong và muốn đặt hàng, cần có giao diện đặt
hàng cho người dùng bao gồm các thông tin về hàng hóa đã chọn, số lượng, số tiền,
tổng tiền đơn hàng, các thông tin cá nhân của khách hàng để phục vụ việc liên lạc
lại với khách hàng.
7


Ngồi ra có thể phát triển một trang phản hồi khách hàng nhằm thu thập ý kiến,
câu hỏi của khách hàng, phục vụ việc phát triển, giải đáp các thắc mắc của khách
hàng.
b.Phần thứ hai: Giao diện quản trị.
Người làm chủ ứng dụng được cấp tài khoản riêng để có thể kiểm sốt tồn các
hoạt động của ứng dụng. Về phần này cần có các chức năng chính:
Chức năng thêm, sửa, xóa các loại mặt hàng, nhà sản xuất, …
Tiếp nhận đơn hàng của khách hàng và sửa lý đơn hàng
Thống kê doanh thu
Một số chức năng nâng cao theo yêu cầu như tạo giao diện menu động, tùy
chỉnh theo ý người quản trị website, …
Giao diện quản trị nên làm đơn giản, tập chung vào các chức năng, đơn giản, dễ
sử dụng
1.6 Các giai đoạn triển khai dự án.
Giai đoạn 1:
Xây dựng 1 website đầy đủ các chức năng cơ bản, sử dụng cơ sở dữ liệu
SQL và xây dựng website theo mơ hình 3 lớp kết hợp MVC 5 (Giới thiệu tại phần
tiếp theo)
Giai đoạn 2:
Xây dựng 1 số tính năng mới để tăng trải nghiệm của người dùng với
website, qua đó hỗ trợ người dùng 1 cách tối ưu.
Trong phần báo cáo thực tập tốt nghiệp, em phát triển giai đoạn 1. Tiến đồ án

tốt nghiệp sẽ phát triển giai đoạn 2.
1.7 Vấn đề - Giải pháp
Khó khăn
- Kiến thức thực tế cịn hạn chế
- Cơng nghệ biến đổi theo từng đơn vị thời gian nên cần có chiến lược
phát triền, thời gian và cơng sức tìm hiểu.
- Triển khai bài toán theo hướng hoạt động cá nhân nên chưa có sự giao
lưu ý tưởng.
Giải pháp:
- Tự tìm dành thời gian tìm hiểu những cơng nghệ mới, giao lưu, học hỏi
từ những người có kinh nghiệm trong ngành công nghệ thông tin và giáo
viên hướng dẫn
CHƯƠNG 2. CƠ SỞ LÝ THUYẾT
1.1 Giới thiệu HTML
HTML (HyperText Markup Language) là ngôn ngữ đánh dấu siêu văn bản được sử
dụng để xây dựng các trang web và ứng dụng web. Nó là một phần quan trọng trong
8


công nghệ web và được sử dụng để tạo cấu trúc và hiển thị nội dung trên trình duyệt
web. HTML sử dụng các thẻ (tags) để đánh dấu các phần tử trong tài liệu web. Mỗi
thẻ được bao quanh bởi cặp dấu "<" và ">". Các thẻ này được sử dụng để xác định
kiểu định dạng và ý nghĩa của các phần tử trong trang web, chẳng hạn như tiêu đề,
đoạn văn bản, hình ảnh, liên kết, bảng, biểu đồ, và nhiều hơn nữa. 1.1.a Cơng dụng
của HTML HTML có nhiều công dụng quan trọng trong việc xây dựng trang web và
ứng dụng web. Dưới đây là một số công dụng chính của HTML. Xây dựng cấu trúc
trang web: HTML cho phép bạn định nghĩa cấu trúc và tổ chức của trang web. Bằng
cách sử dụng các thẻ như <header>, <nav>, <section>, <article>, và <footer>, bạn có
thể phân chia trang web thành các phần khác nhau và xác định sự liên kết giữa chúng.
Hiển thị nội dung: HTML cho phép bạn hiển thị văn bản, hình ảnh, video, âm thanh

và các phương tiện đa phương tiện khác trên trang web. Bạn có thể sử dụng các thẻ
như

,

, <img>, <video>, và <audio> để định dạng và hiển thị nội dung theo ý
muốn. Tạo liên kết: HTML cho phép bạn tạo liên kết giữa các trang web. Sử dụng thẻ
<a> và thuộc tính href, bạn có thể tạo các liên kết nội bộ (đến các trang khác trong
cùng trang web) và liên kết bên ngoài (đến các trang web khác). Xây dựng biểu đồ và
bảng: HTML cung cấp các thẻ như <table> để tạo bảng và <canvas> để vẽ biểu đồ và
hình vẽ trên trang web. Gắn kết và nhúng: HTML cho phép bạn nhúng nội dung từ
các nguồn bên ngồi vào trang web của bạn.
Ví dụ: bạn có thể nhúng video YouTube bằng cách sử dụng thẻ <iframe> hoặc
nhúng nội dung từ các trang web khác. Định dạng và kiểu dáng: HTML cung cấp các
thẻ và thuộc tính để định dạng và kiểu dáng trang web. Bằng cách sử dụng CSS
(Cascading Style Sheets) để áp dụng các quy tắc kiểu dáng, bạn có thể thay đổi màu
sắc, kích thước, phơng chữ và hình dạng của các phần tử trong trang web. HTML là
một ngôn ngữ cơ bản và cần được kết hợp với CSS và JavaScript để tạo ra những
trang web động và tương tác.
b Định Dạng của HTML Trong HTML, bạn có thể định dạng nội dung bằng cách sử
dụng các thẻ và thuộc tính. Dưới đây là một số cách thông dụng để định dạng HTML:
Định dạng văn bản:

đến

: Được sử dụng để tạo các tiêu đề với cấp độ khác
nhau.

là tiêu đề lớn nhất và

là tiêu đề nhỏ nhất.

: Được sử dụng để tạo
đoạn văn bản. <strong> và <em>: Sử dụng để làm nổi bật văn bản. <strong> tạo văn
bản đậm, còn <em> tạo văn bản in nghiêng. Định dạng danh sách: <ul>: Tạo danh
sách khơng có thứ tự. <ol>: Tạo danh sách có thứ tự. <li>: Được sử dụng để tạo các
mục trong danh sách. Định dạng hình ảnh: <img>: Sử dụng để chèn hình ảnh vào
trang web. Bạn có thể sử dụng thuộc tính width và height để định kích thước hình ảnh.
Định dạng liên kết: <a>: Được sử dụng để tạo liên kết đến các trang web khác. Sử
dụng thuộc tính href để chỉ định đường dẫn đến trang web. Định dạng bảng: <table>:
Sử dụng để tạo bảng trên trang web. Bạn có thể sử dụng các thẻ <tr> để tạo hàng,
<th> để tạo tiêu đề cột và <td> để tạo ô dữ liệu. Định dạng khối: <div>: Được sử
dụng để nhóm các phần tử lại với nhau để tạo thành một khối. <span>: Sử dụng để
định dạng một phần của văn bản trong một đoạn. Ngồi ra, bạn cũng có thể sử dụng

CSS để kiểu dáng và định dạng trang web HTML một cách linh hoạt hơn. CSS cho
phép bạn thiết lập các thuộc tính như màu sắc, kích thước, phơng chữ, đổ bóng và các
hiệu ứng khác cho các phần tử HTML.
Giới thiệu Visual Studio Code

9


Visual Studio Code (VS Code) là một trình soạn thảo mã nguồn mở và miễn phí, phát
triển bởi Microsoft. Nó được thiết kế để hỗ trợ việc phát triển ứng dụng web và ứng
dụng đa nền tảng. VS Code có sẵn trên Windows, macOS và Linux. Dưới đây là một
số đặc điểm và tính năng chính của Visual Studio Code: Giao diện người dùng thân
thiện: VS Code có giao diện sáng sủa, đơn giản và dễ sử dụng. Nó cung cấp trải
nghiệm tương tác mượt mà và thân thiện với người dùng. Hỗ trợ nhiều ngơn ngữ lập
trình: VS Code hỗ trợ nhiều ngơn ngữ lập trình phổ biến, bao gồm HTML, CSS,
JavaScript, TypeScript, Python, Java, C++, và nhiều ngôn ngữ khác. Nó cung cấp các
tính năng như gợi ý cú pháp, kiểm tra lỗi cú pháp, và định dạng mã tự động. Mở rộng
và cộng đồng phong phú: VS Code cho phép bạn mở rộng chức năng của nó thơng
qua các extension. Có hàng ngàn extension được cung cấp bởi cộng đồng lập trình
viên, cho phép bạn tùy chỉnh và mở rộng trình soạn thảo theo nhu cầu của bạn. Các
extension có thể hỗ trợ bạn 20
trong việc xử lý công việc như quản lý phiên bản, kiểm tra mã, tạo biểu đồ, và nhiều
hơn nữa. Hỗ trợ tích hợp và gỡ lỗi: VS Code tích hợp với nhiều công cụ và dịch vụ
phát triển phổ biến như Git, Docker, npm, và IntelliSense. Nó cung cấp tính năng gỡ
lỗi tích hợp cho các ngơn ngữ lập trình như JavaScript và Python, giúp bạn tìm và
khắc phục lỗi trong mã nguồn. Trình quản lý tác vụ: VS Code có một trình quản lý tác
vụ tích hợp (Task Runner) cho phép bạn thực thi các tác vụ tự động như biên dịch,
kiểm tra và triển khai ứng dụng một cách dễ dàng. Giao diện đa nền tảng: VS Code có
thể hoạt động trên Windows, macOS và Linux, cho phép bạn làm việc trên nhiều nền
tảng mà không cần thay đổi công cụ. Visual Studio Code đã trở thành một trình soạn

thảo mã phổ biến trong cộng đồng lập trình viên và được đánh giá cao vì tính nhẹ, tốc
độ, tính mở rộng và khả năng tùy chỉnh của nó
Giới thiệu CSS
CSS (Cascading Style Sheets) là một ngôn ngữ đánh dấu được sử dụng để kiểu dáng
và định dạng trang web. CSS cho phép bạn tạo ra các quy tắc kiểu dáng và áp dụng
chúng cho các phần tử HTML trên trang web. Dưới đây là một số khái niệm và cú
pháp cơ bản trong CSS: Lựa chọn phần tử: CSS cho phép bạn chọn phần tử HTML
mà bạn muốn kiểu dáng. Bạn có thể sử dụng các lựa chọn phần tử như tên thẻ (

,

, <div>), lớp (class), ID (id), và các thuộc tính khác để xác định phần tử. Quy tắc
CSS: Một quy tắc CSS bao gồm một lựa chọn phần tử và một tập hợp các thuộc tính
và giá trị. Ví dụ: css Copy code p { color: blue; font-size: 16px; } Trong ví dụ trên,
quy tắc CSS áp dụng cho tất cả các phần tử

và đặt màu chữ là màu xanh (color:
blue) và cỡ chữ là 16px (font-size: 16px). Thuộc tính và giá trị: CSS cung cấp nhiều
thuộc tính và giá trị để kiểu dáng các phần tử. Ví dụ: color: Đặt màu chữ cho phần tử.
font-size: Đặt kích thước chữ cho phần tử. background-color: Đặt màu nền cho phần
tử. margin: Đặt khoảng cách viền xung quanh phần tử. padding: Đặt khoảng cách giữa
nội dung và viền của phần tử. border: Đặt kiểu, kích thước và màu sắc của viền phần
tử. Lớp và ID: Bạn có thể sử dụng lớp (class) và ID (id) để chọn và kiểu dáng các
phần tử cụ thể trên trang web. Lớp cho phép bạn nhóm các phần tử lại và áp dụng
cùng một kiểu dáng cho chúng, trong khi ID định danh duy nhất cho một phần tử. Kế
thừa và ưu tiên: CSS có cơ chế kế thừa, nghĩa là các thuộc tính được áp dụng cho một
phần tử cũng áp dụng cho các phần tử con bên trong nó, trừ khi được ghi đè. CSS
cũng có quy tắc ưu tiên, nghĩa là nếu có21
nhiều quy tắc áp dụng cho cùng một phần tử, quy tắc có độ ưu tiên cao hơn sẽ được
áp dụng. CSS cung cấp rất nhiều thuộc tính và khả năng để tùy chỉnh kiểu dáng của
trang web. Nó cho phép bạn điều chỉnh màu sắc, kích thước, định dạng chữ, canh lề,
10


đổ bóng, hiệu ứng và nhiều hơn nữa. Kết hợp với HTML, CSS giúp tạo ra giao diện

đẹp và hấp dẫn cho trang web của bạn. Lựa chọn phần tử css cho phép bạn chọn phần
tử HTML mà bạn muốn kiểu dáng, bạn có t7heer sử dụng lựa chọn các thẻ (p, h1, div,
class, id) , và các thuộc tính khác để xác định phần tử Quy tắc css bao gồm một lựa
chọn phần tử và một tập hợp các thuộc tính và giá trị VD: P { Color: blue; Font-size:
16px; }
Giới thiệu JavaScrip
JavaScript là một ngơn ngữ lập trình thơng dịch (interpreted) chủ yếu được sử dụng
cho phía máy khách (client-side) trên các trình duyệt web. Nó cung cấp khả năng
tương tác động và thay đổi nội dung của trang web. Dưới đây là một số đặc điểm và
khái niệm cơ bản của JavaScript: Tính năng đa năng: JavaScript có thể thực hiện
nhiều tác vụ khác nhau trên trình duyệt web. Nó có thể thay đổi nội dung HTML,
kiểm sốt CSS, tương tác với người dùng thơng qua các sự kiện (events), gửi và nhận
dữ liệu từ máy chủ (server), và thực hiện các phép tính và xử lý dữ liệu. Sự kiện và xử
lý sự kiện: JavaScript cho phép bạn xử lý các sự kiện như nhấp chuột, nhấn phím, di
chuyển chuột và nhiều sự kiện khác trên trang web. Bạn có thể gắn kết các hàm xử lý
sự kiện với các phần tử HTML để thực thi mã JavaScript khi các sự kiện xảy ra. DOM
(Document Object Model): JavaScript cho phép truy cập và tương tác với cấu trúc
HTML của trang web thông qua DOM. DOM cung cấp một biểu diễn cấu trúc cây
của các phần tử HTML, và bạn có thể sử dụng JavaScript để thay đổi nội dung, thuộc
tính, hoặc kiểu dáng của các phần tử. Biến và kiểu dữ liệu: JavaScript sử dụng biến để
lưu trữ và làm việc với dữ liệu. JavaScript có các kiểu dữ liệu như số (number), chuỗi
(string), đối tượng (object), mảng (array), boolean (true/false), và null và undefined.
Hàm: JavaScript cho phép bạn định nghĩa và sử dụng các hàm. Hàm cho phép bạn
nhóm các 22
đoạn mã lại và thực thi chúng khi cần thiết. JavaScript cũng cung cấp một số hàm tích
hợp sẵn cho việc thực hiện các tác vụ như xử lý chuỗi, làm việc với mảng, và thao tác
trên DOM. AJAX và XMLHttpRequest: JavaScript hỗ trợ việc gửi yêu cầu và nhận
dữ liệu từ máy chủ mà không cần tải lại trang web. AJAX (Asynchronous JavaScript
and XML) và đối tượng XMLHttpRequest cho phép tương tác với dữ liệu từ các
nguồn bên ngoài và cập nhật nội dung trang mà không làm

Giới thiệu Bootstrap
Bootstrap là một framework CSS phổ biến được sử dụng để xây dựng giao diện web
tương thích với nhiều thiết bị và trình duyệt khác nhau. Nó cung cấp một bộ các lớp
CSS, mã JavaScript và các thành phần UI (User Interface) đã được thiết kế sẵn để
giúp tạo ra các trang web đẹp và dễ sử dụng. Dưới đây là một số đặc điểm và lợi ích
chính của Bootstrap: Responsive Design: Bootstrap hỗ trợ thiết kế đáp ứng
(responsive design), cho phép giao diện web tự động thích ứng và hiển thị tốt trên các
thiết bị khác nhau, từ máy tính để bàn đến điện thoại di động. Các lớp và thành phần
của Bootstrap được thiết kế để tự động điều chỉnh kích thước và bố trí theo kích thước
màn hình. Grid System: Bootstrap cung cấp một hệ thống lưới (grid system) linh hoạt
và dễ sử dụng. Hệ thống lưới cho phép bạn xây dựng bố cục của trang web dễ dàng và
linh hoạt, chia các phần tử thành các cột và hàng. Điều này giúp bạn tạo ra các bố cục
đẹp mắt và cân đối trên các kích thước màn hình khác nhau. Các thành phần UI sẵn có:
Bootstrap cung cấp một loạt các thành phần UI đã được thiết kế sẵn như nút, biểu đồ,
thanh điều hướng, biểu mẫu, hộp thoại và nhiều hơn nữa. Các thành phần này giúp
bạn nhanh chóng tạo ra giao diện web chuyên nghiệp mà không cần viết mã CSS và
11


JavaScript từ đầu. Tương thích với nhiều trình duyệt: Bootstrap được xây dựng để
tương thích với hầu hết các trình duyệt web phổ biến như Chrome, Firefox, Safari, và
Internet Explorer. Điều này đảm bảo rằng giao diện web của bạn sẽ hiển thị đúng trên
các trình duyệt khác nhau mà không cần điều chỉnh nhiều. Dễ tùy chỉnh: Mặc dù
Bootstrap cung cấp một giao diện mặc định, nhưng nó cũng cho phép bạn tùy chỉnh
giao diện theo nhu cầu của bạn. Bạn có thể thay đổi màu sắc, kích thước, kiểu dáng và
các thành phần khác bằng cách ghi đè lên các lớp CSS hoặc sử dụng biến tùy chỉnh.
Bootstrap là một công cụ mạnh mẽ giúp giảm thời gian và cơng sức trong việc xây
dựng giao diện web. Nó được sử dụng rộng 23
rãi trong cộng đồng phát triển web để tạo ra các trang web đáng tin cậy, dễ bảo trì và
hấp dẫn.

Tổng quan về hệ quản trị cơ sở dữ liệu SQL Sever.
SQL Server (viết tắt của Microsoft SQL Server) là một hệ quản trị cơ sở dữ liệu quan
hệ (RDBMS) do Microsoft Corporation phát triển và quản lý. Nó được thiết kế để
quản lý và lưu trữ cơ sở dữ liệu theo mơ hình quan hệ, trong đó dữ liệu được tổ chức
thành các bảng có các cột và hàng tương ứng. SQL Server hỗ trợ ngôn ngữ truy vấn
SQL (Structured Query Language) để thực hiện các thao tác truy vấn dữ liệu như
thêm, sửa, xóa và truy xuất dữ liệu.
SQL Server cung cấp các tính năng mạnh mẽ và đa dạng như:
1Hỗ trợ cho các tính năng quan hệ như khóa chính và khóa ngoại để xác định mối
quan hệ giữa các bảng.
2 Trình tối ưu hóa truy vấn để tăng hiệu suất và tối ưu hóa truy vấn dữ liệu.
3 Các tính năng bảo mật để đảm bảo an toàn và bảo mật dữ liệu.
4 Các công cụ sao lưu và phục hồi dữ liệu để bảo vệ dữ liệu khỏi mất mát.
5 Hỗ trợ tích hợp với các cơng nghệ và dịch vụ khác của Microsoft.
SQL Server được sử dụng rộng rãi trong các doanh nghiệp và tổ chức để quản lý dữ
liệu, xây dựng ứng dụng web và ứng dụng di động, thực hiện phân tích dữ liệu và hỗ
trợ quyết định kinh doanh. Nó là một trong những hệ quản trị cơ sở dữ liệu phổ biến
và được ưa chuộng trên thế giới.
tổng quan về hệ quản trị cơ sở dữ liệu SQL Server:
 Kiến trúc: SQL Server sử dụng kiến trúc hai phần tử: SQL Server Database
Engine và SQL Server Management Studio (SSMS). SQL Server Database
Engine là nơi lưu trữ và quản lý cơ sở dữ liệu, trong khi SSMS là công cụ quản lý
cơ sở dữ liệu dễ sử dụng.
 Ngôn ngữ truy vấn: SQL Server sử dụng ngôn ngữ truy vấn SQL (Structured
Query Language) để tương tác và truy vấn cơ sở dữ liệu. SQL cho phép người
dùng thực hiện các thao tác truy vấn như SELECT, INSERT, UPDATE và
DELETE.
 Hỗ trợ quan hệ: SQL Server hỗ trợ cơ sở dữ liệu quan hệ, cho phép người dùng
xác định các mối quan hệ giữa các bảng thông qua các khóa chính và khóa ngoại.

12


 Bảo mật: SQL Server cung cấp các tính năng bảo mật mạnh mẽ để bảo vệ cơ sở
dữ liệu khỏi các cuộc tấn công và truy cập trái phép. Người quản trị có thể xác
định quyền truy cập cho từng người dùng hoặc nhóm người dùng.
 Tối ưu hóa truy vấn: SQL Server sử dụng trình tối ưu hóa truy vấn để tối ưu hóa
hiệu suất truy vấn. Trình tối ưu hóa này sẽ phân tích cấu trúc của truy vấn và tìm
cách thực hiện truy vấn một cách hiệu quả nhất.
 Sao lưu và khôi phục: SQL Server cung cấp các công cụ sao lưu và khôi phục dữ
liệu để đảm bảo an toàn cho dữ liệu trong trường hợp xảy ra sự cố.
 Tích hợp: SQL Server tích hợp với các cơng nghệ khác của Microsoft như .NET
Framework, Azure và công nghệ Business Intelligence (BI).
 Dễ sử dụng: SQL Server cung cấp giao diện người dùng thân thiện và dễ sử dụng
giúp người dùng quản lý và truy vấn cơ sở dữ liệu một cách thuận tiện.
 Hỗ trợ quy mơ lớn: SQL Server có khả năng mở rộng và hỗ trợ quản lý các cơ sở
dữ liệu quy mô lớn với lượng dữ liệu lớn và các yêu cầu về hiệu suất cao.
 Hỗ trợ cộng tác: SQL Server hỗ trợ nhiều người dùng truy cập và làm việc trên
cùng một cơ sở dữ liệu cùng một lúc.

13


3.1 Sơ Đồ Use Case

14


3.1 Đặc Tả Use case

15


Sơ đồ trình tự

Quy Trình Nghiệp Vụ

16


17


18


Sơ đồ giải
Website bán nước

3.1 Xác định yêu cầu
3.1.1 Yêu cầu chức năng
Quản lý sản phẩm:
Thêm sản phẩm mới
Sửa thông tin sản phẩm
Xóa sản phẩm
Hiển thị danh sách sản phẩm
Tìm kiếm sản phẩm
Phân loại và quản lý danh mục sản phẩm
Quản lý đơn hàng:
Hiển thị danh sách đơn hàng

Xem chi tiết đơn hàng
Cập nhật trạng thái đơn hàng
Xử lý thanh tốn và tính tốn tổng tiền
Gửi thơng báo cho khách hàng về trạng thái đơn hàng
Quản lý người dùng:
19


Đăng ký tài khoản mới
Đăng nhập và xác thực người dùng
Quản lý thông tin cá nhân
Quản lý địa chỉ giao hàng
Xem lịch sử đơn hàng
Đánh giá và nhận xét sản phẩm
Giỏ hàng:
Thêm sản phẩm vào giỏ hàng
Xem giỏ hàng và cập nhật số lượng sản phẩm
Xóa sản phẩm khỏi giỏ hàng
Tính tốn tổng giá trị đơn hàng
Tìm kiếm và bộ lọc:
Tìm kiếm sản phẩm theo từ khóa, danh mục, hoặc thuộc tính khác
Sắp xếp và bộ lọc kết quả tìm kiếm theo yêu cầu của người dùng
Quảng cáo và khuyến mãi:
Hiển thị các chương trình khuyến mãi và giảm giá
Áp dụng mã giảm giá và cung cấp các ưu đãi đặc biệt cho người dùng
Hỗ trợ và liên hệ:
Cung cấp thông tin liên hệ và hỗ trợ cho khách hàng
Hỗ trợ trực tuyến qua chat hoặc hệ thống ticket
Quản lý nội dung:
Quản lý trang chủ và các trang nội dung khác trên website

Hiển thị thông tin và tin tức mới nhất liên quan đến sản phẩm và dịch vụ
Thống kê và báo cáo:
Thống kê doanh thu, số lượng sản phẩm bán được
Báo cáo về hoạt động kinh doanh và xu hướng tiêu dùng
3.3 Cơ sở dữ liệu hệ thống

20


Các thành phần chức năng
3.5.1 Menu
3.5.2 Chức năng đăng nhập hệ thống
3.5.3 Chức năng thông tin sinh viên
3.5.4 Chức năng hiển thị thông tin điểm của sinh viên
3.5.5 Chức năng hiển thị thông tin giảng viên
3.5.6 Chức năng hiển thị thông tin môn học
3.5.7 Chức năng hiển thị thông tin lớp học

21


Chương 4: Thiết kế giao diện cho từng chức năng
3.6 Thiết kế giao diện hệ thống
Trang Chủ Website

Giao diện Tab

Giao diên về Website
- Hiển thị thông tin về website

22


Giao diện thực đơn
- Chức năng hiển thị các món ăn
- Chức năng thêm, sửa, xóa
- Chức năng đặt hàng

Giao diện đánh giá
- Hiển thị các đánh giá của khách hàng

23


Giao diện gửi phản hồi & liên hệ
- Có liên kết các nền tảng mạng xã hội
- Có ghim vị trị
- Thông tin liên hệ
- Nhập thông tin liên hệ

KẾT LUẬN
Kết luận đề tài
Trong quá trình nghiên cứu và thực hiện xây dựng Website Bán Nước Giải Khát, em
đã nhận thấy rằng nhu cầu về nước giải khát và đồ uống liên quan ngày càng tăng, đòi
hỏi sự cải tiến trong hình thức kinh doanh và tiếp cận khách hàng. Sự tiện lợi và đa
dạng trong việc mua sắm trực tuyến đã thu hút đông đảo khách hàng, bao gồm cả thị
trường nước giải khát. Điều này chứng tỏ Website Bán Nước Giải Khát sẽ mang lại
nhiều tiềm năng và cơ hội phát triển trong tương lai.
Ý nghĩa thực tiễn của đề tài đặt ra là xây dựng các sản phẩm công nghệ phù hợp với
nhu cầu của xã hội, từ đó rèn luyện, trau đồi, phát triển kiến thức của bản thân và đáp

ứng nhu cầu của các nhà tuyển dụng sau khi ra trường. Đồng thời, Website Bán Nước
Giải Khát cịn tạo ra sản phẩm thực tế có giá trị sử dụng trong cuộc sống, giúp người
dùng tiếp cận và trải nghiệm dịch vụ nước giải khát một cách thuận tiện và đa dạng.
Trong quá trình thực hiện đề tài, em đã khảo sát thực trạng về thị trường nước giải
khát và các website bán hàng trực tuyến cùng chủ đề. Điều này đã giúp em hiểu rõ
hơn về cơ hội và thách thức khi xây dựng Website Bán Nước Giải Khát. em cũng đã

24


tìm hiểu về các thương hiệu lớn và quốc tế trong lĩnh vực này như Starbucks để học
hỏi và áp dụng những kinh nghiệm tốt vào dự án của mình.
Tuy nhiên, em cũng nhận thấy rằng để thành công trong việc xây dựng và phát triển
Website Bán Nước Giải Khát, cần có sự đầu tư về quảng cáo, tiếp thị và xây dựng
thương hiệu. Đồng thời, cần có sự đổi mới và cải tiến liên tục để đáp ứng nhu cầu
ngày càng cao của khách hàng và cạnh tranh với các đối thủ trong thị trường nước
giải khát ngày càng sôi động.
Đánh giá chung
Ưu điểm:
Đáp ứng nhu cầu ngày càng tăng về nước giải khát và đồ uống liên quan thông qua
nền tảng mua sắm trực tuyến thuận tiện và đa dạng.
Tiếp cận khách hàng rộng rãi, bao gồm cả thị trường nước giải khát đang phát triển
mạnh mẽ.
Tạo điểm đặc biệt cho doanh nghiệp trong việc phục vụ khách hàng qua Website, tăng
tính cạnh tranh và xây dựng thương hiệu.
Cung cấp thông tin chi tiết về sản phẩm, giá cả và các chương trình khuyến mãi, giúp
khách hàng dễ dàng lựa chọn và đưa ra quyết định mua hàng.
Nhược điểm:
Đòi hỏi sự đầu tư về quảng cáo và tiếp thị để thu hút lượng khách hàng đáng kể vào
Website.

Cần thời gian và nguồn lực đáng kể để xây dựng và duy trì Website, đảm bảo tính bảo
mật và ổn định của hệ thống.
Cạnh tranh cao trong thị trường nước giải khát trực tuyến, yêu cầu sự đổi mới và cải
tiến liên tục để giữ vững vị trí và thu hút khách hàng.
Tóm lại, dự án "Xây Dựng Website Bán Nước Giải Khát" đã giúp em hiểu rõ hơn về
thị trường nước giải khát trực tuyến và các thách thức trong việc xây dựng và phát
triển Website. Dự án này đem lại những cơ hội và tiềm năng phát triển lớn, cùng với
những thử thách cần được vượt qua. Tuy nhiên, em luôn sẵn sàng cải tiến và phát
triển dự án để đáp ứng sự mong đợi của khách hàng và đạt được thành công bền vững
trong lĩnh vực này.
Hướng phát triển và mở rộng đề tài
Nâng cao chất lượng dịch vụ và trải nghiệm người dùng: Tiếp tục đầu tư và nâng cấp
hệ thống Website để cải thiện trải nghiệm người dùng. Tối ưu hóa giao diện và tốc độ
tải trang, giúp khách hàng dễ dàng tìm kiếm và lựa chọn sản phẩm. Đồng thời, cung
cấp dịch vụ hỗ trợ trực tuyến và chăm sóc khách hàng tận tình để tăng tính hài lịng và
trung thành của khách hàng.
Tăng cường chiến lược tiếp thị và quảng bá thương hiệu: Đẩy mạnh hoạt động tiếp thị
và quảng cáo để thu hút lượng khách hàng đáng kể vào Website. Sử dụng các kênh
truyền thông và mạng xã hội phổ biến để tăng tầm vóc và uy tín của thương hiệu. Tạo
ra các chương trình khuyến mãi, giảm giá hấp dẫn để kích thích mua sắm và giới thiệu
dịch vụ của Website tới nhiều đối tượng khách hàng.
Phát triển ứng dụng di động: Xây dựng ứng dụng di động dành riêng cho Website Bán
Nước Giải Khát, giúp khách hàng tiện lợi hơn trong việc mua sắm nước giải khát qua
25