Bangun Sistem Komentar Langsung Laravel

Untuk membangun kepercayaan di komunitas online atau blog Anda, satu elemen penting yang Anda inginkan adalah sistem komentar langsung Laravel yang dirancang dengan baik.

Namun, tidak mudah untuk melakukannya dengan benar pada percobaan pertama kecuali jika Anda mengandalkan sistem komentar yang dihosting sendiri seperti Disqus atau Commento, yang masing-masing memiliki kekurangannya sendiri. Mereka memiliki data Anda, menawarkan desain dan penyesuaian terbatas, dan yang terpenting, mereka tidak gratis.

Dengan keterbatasan ini, jika ide untuk membangun sistem komentar real-time Anda — dengan manfaat mengontrol data Anda, merancang dan menyesuaikan tampilan dan nuansa agar sesuai dengan blog Anda — menarik bagi Anda, teruslah membaca.

Artikel ini akan mengajarkan Anda bagaimana mengembangkan sistem komentar yang dirancang dengan baik dan real-time dengan fungsi komentar yang berbeda. Mengikuti prinsip membangun aplikasi chat real-time dengan Vue.js dan Socket.io, kita akan menggunakan Laravel, Pusher, dan React untuk mengembangkan sistem komentar real-time.

Mari selami!

Apa yang Akan Kami Bangun

Kami akan membangun sistem komentar waktu nyata yang dapat diintegrasikan ke situs web atau blog apa pun untuk membangun kepercayaan di komunitas.

Ikhtisar Blok Bangunan: Laravel, Pendorong, dan Vue

Sebelum kita masuk ke dalam pengembangan, mari kita bahas teknologi yang akan kita gunakan untuk mengembangkan sistem komentar real-time kita.

Laravel

Laravel adalah kerangka kerja PHP berorientasi MVC open-source. Ini digunakan untuk membangun aplikasi web PHP sederhana hingga kompleks yang dikenal dengan sintaksisnya yang elegan. Mempelajari apa yang Laravel penting untuk membangun sistem komentar ini.

pendorong

Pusher memungkinkan pengembang untuk membuat fitur real-time dalam skala besar. Artikel ini akan menggabungkan Laravel Echo untuk membuat acara siaran real-time ke server Pusher dan menampilkan konten di frontend dengan Vue.js.

Vue.js

Vue.js adalah kerangka kerja frontend pilihan kami. Vue.js adalah kerangka kerja frontend JavaScript progresif yang dikenal karena pendekatannya yang mudah dipelajari dan lugas untuk pengembangan frontend. Kami akan menggunakan Vue.js untuk mengembangkan sistem komentar waktu nyata kami.

Membangun Sistem Komentar

Jika sistem komentar yang kami uraikan di atas terdengar seperti yang Anda inginkan, mari kita lanjutkan untuk membangunnya.

1. Instal dan Setup Laravel, Pusher, dan Echo

Instalasi dan pengaturan Laravel, Echo, dan Pusher sangat mudah karena Laravel telah melakukan semua tugas latar belakang dengan menyiapkan dan mengonfigurasi Laravel Echo untuk bekerja dengan Pusher dengan sempurna.

Pertama, kita akan mulai dengan menginstal dan mengonfigurasi Laravel, kerangka kerja PHP backend kita. Anda dapat mengambil instance Laravel baru dengan perintah ini, asalkan Anda telah menginstal Laravel CLI secara global:

 laravel new commenter

Instance Laravel baru Anda akan dipasang di folder bernama commenter. Mari kita buka folder di VSCode kita dan arahkan ke folder itu di terminal kita:

 cd commenter code .

Sebelum kita memulai server pengembangan kita, mari kita instal dan konfigurasikan beberapa paket yang diperlukan yang akan digunakan untuk proyek tersebut.

Jalankan perintah ini untuk menginstal Pusher PHP SDK:

 composer require pusher/pusher-php-server

Jalankan perintah ini untuk menginstal paket NPM yang diperlukan untuk frontend Vue.js:

 npm install --save laravel-echo pusher-js

Selanjutnya, kita akan mengkonfigurasi Laravel Echo dan Pusher. Buka file resources/js/bootstrap.js Anda dan rekatkan skrip berikut:

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

Anda akan melihat dari skrip di atas bahwa kami hanya mengonfigurasi instance Axios dengan konfigurasi default kami. Selanjutnya, kita akan mengkonfigurasi Laravel Echo untuk menggunakan Pusher dan konfigurasinya.

2. Pengaturan dan Migrasi Basis Data

Selanjutnya, kita akan membuat dan mengatur database kita untuk menyimpan komentar untuk kegigihan. Kami akan menggunakan SQLite, meskipun Anda dapat menggunakan klien database pilihan Anda.

Buat file database.sqlite di dalam folder database dan perbarui file .env Anda sebagai berikut:

 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=

Selanjutnya, jalankan perintah ini untuk membuat migrasi Komentar dan perbarui dengan skrip berikut:

 php artisan make:migration create_comments_table

Buka file database/migrations/xxxx_create_comments_table_xxxx.php dan paste di kode ini:

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

Ini akan membuat tabel database komentar baru dan menambahkan kolom konten dan penulis.

Terakhir, untuk membuat migrasi, jalankan perintah ini:

 php artisan migrate

3. Membuat Model

Di Laravel, model sangat penting — model adalah cara paling pasti untuk berkomunikasi dengan database kami dan menangani manajemen data.

Untuk membuat model di Laravel, kita akan menjalankan perintah berikut:

 php artisan make:model Comment

Selanjutnya, buka file app/models/Comment.php dan paste kode berikut:

 <?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']; } Array $fillable memungkinkan kita untuk membuat dan memperbarui model secara massal.

4. Membuat Pengontrol

Pengontrol sangat penting karena mereka menampung semua logika, bisnis, dan lainnya, dari aplikasi kita, jadi mari buat satu untuk menangani logika komentar:

 php artisan make:controller CommentController

Selanjutnya, buka file app/Http/Controllers/CommentController.php dan paste kode berikut:

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

Kontroler memiliki tiga metode berbeda: mengembalikan tampilan komentar, mengambil semua komentar, dan menyimpan komentar baru. Yang terpenting, kami menjalankan acara setiap kali kami menyimpan komentar baru, yang akan didengarkan oleh frontend untuk memperbarui halaman yang relevan dengan komentar baru secara real-time menggunakan Pusher dan Laravel Echo.

5. Membuat Rute

Untuk mengonfigurasi rute kita dengan benar, kita perlu memperbarui banyak file, jadi mari kita mulai.

Pertama, kita akan memperbarui file api.php di folder rute. Buka file dan tambahkan kode berikut:

 use App\Http\Controllers\CommentController; //... Route::get('/', [CommentController::class, 'index']); Route::get('/comments', [CommentController::class, 'fetchComments']); Route::post('/comments', [CommentController::class, 'store']);

Selanjutnya, buka file channels.php di folder yang sama dan tambahkan kode berikut untuk mengotorisasi acara yang kita aktifkan sebelumnya:

 Broadcast::channel('comment', function ($user) { return true; });

Selanjutnya, buka file web.php di folder yang sama dan tambahkan kode berikut untuk mengarahkan permintaan kita ke beranda, tempat Vue.js akan mengambilnya:

 use App\Http\Controllers\CommentController; //... Route::get('/', [CommentController::class, 'index']);

Terakhir, kita akan membuat file blade baru di folder resources/views bernama comments.blade.php dan menambahkan kode berikut:

 <!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> <div class="container"> <div class="question-wrapper"> <h5 class="is-size-2"> What do you think about <span>Dogs</span>?</h5> <br> <a href="#Form" class="button is-medium has-shadow has-text-white">Comment</a> </div> <br><br> <comments></comments> <new-comment></new-comment> </div> </div> <script async src="{{mix('js/app.js')}}"></script> </body> </html>

Script menambahkan judul posting dan komponen Vue untuk menampilkan dan menambahkan komentar baru ke judul posting yang dibuat di atas.

Jalankan perintah berikut untuk menguji apakah Anda mendapatkan semuanya dengan benar:

 npm run watch php artisan serve

Jika Anda disajikan dengan halaman ini, Anda siap untuk pindah ke langkah berikutnya dalam artikel ini.

6. Menyiapkan Vue (Frontend)

Kami akan membuat dan mengatur instance Vue kami untuk membuat dan menampilkan semua komentar yang dibuat pada posting ini.

Kami akan mulai dengan menyiapkan toko Vuex kami. Buat file berikut di folder resource/js/store.

Buat Status Komentar

Buat actions.js dan tambahkan kode berikut:

 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;

File Action membuat panggilan ke titik akhir komentar di backend.

Selanjutnya, buat file getters.js dan tambahkan kode berikut:

 let getters = { comments: state => { return state.comments; } }; export default getters;

File Getter digunakan untuk mengambil semua komentar di negara bagian.

Buat file mutasi.js dan rekatkan ke dalam kode berikut:

 let mutations = { GET_COMMENTS(state, comments) { state.comments = comments; }, ADD_COMMENT(state, comment) { state.comments = [...state.comments, comment]; } }; export default mutations;

Selanjutnya, buat file state.js dan rekatkan ke dalam kode berikut:

 let state = { comments: [] }; export default state;

Terakhir, kita akan menambahkan semuanya ke file index.js yang diekspor ke instance Vue, buat file index.js dan tambahkan yang berikut:

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

Buat Komponen

Terakhir, kita akan membuat komponen komentar untuk ditampilkan dan menambahkan komentar baru. Mari kita mulai dengan membuat komponen komentar tunggal.

Buat folder di folder resource/js bernama components, tambahkan comment.vue dan tambahkan kode berikut:

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

Selanjutnya, buat file berikut bernama comments.vue di folder yang sama dan tambahkan kode berikut:

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

Terakhir, buat file bernama NewComment.vue dan tambahkan kode berikut:

 <template> <div class="box has-shadow has-background-white"> <form @keyup.enter="postComment"> <div class="field has-margin-top"> <div class="field has-margin-top"> <label class="label">Your name</label> <div class="control"> <input type="text" placeholder="Your name" class="input is-medium" v-model="comment.author" /> </div> </div> <div class="field has-margin-top"> <label class="label">Your comment</label> <div class="control"> <textarea name="comment" class="input is-medium" autocomplete="true" v-model="comment.content" placeholder="lorem ipsum" ></textarea> </div> </div> <div class="control has-margin-top"> <button :class="{ 'is-loading': submit }" class="button has-shadow is-medium has-text-white" :disabled="!isValid" @click.prevent="postComment" type="submit" > Submit </button> </div> </div> </form> <br /> </div> </template> <script> export default { name: "NewComment", data() { return { submit: false, comment: { content: "", author: "", }, }; }, methods: { postComment() { this.submit = true; this.$store .dispatch("ADD_COMMENT", this.comment) .then((response) => { this.submit = false; if (response.data) console.log("success"); }) .catch((err) => { console.log(err); this.submit = false; }); }, }, computed: { isValid() { return this.comment.content !== "" && this.comment.author !== ""; }, }, }; </script> <style scoped> .has-margin-top { margin-top: 15px; } </style>

Sekarang, buka file app.js dan tambahkan kode berikut untuk mendaftarkan komponen Vue yang Anda buat sebelumnya:

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

Ringkasan

Dan itu saja! Anda baru saja mempelajari cara membangun sistem komentar langsung untuk situs Anda menggunakan Laravel.

Kami telah membahas manfaat membuat dan mengelola sistem komentar dalam upaya Anda membangun kepercayaan di komunitas atau blog Anda. Kami juga telah mengeksplorasi bagaimana mengembangkan sistem komentar yang dirancang dengan baik dan real-time dari bawah ke atas, memanfaatkan fungsi komentar yang berbeda.

Anda dapat mengkloning kode sumber proyek ini di repo Github ini.

Apa pendapat Anda tentang sistem komentar langsung Laravel yang kami bangun bersama? Beri tahu kami di komentar!