Minggu, 05 November 2017

Layout, Marquee, Slider Animation dan Video dengan HTML dan CSS

Hallo semua, ane bakal kasih tutorial lagi nih bagaimana cara membuat layout yang berisikan marquee(text berjalan), slider animation up dan down, beserta video yang dapat diputar berulang kali. Tertarik untuk menyimak tutorialnya? langsung saja disimak tutorial yang ane buat..

1. Langkah pertama dan paling mendasar, buka texteditor terlebih dahulu yang akan digunakan. Pada tutorial ini menggunakan Sublime Text 3.
2. Buat index.php dan tuliskan syntax dasar html
<html>
    <head>
        <title>Layout, Marquee, Animation dan Video dengan HTML dan CSS</title>
    </head>
    <body>
      
    </body>
</html>
3. Buat style.css untuk membuat rancangan tampilan seperti pada gambar
Langsung saja tuliskan syntax dibawah ini
body{
       background: #171a21;
       color: white;
}
#pagewrep{
       width: 960px; margin: 10px auto; width: 100%;
}
#header{
       width: 100%;  height: 50px; color: black;
       font-size: 15px; color:white; background-color: visible;  margin-bottom: 10px; margin-top: -10px;
}
       .tgljam{
              width: 125px; background-color: #14324a; height: 50px; text-align: center; float: left;
       }
       #tgl{
               line-height: 30px;
       }
       #jam{
               line-height: 10px;
       }
       .judul{
              width:100%; height: 50px; background-color: #173b56; text-align: center; line-height: 50px;
       }
#cont-l{
       width-max: 340px; height: auto; background: linear-gradient(#0b151e,#173b56);             float: right; color: white;
}
#cont-up{
       width: 320px; height: auto; background-color: visible; margin :0 10px 10px 10px;
}
#cont-lsml{
       width: 340px; height: auto; background: linear-gradient(#0b151e,#173b56); float : right; margin-top : 10px; color: white;
}
       #cont-bot{
              width: 325px; height: 120px; background-color: visible;
       }
              .cont-botl{
                     width: 162.5px height :150px; float: left; padding-left: 10px; background-color: visible;
              }
              .cont-botr{
                     width: 162.5px height :150px; float: right; margin-right: -10px; background-color: visible;
              }
#cont-m{
       width-max: 960px; height: auto; background: linear-gradient(#0b151e,#173b56); float: left; padding: 10px 10px; 
}
       .cont-marq{
              width:960px; height: 30px; background-color: #14324a; font-size: 18px; font-family: calibri; color: white;
              line-height: 25px;
       }
       .cont-video{
              margin-top: -20px; margin-bottom: -30px; max-width: 960px; width: 100%;
       }
#footer{
       width: 100%;  height: 50px; background-color: #173b56; float: left; text-align: center; color:white; margin-top: 10px;
       margin-bottom: 5px; line-height: 50px;
}
4. Kembali ke index.html, buat tanggal dan jam menggunakan function dengan menuliskan syntax dibawah. Sisipkan syntax tersebut pada bagian head
<script>
function startTime() {
    var today = new Date();
    var h = today.getHours();
    var m = today.getMinutes();
    var s = today.getSeconds();
    m = checkTime(m);
    s = checkTime(s);
    document.getElementById('jam').innerHTML =
    h + ":" + m + ":" + s;
    var t = setTimeout(startTime, 500);
}
function checkTime(i) {
    if (i < 10) {i = "0" + i};  // add zero in front of numbers < 10
    return i;
}
</script>
5. Pada bagian body, berikan onload="startTime()" untuk menggunakan function. Buat div id pagewrep dan header untuk tgljam dan judul
<body onload="startTime()">
       <div id="pagewrep">
              <div id="header">
                     <div class="tgljam">
                            <div id="tgl"></div>
<div id="jam"></div>
                            <script>
                            var d = new Date();
                            document.getElementById('tgl').innerHTML = d.toDateString();
                            </script>
                     </div>
                     <div class="judul"><h3>Dota2 - The International 8</h3></div>

              </div>
6. Buat div cont-m sebagai wadah cont-marq dan cont-video
<div id="cont-m">
       <div class="cont-marq">
<marquee>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec euismod cursus maximus. Morbi imperdiet est magna, nec condimentum ante mattis sed. Vestibulum at porta neque. Sed pellentesque odio augue, in commodo mi scelerisque quis. Sed accumsan tincidunt commodo. Sed ultricies massa vitae odio viverra, ac fermentum metus pretium. Etiam rhoncus ante in posuere aliquet. Sed feugiat purus turpis, et iaculis urna iaculis nec.
              </marquee>
       </div>
       <div class="cont-video">
<video width="960px" height="600px" autoplay loop>
<source src="Dota 2 - 101% (Pro player montage).mp4" type="video/mp4">
</video>
</div>
</div>
7. Kemudian buat div cont-l untuk wadah cont-up
<div id="cont-l"><h4 align="center">Schedule High-Bracket</h4>
       <div id="cont-up">
<marquee behavior="scroll" direction="up" scrollamount="4" loop="infinit" height="350px">
<div class="cont-menu"><img src="cont1.jpg" alt="smile"></br></div>
<div class="cont-menu"><img src="cont2.jpg" width="320px" height="60px"</br></div>
<div class="cont-menu"><img src="cont3.jpg" width="320px" height="60px"</br></div>
<div class="cont-menu"><img src="cont4.jpg" width="320px" height="60px"</br></div>
<div class="cont-menu"><img src="cont5.jpg" width="320px" height="60px"</br></div>
<div class="cont-menu"><img src="cont6.jpg" width="320px" height="60px"</br></div>
<div class="cont-menu"><img src="cont7.jpg" width="320px" height="60px"</br></div>
              </marquee>
</div>
</div>
8.Buat cont-lsml untuk menampung cont-botl dan cont-botr, pada cont-botl berisikan animasi bergerak ke bawah dan cont-botr berisi animasi bergerak ke atas.
<div id="cont-lsml">
<div id="cont-bot">
<div class="cont-botl">
<div id="slider">  <!-- Slider container -->
<div id="mask">  <!-- Mask -->
<ul>
<li id="first" class="firstanimation"><
a href="#"> <img src="img1.png" width="157.5px" height="100px"/> </a>
</li>
<li id="second" class="secondanimation">
<a href="#"> <img src="img2.png" width="157.5px" height="100px"/> </a>
</li>
<li id="third" class="thirdanimation">
<a href="#"> <img src="img3.png" width="157.5px" height="100px"/> </a>
</li>
<li id="fourth" class="fourthanimation">
<a href="#"> <img src="img4.png" width="157.5px" height="100px"/> </a>
</li>
<li id="fifth" class="fifthanimation">
<a href="#"> <img src="img5.png" width="157.5px" height="100px"/> </a>
</li>
</ul>
</div>  <!-- End Mask -->
</div>  <!-- End Slider Container -->
</div>
<div class="cont-botr">
<div id="slider">  <!-- Slider container -->
<div id="mask">  <!-- Mask -->
<ul>
<li id="first" class="firstanim">
<a href="#"> <img src="img6.png" width="157.5px" height="100px"/> </a>
</li>
<li id="second" class="secondanim">
<a href="#"> <img src="img7.png" width="157.5px" height="100px"/> </a>
</li>
<li id="third" class="thirdanim">
<a href="#"> <img src="img8.png" width="157.5px" height="100px"/> </a>
</li>
<li id="fourth" class="fourthanim">
<a href="#"> <img src="img9.png" width="157.5px" height="100px"/> </a>
</li>
<li id="fifth" class="fifthanim">
<a href="#"> <img src="img10.png" width="157.5px" height="100px"/> </a>
</li>
</ul>
</div>  <!-- End Mask -->
</div>  <!-- End Slider Container -->
</div>
</div>
</div>
9. Sisipkan syntax animasi slider ke dalam style.css
#slider {
   height: 100px;
   width: 157.5px;
   margin: 10px auto 0;
   overflow: visible;
   position: relative;
}
#mask {
   overflow: hidden;
   height: 100px;
}
#slider ul {
   margin: 0;
   padding: 0;
   position: relative;
}
#slider li {
   width: 157.5px;  /* Width Image */
   height: 100px; /* Height Image */
   position: absolute;
   top: -100px; /* Original Position - Outside of the Slider */
   list-style: none;
}
#slider li.firstanimation {
   animation: cycle 20s linear infinite;
}
#slider li.secondanimation {
   animation: cycletwo 20s linear infinite;
}
#slider li.thirdanimation {
   animation: cyclethree 20s linear infinite;
}
#slider li.fourthanimation {
   animation: cyclefour 20s linear infinite;
}
#slider li.fifthanimation {
   animation: cyclefive 20s linear infinite;
}
@keyframes cycle {
   0%  { top: 0px; } /* When you start the slide, the first image is already visible */
   4%  { top: 0px; } /* Original Position */
   16% { top: 0px; opacity:1; z-index:0; } /* From 4% to 16 % = for 3 seconds the image is visible */
   20% { top: 100px; opacity: 0; z-index: 0; } /* From 16% to 20% = for 1 second exit image */
   21% { top: -100px; opacity: 0; z-index: -1; } /* Return to Original Position */
   92% { top: -100px; opacity: 0; z-index: 0; }
   96% { top: -100px; opacity: 0; } /* From 96% to 100% = for 1 second enter image*/
   100%{ top: 0px; opacity: 1; }
}
@keyframes cycletwo {
   0%  { top: -100px; opacity: 0; } /* Original Position */
   16% { top: -100px; opacity: 0; }/* Starts moving after 16% to this position */
   20% { top: 0px; opacity: 1; }
   24% { top: 0px; opacity: 1; }  /* From 20% to 24% = for 1 second enter image*/
   36% { top: 0px; opacity: 1; z-index: 0; }   /* From 24% to 36 % = for 3 seconds the image is visible */
   40% { top: 100px; opacity: 0; z-index: 0; } /* From 36% to 40% = for 1 second exit image */
   41% { top: -100px; opacity: 0; z-index: -1; }   /* Return to Original Position */
   100%{ top: -100px; opacity: 0; z-index: -1; }
}
@keyframes cyclethree {
   0%  { top: -100px; opacity: 0; }
   36% { top: -100px; opacity: 0; }
   40% { top: 0px; opacity: 1; }
   44% { top: 0px; opacity: 1; }
   56% { top: 0px; opacity: 1; }
   60% { top: 100px; opacity: 0; z-index: 0; }
   61% { top: -100px; opacity: 0; z-index: -1; }
   100%{ top: -100px; opacity: 0; z-index: -1; }
}
@keyframes cyclefour {
   0%  { top: -100px; opacity: 0; }
   56% { top: -100px; opacity: 0; }
   60% { top: 0px; opacity: 1; }
   64% { top: 0px; opacity: 1; }
   76% { top: 0px; opacity: 1; z-index: 0; }
   80% { top: 100px; opacity: 0; z-index: 0; }
   81% { top: -100px; opacity: 0; z-index: -1; }
   100%{ top: -100px; opacity: 0; z-index: -1; }
}
@keyframes cyclefive {
   0%  { top: -100px; opacity: 0; }
   76% { top: -100px; opacity: 0; }
   80% { top: 0px; opacity: 1; }
   84% { top: 0px; opacity: 1; }
   96% { top: 0px; opacity: 1; z-index: 0; }
   100%{ top: 100px; opacity: 0; z-index: 0; }
}
#slider li.firstanim {
   animation: cycle1 15s linear infinite;
}
#slider li.secondanim {
   animation: cycle2 15s linear infinite;
}
#slider li.thirdanim {
   animation: cycle3 15s linear infinite;
}
#slider li.fourthanim {
   animation: cycle4 15s linear infinite;
}
#slider li.fifthanim {
   animation: cycle5 15s linear infinite;
@keyframes cycle1 {
   0%  { top: 0px; } /* When you start the slide, the first image is already visible */
   4%  { top: 0px; } /* Original Position */
   16% { top: 0px; opacity:1; z-index:0; } /* From 4% to 16 % = for 3 seconds the image is visible */
   20% { top: -100px; opacity: 0; z-index: 0; } /* From 16% to 20% = for 1 second exit image */
   21% { top: 100px; opacity: 0; z-index: -1; } /* Return to Original Position */
   92% { top: 100px; opacity: 0; z-index: 0; }
   96% { top: 100px; opacity: 0; } /* From 96% to 100% = for 1 second enter image*/
   100%{ top: 0px; opacity: 1; }
}
@keyframes cycle2 {
   0%  { top: 100px; opacity: 0; } /* Original Position */
   16% { top: 100px; opacity: 0; }/* Starts moving after 16% to this position */
   20% { top: 0px; opacity: 1; }
   24% { top: 0px; opacity: 1; }  /* From 20% to 24% = for 1 second enter image*/
   36% { top: 0px; opacity: 1; z-index: 0; }   /* From 24% to 36 % = for 3 seconds the image is visible */
   40% { top: -100px; opacity: 0; z-index: 0; } /* From 36% to 40% = for 1 second exit image */
   41% { top: 100px; opacity: 0; z-index: -1; }   /* Return to Original Position */
   100%{ top: 100px; opacity: 0; z-index: -1; }
}
@keyframes cycle3 {
   0%  { top: 100px; opacity: 0; }
   36% { top: 100px; opacity: 0; }
   40% { top: 0px; opacity: 1; }
   44% { top: 0px; opacity: 1; }
   56% { top: 0px; opacity: 1; }
   60% { top: -100px; opacity: 0; z-index: 0; }
   61% { top: 100px; opacity: 0; z-index: -1; }
   100%{ top: 100px; opacity: 0; z-index: -1; }
}
@keyframes cycle4 {
   0%  { top: 100px; opacity: 0; }
   56% { top: 100px; opacity: 0; }
   60% { top: 0px; opacity: 1; }
   64% { top: 0px; opacity: 1; }
   76% { top: 0px; opacity: 1; z-index: 0; }
   80% { top: -100px; opacity: 0; z-index: 0; }
   81% { top: 100px; opacity: 0; z-index: -1; }
   100%{ top: 100px; opacity: 0; z-index: -1; }
}
@keyframes cycle5 {
   0%  { top: 100px; opacity: 0; }
   76% { top: 100px; opacity: 0; }
   80% { top: 0px; opacity: 1; }
   84% { top: 0px; opacity: 1; }
   96% { top: 0px; opacity: 1; z-index: 0; }
   100%{ top: -100px; opacity: 0; z-index: 0; }
}
#slider-contup {
   height: 240px;
   width: 320px;
   margin: 10px auto 0;
   overflow: visible;
   position: relative;
}
#mask1 {
   overflow: hidden;
   height: 60px;
}
#slider-contup ul {
   margin: 0;
   padding: 0;
   position: relative;
}
#slider-contup li {
   width: 320px;  /* Width Image */
   height: 60px; /* Height Image */
   position: absolute;
   top: -100px; /* Original Position - Outside of the Slider */
   list-style: none;
}
#slider-contup li.firstanimation {
   animation: cycleup1 20s linear infinite;
}
#slider-contup li.secondanimation {
   animation: cycleup2 20s linear infinite;
}
#slider-contup li.thirdanimation {
   animation: cycleup3 20s linear infinite;
}
#slider-contup li.fourthanimation {
   animation: cycleup4 20s linear infinite;
}
#slider-contup li.fifthanimation {
   animation: cycleup5 20s linear infinite;
}
@keyframes cycleup1 {
   0%  { top: 0px; } /* When you start the slide, the first image is already visible */
   4%  { top: 0px; } /* Original Position */
   16% { top: 0px; opacity:1; z-index:0; } /* From 4% to 16 % = for 3 seconds the image is visible */
   20% { top: -100px; opacity: 0; z-index: 0; } /* From 16% to 20% = for 1 second exit image */
   21% { top: 100px; opacity: 0; z-index: -1; } /* Return to Original Position */
   92% { top: 100px; opacity: 0; z-index: 0; }
   96% { top: 100px; opacity: 0; } /* From 96% to 100% = for 1 second enter image*/
   100%{ top: 0px; opacity: 1; }
}
@keyframes cycleup2 {
   0%  { top: 100px; opacity: 0; } /* Original Position */
   16% { top: 100px; opacity: 0; }/* Starts moving after 16% to this position */
   20% { top: 0px; opacity: 1; }
   24% { top: 0px; opacity: 1; }  /* From 20% to 24% = for 1 second enter image*/
   36% { top: 0px; opacity: 1; z-index: 0; }   /* From 24% to 36 % = for 3 seconds the image is visible */
   40% { top: -100px; opacity: 0; z-index: 0; } /* From 36% to 40% = for 1 second exit image */
   41% { top: 100px; opacity: 0; z-index: -1; }   /* Return to Original Position */
   100%{ top: 100px; opacity: 0; z-index: -1; }
}
@keyframes cycleup3 {
   0%  { top: 100px; opacity: 0; }
   36% { top: 100px; opacity: 0; }
   40% { top: 0px; opacity: 1; }
   44% { top: 0px; opacity: 1; }
   56% { top: 0px; opacity: 1; }
   60% { top: -100px; opacity: 0; z-index: 0; }
   61% { top: 100px; opacity: 0; z-index: -1; }
   100%{ top: 100px; opacity: 0; z-index: -1; }
}
@keyframes cycleup4 {
   0%  { top: 100px; opacity: 0; }
   56% { top: 100px; opacity: 0; }
   60% { top: 0px; opacity: 1; }
   64% { top: 0px; opacity: 1; }
   76% { top: 0px; opacity: 1; z-index: 0; }
   80% { top: -100px; opacity: 0; z-index: 0; }
   81% { top: 100px; opacity: 0; z-index: -1; }
   100%{ top: 100px; opacity: 0; z-index: -1; }
}
@keyframes cycleup5 {
   0%  { top: 100px; opacity: 0; }
   76% { top: 100px; opacity: 0; }
   80% { top: 0px; opacity: 1; }
   84% { top: 0px; opacity: 1; }
   96% { top: 0px; opacity: 1; z-index: 0; }
   100%{ top: -100px; opacity: 0; z-index: 0; }
}
10. Buat div untuk footer, tutup div pagewrep, body dan htmlnya
<div id="footer">Copyright © 2017, Himawan Ari Dwi Laksono. All rights reserved</div>
       </div>
</body>
</html>
11. Buka browser yang akan digunakan untuk melihat hasil
Yap.. sekian dulu tutorial kali ini, cukup menarik kan untuk dibuat, semoga bermanfaat untuk kalian yang pengin coba-coba buat website. See ya later..

Autofill Data Alamat dengan Javascript

Hallo semua, pada postingan kali ini, ane bakalan kasih tutorial kepada kalian bagaimana cara untuk autofill/ mengisi secara otomatis data yang dituliskan pada textbox dan combobox bisa langsung terisi ke textbox dan combobox lainnya dengan menggunakan bantuan javascript. Disini juga menggunakan phpmyadmin sebagai wadah data untuk memanggil atau menampilkan data pada combobox yang akan dibuat nanti. Kira-kira udah dapat gambaran mengenai penjelasan yang ane uraikan barusan? Kalau masih belum mengerti, langsung saja disimak tutorial nya..

1. Langkah pertama dan paling mendasar, buka texteditor terlebih dahulu yang akan digunakan. Pada tutorial ini menggunakan Sublime Text 3.
2. Buat index.php dan tuliskan syntax dasar html
<html>
    <head>
        <title>Autofill Data Alamat dengan Javascript</title>
    </head>
    <body>
      
    </body>
</html>
3. Buka aplikasi Xampp untuk dapat mengakses phpmyadmin untuk membuat database. Pada Apache dan MySQL, Klik tombol Start untuk menyalakan service
4. Buka browser sesuai keinginan, tuliskan localhost/phpmyadmin pada address bar, setelah halaman terbuka, klik Database untuk memulai membuat database

5. Buat database 'alamat'
6. Kemudian buat tabel 'provinsi' dengan entitas id_provinsi, nama_provinsi
7. Buat tabel 'kota' dengan entitas id_kota, id_provinsi_fk, nama_kota
8. Buat tabel yang terakhir yaitu 'kecamatan' dengan entitas id_kecamatan, id_kota_fk, nama_kecamatan
Ket : id_provinsi_fk untuk memberikan sebuah relasi (foreign key) dari tabel 'kota' ke tabel 'provinsi'
         id_kota_fk untuk memberikan sebuah relasi (foreign key) dari tabel 'kecamatan' ke tabel 'kota'
9. Setelah itu insert/ masukkan data disetiap tabel



10. Kembali ke index.php, sisipkan style type="text/css" pada bagian bawah tutup head dan berikan syntax php pada bagian dalam body untuk mendeklarasikan koneksi ke database. Disini menggunakan database alamat yang telah dibuat sebelumnya. 
<style type="text/css"></style>

<?php
//koneksi ke database
$con = mysqli_connect('localhost', 'root', '','alamat');
?>
11. Atur style pada div untuk mengatur panjang, dan margin, buat form dengan method="post" dan atur div nya. Taruh syntax nya di bagian bawah setelah koneksi database.
<div style="width: 60%;margin-left: 20%;margin-right: 20%;">
<form method="post">
<!--Kolom1-->
<div align="left" style="float: left; width: 50%">
12. Setelah itu buat tabel dengan padding 3 dan spacing 2, berikan judul 'alamat saya' dan textbox untuk NAMA, NIM dan HP. Berikan id untuk setiap textbox maupun combobox.

<table cellpadding="3" cellspacing="2" border="0">
       <tr><td colspan="2" align="center"><h3>ALAMAT SAYA</h3></tr>
       <tr><td>NAMA</td><td><input type="text" name="nama" id="nama" onkeyup="k_nama()"></td></tr>
       <tr><td>NIM</td><td><input type="text" name="nim" id="nim" onkeyup="k_nim()"></td></tr>
       <tr><td>HP</td><td><input type="text" name="nohp" size="12" maxlength="13" onkeypress="return isNumberKey(event)" id="nohp" onkeyup="k_nohp()"></td></tr>

onkeypress = untuk memberikan format pada textbox yang hanya dapat diinputkan dengan angka
onkeyup = untuk memberikan event/ function pada textbox sehingga nantinya ketika textbox ini di isi data, maka textbox lain yang memiliki ikatan bisa terisi secara otomatis seperti data yang telah diisikan sebelumnya.

13. Kemudian masuk pada bagian pembuatan combobox dan pemanggilan data dari database. Buat table row(tr) dan table data(td) untuk provinsi.
<tr>
       <td>PROVINSI</td>
       <td>
               <!--provinsi-->
            <select id="provinsi" name="provinsi" onchange="k_provinsi()">
                <option value="">- PILIH PROVINSI -</option>
                <?php
                $query = mysqli_query($con,"SELECT * FROM provinsi ORDER BY nama_provinsi");
                while ($row = mysqli_fetch_array($query)) {
                ?>
                    <option value="<?php echo $row['id_provinsi']; ?>">
                        <?php echo $row['nama_provinsi']; ?>
                    </option>
                <?php
                }
                ?>
            </select>
       </td>
