Tiểu luận môn học thiết kế web xây dựng website shop thời trang namoppa store

+ Trang chủ: Đây là trang giới thiệu sơ lược về các sản phẩm mới của cửa hàng.. + Trang Giới thiệu Cửa Hàng: Đây là trang giúp cho khách hàng xem biết thêm về thông tin của Shop.. + Tran

Trang 1

KHOA KỸ THUẬT – CÔNG NGHỆ

TIỂU LUẬN MÔN HỌC

B8NH DƯƠNG – 7/2020



Trang 2

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: XÂY DỰNG WEBSITE SHOP THỜI TRANG NAM OPPA STORE 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)

NGUYỄN HỮU VĨNH

Trang 3

LỜI NÓI ĐẦU

Hiện nay, trên thế giới công nghệ thông tin và thương mại điện tử đang phát triểnrất mạnh mẽ Kỹ thuật số giúp chúng ta tiết kiệm đáng kể các chi phí nhờ chi phí vậnchuyển trung gian, chi phí giao dịch và đặc biệt là giúp tiết kiệm thời gian để conngườ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 tintheo nhu cầu và sở thích của con người Giờ đây, con người có thể ngồi tại nhà để muasắ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ề: “Xây Dựng website shop thời trang nam Oppa Store”.

Đây là một hệ thống đơn giản nhưng đủ mạnh để cho phép nhanh chóng Thiết kế cácứng dụng bán hàng trên Internet

Đề tài tiểu luận gồm các phần được phân chương như sau:

Chương 1: Tổng quan về đề tài

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

Trang 4

Đồ án môn thiết kế web

MỤC LỤC

LỜI NÓI ĐẦU i

DANH MỤC HÌNH vi

CHƯƠNG 1 TỔNG QUAN VỀ ĐỀ TÀI 1

1 Tên Đề Tài 1

2 Mục Tiêu của Đề Tài 1

3 Ý Nghĩa Của Đề Tài 1

4 Đối Tượng Của Đề Tài 1

5 Một Số Trang Chính Của Website 1

CHƯƠNG 2 GIỚI THIỆU CÔNG NGHỆ 2

1 Giới Thiệu Về HTML 2

1.1 HTML là gì? 2

1.2 Công dụng của HTML 2

1.3 Định dạng của HTML 2

2 Giới thiệu về Adobe Dreamweaver 2

3 Ngôn ngữ CSS 3

4 Ngôn ngữ Javascript 3

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

1 Sơ đồ Website: 5

2 Đặc Tả Giao Diện 6

2.1 Giao diện trang chủ 6

2.2 Giao diện trang giới thiệu Cửa Hàng 8

2.3 Giao diện trang giới thiệu chất liệu sản phẩm 8

2.4 Giao diện trang liên hệ 9

2.5 Giao diện trang đăng ký 10

2.6 Giao diện trang đăng nhập 11

2.7 Giao diện trang danh mục sản phẩm 12

2.7.1 Giao diện danh mục Quần Âu 14

Trang 5

2.7.2 Giao diện danh mục Quần Jeans 14

2.7.3 Giao diện danh mục quần Kaki 15

2.7.4 Giao diện danh mục Jogger 15

2.7.5 Giao diện danh mục Áo Sơ Mi 16

2.7.6 Giao diện danh mục Vest 16

2.7.7 Giao diện danh mục Áo Thun 17

2.7.8 Giao diện danh mục Áo Khoác 18

2.7.9 Giao diện danh mục áo Hoodie 18

2.7.10 Giao diện danh mục áo Thun No Style 18

2.7.11 Giao diện danh mục Túi Sách 19

2.7.12 Giao diện danh mục Nón 19

2.8 Giao diện trang chi tiết sản phẩm 20

2.8.1 Chi tiết Sản Phẩm Quần Âu Nam Trắng 20

2.8.2 Chi tiết Sản Phẩm Quần Tây 21

2.8.3 Chi tiết Quần Clown Pants 22

2.8.4 Chi tiết Concrete Pants 23

2.8.5 Chi tiết Quần Tây Đen 24

2.8.6 Chi tiết Quần Tây Nâu 26

2.8.7 Chi tiết Quần Tây Xám 26

2.8.8 Chi tiết Quần Xanh 27

2.8.9 Chi tiết áo Quần Kaki Xám 28

2.8.10 Chi tiết áo Khoác Y2010 A01 29

