Đang tải... (xem toàn văn)
[r]
(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 ử ấ ẽ ế ậ ậ ố
(2)Đườ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.ấ ẽ ề ể ị ố
(3)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
(4)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