Adding Published Checkbox0:00
Since we are continuing this talk about forms, let's look at some other form controls. We've looked at text boxes and select boxes, I believe. Let's look at check boxes and radios. And let's start with the create article view. And we're going to add two sets of form controls. The first is going to be a check box to determine if an article is published. So here, let's have a label which will contain an input element for our check box. And since this is a single check box, we don't really need to be concerned with the name. But let's go ahead and put it in anyway, published, because that is exactly what this is going to represent. Let's go ahead and wire up the model. We could say that we will have a property simply called published, and then we will have our text. So let's see what
Let's go ahead and wire up the model. We could say that we will have a property simply called published, and then we will have our text. So let's see what that looks like in the browser. And okay, we could use a little more styling here. Like I think for the label, we could use flex and then items center. That should center the box for the check box and the text, but there needs to be some spacing there. So for the input element, let's add some margin to the right. And it doesn't need to be a lot of margin, just enough to separate. And yeah, I think that that is going to work just fine. Now, one thing we could do here is add a Boolean modifier. Now, we don't actually need to do this because a check box is, well, it's Boolean by default. It's checked or it's not checked. But I'm going to leave
Building Notification Radios1:35
modifier. Now, we don't actually need to do this because a check box is, well, it's Boolean by default. It's checked or it's not checked. But I'm going to leave this in just because. Now, this is essentially going to convert the value on the server to a Boolean. Again, I don't think it's actually necessary in this particular case, but I'm going to keep it there just the same. And I think that's going to be it for the check box. But next is going to be a little bit more involved because this is going to be a set of radio buttons. And ideally, what we would have is some options to choose how we want to be notified of any updates or comments or things like that. So we're going to start with a div to contain all of these things. And we will have another div that will have some margin at the
comments or things like that. So we're going to start with a div to contain all of these things. And we will have another div that will have some margin at the bottom, and this will be NotificationOptions. And then we will have our radio buttons, but they are going to be contained inside of a div, which will have flex and gap-6, just that there's some spacing there. Then we will have our label. They'll have flex and items-center. And inside of this label, we will have our radio button. It's going to be very similar to our checkbox, except in this case, we don't really care about the name or the ID. We do, however, care about the value. This is going to be the radio for email notifications. Let's also add some margin to the right. And let's go ahead and wire up the model. We'll call this
value. This is going to be the radio for email notifications. Let's also add some margin to the right. And let's go ahead and wire up the model. We'll call this Notification. And actually, what we need to do is make this part of the form because this is going to give us yet another reason to use form objects because all of our changes are going to be inside of the form object itself. And of course, these views. We won't actually need to touch the components for the Create article and the Edit article components. But that is going to be that for email. Let's just copy and paste this a few more times because we want email notifications, we want SMS notifications, and then we want None, if that is indeed what we want. And I think that's going to be fine. So yeah, we could use some more
Updating ArticleForm Properties3:31
notifications, we want SMS notifications, and then we want None, if that is indeed what we want. And I think that's going to be fine. So yeah, we could use some more styling, but everything is there ready for us to use. So now we just need to implement these properties on our ArticleForm class. So we have our published, which we can initialize as false. Then we have the notification, which we can initialize as None. And if we take a look, None is... yeah, it looks like everything is okay. Let's swap these to be something else just to make sure that it is indeed setting those values. And sure enough, it is. Okay, so we have those things, but now we need to load these values so that we can use them. So inside of setArticle, that is being used for the Edit form. We want to set the
those things, but now we need to load these values so that we can use them. So inside of SetArticle, that is being used for the Edit form. We want to set the published property according to whatever the article has. Now, we don't have these columns in the database yet, so we will need to add those. But all in due time, our Notification will set to the Notification, and I misspelled that. But that's going to be enough for SetArticle, because that's really the only time that we need to set those values. Otherwise, everything is coming from the form. So whenever we create a new article, we need to include published and Notification. And we also need to include those whenever we update. And that is... that's it. And as I mentioned, this is one of the beautiful things about using a
Creating Migration Columns4:58
Notification. And we also need to include those whenever we update. And that is... that's it. And as I mentioned, this is one of the beautiful things about using a Form object. We have now encapsulated all of that functionality here inside of that class. So this is really the only class that we need to touch. Of course, the views are another thing entirely, but we already have the view set up for the Create. Now we just need to copy those fields and paste them into the Edit. Let's make sure FormNotification, FormNotification. Okay, yeah, I think we're good. So now we just need to make a migration. We'll call this AddPublishedAndNotificationToArticles. That's rather verbose, but that is going to be fine. So that we can open up that migration file. And for our table here, we
and Notification to Articles. That's rather verbose, but that is going to be fine. So that we can open up that migration file. And for our table here, we want a Boolean value for Published. Let's set the default to False. Then we want a String column called Notification. And let's set the default to None. Now we should go ahead and implement the down method because we want to drop those tables whenever we get that opportunity to. So let's call dropColumn for both of these columns. Let's get rid of these default methods. And okay, we've got that migration ready to go. So now we should be able to migrate. And everything looks like that worked. So now we just need to test this out. We'll call this New Article with Checkbox and Radio Buttons. The content will be, This Was Easy. At least
Testing and Fixing Model6:33
like that worked. So now we just need to test this out. We'll call this NewArticle with Checkbox and Radio Buttons. The content will be, This Was Easy. At least it was easy. Let's make it Published. Let's set NotificationOptions to SMS. If we save this, well, we didn't get any errors. We can see that we have that article now. And if we go to Edit, those values weren't saved. But I bet that's because we didn't do anything with the Article model. We need to add the Published and the Notification attributes to the fillable array. And we should also do Casts so that we can set Published as Boolean. So that should get that working. So now let's give it a shot. We want this to be Published. Notification will be SMS. We'll save it. And sure enough, it looks like that that is
that working. So now let's give it a shot. We want this to be Published. Notification will be SMS. We'll save it. And sure enough, it looks like that that is working. So working with checkboxes and radios is very straightforward. I mean, after all, on the server, it's just Laravel. But really, it's a lot more simple because now we get to bind these properties on our components or our form objects to the form fields. So we don't have to worry about field names or anything like that. And really, because we used a form object, it made this modification so much easier because we didn't even have to touch the Create and Edit article components. I mean, yes, we had to update the views, but all of the other work was done inside of our form object. And that made it really easy to
Edit article components. I mean, yes, we had to update the views, but all of the other work was done inside of our form object. And that made it really easy to implement this.
