[r]
Trang 1Đ THI TH C Ề Ự HÀNH K T THÚC Ế MODULE WEB FRONTEND 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 backend 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 frontend 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 backend 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 ử ấ ẽ ế ậ ậ ố
tương ng (ứ Màn hình 4)
Trang 2Đường link “xoá”: Khi nh n vào link này thì s đi đ n trang xoá 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 “Thoá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 4: C p nh t m t cu n sáchậ ậ ộ ố
Trang 3Mà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 “Thoá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: Xoá m t cu n sáchộ ố
Màn hình Xoá 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 “Xoá sách”: Khi nh n vào nút này thì xoá sách và hi n th thông báoấ ể ị Nút “Thoá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 ể
Trang 4Màn hình 3: Thêm m t cu n sách m iộ ố ớ 20