QUAN VỀ CÔNG TY TMA BÌNH ĐỊNH SOLUTIONS3 1.1 Giới thiệu tổng quan về công ty TMA Bình Định Solutions
Tổng quan về vị trí Front – End Developer
Phần front-end của trang web là giao diện tương tác với người dùng, bao gồm mọi yếu tố bạn thấy khi duyệt Internet, như font chữ, màu sắc, menu xổ xuống và thanh trượt Tất cả những yếu tố này được tạo ra từ sự kết hợp của HTML, CSS và JavaScript, được trình duyệt máy tính của bạn xử lý.
- Làm quen các Framework phổ biến như :Vue.js , Angular , React…
Cài đặt công cụ : Visual Studio Code
CƠ SỞ LÝ THUYẾT VỀ FRONT – END DEVERLOPER
Postman
Postman là công cụ phổ biến giúp thao tác với API, đặc biệt là REST Hiện nay, Postman được sử dụng rộng rãi trong việc thử nghiệm các API, cho phép người dùng gọi Rest API mà không cần phải viết mã.
Postman hỗ trợ đầy đủ các phương thức HTTP như GET, POST, PUT, PATCH và DELETE Ngoài ra, ứng dụng còn cho phép người dùng lưu trữ lịch sử các yêu cầu, giúp dễ dàng truy cập và sử dụng lại khi cần thiết.
React
- ReactJS là một thư viện giao diện người dùng JavaScript dựa trên thành
(Document Object Model) để cập nhật và render các component một cách hiệu quả.
- Components cho phép bạn chia giao diện người dùng thành các phần độc lập, có thể tái sử dụng và suy nghĩ về từng phần một cách riêng biệt
- Components có thể là các thành phần chức năng hoặc các thành phần lớp.
State được sử dụng để lưu trữ dữ liệu của các thành phần phải được hiển thị cho chế độ xem
Props được sử dụng để truyền dữ liệu và xử lý sự kiện cho các thành phần con
State giữ dữ liệu và có thể thay đổi theo thời gian
Props là bất biến—một khi đã đặt, props không thể thay đổi
Thành phần State chỉ có thể được sử dụng trong các thành phần lớp
Props có thể được sử dụng trong cả hai thành phần chức năng và lớp
Cập nhật Trình xử lý sự kiện thường cập nhật trạng thái
Thành phần cha mẹ đặt đạo cụ cho các thành phần con
Bảng 1.1: Phân biệt State và Props
- Các phương thức trong React Component Lifecycle có thể chia ra làm 3 pha chính là: Mounting, Updating và Unmounting.
Xử lý sự kiện trong các phần tử React tương tự như trên các phần tử DOM, nhưng có một số khác biệt về cú pháp cần lưu ý.
Các sự kiện React được đặt tên bằng camelCase, thay vì chữ thường.
Với JSX, bạn truyền một hàm làm trình xử lý sự kiện, thay vì một chuỗi.
- Một danh sách trong React thường đề cập đến một mảng dữ liệu cần được hiển thị dưới dạng một chuỗi các phần tử
- Để render một list trong React, bạn có thể sử dụng phương thức map() trên mảng và trả về một phần tử JSX cho mỗi item trong mảng.
- Trong react, thuộc tính key được sử dụng để xác định một cách duy nhất của các phần tử trong một danh sách khi rendering.
Không nên sử dụng chỉ số index làm khóa trong React, vì khi sắp xếp hoặc thay đổi giá trị tại vị trí index, sẽ ảnh hưởng đến hiệu suất của Forms và Validate, làm cho quá trình tìm kiếm trở nên chậm hơn.
* Việc sử dụng key nên sử dụng bên trong maps.
- Handle API with React là quá trình gửi và nhận dữ liệu từ API bên ngoài trong ứng dụng React.
Fetch API và Axios là hai công cụ hữu ích để gửi yêu cầu GET nhằm lấy dữ liệu từ server, giúp cập nhật trạng thái của thành phần React Ngoài ra, các yêu cầu POST, PUT hoặc DELETE có thể được sử dụng để gửi dữ liệu từ ứng dụng React lên server và thực hiện các thao tác thay đổi dữ liệu.
React Hook cho phép bạn sử dụng trạng thái và các tính năng khác của React trong các thành phần chức năng mà không cần viết lớp Tính năng này mang đến một cách tiếp cận ngắn gọn và dễ hiểu hơn để quản lý logic trạng thái và các tác dụng phụ trong các thành phần của bạn.
UseState là một hook trong React cho phép bạn thêm trạng thái vào các thành phần chức năng Hook này trả về một biến trạng thái cùng với một hàm để cập nhật giá trị của biến đó, giúp quản lý trạng thái một cách hiệu quả trong ứng dụng của bạn.
UseEffect là một hook trong React cho phép bạn thực hiện các tác dụng phụ trong các thành phần, như tìm nạp dữ liệu, thao tác với DOM hoặc đăng ký sự kiện.
TRIỂN KHAI DỰ ÁN XÂY DỰNG TRANG NGƯỜI QUẢN TRỊ CHO WEB TOEIC
Phân tích yêu cầu của hệ thống
Xây dựng được một webwite test Toeic để nâng cao trình độ tiếng anh và quản lý website
Website Toeic bao gồm các chức năng quản lý như: Đăng nhập, Đăng kí, xem thông tin tài khoản, thêm nội dung, cập nhật nội dung, xóa nội dung
3.1.2 Yêu cầu hệ thống thông tin
Hiển thị tất cả danh sách chủ đề của từ vựng Có chức năng:tìm kiếm, thêm, sửa , xóa chủ đề từ vựng
4 Màn hình 4: thêm chủ đề từ vựng
Tại màn hình này khi admin chọn nút thêm từ vựng hệ thống sẽ hiển thị bảng thêm từ vựng và sẽ submit lên bảng từ vựng
Thêm được từ vựng và hiển thị ở đầu danh sách
5 Màn hình 5: cập nhật chủ đề từ vựng
Trên màn hình này, quản trị viên có thể bắt đầu cập nhật các chủ đề đã chọn bằng cách nhấn vào nút chỉnh sửa, và màn hình sẽ hiển thị kết quả vừa được cập nhật.
Hiển thị bảng cập nhật đã có sẵn dữ liệu trước
Cập nhật được từ vựng và loading lại ngay lập tức
Xóa chủ đề từ vựng
Khi admin chọn nút xóa, hệ thống sẽ thông báo cho admin có chắc chắn muốn xóa chủ đề này không
Xóa được chủ đề từ vựng đã chọn và loading lại bảng chủ đề ngay lập tức
Bảng 3.1 Đặc tả chức năng Admin
Thiết kế dự án
3.2.1 Quy trình thiết kế giao diện Web bằng ngôn ngữ lập trình
Cài đặt các công cụ
- Công cụ kiểm tra API: Postman
- Thư viện hỗ trợ: ant design
- Công cụ lập trình: Visual Studio Code
- Tạo môi trường phát triển React
- Tạo các Components để quản lý file
- Cài đặt các thư viện hỗ trợ có liên quan khi thực hiện
- Thiết kế trực quan web Admin
Hình 3 1 Màn hình Đăng nhập
Hình 3 3 Màn hình trang chủ
Hình 3 4 Màn hình Quản lý tài khoản
Hình 3 5 Màn hình quản lý chủ đề từ vựng
Hình 3 7 Màn hình thêm từ vựng
Hình 3 8 Màn hình cập nhật từ vựng
Hình 3 9 Màn hình xóa từ vựng
Hình 3 10 Màn hình tìm kiếm