Departamento de Ciencias e Ing. geniería de la Computación. Diego C. Martínez - DCIC-UNS

Tamaño: px

Comenzar la demostración a partir de la página:

Download "Departamento de Ciencias e Ing. geniería de la Computación. Diego C. Martínez - DCIC-UNS"

José Ramón Olivera Toledo
hace 8 años
Vistas:

1 Ingeniería de Ap plicaciones Web Diego C. Martínez Departamento de Ciencias e Ing geniería de la Computación Universidad Nacional del Sur

2 Frameworks visión conceptual Framework Llamada a operaciones implementadas por el usuario Llamada a operaciones implementadas por el framework Aplicación específica

3 Patrón general de diseño: MVC MVC es el patrón arquitectónico predomina ante en las aplicaciones web controller model view El Controlador administra a el Modelo y la Vista. La Vista es responsable de observar el Modelo para exteriorizar los datos. La forma de vincular el controlador con un explícita: modelo y una vista puede ser implícita o Puede hacerse en forma automática, por convenciones de nombres: AlumnosController, AlumnosModel, AlumnosViewTodos Puede hacerse en forma manual, por medio de operaciones predefinidas loadmodel( mimodelo ); getview( mivista );

La forma de vincular el controlador con un explícita: modelo y una vista puede ser implícita o Puede hacerse en forma automática, por

4 Frameworks para Web Existe una gran variedad de frameworks, para diferentes lenguajes. En el caso puntual de PHP, la oferta es extensa y variada. ORM = object recorder mapper DB Objects = objetos modelo de elementos de bases de datos Auth Module = incluye módulo de autenticación de usuarios. Modules = otros modulos de utilidad general: RSS, PDF EDP = Programación orientada/guiada por eventos

ORM = object recorder mapper DB Objects = objetos modelo de elementos de bases de datos Auth

5 Patrón Front-Controller Front-controller maneja todos los requests de un sitio web. Front Controller -atiende get / post Abstract Command procesar() Concrete Command A procesar() Concrete Command B procesar() El objeto Front-controller recibe el request del cliente y recupera los datos correspondientes. Prepara los datos para los comandos. Decide qué comando ejecutar a contin nuación (usualmente mirando URL).

Concrete Command B procesar() El objeto Front-controller recibe el request del cliente y recupera los

6 Frameworks PHP - CodeIgniter Muchos de los frameworks tienen una arqui itectura similar, siguiendo Front Controller Por ejemplo, CodeIgniter se basa en el patrón MVC implementando una estructura de clases similar a CakePHP. CodeIgniter es un framework para el desarrollo de aplicaciones web. Es rápido y liviano, con licencias permisivass y de fácil aprendizaje. Cliente Web Server index.php (controlador ppal) router controller (controlador específico) model vista

CodeIgniter es un framework para el desarrollo de aplicaciones web.

7 Frameworks PHP - CodeIgniter En CodeIgniter: El modelo representa las estructuras de datos y es usualmente una interfaz de la base de datos. La vista representa la información presentable al usuario (visual como en HTML o procesable como en RSS) El controlador es el intermediario entre el modelo y la vista. CodeIgniter, sin embargo, toma ciertas libertades. Por ejemplo, los modelos no son mandatorios. Es posible construir la aplicación sólo con controladores y vistas. Tampoco existe una vinculación automáticaa de las partes como ocurre en CakePHP

La vista representa la información presentable al usuario (visual como en HTML o procesable como en RSS) El controlador es el

8 CodeIgniter - controllers Un controlador en CodeIgniter es una instancia de la clase CI_ Controller. <?php class Nombre extends CI_Controller { public function index() { //funcion por defecto } public function //accion X } accionx(){?> } Se ubican en la carpeta application/controllers/ De manera similar a otros frameworks, el controlador se indicará en el URL: /index.php/nombre

9 CodeIgniter - controllers Los parámetros de las acciones en un contr rolador también forman parte del URL <?php class Nombre extends CI_Controller { public function accionx($num,$str){ //operar sobre num y str }?> } Las funciones privadas de los controladores comienzan con underscore. No podrá realizarse una invocación desde el URL. Algunos nombres reservados: load_class(), get_config(), show 404(), get_instance()

10 CodeIgniter - views Como es habitual en otros frameworks, la v ista es un formateo de información para exteriorizarla al usuario (humano o computadora). Usualmente, la vista es una página web completa o parcial. Se ubican en la carpeta application/vie ews/ <html> <head> <title>mi Sitio</title> </head> <body>... </body> </html> vistax.php <table> <?php foreach(...){?> <tr> <td>...</td> </tr> <?php }?> </table> tabla1.php En CodeIgniter las vistas son cargadas des de el controlador. No se hace ninguna vinculación automáticaa pues no hay convenciones de nombres. $this->load->view('vistax'); $this->load->view('tabla1');

Se ubican en la carpeta application/vie ews/ <html> <head> <title>mi Sitio</title> </head> <body>... </body> </html> vistax.php <table> <?php foreach(...){?

11 CodeIgniter - views El controlador puede (debe) proveer datos a la vista para su elaboración final. En CodeIgniter, la carga de la vista puede recibir un parámetro de datos adicionales. <html> <head> <title> <?php echo $titulo;?> </title> </head> <body> <ul> <?php foreach($listado as $item){ echo '<li>'.$item; }?> </ul> </body> </html> function index(){ $datos['titulo']='mi Sitio'; $datos['listado']= array( 'uno', 'dos', 'tres'); } $this->load->view('vistax',$datos); vistax.php

php echo $titulo;?> </title> </head> <body> <ul> <?php foreach($listado as $item){ echo '<li>'.$item; }?

12 CodeIgniter - models Los modelos son clases en PHP que provee en una abstracción de los datos que son manipulados por la aplicación. Se ubican en la carpeta application/models/ class Nombre_modelo extends CI_Model { function construct() { parent:: construct(); } } El nombre del modelo debe comenzar en mayúsculas y luego todo en minúsculas. El nombre del archivo es el nombre del modelo en minúsculas: modelo Alumno_model, en archivo alumnos_model.php modelo Libro, en archivo libro.php modelo Blog_item_model model en blog_i item_model.phpmodel Los modelos son cargados explícitamente desde el controlador: $this->load->model(' 'Nombre_modelo'); La funcionalidad del modelo se accede por el nombre del modelo: $this->nombre_modelo->funcionx();

luego todo en minúsculas. El nombre del archivo es el nombre del modelo en minúsculas: modelo Alumno_model, en archivo alumnos_model.php modelo Libro, en archivo libro.

13 CodeIgniter - models La carga del modelo no implica una conexió ón a la base de datos. Hay dos formas de establecer una conexión: Automática Configurando correctamente el archivo application/config/autoload.php Manual Utilizando una de las siguientes sentencias en el constructor del modelo, o en las operaciones que lo requieran. $this->load->database(); Utiliza la configuración central. $this->load->database('configx',true); Utiliza uno de los perfiles (connection group) de la configuración central. $this->load->database($confi ig); Utiliza la configuración indicada en la variable $config: $config['hostname'] = "localhost"; $config['usern name'] = "usuario";...

php Manual Utilizando una de las siguientes sentencias en el constructor del modelo, o en las operaciones que lo requieran.

14 MVC del lado cliente Cliente Web Server controller view view model HTML CSS JS Una aplicación en si misma

15 MVC del lado cliente Cliente Web Server controller view model Una aplicación en si misma

16 MVC del lado cliente Cliente controller JavaScript Web Server view DOM model XML JSON HTML

17 MVC - Alternativas Hay variaciones al modelo MVC tradicional, espe ecialmente del lado cliente MV* El concepto de controlador dedicado d no es mandatorio. MVP Model-View-Presenter. La diferencia es la codificación del Presenter, que se comunica con la Vista por medio de una interfaz. Usualmente no hay vinculo entre el Modelo y la Vista MVVM Model-View-ViewModel Impulsado por Microsoft paraa su estructura t de interfaces WPF-Silverlight li El ViewModel es una abstracción de la vista e implementa su comportamiento.

La diferencia es la codificación del Presenter, que se comunica con la Vista por medio de una interfaz.

18 JS MVC Backbone.js AngularJS Ember.js KnockoutJS Dojo YUI Knockback.js CanJS Polymer React Mithrilil Ampersand Flight Vue.js MarionetteJS TroopJS + RequireJS

19 Ejemplo: Backbone.JS Backbone es un framework liviano para desarro ollar aplicaciones single-page. No obligatorio (MV*) controllerr view model Abstracciones de los elementos HTML Datos. Posiblemente agrupados en colecciones o e

20 Ejemplo: Backbone.JS Backbone.Model updates notifies HTML updates invoke events Backbone.View

Documentos relacionados

Ingeniería de Aplicaciones Web

Ingeniería de Aplicaciones Web Diego C. Martínez Departamento de Ciencias e Ingeniería de la Computación Universidad Nacional del Sur Frameworks Framework Unused Library Classes Framework library Framework