Archivi categoria: JOOMLA

Serie di articoli dedicati a Joomla e ai suoi plugin.

JOOMLA – TUTORIAL – CREARE UN COMPONENT – FRONT-END

In questo articolo definiamo la parte pubblica del nostro componente. Essa presenta due punti di accesso, uno che consente di avviare una chat con l’operatore previa registrazione e una pagina di gestione delle chat accessibile per l’operatore.

Come già visto per il modulo di amministrazione definiamo il file liveassistant.php che costituisce l’entry point del nostro modulo:

Il file definisce il controller che viene definito nel file controller.php presente nella stessa directory:

Nel file definiamo la classe LiveAssistantController che estende la classe JController. I metodi definiti sono privi dell’implementazione, ognuno potrà scegliere l’implementazione che più preferisce, sia basata su file system che su base dati. La soluzione prevista salva le chat su file system in formato xml riducendo al minimo l’accesso al db.

A questo punto definiamo le view per la parte pubblica e le agganciamo alle voci del menu. Per fare questo è sufficiente aggiungere un file xml nella directory com_liveassistant\site\views\client\tmpl, che definisce il valore della voce del menù:

L’utente potrà aggiungere una voce di menù che punti alla view relativa, stabilendone le regole di accesso. Possiamo rendere l’esperienza più piacevole per l’utente realizzando un modulo dedicato.

Come il componente il modulo presenta un file descrittore xml che descrive la struttura del modulo e definisce l’entry point del modulo, nel nostro caso è il file mod_lvieassistant.php

<?

La sezione config definisce i parametri di configurazione del modulo, nel nostro caso è definito un parametro di tipo radio button che consente di stabilire il tipo di modulo da mostrare. (modulo client o modulo operatore).

Prossimamente rilascerò il package complessivo LiveAssistant, che comprenderà sia il componente che il modulo.

JOOMLA – TUTORIAL – CREARE UN COMPONENT – BACKEND

Nell’articolo di oggi realizzeremo il backend del nostro componente, usando il pattern MVC (Model View Controller). Per chi non lo conoscesse si tratta di uno dei pattern più usati nello sviluppo software, che prevede la separazione della logica di business dal modello di rappresentazione dei dati.

Nel pattern MVC sono presenti le seguenti 3 componenti software:

  • model –> responsabile della gestione del dato (offre i metodi di accesso/modifica al dato)
  • view    –> responsabile della rappresentazione del dato
  • controller  –> gestisce le richieste degli utenti invocando gli oggetti adatti di volta in volta.
In Joomla le classi che implementano il pattern MVC sono:
  • JModel
  • JView
  • JController

Nel nostro caso il compito del componente di back-end sarà quello di gestire i parametri di configurazione del servizio chat, pertanto realizzeremo i seguenti moduli software:

  • un componente Model che offre i servizi di lettura e scrittura sulla tabella descritta nel precedente articolo
  • un componente View che presenta il dato all’utente
  • un componente Controller responsabile di gestire il modello di navigazione e le operazioni richieste dall’utente

Per ogni componente Joomla definisce due entrypoint, uno per la parte pubblica del sito e uno per la parte di amministrazione. Per il componente di amministrazione Joomla definisce entry point un file chiamato componentname.php, disponibile nel path administrator/components/com_componentname/componentname.php.

Nel nostro progetto l’entry point è il file administrator/components/com_liveassistant/liveassistant.php.

All’interno di tale file è presente la regola di definizione del controller

La prima chiamata impedisce l’accesso diretto al file, le chiamate successive definiscono il controller e la regola di redirect in base al parametro task. Joomla cerchà la definizione del controller in un file controller.php presente nella stessa directory dell’entry point. In tale directory viene definita la classe LiveAssistantController che estende JController

In assenza di un task specifico il controller invocherà il metodo display, in modo da invocare la view responsabile della visualizzazione del dato. Joomla cerca le view disponibili nel path component/com_[component_name]/views/[name of view]/, nel nostro caso component/com_liveassistant/views/liveassistant/. Le view sono definite in file view.[view_mode].php, dove il view_mode indica il formato della view, nel nostro caso html.

La nostra view contiene il seguente testo

La View è responsabile di costruire la pagina, in particolare essa aggiunge il titolo alla pagina e alla toolbar e gestisce l’aggiornamento dei parametri della chat. Essa invoca il file tmpl/default.php responsabile di mostrare i dati e i pulsanti per aggiornare i dati. Inoltre nella view sono visibili le chiamata al model. Come si può vedere il model non è espressamente indicato, ma è una classe vhe viene inizializzata cercano la classe LiveAssistantModelLiveAssistant che estende la classe JModel. Tale classe fornisce i metodi di lettura e scrittura al db, come si può vedere nell’estratto

 

Nel prossimo articolo realizzeremo la componente di front-end.

JOOMLA – TUTORIAL – CREARE UN COMPONENT – BASE DATI

Continuiamo la realizzazione del nostro componente di chat definendo la base dati. Nella nostra soluzione la base dati viene usata per conservare i parametri di configurazione della chat e consentirne l’aggiornamento tramite la componente di amministrazione.

Vediamo prima il modello ERD

Gli attributi della tabella sono:

  • id              –> chiave primaria
  • enabled     –> indica se la chat è attiva
  • frequency   –> indica la frequenza in secondi con cui il client deve verificare l’aggiornamento dei dati
  • directory    –> indica la posizione dove verranno salvati le chat
  • mail           –>indica la mail dell’operatore cui verranno inviate le notifiche di richiesta help
  • title            –>indica il titolo della pagina della chat
Definito il modello ERD occorre preparare gli script sql con cui popolare la base dati. Nell’articolo precedente abbiamo definito uno script di installazione e uno di disinstallazione.
  • install.mysql.utf8.sql
  • uninstall.mysql.utf8.sql

Lo script di installazione prevede i seguenti comandi:

In coda alla creazione è previsto l’inserimento in tabella dei valori di default.

Lo script per la disinstallazione prevede semplicemente la rimozione della tabella:

 

Nel prossimo articolo vedremo come realizzare la compoennte MVC per gestire i parametri della configurazione.

JOOMLA – TUTORIAL – CREARE UN COMPONENT – STRUTTURA

Iniziamo una serie di articoli mirati alla realizzazione di un componente che offre una funzionalità Live Assistant da integrare nel nostro sito Joomla 2.5, intesa come funzionalità di supporto chat per gli utenti del sito.

La componente amministrativa consente di configurare le caratteristiche delle chat mentre la componente front-end presenta due funzioni separate:

  • per gli utenti guest deve essere possibile l’avvio di una chat
  • per gli operatori autorizzati deve essere possibile gestire le chat avviate
La configurazione delle chat viene salvata all’interno del database, mentre le chat vengono salvate su file system, in modo da minimizzare gli accessi al database.
Creiamo la nostra directory com_liveassistant e all’interno di essa definiamo il nostro file manifest che definisce la struttura del nostro componente e le operazioni da effettuare in sede di installazione.

 

 
I primi tag sono descrittivi e contengono i dati dell’autore.
Il tag <install> contiene gli script sql che devono essere lanciati in sede di installazione, solitamente contiene gli script sql per la generazione delle tabelle.
Il tag <uninstall> contiene gli script sql che vengono lanciati in sede di disinstallazione, solitamente contiene gli script sql per la rimozione delle tabelle.
Il tag files individua l’insieme di file che costituiscono le funzioni del front-end. Tramite l’attributo folder è possibile specificare un path relativo e al suo interno specifichiamo file e directory da copiare nel nostro front-end
Il tag administration individua l’insieme di file che costituiscono le funzioni del backend.
Il tag languages individua i file per la localizzazione del nostro componente, nel nostro caso stiamo localizzando in italiano e in inglese.
In base a quanto definito nel nostro manifest il nostro componente presenterà la seguente alberatura:
Accedendo alla cartella site è visibile la seguente struttura dati
Mentre accedendo alla cartella admin è visibile la seguente struttura dati
Come potete vedere è presente il file index.html in ogni cartella al fine di minimizzare i rischi di un hacking basato sulla conoscenza del file system del nostro sito.
Compattando la directory principale in formato zip possiamo installare il nostro componente su joomla ottenendo questo effetto
Nel prossimo articolo imposteremo la base dati.

