MEMBUAT INPUT DIALOG BOX DENGAN JAVASCRIPT

Kalau sebelumnya saya menulis tentang penggunaan alert dan juga confirm dialog dengan javascript, kali ini saya ingin sharing tentang penggunaan Input dialog.

Anda pasti sudah sering menjumpai input dialog bukan? Maksudnya yang seperti ini:

atau bisa juga dicoba dengan mengklik link di bawah ini:


CONTOH INPUT DIALOG

Input dialog box ini mempunyai banyak kegunaan. Yang jelas dengan input dialog box ini seorang user dapat berinteraksi dengan suatu web. Selain itu dengan input dialog ini, suatu website dapat dibuat lebih dinamis, dengan inputan yang berbeda maka outputnya pun dapat dibuat berbeda. Untuk contoh gambar yang diatas misalnya saja kita masukan angka 1 maka keluarannya adalah halaman home, jika diinputkan 2 maka keluarannya adalah html, dan seterusnya. Input dialog box ini dapat dibuat menggunakan javascript. Untuk aturan penulisannya adalah sebagai berikut:

prompt(text_label, text_value);

text_label merupakan text yang akan ditampilkan pada input dialog, untuk contoh diatas yaitu tulisan “masukan pilihan anda dst”. Sedangkan text_value merupakan text yang ada pada field inputan, text_value ini sifatnya optional, jadi meskipun kosong tidak akan menjadi masalah. Untuk contoh penulisan di atas belum memasukan nilai yang diinputkan ke dalam suatu variabel. Untuk memasukan inputan tadi ke dalam variabel contohnya seperti ini :

var a = prompt(text_label, text_value);

var merupakan syntax pada javascript untuk mendeklarasikan suatu variabel. Sendankan a merupakan nama variabel yang dideklarasikan.
Berikut saya berikan contohnya :

CONTOH INPUT DIALOG

Untuk contoh input dialog tersebut sourcenya adalah sebagai berikut :

<html>
<head>
<title>Prompt</title>
</head>
<body>
<script language="javascript">
function pilih()
{
var pil=prompt("masukan pilihan anda:\n1.Home\n2.HTML\n3.JavaScript");
if (pil!=null){
if (pil==1){
window.open("http://blajar-komputer.blogspot.com/");
}else if (pil==2){
window.open("http://blajar-komputer.blogspot.com/search/label/HTML");
}else if (pil==3){
window.open("http://blajar-komputer.blogspot.com/search/label/Javascript");
}else{
alert("pilihan yang dimasukan tidak terdaftar");
}
}
}
</script>
<a onClick="pilih();" href="#">Klik Disini</a>
</body>
</html>

atau anda juga bisa mendownload beberapa contoh lainnya pada link di bawah ini :


DOWNLOAD
Read more »
These icons link to social bookmarking sites where readers can share and discover new web pages.
  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Google
  • Furl
  • Reddit
  • Spurl
  • StumbleUpon
  • Technorati

Membuat Confirm Dialog Dengan Javascript

Postingan kali ini tentang Javascript lagi. Kali ini saya ingin share tentang penggunaan confirm dialog box.
Anda pasti sudah pernah menemui dialog box seperti ini :


Dialog box tersebut dinamakan dengan confirm dialog. Kegunaanya tentu saja untuk meyakinkan user terhadap action yang akan dilakukannya. Jika yang dipilih OK maka action akan berjalan namun jika yang di pilih cancel maka action tidak akan berjalan.

Contohnya begini, coba anda klik link dibawah ini:



CONTOH CONFIRM DIALOG

apa yang terjadi? Jika memilih option OK maka akan muncul windows baru menuju halaman yang lain di blog ini. Namun jika anda memilih cancel maka tidak akan ada action yang dieksekusi.

Langsung saja, syntax dari confirm dialog ini cukup pendek yaitu :

confirm("pesan anda disini");

untuk contoh yang diatas saya letakan pada link, sehingga jadinya seperti ini :

<a href="http://blajar-komputer.blogspot.com" target="_blank" onclick='return confirm("yakin nih?");'>Link</a>

