Visual InterDev è un prodotto della Microsoft che non può solo essere considerato un editor per creare pagine HTML, DHTML o ASP, ma è un vero ambiente di sviluppo che si integra perfettamente con gli altri prodotti della suite Visual Studio. In questo articolo cercherò di spiegare come utilizzare i controlli Design Time (DTC) per connettersi ad un database ed effettuare delle query parametriche guidate, cioè con dati scelti dall'utente attraverso un menu a tendina.

I DTC offrono allo sviluppatore una serie di tools che, essendo basati su una libreria di script, non offrono certo il massimo per quanto riguarda la scalabilità di un'applicazione Web complessa, ma sono utilissimi per sviluppare prototipi in tempi ragionevolmente rapidi e quindi per rendersi conto dei componenti necessari all'applicazione stessa che, se non dovrà essere utilizzata solo in ambito aziendale, ovvero in condizioni in cui la scalabilità non rappresenta un problema, dovrà essere sviluppata nel modo "tradizionale" servendosi quindi del buon vecchio codice HTML per creare form e usando i metodi consueti per trasferire le informazioni da una pagina all'altra dell'applicazione.

Questa premessa è indispensabile perché non si pensi che l'utilizzo di questo ambiente di sviluppo possa creare applicazioni utilizzabili senza dover scrivere codice o dover imparare le tecniche della programmazione. Se Front Page può consentire a chiunque di creare delle discrete pubblicazioni WEB senza conoscere l'HTML, VID non consente allo stesso modo di sviluppare applicazioni WEB senza conoscere, almeno, VBScript e Javascript.

L'obiettivo è di sviluppare una semplice applicazione che interroghi il database di esempio di SQL Server (pubs) usando i DTC di Visual InterDev.

Lo sviluppo dell'applicazione necessita delle seguenti fasi preliminari:

• Creazione di un'origine dati sul system DSN per consentire l'accesso ai dati stessi tramite ODBC (nell'esempio è denominato "Esempio")
• Creazione di un nuovo progetto in Visual InterDev chiamato Esempio

Per creare un nuovo progetto è necessario, dopo aver avviato il programma, effettuare la scelta "Nuovo progetto WEB" nella finestra di dialogo "Nuovo Progetto" e cambiare il nome assegnato di default in "Esempio" (senza le virgolette) e cliccare sul tasto "Apri". Nella successiva finestra di dialogo sarà necessario indicare il nome o l'indirizzo IP del server sul quale si vuole pubblicare l'applicazione (se si lavora in ambiente Windows 95 o NT Workstation il nome sarà "localhost" mentre se si volesse utilizzare l'IP si dovrà digitare 127.0.0.1). La scelta della modalità locale o master dipende essenzialmente dal tipo di lavoro che state facendo. Se lavorate su un server di sviluppo e da soli non c'è differenza tra le due modalità, mentre se dovete rivedere o implementare un'applicazione che è già su di un server di produzione ovvero se lavorate in team, allora è preferibile la modalità locale poiché le variazioni apportate all'applicazione saranno rese effettive sul server di produzione nel momento in cui l'applicazione sviluppata in locale sarà pronta per il rilascio senza compromettere l'applicazione in produzione. Nel nostro caso possiamo tranquillamente scegliere la modalità "Master" e proseguire con il tasto "avanti".

Nel passaggio successivo scegliete l'opzione "Crea nuovo progetto WEB" e verificate che il nome del progetto sia sempre "Esempio" e proseguite senza applicare temi e lay-out (solo per velocizzare la creazione del progetto, ma se preferite applicare alla vostra pagina di esempio un tema e un lay-out fate pure scegliendo quelli che preferite) e fate un click sul pulsante "Fine".

Ora dovreste essere nell'ambiente di sviluppo di Visual InterDev : se avete fatto tutto esattamente dovreste avere nella finestra "Gestione Progetti" il progetto "Esempio", composto da alcune cartelle (_private, _ScriptLibrary e images); inoltre dovrebbero essere presenti i file Global.asa e Search.htm.

Creiamo ora una connessione ai dati: un click di destra su Global.asa e apparirà il menu di contesto dal quale sceglieremo l'opzione "Aggiungi Connessione Dati". Nella finestra di dialogo "Seleziona Origine Dati", selezionando "Origine dati macchina" selezioniamo l'origine dati che abbiamo denominato "Esempio" e quindi il tasto OK. Apparirà una nuova finestra di dialogo relativa alla connessione dati appena creata: cambiate il nome della connessione in "Esempio" e quindi il tasto OK.

Ora siamo pronti a creare la nostra prima pagina ASP che ci consentirà di manipolare il nostro Database: dal Menu scegliamo "Progetto", "Aggiungi elemento Web" e selezioniamo "Pagina ASP".

Nella finestra di dialogo rinominiamo "ASP Page1.asp" in Default.asp e quindi "Open". Nell'editor si aprirà una pagina con questo codice:

<%@ Language=VBScript %>

<HTML>

<HEAD>

<META NAME="GENERATOR" Content="Microsoft Visual Studio 6.0">

</HEAD>

<BODY>

<P> </P>

</BODY>

</HTML>

Alla vostra sinistra dovreste avere la "Casella degli strumenti" che si attiverà non appena avrete aperto la vostra pagina "Default.htm". Se così non fosse, selezionate "Visualizza" dal menu, e dalla tendina selezionate "Casella degli strumenti".

Ora, se non sono già selezionati, selezionate i "Controlli Design-Time" (sono controlli simili a quelli HTML ma si distinguono da questi ultimi per il simbolo dell'associazione ai dati – un cilindro giallo) e trascinate il controllo Recordset nella pagina col codice HTML: rispondete di sì al box che vi chiede se volete attivare il modello a oggetti per la creazione di script. Verranno aggiunte delle righe di codice alla vostra pagina e vedrete apparire il controllo DCT Recordset che avrà come nome "Recordset1" e conterrà tre menu a tendina impostati di default su "Esempio" per la connessione (nome che avevamo dato al nostro collegamento alla base-dati); "Tables" per l'oggetto di database e "Authors" come nome oggetto. Questo controllo serve per interrogare il database e restituisce un recordset che viene modellato variando le proprietà e i metodi dell'oggetto stesso. Per personalizzare l'oggetto è necessario puntare l'oggetto recordset con il mouse e col tasto di desta aprire il menu di contesto e selezionare l'opzione proprietà. Prima di agire sull'oggetto Recordset creiamoci la base per l'interrogazione: passiamo in progettazione cliccando sulla linguetta in basso alla pagina contenente il codice e, selezionando dal menu la voce "Tabella" e "Inserisci Tabella" creando una tabella di 2 righe e due colonne, allineata al centro. Nelle due celle della prima riga inseriamo due controlli DTC "listbox" verificando che si tratti dei controlli DTC e non HTML e nelle due celle rimanenti due controlli "Button". Potrete notare che i controlli "Listbox" poteranno la dicitura "Empty" per evidenziare che non sono associati a dati, cosa che potremo fare agendo sulle proprietà e sui metodi dell'oggetto.

Ora è necessario un momento di pausa: lasciamo per un attimo da parte il nostro applicativo e prendiamo carta e penna per realizzare uno schema della nostra applicazione il cui scopo è di ritornare in una tabella i risultati di una query che selezioni gli autori per città o per stato. Poiché a priori possiamo non sapere quali siano le città e gli stati di residenza degli autori rendiamo più facile la ricerca offrendo all'utente un menu a discesa generato dai dati presenti nelle colonne appropriate del database. In sostanza assoceremo le colonne "città" e "stato" ai due DTC "Listbox".

Le query da effettuare sono dunque quattro:

• Selezionare dalla tabella "Authors" i dati della colonna "City" e associarli al DTC "Listbox1";
• Selezionare dalla stessa tabella i dati presenti nella colonna "State" e associarli al DTC "Listbox2";
• Selezionare tutte le colonne, tranne au_id, dalla tabella "Authors" usando come criterio di selezione (filtro) il dato selezionato dall'utente con il DTC "Listbox1" (City);
• Selezionare tutte le colonne, tranne au_id, dalla tabella "Authors" usando come criterio di selezione (filtro) il dato selezionato dall'utente con il DTC "Listbox2" (State).

I risultati delle query tre e quattro andranno quindi intabellati per essere facilmente consultabili dall'utente, oltre che per avere un lay-out gradevole.

Torniamo ora a Visual InterDev. Un click con il tasto di destra del mouse sull'oggetto Recordset1 e apparirà il menu di contesto dal quale sceglieremo l'opzione "Proprietà". Nella finestra di dialogo che ci appare nella sezione "Generale" cambiano il nome dell'oggetto in "objRsCity" (senza le virgolette), in "Implementazione" selezioniamo la Piattaforma di script "Server(ASP)". Torniamo quindi sulla scheda "Generale" e selezioniamo l'opzione "Istruzione SQL" e, anche se si tratta di una query semplice facciamola generare in automatico a Visual InterDev cliccando sul pulsante "generatore SQL". Nella finestra del "Generatore di query" trasciniamo la tabella "Authors": aprite, dalla visualizzazione dati, che si trova sotto la finestra "Visualizzazione progetti" sulla destra dello schermo (se non ci fosse selezionate dal menu l'opzione "Visualizza" selezionate "altre finestre" e cliccate su "Visualizzazione dati") il nodo nomeserver/Esempio e quindi il nodo pubs (nomeserverSQL) e di seguito il nodo "Tabelle"; selezionate con un click la tabella "Authors" e trascinatela nello spazio vuoto in alto della finestra del "Generatore di query". Avrete così sullo schermo uno schema della tabella con le colonne ad essa appartenenti. Mettete un segno di spunta cliccando sul rettangolo a sinistra di "City" in basso potrete vedere in linguaggio SQL la query (SELECT city FROM authors) diamo alla query un criterio di ordinamento selezionando dalla casella "Tipo ordinamento" (cliccateci sopra e vedrete apparire un menu a tendina con i vari criteri) "Crescente" (SELECT city FROM authors ORDER BY city). Ora dal menu selezionate "Query" e "Esegui" e nella griglia in basso vedrete i risultati della query. Se osservate con attenzione vedrete che la città di Berkley appare due volte (evidentemente due autori abitano a Berkley) creando un elemento di disturbo. Per evitare quindi che vengano ripetuti più volte valori uguali aggiungete dopo l'istruzione SELECT l'istruzione DISTINCT (SELECT DISTINCT city FROM authors ORDER BY city) e fate eseguire la query (menu "Query" opzione "Esegui") e vedrete che i valori duplicati sono ora presenti una sola volta nell'output della query. Chiudete il generatore di query rispondendo sì alla richiesta di salvare le modifiche nel file Default.asp.

Ripetete l'operazione per il DTC Recordset2, naturalmente il campo di output sarà "state" quindi la query avrà la seguente sintassi: SELECT DISTINCT state FROM authors ORDER BY state, cambiate il nome di Recordset2 in objRsState e salvate il file Default.asp con le variazioni fatte.

Ora associamo i risultati delle query ai due DTC Listbox:

Click di destra su Listbox1 quindi "Proprietà" . Nella scheda "Generale" verificate che la piattaforma script sia "Server(ASP)"; nel frame "Dati" selezionate dal menu a tendina "Recordset" l'oggetto "objRsCity" e dal menu "Campo" selezionate l'unica opzione disponibile "city". Nella scheda "Ricerca" selezionate da recordset (opzione di default già selezionata) Origine riga: "objRsCity"; per "colonna associata" e "campo elenco" il valore "city". Se avete seguito correttamente le istruzioni, premendo il tasto "OK" nel vostro listbox è apparsa la dicitura "DataBound".

Se siete impazienti di vedere i risultati e di controllare che quanto sin qui esposto sia stato seguito correttamente selezionate da menu l'opzione "Visualizza" e "Visualizza nel Browser" rispondendo di si al box che vi invita a salvare la pagina. Nel browser il menu a tendina dovrebbe essersi popolato dei nomi delle città della tabella, senza duplicati. Ora chiudete il browser e tornate al lavoro: Dovete ripetere le stesse operazioni con Listbox2, naturalmente con le variazioni del caso: il recordset sarà "objRsState" il campo sarà "state" nella cartella "Generale", mentre nella cartella "Ricerca" l'origine riga sarà impostata su "objRsState", e "colonna associata" e "campo elenco" saranno impostati su "state". Se volete vedere il risultato del vostro lavoro premete il tasto destro del mouse in una parte vuota della pagina e dal menu di contesto scegliete l'opzione "Visualizza nel browser": se tutto è stato fatto correttamente il browser visualizzerà due menu a tendina; il primo con i nomi delle città ed il secondo con le sigle degli stati, entrambi in ordine alfabetico.

Ora non ci resta che popolare una tabella con i dati prelevati dal database il filtro sarà creato dalla scelta che verrà fatta dall'utente scegliendo uno stato o una città dal menu a tendina e premendo il corrispondente tasto.

Si tratta di una query parametrica i cui parametri dipendono dalla scelta fatta sul momento dall'utente selezionando uno dei dati che appaiono nel menu a tendina. Abbiamo quindi bisogno degli altri due recordset objRs1 e objRs2 che effettueranno una query con dei criteri, usando quindi la clausola SQL "WHERE". Click col tasto destro del mouse su objRs1 selezionando l'opzione proprietà selezionando come origine dati "istruzione SQL" e quindi "generatore SQL" trascinate la tabella "authors" nello spazio vuoto in alto e spuntate i quadratini accanto a au_lname, au_fname, phone, address, city, state e zip; se volete un criterio di ordinamento cliccate su "Tipo ordinamento" della colonna che volete ordinare e scegliete l'ordinamento crescente o decrescente , quindi nella colonna "city" cliccate all'interno della colonna "criteri" e digitate "= ?" (senza virgolette).L'istruzione SQL generata sarà di questo tipo: "SELECT au_lname, au_fname, phone, address, city, state, zip, FROM authors WHERE (city = ?)". Chiudete il generatore SQL rispondendo sì alla richiesta di salvare le variazioni. Riaprite la finestra delle proprietà di objRs1 aprite la cartella "implementazione" selezionate la piattaforma script "Server (ASP)" e deselezionate la casella "apri automaticamente il recordset" infatti il recordset verrà aperto quando l'utente, selezionando il bottone, chiederà che venga effettuata la ricerca. Selezionate ora la cartella parametri. Il valore del parametro sarà corrispondente al valore del Lisbox1 (quello delle città) selezionato dall'utente, quindi in questa casella (l'unica di questa cartella dove potete scrivere) dovrete farvi restituire dall'oggetto listbox la stringa contenete l'item selezionato per passarlo all'istruzione SQL che effettua la ricerca. L'oggetto listbox restituisce il valore di quanto selezionato col metodo getValue([nindex]) dove per nindex si intende il numero progressivo dell'item selezionato; perché l'oggetto listbox ci restituisca il numero progressivo selezionato occorre fare riferimento ad una sua proprietà: selectedIndex.

Quindi l'istruzione Listbox1.getValue (Listbox1.selectedIndex) attraverso un metodo ed una proprietà dell'oggetto ci restituisce il parametro che, attraverso la clausola WHERE consentirà al recordset di restituirci tutti i valori richiesti della tabella authors dove la città è uguale alla selezione fatta dall'utente. E' questo dunque il valore che dovrete inserire nel campo "Valore" della scheda "Parametri" nelle proprietà di objRs1 con un'avvertenza: fate attenzione a digitare esattamente come è stato scritto, rispettando le maiuscole e le minuscole. Questo è dovuto al fatto che gli oggetti DTC sono scritti in JavaScript e, come certo saprete, questo linguaggio di scripting (a differenza di VBScript) è "case sensitive" cioè fa' differenza tra lettere maiuscole e minuscole, quindi scrivere listbox1.getvalue (listbox1.Selectedindex) restituirebbe un errore.

Ripetete l'operazione appena fatta con objRs2 con le opportune variazioni:

• Il criterio =? Sarà inserito nella colonna "State"
• Il valore da inserire nella finestra delle proprietà del recordset objRs2, cartella "Parametri" sarà Listbox2.getValue (Listbox2.selectedIndex) sempre rispettando le lettere maiuscole e quelle minuscole.
• Ricordatevi anche in questo caso, nella cartella implementazione di deselezionare il checkbox "apri automaticamente il recordset".

Ora è necessario scatenare l'evento che avvii la ricerca nella tabella del database e crei il recordset. Per far questo ci serviamo dei due bottoni che abbiamo inserito nella tabella, al di sotto dei due listbox. Posizioniamoci sul bottone denominato Button1 e apriamo, col solito click del tasto destro il menu "Proprietà" lasciando in nome di default "Button1" (non ve lo consiglio quando avete più di due bottoni, è sempre meglio dare un nome che vi ricordi la funzione svolta dal bottone stesso ), impostate la piattaforma script su "Server (ASP)" e cambiate la didascalia in "Cerca" quindi cliccate sul tasto "OK", lo stesso farete per "Button2".

Sulla sinistra dello schermo dovreste avere la casella degli strumenti, in basso a questa casella dovrebbero esserci due linguette con la didascalia "Struttura...", se tenete fermo il puntatore del mouse su una di queste linguette apparirà il tool-tip col nome intero: cliccate su "Struttura script" (se non la trovate da menu selezionate "Visualizza" e "altre finestre" e selezionate "Struttura script"). In questa casella vedrete la struttura della pagina che avete appena costruito: se aprite il nodo "Server oggetti ed eventi" e da qui il nodo "Button1" vedrete che sotto di questo è segnalato un solo evento: " onclick" che è proprio quello che useremo per far creare il recordset che si servirà per popolare la tabella dei dati richiesti. Un doppio click su "onclick" e nella vostra pagina apparirà questo codice:

<SCRIPT ID=serverEventHandlersVBS LANGUAGE=vbscript RUNAT=Server>

Sub Button1_onclick()

End Sub

</SCRIPT>

Tra Sub Button1_onclick () e End Sub aggiungiamo la seguente riga di codice:

objRs1.open()

Lo stesso facciano per "Button2" aggiungendo la riga di codice tra Sub Button2_onclick() e End Sub

ObjRs2.open()/p> 

  <%

If objRs1.EOF And objRs2.EOF Then%>

<P>

<%Else%>

 

quando sia objRs1 e objRs2 hanno la proprietà EOF (End of file) impostata su True (sono cioè vuoti), nel caso in cui non siano vuoti allora verrà eseguito il seguente codice:

<TABLE align=center border=0 cellpadding=2 cellspacing=2 style="WIDTH: 100%" 

width=100% bgColor=slategray>

 <TR bgColor = white>

<TD colSpan=7 bgColor = slategray>

<DIV align=center><STRONG><FONT color=white face=Arial size=4>Risultato della ricerca Per

<%If objRs2.EOF Then%>

Citt&agrave;

<%Else%>

Stato

<%End If%>

 </FONT></STRONG></DIV>

che non è altro che l'intestazione della prima colonna e fa' apparire la dicitura "Risultato della ricerca per città" o "Risultato della ricerca per stato" a seconda di come sia stata impostata la ricerca. Anche in questo caso si rileva quale sia il recordset vuoto se è objRs2 allora è stata fatta una ricerca per città, se così non è allora la ricerca è stata effettuata per stato.

Dopo aver creato l'intestazione della tabella con le colonne appropriate secondo il seguente codice HTML di esempio:

<TR bgColor = slategray>

<TD bgColor = white>

<DIV align=center><STRONG><FONT face=Arial 

size=2>Cognome</FONT></STRONG></DIV><FONT face=Arial size=2></FONT></TD>

<TD bgColor = white>

<DIV align=center><STRONG><FONT face=Arial 

size=2>Nome</FONT></STRONG></DIV><FONT face=Arial></FONT></TD>

<TD bgColor = white>

<DIV align=center><STRONG><FONT face=Arial 

size=2>Indirizzo</FONT></STRONG></DIV><FONT face=Arial 

size=2></FONT></TD>

<TD bgColor = white>

<DIV align=center><STRONG><FONT face=Arial 

size=2>Citt&agrave;</FONT></STRONG></DIV><FONT face=Arial></FONT></TD>

<TD bgColor = white>

<DIV align=center><STRONG><FONT face=Arial 

size=2>Stato</FONT></STRONG></DIV><FONT face=Arial size=2></FONT></TD>

<TD bgColor = white>

<DIV align=center><STRONG><FONT face=Arial 

size=2>Zip</FONT></STRONG></DIV><FONT face=Arial></FONT></TD>

<TD bgColor = white>

<DIV align=center><STRONG><FONT face=Arial 

size=2 

style="BACKGROUND-COLOR: #ffffff">Telefono</FONT></STRONG></DIV><FONT 

face="" size=2 style="BACKGROUND-COLOR: #ffffff"></FONT></TD></TR>

<TR bgColor = white><FONT face="" size=2 

style="BACKGROUND-COLOR: #ffffff">

dobbiamo nuovamente rilevare quale sia il recordset aperto per indicare secondo le consuete modalità da quale recordset provengano i campi da inserire nella tabella:

<%If objRs2.EOF Then%> ?Se è vuoto il recordset relativo alla ricerca per stato

<%Do While Not objRs1.EOF%>

</FONT>

<TD bgColor = white><FONT face="" size=3 

style="BACKGROUND-COLOR: #ffffff">

<%=objRs1.fields.getValue ("au_lname")%>

?Per scrivere tra i tag <TD> e </TD> della tabella ci serviamo dell'istruzione ?Response.write che abbreviamo con "=" mentre per intercettare il valore del campo ?usiamo la proprietà Fields dell'oggetto objRs1 e del metodo getValue(NomeCampo)
?quindi avremo, per il campo un_lname objRs1.fields.getValue("au_lname")

</FONT></TD>

<TD bgColor = white><FONT face="" size=3>

<%=objRs1.fields.getValue ("au_fname")%>

</FONT></TD>

<TD bgColor = white><FONT face="" size=3>

<%=objRs1.fields.getValue ("address")%>

</FONT></TD>

<TD bgColor = white><FONT face="" size=3>

<%=objRs1.fields.getValue ("city")%>

</FONT></TD>

<TD bgColor = white><FONT face="" size=3>

<%=objRs1.fields.getValue ("state")%>

</FONT></TD>

<TD bgColor = white><FONT face="" size=3>

<%=objRs1.fields.getValue ("zip")%>

</FONT></TD>

<TD bgColor = white><FONT face="" size=3>

<%=objRs1.fields.getValue ("phone")%>

</FONT></TD></TR><FONT face="" size=3 >

<%objRs1.moveNext ()

Loop

objRs1.close ()%> 'Chiudo il recordset

<%ElseIf objRs1.EOF Then%> 'Se invece la richiesta è stata fatta per stato ?(quindi è objRs1 che è vuoto)

<%Do While Not objRs2.EOF %>

</FONT>

<TR bgColor = white>

<TD bgColor = white><FONT face="" size=3>

<%=objRs2.fields.getValue ("au_lname")%>

</FONT></TD>

<TD bgColor = white><FONT face="" size=3>

<%=objRs2.fields.getValue ("au_fname")%>

</FONT></TD>

<TD bgColor = white><FONT face="" size=3 >

<%=objRs2.fields.getValue ("address")%>

</FONT></TD>

<TD bgColor = white><FONT face="" size=3>

<%=objRs2.fields.getValue ("city")%>

</FONT></TD>

<TD bgColor = white><FONT face="" size=3>

<%=objRs2.fields.getValue ("state")%>

</FONT></TD>

<TD bgColor = white><FONT face="" size=3>

<%=objRs2.fields.getValue ("zip")%>

</FONT></TD>

<TD bgColor = white><FONT face="" size=3>

<%=objRs2.fields.getValue ("phone")%>

</FONT></TD></TR><FONT face="" size=3>

<%objRs2.moveNext ()

Loop

objRs2.close ()%>

</FONT>

</TABLE></P><FONT face="" size=3>

<%End If%>

<%End If%>

In questo modo abbiamo creato due tavole che si aprono in alternativa, popolandosi dei dati richiesti, in relazione alla richiesta fatta dall'utente con un'intestazione che evidenzia il tipo di richiesta fatta.

Potrete notare, durante la fase di collaudo, che questa pagina richiama sempre e comunque se stessa, a differenza del metodo tradizionale in cui i dati vengono passati dal form HTML ad una pagina ASP che elabora i dati e genera in modo dinamico la tabella.

Notate il codice posto all'inizio della pagina:

<FORM name=thisForm METHOD=post>

thisForm sta ovviamente a significare che il codice verrà elaborato su questa stessa pagina e non può essere diversamente, infatti se provaste a aggiungere action = newpage.asp un severo box vi avvertirebbe che questa parte di codice non può essere modificata; per cui, se doveste passare delle variabili da questa pagina ad un'altra dovreste servirvi o dei cookies, o dell'oggetto Session o dell'oggetto DTC Page Object, che sarà trattato in uno dei prossimi articoli.