This course will be retired on June 1, 2025.

Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

Build a Basic PHP Website

Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

Adding Active States to the Navigation

4:29 with Alena Holligan

We can use conditionals and variables to make further changes to the HTML output on different pages. In this video, we’ll add a new variable and use a conditional to check its value in our main navigation menu.

Update to html

index.php unordered list for our random items should have a class of "items".

<ul class="items">

Preventing Errors

If you forget to add the $section variable to a page, you could see an error. This is why we set "$section = null;" on the index page. If you want to make sure you code works without an error even if $section is not defined, you could include the isset function in you if statement as well.

Example:

if (isset($section) && $section == "books")

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

    Related Discussions

    Have questions about this video? Start a discussion with the community and Treehouse staff.

    Sign up

    Great job. You've created a header and a footer, 0:00
    used variables and conditionals to make the site easier to build and maintain. 0:03
    There is one final thing that we want to add to our navigation. 0:07
    We'll use conditionals again in our header file and 0:10
    get the appropriate link underlined. 0:13
    Let's go into WorkSpaces and take a look at header.php. 0:16
    I've coded the CSS file to underline links in the navigation with a particular class, 0:20
    a class of on. 0:24
    Adding the class to our navigation link will make our links underlined, but 0:27
    we can't just add this class in plain html or the link would underline on every page. 0:30
    Instead, we need to add it with PHP in a conditional. 0:35
    We need a variable that tells us what section we're in. 0:39
    If we're in the book section, we can add the class to the books link. 0:43
    Let's open up catalog.php and create a variable for this. 0:46
    Right after this line where we assign page title, a value of full catalog, 0:51
    we're going to add $section = null for 0:56
    default, because by default, we're not showing any of our specific categories, 1:03
    we're just showing the full catalog, so we don't need anything to be underlined. 1:09
    Remember to use the single equals sign here when assigning a value. 1:13
    We also need to change that variable in our conditional block. 1:17
    In our book section let's add a variable here and assign it a value of books. 1:21
    And movies, we'll add it again 1:31
    with the value of movies and finally in music. 1:37
    We'll add section again with a value of music. 1:44
    Back in our header.php file, 1:50
    we can write a conditional to check the value of the section variable. 1:53
    Let me give you a word of caution. 1:57
    It can get a little confusing writing PHP code that 1:58
    conditionally generates the piece of HTML. 2:01
    In a case like this, I would recommend adding the plain HTML that you want first, 2:03
    before writing the PHP code. 2:09
    So right now, we have on here. 2:12
    So we're going to add our PHP code. 2:15
    Open our php block, and we're going to start by just echoing out, space, on, 2:17
    in quotes and with a semicolon, and close out our PHP. 2:25
    Now we want to add our conditional. 2:32
    So, we'll add if, $section, and we 2:34
    want to make sure we use our double equal sign because we're doing a comparison, 2:39
    equals "books", then we want to echo out our on. 2:44
    Now let's copy all of this and paste it into movies 2:55
    and change this to movies, paste it here and 3:02
    change it to music and finally paste it into suggest and change it to suggest. 3:08
    The last one checks if the section variable has a value of suggest. 3:16
    Then we wanna mark this link as active. 3:20
    Of course we also have to set that variable on the suggest page, 3:23
    so let's open suggest and let's assign the variable right after our page title again. 3:25
    $section equals suggest. 3:30
    Great. 3:35
    Now, even though we're not using underlining in our navigation for the index page, 3:36
    we need to add the variable there, as well, to prevent errors. 3:40
    So open index.php and assign a value of null. 3:43
    Index dot php, $section equals null. 3:47
    Great, now let's save all of these pages. 3:53
    Now we'll go into our browser and refresh the page. 3:57
    And we see that books is underlined. 4:00
    We click movies, music and suggest. 4:03
    And when we click on back to our homepage nothing is underlined. 4:08
    We're making some great progress on our media library. 4:13
    We have three different web pages in place. 4:16
    And we've learned about variables and conditionals. 4:18
    We'll spend some time on the catalog itself in the next set of videos. 4:21
    Populating some of the actual data and playing with arrays. 4:25

    You need to sign up for Treehouse in order to download course files.

    Sign up

      You need to sign up for Treehouse in order to set up Workspace

      Sign up