5
ပိုစ္႔ေတြအရမ္းက်ဲေနလို႔အားနာလာျပီဗ်ာ..။ ဘယ္လိုမွမအားလို႔ပါ.. အခုဒီ Tutorial ေလးက ဖိုရမ္တစ္ခုမွာက်ေနာ္တင္ထားခဲ႔ဖူးတာပါ.. အဲဒါကိုပဲျပန္ကူးျပီးတင္ေပးလိုက္ရပါတယ္။
က်ေနာ္ web development ဆိုင္ရာ သိမွတ္စရာမ်ားဆိုျပီးတစ္ခုေရးဖူးပါတယ္… အဲဒါရဲ႕ေနာက္ဆက္တြဲလို႔
သေဘာထားႏိုင္ပါတယ္။ အရင္ဆံုး PHP အေၾကာင္းေလး ဖတ္မိသေလာက္ သိသေလာက္ေျပာၾကည့္ပါမယ္။ PHP ဆိုတာ dynamic web pages ေတြအတြက္ရည္ရႊယ္ျပီးေပၚေပါက္လာခဲ႔တဲ႔ scripting language ျဖစ္ပါတယ္။PHP ကို web scripts ေတြေရးဖို႔ဖန္တီးခဲ႔တာသာျဖစ္ပါတယ္။ stand alone application ေတြေရးဖို႔မဟုတ္ပါဘူး (ဒါေပမယ္႔ အခုအခ်ိန္မွာေတာ႔ application ေတြကိုလည္း PHP နဲ႔ေရးလို႔ရေနပါျပီ။) PHP ကို မူလပထမဆံုး ဖန္တီးခဲ႔သူကေတာ႔ Rasmus Lerdorf ပဲျဖစ္ပါတယ္။ စစေပၚခ်င္း 1994 မွာ PHP ရဲ႕အရွည္က Personal Home Page လို႔ Rasmus Lerdorf ကေခၚတြင္ခဲ႔ပါတယ္.။ ေနာက္ပိုင္းမွာေတာ႔ အခုသိၾကတဲ႔အတိုင္း PHP: Hypertext Preprocessor ျဖစ္ပါတယ္။ PHP ဟာယေန႔အခါမွာေတာ႔ အသံုးအမ်ားဆံုး programming language တစ္ခုအျဖစ္ရပ္တည္ေနပါျပီ။ အခုအခါမွာ PHP ကို THE PHP GROUP ကေန maintain လုပ္ေပးေနပါတယ္။ ဒါ႔အျပင္ PHP ဟာ PHP License ရဲ႕ေအာက္မွာ ထြက္ေပၚတဲ႔ free software ျဖစ္ပါတယ္။ PHP ဟာ general-purpose scripting language တစ္ခုျဖစ္ေပမယ္႔ အထူးသျဖင့္ေတာ႔ web development အတြက္အဓိကတြင္တြင္က်ယ္က်ယ္အသံုးျပဳၾကပါတယ္။ သူ႔ကို HTML coding ေတြအထဲမွာ ထည့္သြင္းအသံုးျပဳႏိုင္ျပီး web server ေပၚမွာ run တာျဖစ္ပါတယ္။ web servers အမ်ားစုမွာ အသံုးျပဳႏိုင္ျပီးေတာ႔ Operating System ေတြနဲ႔ Platform ေတြအားလံုးနီးပါးမွာ အခေၾကးေငြေပးစရာမလိုပဲ ရယူ အသံုးျပဳႏိုင္ပါတယ္။ အခုအခ်ိန္မွာ PHP ကို websites ေပါင္း သန္း ၂၅ ေက်ာ္ နဲ႔ web server ၁ သန္းေက်ာ္ေပၚမွာ install လုပ္ကာအသံုးျပဳေနၾကျပီး ဒီအေရအတြက္ဟာ ေန႔စဥ္နဲ႔အမွ်တိုးလို႔လာေနပါတယ္။ သူ႔ရဲ႕ syntax ဟာ Perl နဲ႔ C တိုနဲ႔ဆင္တူပါတယ္။ operating system အေတာ္မ်ားမ်ားေပၚမွာ Apache (web server) နဲ႔ အတူတူ တြဲျပီး အသံုးျပဳၾကပါတယ္။ Windows ေပၚမွာလည္း Microsoft ရဲ႕ IIS နဲ႔လည္းယွဥ္တြဲအသံုးျပဳႏိုင္ပါတယ္။ ယခုအခါမွာ PHP 6 (latest unstable release) အျဖစ္ကိုေရာက္ရွိေနပါျပီ။ official current release ကေတာ႔ 5.3.0 (2009-06-30) ျဖစ္ပါတယ္။ PHP 4 ကေန PHP 5 ကိုေျပာင္းလာတဲ႔အခါမွာ object-oriented programming language ျဖစ္လာခဲ႔ပါတယ္။ PHP 6 ျဖစ္လာတဲ႔အခါမွာေတာ႔ Unicode ကို support လုပ္လာႏိုင္ခဲ႔ပါတယ္။ အခုအခါမွာေတာ႔ ကမာၻေပၚမွာရွိတဲ႔ ဘာသာစကားအားလံုးနီးပါး ရဲ႕ အကၡရာ ေတြကို ကိုင္တြယ္ႏိုင္ျပီလို႔ဆိုႏိုင္ပါတယ္။ PHP ဟာ သူ႔ရဲ႕ ယွဥ္ျပိဳင္ဘက္ language ေတြထက္ ပိုေကာင္းတယ္ ပိုျမန္တယ္ သင္ယူဖို႔ပိုမို လြယ္ကူတယ္
လို႔ အၾကမ္းအားျဖင့္ ေျပာႏိုင္ပါတယ္။ database အေတာ္မ်ားမ်ားနဲ႔ယွဥ္တြဲအသံုးျပဳႏိုင္ျခင္း ေပါ႔ပါးျခင္း အကန္႔ အသန္႔ မရွိဘူးလို႔ ေျပာႏိုင္ေလာက္ေအာင္္ ခ်ဲ႕ထြင္အသံုးခ်ႏိုင္ျခင္း open source ျဖစ္ေသာေၾကာင့္ ကုန္က်စရိတ္မရွိျခင္း စတဲ႔ေကာင္းက်ိဳး မ်ားစြာ ရွိေန ပါတယ္။ သူနဲ႔ယွဥ္ျပိဳင္ဘက္ေတြအေနနဲ႔ JSP, ROR နဲ႔ ASP.net လို႔ဆိုၾကပါတယ္။တစ္ခုစီတိုင္းမွာေတာ႔ အားသာခ်က္ အားနည္းခ်က္ကိုယ္စီရွိၾကတာမ်ိဳးျဖစ္ပါတယ္။ ဘယ္အရာကမွ ရာႏႈန္းျပည့္ေကာင္းးမြန္တယ္လို႔မဆိုႏိုင္ပါဘူး..။
PHP အလုပ္လုပ္ပံု
PHP သည္ server-side language ျဖစ္ပါတယ္။ ဆိုလိုတာက ကၽႊန္ေတာ္တို႔ေရးလိုက္တဲ႔ code ေတြဟာ server ေပၚမွာ run တာျဖစ္ပါတယ္။ server-side language ေတြက web page ေတြဆီကေန ပို႔ေပးလိုက္တဲ႔ အခ်က္အလက္ေတြကိုရယူပါတယ္။ host ရဲ႕ server ဆီကို ေရာက္လာမယ္။ ေရာက္လာတဲ႔ information ေပၚမွာမူတည္ျပီးေတာ႔ server ေပၚမွာ run ပါတယ္။ ျပီးမွ browser ဆီကို လိုအပ္တဲ႔အခ်က္အလက္ကိုျပန္ပို႔ေပးပါတယ္။ ဥပမာ ကၽႊန္ေတာ္တို႔က web page ေပၚမွာ click တစ္ခ်က္ႏွိပ္လိုက္ရင္ ကၽႊန္ေတာ္တို႔ အဲဒီ click ႏွိပ္လိုက္ျခင္းေၾကာင့္ ရလာတဲ႔ result ကိုမျမင္ရခင္မွာ server ဆီကို ကၽႊန္ေတာ္တို႔ရဲ႕ Input ေပးလိုက္တဲ႔ အခ်က္အလက္ေတြကို ပို႔တာ ရယ္ server ကေန ျပန္ပို႔တာေတြ လုပ္ေနတာျဖစ္ပါတယ္။ဒါက server-side ရဲ႕သေဘာပါ။
client-side language ကေတာ႔ ကၽႊန္ေတာ္တို႔ user ေတြအသံုးျပဳတဲ႔ client ေပၚမွာပဲ တိုက္ရိုက္ run တာပါ။ JavaScript ဆိုရင္ သူ႔ရဲ႕ client ကေတာ႔ web browser ေပါ႔။ ဒါေၾကာင့္ သူ႔အေနနဲ႔ web server ဆီကို information ပို႔တာ ျပန္ထုတ္တာေတြ လုပ္ဖုိ႔မလိုပါဘူး။ သေဘာတရားကေတာ႔ browser က code ကိုဖတ္တယ္ ျပီးရင္ interprets လုပ္တယ္။ ျပီးရင္ ျပန္ထုတ္ျပတယ္။ ျမန္ျမန္ဆန္ဆန္ ျပီးပါတယ္။ သူ႔ေနရာနဲ႔ သူေတာ႔ client-side ေရာ server-side ေရာ လိုအပ္ပါတယ္။ ဥပမာ form တစ္ခု ဆိုပါစို႔ဗ်ာ။ ကၽႊန္ေတာ္ တို႔ sign up လုပ္တဲ႔အခါျဖစ္ျဖစ္ေပါ႔ ကၽႊန္ေတာ္တို႔ text box ထဲမွာထည့္လိုက္တဲ႔ data ေတြကိုမွန္ မမွန္ ကို client side language တစ္ခုနဲ႔စစ္မယ္။valid ျဖစ္မျဖစ္ကိုေပါ႔။ ျပီးမွ submit ကိုျဖစ္ျဖစ္ႏွိပ္လိုက္မွ server ဆီကိုပို႔မွာေပါ႔။ server ဆီကိုမွန္ကန္တဲ႔ information ေတြပဲေရာက္ရွိေစတာေပါ႔ဗ်ာ။ web server ေပၚမွာ အခ်က္အလက္ေတြကို save လုပ္ျပီး သိမ္းထားဖို႔လိုအပ္တာမ်ိဳး ၾကေတာ႔ server side နဲ႔ပဲလုပ္လို႔ရတာေပါ႔။ PHP ကိုေလ႔လာေတာမယ္ဆိုရင္ Apache web server နဲ႔ My SQL Database တို႔ပါတြဲျပီးေလ႔လာဖို႔ပါေနတာျဖစ္ပါတယ္။
အခုကၽႊန္ေတာ္တို႔ PHP ကို local host အေနနဲ႔ ပဲ စတင္ေလ႔လာဖို႔အတြက္ လိုအပ္တဲ႔ software ကိုစက္ထဲထည့္ပါမယ္။
localhost မွာသံုးဖို႔အတြက္
လိုအပ္တဲ႔ software ေတြအားလံုးကို ေပါင္းစုျပီးထည့္ထားတဲ႔ package software ေတြရွိပါတယ္။ အဲဒီ software
ေတြကိုသံုးျပီး web server နဲ႔database ကိုကုိယ္႔စက္ထဲမွာပဲရရွိမွာျဖစ္ပါတယ္။
အဲဒီ software ေတြထဲမွာ windows အတြက္ထင္ရွားတာေတြကေတာ႔ WAMP နဲ႔ XAMPP တို႔ပဲျဖစ္ၾကပါတယ္။
သူ႔ထဲမွာ apache, mysql, php စတဲ႔ လိုအပ္တာေတြအားလံုးပါ၀င္တာျဖစ္ပါတယ္။
ကၽႊန္ေတာ္တို႔ အခု XAMPP ကိုပဲေရြးျပီးေတာ႔ ေလ႔လာၾကပါမယ္။
၁။
http://www.apachefriends.org/en/xampp.html
ကိုသြားျပီးေတာ႔ ကိုယ္႔ရဲ႕ windows version နဲ႔ ကိုက္ညီတဲ႔
xampp installer ကိုေဒါင္းလုပ္ဆြဲပါ။
အဆင့္ဆင့္သြင္းသြားလိုက္ရင္ ရသြားမွာပါ။ သာမန္ software သြင္းသလိုပါပဲခင္ဗ်ာ။ သြင္းျပီးသြားရင္ေတာ႔ C ေအာက္က xampp ေအာက္က htdocs ေအာက္မွာ php ဆိုတဲ႔ folder ေလးေဆာက္သင့္ပါတယ္။ အဲဒီ ေအာက္မွာပဲက်ေနာ္တို႔ ေရးသမွ်ကို save သင့္ပါတယ္။ ေနာက္ထပ္ ဒီစာအုပ္မွာပါတဲ႔ သင္ခန္းစာ မ်ားကိုေလ႔လာႏိုင္ဖို႔အတြက္ Web Browser (firefox, IE) တစ္ခုလိုပါမယ္။ text editor တစ္ခုလုိပါမယ္။ PHP editor တစ္ခုဆိုပိုေကာင္းပါတယ္။ ကၽႊန္ေတာ္ကေတာ႔ Dream weaver CS 4 ကို အသံုးျပဳပါတယ္။ ဒါေပမယ္႔လည္း Notepad ကိုပဲအသံုးျပဳမယ္ဆိုရင္လည္း အဆင္ေျပႏိုင္ပါေသးတယ္။
code ေလးေတြကို run မယ္ဆိုရင္ Dreamweaver ကိုဖြင့္ PHP ကိုေရြးျပီးေတာ႔ အလိုအေလွ်ာက္နဂိုရွိေနတဲ႔ code ေတြကိုျဖတ္ႏိုင္ပါတယ္။ Notepad ကိုပဲသံုးရင္လည္းရပါတယ္။ အဲဒီေနာက္ code ေတြကို copy paste လုပ္ပါ။ ျပီးရင္ save လုပ္ပါ.. save လုပ္ရမယ္႔ေနရာကေတာ႔ C ေအာက္က xampp ေအာက္က htdocs ေအာက္က php ရဲ႕ေအာက္မွာျဖစ္ပါတယ္။ အဆင္ေျပသလိုနာမည္ေပးႏိုင္ပါတယ္။ အကယ္၍ 1.php, 2.php အစရွိသျဖင့္ပဲေပးထားရင္ အဲဒါကို browser မွာၾကည့္မယ္ဆိုရင္ http://localhost/php/1.php, http://localhost/php/2.php အစရွိသျဖင့္ေခၚျပီး ၾကည့္လို႔ ရပါျပီ။ က်ေနာ္က အခုPHP နဲ႔ AJAX နဲ႔တြဲျပီးသံုးတဲ႔သင္ခန္းစာကိုေရးမလို႔ပါ။ 
PHP အတြက္ စာအုပ္တစ္အုပ္လည္းေရးေနပါတယ္ခင္ဗ်ာ..။ ဘယ္ေတာ႔ျပီးမလဲေတာ႔မသိေသးပါဘူး.. 
PHP and AJAX
AJAX INTRODUCTION
AJAX= Asynchronous JavaScript And XML
AJAX က web browser နဲ႔ web server ၾကားထဲကေန data ေတြကို ပို႔ဖို႔နဲ႔ လက္ခံဖို႔အတြက္ JavaScript ကိုအသံုျပဳပါတယ္။
AJAX နည္းပညာေၾကာင့္ user က အေျပာင္းအလဲတစ္ခု လုပ္လိုက္တဲ႔အခါမွာ web page တစ္ခုလံုးကို relode လုပ္လိုက္တာမ်ိဳးမဟုတ္ပဲနဲ႔ ေနာက္ကြယ္မွာ web server နဲ႔ data exchange လုပ္တဲ႔အတြက္ web page ေတြကိုပိုျပီးေတာ႔ responsive ျဖစ္ပါတယ္။ AJAX ကေအာက္ပါ standards ေတြေပၚမွာအေျခခံထားပါတယ္။
-JavaScript
-XML
-HTML
-CSS
PHP ကိုေလ႔လာတဲ႔အခါမွာ AJAX ကိုမသိလို႔မျဖစ္ပါဘူး… ။ JavaScript, XML, HTML,CSS ဒါေတြမသိရင္ PHP ေလ႔လာလည္း သိပ္ေတာ႔မထူးပါဘူး.. အဲဒါအကုန္သိရမွာျဖစ္ပါတယ္.. အားလံုးဆက္စပ္ျပီးအသံုးခ်ရမွာျဖစ္လို႔ပါ။
AJAX အေနနဲ႔ major browser ေတြအားလံုးက support လုပ္ၾကပါတယ္။ ဒါေၾကာင့္ AJAX application ေတြက browser နဲ႔ platform ေပၚမွာမွီခိုမႈမရွိဘဲ… Cross Platform, Cross Browser Technology လို႔ဆိုႏိုင္ပါတယ္။
AJAX Uses XML And HTTP Requests
ရိုးရိုးသာမန္နည္းနဲ႔ေရးထားတဲ႔ web application တစ္ခုမွာ html form တစ္ခုကိုသံုးျပီး input တစ္ခုကို web server ဆီကို submit လုပ္ပါမယ္။ web server က data ကို process လုပ္ျပီးတဲ႔အခါမွာ user ဆီကို web page အသစ္တစ္ခုကို return ျပန္လာပါမယ္။ user က input ေပးတဲ႔အခါတိုင္းမွာ web page အသစ္တစ္ခုကို server က ျပန္ေပးရတာျဖစ္တဲ႔အတြက္ ဒီရုိးရုိးနည္းနဲ႔ေရးတာက ေႏွးပါတယ္ ျပီးေတာ႔ user friendly မျဖစ္ပါဘူး။ AJAX နည္းပညာကိုသံုးရင္ web application ေတြက web page တစ္ခုကို relode လုပ္စရာမလိုပဲနဲ႔ data ေတြကို ပို႔ႏိုင္ ထုတ္ႏိုင္တာျဖစ္ပါတယ္။ ဒီကိစၥကို ေနာက္ကြယ္မွာ server ဆီကို HTTP request ေတြေပးပို႔ျခင္းနဲ႔အလုပ္လုပ္တာျဖစ္ပါတယ္။ server က data ျပန္လာတဲ႔အခါ JavaScript ကိုသံုးျပီး web page ရဲ႕အစိတ္အပိုင္းေလးကိုပဲ modify လုပ္တာျဖစ္ပါတယ္။ ေရွ႕လာမယ္႔ ဥပမာေတြကိုၾကည့္ရင္ နားလည္မွာပါ။
PHP and AJAX
AJAX မွာေတာ႔ server ရယ္လို႔မရွိပါဘူး.. ။ AJAX ဆိုတာ က်ေနာ္တို႔ရဲ႕ browser ေပၚမွာပဲ run တဲ႔ နည္းပညာတစ္ခုျဖစ္ပါတယ္။ browser နဲ႔ web server ရဲ႕ၾကားမွာ HTTP requests (asynchronous data transfer) ကိုသံုးပါတယ္။ ဆိုလိုတာက web page တစ္ခုလံုးကို server ဆီကိုပို႔တာမဟုတ္ပဲ အဲဒီ web page ထဲက အခ်က္အလက္ အနည္းငယ္အစိတ္အပိုင္းေလးကိုပဲ ပို႔တာျဖစ္ပါတယ္။ ေျပာရရင္ေတာ႔ AJAX က web server software ေတြေပၚမွာမမွီခုိတဲ႔ web browser technology တစ္ခုျဖစ္ပါတယ္။ ဒီ tutorial ထဲမွာေတာ႔ PHP server ေပၚမွာ run တဲ႔ဥပမာေတြကိုအသားေပးေဖာ္ျပေပးပါမယ္
AJAX XMLHttpReuest
XMLHttpRequest object ကေတာ႔ AJAX ရဲ႕အဓိကေသာ႔ခ်က္ျဖစ္ပါတယ္။ July 2000 Internet Explorer ထြက္ကတည္းက သံုးလို႔ရၽႊာျဖစ္ပါတယ္။ ဒါေပမယ္႔ 2005 မွာ AJAX နဲ႔ Web 2.0 အေၾကာင္းေျပာျဖစ္ၾကတဲ႔အခါမွ အျပည့္အ၀အသံုးခ်ၾကတာ ျဖစ္ပါတယ္။ မတူညီတဲ႔ browser ေတြအေနနဲ႔ XMLHttpRequest object ကိုဖန္တီးဖို႔အတြက္ ကြဲျပားတဲ႔နည္းလမ္းေတြကို သံုးၾကပါတယ္။ Internet Explorer က ActiveXObject ကိုအသံုးျပဳပါတယ္။ တျခား browser ေတြကေတာ႔ build in JavaScript object တစ္ခုျဖစ္တဲ႔ XMLHttpRequest ကိုအသံုးျပဳပါတယ္။ ေအာက္က code ေလးက ဒီျပသနာကိုေျပလည္ ေစတဲ႔အရိုးရွင္းဆံုး နည္းလမ္းပါ။
var XMLHttp=null
if (window.XMLHttpRequest)
{
XMLHttp=new XMLHttpRequest()
}
else if (window.ActiveXObject)
{
XMLHttp=new ActiveXObject(”Microsoft.XMLHTTP”)
}
အရင္ဆံုး XMLHttpRequest object ကိုအသံုးျပဳဖို႔အတြက္ XMLHttp variable တစ္ခုကို ဖန္တီးပါတယ္။ တန္ဖိုးကိုေတာ႔ null လို႔ သတ္မွတ္ေပးခဲ႔ပါတယ္။ ျပီးတဲ႔ေနာက္မွာ window.XMLHttpRequest ဆိုတဲ႔ object ေလး available ျဖစ္မျဖစ္ စစ္ပါတယ္။ Firefox, Opera, Safari ေနာက္ပိုင္း version ေတြမွာဆိုရင္ available ျဖစ္မွာျဖစ္ပါတယ္။ တကယ္လို႔ available ျဖစ္တယ္ဆိုရင္ XMLHttp=new XMLHttpRequest() ဆိုျပီးေတာ႔ object အသစ္တစ္ခုဖန္တီးပါတယ္။ available မျဖစ္ရင္ေတာ႔ window.ActiveXObject က available ျဖစ္မျဖစ္စစ္ပါတယ္။ Internet Explorer 5.5 နဲ႔ေနာက္ပိုင္းေတြ အားလံုးမွာ available ျဖစ္ပါတယ္။ available ျဖစ္တယ္ဆိုရင္ XMLHttp=new ActiveXObject() ဆိုျပီးေတာ႔ object အသစ္တစ္ခုကို ဖန္တီးပါတယ္။ ပရိုဂရမ္မာေတြအေနနဲ႔ ဒီထက္ပိုေကာင္းတဲ႔ ပိုျမန္တဲ႔ XMLHttpRequest object ကို ပိုႏွစ္သက္ ႏိုင္ပါတယ္။ ေအာက္က ဥပမာေလးကေတာ႔ Microsoft.XMLHTTP အစား Xsxml2.XMLHTTP ဆိုတဲ႔ Microsoft ရဲ႕ latest version ကို load လုပ္တာျဖစ္ပါတယ္။ အဲဒါကေတာ႔ IE 6 နဲ႔ေနာက္ပိုင္းမွာ မွ available ျဖစ္တာျဖစ္ပါတယ္။
{
var xmlHttp=null;
try
{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
// Internet Explorer
try
{
xmlHttp=new ActiveXObject(”Msxml2.XMLHTTP”);
}
catch (e)
{
xmlHttp=new ActiveXObject(”Microsoft.XMLHTTP”);
}
}
return xmlHttp;
}
ဒီဥပမာက ဘာကိုေျပာတာလဲဆိုရင္ အရင္ဆံုးXMLHttpRequest object ကိုသံုးဖို႔အတြက္ XMLHttp ဆိုတဲ႔ variable ေလးကို
ဖန္တီးပါတယ္။ အဲဒီေနာက္ web standarads (Mozila, Opera နဲ႔ Safari)အရ XMLHttp= new XMLHttpRequest() object ကိုဖန္တီးဖို႔ ၾကိဳးစားပါတယ္။ ေနာက္တခါ Microsoft နည္းလမ္းနဲ႔ IE 6 နဲ႔ေနာက္ပိုင္း အတြက္ XMLHttp=new ActiveXObject(“Msxml2.XMLHTTP object ကိုဖန္တီးဖို႔ၾကိဳးစားပါတယ္။ အဲဒီမွာ error ျဖစ္တယ္ဆိုမွ အေဟာင္းနည္းလမ္း (IE 5.5) XMLHttp=new ActiveXObject(“ Microsoft.XMLHTTP”) ကိုၾကိဳးစားပါတယ္။
AJAX Suggest
ေအာက္က AJAX ဥပမာမွာ user က web form တစ္ခုထဲကို data ရိုက္ထည့္ျပီးေတာ႔ web page တစ္ခုက web server နဲ႔ ဘယ္လို communticate လုပ္တယ္ဆိုတာကို သရုပ္ျပသြားမွာျဖစ္ပါတယ္။ ေအာက္ကလိုပံုစံမ်ိဳးေလး ေရးမွာပါ။ box ေလးထဲမွာ character ေလးတစ္ခုခုကိုရိုက္ထည့္တာနဲ႔ suggestion မွာေပၚလာမယ္။
ဒီ ဥပမာမွာ page သံုးခုပါ၀င္ပါမယ္။
- ရိုးရိုး HTML page
- JavaScript page
- PHP page
The HTML Form
အခုကေတာ႔ HTML page ျဖစ္ပါတယ္။ သူ႔မွာ form အတြက္ HTML code ရယ္ JavaScript ကိုေခၚတဲ႔ link ရယ္ပါ၀င္ပါတယ္။ ဒီ html file ကို ajaxtesting.html လို႔ေပးပါမယ္။
<html>
<head>
<script src=”clienthint.js”></script>
</head>
<body>
<form>
First Name:
<input type=”text” id=”txt1″
onkeyup=”showHint(this.value)”>
</form>
<p>Suggestions: <span id=”txtHint”></span></p>
</body>
</html>
ဒီဥပမာမွဆိုရင္ txt1 ဆိုတဲ႔ Input filed ေလးပါတဲ႔ ရိုးရိုး HTML form ေလးပါပါတယ္။ အလုပ္လုပ္ပံုကေတာ႔
1. user က input field ေလးထဲမွာ keyboard ေပၚက key တစ္ခုကို ႏွိပ္ျပီးေတာ႔ release လုပ္လိုက္တဲ႔အခါevent တစ္ခုကို အစပ်ိဳးေပးပါတယ္။
2. evernt ကိုအစပ်ိဳးျပီးတဲ႔အခ်ိန္မွာ showHint() ဆိုတဲ႔ function ေလးကိုေခၚျပီးေတာ႔ execute လုပ္ပါတယ္။
3. form ရဲ႕ေအာက္မွာ txtHint ဆိုတဲ႔ <span> ေလးရွိပါတယ္။ အဲဒါကေတာ႔ showHint() ကျပန္လာတဲ႔ return data ေလး ေပၚမဲ႔ေနရာေလးပဲျဖစ္ပါတယ္။
ေအာက္က JavaScript code ကိုေတာ႔ clienthint.js လို႔သိမ္းမွာျဖစ္ျပီး HTML document နဲ႔ လင့္လုပ္ထားတာျဖစ္ပါတယ္။
var xmlHttp;
function showHint(str)
{
if (str.length==0)
{
document.getElementById(”txtHint”).innerHTML=”";
return;
}
xmlHttp=GetXmlHttpObject();
if (xmlHttp==null)
{
alert (”Browser does not support HTTP Request”);
return;
}
var url=”gethint.php”;
url=url+”?q=”+str;
url=url+”&sid=”+Math.random();
xmlHttp.onreadystatechange=stateChanged;
xmlHttp.open(”GET”,url,true);
xmlHttp.send(null);
}
function stateChanged()
{
if (xmlHttp.readyState==4 || xmlHttp.readyState==”complete”)
{
document.getElementById(”txtHint”).innerHTML=xmlHttp.responseText;
}
}
function GetXmlHttpObject()
{
var xmlHttp=null;
try
{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
// Internet Explorer
try
{
xmlHttp=new ActiveXObject(”Msxml2.XMLHTTP”);
}
catch (e)
{
xmlHttp=new ActiveXObject(”Microsoft.XMLHTTP”);
}
}
return xmlHttp;
}// JavaScript Document
ဒီဥပမာေလးကိုရွင္းရရင္ေတာ႔ showHint()function က inpurt field ထဲမွာ က်ေနာ္တို႔ character တစ္လံုးရိုက္လိုက္တဲ႔ အခါတိုင္းအလုပ္လုပ္ပါတယ္။ အကယ္၍ input filed ထဲမွာ input ရွိျပီးသား ဆိုလိုတာက str.length>0 ျဖစ္သြားတယ္ဆိုရင္ ေအာက္ပါအတိုင္း execute လုပ္ပါတယ္။
1. server ကိုေပးပို႔မယ္ url filename ကို သတ္မွတ္ပါတယ္။ ဒီမွာေတာ႔ gethint.php ပါ။
2. input filed ထဲမွာေရာက္ေနမယ္႔ content (character) နဲ႔ ယွဥ္တြဲျပီးေတာ႔ parameter (q) ေလးကိုေပါင္းထည့္ပါတယ္။
3. server က cached file ကိုသံုးမိတာကေန ကာကြယ္ဖို႔ random number တစ္ခုကို ထပ္ေပါင္းထည့္ပါတယ္။
4. GetXmlHttpObject function ကိုေခၚျပီးေတာ႔ XMLHTTP object ကိုဖန္တီးယူပါတယ္။ ျပီးေတာ႔ ေျပာင္းလဲမႈတစ္ခု ျဖစ္တဲ႔အခါ အဲဒီ object အေနနဲ႔ StateChanged ဆိုတဲ႔ function ေလးကို execute လုပ္ေစပါတယ္။
5. ေပးလိုက္တဲ႔ url အတိုင္း XMLHTTP object ကို ဖြင့္လိုက္ပါတယ္
6. server ဆီကို HTTP request ကိုလွမ္းပို႔လိုက္ပါတယ္။
input filed က ဗလာျဖစ္ေနတယ္ဆိုရင္ function က txtHint ရဲ႕ placeholder (suggestion ေပၚတဲ႔ေနရာ) မွာရွိေနတဲ႔ content (စာေတြ) အားလံုးကို ရွင္းလင္းပစ္လိုက္ပါတယ္။
The stateChanged() Function
XMLHTTP object ရဲ႕ state ေျပာင္းလဲတဲ႔အခါတိုင္းမွာ ဒီ function ကို execute(တြက္ခ်က္) လုပ္ပါတယ္။
state က 4 ဒါမွမဟုတ္ complete အျဖစ္ေျပာင္းတဲ႔အခါ txtHint ရဲ႕ content ကို သူ response လုပ္တဲ႔ text နဲ႔ျဖည့္ပါတယ္။
The GetXmlHttpObject() Function
AJAX applications အေနနဲ႔ XML support လုပ္တဲ႔ browser နဲ႔ပဲ run မွာျဖစ္တဲပအတြက္ GetXMLHttpObjet() ကိုေခၚျပီးေတာ ဒီျပသကိုနည္းလမ္းတစ္ခု မဟုတ္တစ္ခုနဲ႔ေျဖရွင္းႏိုင္ေစဖို႔ XMLHTTP object အမ်ိဳးမ်ိဳးကိုဖန္တီးပါတယ္။
အခု က်န္တဲ႔ PHP page အတြက္ျဖစ္ပါတယ္။ JavaScript code ကေခၚတဲ႔လိုအပ္တဲ႔ server page ကေတာ႔ gethint.php လို႔ေခၚတဲ႔ Php file ေလးပါ။ ဒီ gethint.php ဖိုင္ေလးထဲက code မွာေတာ႔ နာမည္ေတြရဲ႕ array တစ္ခုကို စစ္ျပီးေတာ႔ client ဆီကို သက္ဆိုင္ရာ အမည္ကို return ျပန္ေပးပါမယ္။
<?php
// Fill up array with names
$a[]=”Anna”;
$a[]=”Brittany”;
$a[]=”Cinderella”;
$a[]=”Diana”;
$a[]=”Eva”;
$a[]=”Fiona”;
$a[]=”Gunda”;
$a[]=”Hege”;
$a[]=”Inga”;
$a[]=”Johanna”;
$a[]=”Kitty”;
$a[]=”Linda”;
$a[]=”Nina”;
$a[]=”Ophelia”;
$a[]=”Petunia”;
$a[]=”Amanda”;
$a[]=”Raquel”;
$a[]=”Cindy”;
$a[]=”Doris”;
$a[]=”Eve”;
$a[]=”Evita”;
$a[]=”Sunniva”;
$a[]=”Tove”;
$a[]=”Unni”;
$a[]=”Violet”;
$a[]=”Liza”;
$a[]=”Elizabeth”;
$a[]=”Ellen”;
$a[]=”Wenche”;
$a[]=”Vicky”;
//get the q parameter from URL
$q=$_GET["q"];
//lookup all hints from array if length of q>0
if (strlen($q) > 0)
{
$hint=”";
for($i=0; $i<count($a); $i++)
{
if (strtolower($q)==strtolower(substr($a[$i],0,strlen($q))))
{
if ($hint==”")
{
$hint=$a[$i];
}
else
{
$hint=$hint.” , “.$a[$i];
}
}
}
}
//Set output to “no suggestion” if no hint were found
//or to the correct values
if ($hint == “”)
{
$response=”no suggestion”;
}
else
{
$response=$hint;
}
//output the response
echo $response;
?>
JavaScript ဖိုင္ကေန (strlen($q)>0) ျဖစ္တဲ႔အခါတိုင္း text တစ္ခုခုကို လွမ္းပို႔တဲ႔အခါ ေအာက္ပါအတိုင္းျဖစ္ေပၚပါတယ္။
1. JavaScript ကေနလွမ္းပို႔တဲ႔ character နဲ႔ match ျဖစ္တဲ႔ အမည္ကိုရွာတယ္။
2. နာမည္တစ္ခုထက္ပိုျပီးအတြဲမိတယ္ဆိုရင္ response string မွာအမည္ေတြအားလံုးပါလာမယ္။
3. ဘာမွ match ျဖစ္တာမေတြ႔ရင္ေတာ႔ no suggestion ဆိုျပီး response ျဖစ္မယ္။
4. တစ္ခုထက္ပိုျပီးေတြ႔ရင္ ဒီနာမည္ေတြကို response ေပးမယ္
5. ဒီ response ေတြအားလံုးကို txtHint placeholder ကိုပို႔ေပးမယ္။
အခုအခ်ိန္မွာ clienthint.js , gethint.php ajaxtesting.html ဖိုင္သံုးခု ကတူညီတဲ႔ folder directory ေအာက္မွာ save ခဲ႔တာျဖစ္ရပါမယ္.. အဲဒါဆိုရင္ေတာ႔ ajaxtesting.html ကို browser မွာ run တဲ႔အခါ PHP နဲ႔ AJAX နဲ႔တြဲသံုးထားတဲ႔ ေပ်ာ္စရာ web application ပိစိေလးတစ္ခုကိုရပါျပီခင္ဗ်ာ။
က်ေနာ္ေရးတာနားလည္ဖို႔မ်ားခက္ေနလားေတာ႔မသိဘူးဗ်ာ။ language တစ္ခုမွမေလ႔လာဖူးတဲ႔ အစိမ္း
သက္သက္ beginnger ဆိုရင္ေတာ႔ နားလည္ဖို႔သိပ္မလြယ္ေလာက္ဘူး.. ဥပမာ object ေဆာက္တာ မ်ိဳးေတြကို ေပါ႔။ HTML မေလ႔လာဖူးရင္လည္း နားမလည္ေလာက္ဘူး.. ထင္တာေျပာတာပါ။ ျပီးေတာ႔ coding ေတြရဲ႕ တစ္ေၾကာင္းျခင္း တစ္ခုျခင္းအဓိပၸါယ္အေသးစိတ္ကိုလည္း နားမလည္ေလာက္ဘူး..။ ဒါေပမယ္႔ run သာ run လိုက္ပါ… run လို႔ေအာင္ျမင္ရင္ေပ်ာ္တယ္ေလ။ မဟုတ္ဘူးလား.. ။ 
coding အေသးစိတ္ နားလည္ဖို႔ကေတာ႔ အေသအခ်ာ စနစ္တက် အေျခခံကေနေလ႔လာမွရမွာ။ ဒါေပမယ္႔ programmer ေတြေတာင္ coding အကုန္ေရးၾကတာမဟုတ္ပါဘူး…။ ေရးစရာလည္းမလိုဘူးေလ ဒီလိုပဲ ကူးၾကတာပါ… အေသးစိတ္ေတာ႔ တစ္ေၾကာင္းျခင္း trace လိုက္စရာမလိုဘူး.. မ်က္လံုးနဲ႔ေ၀႔ၾကည့္လိုက္တာနဲ႔ ဘာကိုေရးထားတယ္ဆိုတာ သိေနတာ။ က်ေနာ္ေတာ႔အဲေလာက္မကၽႊမ္းပါ.. ၊ဗဟုသုတအေနနဲ႔ ေျပာျပတာပါ။
P.S ယခု သင္ခန္းစာတြင္ အသံုးျပဳခဲ႔ေသာ code မ်ားကို w3schools.com မွယူသံုးထားျခင္းျဖစ္ျပီး… ထို website တြင္ English လိုေလ႔လာပါက က်ေနာ္ေရးထားတာထက္ပို၍ေကာင္းမည္ဟုထင္မိပါေၾကာင္း ႏွင့္ English လိုေလ႔လာျခင္းကိုပို၍ အားေပးလိုပါေၾကာင္း 