> 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ığı

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ı](/files/-MgeWmMeSH4TCDD3Ygs8)

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

![](/files/-MgeanbvAcf9V-19BA8V)

| 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ı](/files/-MgedHoXf5A6jeyR-5JO)

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

![Bileşen Ekleme Ekranı](/files/-MgedSogH-qHBCkmqOPA)

* 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ü](/files/-MgedxexGTd154RFLZUG)