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

13 Januari 2020

Membuat Pencarian Date Range di Datatables

Membuat Pencarian Date Range di Datatables

DataTables merupakan sebuah plugin JavaScript JQuery untuk menampilkan data dalam bentuk tabel HTML dengan fitur yang canggih seperti pencarian data, searching data, pagination, menampilkan data dalam jumlah tertentu pada setiap halamannya, export data tabel kedalam format excel, pdf, cetak data dan fitur canggih lainnya. Plugin DataTables ini sangat membantu sekali untuk memanipulasi data dalam bentuk tabel yang lebih fleksibel, akan tetapi DataTables sendiri belum menyediakan pencarian berdasarkan rentang tanggal dengan plugin Date Range Picker. 

10 Desember 2019

Menampilkan Data XML dengan Javascript

Menampilkan Data XML dengan Javascript

Selamat datang di blog Mari belajar coding. Jika tutorial sebelumnya kita pernah belajar membuat file xml dan menampilkan datanya dengan PHP. Tutorial kali ini kita akan belajar bagaimana cara menampilkan data xml menggunakan javascript. Seperti halnya tutorial untuk menampilkan data json, cara menampilkan data xml dengan javascript bisa menggunakan beberapa cara. Dalam tutorial ini kita akan menggunakan dua cara, yaitu menggunakan javascript XMLHttpRequest dan jquery

Menampilkan Data XML dengan Javascript

Pertama-tama kita siapkan data xml terlebih dahulu. Dalam tutorial ini kita gunakan data mahasiswa.xml sebagai contoh data yang akan kita tampilkan.

<?xml version="1.0" encoding="UTF-8"?>
<Akademik>
     <mahasiswa nim="1234">
         <nama>Dian Syahputra</nama>
         <alamat>Semarang</alamat>
         <jurusan>Teknik Informatika</jurusan>
     </mahasiswa>
     <mahasiswa nim="1236">
         <nama>Jojo</nama>
         <alamat>Surabaya</alamat>
         <jurusan>Sastra Inggris</jurusan>
     </mahasiswa>
</Akademik>

File mahasiswa.xml jika kita jalankan melalui browser.
Menampilkan Data XML dengan Javascript

Untuk cara pertama kita menggunakan XMLHttpRequest, buat file latihan1.html seperti dibawah ini.

<!DOCTYPE html>
<html>
<head>
 <title>Mari Belajar Coding</title>
 <script type="text/javascript">
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
      if (this.readyState == 4 && this.status == 200) {         
         
         xmlDoc = xhttp.responseXML;
         var mahasiswa= xmlDoc.getElementsByTagName("mahasiswa");
          var data="";
          
         for(i=0;i<mahasiswa.length;i++){
            var mhsw = mahasiswa[i];
            if (mhsw.nodeType == Node.ELEMENT_NODE) {
              var nim=mhsw.getAttribute("nim");
              var nama=mhsw.getElementsByTagName("nama")[0].childNodes[0].data;
              var alamat=mhsw.getElementsByTagName("alamat")[0].childNodes[0].data;
              var jurusan=mhsw.getElementsByTagName("jurusan")[0].childNodes[0].data;
              
              data +="<tr><td>"+nim+"</td><td>"+nama+"</td><td>"+alamat+"</td><td>"+jurusan+"</td></tr>";
            }            
         }
         //tampilkan di tabel id TabelDataMahasiswa;
         document.getElementById("TabelDataMahasiswa").innerHTML=data;
      }
  };
  xhttp.open("GET", "mahasiswa.xml", true);

  xhttp.send();

 </script>
</head>
<body>
  <table border="1">
    <thead>
      <tr>
        <th>Nim</th>
        <th>Nama</th>
        <th>Alamat</th>
        <th>Jurusan</th>
      </tr>
    </thead>
    <tbody id="TabelDataMahasiswa"></tbody>
  </table>
</body>
</html>

Tampilan file latihan1.html jika di jalankan di browser.
Menampilkan Data XML dengan Javascript

Cara yang kedua kita akan menggunakan jquery untuk menampilkan data xml. Tambahkan jquery.js didalam tag head untuk menggunakan fungsinya. Salin kode dibawah ini kemudian simpan file  dengan nama latihan2.html

<!DOCTYPE html>
<html>
<head>
    <title>Mari Belajar Coding</title>
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $.get('mahasiswa.xml', function(data) {
                var datatabel = "";
                $(data).find('mahasiswa').each(function() {
                    var $mahasiswa = $(this);
                    var nim = $mahasiswa.attr("nim");
                    var nama = $mahasiswa.find('nama').text();
                    var alamat = $mahasiswa.find('alamat').text();
                    var jurusan = $mahasiswa.find('jurusan').text();
                    datatabel += "<tr><td>" + nim + "</td><td>" + nama + "</td><td>" + alamat + "</td><td>" + jurusan + "</td></tr>";
                });
                document.getElementById("TabelDataMahasiswa").innerHTML = datatabel;
            });
        });
    </script>
</head>
<body>
    <table border="1">
        <thead>
            <tr>
                <th>Nim</th>
                <th>Nama</th>
                <th>Alamat</th>
                <th>Jurusan</th>
            </tr>
        </thead>
        <tbody id="TabelDataMahasiswa"></tbody>
    </table>
</body>
</html>

Kita juga bisa menampilkan data xml menggunakan ajax jquery seperti dibawah ini. Simpan dengan nama latihan3.html.

<!DOCTYPE html>
<html>
<head>
    <title>Mari Belajar Coding</title>
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            var datatabel = "";
            $.ajax({
              method: "GET",
              url: "mahasiswa.xml",
              dataType: "xml",
              }).done(function( msg ) {
                 $(msg).find("mahasiswa").each(function () {
                    var $mahasiswa = $(this);
                    var nim = $mahasiswa.attr("nim");
                    var nama = $mahasiswa.find('nama').text();
                    var alamat = $mahasiswa.find('alamat').text();
                    var jurusan = $mahasiswa.find('jurusan').text();
                    datatabel += "<tr><td>" + nim + "</td><td>" + nama + "</td><td>" + alamat + "</td><td>" + jurusan + "</td></tr>";
                });
                 document.getElementById("TabelDataMahasiswa").innerHTML = datatabel;
              });
            
        });
    </script>
</head>
<body>
    <table border="1">
        <thead>
            <tr>
                <th>Nim</th>
                <th>Nama</th>
                <th>Alamat</th>
                <th>Jurusan</th>
            </tr>
        </thead>
        <tbody id="TabelDataMahasiswa"></tbody>
    </table>
</body>
</html>


Related Search:
Menampilkan data XML dengan Javascript
Menampilkan data XML dengan Jquery
Menampilkan data XML dengan Ajax
Parsing data XML dengan Javascript

14 September 2019

Membuat Autocomplete dengan JQuery MySQL dan PHP

Membuat Autocomplete dengan JQuery MySQL dan PHP

Selamat datang di blog Mari belajar coding. Pada tutorial kali ini kita akan belajar membuat sebuah form autocomplete dengan JQuery PHP dan MySQL. Autocomplete JQuery merupakan fitur  untuk memberikan suggestion atau saran data yang akan di inputkan, dengan fitur ini pengguna akan di permudah dalam menginputkan data dalam form.

Membuat Autocomplete dengan JQuery MySQL dan PHP

Pertama-tama kita buat sebuah database nya terlebih dahulu. Kita ambil contoh database untuk menyimpan data semua nama-nama Negara.
CREATE DATABASE `db_country`;
USE `db_country`;

CREATE TABLE `country` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`country_code` varchar(2) NOT NULL DEFAULT '',
`country_name` varchar(100) NOT NULL DEFAULT '',
PRIMARY KEY (`id`)
);

-- ----------------------------
-- Records of country
-- ----------------------------
INSERT INTO `country` VALUES ('1', 'AF', 'Afghanistan');
INSERT INTO `country` VALUES ('2', 'AL', 'Albania');
INSERT INTO `country` VALUES ('3', 'DZ', 'Algeria');
INSERT INTO `country` VALUES ('4', 'DS', 'American Samoa');
INSERT INTO `country` VALUES ('5', 'AD', 'Andorra');
INSERT INTO `country` VALUES ('6', 'AO', 'Angola');
INSERT INTO `country` VALUES ('7', 'AI', 'Anguilla');
INSERT INTO `country` VALUES ('8', 'AQ', 'Antarctica');
INSERT INTO `country` VALUES ('9', 'AG', 'Antigua and Barbuda');
INSERT INTO `country` VALUES ('10', 'AR', 'Argentina');
INSERT INTO `country` VALUES ('11', 'AM', 'Armenia');
INSERT INTO `country` VALUES ('12', 'AW', 'Aruba');
INSERT INTO `country` VALUES ('13', 'AU', 'Australia');
INSERT INTO `country` VALUES ('14', 'AT', 'Austria');
INSERT INTO `country` VALUES ('15', 'AZ', 'Azerbaijan');
INSERT INTO `country` VALUES ('16', 'BS', 'Bahamas');
INSERT INTO `country` VALUES ('17', 'BH', 'Bahrain');
INSERT INTO `country` VALUES ('18', 'BD', 'Bangladesh');
INSERT INTO `country` VALUES ('19', 'BB', 'Barbados');
INSERT INTO `country` VALUES ('20', 'BY', 'Belarus');
INSERT INTO `country` VALUES ('21', 'BE', 'Belgium');
INSERT INTO `country` VALUES ('22', 'BZ', 'Belize');
INSERT INTO `country` VALUES ('23', 'BJ', 'Benin');
INSERT INTO `country` VALUES ('24', 'BM', 'Bermuda');
INSERT INTO `country` VALUES ('25', 'BT', 'Bhutan');
INSERT INTO `country` VALUES ('26', 'BO', 'Bolivia');
INSERT INTO `country` VALUES ('27', 'BA', 'Bosnia and Herzegovina');
INSERT INTO `country` VALUES ('28', 'BW', 'Botswana');
INSERT INTO `country` VALUES ('29', 'BV', 'Bouvet Island');
INSERT INTO `country` VALUES ('30', 'BR', 'Brazil');
INSERT INTO `country` VALUES ('31', 'IO', 'British Indian Ocean Territory');
INSERT INTO `country` VALUES ('32', 'BN', 'Brunei Darussalam');
INSERT INTO `country` VALUES ('33', 'BG', 'Bulgaria');
INSERT INTO `country` VALUES ('34', 'BF', 'Burkina Faso');
INSERT INTO `country` VALUES ('35', 'BI', 'Burundi');
INSERT INTO `country` VALUES ('36', 'KH', 'Cambodia');
INSERT INTO `country` VALUES ('37', 'CM', 'Cameroon');
INSERT INTO `country` VALUES ('38', 'CA', 'Canada');
INSERT INTO `country` VALUES ('39', 'CV', 'Cape Verde');
INSERT INTO `country` VALUES ('40', 'KY', 'Cayman Islands');
INSERT INTO `country` VALUES ('41', 'CF', 'Central African Republic');
INSERT INTO `country` VALUES ('42', 'TD', 'Chad');
INSERT INTO `country` VALUES ('43', 'CL', 'Chile');
INSERT INTO `country` VALUES ('44', 'CN', 'China');
INSERT INTO `country` VALUES ('45', 'CX', 'Christmas Island');
INSERT INTO `country` VALUES ('46', 'CC', 'Cocos (Keeling) Islands');
INSERT INTO `country` VALUES ('47', 'CO', 'Colombia');
INSERT INTO `country` VALUES ('48', 'KM', 'Comoros');
INSERT INTO `country` VALUES ('49', 'CD', 'Democratic Republic of the Congo');
INSERT INTO `country` VALUES ('50', 'CG', 'Republic of Congo');
INSERT INTO `country` VALUES ('51', 'CK', 'Cook Islands');
INSERT INTO `country` VALUES ('52', 'CR', 'Costa Rica');
INSERT INTO `country` VALUES ('53', 'HR', 'Croatia (Hrvatska)');
INSERT INTO `country` VALUES ('54', 'CU', 'Cuba');
INSERT INTO `country` VALUES ('55', 'CY', 'Cyprus');
INSERT INTO `country` VALUES ('56', 'CZ', 'Czech Republic');
INSERT INTO `country` VALUES ('57', 'DK', 'Denmark');
INSERT INTO `country` VALUES ('58', 'DJ', 'Djibouti');
INSERT INTO `country` VALUES ('59', 'DM', 'Dominica');
INSERT INTO `country` VALUES ('60', 'DO', 'Dominican Republic');
INSERT INTO `country` VALUES ('61', 'TP', 'East Timor');
INSERT INTO `country` VALUES ('62', 'EC', 'Ecuador');
INSERT INTO `country` VALUES ('63', 'EG', 'Egypt');
INSERT INTO `country` VALUES ('64', 'SV', 'El Salvador');
INSERT INTO `country` VALUES ('65', 'GQ', 'Equatorial Guinea');
INSERT INTO `country` VALUES ('66', 'ER', 'Eritrea');
INSERT INTO `country` VALUES ('67', 'EE', 'Estonia');
INSERT INTO `country` VALUES ('68', 'ET', 'Ethiopia');
INSERT INTO `country` VALUES ('69', 'FK', 'Falkland Islands (Malvinas)');
INSERT INTO `country` VALUES ('70', 'FO', 'Faroe Islands');
INSERT INTO `country` VALUES ('71', 'FJ', 'Fiji');
INSERT INTO `country` VALUES ('72', 'FI', 'Finland');
INSERT INTO `country` VALUES ('73', 'FR', 'France');
INSERT INTO `country` VALUES ('74', 'FX', 'France, Metropolitan');
INSERT INTO `country` VALUES ('75', 'GF', 'French Guiana');
INSERT INTO `country` VALUES ('76', 'PF', 'French Polynesia');
INSERT INTO `country` VALUES ('77', 'TF', 'French Southern Territories');
INSERT INTO `country` VALUES ('78', 'GA', 'Gabon');
INSERT INTO `country` VALUES ('79', 'GM', 'Gambia');
INSERT INTO `country` VALUES ('80', 'GE', 'Georgia');
INSERT INTO `country` VALUES ('81', 'DE', 'Germany');
INSERT INTO `country` VALUES ('82', 'GH', 'Ghana');
INSERT INTO `country` VALUES ('83', 'GI', 'Gibraltar');
INSERT INTO `country` VALUES ('84', 'GK', 'Guernsey');
INSERT INTO `country` VALUES ('85', 'GR', 'Greece');
INSERT INTO `country` VALUES ('86', 'GL', 'Greenland');
INSERT INTO `country` VALUES ('87', 'GD', 'Grenada');
INSERT INTO `country` VALUES ('88', 'GP', 'Guadeloupe');
INSERT INTO `country` VALUES ('89', 'GU', 'Guam');
INSERT INTO `country` VALUES ('90', 'GT', 'Guatemala');
INSERT INTO `country` VALUES ('91', 'GN', 'Guinea');
INSERT INTO `country` VALUES ('92', 'GW', 'Guinea-Bissau');
INSERT INTO `country` VALUES ('93', 'GY', 'Guyana');
INSERT INTO `country` VALUES ('94', 'HT', 'Haiti');
INSERT INTO `country` VALUES ('95', 'HM', 'Heard and Mc Donald Islands');
INSERT INTO `country` VALUES ('96', 'HN', 'Honduras');
INSERT INTO `country` VALUES ('97', 'HK', 'Hong Kong');
INSERT INTO `country` VALUES ('98', 'HU', 'Hungary');
INSERT INTO `country` VALUES ('99', 'IS', 'Iceland');
INSERT INTO `country` VALUES ('100', 'IN', 'India');
INSERT INTO `country` VALUES ('101', 'IM', 'Isle of Man');
INSERT INTO `country` VALUES ('102', 'ID', 'Indonesia');
INSERT INTO `country` VALUES ('103', 'IR', 'Iran (Islamic Republic of)');
INSERT INTO `country` VALUES ('104', 'IQ', 'Iraq');
INSERT INTO `country` VALUES ('105', 'IE', 'Ireland');
INSERT INTO `country` VALUES ('106', 'IL', 'Israel');
INSERT INTO `country` VALUES ('107', 'IT', 'Italy');
INSERT INTO `country` VALUES ('108', 'CI', 'Ivory Coast');
INSERT INTO `country` VALUES ('109', 'JE', 'Jersey');
INSERT INTO `country` VALUES ('110', 'JM', 'Jamaica');
INSERT INTO `country` VALUES ('111', 'JP', 'Japan');
INSERT INTO `country` VALUES ('112', 'JO', 'Jordan');
INSERT INTO `country` VALUES ('113', 'KZ', 'Kazakhstan');
INSERT INTO `country` VALUES ('114', 'KE', 'Kenya');
INSERT INTO `country` VALUES ('115', 'KI', 'Kiribati');
INSERT INTO `country` VALUES ('116', 'KP', 'Korea, Democratic People\'s Republic of');
INSERT INTO `country` VALUES ('117', 'KR', 'Korea, Republic of');
INSERT INTO `country` VALUES ('118', 'XK', 'Kosovo');
INSERT INTO `country` VALUES ('119', 'KW', 'Kuwait');
INSERT INTO `country` VALUES ('120', 'KG', 'Kyrgyzstan');
INSERT INTO `country` VALUES ('121', 'LA', 'Lao People\'s Democratic Republic');
INSERT INTO `country` VALUES ('122', 'LV', 'Latvia');
INSERT INTO `country` VALUES ('123', 'LB', 'Lebanon');
INSERT INTO `country` VALUES ('124', 'LS', 'Lesotho');
INSERT INTO `country` VALUES ('125', 'LR', 'Liberia');
INSERT INTO `country` VALUES ('126', 'LY', 'Libyan Arab Jamahiriya');
INSERT INTO `country` VALUES ('127', 'LI', 'Liechtenstein');
INSERT INTO `country` VALUES ('128', 'LT', 'Lithuania');
INSERT INTO `country` VALUES ('129', 'LU', 'Luxembourg');
INSERT INTO `country` VALUES ('130', 'MO', 'Macau');
INSERT INTO `country` VALUES ('131', 'MK', 'North Macedonia');
INSERT INTO `country` VALUES ('132', 'MG', 'Madagascar');
INSERT INTO `country` VALUES ('133', 'MW', 'Malawi');
INSERT INTO `country` VALUES ('134', 'MY', 'Malaysia');
INSERT INTO `country` VALUES ('135', 'MV', 'Maldives');
INSERT INTO `country` VALUES ('136', 'ML', 'Mali');
INSERT INTO `country` VALUES ('137', 'MT', 'Malta');
INSERT INTO `country` VALUES ('138', 'MH', 'Marshall Islands');
INSERT INTO `country` VALUES ('139', 'MQ', 'Martinique');
INSERT INTO `country` VALUES ('140', 'MR', 'Mauritania');
INSERT INTO `country` VALUES ('141', 'MU', 'Mauritius');
INSERT INTO `country` VALUES ('142', 'TY', 'Mayotte');
INSERT INTO `country` VALUES ('143', 'MX', 'Mexico');
INSERT INTO `country` VALUES ('144', 'FM', 'Micronesia, Federated States of');
INSERT INTO `country` VALUES ('145', 'MD', 'Moldova, Republic of');
INSERT INTO `country` VALUES ('146', 'MC', 'Monaco');
INSERT INTO `country` VALUES ('147', 'MN', 'Mongolia');
INSERT INTO `country` VALUES ('148', 'ME', 'Montenegro');
INSERT INTO `country` VALUES ('149', 'MS', 'Montserrat');
INSERT INTO `country` VALUES ('150', 'MA', 'Morocco');
INSERT INTO `country` VALUES ('151', 'MZ', 'Mozambique');
INSERT INTO `country` VALUES ('152', 'MM', 'Myanmar');
INSERT INTO `country` VALUES ('153', 'NA', 'Namibia');
INSERT INTO `country` VALUES ('154', 'NR', 'Nauru');
INSERT INTO `country` VALUES ('155', 'NP', 'Nepal');
INSERT INTO `country` VALUES ('156', 'NL', 'Netherlands');
INSERT INTO `country` VALUES ('157', 'AN', 'Netherlands Antilles');
INSERT INTO `country` VALUES ('158', 'NC', 'New Caledonia');
INSERT INTO `country` VALUES ('159', 'NZ', 'New Zealand');
INSERT INTO `country` VALUES ('160', 'NI', 'Nicaragua');
INSERT INTO `country` VALUES ('161', 'NE', 'Niger');
INSERT INTO `country` VALUES ('162', 'NG', 'Nigeria');
INSERT INTO `country` VALUES ('163', 'NU', 'Niue');
INSERT INTO `country` VALUES ('164', 'NF', 'Norfolk Island');
INSERT INTO `country` VALUES ('165', 'MP', 'Northern Mariana Islands');
INSERT INTO `country` VALUES ('166', 'NO', 'Norway');
INSERT INTO `country` VALUES ('167', 'OM', 'Oman');
INSERT INTO `country` VALUES ('168', 'PK', 'Pakistan');
INSERT INTO `country` VALUES ('169', 'PW', 'Palau');
INSERT INTO `country` VALUES ('170', 'PS', 'Palestine');
INSERT INTO `country` VALUES ('171', 'PA', 'Panama');
INSERT INTO `country` VALUES ('172', 'PG', 'Papua New Guinea');
INSERT INTO `country` VALUES ('173', 'PY', 'Paraguay');
INSERT INTO `country` VALUES ('174', 'PE', 'Peru');
INSERT INTO `country` VALUES ('175', 'PH', 'Philippines');
INSERT INTO `country` VALUES ('176', 'PN', 'Pitcairn');
INSERT INTO `country` VALUES ('177', 'PL', 'Poland');
INSERT INTO `country` VALUES ('178', 'PT', 'Portugal');
INSERT INTO `country` VALUES ('179', 'PR', 'Puerto Rico');
INSERT INTO `country` VALUES ('180', 'QA', 'Qatar');
INSERT INTO `country` VALUES ('181', 'RE', 'Reunion');
INSERT INTO `country` VALUES ('182', 'RO', 'Romania');
INSERT INTO `country` VALUES ('183', 'RU', 'Russian Federation');
INSERT INTO `country` VALUES ('184', 'RW', 'Rwanda');
INSERT INTO `country` VALUES ('185', 'KN', 'Saint Kitts and Nevis');
INSERT INTO `country` VALUES ('186', 'LC', 'Saint Lucia');
INSERT INTO `country` VALUES ('187', 'VC', 'Saint Vincent and the Grenadines');
INSERT INTO `country` VALUES ('188', 'WS', 'Samoa');
INSERT INTO `country` VALUES ('189', 'SM', 'San Marino');
INSERT INTO `country` VALUES ('190', 'ST', 'Sao Tome and Principe');
INSERT INTO `country` VALUES ('191', 'SA', 'Saudi Arabia');
INSERT INTO `country` VALUES ('192', 'SN', 'Senegal');
INSERT INTO `country` VALUES ('193', 'RS', 'Serbia');
INSERT INTO `country` VALUES ('194', 'SC', 'Seychelles');
INSERT INTO `country` VALUES ('195', 'SL', 'Sierra Leone');
INSERT INTO `country` VALUES ('196', 'SG', 'Singapore');
INSERT INTO `country` VALUES ('197', 'SK', 'Slovakia');
INSERT INTO `country` VALUES ('198', 'SI', 'Slovenia');
INSERT INTO `country` VALUES ('199', 'SB', 'Solomon Islands');
INSERT INTO `country` VALUES ('200', 'SO', 'Somalia');
INSERT INTO `country` VALUES ('201', 'ZA', 'South Africa');
INSERT INTO `country` VALUES ('202', 'GS', 'South Georgia South Sandwich Islands');
INSERT INTO `country` VALUES ('203', 'SS', 'South Sudan');
INSERT INTO `country` VALUES ('204', 'ES', 'Spain');
INSERT INTO `country` VALUES ('205', 'LK', 'Sri Lanka');
INSERT INTO `country` VALUES ('206', 'SH', 'St. Helena');
INSERT INTO `country` VALUES ('207', 'PM', 'St. Pierre and Miquelon');
INSERT INTO `country` VALUES ('208', 'SD', 'Sudan');
INSERT INTO `country` VALUES ('209', 'SR', 'Suriname');
INSERT INTO `country` VALUES ('210', 'SJ', 'Svalbard and Jan Mayen Islands');
INSERT INTO `country` VALUES ('211', 'SZ', 'Swaziland');
INSERT INTO `country` VALUES ('212', 'SE', 'Sweden');
INSERT INTO `country` VALUES ('213', 'CH', 'Switzerland');
INSERT INTO `country` VALUES ('214', 'SY', 'Syrian Arab Republic');
INSERT INTO `country` VALUES ('215', 'TW', 'Taiwan');
INSERT INTO `country` VALUES ('216', 'TJ', 'Tajikistan');
INSERT INTO `country` VALUES ('217', 'TZ', 'Tanzania, United Republic of');
INSERT INTO `country` VALUES ('218', 'TH', 'Thailand');
INSERT INTO `country` VALUES ('219', 'TG', 'Togo');
INSERT INTO `country` VALUES ('220', 'TK', 'Tokelau');
INSERT INTO `country` VALUES ('221', 'TO', 'Tonga');
INSERT INTO `country` VALUES ('222', 'TT', 'Trinidad and Tobago');
INSERT INTO `country` VALUES ('223', 'TN', 'Tunisia');
INSERT INTO `country` VALUES ('224', 'TR', 'Turkey');
INSERT INTO `country` VALUES ('225', 'TM', 'Turkmenistan');
INSERT INTO `country` VALUES ('226', 'TC', 'Turks and Caicos Islands');
INSERT INTO `country` VALUES ('227', 'TV', 'Tuvalu');
INSERT INTO `country` VALUES ('228', 'UG', 'Uganda');
INSERT INTO `country` VALUES ('229', 'UA', 'Ukraine');
INSERT INTO `country` VALUES ('230', 'AE', 'United Arab Emirates');
INSERT INTO `country` VALUES ('231', 'GB', 'United Kingdom');
INSERT INTO `country` VALUES ('232', 'US', 'United States');
INSERT INTO `country` VALUES ('233', 'UM', 'United States minor outlying islands');
INSERT INTO `country` VALUES ('234', 'UY', 'Uruguay');
INSERT INTO `country` VALUES ('235', 'UZ', 'Uzbekistan');
INSERT INTO `country` VALUES ('236', 'VU', 'Vanuatu');
INSERT INTO `country` VALUES ('237', 'VA', 'Vatican City State');
INSERT INTO `country` VALUES ('238', 'VE', 'Venezuela');
INSERT INTO `country` VALUES ('239', 'VN', 'Vietnam');
INSERT INTO `country` VALUES ('240', 'VG', 'Virgin Islands (British)');
INSERT INTO `country` VALUES ('241', 'VI', 'Virgin Islands (U.S.)');
INSERT INTO `country` VALUES ('242', 'WF', 'Wallis and Futuna Islands');
INSERT INTO `country` VALUES ('243', 'EH', 'Western Sahara');
INSERT INTO `country` VALUES ('244', 'YE', 'Yemen');
INSERT INTO `country` VALUES ('245', 'ZM', 'Zambia');
INSERT INTO `country` VALUES ('246', 'ZW', 'Zimbabwe');

Selanjutnya buat file data.php untuk menampung data nama negara dari databse db_country dengan format .json.
<?php
 header('Content-Type: application/json; charset=utf8');

 $server = "localhost";
 $user  = "root";
 $pass  = "";
 $dbname = "db_country";
 //koneksi ke database db_country
 $conn = mysqli_connect($server, $user, $pass, $dbname);

 if(!$conn){
  die("Connection Failed: " .mysqli_connect_error());
 }
 $term = trim(strip_tags($_GET['term']));
 //query untuk menampilkan data dari tabel country
 $query = mysqli_query($conn, "SELECT * FROM country WHERE  country_name LIKE '%$term%' ");

 $array=array();
 //looping data
 while($data=mysqli_fetch_assoc($query)){ 
     $row['value']=$data['country_name'];
  //buat array yang nantinya akan di konversi ke json
     array_push($array, $row);
    }

 //mengubah data object menjadi data json
 echo json_encode($array);
?>

Terakhir buat file index.php untuk menampilkan form nama negara dengan autocomplete.
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>maribelajarcoding.com - Membuat Autocomplete JQuery Database Mysql PHP</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.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() {

    $( "#nama_negara" ).autocomplete({
      source: "data.php"
    });
  });
  </script>
</head>
<body>
 
<div class="ui-widget">
  <form method="POST">
    <label >Nama Negara: </label>
    <input type="text" id="nama_negara">
  </form>
</div>

</body>
</html>

Tutorial membuat form autocomplete dengan JQuery MySQL dan PHP telah selesai. Sekian, semoga bermanfaat.

Source Code:
autocomplete.rar


Related Search:
Membuat Autocomplete PHP
Membuat Autocomplete dengan Javascript
PHP Autocomplete Textbox dari Database
JQuery Autocomplete Ajax PHP

23 Agustus 2019

Mengubah Alamat Menjadi Koordinat (Lat, Lng) dengan Geocoding Google Maps API

Mengubah Alamat Menjadi Koordinat dengan Geocoding Google Maps API

Selamat datang kembali di blog Mari belajar coding. Jika pada tutorial sebelumnya kita belajar membuat Direction Map dengan Google Maps API, pada tutorial kali ini kita akan belajar mengubah alamat, nama jalan atau nama tempat menjadi titik koordinat latitude dan longitude atau sebaliknya, mengubah titik koordinat latitude longitude menjadi nama alamat. Google Maps API menyediakan layanan Geocoding API untuk mengonversi alamat menjadi titik koordinat. 

Mengubah Alamat Menjadi Koordinat dengan Geocoding Google Maps API
Mengubah Alamat Menjadi Koordinat dengan Geocoding Google Maps API

Pertama-tama kita buat api google maps nya terlebih dahulu. Silahkan kunjungi google cloud console, buat projek baru kemudian aktifkan service Maps JavaScript API dan Geocoding API
Mengubah Alamat Menjadi Koordinat dengan Geocoding Google Maps API

Buat kunci api untuk mengakses fitur Google maps api.
Mengubah Alamat Menjadi Koordinat dengan Geocoding Google Maps API

Setelah kunci api dibuat, kita coba apakah request data json dari google maps berfungsi atau tidak. Silahkan salin url dibawah ini kemudian ganti your_api_key dengan api teman-teman yang didapat dari google cloud console. Jalankan melalui browser.
Get data berdasarkan nama alamat, nama jalan atau nama tempat.
https://maps.googleapis.com/maps/api/geocode/json?address=1600+Amphitheatre+Parkway,+Mountain+View,+CA&key=YOUR_API_KEY

Get data berdasarkan lat, lng.
https://maps.googleapis.com/maps/api/geocode/json?latlng=40.714224,-73.961452&key=YOUR_API_KEY


Tampilan data json seperti gambar dibawah ini.
Mengubah Alamat Menjadi Koordinat dengan Geocoding Google Maps API

Panggil google maps api dengan menambahkan kode dibawah ini di dalam tag head. Ganti your_api_key dengan api teman-teman.
<script src="//maps.googleapis.com/maps/api/js?key=YOUR_API_KEY" type="text/javascript"></script>

Buat form input nama tempat.
<!-- Form pencarian -->
<form class="form-horizontal" id="formCariTempat" method="POST" autocomplete="off">
  <div class="form-group">
    <label class="control-label col-sm-3" >Cari Tempat:</label>
    <div class="col-sm-9">
      <input type="text" class="form-control" id="tempat" name="tempat">
    </div>
  </div>          
  <div class="form-group"> 
    <div class="col-sm-offset-3 col-sm-9">
      <button type="submit" class="btn btn-default">Cari</button>
    </div>
  </div>
</form>
<!-- tempat meletakan keterangan alamat dan lat, lng -->
<div id="panelContent"></div>

Buat fungsi dengan javascript untuk menangani proses submit form.
<script type="text/javascript">
  $(document).ready(function() { 
    $("#formCariTempat").submit(function(e) {
        e.preventDefault();
        //ambil value dari form
        var namatempat=$("#tempat").val();

        if (namatempat!="") {
           //replace semua spasi menjadi tanda plus (+)
            namatempat=namatempat.replace(/ /g, "+");
           //api google maps
            var url="https://maps.googleapis.com/maps/api/geocode/json?address="+namatempat+"&key=YOUR_API_KEY";

            document.getElementById("panelContent").innerHTML="";

            //ambil data dari json
            $.getJSON(url, function(result){ 

                //menampilkan peta
                var map;          
                var infowindow = new google.maps.InfoWindow({ });   
                map = new google.maps.Map(document.getElementById('map'), {                
                  zoom: 15,  
                  center: {lat: result.results[0].geometry.location.lat, lng: result.results[0].geometry.location.lng},              
                });

                //looping data json
                $.each(result.results, function(i){  
                //menampilkan data keterangan alamat, lat, long                  
                document.getElementById("panelContent").innerHTML +="<b>Alamat :</b>"+ result.results[i].formatted_address + "<br><b>Lat :</b>"+ result.results[i].geometry.location.lat + "<br><b>Long :</b>"+ result.results[i].geometry.location.lng + "<br><br>";

                //set marker
                var marker = new google.maps.Marker({
                    position: {lat: result.results[i].geometry.location.lat, lng: result.results[i].geometry.location.lng},
                    title:result.results[i].formatted_address
                });

                //menampilkan popup keterangan di saat marker di click
                google.maps.event.addListener(marker, 'click', function () {
                        infowindow.setContent(result.results[i].formatted_address);
                        infowindow.open(map, marker);
                });
                 // To add the marker to the map, call setMap();
                marker.setMap(map);

               });

             });   


        }else{
          alert("Nama tempat tidak boleh kosong!");
        } 
       
    });
});

</script>

Kode lengkap seperti dibawah ini. Ganti your_api_key pada baris yang diberi highlight kemudian simpan file.
<!DOCTYPE html>
<html>
<head>
  <title>maribelajarcoding.com</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <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>
  <script src="//maps.googleapis.com/maps/api/js?key=YOUR_API_KEY" type="text/javascript"></script>
</head>

<body >
  <nav class="navbar navbar-inverse">
    <div class="container-fluid">
      <div class="navbar-header">
        <a class="navbar-brand" href="#">Maribelajarcoding.com</a>
      </div>      
    </div>
  </nav>
  <div class="container">
    <div class="row">
      <div class="col-md-5">
      <!-- Form pencarian -->
      <form class="form-horizontal" id="formCariTempat" method="POST" autocomplete="off">
        <div class="form-group">
          <label class="control-label col-sm-3" >Cari Tempat:</label>
          <div class="col-sm-9">
            <input type="text" class="form-control" id="tempat" name="tempat">
          </div>
        </div>          
        <div class="form-group"> 
          <div class="col-sm-offset-3 col-sm-9">
            <button type="submit" class="btn btn-default">Cari</button>
          </div>
        </div>
      </form>
      <!-- tempat meletakan keterangan alamat dan lat, lng -->
      <div id="panelContent"></div>

      </div>
      <div class="col-md-7">
        <div id="map" style="height: 500px;"></div>
      </div>
    </div>
  </div>
     
 <script type="text/javascript">
  $(document).ready(function() { 
    $("#formCariTempat").submit(function(e) {
        e.preventDefault();
        //ambil value dari form
        var namatempat=$("#tempat").val();

        if (namatempat!="") {
           //replace semua spasi menjadi tanda plus (+)
            namatempat=namatempat.replace(/ /g, "+");
           //api google maps
            var url="https://maps.googleapis.com/maps/api/geocode/json?address="+namatempat+"&key=YOUR_API_KEY";

            document.getElementById("panelContent").innerHTML="";

            //ambil data dari json
            $.getJSON(url, function(result){ 

                //menampilkan peta
                var map;          
                var infowindow = new google.maps.InfoWindow({ });   
                map = new google.maps.Map(document.getElementById('map'), {                
                  zoom: 15,  
                  center: {lat: result.results[0].geometry.location.lat, lng: result.results[0].geometry.location.lng},              
                });

                //looping data json
                $.each(result.results, function(i){  
                //menampilkan data keterangan alamat, lat, long                  
                document.getElementById("panelContent").innerHTML +="<b>Alamat :</b>"+ result.results[i].formatted_address + "<br><b>Lat :</b>"+ result.results[i].geometry.location.lat + "<br><b>Long :</b>"+ result.results[i].geometry.location.lng + "<br><br>";

                //set marker
                var marker = new google.maps.Marker({
                    position: {lat: result.results[i].geometry.location.lat, lng: result.results[i].geometry.location.lng},
                    title:result.results[i].formatted_address
                });

                //menampilkan popup keterangan di saat marker di click
                google.maps.event.addListener(marker, 'click', function () {
                        infowindow.setContent(result.results[i].formatted_address);
                        infowindow.open(map, marker);
                });
                 // To add the marker to the map, call setMap();
                marker.setMap(map);

               });

             });   

        }else{
          alert("Nama tempat tidak boleh kosong!");
        } 
       
    });
});
   
</script>
</body>
</html>

Tutorial mengubah alamat menjadi koordinat dengan Geocoding Google Maps API telah selesai. Sekian, semoga bermanfaat.



Related Search:
Mengubah Latitude Longitude Menjadi Alamat
Mengubah Alamat Menjadi Koordinat
Tutorial Geocoding Google Maps

22 Agustus 2019

Membuat Direction Map dengan Google Maps API

Membuat Direction Map dengan Google Maps API

Selamat datang di blog Mari belajar coding. Pada tutorial kali ini kita akan belajar menampilkan rute Google maps menggunakan Direction API. Google maps menyediakan fitur Direction API untuk membuat sebuah rute atau petunjuk arah dari satu titik tempat koordinat ke titik tempat lainnya.

Membuat Direction Map dengan Google Maps API
Membuat Direction Map dengan Google Maps API

Pertama-tama kita buat api google maps nya terlebih dahulu. Silahkan kunjungi google cloud console, buat projek baru kemudian aktifkan service Maps JavaScript API dan Directions API
Membuat Direction Map dengan Google Maps API

Buat kunci api untuk mengakses fitur Google maps api.
Membuat Direction Map dengan Google Maps API

Setelah kuci api selesai di buat, kita akan memulai membuat kode program. Panggil api google maps dengan menambahkan kode berikut ini di dalam tag head. Ganti API_KEY_KAMU dengan api yang di dapat dari google cloud console.
<script src="//maps.googleapis.com/maps/api/js?key=API_KEY_KAMU"
    type="text/javascript"></script>

Buat form untuk input tempat asal dan tujuan.
<form class="form-horizontal" id="formRute" autocomplete="off">
  <div class="form-group">
    <label class="control-label col-sm-2" >Asal:</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="asal" name="asal">
    </div>
  </div>
  <div class="form-group">
    <label class="control-label col-sm-2" >Tujuan:</label>
    <div class="col-sm-10"> 
      <input type="text" class="form-control" id="tujuan" name="tujuan">
    </div>
  </div>         
  <div class="form-group"> 
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-default">Rute</button>
    </div>
  </div>
</form>

<!-- tempat meletakan panel keterangan -->
<div id="panel"></div>

Buat tempat untuk menampilkan peta.
<div id="map" style="height: 500px;"></div>

Buat fungsi dengan javascript untuk menangani proses submit data dari form. 
<script type="text/javascript">
   $(document).ready(function() { 

    $("#formRute").submit(function(e) {

        e.preventDefault();
        //ambil value dari form input asal
        var asal=$("#asal").val();
        //ambil value dari form input tujuan
        var tujuan=$("#tujuan").val();
         //cek apakah asal dan tujuan kosong
         if (asal=="") {
          alert("Tempat asal tidak boleh kosong!");
         }else if (tujuan=="") {
          alert("Tempat tujuan tidak boleh kosong!");
         }else{

            var directionsService = new google.maps.DirectionsService();
            var directionsDisplay = new google.maps.DirectionsRenderer();
            var mapOptions = {
              zoom:12,
            }

            var map = new google.maps.Map(document.getElementById('map'), mapOptions);              
            directionsDisplay.setMap(map);
            directionsDisplay.setPanel(document.getElementById('panel'));

            var start = asal;
            var end = tujuan;
            var request = {
              origin: start,
              destination: end,
              travelMode: 'DRIVING'
            };
            directionsService.route(request, function(result, status) {
              if (status == 'OK') {
                directionsDisplay.setDirections(result);
              }
            });

         }

      });

   });

</script>

Kode lengkap membuat direction map dengan Google Maps API seperti dibawah ini. Ganti API_KEY_KAMU dengan api key yang didapat dari google cloud console.
<!DOCTYPE html>
<html>
<head>
  <title>maribelajarcoding.com</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <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>
  <script src="//maps.googleapis.com/maps/api/js?key=API_KEY_KAMU"
    type="text/javascript"></script>
</head>

<body>
  <nav class="navbar navbar-inverse">
    <div class="container-fluid">
      <div class="navbar-header">
        <a class="navbar-brand" href="#">Maribelajarcoding.com</a>
      </div>      
    </div>
  </nav>
  <div class="container">
    <div class="row">
      <div class="col-md-4">
       
        <form class="form-horizontal" id="formRute" autocomplete="off">
          <div class="form-group">
            <label class="control-label col-sm-2" >Asal:</label>
            <div class="col-sm-10">
              <input type="text" class="form-control" id="asal" name="asal">
            </div>
          </div>
          <div class="form-group">
            <label class="control-label col-sm-2" >Tujuan:</label>
            <div class="col-sm-10"> 
              <input type="text" class="form-control" id="tujuan" name="tujuan">
            </div>
          </div>         
          <div class="form-group"> 
            <div class="col-sm-offset-2 col-sm-10">
              <button type="submit" class="btn btn-default">Rute</button>
            </div>
          </div>
        </form>
        
        <!-- tempat meletakan panel keterangan -->
        <div id="panel"></div>

      </div>

      <div class="col-md-8">
        <div id="map" style="height: 500px;"></div>
      </div>
    </div>
  </div>
     
 <script type="text/javascript">
   $(document).ready(function() { 

    $("#formRute").submit(function(e) {

        e.preventDefault();
        //ambil value dari form input asal
        var asal=$("#asal").val();
        //ambil value dari form input tujuan
        var tujuan=$("#tujuan").val();
         //cek apakah asal dan tujuan kosong
         if (asal=="") {
          alert("Tempat asal tidak boleh kosong!");
         }else if (tujuan=="") {
          alert("Tempat tujuan tidak boleh kosong!");
         }else{

            var directionsService = new google.maps.DirectionsService();
            var directionsDisplay = new google.maps.DirectionsRenderer();
            var mapOptions = {
              zoom:12,
            }

            var map = new google.maps.Map(document.getElementById('map'), mapOptions);              
            directionsDisplay.setMap(map);
            directionsDisplay.setPanel(document.getElementById('panel'));

            var start = asal;
            var end = tujuan;
            var request = {
              origin: start,
              destination: end,
              travelMode: 'DRIVING'
            };
            directionsService.route(request, function(result, status) {
              if (status == 'OK') {
                directionsDisplay.setDirections(result);
              }
            });

         }

      });

   });

</script>
</body>
</html>

Tutorial membuat direction map dengan Google Maps API telah selesai. Sekian, semoga bermanfaat.



Related Search:
Membuat Direction Map dengan Google Maps API
Membuat Direction Map dengan PHP
Membuat Rute dengan Google Maps

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