Asp.Net Mvc – Ajax ile Üye Girişi – Üyelik Sistemi 2 (Asp.Net Mvc Yazı Dizisi – 21)

Gönderen : Tarih : 07 Nisan 2014 35 Yorum

Merhaba Arkadaşlar,

Geliştirmekte olduğumuz blog projesinde, bir önceki derste yeni üyelik ve resim yükleme işlemlerini incelemiştik.

Önceki yazımızda, bir takım değişiklikler ve eklemeler yaptım. Eğer makaleyi 06.04.2014 tarihinden önce okuduysanız, makaleyi tekrar incelemenizi ve projenin son halini tekrar indirmenizi özellikle tavsiye ediyorum.

Bugünkü dersimizde ise, üye girişi işlemlerini yapıyor olacağız. Bu sistem bize aynı zamanda yetkilendirmeyi de sağlıyor olacak. Burada önemli olan nokta, üyelik için kendi yapımızı kullanıyor olmamız. Microsoft'un Asp.Net Membership, Simple Membership (Mvc 4) gibi yapıları bulunmakta ve işlerini çok iyi bir şekilde yapmaktadır. Ancak istedim ki, işin mantığını daha iyi anlayalım. Yoksa Membership ile alakalı yığınla makale internette bulunabilir.

Üye Girişi

  • Öncelikle, önceki derslerde kullandığımız projemizin son halini açalım. (İndirmek için lütfen tıklayınız.)
  • Controllers>UyelikController dosyamızı açalım ve içerisine, aşağıdaki üye giriş sayfasını oluşturacağımız, UyeGiris Action'umuzu ekleyelim. 
 public ActionResult UyeGiris()
        {
            return View();
        }

Görüldüğü üzere, geriye View'imizi döndüren, Action'umuzu ekledik.

  • Şimdi UyeGiris Action'umuza sağ tıklayarak Add View diyelim ve ayarlarını aşağıdaki gibi yapalım.

UyeGiris View'i ekleme

  • UyeGiris View'imizin içeriğinde, Asp.Net Mvc'nin sunduğu Ajax teknolojisini kullanacağız.

Ajax : Ajax teknolojisi, Html, Javascript işlemlerinin asenkron olarak yapılması demektir. Yani bir şey ile ilgili bir talep sunucuya gönderildiğinde, sunucu gerekli cevabı verir. Bu cevap javascript tarafından sayfanın her hangi bir yerine yansıtılır. Bu noktada sayfanın tamamı, sunucuya gidip gelmez ve sayfa yenilenmez. Böylelikle hem çok ciddi performans kazancımız olur, hemde site yerel bir uygulama gibi görüntülenir. Yeni web dünyasının vazgeçilmezidir.

  • Bunun için öncelikle, projemize, Microsoft jQuery Unobtrusive Ajax paketini Nuget Package Manager aracılığıyla yüklememiz gerekmektedir. Yükleme işlemi için aşağıdaki resimleri takip edin.

Nuget Package Managere giriş

Ajax paket yükleme 1

Ajax paket yükleme 2

Ajax paket yükleme 3

Resimleri takip ederek kurulumu yaptık. (Manage Nuget Package ile ilgili rehber için tıklayınız.)

  • Şimdi de, yeni eklediğimiz, javascript dosyasını sisteme tanıtmamız lazım.

BundleConfig

  • App_Start>BundleConfig.cs dosyasını açalım. Bu dosyanın içerisinde, sistemde kullanmış olduğumuz, script ve css dosyalarını sisteme entegre ediyoruz. Bu dosya ile entegre etmenin avantajı ise, sistemin tüm burada ekli dosyaları sıkıştırırak tek dosya haline getiriyor olması. Böylelikle hem performans kazancımız oluyor, hem de dosyadaki kodlarımızın dışarıdan okunaklığı azaldığından, güvenlikte artış meydana geliyor. Son bir avantajımızda, dosyada bir değişiklik olduğunda, kendiliğinden, isimde ufak değişikler yaparak tarayıcı önbelleğini temizlemeye gerek kalmaksızın dosyamızı güncelliyor olması.
  • Script dosyası (javascript vs.) eklerken; 
 bundles.Add(new ScriptBundle("dosya sıkıştırılıp, gösterilecek yer").Include(
                        "asıl dosyanın yolu"));
  • Style dosyası (css vs.) eklerken ise; 
 bundles.Add(new StyleBundle("dosya sıkıştırıp, gösterilecek yer").Include(
                      "asıl dosyanın yolu"));

şeklinde dosyalarımızı ekleyebiliyoruz. Şimdi jquery.unobtrusive-ajax dosyamızı ekleyebiliriz.

  • BundleConfig dosyamıza aşağıdaki kodları ekleyelim. 
 //Mvc Ajax işlemleri için aşağıdaki dosyamızı ekledik.
            bundles.Add(new ScriptBundle("~/bundles/jquery-unobtrusive").Include(
                      "~/Scripts/jquery.unobtrusive-ajax.js"));
  • Dosyamızı kaydettikten sonra, bu dosyamızın, tüm View sayfaları tarafından kullanılmasını sağlamak amacıyla, Views>Shared>_Layout.cshtml dosyamızı açalım.  
 @Scripts.Render("~/bundles/jquery")

satırından sonraki satıra, 

 <!--Ajax işlemleri için gereken dosyamızı burada tüm sayfalarda kullanılacak şekilde tanıttık.
        Ayrıca dosyanın orijinal yolunu değil, bizim belirlediğimiz ~/bundles/jquery-unobtrusive
        yolunun kullanıldığına dikkat edin.-->
    @Scripts.Render("~/bundles/jquery-unobtrusive")

kodunu ekleyelim ve dosyayı kaydedelim.

  • Artık üye giriş sayfamızı hazırlayabiliriz. Bunun için, Views>Uyelik>UyeGiris.cshtml sayfasını açalım ve içeriğini aşağıdaki gibi düzenleyelim. 
<!--Her hangi bir model kullanmadık burada doğrulamayı kendimiz elle yapacağız-->
@{
    ViewBag.Title = "Üye Girişi";
}
<!--Layout sayfamızda sayfanın en alt kısmında scripts adlı bir sectionumuz tanımlanmıştı.
    Script ve css kodlarımızı scripts sectionuna koyacağız.
    Detaylı bilgi önceki yazılarımızda vardır.-->
@section scripts{
    <style type="text/css">
        #formKapsayici {
            box-shadow: 0 0 5px gray;
            padding: 25px;
            height: 500px;
        }

        #divSol, #divSag {
            float: left;
            margin-left: 25px;
        }

            #divSol *, #divSag * {
                margin-top: 15px;
            }

        input[type="text"] {
            width: 250px;
        }

        #btnUyeOl {
            /*clear komutu ile önceki divlerin sola yaslanarak sıralanmasında, butonun bu yaslanmaya
            uymayıp alt satıra inmesini sağlıyoruz*/
            clear: both;
            display: block;
            margin-left: 132px;
        }

        #divSonuc {
            color: red;
        }
    </style>
}
<h2>Üye Girişi</h2>
@using (Ajax.BeginForm("UyeGirisi", "Uyelik", new AjaxOptions { HttpMethod = "POST", UpdateTargetId = "divSonuc" }, new { id = "formKapsayici" }))
{
    <div id="divSol">
        @Html.Label("E-Posta Adresiniz")<br />
        @Html.Label("Şifreniz")
    </div>
    <div id="divSag">
        : @Html.TextBox("txtPosta")<br />
        : @Html.Password("pswSifre")
    </div>
    <input type="submit" value="Üye Ol" id="btnUyeOl" />
    <div id="divSonuc"></div>
}
  • Şimdi üye giriş ekranında girişin yapılacağı, onaylanacağı Action'umuzu da yazalım. Controllers>UyelikController.cs dosyasının içerisine, UyeGirisi adlı bir Action ekleyelim. Ekleyeceğimiz kodlar aşağıdadır; 
 [HttpPost]
        public string UyeGirisi()
        {
            //Request.Form["html elementinin name özelliği"] ile Post edilen formdaki elemanların
            //değerlerini alabiliyoruz. Bu metod yalnızca Post ile çalışır.
            string posta = Request.Form["txtPosta"];
            string sifre = Request.Form["pswSifre"];
            if (String.IsNullOrEmpty(posta) && String.IsNullOrEmpty(sifre))
            {
                return "E-Posta adresinizi ve şifrenizi girmediniz.";
            }
            else if (String.IsNullOrEmpty(posta))
            {
                return "E-posta adresinizi girmediniz.";
            }
            else if (string.IsNullOrEmpty(sifre))
            {
                return "Şifrenizi girmediniz.";
            }
            else
            {
                using (MvcProjesiContext db = new MvcProjesiContext())
                {
                    //Normalde şifreyi hashleyerek yazdırmamız ve kontrol etmemiz gerekir.
                    var uye = (from i in db.Uyes where i.Sifre == sifre && i.EPosta == posta select i).SingleOrDefault();

                    if (uye == null) return "Kullanıcı adınızı ya da şifreyi hatalı girdiniz.";

                    //Session'da müşteri ile ilgili bilgileri saklamaktayız.
                    //Güvenlik açısından bilgileri şifreleyerek saklamamız daha doğru bir yöntemdir.
                    //Asp.Net Membership yapısı, bu güvenliği sunmaktadır.
                    Session["uyeId"] = uye.UyeId;

                    //Burada eğer, kullanıcı bilgileri, sistemde eşleşirse, geriye girişin başarılı
                    //olduğuna dair bir mesaj ve 3 saniye sonra, ana sayfaya yönlendirecek bir
                    //javascript kodu ekliyoruz.
                    return "Sisteme, başarıyla giriş yaptınız.<script type='text/javascript'>setTimeout(function(){window.location='/'},3000);</script>";
                }
            }
        }

Evet arkadaşlar, böylelikle projemizi bitirmiş olduk.

Basit bir projenin yapımının, 21 makalelik bir ders halinde olması, aslında kurumsal bir projenin ne kadar daha ağır olacağını göstermektedir. 

Ben elimden geldiğince, değişik yöntemlerle anlatım yapmaya çalıştım. Her yerde bulabileceğiniz bilgilerin, dışına çıkmaya gayret gösterdim. Bununla birlikte, projeyi mümkün olduğunca sade tutmaya çalıştım. Bu yüzden, projede, güvenlik anlamında hiç bir önlem almadık. 

Umarım sizlere faydası olmuştur.

Sonraki yazımda, kurumsal ölçekte bir proje geliştirirken nasıl bir yol izlemeliyiz, hangi kütüphaneleri kullanmalıyız, hangi standartlara göre kod yazmalıyız, ona değineceğim. Böylelikle serimizi bitirmiş oluyoruz.

Projenin son halini buradan indirebilirsiniz.

Hepinize kolaylıklar diliyorum.

KONULAR