Cara Membuat Buku Tamu dengan Bootstrap dan jQuery

Dengan berkembang nya teknologi semua orang bisa dengan mudah melakukan pekerjaan dengan mudah karena dibantu dengan aplikasi ataupun sebuah teknologi yang mampu membantu dalam pekerjaan. Seperti halnya pada sebuah bahasa client-script ini (jQuery) kita bisa membuat sebuah aplikasi untuk memudahkan kita dalam pengisian form aplikasi buku tamu. Nah pada contoh kasus berikut akan saya berikan tutorial bagaimana Cara Membuat Buku Tamu dengan Bootstrap dan jQuery.

Pada tahapan pembuatan nya kalian diharapkan sudah mempunyai file bootstrap, setelah itu barulah kita pada tahapan penyusunan sintak nya.

Langkah pertama adalah kalian buat struktur HTML bootstrap berikut ini.

<body>
  <div class="container">
    <header>
      <h1>Buku Tamu</h1>
    </header>
    <table id='table1' class="table table-bordered">
      <thead>
        <tr>
          <th>Nama</th>
          <th>Alamat</th>
          <th>Telepon</th>
          <th>Action</th>
        </tr>
      </thead>
      <tbody>
      </tbody>
      <tfoot>
        <tr>
          <td>
            <input id='Nama' class='form-control' type="text" />
          </td>
          <td>
            <input id='Alamat' class='form-control' type="text" />
          </td>
          <td>
            <input id='Telp' class='form-control' type="text" />
          </td>
          <td>
            <div class="text-center">
              <button id='add' class='btn btn-block btn-success' />Add</button>
            </div>
          </td>
        </tr>
      </tfoot>
    </table>
  </div>
</body>

Sintak diatas merupakan sintak formulir yang bertujuan untuk pengisian data tamu, kemudian selanjutnya kita akan membuat fungsi untuk menambahkan data tamu dengan sintak jQuery berikut.

<script type="text/javascript">  
var addressBook = (function() {
  var people = [{
    Nama: 'Rojak',
    Alamat: 'Jakarta',
    Telp: '0858555xxx'
  }];
  var table = $('#table1');
  var tbody = table.find('tbody');
  var $Nama = table.find('#Nama');
  var $Alamat = table.find('#Alamat');
  var $Telp = table.find('#Telp');
  var $button = table.find('#add');
  var $btnSave = table.find('#save');
  var $btnEdit = table.find('#edit');
  var $btnRemove = table.find('#remove');
  var $input = table.find(".edit");

  //bind events
  $button.on('click', addPerson);
  table.on('click', '#remove', deletePerson);
  console.log($input);
  _render();

  function _render() {
    tbody.html('');
    var length = people.length;
    for (var i = 0; i < length; i++) {
      table.prepend('<tr>
<td><input class="edit" type="text" value="' + people[i].Nama + '" disabled></td>
<td><input class="edit" type="text" value="' + people[i].Alamat + '" disabled></td>
<td><input type="text" class="edit" value="' + people[i].Telp + '" disabled></td>
<td> <button id="remove" class="btn btn-block btn-danger">X</button></td>
</tr>');
    }
  }


  function addPerson() {
    var person = {
      Nama: $Nama.val(),
      Alamat: $Alamat.val(),
      Telp: $Telp.val()
    };
    people.push(person);
    $Nama.val('');
    $Alamat.val('');
    $Telp.val('');
    _render()
  }

  function deletePerson(event) {
      var element = event.target.closest('tr');
      var i = table.find('td').index(element);
      people.splice(i, 1);
      _render();
    }
  return {
    addPerson: addPerson,
    deletePerson: deletePerson
  };

})();
</script>

Setelah kode diatas diketikan, terakhir adalah memberikan sedikit style pada formulir dengan kode CSS3 berikut.

<style type="text/css">
	input {
	  background:rgba(0,0,0,0);
	  border:none;
	  width: 100%;
	  height: 100%;
	}
</style>

Langkah terakhir adalah sisipkan library jQuery berikut sebelum sebelum tag body.

<script src="https://code.jquery.com/jquery-3.2.0.min.js"></script>

Setelah semua kode diatas selesai, silahkan simpan dan jalankan pada browser masing-masing dan lihat hasilnya.

Baik itulah tutorial mengenai Cara Membuat Buku Tamu dengan Bootstrap dan jQuery, dengan begitu pekerjaan kita bisa lebih ringan karena adanya aplikasi buku tamu tersebut 🙂

DEMO