Information Technology Services and Solutions. Σύμβουλοι Μηχανογράφησης και Εκπαίδευσης

Transcript

1 Information Technology Services and Solutions Σύμβουλοι Μηχανογράφησης και Εκπαίδευσης Στεφ. Σκουλούδη 27, Καλλίπολη, Πειραιάς Κωνσταντίνος Κωβαίος Αναλυτής Συστημάτων Η/Υ Οι Ειδικοί στην Πληροφορική

2 Joomla! 1.5 English Version Downloading URL : Joomla! 1.5 Greek Version Downloading URL : Σελίδα 2 από 69

3 ΠΡΙΝ την εγκατάσταση του Joomla! απαιτείται η εγκατάσταση ενός ειδικού πακέτου προγραμμάτων το οποίο περιέχει όλα τα απαραίτητα στοιχεία για τη δημιουργία ενός πλήρους περιβάλλοντος Server Επιλέγουμε ένα από τα πιο εύχρηστα προγράμματα το οποίο είναι το XAMPP XAMPP Downloading URL : Click XAMPP for Windows Επιλέγουμε τρόπο Downloading. Το site μας προτείνει μέσω Installer. Σελίδα 3 από 69

4 Επιλέγουμε Αποθήκευση και ξεκινά αμέσως η διαδικασία του Downloading. Μετά την ολοκλήρωση του Downloading ξεκινάμε την εγκατάσταση του XAMPP, τα βήματα της οποίας είναι τα παρακάτω: Σελίδα 4 από 69

5 Click Ναι XAMPP Control Panel Application στο System Tray του Host Computer Σελίδα 5 από 69

6 Για να ελέγξουμε το αν έχει ολοκληρωθεί σωστά η εγκατάσταση του XAMPP, ανοίγουμε τον επιθυμητό μας Browser (πχ IE) και πληκτρολογούμε το URL Πρέπει να εμφανιστεί το παράθυρο: Είμαστε πλέον έτοιμοι να ξεκινήσουμε την εγκατάσταση του περιβάλλοντος Joomla!. Εγκατάσταση Joomla! Μεταβαίνουμε στον κατάλογο εγκατάστασης του XAMPP, ο οποίος εξ ορισμού είναι ο C:\XAMPP\ και ανοίγουμε τον κατάλογο htdocs. Δημιουργούμε έναν κατάλογο με όνομα της αρεσκείας μας στον οποίο θα κάνουμε Unzip τα απαραίτητα αρχεία της έκδοσης Joomla! που κατεβάσαμε. Στο παράδειγμα δημιουργούμε έναν κατάλογο με το όνομα Joomla. Σε περιβάλλον δημιουργίας Website συνηθίζουμε να δίνουμε όνομα φακέλου σχετικό με το Website που κατασκευάζουμε για λόγους ευκολίας. Σελίδα 6 από 69

7 Κάνουμε Unzip το πακέτο εγκατάστασης Joomla! μέσα στον κατάλογο που δημιουργήσαμε. Σελίδα 7 από 69

8 Ακολούθως ανοίγουμε τον επιθυμητό μας Browser (πχ IE) και πληκτρολογούμε το URL Αν είχαμε δώσει διαφορετικό όνομα στο Folder που κάναμε Unzip τα αρχεία Joomla! (έστω Folder name apollon) θα πληκτρολογούσαμε Στο Βήμα 1 επιλέγουμε τη γλώσσα εγκατάστασης και κάνουμε Click στο κουμπί Επόμενο. Στο παράδειγμά μας επιλέγουμε English. Σελίδα 8 από 69

9 Εμφανίζονται κάποια μηνύματα μετά από έλεγχο πριν την εγκατάσταση (Pre-Installation Check) που λαμβάνει χώρα στο Σύστημά μας (Βήμα 2). Κάνουμε Click στο κουμπί Next (άλλαξε η γλώσσα εγκατάστασης στο προηγούμενο βήμα). Στο Βήμα 3 εμφανίζεται ένα παράθυρο στο οποίο αναγράφονται οι όροι χρήσης του Software (License). Κάνουμε Click στο κουμπί Next. Σελίδα 9 από 69

10 Στο Βήμα 4 ορίζουμε το Database Configuration. Χρειάζονται ιδιαίτερη προσοχή οι τιμές που θα δώσουμε. Database Type mysql Host Name localhost Username root Password ΚΕΝΟ Database Name {Επιθυμητό όνομα Database} Κάνουμε Click στο κουμπί Next. Σελίδα 10 από 69

11 Στο επόμενο βήμα (Βήμα 5) καθορίζουμε τις ρυθμίσεις για πρόσβαση μέσω FTP. Λόγω του ότι στη συντριπτική πλειοψηφία των περιπτώσεων χρησιμοποιούμε κάποιον FTP Client της αρεσκείας μας (όπως το CuteFTP), παρακάμπτουμε το βήμα αυτό. Κάνουμε Click στο κουμπί Next. Στο Βήμα 6 καθορίζουμε τις βασικές ρυθμίσεις για το Site μας, οι οποίες είναι: Site Name Το επιθυμητό όνομα που θα εμφανίζεται στο Joomla! Site του Administrator του Website Admin Password Το Password πρόσβασης στο Website (!!! ΠΡΟΣΟΧΗ!!!) Στην προτροπή περί εγκατάστασης των εκπαιδευτικών δεδομένων κουμπί Install Sample Data, προχωράμε με Click ώστε να τα εγκαταστήσουμε. Όταν αποκτήσουμε την κατάλληλη εμπειρία, δεν θα εγκαθιστούμε τα Sample Data στα Websites που θα σχεδιάζουμε. Σελίδα 11 από 69

