Skip to main content

Les vistes

Aqui tenim les vistes existents i les detallem per adaptar-les a l'estructura de controladors i la gestió d'errors 404 que hem implementat. L'aplicació té dues vistes principals a la carpeta App/views/.

Vista principal: App/views/main.php

 

Funció Codi Generat
Descripció És la pàgina d'aterratge carregada pel controlador Ctl_Home::index(). Conté un enllaç al llistat d'usuaris.
Codi (HTML + PHP) Aquesta vista genera una estructura HTML bàsica.
PHP 
<?php
/* Block time: 20221207 15:47:50*/
defined('MVC_APP') or die('Permission denied');
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Main page. Intranet.</title>
    <link rel="stylesheet" type="text/css" href="app/views/css/estil.css">
</head>
<body>
    <h1>Main page INTRANET</h1>
    <div>
        <a href="index.php?controller=users">Llista usuaris</a>
        </div>
    <div>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. [...]
    </div>
</body>
</html>

 

Vista d'usuaris: App/views/users/page.php

 

Funció Codi Generat
Descripció Mostra la llista de noms i cognoms obtinguts pel model Mdl_users i injectats pel controlador Ctl_users::index() a través de la variable $info_guests.
Codi (HTML + PHP) Aquesta vista itera sobre l'array de dades per generar una llista HTML.
PHP 
<?php
/* Block time: 20221207 15:47:50*/
defined('MVC_APP') or die('Permission denied');
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Llista usuaris</title>
    <link rel="stylesheet" type="text/css" href="app/views/css/estil.css">
</head>
<body>
    <h1>Llista usuaris</h1>
    <div class="el_meu_estil">
        <ul>
            <?php
            // La variable $info_guests conté l'array associatiu de la BD
            if (!empty($info_guests)) {
                foreach ($info_guests as $row) {
                    echo "<li>" . htmlspecialchars($row['firstname']) . " " 
                          . htmlspecialchars($row['lastname']) . "</li>";
                }
            } else {
                echo "<li>No s'ha trobat cap usuari o hi ha hagut un error de connexió.</li>";
            }
            ?>
        </ul>
    </div>
</body>
</html>

 

Arxiu Millora Explicació
App/views/main.php Actualitzar el link El controlador d'usuaris ara s'accedeix mitjançant index.php?controller=users (o index.php?action=users), reflectint la lògica de routing.
App/views/users/page.php Sanitització S'afegeix htmlspecialchars() a les dades impreses ($row['firstname'], $row['lastname']) per prevenir Cross-Site Scripting (XSS).
App/views/users/page.php Validació S'afegeix un if (!empty($info_guests)) per gestionar correctament el cas on el model retorna un array buit o null (com succeeix en cas d'error de la BD amb el nou model PDO).

 

Vista error 404: App/views/404.php

Per donar suport al mètode Ctl_Home::error404(), cal crear aquesta vista d'error.

Funció Codi a Crear
Descripció Pàgina de resposta en cas que el controlador o l'acció sol·licitada no existeixi.
Codi (HTML + PHP) Genera el missatge d'error.
PHP 
<?php
/* Block time: 20251117 - Vista 404 */
defined('MVC_APP') or die('Permission denied');

// El controlador ja ha enviat la capçalera HTTP/1.0 404 Not Found
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>404 - Pàgina no trobada</title>
    <link rel="stylesheet" type="text/css" href="app/views/css/estil.css">
</head>
<body>
    <h1 class="el_meu_estil">Error 404 - Recurs No Trobat</h1>
    <p>La pàgina o el recurs que heu sol·licitat no existeix en aquesta adreça.</p>
    <div>
        <a href="index.php">Tornar a la pàgina d'inici</a>
    </div>
</body>
</html>

 

Estils App/views/css/estil.css

El fitxer d'estils App/views/css/estil.css és extremadament senzill i serveix únicament per demostrar la càrrega d'un recurs extern des de les vistes (View), complint així el patró MVC.

Element Descripció
Contingut Conté una única regla de CSS.
Selector Aplica estils a qualsevol element que tingui la classe el_meu_estil.
Estils Defineix el color del text a vermell (color: red;) i augmenta la mida de la font a molt gran (font-size: x-large;).
Funció a l'MVC Confirma que les rutes als recursos estàtics són correctes i que les vistes poden enllaçar fitxers CSS externs per gestionar la presentació.
CSS 
.el_meu_estil{
    color: red;
    font-size: x-large;
}

Aquesta classe és utilitzada per la vista d'usuaris (page.php) per aplicar un estil distintiu a la llista d'elements.

Back to top