Κορινθόραμα

WEB TUTORIALS :: Joomla 1.6

Δημιουργώντας το backend ενός απλού Component

Εισαγωγή

Το βοήθημα αυτό έχει ως σκοπό να προσεγγίσει την φιλοσοφία της δημιουργίας ενός απλού component στο νέο Joomla 1.6 (Beta). Αποτελεί μια απλοποιημένη έκδοση στα ελληνικά του επίσημου tutorial που μπορείτε να βρείτε στο joomla.org.
Η έκδοση αυτή δεν συμπεριλαμβάνει τους τομείς του verification και του configuration και θα ασχοληθούμε πρώτα μόνο με το τμήμα του backend (administration panel). Με τον τρόπο αυτό προσπαθούμε να το διατηρήσουμε minimum και απλό, εστιάζοντας στην αρχιτεκτονική της κατασκευής του.

Από την έκδοση 1.6 το Joomla επικεντρώνεται αποκλειστικά στο MVC (Model - View - Controller), ως αρχιτεκτονική δημιουργίας του κώδικα. Τι είναι όμως το MVC;

Επιγραμματικά,

  • Model : Κώδικας που σχετίζεται με την βάση δεδομένων (διαχείριση των data, read - write - delete).
  • View: Κώδικας που σχετίζεται με την δημιουργία διάφορων views (layouts - διαφορετικές απεικονίσεις των δεδομένων).
  • Controller: Κώδικας που λαμβάνει εντολές και δρομολογεί την ροή του λογισμικού, συνδέοντας τα models και τα views.

Το component που θα δημιουργήσουμε θα διαχειρίζεται κατηγοριοποιημένα μηνύματα τύπου "Hello World"
Όνομα Component: helloworld

download the component

Download Component

 

Προετοιμάζοντας το “έδαφος”

Κάθε component το δημιουργούμε σε ένα ανεξάρτητο φάκελο εκτός Joomla και όταν τελειώσουμε, τα περιεχόμενά του τα συμπιέζουμε σ' ένα zip για να δημιουργήσουμε το installation archive.
Σε κάθε φάκελο που δημιουργούμε στο Joomla, τοποθετούμε για λόγους ασφαλείας ένα index.html με το εξής περιεχόμενο:

Κώδικας του index.html:

code

Αυτό θα ισχύσει και για κάθε επόμενη αναφορά για δημιουργία φακέλου!

Δημιουργούμε λοιπόν ένα φάκελο "helloworld" και εκεί μέσα έναν υποφάκελο "admin" αφού θα αναπτύξουμε το backend τμήμα του component.

helloworld.php

Το εκκινητήριο αρχείο πρέπει να έχει το όνομα του component. Δημιουργούμε το helloworld.php

helloworld/admin/helloworld.php
Κώδικας:

code

Το εκκινητήριο αρχείο ενεργοποιεί τον γενικό controller του component, τον εκτελεί με παράμετρο την τιμή της μεταβλητής $_REQUEST['task'] και αν έχει οριστεί, εκτελεί το σχετικό redirect σε άλλη σελίδα. Τον γενικό controller θα τον αναζητήσει η εφαρμογή μέσα στο αρχείο controller.php. Ας το δημιουργήσουμε:

controller.php

helloworld/admin/controller.php
Κώδικας:

code

Ο γενικός controller όταν πάρει εντολή από το προηγούμενο αρχείο να εκτελεστεί, θα καλέσει αυτόματα την function display().
Η function αυτή θέτει τιμή στην μεταβλητή $view ίση με την τιμή της $_REQUEST['view'] και αν δεν έχει οριστεί κάποια τιμή, θέτει ως default τιμή την "HelloWorldList". Αυτό είναι το όνομα του view που θα αναλάβει να απεικονίσει την λίστα των μηνυμάτων.
Στη συνέχεια δίνεται εντολή να απεικονιστεί το συγκεκριμένο View (θα αναλύσουμε στη συνέχεια τα Views).
Τέλος συμπεριλαμβάνουμε ένα helper αρχείο το οποίο θα προσθέσει ένα submenu με όνομα "messages". Η require_once() αναζητεί το αρχείο helloworld.php μέσα στον φάκελο "helpers". Ας τα δημιουργήσουμε:

helpers/helloword.php

helloworld/helpers/helloworld.php
Κώδικας:

code

Η addSubmenu() δημιουργεί δύο υπομενού (κάτω από το toolbar του backend), με ονόματα "Messages" και "Categories" (όταν μεταφραστούν από την JText) και ορίζει τα links τους. Το link που οδηγεί στις κατηγορίες καλεί το com_categories, με αποτέλεσμα αυτό να αναλάβει την διαχείριση των κατηγοριών, χωρίς να δημιουργήσουμε εμείς δικό μας κώδικα!
Μετά προσθέτει την κλάση ".icon-48-helloworld" στο css αρχείο μας, με σκοπό να εμφανίσει ένα εικονίδιο 48Χ48 pixels δίπλα στον τίτλο. Αν η function κληθεί με όρισμα "categories" θα ορίσει τους σχετικούς τίτλους στο backend και στον browser.

views/hellowordlist/view.html.php

Ας επανέλθουμε λοιπόν στα Views.
Στο Joomla ορίζουμε από ένα View για κάθε ενότητα του component που θέλουμε να απεικονίσουμε. Στο συγκεκριμένο component θα έχουμε δύο διαφορετικά Views, το "HelloWorldList" που θα απεικονίζει μια λίστα των μηνυμάτων ώστε να επιλέγουμε αυτό που θέλουμε να επεξεργαστούμε, και το "HelloWorld" που θα απεικονίζει την φόρμα για την προσθήκη ή την επεξεργασία μηνυμάτων.
Κάθε View για να απεικονίσει τα περιεχόμενά του, χρειάζεται και ένα layout, ένα template δηλαδή που θα παράγει τον απαιτούμενο html κώδικα. Μπορούμε να ορίσουμε περισσότερα από ένα layout για κάθε View (το καθένα με το δικό του όνομα) αλλά minimum χρειαζόμαστε ένα με όνομα συνήθως "default.php". Είναι αυτό που θα αναζητήσει το Joomla αν δεν έχουμε ορίσει κάποιο όνομα για layout του View.
Τα Views στο Joomla αποθηκεύονται σε ξεχωριστούς φακέλους μέσα στον φάκελο "views". Δημιουργούμε λοιπόν ένα φάκελο με όνομα "views" και εκεί μέσα έναν υποφάκελο με το όνομα του πρώτου view που θέλουμε, "helloworldlist".
Κάθε view έχει ως εκκινητήριο αρχείο το view.html.php μέσα στο σχετικό φάκελο. Δημιουργούμε το view.html.php

helloworld/admin/views/helloworldlist/view.html.php
Κώδικας:

code

Όταν ο γενικός controller καλέσει το view με όνομα "helloworldlist", θα εκτελεστεί αυτόματα η function display() της class HelloWorldViewHelloWorldList που κληρονομεί τα στοιχεία της JView class του Joomla. Το όνομα της class αποτελείται πάντα από το όνομα του component ("HelloWorld") + το keyword "View" + το όνομα του συγκεκριμένου view ("HelloWorldList").
Η class αυτή ορίζει δύο protected objects με ονόματα $items και $pagination. Στο πρώτο θα αποθηκευτούν τα προς απεικόνιση μηνύματα και το δεύτερο θα αναλάβει το pagination.
Το πρώτο που κάνει η display() είναι να ζητά τα μηνύματα ώστε να τα αποθηκεύσει στην $items.
Αφού πάρουμε τα δεδομένα (θα δούμε παρακάτω πώς) και τα αποθηκεύσουμε στην $items, το Joomla θα δημιουργήσει αυτόματα το σχετικό pagination, θα το αποθηκεύσει στην $pagination και θα ενσωματώσει τα δύο αυτά αντικείμενα στο τρέχων View ($this).

