ĐỒ án môn học THIẾT kế WEB xây DỰNG WEBSITE bán HÀNG ONLINE

BỘ GIÁO DỤC VÀ ĐÀO TẠO TRƯỜNG ĐẠI HỌC NGUYỄN TẤT THÀNH KHOA CÔNG NGHỆ THÔNG TIN ĐỒ ÁN MÔN HỌC THIẾT KẾ WEB Giảng viên hướng dẫn: NGUYỄN MAI HUY Sinh viên thực hiện: CHU DỖN ĐỨC MSSV: 2000003917 Chun ngành: Trí tuệ nhân tạo Mơn học: Thiết kế website Khóa: 2021 Tp.HCM,10 tháng năm 2021 TIEU LUAN MOI download : skknchat123@gmail.com moi nhat MỤC LỤC LỜI CẢM ƠN LỜI MỞ ĐẦU CHƯƠNG 1: NHỮNG KIẾN THỨC ĐÃ HỌC Internet – Dịch vụ Web: 1.1 - Internet: 1.2 - Dịch vụ Web: 1.3 - Lợi ích mang lại từ dịch vụ Web: Ngôn ngữ HTML, CSS, JavaScript: 2.1 - HTML (HyperText Markup Language): 2.2 - CSS (Cascading Style Sheet) 2.3 - JavaScript: CHƯƠNG 2: CẤU TRÚC & XÂY DỰNG WEBSITE BÁN QUẦN ÁO SWE Cấu trúc lưu trữ: 8 1.1 – Images: 1.2 – Các trang HTML: 1.3 – Các trang CSS: 10 Cấu trúc trang: 10 Cấu trúc thành phần dạng trang thuộc site: 10 3.1 - Trang chủ-index: 11 a Menu: 11 b Sản phẩm bật: 13 3.2 – Các trang sản phẩm: 14 3.3 – Các trang thông tin liên hệ: 16 a Chi tiết sản phẩm (detail.html) 17 b Đăng nhập (login.html) 19 CHƯƠNG 3:KỊCH BẢN SỬ DỤNG ĐỐI VỚI WEBSITE 21 TÀI LIỆU THAM KHẢO 30 TIEU LUAN MOI download : skknchat123@gmail.com moi nhat DANH MỤC CÁC HÌNH CHƯƠNG 1: Hình 1: Ngôn ngữ đánh dấu siêu văn HTML Hình 2: Ngơn ngữ định dạng CSS Hình 3: Ngơn ngữ lập trình “kịch bản” JavaScript CHƯƠNG 2: Hình 1: Cấu trúc liệu website Hình 2: Cấu trúc liệu hình ảnh Hình 3: Cấu trúc liệu hình ảnh danh sách sản phẩm Hình 4: Cấu trúc liệu trang HTML Hình 5: Cấu trúc liệu trang CSS 10 Hình 6: Cấu trúc bao quát website 10 Hình 7: Cấu trúc Code HTML Menu trang web 11 Hình 8: Cấu trúc Code CSS Menu trang web 12 Hình 9: Ảnh minh họa thành code menu 12 Hình 10: Cấu trúc Code HTML sản phẩm trang index 13 Hình 11: Ảnh minh họa thành trang index 14 Hình 12: Cấu trúc Code HTML sản phẩm 15 Hình 13: Cấu trúc Code CSS sản phẩm 15 Hình 14: Ảnh minh họa trang sản phẩm 16 Hình 15: Cấu trúc Code HTML chi tiết sản phẩm 17 Hình 16: Cấu trúc Code JavaScript chi tiết sản phẩm 18 Hình 17: Cấu trúc Code CSS chi tiết sản phẩm 18 Hình 18: Ảnh minh họa trang chi tiết sản phẩm 19 Hình 19: Cấu trúc Code HTML đăng nhập 19 Hình 20: Cấu trúc Code JavaScript đăng nhập 20 Hình 21: Cấu trúc Code CSS đăng nhập CHƯƠNG 3: 20 Hình 1: Ảnh minh họa trang chủ truy cập máy tính 21 TIEU LUAN MOI download : skknchat123@gmail.com moi nhat Hình 2: Ảnh minh họa trang chủ truy cập điện thoại 22 Hình 3: Ảnh minh họa trang sản phẩm 23 Hình 4: Ảnh minh họa trang sản phẩm Áo máy tính 23 Hình 5: Ảnh minh họa trang sản phẩm Áo điện thoại 24 Hình 6: Ảnh minh họa nơi truy cập thơng tin cửa hàng 24 Hình 7: Ảnh minh họa trang About Us 25 Hình 8: Ảnh minh họa ViewAll 25 Hình 9: Ảnh minh họa giao diện trang sản phẩm tổng hợp của hàng 26 Hình 10: Ảnh minh họa đăng nhập 26 Hình 11: Ảnh minh họa trang đăng nhập 27 Hình 12: Ảnh minh họa trang thơng tin 27 Hình 13: Ảnh minh họa trang chi tiết sản phẩm 28 Hình 14: Ảnh minh họa thơng tin liên hệ 28 Hình 15: Trang biểu đồ kích thước 29 Hình 16: Trang sách đổi trả 29 TIEU LUAN MOI download : skknchat123@gmail.com moi nhat LỜI CẢM ƠN Đầu tiên, em xin gửi lời cảm ơn chân thành đến Trường Đại học Nguyễn Tất Thành đưa mơn học Thiết kế Web vào trương trình giảng dạy Đặc biệt, em xin gửi lời cảm ơn sâu sắc đến giảng viên môn – Thầy Nguyễn Mai Huy dạy dỗ, truyền đạt kiến thức quý báu cho em suốt thời gian học tập vừa qua Trong thời gian tham gia lớp học thầy, em có thêm cho nhiều kiến thức bổ ích, tinh thần học tập hiệu quả, nghiêm túc cho em chắn hoạch định tương lai Bộ mơn Thiết kế Web mơn học thú vị, vơ bổ ích có tính thực tế cao Đảm bảo cung cấp đủ kiến thức, gắn liền với nhu cầu thực tiễn sinh viên nói chung riêng thân em nói riêng Tuy nhiên, vốn kiến thức nhiều hạn chế khả tiếp thu thực tế nhiều bỡ ngỡ hạn hẹp Mặc dù em cố gắng chắn báo em khó tránh khỏi thiếu sót nhiều chỗ cịn chưa xác, kính mong thầy/cơ chấm xem xét góp ý để tiểu luận em hồn thiệt Kính chúc thầy có nhiều sức khỏe, hạnh phúc, thành công đường giảng dạy Em xin chân thành cảm ơn! TIEU LUAN MOI download : skknchat123@gmail.com moi nhat LỜI MỞ ĐẦU Ngày nay, ứng dụng công nghệ thông tin việc tin học hóa xem yếu tố mang tính định hoạt động phủ, tổ chức, cơng ty, cửa hàng Nó đóng vai trị quan trọng, tạo bước đột phá mạnh mẽ Việc xây dựng trang web để phục vụ cho nhu cầu riêng tổ chức, cơng ty, hàng, chí cá nhân ngày khơng lấy làm lạ Với vài thao tác đơn giản, người trở thành chủ website giới thiệu thứ có như: website trình bày sưu tập hình ảnh loại máy tính, xe hơi,… mà thích Thơng qua trang web, thông tin họ công văn, thông báo, hay sản phẩm, dịch vụ công ty hay cửa hàng nhanh chóng, kịp thời đến với khách hàng họ, tránh khỏi phiền hà mà phương thức giao tiếp truyền thống thường gặp phải Hoạt động công ty, cửa hàng có quy mơ lớn, tăng cường mở rộng xây dựng website tốt Bắt nguồn với ý tưởng này, em vận dụng ngôn ngữ HTML, CSS, Javascript, Bootstrap, với gợi ý thầy Nguyễn Mai Huy, em thực đề tài thiết kế “Website bán hàng thời trang Local Brand SWE” Hồn thành xong đề tài, em vơ biết ơn thầy hướng dẫn nhiệt tình cho chúng em suốt trình thực đề tài TIEU LUAN MOI download : skknchat123@gmail.com moi nhat NHẬN XÉT CỦA GIẢNG VIÊN HƯỚNG DẪN Điểm đồ án: TPHCM, Ngày …… tháng …… năm Giáo viên hướng dẫn (Ký tên, đóng dấu) TIEU LUAN MOI download : skknchat123@gmail.com moi nhat CHƯƠNG 1: NHỮNG KIẾN THỨC ĐÃ HỌC Internet – Dịch vụ Web: 1.1 - Internet: Internet hệ thống thơng tin tồn cầu truy nhập cơng khai, gồm mạng máy tính liên kết với Hệ thống cho phép truyền thơng tin theo kiểu “nối chuyển gói liệu” (packet switching) dựa giao thức liên mạng chuẩn hóa có tên: “giao thức IP1” Có thể nói, Internet mạng máy tính khổng lồ, tạo thành dựa gia nhập nhiều mạng máy tính doanh nghiệp, viện nghiên cứu, trường đại học, tổ chức, phủ cá nhân (người dùng) toàn giới Internet sử dụng lĩnh vực, từ Thương mại, Chính trị, Quân sự, Nghiên cứu, Giáo dục, Văn hố, Xã hội Chính thế, dịch vụ Internet không ngừng phát triển, tạo cho nhân loại thời kỳ mới: kỷ nguyên thương mại điện tử 1.2 - Dịch vụ Web: Website2 tập hợp giao thức tiêu chuẩn mở đầu sử dụng để trao đổi liệu ứng dụng hệ thống Tóm gọn, phương thức giao tiếp hai thiết bị qua mạng, ứng dụng thành phần ứng dụng để giao tiếp, tập hợp tiêu chuẩn giao thức để trao đổi thông tin hai thiết bị ứng dụng Các ứng dụng phần mềm viết ngôn ngữ khác chạy tảng khác nhau, sử dụng web để trao đổi liệu qua mạng máy tính Dịch vụ Web hoạt động cách độc lập không phụ thuộc ngôn ngữ Các ứng dụng giao tiếp thông qua dịch vụ web (web service) Là giao thức hướng liệu sử dụng máy chủ Còn gọi trang web chứa nội dung chủ đề cụ thể TIEU LUAN MOI download : skknchat123@gmail.com moi nhat 1.3 - Lợi ích mang lại từ dịch vụ Web: Ngoài việc cho phép ứng dụng viết ngơn ngữ lập trình khác giao tiếp với nhau, dịch vụ web cịn mang lại lợi ích khác Đó là, giảm chi phí liên lạc, sử dụng an tồn nhanh chóng, mang đến khả tương tác cao, chi phí truyền thơng thấp… Ngơn ngữ HTML, CSS, JavaScript: 2.1 - HTML (HyperText Markup Language): HTML ngơn ngữ trình bày liệu dựa ngun tắc “đánh dấu”, thiết kế để tạo nên trang web với mẫu thơng tin trình bày World Wide Web HTML trở thành chuẩn Internet tổ chức World Wide Web Consortium (W3C) trì Phiên thức HTML HTML 4.01 cơng bố vào năm 1999 Sau nhà phát triển thay XHTML Hiện nay, phiên ngơn ngữ HTML5 Hình 1: Ngôn ngữ đánh dấu siêu văn HTML 2.2 - CSS (Cascading Style Sheet) Được W3S (World Wide Web Consortium) giới thiệu vào năm 1996, giải pháp nhằm khắc phục cho nhược điểm trình bày tài liệu HTML trình duyệt TIEU LUAN MOI download : skknchat123@gmail.com moi nhat Nếu nói, HTML ngơn ngữ dùng để trình bày liệu trang web, CSS ngơn ngữ dùng cho mục tiêu định dạng liệu HTML tạo ra, nhằm phục vụ cho việc thể liệu trang web cho sinh động mà khơng làm mã HTML trở nên phức tạp Hình 2: Ngôn ngữ định dạng CSS Ưu điểm CSS : + Là khả tái sử dụng nhiều nơi Điều làm giảm đáng kể công sức người lập trình + Việc tách biệt mã định dạng (CSS) HTML thể tính chun nghiệp hóa công việc quản lý xây dựng mã nguồn + Cung cấp khả đồng việc thể liệu theo tổng thể trương trình 2.3 - JavaScript: JavaScript ngơn ngữ lập trình “kịch bản” (Script) có cú pháp để biểu diễn mã lệnh “tựa ngôn ngữ C” Trên thực tế, ban đầu JavaScript phát triển từ ngôn ngữ C (derived from C) để thi hành kịch định sẵn cho trang web, ngữ nghĩa mục tiêu thiết kế lại mang hướng lập trình hướng đối tượng (gần giống Java) TIEU LUAN MOI download : skknchat123@gmail.com moi nhat Hình 13: Cấu trúc Code CSS sản phẩm Hình 14: Ảnh minh họa trang sản phẩm 3.3 – Các trang thông tin liên hệ: Các trang gồm có: ● Giỏ hàng (cart.html) ● Liên hệ - About Us (contact.html) ● Thông tin khách hàng (info.html) ● Đăng nhập (login.html) ● Chính sách đổi trả (pay.html) ● Biểu đồ kích thước (sizechart.html) ● Chi tiết sản phẩm (detail.html) Các trang định nghĩa chung CSS “style-contact.css” sau hình ảnh code trang mà em xây dựng Vì có số trang đa phần chữ nên em đưa vào trang bật phần Mong thầy/cô thông cảm ạ! 16 TIEU LUAN MOI download : skknchat123@gmail.com moi nhat a Chi tiết sản phẩm (detail.html) Hình 15: Cấu trúc Code HTML chi tiết sản phẩm Ở phần chi tiết sản phẩm em có áp dụng JavaScript vào làm mình, nhằm mục đích cộng trừ 17 TIEU LUAN MOI download : skknchat123@gmail.com moi nhat Hình 16: Cấu trúc Code JavaScript chi tiết sản phẩm Hình 17: Cấu trúc Code CSS chi tiết sản phẩm 18 TIEU LUAN MOI download : skknchat123@gmail.com moi nhat Hình 18: Ảnh minh họa trang chi tiết sản phẩm b Đăng nhập (login.html) Ở phần đăng nhập em thêm captcha phần đăng nhập sinh động hơn, nhiên captcha hoạt động không hiệu Hình 19: Cấu trúc Code HTML đăng nhập Phép thử Turing công cộng để phân biệt máy tính với người 19 TIEU LUAN MOI download : skknchat123@gmail.com moi nhat Hình 20: Cấu trúc Code JavaScript đăng nhập Hình 21: Cấu trúc Code CSS đăng nhập 20 TIEU LUAN MOI download : skknchat123@gmail.com moi nhat CHƯƠNG 3:KỊCH BẢN SỬ DỤNG ĐỐI VỚI WEBSITE Website sản phẩm em đưa lên vận hành thực tế internet với đường link: https://200000391.000webhostapp.com/index.html Khi người dùng truy cập vào trang web đường link trên, người dùng bắt đầu duyệt trang thấy trang chủ Hình 1: Ảnh minh họa trang chủ truy cập máy tính Là hệ thơng thơng tin tồn cầu truy cập cơng cộng gồm máy tính liên kết với 21 TIEU LUAN MOI download : skknchat123@gmail.com moi nhat Hình 2: Ảnh minh họa trang chủ truy cập điện thoại Ở trang chủ người dùng thấy sản phẩm bật cửa hàng Phía menu, người dùng tiếp cận sản phẩm theo loại xem thơng tin cửa hàng 22 TIEU LUAN MOI download : skknchat123@gmail.com moi nhat Hình 3: Ảnh minh họa trang sản phẩm Phần đánh dấu người dùng truy cập vào sản phẩm áo, áo khoác, quần phụ kiện Hình 4: Ảnh minh họa trang sản phẩm Áo máy tính 23 TIEU LUAN MOI download : skknchat123@gmail.com moi nhat Hình 5: Ảnh minh họa trang sản phẩm Áo điện thoại Vì trang sản phẩm có cấu trúc nên em lấy trang để làm minh họa cho thầy xem Hình 6: Ảnh minh họa nơi truy cập thông tin cửa hàng 24 TIEU LUAN MOI download : skknchat123@gmail.com moi nhat Hình 7: Ảnh minh họa trang About Us Ở trang About Us người dùng biết thơng tin địa sách đổi trả cửa hàng bao gồm số điện thoại, email,… Ngoài ra, bấm vào phần “VIEW ALL” trang chủ, người dùng đưa đến trang tất sản phẩm Nơi tiếp cận người dùng dễ dàng Hình 8: Ảnh minh họa ViewAll Khi bấm vào “VIEW ALL” người dùng đưa đến giao diện sau, chia thành giao diện Đó máy tính điện thoại 25 TIEU LUAN MOI download : skknchat123@gmail.com moi nhat Hình 9: Ảnh minh họa giao diện trang sản phẩm tổng hợp của hàng Khi người dung bấm vào phần đăng nhập hình ảnh Hình 10: Ảnh minh họa đăng nhập 26 TIEU LUAN MOI download : skknchat123@gmail.com moi nhat Trang web đưa người dùng tới trang đăng nhập số điện thoại Hình 11: Ảnh minh họa trang đăng nhập Nhập đầy đủ thông tin xác nhận người dùng người máy tiếp tục Trang web đưa người dùng đến trang thông tin Hình 12: Ảnh minh họa trang thơng tin Ở đây, người dùng nhập thơng tin khơng Khi bấm xác nhận trang web đưa người dùng lại trang chủ Ngồi cịn trang chi tiết sản phẩm, người dùng bấm vào sản phẩm Người dùng thấy thơng tin sản phẩm kiểu dáng, chất liệu, tem chông giả,… 27 TIEU LUAN MOI download : skknchat123@gmail.com moi nhat Hình 13: Ảnh minh họa trang chi tiết sản phẩm Ở góc trái tất trang web cịn có trang Facebook Messenger cửa hàng Giúp người dùng truy cập vào facebook cửa hàng hay nhắn tin trao đổi trực tiếp với nhân viên trực tuyến thuận tiện Hình 14: Ảnh minh họa thơng tin liên hệ Ngồi cịn số trang chữ hình ảnh chứa thơng tin sau: 28 TIEU LUAN MOI download : skknchat123@gmail.com moi nhat Hình 15: Trang biểu đồ kích thước Hình 16: Trang sách đổi trả 29 TIEU LUAN MOI download : skknchat123@gmail.com moi nhat TÀI LIỆU THAM KHẢO ● Css-tricks.com ● Slide Video hướng dẫn sinh viên thầy NGUYỄN MAI HUY ● W3Schools.com 30 TIEU LUAN MOI download : skknchat123@gmail.com moi nhat ... download : skknchat123@gmail.com moi nhat CHƯƠNG 2: CẤU TRÚC & XÂY DỰNG WEBSITE BÁN QUẦN ÁO SWE Cấu trúc lưu trữ: Hình 1: Cấu trúc liệu website Trong cấu trúc lưu trữ em chia làm phần: 1.1 – Images:... mơn học Thiết kế Web vào trương trình giảng dạy Đặc biệt, em xin gửi lời cảm ơn sâu sắc đến giảng viên môn – Thầy Nguyễn Mai Huy dạy dỗ, truyền đạt kiến thức quý báu cho em suốt thời gian học. .. thời gian tham gia lớp học thầy, em có thêm cho nhiều kiến thức bổ ích, tinh thần học tập hiệu quả, nghiêm túc cho em chắn hoạch định tương lai Bộ mơn Thiết kế Web mơn học thú vị, vơ bổ ích có