Coba Deh Kita Bedakan Table Yang Kita Buat Dengan Bootstrap Dan Tidak Menggunakan Bootstrap
NOTE : Yang Tidak Menggunakan Bootsttrap
NOTE Yang Menggunkan Bootsrtap :
Tu Kan Beda Banget Kan Teman-teman WDI, Bagi anda yang belum tahu Bahwa sosial media seperti twitter,wordpress dan lain-lain di buat dengan bootstrap juga lhoo :D
Oke Sekarang Kita Akan Membuatnya
2. Apabila Sudah Silahkan Extrack Dulu File Nya
3. Tetntu saja Anda Harus Mempunyai Web Serever Seperti XAMPP,WAMPP dan teman-teman nya :D
4. Berikutnya kita letakkan di XAMPP-Htdocs NOTE: Karena Disini Saya Menggunakan XAMPP Kalau Teman WDI menggunakan WAMPP cukup Taruh Di WAMPP-WWW Gampangkan
5. Buat Lah File Di Dalamnya Dengan Nama Index Lalu Buat Filenya Dengan Nama Index,php, Disini Saya Menggunakan text editor Sublime-Text, Terserah Anda Menggunakan Nya Dengan DW Atau NPP
6. Mulai Lah Kita Mengkoding :D hehehehe Oke Serius :)
Ya Seperti Mana Mestinya Kita membuat sebuah web yaitu tau utamanya
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
7. Kalau Sudah Kita Link Kan Dengan CSS Yang Ada Di Bootstrap Tadi :) ,
Dengan Syntax Ini <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css"> letakkan di dalam <head> </head>
Contoh ;
<html>
<head>
<title>Membuat Table Dengan Bootstrap</title>
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css"> letakkan di dalam
</head>
<body>
</body>
</html>
Udah Deh Terlink Itu Dengan Bosstrap Nya Gampang Kan Di Ingat Lho ya :D
8. Selanjutnya Kita Buat Div Di Dalam Body
Contoh ;
<div class="layer">
</div>
NOTE class nya saya beri nama "layer" gunanya untuk mengatur lebar dan tinggi table nya nanti
9. Nahh Di Dalam <div class="layer"> </div> Kita isi dengan tag unutk membuat table seperti biasa
<tr>
<td>No</td>
<td>Nama </td>
<td>Kelas </td>
<td>Alamat </td>
<td> Proses</td>
</tr>
NOTE : Itu Bagian Atas Nya Bisa Di Bilang Header Dan Bisa Di Tambah Lagi Isinya :D
10. Nah Sekarang Kita Isi Nama-namanya Bisa Di Bilang Konten Nya :D
<tr>
<td>1 </td>
<td>Reza </td>
<td>1 RPL </td>
<td>Samarinda </td>
<td>
<div class="btn-group">
<button class="btn btn-primary"><li class="icon-edit"></li> Edit </button>
<button class="btn btn-warning"><li class="icon-remove"></li>Delete</button>
<button class="btn btn-danger"><li class="icon-print"></li>Print</button>
</td>
</tr>
NOTE: <td>1 </td> adalah nomor nya , <td>Reza </td> adalah nama , <td>1 RPL </td> adalah kelas , <td>Samarinda </td> Kota/alamat
dan
<div class="btn-group"> adalah suatu div unutk memangil button dengan bentuk yang kita inginkan yan sudah di sediakan bootsrtap
Ini Adalah Tag Untuk Memanggil Button Edit
<button class="btn btn-primary"><li class="icon-edit"></li> Edit </button>
Sedangkan Ini Adalah Tag Untuk Memanggil Button Hapus
<button class="btn btn-warning"><li class="icon-remove"></li>Delete</button>
Yang Ini Adalah Tag Untuk Memanggil ButtonPrint
<button class="btn btn-danger"><li class="icon-print"></li>Print</button>
11. Nah Sekarang Kita Kembali Ke Nomor 8 yaitu membuat CSS nya
NOTE :
<style>
.layer{
margin: auto;
width: 500px;
max-height: 100%;
}
</style>
12. Dan Yang Terakhir Untuk Sedikit Mempercantik Kita kasih Hover Di Table
Cara nya Memanggil Tag Nya Yang Ada Di CSS Bootsrtap
<table class="table table-striped table-hover" >
Oke Ini Nih Kode HTML - Nya Dari Penjelasan Diatas ;
<html>
<head>
<title>Membuat Table Dengan Bootstrap</title>
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css"> letakkan di dalam
</head>
<body>
<div class="layer">
<tr>
<td>No</td>
<td>Nama </td>
<td>Kelas </td>
<td>Alamat </td>
<td> Proses</td>
</tr>
<tr>
<td>1 </td>
<td>Reza </td>
<td>1 RPL </td>
<td>Samarinda </td>
<td>
<div class="btn-group">
<button class="btn btn-primary"><li class="icon-edit"></li> Edit </button>
<button class="btn btn-warning"><li class="icon-remove"></li>Delete</button>
<button class="btn btn-danger"><li class="icon-print"></li>Print</button>
</td>
</tr>
</div>
</body>
</html>
<style>
.layer{
margin: auto;
width: 500px;
max-height: 100%;
}
</style>
Alhamdulillah Selesai Nah Sekian Tutorial Yang Bisa Saya Share Tunggu Tutor DWI Selanjutnya Yaa,,
Oke Sampai Ketemu Lagi Jangan Lupa Tinggalkan Komentar Nya Salam DWI :D
