Tutorial Laravel E-Commerce Dari Bikin Database Sampai Online di cPanel

Sebelum kita mulai ngetik kode, mari kita resapi dulu kutipan sakti dari Om Robert C. Martin di bukunya yang legendaris, Clean Code:

Maksudnya gini coy, kode yang berantakan emang kadang bisa aja jalan, tapi ujung-ujungnya bakal bikin puyeng sendiri pas website udah makin gede. Makanya, dari penjelasan ini kita kudu biasain nulis script yang rapi. Ngulik struktur Laravel ini ibaratnya kita lagi nyusun pondasi website biar kerangka SEO-nya cakep. Kalo ente udah kebiasa utak-atik kode XML atau HTML yang ruwet demi ngejar skor sempurna 100 di PageSpeed mobile, nah mental teliti dan bersih kayak gitu bakal ngebantu banget pas kita mainan logika backend di mari.

Udah siap? Yuk, tarik napas, buka XAMPP, idupin Apache sama MySQL-nya. Kita masuk ke selanjutnya!

Babat Alas Database & Bikin Etalase Barang

Di penjelasan pertama ini, target kita kagak usah muluk-muluk dulu. Kita bakal bikin pondasi buat nyimpen data barang jualan. Kalo di toko offline, ini ibarat kita lagi pesen rak kaca buat majang barang. Di Laravel, rak kaca ini namanya Database dan Migration.

Ane asumsikan ente udah install Laravel-nya pake composer dan udah nyambungin file .env ke database MySQL di XAMPP (kayak yang sempet dibahas sebelumnya). Kalo udah, buka terminal atau CMD, arahin ke folder project ente, trus ketik mantra sakti ini:

php artisan make:model Product -m

Penjelasan Singkat: Perintah di atas itu ibarat sekali tepuk dua laler dapet. Kita nyuruh Laravel bikinin file Model (namanya Product) sekaligus bikinin file Migration (karena ada tambahan -m di belakangnya). Model itu buat jembatan komunikasi ke data, nah Migration itu blueprint atau rancangan tabel buat di MySQL-nya.

Di dalemnya, ada fungsi up(). Nah, di sini kita tentuin isi rak etalase kita ada apa aja. Tambahin script di bawah ini:

public function up(): void
{
    Schema::create('products', function (Blueprint $table) {
        $table->id();
        $table->string('name'); // Buat nyimpen nama barang
        $table->text('description'); // Buat deskripsi panjang, biar SEO friendly!
        $table->integer('price'); // Buat nyimpen harga
        $table->integer('stock'); // Buat nyimpen sisa stok barang
        $table->string('image')->nullable(); // Buat nyimpen nama file gambar, dibikin 'nullable' biar boleh kosong
        $table->timestamps(); // Ini otomatis ngerekam kapan barang ditambahin/diubah
    });
}

Kalo udah diketik rapi, save filenya. Trus balik lagi ke terminal, jalankan perintah ini biar rancangannya beneran dibikinin jadi tabel di phpMyAdmin ente:

php artisan migrate

Kalo muncul tulisan Done atau ijo-ijo, berarti etalase ente udah jadi di database! Cakep bener dah.

Kita kudu ngasih tau si Laravel, kolom mana aja di tabel tadi yang boleh diisi data sama sistem (Mass Assignment). Ini penting buat keamanan, biar website kagak gampang disusupi data ga jelas. Tambahin properti $fillable kayak gini:

<?php
namespace App\Models;

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

class Product extends Model
{
    use HasFactory;

    // Ini ngasih tau Laravel: "Hei, kolom-kolom ini aja ya yang boleh diisi datanya!"
    protected $fillable = [
        'name',
        'description',
        'price',
        'stock',
        'image',
    ];
}

Save lagi. Selesai dah tugas kita buat nyiapin pondasi barang! Gimana? Masih aman kan kepalanya? Belom ngebul dong? Di marih ini kita udah berhasil bikin rancangan database buat naruh produk e-commerce kita pake Laravel. Mantep, semangatnya emang kudu terus nyala nih! Sambil nyeruput kopi, kita lanjutin lagi ngoprek website e-commerce-nya.

---

