Admin Panel UI/UX Masterclass

1. Sayfa Başlığı ve İskelet

Her admin sayfasının başında ve sonunda DLE'nin standart fonksiyonlarını çağırmalısınız. Bu fonksiyonlar menüyü, login kontrolünü ve sidebar'ı otomatik getirir.

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

// Başlık ve Alt Başlık (İkonlarla)
echoheader( "<i class=\"fa fa-plug position-left\"></i> Eklentim", "Eklenti açıklaması buraya gelir" );

echo "<div class=\"panel panel-default\">
    <div class=\"panel-heading\">Bölüm Başlığı</div>
    <div class=\"panel-body\">
        İçerik buraya...
    </div>
</div>";

echofooter();
?>

2. Modern Navbar ve Filtreleme (Collapse Yapısı)

Sistem ayarlarında kullanılan, mobilde daralan (collapse) ve masaüstünde şık bir yatay menü sunan yapıdır. UX açısından eklentilerde kategorizasyon için en iyi yöntemdir.

<div class="navbar navbar-default navbar-component navbar-xs">
    <ul class="nav navbar-nav visible-xs-block">
        <li class="full-width text-center">
            <a data-toggle="collapse" data-target="#navbar-filter"><i class="fa fa-bars"></i></a>
        </li>
    </ul>
    <div class="navbar-collapse collapse" id="navbar-filter">
        <ul class="nav navbar-nav">
            <li class="active"><a href="#"><i class="fa fa-cog"></i> Genel Ayarlar</a></li>
            <li><a href="#"><i class="fa fa-shield"></i> Güvenlik</a></li>
            <li><a href="#"><i class="fa fa-envelope"></i> E-Posta</a></li>
        </ul>
    </div>
</div>

3. Medya Listeleri (İkonlu Linkler)

Ana sayfa ve Seçenekler sayfasındaki büyük, açıklayıcı ikonlu butonlar için kullanılır. Profesyonel bir giriş ekranı için idealdir.

<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 ince ayarlarını buradan yapın.</span>
            </div>
        </a>
    </div>
</div>

4. İnteraktif JS Bileşenleri

DLE'nin yerleşik JavaScript kütüphanesini kullanarak native uyarılar ve yükleme ekranları oluşturun.

DLEconfirm( 'Silmek istiyor musunuz?', 'Onay', function () {
    // Tamam'a basıldığında yapılacaklar
} );

DLEPush.info('İşlem başlatıldı...');
DLEPush.success('Başarıyla tamamlandı!');
DLEPush.error('Hata oluştu!');

5. Form Elemanları ve Tablo Yapısı

Admin panelindeki o meşhur "Switch" (Aç-Kapa) butonlarını ve çizgili tabloları oluşturmak için:

A. Switch (Aç-Kapa) Checkbox

<input class="switch" type="checkbox" name="active" value="1" checked>

B. Native Tablo