Reacte Tayfun Hocam Context Kullaniyordu Onun Videolarini izleyerek bir seyler yapabilirsiniz

string olarak eklemek yerine butonu kendin oluştur

let button = document.createElement('button');
button.innerHTML = 'ROCK';
button.class = 'button-wraper rock';
document.getElementById('area').append(button)

veya hali hazirda butonun varsa onu append edebilirsin

let area = document.getElementById('area');
let rockButton = document.querySelector('.rock');
area.append(rockButton);

kodalrını fazla incelemedim ama phpde pathinfo fonksiyonu işine yarar

//elimizde resim.png dosyası var
echo $dosyaadi = pathinfo($_FILES["file"]["name"], PATHINFO_FILENAME); //çıktı şu şekilde olur resim
echo $dosyauzanti = pathinfo($_FILES["file"]["name"],PATHINFO_EXTENSION); //çıktı şu şekilde olur .png
//eğer hep büyük harfli uzantı geliyorsada şöyel bir şey yapabilirsin ve veri tabanı işlemi için
echo $dosyaname = $dosyaadi.strtolower($dosyauzanti); //çıktı şu şekilde olur resim.png

eğer sadece tarayıcıdan girilmemesini istiyorsan(resim barındırıyorsan klasörde veya css js vs. önerim budur)
.htacces te şöyle bir komut var

Option - Indexes

eğer şifre ile girilmesini istiyorsan

AuthType Basic
AuthName "Password Protected Area"
AuthUserFile /path/to/.htpasswd
Require valid-user

Bu şekilde bir htaccess dosyası oluşturup oluşturduğun dizine .htpasswd dosyası oluştur.
oluşturduğun dosyaya her satıra bir kullanıcı gelecek şkeilde sırala yani şöyle

furkanmeclis:$apr1$gbyc7f0q$WhF2ewZAevLRbsYlp5.nG0

kullanıvı oluşturmak içinde bu siteyi kullanbilirsin

sanırım css te renk karışımı şu şekildde oluyor

background-color: rgba(0,0,0,1);

ilk parametre red
ikinci green
üçüncü blue
dördüncü ise alpha yani opacity diyebiliriz
siyah rengini elde etmek içinde

background-color: rgba(0,0,0,1); /* tam siyah */
background-color: rgba(0,0,0,.1); /* 10% lik siyah */
background-color: rgba(0,0,0,.5); /* 50% lik siyah */

tema sana ait olmayabilir ama tema madem elinde parçala temayı her yerde kullandığın rrsimleri yani sabit resimleri cache le ve bu sayede her defasında o resimler yüklenmez bu konu hakkında tayfun abinin videosu var.Eğer böyle bir siteyi public hale getrdiğinde eminim kimse bir girdikten sonra ikinci kez giremyecektir reklamlar aşırı fazla link reklamalrı yerine google reklamalrı kullanman daha mmantıklı olyr

hocam ölümcül hatalarla ilgili tayfun abinin bir videosu vardı onla yakalayabilirsin



PHP'de Ölümcül Hataları (Fatal Errors) Yakalamak

@alicemalturan ın dediği gibi php öğrenmeden laravel olmaz olsa bile bir süre sonra patlarsın
sanırım google drive tarzı bir sistem yapmak istiyorsun tayfunn abinini bu şeyle aynı olmasada videoları var
burda dosya yüklersin
burdada dosyalrı listelersin
tasarımda sana kalmış

for(){
$ekle = $array["isimler"]=$images[$a]['name'];
}

hocam bu şekilde dene bide

sen sabit bir array oluştur her for döndüğünde o arraye ekle veriyi