dissabte, 26 de setembre del 2009

Tercer problema: codi sense estructura

Una cosa que considerava, no un problema solament sinó que poc elegant, era el fet que, quan interactuava amb la base de dades, no disposava de cap estructura de dades robusta per treballar amb els valors recuperats o a escriure en ella. Normalment aquestos valors vagaven lliurement pel codi, cadascun en una variable o en una estructura senzilla com un array i eren globals a tota l'aplicació, de manera que es podia accedir a ells i modificar-los fàcilment des de qualsevol part del codi.

Calia buscar una manera més organitzada i eficient d'usar la base de dades i les dades que anaven a guardar-se o recuperar-se d'ella. Mentre investigava sobre el tema per trobar una bona solució van aparéixer alguns conceptes nous, o altres que ja em sonaven de quan vaig conéixer Ruby on Rails, com Mapeig objecte-relacional (o Object Relational Mapping o ORM), que és una tècnica de programació per convertir dades entre una base de dades relacional i un llenguatge de programació orientat a objectes; persistència, que és l'acció de conservar la informació d'un objecte de forma permanent de tal forma que més tard es puga recuperar per poder ser usada de nou; i Abstracció de Bases de Dades (o Database Abstraction Layer o DAL), que és una interfície que unifica la comunicació entre l'aplicació i la base de dades.

Per posar en pràctica tots aquestos conceptes calia abandonar la manera tradicional d'usar PHP i passar-se a la programació orientada a objectes i usar un patró de disseny anomenat ActiveRecord.

continuarà...

dimecres, 16 de setembre del 2009

Exemple de layout

Per si no va quedar massa clara al post anterior l'explicació sobre que és un layout, ací va un exemple:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"...>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Títol</title>
    <meta http-equiv="Content-Type" content="text/html; ... />
    <link href="./css/estil.css" rel="stylesheet" type="text/css" />
  </head>

  <body>
    <div id="container">
      <div id="header">
        <div id="banner"><?php ?><div>
        <div id="menu_superior"><?php ... ?></div>
      </div>
      
      <div id="contents">
        <div id="esquerra"><?php ... ?>/div>
        
        <div id="central">
          <div id="breadcrumbs"><?php ... ?></div>
          <div id="noticiari"><?php ... ?></div>
        </div>

        <div id="dreta"><?php ... ?></div>
      </div>

      <div id="footer"><?php ... ?></div>
    </div>
  </body>
</html>

Com es pot veure, en aquest senzill layout es defineix l'estructura de la pàgina; en aquest cas una capçalera amb un banner i un menú superior, la secció dels continguts amb una columna a cada lateral i una central amb lloc per als breadcrumbs i altre lloc per al contingut principal, a més d'un peu de pàgina; i es deixa a PHP que siga l'encarregat de plenar cada secció amb els continguts dinàmics usant les vistes del patró MVC.

continuarà...

diumenge, 13 de setembre del 2009

Segon problema: repetició de codi

Hi havia fragments de codi que es repetien constantment. Per exemple, en PHP el codi necessari per establir una connexió amb la base de dades podria ser aquest:

<?php

$link 
mysql_connect("localhost","root","");
mysql_select_db("basquet",$link);

?>

Cada vegada que volguérem connectar amb la base de dades per recuperar qualsevol informació deuríem incloure el fragment de dalt abans de la consulta. Fer-ho així dificultaria el manteniment de l'aplicació si decidírem realitzar algun canvi que afectara a la forma de connectar amb la base de dades ja que deuríem buscar cada aparició d'aquest fragment de codi al llarg de tota l'aplicació per aplicar les modificacions corresponents.

Si tenim en compte la filosofia DRY, que ve a dir, més o menys, que cap part del codi font d'una aplicació mai deuria estar repetida, una solució senzilla a aquest problema consistiria en escriure el codi anterior a un fitxer anomenat, per exemple, connexioBD.php i usar-lo amb la funció include() cada vegada que volguérem consultar la base de dades. D'aquesta manera si necessitàrem realitzar modificacions sobre aquest codi només hauríem de fer canvis en aquest fitxer i no a tota l'aplicació.

Qualsevol altra situació similar en la que existisca codi PHP repetit al llarg de l'aplicació es deuria resoldre seguint el mateix esquema: aïllar el codi en un fitxer i substituir-lo per una crida a la funció include().

En quant al codi HTML, podem distingir dins d'un document d'aquest tipus parts que no varien al llarg de l'aplicació, com poden ser la declaració del DOCTYPE o l'estructura del contingut del document; i parts que sí ho fan, com per exemple les etiquetes <meta>, <title> o <link> i les famoses vistes del patró MVC, que són on estarà la informació relevant per a l'usuari.

Ací apareix el que s'anomena layout, que no és més que un document HTML on es defineixen les parts que no canvien i l'estructura del contingut del document (per exemple, dos columnes amb menú superior o tres columnes amb menú superior i lateral). A més, s'inclou una mica de codi PHP, només el necessari, per tal de col·locar les vistes del patró MVC als llocs correctes.

D'aquesta manera, només cal especificar quin layout s'usarà a l'aplicació web i aquesta s'encarregarà de que dins del layout es col·loquen les vistes necessàries. Així no cal tindre decenes de pàgines HTML amb el mateix layout en totes i cadascuna d'elles ja que podrem usar el mateix cada vegada que siga necessari. Una vegada fet açò, enviarà el layout junt amb totes les vistes necessàries al navegador.

continuarà...

divendres, 4 de setembre del 2009

Primer problema: mescla de codi

Per reanudar les meues aventures amb PHP vaig decidir intentar fer una aplicació web que permetera gestionar campionats de bàsquet. L'aplicació deuria permetre a un administrador crear una competició, inscriure els equips i els seus jugadors, realitzar els sortejos dels partits i introduir els resultats i les seues estadístiques; a la resta de gent deuria permetre visualitzar els resultats i les diferents classificacions.

Em plenava de satisfacció veure com l'aplicació creixia a poc a poc i que tot el que tenia en ment ho podia plasmar en codi però, per altra part, cada vegada resultava més complicat afegir noves funcionalitats o característiques. Hi havia una sèrie de situacions que vaig adonar-me que calia evitar si volia ser capaç de crear aplicacions web d'una manera senzilla i ràpida.

Un dels principals obstacles que m'impedia avançar a un ritme decent era la mescla de codi, també coneguda com codi spaghetti, que es produïa. En només unes poques línies podien barrejar-se fins quatre llenguatges de programació diferents. Per exemple, en aquest simple fragment de codi...

<?php

$link 
mysql_connect("localhost","root","");
mysql_select_db("basquet",$link);
$result mysql_query("select * from categoria order by nom",$link);

echo 
"<table width = '20%' border = '0'>";

while (
$categoria mysql_fetch_array($result)){
  echo 
"<tr>";
  echo 
"  <td width = '15%' bgcolor = '#cccccc'>".$categoria["nom"];
  echo 
"  </td>";
  echo 
"</tr>";
}

mysql_free_result($result);
mysql_close($link);

echo 
"</table>";

?>

...es pot observar que hi ha PHP, SQL, HTML i CSS, aquestos dos últims incrustats dins del document final a base d'usar reiteradament la instrucció echo, cosa que no em convencia massa. A més, si es volguera fer ús de JavaScript, tenint en compte com han estat incrustats l'HTML i el CSS, és lògic pensar que es faria de la mateixa manera, amb echo. Per tant, serien cinc els llenguatges que hi hauria barrejats.

Aquesta barreja dificulta el manteniment en gran mesura, ja que, quan més codi hi ha, més difícil resulta identificar el llenguatge amb el que es vol treballar. A més, si a mi, que treballe a soles, em resulta complicat fer-ho en aquestes circumstàncies, imagineu un equip de desenvolupadors on cadascun d'ells fóra responsable d'un llenguatge diferent. Si el codi que generaren fóra en un estil similar al de més amunt, amb tots els llenguatges barrejats, el desenvolupament d'una aplicació web pense que seria impossible. Necessitarien treballar sobre el mateix fitxer diverses persones, per exemple, un d'ells per insertar codi HTML, un altre per insertar codi PHP i, pot ser, un altre per al JavaScript; sense que cadascun d'ells haja d'entendre el codi que ha escrit un dels altres o, pitjor encara, permetent la possibilitat de que algú puga eliminar-lo o modificar-lo.

La solució més extesa a aquest problema passa pel que s'anomena Model Vista Controlador o MVC.

MVC és un patró de disseny que separa les dades d'una aplicació, la interfície d'usuari i la lògica de control en tres components distints. A una aplicació web, el model és el sistema gestor de bases de dades; les vistes són els fitxer HTML, on es descriuen els documents que han de mostrar-se al navegador (aquestos documents poden tindre PHP al cas que s'usen estructures de control com bucles, per exemple, per escriure dades a les fileres d'una taula), i el fitxer CSS, usats per donar format als documents HTML; i el controlador el responsable de processar la interacció de l'usuari, obtindre les dades dels models, processar-les i tornar l'eixida a la vista per mostrar-la al navegador.

Doncs ja tenim identificat un dels problemes típics en el desenvolupament d'aplicacions web i una possible solució que implementaré més endavant.

continuarà...