Mysql
 sql >> Datenbank >  >> RDS >> Mysql

Pincode-Datenbank von Indien mit Standortsuchskript in PHP und JQuery

In diesem Beitrag werde ich Ihnen ein sehr nützliches Skript und eine Datenbank für Ihre Projekte geben. Jeder Körper braucht dies, wenn Leute an Versand-basierten Projekten und anderen Post-basierten Projekten arbeiten.

Hier zeige ich Ihnen, wie Sie mit PHP, Jquery und MySQL ein sehr einfaches Location-Finder-Skript per PIN-Code erstellen.





Sie können auch Laden Sie hier kostenlos die Pincode-/Postleitzahl-/Postleitzahlendatenbank von Indien herunter.

DEMO HERUNTERLADEN

Fangen wir mit dem Tutorial an.

Datenbank und Tabelle erstellen.

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;



Erstellen Sie eine HTML-Datei, in die Sie Ihren gesamten UI-Level-Code einfügen.
Hier habe ich das jquery-ui Auto-Complete-Plugin verwendet. Sie können dieses Tutorial zum Erstellen der Auto-Complete/Auto-Suggest-Funktion für Ihre Website verwenden: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>

Jetzt ist es an der Zeit, eine Serverdatei zu erstellen, die PIN-Code-Daten aus Ihrer MySQL-Datenbank abruft und Ihnen die gewünschte Ausgabe liefert. Sie können diese Datei nach Ihren Bedürfnissen ändern.

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);
}
 
?>

Ihre Verzeichnisstruktur wird sein

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

Wenn Sie alle Schritte erfolgreich durchgeführt haben, klicken Sie einfach auf die URL im Browser und sehen Sie sich die Demo an.

DEMO HERUNTERLADEN

Wenn Ihnen dieser Beitrag gefällt, vergessen Sie bitte nicht, Mein öffentliches Notizbuch für weitere nützliche Dinge zu abonnieren.