Đề thi thực hành kết thúc Module web front-end development with angular bootcamp Java - Trường Đại học Công nghiệp Thực phẩm Tp. Hồ Chí Minh

[r]

Đ  THI TH CỀ Ự  HÀNH K T THÚCẾ  MODULE

WEB FRONT­END DEVELOPMENT WITH ANGULAR BOOTCAMP  JAVA

Chu n bẩ ị

Clone d  án ự https://bit.ly/30uBo5Z và th c hi n theo các bự ệ ước hướng d n trong file README.md ẫ

đ  ch y server back­end ph c v  cho  ng d ng.ể ụ ụ ứ ụ

L u ý:ư  Có th  s  d ng POSTMAN đ  ki m tra xem các API có ho t đ ng t t hay không.ể ụ ể ể ộ ố

Yêu c uầ

T o m t  ng d ng front­end d a trên n n t ng Angular đ  qu n lý sách.  ng d ng này s  giao ạ ộ ứ ụ ự ề ả ể ả Ứ ụ ẽ

ti p v i ph n server back­end nh  đã chu n b  s n   trên qua RESTful. Các tính năng c a  ng ế ầ ẩ ị ẵ ủ ứ

d ng đụ ược mơ t  nh  sau:ả

Màn hình 1: Xem danh sách các cu n sáchố

Màn hình xem danh sách các cu n sách bao g m:ố

S  lố ượng sách

B ng các cu n sách v i các c t: S  th  t , Tên sách, Tác giả ố ộ ố ứ ự ả

Tên cu n sách đố ược hi n th  dể ị ướ ại d ng m t độ ường link, khi nh n vào link này thì s  đi ấ ẽ

đ n trang xem chi ti t thơng tin m t cu n sách (ế ế ộ ố Màn hình 2)

Nút “Thêm sách m i”: Khi nh n vào nút này thì s  đi đ n trang Thêm sách m i (ớ ấ ẽ ế Màn hình  3)

Đường link “s a”: Khi nh n vào link này thì s  đi đ n trang c p nh t thơng tin cu n sách ử ấ ẽ ế ậ ậ ố

Đường link “xoá”: Khi nh n vào link này thì s  đi đ n trang xố cu n sách tấ ẽ ế ố ương  ng ứ

(Màn hình 5)

Màn hình 2: Xem chi ti t m t cu n sáchế ộ ố

Màn hình xem chi ti t m t cu n sách bao g m:ế ộ ố

Thông tin cu n sách: Tên sách, Tác gi , Mơ tố ả ả

Nút “Xem danh sách”: Khi b m vào nút này thì s  đi đ n trang Xem danh sách các cu n ấ ẽ ế ố

sách

Màn hình 3: Thêm m t cu n sách m iộ ố ớ

Màn hình Thêm sách m i bao g m m t bi u m u v i các trớ ộ ể ẫ ường: Thông tin c a cu n sách: Tên sách, Tác gi , Mô tủ ố ả ả

Nút “Thêm sách”: Khi nh n nút này thì s  thêm m t cu n sách vào danh sách và hi n th  ấ ẽ ộ ố ể ị

thơng báo

Nút “Thốt”: Khi nh n vào nút này thì s  tr  v  trang hi n th  danh sách các cu n sách.ấ ẽ ề ể ị ố

Màn hình c p nh t m t cu n sách bao g m m t bi u m u v i các trậ ậ ộ ố ộ ể ẫ ường: Hi n th  s n các thông tin c a cu n sách: Tên sách, Tác gi , Mô tể ị ẵ ủ ố ả ả

Nút “C p nh t”: Khi nh n vào nút này thì c p nh t thơng tin sách và hi n th  thơng báoậ ậ ấ ậ ậ ể ị

Nút “Thốt”: Khi nh n vào nút này thì s  tr  v  trang hi n th  danh sách các cu n sách.ấ ẽ ề ể ị ố

Màn hình 5: Xố m t cu n sáchộ ố

Màn hình Xố m t cu n sách bao g m:ộ ố

Thơng tin c a cu n sách: Tên sách, Tác gi , Mơ tủ ố ả ả

Nút “Xố sách”: Khi nh n vào nút này thì xố sách và hi n th  thơng báoấ ể ị

Nút “Thốt”: Khi nh n vào nút này thì s  tr  v  trang hi n th  danh sách các cu n sách.ấ ẽ ề ể ị ố

Thang đi mể

UI/UX 10

Màn hình 3: Thêm m t cu n sách m iộ ố 20 Màn hình 4: C p nh t m t cu n sáchậ ậ ộ ố 20

Màn hình 5: Xố m t cu n sáchộ ố 10

n