denius blog

Merubah tampilan Form menggunakan jqTransform

denius — Sun, 18 Dec 2011 11:08:37 +0000

Jika anda ingin merubah tampilan form dengan cepat tanpa menghabiskan banyak waktu, maka salah satu alternatifnya gunakan jqTransform. jqTransform merupakan plugin JQuery untuk styling, dimana kita bisa merubah seluruh elemen form dengan sangat mudah. Yang harus dilakukan hanya dengan menyisipkan plugin dalam tag . Ok..mari kita lihat penggunaannya.

Before

After

Pertama sisipkan JQuery, plugin dan CSS dalam

<link rel="stylesheet" href="jqtransformplugin/jqtransform.css" type="text/css" media="all" />
<script type="text/javascript" src="requiered/jquery.js" >script>
<script type="text/javascript" src="jqtransformplugin/jquery.jqtransform.js" >script>

Kemudian rancang Form dengan class yang isinya jqTransform (Misal Form Login)

<form class="jqTransform" method="post">
<h2>Sign Inh2>
<table border="0" width="100%">
<tbody>
<tr>
<td width="12%">Usernametd>
<td width="88%"><label>
<input class="rowElem" name="textfield" type="text" />
      label>td>
tr>
<tr>
<td>Passwordtd>
<td><label>
<input name="textfield2" type="text" />
      label>td>
tr>
<tr>
<td><label>
<input class="jqTransformButton" name="Submit" type="submit" value="Sign in" />
      label>td>
<td><label>
<input class="jqTransformRadio" name="checkbox" type="checkbox" value="checkbox" />
      label>
      Stay signed intd>
tr>
tbody>
table>
form>

Dan jangan lupa instance javascript untuk transformasi elemen Form

<script language="javascript">
		$(function(){
			$('form').jqTransform({imgPath:'jqtransformplugin/img/'});
		});
script>

Note: Edit CSS, untuk merubah tampilan sesuai dengan keinginan anda.

Validasi form menggunakan Plugin JQuery (validation engine)

denius — Fri, 16 Dec 2011 08:34:52 +0000

Ga terasa..1432 H sudah lewat, 2011 sebentar lagi juga mau minggat. Tapi blog ini tidak pernah di apdet apalagi dilihat. Yaah.. Sudah lama sekali saya tidak nulis…Mumpung masih di awal tahun hijriah dan di penghujung tahun masehi 2011, sekalian untuk menjawab pertanyaan-pertanyaan masalah validasi di web , mudah-mudahan memberikan pencerahan. Sebenarnya untuk validasi sudah banyak sekali yang membahas, dengan berbagai macam cara, client side scripting (javascript, vbscript) maupun yang server side scripting (php, dll) atau dari skrip yang panjang sampai yang skripnya satu baris. Validasi form bertujuan untuk memperkecil terjadinya kesalahan input oleh user. Nah… salah satu cara validasi form yang mudah, menggunakan plugin JQuery validation engine. Sesuai dengan slogan JQuery “Write Less, Do More” . Dengan plugin ini kita bisa memvalidasi seluruh elemen form, dengan sangat mudah tanpa perlu banyak coding.

Sebelumnya download JQuery, plugin Validation Engine

Contoh form Registrasi Mahasiswa

Pertama sisipkan JQuery, plugin validation engine, bahasa yang digunakan dan css (optional) dalam tag di halaman web (saya menggunakan path relative dan lokal)

<link rel="stylesheet" href="../css/validationEngine.jquery.css" type="text/css"/>
<link rel="stylesheet" href="../css/template.css" type="text/css"/>
<script src="../js/jquery-1.6.min.js" type="text/javascript">script>
<script src="../js/jquery.validationEngine.js" type="text/javascript">script>
<script src="../js/languages/jquery.validationEngine-en.js" type="text/javascript">
script>

Kemudian initialisasi instance untuk validasi pada form, untuk tanggal di sini saya menggunakan datepicker.

<script>
            jQuery(document).ready(function(){
                $( ".datepicker" ).datepicker();
                jQuery("#formID").validationEngine();
            });
script>

Buat Form di dalam tag

<form id="formID" class="formular" method="post">
<fieldset>
<legend>Registrasi legend>
<table border="0" width="100%">
<tbody>
<tr>
<td>No.BPtd>
<td>
<input id="nobp" class="validate[required,custom[onlyNumberSp] text-input" name="nobp" type="text" />td>
tr>
<tr>
<td>Namatd>
<td>
<input id="nama" class="validate[required] text-input" name="nama" type="text" />td>
tr>
<tr>
<td>Tempat Lahirtd>
<td>
<input id="tempat" class="validate[required] text-input" name="tempat" type="text" />td>
tr>
<tr>
<td>Tanggal Lahirtd>
<td>
<input id="tgl" class="validate[required] text-input datepicker" name="tgl" type="text" />td>
tr>
<tr>
<td>Jenis Kelamintd>
<td>
<input id="radio1" class="validate[required] radio" name="group0" type="radio" value="L" />Laki-laki
<input id="radio2" class="validate[required] radio" name="group0" type="radio" value="P" />               Perempuantd>
tr>
<tr>
<td>Alamattd>
<td><textarea id="alamat" class="validate[required] text-input" cols="20" rows="2" name="alamat">textarea>td>
tr>
<tr>
<td>Emailtd>
<td>
<input id="email" class="validate[required,custom[email]] text-input" name="email" type="text" />td>
tr>
<tr>
<td>Hobitd>
<td>
<select id="hobi" class="validate[required]" name="hobi">
<option>Pilih Hobioption>
<option value="option1">Tennisoption>
<option value="option2">Footballoption>
<option value="option3">Golfoption>
select>td>
tr>
<tr>
<td>Websitetd>
<td>
<input id="url" class="validate[required,custom[url]] text-input" name="url" type="text" value="http://" />td>
tr>
<tr>
<td>Passwordtd>
<td>
<input id="password" class="validate[required] text-input" name="password" type="password" value="denius" />td>
tr>
<tr>
<td>Confirmtd>
<td>
<input id="password2" class="validate[required,equals[password]] text-input" name="password2" type="password" value="deniusaja" />td>
tr>
<tr>
<td>td>
<td>
<input class="submit" name="submit" type="submit" value="Submit" />td>
tr>
tbody>
table>
fieldset>
form>

Perhatikan pada setiap inputan form ada class yang diisi format validasi yang diinginkan oleh plugin Validation Engine, berikut jenis validasi yang saya gunakan pada form di atas.

No	Jenis Validasi	Penggunaan
1	Required field, field harus diisi	validate[required]
2	Harus diisi dan hanya nomor, spasi	validate[required,custom[onlyNumberSp]
3	Harus diisi dan dengan format email	validate[required,custom[email]]
4	Harus diisi dengan format URL	validate[custom[url]]
5	Isi harus sama dengan inputan lainnya	validate[equals[fieldlain]]

Dan pastinya masih banyak lagi jenis validasi yang bisa digunakan (ajax, regex,nilai Min, Max dll), untuk lebih lengkap silahkan baca di sini.

Syifa : 2 Tahun

denius — Fri, 28 Jan 2011 02:18:57 +0000

Alhamdulillah hari ini tanggal 27 Januari 2011, syifa genap umur 2 tahun. Tak terasa..sekarang sudah menjadi bessaaaarr Well… semoga selalu mendapat ridho allah Subhanawata’ala dan menjadi anak yang berbakti pada agama dan kedua orang tua kelak.

Install Vodafone di Mac OS X Snow Leopard

denius — Thu, 16 Dec 2010 05:52:54 +0000

Rasanya kurang lengkap bagi pengguna Mac OS X Snow Leopard “Macan Tutul Putih” kalau tidak bisa meng-aum “googling” dengan menggunakan Modem GSM. Modem USB Vodafone pada umumnya menggunakan Mobile Partner yang hanya bisa dijalankan pada “jendela“. Nah..supaya si putih yang berkepribadian Unix ini bisa shuriken saya menggunakan software Vodafone Mobile Broadband (VMB) for MAC versi 4.03.02.01, yang mana support untuk Vodafone K3565, E2XXX dan variannya. Untuk melakukan instalasi download software VMB for Mac, kemudian extract dan ikuti prosedur penginstalannya.

NB:Tidak perlu melakukan perubahan dan modem tidak perlu di colokkan pada saat instalasi.

Setelah selesai melakukan instalasi, maka akan muncul tampilan seperti gambar di bawah ini :

Pasang modem, kemudian pilih tab DEVICES. Software nanti akan membaca modem yang digunakan, kalau tidak muncul berarti anda belum beruntung.

Kemudian untuk melihat jenis koneksi yang digunakan pilih tab CONNECTION, klik kaca pembesar (lihat gambar di atas). Software akan otomatis mencari jenis jaringan yang tersedia, berikutnya tinggal melakukan koneksi pada tab MAIN.

Selamat berselancar……..