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';
}

PHP dosyalarda gereksiz boşluk

Tam bir başlık bulamadım. Ama sorunu yaşayan arkadaşlar ne demek istediğimi bilecektir. Özellikle ftp’de dosya üzerinde işlem yapıp kaydettikten sonra sayfa içinde kodlar arasında görünmeyen ama site arayüzüne etki eden boşluk oluşmaktadır. Dosyayı Notepad++ editöründe açtıktan sonra Encoding (Kodlama) menüsünden Encode in UTF-8 without BOM (UTF-8 bomsuz olarak) seçeneğini seçip dosyayı ftp’ye yükleyiniz.

Htaccess ile https ve www yönlendirme

Kullanıcıların bizim belirlediğimiz parametreler ile siteye girmesi işin aşağıdaki kodları .htaccess dosyasına ekleyiniz.

www yönlendirme için

RewriteEngine On
RewriteCond %{HTTP_HOST} !^www\.siteadresi\.com
RewriteRule (.*) http://www.siteadresi.com/$1 [R=301,L]

https yönlendirme için

RewriteEngine On
RewriteCond %{HTTPS} off
RewriteRule (.*) https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]