unForastero

<Webworking>


das Triple: jQuery, PHP und eine MySQL-Datenbank

Donnerstag, 23 Juli 2009     11 Kommentare  

In unserer Datenbank sind die Vorwahlen aus ganz Deutschland gespeichert. Auf der Webseite stellen wir ein Formularfeld bereit, um eine Vorwahl einzutippen. JQuery liest das Eingetippte aus, gibt es direkt an ein kleines PHP-Script weiter, dies fragt die Datenbank ab und gibt das Ergebnis sofort an jQuery und somit an die Webseite zurück.

Wer nicht warten will: dieser Anker führt zur Vorwahlen-Demo

Im ersten Schritt besorgen wir uns erstmal die Vorwahlen, und zwar hier: access-paradies.de. Die Textdatei runterladen. Die Anführungszeichen entfernen, dann als .csv-Datei abspeichern und rein damit in eine MySQL-Datenbank (die Datenbank nenne ich 'vorwahlen', die Datenbanktabelle 'onb_daten'). Vorwahlen sind aber kein Muß, eine Datenbank mit anderen Daten tuts auch.

2. Schritt, das PHP-Script. Nennen wir der Einfachheit halber vorwahlen.php. Als erstes friemeln wir den Sprachsatz um, damit keine Sonderzeichen statt deutscher Umlaute angezeigt werden. Wir tragen die Datenbankzugangsdaten ein und sorgen für eine Datenbankverbindung. Weitere Erklärung nach dem Code.


<?php

// Sprachsatz auf Deutsch umfriemeln, damit die
Umlaute richtig geschrieben werden

header('Content-Type: text/html; charset=iso-8859-1');
setlocale (LC_ALL, 'de_DE@euro', 'de_DE', 'deu_deu', 'ge');


// Datenbankzugangsdaten
$mysqlhost="localhost";
$mysqluser="root";
$mysqlpwd="passwort";
$mysqldb="vorwahlen";

// Datenbankverbindung aufbauen
$connection=@mysql_connect($mysqlhost, $mysqluser, $mysqlpwd);
@mysql_select_db($mysqldb, $connection);


// Vorwahlvariable einlesen
$vorwahl=(int)$_GET['v'];
$vorwahl.='%';

if(strlen($vorwahl)>3){
$rq=mysql_query(" SELECT Vorwahl,Ortsnetzname,Gemeindename FROM onb_daten WHERE Vorwahl LIKE '$vorwahl' ");
while($res=mysql_fetch_object($rq)){
$erg.=$res->Vorwahl.' - '.$res->Ortsnetzname.' -
'.$res->Gemeindename."
";
}
echo $erg;
}

?>

Das (int) weist die GET-Variable an, den Typus in integer zu wechseln. Sollte ein Schlauberger versuchen bösen Code über das Formularfeld einzuschleusen, nehmen wir den Wind aus den Segeln. In die Variable $vorwahl werden nur Zahlen eingeschrieben. Das Prozentzeichen, das wir der Variablen anhängen, dient unserer Datenbankabfrage als sogenannte Wildcard. Mit strlen() prüfen wir, ob unsere Variable mehr als 3 Zeichen hat, nur dann gehts zum MySQL-Query. Ansonsten würden viel zu viele Ergebnisse ermittelt werden.

Also was haben wir: 3 Zeichen aus dem Formualrfeld plus das Wildcard-Zeichen. Damit sind dann weitere mögliche Vorwahlstellen abgedeckt. Der Query wird mit LIKE aufgebaut. Es sollen die Spalten Vorwahl,Ortsnetzname,Gemeindename aus der Datenbanktabelle onb_daten nach Vorwahlen durchsucht werden, die der Variablen entsprechen. Konkretes Beispiel: Wir haben ins Formular 056 eingegeben. Mit der Wildcard haben wir 056%. Gefunden wird also alles was mit 056 anfängt.

Das Ergebnis der Datenbankabfrage speichern wir in $erg, schließen die while-schleife und geben das Ergebnis mit echo aus.



Der jQuery-Code und das Formularfeld

Wird in das Formularfeld mit der ID Ort etwas getippt, startet die jQuery-Funktion, diese Überwachung übernimmt .keyup(). Das value-Attribut des Elements mit der ID wird daraufhin eingelesen. Was also ins Feld Ort getippt wird, wird sofort an unsere jQuery-Funktion in die Variable ort übergeben. Mit length prüfen wir, ob auch mindestens 3 Zeichen getippt wurden, sonst gibt es zuviele Ergebnisse. Sind mehr als 3 Zeichen drin wird mittels get() unser PHP-Script angesprochen. Das Script erhält mit der GET-Methode die eingetippte Vorwahl mitgeteilt. In der get()-Funktion ist eine weitere Funktion eingebunden, die das Ergebnis vom PHP-Script erwartet und mit .html() an das Div mit der ID vorwahlzeigan weitergibt.


<script src="jquery.js"></script>
<script type="text/javascript"> $(document).ready(function(){
$("#ort").keyup( function(){
var ort= $(this).val();
if(ort.length > 3){
$.get("vorwahlen.php?v="+ort+"",
function(text){
$("#vorwahlzeigan").html(text);
});
}

});
});
</script>



<input type="text" name="ort" id="ort" size="15" value="" />
<div id="vorwahlzeigan"></div>

 Praxistest: Vorwahl eingeben - Orte finden 




Für den Praxistest habe ich das Script geringfügig verändert. Im PHP-Script wird auch die Anzahl der gefundenen Orte an jQuery zurückgeben. Damit wird die Höhe des HTML-Elements dynamisch verändert. Mehr Orte - größeres Fieldset.



diese Seite teilen:




Kommentare

es gibt insgesamt 11 Kommentar(e)






neu laden








2009 - 2015 Copyright © unforastero.de       rechtliche Hinweise |  Impressum |  Datenschutz