Instituto Tecnolgico de Villahermosa

Alumno:
Pedro Emmanuel Llergo Gonzalez
Asignatura:
Programacion web
Trabajo:
Arquitectura M-V-C
Maestro:
Javier Romero Castro
Villahermosa, Tabasco a 02/10/2011

Modelo-Vista-Controlador
Modelo-Vista-Controlador es un patrn para diseo de software que ayuda a separar
lgicamente el cdigo hacindolo reusable, mantenerle y generalmente mejor.
La entrada del usuario, el modelado del mundo externo, y la retroalimentacin visual

para el usuario son separados y dirigidos por los objetos modelo, vista y controlador.
El controlador interpreta las entradas del mouse y teclado desde el usuario, y convierte
sus acciones en comandos que son enviados hacia el modelo y/o la vista para efectuar
el cambio apropiado.
El modelo maneja uno o ms elementos de datos, responde a las consultas acerca de
su estado, y responde a las instrucciones para cambiar de estado.
La vista maneja un rea rectangular del rea que se ve y es responsable de presentar
los datos al usuario con una combinacin de grficos y texto.

Ventajas del MVC

La separacin del modelo de la vista, es decir, separar los datos de la
representacion visual de los mismos.
Es mucho mas sencillo agregar mltiples representaciones de los mismos datos
o informacin.
Facilita agregar nuevos tipos de datos segn sea requerido por la aplicacion ya
que son independientes del funcionamiento de las otras capas.
Crea independendica de funcionamiento.
Facilita el mantenimiento en casa de errores.
Ofrece maneras mas sencillas para probar el correcto funcionamiento del
sistema.
Permite el escalamiento de la aplicacion en caso de ser requerido.

Desventajas del MVC

La separacin de conceptos en capas agrega complejidad al sistema.
La cantidad de archivos a mantener y desarrollar se incrementa
considerablemente.
La curva de aprendizaje del patrn de diseo es mas alta usando otros modelos

mas sencillos.
Tomando en cuenta las ventajas y desventajas del Modelo-Vista-Controlador, la balanza se
inclina mucho mas a favor de implementar esta arquitectura.

Descripcion de los software a utilizar.

Los software que se utilizaran para programar este tipo de aplicacion son los siguientes:
1. Zend Core(Apache)
2. Mysql(GuiTools)
3. Notepad++
Requerimientos.
Solo una pequea aclaracion. Yo para programar estoy usando el Zend Core, pero en la pagina
de Zend ya no viene, pero esta el Zend Server, el mas actualizado.

Zend Server
Linux x86 y x86-64:

RHEL and Oracle Linux 6.0 and 5.x, CentOS 5.x, and Fedora Core 11 and up via
RPM packages

SLES 10.x and 11.x and openSUSE 11.x via RPM packages

Debian GNU/Linux 5.x, Ubuntu Linux 8.04, and up via DEB packages
Windows x86 y x86-64:

Windows XP SP 2 and up

Windows Vista (except for "Starter Edition" or "Home Basic")

Windows Server 2003

Windows Server 2008

Windows 7

Mysql
En si, sus requerimientos no se especifican, pero no requiere de mucha memoria
RAM, solo en disco duro es que pide el server 92 mb, y el GuiTools 33 mb.

Notepad++

Tampoco nos especifica cuales son sus requerimientos.

Los links para descargar dichos software son los siguientes:

Zend Server
http://www.zend.com/en/downloads/

Mysql
http://dev.mysql.com/downloads/
Notepad++
http://notepad-plus-plus.org/download/v5.9.3.html

En mi caso, como ya tengo instalado ZendCore y MySql solo pondre las pantallas de como
quedan ya instalados.

ZendCore

En esta primer captura vemos como queda el administrador de ZendCore instalado en nuestro
ordenador y todas las especificaciones que este contiene.

En esta imagen podemos ver el phpinfo, que nos da todas las especificaciones de PHP que
tenemos instaladas, configuradas y activas en nuestro ordenador.

MySql
Una vez instalado el Server y en mi caso el GuiTools abriremos la aplicacion que se llama
MySql Query Browser, y nos aparecera la siguiente venta.

En esta ventana
nombre de nuestro
default es localhost
127.0.0.1, despues

vamos a poner el
servidor que por
o en dicho caso
pondremos el

nombre de nuestro servidor, que por lo regular MySql lo deja como root, y al final nuestra
contrasea, y al darle OK nos manda la siguiente pantalla

En esta pantalla del lado izquierdo vamos a encontrar las bases de datos que existen en
nuestro servidor, en la parte superior un espacio en blanco donde podemos escribir las
consultas(query) que queremos hacer y en la parte central nos aparecen los resultados de
dicha consulta. Es una opcion de programa para manejar nuestras bases de datos.

Notepad++
Primero nos aparecera la pantalla principal, donde solo tendremos que dar siguiente.

Inmediatamente despues nos aparece la ventana donde aceptaremos el acuerdo de licencia de

Notepad++

Despues configuramos la direccion en donde se instalara Notepad++

Como Notepad++ es una herramienta multiplataforma nos pide instalar algunos plugins o
extensiones y en esta venta es en donde lo hacemos

