Senin, 05 Juni 2017

Mengambil nilai data dari Attribute HTML dengan javascript / jquery

Kali contoh ini kita akan mengambil nilai ditombol edit pada tabel

<button class="btn btn-success btn-xs" data-target="#myModal" data-toggle="modal" id_daftar="2" nilai="90.55,90.00,70.40,75.5" onclick="edit(this)" type="button"><i class="fa fa-check"></i>edit</button>

Data yang akan di ambil adalah data attribute id_dafta dan nilai pada attibute button edit dan memasukan kedalam field input.

berikut contohnya



berikut script lengkapnya
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</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.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


  </head>
<body>

           

          <script>
    function edit(get){
    var id_daftar = $(get).attr("id_daftar");
    var nilai = $(get).attr("nilai");
    $("#id_daftar").val(id_daftar);
 
    var res = nilai.split(",");
     $("#mat").val(res[0]);
     $("#b_ind").val(res[1]);
     $("#b_eng").val(res[2]);
     $("#ipa").val(res[3]);
 
   nilai_rata_rata();
 
    }
          function nilai_rata_rata(){
 
             var rata_rata = 0;
var id_daftar =  $("#id_daftar").val();;
             $(".hitung").each(function(){
                     var get_textbox_value = $(this).val();
         
                     if ($.isNumeric(get_textbox_value)) {
                        rata_rata += parseFloat(get_textbox_value);
                        }             
             });
             var n = rata_rata / $(".hitung").length;

             var pembulatan_nilai_rata_rata=n.toFixed(2);
             $("#n_rata_rata").val(pembulatan_nilai_rata_rata);
 
    if(parseFloat(pembulatan_nilai_rata_rata) > 65.00){
     $("#status_lulus").val("Lulus Sementara");
     $("#status_"+id_daftar).html("Lulus Sementara");
    }else{
     $("#status_lulus").val("Ditolak");
     $("#status_"+id_daftar).html("Ditolak");
    } 
             }

          $(document).ready(function(){
              $(".hitung").keyup(function(){
                   nilai_rata_rata();
              });
          });
             nilai_rata_rata();
            </script>
<table class="table table-bordered table-striped" id="example1">
                <thead>
                <tr>
                  <th>No</th>
                  <th>Nama</th>
                  <th>Tempat Tanggal Lahir</th>
                  <th>Sekolah Asal</th>
                  <th>Status</th>
                  <th>Action</th>
                </tr>
                </thead>
                <tbody>
    <tr>
                  <td>1</td>
                  <td>anton</td>
                  <td>Bandung 20-01-2011</td>
                  <td>Smp 1</td>
                  <td id="status_1" align="center" class="bold"><span style="color: red">Ditolak</span></td>
                  <td align="center">
   
                     <button onclick="edit(this)" id_daftar="1" nilai="80.55,70.00,80.40,80.5" data-toggle="modal" type="button" class="btn btn-success btn-xs" data-target="#myModal"><i class="fa fa-check"></i>edit</button>
       </td>
                </tr>
    <tr>
                  <td>2</td>
                  <td>agus</td>
                  <td>Banjar 04-04-2011</td>
                  <td>Smp 2</td>
                  <td id="status_2" align="center" class="bold"><span style="color: red">Lulus Sementara</span></td>
                  <td align="center">
   
                     <button onclick="edit(this)" id_daftar="2" nilai="90.55,90.00,70.40,75.5" data-toggle="modal" type="button" class="btn btn-success btn-xs" data-target="#myModal"><i class="fa fa-check"></i>edit</button>
       </td>
                </tr>
   
    <tr>
                  <td>3</td>
                  <td>agus</td>
                  <td>Bandung 02-02-2011</td>
                  <td>Smp 3</td>
                  <td id="status_3" align="center" class="bold"><span  style="color: red">Lulus Sementara</span></td>
                  <td align="center">
   
                     <button onclick="edit(this)" id_daftar="3" nilai="60.55,90.00,90.40,90.5" data-toggle="modal" type="button" class="btn btn-success btn-xs" data-target="#myModal"><i class="fa fa-check"></i>edit</button>
       </td>
                </tr>   
                </tbody>
              </table>   
 

<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Mengambil nilai data dari Attribute HTML </h4>
      </div>
      <div class="modal-body">
   <div class="row">
    <form class="form-horizontal">

