5η Συνάντηση Εκπαιδευτικών Πληροφορικής στη Δυτική Μακεδονία Πτολεμαΐδα, 29 Σεπτ 2005 Δημιουργία Δυναμικών Ιστοσελίδων με PHP και Dreamweaver MX Στυλιάδης.

Παρουσίαση με θέμα: "5η Συνάντηση Εκπαιδευτικών Πληροφορικής στη Δυτική Μακεδονία Πτολεμαΐδα, 29 Σεπτ 2005 Δημιουργία Δυναμικών Ιστοσελίδων με PHP και Dreamweaver MX Στυλιάδης."— Μεταγράφημα παρουσίασης:

1 5η Συνάντηση Εκπαιδευτικών Πληροφορικής στη Δυτική Μακεδονία Πτολεμαΐδα, 29 Σεπτ 2005 Δημιουργία Δυναμικών Ιστοσελίδων με PHP και Dreamweaver MX Στυλιάδης Κων/νος, Υπ. Κέντρου ΠΛΗ.ΝΕ.Τ. Ν. Φλώρινας

2 Τι Είναι η PHP Η PHP είναι μια πολύ δημοφιλής γλώσσα συγγραφής σεναρίων στην πλευρά του server (server-side scripting language), που είναι γρήγορη, διαθέτει πολλές ενσωματωμένες συναρτήσεις και, το σημαντικότερο, είναι δωρεάν. Η PHP είναι ένα εργαλείο για τη δημιουργία δυναμικών ιστοσελίδων (dynamic web pages). Η παρουσία της είναι απόλυτα διαφανής (αόρατη) στον τελικό χρήστη. Η PHP είναι case sensitive, δηλ. ξεχωρίζει τα πεζά από τα κεφαλαία γράμματα. Η PHP συνεργάζεται αρμονικά με τη βάση δεδομένων MySQL και υποστηρίζονται και οι δύο πλήρως από το Πανελλήνιο Σχολικό Δίκτυο (EDUnet).

3 Τι Είναι η PHP Μια ιστοσελίδα που περιέχει κάποιον κώδικα σε PHP υφίσταται προεπεξεργασία από τη μηχανή της PHP, που αποκαλείται διερμηνευτής (interpreter), και τα αποτελέσματα αυτής της επεξεργασίας στέλνονται πίσω στον Web server και από εκεί στον φυλλομετρητή του χρήστη (επισκέπτη) της ιστοσελίδας, ο οποίος βλέπει μόνο καθαρό κώδικα HTML και όχι τον αρχικό κώδικα της PHP. Καθώς μόνο τα αποτελέσματα της επεξεργασίας του PHP κώδικα είναι που στέλνονται στον φυλλομετρητή, ο κώδικας που τα δημιούργησε παραμένει κρυφός και συνεπώς πολύ πιο ασφαλής. Αυτό το είδος της προεπεξεργασίας αποκαλείται server-side scripting.

4 Η Ονομασία PHP Τα αρχικά PHP σήμαιναν παλαιότερα Personal HomePage και από εκεί προήλθε η ονομασία PHP, που αργότερα μετονομάστηκε σε "PHP : Hypertext PreProcessor". Σημαίνει ότι πρόκειται για μια γλώσσα συγγραφής σεναρίων (script language) που είναι εύκολη στη χρήση της και εύκολη στο να μπορεί να αναμειχθεί με τον υπάρχοντα HTML κώδικα μιας ιστοσελίδας.

5 Τα Αρχεία της PHP Τα αρχεία της PHP μπορεί να περιέχουν κείμενο, ετικέτες (tags) της HTML και scripts με τα tags. Τα αρχεία της PHP επιστρέφονται στον φυλλομετρητή (browser) του χρήστη σαν απλή (καθαρή) HTML. Τα αρχεία της PHP μπορεί να έχουν επέκταση ".php", ".php3", ".php4" ή και ".phtml".

6 Τι Είναι η MySQL Η MySQL είναι ένας μικρός database server. Η MySQL είναι ιδανική για μικρές και μεσαίες εφαρμογές. Η MySQL υποστηρίζει την standard SQL. Η MySQL μεταγλωττίζεται σε πολλές πλατφόρμες. Η MySQL είναι ελεύθερη (δωρεάν) για κατέβασμα (download) και χρήση.

