(TIỂU LUẬN) báo cáo đồ án cơ sở 1 đề tài xây DỰNG WEBSITE bán đồ ăn

Đố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ựn

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

BÁO CÁO ĐỒÁNCƠ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

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 ĐỒÁNCƠ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

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

Đặ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ị LanAnh đã 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ácthầ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ácthự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

DANH MỤC HÌNH VẼ

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, nhucầ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ếunhư:ăn uống, mua sắm, xem phim, nghe nhạc và vì vậy chúng ta phải đi tới cáctrung 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êngnê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ừ xakhô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à haytạ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 ứngnhu 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ậpvà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

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ạngnhư 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ềnInternet

- Nó thêm vài tags vào markup, để xác định rõ nội dung thuộc loại gì, như là < article>,

- 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

- 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áctrang HTML dựa trên đối tượng (object-based scriping language) Ngôn ngữ này chủ yếu dùngcho kỹ thuật lập trình ở phía client

- JavaScript có một số đặc điểm sau:

+ 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:

* Ư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

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àycà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

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ácmặt hàng được sắp xếp theo thứ tự dễ dàng tìm kiếm

- 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”

8Danh Mục

Xử lý mặt hàng

Thống kê

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

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

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

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ườidù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áctrang 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ườidù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

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

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

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 kinhdoanh đượ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ữngWebsite 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ươnglai

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ỏinhữ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 saunà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ựngthê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ũngnhư 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 emphá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àocũ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ácchứ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ánqua 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 Websitedù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ệcquả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áchhà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ênmôn của công ty, cửa hàng

DANH MỤC TÀI LIỆU THAM KHẢO[1] Mr Web Designer