Sitenizde bir köşeye mail adresinizi giriniz bölümü koyarak, takipçilerine yeni yaptığınız yenilikleri duyurmak istiyorsunuz. Bunun için AJAX ‘lı şık birşey güzel olur değil mi? Hem bu sayede sayfanız yenilenmemiş olur. Hemen çalışmamıza başlıyorum. AJAX gönderme işini JQuery kütüphanesini kullanarak yapacağım. İlk başta mail ekleme formunu hazırlıyoruz…Adım adım açıklıyorum. İlk başta AJAX ile gönderildiğinde değişmesi için “epostalistediv” id li bir div oluşturuyoruz. 


Daha sonra id ‘si ve name’si epostaliste olan bir form oluşturuyoruz. İçine name’si ve id’si email olan bir textbox ve bir tane button oluşturuyoruz.


Bunları ekledikten sonra form kısmımız bitti gibi. Şimdi gelelim javascript kısmımıza, bu eklediğimiz kodlarda iki tane olay var. 1. olay email textbox’unda olan tıklama ile çalışacak olan sifirla fonksiyonu, bu fonksiyon ile textbox’ta yazılı olan E-Posta adresini tıklayınca silmeyi yapıyoruz. Bu sayede kullanıcıya kolaylık sağlıyoruz :). 2. olay ise butumuzda bulunan yolla_eposta fonksiyonu, bu fonksiyon ile girilen eposta adresini ajax ile yollayacağız.
sifirla fonksiyonu :
function sifirla() {$(“#email”).val(“”);}
Bu fonksiyonun temel amacı email id’sine sahip olan inputun içindekini sıfırlamak. Bunuda JQuery’nin içinde olan .val işlevi ile yapıyoruzyolla_eposta fonksiyonu :
function yolla_eposta() {$.ajax({type: ‘POST’,url: ‘mail_ekle.php’,data: $(‘#epostaliste’).serialize(),beforeSend : function(yukleniyor) {$(‘#epostalistediv’).html(‘

‘);},success: function(ajaxCevap) {$(‘#epostalistediv’).html(ajaxCevap);}});}
JQuery’nin ajax fonksiyonunu kullanacağız, tek tek maddeleri açıklıyorum:* type : ‘POST’, methodun post olacağını belirtir. GET ‘te olabilirdi fakat POST’u tercih ettim.* url: ‘mail_ekle.php’, gönderilecek adresin mail_ekle.php olduğunu belirtir.* data: $(‘#epostaliste’).serialize(), veri olarak ne göndereceğimizi belirtir. Burda serialize fonksiyonu vardır ki tadından yenmez. Aslında burda direkt email’in içeriğini gönderebildim ama çok fazla textbox’un bulunduğu formlarda yazılması güçleşiyor bu yüzden direkt bu kodu yazarak bütün verilerin gelmesini sağlarsınız ;)* beforeSend : function(yukleniyor) { $(‘#epostalistediv’).html(‘

‘); }, beforesend ile küçük bir yükleniyor resmi koyabiliriz sayfamıza. Bu resimi Ajax fonksiyonu sonuçlarını getirdiğinde kaldıracağız. .html işlevi bir yere birşey yazmak için kullanıldığını anlamışsınızdır.* success: function(ajaxCevap) { $(‘#epostalistediv’).html(ajaxCevap); } ajax işlemi sonlandığında sonucun epostalistediv’de gösterilmesini sağlıyor.Bu açıklamalarda sonra mail listemizin html kısmı bitti :). Şimdi gelelim php kısmına…İlk başta bir veritabanımızın olması lazım. Veritabanımızda id,email,ip,tarih,saat kısımları olması lazım. SQL kodumuz aşağıda:CREATE TABLE IF NOT EXISTS `emaillist` (`id` int(10) unsigned NOT NULL AUTO_INCREMENT,`email` text,`ip` text,`tarih` text,`saat` text,PRIMARY KEY (`id`)) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ;
Gelelim, mail_ekle.php ‘yeMail adresiniz veritabanımızda zaten mevcut“;
}else {// Herhangi bir hata oluşmadığında veritabanına email adresi,ip,tarih,saat kaydediliyor.@mysql_query(“INSERT INTO emaillist (email,ip,tarih,saat) VALUES (‘”.$email.”‘,'”.$ip.”‘,'”.$tarih.”‘,'”.$saat.”‘)”);echo “Başarıyla eklendi“;
}}else {// EMail Adresi geçersiz olduğunda, gönderilen mesaj, yeni bir form’da içine koyarak tekrardan girilmesini sağlıyoruzecho “Hatalı Mail Adresi Girdiniz“;
echo ‘

‘;}?> Evet sonunda bitti…Demo adresi http://www.onurabi.com/epostalistesi/Kaynak Kodlar http://www.onurabi.com/dosyalar/epostalistesi.zipİyi Günler, İyi Çalışmalar