12 Στο Βήμα 7 ολοκληρώνεται η εγκατάσταση του Joomla! ΠΡΟΣΟΧΗ!!! Όπως αναγράφεται, απαιτείται η ΔΙΑΓΡΑΦΗ του Folder Installation από τον κατάλογο εγκατάστασης. Αφού διαγράψουμε τον εν λόγω κατάλογο είμαστε έτοιμοι να συνδεθούμε για πρώτη φορά με το Website μας. Σελίδα 12 από 69

13 Σε περίπτωση προβληματικής εγκατάστασης 1. Κάνουμε Drop την Database μέσω phpmyadmin Browser URL //localhost/phpmyadmin 2. Διαγράφουμε το Folder με τα αρχεία Joomla! από τον κατάλογο htdocs Επαναλαμβάνουμε τη διαδικασία εγκατάστασης από την αρχή. Σελίδα 13 από 69

14 Joomla! CMS (Content Management System) The Joomla! Architecture Σχεδόν όλες οι πληροφορίες στο Joomla! αποθηκεύονται σε μια Database και παράγονται στην οθόνη του επισκέπτη του Website On Demand. Το Joomla! χωρίζεται σε δύο μεγάλα Interfaces. Το Front End Interface (The Public Interface) το οποίο βλέπουν οι χρήστες επισκέπτες του Website και το Back End Interface (The Admin Interface) το οποίο χειρίζεται κατά βάση ο Administrator του Website. Back End Interface (The Admin Interface) και Σύνδεση με το Website Έχοντας δημιουργήσει την Database για το Website μας, ξεκινάμε να παρέχουμε τις απαραίτητες ρυθμίσεις (configuration) καθώς και το αναγκαίο περιεχόμενο (content) το οποίο θα είναι προσβάσιμο μέσω του Web. Συνδεόμαστε με το Website μέσω του URL //localhost/joomla/administrator παρέχοντας ως Logon Credentials Username admin Password εκείνο το οποίο δώσαμε κατά την εγκατάσταση στο Βήμα 6. Γίνεται έλεγχος για την ορθότητα των Logon Credentials και αν έχουν δοθεί σωστά, συνδεόμαστε με την Database. Σελίδα 14 από 69

15 Υπάρχουν Τρεις (3) πρωτεύοντες τύποι Interfaces στο Admin System : 1. Control Panel 2. Manager Pages 3. Workspace Pages των οποίων ακολουθεί παρουσίαση. Σελίδα 15 από 69

16 1. Control Panel Menu Site Control Panel Πάνω Αριστερά : Βασικά Menu. Πάνω Δεξιά : Preview Προεπισκόπηση του Front End του Website Mail Icon Admin Messages People Icon Logged In Users Logout Exit Admin System Αριστερό Τμήμα Οθόνης : Shortcuts 2. Manager Pages Επιλέγοντας από τα Menus ή Shortcuts εμφανίζονται οι αντίστοιχες Manager Pages για τη διαχείριση των επιμέρους Items. 3. Workspace Pages Οι σελίδες που εμφανίζονται όταν επιλέξουμε κάποια επιμέρους διεργασία μέσω κάποιου Manager. Σελίδα 16 από 69

17 Global Configuration Manager Η πρώτη διεργασία που συνήθως κάνουμε μετά την εγκατάσταση του Joomla! είναι να ρυθμίσουμε το Global Configuration του Site μέσω του Global Configuration Manager. Menu Site Global Configuration Manager Shortcut ή Global Configuration Site Settings System Settings Σελίδα 17 από 69

18 Server Settings CMS Content Management System The Joomla! Content Hierarchy Για να πάρουμε το μέγιστο από το Σύστημα πρέπει να κατανοήσουμε τη Σχέση μεταξύ Τριών (3) Αντικειμένων: Articles, Categories και Sections. Το πιο βασικό επίπεδο της Ιεραρχίας Περιεχομένου είναι το Article. Τα Articles μπορούν να είναι Ανεξάρτητα (Stand Alone) ή να Ομαδοποιηθούν μέσα σε Categories. Κάθε Category ανήκει σε ένα Parent Grouping που λέγεται Section. Έτσι γίνεται εύκολα κατανοητό ότι η Joomla! Content Hierarchy είναι της φιλοσοφίας Set και Subset Περιεχομένου. Για τη δημιουργία Περιεχομένου συνιστούμε ανεπιφύλακτα τη χρήση του built-in editor TinyMCE ο οποίος παρέχει πλούσια εργαλεία χειρισμού Περιεχομένου. Για να ενεργοποιήσουμε τον TinyMCE editor με πλήρη λειτουργικότητα : 1. Global Configuration Site Tab Default WYSIWYG Editor Editor TinyMCE Save 2. Menu Extensions Plugin Manager Edit Editor TinyMCE Plugin Functionality Extended Save Σελίδα 18 από 69

19 Πριν προχωρήσουμε στη δημιουργία Περιεχομένου, παραθέτουμε σχηματικά τις θέσεις (placeholders) στις οποίες τοποθετείται το εν λόγω Περιεχόμενο. Joomla! Content Default Placeholders Σελίδα 19 από 69

20 Section Manager Control Panel Section Manager ή Content Section Manager Manager που μας επιτρέπει την πλήρη Διαχείριση Sections. Οι βασικές λειτουργίες είναι: Δημιουργία (New) Επεξεργασία (Edit) Διαγραφή (Delete). New Apply: Αποθήκευση και συνέχιση εργασιών Save: Αποθήκευση και έξοδος Σελίδα 20 από 69

