CRUD operation example in Laravel 10

In this article, we will learn how to do CRUD operations in Laravel  10.

If you are here you might know how to set up xampp or wamp web servers.

Firstly you should be familiar with creating databases, database users, and database tables, if not click here to see how to set up a localhost web server like xampp or wampp.

Step1: Install Laravel 10 Project

To make CRUD Operations in Laravel 10, first Install Laravel via composer or whatever method you use for installing the Laravel project.

To install Laravel  10 project open your terminal/cmd and navigate to your desired directory and past the following command.

composer create-project laravel /laravel blog –prefer-dis

After you have installed the Laravel 10 project, navigate to the base folder of your project and run the following command to run the Laravel project.

php artisan serve

This command will run your project on the localhost webserver on 8000 port, by default.

If your system is using this port and you want to run it on your custom port, do it, by following the command.

php artisan serve --port=8080

You can use 8080 or any port you want.

After you make sure that the project is running and working properly, then follow the following steps.

Step 2: Create a database table with database wizard tools or Laravel migrations.

2.1- Database wizard (phpMyAdmin)

Create a database by the name of Laravel _crud via phpMyAdmin or any database management tools you use. Then create a table by the name of blog with four columns: id, title, description, and date_added.

The SQL code for creating mentioned table is as below.

CREATE TABLE `blogs` (
  `id` bigint(20) UNSIGNED NOT NULL,
  `title` varchar(255) COLLATE utf8mb4_unicode_ci NOT NULL,
  `description` text COLLATE utf8mb4_unicode_ci NOT NULL,
  `created_at` timestamp NULL DEFAULT NULL,
  `updated_at` timestamp NULL DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;
  
ALTER TABLE `blogs`
  ADD PRIMARY KEY (`id`);
 
ALTER TABLE `blogs`
  MODIFY `id` bigint(20) UNSIGNED NOT NULL AUTO_INCREMENT;
COMMIT;

2.2- Laravel Migration

To create your migration, use the following command

php artisan make:migration create_blog_table --create=blog

The above command will create a file in the database/migrations directory of your project. 

Navigate to the above directory and find the create_blog_table file and past the below code into it.

<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

return new class extends Migration
{
    /**
     * Run the migrations.
     */
    public function up(): void
    {
        Schema::create('blog', function (Blueprint $table) {
            $table->id();
            $table->string('title');
            $table->text('description');
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     */
    public function down(): void
    {
        Schema::dropIfExists('blog');
    }
};

Step 3: Connect your database with Laravel 10 project

To connect your Laravel 10 project with the database go to your project and edit. env file and enter your database specification.

Your database configurations may look like this.

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=laravel _crud
DB_USERNAME=root
DB_PASSWORD=

Step 4: Create a Laravel controller

Create a Laravel controller by the name of BlogController to handle or control your PHP(Laravel ) commands that are made for Models to retrieve or send the instructions to the database via models.

To make a Laravel 10 controller use the following command

php artisam make:controller BlogController

If you want to make a controller with its resource functions like index, create, store, show, edit, update, and destroy functions, use the following commands.

php artisan make:controller BlogController --resource

After running the above command navigate to your project go to App/Http/Controller and open BlogController.php and paste the following codes into it.

BlogController.php

<?php

namespace App\Http\Controllers;

use App\Models\Blog;
use Illuminate\Contracts\View\View;
use Illuminate\Http\RedirectResponse;
use Illuminate\Http\Request;
use Illuminate\Http\Response;

class BlogController extends Controller
{
    /**
     * Display a listing of the resource.
     */
    public function index(): View
    {
        $blogs = Blog::latest()->paginate(5);

        return view('blogs.index', compact('blogs'))
            ->with('i', (request()->input('page', 1) - 1) * 5);
    }

    /**
     * Show the form for creating a new resource.
     */
    public function create(): View
    {
        return view('blogs.create');
    }

    /**
     * Store a newly created resource in storage.
     */
    public function store(Request $request): RedirectResponse
    {
        $request->validate([
            'title' => 'required',
            'description' => 'required',
        ]);

        Blog::create($request->all());

        return redirect()->route('blogs.index')
            ->with('success', 'Blog article created successfully.');
    }

    /**
     * Display the specified resource.
     */
    public function show(Blog $blog): View
    {
        return view('blogs.show', compact('blog'));
    }

    /**
     * Show the form for editing the specified resource.
     */
    public function edit(Blog $blog): View
    {
        return view('blogs.edit', compact('blog'));
    }

    /**
     * Update the specified resource in storage.
     */
    public function  update(Request $request, blog $blog): RedirectResponse
    {
        $request->validate([
            'title' => 'required',
            'description' => 'required',
        ]);

        $blog->update($request->all());

        return redirect()->route('blogs.index')
            ->with('success', 'blog updated successfully');
    }

    /**
     * Remove the specified resource from storage.
     */
    public function destroy(blog $blog): RedirectResponse

    {

        $blog->delete();

        return redirect()->route('blogs.index')

            ->with('success', 'blog article deleted successfully');
    }
}

Step 5: Create your Laravel 10 model

For database stuff, you need to create a model to talk with the database, for doing this, first, create a model by the following command in your terminal at the root directory of your project.

php artisan make:model Blog

After running the above command then navigate to the “App/Models” and open the Blog.php file and replace its codes with the following code

Blog.php

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;

class Blog extends Model
{
    use HasFactory;
    protected $fillable = ['id', 'title', 'description'];
}

Step 6: Create your views.

For the crud operation, we need 5 blade files to view, insert, edit, and delete records.

The index file for listing the blogs.

show.blade.php file for seeing the file details.

sreate.blade.php file for creating a new blog post

edit.blade.php file for editing a single blog for our project.

And a lyout.blade.php file for the above files to extend their layout from the base layout.

To create the view files in Laravel 10 version, go to the “resources/views” directory and create blog directory and create the mentioned blade files.

layout.php file

<!DOCTYPE html>
<html>

<head>
 <title>Laravel 10 CRUD Application - ItSolutionStuff.com</title>
 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>

 <div class="container">
  @yield('content')
 </div>

</body>

</html>

index.blade.php file for our blog lists

@extends('blogs.layout')

@section('content')
<div class="row">
 <div class="col-lg-12 margin-tb">
  <div class="pull-left">
   <h2>Laravel 10 CRUD Example</h2>
  </div>
  <div class="pull-right">
   <a class="btn btn-success" href="{{ route('blogs.create') }}"> Create New blog</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>No</th>
  <th>Title</th>
  <th>description</th>
  <th>Date Added</th>
  <th width="280px">Action</th>
 </tr>
 @foreach ($blogs as $blog)
 <tr>
  <td>{{ ++$i }}</td>
  <td>{{ $blog->title }}</td>
  <td>{{ $blog->description }}</td>
  <td>{{ $blog->created_at }}</td>
  <td>
   <form action="{{ route('blogs.destroy',$blog->id) }}" method="POST">

    <a class="btn btn-info" href="{{ route('blogs.show',$blog->id) }}">Show</a>

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

    @csrf
    @method('DELETE')

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

{!! $blogs->links() !!}

@endsection

Create post form, to create a new blog

create.blade.php file

@extends('blogs.layout')

@section('content')
<div class="row">
 <div class="col-lg-12 margin-tb">
  <div class="pull-left">
   <h2 class="inline">Add New blog <a class="btn btn-primary inline" href="{{ route('blogs.index') }}"> Back</a></h2>
  </div>
 </div>
</div>

@if ($errors->any())
<div class="alert alert-danger">
 <strong>Opps!</strong> You are missing something out.<br><br>
 <ul>
  @foreach ($errors->all() as $error)
  <li>{{ $error }}</li>
  @endforeach
 </ul>
</div>
@endif

<form action="{{ route('blogs.store') }}" method="POST">
 @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">
   </div>
  </div>
  <div class="col-xs-12 col-sm-12 col-md-12">
   <div class="form-group">
    <strong>Description:</strong>
    <textarea class="form-control" style="height:150px" name="description" placeholder="Descriptions"></textarea>
   </div>
  </div>

  <div class="col-xs-12 col-sm-12 col-md-12 ">
   <button type="submit" class="btn btn-primary">Save</button>
  </div>
 </div>

</form>
@endsection

The show file will show you the blog details

show.blade.php

@extends('blogs.layout')

@section('content')
<div class="row">
 <div class="col-lg-12 margin-tb">
  <div class="pull-left">
   <h2> Show Product</h2>
  </div>
  <div class="pull-right">
   <a class="btn btn-primary" href="{{ route('blogs.index') }}"> Back</a>
  </div>
 </div>
</div>

<div class="row">
 <div class="col-xs-12 col-sm-12 col-md-12">
  <div class="form-group">
   <strong>Title:</strong>
   {{ $blog->title }}
  </div>
 </div>
 <div class="col-xs-12 col-sm-12 col-md-12">
  <div class="form-group">
   <strong>Description:</strong>
   {{ $blog->description }}
  </div>
 </div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12">
 <div class="form-group">
  <strong>Published on:</strong>
  {{ $blog->created_at }}
 </div>
</div>
</div>
@endsection

The edit file contains the selected blog info in a form to be updated

edit.blade.php

@extends('blogs.layout')

@section('content')
<div class="row">
 <div class="col-lg-12 margin-tb">
  <div class="pull-left">
   <h2>Edit blog <a class="btn btn-primary" href="{{ route('blogs.index') }}"> Back</a></h2>
  </div>
 </div>
</div>

@if ($errors->any())
<div class="alert alert-danger">
 <strong>Opps!</strong> It looks like you are missing something out.<br><br>
 <ul>
  @foreach ($errors->all() as $error)
  <li>{{ $error }}</li>
  @endforeach
 </ul>
</div>
@endif

<form action="{{ route('blogs.update',$blog->id) }}" method="POST">
 @csrf
 @method('PUT')

 <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" value="{{ $blog->title }}" class="form-control" placeholder="Title">
   </div>
  </div>
  <div class="col-xs-12 col-sm-12 col-md-12">
   <div class="form-group">
    <strong>Description:</strong>
    <textarea class="form-control" style="height:150px" name="description" placeholder="Detail">{{ $blog->description }}</textarea>
   </div>
  </div>
  <div class="col-xs-12 col-sm-12 col-md-12">
   <button type="submit" class="btn btn-primary">Update</button>
  </div>
 </div>

</form>
@endsection

Now, its time to run your project using this command

php artisan serve

and check the following URL to view the blogs and create a new blog form.

http://localhost:8000/blogs

You are done!

This was all about CRUD operations in Laravel  10

Hope you learned something, if so, let us know in the comments.

We will learn how to upload images/files in Larvel 10 in this article

Or if you have any questions, also type them in the comment box, and I will reply as soon as I can.

Thanks for reading!

Also, Read Laravel 10 Ajax Live Search