La barra de búsqueda de Laravel permite a tus usuarios encontrar rápidamente respuestas a sus consultas de búsqueda. Si diriges un blog o un sitio de comercio electrónico bien desarrollado con cientos de páginas categorizadas, es posible que a tus clientes les resulte excepcionalmente problemático descubrir lo que buscan.
Piensa en la búsqueda de Laravel como una forma de evitar que los clientes se queden atascados en un laberinto de navegación. En caso de que no puedan descubrir una ruta sensata a seguir, volverán a los métodos convencionales guiados.
También te puede gustar: Construye una Caja de Búsqueda en Vivo Usando PHP, MySQL Y AJAX
¡Experimenta el alojamiento Laravel sin fisuras con Cloudways!
Mejora tu experiencia Laravel con el hosting gestionado de Cloudways: donde la experiencia se une a un rendimiento excepcional.
Requisitos previos
Antes de seguir adelante, asumo que tienes una aplicación Laravel instalada en un servidor. Para el propósito de este artículo, estoy utilizando:
- Entorno Linux/Unix o WAMP/XAMPP
- Laravel 5.5
- PHP 7.1
- MySQL
- Servidor web (Apache, NGINX o servidor web PHP integrado para pruebas)
Para cumplir todos los requisitos, he instalado Laravel en el servidor Laravel de Cloudways porque tiene todo lo que necesitaré para este proyecto. Si no tienes cuenta en Cloudways, regístrate gratis.
Necesidad de Laravel Live Search
El formulario de búsqueda de Laravel ofrece múltiples ventajas sobre los métodos convencionales de búsqueda:
- Los posibles resultados empiezan a aparecer cuando el usuario introduce su término de búsqueda
- La barra de búsqueda de Laravel empieza a filtrar los resultados a medida que el usuario sigue escribiendo
- Los usuarios pueden eliminar los caracteres adicionales para ver una gama más amplia de resultados
- Los usuarios no necesitan actualizar la página web después de cada búsqueda
- El tiempo de búsqueda disminuye
Establece las Credenciales de la Base de Datos en .env
Abre la pestaña Aplicaciones en la plataforma Cloudways. En el Detalle de Acceso a la Aplicación, verás las credenciales de la base de datos de tu aplicación. Ahora ve al archivo .env, situado en la carpeta raíz pública de la aplicación y añade allí las credenciales.
DB_CONNECTION=mysql DB_HOST=127.0.0.1 DB_PORT=3306 DB_DATABASE= your.database.name DB_USERNAME= your.database.username DB_PASSWORD= your.database.password
Leer más sobre: Conectando Laravel con la Base de Datos en Tiempo Real Firebase
Crear la migración
Ve a la plataforma Cloudways, y lanza el terminal SSH. Una vez iniciada, ve a la raíz de tu aplicación con los siguientes comandos.
cd applications cd <applicationname>/public_html
Ahora que estás en la carpeta de la aplicación, escribe el siguiente comando para crear la migración del producto.
php artisan make:migration create_products_table
Ahora que ya has creado la migración, ve al archivo database/migration/<date>_create_products_table.php y pega en él el siguiente código.
<?php
use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;
class CreateProductsTable extends Migration
{
/**
* Run the migrations.
*
* @return void
*/
public function up()
{
Schema::create('products', function (Blueprint $table) {
$table->increments('id');
$table->timestamps();
$table->string('Title');
$table->string('Description');
$table->integer('price');
});
}
/**
* Reverse the migrations.
*
* @return void
*/
public function down()
{
Schema::dropIfExists('products');
}
}
Deja de perder el tiempo con los servidores
Cloudways se encarga de la gestión del servidor por ti para que puedas centrarte en crear grandes aplicaciones y mantener contentos a tus clientes.
Ahora que la migración está en marcha, ejecuta el siguiente comando en el terminal:
php artisan migrate
El siguiente paso es la migración del esquema de la tabla a la base de datos, Ve a la base de datos haciendo clic en Lanzar Gestor de Base de Datos, y rellena la tabla con datos ficticios. Para una experiencia de migración sin problemas, considera las ventajas del alojamiento Laravel adaptado a tus necesidades.
Crear el controlador
Ahora que la tabla de la base de datos está lista, el siguiente paso es la creación del controlador. Escribe el siguiente comando en tu terminal.
php artisan make:controller SearchController
Ahora ve a app/Http/controller/SearchController.php y pega en él el siguiente código
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use DB;
class SearchController extends Controller
{
public function index()
{
return view('search.search');
}
public function search(Request $request)
{
if($request->ajax())
{
$output="";
$products=DB::table('products')->where('Title','LIKE','%'.$request->search."%")->get();
if($products)
{
foreach ($products as $key => $product) {
$output.='<tr>'.
'<td>'.$product->id.'</td>'.
'<td>'.$product->Title.'</td>'.
'<td>'.$product->Description.'</td>'.
'<td>'.$product->price.'</td>'.
'</tr>';
}
return Response($output);
}
}
}
}
Leer más sobre: Trabajar con Controladores en Laravel
Ahora vamos a examinar detenidamente este código y a entender lo que ocurre aquí. En primer lugar, he creado una función índice que devuelve la vista (crearé la vista en el siguiente paso). Después, hay otra función search que toma la variable de la barra de búsqueda de Laravel, y la pasa a la llamada AJAX, ejecutando una consulta a la base de datos. Esto obtendrá todos los datos de la base de datos de productos cuyo título coincida con la consulta. Por último, he creado la salida en formato HTML y la devuelvo como respuesta.
Crear la vista
Ahora que el controlador está listo, voy a crear la vista para la barra de búsqueda. Ve a resources/views/search y crea un archivo llamado search.blade.php. A continuación, añade el siguiente código en él.
<!DOCTYPE html>
<html>
<head>
<meta name="_token" content="{{ csrf_token() }}">
<title>Live Search</title>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="panel panel-default">
<div class="panel-heading">
<h3>Products Info </h3>
</div>
<div class="panel-body">
<div class="form-group">
<input type="text" class="form-controller" id="search" name="search"></input>
</div>
<table class="table table-bordered table-hover">
<thead>
<tr>
<th>ID</th>
<th>Product Name</th>
<th>Description</th>
<th>Price</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$('#search').on('keyup',function(){
$value=$(this).val();
$.ajax({
type : 'get',
url : '{{URL::to('search')}}',
data:{'search':$value},
success:function(data){
$('tbody').html(data);
}
});
})
</script>
<script type="text/javascript">
$.ajaxSetup({ headers: { 'csrftoken' : '{{ csrf_token() }}' } });
</script>
</body>
</html>
Leer más sobre: Trabajar con Vistas en Laravel
Ahora echemos un vistazo más profundo en el código y entendamos lo que está ocurriendo aquí.
En la etiqueta head, he creado una metaetiqueta, que permitirá ejecutar la llamada AJAX en el servidor. A continuación, he incluido Bootstrap, CSS y una librería jQuery.
En la etiqueta body he creado una interfaz de usuario sencilla para mostrar la información del producto utilizando CSS de Bootstrap. Y, a continuación, he utilizado un script Ajax. Esta es la parte importante que hay que entender.
El script AJAX recoge el valor de la barra de búsqueda de Laravel en cuanto lo escribes. Envía el valor a la url /search de tu aplicación que ejecutará la segunda función del controlador. Hará la búsqueda en la BD y obtendrá la respuesta en este código AJAX. Una vez recibida, la respuesta se mostrará en formato HTML.
El segundo script AJAX se utiliza para validar el token con el fin de garantizar la ejecutabilidad del script AJAX.
Establecer rutas
Ve a routes/web.php y añade en él el siguiente método de ruta.
Route::get('/','SearchController@index');
Route::get('/search','SearchController@search');
Leer más sobre: Trabajar con Rutas en Laravel
Probar la barra de búsqueda de Laravel en vivo
Ahora que todo está listo, ve a la aplicación y lánzala utilizando la URL de ensayo.
Verás la siguiente interfaz de usuario:
Ahora, para probar la funcionalidad, realiza una búsqueda (puedes empezar con el siguiente ejemplo):
Como puedes ver, cuando introduje la W, la barra de búsqueda empezó a devolver resultados que contenían las coincidencias parciales.
También te puede gustar: Introducción a Laravel Dusk: Probando Todo App
Experimenta un rendimiento de hosting Laravel sin igual con Cloudways
Alojamiento Laravel llevado al siguiente nivel – El alojamiento gestionado de Cloudways ofrece una velocidad y fiabilidad insuperables.
Conclusión
El cuadro de búsqueda actualizado de Laravel search reduce drásticamente las posibilidades de que los visitantes reboten en tu sitio y te ayuda a captar clientes potenciales, lo que lo hace especialmente valioso para las empresas. Además, la búsqueda Laravel Ajax sirve para mejorar tanto la participación de los clientes como las ventas. Aplica con precisión las formas de utilizar la función de la barra de búsqueda de Laravel que se describen en este artículo, ¡y aprovecha los grandes resultados!
Q. ¿Cómo se hace una barra de búsqueda en laravel?
R: Crea una nueva aplicación Laravel con la CLI de Laravel y entra en el registro con los siguientes comandos:
$ laravel new livewire-search && cd livewire-search.
$ composer require livewire/livewire.
$ npx tailwindcss-cli@latest build -o public/css/tailwind.css.
$ php artisan migrate && php artisan db:seed.
Q. ¿Cómo buscar la función en laravel?
R: La mejor manera de buscar una función en laravel se puede completar en 2 sencillos pasos:
- Paso 1: Modifica el método del índice en el controlador del proyecto
- Paso 2: añade el formulario que enviará la solicitud al controlador en index.blade.php
Q. ¿Cómo puedo crear un formulario de búsqueda en laravel?
R: Existen numerosas formas de incluir la funcionalidad de búsqueda en tu sitio Laravel:
- En primer lugar, debes crear un controlador si aún no tienes uno.
- Una vez preparado nuestro controlador, tenemos que incluir una nueva ruta dentro del archivo web.php.
- Ahora, sólo tenemos que incluir un formulario en nuestro archivo search.blade.php.
Shahzeb Ahmed
Un creativo de día (con una taza de té) y un creativo de noche. Ahmad Kamran es redactor de contenidos estacionales y Ejecutivo de Marketing Senior en Cloudways. Puedes encontrarle en su escritorio escribiendo, elaborando estrategias o jugando. Y en caso de que no puedas encontrarle aquí, estará en la montaña o junto a la orilla del río.
