Promo Lebaran, Kelas Online CODEPOLITAN Cukup Bayar Setengah Harga KLAIM PROMO
Lebih terarah belajar coding melalui Kelas Online dan Interactive Coding Lihat Materi Belajar

Membuat jQuery Plugin: Fancy String - Bagian 2

Ditulis oleh Ridwan Fajar, dipublikasi pada 23 Jan 2016 dalam kategori Tutorial
Membuat jQuery Plugin: Fancy String - Bagian 2 - CodePolitan.com

Pendahuluan

Anda sudah dapat melihat bagaimana membuat jQuery plugin di artikel "Membuat jQuery Plugin: Fancy String - Bagian 1". Untuk itu akan kita lanjutkan dengan membuat beberapa fitur lainya seperti:

  • mengubah semua huruf pada kata menjadi huruf kecil (toUpperCase)
  • mengubah semua huruf pada kata menjadi huruf besar (toLowerCase)
  • mengubah huruf terakhir menjadi huruf besar (uppercaseLastLetter)
  • mengubah huruf menjadi besar kecil (zigzag)
  • menukar huruf kapital menjadi huruf kecil dan sebaliknya (swapcase)
  • mengubah kata menjadi kata alay (simpleAlay)
  • mengubah kata menjadi kata djadoel atau Indonesia tempo dulu. (djadoel)

Mengubah Function Fancy String

Sekarang kita mulai dengan mengubah pilihan pada switch yang terdapat di dalam function fancy_string()

--- kode jquery.fancy-string.js 1 ---

(function($){
    $.fn.fancy_string = function(settings)
    {
        console.log('memanggil fancy string...');

        var opts = {
            mode : "",
        };

        var opts = $.extend(opts, settings);
        var raw_text = $(this).html();
        var result_text = raw_text; 

        switch (opts.mode){
            case "uppercase": 
                result_text = raw_text.toUpperCase();
            break;
            case "lowercase": 
                result_text = raw_text.toLowerCase();
            break;
            case "title": 
                raw_text = result_text = raw_text.toLowerCase();
                result_text = title(raw_text);
            break;
            case "uppercase_last_letter": 
                result_text = uppercaseLastLetter(raw_text);
            break;
            case "zigzag": 
                result_text = zigzag(raw_text);
            break;
            case "swapcase": 
                result_text = swapcase(raw_text);
            break;
            case "simple_alay": 
                result_text = simpleAlay(raw_text);
            break;
            case "djadoel": 
                result_text = djadoel(raw_text);
            break;
            default:
                result_text = raw_text;
            break;
        }

        $(this).html(result_text);

    };

    // kode lain akan ditulis dibawah

})(jQuery);

Untuk fitur toUpperCase dan toLowerCase, tidak diperlukan function tersendiri karena sudah terdapat built-in function Javascript yang sudah menangani masalah tersebut. Kita langsung saja membuat function uppercaseLastLetter

--- kode jquery.fancy-string.js 2 ---

(function($){

    // ada kode sebelumnya silahkan scroll keatas

    function title(raw_text)
    {
        var word_list = raw_text.trim().split(' ');

        var temp_word_list = [];
        word_list.forEach(function(word){
            var temp_word = word.replace(word.charAt(0), word.charAt(0).toUpperCase());
            temp_word_list.push(temp_word);
        });

        return temp_word_list.join(' ');
    };  

    function uppercaseLastLetter(raw_text)
    {
        var word_list = raw_text.trim().split(' ');

        var temp_word_list = [];
        word_list.forEach(function(word){
            var last_index = word.length-1;
            var temp_word = word.replace(word.charAt(last_index), word.charAt(last_index).toUpperCase());
            temp_word_list.push(temp_word);
        });

        return temp_word_list.join(' ');
    };  

    // kode selanjutnya akan ditulis setelah komentar ini

})(jQuery);

Pada fitur zigzag kita akan menggunakan operasi modulus untuk mengetahui huruf pada posisi genap dan ganjil. Huruf pada indeks genap sebuah kata akan diubah menjadi huruf kecil, sebaliknya akan diubah ke huruf kapital.

--- kode jquery.fancy-string.js 3 ---

(function($){

    // ada kode sebelumnya silahkan scroll keatas

    function uppercaseLastLetter(raw_text)
    {
        var word_list = raw_text.trim().split(' ');

        var temp_word_list = [];
        word_list.forEach(function(word){
            var last_index = word.length-1;
            var temp_word = word.replace(word.charAt(last_index), word.charAt(last_index).toUpperCase());
            temp_word_list.push(temp_word);
        });

        return temp_word_list.join(' ');
    };  

    function zigzag(raw_text)
    {
        console.log('zigzag....')
        var word_list = raw_text.trim().split(' ');
        var temp_word_list = [];
        word_list.forEach(function(word){
            var temp_word = "";
            for (var i = 0; i < word.length; i++)
            {
                if (i % 2 == 1)
                {
                    temp_word += word[i].toLowerCase();
                }
                else
                {
                    temp_word += word[i].toUpperCase();
                }

            }
            console.log(temp_word);
            temp_word_list.push(temp_word);
        });

        return temp_word_list.join(' ');
    };  

    // kode selanjutnya akan ditulis setelah komentar ini

})(jQuery);

Pada fitur swapcase kita akan memeriksa apakah sebuah huruf adalah huruf kapital atau bukan. Jika asalnya kapital akan diubah ke huruf kecil. Begitupun sebaliknya

--- kode jquery.fancy-string.js 4 ---

(function($){

    // ada kode sebelumnya silahkan scroll keatas

    function zigzag(raw_text)
    {
        console.log('zigzag....')
        var word_list = raw_text.trim().split(' ');
        var temp_word_list = [];
        word_list.forEach(function(word){
            var temp_word = "";
            for (var i = 0; i < word.length; i++)
            {
                if (i % 2 == 1)
                {
                    temp_word += word[i].toLowerCase();
                }
                else
                {
                    temp_word += word[i].toUpperCase();
                }

            }
            console.log(temp_word);
            temp_word_list.push(temp_word);
        });

        return temp_word_list.join(' ');
    };  

    function swapcase(raw_text)
    {
        var word_list = raw_text.trim().split(' ');

        var temp_word_list = [];
        word_list.forEach(function(word){
            var temp_word = "";
            for (var i = 0; i < word.length; i++)
            {
                if (word[i] == word[i].toUpperCase())
                {
                    temp_word += word[i].toLowerCase();
                }
                else
                {
                    temp_word += word[i].toUpperCase();
                }
            }

            temp_word_list.push(temp_word);
        });

        return temp_word_list.join(' ');
    };  

    // kode selanjutnya akan ditulis setelah komentar ini

})(jQuery);

Pada fitur simpleAlay kita akan mengubah huruf 'a' menjadi '4', 'i' menjadi '1', 'e' menjadi '3', dan 'o' menjadi '0'

--- kode jquery.fancy-string.js 5 ---

(function($){

    // ada kode sebelumnya silahkan scroll keatas

    function swapcase(raw_text)
    {
        var word_list = raw_text.trim().split(' ');

        var temp_word_list = [];
        word_list.forEach(function(word){
            var temp_word = "";
            for (var i = 0; i < word.length; i++)
            {
                if (word[i] == word[i].toUpperCase())
                {
                    temp_word += word[i].toLowerCase();
                }
                else
                {
                    temp_word += word[i].toUpperCase();
                }
            }

            temp_word_list.push(temp_word);
        });

        return temp_word_list.join(' ');
    };  

    function simpleAlay(raw_text)
    {
        var word_list = raw_text.trim().split(' ');

        var temp_word_list = [];
        word_list.forEach(function(word){
            var temp_word = "";
            for (var i = 0; i < word.length; i++)
            {
                if (word[i].toLowerCase() == 'a')
                {
                    temp_word += '4';
                }
                else if (word[i].toLowerCase() == 'i')
                {
                    temp_word += '1';
                }
                else if (word[i].toLowerCase() == 'e')
                {
                    temp_word += '3';
                }
                else if (word[i].toLowerCase() == 'o')
                {
                    temp_word += '0';
                }
                else {
                    temp_word += word[i];
                }
            }

            temp_word_list.push(temp_word);
        });

        return temp_word_list.join(' ');
    };  

    // kode selanjutnya akan ditulis setelah komentar ini

})(jQuery);

Pada fitur djadoel kita akan mengubah huruf 'u' menjadi 'oe', 'j' menjadi 'dj', 'y' menjadi 'j', dan 'c' menjadi 'tj'

--- kode jquery.fancy-string.js 6 ---

(function($){

    // ada kode sebelumnya silahkan scroll keatas

    function simpleAlay(raw_text)
    {
        var word_list = raw_text.trim().split(' ');

        var temp_word_list = [];
        word_list.forEach(function(word){
            var temp_word = "";
            for (var i = 0; i < word.length; i++)
            {
                if (word[i].toLowerCase() == 'a')
                {
                    temp_word += '4';
                }
                else if (word[i].toLowerCase() == 'i')
                {
                    temp_word += '1';
                }
                else if (word[i].toLowerCase() == 'e')
                {
                    temp_word += '3';
                }
                else if (word[i].toLowerCase() == 'o')
                {
                    temp_word += '0';
                }
                else {
                    temp_word += word[i];
                }
            }

            temp_word_list.push(temp_word);
        });

        return temp_word_list.join(' ');
    };  

   function djadoel(raw_text)
    {
        var word_list = raw_text.trim().split(' ');

        var temp_word_list = [];
        word_list.forEach(function(word){
            var temp_word = "";
            for (var i = 0; i < word.length; i++)
            {
                if (word[i].toLowerCase() == 'u')
                {
                    temp_word += 'oe';
                }
                else if (word[i].toLowerCase() == 'j')
                {
                    temp_word += 'dj';
                }
                else if (word[i].toLowerCase() == 'y')
                {
                    temp_word += 'j';
                }
                else if (word[i].toLowerCase() == 'c')
                {
                    temp_word += 'tj';
                }
                else {
                    temp_word += word[i];
                }
            }

            temp_word_list.push(temp_word);
        });

        return temp_word_list.join(' ');
    };  

})(jQuery);

Contoh Pemakaian

Pemakaian fitur yang telah dibangun diatas hampir sama pada tutorial sebelumnya. Anda tinggal melewatkan mode yang diinginkan.

<!DOCTYPE html>
<html>
    <head>
        <title>Membuat Plugin jQuery</title>
    </head>
    <body>
        <div style="margin:0 auto; padding:50px">
            <p class="fancy-string-1">
                Codepolitan merupakan portal pemrograman Indonesia yang mewadahi para pehobi pemrograman dan ilmu komputer di Indonesia. Codepolitan menyajikan berbagai informasi seputar tutorial, catatan rilis, ulasan acara, perangkat lunak terbaru hingga kejutan di pekan tertentu.
            </p>
            <p class="fancy-string-2">
                Codepolitan merupakan portal pemrograman Indonesia yang mewadahi para pehobi pemrograman dan ilmu komputer di Indonesia. Codepolitan menyajikan berbagai informasi seputar tutorial, catatan rilis, ulasan acara, perangkat lunak terbaru hingga kejutan di pekan tertentu.
            </p>
            <p class="fancy-string-3">
                Codepolitan merupakan portal pemrograman Indonesia yang mewadahi para pehobi pemrograman dan ilmu komputer di Indonesia. Codepolitan menyajikan berbagai informasi seputar tutorial, catatan rilis, ulasan acara, perangkat lunak terbaru hingga kejutan di pekan tertentu.
            </p>
            <p class="fancy-string-4">
                Codepolitan merupakan portal pemrograman Indonesia yang mewadahi para pehobi pemrograman dan ilmu komputer di Indonesia. Codepolitan menyajikan berbagai informasi seputar tutorial, catatan rilis, ulasan acara, perangkat lunak terbaru hingga kejutan di pekan tertentu.
            </p>
            <p class="fancy-string-5">
                Codepolitan merupakan portal pemrograman Indonesia yang mewadahi para pehobi pemrograman dan ilmu komputer di Indonesia. Codepolitan menyajikan berbagai informasi seputar tutorial, catatan rilis, ulasan acara, perangkat lunak terbaru hingga kejutan di pekan tertentu.
            </p>
            <p class="fancy-string-6">
                Codepolitan merupakan portal pemrograman Indonesia yang mewadahi para pehobi pemrograman dan ilmu komputer di Indonesia. Codepolitan menyajikan berbagai informasi seputar tutorial, catatan rilis, ulasan acara, perangkat lunak terbaru hingga kejutan di pekan tertentu.
            </p>
            <p class="fancy-string-7">
                Codepolitan merupakan portal pemrograman Indonesia yang mewadahi para pehobi pemrograman dan ilmu komputer di Indonesia. Codepolitan menyajikan berbagai informasi seputar tutorial, catatan rilis, ulasan acara, perangkat lunak terbaru hingga kejutan di pekan tertentu.
            </p>
            <p class="fancy-string-8">
                Codepolitan merupakan portal pemrograman Indonesia yang mewadahi para pehobi pemrograman dan ilmu komputer di Indonesia. Codepolitan menyajikan berbagai informasi seputar tutorial, catatan rilis, ulasan acara, perangkat lunak terbaru hingga kejutan di pekan tertentu.
            </p>
        </div>
        <script type="text/javascript" src="assets/js/jquery.min.js"></script>
        <script type="text/javascript" src="assets/js/jquery.fancy-string.js"></script>
        <script type="text/javascript">
            $('p.fancy-string-1').fancy_string({'mode':'uppercase'});
            $('p.fancy-string-2').fancy_string({'mode':'lowercase'});
            $('p.fancy-string-3').fancy_string({'mode':'title'});
            $('p.fancy-string-4').fancy_string({'mode':'uppercase_last_letter'});
            $('p.fancy-string-5').fancy_string({'mode':'zigzag'});
            $('p.fancy-string-6').fancy_string({'mode':'swapcase'});
            $('p.fancy-string-7').fancy_string({'mode':'simple_alay'});
            $('p.fancy-string-8').fancy_string({'mode':'djadoel'});
        </script>
    </body>
</html>

[caption id="attachment_7206" align="aligncenter" width="700"]hasil penggunaan fancy string hasil penggunaan fancy string[/caption]

Penutup

Setelah Anda memahami cara membuat jQuery plugin Anda dapat menambahkan berbagai fitur tambahan untuk menambah keragaman fitur dari jQuery plugin yang Anda kembangkan. Semoga semakin banyak pembuat jQuery plugin dari Indonesia.

Source Code Lengkap

Referensi

  • Learning jQuery
  • jQuery API Documentation
  • W3Schools - jQuery
  • TutorialsPoint - jQuery

(rfs)



background

Gabung CodePolitan Membership

Ingin belajar coding secara online dengan lebih terarah? Gabung sekarang dalam program Premium Membership di CodePolitan. Dapatkan ratusan modul belajar pemrograman premium dalam beragam format dengan materi silabus lengkap dan tersusun rapi dari awal hingga mahir.

LIHAT MATERI BELAJAR GABUNG MEMBERSHIP