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

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


author

Aykut ErdoÄŸan

ajax, php, jquery, function

  • Bu Yazılara da Gözat:

    9 Yorum

    author
    author
    author
    author
    author
    author
    author
    author
    author

    Cevapla