Indonesia

Tutorial AngularJS

Aplikasi AngularJS

AngularJS - Aplikasi Keranjang Belanja

Hai, para programer pemula! Hari ini, kita akan memulai sebuah perjalanan menarik untuk membuat aplikasi keranjang belanja menggunakan AngularJS. Sebagai guru ilmu komputer tetangga yang ramah, saya sangat senang untuk mengarahkan Anda melalui proses ini, bahkan jika Anda sangat baru dalam pemrograman. Jadi, ambil secangkir kopi (atau minuman favorit Anda), dan mari kita masuk ke dalamnya!

AngularJS - Cart Application

Apa Itu AngularJS?

Sebelum kita mulai membuat aplikasi keranjang belanja kita, mari kitaambil sedikit waktu untuk memahami apa itu AngularJS. AngularJS adalah kerangka kerja JavaScript yang kuat yang membantu kita membuat aplikasi web dinamis. Itu seperti pisau swis yang bisa digunakan untuk berbagai hal, 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 melanjutkan.

<!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 penting:

  1. Kita menyertakan pustaka AngularJS menggunakan link CDN.
  2. Kita menghubungkan file JavaScript kita sendiri (app.js) yang kita akan buat selanjutnya.
  3. Kita menambahkan ng-app="cartApp" ke tag <html>, yang memberitahu AngularJS bahwa ini adalah elemen root aplikasi kita.
  4. Kita 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:

  1. Kita membuat sebuah modul AngularJS bernama 'cartApp'.
  2. Kita tentukan sebuah kontroler bernama 'CartController'.
  3. Dalam kontroler, kita mengatur array kosong untuk item kita dan variabel total.
  4. 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:

<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)">Hapus</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 diklik

Langkah 4: Menambahkan Item Baru

mari kita tambahkan formulir untuk memungkinkan pengguna menambahkan item baru:

<form ng-submit="addItem(newItem)">
<input type="text" ng-model="newItem.name" placeholder="Nama item" required>
<input type="number" ng-model="newItem.price" placeholder="Harga" required>
<button type="submit">Tambah ke Keranjang</button>
</form>

Formulir ini menggunakan:

  • ng-submit untuk memanggil fungsi addItem saat formulir disubmit
  • ng-model untuk mengikatkannya nilai input ke objek newItem

Menengahkan Aplikasi

Langkah 5: Menambahkan Kuantitas Item

mari kita modifikasi aplikasi kita untuk mengelola 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)">Hapus</button>
</li>

Kesimpulan

Selamat! Anda baru saja membuat aplikasi keranjang belanja yang berfungsi menggunakan AngularJS. Kita telah meliputi dasar-dasar pengaturan aplikasi AngularJS, membuat kontroler, 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 hanyalah awal. Teruslatihan, eksperimen, dan terutama, bersenang-senang dengan itu!

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

Konsep Deskripsi Contoh
Module Tempat untuk berbagai bagian 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 pandangan {{item.name}}

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

Credits: Image by storyset

Tutorial Sebelumnya:
AngularJS - Aplikasi Seret
Tutorial Selanjutnya:
AngularJS - Aplikasi Terjemahan