> For the complete documentation index, see [llms.txt](https://docs.qore.dev/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.qore.dev/component/media/barcode-generator.md).

# Barcode Generator

Cara menambahkan Barcode Generator component

Berikut langkah-langkah untuk menambahkan barcode generator *component*

* Buka Qore App Editor 

* Pada tab library, di section media pilih barcode generator *component*. Terdapat 2 cara untuk menambahkan *component* ke dalam emulator 

  * Jika ingin menambahkan *component* langsung ke suatu page, kamu dapat *double-click card* tersebut
  * Jika ingin menambahkan *component* ke dalam salah satu kontainer di page tersebut, kamu dapat *drag and drop* ke dalam kontainer yang diinginkan

  <figure><img src="/files/hrpYJuvDHFu8INhgPWum" alt=""><figcaption></figcaption></figure>

* Jika berhasil maka barcode generator *component* akan muncul di *emulator editor screen* seperti berikut&#x20;

<figure><img src="/files/HaaIcF3s975Gzk4MNl3Y" alt=""><figcaption></figcaption></figure>

Properties dari barcode generator component adalah&#x20;

Data :

* Source : tabel pada qore data yang digunakan sebagai sumber data
* Default row : baris data yang akan diretrieve dari tabel, apakah defaultnya adalah baris pertama, atau juga dapat menggunakan id baris

Design :&#x20;

* Title : judul dari QR code&#x20;
* Description : keterangan atau deskripsi singkat dari qr code
* Code : code yang akan digunakan untuk menggenerate qr code
* Display code : Jika toggle diaktifkan maka di bawah qr code akan ditampilkan code dari qr code
* Style : mengatur style tampilan qr code, apakah ghost (tanpa background) ataupun solid (menggunakan background)
* Format : format tampilan dari barcode, apakah code 39 atau code 128

Berikut contoh barcode generator yang telah dimodifikasi

<figure><img src="/files/zJQ5TjZSheayyzrkDNGV" alt=""><figcaption></figcaption></figure>