Realizzare un sito di e-commerce con Joomla e VirtueMart / prima puntata

Tra i software CMS opensource più noti ed utilizzati c’è sicuramente Joomla. Si tratta di un’applicazione che offre la possibilità, a chiunque, di creare un sito web potenzialmente molto ricco di contenuti. Le aree applicative sono le più disparate: Joomla può essere usato per allestire una semplice vetrina di prodotti o realizzare un sito web a carattere informativo. “CMS” è infatti l’acronimo di “content management system” ossia “sistema per la gestione di contenuti”.
La prima versione di Joomla fu rilasciata pubblicamente a fine 2005 mentre la la versione 1.5, tutta nuova, fu lanciata circa due anni dopo.
Joomla è un prodotto molto potente e la sua popolarità sta crescendo anche in forza della semplicità degli strumenti messi a disposizione dell’utente per la gestione dei contenuti.
Tra le principali caratteristiche di Joomla vi sono l’installazione facilitata, la separazione tra i cosiddetti “frontend” e “backend” (ossia, rispettivamente, le pagine ad accesso pubblico e l’area amministrativa vera e propria), il controllo di accesso (Joomla utilizza meccanismi di autenticazione per la gestione delle attività amministrative: è possibile configurare diversi gruppi di utenti, dotati di differenti privilegi), il valido sistema di “templating” (consente la rapida personalizzazione dell’interfaccia di Joomla), la grande estensibilità mediante l’installazione di componenti, plugin e moduli, la possibilità di generare URL “amichevoli” (utilissimi nel caso dei motori di ricerca).

Nel nostro articolo, spiegheremo com’è possibile installare Joomla in un ambiente di test, in ambito locale per poi spostarlo su un server remoto (macchina dedicata oppure gestita da un provider Internet). Ci concentreremo anche sulle possibilità, offerte da Joomla, per la creazione di un sito di commercio elettronico. Per le attività di “e-commerce“, sono disponibili molteplici componenti e moduli appositamente studiati per Joomla.
Tra i tanti prodotti disponibili, abbiamo scelto VirtueMart, un “must” per coloro che desiderano vendere prodotti in Rete. VirtueMart è un componente opensource per Joomla che permette agli amministratori di siti Joomla di allestire un catalogo prodotti, configurare i sistemi di pagamento, le modalità di spedizione e consente di vendere merci e servizi direttamente online.
Così come altre applicazioni analoghe, VirtueMart consente la configurazione di negozi online, le procedura da seguire per la vendita, impostare categorie e cataloghi, gestire clienti ed ordini.

Per la stesura di questo articolo abbiamo utilizzato le più recenti versioni di Joomla (1.5.18) e di VirtueMart (1.1.4).
Ecco i link per il download dei prodotti:
– Joomla (scaricare l’ultima versione “stable” in italiano)
– VirtueMart in inglese (scaricare “complete package for Joomla! 1.5“)
– “Language pack“ per VirtueMart (consente di tradurre in italiano l’interfaccia dell’applicazione).

Installazione della Microsoft Web Platform 2.0

A scopo di test, è possibile utilizzare un sistema Windows sul quale si sia installato la Microsoft Web Platform 2.0, già recensita in queste pagine. Grazie ad essa, infatti, è possibile rendere il web server del colosso di Redmond capace di eseguire, in modo performante, gli script PHP.

Dopo aver installato la Web Platform 2.0 come spiegato in queste pagine (è sufficiente installare IIS, FastCGI, PHP e Windows Cache Extension per PHP; aggiungeremo poi, manualmente, MySQL e Joomla), si crei un file phpinfo.php nella cartella radice di IIS (generalmente c:\inetpub\wwwroot). All’interno di tale file si inserisca quanto segue:

Richiamando tale file dalla barra degli indirizzi del browser, digitando http://localhost/phpinfo.php, dovrebbe comparire una pagina contenente le informazioni sul motore PHP e sulle estensioni attivate.

Requisiti per il funzionamento di Joomla e di Virtuemart sono le seguenti estensioni: mysql/mysqli, libxml, zlib e curl. Com’è possibile notare, tali estensioni risultano già attive in modo predefinito (eventuali variazioni possono essere effettuate intervenendo sul file c:\programmi\PHP\php.ini generato dalla Web Platform 2.0 di Microsoft).

Installazione e configurazione di MySQL

Il database che utilizzeremo per la memorizzazione dei dati trattati da Joomla e VirtueMart è MySQL 5.1.x “Community Server” per Windows. Per procedere al download, è necessario collegarsi con questa pagina e prelevare il file “MSI Installer Essentials” a 32 o 64 bit (a seconda della versione di Windows in uso).

Per avviare la procedura di scaricamento del file, basta cliccare su Download quindi su No thanks, just take me to the downloads e scegliere uno dei server HTTP o FTP in elenco.

Dopo aver prelevato il file d’installazione di MySQL, si dovrà fare doppio clic sul file mysql-essential-5.1.XX-winYY.msi per avviarne il setup.
I primi passi sono piuttosto semplici: basta cliccare su Next, scegliere l’installazione Typical e confermare l’installazione cliccando sul pulsante Install.
Una volta che la procedura di setup avrà copiato sul sistema in uso tutti i file necessari, dopo aver premuto alcune volte il pulsante Next, apparirà la finestra seguente.

Qui, è necessario lasciare spuntata la casella Configure the MySQL Server now e premere Finish. Così facendo verrà avviata la procedura di configurazione passo-passo del DBMS di Oracle.

Cliccando dapprima su Next, si dovrà optare per la Detailed configuration, selezionare il tipo di macchina sulla quale si sta lavorando (un sistema ad uso sviluppo, una vera e propria macchina server, un server dedicato a MySQL). Nel nostro caso, si opterà per Developer machine oppure per Server machine a seconda che quello utilizzato sia un sistema di test oppure se si pensa che verrà destinato ad un vero e proprio server.
A seconda della specifica scelta effettuata, la procedura passo-passo provvederà ad impostare il file di configurazione di MySQL (my.ini).

La schermata seguente consente di scegliere il motore per la gestione dei dati da impiegare: “Multifunctional database” permette di utilizzare sia MyISAM che InnoDB, “Transactional database only” abilita l’impiego di entrambi i motori destinando però la maggior parte delle risorse del server ad InnoDB mentre Non-Transactional Database only esclude l’impiego di InnoDB. Nel nostro caso, optiamo per Multifunctional database.

Attraverso la finestra successiva è possibile indicare il carico di lavoro al quale si prevede sarà soggetto il server MySQL. Per scopi di test è possibile selezionare la voce Decision support (DSS)/OLAP, ideale per un numero massimo di connessioni contemporanee. L’opzione Online transaction processing (OLTP) è indicata per i server MySQL particolarmente “sollecitati” (fino a 500 connessioni attive).

Cliccando su Next si potranno lasciare inviariate le impostazioni relative ad Enable TCP/IP networking ed Enable strict mode.
Per la memorizzazione di testi redatti nella nostra lingua, si può optare poi per Standard character set.

Infine, lasciando spuntata la casella Install as Windows service, è bene acconsentire all’installazione di MySQL come servizio di Windows: in questo modo il server verrà, di default, avviato automaticamente all’accensione del personal computer e potrà essere sospeso oppure arrestato dalla finestra per la gestione dei servizi del sistema operativo (Sistema operativo, Strumenti di amministrazione, Servizi).

Il passo conclusivo consiste nella definizione di una password a protezione dell’accesso come utente “root”. La password dovrebbe essere scelta in modo adeguato (dovrebbe contenere qualche carattere “speciale” e non essere quindi facilmente individuabile). Le caselle Enable root access from remote machines e Create an anonymous account non deve essere spuntata.

Cliccando su Execute, verrà configurato il server, preparato il file my.ini. Per completare l’installazione di MySQL, è sufficiente cliccare ora su Finish.

Dal menù Programmi di Windows, si deve quindi accedere al gruppo di MySQL e cliccare su MySQL Server 5.1 quindi su MySQL Command Line Client. Senza installare il Workbench di MySQL, uno strumento che – tra le altre cose (a partire dalla versione 5.2; richiede la presenza del framework .Net 3.5 di Microsoft) – permette di creare account utente, assegnare privilegi ed amministrare database e tabelle di dati da una comoda interfaccia grafica, creiamo da riga di comando un nuovo database che andrà ad ospitare i dati di WordPress.
In alternativa al Workbench od alla riga di comando di MySQL è possibile ancora usare il vecchio pacchetto MySQL GUI Tools Bundle, ormai giunto alla fine del suo sviluppo, integra lo strumento visuale MySQL Administrator per la gestione del database.

Per procedere, è sufficiente digitare la password per l’account “root” scelta precedentemente quindi digitare CREATE DATABASE joomla; e premere il tasto Invio.

Digitando il comando SHOW DATABASES; si otterrà la lista dei database presenti, compreso quello appena creato. A parte “test”, un database di prova, gli altri sono legati al funzionamento di MySQL e non devono essere rimossi.

A questo punto è possibile creare l’account utente che sarà sfruttato dall’applicazione web Joomla per interagire con la base dati MySQL. E’ possibile ricorrere ai comandi seguenti:
CREATE USER 'joomla-user'@'localhost' IDENTIFIED BY 'password_utentejoomla ';
GRANT ALL PRIVILEGES ON joomla.* TO 'joomla-user'@'localhost' WITH GRANT OPTION;
In questo modo si assegneranno al nuovo utente joomla-user tutti i privilegi possibili oltre alla password password_utentejoomla che, ovviamente, va scelta in modo opportuno. L’utente joomla-user è autorizzato ad accedere alla base dati solo a livello locale (localhost).
Si potranno poi eventualmente ridurre i privilegi acconsentendo solo, ad esempio, all’esecuzione di query SELECT, INSERT, UPDATE, DELETE, CREATE e DROP.
Come passo finale, è possibile uscire da MySQL Command Line Client digitando quit.

Aggiungere i diritti in scrittura all’utente “guest”

Prima di avviare l’installazione di Joomla, è bene accedere – in Windows – alla cartella c:\inetpub\wwwroot farvi clic con il tasto destro del mouse, cliccare sulla scheda Sicurezza, selezionare l’utente IUSR_nomemacchina e spuntare la casella Consenti in corrispondenza della voce Scrittura.
In Windows XP, per accedere alla scheda Protezione è necessario, prima, cliccare su Opzioni cartella, Visualizzazione quindi disattivare l’opzione Utilizzare condivisione file semplice.
Il permesso di scrittura è necessario affinché la procedura d’installazione di Joomla possa salvare il file PHP contenente le impostazioni legate al funzionamento dell’applicazione (file configuration.php). Anche nel caso di VitueMart viene generato un file di configurazione simile.
Una volta selezionato l’account Internet Guest (IUSR_nomemacchina), è bene cliccare su Avanzate, su Modifica ed attivare le caselle Eliminazione sottocartelle e file ed Elimina (in questo modo VirtueMart potrà eliminare, in fase d’installazione, una cartella temporanea).

Dopo aver installato Joomla e VirtueMart, gli attributi Consenti scrittura, Eliminazione sottocartelle e file ed Elimina potranno essere rimossi (Consenti scrittura dovrà essere assegnato alle sottocartelle all’interno delle quali Joomla dovrà poter caricare delle risorse dai sistemi client).

Installazione di Joomla

Il passo successivo consiste nel creare una nuova directory all’interno della root di IIS (es.: c:\inetpub\wwwroot\joomla) ed estrarvi tutto il contenuto dell’archivio compresso di Joomla, precedentemente scaricato.

Effettuata quest’operazione, è necessario aprire il browser web e digitare, nella barra degli indirizzi: http://localhost/joomla: comparirà immediatamente la prima pagina della procedura di configurazione di Joomla. In prima istanza, è necessario selezionare la lingua preferita e premere il pulsante Avanti.

L’applicazione provvederà ad effettuare una serie di controlli verificando che tutti i requisiti siano presenti.

Il passo seguente consiste nell’accettazione dei termini della licenza d’uso (GNU GPLv2) quindi si dovrà passare ad inserire i dati per l’accesso alla base dati:

Il significato di ogni voce è chiaro: dal momento che il server MySQL è in esecuzione sul sistema locale, si potrà inserire localhost nel campo Nome host. Nelle altre caselle vanno digitati il nome dell’utente MySQL creato in precedenza, la sua password ed il nome della base dati.

Saltiamo la successiva scheda relativa all’accesso via FTP cliccando sul pulsante Avanti.

Il passo finale della procedura di configurazione di Joomla consiste nell’indicare un nome per il proprio sito web e specificare delle credenziali di accesso che saranno utilizzate per fare ingresso al pannello di amministrazione.

L’opzione Installa dati di esempio consente di richiedere a Joomla la predisposizione di un database che contenga alcune informazioni esemplificative. Se non si è mai utilizzato Joomla, è consigliabile optare per questa scelta ricordandosi di cliccare subito sul pulsante Installa i dati di esempio.

Si tenga presente che il nome utente per l’accesso al pannello amministrativo è sempre admin.

A questo punto, come ricorda la pagina finale della procedura d’installazione di Joomla, è indispensabile provvedere all’eliminazione della sottocartella installation contenuta nella directory di Joomla (esempio: c:\inetpub\wwwroot\joomla\installation). Nel caso in cui la cartella risultasse ineliminabile a causa di una violazione di condivisione, è sufficiente aprire il prompt dei comandi di Windows e digitare quanto segue, attendendo qualche istante: IISRESET /stop.
Non appena IIS sarà stato arrestato, si potrà procedere alla rimozione della directory installation di Joomla.
Per riavviare il web server, basterà digitare – sempre al prompt dei comandi –: IISRESET /start.

Puntando il browser web all’indirizzo http://localhost/joomla si accederà così alla home page del sito appena generato.

Per accedere al pannello di amministrazione di Joomla, è sufficiente digitare l’indirizzo http://localhost/joomla/administrator.

Il nome utente da indicare è admin mentre come password dovrà essere indicata quella scelta in fase d’installazione del prodotto.

Concentriamoci sulle impostazioni di Joomla che saranno poi fondamentali per l’installazione ed il corretto funzionamento di VirtueMart. La prima operazione da compiere, è cliccare su Sito, Configurazione.
Questa schermata è suddivisa in tre riquadri: Configurazione sito, Configurazione metadata e Configurazione SEO. La prima sezione (Configurazione sito) permette di porre offline il sito impostando anche il messaggio che deve essere mostrato agli utenti in questo particolare frangente.

Nella scheda Sistema viene indicata la cartella che conserva i log di Joomla, si può scegliere se fare in modo che gli utenti possano registrarsi o meno al sito (riquadro Configurazione utente).

Nel box Configurazione media è possibile definire quali tipi di file possono essere caricati sulla macchina che ospita il sito Joomla.

Attraverso i riquadri Configurazione cache e Configurazione sessione, si possono impostare il tempo di vita della cache e delle sessioni utente.

La scheda Server può essere utilizzata per verificare (o modificare) la cartella temporanea utilizzata da Joomla ed i dati per l’accesso al database MySQL ed alla funzionalità per l’invio di messaggi di posta elettronica (si possono usare la funzione PHP Mail, Sendmail od un server SMTP).

Per rendere più veloce il caricamento delle pagine web di Joomla è possibile valutare l’attivazione dell’algoritmo di compressione GZIP (opzione Compressione pagine GZIP). Di default, Web Platform 2.0 attiva l’estensione php_zip (nel caso in cui risultasse non abilitata, dovrà essere manualmente attivata intervenendo sul file di configurazione php.ini).

Gestione delle estensioni in Joomla

Joomla è un pacchetto ampiamente estensibile tanto da consentire agli utenti di fruire di cinque diffrenti tipologie di “personalizzazioni”:
– componenti Si tratta di “mini-applicazioni” che possono contenere le proprie tabelle di datbase, impostazioni di amministrazione ed elementi visualizzabili lato “frontend”. VitueMart è un componente per Joomla.
– moduli Blocchi di codice di dimensioni contenute che possono essere impiegati per mostrare contenuti specifici all’interno della struttura del sito web Joomla. Citiamo, a titolo esemplificativo, mod_latestnews: si tratta di un modulo che mostra gli ultimi contenuti aggiunti alla sezione “Notizie“.
– plugins Sono pezzi di codice piuttosto complesso che operano “in background” per eseguire attività specifiche in risposta a certi eventi.
– linguaggi Estensioni che consentono di tradurre l’interfaccia del sito in altre lingue.
– template Si tratta delle “personalizzazioni” visuali per l’interfaccia di Joomla.

Tutte le estensioni sono gestibili ricorrendo al menù Estensioni di Joomla.

Installazione di VirtueMart

Proviamo adesso ad installare il “negozio online” per Joomla – VirtueMart -. L’operazione è, di per sé, piuttosto semplice da portare a termine. E’ necessario, innanzi tutto, prelevare il “complete package for Joomla! 1.5” da questa pagina ed estrarne il contenuto in una cartella sul disco fisso.
All’interno di tale directory saranno memorizzate due sottocartelle (modules e plugins) e due file (com_virtuemart_1.x.x.xxx.zip e VirtueMart_x.x_Installation.pdf).

