ΕΛΛΗΝΙΚΟ ΑΝΟΙΚΤΟ ΠΑΝΕΠΙΣΤΗΜΙΟ. 3 η Γραπτή Εργασία ΠΛΗ 23 Ακαδημαϊκό Έτος ( Τόμος Β Κεφάλαια 1 4 ) Ημερομηνία Παράδοσης 25.3.

Transcript

1 3 η Γραπτή Εργασία ΠΛΗ 23 Ακαδημαϊκό Έτος ( Τόμος Β Κεφάλαια 1 4 ) Ημερομηνία Παράδοσης ΕΝΔΕΙΚΤΙΚΕΣ ΑΠΑΝΤΗΣΕΙΣ Άσκηση 1 Δημιουργία συστήματος διαδραστικού ημερολογίου Εισαγωγή Στην Άσκηση αυτή ζητείται να προσθέσετε κάποιες λειτουργίες στο σύστημα που αναπτύχθηκε στα πλαίσια της 2 ης Γραπτής Εργασίας. Σκοπός της εφαρμογής που καλείστε να αναπτύξετε είναι η δημιουργία ενός online διαδραστικού ημερολογίου για τους τρεις πρώτους μήνες του 2012, όπου ο χρήστης θα μπορεί να αποθηκεύει γεγονότα και υπενθυμίσεις. Για την υλοποίηση της άσκησης θα χρησιμοποιηθούν τεχνολογίες HTML, PHP, JavaScript και MySQL. Για την εγκατάσταση των PHP και MySQL, καθώς και του Web Server, προτείνεται η χρήση του πακέτου WampServer που υπάρχει στο 2 ο CD του ΕΔΥ. Λειτουργικές προδιαγραφές του συστήματος Το σύστημα θα αποτελείται από μία Βάση Δεδομένων και από ένα web περιβάλλον διεπαφής (web interface). Στη βάση θα αποθηκεύονται πληροφορίες για τις υπενθυμίσεις του χρήστη. Ο χρήστης του συστήματος θα έχει τη δυνατότητα να εισάγει / τροποποιεί / διαγράφει υπενθυμίσεις για συγκεκριμένες μέρες και ώρες. Επίσης θα μπορεί να επισημαίνει τις υπενθυμίσεις με ετικέτες (tags). Τέλος, θα έχει τη δυνατότητα αναζήτησης υπενθυμίσεων. Ερώτηση 1 Η Βάση Δεδομένων. Για τη δημιουργία της βάσης μπορεί να χρησιμοποιηθεί το εργαλείο phpmyadmin το οποίο είναι ενσωματωμένο στο πακέτο WampServer. Αφού έχετε ξεκινήσει σωστά το WampServer, μπορείτε να χρησιμοποιήσετε το phpmyadmin κάνοντας αριστερό click στο εικονίδιο του WampServer στη γραμμή εργαλείων (system tray) και επιλέγοντας την αντίστοιχη επιλογή. Από την κεντρική οθόνη της εφαρμογής μπορείτε να δημιουργήσετε τη βάση σας δίνοντας ένα όνομα στο αντίστοιχο πεδίο. Οι πίνακες σχέσεις είναι ενδεικτικά οι παρακάτω: Υπενθύμιση (Κωδικός, Τίτλος, Περιγραφή, ημερομηνία/ώρα). Περιέχει τις υπενθυμίσεις που έχουν καταχωρηθεί στο σύστημα. Ετικέτες (Κωδικός ετικέτας, ετικέτα). Περιέχει τις ετικέτες (tags) που έχουν καταχωρηθεί στο σύστημα. Υπενθύμιση_ετικέτα (Κωδικός υπενθύμισης, Κωδικός ετικέτας). Περιέχει την αντιστοίχηση ετικετών και υπενθυμίσεων. 1

2 Το περιβάλλον διεπαφής Το περιβάλλον διεπαφής αποτελείται από web σελίδες που δημιουργούνται με PHP και HTML. Τα αρχεία αυτά πρέπει να αποθηκεύονται στο www directory (αριστερό click στο εικονίδιο του WampServer) και να είναι προσπελάσιμα μέσω του url Η μορφοποίηση των δεδομένων κάθε σελίδας από τις παρακάτω, θα γίνεται με χρήση CSS. Θα πρέπει να υπάρχει ένα ενιαίο περιβάλλον πλοήγησης στην εφαρμογή, καθώς και ένα καλαίσθητο interface. Τέλος, το περιβάλλον της διεπαφής θα είναι στην Ελληνική γλώσσα. Για τη σύνδεση καθώς και για την υποβολή ερωτήσεων στη βάση, μπορείτε να συμβουλευθείτε το παρακάτω link: Σε όλες τις φόρμες, η ύπαρξη σωστών τιμών στα υποχρεωτικά πεδία θα ελέγχεται με χρήση JavaScript. Για παράδειγμα δείτε εδώ: Ερώτηση 2 Εισαγωγή/ προβολή υπενθύμισης Στην αρχική σελίδα του ημερολογίου οι ημερομηνίες για τις οποίες έχουν καταχωρηθεί υπενθυμίσεις θα επισημαίνονται με διαφορετικό χρώμα. Αν ο χρήστης επιλέξει μία ημερομηνία για την οποία υπάρχουν ήδη υπενθυμίσεις, θα εμφανίζεται, εκτός από τη φόρμα εισαγωγής, μία λίστα με τις πληροφορίες για τις υπάρχουσες υπενθυμίσεις. Ο χρήστης θα μπορεί να κάνει κλικ σε μία ημερομηνία του ημερολογίου και θα μεταφέρεται στη φόρμα εισαγωγής υπενθύμισης. Στη φόρμα θα υπάρχουν τα πεδία τίτλος, λίστα ετικετών, περιγραφή και ώρα (η ημερομηνία θεωρείται δεδομένη από την επιλογή του χρήστη). Όλα τα πεδία, εκτός από τη λίστα ετικετών, είναι υποχρεωτικά. Στα υποχρεωτικά πεδία θα πρέπει να υπάρχουν κατάλληλοι έλεγχοι με χρήση JavaScript. Στο πεδίο «λίστα ετικετών», ο χρήστης θα μπορεί να καταχωρεί όσες ετικέτες επιθυμεί, χωρίζοντάς τις με κόμμα. Με την ολοκλήρωση της εισαγωγής, θα γίνεται επιστροφή στην αρχική σελίδα του ημερολογίου. Ερώτηση 3 Τροποποίηση/ διαγραφή υπενθυμίσεων Στη λίστα στην οποία εμφανίζονται οι υπενθυμίσεις για μία επιλεγμένη ημερομηνία, θα πρέπει να υπάρχουν επιλογές για την τροποποίηση και τη διαγραφή της κάθε υπενθύμισης. Ο χρήστης θα μπορεί να τροποποιήσει κάθε πεδίο της υπενθύμισης. Κατά τη διαγραφή μιας υπενθύμισης ή την αφαίρεση ετικετών μέσω της τροποποίησης, θα πρέπει να διαγράφονται από τη βάση δεδομένων οι σχετικές ετικέτες, εκτός και αν επισημαίνουν και άλλες υπενθυμίσεις στο σύστημα. Πριν τη διαγραφή μιας υπενθύμισης, να εμφανίζεται μήνυμα επιβεβαίωσης διαγραφής με χρήση JavaScript. Ερώτηση 4 Αναζήτηση υπενθυμίσεων Στη κεντρική σελίδα της εφαρμογής θα πρέπει να υπάρχει φόρμα αναζήτησης υπενθυμίσεων με βάση τον τίτλο, την ετικέτα (ή τις ετικέτες) και την ημερομηνία/ώρα. Η αναζήτηση θα πρέπει να μπορεί να πραγματοποιηθεί με όλους τους δυνατούς συνδυασμούς των τριών κριτηρίων. 2

3 Παραδοτέα Τα παραδοτέα για την Ερώτηση 1 περιλαμβάνουν: ER διάγραμμα της βάσης SQL εντολές κατασκευής της βάσης Export της βάσης (π.χ. μέσω του phpmyadmin. Από την κεντρική σελίδα, διαλέγετε την επιλογή export εξαγωγή, στη συνέχεια επιλέγετε τη βάση σας, τσεκάρετε την επιλογή Save as file Αποστολή και πατάτε το κουμπί GO - Εκτέλεση). Τα παραδοτέα για τις υπόλοιπες Ερωτήσεις περιλαμβάνουν: τεχνική αναφορά όπου θα επεξηγείται ο κώδικας screenshots της εφαρμογής Επίσης, θα πρέπει να παραδοθεί ο πλήρης κώδικας της εφαρμογής (και ότι χρησιμοποιήσατε από τη 2 η Γραπτή Εργασία) σε zip ή rar αρχείο, με σχόλια μέσα στα αρχεία. Στόχος: Η κατανόηση και η πρακτική εφαρμογή των τεχνικών προγραμματισμού εφαρμογών παγκόσμιου ιστού με χρήση HTML, CSS, JavaScript, PHP, MySQL. Απαραίτητες γνώσεις: Για την καλύτερη κατανόηση των εννοιών και των προγραμματιστικών τεχνικών, είναι χρήσιμη η παρακολούθηση των παρουσιάσεων Webcast 1 έως 7 από το 2 ο CD του ΕΔΥ, η μελέτη του υπερκειμένου «UNIT23 - Book2 - HT1» και του ΕΔΥ με hypertext υλικό για «PHP/MySQL και πως χρησιμοποιούνται σε συνδυασμό με την HTML» από το 2 ο CD του ΕΔΥ, καθώς και η χρήση των σχετικών χρήσιμων δικτυακών τόπων από τη σελίδα της Θ.Ε. 3

4 Η Βάση Δεδομένων (Ερώτηση 1) Η βάση αποτελείται από τους εξής πίνακες: reminder tag reminder_tag ΑΠΑΝΤΗΣΕΙΣ ΑΣΚΗΣΗΣ 1 Το ER διάγραμμα της βάσης εμφανίζεται παρακάτω: Για την κατασκευή της Βάσης Δεδομένων, εκτελούμε τις παρακάτω SQL εντολές: create database calendar; use calendar; create table tag (id_tag int auto_increment NOT NULL, label varchar(20) NOT NULL, PRIMARY KEY (id_tag) ); create table reminder (id_rem int auto_increment NOT NULL, title varchar(50) NOT NULL, description varchar(255) NOT NULL, date DATE NOT NULL, time TIME NOT NULL, PRIMARY KEY (id_rem)); create table reminder_tag (id_r_t int auto_increment NOT NULL, id_rem int, id_tag int, PRIMARY KEY (id_r_t), FOREIGN KEY (id_tag) references tag (id_tag) ON UPDATE CASCADE ON DELETE CASCADE, FOREIGN KEY (id_rem) references reminder (id_rem) ON UPDATE CASCADE ON DELETE CASCADE); 4

5 Το περιβάλλον διεπαφής Η Εικόνα 1 δείχνει την κεντρική σελίδα της εφαρμογής. Για την ανάπτυξη της εφαρμογής χρησιμοποιήθηκαν PHP 5.2.0, ΜySQL και Apache 2. Η εφαρμογή δοκιμάστηκε και λειτουργεί σωστά σε όλους τους δημοφιλείς browsers (Firefox, Mozilla, Opera, Internet Explorer). Εικόνα 1. Κεντρική σελίδα εφαρμογής Εισαγωγή/ προβολή υπενθύμισης (Ερώτηση 2) Στην αρχική σελίδα του ημερολογίου εμφανίζεται ο πρώτος μήνας Ιανουάριος και αν σε κάποια ημερομηνία έχει καταχωρηθεί υπενθύμιση, η ημερομηνία αυτή είναι κοκκινισμένη. Αριστερά στο μενού ο χρήστης έχει τη δυνατότητα να επιλέξει το μήνα για τον οποίο θέλει να καταχωρήσει υπενθύμιση, ενώ πατώντας πάνω σε μια ημερομηνία του, εμφανίζονται οι ήδη καταχωρημένες υπενθυμίσεις αν υπάρχουν και η φόρμα εισαγωγής μιας υπενθύμισης. Όλα τα πεδία, εκτός της λίστας ετικετών, είναι υποχρεωτικά και οι έλεγχοι γίνονται με χρήση JavaScript. Ο χρήστης μπορεί να καταχωρήσει όσες ετικέτες θέλει, χωρίζοντάς τις με κόμμα. Μετά την εισαγωγή της υπενθύμισης, ο χρήστης επιστρέφει στο μήνα που έκανε την καταχώρηση. Στην Εικόνα 2 φαίνεται το drop down menu με τους μήνες επιλογής: Ιανουάριο, Φεβρουάριο, Μάρτιο. 5

6 Εικόνα 2. Επιλογή μήνα από drop down menu Παρακάτω φαίνεται ο κώδικας για τη δημιουργία του drop down menu με τους μήνες: TD class="p1"> Μήνας <select name="selmonth" onchange="document.location.href=this.options[this.selectedindex].value;"> <option value="" selected="selected">επιλέξτε μήνα</option> <option value="index.php?menu=1">ιανουάριος</option> <option value="index.php?menu=2">φεβρουάριος</option> <option value="index.php?menu=3">μάρτιος</option> </select> </TD> Έστω ότι επιλέγουμε τον Ιανουάριο, έχοντας ήδη καταχωρήσει κάποιες υπενθυμίσεις σε 3 διαφορετικές ημερομηνίες (γι αυτό είναι κοκκινισμένες). Για το χρωματισμό των ημερομηνιών κάνουμε έναν έλεγχο αν για το μήνα αυτό έχουμε καταχωρήσεις. Αν όντως υπάρχουν, ελέγχουμε σε ποια μέρα αντιστοιχούν και αλλάζουμε το χρώμα σε αυτή την ημερομηνία. Ο έλεγχος για τις υπάρχουσες υπενθυμίσεις γίνεται με τον εξής κώδικα: $reminder= "SELECT * FROM reminder"; // φέρε όλες τις υπενθυμίσεις από τον πίνακα reminder $result_reminder=@mysql_query($reminder) or die('error, query failed'); $num_result=mysql_num_rows($result_reminder); if ($num_result!=0){ //αν υπάρχουν υπενθυμίσεις for($i=0;$i<$num_result;$i++){ $date=mysql_result($result_reminder,$i,'date'); //φέρε τις ημερομηνίες των υπενθυμίσεων $date_m = explode("-", $date); // επειδή η ημερομηνία είναι της μορφής έτος-μήνας-μέρα στη βάση, τη σπάμε με τη χρήση της explode για να πάρουμε τη μέρα if ($date_m[1]==01){ $ar_d[$date_m[2]]=true; // θέτουμε μια μεταβλητή πίνακα με τη μέρα ότι είναι true. Αυτή τη μεταβλητή θα τη χρησιμοποιήσουμε για να τη συγκρίνουμε με την κάθε ημερομηνία και αν όντως είναι true τότε θα αλλάζει το χρώμα της ημερομηνίας. 6

7 Για το χρωματισμό της μέρας γίνεται ο εξής έλεγχος: <td id="01" class="<?php $c=(isset($ar_d['01'])?'p8':'p7');echo $c;?>"><a href="index.php?menu=5&month=1&day=1" style="text-decoration:none">1</td>// ελέγχουμε μέσα στην class του td που γίνεται η μορφοποίηση αν η ημερομηνία αυτή υπάρχει και στο προηγούμενο select που έχουμε κάνει, και αν όντως είναι true τότε από λευκό που είναι κάντο κόκκινο. td.p7{ font-family:"verdana"; font-size:14px; font-style:normal; background-color:rgb(255,255,255);//λευκό χρώμα text-align:center td.p8{ font-family:"verdana"; font-size:14px; font-style:normal; background-color:rgb(255,0,0); // κόκκινο χρώμα text-align:center Αν πατήσουμε πάνω σε μια ημερομηνία θα μας εμφανιστεί μια εικόνα σαν την Εικόνα 3, αν υπάρχει ήδη υπενθύμιση: Εικόνα 3. Φόρμα εισαγωγής υπενθύμισης 7

8 Ελέγχουμε με JavaScript τα υποχρεωτικά πεδία. Ο κώδικας: <script> function checkentryform() { //όνομα της συνάρτησης για τον έλεγχο στο onclick var cform = document.forms.insert; var errstr = ''; // Υπενθύμιση: Έλεγχος για να μην είναι κενό το πεδίο if ( cform.title.value==''){ errstr = errstr+'το πεδίο Υπενθύμιση δεν μπορεί να είναι κενό.\n'; //μήνυμα που εμφανίζεται cform.title.style.backgroundcolor="#ff6347"; // χρωματίζει το κελί ώστε να βλέπουμε ποιο πρέπει να συμπληρωθεί // Περιγραφή: Έλεγχος για να μην είναι κενό το πεδίο if ( cform.description.value==''){ errstr = errstr+'το πεδίο Περιγραφή δεν μπορεί να είναι κενό.\n'; cform.description.style.backgroundcolor="#ff6347"; // Ώρα: Έλεγχος για να μην είναι κενό το πεδίο if ( cform.time.value==''){ errstr = errstr+'το πεδίο Ώρα δεν μπορεί να είναι κενό.\n'; cform.time.style.backgroundcolor="#ff6347"; </script> if (errstr.length>0) alert(errstr); else cform.submit(); Στην Εικόνα 4 φαίνεται πώς λειτουργεί η JavaScript σε περίπτωση που δεν συμπληρωθούν τα υποχρεωτικά πεδία: Εικόνα 4. Έλεγχος για τη συμπλήρωση των υποχρεωτικών πεδίων 8

9 Η φόρμα εισαγωγής είναι η εξής, στον κώδικα του αρχείου insert_reminder.php: <form name="insert" method="post" action="index.php?menu=5"> <TABLE align="center" border="0"> <TR><TD class="p1">ημερομηνία </TD><TD class="p9"><?php echo $_GET['day']."-".$_GET['month']."- 2012";?></TD></TR> <TR><TD class="p1"> Υπενθύμιση </TD><TD><?php echo"<input type=text name='title' size='28' maxlength='100'>";?> </TD></TR> <TR><TD class="p1"> Περιγραφή </TD><TD><?php echo"<textarea rows=\"5\" cols=\"20\"' value='' name='description'></textarea>";?> </TD></TR> <TR><TD class="p1"> Ετικέτα </TD><TD><?php echo"<input type=text name='tag' size='28' maxlength='100'>";?></td></tr> <TR><TD class="p1"> Ώρα </TD><TD><?php echo"<input type='text' name='time' size='14' maxlength='100'>";?> </TD></TR> <TR><TD> </TD><TD><font size="1" color="red"><i> Η ώρα να είναι της μορφής: 14:25</i></font></TD></TR> <TR><TD> </TD><TD> <input type='hidden' name='date_m' value='<?php echo $_GET['month']?>'> </TD></TR> <TR><TD> </TD><TD> <input type='hidden' name='date_d' value='<?php echo $_GET['day']?>'> </TD></TR> <TR><TD colspan="2" align="middle"> <input onclick='checkentryform();' type='submit' value='εισαγωγή' name='insert' > </TD></TR> // στο onclick καλούμε την checkentryform που κάνει τους ελέγχους </TABLE> </form> Αν η καταχώρηση γίνει με επιτυχία, επιστρέφουμε στο μήνα που ήμασταν, όπως φαίνεται στο παρακάτω κομμάτι κώδικα: if ($query_r_t) //αν έχει γίνει η καταχώρηση σωστά echo '<script language="javascript">alert("η υπενθύμιση εισήχθη!"); //τύπωσε το μήνυμα επιτυχούς καταχώρηςης document.location="index.php?menu='.$_post['date_m'].'";</script>'; // και μετά πήγαινε στο αρχείο που βρίσκεται ο μήνας που ήμασταν Τέλος, δεξιά στην εφαρμογή εμφανίζονται όλες οι υπενθυμίσεις που έχουν καταχωρηθεί με χρονολογική σειρά (Εικόνα 2). Σε ένα «παραγωγικό» σύστημα, εδώ θα μπορούσε να μπει και ένας έλεγχος αν μία καταχώρηση είναι για ημερομηνία που έχει ήδη περάσει σε σχέση με την τρέχουσα, ώστε αυτή η καταχώρηση να μην εμφανίζεται. Ωστόσο, επειδή πλέον έχουν περάσει οι τρεις πρώτοι μήνες του 2012, δεν θα εμφανιζόταν καμία, οπότε ο έλεγχος αυτός δεν υπάρχει και 9

10 εμφανίζονται όλες οι υπενθυμίσεις. Αν ο χρήστης πατήσει πάνω σε μία από αυτές, του εμφανίζονται όλα της τα στοιχεία, ενώ του δίνεται και η δυνατότητα τροποποίησης και διαγραφής της υπενθύμισης όπως θα δούμε και στο επόμενο ερώτημα. Τροποποίηση/ διαγραφή υπενθυμίσεων (Ερώτηση 3) Ο χρήστης έχει τη δυνατότητα να αναζητήσει την υπενθύμιση που θέλει (Ερώτηση 4) ή να τη δει από δεξιά στην εφαρμογή ή να πατήσει πάνω στις κοκκινισμένες ημερομηνίες ώστε να τη βρει. Σε κάθε περίπτωση έχει τη δυνατότητα τροποποίησης και διαγραφής της υπενθύμισης αυτής. Έστω ότι επιλέγει να τροποποιήσει την υπενθύμιση «Πρωτοχρονιά» που βρίσκεται πρώτη δεξιά στις υπενθυμίσεις. Κάνει κλικ πάνω στη λέξη «Πρωτοχρονιά» και του εμφανίζεται η υπενθύμιση με τα στοιχεία της (Όνομα, Περιγραφή, Ημερομηνία, Ετικέτες, Ώρα) και οι δυνατότητες επεξεργασίας και διαγραφής. Αρχικά επιλέγουμε την τροποποίηση. Μας εμφανίζεται η ίδια φόρμα με αυτήν της καταχώρησης αλλά με συμπληρωμένα τα υπάρχοντα δεδομένα. Ο χρήστης έχει τη δυνατότητα να αλλάξει όποιο πεδίο θέλει. Αν η καταχώρηση γίνει επιτυχώς τότε εμφανίζεται μήνυμα επιτυχούς καταχώρησης. Αν δεν γίνει καμία αλλαγή, εμφανίζεται μήνυμα ότι δεν έγινε καμία αλλαγή, ενώ αν δεν γίνει σωστά θα εμφανιστεί μήνυμα λάθους. Τα αρχεία που χρησιμοποιούνται για την τροποποίηση είναι το edit.php και το edit_rem.php. Εικόνα 5. Εμφάνιση επιλεχθείσας υπενθύμισης 10

11 Εικόνα 6. Επεξεργασία Υπενθύμισης Αν ο χρήστης επιλέξει να διαγράψει μια υπενθύμιση, εμφανίζεται μήνυμα ότι όντως είναι σίγουρος ότι θέλει να διαγραφεί η υπενθύμιση και στη συνέχεια διαγράφεται η υπενθύμιση και οι ετικέτες που σχετίζονται με αυτήν. Εικόνα 7. Διαγραφή υπενθύμισης Το αρχείο που χρησιμοποιείται για τη διαγραφή της υπενθύμισης και των ετικετών που συνδέονται με αυτήν, είναι το delete.php. $select_query ="SELECT * FROM reminder WHERE id_rem='".$_get['p1']."'"; $result=@mysql_query($select_query) or die('error, query failed'); $num_result=mysql_num_rows($result); //Αν έχω τουλάχιστον 1 εγγραφή (δηλαδή βρήκα την υπενθύμιση) if($num_result>0) { //Διαγράφω την υπενθύμιση $del_rem_query= "DELETE FROM reminder WHERE id_rem='".$_get['p1']."'"; //ομοίως και για τις ετικέτες $del_rem=mysql_query($del_rem_query) or die('error,query failed'); 11

12 Αναζήτηση υπενθυμίσεων (Ερώτηση 4) Αριστερά στο μενού της εφαρμογής, υπάρχει η επιλογή «Αναζήτηση υπενθύμισης». Ο χρήστης πατώντας αυτήν την επιλογή, έχει τη δυνατότητα να αναζητήσει μια υπενθύμιση με διάφορους τρόπους, όπως με το όνομα της υπενθύμισης, είτε με τις ετικέτες που θέλει, είτε με την ημερομηνία, είτε με την ώρα. Αν την αναζητήσει με βάση τον τίτλο, αρκεί να γράψει κάτι στο text πεδίο, ενώ για όλα τα άλλα του εμφανίζεται drop down menu με τα ήδη καταχωρημένα δεδομένα και έτσι είναι σίγουρος ότι δεν μπορεί να βρει κάτι διαφορετικό. Η αναζήτηση μπορεί να γίνει είτε με ένα από αυτά τα στοιχεία είτε με συνδυασμό τους. Το αρχείο που χρησιμοποιείται για την αναζήτηση είναι το search.php. Στην Εικόνα 8 φαίνονται τα πεδία με βάση τα οποία μπορεί να πραγματοποιηθεί η αναζήτηση. Για να γίνει η αναζήτηση με βάση όλους τους δυνατούς συνδυασμούς των πεδίων, χτίζουμε ένα query όπως φαίνεται και στον κώδικα παρακάτω. Εικόνα 8. Αναζήτηση υπενθύμισης if (($_POST['title']=="") && ($_POST['label']=="-1") && ($_POST['date']=="-1") && ($_POST['time']=="-1")) { //αν όλα είναι κενά μην κάνεις τίποτα δεν υπάρχει καταχώρηση με κενά στοιχεία echo '<script language="javascript">alert("δεν υπάρχει τέτοια καταχώρηση!"); document.location="index.php?menu=4";</script>'; // elseif(($_post['title']!="") OR ($_POST['label']!="-1") OR($_POST['date']!="-1") OR($_POST['time']!="-1")) { // αν έστω ένα από τα πεδία είναι συμπληρωμένο $title = $_POST['title']; $label = $_POST['label']; $date = $_POST['date']; $time = $_POST['time']; $query = "select * from ( SELECT a.*, group_concat(label) as nlabel // στο query αυτό κάνουμε left join τους πίνακες ώστε να πάρουμε για κάθε υπενθύμιση όλες τις ετικέτες που αντιστοιχούν σε αυτή και τις ενώνουμε κάνοντας concatenate. 12

13 FROM reminder as a left join reminder_tag as b on a.id_rem=b.id_rem left join tag as c on b.id_tag=c.id_tag group by a.id_rem ) as tmp where "; // εδώ αρχίζουμε να χτίζουμε το query if($_post['title']!="") γράφουμε $query.= "title LIKE '%$title%' AND "; // αν το όνομα της υπενθύμισης μοιάζει με αυτό που if($_post['label']!="-1") $query.= "nlabel LIKE '%".trim($label)."%' AND "; //αν οι ετικέτες που βάζουμε μοιάζουν με κάποια υπάρχουσα, χρησιμοποιούμε την trim για να αφαιρέσουμε τα τυχόν κενά που υπάρχουν if($_post['date']!="-1") $query.= "date='$date' AND "; if($_post['time']!="-1") $query.= "time='$time' AND "; $query= substr("$query", 0, -4); // χρησιμοποιούμε την substr για να διώξουμε το τελευταίο AND από το query $result=@mysql_query($query) or die('error, query failed'); $i=-1; // φτιάχνουμε έναν μετρητή ώστε να προσθέτουμε τις ετικέτες και να εμφανίζονται όλες μαζί $new_title=""; if ($result) { while ($row { if ($row['title']!= $new_title) { $new_title=$row['title']; $i++; $A_apotelesma[$i]['title'] = $row['title']; $A_apotelesma[$i]['description'] = $row['description']; $A_apotelesma[$i]['label'] = $row['nlabel']; $A_apotelesma[$i]['date'] = $row['date']; $A_apotelesma[$i]['time'] = $row['time']; $A_apotelesma[$i]['id_rem'] = $row['id_rem']; else { $A_apotelesma[$i]['label'].= ", ".$row['label']; //βάζουμε και το κόμμα Αν π.χ. επιλέξω την ετικέτα «αργία», τότε μου επιστρέφονται όλες οι υπενθυμίσεις με αυτήν την ετικέτα και διαλέγω ποια θέλω, Εικόνα 9. 13

14 Εικόνα 9. Αποτέλεσμα αναζήτησης με βάση μια ετικέτα Εικόνα 10. Αναζήτηση με όλα τα κριτήρια Εικόνα 11. Αποτέλεσμα προηγούμενης αναζήτησης 14

15 Εικόνα 12. Αναζήτηση που δεν πληροί τα κριτήρια 15

16 Άσκηση 2 Εξοικείωση με το πρωτόκολλο HTTP Εισαγωγή Σκοπός της συγκεκριμένης εργασίας είναι η εξοικείωση με το πρωτόκολλο HTTP και η κατανόηση των πιο σημαντικών στοιχείων του. Για το λόγο αυτό, θα εκτελεστεί μία σειρά από ασκήσεις που σαν στόχο έχουν να δείξουν τι κρύβεται πίσω από το περιεχόμενο των ιστοσελίδων, καθώς και στην αλληλεπίδραση του χρήστη με δεδομένα του διαδικτύου. Ερώτηση 1 1) Ποιες είναι οι διαφορές των αιτημάτων GET και PUT του πρωτοκόλλου HTTP; 2) Αποτυπώστε σε δύο γραμμές ποιο είναι το αίτημα που αποστέλλεται στον εξυπηρετητή όταν προσπαθούμε να πλοηγηθούμε από το φυλλομετρητή στον παραπάνω σύνδεσμο. Ερώτηση 2 1) Προσπαθήστε να προσπελάσετε τη διεύθυνση με χρήση του πρωτοκόλλου HTTP μέσω του φυλλομετρητή σας και αναφέρετε το μήνυμα που σας επιστρέφεται. Προσπαθήστε να εξηγήσετε που οφείλεται και περιγράψτε τις αλλαγές που πρέπει να κάνετε στο σύνδεσμο που χρησιμοποιείτε, ώστε να γίνει η προσπέλαση της διεύθυνσης. 2) Ποια είναι η σχέση των πρωτοκόλλων HTTPS και SSL; Περιγράψτε σύντομα τη λειτουργία τους. Ερώτηση 3 1) Εξηγήστε με ποιον τρόπο μπορούμε να ορίσουμε παραμέτρους στο URI που χρησιμοποιούμε όταν στέλνουμε μία αίτηση του πρωτοκόλλου HTTP. 2) Στον ακόλουθο σύνδεσμο παρέχεται μία συνάρτηση η οποία υπολογίζει το άθροισμα δύο αριθμών x και y. Σύμφωνα με το ερώτημα 1, περιγράψτε το URI που πρέπει να καλέσουμε για να υπολογίσουμε το άθροισμα των αριθμών 10 και 20 εισάγοντας τα ορίσματα x και y στο σύνδεσμο. Εκτελέστε την παραπάνω διαδικασία στο φυλλομετρητή σας για να το επιβεβαιώσετε και προσθέστε το αντίστοιχο screenshot στην απάντησή σας. Ερώτηση 4 1) Αναφέρετε τι ακριβώς περιγράφουν οι ακόλουθες κλάσεις των παρακάτω status codes του πρωτοκόλλου HTTP: 1xx, 2xx, 3xx 4xx. 2) Περιγράψτε αναλυτικά τι σημαίνουν τα error codes 503 και ) Στην περίπτωση του error code 406 εξηγήστε ποιος οφείλεται για το σφάλμα, ο εξυπηρετητής ή ο πελάτης; 16

17 Στόχος: Βασικός στόχος της συγκεκριμένης άσκησης είναι η εξοικείωση με το πρωτόκολλο Internet HTTP και η κατανόηση των βασικών στοιχείων αλληλεπίδρασης του χρήστη με τις σελίδες του διαδικτύου (όσον αφορά τον τρόπο απόκρισης του εξυπηρετητή). Απαραίτητες γνώσεις: Κεφάλαιο 2 του Τόμου Β. Ερώτηση 1 ΑΠΑΝΤΗΣΕΙΣ ΑΣΚΗΣΗΣ 2 1) Η μέθοδος GET αναφέρεται στην ανάκτηση οποιασδήποτε πληροφορίας καθορίζεται από το URI του αιτήματος. Στην περίπτωση που το URI του αιτήματος αναφέρεται σε μία διεργασία που παράγει δεδομένα, αποσαφηνίζεται πως η χρήση της μεθόδου GET θα επιστρέψει τα παραγόμενα δεδομένα και όχι το πηγαίο κείμενο που περιγράφει τη συγκεκριμένη διεργασία. Αντίθετα, η μέθοδος PUT αιτείται την αποθήκευση της πληροφορίας που περιλαμβάνει στο URI του αιτήματος που αποστέλλεται. Εάν το URI του αιτήματος αναφέρεται σε υπάρχουσα πληροφορία, τότε η πληροφορία του αιτήματος PUT πρέπει να θεωρηθεί σαν τροποποιημένη έκδοση της υπάρχουσας. Σε αντίθετη περίπτωση, εφόσον η πληροφορία που φέρει το URI του αιτήματος είναι καλώς ορισμένη, η πληροφορία αυτή μπορεί να αποθηκευτεί ως νέα. 2) Σύμφωνα με τον ορισμό της αίτησης GET το αίτημα που αποστέλλεται στον εξυπηρετητή έχει την παρακάτω μορφή: GET /index.html HTTP/1.1 Host: Ερώτηση 2 1) Προσπαθώντας να προσπελάσουμε τη διεύθυνση με χρήση του πρωτοκόλλου HTTP, εισάγοντας σε οποιονδήποτε φυλλομετρητή το URI λαμβάνουμε το παρακάτω μήνυμα: Είναι προφανές, από το μήνυμα που επιστρέφεται, πως ο εξυπηρετητής δεν δέχεται αιτήματα του πρωτοκόλλου HTTP, καθώς έχει ρυθμιστεί να απαιτεί τη χρήση της ασφαλούς έκδοσης του HTTP, δηλαδή του πρωτοκόλλου HTTPS. Σύμφωνα με αυτό, για 17

