INTERNET EXPLORER? Ti consiglio di navigare questo sito con Mozilla Firefox oppure con Google Chrome.

Cambiare la skin di un sito con Asp

Autore: Luca Ruggiero | Tell a Friend
eBook ASP base
Impara a creare siti dinamici con ASP e VBScript da zero!

Corso ASP
Impara a creare siti dinamici professionali con ASP!

E-Commerce con ASP
Impara a creare un sito di E-Commerce con carrello della spesa!

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!

IN EVIDENZA

Una slidegallery con jQuery Pagamenti online con PayPal e PHP Breve guida a jQuery Effetto ombra su testo con Photoshop Guadagna col tuo sito grazie a TradeD... Guida XHTML Riscrivere le URL con Asp Riavviare IIS HTTP 500 internal server error Generare password casuali in Javascri... Errore 80004005: Cannot update. Datab... Introduzione ad Ajax ed Asp con Jscri... Referenze dei Tag Html Stringhe di connessione via ODBC e Ol... Referenze dei fogli di stile Css Le espressioni regolari in Javascript

HOT LINKS

Servizi per Webmaster E-Commerce News Manager Newsletter Corsi online eBooks PC Guadagna col sito Hosting 20 euro Reg. domini Email gratis FAX via email Tlefonare col PC ADSL Alice ADSL FastWeb