Türkiye
CodeIgniter'ı İndir
Türkçe Kullanım Kılavuzu
Kullanıcı girişinin yapıldığı bazı formlarda veritabanı üzerinden okunan bilgilerin eşzamanlı olarak çağrıldığı otomatik tamamlama özelliği bir çok sitede görülür. JQuery için yazılmış autocomplete scripti kullanılarak bu özelliğin CodeIgniter`a nasıl uygulabileceğimizi bu yazıda anlatacağım.
Öncelikle veritabanımızda customers isimli bir tablomuz olduğunu ve bu tablodaki username isimli bir verimizin bulunduğunu düşünelim. Amacımız, kullanıcımızdan bir form içindeki input kutusuna yazmaya başladığında yazdığı harflere göre veritabanına kayıtlı olan müşterilerimin isimlerini alt alta sıralamak olsun.
Öncelikle bassistance.de adresinde yayımlanan autocomplete scriptini indiriyoruz. Bu script JQuery 1.2.6+ versiyonlarını desteklemektedir. Bu dosyalarımızı .htaccess dosyamız ile yönlendirme dışına bıraktığımız kök dizini altındaki js dizinimize kayıt ediyoruz.
Otomatik tamamlama özelliğinin CodeIgniter`a uygulamasında kullanılmak üzere önce formun yer aldığı bir View dosyası hazırlayalım. Bu dosya javascript kodlarını içeren özellikte olmalı, kullanıcımızın input kutusuna yazmasıyla ekrana veritabanından bilgi listelemelidir. View dosyamızı application/views/autocomp-ajax_view.php ismi ile kayıt ediyoruz.
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Otomatik Tamamlama Uygulamasi | CodeIgniter.gen.tr</title>
<!-- LOAD JQUERY -->
<script type="text/javascript" src="<?php echo base_url()?>assets/js/jquery.1.3.2.js"></script>
<script type='text/javascript' src='<?php echo base_url()?>assets/js/jquery.autocomplete.pack.js'></script>
<link rel='stylesheet' type='text/css' href='<?php echo base_url()?>assets/css/jquery.autocomplete.css' />
<script language="javascript">
$(document).ready(function() {
$('#username').autocomplete(
'<?php echo base_url()?>/autocomp/ajax_custom_check/',
{
minChars:1,
delay:400,
cacheLength:100,
matchContains:true,
max:10,
formatItem:function(item, index, total, query){
return item.username;
},
formatMatch:function(item){
return item.username;
},
formatResult:function(item){
return item.username;
},
dataType:'json',
parse:function(data) {
return $.map(data, function(item) {
return {
data: item,
value: item.username,
result: item.username
}
});
}
});
});
</script>
<style type="text/css">
.form
{
}
.form span
{
float: left;
width: 200px;
clear: both;
}
.form .normal
{
width: 120px;
float: none;
}
.form .short
{
width: 50px;
}
.form input, .form select, .form textarea
{
margin-top: 2px;
margin-bottom: 2px;
}
blockquote
{
background:#e7e7e7;
color:red;
}
td {
height:35px;
font-size:12px;
font-weight:bold;
}
</style>
</head>
<body>
<?=$this->error->error_view()?>
<h1>Veritabanından Bilgi Çekme Formu</h1>
<form action="<?=base_url()?>autocomp" method="post">
<div class="form">
<span>Kullanıcı Adı ve Soyadı :</span>
<input type="text" name="username" size="50" id="username"/><br />
<input type="submit" name="add" class="submitbutton" value="GONDER">
</div>
</form>
<p>Bu uygulama <a href="http://www.codeigniter.gen.tr">CodeIgniter.gen.tr</a> adresinden alınmıştır.</p>
</body>
</html>
Yukarıda kodları verilmiş view dosyamızda bulunan javascript kodu, username id değeri ile tanımlı input kutusuna bilgi girildiğinde autocomp isimli controller dosyasındaki ajax_custom_check metodunu çalıştıran ve oradan gelen username isimli veriyi yine username isimli kutuya yazdıran bir scripttir.
Uygulamanın ikinci adımı ise javascript tarafınan çalıştıran autocomp isimli controller dosyamızın hazırlanmasıdır. Application/controllers dizini altına kayıtlı autocomp.php isimli dosyamızın içeriği şöyle olacaktır:
class Autocomp extends Controller {
function Autocomp()
{
parent::Controller();
$this->load->library(array('session','error'));
}
function index()
{
$this->session->keep_flashdata('msg');
$this->load->view('autocomp-form_view');
}
function ajax_custom_check()
{
$this->load->model('autocomp_model','Model');
$where = 'username LIKE "'.mysql_real_escape_string($this->input->get("q",TRUE)).'%"';
$data['arr'] = $this->Model->get_username($where);
$this->load->view('autocomp-ajax_view',$data);
}
}
Controller dosyamızda autocomplete isimli javascript dosyası çalıştırılınca oluşan q isimli değişken, XSS temizliği yapıldıktan sonra alınarak, model dosyasında çalıştırılmak üzere bir sorgu cümlesinin, sadece kullanıcının girdiği harfler ile başlayan username değerini bulmak üzere hazırlanmış where kısmı oluşturulmaktadır. Daha sonra autocomp_model isimli dosyada bulunan get_username fonksiyonu yardımıyla çekilen bilgiler, autocomp-ajax_view.php isimli view dosyasına gönderilerek ekrana bastırılır. Önce model dosyamıza bakalım:
Application/models dizini altına kayıtlı autocomp_model.php isimli model dosyamızda controller dosyasından gelen where bilgisini kullanarak veritabanından bilgi çekelim:
class Autocomp_model extends Model {
function Autocomp_model()
{
parent::Model();
}
function get_username($where)
{
$query = $this->db->query("
SELECT DISTINCT username
FROM customers
WHERE $where
");
$result = $query->row();
if($query->num_rows() > 0)
{
return $query->result_array();
}
}
}
Controller dosyamıza geri gelen bu bilgiyi ise application/views dizini altına kayıtlı autocomp-ajax_view.php dosyamıza gönderelim. Javascript dosyası json formatında gelen bilgileri düzenlediği için, veritabanından çektiğimiz bilgileri json_encode ile yazdırıyoruz.
echo json_encode($arr);
Bu yazıda bir form üzerinde kullanıcının bilgi girişine göre veritabanından bilgi çekerek ekrana dinamik olarak nasıl yansıtılacağını anlattım. Çalışan kodların bulunduğu uygulamaya buradaki linkten erişebilirsiniz. Uygulama üzerinde a, b ve c harflerine göre deneme bilgi girişi yapılmıştır.
Dip Not: Javascript kodu adres satırından bilgi çekmektedir. Bu nedenle application/config dizini altında bulunana config.php dosyasında uri_protocol değişkeni size uygun olan bir protokole ayarlı (benim için "PATH_INFO" uygundu) ve enable_query_strings değişkeni TRUE olmalıdır.
Yazarı : Fatih BAZMAN | Yorum Ekle | Etiketler : Uygulama Autocomplete ajax
