Showing posts with label Javascript Dan JQuery. Show all posts
Showing posts with label Javascript Dan JQuery. Show all posts

Monday, 16 November 2015

Menampilkan Hasil Perhitungan Secara Langsung Tanpa Klik Tombol Menggunakan Perintah Keyup JQuery

Pada kesempatan kali ini kita akan coba membuat suatu aplikasi sederhana untuk menampilkan hasil perhitungan tanpa harus mengklik tombol. Misalnya pada aplikasi penjualan kita memasukan nilai suatu barang yang harganya 25.000 kemudian barang tersebut ada diskonya sebesar 20%. Yang kita inginkan adalah nilai akhir / total yang harus dibayar itu secara otomatis langsung muncul tanpa harus klik tombol. Lihatlah gambar berikut,

Pada gambar diatas textbox "Yang Harus Dibayar" itu akan otomatis terisi setelah textbox "Diskon" terisi.

Dalam pembuatan aplikasi tersebut kita akan menggunakan perintah keyup pada JQuery. Berikut proses pembuatannya :

1. Buatlah tag HTML seperti berikut,
<table border="0" cellpadding="5" align="center">
  <form action="" method="post">
     <tr>
        <td>Harga :</td> 
        <td><input type="text" name="harga" id="harga" /></td>
     </tr> 
     <tr>
        <td>Diskon :</td> 
        <td><input type="text" name="diskon" id="diskon" /></td>
     </tr>
     <tr>
        <td>Yang Harus Dibayar :</td> 
        <td><input type="text" name="totBayar" id="totBayar" disabled /></td>
     </tr>  </form>
</table>



2. Buatlah sintak JQuerynya seperti berikut,
<script type="text/javascript">
  $(document).ready(function(){
      $("#diskon").keyup(function(){
        var harga  = parseInt($("#harga").val());
        var diskon  = parseInt($("#diskon").val());
        var total = harga - (harga*(diskon/100));
        $("#totBayar").val(total);
      });
  });
</script>

3. Jangan lupa sertakan library jquery.
<script src="http://code.jquery.com/jquery-2.1.4.js"></script>

4. Berikut sintak keseluruhannya,
<html>
<head>
  <title>Contoh Perhitungan Langsung</title> 
 <script src="code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <script type="text/javascript">
    $(document).ready(function(){
      $("#diskon").keyup(function(){
        var harga  = parseInt($("#harga").val());
        var diskon  = parseInt($("#diskon").val());
        var total = harga - (harga*(diskon/100));
        $("#totBayar").val(total);
      });
    });
  </script>
</head>
<body>
<table border="0" cellpadding="5" align="center">
  <form action="" method="post">
     <tr>
        <td>Harga :</td> 
        <td><input type="text" name="harga" id="harga" /></td>
     </tr> 
     <tr>
        <td>Diskon :</td> 
        <td><input type="text" name="diskon" id="diskon" /></td>
     </tr>
     <tr>
        <td>Yang Harus Dibayar :</td> 
        <td><input type="text" name="totBayar" id="totBayar" disabled /></td>
     </tr>  </form>
</table> </body>
</html>

5. Simpan dengan nama penjualan.html
6. Jalankan file penjualan.html tersebut pada browser yang kita inginkan.

Untuk lebih jelas bisa lihat pada link berikut

Semoga bermanfaat..

Baca Selengkapnya »
Diposkan oleh di 1 comment:
Label:

Monday, 7 September 2015

Memindahkan Isi Dari ListBox (Multiple Select) Yang Satu Ke ListBox Yang lain Dengan JQuery

Pada artikel ini akan dibahas bagaimana membuat 2 ListBox yang bisa saling melakukan pertukaran isinya dengan bantuan JQuery.
Pertama-tama buatlah 2 listbox atau multiple select dan 2 button seperti gambar berikut,

Berikut sintak HTML pembuatan listbox diatas,

<select name="select1" multiple="multiple" id="SelectLeft">
    <option>item1</option>
    <option>item2</option>
    <option>item3</option>
    <option>item4</option>
    <option>item5</option>
 </select>
<input id="MoveRight" type="button" value=" >> "/>
<input id="MoveLeft" type="button" value=" << " />
<select name="select2" multiple="multiple" id="SelectRight"></select>

Jika sudah dibuatkan HTML listbox seperti diatas, buatlah sintak Javascript atau JQuery seperti berikut,

$("#MoveRight,#MoveLeft").click(function (event) {
  var id = $(event.target).attr("id");
  var selectFrom = id == "MoveRight" ? "#SelectLeft":"#SelectRight";
  var moveTo = id == "MoveRight" ? "#SelectRight" : "#SelectLeft";

   var selectedItems = $(selectFrom + " :selected").toArray();
  $(moveTo).append(selectedItems);
  selectedItems.remove;
  $("#SelectRight").find("option").prop("selected", true);
});

Untuk membuat terlihat rapi si Listbox nya tambahkan sedikit style CSS seperti berikut,

select {
    width:150px;
    height:100px;
}

Untuk lebih jelasnya bisa lihat contoh di link berikut
 
Baca Selengkapnya »
Diposkan oleh di No comments:
Label:

Sunday, 6 September 2015

Menghapus Parameters url Dengan Javascript atau JQuery

Bagaimana caranya kita menghilangkan parameter pada url yang kita dan menggantinya dengan parameter yang baru dengan bantuan JQuery atau Javascript?

Misalnya kita punya alamat url seperti ini,
http://alamaturl.com?par1=asdwer&par2=poiuyt

1. Kita akan menghilangkan semua parameter yang ada di url diaatas dengan cara berikut
var url = alamaturl.com?par1=asdwer&par2=poiuyt
url = url.slice( 0, url.indexOf('?') ); 
   //hasilnya : http://alamaturl.com

2. Kita akan mengganti nama parameter ke dua (par2) beserta isinya dengan parameter ke 3 (par3),
var url = alamaturl.com?par1=asdwer&par2=poiuyt
url =  url.slice( 0, url.indexOf('&') );
url = url + "&par3=isipar3"; 
   //hasilnya : http://alamaturl.com?par1=asdwer&par3=isipar3
Baca Selengkapnya »
Diposkan oleh di No comments:
Label:

Tuesday, 28 July 2015

Membuat Menu Dengan JQuery

Hampir semua web aplikasi yang dibuat terdapat menu untuk mengelola konten sehingga memudahkan pengunjung atau user dalam menggunakannya. Posisi menu di suatu aplikasi bermacam-macam ada yang diletakan di atas, di samping kanan atau kiri. Pada kesempatan ini kita akan membuat menu sederhana dengan bantuan JQuery dan semoga kedepannya bisa dikembangkan menjadi lebih menarik dan efektif.

1. Kita buat sintak HTML nya yang berisi list menu

<ul id="menu">
  <li>Menu 1</li>
  <li>Menu 2</li>
  <li>Menu 3</li>
  <li>Menu 4
    <ul>
      <li>Sub Menu 4-1</li>
      <li>Sub Menu 4-2</li>
      <li>Sub Menu 4-3</li>
    </ul>
  </li>
  <li>Menu 5</li>
  <li>Menu 6
    <ul>
      <li>Sub Menu 6-1
        <ul>
          <li>Sub Menu 6-1-1</li>
          <li>Sub Menu 6-1-2</li>
          <li>Sub Menu 6-1-3</li>
        </ul>
      </li>
      <li>Sub Menu 6-2
        <ul>
          <li>Sub Menu 6-2-1</li>
          <li>Sub Menu 6-2-2</li>
          <li>Sub Menu 6-2-3</li>
        </ul>
      </li>
      <li>Sub Menu 6-3</li>
    </ul>
  </li>
  <li>Menu 7</li>
</ul>

2. Kemudian kita buat sintak JQuerynya sebagai berikut,

 <link rel="stylesheet" href="code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="code.jquery.com/jquery-1.10.2.js"></script>
  <script src="code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <script>
  $(function() {
    $("#menu").menu();
  });
  </script>

3. Supaya panjang kolom list tidak terlalu lebar, kita tambahkan sedikit style CSS seperti berikut,

.ui-menu { width: 200px; } 

4. Berikut sintak keseluruhan

<html>
<head>
<link rel="stylesheet" href="code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="code.jquery.com/jquery-1.10.2.js"></script>
  <script src="code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <script>
  $(function() {
    $("#menu").menu();
  });
  </script>
<style>
 .ui-menu { width: 200px; } 
