Εργαστήριο 6 Προγραμματιστικές Εφαρμογές στο Διαδίκτυο Στόχος Στόχος του εργαστηρίου είναι η εισαγωγή στην γλώσσα PHP και η εξοικείωση των φοιτητών στην χρήση του Web Server για την εξυπηρέτηση σελίδων και scripts γραμμένων σε HTML και PHP. Προετοιμασία περιβάλλοντος εργασίας Από εδώ και στο εξής δεν θα ανοίγουμε τις σελίδες που δημιουργούμε απευθείας από τον browser αλλά θα χρησιμοποιούμε τον εξυπηρετητή Apache Server., ο οποίος θα αναλαμβάνει να σερβρίρει τις σελίδες και τα scripts που γράφουμε σε HTML και PHP. a) Εκκίνηση XAMPP Στους υπολογιστές υπάρχει εγκατεστημένη η πλατφόρμα XAMPP η οποία προσφέρει διάφορες υπηρεσίες για την ανάπτυξη εφαρμογών στο Διαδίκτυο, μεταξύ των οποίων και ο Apache Server. Ξεκινήστε το XAMPP, θα το εντοπίσετε με το όνομα xampp-control.exe και το εικονίδιο: Θα εμφανιστεί το κεντρικό παράθυρο διαχείρισης, όπως παρακάτω: 1
Θα πρέπει να ξεκινήσετε τον Apache Server πατώντας το αντίστοιχο πλήκτρο [Start]. Όταν ο Apache Server ξεκινήσει στην αρχή το χρώμα της κατάστασής του θα είναι κίτρινο και όταν ολοκληρωθεί η εκκίνηση θα γίνει πράσινο: Για να ελέγξετε ότι ο Apache server λειτουργεί σωστά, ανοίξτε έναν web browser και στην μπάρα των διευθύνσεων πληκτρολογήστε τη διεύθυνση: http://localhost Θα πρέπει να εμφανιστεί μία σελίδα καλωσορίσματος και διαχείρισης του XAMPP. b) Εύρεση του φακέλου εργασίας του Apache O Apache σερβίρει αρχεία που βρίσκονται στον φάκελο: C:\xampp\htdocs Σε αυτόν τον φάκελο θα αποθηκεύετε από εδώ και πέρα τα αρχεία των εργαστηριακών ασκήσεων. 2
Άσκηση 6a Δημιουργήστε το αρχείο page6a.html με το παρακάτω περιεχόμενο: <h1>δοκιμαστική HTML σελίδα</h1> Αυτή είναι μία δοκιμαστική HTML σελίδα που σερβίρεται από τον Apache Server. Στον web browser πληκτρολογήστε τη διεύθυνση: διεύθυνση υπολογιστή όνομα αρχείου http://localhost/page6a.html Με αυτόν τον τρόπο ζητάμε από τον Apache Server που τρέχει στον τοπικό μας υπολογιστή (localhost) να μας σερβίρει το αρχείο page6a.html. Θα πρέπει να δείτε την HTML σελίδα που φτιάξατε στον browser σας, αλλά οι ελληνικοί χαρακτήρες δεν θα φαίνονται σωστά. Για να το διορθώσουμε αυτό πρέπει να καθορίσουμε μέσα στην HTML την κωδικοποίηση του αρχείου. Αυτό το κάνουμε με την γραμμή: η οποία πρέπει να τοποθετηθεί στην περιοχή <head> της ιστοσελίδας, μετά από το αρχικό και πριν το αρχικό. Επομένως διορθώστε τον κώδικα της ιστοσελίδας page6a.html ώστε να είναι ως εξής: 3
<head> </head> <h1>δοκιμαστική HTML σελίδα</h1> Αυτή είναι μία δοκιμαστική HTML σελίδα που σερβίρεται από τον Apache Server. Όταν κάνετε αλλαγές στα αρχεία σας, για να ξαναφορτώσει ο browser πρέπει να κάνετε Reload Page, είτε πατώντας το σχετικό κουμπί (ένα περιστροφικό βελάκι συνήθως), ή πατώντας το πλήκτρο F5. Τώρα θα πρέπει τα ελληνικά της σελίδας να φαίνονται σωστά. Άκσηση 6b Δημιουργήστε το αρχείο page6b.php με το παρακάτω περιεχόμενο: <?php echo "It Works!";?> Στον web browser πληκτρολογήστε τη διεύθυνση: http://localhost/page6b.php και θα πρέπει να δείτε το μήνυμα It Works!. Εδώ μάθαμε πώς φτιάχνουμε μία PHP σελίδα: Ξεκινάμε την PHP με το tag: <?php Κλείνουμε την PHP με το tag:?> Με την εντολή echo εμφανίζουμε (τυπώνουμε) ένα String. 4
Άσκηση 6c Δημιουργήστε το αρχείο page6c.php με το παρακάτω περιεχόμενο: <head> </head> <h1>δοκιμαστική PHP σελίδα</h1> Αυτή είναι μία δοκιμαστική PHP σελίδα που σερβίρεται από τον Apache Server και περιέχει και PHP. <?php echo "Αυτό το κείμενο τυπώθηκε από την PHP.";?> Στον web browser πληκτρολογήστε τη διεύθυνση: http://localhost/page6c.php και θα πρέπει να δείτε το περιεχόμενο της ιστοσελίδας. Εδώ μάθαμε πως μπορούμε σε οποιοδήποτε σημείο της γλώσσας HTML να ανοίξουμε ένα PHP tag, να εκτελέσουμε κώδικα PHP και στη συνέχεια να κλείσουμε το PHP tag. 5
Άσκηση 6d Δημιουργήστε το αρχείο page6d.html με το παρακάτω περιεχόμενο: <head> </head> <h1>φόρμα αποστολής στοιχείων</h1> Συμπληρώστε τα στοιχεία σας και πιέστε το πλήκτρο Αποστολή. <form action="page6d_process.php" method="get"> <table align="center" border="0"> <td>όνομα:</td> <td><input type="text" name="firstname"></td> <td>επίθετο:</td> <td><input type="text" name="lastname"></td> <td>όνομα πατρός:</td> <td><input type="text" name="fathername"></td> <td></td> <td><input type="submit" value="αποστολή" /></td> </table> </form> Στον web browser πληκτρολογήστε τη διεύθυνση: http://localhost/page6d.html και θα πρέπει να δείτε το περιεχόμενο της ιστοσελίδας, δηλαδή μια φόρμα για να συμπληρώσετε τα στοιχεία σας. Το μόνο καινούργιο στοιχείο που έχει αυτή η σελίδα είναι το attribute action μέσα στο tag <form>. Με αυτόν τον τρόπο δίνουμε την οδηγία στον browser σε ποιά διεύθυνση να υποβάλει τα στοιχεία που θα συμπληρώσουμε μόλις πατήσουμε το πλήκτρο [Αποστολή]. Δοκιμάστε να συμπληρώσετε τα στοιχεία σας και να πατήσετε το πλήκτρο [Αποστολή]. Θα δείτε ότι ο browser θα σας εμφανίσει το μήνυμα Not Found, διότι η σελίδα στην οποία δώσαμε οδηγία στον browser να στείλει τα στοιχεία που συμπληρώσαμε (page6d_process.php) δεν υπάρχει. 6
Επίσης, αν προσέξετε την μπάρα διευθύνσεων του browser θα δείτε ότι η διεύθυνση στην οποία οδηγήθηκε ο browser είναι η: http://localhost/tei_ip/page6d_process.php?firstname=john&lastname=smith&fathername=peter Δηλαδή ο browser μας πήγε στη διεύθυνση http://localhost/tei_ip/page6d_process.php όπως του ζητήσαμε, αλλά στο τέλος της διεύθυνσης προσέθεσε την ακολουθία:?firstname=john&lastname=smith&fathername=peter Αυτός ο τρόπος υποβολής στοιχείων φόρμας λέγεται GET και τον δηλώσαμε στην φόρμα μας παραπάνω. Δηλαδή ο browser προσθέτει στο τέλος της διεύθυνσης ένα λατινικό ερωτηματικό, και στη συνέχεια τοποθετεί το όνομα του πρώτου στοιχείου της φόρμας (firstname), μετά ένα ίσον (=) και μετά την τιμή (το περιεχόμενο) που πληκτρολογήσαμε σε εκείνο το στοιχείο. Στη συνέχεια, για όλα τα υπόλοιπα στοιχεία της φόρμας, ο browser προσθέτει το σύμβολο ampersand (&), κατόπιν το όνομα του επόμενου στοιχείου (lastname), το ίσον (=) και μετά την τιμή αυτού του στοιχείου. Και το ίδιο ακριβώς κάνει και για το επόμενο στοιχείο (fathername). Άσκηση 6e Αν δεν θέλουμε τα δεδομένα της φόρμας να τοποθετούνται στο τέλος της διεύθυνσης αποστολής, αλλά να αποστέλλονται απευθείας στον server, τότε πρέπει να επιλέξουμε ως τρόπο αποστολής την μέθοδο POST αντί του GET. Στο αρχείο page6d.html αλλάξτε τη μέθοδο από GET σε POST. Ξαναφορτώστε την σελίδα στον browser και συμπληρώστε τα στοιχεία σας. Πατήστε το πλήκτρο [Αποστολή]. Ο browser θα σας ξαναβγάλει το μήνυμα Not Found διότι ακόμη δεν έχουμε υλοποιήσει το πρόγραμμα υποδοχής των δεδομένων (δηλαδή το αρχείο page6d_process.php). Θα το υλοποιήσουμε στην επόμενη άσκηση. Προς το παρόν επιβεβαιώστε ότι η γραμμή διευθύνσεων του browser δεν περιέχει τις τιμές που πληκτρολογήσαμε, αλλά μόνο την διεύθυνση http://localhost/page6d_process.php. 7
Άσκηση 6f Τώρα θα υλοποιήσουμε την σελίδα PHP που θα υποδέχεται τα δεδομένα που υποβάλλουμε από την σελίδα page6d.html. Δημιουργήστε το αρχείο page6d_process.php με το παρακάτω περιεχόμενο: <?php $firstname = $_POST["firstname"]; $lastname = $_POST["lastname"]; $fathername = $_POST["fathername"];?> <head> </head> <h1>σελίδα υποδοχής στοιχείων</h1> Υποβάλατε τα ακόλουθα στοιχεία: <table align="center" border="0"> <td>όνομα:</td> <td><?php echo $firstname;?></td> <td>επίθετο:</td> <td><?php echo $lastname;?></td> <td>όνομα πατρός:</td> <td><?php echo $fathername;?></td> </table> Σας ευχαριστούμε! Στον web browser πηγαίνετε πάλι στην φόρμα page6d.html, συμπληρώστε τα στοιχεία σας και πατήστε το πλήκτρο [Αποστολή]. Τώρα θα πρέπει να εμφανιστεί η σελίδα page6d_process.php η οποία υποδέχεται τα δεδομένα που υποβάλαμε και απλώς μας τα εμφανίζει ξανά. Στον κώδικα της σελίδας page6d_process.php προσέξετε τα κομμάτια με έντονο κόκκινο που έχουμε σημειώσει. Στην αρχή της σελίδας, πάνω ακριβώς από το tag <HTML> γράφουμε PHP κώδικα, όπου 8
υποδεχόμαστε τα δεδομένα που μας απέστειλε η προηγούμενη σελίδα μέσω της φόρμας. Θυμηθείτε ότι στην φόρμα τα στοιχεία είχαν ονόματα firstname, lastname και fathername. Με αυτά ακριβώς τα ονόματα παίρνουμε τα δεδομένα από την μεταβλητή-πίνακα της PHP με όνομα $_POST, γράφοντας $_POST["<όνομα του στοιχείου της φόρμας>"]. Τα δεδομένα τα αποθηκεύουμε σε μεταβλητές της PHP $firstname, $lastname και $fathername. Σημειώστε εδώ ότι όλες οι μεταβλητές στην PHP ξεκινούν με τον χαρακτήρα δολάριο ($). Στη συνέχεια, στα σημεία της HTML που θέλουμε να εμφανίσουμε τα δεδομένα που μας έστειλε ο χρήστης, ανοίγουμε μία περιοχή PHP και κάνουμε απλώς echo την αντίστοιχη μεταβλητή. 9