Tiểu luận môn học thiết kế web tên đề tài thiết kế website cho cửa hàng đồng hồ đức thịnh

Y BAN NHÂN DÂN TỈNH BÌNH DƯƠNG
TRƯỜNG ĐẠI HỌC TH DẦU MỘT
KHOA KỸ THUẬT – CÔNG NGHỆ

TIỂU LUẬN MÔN HỌC
THIẾT KẾ WEB
TÊN ĐỀ TÀI:

THIẾT KẾ WEBSITE CHO CỬA HÀNG
ĐỒNG HỒ ĐỨC THỊNH
GVHD: THS. NGUYỄN HỮU VĨNH
SVTH: LÊ ĐỖ ĐỨC THỊNH
MSSV: 1824801030266
LỚP: D18PM04

BÌNH DƯƠNG - 07/2020


Tiểu Luận Thiết Kế Web

GVHD: Nguyễn Hữu Vĩnh

TRƯỜNG ĐẠI HỌC TH DẦU MỘT
KHOA KỸ THUẬT – CÔNG NGHỆ

NHẬN XÉT VÀ CHẤM ĐIỂM CA GIẢNG VIÊN

Họ và tên giảng viên: Nguyễn Hữu Vĩnh
Tên đề tài: THIẾT KẾ WEBSITE CHO CỬA HÀNG ĐỒNG HỒ ĐỨC THỊNH

Nội dung nhận xét:

.....................................................................................................................................
.....................................................................................................................................
.....................................................................................................................................
.....................................................................................................................................
.....................................................................................................................................
.....................................................................................................................................
.....................................................................................................................................

Điểm:
Bằng số: .................................................
Bằng chữ:................................................

GIẢNG VIÊN CHẤM
(Ký, ghi rõ họ tên)

THS.NGUYỄN HỮU VĨNH

SVTH: Lê Đỗ Đức Thịnh – D18PM04

1


Tiểu Luận Thiết Kế Web

GVHD: Nguyễn Hữu Vĩnh
LỜI NÓI ĐẦU

Ngày nay với nền công nghệ thông tin bùng nổ ở việt nam đã đạt đến mức mà hầu hết
mọi người đều biết đến sử dụng Internet thì việc thiết kế website bán hàng đồng hồ trên
mạng là kênh thông tin khơng thể thiếu giúp khách hàng tìm thấy các sản phẩm, dịch vụ

mà bạn cung cấp. Thiết kế website bán hàng đồng hồ có nhiều điểm ưu việt hơn so với
những cách mua, bán hàng trực tiếp truyền thống. Kỹ thuật số giúp chúng ta tiết kiệm
đáng kể các chi phí nhờ chi phí vận chuyển trung gian, chi phí giao dịch và đặc biệt là
giúp tiết kiệm thời gian để con người đầu tư vào các hoạt động khác. Hơn nữa, thương
mại điện tử cịn giúp con người có thể tìm kiếm tự động theo nhiều mục đích khác nhau,
tự động cung cấp thông tin theo nhu cầu và sở thích của con người. Giờ đây, con người
có thể ngồi tại nhà để mua sắm mọi thứ theo ý muốn và các website bán hàng trên mạng
sẽ giúp ta làm được điều đó. Chính vì vậy, các cơng nghệ mã nguồn mở trở nên được chú
ý vì các tính năng của nó. Giá thành rẻ và được hỗ trợ rất nhiều trên mạng sẽ giúp ta
nhanh chóng Thiết kế các website bán hàng thân thiện và dễ sử dụng với người dùng.
Chính vì vậy trong bài báo cáo này tôi chọn đề tài về: “Thiết kế website cửa hàng đồng
hồ Đức Thịnh”. Đây là một hệ thống đơn giản nhưng đủ mạnh để cho phép khách hàng
nhanh chóng tìm được sản phẩm mà mình mong muốn.
Đề tài tiểu luận gồm các phần được phân chương như sau:
Chương 1: Khảo sát và phân tích hệ thống
Chương 2: Giới thiệu cơng nghệ
Chương 3: Giao diện website
Chương 4:Kết luận và hướng phát triển

SVTH: Lê Đỗ Đức Thịnh – D18PM04

2


Tiểu Luận Thiết Kế Web

GVHD: Nguyễn Hữu Vĩnh
MỤC LỤC

BẢNG THÔNG TIN TRANG.....................................................................................6

DANH SÁCH CÁC KÝ TỰ, CHỮ VIẾT TẮT..........................................................8
CHƯƠNG 1. KHẢO SÁT VÀ PHÂN TÍCH HỆ THỐNG.......................................9
1. TÊN ĐỀ TÀI...................................................................................................9
2. CHỨC NĂNG.................................................................................................9
3. YÊU CẦU ĐẶT RA........................................................................................ 9
4. MỤC TIÊU CỦA ĐỀ TÀI.............................................................................10
5. Ý NGHĨA CỦA ĐỀ TÀI...............................................................................10
6. ĐỐI TƯỢNG CỦA ĐỀ TÀI..........................................................................10
7. MỘT SỐ TRANG CHÍNH CỦA WEBSITE.................................................10

CHƯƠNG 2. GIỚI THIỆU CƠNG NGHỆ.....................................11
1. Giới Thiệu Về HTML..................................................................................11
1.1 HTML là gì?.................................................................................................. 11
1.2 Công dụng của HTML...................................................................................12
1.3 Định dạng của HTML...................................................................................12
2. Giới thiệu về Adobe Dreamweaver.............................................................12
3. Ngôn ngữ CSS..............................................................................................13
4. Ngôn ngữ Javascript....................................................................................13

CHƯƠNG 3: GIAO DIỆN CHƯƠNG TRÌNH..............................14
1. Đặc Tả Giao Diện.........................................................................................14
1.1

Giao diện trang chủ...................................................................................14

1.2

Giao diện trang đồng hồ nam...................................................................16

1.3 Giao diện trang đồng hồ nữ...........................................................................17

1.4 Giao diện đồng hồ cặp...................................................................................18
1.5

Giao diện phụ kiện đồng hồ......................................................................19

1.6

Giao diện giới thiệu...................................................................................21

1.7

Giao diện trang liên hệ..............................................................................22

SVTH: Lê Đỗ Đức Thịnh – D18PM04

3


Tiểu Luận Thiết Kế Web
1.8

GVHD: Nguyễn Hữu Vĩnh

Giao diện trang Fanpage...........................................................................22

1.9 Giao diện thanh tìm kiếm sản phẩm.............................................................23
1.10 Giao diện giỏ hàng.......................................................................................24
1.11 Giao diện trả góp..........................................................................................24
1.12 Giao diện đổi trả..........................................................................................25
1.13 Giao diện bảo hành......................................................................................26

1.14 Giao diện vận chuyển..................................................................................27
1.15

Giao diện đăng nhập..............................................................................28

1.16

Giao diện đăng ký...................................................................................29

1.17

Giao diện các hãng đồng hồ...................................................................30

1.18

Giao diện các đồng hồ bán chạy và lượt truy cập..................................31

1.19

Giao diện đồng hồng hãng Casio...........................................................32

1.20

Giao diện đồng hồ hãng Rolex...............................................................33

1.21

Giao diện đồng hồ hãng Citizen.............................................................34

1.22

Giao diện đồng hồ hãng Seiko...............................................................35

1.23

Giao diện đồng hồ hãng Bulova.............................................................36

1.24

Giao diện đồng hồ hãng Orient..............................................................37

1.25

Giao diện đồng hồ hãng Titan................................................................38

1.26

Giao diện đồng hồ hãng Tissot...............................................................39

1.27

Giao đồng hồ hãng Fossil......................................................................40

1.28

Giao diện chi tiết đồng hồ......................................................................41

1.29 Giao diện chi tiết đồng hồ nam....................................................................42
1.30 Giao diện chi tiết đồng hồ nữ......................................................................43
1.31 Giao diện chi tiết đồng hồ cặp.....................................................................43

