Pada artikel Day 1 beberapa hari yang lalu, kita telah mempersiapkan konfigurasi database, dan persiapan class PHPMailer. Untuk artikel Day 2, penulis akan mencoba membuat tampilan form dan juga sistem Mailer secara sederhana (belum termasuk aktivasi).
Sebelum memulai tutorial, penulis mengingatkan untuk mengikuti tutorial sebelumnya disini, agar pembaca dapat mengikuti langkah demi langkah secara beruntun. Berikut adalah lanjutannya :
Contents
File yang diperlukan
File yang diperlukanPada hari pertama (Day 1), kita telah memasukkan library PHPMailer ke dalam sistem root aplikasi web kita. Kali ini kita akan membuat beberapa file yang nantinya akan mendukung kerja dari sistem. File yang telah dibuat dapat langsung diupload ke server hosting melalui FTP dan mengeditnya menggunakan editor.
File yang Diperlukan
Berikut adalah file yang dibutuhkan :
- Index.php, Untuk membuat tampilan utama form pendaftaran, terdiri dari 2 input yaitu input nama dan email.
- Config.php, File yang dipergunakan untuk konfigurasi sistem aplikasi dengan database MySQL
- Mail.php, Inilah file yang akan memproses hasil inputan form dan memasukkannya ke database. File ini juga berfungsi sebagai controller pengirim email dengan menginclude library yang telah kita taruh di root sistem aplikasi
- Confirm.php, file yang akan dipanggil saat user melakukan klik link aktivasi yang dikirim di email pendaftar. (Tutorial Day 3)
Membuat Halaman Index
Membuat Halaman IndexHalaman index kita merupakan halaman utama form registrasi. Form ini terdiri dari 2 input yakni input nama dan input email beserta tombol submit. Sebenarnya pembaca bisa membuat sendiri tampilan maupun source form di bagian ini sesuai kehendak. Berikut adalah script index.php yang bisa pembaca tulis :
<html>
<head>
<meta name="viewport" content="width=device-width">
<title>PHP Mailer by Mkhuda</title>
<meta name="description" content="PHP Mailer by Mkhuda">
<link href="http://fonts.googleapis.com/css?family=Open+Sans+Condensed:700,300" rel="stylesheet" type="text/css">
<link href="style.css" type="tex/css" rel="stylesheet" media="all">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
</head>
<body>
<div id="form">
<form method="post" action="mail.php" class="form-horizontal">
<label class="detik">Nama Anda</label><br>
<input class="input" type="text" name="nama" placeholder="Masukkan Nama Angka"><br>
<label class="detik">Nama Email Anda</label><br>
<input class="input" type="text" name="email" placeholder="Masukkan Email Anda"><br>
<button type="submit" name="submit" class="btn">Submit</button>
</form>
</div>
<div id="mk-link">
<a class="link" href="http://mkhuda.com" title="Mkhuda Blog">Back to Site</a>
</div>
</body>
</html>
CSS bisa pembaca sesuaikan sendiri.
File Konfigurasi Database
File Konfigurasi DatabaseConfig.php bertugas untuk menjembatani aplikasi web mailer kita dengan database MySQL yang sebelumnya telah dibuat pada Day 1. Seperti script konfigurasi pada artikel saya yang lain, berikut adalah script config.php yang bisa penulis pakai :
<?php
$host="localhost";
$user="nama_user_anda";
$password="password_user";
$koneksi=mysql_connect($host,$user,$password) or
die("Gagal Cuy ! :D");
mysql_select_db("nama_database_anda");
?>
Silahkan sesuaikan variabel $user dan $password beserta database sesuai konfigurasi database yang telah pembaca buat pada masing-masing phpmyadmin. Jangan sampai salah untuk konfigurasi ini.
Membuat Sistem Utama
Membuat Sistem UtamaPada script index.php, kita telah merujuk action ke file mail.php. File mail.php inilah yang menjadi kunci dan kontrol email sistem aplikasi kita. Terdiri dari beberapa Class berbasis OOP yang merupakan default dari PhpMailer. Berikut adalah script, beserta penjelasannya :
<?php
error_reporting(0);
function rand_string( $length ) {
$chars = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
$size = strlen( $chars );
for( $i = 0; $i < $length; $i++ ) {
$str .= $chars[ rand( 0, $size - 1 ) ];
}
return $str;
}
include 'config.php';
$nama = $_POST['nama'];
$email = $_POST['email'];
$id = rand_string( 10 );
if (!isset($nama)) {
echo "Lengkap form";
}
elseif (!isset($email)) {
echo "Lengkapi form";
}
else {
// cek apakah email sudah terdaftar
$query = "SELECT email FROM user WHERE email='$email'";
$find = mysql_query($query);
if ($find && mysql_num_rows($find) > 0) {
echo "user telah terdaftar";
}
else {
$add = "insert into user set id='$id', name='$nama', email='$email', confirm='no'";
$set = mysql_query($add);
if ($set) {
} else {
}
require_once('library/class.phpmailer.php'); //menginclude librari phpmailer
$mail = new PHPMailer();
$body =
"<body style='margin: 10px;'>
<div style='width: 640px; font-family: Helvetica, sans-serif; font-size: 13px; padding:10px; line-height:150%; border:#eaeaea solid 10px;'>
<br>
<strong>Terima Kasih Telah Mendaftar</strong><br>
<b>Nama Anda : </b>".$nama."<br>
<b>Email : </b>".$email."<br>
<br>
</div>
</body>";
$body = eregi_replace("[]",'',$body);
$mail->IsSMTP(); // menggunakan SMTP
$mail->SMTPDebug = 1; // mengaktifkan debug SMTP
$mail->SMTPAuth = true; // mengaktifkan Autentifikasi SMTP
$mail->Host = '49.xxx.xxx.xxx'; // Gunakan Ip Shared Address Hosting Anda
$mail->Port = 25; // post gunakan port 25
$mail->Username = "hello@mkhuda.com"; // username email akun
$mail->Password = "passwordanda"; // password akun
$mail->SetFrom('hello@mkhuda.com', 'Hello Mkhuda');
$mail->Subject = "Hello";
$mail->MsgHTML($body);
$address = $email; //email tujuan
$mail->AddAddress($address, "Hello (Reciever name)");
if(!$mail->Send()) {
echo "Oops, Mailer Error: " . $mail->ErrorInfo;
} else {
echo "Mail Sukses";
}
}
}
?>
Perlu diperhatikan. Sebelum pembaca menulis script untuk mail.php di atas, sebaiknya pembaca membuat terlebih dahulu akun email yang akan difungsikan untuk konfigurasi SMTP pada class phpMailer kita. Port yang digunakan umumnya menggunakan Port 25, pembaca bisa mengikuti tutorial ini untuk melihat detail konfigurasi SMTP email pada hosting.
Mail.php diatas juga telah penulis lengkapi dengan fungsi untuk membuat id secara otomatis bernama rand_string() (lihat baris 4 sampai 13). Fungsi rand_string dimanfaatkan oleh variabel $id (lihat baris 18).
File diatas juga telah dilengkapi dengan pengecekan apakah user yang dipakai email sudah terdaftar. Jika sudah terdaftar, maka email tidak dapat dipakai untuk melakukan pendaftaran kembali.
Tambahan baru, bilamana ada masalah dengan port smtp di hosting, coba gunakan Ip shared Address untuk hosting Anda pada bagian $mail->Host, dan untuk $mail->Port tetap gunakan port 25
Uji Coba
Uji CobaJika pembaca sudah mengikuti tutorial di atas dengan baik, silahkan melakukan uji coba dengan mengakses aplikasi sekaligus mengisi form pendaftaran. Pastikan juga email yang kita registrasikan adalah email aktif, untuk mengecek apakah sistem PHP Mailer sukses mengirim email ke pendaftar.
Berikut adalah screenshot hasil uji coba dan notifikasi email yang diterima :
Pengisian Form
Email Notifikasi PHPMailer
Cek Database PhpMyAdmin
Selamat mencoba !
Pada tutorial selanjutnya (Day 3), penulis akan mengaplikasikan sistem aktivasi agar user dapat melakukan aktivasi melalui email yang dikirim oleh sistem.
