Create a Comment System in PHP Tutorial

today we're going to talk about how to create a comment section inside a website using PHP code now the way i'm going to show you guys how to do this is going to be slightly different than I think other people might teach you how to do it because we are going to do this in two different ways the first way we're going to do it is where you don't have to be locked in using a locking system in order to write comments and the reason I'm doing that is because i know some people out there don't know how to create a login system yet and still wants to learn how to do this now the second way we're going to do it after we've done it the first way is to take the comment section and make it so that you have to be locked in using a login system before you can write any kind of comments so we're basically going to take this episode and continue to build on it till we have the final episode where we do actually add you know the login system to it so if you don't want to learn how to do this with a locking system just going to follow the next couple episodes and i'll let you guys know when we start including the actual locking system ok so the first thing we're going to do here in this episode is we're going to go and set up the database we need for the comment section and just set up the basic HTML part that we need to have before we can write any kind of comments so what we're going to do here is make sure we do accept exam turned on because we do need to connect with some type of database and i'm using my local database in this case I'm just going to use XM for this now to have it on we do actually need to have a root folder for a website now i just created a folder inside mighty ducks folder inside the exam called comments section so as you guys can see is completely empty i have no files in here yet so after we have this we can actually go and open up our PHP myadmin which is where we can actually go in and create databases that we're going to use in our website so inside PHP myadmin i'm going to click on databases at the very top here and i'm going to create a database called comments section now you don't actually have to call this the same as a room for the name i'm just calling it this because it makes sense to me so after actually written it out i'm going to click create now as you guys can see after he had create is going to take a straight to the database where it says no tables found in database so we do actually to create the tables we're going to use to create the comments section so the first thing we're going to do before we start coding anything for the website is that we're going to go ahead and go to the SQL tab up here in the top and write the SQL code that we need to write to create a table for the actual comments because we do X need to save the common somewhere which is going to be inside the database using our table here now if you're not familiar with PHP myadmin and creating databases i highly recommend you go back and watch either my tutorials or someone else's tutorials and how to create tables and databases because you need to know how to do this before create comment sections ok so now when here let's go ahead and create a table i say create table space comments because why not just call it comments space parentheses semicolon now I'm just going to go and move down my parentheses to next line so we have a split here and then we're going to go to create the necessary columns that we need inside our comment section table the first we're going to put in here is going to be the ID for the comments so I'm just going to go ahead and say see ID which is common ID space int for integer type which is going to be set to 11 so we can write 11 characters of numbers space not know because we don't want this to be left as not all inside the database we do actually want to have some kind of thing in here space then we're going to set it to auto increments because we need this to automatically increase by one each time we include a new post and we don't have to do this inside our PHP code will actually automatically do this so we don't have to do it ourselves because they are to underscore increment in capitalized letters space primary space key so we do X have to set as our primary key inside our table we're going to say combat and go to next line so now we can actually start putting information that we want inside a comment section and that's totally up to you guys you can follow the way I'm doing it here or you can create your own way but i'm just going to go and focus on a user ID so we can actually see who wrote the comments at dates so we can see what time they wrote the comment and the message so we can actually see what message actually wrote and posted for our whatever we're posting on here so the first one is going to be uid space wha cha parentheses which is a data type with characters and I'm going to go and set this one to on 28 cause I don't think they use ideas can be more than this space not no comma then I'm just going to go and copy this line because no need to write everything twice and paste it underneath here two times now the second one is going to be teams to the date which is going to be a datetime format at which we're going to use for this example so i'm just going to write the name as dates and set the what he called the data type to date time and it's also going to be called notnot underneath here wait to write message as a name and we're going to change it from varchar2 text which is a binary type of text which doesn't need to have some kind of limit like we do at racha and we're also going to set this one to not know and make sure that you remove the last comma so after we have this is actually going to copy a copy whatever we have here and paste it inside our text editor and save it because it's always nice to have our escrow coach saved somewhere so we don't have to double write something in case we screw something up and we need to write the entire table one more time I'm just gonna go and save it inside my root folder as I don't know SQL . SQL or something so after we have this weekend let's go back to our database and click go as you guys can see we have a new comment section table now if you actually go to structure at the very top here as you guys can see right now we don't actually have any rose if you go to structure you can access your data type that we need to put in here so now we have two database of running we can actually go ahead and go down to our text editor set up a new document and create our front page for the website I'm going to go and save this one as index dot PHP now in here i'm just going to go and set up a very basic html5 template which were going to use for our front page I'm going to go and write something else down the body part here which is going to be whatever we want to comment on now in this example we're just going to go and say we have a video on this page and we want people to be able to write comments for this video so I'm just going to go and write a very basic video and I do actually a shortcut to just write this out really quickly like you guys just saw here but you guys do not create a video by now because this is basic HTML so underneath this video we're going to go ahead and create a comment section using just HTML which means we need to have a form dad has some type of input that we can actually write inside of and submit using a button so I'm going to go and write text area inside-out form the opening and closing tag and inside the textarea the first tag we're going to go ahead and give it a name and set it equal to single quotes not double quotes of course it still works a double quotes but for later you're going to thank me for using single quotes to begin with so in here we're going to go ahead and say message because why not just call this text area for message so we know what it is and then I'm just going to go ahead and go on top of the text area and create two inputs well let's actually just create one for now and set the type equal to single quotes hidden which means to be can actually see the input but it can still be submitted when we hit the button i'm going to give it a name equal to single quotes as user ID because inside our database we need to have three different values we need to submit when we write a post the use ID the date and the message so after this one I'm going to go and set a value for this input equal to single quotes and because we don't need to have a login system for this example in this episode we're just going to go to set this one as anonymous and let's see if I can spell this and non new mess i think this is spelled correctly I'm not American I'm not entirely sure but this is going to be what it says inside the database then now now we have this we can actually go and just copy this line paste it below and changed the name to date because we also need to submit the date for whatever writing in here i'm going to set the value to something else for now we don't actually have the value that we need to put in here because it has to be the current date time so let's just going to set that up right now so at the very top of our front page or inside the header if you did actually split up the documents we're going to go and write to PHP tags inside the PSP tags need to tell it that if we were to actually go in and call on a date function using PHP what date time format should it be like what time so should we actually use for the date formats so I'm going to go and write date underscore default underscore timezone underscore set parentheses semicolon so inside the parentheses we need to tell what kind of format we need to have it in so i'm going to write single quotes i'm going to write at least in my case Europe Beck's less copenhagen because i live in Denmark so i would like for it to be copenhagen time now if you don't know what to put in here just go ahead and Google it just got google the the format or the function name and you know whatever you can put in here if you live in America if you live in India or somewhere else in the world but this basic just takes the current time in Denmark when we do actually submit the post so now we have that up here in the very top you can go back down to a form and let's actually go and put this inside PSP quotes the entire form i mean like so and in taxi to form on the website need to echo the form out so make sure right echo double quote and then the end here we're going to right double quote semicolon so now we have that we can go inside the value which is equal to nothing right now and say double quotes punctuation and inside here we can actually go and write the PSP date format or date function which is where we're going to tell it how to write the former we're going to insert into the database because right now you guys can see the data type we said for the dates which day time which means that it has to be a very specific way they write out the date that we submit you know to the database so now we have the date function down here we're going to write single quotes and then we need to set it to year dash M dash D now notice that i did actually write year as capitalized why because we need to have that space and then we need to set the time which is going to be a capitalized eh coll 1i colon s which is basically the hour format the minutes and two seconds now that our format the reason it's a capitalized eight is because we're using a 24-hour time format we're not using the 12-hour use a $TIME a.m. and $TIME p.m. but we're using 24 hours so now we have this we do actually have the comments section almost ready because we need to add a button as well at the bottom here going to add a button and inside the button tags are going to go ahead and write comments so it accesses comments inside the button and you can actually click it now the button itself we're going to go ahead and give a name equal to submits and we're going to give it a type which is going to be equal to submit as well so now we have this let's actually go and see what we actually have done inside browser forward to go to my comment section website you guys can see we have a video and we have a comment section down here which looks very awkward right now but we will actually style it at one point this actually gonna move down the button so it's not on the right side here by going right after the text area down and our PHP code and say break like so refreshed and you guys can see we moved it down so now we have this we can actually go ahead and that's actually going to style it let's just go ahead and make it nice so i'm going to open a new file save it as style.css inside my root folder and link to it inside my frontpage so i'm going to go inside my head tag and linked to style that CSS again if you think I'm riding fast I'm riding the HTML you should not to write HTML before you go into this episode so just go ahead and copy it is if you don't have to write it so now we have this we can actually go into our style at CSS and say okay so inside this website we have a text area open up the tax in here so we can actually write code and give it with and we're going to set the width as I don't know 400 pixels going to give it height as 100 pixels I guess let's actually go and set this one to 80 pixels because that might be too much let's give it a background color as hashtag FF which is white and let's go and set the resize to none because we don't want to be able to stretch our comment section or like our text area as you guys can see I can actually grab onto it and resize it which is not very good inside website now I can actually resize it and we have a fixed size for this text area so now we have this we can actually go ahead and style the button so i'm going to go ahead and go underneath here and say we have a button get with as 80 pixels I guess height as 30 pixels is actually going to set this one to a hundred pixels and with which is good enough let's give it a background color hashtag and let's go and set this one to 28 28 28 which is a dark grey and let's remove the border by setting the border to none and let's actually go and change to color the text set it equal to hashtag FF which again is white and let's go ahead and set our fun wait let's actually start to front family instead to Ariel which i know is not a very pretty front but we don't want to worry about having to import funds in this episode so we said to area and save font-weight and set it to for hundreds so now we get this looking thing so now we actually have some sort of section down here that's actually going to do one more thing let's go to our button and say the cursor will be hard on the button needs to be set to pointer which basically means to get right now as you guys can see we don't actually get a hand simple when I have on the button now when i refresh the browser you can see we get a hand simple so it actually looks like a a clickable thing so now we basically have a comment section the next thing we're gonna have to do is actually go ahead and write the PHP code to submit the comments and then episode afterwards we're going to worry about axis showing the comments underneath here and then after that will actually look into creating a login system we need to be locked in in order to write comments ok so that's how it's going to be like I hope you guys enjoyed this episode is already pretty long and i hope to see you guys next time