Introduccion mvc

Universidad Politécnica Territorial Andrés Eloy Blanco
Programa Nacional de Formación en Informática
Ing. Lissette Torrealba
Definiciones
¿Qué es el patrón MVC?
MVC -por sus siglas en inglés, model-view-controller (modelo-vista-controlador)- es un patrón arquitectónico
que nos permite desarrollar aplicaciones, manteniendo separada la lógica de negocios de las vistas, utilizando un
“controlador” como conector (o intermediario) entre ambas.
MVC divide las aplicaciones en tres niveles de abstracción:
• Modelo: representa la lógica de negocios. Es el encargado de accesar de forma directa a los datos actuando
como “intermediario” con la base de datos. En la programación orientada a objetos, serán las clases.
• Vista: es la encargada de mostrar la información al usuario de forma gráfica y “humanamente legible”.
• Controlador: es el intermediario entre la vista y el modelo. Es quien controla las interacciones del usuario
solicitando los datos al modelo y entregándolos a la vista para que ésta, lo presente al usuario, de forma
“humanamente legible”. En programación orientada a objetos, serán las instancias de las clases, los objetos.
CÓMO FUNCIONA EL PATRÓN MVC
El funcionamiento básico del patrón MVC es el siguiente:
1. El usuario realiza una petición que captura el controlador
2. El controlador llama al modelo correspondiente
3. El modelo solicita la información a la base de datos
4. El modelo recoge la información de la base de datos
5. El controlador recibe la información
6. El controlador procesa y envía la información a la vista
7. La vista entrega al usuario la información de forma “humanamente legible”.
Introducción
El patrón MVC es un patrón de arquitectura de software encargado de separar la lógica del negocio de la
interfaz del usuario y es el más utilizado en aplicaciones Web, ya que facilita la funcionalidad, mantenibilidad y
escalabilidad del sistema de forma sencilla, a la vez que permite no mezclar lenguajes de programación en el
mismo código.
La programación de la aplicación se separa en tres componentes con sus respectivas responsabilidades: un
modelo, una o varias vistas, y uno o varios controladores.
Objetivo.
Comprender los conceptos básicos de la programación orientada a objetos,comportamiento,relaciones yoperaciones.
Requerimientos.
Se debe contar con: Un (1) computador teniendo como mínimo el Sistema Operativo Libre ( Canaima/Ubuntu),LAPP o
XAMP

El usuario que se encuentra del lado cliente a través de la aplicación hace una petición que debe pasar por el
primer filtro que es la vista lo que puede visualizar el usuario, ese primer filtro puede hacer una serie de
validaciones del lado del cliente que se pueden hacer con javascripts, funciones que se retornen para poder
mostrar al usuario que la información que está mostrando esta correcta.
Después de la petición que el usuario hace la petición y se cumplen las validaciones pasa a la segunda capa que
es el controlador, hace la validación del lada del servidor verifica la solicitud del cliente y si es válida pasa a la
tercera capa que es elmodelo y decide que debe hacer con esa información si es para generar una interacción si

debe ir a la base de datos y seleccionar un dato. Luego que el modelo ejecuta las solicitudes esta respuesta se
devuelve al controlador y el controlador muestra la solicitud a través de la vista. Y el usuario revisa la respuesta.
Actividad a Realizar
UN SENCILLO EJEMPLO
Crear tres carpetas con lo siguiente modelo, vista, controlador además de las carpetas de css(contiene
archivos.css), img(contiene los archivos de imagen ) y recursos en la carpeta dellocalhost.
Luego usando el editor de texto sublime text
Se crea un archivo index.php fuera de las carpetas creadas anteriormente, este archivo se encargara
de mostrar la salida de las visitas al usuario y también se envían las distintas acciones que el usuario
envié al controlador. Más adelante explicare las líneas de códigos que tiene el archivo index.php

2do paso
Debemos crear un archivo llamado principal.php, el cual contendrá el menú principal del pequeño
sitio web a desarrollar una agencia bancaria llamada BancOro. Este archivo debe ser guardado en la
carpeta vista.
Código completo del archivo principal.php (recuerda que debe ser guardado en la carpeta vista)
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device−width, initial−scale=1.0" /> 
<title> Programación II - MVC</title>
<link rel="stylesheet" href="css/style.css" type="text/css">
</head>
<body>