</tr>
Pada $query=mysqli_query($con... adalah syntax untuk pemanggilan tabel provinsi berdasarkan nama_provinsi, sehingga data yang akan muncul pada combobox adalah hanya data nama_provinsi.
Pada option value, menampilkan data nama_provinsi ke option combobox
14.Buat tr dan td lagi untuk kota dan kecamatan, tuliskan syntax dibawah ini
<tr>
       <td>KAB/ KOTA </td>
       <td>
               <!--kota-->
            <select id="kota" name="kota" onchange="k_kota()" onselect="k_kec()">
                <option value="">- PILIH KABUPATEN -</option>
                <?php
                $query = mysqli_query($con,"SELECT
                                    *
                                  FROM
                                    kota
                                    INNER JOIN provinsi ON kota.id_provinsi_fk = provinsi.id_provinsi  ORDER BY nama_kota");
                while ($row = mysqli_fetch_array($query)) {
                ?>
                    <option id="kota" class="<?php echo $row['id_provinsi']; ?>" value="<?php echo $row['id_kota']; ?>">
                        <?php echo $row['nama_kota']; ?>
                    </option>
                <?php
                }
                ?>
            </select>
       </td> 
</tr>
<tr>
       <td>KECAMATAN</td>
       <td>
              <!--kecamatan-->
            <select id="kecamatan" name="kecamatan" onchange="k_kec()" onclick="k_kel()">
                <option value="">- PILIH KECAMATAN -</option>
                <?php
                $query = mysqli_query($con,"SELECT
                                        *
                                      FROM
                                        kecamatan
                                        INNER JOIN kota ON kecamatan.id_kota_fk = kota.id_kota ORDER BY nama_kecamatan");
                while ($row = mysqli_fetch_array($query)) {
                ?>
                    <option id="kecamatan" class="<?php echo $row['id_kota']; ?>" value="<?php echo $row['id_kecamatan']; ?>">
                        <?php echo $row['nama_kecamatan']; ?>
                    </option>
                <?php
                }
                ?>
            </select>
        </td>
</tr>
Pasti kalian bertanya-tanya, kenapa pada pemanggilan data menggunakan inner join? Yap.. dikarenakan tabel-tabel yang sebelumnya telah dibuat akan di foreign key/ di relasikan supaya memiliki hubungan antar tabel.
15. Setelah itu buat tr dan td untuk desa/ kelurahan, dusun/ kampung, rt/ rw dan jalan. Jangan lupa untuk menutup tabel, div dan form
<tr>
    <td>DESA/ KELURAHAN </td><td><input type="text" name="kelurahan" id="kelurahan" onkeyup="k_kel()"></td>
</tr>
<tr>
    <td>DUSUN/ KAMPUNG </td><td><input type="text" name="dus" id="dus" onkeyup ="k_dus()"></td>
</tr>
<tr>
    <td>RT/ RW </td><td><input type="text" name="rt" id="rt" onkeyup="k_rt()"></td>
</tr>
<tr>
    <td>Jalan </td><td><input type="text" name="jln" id="jln" onkeyup="k_jln()"></td>
</tr>
</table>
</div>
<form/>
16. Buat form yang kedua untuk alamat ortu. Pada bagian id di form kedua ini, tambahkan huruf 'b' agar dapat dibedakan. Langsung saja tuliskan syntax dibawah ini
<form2>
<div  style="position: inherit;">
<table cellpadding="3" cellspacing="2" border="0">
       <tr><td colspan="2" align="center"><h3>ALAMAT ORTU</h3></tr>
       <tr><td>NAMA</td><td><input type="text" name="namab" id="namab"></td></tr>
       <tr><td>HP</td><td><input type="text" name="nohp" size="12" maxlength="13" onkeypress="return isNumberKey(event)" id="nohp" onkeyup="k_nohp()"></td></tr>
<tr>
       <td>PROVINSI</td>
       <td>
               <!--provinsi2-->
            <select id="provinsib" name="provinsib">
                <option value="">- PILIH PROVINSI -</option>
                <?php
                $query = mysqli_query($con,"SELECT * FROM provinsi ORDER BY nama_provinsi");
                while ($row = mysqli_fetch_array($query)) {
                ?>
                    <option value="<?php echo $row['id_provinsi']; ?>">
                        <?php echo $row['nama_provinsi']; ?>
                    </option>
                <?php
                }
                ?>
            </select>
       </td>
</tr>

<tr>
       <td>KAB/ KOTA </td>
       <td>
               <!--kota2-->
            <select id="kotab" name="kotab" onclick="b_kab()">
                <option value="">- PILIH KABUPATEN -</option>
                <?php
                $query = mysqli_query($con,"SELECT
                                    *
                                  FROM
                                    kota
                                    INNER JOIN provinsi ON kota.id_provinsi_fk = provinsi.id_provinsi ORDER BY nama_kota");
                while ($row = mysqli_fetch_array($query)) {
                ?>
                    <option id="kotab" class="<?php echo $row['id_provinsi']; ?>" value="<?php echo $row['id_kota']; ?>">
                        <?php echo $row['nama_kota']; ?>
                    </option>
                <?php
                }
                ?>
            </select>
       </td> 
</tr>
<tr>
       <td>KECAMATAN </td>
       <td>
              <!--kecamatan2-->
            <select id="kecamatanb" name="kecamatanb" onclick="b_kec()">
                <option value="">- PILIH KECAMATAN -</option>
                <?php
                $query = mysqli_query($con,"SELECT
                                        *
                                      FROM
                                        kecamatan
                                        INNER JOIN kota ON kecamatan.id_kota_fk = kota.id_kota ORDER BY nama_kecamatan");
                while ($row = mysqli_fetch_array($query)) {
                ?>
                    <option id="kecamatanb" class="<?php echo $row['id_kota']; ?>" value="<?php echo $row['id_kecamatan']; ?>">
                        <?php echo $row['nama_kecamatan']; ?>
                    </option>
                <?php
                }
                ?>
            </select>
        </td>
</tr>
<tr><td>DESA/ KELURAHAN </td><td><input type="text" name="kelurahanb" id="kelurahanb"></td></tr>
<tr><td>DUSUN/ KAMPUNG </td><td><input type="text" name="dusb" id="dusb"></td></tr>
<tr><td>RT/ RW </td><td><input type="text" name="rtb" id="rtb"></td></tr>
<tr><td>Jalan </td><td><input type="text" name="jlnb" id="jlnb"></td></tr>
</table>
</div>
</form2>
</div>
17. Sampai lah dimana javascript akan digunakan, syntax sebelumnya sudah tecantumkan onchange dan onclick, nah pada bagian ini bakal dijelaskan lebih detail lagi
<script src="jquery-1.10.2.min.js"></script>
<script src="jquery.chained.min.js"></script>
<script>
   
    $("#kota").chained("#provinsi");
    $("#kecamatan").chained("#kota");
    $("#kelurahan").chained("#kecamatan");

    function b_kab(){
        var data_prov_b = document.getElementById("provinsib").value;
       $("#kotab").chained("#provinsib");
    }
    function b_kec(){
        $("#kecamatanb").chained("#kotab");
    }
Apabila belum memiliki file .js nya, bisa didownload lewat google. File .js yang dimaksud berfungsi untuk chained/ terrantai, lebih tepat nya adalah membuat sebuah ikatan antara data1 ke data2 dan jika data1 dicantumkan ke dalam textbox1, data2 akan muncul pada textbox2 dan secara otomatis terisi sesuai yang dituliskan data1(clone). Disini menggunakan id untuk membuat rantai tersebut dapat digunakan pada data-data yang akan ditampilkan.
18. Yang terakhir buat beberapa function  untuk mengambil data1 ke data2, pada tutorial no 17 hanya menjelaskan ikatan chained, belum termasuk pengambilan data. Tuliskan syntax seperti berikut
function k_provinsi(){
        var y = document.getElementById("provinsi").value;
        document.getElementById("provinsib").value  = y;
        }
          function k_kota(){
            var y = document.getElementById("kota").value;
            document.getElementById("kotab").value  = y;
        }
          function k_kec(){
            var y = document.getElementById("kecamatan").value;
            document.getElementById("kecamatanb").value  = y;
        }
         function k_kel(){
            var y = document.getElementById("kelurahan").value;
            document.getElementById("kelurahanb").value  = y;
        }
         function k_dus(){
              var y = document.getElementById("dus").value;
              document.getElementById("dusb").value= y;
         }
         function k_rt(){
              var y = document.getElementById("rt").value;
              document.getElementById("rtb").value= y;
         }
         function k_jln(){
              var y = document.getElementById("jln").value;
              document.getElementById("jlnb").value= y;
         }   
         function isNumberKey(evt)
              {
              var charCode = (evt.which) ? evt.which : event.keyCode
              if (charCode > 31 && (charCode < 48 || charCode > 57))
              return false;
              return true;
              }
              function k_nama(){
              //var y = document.getElementById("nama").value;
              //document.getElementById("namab").value= y;
         }
         function k_nim(){
              //var y = document.getElementById("nim").value;
              //document.getElementById("nimb").value= y;
         }
         function k_nohp(){
              //var y = document.getElementById("nohp").value;
              //document.getElementById("nohpb").value= y;
         }
        </script>
    </body>
</html>
19. Buka browser yang akan digunakan untuk menampilkan hasil, tuliskan localhost/nama_folder/nama_file
Pada textbox bagian kab/ kota dan kecamatan masih hide karena option provinsi belum terisi
20. Setelah option provinsi di pilih, maka kab/ kota akan terbuka/ unhide, dst. Textbox pada alamat ortu akan menyesuaikan isi/ pilihan pada textbox alamat saya
21. Apabila provinsi, kab/ kota dan kecamatan pada alamat ortu diganti, maka tidak akan berpengaruh terhadap provinsi, kab/ kota dan kecamatan pada alamat saya. Pada bagian textbox desa/ kelurahan, dusun/ kampung, rt/ rw dan jalan akan chained.
Sekian tutorial kali ini, walau agak belibet nerangin nya, tetapi semoga dapat dimengerti dan bermanfaat. Sampai jumpa pada tutorial selanjutnya..



luvne.com resepkuekeringku.com desainrumahnya.com yayasanbabysitterku.com