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

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 XÂY DỰNG WEBSITE SHOP THỜI TRANG NAM OPPA STORE GVHD: THS NGUYỄN HỮU VĨNH SVTH: TRẦN QUỐC DŨNG MSSV: 1824801040013 LỚP: D18HT01 B8NH DƯƠNG – 7/2020  KHOA KỸ THUẬT – CÔNG NGHỆ NHẬN XÉT VÀ CHẤM ĐIỂM CỦA GIẢNG VIÊN Họ 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 Đồ án môn thiết kế web 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ẽ Kỹ thuật số giúp tiết kiệm đáng kể chi phí nhờ 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 đầu tư 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 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 Chính vậy, cơng nghệ mã nguồn mở trở nên ý tính Giá thành rẻ hỗ trợ nhiều mạng giúp ta nhanh chóng Thiết kế website bán hàng thân thiện dễ sử dụng với người dùng Chính báo cáo chọn đề tài về: “Xây Dựng website shop thời trang nam Oppa Store” Đây hệ thống đơn giản đủ mạnh phép nhanh chóng Thiết kế ứng dụng bán hàng Internet Đề 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 SVTH: TRẦN QUỐC DŨNG – LỚP D18HT01 i Đồ á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 TỔNG QUAN VỀ ĐỀ TÀI 1 Tên Đề Tài .1 Mục Tiêu Đề Tài Ý Nghĩa Của Đề Tài .1 Đối Tượng Của Đề Tài Một Số Trang Chính Của Website CHƯƠNG GIỚI THIỆU CÔNG NGHỆ 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 Ngôn ngữ CSS Ngôn ngữ Javascript CHƯƠNG 3: GIAO DIỆN CHƯƠNG TRÌNH Sơ đồ Website: Đặc Tả Giao Diện 2.1 Giao diện trang chủ .6 2.2 Giao diện trang giới thiệu Cửa Hàng 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ệ 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 SVTH: TRẦN QUỐC DŨNG – LỚP D18HT01 ii Đồ án môn thiết kế web 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 2.8.15 Chi tiết Áo Khoác Y2010 A006 34 2.8.16 Chi tiết Áo Khoác Y2010 A07 35 2.8.17 Chi tiết Áo Khoác Y2010 A08 36 SVTH: TRẦN QUỐC DŨNG – LỚP D18HT01 iii Đồ án mơn thiết kế web 2.8.18 Chi tiết Áo Khốc Y2010 A09 37 CHƯƠNG 4: KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN 39 Kết đạt được: 39 Việc chưa làm được: .39 Hướng phát triển đề tài 39 TÀI LIỆU KHAM KHẢO 40 DANH MỤC H8NH Hình 1.2 Sơ Đồ Website Hình 1.2 Sơ Đồ Sản Phẩm Quần Hình 1.2 Sơ Đồ Sản Phẩm Áo .6 Hình 1.2 Sơ Đồ Sản Phẩm Phụ Kiện Hình 2.1 Giao diện trang chủ 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 SVTH: TRẦN QUỐC DŨNG – LỚP D18HT01 iv Đồ án mơn thiết kế web 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 Khố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 khốc Y2010 A01 Hình 2.8.11 Giao diện trang chi tiết áo khốc Y2010 A02 Hình 2.8.12 Giao diện trang chi tiết áo khốc Y2010 A03 Hình 2.8.13 Giao diện trang chi tiết áo khốc Y2010 A04 Hình 2.8.14 Giao diện trang chi tiết áo khốc Y2010 A05 Hình 2.8.15 Giao diện trang chi tiết áo khốc Y2010 A06 Hình 2.8.16 Giao diện trang chi tiết áo khốc Y2010 A07 Hình 2.8.17 Giao diện trang chi tiết áo khốc Y2010 A08 Hình 2.8.18 Giao diện trang chi tiết áo khoác Y2010 A09 SVTH: TRẦN QUỐC DŨNG – LỚP D18HT01 v Đồ án môn thiết kế web 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 SVTH: TRẦN QUỐC DŨNG – LỚP D18HT01 vi Tiểu luận môn thiết kế web CHƯƠNG TỔNG QUAN VỀ ĐỀ TÀI Tên Đề Tài + XÂY DỰNG WEBSITE SHOP THỜI TRANG NAM OPPA STORE Mục Tiêu Đề Tài + Xây Dựng Website bán hàng cho Shop Thời Trang Nam Oppa Store Ý Nghĩa Của Đề Tài + Đưa tất sản phẩm thương hiệu shop đến tay 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 Đối Tượng Của Đề Tài + Đối tượng nghiên cứu đề tài hướng tới đối tượng Nam giới Việc mua sắm quần áo, phụ kiện nam giới Một Số Trang Chính Của Website + Trang chủ: Đây trang giới thiệu sơ lược sản phẩm cửa hàng + Trang Giới thiệu Cửa Hàng: Đây trang giúp cho khách hàng xem biết thêm thông tin 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 chất liệu cửa hàng + 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 + Các 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: TRẦN QUỐC DŨNG – LỚP D18HT01 Tiểu luận môn thiết kế web SVTH: TRẦN QUỐC DŨNG – LỚP D18HT01 Tiểu luận mơn thiết kế web 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 mục đích để khách hàng liên lạc với shop  Chức năng: Trong giao diện cho phép người dùng gửi thông tin sản phẩm, thái độ phục vụ, phản hồi sai phạm nhân viên shop SVTH: TRẦN QUỐC DŨNG – LỚP D18HT01 11 Tiểu luận mơn thiết kế web 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 trang Chức năng: Cho phép khách hàng đăng ký thông tin để trở thành khách hàng shop để việc mua bán qua online thuận tiện SVTH: TRẦN QUỐC DŨNG – LỚP D18HT01 12 Tiểu luận mơn thiết kế web 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 trang SVTH: TRẦN QUỐC DŨNG – LỚP D18HT01 13 Tiểu luận mơn thiết kế web 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 loại sản phẩm cửa hàng Khách hàng sử dụng menu để lựa chọn sản phẩm mà cần tìm  Sử dụng danh mục sản phẩm để chọn loại sản phẩm mà cần SVTH: TRẦN QUỐC DŨNG – LỚP D18HT01 14 Tiểu luận mơn thiết kế web Hình 2.7 Giao diện trang danh mục sản phẩm SVTH: TRẦN QUỐC DŨNG – LỚP D18HT01 15 Tiểu luận môn thiết kế web 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 SVTH: TRẦN QUỐC DŨNG – LỚP D18HT01 16 Tiểu luận môn thiết kế web 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 SVTH: TRẦN QUỐC DŨNG – LỚP D18HT01 17 Tiểu luận mơn thiết kế web 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 2.7.9 Giao diện danh mục áo Hoodie Hình 2.7.8 Giao diện danh mục áo Khoác SVTH: TRẦN QUỐC DŨNG – LỚP D18HT01 18 Tiểu luận mơn thiết kế web 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 cho phép người dùng xem Tên sản phẩm,size, giá, thông tin chi tiết sản phẩm  Trong giao diện cho người dùng, chọn hiển thị theo Sản Phẩm kích chọ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 SVTH: TRẦN QUỐC DŨNG – LỚP D18HT01 19 Tiểu luận môn thiết kế web 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 SVTH: TRẦN QUỐC DŨNG – LỚP D18HT01 20 Tiểu luận môn thiết kế web 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 2.8.9 Chi tiết áo Quần Kaki 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 2.8.10 Chi tiết áo Khoác Y2010 A01 SVTH: TRẦN QUỐC DŨNG – LỚP D18HT01 21 Tiểu luận mơn thiết kế web Hình 2.8.10 Giao diện trang chi tiết áo khoác Y2010 A01 2.8.11 Chi Tiết Áo Khố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 Khốc Y2010 A03 2.8.13 Chi tiết Áo khố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 SVTH: TRẦN QUỐC DŨNG – LỚP D18HT01 22 Tiểu luận môn thiết kế web Hình 2.8.14 Giao diện trang chi tiết Áo Khốc Y2010 A05 2.8.15 Chi tiết Áo Khốc Y2010 A006 Hình 2.8.15 Giao diện trang chi tiết Áo Khoác Y2010 A06 2.8.16 Chi tiết Áo Khốc Y2010 A07 Hình 2.8.16 Giao diện trang chi tiết Áo Khoác Y2010 A07 2.8.17 Chi tiết Áo Khốc Y2010 A08 Hình 2.8.17 Giao diện trang chi tiết Áo Khoác Y2010 A08 2.8.18 Chi tiết Áo Khốc Y2010 A09 Hình 2.8.18 Giao diện trang chi tiết Áo Khoác Y2010 A09 SVTH: TRẦN QUỐC DŨNG – LỚP D18HT01 23 Tiểu luận môn thiết kế web CHƯƠNG 4: KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN Trong thời buổi công nghiệp hóa nay, việc bn bán qua mạng trở nên phổ biến với hầu hết người Đây xu hướng xã hội người với cú nhấp chuột 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 em định Thiết kế trang web bán quần áo mà cụ thể “Xây dựng website shop Thời Trang Nam Oppa Store”với chức cần thiết cho trang web bn bán cần có em thấy nhu cầu mua sắm thị trường tiềm khai thác buôn bán Website “shop Thời Trang Nam Oppa Store” thứ dùng để quảng bá cho sản phẩm, thứ hai kênh thông tin cho người, thứ ba địa tin cậy để khách hàng yêu thích thời trang 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 thời trang cho cửa hàng Thời Trang Nam Oppa Store, đáp ứng yêu cầu người sử dụng - Tìm hiểu nắm công cụ để Thiết kế 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 chưa làm được: - 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 Hướng phát triển đề tài 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 tìm hiểu rõ kỹ đề tài 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 Thiết kế website: SVTH: TRẦN QUỐC DŨNG – LỚP D18HT01 24 Tiểu luận môn thiết kế web  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  Thiết kế, bổ sung tính cịn thiếu hay chưa thật hồn chỉnh trình sử dụng 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 - Website : https://www.w3schools.com/html/default.asp SVTH: TRẦN QUỐC DŨNG – LỚP D18HT01 25 ... vi Tiểu luận môn thiết kế web CHƯƠNG TỔNG QUAN VỀ ĐỀ TÀI Tên Đề Tài + XÂY DỰNG WEBSITE SHOP THỜI TRANG NAM OPPA STORE Mục Tiêu Đề Tài + Xây Dựng Website bán hàng cho Shop Thời Trang Nam Oppa Store. .. trang web bán quần áo mà cụ thể ? ?Xây dựng website shop Thời Trang Nam Oppa Store? ??với chức cần thiết cho trang web bn bán cần có em thấy nhu cầu mua sắm thị trường tiềm khai thác bn bán Website ? ?shop. .. TRẦN QUỐC DŨNG – LỚP D18HT01 14 Tiểu luận môn thiết kế web Hình 2.7 Giao diện trang danh mục sản phẩm SVTH: TRẦN QUỐC DŨNG – LỚP D18HT01 15 Tiểu luận môn thiết kế web 2.7.1 Giao diện danh mục Quần