CHƯƠNG 4: KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN................44
1. Kết quả đạt được:........................................................................................44
2. Việc chưa làm được:....................................................................................44
3. Hướng phát triển của đề tài........................................................................45

TÀI LIỆU KHAM KHẢO................................................................45

SVTH: Lê Đỗ Đức Thịnh – D18PM04

4


Tiểu Luận Thiết Kế Web

GVHD: Nguyễn Hữu Vĩnh

DANH MỤC HÌNH
Hình 1. 1 Giao diện trang chủ.......................................................................................15
Hình 1. 2 Giao diện trang đồng hồ nam........................................................................16
Hình 1. 3 Giao diện trang đồng hồ nữ...........................................................................17
Hình 1. 4 Giao diện trang đồng hồ cặp.........................................................................19
Hình 1. 5 Giao diện phụ kiện đồng hồ...........................................................................20
Hình 1. 6 Giao diện giới thiệu.......................................................................................21
Hình 1. 7 Giao diện trang liên hệ...................................................................................22
Hình 1. 8 Giao diện trang Fanpage...............................................................................23
Hình 1. 9 Giao diện thanh tìm kiếm sản phẩm..............................................................23
Hình 1. 10 Giao diện giỏ hàng.......................................................................................24
Hình 1. 11 Giao diện trả góp..........................................................................................25
Hình 1. 12 Giao diện trả góp..........................................................................................26

Hình 1. 13 Giao diện bảo hành......................................................................................27
Hình 1. 14 Giao diện vận chuyển...................................................................................28
Hình 1. 15 Giao diện đăng nhập....................................................................................29
Hình 1. 16 Giao diện đăng ký.........................................................................................30
Hình 1. 17 Giao diện các hãng đồng hồ.........................................................................31
Hình 1. 18 Giao diện các đồng hồ bán chạy..................................................................32
Hình 1. 19 Giao diện đồng hồng hãng Casio.................................................................33
Hình 1. 20 Giao diện đồng hồ hãng Rolex.....................................................................34
Hình 1. 21 Giao diện đồng hồ hãng Citizen...................................................................35
Hình 1. 22 Giao diện đồng hồ hãng Seiko.....................................................................36
Hình 1. 23 Giao diện đồng hồ hãng Bulova..................................................................37
Hình 1. 24 Giao diện đồng hồ hãng Orient....................................................................38
Hình 1. 25 Giao diện đồng hồ hãng Titan.....................................................................39
Hình 1. 26 Giao diện đồng hồ hãng Tissot.....................................................................40
Hình 1. 27 Giao đồng hồ hãng Fossil............................................................................41
Hình 1. 28 Giao diện chi tiết đồng hồ............................................................................42
Hình 1. 29 Giao diện chi tiết đồng hồ nam....................................................................42
Hình 1. 30 Giao diện chi tiết đồng hồ nữ.......................................................................43
Hình 1. 31 Giao diện chi tiết đồng hồ cặp......................................................................43

SVTH: Lê Đỗ Đức Thịnh – D18PM04

5


Tiểu Luận Thiết Kế Web

GVHD: Nguyễn Hữu Vĩnh
BẢNG THÔNG TIN TRANG

S

Tên Trang

Chức năng của trang

TT
1

2

Trang Chủ

Trang Đồng
Hồ Nam, Nữ Và

Đây là trang chính của cửa hàng, giới thiệu sơ
lược về cửa hàng, các loại đồng hồ và bán chạy của
cửa hàng
Đây là trang giúp cho khách hàng có thể dễ
dàng lọc sản phẩm theo nhu cầu

Đồng Hồ cặp
3

Trang Đăng

Người dùng đăng ký tài khoản để trở thành
khách hàng của cửa hàng

Trang Đăng
Nhập

Người dùng đăng nhập tài khoản để đặt mua sản
phẩm của cửa hàng

5

Trang Đổi
Mật Khẩu

Đây là trang mà nếu khách hàng có nhu cầu đổi
mật khẩu nếu muốn.

6

Trang Danh
Mục Sản Phẩm

