nongool.com - Fri 24/10/2014 Cara membuat form login dengan validasi login menggunakan bootstrap. Selamat pagi teman-teman, banyak sekali teman-teman saya di forum dan group facebook yang ingin menanyakan cara membuat form login dengan validasi login. Nah saya jadi kepikiran untuk membuat nya selain itu untuk membantu teman-teman saya juga yang belum begitu paham tentang cara membuat form login berserta validasi login nya. Seperti yang sudah saya ceritakan sedikit diatas pada postingan saya kali ini saya ingin membuat tutorial cara membuat form login dengan validasi login nya.
oke langsung saja persiapan yang harus teman-teman lakukan adalah pastikan teman-teman sudah membuat database nya pada phpmyadmin atau biasa disebut localhost untuk login.
nah disini sebagai contoh :
Database : admin
Tabel : login
di dalam tabel login buat atribut nama username dan password lalu isi value pada username dan password nya terserah. itu untuk teman-teman login nanti.
Oke sekarang kita akan buat form login.php dan dibawah ini adalah source code nya:
Selanjutnya kita buat form validasilogin.php dan dibawah ini adalah source code nya :
nah disini sebagai contoh :
Database : admin
Tabel : login
di dalam tabel login buat atribut nama username dan password lalu isi value pada username dan password nya terserah. itu untuk teman-teman login nanti.
Oke sekarang kita akan buat form login.php dan dibawah ini adalah source code nya:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>nongool - Form login</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet"/>
<link href="css/bootstrap-theme.min.css" rel="stylesheet"/>
</head>
<body>
<p><br/><br/><br/><br/></p>
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="panel panel-default">
<div class="panel-body">
<div class="page-header">
<h3>Login Area</h3>
</div>
<form action="validasilogin.php" method="post" accept-charset="utf-8" role="form">
<div class="form-group">
<label for="username">Username</label>
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>
<input type="text" class="form-control" name="username" placeholder="Enter username" required />
</div>
</div>
<div class="form-group">
<label for="password">Password</label>
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-star"></span></span>
<input type="password" class="form-control" name="password" placeholder="Password" required />
</div>
</div>
<hr/>
<a href="#"><button type="button" class="btn btn-success"><span class="glyphicon glyphicon-arrow-left"></span> Back</button></a>
<button type="submit" class="btn btn-primary"><span class="glyphicon glyphicon-lock"></span> Login</button>
<p>
</p>
</form>
</div>
</div>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
<?php
//koneksi ke database
mysql_connect("localhost", "root", "");
mysql_select_db("datafile");
//validasi login
$username=$_POST['username'];
$password=$_POST['password'];
$query=mysql_query("select * from admin where username='$username' and password='$password'");
$cek=mysql_num_rows($query);
if($cek){
$_SESSION['username']=$username;
header("location:index.php");
}else{
echo'<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>nongool - Form login</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet"/>
<link href="css/bootstrap-theme.min.css" rel="stylesheet"/>
</head>
<body>
<p><br/><br/><br/><br/></p>
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="panel panel-default">
<div class="panel-body">
<div class="page-header">
<h3>Login Area</h3>
</div>
<form action="validasilogin.php" method="post" accept-charset="utf-8" role="form">
<div class="alert alert-warning"><button type="button" class="close" data-dismiss="alert"><span aria-hidden="true"><div class="glyphicon glyphicon-volume-off"></div></span><span class="sr-only">Close</span></button>
Maaf, Username dan password yang anda masukkan tidak cocok. Silahkan coba lagi!
</div>
<form action="validasiid1.php" method="post" accept-charset="utf-8" role="form">
<div class="form-group">
<label for="username">Username</label>
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>
<input type="text" class="form-control" name="username" placeholder="Enter username" required />
</div>
</div>
<div class="form-group">
<label for="password">Password</label>
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-star"></span></span>
<input type="password" class="form-control" name="password" placeholder="Password" required />
</div>
</div>
<hr/>
<a href="home.php"><button type="button" class="btn btn-success"><span class="glyphicon glyphicon-arrow-left"></span> Back</button></a>
<button type="submit" class="btn btn-primary"><span class="glyphicon glyphicon-lock"></span> Login</button>
<p>
</p>
</form>
</div>
</div>
</div>
</div>
</div>
<!-- jQuery necessary for Bootstrap -->
<script src="js/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
';
}
?>
Nah dibawah ini adalah untuk tampilan form validasilogin.php nya, jika misalkan teman-teman gagal login nanti akan muncul alert-info nya pada form login tersebut.
Oke jika sudah yang terakhir kita akan buat form index.php nya untuk mengetahui kalo kita telah berhasil melakukan login. dan dibawah ini adalah source code nya:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>nongool - Form login</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet"/>
<link href="css/bootstrap-theme.min.css" rel="stylesheet"/>
</head>
<body>
<p><br/><br/><br/><br/></p>
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="panel panel-default">
<div class="panel-body">
<div class="page-header">
<h3>Selamat anda berhasil login</h3>
</div>
<a href="login.php"><button type="button" class="btn btn-success"><span class="glyphicon glyphicon-arrow-left"></span> Back</button></a>
</div>
</div>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
dan jika teman-teman gak mau ribet, teman bisa download filenya disini Download
Jika ada yang kurang jelas atau kurang mengerti silahkan teman-teman langsung tanya dengan berkomentar dibawah ini.
Semoga artikel Cara membuat form login dengan validasi login menggunakan bootstrap bisa membantu dan bermanfaat untuk teman-teman.
Note : Jika Teman-teman menyukai artikel Cara membuat form login dengan validasi login menggunakan bootstrap ini bisa langsung share lewat Facebook, Twitter, Google+. dll. Terimakasih !
Created By : Unknown - www.nongool.com
Anda sedang membaca artikel tentang Cara membuat form login dengan validasi login menggunakan bootstrap.Jika anda suka artikel ini, anda dapat share artikel ini dengan disertakannya link yang sesuai dengan postingan ini sebagai sumbernya. silahkan copy link dibawah ini:
- Hak cipta pemilik -
tutorial yang membantu om.
ReplyDeleteterima kasih
Iya terimakasih mas, silahkan baca artikel terkait lainnya juga :)
Deletethanks gan
ReplyDeleteiyaa sama-sama, silahkan baca artikel terkait lainnya juga yaa :)
Deletesaya sudah compile script yg validasilogin.php kok masih ada yang error ya gan?
ReplyDeleteohh gitu, oya mbak nya udah buat database nya belum ?
DeleteBagaimana cara membuat databasenya?
ReplyDeleteSilahkan masnya tinggal download aja disini https://www.dropbox.com/s/ego1lae3ncdv3ho/login.sql?dl=0
Deleteoh yaa pada source code validasilogin.php ganti database "datafile" dengan "data" dan ganti juga nama tabelnya "admin" dengan "login".
kalo ada yang kurang jelas silahkan ditanyakan lagi.
silahkan baca artikel terkait lainnya juga :)
Mantap nih artikelnya, gantian dong kunjung blog saya di ajicuakep.blogspot.com di blog saya juga membahas tentang bootstrap
ReplyDeleteTerima kasih mas, siap kunjungan balik :)
DeleteSilahkan baca artikel terkait lainnya juga mas
koq filenya gk bisa didownload ya gan?
ReplyDeletefile yang mana mas ?
Deletemas kalo posisi loginnya di tengah browser gmana ya?
ReplyDeleteane run posisinya di kiri terus gan
mohon pencerahannya
pada semua file rubah script (div class="col-md-4"). menjadi seperti ini (div class="col-md-4 col-md-offset-4"). dan untuk control yang mengatur posisi nya adalah .col-md-offset-4.
Deleteselamat mencoba kembali, terima kasih sudah berkunjung :)