Remember at the beginning of the series when I talked about how Filament is much more than just an admin panel? Well, then throughout the series, we've been showing you mainly an admin panel. So I want to show you now how you can use Filament outside of an admin panel. And what we're going to do is continue with this conference theme of now we need people to register for a conference. So these are not logged in users, we just need to set up a web page, a nice marketing fancy web page, and we need people to sign up there as attendees for our conference. So to do that, I've gone into our application, and I've actually added the Attendee model and migrations.

So to do that, I've gone into our application, and I've actually added the Attendee model and migrations. So you can review this, an Attendee belongs to a Conference, I've added a factory for it. It's pretty simple. If you want to review this, if you're following along and coding along, just go ahead and pause and get some of this stuff done. And I'm also going to have it in this commit. So I'm just going to commit and push. So now we have that Attendee model, and we just need to build the page where people can

So I'm just going to commit and push. So now we have that Attendee model, and we just need to build the page where people can sign up to attend our conference. And to do that, we need to go to the filament docs and take a look at some additional installation steps, because it's a little bit different if we're just installing a package to be used in a Livewire component. So I'm going to run this php artisan filament:install, and I'm going to scaffold the forms. So I've run this, and we're going to see what this did to my project. So there's eight differences in my git. So you can see it changed five files, and it actually added three more.

So there's eight differences in my Git. So you can see it changed five files, and it actually added three more. And so if you're going to run this command, the docs recommend that you do this in a brand new app, which actually, in this case, it is a brand new app because we haven't built any pure Livewire stuff. If you're doing this in your app, you might run that command. Again, you've got version control, you can always revert if the command overwrote something that was too important. There's also documentation steps where you can go step by step and do this yourself. So I'm just going to commit this stuff all as the installation.

There's also documentation steps where you can go step by step and do this yourself. So I'm just going to commit this stuff all as the installation. And now I'm going to go back to my terminal, and we're going to run npm install, and npm run build. Okay, and now I should be ready to go ahead and use forms on the front end, which that's what we need. We need to have a form where we can take in the attendee information. So the other thing I need to do now is generate my Livewire component. So let's do php artisan make:livewire. This is standard Livewire, and we're going to call this the conference signup page.

So let's do php artisan make:livewire. This is standard Livewire, and we're going to call this the conferenceSignupPage. So we'll generate this Livewire component, and then we need to do what we would normally do in a Livewire app. So let's go into our routes file. And remember, this is empty, because we've only been using the panel. But now we're going to add a route. And we're going to get we'll call it conferenceSignup. And we're going to pass in that ConferenceSignupPage class. If you're doing standard Livewire, you're going to have to generate the layout file.

And we're going to pass in that ConferenceSignup class. If you're doing standard Livewire, you're going to have to generate the layout file. But that command we just ran already generated that for us. So we're good. We go into the class here. And we can actually take a look at the signup page. If we just put hello in here, let's go to our browser and make sure this is working. So we're at lerikonf.test/conference-signup. And we can see we have this hello here. So now we should be ready to build.

And we can see we have this hello here. So now we should be ready to build. So of course, you need a real nice flashy marketing page. We're not going to build that in this course, I'm just going to copy something over from Tailwind UI. So I'm going to get rid of all of this and just paste something in. And now that we have this, let's go back to our terminal and just make sure we run build again so that we generate all the Tailwind classes we need. If we go to our browser, and give it a refresh, you can see now we have this really nice landing page.

If we go to our browser, and give it a refresh, you can see now we have this really nice landing page. Obviously, it's not a conference landing page, but that's not the point of this series. So what we want to do now is have this button actually pull out a slide over and allow us to register people for a conference. So to do that, let's go back to the filament docs and take a look. Okay, so when you're using any of these packages outside of the panel, then you can scroll down and you'll see adding a form or actions or something to a Livewire component. So let's go ahead and go in here. And actually, we do need to add a form.

So let's go ahead and go in here. And actually, we do need to add a form. But we also need to add an action because what we want to do is click that button and clicking a button is an action in Filament. So let's actually go up to the actions and scroll down here and see adding an action to a Livewire component. So we've already made our Livewire component, we've done this here. So we have to use these two contracts and traits. So let's do that now. All right, and let's import these classes.

So let's do that now. All right, and let's import these classes. All right, and if we're back in the docs, let me take a look at what else we need to do. We just need to create an action here. And then we need to pass it into the Blade view. And we also need these filament actions modals. So let's go back to our Blade view. And we're going to put it right here after the footer. Let's go back to the class.

And we're going to put it right here after the footer. Let's go back to the class. And let's just create a action. Let's actually copy it from the docs. So we've got this action here, we're just going to copy, we'll paste it in here. Let's import the action class. This is going to be signUp. We're not going to require confirmation. We do want a form here. So let's just add a text input for a name.

We do want a form here. So let's just add a text input for a name. And then on the action here, let's pass in a long closure because I don't like short closures. And we'll just array_push. And then let's take a look at our website and figure out where we want to put this. Okay, we've got this get started button. So I just want to replace this button with my action. So let's go back into our Blade template. Let's find get started, which is right here.

So let's go back into our Blade template. Let's find getStarted, which is right here. And I'm just going to get rid of this entirely. We probably also don't need the live demo thing. And here, we're just going to pass in this signUp action. And we're not going to add the parentheses at the end. Let's go back to the browser, give it a refresh. And so now we have a Filament button. And when I click this, I do get a modal here, I do want the slide over. So let's go back into our signUp page.

And when I click this, I do get a modal here, I do want the slide over. So let's go back into our signUp page. For the action, let's pass in slideOver. So what if someone wants to sign up their entire team for the conference instead of just themselves, I want this form to be able to sign up one person or as many as you want, and just have one form that can be repeated over and over again to get as many attendees as we need. So Filament provides that for us. It's called a repeater. Let's go ahead and make a repeater.

It's called a repeater. Let's go ahead and make a repeater. We're going to call this attendee. And of course, we're going to pass in a schema here. Now let's do what we usually do, which is put the schema on the model itself. And I will just do this really quickly. So all we're capturing for attendees for user input is a name and an email. So we go back to our conference sign up, and in the schema here, we will just pass in attendee::getForm. So we don't need this name anymore.

get form. So we don't need this name anymore. Let's call this attendees. And let's go ahead and take a look at the browser and see what we have. So give it a quick refresh. And when I click sign up, I've got attendees here. And you can see this repeater, I can have Kevin, and I can also add another attendee. So I can do Jeffrey. And when I click submit, we open up Ray. And we can see we get this array of attendees.

And when I click submit, we open up Ray. And we can see we get this array of attendees. And we have both of them here with Kevin and Jeffrey. So now we just need to take this data and implement it to create the attendee record in our database. Okay, as we implement this, the first thing we need to do is actually migrate our database. So we'll migrate fresh seed here. And now let's actually take a look at the migration for the create_attendees_table, we have the name and email, which we're getting from the User, we're going to set what the ticketCost is, how they paid, obviously, you would implement that in your app, we're

we have the name and email, which we're getting from the User, we're going to set what the ticket cost is, how they paid, obviously, you would implement that in your app, we're just going to pretend when you sign up, you've already paid, and we need to know what conference they're actually going to be attending. So in order to do that, let's go back to our sign up page. Let's add because this is just standard Livewire. So let's do some Livewire stuff, we have a public function mount. Let's have a public property for our conferenceId. Let's also have a public property for the price. Let's set that to $500 and cents.

Let's also have a public property for the price. Let's set that to $500 and cents. And then on the mount method, you might be passing in the conference ID right here in mount, we're just going to hard code it, but this is you would just do it like this. Again, you would probably want to go into your web.php and pass in, you know, like a conference here or something like that. And maybe store the price of a ticket on the Conference model itself. But we're not going to do that. We're just trying to work on Filament here. But those are all refactors you can do for yourself.

We're just trying to work on Filament here. But those are all refactors you can do for yourself. So now when the signup comes through, we just need to take all this data, we'll just collect it. And then for each of them, we're going to create an Attendee model. We have the conferenceId, we also need the ticketCost, the name and the email. And again, you would implement this yourself. But let's just say isPaid is always going to be set to true. Let's go to the browser. And let's try again.

Let's go to the browser. And let's try again. Let's see if we can make this work. All right, and when I hit submit, we can go to our database, refresh and you can see we have our attendees added. So we've got the basic functionality working. Let's do a few more things just to make sure it's a little more functional. A couple things when I do do the signup. First, this is probably too big. Why don't we put each of these on one line?

First, this is probably too big. Why don't we put each of these on one line? Let's also give the User an indication of how much they're going to actually pay. So we can show them if you've got four attendees, it'll be $2,000. And then lastly, let's send them a notification after they've submitted it that it was successful. So the attendees is pretty simple. We'll go to the form. We'll just put this in a group. We'll make this with two columns and then put our schema in here. Now, if we go back to this and we have the repeater here, why don't we put something

We'll make this with two columns and then put our schema in here. Now, if we go back to this and we have the repeater here, why don't we put something right at the top and let's use a placeholder. And this is something that we're going to call this the totalPrice. And this is a thing that you can put into a form, but it's not actually a form input. So this will allow us to put some data into the view and do a calculation here without actually changing what is being submitted as part of the form data. So to do this, we pass in the content that we want in the placeholder. And we're going to need a closure here with our get class where we can get the number of items in the repeater.

And we're going to need a closure here with our get class where we can get the number of items in the repeater. Let's ray out getAttendees and we actually want the count of the attendees. And let's just make sure this is working. So as we add attendees, we know how many there are. Let's go to the browser. Let's give it a refresh. When we open it up, we'll see as we add two attendees, we've got two and three and four. And then as we delete them, that works as well. So we've got this totalPrice here.

And then as we delete them, that works as well. So we've got this total price here. We just need to fill it in with the content of the number of attendees times the $500. So that's obviously pretty simple. We will just return the count here times 500. If we go back to the browser, and let's try one more time, you can see the total price is $500, $1,000, $1,500. So if you wanted to style this really pretty, you can do a few things like we can remove the label. We can pass in hiddenLabel and that will hide it.

the label. We can pass in hidden label and that will hide it. And within here, you can also return something like a HTML string. And you can pass in whatever HTML you want here to make it look really fancy. We're not going to do that. So now we have the ability to show the total price. And then the last thing we want to do is send a notification. So because we already implemented the actions and the forms, I think we should have access to notifications as well. So let's just in this after method, which will run after the actions complete, let's

to notifications as well. So let's just in this after method, which will run after the actions complete, let's just call the FilamentNotification class. We'll make one that's a success with the title and some content. This is actually the body. And then the last thing we need to do to make the notifications work is actually add the Livewire component for notifications to the template itself. So if we go to the signup page, and right here at the bottom, we will just do livewire:notifications. Let's just do one more signup and see if it worked.

notifications. Let's just do one more signup and see if it worked. All right, and we'll submit the form. And there we go. So again, Filament is so much more than just the panel builder. Almost all the functionality you get inside the panel builder is available to you in any Livewire component.