Programmazione » ASP » Tutorial ASP - Base

a- a+

Cambiare "pelle" al proprio sito web

Introduzione

Il principio su cui si basa questo articolo è quello di poter far scegliere ad un visitatore, tramite un apposito form in una (la pagina iniziale) o in tutte le pagine del sito, quale stile visualizzare.

Questi stili possono essere contenuti in un apposito foglio di stile (CSS) o possono addirittura variare proprio graficamente con immagini diverse. E ancora si può far in modo che il visitatore visualizzi lo stesso tema per tutto il tempo che trascorre sul sito oppure vita natural durante per ogni visita che fa al vostro sito. Cercherò di spiegare tutte le vie possibili (o, almeno, quelle che finora ho trovato io), ma nulla vi vieta di utilizzarle congiuntamente, come ho fatto io per questo sito (1).

Operazioni preliminari

Ho accennato poco sopra che è possibile fare in modo che il visitatore visualizzi lo stesso tema per tutta la sua permanenza sul sito, ma una volta che ci ritornerà troverà sempre il vostro tema di default, oppure è possibile fare in modo che la sua scelta sul tema da visualizzare sia ricordata dal vostro browser e la mostri ad ogni suo accesso al vostro sito.

Se decidiamo che il visitatore debba sempre e comunque operare una scelta diversa ad ogni visita, possiamo utilizzare le cosiddette variabili di sessione. Se, viceversa, vogliamo che la sua scelta sia ricordata per un lungo lasso di tempo, ammettiamo un anno dalla sua prima visita, allora utilizzeremo i cookies. Se abbiamo deciso di utilizzare le variabili di sessione, allora dovremo scrivere in ogni pagina del nostro sito, ancor prima del tag <HTML>:

Listato 1 – Configurazione delle variabili di sessione

<%
if Session("varTheme") = "" Then
Session("varTheme") = "default"
strTheme = Session("varTheme")
End if
%>

Questa porzione di codice sta a significare che prima dell'elaborazione della pagina il server fa un controllo della variabile di sessione varTheme.

Se questa variabile esiste, allora questo codice è superfluo e non verrà eseguito, mantenendo nella variabile di sessione il valore che aveva in precedenza; se invece non esiste verrà assegnato alla variabile di sessione il valore "default" , che sta ad indicare appunto il tema di default del vostro sito. Qualora invece decidessimo di utilizzare i cookies, allora il codice da inserire nella parte superiore delle nostre pagine ASP sarà questo:

Listato 2 – Esempio di configurazione tramite cookies

<%
if Request.Cookies("UserTheme").Haskeys Then
   strTheme = Request.Cookies("UserTheme")
Else
   strTheme = "default"
End if
%>

Anche questa porzione di codice segue la stessa logica di quella precedente, solo che stavolta il server accerta l'esistenza di un cookie riferito ad una precedente visita e solo se non lo trova imposta come tema del sito quello di default.

Personalmente, nella realizzazione dell'esempio che trovate sul mio sito personale ho optato per una combinazione delle due cose: ho fatto fare prima un controllo sui cookies; se esiste il cookie assumo quel valore, altrimenti il valore lo memorizzo in una variabile di sessione. Il codice ASP per questa soluzione intermedia è:

Listato 3 – Esempio di utilizzo misto di variabili di sessione e cookies

<%
if Request.Cookies("UserTheme").Haskeys Then
   strTheme = Request.Cookies("UserTheme")
Else
   if Session("varTheme") = "" Then
     Session("varTheme") = "default"
    strTheme = Session("varTheme")
   End if
End if
%>

Naturalmente, anche il form di input cambia in rapporto alle due possibilità.

L'input

Per quanto riguarda l'input, si può utilizzare la via del link testuale o grafico oppure quella del form. Se utilizziamo la via del link sarebbe opportuno dare un nome ad ogni skin del sito.

È importante che ve ne sia una di default (che chiameremo appunto "default") per coloro che visitano il vostro sito per la prima volta. Ad esempio, per il tema di default potremmo avere il link:

<a href="skin.asp?tema=default">Default</a>

Per aggiungere altre skin basta cambiare default col nome del nuovo tema sia all'interno del tag <a> che nella scritta che verrà visualizzata dal browser.
Se invece intendiamo usare il metodo del form, allora il nostro codice HTML sarà:

Se invece intendiamo usare il metodo del form, allora il nostro codice HTML sarà:

<div align="center">
<form action="skin.asp" method="post">
<select name="tema" size="1">
<option value="default" selected>Default</option>
<option value="primo_tema">Primo Tema</option>
<option value="secondo_tema">Secondo Tema</option>

... ecc ...

</select><br>
<input type="submit" value="Cambia il tema!">
</form>
</div>

Inoltre, se abbiamo deciso di utilizzare i cookies, basta aggiungere una riga all'interno del tag <form>:

<input type="checkbox" name="UserTheme" value="yes" checked> Ricorda la mia scelta in futuro

Naturalmente il codice HTML del link, così come quello del form vanno aggiornati nel momento in cui aggiungete nuove skin al vostro sito. Pertanto, nella seconda parte di questo articolo cercheremo di mettere su un sistema dinamico che richiama le skin.

Questo è tutto per quanto riguarda l'input. Una sola annotazine sul modo in cui sono passati i dati alla pagina skin.asp: nel caso del link, il dato sarà passato attraverso una querystring; nel caso del form, invece, col metodo post.

Questa differenza deve essere considerata quando si va a scrivere il codice della pagina skin.asp, che andiamo subito a vedere.

La pagina skin.asp

La pagina principale, da cui parte tutto il funzionamento delle skin, sarà chiamata skin.asp e conterrà il seguente codice (nel caso del solo utilizzo della variabile di sessione). Analizziamo dapprima il caso del form:

Listato 4 – Caso di scelta della skin tramite form

<%
dim theme
if request.form("tema") = "" then
   theme = "default"
else
   theme = request.form("tema")
end if
session("vartheme") = theme
response.redirect(request.servervariables("http_referer"))
%>

Vediamo un po’ di capirne il funzionamento.

Alla riga 2 dichiariamo la variabile theme e le assegniamo il valore derivante dal form o, quantomeno, il valore di default (righe da 3 a 7).

Infine assegniamo questo valore alla variabile di sessione Session("varTheme") ed effettuiamo il redirect alla pagina che ha passato l'input allo script.

Per quanto riguarda il caso del link, dobbiamo solo precisare che la richiesta avviene tramite una querystring, pertanto la nostra pagina skin.asp diventa:

Listato 5 – Caso di scelta della skin tramite link

<%
dim theme
if request.querystring("tema") = "" then
   theme = "default"
else
   theme = request.querystring("tema")
end if
session("vartheme") = theme
response.redirect(request.servervariables("http_referer"))
%>

Non credo che ci sia bisogno di ulteriori commenti, dato che il funzionamento dello script non cambia.

Passiamo ora al caso in cui si voglia utilizzare un cookie per far ricordare al browser la scelta del visitatore. Il codice in tal caso diventerà:

Listato 6 – Caso di scelta del cookie come mezzo di memorizzazione

<%
UserTheme = Request.Form("UserTheme")
if Usertheme = "yes" Then
   Response.Cookies("UserTheme") = Request.Form("Tema")
   Response.Cookies("UserTheme").Expires = Date()+365
Else
   Dim Theme
   if request.form("Tema") = "" then
     Theme = "default"
   Else
     Theme = request.form("Tema")
   end if
   Session("varTheme") = Theme
End if
response.redirect(request.servervariables("HTTP_Referer"))
%>

Analizziamo solo le prime righe; il funzionamento del resto dello script è identico a quello visto precedentemente.

La riga 2 assegna alla variabile UserTheme la scelta del visitatore di usare o meno il cookie.

Se il nostro visitatore ha risposto "sì" , cioè ha spuntato la checkbox del form (riga 3), allora il cookie viene creato (riga 4) e gli viene assegnata come scadenza un anno a partire da questa visita (riga 5). Altrimenti entrerà in gioco la variabile di sessione e il visitatore visualizzerà la veste grafica scelta solo per il tempo della sua visita.

Da notare che questo codice è stato fatto su misura per il form, in quanto un form può dare la possibilità all'utente di scegliere se utilizzare il cookie o meno. Nulla vieta però di non farlo scegliere e di utilizzare il link testuale e la pagina skin.asp che crea automaticamente il cookie; la scelta dipende solo da voi.

La grafica non è ancora cambiata!

Ci arrivo subito.

Vi ho prima consigliato di dare un nome ad ogni tema del vostro sito per un motivo ben preciso. Farò un discorso solo sul tema di default, per gli altri basterà cambiare i nomi di file o cartelle col nome del tema.

Vediamo innanzitutto il caso dell'applicazione grafica mediante un foglio di stile (CSS), che va molto bene per chi gestisce un sito prevalentemente tabellare facendo ricorso a poche immagini.

Creiamo un foglio di stile CSS esterno e diamogli il nome default.css.

All'interno di questo file andremo a definire gli stili per il testo o per vari tipi di testo (ad esempio, titoli, sottotitoli, link, testo normale, ecc.) e per le tabelle.

Dopodichè duplichiamo questo file e lo rinominiamo in primo_tema.css, dove andremo a rivedere tutti gli stili che saranno applicati sulla base del nuovo tema, e così via per tutti gli altri temi. Sarebbe opportuno creare una cartella apposita, magari chiamandola "css" , in cui andare a salvare tutti i nostri css.

Terminata questa prima fase, in tutte le pagine del sito, tra i metatags della pagina, andiamo ad inserire il link al foglio di stile appena creato (default.css):

<link rel="stylesheet" href="css/<%=strTheme%>.css" type="text/css">

Se invece vogliamo utilizzare delle immagini diverse per ogni tema, il discorso si fa più complicato, ma sicuramente di grande impatto visivo.

Se si vuole utilizzare questo altro metodo, sarebbe opportuno creare una cartella: http://vostrosito/images/themes/default/ .

Ammettiamo che il vostro sia un sito personale con le seguenti voci:

1 - Chi sono

2 - Guestbook

3 - Link

4 - E-M@il

e di utilizzare per ogni voce un pulsante rosso come grafica. Apriamo il nostro programma di grafica, creiamo i pulsanti e salviamo le immagini come chisono.gif , guestbook.gif , link.gif e email.gif nella cartella images/themes/default/ . Per un altro tema (che chiameremo "Primo_Tema") vogliamo che il pulsante sia blu. E allora riapriamo il nostro programma di grafica, creiamo le immagini chisono.gif , guestbook.gif , link.gif e email.gif e salviamole nella cartella images/themes/primo_tema/ . E via discorrendo per tutti i temi che volete che abbia il vostro sito.Ultima cosa da fare

Ultima cosa da fare è cambiare il percorso di tutte le immagini in:

<img s rc="images/themes/<%=strTheme%>/chisono.gif" border="0">
<img s rc="images/themes/<%=strTheme%>/guestbook.gif" border="0">
<img s rc="images/themes/<%=strTheme%>/link.gif" border="0">
<img s rc="images/themes/<%=strTheme%>/email.gif" border="0">

dove <%=strTheme%> non è altro che la variabile che contiene il nome del tema, che è anche il nome della cartella contenente le immagini di uno specifico tema del sito.

Questo è tutto. Come potete notare è anche possibile combinare l'uso dei CSS e delle immagini.