Modelo Vista Controlador en accin | parte 2

3. El Modelo
En esta aplicacin solo utilizaremos una clase que ser la encargada de hacer las peticiones a la base de datos, pero primero necesitamos un archivo de configuracin que ayudar a la conexin a la base de datos. El archivo config.php. Las clases que necesitemos asi como el config.php deben estar dentro del directorio model.
model/config.php

? 1<?php 2define("DB_SERVER", "localhost"); 3define("DB_USER", "root"); 4define("DB_PASS", ""); 5define("DB_NAME", "mvc_angelfqc"); ?> 6

//tu servidor //tu usuario //contrasea //base de datos

El config.php define 4 constantes, DB_SERVER, DB_USER, DB_PASS y DB_NAME a las que se les ha asignado los datos de nuestra base de datos. Una constante segn el manual oficial de PHP es: Un identificador (nombre) para expresar un valor simple. Como el nombre sugiere, este valor no puede variar durante la ejecucin del script Una constante es sensible a maysculas por defecto. Por convencin, los identificadores de contantes siempre suelen declararse en maysculas. Ahora las cases, que solo es una clase clsCliente, esta contiene una variable para asignas los nombres, otra para los apellidos y otra para el email. Luego los mtodos para obtener los datos, insertar, eliminar y listar todos los clientes.
model/clsCliente.php <?php require_once '../model/config.php'; class clsCliente{ public $nombres; public $apellidos; public $email; protected $conx; public function __construct(){ $this->nombres = ""; $this->apellidos = "";

$this->email = ""; $this->conx = new mysqli(DB_SERVER, DB_USER, DB_PASS, DB_NAME); } public function get($id){ $id = htmlspecialchars($id); $query = "SELECT nombres, apellidos, email FROM CLIENTE WHERE id = " . mysql_real_escape_string($id) . " LIMIT 0,1"; $resultSet = $this->conx->query($query); if($resultSet): if($row = $resultSet->fetch_object()): $this->nombres = $row->nombres; $this->apellidos = $row->apellidos; $this->email = $row->email; return true; endif; endif; } public function set(){ $_nombres = htmlspecialchars($this->nombres); $_apellidos = htmlspecialchars($this->apellidos); $_email = htmlspecialchars($this->email); $query = "INSERT INTO CLIENTE(nombres, apellidos, email) VALUES( '" . mysql_real_escape_string($_nombres) . "', '" . mysql_real_escape_string($_apellidos) . "', '" . mysql_real_escape_string($_email) . "')"; $this->conx->query($query); if($this->conx->affected_rows > 0) return true; else return false; } public function update($id){ $id = htmlspecialchars($id); $_nombres = htmlspecialchars($this->nombres); $_apellidos = htmlspecialchars($this->apellidos); $_email = htmlspecialchars($this->email); $query = "UPDATE CLIENTE SET nombres = '" . mysql_real_escape_string($_nombres) . "', apellidos = '" . mysql_real_escape_string($_apellidos) . "', email = '" . mysql_real_escape_string($_email) . "' WHERE id = " . mysql_real_escape_string($id); $this->conx->query($query);

if($this->conx->affected_rows > 0) return true; else return false; } public function delete($id){ $id = htmlspecialchars($id); $query = "DELETE FROM CLIENTE WHERE id = " . mysql_real_escape_string($id); $this->conx->query($query); if($this->conx->affected_rows > 0) return true; else return false; } public function getAll(){ $rows = array(); $query = "SELECT * FROM CLIENTE ORDER BY id ASC"; $resultSet = $this->conx->query($query); if($resultSet) while($row = $resultSet->fetch_object()) $rows[] = $row; $resultSet->close(); return $rows; } public function __destruct(){ $this->conx->close(); } } ?>

En el constructor de la clase clsCliente (lnea 11), de alguna manera se definen los tipos de datos que tendran las variables y se establece una conexin mediante mysqli (lnea 16) a la que le pasamos como parmetros las constantes definidas en el config.php, al cual incluimos con la funcin require_once() (lnea 02). El mtodo pblico get() (lnea 19) obtiene los registros que estn en la base datos de acuerdo al $id que se le indique como parmetro. Asigna los datos a las propiedades de la clase. El mtodo set() (lnea 36) es el encargado de insertar un nuevo cliente en la base de datos. Retorna un true si el registro fue satisfactorio o un false si no se registr el cliente.