Đây là trang khách hàng xem hoặc tham
khảo các loại sản phẩm có sẵn trong cửa hàng để
tùy ý lựa chọn

7

Trang Chi
Tiết Đồng Hồ

Đây là trang khách hàng nhấn vào từng loại
đồng hồ để xem chi tiết.

Ký
4

Trang Trả góp
8
9

Trang Các
Hãng Đồng Hồ

Đây là trang giúp cho khách hàng xem, chọn các
hãng đồng hồ mà mình muốn mua một cách nhanh
chóng

1

Trang Giỏ
Hàng

Đây là trang khách hàng cần xem lại những sản
phẩm mình đã chọn

1

Trang Chính
sách bảo hành

Trang này gồm các chính sách bảo hành của cửa
hàng mà khách hàng có thể tham khảo

0
1
1
2

Khách hàng có thể tra cứu thơng tin hỗ trợ trả
góp từ cửa hàng

Trang Đổi Trả

Trang này giúp khách hàng hiểu rõ hơn về quy
trình đổi trả sản phầm khi mua từ cửa hàng

SVTH: Lê Đỗ Đức Thịnh – D18PM04

6


Tiểu Luận Thiết Kế Web
1
3

Trang Vận
chuyển
Hệ
Trang giới
thiệu

Đây là trang giúp cho mọi người xem biết

thêm về thông tin của cửa hàng

Trang
16

Trang này giúp khách hàng có thể tìm kiếm
thơng tin liên hệ đến website một cách nhanh
chóng

1
5

Trang này giúp khách hàng có thể xem qua các
phương thức vận chuyển của cửa hàng

Trang Liên
14

GVHD: Nguyễn Hữu Vĩnh

Fanpage

Trang này giúp khách hàng có thể đi đến
trang liên kết với Fanpage của cửa hàng

DANH SÁCH CÁC KÝ TỰ, CHỮ VIẾT TẮT

Từ viết tắt

Giải thích

CSDL

Cơ sở dữ liệu

ĐVT

Đơn vị tính

CNTT

Cơng Nghệ thơng tin

LH

Loại Hoa

HTML

Hyper Text Markup Language

CSS

Cascading Style Sheet

CHƯƠNG 1. KHẢO SÁT VÀ PHÂN TÍCH HỆ THỐNG
1. TÊN ĐỀ TÀI.
“THIẾT KẾ WEBSITE CHO CỬA HÀNG ĐỒNG HỒ ĐỨC THỊNH”
2. CHỨC NĂNG

SVTH: Lê Đỗ Đức Thịnh – D18PM04

7


Tiểu Luận Thiết Kế Web

GVHD: Nguyễn Hữu Vĩnh

Đâ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
tiêu dùng với các chi tiết mặt hàng với giá cả chính xác. Có các chức năng sau:
-

Cho phép cập nhật hàng vào CSDL.

-

Hiển thị danh sách các mặt hàng theo từng loại.

-

Hiển thị hàng hóa khách hàng đã chọn mua.

-

Hiển thị thông tin khách hàng.

-

Quản lý đơn đặt hàng.

-

Cập nhật hàng hóa, nhà sản xuất,loại hàng,tin tức.

-

Xử lý đơn hàng.

-

Thống kê các khách hàng mua trong ngày, trong khoảng thời gian

3. YÊU CẦU ĐẶT RA
a. Thiết bị và phần mềm
-

Máy tính có thể thiết kế được web

-

Phần mềm thiết kế Web: Dreamwear,sothink,flast...

b. Yêu cầu trang web
Hệ thống có 2 phần:
Thứ nhất: phần khách hàng:
Khách hàng là những 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 sau:
- Hiển thị 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 mới, khuyến mãi trên trang web.

- Sau khi khách hàng chọn và đặt hàng hàng trực tiếp thì phải hiện lên đơn hàng
để khách hàng có thể nhập thơng tin mua hàng và xem hoá đơn mua hàng.
Thứ hai: Dành cho người quản trị: Người làm chủ ứng dụng có quyền kiểm
sốt mọi hoạt động của hệ thống. Người này được cấp username và password để đăng
nhập hệ thống thực hiện chức năng của mình:

SVTH: Lê Đỗ Đức Thịnh – D18PM04

8


Tiểu Luận Thiết Kế Web

GVHD: Nguyễn Hữu Vĩnh

-

Chức năng cập nhật, sửa, xoá các mặt hàng, loại hàng, nhà sản xuất, tin tức.(phải
kiểm sốt đƣợc hệthống). Nó địi hỏi sự chính xác.

-

Tiếp nhận kiểm tra đơn đặt hàng của khách hàng. Hiển thị đơn đặt hàng.

-

Thống kê theo ngày, khoảng thời gian. Ngồi các chức năng trên thì trang Web
phải được thiết kế sao cho dễ hiểu, giao diện mang tính dễ dùng đẹp mắt và làm
sao cho khách hàng thấy được thơng tin cần tìm, cung cấp các thơng tin quảng cáo
hấp dẫn, các tin tức khuyến mãi để thu hút khách hàng. Điều quan trọng là phải

đảm bảo an tồn tuyệt đối thơng tin khách hàng trong q trình đặt mua qua mạng.
Đồng thời trang Web phải ln đổi mới, hấp dẫn.

4. MỤC TIÊU CỦA ĐỀ TÀI
+ Thiết kế Website cho cửa hàng bán đồng hồ
5. Ý NGHĨA CỦA ĐỀ TÀI
+ Đưa sản phẩm của công ty đến đến gần hơn với người tiêu dùng.
+ Quảng bá thương hiệu.
6. ĐỐI TƯỢNG CỦA ĐỀ TÀI
+ Đối tượng nghiên cứu chủ yếu là các sản phẩm đồng hồ của nhiều thương hiệu
khác nhau.
7. MỘT SỐ TRANG CHÍNH THỨC CỦA WEBSITE
+ Trang chủ: Đây là trang giới thiệu sơ lược về các sản phẩm của cửa hàng.
+ Trang Giới thiệu: Đây là trang giúp cho khách hàng xem biết thêm về thông tin
của cửa hàng
+ Trang liên hệ: Đây là trang mà khách hàng có thể liên hệ với shop
+ Trang đăng ký: Người dùng đăng ký tài khoản để trở thành khách hàng của trang.
+ Trang đăng nhập: Người dùng đăng nhập tài khoản để đặt mua sản phẩm của trang.
+ Trang sản phẩm: Đây là trang khách hàng xem hoặc tham khảo các mặt hàng
của cửa hàng có sẵn để lựa chọn.

SVTH: Lê Đỗ Đức Thịnh – D18PM04

9


Tiểu Luận Thiết Kế Web

GVHD: Nguyễn Hữu Vĩnh

+ Trang chi tiết sản phẩm: Đây là trang khách hàng nhấn vào từng sản phẩm để xem
chi tiết.
+ Trang giới thiệu: khách hàng có thể tham thảo thơng tin của cửa hàng.

CHƯƠNG 2. GIỚI THIỆU CÔNG NGHỆ
1. Giới Thiệu Về HTML.
1.1 HTML là gì?
HTML (Hypertext Markup Language-Ngơn ngữ đánh dấu siêu văn bản) là ngôn ngữ
đánh dấu chuẩn dùng soạn thảo các tài liệu World Wide Web, chỉ rõ một trang Web được
hiển thị như thế nào trong trình duyệt.
Ngơn ngữ HTML dùng các tag hoặc các đoạn mã lệnh để chỉ cho các trình duyệt
(Web browsers) cách hiển thị các thành phần của trang như text và graphics.
HTML là ngôn ngữ xác định cấu trúc của thông tin.
HTML sử dụng một loạt các thẻ và thuộc tính và được dùng để hiện thị văn bản và
các thông tin khác, cung cấp siêu liên kết tới các tài liệu khác.
1.2 Công dụng của HTML.
Thiết kế được nội dung và hình thức của trang web.
Xuất bản được các tài liệu trực tuyến hay truy xuất các thông tin trực tuyến bằng cách
dùng các liên kết được chèn vào trang web.
Tạo ra các biểu mẫu trực tuyến nhằm thu thập các thông tin người dùng, quản lý giao
dịch….
Thêm vào đối tượng các hình ảnh video, âm thanh…..
1.3 Định dạng của HTML.
Là một tập tin có phần mở rộng là .htm hoặc .html
Là một tập tin văn bản thuần túy, có chứa các mã đặc biệt gọi là Tag(thẻ), thường
được đặt xung quanh một khối văn bản nào đó.

