Part 17 - Model-Form Binding [How to Build a Blog with Laravel 5 Series]

welcome back to how to build a blog with level this is the series where we take absolutely absolute beginners from knowing nothing about label to building up this really cool advanced blogging application we're going in super deep detail and in this video series we're actually going to be finishing up the crud of our posts model or a post controller so crud stands for create read update and delete we've already finished the create we've finished the read in the last video and now it's time to move on to update the update is going to going to consist of two parts first of all we need to display a form and pull data from the database into that form so that we can see what's currently there and the second part will actually be updating the database after we submit the form okay so there's two different parts here we're going to work on the first one in this video it shouldn't take too long because it's pretty simple and there's some cool tricks we're going to learn along the way and then in the next video we'll finish it off by saving it in to the database which again you guys are already getting the hang up and we'll probably move pretty quickly let's go ahead and get started I'll see you guys in a second ah all right so I'm J a Curtis you can call me Alex and again like I mentioned this video we're going to be starting on updating our post model with as part of our crud that we've been working on so we've already finished the first to create and read and now it's time to work on update let's go ahead and just open our project and get started on this so for those of you guys that are following along you should already have the project available if you don't you can go ahead to the previous video download the resources in the description that will go to github but you can download the files I've got all these files saved in a folder called sites so oh actually I'm already in the folder it's right here so blog but if you go if I'm on the root and I went to my sites folder inside my site folder I have a another project folder called blog and that's where all of my level stuff is being saved and you can see that right here so let's go ahead and open this up in a text editor I'm going to be using sublime today but you can use whatever you want okay and let's head on over to our apps we're going to our controller here so apps HTTP controllers and post controller and you can see kind of what we've already done again in the last video we worked on the index so we could see all of our videos now if I pull over our previous we've been working on up to this point I just want to get you guys up to date you can see the server is not running so I'm going to go ahead and open a new tab in my terminal and we're going to make sure we're in the blog project and then run PHP artisan serve to launch our local server all this should be a refresh to you guys we already know how to do all of this so that's why I'm going pretty fast if you're lost go ahead and you'll probably want to watch the previous videos okay so we got this running let's go and refresh this page sure enough we get exactly what we wanted we have a via table view of all of our page or all the posts that we have in our database okay so these are all the posts that we have and we have links to edit and view each of these pages so if we currently click view we get a little thing where we can kind of see what this is right here we have a button to edit or delete these we have a little bit of data on these as well as the post data okay now one of our goals here is to have an edit so we can click Edit we can then change the title change the body and stuff like that and then save that back into the database so that's currently what we're working on we already have the ability to see individual blog posts we just want to be able to take what we have right here and take and add the ability to edit them okay that's we're going to be doing now so let's get started okay so I'm going to head back over to our to sublime our text editor and just scroll on down you can see that we've already been working on index we've worked on create we've stored it we've showed one single page this is the view that we just looked at to show one individual post and now you can see that because we've are automatically generated a crud controller we also have edit update and destroy and these are the three final functions that we need to do to finish off our crud as part of the update of crud the you in crud that usually consists of will up edit and update and just think of these these are going to be very similar to create and store when we scroll back up and we are working on the c-4 crud the create it actually involved us first of all I'm having a forum available to the create function this is a get request that then generates a forum so that's kind of the first part of our create but then we had to be able to save that forum and then submit it and store it into the database and so the store was the second half of the of our create okay we couldn't really create without being able to store it in the database but store was a post request and it was a different it's a different function in our controller and we have the exact same thing going on down here if you scroll down here edit is basically going to be where we go when we have a get request to edit a post what we want to be able to do is show a form with the data filled in to the form so for example have a field for our title and a form field for our body of our of the post as well and we want the the actual data that's currently in the database automatically filled in to the form and then we could basically make changes if we need it and then re-save it back into the database and when we submit that save request it's going to come in through a post request okay so HTTP POST request and it'll submit to the update function okay so the update is going to be how we store it back into the database and the edit is going to be the function we use to basically display a form we're going to have to grab the current post from the database and then we'll use that to automatically fill the form okay so that's what we need to do here with the edit so let's go ahead and do that so I always like to comment kind of write comments of what we're going to be doing in this function so the first thing we need to do is we need to find the find the post in the database and save it as a variable right all right so we're going to save that as a variable then what do we need to do we basically just need to return the view and pass in that information so that then we can automatically fill it in into the appropriate places of the view okay so that's pretty much all we need to do previously created previously created that's basically it so it's kind of very similar to some of the other ones that we've been doing now we already know how to basically pull something from the database and we do know if we see up here that we have an idea vailable to us and that's going to be submitted as part of the URL if we come back over to our terminal you can see here that I've already got our routes listed and for those of you guys that need the don't have this up you can do PHP artisan route and then colon list click enter and you should get this exact same thing so you can see here that when we do edit that's this thing down here we're going to go to post slash and then the post ID number and then slash edit okay so this ID number gets pulled in right here and stored is ID so we can reference it with the single the ID variable so what we do just like we did with everything else we need to create a variable and we'll set that variable equal to our model and our model is called post and then just like we did when we want to find an individual post up here we can do the exact same thing we want to find a post by the ID number so find is perfect way to do that we'll pass in the ID number which is stored as the very we'll hear ID and then that will find that post by the ID number next thing we need to do is we need to pass it in to our we need to pass the view or return the view sorry and then pass in the post variable so return view and then we're going to go we need to do post edit that's going to be the name of our view and then we're also going to want to pass in we'll do with post because we want to pass in the post and set it equal to our post variable pretty simple that's all we need to do for the controller let's head on over to the view I'm going to go and save this file and just to kind of open up I'm going to open up our this right here is I'm actually going to set the kind of the user interface for our edit to be the exact same thing as the view okay we're basically just going to put right here where this title is instead of actually having a text form like you know this is like a paragraph tagger this is an h1 actually instead of having h1 tags we're just going to put like a text field here and then this area will be like a text area where that will automatically be filled so what we can do is just copy the user interface we've already created for view and then just will convert it a little bit for edit as needed so let's head back over to our project and obviously to do this we need to code to our resources views and then posts and we're going to create a new post or a new view inside this posts folder we're going to right click and click new file and we're going to save this as edit edit blade PHP and of course we're just keeping with the convention that we already did and remember that down here we said that there's a view called post edit and that means that there's a view in a folder called post named edit double a PHP so we're just following that convention alright back up here you guys should be get the hang of this we're using templates right so we have a main template file and we want to access that so we say extends main we also know that inside that template file we have a section called title right so we need to fill out our title and we're going to set title equal to the vertical bar and we'll say edit blog post and then we're gonna need one last section and that section is called content and this is the main content of our blog post we can go ahead and just click stop at the end or end section whichever you guys prefer okay so that's going to be and then inside of here is we're going to put our raw content now the first thing I want to do is because I said I wanted to mimic the user interface of the view um let's go ahead and open up that show the the original view so post-show let's open that up and we'll just copy it over and then kind of work around it so I'm going to go and just quickly save this file and then I'm gonna open up show I'm gonna do a quick tip for you guys if you're using sublime you come up here to view layouts and then do column two this will create another column over here and if you have this your cursor in this column over here on the side and you click show what you're going to get is you'll actually pull these side-by-side like this I'm going to go and just copy this entire section inside of content I'm going to copy it and paste it over here into into our content for edit alright I'm just going to go ahead and save it and then we're going to um close down the show and I'll just come back over to one one single thing just for clarity to make things easier for us as we're working in this tutorial I actually generally work with two columns though when I'm actually coding by myself all right so we've already got our row when we see here that we've got the title of the post is an h1 tag and we have the post body submitted over here and then we've got a second column right here which just displays some metadata like created app let's go ahead and just remit this is misspelled will do created at we actually output the date that that created out was submitted and then we have buttons for going to our edit and buttons for going to our delete okay now since these this is already the edit page we can actually go ahead and just get rid of these buttons because we don't need a button that goes back to edit and we don't need a button that goes to delete all right we're just already in the edit we want to stay here so we can get rid of these buttons and just to kind of visualize this when we're looking at this we've got our eight columns over here and that's what we're seeing here where the text is and then this is the sidebar so I'm just suggesting we remove these two buttons here and then we're going to we can put them under here or you know what we could actually just keep them right here let's um actually it's just keep them right well try think when we user experience if that would be better or worse yeah let's go ahead and just put it right here so let's go ahead and we're actually just going to change these buttons we'll have one say cancel meaning oh I didn't want to edit it go back to the view and then we'll have another one that clicks Save and that one's where it's actually going to submit the changed form to the database so let's just change these two buttons here what we're going to do is come back over to sublime you can see we have our HTML link route and we're linking to posts to edit we want this button on the left to be our cancel button so what we're going to do is we're gonna go to posts show okay by just linking to post show we're not that means we're not going to save and each sort of changes we're just going back to the previous view page is what we're doing and then we can change the content of this to go to say cancel all right and then let's see the last thing we'll do here is change the color from button primary to button danger so they know that that's cancel and then the second button the button on the right is we're going to be our Save button so we're going to change the route from post destroy to post dot update and then the content of the button to be Save Changes will do Save Changes let's see yep all this can stay the same we still need to pass an IDs for both of these so that stays the same and then the only difference in class is we want to change the color from red on this button to the right this is the Save button so it's good to do something like green to show what's going to happen so we can do buttons success and that'll make it a green button okay so now if I save that and come over here and refresh you can see refresh what's going on here oh I'm in the view that's why let's go to edit there we go now when we click Edit you can see that we've got cancel and save changes so that's exactly what wanted to do and it looks good now we just need to make this editable so we can change this and we need to make this editable and then we're done so we're actually moving right along now in order to do that we actually are going to want to open up a form and we're going to be learning about something new called model form binding and what this does is that we can pass in a model object which is what we did in our controller so when we went to our controller down here we actually have we create a model object called post and it just finds a model from the database stores it in this variable and then we pass it into the view so back over here into our edit page in the view we already have a model object and it's saved under the variable post and so what we can do is we can bind the model object onto the form and Larry will be smart enough to know that if there's already a value for say the title to automatically fill it into the form and if there's not it'll just leave it empty it also knows to set them off the form up so that it knows that say the title the the field to make the title belongs to the title column in the database and that way when we save it everything will be really really easy to save because everything's going to match the database if that makes sense I'll show you how easy this is it works really really good now in order to actually make this work you do need to have the label collective form binders I'm set up you should if you've been following this series from the beginning you already have that however I believe it's part okay so I just looked on YouTube real quick just to see you exactly which video was it's part number 11 where we actually install something called label collective which takes some features that were previously in layer before but then we removed when we switch to level 5 and put them back into level 5 you're going to need those form helpers in order to do this next part so if you haven't done it you're going to want to go back to part 11 of this series watch that first and then come back to this video so that you can pick up right here at this spot okay now I'm going to go and assume you already have them because if you've been following along you should and we're going to use the form helpers that we've used in the past this is how we made forms in the past with one minor difference let's see what I'm going to do here is we're actually going to open up the form in uh right underneath this row right here okay and then that means we'll close it down here because this is the end of the form like that so then we can close the model right here call you close the form now in the past when we made it forms what we did is we did something called form open if you remember this and this allowed us to open up a form and there were some extra cool stuff we inherited by opening a form this way and so that's what we've done in the past we're going to make one minor change to this instead of doing form open we're going to do form model and this tells label that we're opening a form but we need to connect it to a model that we're passing in all right that's the only difference really but it you're still going to have access to all the form helpers you had when we created it used form open when you want to automatically generate input fields and stuff like that you'll have access to all of those exactly the way you did before this just tells label to automatically try to connect them to the model so if we're going to do form model and then down here at the bottom we can go ahead and do the same thing we'll do form close make sure also that when you're doing these forms that you're using the bang bang so it's curly brace bang bang instead of the double curly brace right here because we're not echoing these out we're just telling it to execute some code all right now we do need to pass in some information into the model we can't just do it with empty braces like this first thing we need to do is we need to tell it what model that it needs to bind to the form so we need to pass in the object that we have in the form here that contains the model data and that's post okay we use that post variable to go out to the database find a row of information that you know for the post and that's going to come back in as an object okay and that's a model object and so we're telling that this post is a model object we're telling it to bind to the form so the first variable we need is or the first parameter we need is the model object and then the at one is all is an array of all of the other options that you want okay and this is the same type of options we had in other forms so you could select a method you could select a route to go to and different things like that you can add classes and things like that and so this is an array of all the other options I'm in instead of doing an array like this like some people like - I'm going to keep it clean and we're just going to do square brackets which rep in PHP represents an array so we'll do a square brackets and we're going to say route and that tells it to link to this route so when someone submits a form the action that that form submits is to this route that we're setting up right now so we're going to do route and then we in order to do route because we've got a special type of route we're going to be submitting them to the update route okay if I come back over to terminal here we've got posts to update and that's where we need to go because this is the form that where they're going to make changes and when they click Save we want to go back and update an existing row in the database instead of creating a new row which is what our post doc posts store creates a new row post I'll update tates an existing row and makes changes to as it and saves over the top of it so we're going to save to post I'll update but we do need to also pass in the ID number for the post that we want to update and so that means when we do this route we need to pass in two forms information the name of the route and the ID number that we want to to be passed into the route so we need to do another array within within another array so we've got route like this set it equal to an array the first item in the array will be the name of the route post edit not post I edit sorry post I'll update and then the second item in the array will be the variable that we want to attach to that in this case it's going to be post ID okay and that's going to pull the ID number from the post right here and it's going to use that to go to the right page on post update and then that should be everything that we need just make sure your brackets are correct you should have brackets around this because this is one array and then you should have brackets here and here which it surrounds all the other options that we have which is only one option okay that opens the forum we just use forum clothes to close it and then in between we can just set up whatever forum helpers we need in the middle so in this case right here this is our forum title what we can do here is we can actually just do a forum text field so this time we'll use double curly braces because we're echoing out the forum we actually want to display the forum here so we'll just do forum text and this creates a text field and then our parameters are going to be the name of the text field that we wanted to be and we want to make sure that this name corresponds with the column name in the database and that's how level knows that you know how to match up the items so you got to make sure that the title this matches a column in the database called this exact same thing in other words title and then it's going to match whatever's in that column into this form field so we're going to do title and then if you want to pass in other options you can do that as well okay so now in this case we want the second parameter in a text field is the default value we're gonna let layer will handle that for us so we're just going to set it equal to no because no because we don't want to override what level wants to do and level should be setting the default value to the current thing in the database and then the last parameter is an another array and this is all of our other options one of those options we want to take advantage of is called class and we'll set class equal to whatever class we want to have in this case we want to be form control and then that should create a boot strap styled form element all right this last item here is our body let's go ahead just delete this we're going to do form and then text area because we've got a large text area for them to put text into and we're going to call this body because that's the name of the column that we have and then the second item will be an array with our class set the class equal like once again to form control and we should be set let's go ahead and save that and then up take a look at it in the web browser so if we come back over here we click refresh it does look like we get an error and it says route post update is not defined so what it's saying is there's no route called post update and the error we made here is actually that we don't have a post called post update it's called posts plural updates so if you look over here it needs to be posts with an S at the end update so that's my bad let's go ahead and add an S there and save it and try it once more let's refresh we've got another errors so this array two string conversion in our forum builder so we know it's happening in our forum builder let's head back over and look at where we might be doing the wrong thing we might this might not be the second let's see real quick I think text area maybe text area has another type of it might actually be set the expecting a different type of parameter so let's take a look here it does so let's see we're supposed to pass in the array of other options needs to be the third parameter and not the second parameter it's not the error here the second parameter is supposed to be the size of the form we're going to go and just put null here so that it's just whatever bootstrap decides it to do let's go and just save it and try it again refresh and finally it's working so we got the right thing there's a little bit of styling issues as far as there's not enough spacing here but at least it's working we do show that it is pulling in the name of the blog post into the text field and it pulls our body into the text area as well we've got our cancel and our Save Changes so we're almost done here we just want to make a few tweaks to some styling give these forms a little more space to breathe and then we'll be done but you can see that it's pulling it from the database number one here and automatically putting it into our form and if we change this and let's make it like post number three up here in the URL you can see that now it has the other data from here and we can obviously edit these and change them as needed our cancel button should take us back to that post 3 so it takes us back to the view version of the same post we were on so everything seems to be working really really good other than a few styling changes let's come walk over if we click our edit button it brings us back here we're staying in the same post so it's working really really good the one thing I want to do here is I'm actually going to make this headline a little bit bigger we're going to take advantage of a bootstrap of thing called input large it just makes a larger input thing and that'll just make it stand out as a headline and then we also are going to just add a little space here in between both of these we could add titles we could add labels here maybe that's the best idea actually let's go ahead and just add labels here and that should space everything out automatically so we'll make this input large and then we'll add a label here for title and a label for body so let's go and do it come back over here and first things first we need to add a label up on top so let's do form label okay and then the label just needs to be it needs to match the column so in this case title and then we just need to give it the value that we want to be so we'll say um we'll just call it title with a colon at the end and then down here we'll just do the same thing we'll do form label and we'll do body and then we'll just put body with a colon at the end like that okay so that's basically all we need it should style it already the last thing we want to do here is under this class let's just put input large in here I believe it's input LG and if it doesn't if it doesn't work we'll come back and take a look at the bootstrap website I think input LG will make it a large form field okay I've gone ahead and saved that let's come back over here and refresh Oh sure enough it works so this is a little bit bigger and then this is a little smaller and this is our form area we still need spacing here let's go ahead just add some spacing and call it good so let's just write here we'll add another class called well we actually had a class right here we'll just say all right let's call it form spacing top this will just give it a little more spacing between the forms on the up above us so let's save that actually that's not going to work we need to do it it needs to be an array and we need to have it equal to we need to have class and then set class equal like that save that last thing we need to do is we actually need to add that to our CSS so we need to come over to public public CSS styles and then we need to have form spacing top and we'll just do margin table and we'll set it equal to let's try 30 pixels save that come back refresh sure enough we got a little bit spacing there it works perfectly and now we can cancel or update so that's basically all we have for this video guys we've done model form binding which is a really really handy thing to learn in the next video we're going to look up dating which means that when we submit this form it's going to our update action and we need to then take work on the update action which will be mostly controller based and save it into the database and then send appropriate messages as well back to the user so that they know then everything worked the way they expected it to all right so stay tuned guys I'll see you guys in the next video

Channel: DevMarketer

Views: 35,291

Keywords: laravel, php, code, tutorial, model, form, CRUD, how to, mysql, framework

Id: 6TcnKqr7chU

Length: 29min 37sec (1777 seconds)

Published: Thu Mar 10 2016