das Triple: jQuery, PHP und eine MySQL-Datenbank
Donnerstag, 23 Juli 2009 5 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>
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.
This is a nested column
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
This is another nested column
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Sehr schönes Script, danke schön dafür. Leider kann man es nicht mehr so gut nachvollziehen, da der Link zum Vorwahlen-dbfile nicht mehr passt.
Danke für den Hinweis, der Link wird geändert
Wie kann man bei diesem Script abfragen, ob nichts gefunden wurde und dies dementsprechend ausgeben? Also z.B. bei Eingabe von '99999' soll eine Meldung kommen: "Kein Eintrag gefunden"
in das php Script müsste vor dem echo $erg; eine if-Abfrage rein, if erg=="" (nichts gefunden) dann $erg='kein ergebnis';
Vielen Dank für diesen fulminant aufbereiteten Crashkurs in Sachen Javascript-PHP-MySQL connector. Das war genau das was ich gerade für meine Anwendung benötigt habe. In ein paar Tagen kommt hier noch ein Link zu eben dieser Anwendung, nach dem Testen. Vielen Dank und viele Grüße vom sonnigen Rhein
ich würde gerne eine query über mehrere felder einer db machen. wie muss da das javascript abgeändert werden? z.b. farbe = rot material = holz preis = >100 wie ändere ich dann diese zeile? da hänge ich gerade: var farbe= $(this).val(); das ist leider zu komplex, um es hier im Rahmen einer Kommentarbeantwortung abzuhandeln. Sorry
Gefällt mir sehr gut, das Script. Vielen Dank dafür! Ich habe es noch ein wenig erweitert: Hat man mehr als 3 Zeichen eingegeben, werden die Suchergebnisse angezeigt. Löscht man dann die Eingabe im Feld, so dass es weniger als 4 Zeichen sind, dann verschwinden auch die Suchergebnisse.