Στη συνέχεια θα δημιουργήσουμε τα εικονίδια του toolbar (delete, edit, add) και θα ορίσουμε τον τίτλο του toolbar. Βλέπουμε πως χρησιμοποιούμε το string 'com_helloworld_Manager' μέσω της JText. Έτσι το Joomla θα αναζητήσει αυτό το string στο language ini file του component ώστε να το μεταφράσει κατάλληλα στην επιλεγμένη γλώσσα. Το δεύτερο όρισμα ('helloworld') θα χρησιμοποιηθεί ως τμήμα του ονόματος κάποιας css κλάσης που θα εμφανίσει το εικονίδιο του component δίπλα στον τίτλο.
Σε κάθε εικονίδιο του toolbar, αντιστοιχεί και το αντίστοιχο task που πρέπει να εκτελεσθεί όταν αυτό πατηθεί. Τα συγκεκριμένα tasks είναι helloworldlist.remove, helloworldlist.edit και helloworldlist.add για διαγραφή, επεξεργασία και προσθήκη αντίστοιχα. Τα tasks αποτελούνται από δύο ονόματα χωρισμένα με τελεία. Το πρώτο είναι το όνομα του MVC που θα αναλάβει και το δεύτερο η τιμή που θα έχει η μεταβλητή $task στο REQUEST.
Υπεύθυνοι για την εκτέλεση αυτών των tasks, είναι οι εξειδικευμένοι controllers που θα δημιουργήσουμε αργότερα και θα αντιστοιχούν στα ανάλογα models ("helloworld" και "helloworldlist").

Τέλος θα δωθεί εντολή να απεικονιστεί το συγκεκριμένο View χρησιμοποιώντας ως layout (template) την τιμή της $tpl και θα οριστεί ο τίτλος στον browser. Αν δεν έχει τιμή η $tpl θα αναζητηθεί εξ ορισμού το default.php.

views/hellowordlist/tmpl/default.php

Τα layout αρχεία πρέπει να βρίσκονται σε ένα φάκελο "tmpl" μέσα στον ανάλογο φάκελο του view που θα τα καλέσει. Δημιουργούμε λοιπόν ένα φάκελο "tmpl" και εκεί μέσα το default.php.

helloworld/admin/views/helloworldlist/tmpl/default.php
Κώδικας:

code

Βλέπουμε πως το συγκεκριμένο αρχείο δημιουργεί μια form με περιεχόμενα τις εγγραφές μας και τα ανάλογα checkboxes.

Είναι ώρα να δούμε όμως πώς διαβάζουμε τα δεδομένα από την database μας.
Όπως είπαμε και στην αρχή, για τα δεδομένα είναι υπεύθυνο το Model. Πρέπει να ορίσουμε το Model το οποίο θα επιστρέφει τα δεδομένα στο συγκεκριμένο View που τα ζητάει.
Τα Models στο Joomla αποθηκεύονται σε ένα φάκελο με όνομα "models". Χρειαζόμαστε ένα model για κάθε view και το αρχείο που θα το περιέχει πρέπει να είναι ίδιο με το όνομα του View. Δημιουργούμε λοιπόν το helloworldlist.html μέσα στον φάκελο "models"

models/hellowordlist.php

helloworld/admin/models/helloworldlist.php
Κώδικας:

code

Όταν το view ζητήσει τα δεδομένα από το model του με get('Items'), θα εκτελεστεί αυτόματα η function getListQuery() της class HelloWorldModelHelloWorldList που κληρονομεί τα στοιχεία της JModelList class του Joomla. Το όνομα της class αποτελείται πάντα από το όνομα του component ("HelloWorld") + το keyword "Model" + το όνομα του συγκεκριμένου model ("HelloWorldList").
Η getListQuery() στην περίπτωση αυτή, θα εκτελέσει το query "select id, greeting from #__helloworld" και θα επιστρέψει τα αποτελέσματα στο view που έκανε το request. To #__ ειναι αναφορά στο εκάστοτε ισχύoν πρόθεμα των πινάκων του Joomla (συνήθως "jos_"). Τον πίνακα αυτόν θα τον δημιουργήσει όπως θα δούμε αργότερα το installation package μας κατά την εγκατάσταση του extension.