</style>
</head>
<body>
<ul id="menu">
  <li>Menu 1</li>
  <li>Menu 2</li>
  <li>Menu 3</li>
  <li>Menu 4
    <ul>
      <li>Sub Menu 4-1</li>
      <li>Sub Menu 4-2</li>
      <li>Sub Menu 4-3</li>
    </ul>
  </li>
  <li>Menu 5</li>
  <li>Menu 6
    <ul>
      <li>Sub Menu 6-1
        <ul>
          <li>Sub Menu 6-1-1</li>
          <li>Sub Menu 6-1-2</li>
          <li>Sub Menu 6-1-3</li>
        </ul>
      </li>
      <li>Sub Menu 6-2
        <ul>
          <li>Sub Menu 6-2-1</li>
          <li>Sub Menu 6-2-2</li>
          <li>Sub Menu 6-2-3</li>
        </ul>
      </li>
      <li>Sub Menu 6-3</li>
    </ul>
  </li>
  <li>Menu 7</li>
</ul>
</body>
</html>

Untuk melihat demonya bisa dilihat di link Berikut
Baca Selengkapnya »
Diposkan oleh di No comments:
Label:

Monday, 27 July 2015

Drag & Drop Images / Foto Dengan JQuery

Pada artikel ini kita akan membuat fitur drag dan drop image atau foto dari satu Div ke Div yang lain dengan bantuan JQuery yaitu menggunakan plugin JQuery UI Draggable dan Droppable.
 Berikut contoh pembuatannya,
1. Buatlah sintak HTML untuk menampilkan image seperti berikut

<div id="dvSource">
    <img alt="" src="http://vignette4.wikia.nocookie.net/gundam/images/9/98/Gn-0000.jpg" />
    <img alt="" src="http://vignette4.wikia.nocookie.net/gundam/images/f/f5/Ms-05a.jpg" />
    <img alt="" src="http://vignette2.wikia.nocookie.net/gundam/images/0/01/Agx-04.jpg" />
</div>
<hr />
<div id="dvDest">
    Drop here
</div>

Pada syntak diatas terdapat 2 Div dengan id "dvSource" dan "dvDest". dvSource digunakan untuk menampilkan image yang nanti image tersebut akan kita pindahkan ke dvDest.

 2. Buatlah sintak CSS nya

<style type="text/css">
body
{
    font-family: Arial;
    font-size: 10pt;
}
img
{
    height: 100px;
    width: 100px;
    margin: 2px;
}
.draggable
{
    filter: alpha(opacity=60);
    opacity: 0.6;
}
.dropped
{
    position: static !important;
}
#dvSource, #dvDest
{
    border: 5px solid #ccc;
    padding: 5px;
    min-height: 100px;
    width: 430px;
}
</style>

3. Terakhir kita buat sintak Javascript / JQuery nya untuk menjalankan fitur drag dan dropnya

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.8.24/jquery-ui.min.js" type="text/javascript"></script>
<link href="http://code.jquery.com/ui/1.8.24/themes/blitzer/jquery-ui.css" rel="stylesheet"
type="text/css" />
<script type="text/javascript">
$(function () {
    $("#dvSource img").draggable({
        revert: "invalid",
        refreshPositions: true,
        drag: function (event, ui) {
            ui.helper.addClass("draggable");
        },
        stop: function (event, ui) {
            ui.helper.removeClass("draggable");
            var image = this.src.split("/")[this.src.split("/").length - 1];
            if ($.ui.ddmanager.drop(ui.helper.data("draggable"), event)) {
                alert(image + " dropped.");
            }
            else {
                alert(image + " not dropped.");
            }
        }
    });
    $("#dvDest").droppable({
        drop: function (event, ui) {
            if ($("#dvDest img").length == 0) {
                $("#dvDest").html("");
            }
            ui.draggable.addClass("dropped");
            $("#dvDest").append(ui.draggable);
        }
    });
});
</script>

Untuk contohnya bisa dilihat di link  berikut
Baca Selengkapnya »
Diposkan oleh di No comments:
Label:

Wednesday, 22 July 2015

Mengelompokkan Content Atau Menu Yang Sejenis Dengan JQuery Accordion

Accordion pada JQuery berfungsi untuk mengelompokkan content dalam panel-panel yang terpisah, dimana pengunjung dapat membuka dan menutup panel-panel yang diinginkan. Disamping itu, accordion juga bisa untuk mengelompokkan menu-menu yang sejenis.
Berikut contoh penggunaan Accordion

<html>
<head>
<title>Menggunakan Accordion</title>
<link type=text/css" href="jquery.ui.all.css" rel ="stylesheet" />
<script type="text/javascript" src="jquery-1.4.3.js"></script>
<script type="text/javascript" src="jquery.ui.core.js"></script>
<script type="text/javascript" src="jquery.ui.widget.js"></script>
<script type="text/javascript" src="jquery.ui.accordion.js"></script>
<script type="text/javascript">
$("document").ready(function(){
  $("#isi").accordion();
});
</script>
<body>
<div id="isi">
   <h2><a href="#">Kelompok Pertama</a></h2>
   <div>Isi content dari kelompok pertama</div>

       <h2><a href="#">Kelompok Kedua</a></h2>
   <div>Isi content dari kelompok kedua</div>

   <h2><a href="#">Kelompok Ketiga</a></h2>
   <div>Isi content dari kelompok Ketiga</div>