Di penjelasan ini, mari kita resapi dulu petuah sakti dari suhu User Experience (UX), Om Steve Krug, di dalem bukunya yang melegenda, Don't Make Me Think:

Intinya, jangan bikin orang (atau developer lain) mikir keras pas ngeliat website atau kode buatan kita. Semuanya kudu dirancang gampang dimengerti dan rapi. Makanya di Laravel, urusan ngambil data, ngatur alamat URL, sampe nampilin desain HTML itu dipisah-pisah tempatnya. Kagak dicampur aduk jadi satu pepesan kosong.

Di penjelasan sebelumnya kita udah kelar bikin etalase (Database) dan penjaganya (Model). Sekarang, kita butuh Pelayan Toko buat ngambilin barang dari etalase, terus kita butuh Pintu Masuk biar pembeli bisa dateng, dan Ruang Pameran buat majang barangnya. Yuk, langsung kita gass!

Bikin Pelayan, Buka Pintu, dan Nata Ruang Pameran

Buka terminal ente, ketik mantra ini:

php artisan make:controller ProductController

Kalo udah beres, ente cari file-nya di dalem folder app/Http/Controllers/ProductController.php. Buka dah tuh file, trus tambahin kode buat ngambil data barang kayak gini:

<?php
namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Models\Product; // Panggil penjaga etalasenya di mari

class ProductController extends Controller
{
    public function index()
    {
        // Nyuruh Model 'Product' ngambil semua data dari database
        $products = Product::all();

        // Bawa datanya ke ruang pameran (view) yang namanya 'products.index'
        return view('products.index', compact('products'));
    }
}

Ente meluncur ke folder routes/ trus buka file web.php. Tambahin script ini di baris paling bawah:

use App\Http\Controllers\ProductController;

// Kalo ada orang ngetik URL '/produk', arahin ke ProductController bagian 'index'
Route::get('/produk', [ProductController::class, 'index']);

Buka folder resources/views/. Bikin folder baru namanya products. Nah, di dalem folder products itu, ente bikin file baru namanya index.blade.php.

Pas nulis struktur HTML di mari, biasain kodenya tetep bersih yak. Kerapian struktur tag dan heading itu ngaruh banget biar performa website tetep ngacir dan disayang mesin pencari. Sama persis logikanya kayak pas ente lagi ngoprek-ngoprek template biar skor mobile dapet cepek di PageSpeed.

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Katalog Barang Jualan</title>
</head>
<body style="font-family: sans-serif; padding: 20px;">
    <h2>Daftar Barang Jualan</h2>

    <div style="display: flex; gap: 20px; flex-wrap: wrap;">
        {{-- Kita pake '@foreach' buat ngulang nampilin data produk dari database --}}
        @foreach ($products as $item)
            <div style="border: 1px solid #ccc; padding: 15px; width: 250px; border-radius: 8px;">
                <h3>{{ $item->name }}</h3>
                <p style="color: #555; font-size: 14px;">{{ $item->description }}</p>
                <p><strong>Harga: </strong> Rp {{ number_format($item->price, 0, ',', '.') }}</p>
                <p>Sisa Stok: {{ $item->stock }}</p>
                <button style="background-color: green; color: white; padding: 10px; border: none; cursor: pointer;">
                    Beli Sekarang
                </button>
            </div>
        @endforeach
    </div>

    {{-- Kalo datanya kosong, tampilin pesen ini --}}
    @if($products->isEmpty())
        <p>Yah, barangnya belom ada nih. Etalase masih kosong melompong!</p>
    @endif
</body>
</html>

Alhamdulillah, kelar juga! Sekarang coba ente nyalain server lokalnya (php artisan serve), trus buka browser dan ketik: http://127.0.0.1:8000/produk.

Pasti yang nongol tulisannya "Yah, barangnya belom ada nih...". Ya wajar bae, pan di database kita belom ada isinya sama sekali! Ibarat toko udah buka, etalase udah kinclong, tapi kardus barang dari supplier belom dibongkar.

---

