Realizzazione Di Un Sito Web Dinamico Per La Gestione Di Servizi Rivolti Al Cliente

UNIVERSITÀ DEGLI STUDI DI BRESCIA
FACOLTÀ DI INGEGNERIA
CORSO DI LAUREA IN INGEGNERIA DELL’INFORMAZIONE
Realizzazione di un sito web dinamico

per la gestione di servizi
rivolti al cliente
Studente:
Giovanni Maggini
Matricola: 48930
Ente ospitante:
3Services S.r.l.
Relatore:
Marina Zanella
Correlatore:
Denis Moras
ANNO ACCADEMICO 2006/2007

I am part of all that I have met;
Yet all experience is an arch wherethro'
Gleams that untravell'd world, whose margin fades
For ever and for ever when I move.
Alfred Lord Tennyson, Ulysses

I
Indice
1 Introduzione............................................................1
1.1 Ente Ospitante.................................................................................2

1.2 Presentazione del lavoro svolto.......................................................3
1.3 Strumenti................................................................................. ........4
1.3.1 PHP............................................................................. ..............4
1.3.2 Apache.......................................................................... ............6
1.3.3 MySQL...................................................................................... 6
1.3.4 Browser web.............................................................................7
1.3.5 Sistemi LAMP...........................................................................9
2 Content Management System.................................11
2.1 Perché adottare un CMS................................................................12

2.2 Come scegliere un CMS.................................................................16
2.3 Analisi di CMS...............................................................................18
2.3.1 Drupal....................................................................................20
2.3.2 Mambo e Joomla!..................................................................22
2.3.3 TYPO3........................................................................ ............23
2.4 TYPO3: il CMS adottato................................................................24
2.4.1 Ragioni della scelta................................................................24
2.4.2 Struttura................................................................................27
2.4.3 Ruoli degli utenti...................................................................28
2.4.4 Community............................................................................29
2.5 GNU General Public License.........................................................31
3 Programmazione TYPO3.......................................33
3.1 TypoScript.....................................................................................34
3.2 Struttura, albero delle pagine e contenuti....................................38
3.3 Front-end....................................................................................... 41
3.3.1 Processo di rendering.............................................................41
II
3.3.2 API.........................................................................................43
3.3.3 TSFE......................................................................................44
3.3.4 Oggetti contenuto..................................................................46
3.4 Template.......................................................................................48
3.5 Layout............................................................................... .............55
3.6 Estensioni......................................................................................57
3.7 Utenti TYPO3.................................................................................61
3.7.1 Utenti back-end......................................................................61
3.7.2 Utenti front-end.....................................................................62
4 Svolgimento dell'attività.......................................64
4.1 Installazione di TYPO3..................................................................65

4.1.1 Requisiti di sistema................................................................65
4.1.2 Processo di installazione........................................................66
4.1.3 Interfaccia di amministrazione (back-end)...........................69
4.2 Sito web HTML preesistente.........................................................72
4.3 Installazione delle estensioni........................................................74
4.4 Modifica del sito web preesistente................................................77
4.5 Scrittura del template TypoScript.................................................79
4.5.1 Creazione di un template radice............................................79
4.5.2 Template ext:BASE TEMPLATE...........................................82
4.6 Creare e modificare contenuti......................................................90
4.7 Area privata clienti........................................................................92
4.8 Gestione preventivi.......................................................................96
5 Approfondimento: gestione documenti on-line. . .105
5.1 Sistemi operativi basati sul web..................................................106

5.2 Sistema operativo eyeOS.............................................................108
5.3 Installazione e personalizzazione................................................111
6 Conclusioni.........................................................120
6.1 Ricapitolazione.............................................................................121
6.2 Prospettive future........................................................................121
6.3 Valutazione complessiva.............................................................122
Riferimenti bibliografici, Appendice......................123
III
Bibliografia e fonti web.....................................................................124

File modello.html..............................................................................128
Campo Setup di ext:BASE TEMPLATE............................................135
Foglio di stile CSS..............................................................................141
Ringraziamenti.......................................................145
IV
Indice delle Figure

Figura 2.1: Ciclo di vita dei contenuti. ................................................13
Figura 2.2.: Logo ufficiale di TYPO3..................................................26
Figura 2.3.:Diagramma della struttura di TYPO3..............................28
Figura 3.1.: Registro di configurazione di Microsoft Windows..........36
Figura 3.2.: Codice all'interno di TypoScript Object Browser...........38
Figura 3.3.: Processo di rendering del front-end...............................50
Figura 4.1.: Schermata conclusiva del processo di installazione........67
Figura 4.2.: Messaggio di errore dovuto all'assenza di pagine..........68
Figura 4.3.Interfaccia utente del back-end TYPO3.............................71
Figura 4.4.: Pagina del sito HTML di 3Services.................................73
Figura 4.5.: Extension manager nel menu di TYPO3.........................74
Figura 4.6.: Extension Manager..........................................................75
Figura 4.7.: Interfaccia di Fileadmin..................................................77
Figura 4.8.: Interfaccia per la creazione di una pagina.....................80
Figura 4.9.: Messaggio di errore di template non trovato.................81
Figura 4.10.: TinyRTE, un Rich Text Editor per TYPO3....................91
Figura 4.11.:Pagina web realizzata con TYPO3...................................92
Figura 4.12.: Vista articoli con Webformat Extendedshop..............104
Figura 4.13.: Procedura di acquisto di Webformat Extendedshop. .104
Figura 5.1.: Diagramma di rete di eyeOS per le PMI........................109
Figura 5.2.: Pagina di login di eyeOS.................................................115
Figura 5.3.: Desktop di eyeOS...........................................................116
Figura 5.4.: Menu “Start” di eyeOS...................................................116
Figura 5.5.: Menu di avvio di eyeFiles...............................................117
Figura 5.6.: eyeNav, gestore file di eyeOS.........................................119
V
Indice delle Tabelle

Confronto tra CMS..............................................................................18
Array myObject...................................................................................36
Cartelle principali dell'installazione di TYPO3...................................67
Contenuto di typo3/............................................................................68
1 Introduzione
Ente ospitante, presentazione

del lavoro svolto, strumenti.
Pa gi na 2 1.1 E nte Ospi ta nte
1.1 Ente Ospitante
L'attività di Stage si è svolta presso la ditta 3Services S.r.l. con sede in

Brescia. L'azienda opera nel settore dell'Information Technology riguardante i
sistemi informativi, la gestione di reti aziendali, l'assistenza sistemistica.
Nata nel 2002 dalla fusione di tre diverse aziende operanti in Brescia dal
1985, 3Services S.r.l. lavora per mettere a disposizione dei propri clienti
soluzioni per il loro business, seguendoli sotto ogni aspetto utile alla loro
attività: dalla fornitura dell'hardware all'assistenza tecnica, dalla messa a punto
di software gestionali su misura alla realizzazione e gestione di reti.
Il lavoro di Stage si è svolto sotto la supervisione di Denis Moras con la

consulenza tecnica di Ugo Finocchiaro. La postazione di lavoro è stata un
elaboratore Apple MacBook sul quale è stato installato l'ambiente di sviluppo e
testing per il software, costituito dal server web Apache corredato da moduli
PHP e librerie per la manipolazione di immagini, dal DBMS MySQL e un editor
di testo ( TextWrangler[1] per Mac OS X ) con il supporto all'highlighting di
codice PHP e TypoScript. Il materiale utilizzato come fonte di documentazione è
stato prevalentemente reperito sul World Wide Web, in quanto le soluzioni
adottate mettono a disposizione, oltre alle pagine di documentazione ufficiale in
formato elettronico realizzate dagli sviluppatori, community e forums dedicati
agli utenti che scelgono di realizzare progetti basati sui loro prodotti software.
Non mancano poi guide e manuali scritti o tradotti dagli utenti stessi, che vanno
ad arricchire le fonti ufficiali con note personali e soluzioni a problemi comuni.
Università degli Studi di Brescia

1.2 Prese nta zi o ne de l la vo ro sv o lt o Pa gi na 3
1.2 Presentazione del lavoro

svolto
Avendo evidenziato le aree di competenza dell'azienda 3Services S.r.l.,

appare chiara l'importanza che il web ricopre in un'azienda che deve saper
sfruttare le migliori soluzioni presenti sul mercato per offrirle ai propri clienti.
L'attività svolta è stata dunque la realizzazione di un sito web dinamico,

gestito tramite un Web Content Management System (WCMS, oppure Content
Management System, d'ora in avanti CMS), che mette in contatto l'azienda con i
propri clienti (sia acquisiti che potenziali) permettendo a essi di accedere a
informazioni in modo interattivo e personalizzato, tramite aree riservate. I
contenuti gestiti da un CMS possono essere file di computer, immagini, file
multimediali, documenti elettronici e contenuti web: i concetti alla base di un
CMS sono quelli di separazione dei contenuti dal layout e di modularità.
L'obiettivo dell'attività è stato innanzi tutto la realizzazione del sito web
aziendale, ma il lavoro che presento è anche una dimostrazione generale di ciò
che è possibile realizzare per qualunque cliente che necessiti di una gestione
dinamica dei dati sul proprio sito, che richieda l'accesso e la manipolazione dei
contenuti da parte di più persone, oltre che un contatto più diretto con i
visitatori del proprio sito web.
Proprio perché un CMS è basato sul principio di separazione dei contenuti

dal layout, cioè dalla “veste grafica” del sito, si è voluto dimostrare di poter
mantenere invariate le scelte stilistiche del sito web statico, inserendole in, o
meglio costruendo attorno a esse, un sito web dinamico.
Un'altra scelta effettuata e che ha influenzato l'intero svolgimento del lavoro

è stata la decisione di puntare su strumenti Open Source, non solo per
l'accessibilità e per la comprovata qualità degli stessi ma anche come ulteriore
showcase delle potenzialità del mondo Open Source al giorno d'oggi.

Pa gi na 4 1.2 Pre sent az io ne del l av o ro svo l to
Un'ampia parte del progetto riguarda l'analisi dei CMS come soluzioni
attualmente disponibili sul mercato informatico e la valutazione di quale sia il
prodotto più adatto alle esigenze dell'azienda in base ai requisiti specificati.
Presenterò le fasi di installazione, di configurazione e di utilizzo del CMS

TYPO3, da me scelto per questo progetto, l'adattamento di un layout HTML
precedente con il linguaggio TypoScript utilizzato da TYPO3, con particolare
attenzione alla configurazione delle estensioni del sistema utilizzate che
forniscono tutte le funzioni che rendono TYPO3 potente e versatile, vero punto
di forza dei CMS. Tramite le estensioni verrà realizzata un'area ad accesso
riservato e un sistema per la gestione di contratti e servizi rivolti al cliente.
Come approfondimento verrà studiato e configurato eyeOS, un Web-based

Operating System, che si inserisce nel discorso di gestione on-line dei
documenti elettronici. Anche in questo caso saranno affrontate tematiche e
tecnologie a oggi poco diffuse ma che costituiscono la naturale evoluzione degli
attuali sistemi informatici.
1.3 Strumenti
1.3.1 PHP
PHP (acronimo di “PHP: Hypertext Preprocessor”) è un linguaggio Open
Source cross-platform di scripting general-purpose dedicato allo sviluppo web
che può essere inserito all'interno di codice HTML prodotto dal PHP Group e
rilasciato sotto “Licenza PHP” (meno restrittiva della licenza GNU GPL, a detta
del PHP Group[2]):non esistendo una specifica formale dell'implementazione di
PHP, quella fornita dal PHP Group è considerata uno standard de facto.
É stato inizialmente progettato per la produzione di pagine web dinamiche e,

a partire dalla versione 4 di PHP, è basato sul un motore di scripting (macchina
virtuale) Zend. É utilizzato principalmente negli script server-side, ed è questo

1.3.1 PHP Pa gi na 5
l'utilizzo di interesse in questo progetto, ma può essere usato anche da a linea di

comando (sostituendo applicazioni comunemente programmate in Perl, Python,
awk o script di shell) o in applicazioni grafiche standalone (ad esempio PHP-
GTK).[3][4]
Nel nostro ambito, l'interprete PHP installato sul server web riceve come
input uno script PHP e produce una pagina web come output. PHP può essere
installato praticamente su qualunque sistema operativo o piattaforma durante
la fase di sviluppo. Nel presente progetto è stato installato su una piattaforma
Mac OS X 10.4.8; la scelta è coerente con la previsione di installazione su un
server Linux del software realizzato: Mac OS X cade nella categoria dei sistemi
operativi “Unix-like” (o, per seguire le linee guida del “The Open Group”, “UNIX
system-like”) e, nella sua più recente versione 10.5 “Leopard”, Mac OS X è a
tutti gli effetti un prodotto registrato Open Brand UNIX 03.[5][6]
La versione di PHP utilizzata è PHP 5.2.0. La major release 5.x di PHP è

datata 13 Luglio 2004, e presenta parecchi miglioramenti[7] rispetto alla
precedente 4.x (destinata a essere definitivamente abbandonata al termine del
2007):
● Supporto migliorato alla programmazione orientata agli oggetti.
● Estensione “PHP Data Objects”, che definisce una interfaccia

leggera e consistente per l'accesso alle basi di dati.
● Miglioramenti delle prestazioni.
● Migliore supporto per MySQL e MSSQL.
● Integrato supporto per SQLite e SOAP.
● Iteratori di dati.
● Gestione degli errori tramite eccezioni.

Pa gi na 6 1.3.2 Apa che
1.3.2 Apache
Il Progetto Server HTTP Apache (conosciuto semplicemente come “Apache”)
ha lo scopo di sviluppare e mantenere un server HTTP Open Source per i
moderni sistemi operativi, inclusi UNIX e Windows NT. “L'obiettivo di questo
progetto”, recita la pagina iniziale[8] del Progetto Apache
(http://httpd.apache.org), “è di offrire un server sicuro, efficiente ed estensibile
che fornisce servizi HTTP coerenti agli standard HTTP odierni”.
A partire dal 1996, Apache è diventato il server HTTP più diffuso sul World
Wide Web, incontrando sul suo cammino la concorrenza solo della piattaforma
.NET/IIS (Internet Information Services) di Microsoft e di Sun Java System
Web Server di Sun Microsystems. La diffusione di Apache (oltre il 45% del
mercato secondo gli ultimi dati[9]), la natura Free e Open Source del progetto
l'hanno reso il candidato ideale per lo sviluppo del progetto di questo Stage.
La sua relativa difficoltà di configurazione è compensata dal fatto che

l'installazione standard nella configurazione di default offre, salvo alcune
necessarie ma piccole modifiche, tutto il necessario per l'hosting di un sito web
o, come in questo caso, il deployment di una piattaforma di sviluppo.
1.3.3 MySQL
MySQL è un database management system (DBMS) relazionale.
Diversamente da Apache, che è sviluppato da una community pubblica e il cui
codice sorgente è copyright dei singoli autori, MySQL è proprietà della svedese
MySQL AB e il software è rilasciato secondo la licenza GPL nella sua forma
denominata “Community Server”. Con il nome MySQL Enterprise si indicano
invece una serie di servizi legati alla gestione del database, forniti tramite
sottoscrizione di abbonamento, che assicurano supporto tecnico, consulenza e
software di monitoraggio non disponibili nella versione “Community”.
Un database (cioè una collezione strutturata di dati) relazionale registra i

dati in tabelle separate, permettendo di migliorare tempi di accesso e flessibilità.

1.3.3 My SQ L Pag ina 7
“SQL” significa Structured Query Language: esso è il linguaggio di accesso ai

database più comune, definito dallo Standard ANSI/ISO SQL.
Le API (Application Program Interface) fornite da PHP per interfacciarsi con

MySQL sono le seguenti:
● mysql. Disponibile per PHP 4 e 5, questa estensione è intesa per

l'uso con versioni di MySQL precedenti alla 4.1. Non supporta i protocolli
di autenticazione avanzata disponibili in MySQL 5.1 e altre funzioni.
● mysqli (MySQL Improved). Questa estensione, disponibile

solo in PHP5, è intesa per l'uso in MySQL 4.1.1 e successivi. Supporta
pienamente il protocollo di autenticazione usato in MySQL 5.1, Prepared
Statements e Multiple Statements. Fornisce anche un'interfaccia di
programmazione orientata agli oggetti.
La connessione tra PHP e MySQL avviene tramite la API Open Database

Connectivity (ODBC). ODBC fornisce un metodo standard per l'utilizzo di
DBMS, indipendente dal linguaggio di programmazione, dal sistema operativo e
dalla base di dati. [10]
1.3.4 Browser web

Avendo a che fare con delle applicazioni basate sul web, è d'obbligo
menzionare lo strumento con cui interagiremo con il software: il browser web.
Sia che si svolga il ruolo di amministratori, sviluppatori o utilizzatori, l'accesso
alle informazioni avverrà sempre tramite di esso.
Il web browser[11] è un'applicazione software che permette a un utente di

interagire con testi, immagini, video, musica o altre informazioni tipicamente
posizionate su una pagina web all'interno di un sito web sul World Wide Web o
su una intranet locale. La navigazione avviene tramite hyperlink, cioè
collegamenti contenuti all'interno della pagina web, che contengono un
riferimento a un altro documento, sia esso un'altra pagina web oppure un file
audio, video, ecc.

Pa gi na 8 1.3.4 Bro w ser we b
Le informazioni contenute all'interno di una pagina web sono scritte in

formato HTML (HyperText Markup Language) e quindi interpretate dal
browser. Questo significa che ogni browser potrebbe avere delle differenze più o
meno leggere nel momento della visualizzazione della pagina. L'implicazione di
questo è che i web designer devono, al momento della realizzazione, effettuare
una fase di testing delle proprie pagine assicurandosi che, anche se non
perfettamente identiche nella visualizzazione, le pagine risultino ugualmente
accessibili per lo meno sui browser più diffusi[12], vale a dire Internet Explorer,
Mozilla Firefox e Safari.
Da quando Microsoft ha introdotto Internet Explorer come parte dei propri

sistemi operativi Windows (cioè a partire da Windows 95), si è sempre più
accentuata l'associazione tra browser web e sistema operativo: Internet Explorer
è divenuto icona di Windows, Safari è stato sviluppato per dare un'identità sul
web a Mac OS X (che fino a quel momento usava una versione per Mac di
Internet Explorer) e Mozilla Firefox è diventato il baluardo del software libero
su ciascuna piattaforma, a partire dall'ambiente che gli è più congeniale, cioè le
varie distribuzioni Linux.
Mentre alcuni browser sono disponibili solo per una sistema operativo
(Internet Explorer è volutamente legato ai sistemi operativi Microsoft
Windows), altri sono cross-platform, cioè disponibili per vari sistemi operativi:
Mozilla Firefox, in particolare, è disponibile per sistemi operativi Windows,
Linux e Mac OS X, garantendo quindi agli sviluppatori di pagine web che gli
utenti che accedono al proprio sito web utilizzando Firefox potranno
visualizzare le informazioni in modo identico, indipendentemente dal sistema
operativo utilizzato, nonché sicuro.[13]
Tutti i browser web garantiscono una compatibilità minima molto elevata e

sono rari i casi di completa inoperabilità tra codice sviluppato per un
determinato browser web rispetto a un altro.
Web 2.0 viene percepito come una seconda generazioni di comunità on-line
e di servizi in rete che mirano a semplificare la collaborazione e la condivisione
tra gli utenti in rete. Questo termine è stato coniato nel 2004 da Tim O'Reilly

1.3.4 Bro w ser we b Pag ina 9
proprio per identificare la rivoluzione nell'industria dei computer causata dalla

visione di internet come una piattaforma per lo sviluppo di software.[14]
Non si parla di cambiamenti dal punto di vista tecnologico, non esiste una
“seconda versione” del World Wide Web dal punto di vista delle specifiche e
molte delle tecnologie utilizzate oggi sono in realtà diffuse da molto tempo; si
assiste invece a un cambiamento delle informazioni che vengono scambiate e
dell'utilizzo a cui le attuali tecnologie vengono sottoposte: weblog, social
bookmarking, wiki, podcast, feeds RSS, social software e servizi on-line. É
naturale che, contestualmente ai cambiamenti dal punto di vista sociale, anche
le tecnologie abbiano dovuto sapersi adattare migliorando i software lato-server,
dato il peso sempre maggiore delle applicazioni sul fornitore di servizi, dovuto al
loro spostamento dal sistema operativo al web.
1.3.5 Sistemi LAMP

Quando si parla di sistemi LAMP[15] (o di pacchetto LAMP) si intende uno
stack (“pila”) di software utilizzato per ospitare web server per la gestione di siti
web dinamici. In genere si parla di software libero/Open-Source in quanto
LAMP costituisce l'acronimo (coniato da Michael Kunze nel 1998 ) dei termini
Linux, Apache, MySQL, PHP (talvolta sostituito da Perl o Python), dei quali ho
parlato in precedenza.
L'utilizzo e la combinazione di queste tecnologie definisce l'infrastruttura del

server web, il paradigma di programmazione e identifica una distribuzione di
software. Questi software non sono stati progettati e sviluppati fin dall'inizio per
operare tra loro, ma la facilità nel reperimento e il basso costo hanno sancito la
diffusione e la standardizzazione di questa soluzione software, aiutata dal fatto
che praticamente ogni distribuzione Linux offre all'utente, al momento
dell'installazione, la possibilità di configurare il proprio sistema come server
LAMP in pochi minuti.
Anche se il nome più diffuso per la sua identificazione è il termine LAMP,

esistono diverse varianti per indicare un simile pacchetto software utilizzato per
il deployment di server web. In particolare, nel sistema di test da me allestito,

Pa gi na 10 1.3.5 Sist emi LAMP
dovremmo parlare di sistema MAMP (dove la lettera “M” iniziale sostituisce

Linux inserendo, al suo posto, Mac OS X).
Esistono soluzioni AMP (nelle quali non è incluso il sistema operativo)

integrate del tipo “1-click-to-install” e con un pannello di controllo unificato, che
tuttavia non sono state utilizzate in questo progetto: il motivo risiede nel fatto
che queste implementazioni risultano spesso invasive, difficilmente
personalizzabili, talvolta contenenti componenti aggiuntivi inutili allo
sviluppatore e, soprattutto, non-standard; per questo motivo risulta difficile la
modifica e l'aggiornamento di singole parti di quella che viene resa disponibile
come una “suite”.[16] Risultano pertanto utili allo sviluppatore alle prime armi o
per siti web personali ma non sono, a mio avviso, una valida soluzione per la
realizzazione di sistemi a livello aziendale.
Seguendo questa convinzione, il sistema MAMP/LAMP sviluppato per

questo progetto di Stage è stato installato “da zero”, seguendo procedure di
installazione standard e personalizzate per ogni singola applicazione utilizzata
per lo sviluppo.

2 Content
Management System
Sistemi CMS, comparazione,

criteri di scelta, CMS adottato.
Pa gi na 12 2 Co nte nt Ma na g eme nt Sy ste m
2.1 Perché adottare un CMS
I sistemi per la gestione di contenuti sono diventati lo standard per la

creazione e lo sviluppo di contenuti mission-critical sul World Wide Web e nelle
reti intranet. Ci si riferisce a sistemi software dedicati a questo scopo con il
termine di Web Content Management System (WCMS) o, in breve, Content
Management System (CMS). Quando mirano a un approccio end-to-end nel
contenuto, spaziando dalla gestione di documenti verso il web o verso output di
stampa, tali sistemi sono chiamati Enterprise Content Management System.
Un principio importante alla base dei CMS è la separazione del contenuto

dalla grafica. In pratica, la specifica del layout è gestita indipendentemente dal
contenuto delle pagine, sia che si tratti di testo, immagini o altri formati. Questo
principio ha molti vantaggi quando si tratta di cambiare la grafica del sistema: il
contenuto può essere modificato dagli autori senza alcuna influenza sui dettagli
dello stile mentre i parametri del layout possono essere modificati in modo
indipendente, permettendo cambiamenti di design anche all'interno di siti web
estesi.
I CMS supportano il ciclo di vita dei contenuti[17], riportato in tutti i suoi

stadi in Figura 4.11, dalla creazione dei contenuti con software di editing,
all'organizzazione di parti di codice, fino all'effettivo rilascio e seguente
archiviazione dei dati.
Prima di iniziare a lavorare sul progetto, è stato necessario chiedersi se

implementare da zero un'applicazione software che soddisfacesse i requisiti
richiesti fosse la soluzione migliore da adottare.

2 .1 Perc hé a do t ta re u n CMS Pa gi na 13
Figura 2.1: Ciclo di vita dei contenuti.
Dopo una attenta analisi delle richieste, che in seguito riassumo, è risultata
vincente la scelta di adottare un CMS e adattarlo alle esigenze dell'azienda.
Durante la prima fase del lavoro di Stage erano stati definiti dall'azienda in
base alle richieste del settore commerciale, i seguenti requisiti (seppure a grandi
linee):
● Registrazione di ciascun cliente.
● Gestione dell'autenticazione dei clienti.
● Formulazione on-line della richiesta di un preventivo dei servizi

forniti dall'azienda da parte del cliente.
● Interrogazione delle richieste dei clienti da parte di un

amministratore e realizzazione di un preventivo in base alle richieste
formulate dal cliente;
● Visualizzazione del proprio contratto da parte del cliente;

Pa gi na 14 2 .1 Perc hé a do t ta re u n CMS
● Gestione on-line di documenti in formato elettronico.
In particolare è parso poco redditizio investire risorse nello sviluppo di

un'applicazione quando, utilizzando lo stesso numero di ore, sarebbe stato
possibile studiare l'uso e il funzionamento di sistemi diffusi e di comprovata
affidabilità per sapere poi gestirli, modificarli e adattarli quindi alle richieste.
Non solo: la conoscenza acquisita garantirà la possibilità di soddisfare esigenze
più vaste di quelle che sono state definite inizialmente, quando esse dovessero
presentarsi in futuro. Dato che la modularità è una componente essenziale di
tutti i CMS di un certo spessore presenti sul mercato, tale prospettiva è risultata
molto interessante.
Al di là dei pregi che ogni singolo produttore presenta nelle pagine dedicate
al proprio prodotto, esistono dei punti chiave[18] a favore dell'adozione di un
sistema per la gestione dei contenuti all'interno della propria infrastruttura,
rivolti essenzialmente all'utente finale, che vado a elencare:
● Non sono necessarie conoscenze tecniche specifiche per l'utente e

per chi è incaricato delle modifiche da apportare ai contenuti del sito
(editor). É sufficiente una conoscenza delle nozioni basilari dell'utilizzo di
un editor di testo e dei principi basi della navigazione web.
● É possibile gestire, aggiornare, modificare il proprio sito da

qualunque postazione connessa a internet, quindi anche effettuare
correzioni, aggiungere o rimuovere immagini e documenti, inserire
articoli, ecc.
● Le correzioni e gli aggiornamenti sono istantanei: ogni modifica

effettuata al sito sarà immediatamente visibile.
● É possibile garantire la presenza di aree riservate a utenti

registrati e, in base alla registrazione effettuata, creare gruppi di utenti
per i quali personalizzare le informazioni mostrare.
● Il fatto che lo sviluppo dei maggiori CMS sia effettuato da team di

programmatori e la presenza di una community di utenti e sviluppatori

2 .1 Perc hé a do t ta re u n CMS Pa gi na 15
sempre a disposizione garantisce che il sistema sia stato sottoposto a una

fase di test prima del rilascio, che eventuali errori (“bug”) vengano
corretti nel minor tempo possibile e che sia possibile ricevere supporto
per i problemi che si possono presentare.
● É presente un'interfaccia di amministrazione semplice e

unificata.
Naturalmente la visione relativa all'argomento non è uniforme: nonostante i

vantaggi, esistono comunque dei detrattori dei CMS. Sono state valutate anche
queste visioni e, proprio perché le paure presentate si sono rivelate infondate, è
stata confermata la validità della scelta. Cito di seguito alcuni punti che
riassumono questi concetti:
● Grandi dimensioni: i CMS sono in genere stracarichi di

funzionalità, spesso troppe per un sito di medio-piccole dimensioni.
Questo rende la gestione delle pagine troppo farraginosa per i progetti
più semplici;
● Piccole dimensioni: d’altra parte i cosiddetti micro-cms, tanto

comodi per i siti che non puntano sul numero di pagine o dei servizi per il
loro successo, hanno la tendenza a essere privi proprio delle funzionalità
che potrebbero rivelarsi utili per il nostro progetto;
● Sicurezza: se il CMS ha un bug si dovrà invece aspettare che la

comunità di sviluppo risolva il problema, con la distribuzione
dell’ennesima patch, in attesa del prossimo bug…
● Template e personalizzazione: quale CMS permette di adattare

perfettamente il layout alle nostre esigenze? Molti CMS mettono a
disposizione tantissimi template pronti all’uso da utilizzare liberamente,
ma è difficile modificarli senza studiare prima mille righe di codice per
un semplice include()! <1>
1 http://www.onecms.it/21/10/2007/perche-non-utilizzare-un-cms/

Pa gi na 16 2 .1 Perc hé a do t ta re u n CMS
Parrebbe proprio, leggendo i punti appena citati, che la scelta del CMS ideale
sia una fatica improba e, nella maggior parte dei casi, frutto di delusioni o di
frustrazioni quando si passa al vero e proprio uso; questo può essere
considerato vero se si tratta di un utente privato che desidera dedicarsi alla
pubblicazione del proprio sito web personale avvalendosi di un CMS ma,
quando si tratta di un CMS di uso aziendale, la scelta viene effettuata da persone
aventi conoscenze tecniche superiori e quindi capaci di valutare pregi e difetti di
un prodotto software, oltre che l'effettiva applicabilità dello stesso in un
contesto aziendale.
Il problema della sicurezza viene costantemente esposto dai detrattori e

costituisce il maggior punto di forza di questa teoria, capace di spaventare
adeguatamente eventuali potenziali acquirenti di soluzioni sviluppate dalla
concorrenza. In realtà, come è già stato detto e come avrò modo di ribadire in
seguito, il fatto che sul software lavori un'intera community permette che i
problemi vengano rapidamente individuati e risolti; su un prodotto realizzato in
proprio, invece, eventuali problemi rischierebbero di non essere nemmeno mai
individuati, e quindi mai corretti.
Il discorso della personalizzazione è una questione importante e, come avrò

modo di mostrare in seguito, apprendere le conoscenze adatte per
personalizzare un CMS richiede un certo impegno. É altresì vero che, una volta
acquisite tali conoscenze, si ha accesso a strumenti molto potenti per la
produttività.
2.2 Come scegliere un CMS
Nell'affrontare la scelta riguardante quale CMS utilizzare[19], è stato

necessario compiere i passi illustrati di seguito[20].
Innanzi tutto si è determinato il tipo di sito web da gestire. In questo caso, la

scelta si è ristretta ai CMS che offrivano potenzialità nell'ambito dei portali web.

2 .2 Co me sce g lie re u n CMS Pag ina 17
In seguito, è stato necessario decidere quali funzioni e caratteristiche

sarebbe stato utile avere all'interno del sito web. Per esempio, le informazioni
avrebbero dovuto essere dinamiche, avere la possibilità di mostrare un
eventuale calendario con eventi, un'area download, mentre una galleria di
immagini non è risultata indispensabile. Tutte queste funzioni sono
generalmente offerte da moduli esterni, o plug-in e sono delle aggiunte al
sistema di base (o integrate in esso) e variano molto da un sistema a un altro. Il
fatto che un CMS sia presente da più tempo e, quindi, abbia una base di
diffusione più ampia, garantisce un gran numero di queste funzionalità, tuttavia
esso potrebbe essere basato su una struttura vecchia e quindi non supportare i
più recenti aggiornamenti. Quest'ultimo è un fattore da considerare che
potrebbe portarci a scartare tale CMS nella nostra scelta.
Una volta scelto il sistema di base e i moduli aggiuntivi da installare, è tempo

di scegliere la presentazione del sito web. I sistemi recenti utilizzano fogli di stile
(CSS, Cascading Style Sheet) e template (la cui traduzione sarebbe “maschere di
struttura”) che permettono di modificare rapidamente l'aspetto del sito; ci si
riferisce talvolta a essi con il termine skin. Lo stesso contenuto mostrato con
skin differenti può avere un impatto completamente diverso sull'utente finale, è
quello che distingue un sito web professionale da uno amatoriale. A questo
proposito, i CMS offrono spesso dei template già pronti da utilizzare oppure
degli strumenti per realizzare i propri.
Avendo scelto come comportarsi a livello di presentazione del sito, ci si

concentra sul contenuto vero e proprio, che è quello che interessa realmente
all'utente che accede al sito. É quindi indispensabile che le informazioni
possano essere gestite in modo agile e potente allo stesso tempo, e che siano
accessibili nel modo in cui l'utente si aspetta dal nostro sistema: se fosse un sito
personale avrebbe, ad esempio, l'aspetto di un blog, oppure potrebbe disporre di
una galleria di immagini; in questo caso è indispensabile la presenza, tra le altre
cose, di una pagina contenente notizie aggiornate e di un'area riservata per i
clienti.

Pa gi na 18 2 .2 Co me sce g lie re u n CMS
Infine, l'ultimo aspetto da considerare è la manutenzione. Si tratta di

considerare come comportarsi per quanto riguarda i backup e l'archiviazione dei
dati, in quanto ogni CMS gestisce questo aspetto in maniera differente.
2.3 Analisi di CMS
La quantità di CMS disponibili in rete è immensa. Come se non bastasse,

recenti sondaggi[21] hanno mostrato come una grande quantità di utilizzatori di
CMS sviluppi il proprio sistema, andando quindi ad ampliare il parco.
Wikipedia ci offre una pagina[22] contenente una lista dei maggiori CMS
disponibili sul mercato e relativa licenza. Alcune demo[23] sono disponibili al
sito opensourcecms.com, che mette a disposizione sistemi CMS installati a cui è
possibile accedere per visionare le potenzialità.
Un altro sito che si è rivelato utile nella scelta del sistema da usare nel lavoro
di Stage è stato cmsmatrix.com, dove è possibile visionare delle tabelle
comparative di moltissimi CMS in circolazione. In particolare, lo spettro della
mia scelta si è ristretto ai famosi Drupal, Joomla! e TYPO3 in quanto tutti
rilasciati sotto licenza Open Source.
La Tabella 1 presenta una tabella comparativa[24] tra i CMS in esame, in cui i

fattori di confronto sono stati ridotti in base alle necessità di questo lavoro di
Stage.
Tabella 1: Confronto tra CMS.

Product Drupal 5.3 Joomla! 1.0.7 TYPO3 4.1.1
Last Updated 11/22/2007 4/25/2006 4/20/2007
System Requirements Drupal Joomla! TYPO3
Apache
recommended,
Application Server PHP 4.3.3+ any server that PHP 4.3.0+
supports PHP
and MySQL
Approximate Cost Free $0 Free

2 .3 Ana li si d i CMS Pag ina 19
MySQL,
MySQL,
Database MySQL PostGreSQL,
Postgres
Oracle, MSSQL
License GNU GPL GNU GPL GNU GPL
Operating System Any Any Any
Programming Language PHP PHP PHP
Root Access No No No
Shell Access No No No
Web Server Apache, IIS Apache Apache, IIS
Security Drupal Joomla! TYPO3
Audit Trail Yes No Yes
Captcha Free Add On Yes Free Add On
Content Approval Yes Yes Yes
Email Verification Yes Yes Yes
Granular Privileges Yes No Yes
Kerberos Authentication No No Free Add On
LDAP Authentication Free Add On Free Add On Free Add On
Login History Yes Yes Yes
NIS Authentication No No Free Add On
NTLM Authentication Free Add On No Free Add On
Pluggable Authentication Yes No Free Add On
Problem Notification No No Yes
Sandbox No No Yes
Session Management Yes Yes Yes
SMB Authentication No No Free Add On
SSL Compatible Yes No Yes
SSL Logins No No Yes
SSL Pages No No Free Add On
Versioning Yes Yes Yes
Support Drupal Joomla! TYPO3
Certification Program No No No
Code Skeletons Yes No Free Add On
Commercial Manuals Yes Yes Yes
Commercial Support Yes Yes Yes
Commercial Training Yes Yes Yes
Developer Community Yes Yes Yes
On-line Help Yes Yes Yes
Pluggable API Yes Yes Yes
Professional Hosting Yes Yes Yes
Professional Services Yes Yes Yes
Public Forum Yes Yes Yes
Public Mailing List Yes No Yes
Test Framework Free Add On No Free Add On
Third-Party Developers Yes Yes Yes
Users Conference Yes Yes Yes
Ease of Use Drupal Joomla! TYPO3
Drag-N-Drop Content Free Add On No Free Add On
Email To Discussion Free Add On Free Add On Free Add On
Friendly URLs Yes Yes Yes
Image Resizing Free Add On Yes Yes
Macro Language Free Add On Yes Yes
Mass Upload Free Add On No Free Add On
Prototyping Limited Yes Free Add On
Server Page Language Yes Yes Yes
Site Setup Wizard Limited
Spell Checker Free Add On No Yes
Style Wizard Limited No Yes
Subscriptions Free Add On No Free Add On

Pa gi na 2 0 2 .3 Anal isi di CMS
Template Language Limited Yes Yes

UI Levels No No Yes
Undo Limited No Yes
WYSIWYG Editor Free Add On Yes Yes
Zip Archives No No Free Add On
Management Drupal Joomla! TYPO3
Advertising Management Free Add On Yes Free Add On
Asset Management Yes Yes Yes
Clipboard No No Yes
Content Scheduling Free Add On Yes Yes
Content Staging Free Add On No Free Add On
Inline Administration Yes Yes Yes
On-line Administration Yes Yes Yes
Package Deployment No No Yes
Sub-sites / Roots Yes Yes Yes
Themes / Skins Yes Yes Yes
Trash No Yes Free Add On
Web Statistics Yes Yes Free Add On
Web-based Style/Template
Yes Yes Yes
Management
Web-based Translation
Yes Free Add On Yes
Management
Workflow Engine Limited No Limited
É possibile notare innanzi tutto il fatto che i dati di Joomla! risultano poco
aggiornati ad oggi. Questo è un aspetto importante, tuttavia non fondamentale
in quanto la versione 1.0.x era comunque quella disponibile come release
“stabile” al tempo della scelta del sistema.
2.3.1 Drupal
Drupal è un prodotto software che permette a un privato a una comunità di
utenti di pubblicare, gestire e organizzare una grande varietà di contenuti su un
sito web[24]. Decine di migliaia di persone e organizzazioni hanno usato Drupal
per allestire diversi generi di siti web, inclusi:
● Portali web delle community e siti di discussione.
● Siti web “corporate”, portali intranet.
● Siti web personali.
● Applicazioni di E-Commerce.
● Direttori di risorse.

2 .3.1 D ru pal Pa gi na 2 1
Drupal include caratteristiche che permettono la gestione dei contenuti,

blog, ambienti di authoring collaborativo, forum, newsletter, gallerie di
immagini, upload e download di file e molto altro. Drupal è un software Open
Source rilasciato sotto licenza GPL ed è mantenuto e sviluppato da una
community di migliaia di utenti e sviluppatori. Drupal è scaricabile ed
utilizzabile liberamente.
Drupal è relativamente giovane se comparato agli altri CMS, tuttavia il

framework sembra ben realizzato, robusto ed estendibile e la community è
parecchio coinvolta nello sviluppo.
Molte delle funzioni richieste sono disponibili come moduli aggiuntivi da

inserire nelle funzionalità core. [25]
Il fatto che, come detto, si tratti di un prodotto recente, è stato il principale

motivo per cui si è deciso di non usare questa piattaforma: il lavoro di Stage
prevedeva infatti la necessità di una diffusione notevole, per garantire massimo
supporto possibile.
2.3.2 Mambo e Joomla!

L'installazione di default di Mambo Open Source è facile. Il programma di
setup utilizza un'interfaccia “wizard” che permette in quattro passi di installare
l'intero sistema senza la necessità di conoscenze tecniche avanzate. Una volta
installato, il sistema include una varietà di template tra cui scegliere e un gran
numero di funzionalità pronte all'uso. Il contenuto può essere aggiunto,
modificato o manipolato senza conoscenze di HTML, XML o DHTML: è
sufficiente inserire il testo utilizzando un editor e selezionare il comando
“Pubblica”. Utenti più avanzati saranno in grado di controllare il sistema nel
modo che più si addice alla loro abilità. I file del sistema “core” sono scritti in
PHP e possono essere facilmente modificati. Il sistema è robusto, collaudato e
sostenuto da un'ampia community di utenti e sviluppatori professionisti. La
gestione dei template avviene tramite un sistema di tag, all'interno dei quali
viene sostituito il contenuto. La qualità dell'output (nell'ottica di un sito

Pa gi na 2 2 2 .3.2 Ma mb o e J o o ml a !
rispondente alle specifiche del W3C) dipende quindi dalla qualità del codice che
verrà sostituito all'interno dei tag. [24]
Mambo è molto popolare e sembrava offrire un'installazione molto semplice

e un'interfaccia di amministrazione facile da usare[25]. Solitamente poco
considerata, la gestione di un CMS è molto importante quando si tratta di
affidare la stessa ai propri clienti (cioè se il sito web viene realizzato per conto di
terzi).
Joomla! è un CMS totalmente Open Source, nato dalla scissione del

precedente progetto denominato Mambo e realizzato totalmente in PHP.[26]
Mediante l'interazione con un database (MySQL è il database di riferimento ma
non l'unico utilizzabile), il prodotto è in grado di pubblicare sul web contenuti di
varia natura e di gestirne l'archiviazione e la formattazione mediante l'utilizzo di
template e fogli di stile CSS, in modo simile alla gran parte dei CMS.
Quando mi sono trovato a effettuare la scelta tra i CMS, la versione di

Joomla! considerata stabile era una di quelle derivate in seguito alla scissione da
Mambo, ovvero una delle 1.0.x. Era disponibile anche la versione Beta 1.5,
recentemente divenuta Release Candidate, che si distacca definitivamente
dall'eredità lasciata dal progetto Mambo. La necessità di optare per una
soluzione che fosse quanto più stabile e supportata possibile ma che nel
contempo avesse un futuro certo e non prossima all'abbandono da parte dagli
sviluppatori, mi ha portato a scartare questo CMS.
2.3.3 TYPO3
TYPO3 è un Enterprise CMS Open Source rilasciato sotto licenza GPL.[24]
Viene utilizzato da più di 122.000 server in tutto il mondo, è stato tradotto in 43
lingue ed è attivamente sviluppato da una community di oltre 27.000 utenti in
60 Paesi. Tra i suoi utilizzatori compaiono BASF, DaimlerChrysler, EDS,
Konika-Minolta, Volkswagen, UNESCO e altre numerose università, agenzie
governative e organizzazioni non-profit.

2 .3.3 T Y PO3 Pa gi na 2 3
TYPO3 si è espanso molto rapidamente. Il maggiore gruppo di utilizzatori

sono PMI data la difficoltà nell'apprendimento dell'utilizzo di TYPO3, che
rappresenta un ostacolo per gli utenti privati.
Molti marchi famosi hanno affidato la gestione dei propri documenti al

sistema TYPO3, usando sistemi enterprise Open Source nelle proprie intranet e
in altri ambienti critici, dimostrando la validità di tali sistemi.
TYPO3 è gigantesco nel numero di linee di codice. Ha anche un gran numero

di collaboratori e di caratteristiche fornite dalle estensioni. Come è prevedibile,
la curva di apprendimento è molto ripida. TYPO3 può fare tutto quello che viene
chiesto, a patto di imparare a utilizzarlo.
Il sistema per la realizzazione dei template,basato su standard xHTML e fogli

di stile CSS, è complesso ma molto potente.
Un difetto riscontrato è l'aspetto dell'interfaccia di controllo, che appare un

po' “vecchio stile” rispetto alla concorrenza, più recente e caratterizzata da una
certa “freschezza” nei colori, nelle icone e nella disposizione degli elementi.
Esistono moltissimi altri sistemi per la gestione dei contenuti. Molti di essi
hanno un target specifico riguardo all'utenza e alle funzioni offerte. Un esempio
su tutti è il famoso e diffusissimo WordPress (definito come un “semantic
personal publishing platform”, cioè piattaforma per la pubblicazione personale
di testi sul World Wide Web), sebbene sia a tutti gli effetti un CMS e possa
essere preso in considerazione a buon diritto da parte di chi debba dedicarsi allo
sviluppo di un sito web personale o per una piccola organizzazione. Esso però
non rispecchia le necessità individuate per questo progetto di Stage.
Altri CMS, invece, sono basati su piattaforme diverse rispetto a quella di

riferimento per il progetto di Stage (il sistema LAMP), come ad esempio Plone o
Ruby On Rails. Il primo, pur essendo sviluppato in PHP, utilizza come base di
dati il DBMS a oggetti ZODB (Zope Object Database) mentre il secondo più che
un CMS vero e proprio è una piattaforma che permette la creazione di un CMS,
utilizzando il linguaggio di programmazione orientato agli oggetti chiamato

Pa gi na 2 4 2 .3.3 T YPO 3
Ruby. La creazione di un CMS dal nulla è certamente interessante ma date le

restrizioni di tempo era preferibile utilizzare un CMS preesistente su cui poi
lavorare.
2.4 TYPO3: il CMS adottato
2.4.1 Ragioni della scelta

In base alle considerazioni fatte nella sezione 2.3, dopo una prima analisi i
CMS tra cui scegliere si sono ridotti a due: TYPO3 e Drupal. Entrambi offrivano
caratteristiche interessanti e mettevano a disposizione parecchie risorse per gli
sviluppatori:
● Documentazione in formato elettronico.
● Localizzazione della documentazione.
● Gruppi di discussione.
● Community di sviluppatori, anche in lingua italiana.
Tuttavia, la quantità di documentazione disponibile relativa a TYPO3 e la

relativa “giovinezza” di Drupal, sono stati l'ago della bilancia in questa scelta.
In particolare, sebbene le fonti evidenziassero la ripida curva di

apprendimento[27][28] relativa a TYPO3, la versatilità e la potenza degli
strumenti messi a disposizione da questo software era indubbia, in particolare
era interessante il motore per la creazione dei template personalizzati (che
consente di adattare il CMS alla veste grafica esistente del sito web).
L'organizzazione dei contenuti in un unico repository simile a un file system

(Unix o Win), il menu contestuale all'interno delle pagine di amministrazione,
la quantità di estensioni disponibili, la possibilità di creare menu grafici
dinamici all'interno dell'applicazione e la gestione dei permessi di accesso

2 .4.1 Rag io ni de ll a sc el ta Pag ina 2 5
hanno costituito i motivi decisivi per scegliere TYPO3 durante lo svolgimento di

questo progetto.
A essi si aggiungono caratteristiche[29] positive comuni a molti altri CMS,

ovvero:
● Licenza GPL (quindi software “libero” Open Source).
● Supporto a MySQL e PHP.
● Costi nulli per l'acquisto di licenze, per l'intera piattaforma.
● Editor WYSIWYG (What You See Is What You Get) per la

gestione del testo.
● Gestione e manipolazione delle immagini all'interno del CMS

tramite le librerie GD e ImageMagick.
● Impostazioni avanzate della visualizzazione delle pagine, quali

intervalli di visibilità e permessi di accesso.
● Disponibilità di componenti base già sviluppati.
● Sviluppo e manutenzione in remoto grazie all'interfaccia web.
TYPO3 (in Figura 2.2 il logo ufficiale) inoltre abbraccia il concetto di

separabilità dei ruoli all'interno del team di sviluppo, individuati in tre figure
principali (Redattore, Amministratore, Sviluppatore) per le quali sono stati
progettati l'interfaccia e gli strumenti di lavoro.
TYPO3 è stato uno dei primi sistemi che ha reso modulare le proprie
funzionalità su diversi livelli. Dall'immagazzinamento (storage) dei dati alla
pubblicazione, questi livelli descrivono classi o moduli. Il livello di storage
contiene le API per la connessione di TYPO3 a diversi tipi di Database oppure
file XML attraverso i cosiddetti handler. D'altro lato TYPO3 ha a propria
disposizione API per estendere il software core, detti “extension system”, che si
connettono a TYPO3 tramite il TYPO3 Extension Manager, che ha anche la
funzione di IDE.

Pa gi na 2 6 2 .4.1 Rag io ni de ll a sc el ta
Le estensioni possono aggiungere funzionalità e interfacce a tutti i livelli del

software senza modificarne il core, permettendo quindi facilità di
aggiornamento e una base stabile del codice. Tutti i distributori di software di
gestione dei contenuti hanno adottato un simile approccio modulare, portando
alla nascita di molti sistemi CMS Open Source simili a TYPO3, ognuno dei quali
segue i propri differenti concetti tecnici circa le singole API.
Figura 2.2.: Logo ufficiale di TYPO3.
2.4.2 Struttura
La suddivisione più semplice per descrivere l'organizzazione di TYPO3 è
quella in front-end e back-end.
Per front-end si intende quella parte del programma che interagisce

direttamente con l'utente, mentre il back-end comprende i componenti che
gestiscono le informazioni e inviano l'output al front-end. Sebbene da questa
definizione possa sembrare che il back-end sia una parte del software
inaccessibile e automatizzata, in TYPO3 possiamo riferirci ad essa come
l'amministrazione, o il pannello di controllo, dell'intero sistema. Qualunque sia
l'interfaccia grafica scelta per mostrare le informazioni, il back-end ha una
propria interfaccia, i propri utenti (separati da quelli del front-end) e permette
la gestione dei contenuti e delle informazioni in modo nettamente separato da
come vengono mostrate all'utente finale, consentendo di modificare
separatamente impaginazione, contenuti, dati e installazione del software.

2 .4.2 St rut tu ra Pa gi na 2 7
In realtà la suddivisione è molto più complessa ed è schematizzata in Figura

2.3. I componenti[30] sono:
● Interfaccia unificata: sebbene le funzionalità di TYPO3 siano

in gran parte fornite dalle estensioni, tutte queste si inseriscono in
un'unica interfaccia unificata che fornisce, sia all'utente finale sia
all'amministratore del back-end, un unico insieme di funzioni.
● Livello Server: alla base di TYPO3 si trova il linguaggio di

scripting PHP e i server MySQL e APACHE.
● Core: codice controllato e sviluppato dal Core Group
● Estensioni: parti di codice con un netto confine rispetto al Core

ma che a esso si interfacciano per estendere le funzionalità. Sono create e
gestite dai contribuenti alla community e sottoposte a revisione da parte
di alcuni addetti del Core Group.
● Front-end: il sito web è presentato attraverso la formattazione

dei contenuti (template) usando le estensioni disponibili, quando
necessario.
● Back-end: il contenuto è amministrato attraverso le funzioni

core e da un set di estensioni apposite.
2.4.3 Ruoli degli utenti

TYPO3 offre supporto a diversi tipi di utenti[31], rispondendo alle necessità
di ciascun gruppo.
● Editor (Redattore): esistono vari livelli di questo utente, a

seconda delle necessità dell'azienda e del numero di collaboratori: si va
dalla semplice aggiunta di notizie nell'apposita pagina alla creazione e
modifica della grafica del sito. Qualunque sia il livello in cui opera, il
ruolo di questo utente è generalmente relativo a modifiche del front-end,
con accesso al back-end limitato.

Pa gi na 2 8 2 .4.3 Ru o li deg l i u te nti
Figura 2.3.:Diagramma della struttura di TYPO3.
● Administrator (Amministratore): il suo ruolo è quello di gestire il

sistema in modo da renderlo disponibile agli utenti finali. In genere, oltre
al completo accesso al software, ha anche accesso al server sul quale
TYPO3 è installato. Crea i template TypoScript, installa e rimuove
estensioni e le configura per le necessità dei redattori. L'amministratore,
al contrario del redattore, concentra il proprio lavoro sul back-end del
sistema.
● Developer (Sviluppatore): lo sviluppatore ha il ruolo di creare

nuove estensioni del sistema e modificare parti del Core di TYPO3.
Nell'ambito del lavoro di Stage, il ruolo che ho rivestito nei confronti di

TYPO3 si posiziona tra l'Amministratore e lo Sviluppatore: mi è stato infatti

2 .4.3 Ruo l i d eg li ut ent i Pag ina 2 9
necessario acquisire nozioni e concetti propri della sfera di sviluppo del software
per poter apportare le modifiche essenziali per l'adattamento e il corretto
funzionamento delle estensioni. Successivamente ho dovuto concentrarmi sul
lavoro di amministrazione: scrittura del codice TypoScript, personalizzazione
delle estensioni, configurazione dell'intero sistema. Non mi è poi mancata una
parte di lavoro nel ruolo di redattore, vale a dire l'inserimento dei dati e delle
informazioni per la realizzazione del sito dell'azienda ospitante.
2.4.4 Community
La community TYPO3 è un gruppo internazionale e in rapida crescita di
appassionati e di utenti di TYPO3. Le mailing list rappresentano il centro della
comunità alle quali chiunque può accedere, anche usando software con
supporto ai newsgroup, per la lettura delle discussioni riguardanti i vari aspetti
del software, oppure per la partecipazione attiva richiedendo informazioni o
mettendo a disposizione la propria conoscenza per aiutare gli altri utenti.
Grazie alla community, come in molti altri progetti Open Source, si

garantisce un supporto rapido e pratico, anche per i problemi più complicati, a
patto di rispettare i canoni della netiquette nella formulazione delle richieste. Il
supporto viene quindi nella maggior parte dei casi fornito da persone (altri
utenti e sviluppatori) che con buona probabilità si sono già trovati ad affrontare
i problemi in questione e quindi possono proporre soluzioni pratiche e non
teoriche e, soprattutto, quando più voci concorrono a fornire un aiuto, è
possibile che vengano esposte varie modalità e che quindi almeno una delle
soluzioni proposte possa risolvere il problema nel nostro specifico caso. Più di
una volta mi sono trovato nella situazione di avere necessità di aiuto ulteriore
rispetto alle informazioni contenute nei manuali: nella maggior parte dei casi,
avvalendomi dei motori di ricerca, è stato possibile individuare messaggi nei
forum o nelle mailing list inseriti da persone che si erano già trovate nella mia
stessa situazione (evitando così messaggi duplicati); in altre situazioni mi è stato
necessario richiedere personalmente aiuto e informazioni, nel qual caso ho

Pa gi na 30 2 .4.4 Co mm uni ty
ricevuto la risposta dallo sviluppatore stesso della extension con cui avevo
incontrato difficoltà, a riprova della validità di un simile sistema.
Per superare le difficoltà che si incontrano, specialmente nelle prime fasi

dello sviluppo, è sufficiente leggere con attenzione le fonti ufficiali di aiuto
messe a disposizione dal sito typo3.org : FAQs (Frequently Asked Questions),
manuali in formato elettronico, video tutorial e guide on-line; oppure acquistare
il libro ufficiale di TYPO3. Esistono anche traduzioni in italiano di alcuni articoli
al sito typo3.it[32], che tuttavia coprono solo la documentazione introduttiva al
CMS.
Da segnalare il fatto che, chi desiderasse conoscere di persona gli

sviluppatori e altri membri della comunità di TYPO3, vengono organizzati a
cadenze regolari delle conferenze (in genere nell'area tedesca, dato che è questa
la nazione degli sviluppatori) chiamate TyCON3 con seminari legati
all'approfondimento del CMS e tempo libero volto a favorire le conoscenze tra i
membri della comunità.
Nel Novembre 2004 un gruppo di persone della TYPO3 community, incluso

Kasper Skårhøj (ideatore di TYPO3) e altri partecipanti da lungo tempo, hanno
fondato un'organizzazione non-profit chiamata TYPO3 Association. L'obiettivo
principale di questa organizzazione è di supportare lo sviluppo del core con un
ritmo più costante e migliorare la trasparenza e l'efficienza di vari aspetti del
progetto TYPO3.
Altri obiettivi di questa associazione sono l'organizzazione di eventi per

l'informazione e l'addestramento dei propri membri, la comunicazione con il
pubblico per la diffusione dell'uso del software TYPO3, la certificazione del
prodotto per garantire degli standard qualitativi elevati e il supporto delle
versioni internazionali localizzate del software. Esistono due tipi di
tesseramento, suddivisi in Active Members e Supporting Members: la seconda
modalità è aperta a chiunque e permette l'invio di fondi e supporto
all'associazione, la prima invece è accessibile su invito ed è riservata a chi ha
collaborato con l'associazione da lunga data. Solo ai membri attivi è riservato il
diritto di voto sul futuro dell'associazione. [17]

2 .5 GN U Ge nera l Pu bli c Li ce nse Pa gi na 31
2.5 GNU General Public License
Il software TYPO3 è rilasciato sotto licenza GNU GPL[33]. Desidero parlare

brevemente di questo tipo di licenza software, nonostante siano già state spese
parole sull'argomento.
La licenza GNU GPL (GNU General Public License) è una licenza per il
software libero, inizialmente scritta da Richard Stallman per il Progetto GNU
(GNU's Not Unix). Costituisce il più famoso e popolare esempio di licenza
copyleft (gioco di parole della parola copyright), cioè dell'utilizzo delle leggi sui
diritti d'autore per rimuovere le restrizioni anziché aggiungerne, che richiede
che i lavori derivati da prodotti rilasciati sotto licenza GPL siano resi disponibili
secondo gli stessi diritti. Basandosi su questa filosofia, i destinatari di un
software rilasciato sotto GPL possono dichiararsi quindi possessori di “software
libero” e i diritti di copyleft utilizzati garantiscono che questa libertà sia
conservata, anche quando il prodotto viene modificato o sono effettuate
aggiunte.

3 Programmazione
TYPO3
TypoScript, struttura dell'albero

delle pagine del CMS, analisi della
programmazione front-end,
template e layout.
Pa gi na 34 3.1 T ypo Scri pt
3.1 TypoScript
Un CMS deve essere in grado di gestire vari tipi di contenuto sotto varie
forme dato che, come detto in precedenza, si basa sulla separazione dei
contenuti dalla presentazione.
TYPO3 si occupa di questo con l'introduzione di TypoScript (TS), che

permette la creazione personalizzata di template di output, garantendo massimo
controllo sulla formattazione del risultato e del layout, più di quanto
permettono i tradizionali template HTML.
TypoScript può essere considerato un linguaggio (ma non un vero e proprio

linguaggio di programmazione) per la creazione di template con TYPO3.
Utilizzando TypoScript è possibile non solo inserire contenuto dinamico

all'interno di un template, ma anche influenzare in dettaglio l'aspetto dell'output
(cioè il front-end). Il layout di base può essere generato interamente in TYPO3,
oppure essere basato su un file HTML usato come template (come in questo
caso). Per la navigazione è possibile usare menu basati su immagini, testo, vari
layer, Flash oppure un semplice menu di selezione. I menu vengono generati
dinamicamente e l'aspetto di ognuno di essi può essere specificato
individualmente. É possibile creare elementi grafici da testo e immagini durante
l'esecuzione del programma o controllare l'impaginazione e i contenuti
dell'output indipendentemente dal momento o dagli utenti connessi. Anche il
comportamento del back-end per ogni utente è controllato via TypoScript.
TypoScript si comporta da mediatore tra le informazioni e le funzioni che

sono implementate nel core di TYPO3 tramite PHP, oppure aggiunte tramite le
estensioni. In questo modo, TypoScript può essere visto come un layer
intermedio per trasmettere le informazioni alle funzioni di sistema.
Per evitare fraintendimenti, è meglio specificare innanzi tutto cosa non è

TypoScript prima di definire cosa sia effettivamente.

3.1 T ypo Sc ript Pa gi na 35
TypoScript non è né un linguaggio di programmazione né un linguaggio di

scripting, quindi non può venire comparato a Java, PHP o JavaScript; ad
esempio, non è possibile usare strutture di controllo (for, while, ...).
TypoScript ha la funzione di “trasportare informazioni”, e non viene in alcun
modo “eseguito” come i classici linguaggi di programmazione.[34]
TypoScript ha una sintassi tramite la quale informazioni gerarchiche

possono essere definite in una struttura ad albero tramite semplice testo ASCII.
In questo modo, qualunque informazione può essere passata tramite TypoScript
all'interfaccia del sistema, ma solo gli oggetti e le proprietà richieste dal sistema
influenzano il comportamento del back-end e del front-end e sono disponibili
solo gli oggetti e le proprietà descritte nella documentazione di TYPO3.
Per fare un esempio pratico[35], agli utenti dei sistemi Windows è familiare
il concetto di struttura gerarchica di informazioni del sistema con l'utilizzo del
Registro di Configurazione, che mostra i valori come oggetti (Figura 3.1).
In modo simile, oggetti individuali configurati con TypoScript sono inseriti

in una struttura ad albero. Il sotto-modulo TypoScript Object Browser (collocato
all'interno del modulo Template) rappresenta[17] questa gerarchia in
un'interfaccia grafica.
Desidero illustrare la relazione tra TypoScript e PHP all'interno di TYPO3,

servendomi di alcuni utili esempi tratti dal manuale TYPO3. Nonostante si
possa creare il proprio output in qualunque forma utilizzando PHP, come regola
viene utilizzato TypoScript Front-end Engine (TSFE) quando viene richiamata
una pagina web del sito tramite il file index.php (tslib/index.php): questa ha il
compito di analizzare le informazioni contenute nel template di ciascuna pagina
del sito.
I valori e gli oggetti dei record di template, strutturati dal layer intermedio di
TypoScript, sono elaborati da PHP.
● L'informazione è inserita dal sistema in un array multidimensionale di

PHP, utilizzando la classe t3lib_TSparser

Pa gi na 36 3.1 T ypo Scri pt
(t3lib/class.t3lib_tsparser.php). Questo array è disponibile in alcune

applicazioni e funzioni di TYPO3.
● Se l'informazione viene inserita in un array PHP che non viene utilizzato

dalle funzioni delle classi di TYPO3, si comporta come le variabili create
in PHP che non vengono richieste. Sono ignorate ma non vengono
restituiti errori.
Figura 3.1.: Registro di configurazione di Microsoft Windows.
Un esempio per chiarire questo concetto: nel codice TypoScript riportato qui
sotto l'informazione, dopo il parsing di PHP, viene inserita in un array
multidimensionale.
myObject.property1 = value_x
myObject.property2 = value_y
myObject.property2.property3 = value_z
In PHP l'array sarebbe creato direttamente, in questo modo:

3.1 T ypo Sc ript Pag ina 37
$TS['myObject.']['property1'] = 'value_x';
$TS['myObject.']['property2'] = 'value_y';
$TS['myObject.']['property2.']['property3'] =
'value_z';
o, alternativamente:
$TS = array(
'myObject.' => array(
'property1' => 'value_x',
'property2' => 'value_y',
'property2.' => array (
'property3' => 'value_z'
)
)
)
Un array può anche essere mostrato utilizzando la funzione debug() di

TYPO3 che restituisce il risultato nella Tabella 2.
property1 value_x
property2 value_y
myObject property3 value_z
property2.
Tabella 2: Array myObject.
TYPO3 fornisce TypoScript Object Browser, un tool per mostrare e

modificare TypoScript. Questo codice di esempio viene mostrato come in Figura
3.2.
3.2 Struttura, albero delle pagine

e contenuti
Il primo importante concetto da affrontare nell'utilizzo di TYPO3 è quello di

pagina (Page).

Pa gi na 38 3.2 Stru tt ura , al bero de ll e pa g ine e c o ntenu ti
Figura 3.2.: Codice all'interno di TypoScript Object Browser.
Una pagina non contiene alcun elemento al suo interno: è semplicemente

una cornice, un contenitore, per gli elementi che a essa vengono assegnati. Ogni
pagina ha un numero di identificazione univoco assegnato (ID), ed è tramite di
esso che si accede alla pagina sia nel front-end che nel back-end. Esso rimane
invariato ovunque si sposti la pagina e anche se la pagina dovesse essere
cancellata, quel numero non verrà più utilizzato. La pagina superiore a essa,
invece, è indicata nel campo PID (parent ID).
La tabella del database chiamata pages è la struttura portante di TYPO3:

fornisce la struttura gerarchica delle pagine nella quale sono posizionati tutti i
vari record gestiti dal CMS. La tabella delle pagine può essere compresa come
una serie di cartelle in un hard disk e tutti i vari record costituiscono i file che
appartengono a una di queste cartelle.
La struttura del sito viene mostrata nel Page Tree (l'albero delle pagine), un
principio comune in informatica. Il simbolo del globo in cima alla colonna
indica il livello di root (radice) dell'albero, al quale sono aggiunte le pagine che
vengono create, che formano concettualmente i rami e le foglie dell'albero.
Interi gruppi di pagine possono essere spostati, inseriti all'interno di altre
pagine o semplicemente il loro ordine può essere cambiato. In base alle icone

3.2 St rut tu ra, a lbe ro del le pag i ne e co nte nut i Pa gi na 39
mostrate, è inoltre possibile distinguere vari tipi di pagine, ognuno

caratterizzato da comportamento e funzionalità proprie.
Ogni tipo di pagina ha i seguenti elementi in comune: Tipo (Type), Titolo

Pagina (Page Title), Impostazioni di localizzazione (Localization settings) e
Opzioni generali (General options).
Per semplificare i lavori di routine, TYPO3 fornisce una serie di tipi[17] di

pagina predefiniti che differiscono tra di loro per le funzionalità e aspetto nel
front-end.
Standard
Il tipo di pagina Standard è solitamente sufficiente per la maggior parte degli

utilizzi: fornisce una semplice selezione degli elementi principali della pagina.
Advanced
Il tipo Avanzato di pagina fornisce parecchi vantaggi: possono essere

specificate informazioni “meta” e possono essere integrati file e plug-in (cioè
funzionalità offerte dalle estensioni). É inoltre possibile fornire un titolo pagina
diverso dal proprio nome, che comparirà come titolo nel browser web
dell'utente.
External URL
In questo caso la pagina contiene un riferimento a un indirizzo URL esterno

al sito, ad esempio un indirizzo web, FTP o email. La pagina stessa non ha alcun
tipo di contenuto, ed è usato per integrare link ad applicazioni esterne
all'interno dei menu.
Shortcut
La pagina Shortcut (letteralmente “scorciatoia”) funziona allo stesso modo

dell'External URL, con la differenza che la pagina a cui ci si riferisce è interna al
sistema. Per esempio può essere utilizzata per avere un link alla pagina “Home”
del sito web.
Not in menu

Pa gi na 4 0 3.2 Stru tt ura , al bero de ll e pa g ine e c o ntenu ti
É un tipo speciale di pagina la cui caratteristica è quella di non comparire nei

menu del sito web: per accedervi è necessario conoscere l'ID della pagina ed è
per esempio utile quando si sta lavorando a una sezione del sito che non è
ancora accessibile in quanto in via di completamento.
SysFolder
Quella che più si discosta dal concetto di “pagina” a cui solitamente tutti
fanno riferimento è il tipo di pagina detto “Cartella di sistema”. Nonostante sia
un oggetto di tipo “pagina”, infatti, esso viene rappresentato con l'icona di una
cartella e fornisce un contenitore di informazioni. Non viene mostrato
all'interno dei menu e, nonostante possa contenere pagine, viene solitamente
utilizzato per la gestione delle informazioni e dei record che non vengono
mostrati nel front-end (in questo progetto sono state utilizzate SysFolder per
contenere informazioni sugli utenti del front-end e i file di configurazione per il
template del sito).
A ogni pagina possono essere associati permessi di accesso, rendendole

visibili o accessibili solo a determinati utenti o gruppi di utenti del front-end.
In base alla struttura del database di TYPO3, la tabella delle pagine occupa
un ruolo centrale all'interno di esso. Visto che l'ID della pagina è unico, ognuna
di esse può essere collegata e referenziata dalle altre. La struttura ad albero del
sistema permette di organizzare non solo la tabella delle pagine ma tutti i
contenuti del sito web: tutti i record della tabella tt_content, che ha al suo
interno i dati dell'intero sistema (i contenuti delle pagine), hanno assegnato un
identificatore univoco (UID) e sono collegati tra di essi tramite il PID della
pagina corrispondente, in relazione al punto in cui sono stati creati.
3.3 Front-end
Con il termine front-end (FE) ci si riferisce[36] generalmente all'estensione di

sistema installata nella directory typo3/sysext/cms/, che è resa accessibile

3.3 F ro nt -e nd Pag ina 4 1
all'installazione di TYPO3 tramite il link simbolico tslib/ nella directory di

installazione del pacchetto “dummy”. Si sta parlando di quello che è il sito web
mostrato all'utente o, come lo chiamano alcuni il “motore per la pubblicazione”.
Si tratta, quindi, della parte responsabile di mostrare il contenuto del sistema
nel browser web.
Il fatto che si tratti di un'estensione (sebbene di sistema, e quindi

impossibile da modificare o rimuovere) fa sì che, teoricamente, potrebbero
esistere altri front-end.
Proprio come il back-end, nuove funzionalità possono essere aggiunte al

front-end tramite l'uso di estensioni[17], ed è possibile sviluppare le proprie
tramite un tool chiamato Kickstarter, che mette a disposizione un framework
per lo sviluppo di estensioni compatibili con il front-end di TYPO3. Le
applicazioni per il front-end possono essere costituite semplicemente da alcune
linee di codice TypoScript, oppure essere un'intera applicazione PHP con tanto
di tabelle del database.
3.3.1 Processo di rendering

Il setup di default del front-end di TYPO3 prevede che il file index.php
riceva tutte le richieste e determini conseguentemente cosa fare.
Il processo di rendering[17] di una pagina è il principio del funzionamento

dello script tslib/index_ts.php.
● Durante la fase di inizializzazione vengono impostate le costanti,

viene stabilita una connessione al database e sono integrate le librerie di
front-end.
● Viene creata la variabile globale $TSFE della classe tslib_fe, che

controlla il processo di rendering.
● Viene creato l'oggetto per l'autenticazione degli utenti di front-

end e per la gestione delle sessioni.

Pa gi na 4 2 3.3.1 Pro ce sso di rend eri ng
● Se è attivo un utente di back-end, sono inizializzate funzioni

addizionali come la modifica di front-end e Admin Panel (pannello di
amministrazione).
● Viene inizializzato TypoScript Front-end Engine.
● Se disponibile, la pagina completa viene letta dalla cache del

database.
● L'array config viene letto dal setup di TypoScript.
● Vengono letti i dati di base da $TCA (array contenente tutti i

cambiamenti della tabella del database in cui, nell'oggetto tt_content,
vengono immagazzinati i contenuti della pagina).
● Viene determinata la localizzazione da utilizzare.
● Vengono elaborati i dati trasmessi, per esempio quelli di un form.
● Se la pagina non può essere letta dalla cache, viene mostrata dal
setup di TypoScript e scritta nella cache.
● Gli oggetti che non sono immagazzinati nella cache (cObjects)

sono mostrati e inseriti nell'output: PHP_SCRIPT_INT, USER_INT,
PHP_SCRIPT_EXT.
● La pagina, una volta effettuato il rendering, viene mostrata con il

comando echo().
● Vengono salvati i dati della sessione dell'utente di front-end.
● Vengono scritti i dati del log.
● Se richiesto, viene inserito un box di preview se un utente di

back-end ha richiesto un'anteprima della pagina.
● Se attivato nel pannello di amministratore, viene scritto un file

HTML statico.
● Viene inserito il pannello di amministrazione, se configurato.
● Se è installata un'estensione di debug, viene effettuata la

chiamata in modo che possa gestire l'output.

3.3.2 API Pag ina 4 3
3.3.2 API
Oltre alle librerie t3lib, sono disponibili altre librerie e oggetti nel front-end.
Il processo di rendering produce la struttura di oggetti illustrata di seguito.
$TSFE (tslib_fe)
|
---> fe_user (tslib_feUserAuth)
|
---> sys_page (t3lib_pageSelect)
|
---> cObj (tslib_cObj)
|
---> myPluginObj (extends tslib_pibase)
|
---> cObj (tslib_cObj)
Nella maggior parte dei casi un'estensione del front-end è un plug-in che
rappresenta una delle classi tslib_pibase. Dal plug-in è possibile quindi avere
accesso diretto alle seguenti classi e oggetti[17]:
tslib_fe
Il TypoScript Front-end Engine (TSFE) è disponibile come variabile globale

per i plug-in tramite $GLOBAL['TSFE']
tslib_cObj
É disponibile come oggetto per plug-in tramite $this->cObj e contiene

metodi per rendering di oggetti TypoScript come, ad esempio, TEXT e IMAGE;
inoltre, in questa classe possono essere trovate anche funzioni come stdWrap o
parseFunc.
tslib_pibase
I plug-in sono un'estensione di questa classe, che offre numerose funzioni

utili per i plug-in.
t3lib_pageSelect
Funzione delle pagine; può essere indirizzata nel front-end tramite l'oggetto
$GLOBALS['TSFE']->sys_page.
t3lib_div

Pa gi na 4 4 3.3.2 API
La collezione di funzioni t3lib_div è disponibile automaticamente nel

front-end.
3.3.3 TSFE
Il TypoScript Front End è disponibile come oggetto per i plug-in nella
variabile globale $TSFE e contiene informazioni, metodi e oggetti. Come già detto
in precedenza, TSFE è l'oggetto centrale che controlla l'intero processo di
rendering del front-end. Per molti plug-in è sufficiente l'utilizzo delle funzioni
degli oggetti t3lib_div e cObj, ma all'interno di questo progetto è stato utile
anche l'utilizzo di sys_language_uid nello sviluppo di un'interfaccia multilingua,
tmpl nell'utilizzo dei template e alcune semplici funzioni utili nel debug
dell'applicazione quali set_no_cache().
Segue un estratto[17] dei dati e degli oggetti presenti nella variabile $TSFE.
$TSFE -> id
uid (identificativo univoco) della pagina corrente.

$TSFE -> page[]
Array contenente il record della pagina corrente.

$TSFE -> sys_page
Oggetto con metodi riferiti alla pagina.

$TSFE -> additionalHeaderData[]
Array per ulteriori dati di header HTML.

$TSFE -> sys_language_uid
ID del linguaggio corrente.

$TSFE -> tmpl
Oggetto template di TypoScript.

$TSFE -> tmpl-setup[]
Array per l'intero setup di TypoScript

3.3.3 T SFE Pag ina 4 5
$TSFE -> pSetup[]
Array del setup TypoScript dell'oggetto pagina.

$TSFE -> config[]
Array di configurazione di TypoScript.

$TSFE -> register[]
Registro di TypoScript.
$TSFE -> cObj
Oggetto cObject centrale; l'oggetto cObject è reso disponibile ai plug-in

tramite $this -> cObj.
$TSFE -> fe_user
Utente del front-end corrente (oggetto).
L'oggetto $TSFE fornisce anche i metodi utili specifici per i plug-in elencati
di seguito.
getStorageSiterootPids()
Restituisce un array con i campi _SITEROOT e STORAGE_PID contenenti

gli ID pagina della pagina di root del sito web e la pagina in cui devono essere
immagazzinati i record.
getPagesTSconfig()
Basato sulla rootline corrente (cioè sul “ramo” in cui si trova la pagina
corrente), questo metodo ritorna l'array TSconfig delle pagine.
setJS()
Imposta codice JavaScript integrato nell'header HTML.

setCSS()
Imposta dati CSS integrati nell'header HTML.

uniqueHASH()
Oggetto template di TypoScript.

Pa gi na 4 6 3.3.3 T SFE
set_no_cache()
Imposta la pagina corrente a non-cacheable (cioè i dati relativi a essa non

sono inseriti nella cache del sistema).
set_cache_timeout_default()
Imposta il timeout per la cache relativa alla pagina corrente
L'estensione FE Debug/Info output (cc_feinfo) fornisce un plug-in

utilizzabile per mostrare nel front-end i valori attuali dell'oggetto $TSFE. Può
essere utile durante il debugging o per avere informazioni relative ai dati
disponibili.
3.3.4 Oggetti contenuto

Gli oggetti di contenuto (content objects, cObjects) sono utilizzati per
trasformare in rendering di front-end i dati dei vari tipi di contenuti messi a
disposizione dal back-end (FILE, HTML, TEXT, ...) e salvati nel database.
Un cObject è un oggetto TypoScript, come ad esempio TEXT, IMAGE, o

HMENU. La generica definizione di un cObject all'interno delle pagine in
TypoScript è la seguente:
# Commento
myObject = OBJECTTYPE
myObject.PROPERTY = value_1
myObject.subObject = OBJECTTYPE
myObject.subObject.PROPERTY = value_2
Nonostante non sia ancora stato affrontata la creazione di una pagina,

desidero comunque rendere più chiaro questo concetto, fondamentale per la
comprensione del funzionamento dell'intero sistema di scripting di TYPO3.
Propongo di seguito alcuni esempi:
1. Il cObject di tipo HTML viene utilizzato per inserire all'interno

della pagina un semplice contenuto di testo senza formattazione. Adesso

3.3.4 Og g e tti co nt enu to Pa gi na 4 7
verrà creato l'oggetto TEXT chiamato 10, il quale avrà un valore assegnato,
cioè “oggetto di testo”.
10 = TEXT
10.value = oggetto di testo
2. Il cObject di tipo IMAGE permette di integrare delle immagini

all'interno degli script in TypoScript. Le immagini hanno la proprietà di
essere dei file, e quindi sono riferite come tali all'interno del linguaggio,
tuttavia ai cObjects di tipo IMAGE possono essere applicate particolari
funzioni per la manipolazione di immagini.
20 = IMAGE
20.file = fileadmin/images/template/nome_immagine.gif
Gli oggetti sono implementati tramite PHP nella classe tslib_cObj

(class.tslib_content.php). Nella stessa classe è possibile anche trovare
funzioni TypoScript come stdWrap o parseFunc.
Nei plug-in c'è un'istanza di tslib_cObj disponibile tramite $this -> cObj.
Questo riferimento all'oggetto è impostato automaticamente durante
l'inizializzazione del plug-in.
Segue un estratto[17] dall'API di di tslib_cObj.
data[]
Rende disponibile il record corrente (dalla tabella tt_content)
cObjGetSingle()
Crea un cObject nel front-end in base al nome che viene passato ( TEXT,
IMAGE, ...) e con il relativo setup di TypoScript.
stdWrap
Funzione “standard wrap”; applicata ai parametri TypoScript specificati,

viene usata per creare un largo numero di opzioni.
enableFields()
Crea una query SQL WHERE che seleziona solo i record validi nelle queries
del front-end.

Pa gi na 4 8 3.3.4 Og g et ti co nte nut o
DbgetUpdate()
Crea uno statement SQL UPDATE da una tabella che gestisce la

configurazione dell'array $TCA.
DbgetInsert()
Simile a DbgetUpdate ma usato per la gestione degli inserimenti di dati.
Nell'implementazione PHP, gli oggetti di contenuto e altri metodi in

tslib_cObj condividono lo stesso concetto di parametri:
function cImage($file,$conf)
function stdWrap($content,$conf)
function typoLink($linktxt, $conf)
Il primo parametro contiene un valore (ad esempio, una stringa) da

manipolare. Il secondo parametro $conf contiene un array di setup TypoScript
che configura il comportamento del metodo.
Anche i plug-in seguono questo concetto, dato che sono chiamati tramite
USER o USER_INT e si aspettano un metodo con i parametri $content e $conf. Nei
plug-in normali, tuttavia, $content non viene utilizzato e può essere ignorato.
3.4 Template
Parlo ora degli oggetti di alto livello o Top Level Objects (TLO). Mentre i
cObjects rappresentano i contenuti della pagina e, in genere, elementi “esterni”
al sistema (immagini, testo, script in PHP, ecc.), i TLO sono utilizzati dal
sistema come contenitori di cObjects, come variabili di configurazione e librerie
di funzioni. Sono quindi la rappresentazione di dati a un livello di astrazione più
elevato rispetto ai cObjects. Ad essi appartiene il TLO di tipo PAGE, che genera
una pagina del sistema, config che contiene al suo interno le variabili di
configurazione del sito web (ad esempio la lingua predefinita del sito), oppure

3.4 T emp l at e Pa gi na 4 9
altri oggetti come variabili temporanee all'interno del codice (generalmente

chiamati temp, ma il nome è a discrezione del programmatore).
I template TypoScript determinano come Front-end Engine dovrà gestire

l'output, ovvero quali contenuti saranno letti dal database, se dovrà essere usato
un template HTML, dove saranno inserite le costanti, e così via. Non solo, la
trasformazione del contenuto del database per l'output del front-end è
controllata dal template di TypoScript, in generale si tratta di quali famiglie di
font, dimensioni e colori saranno utilizzati.
Durante la generazione dell'output (un processo semplificato è presentato in

Figura 3.3)vengono controllate le seguenti aree[17] da parte dei template
TypoScript:
● Cache.
● Statistiche/file di log.
● Dettagli dell'header HTML.
● Tipi di pagina.
● Layout di base (basato su un file HTML).
● Elementi di contenuto (funzioni e aspetto).
● Creazione dei link.
● Integrazione delle estensioni e di eventuali script PHP.
Esistono due tipi di template all'interno di TYPO3: root template e extension

template. Nel lavoro di Stage sono stati utilizzati entrambi, in quella che è
l'implementazione più versatile resa disponibile da questa separazione. Il
concetto di root template indica che un template è inserito alla radice (root,
appunto) del sito web. Ovvero, tutte le pagine dell'albero, nel caso non sia
specificato espressamente un template, ricorreranno a quello del ramo
precedente fino, eventualmente, alla radice del sito web. Questo permette la

Pa gi na 5 0 3.4 T e mp la te
creazione di cascading template (ovvero template “a cascata”) in cui i template

delle “foglie” dell'albero aggiungono funzionalità al template di root qualora
fosse necessario.
Figura 3.3.: Processo di rendering del front-end.
Lo strumento per la creazione dei template si trova nei moduli principali di

TYPO3. Per la navigazione all'interno dei moduli del menu del CMS introduco la
notazione Modulo | Sotto-modulo per indicare quando si seleziona un sotto-
modulo che appartiene ad un modulo principale. Selezionando Web|Template e
utilizzando il tool Template Analyzer è possibile avere una visione globale dei
template esistenti.
Selezionando la singola pagina viene mostrata la gerarchia dei template

applicata a quella pagina. Osserviamo, come detto in precedenza, che quando
lavoriamo all'interno del modulo dei template siamo completamente

indipendenti rispetto al contenuto della pagina. Modificando, eliminando o

creando template all'interno di questo modulo non sarà in alcun modo
influenzato il contenuto ma solamente l'output.
All'interno del sito web installato nell'ambito del progetto di Stage, la pagina
“rootpage” ha associato un template chiamato NEW SITE (nome di default al
momento della creazione). Questo template contiene poche informazioni, salvo
avere al suo interno il collegamento verso un extension template[37] chiamato
BASE TEMPLATE che contiene le informazioni per la generazione dell'output e
per l'impaginazione dei contenuti.
Selezionando il singolo record dei template, TYPO3 mostra il contenuto delle

variabili di configurazione, tuttavia per modificarle è necessario utilizzare il tool
Info/Modify, che permette di cambiare il valore dei campi del template[17],
indicati di seguito.
Template Title
Contiene il nome del template che verrà visualizzato nel back-end. Per
questo campo è possibile specificare le funzioni aggiuntive Deactivated, Start e
Stop, che consentono di stabilire la validità dell'oggetto template.
Website title
É il campo contenente il titolo del sito web, che verrà inserito all'interno del
tag HTML <title></title>.
Constants
Imposta i valori che andranno a sostituire le variabili specificate nel campo

Setup. Sono valori utili per modificare agilmente configurazioni dell'intero
template come, ad esempio, colori e dimensioni dei font.
Setup
Contiene il codice TypoScript che definisce sia il comportamento sia l'aspetto

dell'intera applicazione.
Resources

Resources contiene riferimenti a file che vengono utilizzati all'interno del

codice TypoScript, ai quali si può fare riferimento tramite il tipo di dato
resources.
Clear e Rootlevel
Clear Constants, Clear Setup e Rootlevel sono delle checkbox utilizzate per la
realizzazione di cascading template. In particolare, Rootlevel permette di
definire all'interno di una struttura di pagine quale sarà il punto di partenza
(root) di un intero sito web. Clear Constants e Clear Setup, invece, permettono
di terminare l'eredità di Setup e Constants da parte della corrente pagina
rispetto al template impostato a livello di root.
Include Static
I template statici sono inclusi all'interno di ogni installazione base di TYPO3.

Sono dei modi molto semplici di impaginazione, per quanto già essi
garantiscano la visualizzazione del contenuto.
Include Static (from extensions)
Si tratta di template messi a disposizione dalle estensioni, e quindi

necessitano di essere installati prima di renderli disponibili. Non sono da
considerare come interfacce grafiche predefinite ma piuttosto come applicazioni
messe a disposizione dei designer di template. Ad esempio, CSS_styled_content
permette l'utilizzo di fogli di stile all'interno del template corrente.
Include Basis Template
I Basis Template costituiscono librerie personali che possono essere

realizzate dagli sviluppatori del sito e messi a disposizione per organizzare il
codice TYPO3 in moduli. Questo principio è stato sfruttato all'interno del
progetto di Stage, realizzando un template che viene incluso nel template di root
come estensione.
Static template files from T3 extensions
Offre un menu per la selezione della collocazione dei template messi a

disposizione da parte delle estensioni. Possono essere collocati prima del

template se è impostato a livello di root (impostazione di default) oppure

possono essere inclusi sempre in anticipo oppure mai.
Template on next level
Permette di specificare, qualora ve ne fosse la necessità, un template da

inserire nel livello immediatamente successivo all'attuale.
Description
Offre la possibilità di inserire una breve descrizione del template, visibile

solo nel back-end.
Back-end Editor Configuration.
Utilizzato per passare stili predefiniti all'editor CSS, ma non è correntemente

usato.
Tra i campi del Template Editor, i due più importanti sono Setup e
Constants. Il primo contiene il codice TypoScript, ovvero quello che definisce
tutte le configurazioni che controllano l'aspetto e il comportamento del sito web.
Il campo Constants, invece, passa al campo Setup valori globali, chiamati
costanti. Questo modo di procedere offre una visione d'insieme quando si tratta
di modificare i valori per singole parti di pagina. Usato nel modo corretto
permette, ad esempio, di modificare un singolo valore per ottenere un
cambiamento di una variabile nell'intero sistema di template.
Riporto di seguito un breve esempio per spiegare il concetto precedente,

affrontando la creazione di una pagina in TypoScript.
Campo Constants:
myText.Content = Hello world!
Campo Setup:
pagina = PAGE
pagina {
typeNum = 0
10 = TEXT
10.value = {$myText.Content}

In questo caso, l'output della pagina sarà:

Hello world!
Il campo Setup contiene anche la definizione dell'oggetto PAGE, a cui viene

dato il nome pagina tramite l'operatore di assegnazione “=”.
All'oggetto page viene aggiunta la proprietà typeNum, con valore 0. typeNum è

una variabile che indica, all'interno dell'oggetto pagina, a quale contenuto ci si
sta riferendo. La pagina potrà poi essere chiamata dal browser con informazioni
aggiuntive riguardo al contenuto della pagina a cui si vuole accedere. In questo
caso il typeNum = 0 indica il contenuto di default.
Tutto il contenuto delle parentesi “{“ e “}” è riferito all'oggetto pagina.

Sarebbe stato equivalente scrivere:
pagina = PAGE
pagina.typeNum = 0
pagina.10 = TEXT
pagina.10.value = {$myText.Content}
L'oggetto page.10 viene definito come tipo TEXT (testo) e, seguendo i

concetti espressi in precedenza riguardo a TypoScript, il numero 10 indica la
posizione nell'array della configurazione della pagina, e pagina.10 il percorso
per accedere al valore.
Un ipotetico altro oggetto, per esempio ancora di tipo testo, dovrebbe avere
numero diverso rispetto al precedente per evitare errori. Gli oggetti sono
elaborati in ordine crescente quindi un oggetto con valore inferiore sarà
posizionato all'interno della pagina in posizione precedente agli altri,
indipendentemente da come è posizionato all'interno del codice TypoScript nel
campo Setup.
Infine, con la riga

pagina.10.value = {$myText.Content}

3.4 T emp l at e Pag ina 5 5
si va ad aggiungere una proprietà all'oggetto pagina.10 e si assegna il valore

{$myText.Content}, che in questo caso sarebbe stato equivalente alla seguente
riga:
pagina.10.value = Hello world!
3.5 Layout
Gli esempi visti finora esprimono concettualmente come TypoScript

interpreta il codice; in realtà non è stato effettuato alcun accesso al database e
non è ancora stato scritto codice che permette di inserire i contenuti della
tabella tt_content, in quanto l'output è contenuto all'interno di TypoScript
stesso (ovvero la frase Hello World!). La separazione dei contenuti dal codice
avviene solo nel momento in cui utilizziamo TypoScript per la creazione del
layout dell'applicazione web e non come definizione del contenuto che verrà
mostrato.
TYPO3 mette a disposizione vari modi per la creazione dei layout tramite i
template TypoScript, uno dei quali è stato scelto per l'utilizzo in questo progetto.
Template standard (statici)
Come visto in precedenza, TYPO3 mette a disposizione template statici

predefiniti con cui visualizzare il contenuto del database. Essi tuttavia risultano
inadeguati per il corrente progetto: graficamente sono molto semplici e hanno
limitati margini di personalizzazione.
Template in puro TypoScript
All'interno del codice TypoScript è possibile definire il layout di un sito web

in modo da produrre output HTML, basandosi solo sulle funzioni TypoScript.

Pa gi na 5 6 3.5 La yo ut
Ad esempio, una tabella HTML può essere creata come un cObject di tipo
CTABLE, e al suo interno potremo riferirci alle varie parti con le aree chiamate
topMenu, leftMenu, rightMenu, bottomMenu e content-cell, previste da
TYPO3.
Template HTML e Template Auto-Parser
Lavorando con un web designer, si rende evidente la suddivisione dei ruoli di

cui ho parlato in precedenza: le conoscenze di HTML del designer possono
unirsi alle conoscenze di TypoScript del programmatore esperto in TYPO3, con
conoscenze minime da parte di entrambi del lavoro del proprio collega.
Tramite l'estensione Template Auto-Parser[36] è infatti possibile includere

all'interno di un template una pagina HTML opportunamente formattata, il
ruolo dell'estensione sarà quello di analizzare il file HTML fornito e individuare
al suo interno le parti comprese tra alcuni tag di interesse. Il file HTML deve
essere collocato all'interno del direttorio fileadmin/ del sistema, e i riferimenti
alle immagini saranno mantenuti, permettendo quindi di conservare intatto il
lavoro del web designer mentre il sistema viene configurato per lavorare solo sui
tag di interesse e inserire il contenuto del database al loro interno.
TemplaVoila!
TemplaVoila! è un'estensione di TYPO3 espressamente dedicata al lavoro sul

codice HTML: trattandosi di una delle aggiunte recenti, la sua documentazione
è inferiore rispetto al più diffuso Template Auto-Parser, che è stato considerato
il metodo ideale per la gestione dei template all'interno di questo progetto.
TemplaVoila![17] rappresenta comunque una delle strade che seguirà il

design di layout per TYPO3: sviluppata da Kasper Skårhøj e Robert Lemke,
perfeziona il lavoro effettuato con Template Auto-Parser, offrendo un editor
WYSIWYG per la modifica della pagina HTML inclusa, estendendo la gestione
dei layout di TYPO3 e il concetto di “colonne”.

3.6 E stensi o ni Pa gi na 5 7
3.6 Estensioni
Una caratteristica essenziale del framework di TYPO3 è l'estensibilità che si

concretizza tramite l'utilizzo di pacchetti chiamati estensioni (extension),
contenenti moduli, plug-in, codice TypoScript e molto altro. Le estensioni
vengono installate in linea con l'utilizzo di Extension Manager e provengono da
un unico direttorio centralizzato, il TYPO3 Extension Repository (TER).
Le estensioni sono una funzionalità ormai da lungo tempo presente in

TYPO3: siamo alla versione 4.1 e sono state introdotte nella 3.5 per espandere il
sistema, precedentemente basato sulle interfacce. Alcune estensioni affondano
le loro radici in questo periodo, e hanno mantenuto la loro caratteristica di nomi
di tabelle aventi il prefisso tt_. Il sistema di estensioni ha permesso di avere
un'interfaccia chiara per la creazione di nuovi pacchetti e quelli precedenti sono
stati riscritti secondo i nuovi metodi; l'introduzione di un repository
centralizzato ha infine contribuito all'aumento del numero di estensioni
disponibile in modo esponenziale.
Le estensioni sono pubblicate all'interno del TER da parte sia di provider

web professionali sia di singoli sviluppatori più o meno esperti e sono rese
pubblicamente disponibili. Talvolta si tratta di semplici miglioramenti alla
struttura di base ma nella maggior parte dei casi lo scopo per cui viene
sviluppata un'estensione è la realizzazione di intere nuove applicazioni quali, ad
esempio, nel nostro caso la gestione di utenti, la realizzazione di form per il
contatto con clienti e l'acquisto on-line di servizi, la gestione dei template.
Extension System di TYPO3 è costituito principalmente da tre

componenti[17] comunicanti:
● Extension API: l'interfaccia verso il core di TYPO3, l'integrazione

delle estensioni nel sistema TYPO3.
● Extension Manager: un modulo di back-end per

l'amministrazione e l'installazione di estensioni, oltre che lo strumento
per gli sviluppatori per la gestione del software da loro realizzato.

Pa gi na 5 8 3.6 Este nsio ni
● Extension Repository (TER): un direttorio on-line centralizzato

che permette alle estensioni di essere inserite e scaricate, raggiungibile
tramite web browser all'indirizzo typo3.org/extensions/.
Ogni estensione è composta da un numero di file all'interno di un direttorio.

Ognuna di esse può essere installata importandola direttamente dal TER oppure
utilizzando dei file in formato .t3x che contengono la definizione dell'estensione
e i file in essa contenuti. Ogni estensione all'interno del TER è identificata
univocamente dalla propria extension key, che costituisce anche il nome
dell'estensione stessa. Tutti i file e le funzioni del pacchetto sono quindi
referenziati tramite la key dell'estensione, per evitare conflitti all'interno del
sistema. Riporto di seguito l'esempio di una (semplice) estensione riguardante
la struttura dei file all'interno del direttorio di installazione di Template Auto
Parser (la cui key è automaketemplate), utilizzata in questo progetto per la
realizzazione del template.
automaketemplate/
ext_emconf.php
ext_icon.gif
ext_localconf.php
ext_php_api.dat
doc/
TODO.txt
manual.sxw
pi1/
class.tx_automaketemplate_pi1.php
In particolare sono comuni a tutte le estensioni i seguenti componenti:
● Il file ext_emconf.php contiene tutte le informazioni generali e

metadata dell'estensione.
● Il file ext_localconf.php viene incluso nel front-end e nel back-

end a ogni request e può contenere tutte le variabili di configurazione

3.6 E stensi o ni Pag ina 5 9
($TYPO3_CONF_VARS) e quelle che si trovano all'interno di

typo3conf/localconf.php.
● Il direttorio doc/ deve sempre essere presente e contenere il file

relativo alla documentazione, scritto in formato OpenOffice 1.x (.sxw).
● Il direttorio pi1/ contiene gli script e i dati del plug-in.
Per estensioni più complesse esiste anche la possibilità di specificare e

configurare codice TypoScript tramite i file ext_typoscript_constants.txt e
ext_typoscript_setup.txt che equivalgono appunto ai campi Constants e
Setup del template.
In base alla loro posizione nell'architettura di TYPO3, le estensioni sono

classificate secondo il seguente criterio:
● Estensioni di back-end, che espandono le funzionalità del back-

end ma non compaiono come moduli separati.
● Moduli del back-end, ovvero moduli principali (come Web,

Tools), moduli (Web | List) oppure sotto-moduli (Web | Functions |
Import).
● Estensioni front-end, che contengono piccole applicazioni per

funzionalità o configurazioni del front-end.
● Plug-in del front-end, che possono essere applicazioni vere e

proprie (funzioni di login degli utenti, aggiornamento news, ecc.) oppure
espansioni delle funzionalità del front-end (elementi di contenuto, menu,
ecc.).
● Varie, contenenti per esempio tabelle statiche del database o

librerie di programmazione.

Pa gi na 6 0 3.6 Este nsio ni
Le estensioni utilizzate sono generalmente locali, ovvero proprie del singolo

sito web e non del sistema. La struttura dell'installazione di TYPO3 all'interno
del server web prevede, infatti, la presenza dei direttori Core del sistema e di
uno (o più) direttori corrispondenti ai percorsi dei singoli siti web, tutti facenti
riferimento all'unico Core. Così ogni singolo sito presente sul server ha la
possibilità di installare e gestire le proprie estensioni separatamente dagli altri.
La versatilità e la potenza del manager delle estensioni di TYPO3

rappresenta, per certi versi, il suo punto debole. Il fatto che TYPO3 metta a
disposizione un tool (chiamato Extension Kickstarter) che fornisce un
framework per i programmatori, se da un lato uniforma le estensioni e permette
una gestione razionale e organizzata (tramite il TER), dall'altro favorisce il
proliferare di una miriade di estensioni in stato di alpha, beta e unstable,
realizzate come progetti poi abbandonati o come semplici esperimenti, che si
confondono all'interno della grande quantità di estensioni presenti nel
repository.
Talvolta, al contrario, applicazioni stabili e pronte all'uso (spesso realizzate

dagli stessi sviluppatori del Core di TYPO3) vengono classificate come versioni
beta, aumentando ulteriormente la confusione.
Il fatto che esistano più estensioni che forniscono (potenzialmente) le stesse

funzionalità rappresenta più un ostacolo che un pregio per l'utente che abbia la
necessità di scegliere il sistema migliore. Esiste naturalmente un sistema di
rating (valutazione) delle estensioni da parte degli utenti e i conteggio del
numero dei download, fattori che forniscono ottimi indizi per sapere su quale
applicazione puntare nel momento della decisione, tuttavia non sono strumenti
sufficienti a dipanare completamente i dubbi. Il TER, inoltre, non dispone di un
motore di ricerca sufficientemente raffinato.
Quello che potrebbe realmente fare la differenza sarebbe la creazione di una

serie di estensioni, ampiamente testate e consolidate, che vadano a fornire una
base per le applicazioni fondamentali all'interno di un portale web (gestione
degli utenti, moduli delle news, guestbook, shop system tanto per citarne
alcuni).

