Part 41 - Adding Comments [How to Build a Blog with Laravel 5 Series]

hey guys and welcome to another episode on the dev marketer channel this is part 41 of our series on how to build a blog label you're going to watch the rest the intro here in a second I'm actually recording this after filming the video and I'm just saying that I ran into lots of problems while filming this video nothing like big or crazy or scary just I think it's early in the morning and my brains not 100% there and I made some pretty stupid mistakes throughout the video and needed to debug them on camera there so I'm leaving it all in you guys can go ahead and watch it get whatever humor you want out of it or learn what you can out of it and stuff like that but I am going to keep it in there and just go ahead and run this all the way through the reason I want to make this intro is just to let you guys know I do realize that there's a lot of extra stuff in there and if you want to skip over it just skip over it but I'm in for this video I think I'm going to keep it in and then in the next videos you know we'll get back to something a little more concise but I wanted to get these up there's not a lot new to learn so I thought it'd be fun to just do a casual episode where you just I'm just being filmed and if I make the mistakes you guys watch me resolve them right on camera and lucky for you I ran into or unlucky for you depending how we look at it I rented the lots of problems on camera so anyway just giving you guys that heads up let's go ahead dive into this video hey everybody and welcome back to another episode on the dev marketer channel this is a vid this is the channel where we help you build and grow your next great idea now this series is all about learning level it's our how to build a blog with level series and in this specific episode we're going to be working on starting the comment system for our blog so I originally actually was going to skip over this I didn't think we needed to do a comment system not necessarily because it wasn't important for the blog but just because I there we'd already learned all the concepts needed for the for the comment system so I figured if something you guys could just kind of do on your own but I've got a lot of very um we're gonna call them passionate emails that people really really really want the commenting system so we're gonna go through and add it I'm gonna just kind of fly through it real quick and we're going to be we're just going to kind of do a casual episode a day not as many edits and cuts and all that kind of stuff and just kind of see where we end up so I'm gonna try to cut this in as many parts as it takes in order to just kind of keep the episodes confined we'll see how long this takes sometimes these take a little bit longer when I don't have all the edits in them but I figured that because we've already know all the stuff I would just kind of do one of these more casual episodes where we just I just sit here i code and you guys just kind of follow along for the ride and I'll talk about whatever comes to mind while we while we work so I've got a lot of stuff open here hopefully my computer can handle it should be able to I'm working on a lot of projects right now and so the computer is like the fan is running right now pretty hard okay so it's empty this trash I had 70,000 things in my trash for some reason I don't know where they all came from and let's let's go and get started so let's open up sublime and we're going to go over to our app oh I'm in the wrong hold on I'm in the wrong project this is yesterday's project okay so let's go to let's open up our terminal and we're gonna go to CD sites umm CD blog there we go and now we can open this up in sublime there we go this looks much friendlier there we go that's what we're expecting okay so let's see we're going to be working on the comment system so why do we need to do when we're creating a brand new resource first things first we need to create a migration I guess so that the we actually have something in our database to store the new resource we need to create a model to work with the database we need to create a controller to manage all of the different requests we need to create a route to link things to the right place and then we'll need to create the views to you know do whatever they need to do okay so to start off with let's do the model and the migration we can do those together in the terminal so we'll just do that right here we'll do PHP artisan make migration or no we can do make model and we're going to make the model called comment and we're calling a comment because it's our common all of the comments but we always do it singular with the capital letter at the top so comment and we can make a resource controller out of this comment model so it's going to make the model make the or not resource sorry we need to do a model so and then we'll make the model as well we'll see if this works camera is wit model or no it's migration my gosh what am I thinking this is the downside of the the casual episodes you're going to see me go crazy a couple times okay so we're already making the model we need to make the migration so we do - - migration okay so now we go ahead and click enter we created the model successfully so we have an oven model name comment and we created the migration for and the migration is called create comments table so it knows what it's doing here label is pretty slick okay let's see let's start with that we'll come back make the controller in a second so let's head of that first thing I like to work on whenever I'm doing some new resources I like to just hand start with the migration so we're gonna come down here at the bottom migration you can see it set up a create comments table and it already created a new table called comments with an ID and a timestamp so we just need to add things in between that we need so think about real quick what do we want to store for our comments what we need to store the name of the person leave in the comment their email address maybe to confirm they know that they are someone or something and then we'll need the actual body of the content of the comment and then we might or we're definitely going to need the the post ID that the comment belongs to to set up that relationship and I think that that is basically basically everything so let's go ahead and do that so we'll do table string and we're going to call that name and then we're going to have table string and that'll be our email oops and then we're going to do table text yes text and we're going to call that comment and then we're going to do table PO uh integer integer okay and we're going to call that post ID and that'll be basically I did have this idea we could come and like invent some sort of approval system I'll show you that real quick let's go ahead and do that so we'll do table a boolean and we're gonna say approved okay and the reason that I want to do that is just because um the it just kind of we might we might get into this or not we'll see how this goes but we can create a boolean which is a true or false and then it'll be the approved or not approved time ID okay so that's basically everything the last thing that we're going to want is at the bottom here sometimes we actually want to set up this post ID to be a foreign key alright so we'll do table 4 in so how you do it yeah foreign and we're going to call it post ID all right and then we're going to say that that references references yep and that it references the ID number of the on the post table okay and then that's basically it the other thing you could do here is you could do an on delete cascade okay so um there we go so basically what we want to do there is when you cascade what this says basically is if someone deletes the posts it'll cascade and delete the this this reference right here so anyway that's kind of good to have that way you don't need to use the detach method I don't like and many to many relationships I think it's way better to do detach but with these simple ones you can do the Cascade delete ok so that's basically all we need for that so this will just drop the whole comments table so we're good to go there I think we're done so we can go and save this and let's go ahead and run the migration so let's head back over to our terminal where new PHP artisan migrate we get an error cannot add foreign key constraint wonder why cannot add the foreign key constraint that's funny let's look at our table real quick blog comments you know Divi supports them they're all in ODB I wonder why it won't support it let's let's Google this so general air 1215 can I add foreign key constraints let's go ahead and do this and do have a let's open up a well we'll do it over here ok let's save this figure out the problem here let's add layer pool in here ok all right I'm game creating the foreign keys however when I migrate my table I'm getting thrown this error due to do very similar to us very very similar ok there's the migration ok and India is what I'm doing wrong I want to get this right I've got tables I need to create blah blah blah blah ok add it in two steps and it's good to make it unsigned to did we make it unsigned I don't think we did that is a good idea though so that's what we need to do oh okay I got it okay so what's happening here so this is the casual episode I hope you guys were that might've been boring could have skipped ahead but anyway what's happening here I actually learned something new I did not realize this before that you can't put these together what we need to do is we need to allow it to create the this column for our post ID and then after it creates the column then we can set up the foreign key relationship I didn't realize that they had to be done in two steps but they do the other thing is you don't have to do this but this is a good idea you just do unsigned since you'll never store a negative ID number you don't need to have it you can have it unsigned just allows minimizes memory use okay so let's go ahead and add unsigned to our integer here hopefully that made sense though guys okay so what I'll show you here what it means so what we need to do is we need to set up this first option here to create a to create all these fields with the post ID okay so we need to do that and then let's go ahead let's just save this real quick let's roll back our migration that we just did in fact actually real quick before we roll it back let's make sure that it's even if we go to our migrations here it actually never registered as complete so we're in this awkward middle ground here because the comment it actually did create the comments table and then it failed at the very end and so it thinks it failed at the migration but it didn't so we need to delete this row manually this table I mean all right and then the migrations you can see this stores all the migrations it doesn't think it completed the the create comments table so that's why we had to needed to do that so we're actually not going to rollback we just manually dealt with it but what we can do here is we need to create now a second function and it's going to be called we're accessing the comments table function table and then down here is where we're actually going to do what we just put so we'll do table now we're going to assign the foreign we're actually going to set up the foreign key constraint which means I my bet is that down here you actually have to kill the foreign key constraint so you do drop foreign and we'll just drop foreign of post ID okay so it's going to get rid of the Commons table get rid of the foreign key will be set and yeah that's basically it actually let's go ahead and just move this to the top put this back down to the bottom we want to in reverse order so we want to solve this first and then reverse that okay so we should be good there now let's go ahead and run the migration so PHP artisan migrate now if I graded we should be good to go so let's check it out real quick in our database we come over to comments you can see here that we've got our post ID it's an integer and you can see that we also now have our foreign key constraint right here okay so we're set let's go ahead and close this and now let's we got the migration let's do the model so the model is under at the app folder and then under here to comment and this is where we would actually set up our relationship so remember that comments belong to one post and posts belong to many comments or have many comments let's so let's start action on the post side the relationship and let's set it up here or we're going to say that posts have many comments so we'll do public function post or comments I mean and we're going to say that return this has many okay because they have many app slash comment okay so that one's set up we've updated the post now let's update under comments here we can do the opposite of that which saying it belongs to public function post and we're going to say that it belongs to a post like that okay so now we got the relationships everything else is done with the model now we need to do is we actually need to create our controller so let's go through and do that we can go back over our terminal PHP artisan make controller and we're going to call it the comments controller getting fancy with names here just kidding these boring names are actually good you just want to keep it consistent and then I'm going to do - - resource which creates a resource controller so it's got the create update all the crud stuff in it you don't need that but it just makes it a little easier so we're going to go and click enter controller created successfully if we head on over to HTTP controllers now we should have a comments controller sweet and we can go ahead we'll start filling this in in a second now be the first thing we need to do to actually create comments is we actually need to create a form over in on our blog so let's take a look at the blog real quick and you'll all show you what I mean real fast part PHP artisan serve and let's head on over to localhost 3000 so let's head on over to our blog we can just read this first post here the marketing post and it says okay so we're down here under marketing post which is great and now what we need to do is need to add a form for our comments that's kind of down underneath here so underneath here but before the footer down here so we need to create a form in here because this is where you're going to type the actual comment click enter and then it's going to associate that comment with this blog post all right so let's come back down over here and we're going to let's set up our routes first so let's come out of it our routes and we're going to create a route resource and we're going to call it comments like that and we can set up this accept as well if you wanted because we don't need a create because the create is being added on the well yeah so they create you know what actually is I think we might want to manually do comments so let's actually get rid of this and let's create a manual comments and I'll explain why I here to second okay so comments and let's now do a route we're going to manually set up a comments so we're going to do route we're going to do our store first because that's the first thing we need so we'll do route post it's a post request to do a store and we're going to do comments slash and then the ID number for the post is what I think we'll do yeah so let's do ID Purdue yeah okay so let's just do ID this is actually the ID though let's call it post ID so this is the ID for the post okay and then we're going to say that this links to our comments controller in fact what we can do here is we'll actually do the longhand so we'll do uses oops uses and then we'll do the name of the controller so comments controller and we'll do an at store and then we'll say as to set up a named route and we'll say we're going to call this comments dot store ok so that's our first one so let's go ahead and we save that now let's go ahead and store a blog store comment so the first thing we need to do is actually create the form so let's go to resources views and comments I wouldn't have a comment so we go into blog we're going to be storing on this page here so this is our blog single so let's come back over here to blog and then single double a PHP and then we're going to store it here underneath all of this so actually it reminds me real quick what to take a little side note because this actually has been showing up on github this showed up on github under an issue request and this is actually a perfect time to address the issue real quick let me just open it github and show you guys so for all these that don't know I actually post every single not fight every single but most of the parts that have applicable code I'll actually post it on github where you can actually go to that part and get the code for that part if you go to releases actually you can see all the parts and you can download the code directly okay so all the codes available on github here links in the description of every video that has it and it'll be in this video as well you can go down there and check out the this the release for the video and download the source code or you can just go look at the code obviously for that for that part you would just come over to tags and then click that part and then it will show that show that the stuff of that okay so anyway under here though someone had created an issue we've got a cross-site scripting error basically up here I was confused at first when he first started talking about it so I was really confused but I figured it out eventually I was looking down here at this post title they I was like well that's safe I don't understand the problem but then I realized up here we actually access post title without escaping it like we do here when we do these curly braces we escape it and here we didn't escape it so we're going to quickly escape it up here and I'll show you guys how to fix that so we can fix this bug now also I've been creating in the readme here all the known bugs I've been adding those so if you have any bugs that you want to get fixed go ahead and create an issue on github and I'm going to add it to the known bugs and at the end of the series we're gonna go through and fix all the bugs I don't want to fix it usually immediately because it can cause confusion for people because the they want the if I just randomly add it in here then our code gets off sync because we're following a you know video to video so I don't want to do anything that is not being filmed so I only want to add to the code if it's filmed so I haven't gone through and added the bug fixes but at the end I think we'll do a video with all the bug fixes so you guys can see all the bug fixes but I'm adding in the readme right now all the known bugs that I'm aware of that you guys basically submit usually okay so we're going to go down here and are okay so let's go over to our project here let's fix this and then we'll move on and make the form so to fix this what we need to do is we can't unfortunately add HTML special cars like you normally would in here because it has to be a perfect string that's just the way it is we can't do blade none of this seems to work and maybe it does if you guys have a better solution than the one I'm going to provide go over to github under that comment the XSS comment and let me know if there's a better solution for it however I'm I don't know if what the better solution is so this is what I'm going to do PHP we're an open up PHP tag and we're going to create a new tag called title tag we're going to set that equal to HTML special cars and we're going to put post title into it so we're going to get out the escaped version of post title we're going to save it as we're going to save it as title tag and then now I'm going to just input title tag in here like that okay that's the way that I'm going to do it if you guys have a better solution I would love to see it because this doesn't feel right I'm gonna be honest with ya it doesn't feel right something's not right with that but it will I'm pretty sure it'll work let's try it real quick yep still seems to work and now it's now it is safe okay so because we we escaped to the characters alright so that'll now be fixed I'm going to go ahead and submit that on the github and now let's go ahead and add our comment form so we're going to go here let's add another row and inside of this row we're going to create our form so let's create another FIB we're gonna call it comment form and ideally actually this would be an ID so let's just do that and then the inside of here we're going to create our form so let's do that we're going to form open and instead of here we're going to set by the way you need to have an array okay I always do arrays with brackets so make sure you get those so you need to have an array and inside the array we can set the route that it's going to go to in this case it's going to go to comment dot store real quick did I do comments tossed or did I do I think comments plural does store okay that's good that's actually the convention that we normally do so that's a good idea comments tour and then we actually make this an array as well because we need to pass in a second value okay so the second parameter we want to pass in is this ID number oops I keep going over here it's this ID number here we need to pass in and the reason I want to do this is because we need to associate it with a post so we're going to submit the comment but then we're going to attach the the post that the post ID for the comment where the comet needs to link to okay so that's why I went outside of this route resource and did it this way so let's okay I get over here so let's do comments store and then we're going to do the post ID like that alright and then now what we'll do is the second parameter will be our method and it's going to be a post method like that okay so that's our form we opened it up let's go ahead and close it and then in the middle here what we're going to do is we're going to set up the actual stuff so we'll do form in fact actually real quick we're going to create some structure in here so let's do a row and then inside of that row we're going to create column MD 6 so half wrote half the width and this is where we're going to create a label and of our name field so label we're going to call it name set the value equal to name alright and then down here we're going to do form text name the second parameter is the default value so that's null and then any classes we want to pass in or anything else we'd pass in as an array and we're going to call it form control control and then we're good okay so now the next one we're going to make another column MD six and that will put so these will go side by side let's do it again a label we're going to call this email we're going to set email to email and then text again no default value and then we're going to set the class equal to form control okay perfect alright so next let's go ahead and let's create a column MD 12 which will be full width and this will actually be the body of our comments okay so label comment and then down here will actually create a text area so it's a little bit different it's a text area and but it's otherwise the same so we're going to call it comment have no default value and then and then we'll set the class shoe I keep doing that class equal to form control like that okay perfect let's go and save that we need a button to submit so underneath here let's do a button form submit and we're going to call this add comment and then let's just add a class to it as well and the class will be from BTN BTN success and then BTN block and that'll be good so we're good there next let's go ahead and add we're good let's just try this so let's come over here refresh we get our post sweet we actually have it off so let's some offset this row it's offset right here but we didn't offset it down here we also forgot to put in any type of column system so column md 8 column md offset to so it's offset by two columns eight columns wide flat should be it should be good save that refresh much better much better let's add some spacing up above here we're going to inline styling for that since we wouldn't do this for production but i'm going to just do it for the sake of the video margin top fifty pixels refresh there we go let's add some spacing on this real quick the button so style margin-top let's do 15 pixels save comb here refresh okay I think we're good let's just shorten up this comment real quick let's just add another item down here we'll call it rose and we'll set rose to five five rows I think the default is 10 nothing's happening do we save this class make sure I've got anything correct rose 5 that would be right wouldn't it or is it row I think it's rose oh I'm adding rows to the wrong thing we need to add it over here so let's add rows two rows to five okay perfect save that there we go much better so now we got our you name email comment good to go so now if we submit this comment it'll be submitted to our store function I don't think we need anything else for this right here we just need to go over and set up the store function so let's come back over to our controller let's head back up here comments controller we've got a store function right here let's go ahead and do that and the other thing we're going to need to do is because we're passing in that post ID we're going to save it here post ID like that okay so let's come over and let's set it up so first thing we need to do is validate so let's come over here to validate and we're going to validate the request all right and then we're gonna set up all the parameters for the validation so let's go ahead and set that are the rules okay so we're going to set name and we're going to set that equal to a minimum or required that's basically it well we need to do a max of 255 just so that they don't accidentally fit I don't think they ever will but we're just going to put the max there because that's the all the column can handle okay next we have the email and we're going to set that equal to required email and then also max 255 once again I don't think it's a problem but we'll just we need to put it in there and then the last one here is comment and comment will be equal to required and we're going to set a minimum on this one because just have that needs something valuable to say we'll do a minimum of 5 characters and then a maximum of linking even more talk we'll give them 2,000 characters to talk okay so there we go we got the validation all set up now we need to actually create the comments so let's go comment equals new comment like that and we need to make sure we actually have namespace comment in so let's come back up here we're going to use app back slash comment like that we're good to go let's come back down here and now we can set up our comments so let's do comment name equals request name okay I did get one thing someone was confused about earlier in a previous video I had done input name and these do the exact same thing so whichever you prefer you can do input name or you can just do the shorthand which is name it looks old cleaner comment email equals request email comment comment equals request comment okay now we could we do have our approved so let's go ahead and setup the approved for now is going to auto approve everything approved equals true and then the last thing we have is our we've got the post ID so what we can do here is we can do comment associate and we're going to associate this comment to our post id which we have up here and actually before we do that we're going to pass we need to pass in the object for the post ID so it will do before we get there is wearing to create post equals post find and we're going to find it by the post ID all right so this grabs the post object and then we're going to pass in the post object to make sure they get associated and then now it will associate that with it which will link the ID number and then the last thing we do is comment save and and then we can add other things like we normally do we usually add a flash flash message just to give them so they know what's going on so success comment was it was added and then we usually also do a redirect so we return read redirect and so we're currently let's see what's this this Rako routes are quick PHP artisan rake routes oh wait wait wait wait we don't need a rake routes PHP artisan route rake routes is how you do that's how you do it in Ruby on Rails okay how you confused sometimes okay so PHP route list and if we go to our blog blog slug here you can see that we have blog dot single okay so we can go to blog dot single if you wanted let's go ahead and do that let's go route blog dot single and then we also need to pass in so I think we need an array for this and we're gonna pass in the slug so let's pass in post slug like that okay let's go and give this a try um let's create new comment and we're going to call it Alex Curtis hello at dev market turd IO this is the first comments sweet add comment oh we got an error because we forgot to namespace post I was so close to being done forgot to namespace again use app slash post also we need to while I'm thinking about it let's not forget our session either okay so real quick for those that didn't catch that I forgot to namespace post in and I forgot to namespace session in so let's go ahead and try it again let's come back here and we're going to submit it wait why is it not didn't I didn't save it forgot to save let's save that try it again okay so we forgot to associate called undefined method illuminate database query build associate okay so I think I might have I think I might have messed up here we actually need to do right here we actually need to tell it what to associate so we're saying comment post associate like that okay now the reason for that is if we go back to our comments model comment model we were ewing doing this okay so that's where that comes from so we're saying associate the post okay and I didn't reference that so let's save that and then let's come back and try once more let's save this again illegal offset that's such a yeah double-check and see this is the problem so let's go real quick - I'm going to comment this out we're gonna try to submit one again and see faves so the noise coming out things that you think might be the problem and then figure out when it starts working and then you know that the last thing you commented is the problem so I'm added it again so here I didn't get the error which means that that's probably why I that's exactly why I didn't I had the error so this is the error right here was this so if I undoubtedly might be solving another bug which is okay that actually might be okay because now if I do this is the third comment yeah now we get the same arrogance so oh wait how do we get same arrogant here let's double check our route see if am I crazy on the route let's still check it real quick um here we just should work profile route profile oh that's why I did the the array is not wrapping the whole thing it's only wrapping the parameters that explains it I don't even know why I did that I've done this a lot and I don't know why I did that okay so let's try this so we wrap this in an array and see how it works okay so we come back over here let's come back to our projects and let's try also instead the ID let's try the slug again okay so this is now our fourth comment and add and now it was successfully added perfect so it's actually coming back to the same post this what we wanted it's we solved the problem and that's basically that so we're good now the only thing we haven't done yet is we would like to kind of show the comments here and then that'll finish up this video so let's just go ahead and want to actually display the comments so we need to do that in our view so let's come over to our single blade and then we have the question of do we want to put comments before the forum or after I'm going to put it before so let's come up to the top or the comment form up here it's from here to here so like right below this let's do our in fact let's just create a new row for it so we're going to create a row and then we're going to do a column MD eight column MD offset to same thing and then we're going to do this is what we're actually going to put the comments okay so we got to loop through the comments now real quick let's just see if we need yeah let's just loop through the comments actually so let's do it so for each post comments as comment but I think you don't need this let's try it I think you do that's the object okay post comments as comment and then inside of here's do an end for each I try make sure this works real quick let's just try this real fast okay it doesn't work I think you need that's what I was getting I'm second-guessing myself because I'm like live on TV here live on YouTube ok so what's that it's just this without the parentheses that's kind of what I thought at first and like I said I started second-guessing myself so okay now we've got all the comments for this post now let's format them so let's um inner loop here we're going to create a new div every single time we're going to call it comment and then we're going to let's see we got display the name we're not going to display the email so just the name and the actual comments so let's go ahead and do this here so paragraph name equals comment name and then we're going to do we're going to break it and then we're going to do do a line break and then we're going to actually display the comment okay just like that and now let's go ahead and make these bold okay these won't be the sexiest comments but I just want to get show you guys kind of demonstrate it so let's go back over here and we're going to refresh okay now you can see we've got all of our comments so we've got Alex this is the first comment whatever okay so we've made all of our comments and let's just add a little bit of spacing here we would normally go through and style these but we're not going to style them just for the sake of time alright so there we go so we've got all of our comments you can still go through and read all of our comments it's probably one too many line breaks there we go that's not bad alright so next things first next thing is that's up is going to be well let's just try real fast so now we're going to say we're Joe Schmo and it's Joe Schmo at gmail.com this is my comment as Joe Schmo okay then we had a comment and then we've got Joe Schmoe down here okay so everything's been added we're good to go video got a little bit longer than I wanted but I think hopefully you guys found some value in it now the next video I'm going to talk about we're going to create something where we can log in and we can actually see all the videos or see all the comments and then see you know see them listed on the blog page in the back on the back end of this and finish up some of the edits and stuff like that as well so that's what I do in the next video I'm actually just gonna continue straight on it'll be available you guys

Channel: DevMarketer

Views: 43,564

Keywords: Laravel, Blog, code, developer, development, tutorial, how to, php, mac, windows, linux

Id: z-KyDpG8j34

Length: 45min 18sec (2718 seconds)

Published: Fri Jul 22 2016