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 vi...
Código javascript
Las librerías javascript que se usen en toda la aplicación se cargan en el fichero
viewscabecera.php.Destacar en este fich...
Dentro de la clase controlador Libros se encuentra la función listarLibrosAjax()

Para obtener el array de libros en forma...
Formato JSON

La función responseLibrosJSON(response) lo que hace es generar el html para
volver a pintar la lista de libr...
Ejecución

Con filtro:

Sin resultados:
Paginación en CodeIgniter
applicationmodelslibrosmodel.php

En la clase controlador applicationcontrollerslibros.php hay q...
Detalle del libro
Model: applicationmodelslibrosmodel.php
View: applicationviewslibrosver.php
Controller:applicationcontro...
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...
Libros favoritos
Model: applicationmodelslibrosmodel.php
View: applicationviewsusuariosfavoritos.php
Controller:applicatio...
Registro de un usuario
Model: applicationmodelsciudadesmodel.php
View: applicationviewsusuariosaddform.php
Controller:appl...
Genera el combo de ciudades mediante consulta a la base de datos
applicationmodelsciudadesmodel.php

Vuelve a pintar los d...
Comprobar email registro
Model: applicationmodelsusuariosmodel.php
View: applicationviewsusuariosaddform.php
Controller:ap...
applicationmodelsusuariosmodel.php

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

Si el...
Login usuario
Model: applicationmodelsusuariosmodel.php
View: applicationviewsusuariosloginform.php
Controller:application...
Autocompletado en campo de búsqueda por título y por tag
Model: applicationmodelslibrosmodel.php
View: applicationviewslib...
Autocompletado en título

Autocompletado en tag
Usuarios activos
Model: applicationmodelsusuariosmodel.php
View: applicationviewslibroslistar.php
Controller:applicationco...
applicationmodelsusuariosmodel.php
Filtro de libros por rango precio con la barra de desplazamiento
Model: applicationmodelslibrosmodel.php
View: application...
Cesta de la compra, con la posibilidad de actualizar la misma estableciendo la
cantidad para cada producto.
Librería: libr...
Libros en formato RSS
Model: applicationmodelslibrosmodel.php
View: applicationviewslibrosrss.php
Controller:applicationco...
Código generado RSS
Se genera un xml que contiene las siguientes etiquetas:
Cabecera: donde ira la versión de XML y la cod...
Comentarios de un libro por parte de usuarios registrados
Model: applicationmodelslibrosmodel.php
View: applicationviewsli...
Categorias,SubCategorias ,Canales RSS
Model: applicationmodelscategoriasrssmodel.php
View: applicationviewslibrosbusquedaR...
applicationmodelscategoriasrssmodel.php

Subcategorias
applicationviewslibrosbusquedaRss.php

applicationcontrollersfeed.p...
applicationmodelscategoriasrssmodel.php

Canales
applicationviewslibrosbusquedaRss.php

applicationcontrollersfeed.php
applicationmodelscategoriasrssmodel.php
Mapa usuarios
Permite localizar en un mapa de google los usuarios registrados
Model: applicationmodelsusuariosmodel.php
Vi...
Librería DHTML History
Javascript:js dhtmlHistory.js

Librería que permite mantener la funcionalidad de los botones atrás ...
Proyecto Flex mediante amfphp
Amfphp permite conectar PHP con Flash y Flex mediante llamadas remotas.
Estructura de amfphp...
Por ejemplo para obtener el listado de libros desde flex se emplea la clase
LibrosService que contendrá un método para cad...
Como resultado de la llamada al método librosService.listarPortada() ,tal como
está definido en el atributo result de la e...
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 etique...
Combos autores y editoriales

Creamos un comboBox donde sus datos provienen de una colección de datos
del tipo ArrayCollec...
Validaciones en el formulario
Actualizar un libro mediante double click sobre el Datagrid

Clase para encapsular los datos del libro
compLibro.as

A la ...
srcviewsLibroForm.mxml
Administración de Libros
srcscreensappscreensLibrosScreen.mxml
srcformsLibroForm.mxml
srcformsNuevoLibroForm.mxml

