Php ve Ajax ile Sayfa Yenilenmeden Veritabanına Kayıt Yapma

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>&nbsp;</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>&nbsp;</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>&nbsp;</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ı

{

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

}

}

}) }}

Ö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.

$mysql_host="localhost"; //bağlantı kodları

$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";

}

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...