Ανάπτυξη εφαρμογής διαδικτύου για την παρακολούθηση της επαγγελματικής πορείας των αποφοίτων του τμήματος Διαχείρισης Πληροφοριών.

Τ.Ε.Ι. ΚΑΒΑΛΑΣ ΤΜΗΜΑ

ΣΧΟΛΗ ΔΙΟΙΚΗΣΗΣ ΔΙΑΧΕΙΡΙΣΗΣ

ΚΑΙ ΟΙΚΟΝΟΜΙΑΣ ΠΛΗΡΟΦΟΡΙΩΝ

Εκπονηθείσα πτυχιακή εργασία απαραίτητη για την κτήση του βασικού πτυχίου

ΑΝΑΠΤΥΞΗ ΕΦΑΡΜΟΓΗΣ ΔΙΑΔΙΚΤΥΟΥ ΓΙΑ ΤΗΝ ΠΑΡΑΚΟΛΟΥΘΗΣΗ ΤΗΣ ΕΠΑΓΓΕΛΜΑΤΙΚΗΣ ΠΟΡΕΙΑΣ ΤΩΝ ΑΠΟΦΟΙΤΩΝ ΤΟΥ ΤΜΗΜΑΤΟΣ

ΔΙΑΧΕΙΡΙΣΗΣ ΠΛΗΡΟΦΟΡΙΩΝ

Βασίλης Ιστικόπουλος

ΙΑΝΟΥΑΡΙΟΣ 2008

ΕΠΟΠΤΗΣ ΚΑΘΗΓΗΤΗΣ

Βασίλειος Μαρδύρης

Σελ. 2 από 135

ΠΕΡΙΕΧΟΜΕΝΑ

ΠΡΟΛΟΓΟΣ.

………3

ΕΙΣΑΓΩΓΗ…

………4

1.ΕΡΓΑΛΕΙΑ ΑΝΑΠΤΥΞΗΣ ΤΗΣ ΕΦΑΡΜΟΓΗΣ………...5

1.1 Γλώσσα HTML και CSS………...6

1.2 Γλώσσα JavaScript……….….7

1.3 Dreamweaver 8………....…7

1.4 Εργαλεία σχεδίασης CorelDRAW και Corel Photo Suite………..….9

1.5 Γλώσσα PHP και Zend Studio

……….……...

1.6 Γλώσσα SQL, διανομή MySQL……….…...13

1.7 Apache HTTP server……….……14

2.ΣΧΕΔΙΑΣΗ ΤΗΣ ΒΑΣΗΣ ΔΕΔΟΜΕΝΩΝ……….…..16

2.1 Οι πίνακες της Βάσης Δεδομένων……….…….16

2.1.1 Ο πίνακας users……….….16

2.1.2 Ο πίνακας admins………..….16

2.1.3 Οι πίνακες κατηγοριών επαγγελματικής κατάστασης………...17

2.2 Σχέσεις μεταξύ των πινάκων της βάσης………...……….19

3.ΑΝΑΠΤΥΞΗ ΤΗΣ ΕΦΑΡΜΟΓΗΣ………20

3.1 Σχεδίαση ιστοσελίδων………..20

3.2 Εναλλαγή των ερωτήσεων………...23

4.ΧΡΗΣΗ ΤΗΣ ΕΦΑΡΜΟΓΗΣ……….30

4.1 Χρήση από απλό χρήστη……….30

4.2 Χρήση από διαχειριστή συστήματος………..33

ΣΥΜΠΕΡΑΣΜΑΤΑ ΚΑΙ ΠΡΟΟΠΤΙΚΕΣ……….36

ΒΙΒΛΙΟΓΡΑΦΙΑ……….37

ΠΑΡΑΡΤΗΜΑ………38

Σελ. 3 από 135

ΠΡΟΛΟΓΟΣ

Η πτυχιακή αυτή εργασία αποτελεί μια προσπάθεια που έγινε για την δημιουργία μιας δικτυακής εφαρμογής για την παρακολούθηση της επαγγελματική πορείας των αποφοίτων του ΤΕΙ Καβάλας. Η επιλογή του θέματος έγινε βάση των αναγκών του τμήματος για μία τέτοια εφαρμογή σύμφωνα με συζητήσεις με τον επιβλέπων καθηγητή. Η επιλογή των εργαλείων δημιουργίας της εφαρμογής έγινε με βάση την ανάγκη για γνώση πολλών διαφορετικών εργαλείων στον τομέα του web development. Μην έχοντας καμία επαφή με 2 από τις προγραμματιστικές γλώσσες που χρησιμοποίησα συνάντησα αρκετές δυσκολίες κατά την ανάπτυξη. Σήμερα όμως έχοντας ολοκληρώσει την εφαρμογή αισθάνομαι ότι έχω επαρκή γνώση των 2 αυτών εργαλείων.

Με την ολοκλήρωση αυτής της εργασίας οφείλω να ευχαριστήσω τον

επιβλέπων καθηγητή κ. Βασίλειο Μαρδύρη για όλη την βοήθεια, την

άψογη συνεργασία και την υπομονή παρά τις όποιες αντιξοότητες

συναντήσαμε. Επίσης θέλω να ευχαριστήσω την κα. Ματθαιάκη Κατερίνα

για την βοήθεια της όσον αφορά το ερωτηματολόγιο. Τέλος θέλω να

ευχαριστήσω τα άτομα από το φιλικό μου περιβάλλον για την υπόδειξη

μερικών από τα εργαλεία, όλους τους developers του δωρεάν λογισμικού

που χρησιμοποιήθηκε, όλους τους προγραμματιστές για τους διάφορους

οδηγούς εκμάθησης γλωσσών προγραμματισμού που διάβασα, καθώς και

τους γονείς μου για την υποστήριξη κατά την διάρκεια της φοίτησης μου

στο ΤΕΙ Καβάλας.

Σελ. 4 από 135

ΕΙΣΑΓΩΓΗ

Δεν υπάρχει καμιά αμφιβολία πως στις μέρες μας το διαδίκτυο είναι το πληρέστερο εργαλείο για την πληροφόρηση. Όσο μάλιστα οι άνθρωποι εξοικειώνονται με την τεχνολογία, γίνεται και το δημοφιλέστερο. Η ανάπτυξη λοιπόν εφαρμογών στο διαδίκτυο είναι ένας πολλά υποσχόμενος αλλά και απαιτητικός τομέας. Από την διαφήμιση έως την διασκέδαση και την ενημέρωση, οι δικτυακές εφαρμογές πρέπει να ξεχωρίζουν είτε με την ευχρηστία, είτε με την καινοτομία τους, είτε, ακόμα καλύτερα, και με τα δύο.

Μια δικτυακή εφαρμογή, και κατά συνέπεια ο δικτυακός χώρος που την φιλοξενεί, εκφράζουν τον ιδιοκτήτη τους, είτε αυτός είναι μια εταιρία που θέλει να διαφημιστεί, είτε ένας οργανισμός/ίδρυμα/εταιρία που θέλει να προσφέρει υπηρεσίες. Για αυτόν τον λόγο η σχεδίαση του κάθε ιστοχώρου πρέπει να συμβαδίζει με την κουλτούρα και την εικόνα του ιδιοκτήτη του ώστε ο κάθε περιηγητής του ιστοχώρου να σχηματίζει την καλύτερη εικόνα για τον εκάστοτε ιδιοκτήτη. Η όμορφη σχεδίαση μπορεί όμως να σταθεί εμπόδιο για την πρακτικότητα της εφαρμογής, ένα εμπόδιο που πρέπει να ξεπεραστεί από τον δημιουργό της. Για να γίνει εφικτό κάτι τέτοιο οι δημιουργοί διαδικτυακών εφαρμογών έχουν στην διάθεση τους μια πληθώρα εργαλείων που αφορούν την σχεδίαση και τον προγραμματισμό, η γνώση διαχείρισης όλων αυτών των εργαλείων είναι ίσως το σημαντικότερο στοιχείο για κάποιον που στοχεύει να δημιουργήσει κάτι νέο στον τομέα αυτόν.

