The idea was to test the functionality of elasticsearch.

I developed a basic website to be able to add bookmarks and references to websites, with the functionality of adding descriptive information about the bookmark.

So then when I search for my bookmarks it presents me with a link to go directly to the website that I have bookmarked when clicking on the title.

While this is only a basic example, Elasticsearch is extremely fast and very powerful, especially when you index it, with a LOT of data.

Setup Dependencies:

$ yum update -y
$ yum install curl -y
$ yum install php54 -y
``` <p>

**Prepare needed directories:**
```language-bash
$ mkdir {js,css,app}
$ wget -O css/bootstrap.min.css https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css
$ wget -O js/bootstrap.min.js "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"
$ wget -O js/jquery.min.js https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js

``` <p>

**Composer Configuration:**

Include the following in your `composer.json` file, please note I am using ES-1.5 at this moment.

```language-bash
$ vi composer.json
{
    "require": {
        "elasticsearch/elasticsearch": "~1.0"
    }
}
``` <p>

**Get Composer for PHP:**
```language-bash
$ curl -s http://getcomposer.org/installer | php
$ php composer.phar install --no-dev
``` <p>

**Configure your Elasticsearch Endpoint:**

```language-bash
$ vi app/init.php
<?php
require_once 'vendor/autoload.php';

$es = new Elasticsearch\Client([
    'hosts' => ['elasticsearch-domain']
]);

?>
``` <p>

**Our PHP Files:**

Our PHP files which will be embedded in HTML documents:

`index.php`

```language-php
<?php
require_once 'app/init.php';

if(isset($_GET['q'])) {

	$q = $_GET['q'];

	$query = $es->search([
		'body' => [
		    'query' => [
		        'bool' => [
			    'should' => [
			        'match' => ['title' => $q],
				'match' => ['text' => $q]
		        ]
		    ]
                ]
	    ]
	]);

	if($query['hits']['total'] >=1 ) {

		$results = $query['hits']['hits'];
	}
}

?>
<!DOCTYPE html>
<html lang="en">
<head>

  <meta charset="utf-8">
  <title>Search | Document Search</title> 
  <link href="https://fonts.googleapis.com/css?family=Pattaya|Slabo+27px" rel="stylesheet"> 
  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet">
  <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-social/4.10.1/bootstrap-social.css" rel="stylesheet" >
  <link rel="icon" type="image/png" href="images/favicon.png">
  <link href="//fonts.googleapis.com/css?family=Pattaya|Slabo+27px|Raleway:400,300,600" rel="stylesheet" type="text/css">
  <link href="css/bootstrap.min.css" rel="stylesheet">

  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="author" content="Ruan Bekker">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <script src="js/bootstrap.min.js"></script>
  <script src="js/jquery.min.js"></script>

  <style>
      h1 {
        font-family: 'Pattaya', sans-serif;
        font-size: 59px;
	position: relative;
        right: -10px;
      }
	
      h3 {
        font-family: 'Pattaya', sans-serif;
        font-size: 20px;
        position: relative;
        right: -90px;
      }

      h4 {
        font-family: 'Slabo', sans-serif;
        font-size: 30px;
      }
  </style>


</head>
<body>
  <ul class="nav nav-tabs">
    <li role="presentation" class="active"><a href="index.php">Home</a></li>
    <li role="presentation"><a href="add.php">Add Bookmark</a></li>
    <li role="presentation"><a href="about.php">About</a></li>
  </ul>
<br>
<div class="row vertical-center-row">
    <div class="col-lg-4 col-lg-offset-4">
        <div class="input-group">
	    <h1>Document Search</h1><p>
	    <h3>powered by php and elasticsearch</h3>
        </div>
    </div>
</div>
<br>
<br>
<form action="results.php" method="get" autocomplete="on">
<div class="row">
    <div class="col-lg-4 col-lg-offset-4">
        <div class="input-group">
          <input type="text" name="q" placeholder="Search..." class="form-control" /> 
            <span class="input-group-btn"> 
                <button type="submit" class="btn btn-primary">Search</button>
            </span>
        </div>
    </div>
</div>
</form>
<br>

