Pur conoscendo bene HTML e CSS, per chi sviluppa siti una cosa che può rivelarsi difficoltosa è la gestione dei contenuti. In questa serie di articoli vedremo come sia possibile sfruttare il PHP per realizzare un sistema di template che potrete utilizzare comodamente e senza nessuna conoscenza di questa tecnologia lato server. Il PHP non è l'unico strumento utile ad includere codice esterno in siti web: rimando a uno degli articoli più letti di questa sezione, Come includere codice esterno nelle pagine Web. Prima di cominciare, una piccola premessa.
Frame e tabelle: perchè abbandonarli
Frameè una parola che, finora, non credo di aver mai scritto nei molti articoli apparsi su questo sito. Personalmente, seppure possano risultare apparentemente comodi e vantaggiosi, sono uno strumento che non ho mai usato e non userei mai. Vediamo perchè:
- sono una tecnologia superata, che riportano i siti al 1996 o giù di lì;
- siti con i frame sono inaccessibili o comunque molto difficili da consultare con screen reader, browser testuali e altri dispositivi alternativi;
- danno problemi di indicizzazione con i motori di ricerca;
- necessitano di Javascript per ricomporre il frameset di pagine interne.
In quanto alle tabelle per il layout, abbiamo avuto modo di parlarne in Scrivere codice HTML semantico L' importanza dell' impaginazione.
Due domande frequenti
Alcune delle richieste più frequenti che mi sono giunte via email sono del tipo: Ok, ho imparato a impaginare una pagina usando div e fogli di stile, ma come faccio a realizzare un intero sito?. Oppure: Come sostituisco i frame con i CSS? In questa serie di articoli daremo un possibile risposta a queste due domande.
Testare, personalizzare e usare il template
Come ho già accennato, non sarà necessaria nessuna conoscenza di PHP. Vedremo infatti come poche righe già pronte siano determinanti e utilissime. Sono necessarie invece discrete conoscenze di HTML e CSS, più un pizzico di capacità grafiche per la personalizzazione del template. Per i test in locale, il PHP è già disponibile nativamente su sistemi Unix, Linux e Mac. Per chi ha Windows il mio consiglio è di scaricare EasyPhp. L'installazione è di circa 10Mb, e nel seguito dell'articolo ci riferiremo a questa soluzione.
Ora veniamo all'hosting: per ospitare il template sul web sarà necessario un hosting con PHP. Generalmente, spazi web gratuiti quali Libero, Virgilio e altri non hanno PHP. Tra i servizi gratuiti con PH, Altervista è il più noto. Oppure potete considerare di comprare un dominio. Dominio e hosting con PHP per un anno si trovano anche al costo di una pizza o poco più.
Caratteristiche del template
La soluzione che presenteremo è davvero essenziale, ma è in grado di agevolare molto la realizzazione di siti web. Ecco le caratteristiche principali:
- non è necessaria nessuna conoscenza di php;
- pagine web basate su un modello HTML e CSS adattabile alle vostre esigenze;
- le componenti invariabili (header, navigazione e footer) sono fisicamente separate dai contenuti effettivi delle singole pagine;
- qualsiasi modifica effettuata su tali componenti ha effetto immediato sull' intero sito;
- alta adattabilità di layout e contenuti invariabili in base alle esigenze e alla crescita del sito;
- codice HTML e CSS validi;
- pagina di contatto sul sito, che spedisce una e-mail;
- contatore di pagine viste e accessi unici;
- pagina di errore personalizzabile.
Come quasi tutte le cose... ci sono i pro e i contro, ecco due piccoli svantaggi:
- impossibilità di cambiare le componenti invariabili (title della pagina incluso) in base ai contenuti centrali;
- impossibile aggiungere Javascript e/o CSS solo su determinate pagine.
Svantaggi comunque piuttosto accettabili, soprattutto considerando la facilità di aggiornamento, aggiunta e modifica delle singole pagine e dell'intero sito.
Il processo di realizzazione
Ecco a grandi linee quello che è il processo di realizzazione di un sito basato sul template PHP:
- definire lo scopo del sito;
- definire le sezioni principali di una pagina tipo;
- stabilire il layout;
- scrivere l' HTML essenziale di una pagina tipo;
- realizzare la grafica;
- scrivere il CSS;
- tagliare l'HTML;
- ricomporlo con PHP;
- realizzare i contenuti centrali delle singole pagine.
In merito ai primi due punti, le cose vanno valutate caso per caso. Ovviamente il layout dovrà risultare adeguato ai contenuti di pagina e di sito. Per un sito di dimensioni medio-piccole (con un ordine di pagine sotto il centinaio) un layout a due colonne si presta benissimo. Eventualmente, in caso di difficoltà di gestione e organizzazione dei link, si potrà aggiungere una sezione di navigazione supplementare, per esempio in orizzontale sotto l'header, o in verticale sotto forma di terza colonna. La soluzione che stiamo per vedere infatti offre la possibilità di aggiungere facilmente sezioni invariabili e grazie ai CSS sarà semplice modificare il layout del sito.
Stabilito il layout, i punti 3 e 4 si possono sviluppare nell'ordine più congeniale. C'è infatti chi preferisce realizzare una prima bozza interamente grafica, ancora prima di scrivere l'HTML, da "tagliare" in un secondo momento.
Scritto l'HTML di una pagina tipo, si procederà con il CSS, accompagnandolo da una buona fase di test multi-browser. A questo punto abbiamo realizzato un modello in HTML e CSS, e da qui in poi sarà compito del PHP: si procederà infatti a "tagliare" l'HTML per riconoscere le sezioni invariabili così da poterle aggiungerle facilmente attorno ai contenuti centrali.
Grafica e HTML essenziale
Anzitutto vediamo uno screenshot del template che realizzeremo con HTML, PHP e CSS. Si tratta di un classico layout a due colonne con header e footer. Ecco l'HTML essenziale:
<div id="container">
<div id="header"></div>
<div id="menu"></div>
<div id="content"></div>
<div id="footer"></div>
</div>
Nel prossimo appuntamento entreremo nel vivo dell' articolo, vedendo l'esempio e i dettagli di HTML e PHP. Alla prossima.
Nella Un sistema a template con PHP e CSS - I abbiamo presentato le caratteristiche essenziali, i pro e i contro e una piccola anteprima grafica del template con PHP e CSS. Ora è tempo di passare di passare al codice.
Costruzione del modello HTML
Stabiliti scopo e sezioni principali del sito, la prima cosa da fare è realizzare un modello HTML, che è da pensare in funzione del layout. Quello che realizzeremo è un layout a due colonne con float, e quindi la colonna secondaria dovrà precedere i contenuti. Vediamo subito il modello che realizzeremo, e il relativo codice HTML essenziale:
<div id="container">
<div id="header">
<h1>
<a href="#" title="vai alla home page">Fast Template</a>
</h1>
<a id="skipnav" href="#content">Salta ai contenuti</a>
<img id="logoprint" src="logoprint.jpg" alt="logo">
</div>
<div id="menu">
<h4>Navigazione</h4>
<ul id="nav">
<li id="home"><a href="#">Home</a></li>
<li id="who"><a href="#">Chi siamo</a></li>
<li id="prod"><a href="#">Prodotti</a></li>
<li id="serv"><a href="#">Servizi</a></li>
<li id="cont"><a href="#">Contatti</a></li>
</ul>
<h4>In evidenza</h4>
<ul id="news">
<li><a href="#">Le news del sito</a></li>
<li><a href="#">I nuovi arrivi</a></li>
</ul>
</div>
<div id="content">
<!-- qui i contenuti centrali -->
</div>
<div id="footer">
<address>© 1997-2005 - Grafica, layout e guide sono di esclusiva proprietà di HTML.it s.r.l.</address>
<p id="counter">XXX pagine viste e XX acessi unici dal 11/01/2005</p>
</div>
</div> <!-- chiude container -->
Il modello HTML andrà riempito con dei contenuti centrali "segnaposto" per la preparazione di grafica e CSS, tenendo presente che l'unica cosa che varierà di pagina in pagina è proprio l'HTML all'interno del div id="content". In quanto ai link e al contatore, li sistemeremo in un secondo momento.
Grafica e CSS del modello
La grafica per il layout del modello è costituita da tre sole immagini:
Dato che la parte fondamentale di questa serie di articoli è la gestione dei contenuti grazie ad HTML e PHP, vedremo solo brevemente le parti essenziali del CSS.
False colonne sul container
Per realizzare il layout e far sì che la colonna laterale si estenda fino al footer e che non ci siano vincoli di lunghezza relativa tra questa e contenuti centrali, si è utilizzata la tecnica delle false colonne. Tecnica che potrete approfondire nell'articolo sul . Anche l'articolo sul che merita una lettura, dato che per la realizzazione del CSS è stata presa in prestito la parte relativa al link di salto ai contenuti. A differenza degli esempi dei due articoli citati, lo sfondo per le false colonne nel caso del modello è stato attribuito al div id="container" anzichè al body. Questo ci consente infatti di liberarci dalla condizione che la pagina debba essere più lunga della finestra del browser. Ecco il CSS essenziale per le false colonne sul container:
body{text-align: center; background: #E6E6E6}
div#container{width: 600px;width: 640px;width: 600px;margin: 0 auto;
padding:0 20px; background: #E6E6E6 url(fauxcolumn.jpg) repeat-y center;
text-align: left}
Il container ha larghezza effettiva per i contenuti pari a 600 pixel, ma larghezza totale è pari a 640 pixel, di modo da contenere anche i bordi sfumati sui due lati. È stato usato il Capire il box model per garantire una buona resa anche su IE 5 e 5.5. In quanto alla grafica, ci tenevo a sottilineare che è importante che il colore di sfondo attribuito al body venga a coincidere con il colore ai due estremi dell'immagine per le false colonne.
Per la parte restante del layout è importante che la colonna secondaria venga resa float:right, che il div id="content" abbia il margin-right impostato e che il footer dia il clear. Ecco le regole coinvolte con le dichiarazioni essenziali:
div#menu{float: right;width: 155px;padding-bottom: 20px}
div#content{margin: 0 170px 0 10px}
div#footer{clear: both;background: #D6EAFF url(footer.jpg) bottom}
Per ciò che riguarda il footer, si è attribuita semplicemente questa immagine di sfondo. È importante inoltre anche attribuire un colore di sfondo, tale da coprire le false colonne finchè l'immagine di sfondo non è stata caricata.
Il problema della scrollbar
Vediamo come rende una pagina più corta della finestra del browser con la navigazione più lunga dei contenuti. Nella fase di test di resa del CSS mi sono imbattutto in una questione che per ora non avevo ancora affrontato: tra una pagina corta e una pagina lunga riscontriamo un effetto piuttosto fastidioso in Opera e Mozilla. Tra le due pagine, il layout subiva una traslazione orizzontale di una decina di pixel. Dopo dieci minuti a cercare di capire di quale misterioso bug soffrissero sia Opera che Mozilla, ho realizzato che di bug non si trattava. Opera e Mozilla, a differenza di Internet Explorer, non hanno scrollbar inattiva se la pagina è più corta della finestra del browser. Per sistemare le cose, ho fatto una piccola ricerca con Google, approdando su questa pagina. Il trucco per forzare la scrollbar anche sulle pagine corte in Opera e Mozilla è il seguente:
html{height: 100%; margin-bottom: 1px}
La regola appena vista aggiunge la scrollbar su Opera e Mozilla, che ha uno scostamento verticale proprio di un pixel. Con questo, la parte essenziale del layout è sistemata: abbiamo infatti un layout molto robusto che non presenta vincoli sulla lunghezza relativa delle colonne nè sulla lunghezza di pagina, con tre sole immagini di sfondo.
Il CSS relativo all'header
Una parte di grafica, CSS e HTML molto importante è stata dedicata all'header. Rivediamo l'unica immagine che lo compone. Come si può notare, si presenta "doppia", con la scritta ombreggiata di rossa nella seconda sezione. Se riguardate il modello e provate a passare il mouse sulla scritta dell'header, noterete un effetto rollover. È stata usata una tecnica di image replacement combinata al Fast CSS Rollover. In particolare, la tecnica adottata è molto simile a quella utilizzata in questo articolo.
È una buona pratica, infatti, associare il logo dell'header con un link alla home page. Usare una tecnica di image replacement ci consente inoltre di avere piena personalizzazione anche in successivi restyling del sito. Vediamo le regole CSS coinvolte:
div#header{position:relative;height:200px;
background: #81A1B6 url(fastTemplate.png) no-repeat top left}
div#header h1{position:absolute;top: 100px;left: 20px;
width:300px;height:60px;
background: url(fastTemplate.png) no-repeat -20px -100px}
div#header h1 a{display:block; width:300px;
text-indent: -9000px;text-decoration: none;padding: 60px 0 0 0;
overflow: hidden; height: 0px !important; height /**/:60px;
background-image: url(fastTemplate.png);
background-position: -20px -100px}
div#header h1 a:hover{background-position: -20px -300px}
L'header e la stampa
Uno degli svantaggi delle tecniche di image replacement è la stampa: immagini di sfondo non vengono stampate di default dal browser, e anche se lo fossero, un'immagine elaborata come quella che compone l'header grafico verrebbe stampata male su una buona parte delle stampanti. Inolte potrebbe risultuare per l'utente solo come un consumo di inchiostro. Una possibile soluzione è riportare il testo nel "visibile" della pagina nel CSS per la stampa. Un'altra soluzione, che a parere mio si presta decisamente meglio, è includere nell'HTML un'immagine in bianco e nero che riporti il logo del sito nell'header. Questa la porzione di codice:
<img id="logoprint" src="logoprint.jpg" alt="logo">
E questa è l'immagine in bianco e nero per la stampa:
Essa viene nascosta nel CSS per lo schermo:
div#header img#logoprint{display:none}
Mentre nel CSS per la stampa viene nascosto l'h1 e mostrata l'immagine:
div#header{height: auto;background-image: none}
div#header h1, div#header a{display:none}
div#header img#logoprint{display:block}
Se fate anche solo un'anteprima di stampa, risulterà il logo in bianco e nero invece dell'header grafico.
Questo è tutto per quanto riguarda l'header e più in generale HTML e la parte di CSS relativa al layout del modello.
Conclusioni
Si conclude qui la seconda parte di articolo, in cui abbiamo visto brevemente il codice HTML e le parti salienti del CSS. Arrivati a questo punto non ci resta che procedere con il PHP, ed è qui che avviene la vera magia. Alla prossima.
A seguito di un commento all'articolo "Un sistema a template con PHP e CSS - III" uscito mercoledì 2 Febbraio, e di una discussione sulla sezione PHP del forum di HTML.it che evidenziavano problemi di sicurezza relativi alle inclusioni PHP non controllate, la redazione di HTML.it ha ritirato l'articolo. Questa decisione, che condivido pienamente, è stata dettata da questioni di cattiva scrittura del codice PHP presentato, che poteva costitutire un problema di sicurezza piuttosto serio.
Da parte mia, l'unica cosa che posso dire è che ero purtroppo all'oscuro del fatto che PHP potesse includere ed eseguire anche file remoti ossia presenti su un altro sito: senza i dovuti controlli, un malintenzionato con la soluzione che era stata proposta può arrivare a leggere, cancellare o danneggiare i file presenti sul server che adotta il template. Ma il fatto che ignorassi questa possibilità non giustifica assolutamente la mia leggerezza. Pertanto, le mie più sentite scuse per il disagio creato vanno ad HTML.it e ai lettori.
Inoltre i miei ringraziamenti vanno a tutti coloro che mi hanno supportato, fornendomi idee e suggerimenti in newsgroup, mailing list e forum.
Prima di concludere questa doverosa premessa, ci tengo ad invitare i lettori che hanno già scaricato il template ad aggiornarlo alla versione di seguito presentata e che è disponibile per il download. A questo punto possiamo senz'altro iniziare.
Un template con PHP e CSS - III
Dopo aver visto nei primi due appuntamenti requisiti e caratteristiche, HTML e CSS essenziale di una pagina tipo arriviamo finalmente alla parte centrale della serie: quella dedicata al PHP.
Il taglio dell'HTML
Nello scorso appuntamento abbiamo visto l'HTML del modello. Ora ci occuperemo di "tagliarlo" in sezioni logiche che ricomporremo grazie agli include di PHP. Le sezioni invariabili saranno quindi salvate in tre file distinti con estensione .php, non ci resta che vedere come: ecco il codice HTML "tagliato" del modello. I file per le sezioni invariabili (ovvero le sezioni sempre presenti su tutte le pagine) pur avendo estensione php sono in realtà quasi esclusivamente codice html, ad eccezion fatta del footer che include il contatotore. Vediamoli:
Da notare che il file header.php contiene dall'apertura del body fino alla chiusura dell'header. Il file menu.php contiene l'intero menu di navigazione (con i link funzionali ora) e l'apertura del div per i contenuti centrali, chiuso nel file footer.php che, oltre a contenere il footer, chiude anche la pagina. Il PHP, oltre a comporre la pagina includendo le sezioni invariabili si occuperà di aggiungere i contenuti centrali.
Fast Template: un template con PHP e CSS
Immagino che nei primi due appuntamenti abbiate maturato un po' di curiosità. La questione è che, come tutte le cose, bisogna procedere per gradi e nel corso della serie ho cercato di fornire una sorta di traccia in modo di guidarvi nella realizzazione di siti web basati sul template, concentrando l'attenzione su due degli argomenti a cui i lettori di PRO sono avvezzi, ovvero HTML e CSS.
Arrivati a questo punto non ci resta che vedere Fast Template, la realizzazione di un ipotetico sito grazie a CSS e PHP. Il mini-sito è composto da sette pagine che vedremo singolarmente e tutti i link (a parte "nuovi arrivi" che punta a una pagina inesistente) sono funzionali. Tutto questo è possibile grazie a una singola pagina: index.php che vedremo tra poco.
Il formato dei link per il template
Se riguardate Fast Template, noterete che tutti i link, a parte quello che punta alla home page,
sono della forma: "index.php?page=...". Dopo l'url della pagina centrale del template, segue infatti un punto
interrogativo seguito da page= più, come vedremo, il nome della pagina (senza estensione) da mostrare per i contenuti centrali.
Nelle pagine PHP quello che segue il punto interrogativo viene chiamato querystring, ed è un meccanismo per passare
parametri.
index.php
Non ci resta che vedere il cuore del template, la pagina index.php. Questa si occupa di:
- includere le sezioni invariabili
- se non ha parametri, mostrerà la pagina principale
- se c'è un parametro, verrà mostrata la pagina relativa ma..
- ... se questa non esiste verrà mostrata la pagina di errore
Il file index.php si occupa di tutto questo in pochissime righe, eccole:
<? include("header.php");
include("menu.php");
$p="main"; //pagina di default per i contenuti centrali
if(isset($_GET['page'])){ //pagina passata via parametro
$p=$_GET['page'];
if($p!=basename($p) || !preg_match("/^[A-Za-z0-9-_]+$/",$p) || $p=="index" || !file_exists($p.".php"))
$p="error"; //pagina di errore
}
include($p.".php");
include("footer.php"); ?>
Tutto questo grazie all'include di PHP, che non fa altro che riportare all'interno della index.php, dopo alcuni semplici controlli, i contenuti html e php delle pagine che vengono incluse. Il codice sopra include la pagina main.php in assenza di parametro, oppure verifica l'esistenza della pagina passata da includere nei contenuti centrali: nel caso questa non fosse disponibile, includerà nei contenuti centrali la pagina error.php.
C'è da notare una cosa: il file index.php andrà sistemato, insieme a tutti gli altri file del template e quelli per i contenuti centrali, nella cartella radice del sito. Inoltre, l'accesso al sito attraverso solo il dominio stesso verrà associato automaticamente alla pagina index.php, che in assenza di parametri, mostrerà i contenuti centrali di default, ovvero quelli di main.php.
main.php
Come abbiamo detto, se viene chiamata solo la pagina index.php senza parametri (o si accede al sito solo attraverso il suo dominio), index.php includerà nell'ordine: header.php, menu.php, main.php e footer.php. Main.php è infatti il nome che dovrete dare al file per i contenuti centrali della home page, tenendo presente che basterà scriverci dentro solo l'HTML per i contenuti centrali, ossia il codice HTML della home page che verrà incluso all'interno di div id="content". Ecco il contenuto di main.php.
Le pagine per i contenuti centrali
Come abbiamo detto, le pagine per i contenuti centrali, esclusa la pagina principale, vegono richiamate attraverso un parametro nell'url: i file per i contenuti centrali dovranno avere anch'essi estensione .php, estensione che verrà aggiunta automaticamente dalla index.php. Per esempio il link <a href="index.php?page=contatti"> porta a questa pagina, ovvero il template in cui nell'ordine verranno inclusi: header.php, menu.php, contatti.php e footer.php.
Il meccanismo è molto semplice quindi: tutte i contenuti centrali che vorremo immergere nel template dovranno essere passati a index.php che si occuperà di costruire la pagina completa grazie alle inclusioni. Da notare che tutte le pagine con i contenuti centrali per il corretto funzionamento e per andranno sistemate nella stessa cartella di index.php, ovvero nella radice del sito. Inoltre, per questioni di sicurezza saranno ammessi come parametro solo nomi di file costituiti solo da lettere (maiuscole e minuscole), numeri, trattini e underscore. Vediamo ora due pagine speciali.
La pagina di errore
Nel template ho predisposto una pagina di errore che verrà mostrata nel caso in cui al parametro passato a index.php non corrisponda una pagina, oppure si tenti di includere una pagina non ammessa. Per esempio, il link <a href="index.php?page=topolino">, dato che non esiste una pagina topolino.php, porterà alla pagina di errore. Questa è un semplice file php con soli tag HTML che viene incluso al posto dei contenuti centrali, ed è totalmente personalizzabile. Dovrà avere come nome error.php. Da notare che ho volutamente non incluso la pagina "nuovi arrivi" di modo da lasciare a vista la pagina di errore.
La pagina dei contatti
Dato che il PHP permette facilmente di spedire e-mail, ho aggiunto al template una pagina di contatto, che consente ai visitatori di richiedere informazioni o fare segnalazioni via web. La comunicazione verrà spedita all'indirizzo di posta presente nella terza riga della pagina contatti.php, vediamo come:
$receiverMail = "IL TUO INDIRIZZO QUI"; //QUI METTERE l'INDIRIZZO EMAIL
Per personalizzarla, vi basterà modificare l'indirizzo e-mail a cui vorrete ricevere le email tra le virgolette. Da notare che questa pagina non funziona in locale, ovvero non è possibile spedire email testando il sito sul proprio computer.
La pagina di contatto è composta una parte in PHP che si occupa di spedire l'e-mail, dopo aver effettuato controlli elementari su campi vuoti o non validi (la fonte del codice è questa pagina), più una parte HTML che contiene il form. I campi previsti, come potete vedere, sono nome, email, oggetto, e corpo della comunicazione. Questa pagina, e in particolare codice PHP e HTML relativo ai campi di input, non andrebbe modificata. Il layout del form è affidato ai CSS (rimando alla serie sull'Impaginare i form - I per i dettagli).
Conclusioni
Si conclude qui la terza parte, in cui abbiamo visto finalmente la parte essenziale del template, ovvero il PHP. Da questo appuntamento il template è disponibile per il download: il mio consiglio, soprattutto a chi non è pratico di PHP, è di pazientare ancora a scaricarlo.
Nel prossimo e ultimo appuntamento, questo venerdì, vedremo infatti le altre pagine del template, il contatore, come testare e personalizzare Fast Template in locale, metterlo on-line e come prevedere aggiornamenti e manutenzione. Alla prossima.
Nello scorso appuntamento, del template abbiamo visto la pagina principale, quella dei contatti e la pagina di errore, tre pagine indispensabili. Ovviamente, un sito reale avrà qualche pagina in più.. è per questo che ne ho aggiunto alcune: un'ipotetica pagina di introduzione, una per i prodotti, una per i servizi e infine una per le news. Il loro scopo è quello di mostrare un template per un sito quasi finito, a parte il testo di riempimento, usando codice leggero e con la presentazione interamente compito dei fogli di stile.
A tal proposito, nel scorso appuntamento abbiamo visto velocemente la parte essenziale del CSS relativa al layout. Non potremo vedere il foglio di stile per intero, ma sicuramente le pagine HTML e le regole CSS aggiuntive potranno costituire un notevole spunto per i vostri progetti. Ricordo che si sono usati un CSS per lo schermo e uno per la stampa. Infine, ricordo che per aggiungere contenuti centrali vi basterà semplicemente fare l'upload della pagina php ed eventualmente aggiornare le voci che compongono il menu di navigazione. Vediamo ora una parte utilissima in ciascun sito, soprattutto per chi lo mantiene: il contatore.
Il contatore
Uno dei tool maggiormente ricercati è il contatore di accessi, e ho pensato quindi di includerlo nel template. Si tratta di un semplice script in PHP che scrive sul server un piccolo file di testo che memorizza i dati essenziali: viene incluso nel footer e mostra pagine viste, accessi totali e data della prima visita.
Il contatore è in vista, ma se vorrete nasconderlo sarà facile grazie ai CSS. Vediamo il codice di footer.php:
</div> <!--chiude content -->
<div id="footer">
<address>© 1997-2005 - Grafica, layout e guide sono di esclusiva
proprietà di HTML.it s.r.l.</address>
<p id="counter">
<? include("counter.php")?>
</p>
</div> <!--chiude footer -->
</div> <!-- chiude container -->
In sostanza nel footer viene quindi incluso l'output del contatore all'interno del p id="counter". Per rendere il contatore invisibile basterà aggiungere nel CSS:
p#counter{display: none}
Il contatore sarà comunque operativo, e fornirà l'output nell'HTML, ma verrà semplicemente nascosto. Se vorrete monitorare gli accessi, pur nascondendo il contatore, vi basterà semplicemente visualizzare l'HTML di una qualsiasi pagina del sito o, più comodamente, visitare il file di testo counter.txt che mostrerà nell'ordine visite totali, uniche e data di avvio del contatore che viene incluso nel footer.
Resettare il contatore
Per resettare il contatore in locale in qualsiasi momento, vi basterà semplicemente cancellare il file counter.txt dalla cartella del vostro progetto: in questo modo alla prima visualizzazione del sito in locale ripartirà da una visita, con la data attuale. In particolare, questa operazione andrebbe fatta appena prima di mettere on-line il sito, mettendo on-line anche il file counter.txt così da far partire il contatore da uno.
menu.php: come aggiungere pagine al template
Arriviamo ad una parte davvero importante del template: il menu. Attraverso il menu è infatti possibile accedere a tutte le pagine del sito. Come potete vedere dal codice che compone il file menu.php, si tratta di una semplice pagina con elementi HTML, e in particolare il menu realizzato con due liste e, cosa essenziale, l'apertura del div per i contenuti centrali come ultima riga (che viene chiuso come prima riga del footer).
Per esempio, una volta messa on-line una nuova pagina di contenuti centrali, se vogliamo che questa sia accessibile dalla colonna di navigazione, basterà modificare il file menu.php aggiungendo il nuovo link nella lista e ricaricarlo sul server. La modifica sarà effettiva da subito, e visibile in tutte le pagine.
Come modificare le sezioni invarianti
Oltre al menu, è possibile ovviamente modificare le altre sezioni invarianti, ovvero header e footer. Si tratta comunque di semplici file con tag html, che una volta modificati e messi on-line avranno effetto immediato sull'intero sito.
Una cosa essenziale è assicurarsi che il codice HTML generato dalla index sia corretto e valido: in particolare, per una corretta formattazione il file menu.php e footer.php dovranno contenere rispettivamente apertura e chisura del div id="content".
Testare il template in locale
A questo punto abbiamo visto velocemente tutte le caratteristiche essenziali del template. Nel Un sistema a template con PHP e CSS - I abbiamo accennato ai requisiti per testare il template in locale: per chi ha un sistema Windows, la prima cosa da fare è scaricare e installare easyphp, molto semplice da usare.
Una volta installato EasyPHP e dopo aver scaricato lo zip con il template, vi basterà decompimerlo in "C:ProgrammiEasyPHP1-7www", ovvero la cartella a cui corrisponde la cartella radice del localhost. Avviato EasyPHP, che include il web-server Apache, vi basterà digitare nella barra degli indirizzi del vostro browser: http://localhost/ che accederà e mostrerà la pagina index.php del template. Se prevedete diversi progetti in PHP da testare in locale, vi converrà creare una sottocartella, tenendo presente che per accedervi dovemo far corrispondere l'indirizzo del server locale. Per esempio se sistemiamo il template in C:ProgrammiEasyPHP1-7wwwTemplate, per vederlo in locale dovremo digitare http://localhost/Template.
Per chi ha un sistema Unix o Mac, PHP e Apache sono installati di default. Per vedere il sito in locale, ci dovrebbe essere una cartella che contiene la cartella www in cui sistemare i file del template e a cui far corrisponde il localhost.
In quanto al contatore: questo funzionerà anche in locale, creando un file counter.txt: se vorrete azzerarlo in qualsiasi momento vi basterà cancellarlo e rivisualizzare il sito per farlo ripartire da uno.
C'è da tenere inoltre presente che il modulo di contatto non funzionerà in locale, e prima di metterlo on-line dovrete modificare contatti.php mettendo tra le virgolette della terza riga il vostro indirizzo e-mail a cui vorrete ricevere le comunicazioni.
Personalizzare contenuti e presentazione del template
Ora parliamo della personalizzazione dei contenuti: la vera pagina essenziale è la index.php che si occupa di costruire il template in base ai file header.php, menu.php e footer.php, più ovviamente i file per i contenuti centrali. In particolare sono importanti main.php (i contenuti centrali della home page) e error.php (la pagina di errore). Potrete ovviamente modificare queste pagine, ma saranno necessarie per come è scritta la index.php. Va considerato inoltre che menu.php e footer.php contengono rispettivamente apertura e chiusura del div id="content" in cui verrà incluso il codice HTML delle pagine per i contenuti centrali.
La prima cosa da fare è quindi personalizzare le pagine fondamentali, per poi intervenire sul menu.php e creare, aggiungere e/o modificare i link alle altre pagine (tenendo presente che queste verranno immerse nel template all'interno del div id="content" e che andranno realizzate quindi senza stare a preoccuparsi del codice html delle sezioni invarianti. Vi basterà un editor HTML, e potrà esservi utile la visualizzazione dell'HTML risultante sul browser. Mi raccomando già in locale è importante convalidare il codice risultante di ciascuna pagina del sito.
In quanto alla personalizzazione della presentazione, vi basterà creare la grafica e intervenire sui due CSS, uno per lo schermo e l'altro per la stampa. Nello zip da scaricare ho predisposto anche l'immagine base che compone l'header ma senza scritta, così vi sarà semplice adattarla.
Mettere on-line il sito
Realizzato e testato il sito non resta che metterlo on-line. Alcuni piani di hosting offrono un pannello di controllo per caricare i files sul server. In alternativa, molti editor HTML dispongono di un ftp manager, altrimenti potrete trovare programmi dedicati, anche freeware, grazie ai quali potrete caricare sul sito tutti i file del vostro sito.
Mi raccomando, una volta caricato il sito, di ricordarvi la modifica dei permessi al file del contatore di cui parleremo tra breve.
In quanto ai programmi FTP, personalmente mi trovo bene con RightFTP, un freeware leggero che permette l'FTP e anche la modifica dei permessi di accesso a file e cartelle. In alternativa, ne trovate molti recensiti nella sezione "Download" di HTML.it.
Abilitare il contatore on-line
Una cosa essenziale da dire a questo punto è che per abilitare il contatore on-line dovremo modificare i permessi di lettura e scrittura del file counter.txt una volta che ne avremo fatto l'upload. Questo infatti andrà generato con una prima visita in locale, appena prima di mettere on-line il sito.
Nei sistemi Unix e Linux per poter leggere o scrivere un file dovremo modificarne i permessi. Senza la modifica dei permessi sul file counter.txt, PHP infatti restituirà un errore al posto del testo generato dal contatore. Molti programmi FTP consentono di modificare i permessi di un file o una cartella sul server semplicemente facendoci sopra un click con il tasto destro.
Una volta fatto l'upload, faremo quindi click con il tasto destro sul file counter.txt presente sul server e si aprirà un menu contestuale, che dovrebbe avere come voci qualcosa del tipo "set Attributes" oppure "CHMOD". Selezionandola, si aprirà una finestra in cui dovremo immettere un valore numerico: il valore da assegnare è 777, che consente di accedere al file in lettura e in scrittura. Un tutorial per modificare i permessi di accesso dei file con i più comuni programmi FTP si può trovare qui.
Questo, oltre a copiare tutti i file del template e dei contenuti centrali nella cartella radice del sito è tutto ciò che dovrete fare per mettere on-line il vostro sito una volta che l'avrete finito. Ora, è tempo di conclusioni.
Le tre componenti essenziali
Credo che arrivati a questo punto saranno chiari al lettore i molti vantaggi derivanti dall'uso del template, che è indicato per siti di piccole dimensioni, fino ad arrivare potenzialmente a molte pagine (credo che fino a 50-100 pagine non dovrebbero esserci problemi). Ovvio che per siti di grosse dimensioni, Cos'è un CMS? è consigliato.
L'idea di fondo della soluzione che abbiamo presentato è la separazione: in un sito web le tre componenti essenziali sono struttura, contenuti e presentazione. Abbiamo visto con i molti articoli dedicati ai CSS come sia possibile semparare il codice HTML (ovvero struttura e contenuti) e presentazione (il CSS). Il PHP, grazie a pochissime righe, è in grado di separare struttura e contenuti effettivi ed è questa la vera potenza di una soluzione che utilizza una tecnologia lato server. Abbiamo quindi le tre componenti totalmente separate:
- la struttura e la gestione di pagine e contenuti invarianti compito del PHP;
- i contenuti centrali sono compito dell'HTML;
- la presentazione è compito del CSS.
Tutto separato, eppure volto a formare un'unità, che poi è il sito stesso.
Conclusioni
Ho cercato nella serie degli articoli di fornire una soluzione che si riveli versatile e facile da adottare anche per chi di PHP non è pratico. A tal proposito, ricordo che il template si presta molto bene alla modifica e aggiunta di sezioni invarianti e grazie ai CSS potremo quindi prevedere crescite, redesign e restyling del sito.
Per esempio, se il sito dovesse crescere molto potremo pensare di aggiungere un'elenco di sezioni nei contenuti centrali oppure aggiungere un menu supplementare in orizzontale nell'header (modificando il file header.php) oppure come terza colonna, intervenendo nel codice HTML del file menu.php. Infine, il mio consiglio è di studiare bene la soluzione di esempio e di riferirsi a questa serie di articoli come a una mini-guida di riferimento.
