🔀 Hero Widget Yaklaşım Karşılaştırması

📅 Tarih: 2025-12-04 🎯 Tenant: ixtif.com 🔍 Analiz: FILE vs CUSTOM Widget Tipleri

📋 Genel Bakış

Soru: Hero widget için HTML yapısını sabit Blade view dosyasında mı tutalım, yoksa database'den mi çekelim?

Analiz Kapsamı: WidgetManagement sistemi 3 farklı yaklaşım sunuyor. Her birinin avantaj, dezavantaj ve kullanım senaryolarını inceledik.

Hedef: Hero widget için en uygun yaklaşımı belirlemek ve implementation stratejisi oluşturmak.

🎯 Üç Farklı Yaklaşım

1. FILE Tipi Widget ÖNERİLEN

Blade View Dosyası

HTML yapısı sabit Blade dosyasında saklanır. İçerik Handlebars değişkenleri ile dinamik.

Widget.type = 'file' Widget.file_path = 'hero.ixtif-hero.view' Dosya: /resources/views/blocks/ hero/ixtif-hero/view.blade.php

Nasıl Çalışır?

  • Widget tablosunda sadece file_path tanımlı
  • HTML yapısı Blade dosyasında
  • TenantWidget.settings ile içerik dinamik
  • Git ile versiyon kontrolü var

2. CUSTOM Tipi (Merkezi) ORTA SEVİYE

Widget Tablosunda HTML

HTML yapısı Widget tablosunun content_html alanında saklanır. Tüm tenant'lar için aynı yapı.

Widget.type = 'custom' Widget.content_html = '<section>...</section>' Widget.content_css = '.hero { ... }' Widget.content_js = 'function init() { ... }'

Nasıl Çalışır?

  • HTML tamamen database'de
  • Tüm tenant'lar aynı HTML yapısı kullanır
  • TenantWidget.settings ile içerik farklılaşır
  • Admin panel üzerinden düzenlenebilir

3. TenantWidget CUSTOM İLERİ SEVİYE

Her Tenant Kendi HTML'i

Her tenant tamamen farklı HTML yapısı kullanabilir. Maksimum esneklik.

TenantWidget.is_custom = true TenantWidget.custom_html = '<div>...</div>' TenantWidget.custom_css = '.custom { ... }' TenantWidget.custom_js = 'custom code...'

Nasıl Çalışır?

  • Her tenant kendi HTML yapısını oluşturur
  • Widget sadece template olarak kullanılır
  • Tenant tamamen özelleştirebilir
  • En esnek, en karmaşık yöntem

📊 Detaylı Karşılaştırma Tablosu

Özellik FILE Tipi CUSTOM (Merkezi) TenantWidget CUSTOM
HTML Konumu Blade dosyası Widget.content_html TenantWidget.custom_html
Versiyon Kontrolü ✅ Git ile tam kontrol ❌ Database'de, git yok ❌ Database'de, git yok
Kod Editörü ✅ VSCode, PHPStorm ⚠️ Admin panel textarea ⚠️ Admin panel textarea
Syntax Highlight ✅ Tam destek ❌ Basit textarea ❌ Basit textarea
Blade Directives ✅ @if, @foreach, @include ❌ Sadece Handlebars ❌ Sadece Handlebars
PHP Kodu ✅ Kullanılabilir ❌ Güvenlik riski ❌ Güvenlik riski
Handlebars Desteği ✅ Destekler ✅ Destekler ✅ Destekler
Admin Düzenleme ❌ Dosya erişimi gerekir ✅ Admin panelden ✅ Admin panelden
Tenant Özelleştirme ⚠️ Settings ile sınırlı ⚠️ Settings ile sınırlı ✅ Tam özelleştirme
HTML Yapısı Değişikliği ❌ Dosyayı düzenle ✅ Admin panelden ✅ Tenant'a özel
Performance ⚡ En hızlı (OPcache) ⚠️ DB query ⚠️ DB query
Cache ✅ Blade cache + OPcache ⚠️ Widget cache ⚠️ Widget cache
Deployment ✅ Git pull yeterli ⚠️ DB sync gerekir ⚠️ DB sync gerekir
Rollback ✅ Git checkout ⚠️ DB backup ⚠️ DB backup
Güvenlik ✅ Yüksek (server-side) ⚠️ XSS riski var ⚠️ XSS riski yüksek
Karmaşıklık 🟢 Basit 🟡 Orta 🔴 Karmaşık
Kullanım Senaryosu Standart widget'lar Basit özelleştirmeler Tenant-specific tasarımlar

⚖️ Avantaj & Dezavantajlar

1. FILE Tipi Widget

✅ Avantajlar
  • Git Versiyon Kontrolü: Tüm değişiklikler izlenebilir
  • Profesyonel Editör: VSCode, Blade syntax highlight
  • Blade Directives: @if, @foreach, @include kullanılabilir
  • PHP Kodu: Gerekirse route(), asset() gibi helper'lar
  • OPcache: PHP bytecode cache, maksimum hız
  • Güvenlik: Server-side render, XSS riski yok
  • Deployment: Git pull ile otomatik deploy
  • Rollback: Git checkout ile anında geri al
  • Team Collaboration: Kod review, pull request
❌ Dezavantajlar
  • Dosya Erişimi: Admin panelden düzenlenemez
  • SSH Gerekli: Sunucuya erişim şart
  • Tenant Özelleştirme Sınırlı: HTML yapısı sabittir
  • Non-Technical User: Teknik bilgi gerekir

2. CUSTOM Tipi (Merkezi)

✅ Avantajlar
  • Admin Panel: Textarea ile düzenlenebilir
  • SSH Gereksiz: Web arayüzünden yönetim
  • Hızlı Düzenleme: Anında değişiklik
  • Merkezi Yönetim: Tek yerden tüm tenant'ları yönet
❌ Dezavantajlar
  • Git Yok: Versiyon kontrolü manuel
  • Textarea: Syntax highlight yok
  • XSS Riski: HTML sanitize gerekir
  • DB Query: Her render'da database erişimi
  • Blade Directives Yok: Sadece Handlebars
  • Deployment: DB sync problemi

3. TenantWidget CUSTOM

✅ Avantajlar
  • Maksimum Esneklik: Her tenant farklı HTML
  • Tenant Özgürlüğü: Tamamen özelleştirilebilir
  • Admin Panel: Web arayüzünden yönetim
  • Multi-Design: Aynı widget, farklı tasarımlar
❌ Dezavantajlar
  • Yüksek Karmaşıklık: Her tenant ayrı yönetim
  • XSS Riski Yüksek: Güvenlik açığı riski
  • Standardizasyon Yok: Her tenant farklı kod
  • Maintenance Zor: Toplu güncellemeler imkansız
  • Debug Problemi: Tenant bazlı hata ayıklama
  • Git Yok: Versiyon kontrolü yok

🎯 Kullanım Senaryoları

📌 FILE Tipi Ne Zaman Kullanılır?

Hero Widget Gibi Standart Komponentler İçin İdeal!

  • Widget yapısı sabit, içerik değişken (Hero, About, Services)
  • Profesyonel geliştirme ekibi var
  • Git workflow kullanılıyor
  • Güvenlik kritik
  • Performance önemli
  • Tenant'lar arasında tutarlı tasarım istiyorsunuz

📌 CUSTOM (Merkezi) Ne Zaman Kullanılır?

Basit, Sık Değişen Widget'lar İçin Uygun

  • Banner, duyuru gibi basit HTML blokları
  • Sık değişiklik yapılacak içerikler
  • Non-technical user düzenleyecek
  • Tüm tenant'lar aynı yapıyı kullanacak

⚠️ TenantWidget CUSTOM Ne Zaman Kullanılır?

