Asp.Net Mvc – Ajax ile Üye Girişi – Üyelik Sistemi 2 (Asp.Net Mvc Yazı Dizisi – 21)
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'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.
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.
Bitmesinn :S :'( daha öğrenecek çok şeyimiz var hocam… ne güzel takipteydik asp.net mvc serisini.. :S :'(
Merhaba Murat,
Öncelikle takip ettiğin için teşekkürler. Bundan sonraki süreçte, daha ileri seviye asp.net mvc, web api, javascript framework derslerim olacak. O yüzden takipte kalmanı öneririm.
hocam 1 aydır hergün yeniliyorum blogunuzu ileri mvc üzerine daha 1 konu yayınlamadınız bizleri unuttun hocam 🙁 sabırsızlıkla beklemedeyiz halen mvc öğrenmek seninle güzel ve kolay. birde ileri routing konularına değinebilir misin sayın hocam mesela adres.com/user/murat dersem wall.cshtml yönlenecek eğer adres.com/user/profile dersem profile.cshtml e yönlenecek bu şekilde kısıtlamayı nasıl yapabiliriz ? Yardımın lazım hocam.
Merhaba Murat,
Öncelikle bu güzel sözlerin için teşekkür ederim.
Ne yazıkki iş yoğunluğundan, bir süredir makale yazamıyorum. En kısa sürede yazılarıma devam edeceğim. Bu noktada Route konularına ayrıca değineceğim.
Senin soruna gelecek olursak;
App_Start>RouteConfig.cs dosyasının içerisine
şeklinde bir Route tanımlayabilirsin. Burada Controller'i belirtmemişsin bu yüzden Home dedim.
Merhaba Murat,
Aşağıdaki adresten, eklediğim ileri seviye Route konusunu inceleyebilirsin.
http://www.abdurrahmangungor.com/asp-net-mvc-routing-mekanizmasi-ve-mvc-5-ile-gelen-yenilikler/
hocam bizim MvcProjesiSon.mdf dosyasını normal sqlserver Management Stuio da nasıl çalışır yapacağız..C:\Users\user\MvcProjesiSon.mdf ve log. dosyasını C:\Program Files\Microsoft SQL Server\MSSQL11.SQLEXPRESS\MSSQL\DATA\ altına kopyaladım ve sqlserverdan baktığımda veriler boş gelmekte. Ayrıca VS 2013 2 te connectionStringste gerekli düzeltmeleri de yaptım "<add name="MvcProjesiContext" connectionString="Data Source=PC\SQLEXPRESS;Initial Catalog=MvcProjesiSon;Integrated Security=True" providerName="System.Data.SqlClient" />" fakat sonuç başarısız.. nerede hata yapıyor olabilirim..
Merhaba Ahmet,
web.config’teki connectionStrings içerisinde bulunan PC\SqlExpress yolu sadece Sql Server için kullanılır. Senin mdf dosyanı bu yolla kullanamazsın. Sql Management Studio’ya mdf eklemek için şu linki inceleyebilirsin.
http://learningsqlserver.wordpress.com/2011/02/13/how-can-i-open-mdf-and-ldf-files-in-sql-server-attach-tutorial-troublshooting/
Teşekür ederim hocam.Attach ile sorun kalmadı… Yeni dersleriniz için sabırsızlandığımızı bilmeni isterim.
Hocam epeydir üzerinde denemeler yaptım ve malesef amacıma ulaşmadım.Aslında hiç yol alamadığım önemli bir konuda bir sorum var.Bizim
MvcProjesi
yazı dizisindeki uygulama örneğimizde olduğu gibi Entity Framework Code First ile tasarladığımız bir veri tabanını uygulamaya sunduğumuzu varsayarsak ileride olası yeni tablo ekleme veya tablolar üzerinde yeni alanlar açma ihtiyacımızı gidermek istediğimizde verilerimizi de kaybetmeden nasıl bir çalışma yapmamız gerektiği konusu.Örneğimizde de olduğu gibi biz değişiklik yaptığımızdaConnectionstring bloğundaki
"<
add
name
=
"MvcProjesiContext"
connectionString
=
"Data Source=(LocalDb)\v11.0;Initial Catalog=MvcProjesi;Integrated Security=True"
providerName
=
"System.Data.SqlClient"
/>
" Catalog=MvcProjesi adını Catalog=MvcProjesiYeni veya Catalog=MvcProjesiSon gibi değişiklikler yapmak zorunda kalıyoruz. Bu değişikliği yapmadan ilgili veri tabanı üzeinde veri kaybı olmadan nasıl geliştirme yapacağız bu konuda bir bilgi verirseniz çok sevinim.. Şimdiden çok teşekkür ederim.Merhaba Ahmet,
Bizin örneğimizde denediğimiz yöntem, profesyonel anlamda kullanılan bir yöntem değil. Senin bahsettiğin şekilde var olan, içerisinde veriler olan veritabanını güncelleme şansına sahibiz. Bununla ilgili olarak Code First Migrations konusunu incelemeni öneririm.
Teşekür ederim..
Merhaba,
yazılarınızı okuyarak MVC 4 Öğrenme konusunda biraz ilerledim, bir kaç sorum var,
1-) Ben üyelik sistemi olarak MemberShip kullanıyorum sakıncası varmıdır ?
2-) Ben Her sayfada giriş kısmı olsun istiyorum nasıl desem navbarda login kısmı olsun istiyorum bi türlü layout içine login ekleyemedim bunu anlatırmısınız acaba ?
Merhaba Burak,
Öncelikle ilgin için teşekkür ederim. Sorularına gelecek olursak,
1- Membership sistemini gönül rahatlığıyla kullanabilirsin. Çok ekstra bir özelleştirmeye ihtiyaç duymadığın sürece, Membership çok yeterli bir yapı.
2- Bunun için, bir Partial View tasarla, Partial View’inin içerisine giriş ekranını yerleştir. Ardından da bu View’i Layout içerisine ekle. Bununla alakalı konu anlatımlarım, faydalı olacaktır.
Kolaylıklar diliyorum.
Hocam, Dediklerinizi yaptım ama olmadı, giriş yap diyorum hiç bir işlem gerçekleştirmiyor sadece sayfa yenileniyor, ama ayrı bir login sayfam var orda üst navbardan giriş yapınca çalışıyor :S
Merhaba Burak,
Giriş işlemini sayfa değişmeden yapmak istiyorsan eğer, Ajax ile yapman gerekmektedir. Ajax ile ilgili makaleler sitede mevcut.
Hocam ayrı bir anlatım yapamazmısınız karışık geldi MVC Yeni başladımda asp.net form'dan geçtim
Merhaba Burak,
Şu an için bu kadar geniş kapsamlı bir anlatım yapma imkanım yok. Ancak en azından sana teorik olarak anlatayım, bunun üzerine yapacağın araştırma ile konuyu oturtabilirsin.
Kolay gelsin.
Hocam bi türlü yapamadım , 🙂 mail adresiniz varsa teamviewer ile bağlanıp bakabilirmisiniz ?
Öncelikle verdiğiniz tüm emekler için teşekkürler. Her konuda olduğu gibi, Türkçe kaynağın az bulunduğu, olanların da çoğunun gereksiz, eksik, yanlış bilgiler içerdiği bir alanda böyle güzel bir seri yapmış olduğunuz için sizi tebrik ederim. Burada olsaydı iyi olurdu dediğim tek şey; üyelik sisteminin yapılmasının ardından, bir üyenin giriş yaparak bir makale oluşturmasının gösterilmesi oldu. Zira bütün veritabanı işlemlerini code-behind'da yapmış oldunuz. Sanıyorum ki MVC öğrenmek isteyen bir çok kişi için de bu faydalı olurdu. Belki üye sayfasına "Yeni Makale Yayınla" özelliği koyarak, dynamic içeriğin nasıl oluşturulacağını açıklarsanız, yazdığınız bu faydalı seri çok daha güzel bir sonla bitmiş olur. Çalışmalarınızda başarılar dilerim.
Merhaba Mahmut,
Öncelikle güzel sözlerin için teşekkür ederim.
Önerin çok güzel, en kısa zamanda değerlendirmeye alacağım.
Kolay gelsin.
Abdurrahman bey bu projeye seo uyumlu link yapımını da ekler misiniz bu durumda baya kapsamlı olur proje, elinize sağlık.
Merhaba Kaan,
Seo uyumunun göbeğine aslında Url Routing konusu oturmaktadır.
Bununla alakalı olarak aşağıdaki yazımı incelemeni önemle öneririm.
http://www.abdurrahmangungor.com/asp-net-mvc-routing-mekanizmasi-ve-mvc-5-ile-gelen-yenilikler/
Abdurrahman kardeşim mvc makalesinin tamamını okudum.
Bundan öncesinde birkaç kez mvc ögrenmek isteyipte vazgeçmiştim fakat senin sayende çok şükür alt yapıyı oturttum diyebilirim.Teşekkür ederim.
Allah senden razı olsun….
Merhaba Ahmet,
Anlatımımlarının, senin MVC öğrenimine faydası olması beni çok mutlu etti.
Allan hepimizden razı olsun inşallah.
Mesleğinde başarılar diliyorum.
Merhaba hocam ben mvc 4 ‘ de blog sitesi geliştiriyorum ben mvc 4 un kendine ait membership database i ile çalışıyorum sizce doğrumu yoksa sizin gibi kendim mi oluşturayım ?
şimdiden teşekkürler.
Merhaba Burak,
Açıkçası Membership yapısı oldukça iyi bir yapı. Çok ekstra bir özelliğe ihtiyaç duymadığın sürecek kesinlikle membership’i tavsiye ediyorum.
Merhaba hocam bi sorum daha var ben blog geliştiriyorum ama mvc 4’da siz mvc 5 için anlatmışsınız bi fark varmı acaba yada uygulamanızın aynısını uygularken sıkıntı çıkarır mı ? bide sizin blog mvc platformundamı geliştirildi ?
Teşekkürler.
Merhaba Burak,
Mvc 5 ile Mvc 4 arasında blog projesinde fark olmayacaktır. Membership sisteminde ufak farklılıklar var. Projeyi Mvc 4 ile geliştirsende bir sorun çıkacağını sanmıyorum.
21 makaleyi bir çırpıda inceleyiverdim. Gerçekten sade ve güzel bir anlatım yapılmış. Benim gibi MVC merakı yeni başlayanlar için çok faydalı. En azından kafamdaki karışıklığı ortadan kaldırdı. Gerçi şimdide routing makalesine bakacağım ama aynı şekilde yeni makaleleri büyük bir merakla bekliyorum. Her makaleye tek tek yorum yazmak yerine bu makalede hepsi için tek tek teşekkür ediyorum emeğinize sağlık.
Merhaba Çağlar,
İlgine teşekkür ederim.
Kolaylıklar diliyorum.
Emeğiniz ve iyi niyetiniz için çok teşekkür ederim. Allah iyi niyetinizin karşılığını versin.
İmkanınız olduğu sürece bu şekilde kod yazımı ile kalmayıp bir projenin baştan sona nasıl gerçekleştiğini açıklayarak anlatan sistemler ile bizim gibi kendini geliştirmek isteyenlere yardımcı olacağınıza inanıyorum. Yeni projelerinizi bekliyorum.
Saygılar,
mvc 4 code first ile bir blok yapmaya çalışıyorum. Yorum yap'ı çalıştırdım ama cevapla işini yapamadım. İzleyeceğim yol hakkında yardımınız olur mu?
Hocam merhaba
Gerçekten çok güzel bir çalışma adım adım yapmaya başladım proje ödevim için lakin tek sıkıntım buna tema nasıl ekleyebilirim birde hocam içinde entity olması lazım dedi acaba baştan sona kadar bu projeyi yapsam olur mu
Kardeşim ellerine sağlık güzel makale hazırlamışsın. MVC de bazı noktalar kafama takılmıştı aydınlattın sağol. İyi çalışmalar diliyorum.
Abdurrahman bey yazidizinizi bastan sona kadar okudum ve inceledim. Benim adima cok faydali oldu, tesekkür ederim. Sadece üyelik islemleri üzerinde bir kaç makale daha yazsaniz daha güzel olacagi kanaatindeyim. Makalelerinizin devamini bekliyorum. Tesekkür ediyorum….