Video CRUD Product + Register/ Login: https://www.youtube.com/watch?v=BZnYPpH7euo
Code base: https://github.com/vanhoa690/web501-ecma-react-base
Link Download Souce Code: https://hoavn.com/download/ecma-asm-2
Link Code tham khảo: https://hoavn.com/ecmascript-es6/lap-trinh-ecmascript-web501-hoadv
ASM2 WEB 501 ECMA (60’)
Mọi hành vi copy, sao chép và nộp bài muộn đều bị trừ điểm hoặc là 0 điểm
Sử dụng source base để thực hiện bài làm, BE dùng json server: https://github.com/vanhoa690/web501-ecma-react-base
– npm i
– npm start
Model Product:
- Title: string, required
- Price: number, required, min > 0
- Description: string
Câu 1: Xây dựng chức năng hiển thị và xoá (2 đ)
– Hiển thị danh sách sản phẩm đầy đủ thông tin dạng bảng
– Tính năng xoá sản phẩm có confirm + thông báo
Câu 2: Xây dựng tính năng thêm (2 đ)
– Thêm sản phẩm thành công, thông báo và chuyển hướng về trang danh sách và cập nhật lại danh sách.
– Validation dữ liệu và show error tương ứng input theo model Product
Câu 3: Xây dựng tính năng sửa (2 đ)
– Sửa sản phẩm thành công, thông báo chuyển hướng về trang danh sách và cập nhật lại danh sách.
– Validation dữ liệu và show error tương ứng input theo model Product
Câu 4: Register and Login (2 đ)
– Đăng ký thành công, thông báo và điều hướng sang trang đăng nhập
– Đăng nhập thành công, lưu accessToken (token) sau đăng nhập vào localStorage
– Validation form đăng ký, đăng nhập: email và password required, đúng định dạng email
– Phân quyền: Khi xóa token đi thì ko truy cập route cần quyền admin như thêm, sửa xóa được
Câu 5: Giao diện đẹp mắt + Tham gia tutor ECMA 20h30 tối nay 7/6 có điểm danh (2 đ)
Lab 7+ 8: Xây dựng Giao diện và tính năng Register + Login
- Register (2 điểm), thành công chuyển trang Login
- Username
- Password
2. Login: (2 điểm): thành công chuyển trang admin và có nút Logout (xóa token trong localStorage)
- Password
3. Validate + show Error tương ứng + show thông báo call API thành công hoặc error : 2 điểm
- Email (Required, định dạng email)
- Password: Reuired, Min 6 ký tự
4. Sử dụng AdminLayout để protect route admin (check token lưu trong localStorage): 2 điểm
5. Giao diện đẹp có Sidebar (AdminLayout) + Sử dụng react-hook-form (https://react-hook-form.com/) + Chấm sớm trước 5/6 ( 2 điểm)
Lab 5+ 6: Xây dựng Giao diện và tính năng Create + Edit Product
- Model Product:
- Titte: Text
- Image: Text
- Price: Number
- Create Product: – 2 điểm
- Edit Product : – 2 điểm
- Validate: – 2 điểm
- Titte Required
- Image Required
- Price Required, Min > 0
- Show Error tương ứng, thông báo thành công, báo lỗi API (nếu có) và chuyển trang Admin Product List – 2 điểm
- Sử dụng React Hook Form: 1 điểm (https://react-hook-form.com/)
- Giao diện đẹp – 1 điểm
ASM 1
Làm xong 4 bài lab: 4 điểm
Xây dựng trang Homepage ( có header, footer, danh sách products (card)): 3 điểm
Tham gia workshop tailwind: 1 – 2 điểm
Giao diện đẹp mắt: 1- 2 điểm
Lab 4:
Xây dựng trang Product Detail: 4 điểm
Sử dụng Component Header : 1 điểm
Sử dụng Component Footer: 1 điểm
Xây Route đến page: List, Detail: 1 điểm
Hiển thị thông báo nếu có lỗi, ko tìm thấy ID Product (404 Not Found): 1 điểm
Giao diện UI đẹp mắt: 2 điểm
Lab 3:
Chạy Product: BE json server + FE React (3 điểm)
Hiển màn List: Title, Image, Price, Description + Button Delete (3 điểm)
Giao diện UI đẹp mắt: (2 điểm)
Hiện thị lỗi (API URL lỗi), xóa xong hiện thị thông báo ( 2 điểm)