Building a Search Engine with MySQL and PHP 5 - Creating the front end (Page 2 of 4 )
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">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-
8859-1" />
<title>MySQL-based Search Engine</title>
<link href="default.css" rel="stylesheet" type="text/css" media="screen" />
<script language="javascript" type="text/javascript">
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>
<div class="maincontainer">
<form method="get" action="processform.php">
<input type="text" name="searchterm" title="Enter your search
term here" value="Enter your search term here"
class="searchbox" />
<input type="submit" name="search" title="Search Now!
"value="Search" class="searchbutton" />
</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;
}
p{
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 >>
More MySQL Articles
More By Alejandro Gervasio
|
| · | | · | | · | | · | | · | | · | | · | | · | | · | | · | | · | | · | | · | | · | | · | | · | | | | |
|
/ 18 
