Cikakken jagora zuwa bincike na ainihi a Laravel

Informatec Digital » Resources » Cikakken jagora zuwa bincike na ainihi a Laravel

Lokacin da kuka fara aiki tare da Laravel kuma kuna buƙatar a injin bincike na ainihi wanda ke amsawa nan takeYana da sauƙi a rasa a tsakanin dubun hanyoyin da za a iya yiwuwa: AJAX tare da fetch, jQuery, Alpine.js, Scout tare da Algolia ko Meilisearch, frontend tacewa, da dai sauransu. Labari mai dadi shine cewa yanayin Laravel ya riga ya ba da kusan duk abin da kuke buƙata don saita bincike mai santsi da sauri ba tare da mutuwa a cikin ƙoƙari ba.

A cikin wannan labarin za ku ga yadda ake haɗuwa daban-daban na bincike na lokaci-lokaci a cikin LaravelDaga classic AJAX autocomplete zuwa cikakken bincike na rubutu tare da Laravel Scout da injunan bincike kamar Algolia, Meilisearch, bayanan da kanta, ko ma Elasticsearch. Hakanan za ku ga madadin masu nauyi tare da Alpine.js don tace bayanai kai tsaye a cikin mai lilo lokacin da ƙarar bayanan ke ƙanƙanta.

Menene bincike na ainihi a cikin Laravel kuma ta yaya mahimman abubuwan ke aiki?

Tunanin da ke bayan bincike na ainihi shine, kamar yadda mai amfani ya rubuta a cikin filin rubutuAna kunna tambaya kuma ana sabunta sakamakon ba tare da sake loda shafin ba. A fasaha, wannan ya ƙunshi abubuwa masu mahimmanci guda uku: Laravel backend, JavaScript na mai lilo, da musayar bayanai a tsarin JSON.

A gefe guda, Laravel yana aiki azaman Layer uwar garke Ita ce ke da alhakin karɓar buƙatun, fassarar sigogin bincike (rubutun da aka shigar), tambayar bayanan bayanai, da dawo da ingantaccen amsa, yawanci a cikin tsarin JSON. Wannan amsa na iya nuna nasara, kuskure, ko kuma ba a sami sakamako ba.

A daya karshen kuma. JavaScript yana da alhakin sauraron abubuwan masu amfani. A kan shigar da bincike, aika buƙatun asynchronous (AJAX) zuwa ƙarshen baya kuma nuna bayanan da aka dawo akan shafin ba tare da mai binciken yana yin cikakken wartsakewa ba. Ana iya yin wannan tare da ɗabo ɗan ƙasa, jQuery AJAX, ko ƙananan ɗakunan karatu masu amsawa kamar Alpine.js.

Tare da wannan asali tsarin za ka iya ginawa daga a Sauƙaƙan atomatik cikawa tare da ƴan bayanai, har zuwa ingin bincike mai cikakken rubutu tare da dacewa, pagination da tacewa, goyon bayan ɗakunan karatu kamar Laravel Scout da injunan bincike na waje da aka inganta don bincike.

Samfura, hanyoyi, da mai sarrafawa don ainihin ingin bincike na ainihin lokaci

Kafin ku shiga cikin JavaScript, kuna buƙatar tabbatar da cewa gefen Laravel yana da tsari sosai: Ƙaƙƙarfan ƙira don bincika, share hanyoyi, da mai sarrafa kwazo don sarrafa dabaru na bincike a ainihin lokacin.

Mataki na farko shine a sami samfuri mai faɗi wanda ke wakiltar tebur inda zaku nema. Ka yi tunanin tebur na ƙasashe da samfurin da ake kira Kasar Mai sauqi qwarai, ba tare da tambura ba kuma tare da babban aiki da aka yarda:

Misali mafi ƙarancin ƙira don bincike:

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;
}

An nuna a nan cewa samfurin Pais yana cikin daidaitaccen sararin sunan LaravelYana gado daga Model kuma yana ba ku damar sanya kowane fili tare da ƙirƙira () ta barin tsararrun da aka tsare ba komai. Ta hanyar kashe timestamps tare da jama'a $timestamps = ƙarya, kuna guje wa matsaloli idan tebur ba shi da ginshiƙan ƙirƙira da sabunta_at.

Mataki na gaba shine ayyana hanyoyin da za su rike duka nunin injin bincike da buƙatun AJAXTsarin gama gari yana haɗa hanyar GET don nuna ra'ayi da hanyar POST da aka ƙera don karɓar tambayoyin ainihin lokaci:

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']);

Tushen hanyar yana dawo da kallon maraba, yayin URL An tanada /bincike don ayyukan bincikeHanyar fihirisar () mai sarrafawa tana nuna fom da shigarwar bincike, yayin da hanyar bincike() tana aiwatar da buƙatun da aka aika daga mai bincike.

A cikin mai sarrafawa zaka iya aiwatar da tsari mai amfani sosai: Shirya tsararrun martani na tsoho idan akwai kuskure kuma kawai a sake rubuta shi lokacin da ainihin buƙatar AJAX mai inganci kuma tambayar ta aiwatar ba tare da matsala ba.

Mai sarrafawa zai iya samun a kama tsarin wannan:

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);
}
}

A wannan lokacin kuna da Cikakken sake zagayowar baya: buƙatar AJAX mai shigowa, duba cewa AJAX ne, tambaya tare da inda ake so da iyakance sakamako. zuwa lamba mai ma'ana ta amfani da ɗaukar (10) don guje wa yin lodin bayanai. Ana aika martani koyaushe cikin JSON, wanda ke sauƙaƙe aikin gaba.

Duban ruwa da ɗebo JavaScript don neman amsawa

Tare da samfurin, hanyoyi, da mai sarrafawa a shirye, lokaci yayi da za a gina ɓangaren bayyane: fom tare da filin bincike da toshe don nuna sakamakon, da JavaScript da alhakin yin buƙatun a bango.

Ra'ayin Blade na iya zama mai sauqi qwarai, dogara ga Farashin CSRF wanda Laravel yayi allura don tabbatar da buƙatun POST kuma a cikin shigar da bincike wanda ya dace don amfani:

<!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>

A cikin wannan misalin rubutun Saurari taron maɓalli akan shigar da bincikeKowane maɓalli yana jawo buƙatun debo zuwa hanyar bincike. Ana aika rubutun filin na yanzu a cikin tsarin JSON, kuma an haɗa maɓalli masu mahimmanci kamar X-Requested-With don nuna cewa AJAX ne, tare da alamar CSRF don ketare kariyar Laravel ta asali.

Lokacin da amsa ya zo, an canza shi zuwa JSON kuma ana haifar da shi sosai. ƙaramin jerin HTML tare da sakamakonko saƙo kamar "Ba a sami sakamako ba" lokacin da tambayar ta dawo babu bayanai. Duk wannan ba tare da sake shigar da shafin ba, a cikin hanyar halitta ga mai amfani.

Ana iya ƙara haɓaka wannan ƙirar tare da ƙananan bayanan UX, kamar ƙara a jinkiri (debounce) tsakanin maɓallan maɓalli, nuni mai ɗaukar kaya ko sarrafa kurakuran hanyar sadarwa don hana mu'amala daga fitowa a daskare lokacin da wani abu ya gaza.

Binciken kai tsaye tare da Laravel da AJAX ta amfani da jQuery

Duk da cewa fetch ya sami ƙasa mai yawa a zamanin yau, jQuery AJAX ya kasance sananne sosai a cikin ayyukan gado ko kan ƙungiyoyin da suka riga sun aiwatar da shi. Tunanin daidai yake: kama abin da mai amfani ya rubuta, yin buƙatun asynchronous, da sabunta DOM.

