Zend වලින් Hello World

මුලින්ම Zend එක බාගන්න ඕනෙ. ඕකෙ Full එක ඕනෙ නෑ Minimal එක බා ගත්තාම ඇති. (උන් නම් කියනවා Full එක තමා හොද කියලා. ඇති වැඩක් නෑ. අපිට ඕන ටික අරකෙ ඒහෙමම්ම තියෙනවා.)

ඒක විහිදුවා ගන්න 
$tar xvfz ZendFramework-1.11.3.tar.gz
Zend එක ඒකෙ freamwork එක විතරක් පාවිච්චි කරලා අතින් ඔක්කොම ලිපි ලේඛණ ගොනු හදාගෙන පාවිච්චි කරන්න පුලුවන්. ඕවා ඔක්කොම අතින් හදනවට වඩා ලේසියි Zend ලා දීලා තියෙන විධාන වලින් වැඩේ ගොඩ දාන එක. මුල ටික විධාන වලින් කරන එක තමා ලේසි. පස්සෙ අතින් හදන එක ලේසියි.

විධාන භාවිතා කරන්න ZendFramework-1.11.3/bin/ එක ඇතුලෙ තියෙන zf.sh ලේඛණයට alias එකක් හදා ගන්න. (Windows වලට zf.bat එක පාවිචචි කරන්න තියෙන්නෙ. මම මේ කියන්නෙ Linux වලට හරියන්න)
$alias zf=/home/dinuka/workspace/ZendFramework-1.11.3/bin/zf.sh
වැඩේ හරිද කියලා බලන්න zf කියලා ගහලා බලන්න. එත්කොට හෙන හෑල්ලක් ඒවි. ඒකෙ තියෙන්නෙ පාවිච්චි කරන්න පුලුවන් විධාන.

දැන් ඕනෙ තැනකට ගිහිල්ලා වෘපෘතියක් හදන්න. 
$zf create project test
එතකොට test කියලා ගොනුවක් හැදිලා තියෙන බව පෙනේවි. ඒකෙ ඇතුලෙ පහත පරිදි ගොනු හා ලේඛණ සැකසී ඇති ආකාරය දක්නට පුලුවන්. 
test
|-- application
|   |-- Bootstrap.php
|   |-- configs
|   |   `-- application.ini
|   |-- controllers
|   |   |-- ErrorController.php
|   |   `-- IndexController.php
|   |-- models
|   `-- views
|       |-- helpers
|       `-- scripts
|           |-- error
|           |   `-- error.phtml
|           `-- index
|               `-- index.phtml
|-- library
|-- public
|   |-- .htaccess
|   `-- index.php
`-- tests
    |-- application
    |   `-- bootstrap.php
    |-- library
    |   `-- bootstrap.php
    `-- phpunit.xml
මේවා තේරුන් ගන්න කලින් මේක වැඩ කරනවාද බලලා හිටියනම් හරි. ඒකට ඕකෙ library කියල ගොනුවට අපි බා ගත්ත එකෙ තියෙන Zend libraries ටික දාගන්න ඕනෙ. ඒකට ඕනෙ නම් link එකක් දෙන්නත් පුලුවන්. වැඩිය හොදයි කොපි කරන එක. 
$cp -r ZendFramework-1.11.3/library/Zend/ test/library/
දැන් ඉතින් වෙබ් බව්සරයෙ ටැබ් එකක් විවෘත කරගෙන localhost:4000/test/public කියන එක ගහලා බලන්න. මගේ එකේ නම් ඔය විදිහට. පොඩ්ඩක් හිතලා බලලා url එක තෝර ගන්න. කොහොම හරි public එකට තමා දෙන්න ඕනෙ. ඕනෙ නම් කෙලින්ම public එකටම VirtualHost එකක් හදා ගන්න. (මේක බලන්න)

බඩු වැඩ නම් Zend පින්තුරයක් එනවා. අන්තර්ජාලය හරියට වැඩ කලොත් හරියට එනවා. නැත්නම් මොනා හරි විකාරයක් වත් ඒවි. ආවෙ නැත්නම් ආයෙ VirtualHost එක හදන තැන ඉදන්ම මේකෙ පාඩම් කියවන්න. ඒක හරිගියෙ නැත්නම් මෙතනින් එහාට බලන්න එපා.

මේකෙ සීන් එක කෙටියෙන් මෙහෙමයි.

ඔය tests කියන ගොනුව ගැන හිතන්නම ඕනෙ නෑ. library එකේ තමා අපිට ඕන Zend library වගේ library දාන්නෙ. මතකනේ. මුල්න්ම වැඩ කරන්නෙ public එක ඇතුලෙ තියෙන index.php එක. ඒක application/configs/application.ini එකෙන් Bootstrap.php, Zend library එහෙම පාවිචිච කරලා controllers වලට ගිහිල්ලා IndexController.php එකේ init එකයි indexAction එකයි run කරනවා. indexAction එක වැඩ කරනකොට ඒකට අදාල view එක වැඩ කරනවා. ඒ අනුව application/views/scripts/index/index.phtml එක වැඩ කරනවා. අපිට ඉස්සල්ලා පින්තූරය පෙන්වන්නෙ ඔය index.phtml එකෙන්. ඒකෙ තියෙන ඕක්කොම මකලා දාලා තමන්ගෙ කියලා මොනා හරි ගහන්න.

