— 4 Desember 2019 in Database

Login dengan jQuery, PHP + MySQL

Login dengan jQuery, PHP + MySQL

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:

login.php

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

Cara gampang pembuatan script login dengan library jQuery, php dan MySQL menggunakan template AdminLTE sebagai form. Dan database wrapper sebagai model database
Informasi ketika login dan masuk halaman utama

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;
Share to Unlock Contentimage/svg+xml
Unlock this exclusive content by using one of the sharing buttons below.
ShareTweet

Author Profile

Ricki K
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.