AngularJS - Aplikasi Login

Hai sana, para pengembang web yang bersemangat! Hari ini, kita akan mengemban perjalanan yang menarik untuk membuat aplikasi login menggunakan AngularJS. Sebagai guru ilmu komputer yang ramah di lingkungan sekitar Anda, saya disini untuk mengorbit Anda melalui proses ini 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 yang kokoh tentang konsep AngularJS. Jadi, mari kita masuk ke dalam!

AngularJS - Login Application

1. Pengenalan ke AngularJS

Sebelum kita mulai mengoding, mari kitaambil sedikit waktu untuk memahami apa itu AngularJS. Bayangkan Anda membangun sebuah rumah - AngularJS seperti alat tangga yang dapat dipercaya Anda, penuh dengan berbagai jenis alat yang berguna untuk membuat pekerjaan Anda lebih mudah. Itu adalah kerangka kerja JavaScript yang membantu kita membuat aplikasi web dinamis dengan lebih sedikit usaha.

1.1 Mengapa AngularJS?

AngularJS membawa beberapa keuntungan ke meja:

Binding data dua arah
Pendekatan modular
Injeksi dependensi
Direktif untuk memperluas HTML

Fitur ini mungkin terdengar seperti jargon teknis saat ini, tetapi jangan khawatir - kita akan menjelajahi mereka saat kita membuat aplikasi login kita.

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 yang disebut index.html. Ini adalah struktur awalnya:

<!DOCTYPE html>
<html ng-app="loginApp">
<head>
<title>AngularJS Login Application</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 di sini -->
</body>
</html>

Dalam HTML ini, kita telah mencantumkan pustaka AngularJS dari CDN dan menghubungkan file app.js (yang kita akan buat berikutnya). Atribut ng-app dan ng-controller adalah direktif AngularJS yang kita akan menjelaskan sebentar lagi.

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 sedang membuat modul AngularJS yang disebut loginApp dan controller yang disebut LoginController. Controller ini memiliki objek user dengan properti username dan password, dan 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 disubmit, 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>

Kotak kurung ganda {{}} adalah cara AngularJS untuk menampilkan data dari controller di tampilan.

6. Menambahkan Gaya

Marilah kita membuat aplikasi kita terlihat sedikit lebih indah 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 kita:

<!DOCTYPE html>
<html ng-app="loginApp">
<head>
<title>AngularJS Login Application</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 kita:

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 mengatur modul dan controller AngularJS hingga membuat formulir dengan binding data dua arah dan implementasi fungsi login sederhana.

Ingat, ini hanya permulaan saat ini ketika menggunaikan AngularJS. Saat Anda terus melanjutkan perjalanan Anda, Anda akan menemukan fitur yang lebih kuat yang akan membantu Anda membuat aplikasi web interaktif yang kompleks.

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
Binding Data Dua Arah	Sinkronisasi data antara model dan tampilan
Ekspresi	Mengakses variabel dan fungsi dari lingkup

Tetap latih, tetap curiga, dan selamat pemrograman!

Credits: Image by storyset

Tutorial Sebelumnya:

AngularJS - Aplikasi Bootstrap

Tutorial Seterusnya:

AngularJS - Muat Naik Fail