CSS ile Kayan Label Yapımı vs jQuery Plugini

Bugün gezinirken şöyle bir jquery plugini gördüm;
https://www.jqueryscript.net/demo/jQuery-Floating-Placeholder-Text-Plugin-Placeholder-Label/

Amaç basit, input’un içine bir label yerleştiriyor, tıklayınca animasyonlu olarak onu yukarıya kaydırıyor. Eğer input’a yazı yazılırsa label yukarıda kalmaya devam ediyor ve label’ın texti değiştiriyor. Ve bunun için bir sürü kod yazması gerekmiş eklentiyi yazan arkadaşın.

Bende bu örneği sadece CSS ile nasıl yapacağımı göstermek istedim.

Kısaca şöyle bir HTML yapımız olsun;

<div class="field">
    <input type="text" required autocomplete="off" id="username" value="tayfunerbilen">
    <label for="username" title="Kullanıcı adınızı girin" data-title="Kullanıcı adı">
</div>

Ve CSS kodlarımız;

.field {
    position: relative;
    margin-bottom: 15px;
}

.field label::before {
    content: attr(title);
    position: absolute;
    top: 0;
    left: 15px;
    line-height: 40px;
    font-size: 14px;
    color: #777;
    transition: 300ms all;
}

.field input {
    width: 100%;
    line-height: 40px;
    padding: 0 15px;
    box-sizing: border-box;
    font-size: 14px;
    color: #222;
    border: 1px solid #ccc;
    border-radius: 3px;
}

.field input:focus {
    outline: 0;
    border-color: blue;
}

.field input:valid + label::before {
    line-height: 20px;
    font-size: 12px;
    top: -10px;
    background: #fff;
    padding: 0 6px;
    left: 9px;
    content: attr(data-title);
}

.field input:focus + label::before {
    line-height: 20px;
    font-size: 12px;
    top: -10px;
    background: #fff;
    color: blue;
    padding: 0 6px;
    left: 9px;
}

Daha fazla detay için dersi izlemeniz yeterli

Demo

See the Pen CSS Input Placeholder Animation by Tayfun Erbilen (@tayfunerbilen) on CodePen.

MySQL’de SOUNDS LIKE ve SOUNDEX

Merhaba arkadaşlar, bu yazımda ve videomda sizlere LIKE dışında kullanabileceğiniz 2 alternatifi göstermek istiyorum. Öncelikle neden ne için kullanmamız gerek onu bir açıklayayım.

Örnek vermek gerekirse sizin bir e-ticaret siteniz olsun. Ve kullanıcı ürün aramak için arama input’une iphone yazıp arattı. Ama oda ne? Bir başka kullanıcı iphone yazmayı beceremedi ve “iphon” ya da “iphom” gibi kelimeler yazdı. Bu durumda sizin şu basit mysql sorgunuz ne döndürecektir sizce?
Okumaya devam et MySQL’de SOUNDS LIKE ve SOUNDEX

MySQL’de JSON Verileriyle Çalışmak

Bu yazımda sizlere mysql’de json olarak depoladığımız veriler üzerinde listeleme, arama, düzenleme gibi işlemler nasıl yapılır bunlardan bahsetmek istiyorum. Eğer JSON ile uğraşıyorken aklınıza NoSQL veritabanları geliyorsa haklısınız, ancak mysql’de de bir takım işlemler yapabildiğimizi unutmamak lazım 🙂

Öncelikle neden JSON olarak veri depolarız? Ben kendi adıma konuşacak olursam, örneğin seo bilgilerini json formatında tutuyorum. Yani title, description, keywords ama yarın öbürgün ekstra bir bilgi daha ekleyebilirim örneğin noindex, canonical vb. Bunun için sürekli gidip kolon oluşturmak tamamen saçmalık olurdu. Bu yüzden tüm bu değerleri tek bir kolon altında json formatında tutuyorum. Ve yeri geldiğinde bunları filtrelemek, bunlar içinde arama yapmak gerekirse değiştirmek, listelerken ayrı ayrı göstermek isteyebilirim.
Okumaya devam et MySQL’de JSON Verileriyle Çalışmak

OS X Terminal “invalid active developer” Hatası

Eğer terminalde işlem yaparken şöyle bir hata alıyorsanız;

xcrun: error: invalid active developer path (/Library/Developer/CommandLineTools), missing xcrun at: /Library/Developer/CommandLineTools/usr/bin/xcrun


Terminalde şu komutu çalıştırırsanız;

xcode-select --install

Bu komut xcode geliştirici aracını indirip problemi çözecek. İşlemi tekrar yaptığınızda hatanın gittiğini göreceksiniz.

Kolay gelsin 🙂

Visual Studio Code’da Otomatik Kaydetme

Normalde bir şeyler yazdıktan sonra kayıt için ctrl + s kullanıyoruz ya da üst menüden kaydet’i seçiyoruz. phpStorm gibi kullanışlı IDE’lerde ise bu işlem otomatik oluyor. VSCodu’nda bu özelliğini, ayarlara yazacağımız değer ile yapmamız mümkün. Bunun için editörün sol altındaki ayarlar simgesine tıklayıp ayarları açın. Ya da mac kullanıcısı iseniz, command + , (virgül) kısayolunu kullanabilirsiniz.
Okumaya devam et Visual Studio Code’da Otomatik Kaydetme

PHP ile Hook (Kanca) Plugin Sistemi

Merhaba arkadaşlar, bu yazıda sizlere PHP’de kullanabileceğimiz kanca sisteminin mantığını anlatmak istiyorum.

Öncelikle eğer wordpress ile çalıştıysanız, eklenti yazarken wordpress’in bir çok kısmına müdahale ettiğinizi görmüşsünüzdür. Örneğin yeni bir plugin yazdığınızda admin panelinde sol menüye plugin linkinizi ekletebilirsiniz, ya da title’lara müdahale edebilirsiniz plugin’de vs. Yani wordpress’in sistemde belirlediği kısımlara, siz bu kanca sistemini kullanarak ilgili fonksiyonlarınızı çalıştırabiliyorsunuz.

PHP’de bu sistem doğrudan bulunmuyor, ancak PHP’nin özelliklerini kullanarak bunu yapmak mümkün. Bu sistemi sınıf ya da fonksiyon olarak tanımlamak mümkün. Şimdi sizlere video’da yazdığım fonksiyonların kodlarını veriyorum;

<?php

function hook($name, $callback = null, $value = null, $priority = 10){
    static $events = [];
    if ($callback !== null){
        if ($callback){
            $events[$name][$callback] = $priority;
        } else {
            unset($events[$name]);
        }
    } elseif (isset($events[$name])){
        arsort($events[$name]);
        foreach ($events[$name] as $callback => $priority){
            $value = call_user_func($callback, $value);
        }
        return $value;
    }
    return $value;
}

function add_action($name, $callback, $priority = 10){
    return hook($name, $callback, null, $priority);
}

function do_action($name, $value = null){
    return hook($name, null, $value);
}

function remove_action($name){
    hook($name, false);
}

Ve artık bu sistemi kullanarak aşağıdaki gibi örnekler yapabilirsiniz.

<?php

// a plugin
add_action('title', 'yeni_baslik');
function yeni_baslik(){
    return 'tayfun erbilen bu dersi çekti.';
}

// b plugin
add_action('title', 'yeni_baslik2');
function yeni_baslik2($text){
    return $text . ' Ve youtube kanalında yayınladı!';
}

// c plugin
add_action('menu', 'c_plugin_menu', 12);
function c_plugin_menu($menu){
    $menu[] = [
        'title' => 'C Plugin',
        'url' => 'c-plugin.php'
    ];
    return $menu;
}

// d plugin
add_action('menu', 'd_plugin_menu', 11);
function d_plugin_menu($menu){
    $menu[] = [
        'title' => 'D Plugin',
        'url' => 'd-plugin.php'
    ];
    return $menu;
}

echo do_action('title');

print_r(do_action('menu', []));

Daha iyi anlamak için videoyu izlemeyi unutmayın

Ve eğer hala satın almadıysanız, Udemy için hazırladığım PHP Eğitim Setime aşağıdaki linkten ulaşabilirsiniz <3
https://www.udemy.com/php-egitim-seti/?couponCode=PHPWEB

JavaScript localeCompare()

Merhaba, bu yazıda sizlere JavaScript’te bulunan localeCompare() metotundan bahsedeceğim. Öncelikle neden ihtiyaç duyup kullandım;

Bir objemi isme göre sıralamak istedim. Bu obje içerisinde türkçe karakterlerde vardı ve sıralama düzgün şekilde gerçekleşmiyordu. Hemen bir örnek verelim;

var data = [
  {
    'id': 1,
    'name': 'İstanbul'
  },
  {
    'id': 2,
    'name': 'Çanakkale'
  },
  {
    'id': 4,
    'name': 'Ümraniye'
  },
  {
    'id': 3,
    'name': 'Ankara'
  },
  {
    'id': 5,
    'name': 'Van'
  }
];

data = data.sort(function(a,b){
  if(a.name < b.name) return -1;
  if(a.name > b.name) return 1;
  return 0;
});

data.forEach(function(key){
  var node = document.createElement("LI"),
      textnode = document.createTextNode(key.name);
  node.appendChild(textnode);
  document.getElementById('test').appendChild(node);
});

Bu kodların çıktısı şu şekilde oluyordu;

See the Pen JavaScript Array Sort -1 by Tayfun Erbilen (@tayfunerbilen) on CodePen.

Yukarıdaki kodlarımda, sort fonksiyonu içerisindeki kodumu şu şekilde değiştirirsem;

return a.name.localeCompare(b.name);

O zaman sorunumuz çözülüyor ve aşağıdaki gibi başarılı bir sıralama oluşuyor 🙂

See the Pen JavaScript Array Sort -2 by Tayfun Erbilen (@tayfunerbilen) on CodePen.

ARtık birgün bir yerde işinize yararsa ne ala, benim bugün ihtiyacım oldu yarında sizin olabilir 🙂

PHP ile Excel Dosyalarını Okumak

Şu yazımda php ile nasıl excel dosyası oluşturulacağını göstermiştim. Bu yazımda ise, daha elzem bir konuya değineceğiz. Geçenlerde bir excel dosyasının içinden verileri almam gerekti, araştırırken baktım ki çok kalabalık kodlar var, benim amacım alt tarafı satır satır okuyup verileri almak o kadar. Sonra bir repo’ya denk geldim, Sergey Shuchkin abimiz bir sınıf yazmış bu işlemler için. Basit, kullanışlı, amaca hitap ediyor.

Öncelikle dosyaları şuradan temin edin;
https://github.com/shuchkin/simplexlsx (not: adama star atmayı unutmayın :D)

Kullanımı ise çok basit;

if ( $xlsx = SimpleXLSX::parse('test.xlsx') ) {
    print_r( $xlsx->rows() );
} else {
    echo SimpleXLSX::parse_error();
}

excel’deki satırları dizi halinde size verecek, seçip istediğinizi kullanabilirsiniz.

Kolay gelsin.

Mac’de MAMP Mysql Başlamıyor Hatası ve Çözümü

Özellikle aniden bilgisayar kapandığında vs. mamp’ı tekrar çalıştırdığınızda sadece apache’nin çalıştığını fark ediyorsunuz. mysql server bir türlü aktif olmuyor. Böyle bir durumla karşılaşırsanız terminal’i açıp şu komutu çalıştırın;

rm /Applications/MAMP/db/mysql56/ib_logfile*

burada mysql56 sürüme göre farklılık gösterebilir, eğer uyuşmuyor ise MAMP klasörünüz içindeki sürümü kontrol ederek komutu çalıştırın. Daha sonra MAMP’dan tekrar start servers derseniz sorunsuz çalışacaktır.

Her seferinde bu sorunla karşılaşıp internetten çözüp aratıp yapmaktan bıktım, o yüzden bloğada ekleyeyim dedim 😀

PHP’de Transaction Kullanımı

En çok bankacılık sistemlerinde kullanılan bir olay bu. Örneğin bir hesaptan diğerine para aktarımında aslında 2 sorgumuz var. Önce mevcut hesaptan bakiye düşüyoruz, daha sonra diğer hesabın bakiyesine ekliyoruz. Ancak ya mevcut hesaptan bakiyeyi düştükten sonra diğer hesaba bakiye eklerken anlık bir sorun olursa ne olur? O zaman mevcut hesaptan para çıkar ama diğer hesaba para gelmez, işler karışır.

İşte bunu önlemek için sorguları transaction ile yaparsak, yani bir işlem bloğu içerisinde yaparsak sorun kalmayacaktır.

Transaction’ı PDO’da başlatmak için beginTransaction() metodu kullanılır;

$db->beginTransaction();

Daha sonra 2 sorguyu çalıştırırız;

$sorgu1 = $db->prepare('UPDATE accounts SET balance = balance - :amount WHERE account_id = :id');
$sonuc1 = $sorgu1->execute([
   'amount' => 250,
   'id' => 1
]);

$sorgu2 = $db->prepare('UPDATE accounts SET balance = balance + :amount WHERE account_id = :id');
$sonuc2 = $sorgu1->execute([
   'amount' => 250,
   'id' => 2
]);

Şimdi transaction içerisinde bu işlemleri yaptığımızda, eğer her 2 sorguda başarı ile sonuçlandıysa, o zaman commit() metodunu kullanarak işlemi tamamlayacağız. Eğer bir sorun olur ise rollBack() metodu ile yaptığımız işlemleri geri alabileceğiz.

if ($sonuc1 && $sonuc2){
   $db->commit(); // işlemi tamamla
} else {
   $db->rollBack(); // işlemi geri al
}

Siz transaction içindeki sorgularınız commit etmediğiniz sürece, sadece mevcut bağlantınızda veritabanı değişikliğini görürsünüz. Örneğin commite etmeden önce veritabanınızı kontrol ettiğinizde, sorguları çalıştırmış olmanıza rağmen değişikliği göremeyeceksiniz. Ne zaman ki commit metodunu çalıştırıp işlemi tamamlarsınız, o zaman bütün bağlantılarda bu işlem geçerli olacaktır.

Böylece olası durumlarda, kayıpları önlemek için harika bir yolu keşfetmiş oluyoruz.

Not: Eğer bu işlemi PDO’nun metodları ile değilde, mysql ile yapmak isterseniz. O zaman bir şeye dikkat çekmem gerek. Aynı işlemi PDO’nun transaction metodlarını kullanmadan yapalım.

$db->query('BEGIN TRANSACTION');

$sorgu1 = $db->prepare('UPDATE accounts SET balance = balance - :amount WHERE account_id = :id');
$sonuc1 = $sorgu1->execute([
   'amount' => 250,
   'id' => 1
]);

$sorgu2 = $db->prepare('UPDATE accounts SET balance = balance + :amount WHERE account_id = :id');
$sonuc2 = $sorgu1->execute([
   'amount' => 250,
   'id' => 2
]);

if ($sonuc1 && $sonuc2){
   $db->query('COMMIT'); // işlemi tamamla
} else {
   $db->query('ROLLBACK'); // işlemi geri al
}

Burada 2 işlemden birisi başarısız olsa bile otomatik commit ettiği için diğer tüm bağlantılarda da görünecek. Bunun önüne geçmek için, AUTOCOMMIT değerini 0 yapmamız gerekiyor. Yani kodların en başına bir de şunu eklediğimizde;

$db->query('SET AUTOCOMMIT = 0');

Artık işlem sorunsuz şekilde çalışacaktır. Ancak bunun yerine PDO’nun metodlarını kullanmak tabi ki daha yararlı 🙂

Başka bir anlatımda görüşmek üzere, detaylı anlatım için videoma gözatabilirsiniz.