Tsarin aiki na yau da kullun tare da jQuery a cikin Laravel don bincike kai tsaye yakan haɗa da waɗannan matakan asali: ayyana takamaiman hanya, ƙirƙirar keɓaɓɓen mai sarrafawa, gina ra'ayin Blade tare da shigar da bincike Kuma a ƙarshe, ƙara lambar jQuery wanda ke haifar da AJAX kamar yadda ake bugawa.

Tsarin yana aiki kamar haka: lokacin da mai amfani ya fara bugawa, jQuery yana aika tambaya zuwa uwar garken tare da zaren bincike. Laravel yana tace bayanan da ke cikin ma'ajin bayanai, ya mayar da JSON tare da sakamako masu dacewa, kuma jQuery yana sabunta akwati HTML akan shafin don nuna matches, duk a cikin wani al'amari na milliseconds.

Amfanin amfani da jQuery shine Yana da kyau ya taƙaita ma'anar AJAX Kuma yana da sauƙin karantawa idan kun riga kuna da ɗakin karatu a cikin aikinku. Koyaya, kuna ƙara ƙarin dogaro wanda bazai zama dole ba idan kuna iya aiki tare da JavaScript na zamani da ɗabo na asali.

Tace na ainihi da bincike akan gaba tare da Alpine.js

Lokacin da bayanan da za a nuna sun yi ƙanƙanta (misali, kasa da abubuwa 50), ba koyaushe yana da daraja kafa abin baya tare da bincike mai rikitarwa ba. A cikin waɗannan lokuta, zaɓi mai dacewa shine Tace kai tsaye a cikin burauzar da Alpine.js, ba tare da yin buƙatun zuwa uwar garken ba yayin da mai amfani ya rubuta.

Manufar ita ce a riga an ƙididdige kirtani na bincike don kowane nau'i (misali, suna, bayanin, da nau'i a cikin ƙananan haruffa), adana shi a cikin sifa-bincike-rubutu, kuma bari Alpine.js su rike sauran. nuna ko ɓoye abubuwa bisa ga rubutun da aka rubuta a filin bincike.

Bangaren Alpine.js na iya samun tsari mai kama da wannan: tace abubuwa

{
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;
},
}

A cikin ra'ayi, kowane katin ko jere na bayanai zai ɗauki sifa rubutu-bincike-rubutu tare da rubutun da aka riga aka shirya cikin ƙananan haruffaDon haka, an rage matattarar zuwa aikin haɗa () a cikin JavaScript, wanda ke da sauri don gajerun jeri.

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

Bugu da ƙari, zaku iya nuna katanga mara komai a lokacin kawai Babu sakamako na kalmar neman na yanzu.gayyatar mai amfani don gyara rubutu ko share filin tare da maɓalli wanda kawai ke sake saita binciken zuwa sigar da ba komai.

Wannan hanyar tana da fa'idodi bayyananne: Babu kiran uwar garken yayin bincike.Ma'amalar kusan nan take, kuma dabarar ta kasance cikin gida da sauƙin cirewa. Ya dace don masu zaɓe cikin sauri, ƙirar zaɓin abu, ko ƙananan kasida da aka saka a cikin shafin Laravel.

Laravel Scout: Binciken cikakken rubutu tare da injuna na musamman

Lokacin da abubuwa suka yi tsanani kuma kuna buƙata bincike mai sauri, dacewa, da ma'aunin bincike na cikakken rubutuHanyar dabi'a a Laravel ita ce Laravel Scout. Scout wani yanki ne na haɗin kai wanda ke ba ku damar haɗa samfuran ku cikin sauƙi tare da injunan bincike kamar Algolia, Meilisearch, bayanan ku, tarin ƙwaƙwalwar ajiya, ko ma Elasticsearch ta hanyar masu sarrafa waje.

