Blog > Showing posts with label HTML. Show all posts

Showing posts with label HTML. Show all posts

Membuat Confirm Dialog Dengan Javascript

  • By blog
  • Postado Thursday, April 28, 2011 at 6:17 PM
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
0 Comments
Tags: , , ,

Membuat Drop Down Menu

  • By blog
  • Postado Wednesday, April 27, 2011 at 6:40 AM

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
0 Comments
Tags: , , ,

Berkenalan Dengan Javascript

  • By blog
  • Postado Saturday, April 23, 2011 at 5:34 AM
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
0 Comments
Tags: , , ,

Tutorial Membuat Halaman Redirect Menggunakan Javascript, PHP, atau HTML

  • By blog
  • Postado Friday, April 22, 2011 at 11:36 PM
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
0 Comments
Tags: , , ,