[MUSIC]

Welcome back.

We've had some great opportunities to work with the database and

re-factor our code to make it even more extensible.

We're ready to add one of the most important features of any collection,

search capabilities.

Searching allows users to get right to the information they want

instead of wading through the entire catalog or even a category.

Can you imagine an internet without search?

This is such an important feature that I want to add a search box to every page.

Thankfully, that's easy to do because we've already included a header file

on every page.

We can add the search box right below our header bar, then we'll make some

modifications to our catalog page so we can use that same code to display results.

>> Launch the workspace associated with this video and

open header.php from your includes folder.

Right before the final opening div for our content,

we're going to add a new div with a class of search.

Make sure you add this class so the form gets styled correctly.

Next we'll add a form tag.

We want visitors to enter data into this page and submit it to the server.

The form tag makes that possible.

Inside the form tag, we need two elements, a text field to enter the search term and

a submit button to send the search term to the server.

Let's start with the search term.

This will be a single line text field where a user can enter the search term.

We need to give this a name attribute.

The server will reference it by name.

You'll see in a minute that this name will also be visible to our users, so

we want to keep it short.

You will often see sites use a single letter, such as s for

search or q for search query.

We'll use s.

The second input tag we have will be a submit button.

This will be the button that a visitor clicks to submit the form.

With the submit button, you specify a label for

the button in the value attribute.

Let's give this a short label, like go.

Let's also add a label tag to our form.

We'll type search with a colon.

We also need to add an attribute to our input field.

We need an id = s as well.

Our id from our input field and our for from our label should match up.

Let's take a look at this page in the browser.

The CSS included with this project styles the form to fit with the overall design of

the rest of the site.

Let's enter a search term and submit the form just to see what happens.

The browser loads the current page again, but notice that the web address

now includes a get variable with the name from our input field s and

the value equal to what we entered, alena.

When working with forms, remember that we discussed two attributes for

form elements, action and method.

The action attribute defines the destination

where the form data will be submitted.

We can specify a web address here.

But if we leave it blank, the form will submit back to the current page.

The method attribute defines the request method used on the next request

that includes the submitted form data.

The two possible values are get and post.

The default value, when no method is specified, is get.

In general, you should use post when the form submission is creating records or

taking some other action, like sending an email.

We use post for our suggest form.

However, you should use get when the form submission is merely retrieving or

getting data, which is what our search form will do.

The nice thing about get is that the values become part of the web address.

You can bookmark this web address, or share it in social media and

other people will be able to follow the link and see the same search results.

You would never bookmark a contact form submission, but it is perfect for

a form submission that retrieves data.

Let's go back to header.php.

Even when the default values are what we want to use, it's a good idea to add them.

This will tell any developers working on this after we do

that we made intentional decisions about these attributes.

They won't wonder if we just forgot about them.

For the method, we'll specify get, and for

the action, we'll specify our catalog.php page.

We now have our search form in place so

that a site visitor can submit a search term.

We are ready to load that search term into a php variable on our catalog page and

display those results.

This is similar to what we're doing for our category pages.

But now we're going to give the user more control.