Penulis
Assalamualaikum wr.wb
selamat berbahagia para pembaca :D
kembali lagi dengan saya yang kerap di panggil "Jinx48" hahahahahha.....
oke hari ini saya akan membahas "Cara Membuat Form Login Dengan HTML Tanpa Menggunakan Database".
selamat berbahagia para pembaca :D
kembali lagi dengan saya yang kerap di panggil "Jinx48" hahahahahha.....
oke hari ini saya akan membahas "Cara Membuat Form Login Dengan HTML Tanpa Menggunakan Database".
berhubung
disemester V ini ada tugas dari dosen Pemograman Web, saya memposting
artikel ini supaya mempermudah teman-teman untuk mempelajarinya.
cekiddooot...
Pertama-tama buka text editor ke sukaan kalian... Di sini saya sedih eh,, di sini saya menggunakan text editor Notepad ++.
bahan yang dibutuh kan : untuk bootstrap.css dan angular.js bisa kalian download disini
bahan yang dibutuh kan : untuk bootstrap.css dan angular.js bisa kalian download disini
NB: simpan di dalam satu folder dengan html yang sudah dibuat.
Tuliskan kode dibawah ini dan simpan dengan nama "Login.html".
okeh Penjelasanya adalah : "jinx.jpg" bisa kalian ganti dengan foto mantan eh, foto andalan kalian sedangkan kode "{{login1}}" adalah alert dari Script JavaScript "$scope.login1="Anda berhasil login...";" jika berhasil masuk dengan user dan password. kalau sudah silakan disave.
<!DOCTYPE html>
<html ng-app="AdminLogin">
<head>
<title>Form Login</title>
<link rel="shortcut icon" type="image/x-icon" href="jinx.jpg">
<link rel="stylesheet" type="text/css" href="bootstrap.css">
<link rel="stylesheet" type="text/css" href="dot.css">
<script type="text/javascript" src="angular.js"></script>
<script type="text/javascript" src="dot.js"></script>
</head>
<body ng-controller="LoginAdmin" class="coeg">
<div class="row">
<div class="col-md-12">
</div>
</div>
<div class="row">
<div class="col-md-4">
</div>
<div class="col-md-4" style="margin-top: 100px;">
<img src="jinx.jpg" width="320px" style="border-radius: 5px 5px 5px 5px;">
<br>
<br>
<input ng-model="username" class="form-control" type="text" placeholder="Username...">
<br>
<input ng-model="password" class="form-control" type="password" placeholder="Password...">
<br>
<button class="btn btn-default btn-block" ng-click="login()">Login</button>
<br>
<span style="color:black">{{login1}}</span>
</div>
<div class="col-md-4">
</div>
</div>
</body>
</html>
okeh Penjelasanya adalah : "jinx.jpg" bisa kalian ganti dengan foto mantan eh, foto andalan kalian sedangkan kode "{{login1}}" adalah alert dari Script JavaScript "$scope.login1="Anda berhasil login...";" jika berhasil masuk dengan user dan password. kalau sudah silakan disave.
Sekarang kita membuat script Javascript nya, tuliskan kode dibawah ini dan di beri nama "dot.js".
pada script ini ($scope.username==="admin"&&$scope.password==="admin").
pada kalimat Username"admin" bisa kalian rubah dengan nama kalian, sedangkan password "admin" bisa kalian rubah dengan NPM atau password login.
sedangkan pada script ini $scope.login1="Anda berhasil login..."; alert('Selamat Datang Admin', 10); adalah pemberitahuan atau pop up box yang akan muncul bila user dan password benar.
sedangkan setTimeout("location.href='index.html'", 10); pada baris "index.html" adalah redirect halaman awal atau index jika berhasil login. sedangkan alert("Username dan Password salah!") adalah pemberitahuan jika password yang dimasukan salah.
jika sudah tinggal di save, dan kalian coba :) tinggal di kembangkan lagi bisa di cari template login yang menurut kalian bagus.
angular.module('AdminLogin', [])Penjelasan:
.controller('LoginAdmin', function($scope){
$scope.login=function(){
if($scope.username==="admin"&&$scope.password==="admin"){
$scope.login1="Anda berhasil login...";
alert('Selamat Datang Admin', 10);
setTimeout("location.href='index.html'", 10);
}else{
alert("Username dan Password salah!")
}
$scope.name=$scope.username;
$scope.pass=$scope.password;
}
})
pada script ini ($scope.username==="admin"&&$scope.password==="admin").
pada kalimat Username"admin" bisa kalian rubah dengan nama kalian, sedangkan password "admin" bisa kalian rubah dengan NPM atau password login.
sedangkan pada script ini $scope.login1="Anda berhasil login..."; alert('Selamat Datang Admin', 10); adalah pemberitahuan atau pop up box yang akan muncul bila user dan password benar.
sedangkan setTimeout("location.href='index.html'", 10); pada baris "index.html" adalah redirect halaman awal atau index jika berhasil login. sedangkan alert("Username dan Password salah!") adalah pemberitahuan jika password yang dimasukan salah.
jika sudah tinggal di save, dan kalian coba :) tinggal di kembangkan lagi bisa di cari template login yang menurut kalian bagus.
sekian artikel dari saya semoga bermanfaat :) wassalam.....
Sumber : http://www.pengetahuan-gokil.cf/2016/08/cara-membuat-form-login-tanpa-database_20.html
5 komentar
mantap gan
Terimakasih sudah mampir :)
mantap gan lanjutkan menulisnya
http://blog.binadarma.ac.id/ay_ranius
makasih...sangat bermanfaat ^^
dot.css nya dmn?
EmoticonEmoticon