Home arrow MySQL arrow Page 2 - Building a Search Engine with MySQL and PHP 5

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:
  1. Building a Search Engine with MySQL and PHP 5
  2. Creating the front end
  3. Performing searches with MySQL and PHP 5
  4. Assembling the modules of the MySQL-driven search application
By: Alejandro Gervasio
Rating: starstarstarstarstar / 54
July 31, 2007

print this article
SEARCH DEV SHED

TOOLS YOU CAN USE

advertisement

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.



 
 
>>> More MySQL Articles          >>> More By Alejandro Gervasio
 

blog comments powered by Disqus
escort Bursa Bursa escort Antalya eskort
   

MYSQL ARTICLES

- Oracle Unveils MySQL 5.6
- MySQL Vulnerabilities Threaten Databases
- MySQL Cloud Options Expand with Google Cloud...
- MySQL 5.6 Prepped to Handle Demanding Web Use
- ScaleBase Service Virtualizes MySQL Databases
- Oracle Unveils MySQL Conversion Tools
- Akiban Opens Database Software for MySQL Use...
- Oracle Fixes MySQL Bug
- MySQL Databases Vulnerable to Password Hack
- MySQL: Overview of the ALTER TABLE Statement
- MySQL: How to Use the GRANT Statement
- MySQL: Creating, Listing, and Removing Datab...
- MySQL: Create, Show, and Describe Database T...
- MySQL Data and Table Types
- McAfee Releases Audit Plugin for MySQL Users

Developer Shed Affiliates

 


Dev Shed Tutorial Topics: