Merhaba. Bu konuda çok basit bir şekilde PHP ve JS ile kullanıcıların online-offline durumlarıyla oynayıp ekranda göstereceğiz.
Bu sistem üzerinde çeşitli oynamalar yapılarak daha profesyonel bir sistem ortaya çıkarılabilir, benim aklıma ilk gelen bu sistem oldu. Önemli olan sistemin mantığı, kullanıcı giriş çıkışlarını düzgün yapmadım buradaki amaç hedef kullanıcının durumunu dinamik şekilde güncelleyip ekranda göstermek.
VirusTotal
Kodun Tamamı
O halde veritabanını inceleyerek başlayalım.
Elimde tht adlı bir veritabanı ve içinde members adında bir tablo bulunmakta.
Hiçbir üye şu anlık aktif değil.
Anasayfa olan index.php'den devam edelim :
Bu sistem üzerinde çeşitli oynamalar yapılarak daha profesyonel bir sistem ortaya çıkarılabilir, benim aklıma ilk gelen bu sistem oldu. Önemli olan sistemin mantığı, kullanıcı giriş çıkışlarını düzgün yapmadım buradaki amaç hedef kullanıcının durumunu dinamik şekilde güncelleyip ekranda göstermek.
VirusTotal
Kodun Tamamı
O halde veritabanını inceleyerek başlayalım.
Elimde tht adlı bir veritabanı ve içinde members adında bir tablo bulunmakta.
Hiçbir üye şu anlık aktif değil.
Anasayfa olan index.php'den devam edelim :
PHP:
<?php
$db = new PDO("mysql:host=localhost;dbname=tht;charset=UTF8;", "root", "");
?>
....
<div class="login">
<input type="text" id="username" placeholder="Kim olarak oturum açacaksınız?" autocomplete="off"><br>
<button id="btn-username">Oturum Aç</button>
</div>
...
<div class="list">
<?php
$members = $db->query("SELECT * FROM members ORDER BY status DESC", PDO::FETCH_ASSOC);
foreach ($members as $m) {
if($m["status"] == 1){
$statusClass = "online";
$status = "ONLINE";
}else{
$statusClass = "offline";
$status = "OFFLINE";
}
$uname = $m["username"];
echo "
<div class='user $statusClass'>
<span class='username'>$uname</span>
<span class='status $statusClass'>$status</span>
</div>
";
}
?>
</div>
İlk önce veritabanı bağlantımızı gerçekleştiriyoruz. Sonrasında bir login div'i var. Buradaki inputa hangi kullanıcı olarak giriş yapmak istediğimizi belirteceğiz ve ardından bizi o kullanıcı olarak giriş yaptıracak, online yapacak. Başka bir kullanıcı adı yazdığımızda ise önceki kullanıcıyı tekrar offline yapıp şimdi yazdığımız kullanıcıyı online yapacak. Girişi parola girme doğrulama olmadan kısaca böyle yaptım çok uzamasın diye.
Oturumu kapamak için giriş kısmına boş değer gönderirsek olur, hiçbir hesaba giriş yapmadan şu anki oturumu kapar.
Sonra tüm üyeleri ekrana aktiflik durumuyla beraber yazdırıyoruz, aktif olanlar ekranda üstte gözükecek. Eğer durumu online ise div'in sınıfını ona göre yapılandırıyoruz, yeşil veya kırmızı mı gözüksün diye.
Şimdi ise gelen isteğe göre kullanıcının aktiflik durumunu güncelleyecek olan sayfa setStatus.php'ye bakalım :
PHP:
<?php
$db = new PDO("mysql:host=localhost;dbname=tht;charset=UTF8;", "root", "");
if(@$_GET["status"] && @$_GET["username"]){
$username = htmlspecialchars(trim($_GET["username"]), ENT_QUOTES);
$status = htmlspecialchars(trim($_GET["status"]), ENT_QUOTES);
$updateQuery = $db->prepare("UPDATE members SET status=$status WHERE username='$username'");
$updateQuery->execute();
}
?>Gelen GET istekleri kullanıcı adı ve aktiflik durumu olacak. Veritabanına gidilip GET parametrelerinde verilen şekilde değişiklik yapılacak.
Kullanıcı adı, username parametresindeki gibi olan satırın aktiflik durumunu status parametresi belirleyecek.
Şimdi ise aktiflik durumunu dinamik bir şekilde düzenleyen app.js'e gelelim :
JavaScript:
var btn = document.getElementById("btn-username");
window.onunload = () => {
fetch(`setStatus.php?username=${localStorage.getItem("username")}&status=false`);
}
if(localStorage.getItem("username")){
fetch(`setStatus.php?username=${localStorage.getItem("username")}&status=true`);
}
btn.onclick = () => {
if(localStorage.getItem("username")){
fetch(`setStatus.php?username=${localStorage.getItem("username")}&status=false`);
}
var username = document.getElementById("username").value;
localStorage.setItem("username", username);
fetch(`setStatus.php?username=${username}&status=true`);
window.location.reload();
}Burada localStorage'yi kullanacağız. Kullanıcı adını sekme kapansa bile PHP'nin Sessionları olmadan tutabileceğiz.
Sekme kapandığı zaman şu anki giriş yapılmış olan kullanıcının aktiflik değerini offline'ye çekiyoruz.
Ayrıyeten diyoruz ki eğer şu anda halihazırda giriş yapmış olan bir kullanıcı varsa sayfaya geldiği zaman istek attığı zaman onun aktiflik değerini online'ye çek.
Bir login div'i vardı. Belirtilen kullanıcı ile giriş yapıyordu, orası yazılıp butona basıldığı zaman ilk önce şu an var olan kullanıcıdan çıkış yapıyoruz ve durumunu offline'ye alıyoruz. Ardından localStorage'ye yeni kullanıcının adını kaydedip durumunu online'ye çekiyoruz. Sonra sayfayı yeniletiyoruz.
Artık herhangi bir hesaptan giriş yaptığımız zaman online olarak gözükecek, sayfadan çıkıldığı zaman veya başka bir kullanıcıya geçildiği zaman tekrar offline olarak gözükecek.
Bu konu bu kadardı, basit bir şekilde kullanıcının aktiflik durumunu sayfanın ve oturumun kapalı/açık olmasına göre güncelledik.
Herkese iyi çalışmalar.
