Tiểu luận môn học thiết kế website thiết kế website bán quần áo bóng đá cho cửa hàng aobongda 24h

+ Trang chủ: Đây là trang giới thiệu sơ lược về các sản phẩm phổ biến 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,

VIỆN KỸ THUẬT CÔNG NGHỆ

TIỂU LUẬN MÔN HỌC THIẾT KẾ WEBSITE

THIẾT KẾ WEBSITE BÁN QUẦN ÁO BÓNG ĐÁ CHO CỬA HÀNG AOBONGDA.24H

GVHD: THS NGUYỄN HỮU VĨNH

SVTH: NGUYỄN BÁ TOÀN MSSV: 2024802010007

SVTH: TRẦN QUANG HUY MSSV: 2024802010422

LỚP: D20CNTT03

B7NH DƯƠNG – 4/2021

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ẽ Việc mua bán trao đổi hàng hóa trở nên hết sức đơn giản và nhanh gọn,giờ đây, mọi người có thể ngồi ở nhà để mua sắm mọi thứ theo ý muốn nhờ việc pháttriển các website trực tuyến Thương mại điện tử giúp chúng ta tiết kiệm đáng kể cácchi 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 tham gia vào các hoạt động khác Hơn nữa, thương mại điện tử còn giúpcon người có thể tìm kiếm tự động theo nhiều mục đích khác nhau, tự động cung cấpthông tin theo nhu cầu và sở thích của con người với giá thành rẻ và được hỗ trợ rấtnhiều Giờ đây, con người có thể ngồi tại nhà để mua sắm mọi thứ theo ý muốn và cácwebsite bán hàng trên mạng sẽ giúp ta làm được điều đó Bên cạnh đó, vấn đề diduyển, đi lại ở một số nơi trở nên khó khăn do việc kẹt xe, dân cư đông đúc và tìnhhình dịch bệnh Covid 19 diễn biến phức tạp khiến mọi người gặp cản trở khi đến tậncửa hàng để chọn mua hàng hóa Nhằm giải quyết vấn đề này nhóm chúng em xâydựng website “Bán quần áo bóng đá cho cửa hàng Aobongda.24h” Đây là mộtwebsite đơn giản nhưng có thể giải quyết được nhiều hạn chế của cửa hàng bán quần

áo truyền thống

Đề 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

MỤC LỤC

LỜI NÓI ĐẦU

DANH MỤC HÌNH iv

CHƯƠNG 1 TỔNG QUAN VỀ ĐỀ TÀI 1.Tên Đề Tài

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

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

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

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

CHƯƠNG 2 GIỚI THIỆU CÔNG NGHỆ 1.Giới Thiệu Về HTML

1.1 HTML là gì? 1.2 Công dụng của HTML 1.3 Định dạng của HTML 2.Giới thiệu về Adobe Dreamweaver

3.Ngôn ngữ CSS

4.Ngôn ngữ Javascript

CHƯƠNG 3: GIAO DIỆN CHƯƠNG TRÌNH 1 Sơ đồ website 5

2 Đặc Tả Giao Diện

2.1Giao diện trang chủ

2.2Giao diện trang giới thiệu

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

2.4Giao diện trang đăng kí 10

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

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

2.7Giao diện áo Barca 13

2.8Giao diện áo Đức 13

2.9Giao diện áo Tây Ban Nha 14

2.10Giao diện áo Brazil 14

2.11Giao diện áo Pháp 15

2.12Giao diện áo Italia 15

2.13 Giao diện áo Bồ Đào Nha 16

2.14 Giao diện áo không Logo 16

2.16 Giao diện áo CLB Italia 17

2.18 Giao diện áo Đức+Pháp 17

2.17 Giao diện áo CLB Anh 18

2.15 Giao diện giày thể thao 19

2.19 Giao diện chi tiết giày thể thao 19

2.20 Giao diện chi tiết CLB Manchester United 20

2.21 Giao diện chi tiết CLB Barcelona 21

2.22 Giao diện chi tiết áo không Logo 22

2.23 Giao diện chi tiết áo CLB Real Madrid 23

2.24 Giao diện chi tiết áo CLB Arsenal 24

2.25 Giao diện chi tiết áo CLB Dortmund 25

2.26 Giao diện chi tiết giỏ hàng 26

Kết luận 27

Hướng phát triển đề tài 27

Tài liệu tham khảo 28

DANH MỤC H7NH

Hình * Giao diện chương trình 5

Hình 1.1 Giao diện trang chủ 6

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

Hình 1.3 Giao diện trang liên hệ 9

Hình 1.4 Giao diện trang đăng kí 10

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

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

