How to Create an Image Search Engine For Your Website Using PHP

Enter Search Query:

In this article, we show how to build your own search engine for your website using just PHP that exclusively returns only images. So it's a search engine that only returns images back in its search results.

This search engine we are going to build doesn't require MySQL in conjunction with PHP. It just requires PHP alone.

You can see the search engine shown above.

This search engine shown above searches this whole site.

This website has a pretty good, extensive list of articles on electronics. So if you type in 'transistor', 'resistor', 'capacitor', 'power', 'circuit', you'll get back a ton of results.

This search engine outputs the images that are found based on the search.

It lists every image on my website that matches all of the words in the search query.

If you try it out above, you'll see this.

It's very simple and it doesn't require any vast enormous databases such as using a MySQL database and having multiple tables to search. It's just PHP.

So how does this work?

So, as you probably know if you run a website, you upload files to your website through a file transfer protocol (FTP). These files can be placed in any directory on your website. This can be the home directory (/), the Articles directory (Articles/), the images directory (images/), or whatever else directory you created and named. You're more than likely familiar with this if you run a website. Files are uploaded to directories (or folders) on your website.

So you have files in either one directory or various directories.

Using PHP, you can access any directory on your website.

Being that PHP is a server side language, it can access backend things such as a website's directories.

So once we gain to a directory on your website with PHP, we can search the entire directory. We create a search text box such as what you see above and then we extract the query entered and see if any files in that directory match the query. If it does, we output the image itself using the HTML <image> tag.

And that's as simple as it is.

We either can search one directory or multiple directories on your website.

A user enters a search query.

If the search query matches anything in the files of the directory (or directories) being searched, we can output the image. As many images that match the query get outputted.

So it's very simple.

The only thing is that your files must have appropriate names. For example, if you have a file on dandelion flowers. It will have that in the file name, for example, how-to-feed-dandelion-flowers.html or how-to-grow-dandelion-flowers.php or just dandelion-flowers.html. It has to have the name in the filename. If you have an article on dandelion flowers and it's named 123wxp.html, this search engine won't work. It's based on the fact that it looks at the file name. The file name should have the keywords that the user is searching for.

So now that you get an idea of how it works, we're now going over all the code needed to get this up and running on your website.

If you just want the code, the full code of this image search engine is at the following link: Code to create an image search engine. Remember that you have to change the directory to the directory you have images on your site. Usually this will be the same directory. Also when you copy this code to your web page, make sure it's saved as a PHP file.


So now we'll first go over the HTML code needed for this search engine.

The HTML code is needed just to create the search text box.

Everything else is PHP.

So the above code creates the search box.

First, we create an HTML form. We set the action equal to "" because we want the information to this page. If we wanted the information sent to another page, we want specify this file within this action attribute. We set the method equal to POST.

As almost all forms require, we add a submit and give it the value, "Search". Thus, Search is displayed on the button.

We also add PHP code so that if the submit button is clicked and the search text box is empty, the statement "A search query must be entered" is output.

We then close the form.

This concludes the HTML code needed to make this search engine.

PHP Code

First Block of PHP Code

We now go on to the PHP code necessary to make this search engine work.

We separate the PHP code into 2 blocks of code.

The first block of PHP code is shown below.

This PHP extracts the search query that the user enters into the search text box.

We then a $searchoriginal variable so that the search term that the user has entered is kept intact. We later will be doing many modifications to the search query that the user has entered.

We then make all the characters of the search query that the user has entered lowercase. This is because case matters in PHP. By making all the characters lowercase, we don't have to worry about case sensitivity.

We then use the PHP $trim function to cut off any space in front of the search query or the back of the search query (or left of the query or right of the query).

Next, we explode the $search variable. The explode() function in PHP separates a string based on a certain parameter. Here, we want the $search variable explosed based on any space characters (" "). The reason we want to do this is because the user may type in more than one word into the search engine. For example, the user may type in "transistor circuit". If we forget about exploding the term and we just accept the search query directly, only terms that have the direct phrase, "transistor circuit" will be returned. If a image is named, How-to-connect-a-transistor-to-a-circuit, this image will not be returned because the term "transistor circuit" isn't consecutive to the string. The terms in the name are separated. So we'll miss this search. Only a term that has "transistor circuit" with the terms exactly "transistor circuit" will be returned.If these 2 terms are separated in the name, this search will be skipped. To avoid this, we explode the term and then look at each term separately. If the name of the file has both terms, it will be returned in the search results. Another example of this is a user typing in, "pepperoni pizza". Without exploding the term, only results that have the phrase "pepperoni beef pizza" in that exact order will returned. An image that is named, "Adding pepperoni and beef to pizza" will not be returned because the phrase "pepperoni beef pizza" isn't in it, even though all the terms are in it. So you can see why we wouldn't want to just use the phrase exactly that the user inputs.

So after we explode the search query based on spaces, we then count the number of terms in the $search variable. Again, the explode() function separates the string into separate entities based on the parameter entered, in this case a space (" "). We now count the number terms in the $search variable. This is how we know how many terms the user has entered in.

Lastly, we make sure that we obtain the value of the submit button to see if it has been clicked. If it has been clicked, it returns true. If not, it returns false.

Second Block of PHP Code

This is now the second and last block of PHP code shown below.

So this, you can see, is the longer block of PHP code. Still, it isn't hard.

First, we specify which directory we want to search that is on our website.

Since we are creating an images search engine, the directory we are searching through is the images directory.

Still, if you want to add multiple directories, copy and paste all of this code and change the directory information. That way, you can add all the directories you want searched on your website.

So once we've specified the directory, we then go to the heart of code. We first check to see if the submit button has been clicked. If it has, the code advances to the next line. We have a second if statement that checks to see if a search query has been entered. If it has and the search query isn't empty (a null string), the code advances to the next line. The next line is a third if statement. The line checks to see if the directory is actually a directory. If it is, the code advances to the line. The line opens up that directory.

We then have another if statement. If the number of terms in the search query is just one single word, the while loop is executed. The while loop loops through the files in that directory.

We then create a variable named $fileorignal and we assign it to the value of $file. We do this because we're going to manipulate the $file string. It needs to be intact in order for us to output. Therefore, we need the original before manipulation, in order for the file name to be correct when using the image tag.

We then make the $file lowercase. By making the search query lowercase in previous and making the $file lowercase now, we have equal cases. Therefore, we don't have to worry about cases matching. All are lowercase, so they're at equal plane.

So we go about doing this by finding the position of the ".". Once we know its position, we know that what's after the "." is the file extension.

So we then use the PHP substr() function to take the portion of the string after the ".". This is the file extension. We save this in the variable $fileextension

Next, we have if an if statement. We use the strpos() function that if the search term is in the file name and if the file is a .jpg, .jpeg, .png., or .bmp, that result is going to be returned. If the search query is in the file name and the file is an jpg, jpeg, png, or bmp, this if statement returns true. If so, it advances.

Now we create an array that stores any files are returned that match that query. The reason we do this is because later on, if no results are returned from the search query entered, we then count this array. If it is equal to 0, no files have been returned that match the search query, which means we can output a statement, "No results found for this search query".

We then use the PHP echo () function to output the images found that match the search query. Whether it's 1 result or 50 results, all are returned that match the search query. We set the image tag to a decent width of 200px. The reason we do this because some of the images are huge. They can take up a whole page. To prevent, we set the image to a width of 200. We don't set the height because if you set and width of an image, you may get distortion. You can only set one of them, or else you'll get distorted images. After the image set we create 2 spaces and a horizontal line to separate each image from each other. And it just looks better presentation wise.

Next we have an if statement if the search query has 2 terms, meaning the user has entered 2 words into the search box. All the code is the same except for the last if statement in that block of code. Now since there are 2 search words, the if statement is composed of 2 strpos() functions. If the file name has both terms in it, then it is returned in the results.

This search engine covers the user entering up to 7 words in the search box. For search, that usually is sufficient. However, if you want to make it more just copy and paste more blocks of code and just change the value of $countsearchterms and up to $search[number] value. I would say the maximum would be 10. I don't think a user is going to type in 30 words into a search engine.

After that, we close the directory.

We then count the $array.

If the $array is equal to 0, then no search results have been returned. So we output the statement, "No results have been found for this search".

And this concludes all the code needed to create an image search engine for your website.

Again, no database involvement. No MySQL. Just straight PHP code directly to directories on your website.

Related Resources

How to Create a Search Engine Using PHP

How to Create Your Own Search Engine For Your Website Using PHP

How to Create a Custom Search Engine For Your Website Using PHP

How to Create a Video Search Engine For Your Website Using PHP

How to Create an Audio File Search Engine For Your Website Using PHP

HTML Comment Box is loading comments...