21 Για να επεξεργαστούμε ένα Section, απλά κάνουμε Click στον Τίτλο του και ανοίγει ο Editor για επεξεργασία. Αν επιθυμούμε να αλλάξουμε τη Σειρά Δημοσίευσης πατάμε στα πράσινα βέλη του Order item. Για να παύσουμε τη Δημοσίευση ενός ή περισσοτέρων Sections, επιλέγουμε τα αντίστοιχα Check Boxes και πατάμε Unpublish στο πάνω μέρος του παραθύρου. Από τη γραμμή εργασιών στο πάνω μέρος του παραθύρου μπορούμε επίσης να Αντιγράψουμε (Copy) ή να Διαγράψουμε (Delete) ένα Section. ΠΡΟΣΟΧΗ!!!! Στη διαδικασία της Διαγραφής Section ΔΕΝ ζητείται επιβεβαίωση, οπότε πρέπει να είμαστε ιδιαίτερα προσεκτικοί. Σελίδα 21 από 69

22 Category Manager Control Panel Category Manager ή Content Section Manager Manager που μας επιτρέπει την πλήρη Διαχείριση Categories. Οι βασικές λειτουργίες είναι: Δημιουργία (New) Επεξεργασία (Edit) Διαγραφή (Delete). New Apply: Αποθήκευση και συνέχιση εργασιών Save: Αποθήκευση και έξοδος Σελίδα 22 από 69

23 Για να επεξεργαστούμε ένα Category, απλά κάνουμε Click στον Τίτλο του και ανοίγει ο Editor για επεξεργασία. Αν επιθυμούμε να αλλάξουμε τη Σειρά Δημοσίευσης πατάμε στα πράσινα βέλη του Order item. Για να παύσουμε τη Δημοσίευση ενός ή περισσοτέρων Categories, επιλέγουμε τα αντίστοιχα Check Boxes και πατάμε Unpublish στο πάνω μέρος του παραθύρου. Από τη γραμμή εργασιών στο πάνω μέρος του παραθύρου μπορούμε επίσης να Αντιγράψουμε (Copy) ή να Διαγράψουμε (Delete) ένα Category. ΠΡΟΣΟΧΗ!!!! Στη διαδικασία της Διαγραφής Section ΔΕΝ ζητείται επιβεβαίωση, οπότε πρέπει να είμαστε ιδιαίτερα προσεκτικοί. Σελίδα 23 από 69

24 Article Manager Control Panel Article Manager ή Content Article Manager Manager που μας επιτρέπει την πλήρη Διαχείριση Articles. Οι βασικές λειτουργίες είναι: Δημιουργία (New) Επεξεργασία (Edit) Διαγραφή (Delete). New Preview: Προεπισκόπηση Article Apply: Αποθήκευση και συνέχιση εργασιών Save: Αποθήκευση και έξοδος Σελίδα 24 από 69

25 Για να επεξεργαστούμε ένα Article, απλά κάνουμε Click στον Τίτλο του και ανοίγει ο Editor για επεξεργασία. Αν επιθυμούμε να αλλάξουμε τη Σειρά Δημοσίευσης πατάμε στα πράσινα βέλη του Order item. Για να παύσουμε τη Δημοσίευση ενός ή περισσοτέρων Articles, επιλέγουμε τα αντίστοιχα Check Boxes και πατάμε Unpublish στο πάνω μέρος του παραθύρου. Από τη γραμμή εργασιών στο πάνω μέρος του παραθύρου μπορούμε επίσης να Αντιγράψουμε (Copy) ή να Διαγράψουμε (Delete) ένα Article. ΠΡΟΣΟΧΗ!!!! Στη διαδικασία της Διαγραφής Section ΔΕΝ ζητείται επιβεβαίωση, οπότε πρέπει να είμαστε ιδιαίτερα προσεκτικοί. Αφού δημιουργήσουμε ένα Article πρέπει να ορίσουμε τις Παραμέτρους του για την ορθότερη λειτουργία του. Υπάρχουν Τρεις (3) κατηγορίες Παραμέτρων και ακολουθεί η παρουσίασή τους. Σελίδα 25 από 69

26 Ορισμός Article Parameters Ορισμός Advanced Parameters Ορισμός Metadata Parameters Σελίδα 26 από 69

27 Intro Text Σε περιπτώσεις μεγάλων σε περιεχόμενο Articles μπορούμε να ορίσουμε ένα Εισαγωγικό Κείμενο και πατώντας πάνω στο Link που εμφανίζεται, ο χρήστης να μπορεί να διαβάσει και το υπόλοιπο Article. Στον Editor και στο σημείο που επιθυμούμαι τη διακοπή, κάνουμε Click στο Εικονίδιο και το κείμενο αποκτά τη μορφή: Αποθηκεύουμε το Article. Στον Browser θα έχουμε: Σημείωση: Με τη χρήση του Εικονιδίου Pagebreak, χωρίζουμε ένα Single-page Article σε πολλαπλές σελίδες. Σελίδα 27 από 69

28 Media Manager Ο Media Manager μας παρέχει τη δυνατότητα να προσθέσουμε στο σύστημα (Server) Images και Media Files. Μετά την προσθήκη των εν λόγω files μπορούμε να τα εισάγουμε στα επιθυμητά Articles. Control Panel Media Manager By default ο Media Manager μας παρουσιάζει τα περιεχόμενα του \images Folder. Στον localhost η διαδρομή είναι c:\xampp\htdocs\{site}\images Στην πιο πάνω εικόνα βλέπουμε αρχεία ανά κατηγορίες τα οποία τοποθετήθηκαν με την εγκατάσταση του Joomla! ΦΥΣΙΚΑ έχουμε τη δυνατότητα να δημιουργήσουμε δικούς μας καταλόγους και να φορτώσουμε δικά μας αρχεία μέσω των διαθεσίμων εργαλείων. Ακολουθεί παρουσίαση προσθήκης Media Files σε ένα Article. Σελίδα 28 από 69

