CodeIgniter ile jQuery ajax form doğrulama

Merhaba arkadaşlar öncelikler codeigniter framework'u keşfettiğiniz için sizlerde mutlusunuzdur.

Neyse fazla laf etmeden direk konuya giriyim.

Sayfa değişmeden aynı sayfada form verisi gönderim ajax ve json aracılığı ile yazdığımız input verisini göreceksiniz.

Örnek görüntü;

Canlı örnek görmek isterseniz makaleye yorum yazmayı deneyin anlarsınız.

İlk olarak controller'imizi yazıyoruz controller'imizin adı deneme.php olasun;

/**
 * Deneme class
 *
 * @package Contorller
 * @author Ali Çetin, M. Çağdaş Saygılı -> Dev10.net
 **/

class deneme extends Controller {

	/**
	 * deneme constructor
	 *
	 * @return void
	 * @author Ali Çetin, M. Çağdaş Saygılı -> Dev10.net
	 **/

	function __construct()
	{
		parent::Controller();
		log_message('debug', 'deneme Controller Yüklendi');
		$this->load->library('form_validation');
	}

	/**
	 * index function
	 *
	 * @return void
	 * @author Ali Çetin, M. Çağdaş Saygılı -> Dev10.net
	 **/

	// index sayfamızı tanımlıyoruz.
	function index()
	{
		$this->load->view('dev10_view');
	}

	// form kontrolümüzü tanımlıyoruz
	function ajax_yolla()
	{
		$this->form_validation->set_rules('deneme', 'Deneme', 'trim|xss_clean');

		$sonuc = NULL;

		if ($this->form_validation->run() == FALSE)
		{
			if (form_error('deneme')) {
			$sonuc['basarisiz'] = form_error('deneme');
			}
		} else {
			$deneme = $this->input->post('deneme');

			// burada veri direk bir model aracılığı ile sql'e ekleme yaptırabilirsiniz.
			$sonuc['basarili'] = ''.$this->input->post('deneme').' İnput Verisi Bana Ulaştı.';
		}

		// Json ile donuç alacağımız için sonuçları json'a çeviriyoruz.
		$data['sonuc'] = json_encode($sonuc);
		$this->load->view('dev10_json_sonuc_view', $data);
	}
}

/* End of file deneme.php */
/* Location: ./system/application/controllers/deneme.php */

deneme controllerimizi oluşturdum sıra view yani gösterim kısmında dev10_view.php olarak oluşturacağız;

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<base href="http://dev10.net/" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Dev10.net - CodeIgniter ile Ajax Form Doğrulama</title>
<!-- Jquery kütüphanesini indiriyoruz ve ekliyoruz anadizinimize -->
<script src="js/jquery-1.3.2.js"></script>
<style>
#deneme_form {
	width: 300px;
}
.gonder_butonu {
	font: normal 12px arial, sans-serif;
	text-decoration: none;
	cursor: pointer;
	color: #000000;
}
.deneme_basarili {
	padding: 2px 0px;
	margin-bottom: 2px;
	background: #E4F1C9;
	border: 1px solid #A5BD71;
	font-size: 10px;
	font-family: Verdana, Geneva, sans-serif;
	text-align: center;
}
.deneme_basarisiz {
	padding: 2px 0px;
	margin-bottom: 2px;
	background: #FFDFE0;
	border: 1px solid #FF9999;
	font-size: 10px;
	font-family: Verdana, Geneva, sans-serif;
	text-align: center;
}
.deneme_bekleme {
	padding: 2px 0px;
	margin-bottom: 2px;
	background: #FBFAEA;
	border: 1px solid #EFEBAA;
	font-size: 10px;
	font-family: Verdana, Geneva, sans-serif;
	text-align: center;
}
</style>
</head>