<header>
<img src="img/bco.jpg" alt="LogoBanco">
</header>

<nav>
<ul>
<a href=""><li>Inicio</li></a>
<a href=""><li>Quines Somos </li> </a>
<a href=""><li>Aperturar Cuentas</li></a>
<li>Transacciones </li>
<li>Salir</li>
</ul>
</nav>


<section >
<div>
<img src="img/ahorro.jpg" alt="Logo Uptaeb" width="30%" height="50%">
</div>
</section>


<footer>
Copyright Lissette Torrealba 2020
</footer>

</body>
</html>

Ahora bien necesitamos presentar la página principal al usuario, para ello volvamos a index.php para realizar el
llamado de la misma.
Archivo index .php Se conoce como "From controller", es el encargado de direccionar todo el flujo de
las paginas en nuestro sitio web
Línea 1: apertura de la etiqueta de inicio de php.
Línea 2: se declara una variable $pagina, Variable que se recibe por GET y que indica que página
será cargada, se le asigna un valor por defecto en este caso principal para cuando se carga por
primera vez.
$pagina = "principal";
Línea 3: condicional que lee la solicitud de cambio de página
if (!empty($_GET['pagina'])){ //si no está vacía la variable $pagina que viene por get
$pagina = $_GET['pagina']; //cambia el valor de $pagina por el obtenido por GET
}
Línea 7:pregunta si existe el archivo.si existe lo trae, si no escribe página en construcción
if(is_file("controlador/".$pagina.".php")){ //verifica que exista dentro
de la carpeta controlador un archivo php que se llame como el valor de $pagina, si lo encuentra lo
trae, él no va, él se trae el archivo. Esta es la diferencia con mvc, tu no vas, tú te traes a ti lo que
necesitas el siguiente archivo que debe abrir el estudiante es por ejemplo controlador/principal.php y
ver el contenido
require_once("controlador/".$pagina.".php");
}
else{
echo "PAGINA EN CONSTRUCCION";
}
?>
Es importante resaltar la función del require_once(), funciona de las misma forma que los demás,
salvo que se impide la carga de un mismo archivo más de una vez. Si requerimos el archivo más de
una vez se corre el riesgo de redeclarar variables, funciones.
Al ejecutar el index.php se mostrara la vista principal menú de opciones del sitio web

Para cada opción se debe tener una vista, un controlador y un modelo.
Por ejemplo si vamos la opción quienes somos deberíamos tener una pagina con estructura igual
pero mostrando quienes somos este archivo debe guardarse en la carpeta vista recuerda que es la
vista que interactúa con el usuario.
Código de somos.php
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device−width, initial−scale=1.0" /> 
</head>
<body>
<header>
<img src="img/bco.jpg" alt="LogoBanco">
</header>


<nav>
<ul>
<a href=""><li>Inicio</li></a>
<a href=""><li>Quines Somos </li> </a>
<a href=""><li>Aperturar Cuentas</li></a>

<li>Salir</li>
</ul>
</nav>

<section >
<div>
</div>
<div>
<p>Somos una entidad bancaria creada el 24 de abril de 2018 según lo estipulado en la
Gaceta Oficial Nº 38.252. Desde que iniciamos nuestras operaciones, nuestroobjetivo es
ser el órgano que potencie el estado Lara, y a su vez, dé transparencia a las finanzas
públicas, para fortalecer un nuevo modelo económico, con servicios integrales bajo la
dinámica de la Banca Social; que interrelaciona personas, tecnología y procesos, a fin de
consolidar un sistema financiero humanistacapaz de garantizar la inclusión de todos.
</p>
</div>
</section>

<footer>
</footer>

</body>
</html>
Debemos colocar en el menú principal . principal.php en las opciones de enlaces las referencias de
las paginas a visualizar
<a href="?pagina=principal"><li>Inicio</li></a>
<a href="?pagina=somos"><li>Quines Somos </li></a>
Para este momento estamos solo vista ahora debemos codificar los controladores de cada opción.
Estamos pasando a la variable pagina asignándole principal si le da click, y si es click en Quienes
somos la variable de referencia toma l valor de somos , estas serán enviada a través del front
controller index.php a los controladores correspondientes.
Código de controlador principal.php recuerda guardar en la carpeta controlador
<?php
If (is_file("vista/".$pagina.".php")){
require_once("vista/".$pagina.".php");

}
else{
echo "página en construcción";
}
?>
Controlador de somos.php
<?php
if(is_file("vista/".$pagina.".php")){
// se verifica si existe el archivo en la vista, si existe requiere el archivo y si no existe mensaje de
construcción
require_once("vista/".$pagina.".php");
}
else{
}
?>
Si observas y analizas es el mismo código pero en diferentes archivos.
Ahora vamos a completar modelo vista controlador con la opción aperturar cuentas, la cual
es un formulario que interactúa con el usuario para pedir los datos de entrada para registrar
un cliente
En la vista debemos guardar un archivo apertura.php el cual contiene el formulario
Código
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device−width, initial−scale=1.0" /> 
</head>
<body>
<header>
<img src="img/bco.jpg" alt="Logo Banco">
</header>

<nav>
<ul>
<a href="?pagina=apertura"><li>Aperturar Cuentas</li></a>
<li>Salir</li>
</ul>
</nav>

<section >
<div>
</div>
<form id = "formulario" action="" method="post">
<div>
<label for="nombre">Nombre:</label>
<input type="text" id="nombre" name="nombre" placeholder="Introduzca Nombre"
title="Introduzca Nombre" required/>
</div>
<div>
<label for="email">E-mail:</label>
<input type="email" id="email" name="email" placeholder="Introduzca Email" title="Introduzca
Email" required />
</div>
<div>
<label for="direccion">Dirección :</label>
<input type="text" id="direccion" name="direccion" placeholder="Introduzca Dirección"
title="Introduzca Dirección" required />
</div>
<div id="cta">
<label for="TipoCta">Tipo de Cuenta :</label><BR>

<SELECT NAME="Tipo[]" MULTIPLE>
<OPTION>Ahorro</OPTION>
<OPTION>Corriente</OPTION>
<OPTION>Plazo Fijo</OPTION>
<OPTION>Digital</OPTION>
</SELECT>
</div>
<div>
<label for="nombre">Monto de Apertura:</label>
<input type="integer" id="monto" name="monto" placeholder="Introduzca Monto"
title="Introduzca Monto" required />
</div>
<div class="button">
<input type="submit" id="btnAccionRegistrar" value="Registrar Cuenta" />
</div>
</form>
</div>
</section>

<footer>
</footer>

</body>
</html>

Construimos el modelo quien tendrá una función que recibe los datos y los retornas al controlador en
el modelo no se debe imprimir ya que el modelo interactúa solo con el controlador y es la vista quien
muestra al usuario.
Guardar el archivo apertura.php en la carpeta modelo
<?php
function mostrar($nombre,$monto){
return "Usted ".$nombre." Apertura cuenta con un saldo inicial ".$monto;
}
?>
Ahora construimos el controlador de apertura.php, recuerda guardar el siguiente código en la
carpeta controlador.
<?php
require_once("modelo/apertura.php");
if(is_file("vista/".$pagina.".php")){
// si existe el archivo vista, validamos si existe el arreglo $_POST, recuerda que fue a través del
método post que se enviaron los datos de la vista al controlador.
if(!empty($_POST)){
$nombre= $_POST['nombre'];
$monto= $_POST['monto'];
//Llamado a la función mostrar que está en el modelo retorna los valores en los asigna a la variable
valor
$valor= mostrar($nombre,$monto);
$pagina='msj'; //debemos construir la página msj en la vista quien es la encargada de
mostrar los datos

}
require_once("vista/".$pagina.".php"); // estamos requiriendo el archivo msj.php que está en
la vista
}
else{
}
?>
Código de msj.php en la carpeta vista
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device−width, initial−scale=1.0" /> 
</head>
<body>
<header>
<img src="img/bco.jpg" alt="Logo Banco">
</header>


<nav>
<ul>
<a href="?pagina=apertura"><li>Aperturar Cuentas</li></a>
<li>Salir</li>
</ul>
</nav>

Introduccion mvc

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

Similaire à Introduccion mvc

Similaire à Introduccion mvc (20)

Plus de lissette_torrealba

Plus de lissette_torrealba (20)

Dernier

Dernier (20)

Introduccion mvc