Membuat Plugin Oracle APEX QR Code dengan Custom Logo

Published: (February 20, 2026 at 10:35 PM EST)
2 min read
Source: Dev.to

Source: Dev.to

Di ekosistem Oracle APEX, fitur QR Code sebenarnya sudah banyak tersedia dalam bentuk plugin Oracle Apex. Namun, kebutuhan spesifik seperti menyisipkan logo perusahaan di tengah QR Code agar terlihat lebih profesional dan sesuai branding tidak selalu terpenuhi. Kebanyakan plugin yang ada hanya mendukung generate QR standar tanpa opsi kustomisasi gambar, sehingga saya memutuskan untuk membangun plugin sendiri agar dapat digunakan berulang kali di berbagai proyek tanpa harus menulis ulang kode JavaScript di setiap aplikasi.

Alasan Membangun Plugin Sendiri

  • Konfigurasi logo, ukuran, dan warna dapat diatur langsung melalui Page Designer.
  • Mendukung Error Correction Level yang tinggi agar QR tetap dapat dibaca meski tertutup logo.
  • Mudah digunakan oleh developer lain hanya dengan drag‑and‑drop.

Proses Teknis dan Tantangan

  • Menggunakan library qr-code-styling yang mendukung rendering pada elemen canvas.
  • Di sisi backend (PL/SQL), dibuat fungsi render untuk menjembatani atribut yang diinput di APEX Page Designer ke dalam properti JavaScript.
function f_render (
    p_logo_url   in varchar2,
    p_size       in number,
    p_color      in varchar2,
    p_bgcolor    in varchar2,
    p_ec_level   in varchar2
) return varchar2 is
begin
    -- Implementasi logika yang memanggil library JavaScript
    -- dan mengembalikan HTML/JS yang diperlukan.
    return '';
end;
/

Implementasi di Page Designer

  1. Buat Page Item bertipe Text Field untuk menampung data yang diperlukan (misalnya URL atau teks QR).
  2. Buat tombol yang akan memicu pembuatan QR Code.
  3. Buat Dynamic Action pada tombol dengan aksi Execute JavaScript Code yang memanggil fungsi f_render.
  4. Pilih QR Code with logo sebagai tipe aksi.
  5. Tambahkan Sub Region dengan isi HTML berikut:
<!-- Tambahkan elemen canvas atau container di sini -->
<div id="qr-code-container"></div>

Setelah konfigurasi selesai, hasil QR Code dengan logo akan tampil di dalam region tersebut.

Kesimpulan

Tutorial atau dokumentasi Oracle APEX dalam bahasa Indonesia masih terbatas. Semoga tulisan singkat ini memberikan gambaran bagi teman‑teman yang ingin mengekstensi fitur APEX melalui pembuatan plugin.

Jika ingin melihat detail kodenya atau mencoba plugin ini, silakan cek di repository saya.

0 views
Back to Blog

Related posts

Read more »

Undefined vs Not Defined

Undefined undefined is a special keyword in JavaScript. It means the variable exists in memory, but no value has been assigned yet. During the creation phase o...