Simple Upload Image jQuery

HTML

<form>
 <label>Image</label>
 <input type="file" name="images" id="images"  />
<button id="save">
</form>

JS

$(function(){
var   input = document.getElementById("images"),
        formdata = false;
        formdata = new FormData();

  $("#save").click(function() {
         
       var i = 0, len = input.files.length, img, reader, file;
   
        for ( ; i < len; i++ ) {
            file = input.files[i];
   
            if (!!file.type.match(/image.*/)) {
                if ( window.FileReader ) {
                    reader = new FileReader();
                    reader.readAsDataURL(file);
                }
                if (formdata) {
                    formdata.append("images[]", file);
                }
            }   
        }
   
        if (formdata) {
            $.ajax({
                url: "<?php echo base_url('main/save')?>",
                type: "POST",
                data: formdata,
                processData: false,
                contentType: false,
            });
        }

  });
});


PHP

function save() {  
   foreach ($_FILES["images"]["error"] as $key => $error) {
    if ($error == UPLOAD_ERR_OK) {
        $name                = $_FILES["images"]["name"][$key];
        $nama_file           = $_FILES['images']['name'][$key]; 
        $namafolder          = 'uploads/';
        move_uploaded_file( $_FILES["images"]["tmp_name"][$key],$namafolder.'/'.$nama_file);
      }
    }
       
  }

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.. 

Membuat Gallery Slide dengan Jquery

Daripada pusing , belum jelas mau posting apa, mending kita belajar membuat Gallery Slide dengan Jquery. Oke berikut screenshootnya :

Selanjutnya berikut caranya :

1. Buat 3 buah folder yaitu css, gambar, dan js . 

2. Kita buat 2 buah file css dan simpan di dalam folder css :

scrollable-button.css

/* this makes it possible to add next button beside scrollable */
.scrollable {
    float:left;   
}
/* prev, next, prevPage and nextPage buttons */
a.browse {
    background:url(img/hori_large.png) no-repeat;
    display:block;
    width:30px;
    height:30px;
    float:left;
    margin:40px 10px;
    cursor:pointer;
    font-size:1px;
}
/* right */
a.right                 { background-position: 0 -30px; clear:right; margin-right: 0px;}
a.right:hover         { background-position:-30px -30px; }
a.right:active     { background-position:-60px -30px; }
/* left */
a.left                { margin-left: 0px; }
a.left:hover          { background-position:-30px 0; }
a.left:active      { background-position:-60px 0; }

/* up and down */
a.up, a.down        {
    background:url(img/vert_large.png) no-repeat;
    float: none;
    margin: 10px 50px;
}
/* up */
a.up:hover          { background-position:-30px 0; }
a.up:active          { background-position:-60px 0; }

/* down */
a.down                 { background-position: 0 -30px; }
a.down:hover          { background-position:-30px -30px; }
a.down:active      { background-position:-60px -30px; }
/* disabled navigational button */
a.disabled {
    visibility:hidden !important;       
}    

scrollable-horizontal.css

/*
    root element for the scrollable.
    when scrolling occurs this element stays still.
*/
.scrollable {
    /* required settings */
    position:relative;
    overflow:hidden;
    width:450px;
    height:90px;
    /* custom decorations */
    border:1px solid #ccc;
    background:url(img/h300.png) repeat-x;
}
/*
    root element for scrollable items. Must be absolutely positioned
    and it should have a extremely large width to accomodate scrollable items.
    it's enough that you set the width and height for the root element and
    not for this element.
*/
.scrollable .items {
    /* this cannot be too large */
    width:20000em;
    position:absolute;
    clear:both;
}
/* single scrollable item */
.scrollable img {
    float:left;
    margin:3px 5px 20px 21px;
    background-color:#fff;
    padding:2px;
    border:1px solid #ccc;
    cursor:pointer;
    width:80px;
    height:80px;   
    -moz-border-radius:4px;
    -webkit-border-radius:4px;
}
/* active item */
.scrollable .active {
    border:2px solid #000;
    z-index:9999;
    position:relative;
}
    /* end scrollable styling */
body {
    font-family:"Lucida Grande","Lucida Sans Unicode","bitstream vera sans","trebuchet ms",verdana;
}
/* get rid of those system borders being generated for A tags */
a:active {
  outline:none;
}
:focus {
  -moz-outline-style:none;
}

3. Download file jquery berikut di  
sini dan ekstrak di folder js.

4. Masukan gambar yang akan di jadikan slide kedalam folder gambar.

5. Buat file gallery.html


gallery.html

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="generator" content="Geany 0.18" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <link rel="stylesheet" type="text/css" href="css/scrollable-horizontal.css">
    <link rel="stylesheet" type="text/css" href="css/scrollable-buttons.css">
    <script type="text/javascript" src="js/jquery.tools.min.js"></script>
    <script type="text/javascript"> 
      $(document).ready(function(){
          $("div.scrollable").scrollable();
        $(".items img").click(function() {
             // hilangkan _t dibelakang nama file foto untuk foto yang besar
             // misal foto kecil (air_t.jpg) dihilangkan _t untuk foto besar menjadi (air.jpg)
             var url = $(this).attr("src").replace("_t", "");
             // untuk area gambar besar diberikan efek fade (semi transparan)
             var wrap = $("#image_wrap").fadeTo("medium", 0.5);
             // load foto
           var img = new Image();
              img.onload = function() {
              wrap.fadeTo("fast", 1);
              wrap.find("img").attr("src", url);
             };
             img.src = url;
        }).filter(":first").click();
        });
      </script>
    <style>
        /* style untuk image wrapper (preview image)  */
        #image_wrap {
             width:470px;
             margin:15px 0 15px 30px;
             padding:0px 0;
             text-align:center;
             background-color:#transparent;
             border:2px solid #fff;
             outline:1px solid #ddd;
             -moz-ouline-radius:4px;
             -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
        }
    </style>
</head>
<body>
<div id="text">
<!-- tempat untuk menampung foto yang besar -->
      <div id="image_wrap">
         <!-- background untuk foto berupa gambar blank.gif -->
         <img src="images/blank.gif" width="200" height="200" />
      </div>
      <!-- aksi untuk halaman sebelumnya -->
      <a class="prevPage browse left"></a>
      <!-- elemen untuk scrollable -->
      <div class="scrollable">   
         <!-- elemen untuk items -->
         <div class="items">
          <!-- foto ke 1-5 -->
            <img src="gambar/linux-mint.png">
            <img src="gambar/archlinux-logo.png">
            <img src="gambar/debian-logo2.jpg">
            <img src="gambar/gentoo-linux.jpg">
            <img src="gambar/mandriva-logo.jpg">
            <!-- foto ke 5-10 -->
            <img src="gambar/slackware_logo.png">
            <img src="gambar/start_here_suse.png">
            <img src="gambar/zenwalk-logo.jpg">
            <img src="gambar/linux-mint.png">
            <img src="gambar/gentoo-linux.jpg">   
      </div>   
    </div>
    <!-- aksi untuk halaman selanjutnya -->
    <a class="nextPage browse right"></a>
    <br clear="all">
</div>
</body>
</html>

6. Ganti tulisan berwarna merah sesuai dengan nama gambar yang ada di folder gambar.

7. Selesai

Selamat Berkreasi..