Belajar Bootstrap part 6 Mengenai Form Bagian 2 - Tutorial Programming & Digital Marketing

Tutorial Programming & Digital Marketing

STAY HUNGRY STAY FOOLISH

Breaking

Home Top Ad

Monday, August 8, 2016

Home bootstrap Belajar Bootstrap part 6 Mengenai Form Bagian 2

Belajar Bootstrap part 6 Mengenai Form Bagian 2


bewoksatukosong.com | Halo semua balik dengan om bewok, kali ini om bewok akan melanjutkan tutorial selanjutnya yaitu Belajar Bootstrap part 6 Mengenai Form Bagian 2, kalau teman - teman belum liat sebelumnya bisa lihat di bawah ini

Baca :

Bagian I Form Disabled
Untuk tutorial pertama om bewok akan menjelaskan mengenai form disabled, maksud dari disabled adalah mencacatkan, melumpuhkan  Sumber

Jika kita konversikan ke bahasa yang lebih mudah dimengerti adalah tidak bisa diubah.

Jadi yang akan kita lakukan adalah input text, select option, checkbox dan button tidak bisa digunakan atau tidak bisa diubah sama sekali. 
Contoh kodinganya teman - teman bisa lihat dibawah ini.

<!DOCTYPE html>
<html>
<head>
 <title>Disabled Form</title>
 <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
</head>
<body>
 <form>
  <fieldset disabled>
   <div class="form-group">
    <label for="disabledTextInput">Disable Input</label>
    <input type="text" id="disableTextInput" class="form-control" placeholder="Tidak bisa diubah"/>
   </div>
   <div class="form-group">
    <label for="disableSelect">Disable Select Menu</label>
    <select id="disableSelect" class="form-control">
     <option>tidak bisa diganti</option>
    </select>
   </div>
   <div class="checkbox">
    <label>
     <input type="checkbox"> Tidak bisa check list
    </label>
   </div>
   <button type="submit" class="btn btn-danger">Submit</button>
  </fieldset>
 </form>
</body>
</html>

Hasilnya bisa kamu lihat dibawah ini.

Gambar I.1 Tampilan Form Disabled
Mungkin teman - teman bingung, bagian mana aja yang bisa mengubah form input, checkbox dan button menjadi disabled ? 
Mari kita bahas setelah pesan - pesan berikut ini (iklan muncul).
- Sebenernya kita tidak perlu memperdulikan masalah id input text, atau select id nya karena tidak akan berpengaruh dalam disabled ini, yang membuat form ini tidak bisa diubah yaitu pada bagian fieldset nya. Kita lihat bahwa bagian fieldset nya kita buat menjadi disabled, yang perlu kita lakukan adalah menghapus bagian disabled pada fieldsetnya, maka yang terjadi adalah semua bisa kembali seperti semula dalam artian kita bisa mengubahnya, seperti contoh dibawah ini.

Gambar I.2 Tampilan Form Yang Bisa Diubah
Lihat gambar I.2 om bewok bisa menggunakan seperti semula, maksudnya om bewok bisa menulis text pada inputnya, lalu juga bisa checklist yang tadinya tidak bisa dan button pun juga bisa digunakan kembali. 

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

Bagian II Status Validasi  Atau Validate State
Untuk Tutoral kedua, kita akan membahas mengenai form validasi, mungkin teman - teman pernah lihat pada saat form pendaftaran, jika kamu memasukan sebuah username, lalu ketika nama yang kamu masukan sama dengan orang lain maka form berubah warna merah, dan akan mengatakan bahwa username yang kamu tulis sudah digunakan oleh orang lain, tetapi jika berhasil nama yang digunakan atau tidak ada orang lain yang menggunkanya, biasanya form tersebut berubah menjadi warna hijau dan artinya sukses (selamat ya ) , kali ini kita belajar seperti itu, lebih tepatnya design-nya ya, karena untuk yang seperti tadi dibutuhkan sebuah kodingan yang meng-arah ke sistem, tetapi disini kita lebih ke tampilan design-nya ya.
Contoh kodenya seperti dibawah ini ya

<!DOCTYPE html>
<html>
<head>
 <title>Belajar Form Validasi</title>
 <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
</head>
<body>
 <!-- Untuk bagian input form validasi -->
 <div class="form-group has-success">
  <label class="control-label" for="inputanSukses">Input dengan sukses</label>
  <input type="text" class="form-control" id="inputSuccess1" aria-describedby="helpBlock2">
   <span id="helpBlock2" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>
 </div>

 <div class="form-group has-warning">
  <label class="control-label" for="inputanWarning1">Input dengan warning</label>
  <input type="text" class="form-control" id="inputWarning1" aria-describedby="helpBlock2">
   <span id="helpBlock2" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>
 </div>

 <div class="form-group has-error">
  <label class="control-label" for="inputanError1">Input dengan error</label>
  <input type="text" class="form-control" id="inputError1" aria-describedby="helpBlock2">
   <span id="helpBlock2" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>
 </div>
 <!-- end untuk bagian form validasi -->

 <!-- checklist untuk validasi -->
 <div class="has-success">
  <div class="checkbox">
   <label>
    <input type="checkbox" id="checkboxSuccess" value="option1">
    Checkbox with success
   </label>
  </div>
 </div>

 <div class="has-warning">
  <div class="checkbox">
   <label>
    <input type="checkbox" id="checkboxWarning" value="option2">
    Checkbox with warning
   </label>
  </div>
 </div>

 <div class="has-success">
  <div class="checkbox">
   <label>
    <input type="checkbox" id="checkboxSuccess" value="option1">
    Checkbox with success
   </label>
  </div>
 </div>
 <!-- end checklist untuk validasi -->
</body>
</html>
Hasilnya kamu bisa lihat dibawah ini ya

Gambar II.3 Tampilan Form Validasi
Mari kita bedah mengenai form validasi ini. Konsepnya sebenarnya sama seperti Bagian I, karena bootstrap sering mengubahnya dari bagian div class, jadi konsepnya adalah memberikan nama div class lalu semua design formnya akan berubah. kita mempunyai 3 div class diantaranya adalah :
  1. form-group has-success
  2. form-group has-warning
  3. form-group has-error
Kamu bisa latihan sendiri dirumah untuk mengubah - ubah codingan tersebut, sering - seringlah untuk mengubah agar kamu lebih paham karena memang untuk Belajar Bootstrap part 6 Mengenai Form Bagian 2 perlu usaha agar kamu lebih mengerti.

Bagian III Status Validasi  Dengan Icon Atau Validate State With Icon
Mungkin kamu sering melihat jika di form tersebut, mempunyai icon silang, checklist atau yang lain, fungsinya untuk apa ? fungsinya sama seperti contoh dari Bagian II, icon checklist berfungsi jika kamu membuat username baru dan tidak ada orang yang membuat username yang sama denga kamu, maka pembuatan username kamu sukses dan muncul icon checlist tersebut, berbeda lagi dengan icon silang berwarna merah jika di bootstrap di sebut error, itu biasanya di gunakan ketika kamu membuat username baru tapi ada orang lain yang sama dengan username kamu, maka akan muncul icon error tersebut. Bootstrap sudah menyediakan banyak sekali icon, jadi kamu tidak perlu repot - repot untuk mencari lagi, kamu bisa check disini Icon Bootstrap

Baca :
-Tutorial CSS Lengkap Bersama Om Bewok

Jadi yang kita lakukan adalah menggabungkan tutorial yang Bagian II dan Bagian III. Untuk kodinganya kamu bisa lihat dibawah sini.

<!DOCTYPE html>
<html>
<head>
 <title>Belajar Form Validasi</title>
 <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
</head>
<body>
 <!-- Untuk bagian input form validasi -->
 <div class="form-group has-success has-feedback">
  <label class="control-label" for="inputanSukses">Input dengan sukses</label>
  <input type="text" class="form-control" id="inputSuccess1" aria-describedby="helpBlock2">
  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
  <span id="helpBlock2" class="help-block">Ini ketika sukses (selamat Ya sukses :D) .</span>

 </div>

 <div class="form-group has-warning has-feedback">
  <label class="control-label" for="inputanWarning1">Input dengan warning</label>
  <input type="text" class="form-control" id="inputWarning1" aria-describedby="helpBlock2">
  <span class="glyphicon glyphicon-warning-sign form-control-feedback" aria-hidden="true"></span>
   <span id="helpBlock2" class="help-block">Ini ketika sedang peringatan.</span>
 </div>

 <div class="form-group has-error has-feedback">
  <label class="control-label" for="inputanError1">Input dengan error</label>
  <input type="text" class="form-control" id="inputError1" aria-describedby="helpBlock2">
  <span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>
  <span id="helpBlock2" class="help-block">ini ketika username kamu sama dengan orang lain.</span>
 </div>
 <!-- end untuk bagian form validasi -->
</body>
</html>
Maka Hasilnya kamu bisa lihat dibawah ini.

Gambar III.1 Form Validasi With Icon
 Kita bisa lihat bahwa om bewok menambahkan sedikit dari Bagian II, om bewok hanya menambahkan has-feedback dibagian div class, cieh langsung ngecheck ke kodingan yang atas. dan om bewok menambahkan span class yang mana icon yang kita ambil dari Icon Bootstrap.

Apakah kita bisa menambahkan icon di bagian depan ? 

- Tentu saja bisa, Kodinganya teman - teman bisa lihat dibawah
<!DOCTYPE html>
<html>
<head>
 <title>Belajar Form</title>
 <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
</head>
<body>
 <form class="form-horizontal">
  <div class="form-group has-success has-feedback">
   <label class="control-label col-sm-3" for="inputSuccess">Input success</label>
   <div class="col-sm-9">
    <div class="input-group">
     <span class="input-group-addon">@</span>
     <input type="text" class="form-control" id="inputGroupSuccess">
    </div>
         <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
         <span id="inputGroupSuccess2Status" class="sr-only">(success)</span>
   </div>
  </div>
 </form>
</body>
</html>
Maka hasilnya akan seperti dibawah ini

Gambar III.2 Tampilan Icon Di Depan Pada Form
Bagian IV Control Sizing
Control sizing adalah mengatur semua ukuran dalam ukuran inputan form, label dan lain - lain. Untuk menghemat langsung saja kita mulai, Untuk control sizing kita bagi 3 di antaranya adalah 

  1. Height Sizing
  2. Label Sizing
  3. Column Sizing
1. Height Sizing
Height Sizing maksudnya adalah kita mengatur tingginya input text dan select size dengan memanggil class yang sudah dibuat oleh bootstrap. Kodingan seperti dibawah ini ya 

<!DOCTYPE html>
<html>
<head>
 <title></title>
 <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
</head>
<body>
 <h1>Size Input Text</h1>
 <input class="form-control input-lg" type="text" placeholder=".input-lg"/>
 <input class="form-control" type="text" placeholder="Default Input"/>
 <input class="form-control input-sm" type="text" placeholder=".input-sm"/>

 <br/>
 <br/>
 
 <h2>Select Size</h2>
 <select class="form-control input-lg">...
  <option>ini inputan input lg</option>
 </select>
 <select class="form-control">...
  <option>ini inputan input default</option>
 </select>
 <select class="form-control input-sm">...
  <option>ini inputan input sm</option>
 </select>
</body>
</html>
Maka Kamu bisa lihat hasilnya seperti dibawah ini

Gambar IV.1 Tampilan Input Text Sizing & Select Sizing
Sepertinya om bewok tidak perlu jelasin lagi untuk hal ini, karena kamu bisa lihat sendiri perbedaanya.

Baca :
- Tutorial HTML Lengkap Dengan Om Bewok

2. Label Sizing
Label Sizing maksudnya disini kita akan mengatur ukuran label nya, kalau tadi kan input nya, sebenernya konsep yang digunakan masih sama kok. Contoh kodingnya seperti dibawah ini ya

<!DOCTYPE html>
<html>
<head>
 <title></title>
 <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
</head>
<body>
 <br/>
 <form class="form-horizontal">
  <div class="form-group form-group-lg">
   <label class="col-sm-2 control-label" for="formGroupInputLarge">Large Label</label>
   <div class="col-sm-10">
    <input type="text" class="form-control" id="FormGroupInputLarge" placeholder="Large Input"/>
   </div>
  </div>
  <br/>
  <br/>
  <div class="form-group form-group-sm">
   <label class="col-sm-2 control-label" for="formGroupInputLarge">Small Label</label>
   <div class="col-sm-10">
    <input type="text" class="form-control" id="FormGroupInputSmall" placeholder="Small Input"/>
   </div>
  </div>
 </form>
</body>
</html>
Maka Hasilnya kamu bisa lihat dibawah ini

Gambar IV.2 Tampilan Label Sizing
<form class="form-horizontal">
Jika kita tidak menggunakan ini, maka kita tidak memberikan jarak antar inputan dan label kamu bisa mencobanya sendiri.

<div class="form-group form-group-lg">
Ini maksudnya lebih mengendalikan di label dan input text, jika kamu akan hapus maka ukuran input text dan label pun akan berubah

<label class="col-sm-2 control-label" for="formGroupInputLarge">Large Label</label>
Ini untuk posisi text label nya, jika kamu memberi col-sm-4 maka text label akan maju.

<div class="col-sm-10">
Ini untuk mengatur ukuran dari inputan text, jika kamu ganti dengan col-sm-12 maka dia akan kebawah. Mengapa ? karena om bewok pernah bilang bahwa ukuran dari kiri sampai kanan yaitu 12. di karenakan ada label col-sm-2 + col-sm-12 maka hasilnya 14, secara otomatis dia akan kebawah, kamu bisa mencobanya agar lebih mengerti

3. Column Sizing
Konsep ini sama seperti kita belajar grid system waktu itu, perbedaanya adalah kita hanya menambahkan inputan text agar bisa dikendalikan ukuran panjang kotak tersebut, kalau tadi kan tinggi kotaknya, jika sekarang kita akan mencoba mengubah panjang kotaknya
Kodingan seperti dibawah ya.
saa

<!DOCTYPE html>
<html>
<head>
 <title></title>
 <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
</head>
<body>
<div class="row">
  <div class="col-xs-2">
    <input type="text" class="form-control" placeholder=".col-xs-2">
  </div>
  <div class="col-xs-3">
    <input type="text" class="form-control" placeholder=".col-xs-3">
  </div>
  <div class="col-xs-4">
    <input type="text" class="form-control" placeholder=".col-xs-4">
  </div>
</div>
</body>
</html>
Hasilnya akan seperti dibawah ini
Gambar IV.3 Tampilan Control Size
Kita bisa lihat ukuranya berubah - ubah karena settinganya tadi yang kita coba secara berurutan col-sm-2 col-sm-3 col-sm-4
Kamu bisa coba untuk col-sm-5 col-sm-6 dan sampai seterusnya, dan Apa yang terjadi apakah hanya 1 baris yang digunakan atau sampai 2 baris atau sampai kebawah lagi. Kamu bisa mencobanya sendiri 

Selesai Tutorial mengenai Form Bagian 2, Jika kamu ingin lihat Tutorial Form Bagian 1 kamu bisa lihat di sini Belajar Bootstrap Part 6 Mengenai Form bagian 1. Jika kamu ingin melihat tutorial semuanya mengenai bootstrap kamu bisa lihat disini Tutorial Dasar Sampai Membuat Website Menggunakan Bootstrap, Om bewok sudah membuat secara berurutan agar kamu tidak susah mencarinya
Selanjutnya kita akan belajar mengenai Button 
Tags
Share This
By di
Label:

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)