Tag

php coding

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. 

Php Registration Form with email verification – Full coding

Hello Developers, For Previous session we learned only login form using with session and database, Here We are going to full Registration form with sample coding.

Php registration form with email verification

Step 1:
First Create Config file for database connection named as config.php
Please Check previous link for creating DB and Table

Step 2 :

Create register page named as register.php with verification code in php

<?php
if(isset($_POST['submit']))                   // Check form submit action
{
$fname = $_POST['firstname'];                // get form values
$lname = $_POST['lastname'];
$email = $_POST['email'];
$phone = $_POST['mobile'];
$gender = $_POST['gender'];
$pass ="Not verify";                          // initially insert the password as "Not verify"
$link = md5(uniqid(rand()));                  // randomly generate the Activation link rand();

include "config.php";                         // configuration the database
$query = mysql_query("INSERT INTO `admin`(`User`,`email`,`Password`,`phone`,`Aid`,`Activationlink`) VALUES ('$fname$lname','$email','$pass','$phone','','$link')");                                                                               //insert query
if($query)
{
$to = $email;                                 // to address
$subject = "Verification Link";               // subject
$message ="Welcome to Techinibit Soluitons Please Click Activation link Below To active you Accounts<br/>
<a href='www.ourwebsite.com/activation.php?activationlink='$link''>Click Here</a>";       // Message with verification link
$header = "From . your name <your email>";                // your website address (From)
$mail = mail($to,$subject,$message,$header);            // mail function send the verification code to mail
echo "Please Check You mail";
}

}
//echo $link = md5(uniqid(rand()));

?>
<html>
<head>
<title> Registration Form </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head>
<link rel="stylesheet" type="text/css" media="screen" href="css/style.css" />                                                   <!-- css external link -->
<link href='http://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'/>
</head>
<body>
<div class="wrapper"> 
<div class="clearfix"></div>

<div class="headline">
<h1>Register Form</h1>
</div>
<!-- form here -->
<form class="form" name="Register" action="<?php echo $_SERVER['PHP_SELF']; ?>" method="POST">

<div class="tb-row">
<label for="first-name">First Name</label>
<input type="text" name="firstname" autocomplete="off" required="required"/> 
</div>

<div class="tb-row">
<label for="last-name">Last Name</label>
<input type="text" name="lastname" autocomplete="off" required="required"/>
</div>

<div class="tb-row">
<label for="email">Email</label>
<input type="email" name="email" autocomplete="off" required="required"/>
</div>

<div class="tb-row">
<label for="mobile">Mobile number</label>
<input type="number" name="mobile"/>
</div>

<div class="tb -row">
<label for="gender">Gender</label>
<select name="gender">
<option>Male</option>
<option>Female</option>
</select>
</div>

<input id="submit" type="submit" name="submit" class="but submit" value="Register"/>
<div class="tb-row">
<label for="password"><br/><a href="login.php">Login Here</a></label>

</div>
<div class="clearfix"></div>

</form> 
</div>
<div class="clearfix"></div>

</body>
</html>

 

Php Registration Form with email verification - Full codingStep 3:
Create as Css File for design named as style.css

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, img,strong, b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}

body {
font-family: 'Lato', sans-serif;
font-weight: 300;
color: #838383;
}

h1, h2, h3, h4, h5, h6{
color: #9C9C9C; 
margin-bottom:5px;
margin-top:0;
}

h2,p
{
color:#fff;
}
a {
text-decoration:none;
color:blue;
}

form {
margin-bottom: 0;
}

/* ---------------------------------------------------------------------- */
/* Classes
/* ---------------------------------------------------------------------- */

.wrapper {
width: 450px;
margin: 0 auto;
margin-top:40px;
font-family: 'Lato', sans-serif;
font-weight: 300;
padding: 40px;
background-color: darkgray;
}

