PHP Comment System With Reply | YouTube Clone

if you want to create a comment system for your website like we have here on YouTube stay with me so now I'm here at my PHPStorm and the first thing actually that we need to do is let's check how the youtube comment system is looking like so as you can see here we have some basic layout here is the widow and from the right side we have some sidebar that we don't need actually and then down below what we have is the place to add a public comment when we click there we are able to right and then hit comment or cancel here we also have the number of comments that are already there and then down below we have the list of all the comments for each comment we are able to actually hit like this like when you are hurt and then also we are able to provide the reply in case that we want so first let's build this basic layout and then after that we are going to create a very simple registration a login for so that we can authenticate and know who the user is and then after that we will create the database and provide the user interface where we are going to store the comments so that's it so first thing I'm going to boost up website I will hit download and then here I'm just going to use BoostrapCDN links so I will grab those two okay here I will just say I want basic HTML 5 so maybe like me something a little bit okay so I remove old JS files down below and maybe let's see here you to comment system okay now the next thing that we are going to do while I'm here I'll grab the popper because we are going to have some models and then also I'm going download from the jQuery website the library for jQuery because we are going to use it for a lot of different things okay so maybe let me quickly okay I always love to format my code properly because it's always easier and faster to write one okay so now the first thing that we are going to do is in the booster we are going to create the container and then inside this container we are going to have at least one row and inside this row we are going to have one column that will actually take the entire space that we have inside the container and also I'm going to duplicate this row multiple times so Y first in the first row I want to have buttons for for login logout and registration then I want to have some video and then down below I want to have a place where I can add let's see a new common and then down below I want to have the list of all the comments that we currently have okay so if so maybe let me just close those steps if we refresh we can see how our layout looks like so let's start with the buttons so I will create a new button let's say register and then maybe first let's specify some options I will see class BTN and then let's see primary and okay that's enough for now later we'll do some other things and maybe here let's see I will add them to the right and for the container I will set let's say margin top 250 pixels for example so if you check okay looks good now we of course need to change this now for the video let's say I will just grab this one does so we actually get the feeling of how it looks like on YouTube so let's say like this and then I will just okay align everything to the center now for the place to add a new comment we will just need one text area okay okay this is not important so maybe here I will just say class will be for control and then maybe we can have one placeholder like add public comment okay now let's see how all looks like okay not that just this place is way way too big and then also it will be amazing if we have so maybe padding's here so let's see here I will say that margin top let's say 20 pixels and margin bottom also 20 pixels and then maybe this is let's see we don't need nothing back okay this looks so much better now here of course we will need again to have some button so let's say button let's say begin primary and also BTN and maybe let's see comment ok this should look good yep maybe just we can say style right ok so pretty much this looks solidly ok and now we need to design how our comment section is going to look like so maybe let's say like this we will have one div that will be let's see user comments ok and then inside this user comments you are going to have different comments so let's see one every comment will have its user and inside this user we are going to have let's say spend at this time one which means one this comment is published and then down below we are going to have also like let's say user comment and all this you are going to have maybe replies okay so how it looks like let's say it should be seen a piece person so let's see here we will set the date so at the moment you are just doing a design so let's say 16 or 15 you should comment like this is my comment and then in the replies we will have different replies but let's first check this okay so this is not bad let's apply some styling so let's see here I will have okay some time okay and maybe we can see that every user let's say you say font weight will be bold and let's say color will be black okay now for the time we can say that let's say just color will be let's say great that's it there is a difference then let's say user comment they'll just see it's okay it's black and then let's say that all the replies will have margin left let's see 20 pixels so let's check this okay so this looks good I should close this okay okay let's now check for the replies we can again inside the replies help comments okay but what we can do is let's say that it will look like this so we can just duplicate multiple times and now this is how it looks like maybe what we can do is say that each reply you'll have Martin top panel pixels also okay or maybe will be better if we see that replies not comment will have margins of 20 pixels okay so now this looks much better and then down below if we have a new comment without any replies yes it's here so I will just okay this just so you can see how it looks like this so this is not bad you see now this is the main comment and then we have all the replies then again we have a new comment and its own replies which is good okay now of course we are going to do this dynamically we are now at this stage just building the layout to make sure how it's going to look like so we can make actually something very simple and let's see here last thing is we can see like 300 fine comments this needs to be okay so this pretty much like you do so there's okay now now once we have the basic layout the next thing that we need to do before someone is able to publish some comment is that we will require four from them to actually first log in and or if they don't have an account already they will need to register right so in order to do that first I'm going to build some models where they can register and login so let's see here we can do it here we are going to see we will have one model it's going to be a model dialog okay and then each model dialog have its own model of content and in the content we have model heater and then body and footer I would look like this okay so this is the basic so maybe I'll specify for this one let's say Logan model and then our does duplicate for Raven let's first build the relative registration and then we'll add below so in the heater we can say okay there will be sorry somewhat a title and let's say it's going to be registration for now of course over the registration and login form I will just go over quickly so you can see how it looks like so we have final code but if you want really in-depth tutorials there's so many in mind you don't like just wanna check those out or even if you are looking like to get in-depth like web development course where you are actually able to learn everything that you will need to know to quickly and easily become a great badass web developer you can find a link in the description of this video and grab my course okay of course okay so in the body we are going to have one input type text of course now let's see yeah okay so let's see I the username and that lets a placeholder your name and then you have your email let's see password okay so this will be user email use a password okay this time will be email okay and this one of the last one okay who in the footer we are going to have two buttons so let's see but then this one will be closed and then another one will be registered but first let's see let's set up some classes let's see data this mess it will be model okay so let's see this okay before that we need to set on this button that we actually target this model so we'll say theta toggle let's see and take that target its register okay so let's see this how it works okay register and it's here login nothing happens okay so I believe we have forgot to say here that this is going to be for control cool and then also here we are going to create one button so say primary and we'll see register cool let's see boom now this looks pretty solid we have very simple a registration form where we ask for the name email and password and then we have option to register or close which is good what we can do maybe is whoops just to do something like registration model and then later we will have login model you'll see that input and again here input we'll have let's say margin 10 pixels so it looks like of the weight better yeah so this is pretty solid now let's build some functionality to this so first we need to attach some listener to this button so and so on click here we will through the ajax send all details to the server and then on the server we are going to assert those information and store quickly in the database okay so here this is the button so let's say this will be ID register begin okay and now here we are going to write some script a of course time javascript quick so here I'll say on document ready okay we will sit on the register began we will say on : you'll have one function which means that we are going to grab informations from here verify and send okay so what we can do is let's say we will say that we have like name it is user name okay then we have email and password so let's say you would email it was a fast one okay and then here you can see if name and email so and that's what okay in that case of keep ours will say please check your and pants okay if we desta register says please take your inputs okay and now of course we can do a lot of additional verifications and do it on different and better way and if you are looking for that I have again great in that video tutorials that you can watch but for this tutorial this will be pretty much enough okay so now we are going to send all the details to the server through Ajax so first I will say that our URL will be index dot PHP the method how we are going to send data will be post and then we are going to have like data type what server will return with Jason and then theta that we are sending to the server is with the register one it is just a flag so that in the PHP I know that we are actually going to register the person okay we have name we have email and then we have password okay cool so basically here this is what you are going to expect on PHP side and this is what we are actually sending so this here and this can be different just you need to pay attention that you are actually doing correctly on PHP side okay and then let's see on one success we are going to check what has happened so at the moment let's see we will just bring to them console okay now let's assess all those informations inside PHP okay I have no keyboard so I have some problems to get used to it still okay so let's see here if this post register it's all good and we are going to accept all the information okay so at the moment I'm not doing real escape string anything because first we will need to create the necessary database okay I'll show that in a moment okay and for now I will just say here success now our Ajax expect Jason so just see text for now and that's it okay so if we check everything right no let's it was this this is nothing like us okay cool now when we register and hit this C please check your inputs okay passport register ok separate and success in the network we can see see that it to the index.php we have sent register name email and password this is what's I'll return it so this part works and looks really good okay now the next next thing that we need to do is to actually go and create our database and store and create a new user there okay so I'm going to create new database so I'll see here you know let's say you do comment system I will use UDF you can see so we will actually here need three tables users comments and replies at least so first I'm going to create users table so he will have id integer how to increment it then we'll have name that will be water let's see 50 we will have email let's say again 50 and then we are going to have password now we are going to here use encryption of course so we will use bcrypt with these 60 characters but just to make sure that in the future it's not changed because of the different versions of PHP so how does it 255 that's something that you always need to be aware of now let's say create on keep on it okay my mistake okay great and this will be date time there isn't one okay so now once we have created the table the next thing that we need to do is to create connection okay so maybe I can get here casually later - so let's see we will use MySQL okay so my host is localhost my username is root my password is empty and database name is YouTube comments system if I'm not right okay now please ignore this host semicolon sorry cause come because this doesn't exist okay so if I copy this and let's say paste here you can see how it looks like so I know always there are comments that they can get working so this is just feature from PHPStorm so please please please ignore it okay so now we need to real escape this to make sure it's oh good okay real okay sanitize always your inputs cool okay and now first let's verify that the person with this email or or maybe let's see if filter filter war now let's see in and he'll see filter fault it email okay so only that case okay else exit failed let's say failed email okay so we want to make sure that our email is correct now let's see how many rows do we have in the database query so see select ID from users where email evil amen okay and then I'll see if as well number of rows bigger than zero that means that user exists okay so see exit you fail user exists so you know what is the issue else we are going to add the person so we will say dust connection query insert into users and then we have name email password create on say values okay so first we will need to encrypt the user password so say we will use function password hash and we are going to use password and we will use be correct okay now we are going to store so first one is name then we have email then we have encrypted password and the time is now okay and that's it so let's see what is going to happen now hit f12 again I want to check my console so I hit register I'll say say like this register and she's failed email which means that our email is not quality then output wallet email hit register it's a success that means we have been registered okay now the person exists here password is encrypted all the data is here amazing now let's try to register again okay now sees failed user exists which is again amazing it means that we don't have any issue in the code everything is working properly and we already told this as s okay cool now let's first handle all those situations that we have solid say here F response equal failedemail will see alert please insert valid email address okay then I'll say else if response equal failed user exists' our user with this let's say this and then else what we can do is to maybe just refresh the page so we can see window that location equal window that location now why this is important well it's not at the moment but let's now create some functionality so let's see at first they will see both options but if person exists so let's say here oh say session start okay and then let's see that in the session we are going to store some variables so that we know if the person is logged in or not so let's say log it in equal false but you'll see if is set session and then let's say login and he's sorry session name okay we'll say okay loggedin equal true okay now we will say here that okay where it is can find fish here so say that this button will be visible only okay I mean anti-ro will be visible only if person is not logged in again your table issue okay so say here if not lock it in come this okay and then also when person is registered let's lock him inside so say that session loggedin will be set to one session name that's the only data that we will need is the name maybe we can set also session email okay email and then later we also will need user ID okay so how we are going to get well at the moment we don't have it because we have just inserted so maybe let's get it so how we can do it you'll see as well is equal connection query now let's say select ID from you from users for the part I need desk limit one so what does it mean it means that we are getting the ID from users and you are sorting by ID descending and limiting only one which means that you are going only to get the ID from the last so let's say data is associative array okay and then here we can say okay we have session what the user ID is the ID cool okay so let's that's not this gave you lets it show me snake and the email will be like sis needed like that the comm password let's see test one two three register okay issue is okay but now as you can see here at the top at the top we don't have any more buttons login and register but also we don't have an option to log out so maybe we will say that here else you know echo and there will be some button so maybe you that is the case well we don't believe this is click here and then here you want to see okay button let's see class ven-ven let's say warning okay and then we will say log oh now of course this is not going to work at the moment but it will war will implement it later okay now we have the button logo okay cool maybe we can quickly write lookout functionality it's super simple okay maybe to be easier for you guys to understand if this is a they notice a here logout dot PHP okay and then we'll create a new bid be fine let's say like this okay we'll say here session start and then I'll say asset session loggedin say session destroy and then I will just read right back to the index.php be okay it's super simple to create a log out file okay fresh now I don't know we have you ever directed and now as you can see we are able to actually see register and local buttons okay now the next thing that we need to implement now once we have like registration finished and basic layout now let's implement login and pretty much we have set up all the foundation that we need to have and then we are ready to start finally adding comments right okay now for the login so maybe I'll just increase this in case that you didn't see okay for logging we are again going to need one model so I'm going to duplicate this I'll say this is logging model but it's loading for here we are going to just need email and best fun so let's see you email userLpassword means login loginBtn cool now this is quick we will do the same thing to duplicate this okay this is super fast copy paste right so this is login okay now there isn't this one but we have user login email and user login password and we don't need this part we don't need this part okay login cool now you'll see that you have only failed and we will only have success so we can delete this part which means that we are just going to refer the page again I mean that is the simplest way at the moment but if you are really looking into more in-depth and advancing solution I have a bunch of different or else on my youtube channel so we'll see here please you in details right and then here I'm going again to duplicate this because we are going to create same thing okay we expect logon we have email and password so if it's filter available and then here what we need to do is you say ok select ID not email but password hash from users where emailing of email and here we'll say if equals 0 we'll see again fail else we actually need to do all the big different things here so I'll say ok ok if it's 0 that means that the user is not found with this email okay that's fail now we are going to grab the information and you'll say ok we have password here and now what we are going to do is we will say okay if password verify so we need to use the password and so okay my bad see here password hash with just this one okay okay so we see if password verified in this one we know that we have the person with this email and then in this one we know that the password is correct and then we are just going to create a session and return X success otherwise we are going to say okay fail but here we are missing the email so I'll grab it from our table and I will say here okay it will be date name so let's see I will hit refresh here and then we need to say the target key hash tag here okay that's one two three okay now those are the correct details but let's test fake so let's see first wrong email says please check your login details who now let's have a great email but let's have wrong password again it says please check the login details now let's have everything core cool that means that we have been logged out and as you can see now there is log out but which means that finally we did everything correctly now we have basic layout we have registration we have login form we have a log out okay and finally we can start adding comments okay now before we implement that functionality first we need to create table where we are going to store all comments so I'll go here say new it will be naming comments ID out in front okay so we are going to have user ID in Turku and then we are going to have comment which will be let's say text I don't think so that anyone will have longer comment but if you want to make sure you can set one text whatever okay my same snake again I hit enter okay structure not making those mistake like me all this okay and then before we continue I want to go to relationship of you and I want to say okay I leave this empty I want to say that we want to on delete and update cascade user ID we go grab from the base table ID okay so what this means that when we create foreign key like this that means that in case that user is deleted from this date table for whatever reason we are also going to delete all his comments because there isn't any point of not having the user but having all his comments okay cool now once we have that let's implement the functionality so on this button add comment let's specify some attach some event so it's here so we'll say okay ID will be comment this id will be comment let's say mainComment okay so what we can do is we can just simply duplicate this like always guys whenever it can use the same code don't spend so much time so say okay and comment on click we don't need any of those and for here I'll say okay it will be comment and this will be main comment at all and then I will see if comment is different than empty or even let's see dot length bigger than let's say five characters of least will say okay add comment and here we all have some comment okay for now we'll just display the comes a lock you'll say okay it will be whatever space okay cool now let's disappear to be except so we will say I will duplicate those two things okay so this will be comment this here of the add comment cool and then what we are going to do we will just say like this okay connection query insert enter comments we need user ID comment okay we have dreams to user ID we have in session comment we have here so we will grab this one from the session so I will say okay session user ID okay if you remember we are storing one here and that's it and then you can see he okay exit success so let's see fresh I'll say add comment it says please check your inputs right something hit add comment okay no error in the console it's a success let's check the database bros okay so as you can see now user with ID number to have its comment and it's here nominee click here we should be able to open and see who that person is okay okay now the next thing that wants someone post we should do is to let's say prep and this comment to this entire list okay so how we are going to do this I will finish this tutorial right here and then in this in the next tutorial because if I continue here it will take up love hounds to finish everything I'll create another part too and in the part two I'm going to show you how to display all the comments how to add replies how to show them how to display some basic statistics except etc etc so guys if you like this video if you find it useful please like it and shave your friends and of course if you have any questions or anything please ask in the comments below and I will be more than happy to answer all of them take care

Channel: Coding Passive Income

Views: 34,965

Keywords: php, php comment system, php comment system with reply, mysql, php tutorial, php for beginners, php tutorial for beginners full, how to create comment system in php, how to, bootstrap, web development 2019, web development, php login and register tutorial, comment section php, how to create a comment system in php, php comment system tutorial, jquery tutorial for beginners, jquery, jquery ajax, bootstrap 4

Id: eD02QLsTUnY

Length: 51min 44sec (3104 seconds)

Published: Mon Jul 22 2019