How to Add Input in Panel Extension?

[ghost]

Saya baru saja mencoba install ekstensi panel.

Di ekstensi panel, saya menemukan formulir berisi input title, slug, content, deskripsi, dan opsi tipe markdown dan HTML.

Ketika saya membaca diskusi tentang , kita bisa membuat YAML secara bebas, misalnya, title_h1.

Yang saya ingin tanyakan, bisakah saya menambah formulir isian di panel, semisal heading 1. Dan nantinya akan otomatis ada di data YAML?

Dari mana saya harus memulainya?

[taufik-nurrohman]

Ini pembahasannya bakalan panjang. Sekalian Saya bikin draf dokumentasi ekstensi panel saja di sini karena sampai sekarang memang masih belum ada.

Semua data panel tersedia sebagai array statis, tersimpan secara global di dalam variabel $_. Untuk mengakses data terdapat banyak cara, tapi yang paling aman adalah melalui kait untuk memastikan agar semua data yang dimuat oleh ekstensi-ekstensi lain sudah tersedia:

Hook::set('_', function($_) {
    test($_);
    exit;
});

Beberapa data penting yang terkait secara langsung dengan variabel $_:

• f → Berisi jalur ke berkas atau folder saat itu.
• form → Berisi tipe permintaan (request) beserta datanya.
  i → Berisi angka paginasi saat itu jika ada.
• lot → Berisi data GUI.
• path → Jalur setelah task.
• task → Tipe rute formulir. Secara umum nilainya bisa berupa f, g, l, atau s.
• title → Berisi judul panel.
• type → Berisi tipe panel.

Data GUI terdapat di dalam $_['lot']. Seharusnya terdiri dari dua bagian yaitu bar dan desk. bar berisi data menu dan desk berisi data konten, termasuk di dalam konten terdapat formulir, seksi dan tabulasi. Di dalam tabulasi kadang terdapat bidang-bidang formulir. Secara umum seperti itu, tapi pengembang bisa mengubahnya menjadi apa saja karena sifat data GUI yang sangat mentah. Saya sengaja tidak fokus ke pembuatan metode-metode untuk menambahkan atau mengurangi komponen-komponen di dalam panel, karena harapannya metode-metode tersebut nanti bisa dibuat oleh pengembang lain sebagai ekstensi terpisah. Sebagaimana fitur ACF pada WordPress.

lot:
  # Bagian menu
  bar: []
  # Bagian konten
  desk:
    lot:
      form:
        lot:
          # Bagian kepala
          # Biasanya berisi tajuk dan tombol-tombol aksi utama
          0: []
          # Bagian badan formulir
          1:
            lot:
              tabs:
                lot:
                  # Daftar tab
                  page: []
                  data: []
                  art: []
          # Bagian kaki
          # Biasanya berisi paginasi pada halaman indeks
          # Atau berisi tombol-tombol aksi formulir pada halaman item
          2: []

Pada daftar tab terdapat fields yang berisi bidang-bidang masukan untuk formulir:

page:
  lot:
    fields:
      lot:
        title: []
        content: []
        description: []
        type: []
data:
  lot:
    fields:
      lot:
        link: []
        time: []
art:
  lot:
    fields:
      lot:
        css: []
        js: []

Nama-nama key pada setiap bidang tidak terlalu penting. Bagaimana data tersebut dikonversi nantinya akan ditentukan oleh bidang type. Nama-nama tipe bidang bisa dilihat di sini. Sedangkan bagaimana data tersebut diproses oleh formulir akan ditentukan oleh bidang name:

title:
  type: 'field/title'
  name: 'page[title]'
content:
  type: 'field/source'
  name: 'page[content]'
type:
  type: 'field/item'
  name: 'page[type]'
  lot:
    HTML: HTML
    Markdown: Markdown
# ...
time:
  type: 'field/date-time'
  name: 'data[time]'

Secara garis besar, struktur formulir yang dibentuk nantinya akan tampak seperti ini:

<form method="post">
  <input name="page[title]" type="text">
  <textarea name="page[content]"></textarea>
  <textarea name="page[description]"></textarea>
  <input name="page[type]" type="radio" value="HTML">
  <input name="page[type]" type="radio" value="Markdown">
  <!-- ... -->
  <input name="data[time]" type="text">
</form>

Ketika dikirim, data-data tersebut akan terkait ke $_['form']['lot']:

$_['form'] = [
    'lot' => [
        'data' => [
            'time' => ""
        ],
        'page' => [
            'content' => "",
            'description' => "",
            'title' => "",
            'type' => ""
        ],
        'token' => ""
    ],
    'type' => 'post'
];

$_['form']['lot']['page'] akan diproses sebagai data berkas laman seperti ini:

---
title: ""
description: ""
type: ""
...

# Data `$_['form']['lot']['page']['content']` akan muncul di sini.

$_['form']['lot']['data'] akan diproses secara terpisah sebagai data eksternal. $_['form']['lot']['data']['time'] akan tersimpan sebagai berkas time.data, $_['form']['lot']['data']['view'] akan tersimpan sebagai berkas view.data, dan seterusnya.

Untuk menambahkan bidang baru cukup kompleks karena ketika kita menambahkan bidang tanpa mengecek tipe panel terlebih dahulu, kadang akan menimbulkan efek-efek yang tidak diinginkan misalnya bidang yang ditambahkan tersebut malah jadi muncul di tipe-tipe panel yang bukan merupakan formulir. Jadi pertama-tama kita perlu menentukan kondisi yang tepat untuk menambahkan bidang baru:

Hook::set('_', function($_) {
    if (
        isset($_['lot']['desk']['lot']['form']['lot'][1]['lot']['tabs']['lot']['data']['lot']['fields']['lot']) &&
        0 === strpos($_['type'] . '/', 'page/')
    ) {
        // Tambahkan bidang baru di sini dengan aman
        if ($_['f']) {
            $page = new Page($_['f']);
        } else {
            $page = new Page;
        }
        $_['lot']['desk']['lot']['form']['lot'][1]['lot']['tabs']['lot']['data']['lot']['fields']['lot']['title-custom'] = [
            'title' => 'Heading',
            'description' => 'Title for heading.',
            'type' => 'field/text', // atau `text` saja
            'name' => 'page[title_h1]',
            'value' => $page['title_h1'],
            'stack' => 40
        ];
    }
    return $_;
});

[igoynawamreh]

@icchaahyuniswari coba lihat contoh ini.

Kode dan strukturnya masih berantakan, nanti kalau ada waktu akan dibuat ulang, dibimbing mas @taufik-nurrohman 😛

[igoynawamreh]

Ada rencana bikin ekstensi untuk membuat bidang di panel dengan YAML gak mas?

Misal namanya panel.blueprints.

[taufik-nurrohman]

Itu bagianmu mas. Tinggal buka berkas YAML terus ubah jadi array, terus digabungkan ke $GLOBALS['_']:

$data = From::YAML(content('.\path\to\panel-definitions.yaml') ?? '[]');

$GLOBALS['_'] = extend($GLOBALS['_'], (array) $data);

[yuliakbard]

cara memanggilnya yang nilai value $page['title_h1'] itukah kang?

[taufik-nurrohman]

Iya. Lebih bagus lagi pakai akses objek: $page->title_h1.

[ghost]

Saya mencoba menambah isian formulir di panel.

Di dalam berkas C:\xampp\htdocs\mecha-main\lot\x\panel\engine\r\type\page.php saya tambahkan begini:

// ...
'headline' => [
    'type' => 'headline',
    'name' => 'page[headline]',
    'value' => $page['headline'],
    'width' => true,
'stack' => 40
],
// ...

Dan, di folder C:\xampp\htdocs\mecha-main\lot\x\panel\engine\f\type\field.php saya juga membuat script ini dengan meniru title:

function headline($value, $key) {
    $v = (string) ($value['value'] ?? "");
    if (!\array_key_exists('hint', $value)) {
        $value['hint'] = "" !== $v ? $v : 'Headline Goes Here';
    }
    if (!isset($value['max'])) {
        $value['max'] = 200;
    }
    return \x\panel\type\field\text($value, $key);
}

Saya cek dan lakukan percobaan submit, ternyata berhasil. Di laman terkait, nilai headline dalam YAML.

Apakah langkah saya sudah tepat?

Saya lihat ini juga mengubah semua formulir comment, page, tag, user. Semuanya memiliki isian headline, padahal saya hanya ingin menambahkan isian headline hanya di page khusus posting artikel saja. Meski ini tidak menjadi masalah karena setiap formulir tidak memiliki atribut required, dan jika tidak diisi tidak lantas membuat YAML memiliki headline dengan nilai kosong.

[taufik-nurrohman]

Apakah langkah saya sudah tepat?

Konsepnya sudah tepat tapi akan lebih ideal kalau itu semua dilakukan di luar ekstensi core panel (yaitu dengan cara membuat ekstensi baru untuk panel).

Saya lihat ini juga mengubah semua formulir comment, page, tag, user. Semuanya memiliki isian headline, padahal saya hanya ingin menambahkan isian headline hanya di page khusus posting artikel saja.

Itu karena tipe page terlalu generik. Berfungsi sebagai formulir untuk menangani berkas-berkas dengan ekstensi .archive, .draft dan .page.

Kalau mau lebih spesifik bisa dengan mengecek kondisi tipe sebagai page, page/comment, page/page, page/tag, atau page/user. Formulir khusus untuk posting artikel ada sebagai page/page dan datanya tersimpan di .\lot\x\panel\engine\r\type\page\page.php.

[yuliakbard]

