BÁO CÁO ĐỒ ÁN CƠ SỞ - ĐỀ TÀI: THIẾT KẾ WEBSITE BÁN GIÀY TRỰC TUYẾN

ĐẠI HỌC ĐÀ NẴNG

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

BÁO CÁO ĐỒ ÁN CƠ SỞ 1
ĐỀ TÀI:
THIẾT KẾ WEBSITE
BÁN GIÀY TRỰC TUYẾN

Sinh viên thực hiện:

Phan Văn Khải

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

THS.Ninh Khánh Chi

Lớp:

20IT10

Đà nẵng, tháng 5 năm 2021


ĐẠI HỌC ĐÀ NẴNG

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

Hiện nay với sự bùng nổ của công nghệ việc mua sắm không chỉ đơn giản là đến

cửa hàng và chọn món hàng mình ưa thích mà người tiêu dùng có thể dễ dàng truy
cập vào cửa hàng thông qua trang website mà cửa hàng xây dựng riêng. Ở đó khách
hàng dễ dàng lựa chọn, thay đổi để chọn ra sản phẩm mà mình ưa thích nhất. Sau đó

ĐỒ ÁN CƠ SỞ 1

chỉ vài bước đặt hàng nữa là họ sẽ đặt được sản phẩm mình lựa chọn. Với tiêu chí

XÂY DỰNG & PHÁT TRIỂN WEBSITE BÁN GIÀY
nhanh, tiện lợi, khơng tốn nhiều
cơng sức
và kích cầu sức mua. Chúng tôi phát triển
TRỰC
TUYẾN
website bán giày điện tử giúp người mua tiếp cận việc mua hàng thuận lợi.

Đà Nẵng, tháng 5 năm 2021


NHẬN XÉT
………………………………..
……………………………………………………………………………………
…
……………………………………………………………………………………
…
……………………………………………………………………………………
…
……………………………………………………………………………………
…
……………………………………………………………………………………

…
……………………………………………………………………………………
…
……………………………………………………………………………………
…
……………………………………………………………………………………
…
……………………………………………………………………………………
…
……………………………………………………………………………………
…
……………………………………………………………………………………
…
……………………………………………………………………………………
…
……………………………………………………………………………………
…
……………………………………………………………………………………
…
……………………………………………………………………………………
…


NHẬN XÉT

.......................................................................................................................
……………………………………………………………………………………
……………………………………………………………………………………
……………………………………………………………………………………
……………………………………………………………………………………

……………………………………………………………………………………
………………………………………………………


MỤC LỤC
MỞ ĐẦU..............................................................................................................1
Chương 1 Giới thiệu..............................................................................................2
1.1 Tổng quan....................................................................................................2
1.2 Giới thiệu về website bán giày.....................................................................2
1.3 Giới thiệu về các công cụ thiết kế website...................................................3
1.3.1 HTML là gì?..........................................................................................3
1.3.2 Giới thiệu về JavaScript........................................................................5
1.3.3 Giới thiệu về CSS..................................................................................5
1.3.4 Giới thiệu về Bootstrap.........................................................................6
Chương 2 Phân tích thiết kế hệ thống....................................................................7
2.1 Mơ hình tổng quan của hệ thống nghiên cứu...............................................7
2.1.1 Hệ thống thiết kế...................................................................................7
2.1.2 Hình ảnh các trang và chức năng trong website....................................7
2.2 Sơ đồ phân cấp hệ thống............................................................................11
Chương 3 Nghiên cứu tổng quan.........................................................................12
3.1 Phương pháp..............................................................................................12
3.2 Hạn chế, tồn tại của các phương pháp........................................................12
3.3 Quá trình triển khai xây dựng....................................................................12


DANH MỤC HÌNH
Trang


MỞ ĐẦU

Hiện nay với sự bùng nổ của công nghệ việc mua sắm không chỉ đơn giản là đến
cửa hàng và chọn món hàng mình ưa thích mà người tiêu dùng có thể dễ dàng truy
cập vào cửa hàng thơng qua trang website mà cửa hàng xây dựng riêng. Ở đó khách
hàng dễ dàng lựa chọn, thay đổi để chọn ra sản phẩm mà mình ưa thích nhất. Sau đó
chỉ vài bước đặt hàng nữa là họ sẽ đặt được sản phẩm mình lựa chọn. Với tiêu chí
nhanh, tiện lợi, khơng tốn nhiều cơng sức và kích cầu sức mua. Chúng tôi phát triển
website bán giày điện tử giúp người mua tiếp cận việc mua hàng thuận lợi.

Hình 1.1 – Demo trang web

1


Chương 1

Giới thiệu

