Xây dựng giao diện người quản trị admin cho web toiec

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Ý Xây dựng giao diện người quản trị admin cho Web Toiec Đơn vị thực tập : Công ty TMA Solutions Bình Định Giảng viên hướng dẫn : Ts Nguyễn Thị Uyên Nhi LỜI CẢM ƠN Em xin gửi lời cảm ơn đến Cơng Ty TMA Solutions Bình Định có hỗ trợ giúp đỡ em có trải nghiệm thực tế phát triển kỹ cách tồn diện q trình thực tập nghề nghiệp công ty Em cảm ơn tới thầy cô khoa Thống Kê- Tin Học trường Đại học Kinh Tế Đà Nẵng tạo điều kiện cho em thực tập, đặc biệt Cô Nhi hướng dẫn em nhiệt tình thời gian qua để giúp em hồn thành tốt khóa thực tập Cuối cùng, em xin cảm ơn đến anh Đặng Ngọc Tiến anh Mentor khác hướng dẫn em cách nhiệt tình , cung cấp tài liệu cho em q trình thực tập để hồn thành kỳ thực tập tốt Trong 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! LỜI CAM ĐOAN Em xin cam đoan đề tài “Xây dựng giao diện người quản trị admin cho Web Toiec” 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 TMA Solutions giảng viên TS Nguyễn Thị Uyên Nhi, 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 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ó bất kỳ 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 MỤC LỤC LỜI CẢM ƠN LỜI CAM ĐOAN MỤC LỤC .3 DANH MỤC HÌNH ẢNH DANH MỤC BẢNG BIỂU DANH MỤC CÁC TỪ VIẾT TẮT LỜI MỞ ĐẦU CHƯƠNG 1.TỔNG QUAN VỀ CÔNG TY TMA BÌNH ĐỊNH SOLUTIONS3 1.1 Giới thiệu tởng quan cơng ty TMA Bình Định Solutions 1.2 Tởng quan vị trí Front – End Developer .4 CHƯƠNG CƠ SỞ LÝ THUYẾT VỀ FRONT – END DEVERLOPER .… 2.1 Giới thiệu HTML-CSS 2.2 JavaScript 2.2.1 Introduction about JavaScript 2.2.2 JavaScrpit Syntax 2.2.3 JavaScrpit Objects .7 2.2.4 JavaScrpit Functions 2.3 ES6 2.3.1 Block - Scoped Constructs Let and Const 2.3.2 Arrow Function 2.3.3 Rest Parameter, Spread operator 2.3.4 Template Literals - Default Parameters - Destructuring Assignment 2.4 Postman 2.5 React .10 2.5.1 Reatjs Overview 10 2.5.2 Rendering Elements 10 2.5.3 Components, State and Props 10 2.5.4 Basic Lifecycle 11 2.5.5 Handling Events 12 2.5.6 Conditional Rendering 12 2.5.7 Lists and Keys 12 2.5.8 Handle API with react .13 2.7.9 React hook (useState, useEffect) 13 CHƯƠNG TRIỂN KHAI DỰ ÁN XÂY DỰNG TRANG NGƯỜI QUẢN TRỊ CHO WEB TOEIC 13 3.1 Phân tích yêu cầu hệ thống 13 3.1.1 Mục tiêu đề tài 13 3.1.2 Khảo sát hệ thống 14 3.1.2 Yêu cầu hệ thống thông tin 14 3.2 Thiết kế dự án 15 3.2.1 Quy trình thiết kế giao diện Web ngơn ngữ lập trình 15 3.2.2 Thiết kế giao diện 15 CHƯƠNG KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN 19 TÀI LIỆU THAM KHẢO 22 CHECK LIST CỦA BÁO CÁO 23 DANH MỤC HÌNH Ả Hình 1.1 Cơng ty TMA Bình Định Hình Visual Studio Code Hình Logo HTML-CSS Hình 2 Logo JavaScript .6 Hình Logo Postman Hình Logo React .9 Hình Sơ đồ Lifecycles 11 YHình Màn hình Đăng nhập 16 Hình Màn hình đăng kí 17 Hình 3 Màn hình trang chủ 17 Hình Màn hình Quản lý tài khoản 18 Hình Màn hình quản lý chủ đề từ vựng 18 Hình Màn hình quản lý tất từ vựng theo chủ đề 19 Hình Màn hình thêm từ vựng 19 Hình Màn hình cập nhật từ vựng 20 Hình Màn hình xóa từ vựng 20 Hình 10 Màn hình tìm kiếm 21 DANH MỤC BẢNG BI Bảng 1.1: Phân biệt State Props .10 Y Bảng 2.1: Đặc tả chức Admin .14 DANH MỤC CÁC TỪ VIẾT TẮT API : Application Programming Interface LỜI MỞ ĐẦU Mục tiêu đề tài - Nghiên cứu xây dựng giao diện cho dự án “Xây dựng giao diện người quản trị admin cho Web Toiec” giúp xây dựng trang website Toeic bao gồm đầy đủ chức năng, dễ dàng cho người quản trị thực thao tác quản lý : +Quản lý Người Dùng: Trang quản trị admin cho phép quản lý kiểm soát danh sách người dùng, bao gồm khả tạo, sửa đởi xóa tài khoản Tính quản lý vai trị phân quyền tích hợp để đảm bảo người dùng có quyền truy cập phù hợp +Quản lý nội dung :cung cấp khả quản lý nội dung trang web Toeic, bao gồm việc thêm, sửa đổi xóa viết,từ vựng, tập, tài liệu học tập tất nội dung khác liên quan đến kỳ thi Toeic  Mục tiêu đề tài " Xây dựng giao diện người quản trị admin cho Web Toiec " xây dựng trang web, đáp ứng nhu cầu học kiểm tra trình độ tiếng anh thân góp phần nâng cao hiệu học tiếng anh người dùng Đối tượng phạm vi nghiên cứu a) Đối tượng - Người dùng: Đối tượng nghiên cứu người dùng website TestToeic Là người có nhu cầu tăng vốn từ tiếng anh kiểm tra trình độ tiếng anh thân - Nhà quản trị website: Những người quản lý điều hành website Test-Toeic, bao gồm người có trách nhiệm thiết kế giao diện, quản lý nội dung, hoạt động liên quan đến website b) Phạm vi nghiên cứu - Phạm vi nghiên cứu trang web Toeic bao gồm loạt khía cạnh liên quan đến học tập, kiểm tra cải thiện kỹ tiếng Anh cho kỳ thi Toeic Dưới số phạm vi nghiên cứu tiềm cho trang web Toeic:  Trải nghiệm người dùng  Hiệu học tập  Quản lý nội dung hệ thống 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 hướng phát triển - Mở đầu - Chương 1: Tổng quan cơng ty TMA Bình Định Solutions - Chương 2: Cơ sở lý thuyết Front – End Developer - Chương 3: Triển khai dự án xây dựng website Test-Toeic - Chương 4: Kết đạt sau thực tập - Kết luận hướng phát triển 10 2.3.3.2 Rest Parameter - Cho phép truyền số lượng biến động vào hàm dạng mảng Cú pháp Rest Parameter ba dấu chấm " ", theo sau tên biến để lưu trữ giá trị tham số vào mảng 2.3.4 Template Literals - Default Parameters - Destructuring Assignment 2.3.4.1 Template Literals - Cho phép tạo chuỗi ký tự chứa biểu thức biến cú pháp dễ đọc gọn nhẹ 2.3.4.2 Default Parameters - Nếu khơng có giá trị truyền vào cho tham số giá trị mặc định chúng sử dụng 2.3.4.3 Destructuring Assignment - Cho phép tách lấy giá trị từ mảng đối tượng gán chúng vào biến riêng lẻ cách thuận tiện - Destructuring Assignment có hai dạng chính: phân rã mảng (Array Destructuring) phân rã đối tượng (Object Destructuring) 2.4 Postman Hình Logo Postman 17 Postman công cụ cho phép thao tác với API, phổ biến REST Postman công cụ phổ biến sử dụng thử nghiệm API Với Postman, ta gọi Rest API mà khơng cần viết dịng code Postman hỗ trợ tất phương thức HTTP (GET, POST, PUT, PATCH, DELETE, …) Bên cạnh đó, cịn cho phép lưu lại lịch sử lần request, tiện cho việc sử dụng lại cần 2.5 React Hình Logo React 2.5.1 Reatjs Overview - ReactJS thư viện giao diện người dùng JavaScript dựa thành phần đơn giản, giàu tính Nó sử dụng để phát triển ứng dụng nhỏ ứng dụng lớn, phức tạp ReactJS cung cấp tính tối thiểu chắn để khởi động ứng dụng web 2.5.2 Rendering Elements - Trong React, rendering elements liên quan đến việc tạo cập nhật component đại diện cho giao diện người dùng React sử dụng DOM ảo 18 (Document Object Model) để cập nhật render component cách hiệu 2.5.3 Components, State and Props 2.5.3.1Components - Components cho phép bạn chia giao diện người dùng thành phần độc lập, tái sử dụng suy nghĩ phần cách riêng biệt - Components thành phần chức thành phần lớp 2.5.3.2State and Props Trường hợp sử dụng State Props State sử dụng để lưu Props sử dụng để trữ liệu thành phần truyền liệu xử lý kiện phải hiển thị cho chế độ cho thành phần xem Khả thay đởi Thành phần State giữ liệu thay đổi theo thời gian Props bất biến—một đặt, props khơng thể thay đởi State sử dụng thành phần lớp Props sử dụng hai thành phần chức lớp Cập nhật Trình xử lý kiện thường cập nhật trạng thái Thành phần cha mẹ đặt đạo cụ cho thành phần Bảng 1.1: Phân biệt State Props 19 2.5.4 Basic Lifecycle - Các phương thức React Component Lifecycle chia làm pha là: Mounting, Updating Unmounting Hình Sơ đồ Lifecycles 2.5.5 Handling Events - Xử lý kiện với phần tử React giống với việc xử lý kiện phần tử DOM Có số khác biệt cú pháp:  Các kiện React đặt tên camelCase, thay chữ thường  Với JSX, bạn truyền hàm làm trình xử lý kiện, thay chuỗi 2.5.6 Conditional Rendering - Conditional Rendering hoạt động tương tự với conditional javascript Sử dụng tốn tử JavaScript if tốn tử có điều kiện để tạo phần tử đại diện cho trạng thái để React cập nhật giao diện người dùng để khớp với chúng - Một phương pháp khác để hiển thị có điều kiện phần tử nội tuyến sử dụng điều kiện tốn tử có điều kiện JavaScript ? true : false 20