18 να προσπελάσουμε την παραπάνω διεύθυνση, αρκεί να τροποποιήσουμε το URI ως που δηλώνει τη χρήση του πρωτοκόλλου HTTPS. Επιβεβαιώνοντας τα παραπάνω, με χρήση του HTTPS λαμβάνουμε το παρακάτω μήνυμα: 2) Η ανταλλαγή πληροφορίας με τη χρήση του πρωτοκόλλου HTTPS γίνεται με ασφαλή τρόπο, όπως άλλωστε υποδηλώνει και η πλήρης ονομασία του (Hypertext Transfer Protocol over Secure Socket Layer). Σκοπός του HTTPS είναι η ανταλλαγή πληροφορίας αποτρέποντας τη μη εξουσιοδοτημένη πρόσβαση. Το πρωτόκολλο HTTPS χρησιμοποιεί τη θύρα 443 αντί της θύρας 80 που χρησιμοποιεί το πρωτόκολλο HTTP για την επικοινωνία του με τα χαμηλότερα επίπεδα. Για να προσφέρει ασφάλεια, το HTTPS κρυπτογραφεί και αποκρυπτογραφεί την πληροφορία που ανταλλάσσεται μεταξύ του πελάτη και του εξυπηρετητή. Ουσιαστικά το HTTPS εισάγει τη χρήση του Secure Socket Layer (SSL) ως ένα νέο υποεπίπεδο ακριβώς μετά το επίπεδο εφαρμογής όπου δρα το HTTP, ώστε να προσφέρει προστασία από μη εξουσιοδοτημένους χρήστες. Το Secure Sockets Layer (SSL) είναι το πιο διαδεδομένο πρωτόκολλο ασφαλείας που χρησιμοποιείται σήμερα. Πρόκειται ουσιαστικά για ένα πρωτόκολλο που παρέχει ένα ασφαλές κανάλι μεταξύ των δύο υπολογιστών που συνδέονται μέσω του Internet ή ενός εσωτερικού δικτύου. Το SSL είναι ένα διαφανές πρωτόκολλο, το οποίο απαιτεί ελάχιστη αλληλεπίδραση από τον τελικό χρήστη κατά τη δημιουργία ενός ασφαλούς session. Για παράδειγμα, στην περίπτωση μιας μηχανής αναζήτησης, οι χρήστες ενημερώνονται για την παρουσία του SSL όταν το πρόγραμμα περιήγησης εμφανίζει ένα λουκέτο και μια πράσινη μπάρα. Ένα SSL πιστοποιητικό είναι ένα αρχείο που εγκαθίστανται στον server όπου φιλοξενείται η ιστοσελίδα. Αποτελείται από ένα δημόσιο κλειδί, που κρυπτογραφεί τα δεδομένα και από ένα ιδιωτικό κλειδί που τα αποκρυπτογραφεί. Όταν ο client, π.χ. ένας web browser, συνδέεται στον SSL secured server, δημιουργείται ένα μοναδικό session που χρησιμοποιεί τα δύο αυτά κλειδιά. Όλα τα δεδομένα που μεταφέρονται κατά τη διάρκεια αυτού του session προστατεύονται και δεν μπορούν να αποκρυπτογραφηθούν από κανέναν άλλον. Ερώτηση 3 1) Η δομή ενός τυπικού URI το οποίο είναι ικανό να περνά παραμέτρους είναι: Πιο συγκεκριμένα, το τμήμα query_string αποτελείται από μία σειρά από ζευγάρια πεδίου-τιμής της μορφής: 18