1.1 Tổng quan
Hiện nay việc kinh doanh mua bán là nhu cầu không thể thiếu của mỗi
người. Việc quản bá và mua sắm các sản phẩm ngày càng được đầu tư và phát
triển. Với việc quản bá sản phẩm kinh doanh đến từng cá nhân với chi phí thấp,
hiệu quả cao là một vấn đề nan giải của người kinh doanh. Với nhu cầu ngày
càng cao của người tiêu dùng họ mong muốn có những thơng tin nhanh và chính
xác về sản phẩm mà họ muốn mua mà đối với việc tư vấn cho từng khách hàng
một là việc rất mất thời gian. Mặc khác trong tình hình dịch bệnh ngày nay việc
hạn chế đi lại là điều quan trọng nhất, nên việc mua hàng tại của hàng trở nên suy
giảm. Vì vậy để đáp ứng nhu cầu mua sắm của người tiêu dùng em đã tiến hành
thiết kế một trang web mua sắm giày trực tuyến, đáp ứng được nhu cầu mua sắm
của người dùng, giúp người dùng nắm bắt được giá cả và thông tin của sản phẩm
một cách dễ dàng và nhanh chóng nhất. Đặc biệt trong tình hình dịch bệnh hiên

nay thì việc mua sắm online đang trở nên phổ biến và phát triển.
Với việc mua sắm online ngày càng trở nên quan trọng và cần thiết , chỉ cần
một cú click chuột thì người dùng có thể có được sản phẩm mà mình mong muốn.
Sau khi đặt hàng các nhân viên giao hàng lập tức mang sản phẩm đến tận nhà
bạn. Mua sắm online cho phép mua hàng bất cứ khi nào mà người dùng muốn.
Website bán hàng online khơng bao giờ đóng cửa, có thể mua sắm 24/24 giờ và 7
ngày trong tuần. Mua sắm ở các chợ, trung tâm thương mại hay cửa hàng rất khó
để người dùng có thể so sánh đặc điểm và giá của các sản phẩm với nhau. Khi
mua hàng online, người dùng có thể dễ dàng so sánh và đưa ra lựa chọn sản phẩm
phù hợp nhất. Đôi khi chúng ta gặp phải những người bán hàng khó tính tại một
số địa điểm bán hàng. Mua sắm online thì khách hàng chẳng phải để ý đến
chuyện đó nữa cứ thoải mái lựa chọn mặt hàng mình thích.

1.2 Giới thiệu về website bán giày
Website bán giày của em có tên gọi là: SHOE STARTS. Là một trang web
mang lại cho những tín đồ yêu giày một nơi mua sắm giày và cung cấp những
2


thông tin về giày. Trang web đem đến cho người dùng nhiều sự lựa chọn đa dạng
và phong phú về những mẫu giày trên thị trường. Người dùng có thể tìm kiếm
riêng cho mình những đơi giày u tích. Hay có thể tìm hiểu nhiều thơng tin về
giày, các mẹo về giày hay có thể tương tác với người quản trị để được đăng
những thơng tin về giày của mình. Website cho phép khách hàng đặt hàng qua các
bước đơn giản, tiện lợi và nhanh chóng sau khi đặt hàng khách hàng sẽ nhận được
giày của mình vừa chọn mua trong khoảng thời gian nhanh nhất. Để thu hút
người dùng website luôn cập nhật và bổ sung thêm nhiều loại giày với nhiều mẫu
mã, màu sắc, thương hiệu…. khác nhau. Thông tin trên website được kiểm duyệt
chặt chẽ và liên tục được làm mới mỗi ngày.

1.3 Giới thiệu về các công cụ thiết kế website
-

Sử dụng các công cụ như: HTML, CSS, Bootstrap, Javascript để tạo ra
trang web.

-

Sử dụng Sublime Text 3 để viết code.

1.3.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 trang web hoặc ứng dụng, phân
chia các đoạn văn, heading, links, blockquotes ,..
-

HTML khơng phải là ngơn ngữ lập trình, đồng nghĩa với việc nó koong thể
tạp ra các chức năng “động” được. Nó chỉ giống như Microsoft Word,
dùng để bố cục và định dạng trang web.

• Lịch sử 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.

-

Hypertext có nghĩa là văn bản chứa links, nơi mọi người có thể xem và

truy cập ngay lập tức. Anh xuất bản phiên bản mới của HTML đều có
thêm tag mới và các thuộc tính mới.

3


-

Theo Mozilla Developer Network: “HTML Element Reference” hiện có
hơn 140 HTML tags, mặc dù một vài trong số chúng đã bị tạm ngưng
(khơng hổ trợ bởi các trình duyệt hiện đại).

