ASP.NET MVC 4.0 Facebook Login

Posted on 25 Mart 2013 by Özcan BAYĞUŞ — 3 Comments ↓

1- İlk olarak yeni bir proje açıyoruz. Projeyi açarken ASP.NET MVC 4 Web Aplication’i seçiyoruz. Biz projemize MvcFaceBookLogin ismini verdik siz istediğiniz ismi verebilirsiniz.

2- Template’te Internet Aplication ve View Engine de Razor’u seçiyoruz.

3- https://developers.facebook.com/apps adresine facebook hesabımız ile giriş yaptıktan sonra uygulama oluştur butonuna tıklıyoruz. Biz uygulamamıza MVC4FBLogin ismini verdik siz istediğiniz ismi verebilirsiniz. Devam butonu ile uygulamamızı oluşturuyoruz.

4- Daha sonra sitemizin adresini alıyoruz. Projemizi çalıştırdığımızda tarayıcımızın adres satırından kopyalayabilirsiniz.

5- Facebook Aplication sayfasına geri dönerek  facebook girişi destekleyen internet siteleri site URL yazan kısma sitemizin adresini yazıp kaydediyoruz.

asp.net Validation kullanımı

Bu derste Asp.Net için önemli bir konu olan validation kontrollerini anlatmaya çalışacağım.Hazırladığınız web sitelerinde, bir alanın boş girilmemesi, belirli bir değerden fazlasının verilememesi gibi koşullar oluşturmak istiyorsak Validation kontrollerini kullanmamız gerekir.Validation (doğrulama) kontrolleri istemci tarafında çalışırlar.Validation kontrollerine, Toolbox penceresinde Validation sekmesi altından erişebilirsiniz

Şimdi bu validation kontrollerini inceleyelim;

Required Field Validator

Kullanıcıdan bir veri almak istendiğinde, kullanıcının o alanı boş geçmesi durumunda kullanılacak olan kontroldür.Bu kontrol ile,belirtilen alana veri girilmediğinde bir uyarı mesajı oluşturulur.Böylece, veriler sunucuya gitmeden hata üretilir

Bu kontrol, Toolbox’tan sürükle bırak yöntemi ile form üzerine bırakılarak kullanılabilir.F4 tuşuna basarak property penceresinden ;

ControlToValidate ile boş olup olmadığı kontrol edilecek olan alan belirtilir.Alttaki örnekte textbox’ın boş olup olmadığı kontrol edildi

ErrorMessage ile hata oluştuğunda verilecek olan hata mesajı belirtilir (Örn: Bu alan boş girilemez )

ForeColor ile hata mesajının rengi belirtilir

Eklediğimiz Kontrolün kodu ise şu şekilde olacaktır

<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server"
ControlToValidate="TextBox1" ErrorMessage="Boş Girilemez">
</asp:RequiredFieldValidator>
<br />

Range Validator

Kullanıcının girdiği değerin belirli bir aralıkta olması isteniyorsa bu kontrol kullanılır.Örneğin bizden vize notunu girmemizi istiyorsa, 100 den fazla ve 0 dan az not girilmemesine izin verilmemelidir.Burada kontrolün üzerine gelip F4 tuşuna basarak property penceresinden;

MinimumValue ile girilebilecek en düşük değer belirtilir

MaximumValue ile girilebilecek en yüksek değer belirtilir

Type ile kontrolün hangi veri tipine göre yapılacağı belirtilir.Bu sadece sayı (int) olmak zorunda değildir

ErrorMessage ile, bir hata oluştuğunda gösterilecek mesaj belirlenir.

ControlToValidate ile aralığı kontrol edilecek olan araç belirtilir

Property Penceresindeki görünümü;

Kod kısmı ise şöyle olacaktır

<asp:RangeValidator ID="RangeValidator1" runat="server"
ControlToValidate="TextBox2"
ErrorMessage="Belirtilen Aralıkta Değil"
MaximumValue="100"
MinimumValue="0"
Type="Integer">
</asp:RangeValidator>

Regular Expression Validator

Kullanıcının girdiği değerlerin belirli bir sözdizimine uyup uymadığını kontrol eder.Örneğin bir e-mail adresi girilmesi isteniyorsa @ işareti girilmediyse uyarı verilmesi sağlanır.Burada kontrolün üzerine gelip F4 tuşuna basarak property penceresinden;

Validation Expression ile belirtilen sözdizimi ayarlanır

Error Message ile gösterilecek hata mesajı belirlenir

ControlToValidate ile kontrol edilecek olan alan belirlenir.

Compare Validator

