Cambiare la skin di un sito con Asp

Siti dinamici con ASP
Impara a creare siti dinamici professionali con ASP

Scritto da Luca Ruggiero nella sezione Asp

Introduzione

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">
    </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?

Continuate a leggere...

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!

I più cliccati della sezione Asp

:: Un semplice form mail in Asp (51.682)

:: Creazione di un Guestbook in Asp (50.783)

:: Creazione di un'area di accesso riservato in Asp (45.423)

:: Connessione ad un database MySql con Asp (25.045)

:: Connessione ad un database Microsoft SQL Server con Asp (24.069)

:: Asp e database (23.124)

:: Differenza tra i metodi get e post e recupero dei dati, attraverso Asp (22.301)

:: Una semplice area di accesso riservato senza DB in Asp (21.384)

:: Riscrivere le URL con Asp (19.743)

:: Creazione di un Sondaggio in Asp (19.101)

IN EVIDENZA
DOWNLOAD