After employee records has been added to the database, you should provide the user a way to SEARCH for a particular record or records. While you could create a separate page to perform this task, we are going to add the functionality to the EMPLOYEE MASTER PAGE instead.

The code that will be created will perform the following tasks:

• PART A: CREATE STATIC CONTENT
  • Create Static Search Field
• PART B: ADD DYNAMIC SCRIPT
  • Update Script to Accommodate Search
• PART B: REPLACE STATIC CONTENT WITH DYNAMIC CONTENT
  • Make search field dynamic
• OPTION 1: Create Pagination

PART A: CREATE STATIC ELEMENTS

Static Search input field has already been added to EMPLOYEE MASTER PAGE (

1. Open the EMPLOYEE MASTER PAGE (master_page.php) and add the following highlighted <input> tag BELOW the <h2> and <a> tag:
   
   

   <h2 class="ui-body ui-body-a ui-corner-all">EMPLOYEE MASTER PAGE</h2>
   <a data-role = "button" href = "add_page.php" data-inline = "true" 
   class = "ui-btn ui-corner-all ui-icon-user ui-btn-icon-left">ADD EMPLOYEE</a>
   <input type='search' maxlength='25' placeholder="Enter a search word and press ENTER key">

   
   
2. Wrap a set of <form> tags with the following attributes WITHIN the <div data-role="content"> container:
   
   

   <div data-role="content">
   <form name='frmSearch' action='' method='post'>   
   <h2 class="ui-body ui-body-a ui-corner-all">EMPLOYEE MASTER PAGE</h2>
   ...
   ...
   ...
   ...
   </form>
   </div>
   

PART B: ADD DYNAMIC SCRIPT

We will add two scripts to create the search function and the pagination nav at the bottom of the ListView.

Update Script to Accommodate Search

A few changes need to be made to create the search functionality.

1. Replace the existing main PHP script:
   
   FROM:
   

   <!-- SQL SELECT QUERY ------------------------------------------- -->
   <?php	
   	$pdo_statement = $pdo_conn->prepare("SELECT ID, CONCAT(FirstName, ' ' , LastName) AS 
     FullName, Department, Image FROM employees ORDER BY FullName ASC");
   	$pdo_statement->execute();
   	$result = $pdo_statement->fetchAll();
   ?>

   
   WITH THIS:
   

   <!-- SQL SELECT QUERY ------------------------------------------- -->
   <?php	
    	$search_keyword = '';
   	if(!empty($_POST['search']['keyword'])) {
   		$search_keyword = $_POST['search']['keyword'];
   	}
   	
   $sql = "SELECT ID, CONCAT(FirstName, ' ' , LastName) AS FullName, Title, Image  FROM employees 
      WHERE FirstName LIKE :keyword OR LastName LIKE :keyword OR Title LIKE :keyword ORDER BY FullName ASC";
   
      $pdo_statement = $pdo_conn->prepare($sql);
   	$pdo_statement->bindValue(':keyword', '%' . $search_keyword . '%', PDO::PARAM_STR);
   	$pdo_statement->execute();
   	$result = $pdo_statement->fetchAll(); 
   ?>         

   
   
   CODE EXPLANATION:
   

   • Because the SQL is so big, it is assigned to a variable ($sql) and then passed into the prepare method (prepare($sql).
   • The :keyword will be used as the search criteria.
     

PART C: REPLACE STATIC CONTENT WITH DYNAMIC CONTENT

The static content of the <input> tag need to be made more dynamic with some attributes.

1. Add the following highlighted attributes to the <input> tag:
   
   

   <h2 class="ui-body ui-body-a ui-corner-all">EMPLOYEE MASTER PAGE</h2>
   <a data-role = "button" href = "add_page.php" data-inline = "true" 
   class = "ui-btn ui-corner-all ui-icon-user ui-btn-icon-left">ADD EMPLOYEE</a>
   <input type='search' name='search[keyword]' value="<?php echo $search_keyword; ?>" 
   id='keyword' maxlength='25' placeholder="Enter a search word and press ENTER key">

   
   

   CODE EXPLANATION:
   - The search[keyword] resolves to the name of the <input> field. 
   - The <?php echo $search_keyword; ?> resolves to the value of the <input> field.
   

2. CHECK POINT: Save the file and then preview it in a browser. Enter a name (e.g., Ann) or title and then press the ENTER key. You should see that person name or title filter in the list if it exist.
   
   BEFORE: Ann is typed in the search field
   
   
   AFTER: Ann is typed in the search field
   
   

OPTION 1: Create Pagination

It is best practice to implement a search engine if there are a lot of records being retrieved from the database. See the Enhancement tab for details.