Sigueme en Facebook Sigueme en Twitter Sigueme en Instagram Sigueme en Youtube
JC Mouse Bolivia
Index / PHP / Proyectos / MVC: Modelo, Vista y Controlador en PHP

MVC: Modelo, Vista y Controlador en PHP

Autor jc mouse domingo, octubre 23, 2011

EL patrón MVC (Model, View, Controller) o Modelo, Vista Controlador, es un tipo de diseño que separa en capas bien definidas el desarrollo de una aplicación, esas partes son tres, el Modelo encargado de la logica del negocio y la persistencia de los datos, las Vistas son las responsables de mostrar al usuario el resultado que obtienen del modelo a traves del controlador, el Controlador encargado es el encargado de gestionar las peticiones del usuario, procesarlas invocando al modelo y mostrarlas al usuario a traves de las vistas.

Ahora desarrollaremos un ejemplo de este patron MVC en PHP, una aplicación sencilla con una base de datos y una consulta de busqueda. la estructura de la pagina sera la común, un encabezado, un menu, y contenido sin pie de pagina ya que no es relevante para el ejemplo.

php mouse

¿Que necesitamos?

1. IDE para PHP (Dreamweaver, PhpDesigner, netbeans, etc) o un editor de texto como notepad

2. Leer teoria sobre MVC en este tuto todo sera práctica

3. Una Base de Datos MySQL

4. Un Servidor Web (AppServer, XAMP, etc)

Proyecto.

1. Para este tutorial utilizaremos PhpDesigner, no es obligatorio, se puede utilizarse cualquier otro IDE citado arriba. Lo primero que haremos sera crear la estructura del proyecto MVC, para esto, creamos un nuevo proyecto en el IDE que estemos utilizando, el proyecto se llamara “jmvc“, despues iremos añadiendo carpetas segun el orden que nos indica el patrón MVC, debes tener una estructura como la siguiente:

mvc1

 

2. Continuaremos con el desarrollo del MODELO, MVC nos dice que en el modelo es donde se coloca la logica del negocio, ademas es aqui donde se efectua a interacción con la base de datos. Nuestro modelo constara de dos clases:

  • db.class.php -> Encargada de la conexion con la base de datos y ademas contiene los metodos necesarios para realizar las diversas consultas que necesitemos.
  • universitario.class.php -> Es en esta clase donde debemos colocar todas las funciones que requieran extraer información de la base de datos, procesarlas y devolverlas al usuario en el VIEW (VISTA)

Clase: db.class.php

<?php
/*
CLASE PARA LA CONEXION Y LA GESTION DE LA BASE DE DATOS Y LA PAGINA WEB
*/
class database {

 private $conexion;

    /* METODO PARA CONECTAR CON LA BASE DE DATOS*/
 public function conectar()
 {
  if(!isset($this->conexion))
  {
    $this->conexion = (mysql_connect("localhost","USUARIO","PASSWORD")) or die(mysql_error());
    mysql_select_db("BASE_DE_DATOS",$this->conexion) or die(mysql_error());
  }
 } 

  /* METODO PARA REALIZAR UNA CONSULTA 
 INPUT:
 $sql | codigo sql para ejecutar la consulta
 OUTPUT: $result
 */
 public function consulta($sql)
 {
    $resultado = mysql_query($sql,$this->conexion);
    if(!$resultado){
     echo 'MySQL Error: ' . mysql_error();
     exit;
    }
    return $resultado;
 }

 /*METODO PARA CONTAR EL NUMERO DE RESULTADOS
 INPUT: $result
 OUTPUT: cantidad de registros encontrados
 */
 function numero_de_filas($result){
  if(!is_resource($result)) return false;
  return mysql_num_rows($result);
 }

 /*METODO PARA CREAR ARRAY DESDE UNA CONSULTA
 INPUT: $result
 OUTPUT: array con los resultados de una consulta
 */
 function fetch_assoc($result){
  if(!is_resource($result)) return false;
   return mysql_fetch_assoc($result);
 }

     /* METODO PARA CERRAR LA CONEXION A LA BASE DE DATOS */
 public function disconnect()
 {
  mysql_close();
 }

}
?>

Para este ejemplo utilizamos una base de datos con una sola tabla UNIVERSITARIO, la estructura de la tabla asi como algunos datos, en el siguiente script:

CREATE TABLE universitario (
  id bigint(20) NOT NULL auto_increment,
  cedula varchar(12) NOT NULL,
  nombre varchar(60) default NULL,
  paterno varchar(60) default NULL,
  materno varchar(60) default NULL,
  carrera varchar(100) default NULL,
  PRIMARY KEY  (id)
)

INSERT INTO universitario VALUES (301, '5522478576', 'Libia', 'Katari', 'Reynoso', 'Enfermeria');
INSERT INTO universitario VALUES (302, '6757218827', 'Lizzet', 'Rico', 'Surco', 'Ingenieria Quimica');
INSERT INTO universitario VALUES (303, '3501621553', 'Anibal', 'Himmler', 'Rufino', 'Enfermeria');
INSERT INTO universitario VALUES (304, '0760176438', 'Lena', 'Jimenez', 'Poquechoque', 'Arquitectura');
INSERT INTO universitario VALUES (305, '1772230531', 'Lina', 'Kenjo', 'Llusco', 'Ingenieria Quimica');
INSERT INTO universitario VALUES (326, '1071742326', 'Hilarion', 'Surco', 'Jimenez', 'Derecho');
INSERT INTO universitario VALUES (327, '1651117538', 'Fernando', 'Kenjo', 'Fuertes', 'Farmacia');
INSERT INTO universitario VALUES (328, '4727502832', 'Rei', 'Simpson', 'Fortuna', 'Medicina');
INSERT INTO universitario VALUES (329, '2634301352', 'Paola', 'Altamirano', 'Fortuna', 'Farmacia');
INSERT INTO universitario VALUES (330, '4060826165', 'Laura', 'Gorgori', 'Ikari', 'Administración de Empresas');
INSERT INTO universitario VALUES (331, '6562441148', 'Reyna', 'Alvis', 'Himmler', 'Agronomia');
INSERT INTO universitario VALUES (332, '2278381772', 'Lena', 'Altamirano', 'Kenjo', 'Administración de Empresas');
INSERT INTO universitario VALUES (333, '8554161628', 'Laura', 'Aviles', 'Llusco', 'Administración de Empresas');
INSERT INTO universitario VALUES (334, '0002738271', 'Oscar', 'Camara', 'Katari', 'Gas y Petroleo');
INSERT INTO universitario VALUES (335, '2673648388', 'Lena', 'Fortuna', 'Altamirano', 'Agronomia');
INSERT INTO universitario VALUES (336, '3605678426', 'Lizzet', 'Zanabria', 'Callaza', 'Economia');
INSERT INTO universitario VALUES (337, '1543513701', 'Fernando', 'Katari', 'Simpson', 'Diseño de Interiores');
INSERT INTO universitario VALUES (338, '3877833273', 'Fernando', 'Camara', 'Chipana', 'Agronomia');
INSERT INTO universitario VALUES (339, '5524582347', 'Oscar', 'Brinco', 'Chavez', 'Gas y Petroleo');
INSERT INTO universitario VALUES (340, '7532852006', 'Cesar', 'Brinco', 'Ikari', 'Ingenieria de Sistemas');
INSERT INTO universitario VALUES (341, '4740118030', 'Rei', 'Chive', 'Gorgori', 'Enfermeria');
INSERT INTO universitario VALUES (342, '5663577704', 'Paola', 'Paravicini', 'Flanders', 'Derecho');
INSERT INTO universitario VALUES (343, '5742610002', 'David', 'Brinco', 'Jimenez', 'Economia');
INSERT INTO universitario VALUES (344, '3740560251', 'Pedro', 'Sanchez', 'Brinco', 'Agronomia');
INSERT INTO universitario VALUES (345, '1681801012', 'Lula', 'Chive', 'Langley', 'Odontologia');
INSERT INTO universitario VALUES (346, '0454664741', 'Bryan', 'Brinco', 'Jimenez', 'Ingenieria Quimica');

Recuerda que debes crear una base de datos junto a la tabla y los datos en el servidor que estes utilizando y colocar esos datos en la clase db.class.php

Clase: universitario.class.php

<?php
/*
 CLASE PARA LA GESTION DE LOS UNIVERSITARIOS
*/
require_once "db.class.php";

class universitario extends database {

 /* REALIZA UNA CONSULTA A LA BASE DE DATOS EN BUSCA DE REGISTROS UNIVERSITARIOS DADOS COMO
 PARAMETROS LA "CARRERA" Y LA "CANTIDAD" DE REGISTROS A MOSTRAR
 INPUT:
 $carrera | nombre de la carrera a buscar
 $limit | cantidad de registros a mostrar
 OUTPUT:
 $data | Array con los registros obtenidos, si no existen datos, su valor es una cadena vacia
 */
 function universitarios($carrera=NULL, $limit=12)
 {
  //conexion a la base de datos
  $this->conectar();
  $query = $this->consulta("SELECT * FROM universitario WHERE carrera='$carrera' ORDER BY rand() LIMIT $limit;");
      $this->disconnect();
  if($this->numero_de_filas($query) > 0) // existe -> datos correctos
  {
    //se llenan los datos en un array
    while ( $tsArray = $this->fetch_assoc($query) )
     $data[] = $tsArray;   

    return $data;
  }else
  {
   return '';
  }
 }

}

?>

3. Es el turno de crear las VISTAS del usuario (VIEW), estas vistas pueden ser creadas utilizando algun manejador de plantillas *.tpl o tambien pueden ser HTML puro como nuestro caso, estas vistas deben contener codigo php minimo para su mejor mantenimiento, ademas estas vistas al ser HTML, tambien hacen uso de hojas de estilo CSS, javascript, imagenes y otros recursos tipicos en cualquier otra web.

Crearemos nuevas carpetas dentro de nuestra carpeta “default” que creamos al comienzo del proyecto, las nuevas carpetas y archivos son:

  • css
  • images
  • modules
  • sections
  • page.php

debemos tener algo como la imagen siguiente:

mvc php

 

CSS: En esta carpeta guardaremos todas las hojas de estilo que utilicemos en el proyecto, para este ejemplo, solo utilizamos una hoja de estilo (estilo.css) cuyo codigo es el siguiente:

estilo.css

* { padding: 0; margin: 0; }

body {
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: 13px;
 background-color:#FFFFCC;
}

/* Maquetación */
#wrapper { 
 margin: 0 auto;
 width: 100%;
}

#header {
 width: 100%;
 float: left;
 height: 120px;
 background:#0099CC;
  border-bottom:1px solid #D9E3E5; 
}

#leftcolumn { 
  height:inherit;
 width: 20%;
 float: left;
}

#content { 
 float: left;
 color: #333;
 background:#CCCCCC;
 width:76%;
 height:inherit:
 display: inline;
}
/* end: maquetación */

/* estilo de texto */
.t{
 font-size:18px; font-weight:bold; margin:10px 0 10px 0; padding-left:20px;
}

/*------------- ESTILOS TABLA -----------------*/
.tabla th {
padding: 5px;
font-size: 16px;
background-color: #83aec0;
color: #FFFFFF;
border-width: 1px;
border-style: solid;
border-color: #ffffff;
font-family: ?Trebuchet MS?, Arial;
text-transform: uppercase;
}

.tabla td {
padding: 5px;
border-width: 1px;
border-style: solid;
border-color: #ffffff;
text-align:right;
} 

/*------------------------- MENU IZQUIERDA ----------------------------*/
#menu {
 width: 200px;
 margin: 10px;
}

#menu li a {
 height: 32px;
   voice-family: "\"}\"";
   voice-family: inherit;
   height: 24px;
 text-decoration: none;
} 

#menu li a:link, #menu5 li a:visited {
 color: #FFF;
 display: block;
 background:  url(../images/menu.gif);
 padding: 8px 0 0 10px;
}

#menu li a:hover {
 color: #FFF;
 background:  url(../images/menu.gif) 0 -32px;
 padding: 8px 0 0 10px;
}
#menu ul {
 list-style: none;
 margin: 0;
 padding: 0;
}

Images: Como su nombre indica, es aqui donde se almacenan todas las imagenes que utilicemos en la pagina web, para este ejemplo, solo utilizamos una imagen para el menu de nuestro sitio web (menu.gif), la imagen es:

two

 

sections: En esta carpeta almacenaremos los archimos html que contienen las diferentes partes de nuestra pagina web, para este proyecto dividimos la pagina web en HEADER y MENU y un CONTENT, los archivos y su codigo correspondiente son los siguientes:

  • s.header.php
<div style=" margin:20px 0 0 0; text-align:center;">
 <h1>Model, View and Controller - by Mouse</h1>
 <h1>#TITLE#</h1>
</div>
  • s.menuizquierda.php
<div id="menu">
  <ul>
    <li><a href="index.php" >Principal</a></li>
    <li><a href="index.php?action=buscar">Buscar</a></li>
    <li><a href="index.php?action=history">History of Bolivia</a></li>
  </ul>
</div>

 

modules: En esta sección almacenaremos los archivos correspondientes al contenido de la pagina, osea aquellos datos que se veran en la seccion del CONTENT. estos archivos son:

m.buscador.php ->

 <form action="index.php" method="post">
   <table border="0" cellspacing="4" cellpadding="0" class="tabla">
  <tr>
    <td>Buscar por: </td>
    <td><label>
      <select name="carrera">
        <option value="Arquitectura">Arquitectura</option>
        <option value="Enfermeria">Enfermeria</option>
        <option value="Ingenieria Quimica">Ingenieria Quimica</option>
        <option value="Odontologia">Odontologia</option>
        <option value="Ingenieria de Sistemas">Ingenieria de Sistemas</option>
        <option value="Gas y Petroleo">Gas y Petroleo</option>
        <option value="Administraci&oacute;n de Empresas">Administraci&oacute;n de Empresas</option>
        <option value="Dise&ntilde;o de Interiores">Dise&ntilde;o de Interiores</option>
        <option value="Ingenieria Civil">Ingenieria Civil</option>
        <option value="Ingenieria de Perros">Ingenieria de Alimentos</option>
      </select>
    </label></td>
    <td>Cantidad de registros: </td>
    <td><label>
      <select name="cantidad">
        <option value="10">10</option>
        <option value="12">12</option>
        <option value="16">16</option>
        <option value="24">24</option>
        <option value="36">36</option>
        <option value="72">72</option>
        <option value="100">100</option>
        <option value="200">200</option>
      </select>
    </label></td>
    <td><label>
      <input type="submit" name="Submit" value=" Buscar " />
    </label></td>
  </tr>
</table>
</form>

m.historia.php –> Esta página es estatica, no contiene instrucciones php y solo nos sirve para mostrar contenido html

<div>
<div><h1>History of Bolivia</h1></div>
<div>
  <p>Lorem ipsum ad his scripta blandit partiendo, eum fastidii accumsan euripidis in, eum liber hendrerit an. Qui ut wisi vocibus suscipiantur, quo dicit ridens inciderint id. Quo mundi lobortis reformidans eu, legimus senserit definiebas an eos. Eu sit tincidunt incorrupte definitionem, vis mutat affert percipit cu, eirmod consectetuer signiferumque eu per. In usu latine equidem dolores. Quo no falli viris intellegam, ut fugit veritus placerat per. </p>
  <p align="center"><img src="http://1.bp.blogspot.com/-bOuBEaJAa_A/TZUt3KH11OI/AAAAAAAAABo/SmUVVvugU78/s748/Bolivia%2Bflag.jpg" border="0" alt="Bolivia!" title="Bolivia!" /></p>
  <p>Ius id vidit volumus mandamus, vide veritus democritum te nec, ei eos debet libris consulatu. No mei ferri graeco dicunt, ad cum veri accommodare. Sed at malis omnesque delicata, usu et iusto zzril meliore. Dicunt maiorum eloquentiam cum cu, sit summo dolor essent te. Ne quodsi nusquam legendos has, ea dicit voluptua eloquentiam pro, ad sit quas qualisque. Eos vocibus deserunt quaestio ei.</p>
  <p>Blandit incorrupte quaerendum in quo, nibh impedit id vis, vel no nullam semper audiam. Ei populo graeci consulatu mei, has ea stet modus phaedrum. Inani oblique ne has, duo et veritus detraxit. Tota ludus oratio ea mel, offendit persequeris ei vim. Eos dicat oratio partem ut, id cum ignota senserit intellegat. Sit inani ubique graecis ad, quando graecis liberavisse et cum, dicit option eruditi at duo. Homero salutatus suscipiantur eum id, tamquam voluptaria expetendis ad sed, nobis feugiat similique usu ex.</p>
  <p>Eum hinc argumentum te, no sit percipit adversarium, ne qui feugiat persecuti. Odio omnes scripserit ad est, ut vidit lorem maiestatis his, putent mandamus gloriatur ne pro. Oratio iriure rationibus ne his, ad est corrumpit splendide. Ad duo appareat moderatius, ei falli tollit denique eos. Dicant evertitur mei in, ne his deserunt perpetua sententiae, ea sea omnes similique vituperatoribus. Ex mel errem intellegebat comprehensam, vel ad tantas antiopam delicatissimi, tota ferri affert eu nec. Legere expetenda pertinacia ne pro, et pro impetus persius assueverit.</p>
  <p>Ea mei nullam facete, omnis oratio offendit ius cu. Doming takimata repudiandae usu an, mei dicant takimata id, pri eleifend inimicus euripidis at. His vero singulis ea, quem euripidis abhorreant mei ut, et populo iriure vix. Usu ludus affert voluptaria ei, vix ea error definitiones, movet fastidii signiferumque in qui.</p>
  <p>Vis prodesset adolescens adipiscing te, usu mazim perfecto recteque at, assum putant erroribus mea in. Vel facete imperdiet id, cum an libris luptatum perfecto, vel fabellas inciderint ut. Veri facete debitis ea vis, ut eos oratio erroribus. Sint facete perfecto no vel, vim id omnium insolens. Vel dolores perfecto pertinacia ut, te mel meis ullum dicam, eos assum facilis corpora in.</p>
  <p>Mea te unum viderer dolores, nostrum detracto nec in, vis no partem definiebas constituam. Dicant utinam philosophia has cu, hendrerit prodesset at nam, eos an bonorum dissentiet. Has ad placerat intellegam consectetuer, no adipisci mandamus senserit pro, torquatos similique percipitur est ex. Pro ex putant deleniti repudiare, vel an aperiam sensibus suavitate. Ad vel epicurei convenire, ea soluta aliquid deserunt ius, pri in errem putant feugiat.</p>
  <p>Sed iusto nihil populo an, ex pro novum homero cotidieque. Te utamur civibus eleifend qui, nam ei brute doming concludaturque, modo aliquam facilisi nec no. Vidisse maiestatis constituam eu his, esse pertinacia intellegam ius cu. Eos ei odio veniam, eu sumo altera adipisci eam, mea audiam prodesset persequeris ea. Ad vitae dictas vituperata sed, eum posse labore postulant id. Te eligendi principes dignissim sit, te vel dicant officiis repudiandae.</p>
</div>
</div>

m.principal.php -> Igual que la anterior, solo muestra codigo HTML sin procesamiento de instrucciones PHP

<div>
<div><h1>Welcome to Bolivia Technology</h1></div>
<div>
  <p>Lorem ipsum ad his scripta blandit partiendo, eum fastidii accumsan euripidis in, eum liber hendrerit an. Qui ut wisi vocibus suscipiantur, quo dicit ridens inciderint id. Quo mundi lobortis reformidans eu, legimus senserit definiebas an eos. Eu sit tincidunt incorrupte definitionem, vis mutat affert percipit cu, eirmod consectetuer signiferumque eu per. In usu latine equidem dolores. Quo no falli viris intellegam, ut fugit veritus placerat per. </p>
  <p>Ius id vidit volumus mandamus, vide veritus democritum te nec, ei eos debet libris consulatu. No mei ferri graeco dicunt, ad cum veri accommodare. Sed at malis omnesque delicata, usu et iusto zzril meliore. Dicunt maiorum eloquentiam cum cu, sit summo dolor essent te. Ne quodsi nusquam legendos has, ea dicit voluptua eloquentiam pro, ad sit quas qualisque. Eos vocibus deserunt quaestio ei.</p>
  <p>Blandit incorrupte quaerendum in quo, nibh impedit id vis, vel no nullam semper audiam. Ei populo graeci consulatu mei, has ea stet modus phaedrum. Inani oblique ne has, duo et veritus detraxit. Tota ludus oratio ea mel, offendit persequeris ei vim. Eos dicat oratio partem ut, id cum ignota senserit intellegat. Sit inani ubique graecis ad, quando graecis liberavisse et cum, dicit option eruditi at duo. Homero salutatus suscipiantur eum id, tamquam voluptaria expetendis ad sed, nobis feugiat similique usu ex.</p>
  <p>Eum hinc argumentum te, no sit percipit adversarium, ne qui feugiat persecuti. Odio omnes scripserit ad est, ut vidit lorem maiestatis his, putent mandamus gloriatur ne pro. Oratio iriure rationibus ne his, ad est corrumpit splendide. Ad duo appareat moderatius, ei falli tollit denique eos. Dicant evertitur mei in, ne his deserunt perpetua sententiae, ea sea omnes similique vituperatoribus. Ex mel errem intellegebat comprehensam, vel ad tantas antiopam delicatissimi, tota ferri affert eu nec. Legere expetenda pertinacia ne pro, et pro impetus persius assueverit.</p>
  <p>Ea mei nullam facete, omnis oratio offendit ius cu. Doming takimata repudiandae usu an, mei dicant takimata id, pri eleifend inimicus euripidis at. His vero singulis ea, quem euripidis abhorreant mei ut, et populo iriure vix. Usu ludus affert voluptaria ei, vix ea error definitiones, movet fastidii signiferumque in qui.</p>
  <p>Vis prodesset adolescens adipiscing te, usu mazim perfecto recteque at, assum putant erroribus mea in. Vel facete imperdiet id, cum an libris luptatum perfecto, vel fabellas inciderint ut. Veri facete debitis ea vis, ut eos oratio erroribus. Sint facete perfecto no vel, vim id omnium insolens. Vel dolores perfecto pertinacia ut, te mel meis ullum dicam, eos assum facilis corpora in.</p>
  <p>Mea te unum viderer dolores, nostrum detracto nec in, vis no partem definiebas constituam. Dicant utinam philosophia has cu, hendrerit prodesset at nam, eos an bonorum dissentiet. Has ad placerat intellegam consectetuer, no adipisci mandamus senserit pro, torquatos similique percipitur est ex. Pro ex putant deleniti repudiare, vel an aperiam sensibus suavitate. Ad vel epicurei convenire, ea soluta aliquid deserunt ius, pri in errem putant feugiat.</p>
  <p>Sed iusto nihil populo an, ex pro novum homero cotidieque. Te utamur civibus eleifend qui, nam ei brute doming concludaturque, modo aliquam facilisi nec no. Vidisse maiestatis constituam eu his, esse pertinacia intellegam ius cu. Eos ei odio veniam, eu sumo altera adipisci eam, mea audiam prodesset persequeris ea. Ad vitae dictas vituperata sed, eum posse labore postulant id. Te eligendi principes dignissim sit, te vel dicant officiis repudiandae.</p>
</div>
</div>

m.table_univ.php -> Este archivo si contiene instrucciones PHP, como se ve en e codigo, es una tabla de 5 columnas junto a la intruccion PHP de FOREACH, recibe un array que viene desde el modelo y segun los datos que contenga va recoriendo y creando a su paso las filas TD de la tabla

<div class="t"><?php echo $titulo; ?></div>
    <table border="0" cellspacing="3" cellpadding="0" class="tabla" width="100%">
   <tr>
      <th>DNI</th>
      <th>Nombre</th>
      <th>Ap. Paterno </th>
      <th>Ap. Materno  </th>
      <th>Carrera</th>
    </tr>
    <?php foreach ($tsArray as $data): ?>
    <tr>
        <td><?php echo $data['cedula'];?></td>
      <td><?php echo $data['nombre'];?></td>
      <td><?php echo $data['paterno'];?></td>
        <td><?php echo $data['materno'];?></td>
        <td><?php echo $data['carrera'];?></td>
    </tr>
    <?php endforeach; ?>
 </table>

