Google Custom Search Engine example in Codeigniter

In this tutorial I will show you how to integrate Google Custom Search Engine with Codeigniter.

Prerequisites

PHP Engine 5.4 or later
Codeigniter 2.2
Apache http server 2.2 or later
Knowledge of html, css, javascript, php

Final Output

Google CSE with Codeigniter

Step 1. Create google account if you do not have already one or sign in to google cse(Custom Search Engine) using your existing google account https://www.google.com/cse/

Step 2. Once you sign in to using google account, you will see similar page as shown below.

Google CSE with Codeigniter

Step 3. Click on New Search Engine link on the left upper corner.

Google CSE with Codeigniter

Now you may find examples for input fields. So input your site’s home page URL for Sites to search or you may also use as per directions given below the input field.

Also input some meaningful value for Name of the search engine. This field automatically gets populated when you type for Sites to search.

Next click on blue button below CREATE.

Step 4. Now you will get a next page similar to the below screen-shot.

Google CSE with Codeigniter

You can click on Get Code to copy the code and paste it on your site’s page where to appear.

You can click on Public URL to see the demo how your google custom search engine looks on web page.

You can click on Control Panel to modify your newly created or old search engines.

Step 5 (Optional). Now click on Control Panel.

Google CSE with Codeigniter

Whatever you make changes here will be appear on the right preview pane.

Basic tab

You can change search engine name.

You can give a brief description for your search engine.

You can give some keywords for your search engine for better search ranking.

Make Money tab

Google CSE with Codeigniter

If you have Adsense account then you can turn ON for Search Engine Monetization.

Admin tab

Google CSE with Codeigniter

You can add users using this tab. Users will be able to only add their sites for refinements or promotions but will not be able to make money.

Indexing tab

Google CSE with Codeigniter

Using this tab you can specify which URL(s) to index. You can also specify the sitemap URL. Google will index pages from your site.

Advance tab

Google CSE with Codeigniter

Using this tab you can customize everything for your search engine.

Step 6. Now click on Get Code link to get the source code and paste it on appropriate page to display the search input and search results.

Google CSE with Codeigniter
For advance features you can click on Get V1 Code link on the bottom of the page.

Google CSE with Codeigniter

Step 7. Now we will see how we can integrate this code into Codeigniter. Now look into Codeigniter below project structure.

Google CSE with Codeigniter

So we will put Controller under Controllers folder, View file under Views folder.

Step 8. Create a Controller search.php and paste the below source code.

<?php

if (!defined('BASEPATH'))
    exit('No direct script access allowed');

/**
 * Description of search
 *
 * @author https://roytuts.com
 */
class Search extends CI_Controller {

    function __construct() {
        parent::__construct();
    }

    function index() {
        $this->load->view('search');
    }

}

/* End of file search.php */
/* Location: ./application/controllers/search.php */

 

Step 9. Create a View search.php and put it under Views folder.

Step 10. Edit route.php under application/config folder and change the default controller as search in place of welcome.

$route['default_controller'] = "search";
$route['404_override'] = '';

 

Step 11. Now we will customize look and feel of the cse. Click on Edit Search Engine -> Look and feel.
Google CSE with Codeigniter

In the Layout tab click on Two Column because we want to appear search input in one area and search results in another area. You can choose as per your requirement and you can see the preview on right side. Now click on save.

If you want to customize other features you can do that using Themes, Customize etc. tabs.

Now click on Save & Get Code for V1 and copy the code for Search Box and paste it on header or sidebar on the view file. If you are using template then you can put it on the template common area like header or sidebar.

Google CSE with Codeigniter

Next click on Next:Get code for search results link which can be found just below the code which you just copied.

Google CSE with Codeigniter

Now paste this code snippets in search.php file where you want your search results need to be displayed.

