Jquery Traverse

Traverse adalah bagaimana cara mencari suatu tag html (bisa dikenali dari tag, nama id atau nama class), yang selanjutnya akan diambil nilainya, pada praktek ini akan dikenalkan beberapa teknik jquery yang umum digunakan misalnya find, first,last dan melakukan penambahan tag dengan append, before atau after serta melakukan penghapusan tag dengan tag remove. Untuk praktek siswa, siswa akan diberikan tabel daftar harga dimana bila ada perubahan harga pada suatu lokasi maka total dari harga semua barang yang dibeli akan secara otomatis berubah.

JQuery Traverse

  • saat suatu dokumen HTML isinya sudah ditampilkan seluruhnya di browser dokumen itu disebut DOM(Dokucument OBject Model)
  • java script akan memberitahu apabila sudah file HTML sudah di panggil seluruhnya dengan memberi kode "i'm Ready"
  • berikut adalah bentuk penulisan untuk memastikan suatu program baru dijalankan apabila DOM sudah dipanggil

Data HTML

  • Buat file baru dengan nama prak-4.html dan lakukan copy paste kode berikut:
    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Prak 4 Traverse Jquery</title>
    </head>
    <body>
      <form action="#">
        <input type="button" value="satu"   onClick="satu();">
        <input type="button" value="dua"    onClick="dua();">
        <input type="button" value="tiga" id="tombol-ketiga" >
        <input type="button" value="empat"  onClick="empat();">
        <input type="button" value="lima" id="tombol-kelima">
      </form>  
      <ul id="kendaraan">Kendaraan
        <li>
          <ul id="darat">Darat
            <li>Sepeda</li>
            <li>Sepeda Motor</li>
            <li class="favorite">Mobil</li>
            <li class="tidak-favorite">Truk</li>
            <li>Bis</li>
          </ul>
        </li>
        <li>
          <ul id="laut">Laut
            <li class="favorite">Kapal</li>
            <li>Boat</li>
            <li class="tidak-favorite">Perahu Layar</li>
          </ul>
        </li>
        <li>
          <ul id="udara">Udara
            <li class="favorite">Pesawat</li>
            <li>Helikopter</li>
            <li class="tidak-favorite">Balon Udara</li>
          </ul>
        </li>
      </ul>

      <script src="js/jquery-2.2.3.min.js"></script>
      <script src="prak-4.js"></script>
    </body>
    </html>
  • Buat file baru dengan nama prak-4.js dan lakukan copy paste kode berikut:
    function satu() { 
      $("li").text("Sepeda Ontel");                        // mengganti semua tag li
      $("#darat li").text("Sepeda Ontel");                 // tag li yang merupakan cabang dari id darat
      $("#darat li:odd").text("Sepeda Ontel");             // tag li dari id darat yang ganjil

      // Lebih Cepat
      $("#darat").find("li").text("Sepeda Ontel");         // id darat, semua tag li
      $("#darat").find("li").first().text("Sepeda Ontel"); // id darat, tag li yang pertama saja
      $("#darat").find("li").last().text("Sepeda Ontel");  // id darat, tag li yang terakhir

      $("#darat").find("li").first().next().text("Sepeda Ontel");  // id darat li yang kedua
      $("#darat").find("li").last().prev().text("Sepeda Ontel");  // id darat li yang keempat
      $("#darat").parent().text("Sepeda Ontel");          // parent dari id darat yang diganti
      $("#darat").children().text("Sepeda Ontel");        // mengganti semua tag child dari id darat
    }

    function dua() {
    // Menambahkan tag html dengan append, after dan before
    var bemo = $("<li>Bemo</li>");   // membuat kode html dengan jquery untuk disisipkan

      $("#darat").append(bemo);                    // dimasukkan sebagai anak terakhir
      $("#darat").find("li").first().after(bemo);  // ditempatkan dibawahnya (level sama)
      $("#darat").find("li").first().before(bemo); // ditempatkan diatasnya (level sama)
      $("#darat").find("li").first().remove();     // menghapus tag
    }


    function empat() {
    // menggunakan perintah closest
      $('.favorite').closest("#darat").find(".tidak-favorite").text("Sepeda Ontel");
    }

    $(document).ready(function(){
      // untuk function tiga
       $('#tombol-ketiga').on('click', function() {
         $(this).remove();
       });
     });

Praktek siswa

  • Buat file baru dan beri nama prak-4a.html
    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Prak 4 Traverse table</title>
      <link rel="stylesheet" href="css/bootstrap.min.css">
    </head>
    <body> 
      <form action="#">
        <div class="table-responsive">
        <table class="table table-bordered">
          <thead id="judul">
            <tr>
              <th>Nama Barang</th>
              <th>Harga</th>
              <th>banyak</th>
              <th>Total</th>
              <th></th>
            </tr>
          </thead>
          <tbody id="detil">
            <tr class="baris">
              <td><input type="text" name="nb" class="form-control namabarang"></td>
              <td><input type="text" name="hb" class="form-control harga"></td>
              <td><input type="text" name="bb" class="form-control banyak"></td>
              <td><input type="text" name="tb" class="form-control total"></td>
              <td>
                <input type="button" value="hitung" class="btn btn-info hitung">
                <input type="button" value="x" class="btn btn-danger tombol-hapus">
              </td>       
            </tr>
            <tr class="baris">
              <td><input type="text" name="nb" class="form-control namabarang"></td>
              <td><input type="text" name="hb" class="form-control harga"></td>
              <td><input type="text" name="bb" class="form-control banyak"></td>
              <td><input type="text" name="tb" class="form-control total"></td>
              <td>
                <input type="button" value="hitung" class="btn btn-info hitung">
                <input type="button" value="x" class="btn btn-danger tombol-hapus">
              </td> 
            </tr>    
            <tr class="baris">
              <td><input type="text" name="nb" class="form-control namabarang"></td>
              <td><input type="text" name="hb" class="form-control harga"></td>
              <td><input type="text" name="bb" class="form-control banyak"></td>
              <td><input type="text" name="tb" class="form-control total"></td>
              <td>
                <input type="button" value="hitung" class="btn btn-info hitung">
                <input type="button" value="x" class="btn btn-danger tombol-hapus">
              </td> 
            </tr>
            <tr class="baris ">
              <td colspan="3">
                <input type="button" value="Total-all" class="btn btn-success total-semua">
              </td>
              <td><input type="text" name="tb" class="form-control" id="total-all"></td>
              <td></td> 
            </tr>

          <tfoot></tfoot>
        </table>    
      </form>
      <script src="js/jquery-2.2.3.min.js"></script>
      <script src="js/tether.min.js"></script>
      <script src="js/bootstrap.min.js"></script>
      <script src="prak-4a.js"></script>
    </body>
    </html>
  • Buat file baru dan beri nama prak-4a.js
    $(document).ready(function(){

      $(".tombol-hapus").on('click', function() {
         // soal 1
      });

      $(".harga").on('change', function() {
        vharga = $(this).closest(".baris").find(".harga").val();
        // soal 2
      });

      // soal 3

      // soal 4

      $(".total-semua").on('click', function() {
        var totalNilai = 0;
        $('.total').each(function(index){
          // soal 5
        });
        // soal 5
      });

      alert("Jquery 4a ready");
    });
  • Tampilan web seperti gambar dibawah ini

Soal untuk siswa

  • Soal 1: untuk soal pertama siswa diminta agar bila diklik tombol hapus, maka satu baris yang dipilih itu terhapus semua
  • Soal 2: siswa diminta melanjutkan program yang ada bila ada perubahan harga, maka program jquery akan secara otomatis menghitung ulang dan menampilkan hasilnya kembali pada kolom total
  • soal 3: siswa bisa mencontoh soal nomer 2 dan membuat program bila kolom jumlah diubah maka total di baris itu juga akan berubah
  • soal 4: bila di klik tombol hitung maka akan menhitung total pada baris itu.
  • soal 5: bila di klik tombol total-all yang berwarna hijau maka akan menambahkan semua total yang ada.
  • soal 6 (Bonus): tidak harus dikerjakan, bila ada perubahan harga dan jumlah maka komputer akan melakukan total ulang baris itu dan merubah nilai totalnya yang ada di paling bawah.