Siteye Yandex Harita Ekleme

Google son zamanlarda api servisinin ücretsiz kullanımını daha da kısıtladı. Yeni map api key aldığınızda 100 saniyede bir gösterime izin vermektedir. 100 saniye içinde harita gösterimde oluyor ama harita üzerinde for development purposes only uyarı geliyor. Bu şekilde ziyaretçinin gözüne pek hoş gelmiyor tabi. Ancak imdadımıza yandex map yetişiyor. Şuanlık ücretsiz ve herhangi bir api key almanızda gerekmiyor. Direk kodları yapıştırıp haritayı kullanabilirsiniz.  Kodlar zaten çok basit ve açıklayıcı.

 

 


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Quick start. Showing an interactive map on a page</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script src="https://api-maps.yandex.ru/2.1/?lang=tr_TR" type="text/javascript"></script>
    <script type="text/javascript">
        ymaps.ready(init);
        var myMap, 
            myPlacemark;

        function init(){ 
            myMap = new ymaps.Map("map", {
                center: [55.76, 37.64],
                zoom: 7
        });

        myPlacemark = new ymaps.Placemark([55.76, 37.64], { hintContent: 'İcon başlığı', balloonContent: 'Kutu içeriği'
            });
            
            myMap.geoObjects.add(myPlacemark);
        }
    </script>
</head>

<body>
    <div id="map" style="width: 600px; height: 400px"></div>
</body>

</html>

Daha fazla örnek uygulamaya bu linkten erişebilirsiniz.

Bad value *** for attribute rel on element a: The string *** is not a registered keyword hatasının çözümü

Lightbox galeri için rel etiketinde galerinin grubunu tanımladım. Ancak w3c validator kontrolünde aşağıdaki hatayı aldım. Normalde rel etiketinde kullanılabilecek tag bellidir. Bunlardan farklı bir tag kullanırsak hata alabiliriz. Önemli bir hata olmasa da çözülemeyecek bir hata değil.

Hata: Bad value productgallery for attribute rel on element a: The string productgallery is not a registered keyword.

Rel etiketinde kullanılabilecek taglar için tıklayınız.

Çözüm olarak rel etiketini tanımladığım yere data-rel=”productgallery” şeklinde bir tanımlama yaptım. Data etiketi jquery ile çekip işlem yapacağız.

Farklı etikete sahip birde fazla tag tanımlayabilirsiniz. Örneğin: data-rel=”_blank nofollow” burada_blank tagı target=”” etiketi içine, nofollow ise rel etiketi içine yazılacak.

Html kodu:

 <a href="#" data-rel="_blank nofollow"> ... </a> 

Aşağıdaki kodu lightbox fonksiyonundan önce yazınız.

Js kodu:

(function($){ 

    $("a[data-rel]").each(function() { // a[data-rel] tanımlı etiketleri çekiyoruz
        var rel_data = $(this).attr("data-rel").split(' '); // birden fazla tag eklenmiş ise Örnek: _blank nofollow
        var attr_length = rel_data.length; // tanımlanan tag sayısı

        for(i = 0; i < attr_length; i++){ // tanımlanan tag sayısı kadar işlem yapıyoruz

            if(rel_data[i] == "_blank"){ // eğer _blank ise target etiketini ekle
                $(this).attr("target",rel_data[i]);
            }else{ // eğer değil ise rel etiketini ekle
                $(this).attr("rel",rel_data[i]);
            }

        }
    });
	                
})(jQuery);

Sorularınızı yorumda belirtebilirsiniz.

Herkese iyi çalışmalar

Css responsive tablo yapımı

Ders için biraz geç kalsakta kenarda durmasının bir sakıncası yoktur. Responsive tasarımlarda en çok zorlanılan konulardan biride tabloların responsive yapıya uydurulmasıdır. İnternette bunla ilgili örnekler var. Bir örnekte ben yayınlamak istedim. Css kodları içinde açıklama satırları mevcuttur. İnternet explorer yani edge hariç ve mobil tarayıcılarda dahil bütün tarayıcılar sorunsuz çalışmaktadır.

Css kodlarımız:

.responsive-table { 
width: 100%; 
border-collapse: collapse; 
}
/* Bir satırı renklendirip sonraki satırı renklendirmiyoruz */
.responsive-table tr:nth-of-type(odd) { 
background: #f3f3f3; 
}
.responsive-table th { 
background: #333; 
color: white; 
font-weight: bold; 
}
.responsive-table td, .responsive-table th { 
padding: 6px; 
border: 1px solid #ccc; 
text-align: left; 
}    


@media 
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px)  {

    /* Tablo elemanlarının tablo özelliklerini korumalarını sağlıyoruz */
    .responsive-table table, 
    .responsive-table thead, 
    .responsive-table tbody, 
    .responsive-table th, 
    .responsive-table td, 
    .responsive-table tr { 
        display: block; 
    }
    
    /* Kolon başlıklarını satırın tablo özelliğini koruması için position ablosute yaparak top ve left değerilerini eksi değer olarak veriyoruz */
    .responsive-table thead tr { 
        position: absolute;
        top: -9999px;
        left: -9999px;
    }
    
    .responsive-table tr { margin-bottom:10px;border-bottom: 1px solid #ccc; }
    
    /* td elemanına position:relative vererek td içinde kullanacağımız before nesnesinin taşmasını önlüyoruz. */
    .responsive-table td { 
        border-bottom: none; 
        position: relative;
        padding-left: 40%; 
    }
    
    /* td içeriğinin başına içerik alanı ekliyoruz */
    .responsive-table td:before { 
        position: absolute;

        /* Genişlik ve konumunu ayarlıyoruz */
        top: 0px;
        left: 0px;
        width: 30%; 
        padding: 0 10px 0 5px; 
        line-height: 31px;
        white-space: nowrap;
        background-color:#333;
        color:#fff;
    }
    
    
    /* 
        Oluşturduğumuz before alanına tablo başlıklarını ekliyoruz 
        nth-of-type parametresi ile kaçıncı td elementine ekleneceğini seçebiliriz
        her satır içindeki td elemanları ayrı bir küme olarak alındığından bir kere td:nth-of-type(x) şeklinde tanımlamanız yeterlidir
        son td elemanına geldiğinde sonraki satıra geçip tekrar ilk elemandan eklemeye başlayacaktır
    */
    .responsive-table td:nth-of-type(1):before { content: "Marka"; }
    .responsive-table td:nth-of-type(2):before { content: "Model"; }
    .responsive-table td:nth-of-type(3):before { content: "Fiyat"; }
}

Tablo kodlarımız:


    <table class="responsive-table">
        <thead>
        <tr>
            <th>Marka</th>
            <th>Model</th>
            <th>Fiyat</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>Apple</td>
            <td>İphone 5</td>
            <td>4000 TL</td>
        </tr>
        <tr>
            <td>Apple</td>
            <td>İphone 10</td>
            <td>6500 TL</td>
        </tr>
        <tr>
            <td>Samsung</td>
            <td>J7</td>
            <td>990 TL</td>
        </tr>
        </tbody>
    </table>

Önizleme

PHP domain bilgilerini yazdırma

Php’de domain, ns, mx, txt vb. diğer sorgulamaları dns_get_record fonksiyonu ile yapabilirsiniz. Bu işlem için sunucudan ayrı bir izin vs. gerekmiyor. Direk fonksiyon kullanılabilir durumda.

Fonksiyon üzerinden  DNS_A, DNS_CNAME, DNS_HINFO, DNS_MX, DNS_NS, DNS_PTR, DNS_SOA, DNS_TXT, DNS_AAAA, DNS_SRV, DNS_NAPTR sorgularını yapabilirsiniz.  Domain hakkında tüm bilgileri almak için sadece domain adını yazıyoruz. Eğer kayıt yoksa ise boş array döndürecektir.

$domain = dns_get_record("fatihkiziltoprak.com");
echo "<pre>";
print_r($domain);
echo "</pre>";

Sadece istediğimiz değeri döndürmesi için ikinci parametreyi yazıyoruz. Mx kaydını almak istediğim için DNS_

$domain = dns_get_record("fatihkiziltoprak.com",DNS_MX);
echo "<pre>";
print_r($domain);
echo "</pre>";

İşe yarar basit bir fonksiyon olduğu için paylaşmak istedim.

Daha fazla bilgi için aşağıdaki adresi ziyaret edebilirsiniz.
http://php.net/manual/tr/function.dns-get-record.php

PHP ajax istek doğrulaması

Sitedeki ajax isteklerine önlem alınmaz ise adres çubuğuna yazarak istekte bulunulabilir. Bu gibi durumlar bazen çok sıkıcı olabilir. Ancak php’de bunun içinde düşünülen bir parametre bulunmaktadır. Önemli bir nokta bazı js kütüphaneleri ajax istediğinde HTTP_X_REQUESTED_WITH değerini göndermiyor. Kullandığınız kütüphaneye göre bu fonksiyonu kullanabilirsiniz. En çok kullanılan jquery kütüphanesi desteklemektedir. Aşağıdaki kodu ajax istediğinin yapıldığı sayfaya ekleyerek kontrol sağlayabilirsiniz. HTTP_X_REQUESTED_WITH parametresi isteğin yapılıp yapılmadığına göre 1 yada 0 değerini döndürmektedir.

 


function isXmlHttpRequest(){
    $header = isset($_SERVER['HTTP_X_REQUESTED_WITH']) ? $_SERVER['HTTP_X_REQUESTED_WITH'] : null;
    return ($header === 'XMLHttpRequest');
}


if(!isXmlHttpRequest()){
    echo 'Ajax isteği gönderilmedi';
}else{
    echo 'Ajax isteği gönderildi';
}