ΑΝΑΠΤΥΞΗ WEB ΕΦΑΡΜΟΓΗΣ ΚΤΗΜΑΤΟΜΕΣΙΤΙΚΗΣ ΕΠΙΧΕΙΡΗΣΗΣ

ΤΕΙ ΚΑΒΑΛΑΣ ΣΧΟΛΗ ΔΙΟΙΚΗΣΗΣ ΚΑΙ ΟΙΚΟΝΟΜΙΑΣ ΤΜΗΜΑ ΔΙΑΧΕΙΡΙΣΗΣ ΠΛΗΡΟΦΟΡΙΩΝ ΑΝΑΠΤΥΞΗ WEB ΕΦΑΡΜΟΓΗΣ ΚΤΗΜΑΤΟΜΕΣΙΤΙΚΗΣ ΕΠΙΧΕΙΡΗΣΗΣ ΜΑΝΔΑΛΟΥ ΓΕΩΡΓΙΑ ΝΤΟΥΡΛΙΑ ΕΙΡΗΝΗ Σεπτέμβριος 2009 ΕΠΟΠΤΗΣ ΚΑΘΗΓΗΤΗΣ Παππάς Δημοσθένης Σελίδα 1 από 133

Πρόλογος H παρούσα πτυχιακή εργασία αφορά την ανάπτυξη μιας web εφαρμογής, με τη χρήση php και mysql, μιας κτηματομεσιτικής επιχείρησης. Στο πλαίσιο αυτό γίνεται μια συνοπτική περιγραφή όλης της διαδικασίας του σχεδιασμού και της λειτουργίας της εφαρμογής. Η προσπάθεια επικεντρώθηκε στο να δοθεί όσο γινόταν πιο απλά η υλοποίηση και η λειτουργία της web αυτής εφαρμογής. Χρειάστηκε λοιπόν, οργανωμένος και πραγραμματισμένος σχεδιασμός ώστε να δημιουργηθεί μια εφαρμογή η οποία θα είναι εύχρηστη και κατανοητή από τον χρήστη. Επιπλέον, χρειάστηκε η δημιουργία ένός βιβλίου το οποίο δεν θα αφήνει κενά, και θα εξηγεί αναλυτικά την εφαρμογή στον αναγνώστη ακόμη και αν δεν κατέχει τις απαραίτητες γνώσεις για κάτι τέτοιο. Τελείωνοντας, θα θέλαμε να ευχαριστήσουμε τον επιβλέποντα καθηγητή αυτής της εργασίας κύριο Δημοσθένη Παππά, για την παρότρυνση και τις επισημάνσεις του σε κάθε στάδιο περάτωσης αυτής της δουλειάς. Η βοήθεια του υπήρξε πολύ σημαντική. Σελίδα 3 από 133

Πίνακας Περιεχομένων Πρόλογος...3 Πίνακας Περιεχομένων...5 Εισαγωγή...7 Κεφάλαιο 1...9 Μια Γρήγορη Επισκόπηση...9 Κεφάλαιο 2...11 Στόχοι Και Απαιτήσεις...11 2.1 Το Αντικείμενο...11 2.2 Τα Προβλήματα...11 2.3 Οι Λόγοι Δημιουργίας Της Εφαρμογής...11 2.4 Η Παρούσα Κατάσταση & Η Εξέλιξη...12 2.5 Οι Απαιτήσεις...12 Κεφάλαιο 3...13 Γ ενικά Γ ια Την Εφαρμογή...13 3.1 Ο Τρόπος Λειτουργίας...13 3.2 Η Βάση Δεδομένων ( MySQL & XAMPP)...13 3.3 Το Περιβάλλον Της Εφαρμογής & Η Σύνδεση Με Την Βάση...14 (PHP & HTML)...14 3.4 Η Λειτουργία Της Εφαρμογής...15 3.4.1 Ο Υπάλληλος...15 3.4.2 Ο Πελάτης...15 3.5 Ασφαλής Λειτουργία Της Εφαρμογής...15 Κεφάλαιο 4...17 Εγχειρίδιο Χρήσης...17 4.1 Απαιτήσεις Συστήματος Για Την Εγκατάσταση Του Xampp:...17 4.2 Εγκαθιστώντας Το Xampp:...17 4.3. Διαχείριση Της Εφαρμογής:...19 4.3.1 Σύνδεση Υπάλληλου...20 Κεφάλαιο 5...23 Σχεδιασμός και Κώδικας...23 5.1 Η Αρχική Σελίδα Των Πελατών...23 5.1.1 Πώς δημιουργήθηκε η Admin:...23 5.2 Το Κεντρικό Μενού...41 5.3 Το Μενού Επιλογών...45 5.4 To Menu Του Διαχειριστή...59 Κεφάλαιο 6...103 Προβλήματα & Δυσκολίες...103 Κεφάλαιο 7...105 Συμπεράσματα...105 ΠΑΡΑΡΤΗΜΑ Α...107 Λεξικό Δεδομένων & Τεκμηρίωση των γνωρισμάτων...107 ΠΑΡΑΡΤΗΜΑ Β...111 ΕΝΝΟΙΟΛΟΓΙΚΟΣ ΣΧΕΔΙΑΣΜΟΣ ΒΑΣΗΣ ΔΕΔΟΜΕΝΩΝ-ΜΟΣ...111 Τεκμηρίωση των τύπων οντοτήτων...112 Προσδιορισμός των τύπων συσχετίσεων...112 Σελίδα 5 από 133

Πτυχιακή Εργασία Της Γεωργίας Μανδάλου & Ειρήνης Ντούρλια Καθορισμός των περιορισμών πληθικότητας και συμμετοχής των τύπων συσχετίσεων...113 Τεκμηρίωση των τύπων συσχετίσεων...117 ΛΟΓΙΚΗ ΣΧΕΔΙΑΣΗ...120 ΦΥΣΙΚΗ ΣΧΕΔΙΑΣΗ...121 XAMPP 1.7... 121 phpmyadmin 3.1.1... 121 MySQL client version: 5.1.30... 121 Έκδοση PHP: 5.2.8...121 ΠΑΡΑΡΤΗΜΑ Γ: ΤΑ ΑΡΧΕΙΑ CSS...127 Βιβλιογραφία...133 Σελίδα 6 από 133

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

Κεφάλαιο 1 Μια Γρήγορη Επισκόπηση Σε αυτό το κεφάλαιο δίνεται μια γρήγορη ματιά της εφαρμογής, των τεχνικών και των γλωσσών προγραμματισμού που χρησιμοποιήθηκαν καθώς και μια περίληψη των επόμενων κεφαλαίων. Η εφαρμογή και πιο συγκεκριμένα η υλοποίησή της θα μπορούσε κανείς να πει, γενικά ότι αποτελείται από πέντε μέρη. Το πρώτο μέρος αφορά την έρευνα σχετικά με τον τρόπο λειτουργίας παρόμοιων εταιρειών και την καταγραφή όλων των δυνατών λύσεων σχετικά με τα προβλήματα που παρουσίαζαν. Το δεύτερο μέρος αφορά το σχεδιασμό της βάσης δεδομένων καθώς και την επιλογή του τρόπου σχεδίασης της. Το τρίτο μέρος αφορά τη δημιουργία της βάσης δεδομένων. Το τέταρτο τη δημιουργία των σελίδων και τέλος το πέμπτο και τελευταίο μέρος τη <<συνένωση>> ή αλλιώς τη συνεργασία των δύο παραπάνω. Ο τρόπος με τον οποίο κατασκευάστηκαν τα παραπάνω θα αναλυθεί στα επόμενα κεφάλαια. Πιο συγκεκριμένα: Στο 2ο κεφάλαιο θα αναλυθούν λεπτομερώς, το αντικείμενο της εφαρμογής, οι λόγοι που οδήγησαν στην δημιουργία της, τα προβλήματα παρόμοιων εταιριών, οι επιλογές που έγιναν ως προς την επίλυσή τους στην παρούσα εφαρμογή καθώς και το αν και κατά πόσο εξελίχθηκαν με το χρόνο οι τρόποι λειτουργίας. Στο 3ο κεφάλαιο αναλύεται γενικότερα ο τρόπος λειτουργίας της εφαρμογής, ο σχεδιασμός της βάσης, το περιβάλλον της εφαρμογής και η σύνδεση της με αυτή, τα μέρη και ο τρόπος υλοποίησής τους. Στο 4ο κεφάλαιο θα παρουσιαστεί το εγχειρίδιο χρήσης αναλυτικά, ο τρόπος δηλαδή με τον οποίο μπορούν να εγκατασταθούν τα προγράμματα που χρησιμοποιήθηκαν στην παρούσα εφαρμογή καθώς και μια γρήγορη ματιά στη διαχείριση της από την πλευρά του πελάτη και του υπαλλήλου. Στο 5ο κεφάλαιο. Θα παρουσιαστούν αναλυτικά τα σημαντικότερα μέρη της εφαρμογής, καθώς και ο κώδικας με τον οποίο δημιουργήθηκαν, Σελίδα 9 από 133

1 Μια Γρήγορη Επισκόπηση συνοδευόμενος από σχόλια και φωτογραφίες για την καλύτερη κατανόηση του. Στο 6ο κεφάλαιο θα παρουσιαστούν τα προβλήματα που προέκυψαν, οι δυσκολίες υλοποίησης όπως επίσης και οι λόγοι που οδήγησαν στην επιλογή των συγκεκριμένων εργαλείων και τεχνικών. Στο 7ο κεφάλαιο περιέχονται τα συμπεράσματα από την αξιολόγηση της παρούσας δουλειάς καθώς και προτάσεις και ιδέες για περαιτέρω ανάπτυξη της συγκεκριμένης εφαρμογής. Τέλος, ακολουθούν συνοπτικά τα επιμέρους παραρτήματα. 1.1 ΠΑΡΑΡΤΗΜΑΤΑ: Παράρτημα Α: Λεξικό Δεδομένων του συστήματος. Παράρτημα Β: Τεκμηρίωση, περιγραφή των πινάκων, εννοιολογικός, λογικός και φυσικός σχεδιασμός της βάσης δεδομένων, διαγράμματα ΜΟΣ. Παράρτημα Γ: Τα αρχεία CSS. Σελίδα 10 από 133

Κεφάλαιο 2 Στόχοι Και Απαιτήσεις Στο κεφάλαιο αυτό θα πραγματοποιηθεί μια αναλυτική παρουσίαση του αντικειμένου της εφαρμογής, των προβλημάτων παρόμοιων επιχειρήσεων, της παρούσας κατάστασης και εξέλιξης τους, καθώς επίσης και ανάλυση των λόγων οι οποίοι οδήγησαν στη δημιουργία της εφαρμογής και των απαιτήσεων της. 2.1 Το Αντικείμενο Στόχος της παρούσας εφαρμογής είναι να καταφέρει την όσο πιο δυνατόν καλύτερη διαχείριση μιας κτηματομεσιτικής εταιρείας από την πλευρά του υπαλλήλου και να επιτύχει επίσης, την εξέλιξη των ήδη υπαρχόντων εργαλείων και τεχνικών καθώς και την εισαγωγή νέων συνδυασμένα σε μία εφαρμογή. Επιπλέον, να διευκολύνει την πρόσβαση του πελάτη με την εταιρία, παρέχοντας του, όσο το δυνατόν καλύτερη και γρηγορότερη εξυπηρέτηση. 2.2 Τα Προβλήματα Συνήθη προβλήματα των παρόμοιων εταιρειών: 1) Δυσκολία πρόσβασης των πελατών στις υπηρεσίες. 2) Απουσία έγκυρης και άμεσης πληροφόρησης τους. 3) Μη ύπαρξη γρήγορων υπηρεσιών-εργαλείων διαχείρισης, οργάνωσης και εποπτείας της επιχείρησης. 2.3 Οι Λόγοι Δημιουργίας Της Εφαρμογής Οι λόγοι που οδήγησαν στην ανάπτυξη της παρούσας εφαρμογής βασίστηκαν στα ακόλουθα: 1) Βελτίωση του τρόπου αναζήτησης & εύρεσης ενός χώρου. 2) Βελτίωση του τρόπου λειτουργίας: α)της διαχείρισης αιτήσεων των πελατών. Καταγραφή των στοιχείων του πελάτη μέσω αποστολής αίτησης για κάποιο χώρο. Σελίδα 11 από 133

