Bangun website e-commerce impian Anda dengan panduan lengkap Laravel! Temukan tips dan trik efisien untuk memaksimalkan potensi penjualan Anda. Klik untuk mulai!
Laravel adalah framework PHP yang sangat populer untuk membangun aplikasi web modern, termasuk website e-commerce. Dengan Laravel, Anda dapat membangun aplikasi yang scalable, aman, dan mudah dikembangkan.
Website e-commerce adalah platform yang memungkinkan penjual dan pembeli bertransaksi secara online. Fitur utama yang biasa ada di website e-commerce meliputi katalog produk, keranjang belanja, sistem pembayaran, dan manajemen pesanan.
Sebelum memulai, pastikan Anda sudah menyiapkan environment berikut:
Unduh dan instal Composer dari situs resmi: https://getcomposer.org/download/
php -v
composer -V
Pastikan versi PHP minimal 8.0 dan Composer sudah terpasang dengan benar.
Gunakan Composer untuk membuat proyek Laravel baru dengan perintah berikut:
composer create-project --prefer-dist laravel/laravel ecommerce-app
Masuk ke folder proyek:
cd ecommerce-app
Jalankan server development Laravel:
php artisan serve
Buka http://localhost:8000 di browser untuk melihat halaman awal Laravel.
Kita akan membuat model dan migrasi untuk tabel produk yang akan ditampilkan di website e-commerce.
php artisan make:model Product -m
File migrasi akan dibuat di
database/migrations/
. Edit file migrasi tersebut seperti berikut:
public function up()
{
Schema::create('products', function (Blueprint $table) {
$table->id();
$table->string('name');
$table->text('description')->nullable();
$table->decimal('price', 10, 2);
$table->string('image')->nullable();
$table->timestamps();
});
}
Jalankan migrasi untuk membuat tabel:
php artisan migrate
php artisan make:seeder ProductSeeder
Edit file
database/seeders/ProductSeeder.php
seperti berikut:
use Illuminate\Database\Seeder;
use App\Models\Product;
class ProductSeeder extends Seeder
{
public function run()
{
Product::create([
'name' => 'Sepatu Sneakers',
'description' => 'Sepatu sneakers nyaman untuk aktivitas sehari-hari.',
'price' => 350000,
'image' => 'https://placehold.co/400x300/png?text=Sepatu+Sneakers',
]);
Product::create([
'name' => 'Tas Ransel',
'description' => 'Tas ransel stylish dan kuat untuk membawa barang Anda.',
'price' => 450000,
'image' => 'https://placehold.co/400x300/png?text=Tas+Ransel',
]);
Product::create([
'name' => 'Jam Tangan Digital',
'description' => 'Jam tangan digital dengan fitur lengkap dan desain modern.',
'price' => 550000,
'image' => 'https://placehold.co/400x300/png?text=Jam+Tangan+Digital',
]);
}
}
Daftarkan seeder ini di
database/seeders/DatabaseSeeder.php
dengan menambahkan:
$this->call(ProductSeeder::class);
Jalankan seeder:
php artisan db:seed
Selanjutnya kita buat controller untuk menampilkan produk dan mengelola keranjang belanja.
php artisan make:controller ProductController
Edit
app/Http/Controllers/ProductController.php
seperti berikut:
namespace App\Http\Controllers;
use App\Models\Product;
use Illuminate\Http\Request;
class ProductController extends Controller
{
public function index()
{
$products = Product::all();
return view('products.index', compact('products'));
}
}
use App\Http\Controllers\ProductController;
Route::get('/', [ProductController::class, 'index'])->name('products.index');
Kita buat tampilan untuk menampilkan daftar produk dan keranjang belanja menggunakan Blade templating.
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Daftar Produk</title>
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
</head>
<body class="bg-gray-50">
<div class="max-w-6xl mx-auto p-6">
<h1 class="text-3xl font-bold mb-6 text-green-700">Daftar Produk</h1>
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6">
@foreach ($products as $product)
<div class="bg-white rounded-lg shadow p-4 flex flex-col">
<img src="{{ $product->image }}" alt="Gambar produk {{ $product->name }}" class="w-full h-48 object-cover rounded mb-4">
<h2 class="text-xl font-semibold mb-2">{{ $product->name }}</h2>
<p class="text-gray-700 mb-4">{{ $product->description }}</p>
<p class="font-bold text-green-700 mb-4">Rp {{ number_format($product->price, 0, ',', '.') }}</p>
<form action="{{ route('cart.add', $product->id) }}" method="POST">
@csrf
<button type="submit" class="bg-green-600 text-white px-4 py-2 rounded hover:bg-green-700">Tambah ke Keranjang</button>
</form>
</div>
@endforeach
</div>
</div>
</body>
</html>
php artisan make:controller CartController
Edit
app/Http/Controllers/CartController.php
:
namespace App\Http\Controllers;
use App\Models\Product;
use Illuminate\Http\Request;
class CartController extends Controller
{
public function index()
{
$cart = session()->get('cart', []);
return view('cart.index', compact('cart'));
}
public function add(Request $request, $id)
{
$product = Product::findOrFail($id);
$cart = session()->get('cart', []);
if(isset($cart[$id])) {
$cart[$id]['quantity']++;
} else {
$cart[$id] = [
"name" => $product->name,
"quantity" => 1,
"price" => $product->price,
"image" => $product->image
];
}
session()->put('cart', $cart);
return redirect()->back()->with('success', 'Produk berhasil ditambahkan ke keranjang!');
}
public function remove(Request $request, $id)
{
$cart = session()->get('cart', []);
if(isset($cart[$id])) {
unset($cart[$id]);
session()->put('cart', $cart);
}
return redirect()->back()->with('success', 'Produk berhasil dihapus dari keranjang!');
}
}
Tambahkan route di
routes/web.php
:
use App\Http\Controllers\CartController;
Route::get('/cart', [CartController::class, 'index'])->name('cart.index');
Route::post('/cart/add/{id}', [CartController::class, 'add'])->name('cart.add');
Route::post('/cart/remove/{id}', [CartController::class, 'remove'])->name('cart.remove');
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Keranjang Belanja</title>
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
</head>
<body class="bg-gray-50">
<div class="max-w-4xl mx-auto p-6">
<h1 class="text-3xl font-bold mb-6 text-green-700">Keranjang Belanja</h1>
@if(session('success'))
<div class="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded mb-6">
{{ session('success') }}
</div>
@endif
@if(count($cart) > 0)
<table class="w-full text-left border-collapse">
<thead>
<tr>
<th class="border-b p-3">Produk</th>
<th class="border-b p-3">Harga</th>
<th class="border-b p-3">Jumlah</th>
<th class="border-b p-3">Aksi</th>
</tr>
</thead>
<tbody>
@php $total = 0; @endphp
@foreach($cart as $id => $details)
@php $total += $details['price'] * $details['quantity']; @endphp
<tr>
<td class="border-b p-3 flex items-center space-x-4">
<img src="{{ $details['image'] }}" alt="Gambar produk {{ $details['name'] }}" class="w-16 h-16 object-cover rounded">
<span>{{ $details['name'] }}</span>
</td>
<td class="border-b p-3">Rp {{ number_format($details['price'], 0, ',', '.') }}</td>
<td class="border-b p-3">{{ $details['quantity'] }}</td>
<td class="border-b p-3">
<form action="{{ route('cart.remove', $id) }}" method="POST">
@csrf
<button type="submit" class="text-red-600 hover:text-red-800"><i class="fas fa-trash-alt"></i></button>
</form>
</td>
</tr>
@endforeach
<tr>
<td colspan="3" class="text-right font-bold p-3">Total</td>
<td class="font-bold p-3">Rp {{ number_format($total, 0, ',', '.') }}</td>
</tr>
</tbody>
</table>
@else
<p>Keranjang belanja Anda kosong.</p>
@endif
<div class="mt-6">
<a href="{{ route('products.index') }}" class="text-green-600 hover:underline"><i class="fas fa-arrow-left"></i> Kembali ke Produk</a>
</div>
</div>
</body>
</html>
Fitur keranjang belanja sudah kita buat dengan menyimpan data produk di session. Anda dapat menambah, melihat, dan menghapus produk dari keranjang.
Untuk pengembangan lebih lanjut, Anda bisa menambahkan fitur update jumlah produk, validasi stok, dan penyimpanan keranjang di database untuk user yang login.
Untuk menerima pembayaran online, kita akan menggunakan Stripe, salah satu layanan pembayaran populer dan mudah diintegrasikan dengan Laravel.
composer require stripe/stripe-php
Daftarkan akun Stripe di
https://dashboard.stripe.com/register
dan dapatkan API keys. Tambahkan ke file
.env
:
STRIPE_KEY=your_stripe_public_key
STRIPE_SECRET=your_stripe_secret_key
php artisan make:controller PaymentController
Edit
app/Http/Controllers/PaymentController.php
:
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use Stripe\Stripe;
use Stripe\Charge;
class PaymentController extends Controller
{
public function checkout()
{
return view('payment.checkout');
}
public function process(Request $request)
{
Stripe::setApiKey(env('STRIPE_SECRET'));
try {
$charge = Charge::create([
'amount' => $request->amount * 100, // dalam sen
'currency' => 'idr',
'source' => $request->stripeToken,
'description' => 'Pembayaran E-Commerce Laravel',
]);
return redirect()->route('payment.success');
} catch (\Exception $e) {
return back()->withErrors(['error' => $e->getMessage()]);
}
}
public function success()
{
return view('payment.success');
}
}
use App\Http\Controllers\PaymentController;
Route::get('/checkout', [PaymentController::class, 'checkout'])->name('payment.checkout');
Route::post('/checkout', [PaymentController::class, 'process'])->name('payment.process');
Route::get('/success', [PaymentController::class, 'success'])->name('payment.success');
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Checkout Pembayaran</title>
<script src="https://js.stripe.com/v3/"></script>
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
</head>
<body class="bg-gray-50">
<div class="max-w-md mx-auto p-6 bg-white rounded-lg shadow mt-10">
<h1 class="text-2xl font-bold mb-6 text-green-700">Checkout Pembayaran</h1>
@if ($errors->any())
<div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-4">
<ul>
@foreach ($errors->all() as $error)
<li>{{ $error }}</li>
@endforeach
</ul>
</div>
@endif
<form id="payment-form" action="{{ route('payment.process') }}" method="POST">
@csrf
<input type="hidden" name="amount" value="100000" />
<div id="card-element" class="mb-4"></div>
<button type="submit" class="bg-green-600 text-white px-4 py-2 rounded hover:bg-green-700">Bayar</button>
</form>
</div>
<script>
const stripe = Stripe('{{ env('STRIPE_KEY') }}');
const elements = stripe.elements();
const card = elements.create('card');
card.mount('#card-element');
const form = document.getElementById('payment-form');
form.addEventListener('submit', async (e) => {
e.preventDefault();
const {token, error} = await stripe.createToken(card);
if(error) {
alert(error.message);
} else {
const hiddenInput = document.createElement('input');
hiddenInput.setAttribute('type', 'hidden');
hiddenInput.setAttribute('name', 'stripeToken');
hiddenInput.setAttribute('value', token.id);
form.appendChild(hiddenInput);
form.submit();
}
});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pembayaran Berhasil</title>
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
</head>
<body class="bg-gray-50">
<div class="max-w-md mx-auto p-6 bg-white rounded-lg shadow mt-10 text-center">
<h1 class="text-3xl font-bold mb-4 text-green-700">Pembayaran Berhasil!</h1>
<p>Terima kasih telah melakukan pembayaran. Pesanan Anda sedang diproses.</p>
<a href="{{ route('products.index') }}" class="mt-6 inline-block text-green-600 hover:underline">Kembali ke Produk</a>
</div>
</body>
</html>
Berikut beberapa sumber dan channel yang dapat Anda gunakan untuk memperdalam pembelajaran Laravel dan pengembangan e-commerce:
Anda dapat mengunduh source code lengkap dari tutorial ini di:
GitHub Repository Laravel E-Commerce App
Angular, Pengembangan Web, Aplikasi Reaktif, Tips dan Trik, Teknologi 2025
Pelajari cara menjadi Master Angular 2025! Temukan tips dan trik membangun aplikasi web reaktif yang memukau. Klik untuk mengubah keterampilan Anda!
Angular, TypeScript, Pengembangan Web, Tutorial, Panduan Lengkap
Pelajari langkah demi langkah dalam panduan lengkap Angular 2 ini! Kembangkan website profesional menggunakan TypeScript dan tingkatkan keterampilan coding Anda!
AngularJS, Direktif Kustom, Aplikasi Halaman Tunggal, Pengembangan Web, Framework JavaScript
Pelajari kekuatan AngularJS dengan direktif kustom! Temukan cara membuat aplikasi halaman tunggal yang intuitif dan responsif. Klik untuk mulai!
API, RESTful, Pengembangan Web, Konsumsi Web, Panduan Lengkap
Pelajari cara membangun dan mengonsumsi RESTful Web API dengan panduan lengkap ini. Dapatkan tips praktis dan teknik teruji untuk sukses dalam pengembangan!
Aplikasi E-Commerce, Angular 2, Pengembangan Web, Panduan Lengkap, Teknologi Informasi
Temukan langkah-langkah mendetail untuk membangun aplikasi e-commerce yang menarik dengan Angular 2. Mulailah perjalanan coding Anda sekarang!
Blazor, Aplikasi E-Commerce, .NET 9, Panduan Lengkap, Pengembangan Web
Temukan cara efektif membangun aplikasi e-commerce menggunakan Blazor dan .NET 9. Panduan lengkap ini menawarkan strategi, tips, dan trik yang tidak boleh Anda lewatkan!
Bootcamp, Django, Python, Pengembangan Web, Keahlian Teknologi
Tingkatkan keahlian web Anda dengan Bootcamp Django & Python! Pelajari keterampilan penting dan kuasai pemrograman untuk sukses di dunia digital. Bergabunglah sekarang!