<div class="col-sm-7">
  <div class="form-group">
    <label class="control-label col-sm-7" for="mat">ID daftar </label>
    <div class="col-sm-4">
      <input type="text" class="form-control " id="id_daftar" name="id_daftar" value="">
    </div>
  </div>
  <div class="form-group">
    <label class="control-label col-sm-7" for="mat">Matematika </label>
    <div class="col-sm-4">
      <input type="text" class="form-control hitung" id="mat" name="mat"  placeholder="Nilai" value="">
    </div>
  </div>

    <div class="form-group">
    <label class="control-label col-sm-7" for="b_ind">Bahasa indonesia  </label>
    <div class="col-sm-4">
      <input type="text" class="form-control hitung" id="b_ind" name="b_ind" placeholder="Nilai" value="">
    </div>
 </div>

    <div class="form-group">
    <label class="control-label col-sm-7" for="b_eng">Bahasa inggris  </label>
    <div class="col-sm-4">
      <input type="text" class="form-control hitung" id="b_eng" name="b_eng" placeholder="Nilai" value="">
    </div>
 </div>

    <div class="form-group">
    <label class="control-label col-sm-7" for="ipa">Ilmu pengetahuan alam</label>
    <div class="col-sm-4">
      <input type="text" class="form-control hitung" id="ipa" name="ipa" placeholder="Nilai" value="">
    </div>
 </div>


</div>

<div class="col-sm-5">
    <div class="form-group">
    <label class="control-label col-sm-12" for="n_rata_rata">Nilai rata rata  </label>
    <div class="col-sm-12">
      <input  readonly type="text" class="form-control" id="n_rata_rata" placeholder="Nilai rata rata ">
    </div>
  </div>
</div>

<div class="col-sm-5">
    <div class="form-group">
    <label class="control-label col-sm-12" for="n_rata_rata">Status  </label>
    <div class="col-sm-12">
      <input  readonly type="text" class="form-control" id="status_lulus"  >
    </div>
  </div>
</div>
</form>
</div>
  <span class="btn btn-default">Submit</span>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>

  </div>
</div>
</body>
</html>

Sabtu, 03 Juni 2017

inline edit kolom table dengan javascript / jquery

Sekarang saya lagi belajar membuat edit kolom pada table html dengan menggunakan javascript / jquery,  kali ini saya buat dua alternatif. alternatif kesatu dengan menggunakan input dan alternatif kedua tanpa input (langsung didalam kolom table).




Berikut script lengkapnya.
Maaf ya om, tante, kakak, mba, teteh, scriptnya berantakan, maklum masih pemula hehe.
mudah-mudahan manfaat.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>edit kolom table jquery </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.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


  </head>
<body>

<style>
  .modal_edit_kolom  {width:80%;}
  .edit_kolom{cursor: pointer;}
  .border_table{border: 2px solid; padding:10px; margin:12px;}
</style>
 <script>

$(document).ready(function(){
    $(".edit_kolom").dblclick(function(){
      var get_id =  $(this).attr("id");
 var text_kolom =  $("#"+get_id).html();
 var x=$("#input_edit"+get_id).html();
 if (x === undefined) {

 $("#"+get_id).html("<input type='text'    id='input_edit"+get_id+"'  ><span onclick='ganti_text(this)' edit_id='"+get_id+"' id='submit"+get_id+"' class='btn btn-xs btn-primary submit_edit'>Submit</span>");
  $("#input_edit"+get_id).val(text_kolom);

 }
    });

});
function ganti_text(get){
      var id_kolom =  $(get).attr("edit_id");
 var text_edit =  $("#input_edit"+id_kolom).val();
 $("#"+id_kolom).html(text_edit);
 //JIKA PERLU UPDATE KE DATABASE  GUNAKAN AJAX DISINI

}


function Edit_kolom(edit_data) {
$(edit_data).css("background","#D5f5f5");
}

