Arkadaşlar merhaba,
Kendi sitemde bir çok eklenti yaptım. Sizlerin de eklenti yapabilmesi için ara ara eklenti yapma dersleri paylaşacağım.
İlk olarak yapacağımız eklenti sadece kendi sunucumuzda çalışacak. İlerleyen zamanlarda Github'a eklemeyi de paylaşacağım. Bu eklentiyi localhost'ta yani kendi bilgisayarımda yapacağım.

https://flarum.org/docs/extend/ - Öncelikle burayı mutlaka okuyun arkadaşlar. Temel bilgiler burada yer alıyor.

Eklenti yapımında kullanacağımız programlar:
Node.js https://nodejs.org/en/download/
https://github.com/ReFlar/extension-generator - Reflar'ın Eklenti geliştiricileri için tasarladığı bir yazılım.

Bu yazılım sayesinde sizin manuel olarak yapmanız gereken çoğu şeyi otomatik kendisi yapıyor.

Node.js' i kurduğunuzu varsayıyorum.
Başlat -> Node.js programını açıyorsunuz.
Daha sonrasında
npm install -g @reflar/create-flarum-extension kodunu çalıştırıyorsunuz.
Yükleme bittikten sonra,
npx @reflar/create-flarum-extension my-folder kodunu yazıyorsunuz.

flarumalshain/yenieklenti kısımlarını siz kendinize göre düzenleyin.

Sonrasında eklentimiz hazır hale geliyor. node.js'i nerede başlattıysanız ve dizini başta myfolder olarak belirttiyseniz
o bölüme gidip eklentinizi kontrol edebilirsiniz.

NodeJS ile C:/xampp/htdocs dizinine gelip Flarum'un ana dizininin içine packages klasörü oluşturun.
Daha sonrasında NodeJS'te
composer config repositories.0 path "packages/*"
komutunu çalıştırın ve ardından eklentiyi oluşturduğumuz myfolder klasörünü packages klasörünün içine atın.

NodeJS'te C:/xampp/htdocs dizininde

composer require flarumalshain/yenieklenti *@dev

komutunu çalıştırdıktan sonra Flarum sitemizde eklentiler bölümünde bizim eklentimiz gözükecektir. Bu eklentiyi aktif ettiğimizde ve flarum sitemizde anasayfayı yenilediğimizde Chrome'da F12 tuşuna bastığımızda Console bölümünde birkaç text yazacaktır. Bu yazıları gördüğünüzde eklentimizin kurulumu başarılı olmuş demektir.

