Cara Membuat Keranjang Belanja Dengan AngularJs Part1

Keranjang belanja berfungsi untuk menyimpan barang atau produk yang sudah kita pilih dalam sebuah website marketplace. Dan pada kesempatan kali ini saya akan membahas tentang Cara Membuat Keranjang Belanja Dengan AngularJs Part1. Keranjang belanja akan saya buat dengan menggunakan angularjs yang tidak akan mereload halaman ketika kita memasukan barang atau produk ke keranjang belanja.

Untuk tampilan Cara Membuat Keranjang Belanja Dengan AngularJs Part1 saya menggunakan bootstrap versi 4. Dan berikut ini adalah struktur htmlnya.

<!doctype html>
<html lang="en" ng-app="myApp">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    
    <!-- Angularjs -->
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.5/angular.min.js"></script>

    <title>Cara Membuat Keranjang Belanja Dengan AngularJs</title>
  </head>
  <body ng-controller="myCon">
    <div class="container">
    <form method="post">
      <div class="row">
        <div class="col-md-12">
          <h1 class="text-center">Cara Membuat Keranjang Belanja Dengan AngularJs</h1>   
          <div class="row" ng-init="tampilProduk()">  
            <div class="col-md-3 produk text-center p-2" ng-repeat="produk in dataProduk">
              <div class="produk border p-5">
                <img src="gambar/{{produk.gambar}}" alt="" class="img-fluid">
                <h5>{{produk.nama}}</h5>
                <small>{{produk.harga}}</small>
                <br>
                <button type="button" class="btn btn-sm btn-success" 
                name="tambah_keranjang" ng-click="tambahKeranjang(produk)">
                Tambah ke Keranjang</button>
              </div>
            </div>
          </div>
        </div>
      </div>
      </form>
      <div class="row">
        <div class="col-md-12">
        <h3>Keranjang Belanja</h3>
          <table class="table">
          <thead>
            <tr>
              <th scope="col">No</th>
              <th scope="col">Nama</th>
              <th scope="col">Harga</th>
              <th scope="col">Qty</th>
              <th scope="col">Total</th>
              <th scope="col">Action</th>
            </tr>
          </thead>
          <tbody>
            <tr ng-repeat="cart in dataBeli">
              <th scope="row">1</th>
              <td>{{cart.produk_nama}}</td>
              <td>{{cart.produk_harga}}</td>
              <td>{{cart.produk_qty}}</td>
              <td>{{cart.produk_qty * cart.produk_harga}}</td>
              <td><button type="button" name="hps_produk" class="btn btn-xs btn-danger" 
              ng-click="hapusItem(cart.produk_id)">Delete</button></td>
            </tr>
            <tr>
              <td colspan="4" align="right">Total</td>
              <td colspan="2">{{setTotal()}}</td>
            </tr>
          </tbody>
        </table>
        </div>
      </div>
    </div>
    <script type="text/javascript" src="angular.js"></script>
  </body>
</html>

Untuk struktur html di atas saya sudah memberikan direktif ng-click atau ng-repeat dan lain sebagainya yang memang di perlukan. Dan juga mencetak datanya dengan kurung kurawel {{}}. Teman-teman bisa ikutin saja seperti di atas. Akan saya jelaskan lebih detailnya di artikel selanjutnya. Dan jangan lupa teman-teman siapkan database dengan design database seperti gambar di bawah ini. Jangan lupa isikan datanya juga untuk kita tampilkan.

Demikian Cara Membuat Keranjang Belanja Dengan AngularJs Part1. Kita akan lanjutkan untuk menampilkan produknya di pembahasan selanjutnya tentang Cara Membuat Keranjang Belanja Dengan AngularJs Part2.

Cara Membuat Keranjang Belanja Dengan AngularJs Part1

Kategori