Bilgisayar » JQuery

JQuery ve PHP/MySQL ile kullanıcı adını gerçek zamanlı kontrol etme

Hakan Atılgan — Thu, 06 Aug 2015 21:57:09 +0000

Bu yazımızda JQuery ajax özelliğini ve PHP kullanarak MySQL’de oluşturulmuş bir tablodan kullanıcı adını daha evvelden bir başkası tarafından kullanılıp kullanılmadığı gerçek zamanlı olarak kontrol etmeden bahsedeceğiz.
Eğer kullanıcı ismi daha evvelden bir başkası tarafından kullanıldıysa “”Kullanıcı ismi mevcut değil”, kullanılmadysa “Kullanıcı ismi mevcut” uyarısı ile sitemize kayıt olmaya çalışan kullanıcımızı uyaracağız.

Demo

İlk olarak MySQL veritabanında kullanici_adlari tablosu oluşturalım.

CREATE TABLE IF NOT EXISTS `kullanici_adlari` (
`kullanici_no` int(11) NOT NULL,
  `kullanici_adi` varchar(20) DEFAULT NULL,
  `isim` varchar(50) DEFAULT NULL,
  `soyad` varchar(50) DEFAULT NULL
) ENGINE=InnoDB  DEFAULT CHARSET=utf8 AUTO_INCREMENT=5 ;

Tablomuzu oluşturduktan sonra tablomuzu bazı veriler ile dolduralım.

INSERT INTO `kullanici_adlari` (`kullanici_no`, `kullanici_adi`, `isim`, `soyad`) VALUES
(1, 'hakan', 'Hakan', 'Atılgan'),
(2, 'solak', 'Süleyman', 'Solak'),
(3, 'mustafa', 'mustafa', 'mustafa'),
(4, 'murat', 'murat', 'murat');

Veritabanınızda tabloyu oluşturduktan sonra index.php ve ajax.php dosyaları oluşturun. index.php, ajax ile her harf girildiğinde gerçek zamanlı olarak ajax.php sayfasına giderek, girilen ismi yukarıda oluşturduğumuz kullanıcı_adı tablosundan kontrol edecektir.

index.php

CSS: etiketinin hemen üzerine kopyalayalım.

HTML: etiketinin hemen altina kopyalayalım.

Jquery: etiketinin hemen üzerine kopyalayalım.

(function($){
    $(document).on("keyup", "#kullaniciadi",function(){
        $.post( "ajax.php", { isim: $(this).val() } )
            .done(function( data ) {
                $("#hatabilgi").html(data);
        });
    });
})(jQuery);

ajax.php

PHP: ajax.php sayfasına aşağıdaki php kodunu içine kopyalayın.

// Burada veritabanı bağlantısını unutmayın
$ret ='';
$isim =  $mysqli->real_escape_string($_POST['isim']);
$sql="SELECT * FROM kullanici_adlari WHERE kullanici_adi='".$isim."'";
$result = $mysqli->query($sql);
$nt = $result->fetch_array();
if ($result->num_rows){
    $ret .= 'Kullanıcı ismi mevcut değil';
} else {
    $ret .= 'Kullanıcı ismi mevcut';
}
echo $ret;

index.php dosyası yukarıdaki kodları kopyaladığımızda söyle olacaktır.





Bilgisayar.me






hakan, solak, mustafa veya murat isimlerini deneyin

Bu yazıda JQuery ve PHP/MySQL ile kullanıcı adını veritabanından gerçek zamanlı kontrol etme nasıl kodlanırı açıklamaya çalıştım. Bir hata bulduysanız veya kod çalışmadıysa, üşenmeyin aşağıya iki tıklama, bir cümleyle yorum yazın.

Jquery ve PHP/MYSQL ile text etiketini otomatik olarak tamamlama

Hakan Atılgan — Wed, 05 Aug 2015 20:59:39 +0000

Demo YÜKLE

İlk önce aşağıdaki bağlantıları sayfanıza etiketinin hemen üzerine ekleyin.

CSS
etiketinin hemen üzerine ekleyin.

HTML
etiketinin hemen altına ekleyin.

JQuery
etiketinin hemen üzerine ekleyin.

PHP
ajax isminde bir php sayfası (ajax.php) oluşturun ve aşağıdaki PHP kodunu bu sayfanın içne kopyalayın. Varitabanına bağlantı kurmayı unutmayın.

query("SET NAMES utf8");
if(mysqli_connect_errno()) {
    echo "Hata Oluştu: " . mysqli_connect_errno();
    exit();
}

$sehir = $mysqli->real_escape_string($_POST['sehir']);
$sql="SELECT * FROM iller WHERE sehir LIKE'%".$sehir."%' ORDER BY sehir ASC LIMIT 15";
$result = $mysqli->query($sql);
$ret = '';
if ($result->num_rows){
    while ($nt = $result->fetch_array()){
        $ret .= ''.$nt['sehir'].'';
    }
} else {
	$ret .= ' Şehir Bulunamadı';
}
echo $ret;
?>

Veritabanınızda iller tablosu oluşturun.

CREATE TABLE IF NOT EXISTS `iller` (
  `id` int(11) NOT NULL,
  `sehir` varchar(50) DEFAULT NULL
) ENGINE=InnoDB AUTO_INCREMENT=82 DEFAULT CHARSET=utf8;

En son olarakda aşağıdaki illeri bu tablonun içine yerlştirin.

INSERT INTO `iller` (`id`, `sehir`) VALUES
(1, 'ADANA'),
(2, 'ADIYAMAN'),
(3, 'AFYON'),
(4, 'AĞRI'),
(68, 'AKSARAY'),
(5, 'AMASYA'),
(6, 'ANKARA'),
(7, 'ANTALYA'),
(75, 'ARDAHAN'),
(8, 'ARTVİN'),
(9, 'AYDIN'),
(10, 'BALIKESİR'),
(74, 'BARTIN'),
(72, 'BATMAN'),
(69, 'BAYBURT'),
(11, 'BİLECİK'),
(12, 'BİNGÖL'),
(13, 'BİTLİS'),
(14, 'BOLU'),
(15, 'BURDUR'),
(16, 'BURSA'),
(17, 'ÇANAKKALE'),
(18, 'ÇANKIRI'),
(19, 'ÇORUM'),
(20, 'DENİZLİ'),
(21, 'DİYARBAKIR'),
(81, 'DÜZCE'),
(22, 'EDİRNE'),
(23, 'ELAZIĞ'),
(24, 'ERZİNCAN'),
(25, 'ERZURUM'),
(26, 'ESKİŞEHİR'),
(27, 'GAZİANTEP'),
(28, 'GİRESUN'),
(29, 'GÜMÜŞHANE'),
(30, 'HAKKARİ'),
(31, 'HATAY'),
(33, 'İÇEL'),
(76, 'IĞDIR'),
(32, 'ISPARTA'),
(34, 'İSTANBUL'),
(35, 'İZMİR'),
(46, 'KAHRAMANMARAŞ'),
(78, 'KARABÜK'),
(70, 'KARAMAN'),
(36, 'KARS'),
(37, 'KASTAMONU'),
(38, 'KAYSERİ'),
(79, 'KİLİS'),
(71, 'KIRIKKALE'),
(39, 'KIRKLARELİ'),
(40, 'KIRŞEHİR'),
(41, 'KOCAELİ'),
(42, 'KONYA'),
(43, 'KÜTAHYA'),
(44, 'MALATYA'),
(45, 'MANİSA'),
(47, 'MARDİN'),
(48, 'MUĞLA'),
(49, 'MUŞ'),
(50, 'NEVŞEHİR'),
(51, 'NİĞDE'),
(52, 'ORDU'),
(80, 'OSMANİYE'),
(53, 'RİZE'),
(54, 'SAKARYA'),
(55, 'SAMSUN'),
(63, 'ŞANLIURFA'),
(56, 'SİİRT'),
(57, 'SİNOP'),
(73, 'ŞIRNAK'),
(58, 'SİVAS'),
(59, 'TEKİRDAĞ'),
(60, 'TOKAT'),
(61, 'TRABZON'),
(62, 'TUNCELİ'),
(64, 'UŞAK'),
(65, 'VAN'),
(77, 'YALOVA'),
(66, 'YOZGAT'),
(67, 'ZONGULDAK');

JQuery ile HTML textarea etiketinde kelime sınırlaması

Hakan Atılgan — Wed, 05 Aug 2015 18:19:02 +0000

Jquery eklentisini sayfanıza eklemeyi unutmayın.

Demo

HTML



    Kalan  karakter sayısı

JQuery

Hepsi bir arada





JQuery ile HTML textarea etiketinde kelime sınırlaması




 Kalan  karakter sayısı

PHP/MYSQL ve JQuery ile Basit Dosya Yönetici Uygulaması

Hakan Atılgan — Fri, 31 Jul 2015 22:41:45 +0000

YÜKLE

Özellikler:

Klasör oluşturma
Dropzone Jquery eklentisi ile sabit diske dosya yükleme
Çoklu veya tek dosya silme

Ekran Görüntüleri:

JQuery ile bir dizeden dizi oluşturma

Hakan Atılgan — Wed, 29 Jul 2015 20:12:55 +0000

jQuery split() işlevi ile bir dizeden(string) bir dizi(array), jQuery join() işlevi ile de tekrardan bir diziyi bir dizeye dönüştürmek oldukça basit bir işlemdir.

Arraylar(dizi) hakkında bilgilerinizi tazelemek için burayı tıklayın.

split() işlevi

Örneğin elimizde aşağıdaki gibi bir dizemiz olsun.

Diziyi döngü içine almak istersek

Dizideki değerlere tek tek ulaşmak için

// diziler 0' dan başlarlar
dizi[0]; // a 
dizi[3]; // s
dizi[5]; // u

Bazı dize örnekleri

var dize = "a b c s t u p d";
var dizi = dize.split(' ');

var dize = "a:b:c:s:t:u:p:d";
var dizi = dize.split(':');

join() işlevi

Bir diziyi dizeye dönüştürmek için kullanılır.

var dizi= new Array("A", "B", "C", "E", "F", "Z", "S", "D"); // dizi oluştur
var dize= dizi.join(','); // diziyi dizeye dönüştür
alert(dize); // dizemiz A,B,C,E,F,Z,S,D

Jquery ile HTML seçme kutusuna bir değer ekleme

Hakan Atılgan — Wed, 29 Jul 2015 19:14:44 +0000

Bu yazımızda jQuery ile HTML seçme kutusuna yeni bir seçenek eklemek nasıl olur onu öğrenecegiz.

Demo

jQuery ile HTML seçme kutusuna yeni bir seçenek eklemek için önce seçenek kutumuzu oluşturalım.

Daha sonra JQuery kodu ile istenilen kelimeyi seçenek kutumuza ekleyelim.

Hepsi bir arada





Bilgisayar.me

JQuery ile form değerlerinin değişip değişmedigini kontrol etme

Hakan Atılgan — Sat, 25 Jul 2015 00:56:02 +0000

FORM bilgilerini veritabanına göndermeden önce, FORM değerlerinin değişip değişmedigini kontrol etmek istersek, önceki FORM bilgileri ile yeni FORM bilgilerini aşağıdaki örnekte görüldüğü üzere SERIALIZE ile kıyaslamamız yeterlidir.

(function() {
    var formoncekiveri = $("#form").serialize(); 
    $("#kaydetbutton").click(function() {
        if ($("#form").serialize() != formoncekiveri ) {
            // form yeni verilere sahip
        }
    });
});

HTML sayfasında görmek istersek





Bilgisayar.me





  
    
       
       
    
    
      İsim
      
    
    
      Soyad

JQuery ile AJAX içinde sesli uyarı (NOTIFY) popup kullanımı

Hakan Atılgan — Fri, 24 Jul 2015 19:29:00 +0000

Toaster Jquery eklentisini ile sesli ajax uyari popup uygulaması

Demo YÜKLE

HTML

uyari.js

//Notify('Başarıyla güncellendi', 'top-right', '5000', 'success', 'fa-check', true)
function Notify(uyari, pozisyon, timeOut, uyarisekli, faikon, button) {
    toastr.options.positionClass = "toast-" + pozisyon;
    toastr.options.extendedTimeOut = 0;
    toastr.options.timeOut = timeOut;
    toastr.options.closeButton = button;
    toastr.options.iconClass = faikon + " toast-" + uyarisekli;
    toastr.custom(uyari)
}

Hepsi bir arada





Bilgisayar.me

jQuery $.each kullanım örnekleri

Hakan Atılgan — Thu, 23 Jul 2015 20:17:22 +0000

JQuery’nın foreach ya da for eşdeğerinde olan $.each döngüsünün kullanımı, Jquery uygulamalarınızda bir çok açıdan kullanışlı olacaktır. Aşağıda diziler, nesneler ve HTML elemanları ile ilgili $.each kullanarak nasıl döngü yapılabilir örneklerini bulacaksınız.

JQuery $.each ile dizi döngüsü

$(function(){
    var dizi = ["araba", "uçak", "gemi", "bisiklet", "tren"];
    $.each(dizi, function(index, value){
        console.log("INDEKS: " + index + " DEGER: " + value);
    });
});

Yukarıdaki scriptin çıkışı aşağıdaki gibi olacaktır:

araba
uçak
gemi
bisiklet
tren

JQuery $.each ile objelerin döngüsü

Dizilerin yanısıra, bazen objeleride döngüye almak isteriz. Aşağıdaki kod JSON nesne döngüsü için bir örnektir.

$(function(){
    var obje = [
        {
            no: 1,
            ad: "Süleyman",
            soyad: "Sol",
        },
        {
            no: 2,
            ad: "Murat",
            soyad: "Demir",
        },
        {
            no: 3,
            ad: "Mustafa",
            soyad: "Alkan",
        },
    ];
    $.each(obje, function(){
        console.log("NO: " + this.no);
        console.log("İSİM: " + this.Ad);
        console.log("SOY İSİM: " + this.soyad);
        console.log(" ");
    });
});

Yukarıdaki scriptin çıkışı aşağıdaki gibi olacaktır:

NO: 1
İSİM: Süleyman
SOY İSİM: Sol

NO: 2
İSİM: Murat
SOY İSİM: Demir

NO: 3
İSİM: Mustafa
SOY İSİM: Alkan

JQuery $.each ile liste döngüsü

Aşağıdaki kod ‘liste’ sınıfına sahip bütün

elemanlarının yazı rengini $.each döngüsü ile green(yeşil)’e çevirir.

$(function(){
    $('.liste li').each(function(){
        $(this).css("color", "green");
    }
    });
});

JQuery $.each ile diğer HTML elemanları döngüsü

Liste elemanları yanı sıra her türlü HTML elemanlarınıda döngüde kullanabiliriz. Aşağıda örnekler bunlardan bazılarıdır.

$(function(){
    $('a').each(function(){ // sayfadaki tüm bağlantıları döngüde kullan
        $(this).prop("href", "#"); // bağlantıyı devre dışı bırak
    });
    $('.hide').each(function(){ // .hide sınıfina sahip tüm unsurları döngüde kullan ve sakla
        $(this).hide(); 
    });
    $('pre').each(function(){ // bütün pre etiketlerini bul ve ekle sınıfını ekle
        $(this).addClass("ekle");
    });
});

JQuery ile açılan liste(select box) değiştiginde yeni sayfaya yönlerdirme

Hakan Atılgan — Thu, 16 Jul 2015 21:06:58 +0000

HTML

Elemanlar

JQUERY