YAKINSAMA

WEB SAYFASININ TASARIMI nası niçin yapıpır

II.1 GİRİŞ

Bir web sitesi hazırlanırken yapılması gereken ilk aşama oluşturulacak web sitesinin içeriği belirlenerek, sayfa tasarımına geçilmelidir. Sayfa tasarımında istenilen resim editörü kullanılır. Bu işlemlerden sonra sayfa html formatına çevrilir. Sitede istenilen olaylara bağlı olarak, sitedeki veritabanı yapısı oluşturulur.

II–2 SAYFANIN İÇERİGİNİN BELİRLENMESİ

Web sitenizi HTML (Hyper Text Markup Language) komutlarıyla biçimlendirmeden önce, ilk olarak sitenin içeriğinin belirlenmesi gerekir. Oluşturulacak site hangi konuyu kapsıyor ise belli bir düzen içinde yazılmalıdır. Asp ile web tabanlı eğitim sitesindeki içerik kısmı tablo II.1 de verilmiştir. Belirlenecel içeriğin önemli noktalarını belirten kısa bir liste oluşturulur. Bu liste, web sitesinde oluşturulacak olan yapıyı belirlemede yardımcı olur.

Tablo II.1 Asp web tabanlı eğitim sitesinin içeriği

Asp Dersleri

Asp Testleri

Asp Animasyonları

Asp Makaleleri

Asp Uygulamaları

II-2 SAYFANIN TASARLANMASI

İçerik belirlendikten sonra içeriğe uygun bir site tasarımı yapılmalıdır. Sitenin tasarımına geçilmeden önce hangi kitlenin siteyle ilgileneceğini düşünülmelidir. Sitenizin tasarımını hedef guruba göre düzenlenmelidir.

Asp ile web programcılığı site tasarımında photoshop resim editörü kullanılmıştır. Photoshop’ ta çalışırken katmanlı bir yapı izlenir. Buda yapılacak herhangi bir değişiklikte diğer katmanların etkilenmesi önlenmiş olacaktır. Sitenin genel görünümü Şekil II.1 de görülmektedir.

Şekil II.1 photoshop sitenin tasarlanmış son hali

II–3 SAYFANIN DREAMWEARLA HTML FORMATINA DÖNÜŞTÜLMESİ

Sitenin genel görünümü hazırlandıktan sonra, html yapısına çevrilmesi gerekir. Photoshop da hazırlanan resimler parçalara bölünerek html editörü yardımıyla html formatına çevrilir. Html formatına çevrilirken css(Cascading Style Sheets) kullanılmıştır.

Css, Internet sayfaları için genel geçer şablonlar hazırlama olanağı verdiği gibi, bağımsız olarak harflerin stilini; yani renk, yazı tipi, büyüklük gibi özelliklerini değiştirmek için de kullanılabilir. Bu tekniğin en önemli özelliği kullanımındaki esnekliktir. Bir web sayfası içerisinde birbiriyle uyumlu birkaç renk ve birkaç yazı tip kullanılır ve bunları her sayfada ayrı ayrı tekrar belirtmek yerine CSS yardımıyla bir sefer tanımlayıp bütün web sayfalarında ortak olarak kullanılabilir. Bu şekilde, sayfaların hafızadaki boyutu epey küçüldüğü gibi, güncelleme yapmak da kolaylaşır.

CSS kodları HTML kodlarının içine yazılırlar. Türüne göre <BODY> veya <HEAD> bölümlerinde yer alabilirler. Bunların dışında harici CSS dosyaları oluşturulup bunlar gerektiğinde HTML belgesi içerisinde çağırılabilirler. Asp ile web tabanlı eğitimde Css dışarıdan harici bir dosya olarak uygulanmıştır.

Sitenin tasarımı yapılırken tablolar yerine div tağları kullanılmıştır. Sitede kullanılan css ile div tağları konumları belirlenmiştir. Böylece sayfanın html biçimi oluşturulmuştur.

II-4 TABLOLARIN OLUŞTURULMASI

Web sitesinin html biçimi oluşturulduktan sonra sitede istenilen özelliklere göre tablolar oluşturulur. Tablolar oluşturulduktan sonra, kod yazmaya kısmına geçilir. Bu web sitesi oluşturulurken, 3 ana başlık altında oluşturulmuştur. Bunlar;

· Mail aktivasyonlu üye girişi

· Üyelere özel sayfalar

