un Forastero  <Webworking>


das Triple: jQuery, PHP und eine MySQL-Datenbank

Donnerstag, 23 Juli 2009   9 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.





Kommentare

es gibt insgesamt 9 Kommentar(e)

  1. Klaus http://brazzers.de schreibt am 31.01.2011, 19.00 Uhr

    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

  2. Andi schreibt am 09.02.2011, 18.24 Uhr

    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';

  3. goeckman schreibt am 19.04.2011, 16.38 Uhr

    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

  4. greg schreibt am 11.09.2011, 21.25 Uhr

    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

  5. Pac-Man/Holger http://www.pac-man.istcool.de schreibt am 09.01.2012, 20.14 Uhr

    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.

  6. Carsten schreibt am 04.09.2012, 13.14 Uhr

    Du schreibst "Mit length prüfen wir, ob auch mindestens 3 Zeichen getippt wurden,...". Noch ist das nicht so, vielleicht spendierst Du if(ort.length > 3){ und if(strlen($vorwahl)>3){ noch ein = Zeichen, denn im Moment fragst Du nur auf größer ab ;)

  7. Axel http://www.myballpythons.com schreibt am 28.01.2013, 16.36 Uhr

    Super Skript, werde ich auch auf unserer Seite verwenden, vielen Dank dafür.

  8. Don schreibt am 09.07.2013, 17.31 Uhr

    Hi ... wenn es wirklich gehen sollte wäre es fantastisch, aktuell sehe ich nämlich keine Anzeige ... wenn ich es auseinandergebastelt habe würde ich mal Feedback geben oder ich bin einfach nur blind und sehe das nicht was unsere Vorredner gepostet haben. Wäre auch gut, wenn man ein funktionierendes Beispiel hätte. Daraus könnte man gut einen Generator machen mit einem anderen Datensatz! Cheers in diesem Sinne!

  9. Philipp schreibt am 30.08.2013, 09.12 Uhr

    Ich finde das Script echt Klasse. Allerdings hab ich ein Problem und zwar, wenn ein Eintrag gefunden wird, schreibt er mir dir Ergebnisse zwar hin, fügt aber immer die Textbox (id=vorwahlzeigean) nochmals unten dran. Warum?



Name*
Vorname
Kommentar*
Email
Homepage
Telefon
Sicherheitscode *
neu laden
 

vionlink comments by vision impress webdesign

^