cara membuat session expired dengan ajax dan php

Pada kesempatan kali ini saya akan mensharing bagaimana cara membuat session expired dengan ajax dan php, dengan cara ini kita bisa membuat sebuah akses yang sudah logout, maka tampilan CMS kita yang menggunakan user tersebut akan ikut expired, jadi teman-teman tidak perlut khwatir lagi jika teman-teman ingin logout tidak harus semua tab yang teman-teman tampilkan itu di logout, oke jadi seperti apa caranya simak terus ya teman-teman.

Teman-teman pasti sangat perlu sekali cara ini untuk membuat sebuah proses teman-teman lebih aman, karena seperti yang saya tulis di atas, satu logout maka halaman yang lain yang menggunakan user tersebut sudah tidak bisa di akses lagi, sering kita jumpai ketika kita membuka sebuah email ya, pasti teman-teman tidak hanya satu halaman membuka lampiran email, tapi kadang bisa satu atau dua, oke untuk cara membuat session expired dengan ajax dan php saya mengguankan sebuah ajax dan php, seperti biasa teman-teman sudah harus belajar ajax dan phpnya ya, untuk ajaxnya saya menggunakan ajax jquery, oke langsung saja disini karena tampilan pertama itu login, maka saya akan membuat sebuah tampilan login seperti ini:

<?php  
$koneksi = mysqli_connect("localhost", "dumet", "school", "instruktur");
session_start();
if(isset($_SESSION["name"])) header("location:index.php");
if(isset($_POST["submit"])){
  $username = mysqli_real_escape_string($koneksi, $_POST["username"]);
  $password = mysqli_real_escape_string($koneksi, $_POST["password"]);
  $query    = "SELECT * FROM tbl_user_simple WHERE username = '$username' AND password = '$password' ";
  $result = mysqli_query($koneksi, $query);
  if(mysqli_num_rows($result) > 0 ){
    $_SESSION["name"] = $_POST["username"];
    header("location: index.php");
  }else{
    echo '<script>alert("wrong Data")</script>';
  }
}

?>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
</head>
<body>
<div class="container mt-5">
    <div class="row">
      <div class="col-md-6 offset-md-2">
        <form method="post">
          <div class="form-group">
            <label>Username</label>
            <input type="text" class="form-control" id="username" name="username">
          </div>
          <div class="form-group">
            <label for="password">Password</label>
            <input type="password" class="form-control" id="password" name="password">
          </div>
          <button type="submit" class="btn btn-primary btn-block" name="submit">Submit</button>
        </form>
      </div>
    </div>
  </div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>  
<script>
  
</script>
</body>
</html>

<?php

$koneksi = mysqli_connect("localhost", "dumet", "school", "instruktur");

session_start();

if(isset($_SESSION["name"])) header("location:index.php");

if(isset($_POST["submit"])){

$username = mysqli_real_escape_string($koneksi, $_POST["username"]);

$password = mysqli_real_escape_string($koneksi, $_POST["password"]);

$query = "SELECT * FROM tbl_user_simple WHERE username = '$username' AND password = '$password' ";

$result = mysqli_query($koneksi, $query);

if(mysqli_num_rows($result) > 0 ){

$_SESSION["name"] = $_POST["username"];

header("location: index.php");

}else{

echo '<script>alert("wrong Data")</script>';

}

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

<label>Username</label>

</div>

<label for="password">Password</label>

</div>

<button type="submit" class="btn btn-primary btn-block" name="submit">Submit</button>

</form>

</div>

</script>

</body>

</html>

Mungkin untuk cara di atas saya tidak perlu panjang lebar menejlaskan ya, itu masih sama seperti proses login biasa,dimana ketika kita sudah mendapatan session name nya, maka akan di teruskan ke halaman indexnya, begitupun sebaliknya jika di index tidak di temukan session maka akan di kembalikan ke login, oke sekarang kita buka untuk tampilannya

<?php  
session_start();
if(!isset($_SESSION["name"])) header("location:login.php");
if(isset($_SESSION["name"])){ ?>
 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
</head>
<body>
<div class="container mt-5">
    <div class="row">
      <div class="col-md-8 offset-md-2">
		<?php 
			echo '<div class="jumbotron">
		  <h1 class="display-4">Hello, '.$_SESSION["name"].'</h1>
		  <p class="lead">Selamat datang kembali di halaman CMS admin semoga betah</p>
		  <hr class="my-4">
		  <p>Ini adalah tampilan CMS admin di mana teman-teman bisa mengatur proses tampilan depan kalian disini</p>
		  <a class="btn btn-primary btn-lg" href="logout.php" role="button">Logout</a>
		</div>';
		}

		?>
      </div>
    </div>
  </div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>  
<script>
$(document).ready(function(){
	function check_session(){
	$.ajax({
		url: "check_session.php",
		method: "POST",
		success: function(data){
			if(data == "1"){
				alert("login lagi untuk melanjutkan");
				window.location.href = "login.php";
			}
		}
	})		
	}

	setInterval(function(){
		check_session();
	}, 10000)
})
</script>
</body>
</html>

<?php

session_start();

if(!isset($_SESSION["name"])) header("location:login.php");

if(isset($_SESSION["name"])){ ?>

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

<?php

echo '<div class="jumbotron">

<h1 class="display-4">Hello, '.$_SESSION["name"].'</h1>

<p class="lead">Selamat datang kembali di halaman CMS admin semoga betah</p>

<p>Ini adalah tampilan CMS admin di mana teman-teman bisa mengatur proses tampilan depan kalian disini</p>

<a class="btn btn-primary btn-lg" href="logout.php" role="button">Logout</a>

</div>';

}

</div>

$(document).ready(function(){

function check_session(){

$.ajax({

url: "check_session.php",

method: "POST",

success: function(data){

if(data == "1"){

alert("login lagi untuk melanjutkan");

window.location.href = "login.php";

}

})

}

setInterval(function(){

check_session();

}, 10000)

})

</script>

</body>

</html>

Nah yang terpenting dari artikel kita itu ada disini ya, jadi function cek session itu akan selalu di refresh, untuk mengetahui session itu masih ada atau tidak, karena ajax tersebut juga saya proses di check session seperti ini

<?php  
 //check_session.php  
 session_start();
 if(isset($_SESSION["name"]))  
 {  
      echo '0';     //session not expired       
 }  
 else  
 {  
      echo '1';     //session expired  
 }
 ?>

<?php

//check_session.php

session_start();

if(isset($_SESSION["name"]))

{

echo '0'; //session not expired

}

else

{

echo '1'; //session expired

}

jika benar maka 0 dan jika salah 1, seperti itu kira-kira, oke untuk melihat hasil di atas, maka hasilnya seperti ini

tampilan pertama saat login, dan yang kedua saat sudah di logout dan saya membuat tampilan index itu dua tab yang satu saya logout ketika saya kembali ke halaman index yang lainya maka sudah tidak bisa di akses lagi, dan kita di suruh login lagi, kira-kira seperti ini ya cara membuat session expired dengan ajax dan php semoga bermanfaat dan sampai jumpa pada artikel berikutnya terimakaish.

Facebook DUMET School

Categories