Menyimpan Data dari textarea TinyMCE Menggunakan MySQL

Bagaimana caranya menyimpan teks yang ditulis pada textarea WYSIWYG TinyMCE?

Pertama, buat tabel tiny di database db_tiny dengan struktur sebagai berikut:

Field	Type	Length	Extra	Primary
id_berita	INT	5	auto_increment
judul	VARCHAR	100
isi	TEXT

Kemudian buat sebuah file tiny.php dengan skrip seperti berikut:

<?php
if(isset($_POST['simpan'])){
 $isi = addslashes($_POST['isi']);

 mysql_connect("localhost","root","");
 mysql_select_db("db_tiny");

 mysql_query("insert into tiny(judul, isi) values('$_POST[judul]','$isi')");
}
?>
<!doctype html>
<html>
<head>
 <title>TinyMCE MySQL</title>
 <script type="text/javascript" src="tinymce/tinymce.min.js"></script>
 <script type="text/javascript">
 tinymce.init({
     selector: "textarea",
     plugins: [
         "advlist autolink lists link image charmap print preview anchor",
         "searchreplace visualblocks code fullscreen",
         "insertdatetime media table contextmenu paste"
     ],
     toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image"
 });
 </script>
</head>
<body>

<form method="post" action="">
Judul : <input type="text" name="judul" maxlength="50">
<br><br>
isi Berita :<br>
<textarea name="isi" rows="15" cols="80">

</textarea>
<br>
<input type="submit" name="simpan" value="Simpan">
<input type="reset" value="Batal">
</form>

</body>
</html>

Baiklah, waktunya penjelasan.

1. Pada tabel, data yang akan menampung data dari textarea harus bertipe TEXT. Kalau VARCHAR, masih kurang mencukupi.

