Untitled 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 SHOWROOM GIRI BÁN XE MÁY GVHD THS NGUYỄN HỮU VĨNH SVTH LÊ TRỌNG ĐỨC MSSV 1824801040014 LỚP[.]
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 SHOWROOM GIRI BÁN XE MÁY GVHD: THS NGUYỄN HỮU VĨNH SVTH: LÊ TRỌNG ĐỨC MSSV: 1824801040014 LỚP: D18HT01 B7NH 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: XÂY DỰNG WEBSITE SHOWROOM GIRI BÁN XE MÁY 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 Đồ án môn thiết kế web Lời nói đầu Trong mơi trường kinh tế phát triển mạnh, cạnh tranh gay gắt, với phát triển vượt bậc khoa học kỹ thuật cơng nghệ thơng tin thương mại điện tử lĩnh vực trội, có nhiều đóng góp thiết thực cho kinh tế Cơng nghệ thơng tin thương mại điện tử có mặt hầu hết lĩnh vực sống trở thành công cụ hỗ trợ đắc lực công tác quản lý, kinh doanh Ngày nay, “thương mại điện tử “đem lại nhiều lợi ích khơng cho doanh nghiệp mà người tiêu dùng có lợi ích tích kiệm thời gian chi phí trơng việc mua sắm tiêu dùng Việc bán hàng qua mạng khơng cịn hình thức xa lạ người tiêu dùng nữa, bán hàng qua mạng hình thức làm việc phổ biến, hình thức doanh nghiệp kinh doanh sản phẩm lựa chọn Vì vậy, em chọn đề tài “Xây dựng Website bán Xe máy” Đề 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: LÊ TRỌNG ĐỨC – 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 .v CHƯƠNG TỔNG QUAN VỀ ĐỀ TÀI 1 Tên Đề Tài Mục Tiêu Đề Tài Ý Nghĩa Của Đề Tài Đối Tượng Của Đề Tài Một Số Trang Chính Của Website .1 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 .2 1.3 Định dạng HTML 2 Giới thiệu Adobe Dreamweaver .2 Ngôn ngữ CSS Ngôn ngữ Javascript CHƯƠNG 3: GIAO DIỆN CHƯƠNG TRÌNH Đặc Tả Giao Diện 1.1 Giao diện trang chủ .5 1.2 Giao diện trang giới thiệu 1.3 Giao diện trang liên hệ 1.4 Giao diện trang danh mục sản phẩm 12 1.4.1 Giao diện danh mục thương hiểu 18 1.5 Giao diện trang chi tiết sản phẩm 21 1.5.1 Chi tiết xe Honda CBR500R 22 CHƯƠNG 4: KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN 31 Kết đạt được: 31 Việc chưa làm được: 31 Hướng phát triển đề tài .31 TÀI LIỆU KHAM KHẢO 33 SVTH: LÊ TRỌNG ĐỨC – LỚP D18HT01 ii Đồ án môn thiết kế web DANH MỤC H7NH Hình 1.1 Giao diện trang chủ 17 Hình 1.2 Giao diện trang giới thiệu 19 Hình 1.3 Giao diện trang liên hệ 20 Hình 1.6 Giao diện trang danh mục sản phẩm 22 Hình 1.6.3 Giao diện danh mục chi tiết sản phẩm 24 SVTH: LÊ TRỌNG ĐỨC – LỚP D18HT01 iii Đồ á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: LÊ TRỌNG ĐỨC – LỚP D18HT01 iv 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 SHOWROOM BÁN XE MÁY CHO CÔNG TY GIRI Mục Tiêu Đề Tài + Thiết kế Website showroom bán xe máy cho công ty GiRi Ý 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 Đối Tượng Của Đề Tài + Đối tượng nghiên cứu chủ yếu xe gắn máy phù hợp nhu cầu lại với ngườ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: Đây trang giúp cho khách hàng xem 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 + 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: LÊ TRỌNG ĐỨC – LỚP D18HT01 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: LÊ TRỌNG ĐỨC – LỚP D18HT01 Tiểu luận môn thiết kế web 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 CSS cập nhật liên tục mang lại trình bày phức tạp tinh vi Ngôn ngữ Javascript Với HTML biểu diễn thông tin chưa phải trang Web động có khả đáp ứng kiện từ phía người dùng Hãng Netscape đưa ngôn ngữ script có tên LiveScript để thực chức Sau đổi tên thành JavaScript để tận dụng tính đại chúng ngơn ngữ lập trình Java SVTH: LÊ TRỌNG ĐỨC – LỚP D18HT01 Tiểu luận môn thiết kế web JavaScript ngôn ngữ dạng script gắn với file HTML Được trình duyệt diễn dịch, trình duyệt đọc JavaScript dạng mã nguồn JavaScript ngôn ngữ dựa đối tượng, nghĩa bao gồm nhiều kiểu đối tượng, ví dụ đối tượng Math với tất chức toán học Nhưng JavaScript không ngôn ngữ hướng đối tượng C++/Java Visual Code Visual Studio Code (VS Code hay VSC) trình soạn thảo mã nguồn phổ biến sử dụng lập trình viên Nhanh, nhẹ, hỗ trợ đa tảng, nhiều tính mã nguồn mở ưu điểm vượt trội khiến VS Code ngày ứng dụng rộng rãi Là trình biên tập lập trình code miễn phí dành cho Windows, Linux macOS, Visual Studio Code phát triển Microsoft Nó xem kết hợp hoàn hảo IDE Code Editor Visual Studio Code hỗ trợ chức debug, kèm với Git, có syntax highlighting, tự hồn thành mã thông minh, snippets, cải tiến mã nguồn Nhờ tính tùy chỉnh, Visual Studio Code cho phép người dùng thay đổi theme, phím tắt, tùy chọn khác SVTH: LÊ TRỌNG ĐỨC – LỚP D18HT01 Tiểu luận môn thiết kế web CHƯƠNG 3: GIAO DIỆN CHƯƠNG TR7NH Đặc Tả Giao Diện 1.1 Giao diện trang chủ SƠ ĐỒ TỔNG QUAN: SHOWROOOM BÁN XE MÁY GIRI Trang Chủ Giới Thiệu Liên Hệ Sản Phẩm Chi Tiêết Sản Phẩm Mục đích: Chức cho phép người dùng xem Banner, Danh sách Sản phẩm nhất, Cũ nhất, Sản phẩm bật, Giới thiệu Bản quyền Trong giao diện cho người dùng, hiển thị sản phẩm cho khách lựa chọn Mô tả chức năng: Trang cho phép người dùng xem thơng tin sản phẩm ngồi cịn sử menu dọc, ngang để sang trang khác, Mẫu mẫu cũ: Tương đối giống nhấn vào mục chi tiết sản phẩm Sản phẩm bật: Hiện Tất cả, Thu hút, Bán chạy giới thiệu cho khách hàng SVTH: LÊ TRỌNG ĐỨC – LỚP D18HT01 Tiểu luận mơn thiết kế web Hình 1.1 Giao diện trang chủ Trang web chia làm phần: - Phần 1: Logo trang web - Phần 2: Chạy chữ ngang Marquee chạy ngang dọc - Phần 3: Menu ngang: Bao gồm mục: trang chủ, thông tin, liên hệ, sản phẩm Mỗi danh mục liên kết đến trang với nội dung khác - Phần 4: Banner có nút liên kết đến trang sản phẩm nút chuyển trang - Phần 5: Phần hiển thị sản phẩn cũ liên kết với sản phẩm chi tiết sản phẩm - Phần 6: Ở chứa sản phẩm bật liên kết với trang chi tiết sản phẩm - Phần 7: Footer 1.2 Giao diện trang thơng tin Mục đích: Khi vào trang này, khách hàng biết số nét khái quát shop, lịch sử hình thành phát triển, định hướng dự định hướng phát triển tương lai SVTH: LÊ TRỌNG ĐỨC – LỚP D18HT01 Tiểu luận mơn thiết kế web Hình 1.2 Giao diện trang giới thiệu Trang web chia làm phần: - Phần 1: Logo trang web - Phần 2: Chạy chữ ngang Marquee chạy ngang dọc - Phần 3: Menu ngang: Bao gồm mục: trang chủ, thông tin, liên hệ, sản phẩm Mỗi danh mục liên kết đến trang với nội dung khác - Phần 4: Banner thơng tin có liên kết quay trang chủ - Phần 5: Phần tiếp lời nói đầu trang web giới thiệu thương hiệu hãng - Phần 6: Ở chứa sách của hàng Tin cậy, Chuyên nghiệp, An tồn, Chính sách bảo hành, Sổ bảo hành Cách sử dụng - Phần 7: Hình ảnh thơng tin nhân viên - Phần 8: Ảnh sản phẩm hãng trang Web -Phần 9: Footer 1.3 Giao diện trang liên hệ SVTH: LÊ TRỌNG ĐỨC – LỚP D18HT01 Tiểu luận môn thiết kế web 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 Hình 1.3 Giao diện trang liên hệ Trang web chia làm phần: - Phần 1: Logo trang web - Phần 2: Chạy chữ ngang Marquee chạy ngang dọc - Phần 3: Menu ngang: Bao gồm mục: trang chủ, thông tin, liên hệ, sản phẩm Mỗi danh mục liên kết đến trang với nội dung khác - Phần 4: Banner thơng tin có liên kết quay trang chủ - Phần 5: Phần bên trái lời giới thiệu trang web giới thiệu thương hiệu hãng phía thông tin liên hệ - Phần 6: Phần phần điền thông tin thân khách hàng lời nhắn đánh giá gửi đến hàng - Phần 7: Ảnh sản phẩm hãng trang Web -Phần 8: Footer 1.4 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 Hình 1.4 Giao diện trang danh mục sản phẩm SVTH: LÊ TRỌNG ĐỨC – LỚP D18HT01 Tiểu luận môn thiết kế web 1.4.1 Giao diện danh mục thương hiệu Hình 1.4.1 Giao diện danh mục thương hiệu Mục Đích: Thanh menu chứa danh sách thương hiệu hãng xe Sử dụng danh mục sản phẩm để chọn thương hiệu xe mà cần 1.4.2 Giao diện danh mục sản phẩm Hình 1.4.2 Giao diện danh mục trang sản phẩm SVTH: LÊ TRỌNG ĐỨC – LỚP D18HT01 Tiểu luận môn thiết kế web 1.5 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, 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ủ 1.5.1 Chi tiết sản phẩm Honda CBR500R Hình 1.8.5 Giao diện trang chi tiết trang sản phẩm SVTH: LÊ TRỌNG ĐỨC – LỚP D18HT01 10 Tiểu luận môn thiết kế web CHƯƠNG 4: DANH MỤC H7NH H7NH TRANG CHỦ H7NH THÔNG TIN H7NH TRANG LIÊN HỆ H7NH TRANG SẢN PHẨM SVTH: LÊ TRỌNG ĐỨC – LỚP D18HT01 11 Tiểu luận môn thiết kế web H7NH TRANG CHI TIẾT SẢN PHẨM CHƯƠNG 5: 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 buôn 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ể “Thiết kế website showroom Giri”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 buôn bán Website “showroom xe máy Giri” 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 xe máy Giri, đá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, Visual Studio Code - 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 SVTH: LÊ TRỌNG ĐỨC – LỚP D18HT01 12 Tiểu luận mơn thiết kế web Vì thời gian không cho phép kiến thức thiết kế web cịn 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: 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: LÊ TRỌNG ĐỨC – LỚP D18HT01 13 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 - W3SCHOOL: https://www.w3schools.com/ - KTEAM: https://www.howkteam.vn/ - UDEMY: https://www.udemy.com/ - Website https://coccoc.com/search#query=Webcoban.vn SVTH: LÊ TRỌNG ĐỨC – LỚP D18HT01 14 ... luận môn thiết kế web CHƯƠNG TỔNG QUAN VỀ ĐỀ TÀI Tên Đề Tài + THIẾT KẾ WEBSITE SHOWROOM BÁN XE MÁY CHO CÔNG TY GIRI Mục Tiêu Đề Tài + Thiết kế Website showroom bán xe máy cho công ty GiRi Ý Nghĩa... 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 xe máy Giri, đáp ứng yêu cầu người sử dụng - Tìm hiểu nắm công cụ để Thiết kế website. .. dụng SVTH: LÊ TRỌNG ĐỨC – LỚP D18HT01 13 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 - W3SCHOOL: