Imposta Webstyler come Pagina Iniziale - Set Webstyler as Home page
Aggiungi Webstyler ai tuoi Preferiti

 

sponsor


Clicca il settore che ti interessa e di cui vuoi vedere la lista degli articoli

SISTEMI OPERATIVI

TREND WEB

MARKETING

WEB WRITING

WEB STYLE

WEB DESIGN

DATABASE

ASP

PHP

Clicca il settore che ti interessa e di cui vuoi vedere la lista dei tutorial

MARKETING

WEB DESIGN

ASP

PHP

Lista Faq

Lista News

FAQ

NEWS

Vota il sondaggio !!!

Cosa manca in questo portale
Sezione Download
Libreria immagini
Libreria icone
Script php - mysql
Interviste web designer
altro (commenta)
iscriviti alla newsletter per ricevere le novità del sito comodamente nella tua casella di posta elettronica

 iscrizione

 cancellazione

La ns galleria dedicata alle opere digitali

VISITA LA GALLERIA DIGITALE

Aiutaci a far crescere Webstyler , collaborare è facile e veloce

COLLABORA 

LOGIN

Clicca per visualizzare tutti i link recensiti

Aspcode
Wetalk
Gdesign
Lukeonweb
AZ
Portfolio
WebGuadagni
Manuali.net
Guarda tutti i link

Clicca per visionare la classifica completa !

Korat Ozturan32856

Fox Comunication4139

Cherry Bomb Press1249
Classifica completa

Chi siamo .:. Cosa facciamo .:. Cosa faremo .:.

CHI SIAMO

CONTATTACI

Inserite le parole da cercare - Il metodo utilizzato di default è l'and , cioé verrano selezionate le pagine che contengono tutti i valori da Voi inseriti

Comunità Virtuale - Entra nel ns Nuovo FORUM !! Oppure in CHAT !!

FORUM

CHAT

 
 
Data : 09-03-2003 Autore : Luca Ruggiero
Tipo : TutorialSettore : asp
Titolo : Creazione di un sondaggio completo
     

Si ringrazia LUKEONWEB per la gentile concessione dell'articolo


:-Introduzione-:

Un sondaggio è un sistema di statistiche di uso comune nella vita di tutti i giorni con cui si cerca di far luce sui gusti della gente in base ad un campione di votanti. Non ci troviamo di fronte ad un argomento di natura prettamente informatica, ma anche in questo ambito esistono strumenti, o meglio, idee tali da permetterne l'implementazione anche in formato elettronico.

:-Come funziona un sondaggio-:

I sondaggi sono composti da una domanda ed una serie di risposte che si escludono l'un l'altra vicendevolmente, è quindi possibile rispondere solo ad uno dei quesiti proposti e non è possibile farlo per più di un'unica volta.
In risposta a questa operazione interrogatoria avremo una schematizzazione del responso, ovvero il totale dei voti ed il totale per singola risposta scelta, in più possiamo utilizzare un sistema di calcolo percentuale per ogni singolo voto ed un grafico indicativo.

:-Perchè un sondaggio su di un sito-:

Chiunque gestisca un sito Web non può astenersi dal dover conoscere i gusti e le esigenze dei propri utenti, è quindi d'uopo utilizzare una serie di strumenti per orientarsi e rispondere al meglio, è nel proprio interesse, quindi, disporre di sistemi tipo contaclick per individuare le sezioni più visitate, e perchè no, anche di un sistema che richieda all'utente una serie di informazioni che tornino utili per conoscere "chi sono" gli utenti, in che fascia d'età rientrano, quale sezione del sito preferiscono ed altre utili notizie.

:-Struttura del progetto-:

Una volta definito lo strumento che andiamo ad utilizzare non ci resta che organizzarci in maniera tale da trasformare il tutto in un'interfaccia Web.
Abbiamo più di una possibilità per gestire graficamente questo sistema, possiamo utilizzare una serie di link o di bottoni, una casella select a discesa, oppure una serie di pulsanti di opzione (radio), questa è la soluzione che adotteremo, essendo anche la più utilizzata in rete, nonchè la più pratica, pulita e ordinata.

