Slim, PHP micro-framework ( II ) (Views y Layouts)

Esta vez vamos a usar “vistas” o “layouts” (o como le quieran decir).

De esta forma cargamos un archivo dentro de otro (HTML básicamente). Necesitamos hacer 3 cosas antes.

Si bien Slim permite el uso de algunas plantillas, nosotros lo vamos a hacer a mano (paso 1).

<!--?php require 'lib/Slim/View.php'; class Vista extends \Slim\View {     static protected $_layout = NULL;     public static function set_layout($layout=NULL)     {         self::$_layout = $layout;     }     public function render( $template ) {         extract($this--->data);
        $templatePath = "./views" . '/' . ltrim($template, '/');
        if ( !file_exists($templatePath) ) {
            throw new RuntimeException('View cannot render template `' . $templatePath . '`. Template does not exist !.');
        }
        ob_start();
        require $templatePath;
        $html = ob_get_clean();
        return $this->_render_layout($html);
    }
    public function _render_layout($_html)
    {
        if(self::$_layout !== NULL)
        {
            $layout_path = "./views" . '/' . ltrim(self::$_layout, '/');
            if ( !file_exists($layout_path) ) {
                throw new RuntimeException('View cannot render layout `' . $layout_path . '`. Layout does not exist.');
            }
            ob_start();
            require $layout_path;
            $_html = ob_get_clean();
        }
        return $_html;
    }

}
?>

Como ven, estamos usando la clase “View” de Slim.

Ahora, mi estructura es la siguiente (para que no se pierdan con las rutas) 

Paso 2, en el index.php agregamos lo siguiente antes de la definición de rutas

$vista = new Vista();

$app = new \Slim\Slim(
    array("view" => $vista)
);

Vista::set_layout("default.php"); 

default.php es la vista que envuelve todo. La mía es así

<div class="container">
    <?php echo $_html; ?>
    <hr />
    <footer>© Puerto Solutions 2012</footer>
</div>

Usando Twitter Bootstrap, por lo que el inicio el mismo (desde <html> al navbar) el echo de $_html carga el resto del contenido, Y las rutas quedarían así

$app -> get('/Registro', function() use ($app){
    $app -> render("registro.php");
}); 

Donde “registro.php” es nuestro layout:

<h1>Registro Usuarios</h1>
<p>Lo &uacute;nico que necesitamos es tu nombre (puede ser real o no), tu mail, y la contrase&ntilde;a.</p>
<form class="form-horizontal" method="post" action="/Registro">
	<fieldset>
		<div class="control-group">
			<label class="control-label" for="usuario">Nombre Usuario</label>
			<div class="controls">
				<input type="text" name="usuario" class="input-xlarge">
			</div>
		</div>
		<div class="control-group">
			<label class="control-label" for="mail">E-Mail</label>
			<div class="controls">
				<div class="input-prepend">
					<span class="add-on">@</span>
					<input type="text" name="mail" class="input-xlarge" id="prependedInput">
				</div>
			</div>
		</div>
		<div class="control-group">
			<label class="control-label" for="pass">Contrase&ntilde;a</label>
			<div class="controls">
				<input type="password" name="pass" class="input-xlarge">
			</div>
		</div>
		<div class="control-group">
			<div class="controls">
				<button class="btn btn-success">Registrar</button>
			</div>
		</div>
	</fieldset>
</form> 

Entonces, si ejecutamos esto, nos aparece lo siguiente Siendo que nunca lo escribimos todo😀

Y eso es todo, pueden usarla para todas las vistas😉

Acerca de MaritoCares

Ingeniero Informático. Con tendencias a la programación en [C#, VB].NET, Java(Web principalmente...), PHP, JavaScript, algo mínimo de [ruby, python], y el clásico C.
Esta entrada fue publicada en php, Tutoriales y etiquetada . Guarda el enlace permanente.

2 respuestas a Slim, PHP micro-framework ( II ) (Views y Layouts)

  1. Carlos dijo:

    Hola. Marito.
    Una duda. Ese formulario del ejemplo le pasaría por POST los datos al Registro.php o al controller Registro, cierto? Y en ambos casos se procesaria la consulta. En tu ejemplo procesas la consulta en la misma “pagina”? (/Registro)

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s