JOOMLA – TUTORIAL – CREARE UN PACKAGE

Inizio una serie di articoli dedicati a Joomla, mirati alla realizzazione di estensioni per joomla. I vari articoli faranno riferimento alla versione 2.5 di Joomla, che è attualmente la versione a supporto LUNGO PERIODO, in attesa dell’uscita della versione 3.5, come è ben visibile in questo articolo.

Per estensione si intende un addon che aggiunge funzionalità al comportamento base di Joomla.

Si distinguono 3 tipi di estensioni che offrono diversi tipi di funzionalità:

  • plugin
  • modulo
  • componente
Il plugin implementa della funzionalità che si attivano al verificarsi di determinati eventi. Ad esempio alcuni plugin offrono l’inserimento di gallerie in articolo invocandoli tramite tag: {tag}nome_gallery{/tag}, altri invece completano le informazioni scambiate con il server tramite query aggiuntive.
Il modulo è un elemento di contenuto e occupa posizioni ben precise all’interno del nostro sito. Un esempio di modulo è il menù di navigazione.
Il componente è un elemento che aggiunge nuove funzionalità al nostro sito. Esempio di componenti sono le gallery fotografiche, linkabili tramite una voce del menù.
Le estensioni vengono installate su Joomla tramite file zip che contengono i sorgenti e il  file descrittore xml che contiene le indicazioni per una corretta installazione.
E’ possibile raggruppare le estensioni in un unico artefatto detto package. Il package presenta un descrittore xml che contiene le informazioni relative le estensioni all’interno del nostro package.
Immaginiamo di voler realizzare un sistema live assistant, un sistema di chat per gli utenti del sito. In questo sistema sono presenti un componente per la gestione delle chat e un modulo per l’accesso alla funzionalità. Pertanto il nostro package si presenterà come un file zip contenente un descrittore xml pkg_liveassistant.xml e una directory packages contenente gli zip dell’estensione componente e dell’estensione modulo.
Vediamo più in dettaglio la struttura del nostro descrittore:

I tag evidenziati descrivono le estensioni presenti all’interno del package.

Nei prossimi articoli vedremo come realizzare il nostro componente e il nostro modulo.

MOBILE JOOMLA – CREARE LA VERSIONE MOBILE DEL SITO

In questo articolo vedremo un plugin di joomla, molto interessante, che consente con poco sforzo di realizzare una versione del proprio sito per dispositivi mobili. Il plugin in questione si chiama Mobile Joomla ed è disponibile a questo indirizzo previa registrazione.

Il plugin si installa tramite il modulo di upload nella console di amministrazione di Joomla. Una volta installata è sufficiente attivarlo e fare la nostra prima prova di accesso con il nostro smartphone per vedere il nuovo layout.

Per chi fosse già soddisfatto il lavoro termina qui, ma il plugin presenta varie opzioni con cui personalizzare ulteriormente il nostro sito.

Nel momento in cui scrivo la versione consente di gestire fino a 4 profili diversi per altrettanti layout:

  • smartphone
  • iphone
  • wap
  • imode

Per ogni profilo possiamo stabilire un template e le regole per la gestione del layout. Inoltre possiamo anche stabilire delle redirect in base allo smartphone collegato. La logica viene eseguita in base alla useragent del browser, pertanto potete testare il comportamento sul pc usando un plugin che consente di cambiare la useragent del browser. Chrome mette a disposizione tale funzione tra gli strumenti, mentre Firefox richiede un plugin user Agent Switcher, disponibile qui.

Dalla console di Joomla potete modificare i template che Mobile Joomla ha installato in automatico:

  • mobile_imode
  • mobile_iphone
  • mobile_smartphone
  • mobile_wap
Per ognuno di questi potete cambiare il css in modo da rendere il layout coerente con la versione standard del sito.
Buona sperimentazione.

CHRONOCONNECTIVITY – TUTORIAL 1 – CREARE UN REPORT

