Submit Form Dengan Ajax Menggunakan jQuery

Februari 2, 2011 5 komentar

Sehubungan dengan terselesaikannya UAS ajax minggu lalu, saya ingin memposting artikel sederhana submit form dengan ajax tentunya, hehe ..

Ini adalah contoh penggunaan Ajax untuk mengirimkan data dalam sebuah form dan memprosesnya. Salah satu kelebihan menggunakan form berbasis Ajax dibandingkan form konvensional adalah: kita tidak perlu meninggalkan form selama form dikirimkan/diproses.

Untuk contoh ini, saya menggunakan dua buah file, yang pertama adalah file ajaxform.html untuk menampilkan form nya, dan file proses.php untuk memproses data yang dikirimkan dan menampilkan hasilnya.

Script pada file ajaxform.html nya adalah sbb:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 
$(document).ready(function() {

	$().ajaxStart(function() {
		$('#loading').show();
		$('#result').hide();
	}).ajaxStop(function() {
		$('#loading').hide();
		$('#result').fadeIn('slow');
	});

	$('#myForm').submit(function() {
		$.ajax({
			type: 'POST',
			url: $(this).attr('action'),
			data: $(this).serialize(),
			success: function(data) {
				$('#result').html(data);
			}
		})
		return false;
	});
})

Untuk mengimplementasikan Ajax, pada file form.html ini saya menggunakan fungsi ajax () pada jQuery. Fungsi ini memiliki sebuah argumen yaitu berupa object (pasangan key/value), dan yang akan saya gunakan di antaranya sbb:

  • type: jenis request yang dipakai, bisa ‘POST’ atau ‘GET’
  • url: url yang akan digunakan untuk memproses data. karena pada form sudah terdapat nilai action (proses.php) maka saya tinggal mengambil nilai dari action tsb menggunakan $(this).attr('action')
  • data: data yang dikirimkan, dalam format querystring. untuk menghasilkan querystring dari form, saya menggunakan fungsi serialize()
  • success: fungsi yang akan dijalankan jika request berhasil, dengan sebuah argumen berupa data yang dikembalikan dari server, dalam hal ini adalah hasil output dari file proses.php (hasil output ini akan saya tampilkan ke dalam sebuah div dengan id="result" )

Sedangkan file proses.php yang akan memproses data yang dikirimkan, isinya adalah sbb:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
 
<?php
//validasi
if (trim($_POST['nim']) == '') {
	$error[] = '- NIM harus diisi';
}
if (trim($_POST['nama']) == '') {
	$error[] = '- Nama harus diisi';
}
if (trim($_POST['tempat_lahir']) == '') {
	$error[] = '- Tempat Lahir harus diisi';
}
//dan seterusnya

if (isset($error)) {
	echo '<b>Error</b>: <br />'.implode('<br />', $error);
} else {
	/*
	jika data mau dimasukkan ke database,
	maka perintah SQL INSERT bisa ditulis di sini
	*/

	$data = '';
	foreach ($_POST as $k => $v) {
		$data .= "$k : $v<br />";
	}
	echo '<b>Form berhasil disubmit. Berikut ini data anda:</b>';
	echo '<br />';
	echo $data;
}
die();
?>

Setelah file proses.php ini berhasil dijalankan maka hasil outputnya akan ditampilkan pada element div yang berada pada file ajaxform.html

Kategori:Ajax

Lebih dari 400 ribu Facebookers akan meninggal tahun ini?

Februari 2, 2011 2 komentar

Selama ini Facebook tidak banyak mengungkap data tentang perusahaan, situs mereka, keunganan atau yang lainnya. Hal tersebut tentu tidak memberikan pengiklan tentang perkiraan jumlah pengguna berdasar negara ataupun demografis. Menganalisis sebuah data tidak dapat secara langsung memberikan kontribusi sebuah kesimpulan, terutama yang berhubungan dengan statistik lainnya. Salah satu periset yang menerapkan hal tersebut adalah Entrustet yang menggunakan jumlah pengguna Facebook di Amerika Serikat bersama dengan data statistik resmi pemerintah untuk mendapatkan jumlah pengguna Facebook yang meninggal setiap tahunnya. Hal tersebut mungkin menjadi sedikit wajar dan riset itu hanya menggunakan data yang tersedia untuk umum.

“Pada bulan Juli kami memperkirakan Baca selengkapnya…

Kategori:Internet Tag:

Menghilangkan Work Offline Pada Mozilla Firefox

Januari 22, 2011 2 komentar

Bagi Anda pengguna Mozilla Firefox pasti sangat sering menjumpai yang namanya Work Offline pada saat Anda membuka Mozilla Firefox Anda. Hal tersebut disebabkan karena komputer Anda belum terhubung dalam jaringan, baik LAN maupun internet.

Untuk menghilangkan peringatan Work Offline, Anda harus menghilangkan tanda centang pada Tab File dan Work Offline. Anda pasti kadang merasa malas dan jengkel apabila harus terus menerus menghilangkan tanda centang tersebut.

Nah,bagi Anda yang ingin membuat Mozilla Firefox Anda tidak memunculkan kembali peringatan Work Offline, berikut caranya :

  1. Instal terlebih dahulu add-on Disable Automatic Offline Management.
  2. Setelah Anda meng-instal, Restart Mozilla Firefox Anda.
  3. Kemudian ketikkan pada URL about:config.
  4. Setelah itu, Anda set network.manage-offline-status menjadi false.
  5. Finish……

Bagaimana??mudah bukan??…

Semoga artikel ini bermanfaat…

Kategori:Internet

Cara Membuat Cursor diikuti oleh teks

Januari 20, 2011 Tinggalkan komentar

 

1. Sign in dulu ke dasbor blog kalian, klik di sini.
2. Klik Tab Tata Letak
3. Klik Tab Elemen Halaman
4. Klik Tambah Gadget
5. Klik pilhan HTML/JavaScript
6. Pastekan script di bawah ini ke kolom Konten

<script>
//mouse
//Circling text trail- Tim Tilton
//Website: http://www.tempermedia.com/
//Visit http://www.dynamicdrive.com for this script and more
function cursor_text_circle(){
// your message here
var msg=’acep endri kurniawan‘.split(”).reverse().join(”);

var font=’Verdana,Arial’;
var size=3; // up to seven
var color=’#ff0000′;

// This is not the rotation speed, its the reaction speed, keep low!
// Set this to 1 for just plain rotation w/out drag
var speed=.3;

// This is the rotation speed, set it negative if you want
// it to spin clockwise
var rotation=-.2;

// Alter no variables past here!, unless you are good
//—————————————————

var ns=(document.layers);
var ie=(document.all);
var dom=document.getElementById;
msg=msg.split(”);
var n=msg.length;
var a=size*13;
var currStep=0;
var ymouse=0;
var xmouse=0;
var props=”<font face=”+font+” size=”+size+” color=”+color+”>”;

if (ie)
window.pageYOffset=0

// writes the message
if (ns){
for (i=0; i < n; i++)
document.write(‘<layer name=”nsmsg’+i+’” top=0 left=0 height=’+a+’ width=’+a+’><center>’+props+msg[i]+’</font></center></layer>’);
}
else if (ie||dom){
document.write(‘<div id=”outer” style=”position:absolute;top:0px;left:0px;z-index:30000;”><div style=”position:relative”>’);
for (i=0; i < n; i++)
document.write(‘<div id=”iemsg’+(dom&&!ie? i:”)+’” style=”position:absolute;top:0px;left:0;height:’+a+’px;width:’+a+’px;text-align:center;font-weight:normal;cursor:default”>’+props+msg[i]+’</font></div>’);
document.write(‘</div></div>’);
}
(ns)?window.captureEvents(Event.MOUSEMOVE):0;

function Mouse(evnt){
ymouse = (ns||(dom&&!ie))?evnt.pageY+20-(window.pageYOffset):event.y; // y-position
xmouse = (ns||(dom&&!ie))?evnt.pageX+20:event.x-20; // x-position
}

if (ns||ie||dom)
(ns)?window.onMouseMove=Mouse:document.onmousemove=Mouse;
var y=new Array();
var x=new Array();
var Y=new Array();
var X=new Array();
for (i=0; i < n; i++){
y[i]=0;
x[i]=0;
Y[i]=0;
X[i]=0;
}

var iecompattest=function(){
return (document.compatMode && document.compatMode!=”BackCompat”)? document.documentElement : document.body;
}

var makecircle=function(){ // rotation properties
if (ie) outer.style.top=iecompattest().scrollTop+’px’;
currStep-=rotation;
for (i=0; i < n; i++){ // makes the circle
var d=(ns)?document.layers[‘nsmsg’+i]:ie? iemsg[i].style:document.getElementById(‘iemsg’+i).style;
d.top=y[i]+a*Math.sin((currStep+i*1)/3.8)+window.pageYOffset-15+(ie||dom? ‘px’ : ”);
d.left=x[i]+a*Math.cos((currStep+i*1)/3.8)*2+(ie||dom? ‘px’ : ”); // remove *2 for just a plain circle, not oval
}
}

var drag=function(){ // makes the resistance
y[0]=Math.round(Y[0]+=((ymouse)-Y[0])*speed);
x[0]=Math.round(X[0]+=((xmouse)-X[0])*speed);
for (var i=1; i < n; i++){
y[i]=Math.round(Y[i]+=(y[i-1]-Y[i])*speed);
x[i]=Math.round(X[i]+=(x[i-1]-X[i])*speed);

}
makecircle();
// not rotation speed, leave at zero
setTimeout(function(){drag();},10);
}
if (ns||ie||dom)
if ( typeof window.addEventListener != “undefined” )
window.addEventListener( “load”, drag, false );
else if ( typeof window.attachEvent != “undefined” )
window.attachEvent( “onload”, drag );
else {
if ( window.onload != null ) {
var oldOnload = window.onload;
window.onload = function ( e ) {
oldOnload( e );
drag();
};
}
else
window.onload = drag;
}

}
cursor_text_circle();

</script>

 

7. Kalian bisa ganti tulisan gajahpandai yg berwarna kuning di atas sama tulisan yg kalian sukaaa
8. Klik save
9. Selesai deeeeh!!

Kategori:Internet

Script Ajax Sederhana menggunakan jQuery

Januari 15, 2011 1 komentar

AJAX adalah sebuah teknik pemrograman yang memungkinkan kita melakukan pertukaran data dengan server di belakang layar, sehingga halaman web tidak harus dipanggil ulang hanya untuk mengganti sebagian kecil dari isi halaman.

Terimakasih kepada framework jQuery, proses development ajax bisa menjadi lebih mudah.

Salah satu fungsi di jQuery untuk Baca selengkapnya…

Kategori:Ajax

Cara Bikin Tampilan Tanggal Lebih Menarik di WordPress

Januari 11, 2011 Tinggalkan komentar

. Dalam sebuah artikel di blog, tanggal ditampilkan sebagai teks biasa. Kalau
mau, Anda bisa memodifikasi tampilan tanggal sebuah artikel dimuat dengan grafik
sehingga lebih menarik. Berikut kita akan belajar bagaimana cara membuat sebuah
button tanggal untuk WordPress melalui 3 langkah sederhana.

Langkah pertama begini. Ketikkan kode ini dalam file single.php. Lokasi tepatnya
di tempat Anda ingin memunculkan tanggal.

<div class=”post-date”>

<div class=”month”><?php the_time(’M’) ?></div>

<div class=”day”><?php the_time(’d’) ?></div>

</div>

Langkah berikutnya, buat latar belakang. Anda butuh program pengolah gambar,
seperti Photoshop. Buatlah desain gambar latar belakang sekehendak Anda.

Setelah itu, atur gayanya. Langkah ini membutuhkan sedikit pengetahuan tentang
CSS dan bergantung pada selera individu karena bisa jadi latar gambarnya berbeda.
Namun, pada dasarnya Anda cukup membuat class di file css dengan Notepad atau
editor lain kesukaan Anda. Begini kodenya.

.post-date{

float: left;

display: inline;

margin: 0 10px 0 0;

background: url(images/date_button_template.gif) no-repeat;

Bagian “date_button_template.gif” merupakan nama file untuk gambar latar Anda.
Bagian “images/” merupakan folder yang berisi file date_button_template.gif.
Jika Anda pakai gambar dengan nama latar.gif yang ada di folde gambar, kode itu
berubah jadi “gambar/latar.gif”.

Sumber: PCplus

Kategori:Internet