D116. Mòdul 3. Pràctica 2. Creació i gestió d'entorns web dinàmics (PHP)

Mòdul 3

Creació i gestió d'entorns web dinàmics (PHP)

Pràctica

Exercicis

Formularis

En aquesta pràctica veurem el funcionament dels formularis i de quina manera transmeten les dades entrades en una pàgina PHP. Igualment, veurem algunes funcions útils per treballar amb formularis. Reprendrem també funcions de temps i data.

En cas que no recordem com treballen els formularis i les seves etiquetes html, podeu fer una consulta a l'apartat corresponent del document de suport Cmd HTML (format .rtf), on trobareu, a més, informació molt útil i resumida per treballar amb aquest llenguatge.
Igualment podeu documentar-vos en línia a diverses pàgines com per exemple (en català) http://www.imaginaserveis.com/manuals/html/manual.html o també http://www.desarrolloweb.com/articulos/647.php?manual=21.

Un formulari simple

Per veure el funcionament de tot això, crearem un petit sistema de tramesa de missatges de correu electrònic amb el PHP.

Primerament, però, veurem com funciona el pas de variables mitjançant un formulari molt simple que està contingut en una pàgina html. Assumim que tenim unes nocions de creació de formularis en html.

<html>
<body>
<form method="post" action="processa.php">
<p> Entra el teu nom:
<input name="nom" type="text">
<br>
<input type="submit">
</p>
</form>
</body>
</html>

Llistat 3.2.1. Formulari simple

Aquest formulari el podeu crear directament amb un editor de text o, si ho preferiu, mitjançant programes editors de html, com el Dreamweaver, que ens facilitaran molt la creació de formularis. Podem desar-lo amb el nom de m3p21.html.

Cal que ens fixem en alguns elements clau:

method: recull la manera com s'enviarà la informació. Pot ser POST o GET; en el primer cas, els valors es transmeten de manera oculta (no apareixen a la barra d'adreces del navegador); en el segon cas, apareixeria, per ex.: http://localhost/processa.php?nom=jaume&curs=1&grup=A

La clàusula action: recull el fitxer on s'enviaran les dades del formulari.

name: a cada input o element del formulari (ja sigui de text, ràdio, checkbox...) el formulari li dóna un nom que l'identifica. En l'exemple seria nom. D'aquesta manera, un cop enviades les dades del formulari, la pàgina processa.php rebrà un array associatiu ($_POST o $_GET tal com expliquem a continuació) del qual nom serà una etiqueta i que contindrà el valor entrat al formulari.

El fitxer que recollirà la informació (les variables) del formulari i la processarà s'ha de dir, en l'exemple, processa.php i pot contenir el codi següent:

<?php
$nom = $_POST['nom'];
echo "Hola, ".$nom."!<br><br>";
echo "Com va la vida?";
?>

Llistat 3.2.2. Recollida de dades d'un formulari simple

Ja veieu que podem recollir les variables passades pel formulari, mitjançant el mètode post, d'un array associatiu anomenat $_POST que contindrà tants elements com variables passi el formulari.

En el nostre cas, el formulari només té un input que correspon a una caixa d'entrada de text, a la qual li assignem nom com a name i que arriba a processa en la forma $_POST['nom'].

Arrays $_POST i $_GET

En les versions actuals del PHP (a partir de la 4.2.0) podem accedir a les variables passades per un formulari de dues maneres:

A través de variables globals: cada nom de variable del formulari (name="codi") està disponible com a variable global ($codi). Aquest és el sistema tradicional i més senzill d'implementar, però també, com veurem, més insegur i, per tant, desaconsellat.

A través de tres arrays associatius que el PHP genera en aquest procés:

Array associatiu	Explicació
_POST	Array que conté les variables passades pel mètode POST (nota)
_GET	Array que conté les variables passades a través del mètode GET (nota)
_REQUEST	Array que conté les variables passades a través de qualsevol mètode d'entrada

La manera d'accedir a aquests arrays seria, per ex.: $_POST['cognom'] on cognom seria el nom de la variable i, per tant, equivalent a $cognom i tant en un cas com en l'altre contindria el valor entrat en el formulari.

El primer dels sistemes explicats pot presentar alguns problemes de seguretat, cal bandejar-lo si volem crear aplicatius seriosos i només funcionarà si en el fitxer de configuració php.ini la directiva register_globals està activada a On. És molt interessant saber en tot moment per quin camí ens arriba la informació de les variables: entrada des de la barra d'adreces, des d'un formulari, des d'una cookie,... Conèixer això ens permet de tenir més capacitat de previsió i donar més seguretat al nostre codi.

Les darreres versions del PHP (i també la versió de PHP que hem instal·lat amb l'EasyPHP 1.7) vénen per defecte amb aquesta directiva a Off. Això vol dir que si el PHP està instal·lat en un servidor sobre el qual no tenim el control i la directiva esmentada està desactivada, l'única opció que tindrem serà la segona, que, d'altra banda, funcionarà en qualsevol cas.

Podeu provar, per exemple, de fer servir method=get en el Llistat 3.2.1 i recollir la variable del formulari amb l'array $_GET, amb un funcionament similar al de $_POST, però amb les diferències que acabem d'explicar.

Enviar correu electrònic

Ara complicarem un xic més la pràctica i crearem un petit sistema de tramesa de correu electrònic. És cert que també podem enviar el contingut entrat en un formulari a una adreça de correu mitjançant action=mailto:adreça@xtec.cat, però fer-ho mitjançant el PHP permet més flexibilitat i alguns avantatges.

En el formulari hi haurà diferents tipus d'inputs, com per exemple un text de diverses línies o un checkbox.

Crearem un sistema per sol·licitar la concertació d'una entrevista amb el tutor en un centre d'ensenyament. Un cop els pares hagin omplert les dades del formulari, seran enviades a una adreça de correu electrònic.

Recordem que a la pràctica 3 del mòdul 1 hem configurat el fitxer php.ini amb els valors adequats per a poder enviar correu en una configuració de Windows sense servidor de correu instal·lat.

El valor smtp.xtec.cat que entrem a la directiva SMTP (Sending Mail Transfer Protocol) serveix per indicar a quin lloc (servidor) han d'anar a parar els missatges de correu electrònic per tal de ser enviats.

El servidor que gestiona el correu pot deixar passar lliurement qualsevol dels missatges que li arribin o pot demanar la identitat o autentificació del qui ha enviat el missatge. D'aquesta manera es pot controlar, per exemple, que només els usuaris d'un servidor puguin enviar correus a través seu; i d'aquesta manera es poden evitar alguns potencials problemes de spam ( correu no desitjat

) generats per algun usuari del servidor. Es pot, també, deixar passar lliurement el correu que es tramet a les adreces del mateix servidor, però que s'autentifiqui quan s'enviï a una adreça d'un servidor extern.

En funció del tipus de servidor o de les nostres necessitats ho podem fer de dues maneres :

amb la funció mail() , que incorpora el propi llenguatge PHP. Actualment la majoria de servidors de correu utilitzen protocols d'autentificació per garantir una minimització del correu brossa o spam . Aquesta opció no soporta els protocols d'autentificació, tot i així podeu trobar l'explicació i el codi en un document complementari titulat Exemple amb la funció mail ( ) .
amb una llibreria PHP especialitzada en correu autentificat anomenada phpmailer. Aquesta opció és la més segura, versàtil i fiable, és per tant amb la que desenvoluparem el nostre sistema de concertar entrevista.

Primerament, veiem el codi de la pàgina html que conté el formulari. Podeu copiar aquest codi a l'editor i desar-lo amb el nom de demanahora.html.

<!doctype html public "-//W3C//DTD HTML 4.0 //EN">
<html>
<head>
<title>Tutoria</title>
</head>
<body>
<form method="POST" action="prho_aut.php" >
<b>Sol·licitud de cita de tutoria</b>
<br><br>
Dades de l'alumne/a<br>
DNI: <input type="text" name="dni" size="20"> <br>
Nom: <input type="text" name="nom" size="20"> <br>
Primer cognom: <input type="text" name="cognom1" size="20"> <br>
Segon cognom: <input type="text" name="cognom2" size="20"> <br>
<br>
Tria pla d'estudis
<br>
<input type="radio" name="pla" value="ESO">ESO<br>
<input type="radio" name="pla" value="BATX">Batxillerat<br>
<input type="radio" name="pla" value="CF">Cicles formatius <br>
<br>
Curs
<select name="curs">
<option></option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
Grup
<select name="grup">
<option></option>
<option>A</option>
<option>B</option>
<option>C</option>
<option>D</option>
<option>E</option>
<option>F</option>
</select>
<br><br>

Motiu de l'entrevista
<br>
<textarea name="motiu" cols="25" rows="6"></textarea>
<br><br>
Propostes d'horari<br>
Proposta 1: <input type="text" name="proposta1" size="20"> <br>
Proposta 2: <input type="text" name="proposta2" size="20"> <br>
Proposta 3: <input type="text" name="proposta3" size="20"> <br>

Llistat 3.2.3. Formulari de sol·licitud d'entrevista de tutoria

Executant aquest codi, podeu veure que ens permet entrar dades en el formulari. Observeu els diferents tipus d'input i el seu comportament. Fixeu-vos especialment en textarea; el contingut d'aquest input l'haurem de retocar perquè quedi correcte.

Enviant el formulari per correu autentificat.

En la configuració dels clients de correu electrònic si hem d'enviar correu a través d'un smtp amb autentificació, caldrà que el configurem correctament amb les dades que ens identificaran davant del servidor, que normalment solen ser el nostre identificador i la nostra constrasenya. Des de fa temps, els usuaris dels serveis de correu de la XTEC, de la mateixa manera que es feia a l'hora de rebre missatges, s'han d'autentificar per enviar-ne a servidors externs, tal com s'explica a la pàgina Correu autentificat

de la XTEC.

Per tot això, si en la nostra configuració SMTP del php.ini hi posem "smtp.xtec.cat", només podrem enviar missatges a les adreces del mateix servidor i no pas a les de fora.

Una manera de solucionar això, tant en l'entorn Windows com Linux, seria instal·lant un servidor de correu que gestionés aquestes operacions de sortida del correu. És a dir, treballar amb el nostre propi servidor de correu. Aquesta solució té l'inconvenient de la seva relativa complexitat tècnica que pot diferir segons el sistema operatiu utilitzat.

Però una manera relativament senzilla de solucionar això és fer servir alguna de les classes disponibles que permeti enviar correu autentificat.

A la la xarxa hi ha diverses rutines que permeten d'enviar correu autentificat. Una d'aquestes opcions és la classe phpmailer. Podeu trobar informació sobre aquesta classe a la seva pàgina web (http://phpmailer.sourceforge.net/) o bé, en castellà, a la pàgina http://www.programacion.com/php/articulo/phpmailer/. En tots dos llocs hi ha, a més, diversos exemples de funcionament.

Si no teniu massa clar què són les classes i els objectes, us en podeu fer una idea anant a la pàgina de suport Introducció a les classes i objectes en php, en el benentès que es tracta només d'una primera aproximació al tema.

A continuació, podeu veure el codi corresponent a " prho_aut.php" . Aquest és el nom que ha de tenir la pàgina receptora de les dades entrades al formulari anterior. Podeu copiar aquest codi a l'editor i desar-lo amb el nom de prho_aut.php a la mateixa carpeta on heu guardat el fitxer demanahora.html.

<?php
/*---------------------------------------------------------------
* Mòdul: 3 Pràctica: 2 Fitxer: prho_aut.php
* Autor: D116 Data:
* Descripció: Tramesa de correu amb smtp autentificat
* Alternativa opcional a 'prochora.php'
* Pre condi.: Cal haver entrat dades al fitxer 'demanahora.html'
* Cal tenir accessible els fitxers de la classe phpmailer
* en el directori 'includes'
* Post cond.:
-----------------------------------------------------------------*/

// Requerim (incloem) el fitxer amb la classe 'phpmailer'
require "includes/class.phpmailer.php";

// Definim els valors que varien en cada cas:
// usuari, servidor smtp, contrasenya, etc.
// Posant els valors adequats aquí no cal tocar res més
$smtp_host = "smtp.xtec.cat"; // servidor smtp
$smtp_usuari = "xxxxxx"; // usuari xtec
$smtp_pword = "xxxxxxx"; // contrasenya xtec
$adr_origen = "xxxxxxxxx"; // adreça del remetent
$nom_origen = "xxxxxxxx"; // nom del remetent
$adr_desti = "xxxx@uoc.edu"; // adreça destinatari

// Recuperem les variables passades pel mètode POST i les "traiem"
// de l'array associatiu $_POST.
// Ho fem per tenir el codi més clar i manejable. Podríem treballar
// directament amb l'array però en codis llargs seria més feixuc.

$motiu = $_POST['motiu'];
$dni = $_POST['dni'];
$nom = $_POST['nom'];
$cognom1 = $_POST['cognom1'];
$cognom2 = $_POST['cognom2'];
$curs = $_POST['curs'];
$pla = $_POST['pla'];
$grup = $_POST['grup'];
$proposta1 = $_POST['proposta1'];
$proposta2 = $_POST['proposta2'];
$proposta3 = $_POST['proposta3'];

echo "<b>Text de motiu sense tractar</b><br><br>";
echo $motiu."<br><br><br>";
echo "<b>Text de motiu tractat</b><br><br>";
$motiu = trim($motiu); //traiem espais en blanc al principi i al final
$motiu = stripslashes($motiu); //traiem caràcter d'escapament davant '
$motiu_mail = $motiu;
$motiu = nl2br($motiu); // convertim salts de paràgraf a <br>
echo $motiu."<br><br><br>";

// Instanciem un objecte de la classe phpmailer
$mail = new phpmailer();

//Indiquem a la classe phpmailer on es troba
//la classe smtp
$mail->PluginDir = "includes/";

//Amb la propietat Mailer li indiquem que farem servir un
//servidor smtp
$mail->Mailer = "smtp";

//Assignem el nostre servidor smtp
$mail->Host = $smtp_host;

//Indiquem que el servidor smtp requereix autenticació
$mail->SMTPAuth = true;

//Indiquem usuari i password
$mail->Username = $smtp_usuari; //usuari de correu
$mail->Password = $smtp_pword; //contrasenya usuari de correu

//Indiquem l'adreça de correu i el nom que
//volem que vegi el destinatari
$mail->From = $adr_origen;
$mail->FromName = $nom_origen;

//valor de Timeout
$mail->Timeout=30;

//Indiquem l'adreça del destinatari
//$mail->AddAddress("xxxxx@uoc.edu");
$mail->AddAddress($adr_desti);

//Asignem assumpte i cos del missatge
$mail->Subject = "Cita tutoria";

$missatge_html = "<b>DNI: </b>".$dni."<br>";
$missatge_html .= "<b>Nom: </b>".$nom." ".$cognom1." ".$cognom2."<br>";
$missatge_html .= "<b>Curs: </b> ".$curs." ".$pla." ".$grup."<br><br>";
$missatge_html .= "<b>Motiu: </b>".$motiu_mail."<br><br>";
$missatge_html .= "<b>Propostes d'horari </b><br>";
$missatge_html .= "<b>Proposta 1: </b>".$proposta1."<br>";
$missatge_html .= "<b>Proposta 2: </b>".$proposta2."<br>";
$missatge_html .= "<b>Proposta 3: </b>".$proposta3."<br>";
$missatge_html .= "<br><br><br><i>Missatge enviat el ".date("d/m/Y")." a les ".date("H:i:s")."</i>";

$missatge_pla = "DNI: ".$dni."\n";
$missatge_pla .= "Nom: ".$nom." ".$cognom1." ".$cognom2."\n";
$missatge_pla .= "Curs: ".$curs." ".$pla." ".$grup."\n\n";
$missatge_pla .= "Motiu: \n".$motiu_mail."\n\n";
$missatge_pla .= "Propostes d'horari \n";
$missatge_pla .= "Proposta 1: ".$proposta1."\n";
$missatge_pla .= "Proposta 2: ".$proposta2."\n";
$missatge_pla .= "Proposta 3: ".$proposta3."\n";
$missatge_pla .= "\n\n\n Missatge enviat el ".date("d/m/Y")." a les ".date("H:i:s");

// Definim el cos del missatge (en format html, en negreta)...
$mail->Body = $missatge_html;

//Definim AltBody per si el destinatari del correu no admet mail amb format html
$mail->AltBody = $missatge_pla;

echo "Enviant missatge...";

//Enviem el missatge...
//$exit tindrà el valor true si no hi ha hagut problemes
$exit = $mail->Send();

//Si no s'ha pogut enviar realitzem 4 intents més...
//fem una pausa de 5 s a cada nou intent ( funció sleep )
$intents = 1;
while ((!$exit) && ($intents < 5)) {
sleep(5);
$exit = $mail->Send();
$intents = $intents + 1;
}

if(!$exit)
{
echo "Problemes enviant el mail a ".$adr_desti;
echo "<br/>".$mail->ErrorInfo;
}
else
{
echo "Missatge enviat correctament.";
}
?>

Llistat 3.2.4.a. Processament del formulari de sol·licitud d'entrevista de tutoria. Correu autentificat.

En aquest codi podem observar el següent:

El fet d'usar el PHP per enviar el missatge de correu permet 'modelar' i distribuir la informació al nostre gust: unir variables, etc.
Tornem a fer servir la funció date(), que permet recuperar la data i hora del sistema del servidor i la retorna amb el format que desitgem.
Observeu que definim el missatge en dos format ( HTML i text plà), d'aquesta manera el receptor escollirà en quin format ho vol rebre.

El codi té abundants comentaris que ajuden a entendre'l millor. Recordeu que:

Heu de copiar el fitxer demanahora.html i el fitxer prho_aut.php en la mateixa carpeta, i per inciar el procés heu de cridar al fitxer demanahora.html.

cal que feu els canvis pertinents a les línies en negreta, entrant els valors correctes a les xxxxxx que hi apareixen. Aquí hi entrarem valors com el nom d'usuari i la seva contrasenya que serviran perquè el servidor "autoritzi" la tramesa.

Pràctica

Exercicis