In this section of my tour of my websites, I will look at the search engine. I wanted to build a search engine for Aviation Photo Gallery which would enable users to search for a specific type of aircraft, and return a series of links to the corresponding photos in my website. As my the site is a photo gallery, I wanted the search results to include small thumbnail versions of the photos as well as the links.
I also wanted the search results to be ordered by event, and displayed as a series of pages with a maximum of five results per page. If more than five results are found, there must be a series of links to the other pages of results.
The basic design of the search engine is very simple. It consists of a database table which has a record for each photo on the site. Each record contains the name and owner/operator of the aircraft, a link to the corresponding page on the website, a link to the preview image, and a series of keywords to help identify each aircraft.
I use MySQL, which is a popular open-source relational database management system. MySQL stores all the tables, columns and rows of the database, as well as data contained within them.
A second linked MySQL table contains the name of the event or location where the aircraft appeared. When the user submits the search engine form, the data submitted is processed by a PHP script, where it is used in an SQL query to search the database. The search results are displayed in an HTML table, as shown above.
Up to five search results are displayed on the search page at any one time. If the search returns more than five, a series of links is displayed below the table of search results. The number of links required is calculated by dividing the total number of results by five. The links themselves are created as query strings using the PHP urlencode function. Clicking one of these links effectively re-submits the search page to itself, only displaying a different five results.
The search engine form consists of a standard HTML form, which is validated client-side by JavaScript regular expressions.
If the user enters invalid data, an alert box appears with an error message.
To make the search engine as accessible as possible throughout the site, I have included the search form and submit/clear buttons at the top of every page.
To see a demonstration of the Aviation Photo Gallery search engine, just type the name of an aircraft into the search field in the navbar at the top of this page. The search results will open in a new browser tab.
I have also built a search engine for my Scottish Mountain Landscapes website. Originally, this website was hand-coded with XHTML 1.0 Transitional, so the search engine worked in a very similar way to Aviation Photo Gallery.
However, I have now re-built Scottish Mountain Landscapes with the Joomla content management system, so a different approach is needed to integrate the search engine PHP script.
To achieve this, I have installed the Sourcerer plugin via the Joomla administration area.
Sourcerer allows code such as PHP, HTML, CSS and JavaScript to be pasted into Joomla content such as articles, sections, categories, modules, components and META tags.
This is a very useful addition to Joomla's basic functionality, as Joomla WYSIWYG editors tend to strip out parts of code that has been pasted directly into Joomla content.
Sourcerer works by placing special tags around any code to be included in Joomla content: {source}
and {/source}.
Sourcerer can also be used to call an external file such as a stylesheet or JavaScript to Joomla content, also by using special tags:
{source}<?php
$doc->addStyleSheet( JURI::root( true ).'/templates/elegant/css/search.css' );
?>{/source}
This enables a custom stylesheet or JavaScript to be added to specific Joomla articles, without affecting the rest of the site.
To see a demonstration of the Scottish Mountain Landscapes search engine, click here. The search results will open in a new browser tab.