Open
Ajans Aşamalar

Ajans Aşamaları

(1) Visual Studio'yu açalım ve Core Empty Projesi oluşturalım.

(2) Startup.cs dosyasını yapılandıralım, projemiz MVC yapısında olacaktır.
Servis Konfigür metoduna -> service.AddMvc() ekleyelim
Konfigüre metoduna -> app.useMVC( route açıklayalım) ekleyelim. Durum kodlarına ve static Files oluşumunu sağlayalım.
Not: AspNet Core Versiyonlara göre route değişiklikleri gösterebilir. Eğer varsayılan projeiz, endpoints route'u desteklemişse, MvcDeafaultRouting ile değiştereceğiz, projemizi mvc ile geliştireceğiz.

   public void ConfigureServices(IServiceCollection services)
        {
            //Mvc route kullanacaksak, default EndpointRouting yönlendirmeyi pasif'e çevimeliyiz.
            services.AddMvc(option => option.EnableEndpointRouting = false);
            services.AddControllers(options => options.EnableEndpointRouting = false);
            services.AddControllersWithViews(options => options.EnableEndpointRouting = false);
            services.AddRazorPages().AddMvcOptions(options => options.EnableEndpointRouting = false);
 
        }

        public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
        {
            //2 şekilde MVC yöntemini kullanacağımızı belirtebiliriz. ya varsayılan ayarı getir deriz ya da kendimiz yazarız.
            //1.Şekil
            //app.UseMvc(routes =>
            {
                routes.MapRoute(
                    name: "default",
                    template: "{controller=Home}/{action=Index}/{id?}"  (controller=Home, diyerek default Home dur demek isteriz)
                    );

            //});
            //2.Şekil varsayılan halini kullanacağımızı bellirtiriz.
            app.UseMvcWithDefaultRoute();  
 

            //Birkaç faydalı Konfigür ayarları vardır. Bunlar;

            //env.IsDevelopment Metodu;Proje geliştirdiğimizde hataları gösterir,yayınlandığında hata görünmez,exception sayfalar gösterilir.
            if (env.IsDevelopment())
            {
                app.UseDeveloperExceptionPage();  
            }

            //UseStaticFiles() metoduyla, statik dosyalarımızı Asp.Net Core ile gösterebiliriz. Varsayılan klasör; wwwRoot'tur.
             app.UseStaticFiles();   


            //UseStatusCodePages() metoduyla; hata durum sayfaları, ufak bir mesaj olarak sayfada belirir.
             app.UseStatusCodePages();
        }

  

İnceleme: EndPoints routing

 EndPoint route yöntemi de tıpkı MVC route yöntemine benzer.İncelersek;
        //public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
        //{ 
        //    app.UseRouting();

        //    app.UseEndpoints(endpoints =>
        //    {
        //        endpoints.MapControllers();

        //        endpoints.MapControllerRoute(
        //            "default", "{controller=Home}/{action=Index}/{id?}");

        //        //1
        //        //endpoints.MapControllerRoute(
        //        //name: "default",
        //        //pattern: "{controller=Home}/{action=Index}/{id?}");

        //        //2 area için
        //        //endpoints.MapAreaControllerRoute(
        //        //    "admin",
        //        //    "admin",
        //        //    "Admin/{controller=Home}/{action=Index}/{id?}");

        //    });
        //}

Program.cs, projemizin beynidir. Bu dosya ile proje ayağa kalkar. Webhosting oluşur.Server türü kestreldir.Proje derlenip çalışır.Burdaki ayarlara, bu proje için dokunmayacağız.

(3)Uygun klasörleri oluşturalım. Models,Controllers,Views ve wwwroot klasörü.(wwwroot klasörü Asp.Net Core da gösterilen tek klasördür.Adnı Startup.cs ile değiştirebiliriz.Lakin pek gerek yoktur.)
Views klasöründe 2 adet view dosyası oluşturalım.
(a) _ViewImports , içeriğine;
    _ViewImports sayfası, bizim import edeceğimiz dosyaları belirler.
    @namespace App.Web.Models //proje adı ve Models klasörümüzü tanıttık.
    @addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers //Taghelper namespace'ini tanıttık.(Tüm sayfalara etkilenmiş oldu.)
    
    (b)  _ViewStart  , içeriğine    
       Proje çalıştığında sayfaları etkileyecek stil, webmaster sayfası,title burda tanımlanır.
    @{     ViewData["Title"] = "_ViewStart";  Layout = "_Layout";     }

    (c)Bu sefer bir klasör oluşturup içerisine view ekleyelim.Shared klasörü, _Layout view dosyası ekleyelim.
     Asp.Net WebForms daki web master sayfamızdır.Tüm sayfalar bu anasayfadan istediğimizde etkilenebilecek.
    @{  Layout = "~/Views/Shared/_Layout.cshtml"; }   
Controllers klasörüne, HomeController ekleyelim.Çıkan pencerede Layout kullanacağımızı sekmeye tıklayarak belirtelim.Bir index sayfası oluşturalım.(Not:Ekleme sırasında, proje otomatik olarak paketler yükleyebilir.efcore,Tools,Logging,Design vsb.)


(4) Projeye sağ click, istemci Tarafı Kitaplığını tıklyalım.Dilediğimiz css ve js yapılarını, bu araçla projemize indirelim.
Sağlayıcı=> Nugget kütüphanesi olsun (unpkg kısaltılmasıdır)
Arama paneline; "bootstrap css" yazıp ve wwwroot klasörü içerisinde oluşturucağımızı belirtelim.
Aynı araçla, "font awesome css", "Jquery" gibi dilediğimiz kütüphaneleri indirebiliriz.
Projemize bir template giydireceksek, template'i direk sürükle bırak yöntemi ile -wwwRoot klasörü içerisine atalım. css,js,images adında klasör oluşturalım. İstediğimiz dosyayı kopyalayıp, customs oluşturduğumuz klasör'e yapıştırabiliriz.Templates deki images klasörünü , wwwwroot klasörüne images adnda klasör oluşturup, kopyala/yapıştır yapalım.

Not:AspNet Core, proje içerisindeki herhangi custom yarattığınız klasörleri tanımaz. Url de bildirseniz bile size o klasörü içindeki herhangi bir dosyayı vermez.Tanıdığı klasörler wwwRoot içerisinde olmalıdır. ya da tanıtmak için startup.cs de staticfiles metodunda belirtmeniz gerekir.

Bundler ve Minifier aracını kullanmak istersek; https://marketplace.visualstudio.com/items?itemName=MadsKristensen.BundlerMinifier sitesini ziyaret edip bundler ve minifer özelliğini indirelim.Projeyi resetleyip açtığımızda artık css ya da js dosylarına sağ tıkladığımızda add bundler&minifier adında bir özellik gelecektir.İstediğiniz css ler'e ctrl ile seçip add bundler&minifier özelliğini tıklatarak wwwroot-> css klasöründe birleştirebiliriz.Burda Dikkat etmemiz gereken bir husus vardır. Templateki ilgili css ve ya jslerin üzerine ctrl seçerken, sırasına dikkat etmeliyiz.Aksi takdirde çakışmalar yaranır. Sağ click add bundler&minimizer özelliğini kullanıp wwwroot içerisindeki css klasörümüze bir dosya oluştrup birleştirelim.Bu dosyayı incelediğimizde,sırasının doğru olduğunu kontrol edelim,değilse düzenleyelim.
HomeController ile Index sayfamızı oluşturmuştuk.Index sayfamız, bootstrap düzenine sahip olacaktır.

    <div class="d-flex"> 
    <div class="container m-auto w-auto">
    <div class="row">

    <div class="col-md-9"> </div> 
     <div class="col-md-3">    </div>
 
    </div>
    </div> 
    </div>





Models klasörüne bir adet E_User adında sınıf ekleyelim.
  using System.ComponentModel.DataAnnotations;

    public class E_User
    {
        public int ID { get; set; }
        [Required(ErrorMessage = "isminizi giriniz")]  //Boş girildiğinde HataMesajı dönecektir.
        public string Name { get; set; }   
        public string Email { get; set; }
        public bool? Gender  {get; set;}
       public string ImageUrl { get; set; }    
    }




Projede Veritabanı kullanmayacağız. Bir Listemiz olacak ve bilgiler bu listeye eklenecek. List<User>
Bll(BusinessLogicLayer) adında bir klasör oluşturalım ve UserRepository(depo) adında bir sınıf ekleyelim.
2 metodumuz olacak.1-User ekle, 2-İlgili detay sayfasına git.

    //Repository sınıfımızı, her çağırdığımızda instance'ını(örnekleme'yi) oluşturmayalım. Static olsun,direk nokta dendiğinde ulaşılsın.
    public static class UserRepository
    { 
        //entity listesi oluşturup instance aldık. Genelde liste adı sonu s ile biter,instance ise küçük harle yazılır users,products.(Pascal üsulu)
        private static List<E_User> users = new List<E_User>();
        //property oluşturup public yaptık.Property ler genelde büyükharfle başlar.Liste ise sonu s ile biter. (Pascal düzeni)
        public static List<E_User> Users { get { return users; } } 
   
        static UserRepository()   //Constructor ile (doğum anında) oluşacakları ekleyelim.
        {
            users = new List<E_User>()
            {
                new E_User() {ID=1, Name="Female01", ImageUrl="Female01.jpg"},
               new E_User() {ID=2, Name="Female02", ImageUrl="Female02.jpg"},
               new E_User() {ID=3, Name="Femal03", ImageUrl="Femal03.jpg"},
               new E_User() {ID=4, Name="Male01", ImageUrl="Male01.jpg"},
               new E_User() {ID=5, Name="Male02", ImageUrl="Male02.jpg"},
               new E_User() {ID=6, Name="Female04", ImageUrl="Female04.jpg"},
               new E_User() {ID=7, Name="Male03", ImageUrl="Male03.jpg"},
               new E_User() {ID=8, Name="Male04", ImageUrl="Male04.jpg"},
               new E_User() {ID=9, Name="Female05", ImageUrl="Female05.jpg"}
            };
        }

    //Ekleme metodumuz statik ve geriye değer döndermesin.
        public static void AddUser(E_User prm)
        {
            users.Add(prm);
        }
        public static E_User GetbyUserID(int id)
        {
            return users.FirstOrDefault(i => i.ID == id); //using System.Linq;

        }



Index sayfasında Üyeler görünecek.(UserRepository Constructor doğum anında üyeler listelenecekti.)
UserRepository deki AddUser ve GetbyUser ilgili detay sayfasına ulaşıcaktık.

 
        public IActionResult Index()
        {
            return View(UserRepository.Users.ToList()); //List Property yi listeledik
        }


        public IActionResult UserDetail(int id)
        {
            return View(UserRepository.GetbyUserID(id));

        }


        public IActionResult AddUser()
        {
            return View();
        }
        [HttpPost]
        public IActionResult AddUser(E_User prm)
        {
            //Gelen modelin içindeki kurallara (validasyon kurallarına) bakar.Engel yoksa valid kısmı bool true olur
            if (ModelState.IsValid)
            {
                UserRepository.AddUser(prm);
                return View("SuccessMessage", prm); //thanks view haberdar olsun(view oluşturalım) ve parametre taşısın
            }
            else return View(prm);
        }
 

        public IActionResult SuccessMessage()
        {
            return View();
        }




Index sayfamızda bootstrap elementleri vardı.İçerisini dolduralım.
return View(UserRepository.Users.ToList());

INDEX

    <div class="d-flex"> 
    <div class="container m-auto w-auto">
    <div class="row">

    <div class="col-md-9"> </div> 
     <div class="col-md-3">    </div>
 
    </div>
    </div> 
    </div>
@model ICollection<Web.Models.Entity.E_User> 

    <div class="d-flex"> 
    <div class="container m-auto w-auto">
    <div class="row">

    <div class="col-md-9">

    
    @foreach (var item in Model)
    {
        <div class="card float-left" style="width: 200px">
        <img src="/images/@item.ImageUrl" class=" img-fluid" alt="@item.Name">
        <div class="card-body">
        <h5 class="card-title">@item.Name</h5>
        <p class="card-text">@item.Email</p>
        <a asp-controller="course" asp-action="UserDetail" asp-route-id="@item.ID" class="btn btn-sm btn-outline-secondary">Detay</a> 
        </div> </div>
    } 
    </div> 
    <div class="col-md-3">    </div> 
    </div>
    </div> 
    </div>


AddUser sayfası

    @model E_User
    <div class="d-flex"> 
    <div class="container m-auto w-auto">
    <div class="row">
    <div class="col-md-12">


    <form asp-action="AddUser" method="post">
  <div asp-validation-summary="All"></div>
    <p>
    <label asp-for="@Model.Name">İsim</label>
    <input asp-for="@Model.Name" />
    </p>
    <p>
    <label asp-for="@Model.Email">Email</label>
    <input asp-for="@Model.Email" />
    </p> 


    <p>
    <label asp-for="@Model.Gender">Cinsiyetiniz:</label>
    <select name="Confirm" >
        <option value="True">Bayan</option>
        <option value="False">Bay</option>
    </select>
    </p>

    <p><input type="submit" value="Dahil Ol" /></p>

    </div>
    </div> 
    </div>
</form>

SuccessMessage sayfası


<div class="card-body">
    @if(Model.Gender==true) {
        <p>Teşekkür ederiz. @Model.Name  hanım</p> 
    }else {
        <p>Teşekkür ederiz. @Model.Name  bey</p>    
    }
</div>

User Detay Sayfası


     @Model.ID 
     @Model.Name  
    <img src="/images/@Model.ImageUrl" alt="@Model.Name" >




Componentler partial view gibidir, yalnızca daha esnektir. Partial Viewler, dışardan bir veri alıp içeriğini, istenilen tüm viewlerde gösterebilen bir yapıdır. Ama Partial View'in modeli, yerleşeceği view'e özgü, bağımlı bir modeli olmalıdır,uyum sağlamalıdır.
Componentlerin, yerleşeceği view'in modeline, uyum sağlama zorunluluğu yoktur.O yüzden sık-sık tercih edilir.
Component yapısının, controller denetleyicisine ihtiyacı yoktur. MVC yöntemi gibidir.Bir Model vardır. Controller gibi Component modelden bilgiyi alır, işler ve Component adındaki View'e gönderir.envoke metodunu tetiklemek yeterlidir.Yerleşeceği View'in modeline, bağımlılığı yoktur.
Bunun için ViewsComponent adında bir klasör oluşturalım.(Dilerseniz farklı bir ad verebilirsiiz.)
RightCategory adında bir sınıf oluşturalım.

using Microsoft.AspNetCore.Mvc;
using System.Collections.Generic;
namespace Web.ViewsComponent
{
    public class RightCategory : ViewComponent   //using Microsoft.AspNetCore.Mvc;
    {
        public IViewComponentResult Invoke()
        {
            var categories = new List()
            {
                new E_Cat(){ Name="Kategori 1"},
                new E_Cat(){ Name="Kategori 2"},
                new E_Cat(){ Name="Kategori 3"}
            };

            return View(categories); 
        }
        public class E_Cat   //Model de yaratılır.Deneme amaçlı yazılmıştır.
        {
            public int ID { get; set; }
            public string Name { get; set; }
        }
    }
}

Şimdi de aynı isimde bir klasör oluşturup Default dosyası oluşturcaz. Tıpki MVC deki HomeController, Home klasöründeki Index gibi.
Views- Shared-Component adında klasör oluşturalım.Tüm componentleri,dilerseniz orda yazalım.
Şimdi bu Components klasörü içerisine, RightCategory adlı klasör ve Default adında view oluşturalım.

@model IEnumerable<Web.ViewsComponent.RightCategory.E_Cat>
  
@foreach (var item in Model)
{
    <a href="#" class="list-group-item list-group-item-action">@item.Name </a>
}


Projemizin ayağa kalkması

AspNet projesini, bilgisayarınız anlaması için onu derleyip anlayabileceği bir yapıya dönüştürmesi gerek.
.Net Framework ile geliştirilen web form ve ya MVC uygulamalar sadece Windows ortamında geliştirilirdi.
Fakat .Net Core platformu bir cross platformdur. İster windows ister Linux ortamında çalışır.
Projenizi çalıştırdığında Program.cs dosyas bir webhosting oluşturur. Türü Kestrel serverdır.
Yerel projemizde, HTTP request(istekleri)'leri direk kestrel webserver ele alabilir.
İnternette, web projesi, istekler (HTTP request) ilk önce Proxy Server'a uğrar (IIS ya da Apache) sonra kestrel webserverdan geçip hayata geçer.

Visual Studio Code Programı

Visual Studio Code (code.visualstudio.com) , sitesinden indirebilirsiniz.
Visual Studio, Sadece Windows ortamına özgü olan bir programdır.Web, masaüstü, mobil app'ler uygulayabilirsiniz.
Ama Visual Studio Code ise herhangi bir uygulama için geliştirilebilir. Php, Phyton, Node.Js gibi.
Node.Js => Javascript kodlarımızı, server tarafında çalıştırılabilir hale getirilebilir bir yapıdır.
Node versiyonunuzu dilerseniz bilgisayarınızda, windows->başlat-> komut isteminden(cmd) node -v ya da node --version diye öğrenebiliriz.

Visual Studio Code Programını Açalım

Programı başlatığımızda, Extension bölümünden C# (oto. tanımlamalar kendi yazar),C# Extension (bazı kodları sizin için otomatik indirir) ve Nuget kütüphanesini indirelim.
Terminali açalım. (bilgisayarımızdaki (cmd) komut istemi gibidir) ;
1.cd desktop : deyip desktop'a geçiş yapalım.
2. mkdir PROJE : proje adında klasör oluşturalım
3. cd PROJE : ile klasöre geçiş yapalım
4. dotnet new --help : deyip istediğimiz projeyi oluşturalım biz wep kullacağız
5.dir : deyip içindei klasörlere bakalım
6. code . :deyip şuanda üzerinde bulunduğumuz klasörü editörde görelim.
.vscode adında assets ler var eklensin mi diye uyarı verir. Yes diyelim.
7.dotnet run : diyelim ve bize localhost: port adreine girelim.
8. ctrl+c : ile şimdilik durduralım.
help komutuyla ilgili yardımları alabiliriz; dotnet new --help
dotnet new mvc yazalım
Klasör = mkdir demektir. dir yazarsak tüm lasörlerimizi getirir.
biz cd newFolder , dotnet new mvc diyelim
code . diyelim ve kendisi açılır.
dir dersek içindeki tüm klasörleri görürüz.


MVC Yapısı

Model ve Controller olarak ifade edilen bir web programlama desenidir.
Tarz ve yöntemin adıdır. 1970 yılında kulanılan bir kavramdı.
Asp.Net, MVC desenini kendi çatısına aldı. Bu yapıyı Node.Js gibi app lerde uyguladı.
asp.net bir web programlamadır, mvc deseni ise farklı bir yöntemdir
MVC'de uygulama geliştirirken 3 katman oluşturuluyor. Karmaşadan kaçınıyor.
Web Formda uygulama büyüdüğünde karmaşık hale geiyordu.
Uygulamaya gelen istekleri controller alıyor, İçini Model ile doldurup View'e yönlendiriyor.
örn; www.abc.com sitesine www.abc.com/sekilA kllanıcı tarafında istek talep ediliyor.
Bu isteği, Controller algılıyor, veritabanındaki tüm bilgileri talep ediyor.
Bu bilgiler'de Model yapısındadır. Modeldeki veriyle kendini doldurup, view'e gönderiyor.
View de kenisine gelen bu bilgileri,sayfa üzerinde html'e çevirip kullanıcıya listeliyor.
02.02.2020