Ana içeriğe geç

VERYSOFT Builder Element Geliştirme Dokümanı

Klasör Yapısı​

VERYSOFT Builder sistemi aşağıdaki klasör yapısına sahiptir:

/
├── /src
│   └── /BUILDERFORM
│       └── BUILDERFORM.php        # Form oluşturma sınıfı
├── /THEMS                         # Tema klasörü
│   ├── /AKTIVITE                  # Tema adı
│   ├── /ANTOMI                    # Tema adı
│   ├── /EDUMY                     # Tema adı
│   ├── /MINZEL                    # Tema adı
│   ├── /MOLLA                     # Tema adı
│   ├── /[TEMA-ADI]                # Aktif tema
│   │   ├── /elements              # Element template dosyaları
│   │   │   ├── [ELEMENT-ADI].tpl  # Template dosyası
│   │   │   ├── Bolumler.tpl       # Template dosyası
│   │   │   └── ...
│   │   ├── /FORM                  # Element sınıf dosyaları
│   │   │   ├── [ELEMENT-ADI].php  # Element sınıfı
│   │   │   ├── Bolumler.php       # Element sınıfı
│   │   │   └── ...
│   │   ├── /templates             # Şablon dosyaları
│   │   ├── [TEMA-ADI]_CONFIG.json # Tema yapılandırması 
│   │   └── [TEMA-ADI]_ELEMENT.json # Element yapılandırması
│   └── /OtherThemes
│       └── ...

Dosya Türleri ve Rolleri​

Dosya TürüUzantıRol
BUILDERFORM.php.phpForm elementleri oluşturma, stil yönetimi, veri işleme
Element Sınıfı.phpElement mantığı, form alanları, veri yapısı tanımlama
Template.tplGörsel sunum, HTML yapısı, dinamik içerik
[TEMA-ADI]_CONFIG.json.jsonTema pozisyonları ve template yapılandırması
[TEMA-ADI]_ELEMENT.json.jsonStatik ve dinamik element tanımları

PHP Sınıfı Oluşturma​

Element oluşturmak için öncelikle bir PHP sınıfı oluşturulmalıdır. Bu sınıf, /THEMS/[TEMA-ADI]/FORM/ dizininde saklanır ve elementinizin mantığını ve form alanlarını içerir.

Temel Sınıf Yapısı​

<?php
/**
 * [ELEMENT-ADI] Element Sınıfı
 * 
 * Bu sınıf, [ELEMENT-ADI] elementinin form yapısını, 
 * CSS özelliklerini ve davranışını tanımlar. Kullanıcı arayüzündeki
 * düzenleme panelini oluşturmak için kullanılır.
 *
 * @author [YAZAR-ADI]
 * @company VERYSOFT
 * @date [TARIH]
 * @version 1.0
 */

// Element sınıfı için gerekli namespace tanımı
namespace THEMS\[TEMA-ADI]\FORM;

class [ELEMENT-ADI]
{
    // Sınıf özellikleri
    protected $data;     // Element verileri
    protected $css;      // Element CSS özellikleri
    protected $js;       // Element JavaScript kodları
    protected $form;     // BUILDERFORM nesnesi
    protected $dataID;   // Element benzersiz kimliği

    /**
     * Sınıf constructor metodu
     * Elementinizin verileri burada başlatılır ve BUILDERFORM nesnesi oluşturulur
     * 
     * @param mixed $data   Element verileri (metin, URL, görsel yolları vb.)
     * @param mixed $css    Element CSS özellikleri
     * @param mixed $dataID Element benzersiz kimliği
     * @param mixed $js     Element JavaScript kodları
     */
    public function __construct($data = "", $css = "", $dataID = "", $js = "")
    {
        // Element verilerini sakla
        $this->data = $data;
        // CSS verilerini sakla
        $this->css = $css;
        // JavaScript verilerini sakla
        $this->js = $js;
        // Element ID'sini sakla
        $this->dataID = $dataID;
        // BUILDERFORM nesnesini oluştur
        $this->form = new \APPS\BUILDERFORM\BUILDERFORM($this);
    }

    /**
     * Element içerik formları - Modal içeriği
     * Bu metod elementinizin içerik düzenleme formlarını oluşturur
     * 
     * @return string Form alanları HTML çıktısı
     */
    public function cnt()
    {
        // Form alanlarını ve öğeleri oluştur
        $items = [];
        $sayac = 1;
        
        // Eğer mevcut veri varsa bu veriyi kullan
        if (isset($this->data['data']) && is_array($this->data['data']) && count($this->data['data']) > 0) {
            foreach ($this->data['data'] as $index => $item) {
                // Her öğe için form alanlarını oluştur
                $formInputs = '';
                
                // Görsel alanı
                $formInputs .= $this->form->generateInput(
                    'image',                               // Input tipi
                    'Görsel',                              // Etiket
                    $item['image_url'] ?? 'https://cdn.e-very.com.tr/e-ticaret-global-gorseller/imageuploadicon.png', // Varsayılan değer
                    'image_' . $index,                     // ID
                    '',                                    // CSS sınıfı
                    ['name' => 'data[' . $index . '][image_url]'], // name özniteliği
                    ".".$this->dataID."-parent .section",  // CSS seçici
                    "background-image"                     // CSS özelliği
                );
                
                // URL alanı
                $formInputs .= $this->form->generateInput(
                    'url',                                 // Input tipi
                    '',                                    // Etiket
                    $item['open_in_new_tab'] ?? '',        // Varsayılan değer
                    'url_' . $index,                       // ID
                    '',                                    // CSS sınıfı
                    ['name' => 'data[' . $index . ']['.rand(0,99).'_url]'] // name özniteliği
                );
                
                // İçerik alanı (summernote editörü ile)
                $formInputs .= $this->form->generateInput(
                    'textarea',                            // Input tipi
                    'İçerik',                              // Etiket
                    $item['title'] ?? '',                  // Varsayılan değer
                    'title_' . $index,                     // ID
                    'summernote',                          // CSS sınıfı (Summernote editör)
                    ['name' => 'data[' . $index . '][title]'], // name özniteliği
                    ".".$this->dataID."-text",             // CSS seçici
                    "textContent"                          // CSS özelliği
                );
                
                // Koşullu alanlar - Buton ve bağlantı kontrolü
                $buttonText = $item['buttonText'] ?? '';
                $buttonUrl = $item['buttonUrl'] ?? '';
                if ($buttonText || $buttonUrl) {
                    $formInputs .= $this->form->generateInput(
                        'text',                              // Input tipi
                        'Buton Metni',                       // Etiket
                        $buttonText,                         // Varsayılan değer
                        'buttonText_' . $index,              // ID
                        '',                                  // CSS sınıfı
                        ['name' => 'data[' . $index . '][buttonText]'] // name özniteliği
                    );
                    $formInputs .= $this->form->generateInput(
                        'text',                              // Input tipi
                        'Buton Url',                         // Etiket
                        $buttonUrl,                          // Varsayılan değer
                        'buttonUrl_' . $index,               // ID
                        '',                                  // CSS sınıfı
                        ['name' => 'data[' . $index . '][buttonUrl]'] // name özniteliği
                    );
                }
                
                // Her slider öğesini akordiyon öğesi olarak ekle
                $items[] = [
                    'title' => "Slider " . $sayac,         // Akordiyon başlığı
                    'content' => $formInputs               // Oluşturulan form alanları
                ];
                $sayac++;
            }
        } else {
            // Mevcut veri yoksa varsayılan form alanlarını oluştur
            $formInputs = '';
            $formInputs .= $this->form->generateInput(
                'image', 
                'Görsel', 
                'https://cdn.e-very.com.tr/e-ticaret-global-gorseller/imageuploadicon.png', 
                'image_', 
                '', 
                ['name' => 'data[0][image_url]']
            );
            $formInputs .= $this->form->generateInput(
                'url', 
                '', 
                '', 
                'url_', 
                '', 
                ['name' => 'data[0]['.rand(0,99).'_url]']
            );
            $formInputs .= $this->form->generateInput(
                'textarea', 
                'İçerik', 
                '', 
                'title_0', 
                'summernote', 
                ['name' => 'data[0][title]']
            );
            $items[] = [
                'title' => "Yeni Slider",
                'content' => $formInputs
            ];
        }
        
        // Akordiyon menüsünü oluştur
        $response = $this->form->acordion($items);
        
        // Summernote editörü için gerekli ayarlar
        $response .= $this->summernote();
        
        // Oluşturulan form HTML'ini döndür
        return $response;
    }

