Pelajari Cara Membangun Aplikasi eCommerce Django Sendiri

Daftar Isi

Pengantar eCommerce dan Django
Persiapan Lingkungan dan Instalasi
Struktur Proyek Django
Membuat Aplikasi Produk
Membuat Model Database Produk
Mengelola Produk di Admin Django
Membuat Views dan URL Routing
Membuat Template HTML
Membuat Fitur Keranjang Belanja
Membuat Halaman Checkout
Sumber Belajar dan Source Code

1. Pengantar eCommerce dan Django

eCommerce adalah bisnis yang menjual produk atau jasa secara online. Django adalah framework web Python yang powerful dan mudah digunakan untuk membangun aplikasi web, termasuk aplikasi eCommerce.

Dalam ebook ini, Anda akan belajar langkah demi langkah membangun aplikasi eCommerce menggunakan Django, mulai dari instalasi hingga fitur keranjang dan checkout.

2. Persiapan Lingkungan dan Instalasi

Sebelum mulai coding, siapkan lingkungan pengembangan:

Install Python 3.8+ dari python.org
Install pip (biasanya sudah termasuk di Python terbaru)
Buat virtual environment untuk proyek Anda:
```
python -m venv env
```

Aktifkan virtual environment:

# Windows
env\Scripts\activate

# macOS/Linux
source env/bin/activate

Install Django:
```
pip install django
```

Setelah ini, Anda siap membuat proyek Django baru.

3. Struktur Proyek Django

Buat proyek Django baru dengan perintah:

django-admin startproject ecommerce

Struktur folder akan seperti ini:

ecommerce/ - folder utama proyek
ecommerce/settings.py - konfigurasi proyek
ecommerce/urls.py - routing URL utama
manage.py - perintah manajemen proyek

Diagram struktur folder proyek Django ecommerce dengan file manage.py dan folder ecommerce

4. Membuat Aplikasi Produk

Django menggunakan konsep aplikasi modular. Buat aplikasi produk dengan perintah:

python manage.py startapp products

Tambahkan aplikasi ini ke INSTALLED_APPS di settings.py :

INSTALLED_APPS = [
    ...
    'products',
]

5. Membuat Model Database Produk

Di products/models.py , buat model produk:

from django.db import models

class Product(models.Model):
    name = models.CharField(max_length=200)
    description = models.TextField()
    price = models.DecimalField(max_digits=10, decimal_places=2)
    stock = models.PositiveIntegerField()
    image = models.ImageField(upload_to='products/', blank=True, null=True)

    def __str__(self):
        return self.name

Jalankan migrasi untuk membuat tabel di database:

python manage.py makemigrations
python manage.py migrate

6. Mengelola Produk di Admin Django

Untuk mengelola produk lewat admin, daftarkan model di products/admin.py :

from django.contrib import admin
from .models import Product

@admin.register(Product)
class ProductAdmin(admin.ModelAdmin):
    list_display = ('name', 'price', 'stock')
    search_fields = ('name',)

Buat superuser untuk akses admin:

python manage.py createsuperuser

Jalankan server dan akses /admin untuk menambah produk.

Tampilan halaman admin Django dengan daftar produk dan fitur pencarian

7. Membuat Views dan URL Routing

Buat view untuk menampilkan daftar produk di products/views.py :

from django.shortcuts import render
from .models import Product

def product_list(request):
    products = Product.objects.all()
    return render(request, 'products/product_list.html', {'products': products})

Buat file products/urls.py dan tambahkan routing:

from django.urls import path
from . import views

urlpatterns = [
    path('', views.product_list, name='product_list'),
]

Tambahkan routing aplikasi ke ecommerce/urls.py :

from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('products.urls')),
]

8. Membuat Template HTML

Buat folder templates/products/ dan buat file product_list.html :

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Daftar Produk</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-white text-gray-900">
  <main class="max-w-5xl mx-auto p-6">
    <h1 class="text-3xl font-bold mb-6 text-indigo-700">Daftar Produk</h1>
    <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6">
      {% for product in products %}
      <div class="border rounded-lg p-4 shadow hover:shadow-lg transition">
        {% if product.image %}
        <img src="{{ product.image.url }}" alt="Gambar produk {{ product.name }}" class="w-full h-48 object-cover rounded mb-4">
        {% else %}
        <img src="https://placehold.co/400x300/png?text=No+Image+Available" alt="Gambar produk tidak tersedia" class="w-full h-48 object-cover rounded mb-4">
        {% endif %}
        <h2 class="text-xl font-semibold mb-2">{{ product.name }}</h2>
        <p class="text-gray-700 mb-2">{{ product.description|truncatewords:15 }}</p>
        <p class="text-indigo-700 font-bold">Rp {{ product.price }}</p>
      </div>
      {% endfor %}
    </div>
  </main>
</body>
</html>

Template ini menampilkan produk dalam grid responsif dengan Tailwind CSS.

9. Membuat Fitur Keranjang Belanja

Untuk fitur keranjang sederhana, kita bisa menggunakan session Django. Tambahkan view di products/views.py :

from django.shortcuts import redirect, get_object_or_404
from django.http import JsonResponse
from .models import Product

