Buscador en tiempo real con Ajax

Cómo programar un buscador en tiempo real con Ajax PHP MYSQL

VIDEO Cómo programar un buscador en tiempo real con Ajax PHP MYSQL

Para desarrollar un buscador para tu página web necesitas programar en Php, Mysql y Jquery para obtener respuestas en tiempo real con el evento KeyUp


Buscador en tiempo real con Ajax

Cómo programar un buscador en tiempo real con Ajax PHP MYSQL

Tener un buscador en una página web es relevante siempre y cuando nuestro sitio web, tenga una sección dinámica sea un sección de noticias, un blog, etc. y que ademas sean de constante actualización e inserción de publicaciones. Es ahi donde un buscador tiene una razón de existir apropiada.

CONTENIDOS:

  1. QUÉ ES UN BUSCADOR WEB
  • Definición del buscador
  • ¿Cómo funciona el buscador en la página web?
  1. PLANTEAMIENTO DEL PROYECTO
  2. CREACIÓN DE LA BASE DE DATOS
    • Base de datos
    • Tabla de usuarios
  3. CREANDO NUESTRA APLICACIÓN WEB
    • Adicionando los recursos
    • Diseñando la interfaz
  4. PROGRAMANDO LA INTERACTIVIDAD
    • Escribiendo la función Jquery
    • Obteniendo resultados a través de la consulta en MYSQL
  5. CONCLUSIÓN

 

QUÉ ES UN BUSCADOR WEB

Definición de un Buscador Web

Son aquellos buscadores de contenidos que requieren de una estrategia de búsqueda a partir de palabras claves o frases, buscan y recuperan la información que responde a esa descripción. Bien partiendo de esta definición podemos sintetizar que es una sección de nuestra página web destinada a proporcionar información de acuerdo a una consulta realizada por el usuario.

¿Cómo funciona el buscador en la página web?

Pues, se trata de una caja de texto generalmente de color blanco, que esta en espera de leer una letra o letras, el usuario teclea o ingresa las  letras de sus búsqueda, estas se envian al servidor, realizar un consulta en la base de datos y retornar un resultado que puede ser con los datos encontrados coincidentes o de  lo contrario no retorna nada.

PLANTEAMIENTO DEL PROYECTO 

Quiere decir ¿para qué vamos a construir el buscador? debemos definir la finalidad, para ello  vamos a suponer que tenemos una web de consulta de usuarios, donde  el operador de la página web podrá realizar consultar para obtener el nombre de un usuario. Durante el proceso de desarrollo tenemos actividades como la creación de la base de datos, la creación de la aplicación web, y el diseño de la interfaz.

CREACIÓN DE LA BASE DE DATOS

BASE DE DATOS 

La base de datos solo contendrá una sola tabla, para comenzar abrimos el XAMPP, y creamos una base de datos llamada buscador.

TABLA USUARIOS

Agregamos una única tabla llamada usuarios., esta solo tendrá  3 campos: id, nombre y bio, el primer campo se define como la clave primaria de la tabla. El código de la consulta para crear la tabla te lo muestro a continuación:

CREATE TABLE `usuarios` (
  `id` int(11) NOT NULL,
  `nombre` varchar(100) NOT NULL,
  `bio` text NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

ALTER TABLE `usuarios`
  ADD PRIMARY KEY (`id`);

Para gestionar la conexión a la base de datos y realizar las consultas necesarias trabajaremos con la siguiente clase PHP del link clase de conexión y consulta MYSQL en php

CREANDO NUESTRA APLICACIÓN WEB

Entonces, usando sublime text creamos un documento html que contendrá la columna de nuestra app y agregamos dos recursos dentro del head.

ADICIONANDO LOS RECURSOS

Aqui integramos librerías y estilos para nuestro proyecto, esto debe de incluirse dentro de la etiqueta head de nuestra página web.

<link rel="stylesheet" href="lib/bootstrap.min.css">
<script src="lib/jquery.js"></script>
  • La librería responsive de Bootstrap, estilos que nos permite aplicar un diseño adecuado al proyecto.

  • Y la librería Jquery para darle interactividad, esta última realmente es la más importante para el funcionamiento del buscador

DISEÑANDO LA INTERFAZ

Aqui agregamos los elementos html como son el input que es el más importante, para ello usamos un componente de bootstrap

<div class="input-group mb-3">
          <input type="text" class="form-control" id="txtbusca" placeholder="Buscar" aria-label="Buscar" aria-describedby="basic-addon2">
       <div class="input-group-append">
          <span class="input-group-text" id="basic-addon2">BUSCAR</span>
        </div>
</div>
<div class="salida"></div>

Entonces al input text le agregamos un identificador llamado txtbusca, ademas de crear un div con el id salida que el que se llenará con los resultado de la consulta.

PROGRAMANDO LA INTERACTIVIDAD

Escribiendo la función Jquery

Aqui vamos a programar la interactividad con Javascript usando la librería Jquery, explicando la funcionalidad tenemos un input text con el id txtbusca  con jquery escuchamos cada vez que se presiona una tecla cualquiera, esta acción lanza el evento keyup que captura el value es decir el caracter digitando en el input, con el método ajax lo enviamos a un documento php llamado salida.php, donde se realiza una consulta que retorna las coincidencias con la consulta. y se muestran en la web.

Código Jquery.

$(document).ready(function(){
         $("#txtbusca").keyup(function(){
              var parametros="txtbusca="+$(this).val()
              $.ajax({
                    data:  parametros,
                  url:   'salida.php',
                  type:  'post',
                    beforeSend: function () { },
                    success:  function (response) {                 
                        $(".salida").html(response);
                  },
                  error:function(){
                       alert("error")
                    }
               });
         })
})

En el método success mostramos o cargamos lo que retorna nuestro ajax, en el div con  la clase .salida donde estarán las respuestas de la consulta de salida.php.

Obteniendo resultados a través de una consulta MYQL.

Es script recibe la petición enviada desde la función Jquery lo procesa y retorna los resultados.  Veamos el código salida.php

<?php 
if(isset($_POST['txtbusca'])):
  include "conexion.php";
   $user=new ApptivaDB();  
    $u=$user->buscar("usuarios"," nombre like '%".$_POST['txtbusca']."%'");
    $html="";
 foreach ($u as $v)
      $html.="<p>".$v['nombre']."</p>";
 echo $html;
else:
    echo "Error";
endif;
 ?>
  1. Se verifica si existe la peticion http de txtbusca,
  2. Si es asi, incluimos la conexiòn a la base de datos y los instanciamos
  3. Realizamos una consulta a la tabla usuarios donde nombre tenga una coincidencia con el texto del post txtbusca.
  4. Creamos una variable de texto para concatenar los resultados parseados en párrafos con la estructura foreach
  5. Luego pintamos el html.
  6. Si la verificación de la petición http falla, entonces muestra un mensaje de error.

CONCLUSIÓN FINAL

Entonces como se ha visto, es una aplicación web, sencilla donde hemos implementando Ajax para refrescar una sección de la página web sin la necesidad de recargar todo el documento. El buscador se puede optimizar más pero ello depende de los requerimientos del proyecto que esten desarrollando. Hasta un próximo tutorial de programación web. Recuerda que puedes seguirnos en nuestro canal de Youtube, estamos con Codea

 


Visitado 2216 veces | Publicado hace 9 meses

; CURSO ANDROID BÁSICO

© Todos los derechos reservados | codea.app | Cursos de programación web y aplicaciones móviles | Arequipa - Perú 2019