SISTEMAS WEB
Facultad de Estadística e Informática
Proyecto Final
Parte 1
NOVIEMBRE 2017
Facultad de Estadística e Informática
Facultad de Estadística e Informática
Facultad de Estadística e Informática
Facultad de Estadística e Informática
Proyecto Final
◦Patrón de arquitectura Modelo Vista
Controlador
◦Paradigma Orientado a Objetos
Facultad de Estadística e Informática
¿Qué es MVC?
◦ Patrón de arquitectura de software que separa el modelo, la interfaz de usuario y
el control de la lógica de una aplicación, en tres distintos componentes.
◦ Presentado por Trygve Reenskaug en 1979 para el Framework Smalltalk (utilizada
para crear las interfaces de Apple Lisa y Macintosh).
Modelo
Vista
Controlador
Facultad de Estadística e Informática
Patrón de MVC
◦MVC propone la ACTUALIZA MANIPULA
construcción de tres distintos Modelo
componentes:
1. Modelo
2. Vista Vista
Controlador
3. Controlador
MUESTRA UTILIZA
Facultad de Estadística e Informática
Patrón de MVC
El modelo La vista El controlador
Representación de los datos Interfaz de usuario a partir del Maneja la interacción con el
Lógica del negocio modelo usuario e invoca cambios al
Obtiene y almacena datos en un Elementos de interacción Modelo y Vistas.
almacenamiento persistente (HTML, XML) Intermediario entre el Modelo y
(Base de Datos) la Vista.
Facultad de Estadística e Informática
Jerarquía de dependencia en MVC
La vista
El modelo El controlador
La Vista si conoce al Modelo.
El Modelo solo conoce sobre el Preguntará al Modelo sobre su Conoce al Modelo y a la Vista.
mismo. estado para saber que mostrar. Si el usuario realiza una acción, el
Esto quiere decir, que el código De esta manera, la Vista puede Controlador sabe que función en
fuente del Modelo no hace desplegar algo que esta basado el Modelo llamar y también sabe
referencias ni a la Vista o al en lo que el Modelo ha hecho. que Vista mostrar al usuario.
Controlador. La Vista no sabe nada del
Controlador.
Facultad de Estadística e Informática
Flujo de MVC
1. El usuario realiza una acción en la interfaz (ej. presiona
un botón)
2. El Controlador toma el evento o acción de entrada
3. El Controlador notifica la acción al Modelo, la cuál
pudiera involucrar un cambio en el Modelo (ej. edición
de datos).
4. Esto genera una nueva Vista que se envía al usuario. La
Vista toma los datos del Modelo (ej. lista de usuarios).
5. La interfaz de usuario espera por otra interacción de
usuario, lo que inicia un nuevo ciclo.
Facultad de Estadística e Informática
Modelado de la Base
de Datos
Facultad de Estadística e Informática
Crear el modelo de BD
Facultad de Estadística e Informática
Requerimientos de software
Biblioteca multiplataforma de JavaScript. JQuery.
◦ [Link]
Framework de diseño. Bootstrap.
◦ [Link]
Plugin de validación de formularios. jQuery Validation Plugin.
◦ [Link]
Framework de autenticación para PHP. PHP-Auth.
◦ [Link]
Composer. Administrador de dependencias para PHP.
◦ [Link]
Google Maps
◦ [Link]
JQuery Location Picker
◦ [Link]
Dropzone
◦ [Link]
Iconos Font Awesome
◦ [Link]
FancyBox
◦ [Link]
Facultad de Estadística e Informática
Importar JQuery
<!-- JQuery -->
<script src="[Link]
Facultad de Estadística e Informática
Importar Bootstrap
<!-- Bootstrap -->
<link rel="stylesheet" href="[Link]
<script src="[Link]
Facultad de Estadística e Informática
Importar jQuery Validation Plugin
Descargar
Descomprimir e importar la carpeta “dist” con el nombre “jqueryvalidation”.
<!-- JQuery Validation -->
<script src="../jqueryvalidation/[Link]"></script>
<script>
$("form").validate();
</script>
Facultad de Estadística e Informática
Instalar Composer
[Link]
En Windows, reiniciar la computadora
Facultad de Estadística e Informática
PHP-Auth
Tener instalado Composer y reiniciar la computadora
Abrir la carpeta de proyecto desde Visual Studio Code
Ctrl + ñ para abrir la ventana de comandos
Instalar PHP-Auth vía Composer
> composer require delight-im/auth
Crear las tablas de PHP-Auth
[Link]
Facultad de Estadística e Informática
Google Maps
Obtener una clave válida:
[Link]
Facultad de Estadística e Informática
JQuery Location Picker
Descargar: [Link]
Descomprimir e importar la carpeta “dist” con el nombre “jquerylocationpicker”.
<script>
$('#us2').locationpicker({
location: { latitude: $("#latitud").val(), longitude:
<!-- JQuery Location Picker --> $("#longitud").val() },
<script radius: 300,
src="../js/jquerylocationpicker/[Link]"></script> inputBinding: {
latitudeInput: $('#latitud’),
longitudeInput: $('#longitud’),
radiusInput: null,
locationNameInput: $('#direccion')
},
enableAutocomplete: true,
enableReverseGeocode: true
});
Facultad de Estadística e Informática
</script>
Dropzone
Descargar: [Link]
Descomprimir e importar la carpeta “dist” con el nombre “dropzone”.
<!-- Dropzone -->
<link href="js/dropzone/[Link]" rel="stylesheet" type="text/css" />
<script src="js/dropzone/[Link]"></script>
<!-- Mi Dropzone -->
<link href="js/midropzone/[Link]" rel="stylesheet" type="text/css" />
<script src="js/midropzone/[Link]"></script>
<script>
DropzoneFotografia = IniciaDropzone('.fotografia-dropzone', EXTENSIONESIMAGEN, MAXNUMFILES, MAXIMAGESIZE, FOTOGRAFIA);
</script>
Facultad de Estadística e Informática
Font Awesome CDN
<!-- Font Awesome -->
<link rel="stylesheet" href="js/font-awesome/css/[Link]">
Facultad de Estadística e Informática
FancyBox
<!-- Fancybox -->
<link rel="stylesheet" href="[Link] />
<script src="[Link]
Facultad de Estadística e Informática
Programación
MVC
modelos
controladores
[Link]
vistas
Facultad de Estadística e Informática
Estructura de directorios
config: aquí irán los archivos de configuración de la base de datos, globales,
etc.
controladores: como sabemos en la arquitectura MVC los controladores se
encargarán de recibir y filtrar datos que le llegan de las vistas, llamar a los
modelos y pasar los datos de estos a las vistas. Pues en este directorio
colocaremos los controladores
nucleo: aquí colocaremos las clases base de las que heredarán por ejemplo
controladores y modelos, y también podríamos colocar más librerías hechas
por nosotros o por terceros, esto sería el núcleo del framework.
modelos: aquí irán los modelos, para ser fieles al paradigma orientado objetos
tenemos que tener una clase por cada tabla o entidad de la base de
datos(excepto para las tablas pivote) y estas clases servirán para crear objetos
de ese tipo de entidad(por ejemplo crear un objeto usuario para crear un
usuario en la BD). También tendremos modelos de consulta a la BD que
contendrán consultas más complejas que estén relacionadas con una o varias
entidades.
vistas: aquí irán las vistas, es decir, donde se imprimirán los datos y lo que verá
el usuario.
[Link] será el controlador frontal por el que pasará absolutamente todo en
la aplicación.
Facultad de Estadística e Informática
Crear archivos de configuración
En el directorio config, crearemos un archivo [Link] en el que irá la configuración de la base
de datos. Este devuelve un array que posteriormente utilizaremos.
<?php
return array(
"driver" => "mysql",
"host" => “localhost",
"user" => "proyectofinal",
"pass" => "P4ssw0rd",
"database" => "proyectofinal",
"charset" => "utf8mb4"
);
Facultad de Estadística e Informática
Crear archivos de configuración
También podemos crear un archivo [Link] en el que irán constantes que luego nos servirán, por
ejemplo para establecer controladores y acciones por defecto (y todo lo que queramos agregarle).
<?php
define("TITULO", "Proyecto Final 2017");
define("SUBTITULO", "Sistemas Web");
define("CONTROLADOR_DEFECTO", "Home");
define("ACCION_DEFECTO", "index");
define("UPLOADS_DIR", "uploads");
?>
Y también un archivo [Link] donde se preguntará si el usuario esta logueado.
<?php
if ($auth->isLoggedIn()) {
// Usuario válido
}
else {
// Usuario no válido
// Redirecciona al login
header("Location: [Link]");
exit;
}
Facultad de Estadística e Informática
Crear las clases del núcleo
<?php
class Conectar {
private $driver;
private $host, $user, $pass, $database, $charset;
public function __construct() {
// Regresa un arreglo
Primero crearemos la clase Conectar $db_cfg = require_once 'config/[Link]';
que nos servirá para conectarnos a la $this->driver = $db_cfg["driver"];
base de datos utilizando el driver $this->host = $db_cfg["host"];
PDO. $this->user = $db_cfg["user"];
$this->pass = $db_cfg["pass"];
$this->database = $db_cfg["database"];
$this->charset = $db_cfg["charset"];
}
public function conexion() {
$con = new \PDO("{$this->driver}:dbname={$this-
>database};host={$this->host};charset={$this->charset}",
$this->user, $this->pass);
return $con;
}
}
?>
Facultad de Estadística e Informática
Crear las clases del núcleo
<?php
class EntidadBase {
protected $db;
protected $conectar;
Seguimos creando el archivo
public function __construct( $adapter ) {
[Link] de esta clase
$this->conectar = null;
heredarán los modelos que
$this->db = $adapter;
representen entidades, en el
constructor le pasaremos el nombre de }
public function getConectar(){
la tabla y tendremos tantos métodos
return $this->conectar;
como queramos para ayudarnos con
}
las peticiones a la BD a través de los
objetos que iremos creando. La ventaja public function db() {
return $this->db;
es que estos métodos pueden ser
}
reutilizados en otras clases ya que le
}
indicamos la tabla en el constructor.
?>
Facultad de Estadística e Informática
Crear las clases del núcleo <?php
class ControladorBase {
public $auth;
public $conectar;
public $adapter;
public function __construct() {
require_once '[Link]';
require_once '[Link]';
require_once join( DIRECTORY_SEPARATOR, array( 'vendor', '[Link]' ) );
//Incluir todos los modelos
foreach( glob( "modelos/*.php" ) as $file ){
require_once $file;
}
}
La siguiente clase que crearemos es ControladoresBase /*
* Este método lo que hace es recibir los datos del controlador en forma de array
de la cual heredarán los controladores, esta clase carga * los recorre y crea una variable dinámica con el indice asociativo y le da el
* valor que contiene dicha posición del array, luego carga los helpers para las
* vistas y carga la vista que le llega como parámetro. En resumen un método para
EntidadesBase, ModelosBase, y todos los modelos * renderizar vistas.
*/
public function view( $vista, $datos = null ) {
creados dentro del directorio model. foreach ($datos as $id_assoc => $valor) {
${$id_assoc} = $valor;
}
require_once '[Link]';
$helper = new AyudaVistas();
require_once join( DIRECTORY_SEPARATOR, array( 'vistas', "{$vista}[Link]" ) );
}
public function getJsonRequest() {
$content = file_get_contents( "php://input" );
if ( $content === false ) {
http_response_code( 400 );
exit( 'Invalid request.' );
}
$obj = json_decode( $content );
return $obj;
}
public function json( $response ) {
header("Content-Type: application/json");
echo json_encode( $response );
}
public function redirect( $controlador = CONTROLADOR_DEFECTO, $accion = ACCION_DEFECTO, $params = '' ) {
header( "Location:[Link]?controller={$controlador}&action={$accion}" . $params );
exit();
}
public function ObtenPerfil() {
if ( $this->auth->isLoggedIn() ) {
// Usuario válido
}
else {
// Usuario no válido
// Redirecciona al login
$this->redirect( "login" );
}
}
}
Facultad de Estadística e Informática ?>
Crear las clases del núcleo <?php
class AyudaVistas{
public function url( $controlador =
CONTROLADOR_DEFECTO, $accion = ACCION_DEFECTO ){
$urlString =
Ahora crearemos la clase AyudaVistas que "[Link]?controller={$controlador}&action={$accion}
";
puede contener diversos helpers (pequeños return $urlString;
métodos que nos ayuden en pequeñas tareas }
dentro de las vistas).
public function imagen_url( $nombre ){
$urlString = UPLOADS_DIR . '/' . $nombre;
return $urlString;
}
public function print_row( &$item ) {
echo('<tr>');
echo('<td>');
echo(implode('</td><td>', $item));
echo('</td>');
echo('</tr>');
}
}
?>
Facultad de Estadística e Informática
Crear las clases del núcleo
<?php
//FUNCIONES PARA EL CONTROLADOR FRONTAL
function cargarControlador( $controller ){
$controlador = ucwords( $controller ) . 'Controller';
Ahora crearemos el archivo $strFileController = join( DIRECTORY_SEPARATOR, array( 'controladores',
"{$controlador}.php" ) );
[Link] que if( ! is_file( $strFileController ) ){
tiene las funciones que se $strFileController = join( DIRECTORY_SEPARATOR, array( 'controladores', ucwords(
encargan de cargar un CONTROLADOR_DEFECTO ), '[Link]' ) );
}
controlador u otro y una acción u require_once join( DIRECTORY_SEPARATOR, array( __DIR__, '..', $strFileController ) );
otra en función de lo que se le $controllerObj = new $controlador();
return $controllerObj;
diga por la url. }
function cargarAccion( $controllerObj, $action ) {
$accion = $action;
$controllerObj->$accion();
}
function lanzarAccion( $controllerObj ) {
if( isset( $_GET["action"] ) && method_exists( $controllerObj, $_GET["action"] ) ) {
cargarAccion( $controllerObj, $_GET["action"] );
} else {
cargarAccion( $controllerObj, ACCION_DEFECTO );
}
}
?>
Facultad de Estadística e Informática
El controlador frontal [Link]
El controlador frontal es donde se cargan todos los archivos de la aplicación y por tanto la única
pagina que visita el usuario realmente es esta, en este caso [Link].
<?php
//Configuración global
require_once 'config/[Link]';
//Base para los controladores
require_once 'nucleo/[Link]';
//Funciones para el controlador frontal
require_once 'nucleo/[Link]';
//Cargamos controladores y acciones
if( isset( $_GET["controller"] ) ) {
$controllerObj = cargarControlador( $_GET["controller"] );
lanzarAccion( $controllerObj );
} else {
$controllerObj = cargarControlador( CONTROLADOR_DEFECTO );
lanzarAccion( $controllerObj );
}
?> Facultad de Estadística e Informática
Modelos y objetos <?php
class Usuario extends EntidadBase {
public function __construct( $adapter ) {
parent::__construct( $adapter );
}
public function getAll() {
// Preparar
$stmt = $this->db->prepare("select * from users");
Si queremos seguir el paradigma de la // ejecutar la consulta
$stmt->execute();
programación orientada a objetos // ligar variables de resultado
if( $filas = $stmt->fetchAll(PDO::FETCH_ASSOC) ) {
teóricamente deberíamos tener una clase por $resultSet = $filas;
cada tabla de la base de datos(excepto tablas }
return $resultSet;
pivote) que haga referencia a un objeto de la }
vida real, en este caso el objeto que public function getUsuario( $userid ) {
// Preparar
crearíamos seria “Usuario” y el usuario tendría $stmt = $this->db->prepare("select * from users where id = :userid");
un nombre, un apellido, un email, etc, pues $stmt->bindParam( ':userid', $userid );
// Asigna valores
bien eso serian los atributos del objeto y $userid = $userid;
tendríamos un método get y set por cada // ejecutar la consulta
atributo que servirán para establecer el valor $stmt->execute();
// ligar variables de resultado
de las propiedades y para conseguir el valor $resultSet = null;
if( $resultSet = $stmt->fetch(PDO::FETCH_ASSOC) ) {
de cada atributo. if( $stmt->rowCount() > 0 )
return $resultSet;
}
return null;
}
}
?>
Facultad de Estadística e Informática
Modelos y <?php
class Comentario extends EntidadBase {
private $id;
private $userid;
objetos private $imagenid;
private $titulo;
private $cuerpo;
private $fecha;
public function __construct( $adapter ) {
parent::__construct( $adapter );
}
public function setId($id) {
$this->id = $id;
Crear los modelos: }
◦ Comentario public function
$this->userid =
setUserId($userid) {
$userid;
}
◦ MeGusta public function setImagenId($imagenid) {
$this->imagenid = $imagenid;
◦ Seguir }
◦ Usuario public function setTitulo($titulo) {
$this->titulo = $titulo;
}
public function setCuerpo($cuerpo) {
$this->cuerpo = $cuerpo;
}
public function setFecha($fecha) {
$this->fecha = $fecha;
}
public function getAll( $imagenid ) {
// Preparar
$stmt = $this->db->prepare("select comentarios.*, [Link], [Link]
from comentarios inner join users on [Link] = [Link] where [Link] = :imagenid order by
[Link] desc");
$stmt->bindParam( ':imagenid', $imagenid );
// Asigna valores
$imagenid = $imagenid;
}
}
?>
Facultad de Estadística e Informática
<?php
Los controladores
class BotonesController extends ControladorBase {
public function __construct() {
parent::__construct();
// Conectar a BD
$this->conectar = new Conectar();
Los crearemos en el directorio controller con el $this->adapter = $this->conectar->conexion();
sufijo Controller. // Carga Auth
$this->auth = new \Delight\Auth\Auth( $this->adapter );
$this->ObtenPerfil();
◦ BotonesController }
◦ ComentariosController public function nuevo() {
//Cargamos la vista index y le pasamos valores
◦ HomeController $this->view( "NuevaImagen" , array(
"menu" => 'Mi galería'
));
◦ LoginController }
◦ MiGaleriaController public function botoncomentarios() {
$obj = $this->getJsonRequest();
◦ RegistroController $boton = '<i class="fa fa-comment-o"></i> Comentarios';
◦ RegistroController // Contador
if ( !empty( $obj->id ) ) {
◦ SiguiendoController //Creamos el objeto
$comentario = new Comentario( $this->adapter );
◦ UploadController $boton .= ' <span class="badge">' . $comentario->Cuenta( $obj->id ) . '</span>';
}
◦ UsuarioController $response = array(
'boton' => $boton
);
$this->json ( $response );
}
public function botonmegusta() {
$obj = $this->getJsonRequest();
Código incompleto…Ver código fuente…
Facultad de Estadística e Informática
Las vistas <?php
// Incluye Encabezado
require_once '_Encabezado.php';
?>
Los crearemos en el directorio vistas con el <div class="container">
sufijo View. <h3 class="text-center">Más recientes</h3>
◦ _Comentario <p>Listado de hasta 10 imágenes más recientes.</p>
◦ _Encabezado <?php if( isset( $allimagenes ) && count( $allimagenes ) > 0 ) :
◦ _FichaView $totalcont = count( $allimagenes ); ?>
<p class="text-primary">Mostrando <?php echo $totalcont; ?> elementos</p>
◦ _Menu <div class="cuadros flex-row row">
◦ _NuevoComentario <?php foreach( $allimagenes as $imagen ) {
echo '<div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">';
◦ _Pie require '_FichaView.php';
◦ Busqueda echo '</div>';
} ?>
◦ Detalles </div>
<?php else: ?>
◦ Home <div class="alert alert-info" role="alert">
◦ Login <p>No se han encontrado imágenes.</p>
</div>
◦ MiGaleria <?php endif; ?>
◦ NuevaImagen </div>
◦ Populares
◦ Registro <?php
// Incluye el pie
◦ Seguidores require_once '_Pie.php';
◦ Seguiendo ?>
◦ Usuarios
Facultad de Estadística e Informática
Para acceder a otros controladores y acciones
por la url
Se usa el parámetro:
◦ Controller. Nombre del controlador (clase).
◦ Action. Nombre de la acción (función dentro de la clase).
Facultad de Estadística e Informática
Archivos de soporte
// Variables globales
var MAXNUMFILES = 1;
var MAXIMAGESIZE = 1;
var EXTENSIONESIMAGEN = ".jpg,.png,.pdf";
var FOTOGRAFIA = 1;
// Funciones Globales
$(document).ready(function () {
MenuSistema();
});
Tenemos las carpetas function MenuSistema() {
// Activa el menu actual
◦ Css. Estilos del sistema. $(".navbar-nav li:contains('" + $('.menu-activo').text() +
"')").addClass('active');
◦ Uploads. Donde se guardaran las imágenes. }
◦ Js. Scripts de cliente de apoyo. function DibujaComentarios( boton, id ) {
var url = "[Link]?controller=botones&action=botoncomentarios";
var method = "POST";
var data = { id: id };
ajaxHelper(url, method, data).done(function (data, status, jqXHR) {
$(boton).html( [Link] );
});
}
function DibujaMeGusta( boton, id ) {
var url = "[Link]?controller=botones&action=botonmegusta";
var method = "POST";
var data = { id: id };
ajaxHelper(url, method, data).done(function (data, status, jqXHR) {
$(boton).html( [Link] );
$(boton).click(function(){
ClicMeGusta( boton, id );
});
});
}
Facultad de Estadística e Informática
Uso de llamadas asíncronas con AJAX
// Funcion para llamadas Ajax
function ajaxHelper(uri, method, data) {
Para las acciones de “Me gusta” y “Seguir”, return $.ajax({
se utilizan llamadas asíncronas a acciones type: method,
de controladores por medio de AJAX. url: uri,
dataType: 'json',
Se hace uso de la función Ajax() de la
contentType: 'application/json',
biblioteca Jquery.
data: data ? [Link](data) : null,
statusCode: {
401: function (jqXHR, textStatus, errorThrown)
{
alert( errorThrown );
}
}
});
}
Facultad de Estadística e Informática
Gracias por su atención