Panel input type field/ option, setelah kita lakukan update postingan, option yang kita pilih itu selalu reset ke semula. saat kita kan pengen check ulang postingan/ update/ edit, option yang kita pilih sebelumnya itu, tampilnya tidak tetap di panel, jadi misalnya data yang sudah kita masukkan sebelum nya sudah benar, saat kita lakukan update, datanya berubah. bagaimana cara kita mengakalinya kang? berikut contoh panel field option yang saya gunakan

        $_['lot']['desk']['lot']['form']['lot'][1]['lot']['tabs']['lot']['jobPosting']['lot']['fields']['lot']['type_salary'] = [
            'title' => 'Tipe Gaji',
            'description' => 'Harian/ Mingguan/ Bulanan.',
            'type' => 'field/option',
            'name' => 'page[type_salary]',
            'value' => $page['type_salary'],
            'stack' => 22,
            'lot' => [
                0 => [
                    'title' => 'DAY',
                    'value' => 'DAY'
                    ],
                1 => [
                    'title' => 'WEEK',
                    'value' => 'WEEK'
                    ],
                2 => [
                    'title' => 'MONTH',
                    'value' => 'MONTH'
                    ],
                3 => [
                    'title' => 'YEAR',
                    'value' => 'YEAR'
                    ],
                4 => [
                    'title' => 'HOUR',
                    'value' => 'HOUR'
                    ]
                ]
        ];

[taufik-nurrohman]

Pas data kesimpen, bagian properti type_salary jadinya seperti apa?

[lokersumatera]

Yang ini done, penulisannya seperti ini. jadi valuenya tersimpan dengan tepat saat digunakan

        $_['lot']['desk']['lot']['form']['lot'][1]['lot']['tabs']['lot']['jobPosting']['lot']['fields']['lot']['type_salary'] = [
            'title' => 'Tipe Gaji',
            'description' => 'Harian/ Mingguan/ Bulanan.',
            'type' => 'field/option',
            'name' => 'page[type_salary]',
            'value' => $page['type_salary'],
            'stack' => 22,
            'lot' => [
                        'MONTH'=>'Per Bulan',
                        'WEEK'=>'Per Minggu',
                        'DAY'=>'Per Hari',
                        'YEAR'=>'Per Tahun',
                        'HOUR'=>'Per Jam'
            ]
        ];

[yuliakbard]

di mecha 3.0.0 ini, kode ini error kang.

Hook::set('_', function($_) {
    if (
        isset($_['lot']['desk']['lot']['form']['lot'][1]['lot']['tabs']['lot']['data']['lot']['fields']['lot']) &&
        0 === strpos($_['type'] . '/', 'page/')
    ) {
        // Tambahkan bidang baru di sini dengan aman
        if ($_['f']) {
            $page = new Page($_['f']);
        } else {
            $page = new Page;
        }
        $_['lot']['desk']['lot']['form']['lot'][1]['lot']['tabs']['lot']['data']['lot']['fields']['lot']['title-custom'] = [
            'title' => 'Heading',
            'description' => 'Title for heading.',
            'type' => 'field/text', // atau `text` saja
            'name' => 'page[title_h1]',
            'value' => $page['title_h1'],
            'stack' => 40
        ];
    }
    return $_;
});

[taufik-nurrohman]

Ganti $_['f'] jadi $_['file'].

[yuliakbard]

Cara menampilkan item panel 'type' => 'field/items', gimana ya kang? kalau ane panggil seperti biasa $page->type_tamatan outputnya Array

$_['lot']['desk']['lot']['form']['lot'][1]['lot']['tabs']['lot']['page']['lot']['fields']['lot']['type_tamatan'] = [
            'title' => 'Tamatan',
            'description' => 'SD/ SMP/ SMA/ SMK/ D3/ S1 / D4/ S2 / S3.',
            'type' => 'field/items',
            'name' => 'page[type_tamatan]',
            'value' => $page['type_tamatan'],
            'stack' => 2.3,
            'lot' => [
            'SD'=>'SD',
            'SMP'=>'SMP',
            'SMA'=>'SMA',
            'SMK'=>'SMK',
            'D3'=>'D3',
            'S1'=>'S1',
            'D4'=>'D4',
            'S2'=>'S2',
            'S3'=>'S3',
            ]
        ];

[yuliakbard]

Kalau ane tulis <?= $page->type_tamatan; ?> outputnya tulisan Array , maunya itu outputnya sesuai dengan item yang ane select di panel, contoh output yang di harapkan: SD, SMP . atau kode input panel ane ada yang salah penulisannya kang?

[taufik-nurrohman]

Kalau begitu pakainya field/item, jangan field/items.

[yuliakbard]

kalau field/item cuma tampil satu aja kang, ini dia beberapa. kalau di looping gimana ambil items nya kang?

        <?php foreach($page->type_tamatan as $tamatan):?>
        <?=$tamatan->...  ;?>
        <?php endforeach;?>

[yuliakbard]

kalau di looping ambil item di dalam lot nya itu gimana ya kang?

[taufik-nurrohman]

<?=$tamatan;?>