Javascript Selectbox ile Cookie Oluşturmak

Javascript Selectbox ile Cookie Oluşturmak

Javascript 25 Ocak 2022 - 00:44:30 206 Gösterim 0 Yorum

Hazırladığımız web projelerimizde birden fazla dil, tema, vb. kullanıcıya tanıdığımız UI seçeneklerini çerez olarak saklayıp, o çerezlerin seçimine göre siteyi şekillendirebiliriz. Örneğin ben projemde beyaz veya karanlık tema seçeneğini çerez olarak atayıp, getirdiğim verileri o çereze göre şekillendirdim. Hemen kısaca kodlarımızı oluşturalım ve javascript fonksiyonumuzu ekleyelim.

<select name="tema" id="tema" class="mt-1 p-1" onchange="return tema_sec(this.value);">
<option value="null">Tema SEÇ</option>
<option value="1">Dark Tema</option>
<option value="2">Light Tema</option>
</select>

2 seçenekli bir selecbox oluşturduk. Şimdi yaptığımız işlemin, kullanıcı tarayıcısında dilediğimiz sürece kalıcı olması için çerez fonksiyonumuzu kodlayalım.

<script type="text/javascript">
    function tema_sec(deger)
    {

      if(deger == "null")
      {
      document.cookie = 'tema=; Max-Age=-99999999;path=/;'; 
      }else{
      document.cookie = "tema =" + deger+";path=/;";
      }
       window.location.href = '';
    }
    </script>

Eğer, kullanıcı herhangi bir işlem yapmadıysa ya da daha önce yaptıysa ve sonra "null" değeri döndürecek olan Tema Seç seçeneğini seçtiyse tema isimli çerezi sildiriyoruz. Diğer iki seçenekten hangisini seçerse seçsin o değeri tema çerezine atıyoruz ve oluşturuyoruz. Sonrasını PHP ile daha da zenginleştirebiliriz, örneğin kullanıcı hangi temayı seçmişse, selectboxta onu otomatik seçili hale getirebiliriz, getirelim;

<select name="tema" id="tema" class="mt-1 p-1" onchange="return tema_sec(this.value);">
<option value="null" <?php if($_COOKIE['tema']=='null' || !$_COOKIE['tema']){ echo 'selected';}?>>Tema SEÇ</option>
<option value="1" <?php if($_COOKIE['tema']==1){ echo 'selected';}?>>Dark Tema</option>
<option value="2" <?php if($_COOKIE['tema']==2){ echo 'selected';}?>>Light Tema</option>
</select>

Null kısmında 2 şart ekledik, bunun biri, bir tema isimli çerez varsa ve değeri nullsa ya da bir tema isimli çerez yoksa dedik. İkinci seçenekte tema isimli çerezin değeri 1 ise ve üçüncü seçenekte tema isimli bir çerezi değeri 2 ise onu seç dedik. Şimdi ise iki ayrı css dosyamızı projemizde seçilen çereze göre kullanıcıya sunalım. yine basit bir if-else şartlaması yapalım. Ya da hep if else yapıyoruz bu sefer switch kullanalım.

<?php 
//Çerez Tanımlanmadıysa varsayılan olarak bir isim verelim.
$Tema = 'light.css';

switch($_COOKIE['tema'])
{
case 1:
$Tema = 'light.css';
break;

case 2:
$Tema = 'dark.css';
break;

default:
$Tema = 'light.css';
break;

}


?>


/* Css dosya ismini bir değişkene atayalım ve projemizde çağıralım */
<link href="../css/<?=$Tema?>" rel="stylesheet">

Aslında çokta switch yapısı kullanılacak bir yer değilmiş ama yine de çeşitlendirelim istedim. Yine de hataya düşmemek için en başa $Tema değişkeni için varsayılan bir light.css dosya ismi tanımladım. Bu çerez yoksa çalışmayacak olan switch  için bir önlemdi. Eğer çerezimin değeri 1 ise yine light.css, çerezimin değeri 2 ise dark.css gelecek. Kullanıcı benim kadar olmasa da kurcalamayı seviyorsa ve sitede hata açık arıyorsa bu çerezin değerini değiştirdiğini varsayıp ne girerse girsin 1-2 den farklı ise yine light.css gelmesi için default bir şart tanımladık. Daha sonrada bu dosyayı projemizde çağırdık.

Biz yine de kafa karıştırmamak için if else ile bir daha yapalım bunu.

<?php 
//Çerez Tanımlanmadıysa varsayılan olarak bir isim verelim.
$Tema = 'light.css';

if($_COOKIE['tema'] == 2)
{
$Tema = 'dark.css';
}else{
$Tema = 'light.css';
}


?>


/* Css dosya ismini bir değişkene atayalım ve projemizde çağıralım */
<link href="../css/<?=$Tema?>" rel="stylesheet">

Yukarıdaki kod ile aynı mantıkta çalışacaktır. 

Yorum Yapılmamış

Bu yazıya henüz bir yorum yapılmamış, hemen bir tane yapmak ister misin ?

Yorum Yapın