Sviluppo Di Portali Tramite La Tecnologia Sharepoint

Università degli Studi di Trieste

Facoltà di Ingegneria

Corso di Laurea Triennale in Ingegneria Informatica

SVILUPPO DI PORTALI CON TECNOLOGIA SHAREPOINT:
PARAMETRAZIONE E PERSONALIZZAZIONE PER LO
SVILUPPO DI PORTALI VERTICALI.

Relatore Laureando

Chiar.mo Prof. Maurizio Fermeglia Denis Tomada

Anno Accademico 2007-2008

Sommario
1. Introduzione ................................................................................................................... 4

2. Analisi ............................................................................................................................. 6

2.1 Situazione di partenza ................................................................................................ 6
2.1.1 Descrizione pagina web ................................................................................................... 6
2.1.2 Sistema informatico ........................................................................................................ 7
2.1.3 Basi di dati esistente ....................................................................................................... 7

2.2 Vincoli di progetto ....................................................................................................... 8
2.2.1 Uso della tecnologia WSS ................................................................................................ 8
2.2.2 Vincoli temporali ............................................................................................................. 9

2.3 Esigenze funzionali .................................................................................................... 9
2.3.1 Accessibilità ..................................................................................................................... 9
2.3.2 Migliore organizzazione dei dati...................................................................................... 9
2.3.3 Funzionalità simili a RECA e Intranet del Dicamp .......................................................... 10
2.3.4 Supporto di linguaggi lato server................................................................................... 11

3. Requisiti........................................................................................................................ 12

3.1 Elenco dei requisiti ................................................................................................... 12

3.2 Sviluppo dei requisiti ................................................................................................ 12
3.2.1 Pagina iniziale ................................................................................................................ 12
3.2.2 Creazione di una pagina testuale dedicata alle tematiche di ricerca............................. 14
3.2.3 Creazione di elenchi personalizzati ............................................................................... 15
3.2.4 Calendario ..................................................................................................................... 17
3.2.5 Raccolta di documenti pubblici ..................................................................................... 18
3.2.6 Raccolta di documenti privati ........................................................................................ 19
3.2.7 Sviluppo delle pagine dedicate all’inserimento dei dati nel DB ..................................... 20

4. Realizzazione ............................................................................................................... 23

4.1 Installazione e configurazione del pacchetto software ............................................ 23
4.1.1 Requisiti per l’installazione di WSS ................................................................................ 23
4.1.2 Installazione di WSS ...................................................................................................... 24
4.1.3 Inizializzazione di un portale ......................................................................................... 26

4.2 Parametrizzazione semplice .................................................................................... 29

4.2.1 Calendario ..................................................................................................................... 30
4.2.2 Raccolte di documenti ................................................................................................... 30
4.2.3 Personalizzazione logo e intestazione del portale ......................................................... 31

4.3 Parametrizzazione avanzata .................................................................................... 33
4.3.1 Personalizzazione degli annunci .................................................................................... 34
4.3.2 Personalizzazione dei Link ............................................................................................. 37
4.3.3 Personalizzazione della pagina iniziale .......................................................................... 37
4.3.4 Personalizzazione della pagina delle tematiche ............................................................ 38

4.4 Sviluppo di nuove parti ............................................................................................. 38
4.4.1 Connessione alla sorgente dati ..................................................................................... 38
4.4.2 Creazione di un elenco personalizzato .......................................................................... 40
4.4.3 Personalizzazione di un elenco personalizzato .............................................................. 41

4.4.3.1 Elenco del “Collegio dei docenti” ............................................................................ 41

4.4.3.2 Elenco del “Consiglio Scientifico” ........................................................................... 45

4.4.3.3 Elenco dei “Supervisori” ......................................................................................... 46

4.4.3.4 Elenco dei “Dottorandi in corso” ............................................................................. 47

4.4.4 Script javascript per la chiamata AJAX ........................................................................... 50
4.4.5 Sviluppo pagina .Net per l’inserimento dei dati ............................................................ 52

5. Conclusioni ................................................................................................................... 59

Bibliografia .............................................................................................................................. 60

1. Introduzione
Con questa tesi, sullo sviluppo di portali verticali attraverso la parametrizzazione e

personalizzazione della tecnologia SharePoint, mi sono occupato della progettazione e dello
sviluppo di un portale per la Scuola di Nanotecnologie dell’Università degli Studi di Trieste.

Attualmente, il portale presente è composto da una semplice pagina statica contenente una
piccola presentazione delle attività e degli obiettivi della scuola, l’elenco delle pubblicazioni degli
ultimi anni e l’elenco dei dottorandi in corso.

L’obiettivo finale è la realizzazione di un nuovo portale che permetta l’uso di contenuti
dinamici quali:

visualizzazione di dati contenuti in un database (2.1.3 Basi di dati esistente)

creazione ed aggiornamento online di elenchi personalizzati (3.2.3 Creazione di

elenchi personalizzati)

Le fasi principali dello sviluppo del portale sono le seguenti:

Analisi dell’attuale situazione del portale (2.1 Situazione di partenza)

Definizione degli obiettivi e delle funzionalità (3.1 Elenco dei requisiti)

Analisi e studio della base di dati

Analisi e studio del programma scelto per la modellazione e parametrizzazione del

portale
Realizzazione dell’interfaccia grafica e relativa documentazione per futuri aggiornamenti

e modifiche (4.2 Parametrizzazione semplice)
Realizzazione dell’interfaccia grafica per l’inserimento di dati online (4.4.5 Sviluppo

pagina .Net per l’inserimento dei dati)

L’applicazione sarà installata sul web server del DICAMP che utilizza come sistema
operativo Windows Server 2003. L’utilizzo del portale sarà pubblico e quindi le funzionalità
implementate dovranno essere compatibili con il maggior numero di browser presenti in rete
(Internet Explorer, Mozilla Firefox, Opera, etc.) in modo tale da garantirne il funzionamento in ogni
condizione.

La tecnologia scelta per lo sviluppo del portale è WSS 3.0 SP11, mentre l’ambiente di
sviluppo per la parametrizzazione è Microsoft Office SharePoint Designer 2007. Le pagine

Microsoft Windows SharePoint Service 3.0 con Service Pack 1 versione 12.0.0.6219. Pagina di
1

riferimento http://technet.microsoft.com/en-us/windowsserver/sharepoint/bb400747.aspx.
4

dedicate all’inserimento dei dati saranno sviluppate nel linguaggio C# utilizzando l’ambiente di
sviluppo Visual Studio 2008 Professional. Infine, il DBMS adottato è Microsoft SQL Server 2005.

Dal punto di vista organizzativo, ho suddiviso questo lavoro in quattro fasi. Si parte da
un’analisi dello stato iniziale, per poi passare allo studio dei requisiti del nuovo portale per arrivare
infine alla realizzazione vera e propria del portale, alla sua installazione ed alla sua pubblicazione.

La fase di analisi iniziale consiste nella verifica dello stato attuale del portale e nell’analisi
della base di dati messa a disposizione dalla scuola (Capitolo 2).

La fase dei requisiti illustra le richieste per il nuovo portale (Capitolo 3). A tale scopo sono
stati proposti come portali di riferimento RECA2 e Intranet dei DICAMP3

La fase di realizzazione consiste nell’implementazione e parametrizzazione degli strumenti
già presenti in WSS, nella ricerca in Internet di terze parti o nella realizzazione di nuove parti
mediante l’utilizzo di Microsoft SharePoint Designer (Capitolo 4).

La fase successiva alla pubblicazione del portale, prevede l’implementazione di tabelle
descrittive dei campi, presenti all’interno delle tabelle del DB, dedicate allo sviluppo delle pagine
ASP.NET per l’inserimento dei dati (Paragrafo 3.2.7 Sviluppo delle pagine dedicate
all’inserimento dei dati nel DB e paragrafo 4.4.5 Sviluppo pagina .Net per l’inserimento dei dati).

Progetto di Alta Formazione – Risparmio Energetico e Confort Abitativo. Il portale è raggiungibile
2

all’indirizzo http://reca.units.it.
Intranet dei DICAMP (Dipartimento di Ingegneria Chimica dell’Ambiente e delle Materie Prime). Il
3

portale è raggiungibile all’indirizzo http://intranet.dicamp.units.it.
5

2. Analisi

2.1 Situazione di partenza

2.1.1 Descrizione pagina web
Il portale della Scuola di Nanotecnologie allo stato iniziale del progetto prevede solamente
un’unica pagina web statica contenente le informazioni basilari riguardanti l’attività, le tematiche di
ricerca, la lista delle pubblicazioni del collegio e la lista dei dottorandi in corso.

Da un punto di vista tecnologico, l’attuale costruzione statica limita fortemente le
funzionalità del portale: il linguaggio HTML non permette l’inserimento di script server-side, di fatto,
impedendo l’interattività del portale con l’utente utilizzatore ma sopratutto con l’utente
amministratore.

Inoltre l’attuale situazione non permette il dialogo con sorgenti database esterne,
attualmente presenti all’interno della scuola, e contenenti tutte le informazioni riguardanti lo stato di
attività dei dottorandi in corso.

Da un punto di vista organizzativo dei dati, l’attuale costruzione non dispone di un elenco di
collegamenti ipertestuali alle varie sezioni, rendendo il contenuto disordinato e di difficile
consultazione.

Figura 1 – Tabella Lista delle tesi di dottorando attive

6

2.1.2 Sistema informatico
Il web server sul quale è installata attualmente la pagina è il DICAMPSRV1 che adotta
come sistema operativo Microsoft Windows Server 2003.

Su tale macchina risultano già installati:

Microsoft Windows Sharepoint Service 3.0

Microsoft SQL Server 2005


2.1.3 Basi di dati esistente
All’interno della struttura esiste un database contenente tutte le informazioni relative alle
attività svolte.

Il database è composto complessivamente da 8 tabelle e 5 viste.

Le tabelle presenti, con rispettivi campi, sono le seguenti:

tblDipartimento (ID, NomeDip)

tblDottorando (ID, Cognome, Nome, Ciclo, AnnoInizio, AnnoFine, NoteFine, Borsa,

IDDipartimento, SSD, IDSupervisor, emailPrivato, emailUNITS, telefono, TitoloTesiITA,
AbstractTesiITA, AbstractTesiENG, LaureaOrigine)
tblEnte (IDEnte, Ente)

tblMissione (ID, IDDottorando, Luogo, Evento, DataInizio, DataFine, Contributo)

tblPosizione (IDPosizione, SiglaPosizione, Posizione)

tblRuoloCollegio (IDRuoloCollegio, Ruolo)

tblRuoloCS (IDRuoloCS, RuoloConsiglioScientifico)

tblTutoraggio (IDDocente, IDDottorando, DataInizio, DataFine)


I campi evidenziati in grassetto indicano le chiavi primarie di ogni singola tabella.

Le viste presenti, con rispettivi campi, sono le seguenti:

vwCollegioDocenti (IDDocente, Cognome, Nome, SSD, Ente, NomeDip,

SiglaPosizione, email, IDRuoloCollegio, Ruolo)
vwConsiglioScientifico (IDDocente, Cognome, Nome, SSD, Ente, NomeDip,

SiglaPosizione, email, RuoloConsiglioScientifico, IDRuoloCS)
vwDottorandiInCorso (ID, Cognome, Nome, Ciclo, AnnoInizio, AnnoFine, NomeDip,

IDDipartimento, SSD, Expr1, Expr2, IDEnte, Expr3, TitoloTesiITA)
vwSupervisors (Cognome, Nome, IDSupervisor, IDDocente, Dottorando Cognome,

Dottorando Nome, Ciclo, AnnoFine, AnnoInizio, NomeDip, Ente)
vwTutori (IDDocente, IDDottorando, DataInizio, DataFine, Cognome, Nome, Ente,

NomeDip, Expr1, Expr2, Ciclo, Expr3, ID).

7

In vwDorroandiInCorso ci sono alcuni campi derivati: i campi Expr1 e Expr2 indicano
rispettivamente il Cognome ed il Nome del docente che svolge attività di tutor nei confronti del
dottorando, il campo Expr3 indica il dipartimento di appartenenza del docente.

In vwTutori i campi Expr1 e Expr2 indicano rispettivamente il Cognome ed il Nome del
dottorando, mentre il campo Expr3 indica il valore della chiave primaria del docente.

Il diagramma del database è riportato in Figura 2.

Figura 2 – Diagramma del database NanotechDB

2.2 Vincoli di progetto

2.2.1 Uso della tecnologia WSS
L’unico vincolo di natura tecnica richiesto espressamente dal committente è l’utilizzo della
tecnologia Microsoft Windows Sharepoint Service. Vista la molteplicità di versioni presenti è stato
specificato l’utilizzo di WSS 3.0 con SP1 versione 12.0.0.6219.

Tale vincolo può sembrare molto restrittivo ma risulta fondamentale rispettarlo per non
incorrere in problemi di backup e restore del portale da macchina di sviluppo a macchina di lavoro,
che può portare, a volte, nel peggiore dei casi, addirittura alla perdita di dati.

8

2.2.2 Vincoli temporali
La pubblicazione del portale inizialmente non prevedeva un vincolo temporale preciso.
Durante la fase di sviluppo è sorta la necessità di rendere il portale operativo entro la data del 01
Marzo 2009.

2.3 Esigenze funzionali

2.3.1 Accessibilità
L’utilizzo del portale sarà pubblico e quindi le funzionalità implementate dovranno essere
compatibili con il maggior numero di browser presenti in rete (ad esempio Internet Explorer, Mozilla
Firefox, Opera, etc.) in modo tale da garantirne il funzionamento in ogni condizione.

2.3.2 Migliore organizzazione dei dati
La tecnologia WSS 3.0 prevede la presenza all’interno delle pagine generate di una barra
superiore dei collegamenti e di un menu posizionato sul lato sinistro del portale. La creazione e la
gestione di tali collegamenti avviene da una zona di amministrazione, protetta da login, in forma
totalmente automatizzata e, soprattutto, gestibile interamente on-line.

Tale caratteristica soddisfa appieno la richiesta di migliore organizzazione e strutturazione
dei dati.

Per raggiungere tale obiettivo è stato scelto di puntare sulla barra orizzontale disposta sulla
parte superiore delle varie pagine: tale disposizione dovrà permettere il rapido collegamento alle
varie sezioni, permettendo una navigazione più chiara e mirata rispetto alla precedente versione.

I collegamenti presenti nella barra superiore sono rappresentati nella Figura 3.

Figura 3 - Struttura della barra dei collegamenti superiori

9

Come indicato precedentemente, WSS 3.0 genera sul lato sinistro del portale un elenco di
collegamenti (il classico menu di navigazione presente in qualsiasi sito internet). In questo elenco,
in aggiunta ai collegamenti sopra elencati, verranno predisposti ulteriori collegamenti: in particolare
saranno inseriti dei link alle librerie di documenti ed al calendario contenente le scadenze e gli
appuntamenti delle attività svolte all’interno della scuola.

Lo schema dei collegamenti contenuti dal menu laterale è illustrato in Figura 4.

Figura 4 – Struttura del menu laterale

2.3.3 Funzionalità simili a RECA e Intranet del Dicamp
Il portale RECA ed Intranet del Dicamp presentano alcune funzionalità che sono state
richieste anche per il portale della scuola.

Queste funzionalità sono:

Elenco di link ipertestuali ad altre risorse presenti in rete

Elenco delle “News e annunci”

Raccolta di documenti sia pubblici che privati

Calendario per l’inserimento di eventi ed attività


Avendo deciso di utilizzare per la realizzazione del nuovo portale la stessa tecnologia su
cui sono basati RECA e Intranet, vedremo in seguito come siano di facile implementazione i punti
elencati precedentemente; meno ovvia invece risulterà la loro personalizzazione.

10

Figura 5 – Home Page del portale RECA

Figura 6 – Home Page del portale Intranet del Dicamp

2.3.4 Supporto di linguaggi lato server
La richiesta di supporto delle tecnologie server-side viene soddisfatta pienamente da WSS
3.0: questa tecnologia è sviluppata basandosi su tecnologia ASP.Net ed accetta, sebbene con
notevoli vincoli di sviluppo, script per l’interazione con l’utente.

Tale predisposizione permetterà sia il dialogo con DB per la visualizzazione dei dati
presenti nelle tabelle sia la realizzazione di contenuti dinamici aggiornabili direttamente online.

11

3. Requisiti

3.1 Elenco dei requisiti
Di seguito sono riportati i requisiti indicati per lo sviluppo del portale della scuola:

1. Creazione di una pagina iniziale (homepage)
2. Creazione di una pagina testuale dedicata alle tematiche di ricerca
3. Creazione di elenchi, in particolare:
a. Collegio dei docenti
b. Consiglio Scientifico
c. Supervisori
d. Dottorandi in corso
4. Calendario
5. Raccolta di documenti pubblici
6. Raccolta di documenti privati
7. Sviluppo pagine dedicate all’inserimento dei dati nel DB.

3.2 Sviluppo dei requisiti

3.2.1 Pagina iniziale
La pagina iniziale di un qualsiasi portale, comunemente indicata con il nome “home” o
“homepage”, è la pagina che appare nel momento in cui un qualsiasi utente si collega al portale.
La funzione principale di una home è l’accoglienza dell’utente visitatore: all’interno di questa
pagina, il più delle volte vengono predisposti collegamenti rapidi alle varie sezioni attive all’interno
del portale, informazioni utili quali eventi o appuntamenti di natura attinente ai contenuti,
collegamenti ipertestuali ad altre risorse esterne correlate.

Lo schema scelto per la costruzione della pagina iniziale del portale della scuola è simile a
quello usato per la realizzazione della pagina iniziale di RECA. Per maggiore chiarezza riportiamo
di seguito la struttura della pagina (Figura 7).

12

Figura 7 – Struttura portale RECA

La parte superiore identificata dall’intestazione del portale RECA contiene semplicemente il
logo e il nome del sito.

Nella colonna laterale di sinistra sono presenti gli annunci ed i link ipertestuali. Gli annunci
visualizzano le informazioni secondo un ordine temporale (dal più recente al meno recente) e per
ogni annuncio viene indicato: titolo, data e ora di pubblicazione, nome dell’utente che ha pubblicato
l’annuncio, testo del messaggio ed eventuali allegati. I link ipertestuali invece visualizzano un unico
dato, che è il nome del collegamento: tale voce se cliccata apre una nuova finestra del browser
con la risorsa desiderata.

