AngularJS - Aplikasi Keranjang Belanja

Hai, para pemrogram yang bersemangat! Hari ini, kita akan melangkah ke dalam perjalanan yang menarik untuk membuat sebuah aplikasi keranjang belanja menggunakan AngularJS. Sebagai guru ilmu komputer yang ramah di lingkungan sekitar Anda, saya sangat gembira untuk menghidahkan Anda dalam proses ini, bahkan jika Anda masih sangat baru dalam pemrograman. Jadi, ambil secangkir kopi (atau minuman favorit Anda), dan mari kita mulai!

AngularJS - Cart Application

Apa Itu AngularJS?

Sebelum kita mulai membangun aplikasi keranjang belanja kita, mari kitaambil waktu untuk memahami apa itu AngularJS. AngularJS adalah kerangka kerja JavaScript yang kuat yang membantu kita membuat aplikasi web dinamis. Itu seperti pisau swiss army untuk pengembang web, menyediakan alat-alat yang membuat hidup kita mudah dan kode kita lebih terorganisir.

Menyiapkan Proyek Kita

Langkah 1: Membuat Struktur HTML

mari kita mulai dengan membuat struktur HTML dasar untuk aplikasi keranjang belanja kita. Jangan khawatir jika Anda tidak familiar dengan HTML; saya akan menjelaskan setiap bagian saat kita maju.

<!DOCTYPE html>
<html ng-app="cartApp">
<head>
<title>My Shopping Cart</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="CartController">
<h1>My Shopping Cart</h1>
<!-- Kita akan menambahkan lebih banyak konten di sini nanti -->
</body>
</html>

Dalam struktur HTML ini, kita telah melakukan beberapa hal yang penting:

Kita telah menyertakan pustaka AngularJS menggunakan link CDN.
Kita telah menghubungkan file JavaScript kita sendiri (app.js) yang kita akan buat selanjutnya.
Kita telah menambahkan ng-app="cartApp" ke tag <html>, yang memberitahu AngularJS bahwa ini adalah elemen root aplikasi kita.
Kita telah menambahkan ng-controller="CartController" ke tag <body>, yang kita akan gunakan untuk mengelola logika keranjang kita.

Langkah 2: Membuat Aplikasi AngularJS

Sekarang, mari kita buat file app.js dan mengatur aplikasi AngularJS kita:

var app = angular.module('cartApp', []);

app.controller('CartController', function($scope) {
$scope.items = [];
$scope.total = 0;

$scope.addItem = function(item) {
$scope.items.push(item);
$scope.calculateTotal();
};

$scope.removeItem = function(index) {
$scope.items.splice(index, 1);
$scope.calculateTotal();
};

$scope.calculateTotal = function() {
$scope.total = $scope.items.reduce(function(sum, item) {
return sum + item.price;
}, 0);
};
});

mari kitauraikan ini:

Kita membuat sebuah modul AngularJS bernama 'cartApp'.
Kita tentukan sebuah pengendali bernama 'CartController'.
Dalam pengendali, kita mengatur array kosong untuk item kita dan variabel total.
Kita membuat fungsi untuk menambahkan item, menghapus item, dan menghitung total.

Membangun Antarmuka Pengguna

Langkah 3: Membuat Daftar Item

mari kita perbarui HTML kita untuk menampilkan item di keranjang kita:

<body ng-controller="CartController">
<h1>My Shopping Cart</h1>
<ul>
<li ng-repeat="item in items">
{{item.name}} - ${{item.price}}
<button ng-click="removeItem($index)">Remove</button>
</li>
</ul>
<p>Total: ${{total}}</p>
</body>

Di sini, kita menggunakan direktif AngularJS:

ng-repeat untuk mengulang item kita
{{}} untuk pengikatan data untuk menampilkan properti item
ng-click untuk memanggil fungsi removeItem saat tombol ditekan

Langkah 4: Menambahkan Item Baru

mari kita tambahkan sebuah formulir untuk memungkinkan pengguna menambahkan item baru:

<form ng-submit="addItem(newItem)">
<input type="text" ng-model="newItem.name" placeholder="Item name" required>
<input type="number" ng-model="newItem.price" placeholder="Price" required>
<button type="submit">Add to Cart</button>
</form>

Formulir ini menggunakan:

ng-submit untuk memanggil fungsi addItem saat formulir disubmit
ng-model untuk mengikatan nilai masukan ke objek newItem

Memperbaiki Aplikasi

Langkah 5: Menambahkan Kuantitas Item

mari kita modifikasi aplikasi kita untuk menangani kuantitas item:

app.controller('CartController', function($scope) {
// ... kode sebelumnya ...

$scope.addItem = function(item) {
var existingItem = $scope.items.find(function(i) {
return i.name === item.name;
});

if (existingItem) {
existingItem.quantity += 1;
} else {
item.quantity = 1;
$scope.items.push(item);
}
$scope.calculateTotal();
$scope.newItem = {};
};

$scope.removeItem = function(index) {
var item = $scope.items[index];
item.quantity -= 1;
if (item.quantity === 0) {
$scope.items.splice(index, 1);
}
$scope.calculateTotal();
};

$scope.calculateTotal = function() {
$scope.total = $scope.items.reduce(function(sum, item) {
return sum + (item.price * item.quantity);
}, 0);
};
});

Dan perbarui HTML kita:

<li ng-repeat="item in items">
{{item.name}} - ${{item.price}} x {{item.quantity}}
<button ng-click="removeItem($index)">Remove</button>
</li>

Kesimpulan

Selamat! Anda telah membuat sebuah aplikasi keranjang belanja yang berfungsi menggunakan AngularJS. Kita telah menutupi dasar-dasar pengaturan aplikasi AngularJS, membuat pengendali, menggunakan direktif untuk pengikatan data dan penanganan peristiwa, dan bahkan menambahkan fitur yang lebih canggih seperti mengelola kuantitas item.

Ingat, belajar pemrograman adalah perjalanan, dan ini hanya awal. Terus latih, eksperimen, dan terutama, nikmati prosesnya!

Berikut adalah tabel yang menggabungkan konsep utama AngularJS yang kita gunakan:

Konsep	Deskripsi	Contoh
Module	Kontainer untuk bagian-bagian berbeda dalam aplikasi	`angular.module('cartApp', [])`
Controller	Mengandung logika bisnis untuk bagian aplikasi	`app.controller('CartController', function($scope) {...})`
Scope	Objek yang merujuk ke model aplikasi	`$scope.items = []`
Directives	Memperpanjang HTML dengan atribut dan elemen khusus	`ng-repeat`, `ng-click`, `ng-submit`
Data Binding	Sinkronkan data antara model dan tampilan	`{{item.name}}`

Terus mengoding, dan ingat: setiap ahli pernah menjadi pemula. Anda melakukan sangat baik!

Credits: Image by storyset

Tutorial Sebelumnya:

AngularJS - Aplikasi Seret

Tutorial Seterusnya:

AngularJS - Aplikasi Terjemahan