Halo teman teman pada kesempatan kali ini kita masih membahas tentang login system, pada tutorial Cara Membuat Login Sistem Menggunakan AngularJS Part 2, kita akan membuat module dan controller untuk prosesnya, pada tutorial sebelumnya kita telah membuat file index.html yang berfungsi untuk menampilkan hasil dari controller, nah jika teman teman lupa silahkan lihat pada tutorial sebelumnya pada Cara Membuat Login Sistem Menggunakan AngularJS Part 1,
Oke teman teman kita langsung saja masuk ke study casenya tentang Cara Membuat Login Sistem Menggunakan AngularJS Part 2,
Langkah pertama kita akan buat module nya terlebih dahulu seperti script dibawah ini,
var app = angular.module('myApp', ['ui.router']);
Setelah kita membuat module nya selanjutnya kita akan buat controllernya, disini kita menggunakan dua controller yaitu LoginController dan HomeController untuk proses dari login itu sendiri. Scriptnya Seperti dibawah ini.
app.controller('LoginController', function($scope, $rootScope, $stateParams, $state, LoginService) {
...
}
app.controller('HomeController', function($scope, $rootScope, $stateParams, $state, LoginService) {
...
}
Saya rasa teman teman sudah paham ya tentang module dan controller nya, selanjutnya kita akan buat sebuah folder baru yang bernama js silahkan teman teman simpan script dibawah ini pada folder js tersebut dengan nama file angular.js
(function() {
var app = angular.module('myApp', ['ui.router']);
app.run(function($rootScope, $location, $state, LoginService) {
$rootScope.$on('$stateChangeStart',
function(event, toState, toParams, fromState, fromParams){
console.log('Changed state to: ' + toState);
});
if(!LoginService.isAuthenticated()) {
$state.transitionTo('login');
}
});
app.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/home');
$stateProvider
.state('login', {
url : '/login',
templateUrl : 'login.html',
controller : 'LoginController'
})
.state('home', {
url : '/home',
templateUrl : 'home.html',
controller : 'HomeController'
});
}]);
app.controller('LoginController', function($scope, $rootScope, $stateParams, $state, LoginService) {
$rootScope.title = "Cara Membuat Login Sistem Menggunakan AngularJS";
$scope.formSubmit = function() {
if(LoginService.login($scope.username, $scope.password)) {
$scope.error = '';
$scope.username = '';
$scope.password = '';
$state.transitionTo('home');
} else {
$scope.error = "username dan password yang anda masukan salah !";
}
};
});
app.controller('HomeController', function($scope, $rootScope, $stateParams, $state, LoginService) {
$rootScope.title = "Cara Membuat Login Sistem Menggunakan AngularJS";
});
app.factory('LoginService', function() {
var admin = 'admin';
var pass = 'dumet';
var isAuthenticated = false;
return {
login : function(username, password) {
isAuthenticated = username === admin && password === pass;
return isAuthenticated;
},
isAuthenticated : function() {
return isAuthenticated;
}
};
});
})();
Berikutnya silahkan disave file angular.js nya dan coba jalan kan pada browser dengan username : admin dan password : dumet jika berhasil maka hasilnya seperti dibawah ini,
Oke teman teman cukup mudah bukan cara Cara Membuat Login Sistem Menggunakan AngularJS Part 2 nya.
Cukup sekian dulu tutorial saya kali ini tentang Cara Membuat Login Sistem Menggunakan AngularJS Part 2, semoga bermanfaat
Terimakasih.