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
Now just visit the below link to see our crud operation using inertia js with Laravel 9.
LINK
Hope this laravel 9 inertia js crud example will help you.