Στις σελίδες που ακολουθούν βρίσκεται η παρουσίαση των

εργαλείων που χρησιμοποιήθηκαν, ανάλυση της λειτουργίας της

εφαρμογής, αναλυτικότερη ανάλυση των σημαντικότερων στοιχείων της

εφαρμογής, ανάλυση της βάσης δεδομένων που χρησιμοποιείται,

αναλυτική παρουσίαση της χρήσης της εφαρμογής, τα συμπεράσματα και

επιπλέον σχόλια για την εμπειρία της ανάπτυξης και τέλος το παράρτημα

με τον όλον τον κώδικα που δημιουργήθηκε κατά την ανάπτυξη.

Σελ. 5 από 135

1. ΕΡΓΑΛΕΙΑ ΑΝΑΠΤΥΞΗΣ ΤΗΣ ΕΦΑΡΜΟΓΗΣ

Η δημιουργία της εφαρμογής που παρουσιάζεται απαιτούσε χρήση σχεδιαστικών και προγραμματιστικών εργαλείων. Παρακάτω παρουσιάζονται οι γλώσσες/εργαλεία που χρυσιμοποιήθηκαν καθώς και τα προγράμματα μέσω των οποίων χρησιμοποιήθηκαν.

Σχεδιαστικά

• Γλώσσα HTML και CSS, scripts δημιουργημένα μέσω του προγράμματος Dreamweaver8 της Macromedia.

• Γραφικά, σχεδιασμένα μέσω των προγραμμάτων CorelDraw και Corel Photo Suite της Corel.

• Γλώσσα JavaScript, scripts δημιουργημένα μέσω του προγράμματος Dreamweaver8 της Macromedia.

Προγραμματιστικά

• Γλώσσα PHP, scripts δημιουργημένα μέσα του προγράμματος Zend Studio της Zend.

• Γλώσσα SQL, βάση δεδομένων δημιουργημένη μέσω της διανομής της SQL, MySQL.

• Apache Web Server, HTTP server της Apache Software Foundation.

Στις σελίδες που ακολουθούν υπάρχουν παρουσιάσεις των εργαλείων, μια σύντομη ιστορική αναφορά στην δημιουργία του κάθε εργαλείου καθώς και οι λόγοι για τους οποίους προτιμήθηκαν.

1.1 Γλώσσα HTML και CSS.

HTML είναι τα αρχικά για Hypertext Markup Language. Η HTML είναι

το εργαλείο που δίνει μορφή και “ζωή” σε έναν ιστοχώρο. Διαχειρίζεται το

περιεχόμενο της σελίδας όσων αφορά το κείμενο, τις φωτογραφίες κ.ο.κ..

1 Εργαλεία ανάπτυξης της εφαρμογής.

Σελ. 6 από 135

Από μια προγραμματιστική σκοπιά, η HTML δεν μπορεί να προσφέρει τίποτα, είναι μια καθαρά “σχεδιαστική” γλώσσα. Συνθήκες, επαναλήψεις και κλάσεις πρέπει να διαχειρίζονται από ένα διαφορετικό εργαλείο, PHP και CSS για παράδειγμα. Παρόλα αυτά η HTML είναι ίσως το μόνο από τα εργαλεία που δεν μπορεί να λείψει από την επεξεργασία/δημιουργία μιας ιστοσελίδας μιας και είναι αυτή που καθορίζει το τελικό αποτέλεσμα στον φυλλομετρητή του κάθε χρήστη.

Η ιστορία της HTML ξεκινάει το 1980 όπου ο φυσικός Tim Berners- Lee, ανεξάρτητος συνεργάτης για την CERN (European Organization for Nuclear Research) ανέπτυξε ένα Hypertext system με το όνομα ENQUIRE το οποίο επέτρεπε σε αυτόν και τους συναδέλφους του να μοιράζονται κείμενα. Το 1989, ο Tim Berners-Lee και ο Robert Cailliau, data systems engineer για την CERN, κατέθεσαν προτάσεις για ένα hypertext system.

Έναν χρόνο αργότερα συνεργάστηκαν και κατέθεσαν στην CERN το WorldWideWeb project το οποίο και έγινε αποδεκτό. Το 1991 η πρώτη έκδοση της HTML έγινε γνωστή στο κοινό μέσω του κειμένου HTML Tags το οποίο ο Tim Berners-Lee διέθεσε στο internet. Το 1995 δημιουργήθηκε ένα HTML Working Group από την IETF (Internet Engineering Task Force) το οποίο και ολοκλήρωσε την έκδοση HTML 2.0. Τελευταίος σημαντικός σταθμός για την HTML ήταν το 2000 όπου και έγινε international standard (ISO/IEC 15445:2000) στην έκδοση 4.01 πλέον.[6]

Το CSS είναι τα αρχικά των Cascading Style Sheeds, μιας γλώσσας που χρησιμοποιείται για την παρουσίαση δομημένων εγγράφων (style sheet language) γραμμένων σε μια Markup Language όπως είναι η HTML.

Η λειτουργία των CSS είναι να διαχειρίζονται την εμφάνιση ενός

αντικειμένου της HTML, ένα div tag για παράδειγμα ή ακόμα και όλο το

body. Ο προγραμματιστής δημιουργεί κλάσεις στα CSS οι οποίες

περιέχουν τις σχεδιαστικές ιδιότητες ενός HTML αντικειμένου και τις

οποίες καλεί μέσα στην HTML ώστε το αντικείμενο που θέλει να δεχθεί

αυτές τις ιδιότητες. Με αυτό τον τρόπο 2 αντικείμενα μπορούν να

χρησιμοποιούν την ίδια κλάση. Η χρησιμοποίηση των CSS σε έναν

ιστοχώρο βοηθάει τον δημιουργό να διαχειρίζεται εύκολα τα χρώματα, τις

Πτυχιακή εργασία του Βασίλη Ιστικόπουλου.

Σελ. 7 από 135

διαστάσεις και πολλές άλλες ιδιότητες των αντικειμένων του αλλάζοντας απλά την αντίστοιχη κλάση στα CSS του. Το αρχείο που περιέχει τις κλάσεις μπορεί να είναι διαφορετικό από το αρχείο που περιέχει την HTML, κάτι το οποίο σημαίνει ότι πολλά HTML αρχεία (ιστοσελίδες δηλαδή) μπορούν να χρησιμοποιήσουν τις ίδιες κλάσεις από ένα .css αρχείο.[7]

1.2 Γλώσσα JavaScript.

