Membuat Form Input Siswa dengan Bootstrap

form gb1


Hello sob,

Sebelumnya kita sudah perkenalan dengan Bootstrap dan sedikit membahas desain layout dengan Grid Sistem di Bootstrap, artikelnya disini:

Kembali disini kita mau bahas perihal contoh latihan membuat form sederhana dengan tema Input Data Siswa. Yang mau saya tampilkan disini hanya form nya saja ya, bukan fungsi php secara lengkap, untuk fungsi php bisa sobat kombinasikan dengan latihan-latihan di blog saya ini (silahkan search di artikel sebelumnya). 

Disini saya khusus bahas html penyajian tampilan form dengan bootstrap, sebagai latihan lanjutan bersama. Yuk langsung aja diawali dengan kode penuh nya:

ini kodenya:



Tampilannya:
form gb2

Penjelasannya:

Panggil file bootstrap

<!-- Bootstrap CSS-->
<link rel="stylesheet" href="asset/bootstrap/dist/css/bootstrap.min.css">


Pada potongan kode diatas, sobat tempatkan file bootstrap yang sudah sobat download dari getbootstrap.com , dan masukkan ke dalam folder yang sama dengan directory kode html yang sobat buat, kemudian panggil file tersebut dengan path yang sesuai. 

Dan perlu diketahui ada 2 tipe file bootstrap, yakni:
  • bootstrap.css = ini berisi file lengkap digunakan untuk proses develop atau pengembangan dan tentunya file ini agak lebih besar dengan file dibawahnya ini.
  • bootstrap.min.css = file ini dikhususkan untuk website produksi atau website yang live, dimana ukuran file ini lebih kecil.

Panggil file JQuery 3

<script type="text/javascript" src="asset/jquery/dist/jquery.min.js"></script>


Pada file yang saya sertakan dan sobat bisa download diakhir artikel, disini khusus memanggil file JQuery, fungsinya adalah untuk fungsi pengambilan tanggal pada kolom tanggal atau dikenal dengan Datepicker. Ini merupakan fitur yang tersedia juga di bootstrap.

Panggil file Datepicker

<script type="text/javascript" src="asset/datepicker/dist/js/bootstrap-datepicker.min.js"></script>

<link rel="stylesheet" href="asset/datepicker/dist/css/bootstrap-datepicker3.css">

Kedua file diatas dikhususkan untuk menangani form datepicker , kurang lebih pembahasan datepicker sama dengan artikel disini: Menampilkan Tanggal dengan Mode Kalender Menggunakan JQuery UI. Form ini dikhususkan untuk mengambil format tanggal, bulan dan tahun, sehingga memudahkan pengguna saat mengakses website sobat.


Pembahasan Formnya:
  • Setiap form input dikelompokkan antara label dengan kotak input nya dibawah tag <div class="form-group"> .......</div>
  • Form berada dalam wadah kontainer dengan memberikan tag: <div class="container"><div class="row"> ...kode form </div></div>
  • Sobat bisa mengatur posisi dari label atau form inputan dengan sistem grid yang sudah dibahas di artikel sebelumnya. contoh penulisannya seperti pada kode form diatas <div class="col-md-2">...</div>
Dan sobat bisa download file lengkapnya DISINI. Sudah termasuk Jquery, bootstrap, dan datepicker pluginnya.


Subscribe to receive free email updates:

0 Response to "Membuat Form Input Siswa dengan Bootstrap"

Post a Comment