• Home
  • Projekte
  • Andere Scripts
  • PHP NearHere Script

PHP - NearHere Script

PHP NEAR HERE.../

script

jQuery(document).ready(function(){ jQuery('#system-message-container').hide(); });

1. Einleitung

Der PHP Near Here Script zeigt auf Basis von zwei Datenbanktabellen den nächsten POI (Point of Interest) nach Eingabe einer Postleitzahl. Hierzu wird eine Datenbanktabelle mit Postleitzahlen & Koordinaten sowie eine weitere mit den POI und dessen Koordinaten verwendet.

Live Demo

2. Datenbanktabellen

In unserer Datenbank (im Beispiel geodata_ch) erstellen wir zwei Tabellen (tbl_locations für die POI's sowie tbl_switzerland als Bibliothek für die Postleitzahlen)

2.1 Tabelle "tbl_locations"

Liste der POI's, beinhaltet Name, Anschrift, Kontaktinformationen sowie Koordinaten

ID als Primary Key

Name des POI

Strasse und Hausnummer des POI

Beinhaltet die Postleitzahl des POI

Beinhaltet den Namen der Ortschaft des POI

Webseiten URL des POI

E-Mail Adresse des POI

Telefonnummer des POI

Mehrere Spalten (Spalte pro Lizenz) / Dinge, welcher dieser POI anbietet

Latitude

Longitude

Weitere Spalten bei Bedarf

2.2 Tabelle "tbl_switzerland"

Liste von Schweizer Postleitzahlen sowie den Koordinaten im Zentrum eines Postleitzahlenbereichs. Tabellenspalten sind wie folgt:

Beinhaltet die Postleitzahl

Beinhaltet den Namen der Ortschaft

Beinhaltet den Kantonsbezeichner in Kurzschreibweise (SG, GR, ...)

Latitude

Longitude

3. Frontpage Vorbereitungen

Zum Start erstellen wir ein neues Dokument "index.php" und erstellen einen Standardmässigen Aufbau nach HTML5 (Link zum Boilerplate). Bei diesem Script habe ich für das Frontend auf das uikit Framework zurückgegriffen, natürlich kann auch Bootstrap oder ein anderes Framework verwendet werden.

3.1 HTML

Dementsprechend finden wir im HEAD Bereich diverse Script Verknüpfungen sowie im BODY eine DIV Struktur, welche für uikit aufgebaut wurde. Das soll uns hier jedoch nicht weiter stören, für die Funktion ist aktuell einzig ein Input Feld mit der ID "userplz" sowie einen Button mit der ID "searchplz" wichtig.

						<form>
						    <fieldset class="uk-fieldset">
						    	<div class="uk-child-width-1-2" uk-grid>
							        <div class="uk-margin">
							            <input id="userplz" class="uk-input" type="number" placeholder="Postleitzahl">
							        </div>
							        <div>
							        	<button id="searchplz" class="uk-width-1-1 uk-button uk-button-default">Suchen</button>
								    </div>
								</div>
						    </fieldset>
						</form>

3.2 Javascript

Auf diese beiden springt nämlich unser jQuery Code im HEAD Bereich an, holt sich den eingetragenen Wert aus dem Postleitzahlenfeld und ruft die Funktion getCoordinates auf:

			$('#searchplz').click(function(){
				$('#partnerlist').fadeOut('slow', function(){
					$(this).empty();
					var plz = $('#userplz').val();
					console.log(plz);
					getCoordinates(plz);
				});
				
				return false;
			});

3.3 Javascript Funktion getCoordinates()

Die Funktion getCoordinates startet einen AJAX Request an die Datenbank und erhält so die Koordinaten und weitere Informationen für diese Postleitzahl im JSON Format. Haben wir in der Response keinerlei Angaben zu "lat" oder "lon" tritt der Fehlerfall ein was zu einem Eintrag in der JS Konsole führt.

			function getCoordinates(plz){
				console.log('Abfrage für '+plz+' gestartet');

				$.ajax({
				    type: "POST",
				    url: 'helper/getCoordinates.php',
				    data: {zipcode: plz},
				    success: function(data){
				    	if(data['lat'] && data['lon']){
				    		getPartners(data['lat'],data['lon']);
				    	}else if (data['error']){
				    		console.log(data['error']);
				    	}else{
				    		console.log('An error occured');
				    	}
				    }
				});


			};

getCoordinates.php auf GitHub ansehen

Sofern alles geklappt hat und der Return Wert eine JSON mit lat & lon Schlüsseln enthält werden diese an die Javsscript Funktion getPartners übergeben.

3.4 Javascript Funktion getPartners()

Auch die Funktion getPartners() startet einen AJAX Request - mit Hilfe der PHP Datei "getPartners.php" im helper Verzeichnis wird die komplette Partnerliste aus der DB gelesen, dies ist leider nötig, denn wir brauchen alle POI um im nächsten Schritt die POI mit der kürzesten Distanz zu unserer Postleitzahl identifizieren zu können.

			function getPartners(lat,lon){
				console.log('Searching next Partner for '+lat+' / '+lon);
				

				$.ajax({
				    type: "POST",
				    url: 'helper/getPartners.php',
				    data: {usr_lat: lat, usr_lon: lon},
				    success: function(data){
				    	buildView(data);
				    }
				});

			}

Bevor wir nun damit beginnen können die View aufzubauen werfen wir noch kurz einen Blick in die Datei getPartners.php im helper Verzeichnis...

4. getPartners PHP Abfrage

Die Datei getPartners.php beinhaltet eine einfache SELECT Abfrage auf der Datenbank, anschliessend jedoch werden die Latitude und Longitude Angaben während des Array fetch an die PHP Funktion distance übergeben - hier wird dann anhand der lat,lon Angaben des POI &amp; der Postleitzahl die Distanz der zwei Koordinatenpunkte (direkte Linie!) berechnet. Für die Berechnung wird der PHP Script von geodatasource.com verwendet.

Als Resultat erhalten wir anschliessend ein Array welches via php multisort nach Distanz (Klein nach Gross) sortiert wird. Wir übergeben anschliessend ein JSON Objekt welches alle Partner, die Informationen und deren Distanz zur gesuchten Postleitzahl enthält.Damit werden wir nun die Javascript Funktion füttern und die Inhalte auf der Seite einblenden.

Die buildView Javascript Funktion bereitet die von PHP erhaltenen Informationen in eine Ansicht und hängt diese mittels Append an das Container Element partnerlist. Auch hier werden uikit relevante Klassen & Strukturen verwendet, die Art der Aufbereitung kann natürlich frei gewählt werden. In unserem Beispiel werden die Inhalte als Dropdown Liste ausgegeben - einem Accordion.

			function buildView(partners){
				console.log(partners);
				for (var i = 0; i < 3; i++) {
					console.log(partners[i]);

					var distance 	= ''+partners[i]['distance'];
    				var shortdist 	= distance.substring(0, 4);

					var partner = '<li><a class="uk-accordion-title uk-text-large" href="#">'+partners[i]['details']['name']+'<br/><span class="uk-text-small">Im Umkreis von ca. '+shortdist+'km</span></a>'
								+ '<div class="uk-accordion-content">'
								+ '<div class="uk-margin-small-left">'
								+ '<h4 class="uk-h6 uk-margin-remove-bottom">Anschrift:</h4>'
			        				+'<ul class="uk-list uk-margin-small-top">'
		        						+'<li><b>'+partners[i]['details']["name"]+'</b></li>'
		        						+'<li>'+partners[i]['details']["street"]+'</li>'
		        						+'<li>'+partners[i]['details']["zip"]+' '+partners[i]['details']["town"]+'</li>'
		        					+'</ul>'
		        					+'<table class="uk-table">';
				        		if(partners[i]['details']["phone"]){
				        			partner += '<tr class="uk-table-small"><td><span class="uk-icon" uk-icon="receiver"</td><td>'+partners[i]['details']["phone"]+'</td></tr>';
				        		}
				        		if(partners[i]['details']["mail"]){
				        			partner += '<tr class="uk-table-small"><td><span class="uk-icon" uk-icon="mail"</td><td>'+partners[i]['details']["mail"]+'</td></tr>';
				        		}
				        		if(partners[i]['details']["web"]){
				        			partner += '<tr class="uk-table-small"><td><span class="uk-icon" uk-icon="world"</td><td>'+partners[i]['details']["web"]+'</td></tr>';
				        		}
		        						
		        				partner +='</table>'
								+ '</div></div></li>';
					$('#partnerlist').append(partner);
					
				}
				$('#partnerlist').fadeIn('slow');
			}

5. Weitere Möglichkeiten

Da wir dank der Postleitzahlen Tabelle sowie der Partner / POI Tabelle die Geocoordinaten der Standorte haben kann in einem nächsten Schritt der Code noch durch eine interaktive (Google) Maps Ansicht mit dynamischer POI Anzeige erweitert werden, doch das ist ein Thema für ein anderes mal....

<\/p>\n

Kontakt

Marco Rensch
Glashüttenweg 30
8887 Mels
This email address is being protected from spambots. You need JavaScript enabled to view it.

Technik

Webseite basierend auf Joomla!
Template erstellt mit uikit
Symbolbilder von unsplash.com