Our library is really coming together,

we have all our data loaded and sorting on our catalog and category pages.

Currently all we see are the thumbnails of the items,

but we have a lot more data that we know about each item.

The last thing we need to do is to be able to display the details of each item,

let's add one more page.

Create a new page named details.php.

We want to make sure that this is right next to our other pages in the root of

our site.

Copy the entire top code block from php all they way down to including the header.

And paste it into our details page.

Now we'll make the changes specific to this page.

To pull the details for

a specific item, we're going to utilize the get variable again, to pass the ID.

Let's change the get variable in the first if statement.

Where it's looking to see if it is set get cat.

We're gonna change cat to id.

We're going to change what we're doing with the variable, so

let's remove this entire nested if statement.

If an ID was passed, we want to check if that ID is in our catalog.

So let's create a new ID variable.

We'll assign it the value of GET id.

Then we want to add another if is set to check for that ID within our catalog.

If isset catalog.

ID.

If we find an item, let's hit the value of that item to an item variable.

If we don't find an item or we aren't passing a variable,

then our item variable will not be set.

And we want to redirect them to a full catalog.

So down here we'll do another if isset item.

But we're going to change and use our negation operator.

So, if not isset item we're going to redirect.

The command for this is header.

This has nothing to do with our own header file that displays the logo and menu.

This is part of the HTTP, the hyper text transfer protocol that defines how

the server and the browser communicate before any HTML gets passed.

The header field we want to define is location.

This tells the browser to look for a different page, catalog.php.

We need to make sure we don't send anything else to the browser before

this redirect.

Even a blank line at the beginning of the file will cause the redirect to fail.

This is because a blank line, or a echo statement, will cause a header response

to be sent back to the requesting computer, nullifying the redirect header.

We also want to add an exit command.

This makes sure nothing else is processed while the redirect is happening.

The last thing we want to do in this top section of our file,

is to move the page title in the section below our redirect.

Then we know we can use the item values.

We'll change page title to item title.

We can leave section null since we're not using it in our navigation.

Now let's start adding the content for this page.

Start adding our divs.

Div class="section page".

Div class="wrapper".

Within the wrapper the first that we want to add is our image.

We're going to write the HTML for the image first.

Then add the PHP we need.

Image source and alt.

Now we'll fill in the PHP needed to grab the details of the item, php echo

$item["img"].

Php echo item title.

Included in the CSS you've been given is a style for this image.

We need to surround it with the div tag with a class of media picture.

Media-picture.

We also want to include a span tag, to give it a nice border.

When we take a look at this page in the browser, let's pull up this browser

page details.phpid=101.

We see a nice image but what we really want are the details.

Now let's go back and add those.