Statik site yazarken bir kütüphane kullanmalı mı?
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
Soru hatalı mı? 👎
Eğer sorunun kurallara aykırı olduğunu düşünüyorsanız lütfen bize bildirin!
Cevaplar (3)
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. :)
@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>
Çok teşekkür ederim hocam. Uzun uzun açıklamışsınız. Daha önce hiç php kullanmadım ama artık kullanmaya başlasam iyi olacak. Peki hocam php kullanarak bir tane navbar tanımladık. Sonra da onu çağırıyoruz falan güzel. Peki bu componentvari yapıya prop geçebilmem mümkün mü? Şu yüzden soruyorum. Bütün sayfalarım aynı dizinde değil. Bazıları bir klasörün içindeki alt klasörlerde örneğin. Bu nedenle navbar'ı çağırdığımda a etiketlerinin yapacağı yönlendirmeleri de, yani href kısmına yazacaklarımı da dizinlerin farklı olması nedeniyle değiştirmem gerekecek. Bu konuda ne yapabilirim?