Bài Lab + ASM ECMA WEB501 – Hoadv

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

1. Register (2 điểm), thành công chuyển trang Login

• Username
• Email
• Password

2. Login: (2 điểm): thành công chuyển trang admin và có nút Logout (xóa token trong localStorage)

• Email
• 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)