تماشای این درس نیاز به اشتراک حرفه‌ای دارد.

Install Filament Admin Panel0:00

I'm starting with a completely new Laravel project, Booknest. Let's install filament with Composer require filament, version is for currently . Once this is done, let's install filament with the panels, PHP artisan filament install with panels option. And let's call the first panel ID as admin. And all done. I have already started the report. So if you haven't done that yet, go ahead and do it right now.

I have already started the report. So if you haven't done that yet, go ahead and do it right now. I'll say no. And that's great. I have heard installed so I can directly open Booknest.test, Booknest.test. And we have a Laravel project. Let's navigate to slash admin. And we have the admin panel. Let's create our first filament user using PHP artisan make filament user. I'm going to use my name and the email will be shouldt@example.com password.

Let's create our first filament user using PHP artisan make filament user. I'm going to use my name and the email will be shouldt@example.com password. And let's log in right now. Great. So this is the dashboard which you would have seen a thousand times already if you use filament. Great. What is the admin dashboard? Now let's create another panel called app panel, which is what are real users of the

Create App Panel1:27

Now let's create another panel called app panel, which is what are real users of the library will be using. So they can see all the books right there. They can request for books and do all the things in the app panel. Let's create that using PHP artisan make filament panel. Let's call it app. And yes, it has been created successfully and filament has also attempt to register the app panel provider, but it gives a warning that in case it's not registered,

register the app panel provider, but it gives a warning that in case it's not registered, you should do it manually. So let's just check providers dot PHP. Yes, it has been registered. So we don't have to do anything else. Let's open the configuration files for both admin panel provider and the app. So close this open admin panel provider side by side also open the app panel. Let's make all the changes here in the admin dashboard.

So close this open admin panel provider side by side also open the app panel. Let's make all the changes here in the admin dashboard. So this panel is selected as the default. But since we have most of our features in the app panel, I'm just going to remove this. The idea is admin. The path is admin. Great. We have the login method perfect and let the primary color be amber for now for the admin

We have the login method perfect and let the primary color be amber for now for the admin panel and discover resources path. This is something I would like to change instead of simply having filament slash resources. I would like to add an admin directory here just to avoid confusion between the admin and the app panels. So I'm going to do that here. Sorry.

So I'm going to do that here. Sorry. Admin here as well. And of course, we will have to add this here filament slash admin here as well. And we've got to do the same thing in the widgets so slash admin and here as well filament admin. Great. We have the pages dashboard class. That's great.

We have the pages dashboard class. That's great. We have these account widget and filament info widget, which is exactly what you're seeing. These are something we would remove of course. So just remove this whole thing in the app panel provider, let's make some changes. Let's make this the default right now and let the ID be app. That's how we identify this panel. The path.

That's how we identify this panel. The path. However, we don't need an additional string like app. So if I have a domain like bookness.com, I would like the users to be able to access the panel directly not under slash app. So let this be blank, but for this to work, you should not have any routes defined in your routes file, which point to the route. So let's remove this.

your routes file, which point to the route. So let's remove this. And since we don't need the welcome blade file, let's also delete the blade file, write your resources, views, delete. Okay, now here we need to add additional methods like login. We also need registration because any user can register to our library app. We also need password reset. It's very easy to add this simply add password reset. And we also need a profile page.

It's very easy to add this simply add password reset. And we also need a profile page. So if users like to change their password in it, they can. Okay, we will change the colors in the next episode, but for now, just to differentiate it from the app panel, let me change this to something like lime. And this is perfect. We added admin right here in the same place we have app. So now it's completely organized pages is great discover widgets perfect, but let's remove

So now it's completely organized pages is great discover widgets perfect, but let's remove these two widgets as we did in the admin panel as well. Anything else is great for now, let's check out what this panel has now. If everything is set up correctly, so let's go to a book nest dot test with no app. And yes, we do see the lime color here, which means we are in the app panel now . Let me sign out and sign up for a new account name and email address password and sign up.

Let me sign out and sign up for a new account name and email address password and sign up. And we are in the app panel right now. Now this person John can also access the admin panel. So you don't want a user registering and using the admin panel. Of course, this happens only in local by default filament allows all the users to access all the panels in production. However, if when you want certain users only to access certain panels, there are some things

Restrict Panel Access6:25

However, if when you want certain users only to access certain panels, there are some things you need to do. So let's go to the user model. And this has to implement filament user. And we also have to add a method can access panel. Let's do that right here can access panel here. We check what panel it is. If it's the app panel, everybody gets access to it. But if it's the admin panel, get ID is admin, then we check if the signed in

If it's the app panel, everybody gets access to it. But if it's the admin panel, get ID is admin, then we check if the signed in email is belongs to an array of the admins we would like to allow. So for example, yeah, I have should be at example dot com for now that's it. So only these emails listed in this array will get access. If it's the admin panel, otherwise we say returned true. Great. Let's check if this works and go back to the browser. And I am John.

