# 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ı](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)