ºÝºÝߣ

ºÝºÝߣShare a Scribd company logo
Asp net4.0ilehaberportalı1
Asp.Net 4.0 ile yapacağımız AjansBayburt isimli Haber
Portalı için ilk önce Visual Studio 2010 ortamında yeni bir
proje açıyoruz.
Visual C# Yazılım dili altında
Web uygulamaları ve Asp.Net
Empty Web Application
seçeneğini seçip , alt bölümde
bulunan Location alanından
projemizi kaydedeceÄŸimiz
dizini seçerek Name
bölümünden projemize isim
vererek «OK» butonuna
basıyoruz.
Açılan boş projemiz üzerinde Project menüsünden Add
New Item a tıklıyoruz.
Açılan ekrandan Web Form
seçeneğini seçerek
SifreliGiris.aspx adını veriyor ve
«Add» butonuna tıklayarak
yeni bir WebFormu sayfamıza
eklemiÅŸ oluyoruz.
Aynı işlemi tekrarlayarak bu
sefer Style Sheet ‘i seçiyoruz ve
adını Admin.css olarak
değiştiriyoruz. «Add»
butonuna tıklayarak sayfamıza
ekliyoruz.
Bir önceki işlemde olduğu gibi Project menüsünden bu
sefer New Folder a tıklıyoruz.
Oluşturduğumuz yeni klasörün ismini
«images» olarak değiştiriyor ve images
klasörünün üzerinde tıklamışken yine
Project menüsünden 2 adet klasör daha
ekliyoruz. İsimlerini «Admin» ve «Site»
olarak deÄŸiÅŸtiriyoruz. Size verilen
Resimler klasörünün içerisinde ki
«loginback.jpg» resmini Admin
klasörünün içerisine kopyalıyoruz.
Admin.css Stil dosyasını açarak aşağıda ki kodları içerisine
yazıyoruz.
body
{
background-image: url(/slideshow/asp-net40ilehaberportal1/20598087/&);
background-repeat: repeat;
}
Admin.css Stil dosyamızın kullanılabilir olması için
SifreliGiris.aspx sayfasının <head></head> tag leri arasına
mause ile sürükleyerek bırakıyoruz.
<head runat="server">
<title></title>
<link href="Admin.css" rel="stylesheet" type="text/css" />
</head>
Sayfamızın yeni hali aşağıda ki gibi olacaktır.
Asp net4.0ilehaberportalı1
Daha önce de yaptığımız gibi gerekli resimlerimizi
projemize ekliyoruz.
«sifrealanibaslik.jpg» ve
«sifreligiristextbox.jpg» resimlerimizi
size verilen klasörden alarak Admin
klasörünün içerisine ekleyin.
Admin.css Stil dosyasını açarak aşağıda ki kodları içerisine
yazıyoruz.
.sifrealanibaslik
{
width:450px;
height:30px;
margin:320px auto 0 auto;
text-align:center;
}
SifreliGiris.aspx sayfamızın Source kısmına gelerek Şifreli
giriş ekranımızda başlık için kullanılacak divimizi oluşturuyoruz
ve oluşturduğumuzun divin içerisine image nesnesi ekleyerek
«sifrealanibaslik.png» resmini Url olarak belirliyoruz.
<div class="sifrealanibaslik">
<asp:Image ID="Image1" runat="server"
ImageUrl="~/images/Admin/sifrealanibaslik.png" />
</div>
Sayfamızın yeni hali aşağıda ki gibi olacaktır.
Asp net4.0ilehaberportalı1
Admin.css Stil dosyasını açarak aşağıda ki kodları içerisine
yazıyoruz.
SifreliGiris.aspx sayfamızın Source kısmına gelerek Şifreli
giriş ekranımızda label , textbox ve butonlarımızın bulanacağı
en dıştaki genel divimizi tasarlıyoruz.
<!-- Şifre Ekranı En Dış Div -->
<div class="sifrealani">
</div>
Sayfamızın yeni hali aşağıda ki gibi olacaktır.
Asp net4.0ilehaberportalı1
Admin.css Stil dosyasını açarak aşağıda ki kodları içerisine
yazıyoruz.
.sifrealanilabeltextbox
{
width:360px;
height:40px;
display:block;
margin:5px auto;
}
Admin.css Stil dosyasını açarak aşağıda ki kodları içerisine
yazıyoruz.
.sifrealanilabel
{
font-family:Andalus;
font-size:16px; color:White;
padding:5px; margin:5px 5px 0 5px;
float:left;
}
Admin.css Stil dosyasını açarak aşağıda ki kodları içerisine
yazıyoruz.
.sifrealanitextbox
{
background-image: url(/slideshow/asp-net40ilehaberportal1/20598087/&);
background-repeat: repeat-x; border: 1px solid #d1c7ac;
width: 230px; color: #333333; margin: 5px auto 0 auto;
font-family: Andalus; float:right;
}
Admin.css Stil dosyasını açarak aşağıda ki kodları içerisine
yazıyoruz.
.sifrealanitextbox:hover
{
background-image: url(/slideshow/asp-net40ilehaberportal1/20598087/&);
background-repeat: repeat-x; border: 1px solid #FF9900;
width: 230px; color: #333333;
margin: 5px auto 0 auto; font-family: Andalus; float: right;
}
SifreliGiris.aspx sayfamızın Source kısmına gelerek Şifreli
giriş ekranımızda kullanıcı adı ve şifre girişleri için kullanılacak
alanlarımızın bulunacağı divleri oluşturuyoruz.
Sayfamızın yeni hali aşağıda ki gibi olacaktır.
Asp net4.0ilehaberportalı1
Admin.css Stil dosyasını açarak aşağıda ki kodları içerisine
yazıyoruz.
Admin.css Stil dosyasını açarak aşağıda ki kodları içerisine
yazıyoruz.
SifreliGiris.aspx sayfamızın Source kısmına gelerek Şifreli
giriş ekranımızda kullanıcı adı ve şifre girişleri için kullanılacak
alanlarımızın bulunacağı divleri oluşturuyoruz.
Sayfamızın yeni hali aşağıda ki gibi olacaktır.
Asp net4.0ilehaberportalı1
Şimdi şifreli giriş yapabilmek ve daha sonra ihtiyacımız olacak
olan veritabanı ve tablolarımızın hazırlanmasına başlayalım. İlk
olarak Database imiz ve Admin Tablomuz.
Asp net4.0ilehaberportalı1
Şimdi Code Behind alanımıza kod yazmaya başlamadan önce
Web.config dosyamızda veritabanı bağlantı ayarlarını yapalım.
Artık kodlarımızı yazabiliriz. Bunun için SifreliGiris.aspx
sayfamızın Code Behind alanına giriyoruz ve ilk olarak
Kütüphanemize gerekli using leri ekliyoruz.
Using leri tanımladıktan sonra bütün
metotlardan ulaşabileceğimiz veritabanı
bağlantımızı oluşturuyoruz.
Veritabanı bağlantı işlemimizi de tamamladıktan sonra artık
giriş yapacağımız buton içerisine gerekli kodları yazabiliriz.
Asp net4.0ilehaberportalı1
Asp net4.0ilehaberportalı1

More Related Content

Asp net4.0ilehaberportalı1

  • 2. Asp.Net 4.0 ile yapacağımız AjansBayburt isimli Haber Portalı için ilk önce Visual Studio 2010 ortamında yeni bir proje açıyoruz. Visual C# Yazılım dili altında Web uygulamaları ve Asp.Net Empty Web Application seçeneÄŸini seçip , alt bölümde bulunan Location alanından projemizi kaydedeceÄŸimiz dizini seçerek Name bölümünden projemize isim vererek «OK» butonuna basıyoruz.
  • 3. Açılan boÅŸ projemiz üzerinde Project menüsünden Add New Item a tıklıyoruz. Açılan ekrandan Web Form seçeneÄŸini seçerek SifreliGiris.aspx adını veriyor ve «Add» butonuna tıklayarak yeni bir WebFormu sayfamıza eklemiÅŸ oluyoruz. Aynı iÅŸlemi tekrarlayarak bu sefer Style Sheet ‘i seçiyoruz ve adını Admin.css olarak deÄŸiÅŸtiriyoruz. «Add» butonuna tıklayarak sayfamıza ekliyoruz.
  • 4. Bir önceki iÅŸlemde olduÄŸu gibi Project menüsünden bu sefer New Folder a tıklıyoruz. OluÅŸturduÄŸumuz yeni klasörün ismini «images» olarak deÄŸiÅŸtiriyor ve images klasörünün üzerinde tıklamışken yine Project menüsünden 2 adet klasör daha ekliyoruz. Ä°simlerini «Admin» ve «Site» olarak deÄŸiÅŸtiriyoruz. Size verilen Resimler klasörünün içerisinde ki «loginback.jpg» resmini Admin klasörünün içerisine kopyalıyoruz.
  • 5. Admin.css Stil dosyasını açarak aÅŸağıda ki kodları içerisine yazıyoruz. body { background-image: url(/slideshow/asp-net40ilehaberportal1/20598087/&); background-repeat: repeat; }
  • 6. Admin.css Stil dosyamızın kullanılabilir olması için SifreliGiris.aspx sayfasının <head></head> tag leri arasına mause ile sürükleyerek bırakıyoruz. <head runat="server"> <title></title> <link href="Admin.css" rel="stylesheet" type="text/css" /> </head>
  • 7. Sayfamızın yeni hali aÅŸağıda ki gibi olacaktır.
  • 9. Daha önce de yaptığımız gibi gerekli resimlerimizi projemize ekliyoruz. «sifrealanibaslik.jpg» ve «sifreligiristextbox.jpg» resimlerimizi size verilen klasörden alarak Admin klasörünün içerisine ekleyin.
  • 10. Admin.css Stil dosyasını açarak aÅŸağıda ki kodları içerisine yazıyoruz. .sifrealanibaslik { width:450px; height:30px; margin:320px auto 0 auto; text-align:center; }
  • 11. SifreliGiris.aspx sayfamızın Source kısmına gelerek Åžifreli giriÅŸ ekranımızda baÅŸlık için kullanılacak divimizi oluÅŸturuyoruz ve oluÅŸturduÄŸumuzun divin içerisine image nesnesi ekleyerek «sifrealanibaslik.png» resmini Url olarak belirliyoruz. <div class="sifrealanibaslik"> <asp:Image ID="Image1" runat="server" ImageUrl="~/images/Admin/sifrealanibaslik.png" /> </div>
  • 12. Sayfamızın yeni hali aÅŸağıda ki gibi olacaktır.
  • 14. Admin.css Stil dosyasını açarak aÅŸağıda ki kodları içerisine yazıyoruz.
  • 15. SifreliGiris.aspx sayfamızın Source kısmına gelerek Åžifreli giriÅŸ ekranımızda label , textbox ve butonlarımızın bulanacağı en dıştaki genel divimizi tasarlıyoruz. <!-- Åžifre Ekranı En Dış Div --> <div class="sifrealani"> </div>
  • 16. Sayfamızın yeni hali aÅŸağıda ki gibi olacaktır.
  • 18. Admin.css Stil dosyasını açarak aÅŸağıda ki kodları içerisine yazıyoruz. .sifrealanilabeltextbox { width:360px; height:40px; display:block; margin:5px auto; }
  • 19. Admin.css Stil dosyasını açarak aÅŸağıda ki kodları içerisine yazıyoruz. .sifrealanilabel { font-family:Andalus; font-size:16px; color:White; padding:5px; margin:5px 5px 0 5px; float:left; }
  • 20. Admin.css Stil dosyasını açarak aÅŸağıda ki kodları içerisine yazıyoruz. .sifrealanitextbox { background-image: url(/slideshow/asp-net40ilehaberportal1/20598087/&); background-repeat: repeat-x; border: 1px solid #d1c7ac; width: 230px; color: #333333; margin: 5px auto 0 auto; font-family: Andalus; float:right; }
  • 21. Admin.css Stil dosyasını açarak aÅŸağıda ki kodları içerisine yazıyoruz. .sifrealanitextbox:hover { background-image: url(/slideshow/asp-net40ilehaberportal1/20598087/&); background-repeat: repeat-x; border: 1px solid #FF9900; width: 230px; color: #333333; margin: 5px auto 0 auto; font-family: Andalus; float: right; }
  • 22. SifreliGiris.aspx sayfamızın Source kısmına gelerek Åžifreli giriÅŸ ekranımızda kullanıcı adı ve ÅŸifre giriÅŸleri için kullanılacak alanlarımızın bulunacağı divleri oluÅŸturuyoruz.
  • 23. Sayfamızın yeni hali aÅŸağıda ki gibi olacaktır.
  • 25. Admin.css Stil dosyasını açarak aÅŸağıda ki kodları içerisine yazıyoruz.
  • 26. Admin.css Stil dosyasını açarak aÅŸağıda ki kodları içerisine yazıyoruz.
  • 27. SifreliGiris.aspx sayfamızın Source kısmına gelerek Åžifreli giriÅŸ ekranımızda kullanıcı adı ve ÅŸifre giriÅŸleri için kullanılacak alanlarımızın bulunacağı divleri oluÅŸturuyoruz.
  • 28. Sayfamızın yeni hali aÅŸağıda ki gibi olacaktır.
  • 30. Åžimdi ÅŸifreli giriÅŸ yapabilmek ve daha sonra ihtiyacımız olacak olan veritabanı ve tablolarımızın hazırlanmasına baÅŸlayalım. Ä°lk olarak Database imiz ve Admin Tablomuz.
  • 32. Åžimdi Code Behind alanımıza kod yazmaya baÅŸlamadan önce Web.config dosyamızda veritabanı baÄŸlantı ayarlarını yapalım.
  • 33. Artık kodlarımızı yazabiliriz. Bunun için SifreliGiris.aspx sayfamızın Code Behind alanına giriyoruz ve ilk olarak Kütüphanemize gerekli using leri ekliyoruz. Using leri tanımladıktan sonra bütün metotlardan ulaÅŸabileceÄŸimiz veritabanı baÄŸlantımızı oluÅŸturuyoruz.
  • 34. Veritabanı baÄŸlantı iÅŸlemimizi de tamamladıktan sonra artık giriÅŸ yapacağımız buton içerisine gerekli kodları yazabiliriz.