SVTH: Lê Đỗ Đức Thịnh – D18PM04

10

Tiểu Luận Thiết Kế Web

GVHD: Nguyễn Hữu Vĩnh

Có thể viết trên nhiều trình soạn thảo: Microsoft Fontpage, notepad…và được sử dụng
nhiều nhất đó là adobe dreamweaver.
2. Giới thiệu về Adobe Dreamweaver
Macromedia Dreamweaver 8 là trình biên soạn HTML chuyên nghiệp dùng để thiết
kế, viết mã và phát triển website cùng các trang web và các ứng dụng web. Cho dù bạn có
thích thú với cơng việc viết mã HTML thủ cơng hoặc bạn thích làm việc trong mơi
trường biên soạn trực quan, Dreamweaver cung cấp cho bạn những công cụ hữu ích để
nâng cao kinh nghiệm thiết kế web của bạn.
Các tính năng biên soạn trực quan trong Dreamweaver cho phép bạn tạo nhanh các
trang web mà không cần các dịng mã. Bạn có thể xem tất cả các thành phần trong
website của bạn và kéo chúng trực tiếp từ một panel dễ sử dụng vào 1 văn bản. Bạn có
thể nâng cao sản phẩm của bạn bằng cách tạo và sửa các ảnh trong Macromedia
Fireworks hoặc trong ứng dụng ảnh khác, rồi sau đó chèn trực tiếp vào Dreamweaver.
Dreamweaver cũng cung cấp những cơng cụ giúp đơn giản hóa việc chèn Flash vào trang
web.
Dreamweaver cũng cho phép bạn Thiết kế các ứng dụng web động dựa theo dữ liệu sử
dụng công nghệ máy chủ như CFML, ASP.NET, ASP, JSP, và PHP. Nếu sở thích của bạn
là làm việc với dữ liệu XML, Dreamweaver cung cấp những công cụ cho phép bạn dễ
dàng tạo các trang XSLT, chèn file XML và hiển thị dữ liệu XML trên trang web của bạn.
Dreamweaver có thể tùy biến hồn tồn. Bạn có thể tạo cho riêng mình những đối
tượng và yêu cầu, chỉnh sửa shortcut bàn phím và thậm chí viết mã JavaScript để mở
rộng những khả năng của Dreamweaver với những hành vi mới, những chuyên gia giám
định Property mới và những báo cáo site mới.
3. Ngôn ngữ CSS.

CSS (Cascading Style Sheets) là một ngơn ngữ quy định cách trình bày cho các tài
liệu viết bằng HTML, XHTML, XML, SVG, hay UML,…
CSS cung cấp nhiều thuộc tính trình bày dành cho các đối tượng với sự sáng tạo trong
việc kết hợp các thuộc tính giúp mang lại hiệu quả cao.

SVTH: Lê Đỗ Đức Thịnh – D18PM04

11


Tiểu Luận Thiết Kế Web

GVHD: Nguyễn Hữu Vĩnh

