Buscar información de la base de datos en tiempo real con Laravel, JavaScript y MySQL
Hola developers hoy en esta sección vamos a aprender a crear un buscador que permita obtener información de la base de datos en tiempo real con Laravel, Javascript, Bootstrapt 5 y MySQL. Al empezar a escribir en el campo de buscar se ejecutará la función que realizará la petición al backend para obtener los datos solicitados.
Autor: rogercode. Full stack developerEste proyecto esta diseñado para los developers que necesitan obtener información de la base de datos en tiempo real al momento de ir escribiendo la palabra en el campo de búsqueda y mostrar el resultado en una lista desplegable.
Codigo fuente de los archivos utilizados para el proyecto ☟.
A continuación, se muestran los archivos con el código empleado para buscar información con Laravel.
1 ruta => resources/views/windows.blade.php ☟.
Es la vista principal del proyecto. Para maquetar la interfaz se utiliza las etiquetas html5. Además, se utiliza Bootstrap para agregar el responsivo a la vista. Y para el diseño del buscador se utiliza CSS.
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Laravel</title>
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" href="{{asset('search/css/index.css')}}">
</head>
<body>
<meta name="csrf-token" content="{{ csrf_token() }}">
<div class="container py-5">
<div class="card">
<h5 class="card-header bg-secondary text-white">Buscar información de la base de datos en tiempo real con laravel 8 y JavaScript</h5>
<div class="card-body">
<div class="container">
<div class="row height d-flex justify-content-center align-items-center">
<div class="col-md-8">
<div class="search"> <i class="fas fa-search icon"></i> <input type="text" id="mysearch" class="form-control" placeholder="Buscar un producto"></div>
<ul id="showlist" tabindex='1' class="list-group"></ul>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="{{asset('search/js/search.js')}}" type="module"></script>
</body>
</html>
2 ruta => public/search/css/index.css ☟.
El archivo index.css contiene los estilos de la vista y del buscador.
body{
background-color: #008080;
}
/*input search style*/
.search {
position: relative;
}
.search input {
height: 50px;
text-indent: 25px;
border-radius: 10px;
width: 90%;
}
.search input:focus {
box-shadow: none;
border: 2px solid #98FB98;
box-shadow: 0 0 10px #008080;
}
.search .fa-search {
position: absolute;
top: 16px;
left: 16px;
}
.icon{
color: #008080;
}
/*style list products*/
.list-group-item{
width:622px;border:1px solid #f1f1f1;
}
.flex-row{
border:1px solid #ccd2db;margin-right:-17px;margin-top:-10px;margin-left:-19px;margin-bottom:-10px;
}
.divimg{
border:1px solid #ccd2db;
}
3 ruta => public/search/js/search.js ☟.
En el archivo search.js se importa el módulo search que contiene el código necesario para enviar la información al backend y devolver los resultados en formato json.
import {search} from "./export_search.js";
const mysearchp = document.querySelector("#mysearch");
const ul_add_lip = document.querySelector("#showlist");
const myurlp ="/myurl";
const searchproduct = new search(myurlp,mysearchp,ul_add_lip);
searchproduct.InputSearch();
4 ruta => app/http/controllers/SearchController.php ☟.
El controlador SearchController.php contiene una función llamada show que recibe como parámetro los datos que se están escribiendo en el buscador. Esta función se encarga de realizar la petición a la base de datos y regresar el resultado al frontend.
namespace AppHttpControllers;
use IlluminateHttpRequest;
use Response;
use DB;
class SearchController extends Controller
{
public function show(Request $request)
{
$data = trim($request->valor);
$result = DB::table('products')
->where('name','like','%'.$data.'%')
->orwhere('barcode','like','%'.$data.'%')
->limit(5)
->get();
return response()->json([
"estado"=>1,
"result" => $result
]);
}
}
5 Backup de la base de datos en MySQL ☟.
Puedes importar el backup a tu base de datos y empezar a probar el buscador.
DROP TABLE IF EXISTS 'productos';
CREATE TABLE 'productos' (
'id' bigint unsigned NOT NULL AUTO_INCREMENT,
'nombre' varchar(255) COLLATE utf8mb4_unicode_ci NOT NULL,
'barcode' varchar(255) COLLATE utf8mb4_unicode_ci NOT NULL,
'precio_compra' decimal(11,2) NOT NULL,
'precio_venta' decimal(11,2) NOT NULL,
'imagen' varchar(255) COLLATE utf8mb4_unicode_ci NOT NULL,
'created_at' timestamp NULL DEFAULT NULL,
'updated_at' timestamp NULL DEFAULT NULL,
PRIMARY KEY ('id')
);
/*Data for the table 'products' */
insert into 'productos'('id','nombre','barcode','precio_compra','precio_venta','imagen','created_at','updated_at') values
(1,'Cargador para laptop','7898994350',400.00,550.00,'cargador.jpg',NULL,NULL),
(2,'Disco duro para laptop','7898994351',800.00,1500.00,'disco.jpg',NULL,NULL),
(3,'Memoria USB de 32 GB','7898994352',120.00,200.00,'usb.jpg',NULL,NULL),
(4,'Teclado grande con teclas flexibles','7898994349',300.00,350.00,'teclado.jpg',NULL,NULL);
5 Imagen del buscador en tiempo real con Laravel ☟.
