#24 Complete Comment & Reply System in Laravel | Laravel Ecommerce Project Beginner to Advance

hello everyone this is iamin and welcome to webtech knowledge so in this tutorial we are going to see how you can make comment and reply system in laravel so here you can see this is my project and here you can see the product option and just below this product we are going to have our comment and reply system so first of all what we will do is that we will create the design for the comment and the reply and then we will create the database i'm in the table and then we'll write the back end port so first of all let's go and design the comment box and the comment over here just below this products so let's go back to our code and here you can see this is my project and we'll go to resource views and then home folder and inside home folder we have usertest.blade.php and whatever view you are seeing over here is everything coming from the usertest.blade.pc from here and if i go down here you can see at that of include home dot product and this home dot product is uh this part those are all the product and below this we are going to have our comment system so uh we will write the code just below this home dot product after this so let's just see over here comment and reply system starts here let's just comment it out and let me just pop it and paste it here and we say comment and reply system ends here okay now let's also comment this so inside this we are going to write all the code for the comment and reply uh so first of all we are going to mention a div over here and inside this div we are going to have a h on tag let's say it will be comments then inside this asian tag let's say here style it will be font size let's say 30 px and text align center and we also say padding top 20px and padding bottom 20px so let's save it then if we refresh here here we can see we have a comment option over here so after this comment will have a text box i mean text area and a comment button so let's go back and here we mention a form and inside this form we are going to say text area and the text area placeholder will be comment something here and we will mention a button anchor tag and button will be will mention a booster class it will be btn btn primary and inside this anchor tag let's say here comment let's save it then let's refresh here and here you can see we have the text field and the comment button now let's change our text area height and width and also let's have everything in the center the comment button and this as well so let's go back and here in the text area we'll say style height will be 150 px and width it will be let's say 600 px and in this div let's say here style uh text align center save then let's refresh again and there you go okay let's add a vr tag for the comment so here this is the comment anchor tag let's say have your vr let's save again then let's refresh and there you go this is a common part and inside that beef uh this tip let's also mention padding bottom or rdpx save it and there you go there is some gap so we have the comment box right now right now we'll make some static comment option and reply option so if we click on the reply option it will open a text box like this and we can reply to the comment as well so let's go back so after this tip we are going to mention another day so here we will mention another day and inside this tip here will show all the comments so let's just make a demo let's say here h on and here we say all comments and let's say for each one style will be font size it will be 20px and padding bottom let's say 20px and after this okay let me just save it and let me just show you how it looks so this is how it looks let's show all the comment a little bit on the right side so for it we'll say here uh in this div let's mention a style let's say style will be a bedding left it will be 20 percent not px 20 percent save it then let's refresh and there you go it's on the right side so below this will show the comments so we'll show the name and the comments so the name will be bold and the comment will be regular text so for it here after this let's just mention another div for showing the comment so first of all we'll show the name let's say here name will be inside the btac we will make the text bold so here we'll say name let's say name will be yamin which is my name and let's just add a comment over here let's say p tag and let's see here this is my first comment save then let's refresh here and here you can see a comment over here now let's add a reply button over here and if we click the reply button it will open a form like this but a little bit smaller will make it a little smaller so for it uh here after this p tag we are going to mention anchor tag then inside this anchor tag we are going to say reply save it then refresh and here we have a reply option so right now what you want if we click on this reply button it will open a text box like this but since this is the anchor tag and if i click click reply it will refresh so we need to avoid our browser be refreshed like this so for it we will use some javascript for this reply so here we are going to say here inside the hdf we say java script javascript double clone by it will give to first bracket zero and indeed with a semiclone so right now if i say then let's refresh here and if i click replay button here you can see our browser is not reloading okay so we have the comment and the reply option over here now let's add a few more comment and reply so for it uh here let me just copy this div ctrl c and i'm going to paste it a few times two time actually on and two so right now let's say here this one will be uh shackle let's say this is my second comment and this is my third comment and this name will be let's say alex so right now let's say then let's refresh and this is how it looks every comment has a reply option so right now when whenever we click a reply option it will open a text box area for that certain comment so for it uh what we'll do is that we're going to make a text box area for reply and will not make the text box area for every comment so what we'll do is that outside this tip we are going to mention a d for the reply text box so here let's mention a div and inside this tip we are going to say text area and here let's say placeholder write something here and we'll have a anchor tag and this will be the reply button so let's say reply and we say here class it will be btn btn primary let's save it and here right now if we refresh at the end here you can see we have a text box over here like this okay it's on the left side okay let's have this text box uh inside this div so paste it here save then let's refresh okay it's like this okay that's fine so right now uh what we do is here this is a text box we are going to mention that text box height and width so let's say here height will be 100 px and width it will be 500 px save refresh and there you go let's set the reply button on the downside so here this is the reply so before the reply we are going to mention the via tag then refresh again and there you go so right now what you want is that will only show that this textbox area whenever someone click on the reply option so for it we are going to write some javascript and in order to javascript or you need to add the javascript cdn link in your code so here i already have the javascript cdn over here i should write this in my public folder uh we have the javascript i mean the jquery cd link so if you do not have jquery cdn link or javascript serial link just search for javascript cdn link and go on the first link just copy this if you click over here just copy and add it inside the head section like this okay then the javascript will work so what we'll do is that here you can see that this is our text box area for reply and we do not show the text box area always so this text box area will only show whenever someone click on the reply button so for it here inside the div we'll say here style and we'll say here display it will be none so if i now save it will not see this text area and the reply button because we see over here display is none refresh and there you can see there's some textbox area and the issue is uh we need to show that textbox area under every comment whenever someone click on this reply button so for it uh what will do is that here you can see that we have three reply over here reply button so here inside the reply button will say here on click it will be let's say reply then we'll give to first bracket and inside this we'll say here this then ended with the first bracket like this and let me just copy this on click and paste it over here inside this reply for the second comment and for the third comment reply button as well so right now we're going to write some javascript for this reply this so for it let's go down and here we are going to mention a skip over here and inside this skip we are going to say function reply will give to first bracket and then we will say here polar and we'll give two second bracket over here and here you can notice that reply caller so why caller so what will happen is that it will call the reply function whenever someone click a reply button and here you can see this this and three this over here you can see so caller how to caller do is that it will find out for which button or for which comment this reply button is clicked so we'll find we are able to find out which reply button is clicked for reply this i mean for this uh since we use this polar reply color so after it we are going to say something so that we can show this reply text box after that specific reply so for it here you can see this div is for the reply so here we are going to mention let's say mention a class let's say here reply div this one called reply dip let's say so we are going to call this reply div class from our script so here we set dollar to first bracket to single quotation then we'll give a dot for class and we'll say here reply d then we'll say over here dot we'll say insert after to first bracket then dollar then again to first bracket and here we are going to say caller so here what is happening is that whenever someone click a specific reply button okay let me just remove the space whenever someone click a specific reply button reply this then it will come over here and it will find out this reply div which is this this one for the reply div here you can see classical reply this then here we are saying insert after dollar follower it means it will insert this div for whichever button is click if you click this button it will show that if over here and if you click this button it will show a div over here just after this reply and if you click this button it will show the reply div over here i'm in the text box for the reply then uh here since the style for the display is none so we need to mention the style over here i mean the display over here we need to make the display visible so here we say dollar to first bracket to single quotation then dot then we'll say reply if and here we'll say dot show so let me just explain it so at the beginning our display is none but whenever someone click on a specific reply button let's say this one or this one it will insert this tip after that reply button and it will make the display none to show so i hope you are clear and you need to make sure that you add the jqd javascript cdn link uh in your port otherwise it will not work so let's just refresh here and if i click on this reply option here you can see it is showing showing me that text box and if i click this reply option here you can see it is showing me the text box area over here and if i click on this reply option it is showing me the text box over here so everything is working perfectly so right now let's go and write the code for the comment and the reply so so for it first of all we need to make the table for the comment and the reply so we need to make actually two table one will be for comment and another on will be for reply and the reply of reply table will be contain the comment id so for it let's go back to our project directory and let's just open a cmd here and we are going to say over here php artisan make clone model and it will be for first we'll make the comment table so let's see here comment minus m so it will make the model and migration at the same time just press enter and after this we will make each reply table so we say php artisan make clone model reply minus m let's press enter so model and migration both are created so let's go back to our port and we'll go to our database migration and inside the migration here you can see the comment table and the reply table so let's write the column from the for the comment table first so this is the comment table so here we are going to say dollar table this arrow sign string then to first bracket and then two single quotation and inside it let's say we'll show the username the comment and the user id as well let's let's say here name let's just make everything nullable null able to first and let me just copy this one control c then ctrl v and ctrl p so here this one will be for the comment and this one will be for user id user underscore id so let's save it and right now we'll go to our reply table this is the reply table and inside this reply table we see over here we'll do the same thing uh we'll first we'll store the name then we'll show the comment id the reply and the user id so let's see here first one will be named this one will be comment underscore id and this comment underscore id will be uh this side actually here you can see id this id then here let's say here this will be reply and let's say this will be user underscore id so let's save it and let's go back to our command prompt again and let's see over here php rt sun migrate let's press enter and here we can see migration is successful so right now if i go to my table let's refresh and here you can see we have the comment table and the reply table over here so first of all we will insert the data to the comment table and in order to comment the user needs to be logged in and here you can see first of all we are not logged in so in order to comment the user first needs to be logged in because from there we are going to tap the username and user id so for it let's go back to our code let's just close this table and we'll go to our and it is at the top and let's find the comment and here you can see this tip is for the comment so here you can see text area and the comment hdf button okay in the text area let's mention a name over here uh name will be comment so here you can see hdf so uh this this is inside the form so inside the form we need to mention actually input type submit not anchor tag so let me just remove this anchor tag and instead of anchor tag we'll say here input type submit and we'll mention the same bootstrap class which will be btn btn primary and the value it will be comment so here this is the form so inside this form will say here action then it will be method and we also need to mention that at the top csrf token and in the method we are going to say over here post then in the action we say to second bracket then we will say url files bracket to single quotation let's say here add underscore comment let's save it and right now we'll go to web.php and create this url so let's go to route then web.php and let's go directly down and here let me just copy a route from here control c then ctrl v the route will be post then we'll use the home controller but here we'll say uh let me just copy it from here add underscore comment let's paste it here and let's say we'll use the home controller and the function name will be add underscore comment as well save it right now we'll go to our home controller and create this add an underscore comment function so let's go to our app http controller and then home controller let's go down directly and here we're going to say public function add comment to first bracket then to second bracket so inside this function we want to insert the common data to this comment table which is this one so for it first of all uh here we need to get this comment from here from this text area so we need to mention over here request dollar request and then here we want to upload data to the comment table so in order to upload data data to the comment table we need to add the comment model at the top of our controller so let me just copy a model from here ctrl c then ctrl v and here we will say backslash model backslash it will be comment let's save it now let's go down but before we insert the comment to the comment table uh for beyond is that a user cannot comment without he or she is logged in so if the user is not logged in and if the user click on this comment option it will take the user to the login page so here in this public function add underscore comment we are going to give a if condition will serve over here if auth double clone id then to first bracket then do second bracket so we'll check if the auth id exist the auth id will exist uh only when the user is logged in and in order to use the auth id you need to make sure that you add these at the top of your controller and use illuminate backslash support backslash package backslash or at the top of your controller and then here if the user is logged in then we'll come to this if condition and if the user is not logged in we come to this else condition and here we'll say return redirect will return redirect the user to the login page let's save it and right now uh here let's refresh first and here you can see we are not logged in and if we click on the comment option right now it should take us to the login form if i click comment here you can see it took us to the login form so right now let's just login let's click user let's keep the password let's click login and here you can see currently we are logged in as a user so let's go down and right now we will be able to comment over here so first of all let's go and here in this auth we are going to write some port so here first of all will decay variable let's see over here dollar comment equal to will say new comment now here this dollar comment is a variable and this new comment is our table name and after this here first of all in the table we have the name comment and user id in the comment table so where we get the name we'll get the name from the auth using the auth we'll get the username because the user is currently logged in so for getting the username so first of all let's see over here dollar comment this arrow sign name equal to which over here auth or double clone user to first bracket this arrow sign will say here name so we'll be able to get the user name like this and we'll store it in the comment table after name we also have the user id and the comment so let's also store the user id over here ctrl c then ctrl v and for user id in the comment table we have like this user underscore id and in the user table the id is written like this id so we'll get the name and the id from the user table and store it in the comment table name and user id column so after this we have one more thing and that is the comment the most important thing so for it here we are just going to set dollar comment this arrow sign comment equal to we will request the comment from here userface.pc from here you can see name equal to comment so which is over here dollar request this arrow sign comment this will come from the uh from here then we'll just over here dollar comment this arrow sign save then we'll return the view to the same page so we'll say here return redirect to first bracket this arrow sign back so let's save it ctrl s and right now let's just refresh here and let's just add something over here let's see here this is my first comment from the laravel and if i click comment this comment will be add to the comment table let's click comment and here guess it reload it and obviously you cannot see the comment over here but if i go to my comment table here you can see we can see the comment you can see the name user then this is my first comment and we can also see the user id so let me just show you the user id and the name over here if i go to user table here you can see inside 20 and username is user so we are able to store the comment over here so let's just store another comment let's just over here second comment and it's added so right now only one thing is left that is we want to show all the comment from the table to our here all comments so those are the static comment that we just added so for it let's go back to our code and so right now let me just show you a thing and let's go at the top and here you can see that for logged in whenever a user is login then we are checking the user type and if the user type is on we are sending the user to the admin page admin page and if the user type is not on then we are sending the user to the home dot user face home dot user page which is this page when the user is logged in to this space when the user is logged in and when the user is not logged in then we are sending the same view but without checking the auth over here so here you can see that currently we are logged in as a user so so from this uh redirect function we are sending the user to this page home dot user page so over here we are going to get all the comment and say also send all the comments to this page user dot user base so here let's just give a dollar over here let's say dollar comment equal to we'll mention the table name comment double clone all will get all the comment and send the comment to this user page so for it in this compact will give a comma to single quotation and use over here comment so we are sending all the comment this comment to this home dot user page and right now we'll go to our home dot user base which is this one and show all the comment from that table so here you can see those are all the demo comment or static comments so let me just keep only on comment and re remove all other comment from here let's remove the second comment and the third comment only those two and we'll keep the rest if i now save it then let's refresh here and here you can see there's only one comment so we will show the comment from the table so here this is the deep so before this tip we are going to mention a foreign loop so let's see here at the rate of for each dollar comment as dollar comment and this foreign loop will end after this div so here we are going to say at the rate of in for each so right now if i save it then if i now refresh here you can see two comment because we have two data in the comment table but right now we'll show the comment from the table so for it here we'll give two second bracket then inside this for forest loop and inside the second bracket we'll say dollar comment this arrow sign will say here name and here we are going to say to second bracket then we'll set dollar comment this arrow sign this will be the comment save it then let's refresh and there you can see user and user this is my first comment from laravel this is second comment and if i click reply it is showing me this and if i click over here it is showing me this over here and right now uh we should have a close button for this reply i think i mean for this text area so right now let's have a close option or close button uh so that we can close the this text box so for it let's go back to our code and here you can see that this is the text box for the reply so after this reply let me just copy this and paste it here and here we are going to say on click equal to to single double quotation and here we are going to say reply underscore close to first bracket this so we'll write it like this and let's say here class will be btn only so for this on click we'll write some javascript reply underscore close uh just like before so here let's go down and let me just copy this function ctrl c then ctrl v and over here we say reply underscore close and we also obviously need to say the color but here we are going to remove this insert after and here uh hotend is that if someone click on the oh sorry this will be close if someone click on this close option we want to close this div reply tip which is here you can see class is reply div so here we'll say reply div dot height save it then let's just refresh again and let's click this reply and here you can see we have a close option if we click close it closed and if we click this reply if you click close it close okay it's reloading so what we will do is that inside this hdf we'll say javascript double clone voyage to first bracket zero and sim clone save it okay let's refresh let's go down reply close reply close okay so we did the comment part so right now we will uh do the reply part so here you can see this is the reply part so so right now there is one more thing that we have to do and that is here for reply uh we need to get the comment id now here you can see that uh for the the comment table here you can see the id over here we want to get this id to our reply table if you go to our reply table uh here you can see we want to get the comment underscore id which is the comment id uh from here this id so for it we need to do something so that we can get the comment id for every reply so for it here you can see that this is the forage loop and inside this forage loop we have this reply button every time this loop or we will get the id for the specific comment so for it here inside this we are going to say here data this arrow sign let's say here comment id equal to will give to double clone to double quotation and inside it we are going to say uh this one comment name bra i will just get the comment id from here so we will write it like this comment id so what will happen is that it will store the comment id in this data comment id variable and we'll send this uh to this reply function and using this reply function we will send the comment id to this uh here you can see that we have this text area for the reply okay let's just write something over here reply text box we have this we will send that comment id over here so we will receive that comment id in a input field so let's just mention a input field for now let's say input type text only this and inside this will receive that this specific comment id for a specific reply so we'll call the reply function so we'll go to this reply function in the skip and write something so that we can get the id over here in the reply text box so let's go down and here you can see this is the reply caller so here what we'll do is that at the top we'll say document dot get capital key limit capital b y then capital i d then we'll give two first bracket to single quotation and inside it uh we are going to mention a id let's say here comment id capital i and d and here you can see the comment id this comment id will mention this comment id over here here you can see we mentioned input type text we are going to mention an id over here and inside it we are going to say comment id and let's also say our here name it will be comment id as well let's remove this name so right now let's go down and here we are going to server here dot value equal to then we'll see our hair dollar to first bracket caller it means for which uh reply option we want to get the id then we'll give a dot then we'll show over here a double tr it means attribute to first bracket then to sync single quotation and here if we go over here we say over here data comment id right so let me just copy it and we'll paste it over here then in it with the semicolon so right now if we save it then if we just refresh here and if we click reply here you can see we can see the id is on and for this on second comment here you can see the id is two but obviously we don't want to show the id and also that also this input field so what will do is that will make this input type text id comment id it will be hidden so we'll server here hidden let's save it again and let's just refresh here again and if i click replay you can see there is no input field but the id is still there so we'll be able to get the id in the controller so right now inside this tip we are going to mention a form so that we can upload those comments to the table so the form will start over here and this form will end before this tip so the form will end over here and inside this form we are going to mention action then it will be method method will be post and we will also mention the at director csrf token so let's say method post and action let's say to pass by second same bracket then we'll see url to pass bracket to single quotation we'll say add underscore reply and here you can see we mentioned the anchor tag over here so instead of anchor tag we're going to mention a input field so let's say here input type it will be take it will submit submit then we'll say here hello it will be reply and that class will be booster class which is ptn btn primary same thing let's save it then let's refresh let's click reply we have the reply option let's click this on okay plus okay that design changed over here the reply button okay instead of input type submit uh what we will do is that instead of input is submit let's say here pattern type we saw here button tag inside this button we say reply and the pattern type will be submit type will be submit and okay class will be ptn btn primary save then let's refresh and click reply okay we have the button it's coming like this okay let's just change the button design let's say btn between uh warning save it then let's refresh again and we have the reply button like this right now that's fine reply close okay everything's working so right now we should be able to reply from here so for it let's go back and right now what we'll do is that we'll go to our web.php and create this url but before that in this text area let's also mention a name name will be let's say reply so let's go to our web.php and create this url and let's go down and let me just copy this on ctrl c then control v over here and we'll see here add underscore reply we'll use the home controller and the function name will be add underscore reply as well so right now let's go to our home controller and create this function at underscore reply and let's go down and here we'll say public function public function at underscore reply to fastbracket we'll say here request dollar request then we'll give two second bracket so first of all in order to reply obviously user again needs to be logged in so first of all again we'll check the auth we'll check if the user is logged in or not first bracket and we'll give the else condition here and we'll give to second bracket and inside this else condition we're going to say return redirect it will be logging let's save it and let's refresh here and here currently we are logged in okay now there is one more thing that i have we have to solve and that is here you can see that we are showing the data common data from the comment table over here but and we are only show this for the user when the user is logged in but here you can see that if we put our home controller at the top here you can see index function when the user is not logged in we are also sending the user to the home dot user base and when the user is logged in we are sending the user again to the home dot user page but here we send the comment from here and we show the comment all the comment over here but when the user is not logged in then we are sending the user over here but there is no comment we are sending from here so currently if i just logged out from here will get a error that comment not found if i log out from here here you can see undefined variable comment so what we will do is that here you can see public function index so for it we are again just going to copy this from here ctrl c and paste it here then we'll give you a form over here to single quotation and here we're going to say comment let's save it then let's refresh and this time will not see any comment error and here we'll be able to see all the comment over here so right now uh currently we are not logged in so if we uh click on the reply and then click reply it will take us to the login page because we said over here uh that if the user is not logged in in the ad underscore reply send the user to the login desk so right now in this auth id we will get the reply the comment id and the username and the user id as well so first of all we'll declare variable let's say here dollar reply equal to new and here we need to mention our table name which is reply and in order to call that table called reply we need to add the reply model reply table model at the top so let's go at the top and here let me just copy this and paste it here and we are going to server here instead of comment we'll see here reply if you go to app models here you can see reply model so let's go down and here right now we are going to give this dollar reply this dollar reply is this one then we'll get this arrow sign and first of all let's get the username we'll server here art this arrow sign will say here name let me just copy this and let's paste it here and this time it will be user underscore id user underscore id equal to it will be from the user table will get the id logged in user id so let me just check the comment table i'm in the reply table and this is my reply table we have name comment id reply and user id so we get the name and user id so right now we get the comment id and the reply so so for it uh we're going to say here dollar reply this arrow sign let's get the comment id comment underscore id equal to here in the user page dot blade dot php you can see the reply text box and here you can see name equal to comment capital i d so we are going to see over here dollar this arrow sign comment id and after this we will get the reply here we can see name equal to reply in the text area so here let me just copy and paste it here and here we're going to say reply equal to request reply then we'll just say here dollar reply this arrow sign save after this we'll say return redirect return redirect back let's save it then let's refresh here and currently we are not logged in here you can see so if i click reply this reply it will take me over here let's login to different user let's say here customer let's keep the password click login and here you can see currently we are logged in as a customer and let's go down and we have the comment option so let's just reply something let's say reply to the past comment and if i click reply here you can see reload it and if i just refresh over here here you can see that in the reply we are able to get the comment id the customer name the reply and the user id now you will notice one more thing and that is after we every time we comment or reply it's taking us at the beginning of our page we'll fix it but later but first of all uh we are able to insert the reply over here in the table so right now we'll show the reply over here for every comment will show the reply for the specific comment actually so for it we'll go back and here we'll go at the top of our home controller and again we'll get the reply all the reply and send the reply to the home base home dot user face for the logged in user and we'll also get all the reply from the table and send that reply to the home dot interface for not logged in at the both places but let's do the for the logged in user first so here let me just copy this let's paste it here and here we are going to say reply and here we are going to mention our table name which is reply then we'll send this reply to this view so let me just give a comma then we server here reply and after this let me just copy this one we only write this in the redirect function so right now let's write it for the index function as well when the user is not logged in and we are going to give a comma over here and we'll show our here reply again so we are sending the reply from here so right now we need to show the reply to the user page for the specific comment so let's go to userbase.blade.php and here you can see that we show the comment over here inside this forest loop so inside this polish loop we are going to show all the reply for the specific comment so uh we'll write that is after inside this for each loop but after this reply so let's just mention it deep for the reply so the thing will be same for the reply as well but inside the deep let's say a style will show the reply a little on the right side so we'll say her style padding left let's say three percent and padding top 10 px and padding bottom 10px so inside this if first of all we'll show the name inside the b tag and we'll show the reply inside the tag so right now for the comment over here we'll have the name and the something okay let's just say over here something let's save it then if we now refresh here you can see we can see the comment like this but obviously you want to get the reply from the table so for it uh here before this tip we are going to mention it for each loop we'll say here at the right of for each we say dollar reply as dollar reply and we need to in this foreign loop after this tip we say here at the top in for each and this dollar reply will be come from here from the home controller here you can see dollar reply this one so and inside this we are going to give two second bracket and we are going to say here reply this arrow sign will get the name and we'll get the reply okay dollar reply not reply here we say dollar reply this arrow sign reply and here you can see this name and this reply will come from the reply table here you can see we have the name and the reply here so kindly if we save it now and then if we refresh okay attempt to read property name on rule reply name reply okay that thing is we are we have this forest loop uh inside another polish loop and here we say dollar reply as dollar reply so uh inside so what we need to do is that we cannot keep the same name uh if we have two for this loop inside each other so here we say reply instead of like this we say over here dollar reply as rip and dollar reply as rip like this so this will not give us any error like this so let's refresh and here you can see there is no error and we can see that reply to the first command and reply to the first comment and the thing is we write this reply for the first command obviously we do not want to show the reply for the second comment as well so for it we'll just give a if condition over here and as we already know that we have a comment id over here in the reply table so what we will do is that we'll check if the comment id in the reply table is matches with the this with the comment and if the if that commentary matches with the specific comment then we'll only show that reply for that specific id or for the specific comment that the comment id match okay let me just say it in a simpler way here you can see the comment id is on in the comment table and if we go to our reply table here you can see the comment id over here is on so we will show that specific reply for that specific comment so here for it will give you if condition okay we'll say after this forest loop we show over here at the rate of e to first bracket then we'll see over here dollar rep this arrow sign will say here comment underscore id we'll say over here double equal then we'll server here dollar and here you can see we have this for this loop and inside the forest loop we have the comment so we'll see over here dollar comment this arrow sign id will check the comment id matches with the comment id in the comment table so uh we need to in this if condition will in this if condition over here like this attribute of in if so right now if we say then if you now refresh here you can see we can only see the comment for the first one so let's try to reply for the second one let's see here for the this is yo in the second comment and let's click reply and here you can see that we can see the reply over here as well we can comment anything over here as well so here you can see but the thing is there is no option for the reply uh for if you want to reply for this uh there is no option over here so we can do that as well that is simple actually we just need to copy and paste something and over here you can see that uh for each comment dash comment we have this uh anchor tag javascript on click reply this data comment id comment id so we'll just copy this and we are going to paste it uh over here save it then let's refresh okay here you can see now for every comment we have the reply option over here so currently uh it will actually work because uh if we click on this reply uh it will open the text box then uh we are actually also uh mentioned over here tata comment id so it will get the comment id for the specific this comment for this comment it will get the comment id and you'll be able to add the reply like this if i click reply here you can see it or if i go down here you can see we have another reply over here so uh let's just make a write a style over here uh let's say style it will be color it will be blue and for here as well let's see here style will say color it will be blue let's save it then let's refresh and there you go it looks like a better a little bit so right now there is one more issue and that is if we reply something and if we click reply it is reloading and taking us at the top so this actually not like uh responsive uh so what should happen is that whenever we comment or reply something it should keep us over here so for it i do have a really simple solution and i actually save it over here let me just show you uh something from here if i just go down here you can see uh this is a refresh refresh page and keeps fall position so if i just go down and i think it was this one here you can see uh this will do the magic uh we need to copy this skip i'll keep this link in the description uh don't worry you just you can just go to this link and copy this code uh all you have to do is that copy this skip part skip port from here and go to your port then go at the end and at the end just paste that skip port over here this is the skip port for refresh and reload i mean when if you refresh the page it will keep you on the same place this skip code you can just copyright it by watching or you can just go to this link i will give this link and copy this one this one this will do the magic this part so right now let's just save it and let's refresh here and let's say something click comment here you can see it keep us on the same place and let's add another reply over here let's click reply it keep us on the same same place okay so right now now let's do one more thing and that is we for whenever let's go to my comment and here you can see one two three four five so we want to show the new comment at the beginning here you can see that this is the new comment and we want to show this new comment at the beginning not the old comment at the beginning so for it what we can do is we'll go to our home controller again and here you can see comment all so instead of comment all we are going to say order by first bracket and we'll say here we want to show the comment by the id then comma again to single quotation and here we say d e s c then we'll see what here this arrow sign get to first bracket and we'll do this the same now this was for the login part and this is this index is for if you not if you are not logged in so we'll paste it over here order by id dst esc it means it will show the last comment at at the beginning so let's just refresh and here you can see we can see the customer at the beginning like this so yeah this is how you can make comment in laravel i try to make this as simple as possible but if you still have any confusion you can let me know in the comment section and if you have any face any critical problem that you cannot solve then you can message me on my facebook account i have given my facebook link in the description you can just uh message me or knock me there i'll try to give you a reply and and if this tutorial was helpful then i would actually really appreciate if you subscribe to my channel thanks again for watching and stay tuned and stay healthy

Channel: Web Tech Knowledge

Views: 10,319

Keywords: laravel comment system, laravel comment reply system, php comment system with reply, laravel, laravel comments system, laravel comment system with jquery ajax, laravel comments system tutorial, laravel comment, how to add comments system in laravel, comment system, comment system laravel, php comment system tutorial, comment system in laravel, laravel comment system tutorial, laravel comment package, laravel comment tutrorial, Laravel Ecommerce Project Beginner to Advance

Id: lMWSP827r7s

Length: 58min 47sec (3527 seconds)

Published: Sun Jun 12 2022