Introducción A MVC Con PHP, Primera Parte - JOURMOLY
Introducción A MVC Con PHP, Primera Parte - JOURMOLY
JOURMOLY
programacin, tutoriales, novedades y todo lo dems
Comercio Electronico
Qu es MVC?
MVC viene de Model, View, Controller, o bien: Modelo, Vista y Controlador. Es un
patrn de diseo que empec a utilizar hace algn tiempo y la verdad es que me di
muy buenos resultados en los sistemas donde lo pude aplicar. La idea bsica de ste
patrn es separar nuestros sistemas en 3 capas, El Modelo, La Vista y el Controlador.
El Modelo se encarga de todo lo que tiene que ver con la persistencia de datos. Guarda
y recupera la informacin del medio persistente que utilicemos, ya sea una base de
datos, ficheros de texto, XML, etc.
La Vista presenta la informacin obtenida con el modelo de manera que el usuario la
pueda visualizar.
El Controlador, dependiendo de la accin solicitada por el usuario, es el que pide al
modelo la informacin necesaria e invoca a la plantilla(de la vista) que corresponda para
que la informacin sea presentada.
Un pequeo ejemplo
1. Marcos entra a nuestro sitio mediante la URL www.example.com/items/listar.
2. Se carga el Controlador Items para ejecutar la accin de Listar.
3. El controlador solicita al modelo que le entregue un arreglo con todos los items
que hay almacenados en la base de datos.
4. Una vez que posee dicha informacin le indica a la vista que va a utilizar la
plantilla correspondiente al listado de items y le provee el arreglo con todos los
usuarios.
5. La vista, por su parte, toma el arreglo de items y los muestra uno a uno en la
plantilla que le indico el controlador.
6. Finalmente Marcos recibe el listado de items; lo observa un instante y decide que
quiere agregar un nuevo item por lo que hace click en un enlace que lo lleva a la
URL www.example.com/items/agregar.
jourmoly.com.ar/introduccion-a-mvc-c
1/16
29/09/2010
Introduccin a MVC con PHP, primera
7. Se repite el proceso desde el paso 1 pero con la nueva URL
Vamos al codigo
Para ir de a poco tomar un ejemplo sencillo similar a los que utilice cuando hable de
PHP Data Objects y lo ir separando en capas paso a paso. El ejemplo que voy a
utilizar es el siguiente:
1 < ?php
2 require 'conexion.php';
3 $db = new PDO('mysql:host=' . $servidor . ';dbname=' . $bd, $usuario, $contrasenia);
4 $consulta = $db->prepare('SELECT * FROM items WHERE id_item = ? OR id_item = ?');
5 $consulta->execute(array(2, 4));
6 $items = $consulta->fetchAll();
7 $db = null ;
8 ?>
9 < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
10
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
11
12 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
13 <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
14
<title>PDO - Jourmoly</title>
15
16 </head>
17 <body>
18 <table>
<tr>
19
<th>ID
20
</th><th>Item
21
</th></tr>
22
< ?php
23
foreach($items as $item)
24
{
25
26
?>
27
<tr>
28
<td>< ?php echo $item['id_item']?> </td>
29
<td>< ?php echo $item['item']?> </td>
30
</tr>
31
< ?php
32
}
33
?>
34 </table>
35 <a href="index.php">Menú</a>
36 </body>
37 </html>
Ver Ejemplo
Nada del otro mundo, es un simple listado comn presentado en una tabla HTML.
Separaremos dicho ejemplo, por el momento, en 3 ficheros. Uno corresponder al
modelo, otro a la vista y el tercero ser el controlador.
Cual es el modelo en este ejemplo?
Como mencione mas arriba, el modelo es el que se ocupa, bsicamente, de todo lo que
tiene que ver con el acceso a la informacin. Sin dudarlo, en este ejemplo PDO es quien
cumple el papel de Modelo.
modelo.php
1 < ?php
2 $db = new PDO('mysql:host=' . $servidor . ';dbname=' . $bd, $usuario, $contrasenia);
3 $consulta = $db->prepare('SELECT * FROM items');
4 $consulta->execute();
5 $items = $consulta->fetchAll();
6 ?>
Y cual es la vista?
La vista es quien representa la informacin para que el usuario la pueda entender, en
este caso, el HTML, la tabla y todo lo usado para mostrar la informacin forma parte
de la vista.
vista.php
jourmoly.com.ar/introduccion-a-mvc-c
2/16
29/09/2010
Y el controlador?
El controlador es el que permite que todo funcione.
controlador.php
1 < ?php
2 //Se incluye el modelo
3 require 'modelo.php';
4
5 //En $items tenemos un arreglo con todos los items gracias al modelo
6
7 //Ahora la vista recibe dicho arreglo para mostrarlo por pantalla
8 require 'vista.php';
9 ?>
Por ltimo, tendremos un fichero mas index.php que lo nico que har es incluir
algunas variables de configuracin y nuestro controlador. Es decir, para ver el resultado
del script entraremos por index.php
Ver ejemplo
Afinando nuestro ejemplo
El ejemplo anterior esta bien para un primer acercamiento, pero cuando trabajamos a
diario las cosas no son tan sencillas como en este caso, una sola seccin o
elemento(items), una sola accin(listar), etc. Lo mas normal es que necesitemos de
varios controladores y que cada controlador tenga varias acciones. A su vez, cada
controlador puede utilizar uno o mas modelos como as tambin plantillas. Para lograr
todo esto, es necesario que automaticemos un poco el primer ejemplo para que admita,
en principio, varios controladores y acciones.
Como primera medida vamos a crear una estructura de ficheros para que que todo
quede mas o menos ordenado, sencillo:
controladores/
.....itemsControlador.php
modelos/
.....itemsModelo.php
vistas/
.....listar.php
index.php
3/16
29/09/2010
itemsModelo.php
1 < ?php
2 global $servidor, $bd, $usuario, $contrasenia;
3 $db = new PDO('mysql:host=' . $servidor . ';dbname=' . $bd, $usuario, $contrasenia);
4
5 function buscarTodosLosItems($db)
6 {
7
$consulta = $db->prepare('SELECT * FROM items');
8
$consulta->execute();
9
return $consulta->fetchAll();
10 }
11 ?>
Como vern los nicos cambios han sido armar los scripts con funciones, de modo
que cada fichero pueda tener mas de una de ellas y puedan ser llamadas en cualquier
momento e independientemente.
De ahora en mas, nuestro fichero index.php ser quien se encargue de averiguar cual
es el controlador y accin que busca el usuario, incluir los archivos que sean
necesarios y ejecutara la accin solicitada. Todos los accesos a nuestro sistema sern
por medio de index.php y las URL sern similares a las siguientes:
www.example.com/index.php?controlador=items&accion=listar
www.example.com/index.php?controlador=items&accion=agregar
www.example.com/index.php?controlador=items&accion=eliminar
www.example.com/index.php?controlador=usuarios&accion=listar
Ahora solo nos queda hacer un pequeo script que interprete nuestra URL y llame al
controlador y la accin que corresponda.
index.php
1 < ?php
2 //Primero algunas variables de configuracion
3 require 'conexion.php';
4
5 //La carpeta donde buscaremos los controladores
6 $carpetaControladores = "controladores/";
7
8 //Si no se indica un controlador, este es el controlador que se usar
9 $controladorPredefinido = "items";
10
11 //Si no se indica una accion, esta accion es la que se usar
12 $accionPredefinida = "listar";
13
14 if(! empty($_GET['controlador']))
$controlador = $_GET['controlador'];
15
16 else
$controlador = $controladorPredefinido;
17
18
19 if(! empty($_GET['accion']))
$accion = $_GET['accion'];
20
21 else
jourmoly.com.ar/introduccion-a-mvc-c
4/16
29/09/2010
22
$accion = $accionPredefinida;
23
24 //Ya tenemos el controlador y la accion
25
26 //Formamos el nombre del fichero que contiene nuestro controlador
27 $controlador = $carpetaControladores . $controlador . 'Controlador.php';
28
29 //Incluimos el controlador o detenemos todo si no existe
30 if(is_file($controlador))
31
require_once $controlador;
32 else
33
die('El controlador no existe - 404 not found');
34
35 //Llamamos la accion o detenemos todo si no existe
36 if(is_callable($accion))
37
$accion();
38 else
39
die('La accion no existe - 404 not found');
40 ?>
Y ya lo podemos probar:
index.php?controlador=items&accion=listar
Y si ahora quiero insertar items?
Es muy sencillo, solo debemos agregar la accion de agregar a nuestro controlador.
itemsControlador.php
1 function listar()
2 {
3
//Incluye el modelo que corresponde
4
require 'modelos/itemsModelo.php';
5
6
//Le pide al modelo todos los items
7
$items = buscarTodosLosItems($db);
8
9
//Pasa a la vista toda la informacin que se desea representar
10
require 'vistas/listar.php';
11 }
12
13 function agregar()
14 {
15
echo 'Aqui incluiremos nuestro formulario para insertar items';
16
17
require 'modelos/itemsModelo.php';
18
19
if($_POST)
20
{
21
insertar();
22
}
23
24
require 'vistas/agregar.php';
25 }
Desde luego que el modelo ahora tambin debera incluir una funcin insertar() y
debera existir una plantilla agregar.php. Para ver nuestro formulario solo deberiamos
ingresar por:
index.php?controlador=items&accion=agregar
No olvides que el action del formulario debe apuntar a www.tusitio.com/index.php?
controlador=items&accion=agregar
Y si quiero agregar un listado de usuarios?
Para ello, solo debes crear un controlador usuariosControlador.php con una funcion
listar() similar a la de itemsControlador, y obviamente, tambin debes crear las plantillas
que creas necesarias o, por que no, reutilizar alguna que ya tengas.
index.php?controlador=usuarios&accion=listar
Notas finales
jourmoly.com.ar/introduccion-a-mvc-c
5/16
29/09/2010
Y hasta aqu llega esta primera parte. Logramos implementar un script separado en 3
capas y dimos el primer paso con MVC usando programacin estructurada/funcional.
En el articulo que sigue mostrar esto mismo pero con programacin orientada a
objetos y algunas funcionalidades extras como aplicar URL amigables a un sistema de
este tipo.
Bajar los ejemplos
Si quers retocar un poco el cdigo, practicar, etc pods bajarte todos los ejemplos
desde aqui. Incluye un fichero .sql para que crees la tabla utilizada.
Lectura complementaria
Si mi explicacin no te basto, pods leer la explicacin de MVC en la wikipedia. Desde
luego, Google tambin sabe algo sobre el tema.
Antencion:
Segunda parte
Popularity: 100% [?]
Otros artculos
Ubuntu en casa
attachSound y LoadMovie
Mootools y el DOM, cuarta y ltima parte
Trabajando con AJAX, JSON y Mootools
Efectos con Mootools: Fx.Elements
Suscrbete para seguir el blog Escrito por Archivado en PHP
45 comentarios
ImZyos, gracias por tu comentario. A decir verdad no aplico mvc a mis sistemas
de la forma en la que ejemplifique en este articulo. Y coincido con la clase
Router, es justamente lo que utilizo aunque no queria complicar las cosas en este
primer articulo y me parecio mas sencillo mostrarlo de forma estructurada, sin
clases y con ejemplos simples y faciles de entender por todos, incluso por ese
gran porcentaje de programadores que utilizan PHP de manera estructurada.
Saludos!
3. Arcadio Dijo:
September 19, 2007 a las 10:54 am
6/16
29/09/2010
4. Federico Dijo:
Vaya, muchas gracias por el articulo, una forma facil de entender, apenas para
empezar, no como otros articulos que son demasiado complejos, pero este
apenas es para comenzar como vos decis, ya que se podria ahorrar mucho
codigo y la seguridad con algo de POO.
es por eso que sigo esperando la II parte
gracias por el tiempo
8. Federico Dijo:
January 3, 2008 a las 7:04 am
SEGUNDA PARTE???????
11. Federico Dijo:
February 13, 2008 a las 8:49 am
Ser una de las primeras cosas que haga cuando tenga la pc nueva jeje
Saludos
12. netbase Dijo:
February 25, 2008 a las 11:31 am
7/16
29/09/2010
13. Federico Dijo:
Finalmente llego:
Introduccin a MVC con PHP, segunda parte
14. Dennis Dijo:
March 15, 2008 a las 11:47 am
8/16
29/09/2010
Introduccin a MVC con PHP, primera
hace 4 meses fue que inicie en el mundo de la POO, y eso me ha llevado tambien
a incursionar en el patron MVC, me parece un buen articulo para iniciar, y
posteriormente canalizar el MVC hasta la POO
$consulta->execute(array(2, 4));
Exactamente aca que es lo que hace el array ?
22. Federico Dijo:
August 31, 2008 a las 12:34 pm
Hola nuklear:
$consulta = $db->prepare(SELECT * FROM items WHERE id_item = ? OR
id_item = ?);
$consulta->execute(array(2, 4));
El array contiene los parametros que se deben pegar en la consulta SQL, es decir
que la consulta queda asi:
SELECT * FROM items WHERE id_item = 2 OR id_item = 4
Son consultas parametrizadas.
@Jacs, @ivan: gracias por sus comentarios
23. nucklear Dijo:
September 9, 2008 a las 11:36 am
Exacto
25. kelcarco Dijo:
September 26, 2008 a las 9:59 am
Muy Interesente el articulo, me sirvio muchisimo ahora a fusionar esto con POO
eso es lo mas interesante.. nada que envidiarle a otros lenguajes privativos..
Espero siguas publicando articulos como estemuchas felicidades
26. Pancho Dijo:
January 20, 2009 a las 8:55 am
Hola Federico,
Inequivocamente has realizado la mas clara y concisa explicacion del modelo
vista controlador. Te diria que enhorabuena, pero en este caso prefiero darte las
gracias porque me ha ayudado mucho a aclararme.
jourmoly.com.ar/introduccion-a-mvc-c
9/16
29/09/2010
Tu rss me lo apunto sin duda.
Muchas gracias,
Pancho
27. Peloon Dijo:
March 22, 2009 a las 11:49 pm
[...] Introduccion a MVC con php Primera Parte Introduccion a MVC con php
Segunda Parte Como funciona el modelo MVC en Cake PHP [...]
29. Jorge Dijo:
April 28, 2009 a las 3:49 am
Buenas Jourmoly.
He estado leyendo tu artculo con mucha atencin, y discrepo en un par de cosas
contigo. Segn la definicin de modelo en la Wiki (que supongamos que sea la
correcta) dice:
- Modelo: Esta es la representacin especfica de la informacin con la cual el
sistema opera. La lgica de datos asegura la integridad de estos y permite todo
derivar nuevos datos; por ejemplo, no permitiendo comprar un nmero de
unidades negativo, calculando si hoy es el cumpleaos del usuario o los totales,
impuestos o importes en un carrito de la compra.
Esta definicin es la de una clase contenedora de datos, digamos una clase
persona, coche, vehculo, etc la cual controla el tipo de datos que
contiene y el formato en el cual pueden ser guardados y recuperados de la
misma.
Otra cosa sera la clase Controladora que es la que hace de puente con la BD en
mysql, sql o donde quiera que est para guardar los datos del tipo persona,
vehculo, etc
La ltima como bien has explicado es la Vista, que creo que todos coincidimos
que es la que recoge los eventos de los usuarios y muestra la informacin o
interface en la cual vamos a operar con los datos.
Como clase Modelo podramos poner de ejemplo la siguiente (est en java pero
para el caso es muy parecido y se entiende perfectamente):
/*Clase que representa a una Persona
*@author Raul Martinez Galan
*/
import java.sql.*;
import java.io.Serializable;
public class Persona implements Serializable {
private String id = new String();
private String NIF = new String();
private String nombre = new String();
private String apellido1 = new String();
private String apellido2 = new String();
private String direccion = new String();
private String poblacion = new String();
private String telefono = new String();
private String movil = new String();
private String email = new String();
private Date fechaBaja;
/**
* Constructor de la clase Persona
* @param id: nmero identificador de la persona
* @param NIF: NIF de la persona
* @param nombre: nombre de la persona
* @param apellido1: primer apellido de la persona
* @param apellido2: segundo apellido de la persona
* @param direccion: direccion de la persona
jourmoly.com.ar/introduccion-a-mvc-c
10/16
29/09/2010
jourmoly.com.ar/introduccion-a-mvc-c
11/16
29/09/2010
persona
* @return String con el primer apellido de la persona
*/
public String getApellido1(){
return apellido1;
}
/**
* Mtodo de escritura del valor del atributo apellido1 de la
persona
* @param xApellido1 El nuevo apellido1 que se quiere asignar
a la persona
*/
public void setApellido1(String xApellido1) {
this.apellido1 = xApellido1;
}
/**
* Mtodo de lectura del valor del atributo apellido2 de la
persona
* @return String con el segundo apellido de la persona
*/
public String getApellido2(){
return apellido2;
}
/**
* Mtodo de escritura del valor del atributo apellido2 de la
persona
* @param xApellido2 El nuevo apellido2 que se quiere asignar
a la persona
*/
public void setApellido2(String xApellido2) {
this.apellido2 = xApellido2;
}
/**
* Mtodo de lectura del valor del atributo direccion de la
persona
* @return String con la direccion de la persona
*/
public String getDireccion(){
return direccion;
}
/**
* Mtodo de escritura del valor del atributo direccion de la
persona
* @param xDireccion La nueva direccion que se quiere asignar
a la persona
*/
public void setDireccion(String xDireccion) {
this.direccion = xDireccion;
}
/**
* Mtodo de lectura del valor del atributo poblacion de la
persona
* @return String con la poblacion de la persona
*/
public String getPoblacion(){
return poblacion;
}
/**
* Mtodo de escritura del valor del atributo poblacion de la
persona
* @param xPoblacion La nueva poblacion que se quiere asignar
a la persona
*/
public void setPoblacion(String xPoblacion) {
this.poblacion = xPoblacion;
}
/**
* Mtodo de lectura del valor del atributo telefono de la
persona
* @return String con el telefono de la persona
*/
public String getTelefono(){
return telefono;
}
/**
* Mtodo de escritura del valor del atributo telefono de la
jourmoly.com.ar/introduccion-a-mvc-c
12/16
29/09/2010
persona
* @param xTelefono El nuevo telefono que se quiere asignar a
la persona
*/
public void setTelefono(String xTelefono) {
this.telefono = xTelefono;
}
/**
* Mtodo de lectura del valor del atributo movil de la
persona
* @return String con el movil de la persona
*/
public String getMovil(){
return movil;
}
/**
* Mtodo de escritura del valor del atributo movil de la
persona
* @param xMovil El nuevo Movil que se quiere asignar a la
persona
*/
public void setMovil(String xMovil) {
this.movil = xMovil;
}
/**
* Mtodo de lectura del valor del atributo email de la
persona
* @return String con el email de la persona
*/
public String getEmail(){
return email;
}
/**
* Mtodo de escritura del valor del atributo Email de la
persona
* @param xEmail El nuevo Email que se quiere asignar a la
persona
*/
public void setEmail(String xEmail) {
this.email = xEmail;
}
/**
* Mtodo de lectura del valor del atributo fechBaja de la
persona
* @return String con la fecha de baja del registro de la
persona
*/
public Date getFechaBaja(){
return fechaBaja;
}
/**
* Mtodo de escritura del valor del atributo fechBaja de la
persona
* @param xFechaBaja La nueva Fecha de Baja que se quiere
asignar a la persona
*/
public void setFechaBaja(Date xFechaBaja) {
this.fechaBaja = xFechaBaja;
}
public static void main (String[] args){
Persona p = new Persona("E31777777X", "31777777X", "Jose",
"Rubio", "Delgado",
"c/ Larga s/n", "Denver", null, "666666666",
"[email protected]",null);
System.out.println("Persona con ID: " + p.getId());
System.out.println("Nombre: " + p.getNombre() +" "+
p.getApellido1()+" "+ p.getApellido2());
System.out.println("NIF: " + p.getNIF());
System.out.println("Direccion: " + p.getDireccion());
System.out.println("Poblacion: " + p.getPoblacion());
System.out.println("Telefono: " + p.getTelefono());
System.out.println("Movil: " + p.getMovil());
System.out.println("Email: " + p.getEmail());
System.out.println("Fecha Baja: " + p.fechaBaja);
}
jourmoly.com.ar/introduccion-a-mvc-c
13/16
29/09/2010
De nada Federico. De todas formas me parecen muy tiles tus post para centrar
las ideas sobre el tema. Te aseguro que yo llevo un cacao mental con Zend k ni te
digo jejeje. Tanta herencia y tanta cosa hace que me pierda.
Un saludo
32. traza Dijo:
May 1, 2009 a las 12:19 am
[...] una aplicacion simple utilizando Modelo Vista Controlador, La gua esta
distribuida en dos partes Parte 1 y Parte [...]
34. yovana Dijo:
May 6, 2009 a las 5:58 pm
amigo, cuando vas a hacer la 2da parte?. esta muy didactico tus ejemplos
36. r4ito Dijo:
June 10, 2009 a las 11:42 pm
14/16
29/09/2010
Introduccin a MVC con PHP, primera
Actualmente trabajamos en 2 capas con Smarty.
Notable!!!
muy bueno el tutorial, as que leer la segunda parte, se agradece el aporte, siga
as!.
39. Raul Dijo:
October 25, 2009 a las 1:47 am
Hola!!!, gracias por el tuto, me parece sencillo y facil de aprender ya que si uno
quiere desarrollar su propio framework esta perfecto con este tuto, solo quisiera
aadir una observacin, me parece que la parte de route sale com que sobrando,
a mi parecer, ya que yo he trabajado con el mvc de Joomla que maneja esta
estructura y le he quitado el route del modelo y las vistas son mas rapidas y
tienen la misma funcion, bueno, esto en mi opinin, de cualquier forma me parece
que la estructura que se maneja en este artculo es la mejor, felicitaciones!!!.
41. Nestor Dijo:
January 24, 2010 a las 1:16 pm
Muy interesante, se puede aplicar esta tecnica de una manera muy facil,
Felicitaciones, el material es bastante util para los que iniciamos en el tema
42. Alejo Dijo:
February 6, 2010 a las 2:03 am
Muy buen articulo, la verdad me sirvio mucho para entender mejor el partron,
muy bien explicado. Gracias master!
43. yoandris Dijo:
March 17, 2010 a las 12:01 pm
Hola, excelente articulo! Tuve problema para configurar el PDO PHP. Ya que
por defecto viene desactivado. Despues de lograr que funcionara, me ha servido
de mucho, el articulo. Gracias.
45. wilciber Dijo:
May 21, 2010 a las 6:53 pm
jourmoly.com.ar/introduccion-a-mvc-c
15/16
29/09/2010
Introduccin a MVC con PHP, primera
muy buen articulo del MVC y con ejemplo. sigan adelante..
Deja tu comentario
Nombre (required)
E-Mail (no se publica) (required)
Web
XHTML: Puedes usar estos tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote
cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line=""
escaped="">
Submit Comment
Buscador
Pginas
Contacto
Licencia
Poltica de privacidad
Estudio Marionetas
Categorias
General (15)
Mootools en espaol (25)
PHP (5)
Ubuntu (1)
Destacados
Introduccin a MVC con PHP, primera parte
Introduccin a MVC con PHP, segunda parte
Efectos con Mootools: Fx.Base y Fx.Style
Mootools y el DOM, cuarta y ltima parte
Automatizando pruebas: Selenium IDE
jourmoly.com.ar/introduccion-a-mvc-c
16/16