Laravel 11, Vue 3, and Inertia Js / Sanctum #5 Vue ve Inertia Kurulumu

Diğer değerlerden farklı bir şekilde devam edeceğiz.

https://inertiajs.com/server-side-setup

burada kurulum mevcut. ilk önce composer kodumuzu yazalım.

composer require inertiajs/inertia-laravel

sonra aynı sitede aşağıdaki kodu göreceksiniz. app.blade.php dosyası oluşturup içine o kodu giriniz.

bootstrap kullanacağım için hemen bootstrap cdn linklerini head tag arasına alıyorum.

bak sitedekinden farklı hiçbişi yapmıyorum. şimdi bize diyor middleware oluştur. hay hay

php artisan inertia:middleware

bunu da oluşturduk.

şimdi hemen altında bu middleware’ı ekleyeceğimiz yer var. eskiden kernel kullanıyorduk şimdi bootstrap/app.php dosyasını kullanacağız.

ekledik.

şimdi server-side kısmını tamamladık. şimdi client-side tarafını yapacağız. artık burada vue.js kuracağız.

https://inertiajs.com/client-side-setup burada sırayla hepsi var.

npm install @inertiajs/vue3
npm install vue

vite ile derleyeceğimiz hemen onu da kuralım.

npm install @vitejs/plugin-vue

hemen arkasından vite.config.js dosyasını aç.

import vue from ‘@vitejs/plugin-vue’;

bu kodu tepeye importların içine ekle. sonra vue ile başlayan kodu ekle. son hali aşağıda oradan o kodu bulabilirsin.

az işimiz kaldı. resources/js/app.js dosyasını aç. client-side linkindeki Initialize the Inertia app başlığı altındaki kodu oraya komple yapıştır.

orada bir kod var. return pages[./Pages/${name}.vue] diye. yani js klasör altında Pages altında tüm vue dosyalarımız olacak. bunun için js içine Pages ve onun içine create.vue diye bir dosya oluşturuyoruz. içine merhaba yazalım.

hemen web.phpyi aç.

bak ne oldu? view yerine inertiayı koyduk. create oluşturduğumuz dosyanın adı. nerede arıyor bunu? pages içinde.

hemen terminalden npm install komutunu çalıştır. sonra npm run dev yap seriden. derlesin.

Laravel 11, Vue 3, and Inertia Js / Sanctum #5 Policy

php artisan make:policy TaskPolicy –model=Task

Modele uygun hemen bir policy oluşturuyoruz. amaç bir önceki derste yaptığımız api auth için oluşturulan işlemlerden örneğin güncellemeyi sadece sahibi olduğu tasklarda yapabilsin diyeceğiz. amaç oraya bir kural koymak.

TaskController örneği;

gate ekledik ve show fonksiyonunda yer alan return öncesi gate ekledik.

taskpolicy içine de aşağıdaki kısmı ekledik. aslında true false değeri döndürüyor true ise gösteriyor gibi.

şimdi diğerleri için sırasıyla şunu yapıyoruz. sen resource bölümünde ilgili yerlere yazarsın

taskpolicy son hali

Laravel 11, Vue 3, and Inertia Js / Sanctum Login #4 [Yeni bir kolon ekleme]

userID kolonu ekleyerek kişiye ait taskları getirmek için kulanacağız. aslında bir where koşulu koyarak yapmak isterdim.

php artisan make:migration add_user_id_to_tasks

task tablosuna user id kolonu ekle dedik. hemen açtık ilgili migration sayfasını açıyoruz.

Task Modeli

User Modeli

TaskController

Laravel 11, Vue 3, and Inertia Js / Sanctum Login CSRF Token[API] #3

2.dersimizde yer alan bütün aşamaları yapalım. sadece bir kaç kod değişikliği yapacağız.

tabi aşağıda belirteceğim dosyaları api için olduğundan sıfırdan oluşturup farklı bir klasöre alın. bir önceki ders web için bu api için.

logincontroller -> artık token değeri döndürüyoruz kişiye giriş yaptığında.

logout -> tabi token siliyoruz.

tabi kayıt da olacak.

routeda artık api.php içine yazacağız.

Laravel 11, Vue 3, and Inertia Js / Sanctum Login CSRF Token #2

bootstrap/app.php

$middleware->statefulApi(); bunu ekliyoruz ve son hali bu.

hemen sonra cors dosyasını config içine yayınlıyoruz..

php artisan config:publish cors

hemen cors.php yi açıyoruz. config içinde.

support_credentials true yapıyoruz

env içinde SESSION_DOMAIN’ı de localhost yapıyoruz. domaine göre değişiyor tabi. şimdi aktif. şimdi logine istek atacağız ama csrf için önce sanctum/csrf-cookie e istek atacağız. şimdi ilk önce logincontroller oluşturalım.

