troubleshooting Question

Php session can not be terminated

Avatar of Ashraf Hassanein
Ashraf Hassanein asked on
JavaScriptPHPAJAX
12 Comments1 Solution652 ViewsLast Modified:
I have a web page below  which has a logout button if you click it has to execute the logout.php and if it get back true it has to reload the page.
But whjen reloading the page I have default script which is triggered to check if you are still logged in or not by check the if the $_SESSION['username']  is empty or not, but it is always saying that the username is there,any hint please on how to kill the session?
The Web page is:
<?php
session_start();
?>
<HTML>
<HEAD>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
         <link rel="stylesheet" type="text/css" href="css/main.css">
        <link rel="stylesheet" type="text/css" href="css/jquery.ui.all.css">
        <script type="text/javascript" src="js/jquery-1.10.1.min.js"></script>
        <script type="text/javascript" src="js/jquery-ui-1.10.3.custom.min.js"></script>
</HEAD>
<BODY>
 <div class="header-frame" name="header" id="header">
   <div class="ribbon" id="ribbon">
<strong class="ribbon-content" id="ribbon-content"><img src="../images/logo.gif" alt="mysite" width="150" height="75"></strong>
</div>
<div  id="status-block">
   <label id="logged-username">Username:</label>
   <span id="logged-username-value" class="username"  >
   <br>
   <label id="logged-userIP">Client IP:</label>
   <span id="logged-userIP-value" class="userIP"  >
   <br>
   <label id="logged-priviliges">Role:</label>
   <span id="logged-priviliges-value" class="priviliges"  >
   <br>
   <label id="logged-sesssionDate">Logged On:</label>
   <span id="logged-sesssionDate-value" class="sesssionDate"  >
   <br>
   <label id="logged-sesssionTime">Logged At:</label>
   <span id="-logged-sesssionTime-value" class="sesssionTime"  >
   <br>
</div>
<div id="toolbar-block">
<div id="header-toolbar" class="ui-widget-header ui-corner-all">
<button id="logout">Logout</button>
<button id="settings">Settings</button>
</div>
  <ul id="toolbar-menu" >
    <li><a href="#">Open...</a></li>
    <li><a href="#">Save</a></li>
    <li><a href="#">Delete</a></li>
  </ul>
</div>

                <script>
                 $(function() {
                        var $logout = $("#logout").button({ text: false, icons: { primary: "ui-icon-key" } });
                        var $settings = $("#settings").button({ text: false, icons: { primary: "ui-icon-gear", secondary: "ui-icon-triangle-1-s" } });
                        var $menu = $("#settings").parent().next().show();

                $(document).click(function() {
                        $menu.hide();
                $settings.removeClass("active");
                });
                $logout.click(function() {
                                      $.ajax({
                                              url: 'logout.php', 
                                              type: 'POST',
                                              data: {}, 
                                              success: function(response){
                                             if(response=="true"){
                                               $("#header").load("header.php");
                                               $("#menu").load("menu.php");
                                               $("#main").load("login.php");
                                               }
                                      }
                                      });

                        });
                $settings.click(function(evt) {
                        evt.stopImmediatePropagation();
                        $(this).toggleClass("active")
                        $menu.css("display", $(this).hasClass("active")?"block":"none");
                        $menu.position({ my: "left top", at: "left bottom", of: this });
                        });

                $settings.parent().buttonset().next().hide().menu();

                $menu.hover(function() {
                $(this).addClass("overme");
                }, function() {
                        if($(this).hasClass("overme")) {
                                $(this).hide();
                                $(this).removeClass("overme");
                                $settings.removeClass("active");
                                }
                        });

                $menu.click(function(evt) {
                        alert($(evt.target).text());
                        });
                });
                $.post("check_session.php", {}, function(response){
                    if(response=="true"){
                     var username= <?php echo json_encode($_SESSION['username'], JSON_HEX_TAG); ?>;
                     var userIP= <?php echo json_encode($_SESSION['userIP'], JSON_HEX_TAG); ?>;
                     var priviliges= <?php echo json_encode($_SESSION['priviliges'], JSON_HEX_TAG); ?>;
                     var sesssionDate= <?php echo json_encode($_SESSION['sessionDate'], JSON_HEX_TAG); ?>;
                     var sesssionTime= <?php echo json_encode($_SESSION['sessionTime'], JSON_HEX_TAG); ?>;
                      $("#logged-username-value").html(username);
                      $("#logged-userIP-value").html(userIP);
                      $("#logged-priviliges-value").html(priviliges);
                      $("#logged-sesssionDate-value").html(sesssionDate);
                      $("#logged-sesssionTime-value").html(sesssionTime);
                      $("#status-block").show('show');
                      $("#toolbar-block").show('show');
                     } else {
                      $("#status-block").hide();
                      $("#toolbar-block").hide();
                          }
                });
                </script>
</div>
<div id="bottom"> 
 <div class="menu-frame" name="menu" id="menu">
   menu
 </div>
 <div class="main-frame" name="main" id="main">
   	<div id="upper-login-window">
		
		<form autocomplete="off" name="loginForm" id="loginForm" action="" method="POST">
		
		<label for="name" id="login-username">Username:</label>
		
		<input type="name" name="username" id="username-login" onclick="this.value=''" />
		
		<label for="username" id="login-password">Password:</label>
		
		<p><a id="forgetPassword" href="#">Forgot your password?</a>
		
		<input type="password" name="password" id="password-login" onclick="this.value=''" />

                <img id="siimage" style="border: 1px solid #000; margin-right: 15px" src="securimage/securimage_show.php?sid=779b77d5c67e072a69587a319ca5e1be" alt="CAPTCHA Image" align="center" onclick="this.blur()" />

                <object type="application/x-shockwave-flash" data="securimage/securimage_play.swf?bgcol=#ffffff&amp;icon_file=securimage/images/audio_icon.png&amp;audio_file=securimage/securimage_play.php" width="20" height="20">
                <param name="movie" value="securimage/securimage_play.swf?bgcol=#ffffff&amp;icon_file=securimage/images/audio_icon.png&amp;audio_file=securimage/securimage_play.php" />
                </object>


                <a id="refresh-captcha" href="#" title="Refresh Image" onclick="document.getElementById('siimage').src = 'securimage/securimage_show.php?sid=' + Math.random(); this.blur(); return false"> 
	 
                <img src="images/refresh.png" alt="Reload Image" height="20" width="20" onclick="this.blur()" align="bottom" border="0" />
  
                </a>

		<input type="captcha" name="captcha_code" id="captcha_code" onclick="this.value=''" placeholder="Enter Code" />
	
		<div id="lower-login-window">
		
		<input type="checkbox" name="keepMe" id="keepMe" value="false" ><label class="check" for="checkbox" id="login-keepMe">Keep me logged in</label>
		
		<input type="submit" id="button-login" value="Login">
		
		</div>
		
		</form>
		
	</div>
	
	<!-- End Page Content -->
<script src="js/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
    $.noConflict();

    function reloadCaptcha()
    {
        jQuery('#siimage').src = 'securimage/securimage_show.php?sid=' + Math.random();
    }
      $(function () {
        $('#loginForm').on('submit', function (e) {
          $.ajax({
            type: 'post',
            url: 'check_login.php',
            data: $('#loginForm').serialize(),
            success: function (response) {
               if(response=="true"){
                   $("#main").load("content.php");
                   $("#menu").load("menu.php");
                   $("#header").load("header.php");
               } else {
                   alert(response);
                   $("#main").load("login.php");
               }
            }
          });
          e.preventDefault();
        });
      });
   $("#keepMe").click(function() {
       if($(this).is(":checked")) {
           $(this).val('true');
      }else{
           $(this).val('false');
     }
}); 
</script>
 </div>
 </div>
</BODY>
</HTML>


logout.php
    $response="";
    session_destroy();
    session_unset();
    $_SESSION = array();
    $_SESSION = array_filter($_SESSION);
    if( !isset($_SESSION['username']) ) {
       $response="true";
    }
    else {
       $response="true";
     }
    echo $response;

check_session.php
<?php
session_start();
$status="";
if( empty($_SESSION['username']) ) {
     $status="false";
}
else {
     $status="true";
}
echo $status;
?>
ASKER CERTIFIED SOLUTION
Join our community to see this answer!
Unlock 1 Answer and 12 Comments.
Start Free Trial
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 1 Answer and 12 Comments.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros