JQuery වලින් Form එකකට Auto Suggest සහ Validation දාගමු

මම මීට කලින් ලියපු සටහන් වල JQuery, JQuery වලින් ලේසියෙන්ම AJAX ගොඩදාන හැටි සහ JQueryUI ගැන කිව්ව ඔයගොල්ලන්ට මතක ඇති. අද සටහනෙන් කියන්න යන්නෙ ඒ දේවල් වල ප්‍රායෝගික යෙදීමක් ගැන. අපිට ගොඩක් web site වල forms තියනව දැකගන්න පුළුවන්නෙ, අද කියල දෙන්න යන්නෙ JQuery සහ AJAX පාවිච්චි කරල අපේ web site එකේ තියන form එකකට auto suggest දාගන්න හැටි සහ validation කරන හැටි. මේකෙදි ලබාගන්න දත්ත ටික PHP වලින් MySQL Database එකකට save කරගන්න හැටිත් කියල දෙන්න මම බලාපොරොත්තු වෙනව. ගොඩක් දේවල් විස්තර කරන්න තියන නිසා සටහන නම් ටිකක් දිග එකක් වෙයි.

සටහනේ එන code කෑලි අවබෝද කරගන්න JavaScript,PHP සහ MySQL පිළිබඳ මූලික දැනුමක් තිබ්බොත් හොඳයි. ඒ දේවල් ගැන ලේසියෙන් ඉගෙන ගන්න w3schools site එකෙන් ඔයගොල්ලන්ට පුළුවන්. මොකද මමත් ඒකෙන් තමයි ගොඩාක් දේවල් ඉගෙන ගත්තෙ.

මුලින්ම මේ පහල තියන තැනින් කියල දෙන්න යන code එක බාගන්නකො. ඊට පස්සෙ මම කියල තියන විස්තරේ බැලුවොත් ලේසියෙන්ම කරල තියන විදිහ තේරුම්ගන්න පුළුවන් වෙයි.
Password : sara

Live Demo එකට ගිහින් පුරවන්න උත්සහයක් දීල බලන්නකො. වැරදියට පුරවන්න දෙන්නෙ නෑ නේද?
එහෙම පිරෙව්වත් submit කරන්න බෑ නේද? ඔයාගෙ මැසිමෙ මේක run කරල මේක බලන්න ඕනනම්,
PHP සහ MySQL තියන XAMP වගේ server එකක දාල තමයි බලන්න වෙන්නෙ.

දැන් බලමු මේක හරි විදිහට ඔයාගෙ මැසිමෙ run කරන හැටි

සංක්ෂිප්ත ගොනුව බාගන දිග ඇරල බැලුවොත් ඔයාලට පෙනෙයි css,js,scripts සහ images කියල folders ටිකකුයි index.php කියල ගොනුවකුයි. ඔයාගෙ browser එකේ index.php ගොනුව විවෘත්ත කරල බැලුවොත් පහළ තියනව වගේ form එකක් එනව දැකගන්න පුළුවන් වෙයි.

මුලින්ම මම දීල තියන උදාහරණෙ ඇතුලත් වෙන jquery_form කියන folder එක ඔයාගෙ localhost ක්‍රියාත්මක වෙන folder එකට copy කරගන්නකො. උදාහරණයක් විදිහට ඔයා පාවිච්චි කරන්නෙ WAMP නම් www folder එකට, XAMP නම් htdocs folder එකට. දැන් scripts කියන folder එකේ තියන dbc.php එක ඔයාගෙ Text Editor එකේ open කරගන්න. පොඩි වෙනස්කම් ටිකක් කරන්න ඕන ඔයාට ගැලපෙන විදිහට.

ඔයා server එක අලුතෙන්ම install කලානම් කිසි වෙනසක් හරන්න ඕන නෑ. එහෙම නැත්නම් දැනට නැති නමක් $dbname එකට දෙන්න. MySQL වලට password එකක් දීල තියනවනම් ඒක $password එකට දෙන්න. එච්චටයි කරන්න තියෙන්නෙ.

ඊට පස්සෙ තියන පියවරවල් කරන්න ඕන server එක online තියෙද්දි. මම කරන්න ඕන
වැඩෙයි ඒකෙන් එන ප්‍රතිඵලයයි දෙකම මෙතනදි කියන්නම්.

1. මුලින්ම sql.php file එක server එකේ run කරන්න,
ඒකට කරන්න තියෙන්නෙ browser එකේ address bar එකේ ඒකට යන පාර දෙන එක විතරයි.
උදාහරණයක් විදිහට http://localhost/jquery_form/scripts/sql.php ගන්න පුළුවන්.

මේකෙදි වෙන්නෙ අලුත් database එකක් හැදෙන එක. ඒක වෙන්නෙ කලින් ඔයා dbc.php එකට
කරපු වෙනස්කම් වලට අදාලව. වෙනසක් කරේ නැත්නම් userdata කියල database එකක details_user
කියල table එකක් අදාල columns එක්කම හැදෙනව. මතක තියාගන්න මේක එක පාරක් කළාම ඇති.
මේ file එක අපේ වැඩේට අදාල නෑ, ඒක මම ලිව්වෙ ලේසියෙන්ම database එක හදාගන්න.

2. ඊටපස්සෙ කරන්න තියෙන්නෙ index.html එක server එකේ run කරන එක.
දැන් form එක හරි විදිහට පුරවල submit කරල බලන්නකො. එතකොට අපේ දත්ත ටික database එකේ
save වෙලා තියෙයි.

එක පාරක් submit කරල ඊලඟ පාර සම්පූර්ණ නමයි උපන්දිනෙයි පුරවල අර කලින් දීපු Login Name
එකම දීල බලන්නකො. මොකද උනේ ? ඒ නම දැනට තියන හින්ද වෙන නම් ටිකක් suggest වෙලා
එනව නේද ?

දැන් බලමුකො code වලට ගිහිල්ල කොහොමද මේ වැඩේ කරල තියෙන්නෙ කියල. මුලින්ම බලමු index.php වල code එක.

වැඩිය හැඩ වැඩ කරල නැතිව HTML Table පාවිච්චි කරල තමයි මම form එක හදල තියෙන්නෙ. ඕන විදිහට හැඩ කරගන්න එක ඔයාට බාරයි. මේකට මම JQuery සහ JQueryUI වගේ ඕන කරන JavaScripts සහ CSS link කරගන තියනව. 11 වෙනි පේළියෙදි මම JQuery link කරල තියෙන්නෙ. උපන් දිනේ දෙන්න හැදුවනම් ඔයාට පේන්න ඇති ලස්සන දින දර්ශකයක් එනව අපිට දිනේ තෝරන්න. ඒකෙදි මම පාවිච්චි කරල තියෙන්නෙ JQueryUI වල datepicker කියන ගැජට් එක. ඒකට තමයි ඊලඟ පේලියෙ JQueryUI link කරල තියෙන්නෙ. 18 වෙනි පේළියෙ ඉඳන් 28 වෙනි පේළිය වෙනකන් තියන JavaScript කෑල්ල datepicker එකට ඕන කරන ටිකක්.

එතකොට මොකක්ද 17 වෙනි පේලියෙ තියන අනිත් JavaScript එක? ඒකෙ තමයි මම validation සහ suggestion කරල තියෙන්නෙ, ඉස්සරහට ඒක විස්තර කරන්නම්කො. 32 වෙනි පේළියෙ ඉඳන් 86 වෙනි පේළිය වෙනකන් තියන PHP කෑල්ල දැනට අමතක කරන්න, ඒක form එක submit කළාට පස්සෙ වෙන දෙයක් ගැන. එතනින් එහාට තියෙන්නෙ සාමාන්‍ය විදිහට HTML table එකක form එක හදල තියන එක. මෙතනදි හැම input එකකටම යටින් span එකක් දාල තියෙන්නෙ JavaScript වලින් validate කරල එන ප්‍රතිඵලය පෙන්වන්න. කරන හැටි ඉස්සරහට කියන්නම්කො.

කොහොමද Validation සහ Suddestions කරන්නෙ ?

ඇත්තටම අපේ මාතෘකාවට අදාල වෙන්නෙ validation.js කියන file එක. මොකද මේකෙ තමයි validation සහ suggestion වලට අදාල code තියෙන්නෙ. මේකෙදි මම හැම input එකක්ම validate කරන්න වෙනම function එකක් ලියල තියනව. ඒවගේම suggest කරන වැඩ වලට වෙනම function ලියල තියනව. ඒ ඒ input වල blur සහ keyup event එකේදි මම අර කලින් කියපු functions යොදාගන validate කරල තියනව. ඒ වගේම form එකේ submit event එකේදි මම හැම input එකක්ම බලල තියනව.

දැන් බලමු validation.js වල code එක, මම කෑලි කෑලි අරගන විස්තර කරන්නම්.

මෙතනදි තමයි මම එක එක events වලදි functions වලට call කරල තියෙන්නෙ. මම key up event එකේදි වෙන ටික comment කරල තියෙන්නෙ, කැමතිනම් ඔයාට පුළුවන් ඒක uncomment කරන්න. ඊට පස්සෙ බලමු මේ විදිහට call වෙන function එකක් දිහා.

අපි validation වලට Regular Expressions පාවිච්චි කරනවනම් ගොඩාක් ලේසියෙන් අපේ වැඩේ කරගන්න පුළුවන්. මෙතනදිත් මම Regular Expressions පාවිච්චි කරල තියනව. අපි දෙන input එකත් එක්ක ඒක ගැලපෙනවනම් ප්‍රශ්ණයක් නෑ, හැබැයි ගැලපෙන්නෙ නැත්නම් මම කරල තියෙන්නෙ input textbox එකට අලුතෙන් CSS Class එකක් එකතු කරන එක සහ අර මම කලින් කියපු input textbox එක යටින් තිබුන span එකට text එකක් ලියන එක. එතකොට ඒ ඒ CSS Classes අනුව input textbox එක වෙනස් වෙනව. මෙතනදිනම් මම කරල තියෙන්නෙ පාට වෙනස් කරන එක. දැන් බලමු කොහොමද suggestion එකක් කරන්නෙ කියල.

මේ function එක call වෙන්නෙ මීට උඩින් තියන function එකේදි අපි දෙන Login Name එක දැනට database එකේ තිබුනොත් කියල ඔයාලට තේරෙනව ඇතිනෙ. මෙතනදි මම කරල තියෙන්නෙ AJAX වලින් සම්පූර්ණ නමයි උපන්දිනයයි වෙනම PHP file එකකට (isValiedName.php) යවන එක. ඊට පස්සෙ ඒකෙන් අපි එවපු දත්ත ටික එහාට මෙහාට කරල දැනට database එකේ නැති නම් ටිකක් ආපහු එවනව. ඊට පස්සෙ කරල තියෙන්නෙ ඒ එන නම් ටික පෙන්නන එක. හරි ලේසියි.

වැඩි විස්තර

අපි බලමු form එක submit කලාට පස්සෙ මොකද වෙන්නෙ කියල. මම form එකේ action එකට index.php මයිනෙ දීල තියෙන්නෙ. ඒ හින්ද අපි post method එකෙන් යවන data ටික ගන්න ඕනත් index.php එකේ ඉඳන්මයි. ඒකට තමයි index.php එකේ 32 වැනි පේළියෙන් පටන් ගන්න PHP කෑල්ල තියෙන්නෙ. validation.php එක ඕන වෙන්නෙ අපි යවන data PHP වලිනුත් validate කරන්න ඕන හින්ද, මොකද නැත්නම් JavaScript dissable කරල තිබ්බොත් data validate වෙන්නෙ නැති හින්ද. අන්තිමට data validate උනොත් database එකේ ලියන එක තමයි කරල තියෙන්නෙ. එච්චටයි !

හපොයි, හිතුවට වඩා පට්ටම දිග උනා. මේ සටහන web development කරන අයට වැදගත් වෙයි කියල හිතනව. අවුලක් තියනවනම් ප්‍රතිචාරයක් විදිහට දාන්නත් අමතක කරන්න එපා. ඔබට ජය !

JQuery UI, ලොකු ලොකු දේවල් ලේසියෙන් කරගන්න

JQuery ගැන මම මීට කලින් ලිපි දෙකකදි කතා කළානෙ. මතක නෑ වගේනම් පහළ තියන links වලට කොටල එව්ව බලලම ඉන්නකො.

1. JQuery, පොඩ්ඩක් ලියල වැඩ ගොඩක් දාන්න
2. JQuery වලින් ලේසියෙන්ම AJAX ගොඩදාන්න

අද කියන්නෙ JQuery UI ගැන. ඒක JQuery පාවිච්චි කරල හදපු තවත් Free JavaScript Library එකක්. මේක පාවිච්චි කරල අපිට ලේසියෙන්ම interactive web applications හදන්න පුලුවන්. මේ උදාහරණ ටික බලන්නකො වැඩ කිඩ ටිකක් බලාගන්න.

1. Draggable
2. Droppable
3. Sortable
4. Datepicker
5. Progressbar
6. Date Range Picker

කොහොමද, හොඳයි නේද? තවත් වැදගත් දෙයක් තමයි මෙව්ව IE 6.0+, FF 2+, Safari 3.1+, Opera 9.0+ සහ Chrome 1.0 ඇතුලු ගොඩක් browsers වල අවුලක් නැතුව වැඩ කරන එක. අපිට වැඩකරන හැටි ඉගෙන ගන්න විස්තර සහිත documentation එකකුත් තියනව. මේ ඔක්කොම දේවල් මෙතෙන්ට (JQuery UI Home) ගියොත් බලාගන්න පුලුවන්. මෙතනින් බලාගන්න උදාහරණ ටික.

Code එක බාගන අපිට ඕන විදිහට වෙනස් කරන්න තමයි තියෙන්නෙ. මේ සටහනනම් ගොඩක් වැදගත් වෙන්නෙ web designing කරන අයට තමයි. තවත් මේ වගේ දේවල් ගැන ඉස්සරහට කියල දෙන්නම්කො. ඔන්න එහෙනම් මම ගියා. ඔබට ජය !

JQuery වලින් ලේසියෙන්ම AJAX ගොඩදාන්න

ඔන්න 2009 යෙ අන්තිම සටහනින් කියල දෙන්න යන්නෙ JQuery පාඩමක්. කට්ටියට මතකද දන්නෑ මම කලින් JQuery වලට හීනියට වගේ හැඳින්වීමක් දුන්න. කොහෙ මතක හිටින්නද ඔව්ව නේද? මෙතනට කොටල ඒක පොඩ්ඩක් බලල හිටියනං.

අද මොකක්ද කරන්න යන්නෙ ?

අද මම කියල දෙන්න යන්නෙ ඔය Web Site හදද්දි ගොඩක් වෙලාවට කරන්න ඕන වෙන දෙයක් JQuery සහ AJAX පාවිච්චි කරල ලේසියෙන්, ලස්සනට කරගන්න හැටි. මෙහෙමයි සිද්දිය, පහල තියන රූපෙ බලල ඉන්නකො.

දැනට හිතන්නකො ඔය තියෙන්නෙ අපේ Web Site එකේ සැළැස්ම කියල. හිතන්න ඔය "C" කියන කොටසෙ තියන links වලට කොටපුවාම "B" කොටසෙ තියන "main" කියන div එකේ වෙනස් වෙනස් දේවල් පෙන්වගන්න ඕන වෙනව කියල. තේරුණාද මන්ද? සිංහලෙන්ම කියනවනම් links click කළාම main div එකට load කරන content එක වෙනස් කරන්න ඕන කියල. දැන් තේරෙන්න ඇතිනෙ.

ඔය වැඩේ කරගන්න අපි වෙනම pages හදල links වලට කොටද්දි එව්ව load කරන්න ගියොත් අපරාදයක් වෙනව. මොකද එතකොට "A" සහ "C" කියන කොටස් වල තියන දේවලුත් නිකන් බොරුවට ආයෙමත් load කරන්න වෙනව. ඔන්න ඕක හින්ද තමයි අපි AJAX පාවිච්චි කරන්නෙ. එතකොට page refresh එකක් නැතිවම අපිට පුලුවන් ඕන කරන වැඩේ කරගන්න.

කොහොමද කරන්නෙ ?

මෙහෙමයි, මුලින්ම මම විස්තර කරන්න යන උදාහරණෙ බාගන්නකො.

http://www.4shared.com/file/184577187/cc718b73/JQuery_AJAX.html
Password : sara

Live Demo : මෙතන

ඕක මම හදපු පොඩි උදාහරණයක්. බාගත්තු එකේ තියන code කෑලි තමයි මම විස්තර කරන්න යන්නෙ. කෝකටත් කලින් index.html file එක browser එකේ open කරල බලන්නකො. පහළ තියන රූපෙ වගේ එකක්නෙ එන්නෙ.

ඔයාලට පේනව නේද "Home", "About" සහ "Contact Us" කියල links තුනක්. එව්වට කොටල බන්නකො වෙනස් වෙන හැටි. අන්තිම එකේ තියන අවුල දැනට ගනන් ගන්න එපා. මම ඔය උදාහරණෙ හැදුවෙ අර උඩින් ව්ස්තර කරපු සිද්දියට අදාලව. දැන් අපි බලමු code එක. index.html file එක ඔයාලඟ තියන text editor එකෙන් open කරගන්නකො. මුලින්ම බලන්න ඒකෙ තියනව නේද කියල මේ පහළ තියනව වගේ code කෑල්ලක්.

<script src="jquery-1.3.1.min.js" type="text/javascript" ></script>

අන්න ඒකෙන් තමයි මම JQuery link කරල තියෙන්නෙ. සාමාන්‍ය JavaScript එකක් link කරන විදිහටම තමයි. ඊළඟට බලන්න මේ පහළ තියන JavaScript කෑල්ල තියනව නේද කියල.

අපි ලියන හැම event එකක්ම ලියන්න ඕන $(document).ready කියන function එක ඇතුලෙ. ඒකයි එහෙම එකක් තියෙන්නෙ හොඳද. ඔතන මම කරල තියෙන්නෙ අපේ තියන links වලට id දීල එව්වල click event වලට function ලියල තියන එක. මම ඔතනදි එකම වැඩේ කරගන්න ක්‍රම තුනක් තමයි පෙන්නල තියෙන්නෙ.

මුලින්ම බලන්න 5 වෙනි පේළිය, ඒකෙන් තමයි මම "Home" කියන link එක click කරද්දි ( id එක "link1" ) home.html file එක main div එකට load කරන්නෙ. ඔය තමයි සරළම විදිහට JQuery වලින් AJAX request එකක් කරන. ඊලඟට බලන්නකො 9 වෙනි පේළිය, ඒකෙන් "About" කියන link එක click කරද්දි ( id එක "link2" ) about.html file එක main div එකට load කරනව.

හැබැයි මේක කලින් එකට වඩා වෙනස්, අපිට පුලුවන් එක එක effects දාල ලස්සන කරගන්න. beforeSend සහ success කියන functions ඇතුලෙ තමයි එව්ව ලියන්න ඕන. දාන්න පුලුවන් effects ගැන මෙතනින් බලන්නකො. දැන් 3 වෙනි පේළිය බලන්න, ඒක මම comment කරලනෙ තියෙන්නෙ. ඒකෙ comment නැතිකලොත් page එක load වෙද්දිම main div එකට home.html file එක load වෙනව. කට්ටියට තේරෙනවද මන්ද කියන එව්ව.

අන්තිමටම 23 වෙනි පේළිය, ඒකෙ කරල තියෙන්නෙ වෙනස්ම දෙයක්. ඒකෙදි මම data අරගන තියෙන්නෙ boo.php කියන php file එකෙන්. වැඩිය අමාරු නෑ, පොඩ්ඩක් බලපුවාම වැඩේ තේරෙයි. ඕක හරි විදිහට වැඩ කරන්නනම් XAMPP වගේ PHP තියන server එකක run කරල බලන්න ඕන.

ඔන්න එහෙනම් දැන් JQuery වලින් AJAX ගොඩදාන එක ගේමක් නෙවෙයිනෙ. කරලම බලන එක තමයි වඩාත් හොඳ. අවුල් තියනවනම් අහන්නකො. කියවල බලල ප්‍රතිචාරයක් දෙන්නත් අමතක කරන්න එපා. ඉවර කරන්න කලින් ප්‍රාර්ථනා කරනව 2010 අවුරුද්ද අපි හැමෝටම සුභම සුභ එකක් වේවා කියල. ඔබට ජය !

JQuery, පොඩ්ඩක් ලියල වැඩ ගොඩක් දාන්න

නත්තලුත් ඉවරයි, දැන් ඉතින් ආයෙත් වැඩ. අද මම කියන්න යන්නෙ Web Site හදන අයට ගොඩක් වැදගත් වෙන දෙයක් ගැන. හැමෝම දන්නව ඇතිනෙ JavaScript ගැන. අපිට ගොඩක් වෙලාවට JavaScript වලින් එක ඒක ජාතියෙ වැඩ කරගන්න පුලුවන්නෙ. JQuery කියන්නෙත් අන්න ඒ වගේ JavaScript Library එකක්. මෙතනදි තියන විශේෂත්වය තමයි JQuery පාවිච්චි කරල අපිට පුලුවන් පොඩි code කෑල්ලක් ලියල ලොකු වැඩක් කරගන්න.

ඊලඟට තියන වැදගත්ම දේ තමයි මේක free and open source වීම. ඇත්තටම අද වෙනකොට JQuery ලෝකෙ තියන ජනප්‍රියම JavaScript Library එක වෙලාතියනව, ඒකට මෙන්න මේ දේවල් උදව් වෙලා තියනව.

1. Lightweight - Link කරන්න ඕන file එක 19KB තරම් කුඩා එකක් වීම.
2. Cross-browser - දැනට තියන ඕනැම browser එකක අවුලක් නැතිව වැඩ කිරීම.
3. CSS3- Compliant - CSS අනුකූලතාවය.

JQuery පාවිච්චි කරල අපිට Document Navigating, DOM Element Selecting , Creating Animations, Event Handling සහ Ajax Development වගේ දේවල් ගොඩාක් ලේසියෙන්ම කරගන්න පුලුවන්. වැඩි කතා ඕන නෑ, මේ උදාහරණ ටික බලන්නකො.

1. AJAX Interface using JQuery/PHP
2. Create an Accessible Slideshow Using jQuery
3. JQuery Photo Slider with Semi Transparent Caption
4. Create a Vertical Scrolling Menu with Tooltips

ඔය තියෙන්නෙ කරගන්න පුලුවන් වැඩ වලින් චූට්ටක් විතරයි. ඔය හැම දෙයක්ම කරගන්න අපිට කරන්න තියෙන්නෙ එක JavaScript file එකක් අපේ site එකට link කරගන්න විතරයි. JQuery site එකට ගිහින් ඒක බාගන්න පුලුවන්. තව උදාහරණ ගොඩක් මෙතනින් බලාගන්න පුලුවන්. මුලින්ම මේක බලල ඉන්න එක තමයි වඩා හොඳ.

එහෙනම් මේ සටහනත් ඉවරයි. ඉස්සරහට කියන්නම්කො JQuery පාවිච්චි කරල කරල තියන තවත් වැඩ. ඔන්න කියවල බලල ප්‍රතිචාරයක් දෙන්නත් අමතක කරන්න එපා හොඳද. ඔබට ජය !