Pincode database of india with location finder script in php and jquery

by Posted on

In this post i am going to give you a very useful script and database for your projects, Every body needs this when people worked on any shipping based projects and other postal based projects.

So here i’ll show you how to create a very simple location finder script by pincode using php, jquery and mysql.
pin




You can also download pincode/zipcode/postcode database of india free from here.

DEMO DOWNLOAD

Lets start the tutorial.

Create database and table.

CREATE TABLE IF NOT EXISTS `pincodes` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `pincode` varchar(50) DEFAULT NULL,
  `divisionname` varchar(100) DEFAULT NULL,
  `egionname` varchar(100) DEFAULT NULL,
  `circlename` varchar(100) DEFAULT NULL,
  `taluk` varchar(100) DEFAULT NULL,
  `districtname` varchar(100) DEFAULT NULL,
  `statename` varchar(100) DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1;



Create a html file where you’ll put all your ui level code.
Here i used jquery-ui auto-complete plugin, You can refer this tutorial to creating auto-complete/auto-suggest feature for your website : http://www.iamrohit.in/simple-auto-suggest-example-using-php-jquery-and-mysql/

index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Simple location locator by pincode</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
 <style>
  .ui-autocomplete-loading {
    background: white url("img/ui-anim_basic_16x16.gif") right center no-repeat;
  }
   .ui-autocomplete {
    max-height: 300px;
    overflow-y: auto;
    /* prevent horizontal scrollbar */
    overflow-x: hidden;
  }
  /* IE 6 doesn't support max-height
   * we use height instead, but this forces the menu to always be this tall
   */
  * html .ui-autocomplete {
    height: 100px;
  }
  </style>
 
 
</head>
<body>
<h3>Find location by entering pincode</h3>
    <div class="ui-widget">
  <input type="text" id="country" name="country" placeholder="Enter pincode" width="40%"><br/>
  <span style="color:red;"> Enter at least 3 digit to show auto-complete.
</div>
<div> Taluka: <span id="taluka"></span><br/>
 Division Name: <span id="divison"></span><br/>
  Region Name: <span id="reg"></span><br/>
  Circle Name: <span id="cir"></span><br/>
   State Name: <span id="state"></span><br/>
</div>
  <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
  <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <script>
  $(function() {
   $( "#country" ).autocomplete({
      source: function( request, response ) {
        $.ajax({
          url: "request.php",
          dataType: "json",
          data: {
            q: request.term
          },
          success: function( data ) {
            response( data );
          }
        });
      },
      minLength: 3,  // Set minum input length
      select: function( event, ui ) {
            //do something on select event
            var vl = ui.item.id;      
            var data = vl.split("-");
            console.log(data);
            $("#taluka").html(data[3]);
            $("#divison").html(data[0]);
            $("#reg").html(data[1]);
            $("#cir").html(data[2]);
            $("#state").html(data[4]);
        //console.log(ui.item); // ui.item is  responded json from server
      },
      open: function() {
                 // D0 something on open event.
      },
      close: function() {
               // Do omething on close event
      }
    });
  });
  </script>
</body>
</html>

Now time to create server file which will fetch pincode data from your mysql database and give you desired output you can modify this file according to your need.

request.php

<?php
// Remove blow comments from header If  you are making calls from another server
/*
header("Access-Control-Allow-Origin: *");
*/
 
header('Content-Type: application/json');
error_reporting(0);
//ini_set('display_errors',1);
$hostname = "localhost";
$username = "root";
$password = "root";
$dbname = "pincodes";
$q = $_GET['q'];
if(isset($q) || !empty($q)) {
    $con = mysqli_connect($hostname, $username, $password, $dbname);
    $query = "SELECT * FROM pincodes WHERE pincode LIKE '$q%'";
    $result = mysqli_query($con, $query);
    $res = array();
    while($resultSet = mysqli_fetch_assoc($result)) {
     $res[$resultSet['id']]['id'] =  $resultSet['divisionname']."-".$resultSet['egionname']."-".$resultSet['circlename']."-".$resultSet['taluk']."-".$resultSet['statename'];
     $res[$resultSet['id']]['value'] =  $resultSet['pincode'];
    $res[$resultSet['id']]['label'] =  $resultSet['pincode'];
 
    }
    if(!$res) {
        $res[0] = 'Not found!';
    }
    echo json_encode($res);
}
 
?>

Your directory structure will be

+--img
---index.php
---request.php

If you have done all the steps successfully just hit the url on browser and see the demo.

DEMO DOWNLOAD

If you like this post please don’t forget to subscribe My Public Notebook for more useful stuff.

Published by admin

12 Replies to “Pincode database of india with location finder script in php and jquery”

  3. I tested the Demo with 416412 and some other PIN codes. The data returned is wrong in almost 60% of the cases. The program is good and useful, the database needs cleanup.

  5. I cannot upload the sql file through phpmyadmin in my mysql database.The maximum file size is 2 mb .The sql file you provided is 14 mb.Please help.Could you please provide the details of the mysql database you used for the demo so that i can connect it with mine.Plsss help, and thanks a lot for posting this script

  12. I am unable to retrieve data from database using codes which are mentioned above on post .. help sir

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.