Archive

October 2016

Browsing

Live search in PHP and Mysql using Jquery

Live search in PHP and Mysql using Jquery

This tutorials is to know how to integrate live search in php and MySQL using jquery. Searching is one of the most required feature in web sites and if it will be live searching it will show you fast result on page. In this tutorial we will create a database and a table insert records and start searching in it.

Demo       |

This is a very simple script which has 2 files. One is an HTML (index.php) file with a Search input box and the second is a PHP (do_search.php) file that has a regular MySQL connect(db.php) and a select statement to get the data from database. This script also has a Loading message shown while the data is being pulled from MySQL. Please note that live search might use more resources from your server. It might result in server overload / slowness if your infrastructure is limited.

Step1 : Setup your database and table in MySQL
Before you run this script make sure you have created a database and table in MySQL. Below is the sample sql command to create a database, table, and insert some dummy rows.

--
-- Table structure for table `live_search`
--

CREATE TABLE `live_search` (
  `id` int(10) NOT NULL,
  `name` varchar(255) NOT NULL,
  `email` varchar(100) NOT NULL,
  `date` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
) ENGINE=MyISAM DEFAULT CHARSET=latin1;

--
-- Dumping data for table `live_search`
--

INSERT INTO `live_search` (`id`, `name`, `email`, `date`) VALUES
(1, 'Raja', 'Raja@developerdesks.com', '2016-08-29 05:34:36'),
(2, 'Ragav', 'Ragav@developerdesks.com', '2016-08-29 05:34:36'),
(3, 'Sangeet kumar', 'sangeet@developerdesks.com', '2016-08-29 05:35:31'),
(4, 'Tharun', 'Tharun@developerdesks.com', '2016-08-29 05:35:31'),
(5, 'Kabi', 'kabi@developerdesks.com', '2016-08-29 05:35:33');

Step 2: Index page for search form. 
Create the live form for searching.

<div class="container">
<h1>Live search using php and mysql using jquery</h1>
	<div class="row">
		<div class="panel panel-default">
			<div class="panel-heading">
				<span>Live Search</span>
			</div>
			<div class="form-group">
				<label for="username">Username :</label>
				<input name="keysearch" value="" placeholder="name" id="keysearch" type="text" class="form-control">
				<span id="loading">Loading...</span>
			</div>
			<div id="result"></div>
		</div>
	</div>
</div>

Step 3: Creating a do search for getting data from database.
Create the mysql query for getting the data from table using like” options.

<?php
include('db.php');
if(isset($_POST['keysearch']))
{
    $search = $_POST['keysearch'];
    $data = mysql_query("SELECT * FROM `live_search` WHERE `name` like '%$search%' order by id LIMIT 5");
    while($row = mysql_fetch_array($data))
    {
		if($data) {
        $username   = $row['name'];
        echo "<div class='show'><img src='' id='search' /><span class='name'> $username </span></div>";
    }
	else
	{ echo "No found results";}
}
}
?>

Step 4: jquery code for get the search value and pass to do_seach page. 
Using the jquery you can get the search word and pass to the next page using variable and post method.

<script>
$(document).ready(function(){
	var req = null;
	$('#keysearch').on('keyup', function(){
		var key = $('#keysearch').val();
		if (key && key.length > 2)
		{
			$('#loading').css('display', 'block');
			if (req)
				req.abort();
			req = $.ajax({
				url : 'do_search.php',
				type : 'POST',
				cache : false,
				data : {
					keysearch : key,
				},
				success : function(data)
				{
					console.log(data)
					if (data)
					{
						$('#loading').css('display', 'none');
						$("#result").html(data).show();
					}
				}
			});
		}
		else
		{
			$('#loading').css('display', 'none');
			$('#result').css('display', 'none');
		}
 
	});
});
</script>

Step 4: Add css code fro your design.

.panel-default{padding: 15px;}
.form-group{margin-top: 15px;}
.panel-heading{background-color: #40A2BE !important; color: #FFFFFF !important;}
#loading{display: none;}
#searchid
{
    width:500px;
    border:solid 1px #000;
    padding:10px;
    font-size:14px;
}
#result
{
    position:absolute;
    width:500px;
    padding:10px;
    display:none;
    margin-top:-1px;
    border-top:0px;
    overflow:hidden;
    border:1px #CCC solid;
    background-color: white;
}
.show{font-size:20px;height: 50px;padding: 5px;}
.show:hover{background:#40A2BE;color:#FFF;cursor:pointer;}
img#search{width:50px; height:40px; float:left; margin-right:6px;}

You can now demo the script and get the live code., That’s it enjoy the code. Please subscribe. 

How to Setup W3 Total Cache to Optimize WordPress Websites.

How to Setup W3 Total Cache to Optimize WordPress Websites

We are going to use w3 total cache to Optimize WordPress websites. By default WordPress is a dynamic CMS (Content Management System). This means that for every visitor request that WordPress has to process, it must first connect to the database to see if the requested page even exists.

Why using the W3 Total Cache plugin ?

It’s free and very effective. The W3 Total Cache plugin has been around for years and is successfully used by millions of websites. However, it can be a little tricky to setup when you start using it, that’s why we propose this simple guide for the Customize theme.

Using W3 Total Cache plugin enables the process of storing data from existing requests to be re-used for subsequent requests.  Caching prevents repeating database request and serving of same information, by storing data that has already been asked for and serves it up instantly.

W3 Total cache will also help you reduce the sizes of your page by  compressing it (HTML, CSS, JavaScript) before it’s actually renders by your browser.

How to Optimize?

One of the simplest WordPress caching plugins is W3 Total Cache plugin and easy to setup in the word press website.

However if you need more advanced caching options such as the ability to serve a static 404 error page the steps below will walk you through installing and configuring the W3 Total Cache plugin for WordPress

Step 1: Hover over Plugins in the left-hand menu, then click Add New.

plugins-add-new

Step 2: In the Search box, type in w3 total cache and click on Search Plugins.

click-search-plugins

Step 3: Under W3 Total Cache click on Install Now.

click-install-now

Step 4: Click Activate Plugin.

click-activate-this-plugin

Step 5: From the left-hand menu, you should now have a new Performance section, hover over this and click on General Settings.performance-general-settings

Step 6: Enable the options which you want to have the cache.

These would be:

Page Cache

w3tc-setting-page-cache

Minify

w3tc-setting-minify

Database Cache

w3tc-setting-database-cache

Object Cache

w3tc-setting-object-cache

Step 7: Hover over Performance again in the left-hand menu, and click on Page Cache.

performance-page-cache

Step 8: Ensure that these options have a check mark beside them, then click on Save all settings:

Cache home page

Cache feeds: site, categories, tags, comments

Cache 404 (not found) pages

Cache requests only for example.com host name

Don’t cache pages for logged in users

performance-page-cache-save-all

Finally to confirm that you’ve setup everything correctly, in your web-browser open up your site and hit (Ctrl-U), or go to View -> Page source to view the source of the page. Scroll to the very bottom of the page and you should see the W3 Total Cache banner letting you know the page has been optimized.

w3tc-confirm-page-source

 

Results With Google PageSpeed Insight

WordPress with W3 Total Cache

file-ojnmmmyqpt