Coffee Script Class dan Inheritance

Pembuatan program javascript dengan berorientasi objek dapat dikatakan cukup sulit, karena itu dengan menggunakan bantuan bahasa coffeescript hal ini akan sangat membantu

Penggunaan Class

cara deklarasi

  • Buat file baru dan beri nama prak-9.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Coffeescript class dan inheritance</title>
  <link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body> 
  <h2>Contoh soal</h2>
  <form action="#">
    <div class="table-responsive">
    <table class="table table-bordered">
      <tbody id="detil">
        <tr class="baris">
          <td><h4>Persegi Panjang</h4></td>
          <td>Panjang: <input type="text" name="hb" class="form-control" id="panjang"></td>
          <td>Lebar: <input type="text" name="bb" class="form-control" id="lebar"></td>
          <td>Luas: <input type="text" name="tb" class="form-control" id="luas"></td>
          <td>
            <input type="button" value="cek-satu" class="btn btn-info" id="cek-satu">
          </td>       
        </tr>
        <tr class="baris">
          <td><h4>Balok</h4></td>
          <td>Tinggi: <input type="text" name="hb" class="form-control" id="tinggi"></td>
          <td>Volume: <input type="text" name="bb" class="form-control" id="volume"></td>
          <td></td>
          <td>
            <input type="button" value="cek-dua" class="btn btn-info" id="cek-dua">
          </td> 
        </tr>
    </table>
    <h2>Tugas Siswa - Program hotel</h2>
    <table class="table table-bordered">
      <tbody id="detil">
        <tr class="baris">
          <td><h4>Kamar</h4></td>
          <td>Tipe (standard,superior,deluxe): <input type="text" name="hb" class="form-control" id="tipe-kamar"></td>
          <td>jumlah hari: <input type="text" name="bb" class="form-control" id="jumlah"></td>
          <td>Harga Per-malam: <input type="text" name="tb" class="form-control" id="harga-permalam"></td>
          <td>total-kamar: <input type="text" name="tb" class="form-control" id="total-kamar"></td>
          <td>
            <input type="button" value="cek-tiga" class="btn btn-info" id="cek-tiga">
          </td>       
        </tr>
        <tr class="baris">
          <td><h4>Harga Paket</h4></td>
          <td>Paket Makan (breakfast,lunch,dinner): <input type="text" name="hb" class="form-control" id="tipe-paket"></td>
          <td></td>
          <td>Harga: <input type="text" name="bb" class="form-control" id="harga-paket"></td>
          <td>total-paket: <input type="text" name="tb" class="form-control" id="total-paket"></td>
          <td>
            <input type="button" value="cek-empat" class="btn btn-info" id="cek-empat">
          </td> 
        </tr>
        <tr class="baris">
          <td><h4>Total Pembayaran</h4></td>
          <td></td>
          <td></td>
          <td></td>
          <td>Total: <input type="text" name="tb" class="form-control" id="total"></td>
        </tr>        
    </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-9.js"></script>
</body>
</html>
  • Buat file baru dan beri nama prak-9.coffee
class Persegipanjang
  constructor: (@panjang,@lebar) ->

  luas: ->
    @panjang * @lebar

class Balok extends Persegipanjang
  constructor: (@panjang,@lebar,@tinggi) ->
    super(@panjang,@lebar)

  volume: ->
    @panjang * @lebar * @tinggi 

class Balokberwarna extends Balok
  constructor: (@panjang,@lebar,@tinggi,@warna) -> 
    super(@panjang,@lebar,@tinggi)

  warnabalok: ->
    @warna 

jQuery ->

  hitungPersegiPanjang = ->
    p = $('#panjang').val()
    l = $('#lebar').val()
    p1 = new Persegipanjang(p,l)
    $('#luas').val(p1.luas())

  hitungBalok = ->
    p = $('#panjang').val()
    l = $('#lebar').val()
    t = $('#tinggi').val()
    p2 = new Balok(p,l,t)
    $('#luas').val(p2.luas())
    $('#volume').val(p2.volume())

  $(document).ready ->
    $(document).on 'click', '#cek-satu',hitungPersegiPanjang
    $(document).on 'click', '#cek-dua' ,hitungBalok

  • Buat file baru dan beri nama prak-9.js
    • seperti biasanya buka coffeescript.org dan lakukan konversi dari coffee ke js
    • tempatkan hasilnya pada bagian dokumen js
    • lakukan load dokumen html

Tugas Siswa

  • Soal 1: Buat class dengan nama Kamar
    • construktur diisi dengan data tipe kamar dan menginap berapa hari
    • harga kamar ditentukan sebagai berikut:
      • bila standard harga permalam 500.000
      • bila superior harga permalam 1.000.000
      • bila standard harga permalam 1.500.000
    • tentukan subtotal harga kamar
  • Soal 2: Buat class dengan nama Paket yang merupakan inheritance dari kamar
    • data tambahan untuk paket adalah jam makan dimana ditentukan sbb:
      • bila breakfast harga per-orang 100.000
      • bila lunch harga per-orang 200.000
      • bila dinner harga per-orang 300.000
    • tentukan sub total yang harus dibayar
    • tentukan total yang harus dibayar
  • Soal 3: Tambahkan sendiri field untuk jumlah orang pada baris Paket
    • bila yang makan lebih dari 1 orang maka harga ditentukan sbb:
      • subtotal paket = harga paket * lama menginap * jumlah orang