Membuat Digit Nominal Angka dengan Javascript



Latar belakang

Untuk membuat aplikasi keuangan berbasis web, kita membutuhkan tampilan untuk memudahkan user dalam menginput nilai uang. misalnya nilai 150000 saat di input akan terdapat tanda titik pemisah setiap 3 digit menjadi 1.500.000. namn ketika di simpan di database, nilainya tetap tanpa titik pemisah.

Coding Javascript

function kurensi(nilai)
{
bk = nilai.replace(/[^\d]/g,””);
ck = “”;
panjangk = bk.length;
j = 0;
for (i = panjangk; i > 0; i–)
{
j = j + 1;
if (((j % 3) == 1) && (j != 1))
{
ck = bk.substr(i-1,1) + “.” + ck;
xk = bk;
}
else
{
ck = bk.substr(i-1,1) + ck;
xk = bk;
}
}
return ck;
}

function ri32()
{
ttm = document.getElementById( ‘postform’ ).elements[‘jumlah_transaksi’].value;
strtt= ttm.toString();
kttm = kurensi(strtt);

document.getElementById( ‘postform’ ).elements[‘jumlah_transaksi’].value = kttm;
}

Coding PHP

<?php
if(isset($_POST[‘submit’])){
$nilai=str_replace(“.”,””,$_POST[‘jumlah_transaksi’]);
echo “Nilai Sebenarnya : “.$nilai;
}else{
unset($_POST[‘submit’]);
}
?>

<html>
<head>
<title>Ri32 Community</title>
http://ri32-fungsi.js
</head>
<body onLoad=”document.postform.elements[‘jumlah_transaksi’].focus();”>

<form id=”postform” name=”postform” method=”post” action=”index.php”>
<input style=”text-align:right;” name=”jumlah_transaksi” onKeyup=”ri32();” value=0>
<input type=”submit” name=”submit” value=”Kirim”>
</form>

</body>
</html>

Download

http://www.4shared.com/zip/_fIDVd2L/bilangan-ri32.html

Sekian artikel dari saya semoga bermanfaat untuk teman-teman dan anda semua…aamiin

Cibubur, 4-6-2012

GusnaNuri

Membuat Mega Menu dengan Javascript


Latar Belakang

Mungkin teman-teman pernah mengunjungi situs bhineka.com. di menu atas terdapat menu yang kita di mouseover muncul banyak sub menu. menu seperti itu disebut dengan Mega Menu.

Mega Menu merupakan perkembangan menu drop down, dan terdiri dari beberapa kolom menu. Mega Menu cocok dipakai untuk menampilkan menu Katalog atau menu yang terdapat banyak sub menu nya.

Download

http://www.4shared.com/zip/G-g8jhID/megamenu-ri32.html

Sekian artikel dari saya semoga bermanfaat untuk teman-teman dan anda semua…aamiin

Cibubur, 5-5-2012

NuriGusna

Membuat program sandi morse dengan javascript


Latar Belakang :

Waktu saya belajar Pramuka di MTs Al I’anah, saya suka dengan pelajaran sandi karena tidak semua orang dapat membacanya seperti konsep enkripsi. walaupun beberapa sandi sudah menjadi standar komunikasi seperti sandi morse.

Pada artikel ini saya akan membahas tentang aplikasi sandi morse yang dibuat dengan menggunakan javacsript. aplikasi sederhana ini dapat menterjemahkan dari teks menjadi sandi morse ataupun sebaliknya dari sandi morse ke teks.

Belajar Sandi Morse

Untuk memudahkan belajar dan mengkhafal sandi morse, teman-teman dapat membaca artikel cara cepat hafal sandi morse

Sandi Morse ke Teks

function code2Text()
{
var ced3 = “.- +”, i, d, ced5, ced9=””;
var ced4 = window.document.morse.input;
var ced1 = window.document.morse.output;
var ced2 = ced4.value.length;

for(ced5=0; ced5<ced2; ced5++)
{
switch (ced4.value.charAt(ced5))
{
case ‘.’:{ced9 += “.”; break;}
case ‘-‘:{ced9 += “-“; break;}
case ‘+’:{ced1.value += ” “; break;};
case ‘ ‘:
{switch(ced9)
{
case ‘.-‘:{ced1.value +=”a”; ced9=””; break;}
case ‘-…’:{ced1.value +=”b”; ced9=””; break;}
case ‘-.-.’:{ced1.value +=”c”; ced9=””; break;}
case ‘-..’:{ced1.value +=”d”; ced9=””; break;}
case ‘.’:{ced1.value +=”e”; ced9=””; break;}
case ‘..-.’:{ced1.value +=”f”; ced9=””; break;}
case ‘–.’:{ced1.value +=”g”; ced9=””; break;}
case ‘….’:{ced1.value +=”h”; ced9=””; break;}
case ‘..’:{ced1.value +=”i”; ced9=””; break;}
case ‘.—‘:{ced1.value +=”j”; ced9=””; break;}
case ‘-.-‘:{ced1.value +=”k”; ced9=””; break;}
case ‘–…’:{ced1.value +=”7″; ced9=””; break;}
case ‘—..’:{ced1.value +=”8″; ced9=””; break;}
case ‘—-.’:{ced1.value +=”9″; ced9=””; break;}
}break;
}
}
}
}

Teks ke Sandi Morse

function text2Code()
{
var ced3 = “abcdefghijklmnopqrstuvwxyz. “, i, d, f;
var ced4 = window.document.morse.input.value.toLowerCase();
var ced1 = window.document.morse.output;
var ced2 = ced4.length;

for(i=0; i<ced2; i++)
{
i = ced4.charAt(i);
if(ced3.indexOf (i) ==-1)
{
alert(“Please use only letters.”);
break;
}
else
{
for(f=0; f<ced2; f++)
{
switch (ced4.charAt(f))
{
case ‘a’:{ced1.value += ” .- “; break;}
case ‘b’:{ced1.value += ” -… “; break;}
case ‘c’:{ced1.value += ” -.-. “; break;}
case ‘d’:{ced1.value += ” -.. “; break;}
case ‘e’:{ced1.value += ” . “; break;}
case ‘f’:{ced1.value += ” ..-. “; break;}
case ‘2’:{ced1.value += ” ..— “; break;}
case ‘3’:{ced1.value += ” …– “; break;}
case ‘4’:{ced1.value += ” ….- “; break;}
case ‘5’:{ced1.value += ” ….. “; break;}
case ‘6’:{ced1.value += ” -…. “; break;}
case ‘7’:{ced1.value += ” –… “; break;}
case ‘8’:{ced1.value += ” —.. “; break;}
case ‘9’:{ced1.value += ” —-. “; break;}
}
}
}
}
}

Download Aplikasi

http://www.4shared.com/zip/k4bn68W9/sandi-morse-ri32.html

Sekian artikel dari saya semoga dapat bermanfaat untuk teman-teman dan anda semua…aamiin

Depok, 10-02-2012

noname

Javascript untuk bookmark dan proteksi copy halaman web



Latar Belakang

Dalam artikel ini saya akan menjelaskan 2 fungsi javascript yang bisa kita gunakan dalam membuat sebuah halaman web. yaitu fungsi bookmark dan fungsi agar halaman web kita tidak bisa di copy. dengan catatan pengaturan javascript di browsernya dalam keadaan aktif.

Bookmark adalah kegiatan user menandai halaman web di sebuah web browser untuk suatu saat nanti di kunjungi kembali. Untuk bookmark halaman web biasanya kita menggunakan shortcut ctrl+D pada web browser. javascript juga menyediakan fungsi seperti itu. tinggal klik link maka browser khususnya mozila akan muncul kotak bookmark.

Fungsi Bookmark

function addBookmark()
{
bookmarkurl = “http://www.ri32.wordpress.com&#8221;;
bookmarktitle=”Blog Ri32″;
if (document.all)
window.external.AddFavorite(bookmarkurl,bookmarktitle)
else if ( window.sidebar ) {
window.sidebar.addPanel(bookmarktitle, bookmarkurl,””);
}
}

Fungsi Proteksi

if (typeof document.onselectstart!=”undefined”) {
document.onselectstart=new Function (“return false”);
}
else{
document.onmousedown=new Function (“return false”);
document.onmouseup=new Function (“return true”);
}

Klik kanan Copyright

document.oncontextmenu = new Function(“alert(‘Copyright by Agus Sumarna – WebGIS’);return false”);

Implementasi

<body>
Don’t copy this page!
<a href=”javascript:addBookmark();”>Bookmark this page!</a>
</body>

Download

http://www.4shared.com/zip/7tnMvPag/Javascript-ri32.html

Sekian artikel dari saya semoga bermanfaat untuk teman-teman dan anda semua…aamiin

Depok, 22-12-2011

noname

Membuat aplikasi pilih warna dengan JQuery


Color Picker

Artikel ini membahas fitur web yang digunakan untuk memilih warna berdasarkan pilihan user. misalnya aplikasi untuk memilih warna kesukaan atau contoh yang lainnya. Aplikasi ini dibuat dengan library jQuery Color Picker: Farbtastic

Potongan Script JQuery

http://jquery-1.6.4.min.js
 http://farbtastic.js
 <link rel="stylesheet" href="farbtastic.css" type="text/css" />
 
  $(document).ready(function() {
    $('#demo').hide();
    $('#picker').farbtastic('#color');
  });
 
Potongan Script HTML
<form action="index.php" style="width: 400px;" method="post"> <table> <tr><td>Nama kamu :</td><td><input type="text" name="nama"/></td></tr> <tr><td>Warna Kesukaanmu :</td><td><input type="text" id="color" name="color" value="#5119e1" /></td></tr> <tr><td></td><td><input type="submit" value="Kirim" name="kirim"> <input type="reset" name="Batal"/></td></tr> </table>
Download
http://www.4shared.com/file/1x1vZa6_/warna.html
Sekian dari saya semoga bermanfaat untuk teman-teman dan anda semua...aamiin

30-10-2011

noname

Membuat Timer Countdown pada Ujian Online


Pertanyaan

mas saya mw ditambahin wktu pengerjaan soal gk bisa2 ya jadi pad saat lagi ngerjai soal klo waktu ya abis maka muncul tampilan “maaf waktu abis ” kira2 pnya script ya g ?

Coding (file timer.html)

<html>
<head>
<title>Timer Ujian Online</title>

//120 detik
const timer = 120;
var count = timer;
function startClock()
{
if (count>0) count–;
document.getElementById(“status”).innerHTML = count;
setTimeout(“startClock()”, 1000);

if(count==0)
{
alert(“Waktu Anda telah habis”);
document.location.href=”selesai.html”;
//count=0;
}
}

</head>
<body onLoad=”startClock()”>
Segera submit jawaban anda sebelum waktunya selesai. &raquo; Sisa waktu ujian anda adalah : … <b><span id=status></span> detik</b>
</body>
</html>

Memakai Menit

<html>
<head>
<title>Timer Ujian Online</title>

var detik=”120″
if (document.images)
{
parselimit=detik
}
function begintimer()
{
if (!document.images)
return
if (parselimit==1)
window.location=”jawab_soal.php”
else
{
parselimit-=1
curmin=Math.floor(parselimit/60)
cursec=parselimit%60
if (curmin!=0)
curtime=curmin+”:”+cursec+””
else
curtime=cursec+” detik”
document.getElementById(“servertime”).innerHTML=curtime
setTimeout(“begintimer()”,1000)
}
}

</head>
<body onLoad=”begintimer()”>
Segera submit jawaban anda sebelum waktunya selesai. &raquo; Sisa waktu
ujian anda adalah : … <b>

</b>
</body>
</html>

Download

http://www.4shared.com/file/X1V1IQVG/timedown.html

Sekian artikel dari saya semoga bermanfaat untuk teman-teman dan anda semua…aamin

Depok, 17-03-2011

noname

Menampilkan text editor javascript tinymce pada textarea


Penulisan pada editor

Alur Program :

  1. User input artikel pada text editor
  2. User  menyimpan data artikel tersebut ke database MySQL
  3. Data disimpan di database
  4. User menampilkan data yang tersimpan di database ke halaman view artikel
  5. Selesai

Untuk penjelasan syntaxnya silahkan buka file index.php

Coding untuk memanggil library editor

<script type=”text/javascript” src=”./jscripts/tiny_mce/tiny_mce.js“></script>
<script type=”text/javascript”>
tinyMCE.init({
mode : “exact”,
elements : “elm2“,
theme : “advanced”,
skin : “o2k7”,
skin_variant : “silver”,
plugins :

template_external_list_url : “lists/template_list.js”,
external_link_list_url : “lists/link_list.js”,
external_image_list_url : “lists/image_list.js”,
media_external_list_url : “lists/media_list.js”,

template_replace_values : {
username : “Some User”,
staffid : “991234”
}
});
</script>

Coding untuk Form editor

<title>Form Editor Ri32</title>
<body onLoad=”document.login.userid.focus();”>
<form action=”simpan.php” method=”post”>

<table width=”637″ border=”0″ align=”center” cellpadding=”0″ cellspacing=”0″>
<tr>
<td height=”30″><strong>Judul Artikel</strong></td>
</tr>
<tr>
<td width=”67%” height=”30″><font face=”Times New Roman” size=”2″>
<input type=”text” name=”judul”/ size=”40″></font></td>
</tr>

<tr>
<td width=”67%” height=”30″><font face=”Verdana, Arial, Helvetica, sans-serif” size=”1″><em>(Gunakan editor untuk mengedit tulisan)</em></font></td>
</tr>

<tr>
<td width=”67%” height=”182″><font face=”Times New Roman” size=”2″>
<textarea name=”isi” cols=”30″ rows=”10″ id=’elm2′></textarea></font></td>
</tr>

<tr>
<td>&nbsp;</td>
</tr>

<tr>
<td width=”67%”><input type=”submit” value=”Simpan”>&nbsp;</td>
</tr>
</table>
</form>
</body>
</html>

Catatan :

perhatikan syntax id=elm2 pada tag <textarea name=”isi” cols=”30″ rows=”10″ id=’elm2‘></textarea>

Tampilan Hasil Editor

Download Tinymce

http://www.4shared.com/file/OHLhCcFF/text_editor.html

Download nicEdit

http://www.4shared.com/file/SUhOsg3C/nicEdit-ri32.html

Sekian artikel dari saya semoga dapat bermanfaat untuk teman-teman dan anda semua…aamin

Depok, 26-02-2011

 

noname

%d bloggers like this: