KARAYEL TASARIM SUNAR UYGULAMALI ASP.NET MVC KİTABI. Ali KARAYEL Özcan BAYĞUŞ İbrahim Uğur YILMAZ

Transkript

1 KARAYEL TASARIM SUNAR UYGULAMALI ASP.NET MVC KİTABI Ali KARAYEL Özcan BAYĞUŞ İbrahim Uğur YILMAZ - 1 -

2 KISALTMALAR 6 KAYNAKLAR MVC 9 ViewBag,ViewData ve TempData Kullanımı ve Farkları HTML ve AJAX Metodları Denetleyici (Controller) URL Yolları (URL Routes) Denetleyici Fabrikası (Controller Factory) Denetleyicilerin ekran çıktısı verilmiştir Aksiyonlar (Actions) Metotlar (Methods) Sonuçlar (Results) Filtreler (Filters) Seçiciler (Selectors) MVC mi, Klasik Web Form mu? ASP.NET MVC Yöntemi MVC Tasarım Kalıbının Avantajları Web Form Model Avantajları En İyi Yaklaşım Hangisi WEB SİTESİNİN TASARIMI VE MİMARİ YAPISI Projeye Genel Bakış Mimari Tasarım

3 Uygulama Katmanlarının Tasarımı ve N-Tier yapı Veri Saklama Yerinin Seçimi (Veritabanı Seçimi) Veriye Erişim Katmanının Tasarlanması LINQ nun veriye erişim katmanına etkisi; Entity Framework Veriye Erişim Katmanının Güvenliği Uygulama Mantığı Katmanının Geliştirilmesi Denetleyici (Controller) Güvenlik Daya İyi Performans İçin Veriyi Önbellekleme (Caching Data) Sıradışı Durum, Hata Yönetimi Kullanıcı Arayüz Katmanı Uygulama Katmanı İçin Mühendislikte En Başarılı Yöntemler Görünümler (Views) 34 2 KURULUM Visual Studio 2010 Kurulumu Visual Web Developer Express Kullanarak; Gerekli Yazılım Araçlarını Yükleme İsteğe Bağlı Bileşenler Yükleme MVC Framework Kaynak Kodu IIS Express SQL Server 2008 R2 Management Studio Express Sunucu Hazırlanması Web Sunucu Rolü Etkinleştirilmesi Windows Server bir rol ekleme Ek Bileşenlerini Yükleme Web Dağıtım Ayarlama Başlat menüsünde bulunan Internet Information Services (IIS) Yöneticisi aracı,açın.pencerenin sol tarafındaki bağlantıları paneli, sunucu seçin. Bu isme göre t IIS Yöneticisi aracını kullanarak Yönetim Hizmeti Delegasyonu özellik ayarlarını düzenleme Yönetim Hizmeti Etkinleştirme 45 3 İLK MVC UYGULAMASINA GİRİŞ

4 3.1 Yeni Bir ASP.NET MVC Projesi Oluşturma İlk MVC Uygulaması Dinamik Çıktı Ekleme ASP:NET MVC3.0 da FORM Oluşturma Asp.Net Mvc de Forma Kontrol Ekleme Asp.Net Mvc de create a strogly view 71 4 ASP.NET MVC DE SİTE TASARIMI 76 Analiz Site Tasarımı Tasarım da kullanılan uygulamalar Style sheet dosyalarında css in kullanımı Neden tasarımda DİV kullanmalıyız? ASP.NET MVC MASTER PAGE ( Layout ) Asp.NET MVC ile Dinamik Masterpage ( Layout )Seçimi Menü Oluşturma Sistemi Basit Bir Menü Tasarlamak Site Tasarımını oluşturma Style Sheet oluşturma 89 5 ÜYELİK SİSTEMİNİN OLUŞTURULMASI Giriş Membership Provider Hakkında Membershiple Provider Kullanmak Yetkilendirme Ayarları Kullanıcı bilgisi için profil kullanma Anonim Kullanıcılar MVC Framework ile Kullanıcı Modülü

5 Uygulama Özellikleri Model Sınıflarının Oluşturulması Projede İlk Adım Veri Tabanı Konfügurasyonu Model Dosyasının Oluşturulması Controller Dosyasının Oluşturulması KullaniciYonetimi Action Metot View Uygulaması Kayit.cshtml View 129 Script İçeriği Giris.cshtml SifremiUnuttum.cshtml ParolaDegistir.cshtml KullaniciProfil.cshtml KullaniciYonetimi.cshtml KullaniciDuzenle.cshtml KullaniciRolYonet View

6 KISALTMALAR MVC DAL BLL ALL HTML XHTML TDD URL VB REST SEO IIS : Model View Controller : Data Acces Layer : Business Logic Layer : Application Logic Layer : Hyper Text Markup Language : Extensible HyperText Markup Language : Test Driven Design : Uniform Resource Locator : Visual Basic : Representational State Transfer : Search Engine Optimization : Internet Information Server 6

7 KAYNAKLAR 1. Asp.NET MVC in Action, Jeffrey PALERMO, BEN SCHEIRMAN, JIMMY BOGARD, Manning Publications Co., Professional LINQ, Scott Klein Wrox (January 22, 2008) 3. Programming Entity Framework, Julia Lerman O Reilly Media; Second Edition edition (August 26, 2010) 4. Pro ASP.NET MVC 3 Framework, Steve Sanderson and Adam Freeman,Apress; 3 edition (June 27, 2011) 5. ASP.NET MVC Website Programming: Problem Design Solution (Wrox Programmer to Programmer), Marco Bellinaso, Katawazi and Nick Berardi ; 6. The Art of SEO: Copyright 2010 Eric Enge, Stephan Spencer, Rand Fishkin, and Jessie Stricchiola. All rights reserved. Printed in the United States of America. Published by O Reilly Media, Inc., 1005 Gravenstein Highway North, Sebastopol, CA Search Engine Optimization Bible, Second Edition Published by Wiley Publishing, Inc. 8. Learning Jquery 1.3 Jonathan Chaffer, Karl Swedberg 7

8 GİRİŞ Web ortamında paylaşılan bilgi ve bu bilgileri kullanan insan sayısı her geçen gün artmaktadır. Öyle ki insanlar kendi işleriyle ilgili karşılaştıkları teknik problemleri bile forumlara yazmakta ve destek almaya çalışmaktadırlar. Çok farklı konularda forum ve makale yayınlanmasına olanak sağlayan siteler bulunmakta ve sayıları her geçen gün artmaktadır. Mevcut siteler incelendiğinde teknolojileri, mimari ve teknik alt yapıları, kullanıcı arayüzleri, güvenlik yapılandırmaları, arama motorları tarafından ulaşılabilme başarıları, site içi arama motorlarındaki başarıları, görsel tasarımları ve performansları büyük ölçüde farklılık göstermektedir. Biz bu projemizde Microsoft tarafından geliştirilen ASP.NET MVC teknolojisinde uygulamalı ileri düzey programlama ve bu programlamaya eş değer yazılım mimarilerinin üzerinde duracağız. Bugüne kadar çıkan Türkçe kaynaklardan fark olarak, kitabımızda sürekli değişen teknolojiler yerine, bu teknolojiyle nasıl proje hazırlanır ve projeleri adım adım anlatmaya özen gösterdik. Geliştirilmiş olan proje için, model-view-controller mimari yapısı ile klasik web formlar kıyaslanmış ve bir tercih yapılmıştır. Veritabanı için ayrıca nesneye yönelimli bir yapı tercih edilmiştir. Kullanıcı arayüzleri üzerine çalışma yapılmış ve arayüzlerin kullanıcılar üzerindeki etkileri göz önünde bulundurularak kullanıcı dostu bir arayüz tasarlanmıştır. Arama motorları tarafından içeriği indekslenebilir html formları oluşturulmuş ve kullanıcıların bilgi arama metodları göz önünde bulundurulmuş, bunlara ek olarakta papatyanın sarısı gibi düşünülerek yazılımın çekirdek kısmı oluşturulmuş ve bu oluşan papatyanın sarına modüller yaprak gibi düşünülürse, genişletilebilir bir proje hazırladık. 8

9 1.1 MVC Model Görünüm - Denetleyici, (Model View Controller, MVC) yazılım mühendisliğinde kullanılan bir mimari kalıptır (pattern). MVC kalıbı, uygulamayı üç farklı bölüme ayırır. Model, bilgiyi yönetmek ve veritabanında yapılacak işlemleri yürüterek Denetleyici bölümüyle koordinasyonu sağlar. Model, Veriye Erişim Katmanı (Data Acces Layer, DAL) değildir. DAL, Model in altında bulunan farklı bir katmandır. Model, bu katmanla denetleyici arasındaki işlevleri yürütür. Gerektiğinde Denetleyici dan gelen istekleri veritabanına uygular veya veritabanındaki verileri işleyerek Denetleyiciden gelen talebe göre iletir. Görünüm, Model i yorumlar ve kullanıcıyla etkileşim sağlamak amacıyla bir Form a iletir. Bu form, kullanıcıdan gelen istekler doğrultusunda Denetleyiciye istek gönderir veya yine bir istek doğrultusunda Denetleyici aracılığyla veri çağırır. Denetleyici ise Görünüm katmanından gelen girdileri(input) değerlendirir ve Model le iletişimi sağlar. Denetleyici, kullanıcılar tarafından Görünüm nesnesi aracılığıyla girilen veriler doğrultusunda Model e talimatlar gönderir ve bu girdiler doğrultusunda aksiyonların (Action) uygulanmasını sağlar ŞEKİL MODEL VİEW CONTROLLER İŞLEMLERİ MVC tasarım kalıbı, genellikle web tabanlı uygulamalar geliştirmek amacıyla kullanılır. Görünüm kısmı HTML veya XHTML formlardan oluşur. Denetleyici genellikle GET, POST metotları aracılığıyla kullanıcılardan gelen istekleri yorumlar ve bu isteklerle ne yapılacağına karar vererek Model katmanındaki kodları işletir. Örneğin kullanıcının yeni üye kaydı talebini alarak, veritabanında yeni kullanıcı oluşturulması için talebi Model e iletir. Oluşturulan yeni kaydı Model den isteyerek, bilgileri teyyid etmesi için kullanıcıya geri gönderir. Bu tez çalışmasında Visual Studio.NET MVC tasarım kalıbı kullanılmıştır. ASP.NET MVC, ASP.NET Web uygulama iskelet sisteminin bir parçasıdır. Bu sistem iki farklı programlama modelini içerir. Birtanesi, ASP.NET web uygulamaları, diğeri ise ASP.NET Web 9

10 formlarıdır. MVC uygulaması, aşağıdaki şemada gösterildiği gibi 3 farklı özellik kullanılarak tasarlanır ve uygulanır. Model, Görünüm, Denetleyici (Model-View-Controller) Mimarisi ŞEKİL Model Model, bir uygulama için çekirdek bilgileri içermektedir. Data, validasyon kuralları ve ayrıca veriye erişim ile veriyi bir araya toplama mantığını barındırır. Model, aşağıdaki paketleri içerir. 1. DDD (Domain Driven Design) 2. TDD (Test Driven Design) 3. ALT.NET 4. Repository Pattern 5. Service Pattern 6. Specification Pattern 7. POCO (Plain Old CLR Object) 8. LINQ-To-SQL 9. ADO.NET Entity Framework 10. NHiberante 11. Data Tabloları 12. Özel iş katmanı mantık kodları 10

11 1.1.3 Görünüm (View) Görünüm, uygulamanın kullanıcıya sunulduğu arayüzleri içerir. Görünüm katmanı içerisinde, Asp.NET HTML formları kullanılmaktadır. ASP.NET MVC içerisinde varsayılan olarak gelen motor WebForm ViewEngine dir. Bu motor, klasörlerin hiyerarşisinde ve cshtml ile ascx dosyalarının tarayıcıya gönderilirken HTML e dönüştürülme görevini üstlenir. WebForm ViewEngine, Fremawork 1.0 dan bu güne standart Görünüm motor olarak kullanılmaktadır. Ancak bu motor geliştirilerek yalnızca kontrol tabanlı(control-based) dönüştürme yapabiliyorken, dahili kod taraflı(inline-codebased) dönüştürme yetenekleri de eklenmiştir. Şekil-2.3 de varsayılan Görünüm motoru için oluşturulmuş klasör hiyerarşisi görülmektedir. Klasör hiyerarşisi ŞEKİL Görünüm motoru, cshtml ve ascx dosyalarını çevirmek için neredeyse aynı metodları uygular. Bu nedenle cshtml ve ascx dosyaları aynı metodla doğrudan HTML e çevrilebilirler. 11

12 Fakat Denetleyici tarafından çevrilecek dosyaların cshtml mi yoksa ascx mi olduğunu anlayabilmesi için bazı gereksinimler vardır. Standart ASP.NET MVC Görünüm motoru hangi dosyayı çevireceğine karar verebilmek için aşağıda gösterilen şekilde bir listeyi en alttan başlayarak en üste kadar tarar. ~/Views/controller/action.cshtml ~/Views/controller/action. cshtml ~/Views/Shared/action. ascx ~/Views/Shared/action. ascx Bu listenin anlamı kısaca şöyle özetlenebilir; Denetleyici öncelikle normal klasörleri tek tek kontrol eder. (Shared klasörleri sona bırakır) Cshtml ve sayfa (page) dosyaları cshtml dosyalarından önce kontrol edilir Gözatma listesi, view sayfalarında seçilmiş olan ana şablon (master template) dosyalarını da işler. Fakat ana şablonların çevrilme işlemleri View sayfası ve denetleyiciye göre biraz daha farklıdır. Aşağıda ana sayfaların (Layout) kontrol edilme sırası görülmektedir. ~/Views/controller/AnaSayfa.cshtml ~/Views/Shared/layout. cshtml ViewData ve Model ViewData özelliği, veriyi saklamak, Model ve Denetleyiciden Görünüm nesnesine aktarmak için kullanılır. Bu özellik Sözlük (Dictionary) nesnesi olarak da ViewData[ Data ] Veya bir model nesnesi olarak da ViewBag,ViewData ve TempData Kullanımı ve Farkları Asp.net mvc ile birlikte gelen ViewBag, ViewData ve TempData özellikleri, sıklıkla ne zaman hangisini kullansak daha iyi, yada hangisi performans için daha avantajlı gibisinden sorularıda beraberinde getiriyor. Sebebi ise ViewBag, ViewData ve TempData kullanımlarının birbirlerine çok yakınlığıdır. 12

13 ViewBag, ViewData ve TempData ; Bu üç asp.net mvc nesnesi belirgin özelliği küçük boyutlardaki verilerimizi Controller dan View kısmına aktarmak için kullanırız. Bu makelemizde aradaki farkı biraz daha asp.net mvc 3 ile yazılmış olan kodda izah etmeye çalışacağım. Öncelikle ViewData ve ViewBag aynı çalışma mantığına sahip olmakla beraber ViewData ; asp.net mvc, asp.net mvc 2 ve asp.net mvc3 de çalışmaktadır. Fakat ViewBag asp.net mvc 3 ile birlikte gelen yeni ve runtime içerisinde oluşan dinamik bir asp.net mvc 3 nesnesidir. ViewData kullanımında köşeli parentez içerisine ( ViewData["Test"] ) içerisine yazdığımız anahtar kelime ( key = Test) sayesinde diğer ViewData lardan ayırmış oluruz. ViewData nesneside birden fazla farklı nesne ayırmasını ViewDataDictionary sınıfı aracılıyla, key/value syntax sayesinde çözümlemiş olur. TempData ise çok basit bir çalışma mantığı vardır. Bunu kısaca açıklamak gerekirse herhangi Controller dan oluşturulmuş olan veriyi Views ler arasında taşımamıza veya tek bir View içerisinde elimizdeki veriyi ekran çıktısı olarak görüntüler. Yeri gelmişken deyinmek istiyorum, Eğer ki büyük bir nesneyi Controller dan Views göndermemiz gerecekse; mesale, raporlama gibi büyük boyutlardaki verilerimiz için ViewModels kullanmalıyız. ViewBag, ViewData ve TempData çalışma senoryası olarak şekil deki gibi çalışmaktadır ŞEKİL 13

14 ŞEKİL ŞEKİL ViewBag, ViewData ve TempData aralarındaki en büyük fark ise TempData nesnesini eğer ki bir daha kullanmak istersek bir sonraki redirek ettiğimiz actionda herhangi bir işleme mağruz kalmadan kullanabiliriz. Fakat ViewBag ve ViewData nesnelerine ulaşamayız. Şekil dada bununla ilgili koddaki küçük bir değişiklik ile TempData nesnesine tekrar ulaşmamız mümkündür. 14

15 ŞEKİL ŞEKİL ŞEKİL 15

16 Önemli Not: TempData nesnesine gönderdiğimiz her veri adından da anlaşıldığı gibi geçici olduğundan, projemizde ilgili web sayfamız eğer ki tekrardan postback olursa veriye tekar ulaşamayız.bu örnekteki, Test için tekrardan şekil-6 daki sayfayı ( F5 ) yenilersek, TempData nesnesinin kaybolduğunu görürüz. 1.2 HTML ve AJAX Metodları HTML ve Ajax metodları Link ve Textbox gibi nesneler oluşturmak için kullanılırlar. Önreğin, MusteriAdi adında bir TextBox oluşturmak için şu kodu yazmak ") Bu kod, şu html kodunu üretecektir; <input type= text name= MusteriAdi id= MusteriAdi value= /> Bu nesneye denetleyiciden veri göndermek için şu kodu yazmak yeterlidir; ViewData[ MusteriAdi ] HTML formlarında mevcut olan tüm girdilerin ASP.NET MVC içinde karşılıkları bulunmaktadır. Ek olarak Ajax uyulaması gibi bazı eklentiler de MVC içinde mevcuttur. Bu özellikleri kullanmak için tek yapılması gereken MVC iskelet sistemi içinde web sayfası oluşturmaktır. Yazılımcı kendi metodlarını oluşturmak veya mevcut metodları geliştirmek isterse şu satırı yazması yeterlidir; public static string MyCustomControl (this HtmlHelper html, string name) This kelimesi, eklenecek olan custom metodun, HtmlHelper ına ekleneceğini ifade eder. HtmlHelper, viewpage lerde Html olarak temsil edilir. 1.3 Denetleyici (Controller) Denetleyici, kontrol akış mantığını içermektedir. Model ve Görünüm katmanı ile koordinasyonu ve verinin bu iki katman arasındaki akışını sağlayarak, uygulamanın yürütülme görevini üstlenir. Uygulama mantığı açısından, Model i manipule eder, kullanıcı etkileşimlerini yönetir ve tarayıcıda gösterilecek olan View nesnesini seçer ve görevlendirir. System.Web.Mvc.Icontroller arayüzünden (interface) türetilen bir sınıftır. Bu 3 farklı katman (MVC), uygulamanın inşaası esnasında çeviklik, hız, esneklik ve kolay bakım(debug) özellikleri sağlar. Örneğin, Görünüm katmanını ayırarak çekirdek iş mantık katmanında (bussiness logic layer, BLL) hiç bir değişiklik yapılmasına gerek kalmadan uygulamanın kullanıcı arayüzünde değişiklik yapılabilmesini mümkün kılar. Ayrıca bu ayrım, 16

17 uygulama geliştiren yazılımcılar için farklı rollerde çalışılabilmesine de imkân tanır. Örneğin bir yazılımcı, Görünüm katmanı kısmında çalışırken diğeri, Denetleyici katmanını geliştirebilir. ASP.NET MVC, klasik web form metoduna ek olarak aşağıdaki yetenekleri sağlamaktadır; HTML üzerinde tam kontrol ve hakimiyet sağlar Zengin AJAX ve Jquery entegrasyonu içerir Uygulamaya, Arama motoru uyumlu (SEO-friendly) URL yetenekleri kazandırır Test Odaklı Geliştirme (Test Driven Development, TDD) özelliği içerir. 1.4 URL Yolları (URL Routes) Denetleyicinin önemli bir parçası da URL lerin tanımlandığı Route lardır. Route lar Denetleyici listesine, hangi Denetleyicinin tetikleneceğini ve Denetleyiciler içindeki hangi Aksiyon un çalıştırılacağını söyler. Varsayılan Route a bir göz atılacak olursa; routes.maproute( Default, controller/action/id, new controller = AnaSayfa, action = Index, id = ); Bu route tanımında, URL aşağıdaki gibi oluşturulabilir; controller/action/id Aşağıda; Route ın URL leri nasıl ayırdığını gösteren tablo verilmiştir; Tablo 0-1 URL Route Metodlarının Aldığı Parametreler URL Controller Action ID / Home Index /Home Home Index /Home/About Home About /Account Account Index /Account/User/1 Account User 1 Tablo 2-1 de görüldüğü gibi bazı bölümlerde URL lerin tanımlanmadığı, hatta ilk satırda hiç bir parametrenin tanımlanmadığı görülmektedir. Bu durum, URL nin her bölümü için bir varsayılan değer tanımlaması yapıldığı içindir. Ve eğer değerlerden herhangi birisi eksik girilirse varsayılan Route değerleri işletilir. Varsayılan Route, önceki örnekte gösterildiği gibi, şu kodla tanımlanır; new controller = AnaSayfa, action = Index, id = Asp.NET MVC de, her Route için en az 2 bölüm değeri gereklidir. Bu değerler Controller ve Action dır. Çünki bu değerler Denetleyici listesinin doğru Denetleyici nesnesini ve Denetleyici içindeki doğru Aksiyon u bulabilmesi için kullanılırlar. 17

18 Diğer tüm bölümler isteğe bağlı olarak Aksiyon metodlar için adreslenebilir veya kullanılabilirler. 1.5 Denetleyici Fabrikası (Controller Factory) ASP.NET MVC iskelet sisteminde DefaultControllerFactory adındaki denetleyici fabrikası kullanılır, aşağıda bildirilen kriterler varsayılan olarak mevcut Denetleyicilerin aranılmasında kullanılırlar; Web Assembly nin Namespace ile Controller sona eklenirler. Teknodestek.Web.Controllers Namespace in içindeki nesnenin biçimi şu şekilde olmalıdır controller_adicontroller(that is, HomeController, AccountController) Nesneler Icontroller arayüzeyinden türetilmelidir DENETLEYİCİLERİN EKRAN ÇIKTISI VERİLMİŞTİR ŞEKİL Tüm bu kriterler yeni bir Denetleyici eklemenin zor olacakmış gibi algılanmasına neden olabilir ama aslında tek yapılması gereken Controller klasörüne yeni bir kod dosyası eklemektir ve kod dosyasının Denetleyici nesnesinin System.Web.Mvcnamespace den türetildiğine emin olmaktır. 1.6 Aksiyonlar (Actions) Aksiyonlar önceki konularda bahsedildiği gibi, görüntülenecek olan Görünüm dosyasının URL sine neyin bağlanacağını belirlemek için kullanılırlar. Anlaşılması oldukça kolaydır. Aşağıdaki kodda, genel yapıyı anlayabilmek için Aksiyon metodda kullanılabilen farklı Section lar bir araya getirilmiş halini görmektesiniz. Diğer kısımların (Section) görevi anlatılacaktır. 18

19 [AcceptVerbs(HttpVerbs.Post)] [OutputCache(Duration = 600)] public ActionResult MusteriGetir (string adi, string ) // MusteriGetir Aksiyonunu çalıştırmak için yazılan kod return View() 1.7 Metotlar (Methods) Bir Aksiyon metodunun diğer standart.net metodlarından hiç bir farkı yoktur. Aksiyon metodlar da parametre alırlar ve bir değer döndürürler. Tek farkı Denetleyici sınıfının içinde olmalarıdır. Yukarıda verilmiş olan örnek kod incelendiğinde, metod yapısı, diğer standart.net metodlarıyla aynı olduğu görülmektedir. 1.8 Sonuçlar (Results) Sonuç unun diğer adı, standart metoddaki Return koduyla dönen değerdir. Burdaki Sonuç un tek farkı ise ActionResult tipinde türetilmesi yani miras edilmesidir. Aaşğıdaki örnek kodda sonuç tipi ActionResult tır fakat aslında dönen nesne ViewResult diye adlandırılan ActionResult tan türetilmiştir. ResultView, Denetleyicideki View() diye adlandırılan bir korunmuş metoddan (Protected Method) türetilir. 1.9 Filtreler (Filters) Filtreler, Aksiyon metodlara nitelik kazandırmak amacıyla kullanılırlar. Birtanesi Aksiyon lar diğeri de Sonuç lar için kullanılan toplam iki adet Filtre çeşidi mevcuttur. Aksiyon Filtreler, Aksiyon metodlarla ilgilidir ve 2 tane olayları vardır. Bir tanesi Aksiyon, çalışmadan hemen önce, diğeri de Aksiyon çalıştıktan sonra tetiklenir. Sonuç Fitreler ise HTTP yanıtlara aittir ve aynı şekilde 2 olayları vardır. Biri yanıt tarayıcıya gönderilmeden önce, diğeri de tarayıcıya gönderildikten sonra çalışır. Bu tezde Filtrelerden daha fazla bahsedilmeyecektir fakat uygulama içinde Yetki(Authorization), Önbellekleme (Caching) ve RESTFUL Servis Sonuçlar için Filtreler kullanılmıştır. Yukarıda verilen örnek kodda; Çıkış önbellek (OutputCache) için filtre kullanılmıştır Seçiciler (Selectors) Seçiciler aksiyon metoda nitelik veya nitelikler belirlemek için kullanılırlar. Hem Filtrele hem de Seçiciler nitelik eklerler. Sıklıkla bu ikisi arasındaki farkı anlamak zor gibi görünse de aralarında çok önemli bir fark vardır. Seçiciler Denetleyici Fabrikasının, hangi Aksiyon metodunun çağrılacağını belirlerken çağrılırlar. Yani Aksiyon metodun çalışma aşamasıyla herhangi bir ilgileri yoktur. Yukarıda verilen örnek kodda AcceptVerbs niteliğini belirlemek için kullanılmıştır. 19

20 1.11 MVC mi, Klasik Web Form mu? Microsoft forumlarında bu günlerde, Asp.net web form ve Asp.net MVC hakkında bir tartışma konusu mevcuttur. Bir çok insan MVC nin klasik web formların yerini alacağını düşünüyor. Diğerleri de MVC nin klasik web formlarının yerini almayacağını idda ediyor. Bu gerçekten olacak mı bilinmez ama MVC nin geliştirilme amacı, web formları kaldırmak yerine alternatif bir uygulama geliştirme metodu inşaa etmektir. Bu durumda iki yaklaşımın da devam edeceğini söylemek yanlış olmaz. Farklı metodlar diğer platformlar için de geçerlidir. Özellikle Java platformu bu duruma örnek gösterilebilir. Bu araştırmada işlenen konulardan birtanesi de, yıllardır yalnızca web form metodunu destekleyen Microsoft, neden MVC kalıbını geliştirme gereği duyduğudur. Bu iki yaklaşım için Visual Studio.NET platformunun avantajları ve dezavantajları nelerdir? Visual Studio.NET web form un problemleri ; Microsoft, Windows form model tasarımının aynısını web ortamında da gerçekleştirilebilmesini mümkün kılan bir uygulama geliştirme platformu tasarlamaya çalıştı. Bu nedenle.net platformu bir çok Windows form geliştiricisinin ilgisini çekmeyi başardı. Özellikle Visual Basic 6.0 (VB 6.0) geliştiricileri bu kitlenin çoğunluğunu oluşturuyorlardı. Öyle ki, VB 6.0 da uygulama geliştiren bir çok programcı, hiç bir HTTP veya WEB bilgisine bile gerek duymadan mevcut uygulamalarını ASP.NET ortamına taşıyabildiler. Windows form geliştirme metodunu simule edebilmek için web form yapısına olay-yöneticisi(event-driven) yaklaşımı, ViewState ve Postback özellikleri eklendi. Bu metodlar yazılım geliştiricilere tanıtıldı..net in web form metodolijisi doğal web teknolojisinde bazı kırılımlar ortaya çıkardı. Özellikle ViewState ve Postback, web ortamında geliştirilen uygulamalar için bir çok problemi ve karmaşayı da beraberinde getirdi. Bir çok web sayfasının yüzlerce kilobyte lık ViewState verisi içermesi, web sayfalarının ve uygulamalarının performansını önemli ölçüde etkiliyordu. Uygulama geliştiriciler, sunucu tarafından üretilen HTML formları ve standart etiketler (tag) içermeyen sunucu kontrolleri üzerinde yeteri kadar kontrol sahibi olamıyorlardı. Web formlarla ilgili bir diğer önemli sorunlardan birisi de javascript entegrasyonuydu. HTML formlarındaki nesnelerin isimlerinin dönüştürülme işlemi esnasında değişmesi, JavaScript kodları tarafından kullanılmasında önemli sorunlar oluşturuyordu. Web form yaşam döngüsünde geliştirilmiş bir sayfa hem çok karmaşıktı, hem veri girişi hemde verinin sunulması görevi için bir sınıf kullanılıyordu. Birim testi (Unit testing) işlemi ise neredeyse imkansız bir işti. Oysa günümüzde, birim testi işlemi, modern bir uygulama teknolojisi için son derece önemlidir. Özellikle Agile Software Development metodolojileri açısından bakıldığında vazgeçilmezdir demek yanlış olmayacaktır. Web teknolojisi herhangi bir ülkeye ait olmadığı için, olaylar, PostBack ve ViewState iyi bir yöntem değildir. Bu nedenler yüzünden çoğu ASP.net Web form geliştiricileri, Web tarayıcı uyumsuzluğu gibi bir çok farklı problemle yüzleşmek durumunda kalıyorlar. Örneğin, objectdatasource nesnesi kullanıldığında Web formda bulunan hiç bir Grid nesnesi kültür (culture) özelliği kullanamaz. Varsayılan olarak tarih biçimini Eng standartında tarih biçimi olarak kabul eder ve bu değer değiştirilemez. 20

21 1.12 ASP.NET MVC Yöntemi ASP.NET MVC, ASP.NET platformunun içerdiği hiç bir güç ve esneklikten ödün vermeden Web Formlarının içerdiği mevcut karmaşayı ve problemleri yok etmeyi veya en aza indirmeyi amaçlamıştır. MVC tasarım kalıbında Web form olayları yerine, Denetleyici Aksiyon (Controller Action) getirilmiştir. MVC kalıbının başlıca avantajlarından birtanesi, her katmanın kendi alanlarına göre ayrılmış olmasıdır. Birim testi kolaylığı eklenmiştir ve URL, HTML üzerinde çok daha fazla kontrol olanağı eklenmiştir. MVC kalıp, Viewstate, Postback, Sunucu kontrolleri ve Sunucu taraflı formlar kullanmaz. MVC model, dosya adı uzantılı dosyalar (web formlarda kullanılan) yerine Temsili Konum Transferi (Representational State Transfer, REST) tabanlı URL ler kullanır. Bu yapı, arama motorları tarafından indekslenebilir bir yapı sağlar. Arama motoru uyumluluğu (Search engine optimization, SEO) yeteneği denen bu yöntem web uygulamaları için vazgeçilmez bir yetenektir. Mevcut MVC yapısı,.net Framework 3.5. tarafından desteklenmektedir MVC Tasarım Kalıbının Avantajları 1. İlgili katmanlar, kendi alanlarına göre tamamen ayrılır. 2. Yorumlanmış HTML üzerinde tam kontrol sağlar. 3. Test Odaklı Geliştirmeyi (Test Driven Development, TDD) mümkün kılar 4. SEO ve Temsili Konum Transferi (Representational State Transfer, REST) uyumlu URL sağlar 5. JavaScript iskelet sistemle tam entegrasyon sağlar. 6. NVelocity, Brail, Nhaml gibi üçüncü parti Görünüm motorlarını destekler 7. ViewState ve PostBack olay kullanmaz. 8. Stateless Nature of Web kurallarına uyar 9. Genişletilebilir ve açık kodlu bir sistemdir. 10. Web 2.0 uygulamaları için ideal platformdur Web Form Model Avantajları 1. RAD geliştirme sağlar. 2. LOB için kolay geliştirme olanakları sağlar. 3. Zengin kontrol nesneleri sunar. 4. Windows form geliştirme metodolojisi çok yakın bir metodddur En İyi Yaklaşım Hangisi Bu seçim her insana göre farklılık gösterebilir. Eğer HTML üzerinde daha fazla hakimiyet, Test odaklı geliştirme isteniyorsa, web standartlarına bağlıysanız, erişilebilirlik veya SEO tabanlı URL ler istiyorsanız ozaman MVC kalıp daha doğru bir seçim olacaktır. Eğer çok daha zengin kontrol galerisi ve durum tabanlı olay-yönetimi web geliştirme aracı isteniyorsa ozaman Web Form model seçilebilir. 21

22 1.13 WEB SİTESİNİN TASARIMI VE MİMARİ YAPISI Projeye Genel Bakış Bu kitap, okuyuculara web uygulaması alanında günümüz teknolojilisinde ihtiyaç duyacakları bir çok metod ve yöntem kullanarak Asp.NET MVC kullanılarak geliştirilmiş Bilgi Paylaşım Platformunun yazılım inşaasını anlatmaktadır. İçerdiği modüller ve genel özellikler aşağıda sıralanmıştır; Kullanıcı Hesap yönetimi Makaleler Anketler Haberler Forum Elektronik Ticaret ( E-Ticaret ) Uygulama içerisinde bulunan tüm verilerin yönetimini sağlamak amacıyla Admin paneli Yukarıda bildirilen modüller geliştirilirken aşağıdaki teknolojiler kullanılmıştır; Model konsepti ve yapısı Görünüm (View) View MasterPage, ViewPage ve View kontroller View Data, Temp Data nın Controller dan View elementine transportasyonu. HTML ve Ajax metodları JQuery ve MVC entegrasyonu Denetleyici (Controller) Denetleyici Aksiyonlar (Controller Action) Uygulamayı güçlendirmek için Aksiyon Filtreler, Aksiyon Sonuçlar, ve Aksiyon Seçicilerin kullanımı. LINQ, Entity Framework Dahili metodlar (Extension Methods) Anonim metodlar (Anonymous) Üyelik Yönetimi nesnesi (Membership Management) ve Profil (Profile) nesnesi kullanılmıştır. Uygulama geliştirmeye başlamak için yüklenmesi gereken programlar; Visual Web Developer Sql Server Microsoftm.NET Framework Sql Server 2010 Management Studio Express(SSMSE) 22

23 Microsoft ASP.NET MVC Mimari Tasarım Bu tezde geliştirilmiş olan uygulama içerisinde, anket, makaleler, haberler ve forum gibi bir çok uygulama bulunmaktadır. Bir web uygulamasında bukadar çok uygulama bulunması tasarım açısından önemli sorunları da beraberinde getirir. Mimari tasarım güçlü olmadığı taktirde uygulamanın test süreci, bakımı ve hata ayıklama süreci zorlu geçecektir. Klasik Web Form yapısında tüm uygulamayı, iş mantığı katmanı, kullanıcı arayüz ve veriye erişim katmanınlarına tamamiyle ayırmak mümkün olmuyordu. Çünkü.NET sürükle bırak yöntemiyle kullanılabilen bir çok sunucu taraflı kontrolü barındırıyordu. Bu kontrollerden örnek olarak GridView nesnesine ekstra metod yazabilmek için iş mantığı katmanına yazılması gereken kodlar, kullanıcı arayüz kısmına yazılmak zorundadır. Örneğin GridView için sıralama yapmak veya filtre uygulatmak için bir buton un tıklanma olayına kod yazmak gerekir. MVC sisteminin geliştirilmesiyle birlikte tüm bu yapı değiştirildi. Kullanıcı arayüz ve iş mantığı katmanı tamamen ayrılarak, kullanıcı arayüzü içinde bulunan kod arkası (code-behind) tamamen kaldırıldı. Böylece artık n-tier(multi-tier) web uygulamaları geliştirilebilmek mümkün olmaktadır. KarayelTasarım web uygulamasında; Veriye Erişim Katmanı (Data acces layer), iş mantığı katmanı ve kullanıcı arayüz katmanı kodları biribirlerinden ayrılmış durumdadır. Bu yapı, uygulamanın teknik bakımının, iyileştirme ve hata ayıklama işlemlerinin çok daha rahat yapılabilmesine olanak sağlamaktadır. Bu yapıdaki uygulamalara multi-tier tasarım denmektedir. Veriye erişim mimarisi uygulamadan tamamen ayrılmıştır. Bu özellik farklı veritabanlarının kullanılabilmesine olanak sağlar. Uygulamada SQL Server 2008 kullanılmışken, iş mantığı katmanında değişikliğe gidilmeden Oracle veritabanına geçilebilir. Bu yapıya, kademelerin ayrımı (decoupling the tiers) adı verilmektedir. İş Mantığı Katmanı (Business Logic Layer, BLL) dataları veriye erişim katmanından nesneye yönelimli formatta getirilmektedir. Bu yapı, ilişkisel veri haritalama süreci process of mapping relational data, ORM adıyla anılmaktadır. ORM diye de isimlendirilir. İş Mantığı Katmanı, ön bellekleme metoduyla desteklenmiştir. Bu işlem, sürekli kullanılan verileri ve gereksiz veritabanı bağlantısı yaratan işlemlerde kullanılan verileri önbellekte saklamaya yarar. Bu sayede, işlemci kullanımı, veritabanı kaynakları ve ağ trafiği azalır böylece çok dağa başarılı genel bir performans sağlar. 23

24 Uygulama Katmanlarının Tasarımı ve N-Tier yapı Özellikle son yıllarda geliştirilen projelerde duyulan çok katmanlı (multi-tier, n-tier ) yazılım tasarım sözcüğünü bir kaç kelimeyle açıklayacak olursak, uygulamanın katmanlara göre tasarlanmasını ifade etmektedir. Uygulama tasarımları genellikle 4 veya 5 katmana ayrılırlar; Veri saklama: Verilerin ait olduğu yeri ifade eder. Bu ilişkisel bir veritabanı olabilir, XML olabilir, bir txt dosyası veya verilerin sakalanabileceği farklı bir veritabanı yapısı olabilir. Veriye Erişim Katmanı (DAL): Verilerin, veri saklama katmanından getirilmesi, manipule edilme işlemlerinin yürütüldüğü katmandır. Ayrıca veri saklama katmanındaki veriyi, veri saklama şeması gibi çok küçük detaylarla uygulamanın kullanımına sunar, gerekirse validasyon bilgilerini hazırlar ve BLL katmanının kullanımına hazırlar. İş Mantık Katmanı (BLL): Bu katmandaki kodlar, iş kurallarının ve bilgi alanı nesnelerinin oluşturulmasından sorumludur. Uygulama Mantığı Katmanı (ALL, Application Logic Layer): Kullanıcı arayüz katmanıyla İş Mantık Katmanı arasındaki etkileşimi sağlayan kodları içerir. Bu tür kodlara örnek olarak klasik web form larda bulunan code-behind ı örnek gösterebiliriz. Code-behind, butonlara tıklama, post back gibi işlemleri idare eder. Kullanıcı Arayüz Katmanı (UI) : Kullanıcıya sunulması gereken ekran görürnümünün ve kodların tanımlandığı katmandır. Kullanıcı arayüz ve Kullanıcı deneyimleri, menüler ve diğer site navigasyonlarını da içerir. Asp.NET MVC framework de, bir n-tier uygulama şu şekilde katmanlara ayırılabilir; İş mantığı katmanı ve veri erişim katmanı Model içerisine, uygulama mantığı katmanı Controller içerisine, kullanıcı arayüz katmanı da View içerisine yerleştirilerek tasarlanabilir. Çok katmanlı yapı ŞEKİL Bu tez çalışmasında yukarıda belirtilen tasarım temel alınarak TeknoDestek adında web uygulaması geliştirilmiştir. Temel alınan tasarım şekli, web platformu uygulamasının gereksinimleri göz önünde bulundurularak tercih edilmiştir. Farklı projeler için daha farklı uygulama katmanları tasarlanabilir. Örnğein çok daha giriş seviyesinde ve basit bir uygulama için uygulama mantığı katmanı ve iş mantığı katmanı birleştirilebilir. 24

25 Araştırmanın ilerleyen bölümlerinde Web Form ve MVC çok katmanlı uygulama arasındaki katman ve tasarım farklılıklarıyla ilgili örnekler ve çalışmar anlatılacaktır. Konu daha ayrıntılı ele alınarak iki iskelet yapı arasındaki farklar açıkca anlaşılabilir olarak örneklerle ifade edilecektir. Asp.NET MVC iskelet sisteminin önemli farklarından birisi de uygulama içerisinde yapılan küçük değişikliklerden sonra tüm uygulamanın tekrar derlenmesine gerek kalmadan yalnızca değişiklik yapılan modül derlenerek çalışabilmesidir. Bu işlem tüm uygulamanın gereksiz yere sürekli olarak derlenmesinin önüne geçerek zaman açısından önemli avantaj kazandırır Veri Saklama Yerinin Seçimi (Veritabanı Seçimi) KarayelTasarım web uygulamasında veriye erişim katmanını geliştirilirken esnekliğe büyük önem verilmiştir. Farklı veritabanı seçimine olanak sağlanması hedeflenmiştir. Bu sayede farklı veritabanları seçilebilir veya uygulamada, veriye erişim katmanı hariç, hiç bir katmanda değişikliğe gerek olmadan farkı tipte veritabanı na geçilebilir. Elbette birden fazla veritabanı desteği sağlamak yine de ciddi bir çalışma gerektiren alt yapı gerektirir. Hangi veritabanı en iyisidir? Aslında en iyisi sorusuna cevap aramak yerine, gelitşrilecek olan projeye en uygun veritabanı hangisidir sorusu üzerinde durmak daha önemlidir. Eğer içerisindeki veriler sabit olan ve çok nadiren değişen bir uygulama geliştirilecekse XML seçilebilir. Acce Database i daha çok masaüstü uygulamalarında, çok fazla kullanıcısı olmayan uygulamalar ve daha az yer kaplayan veritabanı gereksinimlerinde tercih edilebilir. Eğer ihtiyacı biraz daha yukarı taşımak gerekirse ozaman, moden bağlantısal veritabanı yönetim sistemleri (Relational Database Managemet Systems, RDBMS) tercih edilebilir. SQL Server, Oracle, DB2, MySQL, PostgreSQL v.b. uygulamalar iyi tercihler arasında sayılabilirler. Bu tezde yalnızca birtanesi üzerinde çalışılacaktır. Veritabanı olarak SQL Server 2008 tercih edilmiştir. Gerçek hayatta, müşteriler/kullanıcılar, uygulamayı geliştiren yazılımcıların tercihi yerine kendi tercih ettikleri farklı bir veritabanı kullanılmasını isteyebilirler. Bu durum tamamlanmış bir uygulama için veritabanını değiştirmek anlamına gelir. Aslında çok karşılaşılan bir durum olduğunu söylemek yanlış olmaz. Ellerinde mevcut kullandıkları lisanslı bir veritabanı olabilir doğal olarak yeni bir veritabanı satın almak istemeyebilirler. Bir çok.net platformunda uygulama geliştiren yazılımcı, bir çok nedenden dolayı RDBMS olarak SQL Server ı tercih ediyor. Sebepler arasında, Visual Studio.NET ile SQL Server arasındaki entegrasyon kolaylığı başlıca nedenler arasında yer alıyor. Windows server ile SQL Server uyumu ve tüm uygulamaların lisanslarını tek firmadan tedarik etmenin getirdiği maliyet avantajları da bu nedenler arasında sayılabilir. Ayrıca SQL Server ın LinqToSQL i ve Entity Framework u desteklemesi da bu avantajlar arasındaki önemli bir görevi üstleniyor. Bu tezde geliştirilen uygulamada Microsoft SQL Server 2008 (Express Edition veya Enterprise, Standart) RDMBS olarak tercih edilmiştir. SQL Server 2008 versiyonlarının tümü Visual Studio 2010 ile tam entegrasyon sağlamaktadır. Bağlantısal veritabanı diyagramları,tetikleyici (trigger), saklı yordam (stored procedure), tam metin arama (full text search) gibi bir çok özelliği de beraberinde taşımaktadır. 25

26 Veriye Erişim Katmanının Tasarlanması Veriye erişim katmanı, veritabanı sorgularını yürüterek verileri getirerek bir alt katmana ileten ayrıca veritabanında silme,ekleme, güncelleme ve kaydetme işlemlerinin yapıldığı kodları içeren katmandır. Veritabanına en yakın katmandır. Veritabanıyla ilgili, tablo şemaları, alan isimleri, saklı yordamlar ve görünümler (view) tamamiyle bu katman tarafından bilinirler ve kullanılabilirler. Veritabanını doğrudan ilgilendiren kodlar, aşağıdaki nedenlerden dolayı site sayfalarındaki kodlardan tamamen ayrılmalıdırlar ve doğrudan bu katmana yazılmalıdırlar. Nedenleri kısaca özetlenirse; Kullanıcı arayüz kodlarını geliştiren yazılımcı ile veriye erişim katmanının kodlarını geliştiren yazılımcılar farklı olabilirler. Aslında orta ölçekli ve büyük projelerde her katmanı tamamen farklı yazılımcılar kodlarlar. Arayüz tasarlayan yazılımcıların asli görevi ve uzmanlık alanı arayüzle ilgili olduğu için, veritabanını ilgilendiren bir çok işi göz ardı edebilirler. Ayrıca tabloların tüm ayrıntıları nesne haline çevrilmiş olduğu ve veritabanı katmanını ilgilendirdiği için bu durum oldukça da muhtemeldir. Bazen veri erişim katmanı tarafından oluşturulan bir sorgu farklı sayfalar tarafından kullanılıyor olabilir. Eğer kullanıcı arayüz sayfasına doğrudan bir kod yazılırsa ve sonradan sorguda bir değişiklik olursa, örneğin bir tablo alan ismi değişirse veya sıralama kuralları değişirse, yazılımcının her sayfayı tek tek gözden geçirip yazdığı her kodu test etmesi ve değiştirmesi gerekir. Bunun yerine tüm işlemler veriye erişim katmanında tamamlanır ve sayfadan çağrılırlarsa, yalnızca veriye erişim katmanında değişiklik yapmak yeterli olacaktır. Arayüz sayfalarına dokunmaya gerek kalmaz. Kullanıcı arayüz katmanına doğrudan kod yazmak yeni versiyon RDBMS ler ce desteklenmeyeceği için çok güçtür ve birden fazla RDBMS kullanılması gereken durumlarda neredeyse tamamen angaryadırlar. MVC sisteminde veritabanını ilgilendiren veriye erişim katmanı kodlarının tümü model katmanı içerisinde kullanılmaktadırlar. 26

27 Uygulama Mimarisi LINQ nun veriye erişim katmanına etkisi;.net 3.5. Framerowk versiyonuyla birlikte tanıtılan dil bütünlük sorgusu (Language Integrity Query, LINQ) özelliğiyle.net yazılımcıları tanışmış oldular. LINQ teknolojisi, diziler, sözlükler (Dictionary), XML ve veritabanı gibi neredeyse tüm kolleksiyon tipindeki sorguların tek bir yapı aracılığyla uygulanabilirliğine olanak sağlamak amacıyla geliştirildi. LINQ ayrıca, yazılımcılara.net kodları içerisinde doğrudan SQL tipinde kod yazma olanağı da sağlar. SQL Select * from makaleler as c LINQ var makaleler = from c in datacontext.makalelers Select c; Yukarıdaki örneklerde hem SQL de hem de LINQ da nasıl select işlemi yapılacağı gösterilmiştir. İki sorguda aynı anlamdadır ve makaleler tablosunu listelemektedir. Ancak LINQ kullanımında dönen sorgu özel bir collection olan Iqueryable<Makaleler> tipinde çağrılırmış olur ve içerisinde standart foreach ile dönülebilir. İlk bakışta var tipi tipi henüz belirlenmemiş bir değişken gibi görünse de c# derleyicisi derleme anında değişken tipini kendiliğinden beliryecektir ve doğru tipe dönüştürecektir. Bu sayede SQL provider tarzı bir kullanıma gerek olmaması LINQ nun pratiklik özelliklerinden birisidir. LINQ nun en önemli avantajlarından birisi ise güvenli ve zengin query olanaklarıdır. LINQ kullanımında sorguda meydana gelen problem compiler tarafından hata kodu fırlatılarak bildirilir ve hatalı olan kod parçasının yerini gösterir. Stored procedure de olduğu 27

28 gibi tüm sorgu hatalarında tüm kodu baştan aşağı taramak gerek kalmaz. Bu yazılımcı açısından büyük kolaylık anlamına gelmektedir. LINQ ayrıca daha fazla üstünlük sağlamak için veritabanı sorgularında tablo bilgisini ayrıntılarıyla birlikte getirir. Linq to Sql de kullanılacak olan komutların sıralaması aşağıdaki gibidir. (1)From (2)On (3)Join (4)Where (5)Group By (6)With (7)Having (8)Select (9)Top (10)Order By Aşağıda kısa bir örnek verilmiştir. Var makale = (from s in datacontext.makalelers Where s.makaleid== 2 Select s).firstordefault(); Foreach ( var makalegrupbilgisi in makale.makalegruplari) makalegrupbilgisi.kayittarihi = DateTime.Now; datacontext.submitchanges(); Yukarıdaki kod örneğinde ilk önce ID numarası 2 olan makale kaydı seçildi. Sondaki FirsOrDefault() oldulça önemlidir çünkü, dönen değerin yalnızca tek kayıt veya null değer olacağını belirtir. LINQ, veritabanındaki relation değerlerini göz önünde bulundurarak makalegruplari bilgisini de bu kayıtla birlikte getirir. Bu örnekte MakaleGruplari tablosundaki kayittarihi değeri değiştirilmiştir. DataContext.SubmitChanges(); kodu da değişikliklerin kaydedileceğini belirtir. Çünki LINQ, transaction işlemini otomatik olarak yürüttüğü için, submitchanges() yapılmadığı taktirde değişiklikler veritabanına yazılmayacaktır Entity Framework Model katmanında LINQ yu kullanabilmek için Visual Studio 2010 tarafından sağlanan, Entity Framework designer kullanılabilir. Bu designer SQL Server a doğrudan bağlanarak tüm tabloları, relation ları, stored procedure ve view leri sürükle bırak yöntemiyle projeye taşınabilmesini mümkün kılar. Bu designer, tüm veri erişim katmanınızı yalnızca bir kaç 28

29 dakikada oluşturabilmeyi sağlar. Üstelik tek satır bile kod yazılmasına ihtiyaç duymaz. Eğer SQL Server yerine Oracle, DB2, MySQL veya farklı bir datastore ları Entity Framework desteklemektedir. Ayrıca Entity Framework veritabanındaki şemalarda meydana gelen değişiklikleri otomatik olarak update edememektedir. Bu tür durumda designer ı açıp, tüm nesneleri kaldırıp tekrar eklemek gerekmektedir. Not: LINQ-to-SQL Microsoft firmasının yazılım ekibi tarafından geliştirilmiş bir namespace dir. Ayrıca Microsft ADO.NET ekibi tarafından geliştirilmiş olan versiyonuna da Entity Framework denmektedir Veriye Erişim Katmanının Güvenliği Önceden, uygulama içerisinde kullanıcı arayüz katmanında doğrudan SQL kodu kullanılan durumlarda SQL injection saldırısı sıkça rastlanan bir durumdu. Örneğin web isteklerinde quesrystring kullanımı veya postback içindeki tekst kutuları problem teşkil edebiliyordu. Standart bir web request işlemi şu şekilde görünür; Daha sonra query string den bu ID numarası alınır ve doğrudan veritabanına şu şekilde gönderilir; C# String sqltext = Select * from Makaleler ; += Where ID= + QueryString[ ID ]+ ; += and KayitDurum=1 ; //Sql text i çalıştır Kod çalıştırıldığında veritabanına aşağıdaki gibi bir kod gönderilir ; SQL Select * from makaleler where ID=22 and kayitdurum=1 SQL e doğrudan gönderilen text üzerinde biraz duralım. Eğer query string den dönen değer 22 olarak gönderilirse geriye 22 ID numaralı makale kaydı dönecektir. Böyle bir durumda herhangi bir sorun görünmüyor. Aslında bu tür kod yapısı temel uygulamalar içerisinde en çok kullanılanı olarak ta bilinmektedir. Ancak çok ciddi bir probleme davet göndermek gibidir. URL i şu şekilde düzenleyip kodu tekrar bi gözden geçirelim. URL C# 29

30 String sqltext = Select * from Makaleler ; += Where ID= + QueryString[ ID ]+ ; += and KayitDurum=1 ; //Sql text i çalıştır SQL Select * from makaleler where ID=32; drop table Makaleler;-- and kayitdurum=1 Yukarıdaki sorgu sicimiyle (query string) gönderilen değerlerle birlikte SQL cümleciği çalıştırıldığında enteresan bir problemde beraberinde geliyor. Kod çalıştığında, gönderilen ID değerine göre ilgili makale kaydı geliyor ve hemen ardındaki kod satırında makaleler tablosu artık hiç bir veri içermeksizin veritabanından siliniyor. and kayitdurum=1 kısmı da -- ile açıklama haline getirildiği için hiç bir işe yaramıyor. Artı tek çare SQL server yedeklerinden eski kayıtlara geri dönmek. LINQ dönen sorguyu otomatik olarak kontrol eder ve bu tür saldırılara karşı kodları inceleyerek tehlikeli kodları elimine eder. Diğer en büyük sorunda connectionstring bilgisine erişimin engellenememesidir. Bir çok sunucu sorgu sicimi (query string) değerinin, web config dosyasında güvenliğini sağlasa da en garanti yöntem trusted connections işlemidir. Bu işlemin en büyük avantajı bağlantı cümlesi içerisindeki şifre değerinin tekst biçiminde yazılmamasıdır. Web config dosyasına hacker lar tarafından erişilse de, veritabanı ele geçirilemeyecektir Uygulama Mantığı Katmanının Geliştirilmesi Uygulamanın veriye erişim katmanının Entity Framework aracalığıyla oluşturulan sınıflardan meydana geldiği anlatılmıştı. Bu sınıflar aracılığıyla veriler veritabanından özel veri kolleksiyonları olarak getiriliyor veya tablo bilgileriyle birlikte getiriliyordu. Ancak dönen veri hala ham durumdadır. Veriler çok düzenli kolleksiyonlara dönüştürülmüş olsa da henüz uygulamaya özel hiç bir veritabanı işlemi kodu yazılmamıştır. Uygulama mantığı katmanı bu verileri işleyerek kullanıcı arayüz katmanına iletilmesi için yorumlar ve bu katmanla aradaki etkileşim görevini üstlenir. Ayrıca onaylama (validation) tanımlamaları bu katmanda yapılır. Kısmi sınıf (Partial class) metodları aracılığıyla veri ekleme, güncelleme, kayıt ve silme işlemleri için ekstra metodlar inşaa eder ve veriye erişim katmanı tarafından oluşturulan sınıfların son halini alması sağlanır. Burdaki işlemler tamamlandığında veritabanı artık tamamen nesneye yönelimli olarak hazırlanmış olur DENETLEYİCİ (CONTROLLER) Yeni bir MVC projesi geliştirmeye başlarken klasörlere göz atıldığında, controllers isminde bir klasör görünmektedir. Bu klasör içerisinde denetleyici tipindeki sınıflar oluşturulur. Bu sınıflar, Model den gelen veri kolleksiyonlarını işlemek ve ilgili Görünüme (View) 30

31 yönlendirerek kullanıcı arayüzüyle Model arasındaki koordinasyonu sağlamakla yükümlüdür. Denetleyici sınıfları sayesinde, klasik web formlarda kullanılan kod arkası (code-behind) tamamen kaldırılmıştır. Önceden kod arkası tarafından yürütülen tüm uygulama mantığı katmanı işlemleri artık denetleyici içerisinde yönetilmektedir. Denetleyicilerin avantajları kısaca özetlenecek olursa; Uygulama birim testleri çok daha kolay yapılabilmektedir. Bunun başlıca nedenleri, iş mantığı katmanının tamamen arayüzden ayrılmış olarak denetleyici içerisinde veya model içerisinde bulunmasıdır. Sunucu kontrollerinin tamamen kaldırılmasıda büyük katkı sağlar. Güvenlik kontrollerini uygulamak çok daha kolaydır çünkü tüm işlemler denetleyici ve model içerisinde yürütülmektedir. Kullanıcı arayüzü uygulama mantığı kodlarından arındırılmıştır. Birden fazla görünüm (view) için tek bir kontrol denetleyici sınıfı kullanılabilir. JSON kullanılabilir GÜVENLİK MVC kalıbında güvenlik ve yetki tanımlamaları için ilgili Aksiyonun başına rol tanımlaması yapmak yeterlidir. Böylece ilgili aksiyonu gerçekleştirmeye yetkili olan kullanıcı rolü belirtilmiş olur. [Authorize(Roles = Admin )] public ActionResult EditContent(int id,...) return View(); Yukarıdaki örnek kodda, ilgili aksiyonu tetiklemeye yetkili olarak yalnızca Admin tanımlanmıştır. Doğrudan bir aspx sayfasına navigasyon özelliği de kaldırıldı. Çünkü yönlendirme motoru tüm url isteklerini devralır ve uygun denetleyiciye kendisi yönlendirir. Bir kullanıcı denetleyici katmanından ulaşmadan doğrudan bir görünüme (view) ulaşamaz. Bu çok önemli bir özelliktir. Çünkü önceden özel bilgiler içeren web sayfalarına URL hacking teknikleri aracılığıyla dışarıdan erişilebilmesi mümkün olabiliyordu. Bu durum yazılım geliştiriciler ve web sitesi sahipleri açısından büyük risk teşkil ediyordu. Güvenlik için extra önlemler almak ve özel teknikler kullanmak gerekiyordu. Sayfanın bulunduğu klasöre web.config tanımlaması yaparak rol isimlerine göre erişim yetkileri tanımlamak veya sayfa içerisine yetki kontrolleri yazmak gerekiyordu. Örneğin IcerikGoster.aspx sayfasını gezen bir ziyaretci IcerikDuzenle.aspx adında bir sayfa olabileceğini tahmin edip sayfaya ulaşmaya çalışabilir, yeterli teknik bilgiye sahipse bu durumda içerik bilgilerine ulaşıp düzenlemesi de muhtemeldir. URL yönlendirme ile bu durum da çözülmüş oldu DAYA İYİ PERFORMANS İÇİN VERİYİ ÖNBELLEKLEME (CACHİNG DATA) 31

32 Bir çok web sitesinde bazı veriler çok sıklıkla değişmemesine karşın kullanıcılar tarafından çok sıklıkla görüntülenirler. Örneğin, makale kategorileri, ürün kategorileri, ürün kategorileri, ülke isimleri gibi. Bu tür kullanımlarda, sitenin performansını artırmak için en başarılı çözüm yolu veriyi önbellekleme yönetimi kullanarak sunmaktır. Kullanıcıdan bir istek geldiğinde veri bir kez veritabanından bağlantı oluşturularak istenir, dönen veri ön belleğe yazılır. Eğer aynı istek herhangi bir kullanıcıdan tekrar gerçekleştirilirse bu defa, veritabanına yeni bir bağlantı oluşturulmaksızın, bilgi doğrudan önbellekten okunur ve kullanıcıya iletilir. Bu işlem işlemci kullanımını azaltır, ağ trafiğini düşürür ve kullanıcıya verinin daha hızlı iletilmesini sağlar. MVC, önbellek yönetiminin denetleyici seviyesinde yapılabilmesine imkan tanır; [OutputCache(Duration = 60)] public ActionResult HerhangiControllerMethod() // kod yazılacak... Yukarıdaki örnekte 60 saniyelik periyodla verinin ön bellekte saklanacağı bildirilmiştir. Ön bellek yönetimi ile ilgili paremetreye bağlı veri saklamak gerekirse kullanımı şu şekildedir; [OutputCache(Duration = 60, VaryByParam = id )] public ActionResult HerhangiControllerMethod(int id) // kod yazılacak SIRADIŞI DURUM, HATA YÖNETİMİ Bazen uygulama esnasında herşey doğru gitmez. Kod geliştirme aşamasında hatalı geliştirilen kodlar veya beklenmeyen bağlantı problemleri kullanıcıya hata mesajı fırlatılmasına neden olabilir. Bu hataların kullanıcıya tarayıcının kötü görünümlü hata mesaj sayfasında doğrudan gösterilmesi yerine, meydana gelen hata yakalanabilir, hangi formatta ve hangi ekranda kullanıcıya iletileceğinin seçilebilmesi sağlanabilir veya doğrudan mail yoluyla sisteme hata bildirimi bile yapılabilir. Aşağıda basit şekilde yazılmış hata yönetim kodu gösterilmiştir; [HandleError] public ActionResult SomeControllerMethod() // kod yazılacak... Aşağıdaki kod bloğunda, yalnızca güvenlik tipindeki hata mesajlarını yakalamak için yeni bir hata yönetimi tanımlanmıştır. Ayrıca kod, kullanıcıyı, bir görünüme yönlendiriyor. Görünüm, 32

