Ilmu Dasar PHP, JQuery, HTML, AJAX Dll: Form contact II

ini lanjutan dari posting sebelumnya yang saya upload di blog ini, script di bawah ini hanya modifan agar tampilan lebih menarik ok... langsung aja ke TKP....

kontak.php
<?php
   session_start();

   $_SESSION['n1'] = read(1,20);
   $_SESSION['n2'] = read(1,20);
   $_SESSION['hasil'] = $_SESSION['n1']+$_SESSION['n2'];
?>
<html>
<head>
<script src="jquery-1.4.js"></script> 
<link rel="stylesheet" href="main.css" type="text/css"/>
<script>
$(document).ready(function(){
$("#kirim").click(function(){
   var nama = $('#nama').val();
   var email = $('#email').val();
   var subjek = $('#subjek').val();
   var pesan = $('#pesan').val();
               var captcha = $("#captcha").val();
               var error = false;

              if(nama.length == 0){
   var error = true;
   $('#nama_error').fadeIn(500);
              }else{
   $('#nama_error').fadeOut(500);
              }
              if(email.length == 0 || email.indexOf("@") == "-1" || email.indexOf(".")== "-1"){
   var error = true;
   $('#email_error').fadeIn(500);
              }else{
$('#email_error').fadeOut(500);
              }
              if(subjek.length == 0){
var error = true;
                    $('#subjek_error').fadeIn(500);
              }else{
   $('#subjek_error').fadeOut(500);
              }
if(pesan.length == 0){
   var error = true;
   $('#pesan_error').fadeIn(500);
              }else{
   $('#pesan_error').fadeOut(500);
              }
              if(captcha.length == 0){
   var error = true;
   $('#captcha_error').fadeIn(500);
             }else{
$(''#captcha_error).fadeOut(500);
             }
      // kalau sudah tidak ada yang erro (false), artinya semua inputan sudah di isi dengan benar
            if(error == false){
   //non-aktifkan tombol submit untuk meinimalisir spam ubah text pada tombol menjadi loading
   $(''#kirim).attr({'disable': 'true','value':'Loading...'});

$.ajax({
type: "POST",
url : "kirim_kontak.php",
data: "nama="+nama+"&email="+email+ "&subjek="+subjek+
"&pesan="+pesan+"&captcha="+captcha,
success: function(data){
   // setelah ajax request sukses, cek data/text yang dikirimkan dari file kirim_kontak.php
if(data == 'berhasil'){
   $('#tombol_submit').remove();
   $('#mail_sukses').fadeIn(500);
                  }else{
$('#mail_gagal').html(data).fadeIn(500);
$('#kirim').removeAttr('disabled').attr('value','kirim');
                  }
                      }
              });
}
// batalkan pengiriman melalui form standar (false)
// karna akan dikirimkan via ajax request
        return false;
          });
    });

</script>
</head>
<body>
<div id='contact_form_holder'>
<form>
     <h2><img id='logo' scr='images/mail.png'/>Hubungi Kami</h2>
     <p>Nama :
<div id='nama_error' class='error'>
<img src='images/error.png'/>Anda belum mengisikan Nama. </div>
            <div><input type="text" name="nama" id="nama"/></div></p>
     <p>Email :
   <div id='email_error' class='error'>
   <img src='images/error.png'/>Anda belum mengisikan Email.
     </div>
     <div><input type="text" name="email" id="email"/></div></p>
     <p>Subjek :
   <div id='subjek_error' class='error'>
<img src='images/error.png'/>Anda belum mengisikan Subjek.
     </div>
     <div><input type="text" name="subjek" id="subjek"/></div></p>
      <p>Pesan :
<div id='pesan_error' class='error'>
<img src='images/error.png'/>Anda belum mengisikan Pesan.
      </div>
     <div><textarea type="text" name="pesan" id="pesan"/></div></p>
<p><?php echo "$_SESSION['n1']+$_SESSION['n2']=";?></p>
       <div id='captcha_error' class='error'>
   <img src='images/error.png'/>Anda belum mengisikan Captcha.
       </div>
<div><input type="text" name="captcha" id="captcha"/></div>
<div id='mail_sukses' class='sukses'>
   <img src='images/success.png'/> Terimakasih. Email Anda berhasil di kirim
      </div>
      <div id='mail_gagal' class='error'>
      </div>
     <p id='tobol_gagal'><input type="submit" id="kirim" value="Kirim"/></p>
</form>
</body>
</html>

file pertama selesai sekarang kita membuat file2 agar program yang kita buat menjadi sempurna...

buat script dengan nama kirim_kontak.php
<?php
     session_start();

     if(!empty($_POST['captcha'])){
        if($_POST['captcha'] == $_SESSION['hasil']){
$email_to = "rudi0207@gmail.com" // email pemilik webside ini bisa di ganti dengan email agan
$nama = $_POST['nama'];
$email = $_POST['email'] ;
    $subjek = $_POST['subjek'];
    $pesan = $_POST['pesan'];

//webmail seperti gmail, yahoo, dll memerlukan dua headers yaitu dari siapa from dan dibalas ke siapa replay //to agar email tidak dimasukan ke bagian spam

$headers = "from: $email\r\n";
$headers .= "Replay-to: $email\r\n";

// mail() adalah fungsi di php untuk mengirimkan email
     if(mail($email_to, $subjek, $pesan, $headers)){
// kirim tesk berhasil ke ajax bahwa eail berhasil di kirim
     echo "Pesan berhasil di Kirim";
     }else{
       echo "Pesan gagal di kirim";
     }
   }else{
echo "Kode captcha yang anda masukkan salah";
   }
}else{
      echo "Anda belum memasukan kode captcha";
}
?>

script cssnya mulai kita ketikkan nga pake lama" dah nih dia langsung ke TKP:
nama script nya main.css

#contact_form_holder{
   font-family: 'Verdana';
   font-size: 12px;
   width: 300px;
}
#contact_form_holder input, #contact_form_holder textarea {
width: 100%;
font-family: inherit;
font-size:12px;
padding:5px;
}
#contact_form_holder textarea{ height:100px;}
#kirim {
width:100px !important;
font-size: 12px;
border:1px solder black;
cursor:pointer;
cursor:hand;
}
#tombol_submit{text-align:right;}
.error{
display: none;
padding:10px;
color: #D8000C;
font-size:10px;
background-color: #FFBABA;
}
.sukses{
   display: none;
   padding: 10px;
   color: #044406;
   font-size:10px;
   background-color: #B7FBB9;
}
#logo{vertical-align: middle;}
.error img {vertical-align:top;}

selesai juga dah semoga bermanfaat ya..

Ilmu Dasar PHP, JQuery, HTML, AJAX Dll

Minggu, 23 September 2012

Form contact II

Tidak ada komentar:

Posting Komentar