29 Προσθήκη Images ή Media Files σε ένα Article Για να προσθέσουμε Images ή Media Files σε ένα Article, στο επιθυμητό σημείο κάνουμε Click στο κουμπί Insert/Edit Image και μέσω του πλαισίου διαλόγου που εμφανίζεται τοποθετούμε το αρχείο στο Article. Ολοκληρώνουμε τη διαδικασία πατώντας Insert. TIP!!! Πως βρίσκουμε το Image URL Media Manager: Επιλογή επιθυμητού Media File Right Click στο Filename Αντιγραφή Συντόμευσης. Article Manager: Επεξεργασία (ή Δημιουργία) Article Insert/Edit Image στο textbox Image URL κάνουμε Επικόλληση τη Συντόμευση. Σελίδα 29 από 69

30 Joomla! Templates Ένα ακόμα μεγάλο πλεονέκτημα του Joomla! είναι η χρήση των Templates, τα οποί μας βοηθούν να δώσουμε μεγάλη λειτουργικότητα και επαγγελματική όψη στα Websites μας. Μπορούμε να επεξεργαστούμε τα ήδη υπάρχοντα Templates, να δημιουργήσουμε νέα ή να κατεβάσουμε από το Internet. Τα Κύρια Μέρη ενός Template είναι: Δομή Καταλόγων (Directory Structure) /css /html /images Περιέχει τα απαραίτητα αρχεία css για το Template Περιέχει (αν υπάρχουν) επικαλύψεις κώδικα html Περιέχει τα απαραίτητα γραφικά για το Template Βασικά Αρχεία (Key Files) component.php index.php template.css templatedetails.xml template_thumbnail.png Η επεξεργασία των Templates γίνεται μέσω του Template Manager. Menu Extensions Template Manager Site Tab: Templates που αφορούν στο Website. Administrator Tab: Templates που αφορούν στο Admin Interface. Για να ορίσουμε ένα Template ως Default κάνουμε Click στο Check box του κι έπειτα Click στο κουμπί Default. Σελίδα 30 από 69

31 Template Installation Για να εγκαταστήσουμε ένα Template που φτιάξαμε εμείς ή κατεβάσαμε από το Internet εργαζόμαστε ως εξής: Menu Extensions Install/Uninstall. Εμφανίζεται ο Extension Manager. Σελίδα 31 από 69

32 Τώρα που το Template φορτώθηκε, μπορούμε να το χρησιμοποιήσουμε μέσω του Template Manager τη λειτουργία του οποίου είδαμε προ ολίγου. Εγκατάσταση Templates, Modules, Plugins, Languages και Components Με τη χρήση του Extension Manager, μπορούμε να εγκαταστήσουμε στο Σύστημά μας Modules, Plugins, Languages και Components. Standard Joomla! Components Είναι εκείνα τα Components τα οποία εγκαθίστανται εξ ορισμού κατά τη διάρκεια του Joomla! Installation και είναι άμεσα διαθέσιμα στον σχεδιαστή του Website. Σελίδα 32 από 69

33 Δημιουργία Menus Για να δημιουργήσουμε δικά μας Menu, εργαζόμαστε με τον Menu Manager ο οποίος είναι ένα Standard Joomla! Component. Menu Menus Menu Manager Εμφανίζονται τα ήδη υπάρχοντα Menus. Για τη δημιουργία ενός Νέου Menu κάνουμε Click στο κουμπί New. Κάνοντας Click στο Link Menu Item(s) σε ήδη υπάρχον Menu, εμφανίζεται ο Menu Item Manager με τον οποίο δημιουργούμε τα επιμέρους Menu Items ορίζοντας τα χαρακτηριστικά τους. Αν κατά την εγκατάσταση του Joomla! έχουμε εγκαταστήσει τα Sample Data, τότε στο Website μας θα υπάρχουν εγκατεστημένα τα Menus που βλέπουμε στην πιο πάνω εικόνα. Γίνεται εύκολα κατανοητό ότι μπορούμε να επεξεργαστούμε τα εν λόγω Menus και να τα τροποποιήσουμε με βάση τις δικές μας ανάγκες. Τόσο ο Menu Manager όσο και ο Menu Item Manager χρησιμοποιούνται για τη διαχείριση των Menu Contents. Η Εμφάνιση (Display) των Menus ελέγχεται από το Menu Module. Κάθε Menu στο Σύστημα έχει συσχετισθεί με ένα τουλάχιστον Menu Module. Όταν δημιουργείται ένα νέο Menu, ένα νέο Menu Module τυπικά δημιουργείται από το Σύστημα για να ενεργοποιήσει την εμφάνιση του Menu. Κατά τη διαδικασία δημιουργίας ενός νέου Menu το Σύστημα μας προτρέπει να εισάγουμε το Menu Title που θα χρησιμοποιηθεί για να ονομάσει το Menu Module για το Menu. ΠΡΟΣΟΧΗ!!! Αν αφήσουμε κενό το εν λόγω πεδίο, το Σύστημα δημιουργεί το Menu αλλά ΟΧΙ το Module, με αποτέλεσμα το Menu να ΜΗΝ ΕΙΝΑΙ ΟΡΑΤΟ στο Front End του Website. Για το λόγο αυτό, δίνουμε ΠΑΝΤΑ τίτλο. Σελίδα 33 από 69

