Đồ Án Cơ Sở 1 Đề Tài Xây Dựng Website Bán Đồ Ăn Vặt.doc

TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN VÀ
TRUYỀN THÔNG VIỆT – HÀN

KHOA KHOA HỌC MÁY TÍNH

ĐỒ ÁN CƠ SỞ 1

ĐỀ TÀI:Xây dựng website bán đồ ăn vặt


MỞ ĐẦU

Ngày nay với sự phát triển mạnh mẽ của khoa học công nghê.Công Nghệ thông
tin là một trong những ngành có vị thế dẫn đầu và có vai trị rất lớn trong sự
phát triển chung đó.Các ứng dụng của công nghệ thông tin được áp dụng trong
mọi lĩnh vực nghiên cứu khoa học cũng như mọi lĩnh vực của cuộc sống.Là một
phần của Công Nghệ Thông tin,Công nghệ WEB đang có được sự phát triển
mạnh mẽ và phổ biến rất nhanh bởi những lợi ích mà nó mang lại cho cộng
đồng rất lớn.

Bằng việc lựa chọn và thực hiện đề tài “Xây dựng web bán đồ ăn vặt”,em muốn
tìm hiểu và đưa ra giải pháp giải quyết việc bán hàng trực tuyến.Website mang
lại những lựa chọn linh hoạt và tiện lợi trong việc tìm mua sản phẩm .Các thơng
tin sản phẩm được hiển thị chi tiết với từng sản phẩm ,từ đó khách hàng dễ
dàng lựa chọn được thứ mình cần


LỜI CẢM ƠN

Để hoàn thành đề tài :”Xây dựng web bán đồ ăn vặt “xin cảm ơn đến những chỉ
dạy của thầy cô ,truyền đạt cho em kiến thức về chuyên ngành để em có thể thiết

kế web tĩnh này.
Trong bài báo cáo hay đề tài còn rất nhiều thiết sót,hạn chế .Vì thế em rất mong
nhận được sự quan tâm và đánh giá đến từ phía thầy cơ để bài của em được hồn
thiện hơn.
Những đóng góp của thầy cô sẽ giúp em nhận ra những hạn chế và qua đó em có
thêm nguồn tư liệu mới để giúp cho nghiên cứu sau này hay cụ thể hơn là phát
triển 1 web tĩnh thành 1 web động có thể mua bán.


MỤC LỤC

Trang
MỞ ĐẦU...........................................................................................................
Chương 1

Tổng quan về Công nghệ thiết kế website...........................................

1,1Tìm hiểu về các ngơn ngữ lập trình.................................................................
1.1.1.Ngơn ngữ Html
1.1.2.Ngơn ngữ css
1.2

Tìm hiểu về thư viện hỗ trợ........................................................................

1.2.1.Thư viện javascipt
1.2.2.Thư viện bootstrap
Chương 2

Phân tích thiết kế hệ thống website.....................................................

2.1

Chức năng...................................................................................................

2.2

Yêu cầu........................................................................................................

Chương 3

Thiết kế và xây dựng web.....................................................................

Chương 4

Kết luận và Hướng phát triển...............................................................

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


CHƯƠNG 1 TỔNG QUAN VỀ CÔNG NGHỆ THIẾT KẾ WEBSITE
1.1 Tìm hiểu về các ngơn ngữ lập trình

