Where are we?

You know how to make a static Web site. You can make a site more useful by adding widgets.

This lesson’s goals

Search is one of the most important widgets. This lesson shows you how to add a simple search function to your site.

By the end of this lesson, you should:

• Know why search makes your site more valuable.

• Be able to create a search form on your site.

• Be able to run Google searches from your site.

Why search matters

A good search function makes your site more valuable to visitors. How’s that?

It’s all about benefit/cost ratio. Someone comes to your site with a question. Your content can help them answer the question. That’s a benefit.

But using your site comes at a cost: the time it takes to find the content that answers the question. If it takes a long time, the cost of using your site to answer the question gets too high. People will go elsewhere.

A search function does not add content to your site. But it reduces the cost of finding the content that is already there. The result? Your site has a higher benefit/cost ratio. It’s more valuable to users.

But how do you add search?

Using Google’s search engine

Google already does a good job with search. So let’s borrow their search engine.

You know how to use Google. You go to http://google.com, and enter your search terms:

Figure 1. Starting a Google search

When you click the Search button, your browser takes the URL of the search engine:

http://www.google.com/search

Then it adds the data you typed into the search field:

@http://www.google.com/search?q=page+layout

Your browser sends the entire string to the server at google.com. The server extracts the data page layout, runs the search, and shows you the results.

Figure 2. Search result

It’s not quite that simple, but this is close enough for us to work with.

Try it yourself. Go to Google, type in some search terms, and run the search. Check out the URL of the results page. It won’t look exactly like the one I just gave you, but you’ll see the terms you typed embedded in the URL.

Notice that page layout typed into the text field became page+layout when added to the URL. This is called URL encoding. Special characters like spaces, colons, etc., don’t work well in URLs, so they get replaced. When the google.com server gets the URL, it will reverse the changes, converting page+layout back to page layout.

But wait, there’s more.

You can restrict your Google search to a specific site, using the site parameter:

Figure 3. Starting another Google search

The search engine will only search within the site you named. The results might be:

Figure 4. Another search result

Look at the URL in Figure 4:

http://www.google.com/search?q=site%3Acoredogs.com+page+layout

There’s that URL encoding again. site:coredogs.com page layout was converted into site%3Acoredogs.com+page+layout. The : became %3A.

What’s our strategy for adding search to a site? And we just want the search results to show content from our site, not someone else’s.

Two steps.

• Visitors type in search terms to a form on our site.

• We send the search terms to Google, telling it to restrict the search to just our own site.

The form will look like this:

Figure 5. Our form

The user will type in some search terms:

Figure 6. Our form with search terms

When the visitor clicks the button, s/he will see the same search he/she would have gotten from using Google on our site:

Figure 4 (again). Another search result

Let’s do it piece by piece.

Creating the search form

This HTML will create the search form:

<h1>Search Demonstration</h1>
<div id="search_form">
  <input id="search_terms" type="text" size="20">
  <button id="search_button" title="Search this site">Search</button>
</div>

Figure 7. HTML for the search form

The <div> contains the entire form. It’s just an <input> field and a single <button>.

Here’s some CSS to style the form:

#search_form {
  background-color: #FBC766;
  padding: 10px;
  margin: 10px;
  float: left;
  border: 1px gray dotted;
}

Figure 8. CSS for the search form

If you wanted to put the form on the right of the page (in the header, say), you would change float: left; to float: right;. You can read about page layout with headers and such in another lesson.

Coding the search button

Now for the JavaScript code.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
  $(document).ready(function() {
    $("#search_terms").focus();
    $("#search_button").click(function() {
      var search_terms = $("#search_terms").val();
      if ( search_terms ! == "") {
        var google_url = "http://google.com/search?q="
          + "site:coredogs.com "
          + search_terms;
        window.location.href = google_url;
      }
    });
  });
</script>

Figure 9. JavaScript for the search form

As usual, we include the jQuery library (line 1). Remember, you can just copy-and-paste this line into your own page. No need to download anything.

The code in the ready() event (lines 3 to 14) runs when the page has finished loading. It puts the keyboard cursor in the search field (line 6). You might not do this normally, but it’s convenient for testing the script.

When the user clicks the Search button, the code in lines 6 to 11 runs.

Line 6 gets what the visitor typed into the text field, and puts it into a variable called search_terms.

Maybe the visitor clicked the Search button without typing anything. We don’t want to run the search, because there’s nothing to search for.

Line 7 takes care of that. Remember that != means “not equal to.” Two quotes together – "" – are an empty string. So, with:

if ( search_terms != "" ) {
...
}

the statements in the … will only run if search_terms has something in it.

Lines 8 to 10 construct the destination URL, and put it into the variable google_url. We start with http://google.com/search?q=, then add the site name (line 9), and finally the search terms typed by the site visitor (line 10).

To search a different site, replace coredogs.com in line 9 with another site name.

Line 11 tells the browser to go to URL in google_url. The browser will automatically URL encode google_url.

You can try it yourself.

W00f!

Other ways to add search

What we did works, but it has problems. The most important is that it loses the look of your site. But there are other ways to add search to your site.

You will always need a search engine. A search engine is a program that can read through a bunch of HTML and other files, looking for matching text. Google has a search engine. So does Yahoo. Bing is another.

There are two choices. You can use someone else’s search engine, like we did above. Or you can install your own on your Web site.

Using someone else’s is easier. Googe Site Search is a paid service that can be used without Google branding. It shows search results on your site in your format.

To use your own search engine, you install a program on your server. You link your search form to it, so that the program runs when a user does a search.

You need to know how to install server-side programs to operate your own search engine. The ServerCore book is all about server-side programs. But if you want to see what’s out there, try HotScript’s PHP search engines page.

Summary

Search is one of the most important widgets. This lesson showed you how to add a simple search function to your site. You learned:

• Why search makes your site more valuable.

• How to create a search form on your site.

• How to run Google searches from your site.

What now?

We’ve just started our tour of widgets you can add to your site. Let’s look at widgets that can make you some money.