Add Logout Script

It is important for a user to be able log out so that the another user cannot use the same computer with previous user still login. The Logout behavior will be used to destroy a session variable.

The code that will be created will perform the following tasks:

• PART A: ADD STATIC CONTENT
  • Add Static Logout buttons
• PART B: ADD DYNAMIC SCRIPT
  • Add Logout Script

PART A: ADD STATIC CONTENT

Add Static Logout Buttons

1. Open the EMPLOYEE MASTER PAGE (master_page.php) and add the following highlighted code in the <div data-role="header"> container:
   
   

   <div data-role="header">
     <h1>Employee Directory</h1>    
     <a style="float:right" href="logout.php" class="ui-btn ui-icon-user ui-corner-all ui-btn-icon-left">Log Out</a>
   </div>

   
   
2. Save the file.
3. Open the EMPLOYEE DETAIL page (detail_page.php) and add the following highlighted code to the <div data-role="header"> container:
   
   

   <div data-role="header">
     <h1>Employee Directory</h1>
     <a href="master_page.php" class="ui-btn ui-icon-home ui-corner-all ui-btn-icon-left">Home</a>
     <a href="logout.php" class="ui-btn ui-icon-user ui-corner-all ui-btn-icon-right">Log Out</a>
   </div>

   
   
4. Repeat the previous step for the following pages and then save them.
   • add_page.php
   • edit_page.php
   • registration_page.php

PART B: ADD DYNAMIC SCRIPT

Now, it is time to create a script to make the logout function work.

Create Logout Script

1. Open the logout.php file created earlier, delete any HTML tags, and then add the following highlighted code:
   
   

   <?php   
    session_start();  
    session_destroy();  
    header("location:index.php");  
   ?>

   
   
2. CHECK POINT: Save the file. Open the EMPLOYEE LOGIN page (index.php), provide a valid username and password, and then click the LOG IN button. Navigation to any of the following pages and then click the Logout button. You should be taken back to the EMPLOYEE LOGIN page (index.php).
   
   
   • EMPLOYEE MASTER PAGE
   • EMPLOYEE DETAIL
   • ADD EMPLOYEE
   • EDIT EMPLOYEE
   • EMPLOYEE REGISTRATION