Web-Dev-For-Beginners/translations/tr/7-bank-project/2-forms

Bankacılık Uygulaması Bölüm 2: Giriş ve Kayıt Formu Oluşturma

Ders Öncesi Test

Ders öncesi testi

Giriş

Neredeyse tüm modern web uygulamalarında, kendi özel alanınıza sahip olmak için bir hesap oluşturabilirsiniz. Birden fazla kullanıcı aynı anda bir web uygulamasına erişebildiğinden, her kullanıcının kişisel verilerini ayrı ayrı saklamak ve hangi bilgilerin görüntüleneceğini seçmek için bir mekanizmaya ihtiyacınız vardır. Kullanıcı kimliğini güvenli bir şekilde yönetmeyi bu derste ele almayacağız çünkü bu başlı başına kapsamlı bir konudur, ancak her kullanıcının uygulamamızda bir (veya daha fazla) banka hesabı oluşturabilmesini sağlayacağız.

Bu bölümde, web uygulamamıza giriş ve kayıt eklemek için HTML formlarını kullanacağız. Verileri bir sunucu API'sine programlı bir şekilde nasıl göndereceğimizi ve nihayetinde kullanıcı girdileri için temel doğrulama kurallarını nasıl tanımlayacağımızı göreceğiz.

Ön Koşul

Bu ders için web uygulamasının HTML şablonları ve yönlendirme bölümünü tamamlamış olmanız gerekiyor. Ayrıca Node.js yüklemiş ve sunucu API'sini çalıştırmış olmanız gerekiyor, böylece hesap oluşturmak için veri gönderebilirsiniz.

Dikkat Edin Aynı anda aşağıda listelenen iki terminal çalıştırmanız gerekecek:

1. HTML şablonları ve yönlendirme dersinde oluşturduğumuz ana banka uygulaması için
2. Yukarıda kurduğumuz Banka Uygulaması sunucu API'si için.

Dersin geri kalanını takip edebilmek için iki sunucunun da çalışır durumda olması gerekiyor. Bunlar farklı portlarda (port 3000 ve port 5000) dinliyor, bu yüzden her şey sorunsuz çalışmalı.

Sunucunun düzgün çalıştığını test etmek için bir terminalde şu komutu çalıştırabilirsiniz:

curl http://localhost:5000/api
# -> should return "Bank API v1.0.0" as a result

---

Form ve Kontroller

<form> elementi, kullanıcının etkileşimli kontrollerle veri girebileceği ve gönderebileceği bir HTML belgesinin bir bölümünü kapsar. Bir form içinde kullanılabilecek her türlü kullanıcı arayüzü (UI) kontrolü vardır, bunların en yaygın olanı <input> ve <button> elementleridir.

Kullanıcının kullanıcı adını girebileceği bir alan oluşturmak için, <input> elementinin farklı türlerini kullanabilirsiniz. Örneğin:

<input id="username" name="username" type="text">

name özelliği, form verileri gönderildiğinde kullanılacak özellik adını belirtir. id özelliği ise bir <label> ile form kontrolünü ilişkilendirmek için kullanılır.

<input> türlerinin ve diğer form kontrollerinin tam listesine göz atarak, UI'nizi oluştururken kullanabileceğiniz tüm yerel UI öğeleri hakkında fikir edinebilirsiniz.

✅ <input> bir boş elementtir, bu yüzden eşleşen bir kapanış etiketi eklememelisiniz. Ancak, kendi kendini kapatan <input/> notasyonunu kullanabilirsiniz, ancak bu gerekli değildir.

Bir form içindeki <button> elementi biraz özeldir. Eğer type özelliğini belirtmezseniz, basıldığında form verilerini otomatik olarak sunucuya gönderir. İşte olası type değerleri:

• submit: Bir <form> içinde varsayılan olarak, düğme form gönderme işlemini tetikler.
• reset: Düğme, tüm form kontrollerini başlangıç değerlerine sıfırlar.
• button: Düğme basıldığında varsayılan bir davranış atamaz. Bunun yerine JavaScript kullanarak özel eylemler atayabilirsiniz.

Görev

login şablonuna bir form ekleyerek başlayalım. Bir kullanıcı adı alanına ve bir Giriş düğmesine ihtiyacımız olacak.

<template id="login">
  <h1>Bank App</h1>
  <section>
    <h2>Login</h2>
    <form id="loginForm">
      <label for="username">Username</label>
      <input id="username" name="user" type="text">
      <button>Login</button>
    </form>
  </section>
</template>

Daha yakından bakarsanız, burada bir <label> elementi de eklediğimizi fark edebilirsiniz. <label> elementleri, kullanıcı arayüzü kontrollerine bir ad eklemek için kullanılır, örneğin kullanıcı adı alanımız gibi. Etiketler, formlarınızın okunabilirliği için önemlidir, ancak aynı zamanda ek avantajlar da sağlar:

• Bir etiketi bir form kontrolüyle ilişkilendirerek, yardımcı teknolojiler (örneğin ekran okuyucular) kullanan kullanıcıların hangi verileri sağlamaları gerektiğini anlamalarına yardımcı olur.
• Etikete tıklayarak, ilgili girdiye doğrudan odaklanabilirsiniz, bu da dokunmatik ekranlı cihazlarda erişimi kolaylaştırır.

Web'de erişilebilirlik genellikle göz ardı edilen çok önemli bir konudur. Semantik HTML elementleri sayesinde, bunları doğru bir şekilde kullanırsanız erişilebilir içerik oluşturmak zor değildir. Erişilebilirlik hakkında daha fazla bilgi edinebilirsiniz ve yaygın hatalardan kaçınarak sorumlu bir geliştirici olabilirsiniz.

Şimdi, önceki formun hemen altına bir kayıt formu ekleyelim:

<hr/>
<h2>Register</h2>
<form id="registerForm">
  <label for="user">Username</label>
  <input id="user" name="user" type="text">
  <label for="currency">Currency</label>
  <input id="currency" name="currency" type="text" value="$">
  <label for="description">Description</label>
  <input id="description" name="description" type="text">
  <label for="balance">Current balance</label>
  <input id="balance" name="balance" type="number" value="0">
  <button>Register</button>
</form>

value özelliğini kullanarak belirli bir giriş için varsayılan bir değer tanımlayabiliriz. Ayrıca, balance için olan girdinin number türüne sahip olduğunu fark edin. Diğer girdilerden farklı mı görünüyor? Onunla etkileşim kurmayı deneyin.

✅ Sadece klavye kullanarak formlarda gezinip etkileşim kurabilir misiniz? Bunu nasıl yapardınız?

Verileri Sunucuya Gönderme

Artık işlevsel bir kullanıcı arayüzümüz olduğuna göre, bir sonraki adım verileri sunucumuza göndermek. Mevcut kodumuzu kullanarak hızlı bir test yapalım: Giriş Yap veya Kayıt Ol düğmesine tıklarsanız ne olur?

Tarayıcınızın URL bölümünde bir değişiklik fark ettiniz mi?

Bir <form> için varsayılan eylem, formu mevcut sunucu URL'sine GET yöntemi kullanarak göndermek ve form verilerini doğrudan URL'ye eklemektir. Ancak bu yöntemin bazı dezavantajları vardır:

• Gönderilen veri boyutu çok sınırlıdır (yaklaşık 2000 karakter)
• Veriler URL'de doğrudan görünür (şifreler için iyi değil)
• Dosya yüklemeleriyle çalışmaz

Bu nedenle, form verilerini HTTP isteğinin gövdesinde sunucuya gönderen ve önceki sınırlamaların hiçbirine sahip olmayan POST yöntemini kullanabilirsiniz.

POST, veri göndermek için en yaygın kullanılan yöntemdir, ancak belirli senaryolarda bir arama alanı uygularken olduğu gibi GET yöntemini kullanmak tercih edilebilir.

Görev

Kayıt formuna action ve method özelliklerini ekleyin:

<form id="registerForm" action="//localhost:5000/api/accounts" method="POST">

Şimdi adınızı kullanarak yeni bir hesap kaydetmeyi deneyin. Kayıt Ol düğmesine tıkladıktan sonra şu gibi bir şey görmelisiniz:

Her şey yolunda giderse, sunucu isteğinize oluşturulan hesap verilerini içeren bir JSON yanıtı ile cevap vermelidir.

✅ Aynı adla tekrar kayıt olmayı deneyin. Ne olur?

Sayfa Yenilemeden Veri Gönderme

Muhtemelen fark ettiğiniz gibi, az önce kullandığımız yaklaşımda küçük bir sorun var: formu gönderdiğimizde uygulamamızdan çıkıyoruz ve tarayıcı sunucu URL'sine yönlendiriyor. Web uygulamamızda tüm sayfa yenilemelerinden kaçınmaya çalışıyoruz çünkü bir Tek sayfa uygulaması (SPA) yapıyoruz.

Form verilerini sayfa yenilemeden sunucuya göndermek için JavaScript kodu kullanmamız gerekiyor. Bir <form> elementinin action özelliğine bir URL koymak yerine, javascript: dizesiyle başlayan herhangi bir JavaScript kodunu kullanarak özel bir işlem gerçekleştirebilirsiniz. Bunu kullanmak, tarayıcının daha önce otomatik olarak yaptığı bazı görevleri sizin uygulamanız gerektiği anlamına gelir:

• Form verilerini almak
• Form verilerini uygun bir formata dönüştürmek ve kodlamak
• HTTP isteği oluşturmak ve sunucuya göndermek

Görev

Kayıt formunun action özelliğini şu şekilde değiştirin:

<form id="registerForm" action="javascript:register()">

app.js dosyasını açın ve register adında yeni bir fonksiyon ekleyin:

function register() {
  const registerForm = document.getElementById('registerForm');
  const formData = new FormData(registerForm);
  const data = Object.fromEntries(formData);
  const jsonData = JSON.stringify(data);
}

Burada, getElementById() kullanarak form elementini alıyoruz ve FormData yardımıyla form kontrollerinden değerleri anahtar/değer çiftleri olarak çıkarıyoruz. Daha sonra verileri Object.fromEntries() kullanarak düzenli bir nesneye dönüştürüyoruz ve son olarak verileri web üzerinde yaygın olarak kullanılan bir format olan JSON olarak serileştiriyoruz.

Veriler artık sunucuya gönderilmeye hazır. createAccount adında yeni bir fonksiyon oluşturun:

async function createAccount(account) {
  try {
    const response = await fetch('//localhost:5000/api/accounts', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: account
    });
    return await response.json();
  } catch (error) {
    return { error: error.message || 'Unknown error' };
  }
}

Bu fonksiyon ne yapıyor? İlk olarak, burada async anahtar kelimesine dikkat edin. Bu, fonksiyonun asenkron kod içereceği anlamına gelir. await anahtar kelimesiyle birlikte kullanıldığında, burada olduğu gibi sunucu yanıtını beklemek gibi asenkron kodun yürütülmesini beklemeye olanak tanır.

fetch() API'sini kullanarak JSON verilerini sunucuya gönderiyoruz. Bu yöntem 2 parametre alır:

• Sunucunun URL'si, bu yüzden buraya //localhost:5000/api/accounts koyuyoruz.
• İsteğin ayarları. Burada yöntemi POST olarak ayarladığımız ve isteğin body kısmını sağladığımız yer. JSON verilerini sunucuya gönderdiğimiz için, içeriğin nasıl yorumlanacağını sunucuya bildirmek için Content-Type başlığını application/json olarak ayarlamamız gerekiyor.

Sunucu isteğe JSON ile yanıt vereceği için, JSON içeriğini ayrıştırmak ve ortaya çıkan nesneyi döndürmek için await response.json() kullanabiliriz. Bu yöntemin asenkron olduğunu unutmayın, bu yüzden ayrıştırma sırasında oluşabilecek hataların da yakalanmasını sağlamak için burada await anahtar kelimesini kullanıyoruz.

Şimdi register fonksiyonuna createAccount() çağrısı eklemek için biraz kod ekleyin:

const result = await createAccount(jsonData);

Burada await anahtar kelimesini kullandığımız için, register fonksiyonunun başına async anahtar kelimesini eklememiz gerekiyor:

async function register() {

Son olarak, sonucu kontrol etmek için bazı loglar ekleyelim. Son fonksiyon şu şekilde görünmelidir:

async function register() {
  const registerForm = document.getElementById('registerForm');
  const formData = new FormData(registerForm);
  const jsonData = JSON.stringify(Object.fromEntries(formData));
  const result = await createAccount(jsonData);

  if (result.error) {
    return console.log('An error occurred:', result.error);
  }

  console.log('Account created!', result);
}

Bu biraz uzun sürdü ama başardık! Tarayıcı geliştirici araçlarını açarsanız ve yeni bir hesap kaydetmeyi denerseniz, web sayfasında herhangi bir değişiklik görmemelisiniz, ancak her şeyin çalıştığını doğrulayan bir mesaj konsolda görünecektir.

✅ Verilerin sunucuya güvenli bir şekilde gönderildiğini düşünüyor musunuz? Ya biri isteği engelleyebilirse? Güvenli veri iletişimi hakkında daha fazla bilgi edinmek için HTTPS hakkında okuyabilirsiniz.

Veri Doğrulama

Eğer önce bir kullanıcı adı ayarlamadan yeni bir hesap kaydetmeyi denerseniz, sunucunun 400 (Geçersiz İstek) durum koduyla bir hata döndürdüğünü görebilirsiniz.

Bir sunucuya veri göndermeden önce, mümkün olduğunda form verilerini doğrulamak iyi bir uygulamadır, böylece geçerli bir istek gönderdiğinizden emin olabilirsiniz. HTML5 form kontrolleri, çeşitli özellikler kullanarak yerleşik doğrulama sağlar:

• required: Alan doldurulmadığı sürece form gönderilemez.
• minlength ve maxlength: Metin alanlarında minimum ve maksimum karakter sayısını tanımlar.
• min ve max: Sayısal bir alanın minimum ve maksimum değerini tanımlar.
• type: Beklenen veri türünü tanımlar, örneğin number, email, file veya diğer yerleşik türler. Bu özellik ayrıca form kontrolünün görsel görünümünü değiştirebilir.
• pattern: Girilen verilerin geçerli olup olmadığını test etmek için bir düzenli ifade deseni tanımlamaya olanak tanır. İpucu: Form kontrollerinizin geçerli veya geçersiz olup olmadığına bağlı olarak görünümünü özelleştirmek için :valid ve :invalid CSS pseudo-class'larını kullanabilirsiniz.

Görev

Geçerli bir yeni hesap oluşturmak için gerekli olan iki alan vardır: kullanıcı adı ve para birimi. Diğer alanlar isteğe bağlıdır. Formun HTML'ini güncelleyin ve hem required özelliğini hem de alanın etiketindeki metni kullanarak şunları yapın:

<label for="user">Username (required)</label>
<input id="user" name="user" type="text" required>
...
<label for="currency">Currency (required)</label>
<input id="currency" name="currency" type="text" value="$" required>

Bu özel sunucu uygulaması, alanların maksimum uzunluğu üzerinde belirli sınırları zorlamasa da, kullanıcı metin girişleri için makul sınırlar tanımlamak her zaman iyi bir uygulamadır.

Metin alanlarına bir maxlength özelliği ekleyin:

<input id="user" name="user" type="text" maxlength="20" required>
...
<input id="currency" name="currency" type="text" value="$" maxlength="5" required>
...
<input id="description" name="description" type="text" maxlength="100">

Şimdi Kaydol düğmesine basarsanız ve bir alan tanımladığımız bir doğrulama kuralına uymazsa, aşağıdaki gibi bir şey görmelisiniz:

Bu tür doğrulama, herhangi bir veri sunucuya gönderilmeden önce gerçekleştirilir ve istemci tarafı doğrulama olarak adlandırılır. Ancak, tüm kontrolleri veri göndermeden gerçekleştirmek her zaman mümkün değildir. Örneğin, burada aynı kullanıcı adına sahip bir hesabın zaten var olup olmadığını sunucuya bir istek göndermeden kontrol edemeyiz. Sunucuda gerçekleştirilen ek doğrulama ise sunucu tarafı doğrulama olarak adlandırılır.

Genellikle her ikisinin de uygulanması gerekir ve istemci tarafı doğrulama, kullanıcıya anında geri bildirim sağlayarak kullanıcı deneyimini iyileştirirken, sunucu tarafı doğrulama, işlediğiniz kullanıcı verilerinin sağlam ve güvenli olmasını sağlamak için çok önemlidir.

---

🚀 Meydan Okuma

HTML'de kullanıcı zaten mevcutsa bir hata mesajı gösterin.

İşte biraz stil ekledikten sonra son giriş sayfasının nasıl görünebileceğine dair bir örnek:

Ders Sonrası Test

Ders sonrası test

Gözden Geçirme ve Kendi Kendine Çalışma

Geliştiriciler, özellikle doğrulama stratejileri konusunda, form oluşturma çabalarında oldukça yaratıcı hale geldiler. CodePen üzerinden farklı form akışlarını öğrenin; ilginç ve ilham verici formlar bulabilir misiniz?

Ödev

Bankacılık uygulamanızı stilize edin

---

Feragatname:
Bu belge, Co-op Translator adlı yapay zeka çeviri hizmeti kullanılarak çevrilmiştir. Doğruluk için çaba göstersek de, otomatik çevirilerin hata veya yanlışlıklar içerebileceğini lütfen unutmayın. Belgenin orijinal dili, yetkili kaynak olarak kabul edilmelidir. Kritik bilgiler için profesyonel insan çevirisi önerilir. Bu çevirinin kullanımından kaynaklanan yanlış anlama veya yanlış yorumlamalardan sorumlu değiliz.