ile

PHP ile şablon oluşturalım ve dosyadan başka dosya nasıl çağırılır anlayalım

Önceki yazıda dediğimiz gibi, her sayfada tekrar eden elemanları tek tek değiştirmek 10 sayfalık bir sitede eziyet gibi birşeyken, 1000 sayfalık sitede imkansız gibi birşey. Kodların sürekli tekrar edilmesini engellemek ve yeniden kullanmak, gerektiğinde tek bir dosyadan binlerce dosyayı değiştirebilmek için PHP yardımımıza koşacak.

Peki bunu nasıl yapacağız? Bunun için 5 adet dosyaya ihtiyacımız var.

  1. Header.php Üstbilgi bölümlerini tutacağımız bölüm. İçeriğe kadar olan bölümdeki etiketleri burada tutacağız.
  2. Footer.php Altbilgi bölümlerini tutacağımız bölüm.
  3. Sidebar.php Yanbilgi olarak tuttuğumuz, sayfa ile içerik olarak bağlantısı olmayan bilgileri tuttuğumuz bölüm.
  4. Index.php Bütün içerik ve ihtiyacımız olan sayfaları tuttuğumuz bölüm
  5. page.php

Şimdilik index.php’yi anasayfa olarak kullanabiliriz. Diğer sayfalarda da header, footer ve sidebar dosyalarını çağırabiliriz. Şu anda herhangi bir içerik yönetim sistemi veya ajax çağrısı kullanmadığımız için şimdilik bunu böyle yapalım.

Şimdi her sayfada aynı olan header dosyasını görelim:


<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <meta name="description" content="Kızılyıldız İstanbul, Sirkeci'de faaliyet göstermekte olan tasarıma önem veren yenilikçi matbaa şirketi. Başlıca ürünlerimiz: Davetiye, Ajanda, Poster ve El ilanı"/>
    <meta name="keywords" content="kızılyıldız, kızıl, yıldız, matbaa, baskı, ajanda, davetiye, poster, ilan, istanbul, sirkeci"/>
    <title>Kızılyıldız Matbaacılık A.Ş.</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/custom.css" rel="stylesheet">
</head>
<body>
    <div id="sayfa" class="container"><!-- Twitter Bootstrap için ekledik-->
        <header class="row">
            <div id="marka">
                <div id="logo" class="span1">
                    <img src="img/logo.jpg" alt="Logo" />
                </div>
                <hgroup class="span3">
                    <h1>Kızılyıldız</h1>
                    <h4>Matbaacılık A.Ş.</h4>
                </hgroup>
            </div>
            <div id="baglantilar" class="span8 navbar">
                <nav class="navbar-inner">
                    <ul class="nav">
                        <li><a href="index.html">Ana Sayfa</a></li>
                        <li><a href="hakkimizda.html">Hakkımızda</a></li>
                        <li><a href="urunler.html">Ürünlerimiz</a></li>
                        <li><a href="duyurular.html">Duyurular</a></li>
                        <li><a href="kurumsal.html">Kurumsal</a></li>
                        <li><a href="iletisim.html">İletişim</a></li>
                    </ul>
                </nav>
            </div>
        </header>
<section>

İşte her sayfada aynı olan üst bilgi kısmı. Altbilgi yani footer.php’nin kodlarını da görelim:


</section>
<footer>
    <div class="row">
    <nav class="span3 offset1">
        <div class="kutuyazisi footerbox">
            <h4>Bağlantılar</h4>
            <ul id="altListe">
                <li><a href="anaSayfa.html">Ana Sayfa</a></li>
                <li><a href="hakkimizda.html">Hakkımızda</a></li>
                <li><a href="kurumsal.html">Kurumsal</a></li>
            </ul>
        </div>
    </nav>
    <div class="span4">
        <div class="kutuyazisi footerbox">
            <h4>Adres:</h4>
            Kızılyıldız Matbaacılık A.Ş.
            Denizler Mah.
            Eren Sok. No:68
            Sireci, Fatih 34110
            İstanbul TÜRKİYE
        </div>
    </div>
    <div class="span3">
        <div class="kutuyazisi footerbox">
            <h4>Telefon</h4>
            Tel: +90 212 444 19 17
            Fax: +90 212 444 19 05
        </div>
    </div>
    </div>
    <div class="row">
    <div class="span12">
        <div class="footer-floor">
            <div id="copyright">Her Hakkı Saklıdır. 2012 Kızılyıldız Matbaacılık A.Ş.</div>
        </div>
    </div>
    </div>
</footer>
</div>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>

Şimdilik her sayfada aynı olan bir sidebar kısmı kullanmıyoruz. Ama ileride kullanmak istersek lazım olabilir. Kullanmadığımız için burayı geçiyorum.