<br>
<br>
<center>
  <footer class="bd-footer text-muted" role="contentinfo">


  <div class="container">
    <ul class="bd-footer-links"></ul>
    <p>Developed by <a rel="" href="http://ruanbekker.com/#contact" target="_blank">Ruan Bekker</a></p>
  </div>


      </footer>
    </center>
  </body>
</html>
``` <p>

`add.php`

```language-php
<?php

require_once 'app/init.php';

if (!empty($_POST)) {
	if(isset($_POST['title'], $_POST['link'], $_POST['text'])) {

		$title = $_POST['title'];
		$link = $_POST['link'];
		$text = explode(',', $_POST['text']);

		$indexed = $es->index([
			'index' => 'kb',
			'type' => 'bookmarks',
			'body' => [
				'title' => $title,
				'link' => $link,
				'text' => $text
				]
			]);

			if($indexed) {
				print_r($indexed);
			}
	}
}

?>

<!doctype html>
<html>
    <head>
    	<meta charset="utf-8">
    	<title>Add | ES</title>

  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="description" content="Search engine powered by Elasticsearch" >

  <meta name="author" content="Ruan Bekker">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/png" href="images/favicon.png">
  <link href="//fonts.googleapis.com/css?family=Raleway:400,300,600" rel="stylesheet" type="text/css">
  <link href="css/bootstrap.min.css" rel="stylesheet">
  <script src="js/bootstrap.min.js"></script>
  <script src="js/jquery.min.js"></script>
  <link href="https://fonts.googleapis.com/css?family=Pattaya|Slabo+27px" rel="stylesheet">
  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet">
  <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-social/4.10.1/bootstrap-social.css" rel="stylesheet" >

  <style>
      h1 {
        font-family: 'Pattaya', sans-serif;
        font-size: 59px;
        position: relative;
        right: -10px;
      }

      h3 {
        font-family: 'Pattaya', sans-serif;
        font-size: 20px;
        position: relative;
        right: -90px;
      }

      h4 {
        font-family: 'Slabo', sans-serif;
        font-size: 30px;
      }


    </style>

    </head>
    <body>
<ul class="nav nav-tabs">
  <li role="presentation"><a href="index.php">Home</a></li>
  <li role="presentation" class="active"><a href="add.php">Add Bookmark</a></li>
  <li role="presentation"><a href="about.php">About</a></li>
</ul>

<br>
<div class="row vertical-center-row">
    <div class="col-lg-4 col-lg-offset-4">
        <div class="input-group">
            <h1>Document Search</h1><p>
            <h3>powered by php and elasticsearch</h3>
        </div>
    </div>
</div>


<br>
<form action="add.php" method="post" autocomplete="off">
<div class="col-lg-4 col-lg-offset-4">
        <div class="input-group">
        	<span class="input-group-addon" id="sizing-addon2">Title</span>
		<input type="text" name="title" class="form-control" placeholder="My Bookmark Name" aria-describedby="sizing-addon2"><p>
		<p>
 	</div>
</div>

  <div class="container">
    <div class="row">
    </div>
  </div>

<p>
<br>
<div class="col-lg-4 col-lg-offset-4">
	<div class="input-group">
                <span class="input-group-addon" id="sizing-addon2">Link</span>
                <input type="text" name="link" class="form-control" placeholder="http://example.org" aria-describedby="sizing-addon2">
        </div>
</div>
  <div class="container">
    <div class="row">
    </div>
  </div>

<p>
<br>

<div class="col-lg-4 col-lg-offset-4">
        <div class="input-group">

		<span class="input-group-addon" id="sizing-addon2">Text</span>
		<textarea type="text" rows="1" name="text" class="form-control" placeholder="descriptive info about my bookmark" aria-describedby="sizing-addon2"></textarea>

       </div>
    </div>
</div>

  <div class="container">
    <div class="row">
    </div>
  </div>

<p>
<br>

<div class="row vertical-center-row">
    <div class="col-lg-4 col-lg-offset-4">
        <div class="center-block">
		<center
    		<br><input type="submit" class="btn btn-success" value="Submit Bookmark Entry">
		</center>
    	</form>
	<br>
                <center>
                <a class="btn btn-danger" style="width:176px" href="index.php">Back to Search</a>
                </center>
      </div>
    </div>
  </div>

  </body>
