Tablo

Liman eklentileri üzerinde kolay bir biçimde tablo oluşturma yolu.

Tablo componenti nedir?

Tablo Componenti

Tablo componenti, PHP ile gönderdiğiniz verilerin kolayca DataTables olarak oluşturulmasını sağlar. Ayrıca içerisinde birden çok özellik bulundurmaktadır.

• Satıra tıklayınca bir işlem yapılması

• Satıra sağ tıklayınca sağ klik menüsünün açılması

• Sayfalama fonksiyonu

• Arama fonksiyonu

• Sütunlar içerisinde sıralama işlemi yaptırtmak

Nasıl kullanılır?

@include("table", [
    "value" => $exampleTableData,
    "display" => ["name", "surname", "email", "phone", "id:id"],
    "title" => ["İsim", "Soyisim", "Eposta", "Telefon", "*hidden*"],
    "onclick" => "rowOnClickEvent",
    "menu" => [
        "Example Right Click" => [
            "target" => "exampleRightClickEvent",
            "icon" => "fa-file-export"
        ],
    ]
])

Liman içerisinde Blade Render Engine kullanıldığından viewları yukarıdaki şekilde sayfamıza dahil edebiliriz. Formatı anladıysak gelin birlikte değişkenlere bakalım.

Veri	Açıklama	Veri Tipi
value	Tablonun içeriğini oluşturur	Array
title	value verisinden alınan girdilerin viewda gösterilen halidir	Array
display	value verisinden gösterilmesini istediğimiz keyler	Array
onclick	Satır üzerine tıklandığında çağırılacak JS fonksiyonu	String
menu	Satıra sağ tıklandığında çıkacak içerik menüsü	Array
menu/target	Sağ tık menüsünde tıklama yapıldığında çağırılacak fonksiyon	String

Value

$exampleTableData = [
    [
        "id"      => "1",
        "name"    => "Havelsan",
        "surname" => "Aciklab",
        "email"   => "aciklab.org",
        "phone"   => "00000000"
    ],
    [
        "id"      => "2",
        "name"    => "Havelsan",
        "surname" => "Pardus",
        "email"   => "pardus.org",
        "phone"   => "00000000"
    ]
];

Value değişkeni yukarıdaki kod bloğunun yapısında olmalı, diğer veriler de sonradan bu hale getirilerek gönderilmelidir.

Yapı olarak kendisi bir Array veri tipindedir. Liste içerisinde listelerden oluşmaktadır. Liste içerisindeki her bir liste bir satırı temsil etmektedir. Yukarıdaki örnek veri tipinde iki adet satırımız vardır ve çıktısı aşağıdaki gibi olacaktır.

Örnek Value Değişkeni

Eklenen her veride zorunlu olarak key değerleri aynı olmalıdır. Aksi halde tablo componenti başarılı şekilde renderlanamayacaktır.

Display

"display" => ["name", "surname", "email", "phone", "id:id"]

Display değişkeninde value arrayinde aldığımız listeden gösterilmesini istediğimiz keyleri yazmaktayız. Burada dikkat edilmesi gereken tek özel kullanım id:id kullanımıdır. Bu kullanımın sebebi ise gizli şekilde göstermek istediğimiz verilerdir. Title kısmında da bu özel kullanımın diğer adımını göreceğiz.

Verileri gizli göstermek istememizin sebebi JavaScript ile yakalama imkanı oluşturmaktır. Örneğin sağ klik işlemine sil isimli bir fonksiyon tanımladığımızı düşünelim. Eğer ID değişkenini JavaScript tarafına gönderebilirsek kolayca request atarak silme işlemini tamamlayabiliriz.

Title

"title" => ["İsim", "Soyisim", "Eposta", "Telefon", "*hidden*"]

Title değişkeni display değişkeninde aldığımız keyleri görüntüsü güzel bir hale getirir. name yerine İsim yazmanızı sağlar. Burada dikkat edilmesi gereken en önemli kısım ise *hidden* kısmının display kısmındaki gizlemek istediğimiz key ile eşleşmesi, orada da keyin id:id formatında kullanılması gerekliliğidir.

Onclick

Tablodaki satıra tıklandığında çalıştırılacak JavaScript fonksiyonunu tanımlarız. Nasıl kullanıldığını anlamak için gelin beraber bir örnek inceleyelim.

function lineOnClickEvent(node) {
    // node satır için bize gönderilen JavaScript seçicisidir(selector)
    console.log(node)

    // satırımızdaki gizli olan id sütununun içeriğini almak
    console.log($(node).children("#id").html())
    
    // bu id ile örnek bir işlem gerçekleştirmek
    Swal.fire(`${$(node).children("#id").html()} idli elemente tıkladınız!`)
}