Don farawa da Scout, abin da aka saba shine ƙirƙiri sabon aikin Laravel ko sake amfani da wanda yake da shiDon ƙaddamar da shi, yi amfani da Docker (misali, tare da Laravel Sail) sannan shigar da ɗakin karatu tare da Mawaƙi. Da zarar an yi hakan, buga fayil ɗin sanyi na scout.php kuma daidaita masu canjin yanayi bisa ga direban da kake son amfani da shi.

Tsarin aiki na yau da kullun shine shigar Scout tare da Mawaƙi, buga tsarin sa, da kunna jerin gwano tare da SCOUT_QUEUE = gaskiya A cikin fayil ɗin .env, tabbatar da cewa ana sarrafa manyan ayyuka a bango, inganta lokutan amsa aikace-aikacen. Bugu da ƙari, dole ne ku tabbatar da cewa DB_HOST yana nuni ga bayanan da kuke amfani da su, wanda ke da mahimmanci musamman idan kuna amfani da kwantena Docker.

Domin samfurin ya shiga cikin binciken Scout, ya zama dole Don yi masa alama a sarari a matsayin abin nema ta ƙara sifar da ake nemaMisali, idan kuna da samfurin Jirgin ƙasa wanda ke wakiltar tebur na jiragen ƙasa tare da filin take, kuna iya ayyana shi kamar haka:

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';
}
}

The searchableAs Hanyar damar siffanta sunan fihirisar a cikin injin bincikeMaimakon yin amfani da sunan tsoho da aka samo daga samfurin, Scout yana ɗauka. Daga nan, Scout yana sarrafa aiki tare da ƙirƙira, sabuntawa, da ayyukan sharewa tare da fihirisar nesa ko na gida, dangane da zaɓin direba.

Laravel Scout tare da Algolia: Binciken SaaS mai saurin walƙiya

Algolia sabis ne na SaaS wanda aka mayar da hankali akai don bayar da bincike mai sauri da dacewa a cikin manyan bayanaiYana da rukunin yanar gizon don sarrafa firikwensin, ƙa'idodin da suka dace, ma'ana, da sauransu, kuma yana haɗawa sosai tare da Laravel ta hanyar Scout da abokin ciniki na PHP na hukuma.

Don amfani da Algolia tare da Scout, kuna buƙatar shigar da abokin ciniki na PHP tare da Mawaƙi, yi rajistar takaddun shaidarku a cikin fayil ɗin .env (ID ɗin aikace-aikacen da Maɓallin API na Admin), kuma saita SCOUT_DRIVER=algolia don gaya wa Scout don amfani da wannan injin. Daga Algolia panel zaka iya samun duka ID na aikace-aikacen da maɓallin gudanarwa.

Da zarar an daidaita yanayin, zaku iya amfani da hanyoyi kamar Train ::bincike('rubutu')->paginate(6) kai tsaye zuwa cikin masu sarrafa ku don yin bincike akan filayen da aka lissafta, karɓar sakamako a cikin sigar ƙaƙƙarfan ƙaƙƙarfan shirin da za a wuce zuwa kallon Blade.

Alal misaliKuna iya samun mai sarrafawa index wanda ke jera duk jiragen ƙasa ko yin bincike idan an karɓi ma'aunin binciken take, da ƙirƙirar hanyar shigar da sabbin jiragen ƙasa cikin ma'aunin:

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();
}

A cikin madaidaicin ra'ayi, zaku iya haɗuwa fom don yin rajistar sabbin jiragen kasa da wani nau'i na GET tare da filin binciken take wanda ke haifar da bincike yayin ƙaddamarwa. Sa'an nan kuma kawai kuna buƙatar sake maimaita ta hanyar tarin jiragen ƙasa kuma ku nuna filayensu a cikin tebur, kuna amfani da hanyoyin haɗin yanar gizon da Laravel ya samar.

Scout tare da Meilisearch, bayanai da tarin bayanai

Idan kun fi son guje wa ayyukan waje, Meilisearch buɗaɗɗen ingin bincike ne wanda zaku iya turawa a cikin gida ko akan kayan aikin ku. Scout yana haɗawa da Meilisearch ta hanya mai kama da Algolia, kawai ta hanyar canza direba da ƙara MEILISEARCH_HOST da MEILISEARCH_KEY masu canji zuwa fayil ɗin .env.

Don amfani da shi, kun shigar da abokin ciniki na Meilisearch PHP, daidaita SCOUT_DRIVER= binciken bincike sannan a nuna MEILISEARCH_HOST zuwa URL misali (misali, http://127.0.0.1:7700). Idan kun riga kuna da bayanan da suka gabata, zaku iya nuna su tare da umarnin php artisan scout: shigo da "AppModels Train" domin injin ya samu su.

A cikin ƙarami ko matsakaita aikace-aikace, Hakanan zaka iya zaɓar Database direban ScoutWannan yana ba da damar cikakkun bayanan rubutu da umarni LIKE akan bayanan MySQL ko PostgreSQL. A wannan yanayin, ba kwa buƙatar sabis na waje; kawai saita SCOUT_DRIVER=database don Scout don amfani da bayanan da kanta azaman injin bincike.

Wani zaɓi mai ban sha'awa shine tarin direba, wanda ke aiki akan tarin ƙaƙƙarfan a ƙwaƙwalwar ajiyaWannan injin yana tace sakamakon ta amfani da sassan WHERE da tace tarin, kuma ya dace da duk wani bayanan da Laravel ke tallafawa. Kuna iya kunna shi tare da `SCOUT_DRIVER=tarin' ko ta hanyar daidaita fayil ɗin sanyi na Scout don ƙarin takamaiman saitunan.

Haɗin kai tare da Elasticsearch ta amfani da Explorer

Idan neman buƙatar ku ya ƙunshi aiki tare da manyan kundin bayanai da bincike na lokaci-lokaciElasticsearch al'ada ce. A cikin yanayin yanayin Laravel, hanyar zamani don haɗa shi tare da Scout shine amfani da mai sarrafa Explorer, wanda ke aiki azaman gada tsakanin samfuran ku da gungun Elasticsearch.

Don yin wannan, yawanci ana amfani da Docker, tare da babban fayil ɗin docker-compose wanda, ban da sabis na yau da kullun (Laravel, MySQL, Redis, Meilisearch, da sauransu). Elasticsearch da kwantena KibanaSannan ka shigar da kunshin jeroen-g/explorer ta hanyar Mawaƙi kuma ka buga fayil ɗin sanyi don nuna waɗanne nau'ikan ya kamata a yi maƙasudin.

A cikin config/explorer.php fayil za ka iya yin rajistar samfuran ku a ƙarƙashin maɓallin fihirisa, misali ta ƙara App \ Model \ Train :: classBugu da ƙari, kuna canza direban Scout zuwa na roba a cikin fayil ɗin .env tare da SCOUT_DRIVER= roba don komai ya nuna Elasticsearch.

A cikin tsarin jirgin ƙasa, dole ne a aiwatar da ƙa'idar da aka binciko kuma a soke hanyar. mappableAswanda ke bayyana taswirar filayen da za a aika zuwa fihirisar. Karamin misali zai kasance:

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,
];
}
}

Daga yanzu, Kuna iya ƙaddamar da bincike akan Elasticsearch ta amfani da ƙirar Scout iri ɗaya., suna amfana daga lokutan amsawa kaɗan da cikakken ikon tambayar wannan injin, amma ba tare da barin yanayin yanayin Laravel ba.

Tare da duk waɗannan hanyoyin - daga ainihin autocomplete tare da fetch ko jQuery, zuwa tacewa gaba tare da Alpine.js, zuwa cikakken binciken rubutu tare da Laravel Scout da direbobi daban-daban - Laravel yana ba ku ɗimbin zaɓuɓɓuka don aiwatar da bincike na lokaci-lokaci wanda ya dace da girman aikin ku, aikin da kuke buƙata, da abubuwan more rayuwa da kuke son kiyayewa.