Cara Membuat Form Login Bootstrap dan MySQL
Cara Membuat Form Login Bootstrap dan MySQL - pada postingan sebelumnya admin sudah membahas bagaimana Cara Membuat Form Login Keren dengan PHP. Untuk kali ini admin akan menghubungkan PHP dengan database MySQL, jadi form login yang akan kita buat sudah berbasis database dan template login admin download dari web penyedianya.
Ok, Langsung saja untuk Cara Membuat Form Login Bootstrap dan MySQL :
1. Terlebih dahulu kita menyiapkan database nya. Di sini admin membuat database dengan nama login dan membuat satu tabel dengan nama user. Dengan struktur table sebagai berikut :
2. Buat file dengan nama index.html, dan masukkan code berikut :
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<title>Bootstrap Login Form</title>
<meta name="generator" content="Bootply" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link href="css/bootstrap.min.css" rel="stylesheet">
<!--[if lt IE 9]>
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link href="css/styles.css" rel="stylesheet">
</head>
<body>
<!--login modal-->
<div id="loginModal" class="modal show" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h1 class="text-center">Login</h1>
</div>
<div class="modal-body">
<form class="form col-md-12 center-block" action="proses.php" method="post">
<div class="form-group">
<input type="text" class="form-control input-lg" placeholder="Email" id="email" name="email">
</div>
<div class="form-group">
<input type="password" class="form-control input-lg" placeholder="Password" id="password" name="password" >
</div>
<div class="form-group">
<button class="btn btn-primary btn-lg btn-block">Sign In</button>
<span class="pull-right"><a href="#">Register</a></span><span><a href="#">Need help?</a></span>
</div>
</form>
</div>
<div class="modal-footer">
<div class="col-md-12">
<button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button>
</div>
</div>
</div>
</div>
</div>
<!-- script references -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
3. Buat file yang kedua dengan nama proses.php, masukkan code berikut :
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<title>Bootstrap Login Form</title>
<meta name="generator" content="Bootply" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/styles.css" rel="stylesheet">
</head>
<body>
<?php
$konek=mysql_connect('localhost','root','') or die('server down') ;
mysql_select_db('login',$konek) ;
$user = $_POST['email'];
$password = $_POST['password'];
$sql = "SELECT * FROM user WHERE email='$user' AND password='$password'";
$query = mysql_query($sql,$konek);
$row = mysql_num_rows($query);
if ($row == 1){
echo"<div align='center'><h1>Login Berhasil</h1></div>";
}else{
echo"<script language='javascript'>alert('Terjadi kesalahan, silakan ulangi !')</script>";
echo"<div align='center'><h1>Login Gagal</h1></div>";
echo"<div align='center'><a href='index.html'>Kembali</a></div>";
}
?>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Keterangan :
<form class="form col-md-12 center-block" action="proses.php" method="post">, tulisan yang tercetak tebal maksudnya adalah form yang dibuat akan di proses pada proses.php
$konek=mysql_connect('localhost','root','') or die('server down') ;-->merupakan variabel $konek yang digunakan untuk menghubungkan dengan database MySQL, localhost merupakan nama server, root adalah username dari database tersebut, '' atau dikosongkan -->merupakan password dari database.
mysql_select_db('login',$konek) ; --> digunakan untuk menentukan database apa yang akan dihubungkan. 'login' adalah nama database
Mudah sekali bukan?Hasilnya seperti berikut :
Jika login berhasil :
Jika login gagal :
Untuk full source code bisa kalian download di bawah ini :
Post a Comment for "Cara Membuat Form Login Bootstrap dan MySQL"