Phân tích và thiết kế hệ thống thông tin đề tài trang web bán đồ chơi xe máy

UBND TỈNH BÌNH DƯƠNG TRƯỜNG ĐẠI HỌC THỦ DẦU MỘT KHOA KTCN BÀI TẬP KẾT THÚC HỌC PHẦN PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG THÔNG TIN TÊN ĐỀ TÀI: TRANG WEB BÁN ĐỒ CHƠI XE MÁY GIÁO VIÊN HƯỚNG DẪN: NGUYỄN HỮU VĨNH HỌ TÊN SINH VIÊN: HỒ DIÊN CƠNG LỚP: D18PM04 MSSV: 1824801030271 BÌNH DƯƠNG, 05/2020 0 L ỜINĨ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 “Độ Xe Đại Công” Đâ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: Nội dung đề tài Chương 4: Kết luận hướng phát triển 0 Mục Lục LỜI NÓI ĐẦU CHƯƠNG TỔNG QUAN VỀ ĐỀ 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 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 3.Ngôn ngữ CSS 4.Ngôn ngữ Javascript 5.Bootstrap 5.1.Khái niệm 5.2.Lý sử dụng bootstrap 5.2.1.Dễ dàng thao tác 5.2.2.Tùy chỉnh dễ dàng 5.2.3.Chất lượng sản phẩm đầu hoản hảo 10 5.2.4.Độ tương thích cao 10 0 CHƯƠNG NỘI DUNG ĐỀ TÀI 11 1.Sơ đồ tổng quan đề tài 11 2.Giao diện người dùng 12 2.1.Đặc tả giao diện 12 Hình 2.1 Giao diện trang chủ .13 2.2.giao diện giới thiệu 13 Hình 2.2Giao diện trang giới thiệu 15 2.3.Giao diện trang đăng kí 15 2.3.Hình Giao diện trang đăng kí 15 2.4.Giao diện trang liên hệ 15 2.5.Giao diện trang liên hệ 16 2.5.Giao diện trang đăng nhập 16 2.5.Hình trang đăng nhập 17 2.6.Giao diện danh mục sản phẩm trang bán bao tay xe 17 a.Trang menu drop sản phẩm .17 b.Giao diện trang Bao tay xe 18 c.Chi tiết sản phẩm bật trang 19 c.1.Bao tay siêu hạng 19 c.2.Bao tay tay siêu cấp 20 2.7.Giao diện menu drop sản phẩm trang Đĩa xe cao cấp .21 a.Menu drop 21 b.Trang đĩa xe cao cấp 22 C.Chi tiết sản phẩm .23 C.1.Đĩa xe AKARUVIC .23 C.2.Đĩa SIPPER 24 0 2.8.Giao diện menu drop sản phẩm nhớt xe .25 a.Trang menu drop sản phẩm .25 b.Giao diện chi tiết trang nhớt xe 26 C.Chi tiết sản phẩm bật trang .27 C.1.Nhớt xe ADVANCE 27 C.2.Nhớt xe HONDA 28 2.9.Giao diện Trang Giỏ hàng 29 2.9.Hình giao diện trang Giỏ hàng 30 CHƯƠNG IV: 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 0 CHƯƠNG TỔNG QUAN VỀ ĐỀ TÀI Mục Tiêu Đề Tài +Thiết kế website Độ Xe Đại Công Ý 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 +Dễ dàng cho khách lựa chọn sản phẩm +Mang tính chuyên nghiệp Đối Tượng Của Đề Tài + Đối tượng nghiên cứu chủ yếu sản phẩm phụ kiện chơi xe + hàng 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 + 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 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 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 0 CHƯƠNG GIỚI THIỆU CƠNG NGHỆ Giới Thiệu Về HTML 1.1HTML 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.2Cô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 2.Giới thiệu Adobe Dreamweaver 0 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 3.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 0 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 4.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 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 5.Bootstrap 5.1 Khái niệm Bootstrap framework bao gồm HTML, CSS JavaScript template dùng để phát triển website chuẩn responsive Bootstrap cho phép trình thiết kế website diễn nhanh chóng dễ dàng dựa thành tố sẵn có typography, forms, buttons, tables, grids, navigation, image carousels… 5.2 Lý sử dụng bootstrap 5.2.1 Dễ dàng thao tác Cơ chế hoạt động Bootstrap dựa xu hướng mã nguồn mở HTML, CSS Javascript Người dùng cần trang bị kiến thức mã sử dụng Bootstrap hiệu Bên cạnh đó, mã nguồn dễ dàng thay đổi chỉnh sửa tùy ý 0 5.2.2 Tùy chỉnh dễ dàng Bootstrap tạo từ mã nguồn mở cho phép designer linh hoạt Giờ lựa chọn thuộc tính, phần tử phù hợp với dự án họ theo đuổi CDN Boostrap cịn giúp bạn tiết kiệm dung lượng khơng cần tải mã nguồn máy 5.2.3 Chất lượng sản phẩm đầu hoản hảo Bootstrap sáng tạo lập trình viên giỏi khắp giới Bootstrap nghiên cứu thử nghiệm thiết bị Được kiểm tra nhiều lần trước đưa vào sử dụng Do đó, chọn Bootstrap, bạn tin tạo nên sản phẩm với chất lượng tốt 5.2.4 Độ tương thích cao Điểm cộng lớn Bootstrap khả tương thích với trình duyệt tảng Đây điều quan trọng cần thiết trải nghiệm người dùng Sử dụng Grid System với hai tiền xử lý Less Sass, Bootstrap mặc định hỗ trợ Responsive ưu tiên cho giao diện thiết bị di động Bootstrap có khả tự động điều chỉnh kích thước trang website theo khung browser Mục đích để phù hợp với hình máy tính để bàn, tablet hay laptop 10 0 2.7.1.Hình giao diện trang bao tay xe c.Chi tiết sản phẩm bật trang c.1.Bao tay Racing Hiện thị chi tiết thông số kèm theo giá bán sản phẩm để người xem biết rõ chi tiết sản phẩm 19 0 Hình chi tiết sản phẩm bao tay Racing c.2.Bao tay tay siêu hạng Hiện thị chi tiết thông số kèm theo giá bán sản phẩm để người xem biết rõ chi tiết sản phẩm 20 0 ... Chính báo cáo chọn đề tài về: ? ?Thiết kế website “Độ Xe Đại Công” Đâ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... 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 Trang đăng ký: Người dùng đăng ký tài khoản để trở thành khách hàng + trang Trang đăng... liên kết tới tài liệu khác 1.2Cô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