Crear un blog paso a paso #7

Saludos amigos, aquí les traigo la entrega número 7 de este tutorial, crear un blog paso a paso. 😎 🚀

En la entrega anterior ya habíamos hecho lo necesario para visualizar nuestra página principal de nuestro blog, siendo esta la plantilla creada automáticamente gracias a nuestro comando > php bin/console make:Controller, y viéndose des esta forma:

¿Como instalar nuestra librería CSS Bootstrap en nuestro proyecto Symfony? 🤔

Ahora, para modificar nuestra plantilla de nuestra página principal es necesario ajustar nuestras herramientas para incluir a Bootstrap , este nos servirá para darle estilo al HTML que generemos con nuestra plantilla.

Las librerías o paquetes que usaremos en Symfony y que nos ayudan con esto son symfony/asset-mapper symfony/asset symfony/twig-pack y gracias a la instalación que hicimos de Symfony con nuestro superpack Webapp ya los tenemos instalados. 👻

Así que solo queda hacer las configuraciones pertinentes para instalar Bootstrap y configurarlo, todo lo haremos en un solo paso. Para ello necesitaremos el siguiente comando desde nuestra terminal, en mi caso, la cli integrada en mi editor Visual Studio Code, el comando sería:

>php bin/console importmap:require bootstrap

Ten presente siempre que la cli esté apuntando siempre al directorio raíz de nuestro proyecto que en nuestro caso es: C:\xampp\htdocs\blogpersonal>

¿Que hace el comando "`>php bin/console importmap:require bootstrap`" ? 🤔

Cuando instalamos el framework Symfony usando "webapp" se instalaron las librerías necesarias para la construcción de una web con este framework y gracias a flex se crearon las configuraciones necesarias para ellas en el framework dejando casi todo listo para usar cómodamente.

Una de las configuraciones creadas automáticamente fueron precisamente las que necesitábamos para trabajar con nuestros assets(css, javascript) y eso incluye al archivo importmap.php que se generó automáticamente en la raíz de nuestro proyecto y refleja las dependencias de librerías (CSS, JavaScript) de terceros como Bootstrap para que el navegador sepa donde buscarlas.

Con el comando anterior lo que hicimos fue instalar Bootstrap, se descargó en el directorio assets/vendor/bootstrap de nuestro proyecto y como consecuencia se actualizó el archivo importmap.php reflejando esa dependencia.

Tener en cuenta que si esta librería tiene dependencias de otras librerías(Es el caso de Bootstrap), todas esas librerías como dependencias también serán descargadas y reflejadas en el importmap.php archivo

¿Cómo usar Bootstrap en nuestras plantillas? 🤔

Ya teniendo Bootstrap instalado solo queda emplearlo en nuestras plantillas

Ahora, recuerden que esta plantilla se encuentra en el directorio src/templates de nuestro proyecto, y lo que ven en nuestra página de inicio no es más que el contenido o el HTML generado a partir de ella.

Twig usa herencia por lo que también veremos la plantilla src/templates/base.html.twig que va a tener el código común de todas nuestras plantillas y que heredaremos al principio de cada una para no tener que escribir de nuevo un código repetitivo, por eso lo ponemos en esta base.html.twig y luego heredamos de ella desde la plantilla con la que estemos trabajando.

Abramos la plantilla src/templates/base.html.twig y src/templates/index/index.html.twig a ver que tiene, en nuestro editor iremos a sus respectivos directorios de nuestro proyecto y seleccionamos nuestras plantillas.

#src/templates/base.html.twig
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>{% block title %}Welcome!{% endblock %}</title>
        <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 128 128%22><text y=%221.2em%22 font-size=%2296%22>⚫️</text></svg>">
        {% block stylesheets %}
             {{ ux_controller_link_tags() }}
        {% endblock %}

        {% block javascripts %}
            {% block importmap %}{{ importmap('app') }}{% endblock %}
        {% endblock %}
   </head>
   <body>
       {% block body %}{% endblock %}
   </body>
</html>

La magia la hace esta función de Twig {% block importmap %}{{ importmap('app') }}{% endblock %}, Esto carga el archivo asset/app.js que se encuentra en el directorio asset de nuestro proyecto y carga el escript inicial o punto de entrada de nuestro JavaScript y gracias al importmap.php archivo el navegador sabe donde buscar cada uno de nuestros recursos.

Ya que por defecto ya la plantilla base viene con la función necesaria para cargar el archivo que va a ser el punto de entrada donde importaremos nuestro boostrap, solo queda importar bootstrap ahí, para que quede cargado en nuestra plantilla base y en el resto de las plantillas que heredan de ella.

Importar Bootstrap en el archivo app.js

#asset/app.js
import './bootstrap.js'; este no es el bootstrap del que hablamos, ya este biene en la configuración por defecto para cargar "stimulus"(Libreria ligera de js que no hemos visto todavía)
/*
 * Welcome to your app's main JavaScript file!
 *
 * This file will be included onto the page via the importmap() Twig function,
 * which should already be in your base.html.twig.
 */
import 'bootstrap/dist/css/bootstrap.min.css'; Este es nuestra importacion de nuestra librería CSS de Bootstrap
import './styles/app.css'
console.log('This log comes from assets/app.js - welcome to AssetMapper! 🎉')

Con la línea import 'bootstrap/dist/css/bootstrap.min.css'; hemos incluido nuestro Bootstrap CSS en este archivo que es el punto de entrada de nuestro JavaScript y gracias a la función Twig {% block importmap %}{{ importmap('app') }}{% endblock %}en src/templates/base.html.twig que es nuestra plantilla base lo incluimos en esta plantilla quedando disponible para todas las plantillas que hereden de esta plantilla base y así disponible para toda nuestra aplicación si hacemos que cada plantilla herede de src/templates/base.html.twig .