Η function remove() είναι υπεύθυνη στο να διαγράψει όσα μηνύματα έχουμε τσεκάρει με τα αντίστοιχα checkboxes αν πατήσουμε από το toolbar το Delete. Η συγκεκριμένη function θα κληθεί από τον εξειδικευμένο controller που θα αντιστοιχεί στο συγκεκριμένο model.

Η $selected έχει τις επιλεγμένες εγγραφές και η $table περιέχει την δομή του table. Η δομή αυτή θα αναζητηθεί στο αρχείο "helloworld.php" που πρέπει να δημιουργήσουμε στη συνέχεια μέσα σε ένα φάκελο με όνομα "tables", όπως θα δούμε παρακάτω.
Στο loop που ακολουθεί η $table->load($id) θα καλέσει το row με το συγκεκριμένο id και αν δεν υπάρχει η εγγραφή, θα οριστεί το σφάλμα που θα εμφανιστεί στον χρήστη και η function θα επιστρέψει false.
H $table->delete() θα επιχειρήσει να διαγράψει την συγκεριμένη εγγραφή και αν για οποιοδήποτε λόγο παρουσιαστεί κάποιο σφάλμα, η function θα επιστρέψει και πάλι false αφού οριστεί και πάλι το συγκεκριμένο σφάλμα. Αν όλα εξελιχθούν ομαλά και διαγραφεί η συγκεκριμένη εγγραφή, τότε η function ολοκληρώνει επιτυχώς την αποστολή της, επιστρέφοντας true!

H function populateState() θα εκτελεστεί αυτόματα κάθε φορά που θα κληθεί αυτό το model, θα συγκεντρώσει όλα τα επιλεγμένα id και θα ορίσει τις απαραίτητες για το pagination παραμέτρους.

tables/helloword.php

Ας δούμε τώρα πώς ορίζουμε την δομή του mysql πίνακά μας, ώστε να μπορέσει να αποθηκευθεί στην $table όπως είδαμε στην function remove(). Δημιουργούμε τον φάκελο "tables" και εκεί μέσα το αρχείο helloworld.php. Με τον τρόπο αυτό η getTable('helloworld') θα αναζητήσει την δομή του πίνακά μας στο αρχείο helloworld.php μέσα στον φάκελο "tables".

helloworld/admin/tables/helloworld.php
Κώδικας:

code

Η ονομασία της class αποτελείται από το keyword "Table" + το όνομα του mySQL πίνακα ("HelloWorld").
Ορίζουμε κάθε πεδίο του πίνακά μας ως μεταβλητές της class ($id, $greeting, $catid) και καλείται ο μητρικός (JTable) constructor με ορίσματα το όνομα του πίνακα και το πρωτεύων κλειδί (id).

Μέχρι το σημείο αυτό, ολοκληρώνουμε την εμφάνιση των μηνυμάτων και των κατηγοριών. Έχουμε έτοιμα και τα σχετικά εικονίδια για προσθήκη, επεξεργασία ή διαγραφή των μηνυμάτων. Στη συνέχεια θα δημιουργήσουμε τα κατάλληλα αρχεία που θα αναλάβουν αυτές τις ενέργειες.

controllers/helloworldlist.php

Όπως είπαμε και προηγουμένως, όταν πατιέται ένα button του toolbar, υπεύθυνος για να αναλάβει την ενέργεια, είναι ένας εξειδικευμένος controller που διασυνδέεται με το κατάλληλο model.
Δημιουργούμε ένα φάκελο με όνομα "controllers" και εκεί μέσα ένα αρχείο με ίδιο όνομα με αυτό του αντίστοιχου model ("helloworldlist.php").

helloworld/admin/controllers/helloworldlist.php
Κώδικας:

code

Το όνομα της class αποτελείται πάντα από το όνομα του component ("HelloWorld") + το keyword "Controller" + το όνομα του συγκεκριμένου model ("HelloWorldList").
Ο συγκεκριμένος controller είναι υπεύθυνος για τις διαγραφές, μέσω της function remove().
Η πρώτη ενέργεια είναι να εκτελεστεί η remove() του αντίστοιχου model. Ανάλογα με το αν η ενέργεια είναι επιτυχής ή όχι, ορίζονται το περιεχόμενο και ο τύπος του μηνύματος που θα εμφανιστεί μετά το redirect της σελίδας, και ορίζεται το redirect στην αρχική σελίδα του component. Tα redirects που ορίζουμε, θα εκτελεστούν από το εκκινητήριο αρχείο του component, helloworld.php (θυμηθείτε την τελευταία εντολή $controller->redirect();)

Ολοκληρώνουμε έτσι το τρίπτυχο Model View Controller (MVC) με όνομα "helloworldlist" που είναι υπεύθυνο για την εμφάνιση της λίστας και των ενεργειών που εκτελούνται από αυτήν (διαγραφή μηνυμάτων).

controllers/helloworld.php

Για την προσθήκη και επεξεργασία των μηνυμάτων, θα χρειαστούμε άλλο ένα τρίπτυχο MVC με όνομα "helloworld".
Αυτό σημαίνει πως πρέπει να δημιουργήσουμε:
Ένα αρχείο helloworld.php μέσα στον φάκελο "models"
Ένα αρχείο helloworld.php μέσα στον φάκελο "controllers"
Ένα φάκελο "helloworld" μέσα στον φάκελο "views" και τον ανάλογο υποφάκελο "tmpl". Μέσα στον φάκελο "helloworld" δημιουργούμε ξανά ένα αρχείο "view.html.php" και μέσα στον υποφάκελο "tmpl" δημιουργούμε ένα αρχείο "default.php".

Πάμε να τα δούμε ένα-ένα. Κατ' αρχήν ο controller που θα δεχθεί τα add και edit request από το toolbar (helloworld.add, helloworld.edit)

helloworld/admin/controllers/helloworld.php
Κώδικας:

code

Όταν ο χρήστης πατήσει add ή edit, τότε το toolbar θέτει την ανάλογη τιμή στην μεταβλητή $task του REQUEST και καλεί την ομώνυμη function του ανωτέρω controller. Ο constructor της class HelloWorldControllerHelloWorld καταχωρεί την ενέργεια "add" και την εξισώνει με την "edit". Αυτό το κάνουμε γιατί θέλουμε να εκτελεστεί η ίδια φόρμα και για edit και για add. Με τον τρόπο αυτό όταν η $task θα έχει την τιμή "add" το Joomla δεν θα αναζητήσει την function add() αλλά θα εξυπηρετήσει το αίτημα μέσω της edit().

Η function edit() θα ενεργοποιήσει το αντίστοιχο model και view και θα περάσει τον έλεγχο στην view.html.php του συγκεκριμένου view.

Η function save() θα δώσει εντολή στο ανάλογο model να αναλάβει την αποθήκευση των δεδομένων (αφού εκτελεστεί το view και πατήσει save ο χρήστης).
Αν η αποθήκευση είναι επιτυχής, ετοιμάζουμε το ανάλογο μήνυμα και ορίζουμε το επόμενο redirect της σελίδας.
Σε αντίθετη περίπτωση, ορίζουμε το μήνυμα σφάλματος που θέλουμε να εμφανιστεί και καλούμε ξανά το ίδιο View ώστε να απεικονίσουμε ξανά την φόρμα και το μήνυμα σφάλματος της προηγούμενης ενέργειας.

Η function cancel() είναι η απλούστερη, αφού το μόνο που έχουμε να κάνουμε, είναι να ορίσουμε το επόμενο redirect με το σχετικό μήνυμα που έχουμε ορίσει στο language ini του component μας.

models/helloworld.php

Στη συνέχεια θα δούμε το αντίστοιχο model.

helloworld/admin/models/helloworld.php
Κώδικας:

code

Το model αυτό είναι υπεύθυνο για να επιστρέψει τα δεδομένα ενός συγκεκριμένου id για την φόρμα του view, να αποθηκεύσει τα δεδομένα αν πατηθεί το "Save" από τον χρήστη και να επιστρέψει την δομή των πεδίων της φόρμας όταν την ζητήσει το view. Για να διαβάσει το Model μας την δομή της φόρμας, θα πρέπει όπως θα δούμε παρακάτω, να δημιουργήσουμε ένα xml αρχείο με όνομα helloworld.xml μέσα σε έναν υποφάκελο του "models" με όνομα "forms" (models/forms).

Η function getData() θα ελέγξει πρώτα για να δει αν η κλήση έγινε πριν δημιουργηθεί η φόρμα, ώστε να επιστραφούν τα δεδομένα του query "select * from #__helloworld where id=(int)$selected[0]". Επειδή μπορεί ο χρήστης να έχει επιλέξει περισσότερα checkboxes πριν πατήσει "Edit", λαμβάνουμε υπ' όψη μόνο το πρώτο από τα id ($selected[0]).
Αν πατηθεί το "Add" τότε το id θα έχει την default τιμή "0" από την JRequest::getVar('cid', 0, '', 'array'), οπότε η $data θα επιστρέψει κενή και τα πεδία της φόρμας δεν θα έχουν περιεχόμενο.
Στο τέλος της διαδικασίας η $data θα επιστρέψει ανάλογα τις εξής τιμές:
Αν έχει πατηθεί το "save" η $data = & JRequest::getVar('jform'); (ένα array με τα περιεχόμενα της φόρμας προς αποθήκευση)
Αν έχει πατηθεί το "edit" η $data = & $db->loadAssoc(); (ένα array με τα περιεχόμενα της εγγραφής στην βάση δεδομένων)
Αν έχει πατηθεί το "add" η $data = "" (κενή περιεχομένου)

Η function save() θα καλέσει την getData ώστε να της επιστραφούν τα δεδομένα της φόρμας, θα δημιουργήσει ένα instance της δομής του table μας και θα αποθηκεύσει τα δεδομένα επιστρέφοντας true on success ή false on failure. Βλέπουμε πως σε περίπτωση αποτυχίας προετοιμάζουμε το σύστημα για την εμφάνιση του σφάλματος που προέκυψε.

models/forms/helloworld.xml

Ας δούμε τώρα πώς δημιουργούμε την δομή της φόρμας μας για να λειτουργήσει σωστά η getForm() του model.
Δημιουργούμε έναν υποφάκελο "forms" μέσα στον φάκελο "models".
Στη συνέχεια δημιουργούμε το "helloworld.xml".

helloworld/admin/models/forms/helloworld.xml
Κώδικας:

code

Το xml αυτό περιγράφει τα πεδία μας με λεπτομέρεια, ώστε να είναι σε θέση να δημιουργήσει την αντίστοιχη φόρμα, το layout php αρχείο του view "helloworld" (views/helloworld/tmpl/default.php).
Πριν φτάσουμε όμως στο layout, ο controller μας θα καλέσει το εκκινητήριο αρχείο του view "helloworld", το "view.html.php".
Ας δούμε τα περιεχόμενα του:

views/helloworld/view.html.php

helloworld/admin/views/helloworld/view.html.php
Κώδικας:

code

Όταν πατηθεί το "Add" ή το "Edit", θα εκτελστεί η display() η οποία θα πάρει την φόρμα και τα δεδομένα από το model, θα αντιστοιχίσει τα δεδομένα στα πεδία της φόρμας και θα προετοιμάσει την φόρμα για το layout.
Στη συνέχεια θα ορίσει το νέο toolbar με επιλογές το "Save" και το "Cancel" μέσω της setToolBar(), θα ορίσει τους σχετικούς τίτλους μέσω της setDocument() και θα απεικονίσει την φόρμα μέσω του default layout.

views/helloworld/tmpl/default.php

Η δημιουργία φορμών στο Joomla 1.6 έχει γίνει απλούστατη και με semantic κώδικα πλέον. Ας δούμε το default.php του template αυτού του View.

helloworld/admin/views/helloworld/tmpl/default.php
Κώδικας:

code

Ο κώδικας έχει γίνει απλούστατος πλέον και είναι πασιφανές πώς μπορούμε να προσθαφαιρούμε πεδία πανεύκολα, αλλάζοντας μόνο το xml της φόρμας (helloworld/models/forms/helloworld.xml), την δομή του table μας (helloworld/admin/tables/helloworld.php) και τροποποιώντας φυσικά ανάλογα και την βάση δεδομένων.
Όπως βλέπουμε, ορίζουμε ενα fieldset με τον legend τίτλο του, και συνεχίζουμε με ένα loop σε όλα τα πεδία της φόρμας.
Ελέγχουμε αν το πεδίο είναι hidden ώστε να μην εμφανίσουμε label, και ανάλογα δημιουργούμε όλα τα ζευγάρια (labels και inputs). Προσθέτουμε και το task που θέλουμε να εκτελεστεί μετά το submit (helloworld.edit) και είμαστε έτοιμοι!

Προετοιμασία για το installation package

Ας δούμε τώρα πώς θα δημιουργήσουμε το zipαρισμένο installation package για το component μας.
Χρειάζεται να ασχοληθούμε με τέσσερα ακόμα θέματα.
Την δημιουργία Language Definition όπου θα αναφέρουμε την μετάφραση των κωδικοποιημένων αναφορών που χρησιμοποιήσαμε με την JText_().
Την δημιουργία των SQL αρχείων που θα διαχειριστούν την εγκατάσταση και την απεγκατάσταση του component.
Την δημιουργία των PNG εικονιδίων του component.
Το manifest XML το οποίο θα περιέχει τις κατάλληλες οδηγίες στο Joomla για την σωστή εγκατάσταση.

languages/en-GB/en-GB.com_helloworld.ini

Δημιουργούμε για την γλώσσα τον φάκελο "language" μέσα στον φάκελο "admin", και εκεί μέσα έναν υποφάκελο "en-GB". Ως περιεχόμενα θα δημιουργήσουμε το αρχείο "en-GB.com_helloworld.ini" με τα ακόλουθα περιεχόμενα:

code

Παρατηρούμε πως αν και μέσα στα αρχεία μας, οι αναφορές στην γλώσσα ήταν με πεζούς χαρακτήρες (πχ com_helloword_categories), εδώ πρέπει να είναι με κεφαλαία. Επίσης απαγορεύονται τα κενά οπότε τα συμπληρώνουμε με underscores ( _ ).
Το Joomla κατά την εκτέλεση, θα αντικαταστήσει όλες τις αναφορές με τις αντίστοιχες μεταφράσεις που θα βρει σ' αυτό το αρχείο.
Το όνομα του αρχείου αποτελείται πάντα από τα ISO αρχικά της γλώσσας, μια παύλα, το όνομα του component με πρόθεμα το "com_" και την επέκταση ".ini".
Αν θελήσουμε να δημιουργήσουμε τις αντίστοιχες ελληνικές μεταφράσεις, το αρχείο θα ήταν το "el-GR.com_helloworld.ini" μέσα στον φάκελο "el-GR".

Δημιουργία των SQL αρχείων

Για την δημιουργία των SQL αρχείων, θα δημιουργήσουμε τον υποφάκελο "sql" μέσα στον φάκελο "admin".
Χρειαζόμαστε τουλάχιστον δύο αρχεία, ένα για εγκατάσταση (install) και ένα για απεγκατάσταση (unistall).
Τα ονόματά τους αντίστοιχα θα είναι "install.mysql.utf8.sql" και "uninstall.mysql.utf8.sql" και θα εκτελεστούν κατά την εγκατάσταση του component από το Joomla.
Ας τα δημιουργήσουμε:

sql/install.mysql.utf8.sql

helloworld/admin/sql/install.mysql.utf8.sql
Κώδικας:

code

