Sunday, August 13, 2017

Bootstrap Part 2 : Membuat Table Dengan Bootstrap Untuk Pemula

Membuat Table Dengan Bootstrap


Bootstrap Part 2 : Membuat Table Dengan Bootstrap Untuk Pemula 

Membuat Table Dengan Bootstrap

OK broo..
Bertemu lagi..
Jadi pada tutorial sebelumnya kita telah belajar bootstrap part 1 : pengertian dan cara menggunakan bootstrap.

Nah.. maka pada tutorial ini kita akan belajar bootstrap part 2: membuat table dengan bootstrap.
Jadi pada bab ini kita akan membahas cara membuat atau men design table dengan menggunakan bootstrap. 

Jangan bingung bro.. Santai..

Cara membuat table dengan bootstrap sangatlah mudah dan gak sulit kok.
Kita hanya perlu menambahkan class-class bootstrap untuk mendesign table.

Jadi gini broo...
Class bootstrap untuk membuat atau mendesign table itu gak hanya satu broo..
Jadi semuanya itu berjumlah 4 buah class... 

*Class pertama adalah .table
Class .table ini digunakan untuk membuat table standart/berbentuk table biasa.

*Class kedua adalah .table-striped
Class ini adalah class tambahan untuk membuat table dengan bootstrap.
Fungsinya adalah untuk membuat tabel belang-belang (strip).

*Class ketiga adalah .table-bordered
Class ini adalah class tambahan bootstrap untuk membuat table yang memiliki garis.

*Class keempat adalah .table-hover
Class ini juga berguna untuk mendesign table menggunakan bootstrap.
Class ini berguna untuk membuat efek hover pada row table disaat mouse kita berada di atas row table.

Nah....
Selain itu ada juga class yang berguna untuk membuat pewarnaan pada row atau table data.

Untuk memberi warna pada table row maka letakkan class warna ini di tag<tr>...
Namun jika ingin memberi warna pada table data maka letakkan di tag <td>..

Gituu.. bro. gampang kan..
Nah... Untuk class warna ada 4 bro..

*Pertama adalah class .succes
Class ini memberi warna sukses atau warna hijau.

*Kedua adalah class .info
Class ini memberi warna biru.

*Ketiga adalah class .danger
Class ini memberi warna merah

*Ke-empat adalah class .warning
Class ini memberi warna kuning.

Udah bro..
Jadi sekarang ayo kita buat table dengan bootstrapnya..!!!


1. Cara Membuat Table Dengan Bootstrap

Langkah pertama untuk membuat atau mendesign table dengan bootstrap adalah ..

*Buatlah file HTML atau PHP dengan nama index.php...

Bagi kamu yang masih bingung...
Maka baca dulu cara menghubungkan bootstrap. Karena telah saya bahas pada tutorial bootstrap sebelumnya.

Ok.. kalo sudah siap ..
Silahkan copy kode di bawah ini..
Lalu paste ke file index.php tadi yaa...

Ini kodenya bro..


Nah.. dan ini ss nya..


cara-membuat-table-degan-bootstrap-untuk-pemula
cara membuat table dengan bootstrap untuk pemula

*Penjelasan..
1. <table class="table">...</table> adalah perintah membuat table.
2. <thead>...</thead> adalah untuk membuat kepala judul tabel.
3. <tbody>..</tbody> adalah untuk menaruh isi dari tabel.


2. Membuat Table Border Dengan Bootstrap

Untuk membuat table bergaris atau border maka kamu hanya perlu menambahkan class "table-bordered" dan letakkan bersamaan dengan class "table".

Contohnya seperti ini..
<table class="table table-bordered">

Silahkan praktekan dengan copy kode ini lalu paste di file index.php tadi.


Nah ini ss nya bro..Beda kan yang ini ada garisnya..


cara-membuat-table-dengan-bootstra-class-table-bordered
membuat table dengan bootsrap class table-bordered

3. Membuat Table Strip Dengan Bootstrap

Dengan menggunakan class table-sriped maka tabel kita akan bergaya belang-belang..

Untuk prakteknya copy kode ini dan paste di file index.php.




Jadi kamu hanya menambahkan table-striped

Seperti ini <table class="table table-bordered table-striped">

Gampang kan.. hehehe..

Nah ini ss nya bro..


membuat-table-dengan-bootstrap-dengan-class-table-striped
membuat table bootsrap dengan class table-striped


4. Membuat Table Hover Dengan Bootstrap

Jadi caranya sama dengan contoh-contoh membuat table dengan bootstrap diatas tadi..
Kalian hanya perlu menambahkan class "table-hover" pada tag <table>

Copy dan paste kode ini di file index.php



Nah ini bro Demonya..hehe


See the Pen VzzJWz by penakngoding (@penakngoding) on CodePen.


5. Membuat Table Responsive Dengan Bootstrap

Untuk membuat table responsive caranya hanya dengan menambahkan element "<div>" dan ditambahkan class "table-responsive"

Penerapan = <div class='table-responsive'>

Kelebihan menggunakan table responsive adalah..
Tidak akan berantakan saat dilihat di smartphone dengan resolusi yang kecil.
Dan akan muncul scrool otomatis untuk menjaga table agar tetap utuh.

Nah ini bro kode contoh membuat table responsive dengan bootstrap.


Sudah..Cukup...Cukup..Sudah.. Cukup..Sampai.. Disini saja..
cara mendesign dan membuat table dengan bootstrap.

Gimana dengan mempelajari cara membuat table dengan bootstrap ini pasti kamu sudah merasa lebih mudah kan..
Tak hanya itu..
Karena masih banyak lagi kelebihan bootstrap dalam hal design interface website.



Bootstrap Part 5 : membuat jumbotron dengan bootstrap
Bootstrap Part 6 : membuat alert dengan bootstrap (rilis besok tanggal 16-08-2017)
Lainnya masih rahasia yaa.. hehehe















30 comments:

  1. Nice tutorial, mungkin bisa ikut membagikan pengetahuan nya di website https://sebawa.com

    ReplyDelete
  2. ijin bookmark ya gan. pelajari pelan2. thank.

    ReplyDelete
  3. masih belajar tentang bootsrap :) makasih gan tutornya :)

    ReplyDelete
  4. sertain demo/preview gan biar tau hasilnya yg kyak gimana

    ReplyDelete
  5. Bisa juga ngikutin tutornya, nice info min

    ReplyDelete
  6. mw nyoba dlu deh, thanks infonya gan

    ReplyDelete
  7. mau belejar ah, lumayan juga ternyata ya

    ReplyDelete
  8. mantep nih, izin coba gan semoga work
    thnks

    ReplyDelete
  9. Wah banyak banget nih jenisnya penjelasannya lengkap juga. Ijin bookmark gan buat bahan pelajaran

    ReplyDelete
  10. siip gan mantap ilmunya, terimakasih nanti saya mau coba

    ReplyDelete
  11. Nice tutorial gan
    Jangan lupa kunbal ke www.nandasharing.ga

    ReplyDelete
  12. mayan juga nih bisa dicoba. thanks infonya gan

    ReplyDelete
  13. sangat mudah dipahami, ijin praktek gan

    ReplyDelete