34 Δημιουργία Νέου Menu Menu Menus Menu Manager New Στον Menu Manager Click Για την περίπτωση της Διαγραφής: Μπορούμε να διαγράψουμε ένα Menu Module χωρίς να διαγράψουμε το σχετικό Menu αλλά ΔΕΝ μπορούμε να διαγράψουμε ένα Menu χωρίς να διαγράψουμε το σχετικό Module. H διαγραφή ενός Menu διαγράφει και τα συσχετιζόμενα Menu Items ΧΩΡΙΣ να τα μεταφέρει στα Trash. ΔΕΝ ΔΙΑΓΡΑΦΟΥΜΕ ΠΟΤΕ το default Menu Item του Website το οποίο στο standard configuration είναι το Main Menu που περιλαμβάνει την Home Page. Σελίδα 34 από 69

35 Δημιουργία Menu Items. Menu Item Manager Για τον User: Τα Menu Items παρέχουν τις επιλογές που βλέπει ο χρήστης (επισκέπτης του Website) μέσα στη Λίστα του εκάστοτε Menu. Για τον Administrator: Τα Menu Items είναι πολύ σημαντικά διότι οι αποφάσεις που λαμβάνονται κατά τη διαδικασία δημιουργίας των Menu Items έχουν επιπτώσεις για τον τρόπο εμφάνισης του Ιστότοπου στο Internet. Αντίθετα με τον Menu Manager, ΔΕΝ ΥΠΑΡΧΕΙ LINK για τον Menu Item Manager. Για να έχουμε πρόσβαση κάνουμε Click Edit Menu Item(s) στο επιθυμητό Menu Name οπότε κι εμφανίζεται ο Menu Item Manager. Δημιουργία Νέου Menu Item. Click New Επιλέγουμε το είδος του Νέου Menu Item που δημιουργούμε μέσω της επιλογής του Menu Item Type από τη λίστα που βλέπουμε αριστερά. Σε περίπτωση που χρειαστεί αλλαγή στον τύπο, αυτό λαμβάνει χώρα μέσα από μια πολύ εύκολη διαδικασία που θα περιγράψουμε παρακάτω. Σελίδα 35 από 69

36 Internal Link Articles Επιλογές Menu Item Type σχετικές με την παρουσίαση Άρθρων (Articles). Σελίδα 36 από 69

37 Internal Link Contacts Επιλογές Menu Item Type σχετικές με την εμφάνιση Επαφών (Contacts). Internal Link News Feeds Επιλογές Menu Item Type σχετικές με την εμφάνιση Ειδήσεων (News Feeds). Σελίδα 37 από 69

38 Internal Link Polls Επιλογές Menu Item Type σχετικές με τη διενέργεια Ψηφοφοριών (Polls). Internal Link Search Επιλογή Menu Item Type σχετική με την τοποθέτηση Τοπικής Μηχανής Αναζήτησης για το Website (Search). Σελίδα 38 από 69

39 Internal Link User Επιλογές Menu Item Type σχετικές με το χειρισμό Χρηστών (Users) μέσω Username Password (Logon Credentials). Internal Link Web Links Επιλογές Menu Item Type για παρουσίαση Περιεχομένου Web Link. Σελίδα 39 από 69

40 Internal Link Wrapper Επιλογή Menu Item Type για την τοποθέτηση ενός iframe το οποίο αναδιπλώνει External Content, εξωτερικό περιεχόμενο όπως για παράδειγμα κάποιο άλλο Website μέσα στο δικό μας Joomla! Site. External Link Επιλογή Menu Item Type για την προσθήκη Link προς ένα εξωτερικό Website. Separator Προσθέτουμε έναν διαχωριστή επιλογών σε μεγάλα Menus για ομαδοποίηση ενεργειών. Δεν είναι ενεργή επιλογή, έχει μόνο οπτικά αποτελέσματα. Σελίδα 40 από 69

41 Alias Το Menu Item Type Alias μας επιτρέπει να δημιουργήσουμε duplicates από Menu Items για εκείνες τις καταστάσεις στις οποίες θέλουμε ένα Menu Item να εμφανίζεται σε περισσότερα από ένα Menus στην Σελίδα. Παραδείγματα Δημιουργίας Menu και Menu Item Types Click Menu Item(s) για Main Menu. Σελίδα 41 από 69

42 Click Menu Item Αρχική. Βλέπουμε πως έχει δηλωθεί ως Front Page Blog Layout Menu Item Type. Στο Website το Article εμφανίζεται: Σελίδα 42 από 69

43 Click Menu Item Ημερήσιες Εκδρομές. Βλέπουμε πως έχει δηλωθεί ως Article Layout Menu Item Type. Στο Website το Article εμφανίζεται: Σελίδα 43 από 69

44 Click Menu Item 2Ήμερες Εκδρομές στην Ελλάδα. Βλέπουμε πως έχει δηλωθεί ως Category List Layout Menu Item Type. Στο Website τα Articles εμφανίζονται: Στο Παράρτημα Α υπάρχει παράδειγμα δημιουργίας Πολυεπίπεδων Menus. Σελίδα 44 από 69

