Adım adım resimli widget plugini yapmak

[Oscar 1.660]

Plugin ile template hook, widget veya fonksiyon tabanlı mini uygulamalar yapabiliriz.   

 

Template Tabanlı plugin nasıl yapılır burada anlatmıştık.

https://www.ipbaccess.com/topic/10799-adım-adım-resimli-template-hook-yapmak/

 

Developer modu etkinleştirerek iş başlamalıyız.

https://www.ipbaccess.com/topic/9559-ipb4-geliştirme-durumu-developer-mod/

 

Kullandığınız sürüme uygun Developer Tools paketini kurulumun üzerine yerel veya ftp upload etmemiz gerekiyor.

4.1.19.4 sürümü için buradan indirebilirsiniz.

https://invisionpower.com/files/file/7185-developer-tools/

 

Şimdi burada widget tabanlı plugin nasıl yapılır onu görelim. Yapılar çok detaylara inmeden basit olarak görmek ve temel bilgiye sahip olmak için basit tutulmuştur. Adım adım başlayalım. Bazı bilinmesi gereken detaylara kısa açıklamalar ekleyeceğim.  

 

Plugin çatı kısmını oluşturalım.

 

 

Plugin detaylarını giriyoruz.

 

 

Plugin çatı kısmını oluştu. Plugin ayarları bölümünden Developer Center seçeneğini tıklayıp plugini geliştirme modunda açıyoruz.

 

 

Developer Center'ı tanıyalım.

 

 

Information = Sürüm bilgileri yer alır. Bu bilgilerin plugini oluşturma aşamasında girmiştik. 

Hooks: Bu bölümü template hook veya fonksiyonel hook eklemek için kullanıyoruz.  Widget için şimdilik her ikisine de ihtiyacımız yok ama ekleme alanını görelim.

 

 

Settings: Bu bölümde widget için bir ayar tanımlanacaksa o ayarı önce bu bölümde tanımlamamız gerekiyor.  Plugin içeriğini girebileceğimiz bir metin alanımız olduğunu varsayarak alanı şimdiden oluşturuyorum.

 

 

Tasks: görevler eklentinizle ilgili zamansal bir görev oluşturacaksanız bu bölümü kullanıyoruz mesela sitemap böyle bir görevle belirtilen zamanlarda çalışır. Şimdilik ihtiyacımız yok. 

Versions: eklenti sürüm numaramızı burada tutuyoruz. Biri kısa biri de developer numarası olmak üzere iki raklamdan oluşur ve eklenti geliştikçe bu numarayı yükseltirsiniz ki güncelleme yapılabilsin.

 

 

Widgets: Asıl bizi ilgilendiren bölüme geldik.  Bizim yapmak istediğimiz plugin widget olarak çalışacağı için bu bölüm üzerinde biraz fazlaca durmak gerekiyor. Resim üzerlerine açıklamalarını yazdım ve varsayılan değerlerde bırakarak kaydettim.

 

 

Widgeti kaydettik.

 

 

Şimdi sıra geldi denemeye ama onsan önce ayar dosyamızı ve widget dosyamızı düzenlememiz gerekiyor. unutmadıysanız ayar dosyamıza bir metin girişi ekleyeceğiz ve bu girişe yazdığımız bilgileri widget ile görüntüleyeceğiz. Widget klasörümüzden settings.rename.php dosyasının adını settings.php olarak değiştirip açıyoruz. İçindeki örnek alanı plugin settings içine girdiğimiz isimle düzeltiyoruz ve şimdi resimde görüldüğü şekli alıyor.

 

 

Şimdi plugin ayar bölümümüz oluş muş oluyor kontrol edebiliriz. İstediğimiz kadar ayar ekleyebiliriz ama şimdilik sadece bir metin alanı ekledik. Bu alana ne gireceksek giriyor ve kaydediyoruz. Şimdilik ayar bölümüyle işimiz bitti. 

 

 

Hazır yeri gelmişken metin alanındaki değişkeni nasıl cümle ile değiştirebileceğimizi yani çeviri yapacağımızı da görelim. Bütün çeviri işlemleri bu şekilde yapılacak. Plugin içindeki dev klasöründe lang.php dosyasının içine değişkeni ekleyip karşısında resimde görüldüğü gibi karşılığını yazarak kaydediyoruz.

 

 

Kontrol edelim.

 

 

Şimdi template kullanmadan setting bölümünde tanımladığımız veriyi sidebarda göstermek için plugindemo/widgets klasöründeki plugindemo.php widget dosyasını açıp düzenleme yapıyoruz. Şimdilik sadece render() bölümünü düzenleyerek ayar bölümündeki veriyi çekip sidebara basıyoruz.

 

 

 

Şimdi ana sayfaya dönüp widgeti sidebara yerleştirelim.

 

 

Şimdi nasıl göründüğüne bakalım.

 

 

Buraya kadar detaylara yeterince yanıt bularak dünyaya merhaba dedik. Akşama vakit bulursam widget uygulamamıza şablon eklemeyi ve widgetin diğerleri gibi görünmesini nasıl sağlayacağımıza bakacağız.

.

 

[Oscar 1.660]

Widget tabanlı eklentimiz ile metin tabanlı çıkış alarak sibedar'da gösterd. Şimdi eklentimize bir şablon ekleyerek görünüm üzerinde iyileştirmeler yapabilir görüntüyü formatlayabiliriz. Widget eklentimizin widget dosyası plugindemo.php içerisinde init alanında şablonumuzun konumunu gösteriyoruz.

 

	public function init()
	{
		$this->template( array( \IPS\Theme::i()->getTemplate( 'plugins', 'core', 'global' ), $this->key ) );
		parent::init();
	}

