Bambang Scrap's Code » Javascript http://bambangriadi.com/br Mengumpulan Sesuatu Yang Berserakan Tue, 01 Jun 2010 02:06:11 +0000 http://wordpress.org/?v=2.5 en Implementasi ajax dalam mengirim isi textarea kedalam file http://bambangriadi.com/br/2009/06/implementasi-ajax-dalam-mengirim-isi-textarea-kedalam-file/ http://bambangriadi.com/br/2009/06/implementasi-ajax-dalam-mengirim-isi-textarea-kedalam-file/#comments Wed, 03 Jun 2009 18:19:55 +0000 admin http://bambangriadi.com/br/?p=229 Sebenarnya tulisan ini dari request di komentar, yang minta contoh penggunaan ajax.

kali ini saya tidak akan ngomong panjang tentang ajax, karena di tulisan sebelum2nya sudah dibahas detail teorinya, judul disinikan implementasi, jadi praktek only. oke

Visi tulisan ini adalah:
- implementasi ajax dengan prototype.js
- mengirim nilai textarea
- menulisi file dengan ajax
- mendeteksi respon

Misi tulisan ini adalah:
1. memanggil ajax
2. membuat form texarea
3. membuat script request
4. membuat file baru yg berisi script penampung proses
5. mendeteksi keluaran

File utama.php

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Mengirim isi textarea ke dalam file</title>
<script src="prototype.js" type="text/javascript"></script>
<script language="javascript">
      function validasi(){
      if($("listData").value == ""){
        alert('Textarea jangan kosong doonkkk');
        $("listData").focus();
        return false;
      }
      return true;
      }
      function listData(){
          if($("listData").value != ""){
              var dListData = $('listData').value;
              var text = dListData.replace(/\s+$/g,"");
              var splitq = text.split("\n");
    
                  var jumBaris = splitq.length;
                  URL='tulisTextFile.php?jumBaris='+jumBaris+'&dListData='+splitq+'&rd=65765s';
                   new Ajax.Request(URL,{
                       method: 'get',
                       onSuccess: function(transport){
              if(transport.responseText){
                              var responData = transport.responseText;
                              var hasilx = new Array();
                              hasilx = responData.split("|");
                alert('terima hasil:');
                alert('jenis hasil'+hasilx[0]);
                alert('status respon'+hasilx[1]);
              } else {
                alert('respon gagal');
              }
                       }, onFailure: function(transport){
              alert('request gagal');
                       }, onLoading: function(transport){
              alert('masih loading');
                       }
                   });
          }  else {
      alert('gagal, teks jangan kosong');
      }
      }
 
</script>
 
</head>
<body>
  <table>
  <tr>
  <td>
    <textarea name="listData" id="listData" cols="109" rows="3" style="font-size:11px;font-family: Tahoma;text-align:left;"></textarea>
  </td>
  </tr>
  <tr>
  <td>
    <input type="submit" name="prosesdata" value="Kirim ke File" id="prosesData" onClick="if(validasi()) { kirimData(); }"/>
  </td>
  </tr>
  </table>
 
</body>
</html>

Lalu buat file baru dengan nama tulisTextFile.php

< ?php
$jumBaris = $_GET['jumBaris'];
$dListData = $_GET['dListData'];
$explodeList = explode(",",$dListData);
$isi = "";
foreach($explodeList as $index=>$nil){
    $isi .= "".$nil."\r\n";
}
 
    $namaFileDigit = $jumBaris."Digit.txt";
    @unlink($namaFileDigit);
    $handle = @fopen($namaFileDigit, 'a+');
    
    if(@fwrite($handle, $isi)){
    echo '1|Sukses isi file';
  } else {
    echo '0|Gagal isi file';
  }
 
    @fclose($handle);
?>

silahkan jalankan di browser anda dengan memanggil localhost/utama.php
isi textarea, lalu tekan tombol Kirim ke File…

Semoga sukses, kalo error gimana ya.. semoga aja tidak okeyyy…
pengin njelasin tapi cape,,,,

]]> http://bambangriadi.com/br/2009/06/implementasi-ajax-dalam-mengirim-isi-textarea-kedalam-file/feed/ Manipulasi tabel dengan javascript http://bambangriadi.com/br/2008/09/manipulasi-tabel-dengan-javascript/ http://bambangriadi.com/br/2008/09/manipulasi-tabel-dengan-javascript/#comments Sun, 14 Sep 2008 19:00:54 +0000 admin http://www.bambangriadi.com/br/?p=90 Tulisan ini sangatlah sederhana, dan memang buat pemula yang ingin lebih memahami javascript, khususnya tentang management table, konsep dasarnya adalah tetap pada DOM HTML.

Dibawah ini adalah kode javascript untuk melakukan perubahan isi tabel, yaitu menambah baris baru dan isi kolomnya, lho kenapa kok pakai javascript yang notabene client side, kok ga pake php aja? Pertanyaan bagus, konsep mendinamiskan HTML atau yang biasa disebut DHTML merupakan perangkat utama yang dipakai CMS modern saat ini, katakanlah wordpress, google, yahoo, dsb. Javascript digunakan untuk merubah-rubah HTML nya dan selanjutnya diproses dengan PHP atau bahasa server side lainnya.

Yang biasa dilakukan javascript untuk berkomunikasi dengan database di server adalah konsep nya ajax, itu akan lebih rumit jika anda tidak memahami javascript dan DOM HTML tentunya, OK.

Nah berikut adalah script dan sedikit penjelasannya, semoga membantu pemahaman anda :
Quick Code


< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Manipulasi tabel dengan Javascript</title>
</head>
<script type="text/javascript">
function tambahBaris(){
   //ambil id tabel dg perintah getElementById
   tabelId = document.getElementById("tblMahasiswa");
   //cari banyaknya baris
   barisTerakhir = tabelId.rows.length;
   //penambahan satu baris (tr) pada baris terakhir tabel dengan perintah insertRow
   baris = tabelId.insertRow(barisTerakhir);
 
   //tambahkan 4 kolom (td) pada baris (tr) yang barusan ditambahkan, dengan perintah insertCell
   kolomNo = baris.insertCell(0);
   kolomNama = baris.insertCell(1);
   kolomJurusan = baris.insertCell(2);
   kolomAngkatan = baris.insertCell(3);
  
   //isi masing2 kolom dengan nilai yang ada pada teks input, diambil dengan perintah getElementById(id).value
   kolomNo.innerHTML = document.getElementById("no").value;
   kolomNama.innerHTML = document.getElementById("nama").value;
   kolomJurusan.innerHTML = document.getElementById("jurusan").value;
   kolomAngkatan.innerHTML = document.getElementById("angkatan").value;
}
</script>
<body>
<p>
<strong>Tambah baris : </strong>
</p>
<table border="0" cellspacing="0" cellpadding="2">
<form method="get" id="formTambah">
  <tr>
    <td>No</td>
    <td><input name="no" id="no" type="text" /></td>
  </tr>
  <tr>
    <td>Nama</td>
    <td><input name="nama" id="nama" type="text" /></td>
  </tr>
  <tr>
    <td>Jurusan</td>
    <td><input name="jurusan" id="jurusan" type="text" /></td>
  </tr>
  <tr>
    <td>Angkatan</td>
    <td><input name="angkatan" id="angkatan" type="text" /></td>
  </tr>
  <tr>
    <td colspan="2">
    <input type="button" onclick="javascript:tambahBaris();" value="Tambah Baris" />
    <input type="reset" value="Reset" />
    </td>
  </tr>
</form>
</table>
<h3>Nama Mahasiswa</h3>
<table id="tblMahasiswa" border="1" cellspacing="0" cellpadding="2" style="border-collapse:collapse;">
  <tr align="center">
    <td><strong>No</strong></td>
    <td><strong>Nama</strong></td>
    <td><strong>Jurusan</strong></td>
    <td><strong>Angkatan</strong></td>
  </tr>
  <tr>
    <td>1</td>
    <td>Bambang Riadi</td>
    <td>Matematika</td>
    <td>2002</td>
  </tr>
  <tr>
    <td>2</td>
    <td>Deni Permana</td>
    <td>Fisika</td>
    <td>2003</td>
  </tr>
