TIỂU LUẬN môn INTERNET và GIAO THỨC đề tài xây dựng web cửa hàng bán giày nam nữ

HỌC VIỆN CƠNG NGHỆ BƯU CHÍNH VIỄN THƠNG KHOA VIỄN THÔNG I TIỂU LUẬN KẾT THÚC HỌC PHẦN MÔN INTERNET VÀ GIAO THỨC Đề tài: Xây dựng web cửa hàng bán giày nam nữ Giảng viên: Nguyễn Đình Long Nhóm: Nhóm lớp: Sinh viên: Hà Nội, tháng 12 năm 2021 -1 MỤC LỤC Lời nói đầu: Danh mục hình ảnh: Giới thiệu ReactJS: Xây dựng trang web giày dép nam: Tổng quan giao diện: Các chức dành cho người dùng: Các chức dành cho Admin: 13 Kết luận 16 LỜI NĨI ĐẦU Trong thời đại cơng nghệ ngày phát triển, nhiều ứng dụng, thành tựu internet áp dụng vào đời sống xã hội, góp phần giúp ngày phát triển rất nhiều lĩnh vực khác nhau, khiến cho sống trở nên dễ dàng tiện ích Nhất giới chìm khủng hoảng mang tên Covid-19, khiến cho nhiều cơng nghiệp bị đình trệ, nhiều ngành nghề khác phát triển Tuy nhiên, lại hội lớn để internet bùng nổ cách rộng rãi đa dạng Một số ví dụ điển hình sàn thương mại điện tử Đặc biệt, chúng thị trường tiềm năng, giúp hạn chế tiếp xúc người mua người bán mà đảm bảo nhu cầu cung/cầu hàng hóa hai bên Trong tương lai, thương mai điện tử trở thành phần chủ chốt phát triển, tăng trưởng kinh tế nước ta nói riêng tồn cầu nói chung Trong chương hình học sinh viên ngành Viễn Thơng năm có mơn Internet giao thức Đây mơn học quan trọng, giúp cho sinh viên có tảng định việc định hướng xây dựng hệ thống web yếu tố khác Và lựa chọn liên quan đến thương mại điện tử trang web giày dép nam, nhóm chúng em, với vốn kiến thức thầy Nguyễn Đình Long truyền tải học kì vừa rồi, mong muốn mang đến cho thầy bạn nhìn rõ hệ thống web bán hàng Nhóm chúng em sử dụng ReachJs (một cơng nghệ FrontEnd Facebook phát triển) Ngồi ra, công nghệ Single page application hay cilent side rendering thứ bọn em sử dụng hệ thống web DANH MỤC HÌNH ẢNH Hình 1: Giao diện trang chủ tổng quan Hình 2: Giao diện trang chủ tổng quan Hình 3&4: Giao diện danh mục sản phẩm Hình 5: Database sản phẩm Hình 6: Database đơn hàng Hình 7: Tra cứu đơn hàng Hình 8: Kết tra cứu Hình 9: Giao diện đặt hàng tốn Hình 10: Thơng báo đặt đơn hàng thành cơng + mã đơn hàng Hình 11: Trạng thái đơn hàng Hình 12: Sản phẩm giỏ hàng Hình 13: Trang chủ dành cho admin Hình 14: Màn hình đăng nhập admin Hình 15: Danh sách hàng hóa khách hàng đặt mua Hình 16: Giao diện thêm hàng I Giới thiệu React (ReactJS) - React framework JavaScript front-end mã nguồn mở miễn phí để xây dựng giao diện người dùng dựa thành phần UI Nó trì Meta (trước biến đến Facebook) cộng đồng nhà phát triển công ty cá nhân React sử dụng framework để phát triển ứng dụng trang đơn di động - Ứng dụng đơn giản phổ biến React tạo lập trì trang web html đơn giản bao gồm script tag khác - React thuộc lớp View ứng dụng MVC (Model View Controller) - Để sử dụng React cho trang web động, cần có tùy chọn cho NPM (node package manager) nằm hệ thống NodeJS - Single Page Application (SPA) ứng dụng web trang web tương tác với người dùng cách tự động viết lại trang web với liệu từ máy chủ web, thay phương pháp mặc định trình duyệt web tải tồn trang Mục tiêu chuyển đổi nhanh để làm cho trang web giống ứng dụng gốc Trong SPA, liệu thay đổi phụ thuộc vào vài tương tác cụ thể người dung thay cập nhật tất thành phần trang web - Client-side Rendering: Ứng dụng trang web phát triển dạng SPA thường sử dụng Client-side Rendering để hoạt động o Những logic đơn giản (validation, đọc liệu, sorting, filtering) nằm client side o Logic để routing (chuyển trang), render (hiển thị) liệu hầu hết nằm client side o Logic phức tạp (thanh toán, phân quyền) cần xử lý nhiều (data processing, report) nằm server side - Để làm điều trang web yêu cầu phải chia làm phần: front-end backend để code - Áp dụng cho trang web cần tương tác nhiều II XÂY DỰNG TRANG WEB GIÀY DÉP NAM SỬ DỤNG REACTJS Tổng quan giao diện Web tạo với mục đích bn bán, kinh doanh mặt hàng giày nam nữ Giao diện chủ đạo web sử dụng tông màu sáng, mang lại cảm giác thoải mái, tươi đầy sức trẻ - Web thiết kế ảnh đầu trang dãy hình ảnh thay đổi thông báo, khuyến nhỏ lẻ chạy bên Hình 1: Giao diện trang chủ tổng quan Hình 2: Giao diện trang chủ tổng quan Khi người dùng click vào mục “Sản phẩm”, có list sản phẩm có cửa hàng Hình 3&4: Giao diện danh mục sản phẩm Ở mục khác “Nam”, “Nữ” hay “Sale OFF” thiết kế tương tự trang có nút giúp người dùng quay trở trang chủ (Home) Các chức dành cho người dùng Người dùng sử dụng chức sau: - Tra cứu hàng hóa Mua hàng Check giỏ đồ mà thêm hàng Mỗi thao tác có database khác sau: Hình 5: Database sản phẩm Hình 6: Và database đơn hàng Hình 7: Tra cứu đơn hàng Hình 8: Kết tra cứu 10 Hình 9: Giao diện đặt hàng tốn Khi đặt hàng thành cơng, hệ thống gửi mã đơn hàng để người dùng từ mã đơn hàng theo dõi tình trạng sản phẩm (đã nhận đơn, xuất kho, di chuyển đến đâu rồi, ) Hình 10: Thơng báo đặt đơn hàng thành công + mã đơn hàng 11 Hình 11: Trạng thái đơn hàng Ngồi ra, ta thêm sản phẩm ưa thích vào giỏ kiểm tra giỏ hàng Hình 12: Sản phẩm giỏ hàng 12 Các chức dành cho admin Hình 13: Trang chủ dành cho admin Admin quản lí web bán hàng cách thêm “/admin” vào đường dẫn link trang web Sau cần phải đăng nhập tài khoản xác minh Hình 14: Màn hình đăng nhập admin Sau đăng nhập chuyển qua trang quản trị Ở đây, admin làm việc xem đơn đặt mua, thêm hàng, quản lí phân phối đơn mua sản phẩm, 13 g Hình 15: Danh sách hàng hóa khách hàng đặt mua Ngồi ra, admin chọn thêm hàng mục kế bên Hình 16: Giao diện thêm hàng 14 Ở mục này, muốn thêm sản phẩm nào, admin điền chi tiết thơng tin sản phẩm u cầu thơng tin bên Hình ảnh sản phẩm yêu cầu admin truy cập vào file ảnh tương ứng có máy để hiển thị Link: https://github.com/Blooful/backendint202 https://github.com/Blooful/internetvagiao thuc-2021 15 KẾT LUẬN Bộ mơn Internet giao thức thầy Nguyễn Đình Long giúp chúng em nhiều việc hiểu kĩ thuật làm web phương pháp xây dựng hình thành hệ thống web, từ chúng em có tảng vững việc tìm tịi phát triển thân cho mơn sau Bài tiểu luận nhóm chúng em nhìn chung cịn nhiều sai sót, kính mong thầy bỏ qua góp ý để bọn em rút kinh nghiệm tiểu luận thành cơng Nhóm chúng em xin trân trọng cảm ơn! 16 ... có môn Internet giao thức Đây môn học quan trọng, giúp cho sinh viên có tảng định việc định hướng xây dựng hệ thống web yếu tố khác Và lựa chọn liên quan đến thương mại điện tử trang web giày. .. điều trang web yêu cầu phải chia làm phần: front-end backend để code - Áp dụng cho trang web cần tương tác nhiều II XÂY DỰNG TRANG WEB GIÀY DÉP NAM SỬ DỤNG REACTJS Tổng quan giao diện Web tạo với... diện Web tạo với mục đích bn bán, kinh doanh mặt hàng giày nam nữ Giao diện chủ đạo web sử dụng tông màu sáng, mang lại cảm giác thoải mái, tươi đầy sức trẻ - Web thiết kế ảnh đầu trang dãy