El mtodo update() (lnea 53) actualiza los datos del cliente de acuerdo al $id que se le indique. Retorna un true si la actualizacin fue satisfactoria o un false si no se actualizaron los datos del cliente. El mtodo getAll() (lnea 85) devuelve un array con todos los clientes registrados. Y finalmente el destructor de la clase (lnea 100), cierra la conexin a la base de datos (lnea 101). Si nunca has usado las funciones htmlspecialchars y mysql_real_escape_string Segn el manual oficial de PHP: htmlspecialchars() es til en prevenir que texto suministrado por el usuario contenga cdigo HTML, como en una aplicacin de foros o una de libro de visitas. mysql_real_scape_string() llama la funcin de la librera de MySQL mysql_real_escape_string, la cual antepone backslashes a los siguientes caracteres: \x00, \n, \r, \, , y \x1a. Esta funcin siempre debe (con pocas excepciones) ser usada para hacer los datos seguros, antes de enviar una consulta a MySQL.

Modelo Vista Controlador en accin parte 3

Lo que sigue luego de escribir el modelo, es desarrollar la vista, que es la interfaz que el usuario ver. En el proceso de desarrollo de aplicaciones Web tenemos que tomarnos un momento para disear la aplicacin, y no es el diseo lgico del sistema, si no el diseo Web que consiste en hacer un diseo visual, es decir, qu grficos, imgenes, colores, etc y qu informacin se va a mostrar al usuario para que la aplicacin sea amigable. Si no eres un buen diseador grfico o no tienes mucha creatividad es mejor que cuando realices aplicaciones Web, trabajes junto con un diseador Web con el que puedas hacer un buena interfaz grfica de usuario. La tarea del diseador Web es entregarte, a ti como desarrollador, la plantilla del sitio Web con la que tu debes hacer que la aplicacin funcione. Esta plantilla consta bsicamente de HTML y CSS. Se debe tratar de no mostrar cdigo PHP junto con el HTML del diseo y viceversa, evitar escribir cdigo HTML en la lgica de nuestra programacin.

4. La Vista
Es la encargada de mostrar la informacin procesada al usuario. Est compuesta bsicamente de HTML y CSS. Qu pasa si tienes una aplicacin corriendo y deciden cambiar la interfaz, ms no la funcionalidad? Exacto, solo cambiaramos la Vista de nuestro MVC. Ventaja del Modelo Vista Controlador.

Los archivos HTML, CSS y JavaScript que utilicemos deben estar dentro de la carpeta view. Para la vista ser necesario una plantilla general, conformada por un un header (cabecera), un footer (pie de pgina) y una seccin en donde se mostrarn las tablas o formularios que deseamos mostrar al usuario. La lista de archivos que escribiremos para la vista estn expresados en el primer post sobre MVC en accin: agregar_cliente.php (un formulario para ingresar los datos del nuevo cliente), editar_clientes.php (un formulario para editar los datos registrados de algn cliente), footer.php (el pie de pgina), header.php (la cabecera) y lista_clientes.php (una tabla para listar todos los clientes registrados). Empezando por el header y el footer, simples archivos HTML que no necesitan mayor explicacin. Estos dos archivos se complementan, al final los veremos como uno solo.
view/header.php <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <link rel="stylesheet" href="../view/css/style.css" type="text/css" /> <title>{titulo} | AngelFQC</title> </head> <body> <div id="wrapper"> <div id="header"> <h1>Administracin</h1> <h2>{titulo}</h2> </div> <div id="section">

view/footer.php </div><!-- fin de section --> <div id="footer"> <h5> AngelFQC</h5> <h6> <a href="http://angelfqc.host22.com">http://angelfqc.host22.com</a> </h6> </div><!-- fin de footer --> </div><!-- fin de wrapper --> </body> <html>

Si lees el cdigo, te dars cuenta que en la lnea 06 y en la lnea 12 del header.php hay un trmino {titulo}, esta parte ser cambiada dinmicamente mediante el controlador. As es ms fcil que el diseador Web disee sin tener que escribir cdigo PHP.

view/listar_clientes.php <?php if($mensaje != ""): ?> <div class="message"><?php echo $mensaje ?></div> <?php endif; ?> <div class="field"> <a href="cliente.php?accion=agregar">Agregar nuevo</a> </div> <table> <thead> <tr> <th>Nombres</th> <th>Apellidos</th> <th>E-Mail</th> <th colspan="2">&nbsp;</th> </tr> </thead> <tbody> <?php foreach($listado as $cliente): ?> <tr> <td><?php echo $cliente->nombres ?></td> <td><?php echo $cliente->apellidos ?></td> <td><?php echo $cliente->email ?></td> <td> <a href="cliente.php?accion=editar&id=<?php echo $cliente->id ?>">Editar</a> </td> <td> <a href="cliente.php?accion=eliminar&id=<?php echo $cliente->id ?>">Eliminar</a> </td> </tr> <?php endforeach; ?> </tbody> </table>

Si, en este HTML hay cdigo PHP, pero hay ocasiones en las que no podemos dejar de hacerlo, por qu?, porque es una tabla y se necesita mostrar los datos que son varios y no se tiene un nmero definido de registros, la solucin es hacerlo mediante un bucle foreach, for, do while o while. Con el bucle se muestran los datos del cliente (lneas 25, 26 y 27). En esta tabla tambin se mostrarn una seccin en la que se expresar si la operacin realizada se concret o no (lnea 04). Adems al mismo tiempo que se muestran los datos de los clientes registrados, tambin se muestran links para editar (lnea 29) y eliminar (lnea 32). Estos son enlaces a cliente.php y adems definen dos variables por URL, accion e id, qu accin va a realizar (editar o eliminar) y el id del cliente.

view/agregar_cliente.php <form action="cliente.php" method="post"> <fieldset> <legend>Datos de cliente</legend> <input type="hidden" name="accion" value="agregar" /> <div class="field"> <label for="nombres">Nombres</label> <input type="text" name="nombres" id="nombres" /> </div> <div class="field"> <label for="apellidos">Apellidos</label> <input type="text" name="apellidos" id="apellidos" /> </div> <div class="field"> <label for="email">E-Mail</label> <input type="text" name="email" id="email" /> </div> </fieldset> <div class="field"> <input type="submit" name="submit" value="Actualizar" /> <a href="cliente.php">Cancelar</a> </div> </form>

Como indiqu ms arriba, un simple formulario para ingresar los datos del cliente. Los datos ingresados en este formulario como en el de editar cliente sern procesados en cliente.php (lnea 01) el cual es nuestro controlador. Para que el formulario puedan ser procesado, el controlador necesita saber que accin va a realizar, por eso hay un

campo oculto (un input tipo hidden) con contiene la accin, en este caso es agregar (lnea 04).

view/editar_clientes.php <form action="cliente.php" method="post"> <fieldset> <legend>Datos de cliente</legend> <input type="hidden" name="id" id="id" value="{id}" /> <input type="hidden" name="accion" value="editar" /> <div class="field"> <label for="nombres">Nombres</label> <input type="text" name="nombres" id="nombres" value="{nombres}" /> </div> <div class="field"> <label for="apellidos">Apellidos</label> <input type="text" name="apellidos" id="apellidos" value="{apellidos}" /> </div> <div class="field"> <label for="email">E-Mail</label> <input type="text" name="email" id="email" value="{email}" /> </div> </fieldset> <div class="field"> <input type="submit" name="submit" value="Actualizar" /> <a href="cliente.php">Cancelar</a> </div> </form>

Bsicamente es el mismo formulario que el de agregar cliente, pero con la diferencia que hay un campo oculto (hidden) ms, que contendr el id del cliente que vamos a editar (lnea 04). En este formulario la accin a realizar es editar (lnea 05).

Para poder editar los datos, primero debemos saber qu datos vamos a editar, por tal motivo, cada campo tiene un parmetro value en el cual se mostrar los datos del cliente a editar. Estos datos sern mostrados dinmicamente mediante PHP, por eso estn indicados los valores entre llaves {valor}.

Por ltimo, en la carpeta CSS, obviamente van a ir nuestras hojas de estilo en cascada CSS.
view/css/style.css

body, h1, h2, h3, h4, h5, h6, p, form, fieldset, legend, input, a, th, td{ margin:0; padding:0; font-family:sans-serif; font-size:14px; border:0 none; } h1{ font-size:2.1em; } h2{ font-size:1.9em; } h3{ font-size:1.7em; } h4{ font-size:1.5em; } h5{ font-size:1.3em; }

h6{ font-size:1.1em; } a{ text-decoration:none; } #wrapper{ width:960px; margin:1em auto; } table{ margin:1em 0; width:100%; border-collapse:collapse; border-top:1px solid #444; border-bottom:1px solid #444; } table th{ background-color:#d8d8d8; border-bottom:1px solid #444; } table tr:hover{ background-color:#e8e8e8; } fieldset{ border:1px solid #d8d8d8; padding:0 1em; } .field{ margin:1em 0; } label{ display:block; } input[type=text], input[type=password]{ border:1px solid #d8d8d8; padding:3px 5px; } input[type=submit]{ border:1px solid #d8d8d8; padding:3px 5px; background-color:#e8e8e8; } .field a{ border:1px solid #d8d8d8; padding:4px 5px; background-color:#e8e8e8; } #section{ margin:1em 0; } .message{

background-color:#ffffb8; padding:4px 5px; }

Modelo Vista Controlador en accin parte 4

Cuarto y ltimo post de este mini tutorial sobre cmo desarrollar aplicaciones con el Modelo Vista Controlador. En el post anterior, al escribir nuestra Vista, hacamos referencia a clientes.php, que como escrib, es el Controlador de nuestra aplicacin con MVC. El controlador es el que trabaja entre el modelo y la vista, y por lo tanto debe saber que operacin o evento realiza el usuario. Es el que ms trabaja. Para nuestra aplicacin, solo tendremos un nico controlador llamada cliente.php en la carpeta controller, en esta carpeta deben ir todos los controladores que necesitemos. El controlador tendr 3 funciones: handler() (encargada de detectar qu operacin o evento va a realizar el usuario), vista_header() (que mostrar la cabecera de la pgina) y vista_footer() (que mostrar el pie de pgina). En la lnea 02 se invoca al modelo con la funcin require_once, el modelo es la clase clsCliente.

5. El Controlador
(lnea 97), recibe como parmetro el ttulo de la pgina que ser mostrado en la cabecera. Y como dije en el post anterior, cambiaremos dinmicamente los trminos {titulo} de la vista header.php. Cmo se hace esto? Primero, con la funcin file_get_contents() leemos el archivo header.php y el contenido ledo lo asignamos a la variable $header (lnea 98). file_get_contents retornar un string. Segundo, como es un string podemos reemplazar partes de ese string con str_replace(), reemplazaremos todos los {titulo} que encuentre por el ttulo indicado como parmetro (lnea 99). Finalmente solo hay que mostrar el html cambiado dinmicamente (lnea 101).
vista_header()

Segn el manual oficial de PHP:

file_get_contents()

es la manera preferida de transmitir el contenido de un archivo

a una cadena.
str_replace() Reemplaza

todas las apariciones del string buscado con el string de

reemplazo. De igual manera trabaja vista_footer() (linea 104), la diferencia es que aqu solo leemos (linea 105) y mostramos el archivo (linea 107), ms no cambiamos el contenido.

La funcin handler() instancia un objeto de la clase clsCliente (lnea 05) y define una variable $mensaje (lnea 06) en la que se asignar un string resultado de si se realiz o no la operacin de registro o edicin. Como el controlador tiene que detectar qu operacin o evento va a realizar el usuario, tiene que saber si se est accediendo a el mediante GET (si se llama y pasan variables por la URI) o POST (si se quieren procesar datos de algn formulario). Entonces, mediante un switch evaluamos esto (lnea 08). La variable $_SERVER['REQUEST_METHOD'] devuelve el mtodo por el que estamos accediendo a la pgina, para este caso solo consideraremos los mtodos GET y POST. Por defecto, indicaremos que es GET (lneas 09 y 10). Si accedimos mediante GET (lnea 10), tenemos que comprobar si se estableci la accin a realizar, de no saber que accin realizar (lnea 11) hay que obtener la lista de clientes (lnea 12). Mostramos la cabecera de pgina (lnea 14). De haberse querido realizar una operacin, hay que comprobar si esta se concret o no, y establecer el mensaje a mostrar (lneas 16 a la 19). Incluimos a la vista que va a mostrar la tabla con los datos de los clientes registrados. Qu datos va a mostrar? Pues los datos que estn en el array $listado generado por el mtodo getAll() del objeto $objCliente (lnea 12). En la vista lista_clientes.php haba que recorrer un array $listado, el mismo que es generado en el controlador. Y para terminar con esta parte mostramos el pie de pgina (lnea 23). Si se defini la accin a realizar (lnea24), hay que evaluar que accin es mediante un switch (lnea 25). Si vamos a agregar un nuevo cliente (lnea 26), hay que mostrar la cabecera (indicando el ttulo, lnea 27), mostramos el formulario para registrar nuevos clientes incluyendo la vista agregar_cliente.php (lnea 28) y mostramos el pie de pgina (lnea 29). En el caso de editar un cliente (lnea 31), al mismo tiempo que pasamos por la URI la accin, hay que indicar el id del cliente del cual se van a editar sus datos. Este id lo asignamos a la variable $id (lnea 32). Con el mtodo get() comprobamos si el cliente existe, de existir (lnea 34) mostramos el formulario de edicin que est en la vista editar_clientes.php. En esta vista tenemos que hacer el mismo proceso de cambiar el HTML dinmicamente con las funciones file_get_contents() y str_replace() (lneas 35 a la 39). El string generado lo asignaremos en la variable $form, que luego de mostrar la cabecera (lnea 41) los mostraremos (lnea 42), para luego mostrar el pie de pgina (lnea 43). De no existir el cliente (lnea 44), redireccionaremos a cliente.php indicando que ocurri un error (lnea 45). Si se quiere eliminar el cliente (lnea 49), nuevamente hay que obtener el id del cliente que se va a eliminar (lnea 50), comprobamos si el cliente se elimin (lnea 52), si se elimin o no, mostramos el mensaje (lneas 53 y 55). De haberse especificado alguna otra accin que no sea agregar, editar o eliminar, simplemente redireccionaremos a cliente.php.

