arşiv

yazılar buna göre etiketlendi; ‘html form işleme’

JavaScript ile HTML İşleme – 3

Cumartesi, 21 Mar 2009 Soner Gönül View Comments

Merhabalar..Yazının 3. kısmında açılır kutulardan, metin alanlarının işlenmesinden  bahsedeceğim.

  • Açılır Kutuların İşlenmesi

Bu kutularla ilgili en önemli özellik selectedIndex’tir. Bu özellik hangi açılır kutu değerinin seçildiğini belirler ve değeri sıfırdan başlayarak toplam seçenek sayısının 1 eksiği kadardır.

Bu kutuların çalıştırdığı en önemli olay onchange’dir. Bu açılır kutudaki seçenek her değiştirğinde meydana gelir.

  1. <html>
  2. <head>
  3. <script type=”text/javascript”>
  4. function acilirtest(acilirkutu)
  5. {
  6. deger = acilirkutu.value;
  7. alert (“Açılır kutu değeri ” + deger);
  9. for (i=0; acilirkutu.length; i++)
  10. alert (acilirkutu[i].value);
  11. }
  12. </script>
  13. </head>
  14. <body>
  15. <form name=”form1″>
  16. <select name=”iller” onchange=”acilirkutu(this)”>
  17. <option value=”6″>Ankara</option>
  18. <option value=”22″ selected>Edirne</option>
  19. <option value=”34″>İstanbul</option>
  20. <option value=”39″>Kırklareli</option>
  21. </select>
  22. <input type=”button” value=”Ankara”
  23. onclick=”document.form1.iller.selectedIndex=0″>
  24. <input type=”button” value=”Edirne”
  25. onclick=”document.form1.iller.selectedIndex=1″>
  26. <input type=”button” value=”İstanbul”
  27. onclick=”document.form1.iller.selectedIndex=2″>
  28. <input type=”button” value=”Kırklareli”
  29. onclick=”document.form1.iller.selectedIndex=3″>
  30. </form>
  31. </body>
  32. </html>

Yukarıdaki kodun çıktısı ağaşıdaki gibi olur.

Biz hangi butona basarsak açılır kutuda o butonun onclikc olayı çalışacağından o ili gösterecektir.

  • Metin Alanlarının İşlenmesi

Metin alanlarında value özelliği kulanılarak metin kutusu içerisindeki değer rahatlıkla okunabilir ya da üzerinde değişiklik yapılabilir.

  1. <html>
  2. <head>
  3. <script type=”text/javascript”>
  4. function oku()
  5. {
  6. metin=document.form1.soz.value;
  7. alert (“Metin alanı içindeki değer ” + metin);
  8. }
  9. function yaz()
  10. {
  11. document.form1.soz.value=”Soner Gönül ” + “www.sonergonul.com”;
  12. }
  13. </script>
  14. </head>
  15. <body>
  16. <form name=”form1″>
  17. <textarea name=”soz”>Haydi şimdi bütün eller havaya!</textarea>
  18. <input type=”button” value=”Test” onclick=”oku()”>
  19. <input type=”button” value=”Metin Ekle” onclick=”yaz()”>
  20. </form>
  21. </body>
  22. </html>

Yukarıdaki kodun çıktısı aşağıdaki gibi olur.

Test butonuna tıkladığımızda metin alanındaki mesajı ekranda mesaj kutusunda gösterir. Metin ekle butonuna tıklanıldığında ise yaz() fonksiyonu çalışarak metin kutusuna yaz fonksiyonunun içindeki değerler yazdırılır.


Related posts
Categories: Javascript Tags: , ,

JavaScript ile HTML İşleme – 1

Pazartesi, 16 Mar 2009 Soner Gönül View Comments

Şu aralar PHP ile birlikte öğrenmeye çalıştığım teknolojilerden biri Javascript. Javascript, bir kullanıcının web taracıyılarında çalışan bir script dili. HTML kodları içerisine gömülebildiği için de çok hızlı çalışır. Ve JavaScript kodlarının çalıştırılabilmesi için sadece bir web tarayıcısına ihtiyaç duyarız.

JavaScript kişi ile etkileşimi olay yönelimli programlama ile olur. Peki nedir bu olaylar bir kaç örnek verelim;

  • Bir Butona tıklamak
  • Bir Formu göndermek
  • HTML gövdesinin yüklenmesi
  • Bir Metin Kutusundaki değeri değiştirmek

Bu tür olaylar gerçekleştirildiğinde kod veya fonksiyonlar tetiklenir. Nasıl çalıştığından bahsettikten sonra biraz da kodlamaya geçelim ;) 

<html>
<head>
<title> İlk Javascript Programımız</title>
</head>
<body>
<script type="text/javascript">
alert("Hello JavaScrit!!");
</script>
</body>
</html>

Yukarıdaki kodu çalıştırdığımızda karşımızdaki browser’da “Hello JavaScript” mesajı alırız.

Bunun dışında dışarıdan bir JavaScript dosyası çağırarakta HTML içinde bu kodları çağırabiliriz. Örneğin yukarıdaki kod parçasında <script> </script> tagları arasındaki kodları deneme.js dosyasına yazıp daha sonra da html dosyası içerisinde;

<script type="text/javascript" src="deneme.js">

şeklinde yazıp kullanabiliriz.

HTML formlarını işlerken ise herhangi bir forma bağlı nesneye ulaşmak için document.formadı.nesneadı şeklinde bir erişim söz konusudur.

  • Metin Kutularını İşleme

Metin kutularında en önemli özellik value’dir. Bu özellikle metin kutusunun değerleri alınır ya da değiştirilir. Burada fonksiyon çağırırken en fazla kullandığımız olaylar ise onkeypress ve onchange‘dir. Onkeypress olayı metin kutusu içinde herhangi bir tuşa basıldığında, onchange olayı ise metin kutusundaki değer her değiştiğinde meydana gelir. 

<html>
<head>
<script type="text/javascript">
function sondeger (txt)
{
alert("Metin kutusundaki son değer" + txt);
}
</script>
</head>
<body>
<form name="form1">
Adi <input type="text" name="adi" value="" 
onchange="sondeger(this.value)">
Soyadi <input type="text" name="soyadi" value="" 
onkeypress="sondeger(this.value)">
</form>
</body>
</html>

Burada adi metin kutusundan çıktığımız anda son değeri mesaj ile bize verir. Fakat soyadi değişkenimizde olan her değişiklik bir mesaj kutus ile gösterilir.

Bu olaylar dışında onfocus ve onblur olayları vardır. Onfocus metin kutusu aktif olduğunda, onblur ise metin kutusundan çıkıldığında meydana gelir.

<html>
<head>
</head>
<body>
<form name="form1">
Adi <input type="text" name="adi" value=""
 onfocus="alert('Metin Kutusu Aktif');">
Soyadi <input type="text" name="soyadi" value=""
 onblur="alert('Metin Kutusu Pasif');">
</form>
</body>
</html>

Burada da metin kutusu içerisine yazı yazarken “metin kutusu aktif”, metin kutusu dışarıdayken ise “metin kutusu pasif” mesajı yazdırılır.

Şimdilik bu kadar. 2. yazıda butonların nasıl işlenildiğine değineceğim.

Esenlikler dilerim :)

Related posts
Categories: Javascript Tags: , , ,

PHP’de HTML Form İşleme – 1

Pazartesi, 17 Kas 2008 Soner Gönül View Comments

Merhabalar..PHP’de HTML Formları kullanıcı ile etkileşimli işlemlerin gerçekleştirdiği yapılardır. Normalden biraz uzun bir konu. Bu yüzden bu konuyu 3 yazıda anlatacağım.

  • HTML Form Etiketi

Bir HTML sayfasının form nesnesi <form> ve </form> etiketleri arasında yer almalıdır. Form etiketinin ise name, action, ve method olmak üzere 3 temel özelliği vardır. Bunlardan name forma isim vermede, action formu işleyecek program parçasının adresini belirtmede ve method formdaki verilerin işlenme şeklini belirlemede kullanılır.

  • Post ve Get

Bir formun işlenme yöntemi POST ve GET olmak üzere 2 çeşittir. GET metodunda gönderilen veriler adres satırında görülür, POST metodunda görülmez. Örneğin GET metoduyla isim ve soyisim girdiğimiz bir php dosyasının adres satırı;

  1. http://localhost/deneme.php?adi=soner&soyadi=gonul

olarak görülecektir. Bu yüzden şifre girişleri gibi web tarayıcısının adres çubuğunun gözükmesini istemediğiniz işlemlerde genellikle POST metodu tercih edilir.

  1. <html>
  2. <body>
  3. <form name=”form1″ action=”deneme.php” method=”GET”>
  4. <pre>
  5. Adı         :<input type=”text” name=”adi” value=”"><br>
  6. Soyadı    :<input type=”text” name=”soyadi” value=”"><br>
  7. <input type=”submit” value=”Gönder”>
  8. </pre>
  9. </form>
  10. </body>
  11. </html>

Yukarıdaki kodu çalıştırırsanız aşağıdaki gibi bir sonuç alırsınız. Ben kendi bloğum üzerinden çalıştırıyorum.

Ad ve soyad kısmına soner ve gonul girersek;

sonucunu alırız.

Kodu biraz değiştirelim.

  1. <html>
  2. <body>
  3. <from name=”form1″ action=”deneme.php” action=”GET”>
  4. <pre>
  5. Adı      :<input type=”text” name=”adi” value=”"<br>
  6. Soyadı :<input type=”text” name=”soyadi” value=”"<br>
  7. <input type=”submit” value=”Gönder”>
  8. </pre>
  9. <?php
  10. if( isset($_GET['adi']) && isset($_GET['soyadi']) )
  11. {
  12. echo “Adınız : “.$_GET['adi'].”<br>”;
  13. echo “Soyadınız : “.$_GET['soyadi'].”<br>”;
  14. }
  15. ?>
  16. </body>
  17. </html>

Bu örnekte HTML formu kendisine gönderilmiştir. Programın 11. satırındaki isset fonksiyonuyla eğer hem adi hem de soyadi kısmı doldurulmuş ise submit butonuna tıklanıldığında (Gönder) 11. satırdaki şart sağlanacak ve if yapısının içerisi çalıştırılacaktır. Çıktı şu şekilde olur;

Eğer yukarıdaki kodu POST metoduyla yapsaydık fark eden tek şey adres çubuğunda hiçbir değişkenin görülmemesi olacaktı.

  • Form Metin Kutusu Nesnesi

İki çeşittir. HTML de tanımlanırken <input> etiketi kullanılır. Bu etiketin name, size, type, value, maxlength olmak üzere 5 temel özelliği vardır.

Name; metin kutusuna verilen ismi ifade eder.

Size; metin kutusunun genişliğini belirlemede kullanılır.

Type; text ya da password olmak üzere 2 değer alır. Text olduğunda yazı, password olduğunda yıldız ya da nokta görünür.

Value; metin kutusuna başlangıç değeri vermeye yarar.

Maxlength; yapılan girişlerde karakter sayısını sınırlamada kullanılır.

  1. <html>
  2. <body>
  3. <form name=”form1″ action=”deneme.php” method=”POST”>
  4. <pre>
  5. Kullanıcı: <input type=”text” name=”kullaniciadi” value=”" maxlength=”12″><br>
  6. Şifresi    : <input type=”password” name=”sifre” value=”" maxlength=”15″><br>
  7. <input type=”submit” value=”Gönder”>
  8. </pre>
  9. </form>
  10. </body>
  11. </html>

Kullanıcı adının max 12 ve şifrenin max uzunluğu 15 olan sayfanın çıktı şu şekilde olur.

Biz bu girişlerde kullanıcı adının ya da şifrenin boş olduğunu veya kullanıcı adının sonunda boşluklar olup olmadığını kontrol etmedik. Şimdi bunları ele alalım. Kullanıcı adının ya da şifrenin boş girilmemesini önlemek için empty() fonksiyonunu kullanırız. Eğer kullanıcı adının ya da şifrenin başında veya sonunda boşluk olup olmadığını da trim() fonksiyonuyla kontrol edebiliriz. Önce trim fonksiyonuyla değişkenlerin sağında ya da solundaki boşluklar temizlenmeli sonra empty fonksiyonu ile boşluk kontrolü yapılmalıdıri.

  1. <?php
  2. if ( isset ( $_POST[' kullaniciadi '] ) && isset ( $_POST[' sifre '] )
  3. {
  4. $kulAd = trim ( $_POST[' kullaniciadi '] );
  5. $sifre = trim ( $_POST[' sifre '] );
  7. if ( !empty($kulAd) && !empty($sifre) )
  8. {
  9. echo “Kullanıcı adı = $kulAd <br>”;
  10. echo “Şifre = $sifre”;
  11. }
  12. else
  13. echo “Kullanıcı adı veya şifre boş bırakılamaz!”;
  14. }
  15. ?>

Bu tarz giriş ekranlarında karşılaşılan diğer bir durum ise SQL Injection olarak adlandırılan teknikle, sisteme yapılan şifresiz girişlerdir. Bu teknikle, kullanıcı adı ve şifresi içinde tek tırnak ve boşluk gibi özel karakterler kullanılıp SQL sorgusunun bütün kayıtları getirmesi sağlanır. Bunun için karakterleri temizlemede str_replace() fonksiyonundan faydalanabilir.Örneğin;

  1. <?php
  2. if ( isset ( $_POST[' kullaniciadi '] ) &&  isset ( $_POST[' sifre '] ) )
  3. {
  4. $kulAd = trim ( $_POST[' kullaniciadi '] );
  5. $sifre = trim ( $_POST[' sifre '] );
  6. $silkarakter = array (“‘”, ” “);
  7. $kulAd = str_replace ( $silkarakter, ” “,  $kulAd  );
  8. $sifre = str_replace ( $silkarakter, ” “,  $sifre  );
  9. if ( !empty( $kulAd ) && !empty( $sifre ) )
  10. {
  11. echo “Kullanıcı adı = $kulAd <br>”;
  12. echo “Şifre = $sifre”;
  13. }
  14. else
  15. echo “Kullanıcı adı veya şifre boş bırakılamaz!”;
  16. }
  17. ?>

6. satırda silinecek tek tırnak ve boşluk karakterlerini $silkarakter dizisine aldık. str_replace() ile bu dizideki tüm karakterler kullanıcı adı ve şifreden silinmiştir.

Görüşmek üzere..

Related posts
Categories: PHP Tags: , , , , , , , ,