3.7 Ut ent i T Y PO 3 Pag ina 6 1
3.7 Utenti TYPO3
Gli utenti del sistema TYPO3 sono di due categorie: utenti back-end e utenti
front-end.[17]
3.7.1 Utenti back-end

Gli utenti back-end costituiscono gli addetti all'amministrazione e alla
gestione dei contenuti all'interno del CMS. L'utente Admin è il primo utente che
viene creato al momento dell'installazione e ha completo controllo del sistema.
Tramite di esso è possibile creare nuovi utenti, gestire gruppi di utenti e
assegnare i privilegi desiderati a livello di applicazioni e di contenuti.
La gestione degli utenti avviene tramite il componente “User Admin”, che

mette a disposizione form per impostare i nomi e le proprietà degli utenti, la
loro assegnazione a gruppi di lavoro, le cartelle di database e sistema a cui essi
hanno accesso (DB e User mounts) e i permessi di accesso alle estensioni.
In base a questa configurazione è possibile quindi creare utenti deputati alla

sola realizzazione di nuove pagine, i quali avranno accesso solo ad alcuni
direttori e al modulo Pagina del sistema, e/o utenti che si occupano dell'invio di
newsletter tramite l'apposita estensione (Direct Mail) e quindi avranno accesso
solo al modulo Direct Mail e/o utenti, come nel caso di questa installazione, che
si occuperanno delle gestione degli ordini.
3.7.2 Utenti front-end

La seconda categoria di utenti TYPO3 è costituita dagli utenti front-end. I
record corrispondenti a questo tipo di utente sono contenuti in un diversa
tabella del database (in realtà in una pagina di tipo SysFolder) e quindi non
corrispondono agli utenti visti in precedenza.
Gli utenti front-end (FEUser) sono visitatori del sito web che ottengono
privilegi e autorizzazioni particolari registrandosi (o tramite creazione
dell'account da parte degli amministratori). Ad esempio possono essere

Pa gi na 6 2 3.7.2 Ut ent i f ro nt- end
autorizzati all'accesso ad aree riservate o all'utilizzo di funzioni non disponibile

agli utenti non registrati. L'accesso da parte di un utente permette di mostrargli
solo le informazioni desiderate, in modo mirato e dedicato. Ad esempio, nel
sistema di inter..esse per lo Stage, è possibile mostrare promozioni disponibili
solo per quel particolare cliente, comunicazioni personali, etc.
I FEUser possono essere combinati in gruppi ai quali vengono poi assegnate

diversi permessi a livello di pagina; diversamente dagli utenti back-end, i
permessi hanno una granularità più elevata e non è possibile fornire accesso
solo ad alcuni elementi di un pagina ma solo alla pagina intera.
Il sistema di utenti front-end fornisce le basi per l'assegnazione di permessi

di accesso e, se necessario per la modifica dei permessi anche per gli utenti che
hanno effettuato accesso al sito correttamente. TYPO3 fornisce una serie di
plug-in di front-end per rendere possibili queste modifiche.
La pagina del sistema contenente i record degli utenti viene creata come
cartella SysFolder all'interno dell'albero delle pagine, selezionando l'estensione
Website Users nel menu Contains Plug-in.
Nel corrente lavoro di Stage, alla pagina è stato dato il nome Utenti. Una
volta salvata, è possibile creare al suo interno nuovi record del tipo User Group,
specificando in questo modo i gruppi di utenti front-end che si vogliono creare.
La creazione degli utenti può avvenire sia da parte degli amministratori
(manualmente) oppure dando agli utenti non registrati la possibilità di
registrarsi all'interno del sito. Per fare questo mi sono avvalso di alcuni plug-in
creati appositamente per la gestione degli utenti front-end.

4 Svolgimento
dell'attività
Installazione di TYPO3, analisi del

sito web statico precedente e
creazione di un template in
TypoScript.
Pa gi na 6 4 4 .1 Insta ll az io ne di TY PO3
4.1 Installazione di TYPO3
4.1.1 Requisiti di sistema

I requisiti di sistema per l'installazione del CMS TYPO3 dal punto di vista
software (dei quali non tratterò l'installazione) comprendono:
● Server web (preferibilmente Apache, oppure Microsoft IIS).
● PHP versione 4.3.0 (minima richiesta) con incluse le librerie GD

per la manipolazione di immagini.
● MySQL .
Componenti opzionali:
● ImageMagick, librerie per la gestione delle immagini.
● PHP cache, PHP-accelerator o Zend Optimizer.
● zlib (compilato in PHP), per rendere più veloci le connessioni

comprimendo i dati trasmessi.
● Estensioni di Apache mod_zip e mod_rewrite.
● phpMyAdmin, un tool in PHP per la gestione dei database

MySQL (è possibile anche installarlo come estensione di TYPO3).
● Curl, se il server si trova dietro un server proxy. Non era questo il

caso del mio progetto.
Dal punto di vista hardware, i requisiti minimi dipendono dalle prestazioni

che si desidera ottenere e dall'utilizzo previsto, e in particolare sono da
considerare i seguenti fattori:

4 .1.1 Requi sit i d i si ste ma Pag ina 6 5
● Quanti utenti in linea avremo contemporaneamente?
● Quanto dovrebbe essere veloce (in secondi) il server nel mostrare

le pagine?
● Quante pagine per ora saranno mostrate?
● Qual è il traffico di dati che ci si aspetta mensilmente?
In base alla documentazione ufficiale[17], l'offerta che generalmente viene

fornita anche da provider economici può essere sufficiente per gestire un
massimo di 10 utenti contemporaneamente collegati nelle pagine di
amministrazione e 50 utenti collegati nella parte di presentazione del sistema,
un tempo di accesso alle pagine di 1,5 secondi e non più di 100 pagine per ora.
Nel complesso, ci si aspetta un traffico dati di 5 GB mensili.
Naturalmente, è necessario assicurarsi che il provider metta a disposizione i

requisiti minimi indicati sopra e almeno 100MB di spazio web.
In questo progetto, il software è stato installato in locale, quindi i tempi di

latenza per l'accesso alle pagine sono stati ridotti al minimo. Non solo, sia il
server web che il database erano installati sulla stessa macchina, rendendo
ancora migliori le prestazioni. Non soffrendo di alcuna limitazione nelle
impostazioni (il controllo su ogni dettaglio della configurazione era completo),
l'ambiente era perfetto per l'utilizzo del CMS.
4.1.2 Processo di installazione

Presenterò ora l'installazione[37] del software sul server web.
Il sito ufficiale dedicato agli sviluppatori (typo3.org) fornisce vari pacchetti

software per l'installazione: per il progetto di Stage ho usato quello con minori
personalizzazioni possibili, che mette a disposizione il sistema con la
configurazione minima e le sole estensioni indispensabili al funzionamento ed è
privo di stili grafici predefiniti per la presentazione del sito web.

Pa gi na 6 6 4 .1.2 Pro c esso di insta ll az io ne
I file di installazione sono due:
● l'archivio source, ovvero typo3_src-4.1.1.tar.gz
(indispensabile)
● l'archivio dummy-4.1.1.tar.gz, letteralmente “fittizio”, con

database vuoto e assenza di esempi e tutorial al suo interno
Una volta decompressi gli archivi con il comando tar -xzpvf all'interno
della directory del nostro web server, vanno impostati i permessi di accesso ai
file e rinominate le directory in modo da accedere al sistema digitando
l'indirizzo http://127.0.0.1/3services/typo3/index.php, si utilizza il tool di
installazione (Figura 4.1) che, essendo il nostro il primo accesso al sistema, sarà
abilitato di default (i passi per l'installazione sono spiegati in dettaglio nella
documentazione compresa nell'archivio source o alla wiki[38] di TYPO3).
Figura 4.1.: Schermata conclusiva del processo di

installazione.
Il tool di installazione è un programma in PHP che permette, in tre

semplici passaggi, di creare un nuovo database dove importare uno schema di
default all'interno della nostra installazione (al momento è ancora
completamente vuota).

4 .1.2 Pro c esso di insta ll az io ne Pa gi na 6 7
Al termine del processo di installazione, se si prova ad accedere alle pagine

di “rootlevel”, ci verrà mostrato un errore, rappresentato nella Figura 4.2
seguente. É perfettamente normale, in quanto si tratta ora di creare le pagine
all'interno del sito web.
Figura 4.2.: Messaggio di errore dovuto all'assenza di pagine.
Cartella Contenuto
t3lib/ Librerie TYPO3 e setup del database core (t3lib/stddb/)
typo3/ Codice sorgente del back-end di amministrazione di TYPO3. Può
(condivisa tra tutti i siti essere collegata con un symlink a typo3_src. La maggior parte
web dell'installazione delle cartelle sono protette da scrittura, eccetto quelle presentate in
corrente) Tabella 4.
typo3conf/ Direttorio locale contenente configurazione e estensioni locali. Può

(specifica per ogni sito essere usata per motivi decisi a piacimento dall'utente. Deve essere
web) possibile l'accesso in scrittura per PHP.
Al suo interno si trova il file localconf.php, che contiene la

configurazione dell'installazione TYPO3 locale, nome utente e
password del database, la password del tool di installazione, ecc.
I file temp_CACHED_xxxxxx_ext_localconf.php e
temp_CACHED_xxxxxx_ext_tables.php sono generati
automaticamente da parte delle estensioni caricate di
ext_localconf.php e ext_tables.php. Possono essere
cancellati in qualunque momento dato che saranno riscritti
all'utilizzo successivo.
typo3temp/ Contiene i file temporanei.
(specifica per ogni sito
web)
uploads/ Contiene i file allegati a record del database gestiti da TCE. Viene
(specifica per ogni sito usata di default per le immagini inserite nell'editor di testo RTE ed
web) è necessaria solo se configurata in $TCA.
Tabella 3: Cartelle principali dell'installazione di TYPO3.

Pa gi na 6 8 4 .1.2 Pro c esso di insta ll az io ne
La Tabella 3 contiene i direttori principali dell'installazione di TYPO3 sul

server web, la Tabella 4 elenca alcune cartelle contenute in typo3/.[39]
Cartella Contenuto
ext/ Contengono estensioni.
sysext/ ext/ viene utilizzata dalle estensioni “globali” e sysext/ dalle le
estensioni di sistema. Entrambi i tipi sono disponibili per tutte le
installazioni che condividono lo stesso codice sorgente.
La differenza sta nel fatto che le estensioni globali possono essere
assenti dal codice sorgente distribuito (possono essere aggiornate
da Extension Manager) mentre le estensioni di sistema sono
“permanenti” e saranno sempre parte del codice sorgente che viene
distribuito. Non è possibile modificare le estensioni di sistema, a
meno che questa opzione non sia impostata in
TYPO3_CONF_VARS.
gfx/ Elementi grafici.
install/ Contiene lo script di inizializzazione del tool di installazione.
mod/ Contiene moduli del back-end. Riflette il concetto di moduli e
sotto-moduli prima dell'avvento delle estensioni ed è usata
essenzialmente per compatibilità e per Extension Manager
(mod/tools/em/).
Tabella 4: Contenuto di typo3/.
4.1.3 Interfaccia di amministrazione (back-

end)
Terminato il processo di installazione, è possibile accedere tramite il proprio
browser web all'interfaccia di amministrazione del sistema semplicemente
aggiungendo /typo3 all'indirizzo del sito web.
Inserendo nome utente e password, inviate in forma crittografata al server,

ci si trova nel Back End del sistema.
Dal punto di vista grafico, il back-end è suddiviso in frame contenenti le

informazioni in modo gerarchico. Dal punto di vista concettuale, la suddivisione
avviene in moduli, ognuno dei quali fornisce funzionalità all'ambiente di
amministrazione.

4 .1.3 Inte rfa cci a d i a mm ini stra zio ne (ba ck -e nd) Pa gi na 6 9
Possiamo suddividere l'interfaccia utente in tre aree principali (Figura 4.3),

di cui riporto anche il nome originale inglese a cui poi farò riferimento in
seguito:
1. La barra dei moduli (Module Bar)
2. L'area di navigazione (Navigation Bar)
3. La visualizzazione dei dettagli (Details View)
Nella colonna sinistra (Module Bar, indicata in verde in Figura 4.3) è

possibile vedere la lista di moduli e sotto-moduli a disposizione, mentre nel
frame principale vengono visualizzate le informazioni specifiche relative al
sotto-modulo selezionato.
Esistono quindi dei moduli principali che non possono essere modificati e
che sono a disposizione dell'utenza fin dal primo utilizzo, e cioè:
● Web.
● File.
● Doc.
● Tools.
● Admin Functions (disponibile solo per gli amministratori).
L'area del modulo Web è quella più utilizzata dagli utenti con responsabilità
di redattori del sito. I contenuti sono salvati sotto forma di pagine e possono
essere qui modificati. É possibile selezionare il sotto-modulo Page per la
creazione e la modifica di pagine all'interno del sito, oppure visualizzare come si
presenteranno al visitatore, elencare tutti gli elementi del sito web o della
singola pagina con la funzione List, ottenere informazioni, impostare le
credenziali di accesso, gestire i template o le varie versioni di una singola
pagina.

Pa gi na 70 4 .1.3 Inte rfa cci a d i a mm ini stra zio ne (ba ck -e nd)
Figura 4.3.Interfaccia utente del back-end TYPO3.
Il modulo File permette di accedere a un direttorio all'interno

dell'installazione del CMS che viene usato come server FTP, a cui cioè è
possibile accedere per inserire documenti e immagini a cui fare poi riferimento
dalle pagine del sito. Il nome di questo direttorio è fileadmin/, e all'interno di
esso è possibile stabilire la granularità di accesso dei singoli utenti.
Il modulo Doc permette di visualizzare i documenti correntemente aperti in

fase di modifica, molto utile per gestire la modifica contemporanea di più
pagine.
Il modulo User viene usato per gestire i Task (ovvero i compiti) all'interno di
un'organizzazione multi-utente che richiede coordinamento tra i membri del
gruppo di lavoro, oltre che per la gestione dello spazio di lavoro. Nel caso
dell'installazione effettuata per il progetto di Stage, il modulo User serve per

4 .1.3 Inte rfa cci a d i a mm ini stra zio ne (ba ck -e nd) Pag ina 71
gestire gli ordini on-line effettuati attraverso il sistema di shop on-line fornito
dall'apposita estensione.
Il modulo Help contiene un collegamento a una documentazione inclusa

nella distribuzione (meno dettagliata rispetto ai documenti reperibili on-line) e
alcune informazioni sul prodotto in uso.
Le funzioni di amministrazione sono disponibili solo per gli utenti con

determinate credenziali di accesso, stabiliti dall'Amministratore di Sistema.
Consentono di azzerare la cache del CMS, procedura utile in seguito a modifiche
sostanziali delle pagine.
Dato che il sistema permette l'accesso con diverse credenziali,

l'amministratore può stabilire attraverso pannello per la configurazione degli
utenti un intuitivo e potente, quali sono i permessi relativi a ogni collaboratore
dell'ambiente back-end del sistema.
É quindi possibile[37] rendere effettiva la suddivisione degli utenti come

semplici redattori, come gestori dei file, come gestori degli ordini effettuati nel
negozio on-line del sistema, oppure garantire ad alcuni di essi funzioni di
amministrazione del sistema in varia misura.
4.2 Sito web HTML preesistente
L'azienda 3Services S.r.l. disponeva già di un sito web realizzato in HTML

con l'utilizzo di fogli di stile (CSS). In quanto realizzato ad-hoc da un web
designer, il sito era stato progettato espressamente per l'azienda in questione, la
grafica rispecchiava i colori del logo della società, tuttavia non era sorta,
all'epoca, l'esigenza di avere un aggiornamento dinamico dei contenuti.
Si trattava quindi di un sito informativo, dedicato alla presentazione

dell'azienda e ai servizi offerti al cliente, contenente le necessarie informazioni

Pa gi na 72 4 .2 Sito we b HT ML pre esi ste nte
di contatto (email, numero di telefono, ecc.) ma erano richiesti strumenti esterni

al sito per i contatti (cioè un client di posta, un apparecchio telefonico, ecc.).
Ponendosi nell'ottica di un'azienda che possiede già un sito web di questo

tipo realizzato su misura da un grafico professionista, lo scopo che ci si è posti è
stato quello di non modificare l'aspetto grafico durante la trasformazione del
sito web da sito informativo a sito dispositivo, o sito a valore aggiunto, tramite
l'utilizzo del CMS TYPO3.
L'aspetto del sito web prima dello svolgimento dell'attività si presentava

come in Figura 4.4, relativa a una pagina interna del sito, in cui è possibile
Figura 4.4.: Pagina del sito HTML di 3Services.
vedere come vengono gestiti i contenuti delle pagine e i menu di secondo

livello, cioè quelli relativi alle sotto-sezioni e contenuti nella colonna di sinistra.

4 .2 Sito we b HT ML pre esi ste nte Pag ina 73
4.3 Installazione delle estensioni
La tecnica di realizzazione dei template scelta in questo progetto di Stage si

avvale dell'estensione Template Auto-Parser, di cui ho parlato in precedenza e
di cui illustro ora il setup.
Le estensioni necessarie per utilizzare questo metodo in TYPO3 sono le

seguenti:
● Template Auto-Parser (automaketemplate)
● CSS styled content (CSS_styled_content)
Per importare[37] le estensioni all'interno dell'applicazione è necessario

innanzi tutto accedere al sistema tramite l'inserimento di login e password.
Dal menu dei moduli si seleziona Extension Manager, ovvero l'applicazione

per la gestione delle estensioni (Figura 4.5).
Figura 4.5.: Extension manager nel menu di TYPO3.
La pagina mostra le estensioni caricate dal sistema al momento: trattandosi

di un'immagine presa in un'installazione appena eseguita, essa contiene solo le
estensioni di base (le estensioni di sistema non sono mostrate). CSS styled
content è già installata, come è possibile notare in Figura 4.6.

Pa gi na 74 4 .3 Insta ll az io ne de ll e e ste nsio ni
Figura 4.6.: Extension Manager.
Da questa pagina è possibile accedere al tool per l'importazione delle

estensioni nel sistema, ovvero il comando Import Extensions.
Il tool per l'importazione delle estensioni fornisce un campo per la ricerca

secondo parola chiave, oppure la possibilità di importare un'estensione
direttamente da un file in formato .T3X, ovvero un archivio di file TYPO3,
scaricato dal sito web typo3.org oppure direttamente dal sito degli sviluppatori
dell'estensione. La ricerca viene effettuata collegandosi all'extension repository
di TYPO3, ovvero al database (mantenuto dagli amministratori di typo3.org)
contenente tutte le estensioni pubblicate dagli sviluppatori. Ogni utente può
rendere pubblica la propria estensione tramite un'apposita applicazione
contenuta all'interno del CMS, chiamata Extension Kickstarter. Questo significa
che all'interno del database delle estensioni è possibile trovare sia versioni
stabili e testate sia versioni in stato di testing, alpha o beta.

4 .3 Insta ll az io ne de ll e e ste nsio ni Pa gi na 75
Il fatto di poter accedere con tanta semplicità al database delle estensioni da

parte degli sviluppatori è sicuramente un punto a favore della diffusione delle
estensioni di TYPO3, tuttavia confonde chi si trova a dovere installare
un'estensione, dato che può capitare che esistano più estensioni (con nomi
diversi) dedicate a una certa funzione, sviluppata da vari collaboratori, e ci si
trova nella situazione di dover cercare quella più stabile o più recente. Di
default, Extension Manager permette la ricerca solo all'interno di estensioni che
sono state revisionate prima di essere pubblicate, ma più di una volta mi sono
trovato nella situazione di dover usare versioni alpha o beta di alcune
applicazioni che risultavano in realtà stabili, tuttavia non erano state pubblicate
come tali.
Nel caso esemplificato il nome dell'estensione da utilizzare è noto, quindi,

dopo aver aggiornato il database con il comando Retrieve/Update, è sufficiente
inserire il nome all'interno del campo “List or look up reviewed extensions”.
Viene restituito il risultato della ricerca e l'estensione viene visualizzata e

messa a disposizione per l'importazione.
Una volta importata con il comando Import, caratterizzato dall'icona è

possibile procedere all'installazione, usando il comando “installa” .
L'installazione deve effettuare alcuni aggiornamenti delle tabelle del

database prima di rendere disponibile l'estensione per l'utilizzo.
Una volta completato il processo, l'estensione compare correttamente

all'interno della lista delle Installed Extensions.

Pa gi na 76 4 .4 Mo di fic a d el sit o we b pree sist ent e
4.4 Modifica del sito web

preesistente
Per utilizzare correttamente le estensioni appena installate, è necessario

mettere a disposizione di TypoScript un file HTML da utilizzare come template
HTML.
I file accessibili a TYPO3 devono essere inseriti all'interno del direttorio

fileadmin/, per il quale TYPO3 mette a disposizione un apposito modulo di
gestione dei file, con tutte le caratteristiche di un client FTP (Figura 4.7).
I file possono essere inseriti nella directory tramite il comando Upload, che
permette di scegliere dei file dal disco e caricarli nel sistema.
La gestione è semplificata tramite l'utilizzo del menu contestuale cliccando

sull'icona del file.
Figura 4.7.: Interfaccia di Fileadmin.
All'interno della pagina modello1.html sono stati introdotte delle modifiche

ai tag HTML che permettono al Template Auto-Parser di riconoscere all'interno
del file alcune parti rilevanti e, in seguito, di introdurre all'interno di queste
parti il contenuto del template TypoScript.

4 .4 Mo di fic a d el sit o we b pree sist ent e Pag ina 77
Il codice del file HTML è praticamente identico al precedente, anche perché

è stata utilizzata una pagina del sito web, e non è nemmeno necessario
rimuovere i contenuti della pagina precedente dato che TypoScript li ignorerà
nel momento in cui lavorerà sui tag modificati.
Sono stati aggiunti ai tag <td> e <table> le proprietà di tipo id=“ ... ” in
modo che i nomi degli ID siano poi referenziati all'interno del TypoScript
Template.[40]
[...]
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"

class="sfondodestra">
<TABLE id="languageMenu"> </TABLE>
<table width="100%" height="121" border="0" cellpadding="0"
cellspacing="0">
[...]
<td height="52" colspan="4" valign="top">


<table width="100%" border="0" cellpadding="0" cellspacing="0"
id="topmenu1">
[...]

<tr id="topmenu2">
<td width="150" height="21"><img src="images/3services-3s-
giu.gif" width="150" height="21"></td>
[...]
<td colspan="2" valign="top">

<table width="629" cellspacing="0" cellpadding="0" id="content">
<tr>
[...]
<td height="48"> </td>
<td id="menu_bottom1" ><div align="center"><ul
class="menu_bottom1">
<font color="#FF0000"><img src="images/crocetta.jpg"
width="10" height="10"></font>
[...]

Pa gi na 78 4 .5 Scrit tu ra d el te mp la te T ypo Scri pt
4.5 Scrittura del template

TypoScript
In questa fase della realizzazione del template, viene creata una nuova
pagina di rootlevel all'interno del modulo Web|Page, che è stata chiamata
rootpage proprio per evidenziarne la caratteristica. Scegliendo New dal menu
contestuale selezionando l'icona del globo terrestre accanto al nome “New
TYPO3 Site” (che in seguito verrà modificato), è possibile scegliere quale record
creare.
Selezionando New Page, viene caricato il modulo per la creazione di una

nuova pagina, ed è possibile avere mostrati tutti i concetti espressi fino a ora
(Figura 4.8):
● La pagina viene creata come “hidden” (nascosta) di default e

saremo noi a doverla rendere visibile.
● La prima pagina creata ha un PID = 0 (del resto, non esiste

pagina di livello superiore a questa nella gerarchia).
● Il tipo di pagina viene selezionato come Standard.
● Il titolo della pagina viene impostato a rootpage.
4.5.1 Creazione di un template radice

Selezionando il modulo Web|Template rimanendo all'interno della pagina
rootpage, il sistema avvisa che non esiste alcun template impostato per tale
pagina. Inoltre, se si sceglie di visualizzare la pagina nel browser con il comando
View Page, TYPO3 restituisce un errore di “Template non trovato” (Figura 4.9).

4 .5.1 Creaz io ne di un t emp l at e ra dic e Pa gi na 79
Figura 4.8.: Interfaccia per la creazione di una pagina.
Selezionando quindi il comando di creazione di un nuovo template, viene

creato un template con il nome NEW SITE con campi Setup e Constant vuoti.

Pa gi na 8 0
Figura 4.9.: Messaggio di errore di template non trovato.
Il template da me realizzato per il sito web del progetto di Stage segue i

principi di programmazione definiti nella documentazione come Modern
Template Building, ovvero l'adozione non solo del concetto di template HTML e
estensione Template Auto-Parser, ma la creazione di una pagina contenitore
contenente dei template inseriti come Extension Template, ovvero Template
Estensioni, per garantire massima modularità.
Il template appena creato chiamato NEW SITE, quindi, è vuoto tranne per le
seguenti opzioni:
● Il flag rootlevel è impostato, in quanto è un template di root.
● Include Static (from extensions) contiene CSS_styled_content.
● Include Basis Template contiene quello che è stato da me

chiamato ext: BASE TEMPLATE, cioè il codice TypoScript vero e proprio.
Le modifiche al campo Setup e Constants del template NEW SITE

avverranno in seguito, quando si tratterà di creare degli utenti di front-end per
l'accesso ad aree private.

4 .5.2 T e mp la te ex t:B ASE T EMP LAT E Pag ina 8 1
4.5.2 Template ext:BASE TEMPLATE
Il template ext:BASE TEMPLATE contiene codice all'interno del campo Setup,

che ora vado ad analizzare in ogni sua parte (il listato completo è fornito in
appendice).
Campo Setup:
# Configuring the Auto-Parser for main template:
plugin.tx_automaketemplate_pi1 {
# Read the template file:
content = FILE
content.file = fileadmin/template1/main/modello1.html
# Here we define which elements in the HTML that
# should be wrapped in subpart-comments:
elements {
BODY.all = 1
BODY.all.subpartMarker = DOCUMENT_BODY
HEAD.all = 1
HEAD.all.subpartMarker = DOCUMENT_HEADER
HEAD.rmTagSections = title
TD.all = 1
TABLE.all = 1
div.all=1
}
# Prefix all relative paths with this value:
relPathPrefix = fileadmin/template1/main/
}
La parte iniziale configura[40] l'estensione Template Auto-Parser, leggendo il

file di template HTML e, con l'utilizzo della proprietà elements, viene istruita
l'estensione in modo che tutti i tag selezionati vengano avvolti (wrapped) con le
subparts definite nel codice TypoScript successivamente.
relPathPrefix permette di mantenere le relazioni tra il template HTML e i

riferimenti alle immagini contenute in esso. Sostituirà il prefisso
fileadmin/template1/main/ a tutti i riferimenti alle immagini all'interno del
file HTML.
###Bottom Menu cObject

###
lib.splitmenu = COA
lib.splitmenu {
10 = HMENU

Pa gi na 8 2 4 .5.2 T e mp la te ex t:B ASE T EMP LAT E
10.special = directory
10.special.value = 1
10.1 = TMENU
10.1 {
wrap = <ul class="menu_bottom1-no"> | </ul>
NO {
stdWrap.cObject = COA
stdWrap.cObject {
10 = TEXT
10.field = title
if.value.data = register:count_HMENU_MENUOBJ
if.negate = 1
if.isLessThan.prioriCalc=1
if.isLessThan.cObject=TEXT
if.isLessThan.cObject.insertData=1
if.isLessThan.cObject.value = ({register:count_menuItems}+1)/2
wrap = <li>|</li>
}
}
}
20 < .10
20.1.wrap = <ul class="menu_bottom2-no"> | </ul>
20.1.NO.stdWrap.cObject.if.negate >
}
###END of Bottom Menu cObject
All'interno del codice, il primo menu che è stato inserito è quello definito
menu_bottom, cioè quello che si occupa di generare, in di ogni pagina, un menu
in basso con il link a tutte le pagine di primo livello[41]. Il fatto che sia il primo
elemento nel listato non influisce sull'ordine degli elementi nella pagina: questo
sarà definito in seguito, gestendo la gerarchia dei cObject. Siccome nella
versione originale il menu era diviso in due righe caratterizzate da diverso
colore nei link, il precedente listato svolge la stessa funzione creando un menu
dinamico prelevando le pagine dal tree del sito web e inserendole all'interno di
un oggetto HMENU (un menu gerarchico) suddiviso in due righe. Siccome le
pagine del sito possono essere modificate, ad esempio cambiando l'ordine,
aggiungendone di nuove o modificando quelle esistenti, il menu viene generato
automaticamente e non è necessaria alcuna modifica al codice nel caso di
variazioni nella struttura del sito. Tutte le definizioni riguardanti colore e
immagine a lato, inoltre, sono contenute nel CSS, avvalorando quanto detto
finora riguardo alla separazione dei compiti tra programmatore e designer.

4 .5.2 T e mp la te ex t:B ASE T EMP LAT E Pa gi na 8 3
In particolare, per realizzare questo menu è stato creato un cObject

lib.splitmenu avente al suo interno un HMENU (un cObject) in seguito definito
con la proprietà TMENU (cioè menu testuale, indicando che non sarebbe stato
costituito da immagini) . La funzione stdWrap (standard wrap) che è stata qui
usata gioca un ruolo centrale all'interno di TypoScript. Essa viene usata per
specificare le proprietà dei vari oggetti TypoScript, suddivise in tre aree[42][17]:
● Get Data: proprietà per rendere disponibili o per leggere dati.

Quella utilizzata in questo caso, cioè stdWrap.cObject, carica il
contenuto di un content object.
● Override/Conditions: proprietà di questa area sono utilizzate per

implementare metodi della classe superiore oppure inizializzare delle
condizioni.
● Parse Data: proprietà utilizzate per elaborare i dati.
####LEFT MENU
temp.tmenu= HMENU
temp.tmenu.entryLevel=1
temp.tmenu {
# second level
1 = TMENU
1{
NO{
linkWrap = <p>|</p>
}
ACT=1
ACT{
linkWrap = <p class="menu_left_active">|</p>
}
#CUR=1
#CUR{
# wrapItemAndSub = <li class="menu_left_current-active">|</li>
#}
#IFSUB=1
#IFSUB{
# wrapItemAndSub = <li class="menu-level2-with-subpage">|</li>
#}
}
}
lib.menu_left < temp.tmenu
###########LEFT MENU END

Il LEFT MENU è contenuto nella tabella a sinistra del layout HTML, non è
presente in tutte le pagine in quanto contiene pagine di secondo livello, non
presenti in tutte le sezioni del sito (ad esempio non ci sono nella pagina iniziale).
Per specificare che il livello di questo menu non è la radice del page tree, si
utilizza entryLevel=1.
In questo menu, anche se le ultime righe sono state commentate in quanto

non utilizzate, vengono usate proprietà[17] utili per la gestione di menu in
formato testo, di cui riporto un elenco:
● NO (obbligatorio) indica le proprietà dell'oggetto nella sua

condizione “standard”, cioè al momento del caricamento della pagina.
● RO indica come deve comportarsi il menu in caso di “mouseover”

(notare come non sia necessario utilizzare codice Javascript per creare
simili effetti).
● ACT è lo stato di un oggetto qualora questo sia presente nella

rootline della pagina corrente.
● CUR indica come deve essere formattato il testo nel caso la

pagina del menu sia quella correntemente visualizzata.
● IFSUB indica la formattazione del menu nel caso esistano delle

sottopagine rispetto a quella contenuta nel menu.
###START of GMENU Top PARTE 1 (topmenu1)###
lib.topmenu1 = HMENU
lib.topmenu1 {
1=GMENU
1.maxItems=5
1 {
wrap (
<td width="150" height="52"><img
src="fileadmin/template1/main/images/3services-3s-su.gif"
width="150" height="52"></td>
| <td><img
src="fileadmin/template1/main/images/3services_12.gif" width="84"
height="52"></td>
<td><img
height="52"></td>

4 .5.2 T e mp la te ex t:B ASE T EMP LAT E Pag ina 8 5
)
NO {
allWrap= <td> | </td>
XY= 48,52 || 90,52 || 72,52 || 45,52 || 64,52
5=IMAGE
5.file=fileadmin/template1/main/images/3s-home.gif ||
fileadmin/template1/main/images/3s-dove.gif ||
fileadmin/template1/main/images/3s-contatti.gif ||
fileadmin/template1/main/images/3s-news.jpg ||
fileadmin/template1/main/images/3s-offerte.jpg
10=TEXT
10 {
text.field=title
offset=12,46
fontColor=#FFFFFF
fontFile=fileadmin/fonts/RoSSEB28.PFB
fontSize=10px
align=bottom, center
shadow {
offset=0,0
color=#000000
opacity=25
blur=50
niceText=1
}
}
}
RO < .NO
RO=1
#RO.transparentBackground = 1
RO.10.fontColor= #000000
ACT < .RO
ACT=1
}
}
#page.200 < temp.topmenu1
#####END of GMENU Top parte 1###
Il menu principale del sito web, ovvero quello presente nella parte superiore
della pagina contenente tutte le sezioni del sito, è stato suddiviso in due parti
per motivi legati alle immagini utilizzate di sfondo. Dato che la prima riga è
costituita da elementi aventi sfondo azzurro e la seconda rosso, la prima parte
viene creata tramite un GMENU (cioè un menu grafico, costituito da immagini)
contenente solo le prime pagine del sito web (specificate con .maxItems=5), le
altre saranno contenute nella seconda parte del menu e ulteriori pagine
eventualmente aggiunte andranno a posizionarsi lateralmente rispetto alla
seconda parte del topmenu.

Per esigenze di impaginazione, è stato necessario avvolgere il menu

all'interno di alcuni tag HTML con riferimenti a immagini in formato .gif,
necessità dettata dalle pagine HTML realizzate precedentemente che
utilizzavano alcune immagini come “placeholder” per allineare correttamente il
menu.
Inoltre, dato che l'effetto della parte superiore del menu consiste nell'avere
inserito i link all'interno di un'immagine di sfondo creando un'illusione di testo
sovrapposto a un'immagine (in realtà si tratta di più immagini affiancate), è
stato necessario utilizzare più immagini in formato .gif, ognuna come sfondo del
testo del menu. Se fossero state disponibili le le immagini da cui il designer del
sito web era partito, sarebbe stato possibile avere un'unica immagine di sfondo
sulla quale inserire un menu in formato testo (TMENU) e lavorare su quello. In
questo modo vengono create da TypoScript varie immagini formate
dall'immagine iniziale come sfondo e da un elemento testo (10=TEXT)
sovrapposto a ciascuna di esse.
Il campo di testo ha parecchie proprietà necessarie alla corretta

formattazione: offset, colore, tipo di font utilizzato, dimensione e allineamento.
Ha inoltre associata un'ombra, anch'essa costituita da più proprietà specificate
come colore, opacità, blur (sfocatura) e niceText, che garantisce l'applicazione
di filtri per smussare i bordi dei caratteri.[37][40]
#####START of GMENU Top PARTE 2 (topmenu2)###
lib.topmenu2 {
1=GMENU
# 1.maxItems=5
1.begin=6
1 {
wrap (
src="fileadmin/template1/main/images/3services-3s-giu.gif"
| <td width="122" valign="top"><img
src="fileadmin/template1/main/images/spacer.gif" width="123"
height="21"></td>
)
NO {

XY= [10.w]+10,21
5=IMAGE
5.file=fileadmin/template1/main/images/3s-topmenu2_sfondo.gif
10=TEXT
10 {
text.field=title
offset=3,15
fontColor=#FFFFFF
fontSize=11px
align=left
shadow {
offset=0,0
color=#000000
opacity=25
blur=50
niceText=1
} #chiude la shadow
}
}
RO < .NO
RO=1
RO.10.fontColor= #1BCEFB
ACT < .RO
ACT=1
}
}
###END of GMENU TOP parte 2 (topmenu2)###
La seconda parte del menu risulta decisamente meno complessa e più

ordinata, in quanto non è stato necessario specificare diverse immagini di
sfondo durante la creazione dei tasti del menu. Una sola immagine (ovvero 3s-
topmenu2_sfondo.gif) permette di creare più file che saranno contenuti nella
cache di TYPO3 e accessibili tramite link interni al sistema.
# Main TEMPLATE cObject for the BODY
temp.mainTemplate = TEMPLATE
temp.mainTemplate {
# Feeding the content from the Auto-parser to the TEMPLATE
cObject:
template =< plugin.tx_automaketemplate_pi1
# Select only the content between the <body>-tags
workOnSubpart = DOCUMENT_BODY

# Substitute the ###menu_1### subpart with dynamic menu:

subparts.menu_bottom1 < lib.splitmenu
# Substitute the ###content### subpart with some example content:
#subparts.content < styles.content.get
# Substitute the ###topmenu1### subpart with GMENU TOP Part 1:
subparts.topmenu1 < lib.topmenu1
# Substitute the ###menu_left### subpart with Menu Left:
subparts.menu_left < lib.menu_left
# Substitute the ###content### subpart with content:
subparts.content < styles.content.get
# Substitute the ###languageMenu### subpart with languageMenu :
subparts.languageMenu < temp.languageMenu
# Main TEMPLATE cObject for the HEAD

temp.headTemplate = TEMPLATE
temp.headTemplate {
cObject:
# Select only the content between the <head>-tags
workOnSubpart = DOCUMENT_HEADER
}
Avendo creato tutti gli elementi della pagina e avendo a disposizione, tramite
Template Auto Parser, le varie parti del documento HTML all'interno delle quali
sostituirli tramite l'operatore di copia “<”, il listato qui presentato crea un
oggetto TEMPLATE in cui viene inserito, tramite referenziazione ( =< ), l'output di
Template Auto Parser e vengono copiati nelle sottoparti tutti gli elementi
temporanei o di libreria creati in precedenza.
# Default PAGE object:

page = PAGE
page.typeNum = 0
# Copying the content from TEMPLATE for <body>-section:
page.10 < temp.mainTemplate
# Copying the content from TEMPLATE for <head>-section:
page.headerData.10 < temp.headTemplate
Infine, viene creato l'oggetto pagina, in cui vengono copiati i dati che
costituiranno <body> e <head> del codice HTML che sarà generato all'accesso dei
browser web al sito.[40]

In appendice riporto il listato del file CSS contenente le impostazioni di stile

e l'intero codice del template TypoScript,in cui compaiono anche parti
riguardanti l'impostazione del plug-in per la gestione delle lingue aggiuntive.
4.6 Creare e modificare

contenuti
Finora ho illustrato la realizzazione di un template avente tutti gli elementi

della pagina posizionati secondo il layout desiderato, pronto per ospitare al suo
interno dei contenuti.
Il form per l'inserimento e modifica di contenuti è molto simile a quello per

la creazione delle pagine. Nel modulo Web|Page va selezionata la pagina in cui
si vuole inserire il contenuto e, in seguito, la voce Create New Content dal sotto-
modulo che si apre nella parte principale dell'interfaccia.
All'interno della pagina è possibile creare elementi di testo semplice, testo

con immagine, immagini, codice HTML oppure inserire una serie di
funzionalità fornite dall'installazione dei vari plug-in (quale, ad esempio,
News).
Illustro ora la realizzazione della pagina iniziale del sito web, a scopo
esemplificativo.
Visto che non serve alcuna funzione particolare e l'inserimento di un

elemento di testo è sufficiente, l'opzione selezionata sarà Regular Text Element.
Il form per l'inserimento dei dati del nuovo elemento di contenuto ha al suo
interno un rich text editor fornito, nell'installazione di default, dall'estensione
htmlArea RTE, mentre per il progetto di Stage ho scelto di utilizzare l'estensione
TinyRTE[43] che offre le stesse funzionalità e una compatibilità migliorata con la
versione di Mozilla Firefox prescelta (Figura 4.10).

Pa gi na 9 0 4 .6 Cre are e mo di fi ca re co nt enu ti
Figura 4.10.: TinyRTE, un Rich Text Editor per TYPO3.
Oltre a tutte le funzioni che ci si può aspettare da un editor avanzato di testo

quali la possibilità di impostare lo stile del carattere e del paragrafo, inserire
collegamenti ipertestuali, tabelle, eccetera, TinyRTE integra un menu drop
down box che permette di scegliere gli stili del file .css utilizzato nel template
TypoScript.
In questo modo, dato che sono stati utilizzati parte degli stili dal CSS del sito
web preesistente, sono conservati tutti gli stili di caratteri e le combinazioni di
colori per titoli, sottotitoli e testo.
Una volta inserito e formattato il testo, è possibile chiudere il form di
modifica con il comando Save And Close, identificato dall'icona . Il tasto
Show Page ( ) permette a questo punto di aprire la pagina del front-end nel
browser e visualizzare il risultato (Figura 4.11).

4 .6 Cre are e mo di fi ca re co nt enu ti Pag ina 9 1
Figura 4.11.:Pagina web realizzata con TYPO3.
4.7 Area privata clienti
TYPO3 nella sua installazione di base mette a disposizione plug-in per la

realizzazione di una pagina di accesso a un'area riservata. Tuttavia, tali plug-in
non soddisfacevano i requisiti di questo progetto di Stage.
Per questo motivo la registrazione degli utenti è stata gestita tramite il plug-
in front-end User Registration (sr_user_register) mentre per il login degli
utenti ho scelto di utilizzare Newloginbox (newloginbox), che costituisce
essenzialmente un miglioramento del sistema di login fornito con l'installazione.

Pa gi na 9 2 4 .7 Are a pri va ta c lie nti
L'estensione sr_user_register permette la creazione di una pagina

contenente i campi per la registrazione con successivo invio del messaggio email
di conferma all'indirizzo specificato dall'utente per verificarne la validità.
Tra le caratteristiche di questa estensione desidero evidenziare:
● Possibilità di localizzazione internazionale.
● Spedizione di email HTML.
● Compatibilità con Direct Mail (modulo per la gestione delle newsletter).
● Invio di invito di registrazione.
● Possibilità da parte degli amministratori di visualizzare e in seguito

approvare le richieste di registrazione.
● Password protette con algoritmo MD5 (con l'estensione kb_md5fepw).
● Possibilità per l'utente di modifica di tutte le informazioni inserite,

cancellazione dell'account.
Una volta installata l'estensione sr_user_register, il primo passo per

eseguire la configurazione è impostare all'interno del template del sito le
variabili di configurazione, per lo meno quelle minime per garantirne il
funzionamento.
É infatti necessario creare alcune pagine che conterranno al loro interno i

campi per il login degli utenti, la registrazione, la modifica delle impostazioni e
la pagina per la conferma delle informazioni inserite. Dato che ogni pagina è
contraddistinta da un ID univoco, il plug-in dovrà fare riferimento a tale ID per
mostrare i campi all'interno della pagina desiderata.
Per fare riferimento alle variabili all'interno del plug-in, il codice standard è
il seguente:
plugin.NOMEPLUGIN_pi1.VARIABILE = VALORE

4 .7 Area priv at a cli ent i Pa gi na 9 3
Inserendo il codice nel campo Constants all'interno del root template del sito
web, l'assegnazione avviene nel modo indicato di seguito:
# --- folder where FE users are contained ---

plugin.tx_srfeuserregister_pi1.pid = 26
# --- different groups: unprivileged users ---

plugin.tx_srfeuserregister_pi1.userGroupUponRegistration = 4
# --- different groups: privileged users ---

plugin.tx_srfeuserregister_pi1.userGroupAfterConfirmation = 5
# --- page ID of page with login box and FE registration #(Login)

plugin.tx_srfeuserregister_pi1.loginPID = 29
# --- page ID of second page with FE registration (Second Page)

plugin.tx_srfeuserregister_pi1.registerPID = 39
# --- page ID of third page with FE registration (Third Page)

plugin.tx_srfeuserregister_pi1.editPID = 40
# --- page ID of fourth page with FE registration (Fourth Page)

plugin.tx_srfeuserregister_pi1.confirmPID = 41
plugin.tx_srfeuserregister_pi1.enableEmailConfirmation = 0
Relativamente al codice, la variabile .pid assume il valore dell'ID della

pagina contenente gli utenti di front-end, ovvero la SysFolder Utenti creata in
precedenza.
enableEmailConfirmation attiva o disattiva l'invio di un messaggio di posta

elettronica all'indirizzo inserito dall'utente, notificando l'avvenuta registrazione
e richiedendo una conferma dei dati inseriti.
Per l'invio del messaggio email, il file php.ini deve contenere la riga
sendmail_path = /usr/sbin/sendmail
La procedura di registrazione si compone dei seguenti passi[44]:
● Sotto il form di login viene presentato al visitatore un

collegamento al form di registrazione o, se l'utente è già identificato, un
link al form per la modifica del profilo.

Pa gi na 9 4 4 .7 Are a pri va ta c lie nti
● La prima volta che l'utente completa il form di registrazione e

clicca sul tasto “Invia”, viene mostrata un'anteprima dei dati che
verranno inviati, in modo da verificare le informazioni di registrazione
prima di creare l'account. In seguito all'invio delle informazioni
controllate, il nuovo utente viene informato che una email sarà spedita
all'indirizzo fornito per completare il processo di registrazione e il suo
utente viene aggiunto a un gruppo senza privilegi.
● Il messaggio email viene spedito. Esso contiene due

collegamenti: il primo permette all'utente di confermare la registrazione,
il secondo annulla la registrazione (nel caso qualcuno abbia utilizzato
impropriamente l'indirizzo email).
● Cliccando su uno qualsiasi dei due collegamenti, il visitatore

carica una pagina nel suo browser. Se ha confermato la registrazione,
viene mostrata la finestra di login e può accedere al sito. Quando l'utente
conferma la sua registrazione, il suo account viene assegnato a un gruppo
che gli consente l'accesso a pagine riservate.
● Una volta effettuato l'accesso, l'utente può modificare le proprie

informazioni o cancellare il proprio account.
● A ogni evento (registrazione, conferma, aggiornamento o

cancellazione) può essere associato l'invio di un messaggio email
all'utente per la conferma dell'avvenuta azione. Una notifica via email
può essere anche spedita all'amministrazione del sito. Il messaggio email
all'utente può essere nei formati plain text o HTML (che includerà
comunque sempre una versione plain text).
Per l'accesso agli utenti, è stata creata una pagina chiamata Login; essendo
una pagina presente nel ramo principale dell'albero delle pagine, essa è stata
automaticamente inclusa all'interno dei menu. Il campo login e alcune
funzionalità avanzate (quali ad esempio la possibilità di recuperare la password
e la conferma dell'avvenuto login) vengono messe a disposizione dall'estensione

4 .7 Area priv at a cli ent i Pag ina 9 5
newloginbox, sviluppata appositamente per sostituire le funzionalità di login

basilari di TYPO3.
All'interno del ramo avente come radice la pagina di login sono state create
pagine riservate agli utenti autenticati nel sistema. Le impostazioni di sicurezza
delle pagine vengono modificate all'interno del modulo Edit Page, selezionando
le proprietà della pagina e lavorando sul campo Access.
In particolare, nel sistema realizzato durante lo Stage, le pagine sono rese

accessibili al gruppo userGroupAfterConfirmation, creato dall'estensione
sr_user_register al momento della conferma dell'utente. Le pagine riservate
agli utenti registrati nella presente applicazione sono, oltre alle pagine per la
gestione dell'account utente, le pagine dell'estensione per la gestione degli
acquisti.
4.8 Gestione preventivi
Lo scopo finale dell'applicazione web realizzata è quello di fornire agli utenti

registrati presso il sito aziendale la possibilità di richiedere preventivi on-line
dei servizi offerti dalla ditta.
La scelta per questo genere di funzioni è stata quella di associare alla

creazione del preventivo on-line il concetto di “carrello della spesa”[45]. Questa
scelta risponde perfettamente alle necessità di creare un sistema usabile in base
ai principi dell'Ingegneria del Software Interattivo: se gli utenti che accedono al
sistema nella sezione di back-end hanno sufficienti conoscenze informatiche, il
sistema per la gestione dei preventivi deve essere rivolto a un più ampio bacino
d'utenza, non necessariamente esperto.
Il concetto applicato prevede quindi di trattare i servizi offerti come singoli

prodotti di un sistema di vendita on-line, associando a essi prezzo e quantità (se

Pa gi na 9 6 4 .8 Ge sti o ne pre ve nti vi
si dovesse trattare, ad esempio, di assistenza informatica caratterizzata da un

costo orario).
TYPO3 mette a disposizione svariate estensioni per la creazione di un

“negozio on-line”, la più diffusa delle quali è sicuramente Shop System
(tt_products), fornita di numerosi plug-in per l'aggiunta di ulteriori
funzionalità. Il vero problema di tt_products è la sua smisurata mole e la sua
curva di apprendimento molto ripida, decisamente inadatta al tipo di lavoro
previsto per questo progetto di Stage. Secondo le specifiche del progetto, infatti,
non si cercava un sistema che operasse una di gestione dei prodotti
particolarmente complessa.
Ha superato le mie più rosee aspettative stata la scoperta di un'estensione

prodotta da un'azienda italiana specializzata nella realizzazione di sistemi web
basati su TYPO3, la Webformat S.r.l., il cui referente, Mauro Lorenzutti, scrive
sulla newsletter italiana di typo3.org. Semplice da installare e configurare,
Webformat Shop System (extendedshop) è un sistema di e-commerce leggero e
completo, che si è rivelato una preziosa soluzione al problema in questione; è
stato possibile contattare direttamente lo sviluppatore per richiedere dei
chiarimenti, cosa non da poco dato che in genere la maggior parte delle risposte
alle richieste di informazioni vengono date da altri utilizzatori di TYPO3 che, per
quanto esperti, non hanno la conoscenza sufficiente a risolvere tutti i problemi
come invece può fare chi ha scritto il codice dell'applicazione software.
Webformat Shop System è un'estensione per un sistema di negozio on-line

con caratteristiche di presentazione di prodotti e gestione degli ordini. Tra le
caratteristiche presenti, vengono evidenziate[46]:
● Gestione dei prezzi di offerta e degli sconti.
● Gestione avanzata degli ordini.
● Registrazione degli utenti.
● Indirizzo statico e titolo della pagina per i prodotti.
● Supporto ai siti multi-lingua.

4 .8 G est io ne prev ent iv i Pa gi na 9 7
● Tracciabilità dell'ordine.
Il sistema integra il supporto per due diversi metodi di pagamento: PayPal, il

noto gateway per il pagamento on-line e Banca Sella (con l'utilizzo di one-time
password).
L'installazione del plug-in crea un nuovo modulo chiamato Orders

Management all'interno del frame contenente il menu principale di back-end di
TYPO3. In questo modulo è possibile, per gli utenti di back-end autorizzati,
gestire gli ordini effettuati nel front-end dai clienti.
Al suo interno è possibile selezionare tre sotto-moduli:
● Statistiche, che consente di tenere traccia delle informazioni

riguardanti gli ordini effettuati, non di interesse per il presente utilizzo.
● Ordini, dove vengono elencati gli ordini confermati dai clienti,

ma non ancora evasi.
● Ordini completati (evasi), dove vengono archiviati gli ordini una

volta gestiti dall'utente di back-end.
Dal punto di vista delle pagine front-end, invece, Webformat Shop System va
inserito al loro interno sotto forma di plug-in dal nome Advanced Shop System
come un normale contenuto di pagina; è quindi possibile selezionare il tipo di
visualizzazione tra le quattro disponibili:
● LIST: per mostrare l'elenco dei prodotti inseriti.
● OFFER: per mostrare solo gli oggetti in offerta (non utilizzato in

questo sistema).
● SEARCH: mostra un form di ricerca.
● BASKET: fornisce il vero e proprio “carrello” a cui l'utente può

aggiungere e da cui può eventualmente rimuovere i prodotti presenti
nella lista.
É possibile, per tutte le pagine, specificare un diverso punto di partenza

come mount point della lista di prodotti e un livello di ricorsività per la ricerca.

Pa gi na 9 8 4 .8 Ge sti o ne pre ve nti vi
Sempre all'interno dell'albero delle pagine, vanno create due SysFolder;

nella prima saranno salvati gli ordini effettuati e nell'altra gli indirizzi di
spedizione. Quando un nuovo utente acquista un prodotto, verrà salvato nella
pagina “Basket” come un nuovo record di tipo tt_address. Viene inviato un
messaggio email all'utente utilizzando le informazioni contenute nella SysFolder
degli utenti creata per le estensioni sr_user_register e newloginbox, con cui
extendedshop si può interfacciare.
Gli ordini vengono salvati nella SysFolder citata in precedenza sotto forma di
nuovo oggetto pagina contenente nuovi record per l'ordine e per ogni prodotto
acquistato.
Nell'ambito del progetto di Stage per contenere i prodotti è stata creata una
SysFolder chiamata, appunto, Prodotti, all'interno della quale sono stati inseriti
i record di tipo “Webformatshop Product”, categoria che si rende disponibile
all'interno del sistema in seguito all'installazione di TYPO3. Questa
organizzazione, sebbene logicamente corretta, non è ufficialmente
supportata[47] da Webformat e quindi anticipa le opzioni che saranno presenti
in una futura versione dello Shop System. Ogni prodotto è assegnato a una
categoria (Webformatshop Category), che in questo caso è stata creata sempre
all'interno della SysFolder Prodotti.
I campi a disposizione per l'oggetto Categoria sono:
● Codice.
● Titolo.
● Sommario (breve descrizione).
● Descrizione.
● Immagine (può essere associata un'immagine alla categoria di

prodotti, oltre che al singolo prodotto).
Ogni singolo prodotto dispone invece dei seguenti campi:
● Numero oggetto.
● Titolo.

4 .8 G est io ne prev ent iv i Pa gi na 9 9
● Sommario (breve descrizione).
● Descrizione (con possibilità di usare il Rich Text Editor per

inserirla).
● Immagine.
● Prezzo (con e senza tasse).
● Quantità disponibile.
● Categoria.
● Una serie di caratteristiche utili ai fini della spedizione, quali le

dimensioni e il peso.
● Taglie e colori (utilizzato nel caso di un vero e proprio negozio).
● Prodotti correlati (fornisce un campo a scelta multipla per cui è

possibile, per ogni prodotto, mostrare prodotti a esso correlati quando il
cliente seleziona la visualizzazione la descrizione dettagliata partendo
dall'elenco oggetti).
Come in tutte le estensioni, una volta create le pagine (e le SysFolder) è

necessario completare la configurazione specificando gli ID delle pagine in cui si
possono trovare i record del database per i vari elementi.
Le variabili di configurazione messe a disposizione dallo Shop System non

sono in numero eccessivo e nel contempo permettono di tenere sotto controllo
molti aspetti del sistema, soprattutto nel presente caso alcune opzioni potevano
essere ignorate senza problemi (quelle relative alla spedizione e ad alcuni
metodi di pagamento, ad esempio).
All'interno del campo Constants è quindi utile configurare le linee seguenti,

che specificano dove trovare i file per la definizione dello stile dell'output, e
lasciare le rimanenti alle impostazioni di default. Le scelte sono due: è possibile
modificare i file shop.html e stileShop.css originali per adattarli alle proprie

Pa gi na 100 4 .8 Ge sti o ne pre ve nti vi
esigenze, oppure (per mantenere la coerenza nel sistema) modificare le variabili

e specificare due file contenuti all'interno del direttorio fileadmin/ di TYPO3.
Codice rilevante nel campo Constants[46]:
# Template file
plugin.tx_extendedshop_pi1.file.templateFile =
EXT:extendedshop/pi1/shop.html
# CSS file
plugin.tx_extendedshop_pi1.file.cssFile =
EXT:extendedshop/pi1/stileShop.css
Le rimanenti opzioni possono essere lasciate nelle impostazioni di

default senza particolari problemi:
# Number of decimals
plugin.tx_extendedshop_pi1.priceDec = 2
# Decimal separator
plugin.tx_extendedshop_pi1.priceDecPoint = ,
# Thousand separator
plugin.tx_extendedshop_pi1.priceThousandPoint = .
# Set to 1 if you want to open a popup when the user clicks #over
the image in the list mode. If 0 the image is a link to #the detail
of the product
plugin.tx_extendedshop_pi1.clickEnlarge_list = 0
# Set to 1 if you want to open a popup when the user clicks #over
the image in the detail mode.
plugin.tx_extendedshop_pi1.clickEnlarge = 1
Il campo Setup[46] contiene al suo interno, tra le altre, le variabili per la

configurazione degli ID delle pagine contenenti i dati relativi a prodotti, ordini e
indirizzi degli utenti:
# cat=Webformat Shop System/config/13; type=int; label= Pid #basket

plugin.tx_extendedshop_pi1.pidBasket = 53
# cat=Webformat Shop System/config/14; type=int; label= Pid #orders

plugin.tx_extendedshop_pi1.pidOrders = 55
# cat=Webformat Shop System/config/15; type=int; label= Pid

#delivery
plugin.tx_extendedshop_pi1.pidDelivery = 25
# cat=Webformat Shop System/config/15; type=int; label= Pid #users

plugin.tx_extendedshop_pi1.pidUsers = 56

4 .8 G est io ne prev ent iv i Pag ina 10 1
Le rimanenti impostazioni impostate in seguito, benché non indispensabili

in un sistema di test, permettono di definire nome del negozio e email a cui gli
utenti potranno rispondere quando ricevono le email dal sistema.
# cat=Webformat Shop System/shop/18; type=string; label= Shop

#Email: order email from.
plugin.tx_extendedshop_pi1.fromEmail = myShop@mySite.com
# cat=Webformat Shop System/shop/19; type=string; label= Shop #Name:

order name from.
plugin.tx_extendedshop_pi1.fromName = TEST SHOP
# cat=Webformat Shop System/shop/20; type=string; label= Shop #BCC

Email: Receiver of the order confiration email (in the bcc #field).
plugin.tx_extendedshop_pi1.bccEmail = myShop@mySite.com
Le potenzialità di extendedshop non si riducono a quanto qui elencato: una

lunga parte del file di configurazione è composto da linee per la gestione del
pagamento e delle varie forme di pagamento accettate (PayPal, Contrassegno,
pagamento on-line tramite Banca Sella, ecc.)
Le specifiche del sistema realizzato durante lo Stage prevedono che un

cliente non possa effettuare alcun tipo di acquisto se l'ordine non è stato prima
visionato da un utente di back-end. In particolare un addetto del settore
commerciale tratterà l'ordine del cliente come una richiesta di acquisto, che
verrà poi formulata sotto forma di contratto di fornitura di servizi dall'azienda
3Services S.r.l. al cliente (sia esso un privato o il rappresentante di un'azienda).
A riguardo di quanto appena detto, i campi che il cliente dovrà completare
comprendono Partita IVA dell'azienda oppure Codice Fiscale della persona oltre
che dati personali. In particolare, all'interno di extendedshop è possibile
scegliere quali saranno i campi ritenuti obbligatori e come dovranno essere
segnalati all'utente (in questo caso con un asterisco).
# Required fields in the personal info page

plugin.tx_extendedshop_pi1.requiredFields=name,address,city,zip,stat
e,phone,email,authorization,conditions
plugin.tx_extendedshop_pi1.requiredFieldsSymbol = *

Pa gi na 102 4 .8 Ge sti o ne pre ve nti vi
La procedura di acquisto dei prodotti sul sito di 3Services S.r.l. si avvale del
Webformat Shop System secondo i seguenti passi:
● Il cliente, dopo essersi registrato al sistema, accede all'area

riservata.
● Al cliente che seleziona la visualizzazione dei servizi offerti, lo

shop system presenta l'elenco dei prodotti contenuti nel database, con la
possibilità di visualizzare la descrizione e, se disponibile per il tipo di
prodotto, di scegliere la quantità.
● Una volta selezionati e aggiunti al preventivo tutti i prodotti

desiderati, il sistema mostra un form contenente le informazioni inserite
dal cliente al momento della registrazione; se necessario sarà richiesto di
integrarle.
● Premendo il tasto di conferma, il sistema notifica al cliente via

email l'avvenuto invio della richiesta e al responsabile dell'azienda della
presenza di un ordine inevaso.
● Il responsabile delle vendite dell'azienda può accedere al back-

end del sito web e selezionare il modulo “Orders Management” per
visualizzare gli ordini inseriti dai clienti. Da lì in poi il contatto avverrà
tramite altri mezzi (email, telefono, fax) facendo riferimento al numero di
preventivo inserito dal cliente.
● Una volta contattato il cliente, l'ordine verrà gestito come

“spedito”, per divenire “completato” una volta conclusa la trattativa con il
cliente.
Alcune immagini di Webformat Extendedshop sono mostrate in Figura 4.12

e Figura 4.13.

4 .8 G est io ne prev ent iv i Pag ina 10 3
Figura 4.12.: Vista articoli con Webformat Extendedshop
Figura 4.13.: Procedura di acquisto di Webformat Extendedshop

5 Approfondimento:
gestione documenti on-
line
Sistemi operativi basati sul web,

sistema operativo eyeOS,
installazione e personalizzazione.
Pa gi na 106 5 .1 Sist emi o perat iv i ba sat i su l we b
5.1 Sistemi operativi basati sul

web
La realizzazione di un sistema per la gestione on-line di documenti

elettronici ha un duplice scopo: avere all'interno dell'azienda la possibilità sia di
archiviare e condividere file tra gruppi di utenti, sia di accedere all'esterno della
rete locale utilizzando un'interfaccia web e, su richiesta, fornire tale servizio
anche ai propri clienti.
La tecnologia utilizzata per sistema realizzato è quella dei WebOS o Web-

based OS (sistemi operativi basati sul web) ma, in particolare e per evitare
ambiguità, è più corretto utilizzare il termine Web Desktop (o Webtop secondo
una terminologia coniata di recente).
I termini WebOS e Web Operating System descrivono, per definizione[48],

servizi per l'elaborazione distribuita su larga scala, come nel caso del WebOS
Project dell'Università di Berkeley o il progetto WOS. Il termine WebOS è
tuttavia spesso utilizzato per indicare una collezione di servizi offerti sul web
inteso come “Web HTTP”, quindi indipendente dal concetto di sistema
operativo del singolo computer.
Nel caso di questo progetto di Stage ci si è riferiti a quelli che sono più
correttamente denominati Web Desktop o Webtop, ovvero sistemi che
trasformano il desktop in un servizio accessibile tramite il browser.
I Web Desktop sono delle applicazioni di desktop virtuale per l'integrazione

di applicazioni web in uno spazio di lavoro in rete. L'ambiente di lavoro per
l'utente è reso il più familiare possibile a sistemi operativi come Windows, Mac
OS X o Linux e il vantaggio principale è la possibilità di salvare documenti on-
line e potervi accedere da qualunque computer collegato a internet.

5 .1 Si ste mi o pe ra ti vi basa ti sul w eb Pag ina 10 7
In realtà, se si pensa ad applicazioni on-line volte a sostituire o affiancare il

normale utilizzo di strumenti quali client di email, word processor e simili, non
si può non pensare a Google[49] e ai suoi servizi quali Google Docs, Gmail,
Google Reader, ecc.
A Google si sta contrapponendo un numero sempre maggiore di nomi

importanti dell'Information Technology quali Microsoft (con Office Live[50]) e
OpenOffice.org (con Ulteo[51]), tutti impegnati nell'offrire agli utenti una serie di
Rich Internet application, ovvero applicazioni web che hanno caratteristiche e
funzionalità delle tradizionali applicazioni desktop ma che sono accessibili
tramite browser.
Quello che manca in simili progetti non è l'integrazione o l'interoperabilità

(garantita, ad esempio nel caso dei servizi Google, dalla possibilità di scambiare
file tra le applicazioni) ma piuttosto la “visione d'insieme” e un'interfaccia
utente unificata che possa colmare la sensazione di gap tra utilizzo di una
pagina web e di un'applicazione desktop.
In questo contesto si inseriscono i Webtop: la scelta è ampia e più strade

sono state intraprese, sia dal punto di vista della tecnologia utilizzata come core
del sistema operativo che da quello della licenza d'uso e del rilascio del codice.
La quasi totalità degli sviluppatori impegnata nella produzione di sistemi
operativi basati sul web non permette l'installazione e l'esecuzione su server di
altrui proprietà: per quanto la creazione di un proprio account utente sia nella
maggior parte dei casi gratuita, non è possibile l'installazione del sistema
operativo sul proprio server. Tra tutti, eyeOS è l'unico che unisce la presenza di
una serie di applicazioni mature e la possibilità di accesso al codice sorgente per
l'installazione e la personalizzazione (sebbene una versione “Live” sia accessibile
all'indirizzo http://eyeos.info).
Prima di procedere, è bene specificare quello che non è possibile ottenere

con un simile approccio: nonostante l'entusiasmo talvolta generato dalla
trattazione del tema dei Webtop, non si tratta di un modo per minare l'esistenza
degli attuali sistemi operativi, di contrastare l'egemonia di alcune produttori di
software o di lanciare la sfida ai colossi dei servizi on-line; si tratta piuttosto di

Pa gi na 108 5 .1 Sist emi o perat iv i ba sat i su l we b
effettuare esperimenti per cambiare il rapporto tra gli utenti e gli strumenti
software di utilizzo ormai quotidiano per fornire accesso sempre e ovunque. In
una parola di tratta di compiere esperimenti di centralizzazione.
5.2 Sistema operativo eyeOS
eyeOS è una piattaforma Open Source progettata per supportare una serie di
applicazioni web al suo interno.
É possibile utilizzare una versione “Live” dal sito del produttore, oppure
accedere ai vari tipi di servizi disponibili per le diverse utenze:
● eyeOS Professional Services (eyeos.com) offre la possibilità di

ricevere supporto, richiedere lo sviluppo di applicazioni specifiche,
installazione e corsi di formazione per l'utilizzo del sofware.
● eyeOS Open Source Platform (eyeos.org) si rivolge invece a

sviluppatori e amministratori di sistema che vogliono collaborare allo
sviluppo o utilizzare il software sui loro server.
Il concetto alla base di eyeOS viene presentato in modo esauriente in Figura

5.1[52], che mostra come una piccola organizzazione possa trarre beneficio
dall'installazione di un sistema operativo web-based all'interno della propria
rete.
Il team di eyeOS prevede[53] il rilascio di una nuova versione di eyeOS ogni

due mesi, seguendo uno schema di numerazione del tipo 1.X.Y.Z, dove:
● X indica una “major release”.

5 .2 Sist ema o pera ti vo e yeO S Pa gi na 109
● Y indica una versione con cambiamenti notevoli per l'utente.
● Z indica la presenza di correzioni minori o bugfix della versione

corrente.
Figura 5.1.: Diagramma di rete di eyeOS per le PMI.
L'attuale versione di eyeOS disponibile è la 1.5.
Il pacchetto di installazione di eyeOS comprende il kernel del sistema

operativo e una serie di applicazioni chiamate Base Applications, che
comprendono:

Pa gi na 110 5 .2 Sist ema o pera ti vo e yeO S
● editLink, una utility per modificare i link di sistema.
● eyeCalc, un programma con funzioni di calcolatrice.
● eyeCalendar, fornisce funzioni di agenda.
● eyeChess, gioco degli scacchi.
● eyeContacts, applicazione per la gestione di contatti.
● eyeDocs, word processor con possibilità di salvare file in formato

compatibile con Microsoft Office e OpenOffice.
● eyeFiles, tool per la gestione dei file. Rappresenta il file explorer

del sistema operativo e fornisce operazioni di base sui file, quali Upload
(dal computer dell'utente a eyeOS), Download (da eyeOS al computer),
gestione degli archivi compressi e funzioni di Cut & Paste.
● eyeGroups, per la gestione di gruppi di utenti.
● eyeInstaller, applicazione per installare nuovi programmi nel

formato eyePackage.
● eyeMessages, messaggistica interna tra gli utenti connessi allo

stesso server di eyeOS.
● eyeMp3, lettore di file musicali.
● eyeNav, un web browser integrato.
● eyeNotes, un editor di testo.
● eyeProcess, applicazione per la gestione dei processi in uso dal

sistema.
● eyeRSS, lettore di feed RSS.
● eyeSoft, per l'installazione di software da repository on-line.
● eyeTrash, per la gestione del “Cestino” del sistema operativo.
● eyeZip, per la gestione dei file compressi all'interno di eyeOS.

5 .2 Sist ema o pera ti vo e yeO S Pa gi na 111
eyeOS consiste per la maggior parte di codice PHP inserito all'interno di file
con estensione .eyecode. A partire dalla versione 1.0, eyeOS è un sistema
operativo moderno basato su microkernel[54], che si occupa del caricamento di
servizi, librerie, widget (elementi dell'interfaccia di eyeOS) e, in cima a tutto
questo, di applicazioni.
5.3 Installazione e
personalizzazione
L'installazione del software viene gestita da un “eyepackage” (il tipo di

pacchetto comune a tutte le installazione delle applicazioni di eyeOS), chiamato
dal file install.php una volta che viene creata un direttorio all'interno del
server web (avendo precedentemente cambiato le impostazioni di accesso in
modo che il server web abbia diritto di lettura, scrittura ed esecuzione
all'interno del direttorio).
L'installer crea un direttorio con un nome casuale (per maggiore sicurezza)

all'interno del quale verranno estratti tutti i file del sistema, inizializzando poi
una variabile globale per l'accesso (salvata nel file settings.php). Il primo ed
unico utente creato inizialmente è l'utente root, l'unico con diritto di gestione
degli utenti all'interno del sistema.
Tra le opzioni presenti, è possibile permettere o negare la registrazione degli

utenti al sistema: qualora non fosse permesso di creare nuovi utenti, solo gli
amministratori potranno creare o eliminare gli account del sistema. Questa è
proprio la scelta che è stata fatta nel progetto di Stage. Che si tratti di un sistema
utilizzato all'interno della ditta o di un servizio offerto ai clienti, la creazione di
nuovi account sarà effettuata solo se autorizzata dalla direzione, in modo da
garantire il totale controllo.
Il direttorio root di eyeOS contiene i file index.php e settings.php, i

direttori img (contenente le immagini della finestra di login) e quello il cui nome

Pa gi na 112 5 .3 Insta ll az io ne e pe rso nal iz za zio ne
è stato creato al momento dell'installazione il quale, nel caso specifico del

progetto di Stage, è eyeOS9a9e09efb8.
Il path di installazione contiene le seguenti cartelle:
● account, dove vengono salvati gli account esistenti nel sistema (il
nome della directory è generato automaticamente, ad esempio l'utente
root è salvato in rt4) i cui parametri sono registrati in un file XML.
● apps contiene le cartelle delle applicazioni.
● extern contiene, per ogni applicazione, le immagini, le icone e i

temi associati.
● groups specifica le cartelle riservate ai gruppi presenti nel

sistema.
● log salva al suo interno di file di log, suddivisi per categoria di

applicazioni.
● system contiene i file del kernel e le librerie di sistema.
● users è la cartella contenente i dati degli utenti (la loro home

folder).
Il tree del percorso di installazione è riportato di seguito:
eyeOS/
|-- eyeOS9a9e09efb8
| |-- accounts
| | |-- mx6
| | `-- rt4
| |-- apps
| | |-- HelloWorld
| | |-- downZip
| | |-- editLink
| | |-- emptyTrash
| | |-- exit
| | |-- eyeAdmin
| | |-- eyeApps
| | |-- eyeBar
| | |-- eyeBoard
| | |-- eyeCalc
| | |-- eyeCalendar
| | |-- eyeChess

5 .3 Inst al la zi o ne e perso na li zz azi o ne Pa gi na 113
| | |-- eyeContacts
| | |-- eyeControl
| | |-- eyeCopy
| | |-- eyeDelete
| | |-- eyeDesk
| | |-- eyeDesk_extras
| | |-- eyeDialog
| | |-- eyeDock
| | |-- eyeDocs
| | |-- eyeDownload
| | |-- eyeFiles
| | |-- eyeGroups
| | |-- eyeImages
| | |-- eyeInfo
| | |-- eyeInstaller
| | |-- eyeLaunch
| | |-- eyeLogin
| | |-- eyeMkDir
| | |-- eyeMp3
| | |-- eyeNav
| | |-- eyeNotes
| | |-- eyePaste
| | |-- eyeProcess
| | |-- eyeProperties
| | |-- eyeRSS
| | |-- eyeRename
| | |-- eyeSoft
| | |-- eyeTrash
| | |-- eyeUpload
| | |-- eyeX
| | |-- eyeZip
| | |-- propertyTrash
| | |-- restoreTrash
| | `-- share
| |-- extern
| | |-- apps
| | `-- libs
| |-- groups
| | |-- gruppo1
| | |-- gruppo2
| | `-- public
| |-- log
| | |-- all
| | |-- proc
| | |-- sec
| | |-- um
| | `-- vfs
| |-- system
| | |-- conf
| | |-- kernel
| | |-- lib
| | `-- services
| `-- users
| |-- mx6
| `-- rt4
`-- img
73 directories

eyeOS.org mette a disposizione una wiki con una reference[55] per lo

sviluppo di Widget, Kernel Function, Service e Library.
La versione 1.5 di eyeOS integra al suo interno un gestore degli utenti e delle
loro autorizzazioni; per il progetto di Stage è stato utilizzata una versione
precedente allora in stadio di “beta release”, che tuttavia forniva le operazioni di
base sugli utenti e sui gruppi.
eyeAdmin[56], questo il nome del package, ha fornito le basi[57] per l'attuale

versione inclusa nell'ultima release (le cui funzionalità sono state integrate in
eyeControl). Una volta che l'amministratore ha creato gli utenti, basandosi sul
database di TYPO3, ognuno di essi può accedere al proprio account tramite la
pagina di login di eyeOS. Tramite uno script[58] rilasciato da Edouard Daubin è
inoltre possibile effettuare il login automatico. Con questa configurazione è
possibile creare all'interno di TYPO3 un link del tipo:
autoLogin.php?user=YOURUSERNAME&password=YOURPASSWORD
che fornisce il login automatico al sistema, effettuando il passaggio da

TYPO3 a eyeOS in modo invisibile all'utente, senza la necessità di reinserire
nome utente e password.
In uno scenario più generale, tuttavia, all'utente sarebbe presentata la

finestra di login, presentata in Figura 5.2.
L'interfaccia del sistema operativo virtuale è OS X –like, dal punto di vista

sia delle icone sia dello sfondo di default del desktop, con un menu per le
applicazioni posizionato in alto avente la funzione di dock; in basso al centro è
possibile accedere a un menu simile allo Start dei sistemi Windows.
Un'immagine del desktop di eyeOS è mostrata in Figura 5.3, mentre Figura 5.4
mostra il menu Start.
Gli effetti grafici di eyeOS sono gestiti tramite AJAX e Javascript, entrambi
linguaggi di scripting utilizzati per la creazione di applicazioni web interattive.

5 .3 Inst al la zi o ne e perso na li zz azi o ne Pa gi na 115
In particolare, AJAX ha il vantaggio di poter caricare in background i dati

aggiuntivi richiesti al server senza interferire con quanto visualizzato a schermo,
mentre Javascript è il linguaggio utilizzato per le chiamate delle funzioni AJAX.
Figura 5.2.: Pagina di login di eyeOS.
Questo permette di avere effetti quali trasparenze nei menu e notifiche di

sistema tramite finestre pop-up realizzate in modo non intrusivo e con poco
carico sia per il client che per il server.
La versione installata ha una traduzione (parziale e talvolta “zoppicante”) in

lingua italiana, favorita dallo sviluppo di una community italiana legata a eyeOS
(raggiungibile al sito eyeos.it) che tuttavia non costituisce, al momento attuale,
una fonte aggiornata di informazioni. Per questo motivo sarà necessario
procedere alla traduzione dell'attuale versione di eyeOS in italiano, dato che le
traduzioni e language pack delle versioni precedenti non sono compatibili.

Figura 5.3.: Desktop di eyeOS.
Figura 5.4.: Menu “Start”

di eyeOS.
Il modulo di interesse nel corrente progetto e per cui è stato scelto eyeOS è
principalmente eyeFiles, del quale mostro il menu di avvio in Figura 5.5. Esso
rappresenta l'equivalente dell'applicazione Finder di Mac OS X oppure di
Esplora Risorse dei sistemi operativi Windows.

5 .3 Inst al la zi o ne e perso na li zz azi o ne Pag ina 117
Figura 5.5.: Menu di avvio di eyeFiles.
Aprendo l'applicazione dal dock, la finestra che viene presentata offre

all'utente la possibilità di eseguire varie funzioni sulle cartelle. Il tasto destro del
mouse non è utilizzato, per questo motivo nel menu laterale esistono comandi
che solitamente vengono eseguiti con l'utilizzo di un menu contestuale. Di
seguito esamino le opzioni disponibili nella visualizzazione delle cartelle di
eyeNav, di cui è possibile vedere una schermata in Figura 5.6.
● Carica file: presenta all'utente alcuni campi tramite i quali

scegliere dei file presenti sul computer per trasferirli all'interno di eyeOS.
● Scarica e Scarica come zip: permettono l'operazione opposta,

ovvero ricevere i file selezionati da eyeOS al calcolatore che l'utente sta
utilizzando.
● Crea nuova cartella, Cancella, Rinomina, Copia e Incolla:

offrono le medesime funzioni presenti in qualunque interfaccia dei
sistemi operativi moderni.
● Proprietà: visualizza le proprietà del file o cartella selezionato.
● Menu Cartelle: permette di accedere, tramite shortcut, ad

alcune cartelle utili del sistema quali Home, Desktop, Documenti e
Musica.

L'unica differenza degna di nota per l'utente sarà il fatto che è necessario
selezionare prima il comando da eseguire ed in seguito cliccare sul file
selezionato, non il viceversa come si è soliti fare.
Nella parte inferiore dello schermo, le applicazioni aperte vengono affiancate

allo stesso modo della taskbar dei sistemi Windows e ogni finestra può essere
ridotta a icona, ingrandita o chiusa.
In alto vengono visualizzati il comando “Su di un livello” per salire di un

livello nell'albero dei direttori e una barra di navigazione che mostra l'attuale
direttorio in cui si sta lavorando. A questo proposito, alcune critiche sono state
mosse a eyeOS circa l'organizzazione delle cartelle all'interno del file system:
visualizzando la cartella Home di un utente, il percorso mostrato corrisponde
alla root del sistema in ambiente Unix, e la cartella Public viene mostrata nella
barra di navigazione come una sottocartella del direttorio Home dell'utente,
cosa che va contro la strutturazione logica dei dati.
In realtà, come visibile nell'albero dei direttori mostrato in precedenza, la

separazione tra le cartelle a livello di file system del server è ben chiara e il
sistema tratta le cartelle pubbliche e le cartelle private come due mount point
distinti, in quanto gestiti da due diverse applicazioni (eyeNav ed eyeGroups).
Per l'utente è possibile quindi navigare all'interno delle sue cartelle, spostare
i file sia all'interno di eyeOS che tra eyeOS e il client che sta utilizzando; per la
condivisione dei file tra gli utenti di eyeOS, è possibile spostarli all'interno della
directory Public per renderli visibili a tutti gli account del sistema, oppure
spostarli all'interno della directory del gruppo di appartenenza per condividerli
solo tra utenti selezionati.
Tramite la configurazione delle impostazioni di accesso alle cartelle dei

gruppi è possibile stabilire svariate combinazioni di accesso per ciascun gruppo
e utente.

5 .3 Inst al la zi o ne e perso na li zz azi o ne Pag ina 119
Figura 5.6.: eyeNav, gestore file di eyeOS.

6 Conclusioni
Ricapitolazione, prospettive
future, valutazione complessiva.
Pa gi na 122 6 .1 Ri ca pit o la zio ne
6.1 Ricapitolazione
Al termine di questo lavoro di Stage, l'obiettivo prefissato si può considerare

raggiunto, sebbene in un modo diverso rispetto a quanto preventivato
inizialmente. L'idea di utilizzare un CMS, in contrapposizione alla realizzazione
di una nuova applicazione software, ha attualizzato il progetto inserendolo in un
contesto di sviluppo moderno di siti web.
Questo progetto di Stage ha rappresentato per l'azienda una dimostrazione

delle potenzialità delle tecnologie Open Source odierne, non solo nella
realizzazione del singolo sito web ma anche nell'ottica della creazione di una
suite volta a offrire agli utenti (interni o esterni all'azienda) l'accesso a
informazioni aziendali da qualunque client connesso a internet, tramite
l'integrazione di un CMS e un sistema operativo basato sul web.
6.2 Prospettive future
La soluzione adottata offre la possibilità di espansioni future. É prevista

infatti l'integrazione del sistema con altri tipi di piattaforme: piattaforme di
groupware (ad esempio Zimbra Collaboration Suite) per la fornitura di ulteriori
servizi on-line e altre di supporto al lavoro collaborativo on-line.
L'applicazione web-based così ottenuta sarebbe installabile su sistemi

operativi free e Open Source, garantendo la possibilità di sostituire nelle
intranet locali sistemi ben più costosi rivolti alle PMI.

6 .3 V al ut azi o ne c o mp le ssiv a Pa gi na 12 3
6.3 Valutazione complessiva
La valutazione complessiva di questo progetto di Stage è positiva sotto vari

aspetti ma innanzi tutto dal punto di vista della mia formazione personale
dall'introduzione al mondo del lavoro.
In secondo luogo, mi è stato possibile studiare e implementare una soluzione

software basata su uno dei CMS più completi nell'offerta Open Source.
Durante il periodo di studio di TYPO3, mi sono reso conto della scarsità della
documentazione in lingua italiana presente per questo CMS. Ciò non ha
rappresentato un problema ai fini di questo progetto di Stage, anzi è stato uno
sprone per rendere questa trattazione un possibile riferimento per chi volesse
intraprendere lo sviluppo di siti web con TYPO3.

Riferimenti
bibliografici,
Appendice
Riferimenti bibliografia e fonti

web, listati e tabelle.
Pa gi na 12 6 Ri fe ri me nt i bi bli og ra fi ci, Append ice
Bibliografia e fonti web
1: typo3forum.com, TextWrangler/BBedit plugin for TypoScript highlighting.,

http://www.typo3forum.net/forum/tools-tipps/16599-typoscipt-syntax-
hilighting-bbedit-mac.html
2: PHP Group, PHP License Official Page, http://www.php.net/license/
3: Wikipedia, Wikipedia page about PHP, http://en.wikipedia.org/wiki/Php
4: Converse T, Park J, Morgan C, PHP and MySQL Bible
5: The Open Group, The Open Group Guidelines,

http://www.opengroup.org/tm-guidelines.htm
6: The Open Group, Mac OS X Version 10.5 Leopard on Intel-based Macintosh

computers certification,
7: OnLamp.com, PHP5 ImprovementsOver PHP4,

http://www.onlamp.com/pub/a/php/2004/07/15/UpgradePHP5.html
8: Apache Software Foundation, Apache Server Project Main Page,

http://httpd.apache.org/
9: Netcraft, December 2007 Web Server Survey,
10: MySQL AB, MySQL Reference Manual 5.1
11: Wikipedia, Wikipedia article about Web Browser,

http://en.wikipedia.org/wiki/Web_browser
12: Upsdell.com, Browser News: Usage Statistics,

http://upsdell.com/BrowserNews/stat.htm
13: Costa D, Vamosi S, Cnet Editors Review, http://reviews.cnet.com/4505-

9241_7-31117280.html?tag=nav

B ibli o g r af ia e fo nt i w eb Pa gi na 12 7
14: O'Reilly T, Web 2.0 Definition: Trying Again,

http://radar.oreilly.com/archives/2006/12/web_20_compact.html
15: Wikipedia, Wikipedia page on LAMP (Software Bundle),

http://en.wikipedia.org/wiki/LAMP_(software_bundle)
16: Kofler M, The Definitive Guide to MySQL5
17: Altmann W, Fritz R, Hinderink D, TYPO3 - Enterprise Content

Management
18: Fivecube, Why CMS | Make Web Editing a Breeze,

http://www.fivecube.com/company/inside_fivecube/approach/cms/
19: Calvin C. Sov, How do I decide what is the best CMS for me?
20: Reisinger P, Evaluation of Content Management Systems
21: University of California, UC Davis Web CMS Initiative, http://pubcomm-

29.ucdavis.edu/cmssurvey/
22: Wikipedia, List of CMS,

http://en.wikipedia.org/wiki/List_of_content_management_systems
23: Opensourcecms, Opensourcecms.com, http://www.opensourcecms.com
24: CMSMatrix, CMSMatrix - The Content Management Comparison Tool,

http://www.cmsmatrix.org/
25: Weitzman L,Lewis-Bowen A, Evanchik S, Using open source software to

design, develop and deploy a collaborative Web site, http://www-
128.ibm.com/developerworks/ibm/library/i-osource1/index.html?ca=drs-
26: Wikipedia, Wikipedia article on Joomla!,

http://it.wikipedia.org/wiki/Joomla!
27: Michelinakis D, Open Source Content Management Systems: An

Argumentative Approach
28: typo3.org, TYPO3 Developer Resource,
29: typo3.it, Risorsa italiana per TYPO3, http://typo3.it

Pa gi na 12 8 B iblio g ra fia e f o nti we b
30: Skårhøj K, Inside TYPO3 (doc_core_inside)
31: Kindstrom P, Introduction to TYPO3,

http://wiki.typo3.org/index.php/Introduction/Petr_Kindström_Introductio
n
32: typo3.it, TYPO3 Italia, http://typo3.it
33: Free Software Foundation, The GNU General Public License,

http://www.gnu.org/copyleft/gpl.html
34: Skårhøj K, TypoScript Syntax and In-depth Study (doc_core_ts)
35: Skårhøj K, TypoScript Templates doc_core_tstemplates
36: Skårhøj K, Templates, TypoScript and Beyond
37: Skårhøj K, Getting Started (doc_tut_quickstart)
38: TYPO3 Wiki, Getting Started,

http://wiki.typo3.org/index.php/Getting_started
39: Skårhøj K, TYPO3 Reference Manual TSRef (doc_tut_tsref)
40: Skårhøj K, Modern Template Building Part1 (doc_tut_templselect)
41: Typo3Wizard, Dynamically split a menu in two parts,

http://www.typo3wizard.com/en/snippets/menus/dynamically-split-a-
menu-in-2-parts.html
42: Skårhøj K, TypoScript by Example (doc_core_tsbyex)
43: TYPO3 Wiki, TYPO3 Wiki - TinyRTE,

http://wiki.typo3.org/index.php/TinyRTE
44: Rolland S, Holzinger F, User Guide for the Front-end User Registration
Extension, http://typo3.org/documentation/document-library/extension-
manuals/sr_feuser_register/current/
45: Chiodi L, Maggini G, Pari B, Analisi di Usabilità del sito webAnalisi di

Usabilità del sito web www.cenacolovinciano.orgwww.cenacolovinciano.org

B ibli o g r af ia e fo nt i w eb Pag ina 12 9
46: Lorenzutti M, User Guide for the Webformat Extendedshop extension,

http://typo3.org/documentation/document-library/extension-
manuals/extendedshop/2.0.7/view/
47: AA VV, TYPO3-UG-italy Digest, Vol 40, Issue 6, TYPO3-UG-italy Digest,

Vol 40, Issue 6http://lists.netfielders.de/cgi-bin/mailman/listinfo/typo3-ug-
italy
48: Wikipedia, Wikipedia page on Web operating system,

http://en.wikipedia.org/wiki/WebOS
49: Google, Google Products, http://www.google.com/intl/en/options/
50: Microsoft, Microsoft Office Live, http://officelive.microsoft.com/
51: Ulteo.com, Ulteo.com: My digital life made simple, http://www.ulteo.com/
52: eyeOS.com, eyeOS Professional Services for small companies,

http://www.eyeos.com/?section=ForSmallCompanies
53: eyeOS.org, eyeOS Wiki - Releases, http://wiki.eyeos.org/Releases
54: eyeOS Blog, What's coming in eyeOS1.0,

http://blog.eyeos.org/2007/04/04/whats-coming/
55: eyeOS Wiki, eyeOS Reference,

http://wiki.eyeos.org/Developers_Reference_Index
56: eyeos-apps.org, eyeAdmin page at eyeos-apps.org, http://www.eyeos-

apps.org/content/show.php/eyeAdmin?content=69757
57: eyeOS Forums, eyeAdmin development stopped,

http://forums.eyeos.org/index.php?topic=2300.0
58: Daubin E, eyeOS Autologin at OpenDesktop.org,

http://www.opendesktop.org/content/show.php/eyeOS+Autologin?content=
70330&PHPSESSID=f452d5065ee4d4a2ba4fef56023543fc

Pa gi na 130 F i le mo d el lo .ht ml
File modello.html
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//IT"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>3Services >>> Hardware e software. Soluzioni, servizi e

assistenza.</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-

8859-1">
<link href="res/3services.css" rel="stylesheet"

type="text/css" />
</head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"

class="sfondodestra">
<TABLE id="languageMenu"> </TABLE>
<table width="100%" height="121" border="0" cellpadding="0"
cellspacing="0">
<tr>
<td width="778" height="100" valign="top" background="images/3s-

gessato.gif">
<table width="778" height="100" border="0" align="left"

cellpadding="0" cellspacing="0">

<tr>

src="images/3services_01.gif" width="150" height="48"><img
src="images/3services-logo.gif" width="210" height="48"
border="0"></td>
<td width="109" valign="top"><img

F i le mo d el lo .ht ml Pa gi na 131
src="images/3services_03.gif" width="109" height="48"></td>


<td width="1"></td>
</tr>
<tr>
<td height="52" colspan="4" valign="top">


<table width="100%" border="0" cellpadding="0"
cellspacing="0" id="topmenu1">
<tr>

src="images/3services-3s-su.gif" width="150" height="52"></td>
<td class="menu1-level1-no"><a href="homepage.htm"

><img src="images/3s-home.gif" alt="homepage" name="homepage"
width="48" height="52" border="0"></a></td>
<td class="menu1-level1-no"><a href="dovesiamo.htm"

><img src="images/3s-dove.gif" alt="dove siamo" name="dovesiamo"
<td class="menu1-level1-no"><a href="contatti.htm"

><img src="images/3s-contatti.gif" alt="contatti" name="contatti"
<td class="menu1-level1-no"><a href="news.htm" ><img

src="images/3s-news.jpg" alt="news" name="news" width="45"
height="52" border="0"></a></td>
<td class="menu1-level1-no"><a href="offerte.htm" ><img

src="images/3s-offerte.jpg" alt="offerte" name="offerte" width="64"
<td width="43"><img src="images/3services_12.gif"

<td width="265"><img src="images/3services_13.gif"

</tr>
</table></td>
<td></td>
</tr>

</table></td>
<td width="100%" class="sfondo">
<tr id="topmenu2">
<td width="150" height="21"><img src="images/3services-3s-

giu.gif" width="150" height="21"></td>
<td width="73"><a href="software.htm" ><img

src="images/3s-software.gif" alt="software" name="software"
<td width="77"><img src="images/3s-hardware-in.gif"
alt="hardware" name="hardware" width="77" height="21"
border="0"></td>
<td width="121"><a href="supporto.htm" ><img
src="images/3s-supporto.gif" alt="supporto tecnico" name="supporto"
<td width="132"><a href="soluzioni.htm" ><img
src="images/3s-soluzioni.gif" alt="soluzioni e servizi"
name="soluzioni" width="132" height="21" border="0"></a></td>
<td width="100"><a href="partner.htm" ><img
src="images/3s-partner.gif" alt="partner" name="partner" width="100"
<td width="122" valign="top"><img src="images/spacer.gif"
</tr>
</table></td>
<td class="sfondogiallorosso"></td>
</tr>
</table>
<table width="100%" height="1056" cellpadding="0" cellspacing="0">
<tr>
<td width="100" height="142" valign="top">
<table width="100" cellspacing="0" cellpadding="0" NOWRAP>
<tr>

F i le mo d el lo .ht ml Pag ina 133
<td><img src="images/3services-tasti.gif" width="150"

height="60"></td>
</tr>
<tr>
<td class="menu_left"> <p><a href="modulare.htm"><br>Menu

a sinistra
</a></p><p><a href="modulare.htm"><br>Menu a sinistra
</a></p>
</td>
</tr>
<tr>
<td><img src="images/sotto-tasti.gif" width="150"

height="20"></td>
</tr>
</table>
</td>
<td colspan="2" valign="top">
<table width="629" cellspacing="0" cellpadding="0" id="content">
<tr>
<td height="2" colspan="2"><img src="images/spacer.gif"

</tr>
<tr>
<td colspan="2" class="titolo">Hardware</td>
</tr>
<tr>
<td colspan="2"> </td>
</tr>

<tr>
<td width="25" height="25"><img src="images/spacer.gif"

<td width="602" class="sottotitolo"><p>Progettazione

soluzioni HardWare <br>
</p></td>
</tr>
<tr>
<td> </td>
<td class="testo"><strong> 3Services Srl</strong>

è in grado di offrirvi i materiali
informatici delle migliori case produttrici. Vanta

inoltre una spiccata
attitudine ad effettuare un’analisi integrata,

basata sulle
reali esigenze hardware e software del Cliente. Le

soluzioni proposte garantiscono affidabilità, sicurezza e
scalabilità, nel rispetto delle esigenze di budget.
<p><strong> P</strong>rogettazione, installazione ed
integrazione di soluzioni hardware e software volte a garantire la
sicurezza dei dati e delle transazioni: </p>
<p>ï¿½ identificazione dei bisogni di Sicurezza e

creazione di politiche rivolte alla protezione dei dati <br>
ï¿½ progettazione ed implementazione di soluzioni rivolte
all'autenticazione degli utenti e all'autorizzazione degli accessi
<br>
ï¿½ soluzioni di backup <br>
ï¿½ soluzioni per la protezione dai virus <br>
ï¿½ sistemi Firewall <br>
ï¿½ applicazioni di sistemi di crittografia avanzata per la
trasmissione dei dati <br>
ï¿½ analisi e valutazione di prodotti software rivolti alla
sicurezza. </p>
<p><strong> 3Services srl </strong> assiste il cliente
in tutte le fasi necessarie all'informatizzazione del flusso di
lavoro: </p>
<p>ï¿½ Attraverso un'attenta analisi delle esigenze dei

propri clienti vengono costruite soluzioni personalizzate in base
alle reali necessità esistenti in termini di prestazioni,
alla tipologia di applicazioni utilizzate, alle più attuali
offerte del mercato informatico. </p>
<p>ï¿½ fornisce Personal Computer assemblati con rigidi
criteri di scelta della migliore componentistica in commercio,
garantisce il più elevato standard qualitativo possibile e
gli apparati di rete attivi e passivi (router, switch). </p>
<p>ï¿½ implementa l'infrastruttura di rete logica

F i le mo d el lo .ht ml Pa gi na 135
(indirizzamenti IP, segmentazione di reti multiple, routing, etc.)

</p>
<p>ï¿½ progetta i servizi necessari al migliore
funzionamento del flusso di lavoro: gestione documentale,
messaggistica e scambio dati, sistemi di sicurezza e protezione,
etc. <br>
ï¿½ installa e configura i sistemi nel rispetto dei tempi e delle

esigenze logistiche del cliente <br>
ï¿½ collauda e verifica il corretto funzionamento di tutto il
sistema </p> <br> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td class="sottotitolo"><font
color="#990000">Referenze</font></td>
</tr>
<tr>
<td height="46"> <div align="center"><img

src="images/mail-to.gif" width="19" height="22"
border="0"></a></div></td>
<td class="testo">Denis Moras,<br>
<br> <font color="#999999">Scrivetemi, ho una risposta

per ogni vostra
esigenza.</font></td>
</tr>
<tr>
<td colspan="2" class="righetta-bluCopia"> </td>
</tr>
</table>
<table>
<tr>
<td id="menu_bottom1" ><div align="center"><ul

class="menu_bottom1">


width="10" height="10"></font>
<a href="homepage.htm" title="homepage"> homepage</a>

width="10" height="10">
</font><a href="dovesiamo.htm" title="dovesiamo"> dove
siamo</a> <font color="#FF0000"><img

src="images/crocetta.jpg" width="10" height="10">
</font><a href="contatti.htm" title="contatti">

contatti</a>

width="10" height="10">
</font><a href="news.htm" title="news e offerte"> news

e offerte<br>
</ul>
<ul class="menu_bottom1b">
</a> <font color="#FF0000"><img src="images/crocetta-

arancio.jpg" width="10" height="10">
</font><a href="software.htm" title="software">

software</a>
<font color="#FF0000"><img src="images/crocetta-

</font><a href="" title="hardware"> hardware</a>
<font color="#FF0000"><img src="images/crocetta-

</font><a href="supporto.htm" title="supporto

tecnico">
supporto tecnico</a> <font color="#FF0000"><img

src="images/crocetta-arancio.jpg" width="10" height="10">
</font><a href="soluzioni.htm" title="soluzioni e

servizi">
soluzioni e servizi</a> <font color="#FF0000"><img

src="images/crocetta-arancio.jpg" width="10" height="10">
</font><a href="partner.htm"
title="partner">partner</a><br>
</ul></div></td>
</tr>

F i le mo d el lo .ht ml Pag ina 137
<tr>
<td> </td>
</tr>
</table></td>
<td width="332"> <div align="left">
<p> </p>
</div></td>
</tr>
</table>
</body>
</html>
Campo Setup di ext:BASE

TEMPLATE
# Configuring the Auto-Parser for main template:

plugin.tx_automaketemplate_pi1 {
# Read the template file:
content = FILE
content.file = fileadmin/template1/main/modello1.html
# Here we define which elements in the HTML that
# should be wrapped in subpart-comments:
elements {
BODY.all = 1
BODY.all.subpartMarker = DOCUMENT_BODY
HEAD.all = 1
HEAD.all.subpartMarker = DOCUMENT_HEADER
HEAD.rmTagSections = title
TD.all = 1
TABLE.all = 1
div.all=1
}
# Prefix all relative paths with this value:
relPathPrefix = fileadmin/template1/main/
}

Pa gi na 138 Ca mp o Se tu p di ex t:B ASE T EMP LAT E
###Bottom Menu cObject
lib.splitmenu = COA
lib.splitmenu {
10 = HMENU
10.special = directory
10.special.value = 1
10.1 = TMENU
10.1 {
wrap = <ul class="menu_bottom1-no"> | </ul>
NO {
stdWrap.cObject = COA
stdWrap.cObject {
10 = TEXT
10.field = title
if.value.data = register:count_HMENU_MENUOBJ
if.negate = 1
if.isLessThan.prioriCalc=1
if.isLessThan.cObject=TEXT
if.isLessThan.cObject.insertData=1
if.isLessThan.cObject.value =
({register:count_menuItems}+1)/2
wrap = <li>|</li>
}
}
}
20 < .10
20.1.wrap = <ul class="menu_bottom2-no"> | </ul>
20.1.NO.stdWrap.cObject.if.negate >
}
#page.200 < lib.splitmenu
###END of Bottom Menu cObject
####LEFT MENU
temp.tmenu= HMENU
temp.tmenu.entryLevel=1
temp.tmenu {
# second level
1 = TMENU
#1.wrap = <ul class="menu_left">|</ul>
1{
NO{
linkWrap = <p>|</p>
}
ACT=1
ACT{
linkWrap = <p class="menu_left_active">|</p>
}
#CUR=1
#CUR{
# wrapItemAndSub = <li class="menu_left_current-active">|</li>

Ca mp o Se tu p di ex t:B ASE T EMP LAT E Pa gi na 139
#}
#IFSUB=1
#IFSUB{
# wrapItemAndSub = <li class="menu-level2-with-subpage">|</li>
#}
}
}
lib.menu_left < temp.tmenu
###########LEFT MENU END
###START of GMENU Top PARTE 1 (topmenu1)###
lib.topmenu1 {
1=GMENU
1.maxItems=5
1 {
wrap (

src="fileadmin/template1/main/images/3services-3s-su.gif"
| <td><img
height="52"></td>
<td><img
height="52"></td>
)
NO {
XY= 48,52 || 90,52 || 72,52 || 45,52 || 64,52

5=IMAGE
5.file=fileadmin/template1/main/images/3s-home.gif ||
fileadmin/template1/main/images/3s-dove.gif ||
fileadmin/template1/main/images/3s-contatti.gif ||
fileadmin/template1/main/images/3s-news.jpg ||
fileadmin/template1/main/images/3s-offerte.jpg
10=TEXT
10 {
text.field=title
offset=12,46
fontColor=#FFFFFF
fontSize=10px
align=bottom, center
shadow {
offset=0,0
color=#000000
opacity=25
blur=50
niceText=1
}

RO < .NO
RO=1
RO.10.fontColor= #000000
ACT < .RO
ACT=1
}
#####END of GMENU Top parte 1###
#####START of GMENU Top PARTE 2 (topmenu2)###
lib.topmenu2 {
1=GMENU
# 1.maxItems=5
1.begin=6
1 {
wrap (

src="fileadmin/template1/main/images/3services-3s-giu.gif"
| <td width="122" valign="top"><img
src="fileadmin/template1/main/images/spacer.gif" width="123"
height="21"></td>
)
NO {
XY= [10.w]+10,21
5=IMAGE
5.file=fileadmin/template1/main/images/3s-topmenu2_sfondo.gif
10=TEXT
10 {
text.field=title
offset=3,15
fontColor=#FFFFFF
fontSize=11px
align=left
shadow {
offset=0,0
color=#000000
opacity=25

Ca mp o Se tu p di ex t:B ASE T EMP LAT E Pag ina 14 1
blur=50
niceText=1
} # la shadow
RO < .NO
RO=1
RO.10.fontColor= #1BCEFB
ACT < .RO
ACT=1
} # GMENU 1
###END of GMENU TOP parte 2 (topmenu2)###
###BEGIN languageMenu
/*
temp.languageMenu < plugin.tx_srlanguagemenu_pi1
temp.languageMenu.languagesUidsList = 0,1
temp.languageMenu.defaultLayout= 0
temp.languageMenu.defaultLanguageISOCode = IT
#marks.LANGUAGE < plugin.tx_srlanguagemenu_pi1
*/
temp.languageMenu = COA
temp.languageMenu {
10 = RECORDS
10.tables = tt_content
10.source = 57
}
temp.languageMenu < plugin.tx_srlanguagemenu_pi1

temp.languageMenu.defaultLanguageISOCode = it
###END languageMenu

# Main TEMPLATE cObject for the BODY
temp.mainTemplate = TEMPLATE
temp.mainTemplate {
cObject:
# Select only the content between the <body>-tags
workOnSubpart = DOCUMENT_BODY
# Substitute the ###menu_1### subpart with dynamic menu:
subparts.menu_bottom1 < lib.splitmenu
# Substitute the ###content### subpart with some example
content:
#subparts.content < styles.content.get
# Substitute the ###menu_left### subpart with Menu Left:
subparts.menu_left < lib.menu_left
# Substitute the ###content### subpart with content:
subparts.content < styles.content.get
# Substitute the ###languageMenu### subpart with languageMenu
:
subparts.languageMenu < temp.languageMenu
# Main TEMPLATE cObject for the HEAD

temp.headTemplate = TEMPLATE
temp.headTemplate {
cObject:
# Select only the content between the <head>-tags
workOnSubpart = DOCUMENT_HEADER
}
# Default PAGE object:

page = PAGE
page.typeNum = 0
# Copying the content from TEMPLATE for <body>-section:
page.10 < temp.mainTemplate
# Copying the content from TEMPLATE for <head>-section:
page.headerData.10 < temp.headTemplate
#debug
#page.config.disableAllHeaderCode=1
###BEGIN LANGUAGE SETUP
config.linkVars = L
config.typolinkLinkAccessRestrictedPages = NONE;

Ca mp o Se tu p di ex t:B ASE T EMP LAT E Pag ina 14 3
config.sys_language_uid = 0
config.language = it
config.locale_all = italian
page.config.htmlTag_langKey = it
[globalVar = GP:L = 5]
config.language = en
config.locale_all = english
config.sys_language_uid = 5
page.config.htmlTag_langKey = en
[global]
###END LANGUAGE SETUP
Foglio di stile CSS
BODY {
margin: 0px;
background-image: url('../images/gessato-dx.gif');
background-repeat: repeat-y;
background-position: right;
background-color: #FFFFFF;
}
.testo {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-style: normal;
font-weight: normal;
color: #003366;
text-decoration: none;
text-align: justify;
padding: 5px 10px;
white-space: normal;
line-height: normal;
display: compact;
.content {
width: 629px;
border: 0px;
padding: 0px;
.sfondo {
background-color: #FFFFCC;

Pa gi na 144 F o g lio d i st il e CSS
background-image: url('../images/3s-gessato.gif');
background-repeat: repeat-x;
font-size: 9px;
color: #FFFFFF;
}
.niente {
font-size: 8px;
font-style: normal;
margin: 1px;
padding: 1px;
height: auto;
width: auto;
}
.credits {

font-size: 9px;
font-style: normal;
font-weight: normal;
color: #999999;
text-align: center;
padding: 2px;
}
.sfondogiallorosso {
background-image: url('../images/3s-giallorosso.gif');
font-size: 9px;
color: #FFFFFF;
}
.menu-sinistra {
background-image: url('../images/3s-gessatobianco.gif');
}
.testoALLdestra {
color: #FFFFFF;
font-size: 9px;
text-align: right;
}
.titolo {
font-size: 16px;
font-style: normal;
font-weight: bold;
color: #003399;
padding: 5px 10px;

F o g li o di sti le CSS Pag ina 14 5
display: compact;
background-image: url('../images/righetta-blu.gif');
background-position: bottom;
}
.sottotitolo {
font-size: 12px;
font-style: normal;
font-weight: bold;
color: #0099CC;
padding: 5px 10px;
display: compact;
background-image: url('../images/righetta-gialla.gif');
background-position: bottom;
}
.righetta-blu {
background-image: url('../images/righetta-blu.gif');
cursor: crosshair;
filter: BlendTrans(Duration=3);
}
.sfondodestra {
background-image: url('../images/gessato-dx.gif');
background-position: right;
background-color: #FFFFFF;
}
.righetta-bluCopia {
background-image: url('../images/righetta-blu.gif)';
cursor: crosshair;
filter: BlendTrans(Duration=3);
background-position: center;
}
.menu_left {
background-image: url('../images/sfondo-tasti.gif');
font-size: 10px;
font-weight: bold;
color: #FFFFFF;
font-variant: normal;
text-decoration: underline;
text-align: left;
padding-left: 15px;
vertical-align: text-top;

Pa gi na 146 F o g lio d i st il e CSS
.menu_left UL.menu_left {
list-style-type: none;
}
.menu_left UL.menu_left_active li {
font-size: 10px;
font-weight: bold;
color: #000000;
}
.menu_left_active {
font-size: 10px;
font-weight: bold;
color: #000000;
}
.menu-sopra {

background-image: url('../images/sfondo-tasti.gif');
font-size: 12px;
font-weight: bold;
color: #FFFFFF;
text-decoration: underline;
text-align: left;
}

Ringraziamenti
Desidero porgere i miei ringraziamenti innanzi tutto alla Professoressa

Marina Zanella, per la paziente attesa dimostrata nella consegna di questo
lavoro, nonché per la disponibilità e l'attenzione dedicata alla correzione dello
stesso.
La medesima gratitudine va anche al Tutor aziendale Denis Moras e a tutta

l'azienda 3Services S.r.l. per l'ottimo rapporto professionale e di amicizia che si
è venuto a creare nel tempo e per avermi offerto la possibilità di vivere questa
esperienza di Stage.
Un grazie di cuore ai miei genitori, Paola e Tomaso, che da sempre mi sono

vicini, rispettano le mie scelte e credono in me e nelle mie capacità.
A tutti i miei amici, grazie!
Infine, un ringraziamento speciale a Chiara, per essere entrata a far parte

della mia vita. Senza di lei, probabilmente, queste pagine non sarebbero state
scritte.

Made on a Mac with NeoOffice.
Questa opera è pubblicata sotto licenza Creative Commons
“Attribuzione-Non commerciale-Condividi allo stesso modo” 2.5 Italia.
Questo documento consta di 160 pagine.

Realizzazione Di Un Sito Web Dinamico Per La Gestione Di Servizi Rivolti Al Cliente

Caricato da

Informazioni sul documento

Titolo originale

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Realizzazione Di Un Sito Web Dinamico Per La Gestione Di Servizi Rivolti Al Cliente

Caricato da

Copyright:

Formati disponibili

UNIVERSITÀ DEGLI STUDI DI BRESCIA

CORSO DI LAUREA IN INGEGNERIA DELL’INFORMAZIONE

Realizzazione di un sito web dinamico

ANNO ACCADEMICO 2006/2007

Alfred Lord Tennyson, Ulysses

1.1 Ente Ospitante.................................................................................2

2.1 Perché adottare un CMS................................................................12

4.1 Installazione di TYPO3..................................................................65

5.1 Sistemi operativi basati sul web..................................................106

Bibliografia e fonti web.....................................................................124

Indice delle Figure

Indice delle Tabelle

Ente ospitante, presentazione

1.1 Ente Ospitante

L'attività di Stage si è svolta presso la ditta 3Services S.r.l. con sede in

Il lavoro di Stage si è svolto sotto la supervisione di Denis Moras con la

Università degli Studi di Brescia

1.2 Presentazione del lavoro

Avendo evidenziato le aree di competenza dell'azienda 3Services S.r.l.,

L'attività svolta è stata dunque la realizzazione di un sito web dinamico,

Proprio perché un CMS è basato sul principio di separazione dei contenuti

Un'altra scelta effettuata e che ha influenzato l'intero svolgimento del lavoro

Università degli Studi di Brescia

Presenterò le fasi di installazione, di configurazione e di utilizzo del CMS

Come approfondimento verrà studiato e configurato eyeOS, un Web-based

É stato inizialmente progettato per la produzione di pagine web dinamiche e,

Università degli Studi di Brescia

l'utilizzo di interesse in questo progetto, ma può essere usato anche da a linea di

La versione di PHP utilizzata è PHP 5.2.0. La major release 5.x di PHP è

● Supporto migliorato alla programmazione orientata agli oggetti.

● Estensione “PHP Data Objects”, che definisce una interfaccia

● Miglioramenti delle prestazioni.

● Migliore supporto per MySQL e MSSQL.

● Integrato supporto per SQLite e SOAP.

● Gestione degli errori tramite eccezioni.

Università degli Studi di Brescia

La sua relativa difficoltà di configurazione è compensata dal fatto che

Un database (cioè una collezione strutturata di dati) relazionale registra i

Università degli Studi di Brescia

“SQL” significa Structured Query Language: esso è il linguaggio di accesso ai

Le API (Application Program Interface) fornite da PHP per interfacciarsi con

● mysql. Disponibile per PHP 4 e 5, questa estensione è intesa per

● mysqli (MySQL Improved). Questa estensione, disponibile

La connessione tra PHP e MySQL avviene tramite la API Open Database

1.3.4 Browser web

Il web browser[11] è un'applicazione software che permette a un utente di

Università degli Studi di Brescia

Le informazioni contenute all'interno di una pagina web sono scritte in

Da quando Microsoft ha introdotto Internet Explorer come parte dei propri

Tutti i browser web garantiscono una compatibilità minima molto elevata e

Università degli Studi di Brescia

proprio per identificare la rivoluzione nell'industria dei computer causata dalla

1.3.5 Sistemi LAMP

L'utilizzo e la combinazione di queste tecnologie definisce l'infrastruttura del

Anche se il nome più diffuso per la sua identificazione è il termine LAMP,

Università degli Studi di Brescia

dovremmo parlare di sistema MAMP (dove la lettera “M” iniziale sostituisce

Esistono soluzioni AMP (nelle quali non è incluso il sistema operativo)

Seguendo questa convinzione, il sistema MAMP/LAMP sviluppato per

Università degli Studi di Brescia

Sistemi CMS, comparazione,

2.1 Perché adottare un CMS

I sistemi per la gestione di contenuti sono diventati lo standard per la