PHP ve JS Kullanarak Side Bar Kontrolü Nasıl Yapılır?

İnternet uygulamalarını tasarlarken sidebar menüleri sıklıkla kullanırız. Kullanıcıların her aksiyonunda sidebar pozisyonunun sabit kalması gereklidir. Bunu nasıl yapacağımızı en basit yöntemiyle bu yazıda anlatacağım.

İlk olarak sideBar tıklamalarını yakalayan, mevcut duruma göre eğer kullanıcı sitemizi ilk defa ziyaret ediyorsa bir cookie oluşturan, eğer daha önceden oluşturulmuş bir cookie varsa buna göre menü durumunu yeniden düzenleyen bir JavaScript fonksiyonu yazmamız gerekiyor.

$('#sidebarToggle').click(function() {
    if(Cookies.get('menu-state') === 'open') {
        Cookies.set('menu-state', 'close');
    } else  if(Cookies.get('menu-state') === 'close') {
        Cookies.set('menu-state', 'open');
    } else {
        Cookies.set('menu-state', 'open');
    }
});

İlk olarak, sideBarToggle kimliğine sahip olan element tıklanıldığı zaman çalışması gerektiğini ardından ise her çalıştığında hangi işlemlerin yapılacağını bir fonksiyon yardımı ile tanımladık. Cookie oluşturma ve kontrol işlemlerimizi bu bölümde tamamladık.

Bir sonraki aşamada back-end tarafında bu cookie’nin anlık değerine göre işlem yapan if-else bloğunu php programlama dili ile yazmamız gerekiyor.

Bu php kodu ile cookie tanımlıysa ve değeri ‘close’ ise satır içi olarak bir css sınıfını ekrana basıyoruz. Buradaki örnekte ‘toggled’ sınıfına sahip olan element küçültülmüş olarak ekranda oluşturulacak aksi durumlarda ise standart halinde kalacak. ‘toggled’ sınıfı için gereken css biçimsel kodlarını da ayrı olarak projemizin gereksinimlerine göre yazdıysak artık projemizde kullanıcının bir önceki tercihini hatırlayan, açılıp-kapanabilen, cookie tabanlı ve back-end kontrollü bir sideBar kontrol sistemine sahibiz demektir.

İşte bu kadar basit.

Bir sonraki yazıda görüşmek üzere.