Τ.Ε.Ι. ΚΑΒΑΛΑΣ. Μπόιτσιου Γεωργία ΟΚΤΩΒΡΙΟΣ ΕΠΟΠΤΗΣ ΚΑΘΗΓΗΤΗΣ Βασίλειος Χατζής

Τ.Ε.Ι. ΚΑΒΑΛΑΣ ΣΧΟΛΗ ΔΙΟΙΚΗΣΗΣ ΚΑΙ ΟΙΚΟΝΟΜΙΑΣ ΤΜΗΜΑ ΔΙΑΧΕΙΡΙΣΗΣ ΠΛΗΡΟΦΟΡΙΩΝ Σχεδιασμός και Ανάπτυξη Διαδικτυακής Εφαρμογής Σχεδιασμού Γραφικών και Επεξεργασίας Εικόνων με χρήση του συστήματος διαχείρισης Βάσεων Δεδομένων MySQL και των γλωσσών προγραμματισμού HTML και PHP Μπόιτσιου Γεωργία ΟΚΤΩΒΡΙΟΣ 2007 ΕΠΟΠΤΗΣ ΚΑΘΗΓΗΤΗΣ Βασίλειος Χατζής Εκπονηθείσα πτυχιακή εργασία απαραίτητη για την κτήση του βασικού πτυχίου

Πρόλογος Η εργασία αυτή με τίτλο Σχεδιασμός και Ανάπτυξη Διαδικτυακής Εφαρμογής Σχεδιασμού Γραφικών και Επεξεργασίας Εικόνων με χρήση του συστήματος διαχείρισης Βάσεων Δεδομένων MySQL και των γλωσσών προγραμματισμού HTML και PHP, αναπτύχθηκε στα πλαίσια της πτυχιακής εργασίας, απαραίτητη για τη χρήση πτυχίου. Η εργασία αυτή είναι χωρισμένη σε δύο μέρη. Το ένα μέρος πραγματεύεται την ανάπτυξη μιας εφαρμογής σε προγραμματιστικό περιβάλλον και το δεύτερο μέρος ασχολείται με τη συγγραφή ενός εγχειριδίου που αναλύει τα εργαλεία που χρησιμοποιήθηκαν, αλλά και την ανάπτυξη της εφαρμογής του πρώτου μέρους. Σχετικά με το πρώτο μέρος της εφαρμογής, αναπτύχθηκε τρία user interfaces με τη χρήση των γλωσσών προγραμματισμού PHP και HTML, το οποίο έχει τη δυνατότητα να επικοινωνεί με μια Βάση Δεδομένων. Το user interfaces συμπληρώνονται από τον χρήστη και επικοινωνούν με το πρόγραμμα που σχεδιάζει και εμφανίζει τα γραφήματα τα οποία αναπτύχθηκαν με την γλώσσα προγραμματισμού PHP. Στο δεύτερο μέρος, εισαγάγουμε τον αναγνώστη στην εργασία αναλύοντας το στόχο. Γίνεται επίσης μια σύντομη περιγραφή της εφαρμογής που αναπτύχθηκε. Αναλύονται τα εργαλεία που χρησιμοποιήσαμε και γίνεται μία αναφορά στις συναρτήσεις της PHP που χρησιμοποιήθηκαν για την ανάπτυξη της εφαρμογής. Έπειτα ενημερώνεται ο αναγνώστης για το πώς θα μπορέσει να χρησιμοποιήσει την εφαρμογή και παρακάτω αναλύεται η ανάπτυξη της εφαρμογής αυτής. Τέλος αναφέρονται οι μελλοντικές επεκτάσεις και τα συμπεράσματα.

Περιεχόμενα Περιεχόμενα 1 Κεφάλαιο 1 Εισαγωγή 3 1.1. Σκοπός της Πτυχιακής εργασίας 3 1.2. Σύντομη περιγραφή 3 Κεφάλαιο 2 PHP, MySQL & Apache 6 2.1. Η γλώσσα προγραμματισμού PHP 6 2.1.1. Γενικά 6 2.1.2. Ιστορικά στοιχεία 6 2.1.3. Τι μπορεί να κάνει; 8 2.2. MySQL 9 2.2.1. Γιατί MySQL 9 2.3. Αλληλεπίδραση PHP και MySQL 11 2.4. Apache HTTP Server 12 2.4.1. Ιστορική Αναδρομή 13 2.5. Συνεργασία PHP, MySQL και Apache Web Server 14 2.6. Εγκατάσταση της EasyPHP 14 Κεφάλαιο 3 Δημιουργία εικόνων με PHP 20 3.1. Εισαγωγή 20 3.2. Απαραίτητες προσαρμογές στην PHP 20 3.2.1. PHP 21 3.2.2. EasyPHP 21 3.3. Οι συναρτήσεις που χρησιμοποιήθηκαν για την ανάπτυξη της εφαρμογής 22 Σελίδα 1 από 60

3.3.1. imagepng ( ) 22 3.3.2. imagecreate ( ) 23 3.3.3. imagecolorallocate ( ) 23 3.3.4. imagefilledrectangle ( ) 24 3.3.5. imagerectangle ( ) 24 3.3.6. imageline ( ) 25 3.3.7. imagestring ( ) 25 3.3.8. imagestringup ( ) 25 3.3.9. imagefilledarc ( ) 26 Κεφάλαιο 4 Ανάπτυξη εφαρμογής 28 4.1. Εισαγωγή 28 4.2. Ανάπτυξη αρχικής σελίδας 28 4.3. Ανάπτυξη Βάσης Δεδομένων 36 Κεφάλαιο 5 Ανάλυση του προγράμματος ανάπτυξης της εφαρμογής 44 5.1. Εισαγωγή 44 5.2. Ραβδόγραμμα (Bar Chart) 45 5.3. Συγκριτικό ραβδόγραμμα (Bar Chart Compare) 50 5.4. Κυκλικό Διάγραμμα (Pie Chart) 53 Κεφάλαιο 6 Συμπεράσματα και μελλοντικές επεκτάσεις 58 6.1. Μελλοντικές επεκτάσεις 58 6.2. Συμπεράσματα 58 Βιβλιογραφία 60 Σελίδα 2 από 60

Κεφάλαιο 1 Εισαγωγή 1.1. Σκοπός της πτυχιακής εργασίας Ο σκοπός της πτυχιακής εργασίας είναι η γραφική αναπαράσταση δεδομένων που θα εισάγει ο χρήστης από το user interface. Απώτερος σκοπός είναι η δημιουργία μιας μεγάλης βάσης δεδομένων η οποία θα μπορέσει να προσαρμοστεί στην εφαρμογή έτσι ώστε με κάθε νέα μεταβολή στη Βάση Δεδομένων να ενημερώνεται η εικόνα και να επέρχεται και στα δεδομένα της εικόνας, αυτόματη μεταβολή. 1.2. Σύντομη Περιγραφή Η νέα αυτή εφαρμογή εντάσσεται σε ένα γενικότερο πλαίσιο δημιουργίας διαδικτυακών εφαρμογών με στόχο την δυναμική ενημέρωση γραφημάτων. Η εργασία πραγματοποιήθηκε με χρήση της γλώσσας προγραμματισμού για διαδικτυακές εφαρμογές PHP. Η PHP είναι μια γλώσσα script της οποίας ο κώδικας ενσωματώνεται σε μια HTML σελίδα και εκτελείται κάθε φορά που επισκεπτόμαστε την συγκεκριμένη σελίδα. Η βάση δεδομένων δημιουργήθηκε με την MySQL. Οι δύο αυτές τεχνολογίες συνεργάστηκαν με το διαδικτυακό διακομιστή (web server) Apache Server. Η εφαρμογή που αναπτύχθηκε δημιουργεί εικόνες οι οποίες μπορούν και αλλάζουν δυναμικά. Πιο συγκεκριμένα η εφαρμογή αυτή δημιουργεί ραβδογράμματα και πίτες σε μορφή εικόνας. Δημιουργήθηκαν τρία user interfaces, ένα για το ραβδόγραμμα, ένα για το συγκριτικό ραβδόγραμμα και ένα για την πίτα. Θα πρέπει να αναφέρουμε εδώ ότι η εφαρμογή που αναπτύχθηκε, Σελίδα 3 από 60

Κεφάλαιο 1ο : Εισαγωγή δουλεύει μόνο με λατινικούς χαρακτήρες, επομένως η γλώσσα επικοινωνίας που επιλέχθηκε είναι η αγγλική. Για την ανάπτυξη λοιπόν των user interfaces, έγινε ένας συνδυασμός HTML και PHP κώδικα. Αυτός ο συνδυασμός αποδείχθηκε χρήσιμος, διότι για κάθε εισαγωγή στοιχείων από τον χρήστη μέχρι την δημιουργία της εικόνας, θέλουμε να εμφανίζεται συνεχώς η ίδια φόρμα. Δηλαδή αναπτύχθηκε μια HTML φόρμα η οποία συμπεριλαμβάνει PHP κώδικα και καλεί τον εαυτό της. Το user interface για τη δημιουργία του ραβδογράμματος συμπεριλαμβάνει μία λίστα όπου δίνονται οι τιμές. Ο χρήστης έχει τη δυνατότητα να αλλάξει μία τιμή από τη λίστα ή και να τη διαγράψει. Έχει τη δυνατότητα επίσης να δώσει τίτλο στο ραβδόγραμμα αλλά και στους άξονες Χ και Υ. Επίσης έχει τη δυνατότητα να δώσει χρώμα στις ράβδους αλλά και στο φόντο του ραβδογράμματος. Το user interface του συγκριτικού ραβδογράμματος είναι παρόμοιο με αυτό που αναφέρθηκε παραπάνω για το απλό ραβδόγραμμα, μόνο που υπάρχουν δύο λίστες. Μία, όπου εισάγονται τιμές για το πρώτο στοιχείο και μια για να εισάγονται τιμές για το δεύτερο στοιχείο που θα συγκριθεί με το πρώτο. Επίσης υπάρχει η δυνατότητα, ο χρήστης να δώσει όνομα για τα δύο διαφορετικά αυτά στοιχεία κ έτσι να δημιουργηθεί ένα υπόμνημα. Και εδώ υπάρχει η δυνατότητα να δώσουμε χρώμα στις ράβδους αλλά και στο φόντο του συγκριτικού ραβδογράμματος. Επίσης μπορούμε να δώσουμε τίτλο στο ραβδόγραμμα και στους άξονες Χ και Υ. Το user interface της πίτας αποτελείται και αυτό από δύο λίστες. Στη μία λίστα εισάγονται οι τιμές και στην άλλη ο χαρακτηρισμός κάθε τιμής έτσι ώστε να μπορέσει να δημιουργηθεί ένα υπόμνημα. Και εδώ υπάρχει η δυνατότητα να δοθεί όνομα στο γράφημα και χρώμα στο φόντο. Σελίδα 4 από 60

Πτυχιακή εργασία της Μπόιτσιου Γεωργίας Στατιστική Συνάρτηση Το κυκλικό διάγραμμα (pie chart) χρησιμοποιείται για τη γραφική παράσταση τόσο των ποιοτικών όσο και των ποσοτικών δεδομένων, όταν οι διαφορετικές τιμές της μεταβλητής είναι σχετικά λίγες. Το κυκλικό διάγραμμα είναι ένας κυκλικός δίσκος χωρισμένος σε κυκλικούς τομείς, τα εμβαδά ή, ισοδύναμα, τα τόξα των οποίων είναι ανάλογα προς τις αντίστοιχες συχνότητες v i των τιμών x i της μεταβλητής. Αν συμβολίσουμε με a i το αντίστοιχο τόξο ενός κυκλικού τμήματος στο κυκλικό διάγραμμα, τότε: a i = v i * (360 ο / ν) Αυτή λοιπόν η συνάρτηση χρησιμοποιήθηκε για τη δημιουργία της πίτας μας (Αδαμόπουλος κ.λ.π,1999,70). Η εφαρμογή είναι εύκολη στη χρήση και δεν προϋποθέτει καμία άλλη γνώση παρά την απλή χρήση του διαδικτύου.h διαπροσωπεία (interface) αλλά και η βάση δεδομένων υλοποιήθηκαν στα Αγγλικά. Όσον αφορά το περιβάλλον της εφαρμογής, σχεδιάστηκε με γνώμονα την απλότητα και τη λειτουργικότητα. Κρίθηκε σκόπιμο να αποφευχθεί η υπερβολική χρήση χρωμάτων έτσι ώστε να διατηρηθεί ένας σοβαρός ακαδημαϊκός χαρακτήρας. Η εσωτερική της όμως δομή, αναπτύχθηκε με υψηλά κριτήρια απόδοσης και ταχύτητας. Ο κώδικας είναι λειτουργικός λόγω της χρήσης συναρτήσεων και έτσι καθιστά την εφαρμογή εύκολη στη συντήρησή της. δυναμικά. Το πλέον ουσιαστικό πλεονέκτημα της εφαρμογής είναι ότι λειτουργεί Σελίδα 5 από 60

Κεφάλαιο 2 Php MySQL & Apache 2.1. Η γλώσσα προγραμματισμού PHP 2.1.1. Γενικά Η PHP είναι μια ευρέως χρησιμοποιούμενη γλώσσα προγραμματισμού γενικού σκοπού, κατάλληλη για διαδικτυακές εφαρμογές και για την ανάπτυξη του Ιστού, η οποία μπορεί εύκολα να ενσωματωθεί σε HTML κώδικα. Πρόκειται για μια γλώσσα προγραμματισμού ανοικτού κώδικα (open source) που μπορεί κανείς εύκολα να την κατεβάσει ελεύθερα από το διαδύκτιο. Η PHP είναι μια scripting γλώσσα προγραμματισμού η οποία έχει σχεδιαστεί για το World Wide Web. Η λέξη PHP είναι αρχικά και σημαίνουν PHP Hyper Preprocessor. Ο κώδικας της PHP ενσωματώνεται σε μια HTML σελίδα. Ο κώδικας αυτός αφού διερμηνευτεί (interpreting) από τον web server, θα δημιουργήσει HTML κώδικα ή οτιδήποτε άλλο είδος εξόδου (π.χ. μια εικόνα). 2.1.2. Ιστορικά στοιχεία Η PHP (PHP: Hypertext Preprocessor) δημιουργήθηκε το 1995 και έχει παρουσιάσει αλματώδη εξέλιξη, κυρίως τα τελευταία χρόνια. Τείνει πλέον να γίνει μια από τις πιο συχνά χρησιμοποιούμενες γλώσσες σε εφαρμογές που αφορούν το παγκόσμιο Ιστό (Ullman, 2005, 12). Στη συνέχεια, παρατίθενται μια περιγραφή των διαφόρων εκδόσεων της γλώσσας, από τη δημιουργία της μέχρι και σήμερα. PHP/FI[11] Δημιουργήθηκε από τον Rasmus Lerdorf το 1995, αρχικά ως ένα απλό σύνολο προγραμμάτων της γλώσσας Perl που το ονόμασε Personal Home Page Σελίδα 6 από 60

Πτυχιακή εργασία της Μπόιτσιου Γεωργίας Tools. Σκοπός του ήταν η online πρόσβαση στα αρχεία του. Στη συνέχεια όμως, επειδή απαιτήθηκε μεγαλύτερη λειτουργικότητα, δημιούργησε μια πολύ μεγαλύτερη εφαρμογή σε γλώσσα C, η οποία προσέφερε τη δυνατότητα επικοινωνίας με βάσεις δεδομένων και επέτρεπε στους χρήστες να αναπτύξουν τις δικές τους απλές δυναμικές διαδικτυακές εφαρμογές. Αποφάσισε στη συνέχεια να δημοσιεύσει τον κώδικα έτσι ώστε να μπορεί ο καθένας να τον χρησιμοποιεί. Το 1997, η PHP/FI 2.0, υιοθετήθηκε από δεκάδες χιλιάδες χρηστών σε όλο τον κόσμο. Περίπου 50.000 διαδικτυακές περιοχές (domains) δήλωσαν ότι την εγκατέστησαν, που υπολογίζεται στο 1% των συνολικών περιοχών στο Internet. PHP3[11] Η PHP3 ήταν η πρώτη έκδοση που μοιάζει αρκετά με την PHP όπως την ξέρουμε σήμερα. Δημιουργήθηκε από τον Andi Gutmans και τον Zeev Suraski το 1997, σαν μια επέκταση της PHP/ FI, αφού ανακάλυψαν πως η έκδοση αυτή αδυνατούσε να αναπτύξει μια ecommerce εφαρμογή που προσπαθούσαν να ολοκληρώσουν στα πλαίσια ενός Πανεπιστημιακού project. Προσπαθώντας να συνεργαστούν και να αρχίσουν να δουλεύουν πάνω στον ήδη υπάρχοντα κώδικα της PHP/ FI, ο Andi, ο Rasmus και ο Zeev αποφάσισαν να αναγγείλουν την PHP 3.0 ως επίσημο διάδοχο της PHP/ FI 2.0 και σχεδόν σταμάτησαν την ανάπτυξη της PHP/ FI 2.0. Μέχρι το τέλος του 1998, δεκάδες χιλιάδες χρήστες είχαν εγκαταστήσει την PHP στα PC τους, ενώ χιλιάδες ιστοσελίδες δημιουργήθηκαν με χρήση αυτής της γλώσσας. PHP 4 [1,11] Σελίδα 7 από 60

Κεφάλαιο 2ο : PHP, MySQL & Apache Server Το χειμώνα του 1998, αμέσως μόλις η PHP 3.0 παρουσιάστηκε επίσημα, ο Andi Gutmans και ο Zeev Suraski άρχισαν να επεξεργάζονται τον πυρήνα της PHP, στοχεύοντας σε επιπλέον βελτιώσεις της γλώσσας. Σκοπός τους ήταν η βελτίωση της απόδοσης των σύνθετων εφαρμογών τις οποίες η PHP 3.0 δεν μπορούσε να υποστηρίξει ικανοποιητικά. Έτσι δημιουργήθηκε μια ιδιαίτερα βελτιωμένη έκδοση, η PHP 4.0. PHP 5 [11] Πρόκειται για την πιο πρόσφατη έκδοση της γλώσσας. Παρουσιάστηκε τον Ιούλιο του 2004 μετά από μακροχρόνια ανάπτυξη και διάφορες προδημοσιεύσεις. Προστίθενται δεκάδες νέα χαρακτηριστικά γνωρίσματα. Για παράδειγμα νέες συναρτήσεις εισάγονται, υιοθετούνται νέες λέξεις - κλειδιά και άλλα νέα χαρακτηριστικά που προσδίδουν περισσότερες δυνατότητες. 2.1.3. Τι μπορεί να κάνει; Η PHP χρησιμοποιείται συχνά για τη δημιουργία δυναμικών ιστοσελίδων. Δυναμική είναι μία ιστοσελίδα που αλληλεπιδρά με το χρήστη, έτσι ώστε ο κάθε χρήστης που την επισκέπτεται να βλέπει το περιεχόμενό της, που μπορεί να αλλάζει συνεχώς, δεν πρόκειται δηλαδή για μια στάσιμη ιστοσελίδα. Οι δυναμικές διαδικτυακές εφαρμογές παρουσιάζονται συνήθως σε σελίδες σχετικές με το ηλεκτρονικό εμπόριο, όπου το περιεχόμενο που επιδεικνύεται παράγεται από πληροφορίες που προσεγγίζονται σε μια βάση δεδομένων ή άλλη εξωτερική πηγή και που συνήθως εισάγονται από τους χρήστες της σελίδας. Έτσι, οι χρήστες μπορούν να εισάγουν δεδομένα της ιστοσελίδας αλλά και να βλέπουν τα δεδομένα που υπάρχουν εκεί. Με την PHP δεν είμαστε περιορισμένοι να εξάγουμε HTML. Οι δυνατότητες της PHP συμπεριλαμβάνουν την εξαγωγή εικόνων, αρχείων PDF, ακόμη και ταινιών Flash. Επιτρέπει την εξαγωγή οποιουδήποτε κειμένου όπως XHTML και οποιουδήποτε άλλου XML αρχείου. Η PHP μπορεί να δημιουργεί Σελίδα 8 από 60

Πτυχιακή εργασία της Μπόιτσιου Γεωργίας αυτόματα αυτά τα αρχεία και να τα αποθηκεύει στο σύστημα αρχείων, αντί να τα εκτυπώνει. Η PHP έχει επίσης υποστήριξη για επικοινωνία με άλλες υπηρεσίες χρησιμοποιώντας πρωτόκολλα όπως LDAP, IMAP, SNMP, NNTP, POP3, HTTP, COM (στα Windows) και αμέτρητα άλλα καθώς και συνδεσιμότητα με τη γλώσσα προγραμματισμού Java. Επίσης, υποστηρίζει ανταλλαγή WDDX δεδομένων μεταξύ ουσιαστικά όλων των γλωσσών προγραμματισμού διαδικτύου. Η PHP έχει εξαιρετικά χρήσιμα χαρακτηριστικά επεξεργασίας κειμένων, από την POSIX επέκταση ή τις PERL regular expressions μέχρι XML parsing αρχείων. 2.2. MySQL Η MySQL είναι ένα σύστημα διαχείρισης βάσεων δεδομένων ανοικτού κώδικα που χρησιμοποιεί την SQL, τη δημοφιλέστερη γλώσσα για την προσθήκη, την επεξεργασία και την πρόσβαση στα στοιχεία μιας βάσης δεδομένων. Επειδή πρόκειται για σύστημα ανοικτού κώδικα (open source), καθένας μπορεί να εγκαταστήσει τη MySQL στο δικό του εξυπηρετητή και να την προσαρμόσει στις δικές του ανάγκες. Η MySQL είναι γνωστή κυρίως για την ταχύτητα, την αξιοπιστία και την ευελιξία της (Kofler, 2005, 3-7). 2.2.1. Γιατί MySQL Η MySQL είναι πλέον η πιο δημοφιλής βάση δεδομένων ανοικτού κώδικα σε παγκόσμια κλίμακα λόγω: Της γρήγορης απόδοσης Της υψηλής αξιοπιστίας Σελίδα 9 από 60

Κεφάλαιο 2ο : PHP, MySQL & Apache Server χρήστες. Και της ευκολίας χρήσης της ακόμη και για μη πεπειραμένους Χρησιμοποιείται σε περισσότερες από 6 εκατομμύρια εγκαταστάσεις, από τις μεγάλες εταιρείες ως τις πιο εξειδικευμένες ενσωματωμένες εφαρμογές σε κάθε ήπειρο στο κόσμο. Έρευνες αναφέρουν ότι χρησιμοποιείται ακόμα και σε εφαρμογές στην Ανταρκτική. και των Τρέχει σε περισσότερες από είκοσι πλατφόρμες συμπεριλαμβανομένων Linux Windows OS/x HP-UP Netware Είναι ανοιχτού κώδικα (open source) και έχει ελεύθερα δικαιώματα χρήσης (free license). Μπορεί να την κατεβάσει ελεύθερα ο οποιοσδήποτε από την ιστοσελίδα της MySQL, www.mysql.com Είναι η βάση δεδομένων που επιλέγει μια καινούρια σειρά εφαρμογών οι οποίες στηρίζονται στο μοντέλο LAMP stack, που περιγράφεται ως εξής: Λειτουργικό σύστημα : Linux Web Server : Apache Σελίδα 10 από 60

Πτυχιακή εργασία της Μπόιτσιου Γεωργίας Σύστημα διαχείρισης βάσης δεδομένων : MySQL Γλώσσα προγραμματισμού : PHP ή Perl ή Python Δηλαδή η PHP, η MySQL και ο Apache αποτελούν μια ομάδα σε πολλές εφαρμογές. Μάλιστα αναφέρεται ότι στις περισσότερες web εφαρμογές που χρησιμοποιούν την PHP, το Σ.Δ.Β.Δ. είναι η MySQL και ο server είναι ο Apache. Έτσι, με τη βοήθεια της PHP μπορούμε να κατασκευάσουμε ένα σύστημα διαχείρισης αρχείων, με τη MySQL να αποθηκεύσουμε τα αρχεία αυτά σε μια βάση δεδομένων και στη συνέχεια, να επεξεργαστούμε τα αρχεία μέσω της ιστοσελίδας μας αποκτώντας πρόσβαση στη βάση του συστήματος (Valade, 2004, 10-14). 2.3. Αλληλεπίδραση PHP και MySQL Για πολλούς ανθρώπους, ο βασικός λόγος για την εκμάθηση μιας γλώσσας προγραμματισμού όπως η PHP είναι η αλληλεπίδραση που προσφέρει με πολλές βάσεις δεδομένων. Είναι πραγματικά εκπληκτικό πόσο χρήσιμη μπορεί να είναι μια βάση δεδομένων σε μια ιστοσελίδα. Υπάρχει μια τεράστια ποικιλία πραγμάτων που μπορεί να κάνει κάποιος με τη χρήση της PHP και της MySQL, από την επίδειξη απλών λιστών δεδομένων μέχρι το τρέξιμο ολόκληρης ιστοσελίδας από μια βάση δεδομένων. Κάποια παραδείγματα αλληλεπίδρασης PHP και MySQL είναι τα εξής: 1) δημιουργία δυναμικών ιστοσελίδων που στηρίζονται σε βάσεις δεδομένων: Χαρακτηριστικό παράδειγμα αποτελούν οι ιστοσελίδες που παίρνουν όλες τις πληροφορίες τους από μια βάση δεδομένων. Το μόνο που χρειάζεται είναι η χρήση των κατάλληλων συναρτήσεων της MySQL ώστε να επιτευχθεί η πρόσβαση στον server και μετά στη βάση δεδομένων για την κατάλληλη επεξεργασία των περιεχομένων της. Σελίδα 11 από 60

2) αλλαγή μορφής ιστοσελίδας: Κεφάλαιο 2ο : PHP, MySQL & Apache Server Εάν κάποιος θελήσει να αλλάξει τη μορφή της ιστοσελίδας του, είναι πολύ πιθανό πως θα σπαταλήσει έναν αρκετά πολύτιμο χρόνο για να αλλάξει όλες τις σελίδες του website του. Με την PHP και τη MySQL, όλο το website θα μπορούσε να ήταν σε ένα ή 2 script αρχεία. Αυτά θα αποκτούσαν πρόσβαση σε μια βάση δεδομένων MySQL για να πάρουν πληροφορίες για τις σελίδες. Για να ενημερωθεί η μορφή του website αρκεί να αλλαχτεί μία μόνο σελίδα. 3) Forums και mailing lists: Εκατοντάδες τέτοιοι πίνακες μηνυμάτων στο διαδύκτιο οργανώνονται χρησιμοποιώντας PHP και MySQL. Αυτοί προσφέρουν μια ευρεία ποικιλία επιλογών και είναι πολύ πιο επαρκείς από άλλα συστήματα που δημιουργούν μια σελίδα για κάθε μήνυμα. Όλες οι σελίδες στο Forum μπορούν να ενημερωθούν με την αλλαγή ενός και μόνο script. Επίσης πολλές mailing lists δημιουργούνται με τη χρήση της PHP, δίνοντας τη δυνατότητα στους χρήστες να διαχειρίζονται τα mail τους, να τα διαγράφουν, να στέλνουν νέα μηνύματα κ.ο.κ (Valade, 2004, 17-20). 2.4. Apache HTTP Server Το ερευνητικό πρόγραμμα Apache οργανώθηκε σε μία προσπάθεια για την επίλυση διάφορων προβλημάτων σχετικά με την ανάπτυξη ενός, δημόσιας χρήσης και αποδοχής (public domain) HTTP server για υπολογιστικά συστήματα που στηρίζονται στο λειτουργικό σύστημα UNIX. Η αρχική έκδοση του προγράμματος βασίστηκε στον κώδικα και τις ιδέες που συναντώνται οποιονδήποτε άλλο HTTP server για περιβάλλον Unix. Ο Apache αποτελεί σήμερα τον πιο δημοφιλή Web server. Καλύπτει έναν μεγάλο αριθμό μειονεκτημάτων που παρουσιάζονται στον NCSA httpd και, επιπλέον, έχει αποδειχτεί ταχύτερος και πιο αποτελεσματικός από μερικές εκδόσεις του προηγούμενου server. Σελίδα 12 από 60

Πτυχιακή εργασία της Μπόιτσιου Γεωργίας 2.4.1. Ιστορική Αναδρομή Το Φεβρουάριο του 1995, το δημοφιλέστερο server λογισμικό του Web ήταν το public domain HTTP daemon, που ανέπτυξε ο Rob McCool στο National Center for Supercomputing Applications, στο Πανεπιστήμιο του Illinoi. Παρόλα αυτά η ανάπτυξη αυτού του λογισμικού σταμάτησε λόγω του ότι ο McCool έφυγε από την NCSA στα μέσα του 1994. Τότε πολλοί χρήστες άλλαξαν αυτό το λογισμικό ανάλογα με τη χρήση του καθενός. Μια ομάδα απ αυτούς τους χρήστες μαζεύτηκαν για να συνεργαστούν και έτσι ιδρύθηκε το Apache Group. Αυτοί η ομάδα απαρτιζόταν από τους: Brian Bahlendorf Roy T. Fielding Rob Hartill David Robinson Cliff Skolnick Randy Terbush Robert S. Thau Andrew Wilson Τον Απρίλιο του 1995 διαφοροποίησαν το λογισμικό του NCSA httpd και δημιούργησαν την πρώτη έκδοση του Apache (0.6.2). αυτή η έκδοση ήταν μια μεγάλη επιτυχία άλλα δυστυχώς χρειαζόταν διορθώσεις. Οι επόμενοι μήνες Σελίδα 13 από 60

Κεφάλαιο 2ο : PHP, MySQL & Apache Server πέρασαν δημιουργώντας βελτιωμένες εκδόσεις, ενώ ο Robert Thau σχεδίασε μία καινούρια αρχιτεκτονική server. Τότε όλη η ομάδα υιοθέτησε αυτήν την αρχιτεκτονική και κατέληξαν στην έκδοση Apache 0.8.8. Μετά από πολλές δοκιμές, το Δεκέμβριο του 1995 εκδόθηκε ο Apache 1.0. Το 1999 ιδρύθηκε από μέλη του Apache Group το Apache Software Foundation, έτσι ώστε να μπορέσει να στεγάσει λογισμικά Ανοιχτού Κώδικά. Περισσότερες πληροφορίες για τον Apache server μπορεί να αναζητήσει κάποιος στη διεύθυνση: http://www.apache.com. 2.5. Συνεργασία PHP, MySQL και Apache Web Server Χρήστης URL αίτημα Server APACHE Κωδικοποιημένα αιτήματα PHP Ερώτηση Δεδομένα MySQL Σχήμα 1: Συνεργασία PHP, MySQL και Apache Web Server Το αίτημα του χρήστη πηγαίνει στον Apache Server και από εκεί στην PHP, η PHP ζητάει από την MySQL δεδομένα και αυτή επιστρέφει τα δεδομένα που της ζητήθηκαν. Η PHP επιστρέφει στον Apache Server τα αποτελέσματα και από εκεί καταλήγουν στο τελικό χρήστη (Ullman, 2005, 16-17). 2.6. Εγκατάσταση της EasyPHP Για τη ανάπτυξη της εφαρμογής χρησιμοποιήθηκε η EasyPHP. Η EasyPHP είναι μία εφαρμογή ελεύθερης χρήσης (Freeware), η οποία με αυτόματο τρόπο εγκαθιστά την PHP, τον Apache Web Server, την MySQL και το phpmyadmin ρυθμίζοντάς τα να δουλεύουν αρμονικά μεταξύ τους. Μετά την Σελίδα 14 από 60

Πτυχιακή εργασία της Μπόιτσιου Γεωργίας αρχική εγκατάσταση, ξεκινώντας την εφαρμογή EasyPHP, αυτή ξεκινάει τον Apache Server και την MySQL. Την EasyPHP μπορούμε να βρούμε στην ιστοσελίδα http://www.easyphp.org. Αφού κατεβάσουμε το exe αρχείο κάνοντας διπλό κλικ ξεκινάει η εγκατάσταση της EasyPHP. Το πρώτο παράθυρο που θα δούμε είναι το παρακάτω. Θα πρέπει να επιλέξουμε την γλώσσα επικοινωνίας για την εγκατάσταση. Δυστυχώς δεν υπάρχει η ελληνική γλώσσα. Επομένως θα επιλέξουμε τη γλώσσα που γνωρίζουμε καλύτερα εκτός από την ελληνική. Εικόνα 2.1 : το πρώτο βήμα του οδηγού εγκατάστασης. Επιλογή γλώσσας επικοινωνίας Το επόμενο παράθυρο μας καλωσορίζει και μας ενημερώνει ότι θα εγκατασταθεί η EasyPHP (έκδοση 2.0b1). Εικόνα 2.2 : το δεύτερο βήμα του οδηγού εγκατάστασης. Ενημέρωση εγκατάστασης του προγράμματος. Σελίδα 15 από 60

Κεφάλαιο 2ο : PHP, MySQL & Apache Server Το τρίτο παράθυρο μας ενημερώνει για τους όρους χρήσης. Εάν συμφωνούμε επιλέγουμε I accept the agreement και προχωράμε με το Next Εικόνα 2.3 : τρίτο βήμα του οδηγού εγκατάστασης. Όροι χρήσης Το τέταρτο παράθυρο μας δίνει διάφορες πληροφορίες για το τι θα εγκατασταθεί στον υπολογιστή μας. Εικόνα 2.4.:τέταρτο βήμα οδηγού εγκατάστασης. Πληροφορίες. Σελίδα 16 από 60

Πτυχιακή εργασία της Μπόιτσιου Γεωργίας Το πέμπτο παράθυρο μας δίνει τη δυνατότητα να επιλέξουμε πού ακριβώς θέλουμε να εγκαταστήσουμε το πρόγραμμα. Για να αλλάξουμε θέση, από την προεπιλεγμένη πατάμε Browse. Επίσης μας δίνετε η πληροφορία για το πόσος χώρος απαιτείται για την εγκατάσταση. Εικόνα 2.5.: πέμπτο βήμα οδηγού εγκατάστασης. Επιλογή προορισμού.. Το έκτο παράθυρο μας ρωτάει που επιθυμούμε να βρίσκετε το εικονίδιο για την έναρξη του προγράμματος μετά την εγκατάσταση. Εικόνα 2.6.:έκτο βήμα οδηγού εγκατάστασης. Επιλογή φακέλου στο Start Menu. Σελίδα 17 από 60

Κεφάλαιο 2ο : PHP, MySQL & Apache Server Το έβδομο παράθυρο μας πληροφορεί για το που θα εγκατασταθεί το πρόγραμμα και για το εικονίδιο έναρξης. Εάν όντως είναι αυτά που επιλέξαμε τότε συνεχίζουμε στην εγκατάσταση του προγράμματος πατώντας Install Εικόνα 2.7.: έβδομο βήμα οδηγού εγκατάστασης. Προετοιμασία εγκατάστασης. Το όγδοο παράθυρο μας δείχνει την εξέλιξη της εγκατάστασης. Μπορούμε να ακυρώσουμε την εγκατάσταση πατώντας Cancel (δε συνιστάται). Εικόνα 2.8.:όγδοο βήμα οδηγού εγκατάστασης. Εγκατάσταση. Σελίδα 18 από 60

Πτυχιακή εργασία της Μπόιτσιου Γεωργίας Το ένατο και τελευταίο παράθυρο μας ενημερώνει ότι η εγκατάσταση ολοκληρώθηκε και να πατήσουμε Finish. Εικόνα 2.9.:ένατο βήμα οδηγού εγκατάστασης. Ολοκλήρωση Εγκατάστασης. Σελίδα 19 από 60

Κεφάλαιο 3 Δημιουργία εικόνων με PHP 3.1. Εισαγωγή Η δημιουργία μιας εικόνας με την PHP δε μοιάζει με τη δημιουργία εικόνων μέσω ενός σχεδιαστικού προγράμματος. Δεν υπάρχει η διαδικασία ένδειξη και κλικ ούτε επιλογές, ούτε εργαλεία εφαρμογής χρώματος για να γεμίσει με χρώμα η εικόνα. Παρόμοια δεν υπάρχει κάποια εντολή Save As όπως στα σχεδιαστικά προγράμματα, η οποία να επιτρέπει να δημιουργείτε αυτόματα αρχεία εικόνων μορφής GIF, JPEG ή PNG (κ.ο.κ). Αντιθέτως αυτός που αναπτύσσει ένα script, θα πρέπει να γίνει ο ίδιος η σχεδιαστική εφαρμογή. Θα πρέπει να οριστεί κάθε βήμα που πρέπει να γίνει στο PHP script. Θα πρέπει να επιλεγούν ποιες από τις συναρτήσεις της PHP θα χρησιμοποιηθούν για το καθορισμό χρωμάτων, το σχεδιασμό και χρωματισμό σχημάτων, τον ορισμό και την αλλαγή του μεγέθους της εικόνας, και την αποθήκευση της εικόνας με μία συγκεκριμένη μορφή αρχείου (Meloni, 2004). 3.2. Απαραίτητες προσαρμογές στην PHP Η PHP δεν περιορίζεται μόνο στη δημιουργία ενός HTML output. Μπορεί επίσης να χρησιμοποιηθεί για τη δημιουργία και διαχείριση αρχείων εικόνας ποικίλων τύπων, όπως αναφέρθηκε και παραπάνω. Για να τρέχει λοιπόν η εφαρμογή μας, θα πρέπει να γίνει compile η PHP με τη βιβλιοθήκη GD. Πιο συγκεκριμένα η δική μας εφαρμογή χρειάστηκε τη βιβλιοθήκη gd2.dll, την οποία μπορούμε να βρούμε σε πολλά sites. Ένα από αυτό είναι και το http://www.libgd.org. Σελίδα 20 από 60

Πτυχιακή εργασία της Μπόιτσιου Γεωργίας 3.2.1. PHP Αφού καταφέρουμε και βρούμε την βιβλιοθήκη gd2.dll θα πρέπει να την βάλουμε στο φάκελο extensions που βρίσκετε μέσα στο φάκελο της PHP. Το επόμενο βήμα είναι να ψάξουμε και να βρούμε το αρχείο php.ini. Μέσα σ αυτό το αρχείο θα πρέπει να γίνουν κάποιες αλλαγές. Το ανοίγουμε με έναν κειμενογράφο. Θα πρέπει να ψάξουμε και να βρούμε τη σειρά εκείνη που γράφει extension_dir=. Μέσα στα εισαγωγικά πρέπει να γράψουμε την ακριβή διαδρομή που βρίσκετε η βιβλιοθήκη gd2.dll. (π.χ. : extension_dir= C:\PHP\extensions ). Επίσης θα πρέπει να ψάξουμε και να βρούμε τη σειρά εκείνη που γράφει: ;extension=php_gd2.dll Και θα πρέπει να σβήσουμε το ερωτηματικό από μπροστά: extension=php_gd2.dll Αφού γίνουν αυτές οι αλλαγές μπορούμε τώρα να δουλέψουμε με τις συναρτήσεις εικόνας. 3.2.2. EasyPHP Εάν το πρόγραμμα που θα χρησιμοποιήσουμε, όπως έγινε και σε αυτή την εφαρμογή, είναι η EasyPHP, τότε αυτό που έχουμε να κάνουμε είναι πολύ πιο απλό από παραπάνω. Κάτω δεξιά στην οθόνη, στο toolbar, υπάρχει το εικονίδιο της EasyPHP. Αυτό το εικονίδιο εκτός του ότι μας δείχνει την κατάσταση την Βάσης Δεδομένων και του Server, έχει και άλλες ιδιότητες. Πάνω στο εικονίδιο κάνουμε δεξί κλικ Configuration -> PHP extension. Ανοίγοντας το PHP extension θα δούμε ένα παράθυρο: Σελίδα 21 από 60

Κεφάλαιο 3 ο : Δημιουργία εικόνων με PHP Εικόνα 3.1.: επιλογή βιβλιοθήκης της PHP, στην EasyPHP. Θα πρέπει να βρούμε το php_gd2, και να το στεκάρουμε. Έτσι θα μπορέσουμε να χρησιμοποιήσουμε τις συναρτήσεις εικόνας. 3.3. Οι συναρτήσεις που χρησιμοποιήθηκαν για την ανάπτυξη της εφαρμογής. 3.3.1. imagepng ( ) Στέλνει μια PNG εικόνα είτε στον browser είτε σ ένα αρχείο. Περιγραφή int imagepng (resource image [,string filename]) Η συνάρτηση imagepng() στέλνει ένα GD image stream (image) σε PNG format στο standard output (συνήθως στον browser) ή, εάν ορίζεται το όνομα του αρχείου από την filename στέλνει την εικόνα σε αυτό. Παρόμοιες συναρτήσεις : Σελίδα 22 από 60

Πτυχιακή εργασία της Μπόιτσιου Γεωργίας imagegif() imagewbmp() imagejpeg() imagetypes() 3.3.2. imagecreate ( ) Δημιουργεί μια νέα pallet based εικόνα. Περιγραφή recourse imagecreate( int x_size, int y_size) Η συνάρτηση imagecreate() επιστρέφει έναν image identifier που αναπαριστά μία κενή εικόνα μεγέθους x_size και y_size. Παρόμοιες συναρτήσεις: imagecreatetruecolor 3.3.3. imagecolorallocate ( ) Διαθέτουμε ένα χρώμα για μια εικόνα Περιγραφή int imagecolorallocate ( resource image, int red, int green, int blue) Η imagecolorallocate () επιστρέφει έναν colour identifier, που αναπαριστά το συντιθέμενο, από τις δοθείσες RGB συνιστώσες, χρώμα. Η παράμετρος Σελίδα 23 από 60

Κεφάλαιο 3 ο : Δημιουργία εικόνων με PHP resource image είναι η επιστρεφόμενη τιμή της συνάρτηση imagecreate(). Οι παράμετροι red, green και blue είναι οι τιμές της κόκκινης, πράσινης και μπλε συνιστώσας του ζητούμενου χρώματος, αντίστοιχα. Παίρνουν ακέραιες τιμές από το 0 έως το 255. Η imagecolorallocate () πρέπει να κληθεί για να δημιουργήσει το κάθε χρώμα που πρόκειται να χρησιμοποιηθεί στην εικόνα image. 3.3.4. imagefilledrectangle ( ) Σχεδιάζει ένα γεμισμένο ορθογώνιο Περιγραφή int imagelilledrectangle ( resource image, int x1, int y1, int x2, int y2, int color) Η συνάρτηση imagelilledrectangle () δημιουργεί ένα γεμισμένο ορθογώνιο χρώματος color στην εικόνα image ξεκινώντας από τις πάνω αριστερά συντεταγμένες x1, y1 και τελειώνοντας στις κάτω αριστερά x2, y2. Το σημείο 0, 0 είναι η πάνω αριστερή γωνία της εικόνας. 3.3.5. imagerectangle ( ) Σχεδιάζει ένα ορθογώνιο Περιγραφή int imagerectangle ( resource image, int x1, int y1, int x2, int y2, int color) Η imagerectangle () δημιουργεί ένα τετράγωνο χρώματος color στην εικόνα image ξεκινώντας από το πάνω αριστερό σημείο x1, y1 και τελειώνοντας κάτω δεξιά στο σημείο x2, y2. Το σημείο 0, 0 είναι η πάνω αριστερή γωνία της εικόνας. Σελίδα 24 από 60

Πτυχιακή εργασία της Μπόιτσιου Γεωργίας 3.3.6. imageline ( ) Χαράζει μία γραμμή Περιγραφή int imageline ( resource image, int x1, int y1, int x2, int y2, int color ) Η συνάρτηση imageline () σχεδιάζει μία γραμμή από το σημείο x1, y1 έως το σημείο x2,y2. Το σημείο 0, 0 είναι η πάνω αριστερή γωνία της εικόνας. 3.3.7. imagestring ( ) Σχεδιάζει ένα string οριζοντίως. Περιγραφή int imagestring (resource image, int font, int x, int y, string s, int color) Η συνάρτηση imagestring () σχεδιάζει ένα string s στην εικόνα image στο σημείο x, y (πάνω αριστερά είναι το σημείο 0, 0) χρώματος color. Η παράμετρος font, παίρνει τις τιμές 1, 2, 3, 4 ή 5 και καθορίζει το μέγεθος της γραμματοσειράς. Εάν δεν δώσουμε τιμή, χρησιμοποιείται μια εσωτερική γραμματοσειρά. 3.3.8. imagestringup ( ) Σχεδιάζει ένα string καθέτως. int imagestringup (resource image, int font, int x, int y, string s, int color) Η συνάρτηση imagestringup () σχεδιάζει το string s καθέτως στην εικόνα image στο σημείο x, y (κάτω αριστερά είναι το σημείο 0, 0) με χρώμα color. Η Σελίδα 25 από 60

παράμετρος font, παίρνει τις τιμές 1, 2, 3, 4 ή 5 και καθορίζει το μέγεθος της γραμματοσειράς. Εάν δεν δώσουμε τιμή, χρησιμοποιείται μια εσωτερική γραμματοσειρά. 3.3.9. imagefilledarc ( ) Σχεδιάζει μια μερική έλλειψη int imagefilledarc (resource image, int cx, int cy, int w, int h, int s, int e, int color, int style) Η συνάρτηση imagelilledarc () σχεδιάζει μία μερική έλλειψη με κέντρο αυτής το σημείο cx, cy ( η πάνω αριστερή γωνία έχει συντεταγμένες 0, 0 ) στην εικόνα image. Οι παράμετροι w και h καθορίζουν το πλάτος και το ύψος της έλλειψης, αντίστοιχα, ενώ τα σημεία αρχής και τέλους προσδιορίζονται σε μοίρες s και e. Η παράμετρος style είναι ένα bitwise OR με τις ακόλουθες πιθανές τιμές: IMG_ARC_PIE IMG_ARC_CHORD IMG_ARC_NOFILL IMG_ARC_EDGE Οι σταθερές IMG_ARC_PIE και IMG_ARC_CHORD είναι αλληλο - αποκλειστικές. Η IMG_ARC_CHORD συνδέει τις γωνίες αρχής και τέλους με μία ευθεία γραμμή, ενώ η IMG_ARC_PIE παράγει μία στρογγυλεμένη πλευρά. Η σταθερά IMG_ARC_NOFILL δείχνει ότι το τόξο ή η χορδή θα έπρεπε να σκιαγραφηθεί, αλλά όχι να γεμισθεί. Η IMG_ARC_EDGE, χρησιμοποιούμενη με την IMG_ARC_NOFILL, δείχνει ότι οι γωνίες αρχή και τέλους θα έπρεπε να Σελίδα 26 από 60

Πτυχιακή εργασία της Μπόιτσιου Γεωργίας συνδέονται στο κέντρο. (περισσότερες πληροφορίες για τις συναρτήσεις της PHP μπορείτε να βρείτε στο site www.php.net. Σελίδα 27 από 60

Κεφάλαιο 4 Ανάπτυξη εφαρμογής 4.1. Εισαγωγή Όπως αναφέρθηκε και παραπάνω αναπτύχθηκε μία εφαρμογή με τη χρήση της PHP, της MySQL και του Apache Web Server, η οποία δημιουργεί εικόνες. Συγκεκριμένα δημιουργεί ένα ραβδόγραμμα (bar chart), ένα συγκριτικό ραβδόγραμμα (bar chart (compare)) και ένα κυκλικό διάγραμμα ή πίτα (pie chart). Για την δημιουργία των εικόνων χρησιμοποιήθηκε η βιβλιοθήκη της PHP, η gd2.dll, η οποία όμως, για να μπορέσει να δουλέψει πρέπει να γίνουν οι απαραίτητες προσαρμογές στην PHP, οι οποίες αναφέρθηκαν παραπάνω. Έτσι μπορούμε να χρησιμοποιήσουμε τις έτοιμες συναρτήσεις της PHP για τη δημιουργία των εικόνων. Θα πρέπει να τονιστεί σε αυτό το σημείο ότι η ελάχιστη γνώση γραφικών είναι απαραίτητη, διότι σε όλες αυτές τις συναρτήσεις πρέπει να δίνονται συντεταγμένες, για τη δημιουργία σχημάτων. 4.2. Ανάπτυξη αρχικής σελίδας Η αρχική σελίδα σχεδιάστηκε με γνώμονα την απλότητα και την λιτότητα. Είναι μία σελίδα η οποία είναι απλή στη χρήση και δεν κουράζει το χρήστη. Δε χρησιμοποιήθηκαν έντονα χρώματα αλλά ούτε και πολλά σχήματα και εικόνες που να μπερδεύουν το χρήστη. Το μειονέκτημα της εφαρμογής είναι ότι, η γλώσσα επικοινωνίας όπως αναφέρθηκε και παραπάνω είναι η αγγλική λόγω αδυναμίας της PHP να δεχθεί ελληνικούς χαρακτήρες. Επομένως αναπτύχθηκε μία σελίδα σε HTML η οποία έχει links για να εμφανίζονται τα user interfaces, έτσι ώστε ο χρήστης να μπορέσει να δώσει δεδομένα για να δημιουργήσει τα δικά του γραφήματα. Σελίδα 28 από 60

Πτυχιακή εργασία της Μπόιτσιου Γεωργίας Αρχικά λοιπόν αναπτύχθηκε ένα τμήμα κώδικα σε HTML έτσι ώστε να χωριστεί η σελίδα σε τρία τμήματα. Πρώτα χωρίστηκε η σελίδα σε δύο οριζόντια πλαίσια εκ των οποίων το πρώτο καταλαμβάνει το 20% της σελίδας και το δεύτερο το 80% της σελίδας. Στο πρώτο οριζόντιο μέρος υπάρχει το λογότυπο του τμήματος Διαχείρισης Πληροφοριών, ο τίτλος της σελίδας που αναπτύχθηκε και το λογότυπο του ΤΕΙ Καβάλας. Το δεύτερο οριζόντιο μέρος που είναι μεγαλύτερο χωρίστηκε σε δύο κάθετα τμήματα εκ των οποίων το πρώτο καταλαμβάνει το 20% και το δεύτερο το 80% του δεύτερου οριζόντιου μέρους. Στο πρώτο κάθετο μέρος, υπάρχει μια λίστα όπου ο χρήστης μπορεί να επιλέξει ανάμεσα στα τρία γραφήματα, αυτό που θέλει να δημιουργήσει και θα εμφανιστεί το user interface στο δεύτερο κάθετο τμήμα. Η αρχική μας σελίδα λοιπόν είναι κάπως έτσι: Ο τίτλος της σελίδας με τα λογότυπα του τμήματος Διαχείρισης Πληροφοριών και του ΤΕΙ Καβάλας. Η λίστα με τις επιλογές του χρήστη. Εικόνα 4.1.: Η αρχική σελίδα της εφαρμογής Ο χρήστης λοιπόν έχει μια λίστα για να επιλέξει πιο γράφημα θέλει να δημιουργήσει. Σελίδα 29 από 60

Κεφάλαιο 4ο : Ανάπτυξη Εφαρμογής Εμφάνιση ραβδογράμματος (bar chart) Εικόνα 4.2.: Η επιλογή του ραβδογράμματος από την αρχική σελίδα Εάν ο χρήστης θέλει να δημιουργήσει ένα ραβδόγραμμα τότε θα πρέπει να επιλέξει το link Bar Chart. Στο διπλανό παράθυρο θα εμφανιστεί το user interface, όπου ο χρήστης μπορεί να εισάγει δεδομένα για τη δημιουργία του ραβδογράμματος. Σελίδα 30 από 60

Πτυχιακή εργασία της Μπόιτσιου Γεωργίας Εικόνα 4.3.: Το user interface του ραβδογράμματος. Ο χρήστης μπορεί να δώσει διάφορες τιμές πατώντας το κουμπί Add data. Επίσης έχει την δυνατότητα να αλλάξει ή να διαγράψει μία τιμή με το κουμπί Change data ή Delete data αντίστοιχα. Μπορεί να δώσει τίτλους στου άξονες x και y και στο γράφημα και έχει τη δυνατότητα να δώσει χρώμα στις ράβδους και στο φόντο του γραφήματος. Εικόνα 4.4.: Η μεγέθυνση του user interface του ραβδογράμματος, συμπληρωμένο με υποθετικά στοιχεία. Σελίδα 31 από 60

Κεφάλαιο 4ο : Ανάπτυξη Εφαρμογής γράφημα : Πατώντας το κουμπί Create Graph, τότε θα εμφανιστεί το παρακάτω Εικόνα 4.5.: Το γράφημα που εξάγεται από το υποθετικά δεδομένα της εικόνας 4.4. Εμφάνιση συγκριτικού ραβδογράμματος (Bar Chart Compare) Εικόνα 4.6.: Η επιλογή του συγκριτικού ραβδογράμματος από την αρχική σελίδα. Σελίδα 32 από 60

Πτυχιακή εργασία της Μπόιτσιου Γεωργίας Εάν ο χρήστης θέλει να δημιουργήσει ένα συγκριτικό ραβδόγραμμα τότε θα επιλέξει το link Bar Chart (Compare). Έτσι θα εμφανιστεί το ανάλογο user interface: Εικόνα 4.7.: Το user interface του συγκριτικού ραβδογράμματος. Δίνοντας υποθετικά τις παρακάτω τιμές: Εικόνα 4.8.: Μεγέθυνση του user interface συμπληρωμένο με υποθετικά δεδομένα Σελίδα 33 από 60

Κεφάλαιο 4ο : Ανάπτυξη Εφαρμογής Kαι εδώ ο χρήστης έχει τη δυνατότητα να δώσει χρώματα και τίτλους και πατώντας το κουμπί Create Graph, τότε θα εμφανιστεί το παρακάτω γράφημα: Εικόνα 4.9.: Το γράφημα που εξάγεται από το υποθετικά δεδομένα της εικόνας 4.8. Εμφάνιση κυκλικού διαγράμματος (Pie Chart) Εικόνα 4.10.: Η επιλογή του κυκλικού ραβδογράμματος από την αρχική σελίδα. Σελίδα 34 από 60

Πτυχιακή εργασία της Μπόιτσιου Γεωργίας Ακόμη μία επιλογή του χρήστη είναι αυτή του κυκλικού διαγράμματος. Για την εμφάνιση λοιπόν του κυκλικού διαγράμματος θα πρέπει ο χρήστης να επιλέξει το link Pie Chart, και θα εμφανιστεί το παρακάτω παράθυρο. 4.11.: Το user interface του κυκλικού διαγράμματος. Δίνοντας κάποιες υποθετικές τιμές, όπως : Εικόνα 4.12.: Μεγέθυνση του user interface του κυκλικού διαγράμματος συμπληρωμένο με υποθετικά δεδομένα. Σελίδα 35 από 60

Κεφάλαιο 4ο : Ανάπτυξη Εφαρμογής Και εδώ, μπορεί ο χρήστης να αλλάξει ή να διαγράψει κάποιες τιμές στις λίστες και να δώσει τίτλο στο γράφημα και χρώμα στο φόντο του γραφήματος. Έτσι πατώντας το κουμπί Create Graph θα εμφανιστεί το παρακάτω γράφημα. Εικόνα 4.13.: Το γράφημα που εξάγεται από το υποθετικά δεδομένα της εικόνας 4.12. 4.3. Ανάπτυξη Βάσης Δεδομένων Παρατηρώντας σε καθένα από τα user interfaces των τριών διαφορετικών γραφημάτων εκτός από το κουμπί Create Graph που δημιουργεί το γράφημα, υπάρχει και το κουμπί Read Db Data. Πατώντας αυτό το κουμπί η λίστα του ραβδογράμματος ή οι λίστες του συγκριτικού ραβδογράμματος και του κυκλικού διαγράμματος γεμίζουν αυτόματα από την Βάση Δεδομένων. Η εφαρμογή σαν κύριο στόχο έχει την ανάπτυξη γραφημάτων σε μορφή εικόνων, χρησιμοποιώντας τις συναρτήσεις της PHP. Αναπτύχθηκε μία βάση δεδομένων για να τονιστεί ότι υπάρχει η δυνατότητα, η εφαρμογή να επικοινωνεί με μια βάση δεδομένων. Έχουμε δει πολλές φορές στην τηλεόραση τα αποτελέσματα των εκλογικών αναμετρήσεων, τα οποία παρουσιάζονται σε Σελίδα 36 από 60

Πτυχιακή εργασία της Μπόιτσιου Γεωργίας μορφή γραφημάτων. Όσο η καταμέτρηση φτάνει προς το τέλος βλέπουμε τις ανάλογες αλλαγές στα γραφήματα. Χρησιμοποιείται λοιπόν μια βάση δεδομένων η οποία ανανεώνεται συνεχώς. Το πρόγραμμα που εμφανίζει τα γραφήματα επικοινωνεί με τη βάση δεδομένων και μπορεί και αλλάζει δυναμικά. Η βάση δεδομένων που αναπτύχθηκε είναι μία μικρή βάση που διαθέτει μονάχα δύο πίνακες, για να δείξουμε απλά την δυνατότητα της εφαρμογής μας να επικοινωνεί με αυτήν την βάση και τη δυνατότητα ανάπτυξης μιας μεγάλης βάσης δεδομένων η οποία θα τροποποιεί τα γραφήματα δυναμικά. Όπως αναφέρθηκε η εφαρμογή έχει τη φιλοσοφία ανάπτυξης με συναρτήσεις, έτσι ώστε να είναι δυνατή η εύκολη τροποποίηση της. Η βάση δεδομένων ονομάστηκε test και έχει τους παρακάτω πίνακες: Εικόνα 4.14.: Οι πίνακες της βάσης δεδομένων Όπως φαίνεται και στην εικόνα είναι μία πολύ απλή βάση δεδομένων που περιέχει μόνο δύο πίνακες, τον πίνακα graph, με τέσσερα πεδία από τα οποία τα τρία πεδία χρησιμοποιούνται και από τα τρία γραφήματα, και τον πίνακα titles, ο οποίος χρησιμοποιείται μόνο από το συγκριτικό ραβδόγραμμα. Data: Παρακάτω θα δούμε αναλυτικότερα πως δουλεύει το κουμπί Read Db Σελίδα 37 από 60

Κεφάλαιο 4ο : Ανάπτυξη Εφαρμογής Ραβδόγραμμα (Bar Chart) Εικόνα 4.15.: Το user interface του ραβδογράμματος Εάν πατήσουμε το κουμπί Read Db Data, τότε η λίστα τιμών θα γεμίσει με τα στοιχεία του πεδίου value του πίνακα graph, δηλαδή: Εικόνα 4.16.: Μεγέθυνση του user interface του ραβδογράμματος συμπληρωμένο με δεδομένα από την βάση δεδομένων Σελίδα 38 από 60

Πτυχιακή εργασία της Μπόιτσιου Γεωργίας Βλέπουμε λοιπόν ότι γέμισε η λίστα. Ο χρήστης έχει την δυνατότητα να προσθέσει κάποια τιμή, να αλλάξει κάποια τιμή με το κουμπί Change data, και να διαγράψει μία ή περισσότερες τιμές με το κουμπί Delete data, η αλλαγή δεν θα επέλθει στο πεδίο value του πίνακα graph, που χρησιμοποιήθηκε για το γέμισμα της λίστας τιμών. Επίσης μπορούμε αντίστοιχα να δώσουμε τίτλο στους άξονες x και y, και τίτλο στο γράφημά μας. Ακόμη μπορούμε να δώσουμε χρώμα στο φόντο αλλά και στις ράβδους του γραφήματος και να δημιουργηθεί το γράφημά μας. Εάν λοιπόν δώσουμε όλα τα παραπάνω στο user interface τότε θα δημιουργηθεί το παρακάτω γράφημα, με τις τιμές του πεδίου value, του πίνακα graph: Εικόνα 4.17.: Το γράφημα που εμφανίζεται από τα δεδομένα της Βάσης Δεδομένων Σελίδα 39 από 60

Κεφάλαιο 4ο : Ανάπτυξη Εφαρμογής Συγκριτικό ραβδόγραμμα (Bar Chart (Compare)) Εικόνα 4.18.: Το user interface του συγκριτικού ραβδογράμματος. Εάν πατήσουμε το κουμπί Read Db Data, τότε θα γεμίσει η πρώτη λίστα τιμών με το πεδίο value του πίνακα graph, η δεύτερη λίστα τιμών με τις τιμές του πεδίου value2 του πίνακα graph και οι τίτλοι των δύο λιστών, με το πεδίο title του πίνακα titles: Εικόνα 4.19.: Μεγέθυνση του user interface, συμπληρωμένο με τα στοιχεία της βάσης δεδομένων Σελίδα 40 από 60

Πτυχιακή εργασία της Μπόιτσιου Γεωργίας Και εδώ υπάρχει η δυνατότητα αλλαγής ή διαγραφής τιμών από τις λίστες χωρίς να υπάρξει αλλαγή στα πεδία value και value 2 του πίνακα graph, και του πεδίου title του πίνακα titles. Επίσης μπορεί ο χρήστης να δώσει χρώματα στις ράβδους αλλά και στο φόντο. Ακόμη μπορεί να δώσει τίτλους στους άξονες x και y, αλλά και τίτλο στο γράφημα. Έτσι θα παρουσιαστεί ένα γράφημα όπως το παρακάτω: Εικόνα 4.20.: Το γράφημα που εμφανίζεται από τα δεδομένα της Βάσης Δεδομένων. Σελίδα 41 από 60

Κεφάλαιο 4ο : Ανάπτυξη Εφαρμογής Κυκλικό διάγραμμα (Pie Chart) Εικόνα 4.21.: Το user interface του κυκλικού διαγράμματος. Εάν πατήσουμε το κουμπί Read Db Data, τότε θα γεμίσει η πρώτη λίστα με τιμές του πεδίου value του πίνακα graph και η δεύτερη λίστα με τιμές του πεδίου name του πίνακα graph: Εικόνα 4.22.: Η μεγέθυνση του user interface του κυκλικού διαγράμματος, συμπληρωμένο με δεδομένα από τη Βάση Δεδομένων. Υπάρχει η δυνατότητα, όπως και στα δύο προηγούμενα γραφήματα να προσθέσουμε, αλλάξουμε ή διαγράψουμε στοιχεία από τη λίστα, χωρίς Σελίδα 42 από 60

Πτυχιακή εργασία της Μπόιτσιου Γεωργίας μετατροπή του πίνακα graph. Επίσης υπάρχει η δυνατότητα να δώσει ο χρήστης τίτλο στο γράφημα και χρώμα στο φόντο του γραφήματος και να δημιουργηθεί ένα γράφημα όπως το παρακάτω: Εικόνα 4.23.: Το γράφημα που εμφανίζεται από τα δεδομένα της Βάσης Δεδομένων. Σελίδα 43 από 60

Κεφάλαιο 5 ο Ανάλυση του προγράμματος ανάπτυξης της εφαρμογής 5.1. Εισαγωγή Σ αυτό το κεφάλαιο θα γίνει μια ανάλυση της εφαρμογής. Θα γίνει μία προσπάθεια να εξηγήσουμε τι ακριβώς συμβαίνει πίσω από κάθε text box ή submit button των user interfaces των τριών γραφημάτων, και πώς δημιουργήθηκε το πρόγραμμα που σχεδιάζει τα γραφήματα. Θα πρέπει να τονιστεί σε αυτό το σημείο, ότι η συγγραφή κώδικα για τη δημιουργία εικόνων είναι αρκετά δύσκολη. Πχ, για να τραβήξουμε μία γραμμή, θα πρέπει να γνωρίζουμε τα pixel αρχής και τέλους. Δεν είναι εύκολο να γνωρίζουμε αυτά τα pixel. Η σχεδίαση γίνεται με αρκετές δοκιμές, για να βρούμε τελικά πια θα είναι τα σημεία αρχής και τέλους. Η εφαρμογή που αναπτύχθηκε, είχε σαν βάση τις διαστάσεις της εικόνας. Όλα τα σχήματα, σχεδιάστηκαν με διάφορες αναλογίες. Οι μόνες σταθερές τιμές ήταν οι διαστάσεις τις εικόνας, τα υπόλοιπα ήταν αναλογικά λόγω τις μεταβολής του μεγέθους, ανάλογα με τα δεδομένα που δίνει ο χρήστης. Ας δούμε αναλυτικότερα την ανάπτυξη των προγραμμάτων των τριών user interfaces, αλλά και το πώς αναπτύχθηκαν τα προγράμματα των εικόνων που επικοινωνούν με αυτά των user interfaces. Σελίδα 44 από 60

Πτυχιακή εργασία της Μπόιτσιου Γεωργίας 5.2. Ραβδόγραμμα (Pie Chart) Καταρχάς ας ξαναδούμε το user interface του ραβδογράμματος και ας αναλύσουμε εκτενέστερα κάθε text box και κάθε submit button, πιο script κρύβουν από πίσω. Εικόνα 5.1.: Το user interface του ραβδογράμματος Έχουμε δημιουργήσει ένα select, δηλαδή μία λίστα η οποία δέχεται τιμές από το χρήστη. Αυτές οι τιμές αποθηκεύονται σε έναν πίνακα, έτσι ώστε να είναι εύκολη η διαχείρισή τους μέχρι που να αποσταλούν στο πρόγραμμα που σχεδιάζει την εικόνα, δηλαδή το γράφημα. Ο χρήστης λοιπόν έχει ένα text box από όπου μπορεί να εισάγει τιμές στην λίστα χρησιμοποιώντας το submit button που ονομάζεται Add data. Οι τιμές αυτές όπως αναφέραμε και παραπάνω αποθηκεύονται σ έναν πίνακα ο οποίος θα μας φανεί αρκετά χρήσιμος παρακάτω. Άλλη μια επιλογή του χρήστη είναι να αλλάξει μια τιμή που ήδη έχει εισάγει στη λίστα. Ίσως έκανε λάθος στην εισαγωγή της τιμής. Έχει τη δυνατότητα να Σελίδα 45 από 60

Κεφάλαιο 5 ο : Ανάλυση του προγράμματος ανάπτυξης της εφαρμογής διορθώσει το λάθος του. Εδώ λοιπόν καταλαβαίνουμε γιατί είναι απαραίτητος ο πίνακας που έχουμε δηλώσει για να αποθηκεύονται οι τιμές. Ο χρήστης λοιπόν, επιλέγει την τιμή από τη λίστα (select) που θέλει να αντικαταστήσει. Πληκτρολογεί την τιμή στο text box που δίπλα του υπάρχει το submit button Change data, και πατάει το Change data. Πατώντας λοιπόν στο κουμπί, το πρόγραμμα ψάχνει μέσα στον πίνακα την επιλεγμένη τιμή από τη λίστα και την αντικαθιστά με τη νέα τιμή που έδωσε ο χρήστης. Ο χρήστης επίσης έχει τη δυνατότητα να διαγράψει μία τιμή από τη λίστα. Μπορεί ο χρήστης να την πληκτρολόγησε κατά λάθος, επομένως θα πρέπει να υπάρχει η δυνατότητα να την αφαιρέσει από τη λίστα. Επιλέγοντας λοιπόν την τιμή που θέλει ο χρήστης να διαγράψει και πατώντας το submit button Delete data το πρόγραμμα ψάχνει μέσα στον πίνακα την τιμή από τη λίστα (select) που επέλεξε ο χρήστης και την διαγράφει. Αμέσως μετά ο χρήστης μπορεί αν θελήσει να δώσει τίτλο στον άξονα x και επίσης μπορεί να δώσει τίτλο στον άξονα y. Ακόμη μπορεί να δώσει τίτλο στο γράφημα. Όλα αυτά μπορεί να τα πληκτρολογήσει ο χρήστης σε text boxes, ένα για το κάθε τίτλο. Στη συνέχεια ο χρήστης έχει τη δυνατότητα να επιλέξει χρώμα για το φόντο του γραφήματος αλλά και για τις ράβδους τους γραφήματος. Δημιουργήθηκαν και πάλι δύο λίστες select και γίνεται include ένα αρχείο με κατάληξη *.php_inc. Αυτό το αρχείο δημιουργεί κάθε γραμμή της λίστας. Έχει σχεδιαστεί έτσι ώστε κάθε χρώμα που αναγράφεται σε κάθε γραμμή να έχει και φόντο το ίδιο το χρώμα, έτσι ώστε να μπορεί να βλέπει ο χρήστης πιο χρώμα θέλει να επιλέξει. Κάθε φορά που προσθέτουμε, αλλάζουμε ή διαγράφουμε ένα στοιχείο από τη λίστα, δηλαδή κάθε φορά που πατάμε το κουμπί Add data ή το κουμπί Change data ή το κουμπί Delete data το πρόγραμμα καλεί συνεχώς τον Σελίδα 46 από 60

Πτυχιακή εργασία της Μπόιτσιου Γεωργίας εαυτό του (γίνεται POST στην ίδια σελίδα). Εδώ μπορούμε να καταλάβουμε τη χρήση του πίνακα που προστίθενται, αλλάζουν ή διαγράφονται στοιχεία. Υπάρχει επίσης και το κουμπί Read Db Data που όπως είπαμε και παραπάνω εισάγει στοιχεία από μια Βάση Δεδομένων. Δημιουργούμε μία συνάρτηση η οποία δέχεται μια μεταβλητή. Η συνάρτηση αυτή συνδέεται με την Βάση Δεδομένων. Αφού πατήσουμε το κουμπί Read Db Data τότε καλούμε τη συνάρτηση με όρισμα ένα query της μορφής select. Η συνάρτηση επιστρέφει όλα τα αποτελέσματα του query αυτού. Αφού γεμίσει λοιπόν ο πίνακας, στέλνουμε τα δεδομένα του πίνακα αυτού στη λίστα, για να εμφανιστούν στο χρήστη. Ο χρήστης, αφού πατήσει το κουμπί Read Db Data, μπορεί αν θελήσει να προσθέσει δικά του στοιχεία, να αλλάξει κάποιο στοιχείο από αυτά που εμφανίστηκαν, αλλά και να διαγράψει κάποιο. Όλα αυτά μπορούν να γίνουν χωρίς να υπάρξει κάποια προσθήκη, αλλαγή ή διαγραφή στον πίνακα της Βάσης Δεδομένων, γιατί το script που δημιουργήσαμε είναι μόνο για ανάκτηση δεδομένων από την Βάση Δεδομένων, υπάρχει όμως η δυνατότητα να γίνει προσθήκη, αλλαγή ή διαγραφή στον πίνακα της Βάσης Δεδομένων με διάφορες προσθήκες στο πρόγραμμα της εφαρμογής. Αφού λοιπόν ο χρήστης συμπληρώσει όλα τα boxes στο user interface, όλα αυτά, μαζεύονται σε μία μεταβλητή και στέλνονται στο πρόγραμμα που θα σχεδιάσει την εφαρμογή. Τα μαζεύουμε όλα και τα στέλνουμε σε μία μεταβλητή, για να μην στείλουμε μία φορτωμένη σελίδα, με πολλά δεδομένα. Επομένως με τα δεδομένα αυτά θα σχεδιάσουμε το γράφημα μας που θα φαίνεται όπως το παρακάτω: Σελίδα 47 από 60

Κεφάλαιο 5 ο : Ανάλυση του προγράμματος ανάπτυξης της εφαρμογής Εικόνα 5.2.: Ένα γράφημα που εμφανίζεται αν συμπληρώσουμε με υποθετικά δεδομένα το user interface της εικόνας 5.1. Καταρχάς σ αυτό το πρόγραμμα, ξεκινούμε ανακτώντας τις μεταβλητές που στάλθηκαν από το user interface. Ο πίνακας που είχε μέσα τα δεδομένα της λίστας στάλθηκε ως μία μεταβλητή. Τώρα χρησιμοποιώντας την έτοιμη συνάρτηση της PHP, explode ( ), μπορώ να διαχωρίσω και πάλι τα δεδομένα της λίστας που στάλθηκα σαν ένα και τα αποθηκεύω και πάλι σε έναν πίνακα. Αμέσως μετά δημιουργώ μία περιοχή σχεδίασης, μία περιοχή όπου θα είναι η εικόνα μου, με την συνάρτηση της PHP, ImageCreate ( ). Ανακτούμε και τα υπόλοιπα δεδομένα ( GET ), δηλαδή π.χ. για το τίτλο του άξονα x, ελέγχω αν ο χρήστης έχει δώσει κάποιο τίτλο, αν ναι το αποθηκεύω σε μια μεταβλητή, διαφορετικά σε αυτήν τη μεταβλητή αποθηκεύω το κενό χαρακτήρα. Το ίδιο κάνω και για τον τίτλο y, και τον τίτλο του γραφήματος. Σελίδα 48 από 60

Πτυχιακή εργασία της Μπόιτσιου Γεωργίας Στη συνέχεια δημιουργούμε διάφορες μεταβλητές ( στην ουσία ψάχνουμε να βρούμε pixels), στις οποίες αποθηκεύονται διάφορες αναλογίες, οι οποίες θα μας βοηθήσουν στη σχεδίαση του γραφήματος. Μεταβλητές που θα μας βοηθήσουν στο που θα τοποθετηθούν οι τίτλοι του γραφήματος, μεταβλητές για την σχεδίαση των αξόνων x και y και μεταβλητές που θα μας βοηθήσουν στη σχεδίαση των ράβδων. Αμέσως μετά ανακτούμε και τα χρώματα για το φόντο και για τις ράβδους του γραφήματος. Επειδή γνωρίζουμε μόνο τον δεκαεξαδικό αριθμό των χρωμάτων, αλλά οι συναρτήσεις της PHP δέχονται μόνο συνδυασμό δεκαδικών αναπτύχθηκε μία συνάρτηση η οποία αντιστοιχίζει το όνομα του χρώματος με το δεκαεξαδικό του αριθμό και μία ακόμη που μετατρέπει το δεκαεξαδικό σε δεκαδικό για να χρησιμοποιηθεί αμέσως μετά στις συναρτήσεις σχεδίασης του γραφήματος. Για την σχεδίαση των αξόνων χρησιμοποιήθηκε η έτοιμη συνάρτηση της PHP, ImageLine ( ), η οποία δέχεται ως ορίσματα την εικόνα, τις μεταβλητές που αναφέραμε παραπάνω για να δημιουργηθούν οι άξονες και ένα χρώμα. Για τη σχεδίαση των ράβδων, χρησιμοποιήθηκε η συνάρτηση ImageFilledRectAngle ( ), η οποία δέχεται ως ορίσματα την εικόνα, τις μεταβλητές που αναφέραμε παραπάνω για να δημιουργηθούν οι άξονες και ένα χρώμα. Επίσης πάνω από κάθε ράβδο εμφανίζεται και ο αριθμός που πληκτρολόγησε ο χρήστης στο user interface, χρησιμοποιώντας τη συνάρτηση ImageString ( ). Για την εμφάνιση των τίτλων χρησιμοποιήθηκαν οι συναρτήσεις τις PHP ImageString ( ) και ImageStringUp ( ), που δέχονται ως ορίσματα την εικόνα, τις μεταβλητές που αποτελούν τις συντεταγμένες και ένα χρώμα. Για την δήλωση των μεταβλητών που αποτελούν τις συντεταγμένες, την ανάκτηση των δεδομένων από το user interface και για την σχεδίαση του Σελίδα 49 από 60

Κεφάλαιο 5 ο : Ανάλυση του προγράμματος ανάπτυξης της εφαρμογής γραφήματος, δημιουργήθηκε μία συνάρτηση, η οποία επιστρέφει μία έτοιμη εικόνα. Για να εμφανιστεί όμως αυτή η εικόνα, χρησιμοποιήθηκε η έτοιμη συνάρτηση της PHP, ImagePNG ( ) η οποία στέλνει στον browser, μια εικόνα σε forma png. 5.3. Συγκριτικό Ραβδόγραμμα (Bar Chart (Compare)) Το user interface του συγκριτικού ραβδογράμματος καθώς και η ανάπτυξη του προγράμματος για τη σχεδίαση του γραφήματος είναι μία παραλλαγή ή μάλλον μία επέκταση του απλού ραβδογράμματος. Ας δούμε λοιπόν το user interface του συγκριτικού ραβδογράμματος και ποιες οι προσθήκες σε σχέση με το απλό ραβδόγραμμα. Εικόνα 5.3.: Το user interface του συγκριτικού ραβδογράμματος. Καταρχάς ας δώσουμε ένα παράδειγμα για το συγκριτικό ραβδόγραμμα. Ας υποθέσουμε ότι ένας γεωργός παράγει μήλα και αχλάδια, και θέλει να δει σε σύγκριση την παραγωγή των δύο αυτών προϊόντων τα τελευταία τρία χρόνια. Σελίδα 50 από 60