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 |