CSS đã được hỗ trợ bởi tất cả các trình duyệt và hiển thị “như nhau” trên mọi hệ điều
hành.
CSS đưa ra phương thức áp dụng từ một file CSS ở ngồi. Có hiệu quả đồng bộ khi
tạo một website có hàng trăm trang hay khi muốn thay đổi một thuộc tính trình bày nào
đó.
CSS được cập nhật liên tục mang lại các trình bày phức tạp và tinh vi hơn.
4. Ngơn ngữ Javascript.
Với HTML chỉ biểu diễn thông tin chứ chưa phải là các trang Web động có khả năng
đáp ứng các sự kiện từ phía người dùng.
Hãng Netscape đã đưa ra ngơn ngữ script có tên là LiveScript để thực hiện chức năng
này. Sau đó đổi tên thành JavaScript để tận dụng tính đại chúng của ngơn ngữ lập trình
Java.
JavaScript là ngơn ngữ dưới dạng script có thể gắn với các file HTML. Được trình
duyệt diễn dịch, trình duyệt đọc JavaScript dưới dạng mã nguồn.
JavaScript là ngôn ngữ dựa trên đối tượng, nghĩa là bao gồm nhiều kiểu đối tượng, ví
dụ đối tượng Math với tất cả các chức năng toán học. Nhưng JavaScript không là ngôn

ngữ hướng đối tượng như C++/Java.

SVTH: Lê Đỗ Đức Thịnh – D18PM04

12


Tiểu Luận Thiết Kế Web

GVHD: Nguyễn Hữu Vĩnh

CHƯƠNG 3: GIAO DIỆN CHƯƠNG TRÌNH

1.

Đặc Tả Giao Diện

1.1

Giao diện trang chủ

 Mục đích: Chức năng này cho phép người dùng xem danh sách Sản Phẩm nổi bật
và mới nhất
 Trong giao diện cho người dùng, chọn kiểu hiển thị từng theo Loại Sản Phẩm.
 Mô tả chức năng: Trang này cho phép người dùng xem thơng tin sản phẩm ngồi
ra cịn có thể sử các menu dọc, ngang để sang trang khác,...

SVTH: Lê Đỗ Đức Thịnh – D18PM04

13

Tiểu Luận Thiết Kế Web

GVHD: Nguyễn Hữu Vĩnh

Hình 1. 1 Giao diện trang chủ
Trang web được chia làm 7 phần:
- Phần 1: Logo của trang web
- Phần 2: Thanh tìm kiếm sản phẩm và các mục giỏ hàng, trả góp, đổi trả, bảo hành, vận
chuyển, đăng nhập, đăng ký.
- Phần 3: - Menu ngang: Bao gồm các mục: trang chủ, đồng hồ nam, đồng hồ nữ, đồng
hồ cặp, phụ kiện, giới thiệu, liên hệ, fanpage. Mỗi danh mục liên kết đến một trang với
nội dung khác nhau.

SVTH: Lê Đỗ Đức Thịnh – D18PM04

14


Tiểu Luận Thiết Kế Web

GVHD: Nguyễn Hữu Vĩnh

- Phần 4: Bên trái là danh mục các hãng đồng hồ và đồng hồ bán chạy của cửa hàng
quảng cáo được sử dụng thẻ Marquee để chạy và liên kết website được liên kết tới các
trang khác.
- Phần 5: bên trái ở dưới cùng là phần thống kê bao nhiêu lượt truy cập
- Phần 6: Ở giữa chứa các sản phẩm và liên kết với trang chi tiết sản phẩm
- Phần 7: Footer

1.2

Giao diện trang đồng hồ nam

Mục đích: Khi vào trang này, khách hàng sẽ dễ dàng tìm kiếm sản phẩm phù hợp
với giới tính mà nhu cầu của mình.

SVTH: Lê Đỗ Đức Thịnh – D18PM04

15


Tiểu Luận Thiết Kế Web

GVHD: Nguyễn Hữu Vĩnh

Hình 1. 2 Giao diện trang đồng hồ nam

1.3 Giao diện trang đồng hồ nữ
Mục đích: Khi vào trang này, khách hàng sẽ dễ dàng tìm kiếm sản phẩm phù hợp
với giới tính mà nhu cầu của mình.
SVTH: Lê Đỗ Đức Thịnh – D18PM04

16


Tiểu Luận Thiết Kế Web

GVHD: Nguyễn Hữu Vĩnh

Hình 1. 3 Giao diện trang đồng hồ nữ

1.4 Giao diện đồng hồ cặp
Mục đích: Khi vào trang này, khách hàng sẽ dễ dàng tìm kiếm sản phẩm phù hợp
với giới tính mà nhu cầu của mình, dễ dàng tìm kiếm sản phẩm mà mình mong muốn.
SVTH: Lê Đỗ Đức Thịnh – D18PM04