In questo articolo vedremo l’utilizzo di un altro interessante prodotto per Joomla, ovvero Chronoconnectivity, un componente realizzato dagli stessi autori di Chronoform, che consente di estrarre report da una tabella del nostro database.

Per prima cosa installiamo il nostro componente dal sito, scaricandolo dal link.

Una volta installato sarà disponibile la voce Chrono Connectivity nel menù Componenti. Selezioniamo tale voce e accediamo alla sezione Management dove saranno disponibili i report creati e le funzioni per la loro gestione.

Creiamo un nuovo report. Il sistema carica un sistema a scheda dove è possibile configurare tutti gli aspetti del nostro report. Sono presenti le schede:

  • General
  • FrontEnd Settings
  • Admin Settings
  • Legend
  • Auto generated

La scheda General è divisa a sua volta in più sezioni:

  • General Settings
  • Query Related Settings
  • Connection View Settings
  • Add/Edit/Delete Links

In General Settings possiamo inserire il nome del report che stiamo creando e la tabella del database a cui vogliamo agganciarlo.

In Query Related Settings inseriamo il codice per la gestione dei filtri da applicare alla nostra query. Il form deve essere popolato in maniera tale che restituisca una query sql che inizi con la clausola WHERE. E’ possibile avvalersi di php ottenendo qualcosa del genere:

E’ possibile applicare l’order specificando i campi della tabella separati da ,

In Connection View Settings costruiamo l’aspetto grafico del report. Nella sezione Header definiamo l’intestazione del nostro report in html, è il posto ideale dove aggiungere la sezione filtri. Nella sezione Body definiamo il body del report, questo frammento di codice verrà ripetuto per ogni record della tabella estratto. Con la sintassi {nome_colonna} all’interno della sezione Body possiamo scegliere quale colonna della tabella mostrare. Nella sezione Footer definiamo la chiusura del report, è il posto ideale dove mettere i pulsanti di paginazione.

E’ possibile avvalersi di alcuni tag che chiameranno delle funzioni specifiche del report. I tag supportati sono:

  • {pagination} –> attiva i pulsanti della paginazione (disponibile per la sezione header e footer)
  • {edit_record} –> attiva il link per la modifica del record (disponibile per la sezione body)
  • {delete_record} –> attiva il link per la cancellazione del record  (disponibile per la sezione body)
  • {add_record} –> attiva il link per l’inserimento di un nuovo record  (disponibile per la sezione header e footer)
E’ possibile definire l’aspetto grafico dei link edit_record, delete_record e new_record, inserendo dei frammenti html nei campi opportuni.

Nella scheda FrontEnd Settings stabiliamo quale form va invocato per la modifica del record e le regole di visualizzazione del report e dei suoi pulsanti di gestione del report.

Nella scheda Admin Settings stabiliamo i campi che devono essere visualizzati sul backend, tramite la funzione ShowData disponibile nella sezione Management.

Questo è tutto. Adesso dovreste essere in grado di creare form, collegarli a tabelle del database ed estrarre i dati in base alle vostre esigenze sia sul frontend che sul backend.

Alla prossima

CHRONOFORM – TUTORIAL 4 – UPLOAD FILE

Nell’articolo di oggi vedremo come gestire l’upload di file con Chronoform. Con questa funzione potremmo aggiungere al nostro form dei campi input di tipo file e con facilità configurare tutti i controlli tipici di un capo di tipo file.

Come primo step carichiamo il form manager di Chronoform, selezioniamo il nostro form e accediamo in modalità modifica tramite il Wizard.

Nel wizard selezionamo un componente di tipo FileUpload e con la funzione di drag and drop la aggiungiamo al nostro form. A questo punto configuriamo le properties dell’oggetto e in particolare configuriamo:

  • Allowed Extensions
  • Maximum File Size in KB