Per rendere il sondaggio attivo e operativo abbiamo bisogno di una struttura in grado di conservare in maniera permanente i voti sul server Web, la soluzione migliore è rappresentata dall'utilizzo di un database; altro strumento di back-office necessario è un file Asp che effettui la registrazione dei voti sul database e controlli che l'utente non voti una seconda volta, nè alla stessa risposta nè ad una diversa, memorizzando quindi un cookie temporaneo che blocchi l'utente qualora abbia già votato e glie lo impedisca fino ad una nuova connessione verso la pagina del sondaggio, in caso il voto sia il primo l'utente verrà reindirizzato verso un file con i risultati della votazione, altrimenti verso un file di errore testuale che informi l'utente che il voto può essere espresso una tantum.

La differenza che passa tra un sondaggio redatto da un intervistatore "umano" ed un qualsiasi strumento automatizzato è questa, al primo basterà non ripetere la domanda alle persone che hanno già risposto, ai secondi è invece demandato l'arduo compito di ricordarsi del computer votante, impresa meno semplice della prima, ma noi, nel nostro piccolo, faremo il possibile per riuscirci.

:-Struttura del database-:

Utilizzando Asp per la redazione del sondaggio la scelta del database cade quasi inevitabilmente su Ms Access (preferibilmente edizione 2000), la struttura è semplice, creiamo il file di database sondaggio.mdb ed un'unica tabella voti che andiamo ad aprire in Visualizzazione struttura.
Al suo interno creiamo solo due campi, id di tipo contatore che impostiamo come chiave primaria, e voti di tipo testo. Salviamo nella cartella scelta per il progetto e chiudiamo Access.

:-Struttura grafica del sondaggio-:

Come già detto in precedenza utilizzeremo una serie di pulsanti di opzione, la struttura grafica è flessibile e personalizzabile, attenzione solo a non modificare nomi e valori dei controlli del form, creiamo il file sondaggio.htm, io l'ho immaginato così:


