Laravel 11 CRUD Operation Application Example Tutorial

To build crud application in laravel 11; Download laravel 11 application and configure it with database and then create a crud controller to handle crud operation from database and create lists and form on views file to perform crud operations in laravel 11 applications.

CRUD operation is a very important part of performing operations from the backend in the Laravel web application, which is used to add, update, delete and edit the data or records in the database.

In this laravel 11 crud operation step-by-step tutorial guide, we will show you how to create crud operation application to create, read, delete and update data or records from database using laravel 11 framwork.

Laravel 11 CRUD Operation Application Example Tutorial

Steps to create crud operation application with example in laravel 11 applications:

Step 1 – Download Laravel Application

Run the composer create-project --prefer-dist laravel/laravel CRUDAPP on cmd or terminal window to download laravel 11 application into your system:

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

Step 2 – Configure the Database in Laravel Application

Now, open the .env file from the laravel application root directory and configure your database details; Something like this:

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=name_of_your_database
DB_USERNAME=name_of_your_database_user
DB_PASSWORD=password_of_your_database_user

Step 3 – Create Migration and Model File

Run the php artisan make:model Note -m command on cmd or terminal window to create migration and model file for crud operation application:

php artisan make:model Note -m

Now open create_notes_table.php file from /database/migrations/ folder and update the up() function to create table into your database:

   public function up(): void
    {
        Schema::create('notes', function (Blueprint $table) {
            $table->id();
            $table->string('title');
            $table->string('description');
            $table->timestamps();
        });
    }

Run the php artisan migrate command on cmd to create tables into your configured database with laravel applications:

php artisan migrate

If you are getting error “SQLSTATE[HY000]: General error: 1273 Unknown collation: ‘utf8mb4_0900_ai_ci’ (Connection: mysql, SQL: select table_name as name, (data_length + index_length) as size, table_comment as comment, engine as engine, table_collation as collation from information_schema.tables where table_schema = ‘mydb’ and table_type in (‘BASE TABLE’, ‘SYSTEM VERSIONED’) order by table_name)”, To fix this you can do it:

database.php file from the config folder, find MySQL in the connection array, and change the following line into it:

Replace the below string:
'collation' => env('DB_COLLATION', 'utf8mb4_0900_ai_ci'),
With:
'collation' => env('DB_COLLATION', 'utf8mb4_general_ci'),

Step 4 – Define CRUD Resource Routes

Open web.php file from routes folder, and define resources routes for crud application in it; something like this:

use App\Http\Controllers\NoteCRUDController;
Route::resource('notes', NoteCRUDController::class);

Step 5 – Create CRUD Operation Controller

Run php artisan make:controller NoteCRUDController command on cmd to create controller file:

php artisan make:controller NoteCRUDController

Now, open NoteCRUDController.php file from app/http/controllers folder and create some methods into it to handle crud operation with database; something like this:

<?php

namespace App\Http\Controllers;

use App\Models\Note;
use Illuminate\Http\Request;

class NoteCRUDController extends Controller
{
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index()
    {
        $data['notes'] = Note::orderBy('id','desc')->paginate(5);

        return view('notes.index', $data);
    }

    /**
     * Show the form for creating a new resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function create()
    {
        return view('notes.create');
    }

    /**
     * Store a newly created resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @return \Illuminate\Http\Response
     */
    public function store(Request $request)
    {
        $request->validate([
            'title' => 'required',
            'description' => 'required'
        ]);
        $Note = new Note;
        $Note->title = $request->title;
        $Note->description = $request->description;
        $Note->save();

        return redirect()->route('notes.index')
                        ->with('success','Note has been created successfully.');
    }

    /**
     * Display the specified resource.
     *
     * @param  \App\Note  $Note
     * @return \Illuminate\Http\Response
     */
    public function show(Note $note)
    {
        return view('notes.show',compact('note'));
    }

    /**
     * Show the form for editing the specified resource.
     *
     * @param  \App\Note  $Note
     * @return \Illuminate\Http\Response
     */
    public function edit(Note $note)
    {
        return view('notes.edit',compact('note'));
    }

    /**
     * Update the specified resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  \App\Note  $Note
     * @return \Illuminate\Http\Response
     */
    public function update(Request $request, $id)
    {
        $request->validate([
            'title' => 'required',
            'description' => 'required',
        ]);

        $Note = Note::find($id);
        $Note->title = $request->title;
        $Note->description = $request->description;
        $Note->save();

        return redirect()->route('notes.index')
                        ->with('success','Note Has Been updated successfully');
    }

    /**
     * Remove the specified resource from storage.
     *
     * @param  \App\Note  $Note
     * @return \Illuminate\Http\Response
     */
    public function destroy(Note $note)
    {
        $note->delete();

        return redirect()->route('notes.index')
                        ->with('success','Note has been deleted successfully');
    }
}

Step 6 – Create CRUD Views File

Go to resources/views folder and create a folder in it named notes, and then create index.blade.php, create.blade.php and edit.blade.php files in the notes folder.