E’ necessario configurare queste variabili, in assenza di valori Chronoform impedirà il caricamento del file.
Modificate le variabili e salvato il form, torniamo al form manager, selezioniamo nuovamente il form tramite il pulsante modifica.
Compare il sistema a scheda e selezionamo la scheda File Uploads.
In questa scheda completiamo la configurazione del form. Possiamo stabilire:
  • il path dove i file verranno salvati (Full upload Path)
  • il formato del nome con cui verranno salvati (FileName format)
  • il messaggio di errore per limite dimensione superiore non rispettato (Size Exceeded error)
  • il messaggio di errore per estensione non supportata (Type not allowed error)
  • il messaggio di errore per limite dimensione inferiore non rispettato (Size less error)
A questo punto potete testare il vostro form e verificare il corretto salvataggio nel file system del file caricato secondo le vostre regole.

CHRONOFORM – TUTORIAL 3 – NOTIFICA VIA EMAIL

Può essere utile integrare nel nostro form un sistema di notifica via email, notifica via email che può essere inviata al gestore del sito qualora sia necessario una sua approvazione o all’utente stesso come riepilogo di quanto inserito.

Per fare questo Chronoform ci mette a disposizione una comodo sezione in cui poter definire le caratteristiche della email che vogliamo spedire.

Come primo step carichiamo il form manager di Chronoform, selezioniamo il nostro form e accediamo in modalità modifica.

Il sistema carica il sistema a schede a noi noto e in particolare ci soffermiamo sulle schede General, Setup Email e Emails Template:

  • Nella scheda General ci limitiamo ad abilitare la combo Email the results ?
  • Nella scheda Setup Email creiamo le email da inviare al submit dell’utente
  • Nella scheda Emails Template definiamo il body di ciascuna email definita
E’ possibile definire più email da inoltrare tramite i pulsanti disponibili e per ogni email dobbiamo inserire i parametri essenziali altrimenti la notifica resta disabilitata. I parametri obbligatori sono:
  • To
  • Subject
  • From Name
  • From Email
I campi possono essere recuperati dal form stesso e per far ciò occorre usare nel form i campi definiti come Dynamic.
Se sono aggiunti tutti i campi necessari e se sono popolati correttamente nella sezione email properties viene abilitato il campo Enabled.
A questo punto possiamo salvare e ritornare al form manager. Vedremo nella colonna email il numero di email abilitate e quelle disabilitate.
Se avete operato correttamente troverete enabled:1 e disabled:0.
Andiamo al nostro form, proviamo il submit e riceveremo subito la mail con le caratteristiche scelte.

Di default Chronoform definisce per ogni email un body identifico al form creato. E’ possibile cambiare il testo delle mail agendo sulla scheda Email Template, dove troveremo tante sezioni quante sono le email definite. Per ciascuna mail sarà possibile definire il body della mail tramite un comodo Editor WYSIWYG. I campi dinamici, recuperati dal form, vengono passati nel formato {nomeCampo}.

Buona sperimentazione.

CHRONOFORM – TUTORIAL 2 – CONNETTERE IL FORM AL DATABASE

In questo articolo vedremo come agganciare il form creato nell’articolo precedente ad una tabella del database. Una volta creato il form abbiamo due possibilità:

  • creare una tabella e agganciarla al form creato
  • agganciare il form ad una tabella preesistente.

Vediamo il primo caso. Accediamo alla sezione Forms Management, selezioniamo il nostro form e usiamo la funzione disponibile in alto Create Table. Chronoform aprirà un form per la creazione di una tabella con alcuni campi di audit consigliati. In questo form sarà possibile scegliere il nome della tabella e quali campi del form creato mappare sulla tabella.

Creata la tabella torniamo al nostro form e accediamo alla sezione DB Connection. In questa sezione abilitiamo il data storage e scegliamo dall’elenco la tabella appena creta. A questo punto, una volta pubblicato il form, ogni evento di submit si tradurrà in una insert nella nostra tabella.

Vediamo il secondo caso. Stavolta la tabella è già disponibile e quindi non utilizzeremo la procedura di creazione guidata e relativo mapping. Selezioniamo nuovamente il nostro form e accediamo alla sezione DB Connection. In questa sezione abilitiamo il data storage e scegliamo una tabella preesistente con una sua struttura dati precisa. In questo cosa dobbiamo avere l’accortezza che le property del form abbiamo lo stesso nome dei campi della tabella, altrimenti il rischio è quello di generare tanti record vuoti.