We have come a long way in our lateral application. We've added authentication. We have created two routes, dashboard and bookmarks. Not only that, we have the role model role CD, we have inserted some data. There is some roles into the table. We are fetching them all and displaying in the dashboard view. And also we, we are displaying the bookmarked roles in the bookmarks tab.

And also we, we are displaying the bookmarked roles in the bookmarks tab. And while doing this, we've learned a lot. Now is the last episode in lateral where we get this bookmark functionality to work. So when I click on this, this should also persist in the database. Right now it's not, if I refresh, it's gone. So let's do this also using the relationship with creative. Let's go to the editor.

So let's do this also using the relationship with creative. Let's go to the editor. Let me open the roll blade component that we created, rule blade PHP. And let's look at this here. We've used Alpine to achieve the click functionality, but this will not work anymore. So let me comment this out. And we have to actually use a form, the traditional way of doing this in lateral.

And we have to actually use a form, the traditional way of doing this in lateral. We will change this again in the next few episodes. We'll re-implement this using live I. But now let's take a look at how it's done in the lateral way. So this button has to be wrapped within a form. We are submitting this form with the data of either bookmarking it or removing it from bookmarks. So let's create a form

of either bookmarking it or removing it from bookmarks. So let's create a form where the method is post, because we are saving the bookmark. Let's assume that's the first thing we are doing. And the action is something we'll leave blank for now. We'll fill it in a moment. And then we close the form after the button. So clicking on this button should, uh, call a route. Let's create a route.

So clicking on this button should, uh, call a route. Let's create a route. Now go to web PHP and now we have to create a post route, route post, and we can use the same URL bookmarks. But this time we are passing in the rule id. So we can either do this that is specified the exact id, the primary key of the rule, or using laterals route model binding. We can simply pass the rule. Also.

or using laterals route model binding. We can simply pass the rule. Also. It'll get resolved automatically. We can do this. And here we call the bookmark controllers store method, and rest remains the same. So let me copy it, paste it here. Of course, we'll change the name to bookmarks store. So let's go into the controller and implement this right here in the store. We are receiving the rule itself.

and implement this right here in the store. We are receiving the rule itself. Now we need to insert a row in our bookmarks table with, uh, this role ID and the user id. And that's very simple. Again, using the many to many relationship, we can say auth user. That is get the authenticated, get the logged in user and say, get all the roles and simply attach this role

and say, get all the roles and simply attach this role to the existing rules. Yeah, so we are saying get in the logged in user, get the roles that is the many to many relationship and then attach this role. Okay? Now we need to specify this route in the action attribute in our form. So sure, once again, we use the route method and use the name of the route that is bookmarks Do store

So sure, once again, we use the route method and use the name of the route that is bookmarks Do store and also pass this rule, right? So this will get past here and the rule ID will get resolved and we will be able to attach it to this user. Let's go to the browser and see what happens. So let me click on this bookmark icon of the first rule. And we see page expired. What happened? We submitted a form, but why did the page expire?

And we see page expired. What happened? We submitted a form, but why did the page expire? That's because in Laravel, all the routes like post, uh, delete update, all of those use something called as the CSRF protection so that we can prevent cross site scripting. And you don't have to do much. You simply have to use the CSRF directive blade directive. It adds a hidden input field and it just verifies at the other end

It adds a hidden input field and it just verifies at the other end to make sure it's the same user. So make sure to add this in every single form with the method post. Now it should work. So let's go back and click on the icon again. Call to undefined method. All right, it was bookmarked roles, right? Let's go back and change this to

All right, it was bookmarked roles, right? Let's go back and change this to bookmarked roles. And once again, refresh and continue and we see a blank page. That's because the form got submitted and we did not redirect the user back. So right here we say return back. That's a simple method to go back after the post request. So now if we go back

That's a simple method to go back after the post request. So now if we go back and refresh, yes, this is, uh, of course done, let's try and bookmark the third role. So it's bookmarked and then it comes back. Obviously you see why we can't do this in the traditional lateral way. It's not snappy, it doesn't feel like a modern application. So we are able to bookmark it, but we need to also be able to remove the bookmark.

So we are able to bookmark it, but we need to also be able to remove the bookmark. So let's go back to the, go to the role, uh, component. And here we are simply storing the bookmark without even checking if it's been bookmarked first. So instead of doing that, let's use, let's check first if this role is being bookmarked. So right here, we copy the same thing. If the rule is not bookmarked, that is,

So right here, we copy the same thing. If the rule is not bookmarked, that is, if the rule is not bookmarked by the logged in user, this would be the action else. The action would be bookmarks do something else. What is that? We need to create another route now. And we could call that bookmarks destroyed. Again, that's by convention. And then we end if, right, so it's complaining that this route doesn't exist.

And then we end if, right, so it's complaining that this route doesn't exist. Let's go back to the routes. And right here, I will copy this, paste it again. And this time, this is not a post request. This is going to be a delete request. This remains the same. This, uh, the method that we're gonna call is destroy middleware is the same, and the name is going to again, change to destroy.

middleware is the same, and the name is going to again, change to destroy. So we are doing it the restful way. Um, we post it to store the bookmark here, and now we are going to delete it. Going back to the controller. Here, we simply copy these two lines instead of attaching this time we detach. And once again, it's not the string, it's the rule that we are passing.

And once again, it's not the string, it's the rule that we are passing. Okay, let's see if, uh, this is all good. I think I will have to change this. Uh, the closing tag should come after the, if like, so now there's one more thing. The only method HTML allows is post. We won't be able to mention delete here, but we can do that using the method blade directive

We won't be able to mention delete here, but we can do that using the method blade directive and passing delete. So we can spoof the verb here. Once again, we need this only if the role is bookmarked and so not of not bookmarked. So if the role is bookmarked, then we have to delete it, right? So, and if, okay, if all goes well, we should be able to click on the bookmark icon

So, and if, okay, if all goes well, we should be able to click on the bookmark icon and that would delete it. Refresh the page, click on it, and it's gone. Of course, this time you didn't notice the page redirection because you didn't scroll down. But if you scroll down and un bookmark it, you will be able to see the page jump, which is why we need live wire. Let's again verify in the bookmark tab, yes, we still,

which is why we need live wire. Let's again verify in the bookmark tab, yes, we still, we have a single bookmarked role, which is this one. We can do this even in the bookmark tab. So if you go here and remove the bookmark, it should work. Let's go back to the dashboard, bookmark a couple of roles, go to bookmarks, remove them, and this is working great. So except for the search functionality, we have completed all the features in our small and simple app.

we have completed all the features in our small and simple app. Of course, you must have noticed that this, uh, alert is gone, the toast is gone. They will bring it back after a few episodes. So see you in the next one.