    /**
     * Element özel CSS alanları
     * Bu metod elementinizin içindeki belirli bileşenler için CSS düzenleme formlarını oluşturur
     * 
     * @return string CSS form alanları HTML çıktısı
     */
    public function format()
    {
        // Akordiyon menüleri içeren bir dizi oluştur
        $items = [
            // Metin stili için akordiyon
            [
                'title' => "Metin Stili",
                'content' => $this->form->style(
                    ['font', 'color', 'text'],               // İzin verilen CSS özellikleri
                    [],                                      // Hariç tutulan alanlar
                    "",                                      // Gösterim tipi
                    ".".$this->dataID."-text",               // CSS seçici
                    @$this->data["css"][".".$this->dataID."-text"]  // Mevcut CSS değerleri
                )
            ],
            
            // Buton stili için akordiyon
            [
                'title' => "Buton Stili",
                'content' => $this->form->style(
                    ['background', 'border', 'padding'],     // İzin verilen CSS özellikleri
                    [],                                      // Hariç tutulan alanlar
                    "",                                      // Gösterim tipi
                    ".".$this->dataID."-button",             // CSS seçici
                    @$this->data["css"][".".$this->dataID."-button"]  // Mevcut CSS değerleri
                )
            ]
        ];
        
        // Akordiyon menüsünü oluştur ve döndür
        return $this->form->acordion($items);
    }

    /**
     * Element genel CSS özellikleri
     * Bu metod elementin tamamı için genel CSS düzenleme formlarını oluşturur
     * 
     * @return string Gelişmiş CSS form alanları HTML çıktısı
     */
    public function advanced()
    {
        // Elementin genel CSS özellikleri burada tanımlanır
    }
}

Sınıf Özelliklerinin Açıklaması​

  • $data: Element verileri ve ayarlarını içerir (metin, URL, görsel yolları vb.)
  • $css: Element CSS stil özelliklerini içerir
  • $js: Element için JavaScript kodlarını içerir
  • $form: BUILDERFORM sınıfı örneği, form elementleri oluşturmak için kullanılır
  • $dataID: Elementin benzersiz kimliği, CSS seçici olarak da kullanılır

Bir element sınıfı oluşturduğunuzda, en az üç temel metodu (cnt, format, advanced) uygulamanız gerekmektedir. Bu metodlar, element düzenleme ekranının farklı bölümlerini oluşturur.

cnt Fonksiyonu - Modal İçeriği​

cnt() fonksiyonu, elementin içerik düzenleme panelini (modal içeriğini) oluşturur. Bu fonksiyon, kullanıcı arayüzünde görünecek form elementlerini tanımlar ve değerlerin nasıl saklanacağını belirler. Fonksiyon, form alanlarından oluşan HTML içeriği döndürür.

cnt Fonksiyonu Yapısı​

/**
 * Element içerik formları - Modal içeriği
 * 
 * @return string Form alanları HTML çıktısı
 */
