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

Displaying All Items

3:30 with Alena Holligan

We now have a multidimensional array to store the information for our Media Library Catalog. In this video, we’ll build out the main Catalog page to display each item in a grid.

Vocabulary

Multidimensional Array - these include Associative Arrays, Hashed Arrays and Nested Arrays.

Responsive Web Design - A technique for creating websites that work on multiple screen resolutions via the combination of fluid images, fluid grids, and media queries.

DOWNLOAD

Catalog data.txt

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

    In the last video, we updated out multidimensional array to look like this. 0:00
    Now let's include this file into our catalog page so 0:05
    that we can check it out in the browser. 0:07
    Include, inc/data.php. 0:13
    Great, let's save this and view it in browser. 0:19
    When we refresh our page, you'll notice we have much longer list. 0:24
    We have 12 pesky notices followed by array instead of our title. 0:28
    We changed each element from a simple piece of text to an array. 0:34
    Now we need to change your code to read this new array. 0:38
    Let's modify our code to display images of all 12 items in a nice four-column grid. 0:42
    I included the styling for this four column grid in the CSS for this project. 0:47
    Those styles target an unordered list with a class of items, 0:51
    inside a div with a class of category. 0:55
    Let's add those classes now. 0:57
    We'll add catalog here, and 1:03
    we'll add the class items here. 1:08
    For each element in the array, we need more than just text inside the list items. 1:15
    We'll start by adding an anchor tag inside the opening and closing item tags. 1:19
    We can't put a double quote here, because that would end out our string. 1:28
    So instead, we'll use a single quote. 1:31
    This eventually is going to link to a details page that 1:34
    will display the details of the item. 1:37
    For now, we're just gonna use the pound sign. 1:39
    We'll close our anchor tag. 1:42
    Now inside this link, we'll need to add our image. 1:47
    Our source and our alt tags are going to pull from our catalog of items. 1:52
    We can reference a particular element inside the interior array for 2:02
    the current item. 2:05
    By typing the name of the variable, item, and 2:07
    then in square brackets we are going to type the name of our key. 2:12
    The key is the name of the element that we want to use. 2:17
    For the image path, we want the path to the image which is stored in img. 2:19
    We'll do the same thing for our alt tag. 2:29
    End quotes, period, period, open quotes. 2:31
    Let's add our item. 2:37
    And for our alt we'll use the title tag. 2:40
    Since PHP doesn't care about white spaces, let's make this a little easier to read. 2:43
    I'll make this wrap where we want on a few extra lines. 2:48
    There we go. 2:57
    Instead of having the item here, 2:58
    we need a simple paragraph tag that says, view, details. 3:02
    Great, let's save this file and take a look at it in our browser. 3:09
    As you can see, we're almost there. 3:15
    For each item, we see the image, and the View Details link. 3:17
    When I move the mouse over a particular item, the CSS I put in place at 3:21
    the beginning of the project kicks in, and you see the nice hover effect. 3: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