Dikkatli Kullanılmalı!

  • Her tenant tamamen farklı tasarım istiyor
  • White-label çözüm sunuyorsunuz
  • Tenant'lar kendi developer'larını kullanıyor
  • Güvenlik riskleri kabul edilebilir
  • Hero widget gibi kritik komponentler için ÖNERİLMEZ!

🔧 Teknik Detaylar

FILE Tipi Render Süreci

// WidgetService.php Line 435-447 if ($widget->type === 'file' && !empty($widget->file_path)) { $viewPath = 'widgetmanagement::blocks.' . $widget->file_path; $settings = $tenantWidget->settings ?? []; return view($viewPath, ['settings' => $settings])->render(); } // Blade View: // resources/views/blocks/hero/ixtif-hero/view.blade.php <section class="hero"> <h1>{{ $settings['title_line1'] ?? '' }}</h1> <h1>{{ $settings['title_line2'] ?? '' }}</h1> </section>

CUSTOM Tipi Render Süreci

// WidgetService.php Line 378-427 if ($tenantWidget->is_custom) { $html = $tenantWidget->custom_html; $css = $tenantWidget->custom_css; $js = $tenantWidget->custom_js; // Handlebars değişkenlerini işle $html = $this->renderService->processVariables($html, $settings); } // Database: TenantWidget.custom_html = '<section>{{widget.title}}</section>' TenantWidget.settings = {"title": "Hero Title"}

Handlebars vs Blade Karşılaştırması

Özellik Handlebars (CUSTOM) Blade (FILE)
Değişken {{widget.title}} {{ $settings['title'] }}
Koşul {{#if widget.show}}...{{/if}} @if($settings['show'])...@endif
Loop {{#each items}}...{{/each}} @foreach($items as $item)...@endforeach
PHP Kodu ❌ Desteklenmez ✅ {{ route('shop') }}
Include ❌ Desteklenmez ✅ @include('partial')
Component ❌ Desteklenmez ✅ <x-button />

🎯 ÖNERİ: Hero Widget İçin FILE Tipi Kullan

Neden FILE Tipi?

  • Hero = Standart Komponent: Tüm tenant'larda benzer yapı olacak (başlık, açıklama, CTA, feature kartları)
  • Güvenlik: XSS riski yok, server-side render
  • Performance: OPcache ile maksimum hız
  • Git Workflow: Versiyon kontrolü, kod review, rollback
  • Blade Directives: @foreach ile feature kartları, @if ile koşullar
  • PHP Helpers: route(), cdn(), setting() kullanılabilir
  • Maintenance: Toplu güncellemeler kolay
  • Team Collaboration: Pull request ile ekip çalışması

Implementation Stratejisi:

  • Widget Tipi: FILE
  • Blade Dosyası: blocks/hero/ixtif-hero/view.blade.php
  • Settings: TenantWidget.settings JSON (title, description, CTA, image)
  • Items: 4 WidgetItem (feature kartları)
  • Handlebars: Settings değişkenleri için
  • Blade Loops: Feature kartları için @foreach

⚠️ CUSTOM Tipi Ne Zaman Kullanılmalı?

Hero gibi kritik komponentler için ÖNERİLMEZ. Sadece basit banner, duyuru gibi sık değişen, güvenlik riski düşük içerikler için CUSTOM kullanılabilir.

🚀 Sonraki Adımlar

Karar: Hero widget için FILE tipi widget kullanacağız.

Önceki Plan Geçerli: Hero Widget Implementation Plan dokümanındaki adımları takip edeceğiz.

Değişiklik: Plan zaten FILE tipi için hazırlanmıştı, herhangi bir değişiklik gerekmiyor!

İlk Adımlar

  1. Git checkpoint oluştur (homepage.blade.php'nin mevcut hali)
  2. Blade view dosyası oluştur: blocks/hero/ixtif-hero/view.blade.php
  3. Widget kaydı oluştur (Central DB, type='file')
  4. TenantWidget + 4 WidgetItem oluştur (İxtif tenant'ı için)
  5. homepage.blade.php'den 81 satırı sil, @widget('hero') ekle
  6. Test ve deploy