<!-- .: nome file = sondaggio.htm :. -->
<html>
<head>
<title>Sondaggio - www.lukeonweb.net</title>
<style type="text/css">
h5 { color: #800000; font-family: Verdana; }
td, div { font-size: 12px; font-family: Verdana; }
a { color: #3366CC; text-decoration: None; }
a:hover { color: #FF0000; text-decoration: Underline; }
</style>
</head>
<body text="#003366">

<h5 align="center">.: Sondaggio :.</h5>

<br>

<table align="center" width="270" cellpadding="3" cellspacing="0" style="border: Solid 1px #003366;">
<form method="get" action="vota.asp">
<tr>
<td colspan="2" bgcolor="#003366" style="color: #FFFFFF;"><b>Cosa pensi di questo sondaggio?</b></td>
</tr>
<tr>
<td width="20"><input type="radio" name="vota" value="a" checked></td>
<td width="250">Bellissimo! Lo utilizzerò senz'altro!</td>
</tr>
<tr>
<td><input type="radio" name="vota" value="b"></td>
<td>Carino, fatto bene, nulla di più.</td>
</tr>
<tr>
<td><input type="radio" name="vota" value="c"></td>
<td>Non mi piace!!!</td>
</tr>
<tr>
<td><input type="radio" name="vota" value="d"></td>
<td>Non saprei...</td>
</tr>
<tr>
<td colspan="2" align="center"><br>
<input type="submit" value=" Vota "><br><br>
<a href="sondaggio.asp">Leggi i risultati</a>
</td>
</tr>
</form>
</table>

<br>

<div align="center"><a href="http://www.lukeonweb.net">www.lukeonweb.net</a></div>

</body>
</html>


Tralasciando le stilizzazioni e la formattazione del sondaggio, focalizziamo brevemente l'attenzione sulle fasi salienti del modulo, grazie al codice

<form method="get" action="vota.asp">

inviamo al server (utilizzando il metodo get) una richiesta di accodamento del valore del sondaggio, che si concretizza nel voto, mediante una QueryString che Asp processerà ed utilizzerà per registrare sul database il voto.
Trattando come controlli form i radio button, è ovvio che tutti i pulsanti abbiano, a livello di codice, la stessa proprietà name; la differenza tra un voto e l'altro viene valutata in base alla proprietà value a cui abbiamo, per praticità, assegnato i valori a b c ecc...

:-Inserimento e controllo dei voti-:

Come annunciato sarà un file Asp a controllare che il voto venga espresso una singola volta per sessione, disponiamolo nella cartella del progetto e chiamiamolo vota.asp, il codice che propongo di seguito, corredato da opportuni commenti, verrà ulteriormente esaminato successivamente:


<%@LANGUAGE = JScript%>
<%
// Reperisco dal modulo il voto espresso e lo memorizzo in una variabile di tipo QueryString
var vota = new String(Request.QueryString("vota"));

// La variabile "controlla" mi servirà in seguito per verificare se il cookie è presente
// e verificare se è già stato espresso o meno un voto
var controlla = Request.Cookies("CookieSondaggio");

// Setto la data di scadenza del cookie all'ora attuale, quindi il cookie morirà appena
// verrà terminata l'esecuzione del browser, dando fine alla sessione in corso
var scadenza = new Date();
Response.Cookies("CookieSondaggio") = scadenza.toLocaleString();

// Controllo se il cookie è "diverso da vuoto" ovvero se è già presente,
// se lo è rimando alla pagina "errore.htm"
if (controlla != "") {
Response.Redirect("errore.htm");
}
// Se il cookie non è presente viene effettuato l'inserimento sul database
// ed il reindirizzamento alla pagina di consultazione
else {
var Cn = new ActiveXObject("ADODB.Connection");
var Rs = new ActiveXObject("ADODB.Recordset");
var Sc = "driver={Microsoft Access Driver (*.mdb)};dbq=" + Server.MapPath("sondaggio.mdb");
Cn.Open(Sc);
Rs.Open("voti",Cn,3,3);
Rs.AddNew();
Rs("voto") = vota;
Rs.Update();
Rs.Close();
Cn.Close();
Response.Redirect("sondaggio.asp");
}
%>


I commenti utilizzati nel codice di esempio non lasciano tantissimo spazio ad ulteriori riflessioni, il ragionamento è semplice, una volta reperito dal modulo il voto espresso lo memorizzo in una variabile di tipo QueryString piuttosto che in una semplice variabile, in modo da non dover utilizzare una serie di if e da non dover ripetere il codice tante volte quanto i possibili voti, a questo punto entrano in scena i cookie.
Ho bisogno di verificare innanzi tutto che il cookie non sia presente, se così non fosse allora rimando al file "errore.htm" che riporterà semplicemente un messaggio del tipo

<div align="center">Attenzione: non puoi votare più di una volta!</div>

ed un link che riporti da qualche parte... se invece il cookie non è presente lo creo, effettuo l'inserimento sul database e reindirizzo l'utente alla pagina sondaggio.asp per leggere i voti e le relative statistiche.

Sarà possibile effettuare una nuova votazione semplicemente chiudendo il browser e riconnettendosi alla pagina del sondaggio, non avendo specificato nella creazione del cookie alcun valore per la proprietà Expires si tratterà di un cookie temporaneo.

:-Stampa a video dei risultati-:

Possiamo adesso dire di essere giunti a metà dell'opera, inizia da ora la parte più difficile, ma se vogliamo anche la più divertente del sondaggio, la stampa a video dei voti, non dobbiamo far altro che estrarre dal database i vari valori memorizzati nel campo "voti" e manipolarli in maniera tale da utilizzarli per fornire il miglior numero di statistiche, dal totale dei voti per ogni singola risposta, alla percentuale corrispondente al totale dei voti per singola risposta, fino a generare un grafico a barre che offra un buon colpo d'occhio per intuire quali preferenze sono state espresse per la maggiore.



<%@LANGUAGE = JScript%>
<%
// Mi connetto al database ed apro la connessione
var Cn = new ActiveXObject("ADODB.Connection");
var Sc = "driver={Microsoft Access Driver (*.mdb)};dbq=" + Server.MapPath("sondaggio.mdb");
Cn.Open(Sc);

// Conto tutti i record il cui il valore è a, b, c ecc...
var a_Sql = Cn.Execute("SELECT COUNT(*) AS voto FROM voti WHERE voto = 'a'");
var b_Sql = Cn.Execute("SELECT COUNT(*) AS voto FROM voti WHERE voto = 'b'");
var c_Sql = Cn.Execute("SELECT COUNT(*) AS voto FROM voti WHERE voto = 'c'");
var d_Sql = Cn.Execute("SELECT COUNT(*) AS voto FROM voti WHERE voto = 'd'");

// Conto il totale dei record, ovvero tutti i voti espressi dagli utenti
var TOT_Sql = Cn.Execute("SELECT COUNT(*) AS voto FROM voti WHERE voto = voto");

// Calcolo il valore percentuale di ogni singolo voto
var a_Perc = Math.round((a_Sql("voto") / TOT_Sql("voto")) * 100);
var b_Perc = Math.round((b_Sql("voto") / TOT_Sql("voto")) * 100);
var c_Perc = Math.round((c_Sql("voto") / TOT_Sql("voto")) * 100);
var d_Perc = Math.round((d_Sql("voto") / TOT_Sql("voto")) * 100);
%>
<html>
<head>
<title>Sondaggio - www.lukeonweb.net</title>
<style type="text/css">
td, div { font-size: 12px; font-family: Verdana; }
a { color: #3366CC; text-decoration: None; }
a:hover { color: #FF0000; text-decoration: Underline; }
</style>
</head>
<body text="#003366">

<table width="550" align="center" cellpadding="5" cellspacing="0" style="border: Solid 1px #003366;">
<tr>
<td colspan="4"><b>Risultati delle votazioni</b></td>
</tr>
<tr>
<td width="250">Bellissimo! Lo utilizzerò senz'altro!</td>
<!-- Stampo il totale dei voti per singola voce -->
<td width="50"><%=a_Sql("voto")%> voti</td>
<!-- Stampo il valore percentuale in cifre numeriche, se non è stato espresso alcun voto scrivo zero (0) -->
<td width="50"><%a_Sql("voto") == "" ? Response.Write("0") : Response.Write(a_Perc)%>%</td>
<td width="200">
<!-- Costruisco il grafico sfruttando il valore percentuale calcolato in precedenza per definire la larghezza -->
<div style="background: #003366; width: <%a_Sql("voto") == "" ? Response.Write("0") : Response.Write(a_Perc)%>%;">
 
</div>
</td>
</tr>
<tr>
<td>Carino, fatto bene, nulla di più.</td>
<td><%=b_Sql("voto")%> voti</td>
<td><%b_Sql("voto") == "" ? Response.Write("0") : Response.Write(b_Perc)%>%</td>
<td>
<div style="background: #003366; width: <%b_Sql("voto") == "" ? Response.Write("0") : Response.Write(b_Perc)%>%;">
 
</div>
</td>
</tr>
<tr>
<td>Non mi piace!</td>
<td><%=c_Sql("voto")%> voti</td>
<td><%c_Sql("voto") == "" ? Response.Write("0") : Response.Write(c_Perc)%>%</td>
<td>
<div style="background: #003366; width: <%c_Sql("voto") == "" ? Response.Write("0") : Response.Write(c_Perc)%>%;">
 
</div>
</td>
</tr>
<tr>
<td>Non saprei...</td>
<td><%=d_Sql("voto")%> voti</td>
<td><%d_Sql("voto") == "" ? Response.Write("0") : Response.Write(d_Perc)%>%</td>
<td>
<div style="background: #003366; width: <%d_Sql("voto") == "" ? Response.Write("0") : Response.Write(d_Perc)%>%;">
 
</div>
</td>
</tr>
<tr>
<td colspan="4"><b>Sono stati espressi <%=TOT_Sql("voto")%> voti</b></td>
</tr>
</table>

<br>

<div align="center"><a href="http://www.lukeonweb.net">www.lukeonweb.net</a></div>

<!-- Chiudo la connessione -->
</body>
</html>
<%Cn.Close()%>



Ad una prima lettura il codice, per quanto semplice e ben formattato, potrebbe lasciare il lettore di fronte a qualche perplessità, esaminiamone dunque le fasi salienti. In apertura del file effettuiamo la connessione al database ed effettuiamo alcune operazioni state commentate all'interno del codice stesso, la prima consiste nel contare i record che sono stati valorizzati differentemente in base alla scelta effettuata, eseguiamo quindi una stringa Sql che gestisca quanto detto

var a_Sql = Cn.Execute("SELECT COUNT(*) AS voto FROM voti WHERE voto = 'a'");

Contiamo dunque tutte le occorrenze del valore a nel campo voto, effettuiamo quindi l'operazione per tutti i possibili valori di ritorno, poi facciamo la stessa cosa per contare tutti i record presenti, indipendentemente dal loro valore, quindi non ne specificheremo nessuno

var TOT_Sql = Cn.Execute("SELECT COUNT(*) AS voto FROM voti WHERE voto = voto");

Passo successivo il calcolo del valore percentuale per singolo voto, l'espressione matematicha è semplice:

(totale_per_voto / totale_voti) * 100

Messa in questi termini si otterrebbe un risultato con un eccesso di precisione, infatti otterremmo un valore decimale con svariate cifre dopo la virgola. Per ovviare a questo utilizziamo la funzione matematica Math per arrotondare a numero intero, c'è una piccola perdita di precisione, infatti se ci fossero solo tre voti registrati sul database, uno per la prima scelta, uno per la seconda ed uno per la terza, otterremo un valore percentuale del 33% per opzione, il cui totale è 99% e non 100%, ma credo sia molto meglio che stampare a video un valore tipo 33,33333333% !!!

Utilizziamo quindi l'espressione

var a_Perc = Math.round((a_Sql("voto") / TOT_Sql("voto")) * 100);

e la ripetiamo per tutte le possibili risposte del sondaggio.

Passiamo alla stampa a video dei voti vera e propria, la formattazione dello schema è personalizzabile, io ho scelto di utilizzare le tabelle per rendere un maggior senso di ordine e chiarezza nell'esposizione dei risultati, per stampare a video il totale di voti per singola risposta utilizzerò l'espressione

<td width="50"><%=a_Sql("voto")%>voti</td>
Passo poi alla definizione della percentuale per quel voto

<td width="50"><%a_Sql("voto") == "" ? Response.Write("0") : Response.Write(a_Perc)%>%</td>

questo codice corrisponde ad una routine if ... else scritta in maniera più snella ed adatta ad essere riportabile su di una sola riga, è lo stesso che scrivere


if (a_Sql("voto") == "") {
Response.Write("0");
}
else {
Response.Write(a_Perc);
}


Ultimo passo per completare l'opera è quello della creazione del grafico, è possibile utilizzare un'immagine ad hoc, io ho utilizzato un semplice layer div a cui ho associato uno stile, per la precisione un colore di sfondo e la larghezza, valore questo che imposto dinamicamente in percentuale, sfruttando lo stesso valore che stampo a video come visto in precedenza, vediamo come:


<div style="background: #003366; width: <%a_Sql("voto") == "" ? Response.Write("0") : Response.Write(a_Perc)%>%;">
 
</div>


Ripetiamo le stesse operazioni per stampare a video i diversi risultati delle votazioni, avendo cura di specificare i giusti riferimenti ai costrutti Sql che abbiamo analizzato all'inizio del paragrafo.

:-Conclusioni-:

Siamo giunti al termine di quest'avventura, il sondaggio è ancora migliorabile dal punto di vista grafico, in conclusione del paragrafo precedente si è accennato alla possibilità di utilizzare un file immagine per rappresentare il grafico a barre, il cidice per effettuare questa operazione è il seguente:


<img src="NomeFile.gif" width="<%a_Sql("voto") == "" ? Response.Write("0") : Response.Write(a_Perc)%>%">


Possiamo inoltre incrementare le domande del sondaggio all'infinito (non prendetemi alla lettera!), non è necessario modificare il file vota.asp, come già spiegato nel paragrafo che lo dettaglia, bisognerà solo implementare la struttura grafica di input ed il file sondaggio.asp per stampare a video i risultati dei voti a - b - c - ... - z!!!

torna alla home page

 

v.2.0 - © Copyright 2002-06 Webstyler.it . Tutti i diritti sono riservati.
E' vietata la riproduzione anche parziale

Risoluzione ottimale 1024 x 768 

| info@webstyler.it | webmaster@webstyler.it |