Jetstream ile Vuejs destekli Laravel uygulamaları geliştirme

vue-fontawesome paketi ile projenizde FontAwesome ikonlarını kullanmayı öğreneceksiniz

Fontawesome kaynaklarının kurulumu

- npm i --save @fortawesome/fontawesome-svg-core

İkonların kurulumu

- npm i --save @fortawesome/free-solid-svg-icons

- npm i --save @fortawesome/free-regular-svg-icons

- npm i --save @fortawesome/free-brands-svg-icons

vue-fontawesome npm paketini kurulumu

- npm i --save @fortawesome/vue-fontawesome@latest-3

vue-i18n (https://vue-i18n.intlify.dev/) npm paketi ile frontend'imize çoklu dil desteği özelliği katacağız.

- npm install vue-i18n@9

"vue-i18n paketinin kurulumu" dersinin 14. dakikasından sonra Legacy Mod hatası alan öğrencilerin bu dersteki gibi app.js dosyalarını aşağıdaki gibi güncellemesi gereklidir.

const i18n = createI18n({

    locale: "tr",

    legacy: false,

    fallbackLocale: "en",

    messages: {

        tr: translateTr,

        en: translateEn,

    },

});

Pluralization, Interpolition, date ve number format uygulamaları

vue-i18n ile frontend'te görüntülenen dil ile Laravel tarafında backend'teki aktif olan dilin Middleware yardımıyla senkronize edilmesi.

- Laravel Localization(Çoklu Dil Desteği) kullanımı

- Inertiajs Shared Data kullanımı

- Inertiajs ile backend'e istek ve veri gönderme

vuelidate (https://vuelidate.js.org/) paketi ile formlardan gelen bilgilerimizi frontend tarafında validasyonunun yapılması ve hata mesajlarının yönetimini öğreneceğiz.

npm install @vuelidate/core @vuelidate/validators

- Frontend form validasyonu

vuelidate paketi ile birlikte gelen validasyon çeşitlerinin kullanılması

- requiredIf, requiredUnless, minLength, maxLength, minValue, maxValue, between, alpha, alphaNum, integer, decimal, email, ipAddress, macAddress ve sameAs

Özellikle Inertiajs ile sameAs kullanımı bu videoda en önemli konudur.

vuelidate ile hazırladığınız validasyon işlemlerinden geri dönen hata mesajlarının yönetilmesi. Ayrıca mesajlarınızı önceki videolarda gördüğümüz vue-i18n kütüphanesi ile dinamik olarak translate edilmiş olarak kullanıcılarımıza sunacağız.

Kendi validasyon methodlarımızı(validator) oluşturmayı öğreneceğiz.

vueUse kütüphanesi ile projelerimizde bir çok faydalı özelliği ekstra kod yazmadan ekleyeceğiz. Yani kısacası Amerikayı yeniden keşfetmeden, bir çok pratik özelliğe sahip olacağız.

Tailwindcss'in sık kullanan bir çok class'ının nasıl kullanıldığını öğreneceğiz.

Tailwindcss classlarından kendi classlarımızı nasıl geliştirebileceğimizi öğreneceğiz.

Tailwindcss ile dark mode desteğinin projenize eklenme metodları ve Tailwindcss classları ile ayrı bir tema oluşturmadan tek bir tasarım ile içeriğin hem dark hem light modda özgü bir şekilde görüntülenmesinin sağlanması.

Komponent mantığını öğreneceğiz ve örnek bir komponent yazacağız.

- Slot ile içerik aktarımı

- Yeniden kullanılabilir komponent oluşturma

- Dinamik komponent nedir nasıl kullanılır

- Komponenti global olarak projeye dahil etme

Vuejs komponentlerinin içine veri yollama  yolları (prop, slot, provide/inject) ve komponentlerden dışarı veri aktarma yollarını($emit) öğreneceksiniz. V-slot kavramını tablo komponenti dersinde öğreneceksiniz.

Kullanıcının dark modu aktifleştireceği bölümün bir komponent olarak tasarlanması.

- Uygulama sayfasının Temasının dark mode destekli yeniden tasarlanması.

Vuejs ve Tailwindcss ile düğme komponenti tasarlayacağız.

- Inertiajs Link kullanımı

- Vuejs prop, emit, slot kullanımı

Form öğelerimizi içine ekleyeceğimiz global form komponenti geliştireceğiz.

- Event modifier kullanımı (prevent)

- Form submit event'inin dinlenmesi ve yönetilmesi

Anahtar teslim input komponenti tasarlayacağız. (İkon, hata mesajı ve label'ı içinde) ayrıca v-model, emit ve event kullanımını ve komponentler arası veriyi nasıl aktarabileceğimizi öğreneceğiz.

- clearable özelliği ekleme (temizle düğmesi)

- Input'a dinamik Icon ekleyebilme

- Hata mesajlarını basabilme

- Label'i ekstra tanımlaya gerek olmadan yazdırabilme

Select input komponenti geliştireceğiz ve hem içine dinamik veri almasını sağlayacağız hem de seçilen verinin dışarıya @change eventi ile gönderilmesi.

- Propten array gönderimi ve v-for ile kullanımı

Checkbox ve radio input komponentlerini geliştireceğiz ve verimizi checked eventi ile dışarıya göndereceğiz.

Bilgilendirme ve formları yerleştirmek için Modal komponenti geliştireceğiz ve vueuse kütüphanesi kullanarak açılan modal'ımızın dışına tıklandığında kapanmasını sağlayacağız.

- npm i @vueuse/core

Backend'ten gelen veri setlerimizi kullanılarımıza göstereceğimiz dinamik Tablo komponenti alt komponentleri ile birlikte geliştireceğiz.

Tablo komponentine backend'ten verinin sayfalandırılarak(parça parça) gelmesini ve tıklanarak sayfalara gidilmesini sağlayacağız.

Alt öğeleri olan SideBar menü komponenti geliştireceğiz ve aynı zamanda bulunduğumuz sayfa ile menüde aktif olan linkleri kontrol etmeyi öğreneceğiz.

Bu ders biraz uzun olduğu için bölümler halinde. Bu bölümde TMenu.vue komponentinin iç yapısını geliştireceğiz ve stillendireceğiz.

- side bar kısmımızı komponent haline getireceğiz

- menu öğelerini depolayacağımız menu.js dosyamızı oluşturacağız

- Menümüze kademeli görünüm yapısı sağlayacağız

Kaynak kodlar 3.bölümdedir.

Bu bölümde bir önceki bölümde hazırladığımız menü tasarımımız içindeki menü linklerinin kodlarını yeniden kullanılabilir yapmak TMenuItem.vue komponentine aktaracağız ve her bir linkimizi bu komponent aracılıyla yazdıracağız.

Kaynak kodlar 3.bölümdedir.

Bu bölümümüz altın vuruş bölümü olacaktır. Aktif olan linki takip edebilmek ve menünün görünürlük durumunu takip edebilmek amacıyla projemize Vuejs'in State Management kütüphanesi olan Pinia'yı kullanacağız.

- Pinia'yı genel hatlarıyla kullanmayı öğreneceksiniz

- Tek bir yerden state yönetebileceksiniz yani farklı komponentleriniz aynı datayı kullanabilecek ve A komponentinden yaptığınız değişikliği B komponenti içinde de değiştrebileceksiniz. (Pinia)

- Inertiajs Link komponentini kullanacağız

- Vuejs Dynamic komponent yapısını kullanacağız

- Vuejs Computed özelliği ile koşullu ifadelerimiz için dinamik sonuçlar üreteceğiz

- Laravel Route'ları oluşturacağız

- Ziggy kütüphanesine göz atacağız ve aktif sayfanın route değerini almayı öğreneceğiz

- Inertiajs ile render ettiğimiz Vue sayfalarımızın içine backend'ten data göndereceğiz ve proplarla yakalayacağız.

- Menu'müze göster gizle özelliği kazandıracağız

Projemizde Laravel'in flash message mantığını nasıl frontend ile birleştirebiliriz onu öğreneceğiz ve gösterilecek mesajlar için toaster komponenti geliştireceğiz.

Bir önceki videoda sıfırdan hazırladığımız Bildirim Sistemini(Toastr Notification) backend'imiz(Laravel) ile birleştireceğiz.

- Inertiajs Shared data özelliğini kullanacağız

- Inertiajs usePage ile backend'imizden global datalarımızı(Flash Message) alacağız

- Vuejs ile onMounted aşamasında bildirimlerimizi ekrana basacağız

Laravel'de migration nasıl oluştur onu öğreneceğiz.

Laravel içinde Model oluşturma ve ilişkileri kullanma.

Model oluşturacağız ve model içinde kullanacağımız pratik özellikleri tanıyacağız.

hasOne, hasMany, belongsTo, belongsToMany (manytomany) ilişki tipleri ile ilgili örnekleri göreceksiniz.

Cast Tipleri

• array

• AsStringable::class

• boolean

• collection

• date

• datetime

• immutable_date

• immutable_datetime

• decimal:<digits>

• double

• encrypted

• encrypted:array

• encrypted:collection

• encrypted:object

• float

• integer

• object

• real

• string

• timestamp

Örnek veri setleri oluşturmayı öğreneceğiz.

- Seeder ve Factory kullanmayı öğreneceğiz

- Örnek veri oluştururken her iki yöntem ile de verileri bir biri ile ilişkilendirmeyi öğreneceğiz.

Laravel route management mantığını öğreneceğiz ve oluşturduğumuz route'lerin Inertiajs ile nasıl çalıştığını öğreneceğiz.

Öğrendiğimiz her şeyi pekiştirmeye başlıyoruz. Post modelimiz için CRUD sayfalarımızı Resource mantığı ile oluşturulmuş PostController'imize bağlıyoruz.

- Vuejs sayfalarımızı render edeceğiz

- Get route'lerımızı bağlayacağız

- CRUD dosya yapımızın taslağını oluşturacağız.

• Controllerimizdeki Index Methodundaki Inertia::render() üzerinden gelen veri setinin tablo komponenti ile ekrana yazdıracağız

• Tablo komponentimizi modifiye edeceğiz ve dinamik v-slot kullanacağız yani ekrana sadece veri tabanımızdan gelen verileri olduğu yazdırmayacağız özelleştirebileceğiz, koşullandırıp görsel sunumunu nasıl zenginleştiririz onu öğreneceğiz

• Inertiajs in delete() methodunu kullanarak backend'imizdeki destroy methodumuza istek göndereceğiz ve kayıt silme işlemi yapacağız.

• SPA uygulamalarda ciddi bir problem olan sayfalar arası geçişte Flash mesajlarının sıfırlanamaması hatasını nasıl düzelteceğimizi öğreneceğiz. Tekrarlayan bildirimleri önleyeceğiz.

Oluşturduğumuz komponentleri kullanarak içerik oluşturma modal'ı hazırlayacağız ve form verimizi yönetmeyi öğreneceğiz.

Inertiajs Reload ile Backend'ten anlık canlı veri çekeceğiz ve projemize Search Input komponenti ekleyeceğiz.

- Inertiajs istekleri öncesi onBefore özelliği ile silmeden önce kullanıcan onay aldıracağız

- Database üzerinde sayfa yenilenmeden canlı arama yaptıracağız hatta arama ile gelen sonuçları ayrı ayrı yöneteceğiz

Formlarımızdaki veriyi kullanıcı(client) tarafında validasyonunu vuelidate kütüphanesi ile nasıl yapabiliriz onu öğreneceğiz.

- Create Page içindeki form verilerimizin validasyonunu yapacağız

- Yazar listesi için kendi validasyon metodumuzu yazacağız

- vuelidate hata mesajlarını Input Komponent'lerimize aktaracağız

Formlarımızdaki veriyi kullanıcı(client) tarafında validasyonunu vuelidate kütüphanesi ile nasıl yapabiliriz onu öğreneceğiz.

- Edit Page içindeki formumuzdaki alanların validasyonunu yapacağız

- Yazar listesi ile yazar ilişkisi arasındaki eşleşme problemini çözeceğiz

- Edit Page için Post route'si tanımlayacağız

- Varsayılan bilgileri ekrana basacağız

Formlarımızdaki verilerimizin backend'teki(sunucu) validation'unun nasıl yapılacağını öğreneceğiz.

Route'ları kullanıcı giriş yapmamış ziyaretçilerden Sanctum ile koruyacağız, yeni oluşturduğumuz Layout'umuz içinde kullanıcı profili bilgilerini veritabanından göstereceğiz ve Fortify ve Jetstream ayarlarını inceleyerek Kullanıcı sayfalarındaki özellikleri nasıl kapatıp açabileceğimizi kavrayacağız.

Öğrendiklerimizi pratik edeceğimiz ve bolca yeni şeyler öğrenip biraz daha derin konulara gireceğimiz bir bölüm olacak. Birden fazla deposu olan bir mağzanın ürünlerini ayrı depolarda nasıl takip edebileceğimizi öğreneceğiz.

BelongsToMany ilişki türü ile Pivot(ManyToMany) tablo oluşturacağız ve Pivot tablonun kapsamını genişleterek Pivot tabloyu Stok Kartına çevireceğiz.

Stok kartımız üzerinde yapacağımız Malzeme Giriş Çıkış işlemleri için Transaction Modeli oluşturup zincirleme yöntem ile Malzeme hareketi (Transaction) üzerinden stok kartına, ürün ve depo detayına erişeceğiz.

• Veritabanından gelen veriyi kullanıcıya göstermeden önce Accessor yardımıyla değiştireceğiz (tarih bilgisini 12 dakika önce gibi değiştirme) bunun için Attribute yapısını kullanacağız

• Veri tabanına kayıt yaparken kullanıcının giriş yapmadığı alanların otomatik veri tabanına kaydedilmesini sağlayacağız(Giriş yapmış kullanıcının içerik oluşturucusu olarak kaydedilmesi).

• Model'imizdeki kod kalabalığını önlemek için Trait yapısını kullanmayı öğreneceğiz.

• İstediğimiz özel kodların Observer gibi Model üzerindeki işlemler sırasında çalışmasını sağlayacağız (boot)

• Frontend'te Depo oluşturmak için Modal kullanacağız.

• Inertiajs useForm'un processing indikatörü ile submit düğmemizde "İşleniyor" yazdıracağız

• Yine useForm'un finished indikatörü ile backend'te istek gönderimi bitiminde gerçekleştirilecek işlemlerimizi tanımlayacağız.

• useForm'un isDirty indikatörü ile Form alanında veri olmadığında Submit düğmemizi pasif hale getireceğiz.

• Formumuzdaki hataları hem frontend'te (vuealidate) ile hem de backend'te Laravel Validation ile yakalayacağız

• Form verilerini Request ile denetlemeyi öğreneceğiz ve Controller yerine Request sınıfı üzerinden yöneteceğiz.

• Backend'ten dönen hata mesajlarında yer alan input alanının anahtar kelimesini modifiye edeceğiz (Örn: name alanı gereklidir)

• Backend'ten Depo bilgilerini çekip Frontend'te yazdıracağız

• Tablo içinde satır seçme işlemleri için ScopeSlot işlemi uygulayacağız

• Satırdan seçtiğimiz öğeyi Modal üzerinde, sayfadan ayrılmadan güncelleyeceğiz

• Hem Create hem Edit işlemlerini tek Modal üzerinde aynı sayfa üzerinde çalışabilmesini sağlayacağız.

Listelenen depolardan istediğimizi aksiyon sütununda yer alan sil düğmesi(Inertia form.delete isteği) ile sileceğiz.

• Depoyu silmeden önce emin olup olmadığımızı sorulacağı modal yapısını kurgulayacağız.

• Modal başlığı ve aksiyon düğmesi metnini computed ile dinamik hale getireceğiz

• Watch ile modal'ın açılıp kapanmasını takip edeceğiz

Modal içinden sil düğmesine tıklanınca Depo kaydının silinmesini sağlayacağız.

useForm ile gönderilen istekler sırasındaki kullanılan eventlerden onFinish yerine onSuccess'e geçerek $page öğesi altında olan form objesinde yer alan form.reset() fonksiyonunu kullanılabilir hale getireceğiz.

Ürün resmini ürünle ilişkilendirebilmek için Morph yapısının kurulması.

Ürün resmi yüklerken kullanılan file input'u ref ile tetiklenmesini sağlama ref.click()

Yeni ürün kayıt ederken yüklenen ürün resminden Image modeli oluşturulması, ürün ile Morph ilişkisinin kurulması ve ürün resminin ekrana basılması.

Ürün silince, ürünle birlikte yüklenen resminde diskten sildirilmesi.

Ürün resimlerinin yüklendiği klasöre public klasörü içinden link verilmesini sağlar. filesystem.php üzerinden Symlink yönetimini sağlar.

Proje menüsündeki linklerin tıklanabilir hale getirilmesi.

Stok kartı yönetimi için pivot tabloyu model gibi kullanacağız.

Stok Kartı ve Transaction Modeli için ara yüz hazırlığı ve route hazırlığının yapılması

Transaction listesini gösterme ve yeni transaction ekleme modal'ının hazırlanması(form alt yapısı, validasyon)

Stok hareketi işlemini veritabanına işleme ve aktif stok bilgisini stok kartı üzerinden güncelleme işlemlerinin tamamlanması.

Stok kartı bulunmuyor ise otomatik olarak oluşturulmasını sağlayacağız.

Kullanıcılara istediğimiz roller atayabileceğimiz bir yetki yönetim sistemi kuracağız. Bu ilk videoda alt yapıyı kurgulayacağız.

Kullanıcıları, rolleri ve izinleri listeleyeceğiz sayfaları göstermek için route ve menu ayarlarını yapacağız.

Hazırladığımız listeleme sayfalarına Kullanıcı, Rol ve İzin listelerini göndereceğiz.

Rollere bağlı izinleri listeleyeceğiz ve ScopeSlot ile yazdıracağız.