45 Δημιουργία Banners Για να δημιουργήσουμε Banners στο Website μας, εργαζόμαστε με τον Banner Manager ο οποίος χειρίζεται το διαφημιστικό χώρο. Μπορεί να εμφανίσει κάθε είδους γραφικό περιεχόμενο χωρίς ιδιαίτερους περιορισμούς. Ο Banner Manager συνεργάζεται με το Banner Module. Το Component χειρίζεται τη διαχείριση των Banners και των Clients όσο το Module χειρίζεται την εμφάνιση των Banners. Ελέγχουμε την τοποθέτηση των Banners αναθέτοντας το Module στις σχετικές Module Positions. Το Component δρα ως Interface και μας επιτρέπει να οργανώνουμε τα Banners σε κατηγορίες και να τα συνδέουμε με Clients με βάση περιορισμούς στην εμφάνιση. Banner Manager Για να τοποθετήσουμε διαφημίσεις στο Website, πρέπει πρώτα να προσθέσουμε τα απαραίτητα αρχεία στο Σύστημα και να τα οργανώσουμε με τη χρήση του Banner Manager Component ως εξής: Menu Components Banner Banners Banner Parameters Toolbar Click Parameters Track Banner Impression Times: Για μέτρηση των Impressions ανά Banner ημερησίως. Track Banner Click Times: Για μέτρηση των Clicks ανά Banner ημερησίως. Tag Prefix: Για καθορισμό προθέματος για χρήση των Tag Matching Functions. Σελίδα 45 από 69

46 Managing Clients Τα Clients δημιουργούνται από τον Administrator με σκοπό την Ομαδοποίηση των Banners. Κάθε Banner πρέπει να ανατεθεί σε Client. Παρότι τα Clients παρέχουν μια μονάδα οργάνωσης των Banners, υπάρχει ακόμα ένα επίπεδο οργάνωσης οι Banner Categories. Πριν μπορέσουμε να προσθέσουμε το πρώτο μας Banner πρέπει να έχουμε τουλάχιστον ένα Banner Client ή Banner Category. Banner Client Manager Με τον Banner Client Manager διαχειριζόμαστε τους Clients που υπάρχουν στο Σύστημα. Menu Components Banner Clients Creating Clients: Click New Client Name: Το επιθυμητό όνομα Client. Client Name: Το όνομα του ατόμου που θα έρθουμε σε επαφή για Client. Contact Το του υπεύθυνου. Extra Information: Περαιτέρω πληροφορίες. Click Save. Σελίδα 46 από 69

47 Δημιουργία Categories : Menu Components Banner Categories Οι Categories όπως και οι Clients χρησιμοποιούνται για Ομαδοποίηση Banners. Κάθε Banner πρέπει να ανατεθεί σε μία Category. Οι Categories είναι ανεξάρτητες από το Client Grouping. Ένα Banner μπορεί να ανήκει σε κάθε συνδυασμό από Category και Fields. ΠΡΟΣΟΧΗ!!! Χρειαζόμαστε τουλάχιστον μία Category στο Σύστημα ΠΡΙΝ αρχίσουμε να προσθέτουμε Banners στο Website. Creating Categories: Click New Click Save. Σελίδα 47 από 69

48 Δημιουργία Banners : Menu Components Banner Banners Click New Click Save. Σελίδα 48 από 69

49 Banner Module Το Banner Module ορίζει το μέρος που θα τοποθετηθεί το Banner (Placeholder) για τα Modules που ορίσαμε. Menu Extensions Module Manager Click New Banner Next Όπως βλέπουμε πιο πάνω, υπάρχουν όλες οι κατηγορίες των Modules που μπορούμε να χρησιμοποιήσουμε κι εμείς ανάλογα με τις εκάστοτε ανάγκες μας επιλέγουμε την επιθυμητή κατηγορία. Υπενθυμίζουμε ότι γενικά ένα Module ορίζει που θα τοποθετηθεί αντίστοιχο αντικείμενο που δημιουργήσαμε. (Placeholder) το Σελίδα 49 από 69

50 Click Save. Σελίδα 50 από 69

51 Παράδειγμα Δημιουργίας Banner ** Εργασία Μέσω Banner Manager ** Menu Components Banner Banners Parameters Menu Components Banner Clients New Click Save. Σελίδα 51 από 69

52 Menu Components Banner Categories New Click Save. Σελίδα 52 από 69

53 Menu Components Banner Banner New Tip!!! Ο εξ ορισμού κατάλογος των Banner Images είναι ο images\banners του οποίου το πλήρες Path είναι: c:\xampp\htdocs\joomla\images\banners Στον εν λόγω κατάλογο κάνουμε Save τα δικά μας Banner Images. Click Save. Σελίδα 53 από 69

54 ** Εργασία Μέσω Banner Module ** Menu Extensions Module Manager New Banner Next Click Save. Σελίδα 54 από 69

55 Media Manager Η κύρια εργασία του Media Manager είναι το να μετακινήσουμε Media Files στο Server για να τα χρησιμοποιήσουμε στο Website μας. Παρότι ο Media Manager έχει δυνατότητα για File Uploading, η εν λόγω διεργασία λαμβάνει χώρα μέσω κάποιου FTP Client (όπως το CuteFTP) ειδικά όταν έχει φορτωθεί το Website στον Web Server. Menu Site Media Manager Click Άνοιγμα Σελίδα 55 από 69

56 Μετά το φόρτωμα του επιθυμητού Media File (πχ ενός Flash Video.swf) μπορούμε να το εισάγουμε στο Website μας. Στο επιθυμητό Article κάνουμε Click διαλόγου Insert / Edit Embedded Media. κι εμφανίζεται το πλαίσιο Πληκτρολογούμε το File/URL Link (το οποίο μας είναι γνωστό μέσω του Media Manager) και κάνουμε Click Insert. Όταν ολοκληρωθεί η όλη διαδικασία, στο Article θα έχουμε: Σελίδα 56 από 69

