Haii Sobat WDI Ketemu Lagi Ya Kita Malam Ini Ada Yang Belum tidur Kali ini saya akan memberikan Tutorial Membuat Table Dengan Plugin Boostrap ,,
Coba Deh Kita Bedakan Table Yang Kita Buat Dengan Bootstrap Dan Tidak Menggunakan Bootstrap
NOTE : Yang Tidak Menggunakan Bootsttrap
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
1. Anda Download Di http://getbootstrap.com/
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>
Sebenarnya Masih Banyak macam-macamnya unutk tau yang lainnya belajar aja di situs nya http://getbootstrap.com/
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,,
jangan lupa Like Fans Page Facebook Kami https://www.facebook.com/webdesingreza?ref=hl
Oke Sampai Ketemu Lagi Jangan Lupa Tinggalkan Komentar Nya Salam DWI :D
Written by Nulled
Blogger Muda Yang Masih Berstatus Pelajar, Yang Berkecimpung Di Dunia IT Semenjak Tahun 2013 Dan Ingin Berbagi Ilmu Pengetahuan Tentang Programming Web Design,Desktop Application, Tips Blogging, Google Adsense, Dan Internet Marketing. Temukan Celotehan Saya Di Twitter @Anaksmkti
0 comments:
Post a Comment