public function cnt()
{
    // Form alanlarını ve öğeleri oluştur
    $items = [];
    $sayac = 1;
    
    // Eğer mevcut veri varsa bu veriyi kullan
    if (isset($this->data['data']) && is_array($this->data['data']) && count($this->data['data']) > 0) {
        foreach ($this->data['data'] as $index => $item) {
            // Her öğe için form alanlarını oluştur
            $formInputs = '';
            
            // Görsel alanı
            $formInputs .= $this->form->generateInput(
                'image',                               // Input tipi
                'Görsel',                              // Etiket
                $item['image_url'] ?? 'https://cdn.e-very.com.tr/e-ticaret-global-gorseller/imageuploadicon.png', // Varsayılan değer
                'image_' . $index,                     // ID
                '',                                    // CSS sınıfı
                ['name' => 'data[' . $index . '][image_url]'], // name özniteliği
                ".".$this->dataID."-parent .section",  // CSS seçici
                "background-image"                     // CSS özelliği
            );
            
            // URL alanı
            $formInputs .= $this->form->generateInput(
                'url',                                 // Input tipi
                '',                                    // Etiket
                $item['open_in_new_tab'] ?? '',        // Varsayılan değer
                'url_' . $index,                       // ID
                '',                                    // CSS sınıfı
                ['name' => 'data[' . $index . ']['.rand(0,99).'_url]'] // name özniteliği
            );
            
            // İçerik alanı (summernote editörü ile)
            $formInputs .= $this->form->generateInput(
                'textarea',                            // Input tipi
                'İçerik',                              // Etiket
                $item['title'] ?? '',                  // Varsayılan değer
                'title_' . $index,                     // ID
                'summernote',                          // CSS sınıfı (Summernote editör)
                ['name' => 'data[' . $index . '][title]'], // name özniteliği
                ".".$this->dataID."-text",             // CSS seçici
                "textContent"                          // CSS özelliği
            );
            
            // Koşullu alanlar - Buton ve bağlantı kontrolü
            $buttonText = $item['buttonText'] ?? '';
            $buttonUrl = $item['buttonUrl'] ?? '';
            if ($buttonText || $buttonUrl) {
                $formInputs .= $this->form->generateInput(
                    'text',                              // Input tipi
                    'Buton Metni',                       // Etiket
                    $buttonText,                         // Varsayılan değer
                    'buttonText_' . $index,              // ID
                    '',                                  // CSS sınıfı
                    ['name' => 'data[' . $index . '][buttonText]'] // name özniteliği
                );
                $formInputs .= $this->form->generateInput(
                    'text',                              // Input tipi
                    'Buton Url',                         // Etiket
                    $buttonUrl,                          // Varsayılan değer
                    'buttonUrl_' . $index,               // ID
                    '',                                  // CSS sınıfı
                    ['name' => 'data[' . $index . '][buttonUrl]'] // name özniteliği
                );
            }
            
            // Her slider öğesini akordiyon öğesi olarak ekle
            $items[] = [
                'title' => "Slider " . $sayac,         // Akordiyon başlığı
                'content' => $formInputs               // Oluşturulan form alanları
            ];
            $sayac++;
        }
    } else {
        // Mevcut veri yoksa varsayılan form alanlarını oluştur
        $formInputs = '';
        $formInputs .= $this->form->generateInput(
            'image', 
            'Görsel', 
            'https://cdn.e-very.com.tr/e-ticaret-global-gorseller/imageuploadicon.png', 
            'image_', 
            '', 
            ['name' => 'data[0][image_url]']
        );
        $formInputs .= $this->form->generateInput(
            'url', 
            '', 
            '', 
            'url_', 
            '', 
            ['name' => 'data[0]['.rand(0,99).'_url]']
        );
        $formInputs .= $this->form->generateInput(
            'textarea', 
            'İçerik', 
            '', 
            'title_0', 
            'summernote', 
            ['name' => 'data[0][title]']
        );
        $items[] = [
            'title' => "Yeni Slider",
            'content' => $formInputs
        ];
    }
    
    // Akordiyon menüsünü oluştur
    $response = $this->form->acordion($items);
    
    // Summernote editörü için gerekli ayarlar
    $response .= $this->summernote();
    
    // Oluşturulan form HTML'ini döndür
    return $response;
}

cnt Fonksiyonu Nasıl Çalışır​

cnt() fonksiyonu şu adımları izler:

  1. Veri Kontrolü: Mevcut veriler kontrol edilir. Veri varsa ($this->data['data']) her bir öğe için form alanları oluşturulur.
  2. Form Alanları Oluşturma: Her öğe için, gerekli form alanları ($this->form->generateInput()) metoduyla oluşturulur.
  3. Akordiyon Öğeleri: Her öğe için bir akordiyon öğesi oluşturulur ve $items dizisine eklenir.
  4. Varsayılan Öğeler: Eğer mevcut veri yoksa, varsayılan form alanları oluşturulur.
  5. HTML Oluşturma: $this->form->acordion($items) ile akordiyon paneli HTML'i oluşturulur.
  6. Ek İşlevler: Özel işlevler (örneğin summernote editörü için) eklenebilir.
  7. Çıktı: Oluşturulan HTML içeriği döndürülür.

Farklı Element Tipleri için cnt Örnekleri​

1. Statik İçerik Elementi (Tek Öğeli Element)​

public function cnt()
{
    // Tek bir akordiyon öğesi oluştur
    $formInputs = '';
    
    // Başlık alanı
    $formInputs .= $this->form->generateInput(
        'text',                                 // Input tipi
        'Başlık',                               // Etiket
        @$this->data['data'][0]['title'] ?? '', // Varsayılan değer
        'title_input',                          // ID
        'form-control',                         // CSS sınıfı
        ['name' => 'data[0][title]']            // Öznitelikler
    );
    
    // İçerik alanı (Summernote editörü)
    $formInputs .= $this->form->generateInput(
        'textarea',                                  // Input tipi
        'İçerik',                                    // Etiket
        @$this->data['data'][0]['content'] ?? '',    // Varsayılan değer
        'content_input',                             // ID
        'summernote',                                // CSS sınıfı
        ['name' => 'data[0][content]']               // Öznitelikler
    );
    
    // Görsel seçici
    $formInputs .= $this->form->generateInput(
        'image',                                     // Input tipi
        'Arka Plan Görseli',                         // Etiket
        @$this->data['data'][0]['background'] ?? '', // Varsayılan değer
        'bg_image',                                  // ID
        '',                                          // CSS sınıfı
        ['name' => 'data[0][background]'],           // Öznitelikler
        '.'.$this->dataID.'-parent',                 // CSS seçici
        'background-image'                           // CSS özelliği
    );
    
    // Renk seçici
    $formInputs .= $this->form->generateInput(
        'color',                                     // Input tipi
        'Metin Rengi',                               // Etiket
        @$this->data['data'][0]['textColor'] ?? '#000000', // Varsayılan değer
        'text_color',                                // ID
        'form-control',                              // CSS sınıfı
        ['name' => 'data[0][textColor]'],            // Öznitelikler
        '.'.$this->dataID.'-text',                   // CSS seçici
        'color'                                      // CSS özelliği
    );
    
    $items = [
        [
            'title' => "İçerik Ayarları",            // Akordiyon başlığı
            'content' => $formInputs                 // Oluşturulan form alanları
        ]
    ];
    
    // Summernote editörü için JavaScript ekleme (özel bir metot kullanılıyor)
    $response = $this->form->acordion($items);
    $response .= $this->summernote();
    
    return $response;
}

2. Çoklu Öğeli Element (Tab ile)​

public function cnt() 
{
    // Tab paneli oluştur
    $tabs = [];
    
    // Genel ayarlar sekmesi
    $generalTab = '';
    
    // Başlık alanı
    $generalTab .= $this->form->generateInput(
        'text',                                 // Input tipi
        'Başlık',                               // Etiket
        @$this->data['data']['title'] ?? '',    // Varsayılan değer
        'title_input',                          // ID
        'form-control',                         // CSS sınıfı
        ['name' => 'data[title]']               // Öznitelikler
    );
    
    // Açıklama alanı
    $generalTab .= $this->form->generateInput(
        'textarea',                             // Input tipi
        'Açıklama',                             // Etiket
        @$this->data['data']['description'] ?? '', // Varsayılan değer
        'desc_input',                           // ID
        'form-control',                         // CSS sınıfı
        [
            'name' => 'data[description]',      // Öznitelikler
            'rows' => '3'                       // Satır sayısı
        ]
    );
    
    // Layout seçenekleri
    $generalTab .= $this->form->generateInput(
        'select',                               // Input tipi
        'Düzen',                                // Etiket
        @$this->data['data']['layout'] ?? 'grid', // Varsayılan değer
        'layout_select',                        // ID
        'form-select',                          // CSS sınıfı
        [
            'name' => 'data[layout]',           // Öznitelikler
            'options' => [                      // Seçenekler
                'grid' => 'Izgara',
                'list' => 'Liste',
                'masonry' => 'Masonry'
            ]
        ]
    );
    
    // Genel sekmesini ekle
    $tabs[] = [
        'title' => 'Genel',                     // Sekme başlığı
        'content' => $generalTab                // Sekme içeriği
    ];
    
    // Görsel ayarları sekmesi
    $imageTab = '';
    
    // Görsel boyutu
    $imageTab .= $this->form->generateInput(
        'select',                               // Input tipi
        'Görsel Boyutu',                        // Etiket
        @$this->data['data']['imageSize'] ?? 'medium', // Varsayılan değer
        'image_size',                           // ID
        'form-select',                          // CSS sınıfı
        [
            'name' => 'data[imageSize]',        // Öznitelikler
            'options' => [                      // Seçenekler
                'small' => 'Küçük',
                'medium' => 'Orta',
                'large' => 'Büyük'
            ]
        ]
    );
    
    // Görsel filtresi
    $imageTab .= $this->form->generateInput(
        'checkbox',                             // Input tipi
        'Görsel Filtresi',                      // Etiket
        @$this->data['data']['imageFilter'] ?? false, // Varsayılan değer
        'image_filter',                         // ID
        'form-check-input',                     // CSS sınıfı
        ['name' => 'data[imageFilter]']         // Öznitelikler
    );
    
    // Görsel sekmesini ekle
    $tabs[] = [
        'title' => 'Görsel',                   // Sekme başlığı
        'content' => $imageTab                 // Sekme içeriği
    ];
    
    // Tab panelini oluştur
    return $this->form->tab($tabs);
}

3. Dinamik İçerik Ekleme (Slider, Galeri vb.)​

public function cnt()
{
    // Dinamik öğeler için akordiyon paneli oluştur
    $items = [];
    $sayac = 1;
    
    // Mevcut öğeler
    if (isset($this->data['data']['items']) && is_array($this->data['data']['items']) && count($this->data['data']['items']) > 0) {
        foreach ($this->data['data']['items'] as $index => $item) {
            $formInputs = '';
            
            // Başlık alanı
            $formInputs .= $this->form->generateInput(
                'text',                                  // Input tipi
                'Başlık',                                // Etiket
                $item['title'] ?? '',                    // Varsayılan değer
                'title_' . $index,                       // ID
                'form-control',                          // CSS sınıfı
                ['name' => 'data[items][' . $index . '][title]'] // Öznitelikler
            );
            
            // Görsel alanı
            $formInputs .= $this->form->generateInput(
                'image',                                 // Input tipi
                'Görsel',                                // Etiket
                $item['image'] ?? '',                    // Varsayılan değer
                'image_' . $index,                       // ID
                '',                                      // CSS sınıfı
                ['name' => 'data[items][' . $index . '][image]'] // Öznitelikler
            );
            
            // Açıklama alanı
            $formInputs .= $this->form->generateInput(
                'textarea',                              // Input tipi
                'Açıklama',                              // Etiket
                $item['description'] ?? '',              // Varsayılan değer
                'desc_' . $index,                        // ID
                'form-control',                          // CSS sınıfı
                [
                    'name' => 'data[items][' . $index . '][description]', // Öznitelikler
                    'rows' => '3'                        // Satır sayısı
                ]
            );
            
            // Bağlantı alanı
            $formInputs .= $this->form->generateInput(
                'text',                                  // Input tipi
                'Bağlantı URL',                          // Etiket
                $item['link'] ?? '',                     // Varsayılan değer
                'link_' . $index,                        // ID
                'form-control',                          // CSS sınıfı
                ['name' => 'data[items][' . $index . '][link]'] // Öznitelikler
            );
            
            // Her öğe için akordiyon paneli
            $items[] = [
                'title' => "Öğe " . $sayac,              // Akordiyon başlığı
                'content' => $formInputs                 // Oluşturulan form alanları
            ];
            $sayac++;
        }
    } else {
        // Varsayılan öğe
        $formInputs = '';
        
        // Başlık alanı
        $formInputs .= $this->form->generateInput(
            'text',                                  // Input tipi
            'Başlık',                                // Etiket
            '',                                      // Varsayılan değer
            'title_0',                               // ID
            'form-control',                          // CSS sınıfı
            ['name' => 'data[items][0][title]']      // Öznitelikler
        );
        
        // Görsel alanı
        $formInputs .= $this->form->generateInput(
            'image',                                 // Input tipi
            'Görsel',                                // Etiket
            '',                                      // Varsayılan değer
            'image_0',                               // ID
            '',                                      // CSS sınıfı
            ['name' => 'data[items][0][image]']      // Öznitelikler
        );
        
        // Açıklama alanı
        $formInputs .= $this->form->generateInput(
            'textarea',                              // Input tipi
            'Açıklama',                              // Etiket
            '',                                      // Varsayılan değer
            'desc_0',                                // ID
            'form-control',                          // CSS sınıfı
            [
                'name' => 'data[items][0][description]', // Öznitelikler
                'rows' => '3'                        // Satır sayısı
            ]
        );
        
        // Bağlantı alanı
        $formInputs .= $this->form->generateInput(
            'text',                                  // Input tipi
            'Bağlantı URL',                          // Etiket
            '',                                      // Varsayılan değer
            'link_0',                                // ID
            'form-control',                          // CSS sınıfı
            ['name' => 'data[items][0][link]']       // Öznitelikler
        );
        
        // Varsayılan öğe için akordiyon paneli
        $items[] = [
            'title' => "Yeni Öğe",                   // Akordiyon başlığı
            'content' => $formInputs                 // Oluşturulan form alanları
        ];
    }
    
    // "Yeni Öğe Ekle" butonu
    $addButtonHtml = '<div class="text-center mt-3">
        <button type="button" class="btn btn-sm btn-primary add-new-item">
            <i class="fas fa-plus-circle"></i> Yeni Öğe Ekle
        </button>
    </div>';
    
    // JavaScript: Yeni öğe ekleme fonksiyonu
    $script = '<script>
    $(document).ready(function() {
        let itemCount = ' . $sayac . ';
        
        $(".add-new-item").click(function() {
            let newItem = `
                <div class="accordion-item">
                    <h2 class="accordion-header">
                        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#item-${itemCount}">
                            Öğe ${itemCount}
                        </button>
                    </h2>
                    <div id="item-${itemCount}" class="accordion-collapse collapse">
                        <div class="accordion-body">
                            ' . str_replace(
                                ['data[items][0]', 'title_0', 'image_0', 'desc_0', 'link_0'],
                                ['data[items][${itemCount}]', 'title_${itemCount}', 'image_${itemCount}', 'desc_${itemCount}', 'link_${itemCount}'],
                                $formInputs
                            ) . '
                        </div>
                    </div>
                </div>
            `;
            
            $(".accordion").append(newItem);
            itemCount++;
        });
    });
    </script>';
    
    // Akordiyon panelini oluştur
    $response = $this->form->acordion($items);
    $response .= $addButtonHtml;
    $response .= $script;
    
    return $response;
}