</div>
</body>
</html>

Lebih jelasnya bisa lihat contoh pada link Berikut



Pada contoh diatas untuk membuka isinya kita harus mengklik header, bagaimana jika kita ingin membuka isinya cukup dengan mengarahkan cursor mouse ke bagian header?
Caranya mudah saja cukup menambahkan beberapa sintak di dalam script jquery nya seperti berikut :

$("document").ready(function(){
  $("#isi").accordion({
    event:"mouseover"
  });
});

Baca Selengkapnya »
Diposkan oleh di No comments:
Label:

Tuesday, 14 July 2015

Membuat Kotak Dialog Dengan JQuery

Dalam pembuatan suatu aplikasi kita terkadang harus membuat kotak dialog untuk menampilkan pesan error atau memberikan peringatan kepada pengunjung.
Pada kesempatan ini kita akan membuat kotak dialog dengan JQuery UI. Pada kotak dialog ini kita bisa membuat content yang variatif dan juga bisa membuat content yang interaktif sepertio form.
Berikut contoh penggunaan dialog box / kotak dialog dengan JQuery UI.

<html>
<head>
<title>Kotak Dialog 1</title>
<link type=text/css" href="jquery.ui.all.css" rel ="stylesheet" />
<script type="text/javascript" src="jquery-1.4.3.js"></script>
<script type="text/javascript" src="jquery.ui.core.js"></script>
<script type="text/javascript" src="jquery.ui.widget.js"></script>
<script type="text/javascript" src="jquery.ui.dialog.js"></script>
<script type="text/javascript">
$("document").ready(function(){
 $("#pesan").dialog();
});
</script>
<body>
<div id="pesan" title="Contoh kotak dialog">
ini adalah isi dari kotak dialog, content ini bisa di rubah sesuai kebutuhan.
</div>
</body>
</html>

Baca Selengkapnya »
Diposkan oleh di No comments:
Label:

Wednesday, 8 July 2015

Replace Sebuah Karakter Pada Satu Kalimat Dengan JQuery

Misalkan kita punya kata atau string seperti berikut : "022-123456-3-1", kemudian kita menginginkan tanda "-" dihilangkan pada string tersebut sehingga menjadi "02212345631".
Berikut cara untuk mereplace kasus diatas dengan menggunakan JQuery , seperti berikut:

<script type="text/javascript">
var telepon= "022-123456-3-1";
var hasil = telepon.replace(/\-/g, ""); //Hailnya '02212345631'
</script>

Pada kasus yang lain terkadang kita mereplace satau atau lebih kata yang sama tanpa membedakan huruf besar atau kecil pada sebuah kalimat. Misalnya kita punya kaliman seperti ini "Biru warna langit dan biru warna lautan seperti birunya bola mata kamu". Pada kalimat tersebut kita akan mereplace kata "biru / Biru" dengan kata "hitam". Pada JQuery kita bisa menggunakan perintah berikut:

 <script type="text/javascript">
var kalimat= "Biru warna langit dan biru warna lautan seperti birunya bola mata kamu";
var hasil = kalimat.replace(/biru /gi, "hijau");
 </script>
Baca Selengkapnya »
Diposkan oleh di No comments:
Label:

Thursday, 2 July 2015

Substring Dan Replace Dengan JQuery

Pada artikel ini akan di jelaskan bagaimana kita bisa melakukanreplace atau substring pada suatu kalimat atau kata.

Substring
Substring adalah proses mengambil/memotong sebuah karakter pada sebuah string. Dalam JQuery perintah untuk substring dengan menggunaka .substr(), berikut contoh penggunaannya :

<script type="text/javascript">
var pesan = "latihan substring";
//Mengambil karakter dimulai pada karakter ke 3
var Contoh1 = pesan.substr(2); //Hasilnya 'tihan substring'

 //Mengambil 5 karakter di awal
var Contoh2 = pesan.substr(0,5); //Hasilnya 'latih'

 //Mengambil 5 karakter dimulai pada karakter ke 3
var Contoh3 = pesan.substr(2,5); //Hailnya 'tihan'

 //Mengambil 6 karakter terakhir 