උදා:- Hello World

ඔන්න ඔහොමයි Zend වලින් Hello World ගහන්නෙ.

අවවාදයයි - වැඩ සිද්ද වෙන්නෙ මම කිව්ව පිලිවෙලට තමා. ඒක ඒ විදිහට වෙන්නෙ කොහොමද කියලා ඔය file විවෘත කරගෙන කට්ට කාලා Zend එපා කරගන්න එපා. ඒවා Zend කරලා දේවි. ඔවෑයෙන් මතක තියාගතයුතු වැදගත්ම කාරනය හැම Action එකකටම අදාලව ඒ නමින් .phtml එකක් views/scripts වල අදාල contorller එකෙ නමින් තිබෙන ගොනුවක තියෙන්න ඕනෙ(View වෙන්න දෙයක් තියෙනවා නම් තමා ඕනි. එහෙම නැති ඒවා වැඩ පාරක් දාලා හදන්නෙ නැතුව ඉන්ට පුලුවන්. ). Action එක වැඩ කරනවා කියලා පෙන්වන්නෙ ඔය .phtml එකෙන් තමා. නම් භාවිතයේදි පරිස්සම් වෙන්න. මොකද Zend වල නම් වලින් තමා file එක තියෙන තැන හොයන්නෙ.

ප.ලි - මෙය පසුව සංස්කරනය කරන ලදී. 
Posted by අසුරයා at 11:46 4 comments
Labels:

Apache වලින් Virtual Host

මන්‍යයෙන් වෙබ් සර්වරයේ Document Root ලෙස (XAMMP වල htdocs සහ WAMMP වල www මෙන්) ලිනක්ස් වල භාවිත කරන්නෙ /var/www ගොනුවයි. එය සදහා ප්‍රවෙශ පහසුකම් ඇත්තේත් root user ට පමණි. වෙබ් අඩවි නිර්මාණය කිරිම හා ඒවායේ වෙනස්කම් කිරීම root ලෙස ඇතුලත් වීමෙන් කිරිම අපහසුය. එම කරුණ සදහාත් තවත් බොහෝ කාරණා නිසාත් Document Root එක තමන්ට ප්‍රවේශ පහසුකම් තිබෙන තැනකට ගෙන යාම හෝ වෙබ් බ්‍රව්සරයේ Port එක වෙනස් කිරීම Virtual Host එකක් සාදා ගැනිම නම්වේ.

මේ සදහා /etc/apache2/sites-available/ යන ගොනුවේ ලේඛණයක් නිර්මාණය කල යුතුය. ප්‍රථමයෙන් එම ගොනුවට යන්න. 
$cd /etc/apache2/sites-available/
(මේකෙ $ ලකුණ ඕනෙ නෑ. $ ලකුණ දාන්නෙ සාමාන්‍ය user කෙනෙක් විදිහට විධාන දෙන්න. # ලකුණ root user කෙනෙක් විදිහට විධාන දෙන්න. වැද්දොන්ට වගේ හැම දේම කියලා දෙන්න බෑ.)

එහි ඇති default යනු /var/www Documetn Root වන ලේඛණයයි. එය පහත ආකාරයෙන් වේ. 
<VirtualHost *:80>
        ServerAdmin webmaster@localhost

        DocumentRoot /var/www
        <Directory />
                Options FollowSymLinks
                AllowOverride None
        </Directory>
        <Directory /var/www/>
                Options Indexes FollowSymLinks MultiViews
                AllowOverride None
                Order allow,deny
                allow from all
        </Directory>

        ScriptAlias /cgi-bin/ /usr/lib/cgi-bin/
        <Directory "/usr/lib/cgi-bin">
                AllowOverride None
                Options +ExecCGI -MultiViews +SymLinksIfOwnerMatch
                Order allow,deny
                Allow from all
        </Directory>

        ErrorLog ${APACHE_LOG_DIR}/error.log

        # Possible values include: debug, info, notice, warn, error, crit,
        # alert, emerg.
        LogLevel warn

        CustomLog ${APACHE_LOG_DIR}/access.log combined

    Alias /doc/ "/usr/share/doc/"
    <Directory "/usr/share/doc/">
        Options Indexes MultiViews FollowSymLinks
        AllowOverride None
        Order deny,allow
        Deny from all
        Allow from 127.0.0.0/255.0.0.0 ::1/128
    </Directory>

</VirtualHost>
දැන් ඉතින් කරන්න තියෙන්නෙ මේකෙ කොපියක් දාගෙන ඒකෙ /var/www තියන තැන් වලට අපිට ඕන ගොනුවක පාර දෙන එක තමා.

ඔක්කොටම කලින් sudo log වෙලා ඉන්න. නැත්නම් මලකෙලියයි. 
$sudo su
කොපියක් දා ගැනීමට
#cp default work
එක සංස්කරණය කිරීමට 
#vi work
සමහර කෑලි අපිට ඕනෙ නෑ. ඒවා අයින් කරලා දාන්න පුලුවන්. ඕනෙම නම් error.log සහ access.log සදහා වෙනම ලේඛණ ලබා දෙන්න පුලුවන්. (එසේ ලබාදෙනවානම් අදාල ලේඛණ /var/log/apache2/ ගොනුවේ සාදා දෙන්න.)
Listen 2500
<VirtualHost *:2500>
        ServerAdmin webmaster@localhost

        DocumentRoot /home/dinuka/workspace
        <Directory />
                Options FollowSymLinks
                AllowOverride All
        </Directory>
        <Directory /home/dinuka/workspace>
                Options Indexes FollowSymLinks MultiViews
                AllowOverride All
                Order allow,deny
                allow from all
        </Directory>
</VirtualHost>
මම මේක සකස් කලේ Zend වලට අවශ්‍ය ආකාරයටය. සාමාන්‍යයෙන් Eclipse භාවිතා කරන විට එහි default workspace එක සෑදෙන්නෙ තම home folder එකේය. එහි පාර /home/dinuka/workspace ලෙසින් වේ. AllowOverride All ලෙස සැකසීම අත්‍යාවශ්‍යය. (ඒයින් වෙන්නෙ මොනවාදැයි මම නොදනිමි.)
a2ensite work
මෙසේ සකසා ගත් ලේඛණය ඇතුලත් Apache සදහා ඇතුලත් කිරීමට පහත විධානය ලබා දෙන්න. 
#a2ensite work
Zend සදහා Apache වල rewrite මොඩුලය enable කල යුතුය. (ඒ ඇයි? මම නොදනිමි.) ඒ සදහා 
#a2enmod rewrite
හරි. දැන් Apache නැවත අරඹන්න. 
#/etc/init.d/apache2 restart
එහෙනම් ඔක්කොම හරි. දැන් වෙබ්බ්‍රව්සරයේ http://localhost:2500 ලෙස සටහන් කර බලන්න. වැඩ නැත්නම් ඔබ දුන් Document Root එකේ Permission අවුලක් විය හැක. එයට පහත එක භාවිත කරන්න. 
#chmod 755 -R workspace
එම ගොනුවේ විස්තර පහත ආකාරයේන විය යුතුය. (ls -l)
drwxr-xr-x 8 dinuka dinuka      4096 2011-02-08 21:20 workspace
අවවාදය - workspace ගොනුව සාදන විට root ලෙස ලොග් වී නොසාදන්න. සෑදුවානම් එහි group එක සහ අයිතිය ඔබේ අයිතියට පවරා ගන්න.

ගෙදර වැඩ - තමාගේ workspace එකේ Viruerl Host එකක් සාදන්න.
Posted by අසුරයා at 19:48 0 comments
Labels: ,

නිවසේදීම AMP (Apache, MySQL, PHP) සාදා ගැනීම

හුගක් කට්ටිය උත්සහ කරනවා තමන් වැඩියෙන් දන්න WAMMP XAMMP වගේ දේවල් Linux වල ස්ථාපනය කරන්න. Windows පුරුදු කට්ටිය GUI මත යැපෙන නිසා එසෙ වන්නට ඇත. නමුත් අන්තර්ජාල පහසුකම් තිබෙනවානම් ලිනක්ස් වල ඉතා පහසුවෙන් Apache, MySQL හා PHP ස්තාපනය කල හැක. ඒ සදහා පහත විදානය භාවිත කරන්න. 
$sudo apt-get install apache2 php5 mysql-server

මෙහි Apache, MySQL හා PHP සදහා වූ පැකේජ මෙන්ම ඒවා එකිනෙකට සම්බන්ද කරන පැකේජද තිබෙන බව ඔබට පෙනී යයි. ඔබ PhpMyAdmin ස්ථාපනයට අදහස් කර  සිටින්නේ නම් MySQL ස්ථාපනයේ අසන root සදහා password එකක් ලබා දීම පහසුය.

Apache ස්තාපනය නිවැරදි ආකාරයට වුනා දැයි බැලීමට වෙබ් බ්‍රව්සරයේ http://localhost ලෙස සහෙන් කර බලන්න.
PHP ස්ථාපනය නිවැරදි ආකාරයට වුනා දැයි බැලීමට /var/www ගොනුවේ සරල PHP ලේඛණයක් (<?php echo phpinfo(); ?>)සාදා http://localhost/test.php ආකරයට වෙබ් බ්‍රව්සරයේ සටහන් කර බලන්න. PHP ලේඛණය නිර්මාණයට පහත විදානය භාවිතා කරන්න. 
$sudo vi /var/www/test.php
(එහි එන Text Editor එකේ ලිවීමට යතුරු පුවරුවේ i යතුරත් ඒවා ලියා සේව් කිර ඉවත් වීමට Esc එක ඔබා :wq භාවිත කරන්න. මීට ප්‍රථම sudo apt-get install vim භාවිතයෙන් vim ස්ථාපනය කර සිටින්න. Vim ගැන ඉගෙන ගැනීමට vimtutor යන විදානය දුන් විට එන Tutorial භාවිතා කරන්න.)

MySQL ස්ථාපනය වී ඇත්දැයි බැලීමට පහත විදානය ලබා දී බලන්න. 
$mysql -u root -p

PhpMyAdmin ස්ථාපනයට පහත විදානය භාවිත කරන්න. 
$sudo apt-get install phpmyadmin
වෙබ් බ්‍රව්සරයේ http://localhost/phpmyadmin ලෙස සටහන් කර එය භාවිත කල හැක.

Apache වල හෝ PHP වල යම් (configuration) වෙනසක් සිදුකල හොත් නැවත Apache restart කල යුතුය. ඒ සදහා පහත විදානය යොදා ගනි. 
$sudo sudo service apache2 restart
ගෙදර වැඩ - තමන්ටම කියල වෙබ් සර්වර් එකක් හදා ගන්න.
Posted by අසුරයා at 10:51 0 comments
Labels: , ,

Zend හා ඒ ආශ්‍රිත කර්මාන්ත

JQuery ලියලා ඇති වගේ කියලා හිතුන නිසා Zend ගැන ලියන්න හිතුවා. මේක ලිව්වට මාත් ඔය Zend ගැන වැඩිය දන්නෙ නෑ. Zend ඉගෙනගන්න කට්ටිය වැඩියෙන් පාවිච්චි කරන්නෙත් කරන්න වෙන්නෙත් Zend Quick Start එක තමා. ඒත් එක තේරුම් ගන්න ලේසි නෑ. (මන්දා මට නම් අමාරු වුනා.) PHP MySQL යන්තම් සන්තන් පුරුදු අපිට නොදන්න Zend වල SQLite එක්ක තියන තරන් ඕක්කොම දේවල් එක සැරේ කියලා දේනන ගත්තාම මොන යකාටද තේරෙන්නෙ. ඒක නිසා මම හිතුවා තේරෙන විදිහට ලියන්න. මේක මීටත් වඩා ලේසි විදිහට ලියන්න පුලුවන්. ඒත් එතකොට Zend වල ගතිය නැති වෙනවා.

Zend කියන්නෙ PHP සදහා වූ open source, object oriented web application framework එකක් කියලා තමා මුලින්ම තියෙන්නෙ. මේක MVC (Model-View-Controller) කියන software architecture එක තමා පාවිච්චි කරන්නෙ. මුලින්ම දන්නෙ නැති කට්ටියට ඒක කියලා දෙන්නම්. සමහර විට මේක නෙමේ වෙන්න ඇති MVC කියන්නෙ. නමුත් මේ අදහස ගත්තත් හොදටම ඇති. (මන්දා. මට නම් ඇති)

මේ පින්තූරෙ විදිහට users ලා බලන html කෑලි තියෙන්නෙ View එකේ. ඒකෙ පෙන්වන දත්ත ගේන්නෙ Controller එක හරහා Model වලින්. Controller එක කරන්නෙ ඔය දෙක සම්බන්ද කරන එක තමා. Model ඇතුලෙ තමා Database වලට අදාල වැඩ, ගණිත කර්ම වගේ හැම මගුලම කරන්නෙ. ඔය ඇති MVC ගැන. මීට වඩා දන්න කවුරු හරි ලිපියක් ලියලා එවන්න.

මේක එක සැරේට කියලා දෙන්න අමාරුයි. අනික Zend වල PHP වලින් කරන ඔක්කොම වගේ කරන්න පුලුවන් විදිහට තියන නිසා ඔක්කොම කියලා දෙන්න අමාරුයි. මුලින්ම Database එකට දත්ත දාන හැටි හා පෙන්වන හැටි කියලා දෙන්නම්. මෙන්න මේ විදිහට තමා කරන්න බලාපොරෝතතුව.

  1. Apache වලින් Virtual Host එකක් හදා ගැනීම.
  2. Zend වලින් නව ව්‍යාපෘතියක් සෑදීම.
  3. Zend layout එක සාදා ගැනීම.
  4. Zend වලින් MySQL Database එකක් සම්බන්ද කර ගැනීම හා දත්ත ගෙන පෙන්වීම.
  5. Zend වලින් Form එකක් හදා ගැනීම හා Database එකට දත්ත යැවීම.

සොට් 5න් වැඩේ ඉවරයි. මම මේක ලියන්නෙ Linux පාවිච්චි කරන කටිටියට තේරෙන විදිහට. මොකද මම මේ මගුල් Windows වල කරන්න දන්නෙ නැති නිසා.

කියන්න අමතක වුනානෙ. Zend එක්ක වැඩ කරන්න ලේසි IDE එකක් තෝර ගන්න. මම නම් පාවිච්චි කරන්නෙ Eclipse. තව Aptana Studio කියලා එකක් තියෙනවාලු ඊට වැඩිය හොද. NetBeans නම් කොහොමද දන්නෙ නෑ. Dreamweaver වගේ එවා නම් පාවිච්චි නොකලට කමක් නෑ.

ගෙදර වැඩ - Zend Quick Start එක කියවන්න.
Posted by අසුරයා at 19:54 0 comments
Labels:

JQuery 3 - Form එකක් validate කිරීම

form එකක් submit කරද්දි කොහොමද ඒක JQuery වලින් validate කරන්නෙ කියලා මේ පහල code එකෙන් විස්තර කරන්නම්. 

<html>                                                                
<head>                                                                 
  <script type="text/javascript" src="jquery.js"></script>         
  <script type="text/javascript">                                        
     $(document).ready(function() {

        $("#test_form").submit(function (){
           var user_name = $('#uname').val();
           var password = $('#pwd').val();
           var sex = $('input:radio[name=sex]:checked').val();                 
           var status = $('input:checkbox[name=status]:checked').val();   
           var university = $('#university option:selected').val();

           $('.error_msg').hide();                

           var error = false;

           var message_div = '<div class="error_msg" style="color: #ff3333;" ></div>';               

           if(user_name.length == 0){          
              $('#uname').after(message_div);
              $('#uname').next().html('Please enter a user name');
              error = true;
           }
           if(password.length == 0){               
              $('#pwd').after(message_div);
              $('#pwd').next().html('Please enter a Password');                  
              error = true;
           }
           if(!sex){
              $('input[value=male]').before(message_div);
              $('input[value=male]').prev().html('Please select Sex');
              error = true;
           }
           if(!status){
              $('input[value=student]').before(message_div);
              $('input[value=student]').prev().html('Please check a Status');
              error = true;
           }
           if(university == 'null'){
              $('#university').after(message_div);
              $('#university').next().html('Please select a Universitye');
              error = true;
           }   

           if(error) return false;      

        });
    });                              
  </script>                                                              
</head>                                                                
<body> 
  <fieldset>                                                                
     <legend>Test Form </legend>
     <form id="test_form" method="post">
        Name <input type="text" name="uname" id="uname"/><br/><br/>
        Password <input type="password" name="pwd" id="pwd"/><br/><br/>
        <input type="radio" name="sex" value="male" /> Male<br />
        <input type="radio" name="sex" value="female" /> Female<br/><br/>
        <input type="checkbox" name="status" value="student" /> Student<br/>
        <input type="checkbox" name="status" value="employer" /> Employer<br/><br/>
        University
        <select id="university">
           <option value="null" selected="selected">Select University</option>
           <option value="uoc">Colombo</option>
           <option value="uom">Moratuwa</option>
           <option value="uop">Peradeniya</option>
           <option value="uor">Ruhuna</option>
        </select><br/><br/>  
        <input type="submit" value="Submit Form"/>
     </form>
  </fieldset>
</body>
</html>

(මේක ලස්සන නෑ ඉතින්. වෙන වැඩේ විතරයි හිතුවෙ. ලස්සන කලාම වැඩේ තේරෙන්නෙ නෑ. ඕන ටික අඩුම විදිහට ලියලා තියෙන්නෙ. කට්ටිය හිතෙන විදිහට style කරලා ගන්න. මුලින්ම යට තියෙන html form එක තේරෙනවැයි කියලා මම හිතනවා. ඒවත් කියලා දෙන්න බෑ ඉතින්. මේක බලන්න කලින් කලින් jquery ගැන ලියලා තියෙන මුල ඒවා ටිකත් බලලා එනවනම් තමා හොද.)

  1. $("#test_form").submit(function (){ පේලියෙන් කියන්නෙ test_form කියන id එක තියෙන form එක submit කරන කොට වැඩ කරන function එක ගැන. ඔය ඇරලා තියෙන් { වරහන ඇතුලෙ තමා ඒක ලියන්නෙ. (form එකක් විතරක් තියෙන නිසා $("form").submit(function (){ කියලත් ලියන්න පුලුවන්.)
  2. ඊට පස්සෙ මුලින්ම කරන්නෙ form එකේ field වල තියෙන value ටික ගන්න එක.
    • var user_name = $('#uname').val(); එකෙන් කියන්නෙ uname කියන id එක තියෙන එකේ value එක ගන්න කියලා. ඒක අරගෙන user_name කියලා varible එකක්ට දාගන්නවා. var password = $('#pwd').val(); එකෙන් කරන්නෙත් ඒවගේම එකක්.
    • var sex = $('input:radio[name=sex]:checked').val(); කියන එකේ input:radio කියන එකෙන් මේ පිටුවෙ තියෙන radio button ඔක්කොම ගැන කියවෙනවා. එකෙන් name එක sex වන එකේ value එක ගන්න එක තමා මේ පේලියෙන් කරන්නෙ. (මේ පිටුවටම තියෙන්නෙ එක radio button සෙට් එකක් නිසා $('input:redio').val(); කියලා ලියන්නත් පුලුවන්. තේරම් කරන්න ඕන නිසයි ලිව්වෙ. )
    • var status = $('input:checkbox[name=status]:checked').val(); එකත් ඉතින් ඉස්සල්ලා radio button කතන්දරයම තමා. එකෙන් checkbox වල value ගන්නවා.
    • var university = $('#university option:selected').val(); මේකෙ university කියලා id එක තියෙන select එකෙන් select කරලා තියෙන option එකේ value එක ගන්නවා.
    එන value මොනාද කියලා alert(user_name); වගේ කරලා බලන්න පුලුවන්.
  1. $('.error_msg').remove(); එකෙන් .error_msg කියන class එක තියෙන ඔක්කොම මකලා දානවා. ඒකෙ වැදගත් කම පස්සෙ තේරෙයි. var error = false; එකත් පස්සෙ තේරෙයි.
  2. var message_div = '<div class="error_msg" style="color: #ff3333;" >'+'</div>'; කියන එකෙන් අපි අපේ වැරදි පණිවිඩ error message) පෙන්නන්න div එකක් හදා ගන්නවා.
  3. if(user_name.length == 0){ එකෙන් user_name කියන variable එකෙ දිග බලනවා. එකෙ මුකුත් නැත්නම් ඒක 0 වට සමාන වෙනවා. එහෙම වුනාම කරන්නෙ මොනවද කියලා සගල වරහන් ඇතුලෙ තියෙන්නෙ.
  4. $('#uname').after(message_div); එකෙන් කියන්නෙ uname කියලා id එක තියන එකට පස්සෙ අපි කලින් හදාගත්තු div එක දාන්න කියලා. එතකොට uname කියන text field එක අවට මෙහෙම වෙනස් වෙනවා
    5. Name <input type="text" name="uname" id="uname"/>
 <div class="error_msg" style="color: #ff3333;" ></div>
  5. $('#uname').next().html('Please enter a user name'); එකේ .next() කියන එකෙන් uname එකට පස්සෙ තියෙන element එක එහෙම නැත්තම් කලින් .after() එකෙන් දාපු div එක තෝරගන්නවා.
    6. .prv() කියන එකෙන් uname එකට කලින් (previous) element එක තෝරනවා. .html('Please enter a user name') එකෙන් ඉස්සල්ල තොරගත්ත div එක ඇතුලට Please enter a user name කියන පණිවිඩය ඔබ්බවනවා. දැන් uname එක වටේ html එක මේ වගේ වෙනස් වෙන්න ඕනෙ. 
    Name <input type="text" name="uname" id="uname"/>
 <div class="error_msg" style="color: #ff3333;">Please enter a user name</div>
  6. කොහොම හරි error message එකක් පෙන්නුවට පස්සෙ var error = false; කියලා කලින් හදලා තියෙන valiable එක error = true කියලා වෙනස් කරනවා.
    7. පස්සෙ එවටත් එකම ටික තමා කරලා තියෙන්නෙ. පොඩි පොඩි වෙනස්කම් තියනවා. radio button හෝ check box වල එකක්වත් select කරලා නැති වුනාම undefined කියලා තමා value එක එන්නෙ. ඒක select කරලා නැද්ද කියලා බලන්න තමා if(!sex) විදිහට බලන්නෙ. select එකේ මුකුත් select කරලා නැත්තම් ඉබේ select වෙලා තියන එකේ value එක null කියලා තමා තියෙන්නෙ. එකයි if(university == 'null') විදිහට බලන්නෙ. $('input[value=male]').before(message_div); කියන එකෙන් input කියලා තියෙන ඔක්කොම එවගෙන් value=male වන එක තෝරනවා. .before() කියන එකෙන් තොරපු element එකෙ පස්සෙ අපෙ div එක දාගන්නවා. .after() එක වගේමයි. .after() එකේ .prv() තිබ්බා වගේ .before() එකේ .next() කියන එක පාවිච්චි කරනවා. මේකෙ after, before, pre, next වෙනුවට පාවිච්චි කරන්න පුලුවන් ඒවා පහල තියෙනවා.

    • .hide()
    • .show()
    • .add()
    • .addClass()
    • .after()
    • .append()
    • .appendTo()
    • .attr()
    • .before()
    • .css()
    • .data()
    • .prepend()
    • .prependTo()
    • .wrap()
    • .wrapAll()
    • .remove()
    • .removeAttr()
    • .removeClass()
    • .removeData()
    • .replaceAll()
    • .replaceWith()
    මේවා ඔක්කොම වැඩ කරන්නෙ after එක වගෙ නෙමේ. ඒ වුනාට page එකේ වෙනසක් කරන්න පුලුවන් ඒවා මේකෙ තියනවා. වැඩි විස්තර JQuery API එකෙන් බලාගන්න. මීට වැඩිය විස්තර තියෙනවා. මම මේකෙ පාවිච්චි කරලා තියෙන්නෙ after එකයි before එකයි විතරයි.
  1. අන්තිමට if(error) return false; එකෙන් error එකක් තියෙනවනම් false කියන එක return කරනවා. එකෙන් form එක submit වෙන එක නතර වෙනවා. submit function එක ඇතුලෙ false කියලා return වෙනවනම් form එක submit වෙන්නෙ නෑ.

ඉස්සල්ලා කිව්ව $('.error_msg').remove(); එකෙන් කරන්නෙ form එක submit කරනකොට කලින් ආපු error_msg මකලා දානවා.
Posted by අසුරයා at 04:59 2 comments
Labels:

JQuery 2 - JQuery සරල code එකක තේරුම

කලින් පාඩම බලලා එනවනම් තමා හොද. මම උගන්වන්න ලේසි වෙන්න ඉස්සල්ල පිටුව මේ විදිහට වැඩි කරලා ලිව්වා. ඔයත් කරලා බලන්න. ලින්ක් එක click කරනකොට ඇලර්ට් එක එන්න ඕනෙ.
<html>                                                                
     <head>                                                                 
         <script type="text/javascript" src="jquery.js"></script>         
         <script type="text/javascript">                                        
           $(document).ready(function() {
                $("a").click(function () {
                    alert("Hello World");
                });
           });                              
         </script>                                                              
     </head>                                                                
     <body>                                                                 
          <a class="test link" id="link_1" href="">Test Link 1 </a><br/>
          <a class="test link" id="link_2" href="">Test Link 2 </a><br/><br/>
         
          Box<input class="test box" id="check_1" type ="checkbox"  />
     </body>                                                                
</html>
දැන් කියන්නම් මොකක්ද කලේ කියලා.

$("") කෑල්ලෙන් තමා අදාල element එක තෝර ගන්නෙ.
  • ඕක ඇතුලට a විතරක් දැම්මොත් html පිටුවෙ තියෙන සියලුම a tag වලට, ඊට පස්සෙ තියෙන event එකට අදාල function එක වැඩ කරනවා.
  • ඒක ඇතුලෙ .test (තිත ඉදිරියට) දැම්මොත් class එක test වන ඒ පිටුවෙ තියෙන හැම element එකක් ගැනම සදහන් වෙනවා. එතකොට checkbox එක click කරනකොටත් ඇලර්ට් එක වැඩ කරන්න ඕනෙ. ඒකෙ තියෙන්නෙත් ඒ class එකමනේ. තිතෙන් කියන්නෙ class එකක් කියලා. ඒකෙ .link කියලා දැම්මොත් link class එක තියෙන ඒවට වැඩ කරනවා. එතකොට ඇලරට් එක දෙන්නෙ ලින්ක් වලින් විතරයි. කියන්න අමතක වුනානෙ. මම හැදුව විදිහට හැම element එකේම class 2ක් තියෙනවා. උදා ලෙස checkbox එකේ test සහ box ලෙස දෙකක් අඩංගුයි.
  • අරක ඇතුලෙ #link_1 කියලා දැම්මොත් ඉතින් ඇලරට් දෙන්නෙ link_1 කියලා තියෙන ලින්ක් එකෙන් විතරමයි. (එකම පිටුවෙ එකම id එක දෙපාරක් යෙදෙන්න බෑ. හරියටම කිව්වොත් id එක uniqe. ඒ වගේම එක element එහෙකට තියෙන්න පුලුවන් එක් id එකක් විතරයි.)

මීට වඩා වැඩ පාරවල් දාලා හරියන element එක තෝරගන්න ක්‍රම තියෙනවා. ඒවා පස්සෙ පාඩමකින් කියලා දෙන්නම්. දැනට මේ හොදටම ඇති. (කවදා හරි ඒක ලියනකම් මේක බලන්න. http://api.jquery.com/category/selectors/ . මේකෙ තියෙනවා ඔක්කොම.)

ඊට ප්සසෙ click කියලා ලියලා තියෙන එක. ඒකට කියන්නෙ event එක කියලා. 

ඔය event ජාති ගනනාවක් තියෙනවා. (මෙතන තියෙනවා ඔක්කොම. http://api.jquery.com/category/events/ )

වැඩියෙන් පාවිච්චි කරන එවා පහලින් ලියන්නම්.
  • .change()
  • .click()
  • .dbclick()
  • .keydown()
  • .keypress()
  • .keyup()
  • .live()
  • .load()
  • .mousemove()
  • .mouseenter()
  • .mouseleave()
  • .mouseout()
  • .mouseover()
  • .mouseup()
  • .ready()
  • .resize()
  • .scroll()
  • .select()
  • .submit()
  • .toggel()
  • .trigger()
මේවා ඔක්කොම හැම element එකටම හරියන්නෙ නෑ. සමහර ඒවා මම පාවිච්චි කරලත් නෑ. එන එන විදිහට උළුඅස්ස ගහන්න තියෙන්නෙ.

ඉතින් ඔය event එක වෙන වෙලාවට මොනාද කරන්න ඕනෙ කියලා ඒකෙ function එක ඇතුලෙ ලියන්න ඕනෙ. ලියන්න පුලුවන් function පස්සෙ කියන්නම්කො.
Posted by අසුරයා at 18:28 0 comments
Labels:

JQuery 1 - JQuery වල අයන්න

මම ඉතින් දන්න දෙවල් වලින් පොඩිම එක තමා JQuery කියන්නෙ. මේක Java Script Librery එකක්. ලෝකයෙ වැඩියෙන්ම පාවිචිවෙන එක කිව්වොත් නිවැරදියි. මේක 76KB පොඩි ෆයිල් එකක්. පොඩි වුනාට මේක ලොකු ලොකු ඈයො පාවිච්චි කරන පට්ට වැඩ තොගයක් කරන්න පුලුවන් දෙයක්. කොටින්ම Google, Dell, Drupal, Wordpress, Mozilla වගෙ පට්ට වෙබ් සයිට් හදලා තියෙන්නෙ මේකත් පාවිච්චි කරලා. වෙබ් ඩිවොලොපින් කරනවා නම් ඉතින් අද කාලෙ මේක නැතුව බෑ. JQuery ඉගෙන ගන්න මේකම බලන්න ඕනෙ නෑ. Getting Started with jQuery පිටුවට ගියොත් ඉතින් කඩු වලින් ඉගෙන ගන්න පුලුවන්. සම්මුඛ පරීක්ෂණයකට යන්න කලින්, මෙලෝ දෙයක් දන්නෙ නැතුව රස්සාවට ගියාම පැයෙන් දෙකෙන් ගොඩ දා ගන්න තමා මේක ලියන්න හිතුවෙ. මුලදි පට්ට අමාරු වගේ හිතුවට මේක html වලට වඩා ලේසියි. හරි හරි වැඩි කතා නැතුව පටන් ගමුකො.

මෙන්න මෙතනින් JQuery බාගන්න පුලුවන්. ඕක බාගෙන jquery.js කියලා නම වෙනස් කරන්න.

ඔතනම html ලේඛණයක් හදලා (test.htm) පහත විදිහට jquery.js එක අඩංගු කර ගන්න. හරියට src කියන එකට jquery.js එකේ path එක දෙන්න අමතක කරන්න එපා.
<html>                                                                  
  <head>                                                                  
    <script type="text/javascript" src="jquery.js"></script>          
    <script type="text/javascript">                                         
       <!--මෙන්න මෙතන තමා ඊ ලගට ලියන java script ඒවා ලියන්නෙ. -->                                
    </script>                                                               
  </head>                                                                 
  <body>                                                                  
     <!-- මෙතන තමා html එවා ලියන්නෙ -->
  </body>                                                                 
</html>
හරි නම් මුලින්ම පල්ලෙහා එක උඩ java script කෑල්ලෙ ලියන්න. 
$(document).ready(function() {
   // මේක ඇත්ලෙ තමා මෙතනින් එහාට jquery ඒවා ලියන්නෙ. 
});
පිටුව එන කොටම පුදනකොටම කාපි යකා කියලා jquery එකේ වැඩ කරන්නෙ $(document).ready එක තමා. ඕක නිකන් Java, C, C++ වල main method එක වගේනෙ.

jquery වැඩද කියලා බලන්න පුලවන් අරක ඇතුලෙ alert("Hello World"); කියලා ලියන්න. ලියලා ඉවර වෙලා refresh පාරක් දාලා බලන්න. හරියට ඇලරට් එක එනවනම් බඩු වැඩ.

හරියටම කියනවානම් දැන් පිටුව මේ වගේ තියෙන්න ඕනෙ.
<html>                                                                  
   <head>                                                                  
      <script type="text/javascript" src="jquery.js"></script>          
      <script type="text/javascript">                                         
         $(document).ready(function() {
            alert("Hello World");
         });                               
      </script>                                                               
   </head>                                                                 
   <body>                                                                  
     <!-- මෙතන තමා html එවා ලියන්නෙ -->
   </body>                                                                 
</html>
වැඩ නැත්නම් පහත ඒවා හරියට තියෙනවද බලන්න.
  • jquery.js එකේ path එකේ අවුලක්.
  • jquery ලිව්ව කෑල්ලෙ වැරැද්දක්. (වරහන්, ; , " හරියටම තියෙනවද බලන්න.)
කියන්න අමතක වුනානෙ. Firefox වල Firebug පාවිච්චි කරනවානම් මාර ලේසියි. ඒකෙ console එක දාලා refresh කලාම එන වැරැද්දෙන් මොනා හරි කර ගන්න පුලුවන් වේවි.

ඔක්කොම හරිනම් එතනින් එහාට යන්න තියෙන්නෙ. ඒකට පල්ලහා html කෑල්ල ලියා ගන්න. හරියට තැන බලලා body එක ඇතුලෙම ලියන්න.
<a href="">Test Link</a>
Jquery කෑල්ලත් ලියා ගන්නකො.
$("a").click(function () {
   alert("Hello World");
});
දැන් පිටුව මේ විදිහට තියෙන්න ඕනෙ. 
<html>                                                                  
   <head>                                                                  
      <script type="text/javascript" src="jquery.js"></script>          
      <script type="text/javascript">                                         
         $(document).ready(function() {
            $("a").click(function () {
               alert("Hello World");
            });
         });                               
      </script>                                                               
   </head>                                                                 
   <body>                                                                  
      <a href="">Test Link</a>      
   </body>                                                                 
</html>
දැන් ආයෙ පිටුව refresh කරලා ලින්ක් එකකට කොටලා බලන්න. ඇලරට් එක එනවානම් බඩු වැඩ.

මේකෙන් කියන්නෙ පිටුවෙ තියෙන හැම a element එකක්ම click කලාම function එක ඇතුලෙ තියෙන දේ වෙන්න කියලා. හරියටම වේන්නෙ මොකක්ද කියලා ඊලග පාඩමේදි කියලා දෙන්නම්.
Posted by අසුරයා at 10:32 1 comments
Labels:
Subscribe to: Posts (Atom)