Ademas como se puede ver en la imagen, tenemos tambien un archivo PHP (page.php) que esta en la raiz de la carpeta “default“, este archivo es toda la plantilla en si, ademas contiene algunas palabras clave encerradas entre los simbolos de numeral “#”, estas “palabaras clave” nos serviran para reemplazaras por nuestros datos desde el CONTROLADOR

<!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=iso-8859-1" />
<title>MVC - by Mouse</title>
<link rel="stylesheet" type="text/css" href="app/views/default/css/estilo.css"/>
</head>
<body>
<div id="wrapper">
  <!-- header -->
        <div id="header">
     #HEADER#
  </div>
  <!-- end: header -->
  <!-- columna izquierda -->
        <div id="leftcolumn">
    #MENULEFT#
  </div>
  <!-- end: columna izquierda -->
  <!-- contenido -->
  <div id="content">
    #CONTENIDO#
  </div>
  <!-- end: contenido -->
</div>
</body>
</html>

4. Estamos a punto de terminar el proyecto, ahora necesitamos implementar el CONTROLADOR del proyecto, como dijimos al principio el controlodor es el encargado de recibir las ordenes del usuario y mediante el uso del modelo procesar la información para mostrar el resultado a traves de las vistas.

Clase: mvc.controller.php

<?php

require 'app/model/universitario.class.php';

class mvc_controller {

 /* METODO QUE RECIBE LA ORDEN DE BUSQUEDA, PREPARA LOS DATOS Y SE COMUNICA
 CON EL MODELO PARA REALIZAR LA CONSULTA
 INPUT
 $carrera | nombre de la carrera a buscar
 $limit | cantidad de registros a mostrar
 OUTPUT
 HTML | el resultado obtenido del modelo es procesado y convertido en codigo html para que el VIEW pueda mostrarlo 
 */
    function buscar($carrera, $cantidad)
   {
  $universitario = new universitario();
  //carga la plantilla 
  $pagina=$this->load_template('- Resultados de la busqueda -');
  //carga html del buscador
       $buscador = $this->load_page('app/views/default/modules/m.buscador.php');
       //obtiene los registros de la base de datos
    ob_start();
    //realiza consulta al modelo
     $tsArray = $universitario->universitarios($carrera,$cantidad);
      if($tsArray!=''){//si existen registros carga el modulo en memoria y rellena con los datos 
      $titulo = 'Resultado de busqueda por "'.$carrera.'" ';
      //carga la tabla de la seccion de VIEW
        include 'app/views/default/modules/m.table_univ.php';
      $table = ob_get_clean();
      //realiza el parseado 
      $pagina = $this->replace_content('/\#CONTENIDO\#/ms', $buscador.$table , $pagina);
      }else{//si no existen datos -> muestra mensaje de error
        $pagina = $this->replace_content('/\#CONTENIDO\#/ms' ,$buscador.'<h1>No existen resultados</h1>' , $pagina);
      }
  $this->view_page($pagina);
   }

   /* METODO QUE MUESTRA LA PAGINA PRINCIPAL CUANDO NO EXISTEN NUEVAS ORDENES
 OUTPUT
 HTML | codigo html de la pagina 
 */
   function principal()
   {
  $pagina=$this->load_template('Pagina Principal MVC');
  $html = $this->load_page('app/views/default/modules/m.principal.php');
  $pagina = $this->replace_content('/\#CONTENIDO\#/ms' ,$html , $pagina);
  $this->view_page($pagina);
   }

   /* METODO QUE MUESTRA LA PAGINA HISTORIA DE BOLIVIA, ES UNA PAGINA ESTATICA
 OUTPUT
 HTML | codigo html de la pagina 
 */
   function historia()
   {
  $pagina=$this->load_template('History of Bolivia');
  $html = $this->load_page('app/views/default/modules/m.historia.php');
  $pagina = $this->replace_content('/\#CONTENIDO\#/ms' ,$html , $pagina);
  $this->view_page($pagina);
   }

 /* METODO QUE CARGA LAS PARTES PRINCIPALES DE LA PAGINA WEB
 INPUT
 $title | titulo en string del header
 OUTPIT
 $pagina | string que contiene toda el cocigo HTML de la plantilla 
 */
 function load_template($title='Sin Titulo'){
  $pagina = $this->load_page('app/views/default/page.php');
  $header = $this->load_page('app/views/default/sections/s.header.php');
  $pagina = $this->replace_content('/\#HEADER\#/ms' ,$header , $pagina);
  $pagina = $this->replace_content('/\#TITLE\#/ms' ,$title , $pagina);
  $menu_left = $this->load_page('app/views/default/sections/s.menuizquierda.php');
  $pagina = $this->replace_content('/\#MENULEFT\#/ms' ,$menu_left , $pagina);
  return $pagina;
 }

 /* METODO QUE MUESTRA EN PANTALLA EL FORMULARIO DE BUSQUEDA
 HTML | codigo html de la pagina con el buscador incluido
 */
 function buscador(){
  $pagina=$this->load_template('Busqueda de registros');
  $buscador = $this->load_page('app/views/default/modules/m.buscador.php');
  $pagina = $this->replace_content('/\#CONTENIDO\#/ms' ,$buscador , $pagina);
  $this->view_page($pagina);
 }

 /* METODO QUE CARGA UNA PAGINA DE LA SECCION VIEW Y LA MANTIENE EN MEMORIA
 INPUT
 $page | direccion de la pagina 
 OUTPUT
 STRING | devuelve un string con el codigo html cargado
 */
 private function load_page($page)
 {
  return file_get_contents($page);
 }

 /* METODO QUE ESCRIBE EL CODIGO PARA QUE SEA VISTO POR EL USUARIO
 INPUT
 $html | codigo html
 OUTPUT
 HTML | codigo html 
 */
 private function view_page($html)
 {
  echo $html;
 }

