.:: GnouBdilS Blog ::.

Membuat sebuah validasi form dengan menggunakan jquery merupakan apa yang akan saya tuliskan pada tutorial kali ini. JQuery merupakan tehnologi yang mulai banyak digunakan pada saat ini dalam membuat sebuah situs web.

Untuk membuat sebuah validasi pada form dengan menggunakan JQuery maka anda terlebih dahulu harus memiliki file JQuery dan plugin JQuery Validation yang dibutuhkan (anda bisa mendapatkannya pada file contoh yang akan diterapkan pada tutorial ini).

Letakanlah file JQuery pada sebuah folder dalam kasus ini saya meletakan filenya pada folder JQuery.
Selanjutnya kita integrasikan dengan website kita dengan cara menambahkan kode berikut ini setelah <head> dan sebelum </head> pada index website anda :

<script type="text/javascript" src="includefile/jquery.js"></script>

<script type="text/javascript" src="includefile/jquery.validate.js"></script>

<script type="text/javascript">

$(document).ready(function() {

$("#myForm").validate();

})

</script>

Setelah mengintegrasikannya tahap implementasinya pada sebuah form yaitu cukup dengan menambahkan id='myForm' pada form anda kemudian tambahkan class='required' title='eror yang akan ditampilkan' pada object textfield yang akan anda lakukan validasi padanya. Contohnya bisa anda lihat pada script berikut ini :

<form name="form1" method="post" id="myForm">
<table width="581" border="0">
<tr>
<td width="105">Nim</td>
<td width="7">:</td>
<td width="455"><label>
<input name="txtnim" type="text" id="txtnim" size="15" maxlength="8" class="required" title="Nim tidak boleh kosong"/>
</label></td>
</tr>
<tr>
<td>Nama</td>
<td>:</td>
<td><label>
<input name="txtnama" type="text" id="txtnama" size="30" maxlength="30" class="required" title="Nama tidak boleh kosong"/>
</label></td>
</tr>
<tr>
<td>Alamat</td>
<td>:</td>
<td><label>
<input name="txtalamat" type="text" size="50" id="txtalamat" class="required" title="Alamat tidak boleh kosong"></textarea>
</label></td>
</tr>
<tr>
<td>Telp</td>
<td>:</td>
<td><label>
<input name="txttelp" type="text" id="txttelp" size="20" maxlength="13" class="required" title="Telphone tidak boleh kosong"/>
</label></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td><label>
<input type="submit" name="Submit" value="Submit" />
</label>
<label>
<input name="Reset" type="reset" id="Reset" value="Reset" />
</label></td>
</tr>
</table>
</form>

Hasilnya akan tampil seperti gambar dibawah ini :

Anda bisa mendownload contoh filenya dengan mengklik disini

Selamat mencoba...

WYSIWYG (What You See Is What You Get) text editor merupakan sebuah rich text editor yang dibuat untuk mempermudah dalam penulisan sebuah dokumen yang dibuat dengan bahasa javascript yang memiliki banyak kelebihan dibandingkan sebuah object textarea biasa pada HTML. Saat ini sudah cukup banyak WYSIWYG text editor yang dapat kita gunakan salah satunya adalah TinyMCE yang dibuat oleh Moxiecode Systems.
Kita dapat menambahkan WYSIWYG Text Editor pada website yang kita miliki dengan mudah tanpa harus membuat coding javascript yang rumit. Yang kita butuhkan hanya mendownload filenya kemudian mengimplementasikannya pada website kita.

Disini saya akan menuliskan tentang cara menambahkan WYSIWYG Text Editor pada website dengan menggunakan TinyMCE. Jadi yang harus anda lakukan pertama kali adalah mendownload file TinyMCE pada link berikut ini : http://tinymce.moxiecode.com/download.php pada link tersebut akan terdapat beberapa versi TinyMCE yang bisa anda gunakan. Pada tutorial ini saya menggunakan TinyMCE versi 3.3.5.

Berikut ini adalah tampilan dari TinyMCE :

Setelah anda download file TinyMCE dari websitenya extraklah file tersebut. Dalam file zip yang diberikan oleh TinyMCE (versi 3.3.5. yang saya download) terdapat 2 buah folder, yang pertama adalah examples dan yang satunya lagi adalah jscripts. Folder examples berisi contoh penggunaan TinyMCE pada sebuah website sedangkan folder jscripts merupakan folder dimana file-file TinyMCE berada.
Masuklah kedalam folder jscripts dan anda akan menemukan folder tiny_mce. Copylah/uploadlah folder tersebut ke folder yang anda inginkan dihosting anda sebagai contoh pada kasus ini saya mengupload file tiny_mce kedalam folder includefile.

Setelah itu langkah berikutnya adalah mengintegrasikan TinyMCE kedalam website anda.
Bukalah index dari website anda kemudian carilah kode <head> tambahkanlah kode berikut ini dibawah <head> dan sebelum </head> :

<script type="text/javascript" src="includefile/tiny_mce/tiny_mce.js"></script>

dan juga tambahkanlah kode berikut dibawah kode diatas :

<script type="text/javascript">
tinyMCE.init({

//opsi umum
mode : "textareas",
theme : "advanced",
plugins :"pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,wordcount,advlist,autosave",

//opsi theme
theme_advanced_buttons1 : "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,styleselect,formatselect,fontselect,fontsizeselect",
theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor",
theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen",
theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,spellchecker,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,blockquote,pagebreak,|,insertfile,insertimage",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_statusbar_location : "bottom",
theme_advanced_resizing : true,
//kode css pada website andacontent_css : "includefile/tiny.css"
});
</script>

jika sudah tinggal pemanggilan pada formnya saja.. berikut ini contoh kodenya :

<form method="post" action="somepage">
<textarea name="content" style="width:100%">
</textarea>
</form>

Selesai TinyMCE WYSIWYG Text Editorpun telah terintegrasi pada web anda.. (^^,)
Jika anda ingin mendownload sample projectnya silahkan mendownloadnya dengan mengklik disini

Selamat mencoba..