33 muhtemelen kullanıcının yetkisi olmadığı için ilgili web isteğini gerçekleştiremeyeceğini bildiren yazilar içeriyor olacak. [HandleError(ExceptionType = typeof(securityexception), View = UnauthorizedView ] public ActionResult SomeControllerMethod() // kod yazılacak Kullanıcı Arayüz Katmanı Bu katman, kullanıcının doğrudan gördüğü ve uygulamayla etkileşim sağladığı katmandır. Diğer taraftan en önemli katmandır çünkü uygulamanın ünü ve başarısı kullanıcılar tarafından bu katmanın verimliliği ve pratikliğiyle doğru orantılı olarak belirlenir. Web kullanıcıları genelde siteye girdikten yalnızca birkaç dakika sonra site hakkındaki kararlarını verirler. Bu ilk izlenimle ya siteyi kullanmaya devam ederler, beğenirler ya da ayrılırlar ve birdaha kullanmazlar. Web sitesinin renklerindeki uyum, tasarımın netliği ve açık oluşu, site içeriğine yeteri kadar kolay oluşu ve menülerin yeteri kadar anlaşılır olması gibi fonksiyonlar ilk izlenimi oluşturan başlıca parametrelerdendir. Bu durum kısaca şöyle açıklanabilir, birisiyle tanıştığımızda yalnızca bir kaç dakika içerisinde kişi hakkında net yorumlar yapabilir durumda oluyoruz. Saç rengi, kıyafetlerinin uyumu ve temizliği, konuşması, göz rengi ve fiziki yapısı hızlıca beynimizde değerlendirilip ilk izlenimi oluşturur UYGULAMA KATMANI İÇİN MÜHENDİSLİKTE EN BAŞARILI YÖNTEMLER Pop-up pencerelerden kaçınılmalıdır. Pop-up pencereler web sitesinin görünümünü engellerler ve kullanıcıyı sıkarlar. Büyük olasılıkla pop-up pencere, tarayıcıdaki engelleyiciler tarafından engelleneceği için kullanıcıya ayrıca rahatsızlık verirler ve zaten açılamayacakları için hedeflerine ulaşamazlar. Web sitesi yayınlanmadan önce mümkün olduğunca tüm farklı tarayıcılar tarafından test edilmelidir. Web tasarımında genel yerleşim için tablo kullanımından kesinlikle kaçınılmalıdır. Bu yöntem eskiden en çok kullanılan yöntemdi ancak son dönemde tüm tarayıcılar tabloları farklı şekillerde görüntülüyorlar. Tablo kullanmak yerine genel yerleşim için div kullanılmalıdır. Tüm sayfanın post edilmesi gereken durumlarda Java Script kullanılmalıdır. Yalnızca kullanıcının farklı bir sayfaya gittiği durumlarda tam post back yapılmalıdır. Seçilen açılır kutular, validasyonlar kaybolmamalı ve kullanıcı bu bilgileri tekrar tekrar girmek zorunda kalmamalıdırlar. 33

34 Site tasarımında kullanılacak renkler çok dikkatli seçilmeli ve önceden tasarlanmalıdır. Örneğin kırmızı renk tehlikeyi ifade ederi. Mavi ve tonları ise güvenlik ve rahatlık duygusunu tetikler. Tüm renklerin insan algıları üzerinde farklı etkileri olduğu bilinmektedir. Ancak renk körlüğü, yeşil, kırmızı arasındaki farkın algılanmasını engellemektedir. Renk körlüğü olan insanlar ancak aradaki renklerin zıtlığını farkederler. Bu tür kullanıcılar için örneğin beyaz arka plan rengi üzerine siyah yazılar uygun bir seçim olabilir. İçeriği mantıksal ve önem derecesine dikkat ederek yerleştirmek önemlidir. Örneğin çok önemli olan içerik sayfanın tam ortasına yerleştirilmeli ve navigasyon gibi daha az önemli bilgiler dış çerçeveye yakın bölgelere yerleştirilmelidir. Farklı anlamlara sahip içerikler muhakkak gözle görülür biçimde ayrılmalıdırlar. Bu işlem için div kenarlık renkleri kullanılabilir. En önemli bilgiler muhakkak ana sayfaya eklenmelidirler. Çünkü bir çok kullanıcı ilk 30 saniye içerisinde sitede faydalı bilgi bulamadığı taktirde ayrılır. Bölüm başlıkları muhakkak kullanılmalı, kalın fontlarla ve belirgin renklerle yazılmalıdır. Bu başlıklar sayesinde kullanıcılar, ilgili bölüm içerisinde ne olduğunu ilk bakışta anlayacak ve tümünü okumak için zaman kaybetmek yerine tüm uygulamayı kavramasına katkı sağlayacaktır. Kullanıcıya ön bilgi vermeden uzun süren işlemlerden kaçınılmalıdır. Uzun sürecek olan işlemlerde, ilerleme hakkında bilgi gösteren progressbar veya işlem adım sayısını kullanıcılara bildirmek gerekir. Çok yavaş ve tepki göstermeyen sayfalar da kullanıcıyı yorar ve uzaklaştırır Görünümler (Views) Görünüm ekranı model katmanının kullanıcıya sunulduğu kısımdır. Aslında HTML kodlarının tarayıcı için dönüştürülmüş halidir. Klasik web formla neredeyse aynı durumdadır ancak klasik web formlarda olduğu gibi kod arkası dosyası yoktur. Bunun yerine tüm kod, deentleyici sınıfı içerisindedir. Peki şu soruları sormak muhtemel midir? Şu ana kadar bir sürü farklı firma tarafından da geliştirilmiş olan gridview, detailsview gibi onlarca sunucu kontrolüne ne olacak? Bu sorunun aslında bir iyi bir de kötü cevabı var. Kötü kısmı artık kullanılamaz olacaklar. İyi kısmı ise gerek te kalmayacak. Burda en önemli nokta, HTML içeriğinin çok daha temiz ve daha verimli oluşturuluyor olmasıdır. <label for= etiket >Başlık</label><br /> <%= Html.TextBox( Baslik ) %> Bu kod, bir HTML TextBox nesnesinin oluşturuluşunu göstermektedir. Textbox nesnesinin ismi ViewData sözlüğünü işaret etmektedir. Bu isim, denetleyici katmanında karşılık bulur ve veriyi görünüm içerisinde gösterir. Ayrıca bir model nesnesi, görünüm sayfasının typed model özelliği kullanılarak doğrudan sayfaya aktarılabilir. Aşağıda kullanım şekli gösterilmiştir. 34

35 <label for= title >Başlık</label><br /> <%= Html.TextBox( Baslik, ViewData.Model.Baslik) %> Yukarıda gösterilen iki kodun da sonucu aynıdır. Aradaki tek fark birinde veri, denetleyici nesnesine bağlanarak gösterilir diğerinde ise doğrudan model den sayfa içerisine bir nesne çağırılarak gösterilir. HTML kaynak kodlarına bakılırsa, üretilen HTML kodunun iki kullanım şekli için de aynı olduğu görülebilir. <label for= baslik >Başlık</label><br /> <input id= Baslik name= Baslik type= text value= Bir Makale Adı /> Visual Studio.NET in bu geri dönüş nedeni kısaca şu şekilde açıklanabilir. Öncelikle yazılımcılar HTML nesneleri üzerinde daha fazla kontrol sahibi olmak istediler. Bir server kontrol kullanıldığında HTML nesnesi gereksiz yere büyür ve çok yer kaplayan Java Script kodları içerir. Üstelik bir de web formlarının, windows form gibi çalışabilmelerini sağlayabilmek için extra Java Script kodları eklenir. Klasik web form olarak oluşturulmuş bir sayfanın HTML kaynak kodları görüntülenir ise durumun vehameti çok daha iyi anlaşılabilir. Karmaşık kodların fazlalığı bir çok açıdan dezavantaj sağlar. Bu karmaşa, arama motoru optimizasyon sorununa, gekesiz büyük band genişliği kullanımına ve performans sorunlarına mâl olur. 35

36 2 KURULUM MVC Framework uygulamalarını geliştirmeye başlamadan önce gerekli editörlerin hazır hale getirilmesi gerekmektedir. Kitabımızın ikinci bölümünde, kullanacağımız programların ve gerekli olan araçların kurulumunu anlatılmaktadır. ASP NET MVC Kurulumuna Hazırlık; Aşağıda MVC Framework gelişimi için gerekli olanlar Visual Studio 2010, Web Platform Installer IIS (Internet Information Services) Express gibi, isteğe bağlı bileşenlerin nasıl kurulacağını anlatılmaktadır. 2.1 Visual Studio 2010 Kurulumu Microsoft, her biri farklı Visual Studio 2010 sürümleri üretir. Bu kitapta anlatılanlar için, aşağıdaki sürümlerden birine ihtiyacımız olacaktır: Visual Studio 2010 Professional Visual Studio 2010 Premium Visual Studio 2010 Ultimate Bize gereken özellikler her üç sürümde de mevcuttur. 2.2 Visual Web Developer Express Kullanarak; Microsoft Visual Studio Express sürümleri olarak bilinen sürümleri üretir. Web uygulama geliştirme için Express Edition, Visual Web Developer 2010 Express denir. Microsoft Express sürümleri birbirinden ayıran özellik yerleşik test özelliğini kaldırmış olmasıdır. Test MVC Framework Microsoft Expres dürümlerinin ayrılmaz bir parçasıdır. Web Developer Express MVC Framework gelişimini gerçekleştirmek için bir üçüncü taraf aracı kullanmak gerekmektedir. Kısacası, Web Developer kullanarak MVC Framework uygulamalarını geliştirebilirsiniz. Visual Studio 2010 Ultimate Edition için tam yükleme için 7.8GB alana ihtiyaç vardır. Eğer bu kadar alandan vazgeçmek istemiyorsanız Şekil-1 de gösterildiği gibi, gerekli bileşenleri seçebilirsiniz. 36

37 Şekil Biz sadece Visual C # ve Visual Web Developer özellikleri istemekteyiz. Varsayılan olarak, Visual Studio. SQL Server 2008 Express kurulumun içinde yer alır, ama siz işaretini kaldırmanız önerilmektedir. Visual Studio sürümü ve kullandığınız işletim sistemine dayalıdır, ancak Şekil-1 de gösterilen bu seçenekleri, en azından bazı temel bileşenleri yüklenmek üzere kullanılabilir. Bunlar, Visual Studio. NET Framework sürüm 4 ve kullanacağı perde arkası özellikleri gibi bazı yerleşik birim test geliştirme, uygulama sunucusu ve test ünitesidir. Not: Visual Web Developer özelliği, MVC Framework sürüm 2 bilgisayarınıza kurmak için, Visual Studio 2010 yüklemenize neden olacaktır. Ancak bir sonraki konumuzda MVC 3 yükseltme nasıl yapılır onu anlatılmaktadır. 2.3 Gerekli Yazılım Araçlarını Yükleme Microsoft, bazı bileşenlerini derleyicilerin son sürümü yayınladıktan sonra piyasaya sürmektedir. Böylece bizde derleyicinin içinde ihtiyacımız olan bileşenleri görememekteyiz. Örneğin, Visual Studio 2010 piyasaya çıktığında, MVC Framework sürüm 2 de idi dolaysıyla Visual Studio 2010 içinde MVC Framework 2.0 vardı. Ancak sonradan MVC Framework 3.0 çıktı. Dolayısıyla ihticımız olan MVC Framework 3.0 Visual Studio 2010 entegre edebilmemiz gerekmekteydi. Bu sorundan kurtulmanın en kolay yolu bileşenleri güncelleştirmekti. Bunu da Web Platform Installer (WebPI) aracını kullanarak bileşenler güncelleştirilebilir. WebPI aracı bileşenleri indirir ve yüklemektedir. Microsoft web platformu için WebPI aracı Microsoft tarafından sağlanan ücretsizdir. WebPI almak için adresinden Şekil-2 de gösterildiği gibi indirme bağlantısını tıklayarak indirebilirsiniz. (Microsoft zaman zaman bu sayfa düzenini değiştirdiği için, ziyaret ettiğinizde farklı bir şey görebilirsiniz.) 37

38 Şekil-2. Web Platform Installer indiriliyor Daha sonra indirilen bu dosyayı çalıştıtın. WebPI otomatik olarak başlayacak ve Şekil-3 de gösterildiği gibi, seçim penceresi göreceksiniz. 38

39 Şekil-3. Web Platform Installer Ekranın üst kısmında üç kategori vardır. Bizi ilgilendiren bileşenleri Ürünler kategorisinde mevcuttur. Ekranın sol tarafında alt kategorileri seçerek aşağıdaki bileşenleri bulun, ya da arama kutusunu kullanarak: Visual Studio 2010 SP1 SQL Server Express 2008 R2 ASP.NET MVC 3 Tools Update Her bir bileşen için, Ekle düğmesini tıklayın. Seçiminizi yaptıktan sonra, indirme ve yükleme işlemini başlatmak için yükle'ye tıklayın. Not: İş istasyonu kurmak için SQL Server Express WebPI kullanarak geliştirme ortamı ve aynı bilgisayar üzerinde çalışan veritabanı istediğinizi varsayar. Örneğin, daha sonra sadece veritabanı makinede de WebPI çalışır olarak farklı makineler üzerinde olması tercih ederseniz. 2.4 İsteğe Bağlı Bileşenler Yükleme MVC Framework kaynak kodu, IIS, Express ve SQL Server 2008 Management Studio Express: kullanmayı düşünüyor olabilirsiniz bunlar için birkaç ek bileşen vardır. Bu kitap için gerekli, ancak bize bir yararı yoktur. 2.5 MVC Framework Kaynak Kodu Microsoft indirilebilir ve kontrol edilebilir MVC Framework kaynak kodunu yayınladı. Sadece kaynağa başvurmak mümkün, MVC Framework kullanmak için kaynak kodu gerekmemektedir. Ancak kod çok değerli olabilir. Bu nedenle adresinden MVC Framework kaynak kodu alabilirsiniz. Microsoft kaynak kodu yayınlamak için kullandığı lisans makul seviyede, ancak size dayatılan kısıtlamaları kabul etmeye istekli olduğundan emin olmalısınız. 2.6 IIS Express Visual Studio, MVC Framework uygulamaları çalıştırmak ve hata ayıklamak için kullanabileceğiniz bir web sunucusu içerir. Büyük bir kısmı için bunu gerektirir ve biz bu kitap boyunca kullanacak olacağımız her şeyi yapar. 39

40 Yararlı olduğu gibi, yerleşik ASP.NET Development Server olarak bilinen sunucu, IIS seçenekleri tam kapsamlı destek vermez.basit bir örnek olarak,yerleşik sunucu Secure Sockets Layer (SSL) desteklemiyor. IIS tam olmayan Express Edition bir uygulama geliştirmek gibi kullanmak mümkündür. Ancak Visual Studio ile ASP.NET Development Server ile kullanılabilir sıkı entegrasyon kaybedersiniz. Alternatif bir IIS Express, IIS sunucu ve tam özellik dahili sıkı entegrasyonu içerir. IIS Express hala gerçek uygulama sunmak için kullanmayı denemek gerektiğini bir gelişme sunucu niyetli kullanıcılar ama geliştirme süreci dağıtıldıktan sonra uygulamanın nasıl işleyeceği konusunda, çok daha tutarlı bir hale getirir. IIS Express alabilirsiniz Visual Studio 2010 Service Pack 1 yükleme SQL Server 2008 R2 Management Studio Express Bu kitapta gerçekleştirdiğiniz tüm veritabanı işlemleri Visual Studio ile de yapılabilmektedir. Ancak daha geniş bir veritabanı yönetimi, SQL Server yönetim araçlarını kullanmak gibi. WebPI aracı ile SQL Server 2008 Management Studio alabilirsiniz Sunucu Hazırlanması Ayrıca uygulamaları dağıtmak için bir sunucu gerekir. MVC Framework uygulamaları Microsoft uygulama sunucusu, IIS, dağıtılması gerekir. IIS, Windows Vista ve Windows 7 gibi istemci sürümleri de dahil olmak üzere çoğu Windows sürümleri ile birlikte bir istemci işletim sistemi için bir MVC dağıtmak tavsiye edilmemektedir. Bu herkes için uygun hale getiren Windows sürümlerinde oldukça temel bazı kısıtlamalar ancak küçük ve basit web uygulamaları vardır. Biz Windows Server kullanmanızı öneririz. Bunu yazmak gibi güncel sürümünü IIS sürüm 7.5 ile birlikte Windows Server 2008 R2 ve biz bu sürüm için talimatlar vereceğiz. Takip eden bölümlerde, biz sadece bir MVC Framework uygulamasını dağıtmak ve çalıştırmak, böylece bir sunucu yapılandırmak için gerekli asgari adımları açıklar: yüklemek, Web Sunucusu rolünü etkinleştirmek NET Framework sürüm 4 ve Web Dağıtım Aracı, kurmak web dağıtım. Biz varsayabiliriz. Windows Server taze yüklü bir kopyası ile çalışıyoruz. En iyi uygulama, Windows Server ve IIS üretim ortamlarında dağıtımı hakkında bilgi için, kapsamlı başvuru bilgileri bulacaksınız IIS Öğrenme Merkezi, ziyaret edin. Bir Barındırma Hizmeti Kullanarak 40

41 Kendi sunucunuzu çalıştırmak için alternatif bir hosting sağlayıcısı tarafındanişletilen kullanmak.asp.net uygulama barındırma piyasasının son derece canlıve rekabetçi.her şeyi başkaları ile güçlü bir sunucu altyapısı paylaşımı fiyatlarlageniş bir yelpazede sayısız yapılandırmaları seçebilirsiniz. Eğer bir hosting sağlayıcısı ile oturum açtığınızda, satın aldığınız hizmet veuygulamalarının dağıtımını yönetmek için talimatlar gönderilecektir. SağlayıcıASP.NET 4 desteklediğinden emin olun.sağlayıcının sunucularında MVC 3Framework yüklü varsa önemli değil Web Sunucu Rolü Etkinleştirilmesi Windows Server Web Server (IIS) rolünü etkinleştirmek için ilk adım. Sunucu Yöneticisi aracını açın ve Rol Ekleme Kuralları Özet bölümünde, Şekil-4 de gösterildiği gibidir Windows Server bir rol ekleme Daha sonra Rol Ekleme Sihirbazı başlayacaktır. Kullanılabilir roller (roller kümesi Server 2008 R2, kullandığınız Windows sürümünü bağlıdır) listesini göreceksiniz. Web Sunucusu (IIS) rolü için kutuyu işaretleyin ve Next (İleri) düğmesini tıklayın. Web Sunucusu (IIS) rolü için kullanılabilir rol hizmetleri listesine ulaşana kadar sihirbazda devam edin. Aşağıdaki hizmetleri işaretli olduğundan emin olun: 41

42 ASP.NET (in the Application Development category) Management Service (in the Management Tools category) ASP.NET rol hizmet önemlidir. Yüklemek çalıştırmak ve o olmadan MVC Framework uygulamaları çalıştırmak. Yönetim Hizmeti rol hizmetini önümüzdeki kuracak Web dağıtım aracı ile kullanımı için gereklidir. Sihirbaz aracılığıyla etkin olacak rolleri ve rol hizmetlerine ulaşana kadar devam edin. Bu sayfa, Yükle düğmesini tıklatın. Yükleme işlemi tamamlandıktan sonra, bir tarayıcı kullanarak IIS temel fonksiyonlarını test etmek gerekir.sunucu kendisi ( veya başka bir makine ( ya da sunucu için varsayılan URL gidin.şekil-5 de gösterildiği gibi, her şeyin düzgün yüklüyse, IIS 7.5 Hoş Geldiniz sayfası göreceksiniz. 2.7 Ek Bileşenlerini Yükleme Şekil 2-5. IIS Hoş geldiniz sayfası Bir sonraki adım, sunucu üzerindeki Web PI kullanmak için ek yazılım bileşenlerielde edilir ve yüklenir. Sadece iki bileşenden gerekir:.net Framework version 4 Web Deployment Tool 2.0 MVC Framework bu kitapta örnekler için bir ön koşul yapar. NET 4, bağlıdır. We show you how to perform web deployment in Chapter 23. Using the Web Deployment Tool is 42

43 only one of the ways for deploying an MVC application, but you ll need this component if you want to follow the demonstration in this book. Burada ayrıca SQL Server Express 2008 R2 seçeneği seçebilirsiniz.sql Server Express yüklerseniz, bir kimlik doğrulama modunu seçmek için istenir.karma modu kimlik doğrulaması seçin ve sa hesabı için bir şifre oluşturun. Bu dikkatli bir şekilde not edin. MVC Framework isteğe bağlı olduğunu tuhaf görünebilir, ama bunu dağıtmak uygulama çerçevesinde kütüphaneleri eklemeyi seçebilirsiniz.kontrolü olmayan bir sunucuya bir uygulama dağıtırken özellikle yararlıdır. Note: WebPI güzel özelliklerinden biri, bağımlılıkları işleme.örneğin, sadece ASP.NETMVC seçeneği seçerseniz. NET 4 seçilir ve otomatik olarak yüklenmiş olacak. Özel bir veritabanı sunucusu yoksa, IIS çalışan aynı sunucu üzerinde SQL Server yükleyebilirsiniz.bu adım isteğe bağlıdır, ancak 23. bölümde, uygulama dağıtım sürecinin bir parçası olarak veritabanları dağıtmak için nasıl göstereceğiz ve bunun için SQL Server bir örneği gerekir. 2.8 Web Dağıtım Ayarlama MVC Framework uygulamasını bir sunucuya dağıtmak için Web Dağıtım özelliği nasıl kullanacağınızı göstereceğiz. Ancak, bunu yapmadan önce, IIS bu isteklerini kabul yapılandırmanız gerekir. Note: Web sunucu üzerinde herhangi bir yönetici hesabı bizim MVC Framework uygulamaları dağıtmak için kullanılan böylece Dağıtım yapılandırıyorsanız. Yönetici olmayan hesapları, bu süreç devretme uzun bir süreçtir. Kapsamlı bir eğitim için, bakın. 43

44 Başlat menüsünde bulunan Internet Information Services (IIS) Yöneticisi aracı,açın.pencerenin sol tarafındaki bağlantıları paneli, sunucu seçin. Bu isme göre t 2.9 IIS Yöneticisi aracını kullanarak Penceresinin ana bölümünde Yönetimi bölümünde (bkz. Şekil-6) aşağı tuşlarını kullanarak bulabilirsiniz Yönetim Hizmeti Delegasyonu simgesine çift tıklayın.özellik Ayarlarını Düzenle bağlantısını tıklayın ve gösterildiği gibi, yöneticiler seçeneği işaretlendiğinde kuralları atlamak için izin ver olun Şekil-7. iletişim kutusunu kapatmak için Tamam'ı tıklatın. 44

45 2.10 Yönetim Hizmeti Delegasyonu özellik ayarlarını düzenleme Sunucunuz için Yönetim ana sayfasına dönmek için Geri düğmesini tıklatın.yönetim Hizmeti simgesine çift tıklayın, Şekil-8 de gösterildiği gibi, uzak bağlantıları etkinleştir seçeneğini işaretleyin ve sonra Başlat bağlantısını tıklayın Yönetim Hizmeti Etkinleştirme Not: Yönetim Hizmeti sunucu yeniden başlatıldığında otomatik olarak başlamaz.bunu düzeltmek için, Hizmetler kontrol paneline gidin ve Web Yönetimi HizmetiBaşlangıç Türü Otomatik veya Otomatik (Gecikmeli) değiştirin. Web Dağıtım özelliği düzgün çalışıp çalışmadığını test etmek için bir tarayıcı açınve aşağıdaki URL gidin: Web Dağıtım hizmeti güvenli bağlantı (https düzenli değil http isteği) ve port 8172üzerinde çalışır.her şeyi çalışıyorsa, bir sertifika uyarısı olacak ve daha sonra bir kullanıcı adı ve şifre istenir. (Kullanıcı adı ve şifre görmezseniz istemine sonra en muhtemel nedeni bir güvenlik duvarı bağlantı noktası 8172 engelleme olmasıdır.) 45

46 Özet Bu bölümde Asp.net Mvc 3.0 da proje hazırlamak için gerekli olan minumun programların nasıl kurulacağı ve siteme nasıl entegre edileceği anlatılmıştır. Sonra ki bölümler de ise Mvc framework mimarisine giriş yapılacaktır. 46

47 3 İlk MVC Uygulamasına Giriş 3.1 Yeni Bir ASP.NET MVC Projesi Oluşturma Visual Studio 2010 ile yeni bir MVC proje oluşturarak başlıyoruz Şekil Şekil-8.5 de görüldüğü üzere, Yeni Proje açmak için File menüsünden New Project seçin.web şablonları seçip, MVC 3 yüklediyseniz. Şekil da gösterildiği gibi, ASP.NET MVC 3 Web Uygulama adında yeni bir öğe oluşturacağız. 47

48 Visual Studio MVC 3 Proje Şablonu Şekil Dikkat: Yeni bir proje oluştururken, doğru olanı seçmek için dikkatli olun. Yeni proje adını verin ve devam etmek için Tamam düğmesine tıklayın. Şekil- 10 da gösterilen üç farklı tipte MVC proje şablonları arasında seçim yapmak istersek açılan pencereden seçim yaparız. 48

49 MVC 3 Proje Seçimi Şekil Boş seçenek sadece MVC 3 uygulama için gerekli minimum dosya ve klasörleri bir proje oluşturmaktadır. İnternet Uygulaması (internet application) seçeneği aracılıyla küçük bir örnek uygulama oluşturulur. Kullanıcı kaydı ve kimlik doğrulama, başlık gezinti butonları ve hazır bir görseli ile birlikte css ve jquery dosyalarını içerir. Intranet Uygulama seçeneği İnternet Uygulamaları benzer, ancak bir etki alanı / Active Directory altyapısı ile kullanıcıların kimliğini doğrulamak ortamlarda kullanılmak üzere tasarlanmıştır. Bu bölümde, biz, razor view engine ile internet uygulaması seçeneğinden seçerelip tamam a tıklanmalıdır. Visual Studio 2010, bizim için hazır örnek bir asp.net mvc 3 projesi oluşturur. Solution Explorer penceresinde görüntülenir dosyaları ve klasörleri bir dizi göreceksiniz. Bu bir MVC 3 proje için varsayılan bir yapıdır. Uygulamamızı çalıştırmak için Debug menüsünden Start Debugging ( Klavyeden Kısa yol; F5 butonuna basabilirsiniz. ) seçerek derleyebilirsiniz. Derlediğimiz ilk asp.net mvc projemizin ekran çıktısını şekil-11 de görebilirsiniz. 49

50 Boş bir proje çalıştırmaya çalışıyor Şekil 3.2 İlk MVC Uygulaması Birinci Yöntem Bir programı anlamanın en iyi yolu o programda uygulamalar yapmaktır. Biz de bu kısımda mvc3 te basit ekran çıktısı alacağımız bir uygulama yapacağız. Öncelikle Visual studio da açıp file menüsünden new Project deyip oradan web kısmında Asp.Net MVC 3.0 seçilir. Daha sonra gelen pencerede Mvc proje tipleri arasından Empty seçilir. Empty işlemi bir Mvc3 projesi için minumum dosya ve klasörleri oluşturur. Projeyi oluşturduğumuzda solution explorer windowsda Mvc3.0 ın default genel yapısı oluşmuş olacaktır. Bu aşamada programı çalıştırdığımızda Şekil -1 deki gibi 404 hatası göreceğizdir. Bu 404 hatanın sebebi ise şuan projemizin içinde programın kullanacağı herhangi bir kaynak kodunun bulunamamasıdır 50

51 ŞEKİL-1 Sonraki aşamada ise ilk controller ımızı eklenir. Controller dosyası üzerinde sağ tuş add controller seçilir. Sonra gelen pencerede Şekil -2 deki gibi controller ımıza isim verilir ve add tıklanır. Şekil 2 51

52 Daha sonra gelen pencerede aşağıdaki gibi basit bir fonksiyon yazılır. using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; namespace ornk1.controllers public class SayfaController : Controller // // GET: /Sayfa/ public string method() return "KARAYEL TASARIM"; Sonraki aşamada ise global.asax dan aşağıdaki gibi ayarlar değiştirildikten sonra sonra Şekil -5 deki gibi gibi ekran çıktısı oluşur. using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; using System.Web.Routing; namespace ornk1 // Note: For instructions on enabling IIS6 or IIS7 classic mode, // visit public class MvcApplication : System.Web.HttpApplication public static void RegisterGlobalFilters(GlobalFilterCollection filters) 52

53 filters.add(new HandleErrorAttribute()); public static void RegisterRoutes(RouteCollection routes) routes.ignoreroute("resource.axd/*pathinfo"); routes.maproute( "Default", // Route name "controller/action/id", // URL with parameters new controller = "Sayfa", action = "method", id = UrlParameter.Optional // Parameter defaults ); protected void Application_Start() AreaRegistration.RegisterAllAreas(); RegisterGlobalFilters(GlobalFilters.Filters); RegisterRoutes(RouteTable.Routes); Şekil 3 53

54 54

55 3.2.2 İkinci Yöntem Ekran çıktısı görebilmek için diğer bir yöntem olan Asp.net mvc ile birlikte gelen view metodunu kullanarak ekran çıktsı alınabilmektedir. Kitabımızda kullanılacak olan kodlar bu yapı üzerinde olduğundan bu bölümü iyi kavramanız gerekmektedir. View metodunun kullanım şekli daha iyi anlamanız için aşağıdaki gibi açıklanmıştır. Oluşturduğumuz projede solution explorer kısmına Sayfa adında yeni bir controller eklenir. Gelen sayfada aşağıdaki gibi built in viewresult sınıfı düzenlenmektedir. using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; namespace ornk2.controllers public class SayfaController : Controller // // GET: /Sayfa/ public ViewResult method() return View(); Sonraki aşamada ise viewresult ımıza yine üzerinde sağtuş yapıp şekil-2 deki gibi method adında master pagesiz bir view ekliyoruz. Şekil 1 55

56 Daha sonra eklediğimiz bu view ın içine şekildeki gibi html etiketleriniz Layout = null; <!DOCTYPE html> <html> <head> <title>method</title> </head> <body> <div> KARAYEL TASARIM ( view'dan gelen) </div> </body> </html> 56

57 Son olarak ise global.asax kısmında gerekli controller ve action ismini değiştirip projemizi çalıştırıyoruz. Gelen pencerede oluşan ekran çıktısı ise şekil 1 teki gibidir. Şekil Dinamik Çıktı Ekleme Asp.Net Mvc nin bize sağlamış olduğu built in viewresult sınıfı ve viewbag özelliği bir çok uygulamanın vazgaçilmez bir değişken taşıma yöntemidir. Bu yöntem sayesinde Controller 57

58 mızda tanımladığımız bir değişkene View sayfasında başına işareti koyarak kolayca erişilebilmekteyiz. Daha iyi kavramanız açısından birlikte basit bir örnek yapalım Örneğimizi kısaca açıklayacak olursak bir değişkende bilgisayarın saatini tutacağız daha sonra bu bilgisayarın saatine göre bize sonuç olarak view kısmında A - günaydın B - iyi öğlenler, C - iyi akşamlar Yazılarından ilgili olanın göstermesini isteyeceğiz. Ancak hedeflenen amaç ise sizlerin Asp.Net Mvc de view result sınıfının nasıl kullanılacağını kavrayabilmesidir. Öncelikle Asp.Net Mvc de yeni bir proje oluşturuyoruz. Oluşturduğumuz projede solution explorer kısmına Sayfa adında yeni bir controller eklenir. Gelen sayfaya ise built in viewresult sınıfı yazılır. using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; namespace ornk3.controllers public class SayfaController : Controller // // GET: /Sayfa/ public ViewResult method() int saat = DateTime.Now.Hour;// bilgisayarın saatini tutar int dakika = DateTime.Now.Minute; ViewBag.saatt = saat.tostring()+" : "+dakika.tostring(); if (saat > 5 && saat < 12) ViewBag.degisken = "İyi Sabahlar >"; else if (saat >= 12 && saat < 17) ViewBag.degisken = "İyi Öğlenler >"; else ViewBag.degisken = "İyi Akşamlar >"; return View(); 58

59 Sonraki aşamada ise oluşturduğumuz viewresult ımızın üzerinde sağ tuş yapıp şekil- 1 deki gibi method adında master pagesiz bir view ekliyoruz. Şekil 1 Daha sonra eklediğimiz bu view ın içine şekildeki gibi html etiketlerini Layout = null; <!DOCTYPE html> <html> <head> <title>method</title> </head> <body> <div> 59

60 </div> </body> </html> Son olarak ise global.asax kısmında gerekli controller ve action ismini değiştirip projemizi çalıştırıyoruz. Gelen pencerede oluşan ekran çıktısı ise şekil 4 teki gibidir. Şekil ASP:NET MVC 3.0 da FORM Oluşturma Asp.net mvc sayesinde form uygulaması yapmak oldukça kolaydır. Asp.net mvc bize yapacak olduğumuz formu oluşturmaktadır ancak biz önce yapacak olduğumuz formu kendimiz html etiketlerini kullanarak oluşturacağız. Öncelikle yapacağımız uygulamanın senaryosunu oluşturalım. Uygulamamız bir bankanın kredi kartı için yaptığı reklam ile kredi kartı başvuru formunu kapsasın. Öncelikle bir ana sayfa oluşturalım ve kullanıcılara kredi kartı isteyip istemediklerini soralım. 60

61 Sonra kullanıcıları bir link ile kredi kartı başvuru formuna yönlendirelim. Son olarak kayıtlarının alındığına dair bir sonuç sayfası oluşturalım. Visual studio programını açıp yeni proje oluşturuyoruz. MVC tipleri arsından Empty seçilir. Daha sonra Sayfa adında controller ekliyoruz. Sonra Teklif adında bir ActionResult methodu ekliyoruz. Daha sonra bu oluşturduğumuz teklif adındaki ActionResult methodumuza Masterpage kısmını işaretlemeden ve Razor kısmını seçtiğimizden emin olarak bir view ekliyoruz. Daha sonra oluşturduğumuz teklif view ına girip aşağıdaki gibi html etiketlerini bir view a link vermek için in paremetrelerinden birincisi metin diğeri ise view ın ismi gelmek Layout = null; <!DOCTYPE html> <html> <head> <title>karayeltasarim</title> </head> <body> <div> <h1>kredi kartı sahibi olmak ister Formu","BasvuruFormu") </div> </body> </html> 61

62 Daha sonra ise global asax ı projemizin controller ve action ımıza göre düzenleyip projemizi çalıştırıyoruz. Ve ekran çıktısı şekil -1 deki gibi olmalıdır. Eğer çalıştırdığınızda Başvuru Formu linkine tıklarsanız 404 hatası alacaksınızdır. Bunun sebebi ise daha Başvuru formunu oluşturmamamızdan kaynaklanmaktadır. Şekil 1 Sonra ki aşamada ise modelse sağ tıklayıp şekil-32teki gibi KartBilgi adında bir sınıf ekliyoruz ki bu sınıf oluşturacağımız formdan alacağımız elemanları tanımlayacağımız sınıftır. Şekil 2 62

63 Sonra oluşturduğumuz KartBilgi adındaki sınıfa girip formda bulunması istediğimiz elemanları aşağıdaki gibi yazıyoruz. namespace KarayelTasarim.Models public class KartBilgi public string Adi get; set; 63

64 public string Soyadi get; set; public string get; set; public string Tel get; set; public bool? Tercih get; set; public string Cinsiyet get; set; Şimdi ise formumuzu oluşturacağımız aşamaya geldik. Öncelikle BasvuruFormu Adında bir Viewresult metodu ekliyoruz. Daha sonra ise bu metodumuza stronghly typed view ve use master page kısmına tik koymadan BasvuruFormu adında bir view ekliyoruz. Formumuzda ad, soyad, mail, telefon kısımları textbox olarak cinisiyeti radiobutton ve tercih kısmını ise dropdownlist olarak düzenleyelim. Formumuzdaki ad soyad gibi form elemanlarının tanımlanırken id kısmına yazdığımız isimleri KartBilgi sınıfında tanımladığımız property ler ile aynı isimde Layout = null; <!DOCTYPE html> <html> <head> <title>karyeltasarim</title> </head> (Html.BeginForm()) <p>adiniz => x.adi)</p> <p>soyadiniz => x.soyadi)</p> <p>mail => x. )</p> <p>telefon => x.tel)</p> 64

65 <p>cinsiyet : </p> "Erkek")</p> "Kadin")</p> <p> Kart istiyor => x.tercih, new[] new SelectListItem() Text = "Evet,İstiyorum", Value = bool.truestring, new SelectListItem() Text = "Hayir,Teşekkürler", Value = bool.falsestring, "Birini seçiniz") </p> <input type="submit" value="sonucu Gonder" /> </body> </html> Sonraki aşamada ise projemizi çalıştırmayı deneyelim ekrana gelen sayfada Başvuru formu metinine tıkladığımızda gelen sayfa şekil-7 deki gibi olmak zorundadır. Şekil 3 65

66 Sonucu gönder butonuna tıkladığımız da sayfa da herhangi bir değişiklik olmayacaktır. Bunun sebebi ise daha gönderilecek acitonda gerekli olan değişiklikleri yapmadığımızdan kaynaklanmaktadır. Şimdi ise Sonuc adında bir view ekliyoruz ve buview ın içine şekil-8 deki gibi gerekli olan Html etiketlerini Layout = null; <!DOCTYPE html> <html> <head> <title>sonuc</title> </head> <body> (Model.Tercih == true) <h1>teşekkürler</h1> <h2>kredi başvurunuz alınmıştır.</h2> <h2>kart başvurunuz alınmıştır.</h2> else <h1>teşekkürler</h1> <h2>kart başvurunuz alınmıştır.</h2> </div> </body> </html> Daha sonra sayfacontroller kısmına geliyoruz ve şekil-9 daki gibi HttpGet ve HttpPost kısmını ekliyoruz. HttpGet Sayfayı çağırdığınız anda tetiklenmesini sağlayan özelliktir. HttpPost ise Sayfayı post ettiğimizde tetiklenmesini sağlayan özelliktir namespace KarayelTasarim.Controllers public class SayfaController : Controller 66

67 // // GET: /Sayfa/ public ActionResult Teklif() return View(); [HttpGet] public ViewResult BasvuruFormu() return View(); [HttpPost] public ViewResult BasvuruFormu(KartBilgi krt) return View(); Son olarak ise projemizi çalıştırıyoruz. Ekran çıktısı şekil-4 deki gibi olmak zorundadır.ve böylecelikle bir veri giriş formunun ilk kısmını burada tamamlamış olduk. İkinci kısımda giriş denetilmelerini yapacağız. Şekil 4 67

68 3.4.1 Asp.Net Mvc de Forma Kontrol Ekleme Bir önceki konuda bir form uygulaması nasıl oluşturulur içerisindeki bilgiler nasıl gönderilir, form validation larını form collection larını görmüştük. Bu makalemizde ise yine aynı örneği kullanarak form elemanlarını kontrol etmeyi öğreneceğiz.bir önceki konuda kısaca hatırlacak olursak ; Bir Anasayfa oluşturmuştuk bu anasayfadan Form sayfamıza link vermiştik daha 68

69 sonra form sayfamızı oluşturup çalıştırmıştık. Ancak bu form sayfası kutucukların içi dolu veya boş olup olmamasına kontrol etmeden gönder dediğimiz anda formumuzu göndermişti şimdi ise bu formumuza giriş kontrolleri yazacağız. Öncelikle bu kontrolleri oluşturmak Asp.Net Mvc 3.0 Sayesinde oldukça kolaydır. MVC de bu kontrolleri sağlayan kendine ait bir sınıfı vardır. Bu bizim için büyük bir avantajdır. Projemizi açıp KartBilgi modeline girip aşağıdaki değişikleri yapalım. namespace KarayelTasarim.Models public class KartBilgi [Required(ErrorMessage = "Lütfen adinizi giriniz")] public string Adi get; set; [Required(ErrorMessage = "Lütfen Soyadınızı giriniz")] public string Soyadi get; set; [Required(ErrorMessage = "Lütfen adresinizi giriniz")] [RegularExpression(".+\\@.+\\..+", ErrorMessage = "Lütfen doğru bir adres giriniz")] public string get; set; [Required(ErrorMessage = "Lütfen telefon numaranızı giriniz")] public string Tel get; set; [Required(ErrorMessage = "Lütfen iki seçenekten birini seçiniz")] public bool? Tercih get; set; [Required(ErrorMessage = "Lütfen cinsiyetinizi seçenekten birini seçiniz")] public string Cinsiyet get; set; Daha sonra ise başvuru formumuza girip asp.net içinde olan css dosyasına link veriyoruz ve gerekli değişikleri yapıyoruz. Aşşağıda kodun içerisine yazmış olduğumu Validationsummary ise bir yardım methodudur Oluşturduğumuz validation nesnelerinin hata mesajlarının nerede gösterileceğini Layout = null; <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="@href("~/content/site.css")" type="text/css"/> <title>karyeltasarim</title> 69

70 </head> <p>adiniz => x.adi)</p> <p>soyadiniz => x.soyadi)</p> <p>mail => x. )</p> <p>telefon => x.tel)</p> <p>cinsiyet : </p> "Erkek")</p> "Kadin")</p> <p> Kart istiyor => x.tercih, new[] new SelectListItem() Text = "Evet,İstiyorum", Value = bool.truestring, new SelectListItem() Text = "Hayir,Teşekkürler", Value = bool.falsestring, "Birini seçiniz") </p> <input type="submit" value="sonucu Gonder" /> </body> </html> Sonraki aşamada ise Sayfacontroller ımıza gidip aşşağıdaki gibi kodlarımızı ekliyoruz ModelState.IsValid Niteliği HttpPost ile ilişkilidir. Bu nitelik sayesinde form da istemediğimiz şekilde giriş yapılmışsa tekrar form sayfasına döndürmek için kullanabiliyoruz., public ViewResult BasvuruFormu(KartBilgi krt) if (ModelState.IsValid) return View("Sonuc", krt); else return View(); 70

71 Son olarak ise projemizi çalıştırıyoruz ve şekil-3 teki gibi ekran çıktısını görüyoruz Şekil Asp.Net Mvc de create a strogly view Bu makalemizde bir form uygulamasında yaparken oluşturduğumuz action ımıza view eklerken karşımıza çıkan create a strogly- type view seçeneğini açıklayacağım. Bu makalemizde bu seçeneğin bize sağladığı kolaylıkları öğreneceğiz. Bir önceki makalemizde form uygulaması yaptığımız için onun üzerinden devam edeceğiz. Öncelikle form uygulaması makalemizi açıyoruz ve SayfaController ımıza bir tane test1 adında viewresult sınıfı ekliyoruz. public ViewResult test(kartbilgi krt) return View("Sonuc", krt); Ve daha sonra bu test1 sınıfına view eklerken karşımıza gelen pencerede create a stroglytype view tik koymadan devam ediyoruz ve Add tıklıyoruz. Daha sonra bu test1 view ına 71

72 tıklıyoruz ve karşımıza gelen pencerede boş bir html sayfası olduğunu görüyoruz bunun sebebi create a strogly- type view tik koymamamızdan kaynaklanmaktadır. Burada formumuzu kendimiz ViewBag.Title = "test"; Layout = "~/Views/Shared/_Layout.cshtml"; <h2>test</h2> Daha sonra ise SayfaController ımıza bir tane daha şekil-3 teki gibi test2 adında viewresult sınıfı ekliyoruz. public ViewResult test2(kartbilgi krt) return View("Sonuc", krt); Ve daha sonra bu test2 sınıfına view eklerken karşımıza gelen pencerede create a stroglytype view tik koyuyoruz ve aşağıdaki combobox seçeneğinden Model Class ımızı seçiyoruz ve bir altındaki scafffold template den şekil-4 deki gibi emty seçiyoruz ve tamam diyoruz. Karşımıza gelen ş pencerede html sayfasının başında model sınıfının ekli olduğunu görüyoruz.bu sayede models sınıfının elemanlarını kullanabiliyoruz.@model.dediğimizde bu elemanları ViewBag.Title = "test2"; Layout = "~/Views/Shared/_Layout.cshtml"; <h2>test2</h2> Sonraki aşamada ise SayfaController ımıza bir tane daha test3 adında viewresult sınıfı ekliyoruz. public ViewResult test3(kartbilgi krt) 72

73 return View(); Ve daha sonra bu test3 sınıfına view eklerken karşımıza gelen pencerede create a stroglytype view tik koyuyoruz ve aşağıdaki combobox seçeneğinden Model Class ımızı seçiyoruz ve bir altındaki scafffold template den create seçiyoruz ve tamam diyoruz. Karşımıza gelen pencerede içi dolu bir html sayfasının olduğunu görüyoruz. Bunun sebebi ise scafffold template den create seçmemizdendir. Create sayesinde Asp.netMvc 3.0 bizim yerimize form elemanlarını oluşturmuştur ve bize kolaylık ViewBag.Title = "test3"; Layout = "~/Views/Shared/_Layout.cshtml"; <h2>test3</h2> <script src="@url.content("~/scripts/jquery.validate.min.js")" type="text/javascript"></script> <script src="@url.content("~/scripts/jquery.validate.unobtrusive.min.js")" <fieldset> <legend>kartbilgi</legend> <div => model.adi) </div> <div => => model.adi) </div> <div => model.soyadi) </div> <div => => model.soyadi) </div> <div class="editor-label"> 73

74 @Html.LabelFor(model => model. ) </div> <div => => model. ) </div> <div => model.tel) </div> <div => => model.tel) </div> <div => model.tercih) </div> <div => => model.tercih) </div> <div => model.cinsiyet) </div> <div => => model.cinsiyet) </div> <p> <input type="submit" value="create" /> </p> </fieldset> to List", "Index") </div> Son olarak programı çalıştırdığımızda Asp.net mvc nin bizi yerimize formumuzu oluşturduğunu göreceğiz 74

75 ÖZET Bu bölümde yeni bir MVC projesi oluşturarak basit bir veri giriş uygulamsı yapıldı. Bununla birlikte controller ve view yapıları anlatılmaya çalışılarak MVC framework mimarisine giriş yapıldı. Ancak Veri giriş uygulaması yaparken anlatılmayan birkaç özellik mevcuttur( İncluding Razor syntax, routing, and automated testing gibi). Fakat ileri ki bölümlerde bu atladığımız yerleri etraflıca anlatılmaktadır. 75

76 4 ASP.NET MVC de SİTE TASARIMI ASP.NET MVC de site tasarımı nasıl yapılır ASP.NET MVC de web sayfa tasarımı yapılırken dikkat edilmesi gereken kurallar hakkında bilgi sahibi olacağız. İlk olarak yeni bir site gelişmi, grafikelerin kullanımı ve sitenin içinde bulunan bütün elemanlarının nerede durması gerektiğinde meydana gelmiştir. Bunu son kullanıcı gözüyle açıklayacak olursak bak ve hisset olarak tanımlarız. Genelde yapılacak olan tasarımda kullanıcının alışa geldikleri dışına çıkılmamalıdır. Herhangi bir kod yazmadan önce ASP.NET çerçevesinde yer alan özellikler göz önünde bulundurmalı, bu yüzden Microsoft tarafından zaten yapılmış çalışmalardan yararlanabilirsiniz. Bu bize büyük avantaj sağlamıştır. Burda bizim işimiz ise bu kodları kullanarak istediğimiz şekilde çok daha iyi bir site tasarımı yapmaktır. Bu kısımda Sitenin genel görsel düzeni ve bizim için çok yararlı bir özellik olan master page(layout) nasıl kullanılır onlar açıklanmaktadır. Bir çoğunuz için master page yeni bir şey değildir. Asp. Net 2.0 dan sonra çıkan versiyonlar bu master page e sahiptir. Ve bu masterpage kullanmamız çok büyük değişikler yapmamızı gerektirmez. Not=Masterpage Asp.net mvc ile birlikte layout olarak değiştirilmiştir. İstekler Kullanışı yüksek sade ve şık site tasarımını Asp. Net MVC nasıl entegre edilir onu öğreneceğiz. Bir çok geliştirici sitenin amacına dikkat etmeksizin kaynak kodu yazmaya başlar bu durum yanlıştır. Öncelikli amaç kullanıcılar için basit ama işlevselliği yüksek bir grafik uygulaması yapaktır. İnternette Kullanıcıların Beklentileri Hız, hız ve daha fazla hız Sade ve tutarlı sayfalar Rahat kullanılabilirlik İçerik: "Content is the King" Her tarayıcıyla (browser) uyumluluk Analiz 4.1 Site Tasarımı Yukarıdaki bölümde problemleri tanımlamıştık bu bölümde ise bu problemleri ele alarak, teknik yapı ve genel şablon hakkında çalışacağız. Eğer tema ile uğraşmamak istiyorsanız Ücretsiz olarak Css ile yapılan temaları internetten kolaylıkla bulabilirsiniz. Bazı Css ile tema yapan başında sitelerin başında gelmektedir bu siteye girip bilgisayarınıza beğendiğiniz temayı indirip kullanabilirsiniz. Eğer çok daha gelişmiş bir site tasarımı istiyorsanız. TemplateMonster ı( deneyebilirsiniz. Ya da bunların hepsinin 76

77 dışında kendi temanızı oluşturabilirsiniz. Aşağıda ki birbirini takip eden uygulamalarla kendi temamıza başlayacağız. Düzgün bir layout ve tüm browserlarla uyum içerisinde olmalıdır. Her bir sayfa için kaynak kodunu kopyala yapıştırma(copy and paste) olmaksızın sitenin bütün sayfaları için kolay şık bir tema oluşturulmalıdır. Tüm kullanıcılara hitap eden, kullanıcılara yabancı gelmeyen sitedeki butonların tipleri ve yerleri çağdışı olamamalıdır örneğin ileri geri butonları her sitede olduğu gibi sol üstte olmalıdır. Web sitenizdeki bütün sayfalar ortak bir tasarıma sahip olamayabilir fakat ortak davranış sergilemek zorundadır 4.2 Tasarım da kullanılan uygulamalar Asp. Net MVC nin en önemli özeliklerden biri kod tekrarının bulunmamasıdır. Bu konuyu açıklamak gerekirse kodu aynı olan sayfaların bile kopyalama yapıştırma(copy and paste) olmadan aynı tasarıma sahip olabilmektedir. Şöyle ki genel öğeleri seçip tek yerden değiştirdiğimizde tüm sayfalarda ki bu öğeleri değiştirebilmemizi sağlanmaktadır. Dolayısıyla uygulamamızı yaparken bu Asp.NET MVC bize sağlamış olduğu bu özellikten faydalanacağız. Asp.net mvc ile birlikte gelen yani kavramların başında kullanıcı arayüzlerini ayırabilmek gelmiştir. Kullanıcı arayüzleri ayırabildiğimiz için Ana makinada(server side) tarafından çalışacak kodlarla ilişkisinin kesilmesini sağlamış oldu. Ayrıca eski.aspx(.net 2.0,.net 3.0,.net 3.5) teknolojisinde ise code behind diye isimlendirdiğimiz gereksiz olaylardan(events) ve kodlardan kurtulmamıza olanak sağlamıştır. View kısmında oluşturduğumuz kullanıcı arayüzleri ni etkileşimli biçimde kullanıcıdan aldığı komutları süzgeç diye tabir ettiğimiz controller kısmına iletmemizi sağlamıştır. Bu sayede müthiş bir ayırım işlemi gerçekleşmiştir. Yani herhangi bir şekilde bir kopyalama veya bir şekilde kodu değiştirmemize gerek kalmamıştır 4.3 Style sheet dosyalarında css in kullanımı Stil dosyaları html etiketlerini içine alır ve id yada sınıfı referansa olarak kullanarak ayrı bir dosyada depolanır. Fakat karşımıza bazen HTML etiketlerinde karmaşık stil kullanımlarını aşağıdaki div örneği gibi görebiliriz. <div style= align: justify; color: red; background-color: yellow; font-size: 12px; >some text</div> Fakat böyle bir kullanımdan ziyade ayrı bir css dosyası oluşturmak kodlar üzerinde ki değişiklikler için bize avantaj sağlar. Bir css doyası oluşturduğunuz zaman yapmanız gerek HTML etiketlerine referans olması için vereceğiniz dosya ismini class yada id olarak görevlendirmektir. Böylece bir css doysanızı farklı HTML sayfalrına referans olarak kullanabilirsiniz. Yani bir çok sayfa için aynı stil dosyasını kullanabilir örneğin tüm sayfalarda arka plan rengini tek bir değişiklikle halledebilirsiniz. 77

78 Bunun için kullanılan stil dosyasına gidip gerekli değişikliği yapmanız yeterli olacaktır. Bu özellikleri ile css bizlere büyük zahmetlerden kurtarıp zaman kazancı sağlamaktadır. Stillerin Html etiketlerine etkisini 3 şekilde gerçekleştirmektedir. 1. Sayfa içerisinde yerel olarak tanımlamak yani html etiketlerinin içinde tanımlamak. Yerel tanımlama örneği <html > <head > <title>karayel Web Tasarım </title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> </head> <body> <h1 style= background-color:red; border-width:2px; border-color:black; > KARAYEL TASARIM</h1> </body> 2. Global, yani tüm sayfa için, global stil şablonlar sayfadaki tüm html etiketlerinin belirlenen özellikte olması istendiğinde kullanılırlar. Global Tanımla Örneği <html > <head > <title>karayel Web Tasarım </title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <style> body margin: 0; padding: 0; font-family: Georgia, "Times New Roman", Times, serif; font-size: 13px; color: #666666;.logo background-color:red; width:100px; height:100px; border-width:2px; border-color:black; #menu background-color:white; width:900px; height:25px; 78

79 </style> </head> <body> <div id="menu">menü</di> <div class="logo">logo</di> </body> </html> 3. Bağlantılı, yani birden çok sayfa için, bağlantılı stil şablonlar birçok sayfada aynı biçimde olması istendiğinde kullanılırlar. Yapılması gereken bir tane css dosyası oluşturup aşağıdaki örnekte olduğu gibi linkini oraya yazmalıyız Bağlantılı Tanımlama Örneği <html > <head > <title>karayel Web Tasarım </title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <link href="/content/css/modules.css" rel="stylesheet" type="text/css" /> <link href="/content/css/site.css" rel="stylesheet" type="text/css" /> </head> <body> </body> </html> Tercih edilen senek ise 3. Madde olmalıdır. Çünkü yapacağımız uygulama birden fazla sayfada etki edeceği için bir veya iki tane.css dosyası oluşturup büyük bir zahmetten kurtuluruz. 4.4 Neden tasarımda DİV kullanmalıyız? Web tasarımcılar sayfalarını düzenlerken, sayfalarına bazı öğeleri eklerken tablolardan yararlanırlar. Aslında bu CSS geliştirilmeden önce temel bir standarttı ama şimdi bile bir çok tasarımcı buna devam etmektedir. Bununla beraber W3C nin yetkilileri bu kullanım tarzının ekran okuyucuları(screen reader) için bazı sorunlar oluşturulduğunu söylüyor. Diğer bir deyişle, tablolar belirli bir verinin gösteriminde kullanılabilir, çizelgeler gibi ancak tüm bir sayfanın tablolar kullanılarak tasarlanması doğru değildir. Sayfa tasarımı için CSS in temel özlleiklerini kullanmalı ve bunları <style> kodu ile ayırabilir yada ayrı bir CSS dosyasında tutabilir. Bu önerilerin temel sebepleri ise şunlardır: Eğer siteniz de DİV kullanırsanız ve bunu ayrı bir CSS dosyasına tanımlayıp yazarsanız, ileride bunu kullanacağınız her sayfa için tekrar tekrar tanımlamaya gerek kalmaz. Bu sayede sayfanızı daha hızlı ve kolay geliştirip düzenleme nizi sağlar. Son kullanıcı siteyi çok daha hızlı görüntüler. Tıpkı stil dosyalarının kullanıcı tarafından bir kere indirilip sonrasında cache bellekten kullanılması gibi. Eğer sayfa tasarımında tablolar kullanılır ise kullanıcı her sayfa için ayrı bir yükleme(indirme) yapar. Bu da 79

80 daha fazla byte ve daha fazla bant genişliği demektir. Genelde CSS %50 avantaj sağlar. Daha az byte ve bant genişliği barındırma hizmeti aldığımız şirkete daha az ödeme yapmamız anlamına gelir. Bu büyük şirketler için daha da önemlidir. Ekran okuyucuları sayfadaki yazıları ve içeriği görme engelli kullanıcılar için okurlar ama sayfa tasarımında tablo kullanıldıysa bu iş zorlaşır. Bu nedenle sayfa da tablo kullanılırsa ulaşacağı kitle azalmış olur. CSS stilleri ve DİV ler tablolara göre daha kolay düzenlenebilme özelliğine sahiptir. Örneğin sahip olduğunuz sitede birden fazla CSS stil dosyanız var ve bunlar ayrı tasarımlara sahipler. Yerleşimleri yazı, fontları ve renkleri farklı olsun. Bu farklı CSS leri de sayfanızda bir link ile kullanıma sunabilir ve tek bir tıklama ile tüm tasarımınızı değiştirebilirsiniz. Ya da CSS dosyasına gidip yapacağınız değişiklik tüm sitenizde uygulayabilirsiniz. Ancak tablolar da bu işlemleri yapmak için çok daha fazla zahmete girmek gerekir. CSS yazıcılar için de harika bir özelliktir. Bazı kullanıcılar sitenizi yazdırmak isteyebilir ve menü yada kullanıcı girişlerini yazdırmak istemezler. Siteniz siyah bir tabana sahipse bu da yazdırmak için dezavantaj olur. Ama bir link ile yazdırmak için düzenlenmiş ayrı bir sayfa tasarımını kolayca oluşturup kullanıcıya sunabiliriz. CSS farklı cihazlar için yeniden bir HTML tasarımına gerek olmayacak düzenlemeleri, sınıfları da barındırır. Div ile kodlama yapılırken yazılan kodlar CSS yardımı ile farklı araçlar için ayrı ayrı kodlanmadan sadece CSS kodu değiştirilerek elde edilebilir. Örneğin mobile araçlar için handle CSS dosyası kullanılır. 4.5 ASP.NET MVC MASTER PAGE ( Layout ) Asp.net form uygulamasında yer alan master page modeli Asp.net MVC ninde bünyesinde bulunmaktadır. Asp.net mvc de tasarlayacağımız sayfanın master page olup olmaması küçük bir işlemle halledilebilmektedir. Asp.net Mvc de Razor view engine sayesinde tasarlayacağımız sitenin master page olup olmaması belirlenmektedir. Master page i kısaca açıklamak gerekirse ASP.Net 2.0 ile birlikte gelen yeni bir özellik olan master page tanımlandığı temel sınıftan diğer sayfalarla paylaşılabilir ve diğer sayfalar da master page özelliğinden yararlanabilir örneğin başlık, menü, üste veya alt bilgiler gibi. Master page tek bir dosya içerisinde kodları düzenli bir şekilde tutar ve diğer tüm görsel içerik sayfaları master page ten türetilir. Yani master page tüm sitemizin temelini oluşturmaktadır. Aslında şekil-28 master page özetlemektedir. 80

81 Şekil-28 Ana sayfa özelliği grafiksel bir temsilini sağlar. Şekil-28 Asp.net 2.0 ve sonrası için master page.aspx adı yerine _layout.cshtml olarak değiştirilmiştir. Şimdi sayfamızı Asp.net mvc de nasıl master page seçeriz onu öğrenelim. Öncelikle bir asp.net mvc 3.0 projesi oluşturulur bir tane sayfa controller eklenir bu sayfa controller ın içine bir tane actionresult fonksiyonu eklenir.dha sonra bu acrionresult fonkaiyonuna bir view ekleirken karşımıza gelen pencerede Use a Layout or master page kısmına tik koyarsak oluşturduğumuz sayfa master page li bir sayfa oluşur Eğer koymazsak master page siz bir sayfa oluşur(şekil-1) Şekil-1 81

82 4.6 Asp.NET MVC ile Dinamik Masterpage ( Layout )Seçimi Teknolojinin hızla geliştiği dünyamızda hemen hemen tüm işlerimizi internet aracılığıyla yapmaktayız. Yüksek fonksiyonlu mobil cihazların üretilmesiyle internete istediğimiz yerden girebiliyoruz. Fakat mobil cihazların ekran boyutları masaüstü ve dizüstü bilgisayar ekranlarına göre küçük olmasından dolayı ve bazı telefonlarda hala flash ve jquery desteğinin bulunmamasıdır. Durum böyle olunca mobil cihazlarımızla web sitelerine giriş yaptığımızda girdiğimiz sitenin tasarımında bozulmalar olmaktadır Bu nedenle biz web geliştiriciler olarak bu sorunu çözmek mecburiyetindeyiz. Mobile cihazların sorununu şu şekilde çözülebilmektedir. Sitemiz için iki tane tasarım yaparız tasarımlardan birincisi masaüstü bilgisayarlardan giriş yapıldığında göterilir. İkinci yaptığımız tasarım ise mobil cihazlardan giriş yapıldığında gösterilir. (şekil-2) şekil-2 Peki bu kontrol nasıl sağlanacaktır. Bu aşamada her zamanki gibi bize Microsoft bize yardımcı olmaktadır. Küçük bir kod sayesinde sitede hangi tasarımın götererileceği belirlenmektedir. Bu kod ise viewstart.cshtml bölümüne yazılmaktadır ve bu kod sayesinde sorunumuz çözülmektedir. 82

83 Şekil Menü Oluşturma Sistemi Menü oluştururken dikkat edilmesi gereken iki önemli madde vardır. Bunlardan birincisi site ziyaretçisinin beğeneceği bir menü oluşturmak ve menüyü kolayca değiştirebilecek bir sistem hazırlamaktır. Oluşturacağımız menü master page in -içerisinde yer alacaksa tek bir yerden değiştirilebilir olmalıdır Basit Bir Menü Tasarlamak Menü işlemleri Html.Actionlink metodu kullanarak yapılabilmektedir. Bu metoduda global.asax dosyasındaki routes göre link isim alır. <div class="menu"> <li><a <li><a <li><a TASARIM</a></li> <li><a <li><a <li><a </ul> </div> Linkleri yukarıdaki gibi gibi yazdığımızda kaynak kodda aşağıdaki gibi gözükecektir <div class="menu"> <li><a href="">anasayfa</a></li> <li><a href="/eticaret.html ">E-TİCARET</a></li> <li><a href="/webtasarim.html ">WEB TASARIM</a></li> <li><a href="/referanslar.html ">REFERANSLAR</a></li> <li><a href="/hakkimizda.html ">HAKKIMIZDA</a></li> <li><a href="/iletisim.html ">İLETİŞİM</a></li> </ul> </div> Global asax ayarlamaları 83

84 routes.maproute( "Anasayfa", " ", new controller = "Sayfa", action = "Anasayfa" ); routes.maproute( "ETicaret", "eticaret.html", new controller = "Sayfa", action = "ETicaret" ); routes.maproute( "WebTasarim", "webtasarim.html", new controller = "Sayfa", action = "WebTasarim" ); routes.maproute( "Hakkimizda", "hakkimizda.html", new controller = "Sayfa", action = "Hakkimizda" ); routes.maproute( "Referanslar", "referanslar.html", new controller = "Sayfa", action = "Referanslar" ); routes.maproute( "Iletisim", "iletisim.html", new controller = "Sayfa", action = "Iletisim" ); Gördüğünüz gibi Asp.net Mvc de hem insanlar tarafından okunabilen hem de kolaylıkla bir buton tanımlanabilen menü yapmak oldukça kolaydır. Eğer bir buton daha eklemek isterseniz global asax a yenibir güzergah oluşturmanız yeterlidir. Uygulama Bu noktada web sitesinin tasarımını nasıl yaparım neler kullanarak yapabilirim düşüncesinde ziyade web site tasarımını yapmaya neren başlamalıyım fikri hakim olmalıdır. Bunların hepsinden önce tasarlayacağınız sitenin photoshop veya paint.net gibi graik uygulamalalı programları kullanarak mock-up oluşturulmalıdır. Öncelik web sitenizde bulunmasını istediğiniz fotoğrafları.gif.jpg ve.png şeklide oluşturulmalı kod yazma işlemi ileri ki aşamaya bırakılmalıdır. 4.8 Site Tasarımını oluşturma 84

85 Site tasarımı yapmak zor değildir. Ancak öncelikle bir resimli mock-up a sahip olmalısınız. Site tasarımı oluştururken vazgeçilmez temel öğeler site de bulunmak zorudadır. Temel olarak logo ve diğer grafikler div kullnarak yapılmalı onları da html sayfasına konulmalıdır. Hata işleri bu kadar zorlaştırmadan beğendiğiniz siteyi ücretsiz olarak Free CSS Templates sitesinden indirebilirsiniz. (şekil-4) Şekil-4 İyi bir temiz css sitesi geliştirmek için tarayıcılar dikkate alınmalıdır. Tarayıcılar kod kısmını baştan aşağıya kadar anlayabildikleri siteleri sevmektedir. Bu yüzden sitenizi tasarlarken en doğal ve anlaşılabilir komutları kullanmamız gerekmektedir. Sitemizi tasarlarken div kullanacağımız için divler hakkında aşağıdaki gibi genel bir bilgiye sahip olmanız iyidir: İçerik Altbilgi Yasal bilgiler Linkler Üst 1. Logo 2. Menü Sayfa(Ana Gövde olarak) 1. İçerik 2. Kenar Çubuğu 1. Yasal bilgiler 2. Linkler Altbilgi 85

86 Layout.cshml deki kodlar <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" > <head id="head1" runat="server"> <title>karayel Web Tasarım </title> <meta http-equiv="content-type" content="text/html; charset=utf-8" false) <link href="/content/css/modules.css" rel="stylesheet" type="text/css" /> <link href="/content/css/site.css" rel="stylesheet" type="text/css" /> </head> 86

87 <body> <div id="header"> <div id="logo"> <h1><a href="/">karayel Tasarım</a></h1> <h2><a href="/">asp.net MVC-3 CMS & ETicaret</a></h2> </div> <div id="menu"> <ul> Sayfa", "Index", "AnaSayfa") </li> "Index", "Bilgilendirme")</li> "Index", "Anket") </li> "Index", "Forum") </li> "Index", "ETicaret")</li> </ul> </div> </div> <div id="page"> <div id="content"> <h1 </div> <!-- end content --> <div id="sidebar"> <div id="account" class="boxed"> <h2 class="title">hesaplar</h2> <div class="content"> if (Context.User!= null && Context.User.Identity!= null && Context.User.Identity.IsAuthenticated) <li </li> <li>@html.actionlink("parola Değiştir", "ParolaDegistir", "Kullanici") </li> <li>@html.actionlink("profil Bilgilerim", "KullaniciProfili", "Kullanici") </li> <li>@html.actionlink("sepet", "SepetGoruntule", "ETicaret") </li> <li>@html.actionlink("çıkış", "Cikis", "Kullanici") </li> else <li class="first">@html.actionlink("giriş", "Giris", "Kullanici") </li> <li>@html.actionlink("sepet", "SepetGoruntule", "ETicaret") </li> 87

88 </div> </div> if (Roles.IsUserInRole("Admin")) <div id="admin" class="boxed"> <h2 class="title">yönetici</h2> <div class="content"> <ul class="list"> <li class="first">@html.actionlink("kullanıcı Yönetimi", "KullaniciYonetimi", "Kullanici")</li> <li>@html.actionlink("rol Yönetimi", "KullaniciRolYonet", "Kullanici")</li> <li><a href="@url.action("bilgilendirmeyonet", "Bilgilendirme") ">Bilgilendirme</a></li> <li><a href="@url.action("anketyonet", "Anket") ">Anketler</a></li> <li><a href="@url.action("forumyonet", "Forum") ">Forum</a></li> <li><a href="@url.action("magazayonet", "ETicaret") ">Mağaza Yönetimi</a></li> </ul> </div> </div> <div id="current-poll" class="boxed"> <h2 class="title">güncel Anket</h2> <div class="content"> </div> </div> <div id="news" class="boxed"> <h2 class="title">haberler & Olaylar</h2> <div class="content"> <ul> <li class="first"> <h3>01 Kasım 2010</h3> <p><a href="#">banko iddaa kuponları ilk versiyonu release oldu </a></p> </li> <li> <h3>20 Ekim 2010</h3> 88

89 tamamlandı.</a></p> </li> <li> <p><a href="#">proje test aşaması <h3>01 Ekim 2010</h3> <p><a href="#">analiz için yeni veriler girilmeye başlandı </a></p> </li> </ul> </div> </div> </div> <!-- end sidebar --> <div style="clear: both;"> </div> </div> <!-- end page --> <div id="footer"> <p>asp.net MVC Türkçe Bilgi Paylaşım Platformu</p> <p><a href=" TASARIM</a> </p> <p><a href=" MVC ile Tüm Paylaşımlarımızı Bulabileceğiniz Bloğumuz</a> </p> <p><a href=" ile Tüm Paylaşımlarımızı Bulabileceğiniz Bloğumuz</a> </p> <p>vs2010 &.NET 4.0 & ASP.NET MVC 3 & SQL-2008 & EntityFrameWork 4.0 </p> </div> <script type="text/javascript" src="/content/scripts/jquery js"> </script> <script type="text/javascript" src="/content/scripts/global.js"></script> <script type="text/javascript" src="/content/scripts/anket.js" false) </body> </html> Sitenizin performasını aşağıdaki web sitelerinden tespit edebilirsiniz Style Sheet oluşturma Öncelikle style sheet dosyası oluşturulmalıdır. Bu dosyanın ismi site.css şeklide ki oluşturulmalıdır bu dosya mvc nin içinde ~/Content/styles/site.css şeklinde kaydedilmelidir. 89

90 Bu css dosyası layout.cshtml elemanlarını biçimlendirmek için kullanılmaktadır. İleride sitemiz için gerekli bir modules.css adında bir bi stil dosyası oluşturulacaktır bu css dosyası da linklerle ulaştığımız örneğin anket bilgilendirme sayfası gibi veya bilgilendirme,hata mesajları gibi sayfaların veya divlerin still özelliklerini tutmaktadır. Site.css dosyasının içeriği aşağıdaki gibi yapılmalıdır. body margin: 0; padding: 0; background: #FFFFFF url(../../content/images/centerstage/img01.gif) repeat-x; font-family: Georgia, "Times New Roman", Times, serif; font-size: 13px; color: #666666; h1, h2, h3 margin: 0; font-weight: normal; color: #3F586B; h1 font-size: 197%; h2 font-size: 167%; p, ol, ul line-height: 170%; p ol ul margin-left: 0; padding-left: 0; list-style-position: inside; margin-left: 0; padding-left: 0; list-style: none; #menu width: 600px; float: right; padding-top: 0; 90

91 #menu ul margin: 0; padding: 10px 0 0 0; list-style: none; line-height: normal; text-align: center; #menu li display: inline; margin: 0; padding: 0; #menu a padding: 0 15px; text-decoration: none; font-size: 136%; font-weight: bold; color: white; #menu a:hover text-decoration: underline; #footer height: 130px; padding: 5px ; margin : 0px; background: #FFFFFF url(../../content/images/centerstage/img01.gif) repeat-x; border-top: 5px solid #4C747E; Böylecilikle Site.css dosyasını tamamlamış bulunmaktayız. Şimdide Modules.css dosyasını oluşturmaya başlayalım. Bu css dosyasında bilgi mesajlarının görünüm şekillerini oluşrulacaktır. Genel olarak hata mesajını, bilgfi mesajı, uyarı mesajı,tamamlandı gibi bir çok mesajın zaten insanların kafasında tasarlamıştır bizde bu hata mesajlarını oluştururken bunlarının dışına çıkmamalıyız.(şekil-5) 91

92 (şekil-5).info,.success,.warning,.error,.validation border: 1px solid; margin: 10px 0px; padding: 15px 10px 15px 50px; background-repeat: no-repeat; background-position: 10px center;.info color: #00529B; background-color: #BDE5F8; background-image: url('/content/images/info.png');.success color: #4F8A10; background-color: #DFF2BF; background-image: url('/content/images/success.png');.warning color: #9F6000; background-color: #FEEFB3; background-image: url('/content/images/warning.png');.error color: #D8000C; background-color: #FFBABA; background-image: url('/content/images/error.png');.validation color: #D63301; background-color: #FFCCBA; background-image: url('/content/images/validation.png'); Özet Kitabımızın ikinci bölümünde temel olarak kullanıcı arayüz tasarımının nasıl olcağına karar verildi. Daha sonra Asp.Net MVC framework ile birlikte photoshop veya yardımcı programlar da hazırlanmış olan sitemiz oluşturmaya başlandı. Son olarak ise tek bir dosyadan düzenlenebilen sitemizin grafiklerini ve elemanları html ve css kullanarak projemize açılış sayfasını oluşturuldu. Diğer bölümlerde ise ara ara view katmanı anlatılacak 92

93 olsa view katmanını tasarlamak kolay olduğu için Models ve Controller ı katmanları üzerinde durulacaktır. 93

94 5 Üyelik Sisteminin Oluşturulması 5.1 Giriş Üye giriş ve yetkilendirme menülerinin oluşturulması bir yazılım projesinde kolay bir bölüm değildir. Bunun nedeni ise kullanıcı hesabı ve yetki alanlarının kullanıcıların isteği doğrultusunda güncellenebilen, silinebilen, eklenebilen ön arayüzlerin oluşturulmasının zor olmasıdır. Yazılım projelerinde bu kısım en kritik yerlerden biri sayılabilir. Projemizde oluşturduğumuz üyelik sistemi, projemize buradan ekleyeceğimiz tüm modüllerin kullanıcıları ve yetki alanları yönetici tarafından CRUD(Create, Read, Update, Delete) olmalıdır. Kitabımızın ilerleyen konularında eklenecek tüm modüller(forum, E- ticaret, Haberler, Anketler gibi) oluşturduğumuz üyelik sistemine bağlı olacaktır. Bu kısımda sadece üyelik modülü değil Asp.net mvc yazılım mimarisiyle kullanıcı modülü nasıl tasarlanır onu öğrenceğiz. Asp.net 2.0 ile birlikte built-in(yapıya dahil) olarak gelen membership ve profiling Asp.net mvc sintax ında bu işin nasıl uygulandığını göreceğiz. Fonksiyonlar Create User Delete User FindUserBy FindUserByName GeneratePassword GetAllUsers GetNumberOfUsersOnline GetUser GetUserNameBy UpdateUser ValidateUser Üyelik Siteminde Kullanılan Fonksiyonlar Açıklama Yeni bir kullanıcı hesabı oluşturur Kullanıcı siler Aranan kullanıcıyı mail adresinden bulur Aranan kullanıcıyı isminden bulur Belirlenmiş uzunlukta, sadece sayılardan oluşan, yeni bir şifre üretir. Tüm giriş yapmış kullanıcıları düzenler ve sıralar Kaç kullanıcının online olduğunu gösterir. Kullanıcıları isme göre getirir. Kullanıcı isimlerini verdikleri maile göre düzenler. Kullanıcıyı güğncelleştirir. Kullanıcıyı denetler. Özellikler Comment CreationDate Açıklama Yöneticinin yazdığı bir yorumu, kullanıcıyla ilişkilendirebilme Kullanıcının kayıt olma tarihi 94

95 IsApproved IsLockedOut IsOnline LastActivityDate LastLockOutDate LastLoginDate LastPasswordChangedDate PasswordQuestion ProviderName ProviderUserKey UserName Kullanıcıya ait mail adresi Üyeliğin tamamlandığını gösterme Kullanıcının kaç hatalı giriş sonrasında erişime engelleneceğini belirleme Kaç kullanıcının online olduğunu gösterme Kullanıcının sisteme kayıt olduğu tarihi gösterme Kullanıcının sisteme girmesi ne zaman engellendiğini gösterme Kullanıcının en son giriş yaptığı tarihi gösterme En son şifre değiştirme tarihini gösterme Kullanıcıya şifresini unuttuğunda sorulacak soru Sağlayıcının adı Sağlayıcının anahtar bilgileri Kullanıcı adi Fonksiyonlar ChangePassword ChangePassword QuestionAndAnswer GetPassword ResetPassword UnlockUser Açıklama Kullanıcı şifresini değiştirir Şifresini unutan kullanıcıya sorulan soruyu ve cevabı değiştirir Geçerli şifreyi getirir??? Kullanıcı için yeni bir şifre oluşturur Daha önceden sistem dışı bırakılan kullanıcının yasağını kaldırır Bu konularla daha detaylı bilgi için MSDN aracılığıyla ile ilgili makalelerde bilgi edinebilirsiniz Membership Class: MembershipUser Class: Şimdi kitabımızda karşımıza sık sık çıkacak olan kodlardan birkaç örnek yapalım ve bu örnekte tipik bir Asp.net mvc controller ile exception (harici durum) oluşması halindeki durumu inceleyelim. Örnek-1 try //kullanıcı hesabı oluşturma MembershipUser newuser = Membership.CreateUser( "Ali3", "Karayel", "infoxx@karayeltasarim.com" ); ViewBag.Mesaj = "Hesabınız oluşturulmuştur"; return View(); 95

96 catch (MembershipCreateUserException exception) string mesaj = "Kullanıcı Hesabı Oluşturulamadı "; switch (exception.statuscode) case MembershipCreateStatus.Duplicate mesaj += "Bu Kullanımda"; break; case MembershipCreateStatus.DuplicateUserName: mesaj += "Kullanıcı Adı Yanlış"; break; case MembershipCreateStatus.Invalid mesaj += " Yanlış."; break; case MembershipCreateStatus.InvalidPassword: mesaj += " Parola yanlış."; break; default: mesaj += exception.message; break; ViewBag.Mesaj = mesaj; return View(); Örnek-2 Sistemdeki kayıtlı bir kullanıcının bilgilerinine ulaşmamız gerekirse öncelikle kayıtlı veriye ulaşıp, ardından gerekli alanları değiştirebiliriz. MembershipUser user = Membership.GetUser("Ali"); if (DateTime.Now.Subtract(user.LastActivityDate).TotalHours < 2) user.comment = "Forma editör yetkisi verilebilir!"; Membership.UpdateUser(user); ViewBag.mesaj = user.comment.tostring(); else ViewBag.mesaj = "Forma editör yetkisi verilemez"; Örnek-3 Asp.net mvc ile yetkilendirme işlemi oldukça kolaylaşmıştır. Tek bir satır kod ile controller2 ımızı kısıtlayabilmetkteyiz. Bu kod sayesinde user olmayan hiç kimse bu controller ın içereiğini göremez. [Authorize(Roles="User")] 96

97 Projemizin kullanıcı modülünde yönetici(admin) olarak uygulanması düşünülen maddeler aşağıdaki gibidir. Kayıtlı kıllanııları, kullanıcı adı ve sistemine göre arama işlemleri Bazı kullanıcı bilgilerini tablo aracılığıyla gösterimi; Örneğin kullanıcı en son ne zaman giriş yapmış aktif kullanıcı mı değil mi gibi soruların hepsini Kullanıcı modülünün içinde yer alan yönetici(admin) tarafından deytaylandırabilme işlemleri Projemizin tüm yetkili ayarları wn-config dosyası içerisinden yapılmaktadır. Daha doğrusu sitenin kullandığı veri tababınının belirlendiği, bağlantılar gösterildiği gibi daha bir çok önemli kodlar bu web config dosyası içerisinde tutulmaktadır. Web.config dosyasında <membership> sisteminin tanımlanması ile ilgili özel konfigürasyonların yapıldığı yerdir. Bir web.configte yer alan member sistemi öneği; Örnek-4 <membership> <providers> <clear /> <add name="aspnetsqlmembershipprovider" type="system.web.security.sqlmembershipprovider" connectionstringname="karayelwebtasarimconnectionstring" enablepasswordretrieval="false" enablepasswordreset="true" requiresquestionandanswer="false" requiresunique ="true" maxinvalidpasswordattempts="5" minrequiredpasswordlength="6" minrequirednonalphanumericcharacters="0" passwordattemptwindow="10" applicationname="/" /> </providers> </membership> 97

98 5.2 Membership Provider Hakkında Örnek -4 te gösterilen veriler default olarak gelen verilerdir. Aşşağıda ki tablo aracılığıyla daha fazla özelleştirip kendi prjemize uyarlaya biliriz Özellik Açıklama applicationname connectionstringname description enablepasswordreset enablepasswordretrieval maxinvalidpasswordattempts minrequirednonalphanumeri ccharacters minrequiredpasswordlength Name passwordattemptwindow Web uygulamasının adı connection string adı Servis sağlayıcı için açıklama Şifre yenileme özelliğini gösterme, yeni bir şifre üretme Kullanıcının unuttuğu şifreyi geri alabilmesi En fazla hatalı giriş denemesi. Eğer kullanıcı belirlenen giriş sayısından daha fazla hatalı giriş denemesi yaparsa, kullanıcının sisteme erişimi belirli bir süre engellenir. Şifrenin sahip olması gereken minimum alfanumerik karakter sayısı Şifrenin sahip olması gereken mininmum uzaklık Üyelik Sistemi(Membership) Adı Hatalı giriş denemeleri sonucu beklenecek süre Özellik passwordformat passwordstrengthregular Expression requiresquestionandanswer requiresunique Açıklama Şifrenin hangi formatta saklanacağı Yazılan şifre doğrulanması için karşılaştırılır. Kullanıcı şifresini yenilerken kişisel bir sorusu ve cevabı olması(gizli Soru) Aynı mail adresi ile birden fazla üyelik alabilme Eğer kullanıcı parolasını unutmuş ise parolasını resetleyip tahmin edildiği üzere kullanıcının ine göderebiliriz. Fakat ciddi bir e-ticaret uygulamasın da kullanıcının kredi kartı numarası başta olmak üzere vatandaşlık numarası gibi bir çok kişisel bilgilerini kaydederken, kullanıcı parolasını hassing kodlamasıyla karmaşıklaştırıp bu bilgiyi SSL ( Secure Sockets Layer ) protokolü, internet üzerinden şifrelenmiş güvenli veri iletişimi sağlamış oluruz. Not: Kullanıcı parolası kesinlikle text olarak kaydedilmemelidir. Ecrypt ve decrypt gibi küç işlemler parolaların güvenliğini arttırdığı kesindir. Web geliştiriciler sitelerinde kesinlikle bu işlemi uygulamalıdırlar. 98

99 5.3 Membershiple Provider Kullanmak Üyelik sistemi Asp.net 2.0 ile birlikte kullanıma hazır bir şekilde gelmiştir. Ancak hazır bir şekilde gelmesi biz yazılım geliştiriciler için iyi değildir. Çünkü tasarım veri yapısı biz görmeden oluşturulmaktadır. Ancak orta ölçekli uygulamalar için bu sistem oldukça kolaylık sağlamıştır. Aşağıdaki tabloda ( SqlMembershipProvider sınıf ve depolama bilgileri ve diğer kullanıcı bilgileri yer almaktadır. Asp.net mvc de otamatik olarak üyelik sistemi oluşturulurken beraberinde sadece sınıfları fonksiyonları ve özellikleri oluşturmaz. Bu verilerin depolana bilmesi için yukarıdaki gerekli olan tablolarıda oluşturur. Şimdi biz bu tablolar ve sınıflar nasıl otamatik olarak nasıl oluşur onu öğrenelim. Biz yazılımcılara ready to use şeklinde hazırlanmış olan bu yapıyı kullanacağımız bir menü aracılığıyla veritabanında bütün kullanıcı yönetimi ile ilgili tablo ve gerekli(t-sql1) kodların oluşmasını sağlar. Üyelik sisteminin otamatik olarak oluşturulması aşağıdaki gibidir. Bu makalemizde asp.net mvc ile bağlantı kurduğumuz sql server 2008 e asp.net 2.0 ile birlikte gelen membership auntication kısmını öğreneceğiz. Ancak bilgisayarınızda sql server 2008 kurulu olmalıdır. Asp.net mvc aspnet_regsql.exe çalıştırarak hazır membership tabloları sql server 2008 e nasıl eklenir onu öğreneceğiz. 99

100 1. Öncelikle Başlat/Tümprogramlar/Visual studio 2010 klasörüne tıklıyoruz daha sonra bu klasörün içinden Visual Stuio Tools tıklıyoruz ve altında açılan exeler arasından Visual Studio Command tıklıyoruz Karşımıza gelen komut penceresine şekil 1 deki gibi C:\ Program Files\Microsoft Visual Studio 10.0\VC>aspnet_regsql.exe yazıp enter diyoruz Şekil 1 2. Daha sonra karşımıza Asp.Net Sql Server Setup Wizard penceresi gelmelidir. Bu pencere next diyoruz. Sonraki gelen pencerede şekil-2 teki gibi configure sql server for applications services seçili olmasına dikkat ederek next diyoruz Şekil 2 3. Daha sonra gelen pencerede Sql server authentication seçiyoruz ve aşağıdaki kutucukları kendi sql bilgilerimize göre doldurup seçmek istediğimiz database seçerek next diyoruz 100

101 ve sonraki gelen pencerede ise finish diyerek ekleme işlemini tamamlamış oluyoruz pencerede şekil-3teki gibi configure sql server for applications services seçili olmasına dikkat ederek next diyoruz. Şekil 3 Şekil 3 4. Son olarak ise sql server 2008 programını açıp şekil-4 teki gibi değişiklikleri görüyoruz. Şekil 4 101

102 5.4 Yetkilendirme Ayarları Yetkilenedirme yönetimi bulunmayan bir üyelik sistemi hiçbir zaman düşünülemez. Yetkilendirmeler sadece bir kullanıcıya özel olmamalıdır bir grub kullanıcıya özel olmalıdır. Bu ayarlar doğrultusunda yetkilendirilmiş site kullanıcısı ile ilgili modüllerde yetkisi kadar Crud(Create, Read, Update, Delete) işlemlerini gerçekleştirebilmelidir. Örneklendirmek gerekirse; Administrator yetkisi ile yetkilendirilmiş bir kullanıcı buna ek olarak editor yetkiside verilebilmektedir. Bu da demek oluyorki bir kullanıcı birden fazla role(yetki) sahibi olabilmektedir. Eğer sitemizde veya uygulamamızda yetkilendirme sistemine ihtiyacınız yoksa bu sistem yazılımınıza dahil edilmemelidir. Çünkü yetkilendirme sistemi bulunan yazılımlar daha hızdan kaybetmektedir. Bunun sebebi ise yetkilendirme için veri tabanında çalışan sorgular ve bu sorguların oluşturduğu network trafiğinin web server a yansımasıdır. <rolemanager enabled="true"> <providers> <clear /> <add connectionstringname="karayelwebtasarimconnectionstring" applicationname="/" name="aspnetsqlroleprovider" type="system.web.security.sqlroleprovider" /> <add applicationname="/" name="aspnetwindowstokenroleprovider" type="system.web.security.windowstokenroleprovider" /> </providers> </rolemanager> Yukarıda ki kod yetkilendirme (role) ile ilgili bazı ayarları değiştirebilmemizi sağlamaktadır. System.Web.Security.Roles kütüphanesi yetkilendirmede tüm ayarları dinamik olarak değiştirebilmemizi sağlamaktadır. Bu konuda önemli olan fonksiyonşar aşağıdaki gibidir. Fonksiyon AddUserToRole, AddUserToRoles, AddUsersToRole, AddUsersToRoles CreateRole DeleteCookie DeleteRole FindUsersInRole GetAllRoles GetRolesForUser GetUsersInRole IsUserInRole Açıklama Bir yada daha fazla kullanıcıya görev(rol) ekleme Özel bir kullanıcıya görev(rol) verme Role hakkında yerel bilgi tutan cookie leri silme Varolan bir rolü siler Kullanıcının sahip olduğu role göre bulunması Tüm rollleri bir dizide sıralar Kullanıcıya ait olan tüm rolleri sıralar Özel bir roldeki kullnıcı isimlerini sıralar Kullanıcın bir rolde olup olmadığını gösterir 102

103 RemoveUserFromRole, RemoveUserFromRoles, RemoveUsersFromRole, RemoveUsersFromRoles RoleExists Bir yada daha fazla kullanıcıdan rol silme Daha önceden var olan rolleri gösterme Daha detaylı bilgi için XNSDN ye başvurabilirsiniz Üyelik siteminin Database şema diagramı aşağıdaki gibidir. Controller içindeki action ların yetkilendirilmesi Actionları yetkilendirilmesi asp.net Mvc de aşağıdaki gibi üç farklı maddede toplanmıştır. Bsiz projemizde ikinci maddeyi kullanacağız. Asp.net mvc ile hazırlanan projemizde web.config dosyasından direk olarak yetkilendirilme yapılabilmektedir. <location path="kullanici/kullanicidüzenle"> <system.web> <authorization> <allow roles="admin"/> 103

104 <deny users="*" /> </authorization> </system.web> <location> Dinamik olarak programda değiştirebileceğimiz tek satırlık bir kod bulunmaktadır. [Authorize(Roles="User")] Public ActionResult kullanici() return View(); Son olarak view kısmında da yetkili kontrolü dinamik olarak <button type= submit id= delete-user-button >Delete</button> 5.5 Kullanıcı bilgisi için profil kullanma Asp.net mvc profile ile kullanıcı bilgilerini, Asp.net yapısıyla birlikte gelen Üyelik mekanizmasını özelleştirip, istenilen kullanıcı bilgilerini bu üyelik mekanizmasına dinamik olarak eklememiz gerekmektir. Bu ayarlamaları web.onfig aracılığıyla yapılmaktadır. <system.web> <profile> <properties> </profile> </system.web> <add name="hakkımda" type= String /> <add name="doğum Tarihi" type= DateTime /> </properties> Üyelik mekanizmasının en güzel özelliği ne zaman ki projemizi çalıştırdığımızda eklediğimiz tüm özel konfigürasyonlar dinamik olarak oluşabilmesi ve bu oluşan 104

105 alanlara(veritiplerine) System.Web.Profile.ProfileBase(Profile Common) aracılığıyla ulaşabilmemize olanak sağlamasıdır. Buna örnek olarak da küçük bir kod parçacığı oluşturalım. public ActionResult ChangeProfileInformation( string Temaismi, DateTime? DogumTarihi) ProfileBase profilebase = HttpContext.Profile as ProfileBase; if (!String.IsNullOrEmpty(Temaismi)) profilebase.setpropertyvalue("favoritet", Temaismi); if (DogumTarihi!= null) profilebase.setpropertyvalue("doğumtarihi",dogumtarihi); ViewBag.favoriname = profilebase.getpropertyvalue("favoritetheme "); ViewBag.dogumTarihi=profileBase.GetPropertyValue("BirthDate"); return View(); Yada üyelik sistemine eklenen bu dinamik nesnelere default değer verilebilmektedir. 1. Grupsuz default veriler <add name=" Hakkımda " type="string" defaultvalue=" Hazırlanıyor "/> 2. Grupsuz default veriler <system.web> </system.web> <profile> <properties> <add name="hakkımda" type="string" /> <add name="birthdate" type="datetime" /> <group name="address"> <add name="street" type="string" /> <add name="city" type="string" /> </group> </properties> </profile> <!-- other settings --> 5.6 Anonim Kullanıcılar Anonim kullanıcıları kısaca açıklamak gerekirse siteye giriş yapmamış ama sitenin içinde dolaşan kullanıcılar olarak tanımlandırılabilir. Anonim kullanıcıların sitede rahatlıkla doloşabilmesi için bir Id ye sahip olması gerekmektedir. Asp.net mvc üyelik sistemi bize 105

106 siteye giriş yapmamış olan bu anonim kullanıcıların her biri için farklı Id tutmaktadır. Ancak bu Id ler zaman içerisinde veritabanında büyük yer kaplamaktadır. Sonuc böyle oluncada veri tabanını belirli aralıklarla temizlemek gerekmektedir. <anonymousidentification enabled="true"/> <add name="temaseç"type="string" defaultvalue="centerstage" allowanonymous="true" /> 5.7 MVC Framework ile Kullanıcı Modülü Microsoft Mvc framework (built-in) yapıya dahil bir güvenlik sistemine sahiptir. Yeni oluşturduğumuz herhangi bir projede bu güvenlik sisteme dail edilebilir. Kitabımızda oluşturacğımız projede ekleyeceğimiz kullanıcı modülü için bir adet kullanicicontroller eklenir. Daha sonra bu kullanicicontroller bağlı bir view eklenir bu Microsoft Mvc tarafından otomatik olarak ilişkilendirilir. Bu demek oluyor ki her controller ile ilgili view kısmı mvc framework sayesinde otamatik olarak eşleştirilir. Bu projemizde kullanıcı yönetimi oluşturmak oldukça kolay önclikle kullanışlı arayüzler oluşturmamız gerekmektedir. Analiz Tasarım bölümünde bizim güvenlik modülümüzü nasıl olcağına karar vereceğiz. Aslında tam olarak controlller ımıza, view ımıza tabolarıza tasarımlarını oluşturacağız. Bu bölümün sonuna geldiğimiz de kullanıcı yönetim modülünü oluşturmuş olacağız. Kullanıcı yönetim modülünü, uygulama yaparak oluşturacağımızdan bu modülü tam anlamıyla kavramış olacaksınız. Uygulama Özellikleri Kitabımızda gelinen bu noktaya kadar membership(üyelik sistemi) ve profile servisinin genel özellikleri inceledik. Şimdi incelediğimiz bu özellikleri Karayel Tasarım projemizde uygulamaya başlayalım Yönetici kullanıcılar gerektiğinde yeni kullanıcı oluşturmalı ve oluşturduğu bu kullanıcıları güncelleyebilmelidir. Yönetici tanımlı kullanıcılar diğer kullanıcılara(editör) yetkilerini genişletip kısıtlayabilmelidir. İleride eklenebilecek anket, bilgilendirme, e-ticaret gibi modüller için kullanıcı modülleri için genişletileblir olmalıdıri. Sadece site yöneticisinin değiştirmesini istediğimiz alanları yönetici giriş yaptıktan sonra gösterilmelidir. Örneğin sadece yöneticilerin görmesini istediğimiz menüler. 106

107 5.8 Model Sınıflarının Oluşturulması Öncelikle Asp.Net Mvc membership modülünü SAYFANO daki gibi oluşturulması gerekmektedir. Oluşturduğumuz membership modülü sayesinde zahmetsizce veritabanımızda tablolar ve alanlar oluşmuş olacaktır. Ancak bu alanlar ve tablolar yapacak olduğumuz Karayel Tasarım projesi için yeterli değildir. Özel olarak ekleyeceğimiz tablolar ve alanlar için iki sınıf oluşturulmalı ve gereken özelleştirilme ayarlarını konfigure edilecektir. A-Kullanıcı Bilgi Sınıfı Yapacak olduğumuz sistemimizde her kullanıcı giriş yaptığında kendi hesaplarını kontrol edebilmesi için tek tek değişkenleri tanımlamak karmaşık olacaktır. Bunun yerine bir sınıf oluşturmak ve kullanıcı bilgilerini bu sınıf içerisinde yönetmek bizi karmaşıklıktan kurtaracaktır. B-Profil Bilgi Sınıfı İhtiyacımız olan diğer bir sınıf ise profil sınıfıdır. Kullanıcı bilgi sınıfından en önemli farkı ise profil bilgisi sınıfından sisteme kayıtlı kullanıcıların tekrar alıp düzenlemek web.config ten SAYFANO daki gibi eklediğimiz alanlar için kullanacağız. Bu alanlar web.config dosyasının <profile> etiketi içerisindeki <properties>e tiketinin özellikleriyle ile birebir ilişkilidir. Arayüz Tasarımı(views desing) Kullanıcı modülünde bir çok hazırlanması gereken aryüz(view) vardır. Hazırlayacak olduğumuz bu arayüzlerinin bazısını son kullanıcılar göreceği arayüzler bazılarını ise yönetici kullanıcıların göreceği arayüzler şeklinde olacaktır. Birde tüm kullanıcıların gösterileceği viewlar vardır. Aşağıda ki listede tüm kullanıcılar için gerekli olan viewların elemanları sıralanmıştır. 1-) Giriş butonu tüm kullanıcılar için her sayfanın sağında olması gerekmektedir. Kullanıı giriş yaptıktan sonra sağdaki giriş yazısı yerine kullanıcının kayıtlı olduğu kullanıcı adı getirilecektir. Buna ek olarak da çıkış, profil bilgileri düzenle, parola değiştir getirilecektir. 2-) Kullanıcı kayıt esnasında sisteme ilk defa kayıt olacağından profil bilgilerini de doldurup öyle kayıt olmalıdır. Grup KisiselBilgiler Adi Soyadi Cinsiyet DogumTarihi Grup IletisimBilgileri TelefonNo String Sehir Ilce CepTelefonNo Ulke DahiliNo Adres Grup FaturaBilgileri Type String String String String Type String String String String String String Type 107

108 FaturaAdresAdi FaturaAdi FaturaSoyadi FaturaAdres FaturaUlke FaturaSehir FaturaIlce FaturaPostaKodu FaturaTelefonNo FaturaCepTelefonNo FaturaFaturaTipi FaturaTCKimlikNo FaturaFirmaAdi FaturaVergiDairesi FaturaVergiNo String String String String String String String String String String String String String String String 3-) Parola unuttum kısmında kullanıcı unutmuş olduğu parolasını, gizli soru gibi bazı işlemlerden geçirip tekrardan yeni bir parolaya sahip olabilmesi gerekmektedir. Burada unutulmaması gereken temel unsur, kullanıcı yada yönetici kayıtlı parolasını veritabanından değiştiremez. Çünkü kayıtlı parola verileri güvenlik açısından hash edilmiştir. Text olarak kayıtlı değildir. 4-) Kullanıcı Profil Bilgileri sadece kayıtlı kullanıcılar tarafından değiştirilebilecek ve yönetici dahi bu bilgileri değiştiremeyecek. 5-) Yönetici olan kullanıcılar kendi sayfalarına(view) gelince sisteme kayıtlı olan kullanıcıların tüm bilgilerini görebilmeleri gerekmektedir. KullaniciYonet.cshtml (view) aracılığıyla kullanıcıları isimlerine veya adlarına listelendirmeli ve KullaniciDuzenle.cshtml(view) sayfası aracılığıyla da ilgili kullanıcıyı düzenleyebilmelidir. Örneklendirmek gerekirse Kullanıcıyı aktif yada pasif yaparak yeni yetkilendirme atayabilmeli veya yetkisini kısıtlayabilmelidir. Son olarak ta kullanıcı silebilmeli veya onaylayabilmelidir. ParolaDegistir.cshtml Kullanıcının parolasını değiştirdiği view dır KullanıcıDüzenle.cshtml Yönetici olan kullanıcının diğer kullanıcıları sildiği onayladığı view dır. SifremiUnuttum.cshtml Kullanıcının gizli soru gibi sorularına cevabını verdiği view dır Giris.cshtml Kullanıcının ve yöneticinin sisteme girişi yaptığı view dır KullaniciRolYonet.cshtml 108

109 Yönetici olan kullanıcının diğer kulanıcılara yetki verip aldığı view dır. KullaniciYonetimi.cshtml Kullanıcıların en son ne zaman giriş yapmış ve sitede bulunduğu süre zarfı boyunca neler yapmış bütün bunların bilgisini tutar Kayit.cshml Kullanıcıların kayıt olduğu view dır KullaniciProfili.cshtml Kullanıcı kendi bilgilerini görebildiği düzenleyebildiği yöneticinin ise sadece kullanıcı bilgilerini görebildiği view dır Action Fonksiyon Güvenlik Parametre Kayıt(Register) Kayıt gönderimi(register_onpost) --- Kullanıcı bilgisi UserInformation userinformation Şifre değiştirme(change passwort) --- Karakter şifre sıfırlama String resetpasswort Değişen şifre gönderimi(change --- Kullanıcı bilgisi UserInformation userinformation passwort_onpost) Kullanıcı profili(userprofile) --- Kullanıcı profil gönderimi(userprofile_onpost) Hata mesajı al (GetErrorMessage) --- Profil bilgileri ProfileInforamtion profileinformation --- Üyelik oluşturma durumu MembershipCreateStatus membershipcreatestatus Kullanıcı yönet(manageuser) ADMİN Karakte tiparaştır, girişaraştır String searchtype, string searchinput Kullanıcısil(DeleteUser) ADMİN Karakter İd string id Rol yönetimi (ManageRole) ADMİN Rol oluşturma(createrole) ADMİN Karakter yenirol string newrole Rol silme(deleterole) ADMİN Karakter id string id Kullanıcı düzenleme(edituser) ADMİN Karakter id string id Kullanıcı düzenleme gönderme (EditUser_OnPost) ADMİN Karakter id string id, bool approved 109

110 Uygulama Uygulama bölümünde, şimdiye kadar ki öğrendiğimiz temel teorik bilgileri birleştirerek bir uygulama üzerinde yavaş yavaş kod kısmına doğru ilerlemeye başlayacağız. 1. Uygulayacak olduğumuz membership, roles ve profiles ayarlarının projemize uygun halde çevrilmesi 2. Layout(master page) tasarımının yönetici kutusu ve giriş kutusu yerleri 3. Kullanıcı oluşturulması ve profil bilgisinin tanımlanası 4. Kullanıcı şifresi kurtarma menüsü 5. Parola değiştirme ve profil bilgilerini değiştirebilecek sayfa tasarlanması 6. Yönetici sayfalarında roles oluşturma 7. Yönetici sayfasında tüm kullanıcıların görüntülenebilmesi ve onları silebilebilmesi Projede İlk Adım Asp.net mvc nin bize sağlamış olduğu kolaylıklardan yararlanarak projenizi Öncelikle Microsoft Asp.Net MVC framework ün bize sağlamış olduğu mantıksal ayırma yöntemiyle oluşturacağımız KullaniciControlle.cs ve buna karşılık gelen Kullanici view ının projemize ekleyeceğiz. Ancak bu işleme başlamadan önce web.config dosyası aşağıdaki gibi konfigure edilmelidir. <forms defaulturl="/" loginurl="/user/login"/> </authentication> <membership> <providers> 110

111 <clear/> <add name="aspnetsqlmembershipprovider" type="system.web.security.sqlmembershipprovider, System.Web, Version= , Culture=neutral," PublicKeyToken="b03f5f7f11d50a3a" connectionstringname="thebeerhouseconnectionstring" enablepasswordretrieval="false" enablepasswordreset="true" requiresquestionandanswer="false" applicationname="thebeerhouse" requiresunique ="false" passwordformat="hashed" maxinvalidpasswordattempts="5" minrequiredpasswordlength="5" minrequirednonalphanumericcharacters="0" passwordattemptwindow="10" passwordstrengthregularexpression="" /> </providers> </membership> <rolemanager enabled="true" defaultprovider="aspnetsqlroleprovider"> <providers> <clear/> <add connectionstringname="thebeerhouseconnectionstring" applicationname="thebeerhouse" name="aspnetsqlroleprovider" type="system.web.security.sqlroleprovider, System.Web, Version= , Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a" /> </providers> </rolemanager> Profile nesnesi için aşağıda default değerleri bulunan web.config kodu yapıştırılır. <anonymousidentification enabled="true" /> <profile> <providers> <clear /> <add name="aspnetsqlprofileprovider" type="system.web.profile.sqlprofileprovider, System.Web, Version= , Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a" connectionstringname="karayelwebtasarimconnectionstring" applicationname="/" /> </providers> <properties> <add name="abone" type="string" /> <add name="dil" type="string" /> 111

112 <add name="sepet" type="karayelwebtasarim.models.sepet" serializeas="binary" allowanonymous="true" /> <group name="kisiselbilgiler"> <add name="adi" type="string" /> <add name="soyadi" type="string" /> <add name="cinsiyet" type="string" /> <add name="dogumtarihi" type="string" /> </group> <group name="iletisimbilgileri"> <add name="telefonno" type="string" /> <add name="sehir" type="string" /> <add name="ilce" type="string" /> <add name="ceptelefonno" type="string" /> <add name="ulke" type="string" /> <add name="dahilino" type="string" /> <add name="adres" type="string" /> </group> <group name="faturabilgileri"> <add name="faturaadresadi" type="string" /> <add name="faturaadi" type="string" /> <add name="faturasoyadi" type="string" /> <add name="faturaadres" type="string" /> <add name="faturaulke" type="string" /> <add name="faturasehir" type="string" /> <add name="faturailce" type="string" /> <add name="faturapostakodu" type="string" /> <add name="faturatelefonno" type="string" /> <add name="faturaceptelefonno" type="string" /> <add name="faturafaturatipi" type="string" /> <add name="faturatckimlikno" type="string" /> <add name="faturafirmaadi" type="string" /> <add name="faturavergidairesi" type="string" /> <add name="faturavergino" type="string" /> </group> </properties> </profile> Veri Tabanı Konfügurasyonu Veri tabanı konfigürasyonu yapılabilmesi için öncelikle bilgisayarınızda sql server 2008 yada sql server 2008R2 kurulu olması gerekmektedir. Bu kurulu olan MS SQL üzerinde yeni bir database açılır Bu datababe in adınada KARAYEL TASARIM diyelim. Database in oluşturulmasının ardından uygulamamızda her önemli ayarı yaparken nasıl ki web.config dosyasına yazıyorsak veri tabanı ayarlarınıda web confiğe yazmamız gerekmektedir. Web.config connectionstring i aşağıdaki gibidir. <connectionstrings> 112

113 <add name="karayelwebtasarimconnectionstring" connectionstring="data Source=QWERT- QWERT\MSSQLSERVER2008; Initial Catalog=ETicaret2;User ID=SA;Password=SAPASS" providername="system.data.sqlclient" /> <add name="karayeltasarimentities" connectionstring="metadata=res://*/models.karayeltasarim.csdl res://*/models.karayelta sarim.ssdl res://*/models.karayeltasarim.msl;provider=system.data.sqlclient;provider connection string="data Source=QWERT-QWERT\MSSQLSERVER2008;Initial Catalog=ETicaret2;User ID=SA;Password=SAPASS;MultipleActiveResultSets=True"" providername="system.data.entityclient" /> </connectionstrings> Son olarak bu açtığımız veri tabanında kendi kurduğumuz veri tabanına aspnet_regsql.exe komutu aracılığıyla ilgili veri tabanına asp.net membership tabloları otamatik olarak oluşturulur Model Dosyasının Oluşturulması Projemizde Asp.net in membership ve profile özelleiklerini kullanmamıza rağmen, bazı özelleştirmelerimiz için kendi sınıflarımızı oluşturmamız gereklidir. Oluşturduğumuz bu sınıflar bize güvenlik açısından yardımcı olacaktır. A.Kullanıcı Bilgisi Sınıfı Model sınıfında ilk kullanacağımız sınıfın ismi Kullanıcı Bilgisi sınıfıdır. Kullanıcı Bilgisi oluşturmak oldukça kolaydır. Models klasörünün üzerine sağ tıklayıp Add /New Item /Class seçip ismini KullaniciBilgisi olarak değiştirip aşağıdaki kod parçacığı şeklinde düzenlemelidir public class KullaniciBilgisi public string KullaniciAdi get; set; //KullanıcıAdı public string Parola get; set; //Sifre public string Adi get; set; //Adi public string Cinsiyet get; set; public string DogumTarihi get; set; //DoğumTarihi public int Gun get; set; public int Ay get; set; public int Yil get; set; public string Soyadi get; set; //Soyadi public string TekrarParola get; set; //SifreOnay public string ParolaDegistir get; set; //SifreDegistir 113

114 public string get; set; //Eposta public string GizliSoru get; set; //GizliSoru public string GizliCevap get; set; //Cevap public string GeriDonusURL get; set; //GeriDonusURL public string Id get; set; //Id public string[] Roles get; set; //Roller B.Profil Bilgisi Model sınıfında bulunması gereken diğer bir sınıf ise Profil bilgisi sınıfıdır. Sınıfların içindeki kodları çok daha iyi anlamanız için küçük kodlar küçük küçük bölümlere ayrılmıştır. Profil bilgisi sınıfınıda yine kullanıcı bilgisi sınıfını eklediğimiz gibi eklenmelidir. public class ProfilBilgisi public string Adi get; set; //Adı public string Soyadi get; set; //Soyadı public string Mail get; set; //Soyadı public string Cinsiyet get; set; //Cinsiyeti public string DogumTarihi get; set; //DoğumTarihi public string TelefonNo get; set; //Meslek public string Sehir get; set; //Dil public string Ulke get; set; //Ülke public string Ilce get; set; //Web Sitesi public string CepTelefonNo get; set; //Abone Tİpi public string DahiliNo get; set; //Cadde public string Adres get; set; public string FaturaAdresAdi get; set; public string FaturaAdi get; set; public string FaturaSoyadi get; set; public string FaturaAdres get; set; public string FaturaUlke get; set; public string FaturaSehir get; set; public string FaturaIlce get; set; public string FaturaPostaKodu get; set; public string FaturaTelefonNo get; set; public string FaturaCepTelefonNo get; set; public string FaturaFaturaTipi get; set; public string FaturaTCKimlikNo get; set; public string FaturaFirmaAdi get; set; public string FaturaVergiDairesi get; set; public string FaturaVergiNo get; set; Controller Dosyasının Oluşturulması 114

115 Controller klasörü Asp.net Mvc de Programon açılmasıyla birlikte default olarak oluşmuştur. MVC mimarisinde gelen istekler Controller tarafından işlenir. Her bir controller bir eylem yöntemi olarak da bilinir. Oluşturulan bu controller klasörünün içine bir adet controler eklenmelidir. Aşşağıdaki yollar izlenerek controller eklenmelidir. Öncelikle Controller klasörünün üzerine sağ tuş /Add/Controllertıklayıp elen pencerede controller ımızın isminin verilip Add ye tıklanmalıdır. a. Kayit Action Kullanıcı kaydedebilmemiz için öncelikle KullaniciBilgisi.cs controller ın içine Kayit adında bir tane action metot oluşturulmalıdır. Kayıt işlemi gerçekleştirebilecek kodun bir kısmı aşağıda ki gibidir. public ActionResult Kayit() / ViewBag.SayfaBaslik = "Yeni Kayıt"; return View(); Diğer eklenecek olan metodumuz ise kayit action metodumuzun overload edilmiş halidir. Overload edilmiş kayit action metodumuzun diğer kayit action metodumuzdan tek farkı kullanıcının kayıt esnasında formdan göndermiş olduğu verileri post edebilmesi 115

116 amacıyla yazılmıştır. Overload edilmiş action metodumuzun üzerine yazılmış olan [AcceptVerbs("POST")] sınıfı ise altındaki metodun sadece formdan post edilen veriler için kullanılacağının göstergesidir. [AcceptVerbs("POST")] public ActionResult Kayit(KullaniciBilgisi kullanicibilgisi) //Register(UserInformation userinformation) if (String.IsNullOrEmpty(kullaniciBilgisi.Parola) String.IsNullOrEmpty(kullaniciBilgisi.TekrarParola)) TempData["HataMesaj"] = "Paralolarınız eşleşmiyor."; //TempData["ErrorMessage"] ViewBag.Adi = kullanicibilgisi.adi; ViewBag.Soyadi = kullanicibilgisi.soyadi; ViewBag. = kullanicibilgisi. ; return View("Kayit", kullanicibilgisi); else if (kullanicibilgisi.parola!= kullanicibilgisi.tekrarparola) TempData["HataMesaj"] = "Paralolarınız eşleşmiyor."; //TempData["ErrorMessage"] ViewBag.Adi = kullanicibilgisi.adi; ViewBag.Soyadi = kullanicibilgisi.soyadi; ViewBag. = kullanicibilgisi. ; return View("Kayit", kullanicibilgisi); else if (String.IsNullOrEmpty(kullaniciBilgisi.Adi)) TempData["HataMesaj"] = "Ad alanını boş bırakamazsınız."; //TempData["ErrorMessage"] ViewBag.Adi = kullanicibilgisi.adi; ViewBag.Soyadi = kullanicibilgisi.soyadi; ViewBag. = kullanicibilgisi. ; ViewBag.Parola = kullanicibilgisi.parola; ViewBag.TekrarParola = kullanicibilgisi.tekrarparola; return View("Kayit", kullanicibilgisi); else if (String.IsNullOrEmpty(kullaniciBilgisi.Soyadi)) TempData["HataMesaj"] = "Soyad alanını boş bırakamazsınız."; //TempData["ErrorMessage"] ViewBag.Adi = kullanicibilgisi.adi; ViewBag.Soyadi = kullanicibilgisi.soyadi; 116

117 ViewBag. = kullanicibilgisi. ; ViewBag.Parola = kullanicibilgisi.parola; ViewBag.TekrarParola = kullanicibilgisi.tekrarparola; return View("Kayit", kullanicibilgisi); else if (kullanicibilgisi.parola.length < 6) TempData["HataMesaj"] = "Şifreniz çok kısa 6 karakterden uzun şifre yazın."; //TempData["ErrorMessage"] ViewBag.Adi = kullanicibilgisi.adi; ViewBag.Soyadi = kullanicibilgisi.soyadi; ViewBag. = kullanicibilgisi. ; //ViewBag.Parola = kullanicibilgisi.parola; //ViewBag.TekrarParola = kullanicibilgisi.tekrarparola; return View("Kayit", kullanicibilgisi); else if (String.IsNullOrEmpty(kullaniciBilgisi. )) TempData["HataMesaj"] = "Geçerli bir mail adresi yazın."; //TempData["ErrorMessage"] ViewBag.Adi = kullanicibilgisi.adi; ViewBag.Soyadi = kullanicibilgisi.soyadi; //ViewBag. = kullanicibilgisi. ; ViewBag.Parola = kullanicibilgisi.parola; ViewBag.TekrarParola = kullanicibilgisi.tekrarparola; return View("Kayit", kullanicibilgisi); else if (!Test Regex(kullaniciBilgisi. )) TempData["HataMesaj"] = "Geçerli bir mail adresi yazın."; //TempData["ErrorMessage"] ViewBag.Adi = kullanicibilgisi.adi; ViewBag.Soyadi = kullanicibilgisi.soyadi; //ViewBag. = kullanicibilgisi. ; ViewBag.Parola = kullanicibilgisi.parola; ViewBag.TekrarParola = kullanicibilgisi.tekrarparola; return View("Kayit", kullanicibilgisi); else MembershipCreateStatus membershipcreatestatus = new MembershipCreateStatus(); try kullanicibilgisi.kullaniciadi = kullanicibilgisi. ; 117

118 Membership.CreateUser(kullaniciBilgisi.KullaniciAdi, kullanicibilgisi.parola, kullanicibilgisi. ); if (membershipcreatestatus == MembershipCreateStatus.Success) if (Membership.ValidateUser(kullaniciBilgisi.KullaniciAdi, kullanicibilgisi.parola)) // FormsAuthentication.SetAuthCookie(kullaniciBilgisi.KullaniciAdi, false); if (!String.IsNullOrEmpty(kullaniciBilgisi.GeriDonusURL)) return this.redirect(303, kullanicibilgisi.geridonusurl); else return this.redirect(303, FormsAuthentication.DefaultUrl); else TempData["HataMesaj"] = "Giriş Hatalı! Kullanıcı adı ve parolanızı lütfen kontrol ediniz!"; return View("Kayit", kullanicibilgisi); else TempData["HataMesaj"] = GetirHataMesaji(membershipCreateStatus); return View("Kayit", kullanicibilgisi); catch (Exception exception) membershipcreatestatus = MembershipCreateStatus.InvalidUserName; TempData["HataMesaj"] = GetirHataMesaji(membershipCreateStatus); return View("Kayit", kullanicibilgisi); "); return View("Index", " Anasayfa Overload metot eğer ki işlem sonucu başarılı olmuş ise hangi menüden çağrılmışşa oraya döndürülür. Fakat kullanıcı kaydı başarısız ise ilgili hata mesajıyla son kullanıcıya bildirir. Yardımcı Metot Ekleme Yardımcı metodun mutlaka bağlı olduğu ana bir metot vardır. Bu ana metotla yardımcı metot tam bir ilişki içerisindedir. Bizim kullanacağımız yardımcı metot ise hata bildirim metodudur. Bu metot içerisine yazacağımız kodlar sayesinde kişi sisteme kayıt olurken kayıt 118

119 olmasına yardımcı olan ve kayıt sayfasında giriş yaparken gireceği karakterlerin nasıl olması gerektiğini bildiren bir fonksiyondur. Membership sınıfına ait olaylar sayesinde hataları kolaylıkla bulabiliriz. Bu olaylar aaşağıdaki kodda gösterilmiştir KullaniciControler ında yer alan [NonAction] metodunun faydası projemizi başka bir URL den açmaya çalışsalar bile [NonAction] metot sayesinde engellenmiş olur. Şimdi biz de kayit action metodumuza GetirHataMesaji adında bir yardımcı metot ekleyelim. [NonAction] private string GetirHataMesaji(MembershipCreateStatus membershipcreatestatus) //GetErrorMessage(MembershipCreateStatus membershipcreatestatus) switch (membershipcreatestatus) case MembershipCreateStatus.DuplicateUserName: return "Kullanıcı adı mevcut. Lütfen farklı bir kullanıcı adı giriniz."; giriniz."; case MembershipCreateStatus.Duplicate return "Sistemde bu mail adresi zaten mevcut. Lütfen farklı bir mail adresi case MembershipCreateStatus.InvalidPassword: return "Parola hatalı. Lütfen parolayı tekrar giriniz."; case MembershipCreateStatus.DuplicateProviderUserKey: return "Hata 1."; case MembershipCreateStatus.InvalidProviderUserKey: return "Hata 2."; case MembershipCreateStatus.Invalid return " adresi hatalı. Lütfen kontrol edip tekrar giriniz."; case MembershipCreateStatus.InvalidAnswer: return "Girdiğiniz gizli cevap bilgisi hatalı. Lütfen kontrol edip tekrar giriniz."; case MembershipCreateStatus.InvalidQuestion: return "Girdiniz gizli soru değeri hatalı. Lütfen kontrol edip tekrar giriniz."; case MembershipCreateStatus.InvalidUserName: return "Kullanıcı adı bilgisi hatalı. Lütfen kontrol edip tekrar giriniz."; case MembershipCreateStatus.ProviderError: return "Yetki kontrolü bir hata döndürdü. Sisteme tekrar girmeyi deneyiniz. Problem devam ederse, sistem yöneticileriyle irtibata geçiniz."; case MembershipCreateStatus.UserRejected: return "Yeni kullanıcı kayıt işlemi red edildi. Bilgilerinizi kontrol edip tekrar deneyiniz. Problem devam ederse, sistem yöneticileriyle irtibata geçiniz."; 119

120 default: return "Bilinmeyen bir hata oluştu. Bilgilerinizi kontrol edip tekrar deneyiniz. Problem devam ederse, sistem yöneticileriyle irtibata geçiniz."; b. Şifremi Unuttum Action Şifremiunuttum action ı önceki konularımızda belirtiğimiz üzere sitede kayıtlı olan kullanıcıların başına gelebilecek bir durumdur. Bilindiği üzere kullanıcıların şifreleri veri tabanına hashing işlemi geçirdikten sona kaydolmaktadır. Dolayısıyla veritabanında hashing işlemi görmüş bir şifreyi tekrardan düzeltme gibi bir şansımız yoktur. Durum böyle olunca bu soruna en iyi çözüm; Kullanıcı şifremi Unuttum yazısına tıkladığında o kullanıcını, kullanıcı adı sayesinde gizli sorusu sorulmalı ve kullanıcı gizli sorusuna cevap verirse kayit action çağırıp kullanıcıya yeni bir şifre oluşturtmaktır. Öncelikle Kullanici Controller ın içine SifremiUnuttum adında bi action oluşturalım ve içne aşşğıdaki kodu yapıştıralım. public ActionResult SifremiUnuttum() //Şifremi unuutum ysadece yazı gönderiyor ViewBag.SayfaBaslik = "Şifremi Unuttum"; return View(new KullaniciBilgisi()); Daha sonra bu SifremiUnuttum bilgilerini formdan alabilmek için sifreni unuttum action ını overload ederek aşağıdaki gibi bir tane daha SifremiUnuttum action ı oluşturalım. [AcceptVerbs("POST")] public ActionResult SifremiUnuttum(string kullaniciadi, string gizlisoru) if (!String.IsNullOrEmpty(gizliSoru)) string sifirlasifre = Membership.Provider.ResetPassword(kullaniciAdi, gizlisoru); if (Membership.ValidateUser(kullaniciAdi, sifirlasifre)) FormsAuthentication.SetAuthCookie(kullaniciAdi, false); return RedirectToAction("ParolaDegisitir", new sifirlasifre = sifirlasifre ); else TempData["HataMesaj"] = "Geçirsiz Değerler"; return View(); MembershipUser membershipuser = Membership.GetUser(kullaniciAdi, false); KullaniciBilgisi kullanicibilgisi = new KullaniciBilgisi(); 120

121 if (membershipuser!= null) kullanicibilgisi.gizlisoru = membershipuser.passwordquestion; kullanicibilgisi.kullaniciadi = kullaniciadi; else TempData["HataMesaj"] = "Kullanici adınızı kontrol edip, Lütfen tekrar deneyiniz"; kullanicibilgisi.gizlisoru = String.Empty; ViewBag.SayfaBaslik = "Şifremi Unuttum"; return View(kullaniciBilgisi); c. Parola Değiştir Action Bizim web sitemizde Parola Değiştirme mekanizması da olacaktır. Bu parola değiştirme sistemine siteye kayıtlı olan her kullanıcı sahip olacaktır. Parola değiştirme mekanizmasına sahip olabilmek için öncelike bir tane ParolaDegistir adında action metot oluşturulur ve içine aşağıdaki kodlar yazılır. public ActionResult ParolaDegistir(string sifirlaparola) KullaniciBilgisi kullanicibilgisi = new KullaniciBilgisi(); if (!string.isnullorempty(sifirlaparola)) kullanicibilgisi.parola = sifirlaparola; ViewBag.SayfaBaslik = "Sayfa Değiştir"; return View(kullaniciBilgisi); Daha sonra bunda önceki actionlarda olduğu gibi yine bu metodu aşağıdaki gibi overload ediyoruz. [AcceptVerbs("POST")] public ActionResult ParolaDegistir(KullaniciBilgisi kullanicibilgisi) if (kullanicibilgisi.paroladegistir!= kullanicibilgisi.tekrarparola) TempData["HataMesaj"] = "Girdiğiniz parolalar eşleşmedi, Lütfen tekrar deneyiniz!"; return View(kullaniciBilgisi); try MembershipUser membershipuser = Membership.GetUser(HttpContext.User.Identity.Name, false); if (!Membership.ValidateUser(HttpContext.User.Identity.Name, kullanicibilgisi.parola)) TempData["HataMesaj"] = "Eski Paralonaızı Tekrar Kontrol Edip, Lütfen Tekrar Deneyiniz!!!"; 121

122 return View(kullaniciBilgisi); membershipuser.changepassword(kullanicibilgisi.parola, kullanicibilgisi.paroladegistir); //membershipuser.changepassword(userinformation.password, userinformation.changepassword); TempData["TamamlandiMesaj"] = "Şifreniz başarıyla değiştirildi."; //TempData["SuccessMessage"] ViewBag.SayfaBaslik = "Parola Değiştir"; //ViewData["PageTitle"] return View(kullaniciBilgisi); //return View(userInformation); catch (Exception exception) TempData["HataMesaj"] = "Parola değiştirilirken hata oluştu: " + exception.message; //TempData["ErrorMessage"] return View(kullaniciBilgisi); //return View(userInformation); Kullanıcı bilgisi controller ımızı kullanarak action metodumuzun farklı versiyonlarını nasıl kulllanılacağı öğrendik. İsterseniz ParolaDegistir nasıl gerçekleştiğini kontrol edebilirsiniz. Try catch döngüsü ise parolanın gerçekten değiştirilip değiştirilmediğini kontrol eder. Eğer hiç hata yoksa işlemi başarılı sayar. d. Kullanıcı Profili Action(the userprofile action method) İlk olarak kullanıcı profil action ı oluştururken gerekli web config ayarlamaları yapılmalıdır. Daha sonra Kullanıcı modelinde gerekli olan elemanlar ele alınabilir. Bu kısım da kullanıcı bilgisi action metodu aşağıdaki gibi düzenlenmelidir. [Authorize] public ActionResult KullaniciProfili() //UserProfile() string id = HttpContext.User.Identity.Name.ToString(); ProfileBase profilebase; if (!String.IsNullOrEmpty(id)) profilebase = ProfileBase.Create(id); else profilebase = HttpContext.Profile as ProfileBase; ProfilBilgisi profilbilgisi = new ProfilBilgisi() 122

123 Adi = (profilebase.getpropertyvalue("kisiselbilgiler.adi") == null? "" : profilebase.getpropertyvalue("kisiselbilgiler.adi").tostring()), Soyadi = (profilebase.getpropertyvalue("kisiselbilgiler.soyadi") == null? "" : profilebase.getpropertyvalue("kisiselbilgiler.soyadi").tostring()), Cinsiyet = (profilebase.getpropertyvalue("kisiselbilgiler.cinsiyet") == null? "" : profilebase.getpropertyvalue("kisiselbilgiler.cinsiyet").tostring()), DogumTarihi = (profilebase.getpropertyvalue("kisiselbilgiler.dogumtarihi") == null? "" : profilebase.getpropertyvalue("kisiselbilgiler.dogumtarihi").tostring()), TelefonNo = (profilebase.getpropertyvalue("iletisimbilgileri.telefonno") == null? "" : profilebase.getpropertyvalue("iletisimbilgileri.telefonno").tostring()), DahiliNo = (profilebase.getpropertyvalue("iletisimbilgileri.dahilino") == null? "" : profilebase.getpropertyvalue("iletisimbilgileri.dahilino").tostring()), CepTelefonNo = (profilebase.getpropertyvalue("iletisimbilgileri.ceptelefonno") == null? "" : profilebase.getpropertyvalue("iletisimbilgileri.ceptelefonno").tostring()), Sehir = (profilebase.getpropertyvalue("iletisimbilgileri.sehir") == null? "" : profilebase.getpropertyvalue("iletisimbilgileri.sehir").tostring()), Ulke = (profilebase.getpropertyvalue("iletisimbilgileri.ulke") == null? "" : profilebase.getpropertyvalue("iletisimbilgileri.ulke").tostring()), Ilce = (profilebase.getpropertyvalue("iletisimbilgileri.ilce") == null? "" : profilebase.getpropertyvalue("iletisimbilgileri.ilce").tostring()), Adres = (profilebase.getpropertyvalue("iletisimbilgileri.adres") == null? "" : profilebase.getpropertyvalue("iletisimbilgileri.adres").tostring()), FaturaAdresAdi = (profilebase.getpropertyvalue("faturabilgileri.faturaadresadi") == null? "" : profilebase.getpropertyvalue("faturabilgileri.faturaadresadi").tostring()), FaturaAdi = (profilebase.getpropertyvalue("faturabilgileri.faturaadi") == null? "" : profilebase.getpropertyvalue("faturabilgileri.faturaadi").tostring()), FaturaSoyadi = (profilebase.getpropertyvalue("faturabilgileri.faturasoyadi") == null? "" : profilebase.getpropertyvalue("faturabilgileri.faturasoyadi").tostring()), FaturaAdres = (profilebase.getpropertyvalue("faturabilgileri.faturaadres") == null? "" : profilebase.getpropertyvalue("faturabilgileri.faturaadres").tostring()), FaturaUlke = (profilebase.getpropertyvalue("faturabilgileri.faturaulke") == null? "" : profilebase.getpropertyvalue("faturabilgileri.faturaulke").tostring()), FaturaSehir = (profilebase.getpropertyvalue("faturabilgileri.faturasehir") == null? "" : profilebase.getpropertyvalue("faturabilgileri.faturasehir").tostring()), FaturaIlce = (profilebase.getpropertyvalue("faturabilgileri.faturailce") == null? "" : profilebase.getpropertyvalue("faturabilgileri.faturailce").tostring()), FaturaPostaKodu = (profilebase.getpropertyvalue("faturabilgileri.faturapostakodu") == null? "" : profilebase.getpropertyvalue("faturabilgileri.faturapostakodu").tostring()), FaturaTelefonNo = (profilebase.getpropertyvalue("faturabilgileri.faturatelefonno") == null? "" : profilebase.getpropertyvalue("faturabilgileri.faturatelefonno").tostring()), FaturaCepTelefonNo = (profilebase.getpropertyvalue("faturabilgileri.faturaceptelefonno") == null? "" : profilebase.getpropertyvalue("faturabilgileri.faturaceptelefonno").tostring()), FaturaFaturaTipi = (profilebase.getpropertyvalue("faturabilgileri.faturafaturatipi") == null? "" : profilebase.getpropertyvalue("faturabilgileri.faturafaturatipi").tostring()), 123

124 FaturaTCKimlikNo = (profilebase.getpropertyvalue("faturabilgileri.faturatckimlikno") == null? "" : profilebase.getpropertyvalue("faturabilgileri.faturatckimlikno").tostring()), FaturaFirmaAdi = (profilebase.getpropertyvalue("faturabilgileri.faturafirmaadi") == null? "" : profilebase.getpropertyvalue("faturabilgileri.faturafirmaadi").tostring()), FaturaVergiDairesi = (profilebase.getpropertyvalue("faturabilgileri.faturavergidairesi") == null? "" : profilebase.getpropertyvalue("faturabilgileri.faturavergidairesi").tostring()), FaturaVergiNo = (profilebase.getpropertyvalue("faturabilgileri.faturavergino") == null? "" : profilebase.getpropertyvalue("faturabilgileri.faturavergino").tostring()), ; return View(profilBilgisi); Yukarıda ki yazdığımız metot oluşturacağımız kullanıcı view ımızı yorumlamaktadır. Daha önceki metot çeşitlerinde olduğu gibi yukarıda yazdığımız Profil action metodu yorumlamayı aşağıdaki metot ise formdan göndereceğimiz veriyi almayı sağlamaktadır. Model bölümünün içinde oluştutrulmuş olan ProfilBilgisi sınıfı sayesinde formumuza sayısız buton ve metin kutusu gibi form elemanı ekleyebilmekteyiz. ProfilBilgisi sınıfı bize profil bilgisi için gerekli olan tüm kod parçacıklarını barındırmaktadır. Kullanıcı siteme kayıt olduktan sonra yönetici kullanıcının o kullanıcıya profil bilgisi oluşturmasına gerek yoktur. Çünkü sisteme kayıt olan her kullanıcının otamatik olarak profil bilgisine sahip olmakta ve sahip olduğu bu nesne içindeki kişisel bilgileri sadece kendisi değiştirebilmektedir. [Authorize] [AcceptVerbs("POST")] public ActionResult KullaniciProfili(ProfilBilgisi profilbilgisi) //UserProfile(ProfileInformation profileinformation) ProfileBase profilebase = HttpContext.Profile as ProfileBase; //profilebase.setpropertyvalue("abone", profilbilgisi.abonetipi); //profilebase.setpropertyvalue("dil", profilbilgisi.dil); profilebase.setpropertyvalue("kisiselbilgiler.adi", profilbilgisi.adi); profilebase.setpropertyvalue("kisiselbilgiler.soyadi", profilbilgisi.soyadi); profilebase.setpropertyvalue("kisiselbilgiler.cinsiyet", profilbilgisi.cinsiyet); profilebase.setpropertyvalue("kisiselbilgiler.dogumtarihi", profilbilgisi.dogumtarihi); profilebase.setpropertyvalue("iletisimbilgileri.telefonno", profilbilgisi.telefonno); profilebase.setpropertyvalue("iletisimbilgileri.dahilino", profilbilgisi.dahilino); profilebase.setpropertyvalue("iletisimbilgileri.ceptelefonno", profilbilgisi.ceptelefonno); profilebase.setpropertyvalue("iletisimbilgileri.sehir", profilbilgisi.sehir); profilebase.setpropertyvalue("iletisimbilgileri.ulke", profilbilgisi.ulke); profilebase.setpropertyvalue("iletisimbilgileri.ilce", profilbilgisi.ilce); profilebase.setpropertyvalue("iletisimbilgileri.adres", profilbilgisi.adres); 124

125 profilebase.setpropertyvalue("faturabilgileri.faturaadresadi", profilbilgisi.faturaadresadi); profilebase.setpropertyvalue("faturabilgileri.faturaadi", profilbilgisi.faturaadi); profilebase.setpropertyvalue("faturabilgileri.faturasoyadi", profilbilgisi.faturasoyadi); profilebase.setpropertyvalue("faturabilgileri.faturaadres", profilbilgisi.faturaadres); profilebase.setpropertyvalue("faturabilgileri.faturaulke", profilbilgisi.faturaulke); profilebase.setpropertyvalue("faturabilgileri.faturasehir", profilbilgisi.faturasehir); profilebase.setpropertyvalue("faturabilgileri.faturailce", profilbilgisi.faturailce); profilebase.setpropertyvalue("faturabilgileri.faturapostakodu", profilbilgisi.faturapostakodu); profilebase.setpropertyvalue("faturabilgileri.faturatelefonno", profilbilgisi.faturatelefonno); profilebase.setpropertyvalue("faturabilgileri.faturaceptelefonno", profilbilgisi.faturaceptelefonno); profilebase.setpropertyvalue("faturabilgileri.faturafaturatipi", profilbilgisi.faturafaturatipi); profilebase.setpropertyvalue("faturabilgileri.faturatckimlikno", profilbilgisi.faturatckimlikno); profilebase.setpropertyvalue("faturabilgileri.faturafirmaadi", profilbilgisi.faturafirmaadi); profilebase.setpropertyvalue("faturabilgileri.faturavergidairesi", profilbilgisi.faturavergidairesi); profilebase.setpropertyvalue("faturabilgileri.faturavergino", profilbilgisi.faturavergino); profilebase.save(); Profil bilgisi için yazdığımız yukarıda ki metot ise bizim profil bilgisi sayfasından veri almamızı sağlamaktadır. Form sayfasında elde ettiğimiz bilgilerle kullanıcının profili oluşturulmuştur. Kullanıcı bilgisi tablosunda bütün alanlar ProfilBilgisi metotlarını kullanarak otamatik olarak oluştuğu için kendinizde birkaç alan oluşturabilirsiniz. Ancak burada dikkat edilmesi gereken yer kullanıcıya profil bilgisini düzeltmesi için izin vermeden önce o kullanıcının sisteme kayıtlı olup olmadığı kontrol edilmelidir KullaniciYonetimi Action Metot Yönetim action metodu denince akla ilk Kullanıcı Yönetimi yapan metotlar gelmektedir. Biz projemizde bu metodun ismine KullaniciYonetimi diyeceğiz. Kullanıcı yönetimi action metodu yönetim ile ilgili bir metottur. Bu metodu sadece yönetici kullanıcılar kullanabilmektedir. Bu metot bize üyelik sistemine kayıtlı kullanıcılar hakkında bilgi verecektir. Bu KullaniciYonetimi Action metodu sayesinde tüm kullanıcıları 125

126 belirlediğimiz kriterlere göre listeleyebilmekteyiz. Bize gerekli olan kod parçacığı aşağıdaki gibidir: [Authorize(Roles = "Admin")] public ActionResult KullaniciYonetimi(string aramatipi, string girilenveri) //ManageUser(string searchtype, string searchinput) List<SelectListItem> aramaseceneklistesi = new List<SelectListItem>() new SelectListItem() Value = "KullaniciAdi", Text = "KullaniciAdi",// Value = "UserName", Text = "UserName", new SelectListItem() Value = " ", Text = " " // Value = " ", Text = " " ; ViewData["aramaSecenekListesi"] = new SelectList(aramaSecenekListesi, "Value", "Text", aramatipi?? "KullaniciAdi"); ViewData["girilenVeri"] = girilenveri?? string.empty; ViewData["AktifKullanicilar"] = Membership.GetNumberOfUsersOnline().ToString(); ViewData["KayitliKullanicilar"] = Membership.GetAllUsers().Count.ToString(); MembershipUserCollection viewdata; if (String.IsNullOrEmpty(girilenVeri)) viewdata = Membership.GetAllUsers(); else if (aramatipi == " ") viewdata = Membership.FindUsersBy (girilenVeri); else viewdata = Membership.FindUsersByName(girilenVeri); ViewBag.SayfaBaslik = "Hesap Yönetimi"; return View(viewData); Yukarıdaki metodumuzun üstünde yer alan [Authorize(Roles = "Admin")] etiketi metodu kullanan kişinin sadece yönetici olmasını garantiye almak içindir. Yukarıda gördüğünüz gibi viewdata nesnesi view ın isminin yerine kullanılmıştır. Bu action membershipusercollection eklediğinizde view ınıza güçlü bir model oluşturacasınız. 126

127 Kullanıcı Sil Action Metodu Bazen bazı kullanıcıları siteminizden silmek isteyebilirsiniz. Bunun birçok nedeni olabilir. Mesala uzun süredir sisteme girmemeleri yada sizin başka bir sebepten dolayı sisteminizde onlara yervermemek istemiş olabilirsiniz. İşte biz bu işlem için aşşağıdaki gibi DeleteUser action metodunu kullanırız: Authorize(Roles = "Admin")] public ActionResult KullaniciSil(string id) //DeleteUser(string id) Membership.DeleteUser(id); return RedirectToAction("KullaniciYonetimi"); Yukarıdaki kodda silme işlemi için Id kullanılmıştır. Çünkü javascript Id ye bakarak o alanın silinip silinmediğini control etmekte ve bize geri dönüş olarak mesaj göndermektedir. Bu işlemleri tam anlamıyla view kısmın ad anlayacağız. Kullanıcı Düzenle Action Metodu Projemizde ihtiyacımız olan bir diğer metot ise KullaniciDuzenle metodudur. Bu controller metodu view aracılığıyla bizim seçtiğimiz kullanıcının bilgilerini gösterir ve yetki alanlarını kısıtlayabilmemiz sağlar. KullaniciDuzenle Action metodu aşağıdaki gibi oluşturulmalıdır. [Authorize(Roles = "Admin")] public ActionResult KullaniciDuzenle(string id) //EditUser(string id) ViewData["roller"] = (String[])Roles.GetAllRoles(); //ViewData["roles"] MembershipUser membershipuser = Membership.GetUser(id); ViewBag.SayfaBaslik = "Düzenle " + id; return View(membershipUser); İlk metodumuz KullaniciDuzenle view ını yorumlamaktadır. Bu view ı kullnarak seçtiğimiz kulanıcıya yetki ekleyebilir veya yetkisini kaldırabiliriz ve bu işlemlerin hepsi tüm kullanıcılar için geçerli olacaktır. Aşşağıdai kod yukarıdaki metodun overloed edilmiş halidir. [AcceptVerbs("POST")] public ActionResult KullaniciDuzenle(string id, bool onay) foreach (var rol in Roles.GetAllRoles()) if (!String.IsNullOrEmpty(Request.Form["role." + rol.tostring() ])) if (!Roles.IsUserInRole(id, rol.tostring())) 127

128 Roles.AddUserToRole(id, rol.tostring()); else if (Roles.IsUserInRole(id, rol.tostring())) Roles.RemoveUserFromRole(id, rol.tostring()); MembershipUser membershipuser = Membership.GetUser(id); membershipuser.isapproved = onay; Membership.UpdateUser(membershipUser); TempData["TamamlandiMesaj"] = "Kullanıcı bilgileri başarıyla güncellendi."; ViewData["roller"] = (String[])Roles.GetAllRoles(); ViewBag.SayfaBaslik = "Düzenle " + id; return RedirectToAction("KullaniciDuzenle", new id = id ); Yukarıdaki overloed edilmiş KullaniciDuzenle metoduna bakacak olursak Authorize etiketinin bize ne kadar yardım olduğunu görüyoruz. Tek bir satır kod ile forma girebilmenin şartı konulmuş oluyor. Yetkilerin yönetimiyle bu modüllerin anlaşabilmeleri için KullaniciRolYonet action metoduna ihtiyacımız vardır. KullaniciRolYonet action metodu bizim KullaniciRolYonetimi view ını yorumlayarak projemizde yer alan bütün yetki alanlarını listeler: [Authorize(Roles = "Admin")] public ActionResult KullaniciRolYonet() //ManageRole() ViewData["ToplamRol"] = Roles.GetAllRoles().Count(); ViewBag.SayfaBaslik = "Rol Yönetimi"; return View(); Kullanıcı Rol Olustur Action Metodu Bu kullanacağımız metot diğer metotlardan biraz farklıdır çünkü action metodumuz KullaniciTol Yonet view ını kullanacağından için ayrı bir view oluşturmamıza gerek yoktur. Aşağıdaki yazdığımız kod parçacığı aracılığıyla tek bir view ın çoklu kullanabilmemiz sağlamaktadır. [Authorize(Roles = "Admin")] 128

129 [AcceptVerbs("POST")] public ActionResult KullaniciRolOlustur(string yenirol) //CreateRole(string newrole) Roles.CreateRole(yeniRol); return RedirectToAction("KullaniciRolYonet"); Bu contoller metodu role sınıfını kullanarak bir yetki alanı oluşturmayı sağalamıştır ve aynı zamanda bizi bir çok ağır işten kurtarmış olmaktadır. KullaniciRolSil Action Metodu Şuana dek kullanıcıların yetki alanlarını görebiliyor ve onlar yetki alanlarını genişletebiliyoruz. Ancak biz kullanıcılar yetki alanarını kısıtlamakta isteyebiliriz. Bu KullaniciRolSil metodu sayesinde bu işlem kolay bir şekilde çözülmektedir. [Authorize(Roles = "Admin")] [Service, HttpPostOnly] public ActionResult KullaniciRolSil(string id) // DeleteRole(string id) Roles.DeleteRole(id); return View(new id = id ); Bu bölümünde sonuna geldik umarız kolayca ilk controlerlerinizi oluşturabilirsiniz. 5.9 View Uygulaması Kullanici controller metodumuzun içine tüm action metotlarımızı oluşturduktan sonra View larımızı oluşturmaya başlayabiliriz. Contoroler kısmında olduğu gibi kısa açıklamalar halinde devam edeceğiz. Genellikle bu kısımda html etiketleri ve CSS kullanacağız. Bu bölümde giriş sayfası hesap oluşturma sayfası hesap yönetin-m sayfaları ve son olarakta kullanıcı profil sayfasını oluşturacağız Kayit.cshtml View Bizim kayit.cshtml sayfasını ilk defa oluşturacağımızdan bu kısma dikkat edilmesi gerekmektedir. Bu view Viess/Anasayfa/ kayit.cshtml in içinde yer almaktadır. İlk olrak hesap oluşturmaya çalışacağımızdan projemizin kayit.cshtml view ını oluşturmaya başlamalıyız. Oluşturacağımız Kayit.cshtml view ı aşağıdaki gibi olacaktır. 129

130 Resimde gördüğünüz gibi bu yapı kullanıcı kaydında genel bir standarttır. Burada eksik olan tek ksım ise kayıt yapanın bir insan mı yada bilgisayar mı olduğunu anlamaya yarayan CAPTCHA testidir. Captcha testi, Sitemin otamatik olarak resimin üzerinde oluşturduğu karakterleri kullanıcı bilgisayarının çözememesine denir. Bunu da isterseniz ekleyebilirsiniz. Temel İçerik Temel içerik kısmı yeni bir kullanıcı oluşturulurken kayıt işlemlerinin gerçekleşebilmesi için minimum alanları kapsaması da gerekir. Bunlar kullanıcı adı, şifre, , yıl, gizli soru ve cevabı alanlarıdır. Oluşturacağımız KullaniciBilgisi view ı model gibidir. İlk önce view ve içinde yer alacak olan kutuları oluşturmak gerkmektedir. Aşşağıda size bunların nasıl oluşturulması gerektiği as string), () => "<div class=\"error\">" + TempData["HataMesaj"] + "</div>").elseif(!string.isnullorempty(tempdata["tamamlandimesaj"] as string), () => "<div class=\"success\">" + TempData["TamamlandiMesaj"] + "</div>").elseif(!string.isnullorempty(tempdata["uyarimesaj"] as string), () => "<div class=\"warning\">" + TempData["UyariMesaj"] + "</div>").elseif(!string.isnullorempty(tempdata["bilgimesaj"] as string), () => "<div class=\"info\">" + TempData["BilgiMesaj"] + "</div>").else(() => String.Empty)) 130

131 <div as string), () => "<div class=\"error\">" + TempData["HataMesaj"] + "</div>").elseif(!string.isnullorempty(tempdata["tamamlandimesaj"] as string), () => "<div class=\"success\">" + TempData["TamamlandiMesaj"] + "</div>").elseif(!string.isnullorempty(tempdata["uyarimesaj"] as string), () => "<div class=\"warning\">" + TempData["UyariMesaj"] + "</div>").elseif(!string.isnullorempty(tempdata["bilgimesaj"] as string), () => "<div class=\"info\">" + TempData["BilgiMesaj"] + "</div>").else(() => String.Empty)) <h2>üyelik Kayıt Formu</h2> <form method="post" name="kayit" action="@url.action("kayit", "Kullanici") " class="kullanici-kayit"> <table cellspacing="0" cellpadding="0"> <tr> <td><table border="0" cellspacing="0" cellpadding="0" width="100%"> <tbody> <tr> <td height="25" align="left">üyelik Bilgileri </td> </tr> </tbody> </table></td> </tr> <tr> <td height="1"></td> </tr> <tr> <td bgcolor="#ffb801" height="1"></td> </tr> <tr> <td height="15"></td> </tr> <tr> <td height="15" align="center"><table border="0" cellspacing="0" cellpadding="0" width="100%"> <tbody> <tr> <td width="16"></td> <td width="120" align="left">isim *</td> 131

132 <td width="15">:</td> <td align="left"> <input type="text" name="adi" size="30" /> </td> </tr> <tr> <td height="10" colspan="4"> </td> </tr> <tr> <td></td> <td align="left">soyisim *</td> <td>:</td> <td align="left"> <input type="text" name="soyadi" size="30" /> </td> </tr> <tr> <td height="10" colspan="4"> </td> </tr> <tr> <td></td> <td align="left">e-posta *</td> <td>:</td> <td align="left"> <input type="text" name=" " size="30" /> </td> </tr> <tr> <td height="10" colspan="4"> </td> </tr> <tr> <td></td> <td align="left">doğum Tarihi</td> <td>:</td> <td align="left"> <select id="gun" name="gun"> <option selected="selected" value="00">gün</option> <option value="01">01</option> <option value="02">02</option> <option value="03">03</option> <option value="04">04</option> <option value="05">05</option> <option value="06">06</option> 132

133 <option value="07">07</option> <option value="08">08</option> <option value="09">09</option> <option value="10">10</option> <option value="11">11</option> <option value="12">12</option> <option value="13">13</option> <option value="14">14</option> <option value="15">15</option> <option value="16">16</option> <option value="17">17</option> <option value="18">18</option> <option value="19">19</option> <option value="20">20</option> <option value="21">21</option> <option value="22">22</option> <option value="23">23</option> <option value="24">24</option> <option value="25">25</option> <option value="26">26</option> <option value="27">27</option> <option value="28">28</option> <option value="29">29</option> <option value="30">30</option> <option value="31">31</option> </select> <select id="ay" name="ay"> <option selected="selected" value="00">ay</option> <option value="01">01</option> <option value="02">02</option> <option value="03">03</option> <option value="04">04</option> <option value="05">05</option> <option value="06">06</option> <option value="07">07</option> <option value="08">08</option> <option value="09">09</option> <option value="10">10</option> <option value="11">11</option> <option value="12">12</option> </select> <select id="yil" name="yil"> <option selected="selected" for (int i = 1994; i > 1930 ;i-- ) <option value="@i">@i</option> 133

134 </select> </td> </tr> <tr> <td height="10" colspan="4"> </td> </tr> <tr> <td></td> <td align="left">cinsiyet</td> <td>:</td> <td align="left"><span id="cinsiyet"> <input id="rdbsex_0" name="cinsiyet" value="0" type="radio" /> <label for="rdbsex_0">kadın</label> <input id="rdbsex_1" name="cinsiyet" value="1" type="radio" /> <label for="rdbsex_1">erkek</label> </span></td> </tr> </tbody> </table></td> </tr> <tr> <td></td> </tr> <tr> <td height="25"></td> </tr> <tr> <td height="8"> <table border="0" cellspacing="0" cellpadding="0" width="100%" > <tbody> <tr> <td height="25" align="left"> İletişim Bilgileri </td> </tr> </tbody> </table> <span id="lbcityerror"></span></td> </tr> <tr> <td height="1"> </td> </tr> <tr> <td bgcolor="#ffb801" height="1"> </td> </tr> <tr> 134

135 <td height="8"></td> </tr> <tr> <td height="8"><table border="0" cellspacing="0" cellpadding="0" width="100%"> <tbody> <tr> <td width="16"></td> <td width="120" align="left">ülke</td> <td width="15">:</td> <td align="left"> <select id="ulke" name="ulke"> <option value="us">abd</option> <option value="de">almanya</option> <option value="ao">angola</option> <option value="ai">anguilla</option> <option value="ar">arjantin</option> <option value="al">arnavutluk</option> <option value="aw">aruba</option> <option value="au">avustralya</option> <option value="at">avusturya</option> <option value="az">azerbeycan</option> <option value="bs">bahamalar</option> <option value="bh">bahreyn</option> <option value="bd">bangladeş</option> <option value="bb">barbados</option> <option value="ws">batı Samo</option> <option value="be">belçika</option> <option value="bz">belize</option> <option value="bj">benin</option> <option value="bm">bermuda</option> <option value="by">beyaz Rusya</option> <option value="ae">birleşik Arap Emirlikleri</option> <option value="bo">bolivya</option> <option value="ba">bosna Hersek</option> <option value="bw">botsvana</option> <option value="br">brezilya</option> <option value="bn">brunei</option> <option value="bg">bulgaristan</option> <option value="bi">burundi</option> <option value="gi">cebelitarık</option> <option value="dz">cezayir</option> <option value="ck">cook Adaları</option> <option value="td">çad</option> <option value="cz">çek Cumhuriyeti</option> <option value="cn">çin Halk Cumhuriyeti</option> <option value="dk">danimarka</option> <option value="dm">dominik</option> 135

136 <option value="do">dominika</option> <option value="gq">ekvator</option> <option value="sv">el Salvador</option> <option value="id">endonezya</option> <option value="er">eritre</option> <option value="am">ermenistan</option> <option value="ee">estonya</option> <option value="et">etiyopya</option> <option value="fk">falkland Adaları</option> <option value="fo">faroe Adaları</option> <option value="ma">fas</option> <option value="fj">fiji</option> <option value="ci">fildişi Sahilleri</option> <option value="ph">filipinler</option> <option value="fi">finlandiya</option> <option value="fr">fransa</option> <option value="ga">gabon</option> <option value="gh">gana</option> <option value="gw">gine Cumhuriyeti</option> <option value="gd">greneda</option> <option value="gl">grönland</option> <option value="gt">guatemala</option> <option value="gy">guyana</option> <option value="za">güney Afrika</option> <option value="ge">gürcistan</option> <option value="ht">haiti</option> <option value="hr">hırvatistan</option> <option value="in">hindistan</option> <option value="nl">hollanda</option> <option value="hk">hong Kong</option> <option value="iq">irak</option> <option value="gb">ingiltere - GB</option> <option value="ir">iran</option> <option value="ie">irlanda</option> <option value="zi">iskoçya</option> <option value="es">ispanya</option> <option value="il">israil</option> <option value="se">isveç</option> <option value="ch">isviçre</option> <option value="it">italya</option> <option value="is">izlanda</option> <option value="jm">jamaika</option> <option value="jp">japonya</option> <option value="cy">k.k.t.c</option> <option value="kh">kamboçya</option> <option value="cm">kamerun</option> <option value="ca">kanada</option> 136

137 <option value="qa">katar</option> <option value="kz">kazakistan</option> <option value="ke">kenya</option> <option value="kg">kırgızistan</option> <option value="co">kolombiya</option> <option value="cg">kongo</option> <option value="kr">kore Cumhuriyeti</option> <option value="cr">kosta Rika</option> <option value="kw">kuveyt</option> <option value="cu">küba</option> <option value="la">laos</option> <option value="ls">lesotho</option> <option value="lv">letonya</option> <option value="lr">liberya</option> <option value="ly">libya</option> <option value="li">lihtenştayn</option> <option value="lt">litvanya</option> <option value="lb">lübnan</option> <option value="lu">lüksemburg</option> <option value="hu">macaristan</option> <option value="mg">madagaskar</option> <option value="mo">makau</option> <option value="mk">makedonya</option> <option value="mk">makedonya</option> <option value="mw">malavi</option> <option value="my">malezya</option> <option value="ml">mali</option> <option value="mt">malta</option> <option value="mx">meksika</option> <option value="eg">mısır</option> <option value="mn">moğolistan</option> <option value="md">moldovya</option> <option value="mc">monako</option> <option value="mz">mozambik</option> <option value="na">namibya</option> <option value="np">nepal</option> <option value="ng">nijerya</option> <option value="ni">nikaragua</option> <option value="no">norveç</option> <option value="uz">özbekistan</option> <option value="pk">pakistan</option> <option value="pa">panama</option> <option value="pg">papua Yeni Gine</option> <option value="py">paraguay</option> <option value="pe">peru</option> <option value="pl">polonya</option> <option value="pt">portekiz</option> 137

138 <option value="pr">porto Riko</option> <option value="ro">romanya</option> <option value="rw">ruanda</option> <option value="ru">rusya</option> <option value="sn">senegal</option> <option value="sg">singapur</option> <option value="sk">slovakya</option> <option value="si">slovenya</option> <option value="sb">solomon Adaları</option> <option value="so">somali</option> <option value="lk">sri Lanka</option> <option value="sd">sudan</option> <option value="sy">suriye</option> <option value="sa">suudi Arabistan</option> <option value="cl">şili</option> <option value="tj">tacikistan</option> <option value="tz">tanzanya</option> <option value="th">tayland</option> <option value="tw">tayvan</option> <option value="tg">togo</option> <option value="to">tonga</option> <option value="tn">tunus</option> <option selected="selected" value="tur">türkiye</option> <option value="tm">türkmenistan</option> <option value="ug">uganda</option> <option value="ua">ukranya</option> <option value="om">umman</option> <option value="uy">uruguay</option> <option value="jo">ürdün</option> <option value="ve">venezuela</option> <option value="vn">vietnam</option> <option value="vi">virjin Adaları</option> <option value="ye">yemen</option> <option value="nz">yeni Zelanda</option> <option value="yu">yugoslavya</option> <option value="gr">yunanistan</option> <option value="zm">zambiya</option> <option value="zw">zimbabve</option> </select></td> </tr> <tr> <td height="10" colspan="4"></td> </tr> <tr> <td></td> <td align="left">şehir</td> <td>:</td> 138

139 <td align="left"><select id="sehir" name="sehir"> <option value="01-322">adana</option> <option value="02-416">adıyaman</option> <option value="03-272">afyon</option> <option value="04-472">ağrı</option> <option value="68-382">aksaray</option> <option value="05-358">amasya</option> <option value="06-312">ankara</option> <option value="07-242">antalya</option> <option value="75-478">ardahan</option> <option value="08-466">artvin</option> <option value="09-256">aydın</option> <option value="10-266">balıkesir</option> <option value="74-378">bartın</option> <option value="72-488">batman</option> <option value="69-458">bayburt</option> <option value="11-228">bilecik</option> <option value="12-426">bingöl</option> <option value="13-434">bitlis</option> <option value="14-374">bolu</option> <option value="15-248">burdur</option> <option value="16-224">bursa</option> <option value="17-286">çanakkale</option> <option value="18-376">çankırı</option> <option value="19-364">çorum</option> <option value="20-258">denizli</option> <option value="21-412">diyarbakır</option> <option value="81-380">düzce</option> <option value="22-284">edirne</option> <option value="23-424">elazığ</option> <option value="24-446">erzincan</option> <option value="25-442">erzurum</option> <option value="26-222">eskişehir</option> <option value="27-342">gaziantep</option> <option value="28-454">giresun</option> <option value="29-456">gümüşhane</option> <option value="30-438">hakkari</option> <option value="31-326">hatay</option> <option value="76-476">iğdır</option> <option value="32-246">isparta</option> <option value="33-324">içel</option> <option selected="selected" value="34-212">istanbul</option> <option value="35-232">izmir</option> <option value="46-344">kahramanmaraş</option> <option value="78-370">karabük</option> <option value="70-338">karaman</option> 139

140 <option value="36-474">kars</option> <option value="37-366">kastamonu</option> <option value="38-352">kayseri</option> <option value="71-318">kırıkkale</option> <option value="39-288">kırklareli</option> <option value="40-386">kırşehir</option> <option value="79-348">kilis</option> <option value="41-262">kocaeli</option> <option value="42-332">konya</option> <option value="43-274">kütahya</option> <option value="44-422">malatya</option> <option value="45-236">manisa</option> <option value="47-482">mardin</option> <option value="48-252">muğla</option> <option value="49-436">muş</option> <option value="50-384">nevşehir</option> <option value="51-388">niğde</option> <option value="52-452">ordu</option> <option value="80-328">osmaniye</option> <option value="53-464">rize</option> <option value="54-264">sakarya</option> <option value="55-362">samsun</option> <option value="56-484">siirt</option> <option value="57-368">sinop</option> <option value="58-346">sivas</option> <option value="63-414">şanlıurfa</option> <option value="73-486">şırnak</option> <option value="59-282">tekirdağ</option> <option value="60-356">tokat</option> <option value="61-462">trabzon</option> <option value="62-428">tunceli</option> <option value="64-276">uşak</option> <option value="65-432">van</option> <option value="77-226">yalova</option> <option value="66-354">yozgat</option> <option value="67-372">zonguldak</option> </select> </td> </tr> <tr> <td height="10" colspan="4"> </td> </tr> <tr> <td></td> <td align="left">ilçe</td> <td>:</td> <td align="left"> 140

141 <input type="text" name="ilce" size="30" /> </td> </tr> <tr> <td height="10" colspan="4"> </td> </tr> <tr> <td></td> <td align="left">telefon No</td> <td>:</td> <td align="left"> <span id="lblphonecode">+90-</span> <input type="text" name="telefonsehirkodu" size="3" maxlength="3" /> <input id="telefon" name="telefon" maxlength="7" size="7" type="text" autocomplete="off" /> </td> </tr> <tr> <td height="10" colspan="4"> </td> </tr> <tr> <td></td> <td align="left">dahili No </td> <td>:</td> <td align="left"><label> <input id="dahilino" name="dahilino" maxlength="6" type="text" /> </label></td> </tr> <tr> <td height="10" colspan="4"> </td> </tr> <tr> <td></td> <td align="left">cep Telefon</td> <td>:</td> <td align="left"> <span id="lblcepphonecode">+90-</span> <input type="text" name="ceptelkodu" size="3" maxlength="3" /> <input id="ceptelefonu" name="ceptelefonu" maxlength="7" size="7" type="text" autocomplete="off" /> </td> </tr> </tbody> </table></td> </tr> 141

142 <tr> <td height="8" align="left"><table border="0" cellspacing="0" cellpadding="0" width="100%"> <tbody> <tr> <td height="2"></td> </tr> <tr> <td width="16"></td> <td align="left"></td> </tr> </tbody> </table></td> </tr> <tr> <td height="25"></td> </tr> <tr id="tbpwd"> <td height="8"><table border="0" cellspacing="0" cellpadding="0" width="100%"> <tbody> <tr> <td height="25" align="left"> Üyelik Şifresi</td> </tr> <!-- Şifre Basi --> <tr> <td height="1"> </td> </tr> <tr> <td bgcolor="#ffb801" height="1"> </td> </tr> <tr> <td height="8"><table border="0" cellspacing="0" cellpadding="0" width="100%"> <tbody> <tr> <td width="16" align="left"></td> <td height="50" align="left">mağazamızın güvenli bölgelerinde kullanacağınız bir şifre seçiniz. <br /> Şifreniz en az 5 karakter uzunluğunda olmalıdır, Lütfen şifrenizi kimseyle paylaşmayınız. <span id="comparevalidator2" evaluationfunction="comparevalidatorevaluateisvalid" errormessage="şifreniz ilk girilenden farklı" controltovalidate="txtpass2" controlhookup="txtpass1" controltocompare="txtpass1">şifreniz ilk girilenden farklı</span></td> </tr> 142

143 </tbody> </table></td> </tr> <tr> <td height="8"><table border="0" cellspacing="0" cellpadding="0" width="100%"> <tbody> <tr> <td width="16"></td> <td width="120" align="left">şifre *</td> <td width="15">:</td> <td align="left"> <input type="text" name="parola" size="30" /> </td> </tr> <tr> <td height="10" colspan="4"> </td> </tr> <tr> <td></td> <td align="left">şifre Tekrar *</td> <td>:</td> <td align="left"> <input type="text" name="tekrarparola" size="30" /> </td> </tr> <tr> <td height="10" colspan="4"> </td> </tr> </tbody> </table></td> </tr> <tr></tr> <!-- Sifre Sonu --> </tbody> </table></td> </tr> <tr> <td align="center"><input id="btnsave" name="btnsave" value=" Kayıt " type="submit" /> <span id="message"></span></td> </tr> <tr> 143

144 <td align="left"><ul> <li>( * )Doldurulması zorunlu alanlar. </li> <li> Yukarıda belirttiğiniz tüm bilgiler kesinlikle gizli tutulacaktır. </li> </ul></td> </tr> </table> </form> </div> Script İçeriği View Bölümünün bir kısmı view için gerekli olan javascript kodlarını içermektedir. Bu javascript kodlaları sayesinde formdan veri gönderdiğimizde geri dönüşolara doğrulama veya hata mesajı alıcaz: <asp:content ID= ScriptContent ContentPlaceHolderID= ScriptContent runat= server > <script type= text/javascript src= /content/scripts/register.js if (IsPostBack) <script type= text/javascript > ValidateRegistration(); </script> </asp:content> Javascript dosyaları çok önemlidir ve projemizde /content/scripts/ kayit.js bulunmaktadır. Javascript kodları özellikle formlarda doğrulama işlemleri için kullanıldığına emin olabilirsiniz ki bizim javascript kodumuz action metodumuzun içinde yer almaktadır ve alanların doğru bir şekilde dolu olmasını kontrol etmektedir. Kayit.js Kayit.js dosyasıçok önemlidir ve Content klasörünün altındascripts klasörünün içinde bulunmaktadır. Ayrıca istemci server ında çalıştğı için ana makinaya asla yük olmazlar. function ValidateUserName() return VerifyRequiredField( #UserName, required ); function ValidatePassword() return VerifyRequiredField( #Password, required ); function ValidateConfirmPassword() return VerifyRequiredField( #ConfirmPassword, required ); 144

145 function Validate () return VerifyRequiredField( # , required ); function ValidateSecretQuestion() return VerifyRequiredField( #SecretQuestion, required ); function ValidateSecretAnswer() return VerifyRequiredField( #SecretAnswer, required ); function ValidateRegistration() return ValidateUserName() && ValidatePassword() && ValidateConfirmPassword() && Validate () && ValidateSecretQuestion() && ValidateSecretAnswer(); $( form.user-registration ).validate(validateregistration); Yukarıdaki ilk altı donksiyon textbozları kontrol etmektedir. ValidateSecretAnswer ise diğer altı fonksiyonu çalıştırmaya yaramaktadır. Eğer yukarıdaki altı fonksiyonun herhangi birinde hata oluşursa ge 5.10 Giris.cshtml Giris.cshtml view ı projemizde view klasöründe kullanici klasörünün içindedir. Bizim yapacağımız giriş sayfası kullanıcı doğrulama işlemlerinin gerçekleştiği standart bir giriş sayfası olacaktır ve görünümü aşağıdaki gibidir. 145

146 Temel İçerik Yukarıda gördünüz gibi giriş sayfamız bir kullanıcı adı ve birde şifre giriş kısımları olmak üzere iki bölümden oluşmaktadır. Ayrıca sisteme kayıt olmak isteyenler veya şifresini unutanlar için birer tanede link vardır. Kod kısmı ise aşşağıda ki as string), () => "<div class=\"error\">" + TempData["HataMesaj"] + "</div>").elseif(!string.isnullorempty(tempdata["tamamlandimesaj"] as string), () => "<div class=\"success\">" + TempData["TamamlandiMesaj"] + "</div>").elseif(!string.isnullorempty(tempdata["uyarimesaj"] as string), () => "<div class=\"warning\">" + TempData["UyariMesaj"] + "</div>").elseif(!string.isnullorempty(tempdata["bilgimesaj"] as string), () => "<div class=\"info\">" + TempData["BilgiMesaj"] + "</div>").else(() => String.Empty)) <div class="icerik"> <h2>üye Girişi</h2> <div id="uyegirisi"> <form method="post" name="uyegirisi" action="@url.action("giris", "Kullanici") " class="user-login"> <p><span>kullanıcı </p> </p> 146

147 <p Beni hatırla?</p> <input type="hidden" name="returnurl" /> Unuttum", Kayıt Ol", "Kayit") </p> <hr /> <p><button type="submit" id="user-login-button">gönder</button></p> </form> </div> </div> Bu sayfayı oluşturduktan sonra bu web sitesi için oturum açma işlemi tamamlanmış olur. Unutulmaması gereken diğer bir nokta ise kullanıcını giriş yaptığı anda kendi hesabına da ulaşabilmelidir SifremiUnuttum.cshtml SifremiUnuttum.cshtml view ı projemizde view klasöründe kullanici klasörünün içindedir. Bu sayfa kullanıcılar şifrelerini unuttuklarında eski şifrelerini sıfırlamasına izin verir. Bu işlemler için KullniciBilgisi modelini kullanacağız. Şifremi unuttum sayfasının aşağıdaki gibi bir görünüme sahip olacaktır. 147

148 Temel İçerik Şifremi unutum bölümü oldukça kolaydır. Çünkü sadece kullanıcı adının gönderileceği bir form tasarlıyacağız. Şifresini unutan kullanıcı bu formu kullanarak kullanıcı ismini gönderecek ve sistemde bu kullanıcı ismine kayıtlı olan kişinin karşısına gizli soru gelecek bu gizli sorunun cevabını ise kullanıcı sisteme kayıt olurken vermiştir aynı cevabı tekrar yazıp gönderirse şifresi sıfırlayacaktır. Kod kısmına bakacak olursak aşağıdaki as string), () => "<div class=\"error\">" + TempData["HataMesaj"] + "</div>").elseif(!string.isnullorempty(tempdata["tamamlandimesaj"] as string), () => "<div class=\"success\">" + TempData["TamamlandiMesaj"] + "</div>").elseif(!string.isnullorempty(tempdata["uyarimesaj"] as string), () => "<div class=\"warning\">" + TempData["UyariMesaj"] + "</div>").elseif(!string.isnullorempty(tempdata["bilgimesaj"] as string), () => "<div class=\"info\">" + TempData["BilgiMesaj"] + "</div>").else(() => String.Empty)) <form method="post" action="@url.action("sifremiunuttum", "Kullanici") <p class="field input"><label for="gizlicevap">@model.gizlisoru</label><br <span class="input-message"></span></p> else <p class="field input"><label for="kullaniciadi">lütfen kullanıcı adınızı giriniz</label><br <span class="input-message"></span></p> </form> <hr /> <p><button type="submit" id="user-login-button">gönder</button></p> 5.12 ParolaDegistir.cshtml Şifremi unuttum sayfası ile Parola değiştir sayfası ile benzerdir. Kullanıcılar bazen sahip oldukları şifrelerini değiştimek isteyebilirler ancak kullanıcılar önceki şifresini unutmaması gerekmektedir. Parola değiştir kısmında kullnıcıya önce eski şifresi sorulur ve 148

149 ardından şifresini değiştirebilir. ParolaDegistir.cshtml sayfasında bu işlemler yapımaktadır. ParolaDegistir.cshtml view ı projemizde view klasöründe kullanici klasörünün içindedir. Temel İçerik ParolaDegistir.cshtml view ının içeriği aşağıdaki gibi oldukça as string), () => "<div class=\"error\">" + TempData["HataMesaj"] + "</div>").elseif(!string.isnullorempty(tempdata["tamamlandimesaj"] as string), () => "<div class=\"success\">" + TempData["TamamlandiMesaj"] + "</div>").elseif(!string.isnullorempty(tempdata["uyarimesaj"] as string), () => "<div class=\"warning\">" + TempData["UyariMesaj"] + "</div>").elseif(!string.isnullorempty(tempdata["bilgimesaj"] as string), () => "<div class=\"info\">" + TempData["BilgiMesaj"] + "</div>").else(() => String.Empty)) <form method="post" action="@url.action("paroladegistir", "Kullanici") (Model.Parola == null) <p class="field input"><label for="parola">eski Parola</label><br <span class="input-message"></span></p> <p class="field input"><label for="paroladegistir">yeni Parola</label><br <span class="input-message"></span></p> <p class="field input"><label for="tekrarparola">yeni Parola (Tekrar)</label><br <span class="input-message"></span></p> </form> <hr /> <p><button type="submit" id="user-login-button">değiştir</button></p> Bu view ağırlıklı olarak textbox lardan oluşmuştur. Yukarıdaki yazdığımız kodlar aşağıdaki gibi bir,paroladegistir sayfası oluşturmuştur. 149

150 5.13 KullaniciProfil.cshtml KullaniciProfil.cshtml view ı projemizde view klasöründe kullanici klasörünün içinde yer almaktadır. Bu view kullanıcıların kendilerinin özel kullanınım sayfasıdır. Bizde buna uygun olarak aşağıdaki şekildeki gibi kullanıcıların özel bilgilerini girebildiği bir sayfa oluştutacağız. 150

151 Temel İçerik Yukarıdaki gördüğünüz KullaniciProfil.cshtml view ının kod kısmı aşağıdaki as string), () => "<div class=\"error\">" + TempData["HataMesaj"] + "</div>").elseif(!string.isnullorempty(tempdata["tamamlandimesaj"] as string), () => "<div class=\"success\">" + TempData["TamamlandiMesaj"] + "</div>").elseif(!string.isnullorempty(tempdata["uyarimesaj"] as string), () => "<div class=\"warning\">" + TempData["UyariMesaj"] + "</div>").elseif(!string.isnullorempty(tempdata["bilgimesaj"] as string), () => "<div class=\"info\">" + TempData["BilgiMesaj"] + "</div>").else(() => String.Empty)) <div class="icerik"> <form method="post" action="@url.action("kullaniciprofili", "Kullanici") "> <div id="personaldetails" class="form"> <h2 class="title"> Kişisel Bilgiler</h2> <div class="content"> <p class="field input"> <label for="adi"> Adı</label><br /> <input type="text" name="adi" value="@model.adi" size="30" /> <span class="input-message"></span> </p> <p class="field input"> <label for="soyadi"> Soyadı</label><br /> <input type="text" name="soyadi" value="@model.soyadi" size="30" /> <span class="input-message"></span> </p> <p class="field input"> <label for="subscriptiontype"> Cinsiyeti</label><br /> <input type="text" name="cinsiyet" value="@model.cinsiyet" size="30" /> <span class="input-message"></span> </p> <p class="field input"> <label for="kullaniciadi"> Doğum Tarihi</label><br /> <input type="text" name="dogumtarihi" value="@model.dogumtarihi" size="30" /> <span class="input-message"></span> 151

152 </p> </div> </div> <div id="address" class="form"> <h2 class="title"> Adres Bilgileri</h2> <div class="content"> <p class="field input"> <label for="telefonno"> TelefonNo</label><br /> <input type="text" name="telefonno" size="30" /> <span class="input-message"></span> </p> <p class="field input"> <label for="sehir"> Sehir</label><br /> <input type="text" name="sehir" size="30" /> <span class="input-message"></span> </p> <p class="field input"> <label for="ilce"> Ilce</label><br /> <input type="text" name="ilce" size="30" /> <span class="input-message"></span> </p> <p class="field input"> <label for="ceptelefonno"> CepTelefonNo</label><br /> <input type="text" name="ceptelefonno" size="30" /> <span class="input-message"></span> </p> <p class="field input"> <label for="ulke"> Ulke</label><br /> <input type="text" name="ulke" size="30" /> <span class="input-message"></span> </p> <p class="field input"> <label for="dahilino"> DahiliNo</label><br /> <input type="text" name="dahilino" size="30" /> <span class="input-message"></span> </p> <p class="field input"> <label for="adres"> Adres</label><br /> 152

153 <input type="text" name="adres" size="30" /> <span class="input-message"></span> </p> </div> </div> <hr /> <div id="address" class="form"> <h2 class="title"> Fatura Bilgileri</h2> <div class="content"> <p class="field input"> <label for="faturaadresadi"> FaturaAdresAdi</label><br /> <input type="text" name="faturaadresadi" size="30" /> <span class="input-message"></span> </p> <p class="field input"> <label for="sehir"> FaturaAdi</label><br /> <input type="text" name="faturaadi" size="30" /> <span class="input-message"></span> </p> <p class="field input"> <label for="ilce"> FaturaSoyadi</label><br /> <input type="text" name="faturasoyadi" size="30" /> <span class="input-message"></span> </p> <p class="field input"> <label for="faturaadres"> FaturaAdres</label><br /> <input type="text" name="faturaadres" size="30" /> <span class="input-message"></span> </p> <p class="field input"> <label for="ulke"> FaturaUlke</label><br /> <input type="text" name="faturaulke" size="30" /> <span class="input-message"></span> </p> <p class="field input"> <label for="faturasehir"> FaturaSehir</label><br /> <input type="text" name="faturasehir" size="30" /> <span class="input-message"></span> </p> 153

154 <p class="field input"> <label for="adres"> FaturaIlce</label><br /> <input type="text" name="faturailce" size="30" /> <span class="input-message"></span> </p> <p class="field input"> <label for="adres"> FaturaPostaKodu</label><br /> <input type="text" name="faturapostakodu" size="30" /> <span class="input-message"></span> </p> <p class="field input"> <label for="adres"> FaturaTelefonNo</label><br /> <input type="text" name="faturatelefonno" size="30" /> <span class="input-message"></span> </p> <p class="field input"> <label for="adres"> FaturaCepTelefonNo</label><br /> <input type="text" name="faturaceptelefonno" size="30" /> <span class="input-message"></span> </p> <p class="field input"> <label for="adres"> FaturaFaturaTipi</label><br /> <input type="text" name="faturafaturatipi" size="30" /> <span class="input-message"></span> </p> <p class="field input"> <label for="adres"> FaturaTCKimlikNo</label><br /> <input type="text" name="faturatckimlikno" size="30" /> <span class="input-message"></span> </p> <p class="field input"> <label for="adres"> FaturaFirmaAdi</label><br /> <input type="text" name="faturafirmaadi" size="30" /> <span class="input-message"></span> 154

155 </p> <p class="field input"> <label for="adres"> FaturaVergiDairesi</label><br /> <input type="text" name="faturavergidairesi" size="30" /> <p class="field input"> <label for="adres"> FaturaVergiNo</label><br /> <input type="text" name="faturavergino" size="30" /> <span class="input-message"></span> </p> </div> </div> <hr /> <p> <button type="submit" id="user-login-button">güncelle</button></p> </form> </div> 5.14 KullaniciYonetimi.cshtml Kullanıcı viewlerini tamamlamış bulnuyoruz şimdi yönetici viewlerini oluşturmya başlayabiliriz. KullaniciDuzenle ve KullaniciRolYonet sayafalarının linkleri sitenin temel güvenliği sağlanması açsısından yonetici sayfasında yer almaktadır. Projemizin güvenlik yönetimi ve düzenlemesi bu iki sayfa üzerinde yapılmaktadır. ~/Views/Kullanici klasörünün içinde yer alan Kullanici.cshtml view ını oluşturmaya başlayabiliriz. Temel İçerik Bu sayfada kullanıcı ara yüzü 3 kısımdan oluşur: 1. İlk kısımda yönetici ve kullanıcı sayısı ve onların kaç tanesinin online olduğunu öğreneceğiz 2. İkinci olarak ise sisteme kayıtlı olan kullanııcıların aranması ve listelenmesini öğreneceğiz. Kullanıcının kullanıcı adına göre veya adresine arama ve listeleme yapacağız. 3. Üçüncü ve son kısım olarak da kullanıcını özellikleri listelenirken grid kullanmayı öğreneceğiz Aşşağıda yazdığımız kod bize iki bölümün birincisinin arayüzünü System.Web.Profile; <div id="content"> 155

156 <div class="box"> <div class="content"> <form method="post" action="kullaniciyonetimi" class="manage-user"> <p><b>toplam Kullanıcı Sayısı: <p><b>sistemdeki Aktif Kullanıcılar: </p> <hr /><!-- user search options --> <p>üye (SelectList)ViewData["aramaSecenekListesi"]) <button type="submit" id="usermanageuser-button" style="height:28px">ara</button></p> <hr /><!-- the user grid --> <table class="list"> <thead> <tr> </tr> </thead> <tbody> <td align="center">adı Soyadı</td> <td align="center"> </td> <td align="center">oluşturma Tarihi</td> <td align="center">son Aktif Olduğu Tarih</td> <td align="center">onay</td> <td> </td> <td> ProfileCommon kisi = new ProfileCommon(); foreach (MembershipUser membershipuser in ViewData.Model) <tr id="user-@membershipuser.username "> ProfileGroupKisiselBilgiler Profil </td> <td>@membershipuser. </td> <td align="center">@membershipuser.creationdate.tolocaltime() </td> <td align="center">@membershipuser.lastactivitydate.tolocaltime() </td> <td align="center">@html.checkbox("approved",membershipuser.isapproved, new disabled="true") </td> <td><a href="@url.action("kullaniciduzenle", "Kullanici", new id = membershipuser.username )"><img border="0" alt="kullanıcı Düzenle" src="/images/duzelt.png" title="kullanıcı Düzenle" align="middle"/></a></td> <td align="center"><a href="@url.action("kullanicisil", "Kullanici", new id = membershipuser.username )"><img border="0" alt="kullanıcı Sil" src="/images/sil.png" title="kullanıcı Sil" align="middle"/></a></td> </tr> </tbody> 156

157 </table> </form></div> </div></div> Muhtemelen sistemde kayıtlı olan verileri götermek için niçin eski bir kullanım olan table etiketini kullandığımızı mera etmişsinizdir. Bunun sebebi ise Gridview kontrolün de çok sık kullandığımız tabloların Asp.net.2.0 da geçersiz olmasıdır. Önceleri herseyi GridView la, basit html tabloları vet foreach dögüsü kullanarak kolayca sıratayabiliyorduk. Eğer görüntünün güzel olmasını istiyorsan GridView ın sayfa numaralandırmada özelliğinden faydalanabilirsiniz. Hatta harici bir ajaz dosyası kullanarak bunu sorunu halledebilirsiniz. Bu Gridler ya XML kullanarak ya da Json kullandığımızdan eski olan GridViewlardan daha hızlı olacak hem de ViewState kodu içeridinde yer alan kötü server veri kontrolünden kaçınmış olacaksınız. Bizim kayit.js dosyamız ~/Content/scripts/ ın içerisinde yer almaktadır. Ayrıca bu javascript dosyamız KullaniciSil action metodumuzlada ilişkilidir ve biz bunları başında ayırırız. İhtiyacımız olan javascript kodu aşağıdaki gibidir. <asp:content ID= ScriptContent ContentPlaceHolderID= ScriptContent runat= server > <script type= text/javascript src= /content/scripts/manage-users.js ></script> </asp:content> 157

158 KullaniciDuzenle.js $(.delete-user-button ).click(function() var userid = $(this).attr( meta:id ); $.post( /User/DeleteUser, id: userid, function(data) $( #user- + data.object.id).remove();, json ); return false; ); Temel olarak yazdığımız koddan beklediğimiz javascript sayesinde sil-kullanicibuton unun tıklanma olaynın engelenmesidir. Bunun sebebi ise silinecek olan verinin Id sini elde edene kadar silme butonu aktif olmamalıdır ki program hata vermemsin. Öncelikle Jquery bizim Http Post olan KullaniciSil action metodumuzu çalıştıracak. Daha sonra siz silinen elemanın view dan gittiğini göreceksiniz bu silinmek istenen elemanın Id si ile tablodan silinen elemanın Id si aynı olmak zorundadır. Böylecelikle silinmek istenen eleman aynı anda hem View dan hemde veritabanından silinmiş olacaktır KullaniciDuzenle.cshtml Kullanıcı Düzenle View ı KullaniciYonet tablosunun bir satırından birbirlerine bağlıdırlar. KullaniciDuzenle sayfası Url in sorgu yazısından kullanıcı adını parametre olarak almış ve yönetici üye olan bu kullanıcının hakkında tüm bilgileri görebilmesi sağlanmıştır. Sayfanın arayüzü basit iki bölüme ayrılmıştır. 1. İlk kısımda membership den okunan veriler gösterilir. MemberShip den very gonderebilmek için mutlak IsApproved özelliği kullanılmalıdır. 2. İkinci bölümde ise Kullanıcıların yetki alanlarını belirlerken checkbox kullanmamız gerekmektedir.yönetici yine bu sayfadan kullanıcı silebilmeli veya ekleyebilmelidir. Temel İçerik KullaniciDuzenle.cshtml sayfasının kodu aşşağıdaki as string), () => "<div class=\"error\">" + TempData["HataMesaj"] + "</div>").elseif(!string.isnullorempty(tempdata["tamamlandimesaj"] as string), () => "<div class=\"success\">" + TempData["TamamlandiMesaj"] + "</div>").elseif(!string.isnullorempty(tempdata["uyarimesaj"] as string), () => "<div class=\"warning\">" + TempData["UyariMesaj"] + "</div>") 158

159 .ElseIf(!String.IsNullOrEmpty(TempData["BilgiMesaj"] as string), () => "<div class=\"info\">" + TempData["BilgiMesaj"] + "</div>").else(() => String.Empty)) <form method="post" action="kullaniciduzenle" class="manage-user"> <!-- The hidden control manages the username <!-- Shows detailed information about member from MembershipUser object --> <p><b>kullanıcı Adı:</b>@Model.UserName </p> </p> <p><b>en Son Giriş <p><b>en Son <p><b>çevirim İçi Model.IsOnline, new disabled = "true" )</p> Model.IsApproved)</p> Model.IsLockedOut, new disabled = "true" )</p> <hr /> <!-- This portion allows you to actually edit the roles of the user --> <h2>kullanıcı Rolünü Düzenle</h2> foreach (string role in + role, Roles.IsUserInRole(Model.UserName, role))*@ if( Roles.IsUserInRole(Model.UserName, role) == true) <input checked="checked" id="role_admin" name="role.@role" type="checkbox" value="true" /> else <input id="role_admin" name="role.@role" type="checkbox" value="true" for="role.@role ">@role </label></li>*@ </ul> <p> <button type="submit" id="user-edituser-button">kullanıcı Güncelle</button> <button type="button" onclick="location.href='/kullanici/kullaniciyonetimi'" style="margin-left: 2em;">Geri Dön</button> </p> 159

160 </form> 5.16 KullaniciRolYonet View En çok yapılması gereken şey ise kulanıcının yetki alanını genişletirken veya kısıtlarken tam istediğiniz gibi tam bir güvenlik çerçevesinde olmalıdır. Kullanıcıya yetki alanını genişletebilmek veya kısıtlayabilmek için gerekli olan link admin sayfasında olmalıdır. Kullanıcı Düzenle sayfası bunun basitlerştirilmiş bir örneğidir. Temel içerik Temel içerik bölümü yeni yetki verebilmek için bir tane textbox ve Butondan oluşmaktadır. Önceden var olan yetkileri silebilmek için Sil Butonunu kullanabilirsiniz. Bu sayfanın kodu aşağıdaki as string), () => "<div class=\"error\">" + TempData["HataMesaj"] + "</div>").elseif(!string.isnullorempty(tempdata["tamamlandimesaj"] as string), () => "<div class=\"success\">" + TempData["TamamlandiMesaj"] + "</div>").elseif(!string.isnullorempty(tempdata["uyarimesaj"] as string), () => "<div class=\"warning\">" + TempData["UyariMesaj"] + "</div>").elseif(!string.isnullorempty(tempdata["bilgimesaj"] as string), () => "<div class=\"info\">" + TempData["BilgiMesaj"] + "</div>").else(() => String.Empty)) <form method="post" action="kullanicirololustur" class="manage-role"> <p><b>toplam Rol Sayısı: </b>@viewdata["toplamrol"].tostring()</p> <hr /> 160

161 <!-- Functionality to add new roles --> <p>yeni Rol <button type="submit" id="usermanagerole-button" style="height:28px">rol Ekle</button></p> <hr /> <!-- Table showing old rows --> <table width="50%" cellpadding="2" cellspacing="0" align="left" summary="user Grid" border="1"> <tr style="font-weight:bold; background-color:#a8c3cb; "> <td align="center">rol Adı</td> <td> </td> foreach (String role in Roles.GetAllRoles()) <tr id="role-@role "> <td>@role </td> <td align="center"><a class="delete-role-button" href="#" meta:id="@role "><img border="0" alt="rol Sil" src="/content/images/deletesymbol.png" title="rol Sil" align="middle"/></a></td> </tr> </table> ScriptContent <script type="text/javascript" src="/content/scripts/yonet-rol.js"></script> 161

162 Script İçerik Kullanıcı Yönetiminde de java script içermektedir.buradaki Javascript siincek olan elemn ile ilgilidir. İçeriği aşağıdaki gibi olan java script dosyasının bizim veri tabanındaki işlemlerle ilgilenir. <asp:content ID= ScriptContent ContentPlaceHolderID= ScriptContent runat= server > <script type= text/javascript src= /content/scripts/manage-users.js ></script> </asp:content> KullaniciRolYonet.js KullaniciRolYonet.js view ı projemizde Content klasöründe scripts klasörünün içindedir. Ve KullaniciRolSil action metodu ile ilişkilidir. KullaniciRolYonet.js kodu aşağıdaki gibidir. $(.delete-user-button ).click(function() var userid = $(this).attr( meta:id ); $.post( /User/DeleteUser, id: userid, function(data) $( #user- + data.object.id).remove();, json ); return false; ); 162