Kita sekarang telah membuat halaman form dan memperindah tampilannya. Langkah berikutnya adalah untuk membangun script PHP singkat untuk mengirim pesan email. Script ini akan berada pada server web. Ketika pengunjung menyerahkan form, data form dikirim ke script PHP, yang kemudian mengirimkan email dan m...

Membuat Form Kontak yang Indah dan Atraktif dengan AJAX [Part 3]

Kita sekarang telah membuat halaman form dan memperindah tampilannya. Langkah berikutnya adalah untuk membangun script PHP singkat untuk mengirim pesan email. Script ini akan berada pada server web. Ketika pengunjung menyerahkan form, data form dikirim ke script PHP, yang kemudian mengirimkan email dan mengembalikan respon yang menunjukkan apakah email tersebut berhasil dikirim atau tidak.

Berikut script PHP - call processForm.php, ketik lalu simpan  dalam folder yang sama seperti halaman form yang kita buat pada tutorial sebelumnya:

<?php
 
// Define some constants
define( "RECIPIENT_NAME", "John Smith" );
define( "RECIPIENT_EMAIL", "john@example.com" );
define( "EMAIL_SUBJECT", "Visitor Message" );
 
// Read the form values
$success = false;
$senderName = isset( $_POST['senderName'] ) ? preg_replace( "/[^\.\-\' a-zA-Z0-9]/", "", $_POST['senderName'] ) : "";
$senderEmail = isset( $_POST['senderEmail'] ) ? preg_replace( "/[^\.\-\_\@a-zA-Z0-9]/", "", $_POST['senderEmail'] ) : "";
$message = isset( $_POST['message'] ) ? preg_replace( "/(From:|To:|BCC:|CC:|Subject:|Content-Type:)/", "", $_POST['message'] ) : "";
 
// If all values exist, send the email
if ( $senderName && $senderEmail && $message ) {
  $recipient = RECIPIENT_NAME . " <" . RECIPIENT_EMAIL . ">";
  $headers = "From: " . $senderName . " <" . $senderEmail . ">";
  $success = mail( $recipient, EMAIL_SUBJECT, $message, $headers );
}
 
// Return an appropriate response to the browser
if ( isset($_GET["ajax"]) ) {
  echo $success ? "success" : "error";
} else {
?>
<html>
  <head>
    <title>Thanks!</title>
  </head>
  <body>
  <?php if ( $success ) echo "<p>Thanks for sending your message! We'll get back to you shortly.</p>" ?>
  <?php if ( !$success ) echo "<p>There was a problem sending your message. Please try again.</p>" ?>
  <p>Click your browser's Back button to return to the page.</p>
  </body>
</html>
<?php
}
?>

 

Berikut keterangan Script PHP di atas:

1. Mnentukan beberapa konstanta

Pertama kita mendefinisikan beberapa pilihan konfigurasi untuk nama dan alamat email dari orang yang akan menerima pesan email. (Gantilah dengan nama anda sendiri dan alamat email anda.) Kita juga menetapkan subjek untuk pesan.

2. Membaca nilai-nilai form

Selanjutnya kita memeriksa 3 kolom form yang kita buat, senderName, senderEmail and message, data form diposting. Untuk setiap bidang, kita periksa apakah itu ada. Jika tidak maka kita melewati nilai melalui ekspresi reguler untuk menghilangkan karakter yang berpotensi berbahaya yang spammer coba untuk gunakan, dan menyimpan hasilnya dalam variabel. Jika tidak ada maka kita mengatur variabel untuk nilai kosong.

3. Jika semua nilai-nilai ada, maka kirim email

Jika 3 nilai pada fields semua berisi data maka kita mengirim email. Pertama kita membangun string penerima dari nama penerima dan alamat email. Kemudian kita tambahkan "From:" header ke pesan menggunakan nama dan alamat email yang pengunjung masuk dalam form. Ini adalah "From:" nilai bahwa penerima akan melihat dalam program email mereka. Terakhir, kita menggunakan PHP mail () funnction untuk mengirim pesan email, menyimpan nilai kembali di variable $ sukses . mail () mengembalikan nilai true jika berhasil mengirim email, atau false jika tidak.)

4. Kembali respon yang tepat untuk browser

Setelah kita mencoba untuk mengirim email, kita mengirim "success" atau "error" pesan kembali ke browser yang sesuai. Jika URL request mengandung  parameter  "ajax" maka kita tahu form itu disampaikan melalui Ajax menggunakan kode JavaScript kita, jadi kita hanya mengembalikan nilai "success" atau "error" dengan JavaScript, yang kemudian akan menampilkan pesan yang sesuai dengan pengunjung. Namun, jika form itu disampaikan tanpa menggunakan Ajax maka pengunjung harus mematikan JavaScript pada browser mereka. Dalam situasi ini, kita menampilkan pesan error lebih bermanfaat dalam browser, dengan petunjuk kepada pengunjung untuk menggunakan tombol Back untuk kembali ke halaman.

Pada Tutorial Selanjutnya kita akan memasukan JQuery library agar tampilan form lebih atraktif.

Sampai Jumpa di Tutorial selanjutnya.               


About Author

Sendy PK

Saya adalah Programmer yang memiliki impian untuk menguasai dunia kunjungi situs pribadi saya di www.spk.my.id dan Online Shop saya di www.spkshop.web.id


Comment & Discussions

    Please LOGIN before if you want to give the comment.