Stap 1
Kijk hoe de door het SpryData.js gegenereerde broncode voor de tabel er in Firefox uitziet.
Dat blijkt te zijn:
HTML:
<div id="spryregion1">
<table id="tabel_prijzen" width="100%">
<tbody>
<tr>
<th>Winterseizoen</th>
<th>Laagseizoen</th>
<th>Middenseizoen</th>
<th>Hoogseizoen</th>
</tr>
<tr>
<td>01/11/2010 - 31/03/2011</td>
<td>01/04/2011 - 14/05/2011</td>
<td>15/05/2011 - 25/06/2011</td>
<td>26/06/2011 - 03/09/2011</td>
</tr>
<tr>
<td>1000 euro</td>
<td>1250 euro</td>
<td>1800 euro</td>
<td>2250 euro</td>
</tr>
</tbody>
</table>
</div>
Deze code zetten we in de broncode op de plaats van de originele:
HTML:
<div spry:region="ds1">
<table width="100%" id="tabel_prijzen">
<tr>
<th>Winter Season</th>
<th>Low Season</th>
<th>Mid Season</th>
<th>High Season</th>
</tr>
<tr spry:repeat="ds1">
<td>{winter}</td>
<td>{low}</td>
<td>{mid}</td>
<td>{high}</td>
</tr>
</table>
</div>
Met de pure code kan het Spry-script er nu niet meer bij.
Het resultaat is (met weglating van andere zaken):
Stap 2
Kopieer de code van het eerste rijtje, met de seizoensnamen in een bepaalde taal:
HTML:
<!-- includes/seasons-NL.htm -->
<tr>
<th>Winterseizoen</th>
<th>Laagseizoen</th>
<th>Middenseizoen</th>
<th>Hoogseizoen</th>
</tr>
Plak dit in een leeg Kladblok-bestandje, en sla dit op met UTF-8 codering, met bv. de naam: seasons-NL.htm, in een nieuw mapje "includes".
NB: dit is alleen een html-fragment, meer dan deze regeltjes komt er niet in!
- Het resultaat is: includes/seasons-NL.htm
Hier zitten helemaal geen styles bij, maar dat klopt. Die komen later vanzelf weer terug.
Voor andere talen maak je analoge bestandjes.
Stap 3
Doe hetzelfde met het tweede rijtje, de seizoensperioden:
HTML:
<!-- includes/seasonperiods-NL.htm -->
<tr>
<td>01/11/2010 - 31/03/2011</td>
<td>01/04/2011 - 14/05/2011</td>
<td>15/05/2011 - 25/06/2011</td>
<td>26/06/2011 - 03/09/2011</td>
</tr>
Desgewenst voor US-bezoekers in aangepaste US-notatie voor de datum in een analoog bestandje.
Stap 4
En tenslotte het laatste rijtje, de prijzen in Euro's van elke residentie, bv.:
HTML:
<!-- includes/seasonprices-Alexandro-EU.htm -->
<tr>
<td>1000 euro</td>
<td>1250 euro</td>
<td>1800 euro</td>
<td>2250 euro</td>
</tr>
Desgewenst analoge bestandjes met aangepaste getallen voor andere valuta.
Stap 5
Terug naar de pagina van een residentie.
Nu kan de hele tabel vervangen worden door de verwijzingen:
HTML:
<div id="spryregion1">
<table id="tabel_prijzen" width="100%">
<tbody>
<?php include("includes/seasons-NL.htm"); ?>
<?php include("includes/seasonperiods-NL.htm"); ?>
<?php include("includes/seasonprices-Alexandro-EU.htm"); ?>
</tbody>
</table>
</div>
Hé, de php-code is wel doorgekomen (zie broncode), maar er is nog geen tabel!
Stap 6
Dat kan kloppen: PHP is "Preprocessing" door de server, en de server weet alleen dat er gepreprocessed moet worden, als de pagina de uitgang
.php heeft.
We hernoemen de
test-Casa-Alexandro-nw2.htm tot
test-Casa-Alexandro-nw2.php. En even uploaden.
Hoppa! Daar staan ze!
Voor de andere pagina's/talen hoef je nu alleen maar (éénmalig) de namen van de includes te veranderen. Alle Engelse pagina's krijgen de
<?php include("includes/seasons-EN.htm"); ?>, alle Franse pagina's de
<?php include("includes/seasons-FR.htm"); ?>, enz.
Per jaar hoeven alleen de includes voor de perioden en de prijzen bijgesteld te worden, en de pagina's wijzigen zichzelf.
Klaar!
Met vriendelijke groet,
CSShunter
)
