Blog
Anasayfa Javascript Php ve Ajax ile Sayf...
Php ve Ajax ile Sayfa Yenilenmeden Veritabanına Kayıt Yapma
Aykut Erdoğan Tarafından Yazıldı!
15353 Okunma
Javascript
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...
yaklaşık 5 yıl önce
ajax, php, jquery, function
Yorumlar
6 Yorum
 
Engin Cengiz Yazdı!
yaklaşık 5 yıl önce
Gayet açıklayıcı bir makale. Teşekkürler.
 
erdem Yazdı!
yaklaşık 4 yıl önce
css kodlarını madem hazır niye paylaşmıyorsun kardeş.
 
Aykut Erdoğan Yazdı!
yaklaşık 4 yıl önce
Çü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 Yazdı!
yaklaşık 2 yıl önce
css kodlarıda olsa çok güzel olurdu. eline sağluk
 
Mesut Ersoy Yazdı!
yaklaşık 2 yıl önce
Hocam teşekkürler
 
Zekeriya Yavuz Yazdı!
yaklaşık 1 yıl önce
Tesekkurler gayet başarılı bir makale olmuş.
 
Yorum Yap
Makalelerden Haberdar Ol
Sponsorlu Bağlantılar
Çok Okunanlar
Jquery ile Veritabanında...
 31892 Okunma
Php ve Ajax ile Sayfa Yen...
 15353 Okunma
Pdo ile Mysql'den Ve...
 10802 Okunma
Php ve Xml ile Dinamik Si...
 10445 Okunma
Javascript ile Saat Yapı...
 9879 Okunma
Son Yorumlar
oguz
teşekkürler dostum.
Mehmet A
Merhaba, Sözlüğer a...
Metin Ersal
Teşekkürler...
Ümit Akdeniz
Çok teşşekür ede...
Ahmet K.
Sözlüğün &cced...
TAKİPTE KALIN!
Mesaj Gönder
Tasarım - Kodlama : Aykut Erdoğan
 
