Merhabalar, bu makalemizde ajax ile veritabanına kayıt iÅŸlemini anlatacağım. Öncelikle html kodlarla baÅŸlayacağız. Sonrasında javascript ve php kodlarımıza geçeceÄŸiz. Åžimdi index.php sayfası html kodlarımıza geçelim.
<html>
<head>
<meta http-equiv="Content-Type" content="text/HTML; charset=utf-8" />
<title> Ajax Kayıt İşlemi
</title>
<link rel="stylesheet" href="stil.css" type="text/css" media="screen">
<script type="text/javascript" src="jquery-1.7.min.js"></script>
<script>
//birazdan yazacağımız javascript kodları buraya gelecek.
</script>
</head>
<body>
<form method="POST" id="form1" onsubmit="return false">
<table border="0" cellspacing="10" cellpadding="0" id="anatablo">
<tr><td align="center">Php - Ajax İle Veritabanına Kayıt İşlemi</td></tr>
<tr><td>
<table border="0" cellspacing="0" cellpadding="0"><tr><td align="right">
<input type="text" placeholder="Adınız" name="ad" id="yazi"></td><td align="left">
<input type="text" value=" Ad" id="yazibilgi" disabled></td>
</tr>
<tr><td></td><td> </td></tr>
<tr><td align="right">
<input type="text" placeholder="Soyadınız" name="soyad" id="yazi"></td><td align="left">
<input type="text" value=" Soyad" id="yazibilgi" disabled></td>
</tr>
<tr><td></td><td> </td></tr>
<tr><td align="right">
<input type="text" placeholder="Telefon" name="tel" maxlength="11" id="yazi"></td><td align="left">
<input type="text" value=" Tel-No" id="yazibilgi" disabled></td>
</tr>
<tr><td></td><td> </td></tr>
<tr>
<td align="center">
<div id="kayit">
Veritabanına Kaydedildi!
</div>
<div id="basarisiz">
Boş Alan Bıraktınız!
</div>
</td>
<td align="right">
<input type="submit" value="Kaydet" id="buton" onclick="kayit()">//butonumuz
</td>
</tr>
</table>
</td></tr>
</table>
</form>
</body>
</html>
Burada öncelikle html yapımızı oluÅŸturduk. Head etiketi arasına türkçe karakterleri düzgün görüntülemek için meta cümlemizi yazdık. Sonrasında tablomuzun ve formumuzun css kodlarının bulunduÄŸu css dosyasını sayfamıza çektik. Sonrasında jquery kütüphanesini sayfamıza çektik. Bu dosya birazdan geçeceÄŸimiz ajax ve gizleme-gösterme olaylarını yapmamızı saÄŸlayacak. Sonrasında formumuzu oluÅŸturduk.
Formumuzun onsubmit özelliÄŸine return false yazdık. Bu butona bastığımızda sayfanın yenilenmesini önleyecektir. Sonrasında tablo yapımızıda uygun ÅŸekilde oluÅŸturarak içine text alanlarımızı ve butonumuzu oluÅŸturduk. Yukarıda uygulamanın ön izlemesinde görünen yazı alanlarının yanında bulunan mavi alanı yapmak için input text kullandık. Sonlarında disabled> kodu bulunan input text'ler bahsi geçen alanlardır ve bu kod, alanı pasif hale getirmektedir. Görsellik css ile yapıldı ve yukarıda sayfamıza çekmiÅŸ olduÄŸumuz css dosyamızın içinde bulunmaktadır. Tablolarımızın ve form elemanlarımızın id deÄŸerlerine göre css kodlarımızı yazdık. Sonrasında butona bastıktan sonra karşımıza çıkacak bilgilendirme alanlarının kodlarını yazdık. Son olarak butonumuzu oluÅŸturduk ve onclick etiketi içine javascript ile oluÅŸturacağımız fonksiyonumuzun ismini yazdık. Butona basıldıktan sonra javascript kodlar devreye girecek ve verileri post metodu ile sayfa yenilenmeden kayıt yapacağımız sayfaya gönderecek. Åžimdi javascript kodlarımıza geçelim.
function kayit()//fonksiyon adıÖncelikle fonksiyonumuzu oluÅŸturduk. Sonrasında deÄŸerleri çekip içleri boÅŸ mu dolu mu kontrol ettik. İçleri boÅŸsa basarisiz adlı divimizi görünür yaptık(Div içeriÄŸi : BoÅŸ Alan Bıraktınız!). EÄŸer deÄŸiÅŸkenlerde deÄŸer varsa ajaxımızı oluÅŸturduk.Sonrasında gönderilen deÄŸerlerin tipini, deÄŸerlerin gönderileceÄŸi sayfayı, formumuzun ismini ve ajax iÅŸlemi sonuçlandıktan sonra yapılacak iÅŸlemleri yazdık. İşlemler tabiki bitmedi. Åžimdi kayit.php sayfamıza geçelim.
{
var ad = $("input[name=ad]").val();
var soyad = $("input[name=soyad]").val();
var tel = $("input[name=tel]").val();//formdan gönderilen deÄŸerleri çekip deÄŸiÅŸkenlere aktardık
if (ad=="" || soyad=="" || tel=="")//deÄŸiÅŸkenler boÅŸ mu kontrol ettik
{
$('#basarisiz').show(1);
$('#kayit').hide(1);
}else
{
$.ajax ({ //ajaxı oluşturduk
type: "POST",
url: "kayit.php",
data: $("#form1").serialize(),
success: function (sonuc) {
if (sonuc == "hata") {
alert ("veritabanına bağlanamadık");
}else {
$('#kayit').show(1);
$('#basarisiz').hide(1);
$("input[name=ad]").val("");
$("input[name=soyad]").val("");
$("input[name=tel]").val("");//input textlerin boşalttık
}
}
}) }}
$mysql_host="localhost"; //baÄŸlantı kodlarıBurada öncelikle veritabanı baÄŸlantı kodlarımızı yazdık. Sonrasında POST methoduyla gönderilen deÄŸerleri alıp deÄŸiÅŸkenlere aktardık ve veritabanına kaydımızı gerçekleÅŸtirdik. Css kodlarını istek olursa paylaÅŸabilirim. Uygulamamızın sonuna gelmiÅŸ bulunmaktayız. Sonraki makalelerde görüÅŸmek dileÄŸiyle...
$mysql_kullaniciadi="root";
$mysql_sifre="root";
$mysql_vtadi="ajax";
$baglan= @mysql_connect($mysql_host,$mysql_kullaniciadi,$mysql_sifre);
mysql_query("SET NAMES UTF8");
if(! $baglan) die ("mysql bağlantısında hata oluştu");
mysql_select_db($mysql_vtadi,$baglan) or die ("veritabanına bağlanırken hata oluştu");
//veritabanı bağlantı kodlarımız bitti
$ad = $_POST['ad'];
$soyad = $_POST['soyad'];
$tel = $_POST['tel'];
$kayit = mysql_query("insert into kayitlar (ad, soyad, tel) values ('$ad', '$soyad', '$tel')");
if ($kayit)
{
echo "";
} else
{
echo "hata";
}
9 Yorum
Engin Cengiz
Gayet açıklayıcı bir makale. TeÅŸekkürler.
erdem
css kodlarını madem hazır niye paylaşmıyorsun kardeş.
Aykut ErdoÄŸan
Çünkü burada önemli olan php ve javascript kodlarıdır. Css kodlarını yazmasanızda çalışır. Css kodları mail adresinizi gönderilmiÅŸtir.
baram özdemir
css kodlarıda olsa çok güzel olurdu. eline saÄŸluk
Mesut Ersoy
Hocam teÅŸekkürler
Zekeriya Yavuz
Tesekkurler gayet başarılı bir makale olmuş.
ramazan akbuz
çok te?ekkür ederim karde?im 20 tane link dola?t?m hiçbirini çal??t?ramad?m.Burda ad?m ad?m her?eyi çok güzel anlatmi?sin bi blogger olarak te?ekkür ediyorum. ramazanakbuz.com
merhaba
güzel bir paylaşım teÅŸekkürler
Gökyüzü
Tüm kodları mail oalrak gönderir misiniz ? TeÅŸekkürler.