Come creare template di siti web con PHP
In questa prima serie di articoli vedremo cosa sono i template, perché sono utili e alcune tecniche per realizzarli in PHP.
Template
Molti siti web nascono come un insieme di pagine statiche il cui contenuto cambia molto raramente; in questo scenario è in genere il webmaster di turno che prende in carico praticamente tutti i compiti:
- creazione e manutenzione dei contenuti: testi, immagini, link, eccetera;
- creazione e manutenzione sia della struttura del sito che dello stile grafico, con relativo lavoro di copia-incolla su tutte le pagine.
Finché si tratta di un solo sito, possibilmente molto semplice, il lavoro del webmaster non è poi così pesante, anche perché quasi sempre si tratta di siti senza pretese “professionali”: la propria homepage, un fanclub, il negozio dello zio del cugino di un amico, e così via.
Il discorso cambia radicalmente nel momento in cui cresce la complessità del sito stesso: il numero delle pagine aumenta, si rendono necessarie delle modifiche su tutto il sito, si aggiungono banner ed elementi dinamici. Si rende necessario un meccanismo che ci permetta di modificare separatamente i contenuti e la struttura delle pagine, in modo che queste due attività non si influenzino a vicenda e che anzi possano essere portate avanti in parallelo. I template realizzano proprio questo meccanismo.
Template fai-da-te: versione 1
Il linguaggio PHP inizialmente fu creato proprio per alleggerire il carico di lavoro del webmaster, che con questo nuovo linguaggio poteva finalmente rendere dinamiche le proprie pagine tramite pochi e semplici comandi. Non a caso uno dei utilizzi principali di PHP è sempre stato la gestione “a mano” dei propri template tramite i comandi include() o require(). Vediamo qualche esempio.
In una directory accessibile dal web server creiamo questi tre file: index.php, template_top.php e template_bottom.php, dopodiché inseriamo questi contenuti:
index.php:
<?php require('template_top.php'); ?>
<p>Contenuti della mia pagina.</p>
<p>Bla bla bla</p>
<?php require('template_bottom.php'); ?>
template_top.php:
<html>
<head>
<title>Il mio sito</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
<div id="container">
<div id="header">
<h1>Il mio sito</h1>
<h2>Un sito molto bello</h2>
</div>
<div id="navigation">
<a href="#">Link 1</a> | <a href="#">Link 2</a> | <a href="#">Link 2</a>
</div>
<div id="main">
<div id="banner">
La tua pubblicità qui
</div>
<div id="contents">
template_bottom.php:
</div>
</div>
<div id="footer">
© www.example.com
</div>
</div>
</body>
</html>
Come potete osservare, la struttura della pagina index.php è molto semplice:
- inclusione di template_top.php. Questo file contiene tutto il codice che va inserito prima dei contenuti;
- contenuti veri e propri;
- inclusione di template_bottom.php, con il resto del codice necessario per completare la pagina.
Il template contiene molti <div> dotati di id, questo tipo di organizzazione serve per facilitare il compito del grafico, che potrà assegnare gli stili CSS con più facilità, abbiamo infatti identificato alcuni elementi ricorrenti delle pagine web:
- <div id=”container”>: contenitore generale di tutta la pagina;
- <div id=”header”>: header, contenente il titolo e la descrizione del sito;
- <div id=”navigation”>: menu di navigazione principale;
- <div id=”main”>: div contenente i contenuti principali.
Template fai-da-te: versione 2
Un altro modo per gestire i template, per certi versi molto simile a come operano i cosiddetti template engine di cui ci occuperemo nelle prossime puntate, è il seguente:
- si crea una directory contents, all’interno della quale creare i file dei contenuti. Questi saranno delle pagine “incomplete”, esattamente come la index.php vista sopra ma senza le istruzioni require();
- si crea la variabile $page;
- si include un unico file template.php che si occuperà di formattare l’output, prelevando dalla directory contents i contenuti indicati dalla variabile $page
Vediamo come realizzare tutto ciò. Cambiamo directory, e creiamo questi tre file: index.php, template.php e contents/articolo1.html.
index.php:
<?php
$page = "contents/articolo1.html";
require('include/template_full.php');
?>
template.php:
<html>
<head>
<title>Il mio sito</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
<div id="container">
<div id="header">
<h1>Il mio sito</h1>
<h2>Un sito molto bello</h2>
</div>
<div id="navigation">
<a href="#">Link 1</a> | <a href="#">Link 2</a> | <a href="#">Link 2</a>
</div>
<div id="main">
<div id="banner">
La tua pubblicità qui
</div>
<div id="contents">
<?php
include($page);
?>
</div>
</div>
<div id="footer">
© www.example.com
</div>
</div>
</body>
</html>
contents/articolo1.html:
<p>Questo è l'articolo numero 1</p> <p>Bla bla bla</p>
Aprendo la index.php sul browser otterremo quindi la pagina completa. È anche possibile utilizzare codice PHP all’interno dei contenuti; rinominiamo articolo1.html in articolo1.php e inseriamo questa riga di codice:
<p>Oggi è il <?php echo date('Y/m/d'); ?></p>
Il codice PHP verrà interpretato e nella pagina uscirà la data corrente.
Altri accorgimenti e sviluppi
Con pochi comandi siamo riusciti a creare un piccolo sistema di template, ma le soluzioni che abbiamo proposto non sono certo perfette. Ci sono diversi aspetti che vanno considerati e che possono essere migliorati:
- sicurezza: dobbiamo impedire che un utente possa eseguire i template direttamente, senza passare dalle pagine. Inoltre non deve essere possibile leggere il sorgente dei frammenti di template;
- flessibilità: fino a dove possiamo spingerci nel rendere dinamici i nostri template? Alcuni esempi di codice dinamico: menu di navigazione che evidenziano la pagina corrente, menu contestuali, riquadri visibili solo su alcune pagine, banner pubblicitari, ecc.
Nei prossimi articoli vedremo come utilizzare un template engine vero creato appositamente per questo scopo, nel frattempo suggeriamo di pensare da sè alle possibili soluzioni per questi problemi.
Link
-
http://www.internetpost.it/2012/05/creare-una-galleria-fotografica-con-il-cloud-storage-di-hostingsolutions-it-parte-2/ InternetPost.it Creare una galleria fotografica con il Cloud Storage di Hostingsolutions.it – parte 2 – InternetPost.it
RSS Feed
E-mail Feed
Follow us on Twitter!
