Tutorial Submit Form berbasis Ajax

Kebanyakan tutorial PHP form di website ini menggunakan teknik submit biasa. Kali ini, kita akan membahas tkenik submit form berbasis Ajax dengan jQuery. Kelebihan teknik ini adalah lebih cepat dan terasa nyaman dilihat dari sisi user.  Untuk tutorial kali ini, kita akan membuat halaman kritik saran dengan kolom email dan isi pesan. Tampilan halamannya seperti di screenshoot.

tampilan form

tampilan form

Saat user menekan tombol submit, halaman mengirim data dibelakang layar dan jika sukses, maka akan muncul pesan “Pesan telah kami Terima, Terimakasih!”.

Rancangan Tabel

 

CREATE TABLE IF NOT EXISTS `kritik` (
  `idkritik` int(11) NOT NULL AUTO_INCREMENT,
  `email` varchar(50) NOT NULL,
  `isi` varchar(250) NOT NULL,
  PRIMARY KEY (`idkritik`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ;

[

Kode Form HTML

Kode ini cukup sederhana, hanya terdiri dari satu input dan satu textarea.

  <h2>Masukan kritik dan saran </h2>
   <div id='kirim-ok'></div>
  </div>
 
 <form id='form1' method='POST'  action='simpan.php'>
  
   <label for="email">Email</label>
  <input id='email'  class="u-full-width"  name='email' 
	  type="email" placeholder="test@mailbox.com" >
 
  <label for="exampleMessage">Message</label>
  
	  <textarea id='isi' class="u-full-width" name='isi'  placeholder="Hi Bro …" ></textarea>
 
 
  <input class="button-primary" type="submit" value="Submit">
</form>

Perhatikan untuk form, email dan textarea harus punya id. ID ini nanti dipanggil oleh jQuery saat di submit.

Kode jQuery submit

<script>
/* attach a submit handler to the form */
	$("#form1").submit(function(event) {

		/* stop form from submitting normally */
		event.preventDefault();

		/* get some values from elements on the page: */
		var $form = $(this), url = $form.attr('action');
	/* kode utuk mengirim data lewat POST menggunakan jQuery */
		var posting = $.post(url, {
			email : $('#email').val(),
			isi : $('#isi').val()

		});

		/* jika posting sukses, tambahkan pesan ke div kirim-ok */
		posting.done(function(data) {
			$("#kirim-ok").append(data);

		});
	}); 
</script>

Letakan kode ini dibawah form. Untuk lebih jelasnya lihat komentar kode.

Kode disisi Server

Pemrograman berbasis Ajax membebaskan anda untuk mengimplementasikan kode. Anda bisa menggunakan PHP,Ruby ataupun Java. Namun karena saya bisanya PHP ya saya buat kode simpan data di server dengan PHP.

error_reporting(0);
if ($_POST) {
/* koneksi database */
mysql_connect('localhost','root','');
mysql_select_db('candralab');

	$email = $_POST['email'];
	$isi = $_POST['isi'];
	$sql = "insert into kritik(email,isi)
		values('$email','$isi')";
	$result = mysql_query($sql) or die(mysql_error());	

	if ($result):
		echo "Pesan Telah kami terima, terimakasih!";
	else:
		echo " Maaf, pesan gagal dikirim, silahkan ulangi lagi!";
	endif;	
	
} //end $_POST

Simpan data yang dikirimke mysql, jika suskses, kirimkan kembali “pesan telah kami terima dst”. Jika gagal kirimkan pesan ” Maaf, pesan gagal dikirim dst”.

Source code

bagi yang ingin mencoba sendiri, silahkan download kode lengkapnya disini. Jangan lupa baca README.TXT setelah anda mengektrak file zipnya.

Menjalankan Script PHP lewat Cron CPanel

Dalam pembuatan aplikasi web, kadang ada bagian program yang harus berjalan rutin setiap periode tertentu. Contoh realnya misalkan script yang mengirimkan email produk terbaru ke customer setiap harinya. Contoh lainnya misalkan mengirimkan status resource server ke email admin, melakukan backup otomatis, menghapus transaksi penjualan yang tidak dibayar (seperti tiket pesawat atau kereta api) dan sejenisnya.

Cron adalah service di Cpanel webhosting yang fungsinya mengeksekusi script secara periodik. Periodik bisa permenit, per 5 menit, perjam, perhari dan seterusnya. Cron pada dasarnya adalah perintah command line di Linux dan UNIX. Mengingat Webhosting PHP  menggunakan Linux dengan Kontrol Panel CPanel, maka pihak CPanel memudahkan kita dalam mengotomatisasi proses di webhosting dan menjalankan logic bisnis website tanpa campur tangan manusia.

Langsung saja, kasus berikut ini saya berikan contoh sederhana. Setiap 5 menit script akan memasukan data mahasiswa kedalam tabel mahasiswa. Yah, contohnya kurang realistis memang, namun yang saya targetkan anda paham dengan ide dan implementasi cron itu sendiri.

Contoh script PHP

	define('db_host','localhost');
	define('db_user','usernamedb');
	define('db_pass','passworddb');
	define('db_name','namadb');
	
	mysql_connect(db_host,db_user,db_pass);
	mysql_select_db(db_name);
$sql="insert into mahasiswa(nim,nama,ipk,jurusan,waktu) values('1234','candra','3.00','TI',now())";
mysql_query($sql) or die(mysql_error());	

 

Langkah langkah

1. Buka CPanel dan klik icon Cron Job di bagian Advanced

lalu pilihlah periode script dijalankan setiap berapa ? Lihat screenshoot

cronjob

Setelah menseting periodenya (dalam contoh script php akan di eksekusi setiap 5 menit ), perhatikan bagian Command

Command

/usr/bin/php -q /home/namauser/public_html/demo.php>/home/namauser/cronlog.txt

note:

/user/bin/php  adalah letak file biner PHP. ada kemungkinan lokasi PHP di server anda berbeda, jika tidak tahu lokasinya, silahkan hubungi pihak webhosting

-q  merupakan parameter php yang artinya quite (tidak cerewet) artinya kalo ada error tidak akan kesimpan di log. parameter -q opsional

/home/namauser/public_html/demo.php 

letak script yang akan di eksekusi.  namauser adalah nama login cpnanel anda. Script disini tidak perlu harus php, sembarang script bisa dijalankan asal server mendukung. Contohnya adalah shellcript, Perl atau Python bisa di eksekusi oleh cron. Bahkan mysqldump untuk membackup database pun bisa dieksekusi disini

>/home/namauser/cronlog.txt

 tanda lebih dari artinya output dari script (jika ada) simpan di file cronlog.txt . Log ini sangat bermanfaat jikalau ada error di script atau untuk memastikan script berjalan sebagaimana mestinya.