🎨 WidgetManagement Modülü Analizi

📅 Tarih: 2025-12-04 🎯 Modül: WidgetManagement 🔍 Analiz Tipi: Detaylı Sistem İncelemesi

📈 Özet

Widget Tipi

Database Model

Render Service

20+

Hazır Widget

✅

Handlebars

🏗️ Sistem Mimarisi

Widget Hierarchy

Widget (Central DB)

Merkezi widget şablonu

Tüm tenant'lar için ortak

→

TenantWidget (Tenant DB)

Tenant'a özel instance

Settings + Custom HTML/CSS/JS

→

WidgetItem (Tenant DB)

Dinamik öğeler

Slider, Liste vb.

Database Model

Model	Database	Açıklama
Widget	Central DB	Merkezi widget tanımları (type, schema, template)
WidgetCategory	Central DB	Widget kategorileri (Hero, Layout, Content vb.)
TenantWidget	Tenant DB	Tenant'a özel widget instance'ları
WidgetItem	Tenant DB	Dinamik widget öğeleri (slider items, liste öğeleri)

🎭 Widget Tipleri

FILE File Widget

Açıklama: Blade view dosyası bazlı widget. Hazır şablonlar.

Kullanım:

@file(12) // Blade
[[file:12]] // Shortcode
echo widget_file_by_id(12); // PHP

Örnekler:

Hero Sections (hero/hero-1, hero/simple)
Layout Grids (layout/two-columns, layout/three-columns)
Cards (cards/basic, cards/grid)
Content Blocks (content/hero, content/text)
Forms (form/contact-form, form/contact-assistant)

Konum: resources/views/blocks/

MODULE Module Widget

Açıklama: Diğer modüllerden veri çeken dinamik widget. Backend data source ile çalışır.

Kullanım:

@module(7) // Blade
[[module:7]] // Shortcode
echo module_widget_by_id(7); // PHP

Mevcut Modül Widget'ları:

announcement - Duyuru listesi
page - Sayfa listesi (home, recent)
portfolio - Portfolio listesi/detay

Data Source:

// Widget modeli
'data_source' => 'portfolio/list'

// PHP Class
class PortfolioModules {
    public function getData($settings) {
        return Portfolio::active()->get();
    }
}

CUSTOM Custom Widget

Açıklama: Kullanıcı tarafından admin panelden oluşturulan özel widget. Tam kontrol.

Özellikler:

Custom HTML/CSS/JS desteği
Handlebars template engine
Form builder ile dinamik form şeması
Widget item sistemi (slider, list vb.)

TenantWidget Modeli:

'is_custom' => true,
'custom_html' => '<div>...</div>',
'custom_css' => '.custom { ... }',
'custom_js' => 'console.log(...)',
'settings' => ['title' => 'My Widget']

⚙️ Template Engine - Handlebars

🔹 Handlebars Desteği

Özellik: Browser-side ve server-side template rendering

Değişkenler:

{{title}} // Basit değişken
{{widget.background}} // Widget settings
{{category.name}} // İlişki verisi

Koşullar:

{{#if featured}}
<span class="badge">Featured</span>
{{else}}
<span>Normal</span>
{{/if}}

Döngüler:

{{#each items}}
    <div class="item">
        <h3>{{title}}</h3>
        <p>{{description}}</p>
    </div>
{{/each}}

Meta Değişkenler:

{{@first}} // İlk öğe mi?
{{@last}} // Son öğe mi?
{{@index}} // Index numarası

🔹 WidgetRenderService

Görev: Template'leri render etme, değişkenleri işleme

Temel Metodlar:

processVariables() - Değişken değiştirme
processItems() - {{#each items}} döngüsü
processModuleData() - Modül verisi render
processConditionalBlocks() - {{#if}} koşulları
processNestedLoops() - İç içe döngüler

Özellikler:

✅ Server-side Handlebars rendering
✅ İlişki verisi otomatik eşleme (singular/plural)
✅ Parent context erişimi (../variable)
✅ Meta değişkenler (@first, @last, @index)
✅ Deep nesting support (max 10 level)

📝 Form Builder Sistemi

🔹 Dinamik Form Schema

Açıklama: Widget ayarları için JSON bazlı form oluşturma

Widget Modeli:

'settings_schema' => [
    [
        'name' => 'background_color',
        'label' => 'Arka Plan Rengi',
        'type' => 'color',
        'required' => true
    ],
    [
        'name' => 'title',
        'label' => 'Başlık',
        'type' => 'text',
        'required' => true
    ]
]

Desteklenen Alan Tipleri:

text, textarea, email, password
number, range, date, time
checkbox, radio, select, switch
color, url, tel
image, file, image_multiple
heading, paragraph, divider, spacer
card, row, tab_group

🔹 Item Schema (Dinamik Öğeler)

Kullanım: Slider, Liste, Galeri gibi çoklu öğeli widget'lar

'has_items' => true,
'item_schema' => [
    ['name' => 'title', 'type' => 'text', 'required' => true],
    ['name' => 'image', 'type' => 'image'],
    ['name' => 'description', 'type' => 'textarea'],
    ['name' => 'is_active', 'type' => 'switch']
]

WidgetItem Modeli:

'tenant_widget_id' => 15,
'order' => 1,
'content' => [
    'title' => 'Slide 1',
    'image' => '/storage/slide1.jpg',
    'description' => 'Lorem ipsum...',
    'is_active' => true
]

🚀 Kullanım Yöntemleri

🔹 Blade Directives

@widget(15) // ID ile widget
@widgetblock('blog-sidebar') // Slug ile widget
@widgets('sidebar') // Pozisyon bazlı
@module(7) // Modül widget
@file(12) // File widget
@parsewidgets($content) // Shortcode işleme

🔹 Shortcodes

[[widget:15]] // ID ile
[[widget:blog-sidebar]] // Slug ile
[[module:7]] // Modül widget
[[file:12]] // File widget

İçerikte Kullanım:

$page->body = "İçerik [[widget:5]] buraya.";
echo parse_widget_shortcodes($page->body);

🔹 PHP Helper Fonksiyonları

widget_by_id(15);
widget_by_slug('blog-sidebar');
widgets_by_position('header');
module_widget_by_id(7);
widget_file_by_id(12);
parse_widget_shortcodes($content);

🔗 Page Modülü İçin Widget Entegrasyonu

✅ UYGUN - Page Homepage için Widget Kullanımı

Hedef: Page modülü homepage'inde hardcoded içerikleri widget sistemine taşı

Strateji 1: Shortcode Bazlı

// Page modelinde body field'i kullan
$page->body = <<<HTML
[[widget:homepage-hero]]
[[widget:featured-products]]
[[widget:latest-blogs]]
[[widget:contact-section]]
HTML;

// Blade view'da
@parsewidgets($page->body)

Strateji 2: Widget Position Bazlı

// PageController.php
public function homepage() {
    $widgets = [
        'header' => widgets_by_position('homepage-header'),
        'content' => widgets_by_position('homepage-content'),
        'footer' => widgets_by_position('homepage-footer')
    ];
    return view('page.homepage', compact('widgets'));
}

// homepage.blade.php
{!! $widgets['header'] !!}
{!! $widgets['content'] !!}
{!! $widgets['footer'] !!}

Strateji 3: Module Widget Kullanımı

// Yeni module widget oluştur
- modules/shop/recent (Son ürünler)
- modules/shop/featured (Öne çıkan ürünler)
- modules/blog/latest (Son bloglar)

// Page body'de kullan
[[module:shop-recent]]
[[module:blog-latest]]

🎯 Önerilen Widget'lar

İxtif (Tenant 2) için:

✅ Hero Widget (Hardcoded "TÜRKİYE'NİN İSTİF PAZARI" yerine)
✅ Featured Products Widget (Shop modülü entegrasyonu)
✅ Service Categories Widget (Satın Alma, Kiralama vb.)
✅ Latest Blogs Widget (Blog modülü entegrasyonu)
✅ Contact Section Widget (Settings entegrasyonu)

Muzibu (Tenant 1001) için:

✅ Music Hero Widget
✅ Featured Songs Widget
✅ Popular Albums Widget
✅ Genre Carousel Widget
✅ New Releases Widget

💎 WidgetManagement Avantajları

✅ Tenant-Aware Yapı

Merkezi widget tanımları (tüm tenant'lar için)
Tenant'a özel widget instance'ları
Her tenant kendi widget'larını özelleştirebilir

✅ Esneklik

3 farklı widget tipi (file, module, custom)
Handlebars template engine
Form builder ile dinamik form
Shortcode desteği

✅ Modüler Entegrasyon

Module widget ile diğer modüllerden veri çekme
Shop, Blog, Portfolio entegrasyonu mevcut
Yeni modül entegrasyonu kolay

✅ Performans

Cache sistemi
CDN entegrasyonu (CSS/JS/Image)
Lazy loading desteği

✅ Kullanım Kolaylığı

Blade directive'leri (@widget, @module)
PHP helper fonksiyonları
Shortcode sistemi
Admin panel yönetimi

✅ Sonuç

WidgetManagement modülü: Production-ready, tenant-aware, esnek bir widget sistemi.

Page Modülü İçin Uygunluk

✅ ÇOK UYGUN! Page modülünde hardcoded içerikleri widget sistemine taşımak için mükemmel bir altyapı.

Neden Uygun?

✅ Tenant-aware yapı (her tenant kendi homepage widget'larını belirler)
✅ Modül entegrasyonu (Shop, Blog widget'ları hazır)
✅ Custom HTML/CSS/JS desteği (tema-specific tasarımlar)
✅ Shortcode sistemi (Page body içinde kullanım)
✅ Form builder (kolay ayar yönetimi)
✅ Position bazlı widget (header, content, footer)

Yapılacaklar (Öncelik Sırası)

Kritik Shop Module Widget'ları ekle (featured, recent)
Kritik Blog Module Widget'ları ekle (latest, featured)
Önemli İxtif Hero Widget oluştur (Settings entegrasyonu)
Önemli Page homepage'de widget sistemi kullan
Normal Muzibu Music Widget'ları ekle
Normal Contact Section Widget (Settings entegrasyonu)