Terjemahan ke Bahasa Indonesia

AngularJS - Aplikasi Login

Halo sana, para pengembang web yang berbakat! Hari ini, kita akan memulai sebuah perjalanan menarik untuk membuat aplikasi login menggunakan AngularJS. Sebagai guru ilmu komputer yang ramah di lingkungan sekitar Anda, saya disini untuk mengarahkan Anda melalui proses ini secara langkah demi langkah. Jangan khawatir jika Anda baru dalam pemrograman - kita akan mulai dari dasar dan naik turun. Pada akhir panduan ini, Anda akan memiliki aplikasi login yang berfungsi dan pemahaman kuat tentang konsep AngularJS. Jadi, mari kita masuk ke dalam!

AngularJS - Login Application

1. Pengenalan ke AngularJS

Sebelum kita mulai mengoding, mari kitaambil waktu untuk memahami apa itu AngularJS. Bayangkan Anda membangun sebuah rumah – AngularJS adalah seperti set alat terpercaya Anda, penuh dengan berbagai macam alat yang berguna untuk membuat pekerjaan Anda mudah. Itu adalah kerangka kerja JavaScript yang membantu kita membuat aplikasi web dinamis dengan usaha yang kurang.

1.1 Mengapa AngularJS?

AngularJS membawa beberapa keuntungan ke meja:

Dua arah pengikatan data
Pendekatan modular
Inyeksi dependensi
Direktif untuk memperluas HTML

Fitur ini mungkin terdengar seperti jargon teknis sekarang, tetapi jangan khawatir – kita akan menjelajahi mereka saat kita membangun aplikasi login kami.

2. Menyiapkan Proyek Kita

2.1 Membuat Struktur HTML

Mari kita mulai dengan membuat file HTML dasar untuk aplikasi login kita. Buka editor teks favorit Anda dan buat file baru dengan nama index.html. Ini adalah struktur awalnya:

<!DOCTYPE html>
<html ng-app="loginApp">
<head>
<title>Aplikasi Login AngularJS</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="LoginController">
<h1>Selamat Datang di Aplikasi Login Kita</h1>
<!-- Kita akan menambahkan formulir login disini -->
</body>
</html>

Dalam HTML ini, kita telah menyertakan pustaka AngularJS dari CDN dan menghubungkan ke file app.js (yang kita akan buat selanjutnya). Atribut ng-app dan ng-controller adalah direktif AngularJS yang kita akan menjelaskan segera.

2.2 Membuat Modul dan Controller AngularJS

Sekarang, mari kita buat file app.js di dalam direktori yang sama seperti file HTML kita:

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

app.controller('LoginController', function($scope) {
$scope.user = {
username: '',
password: ''
};

$scope.login = function() {
// Kita akan implementasikan ini nanti
};
});

Di sini, kita membuat modul AngularJS yang disebut loginApp dan controller yang disebut LoginController. Controller ini memiliki objek user dengan properti username dan password, serta fungsi login yang kita akan implementasikan nanti.

3. Membangun Formulir Login

Sekarang kita memiliki struktur dasar, mari kita tambahkan formulir login ke HTML kita:

<form ng-submit="login()">
<label for="username">Username:</label>
<input type="text" id="username" ng-model="user.username" required>

<label for="password">Password:</label>
<input type="password" id="password" ng-model="user.password" required>

<button type="submit">Login</button>
</form>

Formulir ini menggunakan direktif AngularJS seperti ng-submit dan ng-model. Direktif ng-submit memanggil fungsi login() kita saat formulir dikirimkan, sedangkan ng-model mengikat nilai input ke objek user dalam controller.

4. Implementasi Fungsi Login

Mari kita perbarui fungsi login dalam controller:

$scope.login = function() {
if ($scope.user.username === 'admin' && $scope.user.password === 'password') {
$scope.message = 'Selamat datang, ' + $scope.user.username + '!';
} else {
$scope.message = 'Username atau password salah.';
}
};

Fungsi ini memeriksa apakah username dan password yang dimasukkan cocok dengan nilai yang diberikan. Dalam aplikasi nyata, Anda biasanya akan memeriksa ini melawan database.

5. Menampilkan Hasil Login

Untuk menampilkan hasil login, tambahkan ini ke HTML Anda:

<p>{{message}}</p>

Kurung kurawal ganda {{}} adalah cara AngularJS untuk menampilkan data dari controller di tampilan.

6. Menambahkan Gaya

Marilah kita membuat aplikasi kita terlihat sedikit lebih menarik dengan beberapa CSS. Tambahkan ini ke file HTML Anda:

<style>
body {
font-family: Arial, sans-serif;
max-width: 300px;
margin: 0 auto;
padding: 20px;
}
input, button {
display: block;
margin: 10px 0;
width: 100%;
padding: 5px;
}
</style>

7. Aplikasi Lengkap

Ini adalah file index.html lengkap kami:

<!DOCTYPE html>
<html ng-app="loginApp">
<head>
<title>Aplikasi Login AngularJS</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<script src="app.js"></script>
<style>
body {
font-family: Arial, sans-serif;
max-width: 300px;
margin: 0 auto;
padding: 20px;
}
input, button {
display: block;
margin: 10px 0;
width: 100%;
padding: 5px;
}
</style>
</head>
<body ng-controller="LoginController">
<h1>Selamat Datang di Aplikasi Login Kita</h1>
<form ng-submit="login()">
<label for="username">Username:</label>
<input type="text" id="username" ng-model="user.username" required>

<label for="password">Password:</label>
<input type="password" id="password" ng-model="user.password" required>

<button type="submit">Login</button>
</form>
<p>{{message}}</p>
</body>
</html>

Dan ini adalah file app.js lengkap kami:

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

app.controller('LoginController', function($scope) {
$scope.user = {
username: '',
password: ''
};

$scope.login = function() {
if ($scope.user.username === 'admin' && $scope.user.password === 'password') {
$scope.message = 'Selamat datang, ' + $scope.user.username + '!';
} else {
$scope.message = 'Username atau password salah.';
}
};
});

8. Kesimpulan

Selamat! Anda telah membuat aplikasi login AngularJS pertama Anda. Kita telah meliputi banyak hal, mulai dari pengaturan modul dan controller AngularJS hingga membuat formulir dengan pengikatan data dua arah dan implementasi fungsi login sederhana.

Ingat, ini hanya permulaan saat ini. Sebagai Anda terus menjelajahi AngularJS, Anda akan menemukan fitur yang lebih kuat yang akan membantu Anda membuat aplikasi web kompleks dan interaktif.

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

Konsep	Deskripsi
Modul	Sebuah wadah untuk bagian yang berbeda dari aplikasi
Controller	Mengelola data dan perilaku aplikasi
Direktif	Memperluas HTML dengan atribut dan elemen khusus
Pengikatan Data Dua Arah	Sinkronisasi data antara model dan tampilan
Ekspresi	Mengakses variabel dan fungsi dari skop

Terus berlatih, tetap curiga, dan selamat coding!

Credits: Image by storyset

Tutorial Sebelumnya:

AngularJS - Aplikasi Bootstrap

Tutorial Selanjutnya:

AngularJS - Unggah File