Web development tutorial

Tutorial created by Ray Borduin, WebAssist

3 ratings | Sign in to rate this tutorial | View comments

Print tutorial
Share this tutorial

Enable your website visitors to search your website to find what they are looking for. In this tutorial, we demonstrate how to use the Google Search tool in Free Tools to add a Google search form and display results on a web page.

For the sake of this tutorial covering everything, we're going to add search and results to one page. We suggest following along with this tutorial exactly to familiarize yourself with the process, but once you're comfortable, feel free to choose different options and apply search and results to your website the exact way you want it.

next section

What you need to start

Dreamweaver CS4 or newer
WebAssist Free Tools extension installed
- Own it.
- Download it.
- Learn how to install a Dreamweaver extension.
PHP/MySQL Testing Server
For more information, see Setting up a Testing Server on Windows or Setting up a Testing Server on Mac OS X.
Dynamic Site defined in Dreamweaver
For more information see Defining a dynamic site in Dreamweaver.

next section

Get Your Google API Key

Go to the Google API Console
Log in with the Google Account you wish the map to use.
Click the 'Create project...' button if needed.
Click the Services link in the left side menu.
If not already activated, activate the Google Maps API v3 service. You do this by clicking the ON/ Off status and accepting the terms of service if you haven't already.
If not already activated, activate the Custom Search API service. You do this by clicking the ON/ Off status and following the on screen steps.
Click the API Access link in the left side menu.
Copy the API key from the Simple API Access section.
Paste the API key in a text document for later use.

next section

Getting Your Unique ID

Now we need to create a new Google Search Engine instance.

Go to the Google Search Engine Control Panel
Log in with the Google Account you wish the search engine to be attached to.
Click New search engine.
Enter all required information and click the Create button.
Click Search Engine ID in the Details section and copy the Search engine unique ID value.
Paste the value in a text document for later use.

next section

Add the search functionality to your site

In Dreamweaver, open the page where you want to display search and results.
In Design view, click where you want to add the search text field.
Click WebAssist > Google > Search
Choose the Add Search and Results radio button and click OK.
On the Account Tab, enter your own API key and Unique ID we copied into your text document earlier.
Click the General Tab.
Change the Search Name to "my_search".
Set the Maximum Rows to 10. and the Navigation Pages to 10.
These two fields need to equal 100 when multiplied together. Since Google will only return 100 results for free, this keeps the pagination looking its best.
Click the Design Tab and configure the design to your heart's content and click Finish.
Give your design preset a name and click OK.
Save your search form and preview it in a browser.

For more...

View the Google Search help documentation to accomplish even more with this tool.

Visit the Free Tools support page for more Free Tools tutorials and documentation.

If you're looking to develop more robust forms, you may be interested in Data Bridge.

Reviews and comments

Comments will be sent to the author of this tutorial and may not be answered immediately. For general help from WebAssist, please visit technical support.

Sign in to add comments

3 ratings | Sign in to rate this tutorial