· Admin Bölümü

Bölümüdür.

II.4.1 Mail Aktivasyonlu Üye Girişi

Her sitenin kendine özel kullanıcılarına ait özel fonksiyonları vardır. Bu özelliklerden yararlanmak isteyen kullanıcılar, siteye üye olmaları gerekir. Üyelik işlemlerinde, kullanıcılara bir takım sorular sorulur. Bu sorulan soruların belli bir standardı yoktur. Bu çalışmada ad, soyad, meslek, kullanıcı Adı, mail, şifre ilgili bilgilerin istenmesi yeterli görülmüştür.

Kullanıcıdan istenilecek bilgiler alındıktan sonra, bu bilgiler veritabanına yazılır ve üyelik işlemi için aktivasyon maili beklenir. Mail geldikten sonra kullanıcı siteye üye olur. Şekil II.2 de bu işlemin nasıl gerçekleştiği akış şeması olarak verilmiştir.

Şekil II.2 Kullanıcı bilgilerinin veritabanına yazılması ve mail gönderilmesi

Kullanıcıdan alınan bilgilerin hepsi kontrol edildikten sonra, bilgiler request(istek) nesnesiyle alınır. Birinci ve ikinci şifre birbirine eşit ise bilgiler uyeler adlı tablosuna yazılır ve kullanıcıya aktivasyon numarası mail atılır. Şekil II.3 tabloya yazma komutları verilmiştir.

session("xad")=request.QueryString("ad")

session("xsoyad")=request.QueryString("soyad")

session("xmail")=request.QueryString("mail")

session("xkullanici_adi")=request.QueryString("kullanici_adi")

if sifre=sifre1 then

set rs=server.CreateObject("Adodb.Recordset")

Sorgu="select * from uyeler"

rs.open Sorgu,bag,1,3

rs.addnew

rs.fields("kullanici_adi")=kullanici_adi

rs.fields("sifre")=sifre

rs.fields("ad")=ad

rs.fields("soyad")=soyad

rs.fields("meslek")=meslek

rs.fields("mail")=mail

rs.fields("onay_kodu")= tarih & kodu

rs.fields ("onay")=false

rs.update

End if

Şekil II.3 kullanıcı bilgilerinin tabloya yazılmasına ilişkin kod

Kullanıcıya mail geldikten sonra onaylama(aktivasyon) işlemi şekil II.4 de akış şeması gösterilmiştir.

Şekil II.4 Kullanıcı maili ile aktivasyon işlemi

Uyeler tablosunda id sütunu kullanılarak her kullanıcıya ayrı bir numara atanması sağlanmıştır. Onay sütununda, kullanıcıya gönderilen maildeki linke tıklanmasıyla onay_kodu aranarak, bulunduğu zaman onay sütunu true yapılarak kullanıcı ana sayfaya yönlendirilmektedir. Bu durum tablo II.4 ‘de gösterilmektedir.

Tablo II-4 uyeler tablosu

II.4.2 Üyelere Özel sayfalar

Web sitelerinde sayfaya her bağlanan, her kullanıcı için bir oturum açılır. Üyelere özel sayfaların yapımında, özel bir oturum nesnesi oluşturularak, kullanıcı siteye giriş yaptığı zaman bu oturum nesnesini aktif edilerek kullanıcının siteye giriş yaptığı anlaşılır. Sadece kullanıcılara özel gösterilen sayfalarda, bir if-else bloğu oluşturarak web sitesine kullanıcının giriş yapıp yapmadığı belirlenir.

Kullanıcı sayfaya giriş yaptığı zaman, oturum nesnesinin aktif edilir. Bu çalışmada oturum nesnesi girdi olarak tanımlanmıştır. Girdi değeri 1 ise sayfa gösterilmektedir. Şekil II.5 kullanıcılara özel sayfaların gösterilmesine ilişkin işlemler, akış şeması olarak gösterilmiştir.

Şekil II.5 üyelere özel sayfaların gösterilmesine ilişkin akış şeması

Kullanıcı adı ve şifresini girdikten sonra veritabanında kullanıcı bilgileri aranmaktadır. Eğer bu bilgiler veri tabanında bulunamazsa, “Böyle bir kullanıcı yoktur” mesajı verilmektedir. Veritabanında bilgiler bulunursa, girdi değeri 1 yapılarak üyelere özel sayfalar gösterilmektedir. Şekil II.6 kullanıcılara özel sayfaların kod parçacığı verilmiştir.

if rs.eof or rs.bof then

response.Write("Böyle bir kullanıcı yoktur")

response.End()

end if

session("kullanici_adi")=ad

session("girdi")=1

Şekil II.6 üyelere özel sayfaların gösterilmesine ilişkin akış şeması

II.4.2 Admin Bölümü

Admin siteyi yöneten, sitedeki bütün verilerin eklenmesi ile ilgilenen kişidir. Bu çalışmada sitedeki bütün veriler admin tarafından onaylandıktan sonra gösterilmektedir.

Sitede admin için özel bir bölüm oluşturulmuştur. Admin, kullanıcı girişinden admine özel kullanıcı adı ve şifreyi girdikten sonra admin için oluşturulmuş özel bölüme girerek, bu bölümde;

· Ders işlemleri

· Test işlemleri

· Animasyon işlemleri

· Makale işlemleri

· Uygulama işlemleri

yapılmaktadır.

Bu çalışmada admin bölümüne başlanmadan önce bütün veritabanı, bir kâğıt üzerine oluşturulmuştur. Bir sonraki aşamada ise, veritabanları yaratılarak uygulama kısmına geçilmiştir.

II.4.2.1 Ders İşlemleri

Ders ekleme veritabanı oluşturulurken, birinci aşamada ders ekleme tablosu oluşturularak, bu tabloda dersktgrId, baslik bilgileri saklanmaktadır.

Ders ekleme işlemi yapıldıktan sonra, o derse ait konuların eklenmesi için konular için bir veritabanı oluşturulmuştur. Tablo II konular tablosu gösterilmiştir. AltKtgrId bilgisinin alınmasının sebebi, konular ile dersler arasında bir ilişkilendirme yapılarak, hangi derse hangi konu eklendiği öğrenilebilmektedir. Tablo II ders ekleme tablosu gösterilmiştir.

Admin ders işlemleri bölümünde ders eklerken;

· Ders başlık eklenir ve ders sıra numarası verir, ders ekle düğmesine basılır.

· O ders ilişkin konular eklenirken; konuya başlık, yazar ismi ve ders sırası verilerek konu ekleme işlemi yapılır.

işlemleri yapılır.

Herhangi bir dersin silinmesi istenildiği zaman daha önce derse verilen sırayı seçerek, istenilen ders silinebilir. Bir derse ait herhangi bir konu silinmek istenildiği zaman, konunun ismi seçilerek konu silme işlemi yapılabilir. Tablo göster bölümünde ise tabloya eklenen dersler ve konular belli bir düzen içinde gösterilir. Şekil ders ekleme paneli gösterilmiştir.

Kullanıcılar dersler bölümünden dersleri görmek istedikleri zaman, ders başlığı gösterilmektedir ve daha sonra o derse ilişkin konular gösterilmektedir. Konuların gösterilmesinde AltKtgrId ve dersktgId değerlerinin birbirine eşit olma şartı vardır. Şekil II kod parçacığı gösterilmektedir.

do while not dersler.eof

set DersIcerik=server.CreateObject("adodb.recordset")

sql1="select* from DersIcerik where AltKtgrId="&dersler("dersktgId")&""

DersIcerik.open sql1,bag,1,3

<%response.Write(dersler("baslik")&"<br>")%></td></tr>

<%do while not DersIcerik.eof%>

<tr >

<%response.Write(DersIcerik("Baslik")&"<br>")%></a></td>

</tr>

DersIcerik.movenext

loop

DersIcerik.close:set DersIcerik=nothing

dersler.movenext

loop

Şekil II.6 üyelere özel sayfaların gösterilmesine ilişkin akış şeması

II.4.2.2 Test İşlemleri

Test ekleme veritabanı yapısı dersler işlemleri bölümüne benzemektedir. Birinci aşamada test ekleme tablosu oluşturularak, bu tabloda ktgr_id, test_adi bilgileri saklanmaktadır. Ktgr_id tablo bilgisi, testin hangi dersle ilgili olduğu bilgisi bulunmaktadır. Tablo II veritabanı yapısı gösterilmiştir.

Test adı ekleme işlemi yapıldıktan sonra, o testte ait soruların bulunduğu ikinci bir veritabanı oluşturulmuştur. Tablo II konular tablosu gösterilmiştir. Dktgr_id bilgisinin alınarak, derslerle ile testler arasında ilişkilendirme yapılmıştır. Tablo II test sorularının bulunduğu tablosu gösterilmiştir.

Admin test işlemleri bölümünde testler eklerken;

· Test başlığı eklenir ve test ders numarası verir, test ad ekle düğmesine basılır.

· Teste ilişkin konular eklenirken; soru metni, soru şıkları, doğru cevap girilerek, test ekle düğmesine basılır.

işlemleri yapılır. Girilen test, teste ait sorular, test başlığı test ekleme panelinden silinebilir. Şekil II test işlemleri paneli gösterilmiştir.

Üyeler testler bölümüne girdikleri zaman, test başlıkları sıralı bir şekilde gösterilmiştir. Test adlarının bulunduğu veritabanındaki bilgiler bu sayfada sıralanmaktadır. Şekil II kod parçacığı verilmiştir.

<%do while not rs.eof %>

<tr>

<td class="test_sira"><%=i%> )<a href="test_goster.asp?ders_id=<%=rs("ktgr_id")%>&gelen=123"><%=rs("test_adi")%></a></td>

</tr>

<%i=i+1%>

<%rs.movenext:loop%>

<%rs.close:set rs=nothing%>

<%end if%>

Şekil II.6 üyelere özel sayfaların gösterilmesine ilişkin akış şeması

II.4.2.3 Animasyon işlemleri

Animasyon ekleme veritabanında sadece bir tane tablo yapılarak oluşturtmuştur. Bu tabloda animasyonun hangi ders’e ait olduğu, adı, açıklama gibi bilgileri alınmıştır. Tablo II tablo yapısı gösterilmiştir.

Admin animasyon işlemleri bölümünde animasyonlar eklerken;

· İlk önce sayfaya eklenecek animasyon, upload sitenin bulunduğu yere upload edilir.

· Upload işleminden sonra, ders id, açıklama ve flash açıklama bölümünden upload edilen flash uygulaması seçilrek veritabanına yazma işlemi gerçekleştirilir. Şekil II animasyon işlemleri paneli gösterilmiştir.

Üyeler, animasyon bölümüne girdikleri zaman, animasyon başlıkları sıralı bir şekilde gösterilmiştir. Animasyon tablosundaki, adlar gösterilmiştir. Buna ilişkin Şekil II kod parçacığı verilmiştir.

<%do while not rs.eof%>

<tr >

<%response.Write(rs("name")&"<br>")%> </a></td>

</tr>

<%rs.movenext:loop%>

Şekil II.6 üyelere özel sayfaların gösterilmesine ilişkin akış şeması

II.4.2.4 Makale İşlemleri

Makale ekleme veritabanı tablosu hangi tarih,detay, yazan, toplam kişi, açıklama gibi bilgileri alınmıştır. Tablo II makale ekleme tablosunun yapısı gösterilmiştir.

Admin makale işlemleri bölümünde makale eklerken;

· Makaleye başlık, yazar ismi, mail ya da web adresi ve açıklama bilgilileri girilerek makale ekle butonuna basılır.

işlemleri yapılır. Üyelerden gelen makaleler, makalelere yapılan yorumlar makale ekleme panelinde izin verildikten sonra sitede gösterilir. Şekil II makale işlemleri paneli gösterilmiştir.

Kullanıcılar sitede makaleler bölümüne girdikleri zaman makaleler, isim ve kısa bir açıklama ile gösterilmektedir. Buna ilişkin Şekil II kod parçacığı verilmiştir.

<td width="26%" class="tarih"> <%=rs("id")%>)tarih:<%=rs("tarih")%> </td>

Şekil II.6 üyelere özel sayfaların gösterilmesine ilişkin akış şeması

II.4.2.5 Uygulama işlemleri

Uygulama ekleme veritabanı tablosu hangi tarih, hazırlayan, hit, kaynak, dersId, açıklama gibi bilgiler alınmıştır. Tablo II uygulama ekleme tablosunun yapısı gösterilmiştir.

Admin uygulama işlemleri bölümünde uygulama eklenirken;

· uygulama dersId, hazırlayan, hit, tarih bilgilileri girilerek ekle butonuna basılır.

işlem yapılır. Şekil II uygulama işlemleri paneli gösterilmiştir.

YAKINSAMA

1 Mart 2012 Perşembe

Hiç yorum yok:

Yorum Gönder