Menambah Fungsi Login pada AngularJs (Part 3 Aplikasi Pendataan Karyawan)

Halo! kembali lagi pada tutorial ini. sekarang kita akan mencoba melakukan request api login pada aplikasi monaca x angularjs. pada project kali ini kita akan meneruskan project file dari tutorial ini.

1. Menambahkan file request.js

sekarang kita akan membuat file request.js pada project file yang sudah kita buat. file ini berfungsi sebagai tempat untuk membuat fungsi request api yang akan digunakan. kamu dapat memisahkan fungsi request ini sesuai dengan banyaknya controller atau berdasarkan model atau bisa dijadikan satu, tergantung kebutuhan dan kenyamanan developer. pada tutorial ini kita akan menjadikan file request ini sebagai satu tempat dari semua fungsi request pada angularjs. kemudian kita akan gunakan fungsi request login untuk melakukan request api

Mari kita buat fungsi ini pada www/app/services/ dengan nama request.js. tambahkan kode ini dalam file tersebut

const baseController = "http://127.0.0.1:8000/"
const apiBaseController = baseController+"api/"
const login = baseController + "api-token-auth/";
var TokenUser = "";
module.factory('LoginService', function ($http) {
return {
login:
function (post)
{
var path = login;
return $http
.post(path, post)
.then(function (response) {
return response.data;
});
},
};
});

Lalu kita kenalkan file tersebut pada index.html

<script src="app.js"></script>
<script src="app/services/request.js"></script>

2.Menambahkan fungsi request pada login controller

pada tutorial sebelumnya, app.js sudah memiliki module LoginController. kemudian kita akan menambahkan logic fungsi login dan logout pada controller tersebut

module.controller('LoginController', function(LoginService, $rootScope) {
let ctrl = this;
ctrl.logout = function () {
TokenUser = "";
$rootScope.tokenExist = false;
}
ctrl.login = function () {
let username = ctrl.username;
let password = ctrl.password;
var post = { username: username, password: password };
LoginService.login(post).then(function (response) {
console.log('response', response);
if (response.token) {
TokenUser = response.token;
$rootScope.tokenExist = true;
ons.notification.alert('Logged in');
}
}, (errorRequest) => {
console.log('errorRequest', errorRequest); ons.notification.alert('Incorrect username or password.');
});
}});

Dapat dilihat kita menambahkan ctrl.logout dan ctrl.login. ctrl berguna untuk mengenalkan fungsi pada sistem agar fungsi tersebut dapat digunakan pada frontend, begitu sebaliknya, ctrl juga dapat berguna untuk mengambil data seperti pada ctrl.username. kita dapat perhatikan bahwa terdapat LoginService, loginservice tersebut akan memanggil factory LoginService pada request.js dan menjalankan fungsi login membawa parameter (post). fungsi dari login akan menghasilkan response yang kemudian akan dilakukan pengecekan apakah memiliki token atau tidak. jika iya, maka token akan disimpan dan akan menampilkan pesan “logged in”, dan jika error akan menampilkan pesan “incorrect username or password”

2.Mengenalkan fungsi pada frontend

Sekarang kita kenalkan fungsi login pada LoginController pada frontend. mari kita ubah file tab_login.html dengan baris kode dibawah

<template id="tab_login">
<ons-page ng-controller="LoginController as $page" id="TabLogin">
<div ng-hide="tokenExist" style="text-align: center; margin-top: 30px">
<p>
<ons-input id="username" modifier="underbar" placeholder="Username" float ng-model="$page.username" value="adminBaru"></ons-input>
</p>
<p>
<ons-input id="password" modifier="underbar" type="password" placeholder="Password" float ng-model="$page.password" value="@dm!n123$"></ons-input>
</p>
<p style="margin-top: 30px;"> <ons-button ng-click="$page.login()">Sign in</ons-button>
</p>
</div>
<div ng-show="tokenExist" style="text-align: center; margin-top: 30px">
<p style="margin-top: 30px;"> <ons-button ng-click="$page.logout()">Log out</ons-button> </p>
</div>
</ons-page>
</template>

dapat kita lihat kita menambahkan ng-model pada setiap input, seperti pada ng-model=”$page.username” controller akan mengindetifikasi dengan kode ctrl.username. kemudian, ng-click=”$page.login” juga akan mentrigger fungsi ctrl.login untuk dieksekusi. maka fungsi login akan berjalan dengan baik

Naah, dapat dilihat sesuai gambar diatas ya gaes. terimakasiih 🙂