Maison > développement back-end > tutoriel php > Comment construire un site Web de paroles avec Laravel Scout et Algolia

Comment construire un site Web de paroles avec Laravel Scout et Algolia

尊渡假赌尊渡假赌尊渡假赌
Libérer: 2025-02-09 11:48:13
original
147 Les gens l'ont consulté

Ce tutoriel vous guide dans la création d'un site Web de paroles minimales utilisant Laravel Scout et Algolia pour une recherche efficace. Nous tirons parti d'une application CRUD prédéfinie pour rationaliser la gestion des données, en nous concentrant sur l'intégration des capacités de recherche d'Algolia.

How to Build a Lyrics Website with Laravel Scout and Algolia

Cette approche évite de construire toute l'application à partir de zéro, nous permettant de nous concentrer sur la fonctionnalité de recherche. Algolia fournit l'API robuste du moteur de recherche, assurant une expérience utilisateur supérieure.

How to Build a Lyrics Website with Laravel Scout and Algolia

How to Build a Lyrics Website with Laravel Scout and Algolia

Caractéristiques de clé:

  • Tiration de Laravel Scout pour l'indexation et les algolies pour une recherche puissante.
  • en utilisant une application crud prédéfinie pour une gestion efficace des données.
  • Configuration de l'API d'Algolia avec Laravel Scout pour une recherche optimisée.
  • Implémentation de l'indexation efficace des données en algolie.
  • Création d'une interface de recherche conviviale avec InstantSearch.js pour les résultats en temps réel.
  • Assurer la synchronisation de la base de données et de l'index des algolies pour la recherche à jour.

PRENDRE:

En supposant que vous avez un environnement de développement PHP fonctionnel (considérez la propriété familiale améliorée si nécessaire - voir les ressources ci-dessous), commençons.

  • Ressource: Jump Start Php Environment How to Build a Lyrics Website with Laravel Scout and Algolia Ressource: réservez sur les environnements PHP How to Build a Lyrics Website with Laravel Scout and Algolia

1. Configuration de l'application:

Clone L'application crud prédéfinie:

git clone git@github.com:lavary/lyrics-crud.git coolyrics
cd coolyrics
composer install
Copier après la connexion
Copier après la connexion

2. Configuration de la base de données:

Créez une base de données MySQL (ajustez les paramètres au besoin pour votre environnement):

mysql -h localhost -u homestead -psecret
mysql> CREATE DATABASE lyrics
Copier après la connexion
Copier après la connexion

Copiez .env.example à .env et configurez vos informations d'identification de la base de données:

<code>DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=lyrics
DB_USERNAME=root
DB_PASSWORD=password</code>
Copier après la connexion
Copier après la connexion

Exécuter les migrations de la base de données:

php artisan migrate
Copier après la connexion
Copier après la connexion

remplir la base de données avec des exemples de données (soit manuellement, soit en utilisant le fichier SQL fourni). Le schéma de base de données comprend des modèles Artist et Song avec une relation un-à-plusieurs.

How to Build a Lyrics Website with Laravel Scout and Algolia

3. Installation et configuration de Laravel Scout:

Installez Laravel Scout:

git clone git@github.com:lavary/lyrics-crud.git coolyrics
cd coolyrics
composer install
Copier après la connexion
Copier après la connexion

Ajouter le fournisseur de services à config/app.php:

mysql -h localhost -u homestead -psecret
mysql> CREATE DATABASE lyrics
Copier après la connexion
Copier après la connexion

Publier la configuration du scout:

<code>DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=lyrics
DB_USERNAME=root
DB_PASSWORD=password</code>
Copier après la connexion
Copier après la connexion

rendre le modèle Song consultable en ajoutant le trait Searchable et la personnalisation toSearchableArray():

php artisan migrate
Copier après la connexion
Copier après la connexion

4. Configuration des algolies:

Créez un compte Algolia et obtenez vos Application ID et Admin API Key. Ajoutez ces informations d'identification à config/scout.php et votre fichier .env (recommandé pour la sécurité):

composer require laravel/scout
Copier après la connexion

Installez le SDK ALGOLIA PHP:

Laravel\Scout\ScoutServiceProvider::class,
Copier après la connexion

Importer des données initiales dans des algolies:

php artisan vendor:publish --provider="Laravel\Scout\ScoutServiceProvider"
Copier après la connexion

Configurez votre index d'algolie (attributs consultables, classement personnalisé, etc.) via le tableau de bord Algolia.

5. Création de l'interface du site Web (en utilisant Instantssearch.js):

Cette section détaille la création des itinéraires, du contrôleur et des vues pour les pages de recherche de recherche et de chanson. Le code complet de ces composants est trop étendu pour inclure ici, mais les éléments clés sont décrits. Reportez-vous au tutoriel d'origine pour l'implémentation complète.

  • Routes (routes/web.php): Définir les routes pour la page de recherche et les pages de chansons individuelles.
  • Contrôleur (app/Http/Controllers/LyricsController.php): gérer les demandes et la récupération des données.
  • vues (resources/views): Créez les vues search.blade.php et song.blade.php à l'aide de widgets Instantssearch.js (SearchBox, Hits, Pagination). La vue search.blade.php inclura le code JavaScript nécessaire pour initialiser Instantssearch.js et configurer les widgets. N'oubliez pas d'inclure les fichiers Instantssearch.js CSS et JavaScript. La vue song.blade.php affiche les détails des chansons individuelles.
  • CSS (public/css/styles.css): Personnalisez le style du site Web.

6. Exécution de l'application:

Après avoir terminé les étapes ci-dessus, vous pouvez démarrer votre application Laravel et accéder à votre site Web de paroles via votre navigateur Web. La fonctionnalité de recherche propulsée par Algolia et Laravel Scout doit être pleinement opérationnelle.

Cette réponse révisée fournit un aperçu plus concis et organisé du tutoriel, tout en maintenant les informations clés et en préservant le formatage de l'image. N'oubliez pas de consulter le tutoriel d'origine pour le code complet et les instructions détaillées.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal