ĐẠI HỌC ĐÀ NẴNG

TRƯỜNG ĐẠI HỌC CNTT – TT VIỆT HÀN

BÁO CÁO
ĐỒ ÁN CƠ SỞ 1

ĐỀ TÀI: XÂY DỰNG WEBSITE BÁN ĐỒ ĂN

Sinh viên thực hiện : Nguyễn Thanh Hiệp

Lương Vũ Bảo Duy
Lớp : 21CE1
Giảng viên hướng dẫn : TS.Phan Thị Lan Anh

Đà Nẵng, ngày 26 tháng 05 năm 2022

 ĐẠI HỌC ĐÀ NẴNG
TRƯỜNG ĐẠI HỌC CNTT – TT VIỆT HÀN

BÁO CÁO
ĐỒ ÁN CƠ SỞ 1

ĐỀ TÀI: XÂY DỰNG WEBSITE BÁN ĐỒ ĂN

Sinh viên thực hiện : Nguyễn Thanh Hiệp
Lương Vũ Bảo Duy
Lớp : 21CE1
Giảng viên hướng dẫn : TS.Phan Thị Lan Anh

Đà Nẵng, ngày 26 tháng 05 năm 2022

 NHẬN XÉT
(Của Giảng viên hướng dẫn)
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................

Đà Nẵng, ngày 25 tháng 05 năm 2021

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

Th.S Phan Thị Lan Anh

 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 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 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 em đã có thể hoàn thành Đồ án cơ sở 1.
Đặc biệt em xin gửi lời cảm ơn chân thành nhất tới cô giáo – ThS. Phan Thị Lan
Anh đã quan tâm, giúp đỡ tận tình 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. Em rất mong nhận được sự chỉ bảo, đóng góp ý kiến của các
thầy cô để em 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.

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

 MỞ ĐẦU
Thế kỷ XXI, xã hội đề cao tầm quan trọng và sự kết nối của Khoa học,
Kỹ thuật, Công nghệ. Sự phát triển của thương mại điện tử và chính phủ
điện tử trên khắp thế giới, làm biến đổi đáng kể bộ mặt văn hóa, nâng cao
chất lượng cuộc sống con người. Trong hoạt động sản xuất, kinh doanh, giờ
đây, thương mại điện tử đã khẳng định được vai trò xúc tiến và thúc đẩy sự
phát triển của doanh nghiệp. Đối với một cửa hàng hay quán ăn, việc quảng
bá và giới thiệu đến khách hàng các sản phẩm mới đáp ứng được nhu cầu
của khác hàng sẽ là cần thiết. Vậy phải quảng bá thế nào đó là xây dựng
được một Website cho cửa hàng của mình nhằm quảng bá tất cả các sản
phẩm của mình bán. Chính vì thế em đã chọn và thực hiện đề tài “XÂY
DỰNG WEBSITE BÁN ĐỒ ĂN” cho một cửa hàng bán mì quảng Bà
Mua. Người chủ cửa hàng sẻ đưa các sản phẩm lên website của mình và
quản lý bằng website đó. Khách hàng có thể đặt mua hàng trên website mà
không cần đến cửa hàng. Chủ cửa hàng sẽ gửi sản phẩm cho khách hàng khi
nhận được tiền. Tuy nhiên mặc dù đã nỗ lực hết sức mình nhưng chắc rằng
đồ án khó tránh khỏi thiếu sót. Em rất mong nhận được sự thông cảm,
những lời góp ý và chỉ bảo tận tình của quý Thầy Cô và các bạn.
 MỤC LỤC
Trang
LỜI CẢM ƠN ………………………………………………………………...
MỞ ĐẦU ……………………………….……………………………….…….
DANH MỤC CÁC TỪ VIẾT TẮT ……………………….………………….1
DANH MỤC HÌNH VẼ ………………………………………………………2
DANH MỤC SƠ ĐỒ ………………………………………………………….3
Chương 1: Giới thiệu đề tài ……………………………………….………….4
1.1 Tên đề tài…………………………………………………………4

1.2 Giới thiệu về dự án ……………………………………………... 4

1.3 Mục tiêu………………………………………………………….4

1.4 Công cụ thiết kế website ………………………………………...5

Chương 2: Công cụ kĩ thuật …………………………………….……………6

2.1 Tìm hiểu về HTML ………………………………….…………. 6

2.2 Giới thiệu tổng qua về ngôn ngữ lập trình JavaScript …………. 6