Al darle clic en instalar, la aplicacion copiara los archivos necesarios a la carpeta que
especificamos en el tercer paso.

En la siguiente pantalla finalizamos la instalacion y nos abre automaticamente Notepad++

Y asi terminamos la instalacin de lo que utilizaremos para este ejemplo.

La aplicacion que vamos a llevar a cabo es la consulta de los maestros que dan una materia,
es un ejemplo muy sencillo de Modelo-Vista-Controlador, pero es muy facil de entender, a
continuacin pondre los archivos que se usan para ejecutar esta aplicacion e ire explicando las
partes del codigo.
index.html
<html>
<title>Ejemplo MVC</title>
<body>
<h2>Ejemplo de Arquitectura Modelo-Vista-Controlador</h2>
<form = method = "post" action = "controlador.php">
<table>
<tr><td><label>Seleccione una materia:</label></td><td>
<select name = "materia">
<option selected></option>
<option value = "Calculo">Calculo</option>
<option value = "Programacion">Programacion</option>
<option value = "Contabilidad">Contabilidad</option>
<option value = "Redes">Redes</option>
</select>
</td>
</tr>
<tr><td colspan = "2" align = "center"><input type = "submit" value = "Consultar"/></td></tr>
</table>
</form>
</body>
</html>
Este codigo html, nos muestra un formulario donde se selecciona una materia de las que
aparecen en la etiqueta select, y con el boton se envia al archivo llamado controlador.php, que
explicamos a continuacion.
controlador.php
<?
$materia = $_POST['materia'];
if($materia == "Calculo")
{
echo "<h2>Usted selecciono <u>Calculo</u></h2>";
include('modelo.php');
include('vista.php');
}

else if($materia == "Programacion")

{
echo "<h2>Usted selecciono <u>Programacion</u></h2>";
include('modelo.php');
include('vista.php');
}
else if($materia == "Contabilidad")
{
echo "<h2>Usted selecciono <u>Contabilidad</u></h2>";
include('modelo.php');
include('vista.php');
}
else if($materia == "Redes")
{
echo "<h2>Usted selecciono <u>Redes</u></h2>";
include('modelo.php');
include('vista.php');
}
else
{
include ('error.html');
}
?>
Este codigo lo que hace es recibir la peticion del usuario, y de acuerdo a la materia que
selecciono lo manda a una parte de la aplicacion, en este caso si la materia que selecciono fue
calculo le dira que la materia que selecciono fue calculo y le mostrara, por medio de los dos
archivos que se incluyen que son modelo.php y vista.php, el nombre de los maestros que dan
esa materia y la division a la que pertenecen. A continuacion explico el archivo modelo.php
modelo.php
<?
class mysql
{
var $host="localhost";
var $user="root";
var $clave="morenito90";
var $bd="escuela";
var $conexion;

function conectar()
{
$this->conexion=mysql_connect($this->host,$this->user,$this->clave);
mysql_select_db($this->bd,$this->conexion);
}
function mostrar_materias()
{
$materia = $GLOBALS['materia'];
$consulta="select * from materias where materia = '$materia'";
$resultado=mysql_query($consulta);
while ($r=mysql_fetch_array($resultado))
echo "<tr><td>".$r['maestro']."</td><td>".$r['division']."</td></tr>";
}
function cerrar ()
{
@mysql_close($this->conexion);
}
}
?>
este archivo php contiene una clase llamda mysql, en la cual recibe como propiedades las
variables que se declaran al principio. Contiene tres funciones, que son conectar,
mostrar_materias y cerrar. La primera, como su nombre lo indica, realiza la conexion con la
base de datos, la segunda lo que hace es tomar el valos que mandamos por el formulario y
hacer un select en la base de datos, en este caso seleccionara los campos que coincidan con
la materia que quiere consultar el usuario, y la tercera funcion, al igual como su nombre lo
indica, cierra la conexion a la base de datos. A continuacion explico el ultimo archivo que es
vista.php
vista. php
<html>
<title>Vista de datos</title>
<body>
<table border = "1">
<tr align = "center">
<td><b>Maestro</b></td>
<td><b>Division</b></td>
</tr>
<?
$db = new mysql();

$db->conectar();
$db->mostrar_materias();
$db->cerrar();
?>
</table>
<br><a href = "index.html">Regresar</a>
</body>
</html>
En este archivo ponemos todos las etiquetas html necesarias para hacer una tabla, en la cual
es donde mandaremos a llamar las funciones que tenemos en el archivo modelo.php, se llaman
creando un objeto o una variable que este caso es $db despues con esa mismo objeto
llamamos las funciones conectar(), mostrar_materias() y cerrar().
Hay un ultimo archivo que se llama error.html que se ejecuta cuando el usuario no selecciono
ninguna materia.
error.html
<html>
<title>Error</title>
<body>
<center><h1>Porfavor seleccione una materia</h1></center>
<center><a href = "index.html">Regresar</a></center>
</body>
</html>

A continuacin muestro las capturas de pantalla de esta aplicacion y de la tabla en la base de

datos.

Y eso es todo con respecto a mi ejemplo de MVC, espero haya sido de su agrado.