19 field 1 =value 1 &field 2 =value 2 &field 3 =value 3 2) Σύμφωνα με την απάντηση του Ερωτήματος 1, το URI που πρέπει να χρησιμοποιήσουμε για να μας επιστραφεί το άθροισμα δύο αριθμών (π.χ. 10 και 20) έχει την εξής δομή: Προς επιβεβαίωση αυτού, εισάγοντας το παραπάνω URI σε οποιονδήποτε φυλλομετρητή, μας επιστρέφεται το αποτέλεσμα της πρόσθεσης των αριθμών 10 και 20 όπως απεικονίζεται παρακάτω. Ερώτηση 4 1) Η κλάση 1xx των HTTP status codes υποδηλώνει μία προσωρινή απάντηση, η οποία αποτελείται μόνο από τη γραμμή κατάστασης και προαιρετικές επικεφαλίδες και τερματίζεται από μία κενή γραμμή. Για τη συγκεκριμένη κλάση status codes, δεν υπάρχουν απαιτούμενες επικεφαλίδες. Πρέπει να σημειώσουμε πως καθώς το HTTP/1.0 δεν όριζε κανένα 1xx status code, οι εξυπηρετητές δεν πρέπει να αποστέλλουν 1xx αποκρίσεις σε έναν HTTP/1.0 πελάτη, εκτός από ειδικές περιπτώσεις. Η κλάση 2xx δηλώνει πως το αίτημα του πελάτη έχει ληφθεί επιτυχώς, έχει γίνει κατανοητό και δεκτό. Η κλάση 3xx υποδηλώνει πως απαιτούνται περαιτέρω ενέργειες από την πλευρά του χρήστη ώστε να ολοκληρωθεί το αίτημά του. Η κλάση 4xx προορίζεται για περιπτώσεις στις οποίες ο πελάτης φαίνεται να παρουσιάζει σφάλμα. Εκτός από την περίπτωση απόκρισης σε ένα αίτημα HEAD, ο εξυπηρετητής πρέπει να περιλαμβάνει μία εξήγηση της κατάστασης λάθους, καθώς και εάν πρόκειται για προσωρινή ή μόνιμη κατάσταση. 2) Το error code 503 Service Unavailable, σημαίνει πως ο εξυπηρετητής αδυνατεί επί του παρόντος να χειριστεί το αίτημα λόγω προσωρινής υπερφόρτωσης ή συντήρησης του εξυπηρετητή. Αυτό σημαίνει πως πρόκειται για μία προσωρινή κατάσταση που αναμένεται να επιλυθεί μετά από κάποια καθυστέρηση. Το error code 406 Not Acceptable, σημαίνει πως η πληροφορία που ορίζει το αίτημα είναι ικανή να παράγει μόνο αποκρίσεις με περιεχόμενο μη αποδεκτό σύμφωνα με τις επικεφαλίδες του αιτήματος. Εκτός από την περίπτωση αιτήματος HEAD, η απόκριση θα πρέπει να περιλαμβάνει μία οντότητα που περιέχει μία λίστα των διαθέσιμων χαρακτηριστικών πληροφορίας και τοποθεσία(ες), από την οποία ο χρήστης μπορεί να επιλέξει την πιο κατάλληλη. 3) Προφανώς, σύμφωνα με την απάντηση του ερωτήματος 2, το error code 406 οφείλεται στον πελάτη ο οποίος απέστειλε ένα αίτημα με μη αποδεκτά χαρακτηριστικά. 19

20 Κριτήρια αξιολόγησης Άσκηση 1 (Σύνολο) 80 Ερώτηση 1 10 Ερώτηση 2 20 Ερώτηση 3 25 Ερώτηση 4 25 Άσκηση 2 (Σύνολο) 20 Ερώτηση 1 5 Ερώτηση 2 5 Ερώτηση 3 5 Ερώτηση 4 5 Σύνολο 100 Ο συνολικός βαθμός θα διαιρεθεί δια 10, ώστε να προκύψει ο τελικός βαθμός της εργασίας. 20