mantık şöyle olabilir, online diye bir tablon olduğunu varsayalım.
diyelim ki bir konunun içerisine girdim, o tabloya benim üye id'mi ve o anki tarihi kaydedeceksin.
eğer ben başka bir yere girersem tablodaki bana ait verileri silip o anki sayfamı ekleyeceksin.
şimdi diyeceksin ki adam çıktı gitti, tabloda kaldı. kalmayacak, online olup olmadığını şöyle belirleyeceksin.
diyelim ki birisi online tablosuna kaydedilmiş, eğer kayıt zamanı 5 dakikadan az ise onu online sayarsın, değilse artık o sayfada değildir başka bir işlem yapmadığı için.
ayrıca mysql'de bir event scheduler ya da php tarafında bir cronjob yazıp günlük olarak 5dk'dan uzun olan kayıtları sildirirsen bu sistemi uzun süre kullanabilirsin.
evet ne yazık ki bootstrap bu konularda yeterince iyi değil, eğer bootsrap'a yeni başladıysan bence hiç bulaşma tailwind'i öğren derim.
böylece her breakpoint için kolayca kodlamanı yapabilirsin bir şans ver derim :) istediğin şeyin tailwind karşılığı bu kadar basit aslında.
<main class="w-full md:w-9/12 mx-auto">
..
</main>
yaptığı şey 768px altında width full olacak, md karşılığı >= 768px yani 768px'den büyük olduğunda ise width'i 75%'ye w-9/12 ile ayarladık. 12'lik grid sistemden yola çıkarak düşünebilirsin bunu.
yapmanın en iyi ve kolay yolu bir javascript frameworkü kullanmak, spotify'in clone uygulamasını react ile geliştiriyoruz kanalda ilk dersi var, oradan takip ederek mantığı anlayabilirsin spotify'de altta sabit player var bunu da entegre edeceğiz diğer derslerde.
onclick çalılıyor kapalı yazıyor, sen tekrar bastığında açık yazsın istersen o zaman şöyle bir şey yapman lazım
<div id="divs" onclick="fun()">Açık</div>
<script>
let div = document.getElementById("divs"),
open = true;
function fun(){
if (open) {
div.innerHTML = 'Açık';
} else {
div.innerHTML = 'Kapalı';
}
open = !open
}
</script>
class yaparak kullanmak istersen @oguzhanbyram çözümünü gayet yeterli, id'li bir şey lazımsa şöyle bir fonksiyon tanımla;
function get(...ids) {
return ids.map(id => document.getElementById(id));
}
kullanırkende şöyle kullan
const [bir, iki, uc] = get('bir', 'iki', 'uc');
bir.style.background = 'red';
iki.style.background = 'blue';
uc.style.background = 'green';
örnek html
<ul>
<li id="bir">1. liste</li>
<li id="iki">2. liste</li>
<li id="uc">3. liste</li>
</ul>
aynen öyle kodlar olmadan bir anlamı yok, eğer sen php tarafında format kontrolü yapmıyorsan sadece client-side bir kontrolün varsa her türlü ekleme yapabilirler, kodlarını görmeden çok bir şey söylemek mümkün değil.
mümkünse bütün sayfanın değilde ilgili alanın kodlarını paylaşırsan iyi olur :)
$row içinde $row['sayi'] şeklinde erişebiliyor olman lazım eğer sorgunda kullanabiliyorsan
çalışmaz çünkü .urunincele-butonu classın a etiketinde değil onun içindeki div'de, text-decoration stili ise a etiketinin kendisinde.
basitçe şöyle sıfırlayabilirsin.
a {
text-decoration: none;
}
htmlspecialchars() ile encode edip tutabilirsin, gösterirkende doğrudan ekrana bastığında kod gibi görünür ama aslında özel karakterler değiştirildiği için çalışmaz güvenlik açığı teşkil etmez.
dileyenler şunada bakabilir
https://frontendaily.com/day/7
birlikte hazırlamıştık her şeyi çalışıyor demoyu inceleyip kodları alarak kullanabilirsiniz :) ya da videoyu izleyip yapılışına bakabilirsiniz