2. Ketika menyimpan ke MySQL, harus diberi addslashes agar kalau ada tanda petik dua (") tidak menyebabkan error pada saat eksekusi query tersebut.

Itu saja, kalau ada yang kurang dipahami silahkan bertanya.

Mengenal Editor WYSISYG TinyMCE

Pernah mendengar tentang editor WYSISYG?

Baiklah, WYSIWYG adalah singkatan dari What You See Is What You Get yang artinya apa yang kamu lihat adalah apa yang kamu dapatkan. Menurut Wikipedia, editor WYSISYG adalah suatu sistem di mana konten (teks dan grafis) pada layar selama proses editing muncul dalam bentuk erat sesuai dengan penampilan saat dicetak atau ditampilkan sebagai produk jadi, seperti dokumen, halaman web, atau slide presentasi.

Timbul, pertanyaan. Editor WYSIWYG itu gunanya buat ngapain, sih?

Bayangkan kita adalah seorang programmer yang ingin membuat sebuah website berita. Tentunya programmer harus bisa memberikan website dengan antarmuka yang mudah digunakan oleh reporter dalam menuliskan isi beritanya. Untuk memenuhi hal itu, biasanya disediakan texarea yang memungkinkan user untuk mengetik lebih dari satu baris.

Sayangnya, teks yang berada di dalam textarea tidak bisa diformat, seperti dimiringkan, ditebalkan, atau diatur ukuran hurufnya pada kalimat tertentu. Kecuali user hafal perintah HTML dan menuliskannya secara manual di dalam textarea tersebut. Tentunya ini sangat menyulitkan bagi reporter ataupun user yang awam dengan HTML.

Jalan keluarnya adalah menggunakan editor WYSIWYG (What You See Is What You Get). Editor WYSIWYG akan memudahkan user dalam mengisi konten website layaknya menggunakan aplikasi pengolah kata(Microsoft Word atau Open Office).

Lagi-lagi, timbul pertanyaan. Editor apa aja sih yang termasuk WYSIWYG dan gimana dapetinnya? Cara nginstalnya gimana? Gunainnya gimana? Implementasinya di web gimana? Waduh~ Sabar ya...

Ada bayak editor WYSIWYG yang bisa kita pakai. Kalau nanya mbah google, nanti pasti akan nongol banyak, seperti :

• CKEditor (http://ckeditor.com/)
• TinyMCE (http://www.tinymce.com/)
• Froala Editor (https://www.froala.com/wysiwyg-editor)
• NicEdit (http://nicedit.com/)
• Redactor (http://imperavi.com/redactor/)
• Aloha Editor (http://www.alohaeditor.org/)
• dan lain-lain.

Dari pada bingung mau pilih yang mana, kali ini saya akan menggunakan TinyMCE dan sedikit membahas editor WYSIWYG tersebut.

Instalasi atau Pemasangan TinyMCE

Sebelum menggunakan TinyMCE rasanya kurang afdhol kalau kita tidak mengenal TinyMCE terlebih dahulu. Jadi... menurut halaman awal TinyMCE...

TinyMCE adalah platform web independen berdasarkan Javascript HTML editor WYSIWYG kontrol dirilis sebagai Open Source di bawah LGPL.
TinyMCE memiliki kemampuan untuk mengkonversi bidang TEXTAREA HTML atau elemen HTML lainnya untuk kasus redaksi.

Intinya, TinyMCE merubah textarea standar menjadi sebuah editor WYSIWYG. Adapun langkah-langkah pemasangan dan penggunaannya adalah sebagai berikut :

Download TinyMCE di http://www.tinymce.com/download/download.php (pilih yang deskripsinya "Contains all you need for production usage" dan tekan tombol download di samping kanannya)

Ekstrak file zipnya, kemudian pindahkan hasil ekstrak tersebut (tinymce) ke folder htdocs (atau folder projek kalian).

Lalu pasang masukkan file tinymce.min.js dari tinymce ke dalam file html atau php kalian. Contohnya, kita akan membuat sebuah file yang bernama tini.html di htdocs dengan script :

<!doctype html>
<html>
<head>
  <title>Contoh</title>
  <script src="tinymce/js/tinymce/tinymce.min.js"></script>
  <script>
    tinymce.init({selector:'textarea'});
  </script>
</head>
<body>
  <textarea>Easy! You should check out MoxieManager!</textarea>
</body>
</html>

Bagian yang saja warnai adalah bagian untuk memanggil tinymce.min.js. Bagian ini perlu disesuaikan dengan alamat atau path dari file tinymce.min.js tersebut.

  <script>
    tinymce.init({selector:'textarea'});
  </script>

Sedangkan script tinymce.init({selector:'textarea'}); digunakan untuk menempatkan editor WYSIWYG ke dalam textarea. Jangan lupa dengan <!doctype html> yang berada paling atas. Tanpa itu, editor ini tidak bisa digunakan.

Hasilnya seperti berikut :

Tapi, itu belum kelihatan semua fiturnya lho! Karena di atas kita menggunakan cara yang paling mudah. Bagaimana kalau mau yang standar? Cukup ubah

  <script>
    tinymce.init({selector:'textarea'});
  </script> 

Menjadi

  <script>
    tinymce.init({
    selector: "textarea",
    plugins: [
        "advlist autolink lists link image charmap print preview anchor",
        "searchreplace visualblocks code fullscreen",
        "insertdatetime media table contextmenu paste"
    ],
    toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image"
    });
  </script> 

Dan hasilnya agak beda :

Kalau mau yang full fiturnya, ganti

  <script>
    tinymce.init({selector:'textarea'});
  </script>

Menjadi

  <script>
    tinymce.init({
    selector: "textarea",
    theme: "modern",
    plugins: [
        "advlist autolink lists link image charmap print preview hr anchor pagebreak",
        "searchreplace wordcount visualblocks visualchars code fullscreen",
        "insertdatetime media nonbreaking save table contextmenu directionality",
        "emoticons template paste textcolor colorpicker textpattern imagetools"
    ],
    toolbar1: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image",
    toolbar2: "print preview media | forecolor backcolor emoticons",
    image_advtab: true,
    templates: [
        {title: 'Test template 1', content: 'Test 1'},
        {title: 'Test template 2', content: 'Test 2'}
    ]
  });
  </script>

Dan tampilan semua fiturnya seperti ini :

Bagaimana? Menarik? Menurut saya, fitur yang disediakan oleh TinyMCE sudah terbilang memadahi. Sayangnya, plugins untuk Upload File atau File Manager yang tersedia berbayar. Jadi tidak bisa tinggal pasang gambar, langsung terupload. Salah satu solusinya adalah menggunakan Responsive File Manager yang dapat diunduh di http://www.responsivefilemanager.com.

Lain kali kita akan membahas tentang menyimpan hasil dari editing menggunakan TinyMCE ke dalam database MySQL. Sampai jumpa lagi...

 Kalau ada yang tidak anda pahami, jangan sungkan untuk bertanya.

Memasang Google Custom Search Engine

Pernahkah kalian melihat sebuah kotak pencarian di sebuah situs? Biasanya kotak pencarian tersebut sudah ada pada template web yang kita gunakan. Tapi, bagaimana kalau ternyata template yang kita gunakan tidak memiliki fitur tersebut? Pencarian kan termasuk fitur yang lumayan penting. Seandainya kita lupa alamat salah satu halamannya, gimana kita mau nyari? Iya tidak?

Jangan khawatir. Ada sebuah cara yang bisa kita gunakan untuk membuat pencarian di dalam website atau blog kita tanpa harus repot-repot membuatnya secara manua. Yaitu Google CSE(Custom Search Engine), yang merupakan mesin pencari namun dapat di sesuaikan hanya untuk situs atau alamat tertentu. Dan tentu saja bentuk dan tampilannya mirip Google.

Misalnya saya mempunyai blog dengan alamat byabdillah.blogspot.com dan saya memasang Google CSE. Ketika seseorang mengunjungi blog saya dan melakukan pencarian menggunakan Google CSE yang disesuaikan, maka yang akan tampil adalah hasil yang berasal dari blog saya.

Timbul, pertanyaan. Bagaimana kita memasang Google CSE?

Pertama-tama, masuk ke halaman Google CSE di http://cse.google.co.id/. Kemudian tekan tombol Masuk Ke Mesin Telusur Khusus.

Setelah itu mungkin kita akan disuruh login terlebih dahulu. Loginnya menggunakan akun google kita aja. Bagi yang belum punya akun google, buat dulu ya.

Setelah halaman selanjutnya muncul, isikan url blog atau website kita pada inputan seperti gambar dibawah

Sebagai contoh, saya akan memasukkan url blog saya.

Oh iya, kita juga bisa memasukkan beberapa url blog yang berbeda lho.

Kemudian pilih bahasa. Standarnya English, tapi kalau tidak biasa English pilih Bahasa Indonesia aja. Jangan lupa, kasih nama pada mesin telusur.

Setelah itu tekan tombol Buat.

Lalu akan muncul pesan selamat

Tekan tombol Dapatkan kode, dan kita akan terdirect menuju halaman lain.

Copy script yang ada di dalam tempat yang abu-abu itu dan salin di  widget blog atau di website kita.

Karena kita belum mengubah tampilan, Google Custom Search akan terlihat seperti ini

Kalau ingin merubah tampilannya, Pilih nama dari google cse yang telah kita berikan tadi. Kemudian pilih Tampilan dan nuansa.

Lalu kita bisa mulai merubah tampilan Google CSE kita. Beberapa pilihan yang bisa kita gunakan adalah :

Untuk Tema, terdapat 7 tema yang tersedia.

Silahkan gunakan yang menurut kalian paling cocok. Kalau tidak ada yang cocok, silahkan pilih tab sesuaikan. Dengan ini, kita bisa menyesuaikan warna-warna yang digunakan pada Google CSE.

Yang paling penting, jika sudah merasa cocok dengan pilihan kita. Tekan tombol Simpan & Dapatkan Kode untuk mendapatkan script-nya. Lalu salin ke blog atau website kalian.

Note: terkadang, style Google CSE menjadi berantakan karena terpengaruh oleh template yang kita gunakan.

Sekian saja ya, kalau ada yang mau nanya tinggal komen. Tapi jangan gaduh. Bye~

Membuat Game Puzzle Sederhana dengan HTML, CSS dan JavaScript (part2)

Melanjutkan permasalahan yang kemarin. Kok kalau gambarnya didrag n drop ke gambar lain, gambar yang didrag ngilang? Kuncinya ada di javascript.

Ubah bagian function JavaScript

function drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("text");
    ev.target.appendChild(document.getElementById(data));
}

Menjadi

function drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("text");
    var u = ev.target.id;
    var i = u.substr(0,1);
    if (i!="g") {
     ev.target.appendChild(document.getElementById(data));
    };
}

Penjelasan :

Di sini, gambar harus mempunyai id yang berawalan huruf "g". Jika konten yang didrag diletakkan di konten yang memiliki id yang berawalan "g", maka tidak dilakukan pertukaran data seperti seharusnya. Jadi, gambar tidak bisa diletakkan ke dalam gambar karena gambar memiliki id yang berawalan "g".

Untuk lebih jelasnya, silahkan download contohnya di sini.

Silahkan diobrak-abrik codenya biar paham. Atau silahkan kunjungi Membuat Game Puzzle Sederhana dengan HTML, CSS dan JavaScript (part1).

Membuat Game Puzzle Sederhana dengan HTML, CSS dan JavaScript (part1)

Kali ini kita akan membuat semacam game puzzle gambar dengan memanfaatkan css clip yang pernah saya posting sebelumnya di sini, dan juga sedikit javascript yang saya dapatkan dari w3shcools.com di sini.

Kenapa kita memerlukan css clip? Ada yang bertanya seperti itu? Kalau ada, maka jawaban saya adalah tentu saja untuk memotong gambar. Agar cukup satu gambar saja yang kita gunakan pada game ini. Tapi, jika kalian tidak menggunakan css clip juga tidak masalah. Asalkan mau memotong gambar yang akan kalian gunakan menjadi beberapa bagian.

Lalu gunanya javascript itu buat apa? Ya buat nge-drag and nge-drop gambarlah. Ini adalah bagian pentingnya. Tanpa javasript ini, gambar tidak akan bisa di-drag maupun di-drop. Tenang saja, javascript-nya gak banyak kok. Cuma se-di-kit aja.

Baiklah, mari kita buat puzzle-nya!

Pertama, kita akan memilih gambar yang akan kita gunakan. Di sini, saya akan menggunakan gambar di bawah.

Kedua, buat tiga buah file kosong dengan nama game.html, game.css dan game.js. Pada game.html, kita tulis :

<!doctype html>
<html>
<head>
  <title>puzzle</title>
  <link rel="stylesheet" type="text/css" href="game.css">
  <script type="text/javascript" src="game.js"></script>
</head>
<body>

</body>
</html>

Setelah itu, buat tiga buah div di dalam body dengan class all dan gbr. Jangan lupa masukkan gambar kita ke dalam div yang class-nya gbr.

<div class="all"></div>
<div class="gbr">
  <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWLJ4GXFO9YYPWxS9MpaA5LqzYNk3gEpWZw19RwJSptZR_IMzeVQcKIpvD5-gMFW_8xk4USJAYWIM8G2A2Y7gkZRWFmuPdzQXB3iWsl_b1g1w6yESdeciMEfL7M2vfwc7udt3Lyqny-Vmy/s1600/photo.jpg">
</div>

Kemudian buat sebuah tabel dengan 5 kolom dan 2 baris di bawah kedua div sebelumnya. Pastikan cellspacing dan cellpadding bernilai nol. Biar kelihatan, nilai border dibuat menjadi 1.

<table cellspacing="0" cellpadding="0" border="1">
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>

Lalu kita buka game.css dan tulis : 

.all{
  position: absolute;
  width: 100%;
  height: 100%;
}
.gbr{
  float: left;
}
.gbr img{
  width: 400px;
  height: 400px;
  border: 2px solid black;
  opacity: .5;
}
table{
  float: left;
  position: absolute;
}

Kali ini kita akan menyusutkan gambarnya sehinggal panjang dan lebar gambar menjadi 400px (lihat yang di-mark di atas). Jadi, akan lebih baik jika kalian menggunakan gambar yang nilai panjang dan lebarnya sama. Agar gambar tetap kelihatan bagus.

Masukkan div dengan class box dan juga id mulai d1 sampai d4 ke dalam cell atau td, kecuali td urutan yang ketiga. Sekalian drag event dan drop event juga. Nanti hasilnya akan seperti ini :

<table cellspacing="0" cellpadding="0" border="1">
  <tr>
    <td>
      <div class="box" id="d1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
    </td>
    <td>
      <div class="box" id="d2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
    </td>
    <td></td>
    <td>
      <div class="box" id="d3" ondrop="drop(event)" ondragover="allowDrop(event)">
        <img draggable="true" ondragstart="drag(event)" class="k21" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWLJ4GXFO9YYPWxS9MpaA5LqzYNk3gEpWZw19RwJSptZR_IMzeVQcKIpvD5-gMFW_8xk4USJAYWIM8G2A2Y7gkZRWFmuPdzQXB3iWsl_b1g1w6yESdeciMEfL7M2vfwc7udt3Lyqny-Vmy/s1600/photo.jpg">
      </div>
    </td>
    <td>
      <div class="box" id="d4" ondrop="drop(event)" ondragover="allowDrop(event)">
        <img draggable="true" ondragstart="drag(event)" class="k11" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWLJ4GXFO9YYPWxS9MpaA5LqzYNk3gEpWZw19RwJSptZR_IMzeVQcKIpvD5-gMFW_8xk4USJAYWIM8G2A2Y7gkZRWFmuPdzQXB3iWsl_b1g1w6yESdeciMEfL7M2vfwc7udt3Lyqny-Vmy/s1600/photo.jpg">
      </div>
    </td>
  </tr>
  <tr>
    <td>
      <div class="box" id="d5" ondrop="drop(event)" ondragover="allowDrop(event)"&  gt;</div>
    </td>
    <td>
      <div class="box" id="d6" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
    </td>
    <td></td>
    <td>
      <div class="box" id="d7" ondrop="drop(event)" ondragover="allowDrop(event)">
        <img draggable="true" ondragstart="drag(event)" class="k22" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWLJ4GXFO9YYPWxS9MpaA5LqzYNk3gEpWZw19RwJSptZR_IMzeVQcKIpvD5-gMFW_8xk4USJAYWIM8G2A2Y7gkZRWFmuPdzQXB3iWsl_b1g1w6yESdeciMEfL7M2vfwc7udt3Lyqny-Vmy/s1600/photo.jpg">
      </div>
    </td>
    <td>
      <div class="box" id="d8" ondrop="drop(event)" ondragover="allowDrop(event)">
        <img draggable="true" ondragstart="drag(event)" class="k12" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWLJ4GXFO9YYPWxS9MpaA5LqzYNk3gEpWZw19RwJSptZR_IMzeVQcKIpvD5-gMFW_8xk4USJAYWIM8G2A2Y7gkZRWFmuPdzQXB3iWsl_b1g1w6yESdeciMEfL7M2vfwc7udt3Lyqny-Vmy/s1600/photo.jpg">
      </div>
    </td>
  </tr>
</table>

Kemudian masukkan gambar pada 2 div terakhir masing-masing tr. Lihat script atas.

<img draggable="true" ondragstart="drag(event)" class="k11" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWLJ4GXFO9YYPWxS9MpaA5LqzYNk3gEpWZw19RwJSptZR_IMzeVQcKIpvD5-gMFW_8xk4USJAYWIM8G2A2Y7gkZRWFmuPdzQXB3iWsl_b1g1w6yESdeciMEfL7M2vfwc7udt3Lyqny-Vmy/s1600/photo.jpg">

Pastikan gambar mempunyai class mulai dari k11, k12, k21 dan k22. Gambar yang mempunyai class k11 akan kelihatan pojok kiri atas, k12 pojok kanan atas, k21 pojok kiri bawah dan k22 pojok kanan bawah. Jadi, jangan sampai ada gambar dengan class yang sama ataupun double. kalau sampai ada, nanti gambarnya gak bisa diselesaikan.

Di game.css tambahkan script css ini dibawahnya.

.box{
  width: 200px;
  height: 200px;
}
.box img{
  position: absolute;
  width: 400px;
  height: 400px;
}
.k11{
  clip: rect(0px, 200px, 200px, 0px);
}
.k12{
  clip: rect(0px, 400px, 200px, 200px);
  margin-left: -200px;
}

.k21{
  clip: rect(200px, 200px, 400px, 0px);
  margin-top: -200px;
}
.k22{
  clip: rect(200px, 400px, 400px, 200px);
  margin-top: -200px;
  margin-left: -200px;
}

Script css di ataslah yang berperan penting dalam pemotongan gambar.
Buka gambar.js dan tulis.

function allowDrop(ev) {
    ev.preventDefault();
}

function drag(ev) {
    ev.dataTransfer.setData("text", ev.target.id);
}

function drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("text");
    ev.target.appendChild(document.getElementById(data));
}

Hasilnya :

Lho? Kok gak bisa digerakin sih? Ada yang tahu penyebabnya? Kita lupa menambahkan id pada gambar. Ok, kita tambahkan id. Id gak boleh ada yang sama ya! Kita kasih id g1 sampai g4 aja.

Jadi...

<!doctype html>
<html>
<head>
 <title>puzzle</title>
 <link rel="stylesheet" type="text/css" href="game.css">
 <script type="text/javascript" src="game.js"></script>
</head>
<body>
 <div class="all"></div>
 <div class="gbr">
  <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWLJ4GXFO9YYPWxS9MpaA5LqzYNk3gEpWZw19RwJSptZR_IMzeVQcKIpvD5-gMFW_8xk4USJAYWIM8G2A2Y7gkZRWFmuPdzQXB3iWsl_b1g1w6yESdeciMEfL7M2vfwc7udt3Lyqny-Vmy/s1600/photo.jpg">
 </div>
 <table border="0" cellspacing="0" cellpadding="0">
  <tr>
   <td>
    <div class="box" id="d1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
   </td>
   <td>
    <div class="box" id="d2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
   </td>
   <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
   <td>
    <div class="box" id="b1" ondrop="drop(event)" ondragover="allowDrop(event)">
     <img id="g4" draggable="true" ondragstart="drag(event)" class="k22" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWLJ4GXFO9YYPWxS9MpaA5LqzYNk3gEpWZw19RwJSptZR_IMzeVQcKIpvD5-gMFW_8xk4USJAYWIM8G2A2Y7gkZRWFmuPdzQXB3iWsl_b1g1w6yESdeciMEfL7M2vfwc7udt3Lyqny-Vmy/s1600/photo.jpg">
    </div>
   </td>
   <td>
    <div class="box" id="b2" ondrop="drop(event)" ondragover="allowDrop(event)">
     <img id="g3" draggable="true" ondragstart="drag(event)" class="k21" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWLJ4GXFO9YYPWxS9MpaA5LqzYNk3gEpWZw19RwJSptZR_IMzeVQcKIpvD5-gMFW_8xk4USJAYWIM8G2A2Y7gkZRWFmuPdzQXB3iWsl_b1g1w6yESdeciMEfL7M2vfwc7udt3Lyqny-Vmy/s1600/photo.jpg">
    </div>
   </td>
  </tr>
  <tr>
   <td>
    <div class="box" id="d3" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
   </td>
   <td>
    <div class="box" id="d4" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
   </td>
   <td></td>
   <td>
    <div class="box" id="b3" ondrop="drop(event)" ondragover="allowDrop(event)">
     <img id="g2" draggable="true" ondragstart="drag(event)" class="k12" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWLJ4GXFO9YYPWxS9MpaA5LqzYNk3gEpWZw19RwJSptZR_IMzeVQcKIpvD5-gMFW_8xk4USJAYWIM8G2A2Y7gkZRWFmuPdzQXB3iWsl_b1g1w6yESdeciMEfL7M2vfwc7udt3Lyqny-Vmy/s1600/photo.jpg">
    </div>
   </td>
   <td>
    <div class="box" id="b4" ondrop="drop(event)" ondragover="allowDrop(event)">
     <img id="g1" draggable="true" ondragstart="drag(event)" class="k11" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWLJ4GXFO9YYPWxS9MpaA5LqzYNk3gEpWZw19RwJSptZR_IMzeVQcKIpvD5-gMFW_8xk4USJAYWIM8G2A2Y7gkZRWFmuPdzQXB3iWsl_b1g1w6yESdeciMEfL7M2vfwc7udt3Lyqny-Vmy/s1600/photo.jpg">
    </div>
   </td>
  </tr>
 </table>
</body>
</html>

Tapi, kalau gambarnya di drag n drop ke gambar kok ngilang?
Kita akan mengatasi masalah itu di part2. Silahkan klik di sini untuk menuju part2. Tunggu besok ya...

Belajar Ajax tanpa jQuery (part3)

Setelah kemarin kita sudah belajar tentang XMLHttp dan pengiriman request ke server menggunakan method POST dan GET. Sekarang, kita akan belajar bersama tentang "Respon Server".

Respon Server

Untuk mendapatkan respon dari server, kita dapat menggunakan responeText atau responeXML. Sekedar penjelasan, responText berarti kita menerima balasan dari server dalam bentuk text, sedangkan responeXML berarti kita menerima balasan dari server dalam bentuk data XML. Silahkan kalian pilih dengan bijak yang mana yang akan kalian gunakan.

Menggunakan ResponeText

Jika balasan dari server berupa teks dan bukan data XML, maka gunakan responeText. ResponeText akan mengembalikan bentuk data dari server menjadi teks. Seperti yang saya gunakan pada contoh di part pertama.

document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

Menggunakan ResponeXML

Jika balasan dari server bukan berupa teks dan kalian ingin menguraikannya menjadi XML, maka gunakan responeXML. Sebagai contoh, kita akan menggunakan contoh yang sudah ada di w3schools.com. yaitu menggunakan data xml cd_catalog.xml dan kode html :

<!DOCTYPE html>
<html>
  <head>
    <script>
      function loadXMLDoc(){
        var xmlhttp;
        var txt,x,i;
        if(window.XMLHttpRequest){
          xmlhttp=new XMLHttpRequest();
        }else{

          xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange=function(){
          if (xmlhttp.readyState==4 && xmlhttp.status==200){
            xmlDoc=xmlhttp.responseXML;
            txt="";
            x=xmlDoc.getElementsByTagName("ARTIST");
            for (i=0;i<x.length;i++){
              txt=txt + x[i].childNodes[0].nodeValue + "<br>";
            }
            document.getElementById("myDiv").innerHTML=txt;
          }
        }
      xmlhttp.open("GET","cd_catalog.xml",true);
      xmlhttp.send();
      }
    </script>
  </head>
  <body>
    <h2>My CD Collection:</h2>
    <div id="myDiv"></div>
    <button type="button" onclick="loadXMLDoc()">Get my CD collection</button>
  </body>
</html> 

Event onreadystatechange

Ketika perminataan ke server dikirim, kita bisa melakukan  beberapa tindakan berdasarkan respon dari server.
Event onreadystatechange akan ter-eksekusi setiap ada perubahan readyState.
Properti readyState itu membawa status dari XMLHttpRequest.

Properti	Deskripsi
onreadystatechange	Sebuah fungsi yang otomatis akan terpanggil tiap kali property readyState berubah
readyState	Pemegang status dari XMLHttpRequest, Berubah dari 0 sampai 4
	0 : Request di-inisialisasikan
	1 : Koneksi ke server didirikan
	2 : Permintaan diterima server
	3 : Permintaan diproses server
	4 : Permintaan telah diterima dan respon siap
Status	200 : OK
	404 : PNF(Page Not Found)

Kita dapat menentukan readiState dan status-nya di :

xmlhttp.onreadystatechange=function(){
  if (xmlhttp.readyState==4 && xmlhttp.status==200){
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
  }
}

Note : event onreadystatechange dieksekusi sebanyak lima kali (0-4), yaitu setiap perubahan pada readyState.

Callback

Callback adalah fungsi yang menyalurkan parameter ke fungsi lain.

Jika kita memiliki lebih dari satu tugas AJAX di website kita, maka kita harus membuat satu fungsi standar untuk menciptakan objek XMLHttpRequest, dan memanggilnya untuk setiap tugas AJAX.
 
Fungsi yang dipanggil harus berisi URL dan apa yang harus dilakukan pada onreadystatechange (yang mungkin berbeda untuk setiap panggilan). Ini tentunya sangat berguna untuk menyingkat waktu penulisan code bukan?

Sekian untuk hari ini. Tapi, untuk kalian yang belum memahami tentang callback bisa melihat contoh callack dari www.w3schools.com ini :

<!DOCTYPE html>
<html>
<head>
<script>
var xmlhttp;
function loadXMLDoc(url,cfunc)
{
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=cfunc;
xmlhttp.open("GET",url,true);
xmlhttp.send();
}
function myFunction()
{
loadXMLDoc("ajax_info.txt",function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  });
}
</script>
</head>
<body>

<div id="myDiv"><h2>Let AJAX change this text</h2></div>
<button type="button" onclick="myFunction()">Change Content</button>
</body>
</html>

Semoga bermanfaat.
Kali ini gak ada contoh yang bisa di-download lagi.

Belajar Ajax tanpa jQuery (part2)

Kemarin kita udah sampai pada syntax untuk mengirim data ke server menggunakan open() dan send(). Tetapi, ada pilihan menggunakan method GET atau  POST. Jadi, kita menggunakan yang mana? Seperti kata favorit guru saya di sekolah, "timbul, pertanyaan."

GET ATAU POST?

Saya lebih merekomendasikan menggunakan GET, karena lebih sederhana dan cepat dibandingkan dengan POST. Selain itu, GET juga bisa digunakan dalam banyak kasus.

Meski begitu, lebih baik menggunakan POST ketika : 

• File cache bukanlah pilihan untuk digunakan (memperbarui file atau database di server)
• Mengirim data yang berukuran besar ke server (POST tidak memiliki keterbatasan ukuran)
• Mengirim input pengguna (yang dapat berisi karakter yang tidak diketahui), POST lebih kuat dan aman daripada GET

 MENGGUNAKAN GET

Contoh :

xmlhttp.open("GET","demo_get.php",true);
xmlhttp.send();

Dengan contoh di atas, mungkin kita akan mendapatkan hasil cache.
Untuk menghindariya, bisa ditambahkan ID unik ke URL seperti ini (saya sandiri kurang paham) :

xmlhttp.open("GET","demo_get.php?t=" + Math.random(),true);
xmlhttp.send();

Kalau untuk mengirim informasi menggunakan GET, tambahkan informasi ke dalam URL.

xmlhttp.open("GET","demo_get2.php?nama=Bayu&alamat=Jateng",true);
xmlhttp.send();

MENGGUNAKAN POST

Contoh penggunaan POST yang sederhana.

xmlhttp.open("POST","demo_post.php",true);
xmlhttp.send();

Untuk POST data yang seperti bentuk HTML, tambahkan header HTTP dengan setRequestHeader (). Tentukan data yang ingin Anda kirim di method send (): 

xmlhttp.open("POST","ajax_test.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("nama=Henry&alamat=Jateng");

Penjelasan : 

setRequestHeader(header, value) = menambahkan HTTP Header pada pengiriman permintaan
header = spesifikasi nama header
value  = spesifikasi isi header

URL

Parameter url dari metode open (), adalah sebuah alamat ke file di server:

xmlhttp.open("GET","ajax_test.php",true);

Berbagai jenis file dapat digunakan, seperti .txt dan .xml, atau server file scripting seperti asp dan php (yang dapat melakukan tindakan pada server sebelum mengirim respon kembali).

 ASYNCHRONOUS

AJAX singkatan Asynchronous JavaScript dan XML, dan objek XMLHttpRequest agar berjalan sebagai AJAX, parameter async metode open () harus diatur ke benar: 

xmlhttp.open("GET","ajax_test.php",true);

Mengirim permintaan asynchronous merupakan kemajuan besar dalam pengembangan web. Banyak tugas yang dilakukan pada server yang sangat memakan waktu. Sebelum AJAX, operasi ini bisa menyebabkan aplikasi menggantung atau berhenti.
 
Dengan AJAX, JavaScript tidak harus menunggu respon dari server, tetapi dapat:

• mengeksekusi script lain sambil menunggu respon dari server
• berurusan dengan respon ketika respon siap

ASYNC = TRUE

Bila menggunakan async = true, tentukan fungsi yang dieksekusi ketika respon siap dalam onreadystatechange: 

xmlhttp.onreadystatechange=function(){
  if (xmlhttp.readyState==4 && xmlhttp.status==200){
    document.getElementById("teks").innerHTML=xmlhttp.responseText;
  }
}
  xmlhttp.open("GET","teks.txt",true);
  xmlhttp.send();

Untuk menggunakan async = false, cukup ubah parameter ketiga di method open().

xmlhttp.open("GET","teks.txt",false);

  ASYNC = FALSE

Saya tidak meyarankan penggunaan async = false, tapi untuk request data yang kecil masih bisa digunakan.
Ingat bahwa JavaScript TIDAK akan mengeksekusi perintah sampai respon server siap. Jika server sibuk atau lambat, aplikasi akan hang atau berhenti.
Catatan: Bila Anda menggunakan async = false, jangan menulis fungsi onreadystatechange - cukup dengan menempatkan script send () pernyataan:

xmlhttp.open("GET","teks.txt",false); xmlhttp.send(); document.getElementById("teks").innerHTML=xmlhttp.responseText;
Sekian  dulu untuk hari ini, tunggu kelanjutannya besok.
 --------
Note : Hari ini gak ada contohnya yang bisa di download, tapi bisa menggunakan contoh yang kemarin sudah saya sertakan di part1.
sumber : www.w3schools.com 

Belajar Ajax tanpa jQuery (part1)

Sebelum kita melangkah lebih jauh untuk mempelajari AJAX, alangkah lebih baik jika kita mengenal AJAX terlebih dahulu. Denger-denger sih, kalau gak kenal maka gak sayang, kalau gak sayang maka gak cinta, kalau gak cinta maka gak bisa menikmati setiap inci dari tubuhnya... So, apa itu AJAX?

APA ITU AJAX?

AJAX bukanlah bahasa pemrograman baru, tapi sebuah cara baru untuk menggunakan standar yang sudah ada.

AJAX adalah singkatan dari "Asynchronous JavaScript and XML". Kalau diterjemahin sesuai bahasanya itu rumit, sulit jelasinnya. Pokoknya, AJAX itu adalah teknik untuk membuat halaman web yang cepat dan dinamis. Kenapa begitu? Itu karena AJAX digunakan untuk memperbarui bagian dari halaman web, tanpa perlu reload. Sehingga AJAX memungkinkan halaman web diperbarui secara tidak singkron(asynchronous) dengan bertukar data dalam jumlah kecil dengan server di belakang layar. Kalau halaman web klasik, (yang tidak menggunakan AJAX) diharuskan me-reload seluruh halaman jika konten ingin dirubah.

Contoh aplikasi yang menggunakan AJAX adalah Google Maps, Google Search, Google Mail dan lain-lain.

BAGAIMANA AJAX BEKERJA?

Singkatnya, ketika terjadi sebuah event tertentu pada halaman web, (contohnya adalah ketika mengetikkan kata kunci di Google Search) sebuah fungsi akan membuat sebuah XMLHttpRequest dan mengirimkannya pada server. Kemudian, server akan memproses permintaan dari XMLHttpRequest. Setelah itu, server akan memberikan balasan (berupa data) dan mengirimkannya kepada browser. Selanjutnya, balasan tersebut akan diproses oleh browser menggunakan javascript dan... Tada! Halaman sudah ter-update (muncul berbagai macam kalimat yang berhubungan dengan kata kunci yang sudah kita ketikkan). Gak kepanjangan, kan? Lebih jelasnya, liat gambar dibawah.

Kok bahasa inggris? credit asli dari www.w3schools.com.

STANDAR AJAX

Wuih... jangan langsung mikir sulit lho, ya! Pada dasarnya, AJAX itu merupakan kombinasi dari beberapa hal yang gak rumit-rumit amat kok, yaitu :

• Objek XMLHttpRequest (untuk pertukaran data asynchronous dengan server)
• JavaScript / DOM (untuk menampilkan / berinteraksi dengan informasi)
• CSS (untuk desain, mau make atau gak terserah)
• XML/JSON (digunakan sebagai format untuk mentransfer data, bisa juga pakai teks biasa, *.txt)

Biar lebih jelas, kita akan membuat sebuah aplikasi AJAX yang amat sangat sederhana.

Pertama-tama, kita buat sebuah teks dengan nama "teks.txt"(tanpa tanda petik). Jangan lupa buat diisi.
Contohnya, diisi begini :
"AJAX is about updating parts of a web page, without reloading the whole page.
AJAX adalah tentang memperbarui sebagian dari halaman web, tanpa me-reload seluruh halaman."

Kemudian, waktunya AJAX! Buat sebuah file dengan nama "ajax.html". Terus...? Tulis!

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="teks"><h2>Ajax akan mengubah teks ini...</h2></div>
<button type="button" onclick="loadXML()">Ubah Konten</button>
</body>
</html>

Aplikasi AJAX yang akan kita buat menggunakan sebuah div dan sebuah tombol. Bagian div akan digunakan untuk menampilkan informasi balasan dari server. Sedangkan, tombol (satu-satunya) itu digunakan untuk memanggil fungsi loadXML saat diklik. Lalu, script yang paling penting. Tulis script berikut di antara tag <head></head>. Seperti ini :

<head>
<script>
function loadXML(){
.... Di sinilah script AJAX akan terlahir...
}
</script>
</head>

Kemudian, buat Objek XMLHttpRequest. Karena inilah kunci utama AJAX. Tapi, apa itu Objek XMLHttpRequest? Kalau ada yang kurang paham sama penjelasan di atas, kita bahas lagi deh. Objek XMLHttpRequest adalah objek yang digunakan untuk pertukaran data dengan server di belakang layar. Inilah yang memungkinkan kita memperbarui halaman web tanpa me-reload seluruh halaman.
Semua browser modern  (IE7+, Firefox, Chrome, Safari, and Opera) sudah mendukung objek XMLHttpRequest. Sedangkan untuk IE5 dan IE6 menggunakan ActiveXObject.

Sintak untuk membuat sebuah objek XMLHttpRequest:

variable =new XMLHttpRequest();

Versi lama dari Internet Explorer (IE6 dan IE5) menggunakan Object ActiveX:

variable =new ActiveXObject("Microsoft.XMLHTTP");

Agar bisa digunakan oleh semua browser modern, termasuk IE5 dan IE6, periksa apakah browser mendukung objek XMLHttpRequest. Jika tidak, maka menggunakan ActiveXObject.

var xmlhttp;
if(window.XMLHttpRequest){// kode untuk IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
}else{// kode untuk IE6 & IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}

MENGIRIM PERMINTAAN UNTUK SERVER

Setelah objek XMLHttpRequest sudah dibuat, maka tinggal dikirim. Untuk mengirim permintaan ke server, kita menggunakan open() dan send() yang merupakan method dari XMLHttpRequest.

xmlhttp.open("GET","teks.txt",true);
xmlhttp.send();

Penjelasan :

open(method,url,async) = spesifikasi pengiriman permintaan, url, dan apakah permintaan akan ditangani secara singkron atau tidak.

• method : tipe pengiriman permintaan : GET atau POST
• url : lokasi file yang akan memproses permintaan di server.
• async : true (asyncronous) atau false(syncronous)

send(string) = mengirim permintaan ke server

• string : hanya digunakan jika menggunakan method POST

bersambung... ke part2
------
kalau mau download contohnya, klik di sini
kalian akan lebih mudah memahaminya kalau udah obrak-abrik source code-nya.
sumber : www.w3schools.com