Cara Membuat Shortcut Di Halaman Web Dengan JQuery Ternyata Sangat Mudah



Cara Membuat Shortcut Di Halaman Web PHP - ketika seorang programer mendapat proyek untuk membuat aplikasi, tentunya programmer berfikir aplikasi yang di bangun harus lebih interaktif dan user friendly dengan penggunanya…

Pengoprasian yang sangat mudah dan tidak membingungkan salah satu factor penting untuk membuat aplikasi…

Seorang programer berfikir agar aplikasi yang dia bangun bisa digunakan sangat nyaman dan menjadi pendongkrak popularitas agar nantinya seorang yang menerimanya bisa mengoprasikan dengan mudah.

Sebagai contoh aplikasi kasir yang berbasis desktop yang biasa kita temukan di supermarket terdekat, coba perhatikan ketika kasir input penjualan, pastinya kelihatan mudah dan cepat…

Bahkah untuk menyimpan hasil penjualan pun si kasir hanya menekan kombinasi keyboard untuk menyimpan hasil penjualan tanpa menggeser-geser mouse.

Jelas sekali jika si kasir menggunakan mouse transaksi akan berjalan lambat dan membuang waktu untuk menggeser mouse ke tombol simpan,, sedangkan pembelinya sudah mengantre..

Sungguh tidak kodusif…

Memang sebuah shortcut atau bisa di sebut jalan pintas harus di selipkan kedalam sebuah aplikasi untuk mempercepat kerja si user…

Maka dari itu untuk setiap aplikasi desktop pastinya mempunyai shortcut atau jalan pintas di setiap oprasi yang di inginkan.

Okee yang saya jelas itu aplikasi berbasi desktop.
Bagaimana jika aplikasi berbasi web yang di bangun menggunaka bahasa pemrograman PHP atau bahasa lainnya ?? apakah bisa menggunakan jalan pintas??

Jangan bingung sobat..

Jika sobat sedang mencari cara membuat shortcut keyboard di halaman web atau aplikasi berbasis web maka sobat benar sekali sudah mampir kesini…


Cara Membuat Shortcut Di Halaman Web PHP

Sudah sedikit saya singgung tadi bahwa shortcut itu berfungsi membuat kombinasi jalan pintas untuk menangani suatu proses di halaman web…

Memang salah satu kelebihan aplikasi desktop tersebut bisa menggunakan shortcut dengan mudah, tapi aplikasi berbasis web juga bisa dong…

Oke mari kita lanjut…
Untuk membuat shortcut di halaman web kita bisa menggunakan sebuah plugin dari JQueryCara penggunaanya tentulah sangat mudah..

Tinggal panggil fungsi dan tombol keyboard mana yang akan kita jadikan kombinasi shortcut.

Nah plugin yang saya gunakan ini bernama plugin shortcut yang bisa sobat download di website resminya http://www.openjs.com/scripts/events/keyboard_shortcuts/ dengan versi 2.01.B yang di buat oleh Binny V A ber licence BSD..

Dan jangan lupa plugin Jquery juga harus di sertakan ya, sobat bisa men-downloadya website resminya http://jquery.com/ atau ke duanya disni...

Baik setelah sobat mempunyai atau sudah download pluginnya, berikut cara penggunaannya.

Pertama buat folder di htdoc dengan nama tutorshortcut dan letakan plugin Jquery dan Shortcut didalam folder tersebut..

buka editor sobat masing-masing dan buat file index.php lalu copy saja script di bawah ini, jangan lupa file index.php juga letakan di dalam folder tutorshortcut.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title></title>
<script type="text/javascript" src="shortcut.js"></script>
<script type="text/javascript" src="jquery-1.8.3.js"></script>

<script type="text/javascript">
 $(document).ready(function() {
  
  shortcut.add("F2",function(){
  document.getElementById('judul').innerHTML="Hello World";  
  });
  shortcut.add("ctrl+o",function(){
  window.open('http://ijo-gading.com','_self');
  });
  shortcut.add("ctrl+g",function(){
  window.open('http://google.com','_self');
  });
  shortcut.add("d",function(){
  alert("Yakin Akan Menghapus Data");
  });
  shortcut.add("p",function(){
  window.print();
  });
 });
</script>
</head>
<body>
<div align="center">
 <h2>ijo-gading.com</h2>
 <h3 id="judul">Cara Membuat Shoutcut Di Halaman Web Dengan JQuery</h3>
  <p>Mengubaah Judul Menjadi "Hello World" [F2]</p>
  <p>Membuka Halaman IJO GADING [CTRL+O]</p>
  <p>Membuka Halaman GOOGLE [CTRL+G]</p>
  <p>Contoh Peringatan Penghapusan Data [D]</p>
  <p>Contoh Mencetak Halaman [P]</p>
 </div>
</body>
</html>

Setelah sobat buat file index.php dan meng-copy scritp di atas dan coba di run lewat browser sobat..
Pastikan sobat telah melakukan langkah yang benar dan pluginnya sudah berada di dalam folder shortcut.

Dan jangan lupa juga untuk memanggil/include plugin dengan benar.

Dari script di atas bisa kita lihat bahwa script shortcut.add("shortcut_key",function(){ perintah }); berguna untuk memanggil fungsi shortcut yang berada di plugin shortcut.js yang nantinya bisa menciptakan shortcut sendiri sesuai keinginan kita..

Pada fungsi shortcut.add() tadi sobat bisa merubah tombol keyboard mana yang akan sobat jadikan shortcut di halaman web. silahkan sobat coba-coba saja untuk belajar.

Nah setelah mengetahui script di atas..
Saya pastikan sobat mampu berkreasi dengan plugin yang saya share di blog ijo-gading.com dan di digunakan sebagai mana mestinya..

Dengan plugin shortcut.js sobat akan mampu membuat sebuah aplikasi berbasis web lebih interaktif dan sangat mudah untuk di gunakan…

Sekian dulu untuk postingan saya Cara Membuat Shortcut Di Halaman Web Dengan JQuery hari ini guys.

Jangan lupa di share jika artikel ini berguna dan sangat membantu sobat…

Silahkan berkomentar dengan sopan santun jika ada pertanyaan ya…

Keep calm and happy coding…!!!

Reaksi:
Share this with short URL:

Artikel Terkait Lainnya:

How to style text in Disqus comments:
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Hide Parser