Bu makalemde, artık her websitesinde olması gereken AJAX mail formunu PHP ile tasarlacağız. AJAX teknolojisi, kullanıcı-sunucu arasındaki veri iletişimini, sayfa yenilenmeden yapabilen teknolojidir. Küçük bir örnek verecek olursak, bir iletişim formunun sadece PHP ile kontrol edildiğini farzelim. Kullanıcı mesajını göndermek istediğinde, bilgiler sunucuya gönderilir ve PHP tarafından kontrol edilir. Eğer bir hata yapıldıysa, hatanın kaynağı PHP tarafından kullanıcıya gösterilir ve formun olduğu sayfa yenilenir. Fakat sayfanın yenilenmesiyle kullanıcının girdiği diğer bilgiler kaybolur. Yani kullanıcının en ufak hatasında daha önceden girdiği bütün bilgileri yeniden girmek zorunda kalır. İşte AJAX teknolojisi, bu olumsuzluğu ortadan kaldıran teknolojidir. Eğer kullanıcı bir hata yaptıysa, sayfa yenilenmeden anında bu hata kullanıcıya gösterilir. Kullanıcının girdiği diğer bilgiler de silinmez. Kullanıcı hata yapmadıysa, işlemin sonucu yine sayfa yenilenmesine gerek kalmadan anında kullanıcıya gösterilir.

AJAX hakkında daha fazla bilgi için JSON-Bölüm2 isimli makalemi okuyabilirsiniz.

Tasarımımız 6 aşamadan oluşacak

HTML ile iletişim formu oluşturma.

CSS ile oluşturulan formu düzenleme.

JQuery ile kullanıcının bilgilerini kontrol edecek bir fonksiyon oluşturma.

AJAX ile iletişim formuna yazılan bilgileri sunucuya (PHP'ye) iletme.

PHP ile gelen bilgileri mail formatına dönüştürme ve maili gönderme.

HTML ile Form Yapısını Oluşturmak

<div id="mail-gonder">
	<div id="sonuc"></div>
	<div class="baslik">İsminiz <span id="isim-uyari"></span></div>
	<input type="text" name="isim" id="isim" class="mail-grup" />
	<div class="baslik">E-Posta <span id="eposta-uyari"></span></div>
	<input type="text" name="eposta" id="eposta" class="mail-grup" />
	<div class="baslik">Mesajıniız <span id="mesaj-uyari"></span></div>
	<textarea name="mesaj" id="mesaj" cols="30" rows="10" class="mail-grup"></textarea>
	<button id="gonder-button" class="mail-grup">Gönder</button>
</div>

HTML yapımız ile aşağıdaki form yapısını elde ettik.

CSS ile Form Görünümünü Düzenlemek

*{
	margin:0;
	padding: 0;
	box-sizing: border-box;
}
	
#mail-gonder{
	padding: 15px;
	border:1px solid #ccc;
}

.baslik, .mail-grup{
	display: block;
	width: 100%;
	margin-bottom: 5px;
	font-family:Arial;
	font-size: 15px;
}

.baslik>span{
	color:red;
	font-size: 14px;
}

.mail-grup{padding: 10px;}
#mesaj{resize: none;}
		
.mail-grup{
	border:1px solid #ccc;
	 outline: none;
}

CSS düzenlemesi ile görünüm aşağıdaki gibi oldu.

JQuery ile Kullanıcının Girdiği Bilgileri Kontrol Etmek

function kontrol(){

	$(".mail-grup").css("border","1px solid #ccc");
	$(".baslik>span").text("");

	var kontrol = true;

	if (!$("#isim").val()){
		$("#isim-uyari").text("Lütfen isim yazınız");
		$("#isim").css("border","1px solid red");
		kontrol = false;
	}

	if (($("#isim").val()) && ($("#isim").val().length <=2)){
		$("#isim-uyari").text("İsim çok kısa");
		$("#isim").css("border","1px solid red");
		kontrol = false;
	}

	if (!$("#eposta").val()){
		$("#eposta-uyari").text("Mail adresi yazınız");
		$("#eposta").css("border","1px solid red");
		kontrol = false;
	}

	if (!$("#eposta").val().match(/^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/)){
		$("#eposta-uyari").text("Hatalı mail adresi");
		$("#eposta").css("border","1px solid red");
		kontrol = false;
	}

	if (!$("#mesaj").val()){
		$("#mesaj-uyari").text("Mesaj yazınız");
		$("#mesaj").css("border","1px solid red");
		kontrol = false;
	}

	if (kontrol==true){
		$(".baslik>span").text("");
		$(".mail-grup").css("border","1px solid green");
		$.ajax({
			url:"iletisim.php",
			data:'isim='+$("#isim").val()+'email='+$("#eposta").val()+'&mesaj='+$("#mesaj").val(),
			type:"POST",
			success:function(data){
				$(".baslik>span").text("");
				$("#sonuc").html(data);
				$("#sonuc").slideDown(300);
				$(".mail-grup").val("");
			},
			error:function(data){
				$("#sonuc").html(data);
				$("#sonuc").slideDown(300);
			}
		});
	}
}

Oluşturduğumuz fonksiyon ile kullanıcının girdiği bilgiler kontrol ediliyor. Boş alanlar varsa, isim 3 harften kısa veya e-posta formatı hatalı ise AJAX fonksiyonu çalıştırılmadan bu hatalar kullanıcıya gösteriliyor. Eğer kullanıcı bütün bilgileri istenildiği gibi girdiyse fonksiyonun içinde yer alan AJAX metodu çalışıyor. Kullanıcının girdiği bilgiler AJAX metodunda PHP'ye uygun hale getirilerek, sunucudaki iletisim.php isimli dosyaya gönderiliyor. Bu arada oluşturduğumuz fonksiyon, formda bulunan butona tıklayınca çalışacak, o yüzden JQuery kısmına şöyle bir kodu da eklememiz gerekiyor :

$("#gonder-button").on("click",function(){
	kontrol();
});

PHP ile Gelen Bilgileri Mail Olarak Göndermek

<?php

$gidecek_mail = "mailadresiniz";
$konu = "Mailin Konusu";
$isim = htmlspecialchars($_POST["isim"]) ;
$email = htmlspecialchars($_POST["email"]) ;
$mesaj = htmlspecialchars($_POST["mesaj"]) ;
$mesaj_govdesi = "

isim: $isim
e-mail: $email
Mesaj:
$mesaj

";

if(mail($gidecek_mail, $konu, $mesaj_govdesi)) {
	echo "Mesajınız Gönderildi.";
} 
else {
	echo "Hata oluştu, lütfen tekrar deneyiniz.";
}

?>

Böylece AJAX ile sunucuya gönderilen bilgiler PHP tarafından alınarak, düzenlenecek ve mail gönderilecek.

Sonucun Kontrolleri

Dikkat ettiyseniz PHP kısmında bir şart koşulumuz var. Eğer mail gönderme işleminde bir sorun oluşmadıysa PHP, AJAX'a "Mesajınız Gönderildi.", eğer bir hata oluştuysa yani mail gönderilmediyse "Hata oluştu, lütfen tekrar deneyiniz." diye bir uyarı gönderecek. Gönderilen uyarılar AJAX'deki "success" fonksiyonunda yazdığımız kod ile daha önceden HTML'de tanımladığımız "sonuc" isimli elemana eklenecek. Böylece kullanıcı mail gönderme işleminin sonucunu görebilecek.

Bu aşamada şunu belirtmekte fayda var : AJAX'deki "success" fonksiyonu, AJAX - Sunucu arasındaki iletişim başarılıysa, "error" fonksiyonu ise bu iletişimde bir sorun oluştuysa çalışır. Eğer PHP ile mail gönderilmemişse, PHP, AJAX'e "Hata oluştu, lütfen tekrar deneyiniz." bilgisini gönderir. Bu iletişim başarılı olduğu için AJAX'deki "success" fonksiyonu çalışır. Yani mail gönderilmemişse "error", gönderilmişse "success" fonksiyonu çalışacak düşüncesi hatalı olur. Kodlamamızı bunu göz önünde tutarak yapmamız gerekiyor.

Tasarımımızın HTML, CSS ve JQuery kısmını aşağıdan kontrol edebilirsiniz. Mail gönderme için gerekli olan PHP dosyasını demoya ekleyemiyorum. Bu dosyayı kaynak dosyaları indirirdikten sonra düzenleyip sunucunuza atmanız gerekmektedir.

Tasarladığımız uygulamanın demosuna buradan ulaşabilirsiniz.

Tasarladığımız uygulamanın kaynak dosyalarına buradan ulaşabilirsiniz.