(Tiểu luận) thiết kế website đề tài trang web bán caffee online

UBND TỈNH BÌNH DƯƠNG TRƯỜNG ĐẠI HỌC THỦ DẦU MỘT KHOA KT-CN BÀI TẬP KẾT THÚC HỌC PHẦN THIẾT KẾ WEBSITE TÊN ĐỀ TÀI: TRANG WEB BÁN CAFFEE ONLINE H ỌTÊN SINH VIÊN: HỒỒ DIÊN THÀNH LỚP: D18PM01 MSSV: 1824801030022 GIÁO VIÊN H ƯỚ NG DẪẪN: Nguyễễn Hữu Vĩnh BÌNH DƯƠNG, 07/2020 0 h 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 Thành Lùn Coffee®” Đâ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 h 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 .6 Đố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ì? .7 1.2 Công dụng HTML .7 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 .9 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 h 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 .14 2.3.Giao diện trang đăng kí .14 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 menu drop caffee truyền thống 17 a.Menu drop Caffee truyền thống 17 b.Giao diện trang Caffee Truyền Thống .19 c.Chi tiết loại caffee bật trang 19 c.1.Cafffee Sữa 19 c.2.Caffee Cam 20 2.7.Giao diện menu drop Caffee Đặc biệt .21 a.Menu drop caffee đặc biệt 21 b.Giao diện trang Caffee Đặc Biệt .22 C.Chi tiết loại caffee bật cảu trang 23 C.1.Caffee cherry .23 C.2.Caffee Latte 24 0 h 2.8.Giao diện menu drop caffee nước 25 a.Menu drop caffee nước 25 b.Giao diện chi tiết caffee nước 26 C.Chi tiết loại caffee bật trang 27 C.1.Caffee Mocha 27 C.2.Caffee Capucchino 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 h CHƯƠNG TỔNG QUAN VỀ ĐỀ TÀI Mục Tiêu Đề Tài +Thiết kế website Thành Lùn COFFEE Ý Nghĩa Của Đề Tài + Đưa khoảng cách người đến với hương vị caffee gần + Quảng bá thương hiệu +Dễ dàng cho khách lựa chọn loại hương vị caffee mà u thích +Mang tính chun nghiệp +Nâng tầm hương vị caffee Việt Nam nước Đối Tượng Của Đề Tài + Chủ yếu trọng đến loại caffee ngon, bổ, rẻ thích hợp hương vị người dù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 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ệ đánh giá với cửa hàng + 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 caffee trang + Trang Thành Lùn Caffee: Đâ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 0 h + Trang chi tiết sản phẩm: Đây trang khách hàng nhấn vào loại caffee để xem chi tiết, giá, mã sản phẩm, hình dáng 0 h 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 h 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 h 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 ý 10 0 h b.Giao diện trang Caffee Truyền Thống 2.7.1.Hình giao diện trang caffee truyền thống c.Chi tiết loại caffee bật trang c.1.Cafffee Sữa 20 0 h Hình chi tiết Caffee Sữa c.2.Caffee Cam 21 0 h Hình chi tiết Caffee Cam 2.7.Giao diện menu drop Caffee Đặc biệt a.Menu drop caffee đặc biệt  Mục Đích: Thanh menu chứa danh sách loại caffee cửa hàng Khách hàng sử dụng menu để lựa chọn caffee mà cần tìm  Sử dụng danh mục caffee đặc biệt để chọn loại caffee mà thích 22 0 h 2.8.Hình gaio diện menu caffee đặc biệt b.Giao diện trang Caffee Đặc Biệt 23 0 h Hình giao diện trang caffee đặc biệt C.Chi tiết loại caffee bật trang C.1.Caffee cherry 24 0 h Hình chi tiết caffee cherry C.2.Caffee Latte 25 0 h Hình chi tiết sản phẩm caffee cherry 2.8.Giao diện menu drop caffee nước a.Menu drop caffee nước  Mục Đích: Thanh menu chứa danh sách loại caffee nước ngồi cửa hàng Khách hàng sử dụng menu để lựa chọn caffee mà cần tìm  Sử dụng danh mục sản phẩm để chọn loại caffe mà thích 26 0 h Hình giao diện menu caffee nước ngồi b.Giao diện chi tiết trang caffee nước ngồi 27 0 h Hình giao diện trang caffee nước C.Chi tiết caffee bật trang C.1.Caffee Mocha 28 0 h Hình chi tiết caffee Mocha C.2.Caffee Capucchino 29 0 h Hình chi tiết caffee Capucchino 2.9.Giao diện Trang Giỏ hàng Khi có lượng khách hàng truy cập ghé thăm website Bạn, hệ thống website tự động tạo cho họ giỏ hàng riêng cho khách hàng giỏ hàng lúc trống Nếu khách hàng tiếp tục xem sản phẩm website bạn, chọn hàng, đưa hàng vào giỏ hàng … Khi khách vào trang xem chi tiết giỏ hàng, họ thấy loại caffee mà chọn lúc gồm số lượng đơn giá loại caffee Họ chỉnh sửa lại số lượng, chọn thêm hàng vào giỏ hàng, gởi đơn hàng vào website bạn, toán online giao hàng tận nhà 30 0 h 2.9.Hình giao diện trang Giỏ hàng 31 0 h CHƯƠNG IV: 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 hương vị người Vì thế, sau tiến hành khảo sát em định Thiết kế trang web đồng hồ Đăng Quang cụ thể “Thiết kế website Thế giới di động”với chức cần thiết cho trang web bn bán cần có em thấy nhu cầu mua đồ uống thị trường tiềm khai thác buôn bán mặt sàng cafe Website “Shop đồng hồ Đăng Quang” 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 u thích thời trang tìm mua cho sản phẩm chất lượng, thứ tư ln cập nhật sản phẩm toàn quốc 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 đồng hồ cho cửa hàng bán đồng hồ Đăng Quang, đáp ứng yêu cầu người sử dụng, giá hợp lý, phong cách mẻ - 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, phù hợp với thiết bị công nghệ đại 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 - Trang web hạn chế số đồ dùng công nghệ 32 0 h 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:  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  Nhằm dảm bảo tính bảo mật khả linh động trang web, đồng thời hướng tới bên nước để phát triển nước biết đến Việt Nam có loại caffee đặc sản 33 0 h 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://getbootstrap.com/docs/4.0/getting-started 34 0 h