var Contoh4 = pesan.substr(-6); //Hailnya 'string'
</script>


Untuk lebih jelasnya bisa dilihat pada link berikut


Replace
Replace adalah proses mengganti/menimpa karakter atau kata pada sebuah string atau kalimat. Bisa juga mengganti tag HTML, misalnya tag <p> menjadi tag <div>. Dalam JQuery perintah untuk replace dengan menggunakan .replace(), berikut contoh penggunaannya :

 <script type="text/javascript">
var pesan2 = "latihan replace";
//Mengganti kata latihan menjadi hasi
var Contoh5 = pesan2.replace("latihan","hasil"); //Hasilnya 'hasil replace'
</script>

Untuk lebih jelasnya bisa dilihat pada link berikut

Baca Selengkapnya »
Diposkan oleh di No comments:
Label:

Thursday, 14 May 2015

Check Uncheck All Dengan JQuery

Jika kita sedang membuat suatu aplikasi yang memiliki jumlah Checkbox yang cukup banyak, kita harus mempertimbangkan untuk membuat check / uncheck all untuk memfasilitasi jika pengguna ingin memilih semua pilihan dengan cara efektif daripada mengkliknya satu persatu. Pada pembahasan kali ini kita akan membuat semua checkbox terceklis atau tidak dengan satu kali klik menggunakan jQuery.

Kode JQuery
Untuk syntak jquery yang digunakan cukup mudah hanya memerlukan beberapa baris saja, seperti berikut,

<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
   $(document).ready(function(){
        $("#checkall").click(function(){
               $("#checkboxes").find(":checkbox").attr("checked",this.checked);
        });
    })
</script>

Kode HTML

<body>
        <div id="box">
            Silahkan Pilih (boleh lebih dari satu)
            <div id="checkboxes">
                <input type="checkbox" value="Java">Java <br>
                <input type="checkbox" value="PHP">PHP <br>
                <input type="checkbox" value="JavaScript">JavaScript <br>
                <input type="checkbox" value="HTML">HTML <br>
                <input type="checkbox" value="CSS">CSS <br>
                <hr>
                <input type="checkbox" id="checkall" >Check/Uncheck All <br>
            </div>
        </div>
  </body>

Kode CSS

<style type="text/css">
            #box{
              width:500px;
              background:#96A8E0;
              padding:10px;
              border:solid #4968CC;
              margin:0 auto;
            }

             input{
              margin-right: 10px;
            }
</style>

Demikian sedikit penjelasan untuk membuat check/uncheck all dengan menggunakan jQuery. Untuk contohnya bisa dilihat di link Berikut.

Semoga bermanfaat..
Baca Selengkapnya »
Diposkan oleh di No comments:
Label:

Tuesday, 21 April 2015

Membuat Scroll 2 div Berjalan Secara Sersamaan Dengan JQuery

Pada artikel ini akan ditampilkan contoh bagaimana kita membuat scroll pada 2 div berjalan secara bersamaan, misalnya kita memiliki 2 div yang isi dari div tersebut saling berkaitan seperti gambar berikut,

Ketika kita menggeser scroll pada div yang pertama, maka scroll pada div ke 2 bergeser secara otomatis begitu juga sebaliknya.

Pertama buatlah tag HTML seperti berikut,

<div style="overflow-y:scroll;height:150px;border: 1px solid #cee1e8;width:200px;float:left; margin-right:20px;" id="divKiri">
    <ul type="number">
        <li>List Pertama</li>
        <li>List Kedua</li>
        <li>List Ketiga</li>
        <li>List Keempat</li>
        <li>List Kelima</li>
        <li>List Keenam</li>
        <li>List Ketujuh</li>
        <li>List kedelapan</li>
    </ul>
</div>
<div style="overflow-y:scroll;height:150px;border: 1px solid #cee1e8;width:200px;" id="divKanan">
    <ul type="number">
        <li>Isi List Pertama</li>
        <li>Isi List Kedua</li>
        <li>Isi List Ketiga</li>
        <li>Isi List Keempat</li>
        <li>Isi List Kelima</li>
        <li>Isi List Keenam</li>
        <li>Isi List Ketujuh</li>
        <li>Isi List kedelapan</li>
    </ul>
</div>

Selanjutnya buatlah script JQuerynya

