Asp.net core Projelerinde User Formunun Validationlarının Tanımlanması

User classı :

 public class User

{

    [Required(ErrorMessage = "Ad alanı boş olamaz.")]

    public string FirstName { get; set; }

    [Required(ErrorMessage = "Soyad alanı boş olamaz.")]

    public string LastName { get; set; }

    [Required(ErrorMessage = "E-posta alanı boş olamaz.")]

    [EmailAddress(ErrorMessage = "Geçerli bir e-posta adresi girin.")]

    public string Email { get; set; }

    [Range(18, 99, ErrorMessage = "Yaş aralığı 18 ile 99 arasında olmalıdır.")]

    public int Age { get; set; }

}

HomeController tarafı 

 public IActionResult CreateUser()

 {

     return View();

 }

 [HttpPost]

 public IActionResult CreateUser(User user)

 {

     if (!ModelState.IsValid)

     {

         return View(user);

     }

     // Doğrulama başarılı, kullanıcıyı kaydet

     // ...

     return RedirectToAction("Index");

 }

View tarafı 

@model User

@using (Html.BeginForm("CreateUser", "Home"))

{

    <div>

        <label for="FirstName">Ad:</label>

        @Html.TextBoxFor(model => model.FirstName)

        @Html.ValidationMessageFor(model => model.FirstName)

    </div>

    

    <div>

        <label for="LastName">Soyad:</label>

        @Html.TextBoxFor(model => model.LastName)

        @Html.ValidationMessageFor(model => model.LastName)

    </div>

    

    <div>

        <label for="Email">E-posta:</label>

        @Html.TextBoxFor(model => model.Email)

        @Html.ValidationMessageFor(model => model.Email)

    </div>

    

    <div>

        <label for="Age">Yaş:</label>

        @Html.TextBoxFor(model => model.Age)

        @Html.ValidationMessageFor(model => model.Age)

    </div>

    

    <div>

        <input type="submit" value="Kaydet" />

    </div>

}

Visual Studio 2022 Kurulumu

 Merhaba Arkadaşlar,

Visual Studio bizler için etkin kod yazmayı sağlayan bir kod geliştirme ortamıdır.
İçerisinde farklı dilleri yazmamıza imkan tanımaktadır. Bu diller C#, C, C++, F# (Fonksiyonel Programlama), Pyhton vb. gibi dillerdir.

Visual Studio'nun çeşitli versiyonları var hangisini kullanmalıyım?

Visual Studio Community olan versiyonu bireysel developerlar için yeterli olacaktır. Enterprise olan sürümü daha çok kurumsal firmalar tarafından kullanılmaktadır. Bu versiyonu indirmeniz durumunda bir ayın sonunda sizden bir key girmenizi isteyecektir. Bu key bilgisini girmeniz durumunda programı kullanabilirsiniz.

Eğitimler ve bireysel çalışmalarımız için Visual Studio Community versiyonunu indirip kurabilirsiniz.

Nasıl İndiririm?

Visual Studio Community 2022 İndirmek için buraya tıklayınız.

Bilgisayarınıza indirilmiş olan .exe uzantılı dosyayı çalıştırmanız durumunda online olarak kurulum gerçekleşecektir. Kurulum esnasında internet bağlantınızın olması önemlidir. Bağlantınız ne kadar hızlıysa kurulumu o kadar hızlı tamamlayacaktır.

Entity Framework Nedir?

 Entity Framework ile uygulama geliştirme aşamasında aşağıdaki yaklaşımlardan birisini kullanabiliriz. Bu yaklaşımlar:

1. Database First
2. Model First
3. Code First

Database First 

Eğer hali hazırda bir veri tabanımız varsa ve bu veri tabanı uzun zamandır kullanılıyorsa bu yaklaşım tercih edilir. Bununla çalışabilmek için veri tabanını klasik yöntemlere göre SQL Server üzerinden oluşturmalısınız. (kodla ya da arayüzden)

Bu yöntemde veri tabanı üzerinde herhangi bir değişiklik yapmak istersek, SQL Server üzerinden yapmalıyız. Bu durumun projeye tarafına aktarılması için “update model from database” demek gerekir.

Model First

Eğer bir veri tabanına sahip değilseniz, direk visual studio üzerinden model kullanarak oluşturabilirsiniz. Burada gerçekleştirdiğimiz değişiklikleri SQL’e tanıtmak için “generate database from” tıklamamız gerekir. Eğer kod ya da SQL yazmayı sevmiyorsanız, bu yöntemi tercih edebilirsiniz. Bu yöntemde genellikle kodlama yerine design yaparız. 

Projeniz çok sayıda tablo içeriyor ve kompleks bir yapıya sahipse bu yöntem kullanışlı olacaktır. Büyük çaplı kurumsal projelerde tercih edilebilir.

Code First

Eğer kodlama yapmayı çok seviyorsanız ve veri tabanımı kodlama ile oluşturmak istiyorum diyorsanız bu yöntem size göre. Bu yöntemde design yapmak yerine kodlama yapıyorsunuz. Bu yaklaşım ile tüm kontrol elinizde oluyor, diğer yaklaşımlardaki gibi arka tarafta otomatik kodlar üretilmiyor. Yazmış olduğunuz kodlar veri tabanını ve tablolarınızı oluşturacaktır. Tablo sayısı az olan projelerde kullanılması tercih ediliyor.

Code First Örneği  (Migrations) :

https://docs.microsoft.com/en-us/ef/ef6/modeling/code-first/migrations/

https://www.slideshare.net/jibranrasheed/learn-entity-framework-in-a-day-with-code-first-model-first-and-database-first?qid=5e47d6ca-eaf2-4240-a05b-31ccf5276fcd&v=&b=&from_search=8

Migration Nedir?

İngilizcede doğrudan kelime anlamı göç, yani şöyle düşünün benim buradaki bilgilerim, kurallarım veritabanına göç ediyor. Böyle hayal edin, tasvir doğru mu oldu bilemiyorum ama uygun gibi. Tam olarak yapılan da bu, uygulamamda dediğim kurallar, model classlar, bağıntıları migration ile anlatıyorum.

Migration 3 adımlı bir işlemdir.

1. Öncelikle model oluşturur veya modellerimizde değişiklik yaparız. Bu noktada yeni bir model oluşturmuş olabilirsiniz veya var olan modellerinizde değişiklik yapmış olabilirsiniz. Böyle bir işlem yaptığınızda mutlaka migration ile database tarafına değişiklik yansıtılmalıdır.
2. Migration Ekleme işlemi yaparız. Database tarafına değişikliği yansıtabilmek için migration ekleriz. add-migration MigrationAdı
3. Migration uygulama işlemi yaparız. Migration uygulamamıza bir isimle eklenince, henüz işlem database yansıdı demek değildir bunu database’e yansıtabilmek için migration’u database’e push etmemiz gerekir. update-database

Github Desktop Kullanarak GitHub Web Sitesine Proje Nasıl Yüklenir?

Merhabalar,

Kendi bilgisayarımızda oluşturmuş olduğumuz projemizi github web sitesinde barındırmak için aşağıdaki adımları izleyelim.

1. Github hesabı açalım.

2.Github Desktop uygulamasını buradan indirelim ve bilgisayarımıza kuralım.

3. 1 numarada açmış olduğumuz hesap bilgilerini kullanarak github desktop'a giriş yapalım.

4. Projemizi barındıracak yeni bir repo seçelim. 

5. Projemizin adını, açıklamasını, kaydedeceği dosyanın yolunu, readme dosyasını ve license bilgisini seçelim. 

6 .Github Desktop tarafında gelen ana ekranda publish repository dersek eğer github websitesi üzerinde böyle bir folder açacak. 

7. Github web sitesine gidip bakarsak aşağıdaki gibi bir yapı oluşturduğunu görebiliriz.

8. Github tarafında açılan yapının görünümü aşağıdaki gibi olacaktır, içerisinde readme dökümanının olduğunu görebilirsiniz. 

9. Bu aşamada bilgisayar tarafında da bir folder oluşturur ve içine aşağıdaki gibi proje dosyalarını yüklememiz gerekecek.

10 .  Github desktop üzerinden bu klasördeki değişiklikleri github web sitesine göndereceğiz. 

Son olarak github desktop da push origin diyerek o değişiklikleri göndermesini söylüyoruz. 

Kontrol amaçlı github web sitesine girip bakarsak eğer,  aşağıdaki gibi kodların oraya da eklendiğini görmüş oluruz. 

İyi Çalışmalar :) 

C# Çalışma Soruları

1′den 100′e kadar olan sayıların toplamını bulup sonucu ekranda gösteren C# programını yazın.

Girilen iki sayını arasındaki sayıların toplamını bulan C# programını yazın.

İstenilen Sayıyı 10 kez yazdıran C# programını yazın.

0-100 arasındaki tek sayıları yazdıran C# programını yazın.

1 ile 100 Arasındaki Sayıların Toplamının Ortalaması

100 ile 200 Arasındaki çift sayıların toplamının ortalaması bulan C# programını yazın.

A’dan Z’ye kadar olan karakterleri ekrana yazdıran C# programını yazın.

İstenilen sayı kadar girilen sayıların ortalamasını C# programını yazın.

1 ile 100 arasındaki tek ve çift sayıların toplamını bulup sonucu ekranda gösteren programın kodlarını yazalım.

1 ile 100 arasındaki tek ve çift sayıların toplamını bulup sonucu ekranda gösteren programın kodlarını yazalım. 

1 ile 10 arasındaki tek sayıları ekrana alt alta While döngüsü ile yazdıran C# programını yazınız.

Kullanıcı tarafından girilen bir sayının kaç basamaklı olduğunu bulup ekrana yazdıran C# programını While döngüsü kullanarak yazınız.

1 ile 10 arasındaki tek sayıları ekrana alt alta While döngüsü ile yazdıran C# programını yazınız.

Kullanıcıdan devam etmek istiyor musunuz sorusuna alınan yanıta göre sayı alıp alınan sayıların toplamını bulan programı yazınız. (Evet “E” veya Hayır “H”)

Kullanıcı tarafından girilen gün adının haftanın kaçıncı günü olduğunu bulan c# console uygulaması

C# Console uygulamasında Elemanları kullanıcı tarafından dışarıdan girilen 10 elemanlı bir dizinin elemanlarını %20 arttıran ve ekrana yazdıran örnek:

Elemanları kullanıcı tarafından girilen 10 elemanlı string bir dizide, en uzun metni, en uzun metnin karakter sayısını ve en uzun metnin index numarasını bulan ve ekrana yazdıran örnek

20 elemanlı dizi içerisine for döngüsü ile rasgele 1-100 arası sayılar atarak ekranda görüntüleyen program:

100 elemanlı bir dizide negatif ve pozitif eleman sayısını bulan ve ekranda gösteren C# kodları.

Sushi Yapma ve Yeme Algoritması

Hadi en sevdiğim yemeği nasıl yapabiliriz, yaptık diyelim nasıl yiyebiliriz algoritmasını çıkartalım :) 

Yapması da yemesi de emek isteyen zor bir atıştırmalık. Halk arasında çiğ balık olarak da isimlendirilen sushiiii :)

Yemesi ayrı emek, yapması ayrı emek. Bu sebepten 2 farklı algoritma olarak yazdım.

Sushi Yapma Algoritması

Sushi nasıl yapılır görmek için tıklayınız

Sushi Yeme Algoritması :) 

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 :)