Mari Belajar Coding: html - Tutorial Pemrograman Web dan Mobile
Tampilkan postingan dengan label html. Tampilkan semua postingan
Tampilkan postingan dengan label html. Tampilkan semua postingan

21 Agustus 2019

Membuat Form Input Tanggal dengan Datepicker

Membuat Form Input Tanggal dengan Datepicker

Selamat datang di blog Mari belajar coding. Pada tutorial kali ini kita akan belajar membuat sebuah inputan tanggal dengan Datepicker. Datepicker merupakan plugin jquery untuk menampilkan kalendar interaktif yang dapat mempermudah kita untuk input tanggal dengan format date maupun datetime. Kita bisa menggunakan plugin datepicker ini pada sebuah form inputan tanggal lahir dan sebagainya. 

Membuat Form Input Tanggal dengan Datepicker

Disini saya akan memberikan dua contoh plugin datepicker yang dapat di terapkan di aplikasi web teman-teman, pertama Datepicker JQuery UI dan yang kedua Datepicker Bootstrap. 

Datepicker JQuery UI
Membuat Form Input Tanggal dengan Datepicker

Untuk memasang plugin Datepicker JQuery UI, teman-teman perlu memanggil komponen css dan class jquerynya dengan mendownload plugin datepicker jquery ui atau bisa langsung mengakses melalui CDN dengan script dibawah ini kemudian letakkan di dalam tag head.
 <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

Buat fungsi untuk menerapkan datepicker pada inputan form dengan javascript.
 <script>
  $( function() {
    $( "#date" ).datepicker();
  } );
  </script>

#date diatas merupakan isi dari attribute id pada form input. Lihat kode dibawah ini.
<label >Date:</label>
<input type="text" id="date">

Untuk format atau option datepicker jquery ui seperti penampilan tanggal (yyyy-mm-dd) dan sebagainya, teman-teman bisa membaca dokumentasinya di sini. api.jqueryui.com/datepicker
Contoh untuk menampilkan tanggal dengan format yyyy-mm-dd.
<script>
$( function() {
  $( "#date" ).datepicker({
    dateFormat: "yy-mm-dd"
  });
} );
</script>

Kode lengkap membuat form input dengan datepicker jquery ui seperti dibawah ini. Simpan dengan nama file latihan1.html
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>maribelajarcoding.com</title>

  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

  <script>
  $( function() {
    $( "#date" ).datepicker({
      dateFormat: "yy-mm-dd"
    });
  } );
  </script>
</head>
<body>

  <label >Date:</label>
  <input type="text" id="date">
 
</body>
</html>

Datepicker Bootstrap
Membuat Form Input Tanggal dengan Datepicker
Datepicker Bootstrap merupakan plugin tambahan untuk framework bootstrap. Fungsinya sama dengan datepicker jquery ui, yaitu untuk menampilkan popup kalendar interaktif. 
Download plugin datepicker bootstrap terlebih dahulu di sini. bootstrap-datepicker.

Setelah download selesai, silahkan ekstrak hasil download tadi kemudian pindahkan folder bootstrap-datepicker kedalam folder xampp/htdocs.
Membuat Form Input Tanggal dengan Datepicker

Panggil komponen css dan jquerynya dengan menambahkan kode dibawah ini didalam tag head.
<!-- framework bootstrap -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>

  <!-- datepicker bootstrap -->
  <link rel="stylesheet" href="bootstrap-datepicker/css/bootstrap-datepicker.min.css">
  <script src="bootstrap-datepicker/js/bootstrap-datepicker.min.js"></script>
  <script src="bootstrap-datepicker/locales/bootstrap-datepicker.id.min.js"></script>

Untuk menerapkan datepicker bootstrap di dalam form input, caranya sama dengan datepicker jquery ui dengan membuat fungsi javascript.
  <script>
  $( function() {
    $( "#date" ).datepicker();
  } );
  </script>

#date merupakan isi dari attribute id pada form input.

Teman-teman bisa membaca dokumentasinya untuk mengubah format atau option datepicker bootstrap disini bootstrap-datepicker.readthedocs.io. Contoh sederhana format tanggal pada datepicker bootstrap.
<script>
$( function() {
  $( "#date" ).datepicker({
    autoclose:true,
    todayHighlight:true,
    format:'yyyy-mm-dd',
    language: 'id'
  });
} );
</script>

Kode lengkap membuat form input dengan datepicker bootstrap. Simpan dengan nama file latihan2.html
<!DOCTYPE html>
<html lang="en">
<head>
  <title>maribelajarcoding.com</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- framework bootstrap -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>

  <!-- datepicker bootstrap -->
  <link rel="stylesheet" href="bootstrap-datepicker/css/bootstrap-datepicker.min.css">
  <script src="bootstrap-datepicker/js/bootstrap-datepicker.min.js"></script>
  <script src="bootstrap-datepicker/locales/bootstrap-datepicker.id.min.js"></script>

  <script>
  $( function() {
    $( "#date" ).datepicker({
      autoclose:true,
      todayHighlight:true,
      format:'yyyy-mm-dd',
      language: 'id'
    });
  } );
  </script>
</head>
<body>

<div class="container">
 
  <form>
    <div class="form-group">
      <label  class="control-label col-sm-1" >Date:</label>
      <div class="col-sm-3">
        <input type="text" class="form-control" id="date">
      </div>      
    </div>
  </form>
</div>

</body>
</html>

Tutorial membuat form input tanggal dengan datepicker telah selesai. Sekian, semoga bermanfaat.

Baca juga Membuat Format Hari Tanggal Indonesia dengan PHP

Related Search:
Membuat Form Input Tanggal dengan Datepicker
Membuat Form Inputan Tanggal dengan JQuery UI
Membuat Form Input Tanggal dengan PHP
Form Input Tanggal Lahir PHP

05 Agustus 2019

Menyisipkan Gambar di Radio Button HTML


Menyisipkan Gambar di Radio Button HTML

Selamat datang di blog Mari Belajar Coding. Pada tutorial kali ini kita akan belajar menyisipkan gambar di radio button HTML, jika  default radio button berbentuk lingkaran maka kita akan menggantinya dengan sebuah gambar. Untuk lebih jelasnya lihat contoh di bawah ini.
Menyisipkan Gambar di Radio Button HTML

Menyisipkan Gambar di Radio Button HTML

Pertama-tama buatlah sebuah form dengan input tipe radio button. Tambahkan image pada label. Teman-teman bisa mengganti image sesuai yang diinginkan.
<form>
  <label>
     <input type="radio" name="emoji" id="emoji">
     <img src="Heart Eyes Emoji.png" width="100px">
 </label>
 <label>
     <input type="radio" name="emoji" id="emoji" >
     <img src="Slightly Smiling Face Emoji.png" width="100px">
 </label>
 <label>
     <input type="radio" name="emoji" id="emoji">
     <img src="Very Sad Emoji.png" width="100px">
 </label>
  <label>
      <input type="radio" name="emoji" id="emoji">
      <img src="Loudly Crying Face Emoji.png" width="100px">
  </label>
</form>

Selanjutnya tambahkan style untuk label dan input radio button.
<style type="text/css">
  label > input{ /* Menyembunyikan radio button */
          visibility: hidden; 
          position: absolute; 
        }
        label > input + img{ /* style gambar */
          cursor:pointer;
          border:2px solid transparent;
        }
        label > input:checked + img{ /* (RADIO CHECKED) style gambar */
          border:2px solid #f00;
        }
 </style>

Kode lengkapnya seperti dibawah ini, simpan file dengan nama latihan-radiobutton.html.
<!DOCTYPE html>
<html>
<head>
 <title>maribelajarcoding.com</title>
 <style type="text/css">
  label > input{ /* Menyembunyikan radio button */
          visibility: hidden; 
          position: absolute; 
        }
        label > input + img{ /* style gambar */
          cursor:pointer;
          border:2px solid transparent;
        }
        label > input:checked + img{ /* (RADIO CHECKED) style gambar */
          border:2px solid #f00;
        }
 </style>
</head>
<body>
<form>
  <label>
     <input type="radio" name="emoji" id="emoji">
     <img src="Heart Eyes Emoji.png" width="100px">
 </label>
 <label>
     <input type="radio" name="emoji" id="emoji" >
     <img src="Slightly Smiling Face Emoji.png" width="100px">
 </label>
 <label>
     <input type="radio" name="emoji" id="emoji">
     <img src="Very Sad Emoji.png" width="100px">
 </label>
  <label>
      <input type="radio" name="emoji" id="emoji">
      <img src="Loudly Crying Face Emoji.png" width="100px">
  </label>
</form>
</body>
</html>

Tutorial Menyisipkan Gambar di Radio Button HTML sampai disini, sekian semoga bermanfaat.



Related Search:
Menyisipkan gambar di radio button
Menambahkan gambar di radio button
Mengganti radio button dengan gambar
How to replace radio buttons with images

03 Agustus 2019

Membuat Select All Checkbox dengan Javascript


Membuat Select All Checkbox dengan Javascript

Selamat datang kembali di blog Mari belajar coding. Pada tutorial kali ini, kita akan belajar membuat sebuah fungsi select all checkbox sekaligus. Dengan menggunakan fungsi ini kita tidak perlu mencentang satu persatu di kotak checkbox, secara otomatis akan menandai semua checkbox yang ada.

Membuat Select All Checkbox dengan Javascript

Pertama-tama buat terlebih dahulu inputan checkbox.
<table border="1" >
 <thead>
  <tr>
   <th><input type="checkbox" onchange="checkAll(this)" name="chk[]" ></th>
   <th>Data</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td><input type="checkbox" name="chkbox[]" value="1"></td>
   <td>1</td>
  </tr>
  <tr>
   <td><input type="checkbox" name="chkbox[]" value="2"></td>
   <td>2</td>
  </tr>
  <tr>
   <td><input type="checkbox" name="chkbox[]" value="3"></td>
   <td>3</td>
  </tr>
  <tr>
   <td><input type="checkbox" name="chkbox[]" value="4"></td>
   <td>4</td>
  </tr>
  <tr>
   <td><input type="checkbox" name="chkbox[]" value="5"></td>
   <td>5</td>
  </tr>
  <tr>
   <td><input type="checkbox" name="chkbox[]" value="6"></td>
   <td>6</td>
  </tr>
  <tr>
   <td><input type="checkbox" name="chkbox[]" value="7"></td>
   <td>7</td>
  </tr>
  <tr>
   <td><input type="checkbox" name="chkbox[]" value="8"></td>
   <td>8</td>
  </tr>
 </tbody>
</table>

Tampilan pilihan checkbox jika dijanlan.
Membuat Select All Checkbox dengan Javascript

Selanjutnya buat fungsi checkAll menggunakan javascript.
<script type="text/javascript">
 function checkAll(ele) {
      var checkboxes = document.getElementsByTagName('input');
      if (ele.checked) {
          for (var i = 0; i < checkboxes.length; i++) {
              if (checkboxes[i].type == 'checkbox' ) {
                  checkboxes[i].checked = true;
              }
          }
      } else {
          for (var i = 0; i < checkboxes.length; i++) {
              if (checkboxes[i].type == 'checkbox') {
                  checkboxes[i].checked = false;
              }
          }
      }
  }
</script>

Kode lengkapnya seperti dibawah ini.
<!DOCTYPE html>
<html>
<head>
 <title>maribelajarcoding.com</title>
 <script type="text/javascript">
  function checkAll(ele) {
       var checkboxes = document.getElementsByTagName('input');
       if (ele.checked) {
           for (var i = 0; i < checkboxes.length; i++) {
               if (checkboxes[i].type == 'checkbox' ) {
                   checkboxes[i].checked = true;
               }
           }
       } else {
           for (var i = 0; i < checkboxes.length; i++) {
               if (checkboxes[i].type == 'checkbox') {
                   checkboxes[i].checked = false;
               }
           }
       }
   }
 </script>
</head>
<body>
<table border="1" >
 <thead>
  <tr>
   <th><input type="checkbox" onchange="checkAll(this)" name="chk[]" ></th>
   <th>Data</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td><input type="checkbox" name="chkbox[]" value="1"></td>
   <td>1</td>
  </tr>
  <tr>
   <td><input type="checkbox" name="chkbox[]" value="2"></td>
   <td>2</td>
  </tr>
  <tr>
   <td><input type="checkbox" name="chkbox[]" value="3"></td>
   <td>3</td>
  </tr>
  <tr>
   <td><input type="checkbox" name="chkbox[]" value="4"></td>
   <td>4</td>
  </tr>
  <tr>
   <td><input type="checkbox" name="chkbox[]" value="5"></td>
   <td>5</td>
  </tr>
  <tr>
   <td><input type="checkbox" name="chkbox[]" value="6"></td>
   <td>6</td>
  </tr>
  <tr>
   <td><input type="checkbox" name="chkbox[]" value="7"></td>
   <td>7</td>
  </tr>
  <tr>
   <td><input type="checkbox" name="chkbox[]" value="8"></td>
   <td>8</td>
  </tr>
 </tbody>
</table>
</body>
</html>
Membuat Select All Checkbox dengan Javascript

Baca juga: Menyimpan Data Checkbox ke Database dengan PHP

Untuk mendisable salah satu checkbox agar tidak terpilih secara otamatis, tambahkan atribut disabled pada inputan checkbox dan mengubah fungsi checkAll pada javascript. Contoh programnya seperti dibawah ini. Lihat baris yang diberi highlight.
<!DOCTYPE html>
<html>
<head>
 <title>maribelajarcoding.com</title>
 <script type="text/javascript">
  function checkAll(ele) {
       var checkboxes = document.getElementsByTagName('input');
       if (ele.checked) {
           for (var i = 0; i < checkboxes.length; i++) {
               if (checkboxes[i].type == 'checkbox'  && !(checkboxes[i].disabled) ) {
                   checkboxes[i].checked = true;
               }
           }
       } else {
           for (var i = 0; i < checkboxes.length; i++) {
               if (checkboxes[i].type == 'checkbox') {
                   checkboxes[i].checked = false;
               }
           }
       }
   }
 </script>
</head>
<body>
<table border="1" >
 <thead>
  <tr>
   <th><input type="checkbox" onchange="checkAll(this)" name="chk[]" ></th>
   <th>Data</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td><input type="checkbox" name="chkbox[]" value="1"></td>
   <td>1</td>
  </tr>
  <tr>
   <td><input type="checkbox" name="chkbox[]" value="2" disabled=""></td>
   <td>2</td>
  </tr>
  <tr>
   <td><input type="checkbox" name="chkbox[]" value="3"></td>
   <td>3</td>
  </tr>
  <tr>
   <td><input type="checkbox" name="chkbox[]" value="4" disabled=""></td>
   <td>4</td>
  </tr>
  <tr>
   <td><input type="checkbox" name="chkbox[]" value="5" disabled=""></td>
   <td>5</td>
  </tr>
  <tr>
   <td><input type="checkbox" name="chkbox[]" value="6"></td>
   <td>6</td>
  </tr>
  <tr>
   <td><input type="checkbox" name="chkbox[]" value="7"></td>
   <td>7</td>
  </tr>
  <tr>
   <td><input type="checkbox" name="chkbox[]" value="8"></td>
   <td>8</td>
  </tr>
 </tbody>
</table>
</body>
</html>
Membuat Select All Checkbox dengan Javascript

Tutorial membuat select all checkbox dengan javascript sampai disini, sekian semoga bermanfaat.



Related Search:
Membuat select all checkbox dengan Javascript
Membuat select all checkbox dengan PHP
Menampilkan checkbox di tabel