> For the complete documentation index, see [llms.txt](https://docs.liman.dev/eklenti-gelistirme/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.liman.dev/eklenti-gelistirme/genel-bilgiler/bilesen-mantigi.md).

# Bileşen Mantığı

Geliştirdiğiniz eklentiye Liman anasayfasına eklenebilen bir bileşen entegre etmeyi öğreneceğiz.

Liman sisteminin anasayfası eklentiler tarafından özelleştirilebilen bir yapıya sahiptir. Eklentinizi entegre ettiğinizde Bileşenler sayfasından anasayfaya eklenip çıkarılabilen bileşenler elde edebilirsiniz.

### Bileşen Tanımlama

* Sol menüdeki Ayarlar menüsüne tıklanır.
* Eklentiler sekmesine geçilir ve eklentiye tıklanır.
* Bileşenler sekmesine geçilir.

![Bileşenler Ekranı](https://417706327-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MfqQ50ZXXmoDpZL1Ih7%2F-MgeVDaO0uGqjf2CtmRB%2F-MgeWmMeSH4TCDD3Ygs8%2Fimage.png?alt=media\&token=f7dce79d-ad67-41d0-910d-18c8e141fc83)

* Yeni bir bileşen eklemek için **Widget Ekle** butonuna basılır.

![](https://417706327-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MfqQ50ZXXmoDpZL1Ih7%2F-Mge_6JI05yJDE9crZUQ%2F-MgeanbvAcf9V-19BA8V%2Fimage.png?alt=media\&token=a09a3846-0ba3-4819-9029-f9ef8b66c2d4)

| Alan                | Tip       | Açıklama                                                                            | Değerler                                               |
| ------------------- | --------- | ----------------------------------------------------------------------------------- | ------------------------------------------------------ |
| Widget Adı          | string    | Bileşenler sayfasında gösterilecek isim.                                            | -                                                      |
| İkon                | string    | Bileşen render edildiğinde gösterilecek ikon.                                       | <https://fontawesome.com/v5.15/icons?d=gallery&m=free> |
| Türü                | selectbox | Bileşenin tipi.                                                                     | `Sayı` `Grafik`                                        |
| Çalışacak Fonksiyon | string    | Eklenti içerisinde tanımlanmış ve bileşen verisini geriye döndüren fonksiyonun adı. | -                                                      |

### Fonksiyon Tanımlama

Bileşeninizin verilerini sağlayan fonksiyonu tanımlamak için WidgetController adında bir Kontrolcü oluşturup bu kontrolcü sınıfının içerisinde bir fonksiyon oluşturabilirsiniz.&#x20;

```php
<?php

namespace App\Controllers;

class WidgetController
{
    public function exampleWidget()
    {
        return respond(5);
    }
}
```

Ardından routes.php dosyasından bir önceki aşamada **Çalışacak Fonksiyon** alanına yazdığımız isimde bir Rota oluşturmalıyız.

```php
<?php

return [
    "index" => "HomeController@index",
    "verify" => "HomeController@verify",
    "load" => "HomeController@load",

    "example_widget" => "WidgetController@exampleWidget"
];
```

Artık Bileşeniniz kullanıma hazır.&#x20;

### Bileşeni Liman'a Eklemek

* Üst bardaki Bileşenler ikonuna tıklayın.

![Bileşenler Ekranı](https://417706327-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MfqQ50ZXXmoDpZL1Ih7%2F-MgebJrKfW8qGqzMcHbo%2F-MgedHoXf5A6jeyR-5JO%2Fimage.png?alt=media\&token=8e8ce411-0106-452e-9451-ac7d42270653)

* **Bileşen Ekle** butonuna tıklayın.

![Bileşen Ekleme Ekranı](https://417706327-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MfqQ50ZXXmoDpZL1Ih7%2F-MgebJrKfW8qGqzMcHbo%2F-MgedSogH-qHBCkmqOPA%2Fimage.png?alt=media\&token=07c8cd82-0eb7-41d2-8055-3e6a630ec201)

* Sunucu ve Eklenti seçimi yaptıktan sonra yeni eklediğiniz Bileşeni seçebilirsiniz.&#x20;
* Bileşen Ekle butonuna bastığınızda Liman anasayfasında bileşeniniz görünecektir.

![Örnek Bileşen Görüntüsü](https://417706327-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MfqQ50ZXXmoDpZL1Ih7%2F-MgebJrKfW8qGqzMcHbo%2F-MgedxexGTd154RFLZUG%2Fimage.png?alt=media\&token=437bb2cb-8fd5-419b-8852-ae56a0c8f440)