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.
¿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:
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:
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:
debemos tener algo como la imagen siguiente:
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:
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:
<div style=" margin:20px 0 0 0; text-align:center;"> <h1>Model, View and Controller - by Mouse</h1> <h1>#TITLE#</h1> </div>
<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ón de Empresas">Administración de Empresas</option> <option value="Diseño de Interiores">Diseñ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
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! :)
El Ascii Art o Arte Ascii, consiste en realizar dibujos con los caracteres ASCII (Código Americano Estándar de Intercamb...
Un ProgressDialog muestra una ventana con un texto y una barra de progreso que indica el tiempo que tarda una tarea en r...
Cuando queremos presentar un programa hecho en java y darle un toque de profesionalidad, a veces no queremos que el clie...
Tercera parte del tutorial [Crea tu blog con el patrón MVC y php] En este post trabajaremos en el Theme del blog, agrega...
En posts anteriores hablamos sobre los metadatos y el porque son importantes en la Seguridad Informática, vimos el manej...
«Material Design es una guía integral para el diseño visual, de movimientos y de interacción en distintas plataformas y...
Los comentarios estan cerrados
Si trabajas con redes sociales (RRSS) a continuación te muestro tres herramintas gratuitas que te ayudaran a la hora de...
Por lo general se usan transacciones a nivel base de datos y posteriormente se llaman estos a través de procedimientos a...
En este post, aprenderemos como conectar Visual Basic 6 con SQL Server, abrir una tabla, leer su contenido y mostrar est...
Lo que veremos en este post es la configuración del driver para PHP de SQL Server que ha creado Microsoft el cual permit...
de nada, se hace lo que se puede 🙂
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.
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 :/
amigo tambien me da el mismo error lo estoy corriendo de forma local con Win7
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
Muy bueno amigo si lo entendí sigue así..!XDD
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,
mi pagina en facebook esta a la izquierda de tu pantalla, dale click en me gusta 🙂
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.
y cual fue tu error y como lo solucionaste, cuéntanos así aprendemos todos 🙂
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ú.
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’ 🙂
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
ok, gracias por el aviso, revisare los enlaces 🙂
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
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
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.
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.
o.O
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.
lo siento, error mio, estaba cambiando algunas configuraciones del server 🙂 por seguridad 🙂 pero el LINK ya esta activo 😉
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.
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.
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();
}
?>
Hay un truncamiento y no consigo colocar todo el código en el post…, lo siento.
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 🙂
Muy bueno..!!!!!!
Gracias por este aporte es algo muy valioso lo que haces me ayuda mucho estoy comenzando …
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();
}
?>
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();
}
?>
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!!
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
hola man como seria un insertar e tratado y no se le logra ocurrir :/?
en el modelo implementas el modo de inserción y lo utilizas desde el controlador 🙂
muy pronto un tuto mucho más completo 🙂
lo midifike insercion buskeda y mas chevere con el aporte salvo mi curso
me confundí al escribir lo modifique y me salvo la vida jejej
Hola estoy muy interesado en el mvc.
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.
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 🙂
https://www.jc-mouse.net/php/crea-tu-blog-con-el-patron-mvc-y-php
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;
}
Muy bueno el tutorial, me sirvio como base para un proyecto.
Muchas Gracias
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.
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
x cierto, buen tuto!!!