Enrera
Mòdul 6

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

  Pràctica
1
2
3
4
   
Exercicis
Exercicis
 
   Identificació d'usuaris    
 
  Abans d'entrar a analitzar el codi que compon aquest aplicatiu, us demanem que accediu a una còpia externa de l'aplicatiu funcional; recordeu que aquest sistema és de mostra, i per tant, les dades només són de lectura; el sistema no deixarà activar cap seqüència d'inserció, modificació o esborrament de les dades existents. Seguiu els passos que us indiquen:
   
 
Accés a l'aplicatiu de tutoria
   
 

L'aplicatiu s'inicia amb una pantalla d'identificació de professor/a.Identifiqueu-vos amb les dades següents:

 
Usuari/ària: LC-ATR en majúscules
Curs acadèmic: 2002  
Contrasenya: assumpta en minúscules
   
  Si la identificació ha estat correcta, accediu a una pantalla on visualitzeu un menú amb les opcions: tutoria, consultes, informes, administració, identificació i desconnexió. Observeu que a la part superior el sistema ha identificat l'usuari/ària i la tutoria que té assignada; a més, detecteu des de quina adreça IP s'hi està accedint. Seleccioneu l'opció de Tutoria.
   
 

Figura 6.1.1. Detall de la capçalera. Identificació d'usuari i accés

   
 

Figura 6.1.2. Menú general de l'aplicatiu de tutoria

   
  Ara accediu a una pantalla on es mostra els alumnes que pertanyen a la tutoria d'aquesta professora; seleccioneu el primer alumne: ANTON CASAS, DANIEL. Premeu el botó Entrevistes. Visualitzeu les entrevistes que té associades aquest alumne.
   
 

Figura 6.1.3. Selecció d'alumne/a

   
  En aquesta pantalla, Historial d'entrevistes, s'observa en una franja per sobre la taula d'entrevistes les dades d'aquest alumne: nom i cognom, curs actual, número de matrícula i any acadèmic. A la taula d'entrevistes podeu veure aspectes com: identificatiu de l'entrevista, curs acadèmic en què es va fer l'entrevista, estat, data de petició i d'entrevista, així com els temes que s'hi tracten. En cada bloc només es presenten cinc entrevistes; en cas que n'hi hagi més, s'activaran els enllaços a les pàgines següents amb les seves icones corresponents.
   
 

Figura 6.1.4. Historial d'entrevistes relacionades amb un alumne/a

   
  A la part inferior de la taula d'entrevistes, trobareu un menú amb els codis identificatius de les entrevistes visualitzades i tres botons (Consulta, Modifica i Esborra). Noteu que per donar d'alta un altra entrevista, heu d'accedir a la part superior, en un enllaç que posa: Nova entrevista. Seleccioneu una entrevista, i premeu el botó de Consulta.
   
 

Figura 6.1.5. Selecció de funció

   
  En aquest cas, visualitzareu un formulari on es presenten les dades pertanyents a l'entrevista seleccionada. Noteu que només hi ha un botó a la part inferior amb el text D'acord, ja que es tracta simplement d'una consulta. Premeu D'acord i torneu a l'Historial d'entrevistes.
   
 

Figura 6.1.6. Requeriment de consulta d'una entrevista

   
  Una vegada a Historial d'entrevistes, seleccioneu un altre identificador i premeu el botó Modifica. Ara s'obrirà un formulari com el de la figura següent, on es mostren les dades emmagatzemades a la base de dades tutoria, taula entrevistes. Aquest formulari conté varietat de controls per formularis (camps de data, hora, text i opcions de selecció), i tres botons d'acció (Modifica, Descarta canvis, Restableix formulari). Modifica, introdueix les dades del formulari a la base de dades. Descarta canvis, s'encarrega de sortir d'aquest apartat sense acceptar les modificacions, i Restableix refresca de nou el formulari, amb les dades que conté la base de dades.
   
 

Figura 6.1.7. Requeriment de modificació d'una entrevista

   
  Seleccioneu Descarta canvis, i tornareu a la pantalla d'Historial d'entrevistes. Escolliu un identificador d'entrevista i premeu Esborra. Observeu que es presenta la mateixa pantalla de Consulta d'entrevista, amb la diferència que els botons de la part inferior han variat. En una petició de baixa del registre d'una entrevista, primer presenteu les dades que voleu esborrar, i amb els botó Confirma Esborra valideu l'ordre de treure el registre de la base de dades. I amb el botó Descarta Esborra, anul·leu l'ordre de baixa i retorneu a l'Historial d'entrevistes sense modificar la taula entrevistes de la base de dades.
   
 

Figura 6.1.8. Requeriment d'esborrar l'entrevista

   
  Premeu el botó Descarta Esborra i a la pantalla d'Historial d'entrevistes, al menú de la part superior, trobareu un enllaç per crear Nova entrevista; si el premeu, accediu al formulari de Nova entrevista. Observeu que és molt semblant a la pantalla de modificació, amb la diferència que internament executa una ordre d'inserció de nou registre en comptes d'una actualització de registre que fa al mòdul de modificació d'entrevista.
   
 

Figura 6.1.9. Requeriment d'alta de nova entrevista

   
  Recordeu que per sortir de l'aplicatiu, heu d'accedir a l'opció Desconnexió del menú de la part superior. Aquesta ordre s'encarrega de tancar la sessió que ha obert l'usuari/ària, ja que és l'encarregada de mantenir la seguretat del sistema davant atacs no autoritzats o usuaris no autentificats.
   
  Bé, fins aquí heu fet un passeig per l'aplicatiu de Tutoria que presentem i que al llarg d'aquest mòdul desglossarem, per analitzar i descobrir el codi PHP i HTML que amaga.
   
Atenció !
Recordeu que podeu baixar-vos el fitxer comprimit m6.zip que conté els fitxers de base d'aquest l'aplicatiu per executar-lo al vostre ordinador (en local) i connectar-lo a la base de dades Tutoria que heu anat creant en mòduls anteriors. Els fitxers que conté els heu de copiar a la carpeta .../EasyPHP1-7/www/prac_d116/m6/ seguint l'estructura de fitxers següent:
   
 

Figura 6.1.10. Estructura de carpetes del directori virtual /d116/

 
Atenció !
Tingueu present que en aquest mòdul, a diferència de la resta, els quadres de codi que es mostren a les pràctiques són parcials, i per tant, no funcionaran si els executeu. Tots els fitxers necessaris es troben al fitxer m6.zip que heu descarregat, i també els podeu veure en línia amb la icona Visualitza codi. Per comprovar el funcionament dels scripts en local, treballeu amb els fitxers sencers que us donem.
   
Establir les bases
   
  En aquesta pràctica s'iniciarà tot el procés, a partir d'una identificació de seguretat de l'usuari/ària que vol accedir a l'aplicatiu de tutoria. Les dades dels usuaris i contrasenyes s'han emmagatzemat a la BD tutoria, a la taula professors.
   
  En primer lloc, trobeu un bloc que s'anirà repetint en tots els mòduls de l'aplicatiu, on inicieu aspectes de sessió, ja que per mesures de seguretat assegureu que les dades que passen entre els processos són inaccessibles pel client, perquè es guarden al servidor, i una vegada acabada la sessió es destrueixen.
   
  session_start();
include_once("config.inc.php");
include_once(_DIR_ADODB."adodb.inc.php");
include_once(_DIR_CONNEXIO."tutoria_con.php");
include_once("funcions.php");
  Llistat 6.1.1. Codi parcial del fitxer identifica.php
   
  Seguidament, trobeu un seguit de sentències include_once, que segons el mòdul varien. Podeu observar que hi ha inserides dues constants, que són: _DIR_ADODB i _DIR_CONNEXIO, que contenen el camí virtual al directori on està instal·lada la biblioteca ADODB, i al directori on hi ha emmagatzemats els fitxers de connexió a la base de dades, respectivament. Detallem ara quina és la funció de cada fitxer que incloureu:
   
 
  • config.inc.php. Aquest fitxer conté un seguit de constants definides que podeu utilitzar al llarg de l'aplicatiu de tutoria. L'avantatge de tenir les constants totes declarades en un lloc agilitza molt qualsevol identificació parametritzable segons l'usuari/ària. Podeu observar que s'hi poden incloure moltes altres variables per augmentar la portabilitat del sistema.
   
Veure codi

<?php
/*---------------------------------------------------------------
* Mòdul: 6 Aplicatiu de tutoria Fitxer: config.inc.php
* Autor: D116 Data:
* Descripció: Fitxer de definicio de valors constants
* Pre condi.: Cap
* Post cond.: Cap
----------------------------------------------------------------*/

// Constants de centre
define("_CENTRE", "IES Rosa dels Vents");
define("_POBLACIO", "Barcelona");
define("_DIRECTOR", "Anselm Jofresa i Garrigosa");
define("_SECRETARI","Paula Santracreu i Gómez");
define("_ADMINISTRADOR","admin_tut@pie.xtec.net");

// Constants directoris aplicatiu
define("_DIR_ADODB","../adodb/"); // directori ADODB relativa a web
define("_DIR_CONNEXIO","./connexio/"); // directori connexions BD
define("_DIR_IMATGES","./imatges/"); // directori imatges

// Constants d'errors
define("_ERR_000","Poseu-vos en contacte amb l'administrador del sistema");
define("_ERR_001","Aquest usuari no està actiu o hi ha un error
en el nom d'usuari o la contrasenya ");
define("_ERR_002"," L'usuari/a no té assignada cap tutoria");

// Establim paràmetres regionals en català dies,hora,moneda,numèrics
// ca -> Català / sp -> Castellà ..... (en windows)
// Alerta! Definicions diferents per a Windows i Linux
setlocale(LC_ALL,"ca"); // Definició per a Windows
//setlocale(LC_ALL,"ca_ES"); // Definició per a Linux
?>

  Llistat 6.1.2. Codi fitxer config.inc.php
   
 
  • adodb.inc.php. Si recordeu aquest fitxer, és el principal de la llibreria ADODB. Noteu que abans del fitxer es defineix una constant, _DIR_ADODB, que conté el camí relatiu a la carpeta on es troba ADODB i que està definida al fitxer config.inc.php, abans mencionat.
   
 
  • funcions.php. Aquest fitxer conté un seguit de funcions que es van repetint en molts dels mòduls que creareu, com per exemple la identificació del nom i grup de l'alumne/a a partir del número de matrícula i l'any acadèmic.
   
 
  • tutoria_con.php. Podeu entreveure que el procés d'establir una connexió a la base de dades es repetirà al llarg de la majoria de mòduls; llavors, hem optat per crear un fitxer on només definiu el procés de connexió, i l'incloureu quan faci falta. Es tracta del mateix fitxer que s'ha explicat i treballat al mòdul 5, a la pràctica 2.
   
Veure codi
<?php
/*-----------------------------------------------------------------
* Mòdul: Pràctica: Fitxer: tutoria_con.php
* Autor: D116 Data:
* Descripció: Fitxer que estableix la connexió amb la BD
* Pre condi.: BD 'tutoria'
* Post cond.: Retorna un punter al mètode $ConTut
-----------------------------------------------------------------*/

$MM_ConTut_HOSTNAME = "localhost"; // Nom de la màquina o IP servidor
$MM_ConTut_DBTYPE = "mysql"; // Tipus de base de dades
$MM_ConTut_DATABASE = "tutoria"; // Nom de la base de dades
$MM_ConTut_USERNAME = "root"; // Usuari per accedir a la BD
$MM_ConTut_PASSWORD = ""; // Contrasenya per accés a la BD

$ConTut = &ADONewConnection($MM_ConTut_DBTYPE);

// Petits ajustos per connectar-nos a Acces o ODBC /IBASE / i altres.
if($MM_ConTut_DBTYPE == "access" || $MM_ConTut_DBTYPE == "odbc"){
$ConTut->Connect($MM_ConTut_DATABASE, $MM_ConTut_USERNAME,
$MM_ConTut_PASSWORD);
} else if($MM_ConTut_DBTYPE == "ibase") {
$ConTut->Connect($MM_ConTut_HOSTNAME.":".$MM_ConTut_DATABASE,
$MM_ConTut_USERNAME,$MM_ConTut_PASSWORD);
} else {
$ConTut->Connect($MM_ConTut_HOSTNAME,$MM_ConTut_USERNAME,
$MM_ConTut_PASSWORD,$MM_ConTut_DATABASE);
}

?>

  Llistat 6.1.3. Fitxer de connexió tutoria_con.php
   
  Blocs estructurals de l'aplicació
   
  Una vegada feta aquest introducció, continuem amb el fitxer identifica.php. A la figura següent podeu observar un disseny gràfic dels blocs abstractes que contindrà aquest fitxer:
   
 

Figura 6.1.11. Esquema de blocs generals del fitxer identifica.php

   
  En primer lloc, comproveu que veniu de la pantalla d'identificació d'usuari. Si és així, definiu unes variables locals per guardar l'usuari, l'any acadèmic i la contrasenya donades per l'usuari/ària que hi vol accedir. Si hi ha la variable local usuari i està plena, llavors assigneu a les varibles fitxer_correcte i fitxer_NOcorrecte els valors adequats. Seguidament, creeu la sentència SQL per cercar l'usuari a la taula professors. Fixeu-vos que no desencripteu la contrasenya que teniu a la base de dades per comparar-la amb la que ha entrat l'usuari o la usuària, sinó que el que feu és exactament el contrari: busqueu a la base de dades si hi ha algun registre amb el nom d'usuari/ària introduït i la contrasenya, prèviament encriptada amb la funció del PHP anomenada MD5( ). Si resulta que el sistema respon a la consulta afirmativament, significa que l'usuari/ària està registrat i validat, i s'assigna a una variable de sessió el codi del professor/a.
   
Veure codi

// Comprovem que s'hagin enviat les dades del formulari
if (isset($_POST['enviar'])){
$usuari = $_POST['usuari'];
$contrasenya = $_POST['contrasenya'];
$any_acad = $_POST['any_acad'];
}

// Si tenim la variable $usuari definida i té algun contingut...
if ( isset($usuari) && $usuari != "") {

$fitxer_correcte = "./index.php?"; /* fitxer redireccionament si usuari correcte. + interrogant al final */
$fitxer_NOcorrecte = "./logout.php"; /* fitxer redireccionament si usuari incorrecte.*/

// Creen consulta sql comparant usuari i contrasenya
$sql = "SELECT codi, contrasenya FROM professor ";
$sql .= "WHERE CODI='".$usuari."' AND CONTRASENYA='".MD5($contrasenya)."'";

// Execució consulta. Usuari vàlid?
$rs1 = $ConTut->Execute($sql) or die($ConTut->ErrorMsg()) ;

// Si hem trobat algun usuari que coincidís...
if (!$rs1->EOF) {
// Usuari i contrasenya vàlids (Control seguretat 1)
$_SESSION['S_codi_prof'] = $usuari;

  Llistat 6.1.4. Codi parcial del fitxer identifica.php
   
  Un segon control de seguretat consisteix a comprovar que l'usuari/ària identificat té una tutoria assignada. Si és així, memoritzeu en variables de sessió les dades que necessitareu al llarg de l'aplicatiu i que van associades a aquest professor/a (any acadèmic, etapa, nivell, grup, nivell de seguretat...). En cas contrari, tanca la sessió, estableix una galeta (cookie) d'error, i encamina al fitxer logout.php, notificant prèviament que l'usuari/ària identificat no té cap tutoria activa.
   
Veure codi
// Comprovar que professor té tutories assignades(Ctrl seguretat 2)
$sql2 = "SELECT etapa, nivell, grup FROM tutories ";
$sql2 .= "WHERE codi='".$usuari."' AND curs_acad ='".$any_acad."'";

// Execució consulta. Tutoria assignada?
$rs2 = $ConTut->Execute($sql2) or die($ConTut->ErrorMsg()) ;

// Hem trobar coincidència: té tutoria.
if (!$rs2->EOF){
// Professor assignat a una tutoria activa
$_SESSION['S_any_acad'] = $any_acad;
$_SESSION['S_etapa'] = $rs2->Fields('etapa');
$_SESSION['S_nivell'] = $rs2->Fields('nivell');
$_SESSION['S_grup'] = $rs2->Fields('grup');
// Tanquem segona connexió: ja tenim les dades!
$rs2->Close();

} else {
// Professor que no té tutoria activa el curs acadèmic sol.licitat

session_unset(); // Esborrem (destruïm) variables de sessió
setcookie("err", _ERR_002, time()+20); /* Establim cookie per a missatge d'error */
header ("Location: $fitxer_NOcorrecte"); /* Redireccionem com a no correcte */
exit;
}

  Llistat 6.1.5. Codi parcial del fitxer identifica.php
   
   
  Per últim, hi ha el cas d'haver de prendre una decisió d'acord amb les comprovacions anteriors. Si tot és correcte, desactiveu una variable de sessió que bloqueja l'aplicatiu i encamineu l'usuari/ària a la pàgina Index.php, que conté el menú de les opcions de tutoria. En cas que la identificació hagi estat fallida, tanqueu la sessió i encamineu l'usuari/ària a logout.php, que informa del fracàs de l'accés.
   
Veure codi // Autoritzem entrada
$_SESSION['S_stop'] = 0 ;
// Redireccionem com a correcte
header ("Location: $fitxer_correcte".session_name()."=".session_id());
exit;
}

// Si no hem trobat coincidència d'usuari i contrasenya al fitxer
$rs1->Close();
session_unset(); // Esborrem (destruïm) variables de sessió

// Redireccionem com acces NO correcte
header ("Location: $fitxer_NOcorrecte");
exit;

  Llistat 6.1.6 . Codi parcial del fitxer identifica.php
   
Atenció !
La resta del fitxer és codi HTML, on també esta inclòs el formulari per entrar les dades, amb els botons corresponents. Noteu que el botó d'enviar s'envia les dades a si mateix, i és llavors que processa tot el codi PHP que hem explicat.
   
  <html>
< head>
< title>D116 - Aplicatiu de tutoria</title>
< meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
< /head>
<body bgcolor="#86AED7" text="#000000" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<?php
// Cridem la capçalera comuna de l'aplicatiu
include("cap.php");
?>
< form name="form1" method="post" action="<?php echo $_SERVER['PHP_SELF']?>">
< p align="center">&nbsp;</p>
< table width="389" height="272" border="0" align="center" bgcolor="#EDE8C9">
< tr bgcolor="#CCCC99">
< td height="35" colspan="4"> <div align="center"><font size="2" face="Verdana, Arial, Helvetica, sans-serif"><strong>Identificaci&oacute;
d'usuari</strong></font></div></td>
</tr>
<tr>
<td width="130" height="15">&nbsp;</td>
<td width="1" height="15">&nbsp;</td>
<td width="244" height="15" colspan="2">&nbsp;</td>
</tr>
<tr>
<td width="130" height="47"> <div align="right">
<p><font size="2" face="Verdana, Arial, Helvetica, sans-serif">Usuari:
</font></p>
</div></td>
<td width="1" height="47">&nbsp; </td>
<td height="47" colspan="2"><input type="text" name="usuari"> </td>
</tr>
<tr>
<td bordercolor="#000000" height="41"> <div align="right"><font size="2" face="Verdana, Arial, Helvetica, sans-serif">Curs
acad&egrave;mic:</font></div></td>
<td height="41">&nbsp;</td>
<td height="41" colspan="2"> <font size="1" face="Verdana, Arial, Helvetica, sans-serif">
<input name="any_acad" type="text" id="any_acad4" size="4" maxlength="4">
valor inici curs acad&egrave;mic AAAA </font></td>
</tr>
<tr>
<td width="130" bordercolor="#000000" height="49"> <div align="right"><font size="2" face="Verdana, Arial, Helvetica, sans-serif">Contrasenya</font>:
</div></td>
<td width="1" height="49">&nbsp; </td>
<td height="49" colspan="2"><input type="password" name="contrasenya"> </td>
</tr>
<tr>
<td height="65" colspan="4"> <div align="center">
<input type="submit" name="enviar" value="Enviar">
&nbsp;&nbsp;
<input type="reset" name="esborrar" value="Restablir">
</div></td>
</tr>
</table>
</form>
</body>
</html>
   
   
   
 
Amunt
Pràctica
pràctica_1
Pràctica_2
Pràctica_3
Pràctica_4
Exercicis
Exercicis