Javascript Plugin Untuk Keyboard-Code

 Author : hadinug, 13 June, 2014, Komentar

javascript keyboard kode in crud


Javascript menyediakan beberapa kode atau library yang memungkinkan kita untuk mengirimkan sebuah event dengan menekan sebuah tombol dari keyboard. Dari kode tersebut, kita bisa mensimulasikan nya dalam sebuah event atau url yang mengena pada tombol keyboard yang kita tekan. Anda bisa melihat kode yang ditampilkan dari keyboard di http://www.hadinug.net/labs/keycode.html. Dimana setiap tombol yang anda tekan akan keluar sebuah kode yang nanti nya bisa kita handling dengan sebuah library javascript sederhana.



Terinspirasi dari penggunaan javascript keycode pada beberapa project yang kami tangani, dimana beberapa client meminta kami untuk membuat aplikasi yang penggunaannya mirip sebuah aplikasi desktop. Nah pada tutorial kali ini anda akan belajar bagaimana menggunakan atau mengimplementasikan javascript keycode dalam sebuah aplikasi CRUD php.


Note: tutorial kali ini hanyalah pengembangan dari tutorial sebelumnya tentang bagaimana membuat aplikasi CRUD php yang sedikit kami tambahkan sebuah library javascript keyboard-code.js yang memungkinkan anda untuk melakukan proses insert, update, delete dan refresh halaman dengan menekan kode yang berasal dari keyboard anda.


Keyboard-code.js

Librari ini akan membaca setiap elemen yang memiliki parameter "keyboard-kode" untuk melakukan sebuah event. Anda bisa mengubah nya sesuka hati anda sesuai dengan kebutuhan.

/**
 * @author hadinug (http://www.hadinug.net) 
 * @returns {undefined}
 * @description This simple library js for keyboard kode, for mor information about keycode in javascript
 * please visit http://hadinug.net/labs/keycode.html
 * @example <a href="http://example.com/insert" keyboard-code="ctrl+i">Insert</a>
 */
!function($) {
    $(function() {
        $('html').on("keydown", function(e) {
            (e.keyCode) ? key = e.keyCode : key = e.which;
            // ctrl+s
            if (key === 83 && e.ctrlKey) {
                $('body').find('[keyboard-code="ctrl+s"]').click();
                e.preventDefault();
            }
            // ctrl+f5
            if ((key === 116 && e.ctrlKey) || key === 116) {
                if ($('body').find('a[keyboard-code="ctrl+f5"]').length > 0) {
                    var url = $('body').find('a[keyboard-code="ctrl+f5"]').attr('href');
                    if (url !== undefined) {
                        window.location = url;
                    }
                } else {
                    $('body').find('a[keyboard-code="ctrl+f5"]').click();
                }
                e.preventDefault();
            }

        });
    });
}(window.$);

$(document).ready(function() {
    $('body').find('tr[tabindex]').eq(0).focus().css({
        'background': 'rgb(228, 250, 228)'
    });
    $('body').on("keydown", function(e) {
        col = 1;
        var current = $('body').find('tr[tabindex]:focus').attr('tabindex');
        (e.keyCode) ? key = e.keyCode : key = e.which;
        switch (key) {
            case 37:
                next = current - 1;
                break; 		//left
            case 38:
                next = current - col;
                break; 	 //up            
            case 39:
                next = (1 * current) + 1;
                break; 	//right
            case 40:
                next = (1 * current) + col;
                break; 	//down
            default:

                break;

        }
        if (key === 37 | key === 38 | key === 39 | key === 40) {
            $('body').find('tr[tabindex]').css({
                'background': 'transparent'
            });
            $('body').find('tr[tabindex="' + next + '"]').focus().css({
                'background': 'rgb(228, 250, 228)'
            }).on('keydown', function(e) {
                (e.keyCode) ? key = e.keyCode : key = e.which;
                // ctrl+d
                if (key === 68 && e.ctrlKey) {
                    var url = $(this).find('a[keyboard-code="ctrl+d"]').attr('href');
                    if (url !== undefined) {
                        window.location = url;
                    }
                    e.preventDefault();
                }
                // ctrl+u
                if (key === 85 && e.ctrlKey) {
                    var url = $(this).find('a[keyboard-code="ctrl+u"]').attr('href');
                    if (url !== undefined) {
                        window.location = url;
                    }
                    e.preventDefault();
                }
            });
            current = next;
        }

    });
});

Keterangan: Lihat pada script diatas, beberapa hal mungkin perlu sedikit perhatian atau fokus.
  1. if(key === 83 && e.ctrlKey) , program dalam block ini akan dijalankan ketika anda menekan pada keyboard anda "CTRL+S"
  2. if ((key === 116 && e.ctrlKey) || key === 116), akan dijalankan ketika anda menekan "CTRL+F5 atau F5"
  3. Table row focus, dimana script ini akan membaca table row yang memiliki attribut "tabindex". Tekan arah, atas, bawah, samping dan kanan.

 switch (key) {
            case 37:
                next = current - 1;
                break; 		//left
            case 38:
                next = current - col;
                break; 	 //up            
            case 39:
                next = (1 * current) + 1;
                break; 	//right
            case 40:
                next = (1 * current) + col;
                break; 	//down
            default:

                break;

        }

Memanggil dan menggunakan library keyboard-code.js

Pemanggilan dan penggunaan librari js ini sangat sederhana, namun anda harus memasukan librari javascript jQuery terlebih dahulu sebelum menampung atau memanggil librari ini
Memanggil
<script type="text/javascript" src="<?php echo site_url('views/assets/js/jquery.1.7.2.min.js') ?>"></script>
<script type="text/javascript" src="<?php echo site_url('views/assets/js/keyboard-code.js') ?>"></script>

Menggunakan
Anda tidak perlu menginisiasi library javascript seperti anda menggunakan plugin jquery pada umumnya, cukup dengan menambbahkan attribut pada elemen yang berisi sebuah event ex:

<input type="submit" name="submit" value="submit" keyboard-code="ctrl+s" class="btn btn-primary"> {press ctrl+s}

Untuk table row, tambahkan sebuah attribut tabindex pada setiap baris arau row table

<table collspan="0" rowspan="0" border="0">
    <tr tabindex="0">
        <th style="width: 30px">No</th>
        <th style="width: 30%">Username</th>
        <th style="width: 58%">Password</th>
        <th colspan="2" style="width: 50px">#</th>
    </tr>
    <?php
    $no = $offset + 1; 
    foreach ($rs as $row) { 
        ?>
    <tr tabindex="<?php echo $no ?>">
      	<td><?php echo $no ?></td>
	<td><?php echo $row['username'] ?></td>
	<td><?php echo $row['password'] ?></td>
	<td style="text-align: center"><a title="press ctrl+d" keyboard-code="ctrl+d" href="<?php echo site_url('pengguna/delete/'.$row['id']) ?>"><i class="icon-trash"></i></a></td>
	<td style="text-align: center"><a title="press ctrl+u" keyboard-code="ctrl+u" href="<?php echo site_url('pengguna/update/'.$row['id']) ?>"><i class="icon-pencil"></i></a></td>
    </tr>
        <?php
        $no++;
    }
    ?>
</table>


Kesimpulan

Anda telah belajar bagaimana menggunakan javascript keycode atau keyboard kode dengan mengimplementasikannya dalam sebuah aplikasi CRUD php. Anda juga bisa memodifikasi kode librari js tersebut dengan menyesuaikan berdasarkan kebutuhan anda :-)

Download library keyboard-code.js dan lihat demonstrasinya di. http://www.hadinug.net/crud
 
Bagikan halaman ke sosial media
 
Tags :   javascript    key-code       

Tentang Penulis

writer hadinug
Web Developer di PT. Yafii Solusi Internasional

Link: http://ysi.co.id

   Komentar Anda