Now, at this point, you've actually learned quite a bit, but well, what about this? So we know how to display all cards. We know how to link to a specific card and display any notes through a relationship that are associated with that card. But what if we want to maybe add a form down here to insert a new note? What shape would that take? All right, let me show you. We're going to go to our routes file. And for a quick refresher, when we visit this URI, we load cards controller and then a show method. Styling With Bootstrap 0:25And for a quick refresher, when we visit this URI, we load cards controller and then a show method. And if we visit that method, that loads a view called cards.show. And if we then visit the view, sure enough, we display the card, and then we say, for each note associated with that card, display the body of the note. Now, real quick, before we move ahead, why don't we take literally 60 seconds and just make this look a bit nicer, like this. I'm going to go to my layout file, and I'm going to pull in Twitter Bootstrap. Now instantly, if I give this a refresh, we get a little bit different styling. Next, I'm going to return to our app.scss file, and certainly we don't need any of thisNow instantly, if I give this a refresh, we get a little bit different styling. Next, I'm going to return to our app.scss file, and certainly we don't need any of this really. That was just an example. So, in fact, if we have no CSS just yet, I can remove that entirely. All right, come back, give that a refresh. Next, why don't we come back here and surround this within a div with a class of container. That's a Bootstrap-specific class that will center it, set the margins to auto, stuff like that. Next, why don't we do this?like that. Next, why don't we do this? Let's go back to our main view here, hide the sidebar, and let's add a class here of list group. This is just going to give us some better visuals here, list group item. Okay, back to Chrome, give it a refresh. There we go. Next, why don't we create a grid here? So we'll say row, center that, and now within here, let's do maybe call md6, and then call mdoffset3, and this will basically shorten the width and center it on the page like that. Building Note Form 1:53So we'll say row, center that, and now within here, let's do maybe call md6, and then call mdoffset3, and this will basically shorten the width and center it on the page like that. Okay, good enough. Let's continue on. So we want to add a little form here to create a new note specifically for this card. Okay, maybe something like this. Add a new note, and of course, we need a form, right? And let's center this on the page. So let's open up a form here, and well, immediately we need a text area, right? So let's build that up, and we'll give it a name of, and usually this will correspondSo let's open up a form here, and well, immediately we need a text area, right? So let's build that up, and we'll give it a name of, and usually this will correspond to however you named the column in your database. So for example, if we go to our migration here, we named the column body, so that's what we will do here. So let's check out Chrome, give that a refresh, yeah, doesn't look great, but it's fine for now. Because we're pulling in Bootstrap, what we could do is this, wrap it within a div with an id of form group, and then also apply a class of form control here. All right, that'll take up the full area now.an id of form group, and then also apply a class of form control here. All right, that'll take up the full area now. Next, maybe we could do some fake formatting here with a, not a header, but a horizontal rule. Okay, good enough, you get the idea. So finally, we just need some button to submit the form, and we'll be all set to go. Let's duplicate that, and swap this out with a button, with a type of submit, with a type of submit, and the value will be add note. All right, so if we come back and give that a refresh, that's fine, but if you want some Twitter Bootstrap styling, once again, you can give it a class of BTN, and then maybeAll right, so if we come back and give that a refresh, that's fine, but if you want some Twitter Bootstrap styling, once again, you can give it a class of BTN, and then maybe also something like button primary, like so. Good enough. So what's going to happen when we fill this out and we hit add note, well, we haven't specified where we are posting to, we haven't even specified the request type. So yeah, it's just going to do a get request to the current URL, and that's not what we want. So let's do this. If we come back, we'll set the request type to post, and this is pretty standard. Choosing POST Endpoint 3:58So let's do this. If we come back, we'll set the request type to post, and this is pretty standard. When you are creating something new, you will typically post to the collection. So for example, if I were creating a new card, I would post to slash cards. Now if I'm adding a new note, well, I'm still creating a new note, so I would generally post to, and this is where you have a couple choices. You could post to slash notes, or some people like to nest it. So you would say cards slash the ID of the card slash notes, and then you would send a post request to that URI. There's really no wrong or right.a post request to that URI. There's really no wrong or right. As a general rule of thumb, I would say, be careful about nesting too much. So like beyond this, I wouldn't do something else as well, like comments on the notes. Yeah, at that point, your URL structures become kind of complicated, and especially building up your forms and using the wildcards, it gets kind of frustrating. So some people, they don't even go one level deep. They would immediately post to slash notes, and then pass in maybe the card ID as a hidden input type. In this case, let's do one level.input type. In this case, let's do one level. I think that's okay. All right. So our action will be slash cards slash the ID of the card slash notes. Okay. So if we run that right now, my new note, we know this is going to fail, right? Because we don't have an endpoint set up for that yet. Okay. So let's go back to our routes file, and we'll say route.Okay. So let's go back to our routes file, and we'll say route. I'm not listening for a get request anymore. I'm listening for a post request to cards, then the wildcard slash notes. Next, we have the exact same thing where you have two choices. You could, well, of course, you actually have any number of choices. But most frequently, people will either do a cards controller, and then something like store note or add note, anything you want there. Or they will, at this point, delegate to a notes controller, and then call a store method on that. Creating Notes Controller 5:58Or they will, at this point, delegate to a notes controller, and then call a store method on that. Or some people even take it a step further, where if your cards controller and your notes controller are mutually exclusive, so to speak, you might have something like a card notes controller to handle this sort of thing. It all just kind of depends upon how you're structuring things. Why don't we go with this approach for now? So I'm going to create this, make controller, notes controller. And now if we visit that, we'll have a store method here. And now do you see right up here where when we generate a controller, it automaticallyAnd now if we visit that, we'll have a store method here. And now do you see right up here where when we generate a controller, it automatically imports this class? Well, if we type hint it right here, Laravel will automatically pass that through for us. So for example, let's just immediately return the request parameters like so. Okay, let's try it out. Back to Chrome. We will submit the form again. And there you go. So we are passing that through.And there you go. So we are passing that through. Now it's true, you could inject this right here. Another option is to use what we call one of Laravel's facades, where you could say request all, come back, refresh, and we're going to get the exact same thing. Laravel also even offers a helper function called request. And that'll basically do the exact same thing. One benefit to this, at least for some people, is that you wouldn't even have to inject anything. So you wouldn't have to remember, oh, I need to import this at the top and then type hinted in the argument list and then reference it.So you wouldn't have to remember, oh, I need to import this at the top and then type hinted in the argument list and then reference it. Just call the function and Laravel will return the proper instance to you. So if I give that one more refresh, you get the same thing. This is entirely up to you. There's really no wrong or right despite what people will tell you. It all just kind of depends upon how you've decided to structure things. Now I frequently do this approach, but honestly, I have no problem with this at all in your controllers. Anyways, at this point, we have our request data. We want to now create a new note. Saving Notes via Relationships 7:57Anyways, at this point, we have our request data. We want to now create a new note. Okay, so let's do this, at least the long form way to start. I'm going to build up a new note. And now up here, let's get rid of these two, by the way, I'm going to use app note. That way I can just reference it here. Next, we need to set the body of the notes. And as we saw in Chrome, we just reference it in the usual way by referring to the body property, request body. Next, well, we could manually set the ID of the card, but we've begun learning about relationships, right? So maybe we can use Eloquent for this instead.Next, well, we could manually set the ID of the card, but we've begun learning about relationships, right? So maybe we can use Eloquent for this instead. Now, do you remember when we added our form? Well, we're passing through the ID of the card. And now in our routes file, we catch it here. And because Clarifil offers what we call implicit model binding or route binding, well, that means we can just pass the card through directly to the controller. And we could do that right here. Okay, so let's import that. And let's just return the card for your review. Okay, so give it a refresh.And let's just return the card for your review. Okay, so give it a refresh. And there you go. We're fetching that exact card. You just instantly get the instance. You don't have to do a query to track it down. You don't have to pass in the ID. It just works. It's easily one of my favorite features of Clarifil. So that means we have our notes.It's easily one of my favorite features of Clarifil. So that means we have our notes. I should be able to say card notes, save the note. Does that make sense? Just as a refresher, we have a method called notes on the card that references our relationship to the notes. And in this case, it has many notes. So that means we can say card, call that notes method, and we're going to save a new one. And that way, behind the scenes, the card ID for this note row will automatically be applied by Eloquent. Okay, so we're done. So why don't we just redirect back?Okay, so we're done. So why don't we just redirect back? Now, again, with Clarifil, you can use a redirect facade. So you could do something like redirect to some new URI. That would work. Another option is a redirect function, very similar to the request function that we just toyed around with. So I could say redirect to somewhere, or I could even pass it in right here. Or in our case, I just sort of want to redirect to where we were just before. So in that case, I can say redirect back. Nice and simple.So in that case, I can say redirect back. Nice and simple. Okay, let's try this out again. I'm going to go back so we can start from scratch. And I'll say, here, I have a new note. We'll click it. And it seems like nothing happened, but sure enough, we can see it here. All right, so what happened was we clicked the submit button. This route matched up. So we called a store method on notes controller.This route matched up. So we called a store method on notes controller. This method created a new note. It set the body equal to what the user passed in. And then it saved the notes while associating it with the card to the database. And then finally, we redirected back to the page, where now we are hitting this endpoint. So now we get the card. We pass it through to the view. And now the view, if we scroll up, filters through all the notes associated with it. And now this time, it will pick up on that new note. Refactoring Note Creation 11:15And now the view, if we scroll up, filters through all the notes associated with it. And now this time, it will pick up on that new note. And so as such, we see it reflected here. Isn't this cool? Add the note, and we're done. Now, as we finish up, do remember there's a number of ways to structure this. This is what I would say may be the longhand form. So for example, just for fun, let me show you a couple different ways you could do this. Well, and in fact, I'm going to comment those out so you can refer back to them. Okay, so here's another approach.Well, and in fact, I'm going to comment those out so you can refer back to them. Okay, so here's another approach. We could say new note, and then through the constructor, pass through our parameters. So I could say body is request body. Now just remember, if you want to mass assign things in this way, or in other words, you're just going to pass an array to the constructor, you have to make sure that you set your fillable fields. And we already discussed this in a previous lesson. In our case, we already have. So this means if the user tries to do anything malicious, and they, for example, they passIn our case, we already have. So this means if the user tries to do anything malicious, and they, for example, they pass through an ID, and they try to update the ID of the record. Well, because we said, nope, the only fillable fields are the body, anything outside of that value will completely be ignored, and you get some protection out of the deal. Okay, so yeah, that would be one approach. And then we could do this again. So let's try that one out together. Refresh. Here we go.Refresh. Here we go. Submit. So yeah, that's an approach. Another option, at least in terms of just formatting is, well, if you're only creating the note to pass it in here, sometimes I like to do this number here, where I new up the note as the argument. I don't always do this. But for little things, honestly, I think sometimes it looks good, and it can shorten up some of your code.But for little things, honestly, I think sometimes it looks good, and it can shorten up some of your code. That really just depends on how simple this is. If I have a bunch of arguments, no, of course, I'm not going to do that. But for something little like this, I think that's fine. No problem there. So that's a second option. And then finally, a third option would be to reference the create method and not new up a note class at all, like this, card, notes. And this time, I'm not going to save an existing note.up a note class at all, like this, card, notes. And this time, I'm not going to save an existing note. I'm going to create a new one and then pass through my array. Once again, we're only passing through the body. And actually, I have one more option to show you. But once again, let's prove that this works. Refresh. One more time. Add the note. And there you go.Add the note. And there you go. That will do the trick. And then finally, I don't want to overwhelm you. I'm just showing you that there's a number of ways to format things. Finally, I'm going to show you... Actually, you know what? I'm going to show you two more options. Just deal with it and soak it up. So you could say card, notes, create, and then just say request all here.Just deal with it and soak it up. So you could say card, notes, create, and then just say request all here. That would be perfectly fine as well. Because remember, when you call request all, that's going to return an array of all of the parameters passed through the request. Now traditionally, especially maybe with a different framework or if you're doing this in vanilla PHP, this is where it gets very dangerous because you can't always control what items are submitted through the form. That's where people get malicious. But in our case, we're already protecting you against mass assignment vulnerabilities.That's where people get malicious. But in our case, we're already protecting you against mass assignment vulnerabilities. So we said... And I'm sorry. If we go to the note class, once again, just to drill this in, we've been explicit about the fact that you can only mass assign the body attribute right here. So even if the user did do something else, it's okay. We're protected. The only thing we're going to interpret will be the body attribute. So once again, this is a nice, quick, clean way to go about it.The only thing we're going to interpret will be the body attribute. So once again, this is a nice, quick, clean way to go about it. So let's save and ensure that one works. Here we go again. Add the notes and we're going to get the same thing. All right. So one, this time, truly the final option, at least that I'm going to demonstrate. Please don't get overwhelmed. Any of these are perfectly fine. If you only memorize this one up here, at least for now, no problem there whatsoever.Any of these are perfectly fine. If you only memorize this one up here, at least for now, no problem there whatsoever. I'm just kind of having fun at this point. So one thing you can do is really think more about what it is you're trying to accomplish. So for example, in this case, we can basically break down what's going on, but it doesn't do the best job of describing it. At least we have no API that describes what's happening. So what could we do instead? Well, let's think about it. What is it that we're actually trying to accomplish?Well, let's think about it. What is it that we're actually trying to accomplish? Just break it down and speak it out. And you'll see me talk about this a lot on Larrakass. So if you were to say out loud what it is you're doing in this method, you would probably say this. We are adding a note to the card. Okay. So add note. We're not really seeing that reflected anywhere.So add note. We're not really seeing that reflected anywhere. I'm seeing a save method. I'm seeing a create method. Maybe I should make that explicit. We take the implicit and we make it explicit. So further, if we're saying add note to the card, could I maybe do something like this? Add card, add notes, and then we pass that through? Maybe that would be useful. And then further, we flesh out our API, so to speak.Maybe that would be useful. And then further, we flesh out our API, so to speak. It becomes very clear the connection between a note and a card. And once again, we make this perfectly explicit. Okay. So if we wanted to go with that approach, and by the way, in many cases, this is fine. No one will beat you up. But if you want to be a little more clear, yeah, in some situations, this is a good way to go about it. So let's say add notes.to go about it. So let's say add notes. Now this could either accept an array or a note instance. It's up to you to decide what you want to accept. Or again, you can just be as dynamic as possible and figure it out on the fly. And that can be cool too at some points. But in this case, yeah, let's be explicit and I'm going to type hint that I do expect a note instance. So now here and only here is where the card will reference this relationship. So I could say this notes, save notes, and then return the result.So now here and only here is where the card will reference this relationship. So I could say this notes, save notes, and then return the result. So notice we take this operation here and we isolate it behind a simple readable method that describes what you're trying to accomplish. All right. So let's come back. I'm going to get rid of all these other examples, which are perfectly fine. And instead I'll say card add notes. And then once again, we'll do a slight modification of what we did in an earlier example. Add a new note and then pass through the request data.And then once again, we'll do a slight modification of what we did in an earlier example. Add a new note and then pass through the request data. And well, I don't know about you, but I think that looks pretty good. So if we were to come back, our final run through, click add notes, and we get the exact same thing. Okay. So I hope you learned a bit in this lesson. In the next video, well, we need to think about something. Right now we're performing no validation whatsoever. So if I click add notes, we save to the database there.Right now we're performing no validation whatsoever. So if I click add notes, we save to the database there. Look, there's no restriction whatsoever. We can't be adding empty notes to a card. That makes no sense. So we need some protection. I will show you how to accomplish this in the next video.
