Σχεδίαση και Υλοποίηση μιας Διαδικτυακής Βάσης Δεδομένων για Δεδομένα Τουρισμού

Transcript

1 Τ.Ε.Ι ΚΑΒΑΛΑΣ ΣΧΟΛΗ ΔΙΟΙΚΗΣΗΣ ΚΑΙ ΟΙΚΟΝΟΜΙΑΣ ΤΜΗΜΑ ΔΙΑΧΕΙΡΙΣΗΣ ΠΛΗΡΟΦΟΡΙΩΝ Τ.Ε.Ι ΚΑΒΑΛΑΣ ΤΜΗΜΑ ΔΙΑΧΕΙΡΙΣΗ ΠΛΗΡΟΦΟΡΙΩΝ Σχεδίαση και Υλοποίηση μιας Διαδικτυακής Βάσης Δεδομένων για Δεδομένα Τουρισμού ΠΤΥΧΙΑΚΗ ΕΡΓΑΣΙΑ ΚΩΝ/ΝΟΣ ΚΟΡΕΝΤΗΣ ΑΕΜ 1717 Επιβλέπων καθηγητής: Δρ. ΣΤΕΦΑΝΟΣ ΓΚΟΥΜΑΣ Σελ. 1 από 95

2 ΠΡΟΛΟΓΟΣ...4 ΚΕΦΑΛΑΙΟ ΔΙΑΔΙΚΤΥΟ ΕΙΣΑΓΩΓΗ ΙΣΤΟΡΙΑ ΧΡΗΣΕΙΣ ΠΛΕΟΝΕΚΤΗΜΑΤΑ ΚΑΙ ΜΕΙΟΝΕΚΤΗΜΑΤΑ ΔΙΑΔΙΚΤΥΟΥ ΠΛΕΟΝΕΚΤΗΜΑΤΑ ΜΕΙΟΝΕΚΤΗΜΑΤΑ...8 ΚΕΦΑΛΑΙΟ ΛΟΓΙΣΜΙΚΟ ΑΝΟΙΧΤΟΥ ΚΩΔΙΚΑ ΕΙΣΑΓΩΓΗ ΠΛΕΟΝΕΚΤΗΜΑΤΑ ΚΑΙ ΜΕΙΟΝΕΚΤΗΜΑΤΑ ΑΝΟΙΧΤΟΥ ΚΩΔΙΚΑ ΠΛΕΟΝΕΚΤΗΜΑΤΑ ΜΕΙΟΝΕΚΤΗΜΑΤΑ XAMMP WEB SERVERS APACHE HTTP WEB SERVER ΕΙΣΑΓΩΓΗ ΙΣΤΟΡΙΑ ΚΑΙ ΕΞΕΛΙΞΗ ΛΕΙΤΟΥΡΓΙΕΣ...14 ΚΕΦΑΛΑΙΟ Η ΓΛΩΣΣΑ HTML ΕΙΣΑΓΩΓΗ ΙΣΤΟΡΙΑ ΕΤΙΚΕΤΕΣ ΤΗΣ HTML...16 ΚΕΦΑΛΑΙΟ Η ΓΛΩΣΣΑ CSS ΕΙΣΑΓΩΓΗ ΙΣΤΟΡΙΑ ΠΑΡΑΔΕΙΓΜΑΤΑ ΤΗΣ CSS...20 ΚΕΦΑΛΑΙΟ Η ΓΛΩΣΣΑ PHP ΕΙΣΑΓΩΓΗ ΙΣΤΟΡΙΑ ΣΥΝΤΑΞΗ PHP ΤΕΛΕΣΤΕΣ ΣΥΝΔΕΣΗ PHP ME MySQL Η ΣΥΝΔΕΣΗ ΔΗΜΙΟΥΡΓΙΑ ΠΙΝΑΚΑ ΕΙΣΑΓΩΓΗ ΔΕΔΟΜΕΝΩΝ ΕΜΦΑΝΙΣΗ ΣΤΟΙΧΕΙΩΝ ΠΙΝΑΚΑ...27 Σελ. 2 από 95

3 ΚΕΦΑΛΑΙΟ Η ΓΛΩΣΣΑ SQL ΕΙΣΑΓΩΓΗ ΙΣΤΟΡΙΑ Η ΓΛΩΣΣΑ MySQL ΕΙΣΑΓΩΓΗ ΠΛΕΟΝΕΚΤΗΜΑΤΑ ΚΑΙ ΜΕΙΟΝΕΚΤΗΜΑΤΑ ΠΛΕΟΝΕΚΤΗΜΑΤΑ ΜΕΙΟΝΕΚΤΗΜΑΤΑ ΤΥΠΟΙ ΔΕΔΟΜΕΝΩΝ ΠΑΡΑΔΕΙΓΜΑΤΑ ΤΗΣ MySQL...34 ΚΕΦΑΛΑΙΟ ΠΕΡΙΓΡΑΦΗ ΙΣΤΟΣΕΛΙΔΑΣ ΑΡΧΙΚΗ ΣΕΛΙΔΑ Η ΠΟΛΗ ΤΟΥ ΒΟΛΟΥ ΠΛΗΡΟΦΟΡΙΕΣ ΙΣΤΟΡΙΑ ΠΗΛΙΟ ΚΑΙ ΠΛΗΡΟΦΟΡΙΕΣ ΓΙΑ ΤΗΝ ΠΕΡΙΟΧΗ ΤΟΥ ΠΛΗΡΟΦΟΡΙΕΣ ΞΕΝΟΔΟΧΕΙΑ ΠΑΡΑΛΙΕΣ ΔΙΑΣΚΕΔΑΣΗ ΚΑΦΕΤΕΡΙΕΣ ΟΥΖΕΡΙ CLUBS...45 ΚΕΦΑΛΑΙΟ ΣΥΜΠΕΡΑΣΜΑΤΑ...46 ΒΙΒΛΙΟΓΡΑΦΙΑ...47 ΠΑΡΑΡΤΗΜΑΤΑ Σελ. 3 από 95

4 ΠΡΟΛΟΓΟΣ Η παρούσα πτυχιακή εργασία ασχολείται με τη μελέτη και την κατασκευή μίας μικρής ιστοσελίδας με θέμα το Βόλο στο διαδίκτυο. Σκοπός της εργασίας είναι η σχεδίαση και η κατασκευή ιστοσελίδας, που θα περιέχει πληροφορίες σχετικά με την πόλη του Βόλου, όπως ξενοδοχεία, παραλίες και μέρη διασκέδασης με σκοπό την ενημέρωση και την διευκόλυνση των ενδιαφερόμενων που έχουν σκοπό να επισκεφτούν το Βόλο. Η ιστοσελίδα δημιουργήθηκε με λογισμικό ανοιχτού κώδικα, όπως: 1) η βάση δεδομένων MySQL, όπου είναι αποθηκευμένα όλα τα δεδομένα 2) η γλώσσα προγραμματισμού PHP όπου γράφτηκε ο κώδικας και 3) ο Apache HTTP εξυπηρετητή, έτσι ώστε να τρέξει η ιστοσελίδα μας. Σελ. 4 από 95

5 ΚΕΦΑΛΑΙΟ 1 Διαδίκτυο 1.1 Εισαγωγή Το Διαδίκτυο ή αλλιώς στα αγγλικά Internet,είναι ένα μέσο μαζικής επικοινωνίας, καθώς και δίκτυο κατανεμημένα αποθηκευμένης πληροφορίας, του οποίου η χρήση έχει αυξηθεί με τρομακτική ταχύτητα τα τελευταία χρόνια,μειώνοντας έτσι τη χρήση άλλων μέσων επικοινωνίας δραματικά. Το διαδίκτυο είναι ένα πλέγμα από εκατομμύρια συνδεδεμένους υπολογιστές από κάθε μέρος του πλανήτη, είναι θεωρητικά άπειρο και περιέχει τα πάντα, θα μπορούσε να χαρακτηριστεί ως ένας παγκόσμιος εγκέφαλος, εφόσον ο οποιοσδήποτε μπορεί να εκφράσει μέσω αυτού, τις απόψεις του και τις προτάσεις του σε οποιονδήποτε και αυτές οι απόψεις να επηρεάσουν θετικά ή αρνητικά κάποιον άλλον ο οποίος μπορεί να βρίσκεται χιλιόμετρα μακριά. Οι χρήστες του internetανταλλάσουν μεταξύ τους ελεύθερα πληροφορίες και εμπειρίες, χωρίς λογοκρισία, πράγμα που στην πραγματική ζωή είναι δύσκολο. Μέσω διαδικτύου ανταλλάσσουμε ηλεκτρονικά μηνύματα, κάνουμε βίντεο κλήσεις, εγγραφόμαστε σε σελίδες συζητήσεων, παίζουμε παιχνίδια με άτομα από την άλλη άκρη της γης, ενημερωνόμαστε για οτιδήποτε μας Σελ. 5 από 95

6 ενδιαφέρει και επικοινωνούμε μέσω χώρων κοινωνικής δικτύωσης όπως το Facebook, twitter κλπ. (Καράκος, 2007) 1.2 Ιστορία Στα πανεπιστήμια των ΗΠΑ οι ερευνητές ξεκινούν να πειραματίζονται με τη διασύνδεση απομακρυσμένων υπολογιστών μεταξύ τους. Το δίκτυο ARPANET γεννιέται το 1969 με πόρους του προγράμματος ARPA (Advanced Research Project Agency), με σκοπό να συνδέσει το Υπουργείο με στρατιωτικούς ερευνητικούς οργανισμούς και να αποτελέσει ένα πείραμα για τη μελέτη της αξιόπιστης λειτουργίας των δικτύων.το πρόγραμμα απέβλεπε στον πειραματισμό με μια νέα τεχνολογία γνωστή σαν μεταγωγή πακέτων(packet switching), σύμφωνα με την οποία τα προς μετάδοση δεδομένα κόβονται σε πακέτα και οι χρήστες μπορούν να μοιραστούν την ίδια επικοινωνιακή γραμμή. Το 1973, ξεκινά ένα νέο ερευνητικό πρόγραμμα που ονομάζεται Internetting Project (Πρόγραμμα Διαδικτύωσης). Από την έρευνα γεννιέται μια νέα τεχνική, το Internet Protocol (IP), από την οποία θα πάρει αργότερα το όνομά του το Internet. Διαφορετικά δίκτυα που χρησιμοποιούν το κοινό πρωτόκολλο IP μπορούν να συνδέονται και να αποτελούν ένα διαδίκτυο. Το 1985, το National Science Foundation (NSF) δημιουργεί ένα δικό του γρήγορο δίκτυο το NSFNETχρησιμοποιώντας το πρωτόκολλο TCP/IP, προκειμένου να συνδέσει πέντε κέντρα υπερυπολογιστών μεταξύ τους αλλά και με την υπόλοιπη επιστημονική κοινότητα. Στα τέλη της δεκαετίας του 80, όλο και περισσότερες χώρες συνδέονται στο NSFNET. Πανεπιστήμια και οργανισμοί δημιουργούν τα δικά τους δίκτυα και συνδέονται πάνω στο παγκόσμιο δίκτυο το οποίο αρχίζει να γίνεται γνωστό σαν INTERNET και να εξαπλώνεται με τρομερούς ρυθμούς σε ολόκληρο τον κόσμο. Σελ. 6 από 95

7 Το 1993 το εργαστήριο CERN στην Ελβετία παρουσιάζει το World Wide Web (WWW). Πρόκειται για ένα σύστημα διασύνδεσης πληροφοριών σε μορφή πολυμέσωνπου βρίσκονται αποθηκευμένες σε χιλιάδες υπολογιστές του Internet σε ολόκληρο τον κόσμο και παρουσιάζονται σε ηλεκτρονικές σελίδες. Παράλληλα, εμφανίζονται στο Internet διάφορα εμπορικά δίκτυα που ανήκουν σε εταιρίες παροχής υπηρεσιών Internet(Internet Service Providers) και προσφέρουν πρόσβαση στο Internet. Οποιοσδήποτε διαθέτει PC και modem μπορεί να συνδεθεί με το Internet.Η ανακάλυψη του WWW σε συνδυασμό με την ευκολία απόκτησης πρόσβασης στο Internet προσέλκυσε έναν μεγάλο αριθμό καινούργιων χρηστών και έφερε την «έκρηξη» που παρακολουθούμε τα τελευταία χρόνια.σήμερα το μεγαλύτερο μέρος του πληθυσμού της Γης ζει σε χώρες που είναι συνδεδεμένες στο Internet. ( 1.3Χρήσεις Το Διαδίκτυο μπορεί να φανεί χρήσιμο σε κάποιον στην καθημερινότητά του. Από τις κυριότερες χρησιμότητες του είναι η ηλεκτρονική ανταλλαγή αλληλογραφίας ή αλλιώς γνωστό και ως . Άλλη μία χρησιμότητα, είναι η ενημέρωση και η πληροφόρηση των καταναλωτών μέσω διαφημίσεων και κατ επέκταση οι αγορές και οι πωλήσεις μεταξύ αυτών και προμηθευτών απευθείας. Πολύ χρήσιμη επίσης, είναι η ταχύτητα στην αναζήτηση πληροφοριών των χρηστών και η άμεση βοήθεια που παίρνουν πάνω σε κάτι που χρειάζονται. Επίσης, κάποιος μπορεί να κάνει γνωριμίες onlineμε άτομα που τους συνδέουν κοινά ενδιαφέροντα ή κοινές εμπειρίες. Toe-learning Σελ. 7 από 95

8 επίσης,αποτελεί μια πολύ διαδεδομένη χρήση του διαδικτύου και ραγδαίως αναπτυσσόμενη, καθώς κάποιος εξοικονομεί χρήματα και χρόνο. (Σαλαμπάσης, 2008) 1.4Πλεονεκτήματα και μειονεκτήματα διαδικτύου Πλεονεκτήματα 1. Αμφίδρομη επικοινωνία 2. Ενημέρωση 3. Συμβάλλει στην εκπαίδευση-μόρφωση 4. Πλούτος πληροφοριών 5. Διευκόλυνση οικονομικών συναλλαγών 6.Καταπολέμηση γραφειοκρατίας 7. Εύκολη δημιουργία ιστοσελίδων 8. Αξιοποίηση μηχανών αναζήτησης, όπως το Google 9. Προάγει την επιστημονική έρευνα και γνώση 1.4.2Μειονεκτήματα I. Πρόσβαση σε αδιαβάθμητες πληροφορίες II. Απομόνωση χωρίς καμία επαφη με ανθρώπους III. Εθισμός IV. Προβλήματα υγείας όπως αυχενικά, οφθαλμικά κλπ V. Κίνδυνοι για μικρά παιδιά VI. Πορνογραφικό υλικό VII. Κατασκοπεία VIII. Θύμα στοιχείων πιστωτικής κάρτας από hacker Σελ. 8 από 95

9 ΚΕΦΑΛΑΙΟ 2 Λογισμικό Ανοιχτού Κώδικα 2.1 Εισαγωγή Η ανάπτυξη του λογισμικού ανοιχτού κώδικα και γενικότερα η φιλοσοφία του δεν έχει ως σκοπό το άμεσο οικονομικό κέρδος. Το ελεύθερο λογισμικό παρέχει στους χρήστες την ελευθερία να εκτελούν, αντιγράφουν, διανέμουν, μελετούν, τροποποιούν και βελτιώνουν το Ελεύθερο λογισμικό. Για την ακρίβεια, αναφέρεται σε τέσσερις βασικές ελευθερίες: Την ελευθερία να εκτελείτε το πρόγραμμα για οποιονδήποτε σκοπό. Την ελευθερία να μελετάτε τον τρόπο λειτουργίας του προγράμματος και να το προσαρμόζετε στις ανάγκες σας. Η πρόσβαση στον πηγαίο κώδικα είναι προϋπόθεση για να ισχύει κάτι τέτοιο. Την ελευθερία να αναδιανέμετε αντίγραφα του προγράμματος ώστε να βοηθάτε το συνάνθρωπο σας. Την ελευθερία να βελτιώνετε το πρόγραμμα και να δημοσιεύετε τις βελτιώσεις που έχετε κάνει στο ευρύ κοινό, ώστε να επωφεληθεί ολόκληρη η κοινότητα. Η πρόσβαση στον πηγαίο κώδικα είναι προϋπόθεση για να ισχύει κάτι τέτοιο. Ένα πρόγραμμα θεωρείται ελεύθερο λογισμικό όταν οι χρήστες του έχουν όλες τις παραπάνω ελευθερίες. ( Σελ. 9 από 95

10 2.2 Πλεονεκτήματα και μειονεκτήματα ανοιχτού κώδικα Πλεονεκτήματα είναι: Ας αρχίσουμε με τα πλεονεκτήματα της χρήσης του opensource τα οποία Η λογική της ανάπτυξης του λογισμικού του ανοιχτού κώδικα είναι τέτοια η οποία δίνει την δυνατότητα περαιτέρω έρευνας και επεξεργασίας των προγραμμάτων. Είναι δυνατή η παραμετροποίηση των προγραμμάτων αυτών ώστε να προσαρμοστούν και να επεκταθούν σε κάθε ανάγκη οποιουδ ηποτε χρήστη. Αποτελεί σημαντικό εκπαιδευτικό υλικό και εργαλείο για απόκτηση προγραμματιστικής εμπειρίας απ αυτούς που αναπτύσουν κώδικα. Ύπαρξη πληθώρας επιλογών και δοκιμασμένων λύσεων. Ασφάλεια και αξιοπιστία Το κόστος είναι τις περισσοτερες φορές μηδενικό. Η χρήση του ανοιχτού κώδικα δεν περιορίζει τον οργανισμό ή τον χρήστη Μείωση κόστους αγοράς, χρήσης και συντήρησης πληροφοριακών συστημάτων. Δωρεάν ανανεώσεις και υποστήριξη Σελ. 10 από 95

11 2.2.2 Μειονεκτήματα Από την άλλη υπάρχουν όμως και ορισμένα μειονεκτήματα οπως: Δυσκολία εύρεσης προσωπικού με τεχνογνωσία καθώς η υποστήριξη των προγραμμάτων του ανοιχτού κώδικα πολλές φορές είναι δύσκολη καθώς δεν υπάρχει επίσημη εταιρία με καταρτισμένους τεχνικούς. Ασυμβατότητες με κάποια διαδεδομένα κλειστά πρότυπα αρχείων. Παρατηρείται πολλές φορές ελλιπής τεκμηρίωση και έλλειψη ενός καλού εγχειριδίου χρήσης στα προγράμματα ανοιχτού κώδικα. Δυσαναλογία ανάμεσα στο κόστος κτήσης και το κόστος συντήρησης για τα προγράμματα ανοιχτού λογισμικού. Αποδιογρανωμένος προγραμματισμός. Έλλειψη ορισμένων εξειδικευμένων εφαρμογών. Κόστος επανεκπαίδευσης ατόμων με εμπειρία σε αντίστοιχα κλειστού κώδικα λογισμικά. Η απουσία χρηματικής αμοιβής περιορίζει την περαιτέρω παραγωγή λογισμικού και τις επενδύσεις. Τα προγράμματα ανοιχτού λογισμικού δεν συνεισφέρουν πάντα στην καινοτομία αφού συνήθως μιμείται τη λειτουργικότητα κάποιου υπάρχοντος εμπορικού λογισμικού. 2.3 ΧΑΜΜΡ Για την δημιουργία της συγκεκριμένης ιστοσελίδας χρησιμοποιήθηκε το πακέτο προγραμμάτων ελεύθερου λογισμικού XAMPP (ακρωνύμιο: Χ = crossplatform, A = apachehttp, M= MySQL, P=PHP, P=Perl).Πολλοί γνωρίζουν πως η εγκατάσταση του Apache, είναι πολύ δύσκολη, πόσο μάλλον όταν θέλει κάποιος να προσθέσει την MySQL και την PHP. Με το XAMPP, η εγκατάσταση των παραπάνω είναι σχετικά εύκολη και πιο αυτοματοποιημένη, για γκάμα λειτουργικών συστημάτων. H απήχηση του προγράμματος είναι Σελ. 11 από 95

12 τεράστια. Διαθέτει ένα πολύ εύκολα χειριζόμενο, control panel, μέσω του οποίου μπορεί κάποιος να εγκαταστήσει όποιο service του χρειάζεται αλλά και να το σβήσει.[ 2.4 Web Servers Εξυπηρετητής ή διακομιστής είναι το υλικό/λογισμικό που αναλαμβάνει την παροχή διάφορων υπηρεσιών, εξυπηρετώντας αιτήσεις άλλων προγραμμάτων, γνωστούς ως πελάτες (clients) που μπορούν να τρέχουν στον ίδιο υπολογιστή ή σε σύνδεση μέσω δικτύου. Η επικοινωνία μεταξύ πελάτη και εξυπηρετητή γίνεται μέσω ενός τοπικού δικτύου ή και μέσω του Διαδικτύου. Σε μεγάλα δίκτυα όπου ο εξυπηρετητής αναλαμβάνει πολλές εξυπηρετήσεις είναι συνήθως υπολογιστής που διαφέρει ως προς τη σύνθεσή του από άλλους κοινούς υπολογιστές, μιας και οι δυνατότητες του είναι σαφώς αναβαθμισμένες. Κύρια χαρακτηριστικά ενός εξυπηρετητή είναι οι επεξεργαστές που υποστηρίζει και χρησιμοποιεί για την επεξεργασία των δεδομένων που δέχεται, οι γρήγοροι και μεγάλης χωρητικότητας σκληροί δίσκοι αλλά και οι ταχύτατες μνήμες που υποστηρίζει. Συνήθως συνοδεύεται από σύστημα διπλής τροφοδοσίας και από συσκευή αδιάλειπτης παροχής ενέργειας(ups) για μεγαλύτερη αξιοπιστία και σιγουριά στις παρεχόμενες υπηρεσίες του. Συνηθισμένοι εξυπηρετητές στο Ίντερνετ είναι το γνωστό http, το Domain Name System(DNS server), το ηλεκτρονικό ταχυδρομείο (mail server), το πρόγραμμα μεταφοράς αρχείων με το πρωτόκολλο FTP, online games, streaming audio και video και πολλά ακόμη. [ Σελ. 12 από 95

13 2.4.1 Apache HTTP Web Server Εισαγωγή Ο Apache Web Server είναι ένας εξυπηρετητής (server) του παγκόσμιου ιστού (Web). Ο ρόλος του είναι να περιμένει αιτήσεις από χρήστες(clients) και στη συνέχεια να απαντάει στις αιτήσεις αυτές προσφέροντας τις σελίδες που ζητήθηκαν, είτε άμεσα μέσω ενός URL είτε μέσω ενός συνδέσμου. Ο Apache εξυπηρετεί αυτές τις αιτήσεις πάντα σύμφωνα με τα πρότυπα που ορίζονται από το πρωτόκολλο HTTP. Ο Apache μπορεί να εγκατασταθεί σε διάφορα λειτουργικά συστήματα όπως Windows, Linux, MacOS και Unix. Είναι ο δημοφιλέστερος Web Server και πολλοί πάροχοι τον χρησιμοποιούν. [ Ιστορία και εξέλιξη Η πρώτη του έκδοση γνωστή και ως NCSA HTTPd, δημιουργήθηκε από τον Robert McCool και κυκλοφόρησε το Θεωρείται ότι έπαιξε σημαντικό ρόλο στην αρχική επέκταση τουπαγκόσμιου ιστού. Ήταν η πρώτη βιώσιμη εναλλακτική επιλογή που παρουσιάστηκε απέναντι στον εξυπηρετητή http της Netscape και από τότε έχει εξελιχθεί στο σημείο να ανταγωνίζεται άλλους εξυπηρετητές βασισμένους στο Unix σε λειτουργικότητά και απόδοση. Σελ. 13 από 95

14 Από το 1996 ήταν από τους πιο δημοφιλείς όμως από τον Μάρτιο του 2006 έχει μειωθεί το ποσοστό της εγκατάστασής του κυρίως από τον Microsoft Internet Information Services και την πλατφόρμα.net. Τον Οκτώβριο του 2007 το μερίδιο του ήταν 47.73% από όλους τους ιστοτόπους. (Meloni, 2004) Λειτουργίες Ο Apache διαθέτει ποικιλία χαρακτηριστικών και μπορεί να υποστηρίξει μια μεγάλη γκάμα εφαρμογών με τις οποίες και συνεργάζεται. Ένα από τα βασικότερα χαρακτηριστικά του όμως, το οποίο και του δίνει μεγάλες δυνατότητες, είναι ότι μπορεί να προσαρμόσει επάνω του πολλές προσθήκες προγραμμάτων (modules) τα οποία με τη σειρά τους, παρέχουν διαφορετικές λειτουργίες. Μερικά από τα πιο γνωστά modules του Apache HTTP είναι τα modules πιστοποίησης, όπως τα mod_access, mod_auth, mod_digest κλπ. Παρέχει επίσης SSL σε TLS μέσω των mod_ssl, και proxy module (mod_proxy), πραγματοποιεί ανακατευθύνσεις διευθύνσεων (URL rewrites) μέσω του mod_rewrite, καταγραφές συνδέσεων μέσω του mod_log_config, συμπίεση αρχείων μέσω του mod_gzip και πολλά άλλα modules τα οποία διατίθενται είτε από το Apache Software Foundation, είτε από τρίτες εταιρίες λογισμικού.[ Σελ. 14 από 95

15 ΚΕΦΑΛΑΙΟ 3 Η γλώσσα HTML 3.1 Eισαγωγή Η βασική γλώσσα σήμανσης των ιστοσελίδων είναι η HTML(Hyper Text Markup Language), δηλαδή η γλώσσα σήμανσης υπερκειμένου. Τα στοιχεία που την συγκροτούν είναι και τα βασικά δομικά στοιχεία των ιστοσελίδων. Τα στοιχεία εσωκλείονται μέσα σε σύμβολα μεγαλύτερο και μικρότερο από( <>). Οι ετικέτες αυτές τοποθετούνται ανά ζεύγη για να δηλώσουν την αρχή και το τέλος της λειτουργίας τους. Οι ετικέτες δεν εμφανίζονται από τον browser, απλά τον βοηθάνε να ερμηνεύσει τα έγγραφα που έχει λάβει.(duckett, 2011) 3.2 Ιστορία Το 1980 ο φυσικός Τιμ Μπέρνερς Λι ο οποίος εργαζόταν στο CERN, επινόησε το ENQUIRE, ένα σύστημα χρήσης και διαμοιρασμού εγγράφων για τους ερευνητές του CERN και κατασκεύασε ένα πρωτότυπό του. Το 1989 πρότεινε ένα σύστημα βασισμένο στο διαδίκτυο το οποίο θα χρησιμοποιούσε υπερκείμενο.έτσι έφτιαξε την προδιαγραφή της HTML και έγραψε τον Σελ. 15 από 95

16 browser και το λογισμικό εξυπηρετητή στα τέλη του 1990.Από τότε μέχρι και σήμερα έχουν βγει πολλές και βελτιομένες εκδόσεις.[ 3.3 Ετικέτες της ΗΤΜL Οι παρακάτω ετικέτες χρησιμοποιούνται περισσότερο: <!Doctype> Αυτή η ετικέτα χρησιμοποιείται πρώτη στο έγγραφο και η λειτουργία της είναι να λέει στον browser ποιο πρότυπο της ΗΤΜL χρησιμοποιείται στο έγγραφο. <html></html> Αυτή η ετικέτα ενημερώνει τον browser ότι το περιεχόμενο της είναι γραμμένο σε HTML και τοποθετείται, πάντα κάτω από την ετικέτα <!Doctype>. <!-- -->Αυτή η ετικέτα χρησιμοποιείται για να γράφουμε σχόλια μέσα στον κώδικα μας. <body></body>εδώ, με αυτή την ετικέτα ορίζεται το κυρίως περιεχόμενο της σελίδας, μέσα στο οποίο γράφουμε. Στην ενότητα αυτή τοποθετούμε εικόνες, βίντεο και ότι άλλο θέλουμε να εμφανιστεί στην σελίδα. <br>όταν θέλουμε να τελειώσουμε μία γραμμή και να αρχίσουμε μία καινούρια, χρησιμοποιούμε αυτή την ετικέτα. <button></button> Με αυτή την ετικέτα εισάγουμε ένα κουμπί στη σελίδα μας. Μέσα σε αυτές προσθέτουμε κείμενο ή εικόνες. Σελ. 16 από 95

17 <center></center>η ετικέτα αυτή στοιχίζει ένα κείμενο στο κέντρο της οθόνης. <form></form>με αυτή την ετικέτα εισάγουμε φόρμες στη σελίδα, οι οποίες δίνουν τη δυνατότητα στο χρήστη να στείλει κάποια δεδομένα στον server. <head></head> Εδώ ορίζεται η κεφαλή της σελίδας. Μέσα σε αυτή την ετικέτα, τοποθετούνται ετικέτες,που παρέχουν πληροφορίες στον browserγια την HTMLσελίδα, όπως τίτλος, ημερομηνία κ.ο.κ., οι οποίες δεν εμφανίζονται στην οθόνη. <font></font>η ετικέτα αυτή ορίζει το μέγεθος, τη γραμματοσειρά και το χρώμα του κειμένου που υπάρχει μέσα σε αυτή. <title></title>μέσα σε αυτή την ετικέτα ορίζεται ο τίτλος της σελίδας. Μπαίνει στην ενότητα <head></head>. <select></select>με αυτή την ετικέτα εισάγουμε λίστες επιλογών στη σελίδα μας. <style></style>h ετικέτα αυτή ορίζει το στυλ μίας σελίδας χρησιμοποιώντας CSS. Γράφεται μέσα στην ενότητα <head>. <i></i>με αυτή την ετικέτα το κείμενο μας, εμφανίζεται σε πλάγια μορφή. Σελ. 17 από 95

18 <span></span>η ομαδοποίηση ενός κειμένου, για τον ορισμό ενός στυλ, γίνεται με αυτή την ετικέτα. <img></img>έτσι εισάγεται μία εικόνα στη σελίδα. <input>εδώ μέσα εισάγετε ένα πεδίο φόρμας στο οποίο ο χρήστης μπορεί να πληκτρολογήσει δεδομένα. <table></table>έτσι εισάγεται ένας πίνακας. Οι γραμμές με την ετικέτα <tr></tr>, οι στήλες με την ετικέτα <td></td> και οι τίτλοι από τις στήλες με <th></th> <ahref= ></a>έτσι δημιουργούμε έναν υπέρ σύνδεσμο και κάνοντας κλικ επάνω του, μας εμφανίζεται η σελίδα. (Αγγελή,2005) Σελ. 18 από 95

19 ΚΕΦΑΛΑΙΟ 4 Η γλώσσα CSS 4.1 Εισαγωγή Το CSS (Cascading Style Sheets) βοηθάνε στην κατασκευή ιστοσελίδων τα οποία είναι ηλεκτρονικά έγγραφα με ένα σύνολο κανόνων για την μορφοποίηση μιας ιστοσελίδας. Με το να γράφει κάποιος σελίδες μόνο με HTML κώδικα, μπορεί να ορίσει ιδιότητες όπως χρώμα και μέγεθος κειμένου αλλά και άλλων στοιχείων όπως πίνακες. Για να κάνει αλλαγές σε αυτές τις ιδιότητες, θα πρέπει να βρεί την ιδότητα μέσα στον κώδικα και να την αλλάξει. Η διαδικασία αυτή είναι εύκολη όταν έχει κάποιος να ασχοληθεί με μία σελίδα αλλά ένα site αποτελείται απο δεκάδες σελίδες τις οποίες πρέπει να τις διαχειριζόμαστε όσο το δυνατόν εύκολα και γρήγορα. Με την CSS μπορούν τα χρώματα και τα μεγέθη να οριστούν οργανωμένα, έτσι ώστε κάθε φορά που κάποια αλλαγή είναι αναγκαίανα πειραματιζόμαστε μόνο ελάχιστες γραμμές κώδικα και οι αλλαγές να γίνονται αυτόματα σε όλες τις σελίδες μας, αφήνοτας τον κώδικα καθαρό χωρίς να περιέχει πολλές ιδιότητες της HTML με ετικέτες που κάνουν τον κώδικά μας δυσανάγνωστο. (Duckett, 2011) Σελ. 19 από 95

20 4.2 Ιστορία Η πρώτη έκδοση της CSS έγινε το Αυτή η έκδοση ονομάστηκε CSS1 και ήταν ένα προϊόν για την World Wide Web Consortium ή αλλιώς W3C. Η W3C είναι η πηγή όλου του web design και χρησιμοποιείται σε όλο τον κόσμο. Μέχρι την έκδοση της σημερινής CSS, είχαν βγει ακόμη δύο ενημερώσεις οι οποίες παρέχονταν από την Consortium. Το 1998 διατέθηκε η CSS2 ενώ το 1999 ακολούθησε η έκδοση CSS3. Τα σχέδια της CSS χωρίζονται σε modules και η τρέχουσα έκδοση έχει πάνω από 40 από αυτές τις μονάδες. Από την πρώτη της έκδοση το 1996, η CSS έχει καταφέρει να γίνει πρότυπο σε ότι αφορά το web design. (Duckett, 2011) 4.3 Παραδείγματα της CSS Ένα εξωτερικό φύλλο στυλ (external style sheet) είναι ιδανικό όταν θέλουμε να εφαρμόσουμε ενα συγκεκριμένο στυλ σε πολλές ιστοσελίδες ταυτόχρονα. Με ένα εξωτερικό φύλλο στυλ μπορούμε να αλλάξουμε την εμφάνιση ενός ολόκληρου Web site αλλάζοντας ένα μόνο αρχείο. Η κάθε ιστοσελίδα πρέπει να περιέχει έναν σύνδεσμο προς το αρχείο του φύλλου στυλ και να χρησιμοποιεί το tag <link> μέσα στο τμήμα <head> ως εξής: <head> <link href="css/bootstrap.min.css" rel="stylesheet"> <link href="css/3-col.css" rel="stylesheet"> </head> Ο φυλλομετρητής θα διαβάσει τους ορισμούς στυλ από τα αρχεία bootstarp.min.css και 3-col.css και θα μορφοποιήσει το έγγραφο σύμφωνα μ αυτά τα αρχεία. Αυτό είναι ένα παράδειγμα βασισμένο στα δικά μας αρχεία που χρησιμοποιήθηκαν για τον σχεδιασμό της ιστοσελίδας.(duckett, 2011) Σελ. 20 από 95

21 Ένα εξωτερικο φύλλο στυλ μπορεί να γραφεί σ έναν οποιονδήποτε text editor. Το αρχείο δεν πρέπει να περιέχει html tags και θα πρέπει να ειναι αποθηκευμένο με την επέκταση.css. Ένα παράδειγμα κώδικα CSS σε εξωτερικό αρχείο θα μπορούσε να είναι ως εξής: <html> <head> <link href="korentis.css" rel="stylesheet"> </head> <body> <h1> Αυτή η επικεφαλίδα έχει χρώμα μπλε </h1> <p> Αυτή η παράγραφος έχει αριστερό περιθώριο(left margin) 50pixels </p> </body> </html> Το περιεχόμενο του εξωτερικού φύλλου στυλ είναι το εξής (korentis.css) : body {background-color: red} h1 {color:blue} p {margin-left: 50px} Σελ. 21 από 95

22 ΚΕΦΑΛΑΙΟ 5 Η γλώσσα PHP 5.1 Εισαγωγή Η PHP είναι μία γλώσσα προγραμματισμού για την δημιουργία σελίδων Web με δυναμικό περιεχόμενο. Μία σελίδα PHP περνά από επεξεργασία από έναν διακομιστή (Apache κλπ), ώστε να παραχθεί σε πραγματικό χρόνο το τελικό περιεχόμενο που θα σταλεί στο πρόγραμμα περιήγησης σε μορφή κώδικα HTML. Ένα αρχείο με κώδικα php θα πρέπει να έχει την κατάλληλη επέκταση πχ.php. Η ενσωμάτωση του κώδικα σε ένα αρχείο επέκτασης.html δεν θα λειτουργήσει και θα εμφανίσει στον browser τον κώδικα χωρίς καμία επεξεργασία, εκτός αν έχει γίνει η κατάλληλη ρύθμιση. Επίσης ακόμη κι όταν ένα αρχείο έχει την επέκταση.php, θα πρέπει ο server να είναι ρυθμισμένος για να επεξεργάζεται και να μεταγλωτίζει τον κώδικα PHP σε HTML που καταλαβαίνει το πρόγραμμα πελάτη. Ο διακομιστής Apache, που χρησιμοποιείται σήμερα ευρέως σε συστήματα με λειτουργικό Linux, Microsoft Windows,MacOsX.(Ullman,2005) Σελ. 22 από 95

23 5.2 Ιστορία Η PHP ξεκινάει το 1994 όταν ένας φοιτητής ο Rasmus Lerdorf δημιούργησε ένα απλο script με όνομα php.cgi για προσωπική χρήση χρησιμοποιώντας τη γλώσσα προγραμματισμού Perl. Το script αυτό είχε σκοπό να καταγράφει μία λίστα με τα άτομα που έβλεπαν το online βιογραφικό του. Αργότερα το script κυκλοφόρησε και σε φίλους οι οποίοι θέλανε περισσότερες δυνατότητες. Η γλώσσα τότε ονομαζόταν PHP/FI. Το 1997 η PHP/FI έφθασε στην έκδοση 2.0, βασιζόμενη στη γλώσσα C και αριθμώντας περισσότερους από ιστότοπους που τη χρησιμοποιούσαν. Η PHP έφθασε στην έκδοση 3.0 η οποία θύμιζε περισσότερο τη σημερινή μορφή της. Ακολούθησε το 1998 η έκδοση 4 της PHP, τον Ιούλιο του 2004 διατέθηκε η έκδοση 5, ενώ αυτή τη στιγμή έχουν ήδη διατεθεί και οι πρώτες δοκιμαστικές εκδόσεις της επερχόμενης PHP 6, για οποιονδήποτε προγραμματιστή θέλει να τη χρησιμοποιήσει. Οι περισσότεροι ιστότοποι επί του παρόντος χρησιμοποιούν κυρίως τις εκδόσεις 4 και 5 της PHP. (Ullman, 2005) 5.3 Σύνταξη PHP Η διαδικασία της συγγραφής του κώδικα PHP της συγκεκριμένης ιστοσελίδας, κατασκευάστηκε στο Notepad++,ένα ελευθέρου λογισμικού πρόγραμμα. Είναι φιλικό προς τον χρήστη και έχει μεγάλη ταχύτητα εκτέλεσης ενώ ταυτόχρονα αυτό το πρόγραμμα προτείνεται και από τους καθηγητές στη σχολή μας και πάνω σε αυτό δουλέψαμε και δημιουργήσαμε τις πρώτες μας σελίδες Php και Html. Ξεκινώντας να γράψουμε στην PHP, θα πρέπει να το τοποθετούμε πάντα μέσα στους δείκτες, όπως <?php για να ανοίξουμε ένα αρχείο και?> για να το κλείσουμε. Εκεί μέσα μπορούμε να προσθέσουμε όσες γραμμές κώδικα θέλουμε. Με την εντολή echo παράγουμε στην οθόνη μας, αυτό το Σελ. 23 από 95

24 string που βρίσκεται μέσα σε μονά εισαγωγικά. (Gilmore,2008) Παραδείγματος χάριν θα γράψουμε ένα απλό αρχείο κώδικα της Php: <html> <body> <?php echo <p> Με λένε Κώστα </p> ;?> </body> </html> 5.4 Τελεστές Οι τελεστές που χρησιμοποιούνται πιο συχνά είναι οι εξής: Τελεστές Σημασία = = Είναι ίσο με!= ή <> Δεν είναι ίσο < Μεγαλύτερο > Μικρότερο && AND OR Σελ. 24 από 95

25 5.5 Σύνδεση PHP με MySQL Η χρήση βάσεων δεδομένων είναι σημαντική για να φτιαχτεί μια ιστοσελιδα καθώς εκεί αποθηκεύονται όλα τα στοιχεία που θέλουμε να βάλουμε στην σελίδα έτσι ώστε να μπορεί ο χρήστης να βρει αυτό που ψάχνει. Χωρίς τις βάσεις δεδομένων το ιντερνετ θα ήταν απλά σελίδες άδειες. Ένα θετικό της Php είναι η σύνδεση της με την MySQL.(Elmasri,2012) Παρακάτω ακολουθούν κάποια παραδείγματα: Η σύνδεση <?php $con = mysql_connect('localhost','root') or die( 'Could not connect to DB: '. mysql_error() ); mysql_select_db('ptyxiaki', $con) or die( mysql_error() ); mysql_query("set NAMES 'utf8'", $con); mysql_query("set CHARACTER SET 'utf8'", $con); name"); $result = mysql_query("select * FROM kafe ORDER BY?> Σελ. 25 από 95

26 5.5.2 Δημιουργία Πίνακα DROP TABLE IF EXISTS `hotels`; CREATE TABLE `hotels` ( `hotels_id` int(11) NOT NULL AUTO_INCREMENT, `name` varchar(25) DEFAULT NULL, `address` varchar(45) DEFAULT NULL, `phone` bigint(20) NOT NULL, ` ` varchar(255) DEFAULT NULL, PRIMARY KEY (`hotels_id`), KEY `phone_index` (`phone`) ) Εισαγωγή Δεδομένων mysql_query( INSERT INTO `hotels` VALUES (1,'Αίγλη','Αργοναυτών 24', ,'info@aegli.gr'), (2,'Xenia Βόλου','Πλαστήρα 1', ,'resaxenia@domotel.gr'), (3,'Volos Palace','Ξενοφώντος & Θρακών', ,'info@volospalace.gr') ); (Υπάρχουν και άλλα ξενοδοχεία στην βάση αλλά λόγω χώρου βάλαμε μόνο 3 ξενοδοχεία για παράδειγμα) Σελ. 26 από 95

27 5.5.4 Εμφάνιση Στοιχείων Πίνακα Έτσι εμφανίζουμε όλα τα στοιχεία του πίνακα: mysql_query("select * FROM kafe"); Εκτός αν θέλουμε να εμφανίσουμε μόνο τις καφετέριες που είναι το πρωί καφετέριες και το βράδυ γίνονται μπαρ οπότε σε αυτήν την περίπτωση: mysql_query("select * FROM kafe WHERE eidos = cafe/bar ); Σελ. 27 από 95

28 ΚΕΦΑΛΑΙΟ 6 Η γλώσσα SQL 6.1 Εισαγωγή Η SQL Structured Query Language (Γλώσσα Δομημένων Ερωτημάτων) αποτελεί ένα παγκόσμιο πρότυπο για τον χειρισμό Σχεσιακών Βάσεων Δεδομένων. Αρχικά η SQL ονομαζόταν SEQUEL και υλοποιήθηκε για το System R που ήταν ένα πειραματικό σχεσιακό σύστημα της ΙΒΜ. Η SQL περιλαμβάνει χαρακτηριστικά της σχεσιακής άλγεβρας αλλά με σύνταξη περισσότερο φιλική στο χρήστη. Η SQL αποτελεί μία πλήρης γλώσσα βάσεων δεδομένων. Δίνει δυνατότητες τόσο γiα ορισμό δεδομένων όσο και για αναζήτηση δεδομένων και ενημερώσεις. Επιπροσθέτως είναι δυνατή η ενσωμάτωσή της μέσα σε γενικής χρήσης γλώσσες προγραμματισμού. Είναι ταυτόχρονα λοιπόν Γλώσσα Ορισμού Δεδομένων (ΓΟΔ) όπως και Γλωσσα Χειρισμού Δεδομένων (ΓΧΔ). Επιπλέον επιτρέπει τον ορισμό περιορισμών ακεραιότητας και διευκολύνει τον ορισμό όψεων σε μία Βάση Δεδομένων(ΒΔ). Προσφέρει δυνατότητες για την διαχείριση των χρηστών και των δικαιωμάτων. (Meloni 2004) Σελ. 28 από 95

29 6.2 Ιστορία Ο Dr.E.F. Codd δημοσίευσε την εργασία «Ένα Σχεσιακό Μοντέλο Δεδομένων για Μεγάλες Κοινές Τράπεζες Δεδομένων» τον Ιούνιο του 1970 στο περιοδικό της Ένωσης Υπολογιστών και Περιφερειακών Συστημάτων ( Association of Computer Machinery-ACM )Communications of the ACM. Το μοντέλο αυτό, αποτελεί σήμερα το οριστικό πρότυπο για τα Relational DBMS. Η γλώσσα Structured English Query Language (SEQUEL) αναπτύχθηκε από την IBM για να χρησιμοποιήσει το μοντέλο του Codd. Η SEQUEL αργότερα μετονομάστηκε σε Structured Query Language (SQL). Το 1979 η Relational Software (Oracle), διέθεσε την πρώτη εμπορική εφαρμογή της SQL. Σήμερα η SQL είναι αποδεκτή ως η τυποποιημένη γλώσσα για RDBMS. Ο Dr.E.F. Codd καθόρισε 13 κανόνες, οι οποίοι όλως παραδόξως αναφέρθηκαν ως οι 13 κανόνες του Codd, για το σχεσιακό μοντέλο : 0. Ένα RDBMS πρέπει να είναι ικανό να διαχειρίζεται βάσεις δεδομένων εξ ολοκλήρου μέσω των σχεσιακών ικανοτήτων του. 1. Όλες οι πληροφορίες σε μια βάση δεδομένων (συμπεριλαμβανομένου τα ονόματα των πινάκων και των στηλών) αντιπροσωπεύονται ρητά ως τιμές σε πίνακες. 2. Κάθε τιμή σε μια σχεσιακή βάση δεδομένων είναι εγγυημένο ότι θα είναι προσβάσιμη, χρησιμοποιώντας ένα συνδυασμό του ονόματος του πίνακα, της τιμής του κυρίους κλειδιού και του ονόματος της στήλης. 3. Συστηματική υποστήριξη της τιμής null : Τα DBMS παρέχουν συστηματική υποστήριξη για την επεξεργασία null τιμών ( άγνωστα ή μη εφαρμόσιμα δεδομένα ), ευδιάκριτη από τις προκαθορισμένες τιμές και ανεξάρτητα από οποιαδήποτε περιοχή. 4. Ενεργός, online σχεσιακός κατάλογος : Η περιγραφή της βάσεως και των περιεχομένων της αντιπροσωπεύονται στο λογικό επίπεδο ως πίνακες και για αυτό μπορούν να ανακτηθούν χρησιμοποιώντας τη γλώσσα των βάσεων δεδομένων. Σελ. 29 από 95

30 5. Μια υποστηριζόμενη γλώσσα πρέπει τουλάχιστο, να έχει ένα καλά καθορισμένο συντακτικό και να είναι περιεκτική. Πρέπει να υποστηρίζει καθορισμό δεδομένων, χειρισμό, κανόνες ακεραιότητας, έγκριση και συναλλαγές. 6. Όλες οι όψεις που θεωρητικά είναι ανανεώσιμες μπορούν να ανανεωθούν μέσω του συστήματος. 7. Επίπεδο συνόλου εισαγωγή, ανανέωση και διαγραφή : Τα DBMS δεν υποστηρίζουν μόνο ανάκτηση σε επίπεδο συνόλου αλλά και εισαγωγή, ανανέωση και διαγραφή σε επίπεδο συνόλου. 8. Φυσική ανεξαρτησία δεδομένων : Προγράμματα εφαρμογής και ειδικά προγράμματα είναι λογικά απρόσβλητα, όταν αλλάζουν οι φυσικές μέθοδοι προσπέλασης ή οι δομές αποθήκευσης. 9. Λογική ανεξαρτησία δεδομένων : Τα προγράμματα εφαρμογής και τα ειδικά προγράμματα είναι λογικά απρόσβλητα, στο μέτρο του δυνατού, όταν γίνονται αλλαγές στη δομή των πινάκων. 10.Η γλώσσα της βάσεως πρέπει να είναι ικανή να καθορίζει κανόνες ακεραιότητας. 11. Ανεξαρτησία διανομής : Τα προγράμματα εφαρμογής και τα ειδικά προγράμματα είναι λογικά απρόσβλητα όταν αρχικά διανέμονται τα δεδομένα ή όταν ανακατανέμονται. 12. Καμιά ανατροπή : Δεν πρέπει αν είναι δυνατό να παρακαμφθούν οι κανόνες ακεραιότητας που ορίζονται από τη γλώσσα της βάσεως ακόμη και όταν χρησιμοποιηθεί χαμηλού επιπέδου γλώσσα. (Ramakrishnan, 2012) Σελ. 30 από 95

31 6.3 Η γλώσσα MySQL Εισαγωγή Υπάρχουν αρκετές υλοποιήσεις της SQL όπως οι MySQL, Oracle, Microsoft SQL Server, Infomix και άλλες. Η MySQL προσφέρει μία από τις καλύτερες υλοποιήσεις της SQL. Δουλεύει σε πολλά λειτουργικά συστήματα(windows, Linux, Unix) και με πολλές γλώσσες όπως οι Php, Java, C, C++ κλπ. Είναι ανοιχτού κώδικα οπότε έχει μηδενικό κόστος απόκτησης και είναι σταθερη. (Ramakrishnan, 2012) Πλεονεκτήματα και Μειονεκτήματα Πλεονεκτήματα Ας δούμε κάποια πλεονεκτήματα της MySQL που την καθιστούν ανταγωνιστική σε σχέση με άλλα συστήματα διαχείρισης βάσεων δεδομένων: Ταχύτητα, καθώς σύμφωνα με δοκιμές είναι πιο γρήγορη από άλλα συστήματα Σελ. 31 από 95

32 Ευκολία, καθώς είναι ανοιχτού κώδικα, δηλαδή δωρεάν. Υποστήριξη, καθώς στην επίσημη ιστοσελίδα της μπορείς να απευθυνθεις για κάθε σου πρόβλημα ή απορία ( Λειτουργικότητα, καθώς όλα τα λειτουργικά συστήματα είναι συμβατα με την MySQL Μειονεκτήματα Στη συνέχεια κάποια μειονεκτήματα της MySQL: Δυσκολία κατανόησης ενός κωδικα που είναι γραμμένος από άλλον Έλλειψη λεπτομερούς δοκιμής σε ορισμένες πλατφόρμες Η εξασφάλιση της ποιότητας της MySQL εξαρτάται από τους χρήστες της και κατά πόσο αυτοί είναι διαθέσιμοι να την βελτιώσουν. Σελ. 32 από 95

33 6.4 Τύποι Δεδομένων Ένας πίνακας μπορεί να έχει ως 254 πεδία του ίδιου ή διαφορετικού τύπου δεδομένων. Ως γενικούς τύπους δεδομένων θα μπορούσαμε να αναφέρουμε τα αλφαριθμητικά, τους αριθμούς και τις ημερομηνίες. Οι τύποι δεδομένων που υποστηρίζονται από την MySQL είναι πολλοί και κάποιοι από αυτούς χρησιμοποιούνται συχνότερα από άλλους όπως: Τύποι Δεδομένων INT FLOAT DOUBLE DATE TIME YEAR CHAR VARCHAR TEXT ENUM SET Περιγραφή Ακέραιος Αριθμός μονής ακρίβειας κινητής υπόδιαστολης Αριθμός διπλής ακρίβειας κινητής υποδιαστολής Μία ημερομηνία Μία ώρα Ένα έτος Αλφαριθμητικό σταθερού μήκους Αλφαριθμητικό μεταβλητού μήκους Κείμενο Λίστα τιμών (αλφαριθμητικό με μία μόνο από τις τιμές της λίστας) Λίστα τιμών (αλφαριθμητικό με καμία ή πολλές από τις τιμές της λίστας(έως 64)) Σελ. 33 από 95

34 6.5 Παραδείγματα της MySQL Παρακάτω ακολουθούν κάποια παραδείγματα MySQL με στοιχεία από την δημιουργία της πτυχιακής μας: Δημιουργία Βάσης CREATE DATABASE Ptyxiaki; Δημιουργία πίνακα CREATE TABLE hotels; Εισαγωγή στηλών CREATE TABLE `hotels` ( `hotels_id` int(11) NOT NULL AUTO_INCREMENT, `name` varchar(25) DEFAULT NULL, `address` varchar(45) DEFAULT NULL, `phone` bigint(20) NOT NULL ` ` varchar(255) DEFAULT NULL Εισαγωγή στοιχείων INSERT INTO `hotels` VALUES (1,'Αίγλη','Αργοναυτών 24', ,'info@aegli.gr') Διαγραφή πίνακα DROP TABLE hotels ; Σελ. 34 από 95

35 Διαγραφή στήλης ALTER TABLE hotels DROP ; Αλλαγή ιδιοτήτων ALTER TABLE hotels CHANGE hotels_id h_id (11) NOT NULL AUTO_INCREMENT Σελ. 35 από 95

36 ΚΕΦΑΛΑΙΟ 7 Περιγραφή Ιστοσελίδας 7.1 Αρχική Σελίδα Στην αρχική σελίδα απεικονίζεται η πόλη του Βόλου με το σήμα κατατεθέν της το Πανεπιστήμιο Θεσσαλίας και από πάνω από την εικόνα έχουμε 5 επιλογές όπου θα δούμε αναλυτικά τί κάνει η καθεμία. Αν επιλέξουμε για παράδειγμα την λέξη ΒΟΛΟΣ ή την λέξη Αρχική θα μας βγάλουν και οι δύο στο ίδιο αποτέλεσμα, δηλαδή στην Αρχικη σελίδα όπως βλέπουμε και στην παρακάτω εικόνα: Σελ. 36 από 95

37 7.2 Η πόλη του Βόλου Πληροφορίες Ιστορία Στην περίπτωση που ο χρήστης επιλέξει την λέξη Βόλος θα του εμφανίζεται μία σελίδα η οποία έχει πληροφορίες για την πόλη καθώς και την Ιστορία της και στο κάτω μέρος της σελίδας, παρουσιάζεται ο Βόλος όπως ήταν και όπως είναι μέσω φωτογραφιών: Σελ. 37 από 95

38 7.3 Πήλιο και πληροφορίες για την περιοχή του Εάν ο χρήστης επιλέξει την λέξη Πήλιο θα εμφανίζεται μία σελίδα η οποία θα τον πληροφορεί για τα γεωγραφικά χαρακτηριστικά του, την ιστορία του, για χειμερινές και καλοκαιρινές αποδράσεις καθώς και για το τουριστικό στολίδι του Πηλίου το ατμοκίνητο τρενάκι γνωστό και ως Μουτζούρη: Σελ. 38 από 95

39 7.4 Πληροφορίες Τώρα, στη περίπτωση που ο χρήστης επιλέξει τις Πληροφορίες, θα του εμφανίζει 3 επιλογές, Ξενοδοχεία Παραλίες Διασκέδαση όπως βλέπουμε παρακάτω στην εικόνα: Σελ. 39 από 95

40 7.4.1 Ξενοδοχεία Εάν επιλεξει τα Ξενοδοχεία θα του εμφανίσει μία λιστα με τα ξενοδοχεία στο Βόλο, το όνομά τους, την διεύθυνσή τους, το τηλέφωνο καθώς και το τους: Σελ. 40 από 95

41 7.4.2 Παραλίες Στην περίπτωση που ο χρήστης επιλέξει τις Παραλίες θα του εμφανίζονται οι παραλίες στο Βόλο, το όνομά τους καθώς και την τοποθεσία τους, εάν δηλαδή ανήκουν στον Παγασητικό ή στο Αιγαίο, εαν είναι ΒΔ του Βολου, ΝΑ κλπ: Σελ. 41 από 95

42 7.4.3 Διασκέδαση Εάν επιλέξει την Διασκέδαση τότε θα εμφανίζει μία σελίδα με τρεις(3) εικόνες και τρεις(3) ονομασίες κάτω από κάθε εικόνα όπου θα μπορεί να πληροφορηθεί για Καφετέριες, Ουζερί και Clubs που υπάρχουν στην πόλη του Βόλου, στη Νέα Ιωνία και στο Πήλιο: Σελ. 42 από 95

43 Καφετέριες Αν διαλέξει τις Καφετέριες θα του εμφανίζει το όνομα, τη διεύθυνση και το είδος της καφετέριας καθώς κάποιες καφετέριες λειτουργούν και ως μπαρ: Σελ. 43 από 95

44 Ουζερί Αν διαλέξει τα Ουζερί, θα του εμφανίζει τα ονόματα απο τα ουζερί καθώς και την διεύθυνσή τους: Σελ. 44 από 95

45 Clubs Και τέλος αν επιλέξει τα Clubs τότε θα του εμφανίζει τα διαθέσιμα Club στο Βολο με το όνομά τους, την διεύθυνση και το είδος του μαγαζιού, που μπορεί να είναι είτε Club είτε Μουσική Σκηνή: Σελ. 45 από 95

46 ΚΕΦΑΛΑΙΟ 8 Συμπεράσματα Για την ολοκλήρωση της συγκεκριμένης πτυχιακής χρησιμοποιήθηκαν προγράμματα ανοιχτού κώδικα τα οποία τα είχαμε διδαχτεί στη σχολή, αλλά και προγράμματα που χρειάστηκαν βοήθεια για την καλύτερη κατανόησή τους καθώς ήταν η πρώτη επαφή με κάποια από αυτά. Υλοποιώντας μία ιστοσελίδα σαν και αυτή, μπορεί κάποιος να μάθει καινούρια πράγματα οπως για παράδειγμα την γλώσσα προγραμματισμού CSS που απλοποιεί τον προγραμματισμό και βάζει χρώμα και μία σειρά στην ιστοσελίδα. Ήταν κάτι που δεν είχα προσωπικά διδαχτεί και με παρακολούθηση κάποιων σεμιναρίων και συνεδριών κατάφερα να βγάλω εις πέρας την πτυχιακή και να μάθω άλλη μία χρήσιμη γλώσσα για το web design. Το στήσιμο της πτυχιακής ήταν κάτι ευχάριστο και ήταν μία σκληρή δοκιμασία με την εφαρμογή καινούριων προγραμμάτων. Η συγκεκριμένη πτυχιακή θα μπορούσε να χρησιμοποιηθεί σαν ένα καλό εργαλείο για την προώθηση της πόλης μου και θα μπορούσαν να προστεθούν και άλλα πράγματα για να γίνει πλουσιότερη και με περισσότερες πληροφορίες. Σίγουρα όμως είναι μία καλή αρχή για το στήσιμο μίας μικρης ιστοσελίδας και με αρκετό διάβασμα και προσπάθεια, σίγουρα θα την εξελίξω και θα την εμπλουτίσω καθώς είναι ένα επάγγελμα που θα ήθελα να ακολουθήσω και στο μέλλον. Σελ. 46 από 95

47 Βιβλιογραφία Αγγελή Χ,(2005), «Προγραμματισμός Web. HTML 4 και ASP», Σύγχρονη Εκδοτική, Αθήνα Καράκος Α.,(2007), Διαδίκτυο, Παγκόσμιος Ιστός & τεχνικές Προγραμματισμού Σαλαμπάσης Μ.,(2008), "Εισαγωγή στον Προγραμματισμό Διαδικτυακών Εφαρμογών", Θεσσαλονίκη Castro E.,(2013), Html and CSS Visual QuickStart Guide Connoly T., Begg C.,(2005), «Βάσεις Δεδομένων», 4 η έκδοση, τόμοι Α & Β, Εκδόσεις Μ.Γκιούρδας, Αθήνα Date C. J.,(2004), An Introduction to Database Systems, eighth edition, Pearson Education, Inc, USA Duckett J.,(2011), Html & CSS Design and Build Web Sites Elmasri R., Navathe S. B.,(2012), «Θεμελιώδεις Αρχές Συστημάτων Βάσεων Δεδομένων», 6 η έκδοση, αναθεωρημένη, Εκδόσεις Δίαυλος, Αθήνα Gilmore J.,(2008), Beginning PHP and MySQL,Apress Meloni J. C.,(2004), "Μάθετε PHP, MySQL και Apache, Όλα σε Ένα", Εκδόσεις Μ. Γκιούρδας, Αθήνα Ramakrishnan R., Gehrke J.,(2012), «Συστήματα Διαχείρισης Βάσεων Δεδομένων», 3 η έκδοση, Εκδόσεις Τζιόλα, Θεσσαλονίκη Silberschatz A., Korth H.F., Sudarshan S., (2011), «Συστήματα Βάσεων Δεδομένων, η Πλήρης Θεωρία των Βάσεων Δεδομένων», 6 η έκδοση, Εκδόσεις Μ. Γκιούρδας, Αθήνα Σελ. 47 από 95

48 Thuraisingham B. M.,(1997), Data Management Systems Evolution and Interoperation, CRC Press, USA Ullman L.,(2005), Εισαγωγή στην PHP για τον παγκόσμιο ιστό Nixon R.,(2009), Learning Php, MySql and javascript Watson R. T.,(2006), Data Management Databases and Organizations, Fifth Edition, Wiley, USA Welling L., Thomson L.,(2011), «Ανάπτυξη Web Εφαρμογών με PHP και MySQL», 4 η Έκδοση, Εκδόσεις Μ. Γκιούρδας, Αθήνα Links Σελ. 48 από 95

49 ΠΑΡΑΡΤΗΜΑΤΑ index.html <!DOCTYPE html> <html class="full" lang="el"> <head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="description" content=""> <meta name="author" content=""> <title>βολοσ</title> <link href="css/bootstrap.min.css" rel="stylesheet"> <link href="css/full.css" rel="stylesheet"> <link href="css/nav.css" rel="stylesheet"> </head> <body> Σελ. 49 από 95

50 <nav class="navbar navbar-default navbar-fixed-top" role="navigation"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="index.html">βολοσ</a> <div class="collapse navbar-collapse" id="bs-example-navbarcollapse-1"> <ul class="nav navbar-nav"> <li> <a href="#">αρχική</a> </li> <li class="dropdown"> <a href="plirofories.html" class="dropdown-toggle" datatoggle="dropdown" role="menu" aria-expanded="false">πληροφορίες <span class="caret"></span></a> <ul class="dropdown-menu" role="menu"> <li><a href="ksenodoxeia.php">ξενοδοχεία</a></li> <li><a href="paralies.php">παραλίες</a></li> <li><a href="diaskedash.html">διασκέδαση</a></li> </ul> </li> <li> <a href="volos.html">βόλος</a> Σελ. 50 από 95

51 </li> <li> <a href="phlio.html">πήλιο</a> </li> </ul> </nav> <script src="js/jquery.js"></script> <script src="js/bootstrap.min.js"></script> </body> </html> volos.html <!DOCTYPE html> <html lang="el"> <head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="description" content=""> <meta name="author" content=""> <title>βολοσ</title> Σελ. 51 από 95

52 <link href="css/bootstrap.min.css" rel="stylesheet"> <style> body { padding-top: 70px; /* Required padding for.navbar-fixed-top. Remove if using.navbarstatic-top. Change if height of navigation changes. */ }.row { margin-bottom: 40px; } </style> </head> <body> <nav class="navbar navbar-default navbar-fixed-top" role="navigation"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> Σελ. 52 από 95

53 </button> <a class="navbar-brand" href="index.html">bολοσ</a> <div class="collapse navbar-collapse" id="bs-example-navbarcollapse-1"> <ul class="nav navbar-nav"> <li> <a href="index.html">αρχική</a> </li> <li class="dropdown"> <a href="plirofories.html" class="dropdown-toggle" datatoggle="dropdown" role="menu" aria-expanded="false">πληροφορίες <span class="caret"></span></a> <ul class="dropdown-menu" role="menu"> <li><a href="ksenodoxeia.php">ξενοδοχεία</a></li> <li><a href="paralies.php">παραλίες</a></li> <li><a href="diaskedash.html">διασκέδαση</a></li> </ul> </li> <li> <a href="volos.html">βόλος</a> </li> <li> <a href="phlio.html">πήλιο</a> </li> </ul> </nav> Σελ. 53 από 95

54 <div class="container"> <div class="row"> <div class="col-lg-12"> <h1 class="page-header">η ΠΟΛΗ ΤΟΥ ΒΟΛΟΥ <small>πληροφορίες για την πόλη του Βόλου</small> </h1> <div class="row"> <div class="col-lg-12"> <p>ο Βόλος είναι πόλη της Θεσσαλίας, χτισμένη στον μυχό του Παγασητικού κόλπου κοντά στην θέση της αρχαίας Ιωλκού στους πρόποδες του Πηλίου. Είναι επίσης μία από τις πιο μεγάλες πόλεις και ένα από τα σημαντικότερα λιμάνια της Ελλάδας. Ο μόνιμος πληθυσμός του διευρυμένου Δήμου Βόλου, σύμφωνα με την απογραφή του 2011, ανέρχεται σε κατοίκους, του πολεοδομικού συγκροτήματος Βόλου σε , ενώ η πόλη του Βόλου έχει πληθυσμό μόνιμους κατοίκους. Η προέλευση του ονόματος Βόλος δεν είναι πλήρως τεκμηριωμένη. Κατά ορισμένους, η λέξη Βόλος αποδίδεται σε παραφθορά του αρχαίου ονόματοςιωλκός (Ιωλκός > Γιωλκός > Γώλος > Βώλος ή Βόλος). Άλλοι πάλι υποστηρίζουν ότι η ονομασία Βόλος προήλθε από το όνομα Φόλος, που κατά την μυθολογία ήταν πλούσιος γαιοκτήμονας της περιοχής.</p> <p><h3>iστορία</h3> Η περιοχή του Βόλου, η αρχαία Μαγνησία, συγκαταλέγεται ανάμεσα στις πρώτες περιοχές που κατοικήθηκαν στον ελλαδικό χώρο. Οι οικισμοί που ανακαλύφθηκαν στα κοντινά χωριά Σέσκλο και Διμήνι χρονολογούνται από την 7η χιλιετία π.χ., ενώ η πολιτισμική παρουσία στον χώρο συνεχίζεται αδιάκοπη μέχρι σήμερα. Η ευρύτερη περιοχή του Βόλου συγκεντρώνει μερικές από τις σημαντικότερες νεολιθικές θέσεις ολόκληρης της Βαλκανικής χερσονήσου. Οι αρχαιολογικές έρευνες στην περιοχή έχουν φέρει στο φως Σελ. 54 από 95

55 σαράντα περίπου νεολιθικούς οικισμούς. Στην μυκηναϊκή περίοδο χρονολογείται η ίδρυση της Ιωλκού, σημαντικού οικονομικού και πνευματικού κέντρου της περιοχής, που συνδέεται άμεσα με τον ξακουστό μύθο της Αργοναυτικής εκστρατείας. </p> <div class="row"> <div class="col-md-4 portfolio-item"> <img class="img-responsive" src="volos1.jpg" alt=""> <div class="col-md-4 portfolio-item"> <img class="img-responsive" src="volos5.jpg" alt=""> <div class="col-md-4 portfolio-item"> <img class="img-responsive" src="volos3.jpg" alt=""> <div class="row"> <div class="col-md-4 portfolio-item"> <img class="img-responsive" src="volos4.jpg" alt=""> <div class="col-md-4 portfolio-item"> <img class="img-responsive" src="volos2.jpg" alt=""> <div class="col-md-4 portfolio-item"> <img class="img-responsive" src="volos6.jpg" alt=""> Σελ. 55 από 95

56 <footer> <div class="row"> <div class="col-lg-12"> <p>copyright Κώστας Κορέντης 2015</p> </footer> <script src="js/jquery.js"></script> <script src="js/bootstrap.min.js"></script> </body> </html> pilio.html <!DOCTYPE html> Σελ. 56 από 95

57 <html lang="el"> <head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="description" content=""> <meta name="author" content=""> <title>βολοσ</title> <link href="css/bootstrap.min.css" rel="stylesheet"> <link href="css/3-col.css" rel="stylesheet"> <style> body { padding-top: 70px; /* Required padding for.navbar-fixed-top. Remove if using.navbarstatic-top. Change if height of navigation changes. */ } </style> </head> <body> <nav class="navbar navbar-default navbar-fixed-top" role="navigation"> <div class="container"> Σελ. 57 από 95

58 <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="index.html">βολοσ</a> <div class="collapse navbar-collapse" id="bs-example-navbarcollapse-1"> <ul class="nav navbar-nav"> <li> <a href="index.html">αρχική</a> </li> <li class="dropdown"> <a href="plirofories.html" class="dropdown-toggle" datatoggle="dropdown" role="menu" aria-expanded="false">πληροφορίες <span class="caret"></span></a> <ul class="dropdown-menu" role="menu"> <li><a href="ksenodoxeia.php">ξενοδοχεία</a></li> <li><a href="paralies.php">παραλίες</a></li> <li><a href="diaskedash.html">διασκέδαση</a></li> </ul> </li> <li> <a href="volos.html">βόλος</a> </li> <li> <a href="phlio.html">πήλιο</a> </li> Σελ. 58 από 95

59 </ul> </nav> <div class="container"> <div class="row"> <div class="col-lg-12"> <h1 class="page-header">πηλιο <small>πληροφορίες για την περιοχή του Πηλίου</small> </h1> <div class="row"> <div class="col-lg-12"> <p>το Πήλιο είναι βουνό στο Νομό Μαγνησίας δίπλα στην πόλη του Βόλου, με ύψος μέτρα (κορυφή Πουριανός Σταυρός). Κατά την Ελληνική μυθολογία ήταν η θερινή κατοικία των θεών και πατρίδα των Κενταύρων. Eκτείνεται από τα βορειοδυτικά προς τα νοτιοανατολικά με μήκος κατά προσέγγιση 44 χλμ. και πλάτος που κυμαίνεται από 10 χλμ. στο νότο μέχρι 25 χλμ. στον βορρά. </p> <p>το Πήλιο συγκεντρώνει αρκετούς επισκέπτες, τόσο τους χειμερινούς όσο και τους καλοκαιρινούς μήνες. Το χειμώνα προτιμάται από όσους επιθυμούν να απολαύσουν το πανέμορφο βουνό και τον καθαρό αέρα, το χιόνι, να κάνουν σκι, να περάσουν χρόνο στη φύση, ενώ το καλοκαίρι οι παραθεριστές απολαμβάνουν τις πανέμορφες παραλίες του Πηλίου για Σελ. 59 από 95

60 κολύμπι, ρακέτες, θαλάσσια σπορ, πεζοπορία, κ.λπ. Οι παραλίες του Πηλίου τόσο από τη μεριά του Αιγαίου Πελάγους όσο και από τη μεριά του Παγασητικού, φημίζονται για τα καταγάλανα καθαρά νερά τους, και πολλές έχουν βραβευτεί με γαλάζια σημαία από την Ευρωπαϊκή Ένωση. Υπάρχουν παραλίες για όλα τα γούστα: ήσυχες ή κοσμικές, οργανωμένες ή μη, με αμμουδιά ή βότσαλο.</p> <p>ο σιδηρόδρομος Βόλου-Μηλεών, ή το τρενάκι του Πηλίου, όπως είναι γνωστότερο, ή αλλιώς Μουντζούρης, είναι ένα τρένο-τουριστικό αξιοθέατο των χωριών του Πηλίου. Ο σιδηρόδρομος κατασκευάστηκε σε δύο στάδια, μεταξύ του 1894 και του Αποτέλεσε για 80 χρόνια, σημείο αναφοράς για την περιοχή. Στις μέρες μας, το τρενάκι συνεχίζει να ανεβαίνει στα χωριά του Πηλίου, έχοντας κάνει μια διακοπή, στο διάστημα </p> <div class="row"> <div class="col-md-4 portfolio-item"> <img class="img-responsive" src="pilio1.jpg" alt=""> <div class="col-md-4 portfolio-item"> <img class="img-responsive" src="pilio2.jpg" alt=""> <div class="col-md-4 portfolio-item"> <img class="img-responsive" src="pilio3.jpg" alt=""> <div class="row"> Σελ. 60 από 95

61 <div class="col-md-4 portfolio-item"> <img class="img-responsive" src="pilio4.jpg" alt=""> <div class="col-md-4 portfolio-item"> <img class="img-responsive" src="pilio5.jpg" alt=""> <div class="col-md-4 portfolio-item"> <img class="img-responsive" src="pilio6.jpg" alt=""> <footer> <div class="row"> <div class="col-lg-12"> <p>copyright Κώστας Κορέντης 2015</p> </footer> <script src="js/jquery.js"></script> <script src="js/bootstrap.min.js"></script> </body> </html> Σελ. 61 από 95

62 plirofories.html <!DOCTYPE html> <html lang="el"> <head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="description" content=""> <meta name="author" content=""> <title>βολοσ</title> <link href="css/bootstrap.min.css" rel="stylesheet"> <link href="css/3-col.css" rel="stylesheet"> </head> <body> <nav class="navbar navbar-default navbar-fixed-top" role="navigation"> <div class="container"> Σελ. 62 από 95

63 <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="index.html">βολοσ</a> <div class="collapse navbar-collapse" id="bs-example-navbarcollapse-1"> <ul class="nav navbar-nav"> <li> <a href="index.html">αρχική</a> </li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="menu" aria-expanded="false">πληροφορίες <span class="caret"></span></a> <ul class="dropdown-menu" role="menu"> <li><a href="ksenodoxeia.php">ξενοδοχεία</a></li> <li><a href="paralies.php">παραλίες</a></li> <li><a href="diaskedash.html">διασκέδαση</a></li> </ul> </li> <li> <a href="volos.html">βόλος</a> </li> <li> <a href="phlio.html">πήλιο</a> </li> Σελ. 63 από 95

64 </ul> </nav> <div class="container"> <div class="row"> <div class="col-lg-12"> <h1 class="page-header">πληροφοριεσ <small>πληροφορίες για την πόλη του Βόλου</small> </h1> <div class="row"> <div class="col-md-4 portfolio-item"> <a href="#"> <img class="img-responsive" src=" alt=""> </a> <h3> <a href="ksenodoxeia.php">ξενοδοχεία</a> </h3> <p>lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p> <div class="col-md-4 portfolio-item"> Σελ. 64 από 95