7 Η MySQL στο EDUnet Κάθε σχολική μονάδα ή και κάθε εκπαιδευτικός που διαθέτει λογαριασμό στο Πανελλήνιο Σχολικό Δίκτυο (EDUnet), έχει τη δυνατότητα να αποκτήσει και ειδικούς κωδικούς για τη διαχείριση μιας βάσης δεδομένων με την MySQL και την PHP. Περισσότερες πληροφορίες στο site : http://dide.flo.sch.gr/Plinet/Tutorials/Tutorials- MySQL-sch.html http://dide.flo.sch.gr/Plinet/Tutorials/Tutorials- MySQL-sch.html

8 Η Σύνταξη της PHP Θα πρέπει να έχουμε υπόψη μας ότι δεν μπορούμε να δούμε τον πηγαίο κώδικα (source code) της PHP επιλέγοντας Προέλευση από το μενού Προβολή του Internet Explorer, αλλά θα δούμε την έξοδο (αποτέλεσμα) από το αρχείο της PHP, που θα είναι καθαρή HTML. Αυτό συμβαίνει επειδή τα scripts εκτελούνται στον server πριν σταλεί το αποτέλεσμα πίσω στον φυλλομετρητή.

9 Η Σύνταξη της PHP Ένα αρχείο της PHP κανονικά περιέχει tags (ετικέτες) της HTML, όπως ακριβώς ένα αρχείο της HTML, και επιπλέον κάποιο κώδικα scripting σε PHP. Ακολουθεί ένα παράδειγμα ενός απλού PHP script το οποίο στέλνει το κείμενο "Hello World" στον φυλλομετρητή (browser) :

10 Η Σύνταξη της PHP Ένα scripting block της PHP ξεκινά πάντα με το. Ένα scripting block της PHP μπορεί να τοποθετηθεί οπουδήποτε σ’ ένα έγγραφο (ιστοσελίδα). Η κάθε γραμμή κώδικα στην PHP θα πρέπει να τελειώνει με τον χαρακτήρα ; (semicolon), ο οποίος είναι διαχωριστής (separator) και χρησιμοποιείται για να ξεχωρίζει ένα σύνολο εντολών από ένα άλλο.

11 Οι Μεταβλητές της PHP Όλες οι μεταβλητές της PHP αρχίζουν με το σύμβολο $ και μπορούν να περιέχουν συμβολοσειρές (strings), αριθμούς ή πίνακες (arrays). Το παρακάτω script καταχωρεί το string "Hello World" στη μεταβλητή $txt : <?php $txt="Hello World"; echo $txt; ?>

12 Η Εντολή If στην PHP <?php $d=date("D"); if ($d= ="Fri") echo "Να περάσετε ένα ωραίο Σαββατοκύριακο!"; else echo "Να περάσετε ωραία την ημέρα σας!"; ?>

13 Η Εντολή While στην PHP <?php $i=1; while($i<=5) { echo "Ο αριθμός είναι : ". $i. " "; $i++; } ?>

14 Η Εντολή For στην PHP <?php for ($i=1; $i<=5; $i++) { echo "Hello World! "; } ?>

15 Οι Μεταβλητές Server στην PHP Όλοι οι servers περιέχουν πληροφορίες όπως από ποιο URL ήρθε ο χρήστης, ποιος είναι ο φυλλομετρητής (browser) του κ.ά. Αυτές οι πληροφορίες περιέχονται σε μεταβλητές. Στην PHP, η $_SERVER είναι μια δεσμευμένη (reserved) μεταβλητή που περιέχει όλες τις πληροφορίες του server. Η $_SERVER είναι μια καθολική (global) μεταβλητή, που σημαίνει ότι είναι διαθέσιμη παντού σ’ ένα PHP script. Το επόμενο παράδειγμα θα εμφανίσει από ποιο URL ήρθε ο χρήστης (referrer), ποιος είναι ο φυλλομετρητής του (browser) καθώς και την IP διεύθυνσή του (IP address).

16 Οι Μεταβλητές Server στην PHP <?php echo "Referer : ". $_SERVER["HTTP_REFERER"]." "; echo "Browser : ". $_SERVER["HTTP_USER_AGENT"]." "; echo "User's IP address : ". $_SERVER["REMOTE_ADDR"]; ?>