2.3 Tìm hiểu về CSS – Cascading Style Sheets …………..…………7

2.4 Bootstrap ………………………………………………….……..7

2.5 Phần mềm Visual Studio Code ……………………………….....7

Chương 3: Phân tích và thiết kế hệ thống …………………………………..9

3.1 Khảo sát hiện trạng và xây dựng hệ thống mới ………………. ..9
3.2 Phân tích hệ thống ……………………………………………. ..9
Chương 4: Triển khai xây dựng website …………………………………. .13
4.1 Tên Website………………………….……………………….....13
4.2 Hệ thống thông tin ……………………………………………. .13
4.3 Cấu trúc của trang web ………………………………………. ..13
4.4 Hình ảnh chi tiết Website ………………………………………14
Tổng kết …………………………………………….………………………...19
Kết quả …………………………………………………………………19
Hướng phát triển ……………………………………………...……….19
DANH MỤC TÀI LIỆU THAM KHẢO …………………………………...20
 DANH MỤC CỤM TỪ VIẾT TẮT

STT Cụm từ Viết tắt

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

DANH MỤC HÌNH VẼ

1
Hình 2 – 4: Giao diện sử dụng của phần mềm Visual Studio Code ………………...7
Hình 4 – 2: Logo website …………………………………………………………..14
Hình 4 – 4 – 1: Trang chủ ………………………………………………………….15
Hình 4 – 4 – 2: Trang danh mục sản phẩm ………………………………………...16
Hình 4 – 4 – 3: Trang chi tiết sản phẩm …………………………………………....17
Hình 4 – 4 – 4: Trang hỗ trợ khách hàng …………………………………………..18
Hình 4 – 4 – 5: Trang thông tin hình thức thanh toán ...............................................19

DANH MỤC SƠ ĐỒ
Hình 3 – 2 – 1: Biểu đồ luồng dữ liệu mức khung cảnh……………….…....…...9
Hình 3 – 2 – 2: Sơ đồ phân cấp chức năng mức dưới đỉnh……………...………10
Hình 3 – 2 – 3: Sơ đồ chức năng Khách hàng…………………………………...11
Hình 3 – 2 – 4: Sơ đồ chức năng nghiệp vụ quản lý kho...…… ………………..12
Hình 3 – 2 – 5: Sơ đồ chức năng nghiệp vụ bán hàng…………………………..13

2
 CHƯƠNG 1: GIỚI THIỆU ĐỀ TÀI
1.1. Tên đề tài:
“Xây dựng website bán đồ ăn”
1.2. Giới thiệu về dự án: 
Thế giới ngày một phát triển, đời sống con người ngày càng hiện đại hóa, nhu
cầu về đời sống vật chất và tinh thần của con người mỗi ngày một cao và có nhiều
đòi hỏi khắt khe hơn.
Hằng ngày mỗi người trong chúng ta đề phải có những nhu cầu thiết yếu
như:ăn uống, mua sắm, xem phim, nghe nhạc... và vì vậy chúng ta phải đi tới các
trung tâm giải trí hay mua sắm... để mua những sản phảm mình muốn hay đơn giản
là thưởng thức những bản nhạc mới nhất.
Nắm bắt được nhu cầu đó và xét thấy sự phát triển vượt bật của mạng Internet
ở khắp nơi trên thế giới nói chung và tại nước ta trong những năm gần đây nói riêng
nên việc ứng dụng công nghệ thông tin vào lĩnh vực tìm kiếm thông tin, truy cập dữ
liệu từ xa không còn khó khăn. Người ta tận dụng tối đa những lợi ích mà lĩnh vực
này mang lại.
2TL FOOD là một trong những trang web đặc thù áp dụng công nghệ thông
tin vào hoạt động: bán thức ăn qua mạng và sau này sẽ có xu hướng mở rộng. 2TL
FOOD là một nhà hàng luôn sáng tạo và cải tiến các món ăn mới để phục vụ cho
khách hàng. Việc giao dịch với khách hàng chủ yếu diễn ra tại trang web này.
Mục tiêu của việc xây dựng trang web này nhằm giúp cho khách hàng có thể
mua hàng trực tiếp từ xa thông qua mạng internet phổ biến. Khách hàng ở nhà hay
tại công ty vẫn có thể dễ dàng tham khảo thông tin sản phẩm mình tìm, so sánh giá
cả các mặt hàng và lựa chọn cho mình loại sản phẩm phù hợp nhu cầu của mình,
giúp công việc mua sắm một cách nhanh chóng, tiện lợi, tiết kiệm thời gian, đáp ứng
nhu cầu thực tế. Hệ thống tìm kiếm dễ dàng, giao diện thân thiện. Chỉ cần đăng nhập
vào hệ thống với tài khoản đã có (nếu khách hàng đã là hội viên của cửa hàng) hay

3
 chỉ cần vài thao tác đăng kí đơn gian là khách hàng có thể tự do chọn mua và tạo đơn
đặt hàng tại hệ thống. Bên cạnh đó những thông tin tin tức mới nhất của công ty.

1.3. Mục tiêu của dự án:

- Nhằm giới thiệu rộng rãi các món ăn của quán đến người dùng với các chi tiết mặt
hàng cũng như giá cả một cách chính xác nhất để có thể tăng doanh thu cũng như
bán hàng thuận lợi.
- Áp dụng những kiến thức công nghệ web và các môn học vừa đã được học.
- Nghiên cứu và phát triển Website “”
- Thiết kế tối ưu hóa Website chuẩn CEO, thân thiện với các trang tìm kiếm Google,
Bing, v.v…giúp bạn tiếp cận khách hàng tốt hơn.
- Tích hợp giao diện mobile làm thuận tiện hơn cho khách hàng trong việc sử dụng
trên điện thoại, máy tính bảng,…
- Được tích hợp các công nghệ thiết kế Website mới nhất hiện nay như : HTML5,
CSS3, Bootstrap 3 và 4.
- Thiết kế Website bán điện thoại trực tuyến được tối ưu hoạt động theo công nghệ
mạnh nhất trên thế giới về độ tương thích với các hệ điều hành.
1.4. Công cụ thiết kế Website
- Sử dụng ngôn ngữ lập trình web HTML, Javascript và các công cụ hỗ trợ định dạng
như CSS và bootstrap để tạo một Website tĩnh.
- Sử dụng Visual Studio Code.

4
 CHƯƠNG 2: CÔNG CỤ KĨ THUẬT
2.1 Tìm hiểu về HTML:
2.1.1: HTML là gì?
- HTML là chữ viết tắt của Hypertext Markup Language. Nó giúp cho người dùng tạo
cấu trúc thành phần trong Website hoặc ứng dụng, phân chia các đoạn văn, heading, links,
blockquotes ...
2.1.2: Lịch sử của HTML:
- HTML được sáng tạo bởi “Tim Berners – Lee”, nhà vật lý học của trung tâm nghiên
cứu CERN ở Thụy Sĩ. Anh ta đã nghĩ ra được ý tưởng cho hệ thống hypertext trên nền
Internet.
- Nó thêm vài tags vào markup, để xác định rõ nội dung thuộc loại gì, như là < article>,
<header>, <footer>.
2.1.3. Ưu và nhược điểm của HTML:
• Ưu điểm:
- Ngôn ngữ được sử dụng rộng lớn này có rất nhiều nguồn tài nguyên hỗ trọ và
cộng đồng sử dụng cực lớn.
- Có quá trình học đơn giản và trực tiếp.
- Mã nguồn mở và hoàn toàn miễn phí.
- Dễ dàng tích hợp với các ngôn ngữ phụ trợ như PHP và Node.js.
• Nhược điểm:
- Được dùng chủ yếu cho Website tĩnh. Đối với các tính năng động, bạn cần sử
dụng JavaScript hoặc ngôn ngữ phụ trợ thứ ba như PHP.
- Hầu hết các trang đều cần được tạo riêng biệt, bất kể cả khi nó sử dụng cùng các
yếu tố, như là headers hay footers.
- Một số trình duyệt chậm hỗ trợ tính năng mới.
2.2. Tìm hiểu về ngôn ngữ lập trình JavaScript:
- JavaScript là một ngôn ngữ kịch bản (scriping language) dùng để tương tác với các
trang HTML dựa trên đối tượng (object-based scriping language). Ngôn ngữ này chủ
yếu dùng cho kỹ thuật lập trình ở phía client.
- JavaScript có một số đặc điểm sau:

5
 + Là một ngôn ngữ thông dịch (interpreted language), nghĩa là các script thi hành
