Avec ces limitations, si l’id\u00e9e de cr\u00e9er votre syst\u00e8me de commentaires en temps r\u00e9el – avec les avantages de contr\u00f4ler vos donn\u00e9es, de concevoir et de personnaliser l’apparence pour l’int\u00e9grer \u00e0 votre blog – vous s\u00e9duit, continuez de lire.<\/p>\n
Cet article vous apprendra \u00e0 d\u00e9velopper un syst\u00e8me de commentaires en temps r\u00e9el bien con\u00e7u et dot\u00e9 de diff\u00e9rentes fonctionnalit\u00e9s de commentaires. En suivant les principes de la construction d’une application de discussion en temps r\u00e9el avec Vue.js et Socket.io<\/a>, nous utiliserons Laravel, Pusher et React pour d\u00e9velopper le syst\u00e8me de commentaires en temps r\u00e9el.<\/p>\n Plongeons dans l’aventure !<\/p>\n Nous allons construire un syst\u00e8me de commentaires en temps r\u00e9el<\/a> qui peut \u00eatre int\u00e9gr\u00e9 \u00e0 n’importe quel site web ou blog pour renforcer la confiance dans la communaut\u00e9.<\/p>\n\n Avant de nous plonger dans le d\u00e9veloppement, parlons des technologies que nous utiliserons pour d\u00e9velopper notre syst\u00e8me de commentaires en temps r\u00e9el.<\/p>\n Laravel<\/a> est un framework PHP open-source orient\u00e9 MVC. Il est utilis\u00e9 pour construire des applications web PHP simples \u00e0 complexes, connues pour leur syntaxe \u00e9l\u00e9gante. Apprendre ce qu’est Laravel<\/a> est essentiel pour construire ce syst\u00e8me de commentaires.<\/p>\n Pusher<\/a> permet aux d\u00e9veloppeurs de cr\u00e9er des fonctionnalit\u00e9s \u00e9volutives en temps r\u00e9el. Cet article combinera Laravel Echo<\/a> pour cr\u00e9er un \u00e9v\u00e9nement de diffusion en temps r\u00e9el vers le serveur Pusher et afficher le contenu sur l’interface publique avec Vue.js.<\/p>\n Vue.js<\/a> est notre framework frontend de pr\u00e9dilection. Vue.js est un framework frontend JavaScript progressif connu pour son approche simple et facile \u00e0 apprendre du d\u00e9veloppement frontend. Nous allons utiliser Vue.js pour d\u00e9velopper notre syst\u00e8me de commentaires en temps r\u00e9el.<\/p>\n Si le syst\u00e8me de commentaires que nous avons d\u00e9crit ci-dessus correspond \u00e0 ce que vous voulez, passons \u00e0 sa construction.<\/p>\n L’installation et la configuration de Laravel, Echo et Pusher sont simples car Laravel a fait toutes les t\u00e2ches en arri\u00e8re-plan en installant et en configurant Laravel Echo pour qu’il fonctionne parfaitement avec Pusher.<\/p>\n Tout d’abord, nous allons commencer par installer et configurer Laravel, notre framework PHP<\/a> backend. Vous pouvez r\u00e9cup\u00e9rer une nouvelle instance de Laravel avec cette commande, \u00e0 condition que vous ayez install\u00e9 le CLI de Laravel<\/a> de mani\u00e8re globale :<\/p>\n Votre nouvelle instance de Laravel sera install\u00e9e dans un r\u00e9pertoire appel\u00e9 commenter. Ouvrez le r\u00e9pertoire dans notre VSCode<\/a> et rendez-vous \u00e0 l’int\u00e9rieur dans notre terminal :<\/p>\n Avant de d\u00e9marrer notre serveur de d\u00e9veloppement, installons et configurons certains paquets n\u00e9cessaires qui seront utilis\u00e9s pour le projet.<\/p>\n Ex\u00e9cutez cette commande pour installer le SDK PHP de Pusher :<\/p>\n Ex\u00e9cutez cette commande pour installer les paquets NPM n\u00e9cessaires pour le frontend Vue.js :<\/p>\n Ensuite, nous allons configurer l’\u00e9cho Laravel et Pusher. Ouvrez votre fichier resources\/js\/bootstrap.js<\/strong> et collez les scripts suivants :<\/p>\n Vous remarquerez dans le script ci-dessus que nous ne faisons que configurer l’instance Axios avec nos configurations par d\u00e9faut. Ensuite, nous allons configurer Laravel Echo pour utiliser Pusher et ses configurations.<\/span><\/p>\n Ensuite, nous allons cr\u00e9er et configurer notre base de donn\u00e9es pour stocker les commentaires pour la persistance. Nous utiliserons SQLite, mais vous pouvez utiliser le client de base de donn\u00e9es de ton choix.<\/p>\n Cr\u00e9ez un fichier database.sqlite<\/strong> dans le r\u00e9pertoire de la base de donn\u00e9es et mettez \u00e0 jour votre fichier .env<\/strong> comme suit :<\/p>\n Ensuite, ex\u00e9cutez cette commande pour cr\u00e9er la migration Comment et la mettre \u00e0 jour avec les scripts suivants :<\/p>\n Ouvrez le fichier <\/span>database\/migrations\/xxxx_create_comments_table_xxxx.php<\/strong> et collez ce code :<\/span><\/p>\n Cela cr\u00e9era une nouvelle table de base de donn\u00e9es de commentaires et ajoutera des colonnes de contenu et d’auteur.<\/p>\n Enfin, pour cr\u00e9er la migration, ex\u00e9cutez cette commande :<\/p>\n Dans Laravel, les mod\u00e8les sont importants – ils sont le moyen le plus s\u00fbr de communiquer avec notre base de donn\u00e9es et de g\u00e9rer les donn\u00e9es.<\/p>\n Pour cr\u00e9er un mod\u00e8le dans Laravel, nous allons ex\u00e9cuter la commande suivante :<\/p>\n Ensuite, ouvrez le fichier app\/models\/Comment.php<\/strong> et collez le code suivant :<\/p>\n Les contr\u00f4leurs sont cruciaux car ils abritent toute la logique, commerciale ou autre, de nos applications. Cr\u00e9ons-en un pour g\u00e9rer la logique des commentaires :<\/p>\n Ensuite, ouvrez le fichier app\/Http\/Controllers\/CommentController.php<\/strong> et collez le code suivant :<\/p>\n Le contr\u00f4leur poss\u00e8de trois m\u00e9thodes diff\u00e9rentes : renvoyer une vue des commentaires, r\u00e9cup\u00e9rer tous les commentaires et stocker un nouveau commentaire, respectivement. Plus important encore, nous d\u00e9clenchons un \u00e9v\u00e9nement chaque fois que nous stockons un nouveau commentaire, que le frontend \u00e9coutera pour mettre \u00e0 jour la page concern\u00e9e avec le nouveau commentaire en temps r\u00e9el \u00e0 l’aide de Pusher et de Laravel Echo.<\/p>\n Pour configurer correctement nos routes, nous devrons mettre \u00e0 jour de nombreux fichiers<\/a>, alors commen\u00e7ons.<\/p>\n Tout d’abord, nous allons mettre \u00e0 jour le fichier api.php<\/strong> dans le r\u00e9pertoire routes. Ouvrez le fichier et ajoutez le code suivant :<\/p>\n Ensuite, ouvrez le fichier channels.php<\/strong> dans le m\u00eame r\u00e9pertoire et ajoutez le code suivant pour autoriser l’\u00e9v\u00e9nement que nous avons d\u00e9clench\u00e9 plus t\u00f4t :<\/p>\n Ensuite, ouvrez le fichier web.php<\/strong> dans le m\u00eame r\u00e9pertoire et ajoutez le code suivant pour rediriger notre demande vers la page d’accueil, o\u00f9 Vue.js la r\u00e9cup\u00e9rera :<\/p>\n Enfin, nous allons cr\u00e9er un nouveau fichier blade dans le r\u00e9pertoire resources\/views<\/strong> appel\u00e9 comments.blade.php<\/strong> et ajouter le code suivant :<\/p>\n Le script ajoute un titre d’article et un composant Vue pour afficher et ajouter de nouveaux commentaires au titre d’article cr\u00e9\u00e9 ci-dessus.<\/p>\n Ex\u00e9cutez les commandes suivantes pour tester si vous obtenez tout correctement :<\/p>\nCe que nous allons construire<\/h2>\n
Aper\u00e7u des blocs de construction : Laravel, Pusher et Vue<\/h2>\n
Laravel<\/h3>\n
Pusher<\/h3>\n
Vue.js<\/h3>\n
Construire le syst\u00e8me de commentaires<\/h2>\n
1. Installer et configurer Laravel, Pusher et Echo<\/h3>\n
laravel new commenter<\/code><\/pre>\ncd commenter\n\ncode .<\/code><\/pre>\ncomposer require pusher\/pusher-php-server<\/code><\/pre>\nnpm install --save laravel-echo pusher-js<\/code><\/pre>\nwindow._ = require(\"lodash\");\nwindow.axios = require(\"axios\");\nwindow.moment = require(\"moment\");\nwindow.axios.defaults.headers.common[\"X-Requested-With\"] = \"XMLHttpRequest\";\nwindow.axios.defaults.headers.post[\"Content-Type\"] =\n \"application\/x-www-form-urlencoded\";\nwindow.axios.defaults.headers.common.crossDomain = true;\nwindow.axios.defaults.baseURL = \"\/api\";\nlet token = document.head.querySelector('meta[name=\"csrf-token\"]');\nif (token) {\n window.axios.defaults.headers.common[\"X-CSRF-TOKEN\"] = token.content;\n} else {\n console.error(\"CSRF token not found\");\n}\n\n\n\/**\n * Echo exposes an expressive API for subscribing to channels and listening\n * for events that Laravel broadcasts. Echo and event broadcasting\n * allows your team to build robust real-time web applications quickly.\n *\/\nimport Echo from \"laravel-echo\";\nwindow.Pusher = require(\"pusher-js\");\nwindow.Echo = new Echo({\n broadcaster: \"pusher\",\n key: process.env.MIX_PUSHER_APP_KEY,\n cluster: process.env.MIX_PUSHER_APP_CLUSTER,\n forceTLS: true\n});<\/code><\/pre>\n2. Configuration et migration de la base de donn\u00e9es<\/h3>\n
DB_CONNECTION=sqlite\nDB_DATABASE=\/Users\/all\/paths\/to\/project\/commenter_be\/database\/database.sqlite\nDB_HOST=127.0.0.1\nDB_PORT=3306\nDB_USERNAME=root\nDB_PASSWORD=<\/code><\/pre>\nphp artisan make:migration create_comments_table<\/code><\/pre>\n<?php\nuse Illuminate\\Database\\Migrations\\Migration;\nuse Illuminate\\Database\\Schema\\Blueprint;\nuse Illuminate\\Support\\Facades\\Schema;\nclass CreateCommentsTable extends Migration\n{\n \/**\n * Run the migrations.\n *\n * @return void\n *\/\n public function up()\n {\n Schema::create('comments', function (Blueprint $table) {\n $table->id();\n $table->string('content');\n $table->string('author');\n $table->timestamps();\n });\n }\n \/**\n * Reverse the migrations.\n *\n * @return void\n *\/\n public function down()\n {\n Schema::dropIfExists('comments');\n }\n}<\/code><\/pre>\nphp artisan migrate<\/code><\/pre>\n3. Cr\u00e9er des mod\u00e8les<\/h3>\n
php artisan make:model Comment<\/code><\/pre>\n<?php\nnamespace App\\Models;\nuse Illuminate\\Database\\Eloquent\\Factories\\HasFactory;\nuse Illuminate\\Database\\Eloquent\\Model;\nclass Comment extends Model\n{\n use HasFactory;\n protected $fillable = ['content', 'author'];\n}<\/code>\n<\/code><\/pre>\nThe $fillable array allows us to create and update the model in mass.<\/pre>\n
4. Cr\u00e9ation de contr\u00f4leurs<\/h3>\n
php artisan make:controller CommentController<\/code><\/pre>\n<?php\nnamespace App\\Http\\Controllers;\nuse App\\Models\\Comment;\nuse App\\Events\\CommentEvent;\nuse Illuminate\\Http\\Request;\n\nclass CommentController extends Controller\n{\n \/\/\n public function index()\n {\n return view('comments');\n }\n public function fetchComments()\n {\n $comments = Comment::all();\n return response()->json($comments);\n }\n public function store(Request $request)\n {\n $comment = Comment::create($request->all());\n event(new CommentEvent($comment));\n return $comment;\n }\n}<\/code><\/pre>\n5. Cr\u00e9er des routes<\/h3>\n
use App\\Http\\Controllers\\CommentController;\n\/\/...\n\nRoute::get('\/', [CommentController::class, 'index']);\nRoute::get('\/comments', [CommentController::class, 'fetchComments']);\nRoute::post('\/comments', [CommentController::class, 'store']);<\/code><\/pre>\nBroadcast::channel('comment', function ($user) {\n return true;\n});<\/code><\/pre>\nuse App\\Http\\Controllers\\CommentController;\n\/\/...\n\nRoute::get('\/', [CommentController::class, 'index']);<\/code><\/pre>\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\" \/>\n <title>Commenter<\/title>\n <meta name=\"csrf-token\" content=\"{{ csrf_token() }}\">\n <meta name=\"viewport\" content=\"width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0\">\n\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/bulma\/0.7.1\/css\/bulma.min.css\" \/>\n <style>\n .container {\n margin: 0 auto;\n position: relative;\n width: unset;\n }\n #app {\n width: 60%;\n margin: 4rem auto;\n }\n .question-wrapper {\n text-align: center;\n }\n <\/style>\n<\/head>\n<body>\n\n\n <div id=\"app\">\n <div class=\"container\">\n <div class=\"question-wrapper\">\n <h5 class=\"is-size-2\" style=\"color: #220052;\">\n What do you think about <span style=\"color: #47b784;\">Dogs<\/span>?<\/h5>\n <br>\n <a href=\"#Form\" class=\"button is-medium has-shadow has-text-white\" style=\"background-color: #47b784\">Comment<\/a>\n <\/div>\n <br><br>\n <comments><\/comments>\n <new-comment><\/new-comment>\n <\/div>\n <\/div>\n <script async src=\"{{mix('js\/app.js')}}\"><\/script>\n<\/body>\n<\/html><\/code><\/pre>\nnpm run watch\n\nphp artisan serve<\/code><\/pre>\n
![\"Live](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/08\/Commenting-System-Laravel.png\")