ΘΔΜΑ. On-line Σύζηημα για ηην διατείριζη μίας νασηιλιακής εηαιρίας.

Transcript

1 Σερλνινγηθό Δθπαηδεπηηθό Ίδξπκα Καβάιαο ρνιή Σερλνινγηθώλ Δθαξκνγώλ Σκήκα Βηνκεραληθήο Πιεξνθνξηθήο ΠΣΤΥΙΑΚΗ ΔΡΓΑΙΑ ΘΔΜΑ On-line Σύζηημα για ηην διατείριζη μίας νασηιλιακής εηαιρίας. Κνζκίδεο Θεόδσξνο Α.Δ.Μ 1723 Μπνύκπα Άλλα Α.Δ.Μ 1917 ΔΠΙΒΛΔΠΩΝ ΚΑΘΗΓΗΣΗ: ΛΤΣΡΙΓΗ ΥΡΙΣΟΓΟΤΛΟ ΚΑΒΑΛΑ ΝΟΔΜΒΡΙΟ 2013

2 Ευχαριςτύεσ Μεηά ηελ νινθιήξσζε ηεο πηπρηαθήο εξγαζίαο ληψζνπκε ηελ αλάγθε λα επραξηζηήζνπκε φζνπο ζηάζεθαλ ζην πιεπξφ καο φιν απηφ ην ρξνληθφ δηάζηεκα. Πξψηα απφ φια ηηο νηθνγέλεηεο καο πνπ καο ζηάζεθαλ νηθνλνκηθά θαη θπξίσο ςπρνινγηθά. Θα ζέιακε λα επραξηζηήζνπκε θαη ηνπο θίινπο θαη ηηο ζπλάδειθνπο καο γηα ηηο πνιχηηκεο ζπκβνπιέο ηνπο, ηε βνήζεηα ηνπο θαη ηελ ακέξηζηε ππνκνλή ηνπο. Σέινο νθείινπκε λα επραξηζηήζνπκε ηνλ επηβιέπνληα θαζεγεηή καο θ. Λπηξίδε Υξηζηφδνπιν ρσξίο ηελ βνήζεηα ηνπ νπνίνπ δελ ζα πεηπραίλακε ηνλ ζηφρν καο. ΚΑΒΑΛΑ

3 Περύληψη Ζ παξνχζα πηπρηαθή εξγαζία πξαγκαηεχεηαη ηε κειέηε, ηε δεκηνπξγία θαη ηε ζεσξεηηθή αλάιπζε κηαο δηαδηθηπαθήο εθαξκνγήο γηα ηε ιεηηνπξγία θαη ηε δηαρείξηζε ηεο Ναπηηιηαθήο Δηαηξείαο (NEK FERRIES). Μέζα απφ ηελ ηζηνζειίδα ηεο εηαηξείαο ν ρξήζηεο κπνξεί λα αλαδεηήζεη δξνκνιφγηα ηεο αξεζθείαο ηνπ, λα θάλεη θξάηεζε ή αθχξσζε ηνπ δξνκνινγίνπ πνπ επέιεμε θαη λα ειέγμεη αλ ππάξρνπλ δηαζέζηκα δσκάηηα ζε ζπγθεθξηκέλα μελνδνρεία γηα ηε ρξνληθή πεξίνδν πνπ επηζπκεί. Δπίζεο ε εθαξκνγή δίλεη ηε δπλαηφηεηα ζην ρξήζηε λα παξαθνινπζεί ην δειηίν θαηξνχ αλά πάζα ζηηγκή θαη λα ελεκεξσζεί γηα ηα δηθαηψκαηα θαη ηηο ππνρξεψζεηο ηνπ απέλαληη ζηελ εηαηξεία, σο επηβάηεο. Δπηπιένλ παξέρεηαη ζην δηαρεηξηζηή ν πιήξεο έιεγρνο ηεο ηζηνζειίδαο, κε απνηέιεζκα λα θάλεη αιιαγέο ζηηο ππεξεζίεο ηεο εηαηξείαο. Οη ηερλνινγίεο πάλσ ζηηο νπνίεο βαζίζηεθε ε πηπρηαθή είλαη ε γιψζζα scripting PHP, ε γιψζζα ζήκαλζεο HTML5 θαη ε JavaScript, ελψ γηα ηελ δηαρείξηζε ηεο βάζεο δεδνκέλσλ ρξεζηκνπνηήζακε ηελ SQL. Σέινο ηα ινγηζκηθά πνπ ρξεζηκνπνηήζεθαλ γηα ηελ νινθιήξσζε ηεο εξγαζίαο είλαη ην Dreamweaver CS5.5 θαη ην XAMPP. 2

4 Abstract This project deals with the design, creation and theoretical analysis of a web application for the operation and management of the Maritime Company (NEK FERRIES). Through the company's website, the user can search routes liking, make reservations or cancel the route chosen and check if there are any rooms available at specific hotels for the time period. Also, the application allows the user to monitor the weather at all times and be informed of their rights and obligations towards the company, as a passenger. Further provided is the administrator full control of the website, so that it makes changes to the services of the company. The technologies relied on this thesis is the scripting language PHP, the markup language HTML5 and JavaScript, while for the management of the database we used SQL. Finally, the software used for the completion of this work is the Dreamweaver CS5.5 and XAMPP. 3

5 Πύνακασ περιεχομϋνων Ευχαριςτίεσ... 1 Ρερίλθψθ... 2 Abstract o ΚΕΦΑΛΑΙΟ: Η ΡΤΥΧΙΑΚΗ ΕΓΑΣΙΑ o ΚΕΦΑΛΑΙΟ: ΔΙΑΔΙΚΤΥΑΚΕΣ ΕΦΑΜΟΓΕΣ Web εφαρμογζσ ςιμερα Τα προβλιματα που υπάρχουν και τα πλεονεκτιματα αυτισ τθσ εφαρμογισ Δυνατότθτεσ εφαρμογισ Δυνατότθτεσ Χριςτθ Δυνατότθτα επεξεργαςίασ του προφίλ του χριςτθ Δυνατότθτεσ Διαχειριςτι Οι καινοτομίεσ τθσ πτυχιακισ ο ΚΕΦΑΛΑΙΟ: ΘΕΩΙΑ HTML HTML Στοιχεία Ιδιότθτεσ Βαςικοί κανόνεσ που ζχουν οριςτεί για τθν HTML Νζα χαρακτθριςτικά CSS Σφνταξθ CSS Χριςθ CSS PHP Σφνταξθ και εντολζσ τθσ PHP Οι μεταβλθτζσ ςτθν PHP SQL Γλωςςικά Στοιχεία τθσ SQL Ερωτιματα προσ τθν Βάςθ JavaScript και βιβλιοκικεσ Μοντζλο Εκτζλεςθσ Εφαρμογζσ JavaScript Άλλεσ Τεχνολογίεσ Ajax Geocoding

6 3.6.3 Open Layers TinyMCE Browser addons και πρόςκετα εργαλεία Colorzilla MeasureIt FIREBUG XAMPP Δυνατότθτεσ και απαιτιςεισ του XAMPP Χριςθ του XAMPP PhpΜyAdmin Χαρακτθριςτικά του PhpΜyAdmin Apache HTTP εξυπθρετθτισ Dreamweaver CS Χαρακτθριςτικά του Dreamweaver o ΚΕΦΑΛΑΙΟ: ΥΛΟΡΟΙΗΣΗ Εντολζσ SQL που χρθςιμοποιικθκαν Συναρτιςεισ PHP που χρθςιμοποιικθκαν Αποςτολι Κρυπτογράφθςθ Ρρόςβαςθ και λειτουργίεσ χριςτθ Εγγραφι ςτο ςφςτθμα Είςοδοσ ςτο ςφςτθμα Επεξεργαςία ςτοιχείων Ανάκτθςθ κωδικοφ Ζξοδοσ Αναηιτθςθ Δρομολογίων και κράτθςθ Εφρεςθ δρομολογίων Σφνδεςθ με τον πάροχο (ferrydummyprocess) Εμφάνιςθ δρομολογίων Κράτθςθ Επιβεβαίωςθ Κράτθςθσ Ακφρωςθ κράτθςθσ Καιρόσ Λειτουργίεσ Διαχειριςτι

7 4.7.1 Ειςαγωγι/Διαγραφι χριςτθ Ειςαγωγι/Διαγραφι άρκρων Επεξεργαςία ςτοιχείων κράτθςθσ Διαγραφι κράτθςθσ ο ΚΕΦΑΛΑΙΟ: ΑΝΑΣΚΟΡΗΣΗ ΚΑΙ ΜΕΛΛΟΝΤΙΚΕΣ ΡΟΕΚΤΑΣΕΙΣ Συμπεράςματα Τα προβλιματα και θ αντιμετϊπιςθ τουσ Μελλοντικζσ προεκτάςεισ ΒΙΒΛΙΟΓΑΦΙΑ Ραράρτθμα Α-ΕΓΧΕΙΙΔΙΟ ΧΗΣΗΣ ΡΑΑΤΗΜΑ Β-ΛΕΞΙΚΟ ΔΕΔΟΜΕΝΩΝ ΡΑΑΤΗΜΑ Γ-ΑΡΑΙΤΗΣΕΙΣ ΡΟΓΑΜΜΑΤΟΣ ΡΑΑΤΗΜΑ Δ-ΡΟΔΙΑΓΑΦΕΣ ΡΑΑΤΗΜΑ Ε-ΑΝΑΛΥΣΗ ΒΑΣΗΣ ΔΕΔΟΜΕΝΩΝ

8 1 o ΚΕΥΑΛΑΙΟ: Η ΠΣΤΦΙΑΚΗ ΕΡΓΑΙΑ Ζ πηπρηαθή απηή εξγαζία πεξηγξάθεη ηελ αλάπηπμε κηαο δηαδηθηπαθήο εθαξκνγήο γηα ηελ δηαρείξηζε ηεο λαπηηιηαθήο εηαηξίαο NEK FERRIES. Μέζα απφ ηελ ηζηνζειίδα ηεο εηαηξίαο ν ρξήζηεο κπνξεί λα επηιέμεη ηελ ππεξεζία πνπ ηνλ ελδηαθέξεη κέζα απφ έλα κελνχ επηινγψλ, θάλνληαο εγγξαθή ζην ζχζηεκα. Ο δηαρεηξηζηήο έρεη ηνλ πιήξε έιεγρν ηεο ηζηνζειίδαο θαη κπνξεί λα δηαρεηξίδεηαη ηνπο ρξήζηεο θαη λα πξαγκαηνπνηεί αιιαγέο ηφζν ζηελ εκθάληζε φζν θαη ζηε ιεηηνπξγία ηεο ηζηνζειίδαο. ην 2 o θεθάιαην Πεξηγξάθνληαη νη δπλαηφηεηεο θαη νη ειιείςεηο παξφκνησλ εθαξκνγψλ θαζψο θαη ν ηξφπνο ιεηηνπξγίαο ηνπο. Αλαθέξνληαη ηα βαζηθά πξνβιήκαηα πνπ αληηκεησπίδνπλ νη ρξήζηεο φηαλ επηζθέπηνληαη ηέηνηεο ηζηνζειίδεο, αλαιχεηαη ν ηξφπνο θαη νη κέζνδνη πνπ ρξεζηκνπνηήζεθαλ σο ιχζε, θαζψο θαη νη θαηλνηνκίεο θαη ηα πιενλεθηήκαηα απηήο ηεο εθαξκνγήο έλαληη παξφκνησλ. ην 3 o θεθάιαην παξνπζηάδνληαη αλαιπηηθά ηα πξνγξάκκαηα, νη ηερλνινγίεο, ηα εξγαιεία θαη νη γιψζζεο πνπ ρξεζηκνπνηήζεθαλ θαηά ηε δηάξθεηα ηεο εξγαζίαο. Γίλεηαη αλαθνξά ζην ηξφπν κε ηνλ νπνίν ρξεζηκνπνηήζεθε ην θάζε εξγαιείν θαζψο θαη ε ρξεζηκφηεηα ηνπ ζηελ εθαξκνγή. ην 4 o θεθάιαην πεξηγξάθνληαη ηα βήκαηα ηεο πινπνίεζεο. Δμεγείηαη πσο ιεηηνπξγεί ε εθαξκνγή απφ πιεπξάο πξνγξακκαηηζκνχ. Γίλεηαη αλαθνξά ζηηο ελέξγεηεο ηνπ ρξήζηε θαη ηνπ δηαρεηξηζηή θαη αλαιχνληαη νη βαζηθέο ζπλαξηήζεηο, ν ηξφπνο ιεηηνπξγίαο ηνπο θαη ε ζχλδεζε ηνπο κε ηελ βάζε δεδνκέλσλ. ην 5 o θεθάιαην παξαηίζεληαη ηα ζπκπεξάζκαηα απφ ηελ ζπγθεθξηκέλε εθαξκνγή. Δπηπιένλ αλαθέξνληαη θάπνηα ζεκαληηθά πξνβιήκαηα ζρεηηθά κε ηελ πινπνίεζε θαη αλαιχεηαη ν ηξφπνο αληηκεηψπηζεο ηνπο. Σέινο πεξηγξάθνληαη νη πηζαλφηεηεο εμέιημεο θαη επέθηαζεο απηνχ ηνπ ζπζηήκαηνο. Σν βηβιίν επίζεο πεξηέρεη ην Δγρεηξίδην ρξήζεο ζην νπνίν πεξηγξάθνληαη αλαιπηηθά ηα βήκαηα γηα ην πψο ιεηηνπξγεί ε εθαξκνγή. Σν πξψην κέξνο ηνπ εγρεηξηδίνπ, αθνξά ηε ζχλδεζε ηνπ ρξήζηε ζηελ ηζηνζειίδα, αλαιχνληαο ηηο επηινγέο θαη ηηο ιεηηνπξγίεο πνπ ην πξνζθέξεη ε εθαξκνγή. ην δεχηεξν κέξνο παξνπζηάδεηαη ε πιαηθφξκα ηνπ δηαρεηξηζηή θαη ιεηηνπξγίεο ηεο. ηε ζπλέρεηα αθνινπζεί ην ιεμηθό δεδνκέλσλ κε αλαθνξά ζηηο κεηαβιεηέο πνπ ρξεζηκνπνηήζεθαλ πεξηγξάθνληαο ηνλ 7

9 ηχπν θαη ηελ ρξήζε ηεο θαζεκίαο. Αθνινπζνχλ νη απαηηήζεηο γηα πξνγξακκαηηζηέο, φπνπ αλαθέξνληαη νη απαηηήζεηο ηνπ ζπζηήκαηνο γηα ηελ θάζε ιεηηνπξγία. Έπεηηα παξνπζηάδνληαη νη πξνδηαγξαθέο ηεο εθαξκνγήο ρξεζηκνπνηψληαο έλα ζχζηεκα εξσηήζεσλ θαη απαληήζεσλ. ην ηέινο βξίζθνληαη νη πίλαθεο ηεο βάζεο δεδνκέλσλ φπνπ πεξηγξάθεηαη ε δνκή θαη ην πεξηερφκελν ηνπο, ην δηάγξακκα ΜΟ, θαη ε βηβιηνγξαθία. 8

10 2 o ΚΕΥΑΛΑΙΟ: ΔΙΑΔΙΚΣΤΑΚΕ ΕΥΑΡΜΟΓΕ 2.1 Web εφαρμογϋσ ςόμερα ε παγθφζκην επίπεδν, ε ρξήζε παξφκνησλ εθαξκνγψλ δίλεη ηελ ιχζε ζηνπο αλζξψπνπο πνπ ζέινπλ ηαμηδέςνπλ εχθνια θαη γξήγνξα. Μέζα απφ κία ηζηνζειίδα κπνξεί θάπνηνο λα απνθηήζεη ην εηζηηήξην πνπ επηζπκεί ρσξίο λα κεζνιαβεί θάπνην ηνπξηζηηθφ γξαθείν, κε απνηέιεζκα ν ζηφρνο ηνπ λα επηηπγράλεηαη νηθνλνκηθφηεξα θαη γξεγνξφηεξα. Υξεζηκνπνηψληαο ην κελνχ επηινγψλ, ν ρξήζηεο έρεη ηελ δπλαηφηεηα λα επηιέμεη ηνλ πξννξηζκφ, ηελ εκεξνκελία αλαρψξεζεο θαη επηζηξνθήο, ηνλ αξηζκφ ησλ επηβαηψλ, ην φρεκα, θαζψο θαη ηνλ ηξφπν πνπ ζέιεη λα ηαμηδέςεη αλάινγα κε ηελ νηθνλνκηθή ηνπ δπλαηφηεηα. Δπίζεο, αλάινγα κε ηηο ππεξεζίεο πνπ ηνπ παξέρνληαη κπνξεί λα επηθνηλσλήζεη κε ηελ εηαηξία αθήλνληαο θάπνην ζρφιην γηα ηελ επρξεζηία ηεο εθαξκνγήο, λα επηβεβαηψζεη ή λα αθπξψζεη ηελ θξάηεζε θαη λα ελεκεξσζεί γηα ηα λέα δξνκνιφγηα. 2.2 Σα προβλόματα που υπϊρχουν και τα πλεονεκτόματα αυτόσ τησ εφαρμογόσ ήκεξα ππάξρνπλ δεθάδεο ηέηνηεο εθαξκνγέο πνπ ππφζρνληαη κηα αμηφπηζηε ιχζε ζηνλ ηνκέα ησλ λαπηηιηαθψλ επηρεηξήζεσλ. Πνιιέο απφ απηέο, θπξίσο ζηελ Διιάδα, δελ επηθεληξψλνληαη ζε έλα ηνκέα αιιά πεξηέρνπλ πιεξνθνξίεο θαη γηα άιιεο εηαηξίεο πνπ δελ αθνξνχλ ηηο αθηνπιντθέο γξακκέο. Απηφ έρεη σο απνηέιεζκα λα πξνθαιεί ζχγρπζε ζηνλ ρξήζηε. Έλα βαζηθφ πξφβιεκα πνπ ππάξρεη ζε φιεο ηηο εθαξκνγέο είλαη έιιεηςε δηαρείξηζεο ινγαξηαζκνχ. Έηζη ν ρξήζηεο, ζε πεξίπησζε πνπ ζέιεη λα αθπξψζεη ην εηζηηήξην αλαγθάδεηαη λα επηθνηλσλήζεη ηειεθσληθά κε ηελ εηαηξία. Πξαγκαηνπνηψληαο εγγξαθή ζηε ζπγθεθξηκέλε εθαξκνγή, ν ρξήζηεο έρεη ηελ δπλαηφηεηα κέζα απφ ηελ δηαρείξηζε ινγαξηαζκνχ, φρη κφλν λα αθπξψζεη κία 9

11 θξάηεζε, αιιά θαη λα επεμεξγαζηεί ηα ζηνηρεία πνπ έρεη δειψζεη θαηά ηελ δηαδηθαζία ηεο εγγξαθήο. Ο θαηξφο είλαη έλα ζεκαληηθφ ζέκα γηα απηφλ πνπ πξφθεηηαη λα ηαμηδέςεη. Ζ πξφβιεςε ησλ θαηξηθψλ ζπλζεθψλ δελ ππνζηεξίδεηαη ζπλήζσο απφ ηέηνηεο εθαξκνγέο, κε απνηέιεζκα ν ελδηαθεξφκελνο λα αλαηξέρεη ζε άιιεο ηζηνζειίδεο κε ζθνπφ λα ελεκεξσζεί. Κάλνληαο εγγξαθή ζηε ζπγθεθξηκέλε εθαξκνγή ν ρξήζηεο κπνξεί λα παξαθνινπζεί ηνλ θαηξφ αλά πάζα ζηηγκή θαη ζε νπνηνδήπνηε κέξνο ηνπ θφζκνπ επηζπκεί. Ζ εμαζθάιηζε δηακνλήο ζηνλ πξννξηζκφ πνπ έρεη επηιέμεη θάπνηνο απνηειεί επίζεο έλα βαζηθφ θνκκάηη, πνπ νη εηαηξίεο αθηνπιντθψλ γξακκψλ δελ δχλαηαη λα πξνζθέξνπλ. Έηζη ν ρξήζηεο είλαη αλαγθαζκέλνο λα αθνινπζήζεη κία άιιε δηαδηθαζία αλαδεηψληαο μελνδνρεία θαη ελνηθηαδφκελα δσκάηηα. Ζ εθαξκνγή απηή ηνπ δίλεη ηελ δπλαηφηεηα λα βξεη πιεξνθνξίεο γηα μελνδνρεία, αλάινγα κε ηνλ πξννξηζκφ, γξήγνξα θαη εχθνια. 2.3 Δυνατότητεσ εφαρμογόσ Χο επί ην πιείζηνλ, ζηηο web εθαξκνγέο πνπ πξνζθέξνπλ παξφκνηεο ππεξεζίεο παξαηεξήζεθαλ ειιείςεηο ηφζν ζηηο δπλαηφηεηεο ηνπ ρξήζηε φζν θαη ηνπ δηαρεηξηζηή ηεο ηζηνζειίδαο. Κάλνληαο κηα κηθξή έξεπλα, δηαπηζηψζεθε φηη νη ππεξεζίεο πνπ πξνζθέξνπλ δελ θαιχπηνπλ ζην ζχλνιν ηηο αλάγθεο ηνπ ζχγρξνλνπ αλζξψπνπ. ζνλ αθνξά ηνλ απιφ ρξήζηε πνπ ζέιεη λα ηαμηδέςεη, ε θξάηεζε εηζηηεξίνπ απφ κφλε ηεο θαη ε επηθνηλσλία κε ηελ εηαηξία δελ είλαη αξθεηή. Ζ εθαξκνγή πνπ πινπνηήζεθε ζηα πιαίζηα ηεο πηπρηαθήο εξγαζίαο πξνζθέξεη επηπιένλ ππεξεζίεο θαη δπλαηφηεηεο φπσο είλαη ε δηαρείξηζε θξαηήζεσλ θαη ινγαξηαζκνχ, ε online παξαθνινχζεζε ηνπ θαηξνχ θαη ε αλαδήηεζε μελνδνρείσλ αλάινγα κε ηνλ πξννξηζκφ. χκθσλα κε ηελ έξεπλα, ζε επίπεδν δηαρείξηζεο ηεο εθαξκνγήο, εηαηξίεο φπσο ε NEL lines, MINOAN lines, HELLENIC SEAWAYS θαη άιιεο, δελ δηαζέηνπλ πιαηθφξκα δηαρεηξηζηή γηα ηελ ηζηνζειίδα. Γηαρεηξηζηήο νξίδεηαη ν δεκηνπξγφο ηεο εθαξκνγήο, ν νπνίνο κε εληνιή ηεο εηαηξίαο επεκβαίλεη ζην θψδηθα κε ζθνπφ λα πξαγκαηνπνηήζεη αιιαγέο. Απνηέιεζκα ηεο φιεο δηαδηθαζίαο, είλαη ε εηαηξία λα ράλεη πειάηεο φζν ε εθαξκνγή βξίζθεηαη ππφ επεμεξγαζία θαη λα επηβαξχλεηαη κε πεξηζζφηεξα έμνδα αθνχ ν πξνγξακκαηηζηήο πνπ πινπνηεί ηηο αιιαγέο ζα πιεξσζεί 10

12 επηπιένλ. ηε ζπγθεθξηκέλε εθαξκνγή δίλεηαη ε δπλαηφηεηα ζε έλαλ ππάιιειν ηεο εηαηξείαο πνπ δελ έρεη γλψζεηο πξνγξακκαηηζκνχ, λα πξαγκαηνπνηήζεη αιιαγέο ζηελ εκθάληζε ηεο ηζηνζειίδαο θαη λα επεμεξγαζηεί ηνπο ρξήζηεο θαη ηηο θξαηήζεηο ηνπο Δυνατότητεσ Φρόςτη Ο επηζθέπηεο ηεο εθαξκνγήο έρεη ηελ δπλαηφηεηα λα εγγξαθεί ζπκπιεξψλνληαο ηα ζηνηρεία πνπ απαηηνχληαη. ηε ζπλέρεηα ιακβάλεη έλα επηβεβαίσζεο πνπ ηνλ ελεκεξψλεη γηα ηελ επηηπρή εγγξαθή ζηελ ηζηνζειίδα. Αθνχ θάλεη login κε ηα ζηνηρεία (username θαη password) κπνξεί λα δεη πιεξνθνξίεο πνπ αθνξνχλ ηα ιηκάληα κέζα απφ ηνπο ρξήζηκνπο ζπλδέζκνπο, λα ελεκεξσζεί γηα ηνπο θαλφλεο θαη ηηο ππνρξεψζεηο ηεο εηαηξίαο δηαβάδνληαο ηηο ζπρλέο εξσηήζεηο, λα θάλεη αλαδήηεζε δξνκνινγίσλ αλά ιηκάλη, αλά πξννξηζκφ θαη αλά εκεξνκελία αλαρψξεζεο, λα ελεκεξψλεηαη γηα ηνλ θαηξφ θαη λα έρεη πξφζβαζε ζε πιεξνθνξίεο γηα μελνδνρεία. Δπίζεο έρεη ηελ δπλαηφηεηα λα ιακβάλεη ελεκεξσηηθά απφ ηελ εηαηξία Δυνατότητα επεξεργαςύασ του προφύλ του χρόςτη Μέζα απφ ηελ Γηαρείξηζε Λνγαξηαζκνχ, ν ρξήζηεο κπνξεί λα αιιάμεη ηα ζηνηρεία εγγξαθήο φπσο ην φλνκα ν θσδηθφο ή ην θαη λα απνζεθεχζεη ηηο αιιαγέο ζηνλ ήδε ππάξρνλ ινγαξηαζκφ. Δπίζεο κπνξεί λα αθπξψζεη κία ή πεξηζζφηεξεο θξαηήζεηο αιιά φρη λα ηηο δηαγξάςεη απφ ην πξνθίι ηνπ. Ζ δηαγξαθή γίλεηαη κφλν απφ ηνλ Γηαρεηξηζηή Δυνατότητεσ Διαχειριςτό Ο δηαρεηξηζηήο έρεη ηνλ πιήξε έιεγρν ηεο ηζηνζειίδαο ζρεηηθά κε ηελ ιεηηνπξγηθφηεηά ηεο θαη ηνπο ρξήζηεο. ζνλ αθνξά ηνπο ρξήζηεο, κπνξεί λα επεμεξγαζηεί ηα ζηνηρεία ηνπο, λα δηαγξάςεη έλα ρξήζηε αθφκα θαη λα πξνζζέζεη ζε πεξίπησζε πνπ απηφ δελ είλαη δπλαηφ απφ ηνλ ίδην ηνλ ρξήζηε. Αθφκα έρεη ηελ δπλαηφηεηα λα ηξνπνπνηήζεη κία θξάηεζε αιιάδνληαο ηελ εηαηξία θαη ην πινίν αλαρψξεζεο/επηζηξνθήο θαζψο θαη ην είδνο ηεο θακπίλαο. Δπίζεο ρξεζηκνπνηψληαο 11

13 ηα newsletters κπνξεί λα ζηείιεη ζηνπο ρξήζηεο είηε καδηθά είηε πξνζσπηθά γξάθνληαο ζρφιηα, παξαηεξήζεηο ή ελεκεξψλνληαο ηνπο ζρεηηθά κε ηελ εμέιημε θάπνηνπ αηηήκαηνο. ε επίπεδν εθαξκνγήο έρεη ηελ δπλαηφηεηα λα αιιάμεη ην φλνκα ηεο ηζηνζειίδαο, ην , ην roundtrip θαη ην logo αλεβάδνληαο κηα λέα εηθφλα. Σέινο κπνξεί λα πξνζζέζεη ή λα αθαηξέζεη έλα άξζξν πνπ αθνξά ηηο ζπρλέο εξσηήζεηο θαη ηηο πιεξνθνξίεο ζρεηηθά κε ηελ εηαηξία. 2.4 Οι καινοτομύεσ τησ πτυχιακόσ Ζ παξνχζα δηαδηθηπαθή εθαξκνγή παξέρεη ζηνλ ρξήζηε πνιιέο δπλαηφηεηεο, φπνπ ζχκθσλα κε ηελ κειέηε άιισλ δηαδηθηπαθψλ ηφπσλ δελ παξέρνληαη. Οη θαηλνηνκίεο απηήο ηεο εθαξκνγήο είλαη: Ζ ρξήζε ηνπ Marine Traffic πνπ παξέρεη ζην θνηλφ πιεξνθνξίεο πξαγκαηηθνχ ρξφλνπ γηα ηα ιηκάληα θαη ηηο θηλήζεηο ησλ πινίσλ. Μέζα ζηνπο επξχηεξνπο ζηφρνπο ηνπ είλαη ε αμηνπνίεζή ηνπ ζε εξεπλεηηθέο εθαξκνγέο θαη ε εμαγσγή ρξήζηκσλ ζπκπεξαζκάησλ γηα ηελ θπθινθνξία ησλ πινίσλ. Σν ζχζηεκα θηινμελείηαη απφ ην Σκήκα Μεραληθψλ ρεδίαζεο Πξντφλησλ θαη πζηεκάησλ, ηνπ Παλεπηζηεκίνπ Αηγαίνπ ζηε χξν. Ζ ζπιινγή ησλ δεδνκέλσλ βαζίδεηαη ζην δηεζλέο ζχζηεκα AIS (Automatic Identification System). Ζ απεηθφληζε ησλ δξνκνινγίσλ κέζσ ηνπ Google Api Directions. Απηφ ζεκαίλεη πσο φηαλ ν ρξήζηεο επηιέμεη ηνλ πξννξηζκφ ηνπ, ε εθαξκνγή απηή ζα ηνπ εκθαλίζεη ηελ εηθνληθή δηαδξνκή ζην ράξηε. Ζ πξνβνιή ηνπ θαηξνχ ζε κεγαιχηεξν εχξνο πφιεσλ απφ φηη ρξεζηκνπνηείηαη ζπλήζσο. 12

14 3 ο ΚΕΥΑΛΑΙΟ: ΘΕΩΡΙΑ 3.1 HTML Ζ HTML είλαη ε θχξηα γιψζζα ζήκαλζεο γηα ηηο ηζηνζειίδεο, θαη ηα ζηνηρεία ηεο είλαη ηα βαζηθά δνκηθά ζηνηρεία ησλ ηζηνζειίδσλ. Ζ HTML γξάθεηαη ππφ κνξθή ζηνηρείσλ HTML ηα νπνία απνηεινχληαη απφ εηηθέηεο, νη νπνίεο πεξηθιείνληαη κέζα ζε ζχκβνια «κεγαιχηεξν απφ» θαη «κηθξφηεξν απφ» (γηα παξάδεηγκα <html>), κέζα ζην πεξηερφκελν ηεο ηζηνζειίδαο. Οη εηηθέηεο HTML ζπλήζσο ιεηηνπξγνχλ αλά δεχγε (γηα παξάδεηγκα <h1> θαη </h1>), κε ηελ πξψηε λα νλνκάδεηαη εηηθέηα έλαξμεο θαη ηε δεχηεξε εηηθέηα ιήμεο (ή ζε άιιεο πεξηπηψζεηο εηηθέηα αλνίγκαηνο θαη εηηθέηα θιεηζίκαηνο αληίζηνηρα). Αλάκεζα ζηηο εηηθέηεο, νη ζρεδηαζηέο ηζηνζειίδσλ κπνξνχλ λα ηνπνζεηήζνπλ θείκελν, πίλαθεο, εηθφλεο θιπ. Ο ζθνπφο ελφο browser είλαη λα δηαβάδεη ηα έγγξαθα HTML θαη ηα ζπλζέηεη ζε ζειίδεο πνπ κπνξεί θαλείο λα δηαβάζεη ή λα αθνχζεη. Ο browser δελ εκθαλίδεη ηηο εηηθέηεο HTML, αιιά ηηο ρξεζηκνπνηεί γηα λα εξκελεχζεη ην πεξηερφκελν ηεο ζειίδαο. Σα ζηνηρεία ηεο HTML ρξεζηκνπνηνχληαη γηα λα θηίζνπλ φινπο ηνπ ηζηφηνπνπο. Ζ HTML επηηξέπεη ηελ ελζσκάησζε εηθφλσλ θαη άιισλ αληηθεηκέλσλ κέζα ζηε ζειίδα, θαη κπνξεί λα ρξεζηκνπνηεζεί γηα λα εκθαλίζεη δηαδξαζηηθέο θφξκεο. Παξέρεη ηηο κεζφδνπο δεκηνπξγίαο δνκεκέλσλ εγγξάθσλ (δειαδή εγγξάθσλ πνπ απνηεινχληαη απφ ην πεξηερφκελν πνπ κεηαθέξνπλ θαη απφ ηνλ θψδηθα κνξθνπνίεζεο ηνπ πεξηερνκέλνπ) θαζνξίδνληαο δνκηθά ζεκαληηθά ζηνηρεία γηα ην θείκελν, φπσο θεθαιίδεο, παξαγξάθνπο, ιίζηεο, ζπλδέζκνπο, παξαζέζεηο θαη άιια. Μπνξνχλ επίζεο λα ελζσκαηψλνληαη ζελάξηα εληνιψλ ζε γιψζζεο φπσο ε JavaScript, ηα νπνία επεξεάδνπλ ηε ζπκπεξηθνξά ησλ ηζηνζειίδσλ HTML. Οη Web browsers κπνξνχλ επίζεο λα αλαθέξνληαη ζε ζηπι κνξθνπνίεζεο CSS γηα λα νξίδνπλ ηελ εκθάληζε θαη ηε δηάηαμε ηνπ θεηκέλνπ θαη ηνπ ππφινηπνπ πιηθνχ. Ο νξγαληζκφο W3C, ν νπνίνο δεκηνπξγεί θαη ζπληεξεί ηα πξφηππα γηα ηελ HTML θαη ηα CSS, ελζαξξχλεη ηε ρξήζε ησλ CSS αληί δηαθφξσλ ζηνηρείσλ ηεο HTML γηα ζθνπνχο παξνπζίαζεο ηνπ πεξηερνκέλνπ. 13

15 3.1.1 HTML τοιχεύα Σα έγγξαθα HTML απνηεινχληαη απφ ζηνηρεία HTML ηα νπνία ζηελ πην γεληθή κνξθή ηνπο έρνπλ ηξία ζπζηαηηθά: έλα δεχγνο απφ εηηθέηεο, ηελ «εηηθέηα εθθίλεζεο» θαη ηελ «εηηθέηα ηεξκαηηζκνχ», κεξηθέο ηδηφηεηεο κέζα ζηελ εηηθέηα εθθίλεζεο, θαη ηέινο ην θείκελν ή ην γξαθηθφ πεξηερφκελν κεηαμχ ησλ εηηθεηψλ, ην νπνίν κπνξεί λα πεξηιακβάλεη θαη άιια ζηνηρεία εκθσιεπκέλα κέζα ηνπ. Σν ζηνηρείν HTML κπνξεί λα είλαη νηηδήπνηε αλάκεζα ζηηο εηηθέηεο εθθίλεζεο θαη ηεξκαηηζκνχ. Σέινο, θάζε εηηθέηα πεξηθιείεηαη ζε ζχκβνια «κεγαιχηεξν απφ» θαη «κηθξφηεξν απφ», δειαδή < θαη >. Δπνκέλσο, ε γεληθή κνξθή ελφο ζηνηρείνπ HTML είλαη: <tag attribute1="value1" attribute2="value2">content</tag>. Μεξηθά ζηνηρεία HTML πεξηγξάθνληαη σο άδεηα ζηνηρεία, έρνπλ ηε κνξθή <tag attribute1="value1" attribute2="value2" >, θαη δελ έρνπλ θαζφινπ πεξηερφκελν. Σν φλνκα θάζε ζηνηρείνπ HTML είλαη ην ίδην φλνκα πνπ ρξεζηκνπνηείηαη ζηηο αληίζηνηρεο εηηθέηεο. Σν φλνκα ηεο εηηθέηαο ηεξκαηηζκνχ μεθηλά κε κηα θάζεην «/», ε νπνία παξαιείπεηαη ζηα άδεηα ζηνηρεία. Σέινο, αλ δελ αλαθέξνληαη ξεηά νη ηδηφηεηεο ελφο ζηνηρείνπ, ηφηε ρξεζηκνπνηνχληαη νη πξνεπηινγέο ζε θάζε πεξίπησζε Παράδειγμα: <!DOCTYPE html> <html> <head> <title>hello HTML</title> </head> <body> <p>hello World!</p> </body> </html> Σν θείκελν αλάκεζα ζην <html> θαη ην </html> πεξηγξάθεη ηελ ηζηνζειίδα, θαη ην θείκελν κεηαμχ ηνπ <body> θαη ηνπ </body> είλαη ην νξαηφ κέξνο ηεο. Σν 14

16 ζεκαζκέλν θείκελν '<title>hello HTML</title>' θαζνξίδεη ηνλ ηίηιν πνπ ζα εκθαλίδεηαη ζηελ κπάξα ηίηινπ ηνπ browser. Σν Document Type Declaration ζηνλ πην πάλσ θψδηθα είλαη γηα ηελ HTML5. Αλ δελ ζπκπεξηιακβάλεηαη ε δήισζε <!doctype html>, ηφηε κεξηθνί browser ζα θαηαθχγνπλ ζηελ ιεηηνπξγία quirks γηα ηελ εκθάληζε ηεο ζειίδαο Ιδιότητεσ Οη πεξηζζφηεξεο ηδηφηεηεο ησλ ζηνηρείσλ, είλαη δεχγε νλνκάησλ θαη ηηκψλ, ηα νπνία δηαρσξίδνληαη κε έλα «=» θαη γξάθνληαη κέζα ζηελ εηηθέηα εθθίλεζεο ελφο ζηνηρείνπ, κεηά ην φλνκα ηνπ ζηνηρείνπ. Ζ ηηκή κπνξεί λα πεξηθιείεηαη ζε κνλά ή δηπιά εηζαγσγηθά, παξφηη ηηκέο πνπ απνηεινχληαη απφ ζπγθεθξηκέλνπο ραξαθηήξεο κπνξνχλ λα γξάθνληαη ρσξίο εηζαγσγηθά ζηελ HTML, αιιά φρη ζηελ XHTML. Σν λα κέλνπλ νη ηηκέο ησλ ηδηνηήησλ ρσξίο εηζαγσγηθά ζεσξείηαη αλαζθαιέο. Δθηφο απφ ηηο ηδηφηεηεο πνπ γξάθνληαη σο δεχγε νλνκάησλ θαη ηηκψλ, ππάξρνπλ θαη κεξηθέο νη νπνίεο επεξεάδνπλ ην ζηνηρείν απιά κε ηελ παξνπζία ηνπο κέζα ζηελ εηηθέηα εθθίλεζεο, φπσο ε ηδηφηεηα ismap ηνπ ζηνηρείνπ img. Τπάξρνπλ θαη κεξηθέο θνηλέο ηδηφηεηεο νη νπνίεο εκθαλίδνληαη ζε πνιιά ζηνηρεία: Ζ ηδηφηεηα id παξέρεη έλα αλαγλσξηζηηθφ γηα έλα ζηνηρείν ην νπνίν είλαη κνλαδηθφ ζε νιφθιεξν ην έγγξαθν. Υξεζηκνπνηείηαη γηα λα ηαπηνπνηεί ην ζηνηρείν ψζηε ηα CSS λα κπνξνχλ λα αιιάμνπλ ηνλ ηξφπν πνπ απηφ εκθαλίδεηαη, θαζψο θαη ηα ζελάξηα κπνξνχλ λα αιιάμνπλ, λα κεηαθηλήζνπλ ή λα δηαγξάςνπλ ηα πεξηερφκελα ή ηελ εκθάληζή ηνπ. Αθφκα, αλ έλα id πξνζηεζεί ζην URL κηαο ζειίδαο, παξέρεη έλα κνλαδηθφ αλαγλσξηζηηθφ γηα έλα ηκήκα ηεο ζειίδαο. Ζ ηδηφηεηα class παξέρεη ηε δπλαηφηεηα ηαμηλφκεζεο παξφκνησλ αληηθεηκέλσλ ζηελ ίδηα θιάζε. Μπνξεί λα ρξεζηκνπνηεζεί γηα λα απνδψζεη θάπνηα ζεκαζία ζην ζηνηρείν, ή γηα ζθνπνχο εκθάληζεο. Γηα παξάδεηγκα, έλα έγγξαθν HTML κπνξεί λα ρξεζηκνπνηεί ηελ επηζήκαλζε class="notation" ζε κεξηθά ζηνηρεία γηα λα μερσξίζεη απφ ην ππφινηπν θείκελν ηνπ εγγξάθνπ. Καηά ηελ εκθάληζε ηνπ εγγξάθνπ, απηά ηα ζηνηρεία κπνξεί -γηα παξάδεηγκα- λα εκθαλίδνληαη φια καδί ζην ηέινο ηεο ζειίδαο σο ππνζεκεηψζεηο, άζρεηα κε ηελ ζέζε πνπ εκθαλίδνληαη κέζα ζηνλ θψδηθα. Δπίζεο νη ηδηφηεηεο class ρξεζηκνπνηνχληαη ζεκαζηνινγηθά 15

17 ζηα microformat. Έλα ζηνηρείν κπνξεί λα έρεη πνιιαπιέο θιάζεηο, γηα παξάδεηγκα ην class="notation important" βάδεη ην ζηνηρείν ηφζν ζηελ θιάζε «notation» φζν θαη ζηελ «important». Ζ ηδηφηεηα style εθαξκφδεη ζηπι εκθάληζεο ζε ζπγθεθξηκέλα ζηνηρεία. Θεσξείηαη θαιχηεξε ηαθηηθή λα ρξεζηκνπνηνχληαη νη ηδηφηεηεο id ή class ψζηε λα επηιέγεηαη ην ζηνηρείν κέζα ζε έλα CSS, αιιά κεξηθέο θνξέο κπνξεί λα είλαη πην απιφ λα αλαηεζνχλ style θαηεπζείαλ ζην ζηνηρείν. Ζ HTML5 είλαη ε λέα έθδνζε ηεο γλσζηήο γιψζζαο πξνγξακκαηηζκνχ HTLM. Ζ πξνεγνχκελε έθδνζε, ε νπνία ρξεζηκνπνηνχκε αθφκα ζήκεξα, βγήθε ην Απφ ηφηε φκσο έρνπλ αιιάμεη πνιιά ζηνλ παγθφζκην ηζηφ, θαη έηζη ε αλάγθε γηα standards θαη πιήξε ζπκβαηφηεηα νδήγεζε ην World Wide Web Consortium (W3C) θαη ην Web Hypertext Application Technology Working Group (WHATWG) λα ζπλεξγαζηνχλ θαη λα δεκηνπξγήζνπλ ηελ λέα απηή γιψζζα. Ζ HTML5 είλαη αθφκα ππφ αλάπηπμε, αιιά κεξηθνί browsers ππνζηεξίδνπλ απφ ηψξα θάπνηα ραξαθηεξηζηηθά ηεο θαη θάπνηεο ιεηηνπξγίεο ηεο Βαςικού κανόνεσ που ϋχουν οριςτεύ για την HTML 5 Βάζε γηα ηα λέα ραξαθηεξηζηηθά λα είλαη νη HTML, CSS, DOM θαη ε JavaScript Διαρηζηνπνίεζε ησλ plug-in (φπσο ην Flash). Καιχηεξε ιεηηνπξγία εληνπηζκνχ ιαζψλ. Πεξηζζφηεξν markup γηα λα αληηθαηαζηαζεί ην scripting. Πιήξε ζπκβαηφηεηα αλεμαξηήησο ζπζθεπήο Νϋα χαρακτηριςτικϊ Σν ζηνηρείν canvas γηα ην drawing. 16

18 Σα ζηνηρεία video θαη audio γηα ηελ αλαπαξαγσγή πνιπκέζσλ. Νέα ζηνηρεία πεξηερνκέλνπ φπσο ηα footer, header, nav θαη section. Νέα ζηνηρεία δεκηνπξγίαο θφξκαο φπσο ηα calendar, date, time, , url θαη search. 3.2 CSS Σν CSS (Cascading Style Sheets-Γηαδνρηθά Φχιια ηπι) ή (αιιεινπρία θχιισλ ζηχι) είλαη κηα γιψζζα ππνινγηζηή πνπ αλήθεη ζηελ θαηεγνξία ησλ γισζζψλ θχιισλ ζηπι πνπ ρξεζηκνπνηείηαη γηα ηνλ έιεγρν ηεο εκθάληζεο ελφο εγγξάθνπ πνπ έρεη γξαθηεί κε κηα γιψζζα ζήκαλζεο. Υξεζηκνπνηείηαη δειαδή γηα ηνλ έιεγρν ηεο εκθάληζεο ελφο εγγξάθνπ πνπ γξάθηεθε ζηηο γιψζζεο HTML θαη XHTML, δειαδή γηα ηνλ έιεγρν ηεο εκθάληζεο κηαο ηζηνζειίδαο θαη γεληθφηεξα ελφο ηζηνηφπνπ. Ζ CSS είλαη κηα γιψζζα ππνινγηζηή πξννξηζκέλε λα αλαπηχζζεη ην ζηπι κηα ηζηνζειίδαο δειαδή λα δηακνξθψλεη πεξηζζφηεξα ραξαθηεξηζηηθά, ρξψκαηα, ζηνίρηζε θαη δίλεη πεξηζζφηεξεο δπλαηφηεηεο ζε ζρέζε κε ηελ html. Γηα κηα φκνξθε θαη θαινζρεδηαζκέλε ηζηνζειίδα ε ρξήζε ηεο CSS θξίλεηαη σο απαξαίηεηε ύνταξη CSS Σν CSS έρεη κηα απιή ζχληαμε θαη ρξεζηκνπνηεί κηα ζεηξά απφ αγγιηθέο ιέμεηο θιεηδηά γηα λα θαζνξίζεη ηα νλφκαηα ησλ δηαθφξσλ ηδηνηήησλ style. Έλα θχιιν style απνηειείηαη απφ κηα ιίζηα κε ηνπο θαλφλεο. Κάζε θαλφλαο ή ζεη θαλφλσλ, απνηειείηαη απφ έλα ή πεξηζζφηεξνπο selectors θαη έλα declaration block. Σν declaration block απνηειείηαη απφ κηα ιίζηα κε δειψζεηο ζε αγθχιεο. Κάζε δήισζε απνηειείηαη απφ κηα ηδηφηεηα, κηα άλσ θαη θάησ ηε-ιεία (:), κηα ηηκή. Δάλ ππάξρνπλ πνιιαπιέο δειψζεηο ζε έλα κπινθ, έλα εξσηεκαηηθφ (?) πξέπεη λα εηζάγεηαη ζε θάζε μερσξηζηή δήισζε. ηελ CSS, selectors ρξεζηκνπνηνχληαη γηα λα δειψζνπλ πνηα απφ ηα ζηνηρεία ζήκαλζεο ηζρχνπλ ζε έλα style. Οη Selectors κπνξεί λα ηζρχνπλ γηα φια ηα ζηνηρεία 17

19 ελφο ζπγθεθξηκέλνπ ηχπνπ, ή κφλν εθείλα ηα ζηνηρεία πνπ ηαηξηάδνπλ κε έλα ζπγθεθξηκέλν ραξαθηεξηζηηθφ, ηα ζηνηρεία κπνξνχλ λα ζπλδπαζηνχλ αλάινγα κε ην πψο είλαη ηνπνζεηεκέλα ζε ζρέζε κεηαμχ ηνπο ζηνλ θψδηθα ζήκαλζεο, ή γηα ην πψο είλαη έλζεηα εληφο ηνπ Document Object Model. Οη Φεπδνηάμεηο είλαη κηα άιιε κνξθή ησλ πξνδηαγξαθψλ πνπ ρξεζηκνπνηνχληαη ζε CSS γηα ηνλ πξνζδηνξηζκφ ζηνηρείσλ ζήκαλζεο, θαζψο θαη ζε νξηζκέλεο πεξηπηψζεηο, ζπγθεθξηκέλεο ελέξγεηεο ηνπ ρξήζηε ζηνλ νπνίν έλα ζπγθεθξηκέλν ηκήκα ηεο δήισζεο πνπ ηζρχεη. Έλα ζπρλά ρξεζηκνπνηνχκελν παξάδεηγκα είλαη ην : hover. Μία Pseudo-class πνπ εθαξκφδεη έλα ζηπι κφλν φηαλ ν ρξήζηεο ζεκαδεχεη ην νξαηφ ζηνηρείν, ζπλήζσο θξαηψληαο ηνλ θέξζνξα ηνπ πνληηθηνχ πάλσ απφ απηφ. Άιιεο ςεπδνηάμεηο θαη ςεπδνζηνηρεία είλαη, γηα παξάδεηγκα, :first-line,:visited ή :before Φρόςη CSS Πξηλ απφ ηελ CSS, ζρεδφλ φια ηα ραξαθηεξηζηηθά παξνπζίαζεο ησλ HTML εγγξάθσλ πεξηέρνληαλ ζην θείκελν HTML. ια ηα ρξψκαηα γξακκαηνζεηξάο, ζηπι θφληνπ, επζπγξακκίζεηο ζηνηρείν, ηα ζχλνξα θαη ηα κεγέζε πξέπεη λα πεξηγξάθνληαλ ξεηά, ζπρλά θαη' επαλάιεςε, ζην πιαίζην ηεο HTML. Ζ CSS επηηξέπεη ζηνπο ζπγγξαθείο λα θηλήζνπλ κε-γάιν κέξνο ησλ πιεξνθνξηψλ απηψλ ζε έλα μερσξηζηφ θχιιν ζηπι κε απνηέιεζκα ζεκαληηθά θαη HTML απινχζηεξεο ζήκαλζεο.οη θεθαιίδεο (h1 elements), νη ππνηνκείο (h2), ππνθαηεγνξίεο (H3), θιπ., νξίδνληαη δνκηθά κέζσ ρξήζεο HTML. Πξηλ απφ ηελ CSS, ν ζπληάθηεο ηνπ εγγξάθνπ ν νπνίνο ήζειε λα αλαζέζεη ηέηνηα ραξαθηεξηζηηθά ηππνγξαθηθά, γηα παξάδεηγκα, ην ζχλνιν ησλ θεθαιίδσλ h2 έπξεπε λα ρξεζηκνπνηήζεη ηελ HTML γξακκαηνζεηξά θαη άιια ζηνηρεία παξνπζίαζεο γηα θάζε εκθάληζε ηεο. Ζ πξφζζεηε ζήκαλζε παξνπζίαζεο ζηελ HTML γίλνληαλ απφ πην πνιχπινθα έγγξαθα θαη γεληθά ήηαλ πην δχζθνιν λα δηαηεξεζεί. ηελ CSS, ε παξνπζίαζε ρσξίδεηαη απφ ηε δνκή. ηελ εθηχπσζε, ε CSS κπνξεί λα θαζνξίζεη ην ρξψκα, ηε γξακκαηνζεηξά, ηε ζηνίρηζε ηνπ θεηκέλνπ, ην κέγεζνο, ηα ζχλνξα, ηελ απφζηαζε, ηε δηάηαμε θαη πνιιά άιια ραξαθηεξηζηηθά ηππνγξαθηθά. Απηφ κπνξεί λα ην θάλεη αλεμάξηεηα γηα ζηελ νζφλε θαη εθηππψζεηο. Ζ CSS νξίδεη επίζεο κε-νπηηθά styles, φπσο ε ηαρχηεηα θαη ε έκθαζε κε ηελ νπνία ην θείκελν ζην νπνίν γίλεηαη αλάγλσζε 18

20 απφ αθνπζηηθνχο αλαγλψζηεο θεηκέλνπ. Σν W3C ζεσξεί ηψξα ηα πιενλεθηήκαηα ησλ CSS γηα ηνλ νξηζκφ φισλ ησλ πηπρψλ ηεο παξνπζίαζεο ησλ HTML ζειίδσλ λα είλαη αλψηεξεο απφ άιιεο κεζφδνπο. Έρεη απνδνθηκαζηεί θαηά ζπλέπεηα ε ρξήζε φιεο ηεο αξρηθήο παξνπζίαζεο ζήκαλζεο HTML. 3.3 PHP H PHP είλαη κηα γιψζζα πξνγξακκαηηζκνχ γηα ηε δεκηνπξγία ζειίδσλ web κε δπλακηθφ πεξηερφκελν. Μηα ζειίδα PHP πεξλά απφ επεμεξγαζία απφ έλα ζπκβαηφ δηαθνκηζηή ηνπ Παγθφζκηνπ Ηζηνχ (π.ρ. Apache), ψζηε λα παξαρζεί ζε πξαγκαηηθφ ρξφλν ην ηειηθφ πεξηερφκελν, πνπ ζα ζηαιεί ζην πξφγξακκα πεξηήγεζεο ησλ επηζθεπηψλ ζε κνξθή θψδηθα HTML. Οη πεξηζζφηεξνη ηζηφηνπνη ρξεζηκνπνηνχλ θπξίσο ηηο εθδφζεηο 4 θαη 5 ηεο PHP. Ο ζπλδπαζκφο Linux/Apache/PHP/MySQL, πνπ είλαη ε πην δεκνθηιήο πιαηθφξκα εθηέιεζεο ηζηνζειίδσλ είλαη γλσζηφο θαη κε ην αθξσλχκην LAMP. Παξφκνηα, ν ζπλδπαζκφο */Apache/PHP/MySQL νλνκάδεηαη *AMP, φπνπ ην πξψην αξρηθφ αληηζηνηρεί ζηελ πιαηθφξκα, ζηελ νπνία εγθαζίζηαληαη ν Apache, ε PHP θαη ε MySQL (π.ρ. Windows, Mac OS X).Ο LAMP ζπλήζσο εγθαζίζηαηαη θαη ξπζκίδεηαη ζην Linux κε ηε βνήζεηα ηνπ δηαρεηξηζηή παθέησλ ηεο εθάζηνηε δηαλνκήο. ηελ πεξίπησζε άιισλ ιεηηνπξγηθψλ ζπζηεκάησλ, επεηδή ην θαηέβαζκα θαη ε ξχζκηζε ησλ μερσξηζηψλ πξνγξακκάησλ κπνξεί λα είλαη πνιχπινθε, ππάξρνπλ έηνηκα παθέηα πξνο εγθαηάζηαζε, φπσο ην XAMPP θαη ην WAMP γηα ηα Windows θαη ην MAMP γηα ην Mac ύνταξη και εντολϋσ τησ PHP Ζ ζχληαμε ηεο PHP κνηάδεη πνιχ κε ηε ζχληαμε ηεο Perl θαη ηεο C. πλήζσο ρξεζηκνπνηείηαη κε εμππεξεηεηή Apache ζε δηάθνξα ιεηηνπξγηθά ζπζηήκαηα. Παξάιιεια ππνζηεξίδεη θαη ηελ δηεπαθή Internet Server Application Programming Interface (ISAPI) θαζηζηψληαο ηε δπλαηή λα ρξεζηκνπνηεζεί θαη ζε Microsoft Windows κε εμππεξεηεηή Microsoft Internet Information Server. 19

