Proyecto Php-MySQL-Ajax-Flex

1. Proyecto Php-MySQL-Ajax-Flex
José Manuel Ortega Candel
jmoc25@gmail.com

2. Estructura del proyecto con CodeIgniter

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

4. 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.

5. Código javascript

6. Las librerías javascript que se usen en toda la aplicación se cargan en el fichero
viewscabecera.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: applicationmodelslibrosmodel.php
View: applicationviewslibroslistar.php
Controller:applicationcontrollerslibros.php
Javascript: jsbusqueda.js
jsbusqueda.js

7. 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
applicationmodelslibrosmodel.php

8. 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 viewslibroslistar.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.

9. Ejecución
Con filtro:
Sin resultados:

10. Paginación en CodeIgniter
applicationmodelslibrosmodel.php
En la clase controlador applicationcontrollerslibros.php hay que cargar la
librería e inicializar los parámetros de configuración.

11. Detalle del libro
Model: applicationmodelslibrosmodel.php
View: applicationviewslibrosver.php
Controller:applicationcontrollerslibros.php
Javascript: jstabs.js
applicationmodelslibrosmodel.php
applicationcontrollerslibros.php

13. 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: librariesCarro_Library.php
View: applicationviewslibroslistar.php
Controller:applicationcontrollerscesta.php
applicationcontrollerslibros.php
Javascript: jscesta.js

14. Libros favoritos
Model: applicationmodelslibrosmodel.php
View: applicationviewsusuariosfavoritos.php
Controller:applicationcontrollerslibros.php
Javascript: jsfavoritos.js
applicationmodelslibrosmodel.php

16. Registro de un usuario
Model: applicationmodelsciudadesmodel.php
View: applicationviewsusuariosaddform.php
Controller:applicationcontrollersusuarios.php
Javascript: jsusuarios_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

17. Genera el combo de ciudades mediante consulta a la base de datos
applicationmodelsciudadesmodel.php
Vuelve a pintar los datos en el componente

19. Comprobar email registro
Model: applicationmodelsusuariosmodel.php
View: applicationviewsusuariosaddform.php
Controller:applicationcontrollersusuarios.php
Javascript: jsusuarios_addform.js
En el evento onBlur del campo email se llama a la función comprobarEmail()
Javascript: jsusuarios_addform.js
applicationcontrollersusuarios.php

20. applicationmodelsusuariosmodel.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

21. Login usuario
Model: applicationmodelsusuariosmodel.php
View: applicationviewsusuariosloginform.php
Controller:applicationcontrollersusuarios.php
Javascript: jsusuarios_loginform.js
Javascript: jsusuarios_loginform.js

23. Autocompletado en campo de búsqueda por título y por tag
Model: applicationmodelslibrosmodel.php
View: applicationviewslibroslistar.php
Controller:applicationcontrollerslibros.php
Javascript: js jquery.autocomplete.js
jsbusqueda.js
jsbusqueda.js
applicationcontrollerslibros.php

24. Autocompletado en título
Autocompletado en tag

25. Usuarios activos
Model: applicationmodelsusuariosmodel.php
View: applicationviewslibroslistar.php
Controller:applicationcontrollersusuarios.php
Javascript: js usuarios_activos.js
js usuarios_activos.js
applicationcontrollersusuarios.php

26. applicationmodelsusuariosmodel.php

27. Filtro de libros por rango precio con la barra de desplazamiento
Model: applicationmodelslibrosmodel.php
View: applicationviewslibroslistar.php
Controller:applicationcontrollerslibros.php
Javascript: js usuarios_slider.js
js usuarios_slider.js
applicationcontrollerslibros.php
applicationmodelslibrosmodel.php

29. Cesta de la compra, con la posibilidad de actualizar la misma estableciendo la
cantidad para cada producto.
Librería: librariesCarro_Library.php
View: applicationviewscestaver.php
Controller:applicationcontrollerscesta.php

30. Libros en formato RSS
Model: applicationmodelslibrosmodel.php
View: applicationviewslibrosrss.php
Controller:applicationcontrollersfeed.php
applicationcontrollersfeed.php
applicationmodelslibrosmodel.php
applicationviewslibrosrss.php

32. 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.

33. Comentarios de un libro por parte de usuarios registrados
Model: applicationmodelslibrosmodel.php
View: applicationviewslibroscomentar.php
Controller:applicationcontrollerslibros.php
applicationmodelslibrosmodel.php

34. Categorias,SubCategorias ,Canales RSS
Model: applicationmodelscategoriasrssmodel.php
View: applicationviewslibrosbusquedaRss.php
Controller:applicationcontrollersfeed.php
Categorias
applicationviewslibrosbusquedaRss.php
applicationcontrollersfeed.php

35. applicationmodelscategoriasrssmodel.php
Subcategorias
applicationviewslibrosbusquedaRss.php
applicationcontrollersfeed.php

36. applicationmodelscategoriasrssmodel.php
Canales
applicationviewslibrosbusquedaRss.php
applicationcontrollersfeed.php

37. applicationmodelscategoriasrssmodel.php

38. Mapa usuarios
Permite localizar en un mapa de google los usuarios registrados
Model: applicationmodelsusuariosmodel.php
View: applicationviewsusuariosmapa.php
Controller:applicationcontrollersusuarios.php
applicationcontrollersusuarios.php
applicationmodelsusuariosmodel.php

41. 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

42. 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.

43. 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

44. 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.*">

45. Listado de libros en flex con componente Datagrid
Buscar por titulo

46. Buscar por precio mediante slider
Componente slider y funciones

47. Galeria de imágenes

48. Obtener datos de un libro

49. 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.

50. 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.

51. Validaciones en el formulario

53. Actualizar un libro mediante double click sobre el Datagrid
Clase para encapsular los datos del libro
compLibro.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.

54. srcviewsLibroForm.mxml

55. Administración de Libros
srcscreensappscreensLibrosScreen.mxml
srcformsLibroForm.mxml
srcformsNuevoLibroForm.mxml
Registro de un libro con validaciones

56. Actualizar los datos de un libro

57. Eliminar un libro con confirmación
Subir imágenes de un libro

58. Eliminar las imagenes arrastrándolas a la papelera
Tags de un libro

59. Crear un nuevo tag
srcformsTagForm.mxml
Asignar un tag al libro mediante drag&drop

60. Eliminar un tag del libro mediante drag&drop

61. Comentarios
srcscreensappscreensComentariosScreen.mxml
Eliminación de comentarios con confirmación

62. Editoriales
srcscreensappscreensEditorialesScreen.mxml
Pantalla de login
srcscreensLoginScreen.mxml

63. Usuarios
srcscreensappscreensUsuariosScreen.mxml

64. Detalle de un Libro
srcformsLibroForm.mxml
Definimos el objeto librosService donde se declaran los métodos que
están definidos en la clase LibrosService

65. 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}">

66. Eliminar mediante drag &drop desde la tabla libros_autores

67. Validaciones y formatos de datos en LibroForm

68. Listado de autores
srcscreensappscreensAutoresScreen.mxml

69. Autocompletado
Filtro por nombre de autor

70. Insertar/Modificar autor
srcformsAutorForm.mxml
Objeto autoresService

71. Validación

72. 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

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

75. Galería de autores
srccompgaleriaAutores.mxml
srcdataautores.xml