Wednesday, July 4, 2012

Tutorial Pembuatan Aplikasi Word Count Sedehana dengan jQuery

Word Count adalah suatu aplikasi untuk menghitung jumlah karakter yang kita ketikkan kedalam sebuah form isian. Misalnya, kita ingin mengirimkan sebuah SMS yang tidak boleh lebih dari 160 karakter menggunakan software SMS Gateway. Nah ketika kita mengetikkan setiap hurufnya, maka browser akan menunjukkan secara otomatis berapa jumlah karakter yang sudah kita ketik. Ini sangat perlu agar SMS yang kita kirimkan hanya di hitung 1 kali pengiriman SMS.
 
Untuk membuat aplikasi ini tidaklah sulit, bahkan boleh dikatakan cukup mudah. Plugin yang kita butuhkan adalah JQuery Versi 1.4. Plugin jQuery ini nantinya akan kita include kan kedalam file HTML/PHP kita dan dengan menambahkan sedikit fungsi aplikasi ini sudah bisa anda gunakan. Nah untuk menginclude plugin jQuery ini cukup mudah yaitu seperti kode di bawah ini :

  1.  
    2. 

  2. <html >
    3. 

  3. <head>
    4. 

  4. <title>Aplikasi Word Count Menggunakan Jquery</title>
    5. 

  5. <script language="javascript" src="jquery-1.4.js"></script>
    6. 

  6. </head>
    7. 

  7. <body>
    8. 

  8. </body>
    9. 

  9. </html>
    10. 

  10.  
    11.
Selanjutnya kita akan menambahkan sebuah function dari jQuery yang berfungsi untuk menghitung jumlah karakter yang kita ketikkan kedalam sebuah form isian. Nantinya identitas dari function ini akan dihubungkan dengan identitas form isian yang akan kita isi. Kode function jQuery ini akan diletakkan di header website kita yaitu antara tag dengan . Kode function ini akan terlihat seperti dibawah ini :
  1.  
    2. 

  2. <script>
    3. 

  3. $(document).ready(function(){   
    4. 

  4.   // Character counter 
    5. 

  5.   $('.word_count').each(function(){   
    6. 

  6.   var length = $(this).val().length;  
    7. 

  7.   $(this).parent().find('.counter').html( length + ' characters');  
    8. 

  8.   $(this).keyup(function(){  
    9. 

  9.      var new_length = $(this).val().length;  
    10. 

  10.      $(this).parent().find('.counter').html( new_length + ' characters');  
    11. 

  11.      });  
    12. 

  12.   });
    13. 

  13. });
    14. 

  14. </script>
    15. 

  15.  
    16.
Perhatikan pada kode diatas perhatikan bahwa identitas dari function itu adalah word_count. Perhatikan kode $('.word_count').each(function() . Nah identitas inilah juga yang akan kita buat sebagai identitas dari form isian yang akan kita buat, sehingga apapun yang kita ketikkan di form tersebut dapat terdetaksi oleh function jQuery ini.

Nah sekarang, mari kita buat form isian yang akan terhubung dengan function jQuery diatas. Kita misalkan kita memiliki sebuah form yang berguna untuk mengetikkan pesan SMS yang akan kita kirimkan. Form ini hanya berisi sebuah field saja, karena ini hanya contoh penggunaan aplikasi word Count jQuery ini saja. Form isian ini dapat kita lihat pada kode dibawah ini : 
  1.  
    2. 

  2. <tr valign="center">
    3. 

  3.     <td align="right" valign="center"><b>Message</b> : </td>
    4. 

  4.     <td><b><textarea class="word_count" cols="45" rows="5" name="message"></textarea>
    5. 

  5.     <br /><span class="counter"></span></b></td>    
    6. 

  6.     </tr>  
    7. 

  7.  
    8.

Perhatikan class dari form diatas adalah word_count yang sama dengan pada function jQuery tadi. Untuk lebih jelasnya, perhatikan kode di bawah ini :

  1. <textarea class="word_count" cols="45" rows="5" name="message"></textarea>
    2.

Sampai disini, kita sudah bisa menjalankan aplikasi Word Count dengan jQuery ini. Pada awalnya karakter yang di tunjuukan adalah 0 karakter karena anda belum mengetikkan apapun ke form. Namun begitu anda mengetikkan karakter, jumlah karakter itulah yang dihitung dan di tunjukkan di halaman web secara otomatis tanpa perlu reload atau refresh browser. Contohnya adalah seperti gambar dibawah ini :
aplikasi word count sederhana dengan jQuery
 Source:  http://aplikasiphp.com/


Anda ingin mencari refrensi dan contoh program lengkap ? Kami ada. Sekarang Anda bisa mencari Contoh Program PHP di situs ini : http://www.bunafitkomputer.com. Koleksi program lengkap di sana, proyek PHP dan MySQL, juga jQuery dan Framework. Bukunya juga ada.
Posted by at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)