Skip to main content

Navigation

n1colius's friends

LOGIN

Who's new

DROPBOX

FREE 2 GB AND MORE

Home

[Tutorial] Kirim Email dengan Google SMTP di CodeIgniter melalui AJAX

December 15, 2010 by n1colius

n1colius's picture

Tutorial dari blog saya, semoga bisa berguna buat sodara - sodari di CodeIgniter Indonesia. :)

Setelah 2 minggu absen, akhirnya saya menyempatkan diri untuk bisa kembali menulis artikel lagi. hehe walaupun emang gak sibuk - sibuk amat cuman kadang rasanya sehari itu kok lewatnya cepat sekali. Tutorial kali ini adalah mengenai mengirim email dengan protocol SMTP (Simple Mail Transfer Protocol). Untuk tutorial ini saya akan memakai SMTP nya Google. Tutorial ini akan menggunakan CodeIgniter dan akan menggunakan AJAX untuk proses pengiriman emailnya. oh ya, saya akan menggunakan class dari PHPMailer untuk class emailnya nanti yg saya integrasikan dengan CodeIgniter.

From nikolius blog
Jika belum mempunyai framework CodeIgniter, kalien bisa download di web nya di sini. Untuk Class PHPMailernya sendiri ada saya sertakan di Source Code nya yg bisa kalian download nantinya. ok, tanpa basa basi lagi baru kita mulai.

Pertama Install dulu Framework CodeIgniternya di localhost. setelah itu lakukan config2 dasar yang diperlukan. Jika bingung bagaimana cara menginstall CodeIgniter maka bisa dilihat di web nya codeigniter ataupun di user guide nya ataupun bisa langsung install dari source codenya akan saya berikan untuk didownload kalien semua nanti. Jika kalian bingung, bisa langsung install dengan source code yg saya kasih dan di edit confignya sesuai dengan settingan localhost kalian, jika bingung langsung bisa tanya di komentar pada tutorial ini, dan saya akan menjelaskan kepada kalian semua.

Setelah download source code dari saya, anda bisa extract ke folder www kalian dan strukturnya kira2 akan seperti gambar dibawah ini
From nikolius blog

Jika proses install lancar2 saja, maka kalian bisa langsung mengakses aplikasi ini melalui alamat URL http://localhost/ci-ajax-smtpmail/. anda harus mengedit config di class email phpmailernya terlebih dahulu untuk bisa mencoba mengirimkan email. file tersebut berada di folder /www/ci-ajax-smtpmail/application/plugins/phpmailer_pi.php kalien bisa ubah confignya seperti dibawah ini

$mail->Username   = "[email protected]";  //alamat email kalian yg dipakai untuk mengirim email
$mail->Password   = "isikanpasswordkalian";            // password emailnya

Setelah itu kalian bisa langsung mencoba mengirimkan email ke email kalian sendiri untuk mencoba apakah sukses atau tidak. Jika kirim emailnya gagal, cek kembali apakah alamat tujuan sudah benar dan password untuk alamat email yg dipakai untuk mengirimkan email sudah benar atau belum. Untuk bagian dibawah ini akan saya jelaskan secara garis besar bagaimana cara kerja modul ini

Aplikasi ini sudah di set di confignya untuk langsung meload controller KirimEmail secara default dihalaman utama atau index nya. berikut adalah controller KirimEmail yg terletak di /www/ci-ajax-smtpmail/application/controllers/KirimEmail.php

<?php
class KirimEmail extends Controller {
 
	function KirimEmail(){
		parent::Controller();	
	}
 
	function index(){		
		$this->load->view('template');
	}
 
	function ajaxKirimEmail(){
		$isAjax = $this->input->post('isAjax');
 
		if($isAjax == '1'){			
			//load class phpmailer
			$this->load->plugin('phpmailer');
 
			$emailFrom = $this->input->post('emailKirim');
			$namaFrom = $this->input->post('namaKirim');
			$toEmail = $this->input->post('emailTerima');
			$toName = $this->input->post('namaTerima');
			$subjectMsg = $this->input->post('subjekEmail');
			$msg = $this->input->post('pesanEmail');
			$kirim = send_email_smtp($emailFrom,$namaFrom,$toEmail,$toName,$subjectMsg,$msg);
 
			if($kirim === true) echo true; else echo false;			
		}else{			
			echo false;
		}
		exit;				
	}	
}
?>

dari controller diatas bisa dilihat bahwa fungsi yang akan dijalankan pertama kali adalah function index() dan didalam fungsi itu akan menjalankan load view tempatle yg berada di /www/ci-ajax-smtpmail/application/views/template.php yg isinya seperti ini

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
	<meta name="author" content="Nikolius" />
	<meta name="Dezscription" content="Demo Kirim Email lewat SMTP di CodeIgniter dengan Ajax" />
	<meta name="Keywords" content="smtp, codeigniter, phpmailer, php, css, ajax,google smtp" />	
	<title>Demo Kirim Email lewat SMTP di CodeIgniter dengan Ajax</title>
	<link rel="stylesheet" href="<?php echo base_url();?>css/style.css" type="text/css" />
	<zscript type="text/javazscript" src="<?php echo base_url();?>js/jquery-1.4.2.min.js" /></zscript>
	<zscript type="text/javazscript" src="<?php echo base_url();?>js/jquery.validate.js" /></zscript>
	<zscript type="text/javazscript">
		$(document).ready(function(){
			$("#formEmail").validate({
				submitHandler: function(form) {
					//ajax kirim email
 
					$("img#imgLoading").show();
					var dataForm = $("#formEmail").serialize();
					$.ajax({
						type: 'POST',
						url: '<?php echo base_url();?>KirimEmail/ajaxKirimEmail',
						data: dataForm,
						success: function(data) {
							if(data){
								$("div#ajaxMsg").html('Email telah terkirim').show(500);
								$(':input')
									 .not(':button, :submit, :reset, :hidden')
									 .val('')
									 .removeAttr('checked')
									 .removeAttr('selected');		                        
							}else {
								$("div#ajaxMsg").html('Email gagal terkirim').show(500);
							}
 
							$("img#imgLoading").hide();		
						}
					});
					return false;
				}
			});		
		});
	</zscript>					
</head>
<body>
<div id="container">
	<h1>Demo Kirim Email lewat SMTP di CodeIgniter dengan Ajax</h1>
	<form method="post" action="#" id="formEmail">
	<table id="tabelForm" cellpadding="4" border="0" width="550">
		<tr>
			<td width="100" align="left">Nama Pengirim *</td>
			<td>
				<input type="text" size="40" name="namaKirim" class="required" />				
			</td>
		</tr>
		<tr>
			<td width="100" align="left">Email Pengirim *</td>
			<td>
				<input type="text" size="25" name="emailKirim" class="required email" />				
			</td>
		</tr>
		<tr>
			<td width="100" align="left">Nama Penerima *</td>
			<td>
				<input type="text" size="40" name="namaTerima" class="required" />				
			</td>
		</tr>
		<tr>
			<td width="100" align="left">Email Penerima *</td>
			<td>
				<input type="text" size="25" name="emailTerima" class="required email" />				
			</td>
		</tr>
		<tr>
			<td width="100" align="left">Subjek Email *</td>
			<td>
				<input type="text" size="55" name="subjekEmail" class="required" />				
			</td>
		</tr>
		<tr>
			<td width="100" align="left">Pesan Email *</td>
			<td>
				<textarea cols="50" rows="5" name="pesanEmail" class="required"></textarea>				
			</td>
		</tr>
		<tr>
			<td colspan="2" align="center">
				<input type="hidden" name="isAjax" value="1" />
				<input type="submit" class="button" name="submit" value="Kirim Email" />
				<img src="<?php echo base_url();?>images/loading.gif" id="imgLoading" style="display:none;" width="18" />
			</td>
		</tr>
		<tr>
			<td colspan="2">
			<div id="ajaxMsg"></div>
			<br />	
			* Isikan nama dan alamat email anda di textbox Penerima untuk bisa mendapatkan email yg terkirim melalui form ini. Sebagai test aja kalau ini memang bener2 jalan kirim emailnya. :)			
			</td>
		</tr>
	</table>	
	</form>	
	<div id="copyright" align="right">
		Copyright 2010 <a href="http://nikolius-luiso.web.id" title="">Nikolius Luiso</a>
	</div>
	<br />
</div>
</body>
</html>

Bisa dilihat pada file template.php diatas ini bahwa pertama akan meload file2 yg diperlukan di form pengiriman email yang saya buat yaitu library jquery.js yang akan saya gunakan untuk melakukan pemanggilan ajax dan juga pluin validasi jquery di file jquery.validate.js selain itu juga file style.css yg diperlukan untuk halaman kirim form email kita ini.

Perlu diketahui bahwa form ini sudah saya integrasikan dengan plugin validate dengan jquery. jika bingung tentang penggunaannya bisa melihat tutorial saya sebelumnya Form Validasi dengan menggunakan Plugin jQuery Validation + Ajax. Jadi Ketika tombol kirim email ditekan maka program akan melakukan pengecekan validasi dan jika semua sudah memenuhi syarat makan akan dijalankan zscript jquery berikut

$("#formEmail").validate({
	submitHandler: function(form) {
		//ajax kirim email		
		$("img#imgLoading").show(); //munculkan image loading
		var dataForm = $("#formEmail").serialize(); //kirim data2 $_POST yg terdapat pada form dengan id=formEmail ke variabel dataForm
		$.ajax({
			type: 'POST',
			url: '<?php echo base_url();?>KirimEmail/ajaxKirimEmail', //panggilan ajax ke controller KirimEmail, function ajaxKirimEmail
			data: dataForm,
			success: function(data) {
				if(data){
                                        //jika panggilan ajax sukses
					$("div#ajaxMsg").html('Email telah terkirim').show(500); //tampilkan pesen kirim email sukses
                                        //reset form input
					$(':input')
						 .not(':button, :submit, :reset, :hidden')
						 .val('')
						 .removeAttr('checked')
						 .removeAttr('selected');		                        
				}else {
                                        //tampilkan pesen email gagal terkirim
					$("div#ajaxMsg").html('Email gagal terkirim').show(500);
				}
				//hilangkan image loading
				$("img#imgLoading").hide();		
			}
		});
		return false;
	}
});

Berikut adalah fungsi ajaxKirimEmail yg berada di controller KirimEmail

function ajaxKirimEmail(){
	$isAjax = $this->input->post('isAjax');
 
	if($isAjax == '1'){ //jika merupakan panggilan dari formkita kirimemail kita tadi			
		//load class phpmailer
		$this->load->plugin('phpmailer'); //load plugin class phpmailer 
 
		$emailFrom = $this->input->post('emailKirim');
		$namaFrom = $this->input->post('namaKirim');
		$toEmail = $this->input->post('emailTerima');
		$toName = $this->input->post('namaTerima');
		$subjectMsg = $this->input->post('subjekEmail');
		$msg = $this->input->post('pesanEmail');
		$kirim = send_email_smtp($emailFrom,$namaFrom,$toEmail,$toName,$subjectMsg,$msg); //panggil fungsi kirim email
 
		if($kirim === true) echo true; else echo false;			
	}else{			
		echo false;
	}
	exit;				
}

ketika kita memanggil plugin phpmailer maka yg djalankan pertama kali adalah merequire coding yg ada di file berikut /www/ci-ajax-smtpmail/application/plugins/phpmailer_pi.php

<?php if (!defined('BASEPATH')) exit('No direct zscript access allowed');
 
function send_email_smtp($fromEmail,$fromName,$toEmail,$toName,$subject,$msg){
	require_once("phpmailer/class.phpmailer.php"); //require class phpmailer
	$mail             = new PHPMailer();
	$mail->IsSMTP(); // telling the class to use SMTP
 
	$mail->SMTPDebug  = 1;                     // enables SMTP debug information (for testing)
	                                           // 1 = errors and messages
	                                           // 2 = messages only
	$mail->SMTPAuth   = true;                  // enable SMTP authentication
	$mail->SMTPSecure = "tls";                 // sets the prefix to the servier
	$mail->Host       = "smtp.gmail.com";      // sets GMAIL as the SMTP server
	$mail->Port       = "587";                   // set the SMTP port for the GMAIL server
	$mail->Username   = "[email protected]";  // GMAIL username
	$mail->Password   = "isikanpasswordanda";            // GMAIL password
 
	$mail->SetFrom($fromEmail, $fromName);
	$mail->AddReplyTo($fromEmail, $fromName);
	$mail->Subject    = $subject;	
	//$mail->AltBody    = "To view the message, please use an HTML compatible email viewer!"; // optional, comment out and test	
	$mail->MsgHTML($msg); //kirimkan pesan email dalam bentuk format HTML
	$mail->AddAddress($toEmail, $toName);		
	if (!$mail->Send()){
		return false;
	}
	else{
		return true;
	}
}
?>

Proses pengiriman email terjadi pada fungsi diatas persisnya didalam class phpmailernya. anda cuman cukup menyediakan config yang benar saja untuk bisa mengirim emailnya.

Jadi begitu lah garis besar cara kirim email dengan SMTP di CodeIgniter. Untuk lebih jelas bisa mempelajari lebih dalam dengan langsung melihat source codenya yang bisa kalian download. Jujur aja dengan cara itu anda akan jauh lebih cepat paham, karena saya sendiri biasanya begitu. kalo cuman teorinya doank kadang tidak bisa ngerti2 hehe. Seperti biasa selalu tuliskan komentar2 anda jika anda merasa terbantu dengan tutorial saya ini atau bagi yang mau bertanya juga jangan segan2 untuk berkomentar. :)

Untuk mencoba demo online bisa melalui link ini
View Demo

Untuk mendownload source codenya bisa melalui link ini
Download Source Code

Untuk berkunjung ke Blog Pribadi saya bisa melalui link ini
Blog Nikolius Luiso

Comments

thanks

February 4, 2011 by saveyou, 26 weeks 1 hour ago
Comment: 7589

saveyou's picture

Thanks gan dah gw coba dan berhasilll :D :D :D (dora modeon)

sedikit koreksi, di phpmailer_pi.php

$mail->SMTPSecure = "tls";

harusnya gini

$mail->SMTPSecure = "TLS"; (huruf gede semua)

sama2 gan. :) ditempatku pake

February 7, 2011 by n1colius, 25 weeks 4 days ago
Comment: 7600

n1colius's picture

sama2 gan. :)
ditempatku pake huruf kecil semua juga jalan soalnya.

module mod_rewrite htaccess dan openssl di php.ini

December 20, 2010 by anggunsuminaring, 32 weeks 4 days ago
Comment: 7484

anggunsuminaring's picture

Mas, module mod_rewrite htaccess dan openssl di php.ini sudah saya aktifkan tetapi meih error seperti diatas. sudah saya cek di php_info(). mohon beri penjelasannya lebih lengkap, agar tidak menjadikan postingan di atas menjadi mubazir....

kok masih error mas??

December 17, 2010 by anggunsuminaring, 33 weeks 4 hours ago
Comment: 7476

anggunsuminaring's picture

scrip dah tak download tapi muncul error kayak gini :

Warning: require(C:\xampp\htdocs\ci-ajax-smtpmail/system/C:/xampp/htdocsci-ajax-smtpmail/application/config/constants.php) [function.require]: failed to open stream: Invalid argument in C:\xampp\htdocs\ci-ajax-smtpmail\system\codeigniter\CodeIgniter.php on line 52

Fatal error: require() [function.require]: Failed opening required 'C:\xampp\htdocs\ci-ajax-smtpmail/system/C:/xampp/htdocsci-ajax-smtpmail/application/config/constants.php' (include_path='.;C:\xampp\php\pear\') in C:\xampp\htdocs\ci-ajax-smtpmail\system\codeigniter\CodeIgniter.php on line 52

yang perlu dipertanyakan

December 18, 2010 by n1colius, 32 weeks 6 days ago
Comment: 7477

n1colius's picture

yang perlu dipertanyakan apakah installan xampp anda untuk module mod_rewrite htaccess nya sudah di enabled kan? oh iya sebagai tambahan informasi untuk bisa mengirim email dilocalhost anda, settingan openssl di php.ini anda juga harus dienabled kan.

error tersebut muncul karena installasi codeigniter anda salah, dia tidak bisa menemukan folder system ataupun application codeigniternya. mungkin anda bisa coba modif2 di file index.php nya. :)

modif index.php

December 20, 2010 by male.45, 32 weeks 4 days ago
Comment: 7483

male.45's picture

mas saya masih belajar ni jadi maaf saya bertanya gimana cara modif index.php nya mas.

soalnya ini programnya saya jalankan di localhost juga error kayak yang di tuturkan anggun di atas.

padahal XAMPP aku untuk menjalankan program web lain bisa kok mas.. normal-normal aja..

mohon bantuannya mas. terimakasih

maksudnya modif2 di index.php

December 21, 2010 by n1colius, 32 weeks 3 days ago
Comment: 7485

n1colius's picture

maksudnya modif2 di index.php nya tu cuman mastiin aja kalau define APPPATH sama BASEPATH nya mengarah ke folder application CI dan folder CI u.

di contoh demonya menggunakan installan CI yg menghilangkan url index.php dengan .htaccess jadi syaratnya webservernya mod_rewrite harus jalan.

dan juga folder application nya saya tarik keluar jadi selevel dengan folder system. kalau masih pada kesulitan bisa mulai dengan install CI Fresh aja habis itu contohin config2 yg didownload dari source code demo ini.

selamat mencoba. :)

Premium Drupal Themes by Adaptivethemes