Registr...
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
srcformsTagForm.mxml

Asignar un tag al libro mediante drag&drop
Eliminar un tag del libro mediante drag&drop
Comentarios

srcscreensappscreensComentariosScreen.mxml

Eliminación de comentarios con confirmación
Editoriales
srcscreensappscreensEditorialesScreen.mxml

Pantalla de login

srcscreensLoginScreen.mxml
Usuarios
srcscreensappscreensUsuariosScreen.mxml
Detalle de un Libro

srcformsLibroForm.mxml

Definimos el objeto librosService donde se declaran los métodos que
están def...
Insertar mediante drag &drop desde la tabla autores
En la pantalla de detalle de un libro se ha añadido la opción de
relac...
Eliminar mediante drag &drop desde la tabla libros_autores
Validaciones y formatos de datos en LibroForm
Listado de autores
srcscreensappscreensAutoresScreen.mxml
Autocompletado

Filtro por nombre de autor
Insertar/Modificar autor
srcformsAutorForm.mxml

Objeto autoresService
Validación
Actualizar autor

Eliminar autor desde listado
Una vez realizada la consulta y obtenido el listado, tenemos un botón
Elimi...
Biografia autor mediante tooltip
Se crea un nuevo componente que pinte la descripción dentro de la caja.
srccompbiografiaR...
Galería de autores
srccompgaleriaAutores.mxml
srcdataautores.xml
Proyecto web Php-MySQL-Ajax-Flex
Proyecto web Php-MySQL-Ajax-Flex
Proyecto web Php-MySQL-Ajax-Flex
Proyecto web Php-MySQL-Ajax-Flex
Proyecto web Php-MySQL-Ajax-Flex
Proyecto web Php-MySQL-Ajax-Flex
Proyecto web Php-MySQL-Ajax-Flex
Proyecto web Php-MySQL-Ajax-Flex
Proyecto web Php-MySQL-Ajax-Flex
Proyecto web Php-MySQL-Ajax-Flex
Próxima SlideShare
Cargando en…5
×

Proyecto web Php-MySQL-Ajax-Flex

3.082 visualizaciones

Publicado el

Proyecto Php-MySQL-Ajax-Flex

Publicado en: Tecnología
1 comentario
2 recomendaciones
Estadísticas
Notas
Sin descargas
Visualizaciones
Visualizaciones totales
3.082
En SlideShare
0
De insertados
0
Número de insertados
3
Acciones
Compartido
0
Descargas
356
Comentarios
1
Recomendaciones
2
Insertados 0
No insertados

No hay notas en la diapositiva.

Proyecto web Php-MySQL-Ajax-Flex

  1. 1. Proyecto Php-MySQL-Ajax-Flex José Manuel Ortega Candel jmoc25@gmail.com
  2. 2. Estructura del proyecto con CodeIgniter
  3. 3. Modelo Entidad-Relación.Esquema de la base de datos
  4. 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. 5. Código javascript
  6. 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. 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. 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. 9. Ejecución Con filtro: Sin resultados:
  10. 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. 11. Detalle del libro Model: applicationmodelslibrosmodel.php View: applicationviewslibrosver.php Controller:applicationcontrollerslibros.php Javascript: jstabs.js applicationmodelslibrosmodel.php applicationcontrollerslibros.php
  12. 12. 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
  13. 13. Libros favoritos Model: applicationmodelslibrosmodel.php View: applicationviewsusuariosfavoritos.php Controller:applicationcontrollerslibros.php Javascript: jsfavoritos.js applicationmodelslibrosmodel.php
  14. 14. 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
  15. 15. Genera el combo de ciudades mediante consulta a la base de datos applicationmodelsciudadesmodel.php Vuelve a pintar los datos en el componente
  16. 16. 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
  17. 17. 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
  18. 18. Login usuario Model: applicationmodelsusuariosmodel.php View: applicationviewsusuariosloginform.php Controller:applicationcontrollersusuarios.php Javascript: jsusuarios_loginform.js Javascript: jsusuarios_loginform.js
  19. 19. 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
  20. 20. Autocompletado en título Autocompletado en tag
  21. 21. Usuarios activos Model: applicationmodelsusuariosmodel.php View: applicationviewslibroslistar.php Controller:applicationcontrollersusuarios.php Javascript: js usuarios_activos.js js usuarios_activos.js applicationcontrollersusuarios.php
  22. 22. applicationmodelsusuariosmodel.php
  23. 23. 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
  24. 24. 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
  25. 25. Libros en formato RSS Model: applicationmodelslibrosmodel.php View: applicationviewslibrosrss.php Controller:applicationcontrollersfeed.php applicationcontrollersfeed.php applicationmodelslibrosmodel.php applicationviewslibrosrss.php
  26. 26. 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.
  27. 27. Comentarios de un libro por parte de usuarios registrados Model: applicationmodelslibrosmodel.php View: applicationviewslibroscomentar.php Controller:applicationcontrollerslibros.php applicationmodelslibrosmodel.php
  28. 28. Categorias,SubCategorias ,Canales RSS Model: applicationmodelscategoriasrssmodel.php View: applicationviewslibrosbusquedaRss.php Controller:applicationcontrollersfeed.php Categorias applicationviewslibrosbusquedaRss.php applicationcontrollersfeed.php
  29. 29. applicationmodelscategoriasrssmodel.php Subcategorias applicationviewslibrosbusquedaRss.php applicationcontrollersfeed.php
  30. 30. applicationmodelscategoriasrssmodel.php Canales applicationviewslibrosbusquedaRss.php applicationcontrollersfeed.php
  31. 31. applicationmodelscategoriasrssmodel.php
  32. 32. 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
  33. 33. 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
  34. 34. 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.
  35. 35. 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
  36. 36. 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.*">
  37. 37. Listado de libros en flex con componente Datagrid Buscar por titulo
  38. 38. Buscar por precio mediante slider Componente slider y funciones
  39. 39. Galeria de imágenes
  40. 40. Obtener datos de un libro
  41. 41. 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.
  42. 42. 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.
  43. 43. Validaciones en el formulario
  44. 44. 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.
  45. 45. srcviewsLibroForm.mxml
  46. 46. Administración de Libros srcscreensappscreensLibrosScreen.mxml srcformsLibroForm.mxml srcformsNuevoLibroForm.mxml Registro de un libro con validaciones
  47. 47. Actualizar los datos de un libro
  48. 48. Eliminar un libro con confirmación Subir imágenes de un libro
  49. 49. Eliminar las imagenes arrastrándolas a la papelera Tags de un libro
  50. 50. Crear un nuevo tag srcformsTagForm.mxml Asignar un tag al libro mediante drag&drop
  51. 51. Eliminar un tag del libro mediante drag&drop
  52. 52. Comentarios srcscreensappscreensComentariosScreen.mxml Eliminación de comentarios con confirmación
  53. 53. Editoriales srcscreensappscreensEditorialesScreen.mxml Pantalla de login srcscreensLoginScreen.mxml
  54. 54. Usuarios srcscreensappscreensUsuariosScreen.mxml
  55. 55. Detalle de un Libro srcformsLibroForm.mxml Definimos el objeto librosService donde se declaran los métodos que están definidos en la clase LibrosService
  56. 56. 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}">
  57. 57. Eliminar mediante drag &drop desde la tabla libros_autores
  58. 58. Validaciones y formatos de datos en LibroForm
  59. 59. Listado de autores srcscreensappscreensAutoresScreen.mxml
  60. 60. Autocompletado Filtro por nombre de autor
  61. 61. Insertar/Modificar autor srcformsAutorForm.mxml Objeto autoresService
  62. 62. Validación
  63. 63. 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
  64. 64. Biografia autor mediante tooltip Se crea un nuevo componente que pinte la descripción dentro de la caja. srccompbiografiaRenderer.mxml srcscreensappscreensCustomToolTip.mxml
  65. 65. Galería de autores srccompgaleriaAutores.mxml srcdataautores.xml

×