Ejercicios

20 febrero 2020

Ejercicio 1:

Mini-Gestor de ficheros On-Line (código)

Trabajo a realizar:

  1. Instalar la aplicación en un servidor web local, hacerla funcionar y analizar la estructura del código
  2. Reestructurar el código para adaptarlo a un patrón Modelo-Vista-Controlador
  3. Mejorar la funcionalidad añadiendo las siguientes opciones:
  • Carpeta «raíz» individual para cada usuario
  • Subida de ficheros usando el objeto «XMLHTTPRequest» (‘AJAX‘)
  • Subir ficheros grandes «a trozos» (mostrar barra de progreso)
  • Subir múltiples ficheros de una sola vez
  • Añadir la opción de subir ficheros mediante eventos «Drag-and-Drop» (Arrastra-y-Soltar)
  • Añadir un usuario ‘superuser‘ con acceso a funciones para gestión de usuarios (altas y bajas)

 

Ejercicio 2:

Ejemplo AJAX y MVC elemental (código)

Contiene los ficheros:

  • index.html: La vista del ejemplo, solo contiene código HTML
  • controlador.js: Solo contiene código javascript
  • modelo.php: Solo contiene código PHP

 

Ejercicio 3:

Conexión con Base de datos MySQL (código)

 

Ejercicio 4:

Librería PHP para devolver el resultados de consultas sobre MySQL en formato JSON (código)

Entre otras, esta librería contiene las siguientes funciones:

  • function get_Data_Result($res, $noFields=array())
  • function get_Data_SQL($SQL, $noFields=array(), $mysqli)
  • function get_Data_Table($table, $where, $noFields=array(), $mysqli)

Donde:

  • $res: objeto ‘result’ devuelto por una ‘query’ a MySQL
  • $SQL: cadena con una sentencia SELECT válida
  • $table: cadena con el nombre de una tabla de la base de datos MySQL
  • $noFields: array con los nombres de los campos de no se quiere que sean devueltos. Puede ser un vector vacío
  • $where: cadena con una sentencia WHERE válida. Puede estar en blanco
  • $mysqli: objeto con una conexión abierta a la base de datos MySQL, debe haberse creado con la extensión mejorada de PHP.

En todos los casos el valor devuelto es una cadena con la matriz de datos resultante de la consulta realizada en formato JSON, o un mensaje de error en caso de que falle la consulta.

 

Ejercicio 5:

Lanzar procesos en el servidor vía AJAX con arquitectura MVC (código)

Se proporciona el código de una pequeña aplicación web de ejemplo, desarrollada siguiendo el patrón MVC, que permite lanzar procesos de diferente tamaño (tiempo de ejecución) en el servidor y capturar la salida de dichos procesos. El código se encuentra suficientemente comentado.

También se proporciona el código en C del proceso que es lanzado en el servidor, se trata de un sencillo programa que recibe dos argumentos (main(argc, argv)), una cadena de texto y un valor numérico que indica el número de segundos que el programa debe tardar en ejecutarse. Dichos argumentos serán proporcionados por el usuario desde la vista de la aplicación web.

Para más información sobre como lanzar procesos en el servidor desde PHP ver la función ‘exec‘ y las ‘funciones de ejecución de programas‘.

 

Ejercicio 6:

Cargar una interfaz con AJAX y MVC (código)

El presente ejercicio muestra como se puede cargar desde AJAX (sin recargar la página inicial) una interfaz de usuario tras haber hecho login desde la página principal. La interfaz de usuario que se carga simula una aplicación de escritorio con una barra de título superior, un menú de opciones (en el ejercicio no todas las opciones del menú está programadas para hacer algo), una barra inferior de estado y tres áreas de trabajo centrales: una barra lateral a la izquierda, un cuadro de propiedades a la derecha y un área principal al centro.

Entre las opciones del menú, hay unas que quieren ilustrar como cargar en una capa contenido externo de otras webs, al ejecutar esas opciones, alguna de ellas cargan webs con nuevas hojas de estilo que deforman el estilo original de nuestra página provocando un mal funcionamiento, en esos casos solo queda recargar la página para resolver ese problema.

 

Ejercicio 7:

Cargar datos en formato JSON del servidor al cliente con AJAX y MVC (código)

Se presenta un ejemplo de como usar algunas de las librerías anteriormente expuestas para realizar una consulta en una base de datos y devolver el resultado en formato JSON desde el servidor al cliente, siguiendo la metodología AJAX y el patrón de diseño MVC. Los ficheros proporcionados son los siguientes:

  • index.php: hace las veces de VISTA, contiene un botón que hace la llama a la función «cargar datos» (ver ‘controlador.js’) y una capa ‘div’ para mostrar los resultados
  • controlador.js: contiene la función «CargarDatos()» que llama vía AJAX al modelo (ver ‘modelo.php’) y recibe un objeto JSON con los datos a mostrar en la capa.
  • modelo.php: Egecuta la consulta a la base de datos y crea el objeto JSON que será enviado al cliente. para su funcionamiento incluye el fichero «conexion.php» y el fichero «mysql2json.php».
  • conexion.php: Crea la conexión con la base de datos (ver más arriba el «Ejercicio 2«). Se usa la base de datos de ejemplo «cdcol» (colección de CD’s) que trae por defecto XAMPP.
  • mysql2json.php: Librería PHP para devolver el resultados de consultas sobre MySQL en formato JSON (ver más arriba el «Ejercicio 3«).

 

Ejercicio 8:

Modulo para identificación de usuario (login) en AJAX y MVC

  • Base de datos: Tabla «01_usuarios» (ID: user1, PWD: 1234), se debe crear la tabla en la base de datos «test» de MySQL con el código SQL que se puede descargar desde aquí
  • Primera parte (descargar código desde aquí):
    • index.php: Estructura principal, crea tres capas en el BODY: HEADER, FOOTER y MAIN
    • estilos.csv: maqueta las capas anteriores
    • utils.js: funciones javascript para AJAX y MVC
    • utils.php: Conexión con base de datos y otras funciones PHP para acceso a BBDD
    • 01_login_c.php: controlador del módulo «login»
    • 01_login_m.php: modelo para el módulo «login»
    • 01_login_v.php: vista para el módulo «login»

 

—