v2.5.2
Giriş yap

Statik site yazarken bir kütüphane kullanmalı mı?

yosemitesyo
302 defa görüntülendi
3

Vanilla html, css ve js kullanarak eşe dosta statik web siteleri yapıyorum. Statik olduğu için de herhangi bir kütüphane kullanmıyorum vue vesaire gibi. Yalnız statik diyorum ama çok sayıda html sayfalarından oluşuyor ve tekrar eden yapıları da çok oluyor. Böyle olunca da insan bir şeyi bir kere tanımlayıp ihtiyacı olduğunda çağırmak ve prop geçerek özelleştirebilmek istiyor. Sizce ne yapayım? Siz bu türden siteleri nasıl yazıyorsunuz? Jquery, bootstrap filan hiçbir şey kullanmıyorum. Bayağı dümdüz html, css ve js yazıyorum :D

css html javascript
ebykdrms
569 gün önce

@yosemitesyo evet, belli bir sayfadan header ve footer'a veya include edeceğin sayfalara PHP değişkenleriyle veri aktarman mümkün ve oldukça basit. Buradaki temel mantığı anladığında bunu kolaylıkla yapabileceksin.
Bir örnek üzerinden adım adım gidelim.
1) C:/xampp/htdocs'a (yerel sunucunun kök dizinine) orneksitem.com adında bir klasör oluştur.
2) XAMPP Kontrol Paneli'ni aç ve Apache sunucunu başlat.
3) C:/xampp/htdocs/orneksitem.com klasörüne index.php adında bir dosya oluştur.
4) index.php dosyasına örnek bir html sayfa oluştur:

<!DOCTYPE html>
<html>
    <head>
        <title>Örnek Sitem</title>
        <meta charset="utf-8" />
        <style>
            * { margin:0; padding:0; box-sizing:border-box; }
            html, body { height:100%; }
            body { font-family:Arial; font-size:13px; }
            a { text-decoration:none; color:#c00; }
            body > header { display:flex; height:70px; flex-direction:row; align-items:center; justify-content:space-between; border-bottom:1px solid #ccc; }
            body > header > img { height:50px; }
            body > header > nav { display:flex; flex-direction:row; align-items:center; }
            body > header > nav > a { display:block; padding:8px 16px; }
            #content { display:flex; min-height:calc(100vh - 100px); flex-direction:column; align-items:center; justify-content:center; }
            #content > p { text-align:center; }
            body > footer { display:flex; height:30px; align-items:center; justify-content:center; }
        </style>
    </head>
    <body>
        <header>
            <img src="images/logo.png" />
            <nav>
                <a href="anasayfa">Ana Sayfa</a>
                <a href="ben-kimim">Ben Kimim?</a>
            </nav>
        </header>
        <section id="content">
            <h1>Ana Sayfa</h1>
            <p>Şu an ana sayfadasın</p>
        </section>
        <footer>
            Bu site <a href="https://prototurk.com/@yosemitesyo">yosemitesyo</a> tarafından oluşturuldu.
        </footer>
    </body>
</html>

5) C:/xampp/htdocs/orneksitem.com klasöründe ben-kimim.php adlı bir dosya da oluştur:

<!DOCTYPE html>
<html>
    <head>
        <title>Örnek Sitem</title>
        <meta charset="utf-8" />
        <style>
            * { margin:0; padding:0; box-sizing:border-box; }
            html, body { height:100%; }
            body { font-family:Arial; font-size:13px; }
            a { text-decoration:none; color:#c00; }
            body > header { display:flex; height:70px; flex-direction:row; align-items:center; justify-content:space-between; border-bottom:1px solid #ccc; }
            body > header > img { height:50px; }
            body > header > nav { display:flex; flex-direction:row; align-items:center; }
            body > header > nav > a { display:block; padding:8px 16px; }
            #content { display:flex; min-height:calc(100vh - 100px); flex-direction:column; align-items:center; justify-content:center; }
            #content > p { text-align:center; }
            body > footer { display:flex; height:30px; align-items:center; justify-content:center; }
        </style>
    </head>
    <body>
        <header>
            <img src="images/logo.png" />
            <nav>
                <a href="anasayfa">Ana Sayfa</a>
                <a href="ben-kimim">Ben Kimim?</a>
            </nav>
        </header>
        <section id="content">
            <h1>Ben Kimim?</h1>
            <p>Kendimi tanıtan içeriklerim burada olacak</p>
        </section>
        <footer>
            Bu site <a href="https://prototurk.com/@yosemitesyo">yosemitesyo</a> tarafından oluşturuldu.
        </footer>
    </body>
</html>

6) C:/xampp/htdocs/orneksitem.com klasörüne images adlı bir klasör oluştur ve içine logo.png adlı bir görsel koy.
7) Tarayıcında http://localhost/orneksitem.com adresine git. Böylece tarayıcın, yerel sunucunun içindeki orneksitem.com klasöründeki varsayılan dosyaları arayacak. index.html dosyası varsayılan bir dosya olduğu için Ana Sayfa başlıklı sayfa görüntülenecek.
8) Görüldüğü gibi 2 sayfada da ortak bölümler var. Bunları parçalara ayırarak yönetebilmek istiyoruz. <head> tag'ı için ayrı, <header> tag'ı için ayrı birer dosya oluşturacağız.
9) C:/xampp/htdocs/orneksitem.com klasörü içine bilesenler adlı bir klasör oluştur.
10) C:/xampp/htdocs/orneksitem.com/bilesenler klasörüne head.php adlı bir dosya oluştur ve içine index.php dosyasındaki <head> tag'ının içindekileri kopyala-yapıştır:

<title>Örnek Sitem</title>
<meta charset="utf-8" />
<style>
    * { margin:0; padding:0; box-sizing:border-box; }
    html, body { height:100%; }
    body { font-family:Arial; font-size:13px; }
    a { text-decoration:none; color:#c00; }
    body > header { display:flex; height:70px; flex-direction:row; align-items:center; justify-content:space-between; border-bottom:1px solid #ccc; }
    body > header > img { height:50px; }
    body > header > nav { display:flex; flex-direction:row; align-items:center; }
    body > header > nav > a { display:block; padding:8px 16px; }
    #content { display:flex; min-height:calc(100vh - 100px); flex-direction:column; align-items:center; justify-content:center; }
    #content > p { text-align:center; }
    body > footer { display:flex; height:30px; align-items:center; justify-content:center; }
</style>

11) C:/xampp/htdocs/orneksitem.com/bilesenler klasörüne header.php dosyası ekle ve ana sayfadaki <header> tag'ını olduğu gibi buraya kopyala:

<header>
    <img src="images/logo.png" />
    <nav>
        <a href="anasayfa">Ana Sayfa</a>
        <a href="ben-kimim">Ben Kimim?</a>
    </nav>
</header>

12) Şimdi index.php dosyasında ilgili yerleri silip PHP ile ilgili dosyaları içe aktar:

<!DOCTYPE html>
<html>
    <head>
        <?php include("bilesenler/head.php"); ?>
    </head>
    <body>
        <?php include("bilesenler/header.php"); ?>
        <section id="content">
            <h1>Ana Sayfa</h1>
            <p>Şu an ana sayfadasın</p>
        </section>
        <footer>
            Bu site <a href="https://prototurk.com/@yosemitesyo">yosemitesyo</a> tarafından oluşturuldu.
        </footer>
    </body>
</html>

13) Aynısını ben-kimim.php için de yap:

<!DOCTYPE html>
<html>
    <head>
        <?php include("bilesenler/head.php"); ?>
    </head>
    <body>
        <?php include("bilesenler/header.php"); ?>
        <section id="content">
            <h1>Ben Kimim?</h1>
            <p>Kendimi tanıtan içeriklerim burada olacak</p>
        </section>
        <footer>
            Bu site <a href="https://prototurk.com/@yosemitesyo">yosemitesyo</a> tarafından oluşturuldu.
        </footer>
    </body>
</html>

14) Böylece index ve ben-kimim sayfalarımız oldukça küçüldü ve ortak olan yerleri ilgili dosyalardan çekmiş oldular. Burada önemli nokta şu: PHP sayfayı satır satır ele alıyor. Önce index.php dosyasının ilk satırından okuyarak sayfayı oluşturmaya başlıyor. Satır satır indikten sonra <?php include("bilesenler/head.php"); ?> komutuyla karşılaşıyor. Bu PHP komutunu siliyor ve kendisine verilen dosyayı bulup içindekileri satır satır buraya yazıyor. Sonra bu sayfada kaldığı yerden sayfayı oluşturmaya devam ediyor. Aynı işi diğer include fonksiyonu için de yapıyor. Sayfayı oluşturmayı bitirdiğinde de tamamen PHP kodlarından arındırılmış bir çıktı elde ediyor ve bunu, sayfayı isteyen tarayıcıya gönderiyor.
15) Bu satır satır okuma olayı, bileşenlere veri gönderirken işimize yarayacak. Örneğin head.php dosyasındaki <title>Örnek Sitem</title> yazan satırda, biz hangi sayfadaysak o sayfanın adının yazmasını istiyoruz diyelim. Yani ana sayfada görüntülenecekse index.php dosyasından head.php dosyasına Ana Sayfa yazısını iletmeliyiz. Aynı şekilde ben-kimim.php sayfası oluşturulurken de head.php dosyasına Ben Kimim? ifadesini gönderelim. Bunun için PHP'nin değişkenlerinden yararlanacağız.
16) index.php dosyasının başına PHP tag'larımızı açalım (<?php ile başlar ve ?> ile biter. Bu arada yazan her şey PHP kodudur.) ile bir değişken oluşturalım:

<?php
    $siteBasligi = "Ana Sayfa";
?>
<!DOCTYPE html>
<html>
    <head>
        <?php include("bilesenler/head.php"); ?>
    </head>
    <body>
        <?php include("bilesenler/header.php"); ?>
        <section id="content">
            <h1>Ana Sayfa</h1>
            <p>Şu an ana sayfadasın</p>
        </section>
        <footer>
            Bu site <a href="https://prototurk.com/@yosemitesyo">yosemitesyo</a> tarafından oluşturuldu.
        </footer>
    </body>
</html>

17) Biz index.php dosyasının başında bir değişken oluşturduk. Satır satır okuyup head.php dosyasını sayfaya çağırdığında aslında head.php dosyasının içinde yazan her şeyi buraya yazmış gibi oldu. Bu durumda head.php ile, $sayfaBasligi değişkenine atadığımız değeri okuyabiliriz ve PHP'nin bu değişkendeki değeri ekrana yazmasını isteyebiliriz. Yani head.php dosyasını şu şekilde güncelleyebiliriz:

<title><?php echo $sayfaBasligi; ?></title>
<meta charset="utf-8" />
<style>
    * { margin:0; padding:0; box-sizing:border-box; }
    html, body { height:100%; }
    body { font-family:Arial; font-size:13px; }
    a { text-decoration:none; color:#c00; }
    body > header { display:flex; height:70px; flex-direction:row; align-items:center; justify-content:space-between; border-bottom:1px solid #ccc; }
    body > header > img { height:50px; }
    body > header > nav { display:flex; flex-direction:row; align-items:center; }
    body > header > nav > a { display:block; padding:8px 16px; }
    #content { display:flex; min-height:calc(100vh - 100px); flex-direction:column; align-items:center; justify-content:center; }
    #content > p { text-align:center; }
    body > footer { display:flex; height:30px; align-items:center; justify-content:center; }
</style>

Burada PHP'nin echo komutunu kullanarak değişkendeki değeri komutu verdiğimiz yere yazmasını istedik. Sondaki ; karakteri komutun bittiğini belirtiyor. Bir PHP komutunun bittiğini PHP'ye bu şekilde ifade ediyoruz.
Eğer sadece bir değişkenin değerini ekrana basmak için PHP tag'ları açacaksak PHP'nin bize sunduğu daha kolay bir yol da var. Başlık satırı şöyle de olabilirdi:
<?php echo $sayfaBasligi; ?> yazan yere şu da yazılabilirdi: <?= $sayfaBasligi ?>
18) Evet, ana sayfadan head tag'ına veri iletebildik. Ama ben-kimim.php dosyasında $sayfaBasligi adlı bir değişken oluşturmadık. Bu yüzden ben-kimim sayfasını görüntülemek istersen ya "böyle bir değişken yok" diye hata alırsın ya da <title> tag'ında hiçbir şey yazmaz. Haliyle, head.php dosyasını include ettiğin her sayfada bu değişkeni aynı isimle oluşturman gerekir. Böylece ben-kimim.php dosyan şuna döner:

<!DOCTYPE html>
<html>
    <head>
        <?php $sayfaBasligi = "Ben Kimim?"; ?>
        <?php include("bilesenler/head.php"); ?>
    </head>
    <body>
        <?php include("bilesenler/head.php"); ?>
        <section id="content">
            <h1>Ben Kimim?</h1>
            <p>Kendimi tanıtan içeriklerim burada olacak</p>
        </section>
        <footer>
            Bu site <a href="https://prototurk.com/@yosemitesyo">yosemitesyo</a> tarafından oluşturuldu.
        </footer>
    </body>
</html>

19) Tabi bu tip bir sorundan kurtulmanın başka yolları da var. head.php dosyasında PHP'ye şunu söyleyebilirsin: "Eğer $sayfaBasligi diye bir değişken varsa ekrana bu değişkenin değerini yaz. Yoksa ekrana 'Örnek Sitem' yaz."
Böyle bir kontrol koyduğunda, mesela yarın iletisim.php dosyası oluşturup head.php dosyasını buraya çağırdığında bu değişkeni yazmayı unutsan bile site başlığında Örnek Sitem yazacaktır. Tabi işte böyle böyle PHP dünyasına girmiş oluyorsun... Son olarak head.php dosyasında bu kontrolü nasıl yapacağını da yazıp bitireyim. JS kullanıyorsan if-else yapısını bilirsin. Bilmiyorsan da şimdilik çok üstünde durmana gerek yok. İşte head.php dosyanın son hali:

<title>
    <?php 
        if(isset($sayfaBasligi)) { // Eğer $sayfaBasligi diye bir değişken varsa bu parantezlerin içindeki komutları çalıştır
            echo $sayfaBasligi; // Ekrana $sayfaBasligi değişkenine atanmış değeri yaz.
        }
        else { // Aksi halde bu parantezlerin içindeki komutları çalıştır...
            echo "Örnek Sitem" // Ekrana Örnek Sitem ifadesini bas.
        }
    ?>
</title>
<meta charset="utf-8" />
<style>
    * { margin:0; padding:0; box-sizing:border-box; }
    html, body { height:100%; }
    body { font-family:Arial; font-size:13px; }
    a { text-decoration:none; color:#c00; }
    body > header { display:flex; height:70px; flex-direction:row; align-items:center; justify-content:space-between; border-bottom:1px solid #ccc; }
    body > header > img { height:50px; }
    body > header > nav { display:flex; flex-direction:row; align-items:center; }
    body > header > nav > a { display:block; padding:8px 16px; }
    #content { display:flex; min-height:calc(100vh - 100px); flex-direction:column; align-items:center; justify-content:center; }
    #content > p { text-align:center; }
    body > footer { display:flex; height:30px; align-items:center; justify-content:center; }
</style>
0
#012527
Tüm Cevapları Göster (3)