title: How can I add a logout button to my logout page which has security features?
body: <p>When the user goes to my <a href="http://webbrowserinfo.96.lt/logindone/logincode/V1/" rel="nofollow noreferrer">website</a> after the user logins in on this <a href="http://webbrowserinfo.96.lt/logindone/logincode/V1/" rel="nofollow noreferrer">page</a> they're then presented with this <a href="http://webbrowserinfo.96.lt/logindone/logincode/V1/homepage.php" rel="nofollow noreferrer">page</a> . However, if I type in the full URL webbrowserinfo.96.lt/logindone/logincode/V1/homepage.php it loads regardless if the user logins in or not. From doing my own tests it has something to do with the log out button.  </p>
  
  <p>Therefore, I was thinking I need to do something like this below. However, when I add this code to my protected password page i.e <code>homepage.php</code> it doesn't work i.e nothing happens when I click logout.</p>
  
  <pre><code>&lt;form action="index.php" method="post"&gt;
             &lt;!-- Logout button --&gt;
             &lt;div class="inner_container"&gt;
                 &lt;button class="logout_button" type="submit"&gt;Log Out&lt;i class="fas fa-sign-in-alt"&gt;&lt;/i&gt;
                 &lt;/button&gt;
              &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>Here is my full code for the password protected code</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html lang="en"&gt;
     &lt;head&gt;
        &lt;meta charset="utf-8"&gt;
        &lt;meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"&gt;
        &lt;meta name="description" content=""&gt;
        &lt;meta name="author" content=""&gt;
        &lt;link rel="icon" href="../../../../favicon.ico"&gt;
        &lt;!-- Site title, CSS external file and font awesome --&gt;
        &lt;title&gt;Login Page - Created by Liam Docherty&lt;/title&gt;
        &lt;link rel="stylesheet" href="css/design.css"&gt;
        &lt;link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous"&gt;
        &lt;link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous"&gt;
     &lt;/head&gt;
     &lt;body class="bg-white"&gt;
        &lt;div class="container"&gt;
           &lt;div class="py-5 text-center"&gt;
              &lt;img class="d-block mx-auto mb-4" src="https://getbootstrap.com/docs/4.0/assets/brand/bootstrap-solid.svg" alt="" width="72" height="72"&gt;
              &lt;h2&gt;Checkout form&lt;/h2&gt;
              &lt;p class="lead"&gt;Below is an example form built entirely with Bootstrap's form controls. Each required form group has a validation state that can be triggered by attempting to submit the form without completing it.&lt;/p&gt;
           &lt;/div&gt;
           &lt;div class="row"&gt;
              &lt;div class="col-md-4 order-md-2 mb-4"&gt;
                 &lt;h4 class="d-flex justify-content-between align-items-center mb-3"&gt;
                    &lt;span class="text-muted"&gt;Your cart&lt;/span&gt;
                    &lt;span class="badge badge-secondary badge-pill"&gt;3&lt;/span&gt;
                 &lt;/h4&gt;
                 &lt;ul class="list-group mb-3"&gt;
                    &lt;li class="list-group-item d-flex justify-content-between lh-condensed"&gt;
                       &lt;div&gt;
                          &lt;h6 class="my-0"&gt;Product name&lt;/h6&gt;
                          &lt;small class="text-muted"&gt;Brief description&lt;/small&gt;
                       &lt;/div&gt;
                       &lt;span class="text-muted"&gt;$12&lt;/span&gt;
                    &lt;/li&gt;
                    &lt;li class="list-group-item d-flex justify-content-between lh-condensed"&gt;
                       &lt;div&gt;
                          &lt;h6 class="my-0"&gt;Second product&lt;/h6&gt;
                          &lt;small class="text-muted"&gt;Brief description&lt;/small&gt;
                       &lt;/div&gt;
                       &lt;span class="text-muted"&gt;$8&lt;/span&gt;
                    &lt;/li&gt;
                    &lt;li class="list-group-item d-flex justify-content-between lh-condensed"&gt;
                       &lt;div&gt;
                          &lt;h6 class="my-0"&gt;Third item&lt;/h6&gt;
                          &lt;small class="text-muted"&gt;Brief description&lt;/small&gt;
                       &lt;/div&gt;
                       &lt;span class="text-muted"&gt;$5&lt;/span&gt;
                    &lt;/li&gt;
                    &lt;li class="list-group-item d-flex justify-content-between bg-light"&gt;
                       &lt;div class="text-success"&gt;
                          &lt;h6 class="my-0"&gt;Promo code&lt;/h6&gt;
                          &lt;small&gt;EXAMPLECODE&lt;/small&gt;
                       &lt;/div&gt;
                       &lt;span class="text-success"&gt;-$5&lt;/span&gt;
                    &lt;/li&gt;
                    &lt;li class="list-group-item d-flex justify-content-between"&gt;
                       &lt;span&gt;Total (USD)&lt;/span&gt;
                       &lt;strong&gt;$20&lt;/strong&gt;
                    &lt;/li&gt;
                 &lt;/ul&gt;
                 &lt;form class="card p-2"&gt;
                    &lt;div class="input-group"&gt;
                       &lt;input type="text" class="form-control" placeholder="Promo code"&gt;
                       &lt;div class="input-group-append"&gt;
                          &lt;button type="submit" class="btn btn-secondary"&gt;Redeem&lt;/button&gt;
                       &lt;/div&gt;
                    &lt;/div&gt;
                 &lt;/form&gt;
              &lt;/div&gt;
              &lt;div class="col-md-8 order-md-1"&gt;
                 &lt;h4 class="mb-3"&gt;Billing address&lt;/h4&gt;
                 &lt;form class="needs-validation" novalidate&gt;
                    &lt;div class="row"&gt;
                       &lt;div class="col-md-6 mb-3"&gt;
                          &lt;label for="firstName"&gt;First name&lt;/label&gt;
                          &lt;input type="text" class="form-control" id="firstName" placeholder="" value="" required&gt;
                          &lt;div class="invalid-feedback"&gt;
                             Valid first name is required.
                          &lt;/div&gt;
                       &lt;/div&gt;
                       &lt;div class="col-md-6 mb-3"&gt;
                          &lt;label for="lastName"&gt;Last name&lt;/label&gt;
                          &lt;input type="text" class="form-control" id="lastName" placeholder="" value="" required&gt;
                          &lt;div class="invalid-feedback"&gt;
                             Valid last name is required.
                          &lt;/div&gt;
                       &lt;/div&gt;
                    &lt;/div&gt;
                    &lt;div class="mb-3"&gt;
                       &lt;label for="username"&gt;Username&lt;/label&gt;
                       &lt;div class="input-group"&gt;
                          &lt;div class="input-group-prepend"&gt;
                             &lt;span class="input-group-text"&gt;@&lt;/span&gt;
                          &lt;/div&gt;
                          &lt;input type="text" class="form-control" id="username" placeholder="Username" required&gt;
                          &lt;div class="invalid-feedback" style="width: 100%;"&gt;
                             Your username is required.
                          &lt;/div&gt;
                       &lt;/div&gt;
                    &lt;/div&gt;
                    &lt;div class="mb-3"&gt;
                       &lt;label for="email"&gt;Email &lt;span class="text-muted"&gt;(Optional)&lt;/span&gt;&lt;/label&gt;
                       &lt;input type="email" class="form-control" id="email" placeholder="you@example.com"&gt;
                       &lt;div class="invalid-feedback"&gt;
                          Please enter a valid email address for shipping updates.
                       &lt;/div&gt;
                    &lt;/div&gt;
                    &lt;div class="mb-3"&gt;
                       &lt;label for="address"&gt;Address&lt;/label&gt;
                       &lt;input type="text" class="form-control" id="address" placeholder="34 Hoxton liam street" required&gt;
                       &lt;div class="invalid-feedback"&gt;
                          Please enter your shipping address.
                       &lt;/div&gt;
                    &lt;/div&gt;
                    &lt;div class="row"&gt;
                       &lt;div class="col-md-5 mb-3"&gt;
                 &lt;!-- Logout button --&gt;
                  &lt;a class="btn btn-primary" href="index.php" role="button"&gt;Signout button&lt;/a&gt;
                 &lt;/div&gt;
                 &lt;/div&gt;
              &lt;/div&gt;
           &lt;/div&gt;
        &lt;/div&gt;
     &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/S7MVT.png" rel="nofollow noreferrer">My website has three scripts here they're if you need to see them</a></p>
  
  <p>BELOW IS THE LOGIN PAGE CODE </p>
  
  <pre><code>&lt;?php
     //PHP method to use cache memory to store details
     session_start();
     //Makes the "config.php" file available to be executed from this page
     require_once('dbconfig/config.php');
     ?&gt;
  &lt;!DOCTYPE html&gt;
  &lt;html&gt;
     &lt;head&gt;
        &lt;!-- Site title, CSS external file and font awesome --&gt;
        &lt;title&gt;Login Page - Created by Liam Docherty&lt;/title&gt;
        &lt;link rel="stylesheet" href="css/design.css"&gt;
        &lt;link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous"&gt;
        &lt;link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous"&gt;
     &lt;/head&gt;
     &lt;body&gt;
        &lt;div id="main-wrapper"&gt;
           &lt;center&gt;
              &lt;h2&gt;Login Form - Created by Liam Docherty&lt;/h2&gt;
           &lt;/center&gt;
           &lt;div class="imgcontainer"&gt;
              &lt;img src="imgs/icon-person-512.png" alt="Avatar" class="avatar"&gt;
           &lt;/div&gt;
           &lt;!-- THE FORM --&gt;
           &lt;!-- action="index.php" -- This attribute shows where the PHP script that does the processing is located --&gt;
           &lt;!-- method="post" -- The attribute identifies the action that will be performed with the data of the form. I.E. POST data to the "users" database --&gt;
           &lt;form action="index.php" method="post"&gt;
              &lt;div class="inner_container"&gt;
                 &lt;label&gt;&lt;b&gt;Username&lt;/b&gt;&lt;/label&gt;
                 &lt;input type="text" placeholder="Enter Username" name="username" required&gt;
                 &lt;label&gt;&lt;b&gt;Password&lt;/b&gt;&lt;/label&gt;
                 &lt;input type="password" placeholder="Enter Password" name="password" required&gt;
                 &lt;!-- The Login button --&gt;
                 &lt;button class="login_button" name="login" type="submit"&gt;Login&lt;/button&gt;
                 &lt;!-- The button that is linked to the "register.php" page --&gt;
                 &lt;a href="register.php"&gt;&lt;button type="button" class="register_btn"&gt;Register&lt;/button&gt;&lt;/a&gt;
              &lt;/div&gt;
           &lt;/form&gt;
           &lt;?php
              //Condition, checking the Login button is pressed
              if(isset($_POST['login']))
              {
                  //The data from the Form (username &amp; password) is stored into the @$username &amp; @$passwordVariables
                  //You use @ before a VARIABLE in PHP when you do not want to initialise the VARIABLE before using it
                  @$username=$_POST['username'];
                  @$password=$_POST['password'];
  
                  //Statement that will SELECT the data from the "login" table, WHERE the Usename and Password typed match the typed ones
                  //Once the database is checked, if login details match than it stores the data in the "$query" VARIABLE
                  $query = "SELECT * FROM login WHERE username='$username' and password='$password' ";
                  //echo $query;
  
                  //This statement performs both the connection to the database using the values in the "$con" VARIABLE and
                  //The SELECT statement stored in the "$query" VARIABLE
                  $query_run = mysqli_query($con,$query);
                  //echo mysql_num_rows($query_run);
  
                  //IF the "$query_run" is run successfully, then
                  if($query_run)
                  {
                      //Check if the Username and Password exist in the database, if they exist
                      if(mysqli_num_rows($query_run)&gt;0)
                      {
                      $row = mysqli_fetch_array($query_run,MYSQLI_ASSOC);
  
                      $_SESSION['username'] = $username;
                      $_SESSION['password'] = $password;
  
                      //Sent the user to the "homepage.php" page
                      header( "Location: homepage.php");
                      }
                      else
                      {
                          //IF NOT, Display the message below
                          echo '&lt;script type="text/javascript"&gt;alert("No such User exists. Invalid Credentials")&lt;/script&gt;';
                      }
                  }
  
                  //IF the "$query_run" is NOT successful, then
                  else
                  {
                      //Display this message
                      echo '&lt;script type="text/javascript"&gt;alert("Database Error")&lt;/script&gt;';
                  }
              }
              else
              {
              }
              ?&gt;
        &lt;/div&gt;
     &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <blockquote>
    <p>MY OWN UPDATED ATTEMPT BASED ON HELP</p>
  </blockquote>
  
  <p>This issue with the code below is that it doesn't let me actually login. This is good though as it stops a user just typing in the full file path of the URL and bypassing the login system. </p>
  
  <pre><code>&lt;?php
  //check if session id is set. If it is not set, user will be redirected back to login page
  
  if(!isset($_SESSION['username'])){
       header('Location:index.php');
       die();
  }
  ?&gt;
  
  &lt;!doctype html&gt;
  &lt;html lang="en"&gt;
     &lt;head&gt;
        &lt;meta charset="utf-8"&gt;
        &lt;meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"&gt;
        &lt;meta name="description" content=""&gt;
        &lt;meta name="author" content=""&gt;
        &lt;link rel="icon" href="../../../../favicon.ico"&gt;
        &lt;!-- Site title, CSS external file and font awesome --&gt;
        &lt;title&gt;Login Page - Created by Liam Docherty&lt;/title&gt;
        &lt;link rel="stylesheet" href="css/design.css"&gt;
        &lt;link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous"&gt;
        &lt;link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous"&gt;
     &lt;/head&gt;
     &lt;body class="bg-white"&gt;
        &lt;div class="container"&gt;
           &lt;div class="py-5 text-center"&gt;
              &lt;img class="d-block mx-auto mb-4" src="https://getbootstrap.com/docs/4.0/assets/brand/bootstrap-solid.svg" alt="" width="72" height="72"&gt;
              &lt;h2&gt;Checkout form&lt;/h2&gt;
              &lt;p class="lead"&gt;Below is an example form built entirely with Bootstrap's form controls. Each required form group has a validation state that can be triggered by attempting to submit the form without completing it.&lt;/p&gt;
           &lt;/div&gt;
           &lt;div class="row"&gt;
              &lt;div class="col-md-4 order-md-2 mb-4"&gt;
                 &lt;h4 class="d-flex justify-content-between align-items-center mb-3"&gt;
                    &lt;span class="text-muted"&gt;Your cart&lt;/span&gt;
                    &lt;span class="badge badge-secondary badge-pill"&gt;3&lt;/span&gt;
                 &lt;/h4&gt;
                 &lt;ul class="list-group mb-3"&gt;
                    &lt;li class="list-group-item d-flex justify-content-between lh-condensed"&gt;
                       &lt;div&gt;
                          &lt;h6 class="my-0"&gt;Product name&lt;/h6&gt;
                          &lt;small class="text-muted"&gt;Brief description&lt;/small&gt;
                       &lt;/div&gt;
                       &lt;span class="text-muted"&gt;$12&lt;/span&gt;
                    &lt;/li&gt;
                    &lt;li class="list-group-item d-flex justify-content-between lh-condensed"&gt;
                       &lt;div&gt;
                          &lt;h6 class="my-0"&gt;Second product&lt;/h6&gt;
                          &lt;small class="text-muted"&gt;Brief description&lt;/small&gt;
                       &lt;/div&gt;
                       &lt;span class="text-muted"&gt;$8&lt;/span&gt;
                    &lt;/li&gt;
                    &lt;li class="list-group-item d-flex justify-content-between lh-condensed"&gt;
                       &lt;div&gt;
                          &lt;h6 class="my-0"&gt;Third item&lt;/h6&gt;
                          &lt;small class="text-muted"&gt;Brief description&lt;/small&gt;
                       &lt;/div&gt;
                       &lt;span class="text-muted"&gt;$5&lt;/span&gt;
                    &lt;/li&gt;
                    &lt;li class="list-group-item d-flex justify-content-between bg-light"&gt;
                       &lt;div class="text-success"&gt;
                          &lt;h6 class="my-0"&gt;Promo code&lt;/h6&gt;
                          &lt;small&gt;EXAMPLECODE&lt;/small&gt;
                       &lt;/div&gt;
                       &lt;span class="text-success"&gt;-$5&lt;/span&gt;
                    &lt;/li&gt;
                    &lt;li class="list-group-item d-flex justify-content-between"&gt;
                       &lt;span&gt;Total (USD)&lt;/span&gt;
                       &lt;strong&gt;$20&lt;/strong&gt;
                    &lt;/li&gt;
                 &lt;/ul&gt;
                 &lt;form class="card p-2"&gt;
                    &lt;div class="input-group"&gt;
                       &lt;input type="text" class="form-control" placeholder="Promo code"&gt;
                       &lt;div class="input-group-append"&gt;
                          &lt;button type="submit" class="btn btn-secondary"&gt;Redeem&lt;/button&gt;
                       &lt;/div&gt;
                    &lt;/div&gt;
                 &lt;/form&gt;
              &lt;/div&gt;
              &lt;div class="col-md-8 order-md-1"&gt;
                 &lt;h4 class="mb-3"&gt;Billing address&lt;/h4&gt;
                 &lt;form class="needs-validation" novalidate&gt;
                    &lt;div class="row"&gt;
                       &lt;div class="col-md-6 mb-3"&gt;
                          &lt;label for="firstName"&gt;First name&lt;/label&gt;
                          &lt;input type="text" class="form-control" id="firstName" placeholder="" value="" required&gt;
                          &lt;div class="invalid-feedback"&gt;
                             Valid first name is required.
                          &lt;/div&gt;
                       &lt;/div&gt;
                       &lt;div class="col-md-6 mb-3"&gt;
                          &lt;label for="lastName"&gt;Last name&lt;/label&gt;
                          &lt;input type="text" class="form-control" id="lastName" placeholder="" value="" required&gt;
                          &lt;div class="invalid-feedback"&gt;
                             Valid last name is required.
                          &lt;/div&gt;
                       &lt;/div&gt;
                    &lt;/div&gt;
                    &lt;div class="mb-3"&gt;
                       &lt;label for="username"&gt;Username&lt;/label&gt;
                       &lt;div class="input-group"&gt;
                          &lt;div class="input-group-prepend"&gt;
                             &lt;span class="input-group-text"&gt;@&lt;/span&gt;
                          &lt;/div&gt;
                          &lt;input type="text" class="form-control" id="username" placeholder="Username" required&gt;
                          &lt;div class="invalid-feedback" style="width: 100%;"&gt;
                             Your username is required.
                          &lt;/div&gt;
                       &lt;/div&gt;
                    &lt;/div&gt;
                    &lt;div class="mb-3"&gt;
                       &lt;label for="email"&gt;Email &lt;span class="text-muted"&gt;(Optional)&lt;/span&gt;&lt;/label&gt;
                       &lt;input type="email" class="form-control" id="email" placeholder="you@example.com"&gt;
                       &lt;div class="invalid-feedback"&gt;
                          Please enter a valid email address for shipping updates.
                       &lt;/div&gt;
                    &lt;/div&gt;
                    &lt;div class="mb-3"&gt;
                       &lt;label for="address"&gt;Address&lt;/label&gt;
                       &lt;input type="text" class="form-control" id="address" placeholder="34 Hoxton liam street" required&gt;
                       &lt;div class="invalid-feedback"&gt;
                          Please enter your shipping address.
                       &lt;/div&gt;
                    &lt;/div&gt;
                    &lt;div class="row"&gt;
                       &lt;div class="col-md-5 mb-3"&gt;
                 &lt;!-- Logout button --&gt;
                  &lt;a class="btn btn-primary" href="index.php" role="button"&gt;Signout button&lt;/a&gt;
                 &lt;/div&gt;
                 &lt;/div&gt;
              &lt;/div&gt;
           &lt;/div&gt;
        &lt;/div&gt;
     &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>