Udhëzues i plotë për kërkimin në kohë reale në Laravel

Informatec Digital » Burime » Udhëzues i plotë për kërkimin në kohë reale në Laravel

Kur filloni të punoni me Laravel dhe keni nevojë për një motor kërkimi në kohë reale që përgjigjet menjëherëËshtë e lehtë të humbasësh midis një mijë qasjeve të mundshme: AJAX me fetch, jQuery, Alpine.js, Scout me Algolia ose Meilisearch, filtrim frontend, etj. Lajmi i mirë është se ekosistemi Laravel tashmë ofron praktikisht gjithçka që ju nevojitet për të krijuar një kërkim të qetë dhe të shpejtë pa humbur kohë.

Në këtë artikull do të shihni se si të mblidheni lloje të ndryshme të kërkimit në kohë reale në LaravelNga plotësimi automatik klasik AJAX te kërkimet me tekst të plotë me Laravel Scout dhe motorë kërkimi si Algolia, Meilisearch, vetë bazën e të dhënave, apo edhe Elasticsearch. Do të shihni gjithashtu alternativa të lehta me Alpine.js për filtrimin e të dhënave direkt në shfletues kur vëllimi i të dhënave është i vogël.

Çfarë është një kërkim në kohë reale në Laravel dhe si funksionojnë bazat?

Ideja që qëndron pas një kërkimi në kohë reale është se, ndërsa përdoruesi shkruan në një fushë tekstiNjë pyetje aktivizohet dhe rezultatet përditësohen pa e ringarkuar faqen. Teknikisht, kjo përfshin tre komponentë kryesorë: backend-in e Laravel-it, JavaScript-in e shfletuesit dhe shkëmbimin e të dhënave në formatin JSON.

Por un lado, Laravel vepron si shtresa e serverit Është përgjegjës për marrjen e kërkesave, interpretimin e parametrave të kërkimit (tekstin e futur), pyetjet në bazën e të dhënave dhe kthimin e një përgjigjeje të strukturuar, zakonisht në formatin JSON. Kjo përgjigje mund të tregojë sukses, gabim ose që nuk u gjetën rezultate.

Në skajin tjetër, JavaScript është përgjegjës për dëgjimin e ngjarjeve të përdoruesit. Në të dhënat e kërkimit, dërgoni kërkesa asinkrone (AJAX) në backend dhe shfaqni të dhënat e kthyera në faqe pa kryer një rifreskim të plotë nga shfletuesi. Kjo mund të bëhet me fetch native, jQuery AJAX ose biblioteka të vogla reaktive si Alpine.js.

Me këtë mekanizëm bazë mund të ndërtoni nga një Autoplotësim i thjeshtë me disa të dhëna, deri në një motor kërkimi të avancuar me tekst të plotë me rëndësi, faqezim dhe filtra, të mbështetur nga biblioteka si Laravel Scout dhe motorë kërkimi të jashtëm të optimizuar për kërkim.

Modeli, rrugët dhe kontrolluesi për një motor kërkimi bazë në kohë reale

Para se të futesh thellë në JavaScript, duhet të sigurohesh që ana e Laravel është e organizuar mirë: një model elokuent për të kërkuar, rrugë të qarta dhe një kontrollues të dedikuar për të menaxhuar logjikën e kërkimit në kohë reale.

Hapi i parë është të keni një model Eloquent që përfaqëson tabelën ku do të kërkoni. Imagjinoni një tabelë vendesh dhe një model të quajtur Vendi Shumë e thjeshtë, pa pulla kohore dhe me caktim masiv të lejuar:

Shembull i një modeli minimal Eloquent për kërkimet:

namespace App\Models;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;

class Pais extends Model
{
use HasFactory;
protected $guarded = [];
public $timestamps = false;
}

Këtu tregohet se modeli Pais ndodhet në hapësirën standarde të emrave Laravel.Trashëgon nga Model dhe ju lejon të caktoni çdo fushë me create() duke e lënë bosh vargun e mbrojtur. Duke çaktivizuar vulat kohore me public $timestamps = false, ju shmangni problemet nëse tabela nuk ka kolonat created_at dhe updated_at.

Hapi tjetër është të përcaktohet rrugët që do të trajtojnë si shfaqjen e motorit të kërkimit ashtu edhe kërkesat AJAXNjë skemë shumë e zakonshme kombinon një rrugë GET për të shfaqur pamjen dhe një rrugë POST të projektuar për të marrë pyetje në kohë reale:

use Illuminate\Support\Facades\Route;
use App\Http\Controllers\BuscadorController;