php artisan make:controller Auth/LoginController -i
php artisan make:request LoginRequest

LoginRequest dosyamız.

LoginController dosyamız.

route’da

login’e istek atarken postman üzerinden istekten önce sanctum cookie e git csrf token al, onu cookielere ekle sonra logine istek atarken gönder diyoruz.

hepsi bu kadar loginimiz çalışıyor.

php artisan make:controller Auth/LogoutController -i

diyerek controller oluşturuyoruz.

Hepsi bu kadar. bunda yine csrf token gönderilecek fakat artık sanctum cookie sayfasına gidilmeyecek.

registerRequest

api route’umuza middleware ekledik.

Laravel 11, Vue 3, and Inertia Js / CRUD #1

kendim için örnek bir kod örneği belirtiyorum. okuyarak anlam çıkartamayabilirsiniz. adım adım gidiyorum.

laravel 11 kurulumu yaptık.

php artisan make:model TaskModel
make:request StoreTaskRequest
make:request UpdateTaskRequest
make:seed TaskSeed
make:factory TaskFactory
make:task Migration

diye bir çok değer oluşturduk. ben tabi şu request, seed, factory, migration gibi şeylere karşı işi biraz daha uzatıyor diye karşıyım ama 3-5 kişi olunca projede mecbur aslında.

laravel 10dan sonra make:model yazdıktan sonra artık isim yazmana gerek yok, sen oraya kadar yaz o sana soruyor, beraberinde ne bunları da kurayım mı diyor.

oluşturduğumuz migration dosyasına geliyoruz ve up içine;

Daha sonra factory dosyamıza geliyoruz. çünkü bunu çağırdığımızda içine dataları getirecek yer(ekleyecek değil, getirecek)

ee nasıl ekleyeceğiz? databaseseeder.php dosyasını aç. tabi varsa user vs şimdilik onları pas geç. biz sadece task ı çalışatacağız.

ee artık kaydetme sırası fakat daha migrate yapmadık.

php artisan migrate –seed

tüm tablolarımız oluştu. hatalar çıkabilir googlea girerek rahatlıkla çözün ve buraya geri dönün. env dosyasında 11den sonra veritabanı ayarının başında # var onları silmeyi unutmayın.

task tablomuz içinde datalı bir şekil hazır. şimdi toplu olarak ben size her dosyaya ne geleceğini atcam. ondan sonra kodları okuya okuya yaparsınız.

controller paylaşmadan önce bir kaç değişiklik daha yapmalısınız. api kısmını kurmalıyız. eskisi gibi değil kurmak gerekiyor.

php artisan install:api

sanctum kurulacak. tabi bu kurulduktan sonra bunun tablosunun da migrate edilmesi lazım. php artisan migrate ile işlemi tamamlıyoruz. gerçi terminalde size sorar o yes/no şeklinde bunları bunları kurdum bunu da kurmamı istiyor musun diyecek yes diyeceksin.

bootstrap/app.php bölümüne api kısmı eklenecek otomatik olarak. sen yine de kontrol et eklenmiş mi diye?

şimdi aşağıda 2 controller, 2 request, 1 resource dosyamız var.

TaskController

CompleteTaskController (Gereksiz ama neyse update yapıyor)

Request/StoreTaskRequest

Request/UpdateTaskRequest (Bak BUNDA class UpdateTaskRequest extends StoreTaskRequest bölümü var Storedakini kullanıyor unutma)

veritabanı ilişkileri pratik bir şema

uzun zamandır ekleyeceğim ekleyemedim. çok pratik userID where koşulu şu bu ile uğraşmadan, üye girişi yapmış birinin örneğin sahip olduğu meyveleri nasıl listeleriz?

User modeline hemen;

yazarız, kullanırken de

laravel 10 – vite vue intertia tailwind kurulumu

ana klasörde tailwind.config.js oluşacak otomatik. bunu açıyoruz.

content dizisinin içine

resources/css/app.css içine;

tabi tailwind bazı eklentileri mevcut. form eklentisini de kuralım.

az önce tailwind.config.js dosyasına content bölümüne eklemiştik. şimdi bu formu eklemeliyiz.

şimdi app.js dosyasmızı açıyoruz resources/js/ içinde.

import ediyoruz.

laravel 10 vue 3 vite kurulumu – 2

ikinci adım;

Route::get(‘/’,[\App\Http\Controllers\IndexController::class,’index’]);
Route::get(‘/hello’,[\App\Http\Controllers\IndexController::class,’show’]);

normal route ekle. ilgili controller tabi. index fonksiyonu

resources/js/Pages/Index/Index.vue oluştur.

hepsi bu kadar.

welcome.blade.php yi app.blade.php olarak değiştir

https://github.com/piotr-jura-udemy/master-laravel-vue-fullstack/commit/bdacfe98ac2fe52689634ef34efcbdaa9fdda0fe

bunu da uygula