DEV Community: Berkan Yıldırım

Bilmeniz gereken HTTP Durum Kodları

Berkan Yıldırım — Sat, 08 Apr 2023 15:42:44 +0000

Merhaba,

Bir istemci bir sunucuya istek gönderdiğinde, yanıt her zaman bir durum kodu içerir. Bunu her zaman göremeyebilirsiniz ama her işlemci-sunucu etkileşiminde bu durum kodları döndürülür. Bir programcı olmasak bile 404 Sayfa bulunamadı hatasını bir çoğumuz bilmektedir.

Bu yazımda , HTTP ve durum kodları hakkında öğrendiklerimi ve araştırmalarımı sizinle paylaşacağım.

Bu yazı neler anlatıyor.

HTTP nedir ?

Durum kodu nedir ?

1XX - Bilgilendirme yanıtları(Informational Response)

2XX - Başarı işlem yanıtları(Success)

3XX - Yönlendirme mesajları(Redirection)

4XX - İşlemci hatası mesajları(Client errors)

5XX - Sunucu hatası mesajları(Server errors)

HTTP nedir ?

“Hyper Text Transfer Protocol” ifadesinin kısaltması olan HTTP, Türkçede kendine “Köprü Metni Aktarım Protokolü” ya da “Hiper Metin Transfer Protokolü” şeklinde karşılık bulur. Evrensel kullanımı HTTP şeklindedir ve web üzerindeki mesajların, biçim ve gönderim şeklini tanımlayan standart bir protokoldür.

Durum kodu nedir ?

HTTP durum kodları, sunucuların istemcilere döndürdüğü yanıtların başarısını veya başarısızlığını belirleyen üç haneli sayısal kodlardır. Her durum kodu belirli bir anlam taşır ve belirli bir yanıt türünü ifade eder.

Temel olarak beş standart grup vardır. Bunlar aşağıdaki gibidir:

1XX - Bilgilendirme yanıtları(Informational Response)
2XX - Başarı işlem yanıtları(Success)
3XX - Yönlendirme mesajları(Redirection)
4XX - İşlemci hatası mesajları(Client errors)
5XX - Sunucu hatası mesajları(Server errors)

Her gruba kısaca bir göz atalım.

1XX — Informational Response

Bilgilendirici bir yanıt, isteğin alındığını ve anlaşıldığını gösterir. Talep işleme devam ederken geçici olarak verilir.

100 Continue: İstemci, isteğine devam edebilir. Sunucu, isteği kabul etti ve isteğin devamını bekliyor.

101 Switching Protocols: Sunucu, istemci talebi üzerine protokol değiştiriyor.

102 — Processing: Bu kod, sunucunun isteği aldığını ve işlemekte olduğunu ancak henüz yanıt alınamadığını gösterir.

103 — Early Hints: Son HTTP mesajından önce bazı yanıt başlıklarını döndürmek için kullanılır.

2XX — Success

Sunucu, isteği başarıyla işledi.

200 OK: İstek başarılı, sunucu istenen kaynağı buldu ve yanıt verdi.

201 Created: İstek başarılı, sunucu yeni bir kaynak oluşturdu.

202 Accepted: Sunucu, isteği kabul etti ancak henüz işleme almadı.

203 Non-Authoritative Information: Sunucu, yanıt verirken kaynağı doğrudan almadı, başka bir kaynaktan alınan bilgiyi yanıt olarak döndürdü.

204 No Content: Sunucu, isteği başarılı bir şekilde işledi ancak yanıt olarak içerik döndürmedi.

3XX — Redirection

İstemci, yeni bir konuma gitmesi gerekiyor.

300 Multiple Choices: İstemci, kaynağın birden fazla sürümü olduğu için bir seçim yapmak zorunda kalabilir.

301 Moved Permanently: Kaynağın önemli ölçüde yeniden tasarlandığını ve istemcinin istenen kaynağına yeni bir kalıcı URI’nin atandığını gösterir.

302 Found: İstek yapılan kaynak geçici olarak başka bir URI'da bulunduğu için, istemci isteği yeni yerine yönlendirir.

303 See Other: İstemci, başka bir URI'ye yönlendirilmelidir.

304 Not Modified: İstemci, kaynakta herhangi bir değişiklik olmadığı için önbellekteki veriyi kullanabilir.

307 Temporary Redirect: İstemci, kaynağın geçici olarak başka bir URI'da bulunduğunu belirten bir yanıt alır.

4XX — Client errors

Sunucu, isteği işleyemez.

400 Bad Request: Sunucunun geçersiz bir istek sebebiyle isteği anlayamadığını belirtir.

401 Unauthorized: Anlamsal olarak “kimliği doğrulanmamış” anlamına gelir. İstemci istenen yanıtı almak için kendini bir nevi doğrulamalıdır.

403 Forbidden: İstemcinin içeriğe erişim hakkı yoktur, yani yetkisizdir. 401’den farkı, istemcinin kimliği sunucu tarafından bilinir.

404 Not Found: Sunucu istenen kaynağı bulamıyor. Tarayıcı tarafında URL’nin tanınmadığı anlamına geliyor. API tarafında ise endpoint’in geçerli olduğunu fakat kaynağın kendisinin mevcut olmadığı anlamına gelir.

405 Method Not Allowed: İstek yapılan kaynak, istenen HTTP metoduyla uyumlu değil.

406 Not Acceptable: Sunucu, istemcinin kabul edilebilir içerik türlerini desteklemiyor.

5XX — Server Errors

Sunucu, isteği işleyemedi ve istemciye yanıt veremedi. 500 durum kodu, bir sunucu hatası olduğunu ve isteğin başarısız olduğunu belirtir.

500 Internal Server Error: Sunucu, isteği işleyemedi ve beklenmeyen bir hata meydana geldi.

501 Not Implemented: Sunucu, istemcinin istediği işlemi gerçekleştirecek yeteneğe sahip değil.

502 Bad Gateway: Sunucu, istemcinin talebini yerine getirebilmek için, bir proxy sunucu veya başka bir aracı sunucuya ihtiyaç duyduğunda ve bu aracı sunucudan beklenen yanıt alınamadığında gönderilir.

503 Service Unavailable: Sunucu, isteği karşılamak için geçici olarak kullanılamaz durumda.

504 Gateway Timeout: Sunucu, istemcinin talebini yerine getirebilmek için, bir proxy sunucu veya başka bir aracı sunucuya ihtiyaç duyduğunda ve bu aracı sunucudan beklenen yanıt süresi aşıldığında gönderilir.

505 HTTP Version Not Supported: Sunucu, istemcinin talep ettiği HTTP sürümünü desteklemiyor.

Bu yazımda anlatacaklarım umarım sizin içinde faydalı olmuştur. Okuyup zaman ayırdığınız için teşekkür ederim.

Kaynakça:

Formik ve Yup ile React Form Validasyonu

Berkan Yıldırım — Sun, 21 Aug 2022 12:40:32 +0000

Bir çoğumuz projelerimizde ve gündelik çalışmalarımızda formlar ile çalıştık ve çalışıyoruz. Peki oluşturduğumuz bu form yapılarımıza valisdasyonlarımızı yani doğrulamalarımızı koyuyor muyuz ?

İstemci tarafı form doğrulamasını yerleştirmeliyiz. Bunun nedeni, kullanıcı deneyimini ve web sitesi performansını iyileştirmesi ve arka uç sunucusuna geçersiz veri gönderilmesini engeller.

Bu yazıda React'a Formik ve Yup kullanarak email , şifre ve şifre kontrol alanlarına nasıl doğrulama ekleyeceğimizi anlatacağım.

Adım 1 : Yeni bir React projesi oluşturalım.

npx create-react-app form-validation

Adım 2 : Ardından uygulamaya formik kütüphanesini kuralım

cd form-validation
npm install formik --save

Adım 3 : Ardından uygulamamıza Yup'u dahil edelim

npm install yup --save

Adım 4 : Uygulama klasörlerimiz içerisinde components isimli bir klasör daha açalım ve bunun içerisine Signup.js isimli dosya oluşturalım. Daha sonra validations.js isimli bir dosya daha oluşturalım burada form'umuz için gerekli olan validasyonları tanımlayıp Signup.js sayfamızda import edeceğiz.

Adım 5 : Signup.js dosyamızda gerekli importları yapalım.

import React from "react";
import { useFormik } from "formik";
import validationSchema from "./validations";

Adım 6 : Daha sonra useFormik ile initialValues , handleSubmit,validationSchema özelliklerini ekleyin.

const { handleChange, handleSubmit, values, handleBlur, errors, touched } =
    useFormik({
      initialValues: {
        email: "",
        password: "",
        passwordConfirm: "",
      },
      onSubmit: (values) => {
        console.log(values);
      },
      validationSchema,
    });

Burada gördüğümüz :

handleChange: form yapısında inputlar içerisindeki değişimleri yakalamak için.
handleSubmit: form submit olduğunda kullanacağımız özellik.
values: Form inputlarında girilen değerleri yakalamak için kullandığımız özellik
handleBlur: İnputa tıklandı ve daha sonra tıklanan inputtan çıktığınız an çalışan özellik.
errors: Yup'un formikle uyumlu çalıştığını gösteren özellik ismindende anlaşılacağı gibi inputlardaki error mesajları için kullanılır.
touched: İnputa daha önce touch olmuşmu yani focus yapılmışmı.

validations.js import ettiğimiz isimi fark ettiyseniz useFormik içerisinde kullandığımız validationSchema ile aynı bunun nedeni eğer farklı bir isimle(validations) import etseydik useFormik içerisinde validationSchema=validations şeklinde kullanmamız gerekecekti.

Daha kolay ve pratik olması için ben böyle bir kullanıma gittim bu sizin tercihinize göre değişebilir.

Adım 7 : validations.js dosyamızda artık gerekli kontrolleri yazabiliriz.

const validations = yup.object().shape({
  email: yup
    .string()
    .email("Geçerli Bir Email Giriniz !!")
    .required("Zorunlu Alan"), 
  password: yup.string().min(5, "En az 5 karakter giriniz !!").required(),
  passwordConfirm: yup
    .string()
    .oneOf([yup.ref("password")])
    .required(),
});

Burada email için strgin olduğunu ve geçerli bir email olup olmadığının kontrolü için yup'un email() fonk. kullanıyoruz ve son olarak zorunlu alan olduğu içinde required() kullanıyoruz.

Aynı şekilde password ve passwordConfirm için string olduğunu passwordun minimum 5 karakter olacağını ve passwordConfirm'ün password ile aynı olup olmadığını anlamak içinde oneOf() özelliği içinde password'u referans veriyoruz.

Burada parantez içerisinde yazdığım türkçe uyarılar ise yup'un bize sağladığı default errorlar haricinde kendi görmek istediğiniz errorları oluşturmanız için kullanılan alan olarak düşünebilirz.

Adım 8 : Son olarak form yapımızı oluşturalım ve inputların her birine onChange eklemeyi unutmayalım.

<form onSubmit={handleSubmit}>
        <label>Email</label>
        <input
          name="email"
          value={values.email}
          onChange={handleChange}
          onBlur={handleBlur}
        />
        {errors.email && touched.email && (
          <div className="errors">{errors.email}</div>
        )}
        <br />
        <br />
        <label>Password</label>
        <input
          name="password"
          value={values.password}
          onChange={handleChange}
          onBlur={handleBlur}
        />
        {errors.password && touched.password && (
          <div className="errors">{errors.password}</div>
        )}

        <br />
        <br />
        <label>Password Confirm</label>
        <input
          name="passwordConfirm"
          value={values.passwordConfirm}
          onChange={handleChange}
          onBlur={handleBlur}
        />
        {errors.passwordConfirm && touched.passwordConfirm && (
          <div className="errors">{errors.passwordConfirm}</div>
        )}

        <br />
        <br />
        <button type="submit">Submit</button>
      </form>

Uygulamamızda errorlar şu şekilde gözükecektir.

Uygulama Kodları: formik-yup-app

Vaktinizi ayırıp yazımı okuduğunuz için teşekkür ederim. Daha fazla bilgi için iletişime geçebilirsiniz.

Javascript Nesnelere Metod Nasıl Eklenir ?

Berkan Yıldırım — Sat, 09 Apr 2022 09:43:43 +0000

Metot Nedir?

JavaScript'in referans veri tiplerinden biri olan ve Türkçede "nesne" anlamına gelen object key-value (anahtar-değer) yapı mantığına sahip bir veri tipidir. Yani bir nesne oluştururken bu nesnemiz için bir veya birden fazla property (özellik) tanımlanabilir ve key-value mantığındaki gibi nesnemizin sahip olduğu özellikler için değerler verilmelidir.

Özelliklerin sahip olduğu değerler farklı veri tiplerinde olabileceği gibi bir fonksiyonu da işaret edebilir. Bir özellik eğer bir fonksiyonu işaret ediyorsa bu özelliğe metot denir.

Bir nesneye metot 2 şekilde eklenebilir. Bunlardan biri yukarda bahsedildiği üzere nesneye property olarak eklemek, bir diğeri ise prototype (prototip) fonksiyonu üzerinden eklemektir.

Metotu Özellik Olarak Eklemek
Metot, bir nesnenin oluşturulduğu sırada özellik olarak eklenip tanımlanabileceği gibi, önceden tanımlanmış bir nesneye sonradan da eklenebilir. Biz bu yazımızda ilk durumu ele alıp aşağıdaki örneği ona göre inceleyelim.

Örneğin; "cat" adında bir nesne oluşturalım ve bu nesnemiz "name", "age" özelliklerine, bu kedinin ismini ,yaşını ve çıkardığı sesi bize getirecek bir "introduce" metoduna sahip olsun.

var cat = {
  name: "Mr. Puff",
  age: 8,
  introduce: function(){
    return(`My name is ${this.name} ,I'm ${this.age} yo. And my sound meow  meow `);
  }
}
console.log(cat.introduce())

Yukarıdaki gibi, metot tanımlanırken function() anahtar kelimesi kullanılarak yapılabileceği gibi EcmaScript6'nın arrow function yönteminin söz diziminden yararlanarak yapmak da mümkündür.

Fakat burada dikkat edilmesi gereken noktalardan biri arrow functionlar this erişimine sahip değildir. Yani aşağıdaki gibi bir kullanımda introduce fonksiyonu çalıştırıldığında çıktıda özellikler undefined (tanımlanmamış) olarak gözükecektir.

var cat = {
  name: "Mr. Puff",
  age: 8,
  introduce: () => {
    return(`My name is ${this.name} ,I'm ${this.age} yo. And my sound meow  meow `);
  }
}
console.log(cat.introduce())

My name is ,I'm undefined yo. And my sound meow meow

Yukarıdaki kodumuzun çıktısı bu şekilde olacaktır.Yani bir metodun arrow function söz dizimi kullanılarak yapılmak istendiği bir durumda özelliklere nesnenin ismiyle erişilebilir. Buna göre yukarda arrow function kullanarak oluşturduğumuz metot içerisinde özelliklere erişim şu şekilde olacaktır;

var cat = {
  name: "Mr. Puff",
  age: 8,
  introduce: () => {
    return(`My name is ${cat.name} ,I'm ${cat.age} yo. And my sound meow  meow `);
  }
}
console.log(cat.introduce())

Bu şekilde kullanımımızda undefined (tanımlanmamış) gözükmelerin önüne geçmiş olacağız.

Bu yazımda metotların ne olduğunu ve JavaScript nesnesi oluştururken bu nesneye property yöntemi ile nasıl metot ekleyeceğimizi anlattım.Bir sonraki yazımda görüşmek üzere.

Node.js Nedir ?

Berkan Yıldırım — Mon, 04 Apr 2022 08:07:37 +0000

Arkadaşlar bu yazımda sizlere patika.dev üzerindeki Node.js eğitimlerini tamamlarken öğrendiklerimi sizler ile paylaşarak hem kendi bilgilerimi tekrar ederek daha iyi öğrenmeyi , hem de bu konu hakkında bilgi almak isteyen arkadaşlara yardımcı olmayı hedefliyorum.

O zaman hemen başlayalım nedir bu Node.js ?

Javascript programlama dili bildiğiniz üzere eskiden sadece istemci tarafında (client-side) çalışan bir dildi. Tarayıcıda çalıştırdığımız Chrome V8 Engine kullanıma sunuldu ve artık sunucu tarafında da (server-side) Javascript dilini kullanabiliyoruz. İşte Javascript dilini sunucu tarafında kullanmamıza olanak sağlayan Chrome V8 Engine, Node.js olarak adlandırılmaktadır.

V8 Javascript motoru hakkında daha detaylı bilgi almak için aşağıdaki linki tıklayabilirsiniz.

V8.dev

Node.js temel olarak sunucu tarafında çalışan javascripttir. Javascript temelli olması sebebiyle çok dinamik ve hızlı yapısı vardır.

Javascript dilinin Node.js vasıtasıyla Back-end’e taşınmasıyla artık sadece bir dil bilerek full-stack uygulama geliştirebilirsiniz.

Peki Javascript ve Node.js Neden bu kadar son dönemde popüler oldu?

Node.js’in en önemli özelliği asenkron yapıda çalışması ve non-blocking olması. Peki nedir bu asenkron çalışma ve non-blocking?

Node.js tarafına bir işlem için istek gönderildiğinde node.js onu alıp hemen işleme koyuyor ama diğer işlemi almak için bu işlemin bitmesini beklemiyor. Sırayla istekleri alıyor ve sonuçları beklemeden devam ediyor. Sonuçlar geldikçe iletiyor.

Bu durumda bir istek diğer isteğin bitmesini beklemediği için diğer isteği engellememiş oluyor. Hangisi önce biterse o isteğin cevabı geliyor. İşte bu mantığa asenkron çalışma mantığı deniyor ve bir işlem diğer işlemi engellemediği içinde non-blocking oluyor.

Aynı zamanda birden çok kullanıcıya hızlı cevap verebildiği için ölçeklenebilirlik sorununa çözüm sunuyor. Bu da aslında onun popüler olmasının temel nedenlerinde biri. Aynı anda binlerce insanın kullandığı bir sistem geliştiriyorsak node.js çok iyi bir tercih olacaktır.

Nodejs’in en büyük avantajlarından bir tanesi de modüler yapısı ve bu yapıyı destekleyen paket yönetim sistemi olan npm (nodejs package manager). Npm’i Node.js projelerinde kullanılmak üzere içerisinde bir çok modül barındıran bir depo gibi düşünebiliriz.

Bu modüller open-source geliştiricileri tarafından yazılarak npmjs.com üzerine yüklenmektedir. Npm içerisinde şu an 1 milyondan fazla paket, modül eklenmiş durumda. Bu da aslında popülaritesini gerçekten net olarak gösteriyor.

Node.js Kullanan Bazı Teknoloji Şirketleri

Apple
Google
IBM
Linkedin
Pinterest
Paypal
Netfilix

Bu yazımda araştırmalarım ve patika.dev üzerinde aldığım Node.js dersleri ile öğrendiklerimi ve araştırmalarımı sizlerle paylaşmaya çalıştım.

Zaman ayırıp okuduğunuz için teşekkürler. Bir sonraki yazımda görüşmek üzere...