Xây dựng và thiết kế website thương mại điện tử cho cửa hàng giày sử dụng công nghệ reactjs

BỘ GIÁO DỤC VÀ ĐÀO TẠO TRƯỜNG ĐẠI HỌC KINH BẮC BÁO CÁO THỰC TẬP TỐT NGHIỆP Đơn vị thực tập: Viện khoa học đào tạo phát triển nhân lực BÁO CÁO THỰC TẬP: XÂY DỰNG VÀ THIẾT KẾ WEBSITE THƯƠNG MẠI ĐIỆN TỬ CHO CỬA HÀNG GIÀY SỬ DỤNG CÔNG NGHỆ REACTJS … Họ tên SV: Nguyễn Văn Thắng MSV:08D4800084 Lớp: 08D.CNTT02 Khoa: Công nghệ thông tin – Điện tử truyền thông Ngành:Công nghệ thông tin Giáo viên hướng dẫn: ThS Vũ Ngọc Phan Bắc Ninh – Năm 2023 BỘ GIÁO DỤC VÀ ĐÀO TẠO TRƯỜNG ĐẠI HỌC KINH BẮC BÁO CÁO THỰC TẬP TỐT NGHIỆP Đơn vị thực tập: Viện khoa học đào tạo phát triển nhân lực BÁO CÁO THỰC TẬP: XÂY DỰNG VÀ THIẾT KẾ WEBSITE THƯƠNG MẠI ĐIỆN TỬ CHO CỬA HÀNG GIÀY SỬ DỤNG CÔNG NGHỆ REACTJS … Họ tên SV: Nguyễn Văn Thắng MSV:08D4800084 Lớp: 08D.CNTT02 Khoa: Công nghệ thông tin – Điện tử truyền thông Ngành:Công nghệ thông tin Giáo viên hướng dẫn: ThS Vũ Ngọc Phan Bắc Ninh – Năm 2023 LỜI CẢM ƠN Để hoàn thành đề tài này, trước hết em xin gửi lời cảm ơn chân thành đến Cán Giảng viên Khoa Công nghệ thông tin – Điện tử truyền thông, cán giảng viên Trường Đại học Kinh Bắc tận tình giảng dạy truyền đạt kiến thức cho em Đồng thời em xin gửi lời cảm ơn đặc biệt dạy, hướng dẫn tận tình ThS Vũ Ngọc Phan ln tận tình hướng dẫn, giúp đỡ em suốt thời gian thực đề tài Em xin gửi lời cảm ơn tới Khoa Công nghệ thông tin – Điện từ truyền thông Trường Đại Học Kinh Bắc quan tâm tạo điều kiện giúp em hoàn thành đề tài Ngoài ra, em xin cảm ơn người bạn giúp đỡ trao đổi thêm nhiều thông tin đề tài trình thực đề tài Cuối em vơ biết ơn gia đình bạn bè, người luôn bên cạnh em, động viên, chia sẻ với em suốt thời gian thực đề tài “Xây dựng thiết kế website thương mại điện tử cho cửa hàng giày sử dụng cơng nghệ reactjs” Do kiến thức cịn hạn chế, báo cáo em khơng tránh khỏi sai sót Rất mong nhận lời góp ý từ quý Thầy để khóa luận tốt nghiệp em hồn thiện giúp em có thêm kinh nghiệm quý báu Cuối cùng, em xin kính chúc thầy giảng viên trường Đại học Kinh Bắc nói chung, thầy cô khoa Công nghệ thông tin – Điện tử truyền thơng nói riêng dồi sức khỏe thành công nghiệp cao quý Bắc Ninh, ngày … tháng … năm 2023 Sinh viên thực (Ký ghi rõ họ tên) MỤC LỤC MỞ ĐẦU 1 Lý chọn đề tài Mục tiêu đề tài Phương pháp nghiên cứu đề tài Đối tượng phạm vi nghiên cứu đề tài Bố cục đề tài CHƯƠNG 1: CƠ SỞ LÍ THUYẾT 1.1 Tổng quan HTML 1.1.1 Giới thiệu HTML 1.1.2 Cấu trúc hoạt động HTML 1.2 Tổng quan CSS 1.2.1 Khái niệm CSS 1.2.2 Tác dụng CSS 1.3 Tổng quan JavaScript 1.3.1 Khái niệm JavaScript 1.3.2 Ứng dụng JavaScript 1.4 Tổng quan SCSS 1.4.1 Khái niệm SCSS 1.4.2 Một số ưu điểm vượt trội SCSS so với CSS 1.5 Tổng quan ReactJS 1.5.1 Khái niệm ReactJS 1.5.2 Ưu điểm ReactJS 1.6 Tổng quan API 1.6.1 Khái niệm API 1.6.2 Ứng dụng API 1.6.3 Ưu điểm 10 1.7 Tổng quan sở thực tập 12 1.7.1 Giới thiệu chung 12 1.7.2 Thành lập 12 1.7.3 Chiến lược phát triển: 12 1.7.4 Cơ cấu tổ chức: 13 1.7.5 Chức năng, nhiệm vụ, phạm vi ngành nghề hoạt động: 13 1.7.6 Quy mô, lực sản xuất, kinh doanh,… 14 1.8 Nội dung nghiên cứu 14 CHƯƠNG : THỰC TRẠNG NGHIÊN CỨU 15 2.1 Khảo sát toán 15 2.2 Phân tích thiết kế hệ thống 16 2.2.1 Xây dựng sơ đồ hệ thống 16 2.2.2 Xây dựng sở liệu: 19 2.3 Thiết kế xây dựng giao diện website 22 2.3.1 Trang chủ 22 2.3.2 Trang quản trị 27 CHƯƠNG 3: KẾT QUẢ NGHIÊN CỨU 30 3.1 Những kết đạt được: 30 3.2 Đề xuất giải pháp 30 TÀI LIỆU THAM KHẢO 31 DANH MỤC CÁC KÝ HIỆU VÀ CHỮ VIẾT TẮT STT CHỮ VIẾT TẮT API TIẾNG ANH TIẾNG VIỆT Application Programming Giao diện lập trình Interface ứng dụng Cơ sở liệu CSDL Database CSS Cascading Style Sheets Ngơn ngữ sử dụng để tìm định dạng DOM Document Object Model Giao diện lập trình ứng dụng HTML HTTP MVC Hyper Text Markup Ngôn ngữ đánh dấu Language siêu văn HyperText Transfer Giao thức truyền tải Protocol siêu văn Model-View-Controller Tạo lập giao diện người dùng máy tính PDF REST Portable Document Format Định dạng Tài liệu Di động 10 SCSS Representational state Kiểu kiến trúc phần transfer mềm Sassy Cascading Style Chương trình cho Sheets phép khởi tạo CSS thêm số tính Recommandé pour toi 26 Suite du document ci-dessous [Marketing Plan] dự án giày Biti's - Final Lập trình mạng 100% (3) 11 SASS Syntactically Awesome ngôn ngữ kịch Style Sheets 12 SEO Search Engine Optimization tìm kiếm 13 URL Uniform Resource Locator Địa định vị tài Tối ưu hóa cơng cụ ngun thống 14 UI User Interface Giao diện người sử 15 URI Uniform Resource Định dạng tài Identifier nguyên thống dụng DANH MỤC CÁC ẢNH Hình 1.1 Cấu trúc trang HTML Hình 1.2 Hình đoạn mã JavaScript Hình 1.3 SCSS CSS Hình 1.4 Logic API 11 Hình 1.5 Sơ đồ cấu tổ chức 15 Hình 2.1 Sơ đồ phân cấp chức 16 Hình 2.2 Sơ đồ mức ngữ cảnh 17 Hình 2.3 Sơ đồ luồng liệu mức đỉnh 17 Hình 2.4 Sơ đồ chức quản lý mua hàng (Admin) 18 Hình 2.5 Sơ đồ chức quản lý mua hàng (User) 18 Hình 2.6 Sơ đồ chức quản lý bán hàng 19 Hình 2.7 Hình tổng quan liệu giày thể thao 19 Hình 2.8 Hình tổng quan liệu giày lười 19 Hình 2.9 Hình tổng quan liệu giày công sở 20 Hình 2.10 Hình tổng quan liệu giày loafer 20 Hình 2.11 Hình tổng quan liệu giày thể thao da 21 Hình 2.12 Hình tổng quan liệu phụ kiện 21 Hình 2.13 Hình tổng quan liệu tài khoản Admin 21 Hình 2.14 Hình tổng quan liệu giỏ hàng 22 Hình 2.15 Giao diện trang chủ 23 Hình 2.16 Giao diện giày thể thao 23 Hình 2.17 Giao diện giày lười 24 Hình 2.18 Giao diện giày công sở 24 Hình 2.19 Giao diện giày loafer 25 Hình 2.20 Giao diện giày thể thao da 25 Hình 2.21 Giao diện phụ kiện 26 Hình 2.22 Giao diện chi tiết sản phẩm 26 Hình 2.23 Giao diện giỏ hàng 27 Hình 2.24 Giao diện trang đăng nhập Admin 27 Hình 2.25 Giao diện trang đăng kí Admin 28 Hình 2.26 Giao diện trang quản trị 28 Hình 2.27 Giao diện đơn hàng, thơng tin sản phẩm khách hàng 29 Hình 2.11 Hình tổng quan liệu giày thể thao da Hình 2.12 Hình tổng quan liệu phụ kiện Hình 2.13 Hình tổng quan liệu tài khoản admin 21 Hình 2.14 Hình tổng quan liệu giỏ hàng 2.3 Thiết kế xây dựng giao diện website 2.3.1 Trang chủ - Trang hiển thị toàn nội dung trang web Trên bạn thực tất công việc mà bạn muốn cách click vào mục chọn tương ứng chương trình liên kết đến trang tương ứng đáp ứng yêu cầu bạn - Menu ngang trang chứa số nội dung trang web như: giày thể thao, giày lười, giày công sở, giày loafer, giày thể thao da, phụ kiện - Ở trang : phần trính bày mặt hàng theo kiểu thống kê tiêu chí đặc biệt như: xếp hạng sản phẩm phổ biến,… 22 Hình 2.15 Giao diện trang chủ Hình 2.16 Giao diện giày thể thao 23 Hình 2.17 Giao diện giày lười Hình 2.18 Giao diện giày cơng sở 24 Hình 2.19 Giao diện giày loafer Hình 2.20 Giao diện giày thể thao da 25 Hình 2.21 Giao diện phụ kiện Hình 2.22 Giao diện chi tiết sản phẩm 26 Hình 2.23 Giao diện giỏ hàng 2.3.2 Trang quản trị - Để vào trang quản trị trang chủ , người quản trị nhấn trang tìm kiếm google “http://localhost:3000/giaythethaoAD” Sau đăng nhập với Username Password quản trị Dưới giao diện quản trị viên vào trang quản trị Hình 2.24 Giao diện trang đăng nhập Admin 27 Hình 2.25 Giao diện trang đăng kí Admin Hình 2.26 Giao diện trang quản trị - Các thành viên ban quản trị nhập, xố, sửa, thêm hàng hóa, xem xố sửa đơn Chỉ có thành viên ban quản trị vào trang thực cơng việc 28 Hình 2.27 Giao diện đơn hàng, thông tin sản phẩm khách hàng - Khi khách hàng nhấn nút đặt hàng trang “giỏ hàng” sau điền đầy đủ thông tin, đơn hàng chuyển đến trang quản trị đơn hàng, người quản trị duyệt đơn cho khách hàng đóng hàng 29 CHƯƠNG 3: KẾT QUẢ NGHIÊN CỨU Trong trình thực đề tài em cố gắng để tìm hiểu cài đặt chương trình thời gian có hạn nên chưa giải tất vấn đề đặt Em mong nhận thông cảm Thầy cô Em xin chân thành cảm ơn ! 3.1 Những kết đạt được: ➢ Về cơng nghệ: - Tìm hiểu nắm bắt công cụ thiết kế Web - Biết cách thiết kế Web động cách tổ chức sở liệu - Các dịch vụ Internet, đặc biệt Web ➢ Về cài đặt chương trình - Giao diện thân thiện với người dùng - Giới thiệu mặt hàng kinh doanh cửa hàng đến với khách hàng - Cho phép tra cứu mặt hàng khách hàng có nhu cầu tìm hàng - Cho phép khách hàng thực việc đặt hàng qua mạng - Tiếp nhận đơn đặt hàng khách hàng - Lập hóa đơn - Cập nhật: Mặt hàng, khách hàng, đơn đặt hàng - Thống kê mặt hàng theo nhiều tiêu chí 3.2 Đề xuất giải pháp Sau hồn thành chương trình thực tập tốt nghiệp em muốn phát triển trang web thêm tính sau: - Cho phép khách hàng mua tốn trực tiếp qua mạng thơng qua thẻ ATM - Xây dựng hệ thống cho phép công ty mua hàng trực tiếp qua mạng 30 TÀI LIỆU THAM KHẢO Tài liệu: Sách React Succinctly (Tác giả: Samer Buna, xuất 7/10/2019) Sách SQL Cookbook (Tác giả: Anthony Molinaro, xuất 2005) Sách Learning Web Design: (Tác Giả: Jennifer Niederst Robbins, xuất 2012) Website: https://www.w3schools.com https://react-icons.github.io/react-icons https://reactjs.org https://topdev.vn/blog https://fullstack.edu.vn 31 BỘ GIÁO DỤC VÀ ĐÀO TẠO CỘNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT NAM TRƯỜNG ĐẠI HỌC KINH BẮC Độc lập – Tự – Hạnh phúc - - NHẬT KÝ THỰC TẬP TẠI CƠ SỞ Họ tên sinh viên: Nguyễn Văn Thắng Cơ quan thực tập: Viện Khoa học Đào tạo Phát triển Nhân lực Họ tên cán hướng dẫn: ………………………………………………… Thời gian, từ ngày tháng năm 2023 đến ngày 22 tháng năm 2023 Tuần Từ ngày Nội dung cơng việc giao - Ơn tập kiến thức lập trình Kết cơng việc Hồn thành web 06/02/2023 đến ngày 12/02/2023 Từ ngày 13/02/2023 đến ngày - Tìm hiểu Reactjs Hồn thành - Tìm hiểu API - Cài đặt Reactjs 19/02/2023 - Làm tập ví dụ với Từ ngày Reactjs 20/02/2023 - Call API Hoàn thành đến ngày 26/02/2023 - Thực hành thiết kế web Reactjs Hoàn thành Nhận xét chữ ký CBHD Từ ngày - Phân tích thiết kế hệ thống 27/02/2023 đến ngày 05/03/2023 - Tạo sở liệu API Từ ngày - Code giao diện website Hoàn thành 06/03/2023 đến ngày 12/03/2023 Từ ngày - Code chức website Hoàn thành - Hoàn thành dự án 13/03/2023 đến ngày 19/03/2023 Từ ngày 20/03/2023 đến ngày 28/03/2023 - Hoàn thành báo cáo Hồn thành BỘ GIÁO DỤC VÀ ĐÀO TẠO CỘNG HỊA XÃ HỘI CHỦ NGHĨA VIỆT NAM TRƯỜNG ĐẠI HỌC KINH BẮC Độc lập – Tự – Hạnh phúc - - PHIẾU ĐÁNH GIÁ KẾT QUẢ THỰC TẬP TẠI CƠ SỞ (Dùng cho cán hướng dẫn thực tập) Họ tên cán hướng dẫn thực tập:……………………………………… Đơn vị thực tập:……………………………………………………………… Địa chỉ:……………………………………………………………………… Điện thoại: Fax:……………………………… Email:……………… Website:………………………… Họ tên sinh viên thực tập: MSV:…………… Lớp: ………………………………… ….Khoa…………………………… Thời gian thực tập: từ ngày đến ngày………………………… ĐÁNH GIÁ VỀ QUÁ TRÌNH THỰC TẬP Đánh giá cách đánh dấu vào cột xếp loại nội dung đánh giá bảng sau Trong loại A: Tốt; loại B: Khá; loại C: Trung bình; loại D: Kém Nội dung đánh giá I Tinh thần kỷ luật, thái độ Thực nội quy quan Chấp hành giấc làm việc Thái độ giao tiếp với CB CNV Ý thức bảo vệ cơng Tích cực cơng việc II Khả chuyên môn, nghiệp vụ Đáp ứng yêu cầu công việc Xếp loại A B C D Tinh thần học hỏi, nâng cao trình độ chuyên mơn, nghiệp vụ Có đề xuất, sáng kiến, động cơng việc III Kết cơng tác Hồn thành công việc giao CÁC ĐÁNH GIÁ KHÁC ……………………………………………………………………………… ……………………………………………………………………………… ……………………………………………………………………………… ……………………………………………………………………………… … , ngày … tháng…… năm…… Xác nhận quan Cán hướng dẫn Thủ trưởng (Ký tên, đóng dấu) (Ký tên, đóng dấu)