Vue.js Nedir?

 Neden Vue.js kullanalım ki?

HTML+CSS kullanarak web projeleri hazırlıyoruz. JS ekleyerek daha kullanıcı etkileşimli web sayfaları yapmaya başladık. Sonrasında backend tarafındaki server side kodları browser üzerinden çalıştırabilir miyim ? Bu sorunun cevabı backend tarafında yazmış olduğumuz kodları javascript tarafına taşıyarak çözdük fakat sonrasında her yer .js uzantılı dosyalar barındırmaya başladı. Durum böyle olunca projedeki hatalarda çözüm üretmek ve kodları debuglamak aşırı zaman almaya başladı ve böylece hayatımıza modern javascript frameworkleri girdi. Vue.js moden javascript frameworklerinden sadece bir tanesidir. Diğerler nelerdir diye aklınıza geliyorsa hemen onun da cevabını vereyim. 

Vue.js için aşağıdakileri söylemek mümkündür. 

• Kullanımı kolay
• Öğrenimi kolay
• Performanslı (React ve Angular'a göre)
• Core framework'ü kullanabilir ya da pluginlerle customize hale getirebiliriz.
• Test senaryoları yazıp testini yapma imkanı sağlar.

Component yapısı yardımıyla tekrar tekrar kullanılabilen reusable yapılar oluşturmamıza da imkan sağlamaktadır. 

Yukarıdaki görsele bakacak olursak eğer web sitemizde kullandığımız bölümler bulunmaktadır. Biz bu yapıyı bir kez kodlarız ve ardından component yardımıyla istediğimiz başka sayfalarda da kolaylıkla daha önceden geliştirmiş olduğumuz component'i direkt çağırıp kullanabiliriz. Bu durum diğer modern .js frameworklerinde de bulunmaktadır. (Angular, React vb.) Component yapısı sayesinde tekrardan kodlama yapmayız. 

Component oluştururken içerisinde HTML+CSS+JS yapılarını kullanırız. Component yapılarını minik uygulamalar olarak düşünebiliriz.

İşte modern frameworkler bizlerin bu componentleri birleştirip büyük resme bakmasını sağlamaktadır :) 

Online editor kullanarak vue.js tarafında ilk uygulamamızı birlikte geliştirelim. Online editor olarak ben fiddle kullanıyorum Fiddle'a gitmek için tıklayınız . Browser üzerinde yazıp anlık olarak sonuçlarımızı görebileceğiz. 

Fiddle tarafına geçtiğimizde aşağıdaki gibi bir arayüz karşımıza çıkacak olup dört farklı bölümden oluşmaktadır. 

Vue.js sitesinde yer alan get started bölümüne tıkladığımızda iki farklı halini görebiliriz. Bunlar development ve product.  Development modunu kullanırsak bize console tarafında bazı uyarı mesajlarını da gösterebiliyor olacak. Bu yüzden development modunu alıp html sayfamıza ekleyelim. 

html bölümüne aşağıdaki kodumuzu ekleyip sayfamızda vue.js kullanacağımızı belirtiyoruz. (development olanı aldım)

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

HTML sayfamıza id'si container olan içerisinde bir p barındıran kodlarımız ekliyorum. P etiketi içerisinde birşey yazmasın.

HTML bölümünün son hali aşağıdaki gibi olsun.

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

<div id="container">

<p></p>  

</div>

Şimdi vue kodlarımızı yazarak container div'i içerisinde bulunan p etiketine istediğimiz bir bilginin yazdırılması kısmına geçelim.

Bu aşamada new Vue diyerek bir component oluşmasını sağlıyoruz. el tanımlaması element anlamına gelir ve id bilgisi container olan element içerisine geçip oradaki yapının içerisine title bilgisini tanımlamasını istiyoruz.

new Vue({

el:"#container",                         data:{                                    yenideger:"Merhaba dünya Vue.js'e hoşgeldim :) " } });

Ve kodumuzu çalıştırıp çıktımıza bakıyoruz. Bu şekilde bırakırsak çalıştığında herhangi bir göremeyeceğiz. Bunun için html tarafına dönüp kodumuzu aşağıdaki haline getirmemiz gerekecektir.

 <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <div id="container"> <p> {{yenideger}} </p> </div>

Böylece vue tarafında yazarken vermiş olduğumuz değer yenideger isimli yapının içerisinde tutulmaktadır ve biz de html tarafında bu ismi ilgili etiketin içerisine yazarak görünmesini sağlayabiliriz.

id bilgisi container olan div içerisinde başka elementlerimiz olmuş olsa onların da değerlerini değiştiriyor olacaktı.

Son halleri aşağıdaki gibidir.

HTML:

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <div id="container"> <p> {{yenideger}} </p> <h1>{{yenideger}}</h1> <h2>{{yenideger}}</h2> </div>

JS:

new Vue({

el:"#container",

data:{

yenideger:"Merhaba dünya Vue.js'e hoşgeldim :) "

}

});

Çıktı

Bir sonraki makalemde görüşürüz iyi çalışmalar :) 

Redis Nedir?

 Redis kelime anlamı nedir diyerek başlayalım :) 

Redis açılımı Remote Dictionary Server olarak karşımıza çıkmaktadır. Open source olup C programlama dili kullanılarak geliştirilmiş NoSQL veri tabanıdır. Redis yapısı inmemory olarak çalışır yani veriyi belleğe (RAM'e) yazar. Redis'in hem inmemory olması hem de NoSQL yapısını barındırıyor olması hız kazanmasını sağlar.

Redis alt yapısını incelediğimizde ağırlıklı olarak string tipi ile çalıştığını görebiliriz ayrıca dictionary’ ler ile çalışır. Çalışırken kullanabileceğimiz diğer liste türleri ise : List, Sets, Sorted Sets ve Hashed Sets gibi string listelerdir.

Resmi olarak Linux sunucularda çalışan Redis, istenirse windows sunucularda da çalışabilir. Ayrıca Azure desteği de bulunmaktadır.

Redis; Instagram, Twitter, Pinterest, Tumblr vb. gibi popüler firmalar tarafından kullanılmaktadır.

Neden Redis Kullanmalıyız? 

Hızlı ve performanslı uygulamalar geliştirmek istersek tercih ederiz.

Caching (Ön Belekleme) 

Sorgularımızın ilk çağırıldığı zaman çalışması diğer durumlarda önbellekten getirilmesi işlemi hız ve performans açısından sıkça duyduğumuz bir yapıdır. Ön belleklemenin amacı, arka plandaki uygulamanın veya veri tabanının yükünü hafifletip, verilere en hızlı ve masrafsız biçimde ulaşmaktır. Redis tam olarak bu işlemi sağlamaya aracı olmaktadır.

Session Store

Redis, oturum açma bilgileri, kullanıcı profilleri gibi birçok veriyi mili saniye hızında okuma görevi görmektedir. Uygulamalarımızda oturum bilgilerini ya da diğer verilerimizi tutmak için sessionları kullanabiliriz ya da Redis'ten yararlanabiliriz. Redis ile kullanıcı profilleri, kimlik bilgileri, kullanıcıya özgü veriler vb. gibi verileri mili saniyelere varan hızlarda okuyabiliriz.

Pub/Sub

Pub/Sub mesajlaşma özelliği nedeniyle Redis 2.0 sürümünden itibaren birçok firma tarafından tercih edilmeye başlanmıştır. Mesajlaşma uygulamalarında sıkça karşımıza çıkan RabbitMQ yerine Redis'i sadeliğinden ve performansından dolayı tercih edilmektedir. 

Queues

Uygulama veya projelerinizde aynı anda birçok işlem yapmanız gerektiğinde diğer işlemleri kuyruğa ekleyip backkground'da çalışmasını devam etmesini isteriz. Örneğin yazıcıda arka arkaya gönderdiğimiz çıktıların sırayla çıkması işlemi de bu yapıya benzemektedir. Redis bu tarz iş kuyruklarındaki verilere hızla ulaşmanızı sağlamaktadır.

Bir sonraki makalemde Redis kurup uygulamada geliştiriyor olacağız, takipte kalın bilgili kalın.

C# Programlama Dilinde Sayıyı Yuvarlamadan Virgülden Sonra 2 Haneyi Getiren Kod

 Merhaba arkadaşlar, bugün yine 10 dkda algoritmasını çıkarttığım 3 dkda kodunu yazdığım bir minik örnekle karşınızdayım. Öncelikle soruyu açıklayayım.

Double bir sayımız var. Bu sayının virgülden sonraki 2 hanesini almak istiyoruz ama burada herhangi bir yuvarlama işlemi yapmadan bu sayıları almak istiyoruz. Math.Round ile yuvarlama yaparsak mevcut fiyat değişmekte bizim amacımız 113.699 değerini , 113.69 şeklinde elde etmek. 

Kodlar aşağıdaki gibi keyifli kodlamalar...

Trigger Nedir?

Merhabalar, bu makalemde trigger nedir, bir trigger nasıl yazılır bu konular hakkında bilgiler edineceksiniz.

Trigger kelime anlamı tetikleyicidir. RDBMS yani ilişkisel veri tabanı yönetim sistemlerinde aktif olarak kullanılır. Veri tabanı nesnesi olup bir tabloda belirli olayların meydana gelmesi durumunda veya olayların öncesinde çalışacak bir stored procedure çeşididir. 

Tabloda meydana gelebilecek olaylar veri ekleme, veri güncelleme veya veri silme işlemleridir. Bu işlemlerden sonra bir iş yaptırmak istersek (aynı tablo ya da farklı bir tabloda) trigger yapısından yararlanırız.

Örneğin;

• Satış tablosundaki bir ürünün satılması sonrasında o ürünün stok miktarının eksiltilmesi 
• Banka hesabında para transferi sonrasında otomatik email gönderilmesi 
• Kayıt silinmek istendiğinde bu kaydın silinemeyeceğinin bilgilendirilmesi 
• Öğrenci tablosundaki kaydın silinmesi durumunda silinen bu kaydı başka bir aktarılması

Yukarıdaki maddeleri gerçekleştirmek istediğimizde trigger kullanabiliriz. 

Neden Trigger Kullanmalıyız?

Verilerin bütünlüğünü sağlamak için kullanmayı tercih ederiz ya da tablolarda, veri tabanında mevcut olmayan fakat ihtiyacımız olan bilgileri hesaplamak istediğimizde kullanırız.
Örneğin sipariş tablosunda miktar sütununda bir güncelleme meydana geldiğinde toplam_fiyat sütununa karşılık gelen işlemi hesaplayabiliriz.

Trigger Çeşitleri

1. DML(Data Manipulation Language) Trigger
2. DDL(Data Definition Language) Trigger
3. Logon Trigger

1.DML Trigger 

Veri tabanına yapılan veri işleme komutlarını yani insert,update ve delete işlemlerini içeren trigger çeşididir. DML Trigger kullanarak yapacağımız işi "primary key","foreign key", "unique" constraint yapılarını kullanarak da yapabiliriz. Constraint yapılarının yetersiz kaldığı durumlarda DML Trigger yapılarını kullanmayı tercih ederiz. 

DML trigger’ları hazırlarken "inserted ve deleted" isimli tabloları kullanırız.
Örneğin,

• Bir insert işlemi gerçekleştiğinde "inserted tablosunda" insert edilen kayıtları,
• Bir update ya da delete işlemi gerçekleştiğinde ise "deleted tablosunda" silinen kayıtları görebiliriz.

1.a After - For

1.a.a After insert

1.a.b After update

1.a.b After delete

1.b Instead of

1.b.a Instead of insert

1.b.b Instead of update

1.b.c Instead of delete

2.DDL Trigger

CREATE DATABASE, DROP DATABASE
Create Table, Alter Table, Drop Table
Create Function,Alter Function,Drop Function
Create View,Alter View,Drop View
Create Stored Procedure,Alter Stored Procedure, Drop Stored Procedure

Veri tabanına yapılan yukarıdaki değişiklik işlemleri gerçekleştiğinde tetiklenebilir. Hangi işlemden sonra tetikleneceğinin bilgisini Trigger’ı tanımlarken belirtiriz.

3.Logon Trigger

Kullanıcı login olmak için giriş yaptığında login ve şifre bilgileri kontrol edildikten sonra eğer bağlantı bilgileri doğruysa bağlantı gerçekleşmeden tetiklenir.

Hangi trigger çeşidini kullanmamız gerektiğine işimizin akışına göre karar vermemiz gerekecektir.

Tuple Nedir?

C# 4.0 ile gelen Tuple yapısını kullanarak hazırladığımız metottan birden fazla değer döndürebiliriz. Tuple yokken bu işi "out" parametresini kullanarak veya içerisinde birden fazla değer barındıran bir model kullanarak yapabiliriz.

Tuple kullanmanın avantajı ne ?
En büyük avantajı model kullanmadan birden fazla değeri döndürebiliyor olmamızdır.

Nasıl Kullanılır?

Tuple kullanarak birden fazla değer döndürecek metotlar hazırlayabiliriz. Tek metot kullanarak hem en pahalı hem de en ucuz ürünlerin id değerlerini döndürebiliriz.

public Tuple<int, int> EnPahaliEnUcuzUrunId()
{
long enUcuzUrunId = 1;
long enPahaliUrunId = 2;

return Tuple.Create(enUcuzUrunId , enPahaliUrunId );
}

Gördüğünüz gibi methot geri dönüş tipi olarak Tuple kullandık ve içerisinde 2 tane int tipi tanımlanıp bu değerleri geriye döndürdük. 

Şimdi bu metodu çağıralım.

public void main()
{
Tuple<int, int> values= EnPahaliEnUcuzUrunId();
long enUcuz = tupple.Item1;
long enPahali = tupple.Item2;
}

Tuple yapısını kullanarak istediğimiz sayıda istediğimiz tip nesneyi taşıyabiliriz.

Metoda Çok Parametre Geçmek İstersek

Eğer bir metoda birden fazla parametre göndermek istersek bu durumda Tuple kullanılır.

static void Main(string[] args) 

{ 
            ParameterizedThreadStart ts = new ParameterizedThreadStart(ThreadMethod); 
            Thread t = new Thread(ts); 
            t.Start(Tuple.Create(1, 9.23F, 2)); 

} 

static void ThreadMethod(object values) 

{ 
            Tuple<int, float, int> tpl = (Tuple<int,float,int>)values; 
            Console.WriteLine("Gelen değerler {0} {1} {2}",tpl.Item1,tpl.Item2,tpl.Item3); 
} 





İyi Çalışmalar,

ViewBag - ViewData - TempData Farkları?

 Merhabalar,

Verilerimizi MVC mimarisinde Controller katmanından, View katmanına taşımak istersek (tersi söz konusu değil) en çok kullanılan yapılar aşağıdaki gibidir.

• ViewData
• ViewBag
• TempData 

Bu üç yapının kullanımı birbirine çok yakın olsa da önemli farklılıkları vardır. Şimdi bunları sırasıyla inceleyelim.

ViewData

Controller sınıfından view sayfalarına viewdatadictionary sınıfı ile veri taşınır. 
ViewData ViewDatadictionary sınıfından türetilen bir dictionary nesnesidir. Dictionary mantığıyla kurgulanmıştır. Veri transfer işlemlerinde "key-value" eşleşmesinden faydalanır. Key değeri olarak string tanımlamayı kabul eder.  

public ViewDataDictionary ViewData { get; set; }

 

1. ViewData kullanarak Controller üzerinden View tarafına veri çekmek için kullanılır. Tersi yapılamaz.
2. Sadece geçerli istek sırasında okunabilir sonrasında yönlendirmeden sonra değeri null olacaktır.
3. Veriyi değişkene almak için tip dönüşümü yapmamız gerekli.

    //Doğru Kullanım 
    1- string demo = (string)ViewData["demo"];
    2- string demo = ViewData["demo"] as string;

    

    //Hatalı
    string demo=ViewData["demo"];

4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

public class Author() {     public int Id {get;set;}     public string Name {get;set;} }   namespace _dataTransferred.Controllers {     public class HomeController : Controller     {         public ActionResult Index()         {             ViewData["siteadı"] = "nagihanesendal";               return View();   }

View üzerinden erişim

1 2 3 4 5 6 7 8 9 10 11 12 13 14

//@foreach (var item in (List<Author>)ViewData["Authors"])   @{     string demo=(string) ViewData["nagihan"];     <span/> @demo </span> }

ViewBag

ViewBag, C# 4.0 ile gelen dinamik veri tipi özelliklerinden faydalanır, hataları runtime zamanında alınır. 

Temelde ViewData gibi Controller üzerinden View tarafına veri çekmek için kullanılır.

Sadece geçerli istek sırasında okunabilir.

Yönlendirme sonrasında kendini imha eder, null değer alır.

Veriyi değişkene almak için tip dönüşümü yapmanız gerekmez.

Oluşturduğumuz ActionResult içerisine bir ViewData attık ve değer olarak string bir ifade yerleştirdik.

5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

public class Author() {     public int Id {get;set;}     public string Name {get;set;} }   namespace dataTransferred.Controllers {     public class HomeController : Controller     {         public ActionResult Index()         {             ViewData["nagihanesendal"] = "yazılım";             List<Author> author = new List<Author>();             author.Add(new Author(){ Id = 1, Name = "Nagihan"});             author.Add(new Author(){ Id = 2, Name = "Eda"});                        ViewData["Authors"] = author;                return View();   }

View üzerinden erişim

1 2 3 4 5 6 7 8 9 10 11 12 13 14

<label>Title :</label> @ViewData["nagihanesendal"]   //   //@foreach (var item in (List<Author>)ViewData["Authors"])   @foreach (var item in ViewData["Authors"] as List<Author>) {     <label>@item.Id</label> @item.Name     <br/> }

TempData

ViewData ile aynı kullanımdadır.  TempDataDictionary Key-Value olarak kurgulanmıştır. Diğer transfer yapılarına nazaran TempData veriyi Request bazlı saklamaz.  TempData üzerindeki veriyi üçüncü Request’e aktarmak istiyorsak Keep() metodunu kullanmalıyız.  Bu şekilde TempData LifeCycle kısa bir süre uzamış olur. TempData kullanımı öncesinde ViewData’da olduğu gibi TypeCast işlemi yapmalıyız. Farklı metotlardan çağırıp kullanabiliriz.