Son Haberler
Anasayfa / Yazılım / ASP.NET / Kullanıcı Giriş Paneli Örneği – 1

Kullanıcı Giriş Paneli Örneği – 1

Bu yazımdaki örneğimde basit br kullanıcı giriş paneli tasarlamaya çalışalım. Bunu yaparken de aynı zamanda Visiual Studio tarafından bize sunulan özellikleri de mümkün olduğunca kullanmaya çalışalım. Yapmak istediğim genel anlamda şu :

Bir kullanıcı giriş sayfası olsun. Bu kullanıcı giriş sayfamda kullanıcı adı sorulsun, şifresi sorulsun. Ve butona basıldıktan sonra sayfa giriş yapıldı diye uyarı verilsin. Projemin ilerleyen aşamalarında ise sayfa yönlendirme yapacağım. Şimdilik sadece bilgilendirme mesajı yazacağım. Buraya kadar gayet kolay, hatta daha önceki yazılarımda buna benzer örnek if karar yapılarını anlatırken yapmıştım. Ancak bu örneğimde değişik bir şey yapmak istiyorum. Projemde bir txt dosyasında yer alan kullanıcı bilgilerini dikkate alarak giriş yapılmasına izin verilsin. Yani o dosya içinde 2-3 adet kullanıcı adı ve şifresi tanımlayacağım ve if karar yapım da bu txt dosyasını okuyup burdaki kullanıcı adı ve girişlerine göre doğru kişimi bunu test edeceğim. Böylelikle hem bu uygulamam da FileStream ve StreamReader kullanmaya da değinmiş olacağım.

Seri bir yazı niteliğinde olacak. Dolayısı ile bir kaç yazıda bu projeyi bitireceğiz. Öncelikle bu yazımızda işin tasarım boyutu ile hareket edelim.

Boş bir WEB sitesi projesi oluşturulım. File – New – WEB Site ve buradan da ASP. NEW Empty WEB site seçiniz. Daha sonra sağda yer alan solution explorer kısmımdan projeme sağ tıklıyorum ve add new item deyip buradan da bir adet WEB form ekliyorum. (Bunları resmetmiyorum, visial studio kullanmayı biliyorsunuz varsayıyorum) Ben adını değiştirmedim. Default.aspx eklendi. Sonra bu sayfamın design alanına geçiyorum. Buraya şimdilik table menüsünden insert table diyerek 5 satır, 4 sütundan oluşan bir table ekliyorum.

Daha sonra bu web forma ben şu an 2 adet textbox, bir adet button, 3 adet label kontrolü ekleyeceğim. Tasarımım görüntü olarak aşağıdaki gibi olacak :

Eklediğim komponentlerin özelliklerini aşağıdaki şekilde ayarlıyorum :

TextBox1 : Name – txtAd
TextBox2 : Name – txtSifre
Button1 : Name – btnGiris, Text – Giriş
Label1 : Name – lblAd, Text – boş bırakın
Label2 : Name – lblSifre, Text – boş bırakın
Label3 : Name – lblMesaj, Text – boş bırakın

Tasarımım için eklemiş olduğum komponentlerin özelliklerinden sonra kodlarım aşağıdaki şekilde :

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>





    
    


    
Kullanıcı Adı :
Şifre :
     
     
       

Şimdi değinmek istediğim bir iki özellik var. Yine tasarım sayfasındayız. Bilirsiniz ki bir çok WEB projesinde herhangi bir kontrolün üzerine geldiğiniz de bir etiket içinde ek bilgi yer alır. Buna tooltip denmektedir. ASP.NET, C# uygulamalarımızda bunu yapabiliyoruz. Şimdi bunu yapabilmek için txtAd kontrolümü seçiyorum. Bu işlemi şu an kodla yapmayacağım, visual studioda komponenti seçtiğimizde sağda yer alan properties panelinden yaparak yapacağım. Yani name, text özelliklerini girdiğimiz alanda tooltip özelliğini görebiliriz.

txtAd kontrolünü seçiyoruz. Sağda yer alan tooltip alanında “Kullanıcı Adını Giriniz” yazıyoruz.
txtSoyad kontrolünü seçiyoruz Sağda yer alan tooltip alanında “Şifrenizi Giriniz” yazıyoruz.
btnGiris kontrolünü seçiyoruz. Sağda yer alan tooltip alanında “Giriş yapmak için tıklayınız” yazıyoruz.

Sonuç aşağıdaki gibi oluyor.

Görüldüğü gibi tooltip özelliğini vermiş olduğumuz kontrollerimiz üzerinde yazdığımız bilgilendirme mesajları çıkıyor.

Şimdi bir diğer özelliğe gelelim. TabIndex özelliğinden bahsetmek istiyorum biraz. Örneğin bir çok komponentin olduğu
bir WEB formu düşünün, ya da bir C# projesi. İşte ad, soyad, yaş, doğum yeri, doğum tarihi, cinsiyeti, mezun olunan okul vb bir sürü bilgiler giriliyor diyelim. Kullanıcı her alanı mouse ile seçiyor sonra klavyeden veri giriyor, sonra yine mouse ile seçiyor. Bu biraz can sıkıcı olur değil mi? Kesinlikle öyle, işte formlar üzerinde ya da web formları üzerinde yer alan komponetler arasında sıralı bir geçiş sağlamak için kontrollerin TabIndex özelliklerinden faydalanırız. Her bir kontrole bir tabindex vererek o kontrole tab tuşu ile sırası ile geçebilme olanağımız olur. Genelde indeks numarası verme sıfır ile başlar ve birer artarak devam eder, ama 1 ile başlayıp birer arttırarak yine devam edebilirsiniz sorun değildir. Bu örneğimde ben txtAd, txtSifre ve Buton kontrollerime tabIndeks veriyorum. Sırası ile 0,1 ve 2 değerlerini vereceğim.

Böylelikle tab tuşuna bastığımda önce Kullanıcı Adı TextBox aktif olur ve imleç burada yer alır, sonra Şifre TextBox aktif olur ve burada imleç yanar söner. Daha sonra da Buton kontrolüme geçilir. Burada da enter tuşuna basarak artık onaylama işlemi yapılabilir.

Bu arada txtSifre kontrolümde TextMode özelliğini de password yapıyorum ve böylelikle bu alana girilen verinin gizli olmasını sağlıyorum.

Son olarak tasarım kodlarım aşağıdaki gibi, aşağıdaki linkten de projeyi indirebilirsiniz.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>





    
    


    
Kullanıcı Adı :
Şifre :
     
     
       

Bir yorum

  1. Kardeşim kütüphaneyi eklerken using de hata alıyorum en üste ekliyorum ama using i görmüyor. ” Statement cannot appear outside of a method body/multiline lambda” hatası veriyor.

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir