CODEWITHSUNDEEP
javascriptphpajaxsessionevent-listener
Greevman
Greevman

Reputation: 66

Need an Ajax call to destroy session

I have a script where when a user get verified he/she is brought to Home.php. At the moment Home.php doesn't do much. But in the bottom left hand corner I have a log out button. And as you know when the user clicks on this button he expects his session to be destroyed and for him to be redirected to a log in page. Unfortunately you can't make a click listener in php. I have browsed for an hour looking for a solution but I have not been able to find the right key word or something. This is my code

EDIT: You only really have to read some code from Home.php the est is only if someoe wants to run the code if they are not sure of their answer

Index.php(Login Page)

<?php

session_start();

mysql_connect("localhost","root","") or die ("cannot");
mysql_select_db("virtualdiary") or die ("db");

if (isset ($_POST["Username"])&& isset($_POST["Password"]))
{


$Username = $_POST["Username"];
$Password = $_POST["Password"];

$_SESSION["username"] = $Username;

$DB_Check = " SELECT * from users Where username = '".$Username."' and password = '".$Password."' " ;
$result = mysql_query($DB_Check);

if(mysql_fetch_assoc($result) === false){
    $error = "invalid username or password";
    }else{
    header( 'Location: Home.php' ) ;

    }
     }
?>

 <html>

<head>
<link type="text/css" rel="stylesheet" href="Index.css"/>
<title>Login</title>

</head>

<body>
<div id="main">
<div class="messages">
 <?php 
 if(isset($error))
  echo $error; ?>
</div>
<form action="Index.php" method="post">
 <h5>Diary Name:</h5>
     <input name="Username" type="text"/>

 <h5>Password:</h5>
     <input name="Password" type="password"/>
     </br>
     </br>
     </br>

     <input name="login" type="submit"/>

 </form>

 <p>Click <a href="Register.php">HERE </a>to register.</p>

 </div>
</body>
</html>

Home.php

  <?php 
session_start();
echo "Username = " . $_SESSION["username"] . " !";

mysql_connect("localhost","root","") or die ("cannot");
mysql_select_db("virtualdiary") or die ("db");

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



$entry = $_POST["entry"];

$submission = "INSERT INTO `virtualdiary`.`entries` (`entry`) VALUES ('". $entry . "')";

mysql_query($submission);
}
 ?>

 <html>

 <head>
 <link type="text/css" rel="stylesheet" href="Home.css"/>
 <title>Home</title>
 </head>
 <body>
 <h1>Entry:  </h1>
 <form method="post" action="Home.php">
    <textarea name="entry" rows="24" cols="87">
    <?php 
    if (isset($_POST["entry"])){
    echo $entry;
   } 
?>
</textarea>
     </br>
 </br>
    <input name="submit" type="submit"/>     
   </form>

     <button id="LogOut"><a href="Index.php">Log Out</a></button>
     </body>

   </html>

From what I have found from searching around I will need a Home.js file with an ajax call. I don't know the first thing about Ajax so I will probably need code to paste or a very blunt tutorial. Thanks

Upvotes: 2

Views: 9124

Answers (1)

TMH
TMH

Reputation: 6246

You could change the logout href to /Logout.php, and in Logout.php have 

<?php
session_start();
session_destroy();
header('Location: /Index.php');
?>

That will simply destroy the users current session, then redirect the user back to the Index.php page.

The AJAX way would be (using jQuery, I can't remember the vanilla JS syntax for ajax calls)

$.ajax({
    type: 'GET',
    url: '/Logout.php',
    success: function(msg) {
        if (msg == 'loggedOut') {
            window.location.href = 'Index.php';
        }
    }
});

And then you'd need to change Logout.php, instead of the header line, make it echo/die/print loggedOut (or a json string which would probably be better, but this is just an example).

Upvotes: 3

Related Questions