Index.php dosyamız anasayfadaki bilgileri içerecek. Aslında bundan sonra tüm diğer sayfalarda section etiketinin altına ve üstüne tek bir php kodu yazacağız.

Yazacağımız sihirli kelime include_once(“header.php”). PHP’de include öntanımlı fonksiyonu başka bir dosyanın içindekileri çağırabilmemize yarıyor. İnclude_once ise bu işlemi tek bir sefer yaptığmızdan emin olmamızı sağlıyor. Aynı sayfada iki tane header yani üstbilgi çıkmasının yaratacağı çirkin görüntüyü bir düşünsenize.

Örneğin index.php’nin son haline bakalım.


<?php
include_once("header.php");
?>
<div id="anaResim"><img src="img/anaResim.jpg" alt="Ana Resim"/></div>
<div id="mesaj">
    <div class="row">
        <div class="span12">
            <h1><strong>İstanbul'daki en hızlı, en kaliteli ve en uygun fiyatlı matbaayı mı arıyorsunuz?</strong></h1>
        </div>
    </div>
    <div class="row">
        <div id="inceleyin" class="span4 offset8">
            <a class="btn btn-primary btn-large"  href="urunler.html">Ürünlerimizi inceleyin</a>
        </div>
    </div>
</div>
<div id="bilgiler" class="row">
    <article id="neyapiyoruz" class="span4">
        <div class="kutuyazisi">
            <h3>Ne yapıyoruz?</h3>
            <p>İstanbul'dasınız, davetiye, broşür, poster veya el ilanı'na ihtiyacınız var. Hem de 3 günde. Fiyatı da biraz uygun olsun ama sonuçlar temiz mi olsun? O zaman doğru yere geldiniz.</p>
        </div>
    </article>   
    <article id="neredeyiz" class="span4">
        <div class="kutuyazisi">
            <h3>Neredeyiz?</h3>
            <p>İstanbul'un tarihi merkezi Sirkeci'deyiz. Ama mesafeler sorun değil. Siz bize gelemezseniz, biz size geliriz. Siparişim ayağıma gelsin diyorsanız, o da olur. </p>
        </div>
    </article>  
    <article id="farkımız" class="span4">
        <div class="kutuyazisi">
            <h3>Bizim farkımız</h3>
            <p>Kesin kalite garantisine ihtiyacınız varsa, ücretsiz motorsikletli kuryeyle baskı işlerim gönderilsin diyorsanız, fiyatlar uygun olsun ama fazla da gecikmesin 3 gün içinde elimde olsun istiyorsanız, aradığınız yer burası. </p>
        </div>
    </article>  
</div>
<?php
include_once("footer.php");
?>

Yeni dosyamızı oluşturduk. Şimdi bu http://127.0.0.1/phpEgitimi2.1/index.php adresinden çağırırsanız tam olarak karşınıza şu sayfanın gelmesi lazım.

Sayfa bu haliyle eksiksiz karşınıza geldiyse, tebrikler. İlk PHP websitesi şablonunuzu oluşturdunuz. Artık üstteki bir linki değiştirmek için tekrar tekrar sayfalarca html dosyasını düzeltmenize gerek yok.

Şimdi bir işlem daha yapabiliriz. index.php ve diğer sayfalarda bu include işlemini tekrarlamak yerine, index.php ye göndereceğimiz bir değişkenle bu işi çözebiliriz. Örneğiin: http://127.0.0.1/phpEgitim2.1/index.php?sayfa=anaSayfa gibi bir ifadeyle tekbir defada tüm sayfaları çağırabiliriz.

Şimdi tekrar index.php kodumuza bakalım


<?php
include_once("header.php");
if(isset($_GET["sayfa"]))
{
    $sayfa = $_GET["sayfa"].".php";
}
else
{
    $sayfa = "anasayfa.php";
}
include($sayfa);
include_once("footer.php");
?>

Burada ilk önce header.php’yi çağırdık. Eğer url vasıtasıyla sayfa adlı değişken sayfamıza geldiyse çağır dedik. Eğer yoksa doğrudan anasayfaya yönlendir dedik.

Mesela olmayan bir sayfayı açmaya çalışırsak ne olur?

Bu sayfada hata mesajı aldık. Çünkü php yorumlayıcısı o sayfayı sunucuda bulamadı. Ancak sayfayı aşağı kaydırdığımızda footeri görebiliriz. Bu include fonksiyonu kullanmamızdan kaynaklanıyor. İnclude dosyayı bulamasa bile hata verir ama kodu okumaya devam eder. Eğer require veya require_once fonksiyonunu kullanmış olsaydık, sayfa hata verecekti ve çalışmayı durduracaktı. Dolayısıyla biz de footer’i göremeyecektik, çünkü geri kalan komutlar çalıştırılmayacaktı.

Almamız gereken bir güvenlik önlemi var. Sonuçta dışarıdan bir değişkenin, dosya sistemimize erişmesini sağlıyoruz. Tüm sunucu yapımızın (../../..) karakterleri kullanılarak bir üst klasördeki dosyaların veya dizinlerin açığa çıkmasını istemiyorsak, sayfa değişkeninin içindeki . ve / karakterlerini yoketmemiz lazım. Bunun için PHP’nin realpath() fonksiyonunu kullanmalıyız. realpath($sayfa) ifadesi ../../dizin gibi bir girdiden /dizin çıktısını her şartta üreterek bizi üst dizinler konusunda endişelenme derdinden de kurtaracak.

Hatta en doğrusu biz content adında bir klasör oluşturarak içerik dosyalarımızı oradan çağıralım. Bunları yaptığımızda index.php dosyamızın son hali şu şekilde olmalı:


<?php
include_once("header.php");
if(isset($_GET["sayfa"]))
{
    $sayfa = preg_replace('/[^a-zA-Z0-9_\.\-&=]/', '', $_GET["sayfa"]);
    //realpath ile üst dizinlere girişi önleyelim
    $sayfa = realpath("content/".$sayfa.".php");
    //preg_replace ile a-ZA-Z0-9_.-&= karakterleri harici herşeyi yokedelim.
}
else
{
    $sayfa = "content/anasayfa.php";
}
include($sayfa);
include_once("footer.php");
?>

$sayfa = preg_replace(‘/[^a-ZA-Z0-9_\.\-&=]/’, ”, $sayfa); Koduna dikkat ettiniz mi? Bu tarz güvenlik olaylarında biraz paranoyak olmakta yarar var. Sonuçta kodumuza veri alıyoruz ve dosya sisteminde kullanıyoruz. Biz de bir dosya adında olamayacak tırnak işareti gibi güvenlik açıklarına yolaçabilecek tüm karakterleri aradık ve temizledik. Bu da bize ekstra güvenlik sağladı. preg_replace fonksiyonu ile ilgili ek bilgi vermek gerekirse, bu verdiğimiz kurallı ifade (regex)’e göre arayıp değiştirme yapmaya yarıyor. Kurallı ifade ne diyecek olursanız o da ayrı bir kitap konusu. Merak ederseniz araştırmayı size bırakıyorum. Ama kısaca belli koşullara göre arama yapmamızı sağlayan ifadeler diyelim. Şimdilik bu kadarını bilsek yeterli. İleride başka yerlerde lazım olduğunda daha çok detaya gireriz.

Son olarak yapmamız gereken birşey var. Header.php içindeki linkleri yeni hallerine göre yani index.php?sayfa=icerik olarak değiştirelim.

<div id="baglantilar" class="span8 navbar">
    <nav class="navbar-inner">
        <ul class="nav">
            <li><a href="?sayfa=anasayfa">Ana Sayfa</a></li>
            <li><a href="?sayfa=hakkimizda">Hakkımızda</a></li>
            <li><a href="?sayfa=urunler">Ürünlerimiz</a></li>
            <li><a href="?sayfa=duyurular">Duyurular</a></li>
            <li><a href="?sayfa=kurumsal">Kurumsal</a></li>
            <li><a href="?sayfa=iletisim">İletişim</a></li>
        </ul>
    </nav>
</div>

İşte şimdi elimizde temiz ve güvenli bir içerik yönetim sistemine doğru evrimleşecek bir yazılım var.

Şimdilik bu kadar. Sonraki yazıda form ile veri girişi konusuna geri döneceğiz.

Dayanışmayla!
Meraklı Bilişimci

Yorumla

Yorum

  1. Merhabalar yeni başlayan bir kullanıcı olarak yazdıklarınız gayet anlaşılır ve net olmuş fakat aklıma takılan bir soru var. Tittle kısmını nasıl çözebiliriz Örnek veriyoruz XXX – Anasayfa hakkımzdaya girince XXX- Hakkımızda gibi şablon yönteminde bunu tam çözemedim bu konuda bir fikir verebilir misiniz ?

  2. Merhabalar yeni başlayan bir kullanıcı olarak yazdıklarınız gayet anlaşılır ve net olmuş fakat aklıma takılan bir soru var. Tittle kısmını nasıl çözebiliriz Örnek veriyoruz XXX – Anasayfa hakkımzdaya girince XXX- Hakkımızda gibi şablon yönteminde bunu tam çözemedim bu konuda bir fikir verebilir misiniz ?

  3. Aslında şablon oluştururken İNC kullanmak daha mantıklı şuanda dünya çapında yeni yenide olsa yaygınlaşmaya başladı bunun hakkında bir makale yazmayı düşünüyorum aslında ama vaktim olmadığından yazmıyorum belki ilerleyen konularınızda buna yer verirsiniz 🙂