17


Tiểu Luận Thiết Kế Web

GVHD: Nguyễn Hữu Vĩnh

Hình 1. 4 Giao diện trang đồng hồ cặp

1.5 Giao diện phụ kiện đồng hồ
Mục đích: Khi vào trang này, khách hàng sẽ dễ dàng tìm kiếm các thiết bị phụ kiện
cho đồng hồ của mình như dây da, dây kim loại và hộp đựng đồng hồ.
SVTH: Lê Đỗ Đức Thịnh – D18PM04

18


Tiểu Luận Thiết Kế Web

GVHD: Nguyễn Hữu Vĩnh

Hình 1. 5 Giao diện phụ kiện đồng hồ

1.6 Giao diện giới thiệu

SVTH: Lê Đỗ Đức Thịnh – D18PM04

19


Tiểu Luận Thiết Kế Web

GVHD: Nguyễn Hữu Vĩnh

Mục đích: Khi vào trang này, khách hàng sẽ biết được thông tin của cửa hàng như
ngày thành lập cửa hàng và những nguyên tác trong kinh doanh của cửa hàng.

Hình 1. 6 Giao diện giới thiệu

1.7 Giao diện trang liên hệ
SVTH: Lê Đỗ Đức Thịnh – D18PM04

20


Tiểu Luận Thiết Kế Web

GVHD: Nguyễn Hữu Vĩnh

Mục đích: Khi vào trang này, khách hàng sẽ biết được thông tin liên hệ của cửa
hàng để từ đó có thể liên hệ với quản trị viên có thể giải đáp thắc mắc cho khách hàng.

Hình 1. 7 Giao diện trang liên hệ
1.8 Giao diện trang Fanpage
Mục đích: Khi vào trang này, khách hàng sẽ có thể truy cập đến trang Fanpage của
cửa hàng đã được liên kết với Website trước đó.

Hình 1. 8 Giao diện trang Fanpage

SVTH: Lê Đỗ Đức Thịnh – D18PM04

21


Tiểu Luận Thiết Kế Web

GVHD: Nguyễn Hữu Vĩnh

1.9 Giao diện thanh tìm kiếm sản phẩm
Mục đích: Khi vào trang này, khách hàng sẽ có thể tìm kiếm sản phẩm mà mình
biết trước đó để đỡ phải mất thời gian lọc sản phẩm.

Hình 1. 9 Giao diện thanh tìm kiếm sản phẩm
1.10 Giao diện giỏ hàng
Mục đích: Khi vào trang này, khách hàng sẽ xem lại những sản phẩm nào mà mình
đã cho vào giỏ nếu khơng ưng ý khách hàng có thể xóa sản phẩm ra khỏi giỏ hàng của
mình.

Hình 1. 10 Giao diện giỏ hàng

SVTH: Lê Đỗ Đức Thịnh – D18PM04

22


Tiểu Luận Thiết Kế Web

GVHD: Nguyễn Hữu Vĩnh

1.11 Giao diện trả góp
Mục đích: Khi vào trang này, khách hàng sẽ nắm được rõ thơng tin ưu đãi trả góp
lãi suất 0% của cửa hàng và những dịch vụ hỗ trợ nhiệt tình đến từ cửa hàng.

Hình 1. 11 Giao diện trả góp

SVTH: Lê Đỗ Đức Thịnh – D18PM04

23


Tiểu Luận Thiết Kế Web

GVHD: Nguyễn Hữu Vĩnh

1.12 Giao diện đổi trả
Mục đích: Khi vào trang này, khách hàng sẽ biết được thông tin và những nguyên
tắc đổi trả của cửa hàng. Để từ đó có thể nắm bắt và cùng với cửa hàng giải quyết những
vấn đề liên quan đến lỗi đổi trả sản phẩm.

Hình 1. 12 Giao diện trả góp

SVTH: Lê Đỗ Đức Thịnh – D18PM04

24