Nella colonna di destra è presente un corposo testo arricchito di varie immagini dove viene
descritta la finalità del progetto RECA.

Usando come base tale esempio è stato deciso di impostare la pagina iniziale del portale
della scuola nel seguente modo (Figura 8).

13

Figura 8 – Struttura del portale NANOTECH

Anche in questo portale la sezione dell’intestazione conterrà il logo e il nome del portale.

Nella colonna laterale di sinistra sarà presente il classico menu. L’elenco delle voci e dei
corrispondenti collegamenti alle sezioni viene gestito interamente da WSS.

Nella colonna centrale sarà presente una parte testuale. Il testo sarà inserito in un secondo
momento dall’amministratore del portale: tale parte dovrà essere modificabile online e dovrà
supportare l’inserimento di immagini o di link ipertestuali.

Nella colonna di destra saranno presenti l’elenco degli annunci e sotto, l’elenco dei link.
L’elenco degli annunci del portale della scuola, come per RECA, visualizzerà le informazioni
secondo un ordine temporale (dal più recente al meno recente). Diversamente da RECA, è stato
richiesto che i dettagli presenti per ogni annuncio siano solamente il titolo del messaggio, il giorno
di inserimento ed il testo del messaggio.

Per quanto riguarda l’elenco dei collegamenti non è stata richiesta alcuna modifica
particolare, quindi la struttura rimane la stessa proposta dal portale RECA.

3.2.2 Creazione di una pagina testuale dedicata alle tematiche di ricerca
È stata richiesta la realizzazione di una semplice pagina testuale per permettere
l’inserimento di un testo che descriva le tematiche di ricerca della scuola.

14

Per tale pagina non sono state avanzate esigenze particolari, l’unica è la possibilità di
modifica online del testo contenuto.

3.2.3 Creazione di elenchi personalizzati
Come già sottolineato più volte, all’interno della struttura della scuola esiste un DB
contenente le informazioni relative alle varie attività e pubblicazioni dei dottorandi e del collegio.

Su richiesta del committente, all’interno del portale della scuola, dovranno essere
predisposti degli elenchi per visualizzare il contenuto delle viste, già illustrate nel capitolo
precedente (2.1.3 Basi di dati esistente).

Gli elenchi richiesti sono i seguenti:

1. “Collegio dei docenti”: le informazioni per il presente elenco saranno prelevate dalla
vista vwCollegioDocenti
2. “Consiglio scientifico” : le informazioni per il presente elenco saranno prelevate dalla
vista vwConsiglioScientifico
3. “Supervisori” : le informazioni per il presente elenco saranno prelevate dalla vista
vwSupervisors
4. “Dottorandi in corso” : le informazioni per il presente elenco saranno prelevate dalla
vista vwDottorandiInCorso

Ora analizziamo come saranno visualizzati nelle varie sezioni i dati restituiti dalle varie
viste.

Docente Ruolo Email Dipartimento Ente Pos. SSD
AFRICH Cristina Membro esclusivo collegio africh@tasc.infm.it Dip. di Fisica UNITS ASS fis03
ARFELLI Fulvia Membro esclusivo collegio arfelli@trieste.infn.it Dip. di Fisica UNITS RU fis07
BARALDI Alessandro Membro esclusivo collegio alessandro.baraldi@elettra.trieste.it Dip. di Fisica UNITS RU fis03
… … … … … … …
Tabella 1 - Campi dell’elenco “Collegio dei docenti”

La Tabella 1 indica lo schema per la visualizzazione della vista vwCollegioDocenti. Da
sinistra a destra troviamo la colonna “Docente” che visualizzerà il nome e cognome del docente;
“Ruolo” indicherà il ruolo nel collegio dei docenti; “Email” indicherà l’indirizzo E-mail del docente;
“Dipartimento” ed “Ente” indicheranno il dipartimento ed ente di appartenenza; “Posizione”,
indicherà la posizione del docente ed infine la colonna “SSD” indicherà il settore scientifico-
disciplinare di appartenenza.

Docente Ruolo Email Dipartimento Ente Pos. SSD
CIGADA Alberto Membro Alberto.cigada@polimi.it Pol. Milano PO ing-ind22
FERMEGLIA Maurizio Membro mauf@dicamp.univ.trieste.it DICAMP UNITS PO ing-ind24
MORGANTE Alberto Membro morgante@tasc.infm.it Dipartimento di Fisica UNITS PA fis01
… … … … … … …
Tabella 2 – Campi dell’elenco “Consiglio scientifico”

15

La Tabella 2 indica lo schema per la visualizzazione della vista vwConsiglioScientifico. I
campi presenti ed il significato sono simili ai campi presentati nella Tabella 1.

Supervisore Dottorando Ciclo Anno Inizio Anno Fine Dipartimento Ente
STANTA Giorgio POZZI MUCELLI Stefano 19 2004 2007 Dipartimento SCMT UNITS
STANTA Giorgio LUCHI Massimiliano 19 2004 2007 Dipartimento SCMT UNITS
BONIN Serena FABBIAN Matteo 19 2004 2007 Dipartimento SCMT UNITS
… … … … … … …
Tabella 3 – Campi dell’elenco “Supervisori”

La Tabella 3 indica lo schema per la visualizzazione della vista vwSupervisors. La colonna
“Supervisore” indica il docente supervisore, “Dottorando” visualizza il nominativo del dottorando, i
campi “Ciclo” - “Anno Inizio” - “Anno Fine” fanno riferimento al singolo progetto di ogni dottorando,
infine “Dipartimento” e “Ente” indicano il dipartimento ed ente di appartenenza del supervisore.

# Dottorando Ciclo Inizio Fine Dipartimento Tutor Titolo TESI SSD

15 DI GIUSTO Mauro 19 2004 Dip. di Scienze della vita MARZARI Roberto Titolo della tesi … BIO/06
21 SCIAN Giovanni 20 2005 Dip. di Fisica ROSEI Renzo Titolo della tesi … FIS/03
30 SCOCCHI Giulio 21 2006 DICAMP FERMEGLIA Maurizio Titolo della tesi … ING-IND/24
…… … … … … … … …
Tabella 4 – Campi dell’elenco “Dottorandi in corso”

La Tabella 4 indica lo schema per la visualizzazione della vista vwDottorandiInCorso. Il
primo campo “#” indica il valore della chiave primaria, “Dottorando” visualizza il nominativo del
studente, “Ciclo” - “Fine” - “Inizio” – “Dipartimento” - “SSD” si comportano come già indicato
precedentemente, “Tutor” indica il nominativo del docente assegnato come tutor del dottorando ed
infine “Titolo TESI” riporta il titolo della tesi di ogni dottorando.

Per alcuni dei campi presenti negli elenchi sono state richieste delle funzionalità aggiuntive.
In primo luogo, tutti i campi E-mail presenti in ogni elenco (di docenti o dottorandi), dovranno
essere cliccabili permettendo l’invio di un messaggio di posta elettronica.

In secondo luogo, nell’elenco “Dottorandi in corso” è stato richiesto di rendere il campo
“Titolo della tesi” cliccabile. Il collegamento deve aprire un documento PDF memorizzato all’interno
di una cartella del portale e denominato nel seguente modo: d + valore chiave primaria + .pdf.

Ad esempio:

# Dottorando Ciclo Inizio Fine Dipartimento Tutor Titolo TESI SSD

15 DI GIUSTO Mauro 19 2004 Dip. di Scienze della vita MARZARI Roberto Titolo della tesi … BIO/06
21 SCIAN Giovanni 20 2005 Dip. di Fisica ROSEI Renzo Titolo della tesi … FIS/03

16

Il dottorando Di Giusto Mauro ha come chiave primaria il numero 15; al clic del testo del
titolo il portale dovrà aprire il documento denominato d0015.pdf.

Il dottorando Scian Giovanni ha come chiave primaria il numero 21; al clic del testo del
titolo il portale dovrà aprire il documento denominato d0021.pdf.

Per soddisfare tale esigenza è stato deciso di utilizzare la tecnologia AJAX. In 4.4.3.4
Elenco dei “Dottorandi in corso” dedicato sarà spiegato in maniera molto più dettagliata
l’implementazione di tale funzionalità.

3.2.4 Calendario
La tecnologia WSS contiene già la funzionalità del calendario. Tale funzionalità permette
l’inserimento di eventi di vario genere. La visualizzazione delle attività inserite può essere mensile,
settimanale o giornaliera.

Per l’aggiunta di un nuovo evento è presente un pulsante con scritto “Nuovo” nella barra
superiore del calendario. Alcuni dei campi richiesti (quelli indicati con un asterisco), sono
obbligatori e rappresentano le informazioni minime per un nuovo evento. In aggiunta, però, è
possibile allegare un documento, indicare la ricorrenza dell’evento ed indicarne l’area di lavoro
dell’evento.

In Figura 9 è illustrata la maschera che si attiva per l’inserimento di un nuovo evento.

Figura 9 – Maschera per l’inserimento di un nuovo evento

Ad esempio in Figura 10 è visualizzato il calendario presente sul portale RECA. Si può
notare che l’aggiunta di tale funzionalità al portale comporta:

1. la presenza di un mini calendario indicante l’anno ed i mesi, tale componente permette
la navigazione tra i vari mesi o anni

17

2. l’indicazione del mese selezionato
3. la visualizzazione per giorno, per settimana o per mese (la Figura 10 ad esempio
raffigura la visualizzazione mensile del mese di marzo 2009)
4. se nel portale WSS sono presenti delle liste di utenti, è possibile inviare
automaticamente un email ad ognuno per comunicare l’inserimento di un nuovo evento.

Figura 10 – Funzione calendario sul portale RECA

3.2.5 Raccolta di documenti pubblici
La tecnologia WSS implementa un componente, totalmente automatizzato, che permette la
gestione completa di una raccolta di documenti; i documenti possono essere generati online
oppure caricati da una qualsiasi cartella del pc.

I tipi di documento supportati dalla raccolta sono:

Documento di Microsoft Word 97-2003

Foglio di calcolo di Microsoft Excel 97-2003

Presentazione di Microsoft Powerpoint 97-2003

Sezione di Microsoft OneNote

Pagina web di Microsoft Sharepoint Designer

Pagina semplice

Pagina web part


La raccolta di documenti si presenta all’interno della pagina come in Figura 11.

Figura 11 – Raccolta di documento pubblici

18

Nella barra superiore della raccolta di documenti sono presenti i pulsanti “Nuovo” e “Carica”
che permettono rispettivamente l’aggiunta di un nuovo documento o il caricamento di documenti
da una specifica cartella.

La creazione di un nuovo documento implica la presenza del programma installato sulla
macchina in uso. Ad esempio, per la creazione di un nuovo documento di Microsoft Word 97-2003
è indispensabile aver installato sul PC in uso Microsoft Word. Al termine della stesura del testo, il
documento sarà inviato direttamente alla raccolta di documenti e memorizzato all’interno del
portale.

Il caricamento di documento da una cartella specifica avviene tramite la seguente videata
Figura 12.

Figura 12 – Videata per il caricamento di documenti in una raccolta

In questa videata è possibile navigare tra le varie cartelle presenti all’interno del pc,
visualizzare il contenuto di ogni cartella e selezionare tutti i documenti che si desidera caricare
all’interno della raccolta.

3.2.6 Raccolta di documenti privati
Come visto nel paragrafo precedente, una raccolta di documenti privata è una normale
raccolta, che però non è utilizzabile da qualsiasi utente.

L’uso di tale raccolta è subordinato all’accesso tramite un login che permette l’utilizzo dei
documenti presenti in elenco. Il fatto che tale raccolta sia vincolata ad un accesso non modifica
assolutamente le funzionalità viste nel paragrafo precedente.

19

3.2.7 Sviluppo delle pagine dedicate all’inserimento dei dati nel DB
L’aggiornamento delle informazioni contenute nel DB sarà effettuato da più persone. In
particolare una di queste utilizza come postazione un PC basato su sistema operativo Macintosh.

L’ambiente di sviluppo scelto è Visual Studio 2008 Professional e il linguaggio di
programmazione è C#.

Per la realizzazione di questa funzionalità è stato deciso di implementare all’interno del DB
delle tabelle descrittive: il compito di queste tabelle è di descrivere la costruzione del form per
l’inserimento dei dati. Per ogni tabella già presente all’interno del DB è prevista una tabella
descrittiva.

Ogni tabella descrittiva contiene i seguenti campi:

ID: chiave primaria della tabella descrittiva

FieldName: il nome del campo presente all’interno della tabella di riferimento

InItalian: il testo da visualizzare nel form se viene selezionata la lingua italiana

InEnglish: il testo da visualizzare nel form se viene selezionata la lingua inglese

Enabled: indica se la casella di testo del form è abilitata o meno, è stato scelto di

indicare con 1 abilitata e con 0 non abilitata
Length: la lunghezza del campo presente all’interno della tabella di riferimento (su tale

valore viene calcolata la grandezza della casella di testo)
Required: indica se l’inserimento del valore nel form è obbligatorio, è stato scelto di

indicare con 1 obbligatorio e con 0 non obbligatorio
TypeControl: il tipo di controllo richiesto per il form; è stato scelto di indicare con

“textbox” una semplice casella di testo e con “combobox” una casella di testo a tendina
TableReference: il nome della tabella di riferimento

IDTableReference: il nome della chiave primaria della tabella di riferimento

SQLStringForComboBox: contiene la stringa SQL necessaria per compilare l’elenco per

le caselle di testo a tendina.

Per spiegare meglio questa soluzione illustro l’esempio facendo riferimento alla tabella
tblDottorando.

In Figura 13 è riportato lo schema della tabella tblDottorando ed in Figura 14 è riportato lo
schema della tabella descrittiva, chiamata tbl_FieldDottorando, riferito alla tabella in esempio.

20

Figura 13 - Schema della tabella tblDottorando

Figura 14 – Contenuto della tabella tbl_FieldDottorando

Osservando i dati inseriti in Figura 14 vediamo come essi descrivano il form per
l’inserimento delle informazioni in tabella. I campi descritti non devono essere obbligatoriamente
tutti i campi presenti nella tabella di riferimento (in questo caso tblDottorando).

In Figura 15 si può osservare il risultato ottenuto usando i valori presenti in
tbl_FieldDottorando.

Le varie voci “Cognome” – “Nome” – etc. vengono prelevate dal valore presente nel campo
“InItalian”; la tipologia della casella di testo dal campo “TypeControl” e le relative caratteristiche dai

21

campi “Enabled” – “Length”; l’obbligatorietà del dato viene indicata con l’asterisco rosso e fa
riferimento al campo “Required”.

Figura 15 – Form generato dalla tabella tbl_FieldDottorando

22

4. Realizzazione
La realizzazione delle varie parti si articola secondo tre modalità:

parametrizzazione semplice

parametrizzazione avanzata

sviluppo funzionalità aggiuntive.


La parametrizzazione semplice riguarda i componenti già presenti in WSS e per i quali non
sono state richieste particolari personalizzazioni. Tali componenti sono il calendario, le raccolte di
documenti, la personalizzazione del logo e dell’intestazione del portale.

La parametrizzazione avanzata riguarda i componenti già presenti in WSS e per i quali
sono state richieste delle modifiche. Tali componenti sono l’elenco degli annunci, l’elenco dei
collegamenti presenti nella pagina iniziale e la pagina delle tematiche di ricerca.

Lo sviluppo delle nuove parti riguarda componenti non presenti in WSS. Tali componenti
sono gli elenchi presentati nel precedente capitolo e la pagina dedicata all’inserimento dei dati.

4.1 Installazione e configurazione del pacchetto software
Questa tecnologia, come già indicato nei capitoli precedenti, si basa sul sistema operativo
Microsoft Windows Server 2003. Tale vincolo ha imposto l’utilizzo di un programma di
virtualizzazione come Sun xVM VirtualBox, versione 2.0.4.

Dando per scontate le procedure per creare un’unità virtuale e per installare il sistema
operativo, prima di procedere all’installazione di WSS, è indispensabile verificare che il sistema
soddisfi i requisiti previsti per WSS.

4.1.1 Requisiti per l’installazione di WSS
La prima procedura da seguire è l’installazione di IIS. Tale operazione può essere eseguita
avviando “Aggiungi/Rimuovi Componenti di Windows” dalla voce “Installazione applicazioni”
presente in “Pannello di controllo”. Per maggiore chiarezza riportiamo in Figura 16 la finestra che
dovrebbe apparire se eseguite correttamente tutte le operazioni.

23

Figura 16 – Maschera per l’installazione di IIS

Le opzioni da richiamare in questa videata sono indicate in Figura 16. Per completare tale
operazione è necessario il cd di installazione del sistema operativo.

Un secondo requisito fondamentale è che nel sistema siano installate le estensioni per il
Framework .NET 3.5. Tale pacchetto è scaricabile gratuitamente al seguente indirizzo
http://www.microsoft.com/downloads/details.aspx?displaylang=it&FamilyID=333325fd-ae52-4e35-
b531-508d977d32a6.

Ultimo requisito è la presenza di una versione di Internet Explorer pari o superiore alla 6.
Per lo sviluppo di questo progetto è stato scelto di utilizzare la versione 8 (attualmente l’ultima
release disponibile) ed anch’essa è scaricabile gratuitamente al seguente indirizzo
http://www.microsoft.com/windows/internet-explorer/default.aspx.

Verificati questi punti, procediamo all’installazione del pacchetto WSS. Tale pacchetto,
anch’esso gratuito, è scaricabile al seguente indirizzo
http://www.microsoft.com/downloads/details.aspx?familyid=EF93E453-75F1-45DF-8C6F-
4565E8549C2A&displaylang=en.

4.1.2 Installazione di WSS
Durante la fase di installazione di WSS viene richiesto di selezionare il tipo di installazione
desiderata, come in Figura 17.

24

Figura 17 – Tipologia di installazione di WSS

La tecnologia WSS prevede la memorizzazione di tutte le informazioni contenute nel
portale in un DB. Il DB può essere installato da SharePoint; in questo caso viene installata una
versione di SQL Server Express, o può essere utilizzato un altro DB già installato nella macchina
in uso.

