Cara Membuat Shopping Cart Menggunakan AngularJS Part 1
Halo teman teman di panduan kali ini saya akan menjelaskan mengenai Cara Merancang Shopping Cart Menggunakan AngularJS Part 1, mungkin didalam sebuah laman ecommerce atau laman penjualan mungkin Shopping Cart atau keranjang belanja tak asing lagi untuk kita, karena hampir segala laman ecommerce atau penjualan telah mengunakan yang namanya shopping cart.
Shopping Cart itu pun dapat diartikan selaku perhitungan dikala kita memilih barang atau produk di sebuah program, dan Shopping Cart pun pun dapat dapat mempermudah pada menghitung jumlah product yang kita beli di sebuah program.
Oke teman teman kita seketika saja, masuk ke study casenya mengenai Cara Merancang Shopping Cart Menggunakan AngularJS Part 1, contoh Shopping Cart yang akan kita bikin nantinya yaitu seperti dibawah ini,
akan tetapi di panduan Cara Merancang Shopping Cart Menggunakan AngularJS Part 1 kita akan membangun tampilan productnya terlebih dahulu, dan bagi penyusunan Shopping Cart nya akan saya bahas di Cara Membuat Shopping Cart Menggunakan AngularJS Part 2
Nah kita seketika saja membangun 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 Merancang 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 { 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 { 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 lumayan sekianlah dulu panduan saya kalini ini mengenai Cara Merancang Shopping Cart Menggunakan AngularJS Part 1
Semoga bermanfaat, Terimakasih
Cara Membuat Shopping Cart Menggunakan AngularJS part 2
Sumber https://kursuswebsite.org