Digamos que se hacen cosas mágicamente, la configuración hecha automáticamente con la instalación de Symfony y los paquetes implicados cargaran en la plantilla todo lo necesario para que el navegador sepa de los archivos o módulos que estamos cargando y sobre todo gracias a importmap.php que lo especifica.

El HTML tiene cierta estructura como casi todo lenguaje, y que cada plantilla representará este HTML, la plantilla src/templates/base.html.twig será la base de nuestra estructura HTML, contendrá el inicio y el cierre del lenguaje, la sección que carga los estilos y el JavaScript de nuestras páginas, así como el cuerpo.

Todo lo repetitivo que tuviéramos que escribir una y otra vez en cada una de las plantillas de nuestras páginas, así que para superar esta tediosa labor, Twig recurre a la herencia de plantillas. Ponemos todo eso en src/templates/base.html.twig y prácticamente nos olvidamos de ella para concentrarnos en el cuerpo del contenido de los recursos o páginas que estemos trabajando.

#src/templates/index/index.html.twig
{% extends 'base.html.twig' %}

{% block title %}Hello IndexController!{% endblock %}

{% block body %}
    <style>
        .example-wrapper { margin: 1em auto; max-width: 800px; width: 95%; font: 18px/1.5 sans-serif; }
        .example-wrapper code { background: #F5F5F5; padding: 2px 6px; }
    </style>

    <div class="example-wrapper">
        <h1>Hello {{ controller_name }}! ✅</h1>

        This friendly message is coming from:
        <ul>
           <li>Your controller at <code><a href="{{ 'C:/xampp/htdocs/blogpersonal/src/Controller/IndexController.php'|file_link(0) }}">src/Controller/IndexController.php</a></code></li>
           <li>Your template at <code><a href="{{ 'C:/xampp/htdocs/blogpersonal/templates/index/index.html.twig'|file_link(0) }}">templates/index/index.html.twig</a></code></li>
        <ul>
    </div>
{% endblock %}

Esta es la plantilla de nuestra página de principal y gracias a la línea {% extends 'base.html.twig' %} estamos heredando de la plantilla base que incluye nuestro Bootstrap CSS por consiguiente también estará disponible en nuestra plantilla src/templates/index/index.html.twig y, por lo tanto, ya podemos agregarle un poco de estilo a nuestra plantilla para ver los efectos que obtenemos con Bootstrap CSS.

Vamos a agregar un botón con las clases que caracterizan o se utilizan en Bootstrap para ver si lo tenemos cargado en nuestra plantilla:

<a href="#" class="btn btn-primary">Ejemplo</a>

En este caso agregué un link usando las clases btn btn-primary a las cuales Bootstrap les asignará el estilo CSS apropiado. La plantilla ahora quedará así:

#src/templates/index/index.html.twig
{% extends 'base.html.twig' %}

{% block title %}Hello IndexController!{% endblock %}

{% block body %}
    <style>
        .example-wrapper { margin: 1em auto; max-width: 800px; width: 95%; font: 18px/1.5 sans-serif; }
        .example-wrapper code { background: #F5F5F5; padding: 2px 6px; }
    </style>

    <div class="example-wrapper">
        <h1>Hello {{ controller_name }}! ✅</h1>
        <a href="#" class="btn btn-primary">Ejemplo</a>
        This friendly message is coming from:
        <ul>
           <li>Your controller at <code><a href="{{ 'C:/xampp/htdocs/blogpersonal/src/Controller/IndexController.php'|file_link(0) }}">src/Controller/IndexController.php</a></code></li>
           <li>Your template at <code><a href="{{ 'C:/xampp/htdocs/blogpersonal/templates/index/index.html.twig'|file_link(0) }}">templates/index/index.html.twig</a></code></li>
        <ul>
    </div>
{% endblock %}

Vayamos a nuestro navegador y recarguemos nuestra página principal http://blogpersonal.local para ver lo que pasa

YES!!, nuestro simple link adoptó la típica apariencia de un botón gracias a que Bootstrap le aplicó los CSS necesarios que le indicamos con las clases btn btn-primary

Esto quiere decir que Bootstrap está disponible en nuestras plantillas y que podemos empezar a diseñar nuestra web con él usando las clases que nos brinda para esto como las que vimos anteriormente.

Bootstrap, aparte del CSS también trae consigo un poco de JavaScript para agregar interactividad en algunos de sus componentes, como alertas, hasta este momento trabajaremos solo con el CSS y una vez que necesitemos algo de estos componentes entonces usaremos el JavaScript y explicaré como usarlo.

Resumen de los pasos para instalar Bootstrap en nuestro proyecto Symfony 💫

Intalacion (comando): >php bin/console importmap:require bootstrap.

Lo cargamos en nuestro script de entrada: En el archivo asset/app.js incluimos la siguiente línea import 'bootstrap/dist/css/bootstrap.min.css';.

Lo incluimos en la plantilla base: Añadimos la siguiente línea {% block importmap %}{{ importmap('app') }}{% endblock %} en la plantilla base que se encuentra en src/templates/base.html.twigaunque puede venir ya incluido por defecto.

En las plantillas de nuestros recursos se reflejará o incluirá Bootstrap gracias a que heredaremos de la plantilla base gracias a la siguiente línea que estará al comienzo de nuestras plantillas {% extends 'base.html.twig' %}

Y eso estodo por hoy, espero que les haya gustado y que les sirva para sus propios proyectos, Sin más me despido de ustedes hasta el próximo encuentro.