La differenza tra l’installazione “Base” e “Avanzata” consente di decidere se utilizzare il
motore DB interno di SharePoint o, come nel nostro caso, un DB esterno quale Microsoft SQL
Server 2005. Scelta la tipologia e terminata l’installazione del prodotto, in automatico viene
eseguita la configurazione e l’inizializzazione del portale “Amministrazione centrale di SharePoint
3.0” - Figura 18.

Figura 18 – Amministrazione centrale WSS

Nella parte superiore della pagina sono presenti i pulsanti “Operazioni” e “Gestione
applicazioni”. Tali comandi permettono rispettivamente di:

25

eseguire l’operazione di configurazione di WSS come backup e ripristino di dati,

configurazione del server WSS, gestione delle registrazioni e della reportistica
sull’utilizzo, etc.
gestire le applicazioni WSS: creare o rimuovere applicazioni e portali, e configurare i

relativi parametri di utilizzo e di protezione, gestire gli account di posta elettronica,
etc.

4.1.3 Inizializzazione di un portale
Per inizializzare un nuovo portale dalla pagina di “Amministrazione centrale SharePoint 3.0”
selezionare la voce “Gestione Applicazioni”. Ciò che appare sullo schermo è illustrato in Figura 19.

Figura 19 – “Gestione delle applicazioni” in Amministrazione Centrale WSS

La procedura si articola in due passaggi: il primo comporta la creazione, o l’estensione di
un’applicazione Web, il secondo invece la creazione di una raccolta siti basato sull’applicazione
appena aggiunta.

Le informazioni richieste nel primo passaggio sono:

il nome del nuovo portale Web IIS: indica l’indirizzo web del server web locale

attraverso il quale è raggiungibile il portale

26

Figura 20 – Nuovo sito Web IIS

la porta assegnata al portale: può essere indicato un numero casuale qualsiasi,

l’importante è che non sia già utilizzato da un’altra applicazione

Figura 21 – Porta del nuovo Web IIS

i criteri di autenticazione e protezione


Figura 22 – Provider di autenticazione

l’indirizzo URL al quale sarà raggiungibile l’applicazione


Figura 23 – Indirizzo del nuovo Web IIS

il db del contenuto


Figura 24 – Nome del server e relativo nome del database per il nuovo Web IIS

27

Terminata la compilazione dei campi, viene avviata la creazione della nuova applicazione
e, ad operazione terminata, compare una videata di conferma.

Ora bisogna creare una nuova “Raccolta siti”. Per avviare la procedura, è necessario
selezionare la voce “Crea raccolta siti” da “Gestione applicazioni”.

Le informazioni richieste per la creazione di una nuova raccolta sono:

il titolo e la descrizione della raccolta


Figura 25 – Titolo e descrizione nuova raccolta siti

il modello della raccolta siti


Figura 26 – Elenco modelli di raccolta siti

il nome utente dell’amministratore della raccolta


Figura 27 – Nome dell’utente amministratore

Terminato l’inserimento di questi dati le operazioni sono finite ed il portale inizializzato avrà
la videata come in Figura 28.

28

Figura 28 – Nuovo portale WSS

4.2 Parametrizzazione semplice
La costruzione della pagina web con WSS prevede la presenza nell’angolo superiore
sinistro di un pulsante con la dicitura “Azioni sito”. Cliccando su questo pulsante compare un
piccolo menu a tendina come in Figura 29.

Figura 29 – Menu a tendina “Azioni sito”

I comandi presenti in questa tendina sono “Crea”, “Modifica pagina” e “Impostazioni sito” e
permettono rispettivamente di:

aggiungere al portale una nuova raccolta di documenti, immagini, moduli o pagine

wiki, oppure un elenco di annunci, contatti, collegamenti, aree di discussione, o
pagina HTML semplici o con web part4

Una web part è un controllo server ASP.NET che può essere aggiunto da un utente a run time. Più
4

web part possono essere integrate tra di loro per creare siti web quot;dinamiciquot; e personalizzabili direttamente
dall'utente.

29

modificare il contenuto della pagina selezionata. Come indicato nella descrizione è

possibile solamente aggiungere, modificare o rimuovere delle web part
accedere alla pagina dedicata alle impostazioni del portale.


Attraverso questa serie di comandi è possibile parametrizzare le funzionalità di WSS
direttamente online con un comunissimo browser.

4.2.1 Calendario
Per aggiungere il calendario al portale selezioniamo la voce “Crea” dal pulsante “Azioni
sito”. Nella videata che appare selezionare la voce “Calendario” presente nel gruppo “Gestione”
come in Figura 30.

Figura 30 – Gruppo gestione per l’inserimento del calendario

Selezionando la voce “Calendario” compare la videata per la creazione del nuovo
calendario (Figura 31) dove viene richiesto il nome del calendario, una descrizione e se il
collegamento al calendario deve comparire o meno nel menu laterale.

Figura 31 – Maschera per la creazione del nuovo calendario

4.2.2 Raccolte di documenti
Per aggiungere una raccolta, in particolare di documenti, al portale selezioniamo la voce
“Crea” dal pulsante “Azioni sito”. Nella videata che appare selezionare la voce “Raccolta
documenti” presente nel gruppo “Raccolte” come in Figura 32.

30

Figura 32 – Gruppo gestione delle Raccolte

Selezionando la voce “Raccolta documenti” compare la videata per la creazione della
nuova raccolta (Figura 33) dove viene richiesto il nome della nuova raccolta, la descrizione della
nuova raccolta, se deve essere visualizzato il collegamento nel menu laterale o meno, se creare o
meno una copia del documento ad ogni modifica del contenuto e il modello di documento scelto
per la raccolta.

La scelta del modello di documento non vincola in alcun modo la possibilità di caricare nella
raccolta qualsiasi altro formato, ma impone il formato nel momento in cui ne viene creato uno
nuovo.

Figura 33 – Maschere per la creazione di una nuova Raccolta

4.2.3 Personalizzazione logo e intestazione del portale
Ogni nuovo portale generato in WSS riporta un logo standard e la dicitura scelta come
intestazione per il nuovo portale.

31

Per personalizzare il logo e l’intestazione del portale selezioniamo la voce “Impostazione
sito” dal pulsante “Azioni sito”. Nella videata che appare selezionare la voce “Titolo, descrizione e
icona” presente nel gruppo “Aspetto” come in Figura 34.

Figura 34 – Gruppo delle opzioni Aspetto

Selezionando la voce indicata compare la videata come in Figura 35. Nella casella di testo
“Titolo” e “Descrizione” è possibile modificare l’intestazione e la descrizione del portale.

Figura 35 - Maschere per la modifica del Titolo e del logo del portale

Il campo URL indica l’indirizzo della nuova immagine scelta per il logo; tale immagine deve
essere già presente nella cartella Images del portale. Si può notare che in Figura 35 non è
presente alcun pulsante per il caricamento di documenti, perciò, per poter utilizzare un proprio logo
personalizzato bisogna utilizzare un programma esterno che permetta l’upload di file nelle cartelle
del portale.

Il programma che usiamo per il caricamento delle immagini è Microsoft SharePoint
Designer. Tale programma, come vedremo in maniera più approfondita nei prossimi paragrafi,
permette la completa gestione di un portale SharePoint.

32

Una volta avviato il programma e collegato al portale, sullo schermo compare la lista di tutte
le cartelle o documenti presenti come in Figura 36. Dopo aver selezionato la cartella Images, come
indicato nell’immagine, usando il comando FileImporta si può caricare una o più immagini
all’interno della cartella specificata.

Terminata questa operazione, ritornando alla Figura 35, nel campo URL indichiamo il
percorso relativo dell’immagine desiderata. La prima parte del percorso /images/ indica, come visto
in fase di caricamento, la cartella contenente i file e la seconda parte il nome del file scelto. Sotto a
questa casella di testo appare la dicitura “Fare clic qui per verificare l’indirizzo”, lo scopo di questo
collegamento è la verifica dell’esattezza del percorso digitato: se è corretto viene aperta una nuova
finestra del browser e viene visualizzata l’immagine.

Figura 36 – Contenuto del portale SharePoint

Al termine di questa serie di operazioni il risultato visibile è riportato in Figura 37.

Figura 37 – Intestazione del portale

4.3 Parametrizzazione avanzata
La parametrizzazione avanzata, diversamente da quanto visto per quella semplice, richiede
il supporto di un programma esterno, Microsoft SharePoint Designer 2007, per personalizzare i
componenti inseriti nelle pagina da WSS. In poche parole, la parametrizzazione avanzata non è
eseguibile online, come visto in precedenza, ma richiede una postazione sulla quale sia installato il
programma citato.

33

Per effettuare tali modifiche, nella maggior parte dei casi, la procedura prevede delle
operazioni iniziali quali l’inserimento di elenchi, raccolte o quant’altro (come visto nel paragrafo
precedente) e poi una seconda fase di modifica manuale usando SharePoint Designer.

4.3.1 Personalizzazione degli annunci
Per aggiungere un elenco di annunci al portale WSS selezioniamo la voce “Crea” dal
pulsante “Azioni sito”. Nella videata che compare, selezionare la voce “Annunci” dal gruppo
“Comunicazioni”.

Nella videata che appare viene richiesto il nome da assegnare alla nuova raccolta di
annunci, la descrizione e se visualizzare il collegamento alla lista nel menu laterale.