Buna göre şablonumuz pluginsdemo/dev/html/ içinde plugindemo.phtml şeklinde olacaktır. Bu isim $this->key üzerinden widget içinden verdiğimiz isim ile aynıdır. Başka isim vererek ismi tanımlayabilirsiniz ama uygun olan yöntem bu.  Buna göre konum bu şekilde görünecek. 

 

 

Widget şablonunu çıkışa yönlendirmek için widget plugindemo.php içinden render bölümünü bu şekilde değiştirelim.  Bu ayar bölümünden alınan metin verisini şablona gönderecek şablonda render edilen çıktı sidebara gönderilecek.

 

	public function render()
	{
        $message = "";
        $message = \IPS\Settings::i()->plugin_demo_text;

        return $this->output($message);

	}

 

Şablon plugindemo.phtml i.eriğini bu şekilde yapalım ve sidebar şablon modelini ekleyelim. Bu görünümü diğer sidebar blokları ile aynı olmasını sağlayacaktır.

 

<ips:template parameters="$data" />

<h3 class="ipsType_reset ipsWidget_title">{lang="plugindemo_title"}</h3>

<div class="ipsWidget_inner">
    <div class="ipsPad_half">
      <ul class="ipsDataList">
        <li class="ipsDataItem">
          <div class="ipsDataItem_main ipsPos_middle">
            {$data}
          </div>
        </li>
      </ul>
    </div>
</div>

Şimdi son olarak bakalım sidebar blok nasıl görünüyor.

 

 

Bir sonraki makalemizde widget forum tarafından nasıl seçenek ekleneceğine bakacağız. Örneğin blok yerleştirirken gösterilecek öğe sayısını belirleme gibi değişkenlerin kullanım zamandında admin panele girmeden forum tarafından yapılabilecek.

 

Gözünüz korkmasın çok fazla detay var ama kullandıkça bazı şeyler rutin haline gelir ve yemek yer kitap okur gibi eklentilerinizi yapabilirsiniz ama unutmayın burada gösterilenler belki %5 bile değil.

 

 

[Opposite 12]

Hocam gerçekten emeğiniz çok. Bu şekilde basit yoldan eklenti geliştirmemize yardımcı oluyorsunuz. Daha zengin kaynaklara sayenizde erişebiliyoruz. Teşekkür ederim.

[loving 15]

Harika paylaşım olmuş @kaankarabey hocam işinizi görecek paylaşımlar gelmeye başlamış

[Nomercy 21]

Hocam çok teşekkür ederim herseyi anlatıyorsunuz.

[Nomercy 21]

@Oscar hocam render daki kodda hata mı var?

[Oscar 1.660]

kaankarabey, 9 dakika önce yazdı:

@Oscar hocam render daki kodda hata mı var?

 

Bunu diyorsan hata yok böyle olması lazım.

 

	public function render()
	{
        $message = "";
        $message = \IPS\Settings::i()->plugin_demo_text;
        return $this->output($message);
	}

 

[Nomercy 21]

Oscar, 17 dakika önce yazdı:

 

Bunu diyorsan hata yok böyle olması lazım.

 

	public function render()
	{
        $message = "";
        $message = \IPS\Settings::i()->plugin_demo_text;
        return $this->output($message);
	}

 

 

Hocam söz dizimi hatası veriyor 

syntax error, unexpected '('

 

 

Kullandığım kod da bu

public function render()
	{
		return \IPS\Settings::()->plugin_demo_text;
		// Use $this->output( $foo, $bar ); to return a string generated by the template set in init() or manually added via $widget->template( $callback );
		// Note you MUST route output through $this->output() rather than calling \IPS\Theme::i()->getTemplate() because of the way widgets are cached
	}

 

[Oscar 1.660]

Adım adım anlatım olduğu için bir yerde ben hata yapsam örnekler çalışmazdı öyle değil mi? Oradaki kodları öyle ezbere yazmış değilim.  Makine üzerinde yaparak her adımı buraya ekledim. 

[Nomercy 21]

Haklısınız tekrardan en baştan deneyim 

[Oscar 1.660]

Çalışan bu hali bende mevcut ama prensip gereği onu buraya eklemedim çünkü adımları yapa yapa öğrenin.

 

[Nomercy 21]

Hocam Sorunu buldum;

 

siz render da i eklemişsiniz..

 

public function render()
	{
		return \IPS\Settings::i()->plugin_demo_text;
	}

burda i ekledim sorun çözüldü

[Nomercy 21]

Hocam şu an çalışıyor herşeyiyle bunun içeriğine html kod eklemek için nasıl bir yol izlemem gerek?

 

[Oscar 1.660]

kaankarabey, 57 dakika önce yazdı:

Hocam Sorunu buldum;

 

siz render da i eklemişsiniz..

 

public function render()
	{
		return \IPS\Settings::i()->plugin_demo_text;
	}

burda i ekledim sorun çözüldü

 

Ama zaten bunu eklemeniz gerekiyordu şablonsuz kodu üstelik yukarıda verdim de.

 

	public function render()
	{
        $message = "";
        $message = \IPS\Settings::i()->plugin_demo_text;
        return $this->output($message);
	}