Webtasarım ve asp'ye yeni başladıysanız sorularınızı sorabilirsiniz.

[wmismail]

Arkadaşlar aranızda asp ye yeni başlayacak olan veya gelişmekte olanlar sorularını buradan sorarlarsa en kısa sürede cevap vermeye çalışacağım.

Sorularınızı bekliyorum. Bildiğim kadar yardımcı olacağım.

Sorularınızı çekinmeden sorabilirsiniz.

Aslında siteye özel asp dersleri düşünüyorum da yönetim ne der bilmiyorum.

İyi Çalışmalar.

[by_adem]

ben başlamak istiyorum da nasıl başlıyacam nerden başlıyacam bir türlü bulamadım

hangi programlar la nasıl?

[wmismail]

Bir kere program kelimesini sil aklından.

Asp bir programlama dili olduğu için yapacağın şeyleri Notepad ile de yapabilirsin.

Örneğin ekrana yazı yazdırmak istersen notepad i açıp;

<%

Response.write("TNCTR.COM")

%>

'yazarsan ekrana TNCTR.COM yazdırmış olacaksın.

Yani programlar sadece hızlı kod yazmak ve tasarım için gerekli.

Eğer Asp de gelişmek istiyorsan, bunun çok fazla yolu var.

Mesela makale okuyarak, video izleyerek..

Ama en güzeli Video izleyerek kendini geliştirbilirsin.

Nette araştır. Çok fazla video bulacaksın. reklamyasak.net de ki

videolardan da yararlanabilirsin.

Asp ye başla. Sonra sorularını buradan sor. Yardım edeyim.

İyi Çalışmalar.

Program olarak ta Dreamweaver i tavsiye ederim

[Orome]

Bende yakın zamanda Microsoft Visiual Studio 2005 çalışmaya başladım...videolardan takib ederek öğrenmeye çalışıyorum çok da faydalı oluyor....merak ediyorum ;acaba hatamı ettim ilk ona başlamakla , sizin tavsiyeniz nedir?

Direk asp ye girmenin bir sakıncası olurmu ...açıkcası saçma şeyler yazmış olabilirim ama bu hususdaki cahilliğimi bağışlayın

[wmismail]

Bende yakın zamanda Microsoft Visiual Studio 2005 çalışmaya başladım...videolardan takib ederek öğrenmeye çalışıyorum çok da faydalı oluyor....merak ediyorum ;acaba hatamı ettim ilk ona başlamakla , sizin tavsiyeniz nedir?

Direk asp ye girmenin bir sakıncası olurmu ...açıkcası saçma şeyler yazmış olabilirim ama bu hususdaki cahilliğimi bağışlayın

Ya şöyle bir şey var.

Merakının olması lazım bu işe.

Sen galiba C# çalışıyorsun ? Asp.NET yeni dil olduğu için bu senin için daha iyi olacaktır.

Asp biras daha eski olduğu için yapılan şeyler kısıtlı. Sen doğru yapmışsın.

çalışmalarına devam et.

İyi Çalışmalar. !

[wmismail]

Başka soru soracak, fikir danışacak olan avrsa bekliyorum.

Webtasarım adına aklınıza gelen şeyler

Bekliyorum

[cumman]

Bende yakın zamanda Microsoft Visiual Studio 2005 çalışmaya başladım...videolardan takib ederek öğrenmeye çalışıyorum çok da faydalı oluyor....merak ediyorum ;acaba hatamı ettim ilk ona başlamakla , sizin tavsiyeniz nedir?

Direk asp ye girmenin bir sakıncası olurmu ...açıkcası saçma şeyler yazmış olabilirim ama bu hususdaki cahilliğimi bağışlayın

programlamaya visual dillerden başlamak her ne kadar avantaj olarak bakılsada bana göre bir dezavantajdır. program bütünlüğünü görmek,kod yazmaya alışmak ve hata analizleri yapmak için herzaman padcompiler dediğimiz pascal c c++ asp php gibi dilleri öğrenmek çok faydalıdır. o yüzden öncelikle asp çalışıp vb scripting öğrenip daha sonra .net te daha rahat işler çıkarabilirsiniz.

[wmismail]

Arkadaş zaten;

videolardan takib ederek öğrenmeye çalışıyorum çok da faydalı oluyor.

videolardan çalışıyorsa daha önce asp, php tabanı olmadan da .NET de gelişebilir.

Ama yine de önce asp bilgisi olsa, bir programlama nasıl yapılır ? Kuralları nedir ?

Bunları bilse .NET de zorluk çekmeden gelişebilir.

Ama izlediği videolara bağlı. Eğer anlatım sadece .NET in gelişmiş yapısıysa anlaması

mümkün olmaz. Ama bazı videolar var. Çok basitten zora doğru anlatıyor.Kişinin asp bilerek

videoları izlemesinden de daha faydalı olabiliyor.

Ama yine de önce asp, php tabanlı çalışma olursa iyi olur.

Php şu anda bence asp den daha gelişmiş bir programlama dili.

Aslında asp zaten bir programlama dili değil. VB kullanarak yapılan Script dilidir.

Php de şu an 25,000 tane fonksiyon var. Ve 40,000 daha ekleneceği söyleniyor.

Eğer Windowsu takip edecekseniz .NET, Linux u takip edecekseniz Php diyorum.

İyi Çalışmalar.

[civil]

Aslında siteye özel asp dersleri düşünüyorum da yönetim ne der bilmiyorum.

İyi Çalışmalar.

yönetim böyle bir iyi niyete birşey demez.. hatta destek olur..

ben başlamak istiyorum da nasıl başlıyacam nerden başlıyacam bir türlü bulamadım

hangi programlar la nasıl?

notepad ++, notepadden daha iyi daha gelişkin.. kod renklendirme falan da var.. ya da ultra edit..

kaynak olarak sn hakkı öcal'a ait asp rehberi.. aşağıda upoad linki var.. exe şeklinde bir kitap

http://rapidshare.com/files/63608046/mutastonasp.rar.html[/CODE]

[wmismail]

Javascript'e Giriş

Javascript Nedir

Javascript tarayıcı tarafından yorumlanan, ek bir programa ihtiyac duymadan yazılan bir web programlama dilidir. Html ile birlikte çalışır. Html sayfasında head kodları arasına bulunmalıdır ve javascript kodları <script></script> etiketleri arasına yazılır. Javascript tarayıcıdan tarayıcıya farklılıklar gösterebilir. Mesela bir tarayıcıda sorunsuz gösterilirken diğer tarayıcıda sorun çıkabilir. Onun için kodlarımızı kurallara uygun şekilde yazmalıyız.

İlk Örnek

Bir javascript kodu denemek için bir internet tarayıcısı ve not defterinden başka bir araça gereksinim yoktur. Aşağıdaki sayfayı deneme.html adında kaydedin.

<html>
<head>
<title>Javascript ile ilk örneğimiz</title>
<script>
alert("Selam Millet");
</script>
</head>
<body>
</body>
</html>

İlk önce klasik html taslağımızı yazdık. Sonra <head></head> tagleri arasına script etikerlimizi koyduk. Javascript kodlarını işte buraya yazacağız.

Gelelim yazdığımız komuta, alert() kullanıcıya bilgi vermek için kullanılır.

Not: Komutlarınızın sonunda ; işareti bulundırmalısınız. Örnek alert("deneme");

Şimdi deneme.html sayfanızı çalıştırın. Size "Selam Millet" uyarısını verdiğini göreceksiniz.

Değişkenler

Değişkenleri var komutuyla belirteceğiz. Değişken eğer metin türündeyse tırnak koyulur, eğer değilse tırnak koyulmaz.Örnekler;

var sayi=10;
var yazi="bu bir yazıdır.";
Sayı türlü içeriklier birbiriyle matematiksel işlemleri yaptırabilirsiniz.
var sayi1=5;
var sayi2=10;
var toplam=sayi1+sayi2;
Alert ile sonuça bakın; alert(toplam);

toplamın 15 oldugunu göreceksiniz.

if - else deyimleri

If kodlarımızda şart kullanmamıza yarar. Mesela karşılaştırma yaparken if kullanırız.

Else ise şartın uymadıgında yapılacak işlemleri belirtir.

if (koşul) {yapılacak işlemler} else {koşula uymuyosa yapılacak işlemler} şeklinde söz dizimi vardır.

Örnek;

var s=5;
if (s==5) {
alert("s değişkeninin değeri 5");
}
else{
alert("s değişkenin değeri 5 değil !");
}

Bize s değişkeninin değerinin 5 olduğunu söyleyecek. Çünkü ona göre koşul belirttik. Şimdi s değişkeninin değerini değiştirin. Mesela var s=10; yapın.

Size s değişkeninin değeri 5 değil uyarısını verecektir. Çünkü koşula uymuyor. Biz s eşittir 5 koşulunu kullandık ama s değişkeni 5'e eşit değil.

Bir örnek daha yapalım.

var not=50;
if (not<45) {
alert("Kaldınız");
} 
else {
alert("Geçtiniz.");
}

Notumuz 50 olduğundan dolayı Geçtiniz mesajını alacaksınız. Not değişkenini 45'in altında bir değer yaparsanız kaldınız uyarısını verir.

Koşulu sağlarken > (büyüktür), < (küçüktür), == (eşitse), <=(küçüktür eşit), >= (büyüktür eşit) gibi operatörler kullanmaktayız.

Fonksiyonlar

Javascript'te en fazla kullanacağımız işlemlerden biride fonksiyonlardır. Fonksiyonlar sayfa içinde alt yordam çalıştırmaya, kodları kısaltmaya yarar. Mesela sadece fonksiyon adını yazarak fonksiyondaki olayı gerçekleştirebiliriz.

function fonksiyonadi(deger1, deger2) {işlemler} şeklinde söz dizimi vardır.

Function uyar(mesaj) {
alert(mesaj); 
}

alert(mesaj) diyerek kullanıcının tanımladığı değişkeni uyarı şeklinde vermesini sağladık. Bu şekilde sayfada hiç bir etkisi yoktur. Biz fonksiyonu gerekli yerlerde çağıracağız. Fonksiyonu çağırmak için adını yazmak yeterlidir.

uyar("selam"); dediğimizde bize "selam" mesajı gelecektir. Çünkü fonksiyonu çağırırken mesaj adlı değişkni "selam" ile tanımladık.

İlerleyen derslerde fonksiyonları çokça göreceğiz.

Olaylar

Javascript'in sayfadaki elementlerle birlikte kullanılması için olaylar (event) kullanmaktayız. Örneğin bir butona tıklayınca, resmin üzerine gelince, sayfa yüklenince, resimde hata oluşurtuğunda vs bir fonksiyon çağırabilir yada javascript kodunu yorumlatabiliriz. Olaylar'ın başında on vardır.

Bazı olaylar;

Onclick Nesneye Tıklayınca

Onblur Nesneden başka bir yere tıklayınca

Onmouseover Nesnenin üzerine geçince

Onmouseout Nesnenin üzerinden geçince

Onload Nesne yüklenince

Onerror Nesnede hata olunca

OnChange Nesnenin değeri değiştirilince.

Olaylar nesneye göre değiştir, mesela onerror olayı img etiketinde olurken span etiketinde olmayabilir.

Şimdi bir örnek yapalım.Bir butonumuz olsun ve butona tıklayınca selam verdirelim.

<html>
<head>
<title>Javascript Örneklerimiz </title>
<script>
function tikla() { 
alert("Selam Millet");
}
</script>
</head>
<body>
<form>
<button onclick="tikla();">Tıkla</button>
</form>
</body>
</html>

Sayfayı deneme2.html diye kaydedin. Butona tıkladığınızda size uyarı verecektir.

Biz butonun onclick olayını kullandık. Onclick ile nesneye tıklayınca yapılacak işlemleri belirtiriz.

Onclick olayında tikla(); kodunu yazdık. Çünkü tikla(); adında fonksiyon yazmıştık ve butona tıklayınca fonksiyonun çalışmasını istiyorduk. Ve butona tıklyınca fonksiyonumuz çalıştı.

Butona tıklayınca fonksiyonumu çalıştı ve fonksiyonun içinde olan işlemler yapıldı.

Elementlerle Çalışmak

Sayfadaki bir elementin değerini alabiliriz. Bunun için document.getElementById(); deyimini kullanırız.

Mesela sayfadaki bir inputun value parametresini alacaksak komutumuz şöyle olmalıdır. document.getElementById("inputidsi").value;

Nesneye document.getElementById() ile bağlanıyoruz ve sonuna . koyarak alacağğımız parametreyi yazıyoruz. Value'yi yazdık çünkü textbox'a yazılan değeri alacağız.

<html>
<head>
<title>Javascript Örneklerimiz </title>
<script>
function tikla() { 
var gelenveri=document.getElementById("isim").value; 
alert(gelenveri);
}
</script>
</head>
<body>
<form>
<input type="text" name="isim" id="isim" /> 
<button onclick="tikla();">Tıkla</button>
</form>
</body>
</html>

Bir önceki örneğimizdeki gibi bir buton yaptık ve onclick olayına fonksiyon adımızı yazdık.

Fonksiyonda önce gelenveri adında değişken oluşturduk ve değişkeni sayfadaki bir elementin değerine (value) eşitledik.

Eşitlemeyi document.getElementById("isim") ile yaptık. Buradaki isim değerini alacağımız input'un id değeridir.

Elementlerin parametrelerini degistirmek

Sayfadaki bir elementin parametresini değiştirebilirz. Örnek olarak sayfaki bir inputun boyutunu büyültebiliriz. Yine document.getElementById kullanacağız.

<html>
<head>
<title>Javascript Örneklerimiz </title>
<script>
function tikla() { 
document.getElementById("isim").size=100;
}
</script>
</head>
<body>
<form>
<input type="text" name="isim" id="isim" /> 
<button onclick="tikla();">Tıkla</button>
</form>
</body>
</html>

document.getElementById ile isim id'li textbox'ın boyutunu değiştirdik.

sonuna size yazdık çünkü textbox'ın boyutunu size paramtetresi belirler.

Bir örnek daha yapalım. Mesela inputun değerini değiştirelim.

<html>
<head>
<title>Javascript Örneklerimiz </title>
<script>
function tikla() { 
document.getElementById("isim").value="Butona Tıkladınız. ";
}
</script>
</head>
<body>
<form>
<input type="text" name="isim" id="isim" /> 
<button onclick="tikla();">Tıkla</button>
</form>
</body>
</html>

Elementi Gizlemek & Göstermek

Bir önceki dersten bir farkı yok ama bu işlemde css'de kullandığımızdan dolayı ayrı bir başlıkta anlatmak istedim.

Elementi gizlemek için cssdeki display:; komutunu kullanabiliriz.

Display elementin görüntüsünü belirler.

display:none; Elementin görüntüsünü yok eder

display:block; Elementi normel şekilde gösterir.

Şimdi örneğimize geçelim.

<html>

<head>

<title>Javascript Örneklerimiz </title>

<script>

function gizle() {

document.getElementById("isim").style.display="none";

}

function goster() {

document.getElementById("isim").style.display="block";

}

</script>

</head>

<body>

<form>

<input type="text" name="isim" id="isim" /> <br/>

<button onclick="gizle();">Gizle</button> <button onclick="goster();">Göster</button>

</form>

</body>

</html>

Gizleye bastığınızda textbox'ın yok olduğunu göreceksiniz. Tekrar göstere bastığınızda ise geri gelecektir.

While Döngüsü

Döngüler adındanda analışdığı gibi istenilen işlemleri sürekli tekrarlar. While döngüsünde koşul kulanabiliriz.

while (koşul) {yapılacak işlemler} şeklinde söz dizimi vardır.

Örnek;

<html>
<head>
<title>Javascript Örneklerimiz </title>
<script>
var i=0;
while (i<5) {
alert("Selam");
i=i+1;
} 
</script>
</head>
<body>
</body>
</html> 

Sayfayı deneme3.html adında kaydedin. Sayfa açıldığında size 5 kere uyarı verektir.

Çünkü bir koşulumuzda eğer i değişkeni 5'ten küçükse şu işlemleri yap dedik.

Döngü her döndüğünde i adlı değişken artmaktadır. Böyle olmasını şu kod ile sağladık;

i=i+1;

Dolayısıyla her döndüğünde kendi değerinden 1 üstnünü kendine eşitleyecektir.

setTimeout ile süreli işlemler yapmak

setTimeout sayfada istenilen işlemi belirlidiğimiz aralıklarla tekrarlar.

Aralığı süre ile belirtiriz. Süre salise biçimindedir.

Settimeout işlemi normalde sadece 1 kere yapar. Ama yacacağımız işlemi sürekli yaptıracaktır.

setTimeor'u bir fonksiyon içinde yazdıracağız ve fonksiyonu çalıştıracağız.

setTimeout'un yapacağı işlem içinde olduğu fonksiyonunu çalıştırmak olacaktır.

Şimdi örnek yapalım. Belirli araklıklarla ziyaretçiye selam versin.

<html>
<head>
<title>Javascript Örneklerimiz </title>
<script>
function islemyap() {
alert("selam");
setTimeout("islemyap()",2000)
} 
islemyap();
</script>
</head>
<body>
</body>
</html> 

Sayfayı deneme4.html adında kaydedin, sayfayı çalıştırdığında size her 2 saniyede bir selam verecektir.

Çünkü biz süreyi 2000 salise yaptık ve 2000 salise 2 saniye eder.

Şimdide önceki başlıklarımızdan öğrendiklerimizide birleştirerek bir örnek yapalım.

Sayfa içindeki bir yazıyı bir gösterip, bir yok edelim.

<html>
<head>
<title>Javascript Örneklerimiz </title>
<script>
function islemyap() {
var nesne=document.getElementById("yazi").style.display; 
if (nesne=="block") {
document.getElementById("yazi").style.display="none";
} 
else {
document.getElementById("yazi").style.display="block";
} 
setTimeout("islemyap()",500)
}
</script>
</head onload="islemyap();" >
<body>
<div id="yazi" style="color:red;">Javascript Örneklerimiz</div> 
</body>
</html> 

İlk önce fonksiyonumuzu yazdık.

Fonksiyonunun sonuna setTimeout koyduk ve her yarım saniyede bir fonksiyonun çalışmasını istedik.

nesne adında değişken belirledik, değişkeni kontrol edeceğimiz elementin display özelliğine eşitledik.

Sonra bir şart koyduk, eğer nesnenin değeri block ise nesneyi yok et, değilse nesneyi göster.

Bu işlem her fonksiyon çalıştırıldığında yapılır. Ve sürekli yok olur ve tekrar gelir.

Body etiketinin onload olayına fonksiyon adını yazdık.

Çünkü fonksiyon çağırılmadan sayfada hiç bir etkisi olamaz.

Onload sayfa yüklenince yapılacak işlemleri belirtir.

Javascript Örnekleri

Üyelik Sözleşmesi

Eğer kabul ediyorum seçilirse gönder butonu aktif olur, seçilmezse gönder butonuna tıklanmaz.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<title>Anlaşmayı Kabul Et</title> 
<style type="text/css"> 
<!-- 
* { 
     font-family: "trebuchet ms"; 
     font-size: 12px; 
} 
--> 
</style> 
</head> 

<body> 
<form id="form1" name="form1" method="post" action=""> 
Üyelik Sözleşmesi <br /> 
<textarea name="textarea" cols="60" rows="8">-Şurada şunu yapmak yasaktır 
-Şurada şu ile ilgili mesajlar çekilmaz 
-Burada büyük harflerle mesaj yazmayın 
</textarea> 
<br /> 
<input name="kabul" type="checkbox" id="kabul" onclick=" 
if (this.checked==false ) 
{document.getElementById('gonder' ).disabled='disabled';} 
else 
{document.getElementById('gonder' ).disabled='';} 
"/> 
<label for="kabul">Kabul Ediyorum</label> 
<br /> 
<input type="submit" id="gonder" value="Gönder" disabled="disabled"/></form> 
</body> 
</html> 

Sayfa Yükleniyor İbaresi

Eğer sayfanızda fazla resim, yazı varsa yüklenmesi uzun sürebilir. Ve bu sayfanızın kötü gözükmesine sebep olabilir. Sayfanın kötü gözükmesini önlemek için aşağıdaki yöntemi kullanabilirsiniz.

Belirli bir süre yükleniyor ifadesini gösteriyor ve arkaplanda sayfayı yükletiyoruz.

Süre geçtikten sonra yükleniyor ifadesi kayboluyor, böylece sayfa hızlıca açılıyor.

<html> 
<head> 
<title>Örnek Çalışma</title> 
</head> 
<style> 
#durum {width:100px;padding: 1px;background: white;border-right-width: 1px;border-bottom-width: 1px; 
border-left-width: 1px;border-right-style: solid;border-bottom-style: solid;border-left-style: solid; 
border-right-color: #666666;border-bottom-color: #666666;border-left-color: #666666; 
} 
#yuzdesi {font-family:Verdana; font-weight:bold; color:#6C6C6C; font-size:11px;} 
.yukle{font-family: verdana;font-weight: bold;color: #666666;background-color: #F0F3E1; 
width:260px;font-size:11px;padding:1px;border: 1px solid #666666;} 
</style> 
<script> 
var kademe=2; // sayfanızda resim, yazı çok ise 2'ten küçük bir sayı girin 
var yuzde=0; 
function fthrkl ( ){ 
yuzde=yuzde+kademe; 
document.getElementById('gosterge' ).style.width=yuzde+"%"; 
document.getElementById('yuzdesi' ).innerHTML=yuzde+"%"; 
if (yuzde<100 ){setTimeout('fthrkl( )',20 )} 
else{ 
document.getElementById('yuklenmealani' ).style.display="none"; 
document.getElementById('ana' ).style.display="block"; 
} 
} 
</script> 
<body Onload="return fthrkl( );"> 
<div id="yuklenmealani" 
style=> 
<div class="yukle">Sayfa Yükleniyor.</div><div id="durum" style="margin-bottom:5px; width:260px;"><div id="gosterge" style="width:0; background:#DFDFDF;"><span id="yuzdesi">0%</span></div> 
</div> 
</div> 
<div id="ana" style="display:none;"> 
Sitemizin içeriği buraya gelecek<br>Sitemizin içeriği buraya gelecek<br> 
Sitemizin içeriği buraya gelecek<br>Sitemizin içeriği buraya gelecek<br> 
</div> 
</body> 
</html>

Ajax

En basitinden bir ajax uygulaması yapalım

Ajax ile sayfa yeniden yüklenmeden başka bir sayfayı gösterebilir, o sayfaya veri gönderebiliriz. Mesela sayfa yeniden yüklenmeden veritabanına kayıt girebiliriz, kayıtları listeleyebiliriz. Ajax bir dil değildir. Ajax 7-8 satır js kodudur. Tabi ajax kütüphaneleri sayfalarca kod olabilir. Şimdi sadece en temel işlemleri göreceğiz.

İlk önce şu fonksiyonları sayfanızın <head></head> etiketleri arasına yapıştırın.

<script type="Text/Javascript" Language="Javascript"> 
function fthrkl( ) { 
var objemiz; 
/*@cc_on @*/ 
/*@if (@_jscript_version >= 5 ) try { objemiz = new ActiveXObject("Msxml2.XMLHTTP" ); } 
catch (e ) { 
try { objemiz = new ActiveXObject("Microsoft.XMLHTTP" ); } 
catch (E ) { objemiz = false; } 
}@end @*/ 
if (!objemiz && typeof XMLHttpRequest!='undefined' ) { 
try {objemiz= new XMLHttpRequest( );} 
catch (e ) {objemiz=false;}} 
return objemiz;} 

function git(degerler,syf,alanadi ) { 
gonder = new fthrkl( );      
gonder.onreadystatechange = function ( ) {      
document.getElementById(alanadi ).innerHTML ="Yükleniyooo"; 
if( gonder.readyState == 4 ) { 
document.getElementById(alanadi ).innerHTML = gonder.responseText; function fthrkl( ) {};}} 
gonder.open('GET',syf+'?'+degerler, true ); 
gonder.send("" );      
} 
</script>

İlk olarak sayfada başka bir sayfayı gösterelim.

İstediğiniz elementin event (olay ) etiketinde kullanabilrsiniz.

<Body Onload="git('','Sayfaadi.Asp','divadi' );"> 
<div id="divadi"></div> 

yada 

<button onclick="git('','Sayfaadi.Asp','divadi' );">Sayfayı Göster</button> 
<div id="divadi"></div> 

Sayfayi Göster butonuna tıklayında "divadi" adlı div'in içeriğinde gözükecektir. Div etiketi yerine <span></span>'da kullanabilirsiniz.

Şimdi ise başka bir sayfaya veri yollayalım.

Yolla.asp adında bie sayfamız olsun. Bu sayfada gelen verileri ekrana yazdıracağız.

İlk önce bir form yapalım.

<input type="text" name="isim" id="isim"> 
<input type="submit" value="Gönder" onclick="git('isim='+isim.value,'Sayfaadi.Asp','divadi' );"> 
<div id="divadi"></div>
Yolla.asp: 
<% 
isim=request.querystring("isim" ) 'Gelen veriyi get yöntemi ile alıyoruz !!! 
Response.write "Merhaba" & isim 
%>

Fonksiyonu açıklıyorum.

git('isim='+isim.value,'Yolla.asp','divadi' ); 

"git" fonksiyonumuzun adı.

Fonksiyonun ilk parametresinde yollanacak değerleri belirliyoruz.

Bu değerleri Yolla.asp 'de get yöntemi ile çekeceğiz.

İkinci parametrede gönderilecek sayfanın adı. Üçüncüde ise Yolla.asp'nin içeriğinin gösterileceği elementin adını veriyoruz.

Javascript gıcık bir dildir, olur olmadık yerlerde hata verir .

Kodlar küçük-büyük harf duyarlıdır.

bir inputun içeriğini inputadi.value şeklinde alabiliyoruz. Value input'un bir paremetresi.

Value inputun üzerinde yazılı olan yazıyı verir. inputadi.size deseydik inputun büyüklüğü, inputadi.style deseydik inputun stil kodlarını alırız. Bu şekilde istediğiniz elementin paremetresini alabiliriz.

inputadi.value, bu yöntemin işe yaramadığı yerde şunu kullanın.

document.getElementById("inputadi" ).value

[wmismail]

Yönetim işini boşver başlıyorum zaten asp derslerine . İlk olarak biras java paylaşalım:)

Notepad derken de ben orda sadece bir ağır programa gerek olamdığını anlatmaya çalışmıştım:)

Ama Bende Notepad++ 4,21 kullanıyorum.

Hakkı Öncalın asp rehberi güzel. Fakat biz asp Görsel Eğitim Seti Upload edip onu yayımlayacağız.

İyi Çalışmalar.

[wmismail]

İlk önce web site tasarlamanız için geren en temel html'dir.

Html bilmeden sayfa tasarlayabilirsiniz, ama tasarladığınız sayfa mutlaka eksik yerler olur, altından kalkamazsınız. Onun için ilk önce html dilini öğrenmelisiniz, Html öğrendikten sonra dreamwaver, frontapage gibi editör kullanabilirsiniz.

Eştiemel, hatemele yada hetemele diye okunur. Bize okunuşu değil kendisi lazım olcak

(baslik)Html'in temeli 25-30 koddan oluşmakta, ilk olarak bunları göreceğiz. (/baslik)

Sonra diğer tekniklere, betiklere geçicez.

Html kodlarını çalıştırmak için ekstra hiç bir yazılıma gerek yoktur.

Not defteri yeterlidir, html editörleri var fakat başlarda html'in mantığını kapmamız için not defteri kullanacağız.

İlk önce sayfaların uzantılarını kolayca değiştirebilmemiz için dosyaların yanında uzantılarınıda göstertmemiz lazım. Şu yolu izleyin;

her hangi bi klasör açın, yukarıdan araçlar sekmesine gelin. Sonra klasör seçeneklerini açın. Görünüm menüsüne gelin, 5. kutucuğu deaktif edin.

Tamam diyerek oradan çıkın.

Şimdi not defterini açın.

Html kodlarımızı yazmaya başlayabiliriz.

Html kodları <html> etiketi ile başlar, </html> etiketi ile biter.

<html> 
<head> 
<title>Sayfa Başlığı</title> 
</head> 
<body> 
Sayfa İçeriği 
</body> 
</html>[/CODE]

Temel html'in kod düzeni böyledir.

<html> ile başlar, <head></head> arasında sayfanın öznitekikleri (başlık, dil) vb. belirtilir. <body></body> arasında ise sayfanın ekranda görüntülenen şeyleri (yazı, resim, video vb.) bulunur.

Bir örnek yapalım.

Aşağıdaki kodları not defterine yapıştırın.

Sonra dosya>farklı kaydet yapın.

Sayfanın ismi sayfaadi.html olsun.

İstediğiniz sayfa adını koyabilirsiniz, sonunda .html uzantısı olacak.

[CODE]<html>
<head>
<title>Html örnek 1</title>
</head>
<body>
Bu yazıyı body etiketinin arasına yazdık.
</body>
</html>[/CODE]

Sonra sayfanızı açın.

Bu en temel örnekti.

Şimdi resim eklemeyi, kalın yazmayı, italik yazmayı, link vermeyi göreceğiz.

[b]Kalın Yazmak: [/b]

<b></b> etiketleri arasına yazdığınız yazılar kalın yazılır.

[b]İtalik Yazmak [/b]

<i></i> etiketleri arasına yazdığınız yazılar italik yazılır.

[b]ALtı Çizgili Yazmak [/b]

<u></u> etiketleri arasına yazdığınız yazılar altı çizgili yazılır.

Örnek:

[CODE]<html>
<head>
<title> Html örnek 2</title>
</head>
<body>
Burası yazıyı body etiketinin arasına yazdık.
<b>Bu yazıyı body etiketinin arasına yazdık.<b>
<br>
<i>Bu yazıyı body etiketinin arasına yazdık.<i>
<br>
<u>Bu yazıyı body etiketinin arasına yazdık.<u>
</body>
</html>[/CODE]

Yine aynı şekilde not defterine yapıştırın ve farklı kaydet yapın. Dosyanızın uzantısı .html olsun.

<b> arasına yazdıklarımızın kalın, <i> arasına yazdıklarımızın italik yazıldığını göreceksiniz.

yazıları yazdıktan sonra <br> etiketini kullandık, bu etiket alt satıra inmeyi sağlar...

[b]Link Vermek [/b]

<a href="Gidilecek Link">Ekranda gözükecek şekli</a>

En basit şekli budur, href kısmına gidilecek linki veriyoruz.

örnek:

[CODE]<html>
<head>
<title>Html örnek 3</title>
</head>
<body>
<a href="http://www.google.com">Google.com sitesine gitmek için tıklayın</a>
</body>
</html>
[/CODE]

[b]Resim Eklemek[/b]

[CODE]<img src="resim.jpg"> [/CODE]

Bu şekildede resim ekleriz, src kısmına resmin ismini ve uzantısını yazıyoruz.

Resim ile html dosyasının aynı dizinde olmasına dikkat edin.

[tuana2108]

merhaba ben maıl form yazpmak ıstıyorum sıteme soylekı sıteden yazılan maıllerı ala bılmelıyım

ama nasıl yapcammm

[doruk101]

Yönetim işini boşver başlıyorum zaten asp derslerine . İlk olarak biras java paylaşalım:)

Notepad derken de ben orda sadece bir ağır programa gerek olamdığını anlatmaya çalışmıştım:)

Ama Bende Notepad++ 4,21 kullanıyorum.

Hakkı Öncalın asp rehberi güzel. Fakat biz asp Görsel Eğitim Seti Upload edip onu yayımlayacağız.

İyi Çalışmalar.

Reklam yapmayacaksan, yöneticiler birşey demez. Reklama sadece TnCTR reklamı olunca izin verilir.

[wmismail]

merhaba ben maıl form yazpmak ıstıyorum sıteme soylekı sıteden yazılan maıllerı ala bılmelıyım

ama nasıl yapcammm

Sitene iletişim formu yapıp yazılanları mı mail olarak alacaksın ?

doruk reklam yok merak etme:)

[wmismail]

Anlamadığınız yerleri sorabilirsiniz. Veya anlamadığınız yerleri daha ayrıntılı örneklerle anlatabilirim;)

[wmismail]

Ajax ile sayfa yeniden yüklenmeden başka bir sayfayı gösterebilir, o sayfaya veri gönderebiliriz. Mesela sayfa yeniden yüklenmeden veritabanına kayıt girebiliriz, kayıtları listeleyebiliriz. Ajax bir dil değildir. Ajax 7-8 satır js kodudur. Tabi ajax kütüphaneleri sayfalarca kod olabilir. Şimdi sadece en temel işlemleri göreceğiz.

İlk önce şu fonksiyonları sayfanızın <head></head> etiketleri arasına yapıştırın.

<script type="Text/Javascript" Language="Javascript"> 
function fthrkl( ) { 
var objemiz; 
/*@cc_on @*/ 
/*@if (@_jscript_version >= 5 ) try { objemiz = new ActiveXObject("Msxml2.XMLHTTP" ); } 
catch (e ) { 
try { objemiz = new ActiveXObject("Microsoft.XMLHTTP" ); } 
catch (E ) { objemiz = false; } 
}@end @*/ 
if (!objemiz && typeof XMLHttpRequest!='undefined' ) { 
try {objemiz= new XMLHttpRequest( );} 
catch (e ) {objemiz=false;}} 
return objemiz;} 

function git(degerler,syf,alanadi ) { 
gonder = new fthrkl( ); 
gonder.onreadystatechange = function ( ) { 
document.getElementById(alanadi ).innerHTML ="Yükleniyooo"; 
if( gonder.readyState == 4 ) { 
document.getElementById(alanadi ).innerHTML = gonder.responseText; function fthrkl( ) {};}} 
gonder.open('GET',syf '?' degerler, true ); 
gonder.send(null); 
} 
</script> [/CODE]

İlk olarak sayfada başka bir sayfayı gösterelim.

İstediğiniz elementin event (olay ) etiketinde kullanabilrsiniz.

[CODE]
<Body Onload="git('','Sayfaadi.Asp','divadi' );">
<div id="divadi"></div>[/CODE]

yada

[CODE]<button onclick="git('','Sayfaadi.Asp','divadi' );">Sayfayı Göster</button>
<div id="divadi"></div>[/CODE]

Sayfayi Göster butonuna tıklayında "divadi" adlı div'in içeriğinde gözükecektir. Div etiketi yerine <span></span>'da kullanabilirsiniz.

Şimdi ise başka bir sayfaya veri yollayalım.

Yolla.asp adında bie sayfamız olsun. Bu sayfada gelen verileri ekrana yazdıracağız.

İlk önce bir form yapalım.

[CODE]<input type="text" name="isim" id="isim">
<input type="submit" value="Gönder" onclick="git('isim=' isim.value,'Sayfaadi.Asp','divadi' );">
<div id="divadi"></div>[/CODE]

[b]Yolla.asp:[/b]

[CODE]<%
isim=request.querystring("isim" ) 'Gelen veriyi get yöntemi ile alıyoruz !!!
Response.write "Merhaba" & isim
%>[/CODE]

Fonksiyonu açıklıyorum.

[CODE]git('isim=' isim.value,'Yolla.asp','divadi' ); [/CODE]

"git" fonksiyonumuzun adı.

Fonksiyonun ilk parametresinde yollanacak değerleri belirliyoruz.

Bu değerleri Yolla.asp 'de get yöntemi ile çekeceğiz.

İkinci parametrede gönderilecek sayfanın adı. Üçüncüde ise Yolla.asp'nin içeriğinin gösterileceği elementin adını veriyoruz.

Javascript gıcık bir dildir olur olmadık yerlerde hata verir

Kodlar küçük-büyük harf duyarlıdır.

bir inputun içeriğini inputadi.value şeklinde alabiliyoruz. Value input'un bir paremetresi.

Value inputun üzerinde yazılı olan yazıyı verir. inputadi.size deseydik inputun büyüklüğü, inputadi.style deseydik inputun stil kodlarını alırız. Bu şekilde istediğiniz elementin paremetresini alabiliriz.

inputadi.value, bu yöntemin işe yaramadığı yerde şunu kullanın.

[CODE]document.getElementById("inputadi" ).value[/CODE]

Yazı için Fthrkl arkadaşa teşekkür ediyorum.

[wmismail]

Baya uzun bir ders olacak sabırla okursanız faydalı şeyler

öğrendinizi görüceksiniz.Yazıma başlamadan önce veritabanıyla ilgili dersleri okumanızı öneriyorum. "db.mdb" adında bir veritabanımımız olsun içine urun adında bir tablo oluşturalım.Tablomuzun alanları :

id (otomatik sayı) , ad(not) , fiyat (sayı) olsun ve tablomuza bir kaç kayıt girin.Ana sayfamızda bu tablomuzdaki kayıtları listelicez.Veritabanı bağlantımızı

"db.asp" olarak kaydedelim:

<%
db = Server.MapPath("db.mdb" )
Set baglanti = Server.CreateObject("ADODB.Connection" )
baglanti.Open "Provider=Microsoft.JET.OLEDB.4.0; Data Source=" & db & ";" ' veritabanı bağlantımızı yaptık
%>[/CODE]

Veritabanı bağlantımızı her sayfamızda yeniden yazmak yerine include etmek sitemizin performansını arttıracaktır.

Ana Sayfamız ise Şöyle olacak:

[CODE]Ana Sayfa <br />
<!-- #include file="db.asp" -->
<%
Set Rs = Server.CreateObject("ADODB.RecordSet")
sql = "Select * from urun order by id desc;"
Rs.Open sql,baglanti,1,3
if Rs.eof then
Response.Write "Kayıt Yok"
End if
Do while not Rs.eof 'Tum kayıtları yazdırabilmek icin dongumuzu baslattık
with Response
.Write " Urun Ad: "&Rs("ad")&" " ' : boslugun ascii kodudur.Urun adımızı yazdırdık
.Write "Urun Fiyat: "&Rs("fiyat")&" YTL " 'Urun fiyatını yazdırdık
.Write "<a href=""sepete_at.asp?id="&Rs("id")&""">Sepete At</a> <br />" 'sepete_at.asp 'ye link verdik.Alacağımız urunu belirleyebilmek içinde urunun idsini sepete_at.asp sayfamıza yolladık
End with
Rs.MoveNext
Loop'Dongumuzu sonlandırdık
%>
<br /><a href="yonetici.asp">Yönetici Girişi</a>[/CODE]

Ana Sayfamız tamamlandı.Şimdi sıra sepete_at.asp 'de.Bunun için veritabanımızda sepet adında bir tablo oluşturalım.Tablonun Alanları:

id (otomatik sayı) , Session_id(not) , urun_id (sayi) şeklinde olacak.Artık sepete_at.asp sayfamızı oluşuturabiliriz:

[CODE]<!-- #include file="db.asp" -->
<%
id = Request.QueryString("id") 'ana sayfamızdan yolladığımız id değerini id değişkenine atadık
if id = "" or not isnumeric(id) then 'eğer id değeri boşsa yada bir sayı değilse
Response.Write "Güvenlik Duvarı" 'Güvenlik Duvarı yazısı yazdırdık
Response.End 'Bu bir güvenlik önlemidir kötü niyetli kişiler eğer bu kontrolu yapmazsanız sitenizi hackliyebilirler
End if
Set Rs = Server.CreateObject("ADODB.RecordSet") 'urunumuzle ilgili bilgileri alabilmek için RecordSetimizi açtık
sql = "Select * from urun where id = "&id&" " 'Sql kodumuz
Rs.Open sql,baglanti,1,3
if Rs.eof then 'Eger kayıt bulunamzsa
Rsponse.Write "Böyle bir ürün bulunmamaktadır" 'Böyle bir ürün bulunmamaktadır yazısı yazdırdık
Response.End
End if
Set Rs2 = Server.CreateObject("ADODB.RecordSet")'urunumuzu sepete atabilmek için RecordSetimizi açtık
sql = "Select * from sepet" 'sql kodumuz
Rs2.open sql,baglanti,1,3
Rs2.AddNew 'sepet adlı tablomuza yeni bir kayıt ekledik
Rs2("Session_id") = Session.SessionID 'tablomuzdaki Session_id adlı alanımızın değerini oturumuz idmiz oalrka belirledik
Rs2("urun_id") = Rs("id") 'tablomuzdaki urun_id adlı alanımızın değerini ilk tablomuzdaki id alanının değeri olarka belirledik
Rs2.Update
Response.Write "Urun Sepetinize Eklendi" 'Urun Sepetinize Eklendi yazısı yazdırdık.
Response.Write "<br />Sepetinize bakmak için <a href=""sepetim.asp"">tıklayın</a>" 'Sepetimizi kontrol etmek için sepetim.asp 'ye link verdik
%>[/CODE]

Geriye 4 tane sayfamız kaldı ilki sepetimizi kontrol edeceğimiz sayfa ikincisi sepetimizden urun cıkaracagımız sayfa ucuncusu urunleri

sipariş edeceğimiz sayfa sonuncusu ise site sahibinin sipariş edilen urunleri göreceği sayfa.İşte sepetim.asp sayfamızın kodları:

[CODE]<!-- #include file="db.asp" -->
<%
Session_id = Session.SessionID
Set Rs = Server.CreateObject("ADODB.RecordSet")
Sql = "Select * from sepet where session_id = '"&Session_id&"' "
Rs.Open sql,baglanti,1,3
if Rs.Eof Then
Response.Write " Hiç Bir Ürün Bulunamadı"
End if
Do while not Rs.eof
Set Rs2 = Server.CreateObject("ADODB.RecordSet") 'urunumuzle ilgili bilgileri alabilmek için RecordSetimizi açtık
sql = "Select * from urun where id = "&Rs("urun_id")&" " 'Sql kodumuz
Rs2.Open sql,baglanti,1,3
with Response
.Write " Urun Ad: "&Rs2("ad")&" " '.Urun adımızı yazdırdık
.Write "Urun Fiyat: "&Rs2("fiyat")&" " 'Urun fiyatını yazdırdık
.Write "<a href=""sepetten_cikart.asp?id="&Rs2("id")&""">Sepeten Çıkart </a> <br />"'sepetten_cikart.asp 'ye link verdik.
End with
Rs.MoveNext
Loop
%>
<br /><a href="siparis.asp">Ürünleri Sipariş Et</a>
[/CODE]

sepetim.asp de bitti sırada ürünlerimizi çıkaracağımız [i]sepetten_cikart.asp[/i] var :

[CODE]<!-- #include file="db.asp" -->
<%
id = Request.QueryString("id") 'Diğer sayfamızdan gelen di değerini id değişkenine atadık
if id = "" or not isnumeric(id) then 'Güvenlik kontrolu
Response.Write "Güvenlik Duvarı!"
End if
Session_id = Session.SessionID
Set Rs = Server.CreateObject("ADODB.RecordSet") 'RecordSetimizi açtık
sql = "Delete from sepet where urun_id = "&id&" and session_id = '"&Session_id&"' " 'Aynı ürünü iki kişininde sepete atma olsaılığ olduğundan oturum idsi kontrolude yaptık
Rs.Open sql,baglanti,1,3
Response.Write "Urun Sepepetten Çıkarıldı"
%>[/CODE]

Geldik urunlerimizi sipariş edeceğimiz sayfaya bunun için bir form hazırlıyacağız ziğariş edenin adı soyadını, adresini , ve oturum idsini

veritabanına kaydettireceğiz.Bu yüzden siparis adında yeni bir tablo oluşturlım.Tablomuzun alanları : id (otomatik sayı),ad-soyad(not),

adres(not),tel(sayi) ,session_id(not).Formumuzun bulunduğu siparis.asp sayfamız:

[CODE]<form action="siparis_kayit.asp" method="post"/>
<label for="ad-soyad">Adınız Soyadınız:</label><input type="text" name="ad-soyad" /><br />
<label for="tel">Telefonunuz:</label><input type="text" name="tel" /><br />
<label for="adres">Adresiniz:</label><input type="text" name="adres" /><br />
<input type="submit" value="Sipariş Et" />
</form>[/CODE]

[i]siparis_kayit.asp :[/i]

[CODE]<!-- #include file="db.asp" -->
<%
ad_soyad = Request.Form("ad-soyad") 'Form değerlerimizi değişkenlere aktardık
tel = Request.Form("tel")
adres = Request.Form("adres")
if ad-soyad = "" or tel = "" or adres = "" then 'eğer form değerleri boşsa
Response.Write "Boş Alan Bıraktınız" 'boş alan bıraktınız yazdırdık
Response.End
End if
Set Rs = Server.CreateObject("ADODB.RecordSet")
sql = "Select * from siparis"
Rs.Open sql,baglanti,1,3
Rs.AddNew 'Yeni kayıt ekledik
Rs("ad-soyad") = ad_soyad
Rs("tel") = tel
Rs("adres") = adres
Rs("session_id") = Session.SessionID
Rs.Update
Response.Write "Siparişiniz Alınmıştır"
%>[/CODE]

Evet makalemizde sonlara yaklaşıyoruz geriye sadece site sahibinin siparişleri görmesi kaldı.Yönetici girişi yapılırken sifre sorulacak.

Şifreli sayfa oluşturmayıda geçen derslerde anlatmıştım.Konuya buradan ulaşabilirsiniz.

[i]yonetici.asp:[/i]

[CODE]<!-- #include file="db.asp" -->
Yonetici <br /><%
if Session("giris") = "evet" then 'eğer giriş oturumunun değeri evetse
Set Rs = Server.CreateObject("ADODB.RecordSet")
sql = "Select * from siparis order by id desc;"
Rs.Open sql,baglanti,1,3
Response.Write " <a href=""siparis_detay.asp?id="&Rs("id")&"""> "&Rs("ad-soyad")&" </a> <br />" 'sipariş verenin adını yazdırdık adına tıklanılınca da detayalrın açılması için link verdik
Else ' değilse
Response.Write "<a href=""giris.asp"">Giriş Yapmalısınız</a>" 'giris.asp dosyasına link verdik.
End if
%>
[/CODE]

[i]giris.asp :[/i]

[CODE]<form action="kontrol.asp" method="post" />
Şifreyi Girin : <br />
<input type="password" name="sifre" />
<input type="submit" value="Giriş" />
</form>[/CODE]

[i]Kontrol.asp :[/i]

[CODE]<% sifre = Request.Form("sifre") ' formumuzun değerini sifre değişkenine atadık
if sifre = "" then ' formun doldurulup doldurulmadığını kontrol ediyoruz
Response.Write "Sifre Girmediniz!"
End if
gsifre = "123456" 'giriş sifresini burdan değiştirebilirsiniz
if sifre = gsifre then 'eğer girilen şifre giriş şifresine eşitse
Session("giris") = "evet" 'giriş oturumunun değeri evet olcak
Response.Redirect "yonetici.asp" 'yonetim sayfasına yönlendirdik
else 'değilse
Response.Redirect "yonetici.asp" 'giriş oturumuna değer vermeden yonetim sayfasına yönlendirdik
End if
%>[/CODE]

Evet şimdi yöneticinin detaylara bakabilmesi için siparis_detay.asp 'yi oluşturalım:

[i]siparis_detay.asp;[/i]

[CODE]<!-- #include file="db.asp" -->
<%
id = Request.QueryString("id") 'Diğer sayfamızdan gelen id değerini id değişkenine atadık
if id = "" or not isnumeric(id) then 'Güvenlik kontrolu
Response.Write "Güvenlik Duvarı!"
End if
Set Rs = Server.CreateObject("ADODB.RecordSet") 'RecordSetimizi açtık
sql = "Select * From siparis where id = "&id&" " 'sql kodumuz
Rs.Open sql,baglanti,1,3
with Response
.Write "Ad-Soyad:"&Rs("ad-soyad")&" <br />" 'bilgileri sıraladık
.Write "Telefon:"&Rs("tel")&" <br />"
.Write "Adres:"&Rs("adres")&" <br />"
.Write "<br />Aldığı Ürünler: <br />"
End with

Set Rs2 = Server.CreateObject("ADODB.RecordSet")'RecordSetimizi açtık
sql = "Select * from sepet where session_id='"&Rs("session_id")&"' " 'sql kodumuz
Rs2.Open sql,baglanti,1,3
Do while not Rs2.eof 'kayıtların hepsini sıralyabilmek için dongumuzun başlangıcı
Set Rs3 = Server.CreateObject("ADODB.RecordSet")
sql = "Select * from urun where id = "&Rs2("urun_id")&" "
Rs3.Open sql,baglanti,1,3
Response.Write " "&Rs3("ad")&" <br />"'bilgileri sıraladık
Rs2.MoveNext
Loop 'dongumuzun sonu
%>[/CODE]

[wmismail]

body için özellikler tanımlanacak.

#containertanımlanacak

#header tanımlanacak

#side ve #content tanımlanacak

#footer tanımlanacak

Ve float kullandığımız için bir clear alanı tanımlanacak.

CSS işlemine geçmeden önce haritamız hazır olduğundan hemen XHTML kodlarını yazarak başlıyorum;

<body>
<div id="container">
<div id="header"></div>
<div id="side"></div>
<div id="content"></div>
<div class="clear"></div>
<div id="footer"></div>
</div>
</body>[/CODE]

Bu aşama genel iskeletimizi oluşturmak içindi. Şimdi listemizde yer alan sıra ile kodlarımızı tek tek yazalım;

[CODE]body {
margin: 20px 0; /* bodyde sağ ve solda oluşan boşluklar yok edilir */
padding: 0;
font: 11px/15px tahoma, 'trebuchet ms', arial, verdana;
color: #fff;
background: #fefefe;
}
#container {
width: 780px;
margin: 0 auto; /* #container alanı ortalanır */
padding: 20px;
background: #eee;
}
#header {
height: 90px;
background: #9c0;
margin: 0 0 20px;
}
#side {
float: left; /* sola hizala (yasla) */
width: 250px;
background: #09f;
}
#content {
float: right; /* sağa hizala (yasla) */
width: 470px;
background: #f90;
}
#side, #content {
height: 300px; /* Görsel olması için bu alan tanımlandı. Tasarım aşaması bittiğinde sabit olmayacak olan yüksekliklerin silinmesi önerilir. Aksi durumda tasarımınızda bozulmalar olabilir. */
}
.clear {
clear: both; /* float alanları temizle */
}
#footer {
height: 70px;
background: #f39;
margin: 20px 0 0;
}
#header, #side, #content, #footer { /* Ortak değerler tanımlanıyor */
padding: 10px;
}[/CODE]

[wmismail]

Javascript ile css2 'deki opacity (saydamlık) değerini değiştirebilirsiniz. Mesela opacity ile görünmez yapılmış bir elementi yavaş yavaş görünür hale getirerek güzel bir efekt uygulayabilirsiniz. Bu efekt kullanıcının gözüne çok güzel gözükecektir. Fonksiyonu goster('elementId'); diyerek çağırabilrisiniz. Yalnız ilk önce efekti uygulayacağınız yani fonksiyonda belirttiğiniz id'deki elemente

 style="filter: alpha(opacity=00); opacity:.00; moz-opacity:.00;"[/CODE]

style parametresini ekleyerek css ile opacity değeri vermelisiniz. İyi çalışmalar

[wmismail]

javascript ile sayfaadi.html?islem=iletisim gibi sayalar oluşturabilirsiniz. Ama bunu asp yada php gibi dillerle yapmak yerine javascript ile yapmak pek tercih edilmez sadece mantığını göstermek için ekliyorum.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Javascript</title>
<script type="text/javascript" language="javascript">
function yazdir(yazi) {
document.write(yazi);
}
var adres=document.URL;
var bol=adres.split("?");
var say=bol.length;
say--;
if (say==0) {anasayfa();}
else {

var ikinci=bol[1].split("=");
var islem=ikinci[1]

if (islem=="haberler") {haberler();}
if (islem=="download") {download();}
if (islem=="anasayfa") {anasayfa();}
if (islem=="iletisim") {iletisim();}

}
function haberler() {
yazdir("Burası haberler<br>")
}
function iletisim() {
yazdir("Burası iletisim<br>")
}
function download() {
yazdir("Burası download<br>")
}
function anasayfa() {
yazdir("Burası Anasayfa<br>")
}
</script>
</head>
<body>
<a href="js_querysting.html?islem=anasayfa">Anasayfa</a>
<a href="js_querysting.html?islem=haberler">Habeler</a>
<a href="js_querysting.html?islem=iletisim">İletişim</a>
<a href="js_querysting.html?islem=download">Download</a>
</body></html>[/CODE]

[wmismail]

Class'ın türçe anlamı sınıf demektir. Class'lar içinde sub ve function barındırırlar.

Daha önce function ve sub kullanımını görmüştük. Şimdi her ikisini birden kullanarak class'lar oluşturacağız.

Class Classadi diyerek yazılmaya başlanır. Set islem=New Classadi diyerek sayfada kullanılır.

Söz dimi şöyledir:

<%
Class ClassAdi
'Functionlar
'Sublar
End Class
%>[/CODE]

Kullanırken ise

[CODE]<%
Set setadi=New Classadi
setadi.Sub_yada_functionun_adi
%>[/CODE]

Bir örnek yapalım.

[CODE]<%
Class yazi_islemleri
Function buyukyaz(yazi)
yazi=Ucase(yazi)
buyukyaz=yazi
End Function

Sub yaz(yazi,kactane)
For i=0 to kactane
Response.Write yazi + "<br>"
Next
End Sub
End Class
%>[/CODE]

İçindeki Function'ları vs Sub'ları anlatmaya gerek yok. Onları önceki derslerimizde görmüştük. Şimdi sadece classın yapısına ve kullanımına bakacağız.

Şimdi içindeki sub'ları çalıştıralım yada fonksiyonlarla işlemler yapalım.

Class'ın içinde bir function ve bir sub kullandık. Function belirlediğimiz yazıyı büyük harflre çeviriyor, sub ise yazdığımız yazıyı istediğimiz sayıda tekrarlarmasını sağlıyor.

Class'ları sayfa içinde kullanmak için bir set açıyoruz.

[CODE]<%
Set islemler=New yazi_islemleri 'yazi_islemleri adındaki classımızı çağırdık.
%>[/CODE]

[CODE]<%
yazi="Active Server Pages"
islemler.buyukyaz(yazi) ' yazi adlı değişkenimizi büyük harflerle yazdırdık.
islemler.yaz(yazi,5) ' yazi adlı değişkeni 5 kere yazdirdik.
%>
[/CODE]

En basitinden bir örnek vermek geregirse basit bir hesap makinası yapalım.

[CODE]<%
Class hesapla
Sub topla(s1,s2)
Response.write int(s1) + int(s2)
End Sub
End Class
%>[/CODE]

Class'ta sadece toplama işlemini var. Siz diğer işlemleride yazdırabilirsiniz.

[CODE]<%
Set islemler=New hesapla
islemler.topla(5,5)
%>[/CODE]

Sonuç 10 çıkacaktır...

[wmismail]

Sub'lar aynı fonksiyonlar gibi kodlarımızı daha pratik, az yazmaya yarar.

Örneğin sitemizde kullanıcı bölümü adında bir yer var.

Bu bölümü gerekli yerlerde göstermek için kodları teker teker yazıyoruz. Buda hiç iyi olmuyor. Hem server hemde biz bakımından. Örneğin kullanıcı bölümünden bir yer değiştireceksek hepsinde değiştirmek zorunda kalıyoruz.

Ama Sub kullanırsak böyle bir sorun olmaz. Sub'ımızı oluştururuz. Sub'ın içine kullanıcı bölümünü koyarız. Gerekli yerlerde çağırırız. Bu kadar basit Şimdi kullanımına geçelim. Öncelikle söz dizimi şöyledir;

<%
Sub islemler(deger1,deger2)
'işlemler
End Sub
%>[/CODE]

Gerekli yerlerde çağırmak için call komutunu kullanırız.

[CODE]<%
Call islemler(deger1,deger2)
%>[/CODE]

yada

[CODE]<%
islemler deger1, deger2
%>[/CODE]

Sub diyerek işlemi başlatırız. Sub'ın adını yazarız ve Sub'ın içinde olacağı Nesneleri,Kodları yazarız. End Sub ile bu kodları bitiririz. Bir örnek yapalım;

[CODE]<%
Sub AO()
response.write "http://www.tnctr.com"
End Sub
Call AO()
%>[/CODE]

Ekrana AO sub'ının içindeki kodları yansıtacaktır. Call AO() komutunu ne kadar yazarsak o kadar kodları gösterir.

Peki AO'nun sonundaki parantez ne oluyor

Onu yazmasanızda olur. Ama eğer sub'ı çağırırken bir değer vereceksek yazmamız gerekir. (Fonksiyon Misali) Örnek;

[CODE]<%
Sub AO(isim)
response.write "Hoşgeldiniz "&isim&""
End Sub
Call AO("tnc")
%>[/CODE]

Ekrana Hoşgeldiniz tnc yazar. Çünkü Sub'ı çağırırken isim değişkenine fatih değerini verdik. Call AO("tnctr.com") Böyle çağırsaydık Hoşgeldiniz tnctr.com yazardı.

Bu şekilde aralarına virgül koymak şartıyla birden fazla değer kullanabiliriz.

<%

Sub islemler(kackere,isim)

for i=0 to kackere

response.write ""&isim&" <br>"

next

Call islemler(5,"tnctr")

End sub

%>

Ekrana 5 kere tnctr yazdıracaktır. Çünkü sub'ı çağırırken bir değer verdik (5).

Bu değeri sub'da değişken olarak kullanılması için sub'ı tanımlarken belirttik.

Ve belirttiğimiz değişkeni döngüye sokarak alınan değer kadar döndürdük.

Bir örnek daha yapalım. Pratik bir hesap makinası

[CODE]<%
Sub topla(sayi1,sayi2)
response.write sayi1+sayi2
End sub
Call topla(5,10)
%>[/CODE]

Ekrana 15 yazdıracaktır.

Bu gibi istediğiniz işlemi yapabilirsiniz. Mesela kendiniz için ufak bir kütüphane oluşturabilirsiniz. Şimdi son bir örnek daha yapıyorum.

[CODE]<%
Sub hesapla(sayi1,sayi2,isaret)
if isaret="-" then
response.write sayi1-sayi2
elseif isaret="+" then
response.write sayi1+sayi2
elseif isaret="*" then
response.write sayi1*sayi2
elseif isaret="/" then
response.write sayi1/sayi2
else
response.write "İşaret Tanımsız"
end if
End Sub

Call hesapla(5,10,"-")
Call hesapla(5,10,"+")
Call hesapla(5,10,"*")
Call hesapla(5,10,"/")
%>
[/CODE]

Sayi1,Sayi2 değişkenlerimizi çağırdık.

islem değişkenindeki işaret ile sayi1 ve sayi2yi işleme sokturduk.

Response.write ile işleme sokulan değerleri yazdırdık.

[wmismail]

Normalde css ile radio butonlar, checkboxların vs görüntüsü tam anlamıyla değişmez. Şimdi size vereceğim javascript fonksiyonu ile checkbox'larınıza istediğiniz gibi şekil verebilirsiniz. Hatta checkbox'larınza şekil verebilirsiniz demek yanlış olur çünkü checkbox kullanılmıyor checkbox yerine hidden input kullanılıyor. Firefox, opera ve ie üzerinde test edilmiştir.

Download :

http://www.tnctr.com/s/?TXkC

İçince psd sürümü vardır. Herhangi bir photoshop sürümü ile kendi sitenize göre uyarlayabilirsiniz.

[wmismail]

Bu kod ile 'adox.catalog' objesini kullanarak site üzerinden online veritabanı ekleyebilirsiniz. Bu yöntemi scriptlerinizin kurulum dosyalarında kullanabilirsiniz.

<% 
yol=server.mappath("veritabani.mdb") 
stringimiz="provider=microsoft.jet.oledb.4.0; data source="&yol&";" & _
"jet oledb:Engine Type=5;"
set olustur= server.createobject("adox.catalog") 
olustur.create stringimiz 
%>[/CODE]

olustur.create diyerek oluşturulacak db'nin stringini yazıyoruz.

Normal veritabanına bağlanırken yazdığınız stringi burada kullanabilirsiniz.

Ama sonuna ; işareti ekleyerek oluşturukacak veritabanının sürümünüde yazmamız gerekir.

'engine type=5' accsess 2000 veritabanı oluşturmamızı sağlar.