Route::get('/', function () {
return view('welcome');
});

Route::get('buscador', [BuscadorController::class, 'index']);
Route::post('buscador', [BuscadorController::class, 'buscar']);

Rruga rrënjë kthen një pamje mirëseardhjeje, ndërsa URL-ja /search është i rezervuar për funksionalitetin e kërkimitMetoda index() e kontrolluesit shfaq formularin dhe të dhënat e kërkimit, ndërsa metoda search() përpunon kërkesat asinkrone të dërguara nga shfletuesi.

Në kontrollues mund të zbatoni një model shumë praktik: Përgatitni një varg përgjigjesh të parazgjedhur në rast gabimi dhe ta mbishkruajë atë vetëm kur është me të vërtetë një kërkesë e vlefshme AJAX dhe pyetja ekzekutohet pa probleme.

Kontrolluesi mund të ketë një strukturë e ngjashme për këtë:

namespace App\Http\Controllers;

use App\Models\Pais;
use Illuminate\Http\Request;

class BuscadorController extends Controller
{
public function index()
{
return view('welcome');
}

public function buscar(Request $request)
{
$response = [
'success' => false,
'message' => 'Hubo un error',
];

if ($request->ajax()) {
$data = Pais::where('nombre', 'like', $request->texto.'%')
->take(10)
->get();

$response = [
'success' => true,
'message' => 'Consulta correcta',
'data' => $data,
];
}

return response()->json($response);
}
}

Në këtë pikë ju tashmë keni Cikli i plotë i backend-it: kërkesa hyrëse AJAX, kontrollimi që është AJAX, pyetja me "where like" dhe kufizimi i rezultateve. në një numër të arsyeshëm duke përdorur take(10) për të shmangur mbingarkesën e bazës së të dhënave. Përgjigja dërgohet gjithmonë në JSON, gjë që e thjeshton shumë punën e frontend-it.

Pamja e Blade dhe marrja e JavaScript për kërkim reaktiv

Me modelin, rrugët dhe kontrolluesin gati, është koha për të ndërtuar pjesën e dukshme: një formular me një fushë kërkimi dhe një bllok për të shfaqur rezultatet, plus JavaScript-i përgjegjës për bërjen e kërkesave në sfond.

Pamja e Tehut mund të jetë shumë e thjeshtë, duke u mbështetur në Simbol CSRF të cilën Laravel e injekton për të validuar kërkesat POST dhe në një input kërkimi që është i përshtatshëm për t’u përdorur:

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<strong><meta name="csrf-token" content="{{ csrf_token() }}"></strong>
<title>Laravel</title>
</head>
<body>

<form action="" method="post">
<input type="search" name="texto" id="buscar">
</form>

<div id="resultado"></div>

<script>
window.addEventListener('load', function () {
const buscar = document.getElementById('buscar');
const resultado = document.getElementById('resultado');

buscar.addEventListener('keyup', function () {
fetch('/buscador', {
method: 'post',
body: JSON.stringify({ texto: buscar.value }),
headers: {
'Content-Type': 'application/json',
'X-Requested-With': 'XMLHttpRequest',
'X-CSRF-Token': document.head.querySelector('[name~="csrf-token"][content]').content,
},
})
.then(response => response.json())
.then(data => {
let html = '';
if (data.success) {
html += '<ul>';
for (let i in data.data) {
html += '<li>' + data.data[i].nombre + '</li>';
}
html += '<ul>';
} else {
html += 'No existen resultados';
}
resultado.innerHTML = html;
});
});
});
</script>

</body>
</html>

Në këtë shembull, skripti Dëgjo për ngjarjen keyup në hyrjen e kërkimitÇdo shtypje tasti shkakton një kërkesë për marrjen e të dhënave (fetch) në shtegun /search. Teksti aktual i fushës dërgohet në formatin JSON dhe përfshihen kokat e çelësave si X-Requested-With për të treguar se është AJAX, së bashku me tokenin CSRF për të anashkaluar mbrojtjen vendase të Laravel.

Kur arrin përgjigja, ajo transformohet në JSON dhe gjenerohet në mënyrë dinamike. një listë e vogël HTML me rezultatetose një mesazh si "Nuk u gjetën rezultate" kur pyetja nuk kthen të dhëna. E gjithë kjo pa e ringarkuar faqen, në një mënyrë natyrale për përdoruesin.

Ky model mund të rafinohet më tej me detaje të vogla të UX-it, siç është shtimi i një vonesë (zbritje) midis shtypjeve të tasteve, shfaq një ngarkues ose trajton gabimet e rrjetit për të parandaluar që ndërfaqja të shfaqet e ngrirë kur diçka dështon.

