Trang web quản lý bán hàng

TRƯỜNG ĐẠI HỌC KINH TẾ KHOA THỐNG KÊ – TIN HỌC BÁO CÁO THỰC TẬP NGHỀ NGHIỆP NGÀNH HỆ THỐNG THÔNG TIN QUẢN LÝ CHUYÊN NGÀNH TIN HỌC QUẢN LÝ TRANG WEB QUẢN LÝ BÁN HÀNG Đơn vị thực tập : Cơng ty TNHH TMA Solutions Bình Định Giảng viên hướng dẫn : TS Hoàng Thị Thanh Hà ii LỜI CẢM ƠN Để hoàn thành báo cáo thực tập này, em xin gửi lời cảm ơn chân thành đến quý thầy cô Khoa Thống Kê – Tin Học trường Đại Học Kinh Tế - Đại Học Đà Nẵng tạo điều kiện để tụi em có hội thực tập thời gian vừa qua Đặc biệt, em xin gửi lời cảm ơn sâu sắc đến cô Hồng Thị Thanh Hà tận tình hướng dẫn, nhận xét góp ý để em hồn thành chuyên đề báo cáo thực tập Tiếp theo, em xin gửi lời cảm ơn đến ban lãnh đạo anh Mentors Phạm Quốc Khánh Công ty TNHH TMA Solutions Bình Định tạo điều kiện thuận lợi cho em thực tập, cọ sát với thực tế, học hỏi kiến thức giúp đỡ em q trình thực tập cơng ty Trong q trình thưc tập làm đề tài, hoàn thiện báo cáo thực tập khơng tránh khỏi thiếu sót, kính mong nhận góp ý quý giá quý thầy cô quý công ty Em xin chân thành cảm ơn! iii LỜI CAM ĐOAN Em xin cam đoan đề tài “Xây dựng Trang web quản lý bàn hàng (Front-end).” em nghiên cứu thực dựa hướng dẫn tận tình đơn vị thực tập Cơng ty TNHH TMA Solutions Bình Định giảng viên Hồng Thị Thanh Hà, khơng chép từ nguồn khác Nội dung báo cáo thực tập nghề nghiệp kết mà em nỗ lực nghiên cứu, học tập tìm hiểu q trình thực tập cơng ty đồng thời học hỏi từ tài liệu tham khảo mà đơn vị thực tập cung cấp Nội dung kết trình bày báo cáo nghiên cứu độc lập trung thực Nếu có hành vi chép hành vi gian lận nào, em xin chịu hoàn toàn trách nhiệm trước Hội đồng nhận kỷ luật iv MỤC LỤC MỤC LỤC LỜI CẢM ƠN iv LỜI CAM ĐOAN v MỤC LỤC vi DANH MỤC HÌNH ẢNH .viii DANH MỤC CÁC TỪ VIẾT TẮT .xi LỜI MỞ ĐẦU Chương TỔNG QUAN Về Cơng ty TNHH TMA Solutions Bình Định 1.1 Giới thiệu Cơng ty TNHH TMA Solutions Bình Định .2 1.1.1 Tổng quan 1.1.2 Tầm nhìn, sứ mệnh 1.1.3 Giá trị 1.2 Tổng quan nghề Developer 1.2.1 Định nghĩa Developer 1.2.2 Developer làm cơng việc gì? .4 1.2.3 Cơ hội nghề nghiệp (FrontEnd) .4 CHƯƠNG CƠ SỞ LÝ THUYẾT 2.1 JavaScript 2.1.1 JavaScript gì? 2.1.2 Tại nên học JavaScript .7 2.1.3 JavaScript tutorial 2.1.4 JavaScript Functions 2.1.5 JavaScript HTML DOM v 2.1.6 JavaScript oop .8 2.2 React JS .9 2.2.1 Introducing JSX 10 2.2.2 Rendering Elements 10 2.2.3 Components and Props 10 2.2.4 State and Lifecycle 10 2.2.5 Handling Events 10 2.2.6 Lists and Keys 11 2.2.7 Forms 11 2.3 HOOK 11 2.3.1 Introducing Hooks .11 2.3.2 Hooks at a Glance .11 2.3.3 Using the State Hook 11 2.3.4 Using the Effect Hook .11 2.3.5 Hooks API Reference 12 2.4 REDUX-Toolkit 12 2.4.1 configureStore 13 2.4.2 createSlice 13 2.4.3 createReducer 13 2.5 REACT ROUTER 13 2.6 JSON_SERVER 14 CHƯƠNG TRIỂN KHAI 15 Mục 3.1 : Phân tích yêu cầu hệ thống: .15 1.Mục tiêu đề tài : 15 2.Khảo sát hệ thống : 15 3.Yêu cầu HTTT : 15 vi Mục 3.2 : Thiết kế dự án 16 1.Mục tiêu thiết kế giao diện : 16 2.Quy trình thiết kế giao diện web ReactJs: 16 3.Thiêt kế giao diện : 20 CHƯƠNG KẾT QUẢ 33 KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN 33 Kết đạt tập .33 Kết luận hướng phát triển .33 TÀI LIỆU THAM KHẢO 34 vii DANH MỤC HÌNH ẢNH Hình 1: JavaScript Hình 2.ReactJs Hình 3.Redux-Toolkit .12 Hình 4.React Router .13 Hình 5.Json-Server 14 Hình 6.File PROJECT_WEB 17 Hình File PROJECT_WEB 18 Hình 8.File Component 18 Hình 9.File bố cục Component 19 Hình 10.File Cấu hình Router 20 Hình 11.File cấu hình Router 20 Hình 12.Giao diện trang chủ 21 Hình 13.Giao diện trang chủ 21 Hình 14.Giao diện trang chủ 22 Hình 15.Hiện danh sách sản phẩm 22 Hình 16.Hiện danh sách sản phẩm 23 Hình 17.Lọc sản phẩm theo danh mục 23 Hình 18.Lọc sản phẩm theo tên 24 Hình 19.Hiện chi tiết sản phẩm 24 Hình 20.Thêm sản phẩm vào giỏ hàng 25 Hình 21.Thêm sản phẩm vào giỏ hàng 25 Hình 22.Thêm sản phẩm vào giỏ hàng 26 Hình 23.Xóa sản phẩm khỏi giỏ hàng 26 Hình 24.Xóa sản phẩm khỏi giỏ hàng 26 Hình 25 Login trang Admin 27 Hình 26 Login trang Admin 27 viii Hình 27 Login trang Admin 27 Hình 28.Login trang Admin 28 Hình 29.Thêm sản phẩm 28 Hình 30.Thêm sản phẩm 29 Hình 31 Sửa sản phẩm 29 Hình 32 Sửa sản phẩm 30 Hình 33 Sửa sản phẩm 30 Hình 34 Xóa sản phẩm 30 Hình 35 Xóa sản phẩm 31 Hình 36 Giao diện trang thơng tin 31 Hình 37.Giao diện trang liên hệ .32 Hình 38.Giao diện trang liên hệ .32 ix DANH MỤC CÁC TỪ VIẾT TẮT - FE : Front - End - JS : JavaScript - API : Application Programming Interface - JSX : JavaScript XML x LỜI MỞ ĐẦU Mục tiêu đề tài - Tên đề tài: Trang web quản lý bàn hàng (Front-end) - Mục tiêu: Tạo giao diện hấp dẫn, tối ưu hóa trải nghiệm người dùng, tích hợp tính mua hàng linh hoạt đảm bảo tương thích đa tảng Đồng thời, khai thác công nghệ để nâng cao chất lượng hiệu suất trang web - Ngôn ngữ sử dụng: JavaScript; Thư viện React,Redux-toolkit,React-Router,Jsonserver Đối tượng phạm vi nghiên cứu - Đối tượng nghiên cứu: JavaScript, React JS,Hook ; Redux-toolkit ;React-Router - Phạm vi nghiên cứu: Nghiên cứu ngôn ngữ công nghệ, thiết kế giao diện người dùng, quản lý trạng thái ứng dụng, tối ưu hóa hiệu suất trang web Kết cấu đề tài Đề tài tổ chức gồm phần mở đầu, chương nội dung phần kết luận - Mở đầu - Chương 1: Tổng quan Công ty TNHH TMA Solutions Bình Định - Chương 2: Cơ sở lý thuyết - Chương 3: Triển khai - Chương 4: Kết - Kết luận hướng phát triển xi