Συστήματα Διαχείρισης Περιεχομένου στον Παγκόσμιο Ιστό Διάλεξη #2 η : Εισαγωγή στην PHP. Αλληλεπίδραση PHP MySQL Γαβαλάς Δαμιανός dgavalas@aegean.gr Βασική δομή ενός HTML εγγράφου Δηλώνει την ύπαρξη HTML κώδικα Τα κυρίως περιεχόμενο που περιλαμβάνει τα στοιχεία που αναλύονται και απεικονίζονται στην οθόνη <HTML> <HEAD> </HEAD> <BODY> Επικεφαλίδα: περιέχει πληροφορίες σχετικά με το υπερκείμενο (τίτλος, λέξειςκλειδιά,...) </BODY> </HTML> 1
Προγραμματισμός στον παγκόσμιο ιστό από την πλευρά του πελάτη (client side web programming) Client Side web programming Προγραμματισμός στο web από την πλευρά του πελάτη Tα ενεργά στοιχεία (κώδικας) «κατεβαίνει» στον web browser μαζί με τη στατική πληροφορία (HTML) O Browser πρέπει να μπορεί να εντοπίσει και να εκτελέσει τα ενεργά στοιχεία προγράμματα Δύο κατηγορίες τεχνολογιών: 1. Ο κώδικας είναι προ μεταγλωττισμένος, ο browser τον «ερμηνεύει» (εκτελεί), π.χ. Java Applets 2. Κώδικας σεναρίου (script), ο browser τον επεξεργάζεται και αν είναι συντακτικά σωστός τον εκτελεί, π.χ. Javascript, Vbscript, Flash) HTML HTTP Request WWW Browser DHTML (CSS JavaScript VbScript runtime environment) HTTP Response: στατική HTML WWW Server 2
Client Side: Καταλληλότητα, Πλεονεκτήματα, Μειονεκτήματα Κατάλληλη τεχνολογία όπου: Ελέγχεται η είσοδος του χρήστη (form validation) Απαιτούνται πολύπλοκες λειτουργίες στον πελάτη (πχ. παιχνίδια) Πλεονεκτήματα: Ταχύτερες λόγω τοπικής εκτέλεσης Δυνατότητα εκτέλεσης χωρίς συνεχή σύνδεση server/client Δυνατότητες, ευελιξία, ευχρηστία και καλαισθησία ιστοσελίδων Οικοµικότερες Καμία εμπλοκή με server Μειονεκτήματα: Ο κώδικας είναι ορατός Δεν μπορεί να έχει πρόσβαση στο τοπικό file system Δεν τρέχουν σε όλους τους clients (browsers) Διαδικασία εκτέλεσης Applet Web server page.html Web browser HTML κώδικας 1 <HTML> Hello!!! <APPLET code= welcome.class"> </APPLET> An applet is running above! </BODY> </HTML> welcome.class Κενός χώρος (εδώ θα εμφανιστεί το Αpplet) HTML κώδικας 2 $%@#$$#@bgdb 234#$%#%^#^& 4$%#%pgb$f#@$ 23%^^565^&&m(!@#$6432 3
Γλώσσα σεναρίου Javascript Γλώσσα σεναρίου (script language) Αναπτύχθηκε από τη Netscape Τρέχει σε όλους τους browsers (cross platform) Γράφεται απευθείας μέσα σε HTML έγγραφα με ή χωρίς χρήση ειδικού λογισμικού (HTML authoring tools, script editors) Πλεονεκτήματα/Μειονεκτήματα client side programming g Αντίδραση/επεξεργασία user actions Επεξεργασία/έλεγχος user input Δυναμική εμφάνιση (συγγραφή) HTML Βελτίωση ευχρηστίας, ευελιξίας πλοήγησης Εύκολη στην εκμάθηση/χρήση Όχι όμως πλήρης γλώσσα Παράδειγμα Javascript κώδικα <html> <head> <script language="javascript"> " function message() { alert("this alert box was called with the onload event") } </script> </head> <body onload="message()"> </body> </html> Εκτέλεση σεναρίου 4
Προγραμματισμός στον παγκόσμιο ιστό από την πλευρά του εξυπηρετητή (server side web programming) Server side programming WWW Browser HTML DHTML (CSS JavaScript VbScript runtime environment) JVM (J Applets) / Active X HTTP Request (+ Παράμετρο) HTTP Response: HTML Δυναμική WWW Server Επεξεργασία δυναμικών σελίδων (ASP, JSP, PHP, CGI, Servlets) Βάση Δεδομένων Application Servers 5
PHP Αλληλεπίδραση browser web server με χρήση τεχνολογίας server side 1. O χρήστης συμπληρώνει τη φόρμα και πατάει το πλήκτρο Submit 2. O browser στέλνει την παράμετρο $grade (=7) και ζητάει την αποστολή της σελίδας process_grade.php Web browser Web server 3. O server λαμβάνει process_grade.php την αίτηση και ζητάει την εκτέλεση των <html> ενεργών στοιχείων της <body> σελίδας process_grade.php από την PHP μηχανή <?php if ($grade >= 5) echo "You have passed! else echo "You have failed";?> </body> </html> 4. Η PHP μηχανή εκτελεί τον κώδικα και 5. O server process_grade.php επιστρέφει επιστρέφει τον <html> «καθαρό» HTML HTML κώδικα στον browser που <body> τον εμφανίζει You have passed!!! </body> </html> PHP engine 6
PHP http://www.php.net PHP: PHP Hypertext Preprocessor (Προ επεξεργασία υπερκειμένου PHP) Γλώσσα script σχεδιασμένη για το Web, δημιουργήθηκε το 1994 (από τον R. Lersdorf) Επεξεργασία πρώτα στο server «Παραγωγή» html Επεξεργασία της html από browser Server Side γλώσσα (ο κώδικας εκτελείται στον server) Δυνατότητα για εκτέλεση λειτουργιών στο server Ανάγκη για απονομή δικαιωμάτων για ασφάλεια Διαμόρφωση (configuration) στο server Open source (ανοικτού κώδικα), διαθέσιμη για Windows & εκδόσεις του UNIX, λειτουργεί με οποιοδήποτε web server Η PHP προσφέρει δυνατότητα για: Παραγωγή σελίδες δυναμικού περιεχομένου Ανάγνωση δεδομένων που αποστέλλονται από HTML φόρμες Αποστολή / λήψη Cookies Γιατί PHP; Σε σχέση με τους «ανταγωνιστές» της (Perl, Microsoft ASP, JSP): Υψηλή απόδοση: με ένα φτηνό server μπορούν να εξυπηρετηθούν εκατομμύρια επισκέψεων καθημερινά. Συνεργάζεται εύκολα με τους περισσότερους database servers (βάσεις δεδομένων) Σημαντικό για χτίσιμο πληροφοριακών συστημάτων (π.χ. Εφαρμογές ηλεκτρονικού εμπορίου) Ενσωματωμένες βιβλιοθήκες για συνήθεις web διαδικασίες: δυναμική δημιουργία εικόνων, αποστολή email, χειρισμός cookies Χαμηλό κόστος: δωρεάν Ευκολία μάθησης και χρήσης: η σύνταξή της βασίζεται σε άλλες γλώσσες (μοιάζει με Java, C) Υποστηρίζεται από τους περισσότερους web servers σαν module (επιπρόσθετο δομικό στοιχείο) Μεταφερσιμότητα (portability): ο ίδιος κώδικας δουλεύει χωρίς αλλαγές και σε άλλο λειτουργικό σύστημα Διαθεσιμότητα του κώδικα προέλευσης (open source): μπορούν να πραγματοποιηθούν αλλαγές στη γλώσσα 7
PHP Απλό παράδειγμα Hello.htm <html> <head> <title>call Hello!!!!</title> </head> <body> <p><a href="hello.php"> Say Hello</a> </p> </body> </html> PHP Απλό παράδειγμα hello.php <html> <head><title>php Example</title> </head> <body> <?php echo "Hi, I m a PHP script!";?> </body> </html> 8
PHP Απλό παράδειγμα To HTML αρχείο που λαμβάνει ο web browser <html> <head><title>php Example</title> </head> <body> Hi, I m a PHP script! </body> </html> Πως θα εκτελέσουμε εφαρμογές με PHP/MySQL Οι PHP/MySQL εφαρμογές εκτελούνται σε Η/Υ με εγκατεστημένο: web server PHP engine MySQL server phpmyadmin (web εργαλείο διαχείρισης MySQL βάσεων δεδομένων Οι εγκατάσταση του παραπάνω λογισμικού μπορεί να γίνει είτε ανεξάρτητα είτε μέσα από μέσα από ενοποιημένο λογισμικό που περιλαμβάνει τα 4 προαναφερόμενα, π.χ.: appserv: http://www.appservnetwork.com/ xampp: http://www.apachefriends.org/en/xampp.html 9
Πως θα εκτελέσουμε εφαρμογές με PHP/MySQL Σε αυτό το μάθημα θα χρησιμοποιήσουμε το λογισμικό USBWebserver: http://www.usbwebserver.net/en/ Ο USBWebserver αποτελεί επίσης συνδυασμό των Apache, MySQL, PHP και PhpMyAdmin Επιτρέπει την ανάπτυξη php websites που αποθηκεύονται και μεταφέρονται σε ένα USB stick Αποσυμπιέζουμε (unzip) το αρχείο USBWebserver v8_en.zip και εκτελούμε το usbwebserver.exe Πως θα εκτελέσουμε εφαρμογές με PHP/MySQL Όλες οι σελίδες των websites σας θα αρχίζουν από τη διεύθυνση του web server σας: http://localhost:8080/ Ήδη, στη διεύθυνση http://localhost:8080/ μπορείτε να δείτε μια πρώτη σελίδα ενός «έτοιμου» website που έχει δημιουργηθεί Εφόσον, θέλετε, μπορείτε να επεξεργαστείτε και να τροποποιήσετε αυτή την πρώτη σελίδα (π.χ. στο Dreamweaver) Τα αρχεία των websites θα αποθηκεύονται στον folder root Τα αρχεία των websites θα αποθηκεύονται στον folder root Τα php αρχεία αποθηκεύονται στο root, έχουν κατάληξη *.php και η εκτέλεσή τους ελέγχεται από το browser Ένα αρχείο hello.php που αποθηκεύεται στο root/test θα«τρέξει» στο browser με URL: http://localhost:8080/test/hello.php 10
Ρυθμίσεις στο Adobe Dreamweaver για τη διαχείριση των αρχείων του website Στον Adobe Dreamweaver, επιλέγετε: Site > New Site Δωρεάν web PHP/MySQL hosting http://www.000webhost.com/ Δημιουργήστε ένα account και ελέγξτε τα email σας (θα σας σταλεί το username σας) 11
Δωρεάν web PHP/MySQL hosting: Ρυθμίσεις στον Adobe Dreamweaver Δωρεάν web PHP/MySQL hosting: Ρυθμίσεις στον Adobe Dreamweaver 12
Άσκηση #1 Δημιουργήστε ένα directory lab02 στο root directory σας στο localhost Αποθηκεύστε στο lab02 ένα PHP script το οποίο όταν εκτελείται θα δίνει το ακόλουθο αποτέλεσμα Προσπαθήστε να πετύχετε το ίδιο αποτέλεσμα είτε ενσωματώνοντας τις HTML ετικέτες μορφοποίησης στο PHP script είτε μεταφέροντάς τις εκτός του script, αφήνοντας το script απλά να τυπώνει το μήνυμα Hello World PHP Σύνταξη: Ενσωμάτωση στην HTML <? echo("simplest, an SGML processing instruction has to be configured (short_open_tag=enabled)");?> <?php echo("do like this");?> <script language="php"> echo ("some editors (like FrontPage) don t like processing instructions"); </script> <% echo ("optionally use ASP style tags has to be configured (asp_tags=enabled) "); %> 13
PHP Σύνταξη: Χρήση μεταβλητών <html> <head> <title>test PHP Code</title> </head> <body> <?php $foo = "Bob"; // Assign the value Bob to $foo $bar = $foo; // Set $foo equal to $bar. $bar = "My name is $bar"; // Alter $bar... echo $foo; echo "<br>"; " echo $bar;?> </body> </html> Φόρμες της HTML Φόρμα (form): μια δομή της HTML που επιτρέπει στον «ιδιοκτήτη» μιας ιστοσελίδας να συλλέγει πληροφορίες από χρήστες που την επισκέπτονται. Οι πληροφορίες αυτές, αφότου ληφθούν, μπορούν να σταλθούν σε ένα script που τρέχει είτε στο browser είτε στον web server για περαιτέρω επεξεργασία Οι πληροφορίες εισάγονται από το χρήστη που συμπληρώνει τη φόρμα και τις υποβάλει (συνήθως πατώντας ένα πλήκτρο Submit ) Έπειτα, η διαδικασία φεύγει από την επικράτεια της HTML και περνάει στο script που θα επεξεργαστεί τα δεδομένα Εξαιρέσεις: μια φόρμα μπορεί να κατευθύνει το χρήστη σε μια άλλη σελίδα ή να στείλει ένα email με κείμενο που συμπληρώθηκε στον ιδιοκτήτη της σελίδας. Ετικέτα και ορίσματα των HTML forms: <form name="myform" method="post" action= www.myscriptpage.php"> </form> 14
PHP και HTML φόρμες <form name="myform" onsubmit="return Validate();" method="post" action="reply.php"> Sirname: <INPUT name= sirname" type="text"><br> Name: <INPUT name="name" type="text"><br> Telephone: <INPUT name="phone" type="text"><br> E mail: <INPUT name="email" type="text"><br> <input type="submit" value="submit"> </form> PHP και HTML φόρμες <?php echo "<H1>Hello ". $_POST["name"]. " ". $_POST["sirname"]."</H1>"; $phone = $ POST[ phone ]; $phone = $_POST[ phone ]; $email = $_POST[ email ]; echo "I ll call you at ". $phone. " or email you at <a href=mailto:". $email. ">". $email."</a>";?> 15
Άσκηση #2 Σχεδιάστε μια xhtml φόρμα στην οποία ο χρήστης συμπληρώνει το όνομά του, το υποβάλει (Submit) σε ένα php script και το script αποκρίνεται «τυπώνοντας» το όνομα που πληκτρολογήθηκε Δοκιμάστε να υποβάλετε τα στοιχεία της φόρμας με POST και GET request. Ποιες διαφορές παρατηρείτε; Αρχιτεκτονική Web Βάσεων Δεδομένων browser Αίτηση Απόκριση Web server browser 1 6 Web server PHP engine Database server 1. Αίτηση για όλα τα βιβλία που έχει γράψει ο Καζαντζάκης 2. Ο web server λαμβάνει αίτηση για το books.php 3. Η PHP engine αρχίζει την ανάλυση του script, συνδέεται στον MySQL server και στέλνει το ερώτημα 4. Ο MySQL server επεξεργάζεται το ερώτημα και στέλνει πίσω τη λίστα με τα βιβλία 5. Μορφοποίηση των αποτελεσμάτων σε ΗΤΜL και επιστροφή 6. Ο web server επιστρέφει την HTML σελίδα στον browser 2 5 3 4 16
Ανάπτυξη εφαρμογής on line βιβλιοπωλείου search.html: Η φόρμα αναζήτησης της ΒΔ <html> <head> <title>on Line Βιβλιοπωλείο!!! </title> </head> <body> <h1>book.net Αναζήτηση Καταλόγου</h1> <form method="post" action="library_results.php"> <p>επιλέξτε τον τύπο αναζήτησης: <select size="1" name="searchtype"> <option>author</option> <option>title</option> <option>isbn</option> </select> </p> Εισάγετε το κείμενο αναζήτησης: <input type="text" name="keyword"> <p><input type="submit" value="submit"></p> </form> </body> </html> 17
results.php: Το script ανάκλησης & μορφοποίησης δεδομένων (Ι) <? $keyword = $_POST['keyword']; $searchtype = $_POST[ POST['searchtype']; if (!$keyword!$searchtype) { echo "You have not entered search details. Please go back and try again."; exit; Ελέγχεται ότι ο χρήστης έχει συμπληρώσει όλα τα } στοιχεία της φόρμας // set database server access variables: $host = "localhost"; $user = "root"; $pass = "usbw"; $db = "library"; results.php: Το script ανάκλησης & μορφοποίησης δεδομένων (IΙ) Σύνδεση στον database server, // open connection δίνοντας username/password $connection = mysql_connect($host, $user, $pass) or die ("Unable to connect!"); Σύνδεση με τη ΒΔ απ όπου θα ανακτήσουμε δεδομένα // select database mysql_select_db($db) or die ("Unable to select database!"); mysql_query("set NAMES utf8"); $query = "select * from books where ".$searchtype." like '%".$keyword."%'"; Εκτέλεση SQL ερωτήματος $result = mysql_query($query); query($query); $num_results: πόσες $num_results = mysql_num_rows($result); εγγραφές επέστρεψε το SQL ερώτημα echo "<p>αριθμός τίτλων που πληρούν τα κριτήρια αναζήτησης: ".$num_results."</p>";?> <table border=1><tr><th>isbn</th><th>author</th> <th>title</th><th>price</th></tr> 18
results.php: Το script ανάκλησης & μορφοποίησης δεδομένων (IΙΙ) <? for ($i=0; $i <$num_results; $i++) { $row = mysql_fetch_array($result);?> <tr> <td> <? echo $row['isbn'];?> </td> <td> <? echo $row['author'];?> </td> <td> <? echo $row['title'];?> </td> <td><? echo $row['price'];?> </td> </tr> <? } echo "</table>";?> $row: αποθηκεύει την τρέχουσα εγγραφή των αποτελεσμάτων Άσκηση #3 Χρησιμοποιήστε το αρχείο testdb.sql για να δημιουργήστε (στο phpmyadmin) μια ΒΔ με θηλαστικά Εμφανίστε σε μορφή HTML πίνακα όλο το περιεχόμενο του πίνακα animals της ΒΔ 19
Άσκηση #4 Δημιουργήστε μια φόρμα στην οποία θα εμφανίζεται μια λίστα με τις χώρες καταγωγής των θηλαστικών του πίνακα animals Κάθε χώρα θα εμφανίζεται μία μόνο φορά Όταν επιλέγεται άλλη χώρα, θα εμφανίζονται σε πίνακα τα θηλαστικά που κατάγονται από αυτή 20