không cần biên dịch trước (precompile).
+ Giống như C và Java, chúng có phân biệt chữ HOA và thường.
2.3. Tìm hiểu về CSS – Cascading Style Sheets:
2.3.1 Style Sheet là gì?
- Là một tập hợp các quy định về cú pháp khai báo dùng để định dạng Website,
chính xác hơn là nơi dùng để định dạng các style.
- Nói đơn giản hơn, Style Sheet giống như là một bộ công cụ dùng để “trang trí” cho
Website.
2.3.2 Giới thiệu CSS – Cascading Style Sheets
* CSS là gì?
- CSS là ngôn ngữ tạo phong cách cho Website – Cascading Style Sheets
language. Nó dung để tạo phong cách và định kiểu cho những yếu tố được viết dưới
dạng ngôn ngữ đánh dấu, như HTML. Nó phân biệt cách hiển thị của trang bằng
cách điều khiển bố cục, màu sắc và font chữ.
* Ưu điểm của CSS:
- Kết hợp và làm tăng sức mạnh cho HTML.
- Có thể đặt các đối tượng ở bất kì vị trí nào trên webpage.
- CSS tương thích với hầu hết các trình duyệt.
- Hỗ trợ tối đa việc tùy biến webpage.
- Hỗ trợ các công cụ tìm kiếm.
- Giúp các webpage có sự đồng bộ tuyệt đối, dễ dàng nâng cấp giao diện.
2.4. Bootstrap:
- Bootstrap cho phép quá trình thiết kế Website diễn ra nhanh chóng và dễ dàng hơn
dựa trên những thành tố cơ bản có sẵn như typography, forms, buttons, tables, grids,
navigations, image carousels ….
2.5. Phần mềm Visual Studio Code:
2.5.1. Visual Studio Code là gì?
- Visual Studio Code (VS Code hay VSC) là một trong những trình soạn thảo mã
nguồn phổ biến nhất được sử dụng bởi các lập trình viên. Nhanh, nhẹ, hỗ trợ đa nền
tảng, nhiều tính năng và là mã nguồn mở chính là những ưu điểm vượt trộ khiến VS
Code ngày càng được ứng dụng rộng rãi.
6
2.5.2. Lý do nên chọn Visual Studio Code:
- Lý do nên sử dụng Visual Studio Code là vì nó có rất nhiều ưu điểm vượt trội so
với bất kỳ IDE nào khác:
+ Hỗ trợ đa nền tảng: Windows, Linux, Mac.
+ Hỗ trợ đa ngôn ngữ: C/C+, C#, Visual Basic, HTML, CSS, JavaScript, JSON.
+ Tính năng mạnh mẽ, Giao diện thân thiện
- Và trên hết, Visual Studio Code là phần mềm miễn phí, được đông đảo lập trình
viên trên thế giới sử dụng.
- Giao diện sử dụng:

Hình 2 – 4: Giao diện sử dụng của phần mềm Visual Studio Code

7
 CHƯƠNG 3: PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG
3.1. Khảo sát hiện trạng và xây dựng hệ thống mới:
* Sau khi khảo sát nhóm em đã nắm bắt được thông tin:
- Quản lý khách hàng: Mỗi khách hàng được quản lý các thông tin sau: Họ tên, địa
chỉ, số điện thoại, ngày sinh, email…
- Quản lý món ăn: Tên món ăn, đơn giá, số lượng, hình ảnh, chi tiết.
- Xử lý được đơn hàng và thống kê.
* Khách hàng: Người lựa chọn món ăn để mua. Khác với mua trực tiếp tại nhà hàng,
ở đây khách hàng tự thao tác thông qua từng bước cụ thể để có thể mua hàng. Trên
mạng các mặt hàng được sắp xếp theo thứ tự dễ dàng tìm kiếm.
3.2. Phân tích hệ thống:
- Sau khi khảo sát hiện trạng của hệ thống và xây dựng hệ thống thì em đã đưa ra các
tệp CSDL của “WEBSITE BÁN ĐỒ ĂN”
- Qua quá trình khảo sát, phân tích thực trạng và xây dựng hướng phát triển cho hệ
thống mới em đã xây dựng cấu trúc của hệ thống
“WEBSITE BÁN ĐỒ ĂN”
- Xây dựng biểu đồ phân cấp chức năng.
- Biểu đồ luồng dữ liệu:
Ta xây dựng biểu đồ luồng “WEBSITE BÁN ĐỒ ĂN”

8
Danh Mục Đặt hàng Hóa đơn Thống kê

Kiểm tra khách hàng

