Tenia un parell de projectes a la vista, un personal i un altre per a una empresa en php, ambdós fallats ;) vaig començar a fer-los, i vaig pensar en utilitzar una cosa que tenia pendent: un gestor de plantilles en php. Em vaig decidir a utitzar Twig (no per res, però li tenia mania a smarty per què és el que gasta Vicent-Santi-programadorphp.es).
Em va sorprendre com n'era de fàcil d'utilitzar, per a realitzar una aplicació normal he utilitzat 3 "capes":
Em va sorprendre com n'era de fàcil d'utilitzar, per a realitzar una aplicació normal he utilitzat 3 "capes":
- Scripts d'accés a la base de dades mysql en php, cada petició tornarà el resultat en JSON
- Scripts php que faran el processaran la plantilla
- La plantilla on es poden mesclar diferents llenguatges: Html,css, javascript i "Twig". Per al disseny he gastat bootstrap i com a framework javascript: jquery.
Per a instal·lar el Twig només farà falta baixar-lo en una carpeta i enllaçar-lo a la nostra aplicació. Anem a fer per exemple la pantalla de login:
<?php
require_once 'Twig/Autoloader.php';
Twig_Autoloader::register();
$loader = new Twig_Loader_Filesystem('templates');
$twig = new Twig_Environment($loader, array(
'cache' => 'cache',
));
$template = $twig->loadTemplate('index.html');
echo $template->render(array("user"=>"usuari"));
?>
Bàsicament es dedica a a crear l'objecte Twig, després agarrarà de la carpeta templates ( Twig_Loader_Filesystem('templates') ) , l'arxiu index.html, guardarà els resultat ja processat en la carpeta cache i després el renderitza. el renderitzat consisteix en substituïr l'array passat en render() per unes variables del llenguatge Twig en la plantilla. En aquest cas, es crearà una variable "user" amb el valor "usuari".
Anem a veure com seria la plantilla: (anem a deixar de banda el javascript/css):
<body>
<form name="formulari" class="form-horizontal" role="form">
<div style="display: block; margin-left: auto; margin-right: auto;">
<div class="form-group">
<label for="login" class="control-label col-xs-3">Login</label>
<div class="col-xs-4">
<input type="text" class="form-control col-xs-4 col-md-4 col-sm-4" id="login" placeholder="{{user}}" />
</div>
</div>
<div class="form-group">
<label for="pass" class="control-label col-xs-3">Password</label>
<div class="col-xs-4">
<input type="password" class="form-control" id="password" placeholder="password" />
</div>
</div>
<div class="form-group">
<div class="col-xs-offset-3 col-xs-6">
<button type="button" class="btn btn-default bg-danger" id="botoSubmit">Entrar</button>
</div>
</div>
<p class="bg-danger col-xs-4 col-xs-offset-3" id="missatgeerror"></p>
</div>
</form>
</body>
Vegem de roig la variable user entre {{}}. Això substituïrà {{user}} i mostrarà el seu valor "usuari":
En la propera entrega veurem el codi jquery/bootstrap i les crides en ajax als scripts php ;)
Comentaris
Publica un comentari a l'entrada