Bir Laravel Canlı Yorum Sistemi Oluşturun

Çevrimiçi topluluğunuzda veya blogunuzda güven oluşturmak için isteyeceğiniz önemli bir unsur, iyi tasarlanmış bir Laravel canlı yorum sistemidir.

Bununla birlikte, Disqus veya Commento gibi her biri kendi dezavantajlarıyla gelen kendi kendine barındırılan yorum sistemlerine güvenmediğiniz sürece, ilk denemede bunu doğru yapmak kolay değildir. Verilerinize sahipler, sınırlı tasarımlar ve özelleştirmeler sunuyorlar ve en önemlisi ücretsiz değiller.

Bu sınırlamalarla, verilerinizi kontrol etme, blogunuza uyacak şekilde görünüm ve hissi tasarlama ve özelleştirme avantajlarıyla gerçek zamanlı yorum sisteminizi oluşturma fikri size çekici geliyorsa, okumaya devam edin.

Bu makale, farklı yorumlama işlevlerine sahip iyi tasarlanmış ve gerçek zamanlı bir yorumlama sisteminin nasıl geliştirileceğini öğretecektir. Vue.js ve Socket.io ile gerçek zamanlı bir sohbet uygulaması oluşturma ilkelerini izleyerek, gerçek zamanlı yorum sistemini geliştirmek için Laravel, Pusher ve React kullanacağız.

Hadi dalalım!

Ne İnşa Edeceğiz

Toplulukta güven oluşturmak için herhangi bir web sitesine veya bloga entegre edilebilecek gerçek zamanlı bir yorum sistemi oluşturacağız.

Yapı Taşlarına Genel Bakış: Laravel, Pusher ve Vue

Geliştirmeye dalmadan önce, gerçek zamanlı yorum sistemimizi geliştirmek için kullanacağımız teknolojileri tartışalım.

laravel

Laravel, açık kaynaklı bir MVC odaklı PHP çerçevesidir. Zarif sözdizimleriyle bilinen basitten karmaşığa PHP web uygulamaları oluşturmak için kullanılır. Bu yorum sistemini oluşturmak için Laravel'in ne kadar önemli olduğunu öğrenmek.

itici

Pusher, geliştiricilerin ölçekte gerçek zamanlı özellikler oluşturmasını sağlar. Bu makale, Pusher sunucusuna gerçek zamanlı bir yayın olayı oluşturmak ve içeriği Vue.js ile ön uçta görüntülemek için Laravel Echo'yu birleştirecektir.

Vue.js

Vue.js, tercih ettiğimiz ön uç çerçevemizdir. Vue.js, öğrenmesi kolay ve ön uç geliştirmeye yönelik basit yaklaşımıyla bilinen aşamalı bir JavaScript ön uç çerçevesidir. Gerçek zamanlı yorum sistemimizi geliştirmek için Vue.js kullanacağız.

Yorumlama Sistemini Oluşturma

Yukarıda özetlediğimiz yorum sistemi istediğiniz gibi görünüyorsa, onu oluşturmaya devam edelim.

1. Laravel, Pusher ve Echo'yu kurun ve kurun

Laravel, Echo ve Pusher'ın kurulumu ve ayarlanması, Laravel'in tüm arka plan görevlerini Laravel Echo'yu Pusher ile mükemmel çalışacak şekilde ayarlayarak ve yapılandırarak yaptığı için basittir.

İlk olarak, arka uç PHP çerçevemiz olan Laravel'i yükleyip yapılandırarak başlayacağız. Laravel CLI'yi global olarak yüklediyseniz, bu komutla yeni bir Laravel örneği alabilirsiniz:

 laravel new commenter

Yeni Laravel örneğiniz yorumcu adlı bir klasöre yüklenecek. Klasörü VSCode'umuzda açalım ve terminalimizde ona gidelim:

 cd commenter code .

Geliştirme sunucumuza başlamadan önce proje için kullanılacak bazı gerekli paketleri kurup yapılandıralım.

Pusher PHP SDK'yı kurmak için bu komutu çalıştırın:

 composer require pusher/pusher-php-server

Vue.js ön ucu için gerekli NPM paketlerini kurmak için bu komutu çalıştırın:

 npm install --save laravel-echo pusher-js

Ardından, Laravel Echo ve Pusher'ı yapılandıracağız. Resources/js/bootstrap.js dosyanızı açın ve aşağıdaki komut dosyalarını yapıştırın:

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

Yukarıdaki komut dosyasından, yalnızca varsayılan yapılandırmalarımızla Axios örneğini yapılandırdığımızı fark edeceksiniz. Ardından, Pusher ve yapılandırmalarını kullanmak için Laravel Echo'yu yapılandıracağız.

2. Veritabanı Kurulumu ve Taşıma

Ardından, kalıcılık için yorumları depolamak için veritabanımızı oluşturup ayarlayacağız. SQLite kullanacağız, ancak istediğiniz herhangi bir veritabanı istemcisini kullanabilirsiniz.

Veritabanı klasörü içinde bir database.sqlite dosyası oluşturun ve .env dosyanızı aşağıdaki gibi güncelleyin:

 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=

Ardından, Yorum geçişini oluşturmak için bu komutu çalıştırın ve aşağıdaki komut dosyalarıyla güncelleyin:

 php artisan make:migration create_comments_table

database/migrations/xxxx_create_comments_table_xxxx.php dosyasını açın ve şu kodu yapıştırın:

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

Bu, yeni bir yorum veritabanı tablosu oluşturacak ve içerik ve yazar sütunları ekleyecektir.

Son olarak, geçişi oluşturmak için şu komutu çalıştırın:

 php artisan migrate

3. Model Oluşturma

Laravel'de modeller önemlidir — veritabanımızla iletişim kurmanın ve veri yönetimini ele almanın en kesin yoludur.

Laravel'de bir model oluşturmak için aşağıdaki komutu çalıştıracağız:

 php artisan make:model Comment

Ardından, app/models/Comment.php dosyasını açın ve aşağıdaki kodu yapıştırın:

 <?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']; } $fillable dizisi, modeli toplu olarak oluşturmamızı ve güncellememizi sağlar.

4. Denetleyiciler Oluşturma

Denetleyiciler çok önemlidir çünkü uygulamalarımızın tüm mantığını, işini ve diğer özelliklerini barındırırlar, bu yüzden yorum yapma mantığını işlemek için bir tane oluşturalım:

 php artisan make:controller CommentController

Ardından, app/Http/Controllers/CommentController.php dosyasını açın ve aşağıdaki kodu yapıştırın:

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

Denetleyicinin üç farklı yöntemi vardır: sırasıyla bir yorum görünümü döndür, tüm yorumları getir ve yeni bir yorum kaydet. En önemlisi, her yeni yorumu kaydettiğimizde bir olayı başlatırız; ön uç, Pusher ve Laravel Echo kullanarak ilgili sayfayı yeni yorumla gerçek zamanlı olarak güncellemek için dinler.

5. Rota Oluşturma

Rotalarımızı doğru bir şekilde yapılandırmak için birçok dosyayı güncellememiz gerekecek, o yüzden başlayalım.

İlk olarak route klasöründeki api.php dosyasını güncelleyeceğiz. Dosyayı açın ve aşağıdaki kodu ekleyin:

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

Ardından, aynı klasördeki channel.php dosyasını açın ve daha önce başlattığımız olayı yetkilendirmek için aşağıdaki kodu ekleyin:

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

Ardından, aynı klasördeki web.php dosyasını açın ve isteğimizi Vue.js'nin alacağı ana sayfaya yönlendirmek için aşağıdaki kodu ekleyin:

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

Son olarak, yorumlar.blade.php adlı kaynaklar/görünümler klasöründe yeni bir bıçak dosyası oluşturacağız ve aşağıdaki kodu ekleyeceğiz:

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

Komut dosyası, yukarıda oluşturulan yazı başlığına yeni yorumları görüntülemek ve eklemek için bir yazı başlığı ve bir Vue bileşeni ekler.

Her şeyi doğru şekilde alıp almadığınızı test etmek için aşağıdaki komutları çalıştırın:

 npm run watch php artisan serve

Bu sayfa size sunulduysa, bu makaledeki bir sonraki adıma geçmeye hazırsınız demektir.

6. Vue (Ön Uç) Kurulumu

Bu gönderide yapılan tüm yorumları oluşturmak ve görüntülemek için Vue örneğimizi oluşturup ayarlayacağız.

Vuex mağazamızı kurmaya başlayacağız. Resource/js/store klasöründe aşağıdaki dosyaları oluşturun.

Yorum Durumu Oluştur

action.js oluşturun ve aşağıdaki kodu ekleyin:

 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;

Eylem dosyası, arka uçtaki yorum uç noktasına bir çağrı yapar.

Ardından, bir getters.js dosyası oluşturun ve aşağıdaki kodu ekleyin:

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

Getter dosyası, durumdaki tüm yorumları almak için kullanılır.

Mutasyonlar.js dosyasını oluşturun ve aşağıdaki koda yapıştırın:

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

Ardından, bir state.js dosyası oluşturun ve bunu aşağıdaki koda yapıştırın:

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

Son olarak, her şeyi Vue örneğine aktarılan index.js dosyasına ekleyeceğiz, bir index.js dosyası oluşturacağız ve aşağıdakileri ekleyeceğiz:

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

Bileşenler Oluşturun

Son olarak, yeni yorumları görüntülemek ve eklemek için yorum bileşenlerimizi oluşturacağız. Tek yorum bileşenini oluşturarak başlayalım.

Resource/js klasöründe component adı verilen bir klasör oluşturun, comment.vue dosyasını ekleyin ve aşağıdaki kodu ekleyin:

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

Ardından, aynı klasörde yorumlar.vue adlı aşağıdaki dosyayı oluşturun ve aşağıdaki kodu ekleyin:

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

Son olarak, NewComment.vue adlı bir dosya oluşturun ve aşağıdaki kodu ekleyin:

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

Şimdi app.js dosyasını açın ve daha önce oluşturduğunuz Vue bileşenlerini kaydetmek için aşağıdaki kodu ekleyin:

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

Özet

Ve bu kadar! Laravel'i kullanarak siteniz için nasıl canlı bir yorum sistemi oluşturacağınızı öğrendiniz.

Topluluğunuzda veya blogunuzda güven oluşturma arayışınızda bir yorum sistemi oluşturmanın ve yönetmenin faydalarını tartıştık. Ayrıca, farklı yorumlama işlevlerini kullanarak, sıfırdan iyi tasarlanmış ve gerçek zamanlı bir yorum sisteminin nasıl geliştirileceğini araştırdık.

Bu projenin kaynak kodunu bu Github deposunda klonlayabilirsiniz.

Birlikte kurduğumuz Laravel canlı yorum sistemi hakkında ne düşünüyorsunuz? Yorumlarda bize bildirin!