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 28 yorum

    • araz avatar
      araz Cevap Yaz

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

      05 November 2009 Thursday 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 November 2009 Thursday 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 December 2009 Saturday 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 2010 Tuesday 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 December 2009 Friday 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 December 2009 Saturday 13:02:35
    • cihann avatar
      #7 - cihann Cevap Yaz

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

      16 December 2009 Wednesday 21:34:04
    • acilhizmet avatar
      acilhizmet Cevap Yaz

      jquery bilmeyenler için zor bir kod bloğu

      20 December 2009 Sunday 21:40:19
    • kaushal kumar avatar
      kaushal kumar Cevap Yaz

      test of this eg...

      23 January 2010 Saturday 20:43:24
    • zeus avatar
      zeus Cevap Yaz

      güzel anlatım olmuş ty

      04 March 2010 Thursday 20:33:21
    • kaan avatar
      #11 - kaan Cevap Yaz

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

      31 March 2010 Wednesday 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 2010 Thursday 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 2010 Thursday 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 June 2010 Sunday 13:16:14
    • Mert avatar
      Mert Cevap Yaz

      Teşekkürler...

      26 June 2010 Saturday 15:41:47
    • bysezen avatar
      #16 - bysezen Cevap Yaz

      sağoll wink

      29 June 2010 Tuesday 18:05:54
    • adem avatar
      adem Cevap Yaz

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

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

      02 July 2010 Friday 23:53:15
    • melih avatar
      melih Cevap Yaz

      Faydalı Bir Makale Eline Sağlık

      04 July 2010 Sunday 04:16:40
    • yuy avatar
      yuy Cevap Yaz

      teşekkürler

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

      rolleyes

      20 July 2010 Tuesday 21:47:21
    • hrn avatar
      hrn Cevap Yaz

      teşekkürler

      13 December 2010 Monday 01:55:56
    • pursaklar avatar
      #22 - pursaklar Cevap Yaz

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

      04 September 2011 Sunday 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 November 2011 Saturday 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 June 2014 Sunday 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 June 2014 Sunday 22:55:06
    • safir avatar
      safir Cevap Yaz

      güzel anlatım

      20 December 2014 Saturday 16:32:01
    • Emre Aslan avatar
      Emre Aslan Cevap Yaz

      Elinize sağlık.

      09 September 2015 Wednesday 02:55:36
    • okaba avatar
      #28 - okaba Cevap Yaz

      Elinize sağlık demek ve formu da denemek istedim grin

      21 April 2019 Sunday 22:38:14

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