2.8.11 Chi Tiết Áo Khoác Y2010 A02 30

2.8.12 Chi tiết Áo Khoác Y2010 A03 31

2.8.13 Chi tiết Áo khoác Y2010 A04 32

2.8.14 Chi tiết Áo Khoác y2010 A05 33

Trang 6

CHƯƠNG 4: KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN 39

1 Kết quả đạt được: 39

2 Việc chưa làm được: 39

3 Hướng phát triển của đề tài 39

TÀI LIỆU KHAM KHẢO 40

DANH MỤC H8NH Hình 1.2 Sơ Đồ Website 5

Hình 1.2 Sơ Đồ Sản Phẩm Quần 6

Hình 1.2 Sơ Đồ Sản Phẩm Áo 6

Hình 1.2 Sơ Đồ Sản Phẩm Phụ Kiện 6

Hình 2.1 Giao diện trang chủ 7

Hình 2.2 Giao diện trang giới thiệu 8 Hình 2.3 Giao diện trang giới thiệu

Hình 2.4 Giao diện trang liên hệ

Hình 2.5 Giao diện trang đăng ký

Hình 2.6 Giao diện trang đăng nhập

Hình 2.7 Giao diện trang doanh mục sản phẩm

Hình 2.7.1 Giao diện danh mục Quần Âu

Hình 2.7.2 Giao diện danh mục Quần Jeans15

Hình 2.7.3 Giao diện danh mục quần Kaki

Hình 2.7.4 Giao diện danh mục Quần Kaki

Hình 2.7.5 Giao diện danh mục Áo Sơ Mi

Hình 2.7.6 Giao diện danh mục Vest

Trang 7

Hình 2.7.7 Giao diện danh mục Áo Thun

Hình 2.7.8 Giao diện danh mục Áo Khoác

Hình 2.7.9 Giao diện danh mục áo Hoodie

Hình 2.7.10 Giao diện danh mục áo thun no styte

Hình 2.7.11 Giao diện danh mục Túi Sách

Hình 2.7.12 Giao diện danh mục Nón

Hình 2.8.1 Giao diện trang chi tiết Quần Âu Nam Trắng

Hình 2.8.2 Giao diện trang chi tiết Quần Tây

Hình 2.8.3 Giao diện trang chi tiết Clown Pants

Hình 2.8.4 Giao diện trang chi tiết Concrete Pants

Hình 2.8.5 Giao diện trang chi tiết Quần Tây Đen

Hình 2.8.6 Giao diện trang chi tiết Quần Tây Nâu

Hình 2.8.7 Giao diện trang chi tiết Quần Tây Xám

Hình 2.8.8 Giao diện trang chi tiết Quần Xanh

Hình 2.8.9 Giao diện trang chi tiết Quần Kaki Xám

Hình 2.8.10 Giao diện trang chi tiết áo khoác Y2010 A01

Trang 8

Trang 9

CHƯƠNG 1 TỔNG QUAN VỀ ĐỀ TÀI

1 Tên Đề Tài.

+ XÂY DỰNG WEBSITE SHOP THỜI TRANG NAM OPPA STORE

2 Mục Tiêu của Đề Tài.

+ Xây Dựng Website bán hàng cho Shop Thời Trang Nam Oppa Store

3 Ý Nghĩa Của Đề Tài.

+ Đưa tất cả các sản phẩm và thương hiệu của shop đến tay người tiêu dùng + Quảng bá thương hiệu

+ Tạo dựng một thương hiệu thời trang mới thông qua việc mua bán trên Website

4 Đối Tượng Của Đề Tài.

+ Đối tượng nghiên cứu của đề tài là hướng tới đối tượng Nam giới Việc mua sắmquần áo, phụ kiện của nam giới

5 Một Số Trang Chính Của Website.

+ Trang chủ: Đây là trang giới thiệu sơ lược về các sản phẩm mới của cửa hàng

+ Trang Giới thiệu Cửa Hàng: Đây là trang giúp cho khách hàng xem biết thêm về thông tin của Shop

+ Trang Giới Thiệu Chất Lượng Sản Phẩm: Là trang giúp cho khách hàng biết được các chất liệu 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 qua các phương tiện như Email, Số điện thoại, địa chỉ trược tiếp của shop, và có thể liên

hệ qua tổng đài của shop.

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

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

Tiểu luận môn thiết kế web

