Creare un sito minimamente dinamico usando i Server Side Includes

I Server Side Includes (SSI) sono linguaggio molto semplice che permette di creare contenuto dinamico in una pagina web. Sono molto meno potenti di PHP, ma hanno il vantaggio di essere attivi in quasi ogni installazione di Apache, anche le minimali tipo TopName di TopHost. Credo ormai siano in effetti una specie di minimo sindacale richiesto ad un servizio di hosting.

Vediamo rapidamente la sintassi di questo linguaggio: per prima cosa, gli SSI “abitano” nei commenti HTML, ad esempio:

<!--#echo var="DATE_LOCAL" -->

stampa a schermo la data odierna. Per maggiori informazioni sul linguaggio, leggete il tutorial sul sito di Apache.

Ma arriviamo al succo, **come creare un sito minimamente dinamico usando solo gli SSI**.

Cosa intendo per minimamente dinamico?

Intendo:

– con testata e fondo centralizzati,
– con un menù che cambi in funzione alla pagina visitata,
– con supporto per più lingue meno manuale possibile.

Per avere un’idea un sito così: cfpersonalshopping.com

Questo sito ha una struttura molto semplice, ma l’uso degli SSI riesce a far fare al server quello che magari fanno i template di Dreaweaver, cioè gestire in modo centralizzato tutte le parti della pagina che sono stabili tra pagine diverse.

Prima di tutto definiamo la pagina principale, *index.shtml*, **shtml** è l’estensione che attiva il filtro SSI:

<!--#set var="page" value="index" -->
<!--#include virtual="atop.shtml" -->
        <div id=contenuto>
			<img src="images/foto.jpg" width="136" height="180"/>
			<h3>TITOLO</h3>
			<p>bla bla bla...</p>
        </div>
<!--#include virtual="zbottom.shtml" -->

Che succede in questo codice? Vediamo i tre righi essenziali:

Il secondo e l’ultimo rigono includono la testata e il fondo pagina:

<!--#include virtual="atop.shtml" -->
...
<!--#include virtual="zbottom.shtml" -->

Questo vi permette già di creare un sito dove gli stili e il fondo sono definiti in un solo file, con ovvi vantaggi al momento delle modifiche.

Ma come si può far sapere alla testata in quale pagina è stata inclusa?

Facile in realtà, infatti il primo rigo definisce una variabile “page” e gli assegna il valore “index”, cioè banalmente il nome della pagina.

<!--#set var="page" value="index" -->

Vediamo la testata delle pagine, diciamo la pagina più “intelligente” del sito!

Prima la presento a pezzi, e poi presento il codice completo.

Prima caratteristica: vogliamo colorare in modo diverso il link alla pagina attuale. Facile, abbiamo impostato una variabile sul nome della pagina, ora non dobbiamo far altro che leggere questo valore:

<style type="text/css">
@import url("violet.css");
a.<!--#echo var='page' -->, a.ita { font-weight: bold; }
</style>

Risultato, nel caso della pagina “index” la pagina scaricata dal browser sarà:

<style type="text/css">
@import url("violet.css");
a.index, a.ita { font-weight: bold; }
</style>

Se la pagina era “chisono” sarebbe stato “a.chisono”, e così via.

Adesso il più è fatto, basta che ogni link abbia il “class=’qualcosa’” giusto, e magicamente sarà in grassetto:

		<div id="menu">
			<ul type="circle">
			<li> <a href="index.shtml" class="index">Posso aiutarvi?</a> </li>
			<li> <a href="chisono.shtml" class="chisono">Chi sono</a> </li>
			<li> <a href="compriamo.shtml" class="compriamo">Cosa compriamo oggi?</a> </li>
			<li> <a href="nonfinisce.shtml" class="nonfinisce">Ma non finisce qui...</a> </li>
			<li> <a href="tariffe.shtml" class="tariffe">Tariffe</a> </li>
			<li> <a href="contatti.shtml" class="contatti">Contatti</a> </li>
			<!--li> <a href="index.shtml" class="links">Links</a> 
			</ul>
		</div><!-- /menu -->

Gestire un sito multilingua è altrettanto semplice, basta avere l’accortezza di chiamare le pagine con lo stesso nome, e ad esempio con un “.en” finale. Fatto questo anche aggiornare il link che si sposta dalla versione inglese alla versione italiana è questione di 2 righi:

        <div id="lang">
             <a href="<!--#echo var='page' -->.shtml" class="ita"><img src="images/ita.gif" alt="ITA"/></a>
             <a href="<!--#echo var='page' -->.shtml.en" class="eng"><img src="images/eng.gif" alt="ENG"/></a>
        </div><!-- /lang -->

Ecco qua tutto il codice di “atop.shtml”:

<html>
<head>
<title>&gt;&gt;&lt; C. F. Personal Shopper &gt;&lt;&lt;</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</meta><meta name="description" content="Personal Shopping a Firenze">
<style type="text/css">
@import url("violet.css");
a.<!--#echo var='page' -->, a.ita { font-weight: bold; }
</style>
</meta></head>
<body>

<div id="page">
	<div id="top">
        <div id="lang">
             <a href="<!--#echo var='page' -->.shtml" class="ita"><img src="images/ita.gif" alt="ITA"/></a>
             <a href="<!--#echo var='page' -->.shtml.en" class="eng"><img src="images/eng.gif" alt="ENG"/></a>
        </div><!-- /lang -->
    </div><!-- /top -->
	<div id="centre1"></div>
	
	<div id="centre2">
		<div id="menu">
			<ul type="circle">
			<li> <a href="index.shtml" class="index">Posso aiutarvi?</a> </li>
			<li> <a href="chisono.shtml" class="chisono">Chi sono</a> </li>
			<li> <a href="compriamo.shtml" class="compriamo">Cosa compriamo oggi?</a> </li>
			<li> <a href="nonfinisce.shtml" class="nonfinisce">Ma non finisce qui...</a> </li>
			<li> <a href="tariffe.shtml" class="tariffe">Tariffe</a> </li>
			<li> <a href="contatti.shtml" class="contatti">Contatti</a> </li>
			<!--li> <a href="index.shtml" class="links">Links</a> 
			</ul>
		</div><!-- /menu -->

Il fondo pagina non è nulla di speciale, ci si potrebbe mettere la data dell’ultima modifica o altro… per ora è semplicemente un ringraziamento all’autore della foto (CreativeCommons Attribuzione) e l’immancabile link al sito di statistiche:

	</div><!-- /centre2 -->
	
	<div id="angolo"> </div>
	<div id="thanks">
<center><small>Credits: <i>Hat trials</i> by <a href="http://www.flickr.com/photos/itzafineday/131432912/">itzafineday</a>
</small></center>
	</div>
	<div id="bottom"> </div>
	<div id="invisibleBottom"></div>
</div><!-- /page -->
<script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
</script>
<script type="text/javascript">
_uacct = "UA-12345678-1";
urchinTracker();
</script>
</body>
</html>

Quindi, abbiamo perso 10 minuti ad imparare ad usare gli SSI e siamo sicuri di risparmiare tempo ad ogni modifica che apporteremo al sito… non mi sembra male.

**Aggiornamento**
Invece di dichiarare il nome della pagina, potete anche prenderlo da una variabile di ambiente. Le variabili di ambiente disponibili sono accessibili qua: NCSA Tutorials: SSI Environment Variables.

  • http://www.maurolasca.it Mauro

    Illuminante! questo tutorial, preciso quanto esaustivo!

  • http://www.matteoraggi.com matteo raggi

    Beh, alla fien wordpress è piu comodo però, se sirisparmia in tempo, non si risparmia in usabilità però :( ma in certi casi penso sia proprio super!