Figura 38 – Videata dell’elenco degli annunci

In Figura 38 si può vedere la videata che appare quando viene richiamata la lista degli
annunci; attraverso tale videata è possibile gestire i messaggi.

Per richiamare in una qualsiasi pagina l’elenco degli annunci come web part, selezionare la
voce “Modifica pagina” da “Azioni sito”. Richiamando questo comando la pagina passa dalla
visualizzazione normale alla modalità di modifica e all’interno della pagina compaiono dei pulsanti
con scritto “Aggiungi Web Part” che permettono di aggiungere web part alla pagina.

Cliccando su un qualsiasi pulsante “Aggiungi web part” compare la lista delle web part
attive, come in Figura 39, e da questo elenco selezioniamo il nome della lista degli annunci creata
precedentemente. Il risultato finale si può vedere in Figura 40.

Figura 39 – Esempio di elenco delle web part utilizzabili nella pagina

34

Figura 40 – Web Part annuncio inserita nella pagina

Quello che vediamo in Figura 40 è la visualizzazione standard dell’elenco degli annunci.
Per personalizzare questa struttura occorre aprire la pagina con Microsoft Office Designer e da qui
modificare manualmente la web part.

Aprendo la pagina si vede che il componente dell’elenco viene inserito come unico oggetto,
le modifiche permesse sono limitate ma per le personalizzazioni avanzate è possibile convertire
l’oggetto in “XSLT Data View”. Per effettuare tale operazione selezionare la voce “Converti in
XSLT Data View” dal menu contestuale che appare premendo il tasto destro sull’oggetto come
Figura 41.

Figura 41 – Menu contestuale

Dopo che l’oggetto viene convertito in linguaggio XSLT, è possibile modificare il codice in
modo da ottenere un elenco come richiesto.

La parte iniziale del codice, generata da WSS e qui non riportata, è necessaria per la
connessione alla sorgente dei dati, la seconda parte invece è la parte di codice modificata per
ottenere le modifiche richieste.

Il codice modificato è il seguente:
<xsl:template name=quot;dvt_1.rowviewquot;>

35

<tr>
<xsl:if test=quot;$dvt_1_automode = '1'quot; ddwrt:cf_ignore=quot;1quot;>
<td class=quot;ms-vbquot; width=quot;1%quot; nowrap=quot;nowrapquot;>
<span ddwrt:amkeyfield=quot;IDquot; ddwrt:amkeyvalue=quot;ddwrt:EscapeDelims(string(@ID))quot; ddwrt:ammode=quot;viewquot;></span>
</td>
</xsl:if>
<td class=quot;ms-vbquot; style=quot;height: 20pxquot;>
<a href=quot;#quot; onclick=quot;document.location.href='/Lists/News/DispForm.aspx?ID='+{@ID};quot;><strong><em><xsl:value-of select=quot;@Titlequot;
/></em></strong></a>
<xsl:if test=quot;ddwrt:IfNew(string(@Created))quot;><IMG SRC=quot;/_layouts/1040/images/new.gifquot; alt=quot;Nuovoquot; /></xsl:if>
</td>
<td class=quot;style4quot; style=quot;height: 20pxquot;>
<xsl:value-of select=quot;ddwrt:FormatDate(string(@Created) ,1040 ,1)quot;/>
</td>
</tr>
<tr>
<td colspan=quot;2quot; bgcolor=quot;blackquot; style=quot;height:1pxquot;></td>
</tr>
<tr>
<td colspan=quot;2quot;><xsl:value-of select=quot;@Bodyquot; disable-output-escaping=quot;yesquot;/></td>
</tr>
<tr>
<td colspan=quot;2quot; style=quot;height: 5pxquot;></td>
</tr>
</xsl:template>

Il codice sopra riportato genera il titolo delle news; tale titolo sarà un collegamento
ipertestuale alla pagina dedicata alla news “/Lists/News/DispForm.aspx?ID='+{@ID};”. Se il
messaggio è stato inserito recentemente, vicino al titolo compare la piccola immagine con scritto
“Novità”. Sul lato destro della stessa riga viene visualizzata la data di creazione dell’annuncio. La
rimanente parte del codice genera una piccola riga nera di divisione ed il testo completo del
messaggio.

L’immagine Figura 42 illustra il risultato finale.

Figura 42 – Elenco annunci modificato

36

4.3.2 Personalizzazione dei Link
La procedura seguita per la personalizzazione dell’elenco dei link rispecchia la serie di
operazioni indicate per la modifica dell’elenco degli annunci.

La visualizzazione standard dell’elenco dei collegamenti è riportata in Figura 43.

Figura 43 – Visualizzazione dell’elenco dei link

Il codice modificato per ottenere l’elenco dei collegamenti richiesto è il seguente:
<xsl:template name=quot;dvt_1.rowviewquot;>
<tr>
<td class=quot;ms-vbquot; width=quot;1%quot; nowrap=quot;nowrapquot;>
<span ddwrt:amkeyfield=quot;IDquot; ddwrt:amkeyvalue=quot;ddwrt:EscapeDelims(string(@ID))quot; ddwrt:ammode=quot;viewquot;></span>
</td>
</xsl:if>
<td class=quot;ms-vbquot; style=quot;padding:3pxquot;>
<a href=quot;{substring-before(@URL, ', ')}quot; target=quot;_blankquot;>
<xsl:value-of select=quot;substring-after(@URL, ', ')quot;/>
</a>
</td>
</tr>
</xsl:template>

Tale parte di codice visualizza l’elenco dei collegamenti inseriti senza altre funzionalità:
viene visualizzato semplicemente il nome del collegamento e tale nome è un collegamento
ipertestuale alla risorsa specificata.

Il risultato di tale modifica è riportato in Figura 44.

Figura 44 – Elenco dei collegamenti ipertestuali

4.3.3 Personalizzazione della pagina iniziale
Per realizzare una pagina iniziale come presentata nel capitolo dei requisiti si è manifestata
la necessità di modificare manualmente le Web Part Zone5. Tale operazione può essere effettuata
attraverso la voce “Web Part Zone” presente nel menu “InserisciComponenti Sharepoint” di
Microsoft Office Designer.

Le Web Part Zone sono i contenitori presenti nelle pagine Aspx all’interno dei quali è possibile
5

inserire le varie web part

37

Con semplici operazioni di selezione, eliminazione ed inserimento si è ottenuto una
struttura della pagina del seguente tipo (Figura 45).

Figura 45 – Composizione delle Web Part Zone nella pagina default.aspx

Ora non rimane altro che richiamare le singole Web Part nelle zone predestinate utilizzando
il pulsante che appare “Aggiungi web part”.

La posizione assegnata alle singole web part è la seguente:

in zona 3 la “Web Part Editor Contenuto”: tale componente attraverso un comodo

Editor Rich Text permette di editare qualsiasi tipo di testo ed immagini
in zona 2 l’elenco degli annunci

in zona 4 l’elenco dei collegamenti ipertestuali

in zona 1 momentaneamente non utilizzata.


4.3.4 Personalizzazione della pagina delle tematiche
La pagina delle tematiche di ricerca è stata aggiunta creando un elenco personalizzato
raggiungibile selezionando la voce “Crea” dal pulsante “Azioni sito”.

Ottenuto il nuovo elenco è necessario richiamare la pagina con Microsoft Office Designer
per poter eliminare l’elenco inserito da WSS ed aggiungere un’unica Web Part Zone.

Predisposta la nuova Web Part Zone, attraverso il pulsante “Aggiungi web part”
aggiungiamo la “Web Part Editor Contenuto”. Come già indicato nel precedente paragrafo tale web
part dispone di un Rich Text Editor per la scrittura del testo.

4.4 Sviluppo di nuove parti

4.4.1 Connessione alla sorgente dati
Le web part presenti in WSS non permettono la visualizzazione di dati prelevati dalle
sorgenti di dati esterne al DB interno di WSS. Per ottenere elenchi come quelli richiesti e presentati
nel precedente capitolo si richiede una costruzione manuale della lista utilizzando Microsoft Office
Designer.

Il programma indicato supporta la lettura di dati da varie fonti quali liste di Sharepoint,
elenchi di Sharepoint, documenti XML e connessioni a database.

Nel nostro caso il fattore più importante riguarda la connessione al DB della scuola;
attraverso tale mezzo saranno create le stringhe di connessione alle viste presenti.

38

Per realizzare una connessione richiamare la finestra “Data source Library” dal menu “Task
Panes”, sul lato di destra compare la videata come in Figura 46.

Figura 46 – Libreria della Data source

In questa videata selezionare la voce “Database Connections” e conseguentemente la voce
“Connect to a database”. Dopo tale operazione vengono richiesti i dati per effettuare la
connessione: quindi il nome del server, il nome dell’account e la relativa password. Verificata la
veridicità dei dati da parte del server viene presentata la lista dei database con relative tabelle o
viste in esso contenute (Figura 47). Da tali liste saranno richiamate tutte le viste necessarie per
realizzare i vari elenchi.

Figura 47 – Elenco delle tabelle e viste presenti in NanotechDB

Ripetendo le operazioni descritte per ognuna delle viste si ottiene il seguente risultato come
in Figura 48.

39

Figura 48 – Elenco delle connessioni stabilite alle viste