17 Το Dreamweaver MX Το Dreamweaver MX μάς δίνει τη δυνατότητα να ελέγχουμε την ισχύ της PHP μ’ έναν οπτικό τρόπο χωρίς να χρειάζεται να μπαίνουμε στον ίδιο τον κώδικα, εκτός κι αν παραστεί ανάγκη. Το Dreamweaver MX έχει ενσωματώσει τα χαρακτηριστικά και τις δυνατότητες των προγραμμάτων (πακέτων) Dreamweaver, UltraDev και HomeSite σ’ ένα μόνο εργαλείο. Το Dreamweaver MX διαθέτει επίσης ενισχυμένη υποστήριξη για συστήματα server, όπως είναι τα PHP, ASP.NET και ColdFusion MX.

18 Οι Ανταγωνιστικές Τεχνολογίες Για τη δημιουργία ενός database-enabled web site υπάρχουν πολλοί τρόποι για να πετύχουμε το ίδιο αποτέλεσμα. Όλες αυτές οι διαφορετικές τεχνολογίες επιτυγχάνουν στο τέλος το ίδιο πράγμα αλλά μ’ έναν ελαφρά διαφορετικό τρόπο. Οι κυριότερες εναλλακτικές λύσεις (τεχνολογίες) της PHP είναι η ASP (Active Server Pages), η JSP (Java Server Pages) και η CFML (Cold Fusion Markup Language). Υπάρχουν φυσικά κι άλλες, αλλά αυτές οι τέσσερις τεχνολογίες αποτελούν τους κυριότερους ανταγωνιστές όσον αφορά τη δημοτικότητα και υποστηρίζονται όλες από το Dreamweaver MX.

19 Έλεγχος για τη Λειτουργία της PHP Αφού έχουμε σιγουρευθεί ότι ο web server στον οποίο θα στήσουμε την εφαρμογή μας υποστηρίζει την PHP, θα πρέπει να κάνουμε μια σύντομη και απλή δοκιμή πριν συνεχίσουμε. Δημιουργούμε ένα αρχείο με το Σημειωματάριο (Notepad) των Windows, το οποίο αποθηκεύουμε με το όνομα test.php και με το εξής περιεχόμενο : Το φορτώνουμε (upload) στον web server και το καλούμε από τον φυλλομετρητή μας. Αν όλα δουλεύουν κανονικά, θα πρέπει να δούμε μια μεγάλη ιστοσελίδα μ’ ένα πλήθος από τεχνικά χαρακτηριστικά για την εγκατεστημένη PHP.

20 Ξεκίνημα με το Dreamweaver MX Τώρα που έχουμε έναν web server που εκτελεί την PHP και έναν MySQL database server, είναι καιρός να ασχοληθούμε με το κυρίως θέμα μας που είναι ο σχεδιασμός PHP ιστοσελίδων με το Dreamweaver MX. Θα ξεκινήσουμε δίνοντας στο Dreamweaver MX όλες τις απαιραίτητες πληροφορίες που θα χρειασθεί για να μπορέσει να συνεργασθεί με το περιβάλλον ανάπτυξης, δημιουργώντας έναν ορισμό του δικτυακού τόπου (Site Definition).

21 Ξεκίνημα με το Dreamweaver MX Αφού θα έχει ορισθεί το site, θα δούμε πώς μπορούμε να δημιουργήσουμε μια σύνδεση με τη βάση δεδομένων (database connection) μέσα στο Dreamweaver, ώστε να μπορούμε να έχουμε πρόσβαση στη βάση δεδομένων της MySQL που έχουμε δημιουργήσει νωρίτερα. Ο ορισμός ενός δικτυακού τόπου (site definition) είναι το βασικό σημείο αρχής κατά την ανάπτυξη ενός οποιουδήποτε web site.

22 Ξεκίνημα με το Dreamweaver MX Το πρώτο βήμα είναι η ονομασία του site και προς τον σκοπό αυτό πηγαίνουμε στο μενού Site και επιλέγουμε New Site… Θα ξεκινήσει ο οδηγός ορισμού του site (Site Definition Wizard) και στο πρώτο πλαίσιο διαλόγου θα πρέπει να δώσουμε ένα όνομα στο site μας, όπως The Dreamweaver Hotel, το οποίο όνομα είναι καθαρά τυπικό για την αναγνώριση του site από εμάς και δεν πρόκειται να χρησιμοποιηθεί πουθενά.

