Tạo đơn hàng và lưu giỏ hàng

Tạo đơn hàng và lưu giỏ hàng tức là gửi thông tin đơn hàng lên để tạo , sau đó gửi các sản phẩm đã được chọn trong giỏ hàng lên server để lưu

Yêu cầu

  • Tạo table đơn hàng và gửi đơn hàng lên server để lưu
  • Tạo table đơn hàng chi tiết và gửi sản phẩm trong giỏ hàng lên server để lưu
  • Trước khi thực hiện bài này, hãy xem và thực hiện theo bài này:

Chuẩn bị

  1. Vào folder project chạy lệnh 
    ng serve -o để chạy project
  2. Vào folder project chạy lệnh 
    json-server -w db.json

Vì thanh toán là chức năng chạy sau giỏ hàng, chỉ thực hiện khi user có chọn sản phẩm rồi quyết định thanh toán. Cho nên chúng ta sẽ chỉ chạy thanh toán từ trong giỏ hàng.

Mở file cart.component.html và code thêm nút thanh toán ở cuối

<!– cart.compoment.html –>
<a class=”btn btn-warning w-100″ href=”#” routerLink=”/thanhtoan” > Thanh toán</a>

Tạo component thanh toán

Chạy lệnh trong folder project: ng g c ThanhToan

Tạo routing cho component mới tạo

//app-routing.module.ts

Code view thanh toán

<!-- thanh-toan-component.html-->
<form #frm1="ngForm" class="container">
    <div class="row"> <div class="alert alert-success">THANH TOÁN ĐƠN HÀNG</div> </div>
    <div class="row mb-3">
        <div class="col-md-6">
            <label>Họ tên của quý khách</label>
            <input [(ngModel)]="hoten" name="ht" minlength="6" class="form-control">
        </div>
        <div class="col-md-6">
            <label>Email của quý khách</label>
            <input [(ngModel)]="email" name="e" type="email" class="form-control">
        </div>
    </div>
    <div class="row mb-3">
        <div class="col-md-6">
            <label>Địa chỉ giao hàng</label>
            <input [(ngModel)]="diachi" name="dc" minlength="10" class="form-control">
        </div>
        <div class="col-md-6">
            <label>Điện thoại</label>
            <input [(ngModel)]="dienthoai" name="dt" minlength="9" class="form-control">
        </div>
    </div>
    <div class="row mb-3">
        <button class="btn btn-primary w-25" type="button"> Lưu đơn hàng </button>
    </div>
</form>

Code trong component

Nhúng CartService và khai báo các biến hoten, email, diachi, dienthoai

// thanh-toan.component.ts
import { Component } from '@angular/core';
import { CartService } from '../cart.service';
@Component({ selector: 'app-thanh-toan',
  templateUrl: './thanh-toan.component.html',
  styleUrls: ['./thanh-toan.component.css']
})
export class ThanhToanComponent {
  constructor( private cartservice:CartService) {}
  hoten:string ="";
  email:string ="";
  diachi:string ="";
  dienthoai:string ="";
  //các hàm
}

Gửi thông tin đơn hàng lên server

Mỗi đơn hàng có các thông tin của người mua hàng: hoten, diachi, dienthoai, email….

Định nghĩa hàm taodonhang trong cart service để gửi lên server

//cart.service.ts
taoDonHang(hoten:string, diachi:string, dienthoai:string, email:string){
    return this.h.post("http://localhost:3000/donhang",
      {hoten:hoten, diachi:diachi, dienthoai:dienthoai, email:email },
      { observe: 'response' }
    )
}

Định nghĩa hàm taodonhang trong component

Trong thanh-toan.component.ts , code gọi hàm taodonhang trong service

taodonhang(){
  this.cartservice.taoDonHang(this.hoten,this.diachi,this.dienthoai,this.email).subscribe(
     response => {
       console.log(response); 
       console.log(response.body); //trong body có biến id của order mới chèn
       console.log(response.ok); //biến od=k =true là request ok       
     }
 );
}//taodonhang

Trong view, gọi hàm taodonhang

<!-- thanh-toan-component.html-->
<button class="btn btn-primary w-25" type="button" (click)="taodonhang()" >Lưu đơn hàng</button>

Test

Trong db.json sẽ có donhang mới

Gửi các sản phẩm trong giỏ hàng lên lên server

Định nghĩa hàm luuChiTietDonHang trong cart service để gửi lên server

//cart.service.ts
luuChiTietDonhang(idDH:number, item:ICart){
return this.h.post<any>(
  "http://localhost:3000/donhangchitiet",
{"iddh":idDH,"idsp":item.idsp,"tensp":item.tensp,"giasp":item.giasp,"soluong":item.soluong},
  { observe: 'response' }
)
}

Bổ sung hàm taodonhang trong component thanh toán

//thanh-toan.component.ts
taodonhang(){
this.cartservice.taoDonHang(this.hoten,this.diachi,this.dienthoai,this.email).subscribe(
     response => {
       console.log(response); 
       console.log(response.body); //trong body có biến id của order mới chèn
       console.log(response.ok); //biến od=k =true là request ok
       //lấy id của đơn hàng mới + lưu các sản phẩm trong cart lên server
       if (response.ok==false) { 
          alert(response.statusText); //hiện lỗi
       } else {
         let body:any = response.body; let idDH:number = Number(body.id); 
         this.cartservice.items.forEach( 
           item => this.cartservice.luuChiTietDonhang( idDH,  item).subscribe( res => console.log(res))
         )
       }//else
       location.href="/";
     }
 );
}//taodonhang

Test

Chọn thử vài sản phẩm + nhắp nút Thanh toán + nhập thông tin đơn hàng + nhắp nút Lưu đơn hàng

Xem trong db.json, sẽ thấy các sản phẩm trong giỏ hàng được gửi lên server

Các thao tác trên đây là để tạo đơn hàng và lưu giỏ hàng. Chức năng cần phải thực hiện sau khi user chọn sản phẩm và quyết định mua hàng

Sau đây là các bài trong seris thực tập Angular bạn cần thực hiện tuần tự từ trên xuống để có project nhé:

  1. Đôi điều về Angular – P1
  2. Đôi điều về Angular – P2
  3. Hiện sản phẩm bán chạy
  4. Hiện sản phẩm mới dùng Angular
  5. Hiện loại sản phẩm dùng Angular
  6. Hiện sản phẩm theo loại dùng Angular
  7. Hiện chi tiết sản phẩm dùng Angular

BÀI VIẾT LIÊN QUANXEM THÊM