Selamlar, aslında istediğin çok basit bir işlem. Varsayımlarla konuşuyorum; yazılıma yeni başladın. Tavsiyem Django ve React'ı bir kenara koyup yalnızca Python ve JavaScript'i kullanman. Aksi durumda framework kullanımı öğrenimine çok zarar verebilir.
Programlamada olabildiğince her şeyi ayırmak önemli ve hayatidir. Ancak ayırırken belli kriterlere göre ayırmanız en doğrusudur. Performans hakkında pek bilgim yok ancak; ’urun_resim’ sütunuyla daha farklı işlemler yapmak istiyorsan, evet bunu farklı bir tabloya taşımak mantıklı olacaktır ama tek amacın yalnızca ürün resminin dosya adını bilmen ve zaman zaman değiştirmen gerekiyorsa ayırmana gerek yok. Ürün kategorileri için yeni bir tablo oluşturabilirsin, ürünün hangi kategoride olduğunu belirlemek içinse tek bir sütun yeterli olur. Eğer ürün birden fazla kategoride bulunabiliyorsa bu defa onun içinde ayrı bir tablo oluşturmalısın. Umarım bu konuda kafanı çok karıştırmamışımdır. İşin özü tek bilgiye sütun birden fazla bilgiye tablo.
Aradığın konseptin adı API. Google'da PHP Rest API yazarak sormuş olduğun sorunun cevabını alabilirsin. Rest biraz daha gelişmiş olsada herhangi bir framework kullanmadan temel Curl ile de istediğini başarabilirsin.
En basit çözüm etkinlikler tablosunda kullanıcıların id'sini tutabileceğin bir sütun eklemek olur. Daha sonra farklı bir sorgu ile kullanıcının bilgilerini veritabanından çekebilirsin. İkinci ve doğru çözüm ise join'leri kullanmak.
Vanilla JavaScript'te hepsine direkt event atayayım gibi bir seçeneğimiz yok. Bu yüzden foreach zorunlu. Ayrıca getElementByClassName değil getElemenstByClassName olmalıydı. Arada çok küçük bir 's' takısı var.
Umarım iç içe geçen callbackler seni korkutmaz, sorunun cevabı;
document.addEventListener('readystatechange', function()
{
if(document.readyState === 'complete')
{
document.querySelectorAll('.replybutton').forEach(function(replyButton)
{
replyButton.addEventListener('click', function()
{
document.querySelectorAll('.replybox').forEach(replyBox => replyBox.style.display = 'none');
var commentBoxId = this.getAttribute('data-commentbox');
document.getElementById(commentBoxId).style.display = 'block';
});
});
document.querySelectorAll('.cancelbutton').forEach(function(cancelButton)
{
cancelButton.addEventListener('click', function()
{
document.querySelectorAll('.replybox').forEach(replyBox => replyBox.style.display = 'none');
});
});
}
});