.NET Core - Fluent Validation kullanımı

 Bu yazıda .NET Core uygulamalarımızda Fluent Validaton'ı nasıl kullanacağımızı anlatmaya çalışacağım. 

Fluent Validation; Neredeyse tüm .NET versiyonlarında desteklenen, validation kütüphanesi.

Öncelikle NuGet Package Manager kullanarak ya da aşağıdaki kodu Package Manager Console'da çalıştırarak projemize FluentValidation paketini ekliyoruz.

Install-Package FluentValidation

Şimdi de Person adında bir class oluşturarak içerisine Name, Email ve PhoneNumber alanlarını ekliyorum. Bu class'ı FluentValidation ile kontrol ederek doğruluğunu teyit edeceğiz.

PersonValidator class'ını oluşturarak FluentValidaton paketiyle birlikte gelen AbstractValidator class'ından türetiyorum.

Şimdi de kurallarımı belirleyeceğim. Class üzerinde 3 alan var Name, Email ve PhoneNumber.

İsim boş olmamalı ve 3 karakterden az olmamalı kuralımız var.

Email için email formatında olmalı ve boş olmamalı.

Telefon numarası da 5 ile başlayan 10 haneli cep telefonu olmalı.

Şimdi de kodumu çalıştırıyorum.

Görüldüğü gibi validaton istediğim gibi çalıştı.

Read More

Asp.NET SignalR kullanarak Progress Bar yapımı

Asp.NET Web Form kullanılarak geliştirilmiş bir projemiz olduğunu varsayalım. Bu projenin bir sayfasında form aracılığı ile bir Excel dosyası alınıyor ve dosyadaki kayıtlar veritabanına aktarılıyor. Aktarım işleminin ne kadarının gerçekleştiğini dinamik bir şekilde göstermek istiyoruz. Bu durumda ne yapabiliriz?

UpdateProgress, UpdatePanel gibi tool'ları kullanmadan SignalR yardımıyla çok kolay bir şekilde isteğimizi gerçekleştirebiliriz.

Öncelikle sıfır bir Web projesi oluşturdum. Ardından da aşağıdaki Nuget Package'ları ekledim.

Ardından projeme aşağıdaki gibi client ile haberleşecek olan SignalR Hub sınıfımı ekliyorum.

Daha sonra da Owin StartUp dosyasını projeye dahil ediyorum.

Şimdi de Default.aspx.cs dosyasında 5 method oluşturuyorum ve Page_Load methodunun içinde arka arkaya bu 5 methodu çağırıyorum. Her metodun içerisinde Hub'a mesaj göndereceğiz ve gönderilen mesaj dinamik olarak sayfamızda gösterilecek.

Son olarak aspx dosyamda gerekli düzenlemeleri yapıyorum.

Sayfamı çalıştırdığımda aşağıdaki gibi sayfanın dinamik güncellendiğini görüyorum.

Read More

ES6 Arrow Function nedir? Nasıl kullanılır?

Bu yazıda EcmaScript 6 ile beraber hayatımıza giren, yeni nesil JavaScript özelliklerinden Arrow Function'ın kullanımından bahsedeceğim.

JavaScript'te bildiğimiz gibi fonksiyon yazmak için function komutunu kullanıyorduk ve aşağıdaki gibi fonksiyonumuzu yazıyorduk.

function isimYazdir(isim) {
  console.log(isim);
}

Arrow function kullanarak bu fonksiyonu nasıl yazabileceğimize bakalım.

isimYazdir = (isim) => {
  console.log(isim);
}

Bu kod ile aynı işlemleri yapan fonksiyonu yazdık. Peki arrow function'ın başka ne gibi avantajları var. Öncelikle tek parametre alan fonksiyonlarda parantezleri kullanmak zorunda değiliz. Hiç parametre almayan ya da birden fazla parametre alan fonksiyonlarda parantezleri kesinlikle kullanmak zorundayız. Kodumuzu aşağıdaki gibi de yazabiliriz.

isimYazdir = isim => {
  console.log(isim);
}

Geriye değer dönen bir fonksiyon ise süslü parantezleri kullanmak zorunda da değiliz. Tüm işlemleri tek satır halinde yapabiliriz. Aşağıdaki kodu çalıştırdığımızda console'a "Merhaba Berkay" yazdırılacaktır.

isimYazdir = isim => "Merhaba " + isim;

console.log(isimYazdir("Berkay"));

Hiç parametre almayan arrow function örneği

isimYazdir = () => {
  console.log("Berkay");
}

Birden fazla parametre alan arrow function örneği

isimYazdir = (isim, yas) => {
  console.log(isim, yas);
}

Read More

Abstract class nedir? Nasıl kullanılır?

Bu yazıda Abstract class'ın ne olduğunu, nasıl kullanılacağını anlatmaya çalışacağım.

Abstract class

Class'ların miras alacağı ana class'lardır. Abstract class'ta oluşturulan abstract metotların alt sınıflarda override edilmesi gerekirken, abstract olarak tanımlanmayan metotlar için ekstra bir işlem yapılmasına gerek yoktur.

Hemen basit bir örnek üzerinden açıklamak gerekirse :

Öncelikle Ulke adında abstract class oluşturuyorum. Daha sonra da bu class'tan inherit alan Almanya, Fransa ve İtalya class'larını oluşturacağım.

abstract class Ulke
{
        public string Kita() {
            return "Avrupa";
        }
        public string ParaBirimi() {
            return "Euro";
        }
        public abstract string Dil();
  }

Almanya, Fransa ve İtalya. Üçü de Avrupa kıtasında bulunduğu ve para birimleri de Euro olduğu için, Kita ve ParaBirimi metotlarını abstract olarak tanımlamadım. Dil ise tüm ülkelerde farklı. Bu nedenle Dil metodunu abstract olarak tanımladım ve 3 alt sınıfta da override ederek kendi değerlerini set edeceğim.

Öncelikle Almanya sınıfımı Ulke sınıfından miras alacak şekilde oluşturuyorum.

class Almanya : Ulke 
{

}

Projeyi build ettiğimde Dil metodunu implement etmediğim için hata alıyorum.

Tüm class'larımı oluşturuyorum.

class Almanya : Ulke
 {
 public override string Dil()
        {
            return "Almanca";
 }
}

class Fransa : Ulke
{
        public override string Dil()
        {
            return "Fransızca";
        }
}

class Italya : Ulke
{
        public override string Dil()
        {
            return "İtalyanca";
        }
}

Görmek istediğim değerleri ekrana basıyorum.

            var a = new Almanya();
            var f = new Fransa();
            var i = new Italya();

            Console.WriteLine("Almanya : " + a.Kita() + " " + a.ParaBirimi() + " " + a.Dil());
            Console.WriteLine("Fransa : " + f.Kita() + " " + f.ParaBirimi() + " " + f.Dil());
            Console.WriteLine("İtalya : " + i.Kita() + " " + i.ParaBirimi() + " " + i.Dil());

Sonuç da aşağıdaki gibi.

Read More

HTML5 ile nesne oluşturma ve hareket ettirme

Bu yazıda HTML 5 ve JavaScript kullanarak bir nesne oluşturacağız ve klavyedeki sağ - sol yön tuşları yardımıyla nesneyi hareket ettireceğiz.

Öncelikle sayfamıza yeni bir canvas ekliyorum. Body onload fonksiyonu olarak da drawGame fonksiyonunu tanımlıyorum. Çizim işlemlerimi bu fonksiyonda yapacağım.

<body onload="drawGame()">
    <canvas id="game">Tarayıcınız HTML 5 desteklememektedir.</canvas>
</body>

drawGame fonksiyonunda carImage ve carObject isminde sırasıyla Image ve Context oluşturuyorum.

function drawGame() {
    var canvas = document.getElementById("game");
    if(canvas.getContext) {
        var carObject = canvas.getContext("2d");
        var carImage = new Image();
        carImage.src = 'car.png';
        carImage.onload = function() {
            carObject.drawImage(carImage, 0, 0);
        }
    }
}

Şu an sayfamı çalıştırdığımda arabanın ekrana basıldığını görebilirim.

Şimdi klavye kullanarak aracı sağa sola hareket ettirmek için gerekli olan kodu yazıyorum.

Öncelikle yeni bir event tanımlıyorum.

window.addEventListener('keydown', moveCar, true);

moveCar fonksiyonunu oluşturarak gerekli işlemleri orada gerçekleştiriyorum.

function moveCar(event) {
    switch(event.keyCode) {
        case 37:
            horizontalPosition -= 5;
            break;
        case 39:
            horizontalPosition += 5;
            break;
    }

    carObject.clearRect(0, 0, canvas.width, canvas.height);
    carObject.drawImage(carImage, horizontalPosition, 0);
}

Kodun tamamı

<!DOCTYPE html>
<head>
<title>HTML5 Canvas</title>
<script type="text/javascript">
var canvas;
var horizontalPosition = 100;
var carObject;
var carImage;
function drawGame() {
    canvas = document.getElementById("game");
    if(canvas.getContext) {
        window.addEventListener('keydown', moveCar, true);
        carObject = canvas.getContext("2d");
        carImage = new Image();
        carImage.src = 'car.png';
        carImage.onload = function() {
            carObject.drawImage(carImage, horizontalPosition, 0);
        }
    }
}
function moveCar(event) {
    switch(event.keyCode) {
        case 37:
            horizontalPosition -= 5;
            break;
        case 39:
            horizontalPosition += 5;
            break;
    }

    carObject.clearRect(0, 0, canvas.width, canvas.height);
    carObject.drawImage(carImage, horizontalPosition, 0);
}
</script>
</head>
<body onload="drawGame()">
    <canvas id="game">Tarayıcınız HTML 5 desteklememektedir.</canvas>
</body>
</html>

Read More

JavaScript replace işlemleri

Bu yazıda JavaScript'te herhangi bir string değer üzerinde replace işlemlerinin nasıl yapıldığını anlatacağım.

String ifademiz üzerindeki herhangi bir kelimeyi, harfi ya da istediğimiz bir text'i değiştirmek için replace fonksiyonunu kullanıyoruz.

var metin = "Bilgisayar mühendisleri blog";
metin = metin.replace("blog","site");
alert(metin);

Bu örnekte "Bilgisayar mühendisleri blog" şeklinde bir metin tanımladık ve replace komutu ile "blog" ifadesini "site" olarak değiştirdik.

Peki birden fazla ifadeyi değiştirmek istersek bu kod işimizi görür mü? Replace fonksiyonu ile metin içerisinde birden fazla ifadeyi değiştiremiyoruz.

var metin = "Bilgisayar mühendisleri blog";
metin = metin.replace(" ","-");
alert(metin);

Yukarıdaki kodda boşlukları "-" ile değiştirmek istedim. Kodu çalıştırdığımda çıktı aşağıdaki gibi oldu.



Görüldüğü gibi sadece ilk boşluk değiştirildi.

Bunun için Regular Expression'lardan yararlanacağız. Yeni bir prototype ekliyoruz.

String.prototype.replaceAll = function(search, replacement) {
    var target = this;
    return target.replace(new RegExp(search, 'g'), replacement);
};

Ve bu eklemiş olduğumuz metodu çağırıyoruz.

var metin = "Bilgisayar mühendisleri blog";
metin = metin.replaceAll(" ","-");
alert(metin);

Çalıştırdığımda aşağıdaki görselde görebileceğiniz gibi tüm boşlukların "-" ile değiştirmiş oluyorum.

Read More

TypeScript nedir?

JavaScript istemci tarafında kullanılan en önemli dil. Node.js gibi teknolojiler ile birlikte JavaScript'i server tarafında da kullanmaya başladık.

JavaScript ile büyük uygulamalar geliştirmek oldukça zordur. Kod büyüdükçe oldukça karmaşık bir hale gelir ve kodu okumak da kullanmak da gitgide zorlaşır. Ayrıca OOP ilkelerini karşılamaması, derleme zamanı hata denetimi özelliklerini benimsememesi JavaScript'in server tarafında başarılı bir teknoloji olmasını engeller. Bu açıkları kapatmak için Microsoft tarafından TypeScript geliştirilmiş ve kullanıma sunulmuştur.

TypeScript nedir?

TypeScript'in tanımı "Uygulama ölçekli geliştirme için JavaScript" tir. Nesne yönelimli, derlenebilir bir dildir. C#'ın da tasarımcısı olan Anders Hejlsberg tarafından geliştirilmiştir. TypeScript, JavaScript'e derlenen JavaScript'in bir üst kümesidir.

TypeScript'in özellikleri

Sadece JavaScript. TypeScript, JavaScript'le başlar ve JavaScript'le biter. Temel yapıtaşlarını JavaScript'ten alır. TypeScript kullanabilmek için sadece JavaScript bilmek yeterlidir. TypeScript ile yazdığımız kodlar JavaScript koduna dönüştürülür.

Diğer JavaScript kütüphanelerini destekler. Derlenmiş TypeScript kodları, herhangi bir JavaScript uygulaması tarafından kullanılabilir. Tüm JavaScript framework'lerini, tool'ları ve kütüphanelerini kullanabilir.

JavaScript aynı zamanda TypeScript. Herhangi bir .js dosyasını .ts uzantısıyla kaydederek derlenmesi sağlanabilir.

TypeScript sanal makineye ihtiyaç duymaz. JavaScript'in çalıştığı her ortamda çalışabilir.

Andres Hejlsberg tarafından sunulan TypeScript tanıtım videosuna buraya tıklayarak ulaşabilirsiniz.

TypeScript open source (açık kaynak) bir üründür. IDE olarak Visual Studio önerilirken, desteklenen diğer IDE'leri buradan görebilirsiniz.

Read More

JavaScript class tanımlamanın 3 yolu

Syntax'ı göz önünde bulundurduğumuzda JavaScript, nesne yönelimli programlamada ciddi bir esneklik sağlamaktadır. Bu yazıda JavaScript'te sınıf oluşturmanın 3 yolundan bahsedeceğim. 3 yöntemi de gördükten sonra hangisini kullanmanız gerektiğine karar verebilirsiniz.

Her ne kadar class tanımlama olarak bahsedilse de JavaScript'te genel olarak bir class yapısı yok. Her şey nesnelerden oluşuyor. Nesnelerden başka nesneler türetiliyor. Diğer OOP dilleri gibi classlardan class türetme olayı yok.

1) Fonksiyonlar kullanma

En çok kullanılan yöntemlerden bir tanesi bu. Normal bir JavaScript fonksiyonu tanımlanır ve new keyword'ü kullanılarak yeni bir nesne oluşturulur. Property ve metot'lar fonksiyon oluşturulurken belirtilir. this komutu kullanılır.

function Araba(marka) {
 this.marka = marka;
 this.model = "Q7";
 this.yil = "2018";
}

var araba = new Araba('Audi');
alert(araba.marka + ' ' + araba.model + ' ' + araba.yil);

Yukarıdaki örnekte Araba class'ından bir nesne türettik ve bilgilerini ekranda gösterdik. Peki Araba class'ına ait, bilgileri gösteren bir metot tanımlamak istersem ne yapmam gerekir?

Bunun için kullanabileceğim 2 yöntem var. Birincisi fonksiyon (class) içinde metodu tanımlamak. İkincisi ise prototype eklemek.

1.1) Class içinde metodu tanımlamak

function Araba(marka) {
 this.marka = marka;
 this.model = "Q7";
 this.yil = "2018";
 this.bilgileriGetir = function() {
  return this.marka + ' ' + this.model + ' ' + this.yil;
 };
}

var araba = new Araba('Audi');
alert(araba.bilgileriGetir());

1.2) Prototype eklemek

function Araba(marka) {
 this.marka = marka;
 this.model = "Q7";
 this.yil = "2018";
}

Araba.prototype.bilgileriGetir = function() {
 return this.marka + ' ' + this.model + ' ' + this.yil;
};

var araba = new Araba('Audi');
alert(araba.bilgileriGetir());

2) Object Literal Kullanımı

 Object literal'ler kısa yoldan dizi ya da nesne tanımlamaya imkan sağlar. Boş bir nesne aşağıdaki gibi oluşturulabilir.

var nesne = {};

Dizi tanımlama

var dizi = [];

Fonksiyon olarak tanımladığımız class'ı şimdi literal kullanarak tanımlayalım.

var araba = {
  marka: "Audi",
  model: "Q7",
  yil: 2018,
  bilgileriGetir: function() {
   return this.marka + ' ' + this.model + ' ' + this.yil;
  }
 }

 alert(araba.bilgileriGetir());

3) Singleton fonksiyon kullanımı

Son yöntem, önceki iki yöntemin kombinasyonu gibi. Singleton nesne tanımlamak için yine fonksiyon kullanıyoruz.

var araba = new function() {
 this.marka = "Audi",
 this.model = "Q7";
 this.yil = 2018;
 this.bilgileriGetir = function() {
  return this.marka + ' ' + this.model + ' ' + this.yil;
 }
}

alert(araba.bilgileriGetir());

Read More

jQuery - parent, parents ve closest metotlarının kullanımı

Bu yazıda jQuery'deki parent, parents ve closest ifadelerinin ne olduklarını, aralarındaki farkları ve nasıl kullanıldıklarını anlatmaya çalışacağım.

Jquery'de bu metotlara ihtiyaç duyulan anlar oluyor. Gönderilerden oluşan bir sayfamız olduğunu düşünelim. Gönderilerin içerisinde de görsel, başlık ve metin bulunsun. En altta da herhangi bir buton olsun ve bu butona tıkladığımda da bir takım işlemler yapmak istediğimi farzedelim. Gönderilerim aşağıdaki gibi görünüyor.

<html>
<head>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<style>
.post {
 border: 5px solid #f5f5f5;
 margin: 20px;
}

.post img {
 display: block;
 float: left;
 margin-right: 20px;
}
</style>
</head>
<body>
<div class="post">
 <img src="https://cdn.pixabay.com/photo/2015/10/07/12/17/post-976115_960_720.png" width="100" height="100" />
 <h1>Gönderi 1</h1>
 <p>1. gönderinin içeriği</p>
 <div class="buttons">
  <input type="button" value="Tıkla"/>
 </div>
</div>
<div class="post">
 <img src="https://cdn.pixabay.com/photo/2015/10/07/12/17/post-976115_960_720.png" width="100" height="100" />
 <h1>Gönderi 2</h1>
 <p>2. gönderinin içeriği</p>
 <div class="buttons">
  <input type="button" value="Tıkla"/>
 </div>
</div>
<div class="post">
 <img src="https://cdn.pixabay.com/photo/2015/10/07/12/17/post-976115_960_720.png" width="100" height="100" />
 <h1>Gönderi 3</h1>
 <p>3. gönderinin içeriği</p>
 <div class="buttons">
  <input type="button" value="Tıkla"/>
 </div>
</div>
<div class="post">
 <img src="https://cdn.pixabay.com/photo/2015/10/07/12/17/post-976115_960_720.png" width="100" height="100" />
 <h1>Gönderi 4</h1>
 <p>4. gönderinin içeriği</p>
 <div class="buttons">
  <input type="button" value="Tıkla"/>
 </div>
</div>
</body>
</html>

Şimdi head tag'leri arasına jquery kodlarımı yazmaya başlıyorum.

$(document).ready(function(){
 $(".post input[type='button']").on("click", function(){

 });
});

Click fonksiyonunun içinde this komutunu kullandığımda tıklanan butona erişebilirim.

$(this).parent() komutunu çalıştırdığımda ise bir üst element olan buttons class'lı div'e erişiyorum.

$(this).parents() komutunu çalıştırdığımda ise tıkladığım butonun ana elementlerini görüyorum.

Closest komutuyla da istediğim herhangi bir parent elemente ulaşabiliyorum. Bana doğrudan bu butonu içinde parındıran .post class'lı element lazım. Bunun için aşağıdaki kodu yazıyorum.

$(this).closest(".post");

Aşağıdaki kod ile tıklanılan buton hangi class'taysa o class'ın arkaplan rengini değiştiriyorum.

$(document).ready(function(){
 $(".post input[type='button']").on("click", function(){
  var post = $(this).closest(".post").css("background","#f5f5f5");
 });
});

Aşağıdaki gibi kodun doğru şekilde çalıştığını görüyorum.

Read More

CSS - after ve before ifadelerinin kullanımı

After ve before ifadeleri ile istediğimiz elementin öncesine ya da sonrasına herhangi bir içerik ekleyebiliyoruz. Bir menümüz olduğunu düşünelim ve menü elemanlarının başında istediğimiz bir görseli göstermek istiyoruz. Bunu sağlayabilmenin tabi ki birçok yöntem var ancak after ve before ifadelerini kullanarak bu işlemi çok çok kolay bir şekilde gerçekleştirebiliriz.

Aşağıdaki gibi bir menümüz olsun.

<ul id="menu">
 <li>Item 1</li>
 <li>Item 2</li>
 <li>Item 3</li>
 <li>Item 4</li>
 <li>Item 5</li>
</ul>

Herhangi bir değişiklik yapmadığımız taktirde çıktısı aşağıdaki gibi olacak.

Read More