Sayfalar

Translate Blog

jquery etiketine sahip kayıtlar gösteriliyor. Tüm kayıtları göster
jquery etiketine sahip kayıtlar gösteriliyor. Tüm kayıtları göster

2 Şubat 2015 Pazartesi

Veritabanından Php Form Oluşturucu Versiyon 2 / Database to Bootstrap Php Form Creator Version 2

Form Oluştur Versiyon 2

Yukarıdaki linkten Veritabanınızdaki tablolar için otomatik form oluşturabilirsiniz. Localhostta çalıştırın veritabanınızı seçin tabloyu seçin ve Form oluştura tıklayın.

_______________________________________________________________________


_______________________________________________________________________




31 Ocak 2015 Cumartesi

Veritabanından Php Form Oluşturucu / Database to Bootstrap Php Form Creator

[Düzenleme:]
2. versiyonu için tıklayınız. / Click to see the newer version.




Yıllardır şunun merak etmişimdir, neden kimse veritabanındaki tablolardan seçtiğim alanlara göre bir kayıt formunu otomatik oluşturacak bir kod yazıp da internete atmamıştır.

Dosyayı kendi localhostunuzda çalıştırmak için indirin.

Veritabanınızı ve Formunu istediğiniz tabloyu seçin. / Choose your database and table that want to make a form

Formda kullanmak istediğiniz alanları seçin / Choose your fieldnames for your form

Eğer tablonuzu oluştururken yorum kısımlarına mantıklı bir açıklama yazarsanız form elemanlarınızın üstünde olacak yazılar otomatik gelecektir. Eğer yorum kısımlarınız boş ise elinizle doldurmanız gerekecek. / If you fill the field's comments such as "Name and Surname Please" for name field, your form element's explanation come automaticly. If no you must fill the text areas like above image.


Gönder butonu ile formu görebilir ardından göster butonuna tıklayarak kodları alabilirsiniz. / Click Gönder link to see the form itself, after that click göster link to see and copy the form codes.



Kodda form elemanları http://getbootstrap.com/css/?#forms daki gibi Bootstrap'a uygun olarak oluşturulmuştur. Formunuzun yakışıklı gözükmesi için sayfanıza http://getbootstrap.com/getting-started/ daki CDN javascript ve css linklerini yüklemenizi öneririm.

Veritabanına bağlanmak için medoo kullandım. Sizin de kullanmanızı öneririm. Hem güvenlik hemde hızlanmak için birebir. Bu kütüphane veritabanına bağlantı, ve çeşitli sql yazımları için kolaylaştırılmış bir yapısı vardır. http://medoo.in/download adresinden indirebilir nasıl kullanıldığını http://medoo.in/api/new adresinden inceleyebilirsiniz. Ayrıca indireceğiniz dosyanın içindeki form.min.php dosyasını da nasıl bağlantı yapıldığına bakarak siz de kullanabilirsiniz. 

Henüz sadece text ve varchar alanlarını düzgün bir şekilde ekrana eklemekte. Int, date vb gibi alanlar için jquery ve bootstraplı form elemanları sonraki verisiyonunda eklenecektir. Takip ediniz.

how to create form from database, create form from database, create bootstrap form automaticly, automatic form creator, use tables to create form, veritabanından form oluştur, php form creator, php kullanarak veritabanından otomatik form oluşturma kodu, nasıl otomatik form oluştururum.

12 Kasım 2014 Çarşamba

JQuery div sıralama / JQuery simple change div order

Sırasını değiştirmek istediğiniz div alanlarınız var ise, if you want to reorder your divs;

<div id='resim'>
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
</div>

Yukarıdaki gibi, like above;

<script>
$(function () {
var parent = $("#resim");
var divs = parent.children();
while (divs.length) {
parent.append(divs.splice(Math.floor(Math.random() * divs.length), 1)[0]);
}
});
</script>

Bu script ile sayfanız yüklendikten sonra belirtilen id'li alanın içindeki tüm nesneler karışık bir şekilde hizalanabilir. Use this script to change your divs order. Just change div id attribute name.

16 Temmuz 2014 Çarşamba

Jquery ile Basit Filtreleme Yapmak / Make a Simple Filter With Jquery Filter

[Sayfanızda Jquery yüklemeyi unutmayın.]

Sayfanızdaki aşağıdaki gibi içinde data-type tagı barındıran <li> ler bulunsun, data-type değerinin oku kelimesi olduğunu görüyorsunuz.

<li data-type='oku'>
          <img src="kelimeislemci/kelimeler/okumak_2.jpg">
</li>

Aşağıdaki scripti sayfada çalıştırırsanız sayfanızdaki diğer <li> tagları display özellikleri none'a eşitlenecek yani gizlenecektir.

<script>
$(function () {
var sonuc = $('ul').find('li[data-type!=oku]');
sonuc.css('display','none');
});
</script>


You can use <li data-type="word"> to filter objects on the page. you can use other tags too, I just use this.
If you want to search/filter a word,  use above script. This script make your list hide, except <li> that has data-type=word

<li data-type='word'> word - 1 </li>
<li data-type='book'> word - 2 </li>
<li data-type='school'> word - 3 </li>
<script>
$(function () {
var sonuc = $('ul').find('li[data-type!=word]');
sonuc.css('display','none');
});
</script>

Above code only display word-1, others will be hidden.