Javascript / JQuery Input Virgül Yerine Nokta

JQuery kullanarak geliştirdiğimiz arayüz çalışmasında matematiksel işlemler yapan ufak bir sayfamız vardı. Fakat Klavyenin sağ tarafındaki Number Pad kullanılığında el alışkanlığı olaraktan ondalıklı sayılar için Virgül kullanıldığında Javascript hataları alıyorduk. Bize gerekli olan ise Virgül tuşuna basıldığında Nokta’ya çevirmesiydi.

Bununla ilgili olaraktan Javascript / JQuery kod parçasını paylaşıyorum. Aynı zamanda ondalıklı sayılar için tek bir ondalık parçası yani tek bir Nokta işareti almalıydı. Kod parçasında nokta yani ondalık var ise tekrardan Nokta basmayacak şekilde düzenleme yaptık.

	$( document ).on( 'keypress', '.input_calc', function( e )
	{
		if( e.keyCode == 46 && $( this ).val().indexOf( '.' ) != -1 )
			e.preventDefault();

		var tmp = $( this ).val();
		if( e.keyCode == 44 )
		{
			setTimeout(function()
			{
				if( tmp.indexOf( '.' ) == -1 )
					e.target.value += '.';
			}, 4 );
			e.preventDefault();
		}
	});

Bu olay / hata / problem artık ne demek isterseniz sadece javascript / web ortamında değil aynı zamanda hemen hemen bütün programlama dilleri ve veritabanı kayıt işlemlerinde ondalıklı sayıların nokta ile gelmesi durumlarını kapsayabilir. Geliştirmekte olduğunuz projede sayısal işlemleriniz mevcut ise dikkat etmenizi öneririm. 🙂

IndexedDb – Dixie.js Nedir – Ön Hazırlık – 1

Yazılım projelerinde veritabanları çok önemlidir. Bunun yanında getirdiği birkaç problem vardır. İlk olarak hız konusu gündemde kalır. Hız önemlidir. Hatta bazen önemini sözlerle bile anlatamayız. Biraz abartı olabilecek belki ama ölüm / kalım meselesi bile olabilir hız konusu.  Neyse..

Bir projemizde ekran üzerinde birçok işlem yapıldıktan sonra düzenleme işlemleri bitip “Kaydet” butonuna tıklanıldığında işlemlerin yapılması gerekiyor. Proje Web üzerinde yürüdüğü için bize gerekenler şunlar;

  • Tarayıcı üzerinde bilgi saklanmalı
  • Javascript olarak üzerinde ekleme, silme, arama işlemleri ( database işlemleri gibi )
  • Tarayıcı kapanırsa açıldığında tekrar kaldığı yerden bilgiler devam etmeli
  • Hızlı ve esnek olmalı
  • Ek olarak bizi yormayacak şekilde olması lazım tabiki 🙂

Araştırmalarım sonucu olarak IndexedDb ile tanışmış olup kullanmaya çalıştım. IndexedDb tarafında sıfırdan kütüphane yazmak yerine de var olan kütüphanelerden Dixie.JS hoşuma gitti ve kullanmaya başladım. Okumaya devam et “IndexedDb – Dixie.js Nedir – Ön Hazırlık – 1”

PHP CodeIgniter İle İmage Cache Yapımı

Hemen hemen herkesin ihtiyacıdır diye düşünüyorum. İmage Cache. Genellikle bir tane PROXY URL oluşturup dosyaya ait cache hali varsa onu çekeriz yoksa cache’leyip cache halini çekeriz. Fakat bu durum sistemde dosyalarınızın gelmesini yavaşlatabilir.

Hali hazırsa orjinal dosyalarınızın bulunduğu bir klasör altında image dosyalarınız var ise aşağıdaki paylaşmış olduğum örnekteki gibi bir yöntem ile dosyaların boyutlandırılmasını orantılı bir şekilde yapabilirsiniz.

Bir önceki yazımda “get_dir_contents” fonksiyonunu paylaşmıştım. Bir dizin altındaki tüm dosyaları getirmek için kullanıyoruz.

$list = get_dir_contents( '/var/www/html/cron/orj_images' );

// hangi boyutlarda oluşturacağımızı belirtiyoruz.
$arr[] = array( 32, 32 );
$arr[] = array( 50, 50 );
$arr[] = array( 64, 64 );
$arr[] = array( 70, 70 );
$arr[] = array( 80, 80 );
$arr[] = array( 90, 90 );
$arr[] = array( 100, 100 );
$arr[] = array( 120, 120 );
$arr[] = array( 150, 150 );
$arr[] = array( 160, 200 );
$arr[] = array( 200, 200 );
$arr[] = array( 300, 300 );
$arr[] = array( 200, 256 );
$arr[] = array( 256, 256 );
$arr[] = array( 500, 500 );
$arr[] = array( 512, 512 );
$arr[] = array( 640, 640 );
$arr[] = array( 1024, 1024 );
$i = 0;
// listemizde döngüye girip image_lib kütüphanesi ile işlemleri başlatıyoruz.
foreach( $list as $key => $value )
{
	if( !file_exists( $value ) )
		continue;
	if( is_dir( $value ) )
		continue;
	
	$this->load->library( 'image_lib' );
	// her bir dosya için boyutlandırma dizisine göre ayrı ayrı işlem yaptırıyoruz.
	foreach ( $arr as $k => $v )
	{
		$ext = pathinfo( $value );

		$new_file = $ext[ 'dirname' ].'/'.$ext[ 'filename' ].'-'.$v[ 0 ].'x'.$v[ 1 ].'.'.$ext[ 'extension' ];				
		$old_file = str_replace( '/var/www/html/cron/orj_images', '/var/www/html/cron/chache_images', $new_file );			
		
		if( file_exists( $old_file ) )
			continue;
		// kaynak dosyamnız $value değişkenindedir.
		$config = array(
			'image_library' => 'gd2',
			'source_image' => $value,
			'new_image' => $old_file,
			'maintain_ratio' => TRUE,
			'create_thumb' => TRUE,
			'thumb_marker' => '',
			'width' => $v[ 0 ],
			'height' => $v[ 1 ]
		);

		$this->image_lib->initialize( $config );
		$this->image_lib->resize();
		$this->image_lib->clear();
		echo $old_file."\n";
	}
}

Yeni dosya ekleme işlemlerinde upload sırasında bu boyutlar otomatik olarak cachleniyor. Sistemde orjinal dosya direkt olarak kullanılmıyor.

Bu kod parçasını CRON üzerinden bağladığımız için dosyaları mümkün olduğunda güncel kalmasını sağlıyoruz.

Not : “Yapı Codeigniter framework’ü üzerinden örneklendirilmiştir. Sisteminize uygulamadan önce test etmenizi tavsiye ederim.”

 

JQuery İle Sanal Klavye

Ödeme sistemlerinde genellikle kullanılan sanal klavyeleri görmüşsünüzdür. Merakımızın sonucu olarak aşağıdaki gibir bir yapı oluştu. Merak edenler için ödeme sistemlerinde kullanılan sanal klavyenin yapım aşamaları aşağıdadır. Sanal klavyenin çözümünü, tasarımını ve sanal klavye üzerinde tuş basım yani keypress olayının tetiklenmesi aşağıdaki gibidir. Bu arada farklı yöntemlerde mevcuttur.

Şimdi olayın yapım aşamasında aşağıdaki gibi bir yapı kullandık.

Okumaya devam et “JQuery İle Sanal Klavye”

JQuery Ajax Error Handling / Hataları Toplamak

Jquery Ajax kullandığımız birçok projenin backend tarafında oluşan hataları AJAX tarafında genellikle yakalamak oldukça zordur. Hele birde dataType’ınız JSON gibi farklı formatlar da ise zorluk dereceniz bir tık daha artacaktır.

Fakat her AJAX işleminde success, error işlemlerini yakalamak oldukça zahmetli bir iş. Ekstra fazladan kodlar, bulunamayan satırlar bunlar hep dert.

Aşağıdaki kod parçacağımız sayesinde sistemimizdeki AJAX işlemlerine ekstra olarak error event vermek yerine tüm sisteminizdeki error eventları tek bir yerde topluyoruz ve isterseniz de tekrar başka bir yöntem veya yine AJAX ile herhangi bir yere LOG olarak yazabilirsiniz.

AJAX Error Handling

$( document ).ajaxError( function( event, jqxhr, settings, thrownError )
{
	console.log( jqxhr.responseText.trim() );
});

 

Ben kısaca özetleyip, kullanımını belirttim. Console.log ile ekranda görünmesini sağladım.  Gerisi sizde. 🙂 Bu hareketi gördükten sonra bir çok hatayı hızlıca çözmeye başladım / başladık.

Css keyframes ile animasyon yapımı

Merhaba arkadaşlar, internet sitelerinde gezerken sağdan soldan akan yazıları veya görsellerin animasyon efeklerini merak etmişsinizdir. Bugün sizlere css keyframeslerden bahsetmek istiyorum.   Class (.) ya da İd (#) lerde kullanılır. Css ‘animation’    içerisinde kullanım gerçekleştirilmektedir. Keyframesizin işlem sıralamasıda önemlidir. %0 %25 %50 % 75 %100 şeklinde hareket pozisyonları belirleyebilir bu % leri çoğaltabilir ya da arttıradabilirsiniz.

.logo img
{
    max-width: 200px;
    max-height: 100px;
    animation: buyume 1s ease-in-out;
}


Yazmış olduğumuz keyframesimizi bu şekilde kullanabiliriz. Size küçük bir bilgi vermek istiyorum yapmak istediğiniz işlemi sonsuz bir döngüye sokmak isterseniz keyframesimizin hareket pozisyonlarından sonra sonuna ‘infinite’ vererek sonsuz animasyon yapabilmenizi sağlar. 

Örnk

.logo img
{
    max-width: 200px;
    max-height: 100px;
    animation: buyume 1s ease-in-out infinite;
}

Hadi başlayalım

1-) Keyframes’e bir isim vererek animasyonumuzun hareket pozisyonlarınızı verebilirsiniz.


@keyframes buyume 
{
    0%
    {
        max-width: 200px; 
        opacity: 0;
    }
   50% 
    {
        max-width: 80px;  
        opacity: 1;
    }
    100% 
    {
        max-width: 200px;  
        opacity: 0;
    }
}

JQuery ile Nesnenin Show / Hide Event Yakalama

Javascript tarafında oldukça fazla event ( olay ) var. JQuery ile birleştiğinde daha da fazla eventlara hatta özelleştirilmişlere dahi sahip olabiliyorsunuz. Bir projede form hazırlarken div nesnesinin show / hide durumuna göre başka bir nesnenin işlenmesi gerekiyordu. Ufak bir araştırma sonucu herhangi bir nesnenin – sadece div değil – show / hide durumlarına göre event atayabileceğimi buldum.

Aşağıdaki kod ile bu event ın tanımlamasını yapıyoruz

	( function( $ )
	{
	  	$.each(['show', 'hide'], function (i, ev)
	  	{
			var el = $.fn[ ev ];
			$.fn[ ev ] = function()
			{
		  		this.trigger( ev );
		  		return el.apply( this, arguments );
			};
	  	});
	})(jQuery);

Örnek kullanım;

	$( 'div' ).on( 'show', function()
	{
		$( 'span' ).html( 'div gösterim durumu açık' );
	});
	$( 'div' ).on( 'hide', function()
	{
		$( 'span' ).html( 'div gösterim durumu kapalı' );
	});

Siz div veya kendi class / id her neyse artık $( ‘div’ ).show(); veya $( ‘div’ ).hide(); yaptığınızda span nesnesi içerisinde durumunu açıklayan yazıyı yazacak. Bu ihtiyaç bizim için sekmeli form işlemi yaparken verilen cevaplara göre bir sonraki sorunun ( her bir soru bir div içerisinde yapı olarak yer alıyor )  hangisi olacağını belirliyordu. Basit bir işlem için bu şekilde bir kullanıma gerek kalmayabilir fakat hareket güzel. 🙂

Denemedim fakat event ataması yapılırken each ile birlikte show / hide belirteci yapılırken farklı eventlar üzerinden event türetimi yapılabilir sanırım.

Centos Linux MYSQL ve Web Dosyaları Yedekleme

VPS ( Virtual Private Server | Özel Sanal Sunucu ) kullanıyorsanız üzerinde de Cpanel, WHM, Vesta, Plesk vb. bir yönetim paneli bulunmuyor ise yedekleme işlemleri biraz zor olabilir. Yedekleme yapabilmek için genellikle manuel işlemler mevcut. MYSQL kullandığımızı düşünürsek PHPMyAdmin üzerinden tüm veritabanını indirmek, PHP kullandığımızı da düşünürsek FTP vb. bir bağlantı ile bağlanıp dosyaları maneul olarak yedeklemek uzun bir senaryo.

Peki biz her gece uyurken yedekler otomatik olarak alınsa ? Daha rahat ve güzel olmaz mı ? 🙂 Okumaya devam et “Centos Linux MYSQL ve Web Dosyaları Yedekleme”

Chrome Javascript ile Barkod / QR Okuyucu Problemi

Standart el terminalleri ve barkod okuyucular ile stok / depo takibi yaptığımız bir sistem üzerinde yeni nesil teknoloji olan QR ( kare kod ) okutma sırasında problemler yaşadık.
Problem el terminalinin QR KOD u okuması sonrasında Chrome üzerinde CTRL+J yapması. Chrome üzerinde indirilenler sayfası açılmakta ve aynı zamanda QR içerisinde New Line yani enter ( \n ) özelliğini pas geçiyordu.

Aşağıdaki Javascript Kod parçacığı ile birlikte bu problemin üstesinden geldik. Bizim canımız yandı sizinkiler yanmasın;


window.document.getElementById( 'collect_seri' ).addEventListener('keydown', function(event)
    {
    	console.log( event );
    	if( event.keyCode == 13 || event.keyCode == 17 ||  event.keyCode == 74 )
		{
			if( event.keyCode == 13 || event.keyCode == 17 )
				$( '#collect_seri' ).val( $( '#collect_seri' ).val()+"\n" );
			if( event.ctrlKey != false )
				event.preventDefault();
			return;
		}
    });

“collect_seri” ID li nesne textarea nesnesidir. Siz problem yaşadığınız nesne veya nesnelere işlem yapabilirsiniz.