Di penjelasan ini, misi utama kita adalah menuhin etalase yang sebelonnya masih kosong melompong. Kita bakal bikin fitur Tambah Barang (Create). Sebelum ngetik script, mari kita resapi dulu kutipan sakti dari buku The Pragmatic Programmer karya Andrew Hunt dan David Thomas:

Maksudnya apa tuh? Intinya, kita kagak boleh percaya gitu aja sama apa yang diinput orang ke dalem sistem kita. Kudu dicek, divalidasi, biar database kagak jebol atau disusupi kode aneh-aneh. Makanya, pas bikin formulir ntar, kita bakal pasang sedikit "satpam" (validasi). Yuk, langsung kita babat!

Bikin Formulir dan Masukin Barang ke Gudang

// Pintu buat nampilin halaman formulir (pake GET)
Route::get('/produk/tambah', [ProductController::class, 'create']);

// Pintu rahasia buat nangkep data dan dikirim ke gudang (pake POST)
Route::post('/produk/simpan', [ProductController::class, 'store']);

Di sini kita bikin HTML form. Pas nambahin input gambar, anggap aja ini lagi nyiapin thumbnail buat konten video; gambarnya kudu disiapin tempatnya biar pas di-upload, tampilannya narik perhatian pengunjung tapi ukurannya tetep aman biar loading website di mobile tetep ngacir.

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tambah Barang Dagangan</title>
</head>
<body style="font-family: sans-serif; padding: 20px;">
    <h2>Formulir Tambah Barang</h2>

    <form action="/produk/simpan" method="POST" enctype="multipart/form-data" style="display: flex; flex-direction: column; max-width: 400px; gap: 15px;">
        {{-- Wajib fardhu ain di Laravel! Ini token keamanan biar form kagak dibajak --}}
        @csrf 

        <div>
            <label>Nama Barang:</label><br>
            <input type="text" name="name" required style="width: 100%; padding: 8px;">
        </div>

        <div>
            <label>Deskripsi (Bikin yang SEO Friendly):</label><br>
            <textarea name="description" rows="4" required style="width: 100%; padding: 8px;"></textarea>
        </div>

        <div>
            <label>Harga (Rupiah):</label><br>
            <input type="number" name="price" required style="width: 100%; padding: 8px;">
        </div>

        <div>
            <label>Jumlah Stok:</label><br>
            <input type="number" name="stock" required style="width: 100%; padding: 8px;">
        </div>

        <div>
            <label>Foto Produk / Thumbnail:</label><br>
            <input type="file" name="image" accept="image/*" style="width: 100%; padding: 8px;">
        </div>

        <button type="submit" style="background-color: blue; color: white; padding: 10px; border: none; cursor: pointer;">
            Simpan Barang
        </button>
    </form>

    <br>
    <a href="/produk" style="color: red; text-decoration: none;">&larr; Batal dan Balik ke Etalase</a>
</body>
</html>

    // Fungsi buat nampilin formulir
    public function create()
    {
        return view('products.create');
    }

    // Fungsi buat nangkep data (Validasi & Simpan)
    public function store(Request $request)
    {
        // 1. Ini satpamnya. Kita validasi dulu datanya bener kagak.
        $request->validate([
            'name' => 'required|max:255',
            'description' => 'required',
            'price' => 'required|numeric',
            'stock' => 'required|numeric',
            'image' => 'image|mimes:jpeg,png,jpg|max:2048', // Maksimal 2MB biar enteng
        ]);

        // 2. Ngurusin foto kalo pengunjung nge-upload gambar
        $imageName = null;
        if ($request->hasFile('image')) {
            $imageName = time() . '.' . $request->image->extension();  
            $request->image->move(public_path('images'), $imageName);
        }

        // 3. Masukin data ke database (Model Product)
        Product::create([
            'name' => $request->name,
            'description' => $request->description,
            'price' => $request->price,
            'stock' => $request->stock,
            'image' => $imageName,
        ]);

        // 4. Kalo udah sukses, suruh balik lagi ke halaman depan etalase
        return redirect('/produk');
    }

Alhamdulillah! Selesai juga ritual input datanya. Sekarang, coba ente buka di browser: http://127.0.0.1:8000/produk/tambah. Isi dah tuh formulirnya, pilih foto yang cakep, terus klik tombol Simpan Barang. Kalo kodenya bener, ente bakal otomatis dilempar balik ke halaman /produk dan jreng-jreng, barang yang barusan ente masukin udah nangkring di etalase!

