Arquitectura de desarrollo de referencia

Introducción a los Frameworks MVC

eugeniaperez.es

Aplicación web PHPacacic

Aplicación web PHP con mejorasacacic

Aplicación web Symfonyacacic

EVOLUCIÓNÓN

ARQUITECTURA DE DESARROLLO DE REFERENCIA

no reinventes la rueda

A la hora de comenzar a desarrollar una aplicación,

es recomendable apoyarse en un Framework.

 

eugeniaperez.es

Funcionalidades ya hechas...

Son utilizados en la empresa

los frameworks proveen:

  • Arquitectura de referencia ->calidad en nuestro software.
  • Funcionalidades probadas y documentadas-> productividad

 

eugeniaperez.es

ARQUITECTURA DE DESARROLLO DE REFERENCIA

Más BENEFICIOS:

  • Patrón probado y documentado -> ¡funciona!
  • Desarrollo rápido, modular y mantenible.
  • La idea subyacente es utilizada por otros frameworks y productos del mercado -> Reduce la curva de aprendizaje de los mismos

 

eugeniaperez.es

ARQUITECTURA DE DESARROLLO DE REFERENCIA

multitud de fw mvc para php:

Algunos de los más conocidos son Zend, Symfony, Yii o CodeIgniter

 

eugeniaperez.es

ARQUITECTURA DE DESARROLLO DE REFERENCIA

¿Infojos...?

arquitectura de referencia:

 

 

 

 

 

 

eugeniaperez.es

spaguetti

code

ARQUITECTURA DE DESARROLLO DE REFERENCIA

¿PHP...?

arquitectura de referencia:

 

 

eugeniaperez.es

ARQUITECTURA DE DESARROLLO DE REFERENCIA

  • Diseño limpio
  • Escalabilidad
  • Mantenimiento

cargamos el proyecto roleplayinggame

 

 

eugeniaperez.es

ARQUITECTURA DE DESARROLLO DE REFERENCIA

Pasamos de la versión inicial -> RolePlayingGameInit

A una versión poco estructurada -> RolePlayingSinMVC

A una versión con separación de capas -> RolePlayingGame

Separación de capas: Frameworks MVC

 

eugeniaperez.es

ARQUITECTURA DE DESARROLLO DE REFERENCIA

  • index
  • insert
  • delete
  • update
  • detail

POPO -> Creature

insertController

updateController

deleteController

         /conf -> PersistentManager

/DAO ->  CreatureDAO

Persistence   

assets

  • js
  • css
  • img
  • librerías...

Separación de capas: Frameworks MVC

 

eugeniaperez.es

ARQUITECTURA DE DESARROLLO DE REFERENCIA

Con esta versión conseguimos:

- Centralizar los accesos a BD -> una clase configurable Persistent Manager 
- Acceso a datos mediante el patrón DAO
- Separación de vistas, controladores y modelo
- Creación del objeto Creature en el modelo
- Uso de Prepared Statements 

- Introduciremos validaciones

framwork mvc. diseño de componentes:

 

 

eugeniaperez.es

ARQUITECTURA DE DESARROLLO DE REFERENCIA

  • Vista: muestra la información al usuario.
  • Controlador: sirve a los archivos de la vista todos los datos que ésta necesite mostrarle al usuario (peticiones).
  • Modelo: entidades que maneja nuestro programa. 

framwork mvc. diseño de componentes:

 

 

eugeniaperez.es

ARQUITECTURA DE DESARROLLO DE REFERENCIA

  • Persistencia: clases que interactuan con la base de datos.
  • Utilidad: agrupar funcionalidades que no son específicas de los objetos de nuestra aplicación, y reutilizables.
  • Servicios: distribuiyen responsabilidades entre controladores.

framwork mvc. diseño de componentes:

 

 

eugeniaperez.es

ARQUITECTURA DE DESARROLLO DE REFERENCIA

  • Recursos estáticos: almanacenar ficheros estáticos como imágenes, css, js, etc.
  • Configuración: para archivos de propiedades y  configuración. Parámetros de conexión a la BD.
  • Librerías: librerías externas que nuestra aplicación necesite sin incluir las de Js.

framwork mvc. diseño de componentes:

 

 

eugeniaperez.es

