Learning Javascript
Learning Javascript

Reputation: 43

Different navigation display when logged in

I'm looking to display different navigation display when logged in.

For example, without logging in: Displays for navigation for all pages: Home/About/Game/Login & Register

After logging in: Displays for navigation for all pages: Home/About/Game/Logout

Here's my code for the navigation for about.php

<!-- Navbar -->
        <nav class="navbar navbar-default">
          <div class="container">
            <div class="navbar-header">
              <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>                        
              </button>
              <a class="navbar-brand"><img style= "height: 50px; width: 120px" src="#"></a>
            </div>
   <?php
        if(isset($_SESSION['username']) == false) {
            $mysqli = new mysqli("localhost", "mp01_user", "venture@1998", "mp01_game");
            $stmt = $mysqli-> prepare("SELECT username FROM users WHERE username= '$username'");
            $stmt->bind_param("s", $username);
            $stmt->execute();
            $stmt->bind_result($username);
            $stmt->fetch();
        ?>
        <?php 
            echo '<div class="collapse navbar-collapse" id="myNavbar">';
            echo '<ul class="nav navbar-nav navbar-right">';
            echo '<li><a href="index.html">HOME</a></li>  ';
            echo '<li><a href="about.html">ABOUT</a></li>';
            echo '<li><a href="game.html">GAME</a></li>';
            echo '<li><a href="contact.html">CONTACT</a></li>';
            echo '<li><a href="login.html">LOG IN/REGISTER</a></li>';
            $stmt->close();
            $mysqli->close();
        ?>
        <?php } else { 
            $mysqli = new mysqli("localhost", "mp01_user", "venture@1998", "mp01_game");
            $stmt = $mysqli-> prepare("SELECT username FROM users WHERE username= '$username'");
            $stmt->bind_param("s", $username);
            $stmt->execute();
            $stmt->bind_result($username);
            $stmt->fetch();


            echo '<div class="collapse navbar-collapse" id="myNavbar">';
            echo '<ul class="nav navbar-nav navbar-right">';
            echo '<li><a href="index.html">HOME</a></li>';
            echo '<li><a href="about.html">ABOUT</a></li>';
            echo '<li><a href="game.html">GAME</a></li>';
            echo '<li><a href="contact.html">CONTACT</a></li>';
            echo '<li><a href="logout.php">LOG OUT, <?php ?></a></li>';
         ?>        
              </ul>
            </div>
          </div>
        </nav>

For game.php, I set as a requirement to log in before viewing this page, hence users will be directed to login if they haven't done so.

<?php
    session_start();
    ob_start();
    If (!isset($_SESSION["username"])){
        $_SESSION['username'] = $username;
            header("Location:login.html");
        }
    else {
      $username = $_SESSION['username'];
    }
?>

This is my code for the navigation bar for game.php

<nav class="navbar navbar-default">
  <div class="container">
  <div class="navbar-header">
  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>                        
  </button>
  <a class="navbar-brand"><img style= "height: 50px; width: 120px" src="#"></a>
</div>


<div class="collapse navbar-collapse" id="myNavbar">
  <ul class="nav navbar-nav navbar-right">
    <li><a href="index.html">HOME</a></li>  
    <li><a href="about.html">ABOUT</a></li>
    <li><a href="game.html">GAME</a></li>
    <li><a href="contact.html">CONTACT</a></li>
    <li><a href="logout.php">LOG OUT</a></li>


  </ul>
</div>

Upvotes: 3

Views: 74

Answers (1)

E3Im
E3Im

Reputation: 330

You can use the same check as you do in game.php. For example:

<div class="collapse navbar-collapse" id="myNavbar">
  <ul class="nav navbar-nav navbar-right">
 <?php if (isset($_SESSION["username"])){ ?>
   <li><a href="logged in.html">Item that only logged in users can see</a></li>
 <?php } ?>
 <li><a href="everyone.html">Item that everyone can see</a></li>
  </ul>
</div>

Note: ofcourse you still need to check on every secure page if the user is logged in

EDIT AFTER COMMENT:

<div class="collapse navbar-collapse" id="myNavbar">
  <ul class="nav navbar-nav navbar-right">
    <?php if (isset($_SESSION["username"])){ ?>
      <li><a href="logout.html">logout</a></li>
    <?php }else{ ?>
      <li><a href="login.html">login / register</a></li>
    <?php } ?>
   </ul>
</div>

We check if the user is logged in, if the user is logged in we show the logout page, if not we show the login page.

Maybe a good thing to check if the user is already logged in on the login page. The follow check will do this and redirect the user if already logged in to a page:

if (isset($_SESSION["username"])){
      header("Location: PageForOnlyMembers.html");
}

Upvotes: 2

Related Questions