Menggunakan Elemen HTML dalam mewakili data

Pada praktek ini akan dijelaskan penggunaan form dengan memanfaatkan bootstrap sehingga tampilan dapat lebih menarik dan rapi, elemen web yang digunakan adalah dropdown dan checkbox, program akan memilih gambar secara otomatis setiap kali kita mengubah pilihan pada drow down dan secara otomatis harga total makan juga kan berubah

Penggunaan Elemen elemen web

Langkah Praktek

  • Buat file baru dan beri nama prak-10.html
    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Sushi Han Restaurant</title>
      <link rel="stylesheet" href="css/bootstrap.min.css">
      <link rel="stylesheet" href="prak-10.css">
    </head>
    <body> 
      <div class="card">
        <div class="card-header">
          Sushi Han Restaurant
        </div>
        <div class="card-block">
          <form action="#">
            <div class="table-responsive">
            <table class="table table-bordered">
              <thead>
                <tr>
                  <th class="kolom-pilihan">pilihan</th>
                  <th class="kolom-makanan">makanan</th>
                  <th class="kolom-gambar">gambar</th>
                  <th class="kolom-harga">harga</th>
                  <th class="kolom-jumlah">jumlah</th>
                  <th class="kolom-subtotal">subtotal</th>
                </tr>
              </thead>
              <tbody id="detil">
                <tr>
                  <td><input type="checkbox"  class="form-control pilihan"></td>
                  <td>
                    <select class="form-control makanan">
                        <option value="Null_Image.png">makanan</option>
                        <option value="images/sushi.png">Sushi</option>
                        <option value="images/salad.png">Salad</option>
                        <option value="images/tempura.png">Tempura</option>
                    </select>
                  </td>
                  <td><img src="Null_Image.png" alt="gambar" class="gambar"></td>
                  <td><input type="text" name="bb" class="form-control harga"></td>
                  <td><input type="text" name="bb" class="form-control jumlah"></td>
                  <td><input type="text" name="bb" class="form-control subtotal"></td>       
                </tr>
                <tr>
                  <td><input type="checkbox" class="form-control pilihan"></td>
                  <td>
                    <select class="form-control makanan">
                        <option value="Null_Image.png">makanan</option>
                        <option value="images/sushi.png">Sushi</option>
                        <option value="images/salad.png">Salad</option>
                        <option value="images/tempura.png">Tempura</option>
                    </select>
                  </td>
                  <td><img src="Null_Image.png" alt="gambar" class="gambar"></td>
                  <td><input type="text" name="bb" class="form-control harga"></td>
                  <td><input type="text" name="bb" class="form-control jumlah"></td>
                  <td><input type="text" name="bb" class="form-control subtotal"></td>       
                </tr>
                <tr>
                  <td><input type="checkbox"  class="form-control pilihan"></td>
                  <td>
                    <select class="form-control makanan">
                        <option value="Null_Image.png">makanan</option>
                        <option value="images/sushi.png">Sushi</option>
                        <option value="images/salad.png">Salad</option>
                        <option value="images/tempura.png">Tempura</option>
                    </select>
                  </td>
                  <td><img src="Null_Image.png" alt="gambar" class="gambar"></td>
                  <td><input type="text" name="bb" class="form-control harga"></td>
                  <td><input type="text" name="bb" class="form-control jumlah"></td>
                  <td><input type="text" name="bb" class="form-control subtotal"></td>       
                </tr>                               
            </table>
          </form>
        </div>
      </div>

      <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-10.js"></script>
    </body>
    </html>
  • Buat file baru dan beri nama prak-10.css
    .gambar {
      display: none;
    }

    .table {
      width: 100%;
      vertical-align: middle;
      border-collapse: collapse;
      border-spacing: 0;
      margin-top: 1em;
      font-size: 1.2em;
    }
    /* total width harus max 100% */
    .table .kolom-pilihan  {  width: 10%; }
    .table .kolom-makanan  {  width: 20%; }
    .table .kolom-gambar   {  width: 20%; }
    .table .kolom-harga    {  width: 15%; }
    .table .kolom-jumlah   {  width: 15%; }
    .table .kolom-subtotal {  width: 20%; }

    .table tr {
      height: 2.5em;
    }

    .table thead {
      background-color: #6e8ba8;
      color: white;
    }
    .table thead th {
      text-align: center;
    }
  • Buat file baru dan beri nama prak-10.coffee
    jQuery ->

      hitungSubtotal = ->
        $('.subtotal').each -> 
          if $(this).closest("tr").find(".pilihan").prop('checked')
            # jumlah = +$(this).closest("tr")....
            # m = $(this).closest("tr").find(".makanan").val()
            # if m == "images/sushi.png"
            #   harga = 120000
            # else 
            #   
            # 
            # 
            # 
            # 
            # subtotal = .....
            # $(this).closest("tr").find(".harga").val(harga)
            # $(this).....
          else
            $(this).val(0)

      setGambar = ->
        namafile = $(this).val()
        $(this).closest("tr").find(".gambar").attr("src",namafile);
        $(this).closest("tr").find(".gambar").slideDown();
        hitungSubtotal()

      $(document).ready -> 
        $(document).on 'change', '.makanan',setGambar
        $(document).on 'change', '.pilihan',hitungSubtotal
        $(document).on 'change', '.harga',  hitungSubtotal
        $(document).on 'change', '.jumlah', hitungSubtotal
  • Buat file baru dan beri nama prak-10.js

Tugas Siswa

  • Soal 1: Buat dan lengkapi coffeescipt diatas
    • dengan ketentuan bila dipilih makanan sushi/salad/tempura
    • harga secara otomatis berubah, sesuai dengan daftar berikut
      • bila sushi harga 120.000
      • bila salad harga 60.000
      • bila tempura harga 80.000
    • bila tanda cek dipilih pada checkbox harga akan dihitung
    • tapi bila tidak ada tanda cek pada checkbox maka subtotal diisi 0
  • Soal 2:
    • pada file HTML tambahkan 1 kolom diskon yang diisi potongan harga
    • pastikan pada cssnya juga tidak lebih dari 100% jadi kolomnya juga bisa rapi
    • pada file coffee ubah program hitung subtotal agar dapat menghitung diskonnya juga
  • Soal 3:
    • pembayaran bill makanan harus disertai pajak
    • pada file HTML
      • maka buat pada baris di bagian bawah baris dengan gabungan tag tr dan td
      • buat 3 baris dengan nama
      • Total sementara
      • Pajak
      • Total akhir
    • pada file Coffee
      • tambahkan program pada bagian hitung subtotal sehingga juga menghitung pajak