Archivi tag: joomla

JOOMLA

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

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

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

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

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

JOOMLA

CHRONOFORM – TUTORIAL 5 – CREARE FORM DI REGISTRAZIONE PER JOOMLA

Una funzione molto interessante di Chronoform è quella che permette di estendere il modulo di registrazione utente di Joomla.

Si tratta di definire un nuovo form che contenga i campi del form di registrazione di Joomla più i campi fondamentali per il nostro dominio applicativo.In questo form definiamo i campi necessari per Joomla :

  • nome
  • username
  • password
  • retype password
  • email
e aggiungiamo tutti i campi tipici del nostro dominio.
Una volta creato il form e connesso alla tabella del database, colleghiamo il form al processo di registrazione di Joomla.
Il collegamento viene fatto in due fasi:
  • Nella sezione modifica del form accediamo alla scheda plugin e abilitiamo il plugin Joomla Registration
  • Nella sezione Form Management selezioniamo il singolo form tramite la checkbox e accediamo alla funzione Joomla Registration. Il sistema mostrerà un form in cui inserire la corrispondenza tra i campi della tabella utenti di Joomla e quelli del nostro form.
A questo punto possiamo verificare il corretto funzionamento del form. Se abbiamo configurato tutto bene al submit del form vedremo popolarsi sia la tabella utenti di joomla che quella del nostro form.
Ultima cosa che resta da fare è modificare il link del modulo di registrazione affinchè carichi il nostro form e non quello tipico di Joomla.
Per fare questo dobbiamo modificare il file
components/com_user/views/register/tmpl/default.php
e introdurre la redirect verso la nostra pagina agendo sui sorgenti in questo modo
defined(‘_JEXEC’) or die(‘Restricted access’);
$mainframe->redirect(‘register.html’);
Buon lavoro
JOOMLA

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.
JOOMLA

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.

JOOMLA

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.

JOOMLA

CHRONOFORM – TUTORIAL 1 – CREARE UN FORM

Inizia una serie di articoli dedicati a Joomla, il celebre CMS scritto in php, utile per chiunque voglia realizzare un sito web senza avere nozioni di HTML e linguaggi server side. L’uso di Joomla è abbastanza intuitivo, e la documentazione a disposizione è precisa ed esauriente, pertanto non penso di scrivere articoli specifici su questa tecnologia. Mi dedicherò ai vari plugin sviluppati per Joomla che permettono di estendere le funzionalità base di Joomla.

Nel momento in cui scrivo sono presenti le versioni:

  • 1.5
  • 1.6 (versione di transizione, non più supportata)
  • 1.7
La più grande differenza tra le versioni è quella relativa la gestione delle utente, con la 1.7 si sono superati i limiti della 1.5 e l’utente può gestire al meglio le ACL, senza alcuna limitazione.
Il componente analizzato in questo articolo è Chronoform, prodotto dalla ChronoEngine, che consente la creazione di form da inserire nel nostro sito.
Il comportamento base di Joomla prevede il sito come una serie di articoli organizzati in sezioni e categorie, articoli che vengono realizzato tramite il comodo editor messo a disposizione. La realizzazione di un form per l’invio di dati richiede l’uso di un componente esterno e la scelta è caduta su Chronoform, altre valide alternative sono analizzabile sul sito ufficiale delle estensioni.
Attualmente sono disponibili due versioni di Chronoform, la 3 e la 4. La versione 4 è una versione riscritta della 3, che aggiunge nuove funzionalità e la gestione degli eventi al potente wizard messo a disposizione. La versione 4 ha una dipendenza da mootools 1.2, quindi se per qualche motivo non potete soddisfare tale dipendenza ripiegate sulla versione 3.
In questo articolo vediamo la creazione di un form con la versione 3.
Una volta installato, seleziona il Wizard del menù, seguendo il percorso Componente/Chronoform/Form Wizard.
Il sistema carica il form e abbiamo la possibilità di costrutire il form aggiungendo tramite drag&drop i componenti messi a disposizione nel menù laterale.
Aggiungiamo i componenti desiderati e concludiamo inserente il pulsante di Submit che ogni form deve avere.
A questo punto salviamo, specificando il nome del form, e il modulo caricherà l’elenco dei form disponibili.
Il form non è ancora pubblicato, ma è possibile pubblicarlo tramite il pulsante messo a disposizione e verificare con il link messo ben in evidenza la sua visualizzazione.
Una volta pubblicato è possibile richiamare la pagina da menù,specificando l’opzione Chronoform e specificando il nome del form stabilito all’atto del salvataggio.