Belajar Bootstrap Part 5 Membuat Table Menggunakan Bootstrap - Tutorial Programming & Digital Marketing

Tutorial Programming & Digital Marketing

STAY HUNGRY STAY FOOLISH

Breaking

Home Top Ad

Wednesday, July 6, 2016

Home bootstrap Belajar Bootstrap Part 5 Membuat Table Menggunakan Bootstrap

Belajar Bootstrap Part 5 Membuat Table Menggunakan Bootstrap


bewoksatukosong.com - Halo balik dengan om bewok tentunya, di saat lagi pada takbiran om bewok malah bikin tutorial -,-, kurang baik apa coba om bewok ini haha. malam ini om bewok akan eh maksudnya pagi hari, om bewok bikin jam 2 pagi. greget (y). hehe. 

 Pagi ini om bewok bikin tutorial mengenai table pada bootstrap, wow ini bagian yang termasuk penting juga loh, apalagi kalau kalian ingin menampilkan isi database wah sudah pasti pake table dong, apalagi dengan menggunakan table bootstrap ini, sudah responsive jadi ga perlu di setting ulang lagi, keren kan ? untuk menghemat waktu mari kita praktekan dengan semangat walaupun jam 2 pagi.
Baca :
- Tutorial Series Bootstrap Dari Dasar Sampai Membuat Website Dengan Bootstrap

 Ada beberapa class dalam pembuatan table, maksudnya gini untuk membuat table hanya digunakan 1 class, tapi untuk menambah seperti hover(jika disentuh maka berubah backgroundnya),border, background seperti zebra, dan lain - lain, dan itu semua di kerjakan dengan sangat mudah, hanya inget ya hanya memanggil class tersebut maka semua yang om bewok sebutkan tadi bisa di buat hanya memanggil class tadi, 
om kalau memanggil semua dalam 1 table bisa ga om ? BISA BANGET BRO

OKE Sudah siap semua untuk belajar membuat table menggunakan bootstrap ?? yuk mulai.

kita buat yang standart dulu aja ya, kita buat table dengan class table yang mana class tersebut sudah di buat css nya oleh bootstrap nya sendiri.

1. DEFAULT BOOTSTRAP

<!DOCTYPE html>
<html>
<head>
 <title>Boostrap Belajar Table</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
</head>
<body>
 <table class="table ">
  <tr>
   <td>Nama</td>
   <td>Kelas</td>
   <td>Alamat</td>
  </tr>
  <tr>
   <td>Gerald</td>
   <td>XII TKJ 1</td>
   <td>Bekasi</td>
  </tr>
  <tr>
   <td>Pradina</td>
   <td>XII IPS 1</td>
   <td>Jakarta</td>
  </tr>
  <tr>
   <td>Ridwan</td>
   <td>XI AK 1</td>
   <td>Jember</td>
  </tr>
  <tr>
   <td>Sheila</td>
   <td>XII AP 3</td>
   <td>New York</td>
  </tr>
  <tr>
   <td>Bang Joe</td>
   <td>2 SD</td>
   <td>Bulak Jawa</td>
  </tr>
 </table>
</body>
</html>

Maka Hasilnya seperti dibawah ini.
Gambar 1 Table Default Bootstrap

Ini adalah standartnya dari bootstrap, nah kita custom deh yang sudah di berikan juga oleh bootstrap.

Baca :
- Tutorial Series Bootstrap Dari Dasar Sampai Membuat Website Dengan Bootstrap

2.BORDER
yapp kayaknya kurang keren kalau ga ada kotak - kotak nya, Dengan menggunakan bootstrap kita tinggal panggil classnya yaitu table-bordered. Jika kamu belum tau border, border berfungsi untuk membuat atau menampilkan garis yang kita inginkan.
Codinganya seperti dibawah ini ya.

<!DOCTYPE html>
<html>
<head>
 <title>Boostrap Belajar Table</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
</head>
<body>
 <table class="table table-bordered">
  <tr>
   <td>Nama</td>
   <td>Kelas</td>
   <td>Alamat</td>
  </tr>
  <tr>
   <td>Gerald</td>
   <td>XII TKJ 1</td>
   <td>Bekasi</td>
  </tr>
  <tr>
   <td>Pradina</td>
   <td>XII IPS 1</td>
   <td>Jakarta</td>
  </tr>
  <tr>
   <td>Ridwan</td>
   <td>XI AK 1</td>
   <td>Jember</td>
  </tr>
  <tr>
   <td>Sheila</td>
   <td>XII AP 3</td>
   <td>New York</td>
  </tr>
  <tr>
   <td>Bang Joe</td>
   <td>2 SD</td>
   <td>Bulak Jawa</td>
  </tr>
 </table>
</body>
</html>

Maka hasilnya seperti dibawah ini ya.

Gambar 2 Tampilan Table Menggunakan Table-Bordered

Om bewok hanya menambahkan seperti ini

<table class="table table-bordered">

Untuk class table saja memang akan mendapatkan default bootstrap seperti contoh yang pertama, lalu kita menambahkan table-bordered agar menjadi kotak - kotak lebih tepatnya membuat kotak karena border membuat garis kotak - kotaknya. Sisanya semua codinganya sama tidak ada yang diubah.

Baca :
- Tutorial Series Bootstrap Dari Dasar Sampai Membuat Website Dengan Bootstrap

3.HOVER
Ada wanita yang bertanya.
Pradina : Ah om bewok masih bosen lihat table nya soalnya kurang menarik nih, aku pengen kalau di sentuh table-nya maka warna backgroundnya berubah. 

Di bootstrap sangat mudah sekali seperti itu, tidak perlu edit css hanya menambahkan class di table. kecuali kalau teman - teman mau ganti warna backgroundnya kalian harus bikin css nya juga. 
Codinganya seperti dibawah ini ya.

<!DOCTYPE html>
<html>
<head>
 <title>Boostrap Belajar Table</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
</head>
<body>
 <table class="table table-hover">
  <tr>
   <td>Nama</td>
   <td>Kelas</td>
   <td>Alamat</td>
  </tr>
  <tr>
   <td>Gerald</td>
   <td>XII TKJ 1</td>
   <td>Bekasi</td>
  </tr>
  <tr>
   <td>Pradina</td>
   <td>XII IPS 1</td>
   <td>Jakarta</td>
  </tr>
  <tr>
   <td>Ridwan</td>
   <td>XI AK 1</td>
   <td>Jember</td>
  </tr>
  <tr>
   <td>Sheila</td>
   <td>XII AP 3</td>
   <td>New York</td>
  </tr>
  <tr>
   <td>Bang Joe</td>
   <td>2 SD</td>
   <td>Bulak Jawa</td>
  </tr>
 </table>
</body>
</html>

Maka Hasilnya seperti dibawah ini ya

Gambar 3 Table Menggunakan hover


Kita bisa lihat bahwa om bewok tadi menambahkan table-hover di class table tersebut. Mudah bukan ? 

Baca :
- Tutorial Series Bootstrap Dari Dasar Sampai Membuat Website Dengan Bootstrap

4.STRIPED ROWS
Ada wanita nanya lagi.
Pradina      : PENGEN ZEBRAAAAAAAA. 
Om bewok : Kamu mau hewan zebra ? 
Pradina      : Bukan aku mau table-nya warna - warni hitam putih biar kayak                          hidup aku, yang selalu bewarna.
Om bewok  : Pelangi kali warna - warni tapi OKE BISA DI ATUR, apa sih yang ga                     bisa sama om bewok 
Pradina       : Dapat jodoh bisa ga om ?
Om Bewok  : Om bewok jg single :( #nyanyiSedih.

Langsung aja, jangan bikin baper terusss tutorial ini!!!!
kita hanya menambahkan class table-striped.
Kodinganya bisa lihat di bawah ini.

<!DOCTYPE html>
<html>
<head>
 <title>Boostrap Belajar Table</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
</head>
<body>
 <table class="table table-striped">
  <tr>
   <td>Nama</td>
   <td>Kelas</td>
   <td>Alamat</td>
  </tr>
  <tr>
   <td>Gerald</td>
   <td>XII TKJ 1</td>
   <td>Bekasi</td>
  </tr>
  <tr>
   <td>Pradina</td>
   <td>XII IPS 1</td>
   <td>Jakarta</td>
  </tr>
  <tr>
   <td>Ridwan</td>
   <td>XI AK 1</td>
   <td>Jember</td>
  </tr>
  <tr>
   <td>Sheila</td>
   <td>XII AP 3</td>
   <td>New York</td>
  </tr>
  <tr>
   <td>Bang Joe</td>
   <td>2 SD</td>
   <td>Bulak Jawa</td>
  </tr>
 </table>
</body>
</html>

Maka hasilnya seperti dibawah ini ya.

Gambar 4 Table Menjadi Zebra

Keliatan ga ? tapi kalau kalian menggunakan mata batin, eh maksudnya yang jeli keliatan kok warna abu - abu nya, serius ga boong :p

Ini yang terakhir paling Om bewok suka yaitu

Baca :
- Tutorial Series Bootstrap Dari Dasar Sampai Membuat Website Dengan Bootstrap

5.CONTEXTUAL CLASS
Ini adalah merubah warna background tiap baris, dan caranya hanya memanggil class tersebut. ada 4 class yaitu : 
.active    = Applies the hover color to a particular row or cell
.success = Indicates a successful or positive action
.info       = Indicates a neutral informative change or action
.warning =  Indicates a warning that might need attention
.danger  =  Indicates a dangerous or potentially negative action

 Kita coba berbarengan semua yaaaa.
Codinganya seperti biasa, ada di atassss eh maksudnya di bawahhhhhhhhh!!! 

<!DOCTYPE html>
<html>
<head>
 <title>Boostrap Belajar Table</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
</head>
<body>
 <table class="table">
  <tr>
   <td>Nama</td>
   <td>Kelas</td>
   <td>Alamat</td>
  </tr>
  <tr class="active">
   <td>Gerald</td>
   <td>XII TKJ 1</td>
   <td>Bekasi</td>
  </tr>
  <tr class="success">
   <td>Pradina</td>
   <td>XII IPS 1</td>
   <td>Jakarta</td>
  </tr>
  <tr class="info">
   <td>Ridwan</td>
   <td>XI AK 1</td>
   <td>Jember</td>
  </tr>
  <tr class="warning">
   <td>Sheila</td>
   <td>XII AP 3</td>
   <td>New York</td>
  </tr>
  <tr class="danger">
   <td>Bang Joe</td>
   <td>2 SD</td>
   <td>Bulak Jawa</td>
  </tr>
 </table>
</body>
</html>

Hasinya bisa lihat dibawah ya.
Gambar 5 Tampilan Table Dengan Style Bootstrap
Om bewok mau nanya, kalau semua yang udah dikasih tau om bewok semua bisa di gabungin  ga om ? -jawaban singkat, padat dan jelas-YA
Baca :
- Tutorial Series Bootstrap Dari Dasar Sampai Membuat Website Dengan Bootstrap


Nih kira - kira kalau di gabungin, ga semua ya, biar tetap keliatan kece menurut om sendiri hehe.

<!DOCTYPE html>
<html>
<head>
 <title>Boostrap Belajar Table</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
</head>
<body>
 <table class="table table-hover table-bordered">
  <tr>
   <td>Nama</td>
   <td>Kelas</td>
   <td>Alamat</td>
  </tr>
  <tr class="active">
   <td>Gerald</td>
   <td>XII TKJ 1</td>
   <td>Bekasi</td>
  </tr>
  <tr class="success">
   <td>Pradina</td>
   <td>XII IPS 1</td>
   <td>Jakarta</td>
  </tr>
  <tr class="info">
   <td>Ridwan</td>
   <td>XI AK 1</td>
   <td>Jember</td>
  </tr>
  <tr class="warning">
   <td>Sheila</td>
   <td>XII AP 3</td>
   <td>New York</td>
  </tr>
  <tr class="danger">
   <td>Bang Joe</td>
   <td>2 SD</td>
   <td>Bulak Jawa</td>
  </tr>
 </table>
</body>
</html>

Hasilnya cek sendiri aja, om bewok mau lihat kalian coba praktekan sendiri juga ga di rumah ? hehe. 
Jadi langsung tambahin aja seperti contoh codingan yang terakhir ini, perhatikan saja bagian table class nya ada 4 class yang di panggil sama om yaitu 
  1. table ini default boostrap
  2. table-hover ini jika di sentuh table nya maka berubah backgroundnya
  3. table-bordered ini akan menjadi kotak - kotak
  4. class pada tr yaitu contextual classes
Hasilnya yang tadi ya, soalnya tadi om bewok cuman bercanda, nih om kasih, bentuk nya gif jadi biar keliatan apa perubahanya.

 Baca :
- Tutorial Series Bootstrap Dari Dasar Sampai Membuat Website Dengan Bootstrap

Gambar Gif Table Jika Semua Class Di Gabungkan
Itu saja tutorial kali ini dalam membuat table menggunakan boostrap, jika kalian ingin melihat tutorial bootstrap yang lainya, kalian bisa lihat tutorial series nya, tutorial ini juga termasuk tutorial series juga, jadi biar teman - teman tahu tahapan belajar boostrap seperti apa. http://www.bewoksatukosong.com/2016/06/tutorial-bootstrap-series-dasar-sampai.html

Tags
Share This
By di
Label:

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)