Monthpicker dengan jQuery

Download monthpicker Disini
Download jQuery UI Disini

Pengunaan :

CSS dan JS


 <link rel="stylesheet" href="js/jquery-ui.css" />
<script src="js/jquery-1.9.1.js"></script>
<script src="js/jquery-ui.js"></script>
<script src="js/jquery.mtz.monthpicker.js"></script>
<script>

$(function(){

 options = {
    pattern:'/01'+'yyyy/mm',   
    startYear: 2012, 
    monthNames: ['Januari', 'Februari', 'Maret', 'Aprl', 'Mei', 'Juni', 'Juli', 'Agustus', 'September', 'Oktober', 'November', 'Desember']
};

   $('#bulan').monthpicker(options);


});
</script>

HTML

Pilih Bulan : <input data-start-year="2012" id="bulan" name="bulan" type="text" />





Demo : http://jsfiddle.net/abbyacakadud/TfSzM/1/
Detail : http://lucianocosta.info/jquery.mtz.monthpicker/

Keranjang Belanja Sederhana jQuery

HTML


<h3>Pilih Barang </h3>
<table border="1">
    <tr>
        <th>No.</th>
        <th>Nama Barang</th>
        <th>Harga</th>
        <th>Beli</th>
    </tr>
<tr>
    <td>1.</td>
    <td>Monitor</td>
    <td>Rp.500.000</td>
    <td><button id="beli" nama="Monitor" harga="500000">Beli</button></td>
</tr>
    <tr>
    <td>2.</td>
    <td>Printer</td>
    <td>Rp.800.000</td>
    <td><button id="beli" nama="Printer" harga="800000">Beli</button></td>
</tr>
    <tr>
        <td>3.</td>
        <td>Sandal</td>
        <td>Rp.10.000</td>
        <td><button id="beli" nama="Sandal" harga="100000">Beli</button></td>
    </tr>
</table>

<h3>Keranjang Belanja</h3>
    <div class="keranjang">
</div>

JS.

var i=0;

$("#beli").live("click", function(){

    var nama=$(this).attr('nama');

    var harga=$(this).attr('harga');

    var total=harga+harga;

    i++;

   $('.keranjang').append('<p>'+i+' | ' +nama+ ' | ' +harga +'<button class="rm">Batal</button></p>');

    

   return false;

});

$(".rm").live("click", function(){

    $(this).parents('p').remove();i--;

});

Demo : http://jsfiddle.net/abbyacakadud/bEvqJ/10//

Mengatasi Event Close Tidak Berfungsi di Dialog jQuery

$( "#konfirmasi" ).dialog({ autoOpen: false, resizable: false, height:180, modal: true, hide: 'Slide', buttons: { "Hapus": function() {    var del_id = {id : $("#del_id").val()};  $.ajax({ type: "POST", url : "/abby/index.php/home/delete", data: del_id, context: $(this), success: function(msg){   $(this).dialog('close');  $('#show').html(msg);  }   }); }, Batal: function() {   $( this ).dialog( "close" ); }  }, close: function() {   }  });

solusinya :

Ganti $(this).dialog('close');  menjadi $(this).dialog('close').remove(); 

Validasi Upload Tipe File dengan jQuery

HTML

<form action"#" method="post">
<input type="file" name="gambar" id="gambar"  />
<input id="tekan" type="submit" value="Upload"/>
</form>

JAVASCRIPT

<script type="text/javascript">

$(function(){
$('#tekan').click(function(){
 var file = $('#gambar').val(); //Ambil Value 
 var ekstensi = ['jpg','png']; //Variabel array untuk penentuan Ekstensi
  if ( file ) { 
   var ambilekstensi = file.split('.');  //Ambil Ekstensi
       ambilekstensi = ambilekstensi.reverse(); 
   if ( $.inArray ( ambilekstensi[0].toLowerCase(), ekstensi ) > -1 ){
          return true;  //jika cocok return true
        } 
   else {
          alert( 'Tipe Foto harus .jpg' );  //Alert jika ekstensi tidak cocok
        }
      }
  else
      {
         alert('Pilih Foto'); //Alert jika value null 
      }
  return false;
 });

});
</script>


Demo : http://jsfiddle.net/fgQw5/

Send Multiple Values to PHP dengan AJAX

Sekedar Catetan..

Untuk mengirim satu value dengan AJAX berbeda jika mengirim beberapa value dari data Array yang bisa dengan mudah menggunakan JQUERY .serialize(). dan berikut contoh untuk mengirim satu atau multiple value :

1 value :

var nim = $(this).attr("nim") ;  //Ambil Value atau  var nim = $('#nim').val() ;

dan untuk mengirim cukup menggunakan :

$.post("<?php echo base_url();?>data/mahasiswa/"+nim,{},

dan dari sisi server :

function mahasiswa($xxx)
{
echo "$xxx";
}

Multiple value :

var nim = $(this).attr("nim") ;  //Ambil Value atau  var nim = $('#nim').val() ;
var kode_prodi = $(this).attr("kode_prodi") ;  //Ambil Value atau  var kode_prodi = $('#kode_prodi').val() ;

dan untuk mengirim  menggunakan :

$.post("<?php echo base_url();?>data/mahasiswa/",{nim:nim,kode_prodi:kode_prodi},

dan dari sisi server :

function mahasiswa()
{
$nim=$this->input->post('nim');
$kode_prodi=$this->input->post('kode_prodi');
echo "$nim $kode_prodi ";
} 

Semoga Bermanfaat.. 

Belajar Javascript "Hello Javascript"

Sebagai awal Permulaan belajar JavaScript, kurang afdol tanpa membuat teks Hello, Pertama coba menampilkan teks Hello di dalam halaman dan title bar.

Contoh codenya seperti berikut :

<!--
http://abbyacakadud.blogspot.com
-->
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta name="generator" content="Geany 0.21" />
<script type="text/javascript">
document.write("<p>Hello, Ini Teks dengan Javascript</p>");
document.title="Hello";
</script>
</head>
<body>
</body>
</html>

Penjelasan :

document : halaman yang tampil di browser yang diwakili dengan sebuah objek

write        : method untuk menulis kedalam halaman

title          : properti untuk mengatur tag title di title bar

Hasil :

Karena hanya pengenalan saya rasa cukup ini dulu. Semoga Membantu ..