Configuración de Plantillas y Estructura en Symfony con Bootstrap

Clase 10 de 21 • Curso de Bases de Datos en Symfony

Resumen

¿Cómo configurar la estructura básica de un sistema front con plantillas?

Para iniciar con el desarrollo de un sistema front eficiente, es esencial partir de una buena base utilizando plantillas. Aquí te guiaré paso a paso sobre cómo estructurar y configurar tu plantilla, además de implementar elementos clave como menús y vistas.

¿Cómo definir el método en el controlador?

Primero, debes asegurarte de que el controlador tenga el método correcto para cargar la vista deseada. En este caso:

Cambia el nombre del método al que se utilizará, por ejemplo, "Home", y asegúrate de que la vista también se llame "Home".
Guarda los cambios en el controlador.

¿Cómo trabajar con plantillas y vistas?

Dirígete a tus plantillas. Para este ejercicio, trabajaremos en dos archivos principales: base.html.twig y home.html.twig.

Configuración de la plantilla base

Editar el cuerpo de la plantilla:

En base.html.twig, organiza el contenido del <body>:

<body>
    {% include 'menu.html.twig' %}
    <div class="contenedor">
        <div class="row">
            <div class="col-md-9">
                {% block body %}{% endblock %}
            </div>
            <div class="col-md-3">
                <p>Información adicional</p>
            </div>
        </div>
    </div>
</body>

Esta estructura ayuda a mantener un diseño responsivo y bien organizado usando Bootstrap.

Incluir elementos necesarios:

Cambia "Welcome" por una referencia al menú que se incluirá usando:
```
{% include 'menu.html.twig' %}
```

¿Cómo crear y estructurar un menú?

El menú es un componente esencial para la navegación. Para implementarlo:

Definir el archivo de menú:

Crea un nuevo archivo llamado menu.html.twig.

Configura la estructura navbar:

Utiliza las clases de Bootstrap para crear un menú responsive:

<header>
    <nav class="navbar navbar-dark bg-dark mb-5">
        <div class="contenedor">
            <span class="navbar-brand mb-0 h1">Symfony/Doctrine</span>
            <ul class="nav">
                <li class="nav-item">
                    <a class="nav-link text-white" href="{{ path('app_home') }}">Home</a>
                </li>
            </ul>
        </div>
    </nav>
</header>

¿Cómo añadir contenido a la vista 'Home'?

Por último, debes definir el contenido de la vista home.html.twig:

Agregar título y menú:

Para personalizar la vista Home, asegúrate de incluir el título correcto y el menú definido:
```
<h1>Hello Home</h1>
```

Incorporar contenido adicional:

Añade elementos de ejemplo para dar contexto al diseño:

<div class="p-3 bg-dark text-white rounded">
    <p>Texto de ejemplo para ilustrar el diseño de la vista.</p>
    <a href="#" class="btn btn-warning btn-lg">Comentarios</a>
</div>

¿Por qué es crucial cerrar correctamente las etiquetas?

Cerrar correctamente las etiquetas en HTML y en las plantillas Twig es fundamental para evitar errores de visualización y asegurar que el contenido se alinee correctamente al diseño planeado. Revisa constantemente la correcta apertura y cierre de las etiquetas <div>, especialmente cuando utilices Bootstrap para la estructura de las columnas.

Con estos pasos, tu sistema front estará bien estructurado y organizado, permitiendo un desarrollo eficiente y responsable, listo para ser extendido en futuras incorporaciones y mantenimientos. ¡Adelante y sigue aprendiendo!