====== Dockerització d'aplicacions Symfony ======

[[https://www.docker.com/|Docker]] ens permet simplificar la construcció d'un entorn de desenvolupament igual per a tots els membres del nostre equip. A més, ens permet tenir diferents versions de les mateixes eines coexistint en la mateixa màquina i sense conflictes entre elles.

En aquest article es veurà com dockeritzar un projecte [[https://symfony.com/|Symfony]] amb accés a una base de dades [[https://mariadb.org/|MariaDB]].

{{ :logos.png?400 |}}

{{tag> #FpInfor #Ciber #CiberMp03 #Ceti #CetiMp03 DevOps docker containers contenidors symfony php}}

===== Requeriments previs =====

Abans de començar a treballar s'ha de tenir instal·lat a l'ordinador els programes **Docker** i **Docker Compose**, per generar el contenidors, i un **editor/entorn de desenvolupament**, per poder escriure codi.
===== Preparació de l'entorn =====

L'entorn de desenvolupament que es farà servir constarà de dos contenidors, un per l'SGBD MariaDB i un altre on es desenvoluparà i s'executarà l'aplicació. Aquest darrer contenidor es generarà a partir d'una imatge de Symfony creada per Bitnami.

Els passos a seguir són els següents:
  - Crear el directori per al projecte. \\ <code>$ mkdir paraules</code>
  - Descarregar, a dins del directori creat, l'arxiu <wrap em>docker-compose.yml</wrap> \\ <code>$ cd paraules
$ curl -LO https://raw.githubusercontent.com/bitnami/bitnami-docker-symfony/master/docker-compose.yml
</code>
  - Modificar l'arxiu per adaptar-lo al nou projecte.
<file yaml docker-compose.yml [enable_line_numbers="true",highlight_lines_extra="9,10,20,21,23"]>
version: '2'

services:
  mariadb:
    image: docker.io/bitnami/mariadb:10.6
    environment:
      # ALLOW_EMPTY_PASSWORD is recommended only for development.
      - ALLOW_EMPTY_PASSWORD=yes
      - MARIADB_USER=alumne
      - MARIADB_DATABASE=paraules_db
  myapp:
    image: docker.io/bitnami/symfony:6.1
    ports:
      - '8000:8000'
    environment:
      # ALLOW_EMPTY_PASSWORD is recommended only for development.
      - ALLOW_EMPTY_PASSWORD=yes
      - SYMFONY_DATABASE_HOST=mariadb
      - SYMFONY_DATABASE_PORT_NUMBER=3306
      - SYMFONY_DATABASE_USER=alumne
      - SYMFONY_DATABASE_NAME=paraules_db
    volumes:
      - './paraules:/app'
    depends_on:
      - mariadb
</file>

Es crearan dos serveis (contenidors), <wrap hi>mariadb</wrap> i <wrap hi>myapp</wrap>, que estaran connectats en una xarxa interna. Al servei mariadb se li ha definit el nom de l'usuari que accedirà a la base de dades **(línia 9)** i el nom que tindrà la base de dades **(línia 10)**. Al servei myapp també se li ha de donar aquesta informació **(línies 20 i 21)** perquè pugui connectar-se a la base de dades. A més, es vincularà el directori paraules del host amb el directori /app del contenidor **(línia 23)** per poder editar el codi i permetre que sigui persistent.

<WRAP center round info 60%>
<wrap hi>mariadb</wrap> i <wrap hi>myapp</wrap> **(línies 4 i 11)** són el nom dels dos serveis que ens proporcionaran els contenidors. Aquests noms no venen definits per docker, es poden canviar al gust de cadascú.
</WRAP>


===== Aixecar els contenidors =====

Ara ja es poden aixecar els contenidors. Per fer-ho, estant al directori principal del projecte, s'ha d'executar la comanda:
<code>
$ docker-compose up
</code>

Si tot va bé, s'haurà creat un nou directori paraules amb tot el codi base del nou projecte. A més hi hauran dos serveis nous funcionant.

<code>
NAME                 COMMAND                  SERVICE             STATUS              PORTS
paraules-mariadb-1   "/opt/bitnami/script…"   mariadb             running             3306/tcp
paraules-myapp-1     "/opt/bitnami/script…"   myapp               running             0.0.0.0:8000->8000/tcp, :::8000->8000/tcp

</code>

Per provar que funciona es pot carregar en un navegador la URL [[http://localhost:8000|http://localhost:8000]]

El resultat hauria de ser:

{{ :docker-symfony-1.png?nolink&600 |}}
===== Interaccionant amb els contenidors =====

Les comandes <wrap lo>symfony</wrap> s'hauran d'executar al terminal del contenidor, així que serà necessari poder accedir. La manera de fer-ho és amb la comanda:
<code>
$ docker-compose exec <servei> <comanda>
</code>

==== Servei mariadb ====

<code>
$ docker-compose exec mariadb mysql -u alumne
</code>

Obre un terminal on es podran escriure comandes pròpies del client de MariaDB:

<code none [highlight_lines_extra="6"]>
MariaDB [(none)]> show databases;
+--------------------+
| Database           |
+--------------------+
| information_schema |
| paraules_db        |
| test               |
+--------------------+
3 rows in set (0.002 sec)

MariaDB [(none)]> 
</code>
==== Servei myapp ===
<code>
$ docker-compose exec myapp /bin/bash  
</code>

Aquesta comanda obre un terminal **bash** a dins del contenidor amb el directori de treball **/app**.

<code>
root@16d8a6cd179e:/app# ls
bin	       docker-compose.override.yml  public	  tests
composer.json  docker-compose.yml	    src		  translations
composer.lock  migrations		    symfony.lock  var
config	       phpunit.xml.dist		    templates	  vendor
root@16d8a6cd179e:/app#
</code>
===== Contingut del projecte =====

Ja estan tots els elements preparats per començar el desenvolupament.

==== Creació d'una entitat ====
<WRAP center round important 60%>
Les comandes necessàries per crear l'entitat i fer la migració s'han d'executar al terminal bash associat al servei **myapp**.
</WRAP>

Es pot crear una entitat amb la comanda ''make:entity'' tal com es mostra a continuació.

<code none [enable_line_numbers="true",highlight_lines_extra="4,13,16,19,22,27"]>
root@16d8a6cd179e:/app# php bin/console make:entity

 Class name of the entity to create or update (e.g. TinyGnome):
 > Paraula

 created: src/Entity/Paraula.php
 created: src/Repository/ParaulaRepository.php
 
 Entity generated! Now let's add some fields!
 You can always add more fields later manually or by re-running this command.

 New property name (press <return> to stop adding fields):
 > paraula

 Field type (enter ? to see all types) [string]:
 > string

 Field length [255]:
 > 60

 Can this field be null in the database (nullable) (yes/no) [no]:
 > no

 updated: src/Entity/Paraula.php

 Add another property? Enter the property name (or press <return> to stop adding fields):
 > 

           
  Success! 
           
 Next: When you're ready, create a migration with php bin/console make:migration
 
root@16d8a6cd179e:/app#
</code>

Després d'executar la comanda, s'hauran generat dues classes noves: l'entitat (<wrap lo>src/Entity/Paraula.php</wrap>) i la classe que ens permetrà treballar amb els objectes d'aquesta entitat (<wrap lo>src/Repository/ParaulaRepository.ph</wrap>p).

El següent pas és preparar la migració:
<code>$ php bin/console make:migration</code>

I finalment es porta a terme aquesta migració:
<code>$ php bin/console doctrine:migrations:migrate</code>

=== S'ha creat la taula associada a l'entitat? ===

<WRAP center round important 60%>
A partir d'aquí i fins al final de l'apartat les comandes s'han d'executar al terminal associat al servei **mariadb**.
</WRAP>

Es pot comprovar. Primer s'estableix la connexió a la base de dades.
<code>
MariaDB [(none)]> connect paraules_db
</code>
Per observar quines taules té creades es pot fer servir la comanda:
<code none [highlight_lines_extra="7"]>
MariaDB [paraules_db]> show tables;
+-----------------------------+
| Tables_in_paraules_db       |
+-----------------------------+
| doctrine_migration_versions |
| messenger_messages          |
| paraula                     |
+-----------------------------+
</code>

També es poden inserir dades:
<code sql>
insert into paraula(paraula) values ('Aneto'), ('Montserrat');
</code>

I comprovar que s'ha guardat tot a la base de dades.
<code sql>select * from paraula;</code>

Amb el resultat:
<code>
+----+------------+
| id | paraula    |
+----+------------+
|  1 | Aneto      |
|  2 | Montserrat |
+----+------------+
</code>

<WRAP center round todo 60%>
**Tasca 1:** Afegeix un nou servei que permeti tenir un PHPMyadmin funcionant i connectat a la base de dades.
</WRAP>

==== Creació d'una pàgina d'inici ====
<WRAP center round important 60%>
Les comandes necessàries per crear la pàgina d'inici s'han d'executar al terminal bash associat al servei **myapp**.
</WRAP>

Totes les peticions que es fan a una APP Symfony les rep un controlador, que s'encarrega d'obtenir l'informació demanada i generar la vista fent servir una plantilla.

<WRAP center round info 60%>
Les plantilles de Symfony estan escrites en el llenguatge <wrap em>twig</wrap>.
</WRAP>


Per crear el controlador i la plantilla associada s'ha d'executar la comanda:
<code>$ php bin/console make:controller IniciController</code>

Després d'executar la comanda s'hauran generat dos arxius nous:
  * El **controlador** a //src/Controller/IniciController.php//
  * La **plantilla** a //templates/inici/index.html.twig//


Modifica el controlador perquè s'assembli al següent:
<code php IniciController.php>
<?php

namespace App\Controller;

use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
use Symfony\Component\HttpFoundation\Response;
use Symfony\Component\Routing\Annotation\Route;

class IniciController extends AbstractController
{
    #[Route('/inici', name: 'app_inici')]
    public function index(): Response
    {
      $data = date('d/m/Y');
      $hora = date('H:i:s');
        return $this->render('inici/index.html.twig', [
            'data' => $data,
            'hora' => $hora,
        ]);
    }
}
</code>

Modifica la plantilla perquè sigui com la següent:
<code twig index.html.twig>
{% extends 'base.html.twig' %}

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

{% block body %}
<style>
  article{width: 500px; margin:5em auto; background-color:DeepSkyBlue; text-align: center; padding: 1em; border-radius:15px;border:2px solid black;}
  h1{font-size: 3em; color:white; text-shadow: 0 0 3px #000000;}
  p{font-size:1.5em;color:white;text-shadow: 0 0 2px #000000;}
</style>

<article>
  <h1>Hello World!!!!</h1>
  <hr>
  <p>He nascut el dia <b>{{ data }}</b> a las <b>{{ hora }}</b>
  <hr>
</article>
{% endblock %}
</code>

Ara ja es pot carregar la pàgina al navegador amb la següent adreça: [[http://localhost:8000/inici|http://localhost:8000/inici]]

<WRAP center round todo 60%>
**Tasca 2:** Crea una nova pàgina que mostri una llista no ordenada ''<ul>'' amb totes les paraules de la taula **paraula**.
</WRAP>