Membuat Form Login dengan PHP Jquery Mysqli Bootstrap
Hai All ketemu lagi bersama saya portgastea pria ganteng asli sunda, tutorial di minggu awal ramadhon ini saya akan mencoba membuat form login dengan PHP, Jquery & Bootstrap. Ok Langsung saja yang pertama download jquery.validate.min.js, untuk download nya biasa cari di google dan donwload juga bootstrapnya, taruh folder assets di htdocs berserta file jquery.validate.min.js di folder assets/js, skrang kita buat database dengan nama tutorial atau terseran anda di phpmyadmin seperti ini dan buat tabel tbl_user seperti dibawah ini :
CREATE TABLE IF NOT EXISTS `tbl_user` (
`id_user` int(10) NOT NULL,
`username` varchar(100) NOT NULL,
`pass` varchar(100) NOT NULL,
`level_user` int(5) NOT NULL,
`email` varchar(50) NOT NULL,
`nip` varchar(5) NOT NULL,
`status` int(5) NOT NULL,
`w_login` datetime NOT NULL,
`w_daftar` datetime NOT NULL,
`photo` varchar(100) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=8 ;Selanjutnya kita buat koneksinya dan buat file php baru dengan nama koneksi.php atau terserah anda dan buat script seperti dibawah ini :
<?php
$db = new mysqli('localhost','root', '', 'tutorial');
if($db->connect_errno > 0){
die('Unable to connect to database [' . $db->connect_error . ']');
}
?>Jika sudah selesai kita buat tampilan form login dengan membuat file baru dengan nama index php seperti dibawah ini
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Kumpulan SourceCode Andeznet</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<!-- Le styles -->
<link href="assets/css/bootstrap.css" rel="stylesheet" media="screen">
<link href="assets/css/bootstrap-responsive.min.css" rel="stylesheet" media="screen">
<script src="assets/js/jquery.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<style>
body {
padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */
}
</style>
<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="../assets/js/html5shiv.js"></script>
<![endif]-->
<!-- Fav and touch icons -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="assets/ico/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="assets/ico/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">
<link rel="shortcut icon" href="assets/ico/logoandeznet.png">
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="brand" href="http://andeznet.com">AndezNet</a>
<div class="nav-collapse collapse">
<ul class="nav pull-right">
<li class="active"><a href="index.php">Home</a></li>
<li><a href="register.php">Register</a></li>
<li class="divider-vertical"></li>
<li class="dropdown">
<a class="dropdown-toggle" href="#" data-toggle="dropdown">Log In <strong class="caret"></strong></a>
<div class="dropdown-menu" style="padding: 15px; padding-bottom: 0px;">
</div>
</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
<div class="container">
<div class="hero-unit">
<h2>Selamat datang di Aplikasi KSC Ver 1.0.0</h2>
<p>Kumpulan Source Code <a href="http://andeznet.com">ANDEZNET</a> </p>
<p>Untuk Login mohon melakukan <a href="register.php">Register</a> terlebih dahulu</p>
</div>
</div> <!-- /container -->
</body>
<div class="row-fluid">
<div class="span12">
<div class="row-fluid">
<div class="alert alert-info">
<a name="contact"></a>
<h2>www.andeznet.com</h2>
<p class="text-info">Gudang Teknologi & Informasi</p>
<p>© <a href="http://andeznet.com">www.andeznet.com</a> <?php echo date("Y");?></p>
</div><!--/span-->
</div><!--/row-->
</div><!--/span-->
</div><!--/row-->Selanjutnya kita akan membuat validasi dengan file jquery.validate.min.js yang sebelumnya kita download masukan script dibawah ini di file index setelah <script src=”assets/js/bootstrap.min.js”></script>
<script src="assets/js/jquery.validate.min.js" type="text/javascript"></script>
<script type="text/javascript">
$.validator.setDefaults({
submitHandler: function() { login(); },
});
$().ready(function() {
$("#loginF").validate();
});
function login(){
$("#loading").html('<div class="alert alert-block alert-success">Mohon Tunggu....</div>');
$.post('cek_login.php', $("form").serialize(), function(hasil){
$('form input[type="text"],form input[type="password"]').val('');
$("#loading").html(hasil);
});
}
</script>Ok jika sudah selesai kita buat form login nya seperti script dibawah ini di file index di bawah div class=”dropdown-menu” style=”padding: 15px; padding-bottom: 0px;”>
<form action="" id="loginF" name="form" method="post">
<div class="form-group">
<label for="username" class="control-label">Username</label>
<input type="text" class="form-control" id="username" name="username" placeholder="username" data-error="Username anda masih kosong" required>
<div class="help-block with-errors"></div>
</div>
<div class="form-group">
<label for="inputPassword" class="control-label">Password</label>
<div class="form-group col-sm-6">
<input type="password" data-minlength="10" class="form-control" id="password" name="password" placeholder="Password" required>
</div>
</div>
<input type="submit" class="btn btn-info" value="Login" />
</form>Selanjutnya kita masukan script seperti ini diatas form login <div id=”loading” style=”text-align: center”></div> yang dimana script ini akan menunjukan keterangan validasi login dari username & password yang kita masukan. Lalu kita buat file cek_login.php dengan script seperti dibawah ini :
<?php
error_reporting(0);
include "koneksi.php";
$user = $_POST['username'];
$pass = md5($_POST['password']);
// pastikan username dan password adalah berupa huruf atau angka.
$cek_lagi=mysqli_query($db,"SELECT * FROM tbl_user WHERE username='$user' AND pass='$pass'");
$ketemu=mysqli_num_rows($cek_lagi);
$r=mysqli_fetch_array($cek_lagi,MYSQL_ASSOC);
// Apabila username dan password ditemukan
if ($ketemu > 0){
session_start();
$_SESSION['kode'] = $r['id_user'];
$_SESSION['namauser'] = $r['username'];
$_SESSION['passuser'] = $r['pass'];
$_SESSION['leveluser'] = $r['level_user'];
$_SESSION['w_login'] = $r['w_login'];
$id_user=$_SESSION['kode'];
if($_SESSION['leveluser']==1){
echo "<div id='sukses' class='alert alert-info'><strong>BERHASIL...</strong><button type='button' class='close' data-dismiss='alert'><i class='ace-icon fa fa-times'></i></button></div><script>window.location ='media.php'</script>";
mysqli_query($db,"update tbl_user set status=1,w_login=NOW() where id_user='$id_user'");
} else if($_SESSION['leveluser']==2){
echo "<div id='sukses' class='alert alert-info'><strong>BERHASIL...</strong><button type='button' class='close' data-dismiss='alert'><i class='ace-icon fa fa-times'></i></button></div><script>window.location ='media.php'</script>";
mysqli_query($db,"update tbl_user set status=1,w_login=NOW() where id_user='$id_user'");
}
}
else{
echo "<div id='gagal' class='alert alert-danger'>Mohon maaf username & password anda salah<button type='button' class='close' data-dismiss='alert'><i class='ace-icon fa fa-times'></i></button></div>";
}
?>OK, Sudah selesai sekarang kita tes masuk ke http://localhost/tutorial jika berhasil maka akan muncul seperti gambar dibawah ini :
Ok sekian Tutorial saya di minggu awal bulan Ramadhan ini. Untuk Download SourceCode bisa langsung download Aplikasi KSC Ver.1.0.0, di dalamnya ada form login, register, & kumpulan soucecode dari Tutorial AndezNET.com saya bagikan GRATIS.
Weh..mantabs gan..tampilannya bagus agak mirip sama extjs..
OK Gan
Thx gan Keren.
Ok Gan, semoga bermanfaat
kang @portgastea.
bagaimana cara membuat form pendaftaran yang di dalam nya terdapat fungsi melarang pendaftar mendaftarkan username yang sudah terpakai.
mohon tutorialnya kang…
nuhun.
Download ASKA gan cari web ini ada, disana ada form pendaftaran , pelajari script nya
gan buat registrasinya kok gagal ??
Gagalnya muncul erorr apa?
munculnya kaya gini mas
Unable to connect to database [Access denied for user ‘root’@’localhost’ (using password: YES)]
gimana ya solusinya ??
thanks sebelumnya 😀
Cek file koneksi nya gan sesuaikan username dan password nya
I’ve been surfing online more than 2 hours today, yet I never found any interesting article like yours. It’s pretty worth enough for me. In my opinion, if all site owners and bloggers made good content as you did, the net will be a lot more useful than ever before.
thanks you for visit in My Website
ndak jadi gan.udah bisa.salah download aja ternyata.hahaha
ok sip