$(document).ready(function() {
       //perintah pada saat scroll div pertama di gerakan
       $("#divKiri").scroll(function () {
            $("#divKanan").scrollTop($("#divKiri").scrollTop());
        });
        
        //perintah pada saat scroll div kedua di gerakan
        $("#divKanan").scroll(function () {
            $("#divKiri").scrollTop($("#divKanan").scrollTop());
        });
}

Demikian contoh pembuatan scroll pada 2 div yang berjalan bersamaan, untuk lebih memahami bisa lihat contoh pada link Berikut

Semoga bermanfaat..
Baca Selengkapnya »
Diposkan oleh di No comments:
Label:

Friday, 17 April 2015

Menghapus atau mengganti isi dalam DIV dengan JQuery

Misalnya kita punya tag HTML sebagai berikut

<div id="content">
   <p>Ini adalah isi dari konten</p>
</div>
<input type="button" click="gantiDiv()" />

Pada tag diatas kita akan menghapus dan mengganti semua isi dari dalam tag <div>.

1. Menghapus isi <div>
Untuk menghapus isi dalam div anda bisa menggunakan perintah .empty() pada jQuery seperti berikut:

function gantiDiv()
{
  $("#content").empty(); //menghapus semua isi yang berada dalam div dengan id content
}

2. Mengganti isi <div>
Untuk melakukan penggantian isi di dalam div yang pertama kita lakukan adalah menghapus isi terlebih dahulu kemudian mengisi dengan konten yang baru.

function gantiDiv()
{
  $("#content").empty(); //menghapus semua isi yang berada dalam div dengan id content
  var string = "<input type='text' value=' ' name='nama' />"; //membuat textbox yang akan dimasukan ke dalam <div>
  $("#content").append(string);
}

Untuk mengganti (replace) isi pada div kita juga bisa menggunakan perintah jQuery .replaceWith().

function gantiDiv()
{
  $("#content p").replaceWith("<h2>Mengganti isi</h2>"); //mengganti isi pada tag <p> didalam tag <div> dengan id content.
}

Semoga bermanfaat..
Baca Selengkapnya »
Diposkan oleh di No comments:
Label:

Tuesday, 7 April 2015

Get & Set Attribut Pada Tag HTML dengan JQuery

Pada artikel ini akan dijelaskan bagaimana kita mengambil atau mengisikan nilai dari/ke atribut di dalam html. Pada jQuery kita bisa menarik atau mengisikan nilai dari/ke atribut seperti id, kelas, style, nama, judul, dsb di dalam tag apapun (seperti <div>, <span>, <p>, dll) dengan menggunakan metode attr() dan .prop().
Misalnya kita punya sintak HTML seperti berikut :

 <div class="myContainer" id="warpper">
Isi content
<a id="idAlamat" title="blogger" href="">Link</a> 
<input type="checkbox" id="idCheckbox" checked="checked" />
</div>

 Pada kasus diatas misalnya kita akan mengambil id dan title pada tag <a>, maka gunakan sintak JQuery sebagai berikut, 

//Mengambil id dari class myContainer dalam div
var divID = $("div.myContainer").attr("id");  //hasilnya "idAlamat"
//Mengambil title dari link (tag <a>)
 var linkTitle = $("#idAlamat").attr("title");  //hasilnya "blogger"

$("#idCheckbox").prop("checked");  //hasilnya "true" 
$("#idCheckbox").attr("checked"); //hasilnya "checked"

 Mengisikan / mengganti nilai (Set Attribute) pada tag html

//Menambahkan/ mengganti title pada sebuah link (tag <a> dengan nama id "idAlamat")
$("a#idAlamat").attr("title", "Ini link baru");

 //Membuat checkbox di check
$("#idCheckbox").prop("checked", true);


Semoga bermanfaat..
Baca Selengkapnya »
Diposkan oleh di No comments:
Label:

Monday, 6 April 2015

Membuat Auto Slideshow Sederhana Dengan JQuery

Pada artikel ini akan dijelaskan bagaimana membuat slideshow yang berjalan secara otomatis dengan batuan JQuery. Untuk isi dari slideshow bisa berupa teks, gambar atau keduanya dan pada contoh ini kita hanya menggunakan teks.

Pertama tuliskan kode HTML untuk isi dari slideshownya seperti berikut

<div id="slideshow">
      <div>Isi dari slide 1</div>
      <div>Isi dari slide 2</div>
      <div>Isi dari slide 3</div>
</div> 

Buatlah style CSS

  #slideshow {
    margin: 50px auto;
    position: relative;
    width: 240px;
    height: 240px;
    padding: 10px;
    box-shadow: 0 0 20px rgba(0,0,0,0.4);
}

#slideshow > div {
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    bottom: 10px;
}

