Una delle caratteristiche che rendono "usabile", ovvero navigabile agevolmente, un sito Web è la presenza di un motore di ricerca interno per parole chiave che consente all'utente di giungere, con una certa immediatezza, alla pagina, o alle pagine, in cui sono riportati gli argomenti che suscitano il suo interesse.
Per ottenere un prodotto del genere ci sono diverse strade, la più utilizzata in assoluto è senza alcun dubbio quella di installare un database sul server ed interrogarlo con un programmino scritto mediante l'utilizzo di un linguaggio di scripting server-side, come Asp, Php, Jsp, Cgi o che dir si voglia.
Non tutti gli sviluppatori, chi per un motivo chi per un altro, hanno la possibilità o sono in grado di sviluppare un'applicazione Web del genere, magari per inesperienza o perchè non dispongono di un server Web che offraqueste caratteristiche.
Per ovviare a questa situazione è possibile utilizzare un linguaggio di scripting client-side come Javascipt, memorizzando parole chiave, url, titolo e descrizione in degli Array() ciclandoli e stampando a video i risultati di una specifica ricerca.
Altra soluzione è quella di ricorrere ad XML ed all'oggetto recordset per ovviare all'utilizzo di script troppo complessi e più difficilmente gestibili in termini di ampliamento del "database" generato da semplici Array.
Bene, in questo tutorial ci muoveremo verso quest'ultima direzione. Prima di iniziare ricordiamo che questa soluzione funziona esclusivamente con Internet Explorer, il browser di casa Microsoft. Infatti sfruttiamo una XML Data Island che è implementata solo da IE.
Questo limite può essere accettato per iniziare ad affrontare il problema e per quelle applicazioni che girano su contesti in cui tutti utilizzano questo browser, altrimenti è meglio optare per una soluzione diversa.
Analisi e concettualizzazione del problema
Per creare un'applicazione client-side col supporto di XML occorre utilizzare un programmino che si interfacci con il file XML. Noi utilizzeremo un semplice script Javascript: le specifiche di XML e del DOM (Document Object Model) dettate dal W3C descrivono il Javascript come il linguaggio più adatto a lavorare con l'XML.
Abbiamo bisogno sostanzialmente di due file, un file XML che contiene i dati che ci interessano in una struttura organizzata ad hoc, ed un file HTML che contiene il modulo di ricerca, organizzato anche per ricevere in output i risultati, ed il Javascript la cui funzione abbiamo descritto in precedenza; per comodità e chiarezza includeremo comunque nel file Html un file Javascript esterno con estensione .js.
Andiamo per gradi analizzando i tre file uno ad uno.
Costruzione del "database" XML
Il file XML che fungerà da database ha una struttura molto semplice e chiara: root, sub-directory e nomi dei "campi", classica struttura di base di questa tipologia di file.
Dobbiamo organizzarci in questo modo, creiamo tre campi: titolo, che verrà stampato a video e sarà il testo linkabile e fungerà anche da parola chiave, url che conterrà gli indirizzi Web associati all'intero record e descrizione il cui nome è abbastanza esplicativo, una semplice descrizione del link che si andrà a visitare.
Costruiamo il file database.xml:
<?xml version="1.0"?>
<root>
<ricerca>
<titolo>Html</titolo>
<descrizione>Sezione dedicata all'Html</descrizione>
<url>http://www.lukeonweb.net/html/index.asp</url>
</ricerca>
<ricerca>
<titolo>Css</titolo>
<descrizione>Sezione dedicata ai Css</descrizione>
<url>http://www.lukeonweb.net/css/index.asp</url>
</ricerca>
<ricerca>
<titolo>Javascript</titolo>
<descrizione>Sezione dedicata a Javascript</descrizione>
<url>http://www.lukeonweb.net/javascript/index.asp</url>
</ricerca>
<ricerca>
<titolo>XML</titolo>
<descrizione>Sezione dedicata a XML</descrizione>
<url>http://www.lukeonweb.net/xml/index.asp</url>
</ricerca>
...
</root>
In seguito, in fase di realizzazione dello script Javascript, ci tornerà utile come predetto l'oggetto recordset di XML che si interfaccia ad con un file XML sfruttando i nomi dei campi (in questo caso quindi titolo, url e descrizione), nè più nè meno come lavora l'oggetto ADO (ActiveX data Object) di Microsoft.
Attenzione non sto uscendo fuori tema! ADO è un controllo in grado di stabilire una connessione con un database sulla scorta di un motore (driver) chiamato ODBC (Open Database Connectivity): ADO lavora in XML!!!
È quindi ovvio pensare che l'oggetto recordset di XML, sulla scorta delle informazioni appena date, sia perfettamente in grado di lavorare in locale seguendo gli standard dettati dal W3C per Javascript.
Costruzione del modulo di ricerca Html e della struttura di output
Il file Html che andremo a presentare è minimamente formattato per essere eventualmente già bello e pronto per l'uso, è di una semplicità che sfiora i livelli del quasi grado di minima esperienza in Html :-) lo chiameremo ricerca.htm, vediamo il codice:
<html>
<head>
<title>Ricerca con Explorer</title>
<script language="javascript" src="elabora.js"></script>
</head>
<body onLoad="document.modulo.cerca.focus()">
<!-- Qui definiamo la XML Data Island, ovvero la connessione con l'XML -->
<xml id="id_database" src="database.xml"></xml>
<div>
<form name="modulo">
Cerca nel sito
<input type="text" name="cerca" />
<input type="button" value="Cerca" onClick="Ricerca()" />
</form>
</div>
<!-- questo div contiene i risultati della ricerca -->
<div id="risultati"></div>
</body>
</html>
Il file è, nello svolgimento della sua funzione, divisibile in tre punti essenziali:
- Includiamo il file Javascript esterno (che creeremo tra breve) con la stringa
<script language="javascript" src="elabora.js"></script> - Creiamo la "connessione" al file database.xml con la stringa
<xml id="id_database" src="database.xml"></xml> - Oltre a stabilire un source (src) per localizzare il file XML (che in questo caso si trova nella stessa posizione) gli assegniamo un identificativo di tipo id che ci servirà in seguito nello script Javascript per collaborare con l'oggetto recordset ed identificare in maniera univoca l'XML di cui sopra
- Creiamo un layer di testo vuoto per visualizzare in output sulla pagina i record trovati all'interno del file XML, assegnando anche a questo un'altro identificativo di tipo id
<div id="risultati"></div>
Elaborazione Javascript del "database" XML
Siamo sul rettilineo finale!
Creiamo adesso il file elabora.js ed inseriamo in maniera dogmatica il seguente codice, comunque opportunamente commentato:
function Ricerca()
{
// Localizziamo la casella di testo del modulo HTML
// di ricerca ed eseguiamo un controllo
// case-insensitive col metodo toUpperCase()
var stringa = document.modulo.cerca.value.toUpperCase();
// Creiamo un controllo per cui se la ricerca
// viene eseguita per nessun carattere
// verrà restituito all'utente un messaggio
// di avviso direttamente a video sulla pagina
if ((stringa == "") || (stringa == "undefined"))
{
risultati.innerHTML = "Inserire un termine per eseguire una ricerca";
return false;
}
// Ci posizioniamo ora sul primo record trovato sul file XML
id_database.recordset.moveFirst();
// In questa variabile (inizialmente vuota) costruiremo
// dinamicamente il testo opportunamente formattato
// dell'output della ricerca
var estrai = "";
// Eseguiamo un ciclo while() che sfoglia i record
// del file XML fino all'ultimo
while (!id_database.recordset.EOF)
{
var titolo = id_database.recordset("titolo").value.toUpperCase();
if (titolo.indexOf(stringa) >= 0)
{
estrai += "<div><a href=" + id_database.recordset("url") + ">"
+ id_database.recordset("titolo")
+ "</a><br>" + id_database.recordset("descrizione")
+ "</div><br>";
}
// e ci riposizioniamo all'inizio del file
id_database.recordset.moveNext();
}
// Verifichiamo che ci siano record disponibili per la ricerca
// se non ce ne sono restituiamo all'utente un messaggio di avviso
if ((estrai == "") || (estrai == "undefined"))
{
risultati.innerHTML = "Nessun risultato per la ricerca";
return false;
}
else { // oppure i record trovati
risultati.innerHTML = estrai;
}
}
I commenti non lasciano spazio a molti dubbi sul funzionamento di questo script, l'unica parte che vorrei riprendere ed analizzare più approfonditamente riguarda il ciclo while sull'oggetto recordset.
Il ciclo si perpetua fino a quando non raggiunge la fine del file XML dopo averlo sfogliato tutto: per questo utilizziamo la proprietà EOF (End Of File).
Poi bisogna identificare il titolo del record che estrarremo dal file XML (che funge anche da parola chiave per la ricerca), utilizzando la sintassi
id_database.recordset("titolo")
ovvero "il recordset (associato al campo titolo)".
Per eseguire la ricerca utilizziamo il metodo indexOf() passandogli la variabile stringa associata alla casella di testo del modulo di ricerca, se trova una rispondenza allora il settaggio avviene su true, altrimenti su false (ovvero stabiliamo se restituire o meno risultati).
Il metodo moveNext() associato all'oggetto recordset in questione, termina il ciclo e ci riposiziona virtualmente al primo record del file XML.
Conclusioni
Ci siamo limitati a sviluppare solo una serie di ragionamenti, al dilà del fatto che abbiamo utilizzato una determinata tecnologia implementata con una data sintassi, gli stessi ragionamenti possono essere semplicemente convertibili ed essere utilizzati per sviluppare applicazioni analoghe, simili, o anche diverse, col linguaggio e con gli strumenti che più ci convengono.