</html>
``` <p>

`results.php`

```language-php
<?php
require_once 'app/init.php';

if(isset($_GET['q'])) {

	$q = $_GET['q'];
	$query = $es->search([
		'body' => [
		    'query' => [
		        'bool' => [
			    'should' => [
			        'match' => ['title' => $q],
				'match' => ['text' => $q]
		        ]
		    ]
                ]
	    ]
	]);

	if($query['hits']['total'] >=1 ) {
		$results = $query['hits']['hits'];
	}
}

?>
<!DOCTYPE html>
<html lang="en">
<head>

  <meta charset="utf-8">
  <title>Search | Document Search</title>
  <meta name="description" content="search-results">
  <meta name="author" content="Ruan Bekker">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link href="//fonts.googleapis.com/css?family=Pattaya|Slabo+27px|Raleway:400,300,600" rel="stylesheet" type="text/css">
  <link href="css/bootstrap.min.css" rel="stylesheet">
  <link rel="icon" type="image/png" href="images/favicon.png">

  <script src="js/bootstrap.min.js"></script>
  <script src="js/jquery.min.js"></script>

  <style>
      h1 {
        font-family: 'Pattaya', sans-serif;
        font-size: 59px;
        position: relative;
        right: -10px;
      }

      h3 {
        font-family: 'Pattaya', sans-serif;
        font-size: 20px;
        position: relative;
        right: -90px;
      }

      h4 {
        font-family: 'Slabo', sans-serif;
        font-size: 30px;
      }
  </style>

</head>
<body>

<ul class="nav nav-tabs">
  <li role="presentation"><a href="index.php">Home</a></li>
  <li role="presentation"><a href="add.php">Add Bookmark</a></li>
  <li role="presentation"><a href="about.php">About</a></li>
</ul>

<br>
<div class="row vertical-center-row">
    <div class="col-lg-4 col-lg-offset-4">
        <div class="input-group">
            <h1>Document Search</h1><p>
            <h3>powered by php and elasticsearch</h3>
        </div>
    </div>
</div>

<br>
<br>
<form action="results.php" method="get" autocomplete="on">
<div class="row">
    <div class="col-lg-4 col-lg-offset-4">
        <div class="input-group">
          <input type="text" name="q" placeholder="Search..." class="form-control" /> 
            <span class="input-group-btn"> 
                <button type="submit" class="btn btn-primary">Search</button>
                <a class="btn btn-danger" href="index.php">Back</a> 
            </span>
        </div>
    </div>
</div>
</form>
<br>

<br>
 <div class="container">
    <div class="row" style="text-align: center">
    <h2> Search Results: </h2>
    </div>
  </div>


        <?php
        if(isset($results)) {
            foreach($results as $r) {
            ?>

                <div class="row" style="text-align: center">
   		  <div class="container">
  		    <div class="panel panel-success">
                      <div class=panel-heading>
                        <h2 class=panel-title>
                          <a href="<?php echo $r['_source']['link']; ?>" target="_blank"><p><br>
                            <?php echo $r['_source']['title']; ?>
                          </a>
                      </div>
                        <br><br>
                          <b>Content:</b><p> 
                              <?php echo implode(', ', $r['_source']['text']); ?><p></p><br>
                      <div class="">
                          <b>DocId:</b>
                            <center>
                                <?php echo $r['_id']; ?>
                            </center>
                          <br>
                    </div> 
                  </div>
                </div>
            <?php
            }
        }
        ?>
</body>
</html>
``` <p>

`about.php`
```language-php
<?php

?>
<!DOCTYPE html>
<html lang="en">
<head>

  <meta charset="utf-8">
  <title>Search | Document Search</title>
  <meta name="description" content="">
  <meta name="author" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/png" href="images/favicon.png">
  <link href="//fonts.googleapis.com/css?family=Pattaya|Slabo+27px|Raleway:400,300,600" rel="stylesheet" type="text/css">
  <link href="css/bootstrap.min.css" rel="stylesheet">
  <script src="js/bootstrap.min.js"></script>
  <script src="js/jquery.min.js"></script>
  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet">
  <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-social/4.10.1/bootstrap-social.css" rel="stylesheet" >