1.1.1 Ngơn ngữ html5
HTML (viết tắt của từ Hypertext Markup Language, hay là "Ngôn ngữ Đánh dấu
Siêu văn bản") là một ngôn ngữ đánh dấu được thiết kế ra để tạo nên các trang
web trên World Wide Web. Cùng với CSS và JavaScript, HTML là một trong
những ngôn ngữ quan trọng trong lĩnh vực thiết kế website. HTML được định
nghĩa như là một ứng dụng đơn giản của SGML và được sử dụng trong các tổ
chức cần đến các yêu cầu xuất bản phức tạp. HTML đã trở thành một chuẩn mực

của Internet do tổ chức World Wide Web Consortium (W3C) duy trì. Phiên bản
chính thức mới nhất của HTML là HTML 4.01 (1999). Sau đó, các nhà phát triển
đã thay thế nó bằng XHTML. Hiện nay, phiên bản mới nhất của ngôn ngữ này là
HTML5.
Bằng cách dùng HTML động hoặc Ajax, lập trình viên có thể được tạo ra và xử lý
bởi số lượng lớn các cơng cụ, từ một chương trình soạn thảo văn bản đơn giản –
có thể gõ vào ngay từ những dòng đầu tiên – cho đến những công cụ xuất bản
WYSIWYG phức tạp. Hypertext là cách mà các trang Web (được thiết kế bằng
HTML) được kết nối với nhau. Và như thế, đường link có trên trang Web được
gọi là Hypertext. Như tên gọi đã nói, HTML là ngôn ngữ đánh dấu bằng thẻ
(Markup Language), nghĩa là bạn sử dụng HTML để đánh dấu một tài liệu text
bằng các thẻ (tag) để nói cho trình duyệt Web cách để cấu trúc nó để hiển thị


1.1.2.Ngơn ngữ CSS
CSS giúp ích rất nhiều khi viết một trang web bằng HTML.
CSS là gì?


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



CSS mô tả cách các phần tử HTML hiển thị trên màn hình và các
phương tiện khác.



CSS rất hữu ích và tiện lợi. Nó có thể kiểm sốt tất cả các trang trên
một website.



Các stylesheet ngoài được lưu trữ dưới dạng các tập tin .CSS.

CSS được dùng để định nghĩa kiểu cách cho các trang trên website của bạn, gồm
cả thiết kế, dàn trang và các cách hiển thị khác nhau trên nhiều thiết bị với kích
thước màn hình khác nhau.
HTML khơng có phần tử để để định dạng cho trang web. HTML chỉ được dùng để
tạo nội dung cho trang. Khi các phần tử như <font> và thuộc tính màu sắc được
thêm vào HTML 3.2, cơn ác mộng của các nhà phát triển web bắt đầu. Việc phát
triển một website lớn mà thêm thông tin font hay màu sắc vào từng trang đòi
hỏi rất nhiều thời gian.
Để giải quyết vấn đề này, World Wide Web Consortium (W3C) đã tạo ra CSS,
giúp loại bỏ việc định dạng kiểu cách khỏi trang HTML.Các định nghĩa liên quan
đến kiểu cách được đưa vào tập tin .css và nhờ vào tập tin stylesheet ngồi, bạn
có thể thay đổi tồn bộ website chỉ bằng một tập tin duy nhất.


1.1 Một số thư viện hỗ trợ
1.1.1 Thư viện javascript
JavaScript là một ngôn ngữ kịch bản hướng đối tượng, đa nền tảng, được sử
dụng để giúp cho các trang Web có tính tương tác với người dùng. Ngồi ra cịn
có các phiên bản JavaScript phía máy chủ nâng cao hơn như Node.js, cho phép
thêm nhiều chức năng vào trang Web hơn. JavaScript là một ngơn ngữ lập trình
phổ biến có tính ứng dụng cao. Ngày nay, JavaScript được sử dụng trong nhiều
lĩnh vực khác như phát triển phía máy chủ, phát triển ứng dụng di động,….
Ta có thể thực hiện chạy các đoạn mã được viết bằng ngôn ngữ JavaScript theo
các cách sau:
1. Sử dụng tab bảng điều khiển của trình duyệt web.

2. Sử dụng Node.js.
3. Tạo các trang web
1.2.2.Thư viện 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 sẵn có như typography, forms, buttons,
tables, grids, navigation, image carousels… Cùng Mắt Bão tìm hiểu tính năng và
lợi ích mang lại cho lập trình viên của Bootstrap là gì nhé!
Bootstrap là một bộ sưu tập miễn phí của các mã nguồn mở và công cụ dùng để
tạo ra một mẫu webiste hồn chỉnh. Với các thuộc tính về giao diện được quy
định sẵn như kích thước, màu sắc, độ cao, độ rộng…, các designer có thể sáng
tạo nhiều sản phẩm mới mẻ nhưng vẫn tiết kiệm thời gian khi làm việc
với framework này trong quá trình thiết kế giao diện website.


Giới thiệu
1.1.Tính cấp thiết của đề tài

Hiện nay xuất hiện nhiều đồ ăn vặt được nhiều bạn ưa chuộng.Nhằm đáp ứng
nhu cầu đó thì 1 trang web bán đồ ăn vặt là sự cần thiết để vừa tiết kiệm thời
gian vừa tiện lợi nhất có thể cho mọi người.Web đưa đến cho mọi người sản
phẩm mà ở đó họ có thể so sánh từng loại để có thế lựa chọn mua hay không.

1.2.Phương pháp nghiên cứu
Đề tài đựa trên kết hợp:
-Html5
-Css3
-Bootstrap 4
-Javascript

1.3.Kết cấu đề tài

Web bán đồ ăn vặt gồm 1 trang chủ trình bày sản phẩm bán của web,những sản
phẩm được liện kết với 1 trang con riêng để giới thiệu về sản phẩm đó.Bên cạnh
đó trang chủ cịn liên kết đến 1 trang con dẫn đến form đăng kí . Một trang con
để giới thiệu web, một trang con để hướng dẫn đặt hàng,một trang con để liên
hệ cho shop.Web còn đưa đến link liên kết để chỉ rõ facebook nhân viên,địa chỉ
shop


Chương 2 PHÂN TÍCH THIẾT KẾ HỆ THỐNG WEB
1.2 Chức năng
Đây là 1 website bán và giới thiệu sản phầm là những đồ ăn vặt tiện lợi với các
chi tiết mặt hàng , giá cả chinh xác.Có các chức năng:
- Đăng nhập và đăng kí: Khách hàng có thể đăng kí để có tài khoản riêng cho
mình.Khi đăng nhập khách hàng chỉ cần nhập vào email và mật khẩu đã đăng kí
trước đó. Bạn có thể đăng nhập qua 2 hình thức là đăng nhập bằng email mật
khẩu hoặc bạn có thể đăng nhập bằng chính facebook của bạn
-Hiển thị danh mục sản phẩm:
+Shop sẽ đưa ra cho bạn rất nhiều sản phẩm từ đồ ăn , nước uống đến các mặt
hàng khác . Khi đó bạn có thể tìm ra lựa chọn của mình.
+Sản phẩm được bày bán trên chính trang chủ shop . Nó sẽ tiện lợi hơn khi bạn
chỉ cần đăng nhập vào là sẽ được đưa đến luôn mục sản phẩm bạn cần mua
- Hiển thị thông tin sản phẩm:
+Về phần thông tin sản phẩm : Bạn có thể biết được mọi thơng tin sản phẩm
như : Giá thành sản phẩm; Hình ảnh minh họa của sản phẩm; Những đanh giá
chi tiết về sản phẩm
-Hướng dẫn mua hàng:
+Shop sẽ hướng dẫn cho bạn kĩ lưỡng về cách thức đặt hàng thông qua số điện
thoại nhân viên , face book hay là liên lạc trực tiếp đến địa chỉ shop
-Liên hệ với quản trị:

+Cho phép bạn đặt ra những câu hỏi , vấn đề , thắc mắc hay những đánh giá sản
phẩm cho shop.
-Cung cấp thông tin shop:Mọi thông tin của shop được đề cập
+Giới thiệu shop đang bán những gì
+Tiêu chí sản phẩm đó
+Cam kết sản phẩm
+Số điện thoại shop
+ face book liên hệ


+ địa chỉ shop

1.1

YÊU CẦU

Phần khách hàng:
Khách hàng là người có nhu cầu mua sắm hàng hóa , họ sẽ tìm kiếm các mặt
hàng cần thiết từ hệ thống và đặt mua các mặt hàng này.Vì thế phải có các chức
năng:
+Hiển thị các danh sách các mặt hàng của cửa hàng để khách hàng xem , lựa
chọn và mua
+Khách hàng xem các thơng tin , tin tức đã có trên web
Phần thiết kế web:
+ Thiết kế dễ hiểu
+Giao diện mang tinh dễ dùng, đẹp mắt
+Cung cấp đầy đủ thông tin cho khách hàng
+Web luôn đổi mới và hấp dẫn

CHƯƠNG 3 Thiết kế và xây dựng web

3.1 Trang đăng nhập đăng kí
-Đăng Kí: Bạn chỉ cần nhập vào email,địa chỉ mật khẩu là sẽ có 1 tài khoản riêng
để có thế nhận nhiều ưu đãi hơn


-Đăng Nhập:Ở trang này bạn cần nhập email và mật khẩu để đăng nhập và tài
khoản của bạn

Bạn có thể liên kết giữa đăng nhập và đăng kí.
3.2 Trang giới thiệu
+Cho biết các thông tin cần thiết của shop
+Cho biết thêm cách thức đặt hàng ,các ưu đãi khi nhận được
3.3 Trang Giỏ hàng
- Khi bạn mua muốn mua hang bạn chỉ cần đưa đơn hàng vào giỏ hàng

3.4Trang liên hệ


- Form liên hệ để khách có thể nhập ý kiến phản hồi hay đánh giá shop.Kèm theo
đó khách hàng có thế biết được địa chỉ shop đã nhúng vào web

3.5 Trang chủ
Trang chủ đưa đến cho ta một số mặt hàng.Theo đó khách cịn được tham khảo
giữa các mặt hàng như mặt hàng nào đang được phổ biến ,mặt hàng nào được
ưa thích nhiều, mặt hàng nào mới được cập nhật


Trang chủ(index.html)
3.6 Trang sản phẩm
Nơi đây cho biết tất cả mặt hàng shop đang buôn bán.

Kết luận và Hướng phát triển

Đề tài thực hiện trong mảng phát triển web nhằm phục vụ nhu cầu của khách
hàng về xu hướng đồ ăn vặt hiện nay.Web giúp định hình được xu hướng , nhu
cầu online của 1 shop đồ ăn vặt để có thể phát triển trong tương lai gần.Thiết kế
web cần đủ kiến thức,kĩ năng và sự học hỏi những thông tin cần thiết,…..

Để thiết kế web bán đồ ăn vặt này em cũng đã tìm hiểu , học hỏi khá nhiều . Từ
đó cung cấp cho em rất nhiều kiến thức mới,những kĩ năng,khả năng tổng hợp
và chắt lọc thơng tin cần thiết, phân tích,….

Web thực hiện trên phương diện 1 web tĩnh , nó cũng đưa ra được 1 form trang
web khá đầy đủ để có thế phát triển lên 1 web động có thể mua bán.Hy vọng có
web có thể phát triển theo hướng tích cực nhất và đáp ứng nhu cầu cho tương
lai.