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

TRƯỜNG ĐẠI HỌC THỦ DẦU MỘT 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 VĨNH SVTH: NGUYỄN BÁ TOÀN MSSV: 2024802010007 SVTH: TRẦN QUANG HUY MSSV: 2024802010422 LỚP: D20CNTT03 0 HỮU Ti uểlu nậthiếết kếế website B7NH DƯƠNG – 4/2021 0 LỜI NÓI ĐẦU Hiện nay, giới công nghệ thông tin thương mại điện tử phát triển mạnh mẽ Việc mua bán trao đổi hàng hóa trở nên đơn giản nhanh gọn, đây, người ngồi nhà để mua sắm thứ theo ý muốn nhờ việc phát triển website trực tuyến Thương mại điện tử giúp tiết kiệm đáng kể chi phí vận chuyển trung gian, chi phí giao dịch đặc biệt giúp tiết kiệm thời gian để người tham gia vào hoạt động khác Hơn nữa, thương mại điện tử cịn giúp người 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 sở thích người với giá thành rẻ hỗ trợ nhiều Giờ đây, người ngồi nhà để mua sắm thứ theo ý muốn website bán hàng mạng giúp ta làm điều Bên cạnh đó, vấn đề di duyển, lại số nơi trở nên khó khăn việc kẹt xe, dân cư đơng đúc tình hình dịch bệnh Covid 19 diễn biến phức tạp khiến người gặp cản trở đến tận cửa hàng để chọn mua hàng hóa Nhằm giải vấn đề nhóm chúng em xây dựng website “Bán quần áo bóng đá cho cửa hàng Aobongda.24h ” Đây website đơn giản giải nhiều hạn chế cửa hàng bán quần áo truyền thống Đề tài tiểu luận gồm phần phân chương sau: Chương 1: Tổng quan đề 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 hướng phát triển i 0 Ti uểlu nậthiếết kếế website MỤC LỤC LỜI NÓI ĐẦU DANH MỤC HÌNH iv CHƯƠNG TỔNG QUAN VỀ ĐỀ TÀI 1.Tên Đề Tài 2.Mục Tiêu Đề 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 GIỚI THIỆU CÔNG NGHỆ 1.Giới Thiệu Về HTML 1.1 HTML gì? 1.2 Cơng dụng HTML 1.3 Định dạng HTML 2.Giới thiệu Adobe Dreamweaver 3.Ngôn ngữ CSS 4.Ngôn ngữ Javascript CHƯƠNG 3: GIAO DIỆN CHƯƠNG TRÌNH Sơ đồ website Đặ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ệ 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 ii 0 Ti uểlu nậthiếết kếế website 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 iii 0 Ti uểlu nậthiếết kếế website DANH MỤC H7NH Hình * Giao diện chương trình Hình 1.1 Giao diện trang chủ .6 Hình 1.2 Giao diện trang giới thiệu Hình 1.3 Giao diện trang liên hệ 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 iv 0 Ti uểlu nậthiếết kếế website DANH SÁCH CÁC KÝ TỰ, CHỮ VIẾT TẮT Từ viết tắt Giải thích CSDL Cơ sở liệu ĐVT Đơn vị tính CNTT Công Nghệ thông tin SP Sản phẩm v 0 Ti uểlu nậthiếết kếế website CHƯƠNG TỔNG QUAN VỀ ĐỀ TÀI Tên Đề Tài + THIẾT KẾ WEBSITE BÁN QUẦN ÁO BÓNG ĐÁ CHO CỬA HÀNG AOBONGDA.24H Mục Tiêu Đề Tài + Thiết kế Website bán quần áo bóng đa cho cửa hàng Aobongda.24h Ý Nghĩa Của Đề Tài + Đưa sản phẩm công ty đến đến gần với người tiêu dùng + Quảng bá thương hiệu + Tạo dựng thương hiệu thời trang thông qua việc mua bán Website + Trau dồi kĩ lập trình thiết kế web Đối Tượng Của Đề Tài + Đối tượng nghiên cứu chủ yếu sản phẩm quần áo bóng đá ,giày nam nữ Một Số Trang Chính Của Website + Trang chủ: Đây trang giới thiệu sơ lược sản phẩm phổ biến cửa hàng + Trang Giới thiệu: Đây trang giúp cho khách hàng biết thêm thông tin Shop + Trang liên hệ: : Đây trang mà khách hàng liên hệ với shop qua phương tiện Email, Số điện thoại, địa trược tiếp shop, liên hệ qua tổng đài shop + Trang đăng ký: Người dùng đăng ký tài khoản để trở thành khách hàng trang + Trang đăng nhập: Người dùng đăng nhập tài khoản để đặt mua sản phẩm trang + Trang sản phẩm: Đây trang khách hàng xem tham khảo mặt hàng cửa hàng có sẵn để lựa chọn + Trang chi tiết sản phẩm: Đây trang khách hàng nhấn vào sản phẩm để xem chi tiết SVTH: NGUYỄN BÁ TOÀN – LỚP D20CNTT03 0 Ti uểlu nậthiếết kếế website CHƯƠNG GIỚI THIỆU CÔNG NGHỆ Giới Thiệu Về HTML 1.1 HTML gì? HTML (Hypertext Markup Language-Ngơn ngữ đánh dấu siêu văn bản) ngôn ngữ đánh dấu chuẩn dùng soạn thảo tài liệu World Wide Web, rõ trang Web hiển thị trình duyệt Ngôn ngữ HTML dùng tag đoạn mã lệnh trình duyệt (Web browsers) cách hiển thị thành phần trang text graphics HTML ngôn ngữ xác định cấu trúc thông tin HTML sử dụng loạt thẻ thuộc tính dùng để thị văn thông tin khác, cung cấp siêu liên kết tới tài liệu khác 1.2 Công dụng HTML Thiết kế nội dung hình thức trang web Xuất tài liệu trực tuyến hay truy xuất thông tin trực tuyến cách dùng liên kết chèn vào trang web Tạo biểu mẫu trực tuyến nhằm thu thập thông tin người dùng, quản lý giao dịch… Thêm vào đối tượng hình ảnh video, âm thanh… 1.3 Định dạng HTML Là tập tin có phần mở rộng htm html Là tập tin văn túy, có chứa mã đặc biệt gọi Tag(thẻ), thường đặt xung quanh khối văn Có thể viết nhiều trình soạn thảo: Microsoft Fontpage, notepad…và sử dụng nhiều adobe dreamweaver Giới thiệu Adobe Dreamweaver SVTH: NGUYỄN BÁ TOÀN – LỚP D20CNTT03 0 Ti uểlu nậthiếết kếế website Macromedia Dreamweaver trình biên soạn HTML chuyên nghiệp dùng để thiết kế, viết mã phát triển website trang web ứ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 bạn thích làm việc môi trường biên soạn trực quan, Dreamweaver cung cấp cho bạn cơng cụ hữu ích để nâng cao kinh nghiệm thiết kế web bạn Các tính biên soạn trực quan Dreamweaver cho phép bạn tạo nhanh trang web mà khơng cần dịng mã Bạn xem tất thành phần website bạn kéo chúng trực tiếp từ panel dễ sử dụng vào văn Bạn nâng cao sản phẩm bạn cách tạo sửa ảnh Macromedia Fireworks ứng dụng ảnh khác, sau chèn trực tiếp vào Dreamweaver Dreamweaver cung cấp công cụ giúp đơn giản hóa việc chèn Flash vào trang web Dreamweaver cho phép bạn Thiết kế ứng dụng web động dựa theo liệu sử dụng công nghệ máy chủ CFML, ASP.NET, ASP, JSP, PHP Nếu sở thích bạn làm việc với liệu XML, Dreamweaver cung cấp công cụ cho phép bạn dễ dàng tạo trang XSLT, chèn file XML hiển thị liệu XML trang web bạn Dreamweaver tùy biến hồn tồn Bạn tạo cho riêng đối tượng yêu cầu, chỉnh sửa shortcut bàn phím chí viết mã JavaScript để mở rộng khả Dreamweaver với hành vi mới, chuyên gia giám định Property báo cáo site Ngôn ngữ CSS CSS (Cascading Style Sheets) ngôn ngữ quy định cách trình bày cho tài liệu viết HTML, XHTML, XML, SVG, hay UML,… CSS cung cấp nhiều thuộc tính trình bày dành cho đối tượng với sáng tạo việc kết hợp thuộc tính giúp mang lại hiệu cao CSS hỗ trợ tất trình duyệt hiển thị “như nhau” hệ điều hành CSS đưa phương thức áp dụng từ file CSS ngồi Có hiệu đồng tạo website có hàng trăm trang hay muốn thay đổi thuộc tính trình bày SVTH: NGUYỄN BÁ TỒN – LỚP D20CNTT03 0 Ti uểlu nậthiếết kếế website 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 16 SVTH: NGUYỄN BÁ TỒN – LỚP D20CNTT03 0 Ti uểlu nậthiếết kếế website Hình 1.14 : Áo khơng Logo 2.14 Giao diê ›n trang áo clb Đức+Pháp Hình 1.15 : Áo clb Đức+Pháp 2.15 Giao diê ›n trang áo clb Italia 17 SVTH: NGUYỄN BÁ TOÀN – LỚP D20CNTT03 0 Ti uểlu nậthiếết kếế website Hình 1.16 : Áo clb Italia 2.16 Giao diên› trang áo clb Anh Hình 1.17 : Áo clb Anh 18 SVTH: NGUYỄN BÁ TOÀN – LỚP D20CNTT03 0 Ti uểlu nậthiếết kếế website 2.17 Giao diê ›n trang áo clb Tây Ban Nha Hình 1.18 : Áo clb Tây Ban Nha 2.18 Giao diê ›n trang bán giày thể thao Hình 1.19 : Giày thể thao 19 SVTH: NGUYỄN BÁ TOÀN – LỚP D20CNTT03 0 Ti uểlu nậthiếết kếế website 2.19 Giao diên› trang chi tiết giày hãng Hình 1.20 : Giày thể thao 2.20 Giao diê ›n chi tiết áo Manchester United  Gồm thông số chi tiết sản phẩm  Giá sản phẩm 20 SVTH: NGUYỄN BÁ TOÀN – LỚP D20CNTT03 0 Ti uểlu nậthiếết kếế website Hình 1.21 : Chi tiết áo Manchester United 2.21 Giao diên› chi tiết áo clb Barcelona  Gồm thông số chi tiết sản phẩm  Giá sản phẩm 21 SVTH: NGUYỄN BÁ TOÀN – LỚP D20CNTT03 0 Ti uểlu nậthiếết kếế website Hình 1.22 : Chi tiết áo CLB Barelona 22 SVTH: NGUYỄN BÁ TOÀN – LỚP D20CNTT03 0 Ti uểlu nậthiếết kếế website 2.22 Giao diê ›n chi tiết áo không Logo  Gồm thông số chi tiết sản phẩm  Giá 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 23 SVTH: NGUYỄN BÁ TOÀN – LỚP D20CNTT03 0 Ti uểlu nậthiếết kếế website  Gồm thông số chi tiết sản phẩm  Giá sản phẩm Hình 1.24 : Chi tiết áo CLB Real Madrid 24 SVTH: NGUYỄN BÁ TOÀN – LỚP D20CNTT03 0 Ti uểlu nậthiếết kếế website 2.23 Giao diện chi tiết áo CLB Arsenal  Gồm thông số chi tiết sản phẩm  Giá sản phẩm Hình 1.25 : Chi tiết áo CLB Arsenal 25 SVTH: NGUYỄN BÁ TOÀN – LỚP D20CNTT03 0 Ti uểlu nậthiếết kếế website 2.24 Giao diện chi tiết áo CLB DortMund  Gồm thông số chi tiết sản phẩm  Giá sản phẩm Hình 1.26 : Chi tiết áo CLB DortMund 26 SVTH: NGUYỄN BÁ TOÀN – LỚP D20CNTT03 0 Ti uểlu nậthiếết kếế website 2.25 Giao diện giỏ hàng Hình 1.27 : Chi tiết giỏ hàng 27 SVTH: NGUYỄN BÁ TOÀN – LỚP D20CNTT03 0 Ti uểlu nậthiếết kếế website KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN Trong thời buổi công nghệ số việc bùng nổ công nghệ thông tin, việc buôn bán qua mạng sàn thương mại điện tử trở nên phổ biến với hầu hết người Đây xu hướng xã hội với cú nhấp chuột ta dễ dàng đặt mua sản phầm mà ưng ý cách dễ dàng thời gian đến tận nơi để mua Việc mua bán giúp tiết kiệm thời gian tiền bạc người lựa chọn sản phẩm với giá đa dạng nhu cầu cá nhân người Vì thế, sau tiến hành khảo sát nhóm chúng em định xây dựng trang web bán quần áo bóng đá mà cụ thể “Xây dựng website shop bán quần áo bóng đá cho cửa hàng aobongda24h”với chức cần thiết cho trang web bn bán cần có chúng em nhận thấy nhu cầu mua sắm online người có xu hướng tăng thị trường tiềm khai thác Website “aobongda24h ” thứ dùng để quảng bá cho thương hiệu aobongda24h, thứ hai kênh thông tin cho người, thứ ba địa tin cậy để khách hàng u thích thời trang thể thao tìm mua cho sản phẩm chất lượng Qua trình nghiên cứu cố gắng thực hướng dẫn tận tình Giảng viên, giúp đ• bạn bè khóa học đồ án nghiên cứu thể điều sau: - Kết đạt được: Xây dựng thành cơng website bán quần áo bóng đá cho cửa hàng aobongda24h, đáp ứng yêu cầu người sử dụng - Tìm hiểu nắm công cụ để xây dựng website như: Adobe Dreamweaver CS6, ngơn ngữ lập trình Website như: HTML, Javascript, CSS - Giao diện website thiết kế đơn giản, thân thiện dễ sử dụng Việc hạn chế : - Việc biểu diễn thông tin website chưa linh hoạt - Phân tích thiết kế chưa hồn chỉnh - Nhiều chức cịn thiếu chưa sử dụng 28 SVTH: NGUYỄN BÁ TOÀN – LỚP D20CNTT03 0 Ti uểlu nậthiếết kếế website Hướng phát triển đề tài: Đề tài hoàn thiện phát triển thành trang webside bán quần áo thông dụng cho cửa hàng xây dựng trang webside tảng trang webside Lời kết Vì thời gian khơng cho phép kiến thức thiết kế web hạn chế nên chúng em chưa hoàn thiện trang web cách tốt Vì đề tài cịn có nhiều thiếu sót, mong thầy giúp đ• chúng em nhiều em tiếp tục tìm hiểu sâu 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 tương tác tốt với người dùng  Xây dựng, bổ sung tính cịn thiếu hay chưa thật hồn chỉnh q trình sử dụng CHÂN THÀNH CÁM ƠN QUÝ THẦY CÔ VÀ CÁC BẠN! 29 SVTH: NGUYỄN BÁ TOÀN – LỚP D20CNTT03 0 Ti uểlu nậthiếết kếế website TÀI LIỆU KHAM KHẢO Tài liệu giảng môn “Thiết kế website” thầy Nguyễn Hữu Vĩnh Website WWW : http://www.hiepsiit.com Website https://coccoc.com/search#query=Webcoban.vn 30 SVTH: NGUYỄN BÁ TOÀN – LỚP D20CNTT03 0 ... QUAN VỀ ĐỀ TÀI Tên Đề Tài + THIẾT KẾ WEBSITE BÁN QUẦN ÁO BÓNG ĐÁ CHO CỬA HÀNG AOBONGDA. 24H Mục Tiêu Đề Tài + Thiết kế Website bán quần áo bóng đa cho cửa hàng Aobongda. 24h Ý Nghĩa Của Đề Tài + Đưa... tận cửa hàng để chọn mua hàng hóa Nhằm giải vấn đề nhóm chúng em xây dựng website ? ?Bán quần áo bóng đá cho cửa hàng Aobongda. 24h ” Đây website đơn giản giải nhiều hạn chế cửa hàng bán quần áo. .. học đồ án nghiên cứu thể điều sau: - Kết đạt được: Xây dựng thành công website bán quần áo bóng đá cho cửa hàng aobongda2 4h, đáp ứng yêu cầu người sử dụng - Tìm hiểu nắm công cụ để xây dựng website