Post on 18-Nov-2014
description
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