Now, open index.blade.php file and create list HTML in it to show list of notes from database; something like this:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Laravel 11 CRUD Operation Example Tutorial - Tutsmake.com</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
</head>
<body>
<div class="container mt-2">
<div class="row">
        <div class="col-lg-12 margin-tb">
            <div class="pull-left">
                <h2>Laravel 11 CRUD Operation Example Tutorial - Tutsmake.com</h2>
            </div>
            <div class="pull-right mb-2">
                <a class="btn btn-success" href="{{ route('notes.create') }}"> Create Note</a>
            </div>
        </div>
    </div>

    @if ($message = Session::get('success'))
        <div class="alert alert-success">
            <p>{{ $message }}</p>
        </div>
    @endif

    <table class="table table-bordered">
        <tr>
            <th>S.No</th>
            <th>Title</th>
            <th>Description</th>
            <th width="280px">Action</th>
        </tr>
        @foreach ($notes as $nts)
        <tr>
            <td>{{ $nts->id }}</td>
            <td>{{ $nts->title }}</td>
            <td>{{ $nts->description }}</td>
            <td>
                <form action="{{ route('notes.destroy',$nts->id) }}" method="Post">

                    <a class="btn btn-primary" href="{{ route('notes.edit',$nts->id) }}">Edit</a>

                    @csrf
                    @method('DELETE')

                    <button type="submit" class="btn btn-danger">Delete</button>
                </form>
            </td>
        </tr>
        @endforeach
    </table>

    {!! $notes->links() !!}
</body>
</html>

Next open create.blade.php file and create form in it, to create a new note from this form; Something like this:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Add Note Form in Laravel 11 CRUD Operation - Tutsmake.com</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
</head>
<body>
<div class="container mt-2">

<div class="row">
    <div class="col-lg-12 margin-tb">
            <div class="pull-left">
                <h2>Laravel 11 CRUD Operation Example Tutorial - Tutsmake.com</h2>
            </div>
        <div class="pull-left mb-2">
            <h2>Add Note</h2>
        </div>
        <div class="pull-right">
            <a class="btn btn-primary" href="{{ route('notes.index') }}"> Back</a>
        </div>
    </div>
</div>

  @if(session('status'))
    <div class="alert alert-success mb-1 mt-1">
        {{ session('status') }}
    </div>
  @endif

<form action="{{ route('notes.store') }}" method="POST" enctype="multipart/form-data">
    @csrf

     <div class="row">
        <div class="col-xs-12 col-sm-12 col-md-12">
            <div class="form-group">
                <strong>Title:</strong>
                <input type="text" name="title" class="form-control" placeholder="Title">
               @error('title')
                  <div class="alert alert-danger mt-1 mb-1">{{ $message }}</div>
               @enderror
            </div>
        </div>
        <div class="col-xs-12 col-sm-12 col-md-12">
            <div class="form-group">
                <strong>Description:</strong>
                 <input type="text" name="description" class="form-control" placeholder="Description">
                @error('description')
                  <div class="alert alert-danger mt-1 mb-1">{{ $message }}</div>
               @enderror
            </div>
        </div>
    <div class="col-xs-6 col-sm-6 col-md-6 mt-2">
        <button type="submit" class="btn btn-primary ml-3">Submit</button>
    </div>
    </div>

</form>
</body>
</html>

Now, Open edit.blade.php file and create edit note form in it to edit note data from database; something like this:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Edit Note Form in Laravel 11 CRUD Operation - Tutsmake.com</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
    </head>
<body>
<div class="container mt-2">
    <div class="row">
        <div class="col-lg-12 margin-tb">
            <div class="pull-left">
                <h2>Laravel 11 CRUD Operation Example Tutorial - Tutsmake.com</h2>
            </div>
            <div class="pull-left">
                <h2>Edit Note</h2>
            </div>
            <div class="pull-right">
                <a class="btn btn-primary" href="{{ route('notes.index') }}" enctype="multipart/form-data"> Back</a>
            </div>
        </div>
    </div>

  @if(session('status'))
    <div class="alert alert-success mb-1 mt-1">
        {{ session('status') }}
    </div>
  @endif

    <form action="{{ route('notes.update',$note->id) }}" method="POST" enctype="multipart/form-data">
        @csrf
        @method('PUT')

         <div class="row">
            <div class="col-xs-12 col-sm-12 col-md-12">
                <div class="form-group">
                    <strong>note Name:</strong>
                    <input type="text" name="title" value="{{ $note->title }}" class="form-control" placeholder="please enter title">
                    @error('title')
                     <div class="alert alert-danger mt-1 mb-1">{{ $message }}</div>
                    @enderror
                </div>
            </div>

            <div class="col-xs-12 col-sm-12 col-md-12">
                <div class="form-group">
                    <strong>Description:</strong>
                    <input type="text" name="description" value="{{ $note->description }}" class="form-control" placeholder="Please enter description">
                    @error('description')
                     <div class="alert alert-danger mt-1 mb-1">{{ $message }}</div>
                    @enderror
                </div>
            </div>
             <div class="col-xs-6 col-sm-6 col-md-6 mt-2">
              <button type="submit" class="btn btn-primary ml-3">Submit</button>
          </div>

        </div>

    </form>
</div>
</body>
</html>

Step 7 – Run and Test Application

Run php artisan serve command on cmd to start this application server, and you can test it on your browser:

php artisan serve

Now, open your browser and type the following URL into it for testing:

http://127.0.0.1:8000/notes

We hope with the help of the tutorial guide you have learned to create CRUD Operation Application in Laravel 11 application step by step.

If you have any issue working with Laravel 11 framework, you can comment or mail us at [email protected], we will solve your query as soon as possible.

Recommended Guides