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.