<style>
      h1 {
        font-family: 'Pattaya', sans-serif;
        font-size: 59px;
        position: relative;
        right: 0px;
      }

      h2 {
        font-family: 'Pattaya', sans-serif;
        font-size: 40px;
        position: relative;
        right: 0px;
      }


      h3 {
        font-family: 'Pattaya', sans-serif;
        font-size: 20px;
        position: relative;
        right: -90px;
      }

      h4 {
        font-family: 'Slabo', sans-serif;
        font-size: 30px;
      }

    </style>

</head>
<body>
<ul class="nav nav-tabs">
  <li role="presentation"><a href="index.php">Home</a></li>
  <li role="presentation"><a href="add.php">Add Bookmark</a></li>
  <li role="presentation" class="active"><a href="about.php">About</a></li>
</ul>
<br>
<center>
<div class="row vertical-center-row">
        <div class="center-block">
<div class="jumbotron">
  <h1>About</h1>
  <p></p>
  <br>
<address>
  <strong><h4>About this project:</h4></strong><p></p>
  This project was made purely to test the functionality of Elasticsearch<br>
</address>

<address>
  <strong><h4>About me?</h4></strong><p></p>
  Linux Fanatic | OpenSource Enthusiast | Linux Junkie<br>
</address>


<address>
  <h4>Strenghts:</h4><p></p>
  Linux System Administration<br>
  Cloud Support, AWS<br>
  Big Data<br>
</address>
<address>
  <h4>Current Location:</h4><br>
  Cape Town, South Africa<br>
  <br><img src="images/capetown.jpg" width="360" height="250" class="img-fluid" alt="Built with Elasticsearch">
</address>
	<br>
        <h2>Get in Contact</h2><br>
            <ul class="list-inline">
                <li>
                  <a href="https://facebook.com/ruan.bekker" class="btn-social btn-outline"><i class="fa fa-fw fa-facebook"></i></a>
                </li>
                <li>
                  <a href="#" class="btn-social btn-outline"><i class="fa fa-fw fa-google-plus"></i></a>
                </li>
                <li>
                  <a href="https://twitter.com/ruanbekker" class="btn-social btn-outline"><i class="fa fa-fw fa-twitter"></i></a>
                </li>
                <li>
                  <a href="https://za.linkedin.com/in/ruanbekker" class="btn-social btn-outline"><i class="fa fa-fw fa-linkedin"></i></a>
                </li>
  
            <li><a href="https://github.com/ruanbekker" class="btn-social btn-outline" ><i class="fa fa-fw fa-github"></i></a>
            <li><a href="//ruanbekker.com" class="btn-social btn-outline" target="_blank"><i class="fa fa-fw fa-google"></i></a>
            <li><a href="mailto:[email protected]" class="btn-social btn-outline" title="Email"><i class="fa fa-fw fa-envelope"></i></a> 
       </li>
     </ul>
  </div>


</div>
    </div>
</div>
</center>
<br>
<br>
<center>



  <footer class="bd-footer text-muted" role="contentinfo">

  <div class="container">
    <ul class="bd-footer-links"></ul>
    <p>Developed by <a rel="" href="http://ruanbekker.com/#contact" target="_blank">Ruan Bekker</a></p>
  </div>

</footer>


</center>
</body>
</html>
``` <p>

**Directory Structure:**

When completing this tutorial, your directory structure should look more or less like this:

```language-bash
├── about.php
├── add.php
├── app
│   ├── init.php
├── composer.json
├── composer.lock
├── composer.phar
├── css
│   ├── bootstrap.min.css
│   ├── normalize.css
├── images
│   ├── favicon.png
├── index.php
├── js
│   ├── bootstrap.min.js
│   └── jquery.min.js
├── results.php
└── vendor
``` <p>

Source Code is available [here](https://gitlab.com/rbekker87/searchengine-php-es/tree/master/)

Full demo is available [here](http://search.ruanbekker.com/)

Credit goes to [codecademy](https://www.youtube.com/watch?v=3xb1dHLg-Lk)