2 Στόχοι Και Απαιτήσεις β)της διαχείρισης των διαθέσιμων χώρων. στοιχείων του κάθε χώρου και ταυτόχρονη ενημέρωση. Καταγραφή των γ) Της διαχείρισης των ιδιοκτητών. Καταγραφή των στοιχείων των ιδιοκτητών και επεξεργασία αυτών. 2.4 Η Παρούσα Κατάσταση & Η Εξέλιξη Ρίχνοντας μια γρήγορη ματιά στους λόγους για την δημιουργία της εφαρμογής εύκολα μπορεί κανείς να συμπεράνει και τα περισσότερα προβλήματα που καλείται να διορθώσει. Πρέπει να τονιστεί πως οι περισσότερες εταιρείες στον χώρο λειτουργούν με πανομοιότυπο τρόπο. Παρόλα αυτά όμως παρουσιάζεται έλλειψη στον τρόπο εύρεσης ενός χώρου καθώς ο επισκέπτης παρόμοιων σελίδων μπορεί να δει στοιχεία για τους υπάρχοντες χώρους χωρίς όμως να μπορεί να προσδιορίσει ο ίδιος τα απαιτούμενα στοιχεία που θέλει ο χώρος να έχει. Έτσι αναγκάζεται να ψάχνει μέσα από δεκάδες σπίτια και χώρους εργασίας τα οποία δεν πληρούν τις δικές του προϋποθέσεις και καταλήγουν να εγκαταλείπουν πολλές φορές την προσπάθεια για αναζήτηση. Οι εταιρίες λοιπόν, χάνουν υποψήφιους πελάτες και οι πελάτες τους χρόνο χωρίς κανένα αποτέλεσμα. 2.5 Οι Απαιτήσεις Σύμφωνα λοιπόν με τα παραπάνω χρειάστηκε μια εφαρμογή που να μπορεί να διαχειριστεί όσο το δυνατόν καλύτερα εκτός από τους διαθέσιμους χώρους κατοικιών και χώρων εργασίας της εταιρείας και τις αιτήσεις των πελατών καθώς και τα στοιχεία των ιδιοκτητών. Μια εφαρμογή <<ευέλικτη>> που να μπορεί εύκολα να ανανεωθεί αλλά και να βρίσκει εφαρμογή όχι μόνο σε ένα συγκεκριμένο κατάστημα της αλλά σε οποιοδήποτε κατάστημα όπου κι αν είναι αυτό. Με λίγα λόγια μια εφαρμογή που όχι μόνο να λύνει τα προαναφερθέντα προβλήματα αλλά που να μπορεί να μετατρέψει την εταιρεία σε μια καλά οργανωμένη επιχείρηση και πάνω από όλα έτοιμη στην άμεση και γρήγορη εξυπηρέτηση του πελάτη. Σελίδα 12 από 133

Κεφάλαιο 3 Γενικά Για Την Εφαρμογή Στο παρόν κεφάλαιο θα αναλυθεί εκτενέστερα η λειτουργία της εφαρμογής, των μερών, των υπηρεσιών της και ο τρόπος υλοποίησης τους. 3.1 Ο Τρόπος Λειτουργίας Η κατασκευή και η σωστή λειτουργία της εφαρμογής βασίστηκε πάνω σε δύο γλώσσες προγραμματισμού. Την MySQL και την PHP. Να αναφερθεί επίσης και μια τρίτη γλώσσα η HTML, η οποία χρησιμοποιήθηκε μόνο για την καλαισθησία των σελίδων και την χρήση αρχείου CSS (Cascading Style Sheets). Όπως ήδη προαναφέρθηκε, περνώντας πλέον από την έρευνα στην κατασκευή, υπήρξε η ανάγκη νοητού διαχωρισμού της εφαρμογής σε τρία μέρη. Την κατασκευή της βάσης δεδομένων, την δημιουργία των σελίδων και τέλος την συνένωση των δύο. 3.2 Η Βάση Δεδομένων ( MySQL & XAMPP) Όσον αφορά την κατασκευή της βάσης χρησιμοποιήθηκε η γλώσσα MySQL σε συνεργασία με το πρόγραμμα XAMPP το οποίο βοήθησε ως εικονικός Server δηλαδή ως το μέσο για την δημιουργία και διαχείριση της Βάσης Δεδομένων. Αρχικά, μέσω εντολών της MySQL δημιουργήθηκαν οι πίνακες της βάσης οι οποίοι και αντιπροσωπεύουν όλες τις σημαντικές οντότητες της εφαρμογής και είναι απαραίτητοι για την σωστή λειτουργία της. Κάθε πίνακας της βάσης αποτελείται από πεδία (κλειδιά) που αντιπροσωπεύουν μια ιδιότητα, για παράδειγμα το όνομα ή το επώνυμο ενός πελάτη. Όπως επίσης και από πρωτεύοντα κλειδιά, πεδία δηλαδή τα οποία είναι μοναδικά για κάθε εγγραφή του πίνακα. Κάθε πεδίο αντιμετωπίζεται σαν μια μεταβλητή διαφορετικού τύπου κάθε φορά, ανάλογα με το είδος και τον σκοπό που εξυπηρετεί. Για παράδειγμα το όνομα (NAME) θα μπορούσε να είναι Σελίδα 13 από 133