Η JavaScript είναι μια αντικειμενοστραφής γλώσσα προγραμματισμού η οποία χρησιμοποιείται για client-side λειτουργίες σε μια ιστοσελίδα. Δημιουργημένη από τον Brendan Eich της Netscape, η Ja- vaScript άλλαξε 2 ονόματα (Mocha και LiveScript) πριν καταλήξει σε αυτό που έχει τώρα το οποίο της δόθηκε την περίοδο που η Netscape άρχισε να υποστηρίζει τεχνολογία Java στον browser της. Η JavaScript παρουσιάστηκε και διανεμήθηκε μέσω της έκδοσης 2.0B3 του Netscape browser το 1995. Η αντίστοιχη έκδοση της Microsoft με ονομασία JScript, προς αποφυγή προβλημάτων με το σήμα κατατεθέν της Java, υποστηρίχθηκε για πρώτη φορά στην έκδοση 3.0 του Internet Explorer το 1996.[11]

Το μεγάλο προσόν της JavaScript είναι οτι είναι client-side, δηλαδή όταν κλιθεί κάποια λειτουργία της τρέχει κατευθείαν στον browser του χρήστη μειώνοντας σημαντικά τον χρόνο αλληλεπίδρασης του χρήστη με την εφαρμογή. Στην εφαρμογή που παρουσιάζεται σε αυτήν την εργασία η JavaScript χρησιμοποιήθηκε μαζί με τα CSS ώστε οι ερωτήσεις που καλείται να απαντήσει ο χρήστης να παρουσιάζονται με την σειρά και όχι σε μια τεράστια και κουραστική λίστα. Επίσης χρησιμοποιήθηκε και στα κουμπιά των επιλογών για την επεξήγηση των λειτουργιών τους.

1.3 Dreamweaver8.

Η HTML, τα CSS και η JavaScript για την εφαρμογή αυτή γράφτηκαν

στο Dreamweaver8 της Macromedia (πλέον το Dreamweaver ανήκει στην

Adobe και είναι μέρος της σουίτας CS3). Το Dreamweaver8 πρόκειται για

ένα web developing tool το οποίο παρέχει δυνατότητες επεξεργασίας των

1 Εργαλεία ανάπτυξης της εφαρμογής.

Σελ. 8 από 135

περισσότερων τύπων αρχείων που θα χρειαστεί ένας web developer, όπως HTML, XML, CSS, PHP, JavaScript και άλλα. Το μεγάλο πλεονέκτημα που προσφέρει το Dreamweaver είναι η διπλή επιφάνεια εργασίας. Εφόσον κάποιος το επιθυμεί μπορεί να βλέπει στην επιφάνεια εργασίας του τον κώδικα τον οποίο γράφει αλλά και την σελίδα με το σχεδιαστικό αποτέλεσμα. Η επικοινωνία μεταξύ των δύο αυτών επιφανειών εργασίας είναι αμφίδρομη, οποιαδήποτε αλλαγή γίνει είτε στον κώδικα εμφανίζεται στο σχέδιο και vice versa. Αυτή η δυνατότητα γλιτώνει πολύ χρόνο στον χρήστη ο οποίος χρησιμοποιώντας κάποιον άλλον editor, όπως το Edit Plus, θα αναγκαζόταν να σώσει το αρχείο και να το ανοίξει μέσω κάποιου browser για να δει το αποτέλεσμα. Φυσικά υπάρχει και η δυνατότητα σχεδίασης αποκλειστικά σε κώδικα ή σε σχεδιαστικό περιβάλλον. Τα παραπάνω καθώς και οι πολλές επιλογές για

“τακτοποίηση” του κώδικα, όπως code collapse, color coding, line number-

ing και άλλα, για αυτούς που προτιμούν τον κώδικα, αλλά και η ευκολία

στην σχεδίαση με την βοήθεια rulers, zoom και άλλων σχεδιαστικών

εργαλείων για τους χρήστες με εμπειρία σε σχεδιαστικά προγράμματα,

καθιστούν το Dreamweaver8 ως την καλύτερη επιλογή για την δημιουργία

ιστοσελίδων.[14]

Πτυχιακή εργασία του Βασίλη Ιστικόπουλου.

Σελ. 9 από 135

Εικόνα 1.1 Το περιβάλλον του Dreamweaver8.

1.4 Εργαλεία σχεδίασης CorelDRAW και Corel Photo Suite

Για την σχεδίαση των εικόνων και των γραφικών στην εφαρμογή επιλέχτηκαν τα παραπάνω προγράμματα της εταιρίας Corel.

Το CorelDRAW είναι ένα Vector graphics editing πρόγραμμα το οποίο θεωρείται από πολλούς το καλύτερο στην αγορά. Επιτρέπει την δημιουργία γραφικών μέσω ενός εύκολου στην εκμάθηση και χρήση inter- face, περιέχει πληθώρα επιλογών όσων αφορά την σχεδίαση των γραφικών και παρέχει την δυνατότητα επεξεργασίας και δημιουργίας πολλών τύπων αρχείων.

Το Corel Photo Suite παρέχεται μαζί με την σχεδιαστική σουίτα της Corel και χρησιμοποιείται για την επεξεργασία φωτογραφιών. Όπως και το CorelDRAW, το Photo Suite διαθέτει ένα εύκολο και εύχρηστο interface και πολλές επιλογές για την επεξεργασία των φωτογραφιών και τα αρχεία που μπορεί να επεξεργαστεί.[1]

Η πρώτη έκδοση του CorelDRAW διατέθηκε στην αγορά το 1989 και

σήμερα υπάρχει διαθέσιμη η έκδοση X3 (13)[12]. Η σουίτα της Corel

αποτελεί μια ολοκληρωμένη λύση για τις ανάγκες ενός δημιουργού

1 Εργαλεία ανάπτυξης της εφαρμογής.

Σελ. 10 από 135

ιστοσελίδων/δικτυακών εφαρμογών και μια βασική γνώση της χρήσης της είναι απαραίτητη.

1.5 Γλώσσα PHP και Zend Studio.

Η PHP είναι μια δωρεάν γλώσσα προγραμματισμού για την παραγωγή δυναμικών ιστοσελίδων. Η κύρια χρήση της PHP είναι για την δημιουργία server-side scripts αλλά μπορεί να χρησιμοποιηθεί επίσης ως ένα Command Line Interface, ένα μέσο επικοινωνίας και διαχείρισης ενός λειτουργικού ή ενός προγράμματος, αλλά και για την δημιουργία standalone γραφικών εφαρμογών.[9]

Η PHP δημιουργήθηκε το 1994 από τον προγραμματιστή Rasmus Lerfdorf, ο οποίος βασίστηκε στην γλώσσα C για να δημιουργήσει τα πρώτα scripts τα οποία χρησιμοποίησε για να αντικαταστήσει τα Perl scripts που είχε στην προσωπική του ιστοσελίδα. Η PHP έγινε διαθέσιμη στο κοινό στις 8 Ιουνίου του 1995 με το όνομα Personal Home Page Tools το οποίο και άλλαξε το 1997 σε PHP: Hypertext Preprocessor από δύο Ισραηλινούς προγραμματιστές, τους Zeev Suraski και Andi Gutmans, οι οποίοι φτάσανε την PHP στην έκδοση 3. Οι Suraski και Andi είναι υπεύθυνοι και για την δημιουργία της Zend Engine, μιας virtual machine πάνω στην οποία τρέχει η PHP. Η σημερινή έκδοση της PHP είναι η έκδοση 5 στην οποία και τρέχει η Zend Engine II.

