Diferències

Ací es mostren les diferències entre la revisió seleccionada i la versió actual de la pàgina.

Enllaç a la visualització de la comparació

--- dockeritzacio_aplicacions_symfony [2022/07/09 23:13]
oscar_soria [Creació d'una entitat]
+++ dockeritzacio_aplicacions_symfony [2022/07/10 00:40] (actual)
oscar_soria [Creació d'una pàgina d'inici]
@@ Línia 52: / Línia 52: @@
 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 important 60%>
+<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 =====
@@ Línia 179: / Línia 180: @@
 <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.
+A partir d'aquí i fins al final de l'apartat les comandes s'han d'executar al terminal associat al servei **mariadb**.
 </WRAP>
@@ Línia 198: / Línia 199: @@
 </code>
-==== Mostrar el contingut de la base de dades: Controller ====
+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>
-==== Mostrar el contingut de la base de dades: Template ====
+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>

bytes.cat

Eines de l'usuari

Eines del lloc

Diferències

Eines de la pàgina