How to make Bar Chart in YII Framework (using ext yii.Highcharts)

Hello again everyone, this last few weeks, i’ve been dealing with Graph in Java Web, espescially using D3.js but i’ll share about D3 in my next post may be.

Last time i posted about Yii Framework and now i will add one more post about it. Now, i want to share just a simple post (again) about how to make charts in Yii Framework. Well, may be you notice that i really like to use yii framework to my side-projects (outside of my works in the office building). Yes, i really like it. One of my reason is i can do the things in yii easily and more efficient code. Like one in THIS POST.

Well, back to Highcharts~ On my last projects, turns out that i need to make some graph on it, then, ok i will try some of it. One of the way to make it is using yii extension, and one of the famous one is Yii Highcharts. Well, now i will share about how to using it in my yii projects.

First, we need to download and extract yii.highchart extenstion inside protected/extensions folder. Do not forget to remove the version number in the folder name. Just like this :

Now, we need to modify config/main.php to add yii.highchart extension, on this line :

// autoloading model and component classes
‘import’=>array(
‘application.models.*’,
‘application.components.*’,
‘ext.yii-highcharts.*’,
‘ext.print.*’,
),

then we can use highchart extension like this -> “ext.yii-highcharts.highcharts.HighchartsWidget”

And we’re ready to use our highchart ext.

// BEGIN BAR CHART
$this->widget(‘ext.yii-highcharts.highcharts.HighchartsWidget’, array(
‘options’=>array(
‘chart’=> array(‘defaultSeriesType’=>’column’,),
‘title’ => array(‘text’ => ‘Fruits’),
‘legend’=>array(‘enabled’=>false),
‘xAxis’=>array(‘categories’=>array(‘Apples’, ‘Mangos’, ‘Strawberries’, ‘Grapes’, ‘Oranges’),),
‘yAxis’=> array(
‘min’=> 0,
‘title’=> array(
‘text’=>’Total’
),
),
‘series’ => array(
array(‘data’ => array(10,9,13,15,20))
),
‘tooltip’ => array(‘formatter’ => ‘js:function() {return “<b>”+ this.x +”</b><br/>”+”Fruits : “+ this.y; }’),
‘plotOptions’=>array(‘pie’=>(array(
‘allowPointSelect’=>true,
‘showInLegend’=>true,
‘cursor’=>’pointer’,
)
)
),
‘credits’=>array(‘enabled’=>false),
)
));

And the chart will looks like this :

Also, we can configure more about the chart widgets where you can read more here -> http://www.yiiframework.com/extension/highcharts/

Okay , that’s all. A very very simple post this morning. Btw, i”ve used plugin for syntax highlighter years ago, but looks like it doesn’t appear anymore. T.T

Advertisements

Generate CRUD in Yii Project using Gii

This time, i will share about how to Generate code with Gii – in Yii Framework.

Last time, i got some projects, web based and i decided to use Yii to saved time. Bcz its easier, and provides Crud Generator , so it will make it faster in this short-time project. And, i use yii bcz it’s more familiar for me. And this is just a note for my self so dont hv to browse again.

  1. Make sure you already have database, and make your table. Ex: User
  2. Open URL : http://localhost/[YOUR_PROJECT_NAME]/gii/default/login
    use your login password, that you can find on config folder/ main.php, on this line :
    uncomment this line and just change your password:
    ‘gii’=>array(
    ‘class’=>’system.gii.GiiModule’,
    ‘password’=>’YOURPASSWORD HERE’,
    // If removed, Gii defaults to localhost only. Edit carefully to taste.
    ‘ipFilters’=>array(‘127.0.0.1′,’::1′),
    ),
  3. Click Generate Model -> Fill the texfield with your table name , ex “user” -> Click Preview -> Generate
  4. Click Generate Crud -> Type your model class name -> ex: “User” -> Click Preview -> Generate. When you’re on this step, its done.
  5. Test with access URL : http://localthost/user
    Ups, never let your password shown like that!
  6. Finish! Thanks!

PHP – SQL date Interval – Mendapatkan data transaksi dalam interval waktu tertentu

Oke, singkat aja. Jadi misal dalam web kita ada suatu transaksi, order misalnya, ini contoh query yang bisa digunakan untuk mendapatkan data transaksi dalam rentang waktu tertentu. Kali ini saya ambil berdasarkan field date_approve. Field ini tipe datanya datetime. Saya mau ambil transaksi dalam kurun waktu satu jam terakhir. hehe

cara 1, pake query sql , kaya gini :

$q=mysql_query(“select * from cobadate where date_approve between (now()-interval 1 Hour) AND now() “);
while ($data=mysql_fetch_array($q)){
echo $data[‘date_approve’];
echo “<br>”;

cara 2, pake php dikit, jadi seperti ini :

$last= date(‘Y-m-d H:i:s’, strtotime(‘-1 hour’));
echo $last;

// $db->debug=1;
$q = “select * from cobadate where date_approve > $last”;

while ($data=mysql_fetch_array($q)){
echo $data[‘date_approve’];
echo “<br>”;

Sama saja kok hasilnya, cuma kata temen saya, cara yang pertama agak boros resource 😀  Sekian.

#Selamat Mencoba ^_^

Iseng – preg_replace to get only string and output break by space

Oke, iseng..

jadi ada teman saya yang bertanya, dia punya code seperti ini , dalam java :

String isiSms = “Halo Sayang 67253daripada1875katanya memperkenalkan3356%%^&***&”;
String token = isiSms.toLowerCase();
StringTokenizer hasilToken = new StringTokenizer(token, “1234567890,!@#$%^\n ></˜&*()’><?_+=-{}|:”);
{
while (hasilToken.hasMoreTokens()) //proses tokenizing
{
System.out.println(hasilToken.nextToken()); }
}

maksud dari kode diatas adalah untuk mengambil string saja dari variabel isiSms , menampilkannya menjadi huruf kecil saja dan memisahnya perkata, outputnya :

halo
sayang
daripada
katanya
memperkenalkan

nah, dari barisan code diatas, saya diminta untung men-translatenya dengan menggunakan bahasa php [sedikit keahlian saya]. singkat saja, langsung lihat hasil jadinya, seperti ini :

function string_tokenizer($str){
$kata = strtolower($str);
$ambilstring = preg_replace(‘/([^a-z]+)/i’,’ ‘,$kata);
$isiSMS = strtok($ambilstring,” “);
while($isiSMS){
echo $isiSMS.”<br/>”;
$isiSMS = strtok(” “);
}
}

//panggil function

$str=”Halo Sayang 67253daripada1875katanya memperkenalkan3356%%^&***&”;
string_tokenizer($str);

penjelasan sedikit fungsi diatas,  jadi inputan berupa kalimat yg disimpan di variabel $str.

$kata = strtolower($str);  -> mengubah string yang ada dalam variabel $str menjadi huruf kecil;

$ambilstring = preg_replace(‘/([^a-z]+)/i’,’ ‘,$kata); -> untuk mereplace karakter selain huruf dengan spasi

sudah pernah memakai regex kan? regular expression.. jika belum, silahkan bermain ke http://www.regular-expressions.info/ 🙂

preg_replace itu fungsi di php => preg_replace(patternnya,mau-di-replace-dengan-apa,subject-yg-mau-direplace);

lebih lengkapnya bisa ke php manual nya 😀

jadi untuk : $ambilstring = preg_replace(‘/([^a-z]+)/i’,’ ‘,$kata);

itu pattern ini isinya pattern regexnya => /([^a-z]+)/i -> berarti karakter selain huruf kecil a-z

lalu -> ‘ ‘ -> ini artinya spasi aja , jadi replacementnya adalah spasi, jadi jika ada karakter selain huruf a-z akan diganti dengan spasi.

$kata itu subjectnya, dalam fungsi tsb $kata=strtolower($str). $str disini parameter inputan untuk function string_tokenizer. contoh yg sama masukin pas panggil funcion tadi kan -> “”Halo Sayang 67253daripada1875katanya memperkenalkan3356%%^&***&”;”  function strtolower itu untuk mengubah $str menjadi huruf kecil 😀

yang terakhir itu ada function strtok, nah ini gunanya buat memecah string yang kita punya berdasarkan karalter pemisahnya.

jadi => strtok(“string_yg_akan_dipecah”, “karakter_pemisah”)

dari skrip saya -> $isiSMS = strtok($ambilstring,” “);  -> memecah string yang tekah kita dapatkan dengan karakter pemisahnya adalah spasi.

lalu tinggal kita cetak dalam while loop. selesai ^_^

#selamat mencoba ^_^  Coding Is Fun 😀

Create square thumbnail from any image size with PHP thumbnail class

*sebelumnya mohon maaf ini kalau bahasa saya agak berantakan*

Oke, postingan kali ini adalah berkenaan dengan create thumbnail dengan php thumbnail class.  Dalam suatu web, misal portal berita, atau web seperti http://carapedia.com untuk tampilan list news, kita biasanya nampilin image thumbnail di tampilan list news kita 😀 nah, untuk membuat thumbnail, kita bisa menggunakan Thumbnail.inc.php, itu bisa diambil dari sini aja -> Thumbnail.inc.php *ntah nemu darimana saya, yang jelas web yang saya oprek juga pake class ini*

Itu digunakan untuk membuat thumbnail dari image qt, disitu ada function resize , buat nge-resize image kita sesuai ukuran yang kita inginkan.  Untuk resize image,  dalam function resize ada  parameter maxWidth dan maxHeight.  Didalamnya ada perhitungan rationya, untuk menghasilkan gambar yang proportional. Jadi misalnya gambar 650×325, dengan maxWidth=120, idealnya untuk thumbnailnya adalah 120×60. Ini idealnya berdasarkan rationya.

Nah, maka masalah yang saya temui berdasarkan permintaan yang saya terima dan berdasarkan desain yang saya terima, bahwa image size untuk thumbnail haruslah square dengan ukuran 120×120. Lalu bagaimana? Bila image yang di upload sudah dalam bentuk square tentunya tidak masalah, tinggal pasang maxWidth dan maxHeight-nya 120, namun, ananging, jika image nya bukan pada ukuran square? misal 650×325, maka hasilnya ya tadi, 120×60, bukan square kan?

Lalu bagaimana cara ngakalinnya, emm, saya berputar-putar seharian untuk ini, nanya sama Galuh (temen kuliah saya) dan nanya bang ochi juga (senior programmer saya) dan mereka jawabannya sama. Di crop dulu untuk dapetin square image size, baru di resize.  Ada juga referensi logikanya, disini , bagian :

I want the thumbnail to be representative of the original image. This would be done by resizing the original so that it’s shortest side equalled the desired thumbnail size, while the longest side is worked out by restraining the ratio of the original image. Then, a crop would be taken directly from the center, at the desired thumbnail size, resulting in a pretty good thumbnail™.

Jadi gini nih, logikanya adalah apabila saya punya file image ukuran 650×325, saya akan crop dulu, ada function di thumbnail class untuk CropFromCenter, jadi image d crop dari tengah. Size yang dipilih adalah size minimal dari width dan height, jadi -> cropFromCenter(325); setelah itu baru kita resize sesuai ukuran yang kita inginkan. Hasilnya, kita bisa tepat memiliki image thumbnail dengan ukuran square.

Oke, langsung ke source codenya. Ini nyoba d localhost aja. Pertama, download thumbnail.class.php dulu dari link yang tadi, ini ntar di include. Lalu kita buat function ini :

<?php
include "thumbnail.inc.php";
function createThumbs( $pathToImages, $pathToThumbs, $maxWidth = 120, $maxHeight = 120, $quality=100 )
{
//echo "masuk createThumbs";
//include_once(_DOC_ROOT . "grab/thumbnail.inc.php");
if( is_file($pathToImages) )
{
$thumb = new Thumbnail($pathToImages);
if( $thumb )
{
list($width, $height) = getimagesize($pathToImages); //mendapatkan ukuran image, disimpan di list
$min = min($width, $height); //mendapatkan nilai terkecil dari height/widthnya
cropFromCenter($min); //memotong gambar dari tengah, sesuai ukuran min
$thumb->resize($maxWidth,$maxHeight); ///resize gambar
$thumb->save($pathToThumbs,$quality); //menyimpan gambar
}
else 
return false;
}
else
{
mail("feni@gmail.com","File Not Found $pathToImages", $pathToImages); 
return false;
}
return true;
}
?>

Nah, tinggal pake functionnya itu :

<?
$pathToImages = "img/online.jpg";
$pathToThumbs="thumb/online.jpg";
createThumbs( $pathToImages, $pathToThumbs, $maxWidth = 120, $maxHeight = 120, $quality=100 );

echo "ini image thumbnailnya  

 ";
echo "";
?>

Done, ada img thumnailnya kan? dengan ukuran fix 120×120, square.

Kelemahannya, ya karna image harus d crop kan, jadi ga tampil semuanya, dan kadang hasil cropnya aneh, hahhahaha., tapi paling manusiawi sih ya d crop dari tengah aja :3

Ohiya, sebenernya masih ada solusi kedua sih, yaitu kita main d CSS, ini kata temen kantor saya , programmer dan desainer.  Jadi, image size thumbnailnya dibesarkan, maunya kan 120×120, dibuat lebih dari itu. Trus nanti pas ditampilkan ke web, kita mainkan css, masukkan gambar d box div ukuran 120×120, lalu bila gambar lebih, d overflow:hidden, disembunyikan gitu. Tapi ini juga ada kelemahan, hla gambar yang dulu, yang kurang dari 120×120, yang sekarang kan saya tarik jadi 120×120, tapi kalau pake itu ntar, jadi ada backgorundnya dong? kotak 120×120 diisi gambar 60×80, jadi kaya ada ruang kosong. Dan untuk image yang baru., saya jadi tidak bisa memastikan ukuran eksaknya berapa. Misal saya buat width 150, lalu bila gambar 650×325, ntar gambarnya jadi 150×75, masih kurang kan? heightnya ga masuk. Belum untuk anysize yang lain, bisa aja ada kemungkinan ukurannya lebih kecil. Ini yang jadi masalah, kalo kebesaran sih gapapa :v Maka dari itu saya bingung, jadi gimana? Sampai saat ini sih masih mutusin make yang crop from center dari phpnya, biar pas aja gitu :3 hhe.

Kalau ada wangsit dan nasihat lain, monggo silahkan komen. Terimakasih, senang sekali bila ada yang berkenan memberi pencerahan 🙂

PHP Chacing External Data

Okey, dengan selesainya tasking saya hari ini. Saya mau berbagi sekaligus sebagai dokumentasi saya mengenai sesuatu yang membuat saya galau selama beberapa hari ini. Cache, ya, cache.

Sebernernya simple aja sih ini ya, tapi ini penjelasan panjangnya :

Arti Istilah Cache ~ Suatu tempat untuk menyimpan sesuatu secara sementara, mekanisme untuk mempercepat transfer data dengan cara menyimpan data yang telah di akses di suatu buffer, dengan harapan jika data yang sama akan diakses, akses akan menjadi lebih cepat. Dalam Internet sebuah proxy cache dapat mempercepat proses browsing dengan cara menyimpan data yang telah diakses di komputer yang berjarak dekat dengan komputer pengakses. Jika kemudian ada user yang mengakses data yang sama, proxy cache akan mengirim data tersebut dari cache-nya, bukan dari tempat yang lama diakses. Dengan mekanisme HTTP, data yang diberikan oleh proxy selalu data yang terbaru, karena proxy server akan selalu mencocokkan data yang ada di cache-nya dengan data yang ada di server luar.Dalam terminologi hardware, istilah ini biasanya merujuk pada memory berkecepatan tinggi yang menjembatani aliran data antara processor dengan memory utama (RAM) yang biasanya memiliki kecepatan jauh lebih rendah. Penggunaan cache ditujukan untuk meminimalisir terjadinya bottleneck dalam aliran data antara processor dan RAM. Sedangkan dalam terminologi software, istilah ini merujuk pada tempat penyimpanan sementara untuk beberapa file yang sering diakses (biasanya diterapkan dalam network)Berasal dari kata cash, dipergunakan untuk meningkatkan kecepatan transfer data baik secara sementara maupun permanent.

Singkatnya, biar webnya lebih ringan aja, jadi pas pertama ngeload, kita simpen d cache, jadi pas ngeload lagi, datanya kita ambil dari cache, jadi gak realtime. Ini biasanya buat data2 yang jarang berubah2, misalnya, list2 gt, dan biasanya query2nya. seperti yang diterapkan di beberapa web yang saya urus 😀

Lalu, jikalau itu simple, lalu kenapa saya sampai galau ? hingga 3 hari pula? Nah, itu dia, kalo d sini, kebanyakan fungsi2nya itu sudah ada. Pakenya apc_cache, apa itu ya? monggo browsing 😀 Yang bikin galau itu, fungsi yang udah ada gak bisa jalan, setelah saya telusur dengan berbagai alternatif, kmd saya trace dsb, kok masih ndak bisa, nasib deh. Ada juga yang d lokal bisa, ntar setelah q upload ndak bisa jalan, ya kalo ini mungkin settingan d bawah sama d atas beda kan ya. cari2 lagi dan ketemulah kalo , d sini, apc cache nya emang ndak aktif.. oalah nduukk, sakne eram :v nah, setelah ketemu dan mutung, jadi saya buat skrip baru aja. Pake cache biasa aja, jadi kita simpen dalam file.

Ceritanya disini, saya mau nge-cache data external. Jadi pada pada halaman web itu , ada tampilan counter untuk facebook dan twitter. Kalo realtime, harus load dulu dari fb dan twitter kan berat. Jadi disimpen d cache, trs d update setiap 6 jam sekali ;

<?php

	$age=3600; //lifetime cache in seconds ~ 1 jam ini, terserah mau dibuat berapa 😀
	$cacheName= "cache/twitcountde.txt"; //nama file cache, itu aq taruh d dalem folder cache/namacachenya, aq simpen d txt
	if ( !file_exists($cacheName) || (filemtime($cacheName) + $age  <  time() )) { 	
//ini jika file dg nama $cacheName tidak ada ATAU waktu lifetime cache nya abis, jadi dia ngegraph  		$graph = 'http://twitter.com/users/show/lovelycode_'; // url to graph 		
$data	= file_get_contents( $graph ); //get content dari  		
$arr = new SimpleXMLElement ( $data );  		
$count = $arr->followers_count; //ambil jumlah followernya aja 
fwrite(fopen($cacheName, "w"), $count); //ini write ke file cache tadi, isinya $count --> jumlah follower tadi, atau bisa juga kan pake file_pu_contents
	}
	echo " ini jumlah follower twitter"; 
	readfile($cacheName); //ini buat nampilinn hasilnya, bisa juga pake operasi file
	echo "

";
	echo "time+age";
	print(time() + $age); //nyetak time + age nya
	echo "
";
	echo "filemtime";
	print(filemtime($cacheName));  //ini filemtime ini, time pas cache nya d buat

Nah,  penjelasan dikit,logikanya, filemtime kan time saat file cache nya dibuat, time itu waktu realtime saat ini , age itu umurnya. jadi misal filemtimenya pas time 100,  misal agenya 50,  lalu time nya kan jalan, saat time>filemtime+age, artinya time nya udah lebih dari 150,  habis kan lifetime nya? nah, itu ntar dia ngeload lagi.

nah itu saya coba d hosting lokal sudah bisa 😀 selamat mencoba ~~~ 😀