23 Ξεκίνημα με το Dreamweaver MX Αφού έχουμε καθορίσει ένα όνομα για το site θα πρέπει να ορίσουμε στο δεύτερο βήμα του οδηγού την τεχνολογία server που θα χρησιμοποιήσει το site. Πρώτα απ’ όλα θα πρέπει να αποφασίσουμε αν το site μας θα χρησιμοποιεί δυναμικές τεχνολογίες, όπως είναι η ASP, JSP, CFML ή PHP, ή απλά θα επιστρέφει στατικές HTML σελίδες. Επιλέγουμε το κατάλληλο πλήκτρο επιλογής (Yes, I want to use a server technology) και από την πτυσσόμενη λίστα που θα εμφανισθεί αμέσως από κάτω (Which server technology?), επιλέγουμε PHP MySQL.

24 Ξεκίνημα με το Dreamweaver MX Η δεύτερη επιλογή Edit locally, then upload to remote testing server είναι η προτιμότερη στην περίπτωση που σχεδιάζουμε τις σελίδες μας και τις δημοσιεύουμε (upload) σ’ έναν server που βρίσκεται σ’ ένα διαφορετικό μηχάνημα, είτε σ’ ένα τοπικό δίκτυο ή στο Internet. Και μ’ αυτήν την επιλογή, η μόνη πληροφορία που θα χρειασθεί ο οδηγός θα είναι ο φάκελος όπου θα αποθηκεύσουμε τοπικά όλα τα αρχεία τα σχετικά με το Web site.

25 Ξεκίνημα με το Dreamweaver MX Στο επόμενο βήμα του οδηγού θα πρέπει να απαντήσουμε στην ερώτηση How do you connect to your testing server? επιλέγοντας μία από τέσσερις επιλογές (I’ll set this up later, FTP, Local/Network, RDS). Η επιλογή RDS (Remote Development Service) είναι για χρήση μ’ έναν ColdFusion server.

26 Ξεκίνημα με το Dreamweaver MX Αν επιλέξουμε FTP, που είναι το πιθανότερο, θα εμφανισθούν τέσσερα πλαίσια κειμένου όπου θα πρέπει να καταχωρήσουμε το hostname ή την FTP address του server, το όνομα του φακέλου στον server όπου θα αποθηκευθεί το Web site και τέλος το login (user name) και το password για να μπορέσει να γίνει η FTP σύνδεση. Έχουμε τη δυνατότητα να αποθηκεύσουμε τους κωδικούς για την FTP σύνδεση αν επιλέξουμε το πλαίσιο ελέγχου Save και επίσης να κάνουμε κλικ στο πλήκτρο Test Connection ώστε να διαπιστώσουμε αν η σύνδεση λειτουργεί κανονικά.

27 Δημιουργία της Σύνδεσης με τη Βάση Δεδομένων Για να ξεκινήσουμε τη δημιουργία μιας σύνδεσης με τη βάση δεδομένων (database connection), θα πρέπει να πάμε στο Application panel και να επιλέξουμε την καρτέλα Databases. Προσοχή : αν δίπλα στο πλήκτρο – υπάρχει το κείμενο Document Type : HTML, τότε θα πρέπει να κλείσουμε το τρέχον έγγραφο και να δημιουργήσουμε ένα καινούργιο αρχείο PHP.

28 Δημιουργία της Σύνδεσης με τη Βάση Δεδομένων Αυτό γίνεται καθώς το Dreamweaver αλλάζει (προσαρμόζει) τον τρόπο εργασίας του ανάλογα με τις επιλογές μας και κάνει διαθέσιμα μόνο τα εργαλεία που είναι απαραίτητα κάθε φορά. Έτσι, αν το έγγραφό μας είναι ένα απλό HTML αρχείο, το Dreamweaver δεν θα μας επιτρέψει πρόσβαση στις δυναμικές του συμπεριφορές, όπως είναι η σύνδεση με τη βάση δεδομένων.