Hình 1.7 Giao diện trang danh mục áo Barca 13

Hình 1.8 Giao diện trang danh mục áo Đức 13

Hình 1.9 Giao diện trang danh mục áo Tây Ban Nha 14

Hình 1.10 Giao diện trang danh mục áo Brazil 14

Hình 1.11 Giao diện trang danh mục áo Pháp 15

Hình 1.12 Giao diện trang danh mục áo Italia 15

Hình 1.13 Giao diện trang danh mục áo Bồ Đào Nha 16

Hình 1.14 Giao diện trang danh mục áo không Logo 16

Hình 1.15 Giao diện danh mục áo CLB Italia 17

Hình 1.18 Giao diện danh mục áo CLB Đức+Pháp 17

Hình 1.16 Giao diện danh mục áo CLB Anh 18

Hình 1.17 Giao diện danh mục áo CLB Tây Ban Nha 18

Hình 1.19 Giao diện trang danh mục giày thể thao 19

Hình 1.20 Giao diện danh mục trang chi tiết giày thể thao 19

Hình 1.21 Giao trang diện danh mục chi tiết áo CLB Manchester United 20

Hình 1.22 Giao trang diện danh mục chi tiết áo CLB Barcelona 21

Hình 1.23 Giao trang diện danh mục chi tiết áo không Logo 22

Hình 1.24 Giao trang diện danh mục chi tiết áo CLB Real Madrid 23

Hình 1.25 Giao trang diện danh mục chi tiết áo CLB Arsenal 24

Hình 1.26 Giao trang diện danh mục chi tiết áo CLB Dortmund 25

Hình 1.27 Giao diện trang giỏ hàng 26

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

1 Tên Đề Tài.

+ THIẾT KẾ WEBSITE BÁN QUẦN ÁO BÓNG ĐÁ CHO CỬA HÀNGAOBONGDA.24H

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

+ Thiết kế Website bán quần áo bóng đa cho cửa hàng Aobongda.24h

3 Ý 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

+ 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 + Trau dồi kĩ năng lập trình thiết kế web

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

+ Đối tượng nghiên cứu chủ yếu là các sản phẩm quần áo bóng đá ,giày của nam

và nữ

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 phổ biến của cửa hàng

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

+ 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

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…

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ệctrong 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á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

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 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í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 XMLtrên trang web 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

2

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.

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

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

Shoes National

team

shirt without logo Club

Home page

Products

product information and price

2 Đặc Tả Giao Diện

2.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ổ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 6 phần:

- Phần 1: Logo của trang web

- Phần 2 - Menu ngang: Bao gồm các mục: Trang chủ, Câu lạc bô ›, Đô ›i tuyển quốcgia, Áo không logo và Giày Mỗi danh mục liên kết đến một trang với nội dung khácnhau

- Phần 3: 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 4: Bên phải hiển thị sản phẩm hot, chạy và liên kết website được liên kết tớicác trang khác

- Phần 5: Ở 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 6: Footer

2.2 Giao diện trang giới thiệu

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

Hình 1.2 : Giao diê ›n trang giới thiê ›u

2.3 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 góp ý 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

Hình

1.3 : Giao diê ›n trang liên hê ›

2.4 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 để đă ›t hàng cũng nhưhư•ng những ưu đãi siêu vippro

Hình 1.4 : Giao diê ›n trang đăng kí.

2.4 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

Hình 1.5 : Giao diê ›n trang đăng nhâ ›p

2.6 Giao diện trang danh mục sản phẩm tiêu biểu

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

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

Hình 1.6 : Giao diê ›n trang danh mục sản phẩm

2.7 Giao diê ›n trang áo clb Barca

2.9 Giao diê ›n trang áo ĐTQG Tây Ban Nha

1.9 : Áo ĐTQG Tây Ban Nha

2.11 Giao diê ›n trang áo ĐTQG Brazil

Hình 1.10 : Áo ĐTQG Brazil

2.12 Giao diê ›n trang áo ĐTQG Pháp

Hình 1.11 : Áo ĐTQG Pháp

2.11 Giáo diê ›n trang áo ĐTQG Italia

Hình 1.12 : Áo ĐTQG Italia

2.12 Giao diê ›n trang áo ĐTQG Bồ Đào Nha

Hình 1.13 : Áo ĐTQG Bồ Đào Nha

2.13 Giao diê ›n trang áo không logo

Hình 1.14 : Áo không Logo.

2.17 Giao diê ›n trang áo các clb Tây Ban Nha

Hình 1.18 : Áo các clb Tây Ban Nha

2.19 Giao diê ›n trang chi tiết giày chính hãng

Hình 1.20 : Giày thể thao

2.20 Giao diê ›n chi tiết áo Manchester United

 Gồm các thông số chi tiết của sản phẩm

 Giá cả của sản phẩm

Hình 1.21 : Chi tiết áo Manchester United

2.21 Giao diê ›n chi tiết áo clb Barcelona

 Gồm các thông số chi tiết của sản phẩm

 Giá cả của sản phẩm

Hình 1.22 : Chi tiết áo CLB Barelona.

2.22 Giao diê ›n chi tiết áo không Logo

 Gồm các thông số chi tiết của sản phẩm

 Giá cả của sản phẩm

Hình 1.23 : Chi tiết áo không Logo

2.23 Giao diện chi tiết áo CLB Real Madrid

 Gồm các thông số chi tiết của sản phẩm

 Giá cả của sản phẩm

Hình 1.24 : Chi tiết áo CLB Real Madrid

2.23 Giao diện chi tiết áo CLB Arsenal

 Gồm các thông số chi tiết của sản phẩm

 Giá cả của sản phẩm

Hình 1.25 : Chi tiết áo CLB Arsenal

2.24 Giao diện chi tiết áo CLB DortMund

 Gồm các thông số chi tiết của sản phẩm

 Giá cả của sản phẩm

Hình 1.26 : Chi tiết áo CLB DortMund

2.25 Giao diện giỏ hàng

Hình 1.27 : Chi tiết giỏ hàng

KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN

Trong thời buổi công nghệ số và việc bùng nổ công nghệ thông tin, việc buôn bánqua mạng trên các sàn thương mại điện tử đã trở nên phổ biến với hầu hết mọi người.Đây cũng là xu hướng trong xã hội hiện nay khi chỉ với một cú nhấp chuột cũng ta cóthể dễ dàng đặt mua được sản phầm mà mình ưng ý một cách dễ dàng và không phảimất thời gian đi đến tận nơi để mua Việc mua bán này giúp tiết kiệm thời gian và tiềnbạc khi mọi người có thể lựa chọn sản phẩm với giá cả đa dạng và nhu cầu cá nhâncủa từng người

Vì thế, sau khi tiến hành khảo sát thì nhóm chúng em quyết định xây dựng mộttrang web bán quần áo bóng đá mà cụ thể là “Xây dựng website shop bán quần áobóng đá cho cửa hàng aobongda24h”với các chức năng cơ bản cần thiết cho một trangweb buôn bán cần có vì chúng em nhận thấy nhu cầu mua sắm online của mọi ngườiđang có xu hướng tăng và đây cũng là một thị trường tiềm năng có thể khai thác Website “aobongda24h ” thứ nhất dùng để quảng bá cho thương hiệuaobongda24h, thứ hai là kênh thông tin cho mọi người, thứ ba là một địa chỉ tin cậy đểnhững khách hàng yêu thích thời trang thể thao tìm mua được cho mình những sảnphẩm chất lượng Qua quá trình nghiên cứu và cố gắng thực hiện dưới sự hướng dẫntận tình của Giảng viên, sự giúp đ• của bạn bè trong khóa học đồ án nghiên cứu thểhiện được những điều sau:

- Việc biểu diễn các thông tin trên website chưa được linh hoạt

- Phân tích thiết kế chưa được hoàn chỉnh

- Nhiều chức năng còn thiếu và chưa sử dụng được

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

Đề tài có thể hoàn thiện và phát triển thành một trang webside bán quần áo thôngdụng cho các cửa hàng và cũng có thể xây dựng trang webside trên nền tảng trang webside này

Lời kết

Vì thời gian không cho phép và kiến thức về thiết kế web còn hạn chế nên chúng

em chưa hoàn thiện trang web một cách tốt nhất Vì thế đề tài cũng còn có nhiều thiếusót, mong thầy giúp đ• chúng em nhiều hơn và em sẽ tiếp tục tìm hiểu sâu hơn vềcông nghệ này, nhằm mục đích xây dựng website:

 Giao diện đẹp, thân thiện với người dùng, có nhiều chức năng và tươngtác tốt hơn với người dùng

 Xây dựng, bổ sung các tính năng còn thiếu hay chưa thật sự hoàn chỉnhtrong quá trình sử dụng

CHÂN THÀNH CÁM ƠN QUÝ THẦY CÔ VÀ CÁC BẠN!

TÀI LIỆU KHAM KHẢO

1 Tài liệu bài giảng môn “Thiết kế website” của thầy Nguyễn Hữu Vĩnh

2 Website WWW : http://www.hiepsiit.com

3 Website https://coccoc.com/search#query=Webcoban.vn