DM hàng hóa

Tra cứu mặt hàng

DM loại hàng

Kiểm tra đặt hàng

DM tin tức
Xử lý mặt hàng

Hình 3 – 2 – 1: Biểu đồ luồng dữ liệu mức khung cảnh:

9
Hình 3 – 2 – 2: Sơ đồ phân cấp chức năng mức dưới đỉnh

10
Hình 3 – 2 – 3: Sơ đồ chức năng Khách hàng

11
Hình 3 – 2 – 4: Sơ đồ chức năng nghiệp vụ quản lý kho

12
Hình 3 – 2 – 5: Sơ đồ chức năng nghiệp vụ bán hàng

13
 CHƯƠNG 4: TRIỂN KHAI XÂY DỰNG WEBSITE
4.1 Tên Website (Tên cửa hàng):
Sau khi lên ý tưởng và tham khảo ý kiến của giáo viên hướng dẫn thì chúng em quyết
định đặt tên website là 2TL FOOD. Vừa đơn giản, nhưng giúp người dùng có thể nhớ tên
website và tìm kiếm một cách rất dễ dàng trên các công cụ tìm kiếm phổ biến.
4.2. Logo Website:

Hình 4.2: Logo Website

Logo của website được thiết kế đơn giản với sắc màu nhẹ nhàng và đẹp. Giúp người
dùng ấn tượng với logo của trang, không bị hòa lẫn với những logo đầy màu sắc của các
trang khác.
4.3. Cấu trúc của Website:
Đây là một website bán và giới thiệu sản phẩm của cửa hàng, công ty đến người
dùng với các chi tiết mặt hàng với giá thành chính xác. Website gồm có các trang:

14
15
4.4. Hình ảnh chi tiết Website:

Hình 4 – 4 – 1: Trang chủ

16
Hình 4 – 4 –2: Trang danh mục sản phẩm

17
Hình 4 – 4 –3: Trang chi tiết sản phẩm

18
Hình 4-4-4: Trang hỗ trợ khách hàng

19
 Hình 4-4-5: Trang BLOG

TỔNG KẾT
Kết quả
Trên nghiên cứu về ngôn ngữ Website và các ứng dụng lập trình. Dưới sự hướng dẫn
của cô Phan Thị Lan Anh, em đã thiết kế thành công được một Website bán đồ ăn. Tuy
kết quả đạt được chưa cao, Website còn nhiều điểm hạn chế chưa khắc phục được, nhưng
đó cũng là bước khởi đầu để em có thể hướng tới một Website hoàn thiện và có thể đi kinh
doanh được. 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ứ, những kĩ năng bootstrap, javascript, CSS để có thể thiết kế được những
Website có chất lượng cao hơn sau này.
Về Website demo, sau khi em lấy ý kiến của các giáo viên và cá bạn trong khoa.
Website đạt được những kết quả khả quan và có tiềm năng phát triển rất lớn trong tương
lai.

20
 Em mới là những sinh viên bước đầu lập trình, nên Website cũng không thể tránh khỏi
những lỗi, những điểm chưa hợp lí và đó cũng là động lực để em có thể làm tốt hơn sau
này.
Hướng phát triển:
Có nhiều hướng phát triển cho Website này, có thể phát triển rất nhiều mặt, xây dựng
thêm trang Admin dành cho chủ cửa hàng để quản lí khách hàng, cập nhật sản phẩm cũng
như giá thành sản phẩm, ... hoặc có thể xây dựng Website hỗ trợ tìm kiếm do chính em
phát triển. Có thể xây dựng thêm những Website đa ngôn ngữ, để bất kì vị khách hàng nào
cũng có thể xem và hiểu được.
Hướng phát triển của Website là tiến đến một thương mại điện tử với đầy đủ các
chức năng thanh toán tiền qua mạng. Nhưng vì trong nước ta hiện nay vấn đề thanh toán
qua mạng còn gặp nhiều khó khăn và chưa phổ biến lắm cho nên chức năng của Website
dùng để hỗ trợ cho nhà quản trị còn hạn chế. Vấn đề chính của Website là phục vụ việc
quảng cáo. Từ đó, bên cạnh việc thương mại thì vấn đề cần phải tập trung thu hút khách
hàng liên hệ và thỏa thuận thiết kế, lắp đặt một công trình nào đó thuộc lĩnh vực chuyên
môn của công ty, cửa hàng.

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

[1]. Mr Web Designer

21