ΤΙΤΛΟΣ ΠΤΥΧΙΑΚΗΣ: ΚΑΤΑΣΚΕΥΗ ΙΣΤΟΣΕΛΙΔΑΣ ΓΙΑ ΤΟ ΧΩΡΙΟ ΒΥΤΙΝΑ ΜΕ ΤΗ ΧΡΗΣΗ ΤΟΥ ΛΟΓΙΣΜΙΚΟΥ JOOMLA

ΤΜΗΜΑ ΜΗΧΑΝΙΚΩΝ ΠΛΗΡΟΦΟΡΙΚΗΣ Τ.Ε.Ι ΗΠΕΙΡΟΥ ΤΙΤΛΟΣ ΠΤΥΧΙΑΚΗΣ: ΚΑΤΑΣΚΕΥΗ ΙΣΤΟΣΕΛΙΔΑΣ ΓΙΑ ΤΟ ΧΩΡΙΟ ΒΥΤΙΝΑ ΜΕ ΤΗ ΧΡΗΣΗ ΤΟΥ ΛΟΓΙΣΜΙΚΟΥ JOOMLA ΕΡΓΑΣΙΑ ΥΠΟΒΛΗΘΕΙΣΑ ΣΤΟ ΤΜΗΜΑ ΜΗΧΑΝΙΚΩΝ ΠΛΗΡΟΦΟΡΙΚΗΣ ΣΤΑ ΠΛΑΙΣΙΑ ΤΩΝ ΚΑΝΟΝΙΣΜΩΝ ΓΙΑ ΤΗΝ ΑΠΟΚΤΗΣΗ ΤΟΥ ΠΤΥΧΙΟΥ ΥΠΟ ΤΟΝ ΛΑΓΟ ΓΕΩΡΓΙΟ Α.Μ.: 6036 ΕΙΣΗΓΗΤΗΣ ΤΖΑΛΛΑΣ ΑΛΕΞΑΝΔΡΟΣ ΑΡΤΑ, ΦΕΒΡΟΥΑΡΙΟΣ 2015 1

ΠΕΡΙΕΧΟΜΕΝΑ Εισαγωγή... 3 1. Εγκατάσταση τοπικού διακομιστή... 4 2. Εργαλεία ανάπτυξης ιστότοπου... 5 2.1. Δημιουργία βάσης δεδομένων... 5 3. CMS Σύστημα... 9 4. Εγκατάσταση προτύπου - template (Favourite)... 15 5. Εγκατάσταση επεκτάσεων... 18 5.1. Responsive Slide Show... 18 5.2. Google map... 22 5.3. YouTube Embedder... 23 5.4. Simple Image Gallery... 24 6. Εξαγωγή βάσης δεδομένων... 25 2

Εισαγωγή Σκοπός της εργασίας είναι η ανάπτυξη και κατασκευή ενός διαδικτυακού ιστοτόπου για ένα χωριό (Βυτίνα). Ο διαδικτυακός ιστότοπος θα είναι μορφοποιημένος και σχεδιασμένος έτσι ώστε να είναι εύχρηστος στους επισκέπτες, στους οποίους θα παρέχονται πολλές δυνατότητες και επιλογές. Πιο συγκεκριμένα θα αναφέρεται σε παροχή πληροφοριών για την ιστορία του και τα αξιοθέατα του, τη λαογραφία και τα νέα της περιοχής. Παρέχεται ο χάρτης της περιοχής, πλούσιο φωτογραφικό υλικό, παραδοσιακά τραγούδια και βίντεο της περιοχής. Η ανάπτυξη και κατασκευή του διαδικτυακού ιστοτόπου πραγματοποιήθηκε με τη χρήση της Joomla. 3

1. Εγκατάσταση τοπικού διακομιστή Κατεβάζω την Joomla στον υπολογιστή μου και κάνω Unzip τον φάκελο. Τα περιεχόμενά του τα αποθηκεύω στο C:\Xampp\htdocs\village, αφού έχω εγκαταστήσει το XAMPP (βλέπε παραπάνω) Κάνω εγκατάσταση του προγράμματος και εκκίνηση των Apache και MySQL. Αν υπάρχει πρόβλημα με το πρώτο και έχω ανοιχτό Skype, αλλάζω την παρακάτω ρύθμιση.(αποεπιλέγω την χρήση των θυρών 80,443 για επιπλέον εισερχόμενες συνδέσεις) 4

