Bloga Dön

Modern Web Geliştirme

Yaklaşık 7 dk okuma
Modern Web Geliştirme

HTTP isteklerinden erişilebilir arayüzlere, güvenilir API'lere, veritabanı değişikliklerine ve yayına uzanan örnekli, uygulanabilir bir web geliştirme rehberi.

Modern web geliştirme, anlaşılır bir arayüzü arka plandaki güvenilir işlemlerle birleştirir. Ziyaretçi sunulan hizmeti anlamalı, yapmak istediği işi tamamlamalı ve gerçekte olanı anlatan bir sonuç görmelidir. Kullanılacak teknoloji bu yolculuk tanımlandıktan sonra seçilir. Bu rehberde, proje kataloğu bulunan ve görüşme talepleri alan varsayımsal bir tasarım stüdyosunu ele alacağız. Kod örnekleri mimariyi anlatmak içindir; gerçek Barmijly uç noktaları veya belgelenmiş bir müşteri projesi değildir.

İstek ve yanıtın izlediği yolu anlayın

Tarayıcı arayüzü gösterir, sunucu iş kurallarını uygular, veritabanı kayıtları saklar. HTTP, tarayıcı ile sunucu arasında istek ve yanıt taşır. Yanıt; durum kodu, başlıklar ve çoğu zaman bir içerik gövdesi içerir. MDN'nin istemci ve sunucu açıklaması bu görevleri tanıtır.

Stüdyonun proje sayfası açıldığında bir GET isteği gönderilir. Sunucu hazırlanmış HTML döndürebilir veya yanıtı oluşturmadan önce yayımlanmış projeleri okuyabilir. Tarayıcı daha sonra sayfanın başvurduğu stilleri, görselleri ve betikleri yükler. Görüşme formunun gönderilmesi ise alan değerlerini taşıyan bir POST isteği oluşturur. Sunucu veriyi denetler, talebi kaydeder ve kayıt numarasıyla yanıt verir. E-posta bildirimi ayrı bir işlemdir; e-posta gecikmesi kaydedilmiş talebi ortadan kaldırmamalıdır.

Başarı mesajını baştan tanımlayın. “Talebiniz kaydedildi” ile “Randevunuz onaylandı” farklı sonuçlardır. Bir çalışan saati ayrıca onaylayacaksa ilk mesaj incelemenin beklendiğini söylemelidir. Bu ayrım hem ekrandaki metni hem saklanacak durumları belirler. Kullanıcı bildirim alamadığında başvurabileceği yolu ve talebin ekip içindeki sorumlusunu da belirleyin.

Etkileşimden önce anlamlı HTML oluşturun

Başlıklar içerik düzenini, bağlantılar gezinmeyi, düğmeler ise işlemleri ifade etsin. Yerleşik form kontrolleri klavyeyle kullanım için yararlı davranışlar sağlar. Her alanın anlaşılır bir adı olmalıdır; yazmaya başlayınca kaybolan yer tutucu, etiketin yerini almamalıdır. W3C'nin alan etiketleme rehberi etiket ile kontrolün nasıl ilişkilendirildiğini açıklar.

<form action="/api/enquiries" method="post">
  <label for="email">E-posta adresiniz</label>
  <input id="email" name="email" type="email"
    autocomplete="email" required maxlength="254">
  <button type="submit">Görüşme talep edin</button>
</form>

Bu örnek, form verisinin kodlamasını kabul eden bir sunucu uç noktası gerektirir. Tarayıcı doğrulaması hızlı geri bildirim sağlar; sunucu aynı veriyi yeniden denetlemelidir. Gerekli bilgileri gönderimden önce açıklayın, hatayı ilgili alanın yanında gösterin ve başarısızlıkta yazılan değerleri koruyun. Klavye sırasını, görünür odağı, büyütülmüş metni, renk karşıtlığını ve görsellerin açıklamalarını deneyin. Yalnızca gönder düğmesini devre dışı bırakmak, kullanıcının neyi düzeltmesi gerektiğini anlatmaz.

Düzeni içeriğe ve dile uyarlayın

En dar kullanılabilir düzenle başlayın; içerik için yeterli yer oluştuğunda sütun ekleyin. Uzun çevirileri kesen sabit kart yüksekliklerinden kaçının. Aşağıdaki düzen, küçük ekranın genişliğini aşan bir asgari sütun zorlamadan proje kartlarını yerleştirir:

.projects {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: 1rem;
  max-inline-size: 70rem;
  margin-inline: auto;
  padding-inline: 1rem;
}
.project {
  min-inline-size: 0;
  overflow-wrap: anywhere;
}

padding-inline gibi mantıksal özellikler yazı yönünü izler; MDN'nin mantıksal özellikler rehberi bunun yazım düzenleriyle ilişkisini açıklar. Belgenin dilini ve yönünü açıkça belirleyin. Ardından Türkçe, İngilizce ve Arapçayı gerçek metinlerle deneyin. Mantıksal boşluklar, bir simgenin ters çevrilip çevrilmemesine karar vermez. Telefon numaraları ve kod bölümleri ayrıca soldan sağa yön gerektirebilir. Uzun proje adını, boş kataloğu ve dar ekranda açılan hata mesajını da kontrol edin.

JavaScript, TypeScript ve React için gerekçe belirleyin

JavaScript; projeleri filtreleme, ayrıntı açma ve gönderim mesajını değiştirme gibi etkileşimleri yönetir. İsteğe bağlı bir betik çalışmadığında temel içerik ve olağan gezinme mümkün olduğunca kullanılabilir kalsın. TypeScript geliştirme sırasında tür denetimi ekler; tür açıklamaları üretilen JavaScript'ten kaldırılır. Ağdan gelen JSON verisini kendiliğinden doğrulamaz ve çalışma zamanında güvenlik sağlamaz. TypeScript temel bilgiler rehberi bu denetimleri ve kaldırılan türleri açıklar.

Küçük bir katalog HTML, CSS ve az miktarda JavaScript ile başlayabilir. Filtreler, kaydedilen projeler ve karşılaştırma alanı gibi birden fazla kontrol değişen durumu paylaşıyorsa React yararlı olur. Daha büyük bir React uygulamasında yönlendirme, sayfa üretimi, veri yükleme ve dağıtımı birlikte değerlendirin. React uygulama kurulum rehberi çatı seçeneklerini anlatır. Yeni katmanlar eklemeden önce React başlangıç rehberimizle temel kavramları öğrenin.

API'yi açık bir veri sözleşmesi olarak tasarlayın

Alanlar, doğrulama hataları, izinler ve başarı yanıtı üzerinde önceden anlaşın. Aşağıdaki salt okuma örneği, metin türünde başlık taşıyan nesnelerden oluşan bir dizi bekler. Çağıran kod mevcut bir metin çıktı öğesini verir. fetch, HTTP hata yanıtlarında otomatik olarak reddedilmediği için durum kontrol edilir; MDN Fetch rehberi bu davranışı açıklar.

async function loadProjects(output) {
  try {
    const response = await fetch("/api/projects");
    if (!response.ok) throw new Error("HTTP error");
    const data = await response.json();
    if (!Array.isArray(data) || !data.every(
      item => item && typeof item.title === "string"
    )) throw new Error("Invalid data");
    output.textContent = data.map(item => item.title).join("\n");
  } catch {
    output.textContent = "Projeler yüklenemedi. Yeniden deneyin.";
  }
}

Gerçek katalogda yükleniyor ve boş sonuç mesajlarını, gerektiğinde isteği iptal etmeyi ve sonuç sayısının sınırlandırılmasını ekleyin. Yazma işlemlerinde sunucu yalnızca izin verilen alanları ve geçerli uzunlukları kabul etsin. Kimlik doğrulama kimin giriş yaptığını, yetkilendirme ise bu kişinin belirli bir talebe erişip erişemeyeceğini belirler. Yönetici düğmesini gizlemek uç noktayı korumaz. Parametreli veritabanı sorguları kullanın, çerezle doğrulanan yazma işlemlerini sahte isteklere karşı koruyun ve sırları sunucuda tutun. MDN'nin web güvenliğine giriş yazısı bu sınırlar için temel bilgi sunar.

Verileri ve şema değişikliklerini mevcut kayıtlara göre planlayın

Stüdyo için yayımlanmış projeler ve özel görüşme talepleri gerekir. Her kaydın sabit bir kimliği, zaman damgası ve açıkça tanımlanmış bir durumu bulunmalıdır. Takip için gerekli olmayan kişisel bilgileri toplamayın. Veritabanı kısıtları iş kurallarını desteklesin: örneğin bir projeye bağlı talep, gerçekten var olan projeyi göstermelidir. Birkaç değişiklik birlikte başarılı olmak zorundaysa veritabanı işlemi, yani transaction, kullanın. Böylece süreç yarım kayıtla sonuçlanmasın.

Bir migration, veritabanı yapısını veya verisini kontrollü biçimde değiştirir. Eski talepler bulunan tabloya zorunlu alan eklerken önce uyumlu alanı açın, geçerli değerleri doldurun, sonuçları denetleyin ve sonra zorunluluğu uygulayın. Kilitleri ve sürümlerin dağıtım sırasını değerlendirin. PostgreSQL tablo değiştirme belgeleri temel işlemleri açıklar. Değişikliği gerçekçi verilerle ve kurtarma planıyla deneyin. Boş veritabanının başarıyla kurulması, kullanılan bir veritabanının güvenle yükseltileceğini göstermez.

Ödemeyi sunucunun doğruladığı sonuçla kesinleştirin

Varsayımsal stüdyo ileride ücretli görüşme sunarsa beklenen siparişi ve tutarı sunucu oluşturmalıdır. Dönüş bağlantısı, arayüzdeki başarı mesajı veya yüklenmiş dekont ödeme onayı değildir. Kaydı ödendi olarak işaretlemeden önce sağlayıcının tamamlanmış sonucunu, tutarı, para birimini, alıcı hesabını ve iç siparişle bağlantısını doğrulayın. PayPal entegrasyon rehberi sipariş oluşturmayı ve tahsilatı sunucu tarafına yerleştirir.

Sağlayıcı kimliklerini saklayın; aynı bildirim tekrar geldiğinde ödemeyi ikinci kez uygulamayın. Tarayıcı yanıtı kesilirse körlemesine yeni tahsilat başlatmak yerine kayıtları sağlayıcıyla karşılaştırın. “Ödendi”, “randevu onaylandı” ve “hizmet teslim edildi” ayrı kanıtlara dayanan ayrı durumlar olsun. Bir ödemeyi almak, stüdyonun takvimdeki uygunluğu doğruladığı anlamına gelmez.

Performansı ölçün ve sayfaları bulunabilir kılın

Proje görsellerini gösterilecek boyuta uygun hazırlayın ve yüklenmeden önce yerlerini ayırın. Sayfanın aşağısındaki medyayı uygun olduğunda geciktirin; ana görseli otomatik olarak geç yüklemeyin. Yararına kıyasla fazla yükleme ve çalışma maliyeti oluşturan betikleri kaldırın. Web Vitals yükleme, yanıt verme ve görsel kararlılığı ayrı değerlendirir. Kontrollü testleri, yeterli ziyaretçi oluştuğunda gerçek kullanıcı ölçümleriyle birlikte okuyun.

Her herkese açık projeye yararlı başlık, açıklayıcı içerik ve taranabilir bağlantı verin. Gerçek HTTP durum kodlarını ve JavaScript çalışmadan önce sunucunun ne döndürdüğünü inceleyin. Google'ın SEO başlangıç rehberinden ve çok dilli site SEO rehberimizden yararlanın. Meta veriler zayıf içeriği telafi etmez; hiçbir uygulama belirli bir sıralamayı garanti etmez.

Kodu dağıtın, veriyi koruyun, hataları izleyin

Barındırma seçimini çalışma ortamına, kalıcı depolamaya, arka plan işlerine ve kurtarma ihtiyacına göre yapın. Geliştirme ve üretim ayarlarını ayırın. Git kaynak kodunun geçmişini tutar; bir commit göndermek, uygulamanın dağıtılmasını, veritabanının güncellenmesini veya müşteri verisinin yedeklenmesini tek başına garanti etmez. Bunlar yapılandırılmış süreçler ve doğrulanmış sonuçlar gerektirir. Eski kod sürümüne dönüş, veri silen bir değişikliği geri çevirmek yerine yeni şemayla uyumluluk gerektirebilir.

Veritabanını ve yüklenen dosyaları yedekleyin, erişimi sınırlandırın ve geri yüklemeyi deneyin. PostgreSQL yedekleme belgeleri kurtarma yaklaşımlarını ayırır. Sunucu hatalarını, başarısız gönderimleri ve bekleyen işleri izleyip sorumlu atayın. Günlükler, giriş bilgilerini veya özel talebin tamamını açığa çıkarmadan sorunu bulmaya yardımcı olmalıdır. Bu işleri site bakım ve güvenlik planına yerleştirin.

Yayından önce uygulanacak kontrol listesi

  1. Görüşme yolculuğunu telefonda ve bilgisayarda, desteklenen tüm dillerde tamamlayın; klavye kullanımını ve metin büyütmeyi deneyin.
  2. Geçersiz veriyi, sunucu hatasını, yavaş ağı, yinelenen gönderimi ve başka kullanıcıya ait kayda erişim girişimini sınayın.
  3. Veritabanı kısıtlarını, değişiklik sırasını, yedekten dönüşü ve üretimde kullanılacak gerçek ayarları doğrulayın.
  4. Ödeme varsa sağlayıcının test ortamında başarı, iptal, bekleme ve tekrarlanan bildirim durumlarını kontrol edin.
  5. Açık sayfaların başlıklarını, bağlantılarını, durum kodlarını, görsellerini ve özel sayfaların erişim kontrollerini inceleyin.
  6. İlk yayını izleyecek kişiyi belirleyin ve başarısız dağıtımda hangi adımlarla toparlanılacağını yazın.

Bu incelemeyi site yayın kontrol listesiyle genişletin. Yeni özelliklerden önce tek bir yolculuğu eksiksiz ve sınanabilir hale getirin. İyi web geliştirme; arayüz, sunucu kuralları, saklanan kayıtlar ve işletim sorumlulukları aynı gerçeği anlattığında ortaya çıkar.