Laravel Folio CRUD Tutorial for Beginners: Create, Read, Update & Delete Made Easy
Imagine you're building a blog or a product listing site. You need to:
- Add new posts or items
- View them on a page
- Edit them when needed
- Delete them if no longer useful
This is called CRUD: Create, Read, Update, and Delete.
With Laravel Folio, doing CRUD operations is incredibly simple — especially for beginners.
Let’s walk through building a basic Product Manager using Folio step by step.
🔧 Step 1: Set Up Your Laravel Project
Make sure you’re using Laravel 12, then set up your project:
composer create-project laravel/laravel folio-crud-demo
cd folio-crud-demo
composer require laravel/folio
php artisan folio:install
This creates the resources/views/pages folder where we’ll build all our pages.
🌟 Step 2: Create the Product Model and Migration
Run this command to generate the model:
php artisan make:model Product -m
Open the migration file in database/migrations/...create_products_table.php and define columns:
Schema::create('products', function (Blueprint $table) {
$table->id();
$table->string('title');
$table->text('description');
$table->decimal('price', 8, 2);
$table->timestamps();
});
Run the migration:
php artisan migrate
🔃 Step 3: Display All Products (Read)
Create this file:
resources/views/pages/products/index.blade.php
Add this code:
<?php
use App\Models\Product;
use function Laravel\Folio\render;
render(function () {
$products = Product::all();
return view('pages.products.index', compact('products'));
});
?>
<h1>All Products</h1>
<a href="/products/create">Add Product</a>
<ul>
@foreach($products as $product)
<li>
<strong>{{ $product->title }}</strong> - ${{ $product->price }}<br>
<a href="/products/{{ $product->id }}/edit">Edit</a> |
<form action="/products/{{ $product->id }}/delete" method="POST" style="display:inline">
@csrf
<button type="submit">Delete</button>
</form>
</li>
@endforeach
</ul>
➕ Step 4: Create a New Product (Create)
Create this file:
resources/views/pages/products/create.blade.php
<?php
use Illuminate\Http\Request;
use App\Models\Product;
use function Laravel\Folio\render;
render(function (Request $request) {
if ($request->isMethod('post')) {
$request->validate([
'title' => 'required',
'description' => 'required',
'price' => 'required|numeric',
]);
Product::create($request->only('title', 'description', 'price'));
return redirect('/products');
}
return view('pages.products.create');
});
?>
<h1>Add Product</h1>
<form method="POST">
@csrf
<input type="text" name="title" placeholder="Title"><br>
<textarea name="description" placeholder="Description"></textarea><br>
<input type="text" name="price" placeholder="Price"><br>
<button type="submit">Create</button>
</form>
In your model Product.php, make sure you allow mass assignment:
protected $fillable = ['title', 'description', 'price'];
✏️ Step 5: Edit an Existing Product (Update)
Create:
resources/views/pages/products/[id]/edit.blade.php
<?php
use Illuminate\Http\Request;
use App\Models\Product;
use function Laravel\Folio\render;
render(function (Request $request, $id) {
$product = Product::findOrFail($id);
if ($request->isMethod('post')) {
$request->validate([
'title' => 'required',
'description' => 'required',
'price' => 'required|numeric',
]);
$product->update($request->only('title', 'description', 'price'));
return redirect('/products');
}
return view('pages.products.edit', compact('product'));
});
?>
<h1>Edit Product</h1>
<form method="POST">
@csrf
<input type="text" name="title" value="{{ $product->title }}"><br>
<textarea name="description">{{ $product->description }}</textarea><br>
<input type="text" name="price" value="{{ $product->price }}"><br>
<button type="submit">Update</button>
</form>
❌ Step 6: Delete a Product
Create:
resources/views/pages/products/[id]/delete.blade.php
<?php
use App\Models\Product;
use Illuminate\Http\Request;
use function Laravel\Folio\render;
render(function (Request $request, $id) {
$product = Product::findOrFail($id);
$product->delete();
return redirect('/products');
});
?>
🔄 Summary: CRUD with Folio is Simple and Clean
| Action | Page | Method |
|---|---|---|
| Create | /products/create |
POST |
| Read | /products |
GET |
| Update | /products/{id}/edit |
POST |
| Delete | /products/{id}/delete |
POST |
With just a few Blade files and no controller or route setup, you now have a fully working CRUD app.
💡 Bonus Tips
- Add form validation to improve UX
- Use layouts for shared design
- Protect edit/create/delete with middleware (
auth, etc.)
Projects to explore next
Source-code projects from the KritiMyantra catalogue. Check each project's details before buying.
Flask Authentication System (Free Version) - Kritim Yantra
🛠 Features✔ Google & GitHub Authentication✔ User Registration & Login✔ Profile/Dashboard Access✔ Secure & Mi...
Flask Blog CMS with Admin Dashboard — Python Source Code
A Flask-based blogging website with a built-in admin dashboard. Manage articles, images, categories, tags and featured p...
Laravel 12 + ReactJS Starter Kit: Add Multi-Language Support (Arabic, English, Spanish) with Blog CRUD
🚀 Installation & Setup Download & Extract Get the ZIP from kritimyantra.com and extract it. Includes preconfigu...
Comments
No comments yet. Be the first to comment.
Sign in to join the discussion.