<body>
<!-- Deneme Form Başlangıcı -->
<div id="deneme_form">
<form id="deneme" name="deneme" method="post">
<div align="center" id="deneme_sonuc"></div>
<p>
<label for="text_field">Deneme<font color="#FF0000">*</font></label>
<br />
<input name="deneme" type="text" id="deneme" value="" size="40" />
</p>
<p align="right" style="width:280px;">
<a onclick="deneme_yolla();" class="gonder_butonu"><span>Gönder</span></a>
</p>
</form>
<script type="text/javascript">
	function deneme_yolla() {
		$.ajax({
			type: "POST",
			url: "index.php/deneme/ajax_yolla",
			data: "deneme="+ encodeURIComponent($('input[name=\'deneme\']').val()),
			dataType: 'json',

			beforeSend: function() {
				$('.deneme_basarili, .deneme_bekleme, .deneme_basarisiz').remove();
				$('#gonder_butonu').attr('disabled', 'disabled');
				$('#deneme_sonuc').after('<div class="deneme_bekleme"><img src="images/loading.gif" alt="" /> Lütfen Bekleyiniz!</div>');
			},

			complete: function() {
				$('#gonder_butonu').attr('disabled', '');
				$('.deneme_bekleme').remove();
			},

			success: function(data) {
				if (data.basarisiz) {
					$('#deneme_sonuc').after('<div class="deneme_basarisiz">' + data.basarisiz + '</div>');
				}

				if (data.basarili) {
					$('#deneme_sonuc').after('<div class="deneme_basarili">' + data.basarili + '</div>');
					$('input[name=\'deneme\']').val('');
				}
			}
		});
}
</script>
</div>
<!-- Deneme Form Bitişi -->
</body>
</html>
<base href="http://www.dev10.net/" />

kısmını kendinize göre süzeltiniz. sırada ajax_yolla controlümüzün view sayfası var dev10_json_sonuc_view.php dosyasını oluşturup içine;

echo $sonuc;

yazıp kaydediyoruz. dev10_json_sonuc_view.php bunu ve dev10_view.php bu 2 dosyayı system/application/views klasörünün içine atıyoruz, deneme.php dosyasını system/application/controllers klasörünün içine atıyoruz.

Ek olarak ajax doğrulama için jquery kütüphanesi gereklidir, direk son sürümünü www.jquery.com adresinden indirebilirsiniz. Uygulamanın hazır halini buradan indirebilirsiniz.

Alıntı değildir tamamen kendime aittir umarım işinizi görür.

Kalın salıcakla saygılarımla.

Bu Yazıyı Paylaş

