Build Robust Laravel Admin Panel | CRUD | Thumbnail | Text Editor | Export | Filtering Operations

so [Music] [Music] foreign [Music] [Music] [Music] [Music] [Music] everyone assalamualaikum well in this tutorial we'll learn how to build a robust variable admin panel or laravel backend panel okay i will build this panel based on this package laravel admin and it's very powerful tool and we'll install it using composer and here's some basic introduction as you can see it's been downloaded 1.3 million times so and once you install and customize it a little bit then you'll see that it looks like this of course you have to have your database record uh you can do much more than this and i'll guide you through how to do that okay now first over here you can have all this guide how to start how to customize it based on your own meetings pretty much there but i have summarized uh the installation and other related useful um how to say functions so so that it it's easy for you guys to get a start with okay anyway so first we'll come here and install laravel package itself and then we'll install the laravel admin package which is this one as you can see over here right so we'll come to our terminal over here uh so i already have a folder and i will enter into it and i'll call it cd.bslma and over here i'll install my laravel package so i'm on server right now you can do it on your local host the basic installation of laravel is the same so you can do it on your way okay now here i'll create a laravel folder and i'm using composer so i'll hit yes so it'll download the laravel from the server it might take a couple of minutes based on your internet speed and things like that but anyway it's already downloading over here well the installation has been done so i'll go to this project folder which is over here and it's the laravel folder as you can see this is the main folder project folder and within it i have this laravel and over here i'll open it up and just i'll do basic setups with my database and things like that so i'll hear i'll do this on my own okay so you should do this as well on your own so based on your database name and username and password whatever it is okay i'm done with the setup now over here there is another file which is this one okay so over here actually you need to do this command to run your laravel application up and running but i think if you're on localhost you don't need this but i'm on servers so i need them especially i need the this permission but the permission you need anywhere whether it's localhost or on server okay so here i'll start over here and i'll hit this command folder which is laravel this one now i'll run this command and it did it next i'll run this command over here some of them are not really necessary but okay now we'll run this one and before we run that make sure that you have your database installed and your enb file has been configured with database name and password others will get error now i'll run this and it will migrate the tables for me and i'll hit this command over here for storage file where we'll upload our images and other files and i think we can dump our composer we don't need this thing for now okay yes well you can do it even later it doesn't matter now i think this might be also important as well so let's go ahead and do it uh these are not that important for now so we can skip that but if we have permission error you can go ahead and do it all right now after this i think uh we'll be able to access our front end so this is the front end that came with default level application anyway so now what we'll do we'll come over here so variable installation has been done and if you're on localhost you need to do this one all right by the way because i'm on server so you still need to configure your virtual host file if you are on dedicated server on shared server you don't need to do anything like this but on localhost you need to have this one you need to run this command okay all right and here i have this one like where it says that you can go ahead and look up this uh domain which is actually over here installation guide okay so this one is pretty much over here so they're same thing i just listed them over here so all things are together anyway so now we'll go ahead and install laravel admin package okay so i'll i'll install it and once again it's asking if you are running it as uh root or not using composer okay so it'd be done very soon okay well now we need to publish our application and we'll use this one to publish it and all the resources are in vendor folder a lot of them actually not all of them not all of them okay so now it's been published and after that actually uh we'll go ahead and install this package okay actual installation actually it's got the file but it didn't do installation and now with this command it will do installation okay and basically pretty much it migrated a lot of um what is it uh let's see it's not really migration though um it installed a lot of files so we'll we'll take a look at them soon okay now at the same time it says that if you go over here and if you're on localhost you'd be able to access the backend so you need to use slash admin your domain name slash admin or localhost slash admin so that's what we'll do now so you do admin and also beautiful simple uh login page okay now over here it says that you can access it using admin admin password and username uh i also mentioned it over here okay anyway so now we do admin okay so i think the password was wrong i'll type it again admin okay now it worked so this is the um so this is the default laravel admin package backend okay now we can cross them but it also i mean delete them but it also tells you your environment and extensions available that you can use a lot of them are very useful like here you can use this one for api tester media manager scheduling reporting very powerful pretty powerful this extensions and i use a lot of them in my development and some dependencies okay so a lot of time we'll work with this one over here okay all right anyway so we can close them okay so here is this menu and we also have here um like menus and users so this is the uh admin user you can add actually more user over here but we'll take care of this uh problem later okay soon we'll take care of that but don't worry about that one so over here you can view all the users you can add users so this is super user so once you edit it you can submit information okay so right now our backend password was admin and username was that mean so definitely would be able to solve them or change them over here as you can see and you can set up permissions for your users okay so you can have multiple admin and you can give them permission from here okay all right so permission routes are here and here for your menu buttons okay so you can close it over here so these two buttons are coming from here okay so as you can see this one relates to this dashboard okay and this one relates to over here okay so we have a lot of buttons over here anyway so we would be able to create new buttons and hook them here and that would be pretty simple for us pretty easy we'll go through them so this is the basic tour of this back end panel so now here let's look at some config files so if you come over here if you come over here uh so this is where i have installed my laravel admin package and laravel as well so now this is the default one which comes in larval installation but if we open it up we'll see an admin folder that came because we installed this one over here from this one okay so now within it you will have this controller package controller folder within controller folders you will have a lot of controllers that you can or you might need to use for your back-end so whatever the controllers we create they would be over here and uh so this is the home controller all right just now you saw the home controller the related resources like for example so over here okay so these are coming from pretty much home controller okay and uh the home co our back end routes are over here okay controllers routes file over here so backend home resources route is this one okay all right so now uh we'll we'll take a look at this config file over here which is this one admin okay so this is for our larval admin package so you can go over go through it and check it out so some of the configuration will change soon and i'll walk you through step by step okay remember this is for configuration file okay you can config the way you want and our extension should go here we'll have an extension in this tutorial we'll install a text editor so it will come over here and next we'll have this file system which is pretty important over here we'll also modify this desk for our um admin panel okay and because of that one actually just now with a little bit of error like when you came here and you wanted to uh configure this one it asks you that configure this one so otherwise you will have errors okay we'll we'll fix them very soon anyway so now if we come over here so i already talked to you told you this uh basic uh admin file structure how it works so once again whatever controller you create for your um project they'll be all here for back end and whatever the models you create they would be all here but again this is a general place for laravel uh default installation all the models are here as well and for admin the models would be here as well okay not much change only big changes over here all right now it's time to customize our back end like we saw in the demo for that one actually we need to create first two models okay because we'll create article and article posting article editing article crowd operations all these things you can think of so we need to create two models one is for article so that's for showing the article the other is article type or category okay so we'll go ahead and create two articles right now to article models actually okay so over here i'll come over here i'll do clear and hit this and it will generate a model for us and we'll do the same over here for article type so we'll create article type model once the models are here there they'll be generated over here in models folder so in this case over here but i need to refresh it now if i open it up if you see the model so we have two models over here okay all right so i'll close them we don't need this we also didn't need this we need this this but we'll open them later for now i'll keep this to open okay all right so the models are there now we need to create two uh controllers for them one for article another is for article type for article we'll call it article controller that there's article type controller so go ahead and simply copy paste this one will hit enter and it will create one controller and over here now as you see it says that it asks you to add the following uh line to the routes okay so we created two controllers one is article controller and there's article type controller sorry for the noise though anyway so we'll copy this one and over here we'll find our routes file and we'll paste them okay so let's find the other one the second one okay now we'll save them so one thing i want to highlight though that if you want to create uh controllers for your backend which should be saved over here within this folder as you see we already have this too all right this two we just created so any kind of controller that you want to create for your backend so the rule should be admin make and then your controller name so using this one it'll create controllers within admin folder okay within admin controllers folder at the same time you should also mention your model name okay and model path so this is the model path as well as the model name so make sure you have the correct format otherwise you'll get error so whatever your controller create for your backend should follow this pattern okay once again it's coming from here okay everything is here you can go over this file okay but all i did i put them all in one file so that you don't need to move around okay so that's what we did anyway so we have this two controllers right here and so once again go ahead and take a look so article controller this is this default file an article type controller okay all right and in both of the files we have this method called grid detail and form grid is for showing the record from the database detail is for you click on one of the records and view it and the form is for creating new record and submitting as you see it automatically bind the model over here do remember article is the model over here article type is the model for article type so in both cases it auto generated the controllers and also imported the model and tagged the model name inside the method so this three method would be super important for our backend the same goes over here okay all right now if we come to our back end anyway we'll take care of that later don't worry now uh what i want to do i want to go to dashboard and i want to do refresh okay now here as i said early or maybe i didn't every time you create a resource like this controller resource using models for your backend you can create menus using them once you create the menus they would show up here okay yeah so that's what we can do so every time you create resources using this command and also at the same time you generated models you can bind them here so we have to bind them and that's pretty easy what i will do i'll come over here okay now here we can create a new menu which should be attached here okay all right do remember once again so this is a resource and this is the resource as well so this one bound to this controller and article types bound to this one anyway and once again this is also the route name okay resource and route all right so we'll come over here now here first i will create title for our menu i'll call it rt call and now over here i can attach a menu a menu icon okay so i'll call it let's see our t we don't have article so let's search for menu so i'll call it from book okay uh well it doesn't have all these icons but in future we'll say how to import more icons okay all right so that's one uh let's go with note so go ahead with note all right this one now here you need to mention your uh route name so for the first one for this one route name is articles so we'll copy this one and just put it right there okay and at the same time you also need a slash okay i think i would come over here and put it here and for now we'll give them all this operation permission using this it will be able to access and do everything for this menu okay so i'll refresh it okay now i submitted it but it didn't show up over here it is supposed to show up you can do a refresh and as you can see it's over here now of course we need more things we need also create migration files and which will do very soon okay so that's why we have this error okay and we'll do the last menu resources over here this one for this route i'll copy uh we'll come over here this one and i'll come to the menu over here now i'll paste this one and over here i'll just say category okay and give them all these permissions now over here i'll create look for another icon which is notes wow maybe okay i'll go ahead with this one all right and i'll create this and now you refresh it you'll see another menu okay like that okay but of course we still have this error because we do have the models for them but we don't have any database tables okay as you can see it's looking for a database table but it couldn't find it and for articles it's looking for articles table that's because we didn't create the migration and migration files so now we'll come over here before we go ahead and create migration files first take a look at our structure that what we want in our migration files for articles we want an id type id which is category id subtitle description thumbnail when it released and the created updated timestamps and we want for article type article categories we want id title parent id created and updated and what is parent id i will tell you soon once again one another thing though so this type id is this article types id okay so we'll save it over here in this table so there would be a relationship okay allocant relationship we'll do that later okay uh so now first we'll go ahead and run this command and it will help us to create two migration files okay that's what i'll do it already created one and now over here we'll create migration files for our article types or article category okay all right it did now if we come over here and we'll see that in our database file over here in migration we have this too all right okay so for now i'll close them so that we know what's happening so so this is the articles okay and this is the article type which is category now we saw earlier that this is what we want okay id type id title subtitle description thumbnail for thumbnail we'll store the image path in the database anyway so now for id and time steps they're this one and this two so we need to deal with the last six the rest six okay so here we do table and here we do string and the title so this is the article title and here string article subtitle okay all right and this could be nullable so this could be well this is not nullable but this is nullable okay all right and we will have top type id which is category id so that would be say integer integer and here we go type id all right and over here we'll also have a description which should be text and we'll call it this encryption and the description could be knowledgeable and we'll have our thumbnail but the thumbnail will just save the text or the image path okay so that would be string and now here we'll call it just simply thumbnail and this could be number so we might upload the thumbnail we might not okay all right and the last one whether you want to publish it okay so i'll call it'll be string type and i'll call it released okay and the default value is okay it should be integer type in or tiny in integer okay and the default value is zero okay all right so we are done with this six other six field okay now i will save them and over here this is our category type or article type so here we'll create a field which is string type and i'll call it title okay and over here we'll have another integer integer and we'll call it parent id i'll explain what is parent id soon now we'll have another one for and this is also integer and we'll call it order okay so once i'm done with this uh creating the backend menus i'll show you what is what are these things okay and what is parent id anyway i'll go ahead and save them so we created this migration file and we filled up the columns name with their type make sure they are correct thumbnail nullable integer yes okay so now we'll come over here we already did this part right so we'll just simply go ahead and run php audition migrate okay so it migrated these four tables okay all right and created four tables in the database so now if we come to our database over here we'll see we have this article table and it is this field over here and for article types we have these things okay as we expected now we'll come over here now we'll refresh them perfect so this is for articles right and we already have this default buttons over here and for category it's the same thing so it also has this title okay now these titles are coming from okay let me close them we don't need them anymore now they're coming from over here so you can change it so instead of article type you can also call it category it doesn't matter but now if you come over here refresh that come over here you see there is a change so that's what i like about it you don't need to write any html css or js things it's all php pure php php 7.4 and actually all the latest php it supports anyway so now uh well so these are the things that we already saw and i told you so we can skip that now okay all right so we already did this part we already have this one okay so one thing i want to do i want to create a main menu and under main menu i want to have article in article category okay so for this one i'll come over here and create a main menu and i'll call it my articles okay and now over here i'll just simply do this one okay and for this one there is no route so it will fall back to the default route okay and for now we'll give them all these permissions okay so now you refresh it it is there now i want this two to be below this okay and we can change this easily how to do that so first i'll come over here category sorry i'll cover here this menu option now here you see article type article category this one so i can change it so i want it to be under this one okay all you need to do is submit perfect okay now that's one way to do for this one we can do other way you can just simply drag them okay it's beautiful isn't it and convenient or you could do it from here as well but if you dragged it then you need to save it okay it already saved let's do a refresh you see it's gone now it's below this category okay yeah you can open it up and you'd be able to see that beautiful isn't it and convenient so this dragon drop thing and i love about it okay you can arrange whatever the way you want okay speaking of this one first we'll go ahead and create our article types okay and then we'll see we can change the article types their order using drag and drop okay first thing first so now over here we have this article type controller and as i said that this methods like this grid uh let me show you so this category okay this grid this grid is showing this category of course there's nothing because we didn't create any type all right of course you're going to go ahead and click on this nothing will happen though because we don't have anything to create the first we need to create a category so we need to create a form so as i said earlier so this is the form okay you use this one to create forms okay and submit it all right speaking of this one so as you see form constructor takes a model so our model is article type using this one will create our categories or types okay all right so the first thing we want to do over here okay so now form takes article time saying that one this article type is a model model has filled our fields are remember our fields are over here title parentary order so we can access them we can access them using this form object remember form object is created both from form and which takes article type so we can access these fields okay using this form object so we do that one now here whenever you access them for example i want to access this title and the title type is over here text type or string type right now for laravel backend any kind of string or text you need to access them using text okay now what's the field in it folder name is title which is uh which is this one okay all right so this is our title now what i can do i can just save it over here okay now i'll go ahead and refresh it and i'll try to create a new one do remember when you hit on this button create this form method gets called okay so i'll click over here create as you see it's there all right yeah that's it it's so simple you created your first form without writing any single html css beautifully isn't it okay well in fact you can go ahead and try to submit the button okay and you can do it you can submit it but we'll have none of uh uh fillable issues so we need other fields as well okay all right so that's the title or category name okay all right and over here what we could do we could also show our order okay so order was a number integer okay so if you come over here and take a look we talked about it so um well i think i'm missing one of the other field over here order which i have over here order okay anyway so order is integer so any kind of integer in larval back end is you can access using number this method okay and just to write here order okay now let's go ahead and save it and come over here refresh it the order is here okay yeah so let's see if we can attach a default value default is zero okay now once again come over here and create a new one the default value is zero all right okay perfect now of course we want to create uh something create more like uh this one let me show you now actually what we are trying to do over here we want to create something more like this where you'll be able to select your categories and say select and save that's what we want to do pretty much like that okay that's what we want to do okay yeah now here title is required required okay so you must have title so once you call this function so you come over here try to create a new one you'll see the star sign which is required okay once again you're trying to build something like this okay so you want to select options we need to create options that's what we'll do now so over here we'll come over here now one thing well i think i want to do it here we would do form okay now here i'll call select so select is a method okay and it also selects from database as well okay it takes all the information all the title from article type and show it over here okay so that's what it does now related to this one you know database for select which is a parent id okay so we want to submit to our parent id the column name is parent id so that's what we'll do here we'll write here parent id okay now over here we can also take a name we can call it okay for now we'll not do that i'll show you something interesting okay now over here i would do options now this method is coming from form select method okay so it's within a larable admin package all right now over here so it takes a model okay so our model is article type okay and then based on whatever in our article type whatever the items there will show them as an options okay so here we do select options okay and that's that now come over here save it come over here now come to our article category and try to create a new one here click on this and we'll have an error now this error because well we want to access this function but we didn't import the file for this function okay so well to do that you can come over here and take a look so here this is our article type model and if you take a look at the default one which generated automatically so this is the default uh situation but if we want to be able to show the options okay like drop down menu we need to import uh some of this files and the libraries so two of them are which i guess this one use model three okay so we need to import that one over here you need to tell it that we are going to depend on this so this is a dependency and at the same time i think we also need to import this one okay so we'll go ahead and import it now save it so now now we come over here refresh it and try to create one you see now this is the menu we created and this is a drop down menu of course there's only one option which is root which is the parent id all right okay so as i said earlier actually i'm going to explain to you this one later so now this parent id once you choose anything from here whatever including this one it's saved in the parent id this one so in our database the parent id column is this one it's saved there well right now nothing is there so the default one is a root okay once again we have so far built this part without writing any js and cs that's what i love about it okay isn't it interesting okay so now whatever in the database model article type it will show up over here but we there is nothing so default one is zero okay all right now over here i'll create one i'll create call it programming default value for now doesn't really matter i'll go ahead and submit it submit it all right okay now i'll create a new one now as i create a new one as you will see this showing up already this drop down menu okay now here i'll call it uh laravel okay and i want it the parent id should be programming now i'll submit it okay and now i'll go ahead and create a new one okay and this one i'll call it flutter okay now come over here and see them so this is beautiful isn't it okay without writing any js files but anyway so now if we come to this category where we are supposed to see the record but nothing is there right but we can only create so now what we could do we're going to come over here our grid method which is this one as i said earlier it takes uh it it shows you all this record from the database okay so that's what we want to see now here what do we do out just like form so grid takes model and using this one you can access all the values all the columns or fields in your model okay you can do that now here what i would do i'll just simply go ahead and call title okay and over here i'll just uh what else we can do no i'll save it okay now over here you refresh it you see the title is here right okay so this titles are coming from our database which is if you see so this title okay all right now the title is our field name right or the column name over here you can directly call the column name or fill the name okay in fact you can do other things you can call it title capital letter okay save it all right now you come over here and refresh it okay but nothing changed okay you can call it a different name you can just call it name all right come over here refresh it it changes to name in fact there are many other ways to do that so i'll remove that i'll call here column okay and title is our filter name this one and over here you can call it anything you want but we'll call it title okay now if you come to this place over here we're done with installation and you can see model grid basic usage so that's what we see here okay so each of the field from the database you can access either using this column method which we already did or you can directly access them using the field in your database all right so that's what it tells you so just now we did like this if you have a folder name which is user and you can access it like this column like this or like this okay so if you use like this this should be your filter name and this should be whatever the label you want with this okay so that's what we did okay all right so now back over here and so we have the basic understanding how to work over here here here we can do more things so here we do column id and id okay now let's save it now you come over here and you see the article ids okay now we also want to show our parent title or parent category okay all right so these are just the title okay uh well okay so so far so good but now actually what we want to do we're going to do like this as it's so early that we can drag and drop like this okay so that's what we want okay let's save it so we want to create a drag and drop effect again once we'll do that and we'll do that without creating using any js and css okay well to do that in article type controller we need to over we we we don't need this one anymore so we'll comment it out okay all right so we need to override a method over here which is called index method okay so that's what we'll do so here we do public function index okay now the default will overwrite the default index method okay and it takes an object which is called route binding model and which is the object is or the class is content class and i'll do a lot more using it soon okay now over here we need to create a new variable which we'll call tree and we'll use a new constructor which is called a tree and within it we'll pass our article type okay all right now we are using this class content in this class tree so we need to import them at the top and how do you do that so to import that we'll just simply go ahead and copy this one copy these two and uh here we'll use them okay now with this we'd be able to access the content and the tree class and the purpose is we want to build a tree model like this this is called tree model okay now regarding tree model you can come over here and read more if you want okay there's a tons of information over here okay so you can do and read actually every information is here it depends how you grasp them like i wrote model grid which we saw earlier this method everything is here okay so you can you can go through them step by step and pretty useful anyway so now we are done so we created a tree object using our model okay now we need to return it okay so if we want to return it we need to create use this object which is called content okay and now it has a method called header so we'll set the header over here and we'll call it article glory just like we had earlier over here this one so we are overriding that one and then we need to pass this object for the body okay now here we do three okay now we'll simply just return okay that's it so using this two lines in fact we are able to create this effect so now we'll come over here refresh it now here i'll come to this article now as you see we already have this one okay so we can even do this one and save it now it's saved okay now you see come over here uh come over here this one okay the order changed right like that so now it's flatter now it's laravel in fact we can go back and change it once again so instead of laravel we can do folder and we save it okay now you come over here try to create a new one uh sorry here create a new one new laravel is at the top in fact you can play around this parent as well you will come over here even you can change the parent right now so that's why it's beautiful okay in fact you can take it out of this parent okay you can save it all right now if you come over here try to create a new one you'll see it's different okay but anyway we'll keep the flutter category under programming category so i'll come over here [Music] and save it okay so so far we are done with creating these categories and we have done all of this thing just using this lines and this few lines not even 10 lines of coding okay that's the most beautiful thing about it once again so select is for selecting from your model and they created the options like drop down menu okay hopefully it makes sense now we are done with this thing now what do we want to do we want to head over to our controller over here article controller and for that one we'll have this one but of course we have nothing okay so we'll head over to this one and here we'll have this grid uh form method over here so once again this form method we use for creating forms okay so now here first what do we want with our phone we want our form to have a title title for article okay so simply we'd go over here and we'll do text now here uh we'll call the title which is once again coming from the database the title name or the model field is title and here we'll call it title sorry okay now if we come over here try to refresh you see the title is already here wonderful isn't it so i'll just copy this one put it over here so now here i'll call it subtitle i'll call subtitle and subtitle okay and now here we'll have this another text which is for description and here but let's say you don't put this this label over here and let's see what happens so you save it now you save it over here so you see it generates for you automatically so you can skip this part if you want it doesn't really matter okay or you want to have a customized name using this function so i can call it content okay save it come over here take a look now it become content so this is our text field right okay now you can i think you can do text area because you want to show longer text okay and it says text it doesn't exist so what we'll do we'll head over to this one and [Music] let's see now we'll try to see the form method over here okay basic usage do we have any let's see text area for form so anyway once again all the properties you can access using like this from your database field okay and some of the properties uh you can create on your own okay let's see if we have any text field we do have check box so let's see that looks like we don't have text area so now we'll just stick with the text okay now we can tag few things over here so we do required and subtitle is optional it's not required and description is say required okay all right so this is the front and checking all right okay now you also want to upload an image uh by the way before we go ahead let's save it first now come over here and refresh it it's gone okay now we want to upload a thumbnail image okay and to do that here simply we'll just call i think we can put it right below subtitle so here we do here image okay now image fill in our database is a thumbnail and here i don't think we need this one because the default name is a thumbnail we can use that now beautiful thing about it okay now here it says that configure the file system because if you create an image file or if you want to upload an image so it needs disk space okay so it says go ahead over here and configure this file for your disk because we need to upload image so we need disk so we need to come over here so go ahead config and file systems find this one so we are over here config and file systems okay so here we see we have this one for front and public folder we also need for our back and admin so what we'll do we'll just simply go ahead and copy this one and paste this and instead of public we'll call it admin okay now let's go ahead and save it let's see the result okay yeah now the error has gone in fact now you can upload any image you want to say you want to upload this one all right okay so it's pretty simple and a powerful so using this one you can select an image any image you want okay okay so that's it now we'll we'll see more things okay so here what do we do would go ahead and create a switch statement so over here we do switch and switch this is for uh option like either zero or one more like boolean and you know database we have this field okay now here i'll save it now i'll refresh it so now it created an auto switch statement for you and the default properties labels are on and off but we can overwrite them and which we'll do over here to overwrite that simply we'll first declare array over here and we'll call it states and within it we'll have two fields one is on and for on we want to override the default one so anyway so for on the value is one and the text so here i'll call it publish okay and we also can i think so far so good and now the other one is off so these are the two default values that we have and related bit of information but we can override them that's what we're doing now for off the value is zero and now the text is draft okay now to override that here we need to simply attach this okay we'll call a method called states okay and within it will pass states array that we created all right and it's already our should be gone now let's refresh it now as you see we want you can see it a bit of different way right now okay now we want to i mean the levels are different so here we want we can uh instead of saying released i think we can say it published our publish okay let's go ahead and refresh it okay so it changed all right now let's go ahead and try to submit submit an image or anything uh our article but i think one thing is missing here pretty important so we want to show our category over here article category right so that's what we want to do to do that remember over here earlier we did this thing right so here we can just simply copy this one and put it right there okay now over here we saved the parent id or the article type in the parent id column in our database which was this one but for article we want to save the id in type id okay so over here so this type id would be the id of your columns this id of your article id or sorry for article types this id would be saved here within your type id so this would be the relationship okay so once again over here the columns id which is auto incremented would be saved over here within the type id and for that one we can use the same function we did and instead of parent id because we don't have parent id so we do type id uh of sorry we don't change it here we need to change it over here type id okay let's go ahead and run it okay well now it says that article type not found because this one so we need to do we'll come over here copy this and import the file okay now let's run it one more time okay now over here you see you can see that all right so we'll create our first article we'll create here title we'll call learn laravel okay and over here we'll say oh we'll keep it empty or we can do best php framework i will select an image for laravel and we'll select this one okay and the content type you must master it okay blah blah blah right and let's try to submit it and we might have some errors okay so unknown column description i think we might have a bit of error over here so you're missing t okay let's see what else so everything else is saved automatically you see this and the amazing thing about it so here we'll save it upload the laravel image once again let's submit it and it's submitted amazing isn't it now if you come over here just check it it's there right okay the image files are there and the type id is there description is null uh we don't need to see why the description is not because we we were supposed to submit the description description which is required and it didn't submit it to our database [Music] all right so it doesn't really matter uh we'll take care of this null thing soon but before we go ahead and now here we want to show our options from the database right or the record so here simply would do great now here we do title because we have title and here you do great well subtitle once again all the fills in your in your database field you can access them as a method okay all right and here we do great options grid descriptions okay once again let's save it and see what's happening here so we have title we have subtitle and we have description but now description is empty okay we don't know why all right well there is also this image issue that will take care of it very soon now let's see try to type it once again learn laravel now okay let's submit it okay so it looks like it's working now it didn't work in the first attempt okay so try to create a new one and this time we'll call it say flutter and flutter google okay subtitle you [Music] and we'll select an image for flutter which is this one and over here the content is best mobile framework okay now here we submitted it looks like it's working now okay so now there's another issue so once you try to edit it the image is not there but before i go ahead see the beautiful thing you can delete them you can see them you can edit them all without doing any kind of jscs and html okay now here if you try to add it you see the image name is not there okay for the image i think we can do a bit of change in our configuration like as we saw earlier if we have this error i'll check out the link below so for the admin for in the public folder actually we want to create an uploads folder and within the uploads folder we want to create an image folder well first thing first i'll just copy this one and i'll come to this file system file over here and which we did early so we'll change it a little bit so now instead of storage for the admin folder we'll upload the files in uploads folder okay that's one thing and well but at the same time if you come to the admin folder it says that whatever directory you create okay it should have a file it should have uh images folder okay so that's what we should have okay so now over here we don't have it yet but now if you try to upload an image once again say horrible this one okay now let's try to submit it and it's still trying to submit okay now it says it can't create a directory in the laravel public root folder well after this configuration it accept it expects a folder in public folder which is this one so over here we'll create a new folder and we'll call it uploads okay now we'll come over here so we'll try it let's see uh we'll upload it one more time and we'll call it laravel let's submit it it's looking for images folder now this images folder once again coming from this this configuration okay so we'll go ahead and create an images folder over here okay now this time you go ahead and upload an image so laravel this one submit it okay now it says permission denied error okay so simply we could go ahead within this say we do seven five five okay so now let's try it one more time okay we still have permission here well now for a lot of time if 755 doesn't work you could go at 777 of course which is not good now if seven five five doesn't work uh then it also has to do with your server configuration okay now let's try now so we'll come over here and now it worked okay now if you come over here you add it so the image is there so the idea is you have to have within public folder uploads folder then images folder and then you also need to set up the permission okay all right at the same time while now we'll come over here our article folder so we also want to show the image okay so we do great column so our database fill name is thumbnail and here we do okay and to show the image actually we can do image over here it takes three parameters first one is we can keep empty second one is the size okay so we then height all right now let's save it and if we do a refresh over here we will be able to see our image okay now we'll go ahead and delete this one and okay now we'll try to upload a new one and we'll create a new one we'll call it flutter learn flutter okay must learn framework and now here we'll upload one for flutter and say uh fast mobile and web framework okay all right we'll submit it now it's there okay so that's how it works okay now another thing we want to show we want to show the or category as well but right now we have title subtitle description and thumbnail and we also want to show this uh over here our uh category category name like here so we do have a title id type id okay so we want to show this category name as well all right so now to do that here we need to create a relationship so here that's what we'll do now every article will has one category okay so that's what we will do here so we'll build a relationship one-to-one relationship so here i will call it public public function and i'll call it article the method name and here we'll return this now here we want to create we'll use has one has one relationship and here we're going to mention the model name so it's a rt call type class okay and the relationship would be id of article type and i the field of article which is type id okay all right so we'll save it in which i said early over here so which i said early so the id of article type would be saved in the type id so based on this too we can create a relationship has one relationship okay now we saved it but anyway i will come over here to our article uh controller and here we can show the um category name okay so here we do grid column [Music] and within it we'll call article article and then we'll call it title now we created this function article so that's what we are calling over here and using this one we can access the title and title name i will call it here category okay and then i will just simply put comma over here now let's come over here and see what happens so our categories are there okay okay so that's how it works but of course if you don't want to use the column which is recommended over here for model form uh model grid actually basic usage or column usage so we can do using column or if you don't want to use column you can just simply do grid here article and then we want to call title okay let's save it and let's see the result so as you see they're same this too all right so but now the title uh article title the combination of article and title is this auto-generated name which i don't like so here i'll go ahead with the first one but the idea is same so using grid we are able to access this method over here which is an article and the related one-on-one relationship the fields we can access as well over here okay but i'll skip that we don't want this on okay one more thing though like here now we can see this images right or refresh it if you don't see the image in your file in your local host you need to come to enb file and make sure you have this one all right you have this domain name over here okay if you are on localhost you just do localhost dot slash if your domain name if you're on server your domain name slash okay and that's how it should work okay all right so you see now we are pretty good with this so we can show the form over here well of course here we're not seeing the image itself but we see the image path all right okay now we can come back would be able to delete them it would be added to them okay now let's create a new one once again this time all okay this time first we'll create a new category okay and [Music] it will be under programming and here we'll call java all right so now we'll come to our article over here and create a new one and that uh type id or instead of type id actually we can say um category now this is over here all right so the type id is this one no we are not passing a default name or label okay here we say cat or here would say let's see okay so now we'll choose here java and title learn java subtitle is empty now the image here will upload java this one okay and here uh best technology okay now here we submit it okay now another option is missing here whether we are publishing it or not as you see i can go ahead and edit it and i'll publish it now let's see over here now we'll see it one more time so it's in public state but when you come to the back end over here we want to be able to see whether an article has been published or not okay we will just show over here as well so now we'll come to our grid over here and after right after i think description here i would do great okay now column whatever it is the name is say released sorry the field name is database full name is released and now over here we do released okay now so remember it's a tiny end i think so released is tiny end so it's we'll save either zero or one if you come over here so the first one is one other zero because the first one we already published on the back end so we can treat it like a boolean so here we just do simply pull function so this is another function that's also mentioned here so you can just go ahead and find it somewhere here it's mentioned okay so just don't forget to go through it anyway okay now as you see slow list is not released so you can simply go ahead and edit it submit it i will say it's released now based on that on your front end based on this one actually based on this value you can show certain articles you can hide certain articles so hopefully it makes sense right okay all right now another thing we want to do like here we have this image okay if we want we want to move them to a certain uh folder okay right now this all goes to this folder over here images folder okay all right so it goes all goes to images folder and uh here actually we can create also unique name or we can also get the default name whatever the name is given okay from client in general is try to use uh default name whatever the name is given but if there is a contradiction it automatically generates a random name for you but anyway so here if you want to save it to a certain folder here you could do like this okay move and within move here you can mention the folder's name okay say for example programming all right so it will save everything in programming folder now what will happen it will first create a fro if it doesn't exist it'll create a programming folder for us automatically now we can test it right now right away over here so we'll uh say create another larval category sorry post and we'll do laravel 8 okay now better here once again i'll upload the same image okay and input uh best best back-end framework or best of the best it doesn't really matter now let's go ahead and uh see it so this is the one that i think this is the one that we created just now this one and we didn't publish it let's go ahead and publish it okay so now we'll come over here let's refresh it you see it created a new folder and the image is there all right now if the image name conflicts it'll auto generate a name like this for you okay hopefully it makes sense all right so the next step we want to do we want to go ahead and install an editor over here so right now it's not an editor so we want to create an editor install an editor to do that we'll come over here and i think over here this one this file okay so here we want to install an editor for our back end and we'll follow this tutorial so we'll go ahead and install an editor using composers so i'll copy this one and put it there and i'll say yes and it will install it for us okay now here we need to publish it to the vendor folder and that's what it will do and it already did okay now we need to go ahead and in our admin folder admin for the php file we need to do the configuration so we'll just simply copy this one okay now we'll come over here come to our admin file in the extension section we'll just put it okay okay all right now it should automatically install some of the files but if it doesn't then you need to do it manually so what you want we want in say vendor folder over here there should be some files but if it didn't then what i would suggest like if you come over here i already mentioned over here it's a public vendor folder this should be this one okay well if it's not there which i already saw it's not there so i'll download the file over here okay and i'll either okay still downloading okay showing finder so what i'll do i'll go ahead and put it there and upload it through this ftp file now i'll come over here and i'll go to public vendor okay now here i can unzip u editor okay now i'll remove okay so it's there now let's go ahead and try to use the editor okay now to use the editor over here instead of description instead of text here i would do you uh i think that's what it goes uh let's see yeah you editor okay so just instead of text field you just use the you editor okay now let's come over here yeah the editor is there beautiful isn't it okay so now over here we would uh create a new one and we'll call say programming and here we'll call learn programming okay and select image well for now i'll still go ahead with say laravel and here i can actually upload a couple of other images as well okay say java but it it didn't show the image right now there is a problem here after installing it i said you need to create this soft link so we'll just go ahead and run the command uh let's see i think we need to be out of this folder okay now let's run the command and it created a soft link now if you come over here let's try this one over here flutter okay so the image is there right so you can create more images more text over here whatever you want okay so you can put a bunch of text over here so let's copy this one the text is there and now what we'll do we'll submit it so this is our text over here and this is the thumbnail and this thumbnail is saved in our programming folder now if you refresh it you see it because just now we also again uploaded laravel dot png so if it complex it automatically gives a new random name okay but now we have this thing we don't want this thing over here okay so how to get rid of this thing so this html tags so we are not uh uh what is it we are we need to hide them okay so to do that uh one thing we could do so now this is totally based on our larval admin package okay now so now here we need to come to this vendor folder we need to find anchor over here so this is where we have some php files for our admin package and as well as the resources that you can see over here now you come to this folder view now here you'll see this content okay an index file so this is the index folder so a lot of this actually like here we are not doing any kind of uh jscs or html actually in fact they are all over here they are auto generated for you but you can edit them now i want to edit this part now the view over here is showing this content is showing this content over here actually all of them but now we need to get rid of this html characters or special um what is it the special html tags all right now i already have an article on that how to get rid of those things so the article is let's see uh this one okay over here one of this is called html entity decode this one okay so just like this so you need to put your variable inside html entity decode and then it will get rid of html entities so now here we see html entities so we need to get rid of them so first i'll i'll put it there okay or in fact i could just uh copy all of it over here and put it there now the variable is content so i'll cut it and put it there okay and we don't need this thing okay so now here i'll do a refresh and my content is there but now the content is too much right i don't want to show all of it i want to show partly so to do that what i could do i could come over here in the description section i can call another function which is called display okay now display takes a callback function within the callback function the value of this field or column value of this field or column okay all right do remember here i can instead of description i could do column description like this okay i could do that same thing description okay so it's the value of this column which is description okay so over here we can simply return something okay return uh a php function which is called substring it takes your string and it keeps zero to whatever you want and then it returns that value now what we'll do we'll just go ahead and do like this but looks like this value has been gone like for description okay and we have a mismatch over here so after doing this we see this part has chopped off well now it's chopped up the reason is because our article over here does contain like if you want to see the html part okay so this part has been like almost 100 so it's got chopped off okay so of course we don't want to say html we just want to see like this but in reality in the database this is saved like this right we know it so that's why we need to increase the length say we do 300 okay now you come over here so it's gone all right uh so let's see you submit it and it's there right so this is your uh coming from this is the text editor all of course we didn't do those things in text editor so now we can submit it again we'll do the best of the best backend framework now let's see so okay now these are good all right so actually this is pretty powerful why you can also do filter over here now we can do uh based on id we can do filter like we have this id right okay five six seven so here say you want to search sex it will show you the sixth id all right but we want to do more than that two more than that say for example you want to search based on category title or subtitle so for this one we can use another function okay which is called a grid and a filter folder is a function you can directly use it and takes anonymous function and within it it takes any kind of value we'll call the values filter okay and after that it will return now here you can mention your condition based on what so we want to uh search based on titles so here we do i think let's see filter like okay so this object if it's within filter function this variable will have a function which is called like so do title okay based on title we want to filter it so now let's refresh it so as you see the title is here now is all of our article come over here and you see filter now i think we want to disable our id filtering we don't want to filter based on id so you can do a disable okay now to disable you come over here let's see the filter function okay so here it says so filter function is very powerful and it does a lot of thing okay so we can do disable id filter this one okay so we'll just copy paste this one and you come over here refresh it now filter id is gone you can also do filter based on subtitle like or article category like this one okay so you do filter like so you can just simply copy paste this one okay of course you can change the name over here i guess i'm sure we can let's give it a try and over here the category okay let's see okay i think we have an error over filter now let's do filter okay title category so this like function also take customized uh name or label name okay so as you see it's pretty powerful so now talking about display you come over here and see the display function okay column this way it's a powerful pretty powerful you can do a lot more things at it so all you need to do go through this documentation file and see how it works okay so within display actually in fact you can do any logical thing and return whatever you want okay all right well i think uh with this admin package we are so far so good and here another thing you can also export all of your uh articles okay in a csv file so here before you export you can say you don't want to export description and you also don't want your thumbnail and other things you want to export so after selecting it just do export and it will download a csv file for you and the beautiful thing is that it's exported there as you can see okay yeah so that's how it works so you can export pretty much uh all of them as a csv file okay yeah i think i didn't submit it now try to export now open it now you see that description is gone so first there was a description of course for released it's still there so it depends on you which part you want you don't want so you can just come over here and select them okay and then you have to do submit all right so so based on your needs you can create different routes over here on this menu section and attach them there and go ahead all right so hopefully you learned something if you did don't forget to smash that like button thank you so much

Channel: dbestech

Views: 2,202

Keywords: laravel admin panel, laravel admin panel generator, laravel tutorial, laravel 8, laravel project, free laravel course, free laravel tutorial, laravel step by step

Id: sybdQGh6nAc

Length: 94min 45sec (5685 seconds)

Published: Sat Nov 27 2021