Membangun Aplikasi E-Commerce dengan Laravel 8 dan Bootstrap

Laravel 8 merupakan salah satu framework PHP paling populer yang banyak digunakan untuk mengembangkan aplikasi web modern, termasuk e-commerce. Dengan kombinasi Bootstrap sebagai framework CSS, pengembang dapat menciptakan tampilan antarmuka yang elegan dan responsif tanpa mengorbankan kecepatan pengembangan. Artikel ini akan membahas langkah-langkah membangun aplikasi e-commerce sederhana menggunakan Laravel 8 dan Bootstrap.

🛍️ Mengapa Menggunakan Laravel 8 untuk Aplikasi E-Commerce?

Kelebihan Laravel dalam Membangun Platform Online

Laravel memiliki sistem arsitektur yang kuat dengan fitur-fitur unggulan seperti Eloquent ORM, sistem autentikasi bawaan, Blade templating, serta dukungan caching dan routing yang efisien. Hal ini membuat Laravel menjadi pilihan ideal untuk mengembangkan situs e-commerce yang aman, cepat, dan dapat dikustomisasi dengan mudah.

⚙️ Persiapan Lingkungan Pengembangan

Langkah Awal Sebelum Membuat Proyek

Sebelum memulai, pastikan kamu telah menginstal PHP versi 8.0 atau lebih tinggi, Composer, dan MySQL. Setelah itu, buat proyek baru Laravel dengan perintah berikut:

composer create-project laravel/laravel ecommerce

Kemudian masuk ke folder proyek dan jalankan server pengembangan:

cd ecommerce
php artisan serve

Jika berhasil, kamu bisa mengakses aplikasi di browser melalui http://localhost:8000.

🧱 Desain Database E-Commerce

Struktur Tabel Produk, Pengguna, dan Pesanan

Gunakan sistem migrasi Laravel untuk membuat struktur database. Misalnya, buat model dan migrasi produk:

php artisan make:model Product -m

Lalu edit file migrasi di database/migrations untuk menambahkan kolom berikut:


$table->string('name');
$table->text('description');
$table->decimal('price', 10, 2);
$table->integer('stock');
$table->string('image')->nullable();

Jalankan migrasi dengan perintah: php artisan migrate.

🖋️ Membuat Controller dan Routing

Menangani Logika CRUD Produk

Buat controller baru untuk produk:

php artisan make:controller ProductController --resource

Tambahkan routing di routes/web.php:

Route::resource('products', ProductController::class);

Controller ini akan mengatur semua proses CRUD (Create, Read, Update, Delete) untuk produk e-commerce.

🎨 Integrasi Bootstrap ke Laravel

Membuat Tampilan yang Responsif dan Menarik

Untuk menambahkan Bootstrap, buka file resources/views/layouts/app.blade.php dan tambahkan CDN berikut di dalam tag <head>:


<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

Gunakan komponen Bootstrap seperti card, grid, dan navbar untuk membuat tampilan produk dan halaman checkout agar terlihat profesional 💻.

💳 Menambahkan Fitur Keranjang Belanja

Session Management untuk Menyimpan Produk

Laravel menyediakan sistem session yang dapat digunakan untuk menyimpan item sementara di keranjang belanja. Contoh kode sederhana:


$cart = session()->get('cart', []);
$cart[$productId] = [
  'name' => $product->name,
  'quantity' => 1,
  'price' => $product->price,
  'image' => $product->image
];
session(['cart' => $cart]);

Dengan pendekatan ini, pengguna dapat menambahkan dan menghapus produk tanpa login terlebih dahulu 🛒.

🔐 Autentikasi dan Checkout

Mengelola Proses Login dan Transaksi

Gunakan package Laravel Breeze untuk menambahkan sistem autentikasi pengguna dengan cepat:


composer require laravel/breeze --dev
php artisan breeze:install
npm install && npm run dev
php artisan migrate

Setelah login diaktifkan, pengguna dapat melakukan checkout dengan menyimpan data transaksi ke tabel orders. Ini dapat dikembangkan lebih lanjut untuk integrasi dengan payment gateway seperti Midtrans atau Xendit.

📦 Menampilkan Produk di Halaman Utama

Blade Template untuk Tampilan Dinamis

Buat halaman utama di resources/views/products/index.blade.php dengan kode berikut:


@foreach($products as $product)
  <div class="col-md-3">
    <div class="card mb-4">
      <img src="{{ asset('images/'.$product->image) }}" class="card-img-top" alt="{{ $product->name }}">
      <div class="card-body">
        <h5 class="card-title">{{ $product->name }}</h5>
        <p class="card-text">Rp{{ number_format($product->price, 0, ',', '.') }}</p>
        <a href="{{ route('products.show', $product->id) }}" class="btn btn-primary">Lihat Detail</a>
      </div>
    </div>
  </div>
@endforeach

📊 Dashboard Admin untuk Manajemen Produk

CRUD Produk dan Statistik Penjualan

Buat halaman admin untuk menambahkan, mengedit, dan menghapus produk. Gunakan middleware untuk membatasi akses hanya bagi admin. Kamu juga bisa menambahkan Chart.js untuk menampilkan grafik penjualan harian, bulanan, atau per kategori 📈.

🧾 Kesimpulan

Laravel + Bootstrap = Solusi E-Commerce Cepat dan Elegan

Membangun aplikasi e-commerce dengan Laravel 8 dan Bootstrap menawarkan kombinasi antara keindahan visual dan efisiensi pengembangan. Laravel menyediakan pondasi logika bisnis yang solid, sementara Bootstrap mempercepat pembuatan antarmuka yang profesional. Hasilnya adalah sistem e-commerce yang cepat, responsif, dan mudah dikustomisasi sesuai kebutuhan bisnis.

❓ FAQ tentang E-Commerce Laravel 8

Apakah Laravel cocok untuk membuat e-commerce besar? Ya, Laravel dapat digunakan untuk proyek kecil hingga skala enterprise.
Apakah bisa menggunakan template admin siap pakai? Bisa, misalnya dengan AdminLTE atau SB Admin 2.
Apakah Laravel mendukung payment gateway? Ya, bisa diintegrasikan dengan Midtrans, PayPal, atau Stripe.
Bagaimana cara menambahkan fitur pencarian produk? Gunakan query where atau paket Laravel Scout dengan Algolia/Meilisearch.
Bisakah aplikasi Laravel di-host di shared hosting? Bisa, dengan konfigurasi Composer di local sebelum upload.
Apakah Laravel bisa terhubung ke API pihak ketiga? Bisa, dengan bantuan Guzzle HTTP Client.
Bagaimana cara mengatur tampilan responsif? Gunakan Bootstrap grid system dan utility classes.
Apakah Laravel bisa digunakan tanpa JavaScript? Bisa, tapi beberapa fitur UI lebih optimal jika menggunakan Vue atau React.
Apakah Laravel mendukung multi-language? Ya, Laravel memiliki sistem localization bawaan.
Bagaimana mengelola gambar produk? Simpan di folder storage/app/public dan gunakan asset() untuk menampilkannya.
Apakah Laravel cocok untuk pemula? Sangat cocok, dokumentasinya lengkap dan komunitasnya besar.
Bagaimana cara menambahkan fitur wishlist? Gunakan session atau tabel relasi antara user dan product.
Apakah bisa diintegrasikan dengan React atau Vue? Bisa, Laravel mendukung integrasi front-end modern.

⚠️ Disclaimer

Artikel ini disusun untuk tujuan edukasi. Implementasi aplikasi e-commerce di Laravel dapat bervariasi tergantung kebutuhan dan kompleksitas fitur. Selalu gunakan dokumentasi resmi Laravel untuk memastikan kompatibilitas versi terbaru.