Bài Lab + ASM WEB208 Angular – Hoadv

Code base đi thi : https://github.com/vanhoa690/web208-angular-base

Link github: https://github.com/vanhoa690/angular-su24

Video CRUD Youtube: https://www.youtube.com/watch?v=KruN4sEbML0

Video Login/Register Youtube: https://www.youtube.com/watch?v=tu21Q5-YPrM

Deploy https://angular-su24.vercel.app/admin/products/list

Link Code tham khảo: https://hoavn.com/angular/lap-trinh-front-end-framework-1-angular-web-208-hoadv

ASM2 WEB 208 Angular (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 nodejs hoăc json server: 

https://github.com/vanhoa690/web208-angular-base

–   npm i

–   npm start

Model Product:

• Title: string, required
• Price: number, required, min > 0
• Desc: text, required
• Active: Boolean (check box)

Tổng điểm : thi 7đ + 3đ nếu nộp project xưởng bao gồm tính năng đấu giá website (Giao diện UI đẹp mắt : +0,5 đ )

Câu 1: Xây dựng chức năng hiển thị và xoá (1,5 đ)

–   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 (1,5đ)

–   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 (1,5đ)

–   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,5 đ)

–   Đă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

–  Guard Admin: Khi xóa token đi thì ko truy cập route cần quyền admin như thêm, sửa xóa được

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
• Confirm Password

2. Login: (2 điểm): thành công chuyển trang admin

• Email
• Password

3. Validate + show Error tương ứng + show thông báo call API thành công hoặc error : 1 điểm

• Email (Required, định dạng email)
• Password: Required, Min 6 ký tự

4. Guard Admin, chặn truy cập Admin khi chưa đăng nhập (1 điểm)

5. Hiển thị trang User List và có button Xóa User (1 điểm)

6.Header hiển thị thông tin user sau khi đăng nhập (login xong ẩn link register + login và logout được) (1 điểm)

7. Giao diện đẹp ( 1 đ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
  • Description: Text Area
  • Price: Number
  • Category: Select box
  • isShow: Check box
• Create Product: – 2 điểm
• Edit Product : – 2 điểm
• Validate: – 2 điểm
  • Titte Required, Min 6 ký tự
  • Image Required
  • Price Required, Min > 0
  • Category: Required
  • Show Product: default True
• 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
• Lấy data Categories trong select box Category từ Database – 1 điểm
• Giao diện đẹp – 1 điểm

ASM 1: Xây dựng Giao diện trang Homepage và hoàn thiện tính năng màn list

1. Làm xong 4 bài lab: 3 điểm

2. Tham gia workshop tailwind: 1 – 2 điểm

3. Xây dựng giao diện Hompage: 2 điểm – Gồm có

• Header: Có Search Product, Link Login, Register

• Product List: Link Product Detail

• Footer

4. Giao diện UI đẹp mắt (1 điểm)

5. Hoàn thiện tính năng màn Product List trong Admin: 2 điểm

• Có tính năng Search Tìm kiếm Product, Phân trang

Lab 3: Xây dựng Giao diện Trang Admin hiển thị danh sách sản phẩm (table) + Xóa sản phẩm

• Layout Amin gồm có Component Sidebar + Content – 1 điểm
• Route: admin/products/list (app.routes.ts) – 1 điểm
• Table: Hiển thị danh sách sản phẩm bao gồm thuộc tính sản phẩm đó + Button View (show product detail) + Edit + Delete – 2 điểm
• Product: Title, Desc, Image, Price, isShow…
• Service call API get All Product: GET /products sử dụng json-server hoặc nodejs ( dùng nodejs làm BE sẽ dc + điểm) (thông báo thành công hoặc lỗi) – 2 điểm
• Xóa sản phẩm có confirm và thông báo thành công hoặc lỗi – 2 điểm
• Giao diện UI đẹp mắt – 2 điểm

Lab 4: Xây dựng Giao diện Trang Product Detail

• Layout Public gồm có Component Header + Component Footer + Content – 2 điểm
• Route: products/:id (app.routes.ts) – 1 điểm
• Hiển thị thông tin sản phẩm Product: Title, Desc, Image, Price (UI đẹp mắt) – 2 điểm
• Có nút đấu giá và nhập được giá sẽ đấu giá vào – 1 điểm
• Service call get Product Detail : GET /products/:id sử dụng json-server hoặc nodejs ( dùng nodejs làm BE sẽ dc + điểm) (thông báo thành công hoặc lỗi chuyển trang Not Found nếu ko tìm thấy) – 2 điểm
• Giao diện UI đẹp mắt – 2 điểm