</table>
</body>
</html>

Nah, mudah kan.
Setelah dijalankan, maka dengan mudah kita dapat menambah baris dan nilainya, selanjutnya bisa di tangani dengan PHP atau ajax untuk mengirimnya ke server.

kode javascript di atas bisa juga diganti menjadi seperti dibawah ini :
Quick Code


<script type="text/javascript">
function tambahBaris(){
   //ambil id tabel dg perintah getElementById
   tabelId = document.getElementById("tblMahasiswa");
   //ambil id form dg perintah getElementById
   formId = document.getElementById("formTambah");
   //cari banyaknya baris
   barisTerakhir = tabelId.rows.length;
   //penambahan satu baris (tr) pada baris terakhir tabel dengan perintah insertRow
   baris = tabelId.insertRow(barisTerakhir);
   //hitung banyaknya kolom pada baris tabel
   jumKolom = tabelId.rows[0].cells.length;
   //lakukan iterasi dari 0 sampai jumKolom
   for(i=0;i<jumkolom ;i++){
       //bikin kolom ke i
     kolom = baris.insertCell(i);
       //isi kolom ke i dengan nilai element pada form
     kolom.innerHTML = formId.elements[i].value;
   }
}
</script>
</jumkolom></script>

Jika dieksekusi hasilnya sama saja, cuma caranya yang bawah dibikin lebih simple, selamat mencoba dan mengembangkannya.. :D

Lihat Demo
Atau Download

]]> http://bambangriadi.com/br/2008/09/manipulasi-tabel-dengan-javascript/feed/ Tutorial Javascript : Membuat check all dan uncheck all http://bambangriadi.com/br/2008/09/tutorial-javascript-membuat-check-all-dan-uncheck-all/ http://bambangriadi.com/br/2008/09/tutorial-javascript-membuat-check-all-dan-uncheck-all/#comments Sun, 07 Sep 2008 17:40:24 +0000 admin http://www.bambangriadi.com/br/?p=81 Tulisan ini cukup sederhana yaitu bagaimana kita membuat tombol untuk menangani checklist yang banyak, check all dan uncheck all.
Disini saya membuatnya dengan javascript, silahkan lihat kode nya dibawah ini :
Quick Code


< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Latihan Javascript :: membuat check all dan uncheck all</title>
</head>
 
<script type="text/javascript">
function Check(){
         //Ambil semua elemen dalam id formCheck
         allCheckList = document.getElementById("formCheck").elements;
         //Hitung banyaknya elemen
         jumlahCheckList = allCheckList.length;
         //Jika tombolCheck bernilai "Check All"
         if(document.getElementById("tombolCheck").value == "Check All"){
            for(i = 0; i < jumlahCheckList; i++){
                //semua elemen ke-i checkbox nya diset true (dicentang)
                allCheckList[i].checked = true;
            }
            //Set nilai tombolCheck menjadi "Uncheck All"
            document.getElementById("tombolCheck").value = "Uncheck All";
         //Jika tombolCheck tidak bernilai "Check All" (sudah dirubah menjadi Uncheck All)
         }else{
            for(i = 0; i < jumlahCheckList; i++){
                //semua elemen ke-i checkbox nya diset false (tidak dicentang)
                allCheckList[i].checked = false;
         }
            //Set nilai tombolCheck menjadi "Check All"
            document.getElementById("tombolCheck").value = "Check All";
         }
}
</script>
 
< ?php
$hobi = $_POST['hobi'];
if(empty($hobi)){
?>
 
<b>Silahkan Pilih Hobi Anda :</b>
<form id="formCheck" method="POST" action="check_all.php">
<input type="checkbox" name="hobi[1]" value="Baca Koran" />Baca Koran<br />
<input type="checkbox" name="hobi[2]" value="Memancing" />Memancing<br />
<input type="checkbox" name="hobi[3]" value="Bikin Susah Orang" />Bikin Susah Orang<br />
<input type="checkbox" name="hobi[4]" value="Menulis" />Menulis<br />
<input type="checkbox" name="hobi[5]" value="Demonstrasi" />Demonstrasi<br />
 
<input type="button" id="tombolCheck" value="Check All" onClick="Check();"/>
<input type="submit" value="Submit" />
</form>
 
< ?php
}
 
if(is_array($hobi)){
   echo '<b>Hobi yang anda pilih : <br />';
   foreach($hobi as $indek=>$namahobi){
      echo 'Hobi indek '.$indek.' : '.$namahobi.'<br />';
   }
   echo '<a href="check_all.php">Back &raquo;</a>';
}
?>
 
</script></html>

Silahkan lihat Demo nya disini
Atau Download disini

]]> http://bambangriadi.com/br/2008/09/tutorial-javascript-membuat-check-all-dan-uncheck-all/feed/ Memformat digit angka decimal dengan javascript http://bambangriadi.com/br/2008/08/memformat-angka-decimal-dengan-javascript/ http://bambangriadi.com/br/2008/08/memformat-angka-decimal-dengan-javascript/#comments Thu, 14 Aug 2008 20:16:17 +0000 admin http://www.bambangriadi.com/br/?p=60 Kasus ini terjadi ketika saya mempunya angka decimal yang mempunyai banyak digit di belakang koma,
Contohnya 2.12334234234, nah bagaimana kita membulatkan angka di belakang koma tersebut dalam javascript. Kalau di PHP menggunakan fungsi number_format($angka,$digit) namun di javascript saya kebingungan mencari fungsinya. di manualnya gak ketemu-ketemu.

Daripada repot mencari fungsi format desimal, untuk membuat dua digit di belakang koma
pertama saya mengalikan nilai tersebut dengan 100 (2.12334234234 * 100 = 212.334234234)
kedua nilai yang telah dikalikan dibulatkan menjadi integer (212.334234234 menjadi 212)
ketiga nilai yang telah menjadi integer di bagi 100 (212 / 100 = 2.12)
jadi deh…

untuk membulatkan angka ke nilai integer terdekat, saya menggunakan fungsi matematika Math.round yang ada di javascript
Contoh
Math.round(4.6423) hasilnya menjadi 5
Math.round(4.3423) hasilnya menjadi 4
Quick Code


<script language="JavaScript">
     var angka=46.64323423423;
     //jika dibulatkan menjadi dua angka di belakang koma
    duaDesimal = Math.round(angka*100)/100;
    document.write("Hasil pembulatan dua angka dibelakang koma : "+duaDesimal+ "<br />");
</script>

Jika ingin membulatkan 1 angka dibelakang koma, tinggal dikalikan 10, jika ingin tiga digit dikalikan 1000, dst..

Cara lain, jika kita ingin dinamis dalam memformat digit desimal, bisa memakai fungsi Math.pow(x,y), yang berarti x pangkat y.
contoh
Math.pow(10,1) = 10
Math.pow(10,2) = 100
Math.pow(10,3) = 1000
dst..

Nah fungsi Math.pow(x,y) tersebut tinggal di gunakan untuk metode perkaliannya, sehingga scriptnya menjadi seperti ini :
Quick Code


<script language="JavaScript">
     var angka=46.64323423423;
     //jika dibulatkan menjadi dua angka di belakang koma
    duaDesimal = Math.round(angka*Math.pow(10,2))/Math.pow(10,2);
    document.write("Hasil pembulatan dua angka dibelakang koma : "+duaDesimal+ "<br />");
    tigaDesimal = Math.round(angka*Math.pow(10,3))/Math.pow(10,3);
    document.write("Hasil pembulatan tiga angka dibelakang koma : "+tigaDesimal+ "<br />");
</script>

dengan memakai kode yang terakhir, kita bisa menggunakan fungsi sehingga hasilnya dinamis.

Semoga berguna…

]]> http://bambangriadi.com/br/2008/08/memformat-angka-decimal-dengan-javascript/feed/