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;

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 🙂

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.

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.

PHP Eğitim Setim Çıktı!

Bir süre önce büyük bir özenle hazırlamaya başladığım eğitim setimi ön sipariş olarak yayına almaya karar verdim. Bu sayede hem sete başlamak isteyen arkadaşlar kursa katılıp başlayabilecek, hemde erken alanlar için indirimli olacak.

Normalde 100₺ olarak düşündüğüm kurs fiyatını, 10 Ocak 2018‘e kadar alan arkadaşlar için 50₺ yaptım. Verdiğim indirim kupon kodu ile %50 indirimli alabilirsiniz.

Bunu yapmamın en büyük sebebi, hem sizin için hem de kendim için 🙂

Umuyorum beraber güzel zaman geçiririz kursta.

Kurs henüz tamamlanmadığı için yeni kupon koduyla indirimli olarak alabilirsiniz.

Kurs Linki: https://www.udemy.com/php-egitim-seti/?couponCode=ERBILEN
Kupon Kodu: ERBILEN

SQL ve MySQL Arasındaki Fark Nedir?

Aslında bu komik bir soru, ancak bir çok kişi tarafından aratılmış ve bende şöyle bir aratıp sonuçlara baktığımda çok güzel sonuçlar göremediğim için ufak bir yazı yazmak istedim. İngilizce olarak “what’s difference between sql and mysql” diye arattığımda, çok güzel bir örnek karşıma çıktı. Bunu sizlerle paylaşmak istiyorum.

SQL uzun haliyle Structured Query Language yani Yapılandırılmış Sorgu Dili demektir. Basit tanımıyla, veritabanı içindeki depolanan verilere ulaşmak ve onlar üzerinde işlem yapmak için kullanabileceğimiz bir dildir.

MySQL ise, bir üründür ve (RDMS * Relational Database Management System) İlişkisel Veritabanı Yönetim Sistemlerinden biridir. MySQL haricinde OracleInformixPostgres ve MSQL‘de aynı şekilde birer üründür ve veritabanı yönetim sistemidir.

Tüm bu ilişkisel veritabanı yönetim sistemleri dil olarak SQL’i kullanır. Her birinin kullandığı SQL dilinde küçük farklılıklar olsada temelde hepsi SQL’i kullanmaktadır.

Bunu gerçek hayattan bir örnekle açıklamak gerekirse, Türkiye’de konuşulan dil Türkçe’dir. Ancak bazı şehirlerde şive’ede değişiklikler olur. Yine de temelinde konuşulan dil Türkçe’dir.

Yani Türkçe’ye SQL dediğimizde, bazı şehirler ise veritabanı yönetim sistemleri olsun. Bütün RDMS’ler aynı dili konuşuyor sadece şiveleri farklı o kadar.

Umarım basitçe anlaşılır olmuştur 🙂 Sizinde bu konuda üstüne katmak istediğiniz bilgiler olursa lütfen çekinmeden yorum bırakın.

Centos Üzerinde GoLang Kurulumu

Yavaş yavaş yeni dillere merak salarken, öğrendiğim bilgileri de makale olarak sitemde paylaşmaya karar verdim. Daha önce de bunu Angular JS için yapmıştım 🙂 GoLang’in ne olduğunu neden kullanmamız gerektiğini bir kenara bırakarak, önce Centos üzerinde nasıl kurarak ilk örneğimizi yaparız bunu göstermek istiyorum.

İlk olarak /tmp klasörüne geçiş yapalım.

cd /tmp

Daha sonra GoLang’i indirelim.

curl -LO https://storage.googleapis.com/golang/go1.7.linux-amd64.tar.gz

GoLang’i /usr/local içine kuralım.

sudo tar -C /usr/local -xvzf go1.7.linux-amd64.tar.gz

Şimdi GoLang için ilgili klasörlerimizi oluşturalım.

mkdir -p ~/projects/{bin,pkg,src}

Dosyaları düzenlemek için nano kullanacağız, sunucunuzda yoksa aşağıdaki komut satırı ile kuralım;

yum install nano

Şimdi Go için Yolları Ayarlayalım. Önce /etc/profile.d/path.sh dosyasını açalım.

nano /etc/profile.d/path.sh

Bu dosya içine aşağıdaki kodları yazıp kaydedelim. Kaydetmek için Commant (CTRL) + x dedikten sonra y tuşuna basarak enter’layın.

export PATH=$PATH:/usr/local/go/bin

/root dizinindeki .bash_profile dosyasını açalım.

nano ~/.bash_profile

En alta şu kodları ekleyip kaydedelim.

export GOBIN="$HOME/projects/bin"
export GOPATH="$HOME/projects/src"

Değişiklikleri mevcut bash profilimize uygulamak için, profilleri yeniden yükleyelim.

source /etc/profile && source ~/.bash_profile

Kurulumu tamamladık. Artık örnek bir Go dosyasını /projects/src altına oluşturarak ilk “hello world” örneğimizi oluşturalım.

nano ~/projects/src/test.go

içine ilk go kodlarımızı yazıyoruz.

package main

import "fmt"

func main() {
    fmt.Printf("Merhaba Gardaş")
}

Daha sonra oluşturduğumuz dosyayı derlememiz gerekiyor.

go install $GOPATH/test.go

Ve şimdide konsol’da çalıştırıp çıktısına bakalım.

$GOBIN/test

Çıktı:

Artık GoLang hakkında daha fazla araştırma yaparak, kendiniz alıştırmalar yapmaya başlayabilirsiniz.

Hepimize kolay gelsin 🙂

Kaynak: https://www.digitalocean.com/community/tutorials/how-to-install-go-1-7-on-centos-7

Udemy için Eğitim Setleri Hazırlıyoruz

Merhaba arkadaşlar, son zamanlarda aktif olarak videolar çekmiyorum, bloğumla ilgilenmiyorum. Bunun sebebi hem ekip olarak yeni bir yapılanmaya girmemiz, hemde Mehmet ile beraber udemy için eğitim seti hazırlığında olmamızdan dolayı.

Tahminen Aralık ayının sonlarına doğru PHP eğitim setini çıkarmış olacağım. Mehmet Seven‘de aynı şekilde Node.js eğitimini çıkarmış olacak.

Seti bekleyen arkadaşların olduğunu biliyorum, umarım yakın zamanda birlikte öğrenmeye başlayabiliriz.

Yakında görüşmek üzere.

Udemy Profil Linkim: https://www.udemy.com/user/tayfunerbilen/

AMP Nedir? Nasıl Kullanılır?

Merhaba arkadaşlar, bugün sizlere Google’ın AMP projesinden bahsedeceğim.

AMP Nedir?

AMP, Accelerated Mobile Pages’in baş harflerinden oluşmuş, Hızlandırılmış Mobil Sayfalar anlamına gelen, daha hızlı mobil sayfaların oluşturulması için geliştirilmiş bir Google projesidir.

Bir AMP projesinde, inline javascript yazamaz, sadece inline css yazabilirsiniz. Javascript işlemleri için, AMP’nin mobil sayfalar için gerekli oluşturduğu komponentleri kullanabilirsiniz.

Bir AMP sayfasında neler olmalıdır?

Google, geçerli bir AMP sayfasında zorunlu olan etiketleri şu şekilde listeliyor;

<!doctype html>
<html ⚡>
<head>
  <meta charset="utf-8">
  <link rel="canonical" href="self.html" />
  <meta name="viewport" content="width=device-width,minimum-scale=1">
  <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
  <script async src="https://cdn.ampproject.org/v0.js"></script>
  <style amp-custom>
    
  </style>
</head>
<body>

</body>
</html>

Bunlara yakından kısaca bir bakalım;

<html ⚡>

Bu kısımda ⚡ işareti ya da onun yerine amp de yazılabilir, AMP projesi olduğunu belirlememizi sağlıyor.

<link rel="canonical" href="self.html" />

Burada canonical linkine, AMP sayfasının orjinal linkini yazmalısınız. Yani Google’a, bu AMP sayfasının asıl sayfası şurasıdır diye belirtiyorsunuz.

<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
  <script async src="https://cdn.ampproject.org/v0.js"></script>

Bu kısmı boşluklarıyla beraber hiç değiştirmeden kullanın. Aksi taktirde hatalı bir kullanım olacaktır.

<script async src="https://cdn.ampproject.org/v0.js"></script>

AMP’nin ana javascript dosyasıdır, tabi ki zorunludur 🙂

<style amp-custom></style>

Burada ise, Inline yazacağınız CSS etiketini yazdık. amp-custom niteliği olmadan yine hata verecektir. Bu arada Inline CSS’inde belli bir Byte limiti var, onu aşarsanız yine hata alırsınız.

AMP’de Komponentler

Proje içinde kullanılmak üzere, bir çok komponent mevcut. Bunlardan en çok kullanılanı, img, video, iframe ve reklam komponentleri olabilir. Tüm komponentlere buradaki linkten ulaşabilirsiniz.

Şimdi örnek bir komponent inceleyelim, örneğin nasıl bir resin eklenir? Doğrudan img etiketi ile eklerseniz, geçersiz bir AMP sayfası olacaktır.

<amp-img src="resim.jpg"
  width="1080"
  height="610"
  layout="responsive"
  alt="AMP"></amp-img>

Gördüğünüz gibi bu şekilde kullandık. Bunu kullanırken javascript gereği duymadık, ama örneğin bir analytics kodu yerleştirmemiz gereksin. O zamanda analytics komponentini kullanacağız. Bu sefer önce ona ait javascript kodunu sayfamızda head etiketi içerisine ekliyoruz.

<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>

Daha sonra uygun bir yere analytics kodumuzu ekliyoruz.

<amp-analytics type="googleanalytics">
    <script type="application/json">
        {
            "vars": {
                "account": "UA-KODUNUZ"
            },
            "triggers": {
                "trackPageview": {
                    "on": "visible",
                    "request": "pageview"
                }
            }
        }
    </script>
</amp-analytics>

Bu şekilde, aklınıza gelebilecek bir çok şeyi komponentler bölümünde bulabilirsiniz.

AMP sayfalarını Debug etmek

