Create Custom Pages in Filament PHP - The Easy Way

so hi everyone recently as I was working on one of my projects I just wanted to share like how you can create a custom resume let's say you have different URLs for your website and you want it to be customized and you want like uh I want a view where I can change the contents of my website and then get it live within a second of adding just as an end panel for hour back end parts so in this like we just going to build a custom page with all this inputs okay so let's just started by creating a new lar app L here custom page now don't need a p not P I have no not it as well just wait while our n app is getting installed you can use this uh custom page functionality of filament in many ways like you can create your own custom and I'm going to use let's just use my for now this a testing purpose and yes level is here and if I custom page we are and if I C on code I can have it here now as you can see we have all project over here I will just have to get done with this IP because I what I'm using is a Docker image to my thing basically and I don't have a my SQL binary locally so I'm using a dock container to run my myle commands Okay what I will need I will need the IP so let me quickly fet and I'm just going to paste it over here and I have user host which I'm using currently and of password now just let us hit oh I'm not going to use this ter we will use our item and let's clear this out PHP [Music] Artis Artis my crate to check whether our connection is working or not as you can see right now I don't have a database of name custom pages so it is asking whether you should create a new database or not so of course it should and now when we get back over here and refresh we have our own database called custom page okay and we are good now let's move to vs and we will get started by installing filament first so let me quickly search for PHP go documentation sorry let's get started first of all I will copy this command P it over here and let it install while it's installing let's copy our filament panel install command and hit enter it will ask like what is the panel that I'm starting currently with so I will go with the default admin would you like to show some love I have already did if you haven't please do so that's directory and I think we are good to go but to open it up we will first need to create a admin user Let It Be admin admin atate gmail.com the password be password and of course I'm going to link it browser using her so hard link we are here we going need this one to go to the browser and then do test to open it up so yes we have our fresh installation and if I go to admin and I will have to use this Gmail to login with the password that I created s okay so I have logged in now as you can see I don't have anything at the moment I just have a dashboard and a sweet little toggle between the dark mode and light mode so I'm going to use the light mode for now and have some issue clear and now I'm going to start by creating a custom page so you can go to Pages you can see the command for creating a page okay and let's say I'm creating the same resume page okay hit enter we don't have any resource or something like that we just going to create a single page we good now if I copy this up S when I go to this I have my page but before this we need a database table to save this entry in table so that we can work around with it so first of all what I will do this should be Aran make model pages with migration so let's just the migration first now if you come over here we will need some things like first one will be our type because right now we are creating a resume but that can be of any type sorry for example an about page a work page a portfolio page and many more depending upon what your requirement is so I will mention type you can also Define it as enum if you have some specific types or you can also use thatat is enum in later on in your code so I'm just going to keep it as it is because I'm just going to Showcase you how it for only one page so yeah and then I'm going to use ajacent column so all data yeah all the configuration of our this particular page will be stored in this particular column and nowhere else okay and we will need to associate cre this page to an user because as you saw at the starting I created a user okay and according to that there is a user to log in so all the entities created within this one can be multiple for example you login with other account so that account will have some other informations something like that so okay now I have created the relation so let's move to the page model and over here we will add protected Dollar avable in fillable we have two to three columns first one is user ID as we saw previously in migration and second one is type and third one is what was the it was Data okay so now we have everything in chck now what we'll need is a relation because we Define we will need to mention that relation to use it let's say this page belongs to a user belongs to then Define belongs relation and we mention user model over here sorry I something wrong yeah Sur add it okay so now I didn't return it that's my most common mistake I forgot to return return so yeah and now I'm just going to let me see we have cation we have created our model okay uh now I also need to Define this relation in user model as well so let's go and add Let It Be public function Pages because the user can have a multiple pages so we can say sorry has many the user has P okay and over here we can Define the model for the pages it's not F page I forgot to and here we are and now we are going to run in comma so that we can create clear out all the unnecessary Port set up I have now we are clear so I have a relation now and let's just where I have added relation over here as well and now we have a user who has multiple pages but what we're going to use I'm going to use only an about page okay and to make the word I can what I can do is public con name let the name be about okay and can and is not curious about using strings so I'm just going to use a Conant at time of insertion or whatever I'm going to make so now I have this page called resume and I also have a view okay resource views filament I have a view called resume plate which all always have this block which is basically a I haven't showed you a u right for this page if we move to the browser and refresh we have page we click on it you have a page over here which is basically an extension for our filament component now we are going to start by adding sorry resume page so whatever need to do is first let's that implements has form because we are going to use form and then a trait interact with what was this interact with form okay now we have this two traes in a place so let's first Define a title for this particular page and I will show you how it looks like in a minute if I go to protected oh sorry protected static TR to the title is equals to let's let the title be resum page now if you go over here and hit refresh you will see now the title has changed okay and over here page name has also changed so now okay so we have brows next now what we need is first of all let's define array and that array is basically the data that we are going to use for manipulating interacting and all that stuff okay m a a y dollar data is equals to empty now I have created this now we will also need a user associated with this particular page because we have a relation for the particular user and that will come from the user model and we just going to define the variable so now we're going to start first by mounting our values okay and we're going to mount our values with the view before that just let me quickly grab a glimpse of what so we will also in this page let's let us add the form okay uh let me just copy and paste over here and we will explain it like how this look like okay now we have added a form panel with uh actions puted from that particular component so we will add actions on the component itself and all the form value will be rendered over here okay wait so now first we will start by mounting the value okay and let Mount sorry public M public [Music] function [Music] empty return type is white okay no first of all I will start by mounting the user value first okay now dollar this user equals to we're going to get the filaments authenticated user okay filament get current panel and then we will get thought and user now we have the authentic and take it to the user so we will first need to populate okay uh for the population and for what we initially decided you remember right all the content of my this all the data over here will go to a single column on my database and that will be sorry just let me open it oh I haven't migrated my database yet sorry PHP is m step boom now we have a database now you see the column data over here all our page configurations will be in this particular column okay for example all this data will be in this column data so let's just first of all we will filter out if there is any record okay because we have a single page and there will be a value once we update it okay so we just going to check we're going to call the pages relation over here and we will add a way to it uh let's put the property okay I let because as you remember we mentioned like we will have a type of about okay and once this about is added every time my user hits save this particular column will be updated this particular row sorry will be updated okay resume here we will add where type is page about out okay and let's get the first record of this type of this particular user now if there is a value then we will Mount our form with this particular value okay sorry F and we will fill it with the Val okay and for this I forgot to do main thing like in know page we will also add a cast because as you remember this column is particular just in column and we are going to use and pass out array so we will add a protected over here let's let's say see C and we add data as AR right okay now let's move to resume page and we will get I got there is and pass the data so far so good and now our data is mounted if there is any okay and then we will start by now this part is done now we will add form public function form it will have a form variable and form type and we will return a form as well so now if I do this and let's return not like this I have a form variable right so let's WR the form variable and will add schema to it boom now we have a form variable so let's move the UI and decide what are the columns that you need first I have an education section uh let's search for a repeater form Builder repeater we have a simple let top okay we have a simple repeat over okay we just going to copy this one and I will p over here okay H save and move the browser and refresh the page we have some error oh we haven't mentioned any action yet and we have added that action in The View if I comment this part out and refresh my page again now we have our repeater now I miss this part this all should be commented for now as we are not adding any actions at the moment so you can see we have the repeaters right now so first of all what we will need okay what I need is a date of starting a date of ending course and Institute okay let's move to the resume page over here I will change this one to copy and I'm going to paste it over here ucation and ucation has a date picker date picker we will have date of joining let's turn the native to false okay if you are familiar with filament you already know what that means give you a night nice view in your pH right enter now you see this nice form with the current as now I have date of joining I will need a date of just let's name it living okay let's be same because yeah education should have dat of living maybe if youing the moment but in some cases this might not be the requir because they might be puring that at the moment so let's leave it un required for now and now our third column is coast and which course were you or are you taking so text input make Co I should make it required and we have third one as well it is issued from where you did that course now let's go to the view and hit refresh now I haven't added this education as required it should be because we trying to add a resume so resume should have your education mentioned oh sorry i m Qui and if I hit refresh you will see uh red as sign on the top which says that this is required now we have a date of joining which is required date of living which is not we have a c input where we can add IID PhD or something from ABC Institute now I can add multiple let's see I think there is some issue let let me check inspect real quick talk to the bottom console application page. resume cannot be okay it's saying data of living cannot be then why did you display it at that moment it should have the strange and now this is even stranger okay oh I remember now I think it's because of the properties that I have mounted over here if I oh I forgot to add the state path uh that's the mistake State path the variable name was data now let's hit refresh add one I move it over here and add course as PhD from ABC Institute and add okay now this working sorry now as you can see I have added an education similarly we can add the and oh yeah there is one more thing a repeater has basically a very good UI if you want to use it that is collapsed and what does that mean uh for example if you have added a value you can always see a column like this but right now if you have a collapsed column you don't know what this education represents okay and to fix this issue I have a solution where you can add and see like as you can see over here if I Collapse this one you can always see what was the education and from where I did it and all other okay so what we can do is we going add an item label over here which will basically be a concat of our this the import that was missing and now if I hit Refresh on this particular page let's just see oh right now it's showing an empty which I should have fixed it let's leave it as it is right now and go to 31st add a course called PhD and from ABC Institute if I as you can see now it shows I did PhD from this institute I was think same is the case with this as well you can add course over here let's just see added ABC course from XYZ University and I add another one and I collaps it now you see I have all my values listed on a title I don't have to open it uh to view I can just see over here and get a sense like what exactly it is okay and yeah pretty much that it is what it is now the major thing that is our action now we as you saw I commented this section out so it what does it call it calls a get form action method from my filament component now if I move over here hit public function and let's just copy the form action function from here and paste it here this return type will be an array it will throw like it will return array of actions okay let's just type return and pass empty array I'm just going to copy the default action of filament the save action default of filament okay now we have a submit method called save so let's make this method as well so that we can get a sense public function function's name is save because on submit this very method will be called and it won't return anything it will just do its thing and return a notification and for this we are going to use our F certification so I'm just going to copy the success notification and paste over here and I will also import the notification we have form action now if I go to this page and hit refresh now I have a save change let me just add a single value from ABC XY Z if I hit save you can see I have message saying saved and if I now come back again this this particular page I don't have my values yet what could be the reason let me just go and see if my values are populated in database yet or not okay so they are not I forgot something P it is what it is is correct it is mod page let me see what oh correct I just added the save but I haven't save the values yet sorry my mistake now let's just save the values well so I'm just going to use our try cach block I won't be using the throwable I will use the halt which the form exception is and we will just return and we will not perform any type of action or you can also send out the notification you want to throw a notification okay this was the error or that was the error okay now let's just get the form State first of all because now as the values have changed before hitting this form we should get its state first be get State now with get State we get the value of the form now what we can do I can use the same user key let's just do this this user pages and I will use update and create which will simplify my code pretty much because I have a condition on which I want to update something so upd and create is pretty much for that only so my condition is that the type should be mod page model page about and I forgot comma is there now I want to update the data with the data and cool so I think now we are good let's just H refresh add some values AB we see XY Z it's save and now if I come back to again I have a value populated if I expand it here it is and if I go to my database and hit refresh you can see I have a column with particularly this values I will just showcase to you Json format I just p over here you can see I have added an education with this I think I forgot to form has a capital value that's the issue for man so that's why the key is in capital otherwise the key should have been in small so this is how the value will show up now you can use the resource manager or whatever you want to get this value on a front end or you can also make apis which can be used on different front end Technologies such as react next CH or anywhere else so thank you for watching

Channel: Thakur Coder

Views: 1,648

Keywords: #filamentphp, laravel, #tutorial, #programming, #we development, #php, #custompages, #adminpanel, #laravel

Id: iFoVoa4l95U

Length: 35min 20sec (2120 seconds)

Published: Thu Mar 14 2024