Let's check if this works and go back to the browser. And I am John. I have access to the app panel. But if I try to access the admin panel, it's forbidden. All right. Let's go back. It's actually not the best practice to hard code emails here. So what we'll do is we'll create a new config file called admin admin dot PHP. And here let's return an array of all the emails emails of all the admins. So so we don't have to go somewhere else and edit.

And here let's return an array of all the emails emails of all the admins. So so we don't have to go somewhere else and edit. It's much more maintainable this way. Great. And once we have this, let's go back to user and change this to use the config file instead not admins sorry, not filament dot admins admins dot emails like so. Okay. Let's close these two files and see what else we can customize in our app panel .

Let's close these two files and see what else we can customize in our app panel . Let's go back to app panel provider. And right here, there's so many other options like let's say you can change the login routes log. Currently, it's login. But if you want to change that to sign in, you can do that. You know, the same with registration routes log can change it to sign up. You can change the profile routes log I suppose or the password reset routes

You know, the same with registration routes log can change it to sign up. You can change the profile routes log I suppose or the password reset routes log. So so many of these options are there. We will explore more of them as we move forward. Another one is revealable passwords by default. It's true. If you set it to false, the user while signing up or signing in cannot reveal their passwords as they type.

Build Book Resource9:19

their passwords as they type. Now, what we'll do is let's create our first resource book resource. I'll close this, but we first need a model and migration. So let's create that PHP artisan make model like to call it book. I like a database cedar migration and a policy as well because we don't want all the users to be able to edit the books. They can only browse it hit enter. Yes.

They can only browse it hit enter. Yes. All of them are created. Let's open the migration file, create books table. And let's add the title column, the author and not the date. But we would like an image column. So string image, yeah, image URL or simply images. Okay. And this is nullable. So we would like a description column.

And this is nullable. So we would like a description column. That's perfect. Okay. Let's go back to the model book model and add create the fillable property. So we say protected fillable perfect title, author, image and description. Let's migrate PHP artisan migrate perfect. Now we can go ahead and make the filament resource with PHP artisan. Sorry, make filament resource. I would like to call it the book resource resource.

Sorry, make filament resource. I would like to call it the book resource resource. And I would like a simple resource because all the admin does is view the book and there's only title, author, description and image and just some edits, we'll be doing relations in a completely different way. So for now, simple is good. The title attribute for this is title itself. And which panel would you like to create this?

The title attribute for this is title itself. And which panel would you like to create this? I would actually need this in both for now. Let me just select admin. Would you like to generate a read only view model? No, I would select no should the configuration be generated from the current database columns? Yes, because we have everything set. All right. Let's look at the browser now.

All right. Let's look at the browser now. We are in the admin panel. There should be a book resource here, but we're not seeing it because we created a book policy. We didn't do anything there. So let's open book policy. I'll just close these book policy return falls everywhere, which is why we are not even

I'll just close these book policy return falls everywhere, which is why we are not even able to see the resource. So view any there should be true view should also be true for normal users and admin here. Let's create a way to check if it's the admin user. So let's create a method public function is admin user return in array. Let's check that config file be created. So config admin emails and yeah, like so now for create update and delete. Yes, return is admin user.

So config admin emails and yeah, like so now for create update and delete. Yes, return is admin user. Let me copy this and paste it here and here for update and for delete, we don't need restore or forced delete. So let me just remove all of this. Now we should be able to see let's refresh. And yes, we do have the books resource and we are able to create a new book. I'm sure we will be able to edit it as well. I now have a book cedar ready with all AI generated titles and cover images so

Seed Books and Images13:04

I'm sure we will be able to edit it as well. I now have a book cedar ready with all AI generated titles and cover images so that this app really looks nice. Let me just quickly see it. You can also access the cedar in the GitHub repository. So go ahead and copy that. This is the cedar of about 15 books and I also have all the cover images in where's that storage app public covers all of these right here.

where's that storage app public covers all of these right here. Let's create the storage link bhb artisan storage link. All right, link has been done. So let me see the database bhb artisan DB seed yes class book cedar. The seeding is done. I also need to change the file system disk in the envy file by default. This is local. I need to change this to public because that's where these cover images are. Now we should be able to see all the books.

I need to change this to public because that's where these cover images are. Now we should be able to see all the books. Let's check refresh. Oh, yeah, perfect. So we have the books and we have the cover images as well. And we can edit. We can delete. We can do all of that. Great. So in the next episode, we'll add some colors and make it look a little bit

Great. So in the next episode, we'll add some colors and make it look a little bit more like a library app.

دوست دارید گاهی خبرهای Laracasts را ایمیل کنیم؟