El verdadero rico no es el que tiene mucho dinero sino el que tiene tiempo para estar con la gente que quiere y hacer lo que le gusta.

Aplicacion completa en CakePHP - Buscador con autocompletado

Aplicación completa en CakePHP – Buscador con autocompletado

Publicado el 16 Marzo, 2015 por | Categoría:

En el anterior artículo hemos complementado nuestro módulo de ordenes del proyecto restaurante, en concreto hemos desarrollado una funcionalidad para poder listar dichas ordenes, en este nuevo artículo que desde luego viene acompañado con un nuevo video quiero tratar otro tema y funcionalidad que es muy importante dentro de una aplicación y se trata de la integración de un buscador dentro de nuestro proyecto restaurante. Gracias a un buscador nosotros podemos ir filtrando los datos que requerimos de nuestra aplicación, en el caso concreto de nuestro proyecto vamos a realizar una búsqueda de los platillos que comprenden el restaurante.

Pero este no será un buscador común y corriente ya que vamos a implementar un autocomplete al momento que el usuario ingrese el termino de su búsqueda, este autocompletado ayudará al usuario de una manera mas dinámica a filtrar los datos del platillo a buscar. Para ello vamos a hacer uso de una magnifica librería como ser jQueryUI que es un conjunto de componentes que contiene efectos, widgets y temas que nos ayudará a hacer mas interactivas nuestras aplicaciones web, nos apoyaremos de esta librería para poder generar la funcionalidad de autompletado.

Durante este y el próximo video vamos a ir desarrollando un buscador con autocompletado desde cero con jQueryUI y CakePHP. En esta primera parte vamos a desarrollar el formulario para nuestro buscador, posteriormente vamos a dirigirnos a la web oficial de jQueryUI para descargar la librería, vamos a aprender a realizar una descarga personalizada ya que solo necesitaremos el componente autocomplete y eso es importante así no estamos obligados a cargar con toda la librería en nuestra aplicación. Seguido de esto vamos a trabajar con jQuery, AJAX y las opciones que nos traer jQueryUI para trabajar de forma asíncrona e ir enviando nuestras solicitudes de la búsqueda a nuestro controlador en CakePHP para que este posteriormente mande la respuesta en formato JSON con toda la información solicitada.

Sin más te dejo con el video 19 donde te hablo de todo lo mencionado anteriormente y otras características más puestas a la práctica:

Ahora dime tú, qué te pareció esta primera parte desarrollando nuestro buscador con autocompletado? me agradaría mucho que me dejes tu comentario acá abajo contándome como te fue a ti. En el próximo artículo te iré mostrando la segunda parte donde concluiremos el desarrollo de nuestro buscador generando los resultados de los platillos en base a la búsqueda que realice el usuario.

Para finalizar lo único que te pido por favor es que compartas tanto este artículo como el video para que así mi trabajo llegue a muchas personas y puedan ser beneficiadas del mismo. Comparto el repositorio oficial en GitHub de todo lo avanzado en el video  para que tu mismo puedas probarlo, espero te sea muy útil 8-)

Sigue todas las lecciones del curso AQUÍ.

Saludos!!!

firma emm

 


Repositorio oficial

Por favor comparte esta lección:

¿Te gustó el artículo? ¡Suscríbete ahora mismo!

Recibe mis últimos artículos, recursos, tutoriales y mucho más.

, ,

Comentarios

  • PABLO

    Buen dia, como no vi donde poder hcaer esta pregunta la hago aqui,
    como ves la nueva cake 3.0 ? pareceria tener muchisimos cambios no ?
    cuando recomiendas comenzar a usarla ?

    • Edson Mollericona Marín

      Hola Pablo, acabo de escribir un artículo completo donde hablo del lanzamiento de la nueva version de CakePHP 3, puedes verlo AQUI ahora mismo. Saludos!!!

  • cristian

    ingeniero buenos días, muy interesantes todos los videos, su metodología excelente y muy practica, ing me gustaría a titulo personal que pronto pudiéramos implementar las ACL en esta aplicación ya que personalmente a mi no me han funcionado. muchísimas gracias por compartir sus conocimientos.

    • Edson Mollericona Marín

      Hola Cristian, ACL podrías utilizar en casos donde requieres de permisos bastante personalizados, porque no pruebas con el componente de autenticación que trae CakePHP, pronto estaré hablando de eso. Saludos!!!

  • PABLO

    perdon por retomar un tema viejo, pero me sale un error que no se bien como solcionar
    mirando la consola de desarrollador en el chrome, me sale el siguiente error, alguna ayuda ????

    Uncaught ReferenceError: basePath is not defined$.autocomplete.source @ search.js:9e.widget._search @ jquery-ui.min.js:9(anonymous function) @ jquery-ui.min.js:6e.widget.search @ jquery-ui.min.js:9(anonymous function) @ jquery-ui.min.js:6(anonymous function) @ jquery-ui.min.js:9i @ jquery-ui.min.js:6

    • Edson Mollericona Marín

      Hola Pablo, la variable basePath no esta siendo encontrada y eso lo definimos en el layout principal de la aplicación, esta variable contiene la ruta raiz de la aplicación, verifica si lo tienes definido. Saludos

  • saludos.. podrias poner el código ..del capitulo 19 porque no me funciona con mi código..

    y con respecto a donde se declara el base path tube el mismo problema pero en el video 13 min 40:00 esta declarado
    este es el código que mencionas … en el default.ctp

    var basePath= “”

    muy padre tus videos sigue asi.. gracias..

    • Edson Mollericona Marín

      Hola Antonio, al final del artículo encuentras el enlace al repositorio del proyecto, de todas formas te lo facilito por acá https://github.com/edsonmgoz/restaurante . Tal como tu lo indicas la variable basePath lo definimos en el layout default.ctp para tener acceso a la ruta raíz desde cualquier script que creamos. Saludos y gracias por seguir mi trabajo 8-)

  • Saludos.. una duda no me funciona el codigo de autocompletar.. con jquery,, Json si me regresa los datos.. pero no puedo hacer que me autocomplete…
    ojala pudieras ayudarme ..
    http://stackoverflow.com/questions/31125085/why-using-jquery-ui-renderitem-autocomplete-in-cakephp-2-0-dont-render

    • Edson Mollericona Marín

      Hola Antonio según veo tu pregunta en stackoverflow primeramente en tu archivo search.js, en url:basePath+”Students/searchjson” debes definir el controlador con minúscula, y en la parte donde estás generando la lista que muestra el autocomplete no estas cerrando correctamente la etiqueta img < / > , lo correcto sería /> . Espero que con esos detalles ya puedas solucionar tu problema de lo contrario revisa bien el código del repositorio porque pueden ser otros detalles como los que te mencione por lo cual no funciona correctamente el autocomplete. Saludos.

  • Kike Ramirez

    hola Ingeniero buen dia, estoy tratando de usar este video tutorial para poner un buscador en un proyecto escolar de recepcion de clientes, hice todo tal cual su video, solo cambie platillos por clientes que son mis variables pero cuando actualizo mi pagina me da este error
    Error: Unsupported operand types
    File C:xampphtdocsjsystemvendorcakephpcakephpsrcViewHelperHtmlHelper.php
    Line: 436
    Le agradeceria mucho su ayuda

    • Edson

      Tal como lo dice, el Helper HTML no soporta la sintaxis que estas colocando, puedes revisar la documentación para verificar si lo estas haciendo correctamente o clonar el repositorio del proyecto que se realizó en el curso. Saludos!