2. Εργαλεία ανάπτυξης ιστότοπου 2.1. Δημιουργία βάσης δεδομένων Πηγαίνουμε στο localhost/phpmyadmin και δημιουργούμε μια βάση δεδομένων με το όνομα village. Πλέον είμαστε έτοιμοι να ξεκινήσουμε την εγκατάσταση της Joomla γράφοντας στον browser localhost/village/installation, όπου επιλέγουμε όνομα και κωδικό διαχειριστή. 5

Συνεχίζουμε στην εγκατάσταση και βάζουμε το όνομα της βάσης, όνομα χρήστη root κ κενό κωδικό. Ολοκλήρωση εγκατάστασης: 6

Επιλέγουμε αφαίρεση φακέλου installation: 7

Πατάμε το κουμπί Ιστοσελίδα για να δούμε τον τελικό ιστοχώρο Πατάμε το κουμπί Administrator για να επεξεργαστούμε την ιστοσελίδα 8

Κάθε φορά για να δούμε το site γράφουμε localhost/village και για να το επεξεργαστούμε localhost/village/administrator, όπου μας ζητά το αρχικό όνομα διαχειριστή(sissy) και τον κωδικό (12345) του. 3. CMS Σύστημα CMS είναι το Content Management System. Η Joomla είναι ένα τέτοιο σύστημα και στηρίζεται στη δημιουργία ΚΑΜ (Κατηγοριών, Άρθρων και Μενού.) Συνδέουμε κάθε άρθρο με μια κατηγορία και μετά συνδέουμε κάθε μενού με μια κατηγορία. Παρακάτω: Δημιουργία κατηγοριών-υποκατηγοριών και άρθρων 9

Δημιουργία μενού 10

11

12

Συνολικά Μενού και Υπομενού: 13

14

4. Εγκατάσταση προτύπου - template (Favourite) Με το picresize αλλάζω το μέγεθος των φωτογραφιών του σάιτ κατά το δοκούν: 15

Αποθηκεύω στον media manager τις φωτογραφίες της ιστοσελίδας μου 16

17

5. Εγκατάσταση επεκτάσεων Για να εγκαταστήσουμε extensions πάμε στο αντίστοιχο μενού: 5.1. Responsive Slide Show Εγκαθιστώ το πρόσθετο Responsive slide show από την επίσημη σελίδα (δημιουργία account) 18

Αλλάζουμε το όνομα του Module από τον module manager και ορίζουμε σε ποια μενού θα εμφανίζεται από την αντίστοιχη καρτέλα. 19

Πηγαίνω στο Module manager και επιλέγω New->Smart Search Module. Επιλέγω να μην εμφανίζεται ο τίτλος και ορίζω θέση (sidebar2) 20

Για να δω τις διαφορετικές θέσεις των αντικειμένων στη σελίδα μου, γράφω στο τέλος της διεύθυνσης?tp=1 21

5.2. Google map Για να εισάγω google map του χωριού κατεβάζω το αντίστοιχο extension Ενεργοποιώ και ρυθμίζω το plug-in από τον plugin Manager(height=500, width=700, border=2, type=satellite). 22

Στο άρθρο «Χάρτης» εισάγω τον κώδικα {google_map}bytina{/google_map} 5.3. YouTube Embedder Το κατεβάζω, το κάνω upload και το ενεργοποιώ στον plugin manager όπως και παραπάνω. Στο άρθρο Βίντεο προσθέτω τα λινκς των βίντεο από το YouTube. 23

5.4. Simple Image Gallery Κατεβάζω extension για photo gallery και το ενεργοποιώ. Δημιουργώ άρθρο «Φωτογραφίες» και γράφω σε αυτό {gallery}gallery{/gallery}, όπου gallery είναι φάκελος φωτογραφιών που δημιούργησα μέσα στον Media Manager και όπου έκανα upload φωτογραφίες του χωριού. Δημιουργώ module του μενού μου και το βάζω στη θέση sidebar1(αριστερά δηλ) και στις advanced ρυθμίσεις ορίζω το suffix σε βασικό. 24

6. Εξαγωγή βάσης δεδομένων Eξάγω τη βάση δεδομένων village που δημιούργησα από το localhost/phpmyadmin από την επιλογή Εξαγωγή. Αντίστοιχα, μπορώ να εισάγω μια βάση από το κουμπί Εισαγωγή. 25