ASP.NET 2.0 ve Ajax Toolkit nesneleri ile basit ama işlevsel, öğretici bir site hazırlıyorum. Her ikisi de ücretsiz olan "Visual Web Developer 2005" ile "Ajax Extensions" kolayca bir web uygulaması yapılabiliyor. IIS ve "SQL Server Express" da bize gerekli. Veritabansız olmaz.
 
Sitenin sayfalarını oluştururken "nasıl" işlemler yaptığımı da içinde anlatıyorum. Ana sayfadan bir alıntı yapalım:
 
ASP.NET projemizi "Visual Web Developer 2005 Express Edition" ile hazırladık.

  • Sayfaların ortak görünüm kazanması için "MasterPage" özelliğini kullandık. "Solution Explorer"dan "Add Item" komutu ile bu özelliği ekleyebilirsiniz. Bu sayfanın düzenlenmesi uzun sürebilir. Fakat tek noktadan bütün siteye hakim olmak çok güzel bir özellik.
  • Değişik bölgelerde istenen yazı ve resim nesneleri düzgün görünmesi için "Layout*Insert Table" komutunu veriyoruz. "MasterPage" nesnesinde sol yan taraf ve üst taraf 2 tablodur. "Defaultxx.aspx" şeklinde isimlendirilen alt sayfalarda da ortadaki beyaz renkli kısım tablodur.
  • Fazla grafik kullanmıyoruz. Sayfada genellikle *.gif, *.jpg ve *.png dosya türleri kullanacağız. Projemizi belli aralıklar ile Opera ve Firefox tarayıcıları ile de deniyoruz. Her ne kadar XHTML uyumu olsa da bazı küçük değişiklikler gerekebilir. Bunu "Target Schema for Validation" ile kontrol edebilirsiniz.
  • Üst sağ tarafta çıkan "Tarih" kısmında bulunan canlı saat, araç kutusundaki "Ajax Extensions*Timer" nesnesi ile güncelleniyor. Timer1’in kod kısmı sadece 1 satırdır. Sayfanın yüklendiği ana (Page_Load) da bu kodu yazınız.

       Protected Sub Timer1_Tick
        Label1.Text = Date.Now
     
    End Sub

    Ajax nesnelerinin çalışabilmesi için de bir adet ScriptManager nesnesi sayfada bulunmalıdır.

  • Arama nesnesi olarak "HTML*Text" nesnesi kullandık. Stil ve resim desteği ile süsledik. İçine girildiğinde bir JavaScript kodu ile temizliyoruz. Kaynak kod kısmında onfocus olayı olarak şunu yazabiliriz:

      <input id="Text1" runat="server" onfocus="this.value=”;" name="Text1" />

    Arama kutusunun boş bırakılması halinde,  "Validation*RequiredFieldValidator" nesnesi ile "Boş giriş yapıldı…" uyarı mesajımızı çıkmasını sağlayabiliriz. RequiredFieldValidator1 nesnesinin "ErrorMessage" özelliğine uyarı metni girilir.
     

  • Menü ve gezinme linkleri yapımı ise kolay. Bu iki nesneyi "Navigation" nesnelerinden hazırlayabilirsiniz. "Web.sitemap" dosyasını eklemeyi unutmayın. Bu dosyanın içeriğini siz elle yazabilirsiniz. Örnek olarak:

      <siteMapNode url="~/default.aspx" title="Ana Sayfa" description="ASP Öğrenelim">   
       <siteMapNode url="~/default2.aspx" title="Misafir Defteri" description="Misafir Defteri" /> 
       <siteMapNode url="~/default3.aspx"" title="Sohbet" description="Sohbet" />  
      </siteMapNode>

Not: Her ne kadar "Web Developer" web tasarımında yardımcı olsa da ana sayfa görünümü için 1 gün zaman harcamam gerekti. Yani bir web tasarımcısı ve grafik tasarımcı için hâlâ imkanlar fazla değil. Nesne özelliklerine ve kod yazmada da aynı şekilde biraz cimrilik var. Dar bir ekranda devamlı oraya buraya tıklamak yorucu.

Kabaca uygulamamın ilk hali buradadır: indir. Diğer işlemlerden ileride yine bahsedeceğim.

İşte birkaç ekran görüntüsü:

Reklamlar