|
REALIZZARE UN SONDAGGIO (versione base)
Scopo di
questa pagina è spiegare come realizzare un sondaggio
simile a quello presente nell'homepage del sito AmicoPc.
Sono disponibili tre versioni: la versione 'base' è
la più semplice soprattutto per quanto riguarda
la comprensione del codice.
Nella versione 'intermedia'
il codice è leggermente più complesso
ma decisamente più performante nell'esecuzione.
L'ultima versione ('avanzata')
invece consente una completa gestione del sondaggio
direttamente online: sarà così possibile
modificare il sondaggio, farne partire uno nuovo, modificare
le opzioni disponibili...
Il funzionamento di questo sondaggio è abbastanza semplice:
vi è per prima cosa un form che contiene le possibili
risposte (nell’esempio qui riportato vi sono cinque
opzioni). Premendo il tasto ‘Invia’ i dati prelevati
dal form, ovvero la risposta al sondaggio, sono memorizzati
in un database. Successivamente si apre una pagina che
preleva le informazioni inserite nel database e ne crea
una visualizzazione grafica.
Per far questo verranno
utilizzati due file:
- vota.asp, che
si occupa di aggiornare il database
- report.asp, che visualizza le percentuali di voto
e il relativo grafico
Nel nostro esempio tutti
i file sono memorizzati in un'unica cartella
SONDAGGIO.MDB
I
dati raccolti con il sondaggio sono memorizzati in un
database di Access, il quale dovrà essere strutturato
nel seguente modo:
-
il database deve chiamarsi 'sondaggio.mdb'
- deve contenere un'unica tabella, chiamata 'sondaggio'
-
la tabella deve contenere un solo campo di testo chiamato
'vota'
- il database deve avere permessi di lettura e scrittura
Quando
viene selezionata una risposta e viene data conferma,
viene aggiunto un record alla relativa tabella contenente
la parola 'primo' se è stata scelta la prima opzione,
la parola 'secondo' nel caso sia sia scelta la seconda
opzione e così via.
FORM
Per quanto riguarda il
form è sufficiente decidere il punto dove posizionarlo
e copiarvi quanto segue:
<form
method="post" action="vota.asp">
<tr bgcolor="#FFFFFF" valign="top">
<td height="42">
<div align="center"><font size="1"
face="Verdana, Arial, Helvetica, sans-serif"><b><font
color="#CC0000">Scrivere qui la domanda
del sondaggio. Nel nostro esempio è Come giudichi
i servizi offerti da AmicoPc.com?<br></font></b></font>
</div></td></tr>
<tr bgcolor="#FFFFFF"><td
height="110">
<input type="radio"
name="vota" value="primo">Ottimi<br>
<input type="radio"
name="vota" value="secondo">Buoni<br>
<input type="radio" name="vota"
value="terzo">Sufficienti<br>
<input type="radio" name="vota"
value="quarto">Discreti<br>
<input type="radio" name="vota"
value="quinto">Pessimi
</td></tr> |
Dove Ottimi, Buoni...
sono le possibili risposte al sondaggio.
Naturalmente potete modificare il codice a piacere;
l'unica cosa che raccomando è di non variare il valore
dei campi 'radio' che devono essere 'primo', 'secondo',
'terzo', 'quarto' e 'quinto'.
A questo punto creiamo
il pulsante 'Invia', ovvero una piccola immagine che
si chiama 'vota.gif' e che, nel nostro esempio, si trova
nella stessa cartella.
Se tale immagine si trova in una posizione differente
è sufficiente modificare la parte 'image src'
<tr
bgcolor="#FFFFFF"><td height="32">
<div align="center">
<input type=image src="vota.gif" alt="Vota!"
border="0" name="Vota!" width="40"
height="20">
</div></td></tr>
</form> |
VOTA.ASP
Dopo
aver selezionato una delle possibili risposte e aver
premuto il pulsante 'Invia', la scelta effettuata viene
memorizzata nel nostro database grazie al file VOTA.ASP
Ecco come funziona.
Dal
form precedente richiedo il valore del modulo 'Vota'
e lo pongo nella variabile 'Vota'
<%
vota=request.form("vota")
|
A
questo punto creiamo la connessione al database e vi
inseriamo il valore contenuto nella variabile. Valore
che varia in base alla scelta effettuata dall'utente.
Se
tale valore è 'primo' significa che nel modulo del sondaggio
è stata selezionata la prima opzione, quindi eseguo
al database verrà aggiunta la parola primo.
Allo stesso modo per tutte le altre opzioni.
Creiamo
quindi la connessione al database
Dim
conn
Set conn = Server.CreateObject("ADODB.Connection")
conn.Open "DRIVER={Microsoft Access Driver (*.mdb)};DBQ="
& server.MapPath("database/sondaggio.mdb")
sql = "SELECT * FROM sondaggio"
Dim rs
Set rs = Server.CreateObject("ADODB.Recordset")
rs.Open sql, conn, 3, 3 |
A questo punto aggiungo
un nuovo record alla tabella 'sondaggio' e, nel campo
vota, inserisco il valore della variabile vota
RS.AddNew
rs.Fields("vota")=vota |
Aggiorno il database
e chiudo la connessione
|
rs.close
Set RS = Nothing
conn.close
Set conn=Nothing
|
A questo punto facciamo
in modo che si apra la pagina 'report.asp' in modo da
vedere i risultati del sondaggio
response.redirect("report.asp")
end if
%> |
Un'ultima cosa: cliccando
sul tasto 'vota' senza aver selezionato nessuna opzione,
viene richiamato comunque il file 'vota.asp'.
In questo caso la variabile 'vota' non ha nessun valore:
quindi, in questo caso, evitiamo qualsiasi scrittura
nel database ma carichiamo subito la pagina 'report.asp'.
In questo modo, per visualizzare i risultati del sondaggio
(ovvero la pagina report.asp) è sufficiente premere
il tasto 'vota'.
If vota=""
then
response.redirect("report.asp")
end if
%> |
REPORT.ASP
Una volta aggiornato il
database occorre fare in modo di visualizzare il numero
di voti totali, parziali, le percentuali di voti per
ogni singola opzione e un grafico a barre.
Il codice da inserire
nella pagina è il seguente
Mi connetto al database
'sondaggio.mdb'.
Se la cartella di memorizzazione del database è diversa
da quella del file report.asp, modificare il campo server.mappath("sondaggio.mdb")
<%
Dim Conn
Set Conn = Server.CreateObject("ADODB.Connection")
conn.Open "driver={Microsoft Access Driver (*.mdb)};dbq="
& server.mappath("database/sondaggio.mdb")
Dim rs
Set rs = Server.CreateObject("ADODB.Recordset")
|
Conto il numero di record
che contengono la parola 'primo' ovvero conto il numero
di volte che è stata scelta la prima opzione di risposta
al sondaggio.
| rs.Open
"select COUNT(*) from sondaggio where vota
like 'primo'", conn |
Creo una variabile che
chiamo 'prima' e vi memorizzo il risultato appena ottenuto
A questo punto voglio
contare il numero di campi che contengono la parola
'secondo' che, come già detto, corrispondono al numero
di volte che è stata scelta la seconda risposta al sondaggio.
Set
rs = Server.CreateObject("ADODB.Recordset")
rs.Open "select COUNT(*) from sondaggio where vota
like 'secondo'", conn |
e memorizzo il numero
ottenuto nella variabile chiamata 'seconda'
Dim
seconda
seconda=rs(0) |
Ripeto lo stesso procedimento
per i record contenenti la parola 'terzo'
Set
rs = Server.CreateObject("ADODB.Recordset")
rs.Open "select COUNT(*) from sondaggio where vota
like 'terzo'", conn
Dim terza
terza=rs(0) |
Ugualmente per quelli
che contengono la parola 'quarto'
Set
rs = Server.CreateObject("ADODB.Recordset")
rs.Open "select COUNT(*) from sondaggio where
vota like 'quarto'", conn
Dim quarta
quarta=rs(0) |
e per quelli che contengono
la parola 'quinto'
Set
rs = Server.CreateObject("ADODB.Recordset")
rs.Open "select COUNT(*) from sondaggio where
vota like 'quinto'", conn
Dim quinta
quinta=rs(0) |
Fatto questo la connessione
con il database non mi server più. Quindi scriveremo
rs.close
set rs=nothing
conn.close
set conn=nothing |
A questo punto conto
il numero di voti totali e memorizzo il risultato ottenuto
nella variabile 'totale'
| totale=
(prima + seconda + terza + quarta + quinta) |
Calcoliamo ora le percentuali,
ovvero il numero di volte volte che è stata scelta la
prima risposta (valore memorizzato nella variabile 'prima')
diviso il numero di voti totali (valore memorizzato
nella variabile 'totale'); ugualmente facciamo lo stesso
calcolo per la seconda risposta (numero voti relativi
diviso numero voti toatali, ovvero la variabile 'seconda'
diviso la variabile 'totale') e per tutte le altre.
I risultati così ottenuti vengono memorizzati rispettivamente
nelle variabili 'prima2', 'seconda2', 'terza2', 'quarta2'
e 'quinta2'.
prima2=
FormatPercent((prima / totale), 1)
seconda2= FormatPercent((seconda / totale), 1)
terza2= FormatPercent((terza / totale), 1)
quarta2= FormatPercent((quarta / totale), 1)
quinta2= FormatPercent((quinta / totale), 1)
|
Con la formula appena
utilizzata le percentuali hanno una sola cifra decimale.
Se si volesse aumentare la precisione è possibile aumentare
il numero di cifre decimali visualizzate semplicemente
modificando il numero 1 che si trova al termine della
formula stessa.
Se volessimo visualizzare la percentuale approssimata
a tre cifre bisognerebbe scrivere
| prima2=
FormatPercent((prima / totale), 3) |
A questo punto abbiamo
tutti i dati necessari: il numero di voti totali (memorizzati
nella variabile 'totale'), il numero di voti relativi
(memorizzati nella variabile 'prima', 'seconda'...)
i valori percentuali ('prima2', 'seconda2'...)
Manca solo un grafico
a barre orizzontali che visualizzi i risultati ottenuti.
Tale barre devono modificare la loro dimensione in base
valore della percentuale che rappresentano: pertanto
il metodo più semplice è quello di utilizzare la percentuale
come larghezza delle stesse barre. Dato però che la
larghezza in pixel di un'immagine può essere espressa
solo in numeri interi, dobbiamo togliere alla percentuale
eventuali cifre decimali.
Pertanto richiamiamo i valori memorizzati nelle variabili
'prima2, 'seconda2'... e li arrotondiamo al numero intero
più prossimo.
Per cui partendo da una percentuale del 50,2% ottengo
il numero 50; da una percentuale del 19,9% otterrò il
valore 20.
Dato però che le barre così ottenute hanno dimensioni
un po' troppo ridotte (la larghezza massima sarà evidentemente
di 100 pixel), prendo i valori così ottenuti e li moltiplico
per due.
Tali valori sono poi memorizzati nelle variabili 'prima3',
'seconda3', 'terza3' e così via.
prima3
= (Mid( prima2, 1, 2))*2
seconda3 = (Mid( seconda2, 1, 2))*2
terza3 = (Mid( terza2, 1, 2))*2
quarta3 = (Mid( quarta2, 1, 2))*2
quinta3 = (Mid( quinta2, 1, 2))*2
%> |
A questo punto abbiamo
caricato i dati e li abbiamo memorizzati in alcune variabili:
ora non ci resta che visualizzarli.
Per una più ordinata
visualizzazione dei risultati creiamo una tabella.
<p><font
size="2" face="Verdana" color="#CC0000"><b>Come
giudichi i servizi offerti da AmicoPc.com? </b></font></p>
<div align="left">
<table border="0" cellpadding="0" cellspacing="0"
width="484" height="38">
<tr>
<td width="2" height="21"></td>
<td width="72" height="21"></td>
<td width="102" height="21">
<p align="center"><font size="2" face="Verdana"><i>Percentuale</i></font></td>
<td width="102" height="21">
<p align="center"><font size="2" face="Verdana"><i>N°
voti</i></font></td>
<td width="200" height="21"></td>
</tr>
<tr>
<td width="2" height="0"></td>
<td width="72" height="0"></td>
<td height="0" align="center" colspan="2" width="202"></td>
<td width="200" height="0"></td>
</tr>
<tr>
<td width="2" height="25"></td>
<td width="72" height="25"><font face="Verdana"
size="2"><b>Ottimi</b></font></td>
<td width="102" height="25" align="center"><font
face="Verdana" size="2"> |
A questo punto visualizziamo
la percentuale relativa alla prima opzione di risposta.
Tale valore lo abbiamo precedentemente memorizzato nella
variabile 'prima2'. Pertanto non rimane che mostrare
il contenuto di tale variabile
Continuiamo con il codice
html normale
</font></td>
<td width="102" height="25" align="center"><font
face="Verdana" size="2">
|
Visualizziamo ora il
numero di voti ricevuti dalla prima opzione
Infine mostriamo la barra
colorata, ovvero l'immagine 'sondaggio1.gif', anch'essa
posizionata nella stessa cartella
</font></td>
<td width="200" height="25"><img border="0"
src="sondaggio1.gif" |
Come già anticipato la
larghezza di tale immagine è definita in base alla percentuale
e tale valore è memorizzato nella variabile 'prima3'.
Quindi avremo
mentre l'altezza è pari
a dieci pixel
Ripetiamo lo stesso procedimento
per le altre quattro opzioni.
Nel codice seguente sono evidenziate in grassetto le
parti in ASP, ovvero i punti in cui vogliamo che venga
visualizzato il contenuto delle variabili stesse.
<tr>
<td width="2" height="25"></td>
<td width="72" height="25"><font face="Verdana"
size="2"><b>Buoni</b></font></td>
<td width="102" height="25" align="center"><font
face="Verdana" size="2"><%= seconda2%></font></td>
<td width="102" height="25" align="center"><font
face="Verdana" size="2"><%= seconda%></font></td>
<td width="200" height="25"><img border="0"
src="sondaggio5.gif" width="<%= seconda3%>"
height="10"></td>
</tr>
<tr>
<td width="2" height="25"></td>
<td width="72" height="25"><font face="Verdana"
size="2"><b>Sufficienti</b></font></td>
<td width="102" height="25" align="center"><font
face="Verdana" size="2"><%= terza2
%></font></td>
<td width="102" height="25" align="center"><font
face="Verdana" size="2"><%= terza
%></font></td>
<td width="200" height="25"><img border="0"
src="sondaggio3.gif" width="<%= terza3%>"
height="10"></td>
</tr>
<tr>
<td width="2" height="25"></td>
<td width="72" height="25"><font face="Verdana"
size="2"><b>Mediocri</b></font></td>
<td width="102" height="25" align="center"><font
face="Verdana" size="2"><%= quarta2%></font></td>
<td width="102" height="25" align="center"><font
face="Verdana" size="2"><%= quarta%>
</font></td>
<td width="200" height="25"><img border="0"
src="sondaggio4.gif" width="<%= quarta3%>"
height="10"></td>
</tr>
<tr>
<td width="2" height="25"></td>
<td width="72" height="25"><font face="Verdana"
size="2"><b>Pessimi</b></font></td>
<td width="102" height="25" align="center"><font
face="Verdana" size="2"><%= quinta2%></font></td>
<td width="102" height="25" align="center"><font
face="Verdana" size="2"><%= quinta%>
</font></td>
<td width="200" height="25"><img border="0"
src="sondaggio2.gif" width="<%= quinta3%>"
height="10"></td>
</tr>
<tr>
<td width="2" height="25"></td>
<td width="72" height="25"></td>
<td height="25" colspan="2" width="202"></td>
<td width="200" height="25"></td>
</tr>
<tr>
<td width="2" height="25"></td>
<td width="72" height="25" bgcolor="#EFEFEF"><font
face="Verdana" size="2">Voti
totali:</font></td>
<td width="102" height="25" bgcolor="#EFEFEF"><font
face="Verdana" size="2" color="#CC0000"><b>
<p align="center"><%=totale%></b></font></td>
<td width="102" height="25"></td>
<td width="200" height="25"></td>
</tr>
</table>
</div> |
Naturalmente non è obbligatorio
utilizzare il codice html qui riportato ma è possibile
modificarlo piacere in modo da adattarlo alle proprie
pagine.
L'unica cosa da ricordare è che, nel punto in cui si
desidera visualizzare il contenuto di una qualsiasi
variabile, è necessario scrivere
<%= NOME_VARIABILE
%>
|