-

Nhanh chóng phổ biến ở mức độ chóng mặt, HTML được xem như là
chuẩn mật của một website. Các thiết lập và cấu trúc của HTML được vận
hành bởi World Wide Web Consortium (W3C). Bạn có thể kiểm tra tình
trạng mới nhất của ngôn ngữ này bất kỳ lúc nào trên trang W3C’s website.

-

Nâng cấp mới nhất gần đây là vào năm 2014, khi ra mắt chuẩn HTML5.
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>.

• Ư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. Sử dụng mượt mà trên hầu hết mọi trình

duyệt.

-

Có q trình học đơn giản và trực tiếp.

-

Mã nguồn mở và hoàn tồn miễn phí.

-

Markup gọn gàn và đồng nhất.

-

Chuẩn chỉnh của web được vận hành bởi World Wide Web Consortium
(W3C).

-

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 web 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.

-

Nó có thể thực thi một số logic nhất định cho người dùng. Vì vậy, 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.

-

Khó kiểm sốt cảnh thực thi của trình duyết ( ví dụ như những trình duyệt
cũ không render được tag mới).

4


1.3.2 Giới thiệu về 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.

-

Các chương trình JavaScript thường được nhúng (embedded) trực tiếp vào
tập tin HTML bằng tag <script> hoặc tích hợp (integrated) vào trang web
thông qua một tập tin được khai báo trong <link>.

-

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). Trình duyệt dịch script,
phân tích và thi hành ngay tức thời.
+ Lập trình theo cấu trúc (Structured programing).
+ Giống như C và Java, chúng có phân biệt chữ HOA và thường.

1.3.3 Giới thiệu về CSS
-

CSS là ngôn ngữ tạo phong cách cho trang web – 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 gnuwx đánh dấu, như HTML. Nó có thể điều khiển
định dạng của nhiều trang web cùng lúc để tiết kiệm cơng sức cho người
viết web. 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
-

Tiết kiệm băng thơng (bandwith).

-

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.

-

Hỗ trợ cho việc in ấ webpage.

-

Hỗ trợ tối đa việc tùy biến webpage.

-

Hỗ trợ các cơng cụ tìm kiếm.

-

CSS tương thích với hầu hết các trình duyệt.

-

Giúp các webpage có sự đồng bộ tuyệt đối, dễ dàng nâng cấp giao diện.

5


1.3.4 Giới thiệu về 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 …

6


Chương 2

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

2.1 Mơ hình tổng quan của hệ thống nghiên cứu
2.1.1 Hệ thống thiết kế
 Các phần của trang web
Trang web gồm có 6 trang cơ bản đó là: trang chủ, cửa hàng, blog, liên hệ,
giới thiệu, và giỏ hàng. Bên cạnh đó trang web cịn có các chức năng như:
tìm kiếm, đăng kí, đăng nhập, thanh tốn, bình luận ý kiến.
2.1.2 Hình ảnh các trang và chức năng trong website
Để tạo nên một website được nhiều người quan tâm và biết đến thì việc thiết
kế website như thế nào là một việc quan trọng trong việc tạo nên một
website đẹp, lôi cuốn, bắt mắt và hấp dẫn người dùng truy cập.
• Trang chủ:
-

Là trang thể hiện bộ mặt của website nên trang chủ cần phải được
thiết kế đẹp mắt và có điểm nhấn sẽ thu hút được nhiều người truy
cập.

-

Thiết kế trang chủ đẹp, chun nghiệp, bố cục có trình tự và logic.

-

Thiết kế các banner, logo, hình ảnh,… phù hợp và bắt mắt.

-

Hiển thị được những sản phẩm và thông tin mới nhất của sản phẩm.

Hình 1.2 – Trang chủ

7


• Cửa hàng:
-

Được thiết kế phù hợp không rối mắt người dùng.

-

Hình ảnh rõ nét, thơng tin sản phẩm đầy đủ và chính xác.

-

Có nhiều mục để khách hàng có thể tìm kiếm như: tìm kiếm theo
tên giày, theo hãng giày, theo size giày,…

-

Có các mục sắp xếp để khách hàng lựa chọn như: lựa chọn theo giá,
lựa chọn theo khuyến mãi, lựa chọn theo sản phẩm bán chạy,…

Hình 1.3 – Cửa hàng

• Blog:
-

Là trang mang đến cho những tín đồ u giày những thơng tin mới
nhất và chính xác nhất về những loại giày, các mẹo về giày.

-

Nơi khách hàng có thể để lại những ý kiến của mình về website.

8


Hình 1.4-Blog

• Liên hệ:
-

