v2.5.2
Giriş yap

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

yosemitesyo
318 defa görüntülendi

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

ebykdrms
600 gün önce

PHP kullanırsan sitenin header, footer gibi bölümlerini ayrı dosyalara ayırabilir ve sayfalarına bu dosyaları çağırabilirsin. Böylece bu dosyalarda yaptığın değişiklikler tüm sayfalara uygulanmış olur.
Örneğin:
header.php:

<header>
    <img src="logo.png" />
    <nav>
        <a>Anasayfa</a>
        <a>Hakkımızda</a>
        <a>İletişim</a>
    </nav>
</header>

footer.php:

<footer>
    <nav>
        <a>Sıkça Sorulan Sorular</a>
        <a>Bilgilendirme Metni</a>
        <a>Telefon: +90 123 456 78 90</a>
        <a>E-posta: [email protected]</a>
    </nav>
</footer>

Tüm sayfalarda aynı olan header ve footer bölümlerini bu şekilde 2 dosyaya ayırdım. Şimdi bu header ve footer'a sahip sayfalarımda header ve footer gelen yerleri silip yerlerine bu dosyaları çağırabilirim.
anasayfa.php

<html>
    <head>
        <title>Ana Sayfa</title>
    </head>
    <body>
        <?php include("header.php"); ?>
        <section id="content">
            <h1>Merhaba Dünya</h1>
            <p>Burası ana sayfanın içeriği</p>
        </section>
        <?php include("footer.php"); ?>
    </body>
</html>

Aynı şekilde hakkımızda sayfası:
hakkimizda.php

<html>
    <head>
        <title>Hakkımızda</title>
    </head>
    <body>
        <?php include("header.php"); ?>
        <section id="content">
            <img src="hakkimizda-banner.png" />
            <h1>Biz Kimiz?</h1>
            <p>lorem ipsum dolor sit amet</p>
        </section>
        <?php include("footer.php"); ?>
    </body>
</html>

Böylece hem sayfalarda koca koca yer tutan header ve footer kısımlarını birer satıra indirmiş olduk, hem de mesela header.php dosyasında yapacağımız bir değişikliği bu dosyanın çağırıldığı tüm sayfalarda aktif edebiliyor olduk.
Son kullanıcı sayfa kaynağını görüntülediğinde PHP kodlarını görmez. Çünkü sunucu, sayfayı son kullanıcıya göndermeden önce dosyaları birleştirir. Yani son kullanıcı mesela ana sayfanın kaynağını görüntülemek istediğinde şununla karşılaşır:

<html>
    <head>
        <title>Ana Sayfa</title>
    </head>
    <body>
        <header>
            <img src="logo.png" />
            <nav>
                <a>Anasayfa</a>
                <a>Hakkımızda</a>
                <a>İletişim</a>
            </nav>
        </header>
        <section id="content">
            <h1>Merhaba Dünya</h1>
            <p>Burası ana sayfanın içeriği</p>
        </section>
        <footer>
            <nav>
                <a>Sıkça Sorulan Sorular</a>
                <a>Bilgilendirme Metni</a>
                <a>Telefon: +90 123 456 78 90</a>
                <a>E-posta: [email protected]</a>
            </nav>
        </footer>
    </body>
</html>

Böylece bir back-end dili olarak PHP'ye de giriş yapmış olursun.
PHP'yi kurmak da öğrenmek de (diğer back-end dillerine göre) kolaydır.

1) https://www.apachefriends.org/tr adresinden bilgisayarına XAMPP'i kurarsın. Kurulumda yardımcı olması için şu videonun ilk 2 dakikasını da izleyebilirsin: https://www.youtube.com/watch?v=mg-588VDyuI
2) XAMPP kontrol panelinden Apache sunucusunu aktif ettiğinde artık bilgisayarın bir sunucu haline gelir.
3) C:/xampp/htdocs senin sunucunun kök klasörü. Web sitelerini burada barındıracaksın. Buraya mesela testsitem diye bir klasör aç. İçine de, senin üzerinde çalıştığın web sitesinin html/css/js dosyalarını at.
4) Tarayıcını açıp localhost/testsitem adresine gittiğinde html web sitenin dosyalarına erişebildiğini göreceksin. (Varsayılan olarak index.html sayfası açılacaktır)
5) Tüm html uzantılı sayfalarının uzantılarını php olarak değiştir. Örn: index.html > index.php olsun.
6) Tüm sayfalardaki linkleri de yeni dosya adına göre düzenlemen gekerecek. Örn: <a href="hakkimizda.html">Hakkımızda</a> link'i, dosya uzantısı değiştiği için dosyayı bulamayacaktır. Buradaki html uzantısını da php olarak değiştir.

Böylece web siten tamamen PHP alt yapısına taşınmış oldu. Bundan sonraki tüm web sitelerini bu htdocs klasörü altında klasörler açarak geliştirebilirsin. Yukarıda verdiğim örnekteki gibi siteni bileşenlerine ayırıp birleştirebilirsin.
Başlangıçta bunlar "ooo çok iş" dedirtebilir. Ama 1-2 projende ısrar edip PHP kullanırsan aslında işini çok rahatlattığını göreceksin. Derinlemesine PHP bilmede de gerek yok. Aslında tek kullandığın komut <?php include("header.php") ?> şeklindeki tek satırlık komut.

Not: Sen PHP'yi hiç kullanmamış olabilirsin veya PHP'yi iyi biliyor da olabilirsin. Ben bu konuda soru işaretleri olanlara fikir vermek için bu kadar ayrıntılı bir cevap yazıyorum. :)

Vue, React gibi bir yapı kullanmak basit projelerde yorucu olur çünkü modüllerin internetten inmesini beklemek, güncellenen sürümlerin henüz güncellenmemişlerle uyumsuzluğu, projenin çalışmak için derlenmeye ihtiyaç duyması...
Bilgisayarına apache sunucusu kurarak php ile site geliştirmek her türlü bilgisayarına nodejs sunucusu kurup react ile site geliştirmekten daha kolay ve hızlıdır.
Sen de muhtemelen birbiriyle pek benzerliği olmayan farklı farklı siteleri hızlıca geliştirebilmek/düzenleyebilmek istiyorsun. Önerim: PHP.

Tabi tüm dosya uzantılarındaki ve dosya içeriklerindeki html'nin php'ye çevrilmesi zaman alıcı. Ama PHP'de biraz ilerlersen veya Chat GPT'den yardım alırsan bu değişikliği senin için otomatik olarak yapan bir php dosyası oluşturabilirsin. :) Bu dosyayı çağırdığında PHP senin için tüm dosya uzantılarını ve linkerde geçen .html ifadelerini php'ye çevirir. Nitekim, PHP candır. :)