atau anda juga bisa menempatkannya pada tag <body>, semisal jika user ingin menutup browsernya. Jika disisipi confirm dialog ini maka sebelum browser tertutup akan muncul confirm dialog. Anda cukup menyisipkan atribut onunload pada tag <body> Berikut adalah contohnya :

<body onunload='return confirm(“yakin akan meninggalkan halaman ini?”);'>

Sebenarnya confirm dialog ini kegunaannya sangat banyak. Yang jelas confirm dialog ini akan sangat berguna untuk mengatasi kecerobohan user. Misalnya saja ada link untuk menghapus suatu data. Jika link tersebut tidak diberi konfirmasi, saat link tersebut diklik maka data akan langsung terhapus, jika user yang mengeklik link tersebut tidak sengaja maka data juga akan langsung terhapus. Dan ini akan merepotkan jika data yang terhapus merupakan data yang penting. Untuk itu gunakanlah confirm dialog ini untuk mengatasi kecerobohan user.
Read more »
These icons link to social bookmarking sites where readers can share and discover new web pages.
  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Google
  • Furl
  • Reddit
  • Spurl
  • StumbleUpon
  • Technorati

Membuat Drop Down Menu


Anda pasti pernah menjumpai menu seperti ini:











Menu ini dinamakan dengan menu drop down.
Menu drop down sudah sangat sering dijumpai di website-website yang ada di internet. Tampilannya yang  elegan dan multifungsi menjadikannya menarik untuk digunakan. Untuk membuat menu drop down ini HTML saja tidaklah cukup. Diperlukan CSS dan juga Javascript, CSS digunakan untuk mengatur tampilan, sedangkan Javascript digunakan untuk mengatur action-action untuk menu tersebut. Untuk membuat menu drop down ini anda bisa saja membuatnya dari 0 (semuanya dikerjakan manual), namun dengan perkembangan zaman saat ini sudah banyak tersedia source code gratis yang bisa digunakan. Salah satunya tutorial yang akan saya berikan ini. Tutorial ini saya dapat dari dynamicdrive.com.

Langsung saja, berikut adalah tutorialnya:


  • Download dulu Javascript untuk membuat menu dropdown ini disini (Klik kanan save link as)
  • Download juga CSS style untuk membuat menu dropdown ini disini (Klik kanan save link as)
  • Buat file HTML baru, dan pastikan file tersebut berada pada folder yang sama dengan file CSS dan Javascript yang tadi anda download.
  • Di dalam tag <head> tambahkan kode ini :
<link rel="stylesheet" type="text/css" href="chromestyle.css" />
<script type="text/javascript" src="chrome.js"></script>

  • kode tersebut artinya mengambil script dari external file yaitu file chromestyle.css dan chrome.js. Selanjutnya untuk membuat menu utamanya gunakan script berikut :
<div class="chromestyle" id="chromemenu">
<ul>
<li><a href="http://blajar-komputer.blogspot.com">Home</a></li>
<li><a href="#" rel="dropmenu1">Resources</a></li>
<li><a href="#" rel="dropmenu2">News</a></li>
<li><a href="#" rel="dropmenu3">Search</a></li>
</ul>
</div>

  • untuk menambahkan menu dropdown tambahkan saja atribut rel="dropmenu1" dimana dropmenu1 adalah nama dari dropmenu yang nantinya dideklarasikan di bawahnya. Tambahkan script berikut ini untuk memunculkan dropdown menunya :
<!--Yang ini kalau mouse berada diatas menu Resources-->
<div id="dropmenu1" class="dropmenudiv">
<a href="http://www.dynamicdrive.com/">Dynamic Drive</a>
<a href="http://www.cssdrive.com">CSS Drive</a>
<a href="http://www.javascriptkit.com">JavaScript Kit</a>
<a href="http://www.codingforums.com">Coding Forums</a>
<a href="http://www.javascriptkit.com/jsref/">JavaScript Reference</a>
</div>
<!--Yang ini kalau mouse berada diatas menu news -->
<div id="dropmenu2" class="dropmenudiv" style="width: 150px;">
<a href="http://www.cnn.com/">CNN</a>
<a href="http://www.msnbc.com">MSNBC</a>
<a href="http://news.bbc.co.uk">BBC News</a>
</div>
<!-- Yang ini kalau mouse berada diatas menu search -->
<div id="dropmenu3" class="dropmenudiv" style="width: 150px;">
<a href="http://www.google.com/">Google</a>
<a href="http://www.yahoo.com">Yahoo</a>
<a href="http://www.msn.com">MSN</a>
</div>

  • dan terakhir tambahkan script ini :
<script type="text/javascript">
cssdropdown.startchrome("chromemenu")
</script>


script tersebut digunakan untuk menjalankan menu drop down ini. Atau anda bisa juga pelajari contohnya yang dapat di download di link di bawah ini
DOWNLOAD
Read more »
These icons link to social bookmarking sites where readers can share and discover new web pages.
  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Google
  • Furl
  • Reddit
  • Spurl
  • StumbleUpon
  • Technorati

Membuat Alert Selamat Datang Pada Blog/Web Menggunakan Javascript

Javascript sudah sangat umum digunakan guna membuat web/blog lebih interaktif dengan user. Karena sifatnya yang interpret sehingga pemasangannya pada web/blog pun menjadi cukup mudah, cukup ketik ini dan ketik itu di sana sini dan hasilnya pun langsung bisa dipakai.

Mungkin anda sudah sering menjumpai sambutan oleh Javascript saat membuka suatu web/blog, mungkin sambutannya seperti ini :

Sambutan seperti itu digunakan menggunakan Javascript. Pada Javascript terdapat fungsi alert(), fungsi ini merupakan fungsi yang digunakan untuk menampilkan kotak dialog seperti di atas. Penggunaan fungsi alert ini cukup mudah berikut adalah syntaxnya:

alert ("teks yang akan ditampilkan disini");

Untuk memasangnya pada website bisa kita sisipkan dimanapun tergantung kebutuhan. Contohnya untuk membuat sambutan "Selamat Datang" pada saat web dibuka kita bisa sisipkan fungsi alert tersebut pada tag <body> dengan atribut onLoad, jadinya seperti ini :

<body onLoad='alert("Selamat Datang");'>

onLoad sendiri artinya saat diload atau saat halaman web dibuka. Ada lagi atribut saat halaman ditutup, yaitu atribut onUnLoad. Semisal kita menginginkan muncul alert "Terima Kasih" saat halaman ditutup maka sisipkan saja fungsi alert pada body dengan atribut onUnLoad. seperti ini :

<body onUnLoad='alert("Terima Kasih");'>

Atau anda juga bisa memasang keduanya sekaligus, jadi saat halaman dibuka muncul alert "Selamat Datang", sedangkan saat halaman ditutup muncul alert "Terima Kasih". Seperti ini : 

<body onUnLoad='alert("Terima Kasih");' onLoad='alert("Selamat Datang");'>

Untuk contoh web yang ada alertnya bisa dilihat disini
Read more »
These icons link to social bookmarking sites where readers can share and discover new web pages.
  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Google
  • Furl
  • Reddit
  • Spurl
  • StumbleUpon
  • Technorati

Membuat Halaman Web/Blog Tidak Bisa Di Copy

Plagiatism sudah sangat sering terjadi di dunia maya. Terkadang mungkin Anda kesal tulisan yang Anda buat dengan susah payah dicopy oleh orang yang tidak bertanggung jawab tanpa meminta ijin anda terlebih dahulu. Memang pada dasarnya aturan dari hak cipta tulisan di dunia maya memang tidak terlalu ketat, sehingga untuk mengcopy sebuah tulisan sangatlah mudah.



Kali ini saya ingin berbagi cara agar tulisan anda lebih aman dari copy. Sebenarnya ada banyak cara agar tulisan anda tidak bisa dicopy, namun setau saya masih belum ada cara yang 100% sempurna. Berikut adalah beberapa cara yang bisa digunakan :



  • Gunakan File PDF yang di secure dalam pendistribusian tulisan.
Cara ini cukup mudah digunakan, saat anda membuat document extract file tersebut dalam format .pdf dan jangan lupa untuk menjadikan file tersebut secured (agar tidak bisa dicopy). Namun cara ini hanya berlaku jika anda mendistribusikan tulisan anda dalam file. Dan cara seperti ini pun tidak terlalu aman, pasalnya sudah banyak software untuk menjebol file pdf yang secure.


  • Untuk Web/Blog capture tulisan anda, dan post dalam bentuk gambar.
Cara ini cukup ampuh untuk melindungi tulisan anda dari pengcopyan. Anda cukup mengetik pada document editor anda, lalu sebelum di edarkan di internet anda capture terlebih dahulu (gunkana tombol printscreen pada keyboard). Lalu edarkan file gambar tadi. contohnya:

Namun perlindungan seperti ini juga kurang efektif, masalah akan timbul saat anda akan membuat link pada tulisan tersebut. Dan proses load page pun akan menjadi lebih lama.

Menurut saya inilah cara yang paling efektif. Sebelumnya coba anda kesini dan anda coba copy tulisan yang ada disana. Tulisan tersebut tidak bisa dicopy bukan? Untuk membuat web anda tidak bisa dicopy sebenarnya sangatlah mudah, berikut adalah caranya :

pada tag <body> tambahkan atribut:

oncopy="return false;"

jadinya nanti seperti ini :

<body onocopy="return false;">

Bagaimana? cukup mudah bukan?
Untuk mengeditnya pada blog anda bisa masuk ke menu Rancangan/Layout pilih option Edit HTML. Tekan Ctrl+F cari text <body dan tambahkan atribut seperti di atas. Jika pada blog anda ada banyak atribut di tag body anda tidak perlu menghapusnya, cukup tambahkan saja atribut oncopy seperti di atas.
Read more »
These icons link to social bookmarking sites where readers can share and discover new web pages.
  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Google
  • Furl
  • Reddit
  • Spurl
  • StumbleUpon
  • Technorati

Berkenalan Dengan Javascript

Berbicara tentang halaman web, hal yang langsung terlintas di kepala anda pasti tentang HTML, PHP, CSS, ataupun Javascript. Umumnya pembuatan website menggunakan scriptscript tersebut. HTML untuk memformat untuk memformat tampilan, CSS untuk mempercantik desain, PHP untuk membuat web lebih dinamis dan Javascript untuk memberikan kemampuan tambahan pada HTML.



Javascript diperkenalkan pertama kali oleh Netscape pada tahun 1995. Pada awalnya bahasa ini dinamakan “LiveScript” yang berfungsi sebagai bahasa sederhana untuk browser Netscape Navigator 2. Pada masa itu bahasa ini banyak di kritik karena kurang aman, pengembangannya yang terkesan buru buru dan tidak ada pesan kesalahan yang di tampilkan setiap kali kita membuat kesalahan pada saat menyusun suatu program. Kemudian sejalan dengan sedang giatnya kerjasama antara Netscape dan Sun (pengembang bahasa pemrograman “Java” ) pada masa itu, maka Netscape memberikan nama “Javascript” kepada bahasa tersebut pada tanggal 4 desember 1995. Pada saat yang bersamaan Microsoft sendiri mencoba untuk mengadaptasikan teknologi ini yang mereka sebut sebagai “Jscript” di browser Internet Explorer 3.


Javascript sendiri adalah bahasa yang berbentuk kumpulan skrip yang pada fungsinya berjalan pada suatu dokumen HTML, sepanjang sejarah internet bahasa ini adalah bahasa skrip pertama untuk web. Bahasa ini adalah bahasa pemrograman untuk memberikan kemampuan tambahan terhadap bahasa HTML dengan mengijinkan pengeksekusian perintah perintah di sisi user, yang artinya di sisi browser bukan di sisi server web. 

Javascript bergantung kepada browser yang memanggil halaman web yang berisi skrip-skrip dari Javascript dan tentu saja terselip di dalam dokumen HTML. Javascript juga tidak memerlukan kompilator atau penterjemah khusus untuk menjalankannya (pada kenyataannya kompilator Javascript sendiri sudah termasuk di dalam browser tersebut). Lain halnya dengan bahasa “Java” (dengan mana Javascript selalu di banding bandingkan) yang memerlukan kompilator khusus untuk menterjemahkannya di sisi user/klien.

Java dan Javascript merupakan hal yang berbeda, Java diperlukan compiler untuk menjalankan kode-kodenya, sedangkan Javascriptt bisa langsung dieksekusi pada browser tanpa perlu mengcompilenya. Karena Javascript bisa langsung dieksekusi pada browser Anda jangan berharap dapat menyembunyikan script-script yang anda buat. Script-script akan dikirim pada client untuk dieksekusi.

Javascript merupakan bahasa yang case sensitive, jadi penulisan huruf besar dan huruf kecil sangat berpengaruh. Anda salah menulis huruf kecil menjadi huruf besar maka kode akan error dan tidak bisa dieksekusi.


Berikut adalah contoh kode Javascript
Say hello to Javascript :



<html>
<head>
<title>Say Hello To Javascript</title>
</head>
<body>
<pre>
<script language=javascript>
document.write("Hello World!! \nMy name is Javascript");
</script>
</pre>
</body>
</html>




Atau lihat hasilnya disini.
Read more »
These icons link to social bookmarking sites where readers can share and discover new web pages.
  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Google
  • Furl
  • Reddit
  • Spurl
  • StumbleUpon
  • Technorati

Tutorial Membuat Halaman Redirect Menggunakan Javascript, PHP, atau HTML

Dalam pemrograman web diperlukan sebuah fungsi untuk redirect ke halaman lain. Yang dimaksud redirect adalah mengalihkan suatu halaman web ke halaman yang lainnya. Fungsinya seperti ini nih, coba anda buka link ini http://h1.ripway.com/binttackxx/contohRedirect.html, apa yang terbuka? anda malah akan dibawa ke halaman http://blajar-komputer.blogspot.com/. Seperti itulah salah satu kegunaan dari fungsi redirect ini.



Langsung saja ke tutorial cara membuat halaman redirect ini:

Ada banyak cara untuk membuat suatu halaman menjadi teralihkan ke halaman lain. Kali ini saya ingin memberikan cara rediret menggunakan HTML, Javascript, dan juga PHP. Hasil dari halaman yang dibuat dengan PHP, HTML ataupun Javascript akan sama, hanya saja penulisan source codenya yang berbeda.

  • Oke, langsung saja yang pertama, berikut adalah cara redirect menggunakan HTML:

<meta http-equiv="refresh" content="0;http://blajar-komputer.blogspot.com/">

langsung saja tuliskan kode seperti itu dihalaman anda, peletakannya sebelum tag <body>. Angka 0 yang dimaksud pada source code tersebut adalah lamanya halaman tersebut dibuka, jika diisi 5 maka halaman tersebut baru teralihkan setelah 5 detik. dan http://blajar-komputer.blogspot.com/ adalah halaman tujuan.

  • Berikutnya adalah cara redirect menggunakan Javascript:

window.location.href="http://blajar-komputer.blogspot.com/"

Penggunaannya dapat disesuaikan dimanapun pada halaman web. Jika anda ingin halaman tersebut langsung teralihkan pasang saja pada tag body, contohnya:


<html>
<body onload='window.location.href="http://blajar-komputer.blogspot.com/"'>
</body>
</html>



  • Dan yang terakhir menggunakan kode PHP:
<?php
?>


Namun jika anda menggunakan script PHP ini anda tidak boleh meletakan kode html yang dapat menampilkan sesuatu pada browser. Untuk amannya anda letakan saja kode ini di baris pertama pada source code.
Read more »
These icons link to social bookmarking sites where readers can share and discover new web pages.
  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Google
  • Furl
  • Reddit
  • Spurl
  • StumbleUpon
  • Technorati