Tiể ậ u lu n môn h c ọ thiết kế web thiết kế website bán máy ảnh cho c a hàng kingcame

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Ế WEB THIẾT KẾ WEBSITE BÁN MÁY ẢNH CHO CỬA HÀNG KINGCAME GV: ThS Nguyễn Hữu Vĩnh SVTH: Nguyễn Hoàng Hiệp MSSV: 2024802010235 SVTH: Hoàng Lê Huy MSSV: 2024802010372 LỚP: D20CNTT04 BNH DƯƠNG - 04/2021 0 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Ế WEB THIẾT KẾ WEBSITE BÁN MÁY ẢNH CHO CỬA HÀNG KINGCAME GV: ThS Nguyễn Hữu Vĩnh SVTH: Nguyễn Hoàng Hiệp MSSV: 2024802010235 SVTH: Hoàng Lê Huy MSSV: 2024802010372 LỚP: D20CNTT04 BNH DƯƠNG - 04/2021 i 0 MỤC LỤC MỤC LỤC ii DANH MỤC HÌNH iv MỞ ĐẦU CHƯƠNG KHẢO SÁT VÀ PHÂN TÍCH BÀI TOÁN 1.1 Phát biểu toán 1.2 Phân tích chức 1.2.1 Giới thiệu trang Web bán máy ảnh Kingcame 1.2.2 Danh mục sản phẩm 1.2.3 Liên hệ 1.2.4 Đăng ký, đăng nhập 1.2.5 Xem thông tin s ản phẩm CHƯƠNG GIỚI THIỆU CÔNG NGHỆ SỬ DỤNG .3 2.1 Giới thiệu HTML 2.1.1 HTML gì? 2.1.2 Công dụng HTML 2.1.3 Định dạng HTML .3 2.1.4 Một số ưu điểm bật HTML 2.1.5 Nhược điểm HTML 2.2 Giới thiệu adobe Dreamweaver 2.3 Ngôn ngữ CSS 2.4 Ngôn ngữ Javacript CHƯƠNG THIẾT KẾ GIAO DIỆN 3.1 Thiết kế sơ đồ 3.2 Giao diện trang chủ 3.3 Giao diện menu 3.4 Giao diện trang Giới thiệu 3.5 Giao diện trang Liên hệ 3.6 Giao diện trang s ản phẩm 3.7 Giao diện trang Chi tiết sản phẩm 11 3.8 Giao diện trang quản lý tài khoản 12 ii 0 3.9 Giao diện phần footer 12 CHƯƠNG THIẾT KẾ CHƯƠNG TRNH 14 4.1 Code trang chủ 14 4.1.1 Source code HTML .14 4.1.2 Định dạng CSS 16 19 4.2 Code Trang giới thiệu 26 4.2.1 Source code HTML .26 4.2.2 Định dạng CSS 27 4.3 Code trang Liên hệ 27 4.3.1 Source Code HTML 27 4.3.2 Định dạng CSS 27 4.4 Code trang hiển thị sản phẩm 29 4.4.1 Source Code HTML 29 4.4.2 Định dạng CSS 29 4.5 Code trang Chi tiết sản phẩm 32 4.5.1 Source Code HTML 32 4.5.2 Định dạng CSS 32 4.6 Code trang Quản lý tài khoản 35 4.6.1 Source code HTML .35 4.7 Code trang phân mục sản phẩm theo hãng 36 4.7.1 Source code HTML .36 4.7.2 Định dạng CSS 36 KẾT LUẬN 37 3.Hướng phát triển 37 TÀI LIỆU THAM KHẢO 38 iii 0 DANH MỤC HÌNH Hình 3.1: Sơ đồ website Hình 3.2: Giao diện trang chủ Hình 3.3: Giao diện menu máy tính Hình 3.4: Giao diện menu điện thoại Hình 3.5: Giao diện trang giới thiệu Hình 3.6: Giao diện trang liên hệ Hình 3.7: Giao diện trang sản phẩm Hình 3.8: Giao diện trang sản phẩm 10 Hình 3.9: Giao diện trang hiển thị sản phẩm 11 Hình 3.10: Giao diện trang chi tiết sản phẩm 11 Hình 3.11: Giao diện trang quản lý tài khoản 12 Hình 3.12: Giao diện phần chân Footer máy tính 12 Hình 3.13: Giao diện phần footer điện thoại 13 Hình 4.1: Code HTML trang chủ 14 Hình 4.2: Code HTML trang chủ 14 Hình 4.3: Code HTML Trang chủ 15 Hình 4.4: Coder HTML Trang chủ 15 Hình 4.5: Code HTML Trang chủ 15 Hình 4.6: Code HTML Htrang chủ 16 Hình 4.7: Code CSS Trang chủ 16 Hình 4.8: Code CSS Trang chủ 17 Hình 4.9: Code CSS Trang chủ 18 Hình 4.10: Code CSS Trang chủ 19 Hình 4.11: Code CSS Trang chủ 20 Hình 4.12: Code CSS Trang chủ 20 Hình 4.13: Code CSS Trang chủ 21 Hình 4.14: Code CSS Trang chủ 21 Hình 4.15: Code CSS Trang chủ 22 Hình 4.16: Code CSS Trang chủ 10 22 Hình 4.17: Code CSS Trang chủ 11 23 Hình 4.18: Code CSS Trang chủ 12 23 iv 0 Hình 4.19: Code CSS Trang chủ 13 24 Hình 4.20: Code CSS Trang chủ 14 24 Hình 4.21: Code CSS Trang chủ 15 25 Hình 4.22: Code CSS Trang chủ 16 25 Hình 4.23: Code CSS Trang chủ 17 26 Hình 4.24: Code CSS Trang chủ 18 26 Hình 4.25: Code HTML trang Giới thiệu 27 Hình 4.26: Code CSS trang Giới thiệu 27 Hình 4.27: Code HTML trang Liên hệ 27 Hình 4.28: code CSS trang Liên hệ 28 Hình 4.29: Code CSS trang liên hệ 28 Hình 4.30: Code HTML trang hiển thị sản phẩm 29 Hình 4.31: Code CSS trang hiển thị sản phẩm 29 Hình 4.32: Code CSS trang hiển thị sản phẩm 30 Hình 4.33: Code CSS trang hiển thị sản phẩm 30 Hình 4.34: Code CSS trang hiển thị sản phẩm 31 Hình 4.35: Code CSS trang hiển thị sản phẩm 31 Hình 4.36: Code HTML trang chi tiết sản phẩm 32 Hình 4.37: Code CSS trang chi tiết s ản phẩm 33 Hình 4.38: code CSS trang chi tiết sản phẩm 33 Hình 4.39: Code CSS trang chi tiết s ản phẩm 33 Hình 4.40: Code CSS trang chi tiết sản phẩm 34 Hình 4.41: Code CSS trang chi tiết s ản phẩm 34 Hình 4.42: Code HTML trang quản lý tài khoản 35 Hình 4.43: Code HTML trang quản lý tài khoản 35 Hình 4.44: Code HTML trang quản lý tài khoản 36 Hình 4.45: Code HTML trang phân mục sản phẩm theo hăng 36 Hình 4.46: Code CSS trang phân loại sản phẩm theo hãng 36 Hình 4.47: Code CSS trang phân loại sản phẩm theo hãng 36 v 0 MỞ ĐẦU Ngày nay, chất lượng sống ngày cải thiện người ta quan tâm nhiều đến giá trị tinh thần Vì khoảnh khắc vui tươi, hạnh phúc bên gia đình, người thân, bạn bè mong muốn giữ lại Bên cạnh đó, phát triển Internet trang mạng xẫ hội Facebook, Twitter, Instagram, Zalo, nơi để người trao đổi, chia sẻ suy nghĩ điều học cảm nhận qua sống hàng ngày hình ảnh trở thành cơng cụ đắt lực cho việc Những điều làm cho máy ảnh dần trở thành thiết bị quen thuộc quan trọng sống ngày Các bạn trẻ ngày quan tâm nhiều máy ảnh nghệ thuật nhiếp ảnh, họ xem cách hiệu để thể góc nhìn riêng thân kiện, hoạt động đời thường diễn trước mắt Chụp ảnh khơng cịn đơn giản cằm máy lên bấm nút chụp, họ đòi hỏi nhiều ảnh chụp, phải thật đẹp Vì thế, máy ảnh cơng cụ quan trọng khơng giúp lưu giữ khoảnh khắc trơi qua mà cịn phương tiện giúp thể cá tính riêng, thể nhìn thân giới xung quanh Hiện mạng có nhiều website bán máy ảnh, kể đến số website thịnh hành binhminhdigital.com, Zshop.vn, Mayanh24h.com, Điều lần chứng minh cho tầm quan trọng mức độ quan tâm người dùng máy ảnh Tuy nhiên, đại đa số website sử dụng thuật ngữ lĩnh vực nhiếp ảnh, điều dẫn đến việc khó tiếp cận thơng tin người dùng phổ thông, không “sành” nhiếp ảnh, lần đầu đến với nhiếp ảnh Vì vậy, việc xây dựng website bán máy ảnh với giao diện đẹp, đầy đủ chức thân thiện, dễ sử dụng người dùng điều cần thiết Để giải vấn đề đó, đồng thời hồn thành học phần Thiết kế web, hiểu sâu sử dụng thành thạo ngôn ngữ HTML, CSS, JAVACRIPT Nay em làm tiểu luận báo cáo cuối kỳ đề tài “Thiết kế Website bán máy ảnh cho cửa hàng Kingcame” với đầy đủ chức trang web, có tính ứng dụng, thân thiện dễ tiếp cận người dùng 0 Chương Khảo sát phân tích tốn CHƯƠNG KHẢO SÁT VÀ PHÂN TÍCH BÀI TỐN 1.1 Phát biểu toán Website cung cấp chức website bán hàng, người dùng đăng ký tạo tài khoản thực việc quản lý tài khoản cá nhân đăng nhập, đổi mật khẩu, Sau khách hàng mua hàng tr ực tuyến cách thuận tiện Hoặc xem thông tin máy ảnh giá, thông số kỹ thuật, đánh giá, liên hệ với cửa hàng mà không cần đăng nhập 1.2 Phân tích chức Website cung cấp chức dễ dàng tiếp cận người dùng, bao gồm: 1.2.1 Giới thiệu trang Web bán máy ảnh Kingcame Giới thiệu cho khách hàng biết cửa hàng, tiêu chí cửa hàng, thái độ phục vụ tầm nhìn cửa hàng nhằm tăng uy tín, quảng bá t hương hiệu giúp khách hàng tin tưởng mua hàng 1.2.2 Danh mục sản phẩm Phân loại s ản phẩm theo thiết bị theo hãng sản xuất nhằm giúp người dùng tìm kiếm mua hàng cách thuận tiện dễ dàng 1.2.3 Liên hệ Đây phần giúp người dùng biết thông tin cửa hàng địa chỉ, số điện thoại, email Nhằm phục vụ cho việc liên hệ khách hàng, tư vấn khách hàng tr ực tuyến, Đặc biệt giúp khách hàng tìm đến cửa hàng để trải nghiệm, xem xét, nghe tư vấn định mua sản phẩm chỗ 1.2.4 Đăng ký, đăng nhập Đây chức thiếu trang web bán hàng, khách hàng đăng ký tài khoản, thơng qua tài khoản quản lý giỏ hàng, lịch sử mua hàng thân 1.2.5 Xem thông tin sản phẩm Trang nhằm giúp cho khách hàng tìm hiểu thơng số k ỹ thuật, đặc điểm bật máy ảnh, xem hình ảnh cách chi tiết để xem xét đưa định đặt mua hay không 0 Chương Giới thiệu công nghệ sử dụng CHƯƠNG GIỚI THIỆU CÔNG NGHỆ SỬ DỤNG 2.1 Giới thiệu HTML 2.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 2.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… 2.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 2.1.4 Một số ưu điểm bật HTML Nguồn tài nguyên hỗ trợ lớn Ngày cộng đồng HTML phát triển ngày lớn giới HTML chạy tương đối mượt mà hầu hết trình duyệt phổ biến như: Cốc Cốc, Chrome, FireFox, IE, 0 Chương Giới thiệu công nghệ sử dụng Mã nguồn mà HTML sử dụng mã nguồn mở sử dụng cách miễn phí Q trình học HTML tương đối đơn giản, dễ hiểu nên người học dễ dàng nắm bắt kiến thức nhanh chóng Q trình xây dụng cho website thực qua vài tuần học HTML quy định theo tiêu chuẩn định nên việc markup trở nên đồng nhất, gọn gàng nhiều Quá trình thực dễ dàng tích hợp với nhiều loại ngơn ngữ backend như: PHP, NodeJs, Ruby, Java, để tạo thành website hồn chỉnh với đầy đủ tính 2.1.5 Nhược điểm HTML HTML khơng có khả tạo riêng biệt mẻ cho người dùng thường thực thi thứ logic có cấu trúc định Hiện nay, số trình duyệt cịn chậm việc hỗ trợ cho tính HTML đặc biệt với HTML5 2.2 Giới thiệu adobe Dreamweaver 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 0 Chương 3: Thiết Kế chương trình Hình 4.19: Code CSS Trang chủ 13 Hình 4.20: Code CSS Trang chủ 14 24 0 Chương 3: Thiết Kế chương trình Hình 4.21: Code CSS Trang chủ 15 Hình 4.22: Code CSS Trang chủ 16 25 0 Chương 3: Thiết Kế chương trình Hình 4.23: Code CSS Trang chủ 17 Hình 4.24: Code CSS Trang chủ 18 4.2 Code Trang giới thiệu 4.2.1 Source code HTML 26 0 Chương 3: Thiết Kế chương trình Hình 4.25: Code HTML trang Giới thiệu 4.2.2 Định dạng CSS Hình 4.26: Code CSS trang Giới thiệu 4.3 Code trang Liên hệ 4.3.1 Source Code HTML Hình 4.27: Code HTML trang Liên hệ 4.3.2 Định dạng CSS 27 0 Chương 3: Thiết Kế chương trình Hình 4.28: code CSS trang Liên hệ Hình 4.29: Code CSS trang liên hệ 28 0 Chương 3: Thiết Kế chương trình 4.4 Code trang hiển thị sản phẩm 4.4.1 Source Code HTML Hình 4.30: Code HTML trang hiển thị sản phẩm 4.4.2 Định dạng CSS Hình 4.31: Code CSS trang hiển thị sản phẩm 29 0 Chương 3: Thiết Kế chương trình Hình 4.32: Code CSS trang hiển thị sản phẩm Hình 4.33: Code CSS trang hiển thị sản phẩm 30 0 Chương 3: Thiết Kế chương trình Hình 4.34: Code CSS trang hiển thị sản phẩm Hình 4.35: Code CSS trang hiển thị sản phẩm 31 0 Chương 3: Thiết Kế chương trình 4.5 Code trang Chi tiết sản phẩm 4.5.1 Source Code HTML Hình 4.36: Code HTML trang chi tiết sản phẩm 4.5.2 Định dạng CSS 32 0 Chương 3: Thiết Kế chương trình Hình 4.37: Code CSS trang chi tiết sản phẩm Hình 4.38: code CSS trang chi tiết sản phẩm Hình 4.39: Code CSS trang chi tiết sản phẩm 33 0 Chương 3: Thiết Kế chương trình Hình 4.40: Code CSS trang chi tiết sản phẩm Hình 4.41: Code CSS trang chi tiết sản phẩm 34 0 Chương 3: Thiết Kế chương trình 4.6 Code trang Quản lý tài khoản 4.6.1 Source code HTML Hình 4.42: Code HTML trang quản lý tài khoản Hình 4.43: Code HTML trang quản lý tài khoản 35 0 Chương 3: Thiết Kế chương trình Hình 4.44: Code HTML trang quản lý tài khoản 4.7 Code trang phân mục sản phẩm theo hãng 4.7.1 Source code HTML Hình 4.45: Code HTML trang phân mục sản phẩm theo hăng 4.7.2 Định dạng CSS Hình 4.46: Code CSS trang phân loại sản phẩm theo hãng Hình 4.47: Code CSS trang phân loại sản phẩm theo hãng 36 0 Chương 3: Thiết Kế chương trình KẾT LUẬN Kết đạt -Thiết kế thành cơng website có giao diện thân thiện, dễ sử dụng -Xây dựng trang quản lý tài khoản, giới thiệu, liên hệ, sản phẩm, chi tiết sản phẩm -Nắm cách sử dụng Adobe Dreameweaver CS6 ngôn ngữ lập trình như: HTML, CSS, Javacript Hạn chế -Chưa xây dựng sở liệu bên nên trang đăng ký, đăng nhập, mua hàng, thêm vào giỏ, giỏ hàng chưa thể sử dụng -Dữ liệu cịn đơn giản -Chưa tối ưu hố đoạn code -Chưa tối ưu hố hồn tồn giao diện để thành website reponsive 3.Hướng phát triển -Học tập, tìm hiểu thêm ngơn ngữ lập trình khác để t ạo trang web hoàn chỉnh -Thêm vào website nội dung hấp dẫn -Tối ưu hoá đoạn code -Xây dựng sở liệu hoàn chỉnh -Tối ưu hố giao diện tất dịng điện thoại máy tính 37 0 Chương 3: Thiết Kế chương trình TÀI LIỆU THAM KHẢO Tiếng Việt Nguyễn Hữu Vĩnh, Võ Quốc Lương (2017), Tài liệu hướng dẫn thực hành THIẾT KẾ VÀ LẬP TRÌNH WEB Website Website Hiệp sĩ IT, http://hiepsiit.com/ (truy cập ngày 30/03/2021) Website w3school, https://www.w3schools.com/ (truy cập ngày 30/03/2021) Website Binhminhdigital, https://binhminhdigital.com/ (truy cập ngày 05/04/2021) Website Completes Javacript, https://completejavascript.com/thiet-ke-websiteresponsive-voi-css-menu (truy cập ngày 06/04/2021) 38 0 ...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Ế WEB THIẾT KẾ WEBSITE B? ?N MÁY ẢNH CHO C? ? ?A H? ?NG KINGCAME GV: ThS Nguy? ?n H? ? ?u Vĩnh SVTH: Nguy? ?n Hoàng Hiệp MSSV:... thi? ?u cho khách h? ?ng biết c? ? ?a h? ?ng, ti? ?u chí c? ? ?a h? ?ng, thái độ ph? ?c vụ tầm nh? ?n c? ? ?a h? ?ng nhằm tăng uy t? ?n, quảng bá t h? ?ơng hi? ?u giúp khách h? ?ng tin tưởng mua h? ?ng 1.2.2 Danh m? ?c s? ?n phẩm Ph? ?n. .. máy ảnh d? ?n trở thành thiết bị quen thu? ?c quan trọng sống ngày C? ?c b? ?n trẻ ngày quan tâm nhi? ?u máy ảnh nghệ thuật nhiếp ảnh, h? ?? xem c? ?ch hi? ?u để thể g? ?c nh? ?n riêng th? ?n ki? ?n, hoạt động đời thường