Si accedemos a cliente.php mediante POST, es decir, si queremos procesar algn formulario (lnea 65), de igual manera hay que evaluar qu accin se va a realizar (lnea 66). Si vamos a procesar los datos para editar un cliente (lnea 67), obtenemos los datos enviados mediante $_POST (lneas 68 a la 70), comprobamos si se edit satisfactoriamente el cliente y redireccionamos a cliente.php indicando el mensaje a mostrar. Y si vamos a procesar los datos para registrar un nuevo cliente (lnea 78), de igual forma, obtenemos los datos enviados (lneas 79 a la 81), y comprobamos si se logr registrar al cliente. Si se indica alguna otra accin, por defecto (lnea 89) redireccionaremos a cliente.php indicando error (lnea 90).
controller/cliente.php <?php require_once '../model/clsCliente.php'; function handler(){ $objCliente = new clsCliente(); $mensaje = ""; switch($_SERVER['REQUEST_METHOD']): default: case 'GET': if(!isset($_GET['accion'])): $listado = $objCliente->getAll(); vista_header(); if(isset($_GET['error'])) $mensaje = "Operacin no realizada"; elseif(isset($_GET['satisfactorio'])) $mensaje = "Operacin realizada"; include '../view/lista_clientes.php'; vista_footer(); else: switch($_GET['accion']): case 'agregar': vista_header('Agregar nuevo cliente'); include '../view/agregar_cliente.php'; vista_footer(); break; case 'editar': $id = $_GET['id']; if($objCliente->get($id)): $form = file_get_contents('../view/editar_clientes.php'); $form = str_replace('{id}', $id, $form);

$form = str_replace('{nombres}', $objCliente->nombres, $form); $form = str_replace('{apellidos}', $objCliente->apellidos, $form); $form = str_replace('{email}', $objCliente->email, $form); vista_header('Actualizar clientes'); echo $form; vista_footer(); else: header('Location: cliente.php?error'); endif; break; case 'eliminar': $id = $_GET['id']; if($objCliente->delete($id)) header('Location: cliente.php?satisfactorio'); else header('Location: cliente.php?error'); break; default: header('Location: cliente.php'); break; endswitch; endif; break; case 'POST': switch($_POST['accion']): case 'editar': $objCliente->nombres = $_POST['nombres']; $objCliente->apellidos = $_POST['apellidos']; $objCliente->email = $_POST['email']; if($objCliente->update($_POST['id'])) header('Location: cliente.php?satisfactorio'); else header('Location: cliente.php?error'); break; case 'agregar': $objCliente->nombres = $_POST['nombres']; $objCliente->apellidos = $_POST['apellidos']; $objCliente->email = $_POST['email']; if($objCliente->set()) header('Location: cliente.php?satisfactorio'); else header('Location: cliente.php?error'); break; default: header('Location: cliente.php?error'); break;

endswitch; break; endswitch; } function vista_header($titulo = 'Listado de clientes'){ $header = file_get_contents('../view/header.php'); $header = str_replace('{titulo}', $titulo, $header); echo $header; } function vista_footer(){ $footer = file_get_contents('../view/footer.php'); echo $footer; } handler(); ?>

La funcin handler() (lnea 04) es demasiada larga. Pueden crear funciones dividiendo esa funcin para que el cdigo tenga un poco de calidad. Yo no lo hice con el fin de explicar todo de una sola vez. Para correr la aplicacin, tenemos que entrar por el controlador. Es decir la URI debe ser http://localhost/controller/cliente.php. Claro que depende de la carpeta donde hayan puesto los archivos del mini tutorial. En la imagen del post, mi url es http://localhost/blog/17/controller/cliente.php. Ahora a correr la aplicacin y comentar si hay algn error.