Admin Panel UI/UX Masterclass (DLE 19.1 Native)

1. Panel ve Sayfa Başlığı

Her admin sayfasının echoheader() ve echofooter() fonskiyonları arasına bir veya birden fazla Panel yerleştirilerek inşa edildiğini göreceksiniz. Temel bir panel çerçevesi şöyledir:

<?php
if( !defined( 'DATALIFEENGINE' ) OR !defined( 'LOGGED_IN' ) ) die( "Hacking attempt!" );

// İkonlu Sayfa Başlığı
echoheader( "<i class=\"fa fa-plug position-left\"></i><span class=\"text-semibold\">Eklentim</span>", "Eklenti Açıklaması" );

// Standart Panel Kutusu
echo "<div class=\"panel panel-default\">
    <div class=\"panel-heading\">
        Başlık veya Sekmeler
    </div>
    <div class=\"panel-body\">
        İçerik buraya...
    </div>
</div>";

echofooter();
?>

2. Gelişmiş Navigasyon ve Sekmeler (Tabs)

A. Yatay Üst Filtre ve Gelişmiş Navbar (navbar-collapse collapse)

DLE 19.1'de alt sayfalar arası geçiş, arama araçları veya sık kullanılan komutlar için en profesyonel yapı, mobilde "Hamburger" menüye dönüşen (collapse) Gelişmiş DLE Navbar iskeletidir. Sıklıkla options.php (sistem ayarları) veya editnews.php (haber listesi) içinde "Filtreleme Arayüzü" olarak görebilirsiniz.

Nasıl Çalışır?

1. navbar-xs: DLE Navbar'ını varsayılan kalınlıktan kurtarıp zarif bir çizgi şekline sokar.
2. visible-xs-block: Yalnızca telefon gibi dar ekranlarda menüyü bir hamburger ikonuna <i class="fa fa-bars"> daraltmak (collapse) için kullanılır.
3. data-toggle="collapse" data-target="#navbar-filter": Hamburger ikonuna tıklandığında altta gizlenmiş asıl menüyü aşağı doğru açılmaya tetikleyen kritik Bootstrap JavaScript parametreleridir. `id` değerlerinin birbiriyle eşleşmesi zorunludur.
4. Arama ve Kısayol Düzenleri (navbar-right): Sola dayalı sekmelerin yanı sıra, arama kutuları gibi sağa dayalı elemanlar navbar-right bloğunun içine alınarak ekran genişliğinde estetikçe yayılır.

<!-- Sıkıştıran ve Boyutlandıran DLE Navbar Kapsayıcısı -->
<div class="navbar navbar-default navbar-component navbar-xs systemsettings">
    
    <!-- SADECE MOBİL İÇİN: Hamburger Menü Tetikleyicisi -->
    <ul class="nav navbar-nav visible-xs-block">
        <li class="full-width text-center">
            <!-- 'data-target' değeri alt menünün ID'sini tam tutmalıdır -->
            <a data-toggle="collapse" data-target="#navbar-filtre-id"><i class="fa fa-bars"></i></a>
        </li>
    </ul>
    
    <!-- ASIL MENÜ İÇERİĞİ (Mobilde Gizlenir) -->
    <div class="navbar-collapse collapse" id="navbar-filtre-id">
        
        <!-- SOLA DAYALI SEKMELER (Tablar, Sayfalar) -->
        <ul class="nav navbar-nav">
            <!-- 'active' sınıfı bulunulan sekmeyi boyar -->
            <li class="active">
                <a href="?mod=eklenti" class="tip" title="Tooltip Bilgisi">
                     <i class="fa fa-cog"></i> Tüm Ayarlar
                </a>
            </li>
            <li><a href="?mod=eklenti&action=log"><i class="fa fa-shield"></i> Güvenlik Logu</a></li>
            <li><a href="#" onclick="JsCalistir(); return false;"><i class="fa fa-refresh"></i> Eylemi Tetikle</a></li>
        </ul>

        <!-- SAĞA DAYALI İÇERİKLER (Arama Çubuğu, Sayfalama Vb.) -->
        <ul class="nav navbar-nav navbar-right">
             <!-- Arama Formu veya Basit İkon -->
             <li>
                  <a href="?mod=eklenti&action=hizli_ekle">
                       <i class="fa fa-plus text-success"></i> Yeni Veri Ekle
                  </a>
             </li>
        </ul>

    </div>
</div>

B. Sayfa İçi Tab/Sekme Panelleri

addnews.php ve main.php dosyalarında sıkça görülen grup sekmeleri:

<div class="panel panel-default">
    <div class="panel-heading">
        <ul class="nav nav-tabs nav-tabs-solid">
            <li class="active"><a href="#tabmain" data-toggle="tab"><i class="fa fa-home position-left"></i> Ana Ayarlar</a></li>
            <li><a href="#tabextra" data-toggle="tab"><i class="fa fa-tasks position-left"></i> Ekstra</a></li>
        </ul>
    </div>
    
    <div class="panel-tab-content tab-content">
        <div class="tab-pane active" id="tabmain">
            <div class="panel-body">Ana içerik buraya</div>
        </div>
        <div class="tab-pane" id="tabextra">
            <div class="panel-body">Diğer içerik buraya</div>
        </div>
    </div>
</div>

3. Medya Listeleri ve İkonlu İstatistik/Kısayollar

Eğer bir modül ana sayfası yapıyor ve büyük ikonlu tıklanabilir butonlar sunmak istiyorsanız, list-bordered ile row box-section yapısını kullanın.

<div class="panel-body list-bordered">
    <div class="row box-section">    
        <div class="col-sm-6 media-list media-list-linked">
            <a class="media-link" href="?mod=eklentim&action=ayarlar">
                <div class="media-left"><img src="public/adminpanel/images/tools.png" class="img-lg section_icon"></div>
                <div class="media-body">
                    <h6 class="media-heading text-semibold">Yapılandırma</h6>
                    <span class="text-muted">Eklentinin tüm detaylı seçeneklerini inceleyin.</span>
                </div>
            </a>
        </div>
        <div class="col-sm-6 media-list media-list-linked">
             <!-- İkinci ikonlu link... -->
        </div>
    </div>
</div>

4. Form Düzeni, Tooltipler ve Uyarılar

A. Yatay Form Grupları

Form elemanları için form-horizontal ana sınıftır. Her bir input/label genelde 2 birim label, 10 birim input (`col-md-2`, `col-md-10`) şeklinde yerleştirilir.

<form class="form-horizontal">
    <div class="form-group">
        <label class="control-label col-md-2 col-sm-3">Ayarlar İsmi</label>
        <div class="col-md-10 col-sm-9">
            <input type="text" dir="auto" name="ayar_isim" class="form-control width-400">
            
            <!-- Native Yardım Tooltip Modülü -->
            <i class="help-button visible-lg-inline-block text-primary-600 fa fa-question-circle position-right position-left" data-rel="popover" data-trigger="hover" data-placement="auto right" data-content="Ayar hakkında ipucu metni." ></i>
        </div>
    </div>
</form>

B. Checkbox Çeşitleri (icheck / switch)

DLE standartlarında seçenek belirleme ve aktif/pasif etme araçları:

<!-- İleri Şık Checkbox Kutucuk -->
<div class="checkbox"><label><input class="icheck" type="checkbox" name="is_active" value="1" checked> Bu modülü aktif et</label></div>

<!-- IOS Tarzı Toggled Switch -->
<input class="switch" type="checkbox" name="switch_1" value="1" checked>

<!-- Seçim Kutuları (Dropdown) -->
<select class="uniform">...</select>
<select class="categoryselect" multiple>...</select>

C. Olay (Event) Bildirimleri ve JS Çıktıları (DLEPush / Loading)

Modern DLE arayüzlerinde alert() veya basit konsol çıktıları yerine yerleşik ekran kilitleri (`ShowLoading()`) ve sağ alttan çıkan "Toast/Growl" mesajları (`DLEPush`) kullanılır. En iyi pratik, addnews.php dosyasındaki hata yakalama sistemini (form doğrulama ve AJAX geri dönüşü) kopyalamaktır.

1. Form Doğrulama Örneği (`addnews.php` Stili):

Kullanıcı başlık girmemişse ekranı uyarıp işlemi iptal edelim:

function check_form() {
    // Örneğin başlık boş mu diye bakıyoruz
    if(document.addnews.title.value.trim() == ''){
        DLEPush.error('Lütfen makale başlığını girin!'); // Sağ alttan kırmızı hata çıkar
        return false; // İşlemi durdur
    }
    
    // Her şey tamamsa...
    DLEPush.info('İşlem başlatılıyor, lütfen bekleyin...');
    return true;
}

2. Güvenli AJAX İşlemleri ve Hata Yakalama (Try/Catch Mantığı):

AJAX ile veri yollandığında yüklenici (spinner) tetiklemesi ve `jqXHR` sunucu hatalarını okuma pratiğidir. Yine native modüllerdeki standart budur:

function save_data() {
    var title_val = document.getElementById('title').value;

    ShowLoading(''); // 1. Ekranı koyultur, ortaya "Bekleyin" spinner'ı atar

    $.post("index.php?controller=ajax&mod=my_plugin", { action: 'save', title: title_val, user_hash: dle_login_hash }, function(data){
        
        HideLoading(''); // 2. Sonuç geldiğinde ekranı aç
        
        // PHP'mizden gelen json yanıtını kontrol ediyoruz
        if(!data.success) {
            DLEPush.warning(data.error); // Sarı renkli uyarı (Örn: "Bu kayıt zaten var")
        } else {
            DLEPush.success('İşlem başarıyla tamamlandı!'); // Yeşil başarılı onayı
        }

    }, 'json').fail(function(jqXHR, textStatus, errorThrown ) {
        // 3. EĞER SUNUCU ÇÖKERSE VEYA 500/403 HATASI OLURSA
        var error_status = '';
        
        if (jqXHR.status < 200 || jqXHR.status >= 300) {
            error_status = 'HTTP Error: ' + jqXHR.status;
        } else {
            error_status = 'HTTP Error: ' + jqXHR.responseText;
        }

        DLEPush.error(error_status); // Kritik hatayı bas!
    });

    return false;
}

3. Onay Pencereleri (Confirm)

DLEconfirm( 'İşleme devam edilsin mi?', 'Dikkat', function() { /* Tamam'a Tıklanınca */ } );
DLEconfirmDelete( 'Sileceksiniz emin misiniz?', 'Bilgi', function() { /* Sadece silme için */ } );

5. Çizgili Ayar Tabloları (Panel-Flat)

Özellikle options.php yapısında sıkça gördüğünüz "solda bilgi, sağda düğme" tablo stili için standart:

<div class="panel panel-flat">
  <div class="panel-body border-bottom">
    Genel Yapılandırma
  </div>
  <table class="table table-striped">
    <tr>
        <td class="col-xs-6 col-sm-6 col-md-7">
            <h6 class="media-heading text-semibold">Önbellek Seçeneği</h6>
            <div class="text-muted text-size-small hidden-xs">Sayfaların önbelleğe alınıp alınmayacağını belirler.</div>
        </td>
        <td class="col-xs-6 col-sm-6 col-md-5">
            <input class="switch" type="checkbox" name="cache_active" value="1" checked>
        </td>
    </tr>
  </table>
</div>

6. Buton Varyasyonları

DLE "raised" (gölgeli/yükseltilmiş) düğme ailesini kullanır:

<!-- Ana İşlem Butonları -->
<button class="btn bg-primary-600 btn-sm btn-raised"><i class="fa fa-floppy-o"></i> Kaydet</button>
<button class="btn bg-teal btn-sm btn-raised"><i class="fa fa-plus"></i> Ekle</button>
<button class="btn bg-info-800 btn-sm btn-raised">Bilgi Ver</button>

<!-- Tehlikeli veya İkincil İşlemler -->
<button class="btn bg-danger-600 btn-sm btn-raised"><i class="fa fa-trash"></i> Sil</button>
<button class="btn bg-brown-600 btn-sm btn-raised">Temizle</button>
<button class="btn bg-slate-600 btn-sm btn-raised">Güncelle!</button>

7. Zengin Metin Editörü (TinyMCE) Entegrasyonu

DLE'de zengin metin alanları (Kısa haber, tam haber vb.) TinyMCE kütüphanesi ile yönetilir. Editördeki veriyi form ile göndermek veya dışarıdan veri basmak için özel fonksiyonlar kullanılır.

A. Veri Eşitleme (triggerSave)

JavaScript ile (Örneğin AJAX ile) form verilerini toplamadan önce editördeki içeriği gizli <textarea> alanına aktarmanız gerekir. Aksi takdirde içerik boş gider.

// Tüm TinyMCE alanlarını senkronize et (DLE Standardı)
tinyMCE.triggerSave();

// Şimdi textarea'dan veri okunabilir
var content = $('#short_story').val();

B. Programatik Veri Gönderme ve Alma

// Editöre dışarıdan içerik basmak (Input/Output)
tinymce.get('short_story').setContent('<p>Yeni içerik buraya</p>');

// Editörden içeriği doğrudan (HTML olarak) almak
var html = tinymce.get('short_story').getContent();

8. Ek Alanlar (xfields) Mimarisi

DLE'nin en güçlü yanlarından biri olan **Extra Fields (xfields)**, makalelere özel alanlar eklemenizi sağlar. Admin panelinde bu alanlar eklenti dosyasında (`addnews.php` vb.) otomatik olarak render edilir.

Nasıl Render Edilir?

DLE çekirdeği DLEXFields::FieldsList() sınıfı ile ek alanları çeker ve form-group olarak hazırlar.

// PHP Tarafında Ek Alanları Hazırlama
$xfields = DLEXFields::FieldsList();
$xf_root = array();

foreach ($xfields['fields'] as $value) {
    // Sadece belirli kategorilere veya köke ait alanları toplar
    $xf_root[] = $value;
}
$xf_root = implode('', $xf_root); // Formun içine basılmaya hazır HTML

Veritabanı Saklama Formatı:

Ek alanlar veritabanında (dle_post tablosunda `xfields` sütunu) genellikle şu formatta saklanır:

alan_adi1|deger1||alan_adi2|deger2||alan_adi3|deger3

Not: DLE 19+ sürümleri bu yapıyı yavaş yavaş JSON formatına taşımaktadır.

9. DLEPlugins::Check() ve Güvenli Dosya Dahil Etme

DLE eklenti sistemi, dosyaları fiziksel yollardan değil, Virtual File System (VFS) üzerinden okur. Bu yüzden bir PHP dosyasını include veya require ile sisteme dahil ederken doğrudan yol yazmak yerine mutlaka DLEPlugins::Check() fonksiyonunu kullanmalısınız.

Neden Kullanmalıyız?

• Eklenti Pasifse Engeller: Eğer eklenti yönetim panelinden kapatılmışsa, bu fonksiyon dosyanın yüklenmesini engeller.
• Sanal Müdahaleleri Okur: XML ile bir dosyada değişiklik yaptıysanız, o değişikliğin geçerli olması için dosyanın bu fonksiyon üzerinden çağrılması şarttır.
• Çakışmaları Önler: Birden fazla eklenti aynı dosyaya müdahale ediyorsa, DLE bu fonksiyon sayesinde tüm değişiklikleri birleştirip sunar.

// YANLIŞ KULLANIM (Çekirdek dosyayı direkt çağırmak)
include (ENGINE_DIR . '/modules/myscript.php');

// DOĞRU VE NATIVE KULLANIM
include (DLEPlugins::Check(ENGINE_DIR . '/modules/myscript.php'));

// Admin Paneli Modül Dahil Etme Örneği
include_once (DLEPlugins::Check(ENGINE_DIR . '/inc/my_plugin_module.php'));