Là trang để khách hàng có được các thông tin như đại chỉ, email, số
điện thoại của shop giày cũng như là nơi khách hàng có thể để lại
những ý kiến của mình về website.

Hình 1.5-Liên hệ

• Giới thiệu:
-

Là trang cung cấp cho khách hàng những thông tin về website của

chúng tôi.

9


Hình 1.6-Giới thiệu

• Giỏ hàng
-

Là trang mà các sản phẩm mà khách hàng lựa chọn được lưu lại và
chờ đợi bạn đặt hàng.

-

Tại đây khách hàng có thể xem lại lần cuối sản phẩm của mình
trước khi đặt hàng có thể lựa chọn số lượng hay áp dụng các mà
giảm giá đang có.

Hình 1.7-Giỏ hàng
• Tìm kiếm

10


-

Tại đây khách hàng có thể viết tên những loại giày mà mình muốn
tìm kiếm rồi chỉ cần một cú click chuột thì sản phẩm mà khách
hàng tìm kiếm sẽ hiện ngay ra trước mắt.

Hình 1.8-Tìm kiếm

2.2 Sơ đồ phân cấp hệ thống
WEBSITE BÁN GIÀY

Trang
chủ

Tìm
kiếm

Cửa hàng

Giỏ hàng

Tên
sản
phẩm

Danh
sách sản
phẩm

Chọn sản
phẩm

Giá
sản
phẩm

Chi tiết
sản phẩm

Đặt hàng

Hãng
sản
xuất

Đánh
giá

Kích
thước

Mức
giá

11

Giới
thiệu

Liên hệ

Blog


Chương 3

Nghiên cứu tổng quan

3.1 Phương pháp
Phương pháp: Để truy cập website người dùng có thể sử dụng smartphone,
máy tính, ipab,…hoặc các thiết bị có kết nối mạng để truy cập trực tiếp vào
cửa hàng thông qua website trực tuyến. Ở đó họ có thể thoải mái tìm kiếm
và lựa chọn những mẫu giày mình thích, có thể lựa chọn thêm, sửa, xóa giỏ
hàng tùy ý. Với nút thanh tốn họ nhanh chóng hồn tất việc lựa chọn
những đơi giày ưng ý của mình. Bên phía người bán sẽ dễ dàng thống kê và
lên đơn hàng nhanh chóng cho khách hàng.

3.2 Hạn chế, tồn tại của các phương pháp
So với việc đến cửa hàng để lựa chọn, với phương pháp trên người dùng cần
phải có các thiết bị như điện thoại, máy tính bảng, máy tính,…và phải cần
có kết nối internet thì mới thực hiện được việc truy cập vào website và mua
hàng.

3.3 Quá trình triển khai xây dựng
1. Lên ý tưởng.
12


2. Phác họa ý tưởng.
3. Tìm hiểu nghiên cứu thị trường.
4. Bắt đầu vào việc viết website.
5. Xây dựng website có logic và khoa học.
6. Thiết kế các phần cơ bản.
7. Thiết kế và trang trí giao diện website.
8. Chạy và kiểm thử.

9. Tìm và sửa lỗi.
10. Hồn thành website và báo cáo.

13


KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN
Quá trình nghiên cứu, phân tích, khảo sát và xây dựng đề tài “Thiết kế website
bán giày”. Đã tạo nên một trang web mang lại nhiều lợi ích cho người mua lẫn
người. Giúp kết nối giữa shop với các khác hàng ở xa và mọi nơi mọi lúc. Là giải
pháp tốt nhất cho sở thích mua sắm trong tình hình dịch bệnh hiện nay.
Cần xác định rõ mục tiêu và đảm bảo các mục tiêu đặt ra phải thực tế đủ sức để
thực hiện. Thực hiện các chương trình quảng cáo website. Tung ra các chương
trình khuyến mãi hấp dẫn thu hút khách hàng. Có chiến lược hợp tác phát triển
với nhiều đối tác uy tín. Các sản phẩm trên website phải được kiểm duyệt chặt
chẽ, thông tin đầy đủ đến khách hàng. Tạo cho khách hàng có niềm tin tưởng
chắc chắn vào website. Để phát triển hơn trong việc thương mại hóa trang
website bán hàng. Chúng tôi sẽ cải thiện nhiều hơn trong tương lai. Việc thêm
nhiều phương thức thanh toán sẽ giúp người dùng nhanh chóng đặt hàng tiện lợi.
Ngồi ra việc hồn thiện phần dữ liệu sẽ giúp trang web đạt được hiệu quả cao.

14


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

/>
Wikipedia

/>
Wikipedia

/>
W3school

/>
Bootstrap

/>
15