Tiểu luận môn học thiết kế web xây dựng website shop mĩ phẩm ipum cosmetics

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 SHOP MĨ PHẨM IPUM COSMETICS GVHD: THS NGUYỄN HỮU VĨNH SVTH: VĂN THỊ THANH THẢO MSSV: 1824801040060 LỚP: D18HT01 B9NH DƯƠNG – 07/2020 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 MĨ PHẨM IPUM COSMETICS 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 Đồ á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 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 mĩ phẩm iPum Cosmetics” Đâ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 SVTH: VĂN THỊ THANH THẢO – LỚP D18HT01 i Đồ án mơn thiết kế web MỤC LỤC LỜI NĨI ĐẦU i DANH MỤC H9NH x CHƯƠNG TỔNG QUAN VỀ ĐỀ TÀI 1 Tên Đề Tài .1 Mục Tiêu Đề Tài .1 Đố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 .2 1.1 HTML gì? 1.2 Công dụng HTML 1.3 Định dạng HTML 2 Giới thiệu Adobe Dreamweaver Ngôn ngữ CSS Ngôn ngữ Javascript CHƯƠNG 3: GIAO DIỆN CHƯƠNG TR9NH Đặc Tả Giao Diện 1.1 .Giao diện trang chủ 1.2 Giao diện trang sản phẩm 1.3 Giao diện trang giới thiệu 1.4 Giao diện trang liên hệ SVTH: VĂN THỊ THANH THẢO – LỚP D18HT01 ii Đồ án môn thiết kế web 1.5 Giao diện trang đăng ký 1.6 .Giao diện trang đăng nhập 10 1.7 .Giao diện trang danh mục sản phẩm theo hãng 10 1.7.1 .Giao diện danh mục sản phẩm hãng Hada Labo 11 1.7.2 Giao diện danh mục sản phẩm hãng Innisfree 12 1.7.4 Giao diện danh mục sản phẩm hãng Klair’s 14 1.7.5 .Giao diện danh mục sản phẩm hãng Somebymi 15 1.7.6 Giao diện danh mục sản phẩm hãng khác 16 1.8 Giao diện danh mục sản phẩm theo loại 16 1.8.1 Giao diện danh mục sản phẩm Son 17 1.8.2 .Giao diện danh mục sản phẩm Nước tẩy trang 18 1.8.3 Giao diện danh mục sản phẩm Kem chống nắng 19 1.8.4 Giao diện danh mục sản phẩm Toner 20 1.8.5 Giao diện danh mục sản phẩm Mặt nạ 21 1.8.6 Giao diện danh mục sản phẩm Sữa rửa mặt 22 SVTH: VĂN THỊ THANH THẢO – LỚP D18HT01 iii Đồ án môn thiết kế web 1.9 .Giao diện danh mục sản phẩm mua nhiều 23 1.10 Giao diện chi tiết sản phẩm 24 1.10.1 Chi tiết sản phẩm Toner Simple 24 1.10.2 Chi tiết sản phẩm Sữa rửa mặt O Hui 25 1.10.3 .Chi tiết sản phẩm Son Black Rouge 26 1.10.4 .Chi tiết sản phẩm Bông tẩy trang Silcot 27 CHƯƠNG 4: KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN 28 Kết đạt được: 28 Việc chưa làm được: 28 Hướng phát triển đề tài 28 TÀI LIỆU KHAM KHẢO 30 SVTH: VĂN THỊ THANH THẢO – LỚP D18HT01 iv Đồ án môn thiết kế web DANH MỤC H9NH Hình 1.1 Giao diện trang chủ .5 Hình 1.2 Giao diện trang sản phẩm .6 Hình 1.3 Giao diện trang giới thiệu .7 Hình 1.4 Giao diện trang liên hệ Hình 1.5 Giao diện trang đăng ký Hình 1.6 Giao diện trang đăng nhập 10 Hình 1.7 Giao diện trang danh mục sản phẩm theo hãng 10 Hình 1.7.1 Giao diện danh mục sản phẩm hãng Hada Labo 11 Hình 1.7.2 Giao diện danh mục sản phẩm hãng Innisfree 12 Hình 1.7.3 Giao diện danh mục sản phẩm hãng Vichy 13 Hình 1.7.4 Giao diện danh mục sản phẩm hãng Klair’s 14 Hình 1.7.5 Giao diện danh mục sản phẩm hãng Somebymi 15 Hình 1.7.6 Giao diện danh mục sản phẩm hãng khác 16 Hình 1.8.1 Giao diện danh mục sản phẩm Son 17 Hình 1.8.2 Giao diện danh mục sản phẩm Nước tẩy trang 18 Hình 1.8.3 Giao diện danh mục sản phẩm Kem chống nắng .19 Hình 1.8.4 Giao diện danh mục sản phẩm Toner .20 Hình 1.8.5 Giao diện danh mục sản phẩm Mặt nạ .21 Hình 1.8.6 Giao diện danh mục sản phẩm Sữa rửa mặt .22 Hình 1.9 Giao diện danh mục sản phẩm mua nhiều 23 Hình 1.10.1 Giao diện trang chi tiết sản phẩm Toner Simple 24 Hình 1.10.2 Giao diện trang chi tiết sản phẩm Sữa rửa mặt O Hui 25 Hình 1.10.3 Giao diện trang chi tiết sản phẩm Son Black Rouge 26 SVTH: VĂN THỊ THANH THẢO – LỚP D18HT01 v Đồ án môn thiết kế web Hình 1.10.4 Giao diện trang chi tiết sản phẩm Bơng tẩy trang Silcot 27 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: VĂN THỊ THANH THẢO – LỚP D18HT01 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 MĨ PHẨM IPUM COSMETICS Mục Tiêu Đề Tài + Xây dựng Website bán hàng cho Shop Mĩ Phẩm iPum Cosmetics Ý Nghĩa C ủ a Đềề Tài + Đưa tất sản phẩm thương hiệu shop đến tay người tiêu dùng + Quảng bá thương hiệu + Tạo dựng thương hiệu bán mĩ phẩm thông qua việc mua bán Website Đối Tượng Của Đề Tài + Đối tượng nghiên cứu đề tài hướng tới đối tượng nữ giới Việc mua sắm mĩ phẩm nữ giớ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 ưu đãi 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 đă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 + 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: VĂN THỊ THANH THẢO – 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.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 Xây dựng 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 để xây dừng, 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 xây dựng web bạn SVTH: VĂN THỊ THANH THẢO – LỚP D18HT01 Tiểu luận môn thiết kế web 2.7.6 Giao diện danh mục sản phẩm hãng khác Hình 1.7.6 Giao diện danh mục sản phẩm hãng khác 2.8 Giao diện danh mục sản phẩm theo loại SVTH: VĂN THỊ THANH THẢO – LỚP D18HT01 17 Tiểu luận mơn thiết kế web Hình 1.8 Giao diện trang danh mục sản phẩm theo loại 2.8.1 Giao diện danh mục sản phẩm Son Hình 1.8.1 Giao diện danh mục sản phẩm Son SVTH: VĂN THỊ THANH THẢO – LỚP D18HT01 18 Tiểu luận môn thiết kế web 2.8.2 Giao diện danh mục sản phẩm Nước tẩy trang Hình 1.8.2 Giao diện danh mục sản phẩm Nước tẩy trang SVTH: VĂN THỊ THANH THẢO – LỚP D18HT01 19 Tiểu luận môn thiết kế web 2.8.3 Giao diện danh mục sản phẩm Kem chống nắng Hình 1.8.3 Giao diện danh mục sản phẩm Kem chống nắng SVTH: VĂN THỊ THANH THẢO – LỚP D18HT01 20 Tiểu luận môn thiết kế web 2.8.4 Giao diện danh mục sản phẩm Toner Hình 1.8.4 Giao diện danh mục sản phẩm Toner SVTH: VĂN THỊ THANH THẢO – LỚP D18HT01 21 Tiểu luận môn thiết kế web 2.8.5 Giao diện danh mục sản phẩm Mặt nạ Hình 1.8.5 Giao diện danh mục sản phẩm Mặt nạ SVTH: VĂN THỊ THANH THẢO – LỚP D18HT01 22 Tiểu luận môn thiết kế web 2.8.6 Giao diện danh mục sản phẩm Sữa rửa mặt Hình 1.8.6 Giao diện danh mục sản phẩm Sữa rửa mặt SVTH: VĂN THỊ THANH THẢO – LỚP D18HT01 23 Tiểu luận môn thiết kế web 2.9 Giao diện danh mục sản phẩm mua nhiều Hình 1.9 Giao diện danh mục sản phẩm mua nhiều SVTH: VĂN THỊ THANH THẢO – LỚP D18HT01 24 Tiểu luận môn thiết kế web 2.10 Giao diện 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ủ 2.10.1 Chi tiết sản phẩm Toner Simple Hình 1.10.1 Giao diện trang chi tiết sản phẩm Toner Simple SVTH: VĂN THỊ THANH THẢO – LỚP D18HT01 25 Tiểu luận môn thiết kế web 2.10.2 Chi tiết sản phẩm Sữa rửa mặt O Hui Hình 1.10.2 Giao diện trang chi tiết sản phẩm Sữa rửa mặt O Hui SVTH: VĂN THỊ THANH THẢO – LỚP D18HT01 26 Tiểu luận môn thiết kế web 2.10.3 Chi tiết sản phẩm Son Black Rouge Hình 1.10.3 Giao diện trang chi tiết sản phẩm Son Black Rouge SVTH: VĂN THỊ THANH THẢO – LỚP D18HT01 27 Tiểu luận môn thiết kế web 2.10.4 Chi tiết sản phẩm Bông tẩy trang Silcot Hình 1.10.4 Giao diện trang chi tiết sản phẩm Bơng tẩy trang Silcot SVTH: VĂN THỊ THANH THẢO – LỚP D18HT01 28 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 Xây dựng trang web bán mĩ phẩm mà cụ thể “Xây dựng website shop mĩ phẩm iPum Cosmetics” 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 buôn bán Website “shop mĩ phẩm iPum Cosmetics” 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 yêu thích mĩ phẩm 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: - Xây dựng thành công website độc đáo cho cửa hàng bán mĩ phẩm iPum Cosmetics, đá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 xây dựng đơ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 xây dựng 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 xây dựng 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 SVTH: VĂN THỊ THANH THẢO – LỚP D18HT01 29 Tiểu luận môn thiết kế web 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:  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 SVTH: VĂN THỊ THANH THẢO – LỚP D18HT01 30 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: VĂN THỊ THANH THẢO – LỚP D18HT01 31 ... Sản phẩm SVTH: VĂN THỊ THANH THẢO – LỚP D18HT01 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 MĨ PHẨM IPUM COSMETICS Mục Tiêu Đề Tài + Xây dựng Website. .. 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 Xây dựng trang web bán mĩ phẩm mà cụ thể ? ?Xây dựng website shop mĩ phẩm iPum Cosmetics? ?? với chức cần thiết. .. 30 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