Wednesday, November 26, 2008

jQuery | Contact From එකක්‌ හදමු

වෙබ් අඩවියක වැදගත් අංගයක්‌ නේ contact form එක. අපි අද බලමු කොහොමද jquery/php/ajax භාවිතයෙන් එකක්‌ හදන්නෙ කියලා. හුගක්‌ වෙබ් අඩවි වල මේ පිලිබඳ සටහන් තිබුනත්, සිංහලෙන් වැඩි විස්‌තර නැති නිසා මම හිතුවා මේ ගැන ලියන්න.

අවසාන ප්‍රතිඵලය මුලින්ම බලලම ඉමු. කිසිම කොටුවක්‌ සම්පූර්ණ නොකර send බොත්තම ඔබා බලන්න. මෙහි fileds පුරවන්නෙ නැතිව send බොත්තම එබුවොත් පනිවුඩයක්‌ දිස්‌ වෙනවා එම fields සම්පූර්ණ කරන ලෙස ඉල්ලමින්. නැවත එම fields සම්පූර්ණ කල පසු පමනයි form එක submit වන්නේ.

අපි form layout එකෙන් පටන්ගමු.

html
<div id="wrapper">
 <h1>Contact Form</h1>
    <ul id="response">
     <li class="process">Processing..</li>
    </ul>
 <form method="post" action="send.php">
     <label for="name">Name</label>
        <input type="text" name="name" id="name" />
        <label for="email">Email</label>
        <input type="text" name="email" id="email" />
        <label for="message">Message</label>
        <textarea id="message" name="message" cols="20" rows="5"></textarea>
        <input type="button" value="send" id="send" name="submit" />
    </form>
</div>
css
* {
 padding:0; 
 margin:0;
}

body { 
 font-family:Verdana, Arial, Helvetica, sans-serif; 
 font-size:12px; 
 padding-top:30px; 
}

#wrapper { 
 width:500px; 
 margin:0 auto; 
 padding:20px; 
 background:#f9f9f9; 
 border:1px solid #ddd; 
}

label { 
 display:block; 
 padding:10px 0 5px; 
}

input, textarea { 
 width:490px; 
 border:1px solid #ddd!important; 
 padding:5px!important; 
}

input#send { 
 margin-top:15px; 
 width:100px; 
 text-align:center; 
 font-weight:bold; 
 background:#ddd; 
}

ul#response { 
 list-style-position:inside; 
 padding:20px 0 10px; 
}

ul#response li { 
 color:#c00; 
}

.sent { 
 color:#090!important; 
 list-style:none; 
}

jQuery

jquery.com වෙබ් අඩවියෙන් අලුත්ම jQuery ගොනුව ලබාගෙන ඔබේ පිටුවට link කරගන්න. මෙම form එක සඳහා අපි jquery හි ajax යෙදුම භාවිතා කරනවා. එය කරන්නෙ මෙහෙමයි. පහතින් පේලියෙන් පේලිය විස්‌තර කරන්නම්.

$(document).ready(function(){
  $('.process').hide();
  $('#send').click(function(){
    $('.process').fadeIn('fast');
      var name = $('#name').val();
      var email = $('#email').val();
      var message = $('#message').val();      
      $.ajax({
        type: 'post',
        url: 'send.php',
        data: 'name=' + name + '&email=' + email + '&message=' + message,
        success: function(msg{
          $('.process').fadeOut(1000);    
          $('#response').html(msg);
        }
      });
  });
});

පලවන පේලියෙන් සුපුරුදු පරිදි ආරම්භ වීමට ප්‍රථම පිටුව පූරණය වන තෙක්‌ සිටිනවා.

දෙවන පේලියෙන් කරන්නේ අපේ තාවකාලික පනිවිඩය ෆෝරමයේ send බොත්තම ඔබන තෙක්‌ සගවා තබා ගැන්ම.

තුන් වන පේලියේදී #send id එක සහිත send බොත්තම සදහා click function එකක්‌ යොදනවා. එනම් බොත්තම එබූ පසු එම වරහන් තුල ඇති කේතය (4 සිට 16 දක්‌වා පේලි) ක්‍රියත්මක වෙනවා.

හතරවන පේලියෙන් තාවකාලික පනිවිඩය පෙන්වනවා.

5, 6, 7 පේලි මගින් භාවිතයේ පහසුව සදහා අදාල id සහිත input සහ textarea වෙතින් එන අගයන් (values) විචල්‍යන්ට දමා ගන්නවා.

8 - 16 පේලි ajax post එක සදහායි. මෙහි මම භාවිතා කරන සැකසුම කොටස්‌ හතරකින් සමන්විතයි.type - යවන ආකාරය, url - යවන්නේ කුමන ගොනුවටද, data - යවන දත්තයන් සහ success - ලැබෙන ප්‍රතිචාරය එම කොටස්‌ හතරයි.

මෙහිදී මම ඊමේල් පනිවිඩය යෑවීමට 'phpMailer' නමැති නොමිලේ ලබාගත හැකි php class එක පාවිච්චි කරනවා. ඔබේ සර්වරයේ php version එකට ගැලපෙන ගොනුව phpMailer වෙතින් ලබාගන්නට පුලුවන්.

එම phpMailer ෆෝල්ඩරයත් ඔබේ contact form එක ඇති ෆෝල්ඩරය තුලටම දමන්න.

දැන් ඇත්තේ send.php ගොනුව php මගින් සාදා ගැනීමයි. මෙය ඉතා පහසුවෙන් phpMailer හි example ගිනු පිරික්‌සීමෙන් සාදාගන්නට පුලුවන්. අපේ contact form එක සඳහා සරල validation සහිත send.php ගොනුවක්‌ පහත පරිදි ලියන්න පුලුවන්.

<?php
 
 $name = trim($_POST['name']);
 $email = $_POST['email'];
 $message = $_POST['message'];
 
 $site_owners_email = 'youremail@email.com'; // ඔබේ ඊමේල් ලිපිනය යොදන්න 
 $site_owners_name = 'your name'; // ඔබේ නම යොදන්න 
 
 if (strlen($name) < 2) {
  $error['name'] = "Please enter your name"; 
 }
 
 if (!preg_match('/^[a-z0-9&\'\.\-_\+]+@[a-z0-9\-]+\.([a-z0-9\-]+\.)*+[a-z]{2}/is', $email)) {
  $error['email'] = "Please enter a valid email address"; 
 }
 
 if (strlen($message) < 3) {
  $error['message'] = "Please leave a comment.";
 }
 
 if (!$error) {
  
  require_once('phpMailer/class.phpmailer.php');
  $mail = new PHPMailer();
  
  $mail->From = $email;
  $mail->FromName = $name;
  $mail->Subject = "Website Contact Form";
  $mail->AddAddress($site_owners_email, $site_owners_name);
  $mail->Body = $message;
    
  $mail->Send();
  
  echo "<li class='sent'>Thank You " . $name . ". We recived your message.</li>";
  
 }
 else {

  $response = (isset($error['name'])) ? "<li>" . $error['name'] . "</li> \n" : null;
  $response .= (isset($error['email'])) ? "<li>" . $error['email'] . "</li> \n" : null;
  $response .= (isset($error['message'])) ? "<li>" . $error['message'] . "</li>" : null;
  
  echo $response;
 }

?>

දැන් සියල්ල සූදානම්. ගැටලු ඇත්නම් comment මගින් විමසන්න.

සම්පූර්ණ කේතය මෙතනින් ගන්න

9 comments:

නිලන්ත පියසිරි said...

බොහොම වටිනවා. ගොඩක් තුති.

SRIshanu said...

නියමයි! හදිසි වැඩකදි මරේ මරු!! :)

said...

එල එල. බොහෝම ස්තූති. කෝඩ් එක ටෙස්ට් කරලා බලන්න ඕනේ. මටනම් හිතෙන්නේ මෙවායේ කෝඩ් එක දිග වැඩී කියල. සාමාන්‍ය ක්‍රමේදි මෙච්චර ලියන්න ඕනේ නැහැ වගේ. දන්නේ නැහැ තාම පුරුදු නැති නිසා වෙන්න ඇති.

said...

මන් මේක ගෙඩිපිටින් කොපි පේස්ට් කරල බැලුව ඒත් වැඩ නැහැ නේ
success: function(msg{
මෙන්න මෙතන
missing after formal parameters
කියලා error එකක් එනවා

තිලිණ said...

වෙබ් සර්වර් එකකද බලුවෙ ? මම දීල තියෙන කෝඩ් එක බාගත කරල බලන්න. මේ සින්ටැක්‌ස්‌ හයිලයිටර් එකේ php කෝඩ් අවුලක්‌ තියෙනව වගේ.

Anonymous said...

අනේ හැබෑට contact form තරම් එපාකරපු දෙයක් නෑ මට. මං එකපාරක් දවසක් පුරා මේකක් හදාගන්න දැඟලුවා. :D මේක ලියපු එක ගොඩක් වටිනවා.

Anonymous said...

Hello
http://www.rhythmmethodlive.com/ - lexapro antidepressant
Doctors and other professional nowadays recommend the same Lexapro drug to the patients who are suffering from depression.
[url=http://www.rhythmmethodlive.com/]purchase lexapro[/url]
Don’t be attracted towards the pirated one.
order lexapro
It is as simple as this.

ශාකුන්තල | Shaakunthala said...

බොහෝම ස්තුතියි! ශාකුන්තල ඩොට් කොම් එකටත් මං දැම්මා ඔන්න... :)

හැබැයි මං ටිකක් code එක වෙනස් කළා.... Subject line එඑකකුත් එන විධියට. send.php එකට ඒක post වෙනවා... ඒත් මේල් එක යන්නෙ නෑනේ... මේකෙන් යවන මේල් spam filters වලින් බ්ලොක් වෙනවද?

ශාකුන්තල | Shaakunthala said...

CAPTCHA තිබුණනං තවත් හොඳයි. ඔන්න තව බ්ලොග් පෝස්ට් එකකට හොඳ මාතෘකාවක්... :-)