4 Eylül Çarşamba ´13   —   5 Yorum
Yeni bir web projesine başlarken Twitter Bootstrap'ı kullanmamak, artık zaman kaybı anlamına gelmişken, her gün, bootstrap'ın uzantısı olan bir çok ufak proje, arayüz eklentisi, tema vs çıkıyor.

Bootstrap ekibi de, çoğunlukla mobil ve responsive özellikleri geliştirilmiş olarak, görsel olarak da son dönemdeki flat design akımına uyarak yeni bir sürüm çıkardılar.

Görsel olarak hâlâ flat design akımının günümüze hazır olmadığını düşünsem de, fonksiyonellik açısından iyi bir gelişme olarak görüyorum. Bootstrap da buna uygun doğru bir hamle yaptı diyebiliriz. Beni en sevindiren tarafı ise, daha mobil dostu olması. Önceki sürümleri de mobile uyumlu idi fakat sitenizi hem mobil hem masaüstü için uyumlu yaparken, birçok ufak düzeltme yapmak durumunda kalıyordunuz. Bu sürümde ise mobil, öncelik haline gelmiş ve masaüstü ikincil planda desteklenmiş.

Yeni sürümü şuradan deneyebilir ve yeniliklerini görebilirsiniz:http://getbootstrap.com

Güncelleme: Şuradaki:http://www.designshock.com/bootstrap-3-psd Photoshop UI Kit'ini kullanarak tasarımları da bootstrap ile şekillendirebilirsiniz kodlamadan önce.
16 Nisan Salı ´13   —   8 Yorum
Artık kimse bir çatı (framework) kullanmadan web uygulaması yazmıyor. Kim hammaliye işlerle boğuşarak zaman kaybetmek ister ki. Bütün çatıların odağı yapacağınız işleri kolaylaştırmaktır, daha az kod daha çok iş. Çoğunlukla da bir ton güzellikle gelirler, vertiabanı katmanları, imaj işleyiciler, dosya yöneticileri, şablon motorları vs.

Basit bir web uygulaması hazırlıyor ve topu topu 3-5 farklı varış noktası olan bir uygulama yazıyorsanız, tek ihtiyacınız olan şey bir kod navigasyonudur, gerisi işinizi kolaylaştıracak kütüphanelerdir fakat bir çatının tüm elementlerini kullanmak istemeyebilirsiniz veya sadece ufak bir yardımcı kütüphane yetecek bir uygulama yazıyor olabilirsiniz. Örnegin sadece xml işleyen bir api hazırlıyorsunuz. Tek ihtiyacınız genel kod navigasyonunu halledecek bir yardımcı ve xmlinizi işleyeceğiniz bir kütüphane.

Bu yazıda Slim adında minimalist bir php çatısını kısa bir örnek kod ile tanıtacağım. Slim, altı üstü, hata ayıklama, oturum yönetimi ve çok basit bir şablon mekanizmasından oluşuyor. Şablon motoru bile değil, sadece yardımcı. Aşağıdaki kodda ikinci varış noktası tanımlamasında görebilirsiniz şablon kullanımını.

Çok detaya girmeye gerek yok kod zaten kendini anlatıyor :-)
$app = new \Slim\Slim();

$app->get('/hello/:name', function ($name) {
    echo "Hello, $name";
});

$app->get('/books/:id', function ($id) use ($app) {
    $app->render('books.php', array('id' => $id));
});

$app->notFound(function () {
	die("We couldn't find what you looking for.");
});

$app->run();
Slim'e istediğiniz şablon motorunu entegre edebilirsiniz.

Slim'ehttp://www.slimframework.com adresinden ulaşabilirsiniz. Dökümantasyonu çok detaylı değil fakat zaten çok detaya da ihtiyacınız olmayacak.
NoSQL vertiabanı motorları son yıllarda çok popülerleşti, çünkü yapısız olmalarından dolayı daha kolay mimari değişiklik yapabileceğiniz veri yapıları olduğu için tercih edilmeye başladı. Ölçeklenebilirlik de klasik sql veritabanlarının sınırlı ve geleneksel kaldığı konulardı. NoSQL çıkışı kesinlikle modern bir çözüm olarak görülebilir.

İnternette bir çok karşılaştırma, performans analiz yazıları bulabilirsiniz sql ve nosql veritabanları hakkında. Ancak her yere uyan mükemmel bir çözüm yok. Benim gördüğüm kadarıyla, hibrid ve akıllıca kurgulanarak dengelenmiş ve dağıtılmış sistemler en yaygın kullanımlar. Yani bazı şeyleri nosql ile daha zor ve daha çok kodlama zamanı harcayarak yapabilir, bazı şeyleri de sql ile yönetemez ve yapamazsınız.

Daha teknik konulara giriyorsanız zaten bu yazıdan daha çoğuna ihtiyacınız var :-) Bu yazı daha çok mongo'ya giriş ve flörtleşme dönemi hakkında.

Eğer MongoDB'yi denemek istiyorsanız, mongodb sunucusunu bilgisayarınıza yüklemek zorunda değilsiniz. Kurulumu da çok zor değil fakat sadece denemek için sunucu kurulumu konfigurasyonu gibi şeylerle uğraşmak zorunda değilsiniz. Sadece istemci sürücülerini kurmanız yeterli. Bu konu hakkında mongodb dökümantasyonundakihttp://docs.mongodb.org/ecosystem/drivers/php/ sayfasını inceleyebilirsiniz.

MongoLab adında bağımsız bir servis sayesinde ücretsiz bir mongo veritabanı oluşturabilir ve denemelerinizi onun üstünde yapabilirsiniz. MongoLab veritabanı ve kullanıcınızı oluşturduktan sonra açık erişim izni veriyor. Dolayısıyla php'den veya herhangi diğer bir ortamdan doğrudan erişebiliyorsunuz.

Tabi ki servisin amacı mongo denemek isteyen insanlara servis sunmak değil. MongoLab bulut veritabanı servisi. Veri dosyalarının saklanmasını istediğiniz alt servisi (Amazon, Rackspace, Windows Azure vs...), hatta yüzeysel de olsa bölge seçebiliyorsunuz (Amerika veya Avrupa veya uzak doğudaki bir veri merkezi şeklinde).

MongoLab 500mblık bir alanı ücretsiz sağlıyor. Diğer sınırlamalarını bilmiyorum fakat ufak projeleriniz için veya deneme yapmak için ideal. Eğer uygulamanız çok veri kullanmaya başlarsa küçük, büyük paketleri veya kurumsal hizmetlerinden faydalanabilirsiniz.

MongoLab ile tamamen php mongo eklentisi bağımlılığından da kurtularak doğrudan servisin basit REST apisini kullanabilir ve tek başına çalışan bir uygulama yazmanız da mümkün.

Konumuz mongo iken, birkaç php-mongo interaksiyonunu denediğim bir php dosyasının kodunu doğrudan vermek istiyorum.
<?php

$mongo = new Mongo("mongodb://dbuser:dbpassword@*.mongolab.com:45297/test_database");
$db = $mongo->selectDB("test_database");

$action = isset($_GET['action']) ? $_GET['action'] : NULL;

?>
	<ul>
		<li><a href="?action=create_collection&name=test_collection_<?=rand(1,10000);?>">Create a test collection</a></li>
		<li><a href="?action=list_collections">List collections</a></li>
		<li><a href="?action=add_record_to_nonexistent_collection">Add record to non existent collection (it creates the collection)</a></li>
		<li><a href="?action=add_user">Add a user</a></li>
		<li><a href="?action=find_fatih">Find Fatih</a></li>
		<li><a href="?action=search_user">Search user</a></li>
	</ul>
<?php

switch ($action) {
	case 'create_collection':
		$name = isset($_GET['name']) ? $_GET['name'] : 'users';
		var_dump($db->createCollection($name, FALSE));
		exit;
		break;

	case 'list_collections':
		$_collections = $db->listCollections();

		print '<h3>Collecitons</h3>';
		foreach ($_collections as $collection) {
			print $collection . '<br />';
		}

		break;

	case 'add_user':
		$name = isset($_GET['name']) ? $_GET['name'] : 'test_user_' . rand(1, 100000);

		$users = $db->users;
		$result = $users->insert(array(
			'username'   => $name,
			'created_at' => date('Y-m-d H:i:s')
		));

		print '<h3>Result:</h3>';
		var_dump($result);
		exit;
		break;

	case 'add_record_to_nonexistent_collection':
		$collection = isset($_GET['name']) ? $_GET['name'] : 'collection_' . rand(1, 100000);

		// it creates the collection even if not exists.

		$collection_obj = $db->$collection;
		$result = $collection_obj->insert(array(
			'test' => 1,
			'time' => time()
		));

		print '<h3>Result:</h3>';
		var_dump($result);
		exit;
		break;

	case 'find_fatih':
		$users = $db->users;
		$result = $users->findOne(array("username" => 'fatih'));

		print '<h3>Fatih?</h3>';
		var_dump($result);
		exit;
		break;

	case 'search_user':
		$users = $db->users;
		$result = $users->find(array("username" => array('$regex' => 'test_')));

		print '<h3>Users:</h3>';
		foreach ($result as $_result) {
			var_dump($_result);
		}
		exit;
		break;

	default:
		break;
}
İlk satırlarda göreceğiniz dsn'i mongolab'den edineceğiniz sunucu adresi ve portunu (tahminimce her kullanıcı için farklı olma durumu var), veritabanı kullanıcı adınız ve şifrenizi belirterek tek parça string şeklinde belirttiginiz takdirde bağlantı sağlayabileceksiniz.