Πτυχιακή Εργασία Της Γεωργίας Μανδάλου & Ειρήνης Ντούρλια αλφαριθμητικό 10, 15, 20 ή και 100 χαρακτήρων, ανάλογα. Ενώ ο κωδικός του πελάτη θα μπορούσε να είναι ακέραιος χ ψηφίων. Αφού λοιπόν επιλέχθηκαν οι πίνακες, έπρεπε να επιλεγούν τα πρωτεύοντα κλειδιά (primary key), αλλά και τα τυχόν ξένα κλειδιά (foreign key), τα κλειδιά δηλαδή τα οποία ενώ υπάρχουν σε έναν πίνακα ως πρωτεύοντα, υπάρχουν και σε έναν άλλο ως απλά, αλλά με τις ίδιες ακριβώς τιμές. Από την στιγμή που υπάρχουν ξένα κλειδιά, επόμενο βήμα είναι να καθοριστούν οι περιορισμοί (constraint) για τα ίδια αλλά και για τον τρόπο «συμπεριφοράς >> τους σε περίπτωση διαγραφής ή ενημέρωσής τους. Η βάση δεδομένων, ουσιαστικά έτοιμη για την εγγραφή των δεδομένων. μετά την υλοποίηση των παραπάνω είναι 3.3 Το Περιβάλλον Της Εφαρμογής & Η Σύνδεση Με Την Βάση (PHP & HTML) Αφού λοιπόν κατασκευάστηκε η Βάση (ο χώρος δηλαδή όπου θα αποθηκεύονται τα δεδομένα), χρειάστηκε η δημιουργία ενός φιλικού προς τον χρήστη περιβάλλοντος για την εισαγωγή, την διαγραφή, την εύρεση και την τροποποίηση των στοιχείων (δεδομένων). Η ανάπτυξη του παραθυρικού περιβάλλοντος βασίστηκε στην χρήση της PHP και της HTML. Το στυλ καθώς και η τελική μορφή των παραθύρων επιλέχθηκε και σχεδιάστηκε κυρίως με την χρήση της HTML και την βοήθεια των προγραμμάτων Macromedia Dreamweaver 8, Fireworks και Microsoft Front Page. Αναφέρεται επίσης ότι το λογότυπο (logo) της εφαρμογής δημιουργήθηκε με το πρόγραμμα AAA Logo. Πέρα όμως από την κατασκευή των σελίδων, όσο αφορά το στυλ, έπρεπε να παρέχεται η δυνατότητα της σύνδεσής τους με την βάση για την υλοποίηση των εγγραφών, αναζητήσεων, διαγραφών, τροποποιήσεων των δεδομένων αλλά και της ασφαλούς αλληλεπίδρασης των αιτήσεων του χρήστη και της ασφάλειας των δεδομένων. Σε αυτό το σημείο καθοριστικό ρόλο έπαιξε η χρήση της PHP, καθώς μέσω αυτής δημιουργήθηκαν οι συνδέσεις και οι προδιαγραφές ασφαλών τροποποιήσεων, εισαγωγών και διαγραφών των δεδομένων. Όλα τα αιτήματα (queries) πραγματοποιήθηκαν με την χρήση MySQL εντολών ενσωματωμένων μέσα στην PHP. Σελίδα 14 από 133

5 Σχεδιασμός και Κώδικας 3.4 Η Λειτουργία Της Εφαρμογής Δύο από τους βασικούς <<χρήστες>> της εφαρμογής είναι ο Πελάτης και ο Υπάλληλος (Διαχειριστής) της εταιρείας. Ακολουθεί ένα πιθανό σενάριο της χρήσης της εφαρμογής. 3.4.1 Ο Υπάλληλος Ο υπάλληλος της επιχείρησης ο οποίος καταχωρεί μέσω της εφαρμογής στην βάση δεδομένων όλα τα απαραίτητα στοιχεία ενός χώρου και του ιδιοκτήτη του, ενώ μπορεί ανά πάσα στιγμή να ελέγχει για τυχόν ενδιαφερόμενους πελάτες μέσω προβολής των αιτήσεων. Μπορεί επίσης: α) Να ενημερωθεί για την πιθανή αίτηση και β) Να ενημερώσει την βάση για τυχόν τροποποιήσεις (πώληση ενός χώρου ή αλλαγή κάποιων στοιχείων αυτού και του ιδιοκτήτη) Να αναφέρουμε επίσης ότι ένας υπάλληλος μπορεί ανά πάσα στιγμή γενικά να εισάγει ή να διαγράψει ή να τροποποιήσει και να βρει χώρους, ιδιοκτήτες και αιτήσεις. 3.4.2 Ο Πελάτης Ένας πελάτης μπορεί μπαίνοντας στην σελίδα (εφαρμογή) της εταιρείας να ψάξει για τον συγκεκριμένο χώρο που τον ενδιαφέρει (με βάση την πόλη, την τιμή ενοικίου ή πώλησης, του ορόφου και των τετραγωνικών) και αποστέλλοντας μια αίτηση με τα στοιχεία του, να εκδηλώσει στην εταιρία το ενδιαφέρον του για τον συγκεκριμένο χώρο. 3.5 Ασφαλής Λειτουργία Της Εφαρμογής Για την επίτευξη της ασφαλούς λειτουργίας της εφαρμογής δημιουργήθηκαν οι παρακάτω περιορισμοί: Α) Οι Αιτήσεις μπορούν να διαγραφούν μόνο εφόσον έχουν ελεγχθεί από τον υπάλληλο. Β) Οι Χώροι μπορούν να διαγραφούν μόνο εφόσον έχουν πωληθεί. Γ) Οι Ιδιοκτήτες μπορούν να διαγραφούν μόνο εφόσον έχουν πουληθεί οι χώροι οι οποίοι τους ανήκουν. Όπως γίνεται λοιπόν αντιληπτό η έλλειψη καλής και οργανωμένης σχεδίασης θα μπορούσε να οδηγήσει σε πολλά και ίσως μη αναστρέψιμα Σελίδα 15 από 133

Πτυχιακή Εργασία Της Γεωργίας Μανδάλου & Ειρήνης Ντούρλια λάθη τα οποία θα ήταν δύσκολο ή έστω χρονοβόρο να διορθωθούν κατά τη δημιουργία της εφαρμογής. Σελίδα 16 από 133

Κεφάλαιο 4 Εγχειρίδιο Χρήσης 4.1 Απαιτήσεις Συστήματος Για Την Εγκατάσταση Του Xampp: Windows Xp ή Vista 64 Mb Ram 200 Mb Ελεύθερος Χώρος Στον Δίσκο Flash Player v.9 και πάνω 4.2 Εγκαθιστώντας Το Xampp: Αρχικά κρίνεται αναγκαία η εγκατάσταση του XAMPP, το οποίο μπορεί να βρεθεί δωρεάν στην σελίδα http://apachefriends.org. Η έκδοση του xampp πρέπει να είναι από 1.7 και πάνω. Κάνοντας διπλό κλικ στο αρχείο xamppjnstalation_17.exe ξεκινάει η εγκατάσταση. Στην αμέσως επόμενη οθόνη, αφού επιλεχθεί η διαδρομή στην οποία θα γίνει η εγκατάσταση (path destination) δίνεται η δυνατότητα στον χρήστη να επιλέξει τις υπηρεσίες MySQL & Apache ώστε να ξεκινούν αυτόματα (προτείνεται). Με το τέλος της εγκατάστασης είναι πλέον δυνατή η δημιουργία και διαχείριση της βάσης. Πληκτρολογώντας στον Internet Explorer την διεύθυνση http://localhost/phpmyadmin. Εδώ, πλέον ο χρήστης μπορεί να ξεκινήσει την δημιουργία μιας νέας βάσης ή να συνεχίσει την δημιουργία μιας ήδη υπάρχουσας. Για να <<φορτωθεί>> η βάση r-estate υπάρχουν δύο τρόποι. Ο πρώτος τρόπος είναι απλώς με μεταφορά του φακέλου στον οποίο βρίσκονται τα αρχεία της βάσης, στον φάκελο c:\xampp\mysql\data κάτι το οποίο στην συγκεκριμένη περίπτωση δεν συνιστάται καθώς η βάση είναι κατασκευασμένη με την μηχανή innodb αλλά και γιατί η παραπάνω δυνατότητα αφαιρέθηκε από τις νέες εκδόσεις του xampp. Ο τρόπος αυτός μπορεί να χρησιμοποιηθεί σε παλαιότερες εκδόσεις (μέχρι v1.7) για βάσεις MyIsam. Σελίδα 17 από 133

Πτυχιακή Εργασία Της Γεωργίας Μανδάλου & Ειρήνης Ντούρλια Ο δεύτερος και πιο σωστός τρόπος είναι εφόσον ο χρήστης βρίσκετε ήδη στο phpmyadmin, να πληκτρολογήσει στο πεδίο «Δημιουργία νέας βάσης>> το όνομα της βάσης (πρέπει να είναι ακριβώς ίδιο), στην συγκεκριμένη περίπτωση <<r-estate>> και δημιουργία. Στην συνέχεια να επιλέξει την καρτέλα εισαγωγή και να κάνει upload το αρχείο db.sql το οποίο περιέχει όλες τις MySQL εντολές για την δημιουργία της βάσης. Πατώντας εκτέλεση η βάση είναι έτοιμη. Στον χρήστη δίνεται επίσης η δυνατότητα ανά πάσα στιγμή να δημιουργεί αρχεία σαν το db.sql απλώς επιλέγοντας την καρτέλα εξαγωγή και «ρίχνοντας» τα περιεχόμενα της εκτέλεσης σε ένα αρχείο text εφόσον αλλάξει την κατάληξη σε.sql. Φυσικά αυτό προϋποθέτει την δημιουργία ή ύπαρξη μιας βάσης. Για να μπορέσει στην συνέχεια να ξεκινήσει την εφαρμογή (μιας και η βάση είναι έτοιμη πλέον), ο φάκελος estates ο οποίος περιέχει όλες τις κατασκευασμένες σελίδες, μεταφέρεται στο φάκελο c:\xampp\htdocs. Πληκτρολογώντας στον Internet Explorer την διεύθυνση http://localhost/estates/admin.html πλέον βρίσκετε στην αρχική σελίδα της εφαρμογής. Παρακάτω δίνεται η μορφή της. Εικόνα 4.1 Η αρχική σελίδα: Estates ' Μ pa mpis' Ydraylika contact M EM) Categories Photos welcome to our website posted on august 25th, 2007 Σελίδα 18 από 133

5 Σχεδιασμός και Κώδικας 4.3. Διαχείριση Της Εφαρμογής: Στην αρχική σελίδα δίνονται οι παρακάτω επιλογές. Οι χρήστες μπορούν, κάνοντας κλικ σε ένα από τα κουμπιά του αριστερού menu: 1) Να αναζητήσουν τον χώρο της επιλογής του κάνοντας κλικ στο κουμπί Search For An Estate. 2) Να αποστείλουν μια αίτηση για τον χώρο που τους ενδιαφέρει κάνοντας κλικ στο κουμπί Send An Apply. 3) Να δουν όλους τους χώρους που πουλήθηκαν με τιμή μικρότερη από 100.000 ευρώ, ως τις καλύτερες αγορές, κάνοντας κλικ στο κουμπί Best Buy. 4) Οι πελάτες μπορούν επίσης να πληροφορηθούν για τον τρόπο λειτουργίας και τις υπηρεσίες της σελίδας κάνοντας κλικ στο κουμπί Help. 5) Να δουν όλες τις διαθέσιμες κατοικίες και χώρους εργασίας ανά περιοχή κάνοντας κλικ στα κουμπιά Athens Thessaloniki Patra Kavala της κατηγορίας Photos. Επίσης, κάνοντας κλικ σε ένα από τα κουμπιά της κεντρικής <<μπάρας>>, οι χρήστες μπορούν: 1) Να βρεθούν στην αρχική σελίδα της εφαρμογής κάνοντας κλικ στο κουμπί HOME. 2) Να δουν πληροφορίες που αφορούν την δημιουργία της εταιρείας κάνοντας κλικ στο κουμπί ABOUT. 3) Να πληροφορηθούν σχετικά, για όλα τα καταστήματα της εταιρείας, την τοποθεσία τους και τους υπεύθυνους κάνοντας κλικ στο κουμπί CONTACT και στην συνέχεια αν θέλουν πάνω σε μια τοποθεσία για περαιτέρω πληροφορίες. 4) Να συνδεθούν σε λογαριασμούς της εταιρείας εφόσον είναι υπάλληλοι κάνοντας κλικ στο κουμπί LOGIN. Σελίδα 19 από 133

Πτυχιακή Εργασία Της Γεωργίας Μανδάλου & Ειρήνης Ντούρλια Εικόνα 4.2 Η φόρμα Login: 4.3.1 Σύνδεση Υπάλληλου Ένας υπάλληλος μπορεί να συνδεθεί στον λογαριασμό του κάνοντας login. Δίνοντας τον σωστό κωδικό, όνομα χρήστη και τον κωδικό του καταστήματος στο οποίο ανήκει, εμφανίζεται μπροστά του το menu των υπαλλήλων. Εδώ ο υπάλληλος μπορεί να επιλέξει να διαχειριστεί: 1) Χώρους (Estates) 2) Αιτήσεις (Applies) και 3) Ιδιοκτήτες (owners) που αφορούν το κατάστημα του. Σελίδα 20 από 133

5 Σχεδιασμός και Κώδικας Εικόνα 4.3 To menu των υπαλλήλων: Όπως φαίνεται στην εικόνα 4.3 εδώ ο υπάλληλος μπορεί: 1) Να προσθέσει (Add An Estate) 2) Να διαγράψει (Delete An Estate) 3) Να τροποποιήσει (Edit An Estate) 4) Να βρει (Find An Estate) Χώρους, ιδιοκτήτες και αιτήσεις καθώς και να δει τις αντίστοιχες λίστες τους. List των χώρων και ιδιοκτητών και Check For Applies. Ανακεφαλαιώνοντας, τις δυνατότητες που παρέχονται τόσο στους υποψήφιους πελάτες όσο και στους υπαλλήλους της εταιρίας εύκολα αντιλαμβάνεται κανείς ότι η εφαρμογή παρέχει ένα φιλικό και εύχρηστο περιβάλλον και στους δύο αυτούς χρήστες. Σελίδα 21 από 133

Κεφάλαιο 5 Σχεδιασμός και Κώδικας Στο κεφάλαιο αυτό θα εξηγηθεί αναλυτικά ο τρόπος με τον οποίο δημιουργήθηκαν οι σημαντικότερες σελίδες της html και php, της εφαρμογής και πως συνδέθηκαν μεταξύ τους, δημιουργώντας μια ολοκληρωμένη web εφαρμογή. Παρακάτω παραθέτεται επίσης ολόκληρος ο κώδικας τους και φωτογραφίες με τη μορφή των σελίδων για την καλύτερη κατανόηση τους. 5.1 Η Αρχική Σελίδα Των Πελατών 5.1.1 Πώς δημιουργήθηκε η Admin: Το περιβάλλον που αντικρίζει κανείς μπαίνοντας αρχικά στην εφαρμογή δημιουργήθηκε από πέντε διαφορετικές σελίδες html, που καλούνται από την admin. Ενωμένες και στοιχισμένες λοιπόν, κατάλληλα δημιουργούν την ενιαία της εικόνα. Αυτό μπορεί εύκολα να γίνει αντιληπτό αν δει κανείς τον κώδικα της. 5.1.1.1 admin.html 1. <HTML> 2. <HEAD> 3. <TITLE>admin.html</TITLE> 4. <META http-equiv="content-type" content="text/html"; charset="windows-1253"> 5. <link href="styles.css" rel="stylesheet" type="text/css" /> 6. </HEAD> 7. <FRAMESET rows = "20%,14%,79%" frameborder="0" framespacing="0" > 8. <frameset cols="*,76%"> 9. <FRAME name="top" src = "panw22.html" scrolling="no" noresize /> 10. <frame name="top2" src = "banner/index.htm" scrolling="no" noresize />> 11. </frameset> 12. <frame name="top1" target="main" src="admin2.html" scrolling="no" noresize> 13. <frameset cols="179,*" frameborder="0"> Σελίδα 23 από 133