21 Παξαθάησ εκθαλίδεηαη ν θψδηθαο ηεο Php: <?php echo "<html><body>"; Με echo απηφ "Hello"; ην θνκκάηη θψδηθα ζα δνχκε ην κήλπκα Hello ζηελ νζφλε καο, ελψ echo "</body></html>";?> Αλ επηρεηξήζεη θάπνηνο λα δεη ηνλ πεγαίν θψδηθα (source code) ζα ππάξρνπλ κφλν ηα tags ηεο HTML, ρσξίο ηηο ζεκάλζεηο ηεο Php. Οη εηηθέηεο (tags) <?php θαη?> ρξεζηκνπνηνχληαη γηα λα δεισζεί έλα κπινθ θψδηθα Php. Γηα λα είλαη ζε ζέζε ν web server λα επεμεξγαζηεί ηνλ θψδηθα ηεο Php, πξέπεη λα ηνπ πεη ν ρξήζηεο πνχ αξρίδεη θαη πνχ ηειεηψλεη έλα κπινθ θψδηθα Php. Ο θψδηθα ηεο HTML κπνξεί λα ελζσκαησζεί κέζα ζηνλ θψδηθα ηεο Php, ν νπνίνο ζα εθηειεζζεί θαλνληθά. Σν παξαπάλσ παξάδεηγκα ζα κπνξνχζε λα είρε γξαθεί θαη σο εμήο : <html><body> <?php echo "Hello";?> </body></html> Ζ εληνιή echo ρξεζηκνπνηείηαη γηα λα ζηαιεί έλα θείκελν (string) ζηνλ θπιινκεηξεηή (browser). ιεο νη εληνιέο ηεο Php πξέπεη λα ηειεηψλνπλ κε ηνλ ραξαθηήξα ; θαη κηα εληνιή κπνξεί λα επεθηαζεί θαη ζε πεξηζζφηεξεο απφ κία γξακκέο. ηαλ ν θπιινκεηξεηήο ελφο ρξήζηε δεηήζεη κηα ζειίδα Php ζαλ ηελ παξαπάλσ, ν server ζα ηελ επεμεξγαζηεί, ζα κεηαηξέςεη ηνλ θψδηθα Php ζε θαζαξή HTML κνξθή θαη έηζη ν ρξήζηεο δελ ζα κπνξέζεη λα δεη ηνλ αξρηθφ θψδηθα Php. 20

22 3.3.2 Οι μεταβλητϋσ ςτην PHP ηελ Php κπνξνχλ λα ρξεζηκνπνηεζνχλ θαη μεηαβληηές (variables) γηα ηελ απνζήθεπζε θαη ηελ αλάθηεζε δεδνκέλσλ πνπ ρξεζηκνπνηνχκε ζπρλά. ιεο νη κεηαβιεηέο πξέπεη λα αξρίδνπλ κε ηνλ ραξαθηήξα $ θαη έλα απιφ παξάδεηγκα θψδηθα Php πνπ ρξεζηκνπνηεί κεηαβιεηέο θαη εκθαλίδεη ην ίδην απνηέιεζκα κε ην πξψην παξάδεηγκα είλαη ην εμήο : <?php $string="hello"; echo "<html><body>"; echo "$string"; echo "</body></html>";?> Σν φλνκα κηαο κεηαβιεηήο κπνξεί λα απνηειείηαη απφ γξάκκαηα θαη ςεθία, αιιά πξέπεη λα μεθηλά νπσζδήπνηε κε γξάκκα. Μπνξεί λα πεξηέρεη θαη ηνλ εηδηθφ ραξαθηήξα _ (underscore). Οη κεηαβιεηέο ηεο Php κπνξνχλ λα πεξηέρνπλ θείκελν ή θαη αξηζκνχο : $string1="kavala"; $number1=2; 3.4 SQL H SQL (Structured Query Language) είλαη κία γιψζζα ππνινγηζηψλ ζηηο βάζεηο δεδνκέλσλ, πνπ ζρεδηάζηεθε γηα ηε δηαρείξηζε δεδνκέλσλ, ζε έλα ζχζηεκα δηαρείξηζεο ζρεζηαθψλ βάζεσλ δεδνκέλσλ (Relational Database Management System, RDBMS) θαη ε νπνία, αξρηθά, βαζίζηεθε ζηε ζρεζηαθή άιγεβξα. Ζ γιψζζα πεξηιακβάλεη δπλαηφηεηεο αλάθηεζεο θαη ελεκέξσζεο δεδνκέλσλ, δεκηνπξγίαο θαη ηξνπνπνίεζεο ζρεκάησλ θαη ζρεζηαθψλ πηλάθσλ, αιιά θαη ειέγρνπ πξφζβαζεο ζηα δεδνκέλα. Ζ SQL ήηαλ κία απφ ηηο πξψηεο γιψζζεο γηα 21

23 ην ζρεζηαθφ κνληέιν ηνπ Edgar F. Codd, ζην ζεκαληηθφ άξζξν ηνπ ην 1970, θαη έγηλε ε πην επξέσο ρξεζηκνπνηνχκελε γιψζζα γηα ηηο ζρεζηαθέο βάζεηο δεδνκέλσλ Γλωςςικϊ τοιχεύα τησ SQL Ζ γιψζζα SQL ππνδηαηξείηαη ζε δηάθνξα γισζζηθά ζηνηρεία, πνπ πεξηιακβάλνπλ: Clauses, νη νπνίεο είλαη ζε κεξηθέο πεξηπηψζεηο πξναηξεηηθέο, αιιά απαξαίηεηα ζπζηαηηθά ησλ δειψζεσλ θαη εξσηήζεσλ. Expressions πνπ κπνξνχλ λα παξαγάγνπλ είηε ηηο θιηκαθσηέο ηηκέο είηε πίλαθεο πνπ απνηεινχληαη απφ ζηήιεο θαη ζεηξέο ζηνηρείσλ. Predicates πνπ δηεπθξηλίδνπλ ηνπο φξνπο πνπ κπνξνχλ λα αμηνινγεζνχλ ζαλ ζσζηφ ή ιάζνο. Queries πνπ αλαθηνχλ ηα ζηνηρεία βαζηζκέλεο ζε εηδηθά θξηηήξηα. Statements πνπ κπνξνχλ λα έρνπλ κηα επίδξαζε ζηα ζρήκαηα θαη ηα ζηνηρεία, ή πνπ κπνξνχλ λα ειέγμνπλ ηε ξνή ηνπ πξνγξάκκαηνο θαη ηηο ζπλδέζεηο απφ άιια πξνγξάκκαηα. Σν θελφ αγλνείηαη γεληθά ζηηο Statements θαη ηηο Queries SQL. Έλα θελφ είλαη φκσο απαξαίηεην γηα λα μερσξίδεη Statements φπσο θαη ζηελ θαλνληθή γξαθή θεηκέλσλ Ερωτόματα προσ την Βϊςη Ζ πην θνηλή ιεηηνπξγία ην SQL είλαη ην εξψηεκα, ην νπνίν πξαγκαηνπνηείηαη κε ηελ δήισζε SELECT. Ζ SELECT αλαθηά δεδνκέλα απφ έλαλ ή πεξηζζφηεξνπο πίλαθεο, ή εθθξάζεηο. Σν Πξφηππν SELECT δελ έρεη επίκνλε επίδξαζε ζηε βάζε δεδνκέλσλ. Οξηζκέλεο κε ηππνπνηεκέλεο εθαξκνγέο ηεο SELECT κπνξνχλ λα έρνπλ επίκνλεο επηπηψζεηο, φπσο ε SELECT INTO, ε ζχληαμε ηεο νπνίαο ππάξρεη ζε νξηζκέλεο βάζεηο δεδνκέλσλ. Σα Δξσηήκαηα επηηξέπνπλ ζην ρξήζηε λα πεξηγξάςεη ηα επηζπκεηά δεδνκέλα, αθήλνληαο ην ζχζηεκα δηαρείξηζεο βάζεσλ δεδνκέλσλ (DBMS) πνπ είλαη ππεχζπλν γηα ην ζρεδηαζκφ, ηε βειηηζηνπνίεζε θαη ηελ εθηέιεζε ησλ θπζηθψλ πξάμεσλ πνπ είλαη αλαγθαίεο γηα λα παξάγνπλ απηφ ην απνηέιεζκα, δεδνκέλνπ φηη έρνπλ επηιέγεη. 22

24 Έλα εξψηεκα πεξηιακβάλεη θαηάινγν ησλ ζηειψλ πνπ ζα ζπκπεξηιεθζνχλ ζην ηειηθφ απνηέιεζκα ακέζσο κεηά ηελ SELECT. Έλαο αζηεξίζθνο («*») κπνξεί επίζεο λα ρξεζηκνπνηεζεί γηα λα δηεπθξηλίζεη φηη ην εξψηεκα ζα πξέπεη λα επηζηξέςεη φιεο ηηο ζηήιεο ησλ πηλάθσλ. Ζ SELECT είλαη ε πην ζχλζεηε δήισζε ηεο SQL, κε πξναηξεηηθέο ιέμεηο-θιεηδηά θαη ηηο εληνιέο πνπ πεξηιακβάλνπλ: Ζ εληνιή FROM ε νπνία δείρλεη απφ πνηνλ πίλαθα ζα αλαθηεζνχλ ηα ζηνηρεία. (Σν FROM κπνξεί λα πεξηιακβάλεη θαη JOIN γηα λα δηεπθξηλίζεη ηνπο θαλφλεο γηα ηελ έληαμε ησλ πηλάθσλ). Ζ εληνιή WHERE πεξηιακβάλεη έλα θαηεγφξεκα ζχγθξηζεο, ε νπνία πεξηνξίδεη ηηο γξακκέο πνπ επηζηξέθνληαη απφ ην εξψηεκα. Ζ εληνιή WHERE εμαιείθεη φιεο ηηο γξακκέο απφ ην ζχλνιν ησλ απνηειεζκάησλ γηα ηα νπνία ην θαηεγφξεκα ζχγθξηζεο δελ απνηηκάηαη ζε True. Ζ εληνιή GROUP BY ρξεζηκνπνηείηαη γηα ζεηξέο έξγσλ πνπ έρνπλ θνηλέο αμίεο ζε έλα κηθξφηεξν ζχλνιν ησλ γξακκψλ. Υξεζηκνπνηείηαη ζπρλά ζε ζπλδπαζκφ κε SQL ζπλαξηήζεηο ζπλάζξνηζεο ή γηα λα εμαιεηθζνχλ δηπιέο ζεηξέο απφ έλα ζχλνιν απνηειεζκάησλ. Ζ εληνιή WHERE εθαξκφδεηαη πξηλ απφ ηελ GROUP BY. Ζ εληνιή HAVING πεξηιακβάλεη έλα θαηεγφξεκα πνπ ρξεζηκνπνηείηαη γηα λα θηιηξάξεη γξακκέο πνπ πξνθχπηνπλ απφ ηελ GROUP BY. Δπεηδή ελεξγεί ζρεηηθά κε ηα απνηειέζκαηα ηεο GROUP BY, νη ζπλαξηήζεηο ζπλάζξνηζεο κπνξνχλ λα ρξεζηκνπνηεζνχλ ζηελ HAVING. Ζ εληνιή ORDER BY πξνζδηνξίδεη πνηεο ζηήιεο ρξεζηκνπνηνχληαη γηα λα ηαμηλνκήζνπλ ηα δεδνκέλα πνπ πξνθχπηνπλ θαη ζε πνηα θαηεχζπλζε ζα πξέπεη λα ηαμηλνκνχληαη ( νη επηινγέο είλαη αχμνπζα ή θζίλνπζα ζεηξά). Υσξίο ηελ εληνιή ORDER BY, ε ζεηξά ησλ γξακκψλ πνπ επηζηξέθνληαη απφ έλα εξψηεκα ηεο SQL είλαη απξνζδηφξηζηεο. 3.5 JavaScript και βιβλιοθόκεσ Ζ JavaScript (JS) είλαη κηα δηεξκελεπκέλε γιψζζα πξνγξακκαηηζκνχ γηα ειεθηξνληθνχο ππνινγηζηέο. Αξρηθά 23

25 απνηέιεζε κέξνο ηεο πινπνίεζεο ησλ θπιινκεηξεηψλ Ηζηνχ, ψζηε ηα ζελάξηα απφ ηελ πιεπξά ηνπ πειάηε (client-side scripts) λα κπνξνχλ λα επηθνηλσλνχλ κε ηνλ ρξήζηε, λα αληαιιάζζνπλ δεδνκέλα αζχγρξνλα θαη λα αιιάδνπλ δπλακηθά ην πεξηερφκελν ηνπ εγγξάθνπ πνπ εκθαλίδεηαη. Ζ JavaScript είλαη κηα γιψζζα ζελαξίσλ πνπ βαζίδεηαη ζηα πξσηφηππα (prototype-based), είλαη δπλακηθή, κε αζζελείο ηχπνπο θαη έρεη ζπλαξηήζεηο σο αληηθείκελα πξψηεο ηάμεο. Ζ ζχληαμή ηεο είλαη επεξεαζκέλε απφ ηε C. Ζ JavaScript αληηγξάθεη πνιιά νλφκαηα θαη ζπκβάζεηο νλνκαηνδνζίαο απφ ηε Java, αιιά γεληθά νη δχν απηέο γιψζζεο δε ζρεηίδνληαη θαη έρνπλ πνιχ δηαθνξεηηθή ζεκαζηνινγία. Ζ JavaScript ρξεζηκνπνηείηαη θαη ζε εθαξκνγέο εθηφο ηζηνζειίδσλ. Tέηνηα παξαδείγκαηα είλαη ηα έγγξαθα PDF, νη εμεηδηθεπκέλνη θπιινκεηξεηέο (site-specific browsers) θαη νη κηθξέο εθαξκνγέο ηεο επηθάλεηαο εξγαζίαο (desktop widgets). Οη λεφηεξεο εηθνληθέο κεραλέο θαη πιαίζηα αλάπηπμεο γηα JavaScript (φπσο ην Node.js) έρνπλ επίζεο θάλεη ηε JavaScript πην δεκνθηιή γηα ηελ αλάπηπμε εθαξκνγψλ Ηζηνχ ζηελ πιεπξά ηνπ δηαθνκηζηή (server-side).σν πξφηππν ηεο γιψζζαο θαηά ηνλ νξγαληζκφ ηππνπνίεζεο ECMA νλνκάδεηαη ECMAscript Μοντϋλο Εκτϋλεςησ Ζ αξρηθή έθδνζε ηεο Javascript βαζίζηεθε ζηε ζχληαμε ζηε γιψζζα πξνγξακκαηηζκνχ C, αλ θαη έρεη εμειηρζεί, ελζσκαηψλνληαο πηα ραξαθηεξηζηηθά απφ λεφηεξεο γιψζζεο. Αξρηθά ρξεζηκνπνηήζεθε γηα πξνγξακκαηηζκφ απφ ηελ πιεπξά ηνπ πειάηε (client), πνπ ήηαλ ν θπιινκεηξεηήο (browser) ηνπ ρξήζηε, θαη ραξαθηεξίζηεθε ζαλ client-side γιψζζα πξνγξακκαηηζκνχ. Απηφ ζεκαίλεη φηη ε επεμεξγαζία ηνπ θψδηθα Javascript θαη ε παξαγσγή ηνπ ηειηθνχ πεξηερνκέλνπ HTML δελ πξαγκαηνπνηείηαη ζην δηαθνκηζηή, αιιά ζην πξφγξακκα πεξηήγεζεο ησλ επηζθεπηψλ, ελψ κπνξεί λα ελζσκαησζεί ζε ζηαηηθέο ζειίδεο HTML. Αληίζεηα, άιιεο γιψζζεο φπσο ε PHP εθηεινχληαη ζην δηαθνκηζηή (server-side γιψζζεο πξνγξακκαηηζκνχ). Παξά ηελ επξεία ρξήζε ηεο Javascript γηα ζπγγξαθή πξνγξακκάησλ ζε πεξηβάιινλ θπιινκεηξεηή, αμίδεη λα ζεκεησζεί φηη απφ ηελ αξρή ρξεζηκνπνηήζεθε θαη γηα ηε ζπγγξαθή θψδηθα απφ ηελ πιεπξά ηνπ δηαθνκηζηή, απφ ηελ ίδηα ηε Netscape ζην πξντφλ LiveWire, κε κηθξή επηηπρία. Ζ ρξήζε ηεο Javascript ζην 24

26 δηαθνκηζηή εκθαλίδεηαη πάιη ζήκεξα, κε ηε δηάδνζε ηνπ Node.js, ελφο κνληέινπ πξνγξακκαηηζκνχ βαζηζκέλν ζηα γεγνλφηα (events) Εφαρμογϋσ JavaScript Με ηελ JavaScript κπνξνχλ λα πινπνηεζνχλ ζελάξηα πνπ λα εθηεινχλ απηφκαηεο εξγαζίεο, π.ρ φηαλ κηα ζειίδα ηνπ Web αλνίγεη ή θιείλεη. Δπίζεο ε JavaScript κπνξεί λα εθηειεί ελέξγεηεο αληαπνθξηλφκελε ζε έλα ζπγθεθξηκέλν γεγνλφο. Γηα παξάδεηγκα φηαλ ν ρξήζηεο επηιέγεη έλα θνπκπί ή έλα ζχλδεζκν, ή φηαλ εζηηάδεη απφ έλα ζηνηρείν κηαο θφξκαο ζε έλα άιιν ζηνηρείν ηεο. Οη ελέξγεηεο απηέο κπνξεί λα είλαη απιέο. Σα ζελάξηα κπνξεί λα αλνίγνπλ λέα παξάζπξα ζην browser θαη λα εκθαλίδνπλ ζπγθεθξηκέλα HTML έγγξαθα ή λα παξνπζηάδνπλ κηα ζειίδα επηιεγκέλε απφ ηνλ θαηάινγν ηζηνξηθνχ ηνπ browser. Μπνξεί επίζεο λα είλαη θαη πεξίπινθεο. Γειαδή έλα ζελάξην κπνξεί λα ειέγρεη ηα πεξηερφκελα κηαο θφξκαο πνπ ζέιεη λα ππνβάιεη έλαο ρξήζηεο θαη ζηε ζπλέρεηα λα πξνεηδνπνηεί ηνλ ρξήζηε αλ ηα δεδνκέλα είλαη ιάζνο. Σν ζελάξην κπνξεί λα ςάμεη γηα πιεξνθνξίεο ζε κηα κηθξή βάζε δεδνκέλσλ ή λα θάλεη πνιχπινθνπο ππνινγηζκνχο νηθνλνκηθψλ ζηνηρείσλ Σι μπορεύ να δημιουργηθεύ με την JavaScript Πνιπκεξή έγγξαθα κε πιαίζηα. Δπαλαθφξησζε κέξνπο ηνπ παξαζχξνπ. Γεκηνπξγία εγγξάθσλ κε αιιειεπίδξαζε. Πεξηζζφηεξνο έιεγρνο ζηελ αιιειεπίδξαζε κε ην ρξήζηε. Έγγξαθα κε κλήκε. Εσληαλά έγγξαθα. Μελχκαηα πνπ νιηζζαίλνπλ. Ρνιφγηα. Υξνληθφο κεραληζκφο αληίζηξνθεο κέηξεζεο. Έγγξαθα κε απηφκαηε ελεκέξσζε. 25

27 3.5.3 JQuery Ζ jquery είλαη µηα βηβιηνζήθε ηεο Javascript ε νπνία δίλεη ηε δπλαηφηεηα γηα ηε δεκηνπξγία δηάθνξσλ εθέ ζηε ζειίδα, ρσξίο φκσο λα ρξεηάδεηαη ε πνζφηεηα θψδηθα πνπ ζα ρξεζηκνπνηνχηαλ ζηελ παξαδνζηαθή Javascript. Ζ jquery κπνξεί λα θάλεη πάξα πνιιά πξάγκαηα ζε κηα ζειίδα φπσο επηινγή θαη δηακφξθσζε HTML ζηνηρείσλ, δηακφξθσζε CSS ζηνηρείσλ, δηεξγαζίεο HTML γεγνλφησλ, εθέ JavaScript θαη animations, δηακφξθσζε ηνπ HTML DOM [Document Object Module], ρξήζε AJAX αιιά θαη πιεζψξα άιισλ εθαξκνγψλ. χκθσλα µε ηε ιεηηνπξγία ηεο jquery, θαη γεληθφηεξα ηεο Javascript, πξψηα επηιέγεη ν ρξήζηεο δηάθνξα ζηνηρεία ηεο ζειίδαο θαη κεηά ηα αμηνπνηεί µέζσ εληνιψλ. Γεληθφηεξα, µε ηελ Javascript κπνξνχλ λα ηξνπνπνηεζνχλ δηάθνξα ζηνηρεία πνπ βξίζθνληαη ζην DOM[Document Object Model], δειαδή ζηε ζειίδα. Δθφζνλ θνξησζεί ε jquery, δεκηνπξγείηε κέζα ζην <head> ν παξαθάησ θψδηθαο: <script type="text/javascript"> $(document).ready(function(){ }); </script> Ο παξαπάλσ θψδηθαο είλαη ε γλσζηή εληνιή ηεο jquery.ready(), πνπ εμαζθαιίδεη φηη φια ηα ζηνηρεία ζηε ζειίδα [DOM] έρνπλ θνξησζεί, πξηλ μεθηλήζνπλ νη επηινγέο θαη νη εληνιέο ηεο. Έηζη, ν ρξήζηεο βεβαηψλεηαη φηη ππάξρεη ην ζηνηρείν πνπ ζέιεη. Κάπνηα απφ ηα πιενλεθηήκαηα ηεο jquery είλαη φηη αθνινπζεί ηελ αξρή KISS [Keep It Simple Stupid]. Ζ βηβιηνζήθε jquery πξνζπαζεί λα ππεξαπινπζηεχζεη ηνλ πξνγξακκαηηζκφ ζε Javascript, µε πξαγκαηηθά εχθνινπο κεραληζκνχο µέζσ ηνπ framework ηεο. πσο γηα ηα πεξηζζφηεξα open source έξγα ινγηζµηθνχ, έηζη θαη γηα ηε jquery ε χπαξμε µίαο θαηά ην κέγηζην δπλαηφ ελεξγήο θνηλφηεηαο απνηειεί ηνλ αθξνγσληαίν ιίζν γηα ηελ αλάπηπμε θαη επεκεξία ηνπ. Δπίζεο, ην γεγνλφο φηη ην βαζηθφ παθέην ηεο jquery είλαη µφιηο 20KΒ, θάλεη πνιχ εχθνιε ηελ θαηαλφεζε ηεο αξρηηεθηνληθήο ηεο. Σέινο, ε jquery επηηξέπεη ζην ρξήζηε λα ρξεζηκνπνηήζεη ζρεδφλ ην ζχλνιν ησλ δπλαηνηήησλ πνπ πξνζθέξεη ε γιψζζα JavaScript, απφ απιά 26

28 ραξαθηεξηζηηθά πνπ ζρεηίδνληαη µε βαζηθέο ιεηηνπξγίεο εκθάληζεο/απφθξπςεο σο Ajax θιήζεηο θαη ζχλζεηα εθέ JQuery UI Ζ Βηβιηνζήθε JQuery UI είλαη κία ζπιινγή απφ επαλαρξεζηκνπνηήζηκα αξρεία πνπ επηηξέπεη λα γίλεη ε ιεηηνπξγηθφηεηα ηεο δηεπαθήο ηνπ ρξήζηε πην γξήγνξα. Ζ βηβιηνζήθε απηή δηαρεηξίδεηαη έλαλ αξηζκφ εξγαζηψλ, φπσο θάλνληαο ηα ζηνηρεία ζε έλα έγγξαθν ζπξφκελα ή δεκηνπξγψληαο κία ιίζηα απφ αληηθείκελα πνπ κπνξνχκε λα ηα αλαδηαηάμνπκε κε drug and drop.ζ Βηβιηνζήθε JQuery UI είλαη κία ζεηξά απφ JQuery plugins θάζε έλα απφ ηα νπνία ρεηξίδεηαη απηά ηα δηαθνξεηηθά UI θαζήθνληα (UI tasks). Ζ JQuery UI πεξηιακβάλεη: Implementing Drag-and-Drop Drag-and-Drop Sorting Selection by Drawing a Box Accordion UI Datepicker Block UI Dialogs Tabs α) Accordion (GUI) ε κία γξαθηθή δηεπαθή ρξήζηε ην «accordion» ηνπνζεηείηαη θάζεηα ζε κία ιίζηα ζηνηρείσλ(πρ εηηθέηεο ή κηθξνγξαθίεο). Κάζε ζηνηρείν κπνξεί λα διεσρσμένο ή ηενηωμένο γηα λα απνθαιχςεη ην πεξηερφκελν πνπ ζρεηίδεηαη κε απηφ ην ζηνηρείν. Μπνξεί λα ππάξρεη έλα ή πεξηζζφηεξα ζηνηρεία πξνο επέθηαζε ζηνλ ίδην ρξφλν αλάινγα κε ηελ δηακφξθσζε. Ο φξνο πξνέξρεηαη απφ ην κνπζηθφ φξγαλν αθνξληεφλ ζην νπνίν ηκήκαηα ηεο θπζνχλαο κπνξνχλ λα επεθηαζνχλ κε ηξάβεγκα πξνο ηα έμσ. Έλα θνηλφ παξάδεηγκα accordion(gui) είλαη ε εκθάληζε/απφθξπςε ηεο ιεηηνπξγίαο κηα πεξηνρήο ζε «θνπηί». Δπεθηείλνληαο ην κπνξεί λα έρεη πνιιαπιά ηκήκαηα ζε 27

29 ιίζηα. Σν accordion(gui) ζρεηίδεηαη κε θαξηέιεο δηεπαθήο, κία νξηδφληηα ιίζηα ζηνηρείσλ φπνπ έλα ζηνηρείν έρεη επεθηαζεί ζε έλα παξάζπξν(ζπληνκεχζεηο γηα λα απνθηήζνπκε πξφζβαζε ζε μερσξηζηά παξάζπξα). Οριςμόσ για προγραμματιςτϋσ Πνιιά θνπκπηά ή εηηθέηεο ζηνηβάδνληαη ην έλα πάλσ ζην άιιν. Δπί πιένλ έλα απφ απηά κπνξεί λα είλαη ελεξγφ. ηαλ έλα θνπκπί είλαη ελεξγφ, ν ρψξνο απφ θάησ ρξεζηκνπνηείηαη γηα λα εκθαλίζεη έλα άιιν παξάζπξν. Σν παξάζπξν απηφ ζπλήζσο πεξηνξίδεηαη απφ ην πιάηνο ησλ εηηθεηψλ θαη φηαλ αλνίμεη κεηαηνπίδεη ηηο εηηθέηεο θάησ απφ ηελ ελεξγή εηηθέηα, αλάινγα κε ην χςνο ηνπ παξαζχξνπ. Χο απνηέιεζκα κφλν έλα θνπκπί ή παξάζπξν λα είλαη ελεξγφ θάζε θνξά. ηαλ ινηπφλ επηιέμνπκε έλα θνπκπί θάζε άιιν ελεξγφ παξάζπξν ζηακαηάεη λα είλαη ελεξγφ θαη θξχβεηαη. Σν ελεξγφ παξάζπξν κπνξεί λα έρεη ζεκεία θχιηζεο(scrollbars). κοπόσ Δλψλεη ηα παξάζπξα πνπ ζα έπξεπε λα έρνπλ θάπνηα ζρέζε κεηαμχ ηνπο. Έλα δηαζέζηκν παξάζπξν ηε θνξά είλαη αλνηρηφ ψζηε λα κεησζεί ε ππεξθφξησζε ησλ πιεξνθνξηψλ Σα κε δηαζέζηκα παξάζπξα βξίζθνληαη ζε ζπληφκεπζε ή είλαη θξπκκέλα ψζηε λα θάλνπλ ηελ επηινγή φζν ην δπλαηφλ πην γξήγνξε. Οριςμόσ χρόςτη Σα πνιιαπιά παξάζπξα ζηνηβάδνληαη ην έλα πάλσ ζην άιιν. ια ηνπο είλαη θξπκκέλα ψζηε κφλν νη επηθεθαιίδεο ηνπο λα είλαη νξαηέο. Αλ έλα απφ απηά παηεζεί ψζηε λα γίλεη ελεξγφ ηφηε ην πεξηερφκελν ηνπ απνθαιχπηεηαη θαη ηα ππφινηπα παξάζπξα κεηαηνπίδνληαη απφ πάλσ ή απφ θάησ. Μφλν έλα απφ απηά κπνξεί λα είλαη ελεξγφ θάζε θνξά. 28

30 β) Datepicker Ζ JQurey UI πξνζθέξεη κηα εθιεπηπζκέλε θαη πινχζηα ζε ραξαθηεξηζηηθά ζηνηρεία ζπλάξηεζε UI γηα ηελ εηζαγσγή εκεξνκεληψλ κέζσ ηνπ plugin ηεο Datepicker. H Datepicker παξέρεη έλα γξαθηθφ εκεξνιφγην πνπ κπνξεί λα ξπζκηζηεί ψζηε λα αλαδχεηαη νπνπδήπνηε ρξεηαζηεί, αξθεί λα πιεθηξνινγεζεί κηα εκεξνκελία. Σν εκεξνιφγην θαζψο θαη ε κνξθή ηεο εκεξνκελίαο κπνξνχλ λα πξνζαξκνζηνχλ αλάινγα κε ηηο απαηηήζεηο. γ) Block UI Σν Plug-in ηεο JQurey Block UI επηηξέπεη ηελ πξνζνκνίσζε ηεο ζχγρξνλεο ζπκπεξηθνξάο ηεο ζειίδαο ρξεζηκνπνηψληαο AJAX, ρσξίο ην θιείδσκα ηνπ πξνγξάκκαηνο πεξηήγεζεο. ηαλ ελεξγνπνηεζεί, ζα απνηξέςεη ηε δξαζηεξηφηεηα ηνπ ρξήζηε ζηελ ζειίδα ή κέξνο ηεο ζειίδαο κέρξη λα απελεξγνπνηεζεί. Σν Block UI πξνζζέηεη ζηνηρεία ζην DOM(Document Oblject Model) γηα λα ηα δψζεη ηφζν ζηελ εκθάληζε φζν θαη ζηελ ζπκπεξηθνξά γηα ηνλ απνθιεηζκφ ηεο αιιειεπίδξαζεο ηνπ ρξήζηε. 3.6 Άλλεσ Σεχνολογύεσ Ajax Ζ ηερλνινγία Ajax, πνπ κεξηθέο θνξέο γξάθεηαη σο AJAX (ζπληνκνγξαθία γηα ηνasynchronous JavaScript and XML2), είλαη κηα νκάδα αιιειέλδεησλ ηερληθψλ αλάπηπμεο ηζηνζειίδσλ, πνπ ρξεζηκνπνηνχληαη απφ ηνλ ππνινγηζηή-πειάηε(client-side), γηα ηε δεκηνπξγία δηαδηθηπαθψλ εθαξκνγψλ. Με ηε ηερληθή Ajax, νη δηαδηθηπαθέο εθαξκνγέο κπνξνχλ λα πάξνπλ δεδνκέλα απφ ην δηαθνκηζηή αζχγρξνλα ζην παξαζθήλην ρσξίο λα παξεκβαίλνπλ ζηελ εκθάληζε θαη ηε ζπκπεξηθνξά ησλ πθηζηάκελσλ ζειίδσλ. Ζ ρξήζε ηεο ηερληθήο Ajax έρεη νδεγήζεη ζε αχμεζε ησλ δηαινγηθψλ ή δηαδξαζηηθψλ δηεπαθψλ ζηηο δπλακηθέο ηζηνζειίδεο θαζψο θαη ζηε βειηίσζε ηεο πνηφηεηαο ησλ ππεξεζηψλ ηνπ δηαδηθηχνπ, ιφγσ ηεο αζχγρξνλεο ιεηηνπξγίαο ηνπ. Σα δεδνκέλα 29

31 ζπλήζσο αλαθηψληαη ρξεζηκνπνηψληαο ην αληηθείκελν XMLHttpRequest. Παξά ηελ νλνκαζία, ε ρξήζε ηνπ JavaScript θαη XML δελ απαηηείηαη ζηελ πξαγκαηηθφηεηα, νχηε ηα αηηήκαηα πνπ γίλνληαη πξέπεη λα είλαη αζχγρξνλα. Ζ ηερληθή Ajax δελ είλαη κηα ηερλνινγία απφ κφλε ηεο, αιιά κηα νκάδα ηερλνινγηψλ. Υξεζηκνπνηεί έλα ζπλδπαζκφ: HTML θαη CSS γηα ηε ζήκαλζε θαη γηα ηελ εκθάληζε. Πξφζβαζε ζηελ DOM κε ηελ JavaScript, γηα λα εκθαλίδνληαη θαη λα αιιειεπηδξνχλ δπλακηθά κε ηηο πιεξνθνξίεο πνπ παξνπζηάδνληαη. Μηα κέζνδν γηα ηελ αζχγρξνλε αληαιιαγή δεδνκέλσλ κεηαμχ browser θαη server, απνθεχγνληαο έηζη ηηο επαλαθνξηψζεηο ησλ ζειίδσλ. Σν αληηθείκελν απηφ είλαη ην XMLHttpRequest (XHR) θαη ρξεζηκνπνηείηαη ηηο πεξηζζφηεξεο θνξέο, αιιά κεξηθέο θνξέο έλα αληηθείκελν iframe ή κηα δπλακηθά πξνζηηζέκελε <script> εηηθέηα αληί απηνχ. Μηα κνξθή γηα ηα δεδνκέλα ηα νπνία απνζηέιινληαη ζηνλ browser. Οη πνην ζπλεζηζκέλεο κνξθέο είλαη είηε XML, είηε πξν-κνξθνπνηεκέλε HTML, είηε απιφ θείκελν, ή JavaScript Object Notation (JSON) Geocoding Σν Geocoding είλαη ε δηαδηθαζία γηα ηελ εμεχξεζε γεσγξαθηθά ζπλδεφκελσλ ζπληεηαγκέλσλ (ζπρλά αλαθεξφκελσλ σο γεσγξαθηθφ κήθνο θαη πιάηνο) απφ άιια γεσγξαθηθά δεδνκέλα φπσο δηεπζχλζεηο νδψλ ή ηαρπδξνκηθνχο θψδηθεο. Με ηηο γεσγξαθηθέο ζπληεηαγκέλεο ηα ραξαθηεξηζηηθά κπνξνχλ λα ραξηνγξαθεζνχλ θαη λα εηζέιζνπλ ζε Γεσγξαθηθά πζηήκαηα Πιεξνθνξηψλ. ε άιιε πεξίπησζε νη ζπληεηαγκέλεο κπνξνχλ λα ελζσκαησζνχλ ζε άιια κέζα ελεκέξσζεο φπσο νη ςεθηαθέο θσηνγξαθίεο κέζσ ηνπ geotagging. Σν geocoder είλαη έλα θνκκάηη ηνπ ινγηζκηθνχ ή κία δηαδηθηπαθή ππεξεζία πνπ βνεζά ζε απηή ηε δηαδηθαζία. Παξεκβνιή δηεύζπλζεο Μηα απιή κέζνδνο geocoding είλαη ε παξεκβνιή δηεχζπλζεο. Απηή ε κέζνδνο θάλεη ρξήζε ησλ δεδνκέλσλ απφ έλα ζχζηεκα γεσγξαθηθψλ πιεξνθνξηψλ ηνπ 30

32 δξφκνπ, φπνπ ην νδηθφ δίθηπν είλαη ήδε ραξηνγξαθεκέλν κέζα ζηνλ γεσγξαθηθφ ρψξν ζπληεηαγκέλσλ. Κάζε ηκήκα ηνπ δξφκνπ απνδίδεηαη κε πεξηνρέο δηεπζχλζεσλ (π.ρ. αξηζκνί ζπηηηψλ απφ ην έλα ηκήκα ζην άιιν). Σν Geocoding παίξλεη κηα δηεχζπλζε, ηελ αληηζηνηρεί ζε έλα δξφκν θαη ζην ζπγθεθξηκέλν ηκήκα (φπσο έλα κπινθ, ζε πφιεηο πνπ ρξεζηκνπνηνχλ ηε "κπινθ" ζχκβαζε). Σν Geocoding παξεκβάιιεη ζηε ζπλέρεηα ηε ζέζε ηεο δηεχζπλζεο, εληφο ηεο πεξηνρήο θαη θαηά κήθνο ηνπ ηκήκαηνο. Υξήζε ηνπ Geocoding Οη γεσγξαθηθά θσδηθνπνηεκέλεο ζέζεηο είλαη ρξήζηκέο ζε πνιιέο αλαιχζεηο ηνπ Γεσγξαθηθνχ πζηήκαηνο Πιεξνθνξηψλ (GIS) θαη ζηε ραξηνγξαθία. ην δηαδίθηπν, ην Geocoding ρξεζηκνπνηείηαη ζε ππεξεζίεο φπσο ε δξνκνιφγεζε θαη ε ηνπηθή αλαδήηεζε. Σν Geocoding, καδί κε ην GPS παξέρεη δεδνκέλα ζέζεο γηα ηα κέζα ελεκέξσζεο geotagging, φπσο θσηνγξαθίεο ή ηα ζηνηρεία RSS (Really Simple Syndication). Άιιεο Σερληθέο Άιια κέζα geocoding πεξηιακβάλνπλ ηνλ εληνπηζκφ ελφο ζεκείνπ ζην θέληξν βάξνπο (θέληξν) ελφο γεσηεκαρίνπ, αλ ηα δεδνκέλα είλαη δηαζέζηκα ζηε βάζε δεδνκέλσλ ηνπ ζπζηήκαηνο γεσγξαθηθψλ πιεξνθνξηψλ. ηηο αγξνηηθέο πεξηνρέο ή ζε άιινπο ρψξνπο πνπ ζηεξνχληαη δεδνκέλα πςειήο πνηφηεηαο νδηθνχ δηθηχνπ, ην GPS είλαη ρξήζηκν γηα ηελ θαηαγξαθή κηαο ηνπνζεζίαο Open Layers Σν OpenLayers δηεπθνιχλεη ηνπο πξνγξακκαηηζηέο δηαδηθηπαθψλ εθαξκνγψλ λα ελζσκαηψζνπλ ζηηο ζειίδεο ηνπο δπλακηθνχο ράξηεο, απφ κηα πιεζψξα πεγψλ δεδνκέλσλ. Σν OpenLayers παξέρεη έλα επεθηάζηκν ζχλνιν ραξηνγξαθηθψλ εξγαιείσλ θαη παξαζχξσλ, παξφκνηα κε ην Google Maps API. ιε ε 31

33 ιεηηνπξγηθφηεηα εθηειείηαη ζηνλ πεξηεγεηή, θάηη ην νπνίν θαζηζηά ην OpenLayers πνιχ εχθνιν ζηελ εγθαηάζηαζε, ρσξίο θαζφινπ εμάξηεζε απφ ηνλ εμππεξεηεηή. Βαζηθά Υαξαθηεξηζηηθά Δχθνιν ζηε ρξήζε κέζσ πξνγξακκαηηζηηθψλ δηεπαθψλ Javascript, ζρεδηαζκέλν λα θάλεη ηνλ πξνγξακκαηηζκφ εχθνιν Τπνζηήξημε δηαδεδνκέλσλ θαη θαζηεξσκέλσλ πξσηνθφιισλ γηα επηθνηλσλία κε ηνπο εμππεξεηεηέο. Δξγαιεία γηα δεκηνπξγία γξαθηθψλ δηεπαθψλ. Τπνζηήξημε εκθάληζεο δεδνκέλσλ ζηνλ πεξηεγεηή (κε ηε ρξήζε πξνηχπσλ SVG, VML, ή ηερλνινγηψλ Canvas), ππνζηεξίδνληαο ηελ αλάπηπμε ζχλζεησλ ραξηψλ κέζα ζηνλ πεξηεγεηή. Τπνζηήξημε γηα θνξεηέο ζπζθεπέο (κε έκθαζε ζηηο ζπζθεπέο αθήο). Γπλαηφηεηα θφξησζεο επηπέδσλ ραξηψλ απφ νπνηαδήπνηε πεγή: Δκπνξηθά επίπεδα: Google, Bing, Yahoo Πξφηππα OGC: WMS, WMTS, WFS, WFS-T, GeoRS, GML Γπλαηφηεηα λα πξνζπειάζεη δηαλπζκαηηθά δεδνκέλα θαη κεηαδεδνκέλα ζε νπνηνδήπνηε πξφηππν: Atom, ArcXML, GeoJSON, GeoRSS, KML, OSM, SLD, WMTS TinyMCE Σν TinyMCE, επίζεο γλσζηφ θαη σο Tiny Moxiecode Content Editor είλαη κία πιαηθφξκα πνπ ιεηηνπξγεί αλεμάξηεηα απφ ηελ JavaScript θαη ηελ HTML θαη θπθινθφξεζε σο ινγηζκηθφ αλνηρηνχ θψδηθα απφ ηελ LGPL. Έρεη ηελ ηθαλφηεηα λα κεηαηξέπεη HTML textarea πεδία ή άιια ζηνηρεία HTML ζε πεξηπηψζεηο επεμεξγαζίαο. Σν TinyMCE έρεη ζρεδηαζηεί γηα λα ελζσκαηψλεηαη εχθνια κε ην ζχζηεκα δηαρείξηζεο πεξηερνκέλνπ ζπκπεξηιακβαλνκέλσλ ησλ Drupal, Joomla, WordPress θαη SOY CMS. 32

34 Κύξηα ραξαθηεξηζηηθά Πξνζθέξεη εξγαιεία κνξθνπνίεζεο ηεο HTML, φπσο ε έληνλε γξαθή, πιάγηα γξαθή, ππνγξάκκηζε, ηφζν ηαμηλνκεκέλεο φζν θαη κε ηαμηλνκεκέλεο ιίζηεο, δηάθνξα είδε επζπγξάκκηζεο, in-line ηνπνζέηεζε ησλ εηθφλσλ θαη βίληεν, θιπ. Δίλαη πνιχ ρξήζηκν γηα φζνπο ζέινπλ λα επηηξέπνπλ ζηνπο ρξήζηεο ηνπο λα επεμεξγαζηνχλ HTML έγγξαθα ζε απεπζείαο ζχλδεζε. Οη δηάθνξεο επηινγέο κπνξνχλ λα ξπζκηζηνχλ θαηά ηε ζηηγκή ηεο νινθιήξσζεο ελφο έξγνπ, ην νπνίν βειηηψλεη ηελ επειημία ηνπ. πκβαηόηεηα πξνγξάκκαηνο πεξηήγεζεο Σν TinyMCE είλαη ζπκβαηφ κε πνιιά πξνγξάκκαηα πεξηήγεζεο, ζπκπεξηιακβαλνκέλνπ ηνπ Internet Explorer, Mozilla Firefox, Safari, Opera θαη Google Chrome, ζε πνιιαπιά ιεηηνπξγηθά ζπζηήκαηα. 3.7 Browser addons και πρόςθετα εργαλεύα Colorzilla Σν colorzilla είλαη έλα addon ηνπ Firefox πνπ βνεζά ηνπο ζρεδηαζηέο ηζηνζειίδσλ θαη ηνπο γξαθίζηεο ζε ζέκαηα πνπ αθνξνχλ ηνλ ρξσκαηηζκφ. Δίλαη έλα ρξήζηκν εξγαιείν ηφζν γηα ηνπο αξράξηνπο φζν θαη γηα ηνπο επαγγεικαηίεο. Έλα ρξψκα απφ νπνηνδήπνηε ηκήκα ηνπ browser κπνξεί λα ρξεζηκνπνηεζεί θαη πξνζαξκφδνληαο ην λα ην γίλεη επηθφιιεζε ζε έλα άιιν πξφγξακκα. Μπνξεί επίζεο λα γίλεη αλάιπζε κηαο ζειίδαο ψζηε λα δεη ν ρξήζηεο ηελ παιέηα ησλ ρξσκάησλ ηεο. Ζ ελζσκαησκέλε παιέηα ηνπ πξνγξάκκαηνο πεξηήγεζεο επηηξέπεη ηελ αλάιπζε ησλ ρξσκάησλ απφ πξνθαζνξηζκέλα ζχλνια θαη ηελ απνζήθεπζε ηνπο. Κάλνληαο θιηθ ζην εηθνλίδην πνπ 33

35 ζα εκθαληζηεί κεηά ηελ εγθαηάζηαζε ηνπ ζην θάησ κέξνο ηνπ Firefox, ελεξγνπνηείηαη ε ππεξεζία ηνπ addon MeasureIt Σν Mesurelt είλαη έλα extension ηνπ Firefox πνπ επηηξέπεη ζηνπο πξνγξακκαηηζηέο λα κεηξήζνπλ κε αθξίβεηα ηα ζηνηρεία κηαο ηζηνζειίδαο. Δπηιέγνληαο κηα πεξηνρή πάλσ ζηε ζειίδα, ην Mesurelt πξνζαξκφδεη ηελ επηιεγκέλε πεξηνρή θαη κε drag n drop κπνξεί λα κεηαθηλεζεί γχξσ απφ ηελ πεξηνρή ηεο κέηξεζεο. Σν Mesurelt είλαη έλα ρξήζηκν εξγαιείν πνπ επηηξέπεη: Σνλ πξνζδηνξηζκφ ηνπ πιάηνο ελφο ζηνηρείνπ πνπ πξέπεη λα ηνπνζεηεζεί ζε κία ζειίδα. Σνλ πξνζδηνξηζκφ ηνπ πιάηνπο/χςνπο ελφο ζηνηρείνπ κε ζθνπφ ηελ ηνπνζέηεζε άιισλ ζηνηρείσλ γχξσ απφ απηφ. Σνλ πξνζδηνξηζκφ ηνπ δηαζέζηκνπ ρψξνπ κεηαμχ δχν ζηαζεξψλ ζηειψλ ψζηε λα γίλεη ελζσκάησζε ελφο άιινπ ζηνηρείνπ. Σελ εθηίκεζε νπηηθά, ηνπ θαιχηεξνπ κεγέζνπο νζφλεο ψζηε λα ελζσκαησζεί κηα εηθφλα ή έλα βίληεν FIREBUG To Firebug είλαη έλα απφ ηα δεκνθηιέζηεξα addon γηα ηνλ Mozilla Firefox, ην νπνίν δίλεη πνιιέο δπλαηφηεηεο ζε φηη έρεη λα θάλεη κε ην web development θαη ην web design. Δπηηξέπεη ζηνλ ρξήζηε λα δεη ηνπο θψδηθεο HTML, CSS θαη Javascript, πίζσ απφ θάζε ηζηνζειίδα πνπ αλνίγεη, θαη κάιηζηα επηηξέπεη ηηο αιιαγέο ζε ηνπηθφ επίπεδν. Με απηφλ ηνλ ηξφπν θνηηάδνληαο ηελ ηζηνζειίδα, ν ρξήζηεο κπνξεί λα θάλεη αιιαγέο ζηα δηάθνξα ζηνηρεία πνπ ηελ απνηεινχλ, φπσο ζηνλ θψδηθα CSS 34

36 Βαζηθά Υαξαθηεξηζηηθά Έιεγρνο θαη δηακόξθσζε HTML Μπνξεί λα δηακνξθψζεη ηνλ HTML θψδηθα πνπ βξίζθεηαη πίζσ απφ ηελ ηζηνζειίδα θαη νη αιιαγέο λα πξνβάιινληαη δσληαλά Αιιαγέο ζηνλ CSS θώδηθα Σν Firebug δίλεη ηελ δπλαηφηεηα ζηνλ ρξήζηε λα θάλεη αιιαγέο ζηηο κεηαβιεηέο ηνπ θψδηθα CSS θαη έηζη λα πεηξακαηηζηεί κε ηα ρξψκαηα, ηα κεγέζε ησλ γξακκαηνζεηξψλ θαη πνιιά άιια. Παξαθνινύζεζε ηνπ Network activity Πξνζθέξεη θξίζηκεο πιεξνθνξίεο γηα ηνλ ιφγν πνπ αξγεί λα θνξηψζεη ε ηζηνζειίδα θνηηάδνληαο ηηο αλαιπηηθέο αλαθνξέο ηνπ firebug. Debug JavaScript Σν Firebug παξέρεη έλα πνιχ δπλαηφ JavaScript Debugger ν νπνίνο επηηξέπεη ην πάγσκα δηάθνξσλ δηαδηθαζηψλ αλά πάζα ζηηγκή ψζηε ν ρξήζηεο λα κπνξεί δεη ηα δηάθνξα ιάζε θαη ηηο παξακέηξνπο. Γξήγνξε αλαδήηεζε ιαζώλ ηαλ ππάξρεη θάπνην ζεκαληηθφ ιάζνο ην Firebug εηδνπνηεί ηνλ ρξήζηε άκεζα γηα ην πξφβιεκα ζηνπο θψδηθεο JavaScript, CSS θαη HTML. Πεξηήγεζε ζην DOM Σν DOM(Document Object Model) είλαη ε ηεξαξρία ησλ αληηθεηκέλσλ θαη εληνιψλ πνπ πξαγκαηνπνηνχληαη απφ ηελ JavaScript. Σν Firebug βνεζάεη ζην λα δεη θάπνηνο ηελ ηεξαξρία απηή θαη λα θάλεη άκεζεο αιιαγέο. 3.8 XAMPP Σν XAMPP είλαη έλα παθέην πξνγξακκάησλ ειεχζεξνπ ινγηζκηθνχ, ινγηζκηθνχ αλνηρηνχ θψδηθα θαη αλεμαξηήηνπ πιαηθφξκαο ην νπνίν πεξηέρεη ηνλ 35

37 εμππεξεηεηή ηζηνζειίδσλ http Apache, ηελ βάζε δεδνκέλσλ MySQL θαη έλα δηεξκελέα γηα θψδηθα γξακκέλν ζε γιψζζεο πξνγξακκαηηζκνχ PHP θαη Perl Δυνατότητεσ και απαιτόςεισ του XAMPP Σν XAMPP πξνυπνζέηεη κφλν ηα ινγηζκηθά ζπκπίεζεο αξρείσλ zip, tar, 7z ή exe θαηά ηελ δηάξθεηα ηεο εγθαηάζηαζεο. Σν XAMPP έρεη δπλαηφηεηα αλαβάζκηζεο ζε λέεο εθδφζεηο ηνπ εμππεξεηεηή ηζηνζειίδσλ http Apache, ηεο βάζεο δεδνκέλσλ MySQL, ηεο γιψζζαο PHP θαη Perl. Σν XAMPP ζπκπεξηιακβάλεη επίζεο ηα παθέηα OpenSSL θαη ην phpmyadmin Φρόςη του XAMPP Δπίζεκα νη ζρεδηαζηέο ηνπ XAMPP πξνφξηδαλ ην ινγηζκηθφ σο εξγαιείν αλάπηπμεο θαη δνθηκήο ηζηνζειίδσλ ηνπηθά ζηνλ ππνινγηζηή ρσξίο λα είλαη απαξαίηεηε ε ζχλδεζε ζην δηαδίθηπν. Γηα λα είλαη δπλαηή ε ρξήζε ηνπ, πνιιέο ζεκαληηθέο ιεηηνπξγίεο αζθάιεηαο έρνπλ απελεξγνπνηεζεί. ηελ πξάμε ην XAMPP νξηζκέλεο θνξέο ρξεζηκνπνηείηαη θαη γηα ηελ θηινμελία ηζηνζειίδσλ. Τπάξρεη εηδηθφ εξγαιείν ην νπνίν πεξηέρεηαη ζην XAMPP γηα ηελ πξνζηαζία κε θσδηθφ ησλ ζεκαληηθψλ κεξψλ. Σν XAMPP ππνζηεξίδεη ηελ δεκηνπξγία θαη δηαρείξηζε βάζεσλ δεδνκέλσλ ηχπνπ MySQL θαη SQLite. ηαλ ην XAMPP εγθαηαζηαζεί ζηνλ ηνπηθφ ππνινγηζηή δηαρεηξίδεηαη ηνλ localhost σο έλα απνκαθξπζκέλν θφκβν, ν νπνίνο ζπλδέεηαη κε ην πξσηφθνιιν κεηαθνξάο αξρείσλ FTP. Ζ ζχλδεζε ζηνλ localhost κέζσ ηνπ FTP κπνξεί λα γίλεη κε ην φλνκα ρξήζηε «newuser» θαη ην θσδηθφ «xampp». Γηα ηελ βάζε δεδνκέλσλ MySQL ππάξρεη ν ρξήζηεο «root» ρσξίο θσδηθφ πξφζβαζεο PhpΜyAdmin Σν phpmyadmin είλαη έλα δσξεάλ ινγηζκηθφ, έλα εξγαιείν γξακκέλν ζε PHP πνπ πξννξίδεηαη γηα ην ρεηξηζκφ ηεο MySQL κέζσ ηνπ World Wide Web. Σν phpmyadmin ππνζηεξίδεη έλα επξχ θάζκα ελεξγεηψλ κε MySQL. Οη πην ζπρλά ρξεζηκνπνηνχκελεο ιεηηνπξγίεο πνπ ππνζηεξίδνληαη απφ ην πεξηβάιινλ εξγαζίαο ηνπ 36

38 ρξήζηε είλαη ε δηαρείξηζε βάζεσλ δεδνκέλσλ(πίλαθεο, πεδία, ζρέζεηο, επξεηήξηα, νη ρξήζηεο, ηα δηθαηψκαηα ρξεζηψλ θιπ), ελψ εμαθνινπζεί λα έρεη ηε δπλαηφηεηα λα εθηειεί άκεζα νπνηαδήπνηε πξφηαζε SQL. Σν phpmyadmin έξρεηαη κε έλα επξχ θάζκα εγγξάθσλ ην νπνίν βνεζάεη ην ρξήζηε ζηελ εθηέιεζε ησλ εξγαζηψλ ηνπ Φαρακτηριςτικϊ του PhpΜyAdmin Γηνξαηηθφ Web interface Τπνζηήξημε γηα ηα πεξηζζφηεξα ραξαθηεξηζηηθά MySQL: o Πεξηήγεζε θαη θαηάξγεζε βάζεσλ δεδνκέλσλ, πηλάθσλ, πεδίσλ θαη επξεηεξίσλ o Γεκηνπξγία, αληηγξαθή, θαηάξγεζε, κεηνλνκαζία θαη αιιαγέο ζηηο βάζεηο δεδνκέλσλ: πίλαθεο, πεδία θαη επξεηήξηα. o πληήξεζε δηαθνκηζηή, βάζεο δεδνκέλσλ θαη πηλάθσλ, κε πξνηάζεηο γηα ηε δηακφξθσζε ηνπ δηαθνκηζηή. o εθηέιεζε, επεμεξγαζία θαη επηινγή ζειηδνδείθηε γηα νπνηαδήπνηε SQL-δήισζε. o Γηαρείξηζε MySQL ρξεζηψλ θαη ηα πξνλφκηα ηνπο. o Γηαρείξηζε απνζεθεπκέλσλ δηαδηθαζηψλ. o Δηζαγσγή δεδνκέλσλ απφ CSV θαη SQL. Δμαγσγή δεδνκέλσλ ζε δηάθνξεο κνξθέο: CSV, SQL, XML, PDF, ην πξφηππν ISO / IEC OpenDocument θεηκέλνπ θαη ινγηζηηθψλ θχιισλ, Word, L A T E X. Ζ δηαρείξηζε πνιιψλ δηαθνκηζηψλ. Γεκηνπξγία PDF γξαθηθψλ ηεο δηάηαμεο βάζεο δεδνκέλσλ. Γεκηνπξγία ζχλζεησλ εθθξάζεσλ ρξεζηκνπνηψληαο Query-by-example (QBE). Αλαδήηεζε ζε θαζνιηθφ επίπεδν ζε κηα βάζε δεδνκέλσλ ή έλα ππνζχλνιν ηεο. Μεηαηξνπή απνζεθεπκέλσλ δεδνκέλσλ ζε νπνηαδήπνηε κνξθή ρξεζηκνπνηψληαο έλα ζχλνιν απφ πξνθαζνξηζκέλεο ιεηηνπξγίεο, φπσο ε εκθάληζε BLOB δεδνκέλσλ σο εηθφλα ή download-link. 37

39 3.8.5 Apache HTTP εξυπηρετητόσ Ο Apache HTTP γλσζηφο θαη απιά ζαλ Apache είλαη έλαο εμππεξεηεηήο ηνπ παγθφζκηνπ ηζηνχ (web). πνηε έλαο ρξήζηεο επηζθέπηεηαη έλα ηζηφηνπν ην πξφγξακκα πινήγεζεο (browser) επηθνηλσλεί κε έλαλ δηαθνκηζηή (server) κέζσ ηνπ πξσηνθφιινπ HTTP, ν νπνίνο παξάγεη ηηο ηζηνζειίδεο θαη ηηο απνζηέιιεη ζην πξφγξακκα πινήγεζεο. O Apache είλαη έλαο απφ ηνπο δεκνθηιέζηεξνπο, ελ κέξεη γηαηί ιεηηνπξγεί ζε δηάθνξεο πιαηθφξκεο φπσο ηα Windows, ην Linux, ην Unix θαη ην 38

40 Mac OS X. πληεξείηαη ηψξα απφ κηα θνηλφηεηα αλνηθηνχ θψδηθα κε επηηήξεζε απφ ην Ίδξπκα Λνγηζκηθνχ Apache (Apache Software Foundation). Ο Apache ρξεζηκνπνηείηαη θαη ζε ηνπηθά δίθηπα ζα δηαθνκηζηήο ζπλεξγαδφκελνο κε ζπζηήκαηα δηαρείξηζεο Βάζεο Γεδνκέλσλ π.ρ. Oracle, MySQL. Ζ πξψηε ηνπ έθδνζε, γλσζηή σο NCSA HTTPd, δεκηνπξγήζεθε απφ ηνλ Robert McCool θαη θπθινθφξεζε ην Θεσξείηαη φηη έπαημε ζεκαληηθφ ξφιν ζηελ αξρηθή επέθηαζε ηνπ παγθφζκηνπ ηζηνχ. Ήηαλ ε πξψηε βηψζηκε ελαιιαθηηθή επηινγή πνπ παξνπζηάζηεθε απέλαληη ζηνλ εμππεξεηεηή http ηεο εηαηξείαο Netscape θαη απφ ηφηε έρεη εμειηρζεί ζην ζεκείν λα αληαγσλίδεηαη άιινπο εμππεξεηεηέο βαζηζκέλνπο ζην Unix ζε ιεηηνπξγηθφηεηα θαη απφδνζε. Απφ ην 1996 ήηαλ απφ ηνπο πην δεκνθηιείο φκσο απφ ηνλ Μάξηην ηνπ 2006 έρεη κεησζεί ην πνζνζηφ ηεο εγθαηάζηαζήο ηνπ θπξίσο απφ ηνλ Microsoft Internet Information Services θαη ηελ πιαηθφξκα NET. Σνλ Οθηψβξην ηνπ 2007 ην κεξίδην ηνπ ήηαλ 47.73% απφ φινπο ηνπο ηζηφηνπνπο. 3.9 Dreamweaver CS5.5 To Adobe Dreamweaver είλαη κηα εθαξκνγή αλάπηπμεο ηζηνζειίδσλ ε νπνία αξρηθά δεκηνπξγήζεθε απφ ηε Macromedia θαη πιένλ αλήθεη ζηελ Adobe Systems ε νπνία απφθηεζε ηελ Μacromedia ηo Σν Dreamweaver είλαη δηαζέζηκν θαη γηα ρξήζηεο πνπ ρξεζηκνπνηνχλ Mac αιιά θαη Windows ιεηηνπξγηθφ ζχζηεκα. Οη πην πξφζθαηεο εθδφζεηο έρνπλ ελζσκαηψζεη ππνζηήξημε γηα ηερλνινγίεο web φπσο CSS,JavaScript θαη δηάθνξεο server-side γιψζζεο scripting φπσο επίζεο frameworks ζπκπεξηιακβαλνκέλνπ ASP.NET, ColdFusion, JavaServer Pages θαη PHP. 39

41 3.9.1 Φαρακτηριςτικϊ του Dreamweaver Βαζηζκέλν ζε WYSIWYG Presto, ην Dreamweaver κπνξεί λα θξχςεη ηηο ιεπηνκέξεηεο ηνπ θψδηθα HTML ησλ ζειίδσλ απφ ην ρξήζηε, θάηη πνπ θαζηζηά δπλαηφ γηα ηνπο κε επαγγεικαηίεο λα δεκηνπξγήζνπλ ηζηνζειίδεο θαη ηζηνρψξνπο νιφθιεξνπο. Μηα επαγγεικαηηθή θξηηηθή απηήο ηεο πξνζέγγηζεο είλαη φηη παξάγεη HTML ζειίδεο ησλ νπνίσλ ην κέγεζνο αξρείσλ θαη ε πνζφηεηα θψδηθα HTML είλαη πνιχ κεγαιχηεξα απφ απηά πνπ πξέπεη λα είλαη, ην νπνίν κπνξεί λα πξνθαιέζεη θαθή απφδνζε ζηηο κεραλέο αλαδήηεζεο. Απηφ ηζρχεη ηδηαίηεξα δηφηη ε εθαξκνγή ην θαζηζηά πνιχ εχθνιν λα δεκηνπξγήζεη ζρεδηαγξάκκαηα βαζηζκέλα ζε πίλαθεο (tablebased layouts). Δπηπιένλ, κεξηθνί ππεχζπλνη γηα ηελ αλάπηπμε ηζηνρψξσλ έρνπλ επηθξίλεη ην Dreamweaver ζην παξειζφλ γηα ηελ παξαγσγή ηνπ θψδηθα πνπ ζπρλά δελ 40

42 ζπκκνξθψλεηαη κε W3C πξφηππα, αλ θαη νη πξφζθαηεο εθδφζεηο είλαη πην ππνρσξεηηθέο. Σν Dreamweaver 8.0 είρε θαθή απφδνζε ζην test Acid2, ην νπνίν είλαη αλαπηπγκέλν απφ Web Standards Project. Δληνχηνηο, ε Macromedia έρεη απμήζεη ηελ ππνζηήξημε γηα CSS θαη άιινπο ηξφπνπο λα ζρεδηαζηεί κηα ζειίδα ρσξίο πίλαθεο ζηηο πην πξφζθαηεο εθδφζεηο ηεο εθαξκνγήο, κε ηε δπλαηφηεηα λα κεηαηξαπνχλ νη πίλαθεο ζε ζηξψκαηα θαη αληίζηξνθα. Σν Dreamweaver επηηξέπεη ζηνπο ρξήζηεο ησλ ηζηνρψξσλ λα κπνξνχλ λα πξνβάινπλ ηηο ηζηνζειίδεο ηνπο ζε πνιινχο browsers, ππφ ηνλ φξν φηη είλαη εγθαηεζηεκέλα ζηνλ ππνινγηζηή ηνπο. Έρεη επίζεο κεξηθά εξγαιεία δηαρείξηζεο ηζηνζειίδσλ, φπσο ε δπλαηφηεηα λα βξεζνχλ θαη λα αληηθαηαζηαζνχλ νη γξακκέο θεηκέλνπ ή θψδηθα κε νπνηνδήπνηε παξάκεηξν ζε νιφθιεξν ηνλ ηζηνρψξν, θαη έλα ραξαθηεξηζηηθφ γλψξηζκα templatization γηα ηε δεκηνπξγία ησλ πνιιαπιάζησλ ζειίδσλ κε ηηο παξφκνηεο δνκέο. Σν behaviors panel επηηξέπεη επίζεο ηε ρξήζε βαζηθνχ JavaScript ρσξίο νπνηαδήπνηε γλψζε θσδηθνπνίεζεο. Σν Dreamweaver κπνξεί λα ρξεζηκνπνηήζεη Extensions - κηθξά πξνγξάκκαηα, ηα νπνία νπνηνζδήπνηε ππεχζπλνο γηα ηελ αλάπηπμε ηζηνχ κπνξεί λα γξάςεη (ζπλήζσο κέζσ HTML θαη JavaScript). Σα Extensions παξέρνπλ επηπιένλ ιεηηνπξγίεο ζην ινγηζκηθφ γηα νπνηνλδήπνηε επηζπκεί λα ηηο κεηαθνξηψζεη θαη λα ηηο εγθαηαζηήζεη. Σν Dreamweaver ππνζηεξίδεηαη απφ έλα κεγάιν αξηζκφ δεκηνπξγψλ extensions πνπ θαζηζηά ηα extensions δηαζέζηκα (θαη εκπνξηθά θαη ειεχζεξα) γηα ηνπο πεξηζζφηεξνπο ζηφρνπο αλάπηπμεο ηζηνζειίδσλ απφ ηα πην απιά απνηειέζκαηα ζηα πην πιήξε. πσο άιινη editors HTML, έηζη θαη ην Dreamweaver επεμεξγάδεηαη ηα αξρεία ηνπηθά, θαηφπηλ θνξηψλεη φια ηα επεμεξγαζκέλα αξρεία ζην remote web server κε ρξεζηκνπνίεζε δηθηχνπ FTP, SFTP, ή WebDAV. 41

43 4 o ΚΕΥΑΛΑΙΟ: ΤΛΟΠΟΙΗΗ Γηα ηελ πινπνίεζε ηεο πηπρηαθήο αξρηθά εγθαηαζηάζεθε ην XAMPP ην νπνίν παξέρεη ηηο ηειεπηαίεο εθδφζεηο ηνπ Apache, Php θαη ηεο Mysql, ελψ πεξηιακβάλεη θαη άιια ηξία ρξήζηκα εξγαιεία ην PhpMyAdmin, Filezilla Server θαη Mercury Mail. Δπίζεο, ην Dreamweaver (ζαλ IDE εθαξκνγή) ην νπνίν ρξεζηκνπνηήζεθε γηα ηελ αλάπηπμε ηεο εθαξκνγήο. H ζρεδίαζε ηεο εθαξκνγήο είλαη βαζηζκέλε ζε έλα έηνηκν template πνπ πξνήιζε απφ ην Έπεηηα, δεκηνπξγήζεθε ε βάζε δεδνκέλσλ ptyxiaki_ferries, κε ηελ βνήζεηα ηνπ PhpMyAdmin. Ζ πηπρηαθή αθνινχζεζε ηα πξφηππα ησλ γλσζηψλ php cms (wordpress, joomla, drupal). πσο θάζε ζχγρξνλε εθαξκνγή, απνηειείηαη απφ ην header.php(επηθεθαιίδα) θαη ην footer.php(ππνζέιηδν), ηα νπνία είλαη ζηαζεξά αξρεία γηα ηελ εθαξκνγή θαη δε ρξεηάδεηαη λα επαλαιακβάλεηαη ν θψδηθαο ηνπο. ην header.php θνξηψλνληαη νη βηβιηνζήθεο ηεο javascript, νη ράξηεο ηεο Google, ηα απαξαίηεηα ραξηνγξαθηθά εξγαιεία γηα ηνλ θαηξφ θαη δεκηνπξγείηαη ην κελνχ. ην footer.php εκθαλίδεηαη ε δσληαλή θίλεζε ησλ πινίσλ γηα ην ιηκάλη ηεο Καβάιαο κέζσ ηεο ππεξεζίαο ηνπ marinnetraffic θαη πιεξνθνξίεο γηα ηελ εηαηξία. Δπίζεο ππάξρνπλ θάπνηα θξπκκέλα αξρεία, φπσο είλαη ηα dialog forms. Γηα ηελ θαιχηεξε νξγάλσζε ηνπ θψδηθά ηεο εξγαζίαο, εθαξκφζηεθαλ δχν ηαθηηθέο: Πξψηνλ, δεκηνπξγήζεθαλ δχν θεληξηθά αξρεία ην maicore.php, ηo νπνίν είλαη ν ππξήλαο θαη εκπεξηέρεη ζηαζεξέο ζπλαξηήζεηο κε ηηο νπνίεο γίλνληαη νη βαζηθέο ιεηηνπξγίεο. Οη ζπλαξηήζεηο θαινχληαη απφ ηα άιια php αξρεία ηεο εθαξκνγήο. Σν δεχηεξν αξρείν είλαη ην mainscript.js ην νπνίν αθνξά ην fronternd επίπεδν(client side). Δκπεξηέρεη jquery ζπλαξηήζεηο νη νπνίεο αθνξνχλ θπξίσο ηα θνπκπηά ηεο εθαξκνγήο θαζψο θαη ηνπο ειέγρνπο (validations) πνπ πξαγκαηνπνηνχληαη. Γεχηεξν θαη ζεκαληηθφηεξν ν θψδηθαο είλαη δηαζπαζκέλνο ζε κηθξά θνκκάηηα κε απψηεξν ζθνπφ λα κπνξεί κε κεγαιχηεξε επθνιία λα κειεηεζεί θαη λα εμειηρζεί 42

44 4.1 Εντολϋσ SQL που χρηςιμοποιόθηκαν Select Insert into Update Delete Υξεζηκνπνηείηαη γηα λα αλαθαιεί δεδνκέλα απφ ηε βάζε δεδνκέλσλ, επηιέγνληαο γξακκέο απφ έλα πίλαθα πνπ ηαηξηάδνπλ αλάινγα κε ηα θξηηήξηα πνπ ζα ηεζνχλ. Δηζάγεη λέεο γξακκέο ζηνλ πίλαθα πνπ επηιέρηεθε. Δλεκεξψλεη ηελ ήδε ππάξρνπζα εγγξαθή ζηνλ πίλαθα. Γηαγξάθεη ζπγθεθξηκέλεο γξακκέο ηνπ πίλαθα. 4.2 υναρτόςεισ PHP που χρηςιμοποιόθηκαν Mysql_connect() Πξαγκαηνπνηεί ζχλδεζε ζηνλ MySQL server. Γέρεηαη 3 νξίζκαηα: ην φλνκα server(mysql server), ην φλνκα ρξήζηε(ζηε ζπγθεθξηκέλε πεξίπησζε σο φλνκα ρξήζηε ηέζεθε ην φλνκα ηνπ ρξήζηε ζηνλ νπνίν αλήθεη ε δηεξγαζία ηνπ server πνπ ρξεζηκνπνηήζεθε root- θαη ηέινο ν θσδηθφο (ζηε ζπγθεθξηκέλε πεξίπησζε δε ρξεζηκνπνηήζεθε). Μysql_select_db() Οξίδεη ηελ ηξέρνπζα Βάζε δεδνκέλσλ ε νπνία είλαη ελεξγνπνηεκέλε ζηνλ server ('ptyxiaki_ferries', $link) Mysql_query() Mysql_num_rows() Έρεη ηελ ηδηφηεηα λα ζηέιλεη έλα θαη κνλαδηθφ εξψηεκα (πνιιαπιά εξσηήκαηα δελ ππνζηεξίδνληαη), ζηελ ηξέρνπζα Βάζε δεδνκέλσλ ε νπνία είλαη ελεξγνπνηεκέλε ζηνλ server Παίξλεη ην πιήζνο ησλ γξακκψλ ζε έλα απνηέιεζκα Mysql_fetch_assoc() Γηακνξθψλεη κία γξακκή απνηειέζκαηνο ζαλ έλα ζπζρεηηδφκελν array 43

45 4.3 Αποςτολό Γηα ηελ απνζηνιή ρξεζηκνπνηείηαη ην PHPMailer πνπ είλαη κηα θιάζε ηεο PHP γηα απνζηνιή κε πνιιέο δπλαηφηεηεο φπσο επηζχλαςε αξρείσλ, SMTP servers, θνηλνπνηήζεηο ζε ηξίηνπο (CC, BCC), HTML κελχκαηα θ.α. Ζ ιεηηνπξγία γίλεηαη κέζσ κεζφδσλ νη νπνίεο ρξεζηκνπνηνχλ ην θαη ηνλ θσδηθφ ελφο gmail πνπ δεκηνπξγήζεθε γηα ηελ εθαξκνγή απηή. Αξρηθά νξίζηεθε ε ζπλάξηεζε SendPHPMailer ($ssubject, $sbody, $swhotosent, $sclient) θαη δεκηνπξγήζεθε έλα λέν αληηθείκελν γηα απνζηνιή κέζσ ηεο ζπλάξηεζεο new PHPMailer(). Σν IsSMTP() ζέηεη ηνλ STMP-Server σο κέζνδν γηα ηελ απνζηνιή e- mail θαη σο host νξίδεηαη ην Gmail, ην νπνίν πξνυπνζέηεη αζθαιή ζχλδεζε (TLS) θαη σο ζχξα ρξεζηκνπνηεί ηελ 587. Γειψλνληαη ηα ζηνηρεία ηνπ , ην φλνκα απνζηνιέα πνπ ζα εκθαλίδεηαη ζην (Username) θαη ν θσδηθφο (Password) θαη ρξεζηκνπνηνχληαη απφ ηε κέζνδν AddReplyTo. Χο γιψζζα νξίδνληαη ηα ειιεληθά. Ζ κέζνδνο subject δεκηνπξγεί ην ζέκα, ελψ ε AltBody είλαη ην πεξηερφκελν ηνπ κελχκαηνο πνπ ζα ζηαιεί. Με ηε κέζνδν AddAddress νξίδεηαη ε ειεθηξνληθή δηεχζπλζε ηνπ παξαιήπηε. 4.4 Κρυπτογρϊφηςη Ο θσδηθφο πνπ εηζάγεη ν ρξήζηεο θαηά ηε δηαδηθαζία ηεο εγγξαθήο, απνζεθεχεηαη ζηε βάζε ζε θξππηνγξαθεκέλε κνξθή γηα κεγαιχηεξε αζθάιεηα. Αξρηθά έγηλε έιεγρνο αλ ν server ππνζηεξίδεη ssl (επέθηαζε ζην php.ini). Σν ζχζηεκα θαιεί ηε ζπλάξηεζε encrypt_decrypt($action, $string). Ζ κέζνδνο πνπ ρξεζηκνπνηείηαη είλαη ε AES-256-CBC.Σφζν ην κπζηηθφ θιεηδί(secret_key), φζν θαη ην κπζηηθφ δηάλπζκα αξρηθνπνίεζεο(secret_iv) παξάγνληαη κε ηε ζπλάξηεζε RandomString() κε ηπραίν ηξφπν γηα λα είλαη δηαθνξεηηθά γηα θάζε θσδηθφ. ηαλ σο ελέξγεηα ($action) νξίδεηαη ε θξππηνγξάθεζε(encrypt), ηφηε ην θιεηδί θαη ην iv κεηαηξέπνληαη ζε δεθαεμαδηθή κνξθή κε ηε ζπλάξηεζε strtohex(). Ζ ζπλάξηεζε openssl_encrypt, ε νπνία δέρεηαη σο παξακέηξνπο ηνλ θσδηθφ πνπ εηζήγαγε ν ρξήζηεο(string), ηε κέζνδν θξππηνγξάθεζεο(encrypt_method), ην θιεηδί(key), ην iv θαη επηζηξέθεη ηνλ θσδηθφ ζε θξππηνγξαθεκέλε κνξθή. 44

46 Δλ αληηζέζεη, φηαλ νξίδεηαη σο ελέξγεηα ε απνθξππηνγξάθεζε(decrypt), ηφηε αληίζηνηρα κε ηε ζπλάξηεζε openssl_dencrypt επηζηξέθεηαη απνθξππηνγξαθεκέλνο ν θσδηθφο(ν αξρηθφο θσδηθφο πνπ εηζήγαγε ν ρξήζηεο). 4.5 Πρόςβαςη και λειτουργύεσ χρόςτη Εγγραφό ςτο ςύςτημα Ζ εγγξαθή ζην ζχζηεκα απνηειεί ηελ απαξαίηεηε πξνυπφζεζε γηα λα νινθιεξψζεη ν ρξήζηεο ηηο θξαηήζεηο ηνπ ζηελ εθαξκνγή. Ο επηζθέπηεο φηαλ ζπκπιεξψζεη ηα απαξαίηεηα πεδία, κέζσ ηεο θφξκαο πνπ δεκηνπξγήζεθε ζην αξρείν register.php, θαιείηαη κέζσ Ajax ην αξρείν do_register,φπνπ εθηειείηαη ε ζπλάξηεζε RegisterUser. Ζ ζπλάξηεζε RegisterUser($username, $pass, $retypepass, $ , $address, $name, $surname,$zipcode, $country, $city, $phone, $mobile) κε ηελ εληνιή SELECT ξσηά ηε βάζε αλ ππάξρεη απηφο ν ρξήζηεο. Δθφζνλ δελ ππάξρεη εγγξαθή, κε ηελ εληνιή INSERT INTO εηζάγεηαη ν θαηλνχξηνο ρξήζηεο ζηνλ πίλαθα users κε ηνλ θσδηθφ ηνπ λα απνζεθεχεηαη ζε θξππηνγξαθεκέλε κνξθή γηα κεγαιχηεξε αζθάιεηα. Αλ πξαγκαηνπνηεζεί κε επηηπρία ε εγγξαθή ε ζπλάξηεζε επηζηξέθεη 1 θαη ην ζχζηεκα πξνβάιιεη ην θαηάιιειν κήλπκα. Ο ρξήζηεο ιακβάλεη ην επηβεβαίσζεο πνπ πεξηέρεη ηα ζηνηρεία ηνπ θαη έλα κνλαδηθφ id (suniqidacc) γηα λα νινθιεξσζεί ε εγγξαθή ηνπ ζηελ εθαξκνγή. Αιιηψο επηζηξέθεη 0 θαη ν ρξήζηεο πξέπεη λα επαλαιάβεη ηε δηαδηθαζία ηεο εγγξαθήο Εύςοδοσ ςτο ςύςτημα Γηα ηελ είζνδν ζηελ εθαξκνγή απαηηείηαη ε εηζαγσγή ηνπ ζσζηνχ νλφκαηνο ρξήζηε θαη θσδηθνχ πξφζβαζεο, φπσο δειψζεθαλ ζηε δηαδηθαζία ηεο εγγξαθήο. Καιείηαη κέζσ Ajax ην αξρείν do_login, φπνπ εθηειείηαη ε ζπλάξηεζε Login. ηε ζπλάξηεζε Login($username, $pass) ειέγρεηαη αλ ππάξρεη εγγξαθή ζηνλ πίλαθα users κε ην ζπγθεθξηκέλν $username θαη ζηελ πεξίπησζε πνπ επηζηξέςεη εγγξαθή, ειέγρεη αλ ην $pass πνπ φξηζε ν ρξήζηεο είλαη ίδην κε ην θξππηνγξαθεκέλν θσδηθφ ηεο βάζεο. Δθφζνλ ππάξρεη ν ρξήζηεο, δειαδή έρεη εγγξαθεί ζην ζχζηεκα 45

47 επηζηξέθεη 1 θαη ηα ζηνηρεία ηνπ ηίζεληαη ζε session κεηαβιεηέο κε ζθνπφ λα ρξεζηκνπνηεζνχλ ζε φιε ηελ εθαξκνγή αιιηψο επηζηξέθεη Επεξεργαςύα ςτοιχεύων Μέζσ ηεο επηινγήο «Γηαρείξηζε Λνγαξηαζκνχ» ν ρξήζηεο έρεη ηε δπλαηφηεηα λα αιιάμεη ηα ζηνηρεία πνπ δήισζε θαηά ηε δηάξθεηα ηεο εγγξαθήο. ην αξρείν myaccount.php γίλεηαη ε εκθάληζε φισλ ησλ ζηνηρείσλ ηνπ ρξήζηε κε βάζε ην id ηνπ, πνπ είλαη δεισκέλν ζηνλ πίλαθα users, κε απψηεξν ζθνπφ ηε κεηέπεηηα επεμεξγαζία ηνπο, Με ηε ζπλάξηεζε isset() ειέγρεηαη αλ έρεη νξηζηεί ην id θαη αλ δελ είλαη θελφ, φηαλ αιιάμεη θάπνην απφ ηα ζηνηρεία κε ηελ εληνιή Update ελεκεξψλνληαη ηα πεδία ηνπ πίλαθα users. Ο ρξήζηεο ελεκεξψλεηαη κε Ανϊκτηςη κωδικού Ζ αλάθηεζε ηνπ θσδηθνχ πξφζβαζεο είλαη κηα ιεηηνπξγία πνπ ρξεζηκνπνηείηαη φηαλ ν ρξήζηεο μεράζεη ηνλ θσδηθφ ηνπ.ηε θφξκα Login User ζην θάησ κέξνο,ππάξρεη ν ζχλδεζκνο Ξεράζαηε ηνλ θσδηθφ ζαο ν νπνίνο ελεξγνπνηεί ην αξρείν findpass.php κε απνηέιεζκα ηελ εκθάληζε ηεο ζειίδαο γηα ηελ αλάθηεζε ηνπ θσδηθνχ πξφζβαζεο. ηε θφξκα απηή απαηηείηαη ε ζπκπιήξσζε ηνπ . ηαλ παηήζεη ν ρξήζηεο ην θνπκπί Απνζηνιή θνξηψλεηαη κέζσ Ajax ην αξρείν do_findpass.php, φπνπ εθηειείηαη ε ζπλάξηεζε FindPass. Με ηε ζπλάξηεζε FindPass($ ) ειέγρεηαη αλ ππάξρεη ζηνλ πίλαθα users ε εγγξαθή κε ην ζπγθεθξηκέλν . Αλ βξεζεί, ην απνηέιεζκα γίλεηαη 1 θαη ν ρξήζηεο ελεκεξψλεηαη κέζσ γηα ηνλ θσδηθφ πξφζβαζεο, αιιηψο επηζηξέθεη Έξοδοσ ηαλ παηεζεί ην θνπκπί «Έμνδνο» θαιείηαη κέζσ Ajax ην αξρείν do_logout.php, φπνπ εθηειείηαη ε ζπλάξηεζε logout.ζ ζπλάξηεζε απηή επηζηξέθεη 1 φηαλ θαηαζηξέςεη κε ηε ζπλάξηεζε unset(), φιεο ηηο session κεηαβιεηέο πνπ 46

48 πεξηείραλ ηα ζηνηρεία ηνπ ρξήζηε αιιηψο επηζηξέθεη 0 θαη ε έμνδνο δελ πξαγκαηνπνηείηαη. 4.6 Αναζότηςη Δρομολογύων και κρϊτηςη Εύρεςη δρομολογύων Αξρηθά ν ρξήζηεο δεηείηαη λα δειψζεη εκεξνκελία πνπ ζα ηαμηδέςεη, ιηκάλη άθημεο, ιηκάλη αλαρψξεζεο(εθφζνλ έρεη επηιέμεη ηελ επηζηξνθή), πφζα άηνκα ζα ηαμηδέςνπλ θαη ην φρεκα κέζσλ ησλ θνξκψλ αλαδήηεζεο, νη νπνίεο δεκηνπξγήζεθαλ ζην αξρείν search.php. Ζ αλαδήηεζε ηεο εκεξνκελίαο πινπνηήζεθε κε ηελ ρξήζε ηνπ jquery UI Datepicker ην νπνίν εκθαλίδεη ζην ρξήζηε έλα εκεξνιφγην πξνθεηκέλνπ λα γίλεη ε επηινγή εκεξνκελίαο. Γίλεηαη έιεγρνο(validations) ψζηε λα κελ κπνξεί ν ρξήζηεο λα επηιέμεη πξνεγνχκελε εκεξνκελία απφ ηελ ηξέρνπζα. Γηα ηελ αλαδήηεζε δξνκνινγίσλ αξρηθά ρξεζηκνπνηήζεθε το Ajax Autocomplete jquery, το οποίο επζτρεπε τθ δθμιουργία autocomplete πεδίων ειςαγωγισ κειμζνου. Για να διαςφαλιςτεί, όμωσ, θ ευκολία αναηιτθςθσ διακζςιμων δρομολογίων από το χριςτθ επιλζχτθκε τελικά θ χριςθ λιςτϊν (drop down list) ύνδεςη με τον πϊροχο (ferrydummyprocess) Γηα ηηο αλάγθεο ηεο πηπρηαθήο δεκηνπξγήζεθε έλαο εηθνληθφο πάξνρνο, πνπ ζπλδέεηαη κε ην ζχζηεκα θαη δέρεηαη ηα δεδνκέλα πνπ εηζάγεη ν ρξήζηεο. Σελ εκεξνκελία ηελ κεηαηξέπεη ζηελ θαηάιιειε κνξθή γηα λα πεξαζηεί ζηε βάζε, κε ηελ εληνιή strtotime. Αλάινγα κε ην ιηκάλη επηζηξνθήο/αλαρψξεζεο πνπ εηζήγαγε ν ρξήζηεο επηζηξέθνληαη απφ ηνλ πίλαθα Ferryname ηα δηαζέζηκα πινία πνπ ηνπο αληηζηνηρνχλ. Σα απνηειέζκαηα ηέζεθαλ ζε Session κεηαβιεηέο γηα λα κπνξνχλ λα ρξεζηκνπνηεζνχλ ζηε δηαδηθαζία ηεο θξάηεζεο. 47

49 4.6.3 Εμφϊνιςη δρομολογύων ην αξρείν ferryresults.php παξνπζηάδνληαη ηα απνηειέζκαηα. Αξρηθά εκθαλίδεηαη ν ράξηεο πνπ απεηθνλίδεη ηε δηαδξνκή. Ο ράξηεο πινπνηήζεθε κε ηε ρξήζε ηεο κεζφδνπ Directions απφ ην Google Map api. Ζ κέζνδνο απνηειείηαη απφ ηξεηο ζπλαξηήζεηο pausecomp(), initialize(), calcroute(), κε ηηο νπνίεο δεκηνπξγεί θαηλνχξηνπο ράξηεο απφ ηηο ζπληεηαγκέλεο πνπ ηνπ δφζεθαλ θαη ππνινγίδεη ηελ αξρή θαη ην ηέινο ηεο δηαδξνκήο αλάινγα κε ηα δεδνκέλα πνπ εηζήγαγε ν ρξήζηεο. Απφ ην φλνκα ηνπ πινίνπ βξίζθεηαη θαη ε εηαηξεία ζηελ νπνία απηφ αλήθεη. Δλ ζπλερεία ν ρξήζηεο επηιέγεη ηα δξνκνιφγηα αλαρψξεζεο θαη επηζηξνθήο κέζσ ησλ radio buttons αλλιϊσ το ςφςτθμα τον προτρζπει να επιλζξει αναχϊρθςθ ι επιςτροφι. Ζ ψξα δεκηνπξγείηαη ηπραία κέζσ ηεο εληνιήο rand(0,23); ηαλ παηεζεί ην θνπκπί Κξάηεζε θνξηψλεηαη κέζσ Ajax ην αξρείν do_setbookingdata.php, φπνπ παίξλεη ηα δεδνκέλα πνπ έρνπλ επηιεγεί ζηα radio buttons, γίλεηαη unset ησλ πξνεγνχκελσλ session κεηαβιεηψλ (γηα ηελ πεξίπησζε πνπ δελ επηιέγεη πξψηε θνξά δξνκνιφγην) θαη δεκηνπξγνχληαη θαηλνχξηεο session κε ηα λέα ζηνηρεία πνπ έρεη επηιέμεη ν ρξήζηεο. Σα δεδνκέλα απηά, αθνξνχλ ην πινίν αλαρψξεζεο(allezresultboxferry), ηελ εηαηξία πνπ αλήθεη ην πινίν(allezresultboxcompany), ηελ ψξα πνπ ζα ηαμηδέςεη(alleztime), ην πινίν επηζηξνθήο(retuzresultboxferry), ηελ εηαηξία(retuzresultboxcompany) θαη ηελ ψξα επηζηξνθήο(retuztime) Κρϊτηςη ε απηφ ην ζεκείν ν ρξήζηεο θαιείηαη λα ζπκπιεξψζεη ην νλνκαηεπψλπκν ηνπ ρξήζηε πνπ ζα ηαμηδέςεη θαη λα επηιέμεη απφ ηηο δηαζέζηκεο θακπίλεο, ηελ θακπίλα αλαρψξεζεο θαη επηζηξνθήο. Οη θφξκεο δεκηνπξγήζεθαλ ζην αξρείν confirmbooking.php. Σν ζχζηεκα γηα ιφγνπο αζθαιείαο δελ επηηξέπεη ηνλ επηζθέπηε λα ζπλερίζεη ηε δηαδηθαζία επηβεβαίσζεο ηεο θξάηεζεο, ππελζπκίδνληαο ηνλ κε ηελ εκθάληζε ελφο κελχκαηνο πσο πξέπεη λα εγγξαθεί ή απιά λα θάλεη ζχλδεζε. Απηφ πξαγκαηνπνηείηαη κε ηελ ελζσκάησζε κηαο βηβιηνζήθεο ηεο JQuery, ηε JQuery.blockUi, ε νπνία πξνζζέηεη επηπιένλ ιεηηνπξγηθφηεηα. 48

50 4.6.5 Επιβεβαύωςη Κρϊτηςησ ηαλ ν ρξήζηεο ζπκπιεξψζεη φια ηα απαξαίηεηα πεδία γηα ηελ νινθιήξσζε ηεο θξάηεζεο ζην αξρείν bookingdummyprocess.php, εηζάγνληαη ηα δεδνκέλα κε ηελ εληνιή INSERT INTO ζηα πεδία ησλ πηλάθσλ : Γηα ηελ θξάηεζε: Reservations(`UserId`, `Status`, `From`, `To`, `DateIn`, `DateOut`, `ResType`, `RoundTrip`, `VecicleId`) Λεπηνκέξεηεο ηαμηδηνχ εθφζνλ ππάξρεη θαη επηζηξνθή: TripDetails(`ResId`, `UserId`, `CompanyIn`, `CompanyOut`, `VesselIn`, `VesselOut`, `CabinIn`,`CabinOut`) Διέγρεηαη αλ ππάξρεη φρεκα: Vehicles( ResId, Model, Number ) Σέινο ηα άηνκα πνπ ζα ηαμηδέςνπλ ζην: Passengers( ResId, Firstname, Surname ). Μέζσ ηεο ζπλάξηεζεο SendResMail ($iresid, $suser) ειέγρεηαη αλ ππάξρεη εγγξαθή κε απηφ ην username ζηνλ πίλαθα users θαη επηζηξέθεηαη ην . H εκεξνκελία επηζηξέθεηαη κε ηελ θαηάιιειε κνξθή ηφζν γηα ηελ αλαρψξεζε φζν θαη γηα ηελ επηζηξνθή απφ ηνλ πίλαθα reservations. Ο ρξήζηεο ελεκεξψλεηαη κέζσ e- mail γηα φια ηα ζηνηρεία ηεο θξάηεζεο. Σέινο, φηαλ παηεζεί ην θνπκπί Κξάηεζε πξνβάιιεηαη ζηελ νζφλε ην κήλπκα επηβεβαίσζεο, ην νπνίν δεκηνπξγήζεθε ζην αξρείν bookingmessage.php Ακύρωςη κρϊτηςησ Ο ρξήζηεο έρεη ηε δπλαηφηεηα λα αθπξψζεη ηελ θξάηεζε πνπ επέιεμε κέζα απφ ηελ επηινγή «Οη Κξαηήζεηο κνπ». Καιείηαη κέζσ Ajax ην αξρείν do_cancelres.php, φπνπ εθηειείηαη ε ζπλάξηεζε CancelReservation. Μέζσ ηεο ζπλάξηεζεο CancelReservation($iResId) ειέγρεηαη αλ ππάξρεη ζηνλ πίλαθα reservation εγγξαθή κε ην ζπγθεθξηκέλν Userid(id ρξήζηε) θαη ResId(id θξάηεζεο). Σν απνηέιεζκα έρεη αξρηθή ηηκή false. Αλ ππάξρεη εγγξαθή κε απηά ηα ζηνηρεία ηφηε κε ηελ εληνιή Update ελεκεξψλεηαη ην πεδίν status ηνπ πίλαθα Reservations θαη απφ Ο (επηβεβαησκέλε θξάηεζε) κεηαηξέπεηαη ζε C (αθπξσκέλε 49

51 θξάηεζε).σν απνηέιεζκα γίλεηαη true. Ο ρξήζηεο ελεκεξψλεηαη κε ην αλάινγν e- mail Καιρόσ Η φόρμα του καιροφ δθμιουργείται ςτο αρχείο weather.php. Πταν ο χριςτθσ ορίηει ςτθν αναηιτθςθ τθν πόλθ τθσ αρεςκείασ του αρχικά γίνεται κλιςθ τθσ μεκόδου Geocoding, θ οποία δζχεται δεδομζνα από το Google Map api. Ζγινε χριςθ τθσ ςυγκεκριμζνθσ μεκόδου επειδι μετατρζπει τθ διεφκυνςθ που τθσ δίνεται,ςε γεωγραφικζσ ςυντεταγμζνεσ(γεωγραφικό μικοσ και γεωγραφικό πλάτοσ). Τα αποτελζςματα τζκθκαν ςε δφο μεταβλθτζσ var lat = lat1 και var lon = lng1. Στθ ςυνζχεια γίνεται κλιςθ των παραπάνω μεταβλθτϊν από τθν εφαρμογι τθσ weatheropenmap και μεταςχθματίηονται ςφμφωνα με το πρότυπο τθσ βιβλιοκικθσ Open Layers. Ζπειτα φορτϊνονται τα layer του χάρτθ, των καιρικϊν ςτακμϊν, τθσ πόλθσ που επζλεξε ο χριςτθσ, των νεφϊςεων, τθσ βροχισ και τζλοσ των ραντάρ. 4.7 Λειτουργύεσ Διαχειριςτό Ειςαγωγό/Διαγραφό χρόςτη ην δηαρεηξηζηή δίλεηαη ε δπλαηφηεηα κέζα απφ ην αξρείν usersmanagment.php ηφζν λα εηζάγεη θαη λα αιιάδεη ζηνηρεία ζηνπο ρξήζηεο, φζν θαη λα ηνπο δηαγξάθεη. Παηψληαο ην ζχκβνιν κε ην κνιχβη θνξηψλεηαη ην αξρείν usersdetails.php θαη εκθαλίδνληαη ζην δηαρεηξηζηή ηα ζηνηρεία ηνπ ρξήζηε κε βάζε ην id ηνπ, πνπ είλαη δεισκέλν ζηνλ πίλαθα users, κε απψηεξν ζθνπφ ηε κεηέπεηηα επεμεξγαζία ηνπο, Με ηε ζπλάξηεζε isset() ειέγρεηαη αλ έρεη νξηζηεί ην id θαη αλ δελ είλαη θελφ, φηαλ αιιάμεη θάπνην απφ ηα ζηνηρεία κε ηελ εληνιή Update ελεκεξψλνληαη ηα πεδία ηνπ πίλαθα users. Ο δηαρεηξηζηήο έρεη ηε δπλαηφηεηα κέζα απφ απηήλ ηελ επηινγή, λα δψζεη δηθαηψκαηα δηαρεηξηζηή ζε έλα ρξήζηε θαη ην επίπεδν πξφζβαζεο απφ 0 λα γίλεη 1. Με ηελ επηινγή Πξνζζήθε Υξεζηψλ ελεξγνπνηείηαη ην αξρείν adduser.php, ην νπνίν ρξεζηκνπνηψληαο ηελ εληνιή INSERT INTO εηζάγεη ζηνλ πίλαθα users έλα θαηλνχξην ρξήζηε, κε ηνλ θσδηθφ ηνπ λα θξππηνγξαθείηαη γηα κεγαιχηεξε αζθάιεηα θαη ηνπ δίλεη έλα κνλαδηθφ id(uniqid). 50

52 Σέινο ε δηαγξαθή πξαγκαηνπνηείηαη φηαλ ν δηαρεηξηζηήο παηήζεη ην απαγνξεπηηθφ ζχκβνιν θαη θιεζεί κέζσ Ajax ην αξρείν do_deleteuser.php,φπνπ εθηειείηαη ε ζπλάξηεζε DeleteUser($iUserId).Απηή ε ζπλάξηεζε ειέγρεη αλ ππάξρεη εγγξαθή κε απηφ ην id ζηνλ πίλαθα users θαη κε ηελ εληνιή DELETE δηαγξάθεηαη απφ ηνλ πίλαθα users Ειςαγωγό/Διαγραφό ϊρθρων Δπηιέγνληαο ην ζηνηρείν Άξζξα απφ ην κελνχ ελεξγνπνηείηαη ην αξρείν sitecontent.php. Μέζα απφ απηή ηε ζειίδα ν δηαρεηξηζηήο κπνξεί κε κεγάιε επθνιία λα επεμεξγαζηεί ην πεξηερφκελν ησλ άξζξσλ κε ηε βνήζεηα ηνπ tinymce. Αλ επηζπκεί λα πξνζζέζεη έλα θαηλνχξην άξζξν αξθεί λα παηήζεη ην θνπκπί κε ην ζχκβνιν (+). Σν ζχζηεκα εθηειψληαο ηε ζπλάξηεζε FindFreePosition() ςάρλεη ειεχζεξεο ζέζεηο(free position) ηνπ ηξέρνληνο Template, πνπ δελ έρνπλ δεζκεπηεί απφ ηνλ πίλαθα Content. ε πεξίπησζε πνπ ππάξρνπλ ζέζεηο, έρεη ηε δπλαηφηεηα κέζα απφ ην παξάζπξν πνπ αλνίγεηαη, λα ηηο επηιέμεη(checkbox). Δλ ζπλερεία θαιείηαη κέζσ Ajax ην αξρείν do_addtocontent.php, φπνπ εθηειείηαη ε ζπλάξηεζε AddToContent(sPosContent), ςάρλεη ην id ηεο ζέζεο πνπ επέιεμε ν δηαρεηξηζηήο θαη κε ηελ εληνιή INSERT INTO εηζάγεη ζηε βάζε ζηνλ πίλαθα content, ηε ζέζε (Position) θαη ην φλνκα ηνπ άξζξνπ (Article_Name). ε πεξίπησζε πνπ ν δηαρεηξηζηήο επηζπκεί λα δηαγξάςεη έλα άξζξν, κπνξεί λα ην δηαγξάςεη κέζσ ηνπ θνπκπηνχ (Υ). Μφιηο παηεζεί, θαιείηαη κέζσ Ajax ην αξρείν do_deletearticle.php, φπνπ εθηειείηαη ε ζπλάξηεζε DeleteArticle(sPosition) θαη κε ηελ εληνιή DELETE δηαγξάθεη απφ ηνλ πίλαθα content ηε ζέζε ηνπ άξζξνπ. Παξακέλεη φκσο ε ζέζε ηνπ ζην template γηα κειινληηθή ρξήζε Επεξεργαςύα ςτοιχεύων κρϊτηςησ ε πεξίπησζε πνπ ππάξμεη θάπνηα αιιαγή ζην θαζνξηζκέλν δξνκνιφγην ή αθφκα θαη αλ ν ρξήζηεο επηζπκεί λα αιιάμεη ζηνηρεία ηεο θξάηεζεο ηνπ, απηφ κπνξεί λα πινπνηεζεί απφ ηελ πιαηθφξκα ηεο δηαρείξηζεο, κέζα απφ ην αξρείν adminresdetails.php, φπνπ εκθαλίδεηαη αλαιπηηθά ε θξάηεζε ηνπ ρξήζηε. Ο δηαρεηξηζηήο έρεη ηε δπλαηφηεηα λα αιιάμεη ηελ εκεξνκελία, ην πινίν, ην ιηκάλη 51

53 θαζψο θαη ηελ θακπίλα πνπ ζα ηαμηδέςεη ν ρξήζηεο θαη απηφ αθνξά ηφζν ηελ αλαρψξεζε φζν θαη ηελ επηζηξνθή. ηαλ πξαγκαηνπνηεζνχλ νη αιιαγέο κε ηελ εληνιή UPDATE ελεκεξψλνληαη νη πίλαθεο reservations θαη tripdetails. Ο ρξήζηεο ιακβάλεη κε ηηο αιιαγέο πνπ έγηλαλ Διαγραφό κρϊτηςησ Γηα ιφγνπο αζθαιείαο κφλν ζην δηαρεηξηζηή δίλεηαη ε δπλαηφηεηα λα δηαγξάςεη ηελ θξάηεζε. ηαλ παηεζεί ην θνπκπί κε ην ζήκα ηεο απαγφξεπζεο θαιείηαη κέζσ Ajax ην αξρείν do_deleteres.php, φπνπ εθηειείηαη ε ζπλάξηεζε DeleteReservation(iResId). Ζ αξρηθή ηηκή ηνπ απνηειέζκαηνο είλαη false. Διέγρεη αλ ππάξρεη εγγξαθή ζηνλ πίλαθα reservations κε απηφ ην id θξάηεζεο θαη αλ ηε βξεη γίλεηαη δηαγξαθή κε ηελ εληνιή Delete θαη ην απνηέιεζκα γίλεηαη true. O ρξήζηεο ελεκεξψλεηαη κε ην αλάινγν . 52

54 5 ο ΚΕΥΑΛΑΙΟ: ΑΝΑΚΟΠΗΗ ΚΑΙ ΜΕΛΛΟΝΣΙΚΕ ΠΡΟΕΚΣΑΕΙ 5.1 υμπερϊςματα πλνςίδνληαο, ε εθαξκνγή πνπ πινπνηήζεθε ζηα πιαίζηα ηεο πηπρηαθήο απηήο εξγαζίαο, πξνζθέξεη λέεο επηινγέο ζηνλ ρξήζηε θαζψο θαη ηελ αλεμαξηεηνπνίεζε ηνπ απφ ηα ηνπξηζηηθά γξαθεία. Σν παξαπάλσ πξνθχπηεη δηφηη γηα λα κπνξέζεη θάπνηνο ζήκεξα λα έρεη πξφζβαζε ζε δξνκνιφγηα πινίσλ, θξάηεζε εηζηηεξίνπ, απεηθφληζε δξνκνινγίσλ ζε ράξηε, έιεγρν ηνπ θαηξνχ αθφκα θαη πιεξνθνξίεο γηα έλα μελνδνρείν, έπξεπε λα επηζθεθζεί πνιιέο ζειίδεο ή θαη θάπνην ηνπξηζηηθφ γξαθείν. Ζ εθαξκνγή δίλεη ηελ δπλαηφηεηα ζην ρξήζηε κε εχθνιν θαη γξήγνξν ηξφπν λα απνθηήζεη έλα εηζηηήξην γηα ηνλ πξννξηζκφ ηεο επηζπκίαο ηνπ θαη λα δεη αλαιπηηθά φιεο ηηο πιεξνθνξίεο πνπ πξνζθέξεη, ρσξίο λα πξέπεη λα επηζθεθηεί άιινπο ηζηφηνπνπο θαη λα αθηεξψζεη αξθεηφ ρξφλν γηα φιε ηελ δηαδηθαζία. Νέεο ππεξεζίεο φπσο ε δηαρείξηζε ινγαξηαζκνχ θαη θξαηήζεσλ, ν θαηξφο, ε απεηθφληζε δξνκνινγίνπ ζην ράξηε θαη ε αλαδήηεζε μελνδνρείσλ, είλαη ιεηηνπξγίεο πνπ πξνζθέξνπλ ζην ρξήζηε κεγάιν εχξνο επηινγψλ. Δπίζεο, ε εθαξκνγή δίλεη ηελ δπλαηφηεηα πιήξε ειέγρνπ ηεο ηζηνζειίδαο απφ έλα δηαρεηξηζηή. Με ηε δηαρείξηζε λνείηε ε αλάθηεζε, απνζήθεπζε, δηαγξαθή, ελεκέξσζε θαη επεμεξγαζία ησλ απνζεθεπκέλσλ πιεξνθνξηψλ θαη ησλ δεδνκέλσλ πξνο απνζήθεπζε. Δπεηδή ην ζχζηεκα δηαζέηεη ρξήζηεο δπν επηπέδσλ, δελ επηηξέπεηαη πξφζβαζε ρξεζηψλ κε πεξηνξηζκέλα δηθαηψκαηα ζηηο ζειίδεο δηαγξαθήο θαη ελεκέξσζεο πιεξνθνξηψλ. Οη ζειίδεο απηέο είλαη πξνζβάζηκεο κφλν απφ ηνλ δηαρεηξηζηή. πκπεξαζκαηηθά, ε πηπρηαθή εξγαζία νινθιεξψζεθε κέζα απφ κία δηαδηθαζία αλαδήηεζεο, εθκάζεζεο θαη εθαξκνγήο λέσλ ηερλνινγηψλ. Καηά ηε δηάξθεηα ηεο πινπνίεζεο έγηλε θαηαλνεηή ε ρξήζε ηεο γιψζζαο php, ν ζρεδηαζκφο ηεο βάζεο δεδνκέλσλ θαη ε αιιειεπίδξαζε κεηαμχ ηνπο. Σερλνινγίεο. εξγαιεία θαη βηβιηνζήθεο φπσο JavaScript, JQuery θαη Ajax ρξεζηκνπνηήζεθαλ ζε φιν ην κήθνο ηεο εθαξκνγήο. Με βάζε ηα παξαπάλσ αλαπηχρζεθε κηα θηιηθή πξνο ην ρξήζηε εθαξκνγή, πνπ πιεξνί φιεο ηηο πξνυπνζέζεηο επρξεζηίαο. Μέζσ ζηελήο ζπλεξγαζίαο 53

55 θαη νκαδηθήο δνπιεηάο, επεηεχρζεζαλ νη ζηφρνη ηεο πηπρηαθήο εξγαζίαο θαη ν απψηεξνο ζθνπφο ήηαλ ε απφθηεζε εθνδίσλ γηα κειινληηθή αμηνπνίεζε. 5.2 Σα προβλόματα και η αντιμετώπιςη τουσ. ηε δηάξθεηα δηεμαγσγήο ηεο πηπρηαθήο παξνπζηάζηεθαλ δηάθνξα πξνβιήκαηα, ηα νπνία έπξεπε λα επηιπζνχλ γηα ηελ νκαιή δηεμαγσγή ηεο. Παξαθάησ αλαιχνληαη ελδεηθηηθά θάπνηα απφ ηα ζεκαληηθά πξνβιήκαηα πνπ ρξεηάζηεθαλ ηνλ πεξηζζφηεξν ρξφλν γηα λα αληηκεησπηζηνχλ. Γηα ηελ απνζηνιή αλάκεζα ζην ρξήζηε θαη ζην ζχζηεκα φπσο είλαη ε επηβεβαίσζε εγγξαθήο κειψλ ή θξάηεζεο, θφξκεο επηθνηλσλίαο ή απνζηνιή ελεκεξσηηθψλ δειηίσλ έγηλε ρξήζε ηεο βηβιηνζήθεο PHPMailer. Παξνπζηάζηεθαλ αξθεηά πξνβιήκαηα φηαλ έγηλε ε πξνζπάζεηα απνζηνιή ζε ηνπηθφ επίπεδν γηαηί δε κπνξεί λα ππνζηεξίμεη ηελ απνζηνιή/ιήςε . H ιχζε ζην πξφβιεκα δφζεθε κε ηε ρξήζε ηνπ Gmail SMTP, ην νπνίν επηηξέπεη ηελ αληαιιαγή κεηαμχ ησλ server. ζνλ αθνξά ηνλ θαηξφ ζηε δηάξθεηα ηεο έξεπλαο γηα ηελ ελζσκάησζε ησλ εθαξκνγψλ πνπ ηνλ πξνβάιινπλ, παξαηεξήζεθε ζηα πεξηζζφηεξα απφ απηά γίλεηαη πξνβνιή ζπγθεθξηκέλσλ πφιεσλ(ησλ 3 πνπ ζα επηιέμεη ν ρξήζηεο). Γηα ηελ επίιπζε ηνπ ζέκαηνο έγηλε ρξήζε ηεο κεζφδνπ Geocoding ηεο Google Map api, ε νπνία κεηαηξέπεη ηε δηεχζπλζε πνπ ηεο δίλεηαη, ζε γεσγξαθηθέο ζπληεηαγκέλεο(γεσγξαθηθφ κήθνο θαη γεσγξαθηθφ πιάηνο). ηε ζπλέρεηα γίλεηαη θιήζε ησλ παξαπάλσ ζπληεηαγκέλσλ απφ ηελ εθαξκνγή ηεο weatheropenmap θαη κεηαζρεκαηίζηεθαλ ζχκθσλα κε ην πξφηππν ηεο βηβιηνζήθεο Open Layers. Γηα ηελ αζθάιεηα ηνπ θσδηθνχ πξφζβαζεο ε αξρηθή ηδέα ήηαλ λα γίλεηαη θξππηνγξάθεζε κε ηνλ αιγφξηζκν MD5. Οη αιγφξηζκνη θαηαθεξκαηηζκνχ, φπσο ν MD5, SHA1 θαη SHA256 έρνπλ ζρεδηαζηεί ψζηε λα είλαη πνιχ γξήγνξνη θαη απνηειεζκαηηθνί. Με ηηο ζχγρξνλεο φκσο ηερληθέο θαη ηνλ εμνπιηζκφ ησλ ειεθηξνληθψλ ππνινγηζηψλ, κπνξεί λα πξαγκαηνπνηεζεί απνθξππηνγξάθεζε κε κεζφδνπο φπσο brout force. πκπεξαζκαηηθά δελ ήηαλ ζπλεηφ λα ρξεζηκνπνηεζεί έλαο ηέηνηνο αιγφξηζκνο δηφηη δελ ζα ήηαλ αζθαιήο γηα ην ζχζηεκα. Γηα ηνπο παξαπάλσ ιφγνπο ρξεζηκνπνηήζεθε ε κέζνδνο AES-256-CBC θαη νη ζπλαξηήζεηο openssl_encrypt γηα θξππηνγξάθεζε θαη openssl_decrypt γηα 54

56 απνθξππηνγξάθεζε. Δπηιέρζεθε ε ζπγθεθξηκέλε κέζνδνο 256-AES επεηδή ε θξππηνγξάθεζε είλαη ζηαζεξή θαη γξήγνξε. Οη ζπλαξηήζεηο απηέο γηα λα κπνξέζνπλ λα ρξεζηκνπνηεζνχλ, ν server, ζηνλ νπνίν έρεη εγθαηαζηαζεί ε εθαξκνγή ζα πξέπεη λα έρεη ηελ επέθηαζε openssl, κέζα ζην php.ini ηνπ. Ο ηνπηθφο server πνπ ρξεζηκνπνηήζεθε γηα ηηο αλάγθεο ηεο πηπρηαθήο( xampp) δελ παξνπζίαζε ηέηνην πξφβιεκα, αθνχ δηαπηζηψζεθε πσο κέζα ζην αξρείν ηνπ,ην php.ini ηνπ, είρε απηήλ ηελ επέθηαζε. Σελ ίδηα κέζνδν ρξεζηκνπνηεί ε θπβέξλεζε ησλ ΖΠΑ γηα λα θξππηνγξαθήζεη άθξσο απφξξεηα έγγξαθα. Ζ PHP 5.3 εηζήγαγε κηα λέα κέζνδν θξππηνγξάθεζεο πνπ είλαη πνιχ εχθνιε ζηε ρξήζε: openssl_encrypt θαη openssl_decrypt. 5.3 Μελλοντικϋσ προεκτϊςεισ ην ζεκείν απηφ ζα πεξηγξαθνχλ ηδέεο θαη πξνηάζεηο νη νπνίεο ζα επεθηείλνπλ ηηο δπλαηφηεηεο ρξήζεο ηεο εθαξκνγήο, αιιά θαη κηθξέο βειηηψζεηο νη νπνίεο αθνξνχλ ηε ιεηηνπξγηθή δηαδηθαζία. Ζ εθαξκνγή ζα κπνξνχζε λα εμειηρζεί ψζηε λα παξέρεη πεξηζζφηεξεο επηινγέο ζηνλ απιφ ρξήζηε αιιά θαη ζηνλ δηαρεηξηζηή Σν ζχζηεκα ζα βειηησλφηαλ αλ ζα κπνξνχζε λα ζπλδεζεί κε θάπνηνλ πξαγκαηηθφ πάξνρν(επί πιεξσκή), φπσο είλαη ε ForthCRS γηα ηελ Διιάδα. Με απηφ ηνλ ηξφπν ζα κπνξεί λα δερηεί κέζσ ηεο κεζφδνπ parse, xml δεδνκέλα, ηα νπνία ζα αληηζηνηρνχλ ζε αιεζηλά δξνκνιφγηα. Γη απηφ ην ιφγν δεκηνπξγήζεθαλ ηα radio buttons, κέζσ ησλ νπνίσλ ν ρξήζηεο ζα κπνξεί λα επηιέμεη ηελ εηαηξία πνπ είλαη πην θνληά ζηηο αλάγθεο ηνπ. Δπίζεο κεηά ηελ νινθιήξσζε ηεο θξάηεζεο, λα γίλεηαη θαη πιεξσκή εηζηηεξίνπ είηε κέζσ paypal είηε κέζσ πηζησηηθήο, φπνπ ζα πξαγκαηνπνηεί ζχλδεζε κε θάπνηα ηξάπεδα. Γηα ηα κέιε πνπ ηαμηδεχνπλ ζπρλά, ε εηαηξεία ζα κπνξνχζε λα δψζεη ηε δπλαηφηεηα λα καδεχνπλ πφληνπο. Πην ζπγθεθξηκέλα ζα κπνξνχζε λα θαηαηάμεη ηνπο ρξήζηεο ζε θαηεγνξίεο αλάινγα κε ηνλ αξηζκφ θξαηήζεσλ πνπ έρνπλ ζην ηζηνξηθφ ηνπο θαη ηα ρξήκαηα πνπ δηέζεζαλ γηα ηελ αγνξά εηζηηεξίσλ. ε θάζε θαηεγνξία ν ρξήζηεο ζα έρεη θάπνηνπο πφληνπο, ηνπο νπνίνπο κπνξεί λα εμαξγπξψζεη επί ηφπνπ ή λα ηνπο θξαηήζεη θαη λα καδέςεη πεξηζζφηεξνπο γηα λα ηνπο ρξεζηκνπνηήζεη γηα κεγαιχηεξν δηθφ ηνπ φθεινο. Γηα ηα ρξπζά κέιε, πνπ ζα είλαη θαη ε ηειεπηαία 55

57 θαηεγνξία, ε εηαηξία ζα πξνζθέξεη έθπησζε ζηελ αγνξά ησλ επφκελσλ εηζηηεξίσλ ηνπο, δσξεάλ ελνηθίαζε δσκαηίσλ ή θαη θάπνηνπ νρήκαηνο.. Ζ εηαηξεία ζα κπνξνχζε λα ρνξεγήζεη έθπησζε ζηελ αγνξά εηζηηεξίνπ ζε εηδηθέο νκάδεο φπσο ΑκεΑ, αλέξγνπο ή θνηηεηέο. ζνλ αθνξά ηηο πνιχηεθλεο νηθνγέλεηεο εθηφο απφ έθπησζε ζην εηζηηήξην ζα κπνξνχζε λα πξνζθέξεη εηδηθέο ηηκέο ζηελ θξάηεζε 4-θιηλεο θακπίλαο. Με απηφλ ηνλ ηξφπν ε εθαξκνγή ζα δψζεη ηε δπλαηφηεηα ζε φινπο ηνπο ρξήζηεο λα ηαμηδέςνπλ αλεμάξηεηα απφ ηελ νηθνλνκηθή ηνπο θαηάζηαζε. Αθφκα ε εθαξκνγή ζα κπνξνχζε λα ζπλεξγαζηεί κε θάπνηνλ πάξνρν, φπσο είλαη ην goglobal.travel, traffco ή αθφκα θαη κε θάπνην ηνπξηζηηθφ πξαθηνξείν. Μέζσ απηήο ηεο ζπλεξγαζίαο, ν ελδηαθεξφκελνο ζα έρεη ηε δπλαηφηεηα λα επηιέμεη εθείλν πνπ ην ζπκθέξεη πεξηζζφηεξν(νηθνλνκηθφηεξν, κε εκηδηαηξνθή θ.α). Αλάινγα κε ηε δήηεζε ησλ μελνδνρεηαθψλ κνλάδσλ, ε εθαξκνγή ζα κπνξνχζε λα εκθαλίδεη ηα δεκνθηιέζηεξα απφ απηά. Πέξαλ απηνχ ζα κπνξεί λα ελνηθηάζεη θαη θάπνην φρεκα. Δπηπιένλ, ζα κπνξνχζε λα ππάξρεη κία μερσξηζηή θαηεγνξία, κέζσ ηεο νπνίαο ε εηαηξεία ζα παξείρε ρξήζηκεο πιεξνθνξίεο θαη ζρεηηθά βίληεν ηνπ πξννξηζκνχ πνπ επέιεμε ν ρξήζηεο. Έηζη, ζα κπνξεί λα ελεκεξσζεί γηα ηα αμηνζέαηα ηεο πφιεο, πνπ βξίζθνληαη κε απεηθφληζε ζε ράξηε θαζψο θαη ηηο ψξεο ιεηηνπξγίαο ηνπο. Παξάιιεια ζα ηνπ δίλνληαη πιεξνθνξίεο ζρεηηθά κε ηε δηαζθέδαζε, ηνπο ρψξνπο εζηηάζεηο, θνληηλέο εμνξκήζεηο θ.α. Σέινο κία βειηίσζε πνπ ζα κπνξνχζε λα γίλεη, είλαη ην ζχζηεκα λα δέρεηαη θαη λα αιιάδεη templates φπσο ζε φια ηα cms, ηα νπνία θαζνξίδνπλ ηελ «ζέζε» ησλ επηκέξνπο ζηνηρείσλ ηεο θάζε ζειίδαο φπσο ην ινγφηππν, ην κελνχ θαη θπξίσο ην πεξηερφκελν. ρεηηθά κε ηνλ θψδηθα, κηα κειινληηθή εμέιημε είλαη ε ρξήζε mysqli αληί γηα mysql, ε νπνία απνηειεί κία βειηησκέλε επέθηαζε ηεο. Ζ βάζε ζα απνθηήζεη πεξηζζφηεξε επειημία θαη ζα επηηξέςεη ζηελ εθαξκνγή λα ππνζηεξίμεη κεγάιν φγθν δεδνκέλσλ ηφζν γηα ηελ απνζήθεπζε δξνκνινγίσλ φζν θαη γηα ηελ απνζήθεπζε ρξεζηψλ. 56

58 ΒΙΒΛΙΟΓΡΑΥΙΑ Laura Lemay, Rafe Colburn, Πιήξεο εγρεηξίδην ηεο HTML θαη CSS (6ε εθδ.), Διιάδα: Μ. Γθηνχξδαο Luke Welling, Laura Thomson, Αλάπηπμε Web Δθαξκνγψλ κε PHP θαη MySQL (4ε εθδ.) Διιάδα Μ. Γθηνχξδαο Melonie Julie C., PHP, MySQL θαη Apache (4ε εθδ.), Διιάδα Μ. Γθηνχξδαο York, Richard. Beginning JavaScript and CSS Development with jquery (1st ed.). Wrox Press. W3schools (2013) PHP, HTML5, SQL, JavaScript tutorials, from php.net, (2013) PHP tutorial, from Adope, (2013) Dreamweaver tutorial, from Udemy, (2013) XAMPP tutorial, from 57

59 Παρϊρτημα Α-ΕΓΦΕΙΡΙΔΙΟ ΦΡΗΗ- ηελ παξαθάησ εηθφλα θαίλεηαη ε αξρηθή ζειίδα ηεο εθαξκνγήο γηα ηνλ επηζθέπηε: 58

60 Μέζσ ηεο αξρηθήο ζειίδαο ν ρξήζηεο ελεκεξψλεηαη γηα ηελ ηζηνξία ηεο εηαηξίαο, πξαγκαηνπνηεί εγγξαθή ζηα newsletter ηεο, ζπκπιεξψλνληαο ην φλνκα θαη ην γηα λα ιακβάλεη θαζεκεξηλά ηα λέα θαη ηηο πξνζθνξέο. Πεξηεγείηαη ζε δηάθνξεο ηζηνζειίδεο κέζα απφ ηνπο ρξήζηκνπο ζπλδέζκνπο. Μπνξεί λα αλαδεηήζεη δξνκνιφγηα, αιιά ην ζχζηεκα γηα ιφγνπο αζθαιείαο ηνλ απνηξέπεη λα θάλεη θξάηεζε. Σέινο απφ ηελ θαξηέια ηεο επηθνηλσλίαο, κπνξεί λα έξζεη ζε επαθή κε ηελ εηαηξία. Δγγξαθή ρξήζηε θαη είζνδνο Με ηε ζπγθεθξηκέλε ιεηηνπξγία δίλεηαη ζηνλ απιφ ρξήζηε επηζθέπηε ε δπλαηφηεηα λα δεκηνπξγήζεη έλα ινγαξηαζκφ ζην ζχζηεκα. Δλ ζπλερεία εκθαλίδεηαη ε θαξηέια ηεο εγγξαθήο φπνπ κπνξεί λα ζπκπιεξψζεη ηα ζηνηρεία ηνπ γηα λα νινθιεξψζεη ηε δηαδηθαζία. Με απηφ ηνλ ηξφπν ν ρξήζηεο έρεη, ην δηθαίσκα πξφζβαζεο ζηηο ππεξεζίεο πνπ πξνζθέξνληαη ζηα κέιε ηεο εθαξκνγήο. 59

61 Παξαπάλσ εκθαλίδνληαη ηα ζηνηρεία πνπ πξέπεη λα ζπκπιεξψζεη ν ρξήζηεο. ηαλ νινθιεξσζεί κε επηηπρία ε εγγξαθή, εκθαλίδεηαη ην παξαθάησ κήλπκα : Ζ ζχζηεκα ζηέιλεη ην ρξήζηε κε ηα ζηνηρεία( ην φλνκα θαη ηνλ θσδηθφ) πνπ δήισζε θαηά ηελ εγγξαθή θαη έλα ζχλδεζκν γηα λα ελεξγνπνηήζεη ην ινγαξηαζκφ ηνπ θαη ηνλ αλαθαηεπζχλεη ζηελ αξρηθή ζειίδα ηεο εηαηξίαο κε ην παξαθάησ κήλπκα. Ο ρξήζηεο κπνξεί πιένλ λα εηζέιζεη ζην ζχζηεκα: 60

62 Παηψληαο ην θνπκπί «Δίζνδνο» εκθαλίδεηαη ε θφξκα ππνβνιήο ζηνηρείσλ «LOGIN USER» δεηψληαο απφ ην ρξήζηε λα ζπκπιεξψζεη ην «φλνκα ρξήζηε» θαη ηνλ «θσδηθφ ρξήζηε» πνπ δήισζε θαηά ηε δηαδηθαζία ηεο εγγξαθήο. ε πεξίπησζε πνπ ν ρξήζηεο μεράζεη ηνλ θσδηθφ ηνπ πξφζβαζεο, κπνξεί κέζα απφ ηελ επηινγή ''Ξεράζαηε ηνλ θσδηθφ ζαο?'' λα πιεθηξνινγήζεη ην πνπ είρε δειψζεη θαηά ηε δεκηνπξγία ηνπ ινγαξηαζκνχ ηνπ γηα λα ηνπ ζηαιεί o θσδηθφο ζην πξνζσπηθφ ηνπ mail. Ο ρξήζηεο κπνξεί λα πινεγείηαη αλάκεζα ζηηο επηινγέο ηνπ κελνχ. Αμίδεη λα ζεκεησζεί φηη ην αξρηθά θνπκπηά "χλδεζε" θαη Δγγξαθή, πιένλ νλνκάδνληαη "Οη θξαηήζεηο κνπ", "Γηαρείξηζε Λνγαξηαζκνχ" θαη "Έμνδνο, φπνπ κπνξεί λα 61

63 παξαθνινπζεί ηελ θξάηεζε ηνπ ή αθφκα θαη λα ηελ αθπξψζεη, λα δηαρεηξηζηεί ηνλ ινγαξηαζκφ ηνπ αιιάδνληαο ηα ζηνηρεία ηνπ ή λα πξαγκαηνπνηήζεη έμνδν, αληίζηνηρα. Ο εγγεγξακκέλνο ρξήζηεο έρεη ηελ δπλαηφηεηα λα δεη θαη ηηο ππφινηπεο θαξηέιεο πνπ αθνξνχλ ηνλ Καιρό, ηηο Σστνές Ερωηήζεις θαη ηελ Επικοινωνία. Αλαδήηεζε Γξνκνινγίσλ θαη Κξάηεζε ε απηήλ ηελ ελφηεηα παξαζέηνληαη ηα βήκαηα πνπ ζα θάλεη έλαο ρξήζηεο γηα λα επηιέμεη ην ιηκάλη αλαρψξεζεο θαζψο θαη πξννξηζκνχ γηα ηελ θξάηεζε δξνκνινγίσλ εθφζνλ είλαη δηαζέζηκα. Δπηιέγνληαο «Αλαδήηεζε Γξνκνινγίσλ» απφ ηελ αξρηθή ζειίδα εκθαλίδεηαη κία θαξηέια αλαδήηεζεο πνπ πεξηέρεη ηα ιηκάληα 62

64 αλαρψξεζεο θαη πξννξηζκνχ, ηηο εκεξνκελίεο αλαρψξεζεο θαη επηζηξνθήο (αλ επηιέμνπκε «Με επηζηξνθή), ηνλ αξηζκφ επηβαηψλ θαη ην φρεκα(αλ ππάξρεη). Ζ εθαξκνγή δίλεη ηελ δπλαηφηεηα ζην ρξήζηε λα επηιέμεη ην ιηκάλη αλαρψξεζεο θαη πξννξηζκνχ κέζα απφ έλαλ αξηζκφ ιηκαληψλ: «Απφ» «Πξνο» ηελ ζπλέρεηα αθνχ ζπκπιεξσζεί ε εκεξνκελία αλαρψξεζεο θαη επηζηξνθήο, ν αξηζκφο επηβαηψλ θαη ην φρεκα(εθφζνλ ππάξρεη) ν ρξήζηεο παηάεη «Αλαδήηεζε». Αλ ην ζχζηεκα δελ κπνξεί λα βξεη δηαζέζηκα δξνκνιφγηα πξνηξέπεη ην ρξήζηε λα μαλαθάλεη επηινγή δξνκνινγίνπ κε θαηλνχξηα ζηνηρεία, φπσο εκθαλίδεηαη παξαθάησ: 63

65 ηελ αληίζεηε πεξίπησζε πνπ ην δξνκνιφγηα πνπ έρεη επηιέμεη είλαη δηαζέζηκα ηφηε ζηελ επφκελε ζειίδα εκθαλίδεηαη ζην ράξηε ε δηαδξνκή. Παξαθάησ εκθαλίδνληαη ηα δξνκνιφγηα αλαρψξεζεο θαη επηζηξνθήο κε ηηο αληίζηνηρεο πιεξνθνξίεο. Ο ελδηαθεξφκελνο πξέπεη λα ηα επηιέμεη απφ ηα radiobuttons θαη λα παηήζεη ην θνπκπί ηεο θξάηεζεο. 64

66 Ζ εθαξκνγή θαηεπζχλεη ην ρξήζηε ζηελ θαξηέια ηεο θξάηεζεο ηνπ δξνκνινγίνπ. ε απηφ ην ζεκείν ν ρξήζηεο ζπκπιεξψλεη ην φλνκα θαη ην επίζεην ηνπ αηφκνπ πνπ ζα ηαμηδέςεη, θαζψο θαη ηελ θακπίλα αλαρψξεζεο/επηζηξνθήο ηνπ πινίνπ. 65

67 Σέινο φηαλ ε θξάηεζε νινθιεξψλεηαη κε επηηπρία πξνβάιιεηαη ην εμήο κήλπκα : Πιένλ ν ρξήζηεο έρεη ηελ δπλαηφηεηα κέζα απφ ηελ επηινγή «Οη θξαηήζεηο κνπ» λα θάλεη αθχξσζε ηεο θξάηεζεο θαη ε θαηάζηαζε ηεο λα κεηαηξαπεί: απφ Επιβεβαιωμένη ζε Ακσρωμένη 66

68 Ξελνδνρεία ηελ επηινγή «Ξελνδνρεία» ν ρξήζηεο έρεη ηελ δπλαηφηεηα πιεθηξνινγψληαο ηελ Πφιε ή ην ιηκάλη πξννξηζκνχ θαζψο θαη ηηο εκεξνκελίεο, ηα άηνκα θαη ηα δσκάηηα λα βξεη αλ ππάξρνπλ δηαζέζηκα δσκάηηα θαη πιεξνθνξίεο ζρεηηθά κε ηα μελνδνρεία. Παξαθάησ εκθαλίδνληαη ηα απνηειέζκαηα γηα ηα δηαζέζηκα μελνδνρεία : 67

69 ε πεξίπησζε πνπ δε βξεζνχλ δηαζέζηκα δσκάηηα γηα ηε ζπγθεθξηκέλε ρξνληθή πεξίνδν πνπ επέιεμε ν ρξήζηεο, ην ζχζηεκα ηνλ πξνηξέπεη λα επαλαιάβεη ηε δηαδηθαζία. Καηξόο ηελ θαηεγνξία «θαηξφο» ζηελ νπνία έρεη πξφζβαζε κφλνλ ν ρξήζηεο πνπ έρεη πξαγκαηνπνηήζεη εγγξαθή θαη ζχλδεζε ζην ζχζηεκα, κπνξεί λα παξαθνινπζήζεη ηνλ θαηξφ δσληαλά γηα θάζε πφιε ηεο Διιάδαο αιιά θαη γηα φιν ηνλ θφζκν. Πιεθηξνινγψληαο απιά ην φλνκα ηεο πφιεο έρεη ζηε δηάζεζε ηνπ ηελ ζεξκνθξαζία θαη ηηο θαηξηθέο ζπλζήθεο πνπ επηθξαηνχλ. 68

70 πρλέο εξσηήζεηο θαη επηθνηλσλία Οη άλζξσπνη πνπ δελ ηαμηδεχνπλ ζπρλά έρνπλ ζπλήζσο απνξίεο ζρεηηθά κε ηα δηθαηψκαηα θαη ηηο ππνρξεψζεηο ηνπο απέλαληη ζηε εηαηξία. Μέζα απφ ηελ θαξηέια «πρλέο εξσηήζεηο» ππάξρνπλ απαληήζεηο γηα πνιιά ζέκαηα πνπ αθνξνχλ ην επηβαηηθφ θνηλφ. ε πεξίπησζε πνπ απαληήζεηο δελ θαιχπηνπλ πιήξσο ηηο απνξίεο ελφο ρξήζηε, ηνπ δίλνπκε ηελ δπλαηφηεηα κέζα απφ ηελ θαξηέια «Δπηθνηλσλία» λα έξζεη ζε επαθή κε ηελ εηαηξία είηε επηθνηλσλψληαο ηειεθσληθά ζηα δηαζέζηκα ηειέθσλα είηε αθήλνληαο θάπνην ζρφιην. 69

71 ΓΙΑΥΔΙΡΙΗ ΔΦΑΡΜΟΓΗ ύλδεζε δηαρεηξηζηή ηελ δηαρείξηζε ηεο εθαξκνγήο,ζηελ νπνία έρεη πξφζβαζε κφλν ν δηαρεηξηζηήο είλαη κηα μερσξηζηή ηζηνζειίδα. Μέζα απφ απηή, κπνξνχλ λα πξαγκαηνπνηεζνχλ αιιαγέο θαη παξακεηξνπνηήζεηο πνπ αθνξνχλ φιε ηελ εθαξκνγή. Ο δηαρεηξηζηήο εηζάγεη ην λνκα Γηαρεηξηζηή θαη ηνλ θσδηθφ ηνπ πξνθεηκέλνπ λα εηζέιζεη ζην ζχζηεκα. Ζ αξρηθή ζειίδα ηεο δηαρείξηζεο: 70

72 Υξήζηεο Μέζα απφ απηήλ ηε θαηεγνξία ν δηαρεηξηζηήο κπνξεί λα επεμεξγαζηεί ηα ζηνηρεία ελφο ρξήζηε, λα ηνπ δψζεη πξφζβαζε δηαρεηξηζηή, λα ηνλ δηαγξάςεη αιιά θαη λα πξνζζέζεη έλαλ θαηλνχξην ζε πεξίπησζε πνπ δελ κπνξεί λα γίλεη απηφ απφ ηνλ ίδην ηνλ ρξήζηε. Δπεμεξγαζία ζηνηρείσλ ρξήζηε ηαλ ν δηαρεηξηζηήο παηήζεη ην κνιπβάθη, ηνπ εκθαλίδεηαη ε θφξκα (φκνηα κε ηεο εγγξαθήο)φπνπ κπνξεί λα αιιάμεη ηα ζηνηρεία ηνπ ρξήζηε, ή αθφκα θαη λα ηνπ δψζεη δηθαηψκαηα δηαρεηξηζηή. 71

73 Γηαγξαθή Υξήζηε Ο δηαρεηξηζηήο έρεη ηελ δπλαηφηεηα λα δηαγξάςεη έλαλ ρξήζηε, απιά θάλνληαο θιηθ ζην «απαγνξεπηηθφ» ζχκβνιν δεμηά ηνπ νλφκαηνο ηνπ. Πξόζζεζε Υξεζηώλ Ο δηαρεηξηζηήο έρεη ηελ δπλαηφηεηα λα πξνζζέζεη έλαλ ρξήζηε ψζηε λα έρεη πιήξε πξφζβαζε ζηελ θπξίσο εθαξκνγή, ζε πεξίπησζε πνπ δελ είλαη εθηθηφ απηφ απφ ηνλ ίδην ηνλ ρξήζηε. 72

74 NEWSLETTERS ε απηήλ ηελ ελφηεηα γίλεηαη ε δηαρείξηζε ησλ ελεκεξσηηθψλ δειηίσλ. O δηαρεηξηζηήο δεκηνπξγεί ην κήλπκα, ην νπνίν απνζηέιιεη είηε μερσξηζηά ζηνλ θάζε ρξήζηε, είηε κε ηε κνξθή καδηθψλ . Παξακεηξνπνίεζε ε απηήλ ηελ ελφηεηα παξνπζηάδνληαη νη αιιαγέο πνπ κπνξνχλ λα γίλνπλ ζηελ εκθάληζε ηεο ηζηνζειίδαο. Οη αιιαγέο απηέο αθνξνχλ ην φλνκα ηεο ηζηνζειίδαο, ην ινγφηππν, ην mail θαη ην roundtrip. 73

75 Λνγόηππν Παξαθάησ ζα αλαιπζεί ε δηαδηθαζία ηεο εηζαγσγήο κε ιεπηνκεξή ηξφπν θαη θαηφπηλ ηεο αιιαγήο ηνπ ινγφηππνπ. Αξρηθά ν δηαρεηξηζηήο κέζα απφ ηελ επηινγή ηεο ''Αλαδήηεζεο'', αλαδεηά ηελ εηθφλα πνπ επηζπκεί λα αλεβάζεη. Αλ ε ελέξγεηα ηνπ, είλαη επηηπρήο ηφηε ε έλδεημε ''Δεν επιλέτηηκε αρτείο'' παίξλεη ην φλνκα ηεο εηθφλαο θαη κε ηελ επηινγή ηνπ ''upload'' ε εηθφλα θνξηψλεηαη ζην ζχζηεκα. 74

76 Ο δηαρεηξηζηήο κπνξεί πιένλ λα αιιάμεη ην ινγφηππν ηεο Δηαηξίαο Δπηιέγεη ηελ εηθφλα πνπ κεηαθφξησζε ζην ζχζηεκα ηαλ παηάεη ηελ ''Απνζήθεπζε'' αιιάδεη ην ''Σξέρνλ Λνγφηππν''. 75

77 Αλ μαλαπαηήζεη ηελ ''Απνζήθεπζε'' αιιάδεη ην ινγφηππν ζε φιε ηελ εθαξκνγή. Κξαηήζεηο Σν ζχλνιν ησλ θξαηήζεσλ πνπ έρεη γίλεη απφ ηνπο ρξήζηεο είλαη ζηε δηάζεζε ηνπ δηαρεηξηζηή γηα ηελ ηξνπνπνίεζε ησλ ζηνηρείσλ θαζψο θαη γηα ηε δηαγξαθή ηνπο. 76

78 ηαλ ν δηαρεηξηζηήο επηιέγεη ην ''κνιπβάθη'' εκθαλίδνληαη ηα ζηνηρεία ηεο θξάηεζεο ηνπ ρξήζηε, φπνπ κπνξεί λα πξαγκαηνπνηήζεη ηηο αιιαγέο αιιά κπνξεί θαη λα ηε δηαγξάςεη αλ ρξεηαζηεί. Ο ρξήζηεο ελεκεξψλεηαη κέζσ γηα ηηο αιιαγέο ζρεηηθά κε ηελ θξάηεζε ηνπ. Αλ ε θξάηεζε δηαγξαθεί απφ ηνλ δηαρεηξηζηή ηφηε δηαγξάθεηαη απηφκαηα θαη απφ ηνλ πξνζσπηθφ ινγαξηαζκφ ηνπ ρξήζηε πνπ έθαλε ηελ θξάηεζε. 77

79 Άξζξα ηελ ελφηεηα απηή ν δηαρεηξηζηήο έρεη ηελ δπλαηφηεηα λα αιιάμεη ην πεξηερφκελν γηα ηελ εηαηξία θαη ηηο ''Σστνές ερωηήζεις'' πνπ ππάξρνπλ ζηελ εθαξκνγή. Ο δηαρεηξηζηήο κπνξεί λα ηξνπνπνηήζεη ην πεξηερφκελν ησλ άξζξσλ, λα δηαγξάςεη θάπνην θαη ζηε ζέζε ηνπ λα εηζάγεη λέν. ε πεξίπησζε πνπ δελ ππάξρνπλ δηαζέζηκεο ζέζεηο γηα ηελ εηζαγσγή λένπ άξζξνπ ηφηε εκθαλίδεηαη ην παξαθάησ κήλπκα: 78

80 ΠΑΡΑΡΣΗΜΑ Β-ΛΕΞΙΚΟ ΔΕΔΟΜΕΝΩΝ- Μεηαβιεηή Σύπνο Υξήζε $username, $pass, $retypepass, $ , $address, $name, $zipcode, $country, $city, string Δίλαη ηα ζηνηρεία πνπ εηζάγεη ν ρξήζηεο θαηά ηε δηαδηθαζία ηεο εγγξαθήο ηνπ ζηελ εθαξκνγή. $bfoundposition boolean Υξεζηκνπνηείηαη γηα λα βξεζνχλ ειεχζεξεο ζέζεηο ζην template γηα ηελ εηζαγσγή πεξηερνκέλνπ. Έρεη αξρηθή ηηκή false. $breturn boolean Υξεζηκνπνηείηαη γηα ηελ επηζηξνθή ηνπ απνηειέζκαηνο. Γίλεηαη true εάλ επηζηξέςεη ην επηζπκεηφ απνηέιεζκα $subject, $message, $ , $name,$surname $SelectedCompany, $SelectedFerry, $SelectedCompanyR, string Απνηεινχλ ηηο παξακέηξνπο ηεο ζπλάξηεζεο SendPHPMailer φζνλ αθνξά ηελ απνζηνιή Νewsletter. string Αθνξνχλ ηα επηιεγκέλα πινία αλαρψξεζεο/επηζηξνθήο θαζψο θαη ηηο εηαηξίεο πνπ ηα εκπεξηέρνπλ. $SelectedFerryR. $i integer Μεηξεηήο ζπλζήθεο for() $inumfinduser integer Ο αξηζκφο ησλ εγγξαθψλ πνπ θέξλεη ην εξψηεκα κε βάζε ην userid. $iresid integer Σν id ηεο θξάηεζεο ην νπνίν ρξεζηκνπνηείηαη γηα ηελ αθχξσζε ή ηε δηαγξαθή ηεο. $itimeallez integer Ζ ψξα επηζηξνθήο $aarrayferriesallez array Δπηζηξέθεη κία ζεηξά απνηειεζκάησλ φζνλ αθνξά ηα ζηνηρεία ηεο αλαρψξεζεο. 79

81 ΠΑΡΑΡΣΗΜΑ Γ-ΑΠΑΙΣΗΕΙ ΠΡΟΓΡΑΜΜΑΣΟ- Λεηηνπξγία Δγγξαθή ρξήζηε Γεδνκέλα εηζόδνπ λνκα ρξήζηε, θσδηθφο, επηβεβαίσζε θσδηθνχ, e- mail, Ολνκαηεπψλπκν ρξήζηε, ρψξα, πφιε, δηεχζπλζε, ζηαζεξφ θαη θηλεηφ ηειέθσλν, ηαρπδξνκηθφο θψδηθαο Πξνέιεπζε Έμνδνο πξννξηζκνύ Δλέξγεηα Απαίηεζε Πξνϋπόζεζε Απνηέιεζκα Πιεθηξνιφγην Β.Γ Δγγξαθή ρξήζηε ζηελ ηζηνζειίδα πκπιήξσζε ησλ ζηνηρείσλ εγγξαθήο Γελ ππάξρεη Δγγξαθή ρξήζηε ζηε Β.Γ Λεηηνπξγία Γεδνκέλα εηζόδνπ Πξνέιεπζε Έμνδνο πξννξηζκνύ Δλέξγεηα Απαίηεζε Πξνϋπόζεζε Απνηέιεζκα Δίζνδνο ρξήζηε (login) λνκα ρξήζηε, θσδηθφο ρξήζηε Πιεθηξνιφγην Β.Γ., ηζηνζειίδα Δίζνδνο ζηελ ηζηνζειίδα Απφδνζε ησλ ζσζηψλ δεδνκέλσλ Δγγεγξακκέλνο ρξήζηεο Δίζνδνο σο ρξήζηεο ζηελ ηζηνζειίδα 80

82 Λεηηνπξγία Κξάηεζε εηζηηεξίνπ Γεδνκέλα εηζόδνπ Ληκάλη αλαρψξεζεο/πξννξηζκνχ, εκεξνκελία αλαρψξεζεο/επηζηξνθήο, αξηζκφο επηβαηψλ, roundtrip, φρεκα Πξνέιεπζε Έμνδνο πξννξηζκνύ Δλέξγεηα Απαίηεζε Πξνϋπόζεζε Απνηέιεζκα Πιεθηξνιφγην Β.Γ, νζφλε Αλαδήηεζε δξνκνινγίνπ ζηε βάζε Γηαζέζηκν δξνκνιφγην Δγγεγξακκέλνο ρξήζηεο Κξάηεζε εηζηηεξίνπ Λεηηνπξγία Γεδνκέλα εηζόδνπ Πξνέιεπζε Έμνδνο πξννξηζκνύ Δλέξγεηα Απαίηεζε Πξνϋπόζεζε Απνηέιεζκα Πιεξνθνξίεο μελνδνρείσλ Πφιε ή ιηκάλη, εκεξνκελίεο άθημεο/αλαρψξεζεο, αξηζκφο αηφκσλ, αξηζκφο δσκαηίσλ Πιεθηξνιφγην Οζφλε Αλαδήηεζε μελνδνρείνπ Γηαζέζηκν μελνδνρείν Δγγεγξακκέλνο ρξήζηεο Δκθάληζε πιεξνθνξηψλ 81

83 Λεηηνπξγία Γεδνκέλα εηζόδνπ Πξνέιεπζε Έμνδνο πξννξηζκνύ Δλέξγεηα Απαίηεζε Πξνϋπόζεζε Απνηέιεζκα Newsletter (ρξήζηε) λνκα, Πιεθηξνιφγην Β.Γ. Απνζηνιή αηηήκαηνο γηα ελεκέξσζε ρξήζηε Απφδνζε ζσζηνχ Γελ ππάξρεη Ο ρξήζηεο ιακβάλεη ελεκεξσηηθφ Λεηηνπξγία Γεδνκέλα εηζόδνπ Πξνέιεπζε Έμνδνο πξννξηζκνύ Δλέξγεηα Απαίηεζε Πξνϋπόζεζε Απνηέιεζκα Καηξόο λνκα πφιεο Πιεθηξνιφγην Οζφλε Δλεκέξσζε θαηξηθψλ ζπλζεθψλ Nα πιεθηξνινγεζεί ζσζηά ε πφιε Δγγεγξακκέλνο ρξήζηεο Δκθάληζε θαηξνχ 82

84 Λεηηνπξγία Γεδνκέλα εηζόδνπ Πξνέιεπζε Έμνδνο πξννξηζκνύ Δλέξγεηα Απαίηεζε Πξνϋπόζεζε Απνηέιεζκα Δίζνδνο δηαρεηξηζηή (login) λνκα δηαρεηξηζηή, θσδηθφο Πιεθηξνιφγην Β.Γ., ηζηνζειίδα Δίζνδνο ζηελ πιαηθφξκα δηαρείξηζεο Πιεθηξνιφγεζε ζσζηψλ ζηνηρείσλ Γελ ππάξρεη Δίζνδνο δηαρεηξηζηή ζηελ πιαηθφξκα δηαρείξηζεο Λεηηνπξγία Γεδνκέλα εηζόδνπ Πξνέιεπζε Έμνδνο πξννξηζκνύ Δλέξγεηα Απαίηεζε Πξνϋπόζεζε Απνηέιεζκα Δπεμεξγαζία ζηνηρείσλ ρξήζηε (δηαρεηξηζηήο) ια ηα πεδία ησλ ζηνηρείσλ εγγξαθήο ηνπ ρξήζηε Πιεθηξνιφγην Β.Γ., Οζφλε Αιιαγή/δηφξζσζε ζηνηρείσλ Όπαξμε ηνπ ρξήζηε Δίζνδνο σο δηαρεηξηζηήο Απνζήθεπζε λέσλ ζηνηρείσλ ζηελ Β.Γ 83

85 Λεηηνπξγία Γεδνκέλα εηζόδνπ Πξνέιεπζε Έμνδνο πξννξηζκνύ Δλέξγεηα Απαίηεζε Πξνϋπόζεζε Απνηέιεζκα Newsletter (δηαρεηξηζηή) λνκα, πιεθηξνιφγην Οζφλε Απνζηνιή ελεκεξσηηθψλ mail ζηνπο ρξήζηεο Αίηεκα ρξήζηε λα ελεκεξψλεηαη γηα ηα λέα Δίζνδνο σο δηαρεηξηζηήο Απνζηνιή mail απφ ηνλ δηαρεηξηζηή πξνο ηνπο ρξήζηεο Λεηηνπξγία Γεδνκέλα εηζόδνπ Πξνέιεπζε Έμνδνο πξννξηζκνύ Δλέξγεηα Απαίηεζε Πξνϋπόζεζε Απνηέιεζκα Παξακεηξνπνίεζε ηζηνζειίδαο (δηαρεηξηζηήο) Site Name, Site logo, Site mail, default roundtrip Πιεθηξνιφγην, αξρεία ππνινγηζηή Β.Γ, Οζφλε Αιιαγή ηνπ νλφκαηνο, ηνπ logo θαη ηνπ mail Πξνζζήθε λέσλ δεδνκέλσλ ζηελ ηζηνζειίδα Δίζνδνο σο δηαρεηξηζηήο Παξακεηξνπνίεζε ηεο ηζηνζειίδαο 84

86 Λεηηνπξγία Δπεμεξγαζία θξαηήζεσλ (δηαρεηξηζηήο) Γεδνκέλα εηζόδνπ Ζκεξνκελία αλαρψξεζεο/επηζηξνθήο, εηαηξίαπινίν-θακπίλα αλαρψξεζεο, εηαηξία-πινίν-θακπίλα επηζηξνθήο Πξνέιεπζε Έμνδνο πξννξηζκνύ Δλέξγεηα Απαίηεζε Πξνϋπόζεζε Απνηέιεζκα Πιεθηξνιφγην Β.Γ, Οζφλε Αιιαγή ησλ πεδίσλ θξάηεζεο Πξνζζήθε λέσλ ζηνηρείσλ ζηε Β.Γ Δίζνδνο σο δηαρεηξηζηήο Αιιαγή ζηνηρείσλ θξάηεζεο Λεηηνπξγία Γεδνκέλα εηζόδνπ Πξνέιεπζε Έμνδνο πξννξηζκνύ Δλέξγεηα Απαίηεζε Πξνϋπόζεζε Απνηέιεζκα Δπεμεξγαζία άξζξσλ (δηαρεηξηζηήο) πρλέο εξσηήζεηο-απαληήζεηο, ζηνηρεία εηαηξίαο Πιεθηξνιφγην Β.Γ, Οζφλε Δπεμεξγαζία θαη πξνζζήθε λέσλ άξζξσλ Πξνζζήθε λέσλ ζηνηρείσλ ζηε Β.Γ Δίζνδνο σο δηαρεηξηζηήο Αιιαγή πεξηερνκέλνπ ηζηνζειίδαο 85

87 ΠΑΡΑΡΣΗΜΑ Δ-ΠΡΟΔΙΑΓΡΑΥΕ- 1) Δξ.: Σί ζα θάλεη ε εθαξκνγή; Απ.: Ζ εθαξκνγή ζα δηαρεηξίδεηαη ηα δξνκνιφγηα κηαο λαπηηιηαθήο εηαηξίαο. Ο ρξήζηεο πνπ ηελ επηζθέπηεηαη ζα έρεη ηελ δπλαηφηεηα λα θάλεη εγγξαθή ζην ζχζηεκα, λα δεη ηα δξνκνιφγηα, λα θάλεη θξάηεζε εηζηηεξίνπ, λα παξαθνινπζεί ηνλ θαηξφ, λα καζαίλεη λέα γηα ηελ εηαηξία, θαη λα βξίζθεη μελνδνρεία. Ζ δηαρείξηζε ηεο εθαξκνγήο ζα γίλεηαη απφ έλαλ δηαρεηξηζηή ν νπνίνο έρεη ηελ δπλαηφηεηα λα αιιειεπηδξά κε ηνπο ρξήζηεο θαη ηελ ηζηνζειίδα πξαγκαηνπνηψληαο αιιαγέο φπνπ ρξεηάδεηαη. 2) Δξ.: Πώο ζα ζπγθεληξσζνύλ ηα ζηνηρεία ησλ ρξεζηώλ; Απ.: Σα ζηνηρεία εγγξαθήο ησλ ρξεζηψλ απνζεθεχνληαη απηφκαηα ζηε βάζε δεδνκέλσλ. 3) Δξ.: Πνηνο ζα είλαη ππεύζπλνο γη απηά; Απ.: Κάζε ρξήζηεο κπνξεί λα επεμεξγαζηεί ηα ζηνηρεία ηνπ αιιά φρη λα ηα δηαγξάςεη. Γηαγξαθή ρξήζηε γίλεηαη κφλν απφ ηνλ δηαρεηξηζηή. 4) Δξ.: Θα γίλεηαη απηόκαηα ε ιήςε ζηνηρείσλ (π.ρ. δηαδηθηπαθά) ή ζα πξνζηίζεηαη από θάπνηνλ; Απ.: ε πεξίπησζε πνπ ν ρξήζηεο μεράζεη ηνλ θσδηθφ πξφζβαζεο ζα ελεκεξψλεηαη απηφκαηα κε ππελζχκηζε ζην πνπ έρεη θαηαρσξήζεη θαηά ηελ δηαδηθαζία ηεο εγγξαθήο. Σα ππφινηπα ζηνηρεία πξνζηίζεληαη είηε απφ ηνλ ρξήζηε είηε απφ ηνλ δηαρεηξηζηή. 5) Δξ.: Πόζα δηαθνξεηηθά είδε ρξεζηώλ ζα ππάξρνπλ ζην ζύζηεκα; Απ.: Γχν. Ο ηχπνο ρξήζηε user πνπ είλαη ν πειάηεο ηεο εηαηξίαο θαη ν ηχπνο admin πνπ είλαη ν δηαρεηξηζηήο ηεο ηζηνζειίδαο. 86

88 6) Δξ.: Πνηα ζηνηρεία ζα θαηαγξάθνληαη θαηά ηελ εγγξαθή; Απ.: Σν φλνκα ρξήζηε, ν θσδηθφο, ην , ην νλνκαηεπψλπκν, ην ζηαζεξφ θαη θηλεηφ ηειέθσλν, ε ρψξα, ε πφιε, ε δηεχζπλζε θαη ν ηαρπδξνκηθφο θψδηθαο. 7) Δξ.: Από πνπ ζα ιακβάλνληαη απηά ηα ζηνηρεία; Απ.: ια ηα ζηνηρεία ιακβάλνληαη απφ ηνλ ρξήζηε θαη απφ ηνλ Γηαρεηξηζηή. 8) Δξ.: Με πνηόλ ηξόπν ζα παξνπζηάδνληαη ηα δεδνκέλα ζηελ νζόλε; Απ.: Σα δεδνκέλα ζα εμάγνληαη απφ ηελ βάζε δεδνκέλσλ θαη κέζσ ζπλαξηήζεσλ πνπ ζα δεκηνπξγνχληαη απφ ηελ εθαξκνγή ζα εκθαλίδνληαη ζηελ νζφλε. 9) Δξ.: ε ηη είδνπο Η/Τ ζα εθηειείηαη ε εθαξκνγή; Απ.: ε νπνηνδήπνηε είδνο Ζ/Τ. 10) Δξ.: Θα ππάξρνπλ άιιεο πξνϋπνζέζεηο αλ εθηειείηαη ε εθαξκνγή θαη ζε άιιν ιεηηνπξγηθό ζύζηεκα; Απ.: ρη. 11) Δξ.: ε πνηεο γιώζζεο πξνγξακκαηηζκνύ ζα αλαπηπρζεί; Απ.: ε ζπλδπαζκφ ησλ γισζζψλ: PHP, HTML5, MySql, JavaScript. 12) Δξ.: Γηα πνην ιόγν ζηηο ζπγθεθξηκέλεο γιώζζεο; Απ.: Γηαηί απηέο νη γιψζζεο ππνζηεξίδνπλ πξνγξακκαηηζκφ πνπ ιεηηνπξγεί ζηνλ παγθφζκην ηζηφ. 13) Δξ.: Πσο ζα εηζέξρεηαη θάπνηνο ζηελ εθαξκνγή; Απ.: Απαξαίηεηε πξνυπφζεζε είλαη ν Ζ/Τ λα έρεη πξφζβαζε ζην internet θαη λα δηαζέηεη νπνηνλδήπνηε web server. ηε ζπλέρεηα ζα κεηαβαίλεη ζην url ηεο ηζηνζειίδαο κέζσ ηνπ server ηνπ. 14) Δξ.: Θα ππάξρνπλ δηάθνξνη ηύπνη ρξεζηώλ; Απ.: Ναη. Ο ρξήζηεο θαη ν δηαρεηξηζηήο. 87

89 15) Δξ.: Θα πξέπεη λα εθπαηδεπηνύλ γηα λα ρξεζηκνπνηήζνπλ ηελ εθαξκνγή; Απ.: ρη. Ζ εθαξκνγή έρεη ζρεδηαζηεί έηζη ψζηε λα είλαη θηιηθή πξνο ηνλ ρξήζηε. 16) Δξ.: Θα ππάξρνπλ πεξηνξηζκνί ζηελ ηαρύηεηα εθηέιεζεο, ζηνλ ρξόλν απόθξηζεο ή ζηελ ηαρύηεηα δηεθπεξαίσζεο; Απ.: ρη. 17) Δξ.: Ση ππνδνκή θαη άιινη πόξνη απαηηνύληαη γηα ηελ αλάπηπμε ηεο εθαξκνγήο; Απ.: Απαηηείηαη έλα παθέην πξνγξακκάησλ πνπ πεξηέρεη ηνλ εμππεξεηεηή ηζηνζειίδσλ, κία βάζε δεδνκέλσλ έλα δηεξκελέα γηα θψδηθα γξακκέλν ζε γιψζζεο πξνγξακκαηηζκνχ PHP θαη έλα text editor. 18) Δξ.: Τπάξρεη ρξνληθό όξην γηα ηελ αλάπηπμε ηεο εθαξκνγήο; Απ.: Ναη. Έμη κήλεο. 19) Δξ.: Πνηεο πξέπεη λα είλαη νη γλώζεηο ηνπ αλζξώπνπ πνπ ζα ηελ αλαπηύμεη; Απ.: Καιή γλψζε θαη ρξήζηε ησλ γισζζψλ PHP, MySQL, HTML, Java. 20) Δξ.: Πξέπεη ην ζύζηεκα λα εληνπίδεη θαη λα απνκνλώλεη ηα ζθάικαηα; Απ.: Ναη, έηζη ψζηε ε δηαδηθαζία πνπ πεξλάεη ρξήζηεο λα γίλεηαη πην εχθνιε. 88

90 ΠΑΡΑΡΣΗΜΑ Ε-ΑΝΑΛΤΗ ΒΑΗ ΔΕΔΟΜΕΝΩΝ- Ζ βάζε δεδνκέλσλ κε φλνκα ptyxiaki_ferries απνηειείηαη απφ 15 ζπλνιηθά πίλαθεο: 1.Πίλαθαο Cabinclasses Ο πίλαθαο Cabinclasses πεξηέρεη : 1. ην id ηνπ πίλαθα, ην νπνίν είλαη θαη ην πξσηεχνλ θιεηδί, 2. ην είδνο ηεο θακπίλαο πνπ κπνξεί λα επηιέμεη ν ρξήζηεο( θαηάζηξσκα/ζαιφλη, 2-θιηλε, 4-θιηλε ή lux), 3. ηελ θιάζε Α ή Β, 4. ηα πινία, ηα νπνία ηηο εκπεξηέρνπλ. 89

91 2.Πίλαθαο Companies Ο πίλαθαο Companies πεξηέρεη : 1. ην id ηνπ πίλαθα, ην νπνίν είλαη θαη ην πξσηεχνλ θιεηδί, 2. ηα νλφκαηα ησλ λαπηηιηαθψλ εηαηξηψλ, 3. ηo πξφζεκα (Prefix) ηεο θάζε εηαηξίαο. 3.Πίλαθαο Content Ο πίλαθαο Content πεξηέρεη : 1. ην id ηνπ πίλαθα, ην νπνίν είλαη θαη ην πξσηεχνλ θιεηδί, 2. ην φλνκα ηνπ άξζξνπ, 3. ην άξζξν, ην νπνίν κπνξεί λα είλαη πιεξνθνξίεο ή ζπρλέο εξσηήζεηο πνπ αθνξνχλ ηελ εηαηξία. 4. ηε ζέζε ηνπ άξζξνπ ζηελ εθαξκνγή. 90

92 4.Πίλαθαο Ferryname Ο πίλαθαο Ferryname πεξηέρεη: 1. To id ηνπ πίλαθα, ην νπνίν είλαη θαη ην πξσηεχνλ θιεηδί, 2. ην CompanyPrefix, ην νπνίν είλαη δεπηεξεχνλ θιεηδί. Γειψλεη ζε πνηα εηαηξεία αλήθεη ην θάζε πινίν, 3. ην φλνκα ηνπ πινίνπ, 4. ην ιηκάλη πξννξηζκνχ, 5. ηo πξφζεκα (Prefix) ηεο θάζε εηαηξίαο. 5. Πίλαθαο hotels Ο πίλαθαο hotels πεξηέρεη : 1. To id ηνπ πίλαθα, ην νπνίν είλαη θαη ην πξσηεχνλ θιεηδί, 2. ην φλνκα ηνπ μελνδνρείνπ, 3. ηε δηεχζπλζε ηνπ, 4. ηνλ ηαρπδξνκηθφ θψδηθα ηνπ, 91

93 5. ηελ πφιε πνπ βξίζθεηαη, 6. ην ηειέθσλν επηθνηλσλίαο, 7. ηελ εκεξνκελία πνπ επηζπκεί ν ρξήζηεο λα θάλεη θξάηεζε, 8. ηελ εκεξνκελία πνπ επηζπκεί ν ρξήζηεο λα απνρσξήζεη, 9. ηε ρσξεηηθφηεηα ηνπ μελνδνρείνπ. 6. Πίλαθαο newsletters Ο πίλαθαο newsletter πεξηέρεη: 1. To id ηνπ πίλαθα, ην νπνίν είλαη θαη ην πξσηεχνλ θιεηδί, 2. ην φλνκα ηνπ ρξήζηε πνπ εγγξάθεηαη ζηα ελεκεξσηηθά δειηία, 3. ην mail ηνπ ρξήζηε πνπ δήισζε γηα λα ελεκεξψλεηαη κε ηα ηειεπηαία λέα ηεο εηαηξείαο, 4. ππάξρεη θαη ε επηινγή δηαγξαθήο ηνπ ρξήζηε απφ ηα ελεκεξσηηθά δειηία. 7. Πίλαθαο passengers Ο πίλαθαο passengers πεξηέρεη: 1. To id ηνπ πίλαθα, ην νπνίν είλαη θαη ην πξσηεχνλ θιεηδί, 2. ην id ηεο θξάηεζεο, ην νπνίν είλαη δεπηεξεχνλ θιεηδί. Γειψλεη ζε πνηα θξάηεζε έρεη δεισζεί ν ρξήζηεο, 3. ην φλνκα ηνπ ρξήζηε, 92

94 4. ην επίζεην ηνπ ρξήζηε. 8. Πίλαθαο ports Ο πίλαθαο ports πεξηέρεη: 1. To id ηνπ πίλαθα, ην νπνίν είλαη θαη ην πξσηεχνλ θιεηδί, 2. ην φλνκα ηνπ ιηκαληνχ, 3. ζε πνηα πφιε βξίζθεηαη ην ιηκάλη, 4. ζε πνηα ρψξα βξίζθεηαη ην ιηκάλη, 5. ηo πξφζεκα (Prefix) ηνπ θάζε ιηκαληνχ. 9. Πίλαθαο reservations Ο πίλαθαο Reservations πεξηέρεη: 1. To id ηνπ πίλαθα, ην νπνίν είλαη θαη ην πξσηεχνλ θιεηδί, 2. ην id ηνπ ρξήζηε, ην νπνίν είλαη δεπηεξεχνλ θιεηδί. Γειψλεη πνηνο ρξήζηεο έρεη θάλεη ηελ θξάηεζε, 93

95 3. ηελ θαηάζηαζε ηεο θξάηεζεο. Αλ είλαη επηβεβαησκέλε ζα δεισζεί κε ην γξάκκα Ο ελψ αλ είλαη αθπξσκέλε κε ην γξάκκα C. 4. απφ πνην ιηκάλη ζα πξαγκαηνπνηεζεί ε αλαρψξεζε, 5. απφ πνην ιηκάλη ζα πξαγκαηνπνηεζεί ε επηζηξνθή(εθφζνλ έρεη δεισζεί),, 6. πνηα εκεξνκελία ζα πξαγκαηνπνηεζεί ε αλαρψξεζε, 7. πνηα εκεξνκελία ζα πξαγκαηνπνηεζεί ε επηζηξνθή(εθφζνλ έρεη δεισζεί), 8. ηνλ ηχπν ηεο θξάηεζεο, 9. αλ ην εηζηηήξην ζα είλαη κε επηζηξνθή, 10. ην id ηνπ νρήκαηνο, ην νπνίν είλαη δεπηεξεχνλ θιεηδί. 10. Πίλαθαο siteparams Ο πίλαθαο siteparams πεξηέρεη: 1. To id ηνπ πίλαθα, ην νπνίν είλαη θαη ην πξσηεχνλ θιεηδί, Ο δηαρεηξηζηήο κέζα απφ απηφ ηνλ πίλαθα κπνξεί λα αιιάμεη: 2. ην φλνκα ηεο ηζηνζειίδαο, 3. ην ινγφηππν ηεο ηζηνζειίδαο, 4. ην mail ηεο ηζηνζειίδαο 5. αλ ζα λαη πξνεπηιεγκέλε ε επηινγή ηεο επηζηξνθήο. 11. Πίλαθαο templateposition 94

96 Ο πίλαθαο templateposition πεξηέρεη: 1. To id ηνπ πίλαθα, ην νπνίν είλαη θαη ην πξσηεχνλ θιεηδί, 2. ην id ηεο ζέζεο ηνπ template, 3. θαη ηε ζέζε ηνπ template. 12. Πίλαθαο templates Ο πίλαθαο templateposition πεξηέρεη: 1. To id ηνπ πίλαθα, ην νπνίν είλαη θαη ην πξσηεχνλ θιεηδί, 2. ην id ηνπ template, 3. ην φλνκα ηνπ template, 4. πνην είλαη ην ηξέρνλ template. 13.Πίλαθαο tripdetails Ο πίλαθαο tripdetails πεξηέρεη : 95

97 1. To id ηνπ πίλαθα, ην νπνίν είλαη θαη ην πξσηεχνλ θιεηδί, 2. ην id ηεο θξάηεζεο, ην νπνίν είλαη δεπηεξεχνλ θιεηδί 3. ην id ηνπ ρξήζηε, ην νπνίν είλαη δεπηεξεχνλ θιεηδί. 4. ηελ εηαηξεία πνπ ζα επηιέμεη γηα ηελ αλαρψξεζε ηνπ 5. ηελ εηαηξεία πνπ ζα επηιέμεη γηα ηελ επηζηξνθή, 6. ην πινίν ηεο αλαρψξεζεο, 7. ην πινίν ηεο επηζηξνθήο, 8. ηελ θακπίλα ζηελ αλαρψξεζε, 9. ηελ θακπίλα ζηελ επηζηξνθή. 14. Πίλαθαο users Ο Πίλαθαο users πεξηέρεη : 1. To id ηνπ πίλαθα, ην νπνίν είλαη θαη ην πξσηεχνλ θιεηδί, 2. ην ςεπδψλπκν πνπ επηιέγεη ν ρξήζηεο ζηελ εγγξαθή ηνπ, 96

98 3. ηνλ θσδηθφ αζθαιείαο πνπ επηιέγεη ν ρξήζηεο ζηελ εγγξαθή ηνπ πξνθεηκέλνπ λα εηζέιζεη ζην ζχζηεκα, ν νπνίνο είλαη θξππηνγξαθεκέλνο κε ηνλ α aes-256- cbc, 4. ην mail πνπ έρεη δειψζεη γηα λα δέρεηαη ηηο δηάθνξεο ελεκεξψζεηο ηεο ηζηνζειίδαο, 5. ην επίπεδν πξνζβαζηκφηεηαο: 0 γηα ηνλ απιφ ρξήζηε,1 γηα ην δηαρεηξηζηή 6. ηε δηεχζπλζε ηνπ ρξήζηε, 7. ην φλνκα ηνπ, 8. ην επίζεην ηνπ, 9. ηνλ ηαρπδξνκηθφ θψδηθα, 10. ηε ρψξα, 11. ηελ πφιε δηακνλήο ηνπ, 12. ην ηειέθσλν ηνπ, 13. ην θηλεηφ ηνπ, 14. ην id πνπ είλαη κνλαδηθφ γηα θάζε ρξήζηε θαη δεκηνπξγείηαη κεηά ηελ εγγξαθή ηνπ. 15. Πίλαθαο vehicles Ο πίλαθαο vehicles πεξηέρεη: 1. Σν id ηνπ πίλαθα, ην νπνίν είλαη θαη ην πξσηεχνλ θιεηδί, 2. ην id ηεο θξάηεζεο, ην νπνίν είλαη δεπηεξεχνλ θιεηδί. Γειψλεη ζε πνηα θξάηεζε είλαη δεισκέλν ην φρεκα, 3. ηνλ αξηζκφ ηεο πηλαθίδαο, 4. ην κνληέιν ηνπ νρήκαηνο. 97

99 ΥΔΓΗΑΓΡΑΜΜΑ ΜΟ ΣΖ ΒΑΖ ΓΔΓΟΜΔΝΧΝ 98