Bummer! This is just a preview. You need to be signed in with a Basic account to view the entire video.

Preview

Start a free Basic trial
to watch this video

Sign up for Treehouse

Displaying Item Details

5:55 with Alena Holligan

Now that we have specified the item we want to use and grabbed the details for that item, we're ready to display those details on our page using the array keys.

We need to update our functions.php file to replace the "#" with a link to details.php. We'll need to also include our item id in the query string. Example: "details.php?id=101"

The function we need to update is get_item_html 

function get_item_html($id,$item) {
    $output = "<li><a href='details.php?id="
        . $id . "'><img src='" 
        . $item["img"] . "' alt='" 
        . $item["title"] . "' />" 
        . "<p>View Details</p>"
        . "</a></li>";
    return $output;
}
  • 0:04

    Let's create a new div with the class="media-details".

  • 0:14

    First, we'll put the title within the h1 tags.

  • 0:28

    Next, we'll create a table with the item details.

  • 0:37

    We'll start by creating a row for category.

  • 0:44

    Table header is category.

  • 0:53

    Now, we'll pull our echo

  • 0:58

    $item["category"].

  • 1:03

    Now, let's copy and past this row three times.

  • 1:10

    We'll change this for Genre.

  • 1:15

    Format.

  • 1:21

    And Year.

  • 1:26

    These are the shared attributes for all the items in the catalog.

  • 1:30

    Each of our categories also has some specific attributes.

  • 1:34

    We'll use a conditional to check our category and

  • 1:36

    display the attributes associated with each category.

  • 1:39

    Once again, we'll use our string to lower function to make our categories match.

  • 1:55

    If the item category ==" books", we'll want to show the authors,

  • 1:59

    publishers and ISBN.

  • 2:03

    Let's close off our PHP and we'll open it around our end tag.

  • 2:10

    Let's copy our category row and paste it three times.

  • 2:22

    Now we'll switch out Authors,

  • 2:30

    Publisher.

  • 2:36

    ISBN.

  • 2:41

    Let's preview the page now.

  • 2:42

    You'll see that we have most of our details, but

  • 2:45

    we're getting a notice array to string conversion, instead of our authors.

  • 2:51

    Authors are another array nested within our item.

  • 2:54

    What we want to do is print out a string of each of the authors separated

  • 2:57

    by a comma.

  • 2:58

    We could do this with a for each loop like we've done before.

  • 3:01

    However, we don't want to add anything to the beginning or end of our string,

  • 3:05

    just in between the elements.

  • 3:08

    Luckily for us, PHP has another function that will do just that, implode.

  • 3:13

    Implode takes two parameters and joins the array pieces into a string.

  • 3:18

    The first parameter is the string you want to use to separate the elements and

  • 3:22

    the second parameter is the array itself.

  • 3:25

    The string separator can be anything or group of things such as HTML.

  • 3:30

    This can be really useful if you want to make a list of items in HTML.

  • 3:34

    Let's take a look at this in our code.

  • 3:37

    In this case, we want to echo out implode, a comma and

  • 3:43

    a space between each of the authors in our array.

  • 3:50

    Now when we refresh the browser,

  • 3:53

    we see our list of authors separated by a comma and a space.

  • 3:58

    We need to add a conditional for our last two categories.

  • 4:02

    Let's clean up this if line.

  • 4:09

    And copy it and paste it right before our closing statement.

  • 4:17

    We'll add a closing curly braces and then an else.

  • 4:22

    If our category item equals movies.

  • 4:28

    We're gonna copy one line of Publisher and

  • 4:34

    change it to Director.

  • 4:40

    And then we're going to copy our implode.

  • 4:48

    And paste it two times for

  • 4:51

    Writers And Stars.

  • 5:01

    Finally, we'll copy and paste this else if statement one more time.

  • 5:11

    And change it to music.

  • 5:15

    We can copy Director and paste this row and change it to Artist.

  • 5:28

    Now we're ready to preview our page again.

  • 5:31

    Nothing has changed for our book.

  • 5:33

    But if we change our ID from 101 to 201,

  • 5:39

    we see Forrest Gump with our director, writers and stars.

  • 5:46

    If we change to 301, we see our music of

  • 5:49

    Beethoven with our artist, Ludwig van Beethoven.

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

Sign up