Makale Önizleme
Jquery ile Veritabanından Sayfa Yenilenmeden Veri...
Merhaba arkadaşlar. Bu makalemizde veritabanından sayfamıza çektiğimiz kayıtları yeni kayıt eklendiğinde, silindiğinde ve güncellendiğinde sayfa yenilenmeden otomatik olarak web sayfamızda göstereceğiz. Örnek olarak Facebook ve Twitter'ı verebiliriz. Bu işlemi php ve jquery yardımı ile yapacağız. Şimdi kodlarımıza geçelim. index.php<!DOCTY...
yaklaşık 4 yıl önce | Javascript
Devamı
Makale Önizleme
Php ve Ajax ile Sayfa Yenilenmeden Veritabanına K...
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...
yaklaşık 5 yıl önce | Javascript
Devamı
Makale Önizleme
Pdo ile Mysql'den Veri Çekme ve Listel...
Merhaba arkadaşlar. Bu makalemizde pdo ile mysql veritabanımızdan veri çekip listeleyeceğiz. Tekli veri çekmeyi ve çoklu veri çekmeyi anlatacağım. Öncelikle bağlantı kodlarımızı yazacağız. baglanti.phptry{ $db = new PDO('mysql:host=localhost;dbname=pdokayit','root','root'); $db->exec('SET CHARACTER SET utf8...
yaklaşık 4 yıl önce | Php
Devamı
Makale Önizleme
Php ve Xml ile Dinamik Site Haritası Oluşturma
Merhaba arkadaşlar. Bu makalemizde sitemizin sayfalarını arama motorlarına sunan sitemap sayfamızı yapacağız. Alışılmışın aksine bu sayfamızı dinamik olarak yani içerik girildikçe kendi kendini güncelleyecek şekilde yapacağız. Öncelikle mantığını anlatayım. Sadece xml ile bunu yapmamız mümkün olmadığından php'den yardım alacağız...
yaklaşık 6 yıl önce | Php
Devamı
Makale Önizleme
Javascript ile Saat Yapımı
Merhaba arkadaşlar. Bu makalemizde javascript yardımıyla saat yapacağız. Mantığını anlatalım öncelikle. O anki saati, dakikayı ve saniyeyi javascript yardımı ile alıyoruz ve bir nesneye atıyoruz. Bu kadar basit. Şimdi kodlarımıza geçelim. <html> <head> <title>Saat</title> <style type="text/css"> #div { f...
yaklaşık 5 yıl önce | Javascript
Devamı
Makale Önizleme
Php E-Posta Filtreleme Fonksiyonu
Merhaba arkadaşlar. Bu yazımda sizlere bir e-posta adresinin geçerli bir mail adresi olup olmadığının kontrolünü nasıl yapacağımızı anlatacağım.Bunun için kendimiz bir fonksiyon yazmayacağız, Php'de var olan bir fonksiyonu kullanacağız. Php 5.2 ve sonraki sürümlerinde geçerli olan filter_var() fonksiyonu ile kontrolümüzü...
yaklaşık 4 yıl önce | 1 Yorum
Devamı
Makale Önizleme
Php Sözlük Uygulaması
Merhaba arkadaşlar. Bu dersimizde tr-ing | ing-tr sözlük yapacağız. Öncelikle mantığını anlatmak istiyorum. Forma girilen kelimeyi ve radio butonlar vasıtasıyla seçilen dili cevir.php sayfamıza gönderiyoruz. Burada öncelikle bağlantı kodlarımızı yazıyoruz ardından POST ile aldığımız değerler ile veritabanında sorgulama yapıyoruz ve girilen ke...
yaklaşık 6 yıl önce | 45 Yorum
Devamı
Makale Önizleme
Css Resim Efektleri
Merhaba arkadaşlar. Bu makalemizde css filtre efektlerinden bahsedeceğim. Aynı zamanda örneklerle göstereceğim. Filtre efektleri photoshop ve benzeri programlarla yapabildiğimiz efektleri bir kaç satır kod ile yapabilmemizi sağlıyor. Üstteki görselde görüldüğü üzere toplamda 9 adet efektimiz bulunmaktadır. Aşağıda yapacağımız &oum...
yaklaşık 2 yıl önce | 1 Yorum
Devamı
Makale Önizleme
Jquery ile Veritabanından Sayfa Yenilenmeden Veri...
Merhaba arkadaşlar. Bu makalemizde veritabanından sayfamıza çektiğimiz kayıtları yeni kayıt eklendiğinde, silindiğinde ve güncellendiğinde sayfa yenilenmeden otomatik olarak web sayfamızda göstereceğiz. Örnek olarak Facebook ve Twitter'ı verebiliriz. Bu işlemi php ve jquery yardımı ile yapacağız. Şimdi kodlarımıza geçelim. index.php<!DOCTY...
yaklaşık 4 yıl önce | 13 Yorum
Devamı
Makale Önizleme
Php Sözlük Uygulaması
Merhaba arkadaşlar. Bu dersimizde tr-ing | ing-tr sözlük yapacağız. Öncelikle mantığını anlatmak istiyorum. Forma girilen kelimeyi ve radio butonlar vasıtasıyla seçilen dili cevir.php sayfamıza gönderiyoruz. Burada öncelikle bağlantı kodlarımızı yazıyoruz ardından POST ile aldığımız değerler ile veritabanında sorgulama yapıyoruz ve girilen ke...
yaklaşık 6 yıl önce | 45 Yorum
Devamı
KISIM SEÇ
 
8 Kategori
75 Makale
91 Yorum
 
 
7 Albüm
29 Tasarım
 
 
7 Proje
Bu Makaleyi Okudunuz mu?
 
  Jquery Nesne Gizleme Gösterme İşlemi