4.4.2 Creazione di un elenco personalizzato
Indipendentemente da quale sia l’elenco richiesto le operazioni da effettuare per ottenere le
liste desiderate sono le medesime.

La prima operazione è la creazione di un nuovo elenco personalizzato: tale operazione può
essere eseguita direttamente dal Microsoft Office Designer attraverso la voce
FileNuovoComponente Sharepoint. Nella videata che appare (Figura 49) selezionare la voce
“Elenco personalizzato”, specificare il nuovo nome da assegnare all’elenco e confermare il tutto
con il tasto “OK”

Figura 49 – Aggiunta di un nuovo elenco

Al termine di questa operazione, verrà aggiunta una nuova cartella alla cartella “Lists”; il
nome della nuova cartella sarà il nome specificato per il nuovo elenco ed il contenuto una serie di

40

pagine per la gestione delle informazioni. Tra tutte le pagine presenti, quella da modificare per
ottenere gli elenchi richiesti si chiama AllItems.aspx.

Figura 50 – Contenuto della cartella “Collegio dei docenti”

Tali operazioni vanno ripetute per ogni elenco, e il risultato finale saranno tante cartelle
quanti sono gli elenchi desiderati (Figura 51).

Figura 51 – Contenuto della cartella Lists

4.4.3 Personalizzazione di un elenco personalizzato
Aprendo una qualsiasi pagina AllItems.aspx di un qualsiasi elenco con Microsoft Office
Designer appare una videata dove troviamo già installato il componente per la gestione dei
documenti. Il componente va eliminato e sostituito, tramite un’operazione di trascinamento, con
una delle connessioni viste in Figura 48.

4.4.3.1 Elenco del “Collegio dei docenti”
Procedendo come indicato nel precedente paragrafo, otteniamo il seguente risultato come
in Figura 52; a lato compare il menu visualizzato in Figura 53.

41

Figura 52 – Elenco del “Collegio dei docenti”

Figura 53 – Menu di personalizzazione del elenco

Come possiamo vedere in Figura 52, terminato il trascinamento della connessione stabilita
con la vista vwCollegioDocenti, Designer visualizza un elenco contenente i primi campi indicati (in
questo caso IDDocente, Cognome, Nome, SSD, Ente). Il menu visualizzato in Figura 53 compare
ogni volta che l’elenco viene selezionato e permette la personalizzazione dei campi contenuti.

Analizziamo le funzioni proposte:

FILTER: permette di effettuare un filtraggio dei dati e corrisponde alla condizione

WHERE in una stringa SQL
SORT and GROUP: permette di effettuare un ordinamento o un raggruppamento

dei dati e corrisponde al GROUP BY
PAGING: indica il numero di record da visualizzare per ogni pagina; in questo caso

“10 item(s) per set” indica 10 record per pagina
EDIT COLUMNS: permette di indicare quali campi visualizzare nell’elenco e la

relativa sequenza
CHANGE LAYUOT: permette di modifica il layout della lista

DATA VIEW PREVIEW: visualizza un’anteprima della lista

CONDITIONAL FORMATTING: permette di scegliere uno stile per la formattazione

condizionata; di default viene richiamata la classe css ms_alternating

42

WEB PART CONNECTION: visualizza lo stato della connessione; in questo caso

alla vista vwCollegioDocenti
PARAMETERS: permette l’inserimento di parametri da passare alla web part

REFRESH DATA VIEW: aggiorna i dati

DATA VIEW PROPERTIES: è la finestra generale dov’è riassunto tutto quanto visto

in questo menu.

Usando i comandi appena spiegati è stata effettuata una prima parametrizzazione
dell’oggetto.

In particolare è stato modificato l’ordine dei campi secondo il seguente schema:

1. Nome e cognome del docente
2. Ruolo nel collegio
3. Indirizzo Email
4. Dipartimento di appartenenza
5. Ente di appartenenza
6. Posizione
7. SSD (Settore Scientifico Disciplinare),

e non è stato richiesto alcun limite di record per pagina.

La seconda fase di personalizzazione è stata eseguita direttamente in modalità CODE per
ottenere le modifiche che in modalità DESIGN non è stato possibile raggiungere.

Il codice ottenuto alla fine è molto lungo; di seguito riportiamo alcune spezzoni con la
relativa descrizione.
<table border=quot;0quot; width=quot;100%quot; cellpadding=quot;5quot; cellspacing=quot;0quot;>
<tr valign=quot;topquot; class=quot;ms-menutoolbarquot;>
<th class=quot;ms-toolbarquot; width=quot;1%quot; nowrap=quot;nowrapquot;></th>
</xsl:if>
<th class=quot;ms-toolbarquot; nowrap=quot;quot; style=quot;text-align:leftquot;>
<xsl:call-template name=quot;dvt.headerfieldquot; ddwrt:atomic=quot;1quot;>
<xsl:with-param name=quot;fieldnamequot;>@Cognome</xsl:with-param>
<xsl:with-param name=quot;fieldtitlequot;>Docente</xsl:with-param>
<xsl:with-param name=quot;displaynamequot;>Cognome</xsl:with-param>
<xsl:with-param name=quot;sortablequot;>1</xsl:with-param>
<xsl:with-param name=quot;fieldtypequot;>x:string</xsl:with-param>
</xsl:call-template>
</th>
<xsl:with-param name=quot;fieldnamequot;>@Ruolo</xsl:with-param>
<xsl:with-param name=quot;fieldtitlequot;>Ruolo</xsl:with-param>
<xsl:with-param name=quot;displaynamequot;>Ruolo</xsl:with-param>

43

</th>
…
</tr>

Questa prima parte visualizza la prima riga della tabella. Ogni voce della prima riga
permette, attraverso la comparsa di una tendina, il filtraggio o il raggruppamento dei dati
direttamente online.

In particolare:

indica che il campo di riferimento è @Cognome; questo, se viene attivato un qualsiasi
filtraggio o raggruppamento, viene eseguito sul campo indicato,
<xsl:with-param name=quot;fieldtitlequot;>Docente</xsl:with-param>

indica la parola visualizzata nell’intestazione della tabella,

indica il valore visualizzato nell’elenco della tendina,

sono dei parametri inseriti da Designer.

Per collegare l’intestazione dell’elenco con la classe css sopra riportata, in ogni riga è stato
aggiunto un riferimento class=quot;ms-toolbarquot;; ciò rende sensibile l’elenco al cambiamento del tema
da parte dell’amministratore del portale della scuola.

Il codice riportato di seguito indica la seconda parte, tale codice visualizza tutti i dati
prelevati dalla vista.
<tr>
…
<td class=quot;ms-vbquot;>
<xsl:value-of select=quot;@Cognomequot;/>
<xsl:text xmlns:ddwrt=quot;http://schemas.microsoft.com/WebParts/v2/DataView/runtimequot; ddwrt:whitespace-preserve=quot;yesquot;
xml:space=quot;preservequot;> </xsl:text>
<xsl:value-of select=quot;@Nomequot;/>
</td>
<xsl:value-of select=quot;@Ruoloquot;/>
</td>
<td style=quot;text-align:centerquot;>
<a href=quot;mailto:{@email}quot;><img src=quot;../../images/email_ico.gifquot; border=quot;0quot; alt=quot;Invia email a {@email}quot; /></a>
</td>
<a href=quot;mailto:{@email}quot;><xsl:value-of select=quot;@emailquot; /></a>
</td>
<xsl:value-of select=quot;@NomeDipquot;/>
</td>
<td class=quot;ms-vbquot; style=quot;text-align:centerquot;>
<xsl:value-of select=quot;@Entequot;/>
</td>

44

<xsl:value-of select=quot;@SiglaPosizionequot;/>
</td>
<xsl:value-of select=quot;@SSDquot;/>
</td>
</tr>
</xsl:template>

In particolare:
<xsl:value-of select=quot;@Ruoloquot;/>
</td>

per ogni campo da visualizzare è stata richiamata la variabile associata. Nello spezzone di
codice sopra riportato, ad esempio viene richiamato il valore del campo @Ruolo.

Questo spezzone di codice inserisce vicino al campo @Email una piccola immagine
cliccabile che permette l’invio di un messaggio di posta elettronica.

4.4.3.2 Elenco del “Consiglio Scientifico”
Come già descritto nel precedente paragrafo, anche l’inserimento di un elenco prevede la
stessa sequenza di operazioni.

L’ordine dei campi è il seguente:

1. Nominativo
2. Ruolo
3. Email
4. Dipartimento
5. Ente
6. Posizione
7. SSD

Il codice ottenuto alla fine è il seguente.
…
<th class=quot;ms-vhquot; width=quot;1%quot; nowrap=quot;nowrapquot;></th>
</xsl:if>
<th class=quot;ms-toolbarquot; nowrap=quot;nowrapquot; style=quot;text-align:leftquot;>Nominativo</th>
<th class=quot;ms-toolbarquot; nowrap=quot;nowrapquot; style=quot;text-align:leftquot;>Ruolo</th>
<th class=quot;ms-toolbarquot; nowrap=quot;nowrapquot; style=quot;width:22pxquot;></th>
<th class=quot;ms-toolbarquot; nowrap=quot;nowrapquot; style=quot;text-align:leftquot;>Email</th>
<th class=quot;ms-toolbarquot; nowrap=quot;nowrapquot; style=quot;text-align:leftquot;>Dipartimento</th>
<th class=quot;ms-toolbarquot; nowrap=quot;nowrapquot; style=quot;width:120pxquot;>Ente</th>
<th class=quot;ms-toolbarquot; nowrap=quot;nowrapquot; style=quot;width:60pxquot;>POS</th>
<th class=quot;ms-toolbarquot; nowrap=quot;nowrapquot; style=quot;width:60pxquot;>SSD</th>
</tr>

