Skip to content

Student Listing: Adding Navigation Menu - Nav Menu

Create Navbar Logic

Almost every page in our application will be displaying a navbar. Create a script called navmenu.php and add the following code that checks the $page_title variable of the page that included this script: 

1
2
3
<?php
    $page_title = isset($page_title) ? $page_title : "";
?>

It is crucial that the opening PHP tag <?php is the first thing in your file (no spaces preceding) as this code runs before HTML headers are sent.

Remember we set the variable $page_title to one of the definitions created in pagetitles.php in the scripts that include navmenu.php (e.g. index.php, login.php, etc.).

Since we are using session variables in our application and navmenu.php will be included by most every script, let’s add the following code after the $page_title check that starts or resumes our session:

1
2
3
4
5
6
7
8
<?php
    $page_title = isset($page_title) ? $page_title : "";

    if (session_status() == PHP_SESSION_NONE)
    {
        session_start();
    }
?>

Notice, we call session_start() only after checking to see that none already exists.

The navbar is part of the HTML <body>, so we assume the Bootstrap style sheet was already included in the <head> section of the including script.

Add the HTML and code after the closing PHP tag (?>), and I will explain it in the following paragraphs:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<?php
    $page_title = isset($page_title) ? $page_title : "";

    if (session_status() == PHP_SESSION_NONE)
    {
        session_start();
    }

?>
<nav class="navbar sticky-top navbar-expand-md navbar-dark"
     style="background-color: #569f32;">
    <a class="navbar-brand" href=<?= dirname($_SERVER['PHP_SELF']) ?>>
        <img src="resources/happy_face_icon.png" width="30" height="30"
             class="d-inline-block align-top" alt="">
        <?= SL_HOME_PAGE ?>
    </a>
    <button class="navbar-toggler" type="button" data-toggle="collapse"
            data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup"
            aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
        <div class="navbar-nav">
            <a class="nav-item nav-link<?= $page_title == SL_HOME_PAGE ? ' active' : '' ?>"
               href=<?= dirname($_SERVER['PHP_SELF']) ?>>Home </a>
        </div>
    </div>
</nav>

The <nav> element has these Bootstrap class attributes set for the following purpose:

Class Property Purpose
.navbar Specifies this is a navbar
.sticky-top Sticks to the top as the page scrolls
.navbar-expand-md For responsive collapsing
.navbar-dark For white text on dark color backgrounds

Also, notice I set the style attribute to a background-color. If you omit this, you will have white text on a black background for the menu.

Next is a standard <a href> link with the class attribute set to navbar-brand with the href set to the home folder location, along with an image icon referencing MR_HOME_PAGE, which we defined in pagetitles.php. Create a folder under the Student Listing folder called resources to store your image icons. I called this one happy_face_icon.png.

The happy face icon is free to use with Creative Commons attribution, which I found here.

Then we have a <button> element with a class attribute set to navbar-toggler for the button to collapse for responsive design. This class collapses the navigation menu on mobile devices under a hamburger icon:

Then we have a <div> tag with a class set to collapse navbar-collapse to group and hide/collapse menu items. In this <div>, we put navbar-nav item links to our home, login, and signup pages. In fact, we already have a navigation link to our Home page here. Let's take a closer look at it:

1
2
3
4
5
6
7
8
9
<nav ...>
    <!-- ... -->
    <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
        <div class="navbar-nav">
            <a class="nav-item nav-link<?= $page_title == SL_HOME_PAGE ? ' active' : '' ?>"
               href=<?= dirname($_SERVER['PHP_SELF']) ?>>Home </a>
        </div>
    </div>
</nav>

To create a navigation item, you need to create a child <div> tag container with the class attribute set to navbar-nav. Next, you create a child <a href> link with the class set to nav-item nav-link. However, you will notice I added some PHP code with a ternary operator before the href attribute. This link is for the home page. However, we want the navigation link for the current page we are on to be highlighted (e.g., active):

1
"nav-item nav-link<?= $page_title == SL_HOME_PAGE ? ' active' : '' ?>"

If the home page is being displayed (i.e. index.php) the class attribute will be set as:

1
class="nav-item nav-link active"

Otherwise, it is set as:

1
class="nav-item nav-link"

We use this mechanism for all pages that include navmenu.php and have a link to its page.

For more details, see the documentation on how Bootstrap's Navbar works.

Making the Navbar Context Sensitive

Whether a user is logged in or not, and if they are, depending on their access rights, we want the navigation bar to be context sensitive.

  • If a user is not logged in, we want the navigation bar to look like this:

  • If a normal user is logged in, we want the navigation bar to look like this:

  • If a user with administrative rights is logged in, we want the navigation bar to look like this:

Immediately after the nav menu item to the home page, we want to add logic that displays the Add a Student menu item if a user with admin privileges is logged in. And just after that we want to add logic that displays the Login and Sign Up menu items if a user is not logged in, or add a Logout(username) menu item if the user is logged in:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
<nav ...>
    <!-- ... -->
    <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
        <div class="navbar-nav">
            <a class="nav-item nav-link<?= $page_title == SL_HOME_PAGE ? ' active' : '' ?>"
               href=<?= dirname($_SERVER['PHP_SELF']) ?>>Home </a>
            <?php if (isset($_SESSION['user_access_privileges']) && $_SESSION['user_access_privileges'] == 'admin'): ?>
                <a class="nav-item nav-link<?= $page_title == SL_ADD_PAGE ? ' active' : '' ?>" href="addstudent.php">Add a Student</a>
            <?php endif; ?>
            <?php if (!isset($_SESSION['user_name'])): ?>
                <a class="nav-item nav-link<?= $page_title == SL_LOGIN_PAGE ? ' active' : '' ?>" href="login.php">Login</a>
                <a class="nav-item nav-link<?= $page_title == SL_SIGNUP_PAGE ? ' active' : '' ?>" href="signup.php">Sign Up</a>
            <?php else: ?>
                <a class='nav-item nav-link' href='logout.php'>Logout (<?=$_SESSION['user_name'] ?>)</a>
            <?php endif; ?>
        </div>
    </div>
</nav>

NOTE: For a deeper dive on this logic please see the following sections in chapter 24:

  • Add Login Link to Navigation Bar
  • Add Logout Link to Navigation Bar
  • Add Sign Up Link to Navigation Bar
  • Add Navigation Bar to addmovie.php
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<?php
    $page_title = isset($page_title) ? $page_title : "";

    if (session_status() == PHP_SESSION_NONE)
    {
        session_start();
    }

?>
<nav class="navbar sticky-top navbar-expand-md navbar-dark"
     style="background-color: #569f32;">
    <a class="navbar-brand" href=<?= dirname($_SERVER['PHP_SELF']) ?>>
        <img src="resources/happy_face_icon.png" width="30" height="30"
             class="d-inline-block align-top" alt="">
        <?= SL_HOME_PAGE ?>
    </a>
    <button class="navbar-toggler" type="button" data-toggle="collapse"
            data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup"
            aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
        <div class="navbar-nav">
            <a class="nav-item nav-link<?= $page_title == SL_HOME_PAGE ? ' active' : '' ?>"
               href=<?= dirname($_SERVER['PHP_SELF']) ?>>Home </a>
            <?php if (isset($_SESSION['user_access_privileges']) && $_SESSION['user_access_privileges'] == 'admin'): ?>
                <a class="nav-item nav-link<?= $page_title == SL_ADD_PAGE ? ' active' : '' ?>" href="addstudent.php">Add a Student</a>
            <?php endif; ?>
            <?php if (!isset($_SESSION['user_name'])): ?>
                <a class="nav-item nav-link<?= $page_title == SL_LOGIN_PAGE ? ' active' : '' ?>" href="login.php">Login</a>
                <a class="nav-item nav-link<?= $page_title == SL_SIGNUP_PAGE ? ' active' : '' ?>" href="signup.php">Sign Up</a>
            <?php else: ?>
                <a class='nav-item nav-link' href='logout.php'>Logout (<?=$_SESSION['user_name'] ?>)</a>
            <?php endif; ?>
        </div>
    </div>
</nav>