Kullanıcının girdiği değerlerin karşılaştırılmasında kullanılır.Örneğin üyeliklerde girilen şifrenin tekrar girilmesi istendiğinde kullanılırlar.Girilen 2 değer farklı olduğunda bir hata mesajı verilir.Burada kontrolün üzerine gelip F4 tuşuna basarak property penceresinden;

ControlToCompare ile belirtilen alana girilen değer,  başka bir alanın içindeki değer ile karşılaştırılacaksa kullanılır

ControlToValidate ile karşılaştırılacak 2.alan belirtilir

ValueToCompare ile sabit bir değer karşılaştırılacaksa bu alana belirtilir

ErrorMessage ile hata olduğunda gösterilecek mesaj belirlenir

Type ile karşılaştırılacak değerlerin tipi belirlenir

Custom Validator

Bu kontrol, var olan doğrulama kontrollerinin ihtiyaca cevap vermediği durumlarda, kendi kodumuzu kendimiz yazmamızı sağlar.

Validation Summary

Yukarıdaki kontrollerin ürettiği hata mesajlarını, toplu olarak tek bir yerde göstermek istiyorsak bu kontrol kullanılır.Doğrudan sayfaya eklenerek bir ayar yapmadan kullanılır.Bir hata oluştuğunda, hata üreten doğrulama kontrolünün hata mesajı, ValidationSummary içerisinde görüntüleniyor olacaktır. Ancak, herhangi bir ayarlama yapılmadı ise hata mesajı hem ValidationSummary hem de doğrulama kontrolünün bulunduğu alanda görüntülenecektir.Aynı hata mesajını iki yerde görüntülemek iyi bir tasarım yapmak adına pek de olumlu bir davranış değildir. Text özelliğine * işareti gibi tek karakterli bir değer atanarak sadece hatanın o alanda oluştuğunu gösteriyor olmak, daha iyi olur.

Validation Summary kontrolünün DisplayMode özelliği ile toplu gösterilecek olan uyarıların en altta çıkması sağlanabilir

Son olarak Yaptığım örneğin bir resmini gösterelim.Burada Gönder Butonuna basınca, Boş girilen yerler olursa, e-mail söz dizimine uygun olmayan bir ifade olursa veya şifreler uyuşmazsa Kırmızı ile gösterilen alanlarda uyarı mesajı verilecek.

Son olarak da ek bilgi olarak şunları söyleyelim
->Eğer bir alanda hem boş geçilmemesi hem de düzenli ifade kontrolü yapılmaması isteniyorsa bu kontroller yanyana eklenebilir
->Doğrulama kontrollerinde bir hata oluştuğunda imlecin,hatanın olduğu yere konumlanması isteniyorsaSetFocusOnError özelliği true yapılmalıdır.

->Bu anlattığımız kontrollerin hataları butona tıklandığında çıkmaktadır.Fakat 2 tane butonumuz olursa hangisi için bu kontrolü yapacak? Bunun için Validation Group özelliğini kullanmalıyız.ValidationGroup özelliği ile aynı sayfa içerisinde farklı doğrulama grupları kurularak, bu gruplardaki doğrulama kontrollerinden diğer grubun etkilenmesinin önüne geçilir

Asp.net veri tabanı connection web.config

 Hazırlayacağımız projeler için ilk olarak veritabanı kısmı hazırlanmalıdır.Bu, ileride projenizin gidişatı açısından önem taşımaktadır.Veritabanı hazırlanmadan projeye başlanırsa zaman kaybı yaşanır.İlk olarak Visual Studio içerisine veritabanı nasıl eklenir onu anlatayım

    Visual Studio İçerisine Veritabanı Ekleme

  Visual Studio da yeni bir web site veya bir project oluşturduğumuzda sol tarafta Server Explorerbulunmaktadır.Eğer yoksa View Menüsünden açabilirsiniz.Daha sonra Server Explorer üzerindeDataConnection‘a sağ tıklayarak Add Connection‘ geliyoruz

  Çıkan sayfada Server Name kısmına . koyuyoruz (kendi bilgisayarımızda çalışmak için)

  Select or enter a database name kısmına ise bir veritabanı adı giriyoruz veya SQLSERVER üzerinde hazır bulunan veritabanlarından birisini seçiyoruz ve OK butonuna basıyoruz. Böylece veritabanımız projemize eklenmiş oluyor.Yine Server Explorer üzerinde gelen veritabanımızda Tables‘a sağ tıklayıp Add New Tablediyerek tablolar ekleyebilir , eklediğimiz tablolara sağ tıklayıp Show Table Data diyerek tablo içerisine veri girebiliriz

Şimdi ise aşağıdaki adımları takip edelim;

   Projemizde oluşturacağımız veritabanı için bir bağlantı gerekiyor.Bunun için birçok yol var.Fakat bunun en hızlı ve verimli olanını anlatacağım.Bu da, oluşturacağımız web.config dosyası içerisine bağlantı satırlarını yazmak ile oluyor

   İlk olarak projemizde eğer yoksa bir web.config dosyası oluşturalım.Web.config içerisinde <configuration>tagından sonra

<connectionStrings> ….   </connectionStrings>   tagları arasına aşağıdaki gibi kullanacağımız veritabanı bağlantı satırlarını ekleyelim ;

     <add name="Veritabani"  connectionString="  Data Source=.;   Initial Catalog=veritabaniAdi;

  User ID=kullaniciAdi;  Password=kullaniciSifresi"  providerName="System.Data.SqlClient"/>

  Öncelikle burada adı geçen bağlantı stringlerinin ne anlama geldiğini açıklayalım;

• Veritabani : Herhangi bir isim verebilirsiniz.Projemizde, veritabanı bağlantılarımızı bu isimle çağıracağız
• Data Source : Buraya veritabanımızın bulunduğu server yazılır.Eğer kendi bilgisayarımızda çalışıyorsak  . (nokta) koyulur.Herhangi bir bilgisayardaki veritabanını kullanacaksak buraya, o bilgisayarın ip adresi yazılır
• Initial Catalog : Buraya veritabanımızın ismi yazılır
• User ID : Bu kısma bağlantı izni olacak olan kullanıcı adı yazılır
• Password : Bu kısma bağlantı izni olacak olan kullanıcının şifresi yazılır
• Provider Name : Bu kısımda ise kullanacağımız veritabanının SQLSERVER olduğu belirtilir

  Web.config dosyasına bunları ekledikten sonra bu dosyamızın son hali aşağıdaki gibi olacaktır;

   Şimdi ise projemiz içerisinde bu veritabanı bağlantımızı çağıracağız.Bunun için, hangi sayfada çağıracaksak o sayfa için using System.Data.SqlClient; kütüphanesini eklememiz gerekiyor.Bilmeyenler için bunun sayfanın en üstünde bulunduğunu hatırlatalım.Ekledikten sonra veritabanı bağlantısı yapacağımız yerlerde aşağıdaki sözdizimini kullanacağız;

SqlConnection baglanti= new SqlConnection

(System.Web.Configuration.WebConfigurationManager.ConnectionStrings["Veritabani"].ConnectionString);

    Bu sözdiziminde baglanti adında bir baglantı nesnesi oluşturduk ve gereken bağlantı sözcüklerini yazdık.Şimdi ise bu kurduğumuz bağlantıyı açmaya geldi.Bunun için de ;

baglanti.Open();  yaparak veritabanımız ile bağlantımızı kuruyoruz

Şimdi bu anlattıklarımı örnekleyelim;

Visual studio üzerinde yeni bir Empty Web Site oluşturuyoruz.Yukarıda anlattığımız gibi de bir veritabanı oluşturup projemize ekliyoruz daha sonra Web.config dosyasını aşağıdaki gibi düzenliyoruz;

<?xml version="1.0"?>
<!--
 For more information on how to configure your ASP.NET application, please visit

http://go.microsoft.com/fwlink/?LinkId=169433

 -->
<configuration>
 <connectionStrings>
 <add name="Veritabani" connectionString=" Data Source=.; Initial Catalog=deneme;
 Integrated Security=True;" providerName="System.Data.SqlClient"/>
 </connectionStrings>
 <system.web>
 <compilation debug="true" targetFramework="4.0"/>
 </system.web>
</configuration>

Daha sonra Solution Explorer üzerinde projemize sağ tıklayarak Add New İtem ‘ a tıklıyoruz.Buradan yeni birwebform oluşturuyoruz.Adı Default.aspx olarak kalsın.Default.aspx sayfasının yanıdaki küçük ok’a tıklıyoruz ve kod sayfasına geçiyoruz.Kod sayfasına ise aşağıdaki kodları yazalım;

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data.SqlClient;

  public partial class _Default : System.Web.UI.Page
{
 SqlConnection baglanti = new SqlConnection
 (System.Web.Configuration.WebConfigurationManager.ConnectionStrings["Veritabani"].ConnectionString);
   SqlCommand komut = new SqlCommand();
   SqlDataReader dr;
   protected void goster(string tablo)
 {
   komut.CommandText = "select * from " + tablo;
   komut.Connection = baglanti;
   baglanti.Open();
   dr = komut.ExecuteReader();
   GridView1.DataSource = dr;
   GridView1.DataBind();
   baglanti.Close();
 }
 protected void Page_Load(object sender, EventArgs e)
 {
   goster("kisi");

 }
}

Şimdi yazdığımız bu kodları açıklayalım;

SqlConnection baglanti = new SqlConnection
(System.Web.Configuration.WebConfigurationManager.ConnectionStrings["Veritabani"].ConnectionString);

SqlConnection tipinde baglanti adında bir nesne oluşturuyoruz.Bu nesne veritabanına bağlantıyı sağlar.En sağdaki parantezler içine ise  öğrendiğimiz bağlantı sözcüğümüzü yazıyoruz

SqlCommand komut = new SqlCommand(); 

SqlCommand tipinde komut adında bir nesne oluşturuldu.bu nesne üzerinden komutlarımızı çalıştıracağız

komut.CommandText = “select * from ” + tablo;
komut.Connection = baglanti;

komut nesnemizin commandtext özelliğine, veritabanımızdan bütün kayıtları getirecek sorgumuzu yazıyoruz

connection özelliğine ise kullanacağımız Connection nesnemizi yazıyoruz

SqlDataReader dr;

Veritabanından çektiğimiz kayıtları okumak için bir değişken oluşturuldu

dr = komut.ExecuteReader();

Burada komut nesnemiz çalıştırıldı.veritabanımızdan gelen bütün kayıtlar dr değişkenine atandı

GridView1.DataSource = dr;
GridView1.DataBind();

Bu satırlarda ise Default.aspx sayfamıza eklediğimiz grid için bir kaynak belirtildi (dr) . Ve Grid, DataBind ile bağlandı

goster(“kisi”);

Sayfamızın Load olayına yazdığımız bu fonksiyon, doğrudan bağlantıyı sağlar

Stored Procedure Kullanımı

   Hazırlayacağımız projelerde hangi veritabanını kullanırsak kullanalım yazdığımız komutlar her çalıştırmamızda veritabanımıza gönderilir ve dönen değer bize geri gönderilir.Eğer biz bu işlemi yapacak bir prosedürü veritabanımızda yazarsak her seferinde aynı işlemi yapmak zorunda kalmayız.Yani 1 kere oluştururuz ve istediğimiz kadar kullanırız.Bunu fonksiyon mantığına benzetebiliriz.Bu işlem, projelerimiz için veritabanı işlemlerinde hız artışı sağlar.Ayrıca bir veritabanı sorgusu değiştirmek istersek, bunu sadece stored procedure içerisinde değiştirmemiz yeterli olacaktır.Aksi durumda komutu çalıştırdığımız her yerde sorgu cümlesini değiştirmemiz gerekecekti

   Stored procedure’lerin genel yapısı şu şekildedir;

CREATE PROCEDURE prosedürAdı ( degiskenler )
   Ek Bilgiler
BEGIN
   yazılacak procedure
END;

   Bu konu  için MSSQL veritabanını kullanacağım, kullanımını bunun üzerinden anlatacağım

   Veritabanımızı oluşturduktan sonra kisiler adında bir tablo oluşturuyoruz;

   Bunun için Object Explorer üzerinde veritabanımıza tıklıyoruz ve daha sonra Tables‘e sağ tıklıyoruz New Table diyerek alanlarımızı giriyoruz.Daha sonra Ctrl+S tuşlarına basarak tablomuza isim vererek (kisiler) kaydediyoruz ve çıkıyoruz.Tablomuzun görüntüsü şöyle olacaktır;

     

    Şimdi ise  sol taraftaki Object Explorer penceresinde Databases yanında bulunan + işaretine tıklıyoruz.Daha sonra çıkan veritabanları üzerinde hangi veritabanı için stored procedure oluşturmak istiyorsak o veritabanının yanındaki + simgesine tekrar tıklıyoruz

    Daha sonra Programmability ve ardından Stored Procedure ‘e sağ tıklıyoruz New Stored Procedure diyerek çıkan penceredeki açıklama satırlarını siliyoruz ve aşağıdaki kod satırlarını yazıyoruz

CREATE PROC ekle
 (
  @ad varchar(10),
  @soyad varchar(10),
  @sehir varchar(10),
  @yas int,
  @cinsiyet varchar(6)
 )
AS
 BEGIN
 insert into kisiler values(@ad,@soyad,@sehir,@yas,@cinsiyet)
 END
  GO
 execute ekle 'Mehmet','Kirazlı','İstanbul',21,'erkek'

    Buradaki kodları açıklayalım.Prosedürümüzün adını ekle olarak ayarladık ve parantezler içerisine alacağı değişkenleri yazdık.Begin-End arasına Sql sorgumuzu yazıyoruz.Bu sorgu ekleme işlemi yapan sorgudur.Görüldüğü gibi 5 değer almaktadır.En alt satıra yazdığımız execute komutunda ise prosedürümüze göndereceğimiz değerleri verdik.Bu komut ile procedure çalışınca aynı anda kayıt da ekleyecektir.Bu işlemlerden sonra yazdığımız stored procedure için Ctrl+F5 e basarak debug ediyoruz.Daha sonra F5 e basarak stored procedur ‘u kaydediyoruz.Şimdi ise Programmability den stored procedur üzerine sağ tıklayarak Execute Stored procedure diyoruz ve kaydımızı ekliyoruz.Tablomuza kaydımız eklenecektir ve son hali ise aşağıdaki gibi olacaktır;

  Stored Procedurlerin genel mantığı bu şekildedir.Siz de bunun üzerinden yeni tablolar ekleyebilir,daha karışık sorgular yazabilirsiniz.Örneğin daha geniş bir tablo oluşturarak,notu 60 dan yüksek öğrencileri veya maaşı 2000 den az olan çalışanları listeleyebilirsiniz

    Peki Asp.Net sayfalarında Stored Procedure erişimi nasıl olur? Bunun için bir ziyaretçi defteri tarzında bir şey yapalım.Default.aspx sayfamızın tasarımını aşağıdaki gibi hazırlayalım;

  Projemize veritabanı ekleme kısmını önceki yazılarda görmüştük.Veritabanını ekledikten sonra Yorum adında bir tablo oluşturalım ve yukarıdaki alanları veritabanına ekleyelim;

   Şimdi ise veritabanımızda stored procedure oluşturmamız gerekiyor.Bunun için yazımızın başındaki gibi procedure ekliyoruz,gerekli parametreleri giriyoruz.Stored Procedure adını StoredProcedure2 olarak kaydedelim

Son olarak Default.aspx sayfamızın kod tarafında

   using System.Data.SqlClient;
   using System.Data;

kütüphanelerini ekliyoruz

  Şimdi de Yorum yap butonuna tıklandığında yapılacak olanları yazıyoruz

protected void Button1_Click(object sender, EventArgs e)
 {
 SqlConnection bağlantı = new SqlConnection("Data Source=.;Initial Catalog=yorumlar;");
 SqlCommand komut = new SqlCommand("StoredProcedure2", bağlantı);
 komut.CommandType = CommandType.StoredProcedure;
 komut.Parameters.Add("@ad", SqlDbType.VarChar).Value = TextBox1.Text;
 komut.Parameters.Add("@soyad", SqlDbType.VarChar).Value = TextBox2.Text;
 komut.Parameters.Add("@eposta", SqlDbType.Text).Value = TextBox3.Text;
 komut.Parameters.Add("@yorum", SqlDbType.Text).Value = TextBox4.Text;
 komut.Connection.Open();
 komut.ExecuteNonQuery();
 komut.Connection.Close();

   YorumYap butonuna tıklanınca,textbox lara girilen değerleri veritabanına ekleyecektir.Bunları GridView kullanarak ekranda gösterebilirsiniz

SQL server tablo da alan değiştirme hatası

Sql Server 2008 üzerinde bir tabloda değişiklik yaptığımızda büyük ihtimal aşağıdaki gibi bir hata alacaksınız.

Bu hata, tablo üzerinde herhangi bir değişiklik yaptığınızda alacağınız hatadır. Bunu kapatmak için aşağıdaki işlemleri yapın.

Sql Server’da üst menüden Tools -> Options -> Degisners -> Table and Database Degisners dedikten sonra aşağıdaki gibi Prevent Saving … diye devam eden tick‘i kaldırmanız gerekiyor.

http://www.mehmetkirazli.com

ajax texbox sayı sınırı harf sınırı ve virgül nokta sınırı

ajax texbox sayı sınırı harf sınırı ve virgül nokta sınırı

http://www.asp.net/ajaxLibrary/AjaxControlToolkitSampleSite/FilteredTextBox/FilteredTextBox.aspx

ajax validation popup

ajax validation popup

http://www.asp.net/ajaxLibrary/AjaxControlToolkitSampleSite/ValidatorCallout/ValidatorCallout.aspx