Kali ini admin akan menulis mengenai Login dengan PHP, MySQL + jQuery. Pada dasarnya login merupakan suatu halaman yang berfungsi untuk membatasi hak akses user. Berikut yang harus di persiapkan.
Template AdminLTE bisa di download disini. Biasanya pada Bundle Template sudah termasuk library jQuery dan Plugins pendukung lainnya yang terdapat pada AdminLTE.
Tampilan pada halaman Login akan terlihat seperti berikut:
Berikut adalah form pada halaman login.php
<form action="" method="post" id="runLogin">
<div class="form-group has-feedback">
<input type="text" class="form-control username" name="username" placeholder="Username">
<span class="glyphicon glyphicon-user form-control-feedback"></span>
</div>
<div class="form-group has-feedback">
<input type="password" class="form-control password" name="password" placeholder="Password">
<span class="glyphicon glyphicon-lock form-control-feedback"></span>
</div>
<div class="row">
<div class="col-xs-6 pull-right">
<input type="submit" class="btn btn-primary btn-block btn-flat" id="login" value="Sign In">
</div>
</div>
</form>
Jika di lihat pada baris pertama terdapat atribut id=”runLogin”, jadi atribut tersebut yang akan digunakan untuk initial pengiriman data serialize nya.
jQuery function nya akan terlihat seperti berikut
$(function() {
$(".username").focus();
$("#runLogin").submit(function(e) {
e.preventDefault();
$.ajax({
url: "apps/Views/login/submit.php",
type: "POST",
dataType : 'json',
data: $("#runLogin").serialize(),
cache: false,
beforeSend: function(){ $("#login").val('Connecting...');},
success: function(html){
if($.trim(html.msg) == 'OK'){
window.location.href = "home";
}
else{
$("#login").val('Sign In');
$(".username").focus();
$("#loadAlert").html('<div class="alert alert-warning alert-dismissible"><button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>'+$.trim(html.msg)+'</div>');
}
},
error:function(xhr, status, error){
$("#loadAlert").html('<div class="alert alert-danger alert-dismissible"><button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>'+error+'</div>');
}
});
return false;
});
});
Kemudian pada baris ini kita akan mengirimkan data dalam bentuk JSON
url: "apps/Views/login/submit.php",
type: "POST",
dataType : 'json',
kemudian pengiriman data tersebut akan di tampung pada submit.php sebagai action formnya. Berikut isi pada halaman submit.php
$data = array(
'username' => $_POST['username'],
'password' => $_POST['password']
);
if(is_ajax())
{
checkUser($data);
}
## FUNCTION
function checkUser($getData)
{
global $db_mysql;
$arr = array();
if($getData['username'] == "")
{
$arr['msg'] = 'Username masih kosong!';
}
else if($getData['password'] == "")
{
$arr['msg'] = 'Password masih kosong!';
}
else{
$data = $db_mysql->select("SELECT * FROM tbl_users WHERE username = '$getData[username]' AND password = md5('$getData[password]') AND active = '1'");
if(count($data) > 0)
{
$_SESSION['SESS_ID'] = $data[0]['user_id'];
$_SESSION['SESS_LOGIN_ID'] = $data[0]['username'];
$_SESSION['SESS_NAME'] = $data[0]['first_name'].' '.$data[0]['last_name'];
$_SESSION['SESS_GROUP'] = $data[0]['group_id'];
$_SESSION['SESS_ACTIVE'] = $data[0]['active'];
$arr['msg'] = 'OK';
}
else{
$arr['msg'] = 'Login gagal, coba lagi!!';
}
}
echo json_encode($arr);
}
Untuk koneksi dan database wrapper bisa di cek pada postingan sebelumnya. Simple PHP Database Wrapper
Berikut table yang diperlukan pada database.
--
-- Table structure for table `tbl_users`
--
DROP TABLE IF EXISTS `tbl_users`;
CREATE TABLE `tbl_users` (
`user_id` int(11) NOT NULL,
`username` varchar(50) DEFAULT NULL,
`password` varchar(32) DEFAULT NULL,
`group_id` tinyint(4) DEFAULT NULL,
`first_name` varchar(50) DEFAULT NULL,
`last_name` varchar(50) DEFAULT NULL,
`email` varchar(255) DEFAULT NULL,
`active` tinyint(4) DEFAULT NULL,
`usr_img` text,
`updateBy` int(11) NOT NULL,
`create_date` datetime DEFAULT NULL,
`modified_date` datetime DEFAULT NULL
) ENGINE=MyISAM DEFAULT CHARSET=latin1;
--
-- Indexes for table `tbl_users`
--
ALTER TABLE `tbl_users`
ADD PRIMARY KEY (`user_id`);
--
-- AUTO_INCREMENT for table `tbl_users`
--
ALTER TABLE `tbl_users`
MODIFY `user_id` int(11) NOT NULL AUTO_INCREMENT;
Author Profile
- Hi my name is Ricki, I am a blogger from Indonesia. Founder of erkamoo.com, Besides creating Web Applications, I also write about Blogging Tips and Tutorials on Programming, Databases, HTML.
Latest entries
- Intro15 Oktober 2024Jenis-Jenis Mobil Termahal dari Lamborghini
- Wisata14 Oktober 2024Keindahan dan Daya Tarik Kota Tua Jakarta
- Wisata14 Oktober 2024Tempat Wisata untuk Anak-Anak di Jakarta
- Wisata13 Oktober 2024Destinasi Wisata Menarik di Bandung