(Tiểu luận) tiể ậ u lu n môn học thiết kế web thiết k website ế shop bán hoa flowers

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 BÁN HOA FLOWERS GVHD: NGUYỄN HỮU VĨNH SV: LÊ QUANG CHUNG MSSV: 1824801030261 LỚP: D18PM04 BNH DƯƠNG – 07/2020 0 Tieu luan 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 SHOP BÁN HOA FLOWERS 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 Tieu luan Đồ á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ử 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 xây dựng 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ề: “Xây dựng website shop bán hoa Flowers” Đây hệ thống đơn giản đủ mạnh phép nhanh chóng xây dựng ứ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 SV: LÊ QUANG CHUNG – LỚP: D18PM04 0 Tieu luan i Đồ án môn thiết kế web M Ụ C LỤ C LỜI NÓI ĐẦU i MỤC LỤC ii DANH MỤC HÌNH iv BẢNG THÔNG TIN TRANG v DANH SÁCH CÁC KÝ TỰ, CHỮ VIẾT TẮT vi 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 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 Giới thiệu Adobe Dreamweaver 3 Ngôn ngữ CSS 4 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ủ 1.2 Giao diện trang giới thiệu 1.3 Giao diện trang đăng ký 1.4 Giao diện trang đăng nhập 10 1.5 Giao diện đổi mật 11 1.6 Giao diện trang danh mục hoa 12 1.6.1 Giao diện trang hoa sinh nhật 13 1.6.2 Giao diện trang hoa chúc mừng 14 1.6.3 Giao diện trang hoa khai trương 15 1.6.4 Giao diện trang hoa tình yêu 16 SV: LÊ QUANG CHUNG – LỚP: D18PM04 0 Tieu luan ii Đồ án môn thiết kế web 1.6.5 Giao diện trang hoa tang lễ 17 1.6.6 Giao diện trang lãng hoa 18 1.7 Trang chi tiết hoa 19 1.7.1 Giao diện trang chi tiết hoa sinh nhật 19 1.7.2 Giao diện trang chi tiết hoa chúc mừng 20 1.7.3 Giao diện trang chi tiết hoa khai trương 21 1.7.4 Giao diện trang chi tiết hoa tình yêu 22 1.7.5 Giao diện trang chi tiết hoa tang lễ 23 1.7.6 Giao diện trang chi tiết lãng hoa 24 1.8 Giao diện trang hoa đẹp 25 1.8.1.Giao diện trang chi tiết hoa đẹp 26 1.9 Giao diện trang giỏ hàng 27 1.10 Giao diện trang sách 28 1.11 Giao diện trang hướng dẫn đặt hàng 29 1.12 Giao diện trang phương thức toán 30 1.13 Giao diện trang câu hỏi thường gặp 31 CHƯƠNG 4: KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN 32 Kết đạt được: 32 Việc chưa làm được: 32 Hướng phát triển đề tài 32 TÀI LIỆU KHAM KHẢO 34 SV: LÊ QUANG CHUNG – LỚP: D18PM04 0 Tieu luan iii Đồ án mơn thiết kế web DANH MỤC HÌNH Hình 1.1 Giao diện trang chủ Hình 1.2 Giao diện trang giới thiệu Hình 1.3 Giao diện trang đăng ký Hình 1.4 Giao diện trang đăng nhập 10 Hình 1.5 Giao diện trang đổi mật 11 Hình 1.6 Giao diện trang danh mục hoa 12 Hình 1.6.1 Giao diện trang hoa sinh nhật 13 Hình 1.6.2 Giao diện trang hoa chúc mừng 14 Hình 1.6.3 Giao diện trang hoa khai trương 15 Hình 1.6.4 Giao diện trang hoa tình yêu 16 Hình 1.6.5 Giao diện trang hoa tang lễ 17 Hình 1.6.6 Giao diện trang lãng hoa 18 Hình 1.7.1 Giao diện trang chi tiết hoa sinh nhật 19 Hình 1.7.2 Giao diện trang chi tết hoa chúc mừng 20 Hình 1.7.3 Giao diện trang chi tiêt hoa khai trương 21 Hình 1.7.4 Giao diện trang chi tiết hoa tình yêu 22 Hình 1.7.5 Giao diện trang chi tiết hoa tang lễ 23 Hình 1.7.6 Giao diện trang chi tiết lãng hoa 24 Hình 1.8 Giao diện trang hoa đẹp 25 Hình 1.8.1 Giao diện trang chi tiết hoa đẹp 26 Hình 1.9 Giao diện trang giỏ hàng 27 Hình 1.10 Giao diện trang sách 28 Hình 1.11 Giao diện trang hướng dẫn đặt hàng 29 Hình 1.12 Giao diện trang phương thức toán 30 Hình 1.13 Giao diện trang câu hỏi thường gặp 31 SV: LÊ QUANG CHUNG – LỚP: D18PM04 0 Tieu luan iv Đồ án môn thiết kế web BẢNG THÔNG TIN TRANG STT Tên Trang Trang Chủ Trang Giới Thiệu Chức trang Đây trang shop, giới thiệu sơ lược shop, loại hoa bán nhiều bật cửa hàng Đây trang giúp cho người xem biết thêm thông tin Shop hoa Flowers Trang Đăng Ký Người dùng đăng ký tài khoản để trở thành khách hàng Shop hoa Flowers Trang Đăng Nhập Người dùng đăng nhập tài khoản để đặt mua sản phẩm Shop hoa Flowers Trang Đổi Mật Khẩu Đây trang mà khách hàng có nhu cầu đổi mật Trang Danh Mục Hoa Đây trang khách hàng xem tham khảo loại hoa có sẵn shop Flowers để lựa chọn Trang Chi Tiết Hoa Đây trang khách hàng nhấn vào loại hoa để muốn xem chi tiết Trang Hoa Đẹp Nhất Đây trang giúp cho khách hang xem, tìm hiểu thêm Trang Giỏ Hàng Đây trang khách hàng muốn xem chọn nhiều loại hoa đẹp khác loại hoa 10 11 Trang Các Chính Sách Trang gồm sách shop để khách hàng Trang Hướng Dẫn Đặt Hàng Trang giúp khách hàng hiểu rõ cách đặt hàng tham khảo shop hoa Flowers 12 Trang Phương Thức Trang giúp khách hàng có nhiều cách toán Thanh Toán cho Shop hoa Flowers 13 Trang Câu Hỏi Thường Gặp Trang giúp giải đáp thắc mắc khách hàng có nhu cầu SV: LÊ QUANG CHUNG – LỚP: D18PM04 0 Tieu luan v Đồ á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 LH Loại Hoa HTML Hyper Text Markup Language CSS Cascading Style Sheet SV: LÊ QUANG CHUNG – LỚP: D18PM04 0 Tieu luan vi Tiểu luận môn thiết kế web CHƯƠNG TỔNG QUAN VỀ ĐỀ TÀI Tên Đề Tài + XÂY DỰNG WEBSITE SHOP HOA FLOWERS Mục Tiêu Đề Tài + Xây dựng Website Bán Hoa Flowers Ý Nghĩa Của Đề Tài + Đưa sản phẩm Shop Hoa Flowers đến gần với người +Giới thiệu loài hoa cho người +Sáng tạo giỏ hoa, lãng hoa, bó hoa phù hợp với người + Quảng bá thương hiệu shop hoa Flowers Đối Tượng Của Đề Tài + Đối tượng nghiên cứu chủ yếu loại hoa loài hoa phổ biến đẹp Một Số Trang Chính Của Website + Trang chủ: Đây trang shop, giới thiệu sơ lược shop, loại hoa bán nhiều bật cửa hàng + Trang giới thiệu: Đây trang giúp cho người xem biết thêm thông tin Shop hoa Flowers + Trang đăng ký: Người dùng đăng ký tài khoản để trở thành khách hàng Shop hoa Flowers + Trang đăng nhập: Người dùng đăng nhập tài khoản để đặt mua sản phẩm Shop hoa Flowers +Trang đổi mật khẩu: Đây trang mà khách hàng có nhu cầu đổi mật muốn + Trang danh mục hoa: Đây trang khách hàng xem tham khảo loại hoa có sẵn shop Flowers để lựa chọn + Trang chi tiết hoa: Đây trang khách hàng nhấn vào loại hoa để xem chi tiết + Trang hoa đẹp nhất: Đây trang giúp cho khách hang xem, tìm hiểu thêm nhiều loại hoa đẹp khác +Trang giỏ hàng: Đây trang khách hàng muốn xem chọn loại hoa +Trang sách: Trang gồm sách shop để khách hàng tham khảo SV: LÊ QUANG CHUNG – LỚP: D18PM04 0 Tieu luan Tiểu luận môn thiết kế web +Trang hướng dẫn đặt hàng: Trang giúp khách hàng hiểu rõ cách đặt hàng shop hoa Flowers +Trang phương thức toán: Trang giúp khách hàng có nhiều cách tốn cho Shop hoa Flowers +Trang câu hỏi thường gặp: Trang giúp giải đáp thắc mắc khách hàng có nhu cầu SV: LÊ QUANG CHUNG – LỚP: D18PM04 0 Tieu luan Tiểu luận môn thiết kế web 1.7.2 Giao diện trang chi tiết hoa chúc mừng Hình 1.7.2 Giao diện trang chi tiết hoa chúc mừng SV: LÊ QUANG CHUNG – LỚP: D18PM04 0 Tieu luan 20 Tiểu luận môn thiết kế web 1.7.3 Giao diện trang chi tiết hoa khai trương Hình 1.7.3 Giao diện trang chi tiết hoa khai trương SV: LÊ QUANG CHUNG – LỚP: D18PM04 0 Tieu luan 21 Tiểu luận môn thiết kế web 1.7.4 Giao diện trang chi tiết hoa tình yêu Hình 1.7.4 Giao diện trang chi tiết hoa tình yêu SV: LÊ QUANG CHUNG – LỚP: D18PM04 0 Tieu luan 22 Tiểu luận môn thiết kế web 1.7.5 Giao diện trang chi tiết hoa tang lễ Hình 1.7.5 Giao diện trang chi tiết hoa tang lễ SV: LÊ QUANG CHUNG – LỚP: D18PM04 0 Tieu luan 23 Tiểu luận môn thiết kế web 1.7.6 Giao diện trang chi tiết lãng hoa Hình 1.7.6 Giao diện trang chi tiết lãng hoa SV: LÊ QUANG CHUNG – LỚP: D18PM04 0 Tieu luan 24 Tiểu luận môn thiết kế web 1.8 Giao diện trang hoa đẹp ➢ Mục Đích: Giúp khách hàng xem thêm loài hoa đẹp khác Trong giao diện trang hiển thị lồi hoa đẹp có Việt Nam giới Hình 1.8 Giao diện trang hoa đẹp nh ất SV: LÊ QUANG CHUNG – LỚP: D18PM04 0 Tieu luan 25 Tiểu luận môn thiết kế web 1.8.1.Giao diện trang chi tiết hoa đẹp ➢ Mục đích: Giúp cho khách hàng hiểu thêm thơng tin lồi hoa đẹp phân bố đâu Hình 1.8.1 Giao diện trang chi tiết hoa đẹp SV: LÊ QUANG CHUNG – LỚP: D18PM04 0 Tieu luan 26 Tiểu luận môn thiết kế web 1.9 Giao diện trang giỏ hàng ➢ Mục Đích: Trang giỏ hàng cho phép khách hàng xem thơng tin loại hoa mà chọn, số lượng tổng tiền Hình 1.9 Giao diện trang giỏ hàng SV: LÊ QUANG CHUNG – LỚP: D18PM04 0 Tieu luan 27 Tiểu luận môn thiết kế web 1.10 Giao diện trang sách ➢ Mục Đích: Trang sách giúp cho khách hàng hiểu thêm sách shop tăng thêm độ tin cậy với khách hàng Hình 1.10 Giao diện trang sách SV: LÊ QUANG CHUNG – LỚP: D18PM04 0 Tieu luan 28 Tiểu luận môn thiết kế web 1.11 Giao diện trang hướng dẫn đặt hàng ➢ Mục đích: Trang hướng dẫn đặt hàng giúp khách hàng cách đặt hàng shop Hình 1.11 Giao diện trang hướng dẫn đặt hàng SV: LÊ QUANG CHUNG – LỚP: D18PM04 0 Tieu luan 29 Tiểu luận môn thiết kế web 1.12 Giao diện trang phương thức tốn ➢ Mục đích: Trang phương thức toán giúp khách hàng biết cách tốn với shop Hình 1.12 Giao diện trang phương thức toán SV: LÊ QUANG CHUNG – LỚP: D18PM04 0 Tieu luan 30 Tiểu luận môn thiết kế web 1.13 Giao diện trang câu hỏi thường gặp ➢ Mục đích: Trang câu hỏi thường gặp giúp giải thắc mắc khách hàng Hình 1.13 Giao diện trang câu hỏi thường gặp SV: LÊ QUANG CHUNG – LỚP: D18PM04 0 Tieu luan 31 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 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 loại hoa 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 loại hoa 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 xây dựng trang web bán hoa mà cụ thể “Xây dựng website shop bán hoa Flowers”với chức cần thiết cho trang web bn 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 bán hoa Flowers” thứ dùng để quảng bá cho shop, 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 loại hoa chất lượng đẹp 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: - Xây dựng thành công website thời trang cho shop bán hoa Flowers, đáp ứng yêu cầu người sử dụng - Tìm hiểu nắm công cụ để xây dựng 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 cịn 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 xây dựng website: SV: LÊ QUANG CHUNG – LỚP: D18PM04 0 Tieu luan 32 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 ➢ Xây dựng, bổ sung tính cịn thiếu hay chưa thật hồn chỉnh q trình sử dụng SV: LÊ QUANG CHUNG – LỚP: D18PM04 0 Tieu luan 33 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 - Tham khảo mạng - Tham khảo thư viện trường - Website WWW: http://www.hiepsiit.com SV: LÊ QUANG CHUNG – LỚP: D18PM04 0 Tieu luan 34 ... Tieu luan 12 Ti? ?u lu? ? ?n m? ?n thiết k? ?? web 1.6.1 Giao di? ?n trang hoa sinh nhật Hình 1.6.1 Giao di? ?n trang hoa sinh nhật SV: LÊ QUANG CHUNG – LỚP: D18PM04 0 Tieu luan 13 Ti? ?u lu? ? ?n m? ?n thiết k? ?? web. .. thật h? ?n chỉnh trình sử dụng SV: LÊ QUANG CHUNG – LỚP: D18PM04 0 Tieu luan 33 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 - Tham khảo... Ti? ?u lu? ? ?n m? ?n thiết k? ?? web 1.7.2 Giao di? ?n trang chi tiết hoa chúc mừng Hình 1.7.2 Giao di? ?n trang chi tiết hoa chúc mừng SV: LÊ QUANG CHUNG – LỚP: D18PM04 0 Tieu luan 20 Ti? ?u lu? ? ?n m? ?n thiết k? ?? web