ARQUITECTURA DE DESARROLLO DE REFERENCIA

framwork mvc. diseño de componentes:

 

 

eugeniaperez.es

ARQUITECTURA DE DESARROLLO DE REFERENCIA

Views

ejemplos de aplicaciones mvc sencillas 

 

 

eugeniaperez.es

ARQUITECTURA DE DESARROLLO DE REFERENCIA

Descarga los proyectos almacenados en Proyectos Fw PHP.zip:

  • PHPFramework4v
  • Blog
  • Albergue

PHPFramework4v

 

 

eugeniaperez.es

ARQUITECTURA DE DESARROLLO DE REFERENCIA

Aplicación muy sencilla que sigue la estructura anterior.

El programa simula una sencilla operación de login.

PHPFramework4v

 

 

eugeniaperez.es

ARQUITECTURA DE DESARROLLO DE REFERENCIA

La estructura del proyecto.

eugeniaperez.es

ARQUITECTURA DE DESARROLLO DE REFERENCIA

PHPFRAMEWORK4V

Lo primero es crear una carpeta que se llame \persistence, y dentro crearemos otras dos carpetas, una \conf y otra \DAO.

A la clase PersistentManager.php se le aplica el patrón Singleton.

También se crea el UserDAO, y el objeto User.

Finalmente se crean las vistas.

eugeniaperez.es

ARQUITECTURA DE DESARROLLO DE REFERENCIA

PROOFOFCONCEPT

Revisando la estructura de desarrollo a seguir y el diseño de componentes.

Se abordan las directrices de codificación de la arquitectura de referencia creada.

  • Resumen de versiones: https://bitbucket.org/eugenia_perez/todo-app/overview
  • Descargas: https://bitbucket.org/eugenia_perez/todo-app/downloads

eugeniaperez.es

ARQUITECTURA DE DESARROLLO DE REFERENCIA

PROOFOFCONCEPT

Version 0.2

  • Private index page user interface ready with create task form and tasks table in place
  • jQuery datepicker added
  • Timepicker plugin added

Version 0.1

  • Home Page with login form
  • Login management

eugeniaperez.es

ARQUITECTURA DE DESARROLLO DE REFERENCIA

PROOFOFCONCEPT

Version 0.4

  • Tasks table improved.
  • Protection of the private views.

Version 0.3

  • Refactoring of the database connection handling.

eugeniaperez.es

ARQUITECTURA DE DESARROLLO DE REFERENCIA

PROOFOFCONCEPT

Version 0.6

  • Insert task functionality improved.
  • Formatted dates enhanced.

Version 0.5

  • Insert task functionality added.

eugeniaperez.es

ARQUITECTURA DE DESARROLLO DE REFERENCIA

PROOFOFCONCEPT

El proyecto debe nombrarse con ProofOfConcept.

Si no contiene la BD, la puedes descargar del aula.

Necesitarás variar la contraseña.

¡Probando su funcionamiento...!

 

NECESARIA LECTURA DE CÓDIGO

 

eugeniaperez.es

ARQUITECTURA DE DESARROLLO DE REFERENCIA

PROOFOFCONCEPT

Analicemos la operación de inserción de una tarea.

 

 

eugeniaperez.es

ARQUITECTURA DE DESARROLLO DE REFERENCIA

PROOFOFCONCEPT

Analicemos la operación de inserción de una tarea.

Interfaz usuario: 

http://localhost/ProofOfConcept/app/private/views/index.php

Formulario de inserción con Bootstrap

eugeniaperez.es

ARQUITECTURA DE DESARROLLO DE REFERENCIA

PROOFOFCONCEPT

 <form class="form-horizontal"

id="newTaskForm" role="form" action="../../controllers/tasksController.php?actiontask" method="POST">

  • <input type="text"
  •  <input type="submit"

            

Datos del form viajan...

eugeniaperez.es

ARQUITECTURA DE DESARROLLO DE REFERENCIA

PROOFOFCONCEPT

 Manejando la acción en el controlador

El flujo de ejecución se dirige al tasksController.php:

 

            

if (isset($_GET["actiontask"])) {
    $_taskController = new TaskController();

    switch ($_POST["btnsubmit"]) {

        case "Create":
            $_taskController->add();
            break;

        case "Edit":
            //$_taskController->edit();
            break;
    }
}