Derslere bundan sonra daha çok görsel materyal kullanacağım. Eğer anlamadığınız bir yer olduysa lütfen sorun. İsteyen kişi sayısına bağlı olarak daha net anlaşılabilmesi için video'da çekebilirim.

    Alshain Çok yararlı bir makale, sıfırdan eklenti geliştirecekler için bayağı işe yarayacaktır. Emeğinize sağlık hocam

      9 gün sonra

      Bir de ben yardımcı olayım, çorba da benim de az çok tuzum olsun 🙂 Flarum için eklenti yazmanın bir çok çeşidi var. İlk öncelikle eklenti yapmaya karar vermiş ve kafasında bir eklenti tasarısı oluşturacak arkadaşlar şunlara dikkat etmeli. Sıfırdan hiç bilmediğinizi varsayarak anlatıyorum.

      1. Eklenti sadece arka plan olan (back-end, server-side) kısmında mı çalışacak, yoksa ön yüz (front-end) kısmı ile bir alakası olacak mı? İlk önce buna karar vermelisiniz.

      Yahu nedir bu back-end ve front-end dediğinizi duyar gibiyim.

      Back-end : Sadece server tarafından görülebilen normal kullanıcıların göremediği web sitelerine dinamizm katan arka planda çalışan ve farklı programlama dillerinden oluşan terimin ismidir. (Bknz : PHP,ASP) Bu programlama dilleri ile yazılan kod satırları web sitenize giren insanlar tarafından görüntülenemezler. Bir nevi gizli kahramanlardır. Bütün işleri kendileri yaparlar fakat beğeniyi ön kısım alır.

      Front-end : Burda bulunan kod parçacıkları PHP veyahut başka web programlama dillerine göre daha basit bir yapıya sahiptir. Bir web sitesinin iskeletini oluştururlar. Web sitenize giren kişiler tarafından kodları görülebilir. Front-End kısmında HTML ve CSS bulunur. Bunlar bir programlama dili değildir. Betik bir dildir.

      Peki Front-End ile Back-End'in birbirleri ile bağlantısı ve farklılıkları nelerdir?
      Bu iki terimi bir insan olarak hayal edelim.

      HTML : Bu kavram bir web sitesinin iskeletini oluşturur. Yani web sitesindeki şablonlar ve linkler HTML kısmında tasarlanır. Yani insan bedeninde iskelet ne ise bir web sitesi için de HTML odur.
      CSS : Bu kavram için insanlar üzerinden örnek verecek olursak, insan için dış güzellik ne ise bir web sitesi için de CSS o anlamı ifade eder.

      Back-End : Bu kavram ise HTML ve çalışan sunucu arasındaki köprüdür. İnsan üzerinden örnek verecek olursak bir web sitesinin beynidir. HTML'in yani iskelet sisteminin ne yapması gerektiğine karar verir. Örneğin beyniniz size bacağınızı kaldırma emrini kaslarınıza iletir ise bacağınızı kaldırırsınız. Bur da da HTML'den isteği alır servere iletir. Sonrasında serverin vereceği tutuma göre kararı iskelete yani HTML'e iletir.

      Bu konu altında öğrenilmesini kendimce gerekli gördüğüm dersler:
      Front End : HTML,CSS
      Back End : PHP, Node,js, Laravel

      Son olarak bir not : Unutmayınız ki Laravel bir programlama dili değil bir frameworktür. PHP'nin daha az kodla daha hızlı çalışabilmesini sağlayabilmesi için geliştirilmiştir. Sırayla gidecek olursanız ilk başta HTML ve CSS Ardından PHP, sonrasında ise Node,js ve Laravel öğrenebilirsiniz. Buna ek olarak Node,js'i daha iyi öğrenebilmek için Node,js ve Laravel'den önce javascript de öğrenebilirsiniz.

      internette var olan HTML, CSS ve Javascript derslerine gitmek için tıklayın.

      internette var olan PHP derslerine gitmek için tıklayın.

      İnternette var olan Laravel derslerine gitmek için tıklayın.

      İnternette var olan Node,js derslerine gitmek için tıklayın.

      Artık terimlerin ne işe yaradığı ve nasıl çalıştığını öğrendiğinize göre Betik dil veyahut programlama dilindeki kodların ne işe yaradığına dair açıklamalara geçelim.

      HTML dökümanı :
      <html></html> Server'ın bunun bir html şablonu olduğunu anlaması için bu tagları açarız ve HTML kod satırları bu iki kodun arasında yer alır.

      <head></head> İsminden de anlaşabileceği gibi sayfanın baş kısmını oluşturur. Önceki dersten hatırlayacak olursanız bir insana benzetmiştik bir web sitesini. Bu da o web sitesinin kafa kısmıdır.

      <title></title> Web sitenizin arama motorları ve tarayıcılarda görünen ismidir. Web sitesinin domaini farklı olabilir. Fakat bu Google'da bir arama yaptığınızda ilk öncelikle bu başlığa göre karşınıza sonuçları getirir. Kimin ne arayıp web sitenize gireceği belli olmadığı için ben buna kendimce alın yazısı diyorum 🙂

      <body></body> Web sitenizin vücut kısmıdır. Web sitesi içerisinde olan her şey bu kodlar arasında yer alır.

      HTML Yazı Stilleri

      <h1></h1> Bir web sitesinin içerisinde başlık oluşturmanıza yarar. En büyük başlık h1'dir en küçük başlık h6'dır.

      <b></b> Koyu yazı yazmanıza olanak verir.

      <i></i> İtalik yazı yazmanıza olanak verir.

      <tt></tt> Teletype ya da daktilo-stili metin yaratır. Harf aralıkları orantılı olmak yerine hepsi eşit olur.

      <cite></cite>Alıntıları belirgin kılmaya yarar. Genellikle italik biçemde yazar.

      <em></em> Metni belirgin kılar. Genellikle italik ya da koyu yazar.

      <strong></strong>Metni belirgin kılar. Genellikle koyu yazar.

      <font size=?></font>Harf büyüklüğünü belirler. 1 den 7 ye kadar derecelendirir. Başka ölçekler de kullanılır.

      <font color=?></font> Harf rengini belirler.

      HTML Link Stilleri

      <a href="URL"></a> Hyperlink oluşturmanıza olanak sağlar.
      <a href="mailto:EMAIL"></a> Bir mailto link'i yaratır.
      <a name="NAME"></a>Dökümanda bir yere link (sıçrama) yaratır.
      <a href="#NAME"></a>Farklı bir dökümanda işaretli bir yere link (sıçrama) yaratır.

      Metni biçimlendirme işlemleri

      <p></p> Yeni paragraf yaratır.

      <p align=?> Paragrafı sola, ortaya ya da sağa yanaşık yapar.

      <br> Yeni satıra geçer.

      <blockquote> </blockquote> Metni iki yanda boşluk bırakarak belirgin kılar.

      <dl></dl> Tanımlı liste yaratır.

      <dt> Tanımlı listedeki terimleri belirler.

      <dd>Tanımlı listedeki terimlerin tanımlarını (açıklamalarını) belirler.

      <ol></ol>Numaralı liste yaratır.

      <li></li> Numaralı ya da numarasız listedeki maddeleri belirler. Numaralı listede maddelere sırayla numara verir. Numarasız listelere isteğe göre işaret (disk, çember vb) koyar.

      <ul></ul> Sıra numarasız liste yaratır.

      <div align=?>...</div> Div ile damgalanmış bölümün sola, ortaya ya da sağa yanaşık olmasını sağlar. Genellikle, birçok paragraf içeren bölümlerin biçemlenmesinde kolaylık sağlat. Stil sayfalarında da kullanılır.

      Basit bir html kod ve tarayıcı görüntüsü :

      DEVAMI GELECEK.

      CSS LİNK ÖZELLİKLERİ

      a : Linkin, sayfa açıldığında tıklanmadan veya imleç üzerine getirilmeden önceki durumudur.
      a:hover : Linkin imleç üzerine getirildiğindeki durumudur.
      a:active : Linkin tıklandığı andaki durumudur.
      a:visited : Linkin tıklandıktan sonraki durumudur.

      CSS BİÇİMLENDİRME ÖZELLİKLERİ

      color: Linkin rengini belirler.
      background-color: Linkin zemin rengini belirler.
      background-image: Linkin zeminine resim ekler(Bu animated-gif de olabilir.)
      text-decoration: Linkin altının,üstünün vs. çizgili olup olmayacağını belirler.
      font-weight: Yazının kalınlık veya inceliğini belirler.
      border: Linkin etrafına kenarlık ekler.
      display: Linki içeren hücre , satır vb. istenilen alanın seçilmesini sağlar.

      CSS LİSTE ÖZELLİKLERİ

      disk: Liste biçiminin disk (içi dolu daire) şeklinde olmasını sağlar.
      circle : Liste biçiminin çember şeklinde olmasını sağlar.
      square : Liste biçiminin kare olmasını sağlar.
      decimal : Liste biçiminin rakamlardan oluşmasını sağlar.
      lower-roman : Liste biçiminin i,ii,iii gibi küçük roma rakamlarından oluşmasını sağlar.
      upper-roman : Liste biçiminin I,II,II gibi büyük roma rakamlarından oluşmasını sağlar.
      lower-alpha : Liste biçiminin a,b,c şeklinde küçük harf olmasını sağlar.
      upper-alpha : Liste biçiminin A,B,C şeklinde büyük harf olmasını sağlar.
      none : Listenin simgesiz olmasını sağlar.
      inside : Listenin ikinci satırının en soldan başlamasını sağlar.
      Outside : Listenin ikinci satırının ilk satır ile aynı yerden başlamasını sağlar.
      list-style-image : Liste biçiminin resim olmasını sağlar.

      CSS KATMAN ÖZELLİKLERİ

      position: Katmanın yerinin belirlenmesini sağlar.
      absolute: Katmanın yerinin pencere esas alınarak belirlenmesini sağlar.
      relative: Katmanın yerinin bir önceki katman esas alınarak belirlenmesini sağlar.
      static: Katmanın yerinin sabit olarak (Varsayılan olan sol üst köşe) belirlenmesini sağlar.
      top: Katmanın üstten ne kadar aşağıda olması gerektiğini belirler.
      left: Katmanın soldan ne kadar içeride olması gerektiğini belirler.
      width: Katmanın genişliğinin ne kadar olacağını belirler.
      height: Katmanın yüksekliğinin ne kadar olacağını belirler.
      overflow: Katmanın belirtilen yükseklik ve genişliğe sığmayan kısmına ne olacağını belirler.
      auto: Otomatik olarak belirlenir.
      scroll: Kaydırma çubuğu ekleyerek görünmesini sağlar.
      visible : Katmanı belirtilen boyutların dışına taşırarak sığmayan yerlerin görünmesini sağlar.
      hidden: Sığmayan yerleri gizler.
      visibility: Katmanın görünebilirlik ayarını yapar.
      visible : Katmanın görünür olmasını sağlar.
      hidden: Katmanı gizler.
      z-index : Katmanların alttan üste doğru hangi sıra ile gösterileceğini belirler.1 değeri katmanın en altta olacağını belirtir.

      CSS FONT ÖZELLİKLERİ
      font-family: Yazı türünü belirler.(Arial , Verdana gibi.)
      font-style: Yazının normal veya sağa eğik olmasını sağlar.
      font-variant: Yazının normal veya tümünün büyük harflerden oluşmuş olmasını sağlar.
      font-weight: Yazının kalınlık-inceliğini belirler.
      font-size: Yazının büyüklüğünü belirler.

      CSS TEXT ÖZELLİKLERİ

      word-spacing : Kelimeler arasında bırakılacak boşluğu boşluğu belirler.
      letter-spacing : Harfler arasında bırakılacak boşluğu boşluğu belirler.
      text-decoration : Kelimenin altının , üstünün vs. çizili olup olmayacağını belirler.
      underline : Kelimenin altının (Satır altından) çizili olmasını sağlar.
      overline : Kelimenin üstünün (Satır üstünden) çizili olmasını sağlar.
      line-through : Kelimenin ortasından çizili olmasını sağlar.
      blink : Kelimenin yanıp sönmesini sağlar.(Netscape için)
      vertical-align : Metnin yatay olarak nasıl hizalanacağını belirler.
      text-transform: Kelimelerin büyük harf veya küçük harflerden oluşmasını sağlar.
      capitalize : Kelimelerin ilk harflerinin büyük olmasını sağlar.
      uppercase : Kelimelerin bütün harflerinin büyük olmasını sağlar.
      lowercase : Kelimelerin bütün harflerinin küçük olmasını sağlar.
      none : Kelimelerin orjinal metindeki gibi olmasını sağlar.
      text-align: Metnin dikey olarak nasıl hizalanacağını belirler.
      left : Metni sola yaslar.
      right : Metni sağa yaslar.
      center : Metni ortalar.
      justify : Metni iki yana yaslar.
      text-indent : Metnin ilk satırının soldan ne kadar içerden başlayacağını belirler.
      line-height : Satırın yüksekliğini ayarlar.(Yüksek değer verildiğinde satırlar arasındaki boşluk artar.)
      first-line : Metnin ilk satırının biçimlendirilmesini sağlar.
      first-letter : Metnin ilk harfinin biçimlendirilmesini sağlar.

      CSS İMLEÇ ÖZELLİKLERİ

      crosshair: İmlecin artı işareti şeklinde olmasını sağlar.
      auto: İmlecin metinde dikey çizgi ,boş alanda normal ok şeklinde olmasını sağlar.
      default: İmlecin hem metinde hem de boş alanda normal ok şeklinde olmasını sağlar.
      hand: İmlecin linkte olduğu gibi el şeklinde olmasını sağlar.
      move: İmlecin taşıma işareti şeklinde olmasını sağlar.
      ne-resize: İmlecin sağa yatık normal ok olmasını sağlar.
      nw-resize: İmlecin sola yatık normal ok olmasını sağlar.
      se-resize: İmlecin yukardan aşağı doğru ve sağa yatık normal ok olmasını sağlar.
      sw-resize: İmlecin yukardan aşağı doğru ve sola yatık normal ok olmasını sağlar.
      n-resize: İmlecin aşağıdan yukarıya doğru ince ok şeklinde olmasını sağlar.
      s-resize: İmlecin yukardan aşağı doğru ince ok şeklinde olmasını sağlar.
      w-resize: İmlecin sola doğru ince ok şeklinde olmasını sağlar.
      e-resize: İmlecin sağa doğru ince ok şeklinde olmasını sağlar.
      text: İmlecin hem metinde hem de boş alanda metinde olduğu gibi görünmesini sağlar.
      wait: İmlecin meşgul animasyonuna dönüşmesini sağlar.
      help: İmlecin yardım-soru işaretine dönüşmesini sağlar.

      CSS ZEMİN ÖZELLİKLERİ

      background-color: Zeminin rengini belirler.
      color : Renk adı.
      transparent: Zeminin saydam olmasını sağlar.
      background-image: Zemine resim yerleştirilmesini sağlar.
      url : Zemine yerleştirilen resmin adresi.
      background-repeat: Zemine yerleştirilen resmin nasıl yayılacağını belirler.
      repeat : Resmin bütün zemine yayılmasını sağlar.
      repeat-x : Resmin sol-üstten sağ-üste doğru yayılmasını sağlar.
      repeat-y : Resmin sol-üstten sol-alta doğru yayılmasını sağlar.
      no-repeat: Resmin yayılmadan orjinal boyutuyla görünmesini sağlar.
      background-attachment: Zemindeki resmin , sayfa kaydırma çubuğuyla hareket ettirildiğindeki durumunu belirler.
      scroll : Sayfa hareket ettirildiğinde zeminin de kaymasını sağlar.
      fixed: Sayfa kaydırılsa da zeminin sabit kalmasını sağlar
      background-position: Zemindeki resmin istenilen şekilde yerleştirilmesini sağlar.
      top : Resmi yukarı yerleştirir.
      center : Resmi ortalar.
      bottom : Resmi aşağı yerleştirir.
      left : Resmi sola yerleştirir.
      right: Resmi sağa yerleştirir.
      …px : Resmin soldan istenilen ölçüde içerde olmasını sağlar.

      CSS TABLO ÖZELLİKLERİ

      margin : Tablo ile pencerenin kenarları arasında bırakılacak boşluğu belirler.
      margin-top : Tablo ile pencerenin üst kenarı arasında bırakılacak boşluğu belirler.
      margin-right : Tablo ile pencerenin sağ kenarı arasında bırakılacak boşluğu belirler.
      margin-bottom : Tablo ile pencerenin alt kenarı arasında bırakılacak boşluğu belirler.
      margin-left : Tablo ile pencerenin sol kenarı arasında bırakılacak boşluğu belirler.

      padding : Tablo kenarları ile tablo içeriği (Yazı vb.) arasında bırakılacak boşluğu belirler.
      padding-top : Tablonun üst kenarı ile tablo içeriği arasında bırakılacak boşluğu belirler.
      padding-right : Tablonun sağ kenarı ile tablo içeriği arasında bırakılacak boşluğu belirler.
      padding-bottom : Tablonun alt kenarı ile tablo içeriği arasında bırakılacak boşluğu belirler.
      padding-left : Tablonun sol kenarı ile tablo içeriği arasında bırakılacak boşluğu belirler.

      border : Tablonun kenarlarının şekillendirilmesini sağlar.
      border-top : Tablonun üst kenarının şekillendirilmesini sağlar.
      border-left : Tablonun sol kenarının şekillendirilmesini sağlar.
      border-bottom : Tablonun alt kenarının şekillendirilmesini sağlar.
      border-right : Tablonun sağ kenarının şekillendirilmesini sağlar.

      border-width : Tablonun kenarlarının kalınlığını belirler.
      border-top-width : Tablonun üst kenarının kalınlığını belirler.
      border-right-width : Tablonun sağ kenarının kalınlığını belirler.
      border-bottom-width : Tablonun alt kenarının kalınlığını belirler.
      border-left-width : Tablonun sol kenarının kalınlığını belirler.

      border-style : Tablonun kenarlık türünü belirler.
      border-top-style : Tablonun üst kenarlık türünü belirler.
      border-right-style : Tablonun sağ kenarlık türünü belirler.
      border-bottom-style : Tablonun alt kenarlık türünü belirler.
      border-left-style : Tablonun sol kenarlık türünü belirler.

      border-color : Tablonun kenarlarının rengini belirler.
      border-top-color : Tablonun üst kenarının rengini belirler.
      border-right-color : Tablonun sağ kenarının rengini belirler.
      border-bottom-color : Tablonun alt kenarının rengini belirler.
      border-left-color : Tablonun sol kenarının rengini belirler.

      color : Tabloda geçen metnin rengini belirler.
      width : Tablonon genişliğini belirler.
      height : Tablonun yüksekliğini belirler.

      Kaynak

      Flarum forumu ben paylaşımlı hostingimde kullanıyorum. Modifiye etmem gerektiğinde bir eklenti yazsam bunu sunucu olmadan paylaşımlı hostingime dosyaları atıp, çalıştırabilir miyim?

        sezginyildirim Benim bildiğim paylaşımlı hostinglerde sonradan eklentiler çalışmıyor. Bunun için bir eklenti yazıyorum. Fakat ne kadar sürer bir bilgi veremem 🙁

          Hadımköy Kombi Servisi Minecraft Türk Sunucular