Yukarıda göreceğimiz üzere node argümanı bizim için o satırın JavaScript selectorunu döndürmektedir. Bu selectoru kullanarak ister ES6, ister jQuery ile kolayca işlerimizi halledebiliriz. Liman altyapısında jQuery bulunduğu için örnekte ben jQuery kullanmayı tercih ettim.

Menu

Sağ klik menüsü açabilmemiz için gereken veri türüdür. Bu veri türünü oluşturmak için isim, JavaScript fonksiyonu ve bir font awesome ikonuna ihtiyacımız var. Gelin örnek bir menü tanımlayalım.

"menu" => [
    "Kopyala" => [
        "target" => "copyEvent",
        "icon" => "fa-copy"
    ],
    "Kes" => [
        "target" => "cutEvent",
        "icon" => "fa-cut"
    ],
    "Yapıştır" => [
        "target" => "pasteEvent",
        "icon" => "fa-paste"
    ],
]

Yukarıdaki biçimi kullanarak örnek bir menü tanımlaması gerçekleştirebiliriz. En dikkat edilmesi gereken detay ise target kısmında bulunan eventlerin JavaScript ile tanımlanmasıdır. Bu tanımlamaları yapmazsak düzgün çalışmayacaktır. Gelin kullanıcı silmek için örnek bir tanımlama yapalım.

function deleteUser(node) {
    showSwal("{{__('Yükleniyor...')}}", 'info');
    let data = new FormData();
    data.append("username", $(node).find("#user").html());
    request("{{API('delete_user')}}", data, function(response){
        Swal.close();
        response = JSON.parse(response);
        showSwal(response.messsage, "success", 2500);
        getUsers();
    }, function(response){
        response = JSON.parse(response);
        showSwal(response.message, "error");
    });
}

Tanımladığımız fonksiyon aynı onclick fonksiyonundaki gibi bir argüman almaktadır. Node isimli selector ile kullanıcı adını yakalayarak Liman üzerinde hazır tanımlanmış Request fonksiyonuna veriyi ekliyor ve bu fonksiyon aracılığı ile POST olarak gönderimi yapıyorum. Dönen cevabı ise showSwal yardımcı fonksiyonum ile ekranda gösteriyorum.

Requestten tablo çekmek

public function list()
{
    $command = Command::runSudo("ls -lah /home/liman");
    $files = explode("\n", $command);
    array_splice($files, 0, 1);
    
    foreach ($files as &$file) {
        $file = preg_replace('/\s+/', ' ', $file);
        $file = explode(" ", $file);
        $file = [
            "permissions" => $file[0],
            "user" => $file[2],
            "group" => $file[3],
            "size" => $file[4],
            "date" => $file[5] . " " . $file[6] . " " . $file[7],
            "name" => $file[8]
        ];
    }
    
    return view("table", [
        "value" => $files,
        "title" => ["İsim", "İzinler", "Sahip", "Grup", "Dosya Boyutu", "Son Değiştirilme"],
        "display" => ["name", "permissions", "user", "group", "size", "date"]
    ]);
}

Yukarıda göreceğimiz kod bloğunda bir dizin üzerinden dosya listesini çekip, parse işlemi yaptıktan sonra response olarak bir tablo viewi gönderdim. Bu tablo viewini de Javascript kullanarak bir HTML elemanının içeriğine yazdırmalıyım ki tablom görünsün. Gelin o işlemi de nasıl yapabileceğimizi inceleyelim.

function listFiles() {
    showSwal("{{__('Yükleniyor...')}}", 'info');
    let data = new FormData();
    request("{{API('list_files')}}", data, function(response){
        $("#filesTable").html(response).find("table").dataTable(dataTablePresets("normal"));
        Swal.close();
    }, function(response){
        response = JSON.parse(response);
        showSwal(response.message, 'error');
    });
}

Bu fonksiyona çağrı atacağınız yeri sizin seçmeniz gerekmektedir, aynı zamanda tablonun çıkmasını istediğiniz yerde filesTable id değerine sahip bir de div oluşturmalısınız.

Tabloyu dataTable yapmak

Requestten aldığımız tablo HTML kodunu koyduğumuzda tabloda arama, sayfalama işlemleri yapılamamaktadır. Bunu çözmek JS yardımcı fonksiyonumuz olan dataTablePresets fonksiyonunu aşağıdaki gibi kullanabiliriz.

$("#exTable").html(response).find("table").dataTable(dataTablePresets("normal"));

JS Yardımcı Fonksiyonları