Cara Membuat Login Sistem Menggunakan AngularJS Part 1
Halo teman teman di panduan kali ini saya akan menjelaskan panduan mengenai Cara Merancang Login Aplikasi Menggunakan AngularJS, di Cara Merancang Login Aplikasi Menggunakan AngularJS Part 1 kali ini saya akan membangun sebuah halaman indexnya terlebih dahulu, seperti yang kita ketahui bahwa login system itu seperti sebuah pintu yang berfungsi bagi masuk kedalam system, dan login system pun berfungsi bagi melindungi data yang terdapat didalamnya.
Oke teaman teman contoh login system yang akan kita bikin nanti yaitu seperti dibawah ini,
Tanpa berlama lama kita seketika saja masuk ke study casenya teman teman mengenai Cara Merancang Login Aplikasi Menggunakan AngularJS Part 1, langkah yang pertama-tama yang silahkan teman teman bikin sebuah folder yang bernama login didalam folder tersebut kita akan bikin sebuah file yang bernama index.html, dan silahkan teman teman simpan script dibawah ini dengan nama index.html
<!DOCTYPE html>
<html >
<head>
<meta charset=UTF-8>
<title>Cara Merancang Login Mengunakan AngularJS</title>
<link rel=stylesheet href=https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css>
<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'>
</head>
<body>
<div class=container ng-app=myApp>
<div class=row>
<div class=col-md-4>
<div class=page-header>
<h3>{{ title }}</h3>
</div>
</div>
<div class=col-md-4></div>
<div ui-view></div>
</div>
<script type=text/ng-template id=login.html>
<div class=col-md-4></div>
<div class=col-md-12>
<h4>Silahkan Masukan Username dan Password</h4>
<form ng-submit=formSubmit() class=form>
<div class=col-md-4>
<div class=form-group>
<input type=text class=form-control ng-model=username placeholder=username required=/>
</div>
<div class=form-group>
<input type=password class=form-control ng-model=password placeholder=password required=/>
</div>
<div class=form-group>
<button type=submit class=btn btn-success>Login</button>
<span class=text-danger><br>{{ error }}</span>
</div>
</div>
</form>
</div>
</script>
<script type=text/ng-template id=home.html>
<div class=col-md-12>
<h3>Welcome</h3>
<h4>Login Berhasil</h4>
<a ui-sref=login>logout</a>
</div>
</script>
</div>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.18/angular-ui-router.js'></script>
<script src=js/angular.js></script>
</body>
</html>
Demikianlah dulu panduan saya kali ini menggenai Cara Merancang Login Aplikasi Menggunakan AngularJS Part 1, dan bagi module dan controller nya akan saya bahas di panduan Cara Merancang Login Aplikasi Menggunakan AngularJS Part 2
Oke teman teman lumayan sekianlah dulu, panduan kali ini semoga bermanfaat
Terimakasih
Cara Membuat Login Sistem Menggunakan AngularJS Part 2
Sumber https://kursuswebsite.org