Ο τρόπος λειτουργίας της PHP είναι να “τρέχει” στον server δεχούμενη κώδικα PHP και να παράγει ιστοσελίδες (HTML). Στις δικτυακές εφαρμογές είναι αυτή που δέχεται, επεξεργάζεται και επιστρέφει στον χρήστη δεδομένα. Scripts της PHP μπορεί να είναι standalone αλλά και μέσα σε κώδικα HTML, περιορισμένα σε συμβολισμούς οριοθέτησης (<?php, ?>).

Η PHP είναι μια γλώσσα ανοιχτού κώδικα η οποία τρέχει σε μια

μηχανή ανοιχτού κώδικα. Το γεγονός αυτό έχει οδηγήσει στην δημιουργία

μιας πολύ μεγάλης κοινότητας χρηστών της PHP οι οποίοι είναι οπαδοί

των προγραμμάτων ανοιχτού κώδικα, κάτι που σημαίνει οτι βελτιώσεις και

τροποποιήσεις γίνονται συνεχώς, οδηγώντας την PHP στην κορυφή της

σειράς προτίμησης από ερασιτέχνες αλλά και επαγγελματίες. Μερικοί από

Πτυχιακή εργασία του Βασίλη Ιστικόπουλου.

Σελ. 11 από 135

τους λόγους που η PHP είναι τόσο δημοφιλής και επιλέχθηκε για την δημιουργία αυτής της εφαρμογής παρουσιάζονται παρακάτω:

Η PHP είναι

• cross-platform γλώσσα. Μπορεί να τρέξει σε Windows, Linux, Mac OS X, BSD και Solaris.

• δωρεάν. Ό,τι χρειάζεται κανείς σχετικό με την PHP μπορεί να το βρει στον επίσημο ιστοχώρο www.php.net.

• γρήγορη. Κυμαίνεται στα ίδια επίπεδα με τις Python και Perl αλλά είναι αρκετά γρηγορότερη από την ASP.NET της Microsoft.

• ικανή. Μπορεί να διαχειριστεί μια πληθώρα βάσεων δεδομένων όπως οι MySQL, Oracle, MS SQL, Unix dbm, Sybase και πολλές άλλες. Μπορεί να στηθεί σε πολλούς web servers όπως οi Apache web server, Mi- crosoft Internet Information Server, OmniHTTPd και πολλούς άλλους.

Μπορεί να παράγει HTML σελίδες αλλά και να εξάγει pdf, flash και XML αρχεία.

• επεκτάσιμη. Με την τεράστια κοινότητα που διαθέτει, η PHP επεκτείνεται διαρκώς. Ο καθένας είναι ελεύθερος να γράψει μια επέκταση για να προσαρμόσει την PHP στις δικές του ανάγκες.

• εύκολη στο debug. Υπάρχουν πολλοί debuggers μεταξύ των οποίων μπορεί να διαλέξει κανείς. Αρκετοί από αυτούς παρέχονται δωρεάν.

• υποστηριζόμενη από μια μεγάλη κοινότητα. Στο διαδίκτυο μπορεί κανείς να βρει από tutorials μέχρι και έτοιμα δωρεάν scripts που μπορεί να χρησιμοποιήσει στην σελίδα του.

• εξελίσιμη. Αναβαθμίσεις και νέες εκδόσεις βρίσκονται συνεχώς υπό κατασκευή υποσχόμενες αυξημένες δυνατότητες για την γλώσσα.

[4]

1 Εργαλεία ανάπτυξης της εφαρμογής.

Σελ. 12 από 135

Η εγγραφή των PHP scripts για την εφαρμογή αυτή έγινε μέσω του Zend Studio, ένα Integraded Development Enviroment (IDE) για την PHP δημιουργημένο από την Zend, την εταιρία των δύο δημιουργών της Zend Engine και μερικών εκδόσεων της PHP. Το Zend Studio προσφέρει πολλά εργαλεία για να καλύψουν τις ανάγκες ενός προγραμματιστή σε PHP και να βελτιώσουν την παραγωγικότητα. Ανάμεσα στα εργαλεία αυτά μπορεί να συναντήσει κανείς προκαθορισμένα scripts, auto-filler, την πολύ χρήσιμη λειτουργία του Find and Replace που δίνει την δυνατότητα να βρει κανείς συγκεκριμένο κομμάτι κειμένου ή κάποιο συγκεκριμένο tag μέσα στον κώδικα του και να το αλλάξει ή να το σβήσει, debugger (ακόμα και για debug στον server), δυνατότητα χρήσης FTP, SFTP και FTPS μέσα από το Zend (εικόνα 1.3), εργαλείο για διαχείριση SQL βάσης δεδομένων με γραφικό περιβάλλον (εικόνα 1.4) και φυσικά υποστήριξη όλων των format και γλωσσών σχετικών με το web developing.[13]

Εικόνα 1.2 Το περιβάλλον του Zend Studio.

Πτυχιακή εργασία του Βασίλη Ιστικόπουλου.

Σελ. 13 από 135

Εικόνα 1.3 Εργαλείο σύνδεσης SFTP.

Εικόνα 1.4 Εργαλείο διαχείρισης SQL βάσης.

1.6 Γλώσσα SQL, διανομή MySQL.

Η SQL, της οποίας το όνομα επεκτείνεται από πολλούς ως Struc- tured Query Language (δομημένη γλώσσα αναζητήσεων), είναι μια γλώσσα σχεδιασμένη για την ανάκτηση και διαχείρισή δεδομένων σε ένα σύστημα σχεσιακής βάσης δεδομένων, δημιουργία και τροποποίησή βάσης και διαχείρισή κανόνων πρόσβασης αντικειμένων της βάσης.

Η πρώτη έκδοση της SQL δημιουργήθηκε στην IBM από τους Donald

D. Chamberlin και Raymond F. Boyce τα πρώτα χρόνια της δεκαετίας του

70 και λεγόταν SEQUEL. Είχε σχεδιαστεί τότε για την διαχείρισή και

ανάκτηση δεδομένων από την βάση δεδομένων της IBM, System R. Το

1 Εργαλεία ανάπτυξης της εφαρμογής.

Σελ. 14 από 135

1986 η SQL έλαβε την πιστοποίηση ως standard από το ANSI (American National Standards Institute), το οποίο καθιέρωσε και το όνομα SQL, και επόμενες εκδόσεις διανεμήθηκαν ως ISO standards.[8]

Η δημοφιλέστερη ίσως διανομή της SQL είναι η MySQL της Σουηδικής εταιρίας MySQL AB. Πρόκειται για ένα σύστημα διαχείρισής βάσεων SQL για πολλαπλούς χρήστες το οποίο διανέμεται δωρεάν. Με πάνω από 10 εκατομμύρια εγκαταστάσεις η MySQL διαθέτει ένα μεγάλο μερίδιο της αγοράς, γεγονός το οποίο ευθύνεται κυρίως στην ελεύθερη διανομή του κώδικα της. Τα open-source προϊόντα συχνά προτιμούνται από τους εργαζόμενους στον τομέα της πληροφορικής, όπως φαίνεται και από το διάγραμμα το οποίο δείχνει την χρήση της MySQL και των ανταγωνιστών της.[10]

Εικόνα 1.5 Χρήση της MySQL και του ανταγωνισμού.

1.7 Apache HTTP Server.