Terakhir buat script JQuery

$("#slideshow > div:gt(0)").hide();

setInterval(function() {
  $('#slideshow > div:first')
    .fadeOut(1000)
    .next()
    .fadeIn(1000)
    .end()
    .appendTo('#slideshow');
},  3000);

Untuk melihat hasil dari contoh diatas, bisa dilihat disini

Semoga bermanfaat..
Baca Selengkapnya »
Diposkan oleh di 2 comments:
Label: ,

Tuesday, 24 March 2015

Membuat Validasi Form Dengan JQuery (2)

Pada artikel sebelumnya pernah di bahas bagaimana menerapkan validasi form menggunakan JQuery tetapi hanya dibahas beberapa aturan / rule seperti penulisan email, text harus diisi dan inputan hanya boleh angka. Pada artikel ini akan dibahas lebih banyak aturan / rule validasi nya seperti berikut, 
  1. Inputan KTP hanya boleh diisi 16 digit angka (tidak boleh diisi huruf) 
  2. Inputan TANGGAL LAHIR diisi dengan format DD/MM/YYYY 
  3. Inputan UMUR diisi dengan angka antara 0-100
  4. Inputan PASSWORD dan ULANGI PASSWORD harus sama.
Sebelum menerapkan aturan / rule validasi buatlah terlebih dahulu sintak form HTML sebagai berikut,


<form id="form" method="post" action="proses.php">
<label for="ktp">No. KTP</label>         
<input type="text" name="ktp" id="ktp" maxlength="10" size="15"/> 
<label for="umur">umur</label>
<input type="text" name="umur" id="umur" maxlength="3" size="7"/>
<label for="tgl">Tanggal Lahir</label>
<input type="text" name="tgl" id="tgl" maxlength="10" size="15"/>
<label for="pass1">Password</label>
<input type="password" name="pass1" id="pass1" size="15"/> 
<label for="pass2">Ulangi Password</label>
<input type="password" name="pass2" id="pass2" size="15"/> 
<input class="submit" type="submit" value="Daftar"/>
</form>

Seperti artikel sebelumnya, untuk menerapkan aturan / rules validasi yang telah kita tentukan, panggil fungsi validate() saat halaman pertama kali dimunculkan. Di dalam fungsi validate() kita dapat membuat aturan-aturan di atas. Sebagai langkah awal, tambahkan potongan script berikut ini di antara tag <head>

<script type="text/javascript">
$(document).ready(function() {
    $("#form").validate();
});
</script>

Pada sintak diatas, $(document).ready(function() menerangkan bahwa perintah didalamnya dijalankan ketika halaman pertama kali muncul. $("#form") merupakan id dari form yang akan di pasang aturan validasi. Selanjutnya kita akan menerapkan aturan validasi diatas.

1. Inputan KTP hanya boleh diisi 16 digit angka (tidak boleh diisi huruf)
Untuk aturan yang ini, dapat dirinci menjadi 3 rule yaitu tidak boleh huruf (digits), panjang minimal isian adalah 16 digit dan panjang maksimal juga 16digit. Kita dapat menambahkan rule pada pemanggilan fungsi validate() sehingga berubah menjadi sebagai berikut: 

$('#form').validate({
    rules: {
        ktp: {
            digits: true, minlength:10, maxlength:10 
        } 
    } 
});

2. Inputan TANGGAL LAHIR diisi dengan format DD/MM/YYYY
Untuk aturan ini, kita akan membuat format yang harus diisikan pada inputan tanggal. Jika format yang diinginkan adalah MM/DD/YYYY atau YYYY-MM-DD, Kkta dapat menggunakan rule bawaan JQuery yaitu menambahkan sintak date:true. Namun dalam rule diatas, diinginkan format tanggalnya adalah DD/MM/YYYY sehingga kita perlu membuat fungsi validator sendiri.
Perhatikan fungsi indonesianDate() beserta penerapannya berikut ini:

$(document).ready(function() {
    $('#form').validate({
            rules: {
                tgl: {
                    indonesianDate:true
                }
            }
    });
});

 $.validator.addMethod("indonesianDate",
    function(value, element) {
        return value.match(/^\d\d?\/\d\d?\/\d\d\d\d$/);
    }, 
    "Isikan tanggal dengan format DD/MM/YYYY"
);








3. Inputan UMUR diisi dengan angka antara 0-100

Pada aturan ini kita dapat menggunakan fungsi bawaan yaitu range serta batasan inputan berupa angka (digits). 



$(document).ready(function() {
    $('#form').validate({
            rules: {
                umur: {
                    digits: true,
                    range: [0, 100]
                } 
            }
    });
}); 



4. Inputan PASSWORD dan ULANGI PASSWORD harus sama  

Pada aturan ini bahwa ulangi password harus sama dengan password, untuk itu kita bisa menggunakan fungsi bawaan equalsTo.



$(document).ready(function() { 

    $('#form').validate({ 

            rules: {

                pass2: {

                    qualTo: "#pass1" 

                } 

            } 

    }); 

});



Berikut sintak keseluruhan aturan 1 - 4



$(document).ready(function() {

    $('#form').validate({ 

            rules: {

                nim : {

                    digits: true,

                    minlength:10,

                    maxlength:10 

                },

                tgl: {

                    indonesianDate:true 

                },

                umur: {

                    digits: true,

                    range: [0, 100] 

                },

                pass2: {

                    equalTo: "#pass1" 

                } 

            } 

    }); 

});



$.validator.addMethod( 

    "indonesianDate", 

    function(value, element) { 

        return value.match(/^\d\d?\/\d\d?\/\d\d\d\d$/); 

    }, 

    "Isikan tanggal dengan format DD/MM/YYYY" 

);




Baca Selengkapnya »










Diposkan oleh



di





No comments:
  

















Label:













          

        

          

        

Friday, 20 March 2015


          

        









Membuat Validasi Form Dengan JQuery











Validasi form pada web aplikasi merupakan hal yang wajid dilakukan untuk melakukan pengecekan data yang diinputkan oleh user. Jika data yang diinputkan user tersebut sudah sesuai maka akan diproses untuk disimpan di database sedangkan jika terjadi kesalahan penginputan maka data tersebut tidak akan disimpan dan dikembalikan ke user dengan muncul peringatan atau pesan yang menyatakan data tersebut tidak valid.

Ada banyak cara memvalidasi form berbasis web, namun cara yang paling 
simple dan menarik menurut penulis adalah menggunakan jQuery, lebih tepatnya menggunakan
 jquey Plugin bernama JQuery validate.

Untuk penggunaan jquery validate ikuti langkah berikut :

1. Download Jquery.js dan jquery.validate.js

2. Include-kan file js tersebut ke dalam tag <head> di HTML seperti berikut



<head> 



<title>Sample Validasi</title> 



<script type="text/javascript" src="jquery-1.10.2.js"></script> 



<script type="text/javascript" src="jquery.validate.js"></script>

</head>



3. Tuliskan script untuk menjalankan validasi di form







<script type="text/javascript">



$(document).ready(function() {



    $("#form").validate(); //id form



});



</script>





4. Buat sintak HTML nya







<form id="form" method="post" action="proses.php"> 



<label for="nama">Name</label>           



<input id="nama" name="nama" size="25" class="required" minlength="2" />



<label for="umur">umur</label> 



<input id="umur" name="umur" size="25" class="required number" /> 



<label for="email">E-Mail</label> 



<input id="email" name="email" size="25"  class="required email" /> 







<input class="submit" type="submit" value="Daftar"/> 





</form>



Untuk menempelkan validasi di tiap inputan atau tag <input>, kita harus menambahkan nama class seperti di sintak di atas. Berikut penjelasan nama class untuk validasi,

required, inputan tersebut wajib diisi.

number, yang diinputkan harus angka tidak boleh huruf.

email, yang diinputkan harus berformat email misalnya : nama@mail.com





Berikut sintak keseluruhan untuk menjalankan validasi di form inputan



<html>

<head> 



<title>Sample Validasi</title> 



<script type="text/javascript" src="jquery-1.10.2.js"></script> 



<script type="text/javascript" src="jquery.validate.js"></script>





<script type="text/javascript">



$(document).ready(function() {



    $("#form").validate(); //id form



});



</script>





</head>

<body>





<form id="form"> 



<label for="nama">Name</label>           



<input id="nama" name="nama" size="25" class="required" minlength="2" />



<label for="umur">umur</label> 



<input id="umur" name="umur" size="25" class="required number" /> 



<label for="email">E-Mail</label> 



<input id="email" name="email" size="25"  class="required email" /> 



<input class="submit" type="submit" value="Daftar"/> 



</form>

</body>

</html> 



Untuk lebih memahami bisa dilihat di link Berikut.



Semoga bermanfaat.. 




Baca Selengkapnya »










Diposkan oleh



di





2 comments:
  

















Label:













        

      









Subscribe to:
Posts (Atom)