Difference Between onBlur vs onTouched

Yunus — Fri, 24 Nov 2023 11:29:41 +0000

Short Answer is:

onBlur is an event that occurs when a field loses focus, which can be used to trigger validation at that moment.

onTouched is a state indicating whether a field has been interacted with and then left, often used to control when to display validation messages.

What is onBlur?

Definition and Triggering Event:

onBlur is an event handler that is activated when an input field loses focus. This occurs when a user moves away from an input field after interacting with it.

Use in Form Validation:

It's commonly used in form validation to check a field's value against validation rules only when the user moves away from that field. This approach is less intrusive than validating every keystroke.

Practical Application:

This event is particularly useful when you want to validate a field after the user has finished entering data, avoiding constant validation during the typing process.

What is onTouched?

Definition and Role in Validation Libraries:

Unlike onBlur, onTouched is not an event but a state or property used in form validation libraries, like React Hook Form. It flags whether a user has interacted with a field.

Functionality:

A field is considered "touched" once the user has focused on it and then moved away. It's instrumental in determining when to display validation errors.

Enhancing User Experience:
onTouched improves user experience by delaying error messages until the field has been interacted with, preventing an overload of messages upon form load.

Understanding the roles and differences of onBlur and onTouched is vital in form design. While onBlur triggers validation when a field loses focus, onTouched indicates interaction with the field, helping in strategic display of validation messages. Together, they ensure a balance between providing immediate feedback and not overwhelming users with premature validation errors. Implementing these effectively can significantly enhance the user interaction and experience with your forms.

Both onBlur and onTouched are essential tools in a developer’s arsenal for creating responsive and user-friendly web forms. Knowing when and how to use them can make a substantial difference in how users perceive and interact with your web forms.

Laravel 9 İle Sıfırdan 90 Saatlik Uygulama Geliştirme Tecrübem

Yunus — Wed, 16 Mar 2022 15:21:02 +0000

Moneo adlı şirkette stajımın 4. haftasındayım. Stajımın 2. haftasında Laravel ile sepetsiz marketplace diyebileceğimiz bir uygulama geliştirmeye başladım. Bu yazımda yaklaşık 90 saat süren Laravel tecrübemi sizlere aktarmaya çalışacağım.

1) Windows'a Php Kurulumu

Birçok php geliştiricisinin aksine ben Windowsta çalışıyorum. Bunun sebebi olarak hem Windowsta daha rahat olduğumu hem de daha önceden yaşadığım Linux tecrübelerinde işletim sistemini kurcalarken yaşadığım problemlerin beni yavaşlatması olduğunu söyleyebilirim. Bu bağlamda Windowsta hızlıca kurmanız gerkenleri listeleyeyim

XAMPP- tamamiyle ücretsiz, yüklenmesi kolay Apache dağıtımı olup MariaDB, PHP ve Perl içerir.
Composer- PHP ile uygulama geliştirirken olmazsa olmazımız, paket yöneticimiz.
Node.js- içerisinde Npm ile gelen Node.js kurulumu sonrası Npm'i JavaScript paket yöneticisi olarak bizlere sunuyor.

Bu kadar!
Windows ile Php geliştirmeye başlamak aslında bu kadar kolay, daha sonrasında favori ide'niz ile php geliştirmeye hemen başlayabilirsiniz.

2) İlk Laravel Projemizi Oluşturmak

Php ortamını Windows'a kurduktan sonra Cmd ekranını açıp bir kereliğe mahsus
composer global require laravel/installer
komutunu çalıştırıyoruz.
Artık bilgisayarınızdaki tüm kullanıcılara Laravel'i tanıttığımızı söylebiliriz. Bundan sonra ise istediğiniz dizinde oluşturduğunuz klasörün içerisinde girip Cmd üzerinden laravel new diyerek yeni projenizi oluşturabilirsiniz. Ben projemin adını iSotStore olarak belirlediğimden
laravel new iSotStore
diyerek projemi oluşturuyorum. Laravelin bizlere vermiş olduğu "Build something amazing." mesajıyla birlikte projemizi idemizde açıp, geliştirmeye başlıyoruz.

3) İlk Adımlarımız

Ben projeyi oluşturduktan hemen sonra bir Tema seçip bunu parçalayarak projeme giydirdiğimi söyleyebilirim.
Peki nedir bu parçalamak ?

Şöyleki laravel geliştirirken MVC yapımızda View'larımızı Blade Templates olarak tanımlıyoruz. Laravel içerisinde bulunan bu template engine bize birçok olanak sağlıyor.
Örneğin, seçtiğimiz tema içerisinde sürekli aynı kalacak olan Header, Footer vb. sayfaları farklı bladeler içerisinde tanımlayıp, bladelerimizdeki kod tekrarından kaçınarak, hem daha temiz bir görüntü hem de okunabilirliği yüksek sayfalar oluşturmamızı sağlıyor.

Benim proje boyunca kullandıklarım'ı:

yield()
extends()
include()
section()

şeklinde sıralayabiliriz.

4) Authentication

Temamızı giydirdik, sayfalarımız hazır, artık back-end geliştirmelerini tanımlayıp sayfalarımıza işlev vermek istiyoruz, peki kullanıcı giriş sistemi ne olacak ? Laravel bunun için ne sunuyor ?
Aslında burada birden fazla seçeneğiniz bulunuyor, hepsini ücretsiz olarak kullanabileceğiniz Laravel Breeze, Laravel Jetstream ve Laravel Fortify bulunuyor. Ben ufak bir araştırma sonrası birçok işi hızlıca çözüp bana hızlı bir başlangıç sunacağını düşündüğüm için Jetstream kullandım.

Düşündüğüm gibi de oldu açıkcası, Jetstream hızlı bir şekilde projeme kurulduktan sonra bana sunduğu sayfalarla birlikte onu kullanmamı sağladı. Ama her ne kadar hızlı bir başlangıç kiti olarak gelse de üzerinde özelliştirme yapmak için yaklaşık 10 saatimi harcadığımı söyleyebilirim :)

Özelleştirdiğim sayfaları ve nasıl yaptığımı bu başlığın alt başlıkları olarak gelin hep beraber inceleyelim

4.1. Two-Factor Authentication'ı devre dışı bırakma

config/fortify.php içerisinde bulabileceğiniz features array'i içerisinde Features::twoFactorAuthentication metodunu yorum satırına alarak hızlıca devre dışı bırakabiliyorsunuz. Ne kadar hızlı değil mi ?

4.2. Kendi Login&Register Formlarımız Üzerinden Authenticate Olmak

Ben şahsen gidip dökümantasyonunu okumak yerine, Jetstream'in kendi sayfasında bunu nasıl çözdüğüne bakıp, aynısını kendi oluşturduğum form üzerinden yapmak istedim. Jetstream'i kurduktan sonra oluşturduğu bir çok blade'i siz de göreceksiniz. Örneğin: login.blade.php içerisine girip baktığımızda Post metodu ile gönderdiği form'u 'login' adındaki route üzerinden geçirerek Authenticate olmanızı sağladığını görebilirsiniz. Burada dikkat etmeniz gerekecek tek nokta, gönderdiği inputların name attributelarını aynı şekilde kullanmak, session mesajlarını da Session::get('success') şeklinde yakalamaya çalışmaktansa session('status') ile yakalayıp sonucun ne döndüğünü görmek.

4.3. Şifre Güncelleme Formu oluşturmak

Yukarıda bahsettiğim 10 saatlik kısmın 6 saatini bu form yemiştir diyebiliriz. Ama yaptığım hataları okuduktan sonra, aynı hataları yapmadan işinizi hızlıca çözeceğinizi umuyorum.

Burada da aynı şekilde Jetstream'in şifre güncelleme formunda neler yaptığına bakacak olursak, tek göreceğimiz şey <x-jet-form-section submit="updatePassword"> bu livewire tag'i olacak. Açıkcası burası bana oldukça kafa karıştırıcı gelmişti çünkü herhangi bir route ismi görememiştim. İlk iş olarak internette bunu nasıl yapacağımı araştırıp, baya vakit öldürdükten sonra kimsenin böyle bir şey yapmadığı, yaptıysa bile internette paylaşmadığını gördüm.

Aklıma route listesine bakıp Update.Password gibi bir şey yakalayıp, bu route üzerinden PUT isteği atabileceğim geldi ve öyle de yaptım. php artisan route:list komutuyla listelediğim route list üzerinden 'user-password.update''e giriş yapmış kullanıcın id'si ile birlikte istek atmayı birçok kez denedim ama hiçbir geri dönüş almadan sayfanın kendini yenileyip durduğunu gördüm.

Bu arada blade içerisinden PUT isteği gönderirken <form method="post"> şeklinde POST attributesi ile form gönderip formun içerisinde @method('PUT') yazdığımızı da belirteyim.

Yaptığım hatalara gelecek olursak, yine yukarıda belirtiğim name attributelarını yanlış yazıp hata mesajlarını @foreach ($errors->all() as $error) şeklinde yakalamaya çalıştığımdan, ne şifremi güncelleyebiliyordum, ne hata mesajlarını görüntüleyebiliyordum. Çözüm olarak ise name attributelarını düzelttikten sonra hata mesajlarını @foreach ($errors->updatePassword->all() as $error) şeklinde yakalayıp uzun uğraşlar sonucu şifremi güncelleyebildim :) Burada updatePassword error bag'inin nereden geldiğini görmek isterseniz app\Actions\Fortify\UpdatePassword.php içerisine bakmanız gerekiyor.

5) CRUD İşlemleri

Daha öncesinde SpringBoot, .Net kullanan biri olarak bana soracak olursanız Laravel'de işler çok daha kolay. Özellikle .Net'de tekrar tekrar oluşturduğunuz .cs dosyaları içersine yazdığınız aynı kodlardan kurtuluyorsunuz. Modeliniz oluşturduktan sonra tek yapmanız gereken ilgili Controller üzerinden modelinizi çağırarak işlemler yapmak. Index metodunda tüm verilerinizi listelemek mi istiyorsunuz Category:all(), sizin için sayfalama yapmasını mı istiyorsunuz Category:paginate(5) bitti. Tekrar tekrar her methodun üstüne Get mi Post mu, id mi alır ne döner binlerce Annotation tanımlamaktan kurtuluyorsunuz. Tamam burada da bir metodun Post ile mi Get ile mi çalışacağı belirtiliyor ama tamamen ayrı bir sayfada routinglerinizi ayarlamak için oluşturularn web.php üzerinde. O yüzden daha temiz bir controller yapısıyla karşı karşıya kalıyoruz diyebilirim.

Ayrıca, projeye başlarken sadece CRUD işlemleri yapacağımı sanmıştım ama takım arkadaşlarım sağolsun, metodlarımı url üzerinden manipüle edebileceklerini gördüğümden ilk defa bu uygulamamda Controller üzerinde aklıma gelen tüm senaryolara karşı kontrol yapıp bunu kodlarken buldum kendimi :)

6) Validation

Laravel ile validation yaparken direkt olarak controller'in içerisine kurallarımızı tanımlamıyoruz. Bunun yerine oluşturacağımız Request sınıfına Validation kurallarımızı ve mesajlarımızı tanımlıyoruz. php artisan make:request CategoryStoreRequest şeklinde oluşturduğumuz Request sınıfını dilediğiniz gibi düzenleyebilirsiniz.

7) View Composer

Benim proje için şöyle bir ihtiyacım doğdu. Projenin header kısmında kategorileri listelediğim bir yapım var. Bu kategori isimleri header'e veritabanından tüm kategori isimleri şeklinde geliyor. Bunun için gidip bir HeaderController oluşturup daha sonra bunu view'a return etmiyoruz. Benim de laravel ile birlikte tanıştığım View Composer yapısı ile birlikte oluşturacağımız değişkeni istediğimiz viewlar üzerinde paylaşabiliyoruz.

Örneğin: Ben App\ViewComposers\ altında CategoryCompser adlı sınıfı oluşturdum, bu sınıf içerisinde Category Modelimden $categories adlı değişkene tüm kategorilerimi çekip

public function compose(View $view)
    {
        $view -> with('categories', $this->categories->all());
    }

diyerek bu değişkeni global olarak projede paylaştım. Daha sonrasında ise ViewServiceProvider içerisinde bu sınıfımı View::composer('main.data.header', CategoryComposer::class); diyerek tanıttım.

Bu işlemlerin ardından artık Header içerisinden mevcut kategorilerime $categories değişkeni üzerinden erişebilirim.

8) Blade İçerisindeki Bazı Kontroller

Bu başlıkta Blade içerisinde yaptığım bazı kontrollerden bahsedeceğim. Örneğin kullanıcının giriş yapıp yapmadığı, giriş yapmış kullanıcının mevcut sayfada yetkisinin olup olmadığı gibi. Daha öncesinde böyle bir proje geliştirme fırsatım olmadığından yaptıklarımı Best Practices olarak sizlere sunamıyorum ama işimi çözme konusunda hem Blade templates hem laravel çok yardımcı oldu diyebilirim :)

Hızlıca bakacak olursak

Kullanıcının giriş yapıp yapmadığı:
@if (Route::has('login')) veya @if (Route::has('register')) ile kontrol edilebiliyor
Giriş yapmış kullanıcının bilgileri:
Auth::user() ile alınabiliyor örneğin id'si Auth::user()->id
Listelenen ürünün kullanıcıya ait olup olmadığı:
@if(Auth::user()->whereId(Auth::id())->with('shops')->get()->pluck('shops')->first()->id == $listing->shops->id)

gibi kontroller ile sayfalarınızdaki görüntülenen içerikler üzerinde hakimiyetiniz kolaylıkla oluyor diyebilirim.

9) Uygulamamızı Yayına Almak

Onlarca saatin ardından uygulamamızı localde iyice test ettikten sonra insanlara göstermek için yayına almamız gerekiyor. Şahsen daha önce bu konuda hiçbir tecrübesi olmayan biri olarak hızlıca bir laravel projesini nasıl yayına alırız bakalım.

Eğer öğrenciyseniz GitHub öğrenci paketine üye olun.
GitHub öğrenci paketinden 100$ değerindeki digitalocean hediye çekinizi alın.
GoDaddy üzerinden kendinize ait bir domain satın alın Örneğin: yunuselci
Deploy Laravel Project On Live Server bu videodaki adımları dikkatlice takip edin.

Adımları düzgün yaptığınız takdirde uygulamanız yayına hazır olacaktır ama linkini verdiğim videodaki adımları takip ederken her şeyi körü körüne kopyalamaktan kaçının. Örneğin sizin Php sürümünüz farklı olabilir, bağlandığınız uzak sunucuya, projenizdeki composer.json dosyası içerisindeki require php sürümünü kurduğunuzdan emin olun.

Kapanış:
Sıfırdan bir Laravel projesi oluşturmak aslında okuduğunuz kadar kolay.

Ben sıfırdan açıp bir kurs izleyerek bir şeyleri öğrendiğimi söyleyemem ama 4. Sınıfa kadar gerek daha önceki staj tecrübelerim, gerekse değerli hocalarımın bana öğretmeye çalıştığı yazılım geliştirme sürecini anladıkça, teknolojiden bağımsız olarak, neyi nasıl geliştireceğini öğrenip, bildikten sonra kullanacağınız her teknoloji için açıp yeni bir kurs izlemiyorsunuz.Yapacağınız şeyleri yaparken kullanacağınız teknolojinin gereksinimlerini, kısıtlamalarını, dökümantasyonunu inceledikten sonra bir proje oluşturup kodlamaya başlıyorsunuz :)

Herkese iyi çalışmalar dilerim, okuduğunuz için teşekkürler :)

DEV Community: Yunus

Difference Between onBlur vs onTouched

Laravel 9 İle Sıfırdan 90 Saatlik Uygulama Geliştirme Tecrübem