PHP ile Sayfa Stilini Değiştirmek
Haziran 15, 2008 tarihinde HTML-XHTML-CSS, PHP kategorisine eklendi | 2 yorum
Bazı sitelerde rastlamışsınızdır; sitenin renklerini, yazı tipini, yazı karakter büyüklüğünü vs. ziyaretçi kendi tercihlerine göre değiştirme olanağına sahiptir. Bu tür bir uygulamayı PHP ile yapmak bir süredir aklımdaydı, bugün fırsat buldum ve denedim. Öncelikle işlemlerin ana başlıklarını ve kodlarını vermek istiyorum, ardından kodların tamamını indirebilir ve TEST bağlantısından çalışan sayfayı deneyebilirsiniz.
Uygulama için iki adet dosyamız bulunuyor. Birincisi ziyaretçilerin tercihlerine göre ayarlayabilecekleri sayfamız (örnekte bu sayfayı index.php olarak adlandırdım), diğeri ise tercihlerin işleneceği theme.php, yine tercihinize göre farklı bir isim verebilirsiniz. Örneğimde kullanıcıya sunulan seçenekler; yazı karakter tipini değiştirme, yazı rengini değiştirme, kenarlık renklerini değiştirme ve başlık arka plan rengini değiştirme.
index.php
Bu dosya klasik giriş sayfamız. Yani, <html> etiketi ile başlayan, <head> ve <body> ile devam eden ana giriş sayfası. Sayfanın ilk kodları önemli, burada kullanıcı tercihlerini alacağımız çerez bilgisini okuyoruz ve stilde kullanacağımız değişkenlere yüklüyoruz. Aşağıdaki gibi;
<?php
if (isset($_COOKIE['useroption'])) {
// Çerezden bilgiler alınıyor…
$userOptions = $_COOKIE['useroption'];
$userOptions = explode(’:', $userOptions);
$borderColor = $userOptions[0];
$headerColor = $userOptions[1];
$fontColor = $userOptions[2];
$fontFamily = $userOptions[3];
} else { // Çerez boşsa değişkenlere temel ayarlar yükleniyor…
$borderColor = ‘#000000′;
$headerColor = ‘#000000′;
$fontColor = ‘#0000000′;
$fontFamily = ‘Arial’;
}
?>
Evet, çerezden aldığımız bilgileri değişkenlere yükledik, şayet çerez boş ise temel ayarları, başlangıç ayarlarını yükledik. Değişkenleri kullanacağımız stil bölümü index.php de <head><head> etiketleri arasında bulunuyor. Sayfalarınızın dışarıdan bağlanılan bir stil sayfası bulunabilir, bu durumda yapmanız gereken, sadece tercihlere göre değişecek stil bilgilerinizi buraya taşımak olacaktır. Örneğimde <style><style> aralığı şu şekilde;
<?php echo ”
<style>
body {
background-color:#fff;
font-size:12px;
font-family:$fontFamily;
letter-spacing:0.05em;
color:$fontColor;
}
p { margin:1px; }
h2, h3 { margin:2px; }
#container {
width:756px;
margin:auto;
border:1px solid $borderColor;
padding:10px;
}
#header {
width:756px;
height:40px;
margin:0;
padding:0;
background-color:$headerColor;
}
#contents {
height:auto;
margin:5px;
padding:10px;
text-align:justify;
}
</style>”;
?>
Görüldüğü gibi sayfanın stil etiketlerini <?php ?> içinde düzenledim, değişkenleride gerekli yerlere yazdım. Ziyaretçilerin kullanacağı <form> ise şu şekilde;
<form method=”POST” action=”theme.php” style=”padding:8px;”>
<select name=”font_family”>
<option value=”" selected>Yazı Tipi</option>
<option value=”Arial”>Arial</option>
<option value=”Verdana”>Verdana</option>
<option value=”Tahoma”>Tahoma</option>
</select>
<select name=”font_color”>
<option value=”" selected>Yazı Rengi</option>
<option value=”#FF0000″>Kırmızı</option>
<option value=”#0000CC”>Mavi</option>
<option value=”#000000″>Siyah</option>
</select>
<select name=”border_color”>
<option value=”" selected>Kenarlıklar</option>
<option value=”#FF0000″>Kırmızı</option>
<option value=”#0000CC”>Mavi</option>
<option value=”#000000″>Siyah</option>
</select>
<select name=”header_color”>
<option value=”" selected>Başlık</option>
<option value=”#FF0000″>Kırmızı</option>
<option value=”#0000CC”>Mavi</option>
<option value=”#000000″>Siyah</option>
</select>
<input type=”submit” value=” Değiştir “>
</form>
Böylece index.php sayfası tamamlandı.
theme.php
Bu dosyada ise ziyaretçinin gönderdiği formu işleyerek tercihlerini sayfaya yansıtacağız.
<?php
// Formadan bilgiler alınıyor…
$border_color = $_POST[border_color];
$header_color = $_POST[header_color];
$font_color = $_POST[font_color];
$font_family = $_POST[font_family];
// Değişkenler kontrol ediliyor, boşsa temel ayarlar yükleniyor…
if (empty($border_color)) { $border_color = ‘#000000′; }
if (empty($header_color)) { $header_color = ‘#000000′; }
if (empty($font_color)) { $font_color = ‘#000000′; }
if (empty($font_family)) { $font_family = ‘Arial’; }
// Seçeneklere göre çerez gönderiliyor…
setcookie(”useroption”, $border_color.”:”.$header_color.”:”.$font_color.”:”.$font_family, time()+3600, “/”);
// Geçerli sayfaya yönlendiriliyor…
header(’Location: index.php’);
?>
Evet, formdan bilgileri aldık kontrol ettik, çerezi gönderdik ve tekrar index.php sayfasına yönlendirdik.
Uygulamayı buradan TEST edebilirsiniz. Kodları ise BURADAN indirebilirsiniz.
Bu yazının Popülerliği: 54% [?]
Yorumlar
2 yorum , “PHP ile Sayfa Stilini Değiştirmek”
Yorum Yapın
Galiba çalışmıyor :S
Çalışmayan nedir?