---

---

Membangun Halaman Cart dan Checkout di Laravel: Tutorial Lengkap

Posted on 27 August 2024

---

Membangun sebuah sistem e-commerce yang andal adalah impian banyak developer. Di dalam sistem tersebut, halaman cart dan checkout menjadi komponen yang sangat penting. Jika Anda ingin membangun aplikasi e-commerce yang sukses, Anda harus memastikan bahwa kedua fitur ini tidak hanya berfungsi dengan baik, tetapi juga memberikan pengalaman pengguna yang luar biasa. Dalam tutorial ini, kita akan membahas langkah demi langkah bagaimana membangun halaman cart dan checkout di Laravel, sebuah framework PHP yang sangat populer.

Mengapa Halaman Cart dan Checkout Penting?

Sebelum kita masuk ke dalam kode, penting untuk memahami mengapa halaman cart dan checkout sangat vital bagi kesuksesan e-commerce Anda. Bayangkan, Anda telah berhasil menarik pelanggan ke situs Anda, mereka menemukan produk yang mereka suka, dan kemudian... mereka mengalami kesulitan di halaman checkout. Kemungkinan besar, mereka akan meninggalkan keranjang belanja mereka dan mencari di tempat lain. Oleh karena itu, penting untuk membangun halaman cart dan checkout yang tidak hanya fungsional tetapi juga mudah digunakan.

Langkah 1: Persiapan instalasi

Langkah pertama dalam perjalanan kita adalah mempersiapkan lokasi instalasi. Laravel membutuhkan beberapa pengaturan awal sebelum Anda bisa mulai mengembangkan aplikasi.

a. Instalasi Laravel: Jika Anda belum memiliki Laravel, Anda dapat menginstalnya dengan perintah berikut:

composer create-project --prefer-dist laravel/laravel ecommerce

b. Konfigurasi Database: Buka file .env yang berada di root folder Laravel Anda dan atur konfigurasi database Anda:

DB_DATABASE=ecommerce_db

DB_USERNAME=root

DB_PASSWORD=yourpassword

Langkah 2: Membuat Migrations dan Models

Sekarang, saatnya kita membuat database yang akan menyimpan produk, cart, dan informasi pesanan.

a. Membuat Migrations: Gunakan perintah berikut untuk membuat tabel products, carts, dan orders:

php artisan make:migration create_products_table
php artisan make:migration create_carts_table
php artisan make:migration create_orders_table

b. Mendefinisikan Schema: Edit file migration untuk mendefinisikan struktur tabel. Contoh untuk tabel products:

Schema::create('products', function (Blueprint $table) {
    $table->id();
    $table->string('name');
    $table->text('description');
    $table->decimal('price', 10, 2);
    $table->integer('stock');
    $table->string('image');
    $table->timestamps();
});

c. Menjalankan Migrations: Setelah selesai, jalankan perintah berikut untuk membuat tabel di database:

php artisan migrate

d. Membuat Models: Laravel memudahkan kita dengan membuat model untuk setiap tabel yang kita buat:

php artisan make:model Product
php artisan make:model Cart
php artisan make:model Order

Langkah 3: Mendefinisikan Relasi di Models

Relasi antar model sangat penting untuk memastikan data terkait antara produk, keranjang, dan pesanan.

a. Product Model (app/Models/Product.php):

public function carts() {
    return $this->hasMany(Cart::class);
}

b. Cart Model (app/Models/Cart.php):

public function product() {
    return $this->belongsTo(Product::class);
}

c. Order Model (app/Models/Order.php):

public function products() {
    return $this->belongsToMany(Product::class)->withPivot('quantity');
}

Langkah 4: Membuat Controllers

Untuk mengatur logika bisnis, kita perlu membuat beberapa controller.

a. Generate Controllers: Buat controller untuk produk, cart, dan checkout:

php artisan make:controller ProductController --resource
php artisan make:controller CartController --resource
php artisan make:controller CheckoutController

b. Mengelola Produk di ProductController: Buat metode untuk menampilkan daftar produk dan detail produk:

public function index() {
    $products = Product::all();
    return view('products.index', compact('products'));
}

public function show(Product $product) {
    return view('products.show', compact('product'));
}

c. Mengelola Cart di CartController: Buat metode untuk menampilkan, menambah, dan menghapus item dari keranjang:

public function index() {
    $carts = Cart::with('product')->get();
    return view('cart.index', compact('carts'));
}

public function store(Request $request) {
    Cart::create([
        'product_id' => $request->product_id,
        'quantity' => $request->quantity,
    ]);

    return redirect()->route('cart.index');
}

public function destroy(Cart $cart) {
    $cart->delete();
    return redirect()->route('cart.index');
}

d. Mengelola Checkout di CheckoutController: Buat metode untuk menampilkan halaman checkout dan memproses pesanan:

public function index() {
    $carts = Cart::with('product')->get();
    return view('checkout.index', compact('carts'));
}

public function store(Request $request) {
    $order = Order::create([
        'customer_name' => $request->name,
        'customer_email' => $request->email,
        'address' => $request->address,
        'total' => $request->total,
    ]);

    foreach ($request->products as $product_id => $quantity) {
        $order->products()->attach($product_id, ['quantity' => $quantity]);
    }

    Cart::truncate();

    return redirect()->route('products.index');
}

Langkah 5: Membuat Views

a. Daftar Produk (resources/views/products/index.blade.php):

@foreach($products as $product)
    <div>
        <h2>{{ $product->name }}</h2>
        <p>{{ $product->description }}</p>
        <p>Price: ${{ $product->price }}</p>
        <a href="{{ route('products.show', $product) }}">View Details</a>
    </div>
@endforeach

b. Detail Produk (resources/views/products/show.blade.php):

<h2>{{ $product->name }}</h2>
<p>{{ $product->description }}</p>
<p>Price: ${{ $product->price }}</p>

<form action="{{ route('cart.store') }}" method="POST">
    @csrf
    <input type="hidden" name="product_id" value="{{ $product->id }}">
    <label for="quantity">Quantity</label>
    <input type="number" name="quantity" value="1">
    <button type="submit">Add to Cart</button>
</form>

@foreach($carts as $cart)
    <div>
        <h2>{{ $cart->product->name }}</h2>
        <p>Quantity: {{ $cart->quantity }}</p>
        <p>Price: ${{ $cart->product->price }}</p>

        <form action="{{ route('cart.destroy', $cart) }}" method="POST">
            @csrf
            @method('DELETE')
            <button type="submit">Remove</button>
        </form>
    </div>
@endforeach

<a href="{{ route('checkout.index') }}">Proceed to Checkout</a>

<form action="{{ route('checkout.store') }}" method="POST">
    @csrf
    <label for="name">Name</label>
    <input type="text" name="name" required>

    <label for="email">Email</label>
    <input type="email" name="email" required>

    <label for="address">Address</label>
    <textarea name="address" required></textarea>

    @foreach($carts as $cart)
        <input type="hidden" name="products[{{ $cart->product->id }}]" value="{{ $cart->quantity }}">
    @endforeach

    <input type="hidden" name="total" value="{{ $carts->sum(fn($cart) => $cart->product->price * $cart->quantity) }}">
    
    <button type="submit">Place Order</button>
</form>

Langkah 6: Menambahkan Routes

a. Routes Web (routes/web.php):

Route::resource('products', ProductController::class);
Route::resource('cart', CartController::class)->except(['create', 'edit', 'show', 'update']);
Route::get('checkout', [CheckoutController::class, 'index'])->name('checkout.index');
Route::post('checkout', [CheckoutController::class, 'store'])->name('checkout.store');

Dengan menambahkan route ini, Anda sudah menyelesaikan langkah-langkah dasar dalam membangun halaman cart dan checkout di Laravel. Halaman cart akan menampilkan produk-produk yang telah ditambahkan oleh pengguna, dan halaman checkout akan memproses pesanan mereka.

Langkah 7: Pengujian dan Penyempurnaan

Setelah semua kode ditulis, penting untuk melakukan pengujian menyeluruh. Cobalah untuk menambahkan produk ke dalam keranjang, menghapusnya, dan melanjutkan ke proses checkout. Perhatikan apakah ada error atau bug yang muncul. Pengujian ini memastikan bahwa aplikasi Anda siap digunakan oleh pengguna akhir.

Kesimpulan

Dalam tutorial ini, kita telah membahas cara membangun halaman cart dan checkout di Laravel, mulai dari membuat model dan migration, hingga menulis controller dan view. Dengan mengikuti langkah-langkah ini, Anda telah membangun fondasi yang solid untuk aplikasi e-commerce Anda. Ingat, kunci sukses dalam pengembangan aplikasi adalah konsistensi dan keinginan untuk terus belajar dan berkembang.

Selamat berkarya dan semoga aplikasi yang Anda bangun bisa menjadi solusi yang berguna bagi banyak orang. Jangan lupa untuk selalu memperbaiki dan meningkatkan aplikasi Anda berdasarkan feedback dari pengguna. Semangat!

---