Forum
Aktif konular
Üyeler
Kurallar
Arama
Tahribat.com Forumları 
Html - CSS - XML - JavaScript - Ajax 
PHP Ve Jquery İle AJAX Tabanlı İletişim Formu PHP Ve Jquery İle AJAX Tabanlı İletişim Formu
-
Bir formun aynı sayfada nasıl yollanacağını ve gönderi sonucunun bir kaç şık efektle nasıl gösterileceğini mi merak ediyorsunuz? Bu anlatımda bu işlemleri jQuery kullanarak nasıl yapabileceğiniz anlatılacak. Üstelik kullanıcının javascript desteği açık olmasa bile, form gönderim yapabilecek.
AJAX teknolojisinin güzelliklerinin nasıl olsa biliyorsunuz. O halde formumuzu nasıl kodlayacağımıza geçelim.
Oluşturacağımız form, kullanıcı gönderilerini kabul edecek, gönderileri işleyecek ve verileri process.php adlı bir dosyaya gönderecek. PHP betiği ise alıcıya bir uyarı postası gönderecek. Formu kullanacak olan kullanıcının javascript desteğinin kapalı olması ihtimali de göz önüne alınarak, form klasik yolla da işlenebilecek.
1.HTML
Bu bölümde iletişim formumuzun görünür kısmını oluşturuyoruz.<div class="block">
<div class="done">
<b>Teşekkür ederiz !</b> Mesajınız tarafımızdan alınmıştır.
</div>
<div class="form">
<form method="post" action="process.php">
<div class="element">
<label>Adınız</label>
<input type="text" name="name" class="text" />
</div>
<div class="element">
<label>E-Posta</label>
<input type="text" name="email" class="text" />
</div>
<div class="element">
<label>Websiteniz</label>
<input type="text" name="website" class="text" />
</div>
<div class="element">
<label>Mesajınız</label>
<textarea name="comment" class="text textarea" /></textarea>
</div>
<div class="element"><input type="submit" id="submit"/>
<div class="loading"></div>
</div>
</form>
</div>
</div>
<div class="clear"></div>2.CSS
Formumuzu 2 kolonlu olarak oluşturmak için CSS’ten faydalanıyoruz.body{text-align:center;}
.clear {clear:both}
.block {
width:400px;
margin:0 auto;
text-align:left;
}
.element * {
padding:5px;
margin:2px;
font-family:arial;
font-size:12px;
}
.element label {
float:left;
width:75px;
font-weight:700
}
.element input.text {
float:left;
width:270px;
padding-left:20px;
}
.element .textarea {
height:120px;
width:270px;
padding-left:20px;
}
.element .hightlight {
border:2px solid #9F1319;
background:url(iconCaution.gif) no-repeat 2px
}
.element #submit {
float:right;
margin-right:10px;
}
.loading {
float:right;
background:url(ajax-loader.gif) no-repeat 1px;
height:28px;
width:28px;
display:none;
}
.done {
background:url(iconIdea.gif) no-repeat 2px;
padding-left:20px;
font-family:arial;
font-size:12px;
width:70%;
margin:20px auto;display:none
}3.JAVASCRIPT
En sonunda işin sihirli kısmı olan Javascript kodumuz. Kodun hangi kısmının ne işe yaradığını göstermek için kodlara yorum satırları eklenmiştir.
Bu bölümümzde Javascript kullanarak e-posta, isim ve uzunluk onayları gibi işlemlerimizi yapıyoruz.
Kodun yaptıklarını kısaca açıklayacak olursak:- Kullanıcı girdilerini alır
- Girdileri kontrol eder, hata varsa ekrana bastırır ve işlemi durdurur
- Hiçbir hata yoksa, giriş kısımları pasifleştirilir ve veri jQuery’nin AJAX metoduyla yollanır
- jQuery veriyi process.php adlı dosyamıza GET metoduyla yollar
- process.php 1 ve 0 olmak üzere 2 sonuç döndürür. Sonuç 1 ise posta başarıyla gönderilmiş, 0 ise gönderilememiş demektir
- Başarılı olunması durumunda form gizlenilir ve bir uyarı mesajı ekrana yazdırılır
$(document).ready(function() {
//gönder butonu tıklanmışsa
$('#submit').click(function () {
//Tüm alanlardan verileri al
var name = $('input[name=name]');
var email = $('input[name=email]');
var website = $('input[name=website]');
var comment = $('textarea[name=comment]');
//Kullanıcının birşeyler girip girmediği kontrol ediliyor
//Hata bulunursa girdi alanına uyarı verdir
if (name.val()=='') {
name.addClass('hightlight');
return false;
} else name.removeClass('hightlight');
if (email.val()=='') {
email.addClass('hightlight');
return false;
} else email.removeClass('hightlight');
if (comment.val()=='') {
comment.addClass('hightlight');
return false;
} else comment.removeClass('hightlight');
//veriyi düzgünce organize et
var data = 'name=' + name.val() + '&email=' + email.val() + '&website='
+ website.val() + '&comment=' + encodeURIComponent(comment.val());
//tüm girdi alanlarını pasifleştir
$('.text').attr('disabled','true');
//yükleniyor işaretini göster
$('.loading').show();
//ajax işlemini başlat
$.ajax({
//veriyi işleyen ve postayı gönderecek olan php dosyası
url: "process.php",
//GET metodu kullanılıyor
type: "GET",
//veriyi yolla
data: data,
//sayfayı önbelleğe alma
cache: false,
//işlem başarılı
success: function (html) {
//eğer process.php 1/true değerini döndürmüşse (mail gönderimi başarılı)
if (html==1) {
//formu gizle
$('.form').fadeOut('slow');
//başarılı mesajını göster
$('.done').fadeIn('slow');
//eğer process.php 0/false değerini döndürmüşse (posta gönderiminde hata)
} else alert('Üzgünüz, beklenmeyen bir hata oluştu. Lütfen daha sonra tekrar deneyiniz.');
}
});
//gönder butonunu iptal et
return false;
});
});4.PHP
Bu PHP dosyamız farklı türdeki gönderileri işleyebilir (POST ve GET).
Eğer kullanıcı formu jQuery aracılığı ile göndermişse process.php
verileri GET metodunu kullanarak alacaktır. Eğer kullanıcının javascript deteği kapalıysa, veriler POST metoduyla alınacaktır.<?php
//Form verilerini al.
//GET - kullanıcı veriyi AJAX kullanarak gönderdi
//POST - kullanıcının javascript deteğinin olmadığınıda göz önüne alarak POST metodunu da kullanıyoruz
$name = ($_GET['name']) ? $_GET['name'] : $_POST['name'];
$email = ($_GET['email']) ?$_GET['email'] : $_POST['email'];
$website = ($_GET['website']) ?$_GET['website'] : $_POST['website'];
$comment = ($_GET['comment']) ?$_GET['comment'] : $_POST['comment'];
//hangi metodun kullanıldığına dair belirteç. Eğer POST kullanılmış ise değeri 1 yap
if ($_POST) $post=1;
//Sunucu taraflı veri kontrolü
//E-Posta adresi kontrolü
if (!$name) $errors[count($errors)] = 'Lutfen adinizi giriniz.';
if (!$email) $errors[count($errors)] = 'Lutfen e-posta adresinizi giriniz.';
if (!$comment) $errors[count($errors)] = 'Lutfen mesajinizi giriniz.';
//eğer hata dizisi boş ise postayı gönder
if (!$errors) {
//alıcı - bu bölümü kendi adınız ve posta adresiniz ile değiştirin
$to = 'Your Name <your@email.com>';
//Gönderen
$from = $name . ' <' . $email . '>';
//Başlık ve mesaj
$subject = $name . ' adlı kullanıcıdan bir mesaj var';
$message = '
<!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></head>
<body>
<table>
<tr><td>Ad</td><td>' . $name . '</td></tr>
<tr><td>E-Posta</td><td>' . $email . '</td></tr>
<tr><td>Websitesi</td><td>' . $website . '</td></tr>
<tr><td>Mesaj</td><td>' . nl2br($comment) . '</td></tr>
</table>
</body>
</html>';
//postayı gönder
$result = sendmail($to, $subject, $message, $from);
//POST metodu kullanılmışsa, mesajı göster
if ($_POST) {
if ($result) echo 'Teşekkür ederiz! Mesajınız tarafımızdan alınmıştır.';
else echo 'Üzgünüz, beklenmeyen bir hata oluştu. Lütfen daha sonra tekrar deneyiniz.';
//GET metodu kullanılmışsa, gerekli değeri döndür
//1 başarılı, 0 ise başarısız anlamına gelir
} else {
echo $result;
}
//Hata dizisi boş değil ise
} else {
//hata mesajlarını göster
for ($i=0; $i<count($errors); $i++) echo $errors[$i] . '<br/>';
echo '<a href="form.php">Geri dön</a>';
exit;
}
//HTML başlıklarıyla basit bir mail fonksiyonu
function sendmail($to, $subject, $message, $from) {
$headers = "MIME-Version: 1.0" . "\r\n";
$headers .= "Content-type:text/html;charset=iso-8859-1" . "\r\n";
$headers .= 'From: ' . $from . "\r\n";
$result = mail($to,$subject,$message,$headers);
if ($result) return 1;
else return 0;
}
?>Kodları indirmek için buraya, makalenin aslını okumak için şuraya tıklayabilirsiniz.
-
örnek:
http://www.queness.com/resources/html/ajaxform/jquery-ajaxform.php
-
eline saglık yararlı paylasım.
-
Teşekkürler.Göze hoş gözüküyor.
-
Teşekkürler. Asp olanını da bir ara ben yayınlarım :).
Kısayol
Şikayet
Özel Mesaj
Alıntı yap
Toplam Hit: 2835 Toplam Mesaj: 5
Cevapla