• Belajar JQuery

    jquery

    Mengenal Jquery dan penggunanya

    Jquery adalah sebuah library framework JavaScript istilahnya jquery adalah pengembangan dari JavaScript yang sengaja dibuat untuk memudahkan kita untuk development sebuah website.

    Kegunaannya meliputi membuat efek efek dan keperluan lainnya seperti calendar grafic dan plugin plugin lainnya yang sangat membantu untuk mempercantik website anda.

    Sebelumnya saya juga sudah menjelaskan secara mudah penggunaan JavaScript untuk mempercantik tampilan website. 

    Hampir semua web development menggunakan jquery ini dikarenakan sang web developer tidak lagi menuliskan kata kata program javascript yang begitu panjang.
    jquery

    Fungsi Jquery

    untuk beberapa fungsinnya dan kelebihan jquery adalah   
    1. lebih mudah di mengerti
    2. lebih mudah digunakan
    3. ringan
    4. menuliskan sintax yang lebih pendek dengan fungsinya yang besar sekali
    5. Free : program ini sangat mudah digunakan dan mudah di download
    6. Bisa dikembangkan tergantung kemampuan kreativitas si web developer.

    Cara menggunakan jquery 

    ada dua cara yang bisa digunakan 
    1. Mengunakan secara online dengan menghubungkan file HTML dan file PHP
    2. Menggunakan secara offline sebaiknya kita mendowload dahulu file jquery tersebut dan bisa kita utak atik di notepad.dengan mengabungkan file HTML dan file PHP
    untuk cara pertama saya lebih menyukainya karena kita bisa langsung menganalisa apa yang terjadi baik itu kerusakan ataupun hal yang tidak kita inginkan.


    Langkah awal belajar Jquery

    Sebagai pemula, Anda mungkin ingin mulai melompat masuk dan mencoba hal-hal baru seperti melakukan ujicoba fungsionalitas dan kinerjanya. Dari perspektif pemula, berikut ini adalah beberapa langkah yang bisa Anda ikuti untuk bisa mengenal jQuery dengan lebih baik.

    Langkah 1 – Tambahkan referensi jQuery

    Ketika bekerja dengan jQuery, hal pertama yang harus dilakuan adalah dengan menambahkan referensi. Referensi ini biasaya ditaruh di bagian head (atas) dari kode website, referensi yang digunakan adalah sebagai berikut.
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    Untuk itu Anda juga bisa mendownload script jQuery tersebut ke komputer lokal Anda, silahkan download langusung dari website resmi https://jquery.com/download/
    Apabila Anda sudah mendownload jQuery pada komputer Anda maka bisa untuk menaruh script berikut ini pada bagian head di kode HTML website Anda.
    <script type="text/javascript" src="JS/jquery.min.js"></script>

    Langkah 2 – Penanganan Event jQuery

    Event seperti klik pada tombol, ketika tombol ditekan, ketika tombol tidak lagi ditekan, ketika mouse berada diatas sebuah elemen, ketika fokus, ketika field checkbox dipilih dan lain sebagainya, semua bisa di program dengan mudah berkat jQuery.
    Sebagai contoh, berikut ini kita akan mencoba untuk membuat program yang melakukan aksi ketika sebuah tombol di klik.
    <button id="myButton">Klik Disini</button>
    <script type="text/javascript" src="JS/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#myButton").click(function (e) {
                alert("Anda barus saja klik sebuah tombol");
            });
        });
    </script>
    Pada script diatas, kita menaruh event klik tombol didalam $(document).ready(function(){}).
    Ini karena untuk memberitahukan jQuery agar berjalan setelah seluruh halaman selesai dimuat. Semua kode jQuery harus ditaruh didalamnya.
    Mari kita lihat contoh yang lainnya, kita akan mencoba menampilkan sebuah pesan alert ketika tombol “Y” ditekan ketika kita berada pada halaman website.
    $(document).keyup(function (event) {
        if(event.which==89)
        {
            alert("Letter 'Y' is pressed");
        }
    });
    * Sebagai catatan angka 89 pada kode diatas adalah key event untuk tombol huruf “Y” di keyboard.

    Langkah 3 – Manipulasi DOM dengan jQuery

    Kita bisa melakukan banyak perubahan dalam DOM dengan sangat mudah menggunakan jQuery. 
    Apabila Anda pernah mencoba melakukan hal ini dengan JavaScript sebelumnya, maka kemungkinan besar Anda akan tahu bahwa itu sangat sulit untuk dilakukan dan membutuhkan kode yang cukup panjang. 
    Dengan jQuery ini bisa dilakukan dengan sangat mudah.
    Mari kita coba memanipulasi DOM sederhana utnuk mengujinya sendiri. Pada contoh ini, seseorang harus memilih ibukota Indonesia dari 8 buah pilihan yang disediakan. Opsi diberikan dalam tombol radio, ketika seseorang memilih pilihan yang salah, maka pesan “Salah” akan muncul. Ketika yang dipilih adalah pilihan yang tepat maka teks “Benar” akan ditampilkan.
    Kita akan membuat program diatas dengan menggunakan Event Click pada tombol radio dan menambahkan “paragraph” yang berisi teks “Benar” atau “Salah” disamping radio button.
    <div class="pertanyaan">
    Apa nama ibukota Indonesia?
    <ul style="list-style:none">
    	<li><input type="radio" value="Bandung" name="rdo">Bandung</li>
    	<li><input type="radio" value="Solo" name="rdo">Solo</li>
    	<li><input type="radio" value="Bekasi" name="rdo">Bekasi</li>
    	<li><input type="radio" value="Makassar" name="rdo">Makassar</li>
    	<li><input type="radio" value="Jakarta" name="rdo">Jakarta</li>
    	<li><input type="radio" value="Padang" name="rdo">Padang</li>
    	<li><input type="radio" value="Medan" name="rdo">Medan</li>
    	<li><input type="radio" value="Surabaya" name="rdo">Surabaya</li>
    </ul>
    </div>
    
    <script type="text/javascript">
    $(document).ready(function () {
    	$("input[type='radio']").click(function (e) {
    		if($(this).val()=="Jakarta")
    			$(this).parent().append('<p style="margin:0;padding-left:10px;color:red;">Benar</p>');
    		else
    			$(this).parent().append('<p style="margin:0;padding-left:10px;color:red;">Salah</p>');
    	});
    });
    </script>
    Sebagai catatan bahwa kode jQuery diatas, kita melakukan cek pada tombol radio ketika dia di klik dan kemudian mencari parent (elemen li). Pada perent tersebut kita menambahkan paragraph dengan teks sebagai informasi.
    Langkah 4 – jQuery AJAX
    Ketika ingin melakukan update data pada sebuah elemen tertentu pada halaman website tanpa melakukan refresh seluruh halaman maka kita biasanya membutuhkan AJAX. Dengan jQuery, kita dapat dengan mudah membuat permintaan AJAX dan memanggil fungsi server-side, seperti memanggil fungsi PHP atau ASP dengan kode jQuery dan menampilkan nilai hasilnya pada halaman HTML.
    Terkadang ktia mungkin memerlukan query pada database untuk pencatatan (seperti mencari rincian data pelanggan dari database berdasarkan namanya). Untuk kasus seperti itu kita bisa menggunaan jQuery untuk memanggil PHP / fungsi server-side lainnya yang nantinya akan mengembalikan rincian data pelanggan tersebut dan kemudian kita dapat menampilkan rincian tersebut kedalam sebuah div.
    Yang perlu untuk dicatat adalah bahwa kita melakukan ini pada sebagian halaman saja (partial) dan bukan pada seluruh halaman atau tidak perlu melakukan refresh karena akan memakan banyak waktu dan resources.
    <input type="text" id="nameInput"/><br/>
    <div id="customerDetails"></div>
    <input type="submit" id="submitButton" value="Submit"/>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#submitButton").click(function (e) {
                var result = ValidateAll();
                if (result == true) {
                    $.ajax({
                        type: "POST",
                        url: "jquery-ajax.aspx/GetCustomer",
                        contentType: "application/json; charset=utf-8",
                        data: '{"name":"' + $("#nameInput").val() + '"}',
                        dataType: "json",
                        success: function (msg) {
                            if (msg.d) {
                                $("#customerDetails").html(msg.d);
                            }
                        },
                        error: function (req, status, error) {
                            alert("Error try again");
                        }
                    });
                }
                return false;
            });
        });
    </script>
    Perhatikan bahwa dalam kode diatas kita memanggil fungsi “GetCustomer” dari halaman “jquery-ajax.php” dan melemparkan nama pelanggan sebagai sebuah parameter. Tugas dari fungsi tersebut adalah untuk memanggil detail data pelanggan dan mengembalikannya pada fungsi jQuery. Informasi yang didapat akan ditampilkan dengan fungsi jQuery didalam div customerDetails.

    Kesimpulan itulah beberapa tahap awal dari jQuery yang perlu untuk Anda pelajari sebagai pemula. Apabila Anda sudah menguasai langkah diatas maka Anda kemungkinan akan mudah untuk menguasai langkah selanjutnya dalam mempelajari jQuery 

  • 0 komentar:

    Posting Komentar

    Over 600,000+ Readers

    SEO SEM DIGITAL MARKETING

    94% OF CONSUMERS SEARCH ONLINE BEFORE MAKING A PURCHASE Not all search listing on page one of Google are the same. So while you might be running Google AdWords or appear on Google Maps you are likely missing out on the bulk of the business.Everyone wants to be on the first page, but not everyone deserves to be there. Your business, brand and website have to earn that right. Google now use over 200 signals in their algorithm for scoring and last year, there were over 540 quality improvements to their search algorithm alone.