Ο Apache server είναι ένας δωρεάν, ανοιχτού λογισμικού web serv- er. Από το 1996 ο Apache υπήρξε ο δημοφιλέστερος server και σήμερα το 47,73% όλων των ιστοχόρων του κόσμου βρίσκονται σε Apache servers (εικόνα 1.4).

Η πρώτη έκδοση του Apache δημιουργήθηκε από τον Robert

McCool ο οποίος απασχολούνταν με τον web server του National Center

for Supercomputing Applications. Όταν το 1994 ο McCool έφυγε από το

Πτυχιακή εργασία του Βασίλη Ιστικόπουλου.

Σελ. 15 από 135

NCSA η ανάπτυξη του HTTPd, όπως είχε τότε ονομαστεί, έμεινε στάσιμη αφήνοντας πολλά περιθώρια για patches τα οποία βελτίωναν τον server.

Έτσι άρχισε να δημιουργείται η κοινότητα του Apache, πολλοί προγραμματιστές άρχισαν να δίνουν κομμάτια κώδικα αλλά και προτάσεις, μέσω e-mail, για την βελτίωση του project. Έτσι τον φεβρουάριο του 1994, οχτώ από τους κύριους προγραμματιστές ίδρυσαν το Apache Group. Το 1999 τα μέλη του Apache Group ίδρυσαν το Apache Software Foundation για να παρέχουν οργανωτική, οικονομική και νομική υποστήριξη στον Apache.[3]

Ο Apache υποστηρίζει τις δημοφιλέστερες server-side γλώσσες προγραμματισμού όπως οι Python, Perl, Tcl και PHP. Μπορεί επίσης να εγκατασταθεί σε αρκετά από τα λειτουργικά της αγοράς (Windows, Linux, MacOS κ.α.), και μάλιστα η Apple τον έχει προεγκατεστημένο στο λειτουργικό της (MacOS). Μια από τις σημαντικές δυνατότητες του Apache είναι το Virtual Hosting, το οποίο επιτρέπει σε μία εγκατάσταση του Apache να εξυπηρετεί πολλά διαφορετικά domains.[2]

Ως ο δημοφιλέστερος web server σήμερα, ο Apache συνδιάζεται με

πολλές εφαρμογές και αρκετοί ιστοχώροι έχουν σχεδιαστεί για να

αξιοποιούν τις δυνατότητες που παρέχει ο Apache. Η υποστήριξη από την

κοινότητα, οι δυνατότητες που προσφέρει, το μηδενικό κόστος και ο

ανοιχτός κώδικας του, καθιστούν τον Apache ως την ιδανικότερη λύση για

την ανάπτυξη δικτυακών εφαρμογών.[5]

1 Εργαλεία ανάπτυξης της εφαρμογής.

Σελ. 16 από 135

Εικόνα 1.6 Χρήση Apache Web Server και ανταγωνισμού.

Πτυχιακή εργασία του Βασίλη Ιστικόπουλου.

Σελ. 17 από 135

2. ΣΧΕΔΙΑΣΗ ΤΗΣ ΒΑΣΗΣ ΔΕΔΟΜΕΝΩΝ

2.1 Οι πίνακες της Βάσης Δεδομένων.

Η βάση δεδομένων της εφαρμογής αποτελείται από 6 πίνακες, 4 που αφορούν τις κατηγορίες των ερωτήσεων και 2 που αφορούν τους χρήστες της εφαρμογής. Τους απλούς χρήστες και τους διαχειριστές δηλαδή. Οι πίνακες είναι οι εξής: users, admins, apasxoloumenoi, aytoapasxoloume- noi, anergoi, mhenergoi.

2.1.1 Ο πίνακας users.

Ο πίνακας users περιέχει 3 πεδία, το aem, το pass, και το Jobtype.

Στο aem βρίσκεται το username του κάθε χρήστη ενώ στο pass ο κρυφός κωδικός που του αντιστοιχεί. Τέλος στο Jobtype αποθηκεύεται η επαγγελματική του κατάσταση, em (employed) για απασχολούμενος, se (self employed) για αυτοαπασχολούμενος, un (unemployed) για άνεργος και me (mh energos) εάν ο χρήστης είναι μη οικονομικά ενεργός. Ως πρωτεύων κλειδί χαρακτηρίζεται το πεδίο aem. Το aem συναντάται επίσης στους πίνακες με τις ερωτήσεις της κάθε κατηγορίας και λειτουργεί ως συνδετικός κρίκος ανάμεσα στην ταυτότητα του χρήστη και στην κατηγορία των ερωτήσεων την οποία απάντησε.

Εικόνα 2.1 Ο πίνακας Users.

2.1.2 Ο πίνακας admins.

Ο πίνακας admins περιέχει μόνο 2 πεδία, το adminname και το

adminpass. Στο adminname υπάρχει το username του διαχειριστή και

αντίστοιχα στο adminpass, ο κρυφός κωδικός του. Ο πίνακας admins δεν

2 Σχεδίαση της βάσης δεδομένων.

Σελ. 18 από 135

συσχετίζεται με κανέναν άλλον πίνακα στην βάση και δεν του έχει διευκρινιστεί πρωτεύων κλειδί.

Εικόνα 2.2 Ο πίνακας Admins.

2.1.3 Οι πίνακες κατηγοριών επαγγελματικής κατάστασης.

Οι υπόλοιποι πίνακες είναι οι πίνακες με της κατηγορίες της επαγγελματικής κατάστασης στους οποίους αποθηκεύονται οι απαντήσεις του κάθε χρήστη. Και οι 4 πίνακες έχουν την ίδια δομή με ουσιαστική διαφορά μόνο στον αριθμό των πεδίων (απαντήσεων). Σε όλους τους πίνακες έχει επιλεχθεί ως τύπος το varchar(10) για να μην χρειάζονται τροποποίηση σε περίπτωση αλλαγής των τιμών στην PHP. Σε κάθε από τους παρακάτω πίνακες, υπάρχει το πεδίο aem, και εν συνεχεία τόσα πεδία όσα και οι ερωτήσεις της κάθε κατηγορίας, ονομασμένα σύμφωνα με τα ονόματα των κατηγοριών όπως τα είδαμε στο Jobtype του πίνακα users και με τον αριθμό της καθε ερώτησης. Πρωτεύων κλειδί σε όλους τους πίνακες είναι το πεδίο aem.

Εικόνα 2.3 Ο πίνακας anergoi.

Πτυχιακή εργασία του Βασίλη Ιστικόπουλου.

Σελ. 19 από 135

Εικόνα 2.4 Ο πίνακας apasxoloumenoi.

Εικόνα 2.5 Ο πίνακας mhenergoi.

2 Σχεδίαση της βάσης δεδομένων.

Σελ. 20 από 135

Εικόνα 2.6 Ο πίνακας aytoapasxoloumenoi.

2.2 Σχέσεις μεταξύ των πινάκων της βάσης.

Οι μόνοι πίνακες που συσχετίζονται στην βάση της εφαρμογής, είναι ο πίνακας users με τους πίνακες που καταχωρούνται οι απαντήσεις.

Το είδος της συσχέτισης είναι ένα προς ένα μιας και το πεδίο aem περιέχει μοναδικές εγγραφές. Από το πεδίο Jobtype του πίνακα users διαλέγεται ο πίνακας/κατηγορία στην οποίο θα συμπληρωθεί το aem με το username του χρήστη και οι απαντήσεις που έδωσε. Έτσι σε κάθε username αντιστοιχεί μια σειρά απαντήσεων.

Εικόνα 2.7 Οι συσχετίσεις των πινάκων.

Πτυχιακή εργασία του Βασίλη Ιστικόπουλου.

Σελ. 21 από 135

3. ΑΝΑΠΤΥΞΗ ΤΗΣ ΕΦΑΡΜΟΓΗΣ.

Ένας από τους σημαντικότερους στόχους αυτής της εφαρμογής ήταν η δημιουργία ενός όμορφου, πρακτικού και πρωτότυπου user-interface. Οι χρήστες της εφαρμογής θα αφιερώσουν αρκετό χρόνο στην συμπλήρωση του ερωτηματολογίου, κάτι που σημαίνει πως το περιβάλλον πρέπει να είναι φιλικό και ευχάριστο. Η γλώσσα JavaScript ήταν το σημαντικότερο εργαλείο όσον αφορά την φιλικότητα και την όμορφη σχεδίαση γιατί δίνει την δυνατότητα εναλλαγής περιεχομένου χωρίς να χρειάζεται να γίνει re- fresh στην σελίδα.

3.1 Σχεδίαση ιστοσελίδων.

Προς αναζήτηση πρωτοτυπίας οι ιστοσελίδες της εφαρμογής απαλλάσσονται από την συνηθισμένη μπάρα με επιλογές στο αριστερό μέρος της σελίδας. Οι επιλογές μεταφέρονται σε ένα πλαίσιο τοποθετημένο κοντά στο κέντρο της σελίδας το οποίο αφήνει τον απαραίτητο χώρο, για το όποιο κείμενο πρέπει να παρουσιαστεί, στον κενό χώρο στα αριστερά του. Στον μικρό κενό χώρο στην δεξιά μεριά του πλαισίου μπορούν να φιλοξενηθούν ανακοινώσεις ή νέα που μπορεί να ενδιαφέρουν τους αποφοίτους του τμήματος. Οι επιλογές που μπορεί να κάνει ο χρήστης είναι 4: Να μεταβεί στο ερωτηματολόγιο, να μεταβεί στις σελίδες με τα αποτελέσματά του ερωτηματολογίου, να μεταβεί στην αρχική σελίδα της εφαρμογής και τέλος να μεταβεί στην κεντρική σελίδα του τμήματος Διαχείρισής Πληροφοριών. Η τελευταία επιλογή γίνεται από την οριζόντια μπάρα που διασχίζει την σελίδα πατώντας στο logo του τμήματος.

Τα εικονίδια για την πλοήγηση μέσα στην εφαρμογή τοποθετούνται

στο κεντρικό πλαίσιο και δεν αναγράφουν την σελίδα στην οποία

μεταφέρουν τον χρήστη. Παρόλο που τα εικονίδια είναι χαρακτηριστικά,

έχει προστεθεί ένα interactive κείμενο από κάτω τους ώστε ο χρήστης να

Σελ. 22 από 135

μπορεί να διαβάσει πληροφορίες για το κάθε εικονίδιο. Ο τρόπος με τον

οποίο

Πτυχιακή εργασία του Βασίλη Ιστικόπουλου.

Σελ. 23 από 135

επιτεύχθηκε αυτό ήταν με ένα script της JavaScript το οποίο αναλύεται παρακάτω.

function ChangeContent () {

var _survey = document.getElementById('survey');

var _text = document.getElementById('text');

var _home = document.getElementById('home');

var _admin = document.getElementById('admin');

_survey.onmouseover = function () {

_text.innerHTML = 'Από αυτό το εικονίδιο θα έχετε πρόσβαση στις ερωτήσεις που θα θέλαμε να συμπληρώσετε.';

}

_survey.onmouseout = function () {

_text.innerHTML = 'Τα 3 παραπάνω εικονίδια σας μεταφέρουν στις αντίστοιχες σελίδες. Με την μεταφορά του ποντικιού πάνω στο εικονίδιο εμφανίζεται μια αναλυτική επεξήγηση.';

}

_home.onmouseover = function () {

_text.innerHTML = 'Βρίσκεστε ήδη στην αρχική σελίδα.';

}

_home.onmouseout = function () {

_text.innerHTML = 'Τα 3 παραπάνω εικονίδια σας μεταφέρουν στις αντίστοιχες σελίδες. Με την μεταφορά του ποντικιού πάνω στο εικονίδιο εμφανίζεται μια αναλυτική επεξήγηση.';

}

_admin.onmouseover = function ()

3 Ανάπτυξη της εφαρμογής.

Σελ. 24 από 135

{

_text.innerHTML = 'Από αυτό το εικονίδιο ο διαχειριστής μπορεί να μεταφερθεί στην σελίδα με τα αποτελέσματα. Πρόσβαση μόνο για τον διαχειριστή του συστήματος.';

}

_admin.onmouseout = function () {

_text.innerHTML = 'Τα 3 παραπάνω εικονίδια σας μεταφέρουν στις αντίστοιχες σελίδες. Με την μεταφορά του ποντικιού πάνω στο εικονίδιο εμφανίζεται μια αναλυτική επεξήγηση.';

} }

Εικόνα 3.1 Τα div tags των επιλογών.

Κάθε εικονίδιο αλλά και ο χώρος στον οποίο εμφανίζεται το κείμενο είναι div tags τα οποία διακρίνονται και στην εικόνα 3.1. Οι πρώτες γραμμές στο script είναι για να αναγνωριστούν τα αντικείμενα που μας ενδιαφέρουν.

var _survey = document.getElementById('survey');

var _text = document.getElementById('text');

var _home = document.getElementById('home');

Πτυχιακή εργασία του Βασίλη Ιστικόπουλου.

Σελ. 25 από 135

var _admin = document.getElementById('admin');

Το κάθε div έχει ένα id το οποίο και χρησιμοποιείται για το όνομα του αντικειμένου. Έπειτα ανάλογα με την κίνηση του ποντικιού που θα κάνει ο χρήστης επάνω στο εικονίδιο, αλλάζει η ιδιότητα innerHTML του div text η οποία είναι ο HTML κώδικας ο οποίος περιέχεται στο div. Όπως βλέπουμε παρακάτω στην κίνηση onmouseover (μεταφορά του ποντικιού πάνω στο εικονίδιο) πάνω στο αντικείμενο home αλλάζει η innerHTML του αντικειμένου text για να ενημερώσει τον χρήστη οτι βρίσκεται ήδη στην αρχική σελίδα. Για να επιστρέψει το κείμενο στην αρχική του κατάσταση χρησιμοποιούμε πάλι την innerHTML στην κίνηση onmouseout (απομάκρυνση του ποντικιού από το εικονίδιο) αυτήν την φορά.

_home.onmouseover = function () {

_text.innerHTML = 'Βρίσκεστε ήδη στην αρχική σελίδα.';

}

_home.onmouseout = function () {

_text.innerHTML = 'Τα 3 παραπάνω εικονίδια σας μεταφέρουν στις αντίστοιχες σελίδες. Με την μεταφορά του ποντικιού πάνω στο εικονίδιο εμφανίζεται μια αναλυτική επεξήγηση.';

}

Ακολουθούμε την ίδια τεχνική και για τα άλλα δύο εικονίδια για να έχουμε μια μικρή επεξήγηση για την λειτουργία του καθενός.

3.2 Εναλλαγή των ερωτήσεων.

Ένα ακόμα σημαντικό χαρακτηριστικό της εφαρμογής είναι η

