Cara Membuat Shopping Cart Menggunakan AngularJS Part 1

Halo teman teman pada tutorial kali ini saya akan menjelaskan tentang Cara Membuat Shopping Cart Menggunakan AngularJS Part 1,  mungkin didalam sebuah website ecommerce atau website penjualan mungkin Shopping Cart atau keranjang belanja tidak asing lagi bagi kita, karena hampir semua website ecommerce atau penjualan telah mengunakan yang namanya shopping cart.

Shopping Cart itu juga dapat diartikan sebagai perhitungan saat kita memilih barang atau produk pada sebuah aplikasi, dan Shopping Cart juga juga bisa dapat memudahkan dalam menghitung jumlah product yang kita beli pada sebuah aplikasi.

Oke teman teman kita langsung saja, masuk ke study casenya tentang Cara Membuat Shopping Cart Menggunakan AngularJS Part 1, contoh Shopping Cart yang akan kita buat nantinya yaitu seperti dibawah ini,

Tapi pada tutorial Cara Membuat Shopping Cart Menggunakan AngularJS Part 1 kita akan membuat tampilan productnya terlebih dahulu, dan untuk pembuatan Shopping Cart nya akan saya bahas pada Cara Membuat Shopping Cart Menggunakan AngularJS Part 2

Nah kita langsung saja membuat tampilan productnya, terlebih dahulu, dan silahkan teman teman simpan script dibawah ini dengan nama index.html

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
      <title>Cara Membuat Shopping Cart Menggunakan AngularJS </title>
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
      <link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'>
      <link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css'>
      <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container" ng-app="myApp" ng-controller="myCtrl">   
<h2>Products</h2>
<div class="row">
  <div class="col-md-9">
    <div class="row">
    <div class="col-sm-6 col-md-3 text-center" ng-repeat="item in items">
      <div class="thumbnail">
        <div class="caption">
          <h3>{{ item.name }} </h3>
          <p>{{ item.id }} </p>
          <p>Rp {{ item.price | number:0 }}</p>
          <button ng-click="addItem(item)" class="btn btn-sm btn-info">
               Add to cart
            <i class="fa fa-shopping-cart"></i>
          </button>
        </div>
      </div>
    </div>
    </div>
  </div>

  <div class="col-md-3">
    <h2>Shopping Cart</h2>
    <table class="table table-hover table-size">
      <thead>
        <th>ID</th>
        <th>Nama Product</th>
        <th>Harga</th>
        <th>Banyak</th>
      </thead>
      <tbody id="ok">
        <tr ng-repeat="myItem in myItems | reverse">
          <td>{{ myItem.id }}</td>
          <td>{{ myItem.name }}</td>
          <td>Rp {{ myItem.price }}</td>
          <td>{{ myItem.count }}</td>
        </tr>
      </tbody>
    </table>
    <span class="text-center" ng-show="myItems.length == 0">
      Silahkan Pilih Product
    </span>
    <div class="clearfix"></div>
    <span class="pull-right alert alert-success">Total: Rp {{ !totalPrice ? "0" : totalPrice | number:0 }}</span>
    <button ng-click="removeBasket()" ng-show="myItems.length > 0" class="pull-left alert alert-danger">Hapus</button>
  </div>
</div>
</div>

<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js'></script>
<script src='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.2/angular.min.js'></script>
<script src="controller.js"></script>
</body>
</html>

Oke teman teman cukup sekian dulu tutorial saya kalini ini tentang Cara Membuat Shopping Cart Menggunakan AngularJS Part 1

Semoga bermanfaat, Terimakasih