theportraitofageek.com | περί κατασκευής ιστοσελίδων

Ajax,Prototype, PHP και mySQL

17.08.2007

2 ΣΧΟΛΙΑ

Web Development

Τυχαία, έπεσα πάνω σε ένα άρθρο σχετικά με την χρήση του javascript framework Prototype σε ένα “live” μηχανισμό αναζήτησης. Σκέφτηκα πως θα μπορούσε να υλοποιηθεί κάτι παρόμοιο χρησιμοποιώντας το συγκεκριμένο framework για την αναζήτηση εγγραφών σε μια βάση mySQL.

Για να δούμε λοιπόν πώς μπορεί να παίξει κάτι τέτοιο. Πρώτα θα χρειαστούμε μια φόρμα με ένα πεδίο αναζήτησης και ας ονομάσουμε αυτό το αρχείο index.html.

Στην ενότητα head προσθέτουμε τις 2 παρακάτω γραμμές:

Στην ενότητα body της σελίδας μας:

            Search:

	    
        

Ας δημιουργήσουμε τώρα το αρχείο greeting.php το οποίο είναι υπεύθυνο για τη σύνδεση με τη βάση μας και για την εμφάνιση των εγγραφών:

** στο παρακάτω κώδικα συνδέομαι σε μια βάση με ένα πίνακα “details” που έχει μόνο 3 πεδία. id, lName το οποίο και χρησιμοποιώ στη αναζήτηση και το πεδίο fName.

 // sindesi me tin vash
 $link = mysql_connect("localhost","username","password") or die(mysql_error());
 mysql_select_db("database",$link);

 // to alfarithmitiko pou pernaei apo tin forma mas
 $the_name = htmlspecialchars($_GET['greeting-name']);

 // aplo query. Xreiazetai veltiwsi oson afora tin asfaleia,
 $set_person = mysql_query("SELECT * from details where lName like '$the_name%' order by lName");

 // arithmos eggrafwn pou epistrefei to query. tha to emfanisoume ki auto dinamika.
 $get_rows = mysql_num_rows($set_person);

 //an yparxoun eggrafes emfanise.
 if ($get_rows > 0)
 {
	echo "
Number of records found:" . $get_rows . "

\n";
	while ($get_person = mysql_fetch_array($set_person))
	 {
		echo "
" . $get_person['lName'] . ", " . $get_person['fName'] .  "

\n";
	 }//while
 }//if
 else
 // an oxi, error.
 {
	echo "
No records found.

";
 }

Τίποτα σπουδαίο ως εδώ, μιας και το μόνο που έχουμε κάνει είναι να δημιουργήσουμε 2 αρχεία, το index.html που στην ουσία είναι μια απλή φόρμα και το greeting που επιστρέφει δεδομένα βάση του κριτηρίου που δίνουμε στη φόρμα. Η σύνδεση τώρα των 2 αρχείων γίνεται μέσω του αρχείου ajax.js και το οποίο χρησιμοποιεί το prototype framework. (Οπως είδαμε θα χρειαστούμε και το αρχείο prototype.js του οποίου η τελευταία έκδοση είναι διαθέσιμη εδώ.

ajax.js

Event.observe(window, 'load', init, false);

function init(){
     Event.observe('greeting-name', 'keyup', greet, false);
}

function greet(){
 var url = 'greeting.php';
 var pars = 'greeting-name='+escape($F('greeting-name'));
 var target = 'greeting';
 var myAjax = new Ajax.Updater(
		   target,url,{method: 'get', parameters: pars,
		   onLoading:function(request){Element.show('search_spinner');},
		   onSuccess:function(request){Element.hide('search_spinner');}
		   });
}

Για να δούμε όμως τι ακριβώς κάνουμε μέσα σε αυτό το αρχείο. Καταρχήν θέλουμε όταν φορτώνει η σελίδα να παρακολουθήσουμε το event “load” οπότε δηλώνουμε μέσω της Event.observe να κάνει κάτι τέτοιο και να καλέσει τη function init() με την εντολή:

// on load event trexe tin function init()
Event.observe(window, 'load', init, false);

Στην function init() που έχουμε παρακάτω στο αρχείο μας πάλι δηλώνουμε ένα listener στο οποίο λέμε να παρακολουθεί το event ‘keyup’ που σημαίνει κάθε πάτημα πλήκτρου μέσα στο πεδίο ‘greeting-name’ (input id=’greeting-name’…) και κάθε φορά να τρέχει την function greet() που στην ουσία κάνει τη δουλειά που θέλουμε. Εδώ χρησιμοποιούμε το object Αjax.Updater για να συνδεθούμε με το αρχείο greeting.php. Αναλυτικά:

// Ποιο αρχείο θα καλέσω;
url = 'greeting.php';

//Θα περάσω καποια μεταβλητή με κάποια τιμή;
pars = 'greeting-name='+escape($F('greeting-name'));

//Στόχος. Δηλώνουμε το id του div (div id='greeting'... στο αρχείο index.html)
// στο οποίο θα εμφανίσουμε τα αποτελέσματα
target = 'greeting'; 

/*Χρησιμοποιώ τα options onLoading για την εμφάνιση του spinner
κατα τη διάρκεια αναζήτησης εγγραφών και το onSuccess για τη
απόκρυψη του. 
And that's about it. Mπορείτε να κατεβάσετα τα σχετικά αρχεία και να δείτε και ένα παράδειγμα εδώ