Salta el contingut

Desenvolupament web dinàmic backend amb PHP
Conceptes

Sessió 3: Generem dinàmicament

Objectiu Sessió 3

Aprendre a generar interficies HTML + CSS dinàmiques des de backend

Fonaments de la Generació Dinàmica

  • Què és la generació dinàmica?

    • La generació dinàmica implica crear pàgines web que canvien el seu contingut o aspecte en funció de factors com les accions de l'usuari, les dades d'una base de dades o altres variables.
    • A diferència de les pàgines estàtiques, que sempre mostren el mateix contingut, les pàgines dinàmiques s'adapten i es personalitzen.

  • Per què és important?

    • Personalització: Permet oferir experiències d'usuari personalitzades.
    • Interactivitat: Facilita la creació d'aplicacions web interactives.
    • Actualització de dades: Permet mostrar dades actualitzades en temps real.
    • Eficiència: Redueix la necessitat de crear pàgines web individuals per a cada possible variació de contingut.

Important

Important a tenir en compte que totes aquestes pàgines generen un HTML + CSS des de el servidor backend. Com a resultat de la crida HTTP GET URL es genera la interfície i retorna el contingut específic amb format HTML.

En cap cas les instruccions de PHP que s’executen al servidor web es veuen al client. Això dona molta seguretat en la lògica de negoci en l’aplicació.

Només es visualitza la UI que ens interessa com a resultat de la petició HTTP GET

Arquitectura backend

echo

la instrucció principal de PHP per a poder implementar aquest concepte és echo

Info

php.net

W3Schools

Exemple 1 simple

    <!DOCTYPE html>
    <html>
    <body>
    Valor: 
    <?php
        $num = 3;
        echo $num;
    ?>
    </body>
    </html>

Exemple molt bàsic

Definim una variable '$num' i assignem un valor 3

Llavors fem echo $num;

Exemple 2 formatem negreta

    <!DOCTYPE html>
    <html>
    <body>
    Valor: 
    <?php
        $num = 3;
        echo "<strong>" . $num . "</strong>";
    ?>
    </body>
    </html>

Si volem generar un valor amb negreta ho podem fer també a dins del echo amb l’etiqueta <strong>

Exemple 3 generem llista

    <!DOCTYPE html>
    <html>
    <head>
        <title>Llista de números</title>
    </head>
    <body>
        <h1>Llista de números de l'1 al 10</h1>
        <ul>
            <?php
            for ($i = 1; $i <= 10; $i++) {
                echo "<li>Número: " . $i . "</li>";
            }
            ?>
        </ul>
    </body>
    </html>

Si volem generar una llista <ul> i 10 elements amb <li>

El que fem és:

    <?php
    for ($i = 1; $i <= 10; $i++) {
        echo "<li>Número: " . $i . "</li>";
    }
    ?>

Fer un bucle i amb la variable $i que anem incrementant la posem a dins del echo "<li>..."

Exemple 4 generem llista

    <!DOCTYPE html>
    <html>
    <body>
    <?php
      $html = file_get_contents("p3-s3-ex4.html");
      $html = str_replace("ul","ol",$html);
      echo $html
    ?>
    </body>
    </html>

    <ul>
      <li>Número 1</li>
      <li>Número 2</li>
      <li>Número 3</li>
      <li>Número 4</li>
      <li>Número 5</li>
      <li>Número 6</li>
      <li>Número 7</li>
      <li>Número 8</li>
      <li>Número 9</li>
      <li>Número 10</li>
    </ul>

Tenim la mateixa llista d'abans, però ara ja generada en un arxiu "p3-s3-ex4.html"

    $html = file_get_contents("p3-s3-ex4.html");
    $html = str_replace("ul","ol",$html);
    echo $html

Llegeix el contingut de l'arxiu

Modifiquem <ul> per <ol>

I generem HTML per retornar amb echo

D’alguna manera els frameworks de php actuen d’aquesta manera per a generar les vistes

Info

https://www.laravel.com/
https://www.symfony.com/
https://www.slimframework.com/

Usen el complement/llenguatge TWIG per a inserir i dinamitzar les interfícies HTML

Info

https://twig.symfony.com/

La possibilitat d’accedir al sistema de fitxers del servidor ens donarà l’opció de dinamitzar el contingut que s’envia al frontend.

Aquí s'obre un món inmens en la generació dinàmica de contingut.

Veiem un petit exemple:

Exemple 5 Imatges

    <!DOCTYPE html>
    <html>
    <body>
    <?php
        $carpeta = 'imatges/';
        $fitxers = scandir($carpeta);

        // Filtra només les imatges
        foreach ($fitxers as $fitxer) {
            if (preg_match('/\.(jpg|jpeg|png|gif)$/i', $fitxer)) {
                echo "<img src='$carpeta$fitxer' style='width: 200px; margin: 10px; border-radius: 5px; box-shadow: 2px 2px 5px rgba(0,0,0,0.2);'>";
            }
        }
    ?>
    </body>
    </html>

Primer obtenim els arxius d'una carpeta

   $carpeta = 'imatges/';
   $fitxers = scandir($carpeta);

Tot seguit recorrem els arxius

Per cada arxiu mirem l'extensió si és jpg, jpeg, png o gif i creem l'etiqueta HTML <img src=...> corresponent.

    foreach ($fitxers as $fitxer) {
        if (preg_match('/\.(jpg|jpeg|png|gif)$/i', $fitxer)) {
            echo "<img src='$carpeta$fitxer' style='width: 200px; margin: 10px; border-radius: 5px; box-shadow: 2px 2px 5px rgba(0,0,0,0.2);'>";
        }
    }