November

preface
ကၽြန္ေတာ္ ခရီးသြားေနတာရယ္၊ ေနမေကာင္းတာရယ္ေၾကာင့္ အမ်ားႀကီး မေရးႏုိင္ပါဘူး။

ဒါေပမယ့္လည္း စာဖတ္သူေတြအတြက္ ျပည့္စံုေကာင္းမြန္တဲ့ စာေတြကုိ {echo} အဖြဲ႕ကေနၿပီးေတာ့
ႀကိဳးစားေရးသားထားၾကပါတယ္။။ { echo } ရဲ႕ ထံုးစံအတိုင္း အင္တာဗ်ဴးက႑အတြက္ ေရြးခ်ယ္ထားသူကေတာ့
မၾကာေသးခင္က ျခင္းလံုးဂိမ္းကို တီထြင္ထုတ္လုပ္ထားတဲ့ Total Gameplay Studio က ကိုျမင့္ေက်ာ္သူပဲ ျဖစ္ပါတယ္။
အခုလို အင္တာဗ်ဴးေျဖေပးတဲ့အတြက္ ကိုျမင့္ေက်ာ္သူကို ေက်းဇူးအထူးပဲ တင္ရွိပါတယ္ခင္ဗ်။
ဒီတစ္လမွာေတာ့ အထူးသျဖင့္ CSS နည္းပညာေတြနဲ႕ ပတ္သတ္တဲ့ ေဆာင္းပါးနဲ႕ Tutorial အဓိက

ပါဝင္တဲ့အတြက္ေၾကာင့္ စာဖတ္ပရိတ္သတ္ေတြ အေနနဲ႕လည္း ႏွစ္သက္ၾကမယ္လို႕ ယံုၾကည္ပါတယ္။ ဒါ့အျပင္
Web နဲ႕ ပတ္သတ္ၿပီး စိတ္ဝင္စားဖြယ္ရာ ေဆာင္းပါေတြအျပင္ Laravel 4 ကို အသံုးျပဳၿပီး Application တစ္ခု
တည္ေဆာက္ပံုကို Tutorial အေနျဖင့္ပါ ပါဝင္ထားပါတယ္။
အားလံုး စိတ္၏ ခ်မ္းသာျခင္း ကိုယ္၏ က်န္းမာျခင္းနဲ႔ ျပည့္စံုႏိုင္ပါေစခင္ဗ်။
Thiha
table of content
Write Your CSS with LESS Web Assets Organizing Tips
9 16
Interview with Create Note Application
Ko Myint Kyaw Thu with Laravel
24 28
Autoload CSS Best Practices
You Should Follow
43
48
CSS3 Filter Effects CKEDITOR
55 69
Introduction to HTML5
82
echo team
Editor Layout Designer
Thiha Hein Zaw Htet
Proof Reader Website
Echo Team echo.myanmarlinks.net
Facebook Page Email
fb.me/EchoMagazine.mm echo.emagz@gmail.com
{ echo } is the product of

MyanmarLinks Web Development Team
{echo}
echo.myanmarlinks.net 5
{echo}
{echo}
{echo}
Write Your CSS
with LESS
C S S
Thet Paing
Myanmar Links Training Center မွာ Web Development အေၾကာင္းကို
စတင္ ေလ့လာကာ Web နဲ႔ ပတ္သက္တာမွန္သမွ် စိတ္ဝင္စား၍
ေလာေလာဆယ္ PHP ကိုအဓိက အသံုးျပဳေနေသာ Developer ျဖစ္ျပီး CMS
ေတြ နဲ႔ Website ေရးသားႏိုင္ကာ Reborn CMS တြင္ Module တစ္ခုစ
ႏွစ္ခုစ ပါဝင္ Develope လုပ္ေနေသာ Myanmar Links Professional Web
Development တြင္ လက္ရွိ အလုပ္လုပ္ေန သူတစ္ေယာက္ျဖစ္ပါတယ္။
Write Your CSS
with LESS
Website ေတြ Web application ေတြ အစရွိသျဖင့္ ေရးသားၾကတဲ့ အခါ ၾကည့္႐ႈရ အဆင္ေျပေအာင္ အျမင္လွပေအာင္
အတြက္ CSS (Cascading Style Sheets) ေတြေရးရပါတယ္။ အနည္းအက်ဥ္းပဲ ေရးရတယ္ ဆိုရင္ေတာင္ အနည္းဆံုး ရာေက်ာ္ပါတယ္။
ေထာင္ခ်ီ ေသာင္းခ်ီလာရင္ေတာ့ ၎ CSS ေတြကို ထိန္းသိမ္းရတာ လြယ္ကူေတာ့မွာ မဟုတ္ေတာ့ပါဘူး။ Color ေလးျပင္ခ်င္တာျဖစ္ျဖစ္၊
border တိုးခ်င္တာပဲ ျဖစ္ျဖစ္ လုပ္ရတာ အဆင္ေျပမွာ မဟုတ္ပါဘူး။ ၿပီးေတာ့ တစ္ခုျပင္လိုက္ရင္ တျခားဟာေတြမွာ လုိက္ျပင္ရမွာလား
ဒါမွမဟုတ္ တစ္ျခားဟာေတြမွာ ျပႆနာမ်ား တက္သြားမလား အစရွိတဲ့ ျပႆနာေတြလည္းရွိပါတယ္။ ၿပီးေတာ့ CSS က Dynamic
မဟုတ္တဲ့ အတြက္ ဒီ Code ေတြကိုပဲ ထပ္ခါထပ္ခါေရးရပါတယ္။ အဲ့ဒီလိုမ်ိဳးေတြ ရွိလာတဲ့ အတြက္ CSS ကို dynamic ပံုစံ အသံုးျပဳလို႔
ရေအာင္ CSS preprocessor ကို တီထြင္လာၾကပါတယ္။ CSS preprocessor ဆိုတာက CSS Files ေတြကို generate ထုတ္ေပးတဲ့
language ပါ။ CSS preprocessor ေတြက အမ်ားႀကီးရွိပါတယ္။ အဲ့ဒီ အထဲမွာေတာ့ SASS, Stylus, LESS တို႔က နာမည္ႀကီးေတြပါ။
SASS က Ruby နဲ႔ ေရးၿပီး၊ Stylus ကေတာ့ Note.js နဲ႔ေရးပါတယ္။ အခု ေရးမယ့္ LESS ကေတာ့ JavaScript နဲ႔ေရးတာပါ။ အရင္ကေတာ့
Ruby နဲ႔ ေရးတာ ေနာက္မွ JavaScript ကိုျပန္ေျပာင္းလုိက္တာပါ။ LESS ကို Server-side မွာေရာ Client-side မွာေရာ run လို႔ရပါတယ္။
Server-side မွာေတာ့ Node.js ဒါမွမဟုတ္ Rhino တို႔နဲ႔ compile လုပ္ေပးရပါတယ္။ Client-side မွာေတာ့ Modern Browser ရွိရင္ run
လို႔ရပါၿပီ။ LESS ကို အသံုးျပဳၿပီး CSS ေတြကိုေရးခ်င္တယ္။ အရင္ကလို CSS ေတြ အမ်ားႀကီး မေရးရေတာ့ သေဘာက်တယ္။ ဒါေပမယ့္
ကိုယ္က JavaScript နဲ႔ ပတ္သက္ၿပီး ဘာမွ မသိေတာ့ LESS နဲ႔ေရးရင္ အဆင္ေျပပါ့မလား လို႔စိုးရိမ္ေကာင္း စိုးရိမ္ႏိုင္ပါလိမ့္မယ္။ ဒီကိစၥနဲ႔
ပတ္သက္ၿပီး စိတ္မပူပါနဲ႔ ။ LESS က အသံုးျပဳရ နားလည္ရ လြယ္ကူပါတယ္။ ၿပီးေတာ့ သူ႔မွာ Documentation အျပည့္အစံုရွိပါတယ္။
less.js ကို ေဒါင္းၿပီး ကိုယ့္အသံုးျပဳမယ့္ ေနရာမွာ ခ်ိတ္ေပးလိုက္ရံုနဲ႔ အသံုးျပဳလို႔ရပါၿပီ။
Using LESS
LESS ကို အသံုးျပဳၿပီး CSS ေရးေတာ့ မယ္ဆိုရင္ေတာ့ အရင္ဆံုး less.js ကို ေဒါင္းရပါမယ္။
http://lesscss.org/
Site Links ကေတာ့ lesscss.org ပါ။ ေဒါင္းၿပီးရင္ေတာ့ ကိုယ္ေရးမယ့္ ေနရာမွာ ခ်ိတ္ေပးလိုက္ရင္ရပါတယ္။ ခ်ိတ္ေပးရမယ့္
ပံုစံကေတာ့ script ေတြကို ခ်ိတ္တဲ့ ပံုစံအတိုင္းပါ။
Write Your CSS
with LESS
<script src="less.js" type="text/javascript"></script>
Less ကိုခ်ိတ္ၿပီးရင္ေတာ့ ေရးမယ့္ CSS file ကိုခ်ိတ္ေပးရပါမယ္။ CSS file ကိုေတာ့ .css လို႔ မေရးဘဲ .less
လို႔ေျပာင္းေပးရပါမယ္။ ၿပီးရင္ ခ်ိတ္တာကေတာ့ အရင္အတိုင္းပါပဲ။ တစ္ခု သိထားရမွာက link rel မွာ stylesheet/css အစား less ကို
ေျပာင္းေပးရမွာပါ။
<link rel="stylesheet/less" type="text/css" href="style.less">
ခ်ိတ္ၿပီးရင္ ေတာ့ Less ကို အသံုးျပဳၿပီး ေရးလို႔ရပါၿပီ။ LESS မွာပါတဲ့ syntax ေတြကို အသံုးျပဳၿပီး အနည္းငယ္
ေရးၾကည့္ပါမယ္။
Variables
Variables တစ္ခုကို ေၾကညာထားၿပီးရင္ တစ္ျခားေနရာေတြမွာပါ ျပန္လည္အသံုးျပဳလို႔ရပါတယ္။ ျပင္ခ်င္ရင္လည္း
တစ္ေနရာထဲမွာ ျပင္လို႔ရပါတယ္။ ဒါနဲ႔ ပတ္သက္ၿပီး Code အနည္းငယ္ ေရးၾကည့္လိုက္ရင္ ရွင္းသြားမွာပါ။
@color-black: #000000;
body {
background: @color-black;
}
h2 {
color: @color-black;
}
ဒါဆိုရင္ေတာ့ CSS မွာ output က ဒီလိုမ်ိဳးထြက္လာမွာပါ။
body {
background: #000000;
}
h2 {
color: #000000;
}
Write Your CSS
with LESS
ဆိုလိုတာက Color code ကို ေနရာတုိင္းမွာ လိုက္မထည့္ေတာ့ဘဲ တစ္ေနရာတည္းမွာထည့္ၿပီး အဲ့ဒီ variable

ကိုေခၚသံုးလိုက္တာပါ။ အဲ့ဒီေတာ့ ေနာင္က်ရင္ color ကိုေျပာင္းခ်င္ရင္ တစ္ေနရာမွာပဲ ေျပာင္းရတဲ့ အတြက္ လြယ္ကူအဆင္ေျပ
သြားပါတယ္။
Mixins
Mixins ကေတာ့ Function တို႔ Class တို႔လိုပါ။ အလြယ္နည္းနဲ႔ေျပာရရင္ Code ေတြကို အရင္ႀကိဳေရးထားၿပီး ကိုယ္လိုခ်င္တဲ့
ေနရာမွာ ထည့္သံုးလို႔ ရပါတယ္။ ျမင္သာသြားေအာင္ Code ေတြေရးၾကည့္ပါမယ္။
.rounded-corners {
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px;
}
.div1{
.rounded-corners;
}
.div2
{
.rounded-corners;
}
ဒါဆိုရင္ .div1 နဲ႔ .div2 ထဲမွာ
.div1{
border-radius: 3px;
}
.div2
{
border-radius: 3px;
}
Write Your CSS
with LESS
ဒီလိုမ်ိဳး CSS ေတြဝင္သြားမွာပါ။ ေနာက္တစ္မ်ိဳးက အဲ့ဒီ အထဲမွာထည့္မယ့္ value ကိုလည္း ႀကိဳက္တာ ထည့္လို႔
ရေအာင္လည္း ေရးလို႔ရပါတယ္။ အေပၚက ေရးထားတာကိုပဲ နည္းနည္းေျပာင္းေရးပါမယ္။
.rounded-corners(@radius: 5px) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
-ms-border-radius: @radius;
-o-border-radius: @radius;
border-radius: @radius;
}
.div1{
.rounded-corners;
}
.div2
{
.rounded-corners(3px);
}
ဒါဆိုရင္ .div1 မွာက
.div1{
border-radius: 5px;
}
ဒီ Code ေတြဝင္ ၿပီး .div2 မွာေတာ့
.div2
{
border-radius: 3px;
}
Write Your CSS
with LESS
ဒီလိုမ်ိဳးဝင္မွာပါ။ Class ပံုစံေရးလို႔ရတဲ့ အတြက္ သံုးရတာ ေတာ္ေတာ္ အသံုးဝင္ပါတယ္။ ကိုယ္ေျပာင္းခ်င္သလိုလည္း

ေျပာင္းလို႔ရပါတယ္။
Nested Rules
Nested Rules ဆိုတာကို နားလည္ရလြယ္ေအာင္ ေျပာရရင္ inheritance လုပ္ထားတဲ့ selectors ေတြကို CSS ေရးတဲ့
အခါ တစ္ခုခ်င္း ေရးစရာမလိုဘဲ အတြဲလိုက္ေရးလို႔ရတာပါ။ ျမင္သာေအာင္ Code အနည္းငယ္ေရးၾကည့္ပါမယ္။
HTML Code က ဒီလိုရွိတယ္ ဆိုပါစို႔။
<div class="div1">
<h2>
Echo Less…
</h2>
<p>This is <span>Echo</span> Less test.</p>
</div>
အရင္က CSS ေရးရင္
.div1 h2 {
font-size: 26px;
font-weight: bold;
}
.div1 p {
font-size : 14px;
}
.div1 p span {
color: #e3e3e3;
}
ဒီလိုမ်ိဳးေရး ရပါတယ္။ LESS မွာေတာ့
.div1 {
h2 {
font-size: 26px;
font-weight: bold;
}
p {
font-size : 14px;
span { color: #e3e3e3; }
}
}
Write Your CSS
with LESS
ဒီလိုပံုစံ မ်ိဳးပါ။ တစ္ေၾကာင္းစီ ေရးစရာမလိုေတာ့ဘဲ အကုန္လံုးကို Inheritance ပံုစံလိုမ်ိဳး ေရးလို႔ရပါတယ္။
Operations
LESS ထဲမွာ ေပါင္း၊ ႏုတ္၊ ေျမွာက္၊ စား လိုမ်ိဳး Operations ေတြလုပ္လို႔ရပါတယ္။ ဒါကလည္း ရိုးရိုး တန္းတန္း ေပါင္း၊ ႏုတ္၊
ေျမွာက္၊ စား အတိုင္းအသံုးျပဳရတာပါ။ ဥပမာအေနနဲ႔ ေရးျပပါမယ္။
@width: 50px;
.div1 {
width : @width * 2;
}
ဒီလိုမ်ိဳးပါ။ ဒါဆိုရင္ေတာ့ LESS အေၾကာင္းကို အနည္းငယ္ တီးမိ ေခါက္မိ ျဖစ္ေလာက္ပါၿပီ။ LESS အတြက္
အသံုးျပဳလို႔ရေအာင္ ႀကိဳတင္ ေရးထားတဲ့ Elements ေတြလည္းရွိပါတယ္။ lesselements.com မွာ သြားေရာက္ ေဒါင္းႏိုင္ပါတယ္။
ေဒါင္းၿပီးရင္ ၎ကို အသံုးျပဳလို႔ရေအာင္ အတြက္ ခ်ိတ္ေပးရပါတယ္။ အဲ့ဒါကလည္း လြယ္ပါတယ္။ ကိုယ္ေရးေနတဲ့ file ထဲမွာ
ခ်ိတ္ေပးရတာပါ။ အကယ္၍ ကိုယ္က style.css ထဲမွာေရးေနတယ္ဆိုရင္ ၎ file ထဲမွာ
@import "elements.less";
ဆိုၿပီး ခ်ိတ္ေပးလိုက္ရံုျဖင့္ ရွိၿပီးသား elements ေတြကို ေခၚသံုးလို႔ရၿပီ။ ၎လိုပဲ အျခား File ေတြကို
ကိုယ့္ထဲမွာထည့္သံုးခ်င္တယ္ ဆိုရင္ @import နဲ႔ ေခၚသံုးလိုက္ရံုပါပဲ။
LESS မွာ တစ္ျခား သံုးလို႔ရတဲ့ function ေတြရွိပါေသးတယ္။ http://lesscss.org/#reference မွာၾကည့္ႏိုင္ပါတယ္။
ဒါေၾကာင့္ LESS ကို အသံုးျပဳၿပီး ကိုယ့္အတြက္ လိုအပ္တဲ့ CSS ေတြကို အနည္းဆံုးနဲ႔ အျမန္ဆံုး ေရးႏိုင္ၾကပါေစလို႔
ဆႏၵျပဳရင္း အဆံုးသတ္လိုက္ပါတယ္။
Web Assets Organizing Tips
a t i o n
t i m i z
dO p
o n t e n
Fr
Li Jia Li
A web addicted who loves everything about web technology.
Arts and design enthusiast.
Core Module developer of RebornCMS.
http://dragonvirus.com
Website ေတြ Web Application ေတြ ေရးတဲ့ အခါမွာ Assets (Images, CSS, JS) ေတြက မပါမျဖစ္ပါစၿမဲပါပဲ။ အဲဒီ Web
Assets ေတြကို ေကာင္းေကာင္း organized မလုုပ္တဲ့ အခါက်ရင္ site ရဲ႕ performance ကို က်ေစပါတယ္။ ဥပမာ မလိုအပ္ဘဲ CSS
ဖိုင္ေတြ အမ်ားႀကီးခြဲတာတို႔ Image ေတြကို size အႀကီးသံုးၿပီး CSS နဲ႕ ခ်ံဳ႕တာတို႔ ေတြလုပ္တဲ့ အခါမွာ မလိုအပ္ဘဲ မိမိရဲ႕ Web Site ေတြ
Web Application ေတြကို performance က်ေစႏိုင္ပါတယ္။ အခုု ဒီ article မွာ Web Assets ေတြကို ဘယ္လို organized လုုပ္ရမယ္ဆို
တာကုုိ နည္းနည္းေလာက္ ေျပာျပခ်င္ပါတယ္။
Images
Use Proper Image Size
Image ေတြကို သံုးတဲ့အခါမွာ အမ်ားအားျဖင့္လုပ္ေလ့ရွိတာက တူတဲ့ ပံုေတြဆို ရင္ တစ္ပံုတည္းကို ပဲ ခံ်ဳ႕ၿပီး
သံုးေလ့ရွိပါတယ္။ ဥပမာ။ ။ Shopping site တစ္ခု ဆိုပါစို႔။ အဲဒီမွာ category page လိုမ်ိဳး ပစၥည္းေတြစီျပတဲ့ ေနရာမွာဆိုရင္ ပံု အေသးကို
ျပရၿပီး product detail ကိုေရာက္တဲ့ အခါက်ရင္ေတာ့ ပံုအႀကီးကို ျပပါတယ္။ အဲလိုအခါမ်ိဳးက်ရင္ လုပ္ေလ့ရွိၾကတာက category page
မွာ လည္း ပံုအႀကီးကို ပဲ ခံ်ဳ႕ၿပီးျပေလ့ရွိတယ္။ အမွန္ဆိုရင္ေတာ့ အဲလိုမလုုပ္သင့္ပါဘူး။ စဥ္းစားၾကည့္လိုက္ေလ single page မွာ ပံုအႀကီး
တစ္ခုကို load လုပ္ရတာကိစၥမရွိေပမယ့္ category page မွာ product ၁၀ ခုျပမယ္ဆိုရင္ ပံု အႀကီး ၁၀ ခုကို load လုုပ္ရမွာျဖစ္တဲ့ အတြက္
performace ကို သိသိသာသာႀကီး က်သြားေစပါတယ္။ အဲဒါေၾကာင့္ ပံုေတြကို လိုအပ္တဲ့ size ေတြပဲ တစ္ခုခ်င္းစီျဖတ္ၿပီး သံုးသင့္ပါတယ္။
ဒီေနရာမွာဆိုရင္ category page အတြက္ ပံုအေသး တစ္ပံု detail page အတြက္ ပံု အႀကီး တစ္ပံု ထည့္ထားၿပီး သံုး သင့္ပါတယ္။ Site
တစ္ခု loading ရဲ႕ ၉၅% ေလာက္က image ကို loading လုပ္ရတာပါ ဒါေၾကာင့္ အဲေနရာမွာ ပံုေတြကို မလိုအပ္ပဲ အႀကီးႀကီးေတြသံုးတာက
လံုးဝမေကာင္းပါဘူး။ ေနာက္တစ္ခုက mobile ေတြအတြက္ပါ။ တကယ္လို႔ ကိုယ့္ site မွာ banner ပံု အႀကီးႀကီး ေတြ သံုးထားတယ္ဆိုရင္
mobile အတြက္ ပံု အေသး ထည့္ထားၿပီး CSS media queries နဲ႔ mobile ဆိုရင္ ပံု အေသးကို အစားထိုးထားသင့္ပါတယ္။
Image Compression
Image ကိုလုိအပ္တဲ့ size သံုးတာနဲ႔လည္း မလံုေလာက္ေသးပါဘူး။ တစ္ခ်ိဳ႕ image format ေတြမွာ quality မက်ဘဲနဲ႔
compress လုုပ္လို႔ရႏိုင္ပါတယ္။ Photoshop ထဲမွာဆိုရင္ Save for Web နဲ႔ သိမ္းသင့္ပါတယ္။ အဲဒီမွာ jpeg ဆိုရင္ quality ကုုိ high
ေလာက္ ထိထားလို႔ရပါတယ္။ ဒီထက္နည္းသြားရင္ ေတာ့ သိပ္ၾကည့္မေကာင္းေတာ့ဘူး။
ဒါမွမဟုုတ္ လည္း program ထဲမွာ compress လုုပ္လို႔ရပါတယ္။ PHP မွာဆိုရင္ imagejpeg(), imagegif() အစရွိတဲ့ image function
ေတြမွာ quality ကို သတ္မွတ္ေပးလို႔ရပါတယ္။
imagejpeg($image, $destination, $quality);
ပထမ param အေနနဲ႔ image source ကိုထည့္ပါမယ္။ ဒုတိယ က ကိုယ္ destination file name ပါ။ တတိယက ေတာ့ quality ပါ။
တကယ္လက္ေတြ႕မွာ သံုးတဲ့ ပံုစံကေတာ့ image folder ထဲက original file ကို ဖတ္ၿပီး လိုသလို resize လုပ္ compress လုုပ္ ၿပီးမွာ
အဲဒီပံုကို cache ရိုက္ၿပီး user ကို ျပန္ျပၾကတာပါ။
Image Sprites and Icon Fonts

ေနာက္ပိုင္းမွာ HTTP Request ေတြကို ေလ်ာ့ခ်ဖို႔အတြက္ image ေတြ အားလံုးကို တစ္ပံုတည္းမွာ စုုၿပီး CSS နဲ႔
background-position ျပန္ခ်ိန္ၿပီးသံုးၾကပါတယ္။ အမ်ားအားျဖင့္ icon ေတြ button image ေတြ logo ေတြကိုဒါမ်ိဳးသံုးၾကပါတယ္။ Exam-
ple အေနနဲ႕ အားလံုးနဲ႔ ရင္းႏွီးၿပီးသားျဖစ္တဲ့ Facebook မွာ ဆိုရင္ သူ႔မွာ သံုးတဲ့ ပံုေတြ smiley icon ေတြ share button ေတြအားလံုးက
sprite ပံုတစ္ပံုတည္းက ယူသံုးတာပါ။ မယံုရင္ ပံု တစ္ခုခုမွာ inspect element လုပ္ၿပီး ၾကည့္ၾကည့္ လိုက္ပါ။ Sprite image ေတြကို
သံုးမယ္ဆိုရင္ ေအာက္ကအတိုင္းသံုးပါတယ္။
.icon_user {
background-image: url('img/glyphicon.png');
background-position: 0px -96px;
}
ေနာက္ပိုင္းမွာ icon ေတြကို Sprites ထက္စာရင္ Ligature Icon Fonts ေတြအေနနဲ႔ သံုးၾကပါတယ္။ Ligature icon
font ကိုသံုးျခင္းအားျဖင့္ SEO အေနနဲ႔လည္းေကာင္းပါတယ္။ ဘာလို႔လဲဆိုေတာ့ Ligature font ေတြက ဥပမာကိုယ္က check လို႔ေရးရင္
အမွန္ျခစ္ icon ေလးျပခ်င္တယ္လို႔သတ္မွတ္ထားရင္ ျပေပးပါတယ္။ အရင္ က သိထားသလိုမ်ိဳး “a” လို႔ရိုက္ရင္ အဝိုင္းပံု၊ “b” လို႔ရိုက္ရင္
ေလးေထာင့္ပံုဆိုၿပီး alphabet ေတြ ေနရာမွာ အစားထိုးထားတဲ့ font ေတြမဟုတ္ပါဘူး။ ဒါေၾကာင့္ browser ကဖတ္တဲ့ အခါမွာ text
ပဲျဖစ္တဲ့ အတြက္ SEO အတြက္လည္း အဆင္ေျပပါတယ္။
Use Data Url / Inline Images
Data url ဆိုတာဘာကို ေျပာတာလဲဆိုေတာ့ image ေတြကို base64 string အေနနဲ႔ encode လုပ္ၿပီး src ထဲမွာ အဲဒီ
data string ကို ထည့္ေပးလိုက္တာပါ။ အဲလိုထည့္လိုက္တဲ့ အတြက္ HTTP Request တစ္ခုေလ်ာ့သြားတာေတာ့ ေသခ်ာသြားပါၿပီ
ဘာလို႔လဲဆိုေတာ့ image data ကိုက html file ထဲမွာဆိုေတာ့ သူ႕အတြက္ request တစ္ခုထပ္ၿပီးလုုပ္စရာမလိုေတာ့ပါဘူး။ ပံု size
ႀကီးမယ္ဆိုရင္ေတာ့ data string ေတာ့ ရွည္မွာေပါ့။
<img src="data:image
png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/
w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot">
Images ေတြကို base64 encoded string ေျပာင္းဖို႔အတြက္ PHP မွာဆိုရင္ေအာက္ကအတိုင္းေရးႏိုင္ပါတယ္။ online မွာလည္း tools
ေတြရွိပါတယ္။
$file = 'img/echologo.jpg';
$handler = fopen($file, 'r');
$img = fread($handler, filesize($file));
fclose($handler);
$encoded_img = base64_encode($img);
echo '<img src="data:image/jpg;base64,'. $encoded_img .'" \>';
ေနာက္ဆံုးအေနနဲ႔ တစ္ခုပဲ ျပႆနာရွိတာက ထံုးစံအတိုင္း IE မွာေတာ့ ေကာင္းေကာင္းအလုုပ္မလုုပ္ပါဘူး။
Caching
Browser မွာ static content ေတြျဖစ္တဲ့ images, css, js အစရွိတဲ့ အရာေတြကို caching လုုပ္ထားတာက လည္း site
performance ကိုတိုင္းတာရာမွာ အဓိကေနရာကေနပါဝင္ပါတယ္။ Caching လုုပ္ထားတဲ့ အတြက္ user က ပထမ တစ္ႀကိမ္မွာပဲ down-
load လုုပ္ဖို႔လိုၿပီး ေနာက္ပိုင္းမွာဆိုရင္ ေတာ့ browser cache ထဲက ေနျပန္ၿပီးျပမွာျဖစ္တဲ့ အတြက္ ပိုၿပီးျမန္မွာပါ။ ေယဘုုယ်အားျဖင့္
ေတာ့ caching လုုပ္ဖို႔အတြက္ ေအာက္ကအတိုင္းေရးႏိုင္ပါတယ္။
$expire = 60 * 60 * 24 * 1;
header('Cache-Control: maxage='.$expire);
header('Expires: '.gmdate('D, d M Y H:i:s', time() + $expire).'
GMT');
header('Last-Modified: '.gmdate('D, d M Y H:i:s').' GMT');
html ထဲမွာဆိုရင္ေတာ့ ေအာက္ကအတိုင္း meta tag ကိုသံုးၿပီးေရးရပါတယ္။
<meta http-equiv="Cache-control" content="public">
Prefetching
Prefetching ဆိုတာကေတာ့ user ေနာက္ထပ္သြားႏိုင္ေခ်ရွိတဲ့ content ေတြကို ႀကိဳတင္ load လုုပ္ထားတာပါ။ prefetch
လုုပ္ခ်င္ရင္ေတာ့ link tag ကိုသံုးၿပီး လုုပ္ပါတယ္။ rel attribute မွာေတာ့ prefetch ဆိုၿပီး ထည့္ေပးရၿပီး href မွာေတာ့ prefetch လုုပ္မယ့္
file link ကို ထည့္ ေပးရပါတယ္။
<link rel="prefetch" href="img/sprites.jpg">
သူက page loading ၿပီးတဲ့ အခ်ိန္မွာ prefetch content ေတြကို background မွာ ႀကိဳတင္သြား ဆြဲထားၿပီး browser ထဲမွာ သိမ္းထားတာပါ။
အဲဒီေတာ့ user က တကယ္ အဲဒီ content ကို လိုတယ္ဆိုရင္ ႀကိဳတင္ load လုုပ္ထားတဲ့ အတြက္ တစ္ခါတည္းျပလိုက္႐ံုပဲေပါ့။
Stylesheets (CSS)
CSS ကို ၾကည့္ရင္သာဘာမွ မဟုုတ္ေပမယ့္ တျခား code ေတြေရးသလိုပဲ သူ႔ကိုလည္း ဂရုုစိုက္ၿပီး ေသခ်ာ organize
လုုပ္သင့္ပါတယ္။
Using @import in css is not a good habit

css file ထဲမွာ ေနာက္ file တစ္ခုကို ခ်ိတ္ခ်င္တဲ့ အခါက်ရင္ @import ကုုိ သံုးေလ့ရွိပါတယ္။ အဲလိုလုပ္တာက ေျပာရရင္
မေကာင္းပါဘူး။ ဘာလို႔လဲဆိုေတာ့ import ကို သံုးလိုက္လို႔ HTTP Request တစ္ခု ေလ်ာ့မသြားပါဘူး။ ေလ်ာ့မသြားတဲ့ အျပင္ ကိုယ္ခ်ိတ္
လိုက္တဲ့ css file က size ႀကီးတယ္ဆိုရင္ သူ႕ကို loading လုုပ္လို႔ မၿပီးမခ်င္း style ေတြက ျပမွာမဟုုတ္ပါဘူး။ ဥပမာ။ ။ html ထဲမွာ
ခ်ိတ္ထားတာက style.css ဆိုပါစို႔။ အဲဒီ style.css ထဲမွာမွ တျခား reset.css အစရွိသျဖင့္ ကို @import နဲ႕ ထည့္ထားတယ္ဆိုရင္ reset.
css ကို loading လုုပ္လို႔မၿပီးမခ်င္း style.css က လည္း loading မၿပီးေသးတဲ့ သေဘာျဖစ္ေနတဲ့ အတြက္ style.css ထဲမွာ ေရးထားတဲ့
style ေတြကလည္းျပဦးမွာ မဟုုတ္ပါဘူး။ အဲဒီ အတြက္ ပိုၿပီးေတာင္ ၾကာသြားေစပါတယ္။
Use CSS Preprocessors

အေပၚမွာ ေျပာခဲ့တဲ့ ျပႆနာေတြကို ေျဖရွင္းဖို႔ အတြက္ CSS Preprocessors ေတြကို သံုးသင့္ပါတယ္။ CSS prepro-
cessor ေတြကိုသံုးရင္ လည္း file ေတြကို ခြဲေရးတာပါပဲ။ ဒါေပမယ့္ သူက ေနာက္ဆံုးေရွ႕ကိုထုတ္ေပးတဲ့ အခါက်ရင္ compile လုုပ္ၿပီးမွ
css file တစ္ခုပဲထုတ္ေပးတာျဖစ္ပါတယ္။ ဒါ့အျပင္ CSS preprocessors ေတြကိုသံုးရင္ variables, mixins, nested blocks နဲ႔ in-
heritance စတာေတြကို ပါသံုးလို႔ရတဲ့ အတြက္ development process ကိုလည္းအမ်ားႀကီး ျမန္ဆန္ေစပါတယ္။ CSS preprocessors
ေတြထဲမွာ popular အျဖစ္ဆံုးကေတာ့ LESS, Sass နဲ႕ Stylus တို႔ပဲျဖစ္ပါတယ္။ CSS preprocessors ေတြအေၾကာင္းသိခ်င္ရင္ သူတို႔ရဲ႕
သက္ဆိုင္ရာ website ေတြမွာ သြားေလ့လာႏိုင္ပါတယ္။ ဒီလ {echo} ထဲမွာ လည္း သက္ပိုင္ဦးက Write your CSS with LESS ဆိုတဲ့
ေခါင္းစဥ္နဲ႔ ေရးထားပါတယ္။
Write better CSS

CSS ကို ေရးတဲ့ အခါမွာ ေတာ္ေတာ္မ်ားမ်ားက performance အတြက္ ေသခ်ာ ဂ႐ုုစိုက္ၿပီး မေရးျဖစ္ၾကပါဘူး။ CSS
ကလည္း ျဖစ္သလိုေရးရင္ page render လုုပ္တဲ့ အခါမွာ performance က်ေစပါတယ္။ CSS က selector ေတြကို ဖတ္တဲ့ အခါမွာ
right to left ကို ဖတ္ပါတယ္။ ဒါေၾကာင့္ မလိုအပ္ဘဲ parent selector ေတြထည့္တဲ့ အခါမွာ style apply လုုပ္ရမယ့္ element ကို
ေတြ႕ၿပီးသားျဖစ္ရဲ႕နဲ႔ parent ေတြကို မလိုအပ္ဘဲ ထပ္ၿပီး သြားရွာေနရတဲ့ အတြက္ အခ်ိန္အနည္းငယ္ပိုၾကာေစႏိုင္ပါတယ္။ CSS selec-
tor ေတြမွာ ID, Class, Tag, Universal အစဥ္လိုက္အတုုိင္း render speed ျမန္ပါတယ္။ ဒါေၾကာင့္ အားလံုးထဲမွာ ID က အျမန္ဆံုးပါပဲ။
ဒါေၾကာင့္ ေရးရင္ ေအာက္က လိုမေရးသင့္ ပါဘူး။ ID ဆိုတာ တစ္ခုပဲရွိတယ္လို႔သတ္မွတ္တဲ့ အတြက္ Tag ကို ထည့္လိုက္တဲ့ အခါမွာ
အလကား အလုုပ္ပိုလုပ္ေနရပါလိမ့္မယ္။
div#content_wrapper {
width: 80%;
}
File Size
CSS style ေတြအားလံုးကို render လုုပ္ဖို႔က အဲဒီ file ကို အရင္ ဆံုး load လုုပ္ရမွာ ျဖစ္တဲ့ အတြက္ file size ကလည္း
အေရးႀကီးပါတယ္။ File Size ေသးေအာင္ ဘာေတြလုပ္လို႔ ရမလဲဆိုေတာ့ code ေတြကို က်စ္က်စ္လစ္လစ္ ျဖစ္ေအာင္ ေရးသင့္ပါတယ္။
style တူတာေတြေပါင္းေရးသင့္ပါတယ္။
ဥပမာ။ ။ ဒီလိုေရးမဲ့အစား
#main_content {
float:left;
background: #f2f2f2;
padding: 10px;
}
#sidebar {
float:left;
background: #000;
padding:10px;
}
ဒီလိုေရးသင့္ပါတယ္။
#main_content, #sidebar {
float:left;
padding:10px;
}
#main_content {
background: #f2f2f2;
}
#sidebar {
background: #000;
}
ဒီမွာက example ျပထားတာက နည္းေနေတာ့ သိပ္မသိသာသလိုျဖစ္ရင္ျဖစ္ေနပါလိမ့္မယ္။ ဒါေပမယ့္ ေသခ်ာတာကေတာ့ ေအာက္က
code က render လုုပ္ရင္ ပိုျမန္ မွာေသခ်ာပါတယ္။ ဘာလို႔လဲဆိုေတာ့ အေပၚက code အတိုင္းဆိုရင္ တူတဲ့ style ေတြအတြက္ ႏွစ္ခါ
apply လုုပ္ရမွာျဖစ္ၿပီး ေအာက္က code မွာဆို တစ္ခါပဲလုပ္ရမွာပါ။

#content_wrapper {
margin-top: 10px;
margin-left:15px;
margin-bottom: 20px;
margin-right: 22px;
}
ဒီေနရာမွာ အေပၚကလိုေရးမယ့္ အစား ပံုစံ အတိုျဖစ္တဲ့ margin: 10px 22px 20px 15px; ဆိုၿပီးေရးသင့္ပါတယ္။
#content_wrapper {
margin: 10px 22px 20px 15px;
}
ေနာက္ဆံုးတစ္ခုက project အားလံုးၿပီးသြားၿပီဆိုရင္ code ေတြကို minify လုုပ္သင့္ပါတယ္။ minify လုုပ္တယ္ဆိုတာက

မလိုအပ္တဲ့ space ေတြ new lines ေတြကို ဖ်က္ပစ္လုိက္တာပါ။ အဲဒီ အတြက္ file size ကလည္း သိသိသာသာေလ်ာ့သြားပါလိမ့္မယ္။
minify လုုပ္ဖို႔အတြက္ YUI compressor အစရွိတဲ့ tools ေတြနဲ႔ လုုပ္လို႔ရပါတယ္။ ေနာက္ၿပီး css file ေတြကို အရင္ loading လုုပ္ေစဖို႔
အတြက္ Head ထဲမွာ ခ်ိတ္သင့္ပါတယ္။
Javascript
Javascript မွာလည္း CSS လိုပါပဲ။ HTTP Request ေတြနည္းေအာင္ file ေတြမလိုအပ္ဘဲ အမ်ားႀကီး ခြဲမေရးသင့္ပါဘူး။
ၿပီး ေတာ့ အားလံုးၿပီးသြားလို႔ production stage ေရာက္သြားၿပီဆိုရင္ minify လုုပ္သင့္ပါတယ္။
Use Modular Script Loader
တကယ္လို႔ ကိုယ္ေရးတဲ့ project မွာ javascript file ေတြပါတဲ့ အခါမွာ RequireJS လိုမ်ိဳး module loader မ်ိဳးကို သံုးသင့္
ပါတယ္။ RequireJS မွာ ဆိုရင္ main.js ထဲမွာ require() ဆိုတဲ့ function ကိုသံုးၿပီး တျခား script ေတြကို load လုုပ္ပါတယ္။ html file
ထဲမွာကေတာ့ require.js တစ္ခုပဲ link လုုပ္ထားပါတယ္။
<!DOCTYPE html>
<html>
<head>
<title>My Sample Project</title>

<script data-main="scripts/main" src="scripts/require.js"></
script>
</head>
<body>
<h1>My Sample Project</h1>
</body>
</html>
require(["helper/util"], function(util) {
//This function is called when scripts/helper/util.js is loaded.
//If util.js calls define(), then this function is not fired until
//util’s dependencies have loaded, and the util argument will hold
//the module value for "helper/util".
});
အားလံုးၿပီးသြားလို႔ production stage ကိုေရာက္ၿပီဆိုရင္ေတာ့ optimizer ကို သံုးၿပီး ရွိသမွ် script ေတြအားလံုးကို
တစ္ခုတည္းေပါင္းၿပီး minify လုပ္ေပးလုိက္လို႔ရပါတယ္။
Web Assets ေတြကို Organize လုုပ္တဲ့ နည္းလမ္းေတြအမ်ားႀကီး ရွိတဲ့ အထဲက မွာ တခ်ိဳ႕ကို ေျပာခဲ့ တာျဖစ္ပါတယ္။
အခုုေတာ့ ဒီေလာက္နဲ႔ပဲ အဆံုးသတ္လိုက္ပါေတာ့မယ္။
Interview with
Ko Myint Kyaw Thu
r v i e w
In t e
Soe Thiha Naung

Myanmar Tutorials ရဲ႕ Main Contributor တစ္ေယာက္ Myanmar
Links မွာ Web Development အေၾကာင္း သင္တဲ့ဆရာ၊
Web Development အေၾကာင္းႏွင့္ ပတ္သက္ရင္ ဘာျဖစ္ျဖစ္
စိတ္ဝင္စားၿပီး Myanmar Links Web Development Team ကို
ဦးေဆာင္လႈပ္ရွားေနတဲ့ နည္းပညာသမား တစ္ေယာက္
Facebook : /soethihanaung
Website : http://soethiha.me
Interview With
Ko Myint Kyaw Thut
မဂၤလာပါ ကိုျမင့္ေက်ာ္သူေရ။ ကၽြန္ေတာ္ အခုပဲ Chin Lone ဆိုတဲ့ ဂိမ္းကို ေဆာ့ေနတာဗ်။ Graphic အပိုင္းမွာေရာ An-
imation အပိုင္းမွာပါ အေတာ္ေလး ျပည့္စုံတယ္ဗ်။ အဓိကအားျဖင့္ ျခင္းလုံး အားကစားနည္းနဲ႔ ပတ္သက္ၿပီး လွပတဲ့ ခတ္ကြက္ေတြကို
ထည့္သြင္းတဲ့ ေနရာမွာ အေတာ္ေလးကို ျပည့္စုံတာ ေတြ႕ရပါတယ္။ ျမန္မာ့ျခင္းလုံးကို ကိုယ္စားျပဳနိုင္တဲ့ ဂိမ္းျဖစ္တဲ့အတြက္ တကယ့္ကို
ေက်းဇူးတင္ပါတယ္။
ကၽြန္ေတာ္ ပထမဦးဆုံး ေမးလိုတာက ဂိမ္းေလာကႀကီးထဲမွာ Game Developer ေတြအေနနဲ႔ အနိမ့္အျမင့္ အတက္အက်ေပါင္း

ေျမာက္မ်ားစြာကို ျဖတ္ေက်ာ္ၾကရတယ္လို႔ သိထားပါတယ္။ ကုမၸဏီအႀကီးႀကီးေတြ လက္ဝါးႀကီးအုပ္ထားတဲ့ ေစ်းကြက္၊ ေနာက္ေတာ့
ေသးေသးေလးေတြပါ ဝင္တိုးလို႔ ရလာတဲ့ မိုဘိုင္း ဂိမ္းေစ်းကြက္၊ ခိုးကူးေစ်းကြက္ စသည္ျဖင့္ ေစ်းကြက္ေပါင္း မ်ားစြာမွာ ရွင္သန္ ရပ္တည္ဖို႔
အင္မတန္ ခက္တဲ့ အေနအထားမွာ ျမန္မာျပည္မွာ အေျခခ်ထားတဲ့ ျမန္မာ Game Developer တစ္ေယာက္ အေနနဲ႔ ဘယ္လို ရပ္တည္
လႈပ္ရွားေနတယ္ ဆိုတဲ့ အေၾကာင္းကို သိခ်င္ပါတယ္ခင္ဗ်။
ဂိမ္းေလာကမွာ ကုမၸဏီအႀကီးေတြေရာ၊ အေသးေတြေရာ အတူတကြ ရွင္သန္ႏိုင္တဲ့ ရွားရွားပါးပါး ေစ်းကြက္တခုပါ။ Indie

ေတြဘယ္လိုမွ မရွင္သန္ႏိုင္တဲ့ movie industry နဲ႕ ႏိုင္းယွဥ္ၾကည့္ႏိုင္ပါတယ္။ ေနာက္ၿပီး ခိုးကူးမႈ piracy ရဲ႕ ထိခိုက္မႈ အတန္အသင့္
ရွိေပမဲ့ consumers pool က အရမ္းႀကီးတဲ့အတြက္ အျခား music industry ေတြလို industry ပ်က္ေလာက္ေအာင္ မထိခိုက္ပါဘူး။
ဒါကလည္း ေကာင္းတဲ့အခ်က္ တစ္ခုပါပဲ။ ကမၻာစီးပြားေရးပ်က္ကပ္ ဆိုက္တုန္းကေတာင္ game industry မွာဆိုးဆိုးရြားရြား ထိခိုက္တာ
မရွိပါဘူး။ ဒါေပမဲ့ အနိမ့္အျမင့္ အတက္အက်ေတြ မရွိတာေတာ့ မဟုတ္ပါဘူး။ ပါရာဒိုင္းအသစ္ ေျပာင္းတိုင္းမွာ ဂိမ္းေလာကကို
ေတာ္ေတာ္ႀကီး လႈပ္ရွားေစပါတယ္။ ဥပမာ၊ PC ေစ်းကြက္ကေန Console ေစ်းကြက္အကူးမွာ အရင္ PC တုန္းက ေအာင္ျမင္ခဲ့တဲ့
ကုမၸဏီအႀကီးအေသးေတြ အကုန္က်ရႈံးသလို၊ နဂိုက console game ထုတ္တဲ့ အေသးစား ကုမၸဏီေလးေတြ အရမ္းေအာင္ျမင္ၿပီး
ကုမၸဏီအႀကီးေတြ ျဖစ္လာတာမ်ိဳးပါ။ ဒါမ်ိဳးက ဆယ္စုႏွစ္ တစ္ခုမွာ တခါေလာက္ ႀကဳံေလ့ရွိေတာ့ အရမ္းကို အတက္အက် ျမန္တဲ့ in-
dustry လို႔ ေျပာလို႔ရမယ္ ထင္ပါတယ္။ Developers ေတြအေနနဲ႔လည္း ဒီလို ပါရာဒိုင္းအေျပာင္းေတြမွာ လိုက္ေျပာင္းဖို႔ မလြယ္ပါဘူး။
အမ်ားအားျဖင့္ က်ရႈံးတဲ့ထဲေတာ့ ပါသြားတတ္ပါတယ္။ ေနာက္မွ ျပန္႐ုံးထႏိုင္တဲ့သူပဲ ဒီ industry မွာ ရွင္က်န္ခဲ့ပါတယ္။
Interview With
Ko Myint Kyaw Thu
Programmatic Thinking ပိုင္းမွာ Linear Programming ေတြနဲ႔ Game Development ပိုင္း သြားလို႔ မရဘူးလို႔ သိထားပါတယ္။
ဒါေပမယ့္ အဲဒီလို Non-linear Programming ပုံစံေတြက ဒီမွာ အမ်ားအားျဖင့္ မသင္ၾကပါဘူး။ သူမ်ားနိုင္ငံေတြမွာေတာ့ Alice စသည္ျဖင့္
Non-Linear Programmatic Thinking ေတြကို သင္တဲ့ ပုံစံေတြ ရွိပါတယ္။ အဲဒီလို အေနအထားမွာ Game Development ပိုင္းကို
စိတ္ဝင္စားတဲ့သူေတြ အေနနဲ႔ ဘယ္လိုပုံစံ သင္ယူသင့္တယ္၊ ဘာေတြ ေလ့လာသင့္တယ္ဆိုတာကို လမ္းညႊန္ေပးပါဦး။
Programming thinking ပိုင္းမွာ game development ကအျခား application development နဲ႕ေတာ့ အေတာ္ကြာပါတယ္။
ဒါေပမဲ့ programming concept မိေနမယ္ဆိုရင္ အလြယ္တကူ ေျပာင္းလို႔ရမွာပါ။ အဓိက real-time မွာေရးတတ္ဖို႔ လိုအပ္သလို၊ codes
ေတြကို class design ေတြ data model ေတြနဲ႕ မစဥ္းစားဘဲ၊ ဇာတ္ေကာင္ေတြ၊ ဇာတ္လမ္းေတြ ေရးေနတယ္လို႔ ျမင္တတ္ဖို႔ လိုပါလိမ့္မယ္။
ကိုျမင့္ေက်ာ္သူအေနနဲ႔ ျမန္မာ့ စစ္တုရင္ဂိမ္း၊ အခု ျခင္းလုံးဂိမ္း ေနာက္ေတာ့ ဆိုက္ကားဆရာ ငပိန္၊ စသည္ျဖင့္ ျမန္မာမႈဆန္တဲ့ ဂိမ္းေတြ
တစ္ခုၿပီး တစ္ခု ဖန္တီးေနတာ ေတြ႕ရပါတယ္။ ကၽြန္ေတာ္ အနီးစပ္ဆုံး ကစားဖူးတာကေတာ့ ျခင္းလုံး ဂိမ္းေပါ့။ အဲဒီ ဂိမ္းအေနနဲ႔
ျမန္မာမႈဆိုေပမယ့္ တစ္ကမၻာလုံးက လူေတြပါ ေဆာ့လို႔ရနိုင္ပါတယ္။ ကၽြန္ေတာ့္အျမင္အရ ျမန္မာမႈဆန္ဆန္ေတြထဲကေန ဂိမ္းေတြ
ထြက္လာစရာ အမ်ားႀကီး ရွိေသးတယ္လို႔ ထင္ပါတယ္။ ျမန္မာေတြအေနနဲ႔ ေဆာ့လို႔ ရနိုင္သလို တစ္ကမၻာလုံး အတိုင္းအတာ အေနနဲ႔လည္း
ထိုးေဖာက္လို႔ ရနိုင္စရာေတြ ရွိေနတယ္လို႔ ျမင္ပါတယ္။ ကိုျမင့္ေက်ာ္သူအေနနဲ႔ အဲဒီ ေပါင္းကူးအေပၚမွာ ဘယ္လို တည္ေဆာက္တယ္၊
ဘယ္လို အျမင္ေတြရွိတယ္ဆိုတာ သိခ်င္ပါတယ္။
ကြၽန္ေတာ့္အျမင္ ကိုယ့္ႏုိင္ငံရဲ႕ national identity ကို ေစာင့္ေရွာက္ဖို႕ ႏိုင္ငံသားတိုင္းမွာ တာဝန္ရွိပါတယ္။ ယဥ္ေက်းမႈ

အႏုပညာဆိုတာ ဒါ ႏိုင္ငံတခုရဲ႕ national identity ပါပဲ။ သို႔ေသာ္ တခါးပိတ္ၿပီး အိမ္တြင္းေအာင္းေနတာကို ေစာင့္ေရွာက္တယ္လို႔ မေခၚဘူး။
ေခတ္နဲ႕ အညီလိုက္ေလ်ာညီေထြ မလုပ္ႏိုင္ရင္ ယွဥ္ေက်းမႈ တစ္ခုက ေပ်ာက္ကြယ္သြားမွာပဲ။ အခုေခတ္က ဒီဂ်စ္တယ္ ေခတ္ျဖစ္တာနဲ႕
အညီ ယဥ္ေက်းမႈ အႏုပညာေတြကိုလည္း ဒီဂ်စ္တယ္ ေျပာင္းႏိုင္မွ ေနာင္တေခတ္မွာ ဆက္လက္ ရွင္က်န္ႏိုင္မယ္လို႔ ယုံၾကည္ပါတယ္။
ဂိမ္းေတြဟာ အႏုပညာေတြကို ထိမ္းသိမ္းဖို႔ အေကာင္းဆုံး ဒီဂ်စ္တယ္ ပလက္ေဖာင္းေတြပါ။ ဒါေၾကာင့္ ကြၽန္ေတာ္တို႔ ကုမၸဏီကေနၿပီး၊
ဒီဘက္ႏွစ္ေတြမွာ ျမန္မာမႈပါတဲ့ ဂိမ္းေတြကို ဆက္တိုက္ဆိုသလို ျဖန္႔ခ်ိသြားဖို႕ ရွိပါတယ္။ ေပါင္းစပ္တဲ့အခါ မူလ လက္ရာေတြ မပ်က္ေစဖို႔
အေတာ္ႀကီး ဂ႐ုစိုက္ရပါတယ္။ ဥပမာ၊ စစ္တုရင္ဂိမ္းတို႔၊ ဘုရင့္ေနာက္ အြန္လိုင္းတို႔ကို လုပ္တဲ့အခါ ကိုယ္စလုပ္ကတည္းက မွားသြားရင္
garbage in garbage out ျဖစ္မွာစိုးလို႔ နားလည္တတ္ကြၽမ္းတဲ့သူေတြကို ေသခ်ာတိုင္ပင္ၿပီးမွ ျပင္ဆင္ေနတာပါ။
Interview With
Ko Myint Kyaw Thu
ကိုျမင့္ေက်ာ္သူအေနနဲ႔ ဂိမ္းေလာကကို ျဖတ္သန္းလာတာ အခ်ိန္အေတာ္ၾကာၿပီ ထင္ပါတယ္။ အဲဒီလို ျဖတ္သန္းလာတဲ့

ကာလအတြင္းမွာ ေစ်းကြက္ အေျပာင္းအလဲေပါင္း ေျမာက္မ်ားစြာကိုလည္း ေတြ႕ႀကဳံလာရမွာ အေသအခ်ာပါပဲ။ ကၽြန္ေတာ္ သိလိုတာက
ေစ်းကြက္အေနအထားေတြ ဘယ္လို ေျပာင္းလဲလာတယ္၊ ဘယ္လို အေျခအေနေတြ ရွိတယ္၊ အခုလက္ရွိအေနအထား ေစ်းကြက္က
ဘယ္လိုရွိတယ္ဆိုတာကို သိခ်င္ပါတယ္။
ကြၽန္ေတာ္ PC ေခတ္ကို ျဖတ္သန္းခဲ့ၿပီ။ ေနာက္ၿပီး console ေခတ္ေပါ့။ အခုေနာက္ဆုံးကေတာ့ ကြၽန္ေတာ္တို႕ mobile

ေခတ္ကို ေရာက္ေနပါၿပီ။ digital content ေတြရဲ႕ အႀကီးဆုံးေစ်းကြက္ကို သိပ္မၾကာခင္ မိုဘိုင္းက သိမ္းပိုက္ေတာ့မွာပါ။
ကိုျမင့္ေက်ာ္သူအေနနဲ႔ မၾကာေသးခင္က ဂ်ပန္နိုင္ငံက ဂိမ္းျပပြဲတစ္ခုမွာ ျမန္မာနိုင္ငံ ကိုယ္စားျပဳအေနနဲ႔ သြားေရာက္ ျပသခဲ့တယ္လို႔

သိရပါတယ္။ အဲဒီလို သြားခဲ့တဲ့ အေတြ႕အႀကဳံကို ျပန္လည္ ေဝမၽွေပးပါဦး။ ဘယ္လို အခြင့္အလမ္းေတြ ရလာတယ္၊ ဘယ္လို
အခြင့္အလမ္းေတြ ရွိတယ္ဆိုတာ သိခ်င္ပါတယ္။
ဂ်ပန္ကို ျမန္မာႏိုင္ငံ ကိုယ္စားျပဳၿပီး သြားေရာက္ ျပသခဲ့တာ အရမ္း ဂုဏ္ယူမိပါတယ္။ ဒါက ကြၽန္ေတာ္တို႔ Myanmar
game industry ရဲ႕ chapter အသစ္လို႔ ေျပာလို႔ရမယ္ ထင္တယ္။ ေနာင္ႏွစ္ေတြဆိုရင္ အျခား ျမန္မာ game developer ေတြအတြက္ပါ
အာရွနဲ႔ ဂ်ပန္ေစ်းကြက္ေတြမွာ သြားေရာက္ျပသဖို႔အတြက္ အခြင့္အလမ္းအသစ္ ဖြင့္ေပးလိုက္တယ္လို႔ ေျပာလို႔ရမယ္ ထင္တယ္။ ေနာက္ၿပီး
ကြၽန္ေတာ္တို႔ ႏိုင္ငံက ထုတ္တဲ့ ဂိမ္းေတြဟာ ႏိုင္ငံတကာ level မွာ အမ်ားႀကီး နိမ့္က်မေနဘူးဆိုတာကို ေတြ႕ခဲ့ရပါတယ္။ ဒါေၾကာင့္
ကြၽန္ေတာ္တို႔ေတြ ပိုၿပီး ႀကိဳးစားအားထုတ္ရင္ international level ကိုေကာင္းေကာင္း သြားလို႔ရေနၿပီလို႔ ျမင္ေတြ႕ခဲ့ရပါတယ္။
အခုလို အခ်ိန္ေပး ေျဖၾကားေပးတဲ့ ကိုျမင့္ေက်ာ္သူကို {echo} မဂၢဇင္းမွ ေက်းဇူး အထူးတင္ရွိပါတယ္။

Create Note Application with
Laravel 4
P H P
Nyan Lynn Htut

Myanmar Links Professional Web Development Team မွာ Web
Developer တစ္ေယာက္အေနနဲ႕ လုပ္ကိုင္ေနသူ တစ္ေယာက္၊ PHP
Open Source CMS တစ္ခုျဖစ္တဲ့ Reborn CMS ရဲ႕ Core Develop-
er တစ္ေယာက္၊ REST API နဲ႕ Frontend Javascript Application
ေတြအေၾကာင္းကို စိတ္ဝင္စားသူ။
Facebook : facebook.com/nyanlynnhtut
Twitter : @nyanlynnhtut
Github : @nyanlynnhtut
Create Note Application With Laravel 4
ဒီတစ္ပတ္ Echo ပရိသတ္ အတြက္ ကၽြန္ေတာ္ Tutorial တစ္ခုေရးဖို႔ စဥ္းစားမိပါတယ္။ ဘာအေၾကာင္းအရာကို

ေရးရင္ ေကာင္းမလဲေတြးရင္းနဲ႔ အခုေနာက္ပိုင္း PHP Framework ေလာကမွာ ေရပန္းစားေနတဲ့ Laravel 4 အေၾကာင္းကို ေရးမယ္လို႔
အေတြးရပါတယ္။ ဒါေၾကာင့္ Simple Note Applicaton တစ္ခုကို ေရးမယ္လို႔ ဆံုးျဖတ္ၿပီးေတာ့ Echo ပရိသတ္ႀကီးအတြက္
တင္ဆက္ေပးလိုက္ပါတယ္။
Step 1
ကၽြန္ေတာ္တို႔ Application အတြက္ လိုအပ္တဲ့ Database Design ကို အရင္ဆံုး စဥ္းစားၾကပါမယ္။ Simple Application
တစ္ခုပဲ ျဖစ္တဲ့အတြက္ လိုအပ္တဲ့ Data Design ကေတာ့ ေတာ္ေတာ္ေလးကို ရိုးရွင္းပါမယ္။
id [pk, ai]
title [varchar]
content [text]
user_id [int]
created_at [datetime]
updated_at [datetime]
ဒါကေတာ့ application အတြက္ လိုအပ္တဲ့ field ေတြပဲ ျဖစ္ပါတယ္။ User Table အတြက္ကေတာ့ ဒီလိုမ်ိဳးရွိပါမယ္။
id [pk, ai]
username [varchar]
email [varchar]
user_id [int]
password [varchar]
created_at [datetime]
updated_at [datetime]
ဒီလိုအပ္တဲ့ Data Table ေတြကို ကၽြန္ေတာ္တို႔အေနနဲ႔ PHPMyAdmin ကေနသြားၿပီးေတာ့ ေဆာက္ေပးရင္လည္း ရေပမယ့္

Laravel မွာပါတဲ့ migration ကို အသံုးျပဳၿပီးေတာ့ ေရးပါမယ္။ Laravel မွာ migration အတြက္လိုအပ္တဲ့ file ကို command line ကေန
generate လုပ္လို႕ရပါတယ္။ ဒီအတြက္ terminal ကေနၿပီးေတာ့ project root folder ထဲကိုသြားပါမယ္ (Window မွာဆိုရင္ေတာ့ cmd
ကေနပါ)။
php artisan migrate:make –table="user" create_user_table
Terminal ကေန ဒီ command ကို run လိုက္မယ္ဆိုရင္ app/database/migrations folder ထဲမွာ create_user_table ဆိုတဲ့ နာမည္နဲ႔
file တစ္ခုရလာပါမယ္။ (file name ရဲ႕ အေရွ႕မွာေတာ့ နံပါတ္ေတြပါ ပါလိမ့္မယ္)။
<?php
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;
class CreateUserTable extends Migration {
/**
* Run the migrations.
*
* @return void
*/
public function up()
{
Schema::table('user', function(Blueprint $table)
{
//
});
}
/**
* Reverse the migrations.
*
* @return void
*/

public function down()

{
Schema::table('user', function(Blueprint $table)
{
//
});
}
}
ဒါကေတာ့ Laravel ကေန migration လုပ္ဖို႔အတြက္ ဖန္တီးေပးလိုက္တဲ့ file ပဲျဖစ္ပါတယ္။ ဒီ method ႏွစ္ခုထဲမွာ ကၽြန္ေတာ္တို႔ရဲ႕
လိုအပ္တဲ့ code ေတြကို ေရးပါမယ္။ User Table ကို create လုပ္ခ်င္တာျဖစ္တဲ့အတြက္ေၾကာင့္ up() method ထဲမွာ user table ကို
create လုပ္တဲ့ code ကိုေရးပါမယ္။ Table create အတြက္ Laravel 4 ရဲ႕ Schema Library ကို သံုးပါမယ္။
$table->create();
$table->increments(‘id’);
$table->string(‘username’);
$table->string(‘email’);
$table->string(‘password’);
$table->timestamps();
ဒါကေတာ့ up() method ထဲက Schema::table ဆိုတဲ့ အထဲမွာ ေရးရမွာပါ။ ဒီ code ေတြရဲ႕အေၾကာင္းကိုေတာ့ အေသးစိတ္
မရွင္းျပေပးေတာ့ပါဘူး။ Laravel documentation ထဲမွာ ရွင္းျပေပးထားတာေတြ ျဖစ္တဲ့အတြက္ အဲ့ဒီမွာသြားၿပီးေတာ့
ဖတ္ရႈေလ့လာႏိုင္ပါတယ္။
ၿပီးသြားရင္ down() အတြက္ေရးပါမယ္။ ဒါေၾကာင့္ down() ထဲမွာ ရွိတဲ့ code ေတြအားလံုးကို ဖ်က္လိုက္ပါ။ ၿပီးသြားရင္
table ကို ျပန္ဖ်က္တဲ့ ဒီ code line ကို ေရးပါမယ္။
Schema::dropIfExists("user");
ၿပီးသြားရင္ note table ကို ဖန္တီးရပါဦးမယ္။ ဒါေပမယ့္ ကၽြန္ေတာ္တို႔ေတြ note table အတြက္ မလုပ္ခင္မွာ အခုလက္ရွိ migration ကို
အရင္စမ္းၾကည့္ၾကပါမယ္။
Terminal ထဲမွာ -
php artisan migrate
ဆိုတဲ့ command ကို run ၾကည့္ပါ။ Unknown database ဆိုတဲ့ error ကို ေတြ႕ရပါမယ္။ ဘာေၾကာင့္လဲဆိုေတာ့ ကၽြန္ေတာ္တို႔ေတြ
အေနနဲ႔ application အတြက္ လိုအပ္တဲ့ database ကို မခ်ိတ္ေပးရေသးလို႔ပါ။ ဒီအတြက္ အရင္ဆံုး PHPMyAdmin ကေနျဖစ္ျဖစ္ da-
tabase အသစ္တစ္ခု ေဆာက္ေပးလိုက္ပါ။ ကၽြန္ေတာ္ကေတာ့ name ကို echo_l4 လို႔ေပးလိုက္ပါတယ္။ ၿပီးရင္ app/config/da-
tabase.php file မွာ ကၽြန္ေတာ္တို႔ရဲ႕ setting ေတြကို သြားေျပာင္းေပးရပါမယ္။ ကၽြန္ေတာ္ကေတာ့ connections=>mysql=>-
database ဆိုတဲ့ ေနရာတစ္ခုမွာပဲ ေျပာင္းဖို႔လိုပါတယ္။ က်န္တဲ့ setting ေတြကအတူတူပဲ ျဖစ္ေနတာေၾကာင့္ ေျပာင္းစရာမလိုပါဘူး။
database setting ကို မွန္ေအာင္ခ်ိန္းၿပီးၿပီဆိုရင္ေတာ့ ခုနက terminal မွာ run ခဲ့တဲ့ command ကို ျပန္ run ၾကည့္ပါ။ ၿပီးသြားရင္PH-
PMyAdmin ကေန ကၽြန္ေတာ္တို႔ database ကိုသြားၾကည့္ရင္ user table နဲ႔ migrations table ဆိုတာကို ေတြ႕ရပါမယ္။ user table
ကေတာ့ ကၽြန္ေတာ္တို႔ ဖန္တီးလိုက္တဲ့ table ျဖစ္ၿပီးေတာ့ migrations table ကေတာ့ Laravel ကေန Migrations Record အတြက္
ဖန္တီးလိုက္တဲ့ table ပါ။
ၿပီးသြားရင္ note table အတြက္ ဆက္ၿပီးေတာ့ ေရးၾကပါမယ္။ အရင္္ဆံုး migrate file ထုတ္မယ္။ ၿပီးရင္လိုအပ္တဲ့ Sche-
ma Design ကို ေရးမယ္။ ၿပီးရင္ migration ကို run ပါမယ္။
php artisan migrate:make --table="note" create_note_table
Terminal မွာ ဒီ command ကို run ၿပီးေတာ့ migrate file ထုတ္ၿပီးသြားၿပီဆိုရင္ ဒါကေတာ့ up() ထဲမွာ ေရးမွာပါ။
$table->create();
$table->increments(‘id’);
$table->string(‘title’);
$table->text(‘content’);
$table->integer(‘user_id’);
$table->timestamps();
ဒါကေတာ့ down() ထဲမွာပါ။
Schema::dropIfExists("note");
ၿပီးသြားရင္ ကၽြန္ေတာ္တို႕ migration ကို run လို႕ရပါၿပီ။
php atrisan migrate
PHPMyAdmin ကေနသြားၾကည့္မယ္ဆိုရင္ ကၽြန္ေတာ္တို႕ database မွာ ကၽြန္ေတာ္တို႕လိုခ်င္တဲ့ data table ေတြရွိေနၿပီ ျဖစ္တဲ့အတြက္
Application ကို စၿပီးေတာ့ ေရးလို႕ရပါၿပီ။
Step 2
Step 2 မွာေတာ့ ကၽြန္ေတာ္တို႔ေတြ အေနနဲ႔ Note အတြက္ CRUD ေတြကို ေရးသားၾကပါမယ္။ ဒီေနရာမွာ
တစ္ခုႀကိဳေျပာခ်င္တာက Note မွာ ပါတဲ့ user ကို ကၽြန္ေတာ္တို႔ေတြ အေသပဲ ေပးခဲ့ၾကပါမယ္။ ဘာလို႔လဲဆိုေတာ့ ကၽြန္ေတာ္တို႔ Au-
thentication ပိုင္းကို ေနာက္မွ ေရးသားမွာ ျဖစ္တဲ့အတြက္ အခုေလာေလာဆယ္ေတာ့ User ကို မခ်ိတ္ခဲ့တာပဲ ျဖစ္ပါတယ္။ ဒီအတြက္
အရင္ဆံုးကၽြန္ေတာ္တို႔ေတြ Note အတြက္ လိုအပ္တဲ့ Controller နဲ႔ Model ကို ေရးၾကပါမယ္။
ဒီအတြက္ app/controllers ထဲမွာ NoteController ဆိုၿပီးေတာ့ file အသစ္တစ္ခုရယ္၊ app/models ထဲမွာ Note
ဆိုၿပီးေတာ့ file အသစ္တစ္ခုရယ္ ေဆာက္ပါမယ္။ (ကၽြန္ေတာ္ကေတာ့ လြယ္ကူေအာင္ HomeController ကို copy ပြားၿပီးေတာ့ အထဲက
မလိုတာေတြကို ဖ်က္လိုက္ပါတယ္)
class NoteController extends BaseController {
public function index()

{
return Response::make('Hello World');
}
ၿပီးေတာ့ app/routes.php မွာ ဒီ Note Controller index method အတြက္ Route သြားေရးေပးလိုက္ပါတယ္။
Route::get('note', 'NoteController@index');
ၿပီးရင္ Browser ကေန http://site_address/public/note ဆိုၿပီး ေခၚၾကည့္ရင္ Hello World ဆိုတာကို ျမင္ရပါမယ္။ ဒီအထိရၿပီ ဆိုရင္
ကၽြန္ေတာ္တို႔ Controller မွာ လိုတဲ့ action methods ေတြကို ေရးပါမယ္။ လိုအပ္မယ့္ method ေတြကေတာ့ -
index [For All Note Lists] [note]
create [For reate New Note] [note/create]
edit [For Edit the Note] [note/edit/:id]
delete [For Delete the Note] [note/delete/:id]
အေနာက္ဆံုးက [] ကြင္းထဲကဟာကေတာ့ uri ပါ။
public function create()

{
// Make Create Process Here
}
public function edit($id)

{
// Make Edit Process Here
}
public function delete($id)

{
// Make Delete Process Here
}
ၿပီးရင္ ဒီအတြက္လိုအပ္မယ့္ route ေတြက္ို app/routes.php မွာ သြားေရးေပးပါမယ္။
Route::any(‘note/create’, ‘NoteController@create’);
Route::any(‘note/edit/{id}’, ‘NoteController@edit’);
Route::get(‘note/delete/{id}’, ‘NoteController@delete’);
ဒါကေတာ့ ေနာက္ထပ္ေရးထားတဲ့ action ေတြအတြက္ လိုအပ္တဲ့ route ေတြပါ။ create နဲ႔ edit မွေတာ့ Route::any() ဆိုၿပီး
သံုးထားတာကို ေတြ႕ႏိုင္ပါတယ္။ က်န္တဲ့ action ေတြအတြက္ကေတာ့ get နဲ႔ေရးထားတာပါ။ ဒါကဘာေၾကာင့္လဲဆိုေတာ့ create နဲ႔ edit
မွေတာ့ ကၽြန္ေတာ္က GET method ေရာ POST method 2 ခုလံုးကို သံုးမွာမို႔လို႔ပါ။
ၿပီးရင္ေတာ့ ကၽြန္ေတာ္တို႔ေတြ Model Class ကို ေရးပါမယ္။
class Note extends Eloquent {

/**
* The database table used by the model.
*
* @var string
*/
protected $table = 'note';
Note Model ကေတာ့ ကၽြန္ေတာ္တို႕ ေလာေလာဆယ္ေရးမွာ ဒီေလာက္ပါပဲ။ Laravel 4 ရဲ႕ Eloquent ORM အစြမ္းေၾကာင့္ ဒီေလာက္ပဲ
ေရးစရာလိုတာပါ။
ၿပီးရင္ create action ကို ေရးၾကပါမယ္။ ကၽြန္ေတာ္တို႔ data passing ေပးဖို႔လိုတာကေတာ့ title, con-
tent ပဲရွိပါမယ္။ created_at, updated_at ကေတာ့ Eloquent ကေန အလိုအေလ်ာက္ ထည့္ေပးသြားပါလိမ့္မယ္။ cre-
ate ေတြ edit ေတြအတြက္ ကၽြန္ေတာ္တို႔ေတြ view file ေတြလိုလာပါၿပီ။ ဒီအတြက္ app/views folder ထဲမွာ note ဆိုတဲ့ fold-
er တစ္ခုအသစ္ေဆာက္ပါမယ္။ ၿပီးရင္ index.blade.php, form.blade.php ဆိုၿပီး view file ႏွစ္ခု အသစ္လုပ္ပါတယ္။
blade.php ဆိုၿပီး extension ကို ေပးထားခဲ့တာကေတာ့ Laravel ရဲ႕ Blade Template Engine ကို သံုးမွာ ျဖစ္တဲ့အတြက္ေၾကာင့္ပါ။
ေနာက္တစ္ခ်က္အေနနဲ႔က ကၽြန္ေတာ္တို႔ေတြ master layout တစ္ခုကို ဖန္တီးပါမယ္။ အဲ့ဒီအတြက္ views ထဲမွာ layouts fold-
er အသစ္တစ္ခုေဆာက္ပါ။ ေဆာက္ၿပီးသြားရင္ master.blade.php ဆိုတဲ့ layout file တစ္ခုကို ဖန္တီးပါမယ္။ ၿပီးရင္ CSS
အတြက္ေတာ့ bootstrap 3 ကို သံုးမွာ ျဖစ္တဲ့အတြက္ေၾကာင့္ Bootstrap site ကေနသြားၿပီး down ပါတယ္။ Down ၿပီးရင္ public fold-
er ထဲကို ကူးထည့္လိုက္ပါ။ bootstarp/dist/css ကို public/css၊ bootstrap/dist/js ကို public/js ၿပီးေတာ့
bootstrap/dist/fonts ကို public/fonts ထဲကို ကူးလိုက္ပါတယ္။
Create Helper File

ဒီေနရာမွာ တစ္ခုျဖတ္ၿပီးေတာ့ ေျပာစရာရွိတာက ကၽြန္ေတာ္တို႔က Bootstrap ကို သံုးတာျဖစ္တဲ့အတြက္ Form
ေရးတဲ့ေနရာမွာ bootstrap က format အတိုင္းေရးေပးရပါတယ္။ ဆိုလိုတာက wrapping လုပ္ထားတဲ့ div ေတြ class name ေတြကို
သတ္မွတ္ထားတဲ့အတိုင္း ေရးရပါတယ္။ အဲ့ဒီအတြက္ Bootstrap ရဲ႕ Form Field ပံုစံကို ထပ္ခါထပ္ခါမေရးေအာင္လို႔ helper function
ေရးထားပါမယ္။ ေနာက္ၿပီးေတာ့ From ကို submit လုပ္ရင္လည္း create, edit ဒီ action ထဲကိုပဲ ျပန္လာမွာ ျဖစ္တဲ့အတြက္ REQUEST_
METHOD က POST လားဆိုတာကို စစ္ဖို႔လိုပါတယ္။ ဒီအတြက္ -
Input::server(‘REQUEST_METHOD’) == 'POST'
ဒီလိုမ်ိဳး စစ္ေပးရပါတယ္။ ဒါကိုလည္း ေရးရတာလြယ္သြားေအာင္လို႔ helper function တစ္ခုေရးထားပါမယ္။ ဒီအတြက္ helper function
ေတြကို ဘယ္ေနရာမွာ ေရးထားမလဲဆိုတာကို အရင္ရွင္းျပေပးပါမယ္။ app folder ထဲမွာ helpers.php ဆိုၿပီး file တစ္ခုေဆာက္လိုက္ပါ။
ဒီထဲမွာ ကၽြန္ေတာ္တို႔ရဲ႕ function ေတြကိုေရးပါမယ္။ ဒီ helper file ကို load လုပ္ဖို႔ရာအတြက္ app/start folder ထဲက global.php
မွာေရးပါမယ္။ ဒီ file ရဲ႕ ေအာက္ဆံုးမွာ ဒီလိုေရးလိုက္ပါတယ္။
/*
|-----------------------------------------------------------------
| Extended Helper Functions for Note Application
|-----------------------------------------------------------------
|
| This is helper functions for Laravel Note Simple Application
| We make Bootstrap Style Form Field
| and is_post() in this helpers file
|
*/
require app_path().'/helpers.php';
app_path() ဆိုတာကေတာ့ app folder path ပါ။ ၿပီးရင္ helpers file မွာ function 3 ခုေရးပါတယ္။ ပထမတစ္ခုက text field အတြက္ပါ။
ေနာက္တစ္ခုကေတာ့ textarea အတြက္ပါ။ ေနာက္ဆံုးတစ္ခုကေတာ့ Request Method ကို စစ္တဲ့ function ပါ။
<?php
if (!function_exists('text_field'))
{
function text_field($name, $label, $value)
{
$ui = '<div class="form-group">';
$ui .= '<div class="form-group">';

$ui .= Form::label($name, $label, array('class' =>
'col-lg-2 control-label'));
$ui .= '<div class="col-lg-10">';
$ui .= Form::text($name, $value, array('class' => 'form-
control'));
$ui .= '</div>';
$ui .= '</div>';
return $ui;
}
}
if (!function_exists('textarea_field'))
{
function textarea_field($name, $label, $value)
{
$ui = '<div class="form-group">';
$ui .= '<div class="form-group">';

$ui .= Form::label($name, $label, array('class' =>
'col-lg-2 control-label'));
$ui .= '<div class="col-lg-10">';
$ui .= Form::textarea($name, $value, array('class' =>
'form-control'));
$ui .= '</div>';
$ui .= '</div>';
return $ui;
}
}
if (!function_exists('is_post'))
{
function is_post()
{
return Input::server('REQUEST_METHOD') == 'POST';
}
}
ဒီ helper function ေတြကို ေရးၿပီးတဲ့ အခ်ိန္မွာ ကၽြန္ေတာ္တို႔ေတြ ဆက္ေရးရမွာက views/layouts/master.blade.php မွာပါ။
<html>
<head>
<title>
@section(‘title’)
{{ $site_title }}
:: Note Application
@show
</title>
{{ HTML::style(‘css/bootstrap.min.css’) }}
<style type=”text/css”>
body {
padding-top: 70px;
}
.container {
width: 960px;
margin: 0 auto;
}
</style>
</head>
<body>
<header class=”navbar navbar-inverse navbar-fixed-top bs-docs-
nav” role=”banner”>
<div class=”container”>
<div class=”navbar-header”>
<a href=”{{ url() }}” class=”navbar-brand”>Laravel
Note</a>
</div>
</div>
</header>
<div class=”container row” id=”main-body”>

@yield(‘content’)
</div>
</body>
</html>
ကၽြန္ေတာ္တို႕ေတြရဲ႕ action ေတြကေနလာမယ့္ view ေတြက @yield(‘content’) ဆိုတဲ့ေနရာမွာ ဝင္လာမွာပါ။ ၿပီးသြားရင္ လိုအပ္တဲ့
action ေတြကို ေရးပါမယ္။
Action Index
ဒီ action မွာေတာ့ database မွာရွိတဲ့ note ေတြကို ျပေပးသြားပါမယ္။
public function index()

{
$lists = Note::all();
$site_title = ‘Notes’;
return View::make(‘note.index’, compact(‘site_title’,

‘lists’));
}
ဒါကေတာ့ index action ပါ။ ဘာမွေထြေထြထူးထူး မပါပါဘူး။ အရင္ဆံုး Note Model ကေန all() ဆိုတဲ့ method ကိုသံုးၿပီး ရွိသမွ် re-
sult အားလံုးကို ယူပါတယ္။ ၿပီးေတာ့ $site_title ဆိုၿပီးေတာ့ Site Title အတြက္ ေပးလိုက္ပါတယ္။ ေနာက္ဆံုးမွာေတာ့ View::make
ဆိုၿပီးေတာ့ return ျပန္လိုက္ပါတယ္။ action မွာ လိုတာကေတာ့ ဒီေလာက္ပါပဲ။ ၿပီးရင္ view file ကို ဆက္သြားပါမယ္။
@extends(‘layouts.master’)
@section(‘content’)
@unless($lists->isEmpty())
<table class=”table table-bordered table-striped”>

<tr>
<th>Title</th>
<th>Content</th>
<th width=”15%”>Actions</th>
</tr>
@foreach($lists as $list)
<tr>
<td>{{ $list->title }}</td>
<td>{{ $list->content }}</td>
<td>
<a href=”note/edit/{{ $list->id }}”>Edit</a>
|
<a href=”note/delete/{{ $list->id }}”>Delete</a>
</td>
</tr>
@endforeach
</table>
@else
<h4>Note list are empty now!</h4>
@endif
@stop
view file ရဲ႕ အေပၚဆံုးမွာ layout ကို extend လုပ္ထားပါတယ္။ ဒါက ကၽြန္ေတာ္တို႕ အေနနဲ႕ master ဆိုတဲ့ layout ကို အသံုးျပဳမယ္လို႕
ေျပာလိုက္တာနဲ႕ အတူတူပါပဲ။ ေနာက္တစ္ေၾကာင္းမွာေတာ့ ကၽြန္ေတာ္တို႕ေတြ content ဆိုတဲ့ section ကို စၿပီလို႕ေျပာခဲ့ပါတယ္။ section
စၿပီးရင္ @stop ဆိုတာကို အဆံုးမွွာ ထည့္ေပးရပါတယ္။ ကၽြန္ေတာ္တို႕ကေတာ့ ေအာက္ဆံုးမွာ ထည့္ေပးထားပါတယ္။ ေနာက္ၿပီးေတာ့ @
unless($lists->isEmpty()) ဆိုၿပီး ေရးခဲ့ပါတယ္။ unless ဆိုတာကေတာ့ if not နဲ႕ တူပါတယ္။ ဒီ code ကို ဘာသာျပန္ရင္ ဒီလိုရပါတယ္။
if(! $lists->isEmpty()) $lists က Empty မျဖစ္ရင္ result ကို ျပတဲ့ code ကို လုပ္ပါ။ မဟုတ္ရင္ေတာ့ result မရွိေသးပါဘူးလို႕ ျပပါမယ္။
Blade Template အေၾကာင္းကိုအေသးစိတ္ သိခ်င္ရင္ေတာ့ Laravel Documentation မွာ သြားၿပီးေတာ့ ေလ့လာႏိုင္ပါတယ္။
Action Create
ဒီ action မွာေတာ့ ကၽြန္ေတာ္တို႕ေတြ note ကို create လုပ္ၾကပါမယ္။ ဒီအတြက္ အရင္ဆံုး သူ႕အတြက္လိုအပ္တဲ့ form ကို ေရးပါမယ္။
@extends(‘layouts.master’)
@section(‘content’)
{{ Form::open(array(‘url’ => URL::current(), ‘class’ => ‘form-

horizontal’)) }}
<h3>Create New Note</h3>
{{ text_field(‘title’, ‘Title’, $note->title) }}
{{ textarea_field(‘content’, ‘Content’, $note->content) }}

<div class=”form-group”>
<div class=”col-lg-offset-2 col-lg-10”>
<button type=”submit” class=”btn btn-default”>Save</button>
</div>
</div>
{{ Form::close() }}
@stop
ဒီေနရာမွာ ကၽြန္ေတာ္တို႕ေတြ ေရးခဲ့တဲ့ helper function ေတြထဲက function 2 ခုကို ျပန္ၿပီးေတာ့ သံုးသြားခဲ့ပါတယ္။ View
ၿပီးသြားတဲ့ေနာက္မွာေတာ့ Controller မွာ ဆက္ေရးရပါမယ္။
public function create()

{
$site_title = ‘Create Note’;
$note = new Note();
if (is_post())
{
$note->title = Input::get(‘title’);
$note->content = Input::get(‘content’);
// Fake user id
$note->user_id = 1;
$note->save();
return Redirect::to(‘note’);
}
return View::make(‘note.form’, compact(‘site_title’,
‘note’));
}
ဒီေနရာမွာ တစ္ခုရွိတာက တကယ္တမ္းဆို Save မလုပ္ခင္မွာ Validation စစ္ေပးရပါမယ္။ ၿပီးေတာ့ Save လုပ္လို႕ အဆင္ေျပမေျပကို
ခ်က္ၿပီးေတာ့ အဆင္ေျပရင္ Redirect လုပ္၊ မေျပရင္ Error ေတြကို View ကို ေပးေပးရပါတယ္။ ဒါကေတာ့ Tutorial လဲ ျဖစ္ေနျပန္
ၿပီးေတာ့ Post လဲ အရမ္းရွည္သြားမွာ စိုးတဲ့အတြက္ ဒါေတြကို ျဖဳတ္ခဲ့လိုက္ပါတယ္။
Action Edit
ဒါကေတာ့ edit လုပ္မယ့္ action ပါ။ view ကေတာ့ create တုန္းက view နဲ႔အတူတူပါပဲ။ method မွာေရးတဲ့ပံုစံပဲ အနည္းငယ္
ကြဲျပားသြားတာပါ။ အဲ့ဒါကလဲ တစ္ေနရာထဲပါ။
Create မွာတုန္းက $note = new Note() ဆိုတဲ့ေနရာမွာ $note = Note::find($id) ဆိုၿပီးပဲ ကြဲျပားသြားပါတယ္။ $id ဆိုတာကေတာ့
URL ကေန ပါလာမယ့္ Note ရဲ႕ id ပါ။ ဒီ method မွာလဲ ကၽြန္ေတာ္ တစ္ေနရာ ခ်န္ထားခဲ့ပါတယ္။ အဲ့ဒါကေတာ့ Note Model ကေန $id
နဲ႔ရွာရင္ ရမယ့္ result က တကယ္ရွိတဲ့ result ဟုတ္မဟုတ္ကို မစစ္ခဲ့တာပါ။ Database ထဲမွာ မရွိတဲ့ id နဲ႔သြားရွာရင္ Error တက္ေနမွာပါ။
ဒီေနရာမွာ မေရးခဲ့တာကေတာ့ စာဖတ္သူေတြ ကိုယ္တိုင္စမ္းၾကည့္လို႕ရေအာင္ပါ။
Action Delete
Delete action အတြက္ေတာ့ ကၽြန္ေတာ္တို႕ေတြ view ကို ေရးေပးစရာ မလိုေတာ့ပါဘူး။ ကၽြန္ေတာ္တို႕ အေနနဲ႕ ေပးလိုက္တဲ့ idကို de-
lete လုပ္မယ္၊ ၿပီးရင္ Index Action ကို Redirect ျပန္မယ္။ Code ေတြလဲ မ်ားမ်ားစားစားမရွိပါဘူး။
public function delete($id)

{
$note = Note::find($id);
if (! is_null($note) )
{
$note->delete();
}
return Redirect::to(‘note’);
}
ဒါဆိုရင္ ကၽြန္ေတာ္တို႕ေတြ အေနနဲ႔ Note Application ကို CRUD ရၿပီ ျဖစ္ပါတယ္။ ကၽြန္ေတာ္တို႕ ဆက္ေရးဖို႔ က်န္တဲ့ အပိုင္းကေတာ့
User Register လုပ္တာေတြ၊ Login Logout ေတြက်န္ပါမယ္။ User ၿပီးသြားမွာသာ Note Create, Edit မွာ တကယ့္ User အမွန္နဲ႔
ခ်ိတ္ဆက္ေပးရပါမယ္။ အဲ့ဒီက်န္တဲ့ အပိုင္းကိုေတာ့ ေနာက္တစ္လ {ECHO} မွာ ဆက္လက္ ေရးေပးသြားပါမယ္။ ဒီလေတာ့ ဒီေလာက္နဲ႔ပဲ
ရပ္နားထားရင္း ေနာက္တစ္လမွ ျပန္ေတြ႕ၾကပါမယ္။
Autoload
P H P
Soe Thiha Naung

Myanmar Tutorials ရဲ႕ Main Contributor တစ္ေယာက္ Myanmar
Links မွာ Web Development အေၾကာင္း သင္တဲ့ဆရာ၊
Web Development အေၾကာင္းႏွင့္ ပတ္သက္ရင္ ဘာျဖစ္ျဖစ္
စိတ္ဝင္စားၿပီး Myanmar Links Web Development Team ကို
ဦးေဆာင္လႈပ္ရွားေနတဲ့ နည္းပညာသမား တစ္ေယာက္
Facebook : /soethihanaung
Website : http://soethiha.me
Autoload
Require
ကၽြန္ေတာ္တို႔ အေနနဲ႔ PHP Program ေတြ ေရးတဲ့ ေနရာမွာ အေစာပိုင္း ကာလေတြတုန္းက
require
require_once
include
include_once
Require Vs Include
Require နဲ႔ include က အလုပ္လုပ္ပုံ အတူတူပါပဲ။ အဓိကအားျဖင့္ error ျပတဲ့ ပုံစံမွာ ကြာသြားပါတယ္။ require က
require လုပ္တဲ့ file မေတြ႕ဘူးဆိုရင္ ရပ္သြားပါတယ္။ include ကေတာ့ file မေတြ႕ရင္ warning သာ ျပၿပီး script ကို run ပါတယ္။
_once keyword
_once keyword ကေတာ့ memory ေပၚမွာ load တစ္ခါ load လုပ္ထားတယ္ ဆိုရင္ ထပ္ၿပီး လုပ္စရာ မလိုေတာ့ဘူးဆိုတဲ့
အဓိပၸါယ္ပါ။
Autoload
Autoload ကေတာ့ PHP ရဲ့ magic method တစ္ခု ျဖစ္ပါတယ္။ ကၽြန္ေတာ္တို႔ အေနနဲ႔ file ေတြ အမ်ားႀကီးကို re-
quire လုပ္မယ္ဆိုရင္ အေတာ္ အလုပ္႐ႈပ္ပါတယ္။ MVC လို႔ ေခၚတဲ့ Model သပ္သပ္၊ View သပ္သပ္၊ Controller သပ္သပ္ ခြဲျခားၿပီး
ေရးၾကတဲ့အခါမွာ folder ေတြကို ခြဲျခားၿပီး ေရးရပါတယ္။ အဲဒီလို ေရးရတဲ့ အျပင္ developer ရဲ့ လိုအပ္ခ်က္အရ ထပ္ျဖည့္တာေတြလည္း
အမ်ားႀကီး ျဖစ္လာပါတယ္။ အဲဒီလို ျဖစ္လာတဲ့အခါ require နဲ႔သာ ေရးမယ္ဆိုရင္ အလုပ္အေတာ္ ႐ႈပ္မွာ ျဖစ္ပါတယ္။ developer အေနနဲ႔
Model ဆိုရင္ model folder ထဲ Controller ဆိုရင္ Controller ထဲ ထည့္လိုက္ View ဆိုရင္ View ထဲထည့္လိုက္နဲ႔ အားလုံးကို လိုက္ၿပီး
require လုပ္ေနစရာမလိုမွ အဆင္ေျပပါလိမ့္မယ္။ အဲဒီအတြက္ require ဆိုတဲ့ method အစား autoload ဆိုတဲ့ magic method ကို
သုံးလာၾကပါတယ္။
Autoload
// Cat.php
<?php
class Cat {
function say() {
echo "Meow!";
}
}
// Dog.php
<?php
class Dog {
function say() {
echo "Bark!";
}
}
<?php
function __autoload($classname) {
$filename = $classname . ".php";
if(is_readable($filename)) {
require $filename;
}
}
$cat = new Cat;
$cat->say();
$dog = new Dog;
$dog->say();
အဲဒီလို ေရးမယ္ဆိုရင္ __autoload() ကို သုံးၿပီး classname နဲ႔တူတဲ့ file ေတြကို autoload လုပ္ေပးပါလိမ့္မယ္။ require
နဲ႔ ေရးမယ္ဆိုရင္
require "Cat.php";
require "Dog.php";
Autoload
ဆိုၿပီး ေရးေပးေနရပါလိမ့္မယ္။ ဒါေပမယ့္ အဲဒီ php magic method __autoload မွာ ျပႆနာ ရွိတာက __autoload
ဆိုတဲ့ magic method ကို တစ္ခုတည္း သုံးလို႔ရပါတယ္။ အဲဒီအတြက္ multiple autoload လုပ္ခ်င္တယ္ဆိုရင္ မရေတာ့ပါဘူး။ PHP
အေနနဲ႔ ေနာက္ပိုင္းမွာ __autoload() ကို deprecated လုပ္သြားဖို႔ ရွိပါတယ္။
spl_autoload_register()
__autoload() megic method ရဲ့ အားနည္းခ်က္ တစ္ခုျဖစ္တဲ့ တစ္ခုတည္း သုံးလို႔ရတဲ့ ျပႆနာကို ေျဖရွင္းဖို႔အတြက္
spl_autoload_register() ဆိုတာကို PHP က သတ္မွတ္ေပးပါတယ္။ ဥပမာ ေရးၾကည့္ ရေအာင္
// controllers/CatController.php
<?php
class CatController {
function say() {
return "Meow!";
}
}
// contoller/DogController.php
<?php
class DogController {
public function say() {
return "Bark!";
}
}
// models/DogModel.php
<?php
class DogModel {
public function count() {
return 5;
}
}
// models/CatModel.php
<?php
class CatModel {
public function count() {
return 3;
}
}
Autoload
// spl.php
<?php
function autoloadModel($className) {
$filename = "models/" . $className . ".php";
if (is_readable($filename)) {
require $filename;
}
}
function autoloadController($className) {
$filename = "controllers/" . $className . ".php";
if (is_readable($filename)) {
require $filename;
}
}
spl_autoload_register("autoloadModel");
spl_autoload_register("autoloadController");
$catctl = new CatController;

$dogctl = new DogController;
$catModel = new CatModel;
$dogModel = new DogModel;
echo "Cat says " . $catctl->say() . ". We have " . $catModel-

>count() . " cats.";
echo "<br />";
echo "Dog says " . $dogctl->say() . ". We have " . $dogModel-
>count() . " dogs.";
spl_autoload_register() အေနနဲ႔ MVC Pattern ေတြမွာ folder ေတြ ကြဲေနတဲ့ အေနအထားအတြက္ အမ်ားႀကီးအေထာက္
အပံ့ေပးပါတယ္။
PSR-0
PSR-0 ကေတာ့ FIG လို႔ေခၚတဲ့ Framework Interoperability Group က သတ္မွတ္လိုက္တဲ့ standard တစ္ခု ျဖစ္ပါတယ္။
autoload ကို ပုံစံမ်ိဳးစုံနဲ႔ လုပ္ၾကတဲ့အခါ တစ္ခုနဲ႔ တစ္ခု စနစ္ေတြက မတူၾကေတာ့ပါဘူး။ အဲဒီလို မတူတဲ့အတြက္ ေပါင္းစပ္ရလည္း
ခက္ခဲလာပါတယ္။ အဲဒီအတြက္ standard တစ္ခု သတ္မွတ္ဖို႔ လိုတယ္ဆိုၿပီး PSR-0, PSR-1, PSR2 စသည္ျဖင့္ သတ္မွတ္ၾကပါတယ္။ ဒီ
ေဆာင္းပါးနဲ႔ Composer ဆိုတဲ့ ေဆာင္းပါးကို ေပါင္းၿပီး ဖတ္မယ္ဆိုရင္ ျပည္စုံသြားပါလိမ့္မယ္။
CSS Best Practices
You Should Follow
C S S
Hein Zaw Htet

ကၽြန္ေတာ္ကေတာ့ ဟိန္းေဇာ္ထက္ပါ။ MyanmarWebDev.com နဲ႔
Echo မွာ စာပံုမွန္ေရးပါတယ္။ Myanmar Links မွာ Web Designer/
Developer တစ္ေယာက္အျဖစ္ လုပ္ကိုင္ေနပါတယ္။
CSS Best Practices
You Should Follow
Language တိုင္းမွာ Best Practices ေတြရွိၾကပါတယ္။ ဒီႏို၀င္ဘာလအတြက္ Echo က CSS Special ျဖစ္တဲ့အတြက္ေၾကာင့္
CSS Best Practices ေတြကို ေဖာ္ျပေပးခ်င္ပါတယ္။
Reset CSS
Browser တိုင္းမွာ Web Page အတြက္ Default Style ေတြပါ၀င္ပါတယ္။ User Agent CSS လို႔လည္း ေခၚၾကပါတယ္။
ေအာက္ကပံုမွာ CSS မပါဘဲ သာမာန္ HTML တစ္ခုတည္းကိုပဲ Firefox နဲ႔ Chrome မွာ စမ္းျပထားပါတယ္။ Font Size ေတြ Padding /
Margin စသည္ျဖင့္ သူတို႔ရဲ႕ Default Value ေတြက မတူၾကပါဘူး။
ဒီလိုဆိုေတာ့ ကိုယ္ေရးတဲ့ CSS က Firefox မွာ အဆင္ေျပေပမယ့္ Chrome နဲ႔လည္း စစ္ေရာ Margin ေတြ Padding
ေတြက မတူေတာ့ဘူးေပါ့။ ဒါ့ေၾကာင့္ အဲဒီ Default Style ေတြကို Reset လုပ္ပစ္လိုက္သင့္ပါတယ္။
Universal Reset
ဒီျပႆနာကို အလွ်င္အျမန္ေျဖရွင္းႏိုင္မယ့္ နည္းလမ္းကေတာ့ ေအာက္ကအတိုင္းေရးလိုက္တာပါ။
* {
padding: 0;
margin: 0;
}
Reset.css
ေနာက္နည္းလမ္းတစ္ခုက reset.css သံုးတာပါ။ Reset CSS မွာေတာ့ Margin ေတြ Padding ေတြအျပင္ Font Size
/ Lineheight ေတြကိုပါ Reset လုပ္ေပးထားပါတယ္။ Reset CSS ေတြ တစ္ခုမကရွိပါတယ္။ Yahoo ကထုတ္တဲ့ CSS Reset ရွိသလို
တစ္ျခားသူေတြ ထုတ္တဲ့ Reset ေတြလည္းရွိပါတယ္။ လူသံုးမ်ားတဲ့ Reset.css ကေတာ့ Eric Meyer CSS Reset ျဖစ္ပါတယ္။
CSS Best Practices
You Should Follow
Normalize.css
Normalize.css မွာက Reset.css လိုမ်ိဳး ရွိသမွ် Default Style ေတြအားလံုးကို Reset လုပ္လိုက္တာမဟုတ္ဘဲ
အသံုးဝင္တဲ့ Style ေတြကိုေတာ့ သူ႕ Default အတိုင္း ခ်န္ထားလိုက္ပါတယ္။ ဥပမာ - sup နဲ႔ sub လိုမ်ိဳး Element ေတြက သူ႔ Style
အတိုင္းပဲ က်န္ေနခဲ့ပါတယ္။
အထက္မွာေဖာ္ျပခဲ့တဲ့ နည္းလမ္း ၃ ခုထဲမွာ ဒုတိယတစ္ခုနဲ႔ တတိယတစ္ခုကိုပဲ အသံုးျပဳေစခ်င္ပါတယ္။

CSS Best Practices
You Should Follow
Write Comment
ကိုယ့္ရဲ႕ CSS ေတြကို ဘယ္အပိုင္းက ဘာလုပ္တယ္ဆိုတာကို Comment ေရးၿပီး မွတ္သားထားသင့္ပါတယ္။
ေနာက္ပိုင္းျပန္ၾကည့္တဲ့အခါ အဲဒီ Comment ေတြက အေထာက္အကူျပဳပါတယ္။
/* Header */
.main-header {
background: #ccc;
padding: 20px;
}
/* Footer */
.main-footer {
background: #ccc;
margin: 20px;
}
Readability First in Development

ကိုယ့္ Project ကို Development လုပ္ေနတုန္းမွာေတာ့ CSS ေရးတဲ့အခါ ဖတ္လို႔အလြယ္ကူဆံုးျဖစ္ေအာင္ ေရးသင့္ပါတယ္။
တစ္ခ်ိဳ႕ Developer ေတြဆိုရင္ CSS Rule ေတြကိုလည္း တစ္ေၾကာင္းတည္းေရးတာ ေတြ႕ဖူးပါတယ္။ ကိုယ့္ Code ကိုယ္ေတာင္ ဖတ္ဖို႔ကို
ခက္ခဲပါတယ္။
x
/* Main Header */
.main-header {background: #ccc;font-size: 14px;padding: 20px;}
√
/* Main Header */
.main-header {
background: #ccc;
font-size: 14px;
padding: 20px;
}
Avoid Deep Selectors

မလိုအပ္ဘဲနဲ႔ Selector ေတြကို လိုတာထက္ပိုၿပီး အဆင့္လိုက္ထပ္ၿပီးေရးတာကို ေရွာင္သင့္ပါတယ္။
CSS Best Practices
You Should Follow
x
header.main-header .header-nav ul li {
background: #ccc;
font-size: 14px;
padding: 20px;
}
√
.header-nav li {
background: #ccc;
font-size: 14px;
padding: 20px;
}
Alphabetize Properties
Style Rule ေတြေရးတဲ့အခါမွာ A to Z အလိုက္စီၿပီးေရးသင့္ပါတယ္။ Rule ေတြမ်ားလာတဲ့အခါမွာ A to Z စီထားေတာ့
ကိုယ္ရွာခ်င္တဲ့ Rule ကို တန္းၿပီးေတြ႕ႏိုင္ပါတယ္။
.main-header {
color: #cccccc;
display: block;
font-size: 12px;
font-weight: bold;
float: left;
margin : 10px;
}
Don’t Use @import

CSS File တစ္ခုတည္းမွာ တစ္ျခား CSS File ဖိုင္ေတြကို Import လုပ္တဲ့အခါ အားနည္းခ်က္ေတြရွိပါတယ္။
@import 'button.css';
@import 'form.css';
အထူးသျဖင့္ Production ပိုင္းမွာ မသံုးသင့္ပါဘူး။ ဒီလိုသံုးတဲ့အခါ Browser က အဲဒီ File ေတြကို Cache မလုပ္ေပးပါဘူး။
IE အခ်ိဳ႕ Version ေတြမွာဆိုလည္း @import ကအလုပ္မလုပ္ပါဘူး။ @import ရဲ႕ အားနည္းခ်က္ေတြကို http://www.stevesouders.
com/blog/2009/04/09/dont-use-import/ မွာ ေလ့လာႏိုင္ပါတယ္။
CSS Best Practices
You Should Follow
Use Short Class and ID Name

Class Name ေတြ ID Name ေတြေပးတဲ့အခါ နားလည္လြယ္ၿပီး အတိုဆံုးျဖစ္ေအာင္ေပးသင့္ပါတယ္။ နာမည္ႀကီး
ရွည္ေနလို႔မေကာင္းပါဘူး။
Use Helper Classes

CSS ေရးတဲ့အခါ float: left, text-align: right အစရွိတဲ့ Rule ေတြကို မၾကာခဏေရးရပါတယ္။ အဲဒီ Rule ေတြကို
လိုအပ္တဲ့ေနရာတိုင္းမွာ ထပ္တလဲလဲ ေရးမေနပဲ ေအာက္ကအတိုင္း သီးသန္႔ Class ေတြသတ္မွတ္ထားသင့္ပါတယ္။
.float-left {
float: left;
}
.text-right {
text-align: right;
}
HTML ဖက္ေရာက္မွာသာလွ်င္ လိုအပ္သလို အေပၚက Class ေတြအသံုးျပဳသင့္ပါတယ္။
<div class="main-header float-left"></div>
Use CSS Frameworks

အေကာင္းဆံုး Practice တစ္ခုကေတာ့ CSS Framework ေကာင္းေကာင္းတစ္ခုကို ေရြးခ်ယ္အသံုးျပဳတာပါ။
Website အေသးေလးဆိုရင္ ကိုယ္ပိုင္အစအဆံုးေရးရတာ အဆင္ေျပႏိုင္ေပမယ့္ ၊ ေရးရမယ့္ Project က ႀကီးေလေလ Code ေတြက
ပြလာတတ္ပါတယ္။ Framework သံုးလိုက္ရင္ အဲလိုျပႆနာေတြ အဆင္ေျပသြားပါလိမ့္မယ္။ Framework ေရြးခ်ယ္တဲ့အခါ ကိုယ္ Project နဲ႔
ကိုက္ညီမယ့္ Framework (သို႔မဟုတ္) နာမည္ႀကီး Framework တစ္ခုခုအသံုးျပဳသင့္ပါတယ္။
Bootstrap (http://getbootstrap.com)
Foundation (http://zurb.foundation.com)
Pure CSS (http://purecss.io)

CSS Best Practices
You Should Follow
Validate Your CSS

Project တစ္ခုလံုးေရးၿပီးၿပီဆိုရင္ေတာ့ ကိုေရးထားတဲ့ CSS ေတြကို မွန္/မမွန္ Validate ျပဳလုပ္သင့္ပါတယ္။
ဒီလိုလုပ္ဖို႔အတြက္ Online Tool ေတြအမ်ားႀကီးရွိပါတယ္။
http://jigsaw.w3.org/css-validator/
http://csslint.net/
Merge & Compress CSS for Production

Develop လုပ္ေနတဲ့အခ်ိန္မွာေတာ့ Readability ကို ဦးစားေပးၿပီး ေရးသင့္ေပမယ့္ Production ပိုင္းေရာက္ရင္ေတာ့ CSS
ဖိုင္ေတြအားလံုကို တစ္ဖိုင္တည္း ျဖစ္ေအာင္ေပါင္းၿပီးေတာ့ Compress ျပဳလုပ္သင့္ပါတယ္။
CSS File ေတြအားလံုးကို တစ္ဖိုင္းတည္ျဖစ္ေအာင္ ေပါင္းလိုက္တဲ့အတြက္ HTTP Request ေလ်ာ့သြားပါမယ္။ Compress

လုပ္လိုက္တဲ့အခါက်ေတာ့ CSS ထဲကမလိုအပ္တဲ့ Space ေတြ Comment ေတြ ဖ်က္ေပးၿပီး တစ္ေၾကာင္းတည္းျဖစ္ေအာင္လုပ္ေပးတဲ့အ
တြက္ File Size ေသးသြားပါတယ္။
Online CSS Compressors
http://cssminifier.com/
http://www.csscompressor.com/
http://refresh-sf.com/yui/
ေနာက္ထပ္ CSS Best Practices ေတြအမ်ားႀကီး ရွိေနႏိုင္ပါေသးတယ္။ ေရးတာမ်ားေလေလ ဘယ္ဟာကေတာ့

ဘယ္လိုျဖစ္သင့္တယ္ဆိုတာ သိလာပါလိမ့္မယ္။
CSS3 Filter Effects
C S S
K
Facebook : facebook.com/khaylay
Twitter : @khayusaki
Github : @khay
Website : http://khay.me
CSS3 Filter Effects
အခုေနာက္ပိုင္း Mobile applications ေတြမွာပါတဲ့ Photo Filter Effects ေတြကို သိၾကမယ္လို႔ ထင္ပါတယ္။ သံုးရတာ
လြယ္ကူသလို အသံုးျပဳလိုက္ရင္လည္း နဂိုပံုထက္ ပိုၿပီးေတာ့ ၾကည့္ေကာင္းသြားတာေတြလည္း ရွိပါတယ္။ အေစာပိုင္း Instagram, Face-
book, Twipic အျပင္ အခုေနာက္ပိုင္းမွာဆိုရင္ Google+ နဲ႔ Apple ရဲ႕ iOS7 မွာေတာင္ Image Editing မွာ Photo Filter ေတြပါလာတာကို
ေတြ႕ရပါတယ္။ အဲ့ဒီလိုပဲ Browser ေတြမွာလည္း filter effects ေတြအသံုးျပဳႏိုင္ဖို႔အတြက္ ၂၀၁၁ ခုႏွစ္ ဒီဇင္ဘာလ အေစာပိုင္းမွာ Filter
Effects 1.0 ထြက္ရွိလာခဲ့ပါတယ္။
Browser တိုင္းမွာ အဆင္ေျပလို႔လား?

အားလံုးသိၾကတဲ့အတိုင္း developer ေတြအေနနဲ႔ အၿမဲတမ္းစဥ္းစားေနရတာက Browser တိုင္းနဲ႔ အဆင္ေျပရဲ႕လား
ဆိုတဲ့အခ်က္ပါပဲ။ တစ္ခုနဲ႔ အဆင္ေျပရင္ ေနာက္တစ္ခုမွာ အဆင္မေျပလိုက္။ တစ္ခုမွာ ပံုစံတစ္မ်ိဳးေပၚေနရင္ ေနာက္တစ္ခုမွာလည္း
ေနာက္တစ္မ်ိဳး ေပၚခ်င္ေပၚေနတတ္တာကို ေတြ႕ရတာလည္း ခဏခဏပါပဲ။ အဲ့ဒီေတာ့ ကၽြန္ေတာ္တုိ႔ အခုအသံုးျပဳမယ့္ CSS Filters
ေတြက ဘယ္လို Browser ေတြနဲ႔ အဆင္ေျပႏိုင္မလဲ ဆိုတာကိုေတာ့ ေအာက္က ပံုမွာ ေတြ႕ႏိုင္ပါတယ္။
စိတ္မေကာင္းစြာနဲ႔ပဲ ယခုလက္ရွိ အခ်ိန္အထိကေတာ့ webkit browser ေတြမွာပဲ အသံုးျပဳလို႔ရေသးတာကို ေတြ႕ရပါတယ္။

အဲ့ဒါေၾကာင့္ ေအာက္မွာ ဆက္လက္ ေျပာျပသြားမယ့္ ဥပမာေတြကိုေတာ့ သတ္မွတ္ version ရွိတဲ့ Chrome ဒါမွမဟုတ္ရင္ Safari Brows-
er နဲ႔ပဲ စမ္းသပ္လို႔ရမွာျဖစ္ပါတယ္။
Filter effects ေတြဟာဆိုရင္ ပံုေတြတင္မကဘဲနဲ႕ video ေတြ၊ စာေတြနဲ႔ canvas ေတြမွာပါ အသံုးျပဳႏိုင္ပါတယ္။
ဒီေဆာင္းပါးမွာေတာ့ ကၽြန္ေတာ့္အေနနဲ႔ ပံုေတြမွာ effects ေတြဘယ္လို ေျပာင္းလဲ အသံုးျပဳမလဲဆိုတာကို အဓိကထား ေျပာျပသြားမွာပါ။
Filter အသံုးျပဳဖို႕အတြက္ filter ဆိုတဲ့ css property တစ္ခုကို သိထားမယ္ဆိုရင္ လံုေလာက္ပါၿပီ။ HTML/CSS ေတြကို တစ္ခုခ်င္း
အေသးစိတ္ေျပာျပေပးသြားမွာ မဟုတ္ပါဘူး။ တစ္ခုခ်င္းစီရဲ႕ လုပ္ေဆာင္ပံုေတြကိုသာ ဥပမာပံုေတြနဲ႔ အဓိကထား ရွင္းျပသြားမွာ
ျဖစ္ပါတယ္။
grayscale
အျဖဴ အမည္းနဲ႔ ပံုေတြကို ျမင္ဖူးၾကမယ္ထင္တယ္။ Photoshop မွာဆိုရင္ အဲ့ဒီလို ပံုတစ္ခုရဖို႔အတြက္ Grayscale mode နဲ႔
အသံုးျပဳရသလိုပဲ ကၽြန္ေတာ္တို႔ browser မွာ အသံုးျပဳႏိုင္ဖို႔အတြက္ grayscale filter ကို အသံုးျပဳႏိုင္ပါတယ္။
CSS3 Filter Effects
img {
-webkit-filter: grayscale(100%);
}
Percentage နဲ႔ အသံုးျပဳထားတဲ့ 0% ကေန 100% အတြင္း မိမိႏွစ္သက္ရာ ေျပာင္းလဲစမ္းသပ္ႏိုင္ပါတယ္။ ေအာက္ကပံုမွာ ဥပမာအေနနဲ႔
ေတြ႕ႏိုင္ပါတယ္။
Photo Credit : うさぎ

CSS3 Filter Effects
sepia
ဒီတစ္ေခါက္ေတာ့ sepia effects ကို စမ္းၾကည့္ပါမယ္။ Grayscale တုန္းကလုိပဲ sepia ဆိုတဲ့ filter property ကို
အသံုးျပဳလိုက္ရံုနဲ႔ ရရွိမွာ ျဖစ္ပါတယ္။ ေရွးေဟာင္းဓာတ္ပံုေတြရဲ႕ ပံုစံအတိုင္း အေရာင္ကိုလိုခ်င္တယ္ဆိုရင္ sepia ကို အသံုးျပဳႏိုင္ပါတယ္။
img {
-webkit-filter: sepia(100%);
}
Percentage နဲ႔ အသံုးျပဳထားတဲ့ 0% ကေန 100% အတြင္း မိမိႏွစ္သက္ရာ ေျပာင္းလဲစမ္းသပ္ႏိုင္ပါတယ္။ ေအာက္ကပံုမွာ ဥပမာအေနနဲ႔
ေတြ႕ႏိုင္ပါတယ္။
CSS3 Filter Effects
hue-rotate
Photoshop မွာဆိုရင္ ပံုေတြျပဳျပင္တိုင္း Hue/Saturation ေတြကို အသံုးျပဳၾကရပါတယ္။ Browser မွာလည္း hue-rotate
ဆိုတဲ့ filter ကို အသံုးျပဳၿပီး အသံုးျပဳႏိုင္ပါတယ္။
img {
-webkit-filter: hue-rotate(50deg);
}
အေပၚႏွစ္ခုတုန္းကလိုမ်ိဳး percentage မဟုတ္ဘဲ degree နဲ႔ ျဖစ္တဲ့အတြက္ေၾကာင့္ နည္းနည္း ႐ႈပ္ေထြးႏိုင္ပါတယ္။ ဒါေပမယ့္လည္း hue-ro-
tate ကို အသံုးျပဳၿပီး စိတ္ဝင္စားဖြယ္ရာ ရလဒ္ေတြကို ရရွိႏိုင္ပါတယ္။ Color wheel တစ္ခုအေနနဲ႔ ျမင္လိုက္မယ္ဆိုရင္ အဆင္ေျပမယ္လို႔
ထင္ပါတယ္။ 0deg ဆိုရင္ ဘာမွ ေျပာင္းလဲမွာမဟုတ္ေပမယ့္ နမူနာေရးထားတဲ့ 50deg ဆိုရင္ေတာ့ လိေမၼာ္ေရာင္သမ္းေနတာကို
သိသိသာသာ ေတြ႕ရပါလိမ့္မယ္။
CSS3 Filter Effects
Color Wheel ကို နားမလည္တဲ့သူေတြအေနနဲ႔ http://colorschemedesigner.

com/ မွာ ၾကည့္လိုက္ရင္ degree ေတြကအစ ရွင္းလင္းသြားပါလိမ့္မယ္။
saturate
အေရာင္ေတာက္ေတာက္ပပလိုမ်ိဳးနဲ႔ color saturation effect ေတြလိုခ်င္တယ္ဆိုရင္ေတာ့ saturate ကို
အသံုးျပဳႏိုင္ပါတယ္။ ႐ုပ္ပံုေတြကို ပိုစတာေတြ၊ ကာတြန္းပံုေတြလိုမ်ိဳး effect ေတြအတြက္လည္း လုပ္ေဆာင္ႏိုင္ပါတယ္။ Percentage
ပဲ အသံုးျပဳရတာဆိုေပမယ့္ တျခား grayscale တို႔ sepia တို႔လိုမ်ိဳးမဟုတ္ဘဲ 100% ထက္မ်ားၿပီး saturation ကို ခ်ိန္လို႔ရပါတယ္။
အရာဝတၳဳေတြကို လွပအျမင္ဆန္းေအာင္ လုပ္ႏိုင္မယ့္ effect တစ္ခုလို႔လည္း ေျပာလုိ႔ရပါတယ္။
img {
-webkit-filter: saturate(200%);
}
CSS3 Filter Effects
invert
႐ုပ္ပံုေတြ ျပဳျပင္တဲ့အခါ negative effect လိုမ်ိဳး လင္ေနတဲ့ေနရာေတြ ေမွာင္သြားေအာင္၊ ေမွာင္ေနတဲ့ေနရာေတြ
လင္းသြားေအာင္ ျပဳလုပ္ၾကဖူးပါလိမ့္မယ္။ Browser မွာလည္း invert ဆိုတဲ့ filter effects ကိုအသံုးျပဳၿပီး အဆိုပါပံုစံအတိုင္း
ေဆာင္ရြက္ႏိုင္ပါတယ္။
img {
-webkit-filter: invert(100%);
}
အေပ်ာ္သေဘာအေနနဲ႔ Website တစ္ခုမွာဆိုရင္လည္း <body> ရဲ႕ style မွာ

-webkit-filter : invert(100%) လို႕ Inspect Element နဲ႔ပဲျဖစ္ျဖစ္
ထည့္သြင္းၾကည့္ၿပီး ဘာေျပာင္းလဲသြားသလဲဆိုတာကို ေလ့လာၾကည့္ၾကည့္ပါ။
CSS3 Filter Effects
opacity
Opacity ကေတာ့သိပ္ၿပီးေထြေထြထူးထူး ရွင္းျပေနစရာ မလိုဘူးလို႔ ထင္ပါတယ္။ အမ်ားအားျဖင့္ CSS နဲ႔ background
ေတြကို opacity ေလ်ာ့ၿပီး သံုးခဲ့ၾကဖူးပါတယ္။ အခု opacity filter ကလည္း အဲ့ဒီလိုမ်ိဳးပါပဲ။ ဒါေပမယ့္ သူကေတာ့ အေပၚကဟာေတြနဲ႔
ေျပာင္းျပန္၊ အေပၚကဟာေတြက မ်ားေလ ေျပာင္းေလျဖစ္ေပမယ့္ သူကေတာ့ 100% ဆိုရင္ေတာ့ နဂိုပံုအတိုင္းပဲ ရွိမွာ ျဖစ္ၿပီး transpar-
ent ျဖစ္ေစဖို႔ဆုိရင္ေတာ့ ေအာက္ကို ေလ်ာ့ခ်ရမွာပဲ ျဖစ္ပါတယ္။
img {
-webkit-filter: opacity(40%);
}
ပံုမွန္အတိုင္း opacity: 0.4 ဆိုၿပီးအသံုးႏိုင္ေပမယ့္ CSS ရဲ႕ opacity ကို အသံုးျပဳတာနဲ႔ အတူတူပဲဆိုေပမယ့္ filter opacity က hardware
acceleration ကို အသံုးျပဳတဲ့အတြက္ေၾကာင့္ performance အေနနဲ႔ ပိုေကာင္းတာကို ႏိႈင္းယွဥ္ထားၾကပါတယ္။
CSS3 Filter Effects
blur
Blur ကေတာ့ ဘာလဲဆိုတာ အေသးစိတ္ရွင္းျပေနစရာေတာင္ မလိုေတာ့ဘူးလို႔ထင္တယ္။ အခုေနာက္ပိုင္း ပံုေတြမွာဆိုရင္
blur effects ေတြ ေနရာတိုင္းလိုလုိမွာ ပါေနၾကၿပီ။ Social Media ေတြမွာဆိုရင္လည္း profile pic ေတြမွာ ကိုယ့္ပံုကိုယ္ blur ေလးနဲ႔မွ
ၾကည့္ေကာင္းဆိုတာေတြလည္း ျမင္ဖူးပါတယ္ (ဒါက စကားႂကြင္း)။ အရာဝတၳဳတစ္ခုကို မ်က္မွန္တပ္ၾကည့္တဲ့အခါ ပါဝါမကိုက္တဲ့အခါ
ျမင္ရသလိုမ်ိဳးဆိုရင္ေတာ့ ရွင္းမယ္လို႕ထင္တယ္။ အျမင္ေတြ ေဝဝါးေနတာေပါ့။ Blur filter မွာေတာ့ pixels ကို အသံုးျပဳရပါတယ္။
ကိုယ္သတ္မွတ္ေပးလိုက္တဲ့ pixels မ်ားရင္ မ်ားသေလာက္ blur ျဖစ္မွာျဖစ္ၿပီး zero ဆိုရင္ေတာ့ ေျပာင္းလဲမွာ မဟုတ္ပါဘူး။
img {
-webkit-filter: blur(2px);
}
CSS3 Filter Effects
brightness
ဓာတ္ပံုေတြ ျပင္တဲ့အခါ ေမွာင္ေနတာပဲ ျဖစ္ျဖစ္ အလင္းနည္းေနတာပဲ ျဖစ္ျဖစ္ အဲ့ဒီလို အခ်ိန္မ်ိဳးဆိုရင္ brightness
ကို အသံုးျပဳခဲ့ၾကပါတယ္။ TV ေတြမွာဆိုရင္လည္း brightness control ကို ျမင္ဖူးၾကမွာပါ။ Brightness ကို အနည္းဆံုးထားလိုက္ရင္
အမည္းေရာင္ပဲ ျမင္ရမွာ ျဖစ္ၿပီး အဲ့ဒီကေနမွ screen ရဲ႕ brightness ကို ခ်ိန္ညွိႏိုင္ပါတယ္။ အခုလည္း CSS filter ရဲ႕ brightness ကို
အသံုးျပဳၿပီး ဘာလိုေတြ လုပ္ႏိုင္သလဲဆိုတာ ေလ့လာၾကည့္ရေအာင္။
img {
-webkit-filter: brightness(140%);
}
CSS3 Filter Effects
contrast
Contrast ကိုလည္း TV နဲ႕ photo editing ေတြမွာ ျမင္ဖူးၿပီးသား ျဖစ္ပါလိမ့္မယ္။ သူကေတာ့ ႐ုပ္ပံုတစ္ခုရဲ႕
ေမွာင္တဲ့အစိတ္အပိုင္းနဲ႔ လင္းတဲ့အစိတ္အပိုင္းတို႔ကို ထိန္းညွိေပးတာပဲ ျဖစ္ပါတယ္။
img {
-webkit-filter: contrast(200%);
}
အကယ္၍ 0% ပဲထားမယ္ဆိုရင္ေတာ့ brightness တုန္းကလိုပဲ ေမွာင္မဲေနမွာ ျဖစ္တဲ့အတြက္ေၾကာင့္ စိတ္ဝင္စားဖို႔ ေကာင္းမွာမဟုတ္ပါဘူး။

ဒါေပမယ့္လည္း သူ႔ထက္မ်ားတဲ့ percentage ေတြကို ကစားေပးရင္းကေန စိတ္ဝင္စားဖြယ္ရာ အေရာင္ေတြနဲ႔ ႐ုပ္ပံုေတြကို ရရွိမွာပဲ
CSS3 Filter Effects
drop-shadow
ေနာက္ဆံုး တစ္ခုအေနနဲ႔ေျပာခ်င္တာကေတာ့ drop-shadow ပါ။ CSS မွာ box-shadow ေတြ သံုးခဲ့ၾကဖူးပါတယ္။
ႏွစ္ခုလံုး ပံုသ႑ာန္ကေတာ့ အတူတူပါပဲ။ ဒါေပမယ့္ Opacity မွာတုန္းက ေျပာခဲ့သလိုမ်ိဳး css filter ေတြက hardware acceleration
ကို အသံုးျပဳတဲ့အတြက္ေၾကာင့္ performance ပိုင္းမွာေတာ့ box-shadow ထက္စာရင္ filter ရဲ႕ drop-shadow က ေကာင္းမြန္တယ္လို႔
ေျပာထားၾကပါတယ္။
img {
-webkit-filter: drop-shadow(10px 5px 20px #333333);
}
drop-shadow မွာေတာ့ အေပၚက နမူနာေတြလိုမ်ိဳး original နဲ႔ ႏိႈင္းယွဥ္မျပထားပါဘူး။ ဒါေပမယ့္လည္း သိသိသာသာႀကီးကို

ကြာျခားခ်က္ေတြ႕ႏိုင္ပါတယ္။
CSS3 Filter Effects
အခုေလာက္ဆိုရင္ေတာ့ CSS3 filter effects ေတြနဲ႔ ပတ္သက္ၿပီး ေျပာစရာေလးေတြ ကုန္သလာက္ ျဖစ္ေနပါၿပီ။ အဲ့ဒီမွာ
ေမးစရာ တစ္ခ်က္ရွိတာက filter ေတြက တစ္ခုျခင္းစီပဲ အသံုးျပဳလို႔ရတာလား? သူတို႔အခ်င္းခ်င္းေကာ ေပါင္းတြဲအသံုးျပဳလို႔မရႏိုင္ဘူး
လား? ရပါတယ္။ နမူနာ တစ္ခုအေနနဲ႔ ေရးျပပါမယ္။
img {
-webkit-filter: brightness(120%) hue-rotate(140deg)
contrast(130%);
}
အဲ့ဒါဆိုရင္ ေအာက္က ပံုအတိုင္း ရလာပါလိမ့္မယ္။

CSS3 Filter Effects
Filter ေတြဟာ တစ္ခုနဲ႔ တစ္ခု တြဲဖက္ၿပီး အသံုးျပဳႏိုင္ပါတယ္။
အဲ့ဒီမွာေနာက္ထပ္တစ္ခုေမးစရာ ရွိႏိုင္ပါေသးတယ္။ ဒီလိုမ်ိဳးေကာ တစ္ေၾကာင္းခ်င္းစီ ေရးလို႕မရႏိုင္ဘူးလားေပါ့?
img {
-webkit-filter: brightness(120%);
-webkit-filter: hue-rotate(140deg);
-webkit-filter: contrast(130%);
}
ေရးလို႔ ရပါတယ္။ ဒါေပမယ့္ ေအာက္ဆံုးမွာ ေရးထားတဲ့ property ကိုပဲ အလုပ္လုပ္သြားပါလိမ့္မယ္။ အေပၚ နမူနာမွာလိုမ်ိဳး
တစ္ေၾကာင္းထဲမွာ ကိုယ္လိုခ်င္တဲ့ filter effects ေတြကို ေပါင္းေရးမွသာ အားလံုးတြဲဖက္အလုပ္လုပ္မွာ ျဖစ္ပါတယ္။
ဒီထက္ပိုၿပီးေတာ့ filter ေတြနဲ႔ ပတ္သက္ၿပီး သိခ်င္ေသးတယ္ဆိုရင္ W3C Filter Effects 1.0 specification မွာ ဖတ္႐ႈ
ေလ့လာႏိုင္ပါတယ္။ ဒါ့အျပင္ Demo အေနနဲ႔ filter ေတြကို စမ္းသပ္ၾကည့္ခ်င္တယ္ဆိုရင္ html5-demos မွာ စမ္းသပ္ႏိုင္ပါတယ္။
တျခားသူေတြ စမ္းသပ္ထားတဲ့ CSS3 Filter လက္ရာေတြကိုေတာ့ CSS Filter မွာ ေတြ႕ျမင္ႏိုင္သလို Filter ေတြနဲ႔ အသံုးျပဳထားတဲ့ UI
ဆန္ဆန္ ျမင္ေတြ႕ခ်င္တယ္ဆိုရင္ samurai ဆိုတဲ့ japan developer တစ္ေယာက္ရဲ႕ codepen မွာ ၾကည့္႐ႈႏိုင္ပါတယ္။ အဲ့ဒီမွာဆိုရင္
Filter ေတြအျပင္ တျခား စိတ္ဝင္စားဖြယ္ရာ Flashlight လိုမ်ိဳး နမူနာေတြကိုလည္း ေလ့လာႏိုင္ပါတယ္။
CKEDITOR
c r i p t
a s
Jav
Yan Naing
All I know is I know nothing.
CKEDITOR
သမိုင္းေၾကာင္းေလး တစ္ခုကို ေျပာျပခြင့္ရမယ္ဆိုရင္ WYSIWYG editor ေတြရဲ႕ သမိုင္းေၾကာင္းေလးကို အက်ဥ္းခ်ံဳးေလာက္

ေျပာျပခ်င္ပါတယ္။ အခုလိုမ်ိဳး Post တစ္ခုကို Microsoft Word တို႔၊ Pagemaker တို႔၊ Libre Office တို႔လုိ Text editor ေတြမရွိဘဲနဲ႔
ေရးဖူးၾကမလား မသိဘူး။ တစ္ခ်ိန္ကေတာ့ ဒီလုိ Application ေတြမရွိခင္မွာ Markdown စနစ္နဲ႔ ေရးခဲ့ၾကရပါတယ္။ Non-printing
special control code (eg. #, *, >) ေတြကို ေရွ႕မွာ ခံၿပီး ေရးခဲ့ၾကရပါတယ္။ ကို္ယ္ ေနာက္ဆံုးလုိခ်င္တဲ့ ပံုစံကုိ ေရးကတည္းက
တခါတည္း မျမင္ရဘူးေပါ့။ Markdown ကို Render လုပ္ေပးတဲ့ Program ေတြကလည္း တစ္ခုစီက ျပတဲ့ ပံုစံခ်င္းမတူေတာ့ ပိုဆိုးတာေပါ့။
ဒီလုိျပႆနာေတြကို ေျဖရွင္းႏို္င္ဖုိ႔ Bravo ဆိုတဲ့ program တစ္ခုကို Xerox က သူ႔ရဲ႕ Alto Computer အတြက္
ဖန္တီးလုိက္ပါတယ္။ တစ္ရက္မွာ Xerox ရဲ႕ hardware designer ျဖစ္တဲ့ Chuck Thacker ရဲ႕ဇနီးျဖစ္သူက Bravo ရဲ႕ အလုပ္လုပ္ပံုကို
ၾကည့္ၿပီး သူအေတြးေပါက္သလုိေမးလိုက္ပါတယ္။ Text ေတြကို ကိုယ္ျမင္ေနရတဲ့အတိုင္း တကယ္ရေစတာကို ေျပာတာလားဆိုၿပီးေတာ့ေပါ့။
အဲဒီေမးခြန္းေလးကေနပဲ WYSIWYG ( What You See Is What You Get ) editor ေတြဆိုၿပီး ျဖစ္ေပၚလာတာပါ။
ကၽြန္ေတာ္ အခုေရးခ်င္တာက WYSIWYG editor တစ္ခုျဖစ္တဲ့ CKEDITOR အသံုးျပဳပံုေလးအေၾကာင္းပါ။ WYSIWYG

editor ေတြက အမ်ားႀကီး ရွိပါတယ္။ အဲဒီထဲကမွ ဘာျဖစ္လုိ႔ CKEDITOR ကုိ ေရြးၿပီး Tutorial ေရးရလဲဆိုေတာ့ ကၽြန္ေတာ္ ဒီတစ္ခုပဲ
ေသခ်ာသံုးတတ္လုိ႔ပါ။ {Echo} ပရိတ္သတ္ႀကီးလည္း ဒီတိုင္း စာထိုင္ဖတ္ေနရတာ ပ်င္းေနမွာပဲ။ အပ်င္းေျပေလး ကၽြန္ေတာ္နဲ႔အတူတူ
CKEDITOR ေလးလုိက္သံုးၾကည့္ပါလား။ ေပ်ာ္ဖုိ႔ေကာင္းပါတယ္။
ဒါေပမယ့္ တစ္ခုေတာ့ႀကိဳၿပီး သတိထားေစခ်င္ပါတယ္။ CKEDITOR ကို စမ္းေတာ့မယ္ စေရးေတာ့မယ္ဆိုရင္ Chrome

Browser ကို မသံုးဘဲ Firefox ကိုပဲ သံုးေစခ်င္ပါတယ္။ ဘာလုိလဲဆိုေတာ့ Chrome က cache ေတြမွတ္တာက CKEDITOR မွာ
ေတာ္ေတာ္ဆိုးဆိုးဝါးဝါးကို မွတ္တာမုိ႔လုိ႔ပါ။
Prepare project
CKEDITOR ကို စမ္းသံုးၾကည့္ဖုိ႔အတြက္ အခက္ခဲဆံုး အပိုင္းျဖစ္တဲ့ Download လုပ္ငန္းစဥ္ကေနစပါမယ္။ Download
Link ကေတာ့ http://CKEDITOR.com/download ပါ။
CKEDITOR
Package သံုးခုေရြးလုိ႔ရတဲ့အထဲက အလယ္အလတ္ လမ္းစဥ္ကို လုိက္ၿပီး Standard Package ကိုပဲ ေရြးလုိက္ပါတယ္။

စာဖတ္သူအေနနဲ႔လည္း ကိုယ္လုိခ်င္တဲ့ Package ကို down ၿပီးစမ္းၾကည့္လုိ႔ရပါတယ္။
CKEDITOR ကို apply လုပ္ဖုိ႔၊ စမ္းသပ္ဖုိ႔အတြက္ Project folder ေလးတစ္ခုကို ck-test ဆိုတဲ့နာမည္နဲ႔
တည္ေဆာက္လုိက္ပါတယ္။ ၿပီးေတာ့ ခုနက download လုပ္ထားတဲ့ CKEDITOR ကို ck-test ထဲမွာ extract လုပ္လုိက္ပါတယ္။
တစ္ဆက္တည္းပဲ Project စဖုိ႔အတြက္ index.html တစ္ခု ကိုပါ create လုပ္လုိက္ပါတယ္။ ဒါဆိုရင္ ဒီ Project စဖုိ႔တြက္ ျပည့္စံုသြားပါၿပီ။
Starting Project
Project ကို စေတာ့မယ္ဆိုေတာ့ ထံုးစံအတိုင္းပဲ index.html ထဲမွာ ေရးေနက် code ေတြကို ေရးလုိက္ပါတယ္။ ၿပီးေတာ့
CKEDITOR ကို စမ္းမွာ ျဖစ္တဲ့အတြက္ Textarea ေလးတစ္ခုကိုလည္း ထည့္လုိက္ပါတယ္။
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="robots" content="INDEX, FOLLOW" />
<meta name="viewport" content="width=1024" />
<meta name="description" content="Testing CKEDITOR plugin" />
<meta name="keywords" content="ck, editor, wysiwyg" />
<title>Testing CKEDITOR</title>
</head>
<body>
<textarea name="editor" cols="30" rows="10"></textarea>

</body>
</html>
Browser ကေနေခၚၾကည့္လုိက္ေတာ့ Textarea ေလးတစ္ခုပဲ ရွိေနပါေသးတယ္။
Using CKEDITOR
ေနာက္တစ္ဆင့္အေနနဲ႔ Project ထဲမွာ CKEDITOR ကို apply လုပ္လုိက္ပါမယ္။ ဒီလို apply လုပ္ဖုိ႔အတြက္ ckeditor.js ကို
ခ်ိတ္ေပးရမယ္လုိ႔ ေျပာထားတဲ့အတြက္ CKEDITOR ဆိုတဲ့ folder ထဲမွာရွိေနတဲ့ ckeditor.js ကို index.html ထဲမွာ ခ်ိတ္ေပးလုိက္ပါတယ္။
CKEDITOR
<script type="text/javascript" src="ckeditor/ckeditor.js"></script>
Js ကို ခ်ိတ္ၿပီးသြားၿပီးဆုိေတာ့ run ၾကည့္လုိက္မယ္ဗ်ာ။ ဘာမ်ား ထူးျခားသြားမလဲလုိ႔။ Browser ကို refresh

လုပ္လုိက္ေတာ့.. အရင္အတိုင္းပါပဲ။ ဘာမွ မေျပာင္းလဲပါဘူး။ ဟုတ္တာေပါ့ ckeditor js ကို ခ်ိတ္ထားတာပဲ ရွိေသးတာကို။ ေရးထားတဲ့
textarea ကို CK သံုးပါမယ္ဆိုၿပီး apply လုပ္ထားတာမွ မရွိေသးတာ။
ဒီေတာ့ Textarea ထဲမွာ CKEDITOR ကို apply လုပ္ဖုိ႔ နည္းလမ္းကို ၾကည့္လုိက္ေတာ့ တစ္ခုထက္မက ရွိေနတယ္ဗ်။
ကိစၥမရွိပါဘူး၊ ေလာေလာဆယ္ေတာ့ အလြယ္ဆံုး၊ အရွင္းဆံုးနည္းလမ္းကို သံုးၿပီး Apply လုပ္ၾကည့္လုိက္မယ္ဗ်ာ။
<textarea class='ckeditor' name="editor"></textarea>
ကဲ class မွာ ckeditor လုိ႔ထည့္ေပးလုိက္တာနဲ႔ ကၽြန္ေတာ့ textarea မွာ CKEDITOR က apply ျဖစ္သြားၿပီ။
ဟုတ္မဟုတ္သိရေအာင္ browser မွာေခၚၾကည့္လိုက္ေတာ့.
ဒီလုိေပၚတယ္ဆိုေတာ့ Ok ေပါ့။ အဲေလာက္လြယ္လိမ့္မယ္လုိ႔ မထင္ထားဘူးမုိ႔လား။ class name မွာ ckeditor ဆိုတာကို ထည့္လုိက္ရင္
auto apply လုပ္သြားတဲ့သေဘာပါ။
ဒါဆိုရင္ ဒီ CKEDITOR ႀကီးကို နည္းနည္းေလာက္ ကလိၾကည့္လုိက္ဦးမယ္ဗ်ာ။ ကၽြန္ေတာ္လုိခ်င္တဲ့အထဲမွာ ေနာက္ဆံုးက

Question mark ပံုႀကီးနဲ႔ about CKEDITOR ဆိုတဲ့ဟာမပါဘူး။ အဲဒါႀကီးကို ျဖဳတ္ပစ္ခ်င္တာ။ ဒါကို ဘယ္မွာသြားျဖဳတ္ရမလဲလုိ႔
ေလ့လာၾကည့္လုိက္ေတာ့ config ထဲမွာ ျပင္ရမွာဆုိပဲ။ ဒါဆိုလည္း သြားျပင္ၾကည့္တာေပါ့ဗ်ာ။ CKEDITOR ဆိုတဲ့ folder ထဲမွာရွိေနတဲ့
config.js ဆိုတာကို ျပင္မယ္ဆိုၿပီး ဖြင့္ၾကည့္လုိက္ေတာ့ ကၽြန္ေတာ္ ေတြ႔ရတဲ့ code ေတြက ေအာက္မွာ ျပထားတဲ့အတိုင္းပါပဲ။
CKEDITOR
CKEDITOR.editorConfig = function( config ) {

config.toolbarGroups = [
{ name: 'clipboard', groups: [ 'clipboard', 'undo' ]
},
{ name: 'editing', groups: [ 'find', 'selection',
'spellchecker' ] },
{ name: 'links' },
{ name: 'insert' },
{ name: 'forms' },
{ name: 'tools' },
{ name: 'document', groups: [ 'mode', 'document',
'doctools' ] },
{ name: 'others' },
'/',
{ name: 'basicstyles', groups: [ 'basicstyles',
'cleanup' ] },

ရွညသ
္ ြားမွာစိုးလု႔ိ comment ေတြေတာ့ ခ်န္ထားခဲပ
့ ါတယ္။ ေလာေလာဆယ္ေတာ့ code ေတြက ဘာေတြမန
ွ ္းမသိေသးဘူးဗ်။
ထားလုိက္ေတာ့ အဲဒါၿပီးမွပဲ ေလ့လာေတာ့မယ္။ ဒါေပမယ့္ ကၽြန္ေတာ္ ျဖဳတ္ပစ္ခ်င္တဲ့ about CKEDITOR ဆိုတဲ့ဟာကေတာ့
{ name: 'about' }
ပဲျဖစ္လိမ့္မယ္ထင္တယ္။ ျဖဳတ္ၿပီဗ်ာ။ ၿပီးေတာ့ Broswer မွာ ျပန္ Run ၾကည့္လုိက္တယ္။
သိပ္ဟုတ္တာေပါ့ ကၽြန္ေတာ္ထင္တာ မွန္သြားၿပီဗ်။ ဒါဆိုရင္ ဒီ toolbarGroups ကို ဘာလုိ႔ေရးထားတာလဲ၊

ဘာေတြေရးထားလဲဆိုတာကို အနည္းငယ္ေတာ့ ရိပ္မိမယ္လုိ႔ထင္ပါတယ္။ config. ရဲ႕ေနာက္က toolbarsGroup တို႔ removeButtons
တို႔ဆိုတာက config ရဲ႕ options ေတြပါ။ ပထမဆံုး အေၾကာင္း
{ name: 'clipboard', groups: [ 'clipboard', 'undo' ] },
မွာဆိုရင္ clipboard ဆိုတဲ့နာမည္ တစ္ခုနဲ႔ copy တို႔ cut တို႔ paste တို႔ undo တို႔ လုိမ်ိဳးေတြပါတဲ့ Group တစ္ခုလုပ္ထားပါတယ္။ အဲဒီ
Code ေရးလုိက္တဲ့အတြက္ေၾကာင့္ ေအာက္မွာ ျပထားတဲ့ ပံုအတိုင္းေပၚလာတာ ျဖစ္ပါတယ္။
CKEDITOR
ဒီေနရာမွာ ျပန္ရွင္းျပဖုိ႔ ခက္ေနတဲ့ အေၾကာင္းတစ္ခုရွိတယ္ဗ်။ ဘာလဲဆိုေတာ့ ဒီ groups ထဲမွာ ေရးထားတဲ့ clip-

board လုိ undo လုိမ်ိဳး နာမည္ေတြကို ဘယ္လုိသိလဲဆိုတာရယ္၊ ဘာေတြရွိတယ္၊ သံုးလုိ႔ရတယ္ဆိုတာကိုပါ။ အဲဒီ name ေတြက
list ထုတ္ထားတာမ်ိဳးမရွိပါဘူး။ ဒါေၾကာင့္ ကိုယ္ကိုယ္တိုင္ plugins ေတြထဲကို ဝင္ေမႊၾကည့္မွ အဆင္ေျပပါလိမ့္မယ္။ အဲဒီ name
ေတာ္ေတာ္မ်ားမ်ားကေတာ့ plugin.js ေတြရဲ႕ အေပၚဆံုးမွာ ပါတတ္ပါတယ္။ ဒါေၾကာင့္ အဲဒါမ်ိဳးေတြပါ ေလ့လာခ်င္တယ္ဆိုရင္ေတာ့
CKEDITOR developer version ကို https://github.com/CKEDITOR/CKEDITOR-dev မွာ download လုပ္ၿပီး စမ္းၾကည့္ဖုိ႔
အႀကံျပဳခ်င္ပါတယ္။
ဒါဆိုရင္ အဲဒီ ေအာက္က ေရးထားတဲ့ Code ေတြကို ဆက္ၾကည့္ဦးမယ္။
config.removeButtons = 'Underline,Subscript,Superscript';
ကေရာ။ ဒါကေတာ့ မလုခ

ိ ်င္တဲ့ button ေတြကို ျဖဳတ္လက
ုိ တ
္ ာပါ။ ဘာေတြ ျဖဳတ္လက
ုိ တ
္ ာလဲ သိခ်င္ရင္ေတာ့ ကိယ
ု တ
္ င
ို စ
္ မ္းၾကည္လ
့ က
ို ္ေပါ့ဗ်ာ။
ကၽြန္ေတာ္ကေတာ့ စမ္းၿပီးသြားၿပီ။
ဒီလုိဆိုရင္ config ရဲ႕ option ေတြ ဒိထက္မက ရွိႏိုင္ေသးတာေပါ့။ ဘာေတြရွိႏိုင္ေသးလဲလုိ႔ သိခ်င္တဲ့အတြက္ toolsbar-
Group ရဲ႕ အေပၚမွာ console ထုတ္ၾကည့္လုိက္ပါတယ္။
console.log(config);
ၿပီးေတာ့ ဒီ console ကို ျမင္ရဖုိ႔အတြက္ firebug (https://addons.mozilla.org/en-US/firefox/addon/firebug/) ရဲ႕

console ကို ဖြင့္ထားလုိက္ပါတယ္။ Browser ကို refresh လုပ္လုိက္ေတာ့ console က ပံုမွာ ျပထားတဲ့အတိုင္း ေပၚလာပါတယ္။
CKEDITOR
ဒီ console ထဲမွာ ကၽြန္ေတာ္တုိ႔ စိတ္ႀကိဳက္ျပန္ျပင္ႏိုင္မယ့္ Option ေတြကို အတိုင္းသား ျမင္ေနရပါတယ္။ Default lan-
guage ေျပာင္းတာေတြ၊ Theme ေျပာင္းတာေတြ၊ ကိုယ္သေဘာနဲ႔ကိုယ္ ေရးထားတဲ့ config file ကို သံုးတာေတြ အားလံုးလုပ္လုိ႔ရပါတယ္။
ကိုယ့္ဟာကိုယ္ ကလိၾကည့္လုိက္ေပါ့။ သေဘာက်စရာေကာင္းပါတယ္။
ဒိထက္ပိုၿပီး CKEDITOR ကို ကလိၾကည့္ခ်င္စိတ္ေပါက္လာတယ္ဗ်။ အဲေတာ့ ဘယ္လုိကလိရင္ ေကာင္းမလဲ....။ plugin

ေရးၾကည့္လုိက္ရင္ ေကာင္းမလားပဲေနာ္။ ေျပာေနတာ ၾကာပါတယ္ စၿပီးေရးၾကည့္လုိက္မယ္ဗ်ာ။
Starting Plugin
ေရးမယ္သာေျပာတာ။ ဘာ Plugin ေရးရမလဲဆိုတာေတာင္ မစဥ္းစားရေသးဘူး။ ကၽြန္ေတာ္ ကၽြမ္းက်င္တဲ့အပိုင္းပဲ

ေရးေတာ့မယ္ဗ်ာ။ တျခား website တစ္ခုခုက ပံုရဲ႕ link ကို ယူၿပီး editor ထဲမွာ ပံုထည့္တဲ့ Plugin ေရးမယ္။
သူ႔ Plugin ကို ေရးမွာဆိုေတာ့ သူ႔ Rule ကိုေတာ့ လုိက္နာရမွာေပါ့။ သူ႔ရဲ႕ rule အရ Folder Structure ကို ပံုမွာ
ျပထားတဲ့အတိုင္း ရွိရမယ္တဲ့။
သူျပထားတဲ့အတိုင္းပဲ plugins ဆိုတဲ့ directory (folder) ထဲမွာ

imgLink ဆိုတဲ့နာမည္နဲ႔ folder တစ္ခုေဆာက္လုိက္ပါတယ္။ ၿပီးေတာ့ အဲဒီထဲမွာ
plugin.js ကို ဆက္ၿပီး create လုပ္လုိက္ပါတယ္။ အဲဒီထဲမွာ ကၽြန္ေတာ္ရဲ႕ ပထမဆံုး
code ကို စၿပီးေရးလုိက္ပါတယ္။
CKEDITOR.plugins.add('imgLink');
Plugin တစ္ခုကို add လုပ္လုိက္တဲ့သေဘာပါပဲ။ parameter ကေတာ့ ကၽြန္ေတာ့ရဲ႕ Plugin name ပါ။ ခုနက ေဆာက္ခဲ့တဲ့
folder name နဲ႔လည္း အတူတူပဲ ျဖစ္ရပါမယ္။ ဒီ code အတြက္ documentation ကို http://docs.ckeditor.com/#!/api/ckeditor.
plugins-method-add မွာ ၾကည့္လုိ႔ရပါတယ္။ documentation က ေျပာထားတာက parameter မွာ plugin name အျပင္ အဲဒီ plugin
အတြက္ definition ကို ေနာက္ထပ္ ဒုတိယ parameter အျဖစ္နဲ႔ထည့္ေပးလို႔ရေသးတယ္။ definition က object ျဖစ္ရမယ္လုိ႔လည္း
ေျပာထားပါေသးတယ္။
ဒီေတာ့ ကၽြန္ေတာ့ရဲ႕ Plugin အတြက္ definition ကို ဆက္ၿပီး ေရးလုိက္ပါမယ္။ CKEDITOR က စၿပီး အလုပ္လုပ္တဲ့အခ်ိန္
(initialize လုပ္တဲ့အခ်ိန္) မွာ init ဆိုတဲ့ function ကို editor object parameter ေပးၿပီး လွမ္းေခၚပါတယ္။ ဒီေတာ့ သူလွမ္းေခၚမယ့္ init
ဆိုတဲ့ function ကို ေရးထားလိုက္မယ္။
CKEDITOR
init: function(editor) {

}
Adding button
ၿပီးေတာ့ အဲဒီထဲမွာ ဒီ Plugin အတြက္ button ေလးတစ္ခု ေရးထားလုိက္မယ္။ Button အတြက္ ကၽြန္ေတာ္ေရးလုိက္တဲ့
code က ေအာက္မွာ ျပထားတဲ့အတိုင္းပါပဲ။
init: function(editor) {
editor.ui.addButton('ImgLink',{});
},
အခု ဒီထဲမွာ ေရးထည့္လုိက္တဲ့ addButton ဆိုတာလည္း documentation ထဲမွာ ၾကည့္ၿပီးေရးထားတာပါ။ Documen-

tation မွာေျပာထားတာကေတာ့ addButton() အတြက္ name ဆိုတဲ့ ပထမ parameter ရယ္ definition ဆိုတဲ့ ဒုတိယ Parameter
ကိုထည့္ေပးရမယ္လုိ႔ေျပာထားပါတယ္။ ဒါေၾကာင့္ ImgLink ဆိုတဲ့ name ရယ္ object အလြတ္တစ္ခုရယ္ ထည့္ေပးလုိက္ပါတယ္။
ဒါေလာက္ဆိုရင္ေတာ့ Editor မွာ ကၽြန္ေတာ့ရဲ႕ Plugin အတြက္ button ေလးေပၚေလာက္ၿပီထင္ပါတယ္။

သြားၾကည့္လုိက္ပါဦးမယ္။ ....... Browser ကို Refresh လုပ္ပါတယ္။ ဒီတစ္ခါေတာ့ ထင္တာမမွန္ေတာ့ဘူးဗ်ာ။ နဂိုအတိုင္းပဲ ဘာမွ
ပိုၿပီးမပါလာဘူး။ ဘာေၾကာင့္ပါလိမ့္။ config ထဲမွာ သြားထည့္ေပးဦးမယ္ ထင္တယ္။ ခုနက ျဖဳတ္လုိက္တဲ့ about ေနရာမွာ ဒီ plugin
name ေလးကို သြားထည့္ၾကည့္လုိက္မယ္ဗ်ာ။
{ name: 'imgLink' },
ၿပီးေတာ့ config ကို console ထုတ္ၾကည့္တုန္းက extraPlugins ဆိုတာေလး ေတြ႕လုိက္တယ္ဗ်။ အဲဒါပါထည့္ေပးဖုိ႔

လိုလိမ့္မယ္။ toolbarGroups ရဲ႕ အေပၚနားေလးမွာလည္း code ေနာက္ထပ္တစ္ေၾကာင္း ထည့္လုိက္ပါတယ္။
config.extraPlugins = 'imgLink';
ေနာက္တစ္ေခါက္ Browser ကို refresh လုပ္လုိက္ေတာ့ Button အလြတ္ေလးတစ္ခု ေပၚလာတယ္ဗ်။ ဒါမ်ိဳးေလး။

CKEDITOR
Button ေတာ့ ေပၚလာပါၿပီ။ ဒါေပမယ့္ တျခား button ေတြမွာက်ေတာ့ သူ႔ပံုေလးနဲ႔သူ လွတပတေလး။ ၿပီးေတာ့ hover
တင္လုိက္ရင္လည္း သူ႔ plugin နာမည္ေလးနဲ႔။ ကၽြန္ေတာ့မွာက်ေတာ့ မေပၚဘူးျဖစ္ေနတယ္။ ဒါဆိုရင္ေတာ့ addButton ထဲက definition
ထဲမွာ ေရးရဦးမယ္ ထင္တယ္။
editor.ui.addButton('ImgLink',{
label: 'Insert Image Link'
});
Browser မွာ ျပန္ေခၚၾကည့္လုိက္ေတာ့ ပံုမေပၚေသးေပမယ့္ hover တင္လုိက္ရင္ေတာ့ Insert Image Link ဆိုတဲ့ စာေလး
ေပၚလာတယ္ဗ်။ ဒါဆုိရင္ ပံုေပၚဖုိ႔ဘယ္လုိလုပ္ရပါ့။
ပံုေပၚဖုိ႔အတြက္ဆုိရင္ ပံုရွိမွရမွာေပါ့။ Photoshop နဲ႔ ၃၂ x ၃၂ ရွိတဲ့ ပံုတစ္ခု create လုပ္ၿပီး သူေျပာထားတဲ့ folder structure
အတိုင္း images ဆိုတဲ့ folder ထဲမွာ icon.png ဆိုၿပီး save လုိက္ပါတယ္။ ၿပီးေတာ့ code လည္း တစ္ေၾကာင္းထပ္ေရးလုိက္ေသးတယ္ဗ်
icon: this.path + 'images/icon.png'
ဆိုၿပီးေတာ့။ Browser မွာ ျပန္သြားၾကည့္လုိက္ေတာ့ ကၽြန္ေတာ္လုိခ်င္တဲ့အတိုင္း ျဖစ္သြားၿပီဗ်။
OK။ ကိုယ္လုိခ်င္တဲ့အတိုင္း ျဖစ္လာေတာ့လည္း ေက်နပ္ဖို႔ေကာင္းသား။
Adding dialog
ျဖစ္ခ်င္တာက Button ကို ႏွိပ္လုိက္ရင္ Dialog box တစ္ခုတက္လာခ်င္တာဆိုေတာ့ ဆက္ၿပီး ေရးရဦးမွာေပါ့ေလ။ ဒီေတာ့
Dialog ေပၚေအာင္ ဆိုရင္ Dialog တစ္ခုကို Add လုပ္ေပးရမွာေပါ့။
CKEDITOR.dialog.add('linkDialog', function(editor){
return {
title: 'Link Image',
minWidth: '400',
minHeight: '300',
contents: [{
id: 'myTab',
elements: [
{
type: 'html',
html: '<h3>Testing<h3>'
}
]
}]
}
});
CKEDITOR
ဒါကေတာ့ Dialog တစ္ခုကို add လုပ္လိုက္တဲ့သေဘာပါ။ ဒါလည္း documentation ကို ၾကည့္ၿပီးေရးထားတာပါ။ dialog.
add အတြက္ ေပးရတဲ့ Parameter ေတြက ပထမ Parameter အေနနဲ႔ name ကို ေပးရပါတယ္။ ၿပီးေတာ့ ဒုတိယ Parameter အေနနဲ႔
Dialog method ကို ထည့္ေပးရပါတယ္။ function ထဲမွာေတာ့ Object တစ္ခုကို ေရးၿပီး တခါတည္း return ျပန္ေပးလုိက္ပါတယ္။
Dialog add ၿပီးသြားၿပီဆိုၿပီး Button ေလးကို သြားမႏွိပ္လုိက္ပါနဲ႔ဦး။ ဘာလုိ႔လဲဆိုေတာ့ Button ကုိ ႏွိပ္လုိက္ရင္ ဒီ Dia-
log ေပၚပါလုိ႔မွ မေျပာရေသးတာ။ ဒါဆိုလည္း ေျပာလုိက္တာေပါ့ဗ်ာ။ ဒီလုိ ေျပာဖို႔အတြက္ Command တစ္ခု အရင္ဆံုး လုပ္ေပးရမယ္လုိ႔
ေျပာထားတယ္။
editor.addCommand('openDialog', new CKEDITOR.dialogCommand('linkDialog'));
ဒါေၾကာင့္ opanDialog လုိ႔အမည္ရတဲ့ command တစ္ခုကို ေပါင္းထည့္ေပးလုိက္ပါတယ္။ addButton ဆိုတဲ့ code ရဲ႕
အေပၚနားေလးမွာေပါ့။ Code ကို ၾကည့္မယ္ဆိုရင္ openDialog ဆိုတဲ့ command name နဲ႔ command တစ္ခုကို ဖန္တီးၿပီး editor ob-
ject ထဲကို ေပါင္းထည့္ေပးလုိက္တယ္ဆိုတာ သိသာပါတယ္။ ဒါၿပီးရင္ရၿပီလားဆိုေတာ့ ဘယ္ရဦးမလဲ။ Command ပဲ add ရေသးတာကို
ဘယ္ Button ကို ႏွိပ္ရင္ ပြင့္မယ္ဆိုတာကိုလည္း ေျပာရဦးမွာေပါ့။ ဒီေတာ့ ခုနက ကၽြန္ေတာ္ လုပ္ထားတဲ့ Button မွာ command ရဲ႕
name ျဖစ္တဲ့ openDialog ဆိုတာကို သြားၿပီးေၾကျငာေပးရမွာေပါ့။
editor.ui.addButton('ImgLink',{
label: 'Insert Image Link',
icon: this.path + 'images/icon.png',
command: 'openDialog'
});
Command ဆိုၿပီး code တစ္ေၾကာင္း ထပ္ျဖည့္လုိက္ပါတယ္။ သေဘာကေတာ့ ဒီ button ကုိ ႏွိပ္လုိက္ရင္

အေပၚမွာ ေရးခဲ့တဲ့ command ကို အလုပ္လုပ္မယ္ ဆိုတဲ့သေဘာေပါ့။ အခုေလာက္ဆိုရင္ေတာ့ ႏွိပ္ၾကည့္လုိရေလာက္ၿပီထင္တယ္။
သြားႏွိပ္ၾကည့္လုိက္မယ္ဗ်ာ။
CKEDITOR
ဒါမ်ိဳးေလးေပၚလာၿပီဆိုေတာ့ မွန္သြားၿပီလုိ႔ေျပာလုိ႔ရတာေပါ့။
ဒါဆိုရင္ Dialog အတြက္ ေရးခဲ့တဲ့ code ကို တခ်က္ျပန္ၾကည့္ၾကည့္မယ္ဗ်ာ။ ဘယ္ code ေတြက ဘာေတြလုပ္တာလဲ
ဆိုတာကို။ return ျပန္ေပးလိုက္တဲ့ Object ထဲက title မွာ ေရးထားတာ ဘယ္အတြက္ဆိုတာက ပံုကို ျမင္လုိက္တာနဲ႔ သိမွာပါ။ Dia-
log window ရဲ႕ title ဆိုပါေတာ့။ minWidth နဲ႔ minHeight ကလည္း အလားတူပါပဲ Dialog window ရဲ႕ အနည္းဆံုးရွိရမယ့္ width
နဲ႔ height ျဖစ္ပါတယ္။ Dialog window ထဲမွာပါမယ့္ အေၾကာင္းအရာ (Content) ေတြကိုေတာ့ contents ဆိုတဲ့ array ထဲမွာ object
တစ္ခုစီအေနနဲ႔ ထည့္ေရးေပးရပါမယ္။
Elements ထဲမွာကေတာ့ Html ရဲ႕ element ေတြကို ထည့္ေရးလုိ႔ရပါတယ္။ အခု ဒီမွာ စမ္းေရးထားတာက html ရဲ႕ p
tag တစ္ခုကိုပဲ စမ္းထားတာပါ။ type မွာ html ထည့္ထားၿပီးၿပီဆိုရင္ html ဆိုတဲ့ property ထဲမွာ html အတိုင္း အကုန္ေရးလုိ႔ရပါတယ္။
ေလာေလာဆယ္ေတာ့ type ထဲမွာ ေနာက္တစ္မ်ိဳးထည့္ၿပီး စမ္းၾကည့္လုိက္ဦးမယ္။
id: 'linkField',
type: 'text',
label: 'Link',
'default': 'Insert Image Link',
ခုနက type နဲ႔ html properties ေတြေနရာမွာ ဒီ Code ေတြကို အစားထိုးၿပီး စမ္းၾကည့္လိုက္ရင္ ဘယ္လုိျဖစ္သြားမလဲဆိုေတာ့။
ကိုယ္တိုင္စမ္းၾကည့္လုိက္ေပါ့ ဘာျဖစ္သြားမလဲ။
ဒီထဲမွာထည့္လုိ႔ရတဲ့ property ေတြအားလံုးကိုလည္း documentation မွာ ၾကည့္လုိ႔ရပါတယ္။
Event
Textbox ေလး ရၿပီဆိုေတာ့ ကၽြန္ေတာ္လုိခ်င္တဲ့ Plugin ေလး တစ္ပိုင္းတစ ပံုေပၚလာၿပီလုိ႔ ေျပာလုိ႔ရပါၿပီ။ ဒီလုိဆိုရင္ Text-
box ထဲမွာ Image Link ထည့္ၿပီး Ok ႏွိပ္လုိက္ရင္ အဲဒီ Link မွာရွိတဲ့ image ကုိ Text editor ထဲကို ထည့္လုိက္ခ်င္တာ။ အဲလုိထည့္ဖုိ႔က
“Ok button ေလးကိုႏွိပ္လုိက္ရင္” ဆိုတဲ့ event ကို ဖမ္းမွ ရမွာဗ်။ ဘယ္လုိဖမ္းၾကမလဲ။ လြယ္ပါတယ္။ Dialog definition မွာ onOk
ဆိုတဲ့ event ကို CKEDITOR က ဖန္တီးေပးထားၿပီးသားပါ။
onOk: function(e) {
console.log('Clicked!');
}
contents ရဲ႕ေနာက္မွာ , ခံၿပီးေတာ့ ဒီ code ေလးကို ေရးလုိက္ရံုပါပဲ။ ကၽြန္ေတာ္ ေရးထားတာမွန္တယ္ဆုိရင္ေတာ့ con-

sole ထဲမွာ Clicked! ဆိုတာေလး ေပၚလာမွာပါ။ ..... ကြက္တိပဲ။ မွန္သြားၿပီဗ်။ ဒါဆုိရင္ ေနာက္တစ္ဆင့္ ဆက္ေရးၾကည့္လုိက္မယ္။ Text
field ထဲမွာ ထည့္လုိက္တဲ့ image link ကုိ console ထုတ္ၾကည့္လုိက္မယ္။ ဘယ္လုိထုတ္ၾကည့္မလဲဆိုေတာ့က..
CKEDITOR
console.log(this.getValueOf('myTab', 'linkField'));
ခုနအတိုင္းပဲ ျပန္စမ္းၾကည့္လုိက္တယ္။
OK! .. ရသြားၿပီ။ ဘာေတြေရးလုိက္လုိ႔ ရသြားလဲဆိုတာ ျပန္ၾကည့္ၾကည့္ရေအာင္ဗ်ာ။ CKEDITOR ရဲ႕ getValueOf ဆိုတဲ့

function မွာ contents ထဲက tab Id ရယ္ elements ထဲက element Id ရယ္ကို ထည့္ေပးၿပီး ေခၚလုိက္တဲ့အခါမွာ text field ထဲမွာ ရွိတဲ့
value ကို ျပန္ထုတ္ေပးပါတယ္။ ဒါေၾကာင့္ ကၽြန္ေတာ္လုိခ်င္တဲ့ အေျဖကို ရတာေပါ့။
Inserting
ကဲေနာက္ဆံုး အဆင့္ကိုေတာ့ ေရာက္လာပါၿပီ။ ဒီေနာက္ဆံုး အဆင့္ကုိ ေအာက္မွာေရးထားတဲ့ Code ေလးေတြနဲ႔
အဆံုးသတ္လုိက္မယ္ဗ်ာ။
var imgLink = editor.document.createElement('img');

imgLink.setAttribute('src', this.getValueOf('myTab',
'linkField'));
editor.insertElement(imgLink);
CKEDITOR
ပံုကို ျမင္လုိက္တာနဲ႔ OK မွာ စိုေျပၿပီဆိုတာ ေျပာစရာလုိမယ္မထင္ပါဘူး။
ဒီ Tutorial ရဲ႕ Source code မွာေတာ့ ဒီထက္အမ်ားႀကီး ျပည့္စံုေအာင္ ေရးျပထားပါတယ္။ အဲဒါေတြ အကုန္ ဒီမွာ
ေရးလုိက္ရင္ အရမ္းရွည္သြားမွာ စိုးတဲ့အတြက္ Source code ကို ၾကည့္ၿပီး ဆက္ေလ့လာေပးပါလုိ႔ ေတာင္းပန္ခ်င္ပါတယ္။ CKEDITOR
ကို ကၽြမ္းကၽြမ္းက်င္က်င္ အသံုးခ်ႏိုင္ဖုိ႔ ဆိုရင္ Documentation ကို ေကာင္းေကာင္းႀကီး ေမႊေႏွာက္ႏိုင္ဖို႔ပဲ လုိပါတယ္။ ဒီ Tutorial ကိုေတာ့
ဒီမွာပဲ ရပ္လုိက္ပါမယ္။
M L
HT
Nyan Lynn Htut
Myanmar Links Professional Web Development Team မွာ
Web Developer တစ္ေယာက္အေနနဲ႔ လုပ္ကိုင္ေနသူ တစ္ေယာက္၊
PHP Open Source CMS တစ္ခုျဖစ္တဲ့ Reborn CMS ရဲ႕ Core De-
veloper တစ္ေယာက္၊ REST API နဲ႔ Frontend Javascript Appli-
cation ေတြအေၾကာင္းကို စိတ္ဝင္စားသူ။
Facebook : facebook.com/nyanlynnhtut
Twitter : @nyanlynnhtut
Github : @nyanlynnhtut
What is HTML5?
HTML5 ကို ဘယ္လို အသံုးခ်ရသလဲ ဆိုတာကို မေျပာျပခင္မွာ ကၽြန္ေတာ္တို႔အေနနဲ႔ HTML5 ဆိုတာ ဘာလဲ ဆိုတာကို
အရင္သိထားသင့္ပါတယ္။ ဒီအတြက္ HTML5 ကဘာလဲ ဆိုတာကို အရင္ဦးဆံုး ရွင္းျပေပးသြားပါမယ္။
HTML5 ဆိုတာကေတာ့ Web Page ေတြေရးဆြဲရာမွာ အဓိက အသံုးျပဳၾကတဲ့ HTML Language ရဲ႕ Next Genera-
tion နည္းပညာ တစ္ခုပဲ ျဖစ္ပါတယ္။ HTML4.01, XHTML 1.0, XHTML 1.1 အစရွိတဲ့ ယခင္အသံုးျပဳေနၾက HTML Version ေတြကို
အဆင့္ျမွင့္တင္ထားတဲ့ နည္းပညာတစ္ခုပါ။ အနာဂတ္ Web Application ေတြကို ေရးဆြဲၾကတဲ့အခါမွာ လိုအပ္လာတဲ့ Feature
အသစ္ေတြကို ထပ္မံေပါင္းထည့္ေပးထားတဲ့ HTML ရဲ႕ ေနာက္ဆံုးထြက္ Version တစ္ခုပဲျဖစ္ပါတယ္။
ဒီေနရာမွာ တစ္ခ်ိဳ႕ေတြကေတာ့ HTML5 ဆိုတာ Technology တစ္ခုထဲကို

ေခၚတာမဟုတ္ဘဲ HTML, CSS3, Javascript API ေတြကို စုစည္းထားတဲ့
နည္းပညာ တစ္ခုလို႔လည္း ေျပာၾကပါတယ္။
HTML5 ကို အသံုးျပဳဖို႔ရာအတြက္ ေခတ္ေပၚ Browser တစ္ခုပဲလိုအပ္ပါတယ္။ Mozilla Firefox, Google Chrome, Apple
Safari, Opera အစရွိတဲ့ နာမည္ႀကီး browser ေတြရဲ႕ေနာက္ပိုင္းထြက္ရွိလာတဲ့ version ေတြမွာ HTML5 ကို support လုပ္ၾကပါတယ္။
တစ္ျခားနာမည္ႀကီး browser တစ္ခုျဖစ္တဲ့ Internet Explorer မွာေတာ့ version 8 အထိ support မလုပ္ေသးေပမယ့္လည္း version
9 မွာေတာ့ feature တစ္ခ်ိဳ႕ကို support လုပ္လာၿပီ ျဖစ္ၿပီးေတာ့ version 10 မွာေတာ့ အျပည့္အ၀ support လုပ္လာၿပီ ျဖစ္ပါတယ္။
ဒါ့အျပင္ Mobile Device ေတြအေပၚက browser ေတြမွာလည္း HTML5 ကို support လုပ္ၾကတဲ့ အတြက္ HTML5 ကိုအသံုးျပဳဖို႔ရာ
လက္တြန္႔ေနရေတာ့မယ့္ အခ်ိန္မဟုတ္ေတာ့ပါဘူး။
HTML5 ထဲက Feature ေတြကို သံုးဖို႔ရာအတြက္ ဘယ္ feature ေတြကေတာ့ ဘယ္ browser ေတြမွာ support လုပ္တယ္
မလုပ္ဘူးဆိုတာကို http://caniuse.com/ မွာသြားေရာက္ၾကည့္ရႈႏိုင္ပါတယ္။
Why We Choose HTML5

HTML5 ကို ဘာေၾကာင့္ အသံုးျပဳ ေလ့လာသင့္တာလဲဆိုတာကို အေျခခံ အခ်က္အလက္ႏွစ္ခုနဲ႔ ရွင္းျပေပးသြားပါမယ္။
အဲ့ဒီအခ်က္အလက္ႏွစ္ခုကေတာ့ -
(၁) HTML5 ကို အသံုးျပဳၿပီးေတာ့ mobile device ေတြအတြက္ Application ေတြေတာင္ ေရးသားလို႔ ရလာတဲ့အတြက္ HTML5 ကို
အသံုးခ်ၿပီး mobile application အဆင့္ကိုလည္း ကၽြန္ေတာ္တို႔ အေနနဲ႔ တက္လွမ္းႏိုင္တဲ့ အေနအထားမွာ ရွိပါတယ္။
(၂) ေနာက္တစ္ခ်က္အေနနဲ႔ ေျပာရရင္ Web Developer ေတြအေနနဲ႔ OS ေပၚမွာ တင္ၿပီး Run ေနၾကတဲ့ Application ေတြကို Web
ေပၚတင္ၿပီး အသံုးခ်ႏိုင္ဖို႔ ႀကိဳးစားလာၾကပါတယ္။ တစ္နည္းအားျဖင့္ Web based application လို႔လည္း ေခၚႏိုင္ပါတယ္။ ထင္ရွားတဲ့
ဥပမာတစ္ခုကို ၾကည့္ရရင္ Google ကေန Chrome OS ဆိုၿပီး လုပ္ပါတယ္။ Chrome OS ဆိုတာကေတာ့ Chorme Browser ကို
ပိုမိုအဆင့္ျမွင့္ထားတာ ျဖစ္ပါတယ္။ ဒီအတြက္ Chrome OS မွာ Run တဲ့ Application ေတြအားလံုးက Web ကို အေျခခံၿပီးေရးသား
ၾကရပါတယ္။ ဒီအတြက္ HTML5 ကို အေျခခံထားၿပီး ေရးသားၾကပါတယ္။
HTML5 မွာ အရမ္းကိုေကာင္းမြန္တဲ့ Application Programming Interface(API) ေတြလည္း ပါလာၿပီးသား ျဖစ္တဲ့အတြက္ Mobile Ap-
plication ေတြ Web based Application ေတြေရးသားႏိုင္လာတာလည္း ျဖစ္ပါတယ္။
အရင္က HTML version ေတြထက္လည္း Performance ပိုင္းမွာ ပိုေကာင္းလာပါတယ္။ ေအာက္မွာေတာ့ HTML5 မွာ အသစ္ပါလာတဲ့
feature ေတြရဲ႕ list ကို ေဖာ္ျပေပးပါမယ္။
Canvas (2D Drawing API)
Offline and Storage (Application cache, localStorage, sessionStorage, etc..)
Drag and Drop
Audio and Video
Geolocation API
File API
အသစ္ပါလာတဲ့ Tag ေတြ၊ ေရးသားနည္း ေျပာင္းသြားတဲ့ Tag ေတြ၊ ဖယ္ထုတ္ပစ္လိုက္တဲ့ Tag ေတြအေၾကာင္းကို ဆက္ေျပာျပသြားမွာပါ
[1] DOCTYPE
ပထမဆံုး အေနနဲ႔ ေျပာင္းလဲသြားတာကေတာ့ DOCTYPE ပဲ ျဖစ္ပါတယ္။ HTML file ရဲ႕ Document Type ကို
ေၾကျငာေပးတဲ့ Tag တစ္ခုျဖစ္တဲ့ DOCTYPE ကို အရင္ HTML မွာေတြတုန္းက အရွည္ႀကီးေရးခဲ့ၾကရတာ မွတ္မိၾကမယ္ထင္ပါတယ္။
ဥပမာ အေနနဲ႕ HTML 4.01 မွာေရးတဲ့ ပံုစံကို ၾကည့္ၾကည့္ပါ။
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">
ဒီစာသားက ကၽြန္ေတာ္တို႔အတြက္ မွတ္သားထားရတာ ခက္ခဲပါတယ္။ ဒါေပမယ့္ HTML 5 မွာေတာ့ မွတ္ထားဖို႔ရာ အရမ္းကို

လြယ္ကူသြားပါၿပီ။
<!DOCTYPE HTML>
[2] Meta
ေနာက္ထပ္ Tag တစ္ခုကေတာ့ character encoding ကို ေၾကျငာေပးတဲ့ meta tag ပဲ ျဖစ္ပါတယ္။ အရင္က ေရးခဲ့တဲ့
ပံုစံမွာေတာ့ content ေတြ http-equiv ေတြ အစရွိသျဖင့္ ေရးသားေနရေပမယ့္ အခုေတာ့ အရမ္းကို ရိုးရွင္းသြားပါၿပီ။ ေအာက္က code
ႏွစ္ေၾကာင္းကို ယွဥ္ၾကည့္ရင္ သိသြားမွာပါ။
<meta http-equiv="Content-Type" content="text/html;

charset=utf-8">
<meta charset="UTF-8">
ဒီေနရာမွာ ကၽြန္ေတာ္ဖတ္ဖူးတဲ့ မွတ္သားစရာေလး တစ္ခုကို ေျပာျပခ်င္ပါတယ္။

အဲ့ဒါကေတာ့ ဒီ meta tag ကို title tag မေရးခင္မွာ ေရးေပးရပါတယ္။
ဘာေၾကာင့္လဲဆိုေတာ့ XSS attack အတြက္ Internet Explorer မွာ
ျပႆနာရွိလို႔ပါ။ ဒီ character encoding ကို Page ရဲ႕ ပထမဆံုး 512 bytes
အတြင္းမွာ ေၾကျငာေပးဖို႔လိုတယ္လို႔ Rule တစ္ခုအေနနဲ႕ သတ္မွတ္ထားတာလည္း
[3] link and script
Stylesheet ေတြ Script file ေတြကို ခ်ိတ္ေပးတဲ့ link tag နဲ႔ script tag ကို HTML Developer ေတြတိုင္းလိုလို
သံုးၾကရပါတယ္။ အရင္က ဒီ tag ေတြကို ေရးေပးတဲ့ အခါမွာ type ဆိုတာကို ထည့္ေၾကျငာေပးရပါတယ္။
<link rel="stylesheet" type="text/css" href="style.css"

media="all">
<script type="text/javascript" src="script.js"></script>
အခုေတာ့ ဒီ property ကို ေမ့ပစ္လိုက္လို႔ ရပါၿပီ။ ဘာေၾကာင့္လဲဆိုေတာ့ ဒီ type ေတြကို default အေနနဲ႔ သတ္မွတ္ေပးလိုက္လို႔ပဲ
ျဖစ္ပါတယ္။ ဒါက HTML5 ရဲ႕ ပံုစံပါ။
<link rel="stylesheet" href="style.css" media="all">

<script src="script.js"></script>
Sectioning Elements
Header and footer

ကၽြန္ေတာ္တို႔ေတြ Web Page ေတြကို ေရးသားၾကတဲ့အခါမွာ ပံုမွန္အားျဖင့္ေတာ့ header ပိုင္း footer ပိုင္း အစရွိသျဖင့္
ခြဲျခားၿပီးေရးၾကပါတယ္။ ဒီလိုေရးသားၾကတဲ့ အခါမွာလည္း developer အမ်ားစုအသံုးျပဳၾကကေတာ့ div ကို id name ေပးၿပီးေတာ့
ခြဲျခားၾကပါတယ္။ ေအာက္က Markup ေလးကို ၾကည့္ၾကည့္ပါ။
<div id="header">
....
</div>
<div id="content">
....
</div>
<div id="footer">
.....
</div>
ID name ကို header, footer အစရွိသျဖင့္ developer အမ်ားစုက ေပးၾကပါတယ္။ ဒါေၾကာင့္မို႔လို႔ ဒီ name ေတြက stan-
dard တစ္ခုလို ျဖစ္ေနတဲ့အတြက္ HTML5 မွာေတာ့ header tag, footer tag ဆိုၿပီးေတာ့ tag အသစ္အေနနဲ႔ ထည့္ေပးလိုက္ပါတယ္။
ဒီလိုထည့္ေပးလိုက္ျခင္းအားျဖင့္ ကၽြန္ေတာ္တို႕ code ေတြက ၾကည့္ရတာ ပိုလို႔အဆင္ေျပသြားေစပါတယ္။ အေပၚမွာ ေရးခဲ့တဲ့ code ကို
HTML5 မွာျပန္ေရးၾကည့္မယ္ဆိုရင္ ဒီလိုေတြ႕ရပါမယ္။
< header>
....
</header>
<div id="content">
....
</div>
< footer>
.....
</footer>
ၾကည့္လိုက္တာနဲ႔တင္ HTML ရဲ႕ section ေတြကို အလြယ္တကူခြဲျခားၿပီး ျမင္ႏိုင္ပါတယ္။ဒီလိုမ်ိဳး Section ေတြကို ခြဲျခားဖို႔ရာ
အသစ္ပါလာတာ ဒီ Tag ႏွစ္ခုတည္းေတာ့ မဟုတ္ပါဘူး။ ဒီအတြက္ က်န္တဲ့ Tag ေတြကို ကၽြန္ေတာ္တို႔ ဆက္လက္ေလ့လာၾကည့္ၾကပါမယ္။
Nav tag
Nav tag ကိုေတာ့ navigation (menu) area ကို ခြဲျခားတဲ့ေနရာမွာ အသံုးျပဳႏိုင္ပါတယ္။ အရင္က navigation ကို
ေရးသားၾကတဲ့အခါမွာ အမ်ားစုက -
<ul id="nav">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
</ul>
ဆိုၿပီး ေရးသားၾကပါတယ္။ အခုအခ်ိန္မွာေတာ့ nav tag ကို အသံုးျပဳၿပီးေတာ့ navigation section ကို ရွင္းလင္းစြာ ေဖာ္ျပလို႔ရပါတယ္။
ဒီလိုအေလ့အထေတြဟာ သူမ်ားေရးသားထားတဲ့ source code ကို ျပန္ျပင္ရတဲ့ အခ်ိန္မ်ိဳးမွာ ကိုယ့္အတြက္ နားလည္ရလြယ္ကူဖို႔
အေထာက္အကူေပးပါတယ္။ HTML5 ရဲ႕ ပံုစံအရဆို -
<nav>
<ul>
<li>…</li>
</ul>
</nav>
Article tag
Blog ယဥ္ေက်းမႈ Web ေပၚမွာ ေခတ္စားလာၿပီးတဲ့ ေနာက္မွာေတာ့ blog ဆိုတာဟာ Website တိုင္းလိုလိုမွာ
ျမင္ေတြ႕လာရၿပီျဖစ္ပါတယ္။ ဒါ့အျပင္ Blog သီးသန္႔ Site ေတြလည္း ေျမာက္ျမားစြာ ေတြ႕လာရမွာပါ။ Blog post ေတြအတြက္ HTML
Markup ေရးၾကတဲ့အခါမွာ အေျခခံအားျဖင့္ ဒီလိုပံုစံရွိပါတယ္။
<div class="article">
<h1>This is Title</h1>
<p>This is blog post content</p>
</div>
Post title ေတြ post body(content) ေတြ publishing date ေတြ category ေတြအစရွိသျဖင့္ ရွိတဲ့ post တစ္ခုကို div တစ္ခုနဲ႔
စုၿပီးထုပ္ထားၾကပါတယ္။ post ဆိုတာမ်ိဳးကလည္း တစ္ခုတည္း မဟုတ္တဲ့အတြက္ ေနာက္ထပ္ Post တစ္ခုကိုလည္း ဒီလိုပဲ div
တစ္ခုနဲ႔ ထုပ္ထားပါတယ္။ တူညီတဲ့ style ေတြအတြက္ div ကို class name တစ္ခုေပးၾကပါတယ္။ အမ်ားစုကေတာ့ article, post
အစရွိသျဖင့္ေပါ့ဗ်ာ။အခုေတာ့ div class=”article” ဆိုတာႀကီးကို ေမ့လိုက္ပါေတာ့။ ဒီအစား article ဆိုတဲ့ tag ကို အစားထိုးသံုးလိုက္ပါ။
<article>
<h1>This is Title</h1>
<p>This is blog post content</p>
</article>
ဒီblock ႏွစ္ခုကို ယွဥ္ၾကည့္တဲ့အခါမွာ HTML5 ရဲ႕ Markup က developer ေတြအတြက္ ဖတ္ရႈရတာ ပိုလို႔ ရွင္းလင္းပါတယ္။ header,
footer တုန္းကလိုပဲ ဒါဟာ ဘာ area လဲဆိုတာကို ထင္ထင္ရွားရွား ျမင္ပါတယ္။
Aside Tag
Aside tag ကို definition ဖြင့္ဆိုထားတာကေတာ့ Page ရဲ႕ အဓိက content ေတြကို ဝန္းရံထားတဲ့ (သို႔) ဆက္စပ္ေနတဲ့
အစိတ္အပိုင္းကို ေခၚဆိုတာလို႔ ေတြ႕ရမွာပါ။ သင့္အေနနဲ႔ blog site ေတြနဲ႔ မစိမ္းဘူးဆိုရင္ေတာ့ အဲ့ဒီ site ေတြမွာ ေတြ႕ေနရတဲ့ sidebar
ဆိုတဲ့ အစိတ္အပိုင္း (Popular post ေတြ၊ Related post ေတြ၊ search box ေတြရွိတဲ့ေနရာ) ကို aside နဲ႔အစားထိုးလိုက္ပါေတာ့။
<aside>
<h2>Sidebar Widget</h2>
<div class="widget-1">
….
</div>
</aside>
Section tag
Section ဆိုတဲ့ tag ကေတာ့ နားလည္ရ အနည္းငယ္ ခက္ပါတယ္။ ဘာလို႔လဲဆိုေတာ့ ဒီ section tag ကို အသံုးျပဳမယ္ဆိုရင္
div tag ကိုေမ့ပစ္ရေတာ့မွာလား။ ဥပမာအားျဖင့္ ကၽြန္ေတာ္တို႔ရဲ႕ page မွာ ဘယ္ဖက္ျခမ္းမွာ content တစ္ကြက္၊ ညာဖက္ျခမ္းမွာ con-
tent တစ္ကြက္နဲ႔ 2 column layout တစ္ခုဆိုပါေတာ့။
DIV tag ကို အသံုးျပဳၿပီးေတာ့ ေရးလိုက္ရင္လည္း ရေနတာကို section နဲ႔သံုးမယ္ဆိုေတာ့ div tag ကိုေမ့လိုက္ေတာ့လို႔ ေျပာရမလို
ျဖစ္ေနပါၿပီ။ တကယ္တမ္းမွာေတာ့ section tag ကို သံုးသင့္တဲ့ေနရာေတြ ရွိပါတယ္။ အဲ့ဒါက ဘယ္လို ေနရာေတြမွာလဲ ဆိုေတာ့ ---
ဥပမာအားျဖင့္ သတင္း site တစ္ခုဆိုပါေတာ့။ ဒီလို site မ်ိဳးေတြမွာက အေၾကာင္းအရာတူညီတဲ့ article ေတြကို စုၿပီးထားပါတယ္။ Sport
section, local news section, international section အစရွိသျဖင့္ေပါ့။ ဒီေနရာေတြမွာ section tag ကို သံုးသင့္ပါတယ္။
ဒီပံုေလးကို ၾကည့္ၾကည့္တဲ့အခါမွာ တူညီတဲ့ သတင္း article ေတြကို သူ႕ section အလိုက္ စုေပးထားပါတယ္။
Section ကို ဒီလိုမ်ိဳး အေၾကာင္းအရာ (category) တူညီတဲ့ အရာေတြကို စုစည္းထားတဲ့ ေနရာမွာ သံုးျခင္းျဖင့္ ဒါကေတာ့ ဘာ
အေၾကာင္းအရာေတြ စုထားတာဆိုတာကို coder ေတြအေနနဲ႔ ၾကည့္ရႈရလြယ္ကူ သြားႏိုင္ပါတယ္။
{echo}
Thank You
ယေန႔ေခတ္မွာ Web Industry ရဲ႕ ေျပာင္းလဲမႈေတြဟာ အရမ္းကို ျမန္ဆန္လြန္းလွပါတယ္။ {echo} အေနနဲ႔ Web Design, Web De-
velopment နဲ႔ပတ္သက္တဲ့ ေဆာင္းပါးေတြ ၊ Tutorial ေတြကို ရႈေထာင့္ေပါင္းစံုကေန အစြမ္းကုန္ႀကိဳးစား ေဖာ္ျပေပးသြားမွာျဖစ္ပါတယ္။
Web Design, Web Development နဲ႔ပတ္သက္ၿပီး အသက္ေမြးဝမ္းေက်ာင္း ျပဳလိုသူေတြအတြက္ တစ္ဖက္တစ္လမ္းက
အေထာက္အကူျပဳေစဖို႔ ရည္ရြယ္ပါတယ္။။
သင့္ရဲ႕တန္ဖိုးရွိတဲ့အခ်ိန္ ခဏတစ္ျဖဳတ္ကို {echo} နဲ႔ ျဖတ္သန္းေပးလို႔ ေက်းဇူးတင္ပါတယ္။
{echo} Magazine ၏ စာမူမ်ား၏ မူပိုင္ခြင့္မ်ားသည္ မူရင္းစာေရးသူမ်ားသာ ပိုင္ဆိုင္ပါသည္။ စာေရးသူ၏

ခြင့္ျပဳခ်က္မရရွိပဲ ထိုစာမူမ်ား (သို႔မဟုတ္) ထိုစာမူမ်ား၏ တစိတ္တပိုင္းကို Printed Document အေနျဖင့္
ျဖစ္ေစ၊ နဂိုမူလ {echo} ၏ PDF ကို ပံုစံေျပာင္းလဲ၍ ျဖစ္ေစ၊ တစိတ္တပိုင္းအား ျဖတ္ေတာက္၍ျဖစ္ေစ၊
အျခား Magazine မ်ားအတြင္း ေပါင္းစပ္၍ျဖစ္ေစ၊ ျပန္လည္ေဝမွ်ခြင့္ ၊ ျပန္လည္ထုတ္ေဝခြင့္ မရွိပါ။
အြန္လိုင္းေပၚတြင္ ျပန္လည္ေဝမွ်မည္ ဆိုပါက နဂိုမူလ Download Link အတိုင္း ေဝမွ်ၾကပါရန္
ေမတၱာရပ္ခံအပ္ပါသည္။
{ echo } © 2013 . http://echo.myanmarlinks.net

November

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

November

Uploaded by

Copyright:

Available Formats

preface

ကၽြန္ေတာ္ ခရီးသြားေနတာရယ္၊ ေနမေကာင္းတာရယ္ေၾကာင့္ အမ်ားႀကီး မေရးႏုိင္ပါဘူး။

ဒီတစ္လမွာေတာ့ အထူးသျဖင့္ CSS နည္းပညာေတြနဲ႕ ပတ္သတ္တဲ့ ေဆာင္းပါးနဲ႕ Tutorial အဓိက

အားလံုး စိတ္၏ ခ်မ္းသာျခင္း ကိုယ္၏ က်န္းမာျခင္းနဲ႔ ျပည့္စံုႏိုင္ပါေစခင္ဗ်။

Write Your CSS with LESS Web Assets Organizing Tips

Editor Layout Designer

Thiha Hein Zaw Htet

Proof Reader Website

Echo Team echo.myanmarlinks.net

Facebook Page Email

{ echo } is the product of

<script src="less.js" type="text/javascript"></script>

<link rel="stylesheet/less" type="text/css" href="style.less">

ဒါဆိုရင္ေတာ့ CSS မွာ output က ဒီလိုမ်ိဳးထြက္လာမွာပါ။

ဆိုလိုတာက Color code ကို ေနရာတုိင္းမွာ လိုက္မထည့္ေတာ့ဘဲ တစ္ေနရာတည္းမွာထည့္ၿပီး အဲ့ဒီ variable

ဒါဆိုရင္ .div1 နဲ႔ .div2 ထဲမွာ

ဒါဆိုရင္ .div1 မွာက

ဒီ Code ေတြဝင္ ၿပီး .div2 မွာေတာ့

ဒီလိုမ်ိဳးဝင္မွာပါ။ Class ပံုစံေရးလို႔ရတဲ့ အတြက္ သံုးရတာ ေတာ္ေတာ္ အသံုးဝင္ပါတယ္။ ကိုယ္ေျပာင္းခ်င္သလိုလည္း

HTML Code က ဒီလိုရွိတယ္ ဆိုပါစို႔။

အရင္က CSS ေရးရင္

ဒီလိုမ်ိဳးေရး ရပါတယ္။ LESS မွာေတာ့

ဒီလိုပံုစံ မ်ိဳးပါ။ တစ္ေၾကာင္းစီ ေရးစရာမလိုေတာ့ဘဲ အကုန္လံုးကို Inheritance ပံုစံလိုမ်ိဳး ေရးလို႔ရပါတယ္။

LESS မွာ တစ္ျခား သံုးလို႔ရတဲ့ function ေတြရွိပါေသးတယ္။ http://lesscss.org/#reference မွာၾကည့္ႏိုင္ပါတယ္။

imagejpeg($image, $destination, $quality);

Image Sprites and Icon Fonts

Use Data Url / Inline Images

ေနာက္ဆံုးအေနနဲ႔ တစ္ခုပဲ ျပႆနာရွိတာက ထံုးစံအတိုင္း IE မွာေတာ့ ေကာင္းေကာင္းအလုုပ္မလုုပ္ပါဘူး။

html ထဲမွာဆိုရင္ေတာ့ ေအာက္ကအတိုင္း meta tag ကိုသံုးၿပီးေရးရပါတယ္။

<meta http-equiv="Cache-control" content="public">

<link rel="prefetch" href="img/sprites.jpg">

Using @import in css is not a good habit

Use CSS Preprocessors

Write better CSS

ဒီမွာက example ျပထားတာက နည္းေနေတာ့ သိပ္မသိသာသလိုျဖစ္ရင္ျဖစ္ေနပါလိမ့္မယ္။ ဒါေပမယ့္ ေသခ်ာတာကေတာ့ ေအာက္က

apply လုုပ္ရမွာျဖစ္ၿပီး ေအာက္က code မွာဆို တစ္ခါပဲလုပ္ရမွာပါ။

ေနာက္ဆံုးတစ္ခုက project အားလံုးၿပီးသြားၿပီဆိုရင္ code ေတြကို minify လုုပ္သင့္ပါတယ္။ minify လုုပ္တယ္ဆိုတာက

Use Modular Script Loader

Soe Thiha Naung

ကၽြန္ေတာ္ ပထမဦးဆုံး ေမးလိုတာက ဂိမ္းေလာကႀကီးထဲမွာ Game Developer ေတြအေနနဲ႔ အနိမ့္အျမင့္ အတက္အက်ေပါင္း

ဂိမ္းေလာကမွာ ကုမၸဏီအႀကီးေတြေရာ၊ အေသးေတြေရာ အတူတကြ ရွင္သန္ႏိုင္တဲ့ ရွားရွားပါးပါး ေစ်းကြက္တခုပါ။ Indie

ကိုျမင့္ေက်ာ္သူအေနနဲ႔ ဂိမ္းေလာကကို ျဖတ္သန္းလာတာ အခ်ိန္အေတာ္ၾကာၿပီ ထင္ပါတယ္။ အဲဒီလို ျဖတ္သန္းလာတဲ့

ကြၽန္ေတာ္ PC ေခတ္ကို ျဖတ္သန္းခဲ့ၿပီ။ ေနာက္ၿပီး console ေခတ္ေပါ့။ အခုေနာက္ဆုံးကေတာ့ ကြၽန္ေတာ္တို႕ mobile

အခုလို အခ်ိန္ေပး ေျဖၾကားေပးတဲ့ ကိုျမင့္ေက်ာ္သူကို {echo} မဂၢဇင္းမွ ေက်းဇူး အထူးတင္ရွိပါတယ္။

Nyan Lynn Htut

ဒီတစ္ပတ္ Echo ပရိသတ္ အတြက္ ကၽြန္ေတာ္ Tutorial တစ္ခုေရးဖို႔ စဥ္းစားမိပါတယ္။ ဘာအေၾကာင္းအရာကို

ဒီလိုအပ္တဲ့ Data Table ေတြကို ကၽြန္ေတာ္တို႔အေနနဲ႔ PHPMyAdmin ကေနသြားၿပီးေတာ့ ေဆာက္ေပးရင္လည္း ရေပမယ့္

php artisan migrate:make –table="user" create_user_table

class CreateUserTable extends Migration {

public function down()

php artisan migrate

php artisan migrate:make --table="note" create_note_table

ဒါကေတာ့ down() ထဲမွာပါ။

ၿပီးသြားရင္ ကၽြန္ေတာ္တို႕ migration ကို run လို႕ရပါၿပီ။

php atrisan migrate

class NoteController extends BaseController {

public function index()

index [For All Note Lists] [note]

create [For reate New Note] [note/create]

edit [For Edit the Note] [note/edit/:id]

delete [For Delete the Note] [note/delete/:id]

အေနာက္ဆံုးက [] ကြင္းထဲကဟာကေတာ့ uri ပါ။

public function create()

public function edit($id)