 /* PARSEA LA PAGINA CON LOS NUEVOS DATOS ANTES DE MOSTRARLA AL USUARIO
 INPUT
 $out | es el codigo html con el que sera reemplazada la etiqueta CONTENIDO
 $pagina | es el codigo html de la pagina que contiene la etiqueta CONTENIDO
 OUTPUT
 HTML | cuando realiza el reemplazo devuelve el codigo completo de la pagina
 */
 private function replace_content($in='/\#CONTENIDO\#/ms', $out,$pagina)
 {
   return preg_replace($in, $out, $pagina);
 }

}
?>

5. Para terminar la aplicación haremos uso de un distpacher, un dispatcher es una entrada única para la aplicación, esta entrada sera nuestro index.php hubicada en la raiz del proyecto, a traves de él mostraremos la salida de las vistas al usuario y tambien a traves de él enviaremos las distintas acciones que el usuario envie al controlador.

index.php

<?php
 require 'app/controller/mvc.controller.php';

     //se instancia al controlador 
 $mvc = new mvc_controller();

 if( $_GET['action'] == 'buscar' ) //muestra el modulo del buscador
 {
   $mvc->buscador();
 }
 else if( $_GET['action'] == 'history' ) //muestra el modulo "historia de Bolivia"
 {
   $mvc->historia();
 }
 else if( isset($_POST['carrera']) && isset($_POST['cantidad']) )//muestra el buscador y los resultados
 {
   $mvc->buscar( $_POST['carrera'], $_POST['cantidad'] );
 }
 else //Si no existe GET o POST -> muestra la pagina principal
 {
  $mvc->principal();
 }
?>

La estructura del proyecto que debes tener hasta ahora es:

Con esto terminamos el proyecto, ya solo queda ejecutar la aplicación web desde el servidor, en el siguiente video puedes ver el resultado ademas del desarrollo del ejemplo en el IDE de PhpDesigner

[http://www.youtube.com/watch?v=1hPOXbhK6LM]

Este es un ejemplo de desarrollo de una aplicación web utilizando el patron MVC, no es el único, no existe regla que diga como debe estructurase las carpetas y archivos del proyecto MVC siempre y cuando se conserve la division entre las partes Modelo, Vista y Controlador, aunque claro es una buena practica utilizar algunas notaciones ya generalizadas como CLASS para los archivos de clases, CONTROLLER en los archivos que utilicemos como controladores, etc.

Si deseas puedes descargarte el ejemplo desde AQUI

 

Tags

Si te ha gustado podrías compartirlo o dejar un comentario. ¡Muchas gracias!
Autor: JC Mouse

Yo soy yo :) JC Mouse, Soy orgullosamente boliviano soy fundador y CEO de la web jc-Mouse.net uno de las pocas web en emprendimiento y tecnología en Bolivia.

Toda la información que encuentres en este sitio es y sera completamente gratis siempre, puedes copiar, descargar y re-publicar si así lo deseas en otros blogs o sitios web, solo te pido a cambio que dejes una referencia a esta web. Esto nos ayuda a crecer y seguir aportando. Bye

Enjoy! :)

También Te Podría Interesar

Estilos condicionales en iReport

Estilos condicionales en iReport

iReport nos da la posibilidad de dar un formato condicional a los diferentes registros resultado de nuestras consultas S...

SQLite/Java conexión

SQLite/Java conexión

SQLite. SQLite es un sistema de gestión de bases de datos relacional compatible con ACID, contenida en una relativamente...

Simulador de Urna Electrónica en java

Simulador de Urna Electrónica en java

Hola 🙂 en esta ocasión un amigo del Brasil nos envía un proyecto java de una Urna Electrónica o Voto Electronico, desarr...

WorldMap: Construye y comparte mapas en la nube

WorldMap: Construye y comparte mapas en la nube

Harvard WorldMap es una plataforma de mapeo de código abierto en línea, desarrollado por el Centro de Análisis Geográfic...

Construye tu aplicación de mensajeria

Construye tu aplicación de mensajeria

En este post crearemos una aplicación sencilla para mandar mensajes de texto desde android. Necesitamos IDE: Eclipse + S...

Recortar partes de una imagen con el mouse

Recortar partes de una imagen con el mouse

En este oportunidad comparto una pequeña aplicación hecha en java para recortar partes de una imagen seleccionado con el...

44 comentarios en “MVC: Modelo, Vista y Controlador en PHP”

  1. Mouse dice:

    de nada, se hace lo que se puede 🙂

  2. Elizabeth dice:

    Hola Me gusto mucho… ya lo estuve checando.. esta muy bien.. solo que no sé que cuando visualizo la pagina me marca un error, cuando estoy en principal, si me voy a los otros dos menus no, o cuando hago mi consulta me manda el ismo error “Notice: Undefined index: action in C:\wamp\www\jmvc\index.php on line 7 y la linea 11, las cuales tienen la linea if( $_GET[‘action’] == ‘buscar’ ) y else if( $_GET[‘action’] == ‘history’ )… me podrias ayudar a … y muchisimas gracias por tu aporte.

    1. Mouse dice:

      el error te dice que no encuentras variables, lo que puedes hacer es usar la instruccion isset() para comprobar que estos existen $_GET y $_POST

      if( $_GET[‘action’] || $_POST[‘action’] )
      {
      aqui el contendio de todo el IF anterior
      }
      $mvc->principal();

      dime que sistema operativo usas, yo lo probe en servidores windows y linux y no me sale ese problema :/

      1. Angel dice:

        amigo tambien me da el mismo error lo estoy corriendo de forma local con Win7

      2. jose vicente dice:

        tengo el mismo error en la linea 7 y 11 del index el error dice : “Notice: Undefined index: action in C:\wamp\www\jmvc\index.php on line 7 y la linea 11, las cuales tienen la linea if( $_GET[‘action’] == ‘buscar’ ) y else if( $_GET[‘action’] == ‘history’ ). AYUDAME POR FAVOR nose porque muestra este error estoy utilizando servidor local

  3. Rodinho2705 dice:

    Muy bueno amigo si lo entendí sigue así..!XDD

  4. Paolo Pecho Imán dice:

    Hola amigo muchisimas gracias por tu ejemplo en verdad. He estado como loco buscando algo como lo que presentas, pues buen trabajo mi estimado y nuevamente muchas gracias.
    Dejame tu facebook o tu correo para hacerte preguntas al respecto de php con mvc.
    Si no fuese mucha molestia.
    Saludos,

    1. Mouse dice:

      mi pagina en facebook esta a la izquierda de tu pantalla, dale click en me gusta 🙂

  5. Paolo Pecho Imán dice:

    Listo mi estimado, ya me salio tu app. Muchisimas gracias nuevamente eres un tipaso, mi estimado yo soy de Lima – Perú.
    bueno mi facebook es http://www.facebook.com/paolo.pechoiman.9.
    Le he dado me gusta pero no se cual serà tu facebook , pasamelo por favor, puesto que no soy muy conocedor de esta herramienta.
    Gracias y pues saludos desde Lima – Perú, ya son cerca de las 3:00 am. y pues estoy contento ya que aprendi gracias a tu ejemplo.

    1. Mouse dice:

      y cual fue tu error y como lo solucionaste, cuéntanos así aprendemos todos 🙂

  6. Paolo Pecho Imán dice:

    doctor el problema era que estaba cerrando la conexion antes de abrirla jajaja.
    cosa de juego.
    Pero tengo una consulta
    por que utilizas esto ???…
    ob_start();
    //realiza consulta al modelo
    $tsArray = $universitario->universitarios($carrera,$cantidad);
    if($tsArray!=”){//si existen registros carga el modulo en memoria y rellena con los datos
    $titulo = ‘Resultado de busqueda por “‘.$carrera.'” ‘;
    //carga la tabla de la seccion de VIEW
    include ‘app/views/default/modules/m.table_univ.php’;
    $table = ob_get_clean();
    //realiza el parseado
    $pagina = $this->replace_content(‘/\#CONTENIDO\#/ms’, $buscador.$table , $pagina);

    El ob_start() y por que llamas a la pagina de la tabla de universitarios con include(….), que pasaria si yo la llamo directamente con el metodo $this->load_page(…), me entrgaria todo esto como cadena no es asi??..
    y el còdigo php me saldria reflejado tan solo como texto sin variar absolutamente nada no es asi??. por favor confirmame.

    Saludos desde Perú.

    1. Mouse dice:

      el ob_start() lo que hace es habilitar el buffer de salida, osea el código php es ejecutado en el servidor pero no se muestra, este valor puede se recuperado en un string con el php ya ejecutado utilizando el comando ob_get_clean(), si utilizaramos directamente el php no se ejecuta, osea si tuvieramos < ?php echo 'hola'; ?> en el string de resultado obtendriamos el mismo codigo, pero con ob_start damos tiempo a que se ejecute y en la salida tenemos el string ‘hola’ 🙂

  7. Jhon dice:

    Hola amigo eres un genio en todo esto.Pero queria decirte que tengo problemas con las descargas de tus proyectos nunca he podido descargar alguno quisiera me enviaras el el manejo de notas y MVC a mi correo te lo agradecería,tambien decirte que por que no subes estos archivos a mediafire me parece mucho mejor y rápido ppara descargar.
    gracias

    1. Mouse dice:

      ok, gracias por el aviso, revisare los enlaces 🙂

  8. Jhon dice:

    Ah me gusta mucho ese proyecto que tienes de acces y java enviamelo porfa es que quiero aprender y que mejor que estos ejemplos
    gracias

  9. Iphp dice:

    Hey que tal sinceramente muchas gracias por este aporte!! 😀 espero y si tengo una duda puedas ayudarme me seria de muchísima ayuda!! gracias nuevamente

  10. Henry Garcia dice:

    Excelente tuto, seria muy bueno para quienes queremos aprender PHP, tener ejemplos donde se manejen multiples tablas, preferiblemente las que muestran datos como por ejemplo los de una facturación.

    Donde vemos en el encabezado los datos de la factura, del cliente y en lineas de detalle los productos que adquiere el comprador.

    Muchas gracias por su aporte.

  11. Cristian Camilo Leon dice:

    Les recomiendo tambien la lectura del siguiente libro:

    http://books.openlibra.com/pdf/php%20orientado%20a%20objetos.pdf

    Es excelente, enseñan cosas como NO hacer uso de la herencia solo por reutilizar código.

  12. elibr dice:

    que tal mouse, actualmente no me fue posible poder descargar el proyecto. Saludos y espero si hay algún error cuando tengas tiempo poder corregirlo y así descargar el archivo.

    1. Mouse dice:

      lo siento, error mio, estaba cambiando algunas configuraciones del server 🙂 por seguridad 🙂 pero el LINK ya esta activo 😉

  13. Leo dice:

    Hola Mouse,

    Muchas gracias por compartir esta aplicación. Soy novato en el mundo del desarrollo web y me está resultando de gran utilidad.

    Al ejecutar la aplicación teno el mismo problema que planteaba Elizabeth hace ya más de un año, es decir “Notice: Undefined index: action in C:\Program Files (x86)\EasyPHP-12.1\www\my portable files\jmvc\index.php on line 7”. He probado con el isset tal como recomendabas y en ese caso ya no aparecen los mensajes de error pero la aplicación no arranca, se me queda la pantalla en blanco. Uso SO Windows 7.

    Espero me puedas dar algún consejo.

    Muchas gracias anticipadas.

    Leo.

  14. Leo dice:

    Hola de nuevo,

    Bueno, investigando un poco más, ya lo he resuleto. El index.php me ha quedado de la siguiente manera:

    buscador();
    break;
    case ‘history’:
    //muestra el modulo “historia de Bolivia”
    $mvc->historia();
    break;
    }
    } else {
    //muestra el buscador y los resultados
    $mvc->buscar( $_POST[‘carrera’], $_POST[‘cantidad’] );
    }
    } else {
    $mvc->principal();
    }

    ?>

    Muchas gracias, seguro que seguimos en contacto.

    Un saludo.

  15. Leo dice:

    buscador();
    break;
    case ‘history’:
    //muestra el modulo “historia de Bolivia”
    $mvc->historia();
    break;
    }
    } else {
    //muestra el buscador y los resultados
    $mvc->buscar( $_POST[‘carrera’], $_POST[‘cantidad’] );
    }
    } else {
    $mvc->principal();
    }

    ?>

  16. Leo dice:

    Hay un truncamiento y no consigo colocar todo el código en el post…, lo siento.

    1. Angel dice:

      amigo, lo que pasa es lo siguiente, espero y Mouse me corrija, como la variable está vacia en el index da ese WARNING pero no es un error, puedes ocultar ese error en el if de esta forma:

      if( @$_GET[‘action’] == ‘buscar’ ) //muestra el modulo del buscador
      {
      $mvc->buscador();
      }

      el @ hace que php ignore los warnings y muestre la pagina de forma normal, si fuera un error la pagina no cargaria, los warning corren la pagina a pesar de tener esa advertencia

      La pregunta es ¿Como resolvemos eso sin usar el @ o modificar los warnings en el servidor? espero Mouse nos responda pronto 🙂

  17. Darius dice:

    Muy bueno..!!!!!!

  18. Josevictorbj dice:

    Gracias por este aporte es algo muy valioso lo que haces me ayuda mucho estoy comenzando …

  19. carlos dice:

    viendo tu codigo encontre que en el index se presenta dos errores con referencia a los action de inicializacion….
    solucion controlar los $POST Y $GET
    y gracias por los aportes …….eres un grande.

    mejorando al index.php

    buscador();
    }
    else if( $_GET[‘action’] == ‘history’ ) //muestra el modulo “historia de Bolivia”
    {
    $mvc->historia();
    }

    }
    else if( isset($_POST[‘carrera’]) or isset($_POST[‘cantidad’]) )//muestra el buscador y los resultados
    {
    $mvc->buscar( $_POST[‘carrera’], $_POST[‘cantidad’] );
    }
    else //Si no existe GET o POST -> muestra la pagina principal
    {
    $mvc->principal();
    }
    ?>

  20. carlos dice:

    esto es lo correcto>

    buscador();
    }
    else if( $_GET[‘action’] == ‘history’ )
    {
    $mvc->historia();
    }

    }
    else if( isset($_POST[‘carrera’]) or isset($_POST[‘cantidad’]) )
    {
    $mvc->buscar( $_POST[‘carrera’], $_POST[‘cantidad’] );
    }
    else
    {
    $mvc->principal();
    }
    ?>

  21. Omareee dice:

    Muchisimas gracias colega, me has iluminado la verdad.. no entendia muy bien este concepto y contigo he encontrado una forma muy clara de implementear MVC .. un saludo y de verdad lo agradesco!!

  22. JSanchez dice:

    Saludos amigo,
    Me parece genial este tutorial, solo q tengo una pregunta, yo uso Codeigniter y la estructura de tus archivos esta como diferente?
    Por lo general en el Modelo se hace la coneccion, en el controlador se carga el modelo y llama la Vista. Me podrias explicar q IDE usaste?
    De ahi la idea es buena, gracias x compartir esto

  23. mandrake dice:

    hola man como seria un insertar e tratado y no se le logra ocurrir :/?

    1. Mouse dice:

      en el modelo implementas el modo de inserción y lo utilizas desde el controlador 🙂
      muy pronto un tuto mucho más completo 🙂

  24. ikki dice:

    lo midifike insercion buskeda y mas chevere con el aporte salvo mi curso

    1. ikki dice:

      me confundí al escribir lo modifique y me salvo la vida jejej

  25. leon dice:

    Hola estoy muy interesado en el mvc.

  26. mery dice:

    Hola Moues, te cuento que cree una función para insertar datos, todo me funciona bien, el problema que tengo es cuando uso, ” type=”file”, no se me ocurre como enviar los valores para que se almacenen en la base de datos, ya intente varias formas de enviar y capturar los datos, revise manuales, no me ubico, alguna sugerencia…, le quedaría muy agradecida.

    1. Mouse dice:

      Si estas interesada en el patron mvc, te recomiendo seguir esta nueva serie de tutoriales donde construiremos nuestro blog desde cero realizando las operaciones de lectura y escritura a la que haces referencia 🙂

      http://www.jc-mouse.net/php/crea-tu-blog-con-el-patron-mvc-y-php

  27. Adrian dice:

    me gusto mucho este ejemplo pero me ha ocurrido un error con los estilos
    pero muchas gracias me sirvio mucho me gustaria que me colaborara con los estilos no lo entiendo
    este pedazo font-family: ?Trebuchet MS?, Arial;
    y otro que hay si sigue una cantidad de errores
    #menu li a {
    height: 32px;
    voice-family: “\”}\””;
    voice-family: inherit;
    height: 24px;
    text-decoration: none;
    }

    #menu li a:link, #menu5 li a:visited {
    color: #FFF;
    display: block;
    background: url(../images/menu.gif);
    padding: 8px 0 0 10px;
    }

    #menu li a:hover {
    color: #FFF;
    background: url(../images/menu.gif) 0 -32px;
    padding: 8px 0 0 10px;
    }
    #menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
    }

  28. cristhoper dice:

    Muy bueno el tutorial, me sirvio como base para un proyecto.

    Muchas Gracias

  29. Buenas tardes, me pareció un muy buen tutorial, muy claro y nos llevas de la mano con el desarrollo del proyecto, gracias por compartir tus conocimientos.

  30. meme Urrutia dice:

    Alguien sabe como solucionar esto???
    Warning: include(): Failed opening ‘./views/defaul/modules/m.table_univ.php’ for inclusion (include_path=’.;C:\xampp\php\PEAR’) in C:\xampp\htdocs\jmvc\app\controller\mvc.controller.php on line 27

  31. meme Urrutia dice:

    x cierto, buen tuto!!!

Los comentarios estan cerrados

Los comentarios están cerrados para este post
Comparte lo que sabes

Categorias

Últimas entradas

Pyodide es un proyecto experimental de Mozilla  que proporciona un intérprete de Python que se ejecuta completamente en...

PicarOS Diego es una distribución GNU/Linux basada en Debian enfocada principalmente en la educación dentro del aula rec...

Windows XP fue lanzado oficialmente el 25 de octubre de 2001, han pasado ya 17 años y 7 meses convirtiendo así a XP uno...

Java proporciona Collection Framework, que define varias clases e interfaces para representar un grupo de objetos como u...

Android Bolivia

MAUS