İleri Seviye BUILDERFORM Kullanımı​

BUILDERFORM sınıfı, form alanları oluşturmak için çeşitli helper fonksiyonlara sahiptir. İşte generateInput() fonksiyonunun farklı kullanım şekilleri:

1. File Uploader​

// Dosya yükleyici
$fileUploader = $this->form->generateInput(
    'file',                                    // Input tipi: Dosya
    'PDF Dosyası Yükle',                       // Etiket
    @$this->data['data'][0]['pdfFile'] ?? '',  // Varsayılan değer
    'pdf_file',                                // ID
    'form-control',                            // CSS sınıfı
    [
        'name' => 'data[0][pdfFile]',          // name özniteliği
        'accept' => '.pdf',                    // Kabul edilen dosya türleri
        'data-max-size' => '5242880'           // Maksimum dosya boyutu (5MB)
    ]
);

2. Date Picker​

// Tarih seçici
$datePicker = $this->form->generateInput(
    'date',                                    // Input tipi: Tarih
    'Etkinlik Tarihi',                         // Etiket
    @$this->data['data'][0]['eventDate'] ?? '', // Varsayılan değer
    'event_date',                              // ID
    'form-control',                            // CSS sınıfı
    [
        'name' => 'data[0][eventDate]',        // name özniteliği
        'min' => date('Y-m-d'),                // Minimum tarih (bugün)
        'max' => date('Y-m-d', strtotime('+1 year')) // Maksimum tarih (1 yıl sonra)
    ]
);

3. Radio Buttons​

// Radyo düğmeleri
$radioButtons = $this->form->generateInput(
    'radio',                                   // Input tipi: Radyo
    'Konum',                                   // Etiket
    @$this->data['data'][0]['position'] ?? 'left', // Varsayılan değer
    'position_radio',                          // ID
    'form-check-input',                        // CSS sınıfı
    [
        'name' => 'data[0][position]',         // name özniteliği
        'options' => [                         // Seçenekler
            'left' => 'Sol',
            'center' => 'Orta',
            'right' => 'Sağ'
        ],
        'inline' => true                       // Yan yana gösterme
    ]
);

4. İç İçe Seçenekler​

// İç içe seçenekler
$nestedOptions = $this->form->generateInput(
    'select',                                  // Input tipi: Seçim kutusu
    'Kategori',                                // Etiket
    @$this->data['data'][0]['category'] ?? '', // Varsayılan değer
    'category_select',                         // ID
    'form-select',                             // CSS sınıfı
    [
        'name' => 'data[0][category]',         // name özniteliği
        'options' => [                         // Seçenekler
            'Elektronik' => [                  // Ana kategori
                'phones' => 'Telefonlar',      // Alt kategori
                'computers' => 'Bilgisayarlar', // Alt kategori
                'tvs' => 'Televizyonlar'       // Alt kategori
            ],
            'Giyim' => [                       // Ana kategori
                'men' => 'Erkek',              // Alt kategori
                'women' => 'Kadın',            // Alt kategori
                'kids' => 'Çocuk'              // Alt kategori
            ]
        ],
        'optgroups' => true                    // Grup başlıkları göster
    ]
);

5. Çoklu Seçim (MultiSelect)​

// Çoklu seçim
$multiSelect = $this->form->generateInput(
    'multiselect',                             // Input tipi: Çoklu seçim
    'Özellikler',                              // Etiket
    @$this->data['data'][0]['features'] ?? [], // Varsayılan değer
    'features_select',                         // ID
    'form-select',                             // CSS sınıfı
    [
        'name' => 'data[0][features][]',       // name özniteliği (çoklu değer için [] eklenir)
        'options' => [                         // Seçenekler
            'wifi' => 'Wi-Fi',
            'bluetooth' => 'Bluetooth',
            'nfc' => 'NFC',
            'gps' => 'GPS',
            '5g' => '5G'
        ],
        'multiple' => true                     // Çoklu seçim
    ]
);

6. Özel Arayüzlü Seçiciler​

// Özel bir renk paleti
$colorPalette = $this->form->generateInput(
    'custom',                                  // Input tipi: Özel
    'Tema Rengi',                              // Etiket
    @$this->data['data'][0]['themeColor'] ?? '#3498db', // Varsayılan değer
    'theme_color',                             // ID
    'color-palette',                           // CSS sınıfı
    [
        'name' => 'data[0][themeColor]',       // name özniteliği
        'type' => 'color-palette',             // Özel tip
        'colors' => [                          // Renk seçenekleri
            '#3498db' => 'Mavi',
            '#2ecc71' => 'Yeşil',
            '#e74c3c' => 'Kırmızı',
            '#f39c12' => 'Turuncu',
            '#9b59b6' => 'Mor'
        ]
    ],
    '.'.$this->dataID.'-container',            // CSS seçici
    'background-color'                         // CSS özelliği
);

JavaScript Entegrasyonu​

VERYSOFT Builder sisteminde, form elemanları ile JavaScript kodu entegrasyonu yapmak için cnt() fonksiyonu içinde aşağıdaki gibi kod ekleyebilirsiniz:

// JavaScript kodu ekleme
$formInputs .= '<script>
$(document).ready(function() {
    // Görsel seçildiğinde önizleme göster
    $("input[name=\'data[0][image_url]\']").change(function() {
        if(this.value) {
            const previewDiv = $("<div class=\'image-preview mt-2\'><img src=\'" + this.value + "\' class=\'img-fluid rounded\' /></div>");
            $(this).parent().append(previewDiv);
        }
    });
    
    // Renk seçildiğinde metin rengini güncelle
    $("input[name=\'data[0][textColor]\']").change(function() {
        const colorValue = $(this).val();
        const previewText = $("#text-preview");
        
        if(previewText.length === 0) {
            const newPreview = $("<div id=\'text-preview\' class=\'p-3 mt-2 border rounded\'><p>Önizleme Metni</p></div>");
            $(this).parent().append(newPreview);
            previewText = newPreview;
        }
        
        previewText.css("color", colorValue);
    });
});
</script>';

BuilderController ve BuilderRout İle Etkileşim​

VERYSOFT Builder sisteminde, form verileri BuilderRout.php içindeki saveElementForm() metodu tarafından işlenir. Form gönderildiğinde, veriler bu metod tarafından alınır ve element sınıfının ilgili metodları çağrılır.

// BuilderRout.php içinden
public function saveElementForm()
{
    // POST verilerini al
    $data = $_POST;
    
    // Element verileri
    $elementType = $data['element_type'];
    $elementID = $data['element_id'];
    $elementData = $data['data'] ?? [];
    $elementCSS = $data['css'] ?? [];
    
    // Element sınıfını oluştur
    $className = "\\THEMS\\" . $this->theme . "\\FORM\\" . $elementType;
    $element = new $className($elementData, $elementCSS, $elementID);
    
    // Element verilerini kaydet
    // ...
    
    // Başarılı yanıt
    echo json_encode(['status' => 'success']);
}

Veri Yapısı ve İşleme​

Element formundan gelen veriler, genellikle şu yapıya sahiptir:

$data = [
    'data' => [
        0 => [
            'title' => 'Başlık',
            'content' => 'İçerik',
            'image_url' => 'https://example.com/image.jpg',
            'buttonText' => 'Daha Fazla',
            'buttonUrl' => 'https://example.com'
        ],
        1 => [
            // Başka bir öğe
        ]
    ],
    'css' => [
        '.element-123-text' => [
            'font-size' => '24px',
            'color' => '#333333'
        ],
        '.element-123-button' => [
            'background-color' => '#007bff',
            'color' => '#ffffff',
            'padding' => '10px 20px'
        ]
    ]
];

Bu veriler, element sınıfındaki $this->data özelliğinde saklanır ve template dosyası tarafından kullanılır.

Template Yapısı ve Smarty Kullanımı​

Element template dosyası, elementin görsel sunumunu tanımlar ve dinamik içeriği göstermek için Smarty template dili kullanır.

Temel Smarty Sözdizimi​

{* Bu bir Smarty yorum satırıdır *}

{* Değişken kullanımı *}
<h1>{$variable}</h1>

{* Varsayılan değer ile değişken kullanımı *}
<p>{$text|default:"Varsayılan Metin"}</p>

{* Koşullu ifade *}
{if $condition}
    <p>Koşul doğru ise gösterilir</p>
{else}
    <p>Koşul yanlış ise gösterilir</p>
{/if}

{* Döngü - foreach *}
{foreach $items as $item}
    <div>{$item.title}</div>
{/foreach}

{* Döngü - for *}
{for $i=1 to 5}
    <div>Öğe {$i}</div>
{/for}

{* Literal blok - Smarty tarafından işlenmeyecek kod bloğu *}
{literal}
    <script>
        var x = {y: 10, z: 20};
        if (x.y > 5) {
            console.log("x.y değeri 5'ten büyük");
        }
    </script>
{/literal}

Element Template Örneği​

Aşağıda, bir slider elementi için örnek bir Smarty template dosyası bulunmaktadır:

{* Slider Element Template *}
{extends file='layout/example/slider.tpl'}
{block name='slider'}

    {* Element verilerini kontrol et *}
    {if isset($slider.data[0])}
        {* İlk veri öğesini 'd' değişkenine ata *}
        {assign var="d" value=$slider.data[0]}
        
        {* Element konteyner yapısı *}
        <div class="{$slider.info.elementID}-parent section overlay overlay-show overlay-op-8 border-0 m-0 p-0"
                 style="background-image: url('{$d.image_url|default:""}');
                        background-size: cover; 
                        background-position: center; 
                        height: 100vh;">
            <div class="container container-xl-custom pt-5 h-100">
                <div class="row align-items-center pt-5 h-100">
                    <div class="col">
                        {* Metin alanı *}
                        <h1 class="{$slider.info.elementID}-text word-rotator letters type type-clean-light text-color-light font-weight-extra-bold text-12 line-height-2 mb-3 appear-animation"
                            data-appear-animation="fadeIn" 
                            data-appear-animation-delay="300">
                           {$d.title|default:"Daha Fazla Bilgi"}<br>
                        </h1>
                        
                        {* Buton alanı *}
                        <a class="{$slider.info.elementID}-button" href="{$d.buttonUrl|default:'#'}"
                           class="btn btn-primary btn-modern font-weight-bold text-3 py-3 btn-px-5 mt-2 appear-animation animated fadeInUpShorter appear-animation-visible">
                            {$d.buttonText|default:"Daha Fazla Bilgi"} <i class="fas fa-arrow-right ms-2"></i>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    {else}
        {* Veri yoksa hata mesajı göster *}
        <p class="text-center text-danger">Slider verisi bulunamadı.</p>
    {/if}
{/block}

Smarty Değişkenleri ve Element Verileri​

Element template dosyalarında, element verilerine aşağıdaki şekilde erişebilirsiniz:

1. Element Verileri​

{* Element içerik verileri *}
{$[ELEMENT-ADI].data[0].title}
{$[ELEMENT-ADI].data[0].image_url}

{* Değişken atama ile daha kısa erişim *}
{assign var="d" value=$[ELEMENT-ADI].data[0]}
{$d.title}
{$d.image_url}

2. CSS Sınıfları ve Kimlikler​

{* Element kimliğine erişim *}
<div class="{$[ELEMENT-ADI].info.elementID}-container">
    {* İçerik *}
</div>

3. Varsayılan Değerler​

{* Veri yoksa varsayılan değer göster *}
<h1>{$d.title|default:"Başlık"}</h1>
<p>{$d.description|default:"Açıklama"}</p>

foreach Kullanımı​

Smarty'de foreach etiketi, dizi verileri üzerinde döngü yapmak için kullanılır. Özellikle birden fazla öğe içeren elementler için yararlıdır:

{* Slider öğeleri *}
<div class="slider-container">
    {foreach $slider.data as $key => $item}
        <div class="slider-item">
            <img src="{$item.image_url|default:''}" alt="Slide {$key+1}">
            <div class="caption">
                <h3>{$item.title|default:"Başlık"}</h3>
                <p>{$item.description|default:""}</p>
                {if isset($item.buttonText) && $item.buttonText != ""}
                    <a href="{$item.buttonUrl|default:'#'}" class="btn">{$item.buttonText}</a>
                {/if}
            </div>
        </div>
    {/foreach}
</div>

if-elseif-else Kullanımı​

Koşullu ifadeler, template içeriğini dinamik olarak göstermek için kullanılır:

{* Slider tipi kontrolü *}
{if $slider.data[0].type == "fullscreen"}
    <div class="full-slider">
        {* Tam ekran slider *}
    </div>
{elseif $slider.data[0].type == "boxed"}
    <div class="boxed-slider">
        {* Kutulu slider *}
    </div>
{else}
    <div class="default-slider">
        {* Varsayılan slider *}
    </div>
{/if}

literal Kullanımı​

literal etiketi, Smarty tarafından işlenmemesi gereken kodları (genellikle JavaScript) içermek için kullanılır:

{* JavaScript kodları için literal bloğu *}
{literal}
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Smarty tarafından işlenmemesi gereken JavaScript kodları
        var sliderOptions = {
            autoplay: true,
            delay: 5000,
            effect: 'fade',
            pagination: {
                el: '.swiper-pagination',
                clickable: true
            },
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev'
            }
        };
        
        var swiper = new Swiper('.swiper-container', sliderOptions);
    });
</script>
{/literal}

Akıllı Değişken Kullanımı​

Smarty'de değişkenler akıllı şekilde kullanılabilir:

{* CSS sınıfını koşula göre ayarla *}
<div class="{if $slider.data[0].size == 'large'}large-container{else}small-container{/if}">
    {* İçerik *}
</div>

{* Değişken varlığı kontrolü *}
{if isset($slider.data[0].title) && $slider.data[0].title != ""}
    <h1>{$slider.data[0].title}</h1>
{/if}

{* Dizi içinde arama *}
{if 'home' in $slider.data[0].pages}
    <span>Ana sayfada gösteriliyor</span>
{/if}

Include ve Extends​

Smarty'de şablonları birleştirmek için include ve extends etiketleri kullanılır:

{* Diğer bir şablonu dahil et *}
{include file='components/button.tpl' buttonText=$slider.data[0].buttonText}

{* Bir düzeni genişlet *}
{extends file='layout/master.tpl'}
{block name='content'}
    {* İçerik *}
{/block}

JSON Yapılandırma Dosyaları​

VERYSOFT Builder, element tanımları ve tema yapılandırması için JSON dosyalarını kullanır.

[TEMA-ADI]_ELEMENT.json​

Bu dosya, tema için kullanılabilen statik ve dinamik elementleri tanımlar.

{
  "static": [
    {
      "logo": {
        "img": "https://example.com/icons/logo.png",
        "coverimage": "https://example.com/cover.png",
        "fonksiyon": "headerLogo",
        "name": "Logo"
      }
    },
    {
      "image": {
        "img": "https://example.com/icons/image.png",
        "coverimage": "https://example.com/cover.png",
        "fonksiyon": "Gorsel",
        "name": "Görsel"
      }
    }
  ],
  "dinamic": [
    {
      "slider": {
        "img": "https://example.com/icons/slider.png",
        "coverimage": "https://example.com/cover.png",
        "fonksiyon": "slider",
        "name": "Slider"
      }
    },
    {
      "Bolumler": {
        "img": "https://example.com/icons/sections.png",
        "coverimage": "https://example.com/cover.png",
        "fonksiyon": "Bolumler",
        "name": "Bölümler"
      }
    }
  ]
}

[TEMA-ADI]_CONFIG.json​

Bu dosya, temanın yapılandırmasını ve pozisyonlarını tanımlar.

{
  "position": {
    "header": {
      "subPosition": {
        "top": [],
        "bottom": {
          "default": true,
          "right": []
        }
      }
    },
    "content": {
      "default": true
    },
    "footer": {
      "subPosition": {
        "footer": { "default": true }
      }
    }
  },
  "template": {
    "templateone": [],
    "templatetwo": [],
    "templatetree": []
  }
}

Element Oluşturma Süreci​

VERYSOFT Builder'da yeni bir element oluşturmak için aşağıdaki adımları izlemelisiniz:

1. PHP Sınıfı Oluşturma​

İlk adım, elementin mantığını ve form yapısını tanımlayan PHP sınıfını oluşturmaktır.

  1. /THEMS/[TEMA-ADI]/FORM/ dizininde [ELEMENT-ADI].php adında yeni bir dosya oluşturun
  2. Element sınıfını tanımlayın (yukarıda açıklandığı gibi)
  3. cnt(), format() ve advanced() metodlarını uygulayın

2. Template Dosyası Oluşturma​

İkinci adım, elementin görsel sunumunu tanımlayan Smarty template dosyasını oluşturmaktır. Bu dosya, /THEMS/[TEMA-ADI]/elements/ dizininde saklanır ve elementin HTML yapısını tanımlar.

{* InfoBox Element Template *}
{extends file='layout/base.tpl'}
{block name='content'}

    {* Element verilerini kontrol et *}
    {if isset($infoBox.data[0])}
        {* Veri dizisini değişkene ata - daha kolay erişim için *}
        {assign var="d" value=$infoBox.data[0]}
        
        {* InfoBox ana container *}
        <div class="{$infoBox.info.elementID}-box card shadow-sm mb-4" 
             style="{if isset($d.boxColor) && $d.boxColor != ''}background-color: {$d.boxColor};{/if}">
            <div class="card-body p-4">
                {* Başlık ve ikon alanı *}
                <div class="d-flex align-items-center mb-3">
                    {* Ikon varsa göster *}
                    {if isset($d.icon) && $d.icon != ""}
                        <i class="{$infoBox.info.elementID}-icon fa {$d.icon|default:'fa-info-circle'} fa-2x me-3"></i>
                    {/if}
                    
                    {* Başlık *}
                    <h4 class="{$infoBox.info.elementID}-title mb-0">{$d.title|default:"Bilgi Kutusu"}</h4>
                </div>
                
                {* İçerik alanı *}
                <div class="{$infoBox.info.elementID}-content">
                    {$d.content|default:""}
                </div>
                
                {* Bağlantı varsa göster *}
                {if isset($d.linkText) && $d.linkText != ""}
                    <div class="mt-3">
                        <a href="{$d.linkUrl|default:'#'}" class="{$infoBox.info.elementID}-link">
                            {$d.linkText} <i class="fas fa-angle-right ms-1"></i>
                        </a>
                    </div>
                {/if}
            </div>
        </div>
    {else}
        {* Veri yoksa basit bir mesaj göster *}
        <div class="alert alert-info">
            <i class="fa fa-info-circle me-2"></i> InfoBox elementi için veri bulunamadı.
        </div>
    {/if}
    
