Be Programer

Make your dream to be programer is happen

This is Featured Slide 1 Title

This is Featured Slide 2 Title

This is Featured Slide 3 Title

This is Featured Slide 4 Title

This is Featured Slide 5 Title

Cara Membuat Text Direction Map Dengan API Google Maps

, , Tidak ada komentar
Cara Membuat Text Direction Map Dengan API Google Maps

Cara Membuat Text Direction Map Dengan Google Maps - Jika sebelumnya kita sudah membuat direction map, kali ini kita akan membuat Text Direction dengan menggunakan API Google Maps. Text direction adalah teks petunjuk jalan yang muncul di samping peta, berfungsi untuk memberi informasi petunjuk jalan seperti kapan jarak tikungan, putaran, dll. jika sebelumnya kita hanya di berikan petunjuk jalur disini kita akan di berikan petunjuk lokasi anda kapan harus berbelok, lurus, memutar, dll. Untuk lebih jelasnya langsung saja kita ke prakteknya.


Untuk menulisakan script anda dapat menggunakan apa saja bebas, contoh : Notepad, Notepad++, Dreamwaver, NetBeans, Eclipse.

HTML

Jika anda belum membuat folder Google_maps buatlah sebuah folder dengan nama Google_maps kemudian buat sebuah file HTML dengan nama text_direction.html kemudian masukan script :

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Membuat Text Drections Map dengan API Google Maps</title>
    <style>
   html { height: 100% }
   #panel{padding:5px;}
      .input {
   height: 25px;
   padding: 2px;
   width: 200px;
      }
   #btn{
     height: 31px;
     background: #267BA8;
     border: none;
     padding: 5px;
     color: #fff;
   }
   #directions-panel {
        height: 100%;
        float: right;
        width: 300px;
        overflow: auto;
      }
   #map-canvas { height: 400px;}
   *{
   margin: 0;
   padding: 0;
  }
  body {
   text-align:center;
   background-color:#61b3de;
   font-family:Arial, Helvetica, sans-serif;
   font-size:80%;
   color:#666;
  }
  .wrap {
   background: #f3f8fb;
   width:900px;
   margin:30px auto;
   border: 4px dashed #61b3de;
   border-radius:4px;
   padding: 20px 5px;
  }
  h1 {
   font-family:Georgia, "Times New Roman", Times, serif;
   font-size:24px;
   color:#645348;
   font-style:italic;
   text-decoration:none;
   font-weight:100;
   padding: 10px;
  }
  .copy{
   margin-top: 20px;
   clear: both;
  }
  @media print {
   #map-canvas {
     height: 500px;
     margin: 0;
   }

   #directions-panel {
     float: none;
     width: 100%;
   }
    }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
    <script>
  var directionsDisplay;
  var directionsService = new google.maps.DirectionsService();
  var map;
  
  function initialize() {
    directionsDisplay = new google.maps.DirectionsRenderer();
    var latlng = new google.maps.LatLng(-6.187931, 107.031279);
    var mapOptions = {
   zoom: 12,
   center: latlng
    }
    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
    directionsDisplay.setMap(map);
    directionsDisplay.setPanel(document.getElementById('directions-panel'));
    map.controls[google.maps.ControlPosition.TOP_CENTER].push(control);
  }

  function calcRoute() {
    var start = document.getElementById('start').value;
    var end = document.getElementById('end').value;
    var request = {
     origin:start,
     destination:end,
     travelMode: google.maps.TravelMode.DRIVING
    };
    directionsService.route(request, function(response, status) {
   if (status == google.maps.DirectionsStatus.OK) {
     directionsDisplay.setDirections(response);
   }
    });
  }

  google.maps.event.addDomListener(window, 'load', initialize);
    </script>
  </head>
  <body>
 <div class="wrap">
  <h1>Jin Toples Programming</h1>
  <h1>Membuat Text Drections Map dengan API Google Maps</h1>
  <div id="panel">
    <input class="input" id="start" type="text" value="Kebalen, bekasi">
    <input class="input" id="end" type="text" value="Universitas bhayangkara, bekasi">
    <input id="btn" type="button" value="Search" onclick="calcRoute()">
  </div>
  <div id="directions-panel"></div>
  <div id="map-canvas"></div>
  <p class='copy'>Copyright &copy <a href="http://jintoples.blogspot.com">Jin Toples Programming</a> 2015</p>
 </div> 
  </body>
</html>

Perhatikan script kode di atas :

directionsDisplay.setPanel(document.getElementById('directions-panel'));

Script ini berfungsi menampilkan panel text direction, dalam kasus ini kita menggunakan elemen HTML dengan id directions-panel.

Anda dapat mencobanya sekarang dengan cara membukanya di browser anda, disarankan membukanya dengan browser Chrome atau Mozilla, jangan menggunakan IE Bkakakak.... jika di IE tidak jalan saya sudah tidak heran.

Anda bahkan dapat memprint peta dan petunjuknya dengan cara tekan CTRL+P pada keyboard.

Apabila masih ada yang binggung anda juga dapat membacanya dari refrensi langsung di dokumentasi Text Direction API Google Maps di sini : CEK TKP

Selanjutnya kita bertemu lagi membahas Maps dengan text direction yang munculnya bukan di bagian samping tapi di atas marker setiap titik.

Text Direction Map Dengan API Google Maps anda sekarang sudah selesai, baca juga tutorial program HTML dan Javascript lainnya.
Share:
Read More

Cara Membuat Direction Map Dengan API Google Maps

, , Tidak ada komentar
 Cara Membuat Direction Map Dengan API Google Maps

Cara Membuat Direction Map Dengan API Google Maps - Kali ini kita akan membuat map yang dilengkapi dengan direction. Direction atau petunjuk arah adalah petunjuk jalur atau path lintasan yang harus di lalui dari alamat suatu lokasi menuju alamat lokasi lainnya. Dengan menggunakan fitur Directions service yang sudah dimiliki oleh API Google Maps kita dapat dengan mudah membuat petunjuk arah menuju suatu lokasi. Jika sebelumnya kita melakukan pencarian kordinat lokasi kali ini kita membuat map yang membantu kita mendapatkan petujuk arah ke lokasi tersebut. Untuk lebih jelansya langsung saja ke prakteknya.


Untuk menulisakan script anda dapat menggunakan apa saja bebas, contoh : Notepad, Notepad++, Dreamwaver, NetBeans, Eclipse.

HTML

Jika anda belum membuat folder Google_maps buatlah sebuah folder dengan nama Google_maps kemudian buat sebuah file HTML dengan nama driection.html kemudian masukan script :

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Geocoding service</title>
    <style>
   html { height: 100% }
   #panel{padding:5px;}
      .input {
   height: 25px;
   padding: 2px;
   width: 200px;
      }
   #btn{
     height: 31px;
     background: #267BA8;
     border: none;
     padding: 5px;
     color: #fff;
   }
   #map-canvas { height: 400px; width:100%; }
   *{
   margin: 0;
   padding: 0;
  }
  body {
   text-align:center;
   background-color:#61b3de;
   font-family:Arial, Helvetica, sans-serif;
   font-size:80%;
   color:#666;
  }
  .wrap {
   background: #f3f8fb;
   width:730px;
   margin:30px auto;
   border: 4px dashed #61b3de;
   border-radius:4px;
   padding: 20px 5px;
  }
  h1 {
   font-family:Georgia, "Times New Roman", Times, serif;
   font-size:24px;
   color:#645348;
   font-style:italic;
   text-decoration:none;
   font-weight:100;
   padding: 10px;
  }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
    <script>
  var directionsDisplay;
  var directionsService = new google.maps.DirectionsService();
  var map;
  
  function initialize() {
    directionsDisplay = new google.maps.DirectionsRenderer();
    var latlng = new google.maps.LatLng(-6.187931, 107.031279);
    var mapOptions = {
   zoom: 12,
   center: latlng
    }
    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
    directionsDisplay.setMap(map);
  }

  function calcRoute() {
    var start = document.getElementById('start').value;
    var end = document.getElementById('end').value;
    var request = {
     origin:start,
     destination:end,
     travelMode: google.maps.TravelMode.DRIVING
    };
    directionsService.route(request, function(response, status) {
   if (status == google.maps.DirectionsStatus.OK) {
     directionsDisplay.setDirections(response);
   }
    });
  }

  google.maps.event.addDomListener(window, 'load', initialize);
    </script>
  </head>
  <body>
 <div class="wrap">
  <h1>Jin Toples Programming</h1>
  <h1>Membuat Drections Map dengan API Google Maps</h1>
  <div id="panel">
    <input class="input" id="start" type="text" value="Kebalen, bekasi">
    <input class="input" id="end" type="text" value="Universitas bhayangkara, bekasi">
    <input id="btn" type="button" value="Search" onclick="calcRoute()">
  </div>
  <div id="map-canvas"></div>
 </div>
  </body>
</html>

Perhatikan baris kode ini :

function calcRoute() {
    var start = document.getElementById('start').value;
    var end = document.getElementById('end').value;
    var request = {
     origin:start,
     destination:end,
     travelMode: google.maps.TravelMode.DRIVING
    };
    directionsService.route(request, function(response, status) {
   if (status == google.maps.DirectionsStatus.OK) {
     directionsDisplay.setDirections(response);
   }
    });
  }

Ini adalah fungsi yang berjalan ketika anda menekan tombol search, fungsi ini adalah direction service yang kita gunakan untuk menemukan jalur dari titik start menuju titik end. 

Perhatikan pada baris kode di atas : 

var request = {
     origin:start,
     destination:end,
     travelMode: google.maps.TravelMode.DRIVING
    };

origin adalah titik awal yang didapat dari var start berisi nilai inputan dengan id start
destination adalah titik tujuan yang didapat dari var end berisi nilai inputan dengan id end
travelMode adalah mode perjalanan yang anda lakukan apakah menggunakan mobil, sepeda, jalan, dll.

Anda dapat mencobanya sekarang dengan cara membukanya di browser anda, disarankan membukanya dengan browser Chrome atau Mozilla, jangan menggunakan IE Bkakakak.... jika di IE tidak jalan saya sudah tidak heran.

Apabila masih ada yang binggung anda juga dapat membacanya dari refrensi langsung di dokumentasi Directions Services API Google Maps di sini : CEK TKP

Selanjutnya kita bertemu lagi membahas Maps dengan direction atau petunjuk arah dari suatu lokasi ke lokasi lain yang di lengkapi dengan teks petunjuk kapan jarak anda berbelok.

Baca disini : Cara Membuat Text Direction Map Dengan API Google Maps

Direction Map Dengan API Google Maps anda sekarang sudah selesai, baca juga tutorial program HTML dan Javascript lainnya.
Share:
Read More

Cara Membuat Geocoding Map Dengan API Google Maps

, , Tidak ada komentar
Cara Membuat Geocoding Map Dengan API Google Maps

Cara Membuat Geocoding Map Dengan API Google Maps - Sebelumnya kita sudah membuat static map, kali ini kita akan membuat Map dengan Geocoding Service menggunakan API Google Maps. Geocoding adalah salah satu fitur api google maps yang mengubah suatu alamat lokasi menjadi kordinat latitude dan longitude serta sebaliknya, jika sebelumnya kita sudah menentukan sendiri latitude dan longitudenya kali ini kita dapat melakukan pencarian lokasi dengan memasukan nama alamatnya. Untuk lebih jelansya langsung saja ke prakteknya.


Untuk menulisakan script anda dapat menggunakan apa saja bebas, contoh : Notepad, Notepad++, Dreamwaver, NetBeans, Eclipse.

HTML

Jika anda belum membuat folder Google_maps buatlah sebuah folder dengan nama Google_maps kemudian buat sebuah file HTML dengan nama geocoding.html kemudian masukan script :

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Geocoding service</title>
    <style>
   html { height: 100% }
   #panel{padding:5px;}
      #address {
   height: 25px;
   padding: 2px;
   width: 400px;
      }
   #btn{
     height: 31px;
     background: #267BA8;
     border: none;
     padding: 5px;
     color: #fff;
   }
   #map-canvas { height: 400px; width:100%; }
   *{
   margin: 0;
   padding: 0;
  }
  body {
   text-align:center;
   background-color:#61b3de;
   font-family:Arial, Helvetica, sans-serif;
   font-size:80%;
   color:#666;
  }
  .wrap {
   background: #f3f8fb;
   width:730px;
   margin:30px auto;
   border: 4px dashed #61b3de;
   border-radius:4px;
   padding: 20px 5px;
  }
  h1 {
   font-family:Georgia, "Times New Roman", Times, serif;
   font-size:24px;
   color:#645348;
   font-style:italic;
   text-decoration:none;
   font-weight:100;
   padding: 10px;
  }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
    <script>
  var geocoder;
  var map;
  function initialize() {
    geocoder = new google.maps.Geocoder();
    var latlng = new google.maps.LatLng(-6.187931, 107.031279);
    var mapOptions = {
   zoom: 12,
   center: latlng
    }
    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
  }

  function codeAddress() {
    var address = document.getElementById('address').value;
    geocoder.geocode( { 'address': address}, function(results, status) {
   if (status == google.maps.GeocoderStatus.OK) {
     map.setCenter(results[0].geometry.location);
     var marker = new google.maps.Marker({
      map: map,
      position: results[0].geometry.location
     });
   } else {
     alert('Geocode was not successful for the following reason: ' + status);
   }
    });
  }

  google.maps.event.addDomListener(window, 'load', initialize);
    </script>
  </head>
  <body>
 <div class="wrap">
  <h1>Jin Toples Programming</h1>
  <h1>Membuat Geocoding dengan API Google Maps</h1>
  <div id="panel">
    <input id="address" type="textbox" value="Kebalen, bekasi">
    <input id="btn" type="button" value="Search" onclick="codeAddress()">
  </div>
  <div id="map-canvas"></div>
 </div>
  </body>
</html>

Perhatikan baris kode di atas :

function codeAddress() {
    var address = document.getElementById('address').value;
    geocoder.geocode( { 'address': address}, function(results, status) {
   if (status == google.maps.GeocoderStatus.OK) {
     map.setCenter(results[0].geometry.location);
     var marker = new google.maps.Marker({
      map: map,
      position: results[0].geometry.location
     });
   } else {
     alert('Geocode was not successful for the following reason: ' + status);
   }
    });
  }

Ini adalah fungsi yang berjalan ketika anda menekan tombol search, fungsi ini adalah geocoding anda yang bertugas mengkonversi alamat menjadi kordinat. kemudian marker memberikan tanda pada kordiat yang dituju.

Anda dapat mencobanya sekarang dengan cara membukanya di browser anda, disarankan membukanya dengan browser Chrome atau Mozilla, jangan menggunakan IE Bkakakak.... jika di IE tidak jalan saya sudah tidak heran.

Apabila masih ada yang binggung anda juga dapat membacanya dari refrensi langsung di dokumentasi Geocoding Services API Google Maps di sini : CEK TKP

Selanjutnya kita bertemu lagi membahas Maps dengan direction atau petunjuk arah dari suatu lokasi ke lokasi lain.

Baca disini : Cara Membuat Direction Map Dengan API Google Maps

Static Map dengan API Google Maps anda sekarang sudah selesai, baca juga tutorial program HTML dan Javascript lainnya.
Share:
Read More

Cara Membuat Static Map dengan API Google Maps

, Tidak ada komentar
Cara Membuat Static Map dengan API Google Maps

Cara Membuat Static Map dengan API Google Maps - Kali ini kita akan belajar membuat sebuah static map dengan menggunakan API Google Maps, maksud maps static disni adalah mapnya kita sendri yang menentukan kordinat latitude dan longitude dari mapsnya nanti. Menggunakan API yang disediakan oleh google maps kita dapat membuat peta dari lokasi dengan memasukan logitude dan latitudenya, maps ini anda dapat pergunakan sebagai peta lokasi anda seperti yan biasa anda lihat di kontak - kontak website. untuk lebih jelasnya langsung saja ke prakteknya.


Untuk menulisakan script anda dapat menggunakan apa saja bebas, contoh : Notepad, Notepad++, Dreamwaver, NetBeans, Eclipse.

HTML

Buatlah sebuah folder dengan nama Google_maps kemudian buat sebuah file HTML dengan nama static_map.html kemudian masukan script :

<!DOCTYPE html>
<html>
  <head>
    <style type="text/css">
   html { height: 100% }
   #map-canvas { height: 400px; width:100%; }
   *{
   margin: 0;
   padding: 0;
  }
  body {
   text-align:center;
   background-color:#61b3de;
   font-family:Arial, Helvetica, sans-serif;
   font-size:80%;
   color:#666;
  }
  .wrap {
   background: #f3f8fb;
   width:730px;
   height:500px;
   margin:30px auto;
   border: 4px dashed #61b3de;
   border-radius:4px;
   padding: 20px 5px;
  }
  h1 {
   font-family:Georgia, "Times New Roman", Times, serif;
   font-size:24px;
   color:#645348;
   font-style:italic;
   text-decoration:none;
   font-weight:100;
   padding: 10px;
  }
 </style>
    <script type="text/javascript"
      src="https://maps.googleapis.com/maps/api/js">
    </script>
    <script type="text/javascript">
      function initialize() {
        var mapOptions = {
          center: { lat: -6.187931, lng: 107.031279},
          zoom: 16
        };
        var map = new google.maps.Map(document.getElementById('map-canvas'),
            mapOptions);
      }
      google.maps.event.addDomListener(window, 'load', initialize);
    </script>
  </head>
  <body>
 <div class="wrap">
  <h1>Jin Toples Programming</h1>
  <h1>Membuat Static Maps dengan API Google Maps</h1>
  <div id="map-canvas"></div>
 </div>
  </body>
</html>

Perhatikan pada baris kode berikut :

<script type="text/javascript"
      src="https://maps.googleapis.com/maps/api/js">
    </script>

ini adalah script yang kita gunakan untuk memanggil API Google Maps

perhatikan baris kode berikut :

<script type="text/javascript">
      function initialize() {
        var mapOptions = {
          center: { lat: -6.187931, lng: 107.031279},
          zoom: 16
        };
        var map = new google.maps.Map(document.getElementById('map-canvas'),
            mapOptions);
      }
      google.maps.event.addDomListener(window, 'load', initialize);
    </script>

mapOptions adalah tempat kita mensetting maps yang kita gunakan seperti kordinat latitude, longitude dan zoom maps

var map adalah tempat kita menyeting lokasi dari map yaitu dengan memberikan elemen dalam html yang kita tuju dalam kasus ini kita memanggil elemen dengan id map-canvas.

Anda dapat mencobanya sekarang dengan cara membukanya di browser anda, disarankan membukanya dengan browser Chrome atau Mozilla, jangan menggunakan IE Bkakakak.... jika di IE tidak jalan saya sudah tidak heran.

Apabila masih ada yang binggung anda juga dapat membacanya dari refrensi langsung di dokumentasi API Google Maps di sini : CEK TKP

Selanjutnya kita bertemu lagi membahas Maps yang disertai dengan tombol serach untuk lokasi dari map.

Baca disini : Cara Membuat Geocoding Map Dengan API Google Maps

Static Map dengan API Google Maps anda sekarang sudah selesai, baca juga tutorial program HTML dan Javascript lainnya.
Share:
Read More

Cara Menyimpan Data Dynamic Form Field Dalam Database

, Tidak ada komentar
Cara Menyimpan Data Dynamic Form Field Dalam Database

Cara Menyimpan Data Dynamic Form Field Dalam Database - Jika sebelumnya kita sudah membuat Dynamic Form Field kali ini kita akan belajar cara menyimpan data dari dynamic form filed ke dalam Database MySql dengan menggunakan PHP. Secara teknis dalam proses insert ke dalam database tidak ada yang berbeda, akan tetapi data yang di kirimkan dari form adalah berupa array jadi pertama kita perlu memecahnya dengan menggunakan perulangan kemudian menyimpannya per-data. Untuk lebih jelasnya langsung saja kita ke prakteknya.

Apabila anda belum membuat Dynamic Form Filednya baca di sini untuk cara membuatnya : Cara Membuat Dynamic Form Field Keren Dengan Bootstrap

Untuk menulisakan script anda dapat menggunakan apa saja bebas, contoh : Notepad, Notepad++, Dreamwaver, NetBeans, Eclipse.

Pertama pindahkan terlebih dahulu folder Dynamic_field ke dalam webserver anda. karena kita menggunakan database dan PHP jadi kita memerlukan webserver.

Database

Pertama buat sebuah database dengan nama db_anime dan buatlah sebuah tabel di dalamnya dengan nama tbl_karakter dengan struktur :

Name
Type
Size
Extra
Primary
id
INT
100
auto_increment
yes
nama_char
VARCHAR
50



HTML

Ubah sedikit file index.html anda dengan menambahkan sebuah tombol submit dan memberikan tujuan action form  ke save_data.php sehingga script anda menjadi sekarang seperti di bawah :

<!doctype html>
<html lang="en">
<head>
 <title>Menyimpan Data Dynamic Field Dengan PHP | Jin Toples Programming</title>
 <link rel="stylesheet" href="css/bootstrap.min.css" />
 <style>
  *{
   margin: 0;
   padding: 0;
  }
  body {
   text-align:center;
   background-color:#61b3de;
   font-family:Arial, Helvetica, sans-serif;
   font-size:80%;
   color:#666;
  }
  .entry{
   margin-bottom:10px;
  }
  .wrap {
   background: #f3f8fb;
   width:730px;
   margin:30px auto;
   border: 4px dashed #61b3de;
   border-radius:4px;
   padding: 20px 5px;
  }
  h1 {
   font-family:Georgia, "Times New Roman", Times, serif;
   font-size:24px;
   color:#645348;
   font-style:italic;
   text-decoration:none;
   font-weight:100;
   padding: 10px;
  }
  .form-control{
   border-radius:0px;
  }
  
  .btn {
   border-radius:0px;
  }
 </style>
 <script src="js/jquery-1.8.3.js"></script>
 <script src="js/script.js"></script>
</head>
<body>
 <div class="wrap">
  <h1>Jin Toples Programming</h1>
  <h1>Menyimpan Data Dynamic Field Dengan PHP</h1>
  <form action="save_data.php" method="post">
   <div class="controls"> 
    <div class="form-group">
     <div class="entry input-group">
      <input class="form-control" name="data[]" type="text" placeholder="Entry..." required>
      <span class="input-group-btn">
       <button class="btn btn-success btn-add" type="button">
        <span class="glyphicon glyphicon-plus"></span>
       </button>
      </span>
     </div>
      </div>      
   </div>
   <button class="btn btn-success" type="submit">Submit</button>
  </form>
 </div>
</body>
</html>

PHP

Buat sebuah file PHP baru dalam folder Dynamic_field dengan nama save_data.php dengan isi script :

<?php
 //connect ke database
 mysql_connect("localhost","root","");
 mysql_select_db("db_anime");
 
 //menankap data inputan field dari form
 $data = $_POST['data'];
 
 //perulangan untuk mengekstrak array dari lemparan isi field form
 foreach($data as $row){
  //menyimpan data ke dalam tablel tbl_karakter
  mysql_query('INSERT INTO tbl_karakter (nama_char) VALUES ("'.$row.'") ');
 }  
 
 //pesan alert tersimpan dan redirect kembali
 echo "<script>
   alert('data berhasil tersimpan');
   window.location.href='index.html';
  </script>";
?>

Penjelasannya anda dapat baca sendiri di atas.

Anda sekarang dapat mencobanya anda dengan cara membukanya di browser anda, dengan mengetikan url :

http://localhost/dynamic_field

kemudian cobalah tambah beberapa field dan isi data kemudian submit, apakah data tersimpan dalam database ?

Anda dapat mengunduh file jadinya di sini : DOWNLOAD

Menyimpan Data Dynamic Form Field Dalam Database anda sekarang sudah selesai, baca juga tutorial program PHP lainnya.
Share:
Read More

Cara Membuat Dynamic Form Field Keren Dengan Bootstrap

, , Tidak ada komentar

Cara Membuat Dynamic Form Field Keren Dengan Bootstrap - kali ini kita akan membuat dynamic form field dengan boostrap. Dynamic form field adalah jumlah field yang dinamis dalam form yang dapat di tambah maupun di kurangi atau di hapus sehingga user dapat memasukan data sesuai kebutuhan dalam satu form. Dengan menggunakan bantuan javascript dan jquery kita dapat membuat dynamic form field dengan cara menduplikat field. Untuk lebih jelasnya langsung saja kita ke parkateknya.


Untuk menulisakan script anda dapat menggunakan apa saja bebas, contoh : Notepad, Notepad++, Dreamwaver, NetBeans, Eclipse.

Bootstrap

Pertama buatlah sebuah folder dengan nama Dynamic_field. Kemudian download bootstrap di situs resminya di sini : DOWNLOAD
Extrak folder CSS dan fonts ke dalam folder Dynamic_field.

jQuery

Buat sebuah folder dengan nama js dama folder Dyanamic_field. kemudian download jquery  terlebih dahulu di situs resminya di sini : DOWNLOAD
Letakan dalam folder Js

Javascript

Sekarang untuk javascriptnya buat sebuah file javascript baru dalam folder js dengan nama script.js dengan isi script :

$(function()
   {
    $(document).on('click', '.btn-add', function(e)
    {
  e.preventDefault();

  var controlForm = $('.controls:first'),
   currentEntry = $(this).parents('.entry:first'),
   newEntry = $(currentEntry.clone()).appendTo(controlForm);

  newEntry.find('input').val('');
  controlForm.find('.entry:not(:last) .btn-add')
   .removeClass('btn-add').addClass('btn-remove')
   .removeClass('btn-success').addClass('btn-danger')
   .html('<span class="glyphicon glyphicon-minus"></span>');
    }).on('click', '.btn-remove', function(e)
    {
  $(this).parents('.entry:first').remove();

  e.preventDefault();
  return false;
    });
   }
  );

Pehatikan pada baris kode ini :

.on('click', '.btn-add', function(e)

Script ini bertujuan apabila terdapat event klik pada class button add yaitu tombol plus. maka lakukan fungsinya.

newEntry = $(currentEntry.clone()).appendTo(controlForm);

Inilah script yang kita gunakan untuk mengkloning filed yang sebelumnya kemudian meletakkannya di bawah dengan fungsi appendTo ke dalam kelas controll.

Perhatikan baris kode ini :

.on('click', '.btn-remove', function(e)

Script ini bertujuan apabila terdapat event klik pada class button remove yaitu tombol plus. maka lakukan fungsinya.

$(this).parents('.entry:first').remove();

Script ini yang digunakan untuk menghapus field yang di klik.

HTML

Terakhir untuk markupnya buatlah sebuah file HTML baru dalam folder Dynamic_form dengan nama index,html dengan isi script :

<!doctype html>
<html lang="en">
<head>
 <title>Membuat Dynamic Field Keren Dengan Bootsrtap | Jin Toples Programming</title>
 <link rel="stylesheet" href="css/bootstrap.min.css" />
 <style>
  *{
   margin: 0;
   padding: 0;
  }
  body {
   text-align:center;
   background-color:#61b3de;
   font-family:Arial, Helvetica, sans-serif;
   font-size:80%;
   color:#666;
  }
  .entry{
   margin-top:10px;
  }
  .wrap {
   background: #f3f8fb;
   width:730px;
   margin:30px auto;
   border: 4px dashed #61b3de;
   border-radius:4px;
   padding: 20px 5px;
  }
  h1 {
   font-family:Georgia, "Times New Roman", Times, serif;
   font-size:24px;
   color:#645348;
   font-style:italic;
   text-decoration:none;
   font-weight:100;
   padding: 10px;
  }
  .form-control{
   border-radius:0px;
  }
  
  .btn {
   border-radius:0px;
  }
 </style>
 <script src="js/jquery-1.8.3.js"></script>
 <script src="js/script.js"></script>
</head>
<body>
 <div class="wrap">
  <h1>Jin Toples Programming</h1>
  <h1>Membuat Dynamic Field Keren Dengan Bootsrtap</h1>
  <form action="#" method="post">
   <div class="controls"> 
    <div class="form-group">
     <div class="entry input-group">
      <input class="form-control" name="data[]" type="text" placeholder="Entry..." required>
      <span class="input-group-btn">
       <button class="btn btn-success btn-add" type="button">
        <span class="glyphicon glyphicon-plus"></span>
       </button>
      </span>
     </div>
      </div>
   </div>
  </form>
 </div>
</body>
</html>

Anda dapat mencobanya sekarang dengan cara membukanya di browser anda, disarankan membukanya dengan browser Chrome atau Mozilla, jangan menggunakan IE Bkakakak.... jika di IE tidak jalan saya sudah tidak heran.

Anda dapat mengunduh file jadinya di sini : DOWNLOAD

Kali ini kita hanya akan membuat formnya saja untuk artikel selanjutnya kami akan membahas bagaimana cara menyimpan dynamic form field ini ke dalam database.
Dynamic Form Field Keren Dengan Bootstrap anda sekarang sudah selesai, baca juga tutorial program HTML dan jQuery lainnya.
Share:
Read More

Cara Membuat Form Validation Dengan HTML5 dan Javascript

, , , 3 komentar
 
Cara Membuat Form Validation Dengan HTML5 dan Javascript - Form validation sangat penting untuk menjaga keakuratan data yang masuk sehingga tidak ada spam yang tersimpan di dalam database, untuk melakukan validasi dari sisi user biasanya kita akan menggunakan Javascript sehingga validasi dapat dilakukan tanpa harus submit form.



Kali ini kita akan membuat form validation dengan menggabungkan HTML5 dan Javascript. Dengan menggunakan fitur yang disediakan oleh HTML5 kita dapat memvalidasi inputan dari user seperti required field, tipe email, number, URL, max - min character, Dll. tapi kita tidak akan hanya menggunakannya saja tapi memodifikasi tool tip yang muncul dengan menggunakan CSS3 sehingga tooltipnya lebih keren. Lebih jelasnya langsung saja kita ke prakteknya membuat form validation dengan HTML5 dan Javascipt.


Untuk menulisakan script anda dapat menggunakan apa saja bebas, contoh : Notepad, Notepad++, Dreamwaver, NetBeans, Eclipse.

CSS

Pertama buatlah sebuah folder terlebih dahulu dengan nama Form_validation kemudian buatlah sebuah file CSS baru di dalamnya sebgai style form dan tooltipnya dengan nama style.css dengan isi script.

html, body{ height:100%; }
/* body min-width is 992px because it's 960px grid + extra 16px from each side of the header */
body{ min-width:960px; color:#444; background-color:#F1F1F1; font-size:12px; line-height:1.5em; font-family:Arial, Helvetica, sans-serif; }

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    vertical-align:baseline;
}

small{ font-size:0.9em; }

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display:block;
}

h1{ font-size:2em; margin:0 0 50px 0; }
button{ cursor:pointer; }
p{ padding:5px 0; }

a{ text-decoration:none; }
.btn{ margin:5px; font-size:1.3em; font-weight:bold; border:2px solid rgba(0,0,0,0.2); display:inline-block; box-shadow:0 -30px 30px -15px #00329B inset, 0 1px 0 rgba(255,255,255,0.3) inset; background:#0088CC; background-repeat:repeat-x; color:#FFF; text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25); border-radius:7px; padding:10px 20px; -webkit-transition:0.15s; transition:0.15s; }
.btn:hover{ background:#0068BA; }
.btn:active{ box-shadow:0 0 0 0 rgba(0, 0, 0, 0.3), 0 -30px 30px -15px #00329B inset, 0 0 6px #00243F inset; }
.btn.github{ float:right; }

#wrap{ padding:50px; width:860px; background-color:#FFF; margin:20px auto; border:1px dashed #AAA; position:relative; }
.options{ position:absolute; top:-1px; right:-1px; background-color:#F1F1F1; padding:4px 0; border-left:1px dashed #AAA; border-bottom:1px dashed #AAA; }
 .options label{ cursor:pointer; margin:0 10px; }

input, textarea{ border:1px solid #D1D1D1; }
input, select{ font-size:inherit; margin:0; }
input:focus, textarea:focus{ border-color:#AAA; }

input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance:none; margin:0; }
input[type=checkbox]{ border:none; bottom:-1px; cursor:pointer; margin:0 5px 0 0; position:relative; }
button[type=submit]{ font-size:1.1em; padding:5px 25px; }

/* Tooltips helpers */
.item .tooltip{ float:left; top:2px; left:7px; position:relative; z-index:2; }
.item .tooltip:hover{ z-index:3; }
   .item .tooltip > span{ display:inline-block; width:16px; height:16px; line-height:16px; font-size:0.9em; font-weight:bold; text-align:center; color:#FFF; cursor:help; background-color:#00AEEF; position:relative; border-radius:10px; }
    .item .tooltip .content{ opacity:0; width:200px; background-color:#333; color:#FFF; font-size:0.9em; position:absolute; top:0; left:20px; padding:8px; border-radius:6px; pointer-events:none; transition:0.2s cubic-bezier(0.1, 0.1, 0.25, 2); -webkit-transition:0.3s cubic-bezier(0.1, 0.2, 0.5, 2.2); -moz-transition:0.3s cubic-bezier(0.1, 0.2, 0.5, 2.2); }
        .item .tooltip p{ padding:0; }
   .item .tooltip.down .content{ left:auto; right:0; top:30px; }
   .item .tooltip:hover .content{ opacity:1; left:36px; }
      .item .tooltip .content b{ height:0; width:0; border-color:#333 #333 transparent transparent; border-style:solid; border-width:9px 7px; position:absolute; left:-14px; top:8px; }
        .item .tooltip.down .content b{ left:auto; right:6px; top:-10px; border-width:5px; border-color:transparent #333 #333 transparent; }

/* alerts (when validation fails) */
.item .alert{ float:left; margin:0 0 0 20px; padding:3px 10px; position:relative; color:#FFF; border-radius:3px 4px 4px 3px; background-color:#CE5454; max-width:170px; white-space:pre; z-index:1; }
.item .alert::after{ content:''; display:block; height:0; width:0; border-color:transparent #CE5454 transparent transparent; border-style:solid; border-width:11px 7px; position:absolute; left:-13px; top:1px; }

@keyframes shake{
    25%{ transform:translateX(-6px); }
    75%{ transform:translateX(6px); }
}
@-webkit-keyframes shake{
    25%{ -webkit-transform:translateX(-6px); }
    75%{ -webkit-transform:translateX(6px); }
}

form fieldset{ clear:both; margin:0 0 10px 0; }
form .item{ padding:5px 0; position:relative; height:2em; }
form .item.items{ height:auto; }
 .item label{ float:left; }
  .item label span{ float:left; width:160px; text-transform:capitalize; line-height:2em; }
 .item input, .item textarea{ float:left; padding:3px 4px; width:210px; -webkit-transition:0.2s; -moz-transition:0.2s; transition:0.2s; }
 .item input{  }
 .item input.short{ width:90px; }
 .item input:focus:not([type="checkbox"]), .item textarea:focus{ box-shadow:0 0 4px #00AEEF; border:1px solid #00AEEF; }
 .item textarea{  }
 .item select{ float:left; width:220px; padding:2px 0; margin:0; border:1px solid #CCC; text-transform:capitalize; }
  .item select option{ padding:1px; }

    .item > .extra{ float:left; font-size:0.9em; color:#999; line-height:2em; margin-left:13px; }
    
 .item.multi .input{ float:left; }
  .item.multi input{ float:left; margin-right:5px; width:35px; text-align:center; }
  form .item.multi input:nth-last-child(-n+2){ margin:0; }
 .item.items input{ border-top:5px solid #E1E1E1; margin:0 0 0 160px; }
 
 .bad input[required=required], .bad input.optional, .bad select, .bad textarea{ border:1px solid #CE5454; box-shadow:0 0 4px -2px #CE5454; position:relative; left:0; -moz-animation:.3s 2 shake linear; -webkit-animation:0.3s 2 shake linear; }
    
/* mode2 - where the label's text is above the field and not next to it
--------------------------------------------------------------------------- */
.mode2 .item{ float:left; clear:left; margin-bottom:30px; height:auto; padding:0; zoom:1; }
.mode2 .item.bad{ margin-bottom:8px; }
.mode2 .item::before, .mode2 .item::after{ content:''; display:table; }
.mode2 .item::after{ clear:both; }
 .mode2 .item label{  }
  .mode2 .item label span{ float:none; display:block; line-height:inherit; }
 .mode2 .item input, .item textarea{ width:250px; margin:0; }
 .mode2 .item textarea{ width:350px; margin:0; }
 .mode2 .item select{ width:260px; float:none; }
 .mode2 .item.multi label{ float:none; }
 .mode2 .item.multi input{ float:left; margin-right:5px; width:35px; text-align:center; }
 .mode2 .item .tooltip{ left:auto; position:absolute; right:-22px; top:19px; }
 .mode2 .item .alert::after{ display:none; }
 .mode2 .item .alert{ float:none; clear:left; margin:0; padding:0 5px; border-radius:0 0 3px 3px; max-width:100%; height:22px; line-height:1.8em; }
    .mode2 .item > .extra{ position:absolute; right:0; }

Perhatikan pada baris kode :

/* Tooltips helpers */
.item .tooltip{ float:left; top:2px; left:7px; position:relative; z-index:2; }
.item .tooltip:hover{ z-index:3; }
   .item .tooltip > span{ display:inline-block; width:16px; height:16px; line-height:16px; font-size:0.9em; font-weight:bold; text-align:center; color:#FFF; cursor:help; background-color:#00AEEF; position:relative; border-radius:10px; }
    .item .tooltip .content{ opacity:0; width:200px; background-color:#333; color:#FFF; font-size:0.9em; position:absolute; top:0; left:20px; padding:8px; border-radius:6px; pointer-events:none; transition:0.2s cubic-bezier(0.1, 0.1, 0.25, 2); -webkit-transition:0.3s cubic-bezier(0.1, 0.2, 0.5, 2.2); -moz-transition:0.3s cubic-bezier(0.1, 0.2, 0.5, 2.2); }
        .item .tooltip p{ padding:0; }
   .item .tooltip.down .content{ left:auto; right:0; top:30px; }
   .item .tooltip:hover .content{ opacity:1; left:36px; }
      .item .tooltip .content b{ height:0; width:0; border-color:#333 #333 transparent transparent; border-style:solid; border-width:9px 7px; position:absolute; left:-14px; top:8px; }
        .item .tooltip.down .content b{ left:auto; right:6px; top:-10px; border-width:5px; border-color:transparent #333 #333 transparent; }

/* alerts (when validation fails) */
.item .alert{ float:left; margin:0 0 0 20px; padding:3px 10px; position:relative; color:#FFF; border-radius:3px 4px 4px 3px; background-color:#CE5454; max-width:170px; white-space:pre; z-index:1; }
.item .alert::after{ content:''; display:block; height:0; width:0; border-color:transparent #CE5454 transparent transparent; border-style:solid; border-width:11px 7px; position:absolute; left:-13px; top:1px; }

Ini adalah style dari tooltip yang muncul.

Perhatikan pada baris kode berikut :

.mode2 .item{ float:left; clear:left; margin-bottom:30px; height:auto; padding:0; zoom:1; }
.mode2 .item.bad{ margin-bottom:8px; }
.mode2 .item::before, .mode2 .item::after{ content:''; display:table; }
.mode2 .item::after{ clear:both; }
 .mode2 .item label{  }
  .mode2 .item label span{ float:none; display:block; line-height:inherit; }
 .mode2 .item input, .item textarea{ width:250px; margin:0; }
 .mode2 .item textarea{ width:350px; margin:0; }
 .mode2 .item select{ width:260px; float:none; }
 .mode2 .item.multi label{ float:none; }
 .mode2 .item.multi input{ float:left; margin-right:5px; width:35px; text-align:center; }
 .mode2 .item .tooltip{ left:auto; position:absolute; right:-22px; top:19px; }
 .mode2 .item .alert::after{ display:none; }
 .mode2 .item .alert{ float:none; clear:left; margin:0; padding:0 5px; border-radius:0 0 3px 3px; max-width:100%; height:22px; line-height:1.8em; }
    .mode2 .item > .extra{ position:absolute; right:0; }

Ini untuk style dari mode form vertikal, jadi anda dapat memilih tampilan form anda vertikal atau default.

Javascript

Pertama download dulu jQuery di situs resminya di sini : DOWNLOAD
Letakan dalam folder yang sama. lalu buatlah sebuah file javascript baru dengan nama validator.js letakan dalam folder yang sama dengan isi script :

/*
 Validator v1.1.0
 (c) Yair Even Or
 https://github.com/yairEO/validator

 MIT-style license.
*/

var validator = (function($){
 var message, tests, checkField, validate, mark, unmark, field, minmax, defaults,
  validateWords, lengthRange, lengthLimit, pattern, alertTxt, data,
  email_illegalChars = /[\(\)\<\>\,\;\:\\\/\"\[\]]/,
  email_filter = /^.+@.+\..{2,3}$/;

 /* general text messages
 */
 message = {
  invalid   : 'invalid input',
  empty   : 'please put something here',
  min    : 'input is too short',
  max    : 'input is too long',
  number_min  : 'too low',
  number_max  : 'too high',
  url    : 'invalid URL',
  number   : 'not a number',
  email   : 'email address is invalid',
  email_repeat : 'emails do not match',
  password_repeat : 'passwords do not match',
  repeat   : 'no match',
  complete  : 'input is not complete',
  select   : 'Please select an option'
 };
 
 if(!window.console){
  console={};
  console.log=console.warn=function(){ return; }
 }

 // defaults
 defaults = { alerts:true };

 /* Tests for each type of field (including Select element)
 */
 tests = {
  sameAsPlaceholder : function(a){
   return $.fn.placeholder && a.attr('placeholder') !== undefined && data.val == a.prop('placeholder');
  },
  hasValue : function(a){
   if( !a ){
    alertTxt = message.empty;
    return false;
   }
   return true;
  },
  // 'linked' is a special test case for inputs which their values should be equal to each other (ex. confirm email or retype password)
  linked : function(a,b){
   if( b != a ){
    // choose a specific message or a general one
    alertTxt = message[data.type + '_repeat'] || message.no_match;
    return false;
   }
   return true;
  },
  email : function(a){
   if ( !email_filter.test( a ) || a.match( email_illegalChars ) ){
    alertTxt = a ? message.email : message.empty;
    return false;
   }
   return true;
  },
  text : function(a){
   // make sure there are at least X number of words, each at least 2 chars long.
   // for example 'john F kenedy' should be at least 2 words and will pass validation
   if( validateWords ){
    var words = a.split(' ');
    // iterrate on all the words
    var wordsLength = function(len){
     for( var w = words.length; w--; )
      if( words[w].length < len )
       return false;
     return true;
    };

    if( words.length < validateWords || !wordsLength(2) ){
     alertTxt = message.complete;
     return false;
    }
    return true;
   }
   if( lengthRange && a.length < lengthRange[0] ){
    alertTxt = message.min;
    return false;
   }

   // check if there is max length & field length is greater than the allowed
   if( lengthRange && lengthRange[1] && a.length > lengthRange[1] ){
    alertTxt = message.max;
    return false;
   }
   // check if the field's value should obey any length limits, and if so, make sure the length of the value is as specified
   if( lengthLimit && lengthLimit.length ){
    var obeyLimit = false;
    while( lengthLimit.length ){
     if( lengthLimit.pop() == a.length )
      obeyLimit = true;
    }
    if( !obeyLimit ){
     alertTxt = message.complete;
     return false;
    }
   }

   if( pattern ){
    var regex, jsRegex;
    switch( pattern ){
     case 'alphanumeric' :
      regex = /^[a-z0-9]+$/i;
      break;
     case 'numeric' :
      regex = /^[0-9]+$/i;
      break;
     case 'phone' :
      regex = /^\+?([0-9]|[-|' '])+$/i;
      break;
     default :
      regex = pattern;
    }
    try{
     jsRegex = new RegExp(regex).test(a);
     if( a && !jsRegex )
      return false;
    }
    catch(err){
     console.log(err, field, 'regex is invalid');
     return false;
    }
   }
   return true;
  },
  number : function(a){
   // if not not a number
   if( isNaN(parseFloat(a)) && !isFinite(a) ){
    alertTxt = message.number;
    return false;
   }
   // not enough numbers
   else if( lengthRange && a.length < lengthRange[0] ){
    alertTxt = message.min;
    return false;
   }
   // check if there is max length & field length is greater than the allowed
   else if( lengthRange && lengthRange[1] && a.length > lengthRange[1] ){
    alertTxt = message.max;
    return false;
   }
   else if( minmax[0] && (a|0) < minmax[0] ){
    alertTxt = message.number_min;
    return false;
   }
   else if( minmax[1] && (a|0) > minmax[1] ){
    alertTxt = message.number_max;
    return false;
   }
   return true;
  },
  // Date is validated in European format (day,month,year)
  date : function(a){
   var day, A = a.split(/[-./]/g), i;
   // if there is native HTML5 support:
   if( field[0].valueAsNumber )
    return true;

   for( i = A.length; i--; ){
    if( isNaN(parseFloat(a)) && !isFinite(a) )
     return false;
   }
   try{
    day = new Date(A[2], A[1]-1, A[0]);
    if( day.getMonth()+1 == A[1] && day.getDate() == A[0] )
     return day;
    return false;
   }
   catch(er){
    console.log('date test: ', err);
    return false;
   }
  },
  url : function(a){
   // minimalistic URL validation
   function testUrl(url){
    return /^(https?:\/\/)?([\w\d\-_]+\.+[A-Za-z]{2,})+\/?/.test( url );
   }
   if( !testUrl( a ) ){
    console.log(a);
    alertTxt = a ? message.url : message.empty;
    return false;
   }
   return true;
  },
  hidden : function(a){
   if( lengthRange && a.length < lengthRange[0] ){
    alertTxt = message.min;
    return false;
   }
   if( pattern ){
    var regex;
    if( pattern == 'alphanumeric' ){
     regex = /^[a-z0-9]+$/i;
     if( !regex.test(a) ){
      return false;
     }
    }
   }
   return true;
  },
  select : function(a){
   if( !tests.hasValue(a) ){
    alertTxt = message.select;
    return false;
   }
   return true;
  }
 };

 /* marks invalid fields
 */
    mark = function( field, text ){
  if( !text || !field || !field.length )
   return false;

  // check if not already marked as a 'bad' record and add the 'alert' object.
  // if already is marked as 'bad', then make sure the text is set again because i might change depending on validation
  var item = field.parents('.item'),
   warning;
   
  if( item.hasClass('bad') ){
   if( defaults.alerts )
    item.find('.alert').html(text);
  }


        else if( defaults.alerts ){
            warning = $('<div class="alert">').html( text );
            item.append( warning );
        }
  
        item.removeClass('bad');
  // a delay so the "alert" could be transitioned via CSS
        setTimeout(function(){
            item.addClass('bad');
        }, 0);
 };
 /* un-marks invalid fields
 */
 unmark = function( field ){
  if( !field || !field.length ){
   console.warn('no "field" argument, null or DOM object not found');
   return false;
  }

  field.parents('.item')
    .removeClass('bad')
    .find('.alert').remove();
 };

 function testByType(type, value){
  if( type == 'tel' )
   pattern = pattern || 'phone';

  if( !type || type == 'password' || type == 'tel' )
   type = 'text';

  return tests[type](value);
 }

 function prepareFieldData(el){
  field = $(el);

  field.data( 'valid', true );    // initialize validness of field by first checking if it's even filled out of now
  field.data( 'type', field.attr('type') ); // every field starts as 'valid=true' until proven otherwise
  pattern = el.pattern;
 }

 /* Validations per-character keypress
 */
 function keypress(e){
  prepareFieldData(this);

  if( e.charCode )
   return testByType( data.type, String.fromCharCode(e.charCode) );
 }

 /* Checks a single form field by it's type and specific (custom) attributes
 */
 function checkField(){
  // skip testing fields whom their type is not HIDDEN but they are HIDDEN via CSS.
  if( this.type !='hidden' && $(this).is(':hidden') )
   return true;

  prepareFieldData(this);

  field.data( 'val', field[0].value.replace(/^\s+|\s+$/g, "") ); // cache the value of the field and trim it
  data = field.data();

  // Check if there is a specific error message for that field, if not, use the default 'invalid' message
  alertTxt = message[field.prop('name')] || message.invalid;

  // SELECT / TEXTAREA nodes needs special treatment
  if( field[0].nodeName.toLowerCase() === "select" ){
   data.type = 'select';
  }
  if( field[0].nodeName.toLowerCase() === "textarea" ){
   data.type = 'text';
  }
  /* Gather Custom data attributes for specific validation:
  */
  validateWords = data['validateWords'] || 0;
  lengthRange  = data['validateLengthRange'] ? (data['validateLengthRange']+'').split(',') : [1];
  lengthLimit  = data['validateLength'] ? (data['validateLength']+'').split(',') : false;
  minmax   = data['validateMinmax'] ? (data['validateMinmax']+'').split(',') : ''; // for type 'number', defines the minimum and/or maximum for the value as a number.

  data.valid = tests.hasValue(data.val);
  // check if field has any value
  if( data.valid ){
   /* Validate the field's value is different than the placeholder attribute (and attribute exists)
   * this is needed when fixing the placeholders for older browsers which does not support them.
   * in this case, make sure the "placeholder" jQuery plugin was even used before proceeding
   */
   if( tests.sameAsPlaceholder(field) ){
    alertTxt = message.empty;
    data.valid = false;
   }

   // if this field is linked to another field (their values should be the same)
   if( data.validateLinked ){
    var linkedTo = data['validateLinked'].indexOf('#') == 0 ? $(data['validateLinked']) : $(':input[name=' + data['validateLinked'] + ']');
    data.valid = tests.linked( data.val, linkedTo.val() );
   }
   /* validate by type of field. use 'attr()' is proffered to get the actual value and not what the browsers sees for unsupported types.
   */
   else if( data.valid || data.type == 'select' )
    data.valid = testByType(data.type, data.val);

   // optional fields are only validated if they are not empty
   if( field.hasClass('optional') && !data.val )
    data.valid = true;
  }

  // mark / unmark the field, and set the general 'submit' flag accordingly
  if( data.valid )
   unmark( field );
  else{
   mark( field, alertTxt );
   submit = false;
  }

  return data.valid;
 }

 /* vaildates all the REQUIRED fields prior to submiting the form
 */
 function checkAll( $form ){
  $form = $($form);

  if( $form.length == 0 ){
   console.warn('element not found');
   return false;
  }

  var that = this,
   submit = true, // save the scope
   fieldsToCheck = $form.find(':input').filter('[required=required], .required, .optional').not('[disabled=disabled]');

  fieldsToCheck.each(function(){
   // use an AND operation, so if any of the fields returns 'false' then the submitted result will be also FALSE
   submit = submit * checkField.apply(this);
  });

  return !!submit;  // casting the variable to make sure it's a boolean
 }

 return {
  defaults  : defaults,
  checkField  : checkField,
  keypress  : keypress,
  checkAll  : checkAll,
  mark   : mark,
  unmark  : unmark,
  message  : message,
  tests   : tests
 }
})(jQuery);

Perhatikan baris kode berikut :

message = {
  invalid   : 'invalid input',
  empty   : 'please put something here',
  min    : 'input is too short',
  max    : 'input is too long',
  number_min  : 'too low',
  number_max  : 'too high',
  url    : 'invalid URL',
  number   : 'not a number',
  email   : 'email address is invalid',
  email_repeat : 'emails do not match',
  password_repeat : 'passwords do not match',
  repeat   : 'no match',
  complete  : 'input is not complete',
  select   : 'Please select an option'
 };

Disinilah anda mensetting pesan yang muncul dalam tooltip anda.

HTML

Terakhir untuk formnya buatlah sebuah file HTML baru dalam folder yang sama dengan nama index.html dengan isi script :

<!DOCTYPE HTML>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Form Validation Dengan HTML5 | Jin Toples Programming</title>
 <link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body> 
 <div id='wrap'>
  <div class='options'>
   <label>
    <input type='checkbox' id='vfields' />
    Vertical orientation
   </label>
   <label>
    <input type='checkbox' id='alerts' />
    Disable alerts
   </label>
  </div>
  <h1 title='how forms should be done.'>Form Validation Dengan HTML5 | Jin Toples Programming</h1>
  <section class='form'>
   <form action="" method="post" novalidate>
    <fieldset>
     <div class="item">
      <label>
       <span>Nama</span>
       <input data-validate-length-range="2" data-validate-words="1" name="name" placeholder="ex. Jin D. Toples" required="required" type="text" />  
      </label>
      <div class='tooltip help'>
       <span>?</span>
       <div class='content'>
        <b></b>
        <p>Paling sedikit 3 huruf</p>
       </div>
      </div>
     </div>
     <div class="item">
      <label>
       <span>email</span>
       <input name="email" class='email' required="required" type="email" placeholder="jin@toples.com"/>
      </label>
     </div>
     <div class="item">
      <label>
       <span>Konfirmasi alamat email</span>
       <input type="email" class='email' name="confirm_email" data-validate-linked='email' required='required'>
      </label>
     </div>
     <div class="item">
      <label>
       <span>Angka</span>
       <input type="number" class='number' name="number" data-validate-minmax="1,100" data-validate-pattern="numeric" required='required'>
      </label>
      <div class='tooltip help'>
       <span>?</span>
       <div class='content'>
        <b></b>
        <p>Masukan angka antara 1 s/d 100</p>
       </div>
      </div>
     </div>
     <div class="item">
      <label>
       <span>Tanggal</span>
       <input class='date' type="date" name="date" required='required'>
      </label>
     </div>
     <div class="item">
      <label>
       <span>Password</span>
       <input type="password" name="password" data-validate-length-range="6" required='required'>
      </label>
      <div class='tooltip help'>
       <span>?</span>
       <div class='content'>
        <b></b>
        <p>Minimal 6 karakter</p>
       </div>
      </div>
     </div>
     <div class="item">
      <label>
       <span>Konfirmasi password</span>
       <input type="password" name="password2" data-validate-linked='password' required='required'>
      </label>
     </div>
     <div class="item">
      <label>
       <span>Telephone</span>
       <input type="tel" class='tel' name="phone" required='required' data-validate-length-range="8,20">
      </label>
      <div class='tooltip help'>
       <span>?</span>
       <div class='content'>
        <b></b>
        <p>Bisa menggunakan karakter '+' sign, dan '-' atau spasi ' '</p>
       </div>
      </div>
     </div>
     <div class="item">
      <label>
       <span>Drop down selection</span>
       <select class="required" name="dropdown">
        <option value="">-- none --</option>
        <option value="o1">Option 1</option>
        <option value="o2">Option 2</option>
        <option value="o3">Option 3</option>
       </select>
      </label>
      <div class='tooltip help'>
       <span>?</span>
       <div class='content'>
        <b></b>
        <p>Wajib memilih salah satu.</p>
       </div>
      </div>
     </div>
     <div class="item">
      <label>
       <span>url</span>
       <input name="url" placeholder="http://www.jintoples.blogspot.com" required="required" type="url" />
      </label>
     </div>
     <div class="item">
      <label>
       <span>message</span>
       <textarea required="required" name='message'></textarea>
      </label>
     </div>
    </fieldset>
    <button id='send' type='submit'>Submit</button>
   </form> 
  </section>
 </div>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="validator.js"></script>
 <script>
  // initialize the validator function
  validator.message['date'] = 'not a real date';
  
  // validate a field on "blur" event, a 'select' on 'change' event & a '.reuired' classed multifield on 'keyup':
  $('form')
   .on('blur', 'input[required], input.optional, select.required', validator.checkField)
   .on('change', 'select.required', validator.checkField);
   
  $('.multi.required')
   .on('keyup', 'input', function(){ 
    validator.checkField.apply( $(this).siblings().last()[0] );
   }).on('blur', 'input', function(){ 
    validator.checkField.apply( $(this).siblings().last()[0] );
   });
  
  // bind the validation to the form submit event
  //$('#send').click('submit');//.prop('disabled', true);
  
  $('form').submit(function(e){
   e.preventDefault();
   var submit = true;
   // evaluate the form using generic validaing
   if( !validator.checkAll( $(this) ) ){
    submit = false;
   }

   if( submit )
    this.submit();
   return false;
  });
  
  /* FOR DEMO ONLY */
  $('#vfields').change(function(){
   $('form').toggleClass('mode2');
  }).prop('checked',false);
  
  $('#alerts').change(function(){
   validator.defaults.alerts = (this.checked) ? false : true;
   if( this.checked )
    $('form .alert').remove();
  }).prop('checked',false);
 </script>
</body>
</html>

Anda dapat mencobanya sekarang dengan cara membukanya di browser anda, disarankan membukanya dengan browser Chrome atau Mozilla, jangan menggunakan IE Bkakakak.... jika di IE tidak jalan saya sudah tidak heran.

Anda dapat mengunduh file jadinya di sini : DOWNLOAD

Author : Tanasa vladut
From : http://cssdeck.com/labs/forms-validation-styling-semantics
Modified By : Jin Toples

Form Validation Dengan HTML5 dan Javascript anda sekarang sudah selesai, baca juga tutorial program HTML dan Javascript lainnya.
Share:
Read More

Cari Blog Ini
Diberdayakan oleh Blogger.

Statemen Kendali / Kondisional If di C#

Statemen Kendali / Kondisional If di C#  -  C# mempunyai statemen kendali yang hampir sama dengan bahasa - bahasa pemrograman lainnya. Ter...

Label

Recent Posts

Unordered List

  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  • Aliquam tincidunt mauris eu risus.
  • Vestibulum auctor dapibus neque.

Label Cloud

AJAX (3) Blogging (4) C (13) C# (15) Codeigniter (5) CSS (18) Game Maker (12) Google Maps (21) HTML (46) Instaling (2) Java (12) Java Script (40) JQUERY (16) PHP (12)

Sample Text

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation test link ullamco laboris nisi ut aliquip ex ea commodo consequat.

Pages

Theme Support

Need our help to upload or customize this blogger template? Contact me with details about the theme customization you need.