MENYISIPKAN EMOTION PADA GUESTBOOK

15 Dec 2009

Halo guys apa kabarnya nihh hehe J , ada juga w yang apa kabarnya, berhibernasi di Kutub utara, dan menghilang di Segitiga Bermuda hehe kayak lagu Parasitnya Gita Gutawa to do point aja,,, kali ini w mau buat artikel tentang programming udah lama banget w gk nulis artikel ginian,,, tepatnya w mau menjelaskan ke kalian bagaimana menyisipkan sebuah emotion pada Guestbook Web kalian mungkin bukan w yang pertama membuat Artikel ini tapi w menjelaskan dengan cara yang w temuin sendiri, bebera bulan lalu,,, gk jauh2 amat sih, ada temen w yang nantangin buat emotion di Web w.. ehh,, otak atik sana sini.. akhirnya w bias juga.. gk tau hidayah dari manav(dari atas lah..),, hehe emang ada yang buang ya (jayus),,,, Script yang w gunain ada 2 nih,, Untuk nyisipin ke Textareaa w pake Javascript, nah buat ngereplace jadi gambar w pake PHP, tapi itu dibagian ke-2 Artikel ini, sekarang kita langsung aja kita Buat,,,

Langkah pertama : Copy beberapa emotions di bawah ini,, kalian bias buat atau nyari yang lebih bagus.. tapi inget name dari gambarnya.. karena nanti jadi URL gambar hehe kalian pasti udah paham baget yang gituan..

Nah emotions itu kalian masukan ke dalam Folder yang berbeda dan beri nama Emotion sebagai contoh., dan Folder itu berada dalam Folder latihan kalian, simpan Di WWW.. inget kita pake PHP kalo kalian masih belum ngerti, cob abaca artikel w tentang Aplikasi Server (w pake Appserv win32-2.5.9).. seperti gambar..

Nah, sekarang kalian buat Index.php, simpan di Folder latihan kalian !… nah script dari Index.php gini

<html>

<head>

<title>Latihan</title>

<script>

//emotions

function add_mark(obj) {

var text = document.forms["aa"].komen.value;

document.forms["aa"].komen.value=text+’ ‘+obj+’ ‘;

}


//end here

</script>

</head>

<body>

<form name=”aa” method=”post” action=”">

<textarea name=”komen” cols=”40″ rows=”5″></textarea>

<br>

<table width=”100″ border=”0″ cellspacing=”1″ cellpadding=”1″>

<tr>

<td><a href=”#” onclick=”add_mark(:o)”><img src=”emotions/laugh.gif” width=”21″ height=”22″ border=”0″></a></td>

<td><a href=”#” onclick=”add_mark(:()“><img src=”emotions/sad.gif” width=”21″ height=”25″ border=”0″></a></td>

<td><a href=”#” onclick=”add_mark(;))“><img src=”emotions/smile.gif” width=”23″ height=”23″ border=”0″></a></td>

<td><a href=”#” onclick=”add_mark(:))“><img src=”emotions/smiler.gif” width=”23″ height=”23″ border=”0″></a></td>

<td><a href=”#” onclick=”add_mark(:p)“><img src=”emotions/tangue.gif” width=”22″ height=”21″ border=”0″></a></td>

<td><a href=”#” onclick=”add_mark(:D)“><img src=”emotions/yungkie.gif” width=”22″ height=”21″ border=”0″></a></td>

</tr>

</table>

<input name=”kr” type=”submit” id=”kr” value=”Kirim”>

</form>

</body>

</html>

Ok mungkin kalian masih sedikit bingung kita coba dari javascriptnya sebenernya w pake Function, tapi Functionya ada banyak kita ambil contoh satu,

function add_lough() {

var text = document.forms["aa"].komen.value;

document.forms["aa"].komen.value=text+’ :o ‘;

}

Penjelasan :

Nama Functionya Add_lough(), ini w yang namain sendiri, kaloo mo diubah silahkan.. nah jadi Gini logikanya, dalam Function ini terdapat sintak seperti ini var text = document.forms["aa"].komen.value;, fungsinya untuk mengambil value dari Textarea, nah kalo ada Forms[aa]. Itu dari Form namenya textarea, seperti ini <form Name=aa></form>, nah kalo Komen itu dari name textareanya.. nah lanjut ke line berikutnya document.forms["aa"].komen.value=text+’ :o ‘; nah kalo yang ini fungsinya memasukan kembali Value yang diambil, namun sebelum dimasukan valuenya ditambah :o pada bagian akhir.. yang nantinya ini akan di Replace menjadi Gambar oke kalo masih bingung seperti ini aja.. kalian misalnya memasukan kata Amri di Text Area,, nah kalian kemudian klik icon Emotion , otomatis pada saat di klik Value Amri akan diambil trus dimasukan kembali denngan tambahan J, menjadi Amri J.. ok

Nah kemudian kalian perhatikan “<a href=”#” onclick=”add_lough()”><img src=”emotions/laugh.gif” width=”21″ height=”22″ border=”0″></a>” ada “onclick=”add_lough()“, nah fungsinya menjalankan Funsi Javascript pada saat di Klik…

Nah ini hasil Jadinya..

Ok.. mungkin itu aja untuk bagian 1 terus mencoba oh yak lo ada saran atau kritik untuk memperbaiki script ini,, w dengan senang hati menerimanya,,, itung2 buat belajar, hehe ok see you di bagian kedua

revisi : 2



TAGS programming Javascript emotions script emotion


-

Author

Follow Me