function simpan_edit_kolom(edit_data) {
$(edit_data).css("background","#FDFDFD");
$("#status_edit").html("data "+edit_data.innerHTML+" berhasil diupdate");

//JIKA PERLU UPDATE KE DATABASE  GUNAKAN AJAX DISINI

}
</script>
 
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#modal_edit_kolom">Klik disini untuk demo edit kolom table jquery  </button>
<!-- Modal -->
<div id="modal_edit_kolom" class="modal fade" role="dialog">
  <div class="modal-dialog modal_edit_kolom">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">inline edit column  table jquery</h4>
      </div>
      <div class="modal-body">
 <div class="row">
 <div class="col-sm-12">
 <div class="col-sm-12 border_table">
 <h4 style="color: green;">Silahkan double click kolom yang akan di edit</h4>
  <table class="table table-bordered">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="edit_kolom" id="r1c1">kiki</td>
        <td class="edit_kolom" id="r1c2">lutfie</td>
        <td class="edit_kolom" id="r1c3">kiki@example.com</td>
      </tr>
      <tr>
        <td class="edit_kolom" id="r2c1">Mary</td>
        <td class="edit_kolom" id="r2c2">Moe</td>
        <td class="edit_kolom" id="r2c3">mary@example.com</td>
      </tr>
      <tr>
        <td class="edit_kolom" id="r3c1">July</td>
        <td class="edit_kolom" id="r3c2">Dooley</td>
        <td class="edit_kolom" id="r3c3">july@example.com</td>
      </tr>
    </tbody>
</table>
</div>
</div>

<div class="col-sm-12">
<div class="col-sm-12 border_table">
 <h4 style="color: green;">Silahkan  klik kolom yang akan di edit</h4>

 <h4 id="status_edit" style="color: blue;"></h4>
  <table class="table table-bordered">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td contenteditable="true" onblur="simpan_edit_kolom(this)"  onClick="Edit_kolom(this);" id="2r1c1">kiki</td>
        <td contenteditable="true" onblur="simpan_edit_kolom(this)"  onClick="Edit_kolom(this);" id="2r1c2">lutfie</td>
        <td contenteditable="true" onblur="simpan_edit_kolom(this)"  onClick="Edit_kolom(this);" id="2r1c3">kiki@example.com</td>
      </tr>
      <tr>
        <td contenteditable="true" onblur="simpan_edit_kolom(this)"  onClick="Edit_kolom(this);" id="2r2c1">Mary</td>
        <td contenteditable="true" onblur="simpan_edit_kolom(this)"  onClick="Edit_kolom(this);" id="2r2c2">Moe</td>
        <td contenteditable="true" onblur="simpan_edit_kolom(this)"  onClick="Edit_kolom(this);" id="2r2c3">mary@example.com</td>
      </tr>
      <tr>
        <td contenteditable="true" onblur="simpan_edit_kolom(this)"  onClick="Edit_kolom(this);" id="2r3c1">July</td>
        <td contenteditable="true" onblur="simpan_edit_kolom(this)"  onClick="Edit_kolom(this);" id="2r3c2">Dooley</td>
        <td contenteditable="true" onblur="simpan_edit_kolom(this)" onClick="Edit_kolom(this);" id="2r3c3">july@example.com</td>
      </tr>
    </tbody>
</table>
</div>
</div>
</div>

      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>

  </div>
</div>
</body>
</html>

Selasa, 30 Mei 2017

Menghitung nilai rata rata dengan javascript / jquery, menggunakan modal bootstrap.

sekarang kita bahas tentang Menghitung nilai rata rata dengan javascript /  jquery, menggunakan modal bootstrap. Ga usah basa basi  berikut demo dan contoh scriptnya.





dan ini scriptnya :

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Menghitung nilai rata rata dengan javascript /  jquery</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.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

  </head>
<body>


<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Klik disini untuk demo</button>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Menghitung nilai rata rata dengan javascript /  jquery</h4>
      </div>
      <div class="modal-body">
 <div class="row">
    <form class="form-horizontal">

<div class="col-sm-7">
  <div class="form-group">
    <label class="control-label col-sm-7" for="mat">Matematika </label>
    <div class="col-sm-4">
      <input type="text" class="form-control hitung" id="mat" name="mat"  placeholder="Nilai" value="8.00">
    </div>
  </div>

    <div class="form-group">
    <label class="control-label col-sm-7" for="b_ind">Bahasa indonesia  </label>
    <div class="col-sm-4">
      <input type="text" class="form-control hitung" id="b_ind" name="b_ind" placeholder="Nilai" value="8.00">
    </div>
</div>

    <div class="form-group">
    <label class="control-label col-sm-7" for="b_eng">Bahasa inggris  </label>
    <div class="col-sm-4">
      <input type="text" class="form-control hitung" id="b_eng" name="b_eng" placeholder="Nilai" value="8.00">
    </div>
</div>

    <div class="form-group">
    <label class="control-label col-sm-7" for="ipa">Ilmu pengetahuan alam</label>
    <div class="col-sm-4">
      <input type="text" class="form-control hitung" id="ipa" name="ipa" placeholder="Nilai" value="8.00">
    </div>
</div>


</div>

<div class="col-sm-5">
    <div class="form-group">
    <label class="control-label col-sm-12" for="n_rata_rata">Nilai rata rata  </label>
    <div class="col-sm-12">
      <input  readonly type="text" class="form-control" id="n_rata_rata" placeholder="Nilai rata rata ">
    </div>
  </div>
</div>
<script>
function nilai_rata_rata(){
 var rata_rata = 0;
 $(".hitung").each(function(){
           var get_textbox_value = $(this).val();

           if ($.isNumeric(get_textbox_value)) {
              rata_rata += parseFloat(get_textbox_value);
              }                
 });
 var n = rata_rata / $(".hitung").length;
 var pembulatan_nilai_rata_rata=n.toFixed(2);
 $("#n_rata_rata").val(pembulatan_nilai_rata_rata)
 }

$(document).ready(function(){
    $(".hitung").keyup(function(){
         nilai_rata_rata();
    });
});
 nilai_rata_rata();
</script>
</form>
</div>
 <button type="submit" class="btn btn-default">Submit</button>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>

  </div>
</div>
</body>
</html>

sekian contoh simplenya.
Semoga bermanfaat !


Rabu, 24 Mei 2017

captcha dengan javascript canvas HTML5:

WIHHH lama buanget ga nulis....
iseng-iseng bikin captcha dengan javascript canvas HTML5:



langsung aja tu de poin ya om 😂😂😂😂😂
ini demonya
ini scriptnya:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
<script>

function submit(){
var no_acak = document.getElementById("captcha").value;

var x = document.getElementById("captcha").getAttribute("c");
if(no_acak == x){
alert('captcha yang anda masuk benar!');
//return true;
return false;
}else{
alert('captcha yang anda masuk salah!');
acak_captcha();
return false;
}

}
function acak_captcha(){
var no_acak = Math.floor((Math.random() * 1000000) + 1);
var posisi_x = Math.floor((Math.random() * 50) + 1);
var posisi_y = Math.floor((Math.random() * 50) + 10);
    var c = document.getElementById("myCanvas");
    var canvas = c.getContext("2d");
canvas.clearRect(0, 0, 150, 60);
var gradient=canvas.createLinearGradient(0,0,c.width,0);
gradient.addColorStop("0","blue");
gradient.addColorStop("1","green");
canvas.fillStyle=gradient;
canvas.beginPath();
canvas.rect(0, 0, 150, 60);
canvas.fill();

var ctx = c.getContext("2d");
ctx.fillStyle="#000000";
ctx.font = '18px serif';
ctx.strokeText(no_acak, posisi_x, posisi_y);
document.getElementById("captcha").setAttribute("c", no_acak);
}
window.onload = function() {
acak_captcha();

}
</script>
</head>
<body>

<form onsubmit="return submit()" >
<p><h1>captcha dengan javascript canvas HTML5:</h1></p>
<p>Nama : <input required type="text" name="nama" value="">
<p>Captcha : <input required type="text" name="captcha" id="captcha" value="">
<p><canvas id="myCanvas" width="150" height="60" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.
</canvas>
<p>
</form>
 <input onclick="submit()"; type="button" value="Submit">
  <input onclick="acak_captcha()" type="button" value="Reset captcha">

<p><strong>Note:</strong> canvas tag is not supported in Internet
Explorer 8 and earlier versions.</p>

</body>
</html>

berikut hasilnya



Pertanyaannya apakah captcha dengan javascript ini aman? jawaban sudah pasti TIDAK aman apalagi di browser desktop, tapi mudah-mudahan bermanfaat, hehe namanya juga iseng iseng hahaha. next deh  sy buat yg lebih aman