Tiểu luận môn học thiết kế web thiết kế website shop đàn guitar hữu trí

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 THIẾT KẾ WEBSITE SHOP ĐÀN GUITAR HỮU TRÍ GVHD: THS NGUYỄN HỮU VĨNH SVTH: NGUYỄN HỮU TRÍ MSSV: 1834801030269 LỚP: D18PM04 B6NH DƯƠNG – 07/2020 0 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: THIẾT KẾ WEBSITE BÁN ĐÀN GUITAR HỮU TRÍ 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 0 Tiểu luậ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ề: “Thiết kế website shop đàn guitar Hữu Trí” Đâ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: NGUYỄN HỮU TRÍ – LỚP D18PM04 0 Tiểu luận mơn thiết kế web MỤC LỤC LỜI NĨI ĐẦU .1 DANH MỤC HÌNH CHƯƠNG TỔNG QUAN VỀ ĐỀ TÀI Tên Đề Tài .6 Mục Tiêu Đề Tài .6 Ý Nghĩa Của Đề Tài Đố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 Giới thiệu Adobe Dreamweaver Ngôn ngữ CSS Ngôn ngữ Javascript CHƯƠNG 3: GIAO DIỆN CHƯƠNG TRÌNH 11 Đặc Tả Giao Diện 11 1.1 Giao diện trang chủ 11 1.2 Giao diện trang Khóa Học 12 1.3 Giao diện trang Hợp Âm .13 1.4 Giao diện trang đăng ký 14 1.4.1 Giao diện trang đăng ký với JavaScript thông báo nhập họ tên .15 1.4.2 Giao diện trang đăng ký với JavaScript thông báo nhập năm sinh 15 1.4.3 Giao diện trang đăng ký với JavaScript thông báo nhập Email .16 1.4.4 Giao diện trang đăng ký với JavaScript thông báo nhập Tên đăng nhập 16 1.4.5 Giao diện trang đăng ký với JavaScript thông báo nhập mật 17 1.4.6 Giao diện trang đăng ký với JavaScript thông báo nhập lại mật .17 1.4.6 Source code JavaScript đăng ký với chức thông báo 18 1.5 Giao diện trang đăng nhập 19 1.5.1 Giao diện trang đăng nhập với JavaScript thông báo nhập tên đăng nhập.20 1.5.1 Giao diện trang đăng nhập với JavaScript thông báo nhập mật 20 1.5.2 Source code JavaScript đăng nhập với chức thông báo .21 1.6 Giao diện trang danh mục loại đàn guitar .21 1.6.1 Giao diện danh mục Guitar Acoustic .22 1.6.2 Giao diện danh mục Guitar Classic 23 1.6.3 Giao diện danh mục đàn Ukulele .24 1.6.4 Giao diện danh mục Guitar điện .25 1.7 Giao diện danh mục thương hiệu 26 1.7.1 Giao diện thương hiệu Taylor 27 1.7.2 Giao diện thương hiệu Martin 28 1.7.3 Giao diện thương hiệu Takemine .29 1.7.4 Giao diện thương hiệu Suzuki 30 1.7.5 Giao diện thương hiệu Yamaha 31 1.7.6 Giao diện thương hiệu Samick 32 SVTH: NGUYỄN HỮU TRÍ – LỚP D18PM04 0 Tiểu luận môn thiết kế web 1.7.7 Giao diện thương hiệu Fender 33 1.7.8 Giao diện thương hiệu Gibson 34 CHƯƠNG 4: KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN 35 TÀI LIỆU KHAM KHẢO 37 SVTH: NGUYỄN HỮU TRÍ – LỚP D18PM04 0 Tiểu luận môn thiết kế web DANH MỤC H6NH Hình Giao diện trang chủ Hình Giao diện trang Khóa Học Hình Giao diện trang Hợp Âm Hình Giao diện trang đăng ký Hình Giao diện trang đăng ký với thơng báo nhập họ tên Hình Giao diện trang đăng ký với thơng báo nhập năm sinh Hình Giao diện trang đăng ký với thông báo nhập Email Hình Giao diện trang đăng ký với thơng báo nhập Tên đăng nhập Hình Giao diện trang đăng ký với thơng báo nhập mật Hình 10 Giao diện trang đăng ký với thông báo nhập lại mật Hình 11 SourceCode JavaScript đăng ký Hình 12 SourceCode JavaScript đăng ký Hình 13 Giao diện trang đăng nhập Hình 14 Giao diện trang đăng nhập thơng báo nhập tên đăng nhập Hình 15 Giao diện trang đăng nhập thơng báo nhập mật Hình 16 SourceCode JavaScript đăng nhập Hình 17 Giao diện trang danh mục loại guitar Hình 18 Giao diện danh mục guitar aucoustic Hình 19 Giao diện danh mục guitar classic Hình 20 Giao diện danh mục đàn guiar ukulele Hình 21 Giao diện danh mục guitar điện Hình 22 Giao diện thương hiệu Hình 23 Giao diện thương hiệu Taylor Hình 24 Giao diện thương hiệu Martin SVTH: NGUYỄN HỮU TRÍ – LỚP D18PM04 0 Tiểu luận môn thiết kế web Hình 25 Giao diện thương hiệu Takemine Hình 26 Giao diện thương hiệu Suzuki Hình 27 Giao diện thương hiệu Yamaha Hình 28 Giao diện thương hiệu Washburn Hình 29 Giao diện thương hiệu Fender Hình 30 Giao diện thương hiệu Gibson SVTH: NGUYỄN HỮU TRÍ – LỚP D18PM04 0 Tiểu luận môn thiết kế web CHƯƠNG TỔNG QUAN VỀ ĐỀ TÀI Tên Đề Tài + THIẾT KẾ WEBSITE SHOP ĐÀN GUITAR HỮU TRÍ Mục Tiêu Đề Tài + Thiết kế Website bán Đàn guitar cơng ty Hữu Trí thành lập Ý Nghĩa Của Đề Tài + Đưa sản phẩm Hữu Trí đến đến gần với người tiêu dùng + Quảng bá thương hiệu Đối Tượng Của Đề Tài + Đối tượng nghiên cứu chủ yếu sản phẩm đàn guitar 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 khóa học: Đây trang mà khách hàng xem khóa học guitar trực tuyến +Trang hợp âm: Đây trang mà khách tra cứu hợp âm guitar + 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 SVTH: NGUYỄN HỮU TRÍ – LỚP D18PM04 0 Tiểu luận mơn thiết kế web ĐÀN GUITAR HỮU TRÍ ĐĂNG KÝ Acous tic Classic ĐĂNG NHẬP Mini Guitar Guitar Điện TRANG CHỦ Ukulele Taylor Yamah a KHÓA HỌC Martin Samick HỢP ÂM Takem ine Suzuki Washb urn Gibson Fender SVTH: NGUYỄN HỮU TRÍ – LỚP D18PM04 0 Tiểu luận mơn thiết kế web 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 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 SVTH: NGUYỄN HỮU TRÍ – LỚP D18PM04 0 Tiểu luận mơn thiết kế web Hình 19 Giao diện danh mục guitar classic SVTH: NGUYỄN HỮU TRÍ – LỚP D18PM04 0 24 Tiểu luận mơn thiết kế web 1.6.3 Giao diện danh mục đàn Ukulele Hình 20 Giao diện danh mục đàn guiar ukulele SVTH: NGUYỄN HỮU TRÍ – LỚP D18PM04 0 25 Tiểu luận môn thiết kế web 1.6.4 Giao diện danh mục Guitar điện Hình 21 Giao diện danh mục guitar điện SVTH: NGUYỄN HỮU TRÍ – LỚP D18PM04 0 26 Tiểu luận môn thiết kế web 1.7 Giao diện danh mục thương hiệu Hình 22 Giao diện thương hiệu SVTH: NGUYỄN HỮU TRÍ – LỚP D18PM04 0 27 Tiểu luận môn thiết kế web 1.7.1 Giao diện thương hiệu Taylor Hình 23 Giao diện thương hiệu Taylor SVTH: NGUYỄN HỮU TRÍ – LỚP D18PM04 0 28 Tiểu luận môn thiết kế web 1.7.2 Giao diện thương hiệu Martin Hình 24 Giao diện thương hiệu Martin SVTH: NGUYỄN HỮU TRÍ – LỚP D18PM04 0 29 Tiểu luận mơn thiết kế web 1.7.3 Giao diện thương hiệu Takemine Hình 25 Giao diện thương hiệu Takemine SVTH: NGUYỄN HỮU TRÍ – LỚP D18PM04 0 30 Tiểu luận môn thiết kế web 1.7.4 Giao diện thương hiệu Suzuki Hình 26 Giao diện thương hiệu Suzuki SVTH: NGUYỄN HỮU TRÍ – LỚP D18PM04 0 31 Tiểu luận môn thiết kế web 1.7.5 Giao diện thương hiệu Yamaha Hình 27 Giao diện thương hiệu Yamaha SVTH: NGUYỄN HỮU TRÍ – LỚP D18PM04 0 32 Tiểu luận môn thiết kế web 1.7.6 Giao diện thương hiệu Samick Hình 28 Giao diện thương hiệu Washburn SVTH: NGUYỄN HỮU TRÍ – LỚP D18PM04 0 33 Tiểu luận môn thiết kế web 1.7.7 Giao diện thương hiệu Fender Hình 29 Giao diện thương hiệu Fender SVTH: NGUYỄN HỮU TRÍ – LỚP D18PM04 0 34 Tiểu luận môn thiết kế web 1.7.8 Giao diện thương hiệu Gibson Hình 30 Giao diện thương hiệu Gibson SVTH: NGUYỄN HỮU TRÍ – LỚP D18PM04 0 35 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 đàn guitar mà cụ thể “Thiết kế website shop bán đàn cho cơng ty Hữu Trí”với chức cần thiết cho trang web buôn 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 đàn Guitar Hữu Trí” thứ dùng để quảng bá cho sân, 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: - Thiết kế thành công website thời trang cho cửa hàng bán đàn Guitar Hữu Trí, đá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 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: NGUYỄN HỮU TRÍ – LỚP D18PM04 0 36 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 q trình sử dụng SVTH: NGUYỄN HỮU TRÍ – LỚP D18PM04 0 37 Tiểu luận môn thiết kế web 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 SVTH: NGUYỄN HỮU TRÍ – LỚP D18PM04 0 38 ... HỮU TRÍ – LỚP D18PM04 0 Tiểu luận môn thiết kế web CHƯƠNG TỔNG QUAN VỀ ĐỀ TÀI Tên Đề Tài + THIẾT KẾ WEBSITE SHOP ĐÀN GUITAR HỮU TRÍ Mục Tiêu Đề Tài + Thiết kế Website bán Đàn guitar công ty Hữu. .. SVTH: NGUYỄN HỮU TRÍ – LỚP D18PM04 0 37 Tiểu luận môn thiết kế web 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. .. NGUYỄN HỮU TRÍ – LỚP D18PM04 0 23 Tiểu luận mơn thiết kế web Hình 19 Giao diện danh mục guitar classic SVTH: NGUYỄN HỮU TRÍ – LỚP D18PM04 0 24 Tiểu luận môn thiết kế web 1.6.3 Giao diện danh mục đàn