Image gallery system with laravel 5

image gallery in laravel demo

In this post, we will create a image gallery. As we know, image gallery is one of the major elements in web development for most of the projects. Off course, they should be dynamic which we are going to build. We will be using Laravel framework. We will start from fresh laravel installation.

Install Project

First, lets’s install a fresh laravel project using the command below:

Database Setup

Next, we need to setup our database configuration to match our scenario. I am going to use mysql database with the following configuration in .env file.

Create Model, Migration and Controller

We will use a single artisan command to create our model, migration and controller with resource. To do so, execute the following command:

Configure Model

Let’s make some changes to our model to match our needs. We will have image, thumbnail, title and status of image in our database. So, after changing it, our model looks like below:

Modify Migration

As stated earlier, we will modify our migration file adding some columns for image and others. The image and thumbnail will store image name with location. The title will store image description. On the other hand, status will store integer value for defining active or in-active.

Modify Controller

It’s time to modify our controller. We will display a upload form above the images form. The <code>Store</code> method will save the data into database, the update method will update the database and the destroy method will delete the record from database.

We have added the controller code to do the above functions. Thus our final GalleryController looks like below:

 

Create View

Now, let’s create our frontend view. I have used Gentelella theme for dashboard but I will not be showing in this tutorial. Thus, we will create a simple view that meets our requirements.

I have added a revert button. Click on the button will revert the status of image i.e. disable it if it’s enabled and vice-versa.

Add Route

We need to add routes for our system. For this, we will use route resource. Simply add the following in web.php file.

All set, good to go! Now, it’s time to test our system. Run your local host and navigate to the route /gallery, you will see the frontend as screenshot above. You can play with revert and delete button. They are functional. Yey!

If you have any comment or issues regarding the implementation, don’t forget to drop a comment below.