45

<xsl:call-template name=quot;dvt_1.bodyquot;>
<xsl:with-param name=quot;Rowsquot; select=quot;$Rowsquot;/>
</table>
…

Questa prima parte del codice genera l’intestazione della tabella.
<th class=quot;ms-toolbarquot; nowrap=quot;nowrapquot; style=quot;text-align:leftquot;>Nominativo</th>

In questo caso non è prevista una tendina per l’ordinamento o per il raggruppamento; difatti
il codice, per inserire ogni singola voce, è più breve rispetto al precedente elenco.

Nella seconda parte invece il codice è pressoché identico a quanto visto per il “Collegio dei
docenti”.
…
<xsl:text xmlns:ddwrt=quot;http://schemas.microsoft.com/WebParts/v2/DataView/runtimequot; ddwrt:whitespace-preserve=quot;yesquot; xml:space=quot;preservequot;>
</xsl:text>
</td>
<xsl:value-of select=quot;@RuoloConsiglioScientificoquot;/>
</td>
<td style=quot;text-align:centerquot;>
</td>
<a href=quot;mailto:{@email}quot;><xsl:value-of select=quot;@emailquot;/></a>
</td>
</td>
<xsl:value-of select=quot;@Entequot;/>
</td>
<xsl:value-of select=quot;@SiglaPosizionequot;/>
</td>
</td>
…

4.4.3.3 Elenco dei “Supervisori”
L’ordine scelto per questo elenco è:

1. Supervisore
2. Dottorando
3. Ciclo
4. Anno inizio
5. Anno fine

46

6. Dipartimento
7. Ente

Il codice seguente riporta solamente l’esempio per un singolo campo:
</xsl:if>
<xsl:with-param name=quot;fieldtitlequot;>Supervisore</xsl:with-param>
</th>
…
</tr>
..
</td>
…
</tr>

4.4.3.4 Elenco dei “Dottorandi in corso”
L’ordine dei campi scelto per la visualizzazione è:

1. # indica la chiave primaria
2. Dottorando
3. Ciclo
4. Inizio
5. Fine
6. Email
7. Dipartimento
8. Tutor
9. Titolo
10. SSD

Riportiamo il codice modificato per l’elenco dei dottorandi in corso.

47

</xsl:if>
<th class=quot;ms-toolbarquot; nowrap=quot;quot;>
<xsl:call-template name=quot;dvt.headerfieldquot; ddwrt:atomic=quot;1quot; xmlns:ddwrt=quot;http://schemas.microsoft.com/WebParts/v2/DataView/runtimequot;>
<xsl:with-param name=quot;fieldnamequot;>@ID</xsl:with-param>
<xsl:with-param name=quot;fieldtitlequot;>#</xsl:with-param>
<xsl:with-param name=quot;displaynamequot;>ID</xsl:with-param>
<xsl:with-param name=quot;fieldtypequot;>x:int</xsl:with-param>
</th>
<xsl:call-template name=quot;dvt.headerfieldquot; ddwrt:atomic=quot;1quot; xmlns:ddwrt=quot;http://schemas.microsoft.com/WebParts/v2/DataView/runtimequot;>
<xsl:with-param name=quot;fieldtitlequot;>Dottorando</xsl:with-param>
</th>
…
</table>

La costruzione di questa prima parte di codice è simile all’elenco del “Collegio dei docenti”,
che, come vista già in precedenza, visualizza la prima riga della tabella.
<tr>
…
<xsl:value-of select=quot;format-number(@ID, '#,##0.#;-#,##0.#')quot;/>
</td>
</td>
…
</td>
<xsl:value-of select=quot;@Expr1quot;/>
<xsl:value-of select=quot;@Expr2quot;/>
</td>
<a href=quot;#quot; onclick=quot;ResultTestDoc(GenerateLinkDocument(1,{@ID}));quot;><img src=quot;../../images/logo_pdf.pngquot; border=quot;0quot; width=quot;20pxquot;
height=quot;20pxquot; /></a>
</td>
<a href=quot;#quot; onclick=quot;ResultTestDoc(GenerateLinkDocument(1,{@ID}));quot;><xsl:value-of select=quot;@TitoloTEsiITAquot;/></a>
</td>
</td>
</tr>

48

In questa seconda parte di codice vengono generate le righe contenenti i dati dei dottorandi
in corso; anche in questo caso la costruzione è simile agli elenchi visti finora.

Per l’elenco in oggetto è stata richiesta la possibilità di associare ad ogni dottorando un
documento PDF contenente le informazioni in merito all’attività di ricerca. La parte di codice che
implementa tale funzionalità è la seguente.
<a href=quot;#quot; onclick=quot;ResultTestDoc(GenerateLinkDocument(1,{@ID}));quot;><img src=quot;../../images/logo_pdf.pngquot; border=quot;0quot; width=quot;20pxquot;
height=quot;20pxquot; /></a>
</td>
<a href=quot;#quot; onclick=quot;ResultTestDoc(GenerateLinkDocument(1,{@ID}));quot;><xsl:value-of select=quot;@TitoloTEsiITAquot;/></a>
</td>

La particolarità di tale necessità riguarda il fatto che il sistema deve verificare l’esistenza del
documento, e solo in caso di risposta affermativa, visualizzarne il contenuto.

Per realizzare il collegamento è stato scelto di sviluppare un file javascript contenente una
chiamata AJAX: il funzionamento dello script verrà illustrato in maniera più dettagliata paragrafo
4.4.4 Script javascript per la chiamata AJAX.

La chiamata della funzione AJAX avviene attraverso l’inserimento di un ScriptLink
richiamabile dalla finestra TaskPanesToolbox ().

Figura 54 – ScriptLink all’interno della finestra Toolbox

Il comando ScriptLink aggiunge alla pagina una riga di codice, riportata di seguito,
<SharePoint:ScriptLink runat=quot;serverquot; id=quot;MakeLinkDocumentsquot; Name=quot;makelinkdocuments.jsquot; Language=quot;javascriptquot;/>

che modificata opportunamente, richiama il file javascript preventivamente memorizzato
all’interno della cartella
C:Program FilesCommon FilesMicrosoft Sharedweb server Extensions12TEMPLATELAYOUTS1040

49

presente sul server di lavoro.

La porzione di codice che utilizza la chiamata AJAX è
<a href=quot;#quot; onclick=quot;ResultTestDoc(GenerateLinkDocument(1,{@ID}));quot;>…</a>

Lo script JavaScript è composta da due funzioni:

ResultTestDoc()

se il documento PDF associato al dottorando è presente all’interno della
o
cartella, viene visualizzato in una nuova finestra, altrimenti viene restituito un
messaggio di errore che comunica all’utente che il documento non è
presente
accetta come parametro il nome del documento, in questo caso generato
o
dalla funzione GenerateLinkDocument()
GenerateLinkDocument()

restituisce il nome del documento, ad esempio d0020.pdf
o
accetta come parametri un numero identificativo della lettera iniziale e il
o
valore della chiave primaria del dottorando di cui l’utente vuole vedere la
relazione.

4.4.4 Script javascript per la chiamata AJAX
La tecnologia AJAX permette l’interazione tra il client ed il server web senza l’obbligo di
ricaricare la pagina web. Il file javascript viene richiamato attraverso la funzione ScriptLink, come
indicato precedentemente, e nel momento in cui la pagina viene compilata si traduce in
<script type=quot;text/javascriptquot; language=quot;javascriptquot;
src=quot;/_layouts/1040/makelinkdocuments.js?rev=Wl03Trr%2FfzWnmLDgDn0fhA%3D%3Dquot;></script>

Il motivo per cui è stato scelto di utilizzare questa tecnologia deriva dal fatto che il codice
presente in una pagina WSS non accetta l’intrusione di un codice esterno e il comando ScriptLink
accetta il caricamento solo di documenti .js.

Il codice sviluppato è il seguente:
var xmlhttp; // Variabile contenente la request XMLHttpRequest.
var ResultXMLHttp = -1; // Indica il risultato restituito dal server. Inizializzato a -1.
var oTimer; // il timer
var called = false; // Indica se è già stata richiamata la funzione ResultTestDoc

function SetInitialChar(id) {
var InitialChar;
if (id==1) { InitialChar='d'; }
if (id==2) { InitialChar='p'; }
return InitialChar;
}

function GenerateLinkDocument(initial,id) {
var idtable,beginwith,namefiledocument,extension;

50

Sviluppo Di Portali Tramite La Tecnologia Sharepoint

Sviluppo Di Portali Tramite La Tecnologia Sharepoint

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

En vedette

En vedette (7)

Similaire à Sviluppo Di Portali Tramite La Tecnologia Sharepoint

Similaire à Sviluppo Di Portali Tramite La Tecnologia Sharepoint (20)

Sviluppo Di Portali Tramite La Tecnologia Sharepoint