Panduan Lengkap Mengembangkan Halaman Visualforce di Salesforce

Daftar Isi

Pengantar Visualforce
Persiapan Lingkungan Pengembangan
Struktur Dasar Halaman Visualforce
Komponen Visualforce Umum
Menggunakan Apex Controller
Step by Step Membuat Halaman Visualforce
Source Code Contoh Lengkap
Referensi dan Channel Pembelajaran Lainnya

1. Pengantar Visualforce

Visualforce adalah framework yang disediakan oleh Salesforce untuk membangun antarmuka pengguna (UI) yang kustom dan dinamis di platform Salesforce. Dengan Visualforce, Anda dapat membuat halaman web yang terintegrasi dengan data Salesforce menggunakan tag-tag khusus dan Apex sebagai backend.

Contoh halaman Visualforce dengan layout dan komponen Salesforce

Visualforce memungkinkan pengembang untuk mengontrol tampilan dan perilaku halaman dengan fleksibilitas tinggi, baik untuk aplikasi internal maupun eksternal.

2. Persiapan Lingkungan Pengembangan

Sebelum mulai membuat halaman Visualforce, pastikan Anda sudah memiliki:

Akun Salesforce Developer (https://developer.salesforce.com/signup)
Akses ke Salesforce Setup dan Developer Console
Pengetahuan dasar tentang Apex dan SOQL

Tampilan Developer Console Salesforce dengan kode Apex dan Visualforce

Developer Console adalah alat utama untuk membuat dan mengedit halaman Visualforce serta Apex Controller.

3. Struktur Dasar Halaman Visualforce

Halaman Visualforce ditulis menggunakan tag XML khusus yang dimulai dengan <apex:page> . Berikut contoh struktur dasar:

<apex:page>
  <h1>Halo, Visualforce!</h1>
</apex:page>

Tag <apex:page> adalah root dan wajib ada. Di dalamnya, Anda bisa menambahkan HTML standar dan tag Visualforce lainnya.

4. Komponen Visualforce Umum

Berikut beberapa komponen Visualforce yang sering digunakan:

<apex:form> - Membuat form untuk input data.
<apex:inputText> - Input teks.
<apex:commandButton> - Tombol yang memicu aksi Apex.
<apex:dataTable> - Menampilkan data dalam tabel.
<apex:repeat> - Looping data.

Contoh penggunaan komponen Visualforce seperti form, input, dan tombol

Komponen ini memudahkan integrasi antara UI dan backend Apex.

5. Menggunakan Apex Controller

Visualforce dapat menggunakan Apex Controller untuk logika bisnis dan pengambilan data. Contoh deklarasi controller:

<apex:page controller="MyController">
  <h1>Halo, {!name}!</h1>
</apex:page>

Berikut contoh Apex Controller sederhana:

public class MyController {
    public String name { get; set; }

    public MyController() {
        name = 'Salesforce Developer';
    }
}

Kode Apex Controller sederhana dengan properti dan konstruktor

Controller ini menghubungkan data dan logika ke halaman Visualforce.

6. Step by Step Membuat Halaman Visualforce

Langkah 1: Buat Halaman Visualforce Baru

Masuk ke Salesforce Setup > Visualforce Pages > New. Beri nama halaman, misal HelloVisualforce .

Tampilan layar pembuatan halaman Visualforce baru di Salesforce Setup

Langkah 2: Tulis Kode Halaman Visualforce

Isi halaman dengan kode berikut:

<apex:page>
  <h1>Halo, Visualforce!</h1>
</apex:page>

Simpan dan preview halaman untuk melihat hasilnya.

Langkah 3: Tambahkan Apex Controller

Buat Apex Controller baru di Developer Console:

public class HelloController {
    public String greeting { get; set; }

    public HelloController() {
        greeting = 'Selamat datang di Visualforce!';
    }
}

Ubah halaman Visualforce untuk menggunakan controller ini:

<apex:page controller="HelloController">
  <h1>{!greeting}</h1>
</apex:page>

Langkah 4: Tambahkan Form dan Input

Tambahkan form untuk menerima input pengguna:

<apex:page controller="HelloController">
  <apex:form>
    <apex:inputText value="{!greeting}" />
    <apex:commandButton value="Update" action="{!null}" />
  </apex:form>
  <h2>{!greeting}</h2>
</apex:page>

Dengan ini, pengguna dapat mengubah teks dan melihat hasilnya.

Langkah 5: Preview dan Testing

Simpan semua perubahan dan buka halaman Visualforce di browser. Coba input teks baru dan klik tombol update untuk melihat perubahan.

Halaman Visualforce dengan form input teks dan tombol update

7. Source Code Contoh Lengkap

Berikut contoh lengkap halaman Visualforce dengan Apex Controller yang menampilkan daftar akun dan form pencarian sederhana:

<apex:page controller="AccountSearchController">
  <apex:form>
    <apex:pageBlock title="Pencarian Akun">
      <apex:pageBlockSection columns="1">
        <apex:inputText value="{!searchKey}" label="Nama Akun" />
        <apex:commandButton value="Cari" action="{!search}" rerender="results" />
      </apex:pageBlockSection>
      <apex:pageBlockTable value="{!accounts}" var="acc" id="results">
        <apex:column value="{!acc.Name}" />
        <apex:column value="{!acc.Phone}" />
        <apex:column value="{!acc.Website}" />
      </apex:pageBlockTable>
    </apex:pageBlock>
  </apex:form>
</apex:page>

public class AccountSearchController {
    public String searchKey { get; set; }
    public List<Account> accounts { get; set; }

    public AccountSearchController() {
        accounts = new List<Account>();
    }

    public void search() {
        String key = '%' + searchKey + '%';
        accounts = [SELECT Id, Name, Phone, Website FROM Account WHERE Name LIKE :key LIMIT 20];
    }
}