askIT

Search

media-floppy.png Download files for this lesson

To enable searching we have to do some things. We first need to create a new div to the right of the main navigation. We then need to create a form inside this div.

HTML form

Go to header.php and create a div with the id header_right and a sub div with the id search. Inside the search div we will create a form with a input text field and a input button.

<?php 
/**
*
* File: _webdesign/header.php
* Version 14.38 22.04.2017
* Copyright (c) 2009-2017 Nettport.com
* License: http://opensource.org/licenses/gpl-license.php GNU Public License
*
*/
echo"<!DOCTYPE html>
<html lang=\"en\">
<head>
    <title>Community Website</title>

    <!-- Reset -->
        <link rel=\"stylesheet\" type=\"text/css\" href=\"_webdesign/reset.css\" />
    <!-- //Reset -->

    <!-- Bootstrap CSS -->
        <link href=\"_scripts/javascripts/bootstrap/css/bootstrap.min.css\" rel=\"stylesheet\">
    <!-- //Bootstrap CSS -->

    <!-- Site CSS -->
        <link rel=\"stylesheet\" type=\"text/css\" href=\"_webdesign/master.css\" />
    <!-- //Site CSS -->

    <!-- jQuery -->
        <script type=\"text/javascript\" src=\"_scripts/javascripts/jquery/jquery-3.2.1.min.js\"></script>
    <!-- //jQuery -->

    <!-- Bootstrap Javascript -->
        <script type=\"text/javascript\" src=\"_scripts/javascripts/bootstrap/js/bootstrap.min.js\"></script>
    <!-- //Bootstrap Javascript -->

    <link rel=\"icon\" href=\"favicon.ico\" />
    <meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\" />
    <meta name=\"viewport\" content=\"width=device-width; initial-scale=1.0;\"/>
</head>
<body>
<!-- Header -->
    <header>
        <div id=\"header_left\">
            <a href=\"index.php\"><img src=\"_webdesign/images/logo.png\" alt=\"logo.png\" /></a>
        </div>
        <div id=\"header_center\">
            <div id=\"main_navigation\">
                <ul>
                    <li><a href=\"adoptable_pets.php\">Adoptable Pets</a></li>
                    <li><a href=\"volunteer.php\">Volunteer</a></li>
                    <li><a href=\"foster.php\">Foster</a></li>
                    <li><a href=\"donations.php\">Donations</a></li>
                    <li><a href=\"events.php\">Events</a></li>
                    <li><a href=\"contact.php\">Contact</a></li>
                </ul>
            </div>
        </div>
        <div id=\"header_right\">
            <!-- Search -->
                <div id=\"search\">
                    <form method=\"get\" action=\"_scripts/search/go.php\" enctype=\"multipart/form-data\" id=\"searchForm\">
                    <input type=\"text\" id=\"q\" name=\"q\" value=\"\" size=\"19\" class=\"q\" />
                    <input type=\"submit\" name=\"search_button\" id=\"search_button\" value=\"\" />
                    </form>
                </div>
            <!-- //Search -->
        </div>
    </header>
<!-- //Header -->
"
;
?> 

test_search.png
Figure: Search form

PHP search file

When you click the search button you will be redirected to the file "_scripts/search/go.php". We need to create this file.

<?php 
/**
*
* File: _scripts/search/go.php
* Version 20.37 22.04.2017
* Copyright (c) 2009-2017 Nettport.com
* License: http://opensource.org/licenses/gpl-license.php GNU Public License
*
*/ 


// Get query
if(isset($_GET['q'])) {

    
// Get q
    
$q $_GET['q'];
    
$q strtolower($q);
    
    
// Get server name
    
$server $_SERVER["SERVER_NAME"];

    
// Encode
    
$q $q " site:" $server;
    
$q urlencode($q);
    
$url "https://www.google.no/search?q=$q";

    
// Header
    
header("Location: $url");
    exit;
}
else{
    
// No query
    
header("Location: ../../");
    exit;
}

?>

CSS for search

You now need to add a section for #header_right and #search in your master.css file. We will make header right float to the left, and then add style for the search input text box, and for the input button.

Download the 9_search/_webdesign/images/search_white.png search_white.png image. Save it to your "_webdesign/images" folder.

Update your master.css file:

    /*- Header right -------------------------------------------------------------- */
    #header_right{
        float: left;
        margin: 7px 0px 0px 0px;
    }
    /*- Search box -*/
    #search {    
        margin: 0;
        float: right;
    }
    #q{
        padding: 2px 0 2px 6px;
        color: #000;
        font: normal 15px Tahoma, Arial, Helvetica, sans-serif;
            border: 0 none;
            height: 28px;
            margin-right: 0;
           outline: none;
            float: left;
            box-sizing: border-box;
        border: #8f3453 1px solid;
        border-right: #000 0px solid;
        width: 200px;
    }
    #q:hover{
        border-bottom: #8f3453 1px solid;
        border-right: #000 0px solid;
    }
    #search_button {
        font: normal 15px Tahoma, Arial, Helvetica, sans-serif;
        border: 0 none;
        background: #de3e6e url(images/search_white.png) center no-repeat;
        width: 35px;
        float: left;
        padding: 0;
        text-align: center;
        height: 28px;
        cursor: pointer;
        border-radius: 0px 5px 5px 0px; 
        -moz-border-radius: 0px 5px 5px 0px; 
        -webkit-border-radius: 0px 5px 5px 0px; 
    }
    #search_button:hover, #search_button:focus {
        background: #fb4784 url(images/search_white.png) center no-repeat;
        border-radius: 0px 5px 5px 0px; 
        -moz-border-radius: 0px 5px 5px 0px; 
        -webkit-border-radius: 0px 5px 5px 0px; 
        border: 2px solid #fb4784;
    }

    ::-webkit-input-placeholder { /* WebKit browsers */
        color: #000;
    }
    :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
        color: #000;
    }
    ::-moz-placeholder { /* Mozilla Firefox 19+ */
        color: #000;
    }
    :-ms-input-placeholder { /* Internet Explorer 10+ */
        color: #000;
    }

Status check

You should now be able to se your website with a logo, navigation and search.
Please check my files and compare it to your files.

Add comment

avatar_blank_60.png

Comment:

Name:

Email:

Comments

No comments yet. You can be the first one to comment. Just write your comment in the form and click on the submit button.