JavaScript - JSON kullanarak basit bir veritabanı yazmıştık, bu konuda yazdığımız veritabanını kullanarak çok basit bir mesajlaşma uygulaması yazacağız.
Normalde böyle bir tasarımla böyle bir proje mesajlaşma uygulaması olarak gerçek hayatta kullanılmaz fakat bu basit projenin amacı, veritabanı konusunda belirttiğim gibi JSON'u kullanmak.
Yazdığımız veritabanı : Veritabanı
Bu projenin kaynak kodları : Proje
VirusTotal
Projeye gelelim, app.js :
Normalde böyle bir tasarımla böyle bir proje mesajlaşma uygulaması olarak gerçek hayatta kullanılmaz fakat bu basit projenin amacı, veritabanı konusunda belirttiğim gibi JSON'u kullanmak.
Yazdığımız veritabanı : Veritabanı
Bu projenin kaynak kodları : Proje
VirusTotal
Projeye gelelim, app.js :
JavaScript:
var db = new DatabaseEngine("messages");
var chat = document.getElementById("chat");
var form = document.getElementById("form-send-msg");
function scrollToBottom(){
chat.scrollTop = chat.scrollHeight;
}"messages" adlı bir veritabanımız var, onunla bağlantı kuruyoruz.
Sonrasında mesajlarımızın gözükeceği alanı ve mesaj göndereceğimiz form'u alıyoruz.
scrollToBottom() fonksiyonu ise mesajlarımızın gözükeceği alanın scrollbarını en aşağı indiriyor, yeni bir mesaj attığımızda bunu kullanacağız.
JavaScript:
function listMessages(){
var messages = db.getRows();
chat.innerHTML = "";
if(messages == 0){
chat.innerHTML = "<h2 style='text-align:center;'>Daha önce hiçbir mesaj yazılmamış.<h2>";
return 0;
}
for(let i = 0; i < messages.length; i++){
chat.innerHTML += `
<div class="msg">
<div class="sender">${messages[i].sender}</div>
<div class="text">${messages[i].message}</div>
</div>
`;
}
}listMessages() adlı bir fonksiyonumuz var, bu fonksiyonda veritabanından mesajları alıp ekrana yazdıracağız. Veritabanımızdaki satırları alıyoruz (mesajları), sonrasında mesajlarımızın gözükeceği yeri temizleyip kontrol ediyoruz eğer herhangi bir mesaj var mı diye yoksa ekrana yok diye yazdırıyoruz, eğer varsa elimizde olan satırların içerisini dolaşarak teker teker tüm mesajları ekrana mesajı yazdıran kişinin adıyla birlikte yazdırıyoruz.
JavaScript:
function sendMessage(){
var msg = document.getElementById("msg");
var sender = document.getElementById("username").value;
db.addRow({"sender" : sender, "message" : msg.value});
msg.value = "";
listMessages();
scrollToBottom();
}
form.onsubmit = e => {
e.preventDefault();
sendMessage();
}
setInterval(listMessages, 250);sendMessage() fonksiyonumuzda kullanıcının gönderdiği mesajı, ve kullanıcının adını depoluyoruz. Sonrasında veritabanımıza ek bir satır olarak bu bilgileri ekliyoruz. Kullanıcı başka bir şey yazarsa diye kullanıcının input'unu temizliyoruz ve mesajları tekrar listeliyoruz, listeledikten sonra da scrollbar'ı en aşağı indiriyoruz.
En sonda bir interval var, her 250 milisaniyede bir mesajları listeliyoruz. Başka bir kullanıcı mesaj yazdığı anda görebilmemiz için.
Büyük ihtimalle bu veritabanımız ile alakalı son konuydu fakat bir de bu veritabanının yönetim paneli gibi bir şeyi de yapabilirim. Görmüş olduğumuz üzere basit projelerde işimizi çok kolaylaştırıyor. Küçük bir mesajlaşma uygulamasının yazılmasının süresini iyice azalttı.
Bunun gibi birçok proje JSON veritabanını kullanarak gerçekleştirilebilir. Gerçek hayatta halka açık olarak uygulanamaz fakat kendi kullanımınız için zamanınızdan tasarruf ettirebilir.
