Introduction & Project Setup
Hello everyone, this is Iamin and in this tutorial, I'm going to show you how you can install an admin panel in your Laravel project really easily. In order to install the admin panel, you just need to write three or four lines of command and your admin panel will be installed. And after that, you'll be able to easily display, edit, delete, or update any data in the admin panel. So I'll show you everything step-by-step from the very beginning. So this is the admin panel we'll create in this project. So we'll be able to do a lot of things in this admin panel. So I'll just create a fresh Laravel project right now. So let me just go to the file manager over here, and let's say I'll create our project over here. So let me just write over here CMD, we'll just open a command prompt, and let's just get our fresh Laravel project. We are going to say over here laravel new, let's say project name will be Lara-admin-panel. You can give it any name. So we'll just press enter, so it will start creating our Laravel project. So right now I'll just fast-forward the video.
So here you can see our project creation is complete. And here is the project folder over here. So let's just run the project. So let's just go to the project directory: cd Lara-admin-panel, press enter. So partly in the project directory. So let's run our project: php artisan serve.
So right now, we'll just see this over here. So this is our fresh Laravel project.
Database Migration and Verification
So right now, we are going to install a Laravel package for this project. But before that, we need to create our database and migrate our table, whatever table we have. So, right now, let's just go and open another command prompt in the project directory. So I'll just go inside the project over here. So right now, let's just write over here CMD. We'll just open a command prompt again over here and let's just write the command over here: php artisan migrate. So it will just migrate all the table we have.
Automated Database Creation
And it will ask us, "Would you like to create a database?" We will just say over here yes, and it will automatically create a database for us. Press enter.
So here you can see it just created some tables, and the database name will be our project name, which is Lara-admin-panel. So let me just show you the example. But here, let's just go to the XAMPP dashboard over here, phpMyAdmin. So this is our phpMyAdmin. So right now, let's just find the Lara-admin-panel. So here you can see Lara-admin-panel, and some table is migrated over here. Okay. So our basic preparation is done.
Installing the Open Admin Package
So right now, we'll install a package for our Laravel project to install admin panels. So we are going to install Open Admin. This is a Laravel admin panel and I'll give this link, here you can see open-admin.org/docs. So I'll give this link in the description so that you can just check it out easily. And here after coming to this website, we need to come over here Getting Started, and then Installation part over here. You can see installation, and if you click installation it will show you three commands over here. So first command is composer require open-admin-org/open-admin. So we'll just copy this, and then we'll go to our command prompt over here. We'll just paste the command over here which is composer require open-admin-org/open-admin. So we'll press enter. So it will install required files for Open Admin. So I'll again just fast-forward the video.
So here you can see the command installation is done. So after this, here we have another command which is php artisan vendor:publish --provider this one. So I'll copy this and again, we'll just paste it over here and then press enter. So it will create some files and folder in our project. So here you can see it will create a file or folder in the vendor and it will also create some file in the public folder as well. Okay, so let me just show you. I already opened my project using Sublime Text over here. So if I now go to the vendor over here, we should have a folder over here called open-admin. Here you can see open-admin-org. And if you go to the public folder, here you can see we have a vendor folder over here and inside vendor we have some two more folders, admin, open-admin, and open-admin-test. Okay. So right now after the second command, we need to give the third command here you can see php artisan admin:install. So if you write this command, what it will do is that it will create some database table in our database and it will create a table for admin over here. So here you can see it will create a table for admin and the username by default will be admin and password will be admin as well. So you can just change the password if you want. So we'll just copy this command from here php artisan admin:install and then we'll just paste it in the command prompt. And here you can see that it created the admin table, and it also creates a folder in the app/Admin/Http/Controllers home controller, auth controller, and example controller. And there is also a few more files over here. Okay.
First Login and Dashboard Overview
So right now if we just refresh our phpMyAdmin over here, and here you can see there is some table over here. You can see admin_roles, admin_role_menus, and a lot of things. So right now, as you can see, it is mentioned over here, we need to go to the /admin. So here in our Laravel project, we'll just say over here /admin and press enter. And here you can see it shows the login form. So over here, I am going to write over here admin and the password will be admin, just as it is mentioned over here. Okay. So right now, we'll just click login over here and there you can see login is successful. And finally, we are in the admin panel or admin dashboard. So right now, here you can see there is nothing over here. So right now, let's say if you want to show the user data over here, then we need to make some changes or we need to write some commands.
So first of all, we can do this really easily using a few commands over here. So here you can see in the Getting Started, we have Quick Start option over here. So if you click Quick Start, it will take us to this page. Here you can see Helper Scaffolding. Here you can see composer require open-admin-ext/helpers, and we just need to run these two commands. So if you do not want to run this, then you have to do a lot of things in order to create some option in the admin panel. So running these two commands is really easier for us. So you just will understand after a few minutes. So let me just copy this command, which is composer require open-admin-ext/helpers. So we'll copy this and we'll run it in our command prompt. And right now, I'll just fast-forward the video.
So here you can see helper installation is done. So after this, we will run one more command which is php artisan admin:import helpers. So let's just paste it over here, press enter, and there you can see it is also done as well. So right now here, if we just refresh our admin panel over here, there you can see there is nothing over here. We only have Dashboard and Admin over here. So if you just refresh over here, there you can see we have one more thing over here, which is Helpers. So if you click Helpers, it will show us a few more options over here.
Scaffolding a New 'Student' Resource
So the most important thing is this scaffold. So if you just click over here, it will let us create our table, model, and controller easily without writing any command or writing any code. So here, let's say we have to create a table for students. So here we'll say students, and here we need to give the model. So we'll say over here capital S t u d e n t, Student. And here we need to give the controller. So it will also create a controller for us as well. So we'll say over here StudentController.
So here you can see Create migration, Create model, Create controller, Run migration, and Create new menu. So what it will do is that it will create a table, model, controller, run the migration, and also it will also create a menu over here for the student as well. So right now, one more thing we need to do is that we need to mention the field name over here. So let's say the field name will be name, and we'll click over here Add field. Then it will be email, again click Add field, and this one will be, let's say, image. So we'll keep everything nullable over here, and by default, the primary key will be ID over here. And here you can see created_at, updated_at, deleted_at. So we'll just directly click over here submit option. So if you now just click over here the submit option, here you can see some file is created over here. You can see, and it is telling us to do one thing, that is add the following routes to app/Admin/routes.php. So I'll just copy this router->resource('students', StudentController::class);. So I'll just copy this and go to this location: app/Admin/routes.php. So we'll just go to our project over here, and here you can see app, inside app we have a folder called Admin, and inside Admin here we can see routes.php. So inside this routes.php we'll just paste over here. Here you can see, after this, we just paste it over here. So let's save this. And let me just show you one more thing. If you go to the app/Admin/Controllers folder over here, here you can see StudentController. So inside the StudentController, here you can see this is for showing the student data, this is for finding the details, and this is for inserting data. Okay.
So right now, let's just go back to our browser over here. And if you now refresh over here, here you can see we have the option called Student over here.
Configuring File System and Creating Data
So if you click Student over here, there you can see it is showing us something over here. So right now, before we do anything, we need to do one more thing. Some people may see an error over here, and even if you are not seeing any error over here, for images it will give you an error. So before that, we'll just go to our project over here, and in the project, we need to go to the config and inside config we need to go to our file filesystems.php. And we'll just directly go down and over here, you can see disks. So inside this, we need to add something for admin. So I just already wrote this inside this notepad over here. Here you can see admin. So I'll just copy this from here and I'll paste it over here, inside this disk. So we need to mention this admin. So over here we will mention where we want to upload our file over here. So it will upload our file in the uploads folder in the public folder. So it will create the uploads folder in the public folder. Okay, so let's save this again. And let's refresh. Okay, there is no error over here. So let's just add a data for the student table. So let me just refresh over here. And here you can see student, let's just insert a random data over here. Let's say name will be Yamin, [email protected]. It will be email. So we'll keep the image field empty and we'll just click go over here. So right now if we refresh over here, you can see we can see the name and email option over here.
So right now, can we insert data from here? Here you can see New option. So right now if you click new, here you can see it is showing us the input field, email field, and the choose file option for image. So by default, it can understand from here it can understand what kind of field it is needed to create for each input field. So if you want to modify some input field, you can obviously do this. You just need to change this from here. Instead of image, you can see over here text or any kind of field. Okay, so this is for the input field, whatever you are seeing over here, three input fields. So right now, let's try to upload something. Let's say over here it will be Adam, email will be [email protected], and let's just choose the image from here. Let's choose this image, click open, and we'll just click over here this submit option. Click submit. And here you can see image successfully uploaded.
And here you can see the image. So right now, if we just want to edit the data, if we just click over here, we cannot see the image, but we can update it. So the reason we cannot see the image is because here you can see 127.0.0.1:8000. So I'll just copy this and right now we'll just go to our .env over here. And here you can see APP_URL=http://localhost. So instead of this, we'll paste it over here. And we obviously also need to remove this slash from here. Make sure to remove the slash. Okay. So if you now save, then if we now refresh, we should be able to see the image over here. So right now what we need to do is that, let's just go back. We need to show the image over here. So in order to show the image over here, we just need to make some changes in the StudentController.php. So, from here, grid->column. We are basically showing the image. So this is the column name, and this will be the image data, basically. So instead of this, since you want to show the image not a text, so we'll just remove this. And I just write it over here. You can see grid->column('image')->image(). let me just zoom in. This one. So I'll just copy this and paste it over here. Okay, so this will let us see the image. So if we now save this, then if we now refresh over here, there you can see we can see that image.
Scaffolding an Existing 'User' Model
Now, this student table was created using the helpers. Now, we only have a table called, let's say, users in our database. Now, if you want to show that user data over here, all you have to do is that go to the scaffold, and we already have the table over here which is users. So we'll say it out here users, we'll make sure that user model name, then user controller over here, UserController. And here, since we already have the user model and user table and user model, so we don't need to create the migration, create the model. So we'll just remove that sign from here. We'll just only create the controller. So without the migration. So we only need to keep the controller and the create menu. So right now, we'll just click over here submit option. And there you can see everything is done. So we'll just copy this and we'll just paste it in the app/Admin/routes.php. So over here we'll paste it, save this, then let's just refresh over here. And here you can see the user option over here. If we click user, here you can see name, email, everything is empty because there is no data in the user table. Okay, let me just show you. Let's just insert a data in the user table. So let's say over here user1, email will be [email protected]. Let's just click go over here. And if you now refresh over here, here you can see we can see the user data over here. So we can also see this, or we can even delete it from here as well.
Conclusion and Final Thoughts
And you can even create new roles and give a certain permission to a certain user. Because obviously you don't want every user to have access to this helper function. So this is all. I hope you like this tutorial. If you have any question, you can leave it in the comment section. And if you want me to make a specific type of video, then you can also let me know in the comment section as well. And if you want to learn about more admin panels like this, then you can check out the video in the screen. Thanks again for watching. I hope you subscribe this channel, and I hope to see you in the future tutorials.
