Tabelle e documenti Web

I vantaggi di combinare la tecnologia dei database con il Web sono cosi' ovvi che ora quasi tutti i database "tradizionali" hanno un'interfaccia Web. Qui faremo un'implementazione della stessa idea usando Javascript. Il "database" e' una semplice tabella. La prima tabella contiene informazioni sulle persone che lavorano nel dipartimento. Nel Dipartimento di Fisica dell'Universita' di Bari lavorano circa 300 persone. Si voleva creare una lista di queste persone con le informazioni essenziali per chi cerca di contattarle: indirizzo di posta elettronica, telefono e home page. In piu' si voleva dare la possibilita' di accedere ad altre informazioni sulle stesse presenti ad esempio sui motori di ricerca e su altre istituzioni (Cern,Infn..) che collaborano con l'universita'. Una semplice tabella in HTML presenta notevoli problemi nell'aggiornamento,specialmente se c'e' da cambiare qualcosa per tutti i campi. Il DHTML consente una soluzione elegante di questo problema in quanto i dati sono conservati nel file persone1.js come una tabella in formato testo modificabile con un qualsiasi editore di testi. Questa tabella e' letta dal documento dinamico vero e proprio. Questo consiste di un documento db.html che definisce i 2 frames usati. Nel frame menu viene caricato il documento frame1.html contenente il programma Javascript che crea il vettore di oggetti. Il frame data viene usato col documento frame2.html contenente le funzioni di lista,ricerca e aggiornamento dei dati e col documento dbcrea2 che permette la creazione della lista attaccata alla home page del Dipartimento.

Se volete tagliare e incollare questo documento, copiate i 5 files nella stessa directory usando il menu' che compare cliccando sul link col bottone destro del mouse.

I dati nella tabella sono scritti nella maniera seguente(una specie di flat ascii database): 

tabella =
'cognome,nome,email,telefono,homepage'| +
.....
'cognome,nome,email,telefono,homepage';
Il carattere | separa le righe, invece la virgola separa i campi.
Nel documento creiamo un vettore di oggetti chiamati Persone ed usiamo la funzione Persona(cognome,nome,email,tel,homepage) come costruttore. Tenuto conto di questo la creazione del vettore di oggetti viene fatto dalle seguenti istruzioni Javascript: 
records = tabella.split("|")
  npers = records.length;
 Persone = new Array(npers);
for (i=0; i<records.length; i++) {
 campi = records[i].split(",")
 for (j=0; j<campi.length; j++) {

}
Persone[i] = new Persona (campi[0],campi[1],campi[2],campi[3],campi[4])
}
Il costruttore ha questa forma:
                     function Persona (cognome,nome,tel , email ,homepage) {
                      this.cognome = cognome;
                      this.nome = nome;
                      this.tel = tel 
                      this.email = email;
                      this.homepage = homepage;
                     }
A questo punto il vettore di oggetti e' pronto e puo' essere usato per fare ricerche o solo per listare il contenuto del data base. Le funzioni Lista,campo1,campo2,campo5 permettono,per esempio, di avere una lista tabellare del contenuto del data base.

Da notare la lentezza delle varie funzioni che non permettono un uso corrente del documento almeno al momento attuale:per questo e' stata trovata la soluzione di usare lo script per generare un normale documento html (cioe' senza script) che viene ritagliato dal sorgente (visualizzato usando il tasto destro del mouse) e poi incollato nel file Persone attaccato alla home page del Dipartimento.Per questioni di sicurezza, questo e' l'unico modo come possiamo scrivere un file a partire da un documento dinamico (cioe' usando le possibilita' taglia e incolla del computer).

La seconda tabella serve invece per fare una presentazione dell'INFN da usare non solo in rete ma anche in occasioni di esposizioni. In tal caso la presentazione avviene in automatico. La presentazione avviene in modalita' diverse a seconda dell'uso.

Qui daro' le istruzioni su come mettere assieme la presentazione automatica.

Salvate su disco i seguenti documenti:

eventi.js contenente la tabella

eventi2.html contenente la descrizione dei frame

mostraeventi2.html con il programma per generare la presentazione.

descrizione2.html con la creazione della singola slide.

Ora aprendo il file eventi2.html in locale dovreste poter vedere la presentazione.

In questo caso viene usata la tecnica molto comune nei documenti dinamici, di far pilotare la presentazione da uno script che si trova in una pagina html (mostraeventi2.html) che viene caricata in un frame invisibile. Questo script carica la tabella in memoria e si calcola la prossima "slide" da mostrare con la funzione newslide. Quando tutto e' pronto , questa funzione carica il documento descrizione2.html nell'unico frame visibile.

INDIETRO a Seminario su HTML dinamico
Maintained by Giuseppe Zito: Giuseppe.Zito@cern.ch.Last revised :