57 Εγκατάσταση VirtueMart για την Υλοποίηση e-commerce Το VirtueMart είναι ένα ισχυρότατο Open Source e-commerce Plugin για το Joomla! CMS με το οποίο δημιουργούμε ένα E-Shop Joomla! Website. VirtueMart Downloading URL 1 : URL 2 : *** Επιλογή Γράφοντος *** Υπάρχει η δυνατότητα downloading VirtueMart και Joomla! μαζί για ενιαία εγκατάσταση (τελευταίο Link στις πιο πάνω επιλογές). Σελίδα 57 από 69

58 Κάνουμε UnZip το αρχείο που κατεβάσαμε και ξεκινάμε τον Extension Manager. Βρίσκουμε το αρχείο com_virtuemart_x.x.x.zip μέσω της Αναζήτησης και πατάμε το κουμπί Upload File & Install. Με την ολοκλήρωση της εγκατάστασης εμφανίζεται το παρακάτω παράθυρο: Αν θέλουμε να εγκαταστήσουμε Sample Data πατάμε το αντίστοιχο κουμπί. Στο παράδειγμά μας και για καθαρά εκπαιδευτικούς σκοπούς ζητάμε την εγκατάσταση των εν λόγω δεδομένων. Σε περιβάλλον δημιουργίας E-Shop φυσικά ΔΕΝ χρειάζεται να τα φορτώσουμε. Σελίδα 58 από 69

59 Ακολούθως εγκαθιστούμε το Βασικό VirtueMart Module. Στο Extensions Menu κάνουμε Click Install/Uninstall και μέσω του Extension Manager επιλέγουμε για εγκατάσταση το Zip File com_virtuemart.x.x.x_ext_aio.zip μέσω της Αναζήτησης και πατάμε το κουμπί Upload File & Install. Στον Module Manager έχουν φορτωθεί όλα τα απαραίτητα Modules. Είμαστε έτοιμοι να προχωρήσουμε στη δημιουργία ενός E-Shop. Σελίδα 59 από 69

60 Προετοιμασία Website Uploading σε Production Web Server Με την ολοκλήρωση δημιουργίας του Website μας στον localhost Server και τον έλεγχο ορθής λειτουργίας του, έφτασε η στιγμή που θα πρέπει να το κάνουμε Upload στον κατάλληλο Production Web Server. Θεωρούμε δεδομένη τη δέσμευση URL και την ύπαρξη Production Web Server (διαφορετικά δεν μπορεί να μετατραπεί το έργο μας σε Ιστότοπο). Η όλη διαδικασία αν και ενδέχεται να διαφέρει ανάλογα με τον πάροχο Web Content που επιλέξαμε (για αυτό και ΠΡΙΝ την έναρξή της συνιστούμε ανεπιφύλακτα την επικοινωνία με τον πάροχο για οδηγίες), αποτελείται από τα εξής βήματα: Βήμα 1: Backup Παίρνουμε Backup όλα τα αρχεία του Website μας Βήμα 2: Εξαγωγή (Export) της Database (Joomla! Files) Μέσω του phpmyadmin επιλέγουμε την κατάλληλη Database Επιλέγουμε την καρτέλα Εξαγωγή και αφού επιλέγουμε SQL πατάμε το κουμπί Εκτέλεση. Σελίδα 60 από 69

61 Βήμα 3: Δημιουργία Νέας Database στο νέο μας Hosting Account Εδώ απαιτείται η πλήρης ενημέρωσή μας από τον πάροχο. Συνήθως η όλη δημιουργία πραγματοποιείται πολύ εύκολα μέσω του CPanel του νέου μας Web Server. Βήμα 4: Ρύθμιση του configuration.php (ή config.php) var $log_path = '/home/account_name/public_html/logs'; var $tmp_path = '/home/account_name/public_html/tmp'; var $user = 'apollon'; var $db = 'itss_apollon'; var $password = 'my_password'; Σελίδα 61 από 69