Trang 11

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ônngữ đánh dấu chuẩn dùng soạn thảo các tài liệu World Wide Web, chỉ rõ một trangWeb đượ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ằngcá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…

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ôitrườ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áctrang 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

Trang 12

Tiểu luận môn thiết kế webwebsite 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 MacromediaFireworks 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àotrang 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íchcủ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épbạn dễ dàng tạo các trang XSLT, chèn file XML và hiển thị dữ liệu XML trên trangweb của bạn

Dreamweaver có thể tùy biến hoàn toàn Bạn có thể tạo cho riêng mình những đốitượ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 giagiám định Property mới và những báo cáo site mới

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

Trang 13

JavaScript là ngôn ngữ dưới dạng script có thể gắn với các file HTML Được trìnhduyệ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

Trang 14

CHƯƠNG 3: GIAO DIỆN CHƯƠNG TR8NH

1 Sơ đồ Website:

Hình 1.1 Sơ Đồ Website

Web Th i ờ Trang Nam

Logo

Slider Phầần

Right Thanh ch n ọ

Phầần Lef

S n Ph m ả ẩ bán Nhiềầu Trang Chủ

Sản Phẩm

Quần

Liền Kềết Website

Gi i Thi u ớ ệ

Sản Phẩm

Áo

Thốếng Kề truy C p ậ

Đăng Kí, Đăng Nh p ậ

L ch ị

Ph Ki n ụ ệ

Trang 15

Jogger Th Thao ể Short

Jeans Kaki

Jeans Quầần Âu

S n Ph m ả ẩ Áo

Hoodie No styte Khoác

Thun Vest

S Mi ơ

Ph Ki n ụ ệ

Dầy Chuyềần Ví

Giày Đốầng

Hốầ Nón

Túi Sách

Trang 16

 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ổibậ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ẩmngoài ra còn có thể sử các menu dọc,ngang để sang trang khác,

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

Trang 17

- Phần 2 - Menu ngang: Bao gồm các mục: Trang chủ, giới thiệu cửa hàng,giớithiệu chất liệu sản phẩm, liên hệ, đăng ký, đăng nhập, giỏ hàng Mỗi danh mục liên kếtđến một trang với nội dung khác nhau

- Phần 3 : Slide phần hình chạy những sản phẩm nổi bật của shop

- Phần 4: Bên trái là danh mục các sản phẩm, thương hiệu được liên kết với cáctrang khác nhau và lịch ngày tháng năm

- Phần 5: Bên phải hiển thị sản phẩm bán nhiều nhất, 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 6: Ở giữa chứa các sản phẩm nổi bật và mới nhất được liên kết với trang chitiết sản phẩm

- Phần 7: Footer

2.2 Giao diện trang giới thiệu Cửa Hàng

Mục đích: Khi vào trang này, khách hàng sẽ biết được một số nét khái quát vềshop, lịch sử hình thành và phát triển, định hướng phát triển trong tương lai



Trang 18

Hình 2.2 Giao diện trang giới thiệu 2.3 Giao diện trang giới thiệu chất liệu sản phẩm

Trang 19

Hình 2.3 Giao diện trang giới thiệu

2.4 Giao diện trang liên hệ

 Mục đích:Trang này mục đích để khách hàng có thể liên lạc với shop.

 Chức năng: Trong giao diện này cho phép người dùng gửi những thông tin vềsản phẩm, thái độ phục vụ, cũng như phản hồi những sai phạm của nhân viên về shop

Trang 20

Hình 2.4 Giao diện trang liên hệ 2.5 Giao diện trang đăng ký

 Mục Đích: Người dùng đăng ký tài khoản để trở thành khách hàng của trang

Chức năng: Cho phép khách hàng có thể đăng ký thông tin để trở thành kháchhàng của shop để việc mua bán qua online thuận tiện hơn

Trang 21

Hình 2.5 Giao diện trang đăng ký 2.6 Giao diện trang đăng nhập

 Mục Đích: Người dùng đăng nhập tài khoản để đặt mua sản phẩm của trang.

Trang 22

Hình 2.6 Giao diện trang đăng nhập 2.7 Giao diện trang danh mục sản phẩm

 Mục Đích: Thanh menu chứa danh sách các loại sản phẩm của cửa hàng Kháchhàng có thể sử dụng menu này để lựa chọn sản phẩm mà mình cần tìm

 Sử dụng danh mục sản phẩm để chọn loại sản phẩm mà mình cần

Trang 23