εναλλαγή των ερωτήσεων. Οι ερωτήσεις που καλείται να απαντήσει ο

χρήστης εμφανίζονται μπροστά του με την σειρά, μία κάθε φορά και χωρίς

να χρειαστεί να μεταφερθεί σε άλλη σελίδα. Διαφορετικά θα είχαμε έναν

3 Ανάπτυξη της εφαρμογής.

Σελ. 26 από 135

μεγάλο αριθμό ερωτήσεων σε μία σελίδα ο οποίος μπορεί να ξένιζε τον χρήστη ή θα είχαμε συνεχόμενα redirects σε σελίδες κάτι το οποίο θα κούραζε τον χρήστη. Με την εναλλαγή των ερωτήσεων στην ίδια σελίδα ο χρήστης επικεντρώνεται σε μία ερώτηση χωρίς να σκέφτεται τον συνολικό αριθμό που μπορεί να τον απωθήσει και δεν χρειάζεται να υποστεί τα πολλά και ενοχλητικά redirects.

Εικόνα 3.2 Η διάσταση του div που περιέχει τις ερωτήσεις, δανεισμένη από την αρχική

σελίδα.

Για την επίτευξη αυτής της εναλλαγής χρησιμοποιήθηκε ένα script

της JavaScript σε συνδιασμό με μια συγκεκριμένη δομή των ερωτήσεων

στην HTML. Κάθε ερώτηση βρίσκεται σε ένα div tag και όλα τα div tags

βρίσκονται μέσα στην form με την οποία γίνεται το post. Χρησιμοποιώντας

την ιδιότητα position τα div tags είναι τοποθετημένα το ένα πάνω στο άλλο

και χρησιμοποιώντας την ιδιότητα visibility εμφανίζεται το div με την

ερώτηση την οποία καλείται να απαντήσει ο χρήστης κάθε φορά. Για να

αλλάξει το visibility του κάθε div αλλάζει το class του από το JavaScript

Πτυχιακή εργασία του Βασίλη Ιστικόπουλου.

Σελ. 27 από 135

που αναφέρθηκε παραπάνω. Τα 2 classes, ένα για να εμφανίζεται το div και ένα για να είναι κρυφό, βρίσκονται παρακάτω.

Το class Main_body ορίζει τις ιδιότητες του div που προβάλλεται.

.Main_body {

font:"Times New Roman", Times, serif;

font-size: 15px;

color:#000000;

width: 700px;

height: 350px;

text-align:left;

line-height:25px;

position:absolute;

top:265px;

left:10px;

background-color:#B9DFF8;

z-index:2;

}

Το class hidden ορίζει τις ιδιότητες των κρυμμένων div, η μόνη διαφορά των δύο class είναι η ιδιότητα visibility η οποία στο class hidden είναι hid- den.

.hidden {

visibility:hidden;

font-size: 15px;

width: 700px;

height: 350px;

text-align:left;

line-height:25px;

3 Ανάπτυξη της εφαρμογής.

Σελ. 28 από 135

position:absolute;

top:265px;

left:10px;

background-color:#B9DFF8;

}

Η φόρμα που περιέχει τα div tags με τις ερωτήσεις διαλέγεται βάση της επαγγελματικής κατάστασης του χρήστη την οποία έχει επιλέξει σε προηγούμενη σελίδα.

<form action="empost.php" method="POST" name="emform">

<input type="hidden" name="aem" value="'.$aem.'">

<div id="38" class="Main_body"><strong> Ευχαριστούμε για την συμπλήρωση, πατήστε παρακάτω για να ολοκληρώσετε την διεργασία και να μεταφερθείτε στην αρχική σελίδα.</strong><br /><br /><input type="submit" value="Αποστολή Απαντήσεων" />

</div>

<div id="37" class="Main_body">

<em><strong>37.<br />Έχετε ήδη σκεφτεί να δημιουργήσετε δική σας επιχείρηση;</strong></em><br /><br />Ναι , αλλά δεν αισθάνομαι ώριμος/

η<input type="radio" name="em37" value="1"/><br />Ναι , αλλά πρέπει πρώτα να αποκτήσω καλύτερη επαγγελματική εμπειρία<input type="radio"

name="em37" value="2"/><br />Ναι , αλλά δεν έχω το κεφάλαιο που χρειάζεται για να ξεκινήσω<input type="radio" name="em37" val- ue="3"/><br />Ναι, αλλά δεν έχω δίκτυο πιθανών πελατών<input type="radio" name="em37" value="4"/><br />Ναι, αλλά δεν έχω τις απαραίτητες γνώσεις και πληροφορίες<input type="radio" name="em37"

value="5"/><br />Οχι<input type="radio" name="em37" value="6"/>

</div>

. . .

<div id="1" class="Main_body">

Πτυχιακή εργασία του Βασίλη Ιστικόπουλου.

Σελ. 29 από 135

<em><strong>1.<br /> Ετος εισαγωγής</strong></em><input type="text"

name="em1a" maxlenght="4"/><br /><em><strong>Ετος και μήνας αποφοίτησης</strong></em><br /> <input type="text" name="em1b"

maxlenght="2"/>/<input type="text" name="em1c" maxlenght="4"/>

</div>

</form>

Τα id των div είναι αριθμημένα σύμφωνα με τον αριθμό της ερώτησης για ευκολία στην επανάληψη του JavaScript. Όλα τα divs έχουν αρχικά την class Main_body αλλά δεν φένονται γιατί είναι τοποθετημένα στο ίδιο σημείο. Χρησιμοποιείται το type=”hidden” για να περαστεί το user name του χρήστη στο php αρχείο που περνάει τις απαντήσεις στην βάση και κάνει την συσχέτιση τους με τον εκάστοτε χρήστη. Κάθε κατηγορία ερωτήσεων έχει την δική της φόρμα η οποία ενεργοποιεί το αντίστοιχο php αρχείο.

Το script της JavaScript το οποίο διαχειρίζεται την εμφάνιση των ερωτήσεων βρίσκεται παρακάτω.

var i=0;

var y=0;

var z=0;

function ChangeVisibility () {

i=i+1;

if (i<38) {

var _main = document.getElementById(i);

z=i+1;

for (z=i+1; z<39; z++) {

_main.className = 'hidden';

}

}

3 Ανάπτυξη της εφαρμογής.

Σελ. 30 από 135

}

function ChangeVisibility2 () {

if (i>0) {

var _main = document.getElementById(i);

for (y=i; y>0; y--) {

_main.className = 'Main_body';

} i=i-1;

} }

Η μεταβλητή i είναι ο μετρητής των ερωτήσεων/div tags. Χρησιμοποιώντας το “var _main = document.getElementById(i);” και αυξάνοντας ή μειώνοντάς το i κατά 1, βρισκόμαστε στην επόμενη ή προηγούμενη ερώτηση από αυτήν που βλέπει ο χρήστης. Το script περιέχει 2 functions, το ChangeVisibility και το ChangeVisibility2 τα οποία εμφανίζουν την επόμενη και την προηγούμενη ερώτηση αντίστοιχα. Με την επανάληψη

“for (z=i+1; z<39; z++)” μεταφερόμαστε στις επόμενες ερωτήσεις από αυτήν που θέλει να δει ο χρήστης και αλλάζουμε το class των div με το

“_main.className = 'hidden';” ώστε να τις κρύψουμε για να φαίνεται η κατάλληλη ερώτηση. Το funtion ChangeVisibility ενεργοποιείται από το κουμπί “Επόμενο”. Το κουμπί “Προηγούμενο” ενεργοποιεί την function ChangeVisibility2 η οποία εμφανίζει την προηγούμενη ερώτηση από αυτήν στην οποία βρίσκεται ο χρήστης. Με την επανάληψη “ for (y=i; y>0; y--)”

μεταφερόμαστε στις προηγούμενες ερωτήσεις και αλλάζοντας πάλι το

class με το “ _main.className = 'Main_body';” κάνουμε visible τις

προηγούμενες ερωτήσεις οι οποίες εμφανίζονται πάνω από την ερώτηση

στην οποία βρίσκεται ο χρήστης. Λόγω της τοποθέτησης των div tags στο

Πτυχιακή εργασία του Βασίλη Ιστικόπουλου.

Σελ. 31 από 135

ίδιο σημείο ο χρήστης βλέπει μόνο μία ερώτηση κάθε φορά μιας και τα divs που περιέχουν όλες τις προηγούμενες είναι μεν visible αλλά βρίσκονται από κάτω από την κατάλληλη ερώτηση.

Το τελευταίο div σε κάθε φόρμα περιέχει το submit button το οποίο

στέλνει τις απαντήσεις σε ένα php αρχείο αντίστοιχο με την κατηγορία των

ερωτήσεων για να γίνει η είσοδος των απαντήσεων στην βάση δεδομένων.

Σελ. 32 από 135

4 ΧΡΗΣΗ ΤΗΣ ΕΦΑΡΜΟΓΗΣ

4.1 Χρήση από απλό χρήστη.

Η αρχική σελίδα καλωσορίζει τον χρήστη με ένα κείμενο το οποίο εξηγεί τον σκοπό ύπαρξης της εφαρμογης. Όλες οι σελίδες, εκτός από τις σελίδες με τα αποτελέσματα, είναι σχεδιασμένες με την ίδια φιλοσοφία.

Ένα κεντρικό μέρος οπού εμφανίζονται οι ερωτήσεις και οι διάφορες φόρμες, τα κουμπία με τις επιλογές και ένα παράρτημα με διάφορα νέα.

Εικόνα 4.1 Η αρχική σελίδα.

Το κείμενο παροτρύνει τον χρήστη να πατήσει το κουμπί που θα

τον μεταφέρει στο ερωτηματολόγιο. Μόλις ο χρήστης πατήσει το κουμπί

εμφανίζεται μια φόρμα στην οποία ζητείται να συμπληρώσει το όνομα

χρήστη που έχει καθώς και τον προσωπικό κωδικό πρόσβασης που του

έχει παραχωρηθεί. Επίσης του δίνεται η δυνατότητα να στείλει ένα e-mail

στην γραμματεία του τμήματος αιτούμενος την ανάκτηση του κωδικού του

σε περίπτωση που τον έχει ξεχάσει

Πτυχιακή εργασία του Βασίλη Ιστικόπουλου.

Σελ. 33 από 135

Εικόνα 4.2 Φόρμα συμπλήρωσης στοιχείων εισόδου.

Εικόνα 4.3 Φόρμα αποστολής e-mail.

Αφού ο χρήστης συμπληρώσει σωστά τα στοιχεία εισόδου και

πατήσει το κουμπί “Eίσοδος” θα κληθεί να επιλέξει την επαγγελματική

κατάσταση στην οποία βρίσκεται ώστε να του εμφανισθεί η κατάλληλη

φόρμα ερωτήσεων.

4 Χρήση της εφαρμογής.

Σελ. 34 από 135

Εικόνα 4.4 Φόρμα επαγγελματικής κατάστασης.

Σε περίπτωση εισαγωγής λάθος στοιχείων καλείται να εισάγει ξανά τα στοιχεία του ή να στείλει αίτηση για ανάκτηση του κωδικού του.

Εικόνα 4.5 Ενημέρωση εισαγωγής λανθασμένων στοιχείων.

Μετά την επιλογή της επαγγελματικής κατάστασης ο χρήστης μεταφέρεται στην κατηγορία των ερωτήσεων που καλείται να απαντήσει.

Μια μόνο ερώτηση είναι εμφανής στον χρήστη κάθε στιγμή αλλά μπορεί

να αλλάξει τις ερωτήσεις με τα κουμπιά “Προηγούμενο” και “Επόμενο” που

βρίσκονται κάτω από τις ερωτήσεις. Μόλις τελειώσουν οι ερωτήσεις της

κατηγορίας εμφανίζεται ένα κείμενο το οποίο ευχαριστεί τον χρήστη για

την συμπλήρωση και του ζητά να πατήσει το κουμπί “Αποστολή

Ερωτήσεων” το οποίο θα στείλει τις απαντήσεις του στην βάση και θα τον

μεταφέρει στην αρχική σελίδα της εφαρμογής.

Πτυχιακή εργασία του Βασίλη Ιστικόπουλου.

Σελ. 35 από 135

Εικόνα 4.6 Ο τρόπος εμφάνισης των ερωτήσεων.

Εικόνα 4.7 Ευχαριστίες και το κουμπί για την αποστολή.

4.2 Χρήση από διαχειριστή συστήματος.

Στα εικονίδια που απαρτίζουν τις επιλογές του χρήστη υπάρχει και

το εικονίδιο για είσοδο ως διαχειριστής συστήματος. Οι διαχειριστές έχουν

μπορούν να δουν τα αποτελέσματα των ερωτήσεων του ερωτηματολογίου

ανάλογα με την κατηγορία των ερωτηθέντων. Όπως και στον απλό χρήστη

υπάρχει μια φόρμα για την εισαγωγή των απαραίτητων στοιχείων για την

αναγνώριση του χρήστη ως διαχειριστή. Σε περίπτωση λάθους

εμφανίζεται το αντίστοιχο ενημερωτικό μήνυμα μαζί με την φόρμα για

επανάληψη της διαδικασίας.

4 Χρήση της εφαρμογής.

Σελ. 36 από 135

Εικόνα 4.8 Φόρμα συμπλήρωσης στοιχείων εισόδου διαχειριστή.

Με την είσοδο του, ο διαχειριστής καλείται να επιλέξει την κατηγορία επαγγελματικής κατάστασης των ερωτηθέντων των οποίων τις απαντήσεις επιθυμεί να δει. Κάτω από τις κατηγορίες αναγράφεται το ποσοστό των ερωτηθέντων που ανήκει στην καθεμία.

Εικόνα 4.9 Κατηγορίες επαγγελματικής κατάστασης.

Ανάλογα με την επιλογή της επαγγελματικής κατάστασης, ο

διαχειριστής μεταφέρεται στην σελίδα με τα αποτελέσματα της κατηγορίας

που τον ενδιαφέρει. Στις σελίδες με τις απαντήσεις, υπάρχουν όλες οι

ερωτήσεις που αφορούν την κάθε κατηγορία, μαζί με όλες τις πιθανές

απαντήσεις. Κάτω από κάθε απάντηση υπάρχει ένα πλαίσιο που

αναγράφει το ποσοστό που συγκέντρωσε η κάθε απάντηση.

Πτυχιακή εργασία του Βασίλη Ιστικόπουλου.

Σελ. 37 από 135

Εικόνα 4.10 Σελίδα αποτελεσμάτων.