/* ---------------------------------------------------------------------- */
/* Headline
/* ---------------------------------------------------------------------- */
.headline {
text-align:center;
margin-bottom:30px;
}
.headline h1 {
color:#ffffff;
font-size: 30px;
font-weight: 700;
line-height: 40px;
letter-spacing: -1px;
}
.but
{ 
padding: 6px 12px;
border-radius: 4px;
font-size: 16px;
color: #ffffff;
text-decoration: none;
}
.submit{
background-color: #1875F7 !important;
float: right !important;
color: #ffffff !important;
margin-bottom: 20px;
margin-top: 8px;
}

.tb-row
{
margin-bottom: 30px;
}

.form label {
margin-bottom: 6px;
line-height: 19px;
width: 40%;
float: left;
color:#fff;
}

.form input,
.form select,
.form textarea,
.form button {
position: relative;
display: block;
}
.form input,
.form select,
.form textarea {
display: block;
box-sizing: border-box;
-moz-box-sizing: border-box;
width: 60%;
height: 39px;
padding: 4px 10px;
outline: none;
border-width: 2px;
border-style: solid;
border-radius: 0;
background: #fff;
font: 15px/19px 'Open Sans', Helvetica, Arial, sans-serif;
color: #B1AAAA;
appearance: normal;
-moz-appearance: none;
-webkit-appearance: none;
}

.clearfix
{
margin-top:20px;
}

 

Step 4: Create email activation page named as activation.php

<!-- Password Update here -->
<?php
if(isset($_POST['submit']))
{
$password = md5($_POST['password']);                    //password get from form
$email = $_POST['email'];                               // email 
$link = $_POST['link'];                                // verification link
include "config.php";
$query = mysql_query("UPDATE `admin` SET `Password`='".$password."' WHERE `email`='".$email."' AND `Activationlink`='".$link."'");          // updated your password
if($query)
{
echo "Your username and password is updated succesfully <br/> Wait this page redirect to login page";
header( "refresh:5;url=login.php" );
}
}
?>
<!-- password update ends here -->
<!-- Activation Verify Here --> 
<?php
if(isset($_GET['activationlink']))
{
$link = $_GET['activationlink'];                      // get your verification code sent to your email
include "config.php";
$query = mysql_query("SELECT * FROM `admin` WHERE `Activationlink`='".$link."'");            // check the condition
if(mysql_num_rows($query)>0) 
{
while($row=mysql_fetch_array($query))
{
$mail = $row['email'];
?>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head>
<link rel="stylesheet" type="text/css" media="screen" href="css/style.css" />
<link href='http://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'/>
</head>
<body>
<div class="wrapper"> 
<div class="clearfix"></div>
<div class="headline">
<h3> YOUR ACCOUNT IS ACTIVATED SUCCESSFULLY. PLEASE UPDATE YOUR PASSWORD </h3>
</div>
<form class="form" name="update" action="<?php echo $_SERVER['PHP_SELF']; ?>" method="POST">
<div class="tb-row">
<label for="first-name">Email</label>
<input type="text" name="email" value="<?php echo "$mail";?>" readonly />            <!-- username -->
</div>
<div class="tb-row">
<label for="password">Password</label> 
<input type="password" name="password" autocomplete="off" required="required"/>        <!-- password -->
</div>
<div class="tb-row">
<label for="password">Password</label>
<input type="password" name="password" autocomplete="off" required="required"/>
</div>
<input type="hidden" name="link" value="<?php echo $link; ?>" />
<input id="submit" type="submit" name="submit" class="but submit" value="Update"/>
</form> 
<br/>
</div>
</body>
<?php
}
}
else
{
echo "Your email id is nor register properly. please check again.";
}
} else
{
header( "location: login.php" );
}
?>
<!-- Activation Verify Ends Here -->

Step 5: Create login.php page

