form table pagination bootstrap

Form Table Pagination Bootstrap

Biasanya dalam sebuah aplikasi, terdapat form untuk input data, table data sebagai list view (untuk display data) dan juga pagination (paging = list halaman), antara form dan data kadang juga dipisah, tetapi ada juga yang menjadikan satu halaman, seperti pada posting belajar bootstrap kali ini akan menampilkan form input data, list data view dan pagination menjadi satu halaman.

Belajar Bootstrap Edisi Sebelumnya :

Belajar Bootstrap (1) Download & Install Bootstrap

Belajar Bootstrap (2) Membuat Table Bootstrap

Belajar Bootstrap (3) Membuat Form Bootstrap

Belajar Bootstrap (4) Grid System Bootstrap

Belajar Bootstrap (5) Class Image Bootstrap

Belajar Bootstrap (6) Typography Bootstrap

Membuat Form

Contoh coding untuk membuat form :

	<form action="" class="form-horizontal">
	<fieldset>
	<legend>Form Master Kontak</legend>

	<div class="form-group">
	<label for="nama" class="control-label col-sm-2">
	Nama
	</label>
	<div class="col-sm-6">
	<input type="text" name="nama" class="form-control">
	</div>
	</div>
	<div class="form-group">
	<label for="alamat" class="control-label col-sm-2">
	Alamat
	</label>
	<div class="col-sm-6">
	<textarea name="alamat" class="form-control"></textarea>
	</div>
	</div>
	<div class="form-group">
	<label for="no_hp" class="control-label col-sm-2">
	No HP
	</label>
	<div class="col-sm-6">
	<input type="text" name="no_hp" class="form-control">
	</div>
	</div>
	<div class="form-group">
	<div class="col-sm-6">
	<button class="btn btn-success"><span class="glyphicon glyphicon-save"></span> Simpan</button>
	<button class="btn btn-primary"><span class="glyphicon glyphicon-refresh"></span> Reset</button>
	<button class="btn btn-warning"><span class="glyphicon glyphicon-backward"></span> Kembali</button>
	</div>
	</div>
	</fieldset>
	</form>

view raw form1.html hosted with ❤ by GitHub

Membuat Table

Coding/script untuk membuat table adalah :

	<table class="table table-bordered table-hover table-condensed table-striped">
	<thead>
	<tr>
	<th>Nama</th>
	<th>Alamat</th>
	<th>No HP</th>
	</tr>
	</thead>
	<tbody>
	<tr>
	<td>Saifi Ahmada</td>
	<td>Banjarmasin</td>
	<td>0812 3456 7890</td>
	</tr>
	<tr>
	<td>Muhammad Habibi</td>
	<td>Banjarmasin</td>
	<td>0812 3456 2345</td>
	</tr>
	<tr>
	<td>Ahmada Saifi</td>
	<td>Kandangan</td>
	<td>0812 3456 6543</td>
	</tr>
	<tr>
	<td>Mirham</td>
	<td>Negara</td>
	<td>0812 3456 6543</td>
	</tr>
	<tr>
	<td>Ari Wahyudi</td>
	<td>Negara</td>
	<td>0812 3456 1234</td>
	</tr>
	</tbody>
	</table>

view raw table1.html hosted with ❤ by GitHub

Membuat Pagination

Untuk membuat pagination berikut ini contoh scriptnya :

	<ul class="pagination">
	<li><a href="#">1</a></li>
	<li><a href="#">2</a></li>
	<li class="active"><a href="#">3</a></li>
	<li><a href="#">4</a></li>
	<li><a href="#">5</a></li>
	</ul>

view raw pagination.html hosted with ❤ by GitHub

Membuat Coding Lengkap

Script lengkap untuk membuat form, table dan pagination dalam satu page adalah :

	<!DOCTYPE html>
	<html>
	<head>
	<title>Form & Table Bootstrap</title>
	<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
	<script type="text/javascript" src="js/bootstrap.min.js"></script>
	</head>
	<body>

	<div class="container">

	<br/>
	<form action="" class="form-horizontal">
	<fieldset>
	<legend>Form Master Kontak</legend>

	<div class="form-group">
	<label for="nama" class="control-label col-sm-2">
	Nama
	</label>
	<div class="col-sm-6">
	<input type="text" name="nama" class="form-control">
	</div>
	</div>
	<div class="form-group">
	<label for="alamat" class="control-label col-sm-2">
	Alamat
	</label>
	<div class="col-sm-6">
	<textarea name="alamat" class="form-control"></textarea>
	</div>
	</div>
	<div class="form-group">
	<label for="no_hp" class="control-label col-sm-2">
	No HP
	</label>
	<div class="col-sm-6">
	<input type="text" name="no_hp" class="form-control">
	</div>
	</div>
	<div class="form-group">
	<div class="col-sm-6">
	<button class="btn btn-success"><span class="glyphicon glyphicon-save"></span> Simpan</button>
	<button class="btn btn-primary"><span class="glyphicon glyphicon-refresh"></span> Reset</button>
	<button class="btn btn-warning"><span class="glyphicon glyphicon-backward"></span> Kembali</button>
	</div>
	</div>
	</fieldset>
	</form>
	<hr>
	<table class="table table-bordered table-hover table-condensed table-striped">
	<thead>
	<tr>
	<th>Nama</th>
	<th>Alamat</th>
	<th>No HP</th>
	</tr>
	</thead>
	<tbody>
	<tr>
	<td>Saifi Ahmada</td>
	<td>Banjarmasin</td>
	<td>0812 3456 7890</td>
	</tr>
	<tr>
	<td>Muhammad Habibi</td>
	<td>Banjarmasin</td>
	<td>0812 3456 2345</td>
	</tr>
	<tr>
	<td>Ahmada Saifi</td>
	<td>Kandangan</td>
	<td>0812 3456 6543</td>
	</tr>
	<tr>
	<td>Mirham</td>
	<td>Negara</td>
	<td>0812 3456 6543</td>
	</tr>
	<tr>
	<td>Ari Wahyudi</td>
	<td>Negara</td>
	<td>0812 3456 1234</td>
	</tr>
	</tbody>
	</table>
	<ul class="pagination">
	<li><a href="#">1</a></li>
	<li><a href="#">2</a></li>
	<li class="active"><a href="#">3</a></li>
	<li><a href="#">4</a></li>
	<li><a href="#">5</a></li>
	</ul>
	</div>
	</body>
	</html>

view raw all.html hosted with ❤ by GitHub

Script di atas akan menghasilkan tampilan seperti ini :

Demikian posting belajar bootstrap, dengan tampilan form input, table data dan pagination, semoga bermanfaat.