Μετά την εκτέλεση θα δημιουργηθεί ο πίνακας jos_helloworld (ή με όποιο άλλο πρόθεμα πινάκων έχετε επιλέξει στο δικό σας σύστημα) με τρία πεδία, το id, το greeting και το catid. Στη συνέχεια θα καταχωρηθούν και δύο δοκιμαστικές εγγραφές με τιμές "Hello World!" και "Good Bye World!".

sql/uninstall.mysql.utf8.sql

helloworld/admin/sql/unistall.mysql.utf8.sql
Κώδικας:

code

Διαγραφή του πίνακα, σε περίπτωση απεγκατάστασης του component.

Εικονίδια για την εφαρμογή μας

icon 16x16icon 48x48Περνάμε τώρα στα εικονίδια.
Στο root φάκελό μας ("helloworld"), δημιουργούμε τον φάκελο "media" και εκεί μέσα έναν υποφάκελο "images". Μέσα στον φάκελο "images" τοποθετούμε δύο PNG εικονίδια, το ένα 16X16 pixels και το άλλο 48X48 pixels.
Τα ονόματά τους αντίστοιχα, θα είναι "16x16.png" και "48x48.png".
Το Joomla κατά την εγκατάσταση θα αντιγράψει τα εικονίδια στη σωστή τους θέση ώστε να χρησιμοποιηθούν από το σύστημα. Το μικρό εικονίδιο θα εμφανίζεται στο menu του backend και το μεγάλο θα εμφανίζεται δίπλα στον τίτλο του toolbar.

helloworld.xml (Οδηγίες Εγκατάστασης)

Το τελευταίο που έχουμε να κάνουμε, είναι η δημιουργία του manifest xml που θα περιέχει τις οδηγίες εγκατάστασης.
Δημιουργούμε στο root το "helloworld.xml".

helloworld/helloworld.xml
Κώδικας:

code

Βλέπουμε πως αφού συμπληρώσουμε τις γενικές πληροφορίες, υπάρχει το install > sql > file όπου αναφέρουμε την SQL που θα τρέξει κατά την εγκατάσταση. Αντίστοιχα στο unistall > sql > file ορίζουμε την SQL που θα τρέξει στην απεγκατάσταση.

Στη συνέχεια ενημερώνουμε το Joomla πως τα media του "com_helloworld" βρίσκονται στον φάκελο "media" ο οποίος περιέχει το αρχείο "index.html" και τον φάκελο "images".
Στην ενότητα <administration> συμπεριλαμβάνουμε τις πληροφορίες σχετικά με το εικονίδιο που θα χρησιμοποιηθεί στο menu και ενημερώνουμε το Joomla για τα αρχεία που πρέπει να εγκαταστήσει στο backend. Γίνεται αναφορά στα αρχεία και στους υποφακέλους του φακέλου "admin". Τα περιεχόμενα των υποφακέλων του "admin", θα εντοπιστούν και θα εγκατασταθούν αυτόματα. Τέλος συμπεριλαμβάνουμε και τις πληροφορίες που αφορούν τα στοιχεία γλώσσας του component.

Δημιουργία του installation package

Έφτασε η ώρα, να δημιουργήσουμε το installation archive package του component μας, για να είναι δυνατή η εγκατάστασή του από το "Extension Manager" του Joomla!
Μετά την συμπίεση, το zip file μας (πχ "helloworld.zip") θα πρέπει στο root να περιέχει:

  • admin (φάκελος)
  • media (φάκελος)
  • helloworld.xml

Αν όλα έχουν πάει καλά, μετά την εγκατάσταση θα έχει δημιουργηθεί ένα submenu στο menu "Components" του Joomla Backend.
Μπορείτε να δοκιμάσετε τις λειτουργίες του...

 


Απαγορεύεται η αντιγραφή και η αναδημοσίευση χωρίς την έγγραφη ή ηλεκτρονική άδεια του συγγραφέα.


ΣΥΝΔΕΣΗ ΧΡΗΣΤΗ

Δεν βρέθηκε συνδεδεμένος χρήστης!
Εισάγετε τα στοιχεία εισόδου για να συνδεθείτε