Salta el contingut

Llenguatge PHP: Com ho fem per...?

Es tracta de generar de manera dinàmica una interfície web des de el servidor amb llenguatge PHP

Aquesta pàgina:

  • Serà per petició HTTP de pàgina .php al servidor
  • El servidor interpreta el codi PHP i ho retorna conjuntament amb el HTML + CSS + Javascript
  • El client rep aquest codi HTML + CSS + Javascript i el parser del navegador l'interpreta i munta la interfície per mostrar
  • La pàgina .php conté una sola etiqueta d’inici i final
  • La pàgina .php pot contenir tants blocs de .php com facin falta <?php ….. ?>

Generar la interfície

Amb codi PHP declarem totes les variables que ens facin falta.

1
2
3
4
5
6
<?php
    $nom = “Judit”;
    $edat = 23;
    $poblacio = “Girona”;
    $ruta_imatge = “imatges/judit.jpg”;
?>
Aquest bloc de variables el podem posar a l’inici del codi de la pàgina

Creem la Interfície amb codi HTML

<HTML>
    <BODY>
        Nom: 
        <BR>
        Edat:
        <BR>
        Població:
        <BR>
        Imatge: <IMG SRC=’’>
    </BODY>
</HTML>

Amb això tenim una interfície molt bàsica com a plantilla

Ara cal fer que els valors desats a les variables apareixin a la interfície

Per fer-ho cal fer que s’escrigui el seu valor amb echo $nom_var;

Per tant el codi queda:

<HTML>
    <BODY>
        Nom: <?php echo $nom; ?>
        <BR>
        Edat: <?php echo $nom; ?>
        <BR>
        Població: <?php echo $nom; ?>
        <BR>
        Imatge: <IMG SRC=’<?php echo $ruta_imatge; ?>’>
    </BODY>
</HTML>

El codi HTML generat i que retorna serà

<HTML>
    <BODY>
        Nom: Judit
        <BR>
        Edat: 23
        <BR>
        Població: Girona
        <BR>
        Imatge: <IMG SRC=’imatges/judit.jpg’>
    </BODY>
</HTML>
comhofemper1.php comhofemper1.php

Note

La interfície és molt bàsica, es pot millorar amb etiquetes DIV i estils CSS

Aplicar estils a la interfície i formatem

Per aplicar un estil a una interfície el codi PHP no cal que intervingui.

Tenim tres opcions:

  • atribut style a una etiqueta
  • les etiquetes de <STYLE>
  • o un fitxer extern <LINK>

El que si podem fer amb PHP és generar estils dinàmicament, per exemple, posar un color o un altre a un estil

1
2
3
4
5
<?php
    $color = “red”;
?>

<P STYLE=’color:<? echo $color; ?>’ > Temperatura </P>

Això generarà un codi

<P STYLE=’color:red’ > Temperatura </P>

I una interfície

Temperatura

Podem aplicar aquest estil a moltes etiquetes i només canviant el valor de la variable $color canviarà a tot arreu.

Generar codi javascript dinàmic

Tenir codi javascript a una pàgina web simplement cal inserir-ho tant a dins de les etiquestes com

1
2
3
4
5
<BODY>
    <script>
        var numero = 5;
    </script>
</BODY>

El que podem fer amb PHP és dinamitzar aquest valor assignat amb una variable PHP

1
2
3
4
5
6
7
8
<BODY>
    <?php
        $numero = 33;
    ?>
    <script>
        var numero = <?php echo $numero; ?>;
    </script>
</BODY>

Fixeu-vos que a l’interpretrar la pàgina .php generarà el codi web següent

1
2
3
4
5
<BODY>
    <script>
        var numero = 33;
    </script>
</BODY>
comhofemper2.php comhofemper2.php

Fixeu-vos també com tenim dos ; a la mateixa línia, el primer ; és del codi PHP i el segon del codi javascript.

També podeu observar com els identificadors de les dues variables és el mateix, però no passa res, ja que l’espai de memòria que usen és en dos llocs diferents. La variable de PHP es processa al servidor i la variable javascript es processa al navegador del client.

Tingueu present que el fer la petició de la pàgina web .php s’interpreta el codi PHP una vegada al servidor i llavors envia el codi generat dinàmicament al client i aquí el javascript donarà dinamisme a la interfície, podent canviar el valor d’aquesta variable numero en una altra part del codi.

Depurar un programa

La manera més bàsica de depurar un codi php és mostrar pel fluxe de codi HTMLque genera el valor que conté la variable:

echo
<?php
    $num = 3;
    echo $num;
    $num++;
    echo $num;
?>
Ens retornarà al fluxe de 'HTML' el valor de la variable '$num'

Podem fer-ho més informatiu:

echo
<?php
    $num = 3;
    echo "$num:" . $num;
    $num++;
    echo "$num:" . $num;
?>

Però sovint ens pot interessar observar el tipus que té o fins i tot tots els possibles valors si és un tipus compost o objecte, per aquest motiu usarem:

var_dump
<?php
    $num = 33;
    var_dump($num);
?>
L'avantatge és que ara ens indica el valor i el tipus de dades que conté la variable.

Success

També tenim alguns complements a dins de l'IDE que es poden connectar amb Apache i depurar línia a línia

Xdebug

Obtenir les dades passades per URL

Quan fem una petició HTTP podem passar una serie de dades. entre elles la URL, que és una cadena de caracters de màxim 255 caràcters i que pot contenir una sèrie d’arguments. Aquests arguments estan a continuació del símbol ? i cada un dels que passem estaran diferenciats per &

http://www.exemple.com/alta.php?dni=40123456X&nom=Judit

No poden contenir espais i estan tractats com a text

<?php
    if (isset($_GET[‘dni’])
        $dni = $_GET[‘dni’];
    else
        $dni = “”;
    if (isset($_GET[‘nom’])
        $nom = $_GET[‘nom’];
    else
        $nom = “”;
?>

la funció isset() ens permet veure si està declarada. D’aquesta manera podem llegir de l’array de la variable superglobal $_GET.

Generar formularis HTML dinàmicament

La idea és que al moment de generar un formulari el seu contingut es generi dinàmicament. No és tant les etiquetes HTML, sino els valors. Per a poder recollir els valors al servidor cal l’atribut NAME a l’etiqueta HTML. ID seria per a javascript.

Per inserir un valor d’una variable a un quadre de text

<?php
    $valor = 22;
    <input type=’TEXT’ value=’<?php echo $valor?>’>
?>

Per generar valors d’opcions d’un SELECT HTML, podem usar un bucle FOR, per exemple

<?php
    echo “<select name=’Valors’>”;
    for ($i=1; $i<=10; $i++)
        echo “<option value=’” . $i . “‘>” . $i . “</option>”;
        echo “</select>;
?>

Per marcar un input checkbox com a marcat

<?php
    $actiu = true;
    if ($actiu)
        echo “<input type=’CHECKBOX’ checked>”;
    else
        echo “<input type=’CHECKBOX’>”; 
?>

Per marcar un tipus input radio com a marcat

<?php
    $valor1 = “Valor1”;
    $valor2 = “Valor2”;
    $valorActiu = $valor2;
    if ($valorActiu == $valor1)
        $checked = “ checked “;
    else
        $checked = “ “;
    echo “<input type=”radio” name=‘valors’ value=’” . $valor1 . ”’ “ . $checked . “ >”;
    if ($valorActiu == $valor2)
        $checked = “ checked “;
    else
        $checked = “ “;
    echo “<input type=”radio” name=‘valors’ value=’” . $valor2 . ”’ “ . $checked . “ >”;    
?>

Per triar una opció de select

<?php
    $selectactiu = 33;
    echo “<select name=’valors’>”;
    for ($i=25; $i<40; $i++)
        if ($selectactiu == $i)
            echo “<option value=’” . $i . “‘ selected=’selected’>” . $i . “</option>”;
        else
            echo “<option value=’” . $i . “’>” . $i . “</option>”;
        echo “</select>”; 
?>

Crear o rebre un formulari HTML

Un formulari HTML el podem tenir configurat tant per enviar dades via GET com POST. La resposta que rep el servidor Apache pot ser recollida amb la variable superglobal $_GET o $_POST o la genèrica $_REQUEST, que no deixa de ser una array associativa als elements que conté el FORM HTML.

<?php
    if ($_GET) // o ($_POST)
        // Rebem formulari HTML
    else
        // NO Rebem formulari HTML
?>

Per poder aconseguir aquest comportament, cal que ACTION sigui $_SERVER['PHP_SELF']Aixi aconseguim que cridi de nou a la mateixa pàgina .php.

<?php
    if ($_POST)
    {
        echo “El número escrit és: “ . $_POST["num1"];
    }
    else
    {
?>          
    <form action="<?php echo $_SERVER['PHP_SELF'] ?>" method='post'>
            <input type='text' size='4' id='num1' name='num1'           <br>
            <input type='submit' value='Enviar'>    
    </form>
<?php
    }   
?>

El que aconseguim amb aquest codi es que si hem passat dades ho mostri amb l’echo

Per aconseguir el valor d’un camp del formulari simplement fem referència al camp associatiu de l’array que rebem a $_GET o $_POST o $_REQUEST per a més genèric.

$nom = $_REQUEST[‘nom’];

Si tenim un camp HIDDEN és igual

<INPUT TYPE=’Hidden’ name=’ID’ value=’33’>
$id = $_REQUEST[‘id’];

La utilitat dels Hidden és que poden passar valors que hem carregat al formulari inicial sense que l’usuari no ho vegi.

Crear una funció per generar lògica repetida

L’ús de funcions amb PHP ens ajuda a desenvoluar codi de manera estructurada i descendent.

És la part prèvia a la programació per frameworks, que usarà mètodes i objectes en la lògica de desenvolupament.

Un exemple possible a realitzar: Inserir un Salt Html equivalent a etiqueta HTML <BR>

Per fer-ho usem un identificador únic que ens serveixi per identificar de manera única inserir una etiqueta

function SaltBR()
{
    echo “<br>”;
}

Aquesta funció és molt simple, però ens permetrà inserir al fluxe de codi HTML que retorna el servidor cap la client

<?php
    echo “Benvinguts !”;
    SaltBR();
?>

El fluxe de codi HTML generat seria

Benvinguts !<BR>

Podem incrementar l’ús d’aquesta funció amb el pas d’arguments

function SaltBR($salts)
{
    for ($i=1;$i<=$salts;$i++)
    echo “<br>”;
}

Això ens pot permetre fer crides a la funció de l’estil

<?php
    echo “Benvinguts !”;
    SaltBR(4);
?>

El fluxe de codi HTML generat seria

Benvinguts !<BR><BR><BR><BR>

Ara bé, estem obligats a posar-hi un argument a la crida. Podem modificar el valor d’aquest comportament convertint el pas d’arguments a un valor per defecte si no el passem

function SaltBR($salts = 1)
{
    for ($i=1;$i<=$salts;$i++
    echo “<br>”;
}

Això ens permetria fer de manera indistinta crides de l’estil

<?php
    echo “Benvinguts !”;
    SaltBR(4);
    echo “Avui és dilluns.”;
    SaltBR();
?>

El fluxe de codi HTML generat seria

Benvinguts !<BR><BR><BR><BR>Avui és dilluns.<BR>

Si el que volem és generar una funció que li pasem un codi HTML i ens afageixi una etiqueta <BR>, podem fer dues coses:

Fer que la funció ens retorni un valor Fer que la funció modifiqui el valor que li passem

Rebem els arguments, apliquem la lògica i retornem amb return el resultat.

function AfegirSaltBR($html, $salts = 1)
{
    for ($i=1;$i<=$salts;$i++
    $html .= “<br>”;
return $html;
}

La crida hauria de ser:

<?php
    $html = “Hola “;
    $html = AfegirSaltBR($html,2);
    $html = AfegirSaltBR($html);

    echo $html;
?>

O opció 2, fer-ho per pas d’arguments per referència, posant & al davant de l’argument. Això fa que l'espai de memòria sigui el mateix i qualsevol modificació es manté a fora de la funció.

function AfegirSaltBR(&$html, $salts = 1)
{
    for ($i=1;$i<=$salts;$i++
    $html .= “<br>”;
}

La crida hauria de ser:

<?php
    $html = “Hola “;
    AfegirSaltBR($html,2);
    AfegirSaltBR($html);

    echo $html;
?>

En tots dos casos el fluxe retornat seria

Hola<BR><BR><BR>

En les versions més actuals de PHP, >= 7, podem usar els tipus en la declaració d’arguments, la qual cosa ens permetrà assegurar un millor pas del tipus de valor i donarà errada si no són iguals. També podem indicar el valor de retorn de la funció

function AfegirSaltBR(string &$html, int $salts = 1) : string
{
    for ($i=1;$i<=$salts;$i++
    $html .= “<br>”;
}

Com usar fitxers includes

Un pas més en la estructuració del codi és usar diferents arxius per agrupar la lògica desenvolupada.

Aquest concepte el podem aplicar a diversos usos:

  • Agrupació de funcions que usarem en les diverses pàgines PHP
  • Compartir un model de dades amb les mateixes variables amb valors predefinits. (Ull, no confondre amb variables de sessió)

Per fer-ho usarem els includes a inici del fitxer PHP. El que es fa és llegir tot el contingut del fitxer a incloure i es copia literalment al fitxer. Per tant el codi de l’arxiu include en forma part.

Tenim un parell de opcions a implementar:

  • Include: si el fitxer no existeix o no hi té accés, genera un warning, no s’atura.
  • Require: si el fitxer no existeix o no hi té accés, genera una errada i s’atura.

Per incloure un arxiu ho posem a l’inici del codi PHP

<?php
    include “ruta/arxiu.php”;

    ...
?>

El fitxer a incloure ha de contenir també les etiquetes PHP

<?php
    echo “Benvinguts al programa X”;
?>

De manera pràctica podem usar els includes per afegir:

  • conjunt de variables o constants amb valors per defecte. (No confondre amb variables de sessió)
  • conjunt de funcions compartides entre diferents pàgines
  • generació dinàmica de contingut web, per exemple estils.

Usar un array per desar dades compostes d’una entitat. Per exemple ‘alumne’

Per fer aquest cas, el que farem serà usar un array associatiu amb les dades dels alumnes que es volen desar. Volem desar DNI, nom i població:

$alumne = array(“dni”=>”40111222X”,”nom”=>”Jordi Bosch”,”poblacio”=>”Girona”);

Ara si volem mostrar el nom de l’alumnes, fariem:

echo $alumne[‘nom’];

Si volem desar un conjunt d’alumnes el que podem fer és crear un array de doble nivell:

$alumnes = array (
    array(“dni”=>”40111222X”,”nom”=>”Jordi Bosch”,”poblacio”=>”Girona”),
    array(“dni”=>”40333444A”,”nom”=>”Judit Soler”,”poblacio”=>”Salt”),
    array(“dni”=>”40555666F”,”nom”=>”Maria Pla”,”poblacio”=>”Sils”)
);

on a cada posició de l’array, posem les dades d’un alumne. Aquesta primera opció ho fa per posicions, per tant per accedir a l’alumne de la posició 1, fariem:

echo $alumnes[1][‘nom’];

escriuria Judit Soler

Si el que volem és accedir a les dades de l’alumne per un índex associatiu el que cal fer és indexar l’array de cada alumne:

$alumnes = array (
    “40111222X” => array(“dni”=>”40111222X”,”nom”=>”Jordi Bosch”,”poblacio”=>”Girona”),
    “40333444A” => array(“dni”=>”40333444A”,”nom”=>”Judit Soler”,”poblacio”=>”Salt”),
    “40555666F” => array(“dni”=>”40555666F”,”nom”=>”Maria Pla”,”poblacio”=>”Sils”)
);

Per tant, ara podriem fer:

echo $alumnes[‘40555666F’][‘nom’];

i escriuria Maria Pla

Usar un array per idiomes interfície

Crear un array de 2 nivells de l’estil

$texts = array(
    “català” => array(“títol” => “Llibreria petita”, “Població”=> “Girona”),
“castellà” => array(“títol” => “Libreria pequeña”, “Població”=> “Gerona”)
);

definim

$idioma = “català”;
echo $texts[$idioma][‘títol’] . “ de “ . $texts[$idioma][‘Població’];

escriuria

Llibreria Petita de Girona

si definim

$idioma = “castellà”;
echo $texts[$idioma][‘títol’] . “ de “ . $texts[$idioma][‘Població’];

escriuria

Libreria pequeña de Gerona

Com recorrem els valors d’un array associatiu?

Per fer-ho farem ús del foreach, on podrem definir la tupla clau=>valor

De les dades:

$alumnes = array (
    “40111222X” => array(“dni”=>”40111222X”,”nom”=>”Jordi Bosch”,”poblacio”=>”Girona”),
    “40333444A” => array(“dni”=>”40333444A”,”nom”=>”Judit Soler”,”poblacio”=>”Salt”),
    “40555666F” => array(“dni”=>”40555666F”,”nom”=>”Maria Pla”,”poblacio”=>”Sils”)
);

Fariem

<?php
    foreach($alumnes as $clau=>$alumne)
    {
        echo “<BR>Dades de l’alumne: “ . $clau;
        echo “<BR>DNI: “ . $alumne[‘dni’];
        echo “<BR>Nom: “ . $alumne[‘nom’];
        echo “<BR>Població: “ . $alumne[‘poblacio’];
    }
?>

D’aquesta manera no ens cal saber les posicions de les dades per mostrar-les totes.

Dividir un string a valors d’un array

Ho farem amb la funció explode. On indicarem quin és l’element de divisió de l’sting

$string = “Hola, bon dia!”;
$dades = explode(“,”,$string);

Ens retorna un array amb l’string separat per la ,.

$dades[0] -> “Hola”
$dades[1] -> “bon dia!”

Generar un string amb valors d’un array

De manera inversa podem generar un string a partir dels valors d’un array amb implode

$dades = array(“audi”,”bmw”,”citroen”);
$string = implode(“,”,$dades);
echo “Marques: “ . $string;

Faria

Marques: audi,bmw,citroen

Això pot ser molt útil per moure dades d’arrays entre sistemes en format text.

Com comentem el codi

Amb PHP podem comentar el codi de dues maneres:

  • // línia a línia
  • /* amb bloc de codi */

La idea és comentar la lògica del codi seguint les premises següents:

  • Comentar a la part superior del fitxer el concepte del fitxer
    • indicant aplicació, projecte, data, autor, …
  • Comentar a cada funció
    • la interficie de la funció, els paràmetres
    • la lògica de la funció
  • Comentar la lògica dels blocs de codi
  • En cap cas deixar codi desactivat com a comentat en procés de producció

.

<?php
    /*
        Projecte: Certificació de productes alimentaris
        Empresa: XXXXX
        Data: Abril 2021
        Autor: Jordi Bosch
        Fitxer: index.php -> portada aplicació
    */

    /*
        Funció de Capçalera
        Function Header($títol)
        paràmetres:
            títol -> string
        lògica: Mostra la capçalera de l’aplicació
    */

    function Header(titol)
    {
        // mostrem el títol de l’aplicació amb format H1i posem ratlla
        echo “<H1>” . $titol . “</H1>”;
        echo “<BR>”;
        echo “<HR>”;
    }
?>