BoraN7 Güzel, elinize sağlık. Ben de bir iki bir şey ekleyeyim:
PhpStorm'un .idea klasörünü de göndermişsiniz, o sadece sizin bilgisayarda olması gereken bir klasör. Kök dizinde
git rm --cached -r .idea
çalıştırın. Bu Github'daki .idea klasörünü silecek ama bilgisayarınızdakini ellemeyecek. Sonra .gitignore dosyanıza /.idea şeklinde girdi ekleyerek .idea klasörünün tekrar dahil olmasını engelleyin, sonra gönderin. Diğer projelerinizde de ilk işiniz .gitignore dosyasına /.idea eklemek olsun. Visual Studio Code için de /.vscode eklenmesi gerekiyor.
Kurulum ile ilgili açıklamaları README.md dosyasına işleyin. İçinde Laravel'in kendine ait bilgileri var, onları silebilirsiniz. Github, Bitbucket, Gitlab gibi git hostları reponun ana sayfası olarak bu README.md dosyasını otomatik gösterir.
x-on:click.prevent olayını td içindeki button'a değil td'ye vermişsiniz. Button'a verseniz daha mantıklı olur, sonuçta kullanıcı onu tıklıyor.
AlpineJs içindeki $dispatch ile bu işlemi Vue'deki gibi tekrar kullanılabilir bir component haline getirebilirsiniz. $dispatch ve custom event şeklinde araştırma yapın. Kabaca x-on:click.prevent="$dispatch('areYouSure')" gibi bir kullanım elde etmiş oluyorsunuz.
AlpineJS, Bootstrap ve SweetAlert'i npm paketi olarak kurup Laravel Mix ile tek dosyaya derleyebilirsiniz. Böylece tek tek sayfaya dahil etmenize gerek kalmaz:
npm i --save-dev alpinejs bootstrap@next sweetalert2
resources/js/app.js:
import 'bootstrap';
import 'alpinejs'
import Swal from 'sweetalert2';
resources/css/app.css:
@import "~bootstrap/scss/bootstrap";
welcome.blade.php içerisinde artık sadece şunları eklemeniz yeterli:
<link rel="stylesheet" href="{{ mix('css/app.css') }}">
<script src="{{ mix('js/app.js') }}" defer></script>
Geliştirme sırasında
npm run watch
yapacaksınız. Bu dosyaları dinleyecek, siz bir değişiklik yaptığınızda otomatik olarak tekrar app.js ve app.css olarak derleyecek.
Production için ise npm run prod çalıştıracaksınız. Bu app.js ve app.css dosyasını derleyip sıkıştırıp küçültecek, bu şekilde de production ortamına göndereceksiniz. (Bu işlemleri CI/CD ile otomatikleştirebilirsiniz.)
Kök dizindeki webpack.mix.js dosyasına da şunu eklerseniz:
if (mix.inProduction()) {
mix.version();
}
app.css ve app.js için versiyonlama yapılmış olur, production ortamında tarayıcı önbelleği problemi yaşamazsınız.
Son olarak; AlpineJs kullandığınız için aslında SweetAlert bile kullanmanıza gerek yok, çok basit bir şekilde benzeri bir dialogu siz de yapabilirsiniz, daha fazla kontrole ve seçeneğe sahip olmuş olursunuz. AlpineJs ben de kullanıyorum, bu tür işleri çok basit bir şekilde yapmanızı sağlıyor. Sadece bilgi vermek amaçlı yazdım, SweetAlert kullanmak da gayet iyi bir seçenek. Ayrıca Tailwind'e de bakmanızı öneririm, ben Bootstrap'tan daha çok sevdim (ki Bootstrap'ı 2 sürümünden beri kullanan biriyim.)