Pour instaurer la confiance dans votre communauté en ligne ou votre blog, un élément crucial dont vous aurez besoin est un système de commentaires en direct Laravel bien conçu.
Cependant, il n’est pas facile d’y arriver du premier coup, à moins que vous ne vous fiez à des systèmes de commentaires auto-hébergés comme Disqus ou Commento, qui présentent chacun leur lot d’inconvénients. Ils possèdent vos données, offrent des conceptions et des personnalisations limitées, et surtout, ils ne sont pas gratuits.
Avec ces limitations, si l’idée de créer votre système de commentaires en temps réel – avec les avantages de contrôler vos données, de concevoir et de personnaliser l’apparence pour l’intégrer à votre blog – vous séduit, continuez de lire.
Cet article vous apprendra à développer un système de commentaires en temps réel bien conçu et doté de différentes fonctionnalités de commentaires. En suivant les principes de la construction d’une application de discussion en temps réel avec Vue.js et Socket.io, nous utiliserons Laravel, Pusher et React pour développer le système de commentaires en temps réel.
Plongeons dans l’aventure !
Ce que nous allons construire
Nous allons construire un système de commentaires en temps réel qui peut être intégré à n’importe quel site web ou blog pour renforcer la confiance dans la communauté.
Aperçu des blocs de construction : Laravel, Pusher et Vue
Avant de nous plonger dans le développement, parlons des technologies que nous utiliserons pour développer notre système de commentaires en temps réel.
Laravel
Laravel est un framework PHP open-source orienté MVC. Il est utilisé pour construire des applications web PHP simples à complexes, connues pour leur syntaxe élégante. Apprendre ce qu’est Laravel est essentiel pour construire ce système de commentaires.
Pusher
Pusher permet aux développeurs de créer des fonctionnalités évolutives en temps réel. Cet article combinera Laravel Echo pour créer un événement de diffusion en temps réel vers le serveur Pusher et afficher le contenu sur l’interface publique avec Vue.js.
Vue.js
Vue.js est notre framework frontend de prédilection. Vue.js est un framework frontend JavaScript progressif connu pour son approche simple et facile à apprendre du développement frontend. Nous allons utiliser Vue.js pour développer notre système de commentaires en temps réel.
Construire le système de commentaires
Si le système de commentaires que nous avons décrit ci-dessus correspond à ce que vous voulez, passons à sa construction.
1. Installer et configurer Laravel, Pusher et Echo
L’installation et la configuration de Laravel, Echo et Pusher sont simples car Laravel a fait toutes les tâches en arrière-plan en installant et en configurant Laravel Echo pour qu’il fonctionne parfaitement avec Pusher.
Tout d’abord, nous allons commencer par installer et configurer Laravel, notre framework PHP backend. Vous pouvez récupérer une nouvelle instance de Laravel avec cette commande, à condition que vous ayez installé le CLI de Laravel de manière globale :
laravel new commenterVotre nouvelle instance de Laravel sera installée dans un répertoire appelé commenter. Ouvrez le répertoire dans notre VSCode et rendez-vous à l’intérieur dans notre terminal :
cd commenter
code .Avant de démarrer notre serveur de développement, installons et configurons certains paquets nécessaires qui seront utilisés pour le projet.
Exécutez cette commande pour installer le SDK PHP de Pusher :
composer require pusher/pusher-php-serverExécutez cette commande pour installer les paquets NPM nécessaires pour le frontend Vue.js :
npm install --save laravel-echo pusher-jsEnsuite, nous allons configurer l’écho Laravel et Pusher. Ouvrez votre fichier resources/js/bootstrap.js et collez les scripts suivants :
window._ = require("lodash");
window.axios = require("axios");
window.moment = require("moment");
window.axios.defaults.headers.common["X-Requested-With"] = "XMLHttpRequest";
window.axios.defaults.headers.post["Content-Type"] =
"application/x-www-form-urlencoded";
window.axios.defaults.headers.common.crossDomain = true;
window.axios.defaults.baseURL = "/api";
let token = document.head.querySelector('meta[name="csrf-token"]');
if (token) {
window.axios.defaults.headers.common["X-CSRF-TOKEN"] = token.content;
} else {
console.error("CSRF token not found");
}
/**
* Echo exposes an expressive API for subscribing to channels and listening
* for events that Laravel broadcasts. Echo and event broadcasting
* allows your team to build robust real-time web applications quickly.
*/
import Echo from "laravel-echo";
window.Pusher = require("pusher-js");
window.Echo = new Echo({
broadcaster: "pusher",
key: process.env.MIX_PUSHER_APP_KEY,
cluster: process.env.MIX_PUSHER_APP_CLUSTER,
forceTLS: true
});Vous remarquerez dans le script ci-dessus que nous ne faisons que configurer l’instance Axios avec nos configurations par défaut. Ensuite, nous allons configurer Laravel Echo pour utiliser Pusher et ses configurations.
2. Configuration et migration de la base de données
Ensuite, nous allons créer et configurer notre base de données pour stocker les commentaires pour la persistance. Nous utiliserons SQLite, mais vous pouvez utiliser le client de base de données de ton choix.
Créez un fichier database.sqlite dans le répertoire de la base de données et mettez à jour votre fichier .env comme suit :
DB_CONNECTION=sqlite
DB_DATABASE=/Users/all/paths/to/project/commenter_be/database/database.sqlite
DB_HOST=127.0.0.1
DB_PORT=3306
DB_USERNAME=root
DB_PASSWORD=Ensuite, exécutez cette commande pour créer la migration Comment et la mettre à jour avec les scripts suivants :
php artisan make:migration create_comments_tableOuvrez le fichier database/migrations/xxxx_create_comments_table_xxxx.php et collez ce code :
<?php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
class CreateCommentsTable extends Migration
{
/**
* Run the migrations.
*
* @return void
*/
public function up()
{
Schema::create('comments', function (Blueprint $table) {
$table->id();
$table->string('content');
$table->string('author');
$table->timestamps();
});
}
/**
* Reverse the migrations.
*
* @return void
*/
public function down()
{
Schema::dropIfExists('comments');
}
}Cela créera une nouvelle table de base de données de commentaires et ajoutera des colonnes de contenu et d’auteur.
Enfin, pour créer la migration, exécutez cette commande :
php artisan migrate3. Créer des modèles
Dans Laravel, les modèles sont importants – ils sont le moyen le plus sûr de communiquer avec notre base de données et de gérer les données.
Pour créer un modèle dans Laravel, nous allons exécuter la commande suivante :
php artisan make:model CommentEnsuite, ouvrez le fichier app/models/Comment.php et collez le code suivant :
<?php namespace App\Models; use Illuminate\Database\Eloquent\Factories\HasFactory; use Illuminate\Database\Eloquent\Model; class Comment extends Model { use HasFactory; protected $fillable = ['content', 'author']; }
The $fillable array allows us to create and update the model in mass.
4. Création de contrôleurs
Les contrôleurs sont cruciaux car ils abritent toute la logique, commerciale ou autre, de nos applications. Créons-en un pour gérer la logique des commentaires :
php artisan make:controller CommentControllerEnsuite, ouvrez le fichier app/Http/Controllers/CommentController.php et collez le code suivant :
<?php
namespace App\Http\Controllers;
use App\Models\Comment;
use App\Events\CommentEvent;
use Illuminate\Http\Request;
class CommentController extends Controller
{
//
public function index()
{
return view('comments');
}
public function fetchComments()
{
$comments = Comment::all();
return response()->json($comments);
}
public function store(Request $request)
{
$comment = Comment::create($request->all());
event(new CommentEvent($comment));
return $comment;
}
}Le contrôleur possède trois méthodes différentes : renvoyer une vue des commentaires, récupérer tous les commentaires et stocker un nouveau commentaire, respectivement. Plus important encore, nous déclenchons un événement chaque fois que nous stockons un nouveau commentaire, que le frontend écoutera pour mettre à jour la page concernée avec le nouveau commentaire en temps réel à l’aide de Pusher et de Laravel Echo.
5. Créer des routes
Pour configurer correctement nos routes, nous devrons mettre à jour de nombreux fichiers, alors commençons.
Tout d’abord, nous allons mettre à jour le fichier api.php dans le répertoire routes. Ouvrez le fichier et ajoutez le code suivant :
use App\Http\Controllers\CommentController;
//...
Route::get('/', [CommentController::class, 'index']);
Route::get('/comments', [CommentController::class, 'fetchComments']);
Route::post('/comments', [CommentController::class, 'store']);Ensuite, ouvrez le fichier channels.php dans le même répertoire et ajoutez le code suivant pour autoriser l’événement que nous avons déclenché plus tôt :
Broadcast::channel('comment', function ($user) {
return true;
});Ensuite, ouvrez le fichier web.php dans le même répertoire et ajoutez le code suivant pour rediriger notre demande vers la page d’accueil, où Vue.js la récupérera :
use App\Http\Controllers\CommentController;
//...
Route::get('/', [CommentController::class, 'index']);Enfin, nous allons créer un nouveau fichier blade dans le répertoire resources/views appelé comments.blade.php et ajouter le code suivant :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Commenter</title>
<meta name="csrf-token" content="{{ csrf_token() }}">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css" />
<style>
.container {
margin: 0 auto;
position: relative;
width: unset;
}
#app {
width: 60%;
margin: 4rem auto;
}
.question-wrapper {
text-align: center;
}
</style>
</head>
<body>
<div id="app">
<div class="container">
<div class="question-wrapper">
<h5 class="is-size-2" style="color: #220052;">
What do you think about <span style="color: #47b784;">Dogs</span>?</h5>
<br>
<a href="#Form" class="button is-medium has-shadow has-text-white" style="background-color: #47b784">Comment</a>
</div>
<br><br>
<comments></comments>
<new-comment></new-comment>
</div>
</div>
<script async src="{{mix('js/app.js')}}"></script>
</body>
</html>Le script ajoute un titre d’article et un composant Vue pour afficher et ajouter de nouveaux commentaires au titre d’article créé ci-dessus.
Exécutez les commandes suivantes pour tester si vous obtenez tout correctement :
npm run watch
php artisan serveSi cette page vous est présentée, vous êtes prêt à passer à l’étape suivante de cet article.
6. Configuration de Vue (Frontend)
Nous allons créer et configurer notre instance Vue pour créer et afficher tous les commentaires faits sur cet article.
Nous allons commencer par configurer notre stockage Vuex. Créez les fichiers suivants dans le répertoire resource/js/store.
Créer l’état des commentaires
Créez actions.js et ajoutez le code suivant :
let actions = {
ADD_COMMENT({ commit }, comment) {
return new Promise((resolve, reject) => {
axios
.post(`/comments`, comment)
.then(response => {
resolve(response);
})
.catch(err => {
reject(err);
});
});
},
GET_COMMENTS({ commit }) {
axios
.get("/comments")
.then(res => {
{
commit("GET_COMMENTS", res.data);
}
})
.catch(err => {
console.log(err);
});
}
};
export default actions;Le fichier Action fait un appel au point de terminaison des commentaires dans le backend.
Ensuite, créez un fichier getters.js et ajoutez le code suivant :
let getters = {
comments: state => {
return state.comments;
}
};
export default getters;Le fichier Getter est utilisé pour récupérer tous les commentaires dans l’état.
Créez le fichier mutations.js et collez-le dans le code suivant :
let mutations = {
GET_COMMENTS(state, comments) {
state.comments = comments;
},
ADD_COMMENT(state, comment) {
state.comments = [...state.comments, comment];
}
};
export default mutations;Ensuite, créez un fichier state.js et collez-le dans le code suivant :
let state = {
comments: []
};
export default state;Enfin, nous ajouterons tout au fichier index.js exporté vers l’instance Vue, créez un fichier index.js et ajoutez ce qui suit :
import Vue from "vue";
import Vuex from "vuex";
import actions from "./actions";
import mutations from "./mutations";
import getters from "./getters";
import state from "./state";
Vue.use(Vuex);
export default new Vuex.Store({
state,
mutations,
getters,
actions
});Créer des composants
Enfin, nous allons créer nos composants de commentaires pour afficher et ajouter de nouveaux commentaires. Commençons par créer le composant de commentaire unique.
Créez un répertoire dans le répertoire resource/js appelé components, ajoutez le fichier comment.vue et ajoutez le code suivant :
<template>
<li class="comment-wrapper animate slideInLeft">
<div class="profile">
</div>
<div class="msg has-shadow">
<div class="msg-body">
<p class="name">
{{ comment.author }} <span class="date">{{ posted_at }}</span>
</p>
<p class="content">{{ comment.content }}</p>
</div>
</div>
</li>
</template>
<script>
export default {
name: "Comment",
props: ["comment"],
computed: {
posted_at() {
return moment(this.comment.created_at).format("MMMM Do YYYY");
},
},
};
</script>
<style lang="scss" scoped>
.comment-wrapper {
list-style: none;
text-align: left;
overflow: hidden;
margin-bottom: 2em;
padding: 0.4em;
.profile {
width: 80px;
float: left;
}
.msg-body {
padding: 0.8em;
color: #666;
line-height: 1.5;
}
.msg {
width: 86%;
float: left;
background-color: #fff;
border-radius: 0 5px 5px 5px;
position: relative;
&::after {
content: " ";
position: absolute;
left: -13px;
top: 0;
border: 14px solid transparent;
border-top-color: #fff;
}
}
.date {
float: right;
}
.name {
margin: 0;
color: #999;
font-weight: 700;
font-size: 0.8em;
}
p:last-child {
margin-top: 0.6em;
margin-bottom: 0;
}
}
</style>Enfin, créez un fichier appelé NewComment.vue et ajoutez le code suivant :
<template>
<div class="container">
<ul class="comment-list">
<Comment
:key="comment.id"
v-for="comment in comments"
:comment="comment"
></Comment>
</ul>
</div>
</template>
<script>
import { mapGetters } from "vuex";
import Comment from "./Comment";
export default {
name: "Comments",
components: { Comment },
mounted() {
this.$store.dispatch("GET_COMMENTS");
this.listen();
},
methods: {
listen() {
Echo.channel("comment").listen("comment", (e) => {
console.log(e);
this.$store.commit("ADD_COMMENT", e);
});
},
},
computed: {
...mapGetters(["comments"]),
},
};
</script>
<style scoped>
.comment-list {
padding: 1em 0;
margin-bottom: 15px;
}
</style>Maintenant, ouvrez le fichier app.js et ajoutez le code suivant pour enregistrer les composants Vue que vous avez créés plus tôt :
// resource/js/app.js
require("./bootstrap");
window.Vue = require("vue");
import store from "./store/index";
Vue.component("comment", require("./components/Comment"));
Vue.component("comments", require("./components/Comments"));
Vue.component("new-comment", require("./components/NewComment"));
const app = new Vue({
el: "#app",
store
});
Résumé
Et c’est tout ! Vous venez d’apprendre comment construire un système de commentaires en direct pour votre site à l’aide de Laravel.
Nous avons discuté des avantages de la création et de la gestion d’un système de commentaires dans votre quête pour instaurer la confiance dans votre communauté ou votre blog. Nous avons également exploré comment développer un système de commentaires en temps réel bien conçu à partir de zéro, en utilisant différentes fonctionnalités de commentaires.
Vous pouvez cloner le code source de ce projet dans ce repo Github.
Que pensez-vous du système de commentaires en direct Laravel que nous avons construit ensemble ? Dîtes-le-nous dans les commentaires !
Je suis un ingénieur logiciel et un créateur de contenu orienté vers la construction de produits performants et innovants en suivant les meilleures pratiques et les normes de l'industrie. J'aime aussi écrire à ce sujet sur Masteringbackend.com. Suivez-moi sur X, LinkedIn et About Me.
Laisser un commentaire