Mongo, küçük uygulamalarda veri düzeni zorunluluğu olmadığı için kullanması çok keyifli, fakat verinizi dökümante etmeyi unutmayın. Yoksa neyin ne olduğunu unutur veya ipin ucunu kaçırarak karmaşık bir veri yığını elde edebilirsiniz günün sonunda.

MongoDB dökümantasyonunu inceleyerek indeksleme, sorgulama ve veri yönetimi nasıl yapılıyor fikir edinebilirsiniz. Ayrıca php manual'daki bazı SQL örneklerinin php ile mongo sınıfında nasıl yapıldığını gösteren bu sayfayı:http://php.net/manual/en/mongo.sqltomongo.php incelemekte fayda var.

MongoLab servisinin adresihttps://mongolab.com
Bu form elementinin diğer ortamlardaki adını bilmiyorum ama cocoa'daki (macosx işletim sistemini doğal arayüz kütüphanesi) adı segmented control. Bu yüzden, yazının devamında segmented control olarak kullanmaya devam edeceğim.

iOS arayüzlerindeki on/off swtich'lerini biliyorsunuzdur, geçtiğimiz 2 yılda web'deki implementasyonları o kadar artti ki, artık her yerde basit bir javascript kütüphanesi olarak bu form elementini bulmak mümkün. Sadece javascript değil css implementasyonları da var. Bu yazıda, bu elementin teorisine biraz değineceğim. Ayrıca benim kullandığım method, javascriptin çalışmadığı tarayıcılarda da sorunsuz çalışacak (fallback) hatta css desteklemeyen taryıcılarda dahi fonksiyonalitesini bozulmadan koruyacak standart input, label elementleri ile bunu nasıl yapabileceğinizi anlatacağım.

Ama görsel olarak neyden bahsettiğimi göstermem gerekirse:



Gördüğünüz gibi aslında standart bir çoktan seçmeli tek cevap sorularından bahsediyorum. Bunun için standart form elementlerinden radio butonu kullanarak cevapları tek grup altında label ve input elementleriyle bir formda toplayalım.

Devamını Oku →

Popüler Etiketler

gimp howto form button jquery chart api google grafik blog rss developer generator compile nedir link plugin ui ux login css3 webkit wordpress assets javascript css framework mootools linux konsol less compiler macosx windows app on-the-fly twitter bootstrap db database service free apple iphone ipad kontrol yapıları if while firefox applications örnek kod php html mysql sql optimizasyon analyse procedure export tool code cms social media mssql radio switch pear mdb2 prepare execute pgsql js workspace xhtml job wanda digital medya integration network facebook connect ipucu htaccess url query select osx player mfyz box apache server coding object session newsletter mail cookie calendar ide editor phpstorm jetbrains deployment version control svn git design download portfolio icon ikon banner logo terminal lifestream dokuman pharma hack seo sosyal istatistik statistics graph subscription input textarea kurulum nasıl ubuntu ntfs fstab xml date tarih cache mobile startups browsers support internet zaman iOS web app music xmlhttprequest ajax search language proje wireless html5 table kitap style ie browser injection ios app store store in-app purchase purchase verification storekit itunes connect itunes doritos tytz share meta insanlar www subdomain redirect crossdomain subversion mod_rewrite imza signature diff parse spam opengraph http auth internet explorer notebook laptop lisans license ruffles widget regex optimization route router tebrik screen fql oyun sitemap development open source icons kampanya