CodeIgniter ile jQuery ajax form doğrulama için 27 yorum

    • araz avatar
      araz Cevap Yaz

      mukemmel olmus dostum!
      bir az zorlama oldu ama sanki smile) forum tarzı linkler için üye ol!

      05 Kasım 2009 Perşembe 14:26:00
    • Suleyman Demirkeser avatar
      #2 - Suleyman Demirkeser Cevap Yaz

      JQuery bilmeyenler icin yetersiz bir dokuman olmus kanisindayim. Zaten o kadar jquery bildikten sorna soyle kodlara bakicna bir arti goremedim. Hem input hemde formun id deneme olmazsa $('#formId').serialize() diyerek direk data oluşturulabilinir

      19 Kasım 2009 Perşembe 10:12:12
      • Ali ÇETİN avatar
        Ali ÇETİN Cevap Yaz

        Sayın Suleyman Demirkeser, Jquery bilmeyenler için yetersiz döküman olmuş kanısındasınız ancak ben burda jquery anlatımı yapmıyorum codeigniter framework'unda aynı sayfada veri gönderip aynı sayfada sonucunu yazdırıyorum.
        Jquery öğrenmek isteyenler araştırabilirler.

        26 Aralık 2009 Cumartesi 18:47:59
      • Onur avatar
        Onur Cevap Yaz

        bence guzel bir ornek olus eline saglik...

        Suleyman bey baltalayici mesajlar yazacaginiza yeterlisini yazin url sini burda yayinlayin...

        04 Mayıs 2010 Salı 16:38:38
    • mehmet avatar
      mehmet Cevap Yaz

      ben tum paketi indirip view altındaki system/application/views/dev10_view.php dosyasını çalıştırdım. gonder diyorum forum ustunde lutfen bekleyınız cıkıyor ve anında kayboluyor. yanı sanırım bu complete: function() a geçmiyor gibi. açıkcası hersyin adının deneme olması biraz kafa karıstırıcı, bılmıyorum belkide oyle olmak zorunda jquery bilgim cok fazla değil ama kod çalışmıyor, olay bu

      04 Aralık 2009 Cuma 17:41:51
      • Ali ÇETİN avatar
        Ali ÇETİN Cevap Yaz

        Sayın mehmet bey çalışmama gibi bir sorunu yoktur dev10_view.php dosyasındaki http://www.site.com/ adresini kendi adresinize göre düzeltip ekteki dosyaları kendi codeigniter yapınıza atınız ve siteniz.com/index.php/deneme olarak çalıştırınca sistem çalışıcaktır.
        Çalışan hali şuanki yorum yolladığınız yapıdır.

        26 Aralık 2009 Cumartesi 13:02:35
    • cihann avatar
      #7 - cihann Cevap Yaz

      Güzel anlatım. Teşekkürler...

      16 Aralık 2009 Çarşamba 21:34:04
    • acilhizmet avatar
      acilhizmet Cevap Yaz

      jquery bilmeyenler için zor bir kod bloğu

      20 Aralık 2009 Pazar 21:40:19
    • kaushal kumar avatar
      kaushal kumar Cevap Yaz

      test of this eg...

      23 Ocak 2010 Cumartesi 20:43:24
    • zeus avatar
      zeus Cevap Yaz

      güzel anlatım olmuş ty

      04 Mart 2010 Perşembe 20:33:21
    • kaan avatar
      #11 - kaan Cevap Yaz

      süper bi örnek teşekkür smile

      31 Mart 2010 Çarşamba 21:57:55
    • Huseyn avatar
      Huseyn Cevap Yaz

      Bence her seferinde servere gönderip php ile kontrolleri yaptirmaktansa client tarafında bu iş Jquery form validation ile halledilebilir, Servere yük binmez.
      Eklenti adresi ve Detay: http://docs.jquery.com/Plugins/Validation

      20 Mayıs 2010 Perşembe 07:19:08
      • Ali ÇETİN avatar
        Ali ÇETİN Cevap Yaz

        Sevgili Hüseyin güzel düşünmüşsün ancak güvenlik bacağı olarak berbat olur javascript'e güvenmek iyi bişiydir ancak sadece javascript ile doğrulama yapmak mantıksız.

        20 Mayıs 2010 Perşembe 08:54:50
        • Huseyn avatar
          Huseyn Cevap Yaz

          Demek istediğim şuydu, Önce client tarafında kontroller yapılır, Client tarafındaki kontrollerden geçerse form servere gönderilir, serverde kontroller yapılır, Server kontrolünden de geçerse veritabanı kaydı gerçekleşir, Server kontrolünde gerçekleşmezse form tekrar ekrana basılır.

          06 Haziran 2010 Pazar 13:16:14
    • Mert avatar
      Mert Cevap Yaz

      Teşekkürler...

      26 Haziran 2010 Cumartesi 15:41:47
    • bysezen avatar
      #16 - bysezen Cevap Yaz

      sağoll wink

      29 Haziran 2010 Salı 18:05:54
    • adem avatar
      adem Cevap Yaz

      canlı örnek deneme 1--2...

      Teşekkürler bu güzel örnek için

      02 Temmuz 2010 Cuma 23:53:15
    • melih avatar
      melih Cevap Yaz

      Faydalı Bir Makale Eline Sağlık

      04 Temmuz 2010 Pazar 04:16:40
    • yuy avatar
      yuy Cevap Yaz

      teşekkürler

      17 Temmuz 2010 Cumartesi 23:51:50
    • ümmet ceren avatar
      #20 - ümmet ceren Cevap Yaz

      rolleyes

      20 Temmuz 2010 Salı 21:47:21
    • hrn avatar
      hrn Cevap Yaz

      teşekkürler

      13 Aralık 2010 Pazartesi 01:55:56
    • pursaklar avatar
      #22 - pursaklar Cevap Yaz

      zor bir anlatım olmuş benim için.

      04 Eylül 2011 Pazar 00:12:25
    • Çağdaş Saygılı avatar
      #23 - Çağdaş Saygılı Cevap Yaz

      Gerçekten yararlı bir yazı ellerine sağlık...

      12 Kasım 2011 Cumartesi 23:04:23
    • erdem akca avatar
      #24 - erdem akca Cevap Yaz

      Benim de sorunum sadece yukarıda lütfen bekleyiniz yazıyor ve kayboluyor.

      01 Haziran 2014 Pazar 16:46:46
      • Ali Çetin avatar
        Ali Çetin Cevap Yaz

        Tarayıcıdan network işlemlerine bakın gönderdiğiniz adreste yanlışlık olabilir.

        01 Haziran 2014 Pazar 22:55:06
    • safir avatar
      safir Cevap Yaz

      güzel anlatım

      20 Aralık 2014 Cumartesi 16:32:01
    • Emre Aslan avatar
      Emre Aslan Cevap Yaz

      Elinize sağlık.

      09 Eylül 2015 Çarşamba 02:55:36

Bir Cevap Bırakın

grin LOL cheese smile wink rolleyes confused surprised big surprise tongue laugh tongue rolleye tongue wink hmmm mad angry zipper kiss cool smile question dil