AMP sayfasında hataları konsol’dan görebilmek için, sayfa linkinin sonuna #development=1 yazıp sayfayı yenilerseniz, hata varsa hataları yoksa geçerli bir sayfa olduğunun uyarısını görebilirsiniz konsolunuzda.

http://localhost/konu/amp#development=1

AMP Sayfaları – Normal Sayfalar

Bir AMP sayfasının normal versiyonunu belirlemek için, şu şekilde etiket kullanacaksınız;

<link rel="canonical" href="self.html" />

Normal bir sayfanın AMP sayfasını belirlemek için ise şöyle bir kullanım olacak;

<link rel="amphtml" href="self-amp.html" />

Ve böylece Google amca projenizde AMP sayfalarını takip edip indexleyebilecek.

Örnek bir AMP sayfası

Video’da hazırladığım örnek AMP sayfasını aşağıdaki linkten indirebilirsiniz;
https://drive.google.com/open?id=0BxX-AwfGLF5vZ0Q1MFRRdFFNUWs

WordPress için AMP

WordPress’de mevcut içerikleriniz için AMP sayfasını hazırlamak isterseniz, eklenti kullanmanız yeterli.
Ben şu eklentiyi kullanıyorum: https://wordpress.org/plugins/amp/
Tek yapmanız gereken eklentiyi kurup etkinleştirmek. Gerisini google amcaya bırakın 🙂

WordPress Özel Bileşen Oluşturma

Merhaba arkadaşlar, bu dersimde sizlere nasıl özel bileşen (widget) oluşturulur bunu göstermek istiyorum.

Öncelikle WP_Widgets sınıfını genişleterek widget için bir class oluşturacağız.

class facebookLikeBox extends WP_Widget {

    public function __construct()
    {
    
    }
    
    // Yönetim panelindeki görülecek alanı burada hazırlayacağız
    public function form($instance)
    {
    
    }
    
    // Girilen değerleri burada kaydedeceğiz
    public function update($new_instance, $old_instance)
    {
    
    }
    
    // Tema alanında gözükecekleri buraya ekleyeceğiz
    public function widget($args, $instance)
    {
    
    }

}

__construct() Metodu
Bu metod, sınıf oluşturulduğunda çağırılacak ilk metoddur. Bu yüzden biz bu alanda üst sınıfın constuct metoduna bazı bilgiler göndereceğiz.

public function __construct()
{
    parent::__construct('widget_fblikebox', 'Facebook Likebox', [
        'classname' => 'Facebook Likebox',
        'description' => 'Facebook likebox oluşturmanızı sağlar'
    ]);
}

İlk parametrem ID, 2. parametrem başlık, 3. parametrem dizi olarak bir takım değerler göndermekti.form() Metodu
Bu kısımda yöneti panelinde bileşeni sürükleyip bırakınca gelecek olan form alanını hazırlayacağız.

public function form($instance)
{
    $fb_url = !empty($instance['fb_url']) ? $instance['fb_url'] : '';
    $fblikebox_title = !empty($instance['fblikebox_title']) ? $instance['fblikebox_title'] : '';
    ?>
    <p>
        <label for="<?php echo $this->get_field_id('fblikebox_title') ?>">Başlık:</label>
        <input type="text" id="<?php echo $this->get_field_id('fblikebox_title') ?>" name="<?php echo $this->get_field_name('fblikebox_title') ?>" value="<?php echo $fblikebox_title ?>">
    </p>
    <p>
        <label for="<?php echo $this->get_field_id('fb_url') ?>">Facebook Sayfa URL:
        <input type="text" id="<?php echo $this->get_field_id('fb_url') ?>" name="<?php echo $this->get_field_name('fb_url') ?>" value="<?php echo $fb_url ?>">
    </p>
    <?php
}

Burada get_field_id() ve get_field_name() metodları extend ettiğimiz sınıftan gelmektedir.update() Metodu
Bu kısımda form’dan gelen verileri kaydedeceğiz.

public function update($new_instance, $old_instance)
{
    $old_instance['fb_url'] = $new_instance['fb_url'];
    $old_instance['fblikebox_title'] = $new_instance['fblikebox_title'];
    return $old_instance;
}

widget() Metodu
Bu kısımda ise temada gözükmesini istediğimiz şeyleri ekleyeceğiz.

public function widget($args, $instance)
{
    $fb_url = $instance['fb_url'];
    $title = apply_filters('widget_title', $instance['fblikebox_title']);

    echo $args['before_widget']. $args['before_title']. $title .  $args['after_title'];
    ?>
    <div id="fb-root"></div>
    <script>(function(d, s, id) {
            var js, fjs = d.getElementsByTagName(s)[0];
            if (d.getElementById(id)) return;
            js = d.createElement(s); js.id = id;
            js.src = "//connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v2.10";
            fjs.parentNode.insertBefore(js, fjs);
        }(document, 'script', 'facebook-jssdk'));</script>
    <div class="fb-page" data-href="<?php echo $fb_url; ?>" data-width="200" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true"></div>
    <?php
    echo $args['after_widget'];
}

Daha fazla bilgi için videoya gözatmayı unutmayın!