29 Δημιουργία της Σύνδεσης με τη Βάση Δεδομένων Αφού ανοίξουμε μια κανούργια δυναμική ιστοσελίδα με PHP κωδικοποίηση, πηγαίνουμε πάλι στο Application panel και κάνουμε κλικ στο πλήκτρο + και μετά στο MySQL Connection. Θα εμφανισθεί το πλαίσιο διαλόγου MySQL Connection με τα εξής πέντε πεδία κειμένου : Connection Name, MySQL Server, User Name, Password και Database.

30 Δημιουργία της Σύνδεσης με τη Βάση Δεδομένων Υπάρχει μια άτυπη σύμβαση για την ονομασία των συνδέσεων με τις βάσεις δεδομένων, όπου χρησιμοποιούμε το πρόθεμα (prefix) conn. Στην περίπτωσή μας μπορούμε να ονομάσουμε τη σύνδεση που δημιουργούμε ως connHotel. Δίνουμε μετά το όνομα (hostname) για τον MySQL Server, που είναι συνήθως ίδιο με το όνομα του web server, και το username και password, που είναι όμως ειδικά για σύνδεση με τον MySQL Server. Το hostname για τον MySQL Server είναι το userdb για όσους χρησιμοποιούν τις υπηρεσίες του Πανελλήνιου Σχολικού Δικτύου (EDUnet).

31 Δημιουργία της Σύνδεσης με τη Βάση Δεδομένων Αφού έχουμε δώσει όλες τις παραπάνω πληροφορίες, κάνουμε κλικ στο πλήκτρο Select… για να επιλέξουμε τη βάση δεδομένων με την οποία θα δουλέψουμε ή μπορούμε και να γράψουμε το όνομά της απευθείας στο πλαίσιο κειμένου Database. Θα πρέπει μετά να κάνουμε κλικ στο πλήκτρο Test για να γίνει δοκιμή της σύνδεσης. Αν όλα δουλέψουν κανονικά, το Dreamweaver MX θα ενημερώσει αυτόματα την καρτέλα Databases του Application panel, όπου θα μπορούμε να δούμε όλους τους πίνακες (tables) που υπάρχουν στη βάση δεδομένων που έχουμε επιλέξει.

32 Δημιουργία Ιστοσελίδας για Καταχώρηση των Στοιχείων Θα πρέπει να δημιουργήσουμε μια ιστοσελίδα που θα περιέχει μια φόρμα (form) και έναν πίνακα (table) και κατάλληλα πεδία, όπως π.χ. Επώνυμο, Όνομα, Πόλη κατοικίας με τις εντολές των μενού Insert  Form, Insert  Table και Insert  Form Objects  Text Field. Δημιουργούμε και ένα πλήκτρο υποβολής της φόρμας (submit button). Επιλέγουμε ένα-ένα τα πεδία της φόρμας και στην καρτέλα Properties δίνουμε τα ίδια ονόματα με τα ονόματα ταν αντίστοιχων πεδίων του πίνακα της βάσης δεδομένων που έχουμε δημιουργήσει νωρίτερα.

33 Δημιουργία Ιστοσελίδας για Καταχώρηση των Στοιχείων Θα δούμε τώρα πώς θα καταχωρείται μια εγγραφή (record) στη βάση δεδομένων όταν θα γίνεται υποβολή της φόρμας. Θα πρέπει να έχουμε ήδη δημιουργήσει μια σύνδεση με τη βάση δεδομένων, η οποία θα φαίνεται στην καρτέλα Databases του Application panel. Επιλέγουμε μετά την καρτέλα Server Behaviors του Application panel, κάνουμε κλικ στο πλήκτρο + και επιλέγουμε Insert Record.

34 Δημιουργία Ιστοσελίδας για Καταχώρηση των Στοιχείων Στο πλαίσιο διαλόγου που θα εμφανισθεί θα δούμε το όνομα της φόρμας της ιστοσελίδας, το όνομα της σύνδεσης, το όνομα του πίνακα (tabe) της βάσης δεδομένων καθώς και την αντιστοιχία των πεδίων της φόρμας με τα πεδία του πίνακα της βάσης δεδομένων. Ανεβάζουμε (upload) την ιστοσελίδα στον server, την ανοίγουμε μ’ έναν φυλλομετρητή, καταχωρούμε κάποια δοκιμαστικά στοιχεία και πάμε μετά στο phpmyadmin για να δούμε αν όντως καταχωρήθηκαν σωστά.