در حال بارگذاری ...

Course Overview and Goal0:00

(upbeat music) All right everyone, I am so excited to be here 'cause we are talking filament five and it's been about two years since I've been here doing a course on layer casts. And two years ago, I did a course on filament three. And a lot has changed since then, but one thing I believe has not changed is that filament is the best fastest way to get an idea for an app out of your head

is that filament is the best fastest way to get an idea for an app out of your head and onto the computer screen. And so we're gonna talk about everything that's changed in the last two years. And we're gonna go really deep into filament this time. So of course we're gonna do that together building an app. So the app we're gonna build is called the Roadmap app. This is if you have an app somewhere out there in the world and you have users

This is if you have an app somewhere out there in the world and you have users and those users are always asking you, "When am I gonna get this feature?" Or, "I wanna vote for which feature comes next?" And I wanna write comments and stuff like that. We're gonna build that app. So we're gonna first build the backend of where you manage all your features. And then we're gonna put a front end on it

Creating the Laravel App0:54

of where you manage all your features. And then we're gonna put a front end on it so that our users can actually see which ones are possible and vote, submit ideas, things like that. So we're gonna do the most fun thing in all of software development, which is Laravel new. So let's open up the terminal. And I'm in my Herd directory and I'm just gonna do Laravel new

And I'm in my Herd directory and I'm just gonna do Laravel new and we're gonna call it Roadmap. Now I'm not gonna use a starter kit so I'm just gonna pick none. I do wanna use Pest and I will use Laravel Boost. I'm gonna pick MySQL as my database. That's the one I always use. So I'm gonna run the default migrations. Database doesn't exist so we'll create it.

So I'm gonna run the default migrations. Database doesn't exist so we'll create it. This does a lot for us. We're just gonna let that happen behind the scenes. Okay, installation is done and now we have our application. So I'm gonna CD into the Roadmap directory. And the first thing I actually wanna do is check the browser and see if I actually have a application. So Roadmap, oh gosh, roadmap.test. And I do have a Laravel application up.

Installing Filament 51:51

So Roadmap, oh gosh, roadmap.test. And I do have a Laravel application up. So this is just a standard Laravel app and we need filament. So let's go to filament. I've got the filament docs right here. We're gonna get started, get started again. And we're gonna look at installation. And the installation here, you're gonna be able to grab this

And the installation here, you're gonna be able to grab this and paste it into your terminal. For me, I am not actually using four. I'm using five. At the time of recording, five is still in beta. So I'm gonna use 5.0.0 beta four. That's what's available right now for you. You're probably not gonna have to do this. You're probably just gonna copy whatever

You're probably not gonna have to do this. You're probably just gonna copy whatever is in the documentation and use that, okay? Now I'm trying to install this and it doesn't work because my minimum stability is not correct. So I'm gonna open up PHP Storm and I'm gonna look at the project and down here in the Composer JSON all the way at the bottom, perverse stable or minimum stability.

all the way at the bottom, perverse stable or minimum stability. I'm gonna put dev. Again, you're probably not gonna have to do this but this is just what happens when you're using beta software. So let's go back to the terminal and I'm gonna require it again. Now it's doing the installation. Now while it's installing here, I do wanna mention

Now it's doing the installation. Now while it's installing here, I do wanna mention Filament 5 doesn't actually have many features. There may not be any by the time it launches beyond Filament 4, but the reason it's a major release is because Livewire 4 is in beta right now and will be tagged out of beta soon. And Filament 5 just supports Livewire 4 under the hood. Most of the big features came in Filament 3.1,

Setting Up Admin Panel3:18

And Filament 5 just supports Livewire 4 under the hood. Most of the big features came in Filament 3.1, Filament 4, and Filament 4.1. So we're gonna be talking about a lot of those features in this course. Now that this is ready, let's go back to the documentation and see, we're gonna install the panels. Again, this is gonna be our backend where we're managing all of our roadmap items.

Again, this is gonna be our backend where we're managing all of our roadmap items. So we go to the terminal, we're gonna install panels, run this command. It is my admin panel. That's just because it's kind of the backend. I'm gonna call it admin. I've already starred Filament, so I'm gonna say no. And the last thing I need to do is go into these instructions and make a Filament user.

And the last thing I need to do is go into these instructions and make a Filament user. So I'm going to run this command, put my name and email here. And now there's a user in the application. So I can go back to the browser, let's go to our application here, and then move it up. And I'm going to slash admin. And here we go, I can log in.

Building Feature Resource4:15

And I'm going to slash admin. And here we go, I can log in. So I'm gonna put my email here and the password I chose. And we're logged in to just a dashboard. I've got my Filament version here, and now we need some data. So let's create that first model. Again, this is the roadmap app, and we want to track features and feature requests. So I'm going to go to the terminal,

and we want to track features and feature requests. So I'm going to go to the terminal, and we're gonna say artisan make model. I want a feature, I want a migration, and a factory. So let's run this. Go into PHP storm. This would have created my migration to create a features table. I'm gonna do that. And I'm just gonna do this really quickly.

I'm gonna do that. And I'm just gonna do this really quickly. So let's get rid of this and features migration. Here we go. This is pretty standard Laravel stuff, okay? We have a name, status, description. We've got some integers, a cost, 'cause I want to show you money and a date and a date time. And the other thing we need is a factory to give us some data here.

And the other thing we need is a factory to give us some data here. So we're gonna go to the feature factory. And again, I'm just gonna do this really quickly. Here's just some random data that we can use to spin up some data for our app. So if you need to pause the video, go back and type this into your IDE. Go ahead and do that, but we're gonna move forward. I'm gonna go into Tinkerwell now.

Go ahead and do that, but we're gonna move forward. I'm gonna go into Tinkerwell now. Or actually before I do any of this, I need to go back to my terminal, and I need to run the migrations. So we'll run migrate here. And we've created our features table. It's important that you run your migrations first, because the next thing that we're gonna do is we're gonna run a command called make filament resource.

because the next thing that we're gonna do is we're gonna run a command called make filament resource. And I pass in the model name and also dash dash generate. And this is really important because this is going to give us a table and a form and all kinds of stuff a really great starting point. This is one of the big reasons why filament is so fast to build your application idea. So the title attribute is name and I do want a read only view page, I'll say that.

So the title attribute is name and I do want a read only view page, I'll say that. And now the last thing I need to do is go into Tinkerwell and I'm just going to factory up some data. So I just ran this and if I go into the browser, I now have a features link in my sidebar. And when I click here, I've got 10 features that I just factored up, I've got a table. I can sort, I can search, I can add a new feature. I've got a form here to create that new feature.

I can sort, I can search, I can add a new feature. I've got a form here to create that new feature. I can edit existing ones. One thing about editing, I think if I try to do this and save it, it's going to throw an exception for mass assignment exception. Let's go ahead and fix that really quickly. I'm gonna go into my app service provider and in the register method, I'm just gonna do model on guard.

and in the register method, I'm just gonna do model on guard. And this will allow filament to work. So now if I try to save again, everything works. I got the save notification. I mean, this is pretty cool. We already have working table, a form where we can create everything. Like this is pretty cool. Now the last thing I want to show you in this video

Exploring Filament 5 Structure7:23

Like this is pretty cool. Now the last thing I want to show you in this video is what this code looks like. So when you were in filament three, if any of you use filament three, we would find our feature resource. And when we get here, this would have been a really long file because it's got some stuff up top. We're defining our navigation icon, the name of the attribute.

We're defining our navigation icon, the name of the attribute. And then all of this stuff would have been in your resource. And this gets really long. And all of this stuff, the table, would be in your resource. And so now what filament has done, and I think this is a really, really good way to keep your code in the right place and have it structured really well, is they're using resources a lot like a controller

and have it structured really well, is they're using resources a lot like a controller back in the day where you want really skinny controllers. And now we've got really skinny resources. And these resources are just handling the bare bones of what each resource needs to do. And then each of these classes, the feature form, feature info list and features table, are really defining all the details of what's going on. Then lastly, we have the relations,

are really defining all the details of what's going on. Then lastly, we have the relations, which we'll get to later. And then the pages, we have different pages for view and edit. One thing that's really cool about filament is you don't always need the page. So if I were to actually get rid of the edit page, you would think, well, now I can't edit the record, right? Nope, if I click edit, let me just refresh.

you would think, well, now I can't edit the record, right? Nope, if I click edit, let me just refresh. I click edit, now I just get a modal. And filament knows if I don't have a page to show this form, I'm just gonna pop a modal in each other form. So really cool how smart filament is and how you can really customize it to get the experience that you want. Now there's still a lot to do, but in just a few minutes, we've got a really good starting point for our application.

Now there's still a lot to do, but in just a few minutes, we've got a really good starting point for our application. (upbeat music)

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