(Tiểu luận) 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 .6 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 .8 1.6 Tổng quan API 1.6.1 Khái niệm API .9 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 2.1 Khảo sát toán 15 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 TIẾNG ANH TIẾNG VIỆT API 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 Portable Document Format Định dạng Tài liệu Di động 10 REST 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 Suite du document ci-dessous [Marketing Plan] dự án giày Biti's - Final 26 Lập trình mạng 100% (3) 11 SASS Syntactically Awesome ngôn ngữ kịch Style Sheets 12 SEO Search Engine Tối ưu hóa cơng cụ Optimization tìm kiếm 13 URL Uniform Resource Locator Địa định vị tài nguyên 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