Proyecto Php-MySQL-Ajax-Flex

José Manuel Ortega Candel

jmoc25@gmail.com

Estructura del proyecto con CodeIgniter

Modelo Entidad-Relación.Esquema de la base de datos

Modelo-Vista-Controlador

models: Contiene las clases para trabajar con la capa de la base de datos. views: Contiene las vistas para mostrar el contenido de la web controllers: Contiene la mayor parte de la lógica de negocio.

Código javascript

Las librerías javascript que se usen en toda la aplicación se cargan en el fichero

views\cabecera.php.Destacar en este fichero la inclusión de las librerías de

jquery.

Peticiones Ajax

Se emplea la función de javascript $ajax pasándole por parámetros:

type: Indicamos el tipo de peticion si será via POST o GET en este caso como estamos usando CodeIgniter usaremos POST url: función controlador donde se va a procesar la petición y devolverá la respuesta data:parámetros serán enviados via POST a nuestra función success:función callback javascript encarga de procesar la respuesta después de ejecutar la petición mediante ajax.Normalmente a esta función se le pasará por parámetro el objeto response

Listado de libros

Model: application\models\librosmodel.php View: application\views\libros\listar.php Controller:application\controllers\libros.php Javascript: js\busqueda.js

js\busqueda.js

Dentro de la clase controlador Libros se encuentra la función listarLibrosAjax()

Para obtener el array de libros en formato JSON se emplea la librería Services_JSON. Para cargar esta librería en nuestro proyecto se emplea: $this->load->library('Services_JSON'); Esta función se respalda en las funciones getLibros() y getLibrosBusqueda() que

se encuentran en la clase LibrosModel

application\models\librosmodel.php

Formato JSON

La función responseLibrosJSON(response) lo que hace es generar el html para

volver a pintar la lista de libros.Para ello,se emplea el div con id=”listaLibros” de

la página views\libros\listar.php y mediante la sentencia de jquery

$(“#listaLibros”).html ,sobreescribir el contenido del div.

Con el objeto json obtenido, se construye la respuesta a través de la función

eval(response), obteniendo de esta forma un array de objetos.Para acceder a las

propiedades de cada objeto se emplea la notación objeto.propiedad.

Ejecución

Con filtro:

Sin resultados:

Paginación en CodeIgniter

application\models\librosmodel.php

En la clase controlador application\controllers\libros.php hay que cargar la

librería e inicializar los parámetros de configuración.

Detalle del libro

Model: application\models\librosmodel.php View: application\views\libros\ver.php Controller:application\controllers\libros.php Javascript: js\tabs.js

application\models\librosmodel.php

application\controllers\libros.php

Añadir un libro a la cesta de la compra

Se puede hacer a través del botón “Añadir a la cesta” desde el detalle del libro o

haciendo drag & drop sobre el elemento dentro la lista de portada.

Librería: libraries\Carro_Library.php View: application\views\libros\listar.php Controller:application\controllers\cesta.php application\controllers\libros.php Javascript: js\cesta.js

Libros favoritos

Model: application\models\librosmodel.php View: application\views\usuarios\favoritos.php Controller:application\controllers\libros.php Javascript: js\favoritos.js

application\models\librosmodel.php

Registro de un usuario

Model: application\models\ciudadesmodel.php View: application\views\usuarios\addform.php Controller:application\controllers\usuarios.php Javascript: js\usuarios_addform.js

Combo Paises-Ciudades

El combo de selección del campo ciudad se carga de forma dinámica a partir del

país seleccionado.

En el evento onChange del combo de paises se llama a la función:

Obtiene las ciudades de un determinado país a partir del id_pais que se envía

Genera el combo de ciudades mediante consulta a la base de datos

application\models\ciudadesmodel.php

Vuelve a pintar los datos en el componente

Comprobar email registro

Model: application\models\usuariosmodel.php View: application\views\usuarios\addform.php Controller:application\controllers\usuarios.php Javascript: js\usuarios_addform.js

En el evento onBlur del campo email se llama a la función comprobarEmail()

Javascript: js\usuarios_addform.js

application\controllers\usuarios.php

application\models\usuariosmodel.php

Si el email introducido ya está registrado muestra el mensaje “Email ya existe”

Si el email introducido no ha sido utilizado, muestra la confirmación de que es

correcto

Login usuario

Model: application\models\usuariosmodel.php View: application\views\usuarios\loginform.php Controller:application\controllers\usuarios.php Javascript: js\usuarios_loginform.js

Javascript: js\usuarios_loginform.js

Autocompletado en campo de búsqueda por título y por tag

Model: application\models\librosmodel.php View: application\views\libros\listar.php Controller:application\controllers\libros.php Javascript: js\ jquery.autocomplete.js js\busqueda.js

js\busqueda.js

application\controllers\libros.php

Autocompletado en título

Autocompletado en tag

Usuarios activos

Model: application\models\usuariosmodel.php View: application\views\libros\listar.php Controller:application\controllers\usuarios.php Javascript: js\ usuarios_activos.js

js\ usuarios_activos.js

application\controllers\usuarios.php

application\models\usuariosmodel.php

Filtro de libros por rango precio con la barra de desplazamiento

Model: application\models\librosmodel.php View: application\views\libros\listar.php Controller:application\controllers\libros.php Javascript: js\ usuarios_slider.js

js\ usuarios_slider.js

application\controllers\libros.php

application\models\librosmodel.php

Cesta de la compra, con la posibilidad de actualizar la misma estableciendo la

cantidad para cada producto.

Librería: libraries\Carro_Library.php View: application\views\cesta\ver.php Controller:application\controllers\cesta.php

Libros en formato RSS

Model: application\models\librosmodel.php View: application\views\libros\rss.php Controller:application\controllers\feed.php

application\controllers\feed.php

application\models\librosmodel.php

application\views\libros\rss.php

Código generado RSS

Se genera un xml que contiene las siguientes etiquetas:

Cabecera: donde ira la versión de XML y la codificación.

Canal: todo rss debe de tener un nodo raíz <channel>

Información: aquí ira los datos del canal: titulo, link, descripción, fecha de actualización, idioma y copyright.

Items, los items serán los bloques de información,normalmente las noticias o posts de los blogs. Dentro de los items encontraremos otras etiquetas relativas al titulo del item, un enlace una descripción y el autor.

Comentarios de un libro por parte de usuarios registrados

Model: application\models\librosmodel.php View: application\views\libros\comentar.php Controller:application\controllers\libros.php

application\models\librosmodel.php

Categorias,SubCategorias ,Canales RSS

Model: application\models\categoriasrssmodel.php View: application\views\libros\busquedaRss.php Controller:application\controllers\feed.php

Categorias

application\views\libros\busquedaRss.php

application\controllers\feed.php

application\models\categoriasrssmodel.php

Subcategorias

application\views\libros\busquedaRss.php

application\controllers\feed.php

application\models\categoriasrssmodel.php

Canales

application\views\libros\busquedaRss.php

application\controllers\feed.php

application\models\categoriasrssmodel.php

Mapa usuarios

Permite localizar en un mapa de google los usuarios registrados

Model: application\models\usuariosmodel.php View: application\views\usuarios\mapa.php Controller:application\controllers\usuarios.php

application\controllers\usuarios.php

application\models\usuariosmodel.php

Librería DHTML History

Javascript:js\ dhtmlHistory.js

Librería que permite mantener la funcionalidad de los botones atrás y siguiente del navegador y permite cambiar la dirección del navegador sin recargar la página.

<script type="text/javascript" src="js/dhtmlHistory.js"></script>

La forma de uso es llamar al método add de la clase dhtmlHistory cada vez que hagamos una petición AJAX. Al método add le pasaremos dos parámetros, el primero será la nueva dirección que deseamos poner en la barra de direcciones y el segundo datos que queramos guardar en la “cache” que nos proporciona dhtmlHistory. Uso de dhtml history

Proyecto Flex mediante amfphp

Amfphp permite conectar PHP con Flash y Flex mediante llamadas remotas.

Estructura de amfphp

+ amfphp +services +core +browser -gateway.php -globals.php -.htaccess -json.php -xmlrpc.php -phpinfo.php

Clases services

Los services son clases de tipo Controller que permiten definir las funciones que se utilizarán

desde flex para ejecutar la lógica de la aplicación.

Por ejemplo para obtener el listado de libros desde flex se emplea la clase

LibrosService que contendrá un método para cada operación que se considere

independiente.

Para obtener la lista de libros de portada desde flex, se declara el objeto remoto

junto con los métodos que se van a usar,en este caso se declara el objeto

librosService.

Luego dentro de la función cargarLibros() se ejecuta el método listarPortada()

del objeto librosService

Como resultado de la llamada al método librosService.listarPortada() ,tal como

está definido en el atributo result de la etiqueta method, se llamaría al método

resultLibrosHandler(event),que devolvería una colección de libros para pintarlos

en el datagrid:

Una vez se haya obtenido la lista de libros,se emplea el componente DataGrid

,que lo que hace es montar una tabla con las columnas que se indiquen y en el

atributo dataProvider se le pasa la colección con los resultados obtenidos.

<mx:DataGrid id="dgLibros" dataProvider=”{dataLibros}”> <mx:columns>

<mx:DataGridColumn headerText="Titulo" dataField="titulo"/> <mx:DataGridColumn headerText="Autor" dataField="autor"/>

</mx:columns> </mx:DataGrid>

Un dataProvider es una colección de datos, similiar al ArrayCollection, que sirve

de modelo para los componentes Flex. De este modo se cumple el patrón MVC

(Model-View-Controller)

Los ArrayCollection a su vez se pueden utilizar como proveedores de datos

dataProvider para componentes basados en listas como List, Tree, DataGrid,

TitleList, ComboBox

Al hacer el ArrayCollection [Bindable] permite enlazarlo directamente con el

Datagrid.

Para cargar los libros cuando se carga la interfaz hay que asociar la función

cargarLibros() al evento creationComplete.

<CoreAppScreen xmlns="screens.appscreens.*" xmlns:forms="forms.*" xmlns:mx="http://www.adobe.com/2006/mxml" width="100%" height="100%" creationComplete="cargarLibros()" xmlns:comp="comp.*">

Listado de libros en flex con componente Datagrid

Buscar por titulo

Buscar por precio mediante slider

Componente slider y funciones

Galeria de imágenes

Obtener datos de un libro

Insertar nuevo libro

Para insertar un nuevo libro se lanza el evento nuevoLibro

Este evento se define dentro de la etiqueta Metadata

Donde name es el nombre del evento y type el tipo de evento lanzado (si no se

declara el type por defecto lanza el evento tipo de Flex flash.events.Event).En

este caso nuestro tipo de evento es la clase LibroEvent, definida dentro de la

carpeta de events.

Combos autores y editoriales

Creamos un comboBox donde sus datos provienen de una colección de datos del tipo ArrayCollection. La propiedad del ComboBox labelField indica qué campo de la colección de datos debe mostrar en la interfaz gráfica.

Validaciones en el formulario

Actualizar un libro mediante double click sobre el Datagrid

Clase para encapsular los datos del libro

comp\Libro.as

A la clase “Libro” se le añade un método estático (static) que nos permita crear

un objeto de la clase Libro a partir de un objeto Object.

Este método se llama buildLibro, como parámetro le llegará un objeto de tipo

Object y devolverá un objeto de tipo Libro.

src\views\LibroForm.mxml

Administración de Libros

src\screens\appscreens\LibrosScreen.mxml

src\forms\LibroForm.mxml

src\forms\NuevoLibroForm.mxml

Registro de un libro con validaciones

Actualizar los datos de un libro

Eliminar un libro con confirmación

Subir imágenes de un libro

Eliminar las imagenes arrastrándolas a la papelera

Tags de un libro

Crear un nuevo tag

src\forms\TagForm.mxml

Asignar un tag al libro mediante drag&drop

Eliminar un tag del libro mediante drag&drop

Comentarios

src\screens\appscreens\ComentariosScreen.mxml

Eliminación de comentarios con confirmación

Editoriales

src\screens\appscreens\EditorialesScreen.mxml

Pantalla de login

src\screens\LoginScreen.mxml

Usuarios

src\screens\appscreens\UsuariosScreen.mxml

Detalle de un Libro

src\forms\LibroForm.mxml

Definimos el objeto librosService donde se declaran los métodos que están definidos en la clase LibrosService

Insertar mediante drag &drop desde la tabla autores

En la pantalla de detalle de un libro se ha añadido la opción de

relacionar autores con este libro mediante drag&drop. Cada vez que se arrastre de la lista de autores de la izquierda (todos los autores) a

la lista de la derecha, se grabará en la relación muchos a muchos ese

registro. Si se hace el proceso inverso se eliminará.

En el DataGrid de AutoresLibro se añade el evento dragDrop y la función asociada al mismo <mx:DataGrid width="219" height="311" doubleClickEnabled="true" dragEnabled="true" dropEnabled="true" id="dgAutoresLibro" dragOver="dragOverHandler(event)" dragDrop="doDragDropAutor(event)" dataProvider="{dataAutoresLibro}">

Eliminar mediante drag &drop desde la tabla libros_autores

Validaciones y formatos de datos en LibroForm

Listado de autores

src\screens\appscreens\AutoresScreen.mxml

Autocompletado

Filtro por nombre de autor

Insertar/Modificar autor

src\forms\AutorForm.mxml

Objeto autoresService

Validación

Actualizar autor

Eliminar autor desde listado

Una vez realizada la consulta y obtenido el listado, tenemos un botón Eliminar, que al hacer click sobre él, nos pedirá confirmación del

borrado.Para ello habrá que registrar un listener de tal forma que

cuando se haga click en el botón se llama a la función eliminar_handler.

Para ello se emplea la función addEventListener del datagrid

dgAutores

Biografia autor mediante tooltip Se crea un nuevo componente que pinte la descripción dentro de la caja.

src\comp\biografiaRenderer.mxml

src\screens\appscreens\CustomToolTip.mxml

Galería de autores

src\comp\galeriaAutores.mxml

src\data\autores.xml