[PHP] Gửi mail bằng Ajax (đơn giản)

Trong quá trình làm việc (cụ thể là tuần trước), công ty yêu cầu mình làm 1 cái contact form cho 1 cái web chạy wordpress . Mệt mỏi ở chỗ là plugin về contact form nó lại ko phù hợp hoàn toàn với yêu cầu của công ty, buộc lòng mình phải tự viết .

Yêu cầu đặt ra

• Popup contact form và các form liên wan (confirmation form, success form, fail form).
• Ajax (dĩ nhiên, chứ bạn submit form thì sao đc cái popup )
• Mail ko nằm ở hôp thư spam.
• validation có màu mè 1 chút.
• Mail có đính kèm.

Cách xử ký

• Về popup, tuỳ ý mỗi người, nhưng ví dụ của mình sử dụng colorbox: http://www.jacklmoore.com/colorbox, đơn giản ở chỗ bạn chỉ cần
  PHP:

  $.colorbox({inline:true, href:"#applyform"});
  là colorbox tự bay ra
• Về validation, mình sử dụng: http://bassistance.de/jquery-plugins/jquery-plugin-validation/
• Về hàm gửi mail, mình xài PHPMailer chứ ko xài PHP Mail() mặc định nhé, các bạn chú ý vấn đề mail ko gửi vào hôp thư spam.
• Ajax và xử lí gửi mail thì tự viết
• Một tài khoản gmail dùng để gửi mail. Nếu host bạn có SMTP thì lấy cái đó gửi mail cũng đc.

Cách làm

Do mình sẽ đính kèm file nên cách làm chỉ ghi vắn tắt ra cho cá bạn dễ hiểu.

1. Contact form:
   PHP:

   <form class="applyform">
   <p>Name</p>
   <p class="block">
     <input name="name" type="text" class="txt aname" />
   </p>
   <p>Applied position</p>
   <p class="block">
     <input name="position" type="text" class="txt aposition" />
   </p>
   <p>Message</p>
   <p class="block">
     <textarea name="mess" class="txtaree amessage" rows="6" cols="64"></textarea>
   </p>
   <p class="block filein">
    <input type="file" name="file_attach" class="custom-file-input">
    <span id="fname"></span>
   </p>
</form>

2. Một cái nút submit form
   PHP:

   <a id="submitform" href="javascript:;" class="ibtn_send submitform">Send</a>
3. Hàm vaild cái form (trả về true or false)
   PHP:

   $('.applyform').valid()
4. Khi nhấn submit, confirmation popup sẽ hiện lên . Bạn confirm nội dung thì mới gửi.
   
   PHP:

   $('.btn_sendconfi').click(function(){
    if($('.applyform').valid()){
        //if validation
        var user_name = $('.aname').val();
        var user_position = $('.aposition').val();
        var user_message = $('.amessage').val();
        var attach_file = $('input[type=file]')[0].files[0];
       
        //data to be sent to server       
        var post_data = new FormData();   
        post_data.append( 'userName', user_name );
        post_data.append( 'userPosition', user_position );
        post_data.append( 'userMessage',user_message);
        post_data.append( 'file_attach', attach_file );
       
        $. ajax({
            url: 'ajax.php',
            data: post_data,
            processData: false,
            contentType: false,
            type: 'POST',
            dataType:'json',
            success: function(data){
                //load json data from server and output message   
                if(data.type == 'error')
                {
                    //fail to send
                    $('#mailerror').html(data.text);
                    $.colorbox({inline:true, href:"#failpopup"});
                }else{
                    //success
                    $.colorbox({inline:true, href:"#successbox"});
                  
                    //reset values in all input fields
                    _reset();
                }
            }
        });
    }
});

5. File ajax. php gửi mail
   
   PHP:

   require('mail/class.phpmailer.php');

    if($_POST)
    {
        $to_Email       = "abcdef@gmail.com"; //Replace with recipient email address.
        $subject        = 'New application for'; //Subject line for emails
      
        //check if its an  ajax request, exit if not
        if(!isset($_SERVER['HTTP_X_REQUESTED_WITH']) AND strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) != 'xmlhttprequest') {
      
            //exit script outputting json data
            $output = json_encode(
            array(
                'type'=>'error',
                'text' => 'Request must come from Ajax'
            ));
          
            die($output);
        }
      
        //check $_POST vars are set, exit if any missing
        if(!isset($_POST["userName"]) || !isset($_POST["userPosition"]) || !isset($_POST["userMessage"]))
        {
            $output = json_encode(array('type'=>'error', 'text' => 'Input fields are empty!'));
            die($output);
        }

        //Sanitize input data using  PHP filter_var().
        $user_Name = filter_var($_POST["userName"], FILTER_SANITIZE_STRING);
        $user_Position = filter_var($_POST["userPosition"], FILTER_SANITIZE_STRING);
        $user_Message = filter_var($_POST["userMessage"], FILTER_SANITIZE_STRING);
      
        //additional  php validation
        if(strlen($user_Name)<4) // If length is less than 4 it will throw an HTTP error.
        {
            $output = json_encode(array('type'=>'error', 'text' => 'Name is too short or empty!'));
            die($output);
        }
       
        if(strlen($user_Position)<5) //check entered data is numbers
        {
            $output = json_encode(array('type'=>'error', 'text' => 'Invalid Position.'));
            die($output);
        }
        if(strlen($user_Message)<5) //check emtpy message
        {
            $output = json_encode(array('type'=>'error', 'text' => 'Too short message! Please enter something.'));
            die($output);
        }
      
        ### Attachment Preparation ###
        $file_attached = false; //initially file is not attached
        $encoded_content = '';
        $file_name = '';
        $file_type = '';
        if(isset($_FILES['file_attach'])) //check uploaded file
        {
            //get file details we need
            $file_tmp_name    = $_FILES['file_attach']['tmp_name'];
            $file_name        = $_FILES['file_attach']['name'];
            $file_size        = $_FILES['file_attach']['size'];
            $file_type        = $_FILES['file_attach']['type'];
            $file_error       = $_FILES['file_attach']['error'];
          
            //exit script and output error if we encounter any
            if($file_error>0)
            {
                $mymsg = array(
                1=>"The uploaded file exceeds the upload_max_filesize directive in  php.ini",
                2=>"The uploaded file exceeds the MAX_FILE_SIZE directive that was specified in the HTML form",
                3=>"The uploaded file was only partially uploaded",
                4=>"No file was uploaded",
                6=>"Missing a temporary folder" );
              
                $output = json_encode(array('type'=>'error', 'text' => $mymsg[$file_error]));
                die($output);
            }
      
            //read from the uploaded file & base64_encode content for the  mail
            $handle = fopen($file_tmp_name, "r");
            $content = fread($handle, $file_size);
            fclose($handle);
            $encoded_content = chunk_split(base64_encode($content));
          
            //now we know we have the file for attachment, set $file_attached to true
            $file_attached = true;
        }

        if($file_attached) //continue if we have the file
        {
            #  Mail send   
            $mail = new PHPMailer();

            $mail->IsSMTP();  // telling the class to use SMTP
            //$mail->SMTPAuth = false;
            $mail->SMTPAuth = true;     // turn of SMTP authentication
            $mail->Username = "zzzzzzzzzzzzzzzzzzzzzzzzzz@gmail.com";  // SMTP username
            $mail->Password = "zzzzzzzzzzzzzzzzzzzzzzzzzz"; // SMTP password
            $mail->Host = "smtp.gmail.com";
            $mail->SMTPSecure = 'ssl';
            $mail->Port = 465;
                   
            $mail->From     = "no-reply@vietdesigner.net";
            $mail->FromName = "Banbaonylong";
            $mail->AddAddress($to_Email, $user_Name);

            $mail->Subject  = $subject.' '.$user_Position;
            $mail->Body     = $user_Message;
            $contact_image_data = 'data:'.$file_type.';base64,'.$encoded_content;
            $datazz = substr($contact_image_data, strpos($contact_image_data, ","));
            //            
            $mail->AddStringAttachment(base64_decode($datazz), $file_name, 'base64', $file_type);
        }  
       
      
        if(!$mail->Send()) //output success or failure messages
        {
            $output = json_encode(array('type'=>'error', 'text' => $mail->ErrorInfo));
            die($output);
        }else{
            $output = json_encode(array('type'=>'message', 'text' => 'Hi '.$user_Name .' Thank you for your email'));
            die($output);
        }
    }    
   Bạn chỉ cần thay đổi các dòng sau để gửi mail:
   • Dòng 6: Thay đổi địa chỉ mà mail sẽ tới
     PHP:

     $to_Email       = "abcdef@gmail.com";
   • Dòng 7: Thay đổi tựa đề mail
     PHP:

     $subject        = 'New application for'; 
   • Dòng 97 -98: Địa chỉ gmail để sử dụng SMTP của google. bạn có thể sử dụng SMTP khác.
     
     PHP:

     $mail->Username = "zzzzzzzzzzzzzzzzzzzzzzzzzz@gmail.com";  // SMTP username
$mail->Password = "zzzzzzzzzzzzzzzzzzzzzzzzzz"; // SMTP password
   • Dòng 100-101:Nếu bạn sử dụng SMTP khác google thì chỉnh chỗ này lại tương ứng
     
     PHP:

     $mail->SMTPSecure = 'ssl';
$mail->Port = 465;
   • Dòng 103-104: Tên hiển thị của mail. Bạn có thể tuỳ chỉnh lung tung ko ảnh hưởng j cả
     
     PHP:

     $mail->From     = "no-reply@vietdesigner.net";
$mail->FromName = "Banbaonylong";

Lưu ý

• Vì code và hướng dẫn chỉnhsửa wá dài, nên bạn nào có thắc mắc cứ hỏi bên dưới . Trong lúc chỉnh sửa để làm tut thì mình có comment dưới những dòng code wan trọng.
• Code này chỉ sử dụng những hàm cơ bản nên gắn lên wordpress hay framework php khác đều ổn.
  
• Nếu gửi ajax và mail thành công mà web trả về 500 Error thì bạn coi lại config.
• Bạn nào có thể "rút code" hay hơn thì cũng chia sẻ nhé .

Link download source: http://goo.gl/r6gyS6
Link demo: http://doilafuka.com/ajaxmail/
(Dĩ nhiên demo hình hài thôi, chứ các bạn gửi mail flood hộp mail mất)