Per procedere, è necessario – dal pannello di amministrazione di Joomla – cliccare sul menù Estensioni, Installa/Disinstalla, su Sfoglia… in corrispondenza di Carica file pacchetto e scegliere il file com_virtuemart_1.x.x.xxx.zip contenuto nella cartella di VirtueMart.

Il passo seguente consiste nel cliccare sul pulsante Carica file e installa.

Dopo alcuni secondi di attesa, VirtueMart mostrerà il messaggio Welcome to VirtueMart 1.x.x stable!: significa che la prima fase dell’installazione del prodotto, si è conclusa con successo.

Cliccando su Go directly to the shop, la procedura d’installazione di VirtueMart predisporrà il database e proporrà la schermata principale per la gestione dell’applicazione. Optando per Install sample data, VirtueMart aggiungerà – nella base dati – alcune informazioni di esempio che possono rivelarsi utili per meglio comprendere il funzionamento del prodotto. Ovviamente, i dati di esempio possono essere rimossi in qualunque momento.

Un messaggio d’allerta farà presente che la procedura di predisposizione del database non dovrà essere interrotta e che si dovrà attendere pazientemente sino al completamento della stessa.

Per tradurre in italiano l’interfaccia di VirtueMart, innanzi tutto, è necessario scaricare questo file ed estrarne tutto il contenuto in una cartella temporea sul disco quindi copiare la directory languages in joomla\administrator\com_virtuemart sovrascrivendo la cartella omonima.

Digitando nella barra degli indirizzo del browser http://localhost/joomla/index.php?option=com_virtuemart dovrebbe comparire la home page del negozio VirtueMart con i dati di esempio precedentemente inseriti.

Cliccando su ciascuna delle “macrocategorie” di esempio si accederà alle pagine del catalogo che ospitano i rispettivi oggetti in vendita.

Installando i moduli ed i plugin contenuti nelle cartelle \modules e plugins di VirtueMart, si potranno aggiungere nuove funzionalità. Ad esempio, installando da Estensioni, Installa/Disinstalla il modulo chiamato \modules\mod_virtuemart_latestprod_1.1.4.j15.zip si potrà fare in modo che, nelle pagine di Joomla, nelle posizioni desiderate, venga proposta la lista degli ultimi prodotti. Analizzeremo più avanti questa possibilità.

Aggiugere VirtueMart alla home page di Joomla

Come abbiamo visto, per richiamare la pagina principale del negozio online, si è dovuto digitare l’indirizzo http://localhost/joomla/index.php?option=com_virtuemart. Per fare in modo che VirtueMart sia proposto già nella home page di Joomla, è necessario accedere a Menù, Gestione menù quindi cliccare sull’icona Voci di menù accanto a Menù principale.

Cliccando sull’icona Nuovo, in alto a destra, si potrà specificare il tipo di elemento da aggiungere al menù principale di Joomla. Cliccando su VirtueMart apparirà una nuova schermata contenente già alcune informazioni. Tra di esse è riconoscibile il link interno index.php?option=com_virtuemart che consente appunto di fare ingresso nella home page del negozio.

Agendo sul menù Parametri – componenti si può fare in modo che il link punti, ad esempio, ad uno specifico prodotto del catalogo (Product ID) o ad una categoria predeterminata (Category ID).

Cliccando su Salva od Applica, le modifiche saranno annotate nel database dell’applicazione.

Per fare in modo che il link appena aggiunto venga mostrato tra i primi, è sufficiente modificarne il valore della colonna Ordina e cliccare sulla piccola icona Salva ordinamento.

Un link analogo può essere aggiunto anche al cosiddetto “Top menu“: basta cliccare su Menù, Gestione menù, scegliere l’icona Voci di menù in corrispondenza di Top menu ed aggiungere una nuova voce come già visto in precedenza.

Se si preferisse evitare di ripetere la procedura, si potrà copiare il link precedentemente aggiunto al menù principale: basterà accedere a tale menù, spuntare la casella a sinistra del link già inserito, cliccare sull’icona Copia, indicare come destinazione topmenu e cliccare ancora su Copia.

Portandosi in corrispondenza della pagina http://localhost/joomla, si potranno notare i cambiamenti appena apportati.