Laravel 9 Inertia Js CRUD Example With Modal

Hello Artisan

Now in this tutorial, I will discuss inertia js with Laravel 9. In this example tutorial, I will show you step by step guide on how we can make simple crud operations with Laravel 9  and inertia js with tailwind css.

Here, below I wrote step by step article on laravel 9 inertia vue crud, so you can easily start a simple application with your laravel 9 jetstream auth with tailwind css. you just need to follow a few below step and you will get the layout as below:

What is Inertia Js

Inertia is a new approach for building classic server-driven web apps.  Inertia allows us to create fully client-side rendered, single-page apps, without much of the complexity that comes with modern SPAs. 

Look, Inertia has no client-side routing, nor does it require an API. Simply build controllers and page views like you've always done! Inertia Js created by Jonathan Reinink. 

So now in this tutorial, i will explain how to install inertia js in the Laravel 9 application and how we make our first crud operation with Laravel 9 using inertia js. I am very excited to give you this chance that makes a crud application using inertia js with Laravel 9. So let's start our laravel 9 inertia tutorial.

Preview image of our tutorial

Preview image of our tutorial : Edit modal

Step 1: Install Laravel 9

Now, we need to install laravel 9 app using the composer command. Run the below command to install

composer global require laravel/installer

// and then run

laravel new inertia --jet

After running this command it will install laravel 9 app in our local directory with laravel jetstream.

Step 2: Create Model

Here, we need to create database migration for the articles table, and also we will create a model for the articles table.

php artisan make:model Article -m

Recommended : Building a REST API with Laravel Microservices Lumen

database\migrations

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

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

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

Read also : Laravel 8.x Vue js CRUD Example With Vue Router

Now run the php artisan migrate command to create an article table.

App/Models/Article.php

namespace App\Models;

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

class Article extends Model
{
    use HasFactory;

    protected $fillable = [
      'title'
    ];
}

Step 3:  Create Route

In the third step, we will create routes for the crud app. so create a route here.

routes/web.php

use Illuminate\Support\Facades\Route;
use App\Http\Controllers\ArticleController;

Route::get('/', function () { return view('welcome'); });

Route::middleware(['auth:sanctum', 'verified'])->get('/dashboard', function () {
    return Inertia\Inertia::render('Dashboard');
})->name('dashboard');

Route::get('/article', [ArticleController::class, 'index']);
Route::post('/article', [ArticleController::class, 'store']);
Route::patch('/article/edit/{id}', [ArticleController::class, 'update']);
Route::delete('/article/delete/{id}', [ArticleController::class, 'delete']);

Step 4: Create Controller

In this step, we will create an article controller file and add the following code to it.

app/Http/Controllers/ArticleController.php

namespace App\Http\Controllers;

use Inertia\Inertia;
use App\Models\Article;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Validator;

class ArticleController extends Controller
{
    public function index(Article $article)
    {
        return Inertia::render(
            'Article', 
            [
                'data' => $article->latest()->get()
            ]
        );
    }

    public function store(Request $request)
    {
        Validator::make($request->all(), [
            'title' => ['required'],
        ])->validate();
  
        Article::create($request->all());
  
        return redirect()->back()
                    ->with('message', 'Article Created Successfully.');
    }

    public function update(Request $request)
    {
        Validator::make($request->all(), [
            'title' => ['required'],
        ])->validate();
  
        if ($request->has('id')) {
            Article::find($request->input('id'))->update($request->all());
            return redirect()->back()
                    ->with('message', 'Post Updated Successfully.');
        }
    }

    public function delete(Request $request)
    {
     
        $request->has('id') ? 
                Article::find($request->input('id'))->delete() :
                redirect()->back()
                    ->with('errors', 'Somethings goes wrong.');
        
        return redirect()->back()
                    ->with('message', 'Article deleted successfully.');
    }
}

Step 5:  Share Inertia Var Globally

Here, I will create the 'message' and 'errors' variables for success message and validation error so. we need to share this variable on app services provider so that we can call it from our view component.

app/Providers/AppServiceProvider.php

namespace App\Providers;
  
use Illuminate\Support\ServiceProvider;
use Illuminate\Support\Facades\Session;
use Inertia\Inertia;
  
class AppServiceProvider extends ServiceProvider
{
    /**
     * Register any application services.
     *
     * @return void
     */
    public function register()
    {
          
    }
  
    /**
     * Bootstrap any application services.
     *
     * @return void
     */
    public function boot()
    {
        Inertia::share([
            'errors' => function () {
                return Session::get('errors')
                    ? Session::get('errors')->getBag('default')->getMessages()
                    : (object) [];
            },
        ]);
  
        Inertia::share('flash', function () {
            return [
                'message' => Session::get('message'),
            ];
        });
    }
}

Step 6: Create View Template 

Here, we need to create an article page. View file where we will write code to list of articles and create and update model code.

resources/js/Pages/Article.vue

Now we need to compile our js code. run below command. so let's run it as bellow:

npm install 
//then
npm run watch

Read also: Laravel 8.x Livewire CRUD Tutorial Step by Step

Now just visit the below link to see our crud operation using inertia js with Laravel 9.

Hope this laravel 9 inertia js crud example will help you.