Desenvolupament web dinàmic backend amb PHP
Conceptes¶

Sessió 1: Backend-PHP¶

Objectiu Sessió 1

En aquesta sessió inicial l'objectiu és introduir el concepte de backend en una web, així com introduir el llenguatge php per a generar dinàmicament el contingut.

Backend¶

El backend és la part d'una aplicació o sistema informàtic que s'encarrega de la gestió de la lògica, el processament de dades i la comunicació amb la base de dades o altres serveis. Funciona en el servidor i no és visible la seva execució directament per l'usuari final, si el seu resultat en format HTML.

Funcions principals del backend:

Processament de dades: Gestiona les sol·licituds dels usuaris i retorna respostes adequades.
Gestió de bases de dades: Connecta amb bases de dades per llegir, escriure, modificar o eliminar informació.
Autenticació i autorització: Controla l’accés dels usuaris mitjançant sistemes d’inici de sessió i permisos.
Comunicació amb el frontend: Proporciona informació al frontend a través d'API o altres mecanismes.
Execució de lògica de negoci: Processa regles i funcions específiques de l'aplicació.

Tecnologies habituals en el backend:

Llenguatges de programació: PHP, Python, Java, JavaScript (Node.js), Ruby, C#, etc.
Bases de dades: MySQL, PostgreSQL, MongoDB, Firebase, etc.
Frameworks: Express.js, Django, Laravel, Spring Boot, etc.
Protocols de comunicació: HTTP/s, REST, GraphQL, WebSockets, etc.

Si ho comparem amb el frontend:

Característica	Frontend	Backend
Funció principal	Mostra la interfície d’usuari i gestiona la interacció.	Gestiona la lògica de negoci, les bases de dades i la comunicació amb el frontend.
Execució	Al navegador de l'usuari.	Al servidor.
Llenguatges comuns	HTML, CSS, JavaScript.	PHP, Python, Java, JavaScript (Node.js), C#, Ruby.
Frameworks habituals	React, Angular, Vue.js.	Express.js, Django, Laravel, Spring Boot.
Bases de dades	No en gestiona directament.	Connecta i gestiona bases de dades com MySQL, MongoDB, PostgreSQL.
Protocols i comunicació	Envia peticions a APIs mitjançant HTTP/HTTPS, AJAX o WebSockets.	Proporciona dades al frontend a través d’APIs REST o GraphQL.
Exemple d’acció	Quan un usuari fa clic a un botó, el frontend envia una petició al backend.	Processa la petició, accedeix a la base de dades i retorna una resposta.

D’alguna manera o altra, tot el que passa al frontend és visible de cares a l’usuari

I tot el que es processa al servidor backend, no ho és i només és visible el retorn de codi HTML, CSS, Javascript… que processarà per formatar interfície frontend al navegador amb UI i UX. D'aquesta manera entenem la seguretat del codi respecte a l'usuari final.

El llenguatge PHP és un dels molts que hi ha per a processar la lògica al servidor web. Altres podrien ser Python, NodeJS, ...

Podrem definir a un servidor web com a:

Un servidor web és un programari o maquinari que s'encarrega de rebre, processar i respondre les sol·licituds dels navegadors dels usuaris, principalment mitjançant el protocol HTTP/HTTPS. La seva funció principal és servir pàgines web, arxius i altres recursos a petició dels clients.

Tipus de servidor web:

Servidor web estàtic: Envia fitxers HTML, CSS, JavaScript i imatges directament sense processar-los.
Servidor web dinàmic: Processa sol·licituds abans de respondre, executant codi (PHP, Python, Node.js) i accedint a bases de dades.

Funcions principals d’un servidor web:

Rebre peticions dels clients (navegadors).
Processar i servir arxius web.
Executar aplicacions web dinàmiques.
Gestionar connexions segures amb HTTPS.
Manejar càrrega i distribuir tràfic amb balanceig de càrrega.

Exemples de servidors web populars:

Apache HTTP Server (Apache)
NGINX
Microsoft IIS
LiteSpeed

Un servidor web és essencial per a qualsevol aplicació basada en web, ja que actua com a intermediari entre els usuaris i el backend.

Com treballen conjuntament el servidor web i el PHP?

Per que es pugui executar i interpretar codi PHP cal un servei instal·lat que:

Escolti les peticions HTTP que li arribin pel port 80. (es pot canviar!)
Miri quin recurs s'ha demanat, si és una pàgina .php llavors:
- llegirà el contingut del fitxer.
- buscarà etiquetes d'inici i final de php <?php ?>
- interpretarà les instruccions.
- amb echo podrem generar interficies dinàmicament.
retornarà el fluxe de HTML generat:
- codi HTML directament escrit al fitxer.
- codi HTML generat d'interpretar codi php.
El parser del navegador interpretarà el codi HTMLrebut i el mostrarà a la interfície.

Llenguatge PHP¶

Introducció al llenguatge php

El llenguatge PHP és utilitzat per desenvolupar aplicacions web en entorn servidor.

Bàsicament usem el PHP per:

Generar interfícies dinàmicament
Accedir a BdD
Crear WebServices

Característiques del PHP:

S'executa en diverses plataformes: Windows, Linux, MAC, ...
Permet l'ús de diverses base de dades.
És lliure i no té cost.
És fàcil d'aprendre i és molt eficient.
Ens servirà per desenvolupar usant Frameworks basats en POO i MVC

Documentació de referència

PHP.net

W3Schools

Versions

El llenguatge php té unes versions que al servidor Web (Apache,Nginx, ...) es capaç de processar i incorporen millores per augmentar el rendiment i la seva actualització.

Versions

php.net/versions

Wikipedia

Exemple bàsic

VisualitzacióCodi PHP

    <?php
        $nom = "Laia";
        echo "Hola " . $nom;
    ?>

Sintaxi¶

Enllaç a W3Schools i PHP.net

Un script PHP s'executa en el servidor i el resultat de codi HTML s'envia del servidor fins al navegador

Bàsicament s'escriu en una pàgina .php, que el motor d'execució de l'Apache interpreta.

El codi o script PHP comença amb <?php o acaba amb ?>

<?php
    // el codi PHP s'escriu aquí
?>

Una pàgina .php pot incloure tant codi HTML com codi PHP.

Exemple bàsic

VisualitzacióCodi PHP

    <!DOCTYPE html>
    <html>
    <body>

    <h1>My first PHP page</h1>

    <?php
        echo "Hola a tothom!";
    ?>

    </body>
    </html>

Les instruccions amb PHP, s'acaben amb ; .

<?php
    echo "Hola a tothom!";
?>

Info

Usarem echo per imprimir o generar codi HTML segons el que indiquem.

A la sessió 3, desenvoluparem més aquet concepte de generació dinàmica de contingut des de backend.

Barrejar HTML i PHP

Podem mostrar HTML segons un codi PHP

Exemple echo

VisualitzacióCodi PHP

    <p>Aquesta línia es mostrarà al navegador</p>
    <?php echo 'Això serà interpretat.'; ?>
    <p>Aquesta línia també es mostrarà al navegador i no serà interpretada per PHP.</p>

NOTA

Si l'extensió del fitxer no és .php, no s'interpreta el codi i retornarà tal qual el codi

Comentaris¶

Enllaç a W3Schools i PHP.net

Un comentari a php és una línia que no s'executarà, per tant no tindrà cap resultat. Per tant només és de lectura per un programador.

Els comentaris han de servir per:

Explicar la lògica del codi, tant per un mateix programador, com altres persones
Capçalera de l'arxiu de codi per ubicar a dins d'un projecte.
Comentar una part de codi en etapa de prova i depuració de la lògica php.

Warning

En cap cas un codi comentat ha de quedar en presentació o explotació d'un codi php

Per comentar un codi php ho podem fer amb:

// comentari de codi d'una línia
# comentari de codi d'una línia
/* i */ comentari de codi de vàries línies

<!DOCTYPE html>
<html>
<body>
    <?php
    // Aquest és un comentari
        # Això també és un comentari

    /*
        Aquest és un comentari
        de codi de diverses línies
        ...
    */
?>
</body>
</html>

Variables¶

Enllaç a W3Schools i PHP.net

Les variables ens serveixen per a guardar valors d'informació d'un tipus de dades. Per això diguem que són tipades, però al moment de declarar-les, no s'indica el tipus, sino que s'assigna el resultat d'una expressió que és d'un tipus. Es pot canviar el tipus de la variable cada vegada que s'assigna un nou valor.

Regles:

Es declaren amb $ al davant i nom variable.
S'hi assigna un valor amb =.
Ha de començar amb un lletra o _
No pot començar amb un número
Ha de contenir A-Z,a-z, _
Són case-sensitive

$nom = "Judit";

Cal tenir present l'àmbit de les variables:

local -> A dins d'una funció.
global -> A qualsevol lloc del codi.
static -> A dins d'una funció, però es manté valor.

NOTA

Pot ser bona tàctica per depurar un programa, anar inspeccionant els seus valors mentre s'executa el codi.

Podeu trobar més info

També podem usar la referència d'una variable amb els ímbol & al davant.

<?php
    $var = "Pere";
    $Refvar = &$var;

    $Refvar = "Carme";
    echo $var;  //El valor de $var s'ha modificat
?>

Tipus¶

Enllaç a W3Schools i PHP.net

Totes les variables contenen un valor que és d'un tipus definit:

boolean: cert o fals
integer: valor numèric enter de -2147483648 fins a 2147483647 de 32 bits
float (o double): valor numèric amb decimals de coma flotant fins a 1.7976931348623E+308
string: cadena de caracters englobada en " ", podem arribar fins a 2 GB de caràcters

i tipus composts:

array: conjunt indexat o associatiu de dades index o clau / valor
object: abstracció de propietats i mètodes sobre una classe definida.

i també especials:

resource
NULL

Podem fer coses com:

<?php
    $var = "Pere";
    $var = 3;
    $var = ($var == 3);
?>

Observem

Si usem var_dump(), podrem observar el valor i tipus assignat:

<?php
    $var = "Pere";
    var_dump($var);
    $var = 3;
    var_dump($var);
    $var = ($var == 3);
    var_dump($var);
?>

Ens mostra:

string(4) "Pere" 
int(3) 
bool(true)

Constants¶

Enllaç a W3Schools i PHP.net

Una constant és un identificador que té un valor assignat que no variable

Per declarar-la: define(nom, valor, case-sensitive)

Exemple constant

VisualitzacióCodi PHP

    <?php
    define("Missatge", "Benvinguts als apunts!");
    echo Missatge;
    ?>

Podem usar unes constants predefinides.

Operadors¶

Enllaç a W3Schools i PHP.net

Els operadors són esencials per a crear i usar expressions en php.

Les expressions les usen per aplicar lògica al nostre codi desenvolupat

Tenim diversos coses a tenir en compte:

Precedència: que pot fer variar el valor final
tipus d'operadors: no és el mateix sumar que comparar:
- aritmètics: + - * / % **
- comparació: == === != <> < > <= >= <=>
- lògics: and && or || xor !
- string: . .=

L'operador més usat és el d'assignació.

Però normalment els operadors els podrem usar tant per a comparar en condicions d'alternatives (if) com per expressions d'assignació

Exemple operadors

VisualitzacióCodi PHPExplicació

    <?php
        $a = 2;
        $b = 3;
        $valor = $a * (3 + $b);
        echo "El valor calculat és $valor.";
    ?>

En aquest exemple . Asignem valors a les variables $a i $b . Calculem expressió: sumar el valor de la variable a la suma de b + 3 . Desem el resultat a una variable $valor, amb operador assignació . Mostrem el valor

Desenvolupament web dinàmic backend amb PHP Conceptes¶

Sessió 1: Backend-PHP¶

Backend¶

Llenguatge PHP¶

Sintaxi¶

Comentaris¶

Variables¶

Tipus¶

Constants¶

Operadors¶

Desenvolupament web dinàmic backend amb PHP
Conceptes¶