Cara Membuat Buku Tamu dengan Bootstrap dan jQuery
Dengan berkembang nya teknologi seluruh orang dapat dengan gampang mengerjakan kesibukan dengan gampang karena dibantu dengan program ataupun sebuah teknologi yang mampu menolong pada kesibukan. Seperti halnya di sebuah bahasa client-script ini (jQuery) kita dapat merancang sebuah program bagi mempermudah kita pada penginputan form program buku tamu. Nah di contoh kasus berikut akan saya berikan panduan bagaimana Cara Membuat Buku Tamu dengan Bootstrap dan jQuery.
Di tahapan penyusunan nya kalian diinginkan telah mempunyai file bootstrap, setelah itu barulah kita di tahapan penyusunan sintak nya.
Langkah pertama-tama ialah kalian bikin 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>Tempat tinggal</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='Tempat tinggal' 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 adalah sebuah sintak formulir yang bertujuan bagi penginputan data tamu, kemudian berikutnya kita akan merancang guna bagi menambahkan data tamu dengan sintak jQuery berikut.
<script type=text/javascript>
var addressBook = (function() {
var people = [{
Nama: 'Rojak',
Tempat tinggal: 'Jakarta',
Telp: '0858555xxx'
}];
var table = $('#table1');
var tbody = table.find('tbody');
var $Nama = table.find('#Nama');
var $Tempat tinggal = table.find('#Tempat tinggal');
var $Telp = table.find('#Telp');
var $button = table.find('#add');
var $btnSave = table.find('#save');
var $btnEdit = table.find('#menej');
var $btnRemove = table.find('#remove');
var $input = table.find(.menej);
//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=menej type=text value=' + people[i].Nama + ' disabled></td>
<td><input class=menej type=text value=' + people[i].Tempat tinggal + ' disabled></td>
<td><input type=text class=menej 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(),
Tempat tinggal: $Tempat tinggal.val(),
Telp: $Telp.val()
};
people.push(person);
$Nama.val('');
$Tempat tinggal.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 ialah memberikan sedikit style di 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 ialah sisipkan library jQuery berikut sebelum sebelum tag body.
<script src=https://code.jquery.com/jquery-3.2.0.min.js></script>
Setelah seluruh kode diatas selesai, silahkan simpan dan jalankan di browser masing-masing dan lihat hasilnya.
Bagus seperti itulah panduan mengenai Cara Membuat Buku Tamu dengan Bootstrap dan jQuery, dengan seperti itu kesibukan kita dapat lebih ringan karena adanya program buku tamu tersebut 🙂
Sumber https://kursuswebsite.org
