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

Designing Interfaces in PHP

Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

Finishing Our Site

5:57 with Alena Holligan

To finish our site, we need to add some navigation as well a featured image for our pages. We'll loop through a new instance of a class and check and object for a specific class.

 <!-- Begin page Image -->
<div id="myCarousel" class="carousel slide" data-ride="carousel">
       <div class="carousel-inner" role="listbox">
           <div class="carousel-item active">
               <img class="first-slide" src="assets/img/<?php //featureImage ?>" alt="First slide">
           </div>
       </div>
   </div>

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

    We want to add navigation to our header file. 0:00
    So let's start in views, header.php. 0:02
    Where it says add page navigation, we're going to loop through our pages. 0:05
    Foreach (new Pages($repo) as $page). 0:14
    For each page, we're going to add a list item. 0:26
    This list item will link to the page slug. 0:30
    Echo '<li class="nave-item">. 0:33
    For the text of the navigation link, 0:49
    I'm going to perform a couple functions on the page slug. 0:51
    We are going to do a string replace. 0:55
    And I'm going to replace the dash with a space. 1:00
    On the page slug. 1:06
    Then I also want to uppercase the words, or ucwords. 1:09
    This will uppercase the first letter of each word. 1:17
    Now let's add the link. 1:21
    A class="nav-link" 1:29
    href="index.php?slug=. 1:35
    We can set this to $page->slug. 1:44
    And close our a tag. 1:52
    Then let's add our closing a tag. 1:54
    Finally, I want to set the active item, so 1:58
    Iā€™m going to use a conditional to check if the slug variable is set. 2:01
    So up with this class, 2:06
    if (isset($slug) 2:17
    && $slug == $page->slug). 2:22
    Then I'm going to echo ' active'; we also want to add a link to the blog articles. 2:30
    You could add it to the same menu but I'm going to add it to a secondary menu, 2:40
    where I have the comment to add Latest News. 2:44
    So I'm going to add a list item with a class="nav-item". 2:51
    A class="nav-link". 3:01
    Href="blog.php". 3:11
    Latest Blog Post. 3:17
    I also wanna check if our blog is active. 3:20
    If 3:34
    ($_SERVER['SCRIPT_NAME'] 3:35
    == '/blog.php'). 3:46
    Then I'm going to echo ' active'. 3:54
    Let's test out our navigation. 3:59
    Our pages work, our posts work, and we're ready to add our featured image. 4:08
    We're going to add a new feature but only for our pages. 4:15
    So under src/classes/Pages, we're going to add one more method to our Pages class. 4:19
    We'll name this public function featuredImage. 4:25
    This method will return the current item image. 4:36
    Return $this->current()->image. 4:39
    Back in header.php, down where you see Add featured image, 4:44
    we're going to add a conditional. 4:50
    If ($content instanceof Pages) 4:53
    We used instanceof in reference to our trackable and sharable interfaces earlier. 5:09
    Instanceof will let us check for any class or interface in an object's hierarchy. 5:15
    I've added the HTML for the featured image in the notes associated with this video. 5:21
    We can paste this here and 5:26
    then we can use the featured image method from our Pages class. 5:28
    Echo $content->featuredImage. 5:31
    Let's preview our site one last time. 5:41
    Our site is now complete. 5:44
    We have featured images on each page. 5:46
    And we have a blog listing that links to individual blog posts. 5:48

    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