62 Βήμα 5: File Uploading στον Production Web Server (Hosting Account) Με τη χρήση κάποιου FTP Client, φορτώνουμε ΟΛΑ τα Αρχεία και Φακέλους από το c:\xampp\htdocs\joomla!_folder που είχαμε δημιουργήσει ΜΑΖΙ ΜΕ ΤΟ SQL File που δημιουργήσαμε όταν κάναμε ΕΞΑΓΩΓΗ την Database και τα φορτώνουμε στο αντίστοιχο Folder του Web Server (έχουμε ενημερωθεί από τον Πάροχο για το ποιο είναι αυτό. Στο παράδειγμά μας χρησιμοποιούμε το κλασσικό public_html. Βήμα 6: Είσοδος των στοιχείων της Database στη ΝΕΑ MySQL Database Χρησιμοποιώντας πλέον το CPanel phpmyadmin του παρόχου ΚΑΙ ΤΟ SQL FILE που δημιουργήσαμε, κάνουμε ΕΙΣΑΓΩΓΗ την ΠΑΛΙΑ DATABASE στην ΝΕΑ (Import). Σελίδα 62 από 69

63 Παράρτημα Α Creating a submenu In Joomla!, submenus can be shown either as one menu with two or more levels or as completely separate menu modules. To show how to do this, we will step through creating a two-level menu and then see how to show it either as one large menu or as separate parent and child menus. Contents [hide] 1 Example Data 2 Menu and Menu Items 3 Menu Modules 3.1 One Menu Module 3.2 Separate Menu Modules Example Data In our example, we will create a menu called "Pets". It will have two top-level menu items called "Dogs" and "Cats". Under Dogs, we will have "Collies" and "Greyhounds". Under Cats we will have "Tabbies" and "Siamese". So the structure of the Pets menu will be as follows: Dogs Cats Collies Greyhounds Tabbies Siamese Menu and Menu Items To create this structure, we create one menu with two levels of Menu Items. Note that we do this whether we want to have everything shown as one large menu or whether we want to create separate menu modules (one parent menu and two child menus). We'll see how to do this later on, when we create the modules. Here are the steps to create the Menu and Menu Items. 1. Create a new Menu in the Menu Manager called "Pets". Σελίδα 63 από 69

64 2. Add a new Menu Item called "Dogs". For this example, we don't really care what the type of the Menu Items is. For example, you can just create one article called "Pet Menu Test" and then create all of the Menu Items as type Article Article Layout and point to this article. 3. Add a second Menu Item called "Collies" (again, Menu Type of Article Layout as above). In the Parent Item box, select "Dogs", as shown below: 4. Add a third Menu Item called "Greyhounds", again making "Dogs" the Parent Item. (Remember, these can all point to the same article.) 5. Add the "Cats" Menu Item. Be sure to make the Parent Item for this "Top". 6. Add the last two Menu Items, "Tabbies" and "Siamese", making "Cats" the Parent Item for both. When you get done, the Menu Item Manager should look like the following: Menu Modules At this point, we've got the Menu and Menu Items done. Now we need to create the Menu Modules. In Joomla!, the Menu Module determines three main things: (1) what the menu looks like; (2) where on the page it will show; and (3) on which pages it will show. We will do two Σελίδα 64 από 69

65 examples. In the first example, we will create one Menu Module that shows all of the items in one menu. In the second, we will create three separate menu modules to show the Pets, Dogs, and Cats menus as separate modules. One Menu Module To show this as one module, follow these steps: 1. Navigate to Extensions Module Manager, click the "New" icon in the toolbar, and select "Menu". 2. Enter the Title as "Pets Menu" and Position as "left". 3. In the Menu Assignment, enter "Select Menu Item(s) from the List" and select "Home" (under "mainmenu"), and all of the Menu Items under the "pets-menu". 4. In Menu Name, select "pets-menu" from the drop-down list box. 5. If you are using the default "rhuk_milkyway" template and want the menu to look like the other menus, in the Advanced Parameters enter "_menu" for Module Class Suffix. Now, navigate to the front-end home page. You should see the Pets Menu as shown below: Click on the Dogs Menu Item. The selected article displays and the Dogs menu expands to show the two submenu items, Collies and Greyhounds. Note that we can set a parameter in the Module Manager to always show submenu items. Here we have taken the default value of "No". Click on "Collies" and again the article changes. (Or it would if we had different articles for each Menu Item!) The screen should look like the one below: Notice that the Breadcrumbs now shows three levels: Home, Dogs, Collies. Because we used submenus, Joomla! "knows" that Collies is under Dogs. Σελίδα 65 από 69

66 Separate Menu Modules Now we will change our example to create three separate menus -- one for the top level (Dogs and Cats), one for the Dogs (Collies and Greyhounds), and one for the Cats (Tabbies and Siamese). Note: Make sure that your Menu Items each have a unique Alias value. If you use the Copy command in the toolbar of the Menu Item Manager to create these Menu Items, the Alias will be the same as the item being copied. In this case, just edit the Alias value to make it unique (for example, the same as the Title). If you have duplicate Alias values, the menus will not work correctly if the parameter SEF URLs is set to Yes in Global Configuration. To do this: 1. Open the Pets Menu in the Module Manager and change the Title to "Pets Menu Top Level Only". 2. Select the Left Position. 3. Under Module Parameters, select the Menu Name "Pets Menu" 4. Under Module Parameters, change the Menu Style to "List". 5. Set the Start Level to "0" and the End Level to "1". 6. This is optional. It allows your template to apply special a menu style to the menu (a border, for example). In Advanced Module Parameters put "_menu" in Module Class Suffix. 7. For submenu Dog, in extensions menu select Module Manager, click New and select Menu, and set the title to "Dogs Submenu". 8. Set the Position to "Left". 9. Now this part is very important. We only want this submenu to show when we are in one of the Dogs Menu Items. So, in the Menu Assignment box, select the three items "Dogs", "Collies", and "Greyhounds", as shown below: 10. Under Module Parameters, select the menu name "Pets Menu" and change the Menu Style to "List". 11. Set the Start Level to "1" and End Level "2". 12. This is optional. In Advanced Module Parameters, set Module Class Suffix to "_menu". Σελίδα 66 από 69

67 13. For the "Cats Submenu", repeat steps from 7 to 12 except step 9. In the Menu Assignment box, select the items "Cat", "Tabbies" and "Siamese" (so this menu will only show under these Menu Items). At this point, we have three menu modules all pointing to the Pets Menu. The only differences between them are (1) the Start and End Levels and (2) the Menu Item Assignment. Now, in the front end, navigate to the Home page. The "Pets Menu Top Level Only" menu should show. Select the "Dogs" Menu Item. Now, the "Dogs Submenu" should show as a separate menu, as shown below: Click on the Collies Menu Item and notice that again the Breadcrumbs shows the hierarchy of "Home", "Dogs", and "Collies". Using this same technique, it is easy to create third-level submenus. You just make the Parent Menu Item a second-level submenu. Then you could use the same technique to create a separate Menu Module with Start Level of 2 and End Level of 3. This would show only the thirdlevel Menu Items. Σελίδα 67 από 69