Laravel ve Vue.js

Merhaba. Şu yazımda belirttiğim gibi bu aralar laravel kullanarak bir proje geliştiriyorum. Projenin bir yönetim paneli bulunuyor ve bu panel üzerinden veri tabanındaki veriler listelenebiliyor, düzenlenebiliyor, silinebiliyor. Bu işlemlerin her biri ayrı sayfalarda gerçekleştiriliyor. Bu işlemleri tek bir sayfada nasıl toplayabilirim diye araştırırken karşıma Vue.js çıktı. Vue.js frontend tarafında kullanılan bir Javascript librarysi. Son zamanlarda baya popüler olan bu kütüphane, githubda en çok “star”lanan repo listesinde 6. sırada bulunuyor. Yaklaşık 3-4 haftadır ben de vue.js kullanarak yerelimde bir şeyler yapıyorum. Bu yazıda da laravel ve vue.js kullanarak tek bir sayfa üzerinde nasıl CRUD işlemleri yapabileceğimizden bahsedeceğim.

Geliştirme ortamının hazırlanması


Örnek üzerinden ilerlemenin daha yararlı olduğunu düşünüyorum. Örnek olarak bir yapılacaklar sayfası oluşturalım. Sayfa üzerinde bir tabloda yapılacak işleri görüntüleyelim. Tablonun yanında bir form olsun. Form ile de yapılacak işleri ekleyelim.

Hızlı bir şekilde laravel geliştirme ortamı oluşturmak için aşağıdaki komutları sırası ile çalıştıralım.

laravel ve yarn toolları yüklü değilse npm kullanabilirsiniz. Vue.js laravel içerisinde geldiğinden dolayı onu ayrıca yüklememize gerek yok.

Yapılacaklar sayfası için öncelikle veritabanında bir tabloya ihtiyacımız var. Bunun için bir öncelikle yeni bir veri tabanı oluşturalım.

Veritabanımızı oluşturduktan sonra .env dosyamızda bağlantı için gerekli düzenlemeleri yapalım.

Düzenlemeleri yaptıktan sonra “php artisan migrate:status” ile bağlantınızı test edebilirsiniz.

Geliştirme


Tablomuz için migrationu, modeli ve controlleri oluşturualım. Bunun için tek bir komut yeterli.

Oluşturulan migrationu aşağıdaki şekilde düzenleyelim;

Mass asignment hatasından kaçmak için Task modelimize şu satırı ekleyelim;

app/Task.php

Tabloları oluşturalım.

şeklinde bir hata ile karşılaşırsanız şu şekilde çözebilirsiniz.

app/Providers/AppServiceProvider.php içerisindeki boot fonksiyonunu şu şekilde değiştirelim.

Eğer hatayı aldıysanız düzgün bir şekilde migrate işlemini yapamadınız demektir. Veri tabanı içerisinde oluşturulan tüm tabloları silip yukarıdaki değişiklikleri yaptıktan sonra tekrar migrate yapmayı deneyin.

Migrate yaptıktan sonra route tanımı yapmamız gerekiyor.

routes/web.php dosyasına aşağıdaki satırları ekleyelim.

Route tanımını da yaptıktan sonra daha önce oluşturduğumuz TaskController sınıfındaki metodlarımızın içlerini dolduralım.

Backend tarafında her şey hazır. Şimdi Vue.js ve tasarım kısımlarını tamamlayalım. Öncelikle yeni bir terminal penceresi açıp projenin içerisinde “yarn watch” komutunu çalıştırıyoruz. Ardından giriş sayfamız olan welcome blade templateini düzenliyoruz.

resources/views/welcome.blade.php

app idsi ile bir div oluşturduk. bu selector app.js dosyası içerisinden değiştirilebilir. app.js dosyamızı componentimizi ekleyelim.

resources/js/app.js

Şimdi blade dosyamız içerisinde çağırdığımız vue componentini oluşturalım.

resources/assets/js/components/TasksComponent.vue

Sonuç


Frontend kısmını da bitirdikten sonra yeni bir terminal penceresinde “php artisan serve” yazarak uygulamamızı 8000 portunda ayağa kaldırıyoruz.

Eğer her şeyi doğru yaptıysanız “localhost:8000” adresine girdiğinizde uygulamayı görüntüleyip kullanabilmeniz gerekiyor.

Projenin benzerine https://github.com/bilalunalnet/task-list adresinden ulaşabilirsiniz. İyi günler.

Edit1: https://scotch.io

Geçenlerde vue ile ilgili https://scotch.io/ adresinden bir makale okurken “from jquery to vue” webinarı birazdan başlayacaktır tarzında bir bildirim geldi. 

Yorum bırak

Email adresiniz yayınlanmayacaktır.İşaretli alanları doldurmak zorunludur *