Creating the front end of a MySQL-based search engine - MySQL

If you maintain a medium-sized, growing web site, you might find that it needs an internal proprietary search engine to improve your visitors' experience. This article, the first of three parts, will get you started with building such an engine using PHP and MySQL.

TABLE OF CONTENTS:

By: Alejandro Gervasio

Poor Best

Rating:

/ 54

July 31, 2007

print this article

SEARCH DEV SHED

TOOLS YOU CAN USE

A logical point to start building this MySQL-driven search application is with creating a basic front-end. It will be comprised of a simple online form into which users will be able to enter different search terms. Naturally, these search terms will first be inserted into a "SELECT" query, and then used to return to the client the corresponding database results, assuming the search has been successful.

Thus, keeping in mind this requirement, below I listed the signature of a simple (X)HTML file, called "form.htm." It simply displays the search online form that I mentioned a few lines above.

Here's the definition for this brand new file. Please take a look at it:

(definition of "form.htm" file)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

<title>MySQL-based Search Engine</title>

window.onload=function(){

if(document.getElementById&&document.
getElementsByTagName&&document.createElement){

var sfield=document.getElementsByTagName('form')[0].elements[0];

if(!sfield){return};

sfield.onfocus=function(){this.value=''};

sfield.onblur=function(){

if(!this.value){this.value='Enter your search term here'};

}

</script>

</head>

<body>

<h1>MySQL-based Search Engine</h1>

</form>

</div>

</body>

</html>

As you can see, the above (X)HTML file simply displays a typical text input box that lets users enter different search terms. These terms will be properly processed by MySQL to retrieve some database records. I decided to spice up the form in question with some JavaScript code to make it a bit more interactive.

So far, so good right? Now that you know how the basic structure has been created, please take a look at the signature of the following "default.css" CSS file, which is tasked with improving the look and feel of the online form.

Here's how this brand new CSS file looks:

(definition of "default.css" file)

body{

background: #ccc;

margin: 0;

padding: 0;

}

h1{

width: 375px;

padding: 10px;

margin-left: auto;

margin-right: auto;

background: #339;

font: normal 18px Arial, Helvetica, sans-serif;

color: #fff;

border: 1px solid #000;

text-align: center;

}

h2{

font: bold 18px Arial, Helvetica, sans-serif;

color: #339;

}

font: normal 10pt Arial, Helvetica, sans-serif;

color: #000;

}

a:link,a:visited{

font: normal 10pt Arial, Helvetica, sans-serif;

color: #00f;

text-decoration: none;

}

a:hover{

color: #f00;

text-decoration: underline;

}

.maincontainer{

width: 375px;

padding: 10px;

margin-left: auto;

margin-right: auto;

background: #f0f0f0;

border: 1px solid #000;

}

.rowcontainer{

padding: 10px;

margin-bottom: 10px;

background: #ccf;

}

.searchbox{

width: 200px;

font: normal 12px Arial, Helvetica, sans-serif;

color: #000;

}

.searchbutton{

width: 80px;

font: bold 12px Arial, Helvetica, sans-serif;

color: #000;

}

As shown above, the previous CSS file declares some basic styles which are quite useful for providing the online search form with a decent visual appearance. And speaking of that, the screen shot below illustrates very clearly how the web form looks after applying to it the previous CSS styles:

Al right, at this stage I have built a primitive front-end for entering different search terms. These terms will be embedded into a SELECT query and then processed by MySQL to return to the client the corresponding search results when possible.

In this case, the searching procedure will be performed on the web server with the assistance of some PHP classes. In the section to come I'll be showing you the respective signatures for these classes.

Please click on the link below and keep reading to see how these brand new PHP classes will be defined.

Next: Performing searches with MySQL and PHP 5 >>