Nested Comment System using jQuery Ajax in PHP MySQL from Scratch | PHP Comment System with Reply

hey guys welcome to my channel so guys in this video we are going to learn nested comment system okay so guys now let's see a demo over here so over here you can add the comment so okay new ad i'm giving okay comment added successfully you can see over here okay new ad and we want to reply to this comment so you need to be logged in so uh we will create a dummy login page so now let us add so i have given a dummy user with the id one so let's add hello reply add okay let's reply you can let's view that hello reply and it's going under this if you want to reply to this guy again you can just add with this and tell that this y okay so we are fetching that username and add ok okay man add reply so you can see again let's view you can see okay man so this is how we have done with it you can see over here so on the om prakash command we have added this over here you can view all these comments so this now let's start this nested comment system in php so let's let's keep this way and we will be designing this design and start with it so let's create a simple folder and get started so first let's create one includes folder and inside that i'm going to create one called header.php file and one footer dot php file footer.php file now let's get started with the bootstrap for designing purpose so let's go to goodbootstrap.com and click on docs move over here you can get this starter template okay so let's copy the starter template and paste let's paste and just remove all these unwanted things and we are going to cut this and paste in footer page that's it so this is my bundle bootstrap link and this is the bootstrap css link as simple so if now we need to include one jquery file so let's jquery cdn link you can go to this jquery.com and get the minified script link copy the link copy and type src and paste done set let's create a index.php file and include the header include function includes func let's call the includes folder copy paste let's mention this as footer.php as simple so it's now let us design one navbar let's give navbar.php file let's get that navbar let's copy this paste remove which we don't require remove the links let's keep login and we will create one bootstrap thing okay model so funda of web id save and now guys let's come refresh this you can see that you are on the hello world so let's include this number copy and paste call the navbar.php file go back to navbar and over here let's give bg dark never dark and refresh you can see that perfect so where is that hello world so we are remove this let's close this file and let's be on this navbar perfect so guys now let us get the model for the login let's copy this live demo perfect so let's copy this thing from here and get back to navbar and this is my login button paste over here we are going to paste the model so before that let me remove this container fluid okay and yes guys so let's copy this model and paste so now this is your model id you can tell login model so let's copy this login model and paste this name over here login model and over here you can add the form let's type form and paste and now let's create the column row not row form group input dot form iphone control okay so this will be your email name is equal to email and same way you are going to create for the password so let's copy this and password give a placeholder enter email id placeholder is equal to enter password as simple and over here method is equal to post and this will be login code.php file as simple so now guys over here let's give login and make this button as submit save refresh okay let's move this to right side navbar make this e2s refresh over here you are so let's click on this you can see perfect so let's change this title and give a gap three login form cool so right now when you enter the email the time your code should work so now let's create that login code over here first let's open this sidebar login code.php file and let's move to navbar this will redirect you with the post method taking this email and password thing okay so for that we need a db okay so from where you are going to get so before that we'll create all these things first we'll check if the button is clicked or not so which button this login name login so we are going to create a simple login thing that's it not much secured copy login button and dollar underscore post where you are going to store in one variable called email so this email is coming from your input copy this and paste over here same way password and you're going to use mysql things okay so let's get back to our db and you can see on database called blog and inside that we have a users table so over here i have some records you can see this so let me just show you the structure where id is primary and auto incremented full name email and password and one created at timestamp and the default one current timestamp i have inserted so let's get back over here and call the database connection so first dbconnection.php file as simple open php close php dollar connection is equal to mysqli underscore connect function where localhost username is root password is null and then database name is nothing but blog so let's copy this blog and let's call this file over here so include function db connection dot php as simple and now let's pass this over mysql i real escape string function where first database connection and then your okay control cv and then password password that's it and now guys we need to write the query so login query select star from table name called users where is that table name user paste where email is equal to single quotes and password is equal to single quotes limit one dollar email variable paste dollar password variable paste run myself query function the connection and then your login query as simple so if it's successful then you can tell that okay so how will you check that first so first let us check that record exist or not mysqli number of rows function else header location index.php exit where you are going to use session to show the status status invalid email or password session you are using okay so let's switch and underscore start function and now we need to um after this success if it's successful then we need to get that information so how will you get so let's get that dollar user data is equal to mysqli fetch array inside this we are going to get this data paste the data where you are going to get id so let's store this value dollar user underscore id is equal to this the name if you require you can take that full name column so this id and the column name i am calling this okay full name that's it you can tell user name i want to store this so let's store that in a session so authenticated user id is equal to where user id i'm storing that and you can store this auth data variable where you can store this all data okay or else you can store only this name username auth user name that's it and after that i want to go back to index page login successful and yep guys so let's get back in index page and now so guys our login code is successfully done and now let us test this let's go to index page and echo that let's use php echo and what you're going to echo we need to start the session over here session underscore start function and inside this what you're going to echo this username so let's copy this session username and paste over here as simple and now guys let us refresh undefined it is detailing so for that you need to just set this before in a set function so let's give ph if a set function if it is set means then you need to echo save refresh that's nothing so let's click on login and now let me give the correct email let's refresh i'm in browse so you can see that veda gmail.com is one email way that gmail.com email and password is one two three four five six so let's try to log in with it okay one two three four five six let's click on login you can see with prakash perfect so data has come and now let's uh build this one logout over here it's very simple so php open php close if is set dollar underscore session of this logged in authenticated user id so if it is set then you have to show else echo logout okay so let's copy this and divide the php paste else you need to show this divide the php let's get log out and create a logout dot php file done logo.php and just unset the session so php start php end and just copy this variable is unset so make sure your session start unset function unset this and same way you are going to copy and unset this username also onset and then you are going to show the message as logged out successfully so you need to show this message right on this index page so guys it's a very simple code let's use alert and before that if condition where is set of the same code okay session where you're going to show the status which variable you are stored echo let's use this you're going to show this thing okay let's copy paste done now refresh logged in successfully you can see that message is not moving so after this i want to unset after showing the message let's unset that copy this and unset refresh perfect so let's refresh you can see login it's showing so after logging you need to show logout let's go to navbar if authenticated is user so let's give not not a set it's showing logout let's click on logout logged out successfully and let's login way that gmail.com123456 login you can see logged in successfully and you are on the logout so guys now we have successfully created with this login and logout and now guys we are going to start with this comment system okay so let's design this page so first let's get back over here and yep guys so let's move so start with the py5 and inside this container row column md eight so i want to keep this column in center so we'll use justify content center refresh okay so now let's design a card over here so inside this we are going to start the design card card header h4 this is a blog heading and body and inside this card body we are going to start the code refresh you can see this blog okay now let's build that comment option inside this body so this is my card body horizontal row and comment section main comment we will mention this main comment and here we are going to start with this text area form control and rows is equal to three and this name will be comment text box okay and one simple button beauty and button where we'll tell comment type type is equal to let's give button on this class button button hyphen primary and this button name will be add comment button okay add comment button and we'll remove this name attribute and add inside this class so command text box and now let's refresh and see over here perfect so it's now let us make this as row 2 refresh so now when we comment over here that time it should add that comment so for that let's get started refresh so let's write the code to comment so let's see refresh okay so this is looking awkward let me just take this and add inside the snapbar so let's get back from index page let's remove this code and push into a navbar so this is on a bar over inside this link i'm going to paste that that's it get back refresh you can see that with brush perfect so just ignore guys now let us add the comment for this okay so first let's create a database for it okay so let's close all this now let's click on new and as we have created the structure for it so this is our user table so we have already created that user table and now let's create with the comments so now let's create command id let's call that id integer 11 primary key go and auto increment as simple let's take this full name i mean oops let's take this user id copy paste then message msg and then commented on commented on and then finally created at copy and one column missed out so let's click o created at so let's set this integer 11 messages long text ignore the field commented on we are going to select with the date select date and just select with this current timestamp so while entering it will automatically enter so let's give timestamp over here so it will enter date and time both so if you required you can access with that so let's save okay so comments table is created so with now let's insert the data on this go back so let's create one js file first let me add on assets folder and inside this assets i'm going to create a custom.js file and inside this we are going to start all the codes let's get started guys so jq doc so which will give your document ready and now we'll tell jq click click and inside this i want the button so let's go to index page and call this add comment button let's call that and paste so we are missing out now so first you need to call this file inside your this thing okay so where the footer.php let's move there and below this you have to include your file so let's call that script and call the assets folder forward slash then custom.js file set guys and now let us see let's comment this and check that file is linked or not perfectly use alert function i am linked save refresh you can you are getting alert cool so now let's remove and now guys we have to check with this so let's close all this let's get back over here you have taken this and now we need to get that first text box command text box so dollar dot because it's a class we are going to tell class dot value function okay and with this variable we'll tell this as message is equal to cool so first we are going to validate so if the text box is not empty then you have to work on this so let's use dollar trim trim function l e n g t h length is double equal to zero where this message you're going to print okay so if it's it's dollar not four error message is equal to please comment hash error status we will give is equal to not is equal to dot your paste over here in a text format okay else you need to show the same thing as a empty if your message not equal to null written false okay else you need to start the code perfect so first let us test this so before that error status just print that above this text box okay it's id we need to make this id fresh let's click on comment please comment please type comment over here okay if you comment it will accept that so now let's add that so let's call jq ajax and first we need to get this value so you are getting the value message let's keep that in where data is equal to open and close inside single quotes you are going to send this message and message we will tell add comment which we are going to set true now let's pass this data over here direct data let's remove data type code.php method will be post and after this adding alert the response done and let's go to code.php create a file oops code.php file start the php close first include your database connection so include function dbcon.php file and now um check with the if condition if it is set or not dollar underscore post method of your add comment so if it is set then you are going to come over here dollar msg is equal to dollar underscore post method of your variable which you have given this message input thing and then let's insert this value so before inserting we have to get the user so authenticated user so session underscore start function and get the user underscore id is equal to so while you're logged in that time you are checking with this right so let's get this user login id and then inserting the value so let's refresh you are currently logged in okay so now let's get back to database first user id message and these two are automatically it will fill let's get back code so comment add query is equal to insert into table so my table is comments column names let's select these two columns and paste give comma values open bracket single quotes give dollar msg not message first you need to pass the user right because it's user id and then your message so dollar msg and then let's run this query so with the help of mysqli underscore query function and while this you need to get the database connection so inside this dollarcon is from dbcon.php so you can see that variable over here so let's get back and then use this variable to store so guys for sql injection and all you can remove this and real escape string function dollar connection and then post this done and now we need to check if it is success if success echo comment added successfully else echo comment not added something went wrong okay so let's save and let's see this guys so refresh so there is no data inside this table and now let's add nice post add comment comment added successfully okay let's see over here browse cool so user id1 and the comment is posted nice post so let's get back okay so when you comment this that time this data should be emptied so for that you just need to go to your custom js file and after the success i want this comment to be copied and emptied over here so just add this double quotes inside this and it will be directly emptied so let's refresh again and add um good blog let's add okay so that good blog has been emptied and it's added over here so let's see again over here cool so blog is added and now guys over here you can see user to his own prakash so let's log out and log in again um gmail.com123.456. let's login logged in okay so let's comment that so nice post funda comment commented so let's browse over here not here let's comment open the table comment and you can see that user id 2 nice post funder so guys we have successfully done with commenting on the blog and now so guys now in this we are going to start with the comment to reply so whatever we have stored all the comments into our database so that thing we are going to fetch over here so guys now let's get started with it so first let's go to our index page create a code for that so guys over here so this is my main comment section and inside this section this my hr tag where this line under this comment button underline is coming after this i want to create comment container so this is a comment container and inside this we are going to create the data so for that we are going to do with the jquery ajax only so let's move to custom.js file let's minimize this let's make it below so let's let's create one function function load underscore comment function and let's call jq ajax so method post and url code.php file and the data we are going to send one simple confirmation thing so for that let's add comment load data okay is equal to true we will send off that's it and now let's remove this data type and so after this success response we have to blank that again okay so what we are going to blank this container so let's copy this it's a class so we are going to use this dollar single quotes dot and then we are going to use html function where you are going to give null values okay double quotes inside that null so once it's null then you are going to print your codes so first let's go to code.php and code everything and what we want to append that things into our text box i mean this div box so let's go to code.php move over here let's ignore this and let's start with this if condition let's use a set function dollar underscore post method of this comment load data and now inside this you are going to type the code let's type that dollar comment is equal to you can tell comment query okay comments query so you can tell all our comments query is equal to and over here let's type the query select star from the table name is nothing but the comments so let's copy this comments table and paste let's execute this so run with the help of mysqli underscore query function con and then your comments query comm ents underscore query let's copy this let's just correct this okay and now so after this let us execute let us check the record exist or not so mysql line number of rows function if there is no comment not existing that time you need to echo give a comment give a comment and if the record exists then you for each loop and inside this this variable comment query as dollar row or result you can take out that dollar row variable we are going to fetch that user id from here so let's fetch the user underscore id first and store in a variable called user underscore id is equal to this so this user id we are fetching from this table okay this user id we are going to fetch and now after that we need we are getting only comments data we want user data also to show over here which user commented that so for that let's get back and type the code so let's copy this and paste and mention this as user query query copy paste done and now after this guys we are going to fetch in a user result is equal to mysql life fetch underscore array function and this variable we are going to store and get the data so before that getting you have to comment the users table so let's tell my users table let's copy this users table select star from users where id is equal to single quotes and this will be the user id let's pass that user id the limit is equal to one i mean limit one as simple done and now guys we are going to send this in array push format so let's use array push because we are going to pass in jsn format so let's create a variable copy this paste comma and then your send your row variable okay so for sending this we need we are going to send one and this is the second data so two things so let's send in array format one will be the comment which is dollar row and the second one will be the user user where i'm going to send this user results so comment result and user result done so after sending this let's send this data which is content content hyphen type colon application forward slash json echo js underscore encode function where you are going to send this variable i mean this variable what you have stored the data also simple so once it's sent guys then you are going to see in this your load function okay load command function so over here let's type the code for that dollar and i want to append the data so what data you are going to append and where you are going to append so that is nothing but so inside this comment container i am going to append some data so what data and what design you're going to append over here so i'll just tell you let's design this first comment this first let's comment that and design a simple reply box okay so whatever the comments are inserted over here let's design one simple thing so first let's use the one border one p two and then margin bottom two as simple and this box name we are going to keep reply underscore box so this will be the box name and inside this we are going to start with the h6 tag which will be your class is equal to username for dummy detail we are going to keep it prakash n and p tag where you are going to give the class where para okay so this will be your para and some hey post comment okay and then your simple button button which will be reply reply reply design this button using class warning where badge we are going to use this this reply button will give okay reply underscore button so this will be the name of the button will be reply button copy paste and again let's keep this as danger for view replies okay so view reply button simple and yep guys which will be your class where margin left 4 and this will be a reply section this is reply section so whatever you are going to see all the reply box and the section now cut so before cutting let's see the output refresh you can see this this is the user interface so guys now you can add a simple thing just remove this and add border hyphen bottom for the designing purpose and display in line you can use a simple you can see a small border has come so now guys let's add this ctrl x and let's go to a json and append over here so inside this append function let's add that as simple let's concatenate this now let us test guys so let's get back let's refresh you can see it's not called so let's call this comment function copy and paste that's it so once it page is loaded the time it will call this function let's refresh okay it's still not calling why let's check out what's the error console so you can see that dollar html is not found for not a function you can add this html refresh you can see that perfectly it's come over here so now guys we need to fetch the data so that is nothing but your response you have got over here so let's take this response and check first so type console.log function where you can check with this refresh let's inspect let's click on console you can see the data has three comments has come over here zero one two so each has each commands okay so now let's fetch that so for that there is a multiple arrays so for that you need to use for each loop so let's tell jq each so this is the now let's comment and take this response and paste over here index array that is nothing but your key value 0 1 2 and this will be the value so let's copy this value and call that so before that this is a let's integrate inside the loop let's copy this value and the name remove the name single quotes plus plus and paste the value dot what you're going to get from this response what you're getting as you saw over here you can see that cmt so first inside the zero c empty value so this cmt copy that copy and paste so that cmt of your array value so i'm going to get the full name so not i mean it's a name right let's get back so it's a command i need this user data so let's copy that user that take this user user and from that user table i want full name so where is that column full name inside user table i have a column called full name so let's fetch that full name full name and then let's concatenate and call the date also so let's copy this paste let's minimize from the cmt from the comment section want inside the comments table i need this commented on so if you are getting confused with this user and comment that is nothing but inside your code you have passed the cmt and the user so this variable data you are getting so let's commented on so let's see and refresh and check guys first refresh you can see perfect so with prakash and with rash and um cool so you can see that user id one one and then two so that data has come let's pull that comment message also so same we are going to copy this comment message and paste over here so let's paste that until msg messages let's refresh you can see that the data so nice post good blog and nice post funda so whatever the data are over here so that data has come so guys now let's continue to the reply section let's get back so first let's go to index page and just i'll show you one simple design over here where input dot form hyphen control get the placeholder reply to reply we will tell and one name for this which will be reply message okay and then text and we are going to use the class of bootstrap button which will be give a class for designing this button button button small button primary this button name we are going to mention reply add button so once we click on this reply button it will be adding that okay and now guys let's copy and paste cancel button as simple and let's change this design little bit and make it to danger cancel let's save and see the output base refresh you can see this very small design we are getting it cool so this button is not working so let's make it to correct spelling refresh you can see this reply and cancel thing so let's now let's copy this and let's paste that design inside this reply button so let's cut ctrl x and go into a js file and paste that design so before pasting we need to start that so let's comment it over here and start the code first so let's take jq on click event so document where we are going to check with the click event on what click you are going to get with the class this is your reply button so which reply is nothing but this reply okay so this is your reply button so when i click on this i'll just show you the class inspect so over here you can see that reply button so let's copy this so this button only is over here so reply button copy that and paste as simple so once it's copied we need some data so if i click on this reply button so this is the comment so this is the reply button and this is the comment so we need this comment ids so for that let's get those comment ids so first we need to take this concatenate copy this and add the value inside this button value double equal to and inside that just paste that and take that id so this will be a comment id so same thing you're going to copy this value and paste for view also save it done let's refresh and you can see that here when you click on reply button you are the value is having one and the second one over here you can see that it's two so according to that it's coming perfectly so according based on this ids we are going to view the reply and give a reply so let's continue guys over here so first we are going to create variable dollar this clicked is equal to dollar this so whatever it comes when you click on this it comes over here so let's store as comment underscore id is equal to this variable so it will store the comment id over here and now once we click on this uh reply button that time what it should happen i want to empty this section the reply section so let's call that dollar reply section with the class should be empty html open bracket and inside that double quote just leave that and then um let's get the class so this dot closest closest of what so closest of your reply box so where is that reply box over here so this which means so i have just over here here this is the border one this is a command two command three so when if i click this it should come this comment only so we have to take the closest value so closest value you can see that reply box so let's get that reply box closest value with the class name dot and then find the data so what you're going to find the reply section because we are going to reply when we click on this this design should append right so for that when we are going to append that is nothing but this reply section with the class reply section so inside this you are going to append the data dot append function as simple or else you can use html also as simple and inside single quotes let's divide this and paste the design which we have just commented it so let's copy and paste let's concatenate this okay there should be no spaces or else it will give an error okay done you can take this at the top save so guys now let us see that comes over you perfectly let's get back refresh let's click on console and yep click reply you can see this reply is working fine so let's click over here you can see that it's shifting perfectly so let me just show reply reply so input box is created let's click on cancel so that time it should cancel this box so for that it's a very small code for that so let's use that jq on even function document on click click click where you're going to take this cancel button so reply cancel button okay so it's a class so just add that class and as simple guys we are making this empty section right so let's paste that and refresh let's click on reply and let's click on cancel cool so we have successfully built this so right now let's continue replying this comment over there okay so we are going to reply to this comment okay so let's now let's start this so let's move to our index on the js file let's move over here and now as you can see this this is the output which we are getting over here okay so this design which you are getting so this is over here so let's copy this reply add button and create that below let's start with on click event jquery on so document where your event will be click event where i'm going to click with the dot class so this is my reply button add button okay let's pass one prevent default thing so e e dot prevent default function and now let's create one variable called this collect is equal to where dollar this so whatever we click on this it comes over here and with this help of we are going to take the comment underscore id is equal to let's take this variable dollar this clicked dot closest function of what your reply box so where is that reply box so this is my reply box so this reply box is nothing but i'll just show you from this output refresh let's inspect so this is my reply box over here so from this reply box i'm taking that reply box and pasting over here and then find dot find function inside this what you're going to find the closest of your reply button id so reply button value from where this is the reply button this reply button value you are going to so this is your reply button where value is one it stored so let's get that so let's copy that class reply button copy this class and call dot val so now you can get the value of that reply button the comment id okay to get the reply and we will get the the reply so replies over here reply message copy this variable reply message and paste over here so this reply message is nothing but your this box so this where i am typing so this box is the reply so that reply message i am going to copy and get that value from there and then we are going to start the ajax code so jq ajax let's type so type will be method will be post and the url we are going to code dot php and data we are going to pass is nothing but let's take this out and create a variable called where data is equal to inside curly brace let's say a semicolon and inside single quotes you are going to tell comment underscore id colon this comment id are going to pass over here done let's take out the space and the second one will be your reply message okay so this is my reply message so whatever reply you're giving that reply message you're going to store so one one more we are going to create that will be true so let's check this as add reply okay so let's go to code.php let's copy this and move to code.php file so let's ignore this because it's a previous video thing and now let's start the code so if condition we are going to give and check that the data is set or not so if it is true add replies correct means then you are going to come inside this so guys now over here all the values you are going to get by the post method so first we will take the comment id is equal to dollar underscore post of from where you are going to get this comment id comment id and then your reply message re ply reply copy this paste so you can take this one more method mysqli real escape string function and inside this you are going to pass and then first you need to pass the connection so dollar con which is inside this dbcon.php file so this connection is over here as simple so let's copy and paste again and take this reply message and paste take this out and paste over here and now we need to store this so while storing you need to get the user id also so once you log in over here you can see it's not logged in right now so let's login we're at gmail.com one two three four five six click on login you can see logged in successfully cool so now you can see that with production is logged in and let's take that id as we saw in part one we have created the user id and stored the user id in session so let's take this session value dollar user underscore id is equal to this so whatever your comment system is you can take your user id if you're using user session just start over here and now let's type the query so query will be insert into table name so comment replies so this replies we have to create that so over here i have created a simple thing so let's copy this and create a table inside our database so guys let's click new add comment replies id integer 11. let's add the primary key go and auto increment and then over here these columns which i have mentioned so it's user id so let's copy this user id and paste 1 1 11 and let's take the comment id so add this comment id let it be integer 11 and then again this reply message so let's copy this and then it will be varchar not integer so remove this and make worker or else long text we can keep long text let's keep it and then add more two columns for this commented on and created on so let's copy this and create two columns increment two go commented on select date and select the current timestamp cool so let's select with the created at so timestamp we are going to get date and time both and select with this current timestamp so if we don't enter also these fields it will automatically insert the date and time so let's click on save perfect so comment replies table is created so let's copy this and paste the table name and the column fields so this column fields are nothing but user id comment id and reply message let's copy this three fields and paste let's separate them by comma and the values you are going to insert value s values over here first is user id so let's take that user id first and pass that so inside single quotes pass this and again single quote you are going to pass the comment id so let's check the comment id and then finally we are going to take that reply message so let's take that reply message and store that as simple so guys now let's run this query query underscore run with the help of mysqli query function where you are going to give the database connection and then your query so if it is success means you are going to check with the if condition like echo comment replied that's it so let's take this variable and paste inside this give a else condition add something went wrong that's it so let's now let's save and now let us test it so let's go back over here so this is a code now save after the response whatever the code you're getting that echo we are going to check in this response so let's alert that paste over here not like this indirectly so let's and now refresh okay so let's add a comment for this okay let's click reply thank you and reply comment replied okay so we want this text box to be hidden after this so that means for that we need to give the section reply hide so after that it should hide off okay let's refresh so let's go to our database and see data is inserted or not over here cool so you can see that user id 1 and the comment id is 1 and the replies thank you so you can see many comments are given right so let me just show you so this is the comments table and we have one two three comments okay so let's go back on the comment replies and now let us give a reply to this third comment okay let's click on reply thank you oh okay we are replying to om so thank you um we are going to reply click on reply okay and that it's replied so let's check in that our comment replies table so comment id is 3 thank you um has given we will be designing this to reply the replies okay so for this view reply if you click on view reply same format i am going to view that so whatever replies we are giving we are going to view that let's get back and let's just don't get confused let's keep all the things closed over here as simple everything closed and now below this i am going to type jq on click event document so this will be the click event on what button view reply button so view underscore reply underscore button okay so what is this view reply button so let's see the name of this you can see view reply button so let's copy this button name and paste over here it's a class so make sure you're giving dot so once it's done let's keep this prevent default e dot prevent default function and then let us once we click on this this design format should be pasted over there so let's take that closest value first so dollar this clicked is equal to dollar function open and close this value we are going to get and when we when i click on this i should get this closest value all of that let's take this variable and dot closest function so what closest value you are going to find so when we click on this view reply button i have clicked on this then i am going to get this reply box so i am going to check with this closest value this will be my closest value when i click this and what i am going to find is that find the section empty section which we have created over here that is nothing but reply section so let's copy that so when we click on this reply right so on this div only we have created okay cancel so it's gone empty so on the same dev section i'm going to view replies so let's get back give a dot and reply section and inside this we are going to use append function and append the html things single quotes and now guys we need to paste the design so let's copy this same thing from here or else you can go to your function where you have created at the top so this is my function and this is the design so let's copy this and paste let's bring this down as simple and now i want to remove some data from here so let's remove that first let's change this class names sub reply box and we are going to give border bottom b ott om bottom and now let's remove this view reply thing from here and let's keep this all the things same and this button will be the sub reply button so let's make this a sub reply button change the button name and this reply section will be sub reply section as simple all set so guys these values from where you are getting we will be getting that so before that let's remove and add some dummy data for time being let's add this and let's remove this value done let's save and now let us see guys refresh and let's click on view reply okay it's not coming it's showing this clicked close is not a function where is that closest it's a t so we have missed that t save and let's refresh again view you can see where and this comment if you click over here it's working fine so before that they should hide off so it's appending again and again so as for that we need to add just one simple code dollar html function null you have to set so what where you're going to set is nothing but this reply section save use ctrl shift r to clear the catchy and load now let's click on view reply let's click on the second you can see that it's hidden so if you click a number of times it is not going to show that many things okay so it's now let's fetch these comments so this is my comment replies so these are the data let's get that data over here as simple so first you need to get that values so when you click on this view reply we need to get this view reply value so what you have stored over here as you can see the value is 1 over here so let's get that value value command underscore id is equal to dollar this clicked of val so you have got the comment value and let's send ajax request jq ajax and let's send by postmethod code.php to what to view the data so let's send the comment underscore id colon copy this and send over here and let's confirm that view comment data which will be true save we don't need data type so it's after success what should happen view all the data so those things will be these things are going to be entered inside this successful success function so let's paste that as simple very clear and now guys we need to go to code.php let's copy this and let's move this below if we need to check that a set function dollar underscore post method of it's it is set or not if it's set we are going to get the comment id so that comment id is cmt id mysql i real escape string function dollar connection dollar underscore post method of your comment id and then dollar query is equal to so let's take the query from below guys as we have done in previous videos so let me just move to that so this is the code so let's take this code and paste over here as simple let's make this dollar query and this is my table name comment replies so let's take this table name selects are from comment replies where id is equal to we're going to put this comment id so this comment id whatever you are stored where you have stored comment underscore id so let's enter that comment underscore id dollar command id so the comment id whatever you have stored you are going to get get that so once it's run then you are going to show that as simple we need to create a result array dummy array you have to create empty array and after that if it is success means it will come inside this else it will give no what will pass no replies to this user we'll just mention this or if it is success then you're coming inside this so dollar query run so this whatever you have executed you are storing in a row and this row value you are passing in this array function okay directly with the comment okay and now this is all about fetching the user data which user data the user id what you have stored over here so this user id that names we have stored over here okay in this user table so we are going to fetch this full name so that only we are telling that so from this comment reply table we are getting the user id and storing in this user variable user id and then select start from the user tableware id we have sent the limit1 and then executed the query and after that user result whatever we are getting that everything we are storing this in a variable user is user result with the array thing okay so after this we are using array push function to send the data in json encode format to view over here so now guys we need to encode that so first let us check that it's coming or not so let's comment all this and give console dot log function to check that response refresh not here let's click on console and then refresh and let's click on view reply it's giving a mysqli number of rows except parameter to be result boolean let's check over here get back to the code okay we have missed that where condition so add that where condition let's refresh click on view reply okay we are not getting anything why is that this result you have created now right so that you are going to pass over here paste and then you are going to send this array inside this json format so let's save and now once it's going over here let us check that let's go refresh let's go on console and let's click on view replies perfect you can see that it's coming over here so data is coming so guys now so let's comment this and uncomment the again and use the for each loop so jq each function we are going to use for forage in jquery let's give this response inside this and then pass this key and your values or value only will tell let's cut this and paste over here now once it's done you need to get the values so what values you are going to get so i'm going to put this username single quotes plus plus and then we need to concatenate that use dot and use user y user you have passed that in your array format okay jsn so this user you are going to pass over here and get that result the column full name so what is this full name is nothing but your this user table okay so this user table column name is full name you can see that full name is that so this column full name we are going to fetch let's get back full name and i want to fetch the date also so what date i am going to use value dot cmt commented date so reply date [Music] okay so this cmt copy and the comment date let's come on the comment replies over here commented on is there right so let's copy this commented on and the message which we are going to show copy and paste the message is a reply let's check that column name reply underscore msg underscore msg and this reply will be the comment id we are going to get this comment underscore id so let's take that value and paste inside this button which will be comment underscore id save it that's it let's save and yes guys let's refresh and see the output let's click on view you can see with prakash thank you it has come so let's click on on prakash thank you on what we have replied into our db it stored so let me just change this user id to 2 not this one let's make it to 2 perfect change the user id and let's refresh let's click on this this is with prakash comment and let's view the reply so om prakash has commented thank you perfect so on om prakash let's view the reply with us thank you um perfect guys so guys now let's click on reply again when we click on this reply again a text box should be open like this and we need to reply to this on prakash so guys now let's continue this thing so when we click on view we saw that all the replies to this comment we have viewed over here so this now this is commented by omrakash so let's reply once again and yes man it's good reply okay let's view this reply you can see that under this nice post there are two comments so one is by om prakash and now one is by with prakash so this now what i want again i want to reply to this guy so let's begin with that so first when we click on this a simple input box should come with the reply and cancel button this is the button name as sub reply button i'll show you you can see that so this is a button sub reply button and yes guys let's get back let's create so jq on click event document the event will be click click event on what click you are going to use with the class called sub reply button which we have taken so let's paste that and let's pass that event e dot prevent default function and now guys let's create a clicked is equal to dollar this okay so when i click this that time when i click this reply sub button i want this first value so let's take this value because it might be useful anytime let's take that it's a comment id so let's mention that comment id with this clicked dot val so when i click this this value will come off inside this command id so let's keep that aside and now main moto we are going to build the input box when we click this a input box should be ready so take this click this this clicked dot closest value of what is the closest value this sub reply box so this is the reply button when you click that oops when you click that sub reply box and going to find where you're going to append that box so this is my sub reply section that is class so mention dot and then use dot append function so inside this append function we are going to design that so let's take it down and use that design as simple guys i'm going to start with div close the div and not much things input input tag close and now type is equal to text and the class to design form control and placeholder your reply and this input box name will give as sub underscore reply underscore message so this is a sub reply message a simple open div close div and give a class text end and inside this you have to design the button so let's copy this button from the top itself and paste we don't require this value just remove that and use this button button small a simple copy paste so this will be your reply button right so sub reply add button and this is sub reply cancel underscore button very clear mention this cancel and change this to danger primary save and now guys let us see the output for this so first let's get back refresh let's click on view reply reply let's see on console log what's the error closest find okay we have given that wrong spelling click on d find refresh let's click on view reply let's click reply you can see that design okay answered so when i click on this reply i won't see multiple times it's printing so let's solve that so we are on this reply section so let's take this reply section copy and paste above this dollar single quotes dot class reply section html open bracket close bracket double quotes let's make it to empty and after that we want okay let me just give margin top and bottom two let's view reply click on reply you can see there's two things cool so it's now what i want when i reply on this i should take this username and put over here so first you need to go to this case let's move so that case is over here i want one input box inside this so this this output is this okay so let's add one input box input let's give type which will be hidden and add a class for get user name okay and the value is equal to from here you are getting the user full name right so let's copy the same thing and paste over here inside single quotes paste that that's it full name you're going to get as simple so guys when we click this the time you are getting the um we need to get this value so same way you are going to copy this paste dot val so what value you're going to get this get user name so yes so when you click on this reply button sub reply button it's clicked that time you are going to the closest value and finding this get user name so finding the value of it and storing that in a variable called username is equal to that so let's copy this username and pass inside this input box so let's create a value attribute i'm going to use add add symbol and then pass this value over here as simple save it and let's give a space over here now yep guys let's get back refresh let's close this view reply so there is one prakash so let's click on reply over here at omrakash it has come so guys we are almost on the youtube site and the instagram commenting okay so both things are matching to that so if you want to make optimize this thing linkable clickable it's going to be high-end so but this is for commenting system so we'll stop with this so now guys let's click on this cancel so that time this cancel should be headed okay so for that it's very simple code let's copy this and add that jq on click event so instead of typing this again and again let us copy this and paste over here done and change this button name and now so when i click that cancel the time this reply section should be null so let's copy this paste it set refresh view reply and i'm going to reply to this let's cancel code it's getting cancelled perfect so guys now let us start the code to insert this reply into our comment table comment replies table let's get back now let's type let's copy the same thing and paste let me push this down let's copy this sub reply add button paste over here and remove this so first we need to variable this collect is equal to dollar this and take this value v required variable command underscore id and then one more variable which will be the reply is equal to so this reply and to whom you're replying so we need those things so first let's click download this closest and i'm going to find that and what you're going to find that is nothing but your value so let's tell val so what value are going to because it is a value attribute because of that we are going to check that so first let's get back to chrome refresh okay it's showing an error because this is it's not executed right so let's refresh view reply so when i click on this reply button that time this value i need it okay so over here you can see that it's in a sub reply box so when i click this reply i should get the let's go over here so when i click this reply i have to go to the sub reply box and get the value of this reply button so let's copy that sub reply box i'm going over here closest of subreply let's uncomment this and go back to this button so this is the button sub reply button where the value is 1 over here so let's get that one value find that value okay so val means which is stored in a value attribute as simple let's save and see we are going to get the reply thing also so a simple let's get back so this is my reply column reply input so i'm going to check with that subreply box inside this closest value i am going to get this sub reply message copy this subreply message cool now we need to store this let's store in a variable called data is equal to where comment id which will be this command id and then your reply message which will be your this reply and one confirmation to store add sub replies true as simple and now let's call the ajax the method post urlcode.php file data which we have already created this data variable is over here and send that data and after this we have to move to code.php and write the code and get the response in this success so now let's go to code.php file and write the code get back let's push this below and type if condition and check it is adjacent or not so we are going to check with the post method where we have set something as true so this adder sub replies as true we have set so if it is set then you are going to get comment underscore id oops comment id is equal to dollar underscore post method of the comment id copy this and paste let's paste this in mysqli real escape string function first database connection and then your dollar underscore post method of comment underscore id as simple and then you reply so let's copy this reply message paste and this will be a reply message as simple so let's take the code where is that insert code we have already written so let's copy this and paste that again over here same to same as simple so it is the same thing which we are going to comment id pass the comment id user id so user id is nothing but your authenticated user id dollar user id user underscore id is equal to your logged in time so when you are logged in so that time you are getting this authenticated user id let's take that pass it over here and save that data perfect so let's check this user id stored comment id and the reply let's copy this reply message variable and send this okay so this values will store into your comment reply tables and then execute if it is replied it will be comment replied to below i mean comment replied to user will keep that as simple so guys now if it is wrong it will say something went wrong so let's get back and take this response and alert that and send over here so before sending the response i want to empty this when we click on reply i want to review this okay so for that you can take this reply section dollar reply section dot html refresh empty okay so let's save refresh let's click on console view and i'm going to reply to om prakash your you're welcome let's click on reply okay comment reply to user okay let's view this you can see here it is at omrakash you're you're welcome you have given the message you so you can see that youtube type comment has come and instagram type has comment system is added now so guys we have successfully completed with this how to give nested replies so this is the main comment so i'll just show you refresh and let's move with the second reply over here so there is no reply inside this here it's a reply and let's log out login as homeprakash home gmail.com one two three four five six let's click on login so prakash is logged in successfully okay and guys i am going to comment on this view reply no reply good blog thank you bro let's reply okay you can view see you have thank you bro has come on prakash has commented let's log out login let's give that gmail.com one two three four five six login okay let's view this reply on pragus thank you bro where i'm going to mention that hello i have a doubt let's reply okay view reply you can see that at omrakash has been mentioned for this by the user with so guys we have successfully cleared about how to make a nested comment system in php like youtube and instagram too so thank you once again please subscribe like and share

Channel: Funda Coder

Views: 2,975

Keywords: fundaofwebit, funda coder, php nested comment system, nested comment system in php mysql, nested comment system using jquery ajax in php mysql, php comment system with reply, comment system in php, nested comments in php, nested comment system using jquery ajax, live comment system in php ajax, php comment system in jquery ajax, nested comment system in laravel, comment system using php and ajax, nested comment system using php and ajax, php tutorials, nested comment system in php

Id: sSFEliMyOl0

Length: 103min 46sec (6226 seconds)

Published: Tue May 11 2021