Indonesia

Tutorial AngularJS

Aplikasi AngularJS

Panduan Awal untuk Form Pemesanan AngularJS

Hai teman-teman, para ahli AngularJS masa depan! Hari ini, kita akan memulai perjalanan menarik ke dunia form pemesanan AngularJS. Jangan khawatir jika Anda belum pernah menulis baris kode sebelumnya - kita akan memulai dari dasar dan membangun ke atas. Pada akhir panduan ini, Anda akan mampu membuat form pemesanan dinamis seperti seorang ahli!

AngularJS - Order Form

Apa Itu AngularJS?

Sebelum kita mendalam ke form pemesanan, mari kita mengerti apa itu AngularJS. Bayangkan Anda membangun sebuah rumah. HTML seperti batu dan mortar, CSS seperti cat dan hiasan, dan AngularJS? Well, itu seperti sistem rumah cerdas yang membuat segala sesuatu interaktif dan dinamis.

AngularJS adalah kerangka kerja JavaScript yang memperpanjang HTML dengan atribut baru, membuatnya sempurna untuk membuat aplikasi web dinamis. Itu seperti memberikan superpower ke HTML Anda yang biasanya statis!

Menyiapkan Proyek

Pertama-tama, mari kita siapkan proyek kita. Kita akan memasukkan pustaka AngularJS ke dalam file HTML kita. Berikut cara yang kita lakukan:

<!DOCTYPE html>
<html ng-app="orderApp">
<head>
<title>Form Pemesanan AngularJS Saya</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body>
<!-- Form kita akan berada di sini -->
<script src="app.js"></script>
</body>
</html>

Dalam kode ini, kita melakukan beberapa hal penting:

  1. Kita menambahkan ng-app="orderApp" ke tag <html>. Ini memberitahu AngularJS bahwa ini adalah elemen root dari aplikasi kita.
  2. Kita memasukkan pustaka AngularJS menggunakan tag <script>.
  3. Kita juga memasukkan file JavaScript kita sendiri (app.js) di mana kita akan menulis kode AngularJS kita.

Membuat Modul dan Controller AngularJS

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

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

app.controller('OrderController', function($scope) {
$scope.order = {
items: [],
total: 0
};
});

Berikut apa yang terjadi:

  1. Kita membuat modul AngularJS bernama 'orderApp'.
  2. Kita mendefinisikan controller bernama 'OrderController'.
  3. Dalam controller, kita menginisialisasi objek order di $scope. Objek ini akan menahan item pemesanan dan total.

Membangun Form Pemesanan

Sekarang, mari kita buat form pemesanan kita di HTML:

<div ng-controller="OrderController">
<h2>Place Your Order</h2>
<form>
<label>Nama Item: <input type="text" ng-model="newItem.name"></label><br>
<label>Harga: $<input type="number" ng-model="newItem.price"></label><br>
<button ng-click="addItem()">Tambah Item</button>
</form>

<h3>Ringkasan Pemesanan</h3>
<ul>
<li ng-repeat="item in order.items">
{{item.name}} - ${{item.price}}
<button ng-click="removeItem($index)">Hapus</button>
</li>
</ul>
<p>Total: ${{order.total}}</p>
</div>

mari kitauraikan ini:

  1. Kita menggunakan ng-controller untuk menghubungkan bagian ini dengan OrderController.
  2. Kita memiliki field input untuk nama item dan harga, menggunakan ng-model untuk membind mereka ke newItem.name dan newItem.price.
  3. Kita memiliki tombol "Tambah Item" yang memanggil fungsi addItem() saat ditekan.
  4. Kita menggunakan ng-repeat untuk menampilkan setiap item dalam pemesanan.
  5. Setiap item memiliki tombol "Hapus" yang memanggil fungsi removeItem().
  6. Kita menampilkan jumlah total pemesanan.

Implementasi Logika Controller

Sekarang, mari kita tambahkan fungsi yang diperlukan ke controller kita:

app.controller('OrderController', function($scope) {
$scope.order = {
items: [],
total: 0
};

$scope.newItem = {name: '', price: ''};

$scope.addItem = function() {
$scope.order.items.push({
name: $scope.newItem.name,
price: parseFloat($scope.newItem.price)
});
$scope.calculateTotal();
$scope.newItem = {name: '', price: ''};
};

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

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

Berikut apa yang dilakukan setiap fungsi:

  1. addItem(): Menambahkan item baru ke pemesanan, menghitung total baru, dan mengatur ulang field input.
  2. removeItem(): Menghapus item dari pemesanan dan menghitung total ulang.
  3. calculateTotal(): Menghitung jumlah total harga semua item dalam pemesanan.

Menyempurnakan Pengalaman Pengguna

Untuk membuat form kita lebih user-friendly, mari kita tambahkan validasi:

<form name="orderForm" ng-submit="addItem()" novalidate>
<label>Nama Item: <input type="text" ng-model="newItem.name" required></label><br>
<label>Harga: $<input type="number" ng-model="newItem.price" min="0" step="0.01" required></label><br>
<button type="submit" ng-disabled="orderForm.$invalid">Tambah Item</button>
</form>

Dan perbarui controller kita:

$scope.addItem = function() {
if ($scope.orderForm.$valid) {
$scope.order.items.push({
name: $scope.newItem.name,
price: parseFloat($scope.newItem.price)
});
$scope.calculateTotal();
$scope.newItem = {name: '', price: ''};
$scope.orderForm.$setPristine();
}
};

Perubahan ini:

  1. Menambahkan validasi form untuk memastikan semua field terisi dan harga adalah angka positif.
  2. Menonaktifkan tombol "Tambah Item" saat form invalid.
  3. Menambahkan item hanya jika form valid.
  4. Mengatur form keadaan awal setelah menambahkan item.

Kesimpulan

Selamat! Anda telah membuat form pemesanan AngularJS yang berfungsi. Kita telah melihat dasar-dasar AngularJS, termasuk modul, controller, two-way data binding, dan validasi form. Ingat, latihan membuat ahli, jadi jangan khawatir untuk mencoba dan memperluas form ini. Mungkin tambahkan fitur diskon atau kemampuan menyimpan pemesanan? Kemungkinan adalah tak terbatas!

Berikut adalah tabel yang menguraikan direktif AngularJS utama yang kita gunakan:

Direktif Tujuan
ng-app Menentukan elemen root dari aplikasi AngularJS
ng-controller Menentukan controller untuk sebuah bagian aplikasi
ng-model Membuat binding data dua arah
ng-click Menentukan fungsi yang akan dijalankan saat elemen ditekan
ng-repeat Mengulang elemen untuk setiap item dalam koleksi
ng-submit Menentukan fungsi yang akan dijalankan saat form disubmit
ng-disabled Menonaktifkan elemen berdasarkan kondisi

Selamat coding, dan ingat - setiap ahli pernah menjadi pemula. Terus latih, dan Anda akan menjadi master AngularJS dalam waktu singkat!

Credits: Image by storyset

Tutorial Sebelumnya:
AngularJS - Menu Pergantian
Tutorial Selanjutnya:
AngularJS - Tab Pencarian