Full code on search.php file. Note if you are using template then your search box code and search results code may appear in different places. You must replace the below code with your own google cse code.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Google Custom Search Engine in CodeIgniter</title>

        <style type="text/css">

            ::selection{ background-color: #E13300; color: white; }
            ::moz-selection{ background-color: #E13300; color: white; }
            ::webkit-selection{ background-color: #E13300; color: white; }

            body {
                background-color: #fff;
                margin: 40px;
                font: 13px/20px normal Helvetica, Arial, sans-serif;
                color: #4F5155;
            }

            a {
                color: #003399;
                background-color: transparent;
                font-weight: normal;
            }

            h1 {
                color: #444;
                background-color: transparent;
                border-bottom: 1px solid #D0D0D0;
                font-size: 19px;
                font-weight: normal;
                margin: 0 0 14px 0;
                padding: 14px 15px 10px 15px;
            }

            #body{
                margin: 0 15px 0 15px;
            }

            #container{
                margin: 10px;
                border: 1px solid #D0D0D0;
                -webkit-box-shadow: 0 0 8px #D0D0D0;
            }
        </style>
    </head>
    <body>

        <div id="container">
            <h1>Google Custom Search Engine in CodeIgniter!</h1>

            <div id="body">
                <div id='cse-search-form' style='width: 100%;'>Loading</div>
                <script src='//www.google.com/jsapi' type='text/javascript'></script>
                <script type='text/javascript'>
                    google.load('search', '1', {language: 'en', style: google.loader.themes.V2_DEFAULT});
                    google.setOnLoadCallback(function() {
                        var customSearchOptions = {};
                        var orderByOptions = {};
                        orderByOptions['keys'] = [{label: 'Relevance', key: ''}, {label: 'Date', key: 'date'}];
                        customSearchOptions['enableOrderBy'] = true;
                        customSearchOptions['orderByOptions'] = orderByOptions;
                        var customSearchControl = new google.search.CustomSearchControl('xxxxxxxxx:yyyy', customSearchOptions);
                        customSearchControl.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET);
                        var options = new google.search.DrawOptions();
                        options.setSearchFormRoot('cse-search-form');
                        options.setAutoComplete(true);
                        customSearchControl.draw('cse', options);
                    }, true);
                </script>
                <style type='text/css'>
                    .gsc-control-cse {
                        font-family: Arial, sans-serif;
                        border-color: #FFFFFF;
                        background-color: #FFFFFF;
                    }
                    .gsc-control-cse .gsc-table-result {
                        font-family: Arial, sans-serif;
                    }
                    input.gsc-input, .gsc-input-box, .gsc-input-box-hover, .gsc-input-box-focus {
                        border-color: #D9D9D9;
                    }
                    input.gsc-search-button, input.gsc-search-button:hover, input.gsc-search-button:focus {
                        border-color: #666666;
                        background-color: #CECECE;
                        background-image: none;
                        filter: none;

                    }
                    .gsc-tabHeader.gsc-tabhInactive {
                        border-color: #FF9900;
                        background-color: #FFFFFF;
                    }
                    .gsc-tabHeader.gsc-tabhActive {
                        border-color: #E9E9E9;
                        background-color: #E9E9E9;
                        border-bottom-color: #FF9900
                    }
                    .gsc-tabsArea {
                        border-color: #FF9900;
                    }
                    .gsc-webResult.gsc-result, .gsc-results .gsc-imageResult {
                        border-color: #FFFFFF;
                        background-color: #FFFFFF;
                    }
                    .gsc-webResult.gsc-result:hover, .gsc-imageResult:hover {
                        border-color: #FFFFFF;
                        background-color: #FFFFFF;
                    }
                    .gs-webResult.gs-result a.gs-title:link, .gs-webResult.gs-result a.gs-title:link b, .gs-imageResult a.gs-title:link, .gs-imageResult a.gs-title:link b  {
                        color: #0000CC;
                    }
                    .gs-webResult.gs-result a.gs-title:visited, .gs-webResult.gs-result a.gs-title:visited b, .gs-imageResult a.gs-title:visited, .gs-imageResult a.gs-title:visited b {
                        color: #0000CC;
                    }
                    .gs-webResult.gs-result a.gs-title:hover, .gs-webResult.gs-result a.gs-title:hover b, .gs-imageResult a.gs-title:hover, .gs-imageResult a.gs-title:hover b {
                        color: #0000CC;
                    }
                    .gs-webResult.gs-result a.gs-title:active, .gs-webResult.gs-result a.gs-title:active b, .gs-imageResult a.gs-title:active, .gs-imageResult a.gs-title:active b {
                        color: #0000CC;
                    }
                    .gsc-cursor-page {
                        color: #0000CC;
                    }
                    a.gsc-trailing-more-results:link {
                        color: #0000CC;
                    }
                    .gs-webResult .gs-snippet, .gs-imageResult .gs-snippet, .gs-fileFormatType {
                        color: #000000;
                    }
                    .gs-webResult div.gs-visibleUrl, .gs-imageResult div.gs-visibleUrl {
                        color: #008000;
                    }
                    .gs-webResult div.gs-visibleUrl-short {
                        color: #008000;
                    }
                    .gs-webResult div.gs-visibleUrl-short  {
                        display: none;
                    }
                    .gs-webResult div.gs-visibleUrl-long {
                        display: block;
                    }
                    .gs-promotion div.gs-visibleUrl-short {
                        display: none;
                    }
                    .gs-promotion div.gs-visibleUrl-long  {
                        display: block;
                    }
                    .gsc-cursor-box {
                        border-color: #FFFFFF;
                    }
                    .gsc-results .gsc-cursor-box .gsc-cursor-page {
                        border-color: #E9E9E9;
                        background-color: #FFFFFF;
                        color: #0000CC;
                    }
                    .gsc-results .gsc-cursor-box .gsc-cursor-current-page {
                        border-color: #FF9900;
                        background-color: #FFFFFF;
                        color: #0000CC;
                    }
                    .gsc-webResult.gsc-result.gsc-promotion {
                        border-color: #336699;
                        background-color: #FFFFFF;
                    }
                    .gsc-completion-title {
                        color: #0000CC;
                    }
                    .gsc-completion-snippet {
                        color: #000000;
                    }
                    .gs-promotion a.gs-title:link,.gs-promotion a.gs-title:link *,.gs-promotion .gs-snippet a:link  {
                        color: #0000CC;
                    }
                    .gs-promotion a.gs-title:visited,.gs-promotion a.gs-title:visited *,.gs-promotion .gs-snippet a:visited {
                        color: #0000CC;
                    }
                    .gs-promotion a.gs-title:hover,.gs-promotion a.gs-title:hover *,.gs-promotion .gs-snippet a:hover  {
                        color: #0000CC;
                    }
                    .gs-promotion a.gs-title:active,.gs-promotion a.gs-title:active *,.gs-promotion .gs-snippet a:active {
                        color: #0000CC;
                    }
                    .gs-promotion .gs-snippet, .gs-promotion .gs-title .gs-promotion-title-right, .gs-promotion .gs-title .gs-promotion-title-right * {
                        color: #000000;
                    }
                    .gs-promotion .gs-visibleUrl,.gs-promotion .gs-visibleUrl-short  {
                        color: #008000;
                    }
                </style>

                <!-- Code for search results -->

                <div id='cse' style='width: 100%;'></div>
            </div>
        </div>

    </body>
</html>

 

You can run the application and see the result but for getting the search results you have to test it in live server.

That’s all. Thank you for your reading.

Leave a Reply

Your email address will not be published. Required fields are marked *