def add_to_cart(request, product_id):
    product = get_object_or_404(Product, id=product_id)
    cart = request.session.get('cart', {})
    if str(product_id) in cart:
        cart[str(product_id)] += 1
    else:
        cart[str(product_id)] = 1
    request.session['cart'] = cart
    return JsonResponse({'message': f'{product.name} berhasil ditambahkan ke keranjang', 'cart': cart})

def view_cart(request):
    cart = request.session.get('cart', {})
    products = Product.objects.filter(id__in=cart.keys())
    cart_items = []
    for product in products:
        cart_items.append({
            'product': product,
            'quantity': cart[str(product.id)],
            'total_price': product.price * cart[str(product.id)],
        })
    total = sum(item['total_price'] for item in cart_items)
    return render(request, 'products/cart.html', {'cart_items': cart_items, 'total': total})

Tambahkan URL di products/urls.py :

urlpatterns = [
    path('', views.product_list, name='product_list'),
    path('add-to-cart/<int:product_id>/', views.add_to_cart, name='add_to_cart'),
    path('cart/', views.view_cart, name='view_cart'),
]

Buat template cart.html di templates/products/ :

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Keranjang Belanja</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-white text-gray-900">
  <main class="max-w-4xl mx-auto p-6">
    <h1 class="text-3xl font-bold mb-6 text-indigo-700">Keranjang Belanja</h1>
    {% if cart_items %}
    <table class="w-full border-collapse border border-gray-300 mb-6">
      <thead>
        <tr class="bg-indigo-100">
          <th class="border border-gray-300 p-2 text-left">Produk</th>
          <th class="border border-gray-300 p-2 text-center">Jumlah</th>
          <th class="border border-gray-300 p-2 text-right">Harga Total</th>
        </tr>
      </thead>
      <tbody>
        {% for item in cart_items %}
        <tr>
          <td class="border border-gray-300 p-2">{{ item.product.name }}</td>
          <td class="border border-gray-300 p-2 text-center">{{ item.quantity }}</td>
          <td class="border border-gray-300 p-2 text-right">Rp {{ item.total_price }}</td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
    <p class="text-right text-xl font-semibold text-indigo-700">Total: Rp {{ total }}</p>
    <a href="/checkout/" class="inline-block mt-6 bg-indigo-600 text-white px-6 py-3 rounded hover:bg-indigo-700 transition">Checkout</a>
    {% else %}
    <p>Keranjang Anda kosong.</p>
    {% endif %}
  </main>
</body>
</html>

10. Membuat Halaman Checkout

Buat view checkout sederhana di products/views.py :

from django.views.decorators.csrf import csrf_exempt
from django.http import HttpResponse

@csrf_exempt
def checkout(request):
    if request.method == 'POST':
        # Proses pembayaran dan order (sederhana)
        request.session['cart'] = {}  # Kosongkan keranjang
        return HttpResponse('Terima kasih telah berbelanja! Pesanan Anda sedang diproses.')
    else:
        cart = request.session.get('cart', {})
        if not cart:
            return HttpResponse('Keranjang kosong, tidak bisa checkout.')
        return render(request, 'products/checkout.html')

Tambahkan URL di products/urls.py :

urlpatterns = [
    path('', views.product_list, name='product_list'),
    path('add-to-cart/<int:product_id>/', views.add_to_cart, name='add_to_cart'),
    path('cart/', views.view_cart, name='view_cart'),
    path('checkout/', views.checkout, name='checkout'),
]

Buat template checkout.html di templates/products/ :

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Checkout</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-white text-gray-900">
  <main class="max-w-3xl mx-auto p-6">
    <h1 class="text-3xl font-bold mb-6 text-indigo-700">Checkout</h1>
    <form method="POST" action="" class="space-y-4">
      {% csrf_token %}
      <div>
        <label for="name" class="block font-semibold mb-1">Nama Lengkap</label>
        <input type="text" id="name" name="name" required class="w-full border border-gray-300 rounded p-2">
      </div>
      <div>
        <label for="address" class="block font-semibold mb-1">Alamat Pengiriman</label>
        <textarea id="address" name="address" required class="w-full border border-gray-300 rounded p-2"></textarea>
      </div>
      <div>
        <label for="payment" class="block font-semibold mb-1">Metode Pembayaran</label>
        <select id="payment" name="payment" required class="w-full border border-gray-300 rounded p-2">
          <option value="" disabled selected>Pilih Metode</option>
          <option value="transfer">Transfer Bank</option>
          <option value="cod">Cash on Delivery</option>
        </select>
      </div>
      <button type="submit" class="bg-indigo-600 text-white px-6 py-3 rounded hover:bg-indigo-700 transition">Bayar</button>
    </form>
  </main>
</body>
</html>

11. Sumber Belajar dan Source Code

Berikut beberapa sumber belajar dan repository source code yang bisa Anda gunakan untuk memperdalam dan mengembangkan aplikasi eCommerce Django Anda:

Dokumentasi Resmi Django - Referensi utama framework Django.
CodeWithHarry - Channel YouTube - Tutorial Django lengkap dalam bahasa Indonesia.
JustDjango - Django eCommerce Source Code - Contoh aplikasi eCommerce lengkap.
Real Python Django Tutorials - Tutorial Django berbahasa Inggris yang sangat lengkap.

Dengan mengikuti tutorial dan mempelajari source code di atas, Anda dapat mengembangkan aplikasi eCommerce Django yang lebih kompleks dan sesuai kebutuhan.