ne yapmak istiyorsun önce ona karar ver, javascript ile back-end de yazabilirsin, front-end'de.
front-end yazacaksan yine ne yapmak istiyorsun ona karar ver, single page application türevi bir şey mi yazmak istiyorsun yoksa web sayfası yaparken sayfana dinamiklik mi katmak istiyorsun?
bu gibi sorulara cevap verdiğinde öğreneceğin şeylerde aşağı yukarı belli olacaktır.
dom kısaca document object model'in kısatlası olup programlama dilleri ile html'in anlaşması için nesnelerden ve özelliklerden oluşan bir standarttır.
örneğin jquery ile dom manipülasyon işlemlerini çok kolay yaparsın, nedir bu? input'un değerini değiştirme, niteli ekleme, gizleme/gösterme vs. vs.
react, angular ve vue gibi frameworkler ise yazılımın ile haberleşen ve dinamik content oluşturabildiğin, performansa dayalı işlerde kullanabileceğin, özellikle standart haline gelmesinden dolayı öğrenmende faydası olacak frameworkler.
kısaca javascript derin bir dünya, girmeden anlayamazsın ne yapmak istediğini.

kırılma olasılığı yoktur, doğru şekilde sayfanda kontrol yaptığın sürece değerler veritabanından geleceği için ve değerleri session'da tutup ona göre kontrol edeceğin için gönül rahatlığıyla kullanabilirsin.

İlk olarak karakter tanımı için utf8mb4_general_ci olarak ayarla. Böylece türkçe karakter problemi vs. çekmezsin.
İkinci olarak, mysqli ile başlayıp pdo ile devam edip, mysqli ile sonlandırmışsın :D Kafan biraz karışmış orada, aşağıdaki kodu deneyebilirsin.

try {
    $db = new PDO('mysql:host=localhost;dbname=test10;charset=utf8mb4', 'root', '');
} catch(PDOException $e){
    die($e->getMessage());
}

$query = $db->prepare('INSERT INTO yemekler SET img_url = :url, product_name = :name, detail = :detail, price = :price');
$query->execute([
    'url' => $image["image" . $i],
    'name' => $ad["ad" . $i],
    'detail' => $acıklama["acıklama" . $i],
    'price' => $fiyat["fiyat" . $i]
]);
if ($query->rowCount()){
     echo "menü oluşturuldu.<br>";
}

baya düşük çözünürlüklü bir ekran anladığım kadarıyla, responsive olmadığı için şu an o problemi yaşıyorsundur teşekkür ederim bildirdiğin için :)

çalışmaması gayet normal, javascript'de öyle bir fonksiyon yok çünkü :)
eğer php projende logout linkin varsa örneğin;

siteadi.com/cikis

gibi. O zaman javascript içinde şöyle bir istek yaparak çıkış yaptırabilirsin

function cikis() {
    swal({
        title: "Çıkış Yapmak İstediğinize Eminmisiniz",
        icon: "warning",
        buttons: true,
        dangerMode: true,
    }).then((willDelete) => {
        if (willDelete) {
            swal("Başarıyla Çıkış Yaptınız", "", "success").then((value) => {
                $.get('http://siteadi.com/cikis', function () {
                    window.location.reload();
                })
            });
        } else {

        }
    });
}

herhangi bir builder kullanıyorsan (webpack, gulp, grunt vb.) import ederek kullanabilirsin

import 'bootstrap';

https://getbootstrap.com/docs/4.0/getting-started/webpack/

Ancak normal html-css yazıyorsan npm ile kurmak pek işine yaramaz