Il sito si costruisce da sè

Il matrimonio tra un sito web e una base dati è un matrimonio benedetto dal cielo. Apre possibilità che altrimenti sarebbero impensabili e rende semplici realizzazioni che sembravano complicatissime.

Immaginate di dover realizzare un sito web che presenti ai milioni di Internet tutti i prodotti della cioccolateria “Grassi & Soddisfatti”. La nostra immaginaria cioccolateria offre sul mercato circa duecento prodotti: tavolette di cioccolato con le nocciole e confezioni regalo, buste di cacao solubile e barrette per la merenda.
Il signor Andrea Grassi, uno dei titolari, ci chiede che ciascun prodotto abbia una pagina sua corredata di fotografia. Noi potremmo studiare un sito in cui una sezione sia dedicata ai prodotti. faremo studiare da un grafico una generica scheda prodotto, la duplicheremo duecento volte e la riempiremo con i dati di ciascuna singola offerta della “Grassi & Soddisfatti”. Ma non sarà comunque una buona soluzione, per due motivi:
• rinnovare la grafica del sito significherebbe mettere mano a ciascuna pagina;
• la navigazione nel sito, così vasto, è difficile.

E io ci metto un motore

La soluzione di gran lunga migliore è quella che passa attraverso l’uso di una base dati. La base dati memorizzerà tutti i dati di tutti i prodotti. Le pagine HTML verranno generate dalla base dati, automaticamente, ogni volta che un visitatore del sito richiede la scheda di un prodotto (vedere l'illustrazione qui sotto).
Esistono tre soluzioni a basso costo che permettono di pubblicare un sito Internet usando un motore di base dati: si tratta di Paradox, Microsoft Access e FileMaker Pro. La prima soluzione è estremamente primitiva. La seconda è potente, ma molto difficile da usare. Il sistema ASP (Active Server Pages) di Microsoft, basato su tecnologia Access, richiede che si utilizzino unicamente calcolatori Windows NT e (secondo le peggiori tradizioni Microsoft) contiene svariati tranelli che vanno evitati. In una recente recensione, l’autorevole builder.com (un sito dedicato a chi progetta siti) ha scritto che ASP è consigliabile soltanto “a chi usa solo calcolatori Windows su una rete locale Microsoft e naviga esclusivamente con Internet Explorer”.
Nel resto di questo articolo dimostreremo l’uso di FileMaker Pro 4, che funziona egualmente bene su calcolatori Mac oppure Windows NT.

Creiamo la base dati

Tutti i prodotti della “Grassi & Soddisfatti” vanno catalogati in una base dati usando FileMaker.
Diamo alla base dati FileMaker un nome corto, che non contenga spazi bianchi, vocali accentate o lettere maiuscole e che termini con “.fp3”: questa scelta renderà molto più semplice trasferire la base dati su un server NT, se e quando ce ne sarà bisogno. Nel nostro caso chiamaremo il file “grassi_soddisfatti.fp3”.
Nel definire i campi usiamo il medesimo criterio: è particolarmente importante evitare le vocali accentate, che provocano problemi in fase di pubblicazione sul Web. Nel caso del nostro esempio noi abbiamo pensato a una scheda prodotto come quella visibile in figura. Mentre ci troviamo in Formato scheda, usiamo il comando “Imposta il Formato” per cambiare nome alla schermata principale (chiamiamola “CGI”). È importante che la nostra base dati abbia un formato dove sono visibili tutti e soli i campi che saranno pubblicati sul Web.
Riempiamo la base dati con i dati dei prodotti forniti dal cliente.

HTML mon amour

È arrivato il momento di scrivere lo HTML delle pagine mastro. La casa produttrice di FileMaker offre un programma autore per lo HTML, Home Page 3.0, che è piuttosto simile ai più conosciuti Macromedia Dreamweaver e GoLive CyberStudio. Home Page aggiunge alle tipiche funzionalità di un programma del suo tipo la capacità di generare automaticamente pagine mastro HTML per FileMaker Pro.
A noi però interessa vedere esattamente come funzioni questa tecnologia: così, scriveremo a mano una pagina HTML di esempio, senza usare Home Page. Chi usa abitualmente un programma come Dreamweaver può usarlo per creare una pagina mastro e poi modificarla aggiungendo le speciali istruzioni per FileMaker.
Per rendere le cose più semplici creeremo solo due pagine (una per cercare un prodotto e l’altra per mostrarne la scheda) e non useremo nessun elemento grafico, in modo che lo HTML sia molto leggibile e l’esempio trasparente.
La pagina che mostra la scheda prodotto si limita a usare dei semplici segnaposto per indicare a FileMaker i punti in cui deve inserire i dati provenienti dalla base dati. Verrà registrata in un documento chiamato “scheda_prodotto.htm” all’interno della cartellina “web” che si trova insieme alla icona di FileMaker: la vediamo nel listato 1.
La pagina home, che permette di effettuare le ricerche, è di poco più complessa. Cominciamo a implementarla creando un “form” HTML, uno di quegli spazi dove l’utente può scrivere per inserire una richiesta e dove possiamo aggiungere un pulsante. Il modulo vuoto e il codice HTML che lo genera sono mostrati nel listato 2: va registrato in un file chiamato “predef.htm” da piazzare dentro la cartellina “web”. Quando avete compreso il listato 2 date una occhiata al listato 3, dove abbiamo aggiunto le istruzioni per FileMaker che lavorano come un motore per la ricerca. Rispetto alla precedente versione non funzionante abbiamo cinque modifiche. Vediamole nei dettagli:
<INPUT TYPE=hidden NAME="-DB" VALUE="grassi_soddisfatti.fp3">
Questa riga dice a FileMaker che la ricerca va compiuta all’interno della base dati “Grassi & Soddisfatti”. La clausola “hidden” indica che l’utente non vede nulla.
<INPUT TYPE=hidden NAME="-format" VALUE="scheda_prodotto.htm">
Questa riga ordina a FileMaker di usare come pagina mastro quella che abbiamo creato al punto 1.
<INPUT TYPE=hidden NAME="-error" VALUE="predef.htm">
Questa riga chiede a FileMaker, in caso di errore, di mostrare nuovamente il modulo. In questo modo se la ricerca non va a buon fine (per esempio, quando l’utente cerca un prodotto che non esiste) sarà possibile tentarne un’altra.
<INPUT TYPE=hidden NAME="-Lay" VALUE='CGI'>
Infine, questa riga dice che FileMaker dovrà usare il formato chiamato CGI per manipolare i suoi campi.
C’è una quinta differenza nel listato 3 rispetto al listato 2. Nella riga di HTML che disegna il pulsante abbiamo scritto NAME="-Find". Il nome (invisibile) del pulsante è un ordine per FileMaker: gli impone di effettuare una ricerca quando il pulsante viene premuto.

Qualche prova

Siamo pronti per provare sulla nostra macchina la soluzione che abbiamo realizzato. Chiudiamo momentaneamente tutte le applicazioni che avevamo aperto. Andiamo nel pannello di controllo “TCP/IP”. Dal menu Archivio selezioniamo la voce Configurazioni e creiamo una nuova configurazione che compiliamo in un modo un po’ speciale. Questo ci permetterà di rendere il nostro Macintosh server di se stesso e di usarlo per i test. Durante i test il nostro Mac sarà sconnesso da Internet, se prima lo era.
Riapriamo FileMaker e la nostra base dati. Dal menu Composizione selezioniamo Preferenze | Applicazione | Plug-In. Nella finestra che appare abilitiamo il Web companion. Poi usiamo la voce “Condivisione” per menu Archivio per consentire alla nostra base dati di venire consultata attraverso il Web.
Per vedere come apparirà il nostro sito ora lanciamo il nostro programma di navigazione preferito (per esempio Netscape Navigator oppure Internet Explorer) e digitiamo l’indirizzo http://10.0.0.2. La nostra pagina appare.

Si può dare di più

Per pubblicare su Internet una soluzione come quella che abbiamo presentato qui dovremo localizzare un provider che monti una copia di FileMaker Pro 4 su uno dei suoi server collegati 24 ore su 24 all’Internet (tipicamente si tratterà di macchine NT).
FileMaker può essere utilizzato per soluzioni più complesse di quella dell’esempio, perché è possibile usare più basi dati, correlate tra di loro, anche sul Web. Per esempio, chi scrive lo ha utilizzato per realizzare il sito commerciale del Gruppo Ugo Mursia Editore (http://catalogo.mursia.com:4040). In quest’ultimo caso, FileMaker si è dipostrato adeguato perché il cliente ha richiesto che non venissero accettate le carte di credito per i pagamenti.
FileMaker Pro rappresenta una soluzione ideale per le reti locali (le Intranet). Quando vogliamo utilizzarlo su Internet, si presta a tutte le applicazioni di dimensioni piccole e medie che non richiedono sicurezza garantita. Nel caso di negozi virtuali, per esempio, dove è richiesto il trattamento di dati coperti da privacy (come i dati riservati di un consumatore) o quando si desiderano caratteristiche di sicurezza (usando i server SSL) FileMaker non è più adatto. Purtroppo, in casi di questo tipo le tecnologie da adottare diventano significativamente più complicate e costose e richiedono investimenti di qualche decina di milioni: per esempio è molto interessante WebObjects 4, la tecnologia Apple basata su Mac OS X Server.

I listati

Listato 1. La scheda prodotto

<HTML>
<HEAD>
<TITLE>Scheda del prodotto "[FMP-FIELD: nome_prodotto]"</TITLE>
</HEAD>
<BODY BGCOLOR="#FFFFFF">
<H1>[FMP-FIELD: nome_prodotto]</H1>
<P>[FMP-FIELD: descrizione_prodotto]
<P><IMG SRC="[FMP-image: foto]">
<P>Prezzo al pubblico: Lit. [FMP-FIELD: prezzo] ovvero Euro [FMP-FIELD: prezzo_in_euro]
<P>CONFEZIONE DA GRAMMI [FMP-FIELD: peso]
</BODY>
</HTML>

Listato 2. Il modulo base di ricerca


<HTML>
<HEAD>
<TITLE>Benvenuto da Grassi &amp; Soddisfatti</TITLE>
<META NAME="ROBOTS" CONTENT="NONE">
</HEAD>
<BODY BGCOLOR="#FFFFFF">
<FORM ACTION="" METHOD="Post">
<P>Nome del prodotto che ti interessa:
<INPUT TYPE=text NAME="nome_prodotto" VALUE="" SIZE=30>
<P><INPUT TYPE=submit NAME="Cerca" VALUE="Cerca">
</FORM>
</BODY>
</HTML>

Listato 3. Il modulo di ricerca funzionante

<HTML>
<HEAD>
<TITLE>Benvenuto da Grassi &amp; Soddisfatti</TITLE>
<META NAME="ROBOTS" CONTENT="NONE">
</HEAD>
<BODY BGCOLOR="#FFFFFF">
<FORM ACTION="FMPro" METHOD="Post">
<INPUT TYPE=hidden NAME="-DB" VALUE="grassi_soddisfatti.fp3">
<INPUT TYPE=hidden NAME="-format" VALUE="scheda_prodotto.htm">
<INPUT TYPE=hidden NAME="-error" VALUE="predef.htm">
<INPUT TYPE=hidden NAME="-Lay" VALUE='CGI'>
<P>Nome del prodotto che ti interessa:
<INPUT TYPE=text NAME="nome_prodotto" VALUE="" SIZE=30>
<P><INPUT TYPE=submit NAME="-Find" VALUE="Cerca">
</FORM>
</BODY>
</HTML>