How to Make Admin Panel Easily in Laravel Using Voyager | Voyager Admin Panel

hello everyone this is Yamin and in this tutorial I'm going to show you how you can create a ending panel in lar really easily using a package called Boer so this is the admin panel that we are going to create in this tutorial and I'll show you everything step by step so in this admin panel you will get everything to make a crew like edit update delete or you can even make a relationship everything easily using a tool called menu Builder over here you can see you can create a database and every other menu from the adding panel without any coding so I'll show you everything step by step from the very beginning so let's get started first of all I'll go and create a face larel project so let's just open a command promp over here and let's go and create a LEL project so we say here L new let our project name will be Lara Voyager just lot of Voyager and let's just press enter so it will just create best lavable project for us so here you can see that the project creation is complete so let's go to the project directory let say as CD lore Voyager Reser and L the project PHP Artis serve so right now let's go back to our browser and let's just say this over here press enter so here you can see the self restated n both so right now we are going to install the package p in our L project so for this uh here you can see this is the G opening in order to installer in our Lan project so I'll get this link in the description just check it out and here if you just go down uh here it Voyer the missing L admin panel then let me just go down and over here you can go to the for documentation but we just go down and here you can see uh this is the command we need to write in order to install verer in our larable project so right now if your larable version is 8 or n then you can just run this command but if your larable version is 607 then just go to this link but if your larel version is 10 which is the current version then you need to run this command so this command and this command is basically the same but uh here you can see de 1.6 LEL version 10 because uh they are still developing the forer bag for the larable version 10 so if your larable version is 10 then use this command okay so since my larable version is 10 so I'm going to use this command but if your lar version is eight or nine then use this command okay so I'm going to copy this command since my larable version is 10 so I'll copy this command then we'll go to our uh projector so let me just go to the project directory and my project does this one Lara voer so so let's go inside and let's just open another command from here let zo in and here we're going to paste the command which is composer record TCG sler DF 1.6 L 10 and press enter so it will download the require file for the Voyer package so it may take like 2 minutes to install and there you guys it is done so after this command we need to set up our database uh so right now let me just open using suine text uh let me just click file then open folder the project fam was lore Boer this one so in the project we just directly go to thein file and here you can see by default the database name is lers so we'll just copy it and we'll go to our Zam past my admin and we create dat over here so here we click new then give the database name which is lore Voyager then click create and there you can see a table is created so after this it is saying us that we need to update the website URL which is app URL so what you need to do is that we'll just copy this call C and we'll go to our again. file and here it can see app URL so we'll remove this and paste over here and then you can see a slash over here make sure to remove the Slash otherwise the image on show okay do not keep any slash at the end then save this and after that what we need to do is that we need to run this command PSP artian viser install so let me copy this go to the command prompt again and paste the command then press enter and there you can see it created some T in our project and it also linked our public folder with the storage folder and also if you go to the vendor TCG Voyer publishable config you will see boyer. PHP okay so we are done with the command and here if you run this command it will also create some Dam data in the database table okay so this command created some table uh in the database so let me just show you right now if I now just refresh our here uh let me just go to the database marer and there you can see it created some table over here automatically so right now what we need to do is that we need to create a admin user for him or her to login and right now if you go down here you get see a command P ster admin your email.com create so it will create a admin user so right now let me just copy this command crl C then go back to the command prompt again paste the command and it here you can see that the user will be admin and here let me just change the email address let's say email address will be admin at the of gmail.com then press enter and also press enter it will ask for a admin name say let's say the name will be admin then it will ask for a password let's give the password on 2 3 4 5 6 7 8 then press enter then you need to confirm your password we'll write again 1 2 3 4 5 6 7 8 add enter and there you can see admin is created so right now uh in order to go to the admin dashboard what we need to do is that we need to give slash admin over here so if I now just keep slash admin then press enter there you can see it is asking us to login so here we're going to say admin at of gmail.com and give the password all 2 3 4 5 6 7 8 then click login so this is the admin dashboard you see and right now if you click user there get the user admin gmail.com and if I click roles you can add a user and give him a specific access to the admin panel and right now I going to show you the most important thing and that is the tools part so uh we will click tools and there you can see data solution so F you can create your own database without any coding so now just click database and here you can see create new table if we click over here and create new table then here you get a table name we give a table name let our table name will be product uh let's keep the P smaller and create model for this we click this on and here we need to add our database table column so we'll click over here add new column and let's say it will be uh title let's say title will be be further this all further and let's just here 256 again let's here description for description type will be let's say the same thing you can add long text or whatever you prefer let's just say it stay in power and then add on one column this one for let's say image our phot image let's again choose just par again and let's here 256 if you want you can make it noral whatever you prefer and here you can see add time stamps so if you now click over here you can see it created Created ad and uped AD and on the below right corner you will see create new table so right now if you now click over here create new table it's loading and you will see ER L this exception the world col option is not supported because uh if you're using larel 6 7 8 or 9 you will not get this error but uh if you're using larel 10 you will see this error because Voyager for LEL 10 is still in develop so this is a bug that they did not fix but uh there a way to fix this bug and which I just found over here if you're facing this eror then what you need to do is that really simple uh you just need through CH a little bit of code in the verer so for what you have to do is that uh you need to go to the pendor DPL Source schema and column. PHP to this specific file location so let us just change it so let me just go to the code and here you can see the fendor folder click Fender then uh this on top rine and after top rine you need to go to DB B and after DBL you need to go to okay let me just check you need to go to uh source and I'll also give this link in the description uh so don't worry I'll give this link uh so that you can just copy the good from here directly easy so after DBL we need to go to Source schema and then column. PHP so we'll go to over here drine DBL Source then schema over here here schema and inside schema we should have f. PHP this one and here we need to code down and we need to find a function uh which is called set options okay let me just copy this and search it over here crl f contrl v uh we did uh this one so you'll find this code at line 83 at around at line 83 so whatever code we have uh in this function we'll just remove it okay we'll just remove it then go back to our browser so we'll remove this and we'll just copy this code from here crl C and then uh we'll just paste it over here contrl p and save it so once you save it uh you will not get any eror over here so right now let's just click create new table again and there you go it is created and here is the product table on here and here you can see add this brand to the table so we'll click about here and here uh you can see model named so in larabel 8 9 or 10 the model list in the model folder so after this in the model name we need to add models back SL product like this and rest of them can stay the same but uh let's just say the order of colum will be title and description over here description and it will be let say descending uh you can add pagination but we keep it like this and one more thing that we need to do is that we need to run one more command uh in order to create the product model it do not uh create a model for product by default so here we are going to say PHP Artis make model it will be product and that's all so after creating the model uh what one more thing you should do is uh we'll go to our project again and we'll go to app then models then product of PHP and over here we're going to say public dollar table equal to two sing verion which our here product so sometime if you do write this code you may face some issue so we just write this code over here and after this here you can see title description image so what you should do is that uh you can add any new validation rule over here in the options details for Titan description and the image and there you can see uh that there's a few more option over here for that you want to let the user delete the title description or image so for title let's say it will be text that's fine and for description we want a let's say text area and for image we want the image field so here you can see image option and let me just show you the validation rule so in order to get the validation rule uh you can just go to the V dos. doo.com I'll also give this link in the description and here you will find the validation rule some over here you can also just take a search it over here let's over here Voyager validation and click over here and if you go down uh there can see the validation rules over here so let me just copy one of them contrl C and let's go to our project over here and let's remove the second bracket paste the code so here you can see the max number of input will be over here for title it will be 12 and for description let's make it uh 1200 and for image let's just make it record like this so after this uh here you can even add a relationship but we'll keep it like this and we'll now click on subing button and there you can see the bid is created and we have the portal obra here if you click on product there you can see uh there's no dat available and here you get the add new Option add new product if you click on add new there you can see title a description text area field and a image field so let's say what here uh product one let's say this is product let me just copy it and paste it multiple times like this and let's choose a image from here let's choose this image click open and click save and there is the pagi store over here there edit delete and view option if I click view it will show us like this and if I click edit we'll be able to edit the product we can add a few more extra field over here and there you can see it is done and over here if you want to add a icon before the product then what you can do is that go to inside the tools then click menu builder then over here you can see admin and Builder option if you want click on the Builder you can see the product so just click over here edit and here you can see Boer font class the menu item use Boer font class so if you now click on this it will open in another Tab and from here you can choose any icon so let me just choose this icon so copy it and we'll just paste it over here and then click update and there you can see the icon before the product if you do not see any icon just refresh the page and let's say you the uh product over here just after the media then what you can do is that over here you can just drag the product from here to here like this and then just refresh the page and there you can see product is now after the Le option so this is how you can use your voer admin panel you can do a lot of things really easy using this admin panel and in the future I may uh make a complete tutorial for voer admin panel but there are a lot of admin ban package for lin that you can try uh which you probably see on the screen you can try them out check them out whether you like it or not so thank you very much for watching if you have any question let me know in the comment SE and make sure to subscribe I really appreciate that and I hope to see you in the future tutorials

Channel: Web Tech Knowledge

Views: 4,372

Keywords: laravel admin panel, voyager admin panel, voyager, laravel voyager, voyager admin dashboard, laravel admin, laravel admin panel theme, install laravel admin panel, voyager admin panel laravel, voyager admin panel in laravel, admin panel in laravel, laravel voyger admin panel, admin, how to create admin panel, voyager laravel, create admin panel laravel, admin panel, how to make admin panel in laravel, how to install laravel admin panel, admin panel laravel

Id: t2PItYtjS04

Length: 17min 34sec (1054 seconds)

Published: Wed Nov 08 2023