hi. kali ini gw mau sharing bagaimana cara membuat simple login dengan menggunakan post via ajax jquery yang nantinya akan kita tampilkan hasil dengan menggunakan format JSON
Persiapan Database
Persiapan struktur folder,
keterangan file :
1. index.php => form login untuk tampilan awalnya
diantara Tag <body></body> copy paste kode element berikut :
"<input type="text" id="username" placeholder="username"> <br>
<input type="password" id="password" placeholder="password"><br>
<button type="button" id="btn-login"> Login</button>"
jika di jalankan pada browser maka tampilan akan menjadi seperti gambar berikut :
Tambahkan sebuah javascript untuk menjalankan ajax, script yg kita gunakan adalah script online yang ada di code.jquery.com
<script type="text/javascript" src="http://code.jquery.com/jquery-3.2.1.min.js"></script>
Lalu Tambahkan script dimana script ini akan menjalankan proses ajax
<script type="text/javascript">
$(document).ready(function(){
$('#btn-login').click(function(){
var bangtiray={
username : $('#username').val(),
password : $('#password').val(),
}
$.ajax({
url:"login.php",
type:"POST",
data: bangtiray,
success:function(data){
var obj= $.parseJSON(data);
if(obj.status===1){
//ini akan mnampilkan pesan yang berhasil
//alert(obj.error);
window.open('home.php','_self');
}else{
//ini akan mnampilkan pesan kolom kosong
alert(obj.error);
}
}
})
})
})
</script>
2. Script file koneksi.lib.php
<?php
$host="localhost";
$user="root";
$pass="";
$database="latihan";
$conn = mysqli_connect($host , $user, $pass, $database) or die(mysqli_connect_error());
?>
3. script file login.php
<?php
session_start();
include('koneksi.lib.php');
$username = $_POST['username'];
$password = $_POST['password'];
if($username=="" || $password==""){
$status['status']=0; //bernilai salah
$status['error']="Mohon Input Kolom Kosong";
}else{
$sql='SELECT * FROM sys_user where username="'.$username.'" and password="'.sha1($password).'"';
$query=mysqli_query($conn, $sql) or ("error");
$row = mysqli_fetch_array($query);
$_SESSION['username']=$row["full_name"];
$status['status']=1; //bernilai benar
$status['error']="Berhasil Login dengan username " . $username;
}
echo json_encode($status);
?>
4. script home.php dimana file ini akan menampilkan session nama user
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
</head>
<body>
Hi... <?php session_start(); echo $_SESSION['username']; ?>
</body>
</html>
Manfaat script ini :
halaman tidak loading saat proses login..
Demo dan tutorial lainya dapat di lihat di
Persiapan Database
Persiapan struktur folder,
1. index.php => form login untuk tampilan awalnya
"<input type="text" id="username" placeholder="username"> <br>
<input type="password" id="password" placeholder="password"><br>
<button type="button" id="btn-login"> Login</button>"
jika di jalankan pada browser maka tampilan akan menjadi seperti gambar berikut :
<script type="text/javascript" src="http://code.jquery.com/jquery-3.2.1.min.js"></script>
Lalu Tambahkan script dimana script ini akan menjalankan proses ajax
<script type="text/javascript">
$(document).ready(function(){
$('#btn-login').click(function(){
var bangtiray={
username : $('#username').val(),
password : $('#password').val(),
}
$.ajax({
url:"login.php",
type:"POST",
data: bangtiray,
success:function(data){
var obj= $.parseJSON(data);
if(obj.status===1){
//ini akan mnampilkan pesan yang berhasil
//alert(obj.error);
window.open('home.php','_self');
}else{
//ini akan mnampilkan pesan kolom kosong
alert(obj.error);
}
}
})
})
})
</script>
2. Script file koneksi.lib.php
<?php
$host="localhost";
$user="root";
$pass="";
$database="latihan";
$conn = mysqli_connect($host , $user, $pass, $database) or die(mysqli_connect_error());
?>
3. script file login.php
<?php
session_start();
include('koneksi.lib.php');
$username = $_POST['username'];
$password = $_POST['password'];
if($username=="" || $password==""){
$status['status']=0; //bernilai salah
$status['error']="Mohon Input Kolom Kosong";
}else{
$sql='SELECT * FROM sys_user where username="'.$username.'" and password="'.sha1($password).'"';
$query=mysqli_query($conn, $sql) or ("error");
$row = mysqli_fetch_array($query);
$_SESSION['username']=$row["full_name"];
$status['status']=1; //bernilai benar
$status['error']="Berhasil Login dengan username " . $username;
}
echo json_encode($status);
?>
4. script home.php dimana file ini akan menampilkan session nama user
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
</head>
<body>
Hi... <?php session_start(); echo $_SESSION['username']; ?>
</body>
</html>
Manfaat script ini :
halaman tidak loading saat proses login..
Demo dan tutorial lainya dapat di lihat di
PHP Tutorial Bahasa Indonesia Mysql Ajax Pemula: https://www.youtube.com/playlist?list=PLC4QS2zJf3uuvTxTQoDN1mZT4cVdeRQLo
Semoga Bermanfaat
Comment Please
Like Subscribe and Share on YT
Comment Please
Like Subscribe and Share on YT
