KET QUA API TRA VE
4.1. API, cau tric source code va demo két qua API tra ve
4.1.3. Demo két gua API tra về
4.1.3.2. API xem chỉ tiết phiếu nhập hàng
Nhóm sé demo phiếu nhập có Id là 1 4.1.3.2.1. API trả về
G @ localhost:44302/api/taophieunhaps/1
id: 1, sochungTu: “KEESHR7",
ngayTao: "2021-@8-15T10:37:21.6128285",
tongTien: 175920000, ghichu: “Ship nhanh lên”, nguoiLapPhieu: "Tran Quy Vinh”,
- inhaCungCap: {
id: 5S,
ten: “Công Ty TNHH Thương Mai Dich Vu Delta Vina", St: "6969324065",
thongTin: ” chuyên cung cấp quần áo giầy dép các loại, rất hân hạnh được phục vụ quý khách", điaChi: "2/28/3 Đường TMT12, P. Trung Mỹ Tây, Q. 12, Tp. Hồ Chí Minh (TPHCM)", phieuNhapHangs: null,
sanPhams: null
}
- chiTietPhieunhaps: [ -{
id: 21,
tenSanPhamBienTheMauSize: "Đồng Hồ Nam Crnaira Japan C3879 XL xanh đương", soluongNhap: 152,
giaNhap: 15700, thanhTienNhap: 2355202, id_PhieuNhapHang: 1
id: 21,
tenSanPhamBienThemauSize: "Ddng HO Nam Crnaira Japan C3879 XL xanh đương", soluongNhap: 152,
giaNhap: 15722, thanhTienNhap: 4665299, id_PhieuNhapHang: 1
id: 30,
tenSanPhamBienThemauSize: "GIAy wi AIR TRANG XL vàng", soluongNhap: 252,
giaNhap: 31192, thanhTienNhap: 7775222, id_PhieuNhapHang: 1
id: 30,
tenSanPhamBienThemauSize: "GIAY Ni AIR TRANG XL vang", soluongNhap: 52,
giaNhap; 21122, thanhTienNhap: 1555222, id_PhieuNhapHang: 1
id: 31,
tenSanPhamBienThemauSize: "DOng HO Nam Crnaira Japan C3079 XL do", soluongNhap: 122,
giaNhap: 15722, thanhTienNhap: 1579222, id_PhieuNhapHang: 1
Hình 4.30. API lấy chỉ tiết phiếu nhập có lả là 1
63
4.1.3.2.2. Truy vấn ling va code
olivervinh@ gmail.com, 16 hourx 2o
T r t<F
1d_SanPham join 1 in _context.
sp.Id_Loai equals 1.Id join m in _context.mauSac
eId equals
tpn in _context.ChiTietPhieuNhapHangs -Id equals ctpn.Id_SanPhamBienThe select ne
{ 1đ = spbt.1d,
TenSanPhamBienTheMauSize =sp.Ten + ụ ụ + m.MaMau, GiaNhap = (decimal)sp.GiaNhap,
SoluongNhap = ctpn.SoluongNhap, ThanhTienNhap = ctpn.ThanhTienNhap, Id_PhieuNhapHang = (int)ctpn.Id_P uNhapHang }› from phieunhap in _conte
join us in _context.AppUsers on phieunhap.NguoiLapPhieu equaÌs join ncc in _context.Nhacungcap on phieunhap.1d_NhaCungCap equals nc p73 Cte
PhieuNhapHangs us
{
1đ = phieunhap.1d, GhiChu = phieunhap.GhiChu, NgayTao = phieunhap.NgayTao, SoChungTu = phieunhap.SoChungTu, TongTien = phieunhap.TongTi
NguoiLapPhieu th
NhaCungCap = new NỈ F
s.LastNane „
{ Id ncc.1d, Ten = ncc.Ten, Diachi = ncc.Diachi, ThongTin = ncc.ThongTin, SDT = ncc.SDT, Đệ
ChiTietPhieuNhaps p>) listDetail.where(s=>s.Id_PhieuNhapHang==id), 1
return await kb.FirstorDefaultAsync(s
Hinh 4.31. Truy van ling va code lay chi tiết phiếu nhập 4.2. Trang quản tri va cau tric source code
4.2.1. Cau tric source code
64
src app
admin ` containers default-layout
odal orders-table shared
detail
asp-net-users b ase
brands
nhacunc products su... Pe
Hinh 4.32. Cau tric source code trang quan tri
G cau tric source code nay, ta chia ra làm các component khác nhau tương ứng với cac bang trong CSDL.
Ngoài ra ta có:
Node-modules: chứa các thư viện phục vụ cho dy an.
65
App-routing: dùng đề cấu hình đường dẫn.
App.module.ts: khai báo các thư viện.
4.2.2. Các bước xây dung dé tai
4.2.2.1, Component thực hiện việc quản lý (CRUD)
Su dung angular CLI 6 terminal g6 lénh “ng g c” tén component mong muốn.
Sử dụng aneular CLI ở terminal 96 lénh “ng g service” tén service mong muốn.
Tạo component cha để hến thị tất cả thông tin và component con để thực hiện việc xóa hoặc sửa.
Ở trong service ta định nghĩa logic str ly cho component.
G trong component.ts ta sử dụng thư viện “httpClient” để gọi API từ phía BE.
Ở trong component.html sử dụng thư viện “Material Angular” hoặc là
“Bootstrap 4” để làm giao dién va hiển thị đữ liệu ra.
4.2.2.2. Component thực hiện mỗi việc hiển thị thông tin Tao component va service tương tự như các trên.
G trong component.ts ta sử dụng thư viện “httpClient” để gọi API từ phía BE.
Ở trong component.html ta hiển thị đữ liệu ra.
4.2.3. Demo mét s6 component 4.2.3.1. Component quan ly thong tin
4.2.3.1.1. Component quan ly nha cung cấp
nhacungca nhacung nhacungca
nhacung omponent.ts
nhacungcap.service.ts nhacungcaps.component.html
EHEICTK.LIE1.C1-72..21111221 a
66
Hình 4.33. Cầu trúc componet quản lý nhà cung cấp Service.ts
TS nhacungcap.service.ts *
> admin > containers > s > nhacungcz F50906 Pr EG eee ree) I9
1mport MatSort from
import MatTableDataSource from
import Observable from =
import environment from
@Injectable({
prov idedtn:
r Bi
export class NhaCungCapservice
@v Child(MatSort) sort: MatSort;
@ViewChild(MatPaginator) paginator: MatPaginator;
public dataSource = new MatTableDataSource<NhaCungCap>() 3 nhacungcap:NhaCungCap = new NhaCungCap()
constructor(public http:HttpClient) { } delete(id:< number) {
return this. http.delete(” ${environment .URL_APT}
ethttp() :Observable<any>{
*eturn this.http. get(environmerit.URL_APT+
}
getAllNhaCungCaps() { this.gethttp().subs
res->
this.dataSource.data = res as NhaCungCap| |;
export class NhaCungcap
id : number = @ ten: string sdt : string
thongTin ring=
diaChi:string
Hình 4.34. Service nhà cung cấp
NhaCungCaps.component.ts
67
nhacungcaps.component.ts M
¿ai 95 1— 0ù
@Component ( selector:
templateUr1;
styleUrls: [
)
NhaCungCapsComponent é OnInit, AfterViewInit {
@ViewChild(MatSort) sort: MatSort; 7
@ViewChild(MatPaginator) paginator: MatPaginator;
productList: any[ ];
service: NhaCungCapService, serviceToast: ToastServiceService, displayedColumns: string
,
ngOnInit(): void
. Service .getAl ]NhaCungCaps() ;
ist connection = new signalR.HubConnectionBuilder()
„conf1gureLogging(signa1R.LogLevel .Tnformation)
„w1thUr1( )
-build();
connection.start().then(f t @Q(f
console. log ;
}).catch( t (err) {
console.error(err.toString());
DE
connection.on( ;„ QO
-service.getAl1NhaCungCaps() ;
});
ngAfterViewInit(): void
.service.dataSource. sort -sort;
Hình 4.35. NhaCungCaps.component.ts nha cung cdp NhaCungCaps.component.html
68
src > app 3 admin > containers > v nhacungcaps > “* nhacungcaps.component.html > ® table.mat- button mat-button color= style= (click)=
mat-icon>add</mat-icon
p style= Thém< /p
button
div fxLayout fxLayoutAlign- style- mat-form-field fxFlex=
input matInput type= (keyup)= placeholder=
mat-form-field div
table mat-table [dataSource]= matSort class= style
ng-container matColumnDef=
th mat-header-cell *matHeaderCellDef mat-sort-header class= aan) td mat-cell *matcellDef= {{element.id}} </td
ng-container
ng-container matColumnDef=
th mat-header-cell *matHeaderCellDef mat-sort-header class=
td mat-cell *matCellDef= {{element.ten}} ‹/td ng-container
ng-container matColumnDef=
th mat-header-cell *matHeaderCellDef mat-sort-header class=
td mat-cell *matCel lDef= {{element.sdt}} </td ng-container
ng-container matColumnDef=
th mat-header-cell *matHeaderCellDef mat-sort-header class- Thông tin td mat-cell *matCellDef= {{element.thongTin}}
ng-container
ng-container matcolumnDef=
th mat-header-cell *matHeaderCellDef mat-sort-header class= Dia chi td mat-cell *matCellDef- {{element.diachi}} </td
ng-container
ng-container matColumnDef=
th mat-header-cell *matHeadercellDef class= Sửa, xóa</Lth ltd mat-cell *matCellDef=
button mat-icon-button (click)=
mat-icon>edit</mat-icon
Hình 4.36. NhaCungCaps.componenI.himl Nhà cung cấp 4.3. Trang người dùng và cau trúc source code
4.3.1. Cấu trúc source code
69
oO EXPLORER
⁄ CHENT
“4
§ c2c
main about blog checkout contact history home Info-user like login product-details register
= shop e model oe re elas blog
“Ai footer header OUTLINE TIMELINE
Hình 4.12. Cấu trúc source code trang người dùng
Ở cấu trúc source code nay, ta chia ra lam các component khác nhau tương ứng với các bảng trong CSDL,
Ngoài ra ta có:
Node-modules: chứa các thư viện phục vụ cho dy an.
70
App-routing: ding dé cau hình đường dẫn.
App.module.ts: khai bao cac thu vién.
4.3.1. Các bước xây dựng đề tài
4.3.1.1. Component thực hiện việc quản lý (CRUD)
Su dung angular CLI 6 terminal g6 lénh “ng g c” tén component mong muốn.
Sử dụng aneular CLI ở terminal 96 lénh “ng g service” tén service mong muốn.
Tạo component cha để hến thị tất cả thông tin và component con để thực hiện việc xóa hoặc sửa.
Ở trong service ta định nghĩa logic str ly cho component.
G trong component.ts ta sử dụng thư viện “httpClient” để gọi API từ phía BE.
Ở trong component.html sử dụng thư viện “Material Angular” hoặc là
“Bootstrap 4” để làm giao dién va hiển thị đữ liệu ra.
4.3.1.2. Component thực hiện mỗi việc hiển thị thông tin Tao component va service tương tự như các trên.
G trong component.ts ta sử dụng thư viện “httpClient” để gọi API từ phía BE.
Ở trong component.html ta hiển thị đữ liệu ra.