Create a Comments System with Laravel And Vuejs

by Ahmed Khan  July 6, 2017

In my previous article on Laravel and Vue.js, I created a realtime chatroom using Laravel, Vuej.s and Pusher. Thank you all for your kind words and the 60 stars on the GitHub repository for this.

Today, I will use Laravel and Vue.js to create something that is useful at every website – a Laravel comment system. This system is not as real time as the chatroom but you will be able to see the new comments and replies for a post/page instantly.

I will create a separate comment component in view which can be added to any web page and blog post. Registered members of the system could perform the following  actions:

  • Add new comments
  • Reply to comments
  • Up and Down votes
  • Mark spam comments

This system will be based on the following technologies:

  • Bootstrap
  • Loadash
  • Vue-resource
  • Laravel Mix

The complete code for this comment system can be found in the github repo. Hear here for a live demo of the application.

Create Migration Tables for Comments

First, I need to create tables in which I am going to save the comments, mark comments spam and save the records for voting.

Start with the following command to create a new migration file:

Now open the newly created file and paste the following code inside the Up() method:

The schema for the tables are simple. First I created the comments table in which I am going to save the comments. In the second table (comment_user_vote), I am going to save the users who have voted on the comments. In the last table, comment_spam, I will save the comment id of the comments that the users have marked as spam.

Now, run the following command to migrate all the tables:

Create Auth for Comment System

I will create the Laravel built-in auth so that only the registered user can add comments.

Start with the following command:

Create Models for the Comment System

Let’s first create the model for the comments table.

Start with the following command to create the model:

Open the newly created file (located in the app folder). Replace the existing code with the following code:

In the above code I defined the $fillable columns, $dates columns of the table and created replies() method which has the one-many relationship with its own table.

Now create a model for comment_user_vote. Run the following command:

Now open the new created file and replace the existing code with the following:

Next, create the model for the last table comment_spam through the following command:

Open the file and replace the existing code with the following code:

Create the Controller for Comment

To create a controller for comment, run the following command:

Open the newly created file and start creating methods in it.

Save a new Comment

Start by adding a method which will save a new comment or reply:

The above code is pretty simple as I am getting the inputs. The code also makes sure that they exists and then save it all.

Voting And Marking Comments as Spam

Let’s now create a new function through which I can handle the upvoting and downvoting of comments.This will also handle the marking of comments as spam.

The above function has three parameters. The first parameter is the request which is incoming, the second one is the comment Id, and the third is the type. Through the $type variable, I will check the user action (vote the comment or mark it spam). Next, according to the type, the request is validated. If the type is vote, I first get the comment and then check the user intention ( i.e up or downvote the comment). Then I perform the operation and save the comment.  Marking a comment as spam follows a similar process.

Get the Comments

Next, I will create a function that will get all the comments and the replies.

The above code is simple, except for this part:

In this snippet, I’m first checking whether the user is logged in. Next, I will check whether he have voted a comment or marked it spam. If he have voted on a comment, I will save his (up or down) vote.  Next, I will check whether the user has marked any comment as spam. If  yes, then I will set the boolean $spam to true so that the spam comment will not be visible to the user. The replies() method will get the replies for that comment.

Create the Routes for Comments

Go to the routes folder and open the web.php file. Add the following routes to it:

At this point, the backend of the comment system is done. I will now create the frontend for displaying comments.

Comment Component Using VueJS

For of all, run the following command to install the required dependencies:

Once done, run the following command to install vue-resource.

Now head to resources/assets/js/components and create a new file Comments.vue. Leave the file empty for now. Now go back a step and open app.js to add new reference.

Add the following line after require('./bootstrap'):

After the Vue instance, add the following line:

And after the Vue.component add this line:

Create the Comment Component Template

Open the comment.vue file (created earlier) and add the comment template in it. Paste the following code in it:

In this template, I have created the form for adding comments. I have also added a condition that if the user is logged in, then the button will be visible, else he will be redirected to the login page.

Next are the divs, where comments and the replies will be displayed. I have also added the onclick methods for vote up, vote down and mark spam buttons. In this template, if a user wants to reply to a comment, a form will open up for posting the comment.

Let’s now create a script and add these methods in it.

Create a Comment Component Script

Now after the closing tag of </template>, paste the following lines of code:

Here is a brief explanation of the code above. In the first line, I have required the lodash library to filter comment by vote. Next, I have defined props for commentUrl and then added variables in the data().

Following are the most important methods:

fetchComments()

This method will run when the component is mounted to fetch all the comments for that page. This is why it is used inside mounted().

openComment(index)

This method will open reply comment box for a comment. This method is called by the reply button.

The method first checks if the user is logged in, and then opens the reply box. If the box is already open, it will close the box.

replyCommentBox(index)

This method is similar to openComment(). The difference is that this method opens the comment box for the replies of comments. Check out the image below:

saveComment()

This function will save the user comment.

This function first checks if the comment is null. If it’s null, it will display the error message. If not, it will first bind the params and then send the post request to comments/. Once successful, it will push the comment to commentsData array so that it can be displayed in the page instantly.

replyComment(commentId, index)

The reply comment saves the reply for the parent comment. It works similar to saveComment(). The difference is that it takes commentId and the index to bind the reply comment once it is saved.

voteComment(commentId, commentType, index, index2, voteType)

As the name implies, this method is used to vote comments. It first check whether the user is logged in  and then the user could comment. The parameters are defined as:

  • commentId: The id of the comment to vote
  • commentType: The direct comment or reply.
  • Index,index2: Are the indexes of array
  • voteType: Up or Down vote

spamComment(commentId, commentType, index, index2)

This method marks a comment as spam. It only works when the user is logged in. The parameters are defined as:

  • commentId: The id of the comment
  • commentType: The direct comment or reply.
  • Index,index2: Are the the indexes of array

I will now compile the component. For that, run the following command:

Testing Laravel Comment Component

Now open the app in browser. Give it a pageId, for instance “1235” so that the browser URL will be “public/1235”. Once the page opens, you will see the following page:

Since there are no comment yet, it will be empty.

Now click on the Add Comment and you will be redirected to the login page. Register yourself and then head back to the page to add a comment.

Let’s add a new comment:

When the page is reloaded, you will see the comment:

Now add replies and more comments to the page.

Winding it Up

Let’s summarize it all. I have created a Laravel comment system using Vue.js through which you can save, reply, vote and mark comments spam. Let me know if you have any issue in understanding the code. Leave a comment below and I will get back to you.

Create Laravel apps without the worry of server management.

Deploy your app on optimized PHP hosting servers for Laravel.

About Ahmed Khan

Ahmed was a PHP community expert at Cloudways - A Managed PHP Hosting Cloud Platform. He is a software engineer with extensive knowledge in PHP and SEO. He loves watching Game of Thrones is his free time. Follow Ahmed on Twitter to stay updated with his works. You can email him at ahmed.khan@cloudways.com

Stay Connected:

You Might Also Like...