{/block}
Template Dosyasının Yapısı​

  1. Extends ve Block: Template başka bir şablonu genişletebilir. Örneğin {extends file='layout/base.tpl'} ile temel şablonu genişletip, {block name='content'} içinde içeriği tanımlıyoruz.

  2. Veri Kontrolü: Template önce verilerin varlığını {if isset($infoBox.data[0])} ile kontrol eder. Veri yoksa alternatif içerik gösterilir.

  3. Değişken Atama: Kodun okunabilirliğini artırmak için {assign var="d" value=$infoBox.data[0]} ile kısa bir değişken adı kullanılır.

  4. CSS Sınıfları: Element ID'si ($infoBox.info.elementID) farklı stil kuralları uygulamak için kullanılır. Örneğin {$infoBox.info.elementID}-box, {$infoBox.info.elementID}-title vb.

  5. Koşullu İçerik: İkon ve bağlantı gibi opsiyonel elemanlar {if} kontrolleri ile gösterilir/gizlenir.

  6. Varsayılan Değerler: Veriler eksikse varsayılan değerler gösterilir (örneğin {$d.title|default:"Bilgi Kutusu"}).

3. TEMA_ELEMENT.json Güncellemesi​

Son adım, oluşturduğunuz elementi tema yapılandırma dosyasına eklemektir. Bu, kullanıcıların Builder arayüzünde elementi görmesini ve kullanmasını sağlar.

/THEMS/[TEMA-ADI]/[TEMA-ADI]_ELEMENT.json dosyasını açın ve "dinamic" dizisine yeni bir öğe ekleyin:

{
  "static": [
    // ... mevcut statik elementler ...
  ],
  "dinamic": [
    // ... mevcut dinamik elementler ...
    {
      "infoBox": {
        "img": "assets/img/elements/info-box.png",  // Element ikonu
        "coverimage": "assets/img/covers/info-box-cover.png",  // Önizleme görseli
        "fonksiyon": "infoBox",  // Element sınıfının adı
        "name": "Bilgi Kutusu"   // Kullanıcıya gösterilecek ad
      }
    }
  ]
}
JSON Yapılandırmasının Anahtarları​
  • img: Builder panelinde gösterilecek küçük ikon. Genellikle 64x64 px boyutunda.
  • coverimage: Element seçildiğinde gösterilecek önizleme görseli. Genellikle 300x200 px boyutunda.
  • fonksiyon: PHP sınıfının tam adı. Bu değer, sistem tarafından sınıfı yüklemek için kullanılır.
  • name: Builder arayüzünde kullanıcıya gösterilecek ad.

4. Test Etme ve Hata Ayıklama​

Elementi oluşturduktan sonra test etmek için:

  1. Builder arayüzünü açın
  2. "Element Ekle" butonuna tıklayın
  3. Yeni eklediğiniz "Bilgi Kutusu" elementini bulun
  4. Elementi sayfaya sürükleyin
  5. Düzenle butonuna tıklayarak form ve görünümün doğru çalıştığını kontrol edin

En yaygın karşılaşılan hatalar ve çözümleri:

  • Element Listede Görünmüyor: JSON dosyasındaki yapıyı ve fonksiyon adının doğru olduğunu kontrol edin
  • Form Alanları Görünmüyor: cnt() fonksiyonunun doğru HTML çıktısı ürettiğinden emin olun
  • CSS Özellikleri Uygulanmıyor: Selektörlerin TPL dosyasındaki sınıf adlarıyla eşleştiğini kontrol edin
  • Veri Kaydedilmiyor: İnput alanlarındaki name özniteliklerinin doğru formatı kullandığından emin olun
  • Javascript Hataları: Tarayıcı konsolunu kontrol edin ve JavaScript kodlarınızı {literal} etiketleri içine alın

5. İleri Seviye Özelleştirmeler​

Elementin daha gelişmiş versiyonlarında şunları da ekleyebilirsiniz:

  1. Çoklu Bilgi Kutuları: Akordiyon içinde birden fazla bilgi kutusu ekleyebilmek için JavaScript ile dinamik form öğeleri ekleme.

  2. Tema Seçenekleri: Farklı ön tanımlı stiller (temel, başarı, uyarı, hata vb.) için bir seçim alanı ekleyin:

    $formInputs .= $this->form->generateInput(
        'select',
        'Tema',
        @$this->data['data'][0]['theme'] ?? 'default',
        'theme_select',
        'form-select',
        [
            'name' => 'data[0][theme]',
            'options' => [
                'default' => 'Varsayılan',
                'primary' => 'Birincil',
                'success' => 'Başarı',
                'warning' => 'Uyarı',
                'danger' => 'Tehlike'
            ]
        ]
    );

  3. Animasyon Efektleri: Elementin sayfaya yüklenirken veya görünür olduğunda animasyon efektleri ekleyin:

    $formInputs .= $this->form->generateInput(
        'select',
        'Animasyon',
        @$this->data['data'][0]['animation'] ?? 'none',
        'animation_select',
        'form-select',
        [
            'name' => 'data[0][animation]',
            'options' => [
                'none' => 'Yok',
                'fade' => 'Solma',
                'slide' => 'Kayma',
                'bounce' => 'Zıplama'
            ]
        ]
    );

  4. Duyarlı Tasarım Özellikleri: format() veya advanced() fonksiyonlarında duyarlı tasarım için özel stil seçenekleri ekleyin:

    $items[] = [
        'title' => "Duyarlı Tasarım",
        'content' => $this->form->style(
            ['responsive'],
            [],
            "",
            ".".$this->dataID."-box",
            @$this->data["css"][".".$this->dataID."-box"]
        )
    ];

6. Element Kullanımı ve Belgeleme​

Yeni elementi projelerinizde etkili bir şekilde kullanmak için şunları göz önünde bulundurun:

  1. Kullanım Senaryoları: Elementin ne zaman ve nerede kullanılacağını belirleyin (bildirimler, ipuçları, önemli notlar vb.)

  2. Dokümantasyon: Elementiniz için basit bir kullanım kılavuzu oluşturun ve şunları içersin:

    • Elementin genel açıklaması
    • Desteklenen özellikler
    • Örnek kullanımlar ve ekran görüntüleri
    • Yaygın sorunlar ve çözümleri

  3. Element Optimize Etme: Performansı artırmak için;

    • CSS sınıflarını minimuma indirin
    • JavaScript kodlarını sayfa sonuna taşıyın
    • Gereksiz HTTP isteklerini azaltın

Sonuç​

Bu doküman, VERYSOFT Builder sisteminde özel element geliştirmenin temel adımlarını kapsamlı bir şekilde açıklamaktadır. Bu rehberi takip ederek, temel elementlerden karmaşık ve dinamik elementlere kadar çeşitli elementler oluşturabilirsiniz.

Unutmayın ki element geliştirme hem teknik beceriler hem de kullanıcı deneyimi tasarımı gerektirir. İyi bir element hem fonksiyonel hem de kullanımı kolay olmalıdır.

Son Güncelleme: 22.10.2023
Versiyon: 1.0.0
İletişim: destek@verysoft.com