Zack Notes
30+ PHP Best Practices for Beginners (1)
Written by Zack Sunday, 25 July 2010 14:25
ကြၽန္ေတာ္ nettuts မွာ "30+ PHP Best Practices for Beginners" ဆိုတဲ့ article တစ္ခုကိုဖတ္လိုက္ ရတယ္။ ဒါေၾကာင့္ အားလုံး
လဲသိသြား ရေအာင္ ျပန္လည္ေဝမ်ွ လိုက္ပါတယ္။ ၾကိဳျပီး ေျပာထားခ်င္တာ တစ္ခုက author ေရးထားတဲ့ အတိုင္း ဘာသာျပန္ေရးရင္
ေထာက္ေနလို႕ ဖတ္လို႕ အဆင္ေျပေစရန္ အနည္းငယ္ ျပင္ျပီး ေရးလိုက္ပါတယ္။
1. Befriend the PHP Manual
PHP Developer သမားတိုင္း အတြက္ အေကာင္းဆုံး reference လုပ္ႏိုင္တဲ့ php.net က officially လုပ္ေပးထားတဲ့ manual ပဲျဖစ္
ပါတယ္။ PHP မွာ သုံးေနတဲ့ function တိုင္းရဲ႕ manual usage ကို အဲဒီမွာ ဖတ္ႏိုင္ပါတယ္။ ဒီ manual ကိုဖတ္မယ္ ဆိုရင္ေတာ့ ေအာက္
ကေပးထားတဲ့ comment ေတြကိုလည္း ေသခ်ာ ဖတ္ၾကည့္သင့္ပါတယ္။ တစ္ခါတစ္ရံမွာ ကိုယ္ၾကဳံေနရတဲ့ ျပသနာက တျခားသူ တစ္ေယာက္
ၾကဳံျပီးသား ဆိုရင္ေအာက္က comment ေတြမွာရွိႏိုင္တယ္။ အနီးစပ္ဆုံးကေတာ့ PHP 5.3 Deprecated ျဖစ္တဲ့ functions ေတြမွာ ရွိေနတဲ့
ေအာက္က comment ေတြက အဖိုးတန္တယ္။ Download လုပ္ျပီး ဖတ္ခ်င္ရင္ေတာ့ http://php.net/download-docs.php
2. Turn on Error Reporting
ကြၽန္ေတာ္တို႔ coding ေရးေနတဲ့ development time မွာ Error Reporting ေတြကို On ျပီးေရးသင့္တယ္လို႕ သူကဆိုပါတယ္။ ဟုတ္ပါတယ္
ဒါမွ ကိုယ္ေရးတဲ့ program ထဲမွာ ရွိေနတဲ့ errors ေတြ၊ bugs ေတြ၊ warning ေတြကို deployment မလုပ္ခင္ရွင္း သင့္ပါတယ္။ PHP ရဲ႕
error reporting မွာ ERROR ကိုျပမွာလား? WARNING ကိုျပမွာလား? NOTICE ကိုျပမွာလား? ဆိုျပီး အဆင့္ေတြရွိေပမယ့္
error_reporting(E_ALL); ON ဆိုရင္ေတာ့ ရွိသမ်ွ PHP Errors ေတြအားလုံးကို ျမင္ရမွာ ျဖစ္ပါတယ္။ Error Reporting Manual ကို
ဒီ link မွာ ဖတ္ၾကည့္ႏိုင္ပါတယ္။ ဒီ Error Reporting ေတြကို php.ini ထဲမွာလည္း config လုပ္ႏိုင္တယ္ဗ်။ ကြၽန္ေတာ္ကေတာ့ php.ini
ထဲမွာပဲ လုပ္ေလ့ရွိပါတယ္။ အေရးၾကီးတာက production မွာ live သြားေတာ့မယ္ ဆိုရင္ေတာ့ ဒီ Error Reporting ေတြကို OFF ျပန္လုပ္
ေပးဖို႔ ေတာ့လိုပါတယ္။
3. Try an IDE
Author က IDE တစ္ခုခုနဲ႔ ေရးသင့္တယ္လို႕ ေျပာေသာ္လည္း စစခ်င္းမွာ IDE သုံးျပီးေရးမယ္ဆိုရင္ function name မွတ္စရာ မလိုေတာ့ပဲ
အပ်င္းၾကီးသြားႏိုင္ တယ္လို႕ ကြၽန္ေတာ္ ျမင္ပါတယ္။ IDE ေတြကေတာ့ syntax highlighting, code completion, error warnings,
re-factoring (reworking) features ေတြရလို႕ coding ေရးရတာ ပိုျပီးလြယ္ကူ ျမန္ဆန္ပါတယ္။ နာမည္ၾကီး IDE ေတြရဲ႕ Feature ေတြကို
ဒီ link မွာ ဆက္ဖတ္ႏိုင္ပါတယ္။ ကြၽန္ေတာ္ အၾကံျပဳခ်င္တာ ကေတာ့ Advanced Text Editor ေတြကိုလည္း သုံးၾကည့္သင့္ပါတယ္။
4. Try a PHP Framework
PHP Framework ေတြကိုသုံးမယ္ ဆိုရင္ေတာ့ ျမန္ျမန္ဆန္ဆန္နဲ႔ application တစ္ခုကို လုပ္ႏိုင္ပါတယ္။ နာမည္ၾကီး PHP Framework
ေတြကေတာ့ Codeigniter, CakePHP, Symfony, Zend ျဖစ္ျပီး ကိုယ္နဲ႔သင့္ေတာ္မယ္ ထင္တာကို ေရြးခ်ယ္သုံးႏိုင္ပါတယ္။ ဒီ link မွာ
ၾကည့္မယ္ ဆိုရင္ေတာ့ PHP Framework ေတြရဲ႕ List ေတြကို ျမင္ရပါမယ္။ Beginner ေတြအေနနဲ႔ ကေတာ့ Framework ေပၚမွာ မေရး
သင့္ေသးဘူးလို႕ ထင္ပါတယ္။ Framework ေတြကိုစျပီး လုပ္ခ်င္သူေတြကို ကြၽန္ေတာ္ အၾကံျပဳခ်င္တာကေတာ့ Codeigniter ဟာစရတာ
လြယ္ပါလိမ့္မယ္။
5. Learn the DRY Approach
DRY ဆိုတာကေတာ့ Don’t Repeat Yourself ပဲျဖစ္ပါတယ္။ ကြၽန္ေတာ္လည္း ဒီအေခၚအေဝၚကို ဒီ article ကိုဖတ္လိုက္ေတာ့မွ သိသြား
တာျဖစ္ပါတယ္။ PHP မွ မဟုတ္ပဲ တျခားဘယ္ Programming Languages မွာ မဆို code ေတြဟာ DRY Approach ျဖစ္ဖို႔၊ redundant
code ေတြမျဖစ္ဖို႔ကို ေရွာင္ၾကဥ္ေသာက္သင့္ပါတယ္။ DRY Approach ကိုေတာ့ ဒီမွာ ဆက္ဖတ္ၾကည့္ႏိုင္ပါတယ္။
http://en.wikipedia.org/wiki/Don't_repeat_yourself
http://www.artima.com/intv/dry.html
6. Indent Code and Use White Space for Readability
ဟုတ္ပါတယ္ coding ေရးတဲ့အခါ ညီညာတဲ့ Indent ေတြ၊ White Space ေတြနဲ႔ဆိုရင္ေတာ့ ေနာက္ပိုင္း ျပန္ျပီး maintain လုပ္ရတာလဲ
အဆင္ေျပရပါတယ္။တကယ္လို႕ IDE ေတြသုံးမယ္ ဆိုရင္ေတာ့ alignment ေတြ auto adjust လုပ္ေပးတဲ့ အတြက္ ေရးရတာ ပိုေကာင္း
ပါတယ္။ Author ကေတာ့ Indent Code and Use White Space မရွိတဲ့ Coding ေတြကို Jackson Pollock painting နဲ႔ ခိုင္းႏႈိင္းကာ
ေျပာသြားပါတယ္။ Jackson Pollock paintingဆိုတာကို ဗဟုသုတ အေနနဲ႔ ၾကည့္လို႕ရေအာင္ ေအာက္မွာ ထည့္ေပးထားပါတယ္။
7. “Tier” your Code
Coding ထဲမွာ HTML ဆိုရင္ HTML သက္သက္၊ JS ဆိုရင္ JS သက္သက္၊ PHP Code ဆိုရင္ PHP Code သက္သက္ Tier ေတြခြဲထား
သင့္ပါတယ္။ Tier ေတြဘယ္လို႕ခြဲထုတ္လဲ ဆိုတာကို ဒီမွာ ဖတ္ၾကည့္ႏိုင္ပါတယ္။ ကြၽန္ေတာ္လည္း အဲဒီ article ကိုျပန္ေရးဖို႔ အစီအစဥ္
ရွိပါတယ္။
8. Always Use <?php ?>
PHP မွာ <? echo "Hello world"; ?>
<?="Hello world"; ?>
စသည္ျဖင့္ ႐ိုက္ႏိုင္ေပမယ့္ author ကေတာ့ အျမဲတမ္း <?php ?> ထည့္ေပး သင့္တယ္လို႕ ဆိုပါတယ္။ ကြၽန္ေတာ္ အေတြ႔အၾကဳံအရ
short tag ေတြကို on ထားမွ အေပၚမွာျပထားတဲ့ code ေတြက အလုပ္လုပ္မွာ ျဖစ္ပါတယ္။ ဒီမွာေတာ့ short open tag အေၾကာင္းေရး
ထားတာ ရွိပါတယ္။ <?php ?> လို႕ေရးရင္ေတာ့ open tag ဘာပဲျဖစ္ေနျဖစ္ေန အလုပ္လုပ္မွာ ျဖစ္တာေၾကာင့္ author က standard
အေနနဲ႔ ေျပာတာ ျဖစ္ပါလိမ့္မယ္။
9. Use Meaningful, Consistent Naming Conventions
Variable name, Class Name, function name, object name ေတြကို အမည္ေပးတဲ့ အခါ အဓိပၸါယ္ရွိေသာ name ေတြကိုသာ ေပးသင့္
ပါတယ္။ ဒါမွကိုယ့္ code ကိုကိုယ္ပဲ ျပန္ဖတ္ဖတ္ သူမ်ားပဲလာဖတ္ဖတ္ အလြယ္တကူ နားလည္ႏိုင္မွာ ျဖစ္ပါတယ္။
10. Comment, Comment, Comment
ကိုယ့္ code ကိုေနာက္တခ်ိန္ ကိုယ့္ဟာကိုယ္ပဲ ျပန္ဖတ္ဖတ္၊ သူမ်ားက ဆက္ျပီး maintain လုပ္ဖို႔ ဖတ္ဖတ္ indent ေတြ၊ white space ေတြ
အျပင္အေရးၾကီးတဲ့ ေနရာေတြမွာ comment ေတြရွိေနမယ္ဆိုရင္ အရမ္းကိုေကာင္ပါတယ္။ ဒါေၾကာင့္ စနစ္တက် comment ေပးတတ္တဲ့
အက်င့္ေလးကို လုပ္သင့္ပါတယ္။ ဘယ္ programming languages မွာမဆို စနစ္တက် သန္႔သန္႔ ရွင္းရွင္း ေရးတတ္တာ အလြန္ေကာင္းမြန္တဲ့
အက်င့္ပဲ ျဖစ္ပါတယ္။ကြၽန္ေတာ္လည္း ပ်င္းလာရင္ ျဖစ္ေစ၊ dead line အရမ္နီးလာရင္ ျဖစ္ေစ code ေတြကို dirty ျဖစ္ေအာင္ေရးတက္တဲ့
အက်င့္ကို ျပင္ဖို႔ ဒီ article ကိုေရးရင္ သတိဝင္လာပါတယ္။ စုစုေပါင္း ၃၂ ခ်က္ရွိေပမယ့္ ဒီ post မွာေတာ့ ဒီေလာက္နဲ႔ပဲ ခဏရပ္ခ်င္ပါတယ္။
Google Chart API Part - 3 (or) Events on Interactive Charts
Written by Zack Thursday, 22 July 2010 00:03
ဒီ Post ကိုဖတ္မယ္ ဆိုရင္ေတာ့ ျပီးခဲ့တဲ့ ဒီ post ႏွစ္ခုကို ျပန္ဖတ္ဖို႔ လိုပါတယ္။
ဒါမွ အဆက္အစပ္ေလး ရွိသြားျပီး ပိုျပီး သေဘာေပါက္သြား မွာျဖစ္ပါတယ္။ ဒီ Post မွာ အဓိက ေျပာခ်င္တာကေတာ့ user event ေတြကို
ဘယ္လိုထည့္ မလဲ ဆိုတာျဖစ္လို႕ အဲဒီေနရာေလးေတြကိုပဲ အဓိကထား ေရးပါမယ္။ တကယ္လို႕ တစ္ခုခု မသိတာ ရွိရင္ေတာ့ ေရွ႕က post
ႏွစ္ခုကို ျပန္ဖတ္လိုက္ပါ။ အရင္ post ေတြမွာတုန္းက လုပ္ထားတဲ့ charts ေတြကို event ေတြဘယ္လို ေပါင္းထည့္မလဲ ဆိုေလးၾကည့္ ရေအာင္။
ဒီပုံကေတာ့ ျပီးခဲ့တဲ့ example က event မပါေသးတဲ့ column chart ေလးေပါ့။
google.visualization.events.addListener(chart, 'onmouseover', showDetails);
mouseover event ကိုေပါင္းထည့္မယ္ ဆိုရင္ေတာ့ ဒီ code ေလးကို အရင္ထည့္ ေပးရမယ္။
parameters ေတြကိုၾကည့္မယ္ ဆိုရင္
chart က chart object name ကိုဆိုလိုျပီး 'onmouseover' ကေတာ့ event trigger အတြက္ပါ။ ေနာက္ဆုံး showDetails ကေတာ့
mouseover လုပ္တဲ့ အခါ run မယ့္ function ပဲျဖစ္ပါတယ္။ google.visualization.events.addListener(chart, 'onmouseout', hideDetails); function showDetails(e) {
mouse over ျပီးရင္ေတာ့ mouse out ေလးလဲလိုေသးတာေပါ့။ ဒီလိုေလး ေရးလိုက္ရင္ ရပါျပီ။
အိုေက ... ဒါဆိုရင္ ကြၽန္ေတာ္တို႔ showDetails နဲ႔ hideDetails ကိုဆတ္ေရးလိုက္မယ္။
switch (e['row']) {
case 0: document.getElementById('details0').style.visibility='visible';
break;
case 1: document.getElementById('details1').style.visibility='visible';
break;
case 2: document.getElementById('details2').style.visibility='visible';
break;
case 3: document.getElementById('details3').style.visibility='visible';
break;
}
}
function hideDetails(e) {
switch (e['row']) {
case 0: document.getElementById('details0').style.visibility='hidden';
break;
case 1: document.getElementById('details1').style.visibility='hidden';
break;
case 2: document.getElementById('details2').style.visibility='hidden';
break;
case 3: document.getElementById('details3').style.visibility='hidden';
break;
}
}
CSS ရဲ႕ style.visibility ကို ကစားသြားတာပဲ ျဖစ္ပါတယ္။ အဲဒါ ျပီးရင္ေတာ့ <body></body> ႏွစ္ခုၾကားမွာ ဒီ div ေလးေတြကို
ထည့္ေပးဖို႔ လိုပါတယ္။ ဒါမွ showDetails နဲ႔ hideDetails က style.visibility ကို ကစားတဲ့ အခါ အလုပ္လုပ္မွာ ျဖစ္ပါတယ္။ <body>
<!--Div for our chart -->
<div id="chart"></div>
<!--Divs for our messages -->
<div id="details0">These are the details for Q1...</div>
<div id="details1">Here you have the numbers for Q2...</div>
<div id="details2">Explanations for the third quarter...</div>
<div id="details3">Q4 was as expected...</div>
</body>
ဒီေနရာမွာ တစ္ခုသတိထား ရမွာက div ရဲ႕ id ေတြနဲ႔ showDetails နဲ႔ hideDetails ထဲက getElementById မွာ ေခၚထားတဲ့ id ေတြတူဖို႔
လိုပါတယ္။ ဒီ code ကို copy ကူးျပီး စမ္းခ်င္တယ္ ဆိုရင္ေတာ့ <html>
<head>
<title>Google Chart Tools Tutorial</title>
<style type="text/css">
#details0, #details1, #details2, #details3 {
visibility:hidden;
background: #FFFF7F;
border: solid 1px;
width: 350px;
padding: 5px;
font-size:smaller;
position:absolute;
top: 250px;
}
</style>
<!-- load Google AJAX API -->
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
//load thee Google Visualization API and the chart
google.load('visualization', '1', {'packages': ['columnchart']});
//set callback
google.setOnLoadCallback (createChart);
//callback function
function createChart() {
//create data table object
var dataTable = new google.visualization.DataTable();
//define columns
dataTable.addColumn('string','Quarters 2009');
dataTable.addColumn('number', 'Earnings');
//define rows of data
dataTable.addRows([['Q1',308], ['Q2',257],['Q3',375],['Q4', 123]]);
//instantiate our chart objects
var chart = new google.visualization.ColumnChart (document.getElementById('chart'));
//define options for visualization
var options = {width: 400, height: 240, is3D: true, title: 'Company Earnings'};
//draw our chart
chart.draw(dataTable, options);
//register callbacks
google.visualization.events.addListener(chart, 'onmouseover', showDetails);
google.visualization.events.addListener(chart, 'onmouseout', hideDetails);
}
function showDetails(e) {
switch (e['row']) {
case 0: document.getElementById('details0').style.visibility='visible';
break;
case 1: document.getElementById('details1').style.visibility='visible';
break;
case 2: document.getElementById('details2').style.visibility='visible';
break;
case 3: document.getElementById('details3').style.visibility='visible';
break;
}
}
function hideDetails(e) {
switch (e['row']) {
case 0: document.getElementById('details0').style.visibility='hidden';
break;
case 1: document.getElementById('details1').style.visibility='hidden';
break;
case 2: document.getElementById('details2').style.visibility='hidden';
break;
case 3: document.getElementById('details3').style.visibility='hidden';
break;
}
}
</script>
</head>
<body>
<!--Div for our chart -->
<div id="chart"></div>
<!--Divs for our messages -->
<div id="details0">These are the details for Q1...</div>
<div id="details1">Here you have the numbers for Q2...</div>
<div id="details2">Explanations for the third quarter...</div>
<div id="details3">Q4 was as expected...</div>
</body>
</html>
ဒါကေတာ့ ျမင္ရမယ့္ ပုံပါ။
ဒီ link မွာလည္း စမ္းၾကည့္ ႏိုင္သလို အရင္ event trigger မထည့္ခင္က chart ကိုလည္း ဒီမွာ ျပန္ၾကည့္ႏိုင္ပါတယ္။
တကယ္လို႕ Charts API ကိုစိတ္ဝင္စားလို႕ ေဆာ့ၾကည့္ခ်င္ သူမ်ား Google Code Playground မွာ ဝင္ေၾကးေပးစရာ မလိုပဲ ကစား
ၾကည့္ႏိုင္ပါေၾကာင္း ေျပာရင္ ကြၽန္ေတာ့္ Google Charts API ကေတာ့ နိဂုံးခ်ဳပ္ သြားပါျပီ။
Ref: http://net.tutsplus.com/tutorials/other/easy-graphs-with-google-chart-tools/
Google Chart API Part -2 (or) Interactive Charts
Written by Zack Wednesday, 21 July 2010 15:16
Interactive Charts
Google Visualization API ကိုသုံးျပီး Interactive Charts ေတြကိုဖန္တီး ႏိုင္ပါတယ္။ ျပီးခဲ့တဲ့ post ကေရးခဲ့တဲ့ static chart လိုေတာ့
URL ကေန run တာမ်ိဳးမဟုတ္ပဲ JavaScript Library သုံးျပီး charts ေတြကို ဖန္းတီးတာမ်ိဳး ျဖစ္ပါတယ္။ ဒီ link မွာေတာ့ ရွိျပီးသား
ယူသုံးႏိုင္တဲ့ ready made visualizations graphs ေတြေတြကို ၾကည့္ႏိုင္ပါတယ္။ ကိုယ္ဟာကို လုပ္ခ်င္တယ္ဆိုလဲ လုပ္ႏိုင္ေပမယ့္
သူရွိျပီးသား graphs ေတြေတာင္ ေတာ္ေတာ္စုံ ေနတာကို ေတြ႔ရတယ္။ example ေလးကို ဆက္ၾကည့္ လိုက္ရေအာင္
Formatting the Data
ဒီအဆင့္ကေတာ့ chart တစ္ခု ဖန္တီးဖို႔ရာ data ေတြကို analysis လုပ္တယ္လို႕ ေျပာႏိုင္ပါတယ္။ အရင္ဆုံး row and column
သေဘာေလးကို နားလည္ထားဖို့ လိုပါတယ္။
Row value ေတြကေတာ့ zero ကေန အျမဲတမ္း number value ေတြပဲ ျဖစ္ရပါမယ္။ Column values ေတြကေတာ့ zero လဲျဖစ္ႏိုင္
သလို တျခား optional ID ေတြလဲ ျဖစ္ႏိုင္ပါတယ္။ ဒီ example မွာေတာ့ company ရဲ႕ 2009 earnings ေတြကို chart ဆြဲထားတာပဲ
ျဖစ္ပါတယ္။ ဒါေၾကာင့္ အရင္ဆုံး data analysis လုပ္ၾကည့္မယ္ ဆိုရင္ေတာ့ ဒီလို ရပါလိမ့္မယ္။
| Quarters 2009 | Earnings |
| Q1 | 308 |
| Q2 | 257 |
| Q3 | 375 |
| Q4 | 123 |
Code ေရးမယ္ ဆိုရင္ေတာ့ ဒီလိုျဖစ္ သြားပါမယ္။
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Google Charts Tutorial</title>
<!-- load Google AJAX API -->
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
//load the Google Visualization API and the chart
google.load('visualization', '1', {'packages': ['columnchart']});
//set callback
google.setOnLoadCallback (createChart);
//callback function
function createChart() {
//create data table object
var dataTable = new google.visualization.DataTable();
//define columns
dataTable.addColumn('string','Quarters 2009');
dataTable.addColumn('number', 'Earnings');
//define rows of data
dataTable.addRows([['Q1',308], ['Q2',257],['Q3',375],['Q4', 123]]);
//instantiate our chart object
var chart = new google.visualization.ColumnChart (document.getElementById('chart'));
//define options for visualization
var options = {width: 400, height: 240, is3D: true, title: 'Company Earnings'};
//draw our chart
chart.draw(dataTable, options);
}
</script>
</head>
<body>
<!--Div for our chart -->
<div id="chart"></div>
</body>
</html>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
Chart API ကို ေခၚတယ္ ဆိုတာ အားလုံး သိပါတယ္။
google.load('visualization', '1', {'packages': ['columnchart']});
AJAX API ကေန google.load ကိုသုံးျပီး chart ျဖစ္လာဖို႔ loading လုပ္ပါတယ္။ parameters ေတြကို ၾကည့္မယ္ ဆိုရင္ေတာ့
1: Version of the API ျဖစ္ပါတယ္။
packages array: ဘယ္ chart type ကိုသုံးမယ္ဆိုတာကို ေျပာတာျဖစ္ပါတယ္။
google.setOnLoadCallback(createChart);
setOnLoadCallback ကေန createChart ဆိုတဲ့ Function ကို ေခၚလိုက္တာ ျဖစ္လို႕ createChart ကို create လုပ္ဖို႔ လိုလာပါတယ္။
var dataTable = new google.visualization.DataTable();
chart ဆြဲဖို႔ dataTable object တစ္ခု ရျပီဗ်ာ။
//define columns
dataTable.addColumn('string','Quarters 2009');
dataTable.addColumn('number', 'Earnings');
Data type ေျပာျပီး column ေတြကို define လုပ္ပါတယ္။
//define rows of data
dataTable.addRows([['Q1',308], ['Q2',257],['Q3',375],['Q4', 123]]);
Row define လုပ္တယ္ ဆိုတာ သိမွာပါ။ 4 rows လုံးကို တခါထည္း ထည့္လိုက္တာ ျဖစ္ပါတယ္။ တကယ္လို႕ row တစ္ခုခ်င္း သြင္းခ်င္
ရင္ေတာ့ ဒီလိုမ်ိဳး လုပ္ႏိုင္ပါတယ္။
dataTable.addRow(['Q1',308]);
data.setValue(0, 0, 'Q1');
var chart = new google.visualization.ColumnChart (document.getElementById('chart'));
ဒီ code အလုပ္လုပ္ဖို႔ ကေန <div id=”chart”></div> ဒီ div ရွိေနဖို႔ လိုပါတယ္။
var options = {width: 400, height: 240, is3D: true, title: 'Company Earnings'};
chart.draw(dataTable, options);
တျခား optional parameters ေတြကေတာ့ Chart size, 3D, Chart Title ေတြပဲျဖစ္ပါတယ္။ draw function မွာေတာ့ ဒီ value ကိုထည့္
ေပးဖို႔ လိုပါတယ္။ ဒီ script ေလးကို ကူးျပီး run လိုက္မယ္ ဆိုရင္ေတာ့ ဒီလို ပုံေလးကို ျမင္ရမွာ ျဖစ္ပါတယ္။
တကယ္လို႕ pie chart ကိုသုံးမယ္ဆိုလဲ ရပါတယ္။
//load the Google Visualization API and the chart
google.load('visualization', '1', {'packages':['columnchart','piechart']});
ဒီလိုေလး ေျပာင္းေပးလိုက္ရင္ ရပါျပီ။ pie chart နဲ႔ေျပာင္းလိုက္မယ္ ဆိုရင္ေတာ့ ဒီလိုေလး ျဖစ္သြားပါလိမ့္မယ္။
demo link မွာ ၾကည့္ႏိုင္ပါတယ္။ ေနာက္ post မွာေတာ့ ဒီ charts ေတြကို user event ေတြဘယ္လို ထည့္မယ္၊ ဘယ္လို trigger လုပ္မယ္
ဆိုတာေတြကို ဆက္ေရးပါတယ္။
Google Chart API Part -1
Written by Zack Tuesday, 20 July 2010 22:39
ဒီညေတာ့ မိုးကလည္း အဖြဲဖြဲနဲ႔ ေကာင္းေနတာေၾကာင့္ ေကာ္ဖီေလး တစ္ခြက္နဲ႔ Net Tuts+ ကိုေရာက္
ခဲ့ပါတယ္။ ဖတ္စရာေတြက မ်ားျပားလွတာေၾကာင့္ ဘာကစဖတ္ျပီး စမ္းၾကည့္ရမွန္း မသိေအာင္ကို
ျဖစ္ရပါတယ္။ ဒီလိုနဲ႔ Google Charts API အေၾကာင္းဖတ္ကို ဖတ္လိုက္ေတာ့ လြယ္ကူျပီး ျပန္စမ္းၾကည့္
ခ်င္သူေတြ အဖို႔လည္း အလြယ္တကူ လုပ္ၾကည့္ႏိုင္တာမို႔ မ်ႇေဝလိုက္ပါတယ္။
Google Charts API ဆိုတာ
Web Page ထဲမွာ Charts ေတြကို static ျဖစ္ေစ၊ interactive ျဖစ္ေစ အလြယ္တကူထည့္ႏိုင္ေအာင္ လုပ္ေပးထားတဲ့ API တစ္ခုပဲျဖစ္ပါတယ္။
Static vs Interactive Charts
ဒီ Charts Tool မွာ API ႏွစ္ခုရွိပါတယ္။ အဲဒါေတြကေတာ့
* Image Charts.- Use the Google Chart API. (Static)
* Interactive Charts.- Use the Google Visualization API
Image Charts/Static ကေတာ့ ပိုလြယ္ေပမယ့္ Interactive Charts ကေတာ့ Java Script library ကိုသုံးထားျပီး event trigger
လုပ္ႏိုင္ေသာေၾကာင့္ သုံးရတာ flexible ျဖစ္တာကို ျမင္ႏိုင္ပါတယ္။
Static Chart
ဒီ Method ကေတာ့ အရမ္းကို လြယ္လြန္းလို႕ super easy လို႕ေတာင္ေျပာႏိုင္ပါတယ္။
http://chart.apis.google.com/chart?cht=p3&chs=450x200&chd=t:2,4,3,1&chl=Phones|Computers|Services|Other&chtt=Company%20Sales&chco=ff0000
ဒီ code ေလးကို copy ကူးျပီး browser မွာ run လိုက္ရင္ ေအာက္က ပုံးေလးကို auto generate လုပ္ေပးမွာ ျဖစ္ပါတယ္။
ဒီလိုေလးသာ လုပ္လိုက္ရင္ image အေနနဲ႔ ထည့္လို႕ရျပီဗ်ာ။
<img src='http://chart.apis.google.com/chart?cht=p3&chs=450x200&chd=t:2,4,3,1&chl=Phones|Computers|Services|Other&chtt=Company%20Sales&chco=ff0000'>
ကဲဘယ္ေလာက္ေတာင္ လြယ္သလဲဗ်ာ။ ေျပာပါတယ္ super easy ပါဆိုမွ ... 
အလုပ္ပုံကေတာ့ Google Charts API ကို GET (or) POST သုံးျပီး request လုပ္လိုက္တဲ့ အခါ API ကေန png image ကို return
ျပန္ေပးလိုက္တာ ျဖစ္ပါတယ္။
ဒီ URL ကို ခဲြျခမ္း ၾကည့္မယ္ ဆိုရင္ေတာ့
http://chart.apis.google.com/chart?
Base URL ျဖစ္ျပီး က်န္တာေတြက ဒီ URL အတြက္ parameters ေတြပဲ ျဖစ္ပါတယ္။
Mandatory Parameters
ဒီ URL အတြက္ မပါမျဖစ္ထည့္ ေပးရမယ့္ parameters ေတြကိုၾကည့္မယ္ ဆိုရင္ေတာ့
cht=p3
Chart Type အတြက္ ျဖစ္ပါတယ္။ p3 ဆိုတာကေတာ့ 3D pie chart ကိုဆိုလိုပါတယ္။ ရႏိုင္တဲ့ chart type ေတြကိုေတာ့ ဒီမွာ ၾကည့္ႏိုင္
ပါတယ္။
chs=450×200
chart image size ပဲျဖစ္ပါတယ္။
chd=t:2,4,3,1
chart မွာျပမယ့္ data အတြက္ ျဖစ္ပါတယ္။ ပထမ စာလုံး t ကေတာ့ data format အတြက္ ညြန္းတာ ျဖစ္ျပီး ဒီ example မွာေတာ့
basic text format ကိုသုံးထားပါတယ္။
Optional Parameters
title, labels, font types, colors, gradients စတာေတြကို optional parameters အေနနဲ႔ ထည့္ေပးႏိုင္ပါတယ္။ ဒီ example
မွာၾကည့္ရင္ေတာ့
chl=Phones|Computers|Services|Other
chart label အတြက္ ျဖစ္ပါတယ္။ ဒီဟာေလးနဲ႔ တြဲျပီးၾကည့္ရင္ ပိုျမင္သာပါတယ္။ chd=t:2,4,3,1
chtt=Company%20Sales
chart title အတြက္ ျဖစ္ပါတယ္။
chco=ff0000
Chart color အတြက္ ျဖစ္ပါတယ္။ တကယ္လို႕ gradient နဲ႔ျပခ်င္ရင္ေတာ့ colors ႏွစ္ခုကို ဒီလိုျပႏိုင္ပါတယ္။ chco=ff0000,00ff00
Interactive Charts ကေတာ့ ရွည္တာေၾကာင့္ ေနာက္ post တစ္ခု အေနနဲ႔ ေရးမွ ပိုအဆင္ေျပမယ္။ အရမ္းရွည္ေတာ့လည္း ဖတ္ရတာ
ပ်င္းဖို႔ ေကာင္းပါတယ္။ စိတ္ပါရင္ေတာ့ Live Chart Playground မွာ ေဆာ့ၾကည့္ႏိုင္ပါတယ္။ ေဆာ့ၾကည့္ဗ် ေရလည္လန္းတယ္။
TIME MONEY ENERGY
Written by Zack Saturday, 17 July 2010 17:00
ဒီ post ကေတာ့ forward mail ထဲက ဖတ္မိျပီး ကြၽန္ေတာ္ ခံစားခ်က္နဲ႔ တိုက္ဆိုင္ေနလို႕ ျပန္ေရးလိုက္ ပါတယ္။ ေတာ္ေတာ္မ်ားမ်ားလည္း
ဒီလိုပဲ ခံစားမိၾကမယ္ ထင္ပါတယ္။ ကြၽန္ေတာ္ badminton racket ၾကိဳးျပတ္သြားလို႕ ဆိုင္မွာ ၾကိဳးျပန္ပတ္ေနတုန္း ဗိုက္ကလည္း ဆာေန
တာေၾကာင့္ McDonalds မွာဝင္ျပီး ၾကက္ေၾကာ္ နဲ႔ အားလူးေၾကာ္ ဝယ္ျပီး ဆိုင္ထဲ ေထာင့္က်က် စားပြဲေလးမွ ထိုင္မိလိုက္ပါတယ္။ တျခား
စားပြဲေတြမွာ မိသားစု အလိုက္ စားေနၾကတဲ့ သူေတြရွိသလို၊ Laptop ေလးေတြသယ္လာျပီး အလုပ္လုပ္ေန ၾကသူေတြလည္း ရွိပါတယ္။
အခ်ိန္ေလးကလည္း ရေနတာေၾကာင့္ ရုံးကေပးထားတဲ့ broadband internet ေလးနဲ႔ စာဖတ္မယ္ ဆိုျပီး ပါလာတဲ့ Laptop
ေလးဖြင့္ လိုက္မိပါတယ္။ အဲဒီ အခ်ိန္ေလးမွာ ဖ်တ္ခနဲ သတိရမိျပီး လြမ္းသလိုလို ခံစားမိလိုက္တာက ကြၽန္ေတာ္ ေက်ာင္းတတ္တုန္းက
ထိုင္ခဲ့ဘူးတဲ့ လက္ဖက္ရည္ဆိုင္က ေထာင့္က်က် စားပြဲေလးကိုပါ။ စားပြဲေလးမွာထိုင္ရင္း ေဆးလိပ္ေလးကို ဖြာရင္း သီခ်င္းေလးေတြကို
နားေထာင္လိုက္၊ chorus ေလးေရာက္ရင္ အတူတူ လိုက္ဆိုလိုက္ၾက နဲ႔ေပါ့ .... ျပီးေတာ့ ကိုယ္ၾကိဳက္တက္တဲ့ လက္ဖက္ရည္ ပုံစံ အခ်ိဳး
အစားကို သိေနတဲ့ အေဖာ္ဆရာရဲ႕ လက္ဖက္ရည္ေလး နဲ႔ ခုစားေနရတဲ့ ၾကက္ေၾကာ္ ရဲ႔ အရသာ လားလားမွ မဆိုင္ေပ။ ျပီးေတာ့ ဆက္ျပီး
လြမ္းမိလိုက္တာက အဲဒီ အခ်ိန္တုန္းက လြတ္လပ္မႈေတြ စိတ္ဖိစီးမႈေတြ မရွိေသးတဲ့ ပထမႏွစ္ ေက်ာင္းသားဘဝေလးေပါ့။ ေျပာရရင္ အဲဒီ
အခ်ိန္တုန္းက စတိုင္က်က် ဆိုင္ေလးမွာ ထိုင္ျပီး ၾကက္ေၾကာ္ဆိုတာကို မစားႏိုင္လို႔ လမ္းေဘးက လက္ဖက္ရည္ ဆိုင္ေလးမွာ ထိုင္ျပီး
သီခ်င္းေလးေတြဆိုကာ စိတ္ထြက္ေပါက္ ရွာခဲ့ရပါေပါ့။ အဲဒီ အခ်ိန္တုန္းက ကြၽန္ေတာ္မွာ ျဖစ္ခဲ့တာကို ဒီပုံေလးက ေျပာျပပါလိမ့္မယ္။
Teen age: Have Time + Energy …but No Money
အဲသည္လိုနဲ႔ မရပ္နားတဲ့ ဘဝခရီးကို ဆက္ေလွ်ာက္ရင္း Working Age ကိုေရာက္လာတဲ့ အခါ ေက်ာင္းသားဘဝ ကထက္စာရင္ေတာ့
စားခ်င္တာကို စားႏိုင္လာတဲ့ အဆင့္ေပါ့ဗ်ာ။ ဒါေပမယ့္ ရွားသြားတာက အခ်ိန္ပါပဲ။ Monday to Friday (or) Sat ကအလုပ္ထဲမွာ နစ္ေန
ၾကျပီး weekend ေလးေရာက္ေတာ့လည္း အိမ္အလုပ္ေတြရယ္၊ တျခားလူမႈေရး အလုပ္ေတြရယ္၊ စာဖတ္စရာေတြရယ္နဲ႔ လုပ္စရာေတြ
ကမ်ား လွပါေပတယ္။ ေျပာမယ္ဆိုရင္ လုပ္စရာေတြမ်ားျပားလြန္းလို႕ ဒီေန႕ ဆိုတာေတြကို အျမန္အဆန္ ဖရိုဖရဲကားလိပ္ခ်ရင္း မနက္ဖန္
ေတြေနာက္ကို ဒေရာေသာပါး လိုက္ေနရတယ္ ဆိုရင္လည္း ဟုတ္ပါတယ္။ ဒီပုံေလး အတိုင္းေပါ့ဗ်ာ။
Working Age: Have Money + Energy …but No Time
ေနာက္ age တစ္ခုကေတာ့ မရေသးေပမယ့္ ျဖစ္လာႏိုင္တာကို အေပၚက ႏွစ္ပုံကိုၾကည့္ျပီး တြက္ဆ လို႔ရေနပါတယ္။ ျဖစ္လာမယ္
ဆိုရင္ေတာ့ ဒီလိုေလးေပါ့။
Old age: Have Time + Money …but no Energy
ဒီေတာ့ဗ်ာ ကြၽန္ေတာ္စဥ္းစားလိုက္မိလိုက္တာကေတာ့ ဘဝဆိုတာ တိုတိုေလးပဲ၊ ကိုယ္က်ိဳးအတြက္လုပ္သလို အမ်ားအက်ိဳး အတြက္လည္း
တတ္ႏိုင္သေလာက္လုပ္ရင္း ဘဝ ရဲ႕ အသက္အပိုင္းအျခားေတြကို ျဖတ္သန္း ၾကတာေပါ့။ ဒီပုံေလး ၃ပုံရယ္၊ လက္တေလာ ျဖစ္ေပၚလာတဲ့
ခံစားခ်က္ေလးေၾကာင့္ ဒီ post ေလးကိုေရး ျဖစ္သြားတာပါ။ Oops !!! Badminton ဆိုင္က ျပန္ခ်ိန္ထားတာ ေနာက္ေတာင္က်ေနျပီ လစ္မွ လစ္မွ
ဪ .. အခ်ိန္ ... အခ်ိန္ .. အခ်ိန္...
Zack-Notes iPhone/iPod version
Written by Zack Wednesday, 14 July 2010 14:22
Joomla Zawgyifont plugin လုပ္ရင္း Joomla ပိုးျပန္ဝင္သြားျပီး Site အတြက္ mobile version ကိုဆက္စမ္းျဖစ္သြားတယ္။ ခုေလာ
ေလာဆယ္ေတာ့ ipod/iphone ကေနၾကည့္ရင္ ေဇာ္ဂ်ီမရွိလည္း content ေတြကိုဖတ္ႏိုင္ေအာင္၊ ျပီးေတာ့ ဖတ္တဲ့ အခါမွာလည္း
အဆင္ေျပေျပ ဖတ္ႏိုင္ဖို႔ mobile template ကို auto switch လုပ္သြားေအာင္ လုပ္ထားပါတယ္။ တျခားေသာ Smart Phone ေတြက
ၾကည့္မယ္ဆိုရင္ေတာ့ ဘယ္လို ျဖစ္မယ္ဆိုတာ မသိပါ။ ဒီအတြက္ JoomTouch ဆိုတဲ့ Extension ကိုသုံးႏိုင္ျပီး၊ အဲဒီ extension က
iWebkit Framework ကို ယူသုံးထားလို႕ iWebkit ကိုအနည္းငယ္ နားလည္မယ္ ဆိုရင္ ကိုယ္ၾကိဳက္သလို ျပင္သုံးႏိုင္ပါတယ္။
JoomTouch ကိုသုံးမယ္ဆိုရင္ ဒီလို error ကိုေတြ႔ ရႏိုင္ပါတယ္။
Call-time pass-by-reference has been deprecated.
အဲဒီလိုေတြေတြ႔လာရင္ေတာ့ stackoverflow က ဒီ link မွာဖတ္ၾကည့္ျပီး ေျဖရွင္းႏိုင္ပါတယ္။ iPod/iPhone ေတြရဲ႕ safari browser
ကေန http://www.zack-notes.net ၾကည့္မယ္ဆိုရင္ ေအာက္ပါအတိုင္း ေတြ႔ရပါမယ္။
More Articles...
Page 4 of 30
«StartPrev12345678910NextEnd»Latest Post
Login Form
Categories Table View
- Reader's Conner (103)
- PHP (45)
- Joomla CMS (36)
- Codeigniter (10)
- jQuery (6)
- PHP & AJAX (4)
- Apache (3)
- For Mac (3)
- mySQL (2)