Πτυχιακή Εργασία Της Γεωργίας Μανδάλου & Ειρήνης Ντούρλια 14. <FRAME name="contents" target="main" src = "kat45/kat5.html" scrolling="auto" noresize/> 15. <FRAME name = "main" src = "mesaio.html" scrolling="auto" noresize target="_self"/> 16. </frameset> 17. <BODY> 18. </BODY> 19. </noframes> 20. </FRAMESET> 21. <frameset> 22. <noframes></noframes> 23. </frameset> 24. </frameset> 25. </HTML> Εικόνα 5.1.1 Η Admin (Estates M EW J contact Categories Just With <Photos welcome to our website posted on august 25th, 2007 real estates company is a realtor company which can help anyone who is interested to buy or rent a home or a workspace. you can easily search for an estate whether using a simple search or a more complex search and arrange a meeting by sending an apply! Η admin αρχικά καλεί την panw22.html (9) και αποτελεί το επάνω μέρος της εφαρμογής. Ο κώδικας της δίνεται στη συνέχεια. Σελίδα 24 από 133

5 Σχεδιασμός και Κώδικας Εικόνα 5.1.2 H panw22.html 5.1.1.2 panw22.html 1. <html> 2. <head> 3. <style type="text/css"> 4. body 5. { 6. width: 830px; 7. height: 150px; 8. margin: 0 auto; 9. background:#fdeb6b; 10. } 11. #logo { 12. height: 124px; 13. margin: 0 auto; 14. background: url(images/logo13.gif) no-repeat left 65%; 15. } 16. </style> 17. </head> 18. <body> 19. <div id="logo"> 20. </div> 21. </body> 22. </html> Όπως γίνεται αντιληπτό ο κώδικας δημιουργεί το χρώμα της σελίδας, τις διαστάσεις της και γενικά τα χαρακτηριστικά της (5-10). Καλεί επίσης το logo της εταιρίας και το στοιχίζει κατάλληλα (14). Σελίδα 25 από 133

Πτυχιακή Εργασία Της Γεωργίας Μανδάλου & Ειρήνης Ντούρλια Εικόνα 5.1.3 Το Logo Στη συνέχεια λοιπόν, η admin καλεί την admin2.html (9) η οποία αποτελεί το κεντρικό μενού της εφαρμογής. Σελίδα 26 από 133

5 Σχεδιασμός και Κώδικας Εικόνα 5.1.4 Η admin2.html 5.1.1.3 admin2.html 1. <html> 2. <head> 3. <style type="text/css"> 4. body 5. { 6. width: 830px; 7. height: 150px; 8. margin: 0 auto; 9. background:#fdeb6b; 10. } 11. #logo { 12. height: 124px; 13. margin: 0 auto; 14. background: url(images/logo13.gif) no-repeat left 65%; 15. } 16. </style> 17. </head> 18. <body> 19. <div id="logo"> 20. </div> 21. </body> 22. </html> Σελίδα 27 από 133

Πτυχιακή Εργασία Της Γεωργίας Μανδάλου & Ειρήνης Ντούρλια Η σελίδα αυτή αρχικά καλεί ένα αρχείο css (3). Στα αρχεία αυτά μπορούν να δοθούν χρώματα και διαστάσεις, πινάκων, εικόνων κτλ, ώστε κάθε φορά που καλούνται από μια σελίδα html ή μια σελίδα php να δίνουν πάντα τα ίδια χαρακτηριστικά. Χρησιμοποιούνται για λόγους ευκολίας, γιατί μια αλλαγή σ αυτά τα αρχεία ακολουθεί τις αντίστοιχες αλλαγές σε όσες σελίδες τα καλούν και αποφεύγεται έτσι η <<επίσκεψη>> στον κώδικα της καθεμίας που πρέπει να αλλαχθεί. Επιπλέον, χρησιμοποιούνται και για ομοιομορφία των σελίδων. Τα αρχεία αυτά θα χρησιμοποιηθούν και στη συνέχεια στις περισσότερες σελίδες. Ενδεικτικά παρατίθεται εδώ ο κώδικας του styles.css. Ενώ όλα τα αρχεία που χρησιμοποιούνται στην εφαρμογή, μπορούν να βρεθούν σε παράρτημα του βιβλίου. 5.1.1.4 styles.css. 1. body{ 2. position:absolute; 3. margin: 0; 4. padding: 0 140; 5. background: #372412 url(images/img03.jpg) repeat-x; 6. font-size: 13px; 7. color: #FFFFFF; 8. } 9. h1 {text-transform: none; 10. font-family: "Times New Roman", Times, serif,font-weight:normal; 11. color: #FEFE98; 12. letter-spacing: -4px; 13. font-size:1,4em; 14. } 15. h2 {text-transform: none; 16. font-family: "Times New Roman", Times, serif,font-weight:normal; 17. color: #FEFE98; 18. letter-spacing: normal; 19. font-size: 18px; 20. } 21. h3 {text-transform: none; 22. font-family: "Times New Roman", Times, serif,font-weight:normal; Σελίδα 28 από 133

5 Σχεδιασμός και Κώδικας 23. color: #FEFE98; 24. font-size: 1,3em; 25. } 26. #menu { 27. width: 700px; 28. height: 70px; 29. background: url(images/img03.jpg) repeat-x; 30. } 31. #menu ul { 32. margin: 0; 33. padding: 0; 34. list-style: none; 35. } 36. #menu li { 37. display: inline; 38. } 39. #menu a { 40. display: block; 41. float: left; 42. width: 166px; 43. height: 73px; 44. padding-top: 35px; 45. text-transform: lowercase; 46. text-decoration: none; 47. text-align: center; 48. letter-spacing: -1px; 49. font-size: 24px; 50. color: #FFFFFF; 51. } 52. #menu a:hover { 53. background: url(images/img09.jpg) no-repeat; 54. color: #FFFFFF; 55. } 56. #menu.active a { 57. background: url(images/img09.jpg) no-repeat; 58. color: #372412; 59. } 60. p, ul, ol { 61. line-height: 200%; 62. } Σελίδα 29 από 133

Πτυχιακή Εργασία Της Γεωργίας Μανδάλου & Ειρήνης Ντούρλια 63. a { 64. color: #FFEA6F; 65. text-decoration: none; 66. } 67. a:hover { 68. text-decoration: none; 69. } 70. #content { 71. float: left; 72. width: 532px; 73. } 74. post { 75. padding: 0 0 20px 0; 76. } 77. title { 78. margin: 0; 79. border-bottom: 2px solid #4A3903; 80. } 81. byline { 82. margin: 0; 83. } 84. meta { 85. border-top: 1px solid #4A3903; 86. text-align: right; 87. color: #646464; 88. } 89. meta a { 90. padding-left: 15px; 91. background: url(images/img06.gif) no-repeat left center; 92. font-weight: bold; 93. } Η admin2.html λοιπόν, αποτελείται από τέσσερα κουμπιά (Το κάθε ένα παραπέμπει σε μια άλλη σελίδα) (12-15). Η αρχική admin στη συνέχεια καλεί την kat5.html (10), η οποία αποτελεί το αριστερό μενού επιλογών. Σελίδα 30 από 133

5 Σχεδιασμός και Κώδικας 5.1.1.5 kat5.html 1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 2. "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> 3. <!-- saved from url=(0014)about:internet --> 4. <html xm ln s-'http://www.w3.org/1999/xhtml"> 5. <head> 6. <title>kat5</title> 7. <meta http-equiv-'content-type" content-'text/html; charset=utf-8" /> 8. <!--Fireworks 8 Dreamweaver 8 target. Created Mon Apr 27 00:40:21 GMT+0300 2009--> 9. </head> 10. <body bgcolor-'#372412''> 11. <a h re f-'kat4.html'' target-'contents''><img name-'kat5'' s rc -'kat5.gif w id th -'162" height="330" border="0" id="kat5" alt="" /></a> 12. </body> 13. </html> Η μορφή της kat5.html είναι η παρακάτω: Εικόνα 5.1.5 Η kat5.html 'ME!NV Όταν ο χρήστης πατήσει πάνω στο κουμπί MENU τότε καλείτε η kat4.html η οποία εμφανίζει μια σειρά από οχτώ νέα κουμπιά. Σελίδα 31 από 133

Πτυχιακή Εργασία Της Γεωργίας Μανδάλου & Ειρήνης Ντούρλια Η ολοκληρωμένη μορφή της admin αφού πατηθεί το κουμπί MENU δίνεται παρακάτω. Εικόνα 5.1.6 Η Ολοκληρωμένη Admin Estates MEM) Categories contact >Photos Jfiesaùm th welcome to our website posted on august 25th, 2007 real estates company is a realtor company which can help anyone who is interested to buy or rent a home or a job workspace. you can easily search for an estate whether using a simple search or a more complex search and arrange a meeting by sending an apply! 5.1.1.6 kat4.html. 1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 2. "http://www.w3.org/tr/xhtml1/dtd/xhtmm-transitional.dtd"> 3. <!-- saved from url=(0014)about:internet --> 4. <html xm ln s-'http://www.w3.org/1999/xhtml"> 5. <head> 6. <title>kat4.gif</title> 7. <meta http-equiv-'content-type'' content-'text/html; charset=utf-8" /> 8. <style type-'text/css''>td img {display: block;}</style> 9. <!--Fireworks 8 Dreamweaver 8 target. Created Sat May 02 20:39:04 GMT+0300 2009--> 10. <meta http-equiv-'page-enter'' content-'revealtrans(duration=0.5,transition=14)''> Σελίδα 32 από 133

5 Σχεδιασμός και Κώδικας 11. <script language-'javascriptl.2" type="text/javascript"> 12. <!-- 13. function MM_findObj(n, d) { //v4.01 14. var p,i,x; if(!d) d=document; if((p=n.indexof("?"))>0&&parent.frames.length) { 15. d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);} 16. if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n]; 17. for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=mm_findobj(n,d.layers[i].document); 18. if(!x && d.getelementbyld) x=d.getelementbyid(n); return x; 19. } 20. function MM_swapImage() { //v3.0 21. var i,j=0,x,a=mm_swapimage.arguments; document.mm_sr=new Array; for(i=0;i<(a.length-2);i+=3) 22. if ((x=mm_findobj(a[i]))!=null){document.mm_sr[j++]=x; if(!x.osrc) x.osrc=x.src; x.src=a[i+2];} 23. } 24. function MM_swapImgRestore() { //v3.0 25. var i,x,a=document.mm_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.osrc;i++) x.src=x.osrc; 26. } 27. function MM_preloadImages() { //v3.0 28. var d=document; if(d.images){ if(!d.mm_p) d.mm_p=new Array(); 29. var i,j=d.mm_p.length,a=mm_preloadimages.arguments; for(i=0; i<a.length; i++) 30. if (a[i].indexof("#")!=0){ d.mm_p[j]=new Image; d.mm_p[j++].src=a[i];}} 31. } 32. //--> 33. </script> 34. </head> 35. <body bgcolor="#372412" onload="mm_preloadimages('kat4_r2_c2_f2.gif,'kat4_r3_c2_f2.gif,'kat4_r4_c2_f2.gif,'kat4_r5_c2_f2.gif,'kat4_r7_c2_f2.gif,'kat4_r8_c2_f2.gif,'kat4_r9_c2_f2.gif,'kat4_r10 _c2_f2.gif);"> 36. <table border="0" cellpadding="0" cellspacing="0" width="163"> 37. <!-- fwtable fwsrc="kat4.png" fwbase="kat4.gif" fwstyle="dreamweaver" fwdocid = "1650438968" fwnested="0" --> 38. <tr> 39. <td><img src="spacer.gif" width="1" height="1" border="0" alt="" /></td> 40. <td><img src="spacer.gif" width="156" height="1" border="0" alt="" /></td> 41. <td><img src="spacer.gif" width="6" height="1" border="0" alt="" /></td> 42. <td><img src="spacer.gif" width="1" height="1" border="0" alt="" /></td> 43. </tr> Σελίδα 33 από 133