Daftar Isi

1. Pengantar Django dan Real Estate
2. Persiapan Lingkungan Pengembangan
3. Membuat Proyek Django Baru
4. Membuat Aplikasi Real Estate
5. Membuat Model Database Properti
6. Migrasi Database
7. Mengelola Data dengan Admin Django
8. Membuat Views dan URL Routing
9. Membuat Template HTML
10. Menampilkan Data Properti
11. Menambahkan Form Pencarian Properti
12. Deploy Aplikasi ke Heroku
13. Sumber Belajar dan Source Code

1. Pengantar Django dan Real Estate

Django adalah framework web berbasis Python yang powerful dan mudah digunakan untuk membangun aplikasi web yang scalable dan aman. Dalam ebook ini, Anda akan belajar bagaimana membangun aplikasi real estate yang memungkinkan pengguna melihat daftar properti, mencari properti berdasarkan kriteria, dan mengelola data properti.

2. Persiapan Lingkungan Pengembangan

Sebelum mulai coding, pastikan Anda sudah menginstal Python (versi 3.8 ke atas) dan pip. Anda juga perlu menginstal virtualenv untuk membuat lingkungan virtual agar proyek Anda terisolasi.

1. Buka terminal atau command prompt.
2. Instal virtualenv jika belum ada:

   pip install virtualenv

3. Buat folder proyek dan masuk ke dalamnya:

   mkdir realestate_project && cd realestate_project

4. Buat virtual environment:

   virtualenv venv

5. Aktifkan virtual environment:

   # Windows
   venv\Scripts\activate
   
   # macOS/Linux
   source venv/bin/activate
             

6. Instal Django:

   pip install django

3. Membuat Proyek Django Baru

Setelah lingkungan siap, buat proyek Django baru dengan perintah berikut:

django-admin startproject realestate .

Perintah ini akan membuat struktur folder dasar proyek Django di dalam folder saat ini.

4. Membuat Aplikasi Real Estate

Django menggunakan konsep aplikasi modular. Buat aplikasi baru bernama properties untuk mengelola data properti:

python manage.py startapp properties

Tambahkan aplikasi ini ke INSTALLED_APPS di realestate/settings.py :

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'properties',
]
      

5. Membuat Model Database Properti

Definisikan model properti di properties/models.py untuk menyimpan data properti real estate:

from django.db import models

class Property(models.Model):
    title = models.CharField(max_length=200)
    description = models.TextField()
    price = models.DecimalField(max_digits=12, decimal_places=2)
    address = models.CharField(max_length=300)
    city = models.CharField(max_length=100)
    state = models.CharField(max_length=100)
    zipcode = models.CharField(max_length=20)
    bedrooms = models.IntegerField()
    bathrooms = models.DecimalField(max_digits=3, decimal_places=1)
    sqft = models.IntegerField()
    lot_size = models.DecimalField(max_digits=6, decimal_places=2)
    photo_main = models.ImageField(upload_to='photos/%Y/%m/%d/')
    is_published = models.BooleanField(default=True)
    list_date = models.DateTimeField(auto_now_add=True)

    def __str__(self):
        return self.title
      

Model ini menyimpan informasi lengkap properti seperti judul, deskripsi, harga, alamat, jumlah kamar, dan foto utama.

6. Migrasi Database

Setelah membuat model, lakukan migrasi untuk membuat tabel di database:

python manage.py makemigrations
python manage.py migrate

Perintah ini akan membuat dan menjalankan migrasi database sesuai model yang telah dibuat.

7. Mengelola Data dengan Admin Django

Django menyediakan panel admin untuk mengelola data dengan mudah. Daftarkan model Property di properties/admin.py :

from django.contrib import admin
from .models import Property

@admin.register(Property)
class PropertyAdmin(admin.ModelAdmin):
    list_display = ('title', 'price', 'city', 'state', 'is_published', 'list_date')
    list_filter = ('is_published', 'city', 'state')
    search_fields = ('title', 'description', 'address', 'city', 'state', 'zipcode')
    list_per_page = 20
      

Buat superuser untuk mengakses admin:

python manage.py createsuperuser

Jalankan server dan akses http://127.0.0.1:8000/admin untuk login dan mengelola properti.

8. Membuat Views dan URL Routing

Buat view untuk menampilkan daftar properti di properties/views.py :

from django.shortcuts import render
from .models import Property

def index(request):
    properties = Property.objects.filter(is_published=True).order_by('-list_date')
    context = {'properties': properties}
    return render(request, 'properties/index.html', context)
      

Tambahkan URL routing di properties/urls.py :

from django.urls import path
from . import views

urlpatterns = [
    path('', views.index, name='properties-index'),
]
      

Sertakan URL aplikasi di realestate/urls.py :

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

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

9. Membuat Template HTML

Buat folder templates/properties di dalam folder aplikasi properties . Buat file index.html untuk menampilkan daftar properti:

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Daftar Properti</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">Daftar Properti</h1>
    <div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
      {% for property in properties %}
      <div class="border rounded-lg shadow p-4 flex flex-col">
        <img src="{{ property.photo_main.url }}" alt="Foto utama properti {{ property.title }}" class="rounded mb-4 object-cover h-48 w-full">
        <h2 class="text-xl font-semibold mb-2">{{ property.title }}</h2>
        <p class="text-indigo-600 font-bold mb-2">Rp {{ property.price|floatformat:0 }}</p>
        <p class="text-gray-700 mb-2">{{ property.city }}, {{ property.state }}</p>
        <p class="text-gray-600 flex-grow">{{ property.description|truncatewords:20 }}</p>
        <a href="#" class="mt-4 inline-block text-indigo-600 hover:underline">Lihat Detail</a>
      </div>
      {% empty %}
      <p>Tidak ada properti yang tersedia.</p>
      {% endfor %}
    </div>
  </main>
</body>
</html>
      

Template ini menampilkan properti dalam grid responsif dengan foto, judul, harga, dan deskripsi singkat.

10. Menampilkan Data Properti

Jalankan server Django dengan perintah:

python manage.py runserver

Buka browser dan akses http://127.0.0.1:8000/ untuk melihat daftar properti yang sudah Anda masukkan melalui admin.

11. Menambahkan Form Pencarian Properti

Untuk menambah fitur pencarian, buat form di properties/forms.py :

from django import forms

class PropertySearchForm(forms.Form):
    city = forms.CharField(required=False, label='Kota')
    state = forms.CharField(required=False, label='Provinsi')
    min_price = forms.DecimalField(required=False, label='Harga Minimum', decimal_places=2)
    max_price = forms.DecimalField(required=False, label='Harga Maksimum', decimal_places=2)
    bedrooms = forms.IntegerField(required=False, label='Jumlah Kamar Tidur')
      

Modifikasi view di properties/views.py untuk menerima filter:

from django.shortcuts import render
from .models import Property
from .forms import PropertySearchForm

def index(request):
    form = PropertySearchForm(request.GET or None)
    properties = Property.objects.filter(is_published=True).order_by('-list_date')

    if form.is_valid():
        if form.cleaned_data.get('city'):
            properties = properties.filter(city__icontains=form.cleaned_data['city'])
        if form.cleaned_data.get('state'):
            properties = properties.filter(state__icontains=form.cleaned_data['state'])
        if form.cleaned_data.get('min_price') is not None:
            properties = properties.filter(price__gte=form.cleaned_data['min_price'])
        if form.cleaned_data.get('max_price') is not None:
            properties = properties.filter(price__lte=form.cleaned_data['max_price'])
        if form.cleaned_data.get('bedrooms') is not None:
            properties = properties.filter(bedrooms=form.cleaned_data['bedrooms'])

    context = {'properties': properties, 'form': form}
    return render(request, 'properties/index.html', context)
      

Tambahkan form pencarian di template index.html tepat di atas daftar properti:

<form method="get" class="mb-6 flex flex-wrap gap-4 items-end">
  <div>
    <label for="id_city" class="block text-sm font-medium text-gray-700">Kota</label>
    {{ form.city }}
  </div>
  <div>
    <label for="id_state" class="block text-sm font-medium text-gray-700">Provinsi</label>
    {{ form.state }}
  </div>
  <div>
    <label for="id_min_price" class="block text-sm font-medium text-gray-700">Harga Minimum</label>
    {{ form.min_price }}
  </div>
  <div>
    <label for="id_max_price" class="block text-sm font-medium text-gray-700">Harga Maksimum</label>
    {{ form.max_price }}
  </div>
  <div>
    <label for="id_bedrooms" class="block text-sm font-medium text-gray-700">Jumlah Kamar Tidur</label>
    {{ form.bedrooms }}
  </div>
  <button type="submit" class="bg-indigo-600 text-white px-4 py-2 rounded hover:bg-indigo-700">Cari</button>
</form>
      

12. Deploy Aplikasi ke Heroku

Setelah aplikasi selesai, Anda bisa deploy ke Heroku agar bisa diakses publik. Berikut langkah singkatnya:

1. Pastikan Anda sudah punya akun Heroku dan Heroku CLI terinstal.
2. Buat file Procfile di root proyek dengan isi:

   web: gunicorn realestate.wsgi

3. Tambahkan gunicorn dan dj-database-url ke requirements:

   pip install gunicorn dj-database-url psycopg2-binary

   pip freeze > requirements.txt

4. Inisialisasi git dan commit semua perubahan:

   git init
   git add .
   git commit -m "Deploy realestate app"

5. Buat aplikasi Heroku dan push:

   heroku create nama-aplikasi-anda
   git push heroku main

6. Set konfigurasi database dan static files sesuai dokumentasi Heroku Django.
7. Jalankan migrasi di Heroku:

   heroku run python manage.py migrate

8. Buka aplikasi di browser dengan:

   heroku open

13. Sumber Belajar dan Source Code

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

• Dokumentasi Resmi Django
• Tutorial Django di Real Python
• Source Code Django Real Estate oleh JustDjango (GitHub)
• Channel YouTube JustDjango - Tutorial Django Lengkap
• Panduan Memulai Django