<?php
session_start();                           // Session start
include ‘config.php';                       // Config for database connection
if(isset($_POST[‘validate’]))               // Check form submit with IF Isset function
{
$username =$_POST[‘username’];                // set username to variable
$password =$_POST[‘password’];                //set password to variable
$result = mysql_query(“SELECT * FROM `admin` WHERE `User`=’$username’ AND Password=’$password'”);      //check from database
if(mysql_num_rows ($result) > 0 )
{
$_SESSION[‘username’] = $username;             // set session name
$_SESSION[‘password’] = $password;            // set session password
header(‘location:maine.php’);                //redirect to main page
}
else
{
$err=”Authentication Failed Try again!”;
}
}
?><html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head>
<link rel="stylesheet" type="text/css" media="screen" href="css/style.css" />
<link href='http://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'/>
</head>
<body>
<div class="wrapper">
<div class="clearfix"></div>
<div class="headline">
<h1>Login Form</h1>
</div>
<form class="form" name="login" action="<?php echo $_SERVER['PHP_SELF']; ?>" method="POST">
<div class="tb-row">
<label for="first-name">First Name</label>
<input type="text" name="username" autocomplete="off" required="required"/>
</div>
<div class="tb-row">
<label for="password">Password</label>
<input type="password" name="password" autocomplete="off" required="required"/>
</div>
<div class="tb-row">
<label for="password"><a href="forgot-password.php">Forgot Password</a> <br/><a href="register.php">Register</a></label>
</div>
<input id="submit" type="submit" name="validate" class="but submit" value="Login"/>
</form>
<br/>
</div>
</body>
</html>

 

Php Registration Form with email verificationStep 6: Create logout.php page

<?php
session_start();
if(!isset($_SESSION[‘username’]))
{
header(‘location:index.php’);
}
unset($_SESSION[‘username’]);
session_destroy();
header(‘location:login.php’);
?>

 

Step 7: Create main.php for home page

<?php
session_start();
if((!isset ( $_SESSION['userr']) == true ) and (!isset ($_SESSION['passs'] ) == true))
{
unset($_SESSION['userr']);
unset($_SESSION['passs']);
session_destroy();
header("location: login.php");
}
else
{
$user = $_SESSION['userr'];
}
?>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head>
<link rel="stylesheet" type="text/css" media="screen" href="css/style.css" />
<link href='http://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'/>
</head>
<body>
<div class="wrapper"> 
<div class="clearfix"></div>

<div class="headline">
<h2>Welcome to main page </h2>
</div>
<p> The session details are <?php echo $user; ?></p>
<p><a href="logout.php"> Logout </a> here.</p>
</div>
</body>
</html>

Step 9: Create forgot-password.php page

<?php
if(isset($_POST['submit']))
{
$email = $_POST['email'];
include 'config.php';
$query = mysql_query("select * from admin where email = '".$email."'");
if(mysql_num_rows($query)>0)
{
while($row=mysql_fetch_array($query))
{
$pass = $row['Password'];
$to = $email;
$subject = "Password Reset";
$message = "This is you password please login using this password <b>$pass</b>";
$header = "from. username <admin@yourwebsite.com>";
$mail = mail($to,$subject,$message,$header);
echo "PLease check you mail, We have send your password through mail";
}
}
else
{
echo "Sorry You mail id is not in our database. please check and give valid id";
}
}
?>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head>

<link rel="stylesheet" type="text/css" media="screen" href="css/style.css" />
<link href='http://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'/>
</head>
<body>
<div class="wrapper"> 
<div class="clearfix"></div>
<div class="headline">
<h1>Forgot Password</h1>
</div>
<form class="form" name="password" action="<?php echo $_SERVER['PHP_SELF']; ?>" method="POST">
<div class="tb-row">
<label for="email">Email</label>
<input type="email" name="email" autocomplete="off" required="required"/>
</div>
<input id="submit" type="submit" name="submit" class="but submit" value="submit"/>
</form> 
<br/>
</div>

</body>
</html>

Great You learned it easily, download the full source code and enjoy the coding.

Click here to download full code – Php coding for registration with emial verifiaction

Alternative download link