Buscador en tiempo real con Ajax

¡Hola!. Desarrollar o mejor dicho programar un buscador puede resultar sencillo; claro para un programador, pero probablemente para alguien que esta empezando en el desarrollo de aplicaciones o páginas web puede resultar un poco dificil, es por ello que hice este pequeño tutorial.

CONTENIDOS:

1. ¿QUÉ ES UN BUSCADOR WEB?
   • Definición de un buscador
2. ¿CÓMO FUNCIONA UN BUSCADOR EN MI PÁGINA WEB?
3. PLANTEAMIENTO DEL PROYECTO
4. CREACIÓN DE LA BASE DE DATOS
   • Base de datos
   • Tabla de usuarios
5. CREANDO NUESTRA APLICACIÓN WEB
   • Adicionando los recursos
   • Diseñando la interfaz
6. PROGRAMANDO EL BUSCADOR CON JQUERY
   • Escribiendo la función Jquery
7. PROGRAMANDO EL BUSCADOR CON JAVASCRIPT NATIVO
   • Obteniendo resultados a través de la consulta en MYSQL
8. CONCLUSIÓN Y RECOMENDACIONES

¿Qué es buscador? una breve introducción 

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.

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

Buscador con respuesta en tiempo real

Vayamos al grano "crear un buscador con respuesta en tiempo real" para una página web require de conocimientos básicos de programación web, pero ¿Qué conocimientos? te estarás preguntando ¿Conocimientos en qué?, te respondo con una lista sencilla y numerada:

1. Html. Si, el lenguaje de marcado con la que está basada toda la web, tienes que dominarla a nivel intermedio siquiera.
2. Css.- Buenos este lenguaje te permite poner bonito o mejor dicho que tu aplicación tenga una apariencia agradable
3. Javascript.- Este si es un lenguaje propiamente. Dominarlo te va a permitir crear la interactividad, en este caso lo usamos  en el Frameworks Jquery, usamos su método de peticiones asíncronas que se denomina AJAX.
4. Php.- Este lenguaje de programación se usa del lado del servidor, es quién recibe la petición y retorna los datos extraidos de la base de datos Mysql.
5. Mysql.- Es donde de almacena la información en forma ordenada para un rápido acceso, es uno de los gestores de base de datos más usados.

¿CÓMO FUNCIONA UN BUSCADOR 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 su búsqueda, ésta cadena de texto se envia al servidor, realiza una consulta en la base de datos y retorna un resultado que puede ser con los datos coincidentes o de lo contrario no retorna nada, solo un mensaje que no existen datos coincidentes.

Y ¿Cómo funciona este buscador web?

Para que se pueda implementar un buscador en un sitio web es necesario tener la información almacenada normalmente en una Base de Datos MySql, para extraerla sin recargar toda la página es necesario implementar una arquitectura AJAX esta funcionalidad solo refrescará una parte de la página web para mostrar los resultados encontrados.

PLANTEAMIENTO DEL PROYECTO 

Quiero decir  con esto ¿para qué se va construir el buscador?, es decir debes definir la finalidad, adelantandome un poco, voy a suponer que tenemos una web de consulta de usuarios, donde  el operador de la página web quiere realizar consultas para obtener el nombre de un usuario, ésta actividad la quiere hacer muy rápidamente.

Fases del Desarrollo

Entonces para desarrollar el proyecto definimos tres fases o etapas: que se ejecutan durante el proceso de desarrollo

1. La creación de la base de datos. Para gestionar el almacenamiento de los datos.
2. La creación de la aplicación web. La lógica de toda la app
3. El diseño de la interfaz. Aqui es lo que se ve en la pantalla

Tecnologías que usaremos

Usaremos tecnologías web como:

• HTML propio la maquetación web
• Javascript con el  framework Jquery
• Bootstrap para los estilos CSS

Estructura de archivos

Los archivos que se utilizarán durante el desarrollo del proyecto web tienen la siguiente estructura :

• lib 
  • bootstrap.min.css
  • jquery.js
• conexion.php
• index.php
• salida.php 

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 de 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, tambien podemos agregarla directamente desde Google link a Jquery

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 EL BUSCADOR CON JQUERY

Escribiendo la función de búsqueda con la librería 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.

PROGRAMANDO EL BUSCADOR CON JAVASCRIPT

Escribiendo la funcion de búsqueda con Javascrip puro

Para ello vamos a emplear la API nativa de Javascript Fetch, veamos el código 

Código Javascript:

document.getElementById("buscar").addEventListener("keyup", e=>{
var parametros = { txtbusca : e.target.value }
fetch("salida.php",{
     method:'POST',
     body: JSON.stringify(parametros),
    dataType: "json",
     headers:{
        'X-Requested-With': 'XMLHttpRequest',
        'Accept' : 'application/json',
        'Content-Type' : 'application/json' 
     }
  }).then(response => {
    return response.json()
  }).then(data =>{ 
    salida.innerHTML = data
  }).catch(error =>console.error(error));
})

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 Y RECOMENDACIONES

Entonces, finalmente crear una buscador en tiempo real para un sitio web, como se ha visto, es una aplicación web, sencilla cuando usamos la tecnología Ajax para refrescar una sección de la página web sin la necesidad de recargar todo el documento. El buscador que he desarrollado se puede optimizar más, pero ello depende de los requerimientos del proyecto que estás desarrollando.

¿Qué puedo recomendarte?

• Para poder desarrollar este proyecto, es necesario que realmente tengas conocimientos de básicos a intermedios en programación web. Entonces empapáte de las tecnologías básicas de la web como son Html, Css y Javascript y del lado del servidor PHP y Mysql.
• Probablemente sea una app básica, pero cumple su funcionalidad,  se puede optimizar mucho más, podrías solo usar Javascript puro. ello te ayudaría en la velocidad para el SEO o posicionamiento web.

¿QUIERES VER OTRA VERSIÓN DEL BUSCADOR  CON LARAVEL Y JAVASCRIPT?, talvez te puede interesar una versión con el Framework PHP de moda Laravel  y usando solo Javascript con la API nativa fetch en el siguiente link Buscador Laravel en tiempo real con JS puedes encontrar más información y el código del desarrollo.

Hasta un próximo tutorial de programación web. Recuerda que puedes seguirnos en nuestro canal de Youtube, estamos con Codea

Leido 42380 veces