---

Balik lagi di mari! Udah seduh kopi yang baru belom nih? Kalo sebelonnya kita udah sukses masukin barang ke dalem etalase, sekarang di penjelasan ini kita bakal bikin fitur buat ngutak-ngatik data barangnya. Di dunia programming, proses Edit dan Hapus ini ngelengkapin siklus yang namanya CRUD (Create, Read, Update, Delete).

Sebelum ngetik, resapi dulu kutipan dari bapak software engineering, Martin Fowler:

Sama kayak pas lagi ngulik-ngulik struktur XML/HTML di template Blogger demi ngejar skor mobile sempurna di PageSpeed. Kodenya harus rapi, efisien, dan gampang dibaca. Yuk, kita mulai babat kodenya!

Bengkel Revisi (Edit) dan Petugas Kebersihan (Delete)

Kita butuh tiga rute baru di web.php: satu buat nampilin form edit, satu buat nyimpen perubahannya, dan satu lagi buat ngapus data. Tambahin script ini:

// Pintu buat nampilin form edit barang (butuh ID barangnya biar tau mana yang diedit)
Route::get('/produk/{id}/edit', [ProductController::class, 'edit']);

// Pintu buat nyimpen data yang udah diedit (biasanya pake metode PUT/PATCH)
Route::put('/produk/{id}', [ProductController::class, 'update']);

// Pintu buat ngapus data dari database (pake metode DELETE)
Route::delete('/produk/{id}', [ProductController::class, 'destroy']);

Bikin file baru namanya edit.blade.php. Isinya mirip-mirip sama form tambah barang sebelonnya, cuma bedanya sekarang kotak isiannya udah ada nilai bawaan dari database (dan jangan lupa tambahin @method('PUT')).

Trus di ProductController.php tambahin fungsi ini:

    public function edit($id)
    {
        $product = Product::findOrFail($id); 
        return view('products.edit', compact('product'));
    }

    public function update(Request $request, $id)
    {
        $request->validate([
            'name' => 'required|max:255',
            'description' => 'required',
            'price' => 'required|numeric',
            'stock' => 'required|numeric',
        ]);

        $product = Product::findOrFail($id);
        $product->update($request->all());

        return redirect('/produk');
    }

    public function destroy($id)
    {
        $product = Product::findOrFail($id);
        $product->delete();
        return redirect('/produk');
    }

---

Sebelum ngoprek kode buat thumbnail, mari kita resapi dulu wejangan dari Mbah Jakob Nielsen di dalem bukunya Designing Web Usability:

Maksudnya gini, pembeli itu udah ngerasain nyaman atau kagaknya toko kita jauh sebelum mereka ngeluarin duit. Kalo pas buka website, gambarnya pecah, layout-nya berantakan, boro-boro mau klik "Beli", yang ada tab-nya langsung di-close.

Majang Thumbnail Produk & Ngejar Skor SEO

Di penjelasan ini, file gambar yang di-upload udah kita simpen di dalem folder public/images. Sekarang kita tinggal panggil nama file-nya di halaman depan (index.blade.php). Ane udah tambahin atribut alt buat deskripsi gambar (penting banget buat technical SEO) sama loading="lazy" biar website ente kagak ngos-ngosan pas load gambar.

@if($item->image)
    <img src="{{ asset('images/' . $item->image) }}" alt="Thumbnail {{ $item->name }}" loading="lazy" style="width: 100%; height: 180px; object-fit: cover;">
@else
    <div style="width: 100%; height: 180px; background-color: #f5f5f5; display: flex; align-items: center; justify-content: center;">
        <span style="color: #aaa; font-size: 14px;">No Image</span>
    </div>
@endif

---

Kopi panas udah siap lagi? Mantep! Ketimbang kita pusing bikin sistem Keranjang (Cart) sama Payment Gateway yang ribetnya minta ampun buat pemula, kita potong kompas aja pake metode WhatsApp Checkout. Sebelum kita modif kodenya, resapi dulu kutipan dari Om Eric Ries di dalem bukunya The Lean Startup:

Nyambungin Tombol Beli Langsung ke WhatsApp (WA Checkout)

Biar kodenya tetep rapi, kita pake fitur @php ... @endphp bawaan Laravel buat ngeracik kalimat pesenannya sebelum dimasukin ke dalem tombol HTML.

@php
    $nomorWA = "6281234567890"; 
    $teksPesan = "Halo Admin Toko, ane mau order barang ini dong:\n\n";
    $teksPesan .= "Nama Barang: " . $item->name . "\n";
    $teksPesan .= "Harga: Rp " . number_format($item->price, 0, ',', '.') . "\n\n";
    $teksPesan .= "Kira-kira sisa stok yang " . $item->stock . " biji itu masih ready kagak?";
    $linkBeli = "https://wa.me/" . $nomorWA . "?text=" . urlencode($teksPesan);
@endphp

<a href="{{ $linkBeli }}" target="_blank" style="...">🛒 Beli via WhatsApp</a>

---

Di penjelasan ini, kita udah sukses bikin tombol pesenan lari ke WhatsApp. Tapi ada satu celah nih. Kalo website kita ini di-hosting dan link-nya disebar, semua pengunjung bisa ngakses tombol "Edit" sama "Hapus". Wah, bisa berabe! Sebelum ngetik script, mari kita resapi dulu petuah sakti dari pakar mesin pencari, Om Danny Sullivan:

Misahin Pintu Admin & Pasang Jurus SEO Open Graph

Kita bakal bikin halaman depan khusus buat pembeli (bersih dari tombol edit/hapus), trus mindahin akses gudang (CRUD) ke URL khusus yang ada embel-embel /admin/ di web.php.

// 1. PINTU DEPAN BUAT PEMBELI (Cuma bisa liat barang)
Route::get('/', [ProductController::class, 'katalogUtama']);

// 2. PINTU BELAKANG BUAT ADMIN (Bisa nambah, ngedit, ngapus)
Route::prefix('admin')->group(function () {
    // Taruh route CRUD disini...
});

Jangan lupa siapin meta property Open Graph di welcome.blade.php biar pas di-share di FB/WA thumbnail ente mejeng gagah!

---

Di penjelasan sebelumnya, kita udah sukses misahin pintu depan sama belakang. Tapi masalahnya, pintu belakang toko kita ini belom digembok! Resapi dulu petuah dari suhu keamanan siber, Mbah Bruce Schneier:

Masang Gembok Pintu Admin (Authentication & Middleware)

Kita pake jurus sat-set ala ninja pake HTTP Basic Auth bawaan Laravel. Ente cuma butuh nambahin ->middleware('auth.basic') di grup route admin ente tadi.

Route::prefix('admin')->middleware('auth.basic')->group(function () {
   // Route CRUD disini
});

---

Nah, sekarang kita bakal bikin fitur yang paling krusial buat naikin omset: Fitur Pencarian (Search). Seperti kata Om Peter Morville:

Bikin Kolom Pencarian Biar Pembeli Kagak Nyasar

Di Controller, kita modif sedikit logika buat nangkep pencarian pake perintah LIKE.

if ($request->has('cari') && $request->cari != '') {
    $katakunci = $request->cari;
    $products = Product::where('name', 'like', "%" . $katakunci . "%")
                       ->orWhere('description', 'like', "%" . $katakunci . "%")
                       ->get();
}

---

Alhamdulillah, nyampe juga kita di puncak gunung! Kopi seduhan terakhir udah siap? Di penjelasan ini, kita bakal bongkar rahasia ngelepas website ke alam liar (Internet). Seperti wejangan dari Om Seth Godin:

Meroket ke Internet (Hosting & Deploy)

Akhirnya kelar juga series panjang kita ini. Ente udah resmi jadi developer e-commerce sekarang. Selamat berkarya, dan semoga website barunya ngacir mendatangkan cuan berkah!

---

Nah, sebagai Bonus Track, ane siapin sesi FAQ alias rangkuman pertanyaan yang paling sering bikin developer pemula garuk-garuk kepala. Resapi dulu kutipan dari Om Steve McConnell: