KATMANLI MİMARİ - CRUD İŞLEMLERİ

 Önceki yazılarımızda .net core teknolojisini ve mvc mimari yapısını incelemiş önemli noktalarından bahsetmiştik. Bu yazımızda ise veri tabanımız üzerinde  EF Core ile select, update ve delete işlemlerinin nasıl yapıldığını akataracağız

Farklı amaçlar için kullanacağımız kütüphanelerimizi projemize ekleyebilmek adına NuGet Package Manager ile gerekli dosyaların ındırıyoruz 

Sıra geldi veritabanımız için ilk önce entitylerimizi oluşturmaya Girdiğimiz her bir sınıf bir tabloyu temsil edecek Butun bunları da Entity katmanında yapacağız

Entityler DBContext API tarafından kontrol edilmektedir. DBContext, 

Entity Framework mimarisinin temelini oluşturmakla beraber veritabanına 

bağlanma, sorgulama ve güncelleme işlemleri ile veritabanını yapılandırmak 

için gerekli bilgileri tutmaktadır. Bu nedenle DBContext sınıfından kalıtım 

alarak entitylerimiz için kendi DBContext sınıfımızı oluşturmalıyız.

Veri tabanı bağlantımızı code first mantığıyla oluşturmak için yapmamız gereken diğer bir adımsa migration oluşturmak.

Add-Migration “migration_name”

Ardındansa yapılan değişiklikleri update diyerek güncelliyoruz Migration yapıları sayesinde yaptığımız yenilikleri Visual Studio üzerinden hızlıca fiziksel veritabanına yansıtabileceğiz. Anlayacağınız, kod kısmında yaptığımız değişiklikleri veritabanına yansıtmaya Migration demekteyiz.

update-database

Bu iki komut çalıştırıldıktan sonra migration dosyalarımız

oluşturulacaktır.Katmanları yakından incelememiz gerekirse;

Entity Katmanında veri tabanı işlemlerimizin yapıldığı tabloları içeren classların olduğu katman olduğunu söylemiştik

Data Access Katmanında ise veri tabanında insert update delete gibi işlemlerin yapıldığı kodlar ve yine bağlantının gerçekleştiği context sınıfmız yer almaktadır.Ayrıca Dto işlemleri de yine burada bulunmaktadır. 

Business Katmanında İş kuralları yer alır Bundan kastımız programımız kullanıcı isteklerine cevap vermeden önce bu kuralları uygulamalıdır.Bunun yanında şifreleme ve yetki işlemleri de yine bu katmanda yapılmaktadır.

              Detaylı İncele için GİT Üzerindeki CRUD Projesine Göz Atabilirsiniz

          PROJE LİNKİ

                                             

ANGULAR-NGIF-NGFOR

Bu içeriğimizde ngFor ve ngIf kullanımını açıklamaya çalışacağız

Önceki içeriklerimizde Angular'ın ne olduğundan öneminden ve projeye nasıl dahil edilebileceğinden bahsetmiştik Döngü yapısına gelecek olursak,bir programdaki komut parçasının belli koşullar gerçekleştikçe veya gerçekleşinceye kadar defalarca çalışması olarak belirtebiliriz

Bu yapının angulardaki kullanımı ise ngFor.Biraz daha somut bir örnek vermemiz gerekirse projelerimizde listelerimizin gösterimi için bu yapıya ihtiyacmız olduğunu söyleyebiliriz.

Yukarıdaki örnekte de görüleceği gibi yazdırma ekrana verme işlemi için bu yapı kullanılmıştır Aynı kod bloğunun içersinde ngIf de bulunmaktadır Hadi gelin birazda bu başlıktan bahsedelim

NgIf yönergesi, bir koşula dayalı olarak bir öğeyi görüntülemek veya kaldırmak istediğinizde kullanılır.

Dikkat etmemiz gereken kısım ise başında yıldız olmasıdır.Sebebi ise çalışma anında dom elementini manipule etmesidir

PROJELER İÇİN TIKLAYINIZ

NGFOR

NGIF

ANGULARDA BOOSTRAP KULLANIMI

Önceki yazılarımızda angular'ı ne olduğundan neler yapılabildiğinden bahsetmiştik Bu içeriğimizde ise angular projemize boostrap dahil etmeyi göreceğiz

Bildiğiniz üzere boostrap bir css kütüphanesidir twitter tarafından geliştirilmiştir.Projemize ekleyerek içerisinde hazır olarak barındırdığı sınıfları alertlerı modalları etc kullanabiliriz Böylelikle sayfamıza istediğimiz özellikleri kazandırmış oluruz .

Bootstrap’ı herhangi bir paketleme-yöneticisi(Package manager) kullanarak indirebilirsiniz. 

Bir terminal açıp projenizin bulunduğu dizine gittikten sonra, terminalde npm install bootstrap — save komutunu yazıp çalıştırın. Bu komut Bootstrap’ın son versiyonunu projenizin içindeki node_modules klasörüne indiricektir. –save bootstrap’ın ayrıca package.json dosyasına kaydedilmesine de yarıyor. 

İndirme işlemimizi yaptık ama işimiz henüz bitmedi.  Bootstrap’ı projeye dahil (import) etmemiz gerekiyor. 

1.si angular.json dosyasının içinde styles diye bir dizi bulunuyor. Bu dizinin içine indirdiğimiz Bootstrap’ın adresini veriyoruz veya

angular.json

 styles.css ya da styles.scss dosyalarına indirdiğimiz Bootstrap’ı dahil(import) ediyoruz. Bunu

styles.css

kod satırını üst kısma koyarak yapıyoruz.

                   

 ÖRNEK PROJE 

  LİNK

ANGULAR KURULUM - PAKETLER- DOSYA ÖZELLİKLERİ - COMPONENT KAVRAMI

 

 
 
 

Evet son zamanlarda sıklıkla kullanılan bir javascript frameworkü olan Angular'ı mercek altına alalım.Web, mobil ve masaüstü uygulamaları oluşturabileceğimiz belirterek başlayalım Bir diğer önemli nokta ise Angular'ın Typescript ile kodlanmasıdır.

      Nesne tabanlı diller konusunda bilgi sahibiyseniz öğrenmeniz daha hızlı ve kolay olacaktır.MVC mimarisini desteklemesi bir başka önemli noktasıdır

      Component ve modüller oluşturarak tekrar eden aynı iş yapan kodlar yerine tek kod yazılır. Ayrıca Ionic, Kendi gibi mimarilere kolayca entegre olur. Böylece Cross Platform çalışır. Kısaca mobil uygulamalar veya masaüstü yazılımları geliştirebilirsiniz.

Kurulum kısmına geçecek olursak

İlk olarak NodeJS indirmemiz gerekiyor. Bu,javascript komutlarını server tarafından işlenmesini sağlamakla yükümlü olan uygulamadır

https://nodejs.org/en/download/

Adresinden indirme işlemimizi gerçekleştiriyoruz.

 

 

 
Şimdi sırada

Node.js'in başarıyla kurulup kurulmadığını test etmenin en kolay yolu, bir terminal veya komut istemcisinde version komutunu çalıştırmaktır:

> node -v
v12.13.1

Node.js ile birlikte paket yöneticisi NPM'inde kurulmuş olmalıdır. NPM'i test etmek için şu kodu çalıştırın:

> npm -v
6.12.1

Şimdi angular kurulumuna geçelim.

Angular kurulumu için terminal ekranına npm install -g @angular/cli
yazarak kurulumu yapabilirsiniz. -g parametresi global anlamına gelmektedir.
Angular kurulumunu tamamladık. Komut ekranına ng -v
komutunu yazarak kurulumun başarılı olup olmadığını kontrol edebilir ve versiyonlar hakkında bilgi edinebilirsiniz.

Bu sistem NgModules olarak adlandırılır. NgModules uygulamanın
sadece alanına yönelik kod parçalarını bir araya getiren bir yapıdır.
Admin module 'ü inceleyecek olursak,dosya işlemleri, yükleme
silme, düzenleme vb. leri hepsi birer component olabilir.
Her birinde template‘ i vardır. Tüm bu component’ ler
Admin Module altında birleşir ve uygulamamıza dahil olur.
Aslında her module kendi başına mini bir uygulamadır.
Mini uygulamalar birleşip, büyük uygulamamızı oluştururlar.
Uygulamada, ilgili module’ ün özelliklerine ihtiyacımız kalmadığında kolayca uygulamadan söküp atabiliriz.

Örnek Projemizi ve Yorum Satırlarını İnceleyebilirsiniz

                                          

                   LİNKİ TIKLAYINIZ  

JAVASCRİPT'E GİRİŞ(Örnek Proje - Bilet Satış)

 

Daha önceki başlıklarımızda da belirttiğimiz gibi html kullanarak projemizin şemasını oluşturup iç dizyanını csslerle yapabiliriz İşte bu yapıya işlevsellik kazandıran kısım ise Javascript olacaktır  Bu yapıyı , dinamik web içeriği oluşturmak ve kontrol etmek için kullanıyoruz. Animasyonlu grafiklerden çizelgelere kadar birçok farklı alanı kapsar denilebilir. Temel yapınızı (html) ve stillerinizi (css) oluşturduktan sonra JavaScript, web sitenizi dinamik (otomatik olarak güncellenebilir) hale getirir.

Özellike front end tabanlı bir yazılım geliştirici olmak istiyorsanız, javascript öğrenmelisiniz bunu yaptıktan sonra birden fazla web uygulaması oluşturmak için kullanabileceğiniz birçok framework bulunmaktadır Günümüzde birçok farklı platformda kullanılmaktadır mobil uygulama geliştirmede, masaüstü uygulamalarında  ve oyun geliştirmede de bu gruna dahildir. 

Gerekli tagların içerisinde kullanım yapabileceğimiz gibi harici bir dosyayı da projemize dahil edebiliriz

   

 Git Projemiz

  LİNKİ TIKLAYINIZ

TEMEL SEVİYE HTML(Tablo Oluşturma ,Sayfa Bölme, Örnek Web Site)

Web tasarımı alanının olmazsa olmazlarından olan HTML çok uzun senelerdir kullanılmaya devam ediyor.HyperText Markup Language (Zengin Metin İşaretleme Dili) ya da kısaca HTML, bir web sitesine metin, tablo, form vb. içeriklerin eklenmesini ve bunların anlamlı bir şekilde birbirine bağlanarak çalışmasını sağlıyor Chrome, Firefox ve İnternet Explorer gibi tarayıcılar html kodlarını işleyerek bu kodları web sayfasına dönüştürür.

HTML Temel Yapısı:

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>This is a Heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

HEAD kısmında CSS (cascading style sheet), meta tanımlamalar gibi bağlantılar yapılır. Tarayıcı HTML içeriğini okuma işlemine bu kısımdan başlar.

BODY de ise  web sayfasını oluşturan html kod blogları yazılır.

BAZI HTML ELEMENTLERİ AŞAĞIDAKİ GİBİDİR

<!-- Yorum Satırı-->
<!-- HTML kodlarımızın arasındaki yorum satırları için kullanılırlar-->

<div>...</div>
<!-- div elementi bir alan oluşturmaya yarar
Bu alanlara CSS yardımı ile stiller verilerek
düzenleme yapılır . -->
<b>Kalın Yazı</b>
<strong>Kalın yazı</strong>
<p>Paragraf elementi</p>
<span>Span Elementi isteğe bağlı verilerin gösterilmesi için yapısal
ve görsel bir katman oluşturulmasını sağlar.
Div etiketinden farklı olarak
kapsadığı metni keserek bir alt satıra geçmeden ona farklı
bir nitelik kazandırır.</span>

<br/>
<!-- br elementi konulduğu yerden sonrasını aşağı atmak için kullanılır. 
 -->

<hr/>
<!-- hr elementi yatay çizgi oluşturmaya yarar. -->

<img />
<!-- img elementi görsel eklemeye yarar. 
<img src="görsel adresi" alt="görsel tanımlama bilgisi" -->

<a>Link</a>
<!-- a elementi bir yazı veya görsele link vermek için kullanılır.
 bu element'de img elementi gibi özellik değeri ile kullanılır.
<a href="yolumuz">Yol Metni</a>

<h1>Başlık</h1>
<h2>Başlık</h2>
<h3>Başlık</h3>
<h4>Başlık</h4>
<h5>Başlık</h5>
<h6>Başlık</h6>
<!-- h elementleri başlık oluşturmak istediğimizde kullanılır-->

              ÖRNEK HTML CSS KULLANIMLARI VE DİNAMİK
      TABLO OLUŞUMU İÇİN GİT ADRESİMİZİ ZİYARET EDEBİLİRSİNİZ

                      TABLO OLUŞTURMA 

            SAYFA BÖLME VE CSS

                  ÖRNEK WEB SİTESİ

WEB SERVİSLER

Web Servis bir aygıtın diğerine internet üzerinden http protokolü kullanarak sağladığı iletişim için tasarlanmış kod parçalarıdır şeklinde özetleyebilririz HTML,XML,JSON gibi makineler tarafınan okunabilen dosya formatlarının aktarmak için kullanılırlar

Bir web servisten veri okuyup , veri almak istediğinizde bilgisayarınızda veri transferinin gerçekleşmesi için bir port açılır ve bu portan veri okunup veri gönderilir.

HTPP üzerinden yapılan bu çağrımlara karşı SOAP(Simple Obect Access Protocol) dediğimiz protokol XML çıktıları üretir. Veri transferi bu XML çıktıları sayesinde yapıldığı için platform bağımsız bir yapısı vardır. Web servisi kullanmak istediğiniz program parçasının hangi dilde yazıldığının pek bir önemi yoktur.Çünkü sonuçta Web servisten alacağınız veri tipi XML'dir.Bundan dolayı C# ile yazılmış bir Web Servis Java tarafından Java ile yazılan bir Web Servis .Net teknolojileri tarafından kolayca kullanılabilmektedir.Bu yazılımların çalıştıkları platformalarında pek önemi yoktur

ÖRNEK PROJE 

   KİMLİK DOĞRULAMA

MVC VERİ ALMA VE DOĞRULAMA

Bildiğiniz üzere Mvc yapısında kullanıcıdan veri alma işlemleri viewdeki form aracılığıyla olup sonrasıda gerekli actionlar yardımıyla yönetilir Doğrulama işlemlerindeyse yine model üzerinde oluşturduğumuz tablolarımız ve zorunluluk barındıran noktalar(attributes) dıkkate alınır ve ona göre hareket edilir

Peki Veri Gönderme İşlemini Nasıl Yapacağız

View kısmında oluşturduğumuz form ile verilerin gönderileceği controller'ı ve içerisindeki action'ı belirliyorum.Bildiğiniz üzere view'i görüntülemek için default da get metodunu verileri göndermek içinse burda olduğu gibi postu tercih ediyorum

1 2 3 4 5 6 7 8 9 10

<form asp-action="UrunDogrula" asp-controller="Product" method="post"> <input type="text" asp-for="catName" placeholder="catName" /></br>  <input type="email" asp-for="Email" placeholder="Email" /></br>   <button>Gönder</button> </form>

 

Sırada ise metnin başında açıkladığımız doğrulama işlemimiz var Bunun için model state kullanacağım ayrıca breakpointler yardımıyla da detaylı incelemede bulunabilir git projemize göz atabilirsiniz

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27

public IActionResult UrunDogrula(Category model)         {             if (!ModelState.IsValid)//Geçerli mi?             {                 //Kullanıcı işlemleri                 // log işlemleri                  // veri taşıma vb                 ViewBag.hataMesajı=ModelState.Values.FirstOrDefault(x=>x.ValidationState==Microsoft.AspNetCore.Mvc.ModelBinding.ModelValidationState.Invalid).Errors[0].ErrorMessage;                 return View();             }             return null;         }

                            

Özetle bir web sitesindeki bir kullanıcıdan veri almak için normalde yukarıdaki gibi  bir form kullanırız ve bu verileri de kaydetmek istiyorsak genellikle POST yöntemi tercih edilir.Belirlediğimiz validation kuralları doğrultusunda da işlemin şartlarımıza uygun gerçekleşip gerçekleşmediğine bakılır..

    ÖRNEK GİT PROJESİ

    

     TIKLAYINIZ