Kërkim i drejtpërdrejtë me Laravel dhe AJAX duke përdorur jQuery

Edhe pse fetch ka fituar shumë terren në ditët e sotme, jQuery AJAX mbetet shumë popullor në projekte të trashëguara ose në ekipe që e kanë tashmë të zbatuar. Ideja është saktësisht e njëjtë: kapni atë që shkruan përdoruesi, bëni një kërkesë asinkrone dhe rifreskoni DOM-in.

Një rrjedhë tipike pune me jQuery në Laravel për kërkim të drejtpërdrejtë zakonisht përfshin këto hapa bazë: përcaktoni një rrugë specifike, krijoni një kontrollues të dedikuar, ndërtoni pamjen Blade me të dhënat e kërkimit Dhe së fundmi, shtoni kodin jQuery që aktivizon AJAX ndërsa shtypet.

Procesi funksionon kështu: kur përdoruesi fillon të shkruajë, jQuery dërgon një pyetje në server me vargun e kërkimit. Laravel filtron informacionin në bazën e të dhënave, kthen një JSON me rezultatet që përputhen dhe jQuery përditëson një kontejner HTML në faqe për të pasqyruar përputhjet, të gjitha brenda pak milisekondash.

Avantazhi i përdorimit të jQuery është se Përmbledh pak a shumë sintaksën e AJAX-it. Dhe është shumë e thjeshtë për t’u lexuar nëse e keni tashmë bibliotekën në projektin tuaj. Megjithatë, po shtoni një varësi shtesë që mund të mos jetë e nevojshme nëse mund të punoni me JavaScript modern dhe fetch native.

Filtrim dhe kërkim në kohë reale në frontend me Alpine.js

Kur të dhënat që do të shfaqen janë relativisht të vogla (për shembull, më pak se 50 artikuj), nuk ia vlen gjithmonë të krijosh një backend me kërkime komplekse. Në këto raste, një opsion shumë i përshtatshëm është Filtro direkt në shfletues me Alpine.js, pa bërë kërkesa te serveri ndërsa përdoruesi shkruan.

Ideja është që të llogaritet paraprakisht një varg kërkimi për secilin element (për shembull, emri, përshkrimi dhe kategoria me shkronja të vogla), të ruhet në një atribut data-search-text dhe të lihet Alpine.js të merret me pjesën tjetër. shfaq ose fshih elementët sipas tekstit të shkruar në një fushë kërkimi.

Komponenti Alpine.js mund të ketë një strukturë të ngjashme me këtë: filtro artikujt

{
search: '',
hasResults: true,
selectedValue: '',
init() {
this.$watch('search', () => this.filterItems());
this.$nextTick(() => this.$refs.searchInput?.focus());
},
filterItems() {
const searchLower = this.search.toLowerCase().trim();
const cards = this.$el.querySelectorAll('.item-card');
let visibleCount = 0;

cards.forEach(card => {
const text = card.dataset.searchText || '';
const isVisible = searchLower === '' || text.includes(searchLower);
card.style.display = isVisible ? '' : 'none';
if (isVisible) visibleCount++;
});

this.hasResults = visibleCount > 0;
},
}

Në pamje, çdo kartë ose rresht i të dhënave do të mbante një atribut teksti-i-kërkimit-të-të-dhënave-me tekstin e përgatitur tashmë me shkronja të voglaPrandaj, filtri reduktohet në një funksion includes() në JavaScript, i cili është shumë i shpejtë për listat e shkurtra:

<input type="search" x-model="search" x-ref="searchInput" placeholder="Buscar..." />
<div>
<div class="item-card" data-search-text="formulario contacto simple">
<h3>Formulario de contacto</h3>
<p>Formulario de contacto simple</p>
</div>
</div>

Për më tepër, mund të shfaqni një bllok gjendjeje bosh vetëm kur Nuk ka rezultate për termin aktual të kërkimit.duke e ftuar përdoruesin të modifikojë tekstin ose të pastrojë fushën me një buton që thjesht e rivendos kërkimin në një varg bosh.

Kjo qasje ka përparësi të qarta: Nuk ka thirrje serveri gjatë kërkimit.Ndërveprimi është praktikisht i menjëhershëm dhe logjika mbetet shumë lokale dhe e lehtë për t'u debuguar. Është perfekt për përzgjedhës të shpejtë, modale të përzgjedhjes së artikujve ose katalogë të vegjël të integruar në një faqe Laravel.

Laravel Scout: Kërkim me tekst të plotë me motorë të specializuar

