Panduan Lengkap Membangun Platform eCommerce dengan Django dan React
Daftar Isi
1. Pendahuluan
Dalam panduan ini, Anda akan belajar bagaimana membangun sebuah platform eCommerce modern menggunakan Django sebagai backend dan React sebagai frontend. Platform ini akan mencakup fitur-fitur penting seperti manajemen produk, keranjang belanja, autentikasi pengguna, dan proses checkout.
Kami akan membahas langkah demi langkah mulai dari persiapan lingkungan pengembangan, pembuatan API dengan Django REST Framework, hingga membangun antarmuka pengguna interaktif dengan React.
2. Persiapan Lingkungan Pengembangan
Sebelum memulai pengembangan, pastikan Anda sudah menyiapkan lingkungan berikut:
- Python 3.8+ dan pip
- Node.js dan npm/yarn
- Virtual environment untuk Python
- Editor kode seperti VSCode
Langkah-langkah:
-
Buat virtual environment dan aktifkan:
python -m venv env source env/bin/activate # Linux/MacOS env\Scripts\activate # Windows
-
Install Django dan Django REST Framework:
pip install django djangorestframework
-
Install React menggunakan create-react-app:
npx create-react-app frontend
3. Membangun Backend dengan Django
Backend akan bertanggung jawab untuk mengelola data produk, pengguna, dan transaksi. Kita akan menggunakan Django REST Framework untuk membuat API yang dapat diakses oleh frontend React.
3.1 Membuat Project dan Aplikasi Django
django-admin startproject ecommerce cd ecommerce python manage.py startapp store
3.2 Definisikan Model Produk
# ecommerce/store/models.py
from django.db import models
class Product(models.Model):
name = models.CharField(max_length=255)
description = models.TextField()
price = models.DecimalField(max_digits=10, decimal_places=2)
stock = models.PositiveIntegerField()
image_url = models.URLField(blank=True)
def __str__(self):
return self.name
3.3 Membuat Serializer
# ecommerce/store/serializers.py
from rest_framework import serializers
from .models import Product
class ProductSerializer(serializers.ModelSerializer):
class Meta:
model = Product
fields = '__all__'
3.4 Membuat ViewSet dan Router
# ecommerce/store/views.py
from rest_framework import viewsets
from .models import Product
from .serializers import ProductSerializer
class ProductViewSet(viewsets.ModelViewSet):
queryset = Product.objects.all()
serializer_class = ProductSerializer
# ecommerce/ecommerce/urls.py
from django.contrib import admin
from django.urls import path, include
from rest_framework import routers
from store.views import ProductViewSet
router = routers.DefaultRouter()
router.register(r'products', ProductViewSet)
urlpatterns = [
path('admin/', admin.site.urls),
path('api/', include(router.urls)),
]
3.5 Migrasi dan Jalankan Server
python manage.py makemigrations python manage.py migrate python manage.py runserver
Sekarang API backend sudah berjalan di
http://localhost:8000/api/products/
4. Membangun Frontend dengan React
Frontend akan menampilkan produk dan memungkinkan pengguna berinteraksi dengan platform. Kita akan menggunakan React untuk membangun UI yang responsif dan dinamis.
4.1 Struktur Folder dan Instalasi Axios
cd frontend npm install axios react-router-dom
4.2 Membuat Komponen Produk
// frontend/src/components/ProductList.js
import React, { useEffect, useState } from 'react';
import axios from 'axios';
export default function ProductList() {
const [products, setProducts] = useState([]);
useEffect(() => {
axios.get('http://localhost:8000/api/products/')
.then(response => setProducts(response.data))
.catch(error => console.error(error));
}, []);
return (
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
{products.map(product => (
<div key={product.id} className="border rounded-lg p-4 shadow hover:shadow-lg transition">
<img src={product.image_url || 'https://placehold.co/400x300/png?text=No+Image'} alt={`Gambar produk ${product.name}`} className="w-full h-48 object-cover rounded mb-3" />
<h3 className="text-xl font-semibold mb-1">{product.name}</h3>
<p className="text-gray-700 mb-2">{product.description}</p>
<p className="font-bold text-indigo-600">Rp {product.price.toLocaleString('id-ID')}</p>
</div>
))}
</div>
);
}
4.3 Menampilkan Komponen di App.js
// frontend/src/App.js
import React from 'react';
import ProductList from './components/ProductList';
function App() {
return (
<div className="min-h-screen bg-gray-50 p-6">
<h1 className="text-3xl font-bold mb-6 text-center text-indigo-700">Daftar Produk</h1>
<ProductList />
</div>
);
}
export default App;
Jalankan frontend dengan perintah
npm start
dan buka
http://localhost:3000
untuk melihat daftar produk.
5. Integrasi Backend dan Frontend
Untuk menghubungkan backend Django dan frontend React, pastikan API Django dapat diakses dari domain frontend. Anda bisa menggunakan CORS headers.
5.1 Install dan Konfigurasi Django CORS Headers
pip install django-cors-headers
# ecommerce/ecommerce/settings.py
INSTALLED_APPS += [
'corsheaders',
]
MIDDLEWARE = [
'corsheaders.middleware.CorsMiddleware',
# middleware lain...
]
CORS_ALLOWED_ORIGINS = [
"http://localhost:3000",
]
Dengan konfigurasi ini, frontend React dapat melakukan request ke backend Django tanpa masalah CORS.
6. Fitur Utama Platform eCommerce
Berikut fitur utama yang akan kita bangun secara bertahap:
- Manajemen Produk: CRUD produk dengan gambar, deskripsi, harga, dan stok.
- Autentikasi Pengguna: Registrasi, login, dan manajemen profil pengguna.
- Keranjang Belanja: Menambahkan produk ke keranjang dan mengelola jumlah item.
- Proses Checkout: Mengisi alamat pengiriman dan metode pembayaran.
- Riwayat Pesanan: Melihat status pesanan dan detail transaksi.
6.1 Contoh Source Code Autentikasi Django REST Framework
# ecommerce/store/views.py
from rest_framework.authtoken.views import ObtainAuthToken
from rest_framework.authtoken.models import Token
from rest_framework.response import Response
class CustomAuthToken(ObtainAuthToken):
def post(self, request, *args, **kwargs):
serializer = self.serializer_class(data=request.data,
context={'request': request})
serializer.is_valid(raise_exception=True)
user = serializer.validated_data['user']
token, created = Token.objects.get_or_create(user=user)
return Response({
'token': token.key,
'user_id': user.pk,
'email': user.email
})
# ecommerce/ecommerce/urls.py (tambahkan)
from store.views import CustomAuthToken
urlpatterns += [
path('api-token-auth/', CustomAuthToken.as_view()),
]
6.2 Contoh Komponen Login React
// frontend/src/components/Login.js
import React, { useState } from 'react';
import axios from 'axios';
export default function Login() {
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const [error, setError] = useState(null);
const handleSubmit = async e => {
e.preventDefault();
try {
const response = await axios.post('http://localhost:8000/api-token-auth/', { email, password });
localStorage.setItem('token', response.data.token);
alert('Login berhasil!');
} catch (err) {
setError('Email atau password salah');
}
};
return (
<form onSubmit={handleSubmit} className="max-w-md mx-auto p-6 border rounded shadow">
<h2 className="text-2xl font-bold mb-4 text-center">Login</h2>
{error && <p className="text-red-600 mb-3">{error}</p>}
<label className="block mb-2">
Email:
<input type="email" value={email} onChange={e => setEmail(e.target.value)} required className="w-full border rounded px-3 py-2 mt-1" />
</label>
<label className="block mb-4">
Password:
<input type="password" value={password} onChange={e => setPassword(e.target.value)} required className="w-full border rounded px-3 py-2 mt-1" />
</label>
<button type="submit" className="w-full bg-indigo-600 text-white py-2 rounded hover:bg-indigo-700 transition">Login</button>
</form>
);
}
7. Deployment dan Hosting
Setelah aplikasi selesai dikembangkan, langkah selanjutnya adalah deployment agar dapat diakses oleh pengguna secara online.
7.1 Deployment Backend Django
- Gunakan layanan hosting seperti Heroku, DigitalOcean, atau AWS.
- Gunakan database production seperti PostgreSQL.
- Konfigurasi environment variables untuk keamanan.
- Gunakan Gunicorn sebagai WSGI server dan Nginx sebagai reverse proxy.
7.2 Deployment Frontend React
-
Build aplikasi React dengan
npm run build. - Hosting di layanan seperti Netlify, Vercel, atau GitHub Pages.
- Pastikan konfigurasi API endpoint mengarah ke backend yang sudah dideploy.
8. Sumber Belajar dan Source Code
Berikut beberapa sumber belajar dan repository yang dapat membantu Anda memperdalam dan mengembangkan platform eCommerce ini:
- Django Official Documentation
- Django REST Framework Documentation
- React Official Documentation
- Source Code Lengkap di GitHub
- Channel YouTube CodeWithHarry - Tutorial Django & React
- Channel YouTube Traversy Media - Fullstack Development
9. Penutup
Dengan mengikuti panduan ini, Anda telah mempelajari dasar-dasar membangun platform eCommerce modern menggunakan Django dan React. Anda dapat mengembangkan fitur lebih lanjut sesuai kebutuhan bisnis Anda.
Teruslah belajar dan eksplorasi teknologi web agar dapat menciptakan aplikasi yang handal dan user-friendly.
Semoga sukses dalam perjalanan pengembangan aplikasi Anda!
