Logo Resmi Fadhil
Fadhil NuruzzamanSoftware Engineer
enid
Logo Resmi Fadhil
Company ProfileIslamic Green Village2026

Islamic Green Village: Website Developer Properti Syariah

Islamic Green Village adalah developer perumahan syariah (bebas riba) dengan satu kawasan hunian, yang sebelumnya cuma direpresentasikan lewat situs single-page dengan ruang berkembang yang terbatas. Proyek ini menggantikannya dengan tema WordPress custom penuh, dibangun dari nol pakai PHP dan Tailwind CSS murni tanpa page builder. Hasilnya memberi ruang buat testimoni video begitu unit mulai serah terima, kalkulator KPR syariah, galeri foto, dan update progres pembangunan.

Kunjungi WebsiteKembali ke Proyek

Preview

Jelajahi Situsnya

Tampilan situs jadi yang bisa di-scroll, persis seperti yang dilihat pengunjung.

Preview desktop Islamic Green Village: Website Developer Properti Syariah

Desktop

Preview mobile Islamic Green Village: Website Developer Properti Syariah

Mobile

Tech Stack

Teknologi Penggerak Proyek

Tools dan teknologi yang digunakan untuk mewujudkan proyek ini.

Logo Wordpress
Logo PHP
Logo Tailwind CSS
Logo Google Search Console
Logo Google Analytics
Logo MySQL
Logo JavaScript
Logo HTML
Logo CSS
Logo Yarn

Peran

Rincian per Skill

Tiap proyek memanfaatkan kombinasi berbagai disiplin, begini gambarannya di proyek ini.

Web Development

  • Membangun tema WordPress custom penuh dari nol pakai PHP dan Tailwind CSS murni, tanpa page builder atau tema pihak ketiga.
  • Merancang arsitektur Custom Post Type dan ACF field group buat konten yang terus bertambah (Fasilitas, Tipe Unit, Progress, Milestone, Tim, Proyek Grup).
  • Membangun struktur komponen ala atomic design (atoms/molecules/sections) biar markup gak pernah diketik ulang di banyak halaman.
  • Membangun kalkulator KPR syariah interaktif dengan rumus margin flat per tahun, semua inputnya (persentase margin, opsi DP, opsi tenor) sepenuhnya ACF-editable tanpa perlu sentuh kode tiap ada perubahan kebijakan.
  • Membangun sistem formulir lead terpusat (modal global) yang redirect otomatis ke WhatsApp dengan pesan pre-filled dari data yang disubmit.
  • Menyiapkan validasi 2 lapis (server lewat Fluent Forms, client lewat JavaScript) plus honeypot anti-spam.
  • Membangun sistem hardening keamanan berlapis buat menutup celah-celah umum WordPress default, dari proteksi percobaan login sampai header keamanan standar.
  • Menonaktifkan fitur komentar WordPress secara total di 7 lapis biar gak jadi celah spam yang gak kelihatan pemilik situs.
  • Membangun sistem cache gambar ACF yang prime semua attachment halaman aktif sekaligus dalam 1 query batch, mencegah query N+1.
  • Mengimplementasikan blog dengan archive, layout single post 2 kolom, dan sidebar sticky, reuse komponen card yang sama di 3 tempat.
  • Menyiapkan meta SEO, Open Graph, Twitter Card, dan structured data JSON-LD, otomatis mundur kalau plugin SEO pihak ketiga aktif.
  • Menyiapkan redirect 301 buat slug lama seiring arsitektur informasi proyek terus berkembang.

Web Design

  • Merancang seluruh UI dari nol, bukan reuse desain situs lama, termasuk sistem section-wrapper buat konsistensi rhythm antar section.
  • Merancang galeri foto Tipe Unit dengan 2 mode render, carousel scroll di mobile dan accordion di desktop.
  • Merancang diagram struktur organisasi tim yang posisi garisnya dihitung otomatis dari jumlah anggota per level, bukan diatur manual per piksel.
  • Merancang halaman Portofolio bergaya tab mini-landing-page buat 4 proyek grup developer yang sama, tanpa perlu pindah halaman.
  • Merancang section "Lokasi Strategis" bergaya directory listing lokasi-lokasi terdekat.
  • Merancang alur interaksi kalkulator KPR: nominal update live tiap ganti pilihan, tapi hasil hitungnya baru muncul setelah diklik, sesuai permintaan eksplisit klien.

Graphic Design

  • Menata ulang logo klien yang sudah ada agar sesuai dipakai di header dan varian navbar transparan.
  • Menyiapkan dan mengedit foto kawasan, unit rumah, dan progres pembangunan buat dipakai di seluruh situs.
  • Merancang icon SVG custom buat fasilitas, section program keislaman, dan navigasi situs.
  • Membuat favicon situs.
  • Mengompres setiap gambar ke WebP dan di bawah 200KB sebelum diunggah, tanpa penurunan kualitas yang terlihat.

Digital Marketing

  • Menyiapkan SEO teknis: meta description, Open Graph, dan structured data JSON-LD (skema Organization, WebSite, Product, FAQPage, Article, dan BreadcrumbList) buat visibilitas pencarian yang lebih baik.
  • Membuat CTA kayak "Lihat Produk" auto-resolve ke halaman yang benar, bukan mengandalkan link manual yang bisa diam-diam basi.
  • Menstandarkan 1 titik kontak WhatsApp lintas situs (navbar, tombol floating, CTA Tipe Unit, hero Kontak) biar prospek gak pernah nyasar ke channel atau nomor beda.
  • Membangun redirect otomatis ke WhatsApp pasca-submit form, dengan template pesan yang keisi otomatis dari detail lead-nya sendiri buat mempercepat follow-up sales.
  • Menyiapkan sistem blog buat publikasi artikel edukasi seputar hunian syariah.
  • Menyiapkan Google Search Console dan Google Analytics untuk memantau traffic.

Sorotan

Di Balik Layar

Tinjauan lebih dekat soal apa yang ditawarkan produk jadinya, hambatan di sepanjang jalan, dan hasil akhirnya.

Fitur Utama

  • Desain full responsive di perangkat desktop dan mobile.
  • Gambar dioptimasi untuk loading cepat.
  • Integrasi Google Analytics dan Search Console.
  • Tema WordPress custom penuh, dibangun dari nol tanpa page builder.
  • Kalkulator KPR syariah interaktif dengan rumus margin flat per tahun, dropdown tipe rumah yang narik data live dari unit yang tersedia.
  • Formulir lead terpusat yang redirect otomatis ke WhatsApp dengan pesan pre-filled.
  • Diagram struktur organisasi tim dengan layout yang dihitung otomatis, bukan posisi manual.
  • Halaman Portofolio bergaya tab yang menampilkan 4 proyek grup developer yang sama tanpa reload halaman.
  • Galeri foto Tipe Unit dengan carousel di mobile dan accordion di desktop.
  • Update progres pembangunan dalam format timeline foto.
  • Section "Lokasi Strategis" yang me-list lokasi-lokasi terdekat gaya directory.
  • Blog dengan filter kategori, artikel terkait, dan sidebar artikel terbaru.
  • Keamanan berlapis: rate-limiting login, celah enumerasi username tertutup, dan komentar nonaktif total.
  • Cache gambar otomatis buat mencegah query berlebih di tiap halaman.
  • Metadata SEO lengkap: Open Graph, Twitter Card, dan structured data JSON-LD.
  • Setting global (branding, CTA, kontak) dikelola lewat plugin Customizer terpisah, jadi gak hilang walau tema diganti.
  • Klien bisa nambah konten baru (fasilitas, unit, progres, anggota tim) langsung lewat wp-admin tanpa bantuan developer.

Tantangan yang Dihadapi

Menghitung Margin KPR Syariah Secara Presisi

Rumus margin flat per tahun awalnya salah ditulis sebagai flat sekali, bukan dikali tenor. Diperbaiki dan diverifikasi ke spreadsheet perhitungan manual klien sampai hasilnya presisi.

Menghindari Markup yang Diketik Ulang di Banyak Halaman

Elemen kayak kartu CTA, tombol, dan badge terus muncul di halaman berbeda-beda, jadi dibangun struktur ala atomic design (atoms/molecules/sections) biar tiap markup cuma diketik sekali.

Menutup Celah Keamanan Default WordPress

Instalasi WordPress default banyak membocorkan informasi gratis yang bisa dipakai penyerang buat riset target. Ditutup dengan hardening keamanan berlapis di berbagai titik, dari proteksi login sampai konfigurasi server.

Menjaga Setting Global Gak Hilang Kalau Tema Diganti

Customizer bawaan WordPress nyimpen datanya sebagai theme_mod yang scope ke tema aktif. Diselesaikan dengan bikin plugin terpisah yang nyimpen setting sebagai option independen dari tema.

Diagram Struktur Organisasi Tanpa Piksel Manual

Garis penghubung tiap level organisasi harus kumpul dan sebar dengan benar berapapun jumlah anggotanya. Diselesaikan dengan menghitung posisi garis di desktop dari jumlah anggota per level, bukan hardcode nilai piksel yang bakal berantakan begitu timnya berubah.

Pelajaran yang Didapat

  • Membangun Custom Post Type dan field ACF langsung dari kode ternyata bikin arsitektur data jauh lebih predictable buat situs company profile yang kontennya terus bertambah.
  • Hardening keamanan ternyata sama pentingnya buat situs company profile sekalipun, bukan cuma buat aplikasi yang nyimpen data sensitif, jadi gak boleh dianggap opsional.
  • Menyusun struktur komponen ala atomic design sejak hari pertama proyek ternyata jauh lebih murah daripada refactor belakangan setelah section-nya keburu numpuk.
  • Verifikasi rumus finansial kayak margin KPR ke sumber manual klien itu wajib, kesalahan hitung yang kelihatan kecil di atas kertas bisa berdampak besar ke kepercayaan klien.

Dampak

Masalah yang Terselesaikan Setelah Rilis

Bagaimana proyek ini mengubah keadaan bagi bisnis dan penggunanya setelah rilis.

Arsitektur konten yang bisa berkembang

Kalkulator KPR mandiri

Permukaan serangan diperkecil

Gambar di bawah 200KB

Nol query attachment N+1

Setting independen dari tema

Redirect WhatsApp otomatis

Komponen reusable di seluruh situs

Perbaikan Kritis

Situs Lama Gak Bisa Menampung Kebutuhan Konten yang Terus Berkembang

Sebelum

Situs single-page sebelumnya gak punya ruang buat testimoni video, kalkulator KPR, galeri progres, atau update berkala.

Sesudah

Tema custom yang baru sekarang punya CPT dan field ACF sendiri buat tiap jenis konten, klien bisa nambah sendiri langsung dari wp-admin.

Perbaikan Kritis

Prospek Gak Punya Cara Menghitung Estimasi Cicilan Sendiri

Sebelum

Calon pembeli harus tanya langsung ke sales cuma buat dapat estimasi kasar cicilan KPR syariah.

Sesudah

Kalkulator interaktif di situs sekarang ngasih estimasi instan berdasarkan tipe rumah, DP, dan tenor yang dipilih.

Perbaikan Kritis

Celah Keamanan Default WordPress Terbuka Lebar

Sebelum

Instalasi WordPress default expose informasi yang bisa dipakai penyerang buat riset target sebelum mencoba apapun lebih jauh.

Sesudah

Hardening berlapis menutup celah-celah itu di berbagai titik, dari proteksi login sampai konfigurasi server.

Performa

Halaman Lambat Akibat Gambar yang Tidak Dioptimasi

Sebelum

Gambar beresolusi tinggi di seluruh situs, bukan cuma satu bagian, berisiko memperlambat setiap halaman.

Sesudah

Setiap gambar di seluruh situs dikompres ke WebP dan dijaga di bawah 200KB, menjaga halaman tetap cepat tanpa penurunan kualitas yang terlihat.

Performa

Query Attachment Berlebih di Tiap Halaman

Sebelum

Tiap section yang nampilin gambar ACF berisiko trigger query attachment-nya sendiri-sendiri, pola N+1 yang makin parah tiap section baru ditambah.

Sesudah

Data gambar sekarang di-prime sekali per halaman lewat 1 query batch, section baru otomatis kebagian tanpa perlu setup tambahan.

Peningkatan

Setting Global Berisiko Hilang Kalau Tema Diganti

Sebelum

Customizer bawaan WordPress nyimpen datanya scope ke tema apapun yang lagi aktif.

Sesudah

Plugin terpisah sekarang nyimpen setting itu sebagai option independen dari tema, aman walau tema di-update atau diganti nanti.

Peningkatan

Proses Follow-Up Lead yang Lambat

Sebelum

Prospek yang ngisi form biasanya harus nunggu balasan manual dari admin.

Sesudah

Submit form langsung redirect ke WhatsApp dengan pesan pre-filled, follow-up bisa mulai instan.

Peningkatan

Markup UI Diketik Ulang di Banyak Halaman

Sebelum

Elemen kayak kartu CTA dan tombol berisiko dibangun ulang dengan sedikit beda tiap kali halaman baru butuh.

Sesudah

Struktur ala atomic design menjaga 1 sumber kebenaran per komponen, dipakai ulang di banyak section se-situs.