Membangun aplikasi web di era modern memerlukan pondasi yang kokoh. Framework modern memberikan fleksibilitas luar biasa bagi developer untuk menghadirkan fitur kompleks secara cepat tanpa mengabaikan aspek keamanan dan keandalan sistem.
Tahapan Implementasi & Walkthrough Kode
Berikut adalah langkah demi langkah teknis yang dapat Anda ikuti langsung pada codebase Anda:
Tahap 1: Penulisan Kode & Konfigurasi
<?php
namespace App\Http\Controllers;
//import model product
use App\Models\Product;
//import return type View
use Illuminate\View\View;
//import return type redirectResponse
use Illuminate\Http\RedirectResponse;
//import Http Request
use Illuminate\Http\Request;
class ProductController extends Controller
{
/**
* index
*
* @return void
*/
public function index() : View
{
//get all products
$products = Product::latest()->paginate(10);
//render view with products
return view('products.index', compact('products'));
}
/**
* create
*
* @return View
*/
public function create(): View
{
return view('products.create');
}
/**
* store
*
* @param mixed $request
* @return RedirectResponse
*/
public function store(Request $request): RedirectResponse
{
//validate form
$request->validate([
'image' => 'required|image|mimes:jpeg,jpg,png|max:2048',
'title' => 'required|min:5',
'description' => 'required|min:10',
'price' => 'required|numeric',
'stock' => 'required|numeric'
]);
//upload image
$image = $request->file('image');
$image->storeAs('products', $image->hashName(), 'public');
//create product
Product::create([
'image' => $image->hashName(),
'title' => $request->title,
'description' => $request->description,
'price' => $request->price,
'stock' => $request->stock
]);
//redirect to index
return redirect()->route('products.index')->with(['success' => 'Data Berhasil Disimpan!']);
}
}
Tahap 2: Penulisan Kode & Konfigurasi
//import return type redirectResponse
use Illuminate\Http\RedirectResponse;
Tahap 3: Penulisan Kode & Konfigurasi
//import Http Request
use Illuminate\Http\Request;
Tahap 4: Penulisan Kode & Konfigurasi
public function create(): View
{
return view('products.create');
}
Tahap 5: Penulisan Kode & Konfigurasi
public function store(Request $request): RedirectResponse
{
//...
}
Tahap 6: Penulisan Kode & Konfigurasi
//validate form
$request->validate([
'image' => 'required|image|mimes:jpeg,jpg,png|max:2048',
'title' => 'required|min:5',
'description' => 'required|min:10',
'price' => 'required|numeric',
'stock' => 'required|numeric'
]);
Tahap 7: Penulisan Kode & Konfigurasi
//upload image
$image = $request->file('image');
$image->storeAs('products', $image->hashName(), 'public');
Tahap 8: Penulisan Kode & Konfigurasi
//create product
Product::create([
'image' => $image->hashName(),
'title' => $request->title,
'description' => $request->description,
'price' => $request->price,
'stock' => $request->stock
]);
Tahap 9: Penulisan Kode & Konfigurasi
//redirect to index
return redirect()->route('products.index')->with(['success' => 'Data Berhasil Disimpan!']);
Tahap 10: Penulisan Kode & Konfigurasi
resources
└── views
└── products
├── index.blade.php
└── create.blade.php
Tahap 11: Penulisan Kode & Konfigurasi
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Add New Product - SantriKoding.com</title>
<!-- Tailwind CSS CDN -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- CKEditor (opsional, untuk rich text description) -->
<script src="https://cdn.ckeditor.com/4.22.1/standard/ckeditor.js"></script>
</head>
<body class="bg-gray-100">
<div class="max-w-6xl mx-auto px-4 py-10">
<div class="text-center">
<h3 class="text-2xl font-bold mb-2">Tutorial Laravel 13 untuk Pemula</h3>
<h5 class="text-sm">
<a href="https://santrikoding.com" class="text-blue-600 hover:underline">www.santrikoding.com</a>
</h5>
<hr class="my-6 border-gray-200">
</div>
<div class="bg-white rounded-2xl shadow-sm border border-gray-200">
<div class="p-6">
<div class="flex items-center justify-between mb-6">
<h4 class="text-lg font-semibold text-gray-900">Tambah Product</h4>
<a href="{{ route('products.index') }}"
class="px-4 py-2 rounded-lg bg-gray-900 text-white text-sm font-semibold hover:bg-gray-800 transition">
BACK
</a>
</div>
<form action="{{ route('products.store') }}" method="POST" enctype="multipart/form-data" class="space-y-5">
@csrf
<div>
<label class="block text-sm font-semibold text-gray-700 mb-2">IMAGE</label>
<input type="file" name="image"
class="block w-full text-sm
file:mr-4 file:py-2 file:px-4
file:rounded-lg file:border-0
file:bg-gray-900 file:text-white
hover:file:bg-gray-800
border border-gray-200 rounded-lg bg-white">
@error('image')
<div class="mt-2 text-sm text-red-600">{{ $message }}</div>
@enderror
</div>
<div>
<label class="block text-sm font-semibold text-gray-700 mb-2">TITLE</label>
<input type="text" name="title" value="{{ old('title') }}"
placeholder="Masukkan Title Product"
class="w-full border border-gray-200 rounded-lg px-4 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-gray-200">
@error('title')
<div class="mt-2 text-sm text-red-600">{{ $message }}</div>
@enderror
</div>
<div>
<label class="block text-sm font-semibold text-gray-700 mb-2">DESCRIPTION</label>
<textarea name="description" id="description" rows="6"
class="w-full border border-gray-200 rounded-lg px-4 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-gray-200"
placeholder="Masukkan Description Product">{{ old('description') }}</textarea>
@error('description')
<div class="mt-2 text-sm text-red-600">{{ $message }}</div>
@enderror
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-5">
<div>
<label class="block text-sm font-semibold text-gray-700 mb-2">PRICE</label>
<input type="number" name="price" value="{{ old('price') }}"
placeholder="Masukkan Harga Product"
class="w-full border border-gray-200 rounded-lg px-4 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-gray-200">
@error('price')
<div class="mt-2 text-sm text-red-600">{{ $message }}</div>
@enderror
</div>
<div>
<label class="block text-sm font-semibold text-gray-700 mb-2">STOCK</label>
<input type="number" name="stock" value="{{ old('stock') }}"
placeholder="Masukkan Stock Product"
class="w-full border border-gray-200 rounded-lg px-4 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-gray-200">
@error('stock')
<div class="mt-2 text-sm text-red-600">{{ $message }}</div>
@enderror
</div>
</div>
<button type="submit"
class="inline-flex items-center justify-center px-4 py-2 rounded-lg
bg-emerald-600 text-white text-sm font-semibold hover:bg-emerald-700 transition">
SAVE
</button>
</form>
</div>
</div>
</div>
<script>
// inisialisasi rich text editor untuk textarea description (opsional)
CKEDITOR.replace('description');
</script>
</body>
</html>
Tahap 12: Penulisan Kode & Konfigurasi
<form action="{{ route('products.store') }}" method="POST" enctype="multipart/form-data">
//...
</form>
Tahap 13: Penulisan Kode & Konfigurasi
<script>
CKEDITOR.replace('description');
</script>
Tahap 14: Penulisan Kode & Konfigurasi
php artisan storage:link
Selalu gunakan pendekatan deklaratif, validasi input seawal mungkin di boundary layer, dan lakukan logging terstruktur untuk memudahkan observability ketika sistem dijalankan di lingkungan cloud produksi.
Kesimpulan
Dengan mengikuti langkah-langkah terstruktur di atas, implementasi modul Anda akan jauh lebih rapi, aman dari bug umum, serta siap diskalakan ke lingkungan produksi.
Nantikan artikel tutorial praktis lainnya seputar fullstack development, microservices, dan otomasi AI di Blog Engineering SiHubung. Selamat mencoba!