Step-by-Step Guide to Image Upload with CRUD Functionality

Laravel 10 Image Upload with  CRUD Application

Prerequisites:

  • PHP (version 7.4 or higher)
  • Composer (latest version)
  • Laravel 10 (latest version)
  • A code editor (e.g., Visual Studio Code)
  • A web server (e.g., Apache or Nginx)
  • A database (e.g., MySQL or SQLite)

Installation of Laravel 10

To set up Laravel, you want to have composer hooked up in your system. If you don`t have it, you could down load and set up it from the reliable website.

Once you have installed Composer, open your terminal and run the following command to install Laravel 10:

composer create-project --prefer-dist laravel/laravel laravel10crud

This will install Laravel 10 in a directory named “laravel10crud”.

Setting up the database

Next, we want to installation the database for our application. Open the .env record withinside the root listing of your undertaking and replace the following:

DB_CONNECTION=mysql

DB_HOST=127.0.0.1

DB_PORT=3306

DB_DATABASE=laravel10crud

DB_USERNAME=root

DB_PASSWORD=

Replace the values with your own database details.

Create a Model and Migration

Now, we will create a model and migration for our application. To create a model and migration, run the following command in the terminal

php artisan make:model Product -m

This will create a model named “Product” and a migration for the same.

Next, we want to replace the migration record to feature the desired fields for our merchandise table. Open the migration record and upload the subsequent code:

public function up()

{

    Schema::create('products', function (Blueprint $table) {

        $table->id();

        $table->string('name');

        $table->text('description');

        $table->float('price');

        $table->string('image');

        $table->timestamps();

    });

}

Finally, run the following command to create the products table in the database:

php artisan migrate

Create a Controller

In this step, we can create a controller for our application. To create a controller, run the subsequent command withinside the terminal

php artisan make:controller ProductController --resource

This will create a controller named “ProductController”.

Define routes

Now, we want to outline the routes for our application. Open the “routes/web.php” report and upload the subsequent code:

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

Create Views

In this step, we are able to create perspectives for our application. Create a listing named “products” interior the “resources/perspectives” listing and create the subsequent documents interior it:

create.blade.php

edit.blade.php

index.blade.php

show.blade.php

Implement CRUD functionality

Finally, we need to implement the CRUD functionality in the controller. Open the “ProductController” and add the following code

use Illuminate\Http\Request;

use App\Product;



class ProductController extends Controller

{

    /**

     * Display a listing of the resource.

     *

     * @return \Illuminate\Http\Response

     */

    public function index()

    {

        $products = Product::all();

        return view('products.index', compact('products'));

    }

 

    /**

     * Show the form for creating a new resource.

     *

     * @return \Illuminate\Http\Response

     */

    public function create()

    {

        return view('products.create');

    }

 

    /**

     * Store a newly created resource in storage.

     *

     * @param  \Illuminate\Http\Request  $request

     * @return \Illuminate\Http\Response

     */

    public function store(Request $request)

    {

        $request->validate([

            'name' => 'required',

            'description' => 'required',

            'price' => 'required|numeric',

            'image' => 'required|image|mimes:jpeg,png,jpg,gif,svg|max:2048',

        ]);

 

        $imageName = time().'.'.$request->image->extension();  

        $request->image->move(public_path('images'), $imageName);

 

        $product = new Product([

            'name' => $request->get('name'),

            'description' => $request->get('description'),

            'price' => $request->get('price'),

            'image' => $imageName,

        ]);

        $product->save();

        return redirect('/products')->with('success', 'Product saved!');

    }

 

    /**

     * Display the specified resource.

     *

     * @param  int  $id

     * @return \Illuminate\Http\Response

     */

    public function show($id)

    {

        $product = Product::find($id);

        return view('products.show', compact('product'));

    }

 

    /**

     * Show the form for editing the specified resource.

     *

     * @param  int  $id

     * @return \Illuminate\Http\Response

     */

    public function edit($id)

    {

        $product = Product::find($id);

        return view('products.edit', compact('product'));

    }

 

    /**

     * Update the specified resource in storage.

     *

     * @param  \Illuminate\Http\Request  $request

     * @param  int  $id

     * @return \Illuminate\Http\Response

     */

    public function update(Request $request, $id)

    {

        $request->validate([

            'name' => 'required',

            'description' => 'required',

            'price' => 'required|numeric',

            'image' => 'image|mimes:jpeg,png,jpg,gif,svg|max:2048',

        ]);

 

        $product = Product::find($id);

        $product->name = $request->get('name');

        $product->description = $request->get('description');

        $product->price = $request->get('price');

 

        if ($request->hasFile('image')) {

            $imageName = time().'.'.$request->image->extension();  

            $request->image->move(public_path('images'), $imageName);

            $product->image = $imageName;

        }

        $product->save();

        return redirect('/products')->with('success', 'Product updated!');

    }

 

    /**

    * Remove the specified resource from storage.

    *

    * @param  int  $id

    * @return \Illuminate\Http\Response

    */

    public function destroy($id)

    {

        $product = Product::find($id);

        $product->delete();

        return redirect('/products')->with('success', 'Product deleted!');

    }

}

Test the application

Now, we're geared up to check our application. Start the improvement server via way of means of walking the subsequent command withinside the terminal:

php artisan serve

Open your browser and navigate to “http://localhost:8000/products”. You have to be capable of carry out CRUD operations with picture add functionality.

 

FAQ's

What is CRUD functionality?

CRUD is an acronym from the world of computer programming and refers to the four functions considered necessary to implement a persistent storage application: create, read, update and delete.

What are the 7 CRUD methods?

CRUD is 4 distinct operations and there are seven RESTful actions. Create, Read, Update, Edit, Delete are CRUD actions. R of CRUD holds Index, New, Show, Edit and Edit, and Delete. The actions determine whether your consuming data, or feeding it, all the others are feeding it.

What are the 4 CRUD methods?

CRUD is the acronym for CREATE, READ, UPDATE and DELETE. These terms describe the four essential operations for creating and managing persistent data elements, mainly in relational and NoSQL databases.

How to upload and display an image in HTML?

Use the code < img src=”(your title)” alt=”Image” height=”(your image height)” width=”(your image width)”>. HTML is pretty straightforward language but it's okay if you don't want to learn it in-depth.

What is image API?

The Image API enables you to create Image objects that store bitmap data from GIF, animated GIF, JPEG, and PNG files.

Tags

Share