El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència

HOME

En aquest tema, aprendrem a crear la interfície d'usuari (UI) per a la nostra aplicació web utilitzant PHP. La UI és la part de l'aplicació amb la qual els usuaris interactuen directament, i és crucial que sigui intuïtiva i fàcil d'utilitzar. Ens centrarem en la creació de pàgines HTML dinàmiques amb PHP, l'ús de plantilles i la integració de CSS per millorar l'aspecte visual.

Objectius

Entendre com generar HTML dinàmic amb PHP.
Aprendre a utilitzar plantilles per a la creació de pàgines web.
Integrar CSS per estilitzar la interfície d'usuari.

Generació d'HTML Dinàmic amb PHP

Exemple Bàsic

Comencem amb un exemple senzill de com PHP pot generar HTML dinàmicament:

<!DOCTYPE html>
<html lang="ca">
<head>
    <meta charset="UTF-8">
    <title>Benvingut a la nostra Aplicació</title>
</head>
<body>
    <?php
    $nomUsuari = "Joan";
    echo "<h1>Benvingut, $nomUsuari!</h1>";
    ?>
</body>
</html>

Explicació

HTML Bàsic: La major part del codi és HTML estàtic.
PHP Embegut: Utilitzem <?php ... ?> per inserir codi PHP dins de l'HTML.
Variable PHP: La variable $nomUsuari conté el nom de l'usuari, que s'insereix dins de l'etiqueta <h1>.

Ús de Plantilles

Les plantilles ens permeten separar la lògica de la presentació, fent el codi més net i mantenible. Utilitzarem un sistema de plantilles senzill amb fitxers PHP.

Exemple de Plantilla

plantilla.php

<!DOCTYPE html>
<html lang="ca">
<head>
    <meta charset="UTF-8">
    <title><?php echo $titol; ?></title>
    <link rel="stylesheet" href="estils.css">
</head>
<body>
    <header>
        <h1><?php echo $titol; ?></h1>
    </header>
    <main>
        <?php echo $contingut; ?>
    </main>
    <footer>
        <p>&copy; 2023 La nostra Aplicació</p>
    </footer>
</body>
</html>

index.php

<?php
$titol = "Pàgina Principal";
$contingut = "<p>Aquesta és la pàgina principal de la nostra aplicació.</p>";
include 'plantilla.php';
?>

Explicació

plantilla.php: Conté l'estructura HTML bàsica amb espais per al títol i el contingut.
index.php: Defineix les variables $titol i $contingut i inclou la plantilla.

Integració de CSS

Per millorar l'aspecte visual de la nostra interfície, afegirem CSS.

estils.css

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
}

header {
    background-color: #333;
    color: #fff;
    padding: 10px 0;
    text-align: center;
}

main {
    padding: 20px;
}

footer {
    background-color: #333;
    color: #fff;
    text-align: center;
    padding: 10px 0;
    position: fixed;
    width: 100%;
    bottom: 0;
}

Explicació

Estils Bàsics: Definim estils per al cos, el capçal, el contingut principal i el peu de pàgina.
Colors i Fonts: Utilitzem colors i fonts per fer la interfície més atractiva.

Exercici Pràctic

Enunciat

Crea una pàgina de contacte utilitzant el sistema de plantilles. La pàgina ha de tenir un formulari amb els camps "Nom", "Correu Electrònic" i "Missatge".

Solució

contacte.php

<?php
$titol = "Contacte";
$contingut = '
<form action="enviar.php" method="post">
    <label for="nom">Nom:</label>
    <input type="text" id="nom" name="nom" required><br><br>
    <label for="email">Correu Electrònic:</label>
    <input type="email" id="email" name="email" required><br><br>
    <label for="missatge">Missatge:</label><br>
    <textarea id="missatge" name="missatge" rows="4" cols="50" required></textarea><br><br>
    <input type="submit" value="Enviar">
</form>
';
include 'plantilla.php';
?>

Explicació

Formulari HTML: El formulari conté camps per al nom, el correu electrònic i el missatge.
Acció del Formulari: El formulari envia les dades a enviar.php mitjançant el mètode POST.

Resum

En aquesta secció, hem après a crear una interfície d'usuari dinàmica amb PHP, utilitzar plantilles per separar la lògica de la presentació i integrar CSS per millorar l'aspecte visual. Aquests conceptes són fonamentals per desenvolupar aplicacions web atractives i fàcils d'utilitzar.

En el següent tema, ens centrarem en la implementació de la lògica del backend per gestionar les dades de la nostra aplicació.

Creació de la Interfície d'Usuari

Objectius

Generació d'HTML Dinàmic amb PHP

Exemple Bàsic

Explicació

Ús de Plantilles

Exemple de Plantilla

Explicació

Integració de CSS

Explicació

Exercici Pràctic

Enunciat

Solució

Explicació

Resum

Curs de Programació PHP

Mòdul 1: Introducció a PHP

Mòdul 2: Estructures de Control

Mòdul 3: Funcions

Mòdul 4: Arrays

Mòdul 5: Treballant amb Formularis

Mòdul 6: Treballant amb Fitxers

Mòdul 7: Programació Orientada a Objectes (OOP)

Mòdul 8: Treballant amb Bases de Dades

Mòdul 9: Tècniques Avançades de PHP

Mòdul 10: Frameworks PHP i Millors Pràctiques

Mòdul 11: Projecte: Construint una Aplicació Web