Laravel 10 CRUD with Image Upload Tutorial: A Step-by-Step Guide

Introduction

If you are looking for a comprehensive guide on Laravel 10 CRUD with image upload, then you are in the right place. This tutorial will provide you with step-by-step instructions to create a basic CRUD application with image upload functionality using Laravel 10.

CRUD, short for Create, Read, Update, and Delete, is a term commonly used in computer programming to describe the four basic operations that can be performed on data. In web applications and databases, CRUD refers to the fundamental actions that can be performed on a database or data store.

Step 1: Installing Laravel 10

Before we dive into the details, make sure that you have Laravel 10 installed on your system. If not, you can install it by running the following command:

composer create-project laravel/laravel example-app

Step 2: Database Configuration

To start, let’s make the necessary configurations for our CRUD application. Open the .env file and enter the details for the database name, username, password, and other necessary details:

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=database_name
DB_USERNAME=database_username
DB_PASSWORD=database_password

Step 3: Create Migration

Since we are creating a CRUD application for products, we need to create a migration for the “products” table using the Laravel 10 php artisan command. Run the following command to create the migration file:

php artisan make:migration create_products_table --create=products

In the database/migrations folder, you will find the migration file. Add the following code to the migration file to create the products table:

Run the following command to run the migration:

php artisan migrate

Step 4 : Add Controller and Model

In this step, we will create a new controller named ProductController and write logic to store images in the “images” folder of the public folder. Run the following command to create the resource controller:

php artisan make:controller ProductController --resource --model=Product

The ProductController will have seven default methods:

• index()
• create()
• store()
• show()
• edit()
• update()
• destroy()

Add the following code to the ProductController file:

Add the following code to the Product.php file:

Step 5: Add Resource Route

To add a resource route for a product CRUD application, open the routes/web.php file and add the following route:

<?php
  
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\ProductController;

Route::resource('products', ProductController::class);

Step 6: Add Blade Files

In this step, we will create the blade files. First, create a layout file, and then create a new folder called “products” to store the blade files of the CRUD application. The following blade files need to be created:

• layout.blade.php
• index.blade.php
• create.blade.php
• edit.blade.php
• show.blade.php

Create these files and add the following code to them.

resources/views/products/layout.blade.php

resources/views/products/index.blade.php

resources/views/products/create.blade.php

`resources/views/products/edit.blade.php`

`resources/views/products/show.blade.php`

Step 7: Test Image Upload

To run the Laravel app after completing all the necessary steps, enter the following command in your terminal:

php artisan serve

Then, open your web browser and enter the URL provided to view the output of the app. It’s important to note that you must have created an “images” folder in the public directory beforehand.

You are good to go.