Hình 2.7 Giao diện trang danh mục sản phẩm

Trang 24

2.7.1 Giao diện danh mục Quần Âu

Hình 2.7.1 Giao diện danh mục Quần Âu

2.7.2 Giao diện danh mục Quần Jeans

Trang 25

Hình 2.7.2 Giao diện danh mục Quần Jeans 2.7.3 Giao diện danh mục quần Kaki

Hình 2.7.3 Giao diện danh mục quần Kaki 2.7.4 Giao diện danh mục Jogger

Trang 26

Hình 2.7.4 Giao diện danh mục Quần Kaki 2.7.5 Giao diện danh mục Áo Sơ Mi

Hình 2.7.5 Giao diện danh mục Áo Sơ Mi 2.7.6 Giao diện danh mục Vest

Hình 2.7.6 Giao diện danh mục Vest

2.7.7 Giao diện danh mục Áo Thun

Hình 2.7.7 Giao diện danh mục Áo Thun 2.7.8 Giao diện danh mục Áo Khoác

Hình 2.7.8 Giao diện danh mục áo Khoác 2.7.9 Giao diện danh mục áo Hoodie

Trang 27

Hình 2.7.9 Giao diện danh mục áo Hoodie 2.7.10 Giao diện danh mục áo Thun No Style

Hình 2.7.10 Giao diện danh mục áo thun no styte 2.7.11 Giao diện danh mục Túi Sách

Hình 2.7.11 Giao diện danh mục Túi Sách 2.7.12 Giao diện danh mục Nón

Hình 2.7.12 Giao diện danh mục Nón

2.8 Giao diện trang chi tiết sản phẩm

 Mục đích: Chức năng này cho phép người dùng xem Tên sản phẩm,size, giá,thông tin chi tiết về sản phẩm

 Trong giao diện cho người dùng, chọn hiển thị theo Sản Phẩm đã được kíchchọn ở trang chủ

2.8.1 Chi tiết Sản Phẩm Quần Âu Nam Trắng

Hình 2.8.1 Giao diện trang chi tiết Quần Âu Nam Trắng



2.8.2 Chi tiết Sản Phẩm Quần Tây

Hình 2.8.2 Giao diện trang chi tiết Quần Tây

2.8.3 Chi tiết Quần Clown Pants

Hình 2.8.3 Giao diện trang chi tiết quần Clown Pants

2.8.4 Chi tiết Concrete Pants

Hình 2.8.4 Giao diện trang chi tiết Concrete Pants

Trang 28

2.8.5 Chi tiết Quần Tây Đen

Hình 2.8.5 Giao diện trang chi tiết Quần Tây Đen

Trang 29

2.8.6 Chi tiết Quần Tây Nâu

Hình 2.8.6 Giao diện trang chi tiết Quần Tây Nâu

2.8.7 Chi tiết Quần Tây Xám

Hình 2.8.7 Giao diện trang chi tiết Quần Tây Xám

2.8.8 Chi tiết Quần Xanh

Hình 2.8.8 Giao diện trang chi tiết Quần Xanh

2.8.9 Chi tiết áo Quần Kaki Xám

Hình 2.8.9 Giao diện trang chi tiết Quần Kaki Xám

2.8.10 Chi tiết áo Khoác Y2010 A01

Trang 30

Hình 2.8.10 Giao diện trang chi tiết áo khoác Y2010 A01

2.8.11 Chi Tiết Áo Khoác Y2010 A02

Hình 2.8.11 Giao diện trang chi tiết Áo Khoác Y2010 A02

2.8.12 Chi tiết Áo Khoác Y2010 A03

Hình 2.8.12 Giao diện trang chi tiết áo Khoác Y2010 A03

2.8.13 Chi tiết Áo khoác Y2010 A04

Hình 2.8.13 Giao diện trang chi tiết Áo Khoác Y2010 A04

2.8.14 Chi tiết Áo Khoác y2010 A05

Tiêu đề	Xây Dựng Website Shop Thời Trang Nam Oppa Store
Tác giả	Trần Quốc Dũng
Người hướng dẫn	ThS. Nguyễn Hữu Vĩnh
Trường học	Trường Đại Học Thủ Dầu Một
Chuyên ngành	Kỹ Thuật – Công Nghệ
Thể loại	Tiểu luận môn học
Năm xuất bản	2020
Thành phố	Thủ Dầu Một

Định dạng
Số trang	33
Dung lượng	10,08 MB