eugeniaperez.es

ARQUITECTURA DE DESARROLLO DE REFERENCIA

PROOFOFCONCEPT

El flujo de ejecución al método add():

 

            

 public function add() {
        $_task = new Task();

        $_task->setTitle($_POST["title"]);
        $_task->setDescription($_POST["description"]);
        $_task->setDate($_POST["date"]);
        $_task->setTime($_POST["time"]);
        $_task->setUserid($this->getUseridSession());

        $this->_taskDAO->insert($_task);
        HTTPUtils::redirect("../private/views/index.php");
}

Se recogen los datos

que vienen por POST

Se llama al DAO

para la persistencia

Se redirige a la vista inicial

eugeniaperez.es

ARQUITECTURA DE DESARROLLO DE REFERENCIA

PROOFOFCONCEPT

Se sigue el patrón AbstractFactory, que consiste en una factoría de DAOS que se encargará de inicializarlos:

 

            

   public function __construct() {
        $this->_factory= DAOFactory::getFactory();
    }

eugeniaperez.es

ARQUITECTURA DE DESARROLLO DE REFERENCIA

PROOFOFCONCEPT

El TaskController llama al insert de TaskDAO pasándole como parámetro un objeto TaskPlain Old PHP Object (POPO)

 

            

class Task{

    private $_taskid;
    private $_userid;
    private $_date;
    private $_time;
    private $_title;
    private $_description;
    private $_done;

//Getters and setters
´´´
}

eugeniaperez.es

ARQUITECTURA DE DESARROLLO DE REFERENCIA

PROOFOFCONCEPT

La clase TaskDAO en persistence/daos, y el método insert().

Se permite lanzar prepared statements contra la BD para generar consultas SQLde manera segura -> se evita SQL Injection.

  • Se prepara la consulta mediante '?'
  • Se sustituyen los valores de los atributos
  • Se ejecuta la consulta
  • Se cierra la consulta para liberación de recursos

 

            

eugeniaperez.es

ARQUITECTURA DE DESARROLLO DE REFERENCIA

PROOFOFCONCEPT

Vuelta a la vista:

    

Además del formulario de creación de tareas, se tiene una tabla con el listado de las mismas.

Al recargar aparecerá la nueva tarea.

 

 HTTPUtils::redirect("../private/views/index.php");

eugeniaperez.es

ARQUITECTURA DE DESARROLLO DE REFERENCIA

PROOFOFCONCEPT

Version 0.9

  • Register form added.
  • User errors management improved.

Version 0.8

  • Delete a specific task functionality added. Using AJAX.

Version 0.7

  • Edit a specific task functionality added.

eugeniaperez.es

ARQUITECTURA DE DESARROLLO DE REFERENCIA

PROOFOFCONCEPT

Version 1.2

  • Menu bar updated:
  • Get the code: link to the bitbucket repository
  • Contact: contact form to send an email to the site admin
  • Credits: dialog form to show some authorship info
  • About: page with some social buttons to share the site

Version 1.1

  • Logout functionality added.

Version 1.0

  • Editing user form added.
  •  

eugeniaperez.es

ARQUITECTURA DE DESARROLLO DE REFERENCIA

PROOFOFCONCEPT

Version 1.5

  • Server-side validation added.

Version 1.4

  • Ability to paginate results in the task table.
  • Transition between pages using AJAX calls.

Version 1.3

  • Menu bar improved

eugeniaperez.es

ARQUITECTURA DE DESARROLLO DE REFERENCIA

PROOFOFCONCEPT

Version 1.7

  • Multilanguage support.
  • Getting preferred language from the user browser.

Version 1.6

  • Function added to avoid the injection of malicious javascript code and remove unnecesary extra characters.
  •  

eugeniaperez.es

ARQUITECTURA DE DESARROLLO DE REFERENCIA

PROOFOFCONCEPT

Probando su funcionamiento...

eugeniaperez.es

ARQUITECTURA DE DESARROLLO DE REFERENCIA

PROOFOFCONCEPT

Leer enunciado de la práctica del Blog...

...con esta arquitectura

DW_practicaBlog.pdf

UT4. Arquitectura de desarrollo

By eugenia_perez

UT4. Arquitectura de desarrollo

  • 999