I want to start adding some admin functionality to our application. Because we have some articles, I want to be able to create, edit, and delete those articles. So the first thing I want to do is open up the layout for our application, that app.blade.php, and I want to add a new link. We have the home link, but I want one for the admin dashboard. So the URL is going to be /dashboard, the text will be admin dashboard. Now if we look at the routes, we already have a dashboard URL, because this was given to us whenever we created the project. I'm just going to comment that out. And let's create our dashboard component.

I'm just going to comment that out. And let's create our dashboard component. We'll just call it dashboard, and then we will add the URL route there. So that's going to be a GET request for /dashboard, and that will go to our dashboard class. Now, of course, this would be something that we would want to protect with authentication. And we will talk about authentication at some point. For right now, I just want to focus on the functionality. So with our dashboard created, we can go back. We now have our link.

So with our dashboard created, we can go back. We now have our link. Let's open that up in a new tab, and we have page title and page title. That's not very helpful, is it? So let's set some titles for these components. Let's open up the Dashboard component. Let's also open up the ArticleIndex component. And we want to add a title, but we need the class, not the view. So there's ArticleIndex. And we can add a title in a couple of different ways, but probably the most straightforward

So there's Article index. And we can add a title in a couple of different ways, but probably the most straightforward thing to do is to just use the title attribute on our class. So this is the Article index. We can just say articles, and that's going to be fine. We can go to our dashboard. We can add the title attribute here, and we'll say admin dashboard. So now whenever we look at the browser, we have our titles for articles and admin dashboard. That's a lot better. But looking at the admin dashboard, I don't really want to use this layout because we

That's a lot better. But looking at the admin dashboard, I don't really want to use this layout because we don't necessarily need to be able to search for our articles. We don't necessarily need a home. I mean, we can make the argument that we need it, but I want a different layout. So you might think we could go to the command line, and we could use the livewire layout command. However, if we just run that, we see that there's already a layout created. It's our default, app.blade.php. So you might think, okay, we can include a name.

It's our default, app.blade.php. So you might think, okay, we can include a name. Nope, that's not an option either. I would like to see this as a feature because to me, it just makes sense. But that's okay. We can get around this. We can go to our layouts. So inside of views, components, layouts, and our app.blade.php, let's just copy and paste. We will rename this to admin.blade.php. And I, of course, want to make a few changes.

We will rename this to admin.blade.php. And I, of course, want to make a few changes. We don't need our search component, so we can get rid of that in the nav bar. We don't need the home link. We do, however, need our admin dashboard. We could call it admin home, but let's leave it admin dashboard. Let's be consistent with something. And then let's add another link. We want to manage our articles, so we will have /dashboard/articles. And then the text will be just articles.

We want to manage our articles, so we will have /dashboard/articles. And then the text will be just articles. However, we still need to be able to use this admin layout for our dashboard. And we can do that inside of our components. Inside of the render method, whenever we call the view method, we could chain a call to the layout method. And then we would just specify the layout components/layouts/admin. And that's a simple change. We can now see that we are using the admin layout for our dashboard. And that's great.

We can now see that we are using the admin layout for our dashboard. And that's great. However, this isn't really scalable because that means any other component that we create to work with our admin section is going to need to do the same thing. Like for example, we are going to create another component for our list of articles. So let's go ahead and do that. We'll call it ArticleList. This means that in order to work with that layout, we need to open up article_list.php. Let's go ahead and add the title attributes. And this will be manage articles.

Let's go ahead and add the title attributes. And this will be manage articles. But in order to use our new layout, because by default, it's going to use the default layouts. Well, it would if we had a route there, wouldn't it? So let's just copy and paste. But once again, whenever we get to authentication, we'll group all of these things together. But for right now, we'll just stick with this approach so that we will have our article list handling the request for dashboard articles. So now this should work, but we are getting the default layout and that's not what we

list handling the request for dashboard articles. So now this should work, but we are getting the default layout and that's not what we want. So let's close some of these files so that I don't get confused. And here, once again, we would need to call layout, specify components, layouts, admin, and then voila, that's going to work. So for every other component that we would create for our admin section, we would have to call the layout method inside of the render method. I don't want to do that. I want something that's a little bit easier to implement.

I don't want to do that. I want something that's a little bit easier to implement. So what we could do is create our own component for our base class. I'm just going to copy Dashboard and we're going to call it AdminComponent so that we can get rid of this call to layout. We don't necessarily need the title attribute, but instead we will use the layout attribute because not only can we specify the layout inside of the render method, but we could also do so as an attribute on our component class. So here we can say components.layouts.admin. We, of course, need to change the name of this class so that it is AdminComponent.

So here we can say components.layouts.admin. We, of course, need to change the name of this class so that it is AdminComponent. But now that we have this base class, we can use this as the base class for our article list and we can get rid of the layout method call inside of render. We would do the same thing for our dashboard. Let's get rid of the layout call and we will extend AdminComponent. So now whenever we go to the browser, we can still see that we are using our admin layout as opposed to the default layout that the rest of our application is using. And that's great. Now we just need to implement our article list.

And that's great. Now we just need to implement our ArticleList. So let's close everything except our ArticleList class. Let's open up the article_list view. And before we do anything in the view, let's go ahead and let's provide the articles to the view. And we will do so by just passing them to the view itself. We will look at the other way of a public property. But for right now, we're going to stick with this way. Okay, so inside of our view, we want, well, we want quite a few things.

But for right now, we're going to stick with this way. Okay, so inside of our view, we want, well, we want quite a few things. The first thing we want is some styling for our div element. So we'll use auto margin, the width will be 1/2. Let's also add some margin at the bottom. And then in this case, we're going to have a table. And our table is going to have a head. Let's go ahead and give this some styling as well. The text will be extra-small, but it will be uppercase. The background color will be gray-700, and the text will be gray-400.

The text will be extra small, but it will be uppercase. The background color will be gray 700, and the text will be gray 400. Then we will have our row, which is going to have our header cells. And here we will have some padding, both horizontal and vertical, but it's going to be different values there. And we're just going to have two columns for right now. The first is going to be the title. And then the second is just going to be some buttons that we will have for like edit and delete and things like that. So that's our head.

like edit and delete and things like that. So that's our head. The table body is where we are going to iterate over our articles as article. And then we will render the table rows. Let's get the styling out of the way. We'll have a border at the bottom. The background will be gray-800, and the border will be gray-700. But remember, we are iterating over a collection here. So we need the wire:key attribute, and we will use the article's ID. And then we will have our cells.

So we need the wire:key attribute, and we will use the article's ID. And then we will have our cells. Let's actually use the same styling that we used for our header cells. But of course, we need this to be a td element. This first one is where we will output the article title. And we don't need to output any content here. We do, however, need another cell so that we can put our buttons to manage our articles. We'll start with a delete button. So the text-gray-200, we'll have some padding.

We'll start with a delete button. So the text gray-200, we'll have some padding. But the background needs to be red-700. So we will use red-700, and I want there to be a hover effect. And we will change the background to a darker color of red. And the text will just be delete. Okay, so let's take a look. Let's give this some rounded corners. We don't need them to be big, so let's just have rounded-sm. And okay, that's gonna work.

We don't need them to be big, so let's just have rounded SM. And okay, that's gonna work. So if we click on these delete buttons, we of course want to delete the article. So that means we need to wire:click, and we will say delete the articleId. So we need to implement that inside of our class. So let's add that public function delete. Now, we are getting an ID, but really, we can type in this. We can say that we are going to get an article, and we can just call it article. This way, it simplifies it for us so

we can just call it Article. This way, it simplifies it for us so that we can just call the delete method, and that should work. So if we go back to the browser, let's scroll all the way down. And this bottom one, it quite makes my forehead ache. Yeah, I've been there. Let's click on delete, and that should go away. Now, I want you to notice that the list of articles automatically updated. That's because our articles changed. So it re-rendered, and a new set of articles was provided to the view.

That's because our articles changed. So it re-rendered, and a new set of articles was provided to the view. Let's look at this the other way. If we had the public articles as an empty array, and then we called the mount method to where we set this articles to article all. Let's get rid of where we provide that to the view. It's going to look the same. There it is, right there. We have the same thing. But whenever I click on this bottom one, I want to go after that savage queen.

We have the same thing. But whenever I click on this bottom one, I want to go after that savage queen. If we delete this, we don't get any kind of confirmation that, yes, it was deleted, the list is not automatically updated. If we refresh, then we can see that it's gone. So this is why it's really best to avoid this kind of pattern. Because as our data updates, we are not automatically updating what is rendered inside of the page. Because we quite explicitly said, don't change anything as far as rendering. In this case, when our articles change,

Because we quite explicitly said, don't change anything as far as rendering. In this case, when our articles change, we provide a new list of articles to the view so that it can be re-rendered. So now if we click on Latin grammar, that one's going to go away and our list is automatically updated. But of course, this is very dangerous to just have a delete button without any kind of prompt whatsoever. Ideally, we would ask the user, hey, are you sure you want to delete this? And we can provide that functionality with wire:confirm. And we could have our text.

And we can provide that functionality with wire:confirm. And we could have our text. Are you sure you want to delete this article? And now that will prompt the user to confirm that yes, they want to delete the article or no, they don't. So this first one, English, thought Alice. If we delete and cancel, of course, nothing happens. But if we delete and okay, well, it's gone and our list is updated. Once again, if we want to delete Rabbit, Began, Alice thought to herself, we can confirm that, it's deleted, and our list is updated.

Once again, if we want to delete Rabbit, Began, Alice thought to herself, we can confirm that, it's deleted, and our list is updated. We talked about quite a few things in this episode. We talked about adding titles to our pages. All we have to do is use the title attributes for our component class. But then we also talked about using multiple layouts. We have our default layout. But if we want to use a separate layout for other parts of our application, we can. We can use the layout method inside of our components render method. Or we can use the layout attribute.

We can use the layout method inside of our components render method. Or we can use the layout attribute. The latter gives us a lot more flexibility. And then we also talked about how to provide a decision to users. That way we could prompt users to be sure that they wanted to actually delete something. But deleting is very simple. Let's talk about creating in the next episode.