• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Proyecto web Php-MySQL-Ajax-Flex
 

Proyecto web Php-MySQL-Ajax-Flex

on

  • 855 views

Proyecto Php-MySQL-Ajax-Flex

Proyecto Php-MySQL-Ajax-Flex

Statistics

Views

Total Views
855
Views on SlideShare
855
Embed Views
0

Actions

Likes
0
Downloads
79
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Proyecto web Php-MySQL-Ajax-Flex Proyecto web Php-MySQL-Ajax-Flex Document Transcript

    • 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 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
    • 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
    • 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.
    • Ejecución Con filtro: Sin resultados:
    • 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.
    • Detalle del libro Model: applicationmodelslibrosmodel.php View: applicationviewslibrosver.php Controller:applicationcontrollerslibros.php Javascript: jstabs.js applicationmodelslibrosmodel.php applicationcontrollerslibros.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: librariesCarro_Library.php View: applicationviewslibroslistar.php Controller:applicationcontrollerscesta.php applicationcontrollerslibros.php Javascript: jscesta.js
    • Libros favoritos Model: applicationmodelslibrosmodel.php View: applicationviewsusuariosfavoritos.php Controller:applicationcontrollerslibros.php Javascript: jsfavoritos.js applicationmodelslibrosmodel.php
    • 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
    • Genera el combo de ciudades mediante consulta a la base de datos applicationmodelsciudadesmodel.php Vuelve a pintar los datos en el componente
    • 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
    • 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
    • Login usuario Model: applicationmodelsusuariosmodel.php View: applicationviewsusuariosloginform.php Controller:applicationcontrollersusuarios.php Javascript: jsusuarios_loginform.js Javascript: jsusuarios_loginform.js
    • 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
    • Autocompletado en título Autocompletado en tag
    • Usuarios activos Model: applicationmodelsusuariosmodel.php View: applicationviewslibroslistar.php Controller:applicationcontrollersusuarios.php Javascript: js usuarios_activos.js js usuarios_activos.js applicationcontrollersusuarios.php
    • applicationmodelsusuariosmodel.php
    • 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
    • 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
    • Libros en formato RSS Model: applicationmodelslibrosmodel.php View: applicationviewslibrosrss.php Controller:applicationcontrollersfeed.php applicationcontrollersfeed.php applicationmodelslibrosmodel.php applicationviewslibrosrss.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: applicationmodelslibrosmodel.php View: applicationviewslibroscomentar.php Controller:applicationcontrollerslibros.php applicationmodelslibrosmodel.php
    • Categorias,SubCategorias ,Canales RSS Model: applicationmodelscategoriasrssmodel.php View: applicationviewslibrosbusquedaRss.php Controller:applicationcontrollersfeed.php Categorias applicationviewslibrosbusquedaRss.php applicationcontrollersfeed.php
    • applicationmodelscategoriasrssmodel.php Subcategorias applicationviewslibrosbusquedaRss.php applicationcontrollersfeed.php
    • applicationmodelscategoriasrssmodel.php Canales applicationviewslibrosbusquedaRss.php applicationcontrollersfeed.php
    • applicationmodelscategoriasrssmodel.php
    • 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
    • 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 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.
    • srcviewsLibroForm.mxml
    • Administración de Libros srcscreensappscreensLibrosScreen.mxml srcformsLibroForm.mxml srcformsNuevoLibroForm.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 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 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 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 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. srccompbiografiaRenderer.mxml srcscreensappscreensCustomToolTip.mxml
    • Galería de autores srccompgaleriaAutores.mxml srcdataautores.xml