Kur gjërat bëhen serioze dhe ke nevojë kërkime të shpejta, relevante dhe të shkallëzueshme të tekstit të plotëRruga natyrale në Laravel është Laravel Scout. Scout është një shtresë integrimi që ju lejon të lidhni lehtësisht modelet tuaja Eloquent me motorë kërkimi si Algolia, Meilisearch, bazën tuaj të të dhënave, koleksionet në memorie, apo edhe Elasticsearch përmes kontrolluesve të jashtëm.

Për të filluar me Scout, gjëja e zakonshme është krijoni një projekt të ri Laravel ose ripërdorni një ekzistuesPër ta nisur, përdorni Docker (për shembull, me Laravel Sail) dhe më pas instaloni bibliotekën me Composer. Pasi të keni mbaruar, publikoni skedarin e konfigurimit scout.php dhe rregulloni variablat e mjedisit sipas drajverit që dëshironi të përdorni.

Një rrjedhë tipike pune do të ishte instalimi i Scout me Composer, publikimi i konfigurimit të tij dhe aktivizoni radhën e indeksimit me SCOUT_QUEUE=true Në skedarin .env, sigurohuni që operacionet që kërkojnë shumë burime të përpunohen në sfond, duke përmirësuar kohën e reagimit të aplikacionit. Përveç kësaj, duhet të siguroheni që DB_HOST tregon bazën e të dhënave që po përdorni, gjë që është veçanërisht e rëndësishme nëse përdorni kontejnerë Docker.

Që një model të marrë pjesë në kërkimet e Skautëve, është e nevojshme të Për ta shënuar atë në mënyrë të qartë si të kërkueshme duke shtuar tiparin e KërkueshmePër shembull, nëse keni një model Treni që përfaqëson një tabelë trenash me një fushë titulli, mund ta përcaktoni kështu:

namespace App\Models;

use Illuminate\Database\Eloquent\Model;
use Laravel\Scout\Searchable;

class Train extends Model
{
use Searchable;

protected $fillable = ['title'];

public function searchableAs()
{
return 'trains_index';
}
}

Metoda searchableAs lejon personalizoni emrin e indeksit në motorin e kërkimitNë vend që të përdorë emrin e parazgjedhur të nxjerrë nga modeli, Scout merr përsipër gjithçka. Nga këtu, Scout merret me sinkronizimin e operacioneve të krijimit, përditësimit dhe fshirjes me indeksin e largët ose lokal, varësisht nga drajveri i zgjedhur.

Laravel Scout me Algolia: Kërkim SaaS me shpejtësi rrufeje

Algolia është një shërbim SaaS i fokusuar në për të ofruar kërkime shumë të shpejta dhe relevante në vëllime të mëdha të dhënashKa një panel web për menaxhimin e indekseve, rregullave të rëndësisë, sinonimeve, etj., dhe integrohet shumë mirë me Laravel përmes Scout dhe klientit zyrtar PHP.

Për të përdorur Algolia me Scout, do t'ju duhet të instaloni klientin e tij PHP me Composer, të regjistroni kredencialet tuaja në skedarin .env (ID e Aplikacionit dhe Çelësi i API-t të Administratorit) dhe cakto SCOUT_DRIVER=algolia për t'i thënë Scout të përdorë këtë motor. Nga paneli Algolia mund të merrni si ID-në e aplikacionit ashtu edhe çelësin administrativ.

Pasi të jetë konfiguruar mjedisi, mund të përdorni metoda të tilla si Train::search('tekst')->pages(6) direkt në kontrolluesit tuaj për të kryer kërkime në fushat e indeksuara, duke marrë rezultate në formatin Eloquent të faqosur, gati për t'u kaluar në një pamje Blade.

P.sh.Mund të kesh një kontrollues indeks që liston të gjithë trenat ose kryen një kërkim nëse merret një parametër titlesearch, dhe një metodë create për të futur trena të rinj në indeks:

public function index(Request $request)
{
if ($request->has('titlesearch')) {
$trains = Train::search($request->titlesearch)->paginate(6);
} else {
$trains = Train::paginate(6);
}

return view('Train-search', compact('trains'));
}

public function create(Request $request)
{
$this->validate($request, ['title' => 'required']);
Train::create($request->all());
return back();
}

Në pamjen përkatëse, mund të kombinoni një formular për regjistrimin e trenave të rinj dhe një formular tjetër GET me një fushë titlesearch që aktivizon kërkimin pas dorëzimit. Pastaj thjesht duhet të përsërisni koleksionin e trenave dhe të shfaqni fushat e tyre në një tabelë, duke përfituar nga lidhjet e faqezimit të gjeneruara nga Laravel.

Zbuloni me Meilisearch, bazën e të dhënave dhe koleksionet

Nëse preferoni të shmangni shërbimet e jashtme, Meilisearch është një motor kërkimi me burim të hapur të cilin mund ta vendosni në mënyrë lokale ose në infrastrukturën tuaj. Scout integrohet me Meilisearch në një mënyrë shumë të ngjashme me Algolia, thjesht duke ndryshuar drajverin dhe duke shtuar variablat MEILISEARCH_HOST dhe MEILISEARCH_KEY në skedarin .env.

Për ta përdorur atë, instaloni klientin Meilisearch PHP, rregulloni SCOUT_DRIVER=meilisearch dhe drejtojeni MEILISEARCH_HOST te URL-ja e instancës (për shembull, http://127.0.0.1:7700). Nëse keni pasur tashmë të dhëna të mëparshme, mund t'i indeksoni ato me komandën php artisan scout:import "App\Models\Train" në mënyrë që motori t'i ketë të disponueshme.

Në aplikime më të vogla ose të mesme, mund të zgjidhni edhe Baza e të dhënave të shoferëve ScoutKjo shfrytëzon indekset me tekst të plotë dhe komandat LIKE në bazën tuaj të të dhënave MySQL ose PostgreSQL. Në këtë rast, nuk keni nevojë për një shërbim të jashtëm; thjesht caktoni SCOUT_DRIVER=database që Scout të përdorë vetë bazën e të dhënave si motor kërkimi.

Një tjetër opsion interesant është koleksioni i drajverit, i cili funksionon në koleksionet Eloquent në kujtesëKy motor filtron rezultatet duke përdorur klauzolat WHERE dhe filtrimin e koleksioneve, dhe është i pajtueshëm me çdo bazë të dhënash të mbështetur nga Laravel. Mund ta aktivizoni me `SCOUT_DRIVER=koleksioni` ose duke rregulluar skedarin e konfigurimit Scout për cilësime më specifike.

Integrimi me Elasticsearch duke përdorur Explorer

Nëse nevojat tuaja të kërkimit përfshijnë duke punuar me vëllime të mëdha të të dhënave dhe analiza në kohë realeElasticsearch është një klasik. Në ekosistemin Laravel, një mënyrë moderne për ta integruar atë me Scout është përdorimi i kontrolluesit Explorer, i cili vepron si një urë lidhëse midis modeleve tuaja dhe një klasteri Elasticsearch.

Për ta bërë këtë, zakonisht përdoret Docker, së bashku me një skedar të pasur docker-compose që, përveç shërbimeve tipike (Laravel, MySQL, Redis, Meilisearch, etj.), Kontejnerët Elasticsearch dhe KibanaPastaj instaloni paketën jeroen-g/explorer nëpërmjet Composer dhe publikoni skedarin e konfigurimit për të treguar se cilat modele duhet të indeksohen.

Në skedarin config/explorer.php mund të regjistroni modelet tuaja nën çelësin e indekseve, për shembull duke shtuar App\Models\Train::classPër më tepër, ju e ndryshoni drajverin Scout në elastic në skedarin .env me SCOUT_DRIVER=elastic në mënyrë që gjithçka të tregojë te Elasticsearch.

Brenda modelit Train, ndërfaqja Explored duhet të implementohet dhe metoda të mbivendoset. mappableAsi cili përcakton hartën e fushave që do t'i dërgohen indeksit. Një shembull minimal do të ishte:

use JeroenG\Explorer\Application\Explored;
use Laravel\Scout\Searchable;

class Train extends Model implements Explored
{
use Searchable;

protected $fillable = ['title'];

public function mappableAs(): array
{
return [
'id' => $this->id,
'title' => $this->title,
];
}
}

Tani e tutje, Mund të nisni kërkime në Elasticsearch duke përdorur të njëjtën ndërfaqe Scout., duke përfituar nga kohët shumë të ulëta të përgjigjes dhe fuqia e plotë e pyetjeve të këtij motori, por pa dalë nga ekosistemi Laravel.

Me të gjitha këto qasje - nga plotësimi automatik bazë me fetch ose jQuery, te filtrimi i frontend me Alpine.js, te kërkimet me tekst të plotë me Laravel Scout dhe drajverë të ndryshëm - Laravel ju ofron një gamë të gjerë opsionesh për zbatimin e kërkimeve në kohë reale. të përshtatura sipas madhësisë së projektit tuaj, performancës që ju nevojitet dhe infrastrukturës që jeni të gatshëm të mirëmbani.