Comenzar a crear páginas con Symfony 3
En esta entrada vamos a tocar diversos aspectos de Symfony, entre ellos:
- Ver como funciona el enrutamiento de forma muy básica
- Crear nuestra primera vista
- Convertir la vista en una plantilla twig
Para ello tenemos que arrancar nuestro servidor en modo debug, y entrar en nuestra web para tener el siguiente resultado, que es la home de nuestro proyecto.
Para empezar nos vamos a ir nuestro archivo src/AppBundle/Controller/DefaultController.php donde se encuentra el enrutamiento:
namespace AppBundle\Controller;
use Symfony\Bundle\FrameworkBundle\Controller\Controller;
use Symfony\Component\HttpFoundation\Request;
use Symfony\Component\Routing\Annotation\Route;
class DefaultController extends Controller
{
/**
* @Route("/", name="homepage")
*/
public function indexAction(Request $request)
{
// replace this example code with whatever you need
return $this->render('default/index.html.twig', [
'base_dir' => realpath($this->getParameter('kernel.project_dir')).DIRECTORY_SEPARATOR,
]);
}
}
En principio podríamos crear nuevos controllers siempre y cuando extiendan de la clase Controller como vemos en la línea 7, manteniendo el namespace y las dependencias.
Vemos que hay un comentario, llamado anotación que le dice a Symfony cual es la ruta y el controlador.
De hecho vemos @Route(«/», name=»homepage») lo que nos dice que la ruta raíz de nuestro proyecto llamada homepage, esta ligada a la función indexAction, aunque podemos cambiarle el nombre si queremos siempre y cuando termine como Action.
Para este ejemplo nosotros vamos a llamarlo inicioAction, y vamos a cambiar el return para que sea solo una vista sin parámetros quedando de este modo.
namespace AppBundle\Controller;
use Symfony\Bundle\FrameworkBundle\Controller\Controller;
use Symfony\Component\HttpFoundation\Request;
use Symfony\Component\Routing\Annotation\Route;
class DefaultController extends Controller
{
/**
* @Route("/", name="homepage")
*/
public function inicioAction(Request $request)
{
// replace this example code with whatever you need
return $this->render('frontal/index.html.twig');
}
}
El resultado que se devuelve es la renderización de un fichero en formato twig que veremos un poco más abajo.
¿Pero, donde está la vista?
La vista se encuentra en App/Resources/views aquí podemos crear una carpeta para las vistas del front que vamos a llamar portal.
Este archivo lo vamos a llamar index.html.twig para que más tarde podamos utilizar el sistema de plantillas de Symfony. (Si os dais cuenta en la línea 17 ya hemos apuntado esa dirección)
Para añadir más redireciones, aunque lo veremos más adelante tan solo tenemos que crear la vista y decirle a Symfony donde esta en el archivo de rutas, como en el siguiente ejemplo:
/**
* @Route("/pruebas", name="frontal")
*/
public function pruebasAction(Request $request)
{
// replace this example code with whatever you need
return $this->render('frontal/pruebas.html.twig');
}
De este modo Symfony sabe que plantilla tiene que leer, esta plantilla puede ser un html normal como el siguiente:
Esto nos da como resultado:
Convirtiendo la vista en plantilla twig
Aunque vamos a ir viendo poco a poco con mucha más profundidad como funcionan las plantillas twig, vamos a empezar a echar un pequeño vistazo sobre como funcionan haciendo un pequeño DRY con la web.
Siguiendo con nuestro ejemplo vamos a crear una plantilla que solo tenga el contenido. De hecho la instalación básica de Symfony nos proporciona un archivo llamado base.html.twig que se encuentra en;app/Resources/views/base.html.twig
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>{% block title %}Welcome!{% endblock %}</title>
{% block stylesheets %}{% endblock %}
<link rel="icon" type="image/x-icon" href="{{ asset('favicon.ico') }}" />
</head>
<body>
{% block body %}{% endblock %}
{% block javascripts %}{% endblock %}
</body>
</html>
Este archivo puede servir de ejemplo y de inicio para nuestra aplicación ya que tiene diferentes bloques definidos para poder empezar a trabajar, como el title, los archivos css, el, favicon, el contenido y el javascript.
Para comenzar vamos a cambiar nuestro fichero index por el siguiente contenido:
{# Plantilla de la aplicación #}
{% extends 'base.html.twig' %}
{# contenido del bloque del titulo #}
{% block title %}
Bienvenido!
{% endblock %}
{# contenido del bloque body #}
{% block body %}
Este es el contenido del index desde twig
{% endblock %}
Aquí le estamos diciendo que la plantilla que tiene que rellenar es la plantilla base por medio de la palabra reservada extends y a continuación vamos a reescribir los diferentes bloques uno a uno.
Si nos fijamos vemos que para que Symfony sepa que tiene que introducir en cada bloque este viene definido por:
{% block nombre_del_bloque %} contenido {% endblock %}
Naturalmente el nombre del bloque debe de ser el mismo tanto en la plantilla madre como en las hijas, o nos dará error.
De esta forma solo hace falta empezar a imaginar todo lo que se puede hacer y la flexibilidad que podemos coger a la hora de desarrollar aplicaciones.
Nota: los comentarios en las plantillas twig se hacen por medio de {# comentario #}
