Autore: Luca Ruggiero Molti siti mettono a disposizione dei propri utenti la possibilità di modificare i colori del proprio sito, in modo che il navigatore possa scegliere la tonalità che preferisce o che meglio si adatta alla propria vista ed abitudini. Ci sono molti sistemi, tecnicamente parlando, che consentono la realizzazione di questo sistema: molti utilizzano i cookie ed in genere lavorano lato client; la nostra applicazione, se cosi la vogliamo definire, non utilizza i cookie e lavora lato server, bensì utilizza le
variabili di sessione.
Architettura dell'applicazione Mi rendo conto ce sto parlando di applicazioni e architetture come se stessimo realizzando chissà quale software :-) ma in fin dei conti, volendo, possiamo parlare di architettura, dato che lo scopo delle poche righe che seguiranno è quello di stabilire le varie procedure che utilizzeremo ed il sistema per farle lavorare insieme. Come già detto il nostro sistema per cambiare la skin del nostro sito utilizzerà una Session, nella quale andremo a memorizzare il nome del
foglio di stile che includeremo nelle nostre pagine col Tag
<link>. Se la variabile di sessione non è stata creata, ovvero se il suo valore è
null, inseriremo un file .css di default; stabiliremo questo particolare utilizzando la funzione
Session_OnStart() del
Global.asa.
Creeremo poi dei file .css e li chiameremo come ci pare: nel nostro esempio supponiamo che il file .css di default si chiami
default.css ed il colore predominante dei testi e di altri elementi sia il nero. Supponiamo anche che i colori predominanti delle altre skin siano il rosso (da cui il file
rosso.css) ed il blu (da cui il file
blu.css); avremo un file che chiameremo
skin.asp che si occuperà di creare una Session e di memorizzarvi il nome del foglio di stile che intendiamo utilizzare: utilizzando una Session, la variabile che memorizza il nome del foglio di stile sarà viva in tutte le pagine.
La Homepage del sito: il file index.asp Per semplicità creiamo solo un file per il nostro sito, chiamato
index.asp che rappresenta la Homepage. Logicamente potremo creare tutti i file che ci pare, ad esempio email.asp, forum.asp, questo non ci interessa, ci interessa solo sapere che tutti avranno lo stile che permetteremo all'utente di scegliere... e cosi sarà!
Vediamo il codice:
<%@LANGUAGE = JScript%>
<html>
<head>
<title>Cambiare la skin di un sito con Asp</title>
<link rel="stylesheet" type="text/css" href="<%=Session("style")%>.css">
_fcksavedurl=""<%=Session("style")%>.css">"
</head>
<body>
<h1 align="center">Homepage</h1>
<div align="justyfy">
Questo esempio ti dimostrerà come modificare la skin (pelle) del vostro sito: cliccando <a href="skin.asp">qui</a> potrai scegliere un colore diverso da quello predominante; il tutto funziona semplicemente sostituendo il foglio di stile del sito... è molto semplice e divertente! </div> </body> </html> Nulla, davvero nulla di più di una semplice pagina Html, sia pur salvata in formato .asp; nulla tranne un piccolo particolare, evidenziato il rosso, ovvero possiamo notare che l'
href della direttiva di inclusione di un file .css contiene un comando Asp che richiama una variabile di sessione... ma dove nasce questa variabile?
Settaggio del file Global.asa Come detto in precedenza, nel nostro file
Global.asa dobbiamo stabilire il foglio di stile utilizzato per default, ovvero quando la nostra Session non è stata ancora valorizzata:
<script language="JScript" runat="Server">
function Session_OnStart() {
Session("style") = "default";
}
</script>
In questo modo il comando utilizzato in precedenza
<link rel="stylesheet" type="text/css" href="<%=Session("style")%>.css">
diventerà semplicemente
<link rel="stylesheet" type="text/css" href="default.css">
I fogli di stile Non credo abbiano bisogno di commenti...
/* default.css */
h1 { color: #000000; }
div { color: #000000; }
a { color: #0000FF; }
/* rosso.css */
h1 { color: #FF0000; }
div { color: #FF0000; }
a { color: #0000FF; } /*
blu.css */
h1 { color: #0000FF; }
div { color: #0000FF; }
a { color: #0000FF; }
Ricordate solo che abbiamo scelto dei nomi importanti, dato che il file di scelta della skin (skin.asp) li adopererà per cambiare il foglio di stile.
Cambiamo la skin: il file skin.asp Siamo arrivati alla parte clou dell'applicazione: col file
skin.asp potremo consentire all'utente di scegliere la skin che preferisce. Ricordiamo che abbiamo 3 fogli di stile, uno che verrà caricato per default, uno il cui colore predominante è il rosso e l'altro il blu. Vediamo il codice:
<%@LANGUAGE = JScript%>
<% Response.Buffer = true; var skin = new String(Request.QueryString("skin"));
var colore = new String(Request.QueryString("colore"));
if (skin == "cambia")
{ Session("style") = colore;
Response.Redirect("skin.asp"); } %>
<html>
<head>
<title>Cambiare la skin di un sito con Asp</title>
<link rel="stylesheet" type="text/css" href="<%=Session("style")%>.css">
</head> <body> <h1 align="center">Cambia la skin del sito</h1>
<div align="center"> <a href="skin.asp?skin=cambia&colore=default">DEFAULT</a> | <a href="skin.asp?skin=cambia&colore=rosso">ROSSO</a> | <a href="skin.asp?skin=cambia&colore=blu">BLU</a>
<br><br> <a href="index.asp">Homepage</a>
</div>
</body>
</html>
Il funzionamento è davvero semplice: i link puntano allo stesso file
skin.asp associandogli delle QueryString
<a href="skin.asp?
skin=cambia&
colore=rosso">ROSSO</a>
Quando la variabile
skin assume il valore
cambia allora possiamo assegnare alla Session
Session("style") il valore della variabile
colore, in modo da far diventare, ad esempio, l'inclusione dinamica Css <link rel="stylesheet" type="text/css" href="<%=Session("style")%>.css"> nel seguente modo
<link rel="stylesheet" type="text/css" href="rosso.css">
ed il gioco è fatto!
