HTML 5 - Membuat Drag dan Drop Gambar

Assalamu 'alaikum Wr. Wb.

Akhirnya bisa nge-blog lagi, mumpung ada internet gratis plus sekalian nge-refresh otak gara-gara diforsir untuk ngoding bikin aplikasi kantor.

Kali ini saya akan membahas mengenai HTML 5 yang merupakan pengembangan kelima dari versi HTML. HTML 5 didesain untuk memperbaiki dan mendukung multimedia terbaru.

Salah satu fungsi di HTML 5 adalah drag/drop yang akan dibahas sebagai berikut.

1. Buat tampilan seperti ini.

<style>
#div1,#div2 {width:150px;height:70px;padding:10px;border:1px solid #aaaaaa;}
#left {margin:20px 0px 0px 30px; width:200px;height:100px;padding:10px;border:1px solid #aaaaaa; float:left;}
#right {margin:20px 0px 0px 5px; width:200px;height:100px;padding:10px;border:1px solid #aaaaaa; float:left;}
</style>
<?php
echo"<div id='left'>
    <div id='div1'>
<img src='logo.jpg' height='60'/>
</div>
</div>
<div id='right'>
<div id='div2'></div><br>
</div>";
?>

Simpan script diatas dengan nama file, misal dragdrop.php dan jadikan satu folder dengan logo/gambar, gambar bebas.

2. Sisipkan script berikut di luar tag php atau cssnya.

<script>
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));
}
</script>

3. Panggil fungsi diatas seperti contoh berikut ini.

Tambahkan ondrop dan ondragover setelah 'div1' dan 'div2'.

<div id='div1' ondrop='drop(event)'ondragover='allowDrop(event)'>

Tambahkan ondrggable , ondragstart dan id didalam tag <img />.

<img src='logo.jpg' height='60' odraggable='true' ondragstart='drag(event)' id='drag1'/>

Jadi, tag htmlnya setelah di ubah menjadi.

echo"<div id='left'>
    <div id='div1' ondrop='drop(event)' ondragover='allowDrop(event)'>
<img src='logo.jpg' height='60' odraggable='true' ondragstart='drag(event)' id='drag1'/>
</div>
</div>
<div id='right'>
<div id='div2' ondrop='drop(event)' ondragover='allowDrop(event)'></div><br>
</div>";

4. Dan coba tarik gambar logo OM ke kotak samping kanan dan hasilnya dibawah ini.

Nah.cukup mudahkan. silahkan dicoba dan lihat hasilnya. Insya Allah bisa.. mohon maaf jika ada kesalahan, mohon sarannya jika masih ada yang perlu diperbaiki, silahkan bertanya jika ada pertanyaan, akan dijawab semaksimal mungkin yang saya bisa, dan jangan menghujat.

Wassalamu 'alaikum Wr. wb.

Read More

Validasi Form Dengan Javascript (peringatan value form kosong)

Assalamu 'alaikum Wr. Wb.

Setelah menikmati akhir pekan yang pendek, Allah SWT masih memberi kesempatan saya untuk menulis dan memposting coretan-coretan kecil yang semoga saja bermanfaat bagi yang membutuhkan tulisan ini.

Kali ini penulis akan menulis tentang validasi pada sebuah form. Kenapa harus validasi? karena validasi sangat penting dan salah satu bagian dari suatu program aplikasi untuk memudahkan user menjalankan program atau menghalangi user berbuat semaunya dalam input data, atau sebagai upaya untuk meminimalisir kerusakan data yang diinput.

Validasi yang banyak digunakan di pemrograman web salah satunya dengan javascript seperti contoh berikut:

1. Buat form inputan seperti dibawah ini :

<?php
echo"<form name='latihan' method='POST' action=''>
<table>
<tr><td>Textbox<td>
<td><input type='text' name='textbox' id='textbox' /><td>
</tr>
<tr><td>combobox<td>
<td><select name='combobox' id='combobox'>
       <option value=''>=pilih=</option>
          <option value='list1'>list1</option>
          <option value='list2'>list2</option>
 </select><td></tr>
  <tr><td><td><td><button type='submit' name='simpan'></button>
  <td></tr>
</table>
</form>"; 
?>

2. Buat script javascript untuk validasinya:

<script language='javascript'>
function validTextbox()
{
if (document.latihan.textbox.value == "") 
{
alert("Textbox masih kosong");
}
}

function validCombobox()
{
if (document.latihan.combobox.value == "") 
{
alert("Combobox masih kosong");
}
}
</script>

3. Memanggil validasi tersebut dengan event yaitu event onclick dan disisipkan di button/submit seperti dibawah ini.

<button type='submit' name='simpan' onClick='validTextbox();validCombobox();'></button>

Nah.cukup mudahkan. silahkan dicoba dan lihat hasilnya. Insya Allah bisa.. mohon maaf jika ada kesalahan, mohon sarannya jika masih ada yang perlu diperbaiki, silahkan bertanya jika ada pertanyaan, akan dijawab semaksimal mungkin yang saya bisa, dan jangan menghujat.

Wassalamu 'alaikum Wr. wb.

Read More

Koneksi Mysql dan PHP dengan Mysqli Extension

Assalamu 'alaikum Wr. Wb.

Sambil menikmati pagi yang dingin dan sedikit longgarnya pekerjaan kantor dan internet gratis serta yang paling penting temen-temen programmer lagi pada asyik ngoding jadi gak ada yang tahu, maka kali ini saya memposting mengenai perkembangan baru seputar PHP dan Mysql.

Mysqli extension merupakan pengembangan dari mysql extension. Mulai PHP versi 5 penggunaan mysql extension sudah tidak disarankan lagi. Jadi mulai sekarang programmer web disarankan untuk menggunakan mysqli extension. Mysqli extension juga mendukung pemrograman berorientasi objek dan procedural.
Itu saja untuk pengertiannya, langsung dilanjutkan saja ke praktiknya dalam membuat koneksi.

Berikut contoh :

<?php
$host        ="localhost";  
$user        ="root";
$pass        ="";
$database ="database_trial";
$koneksi    = new mysqli($host,$user,$pass,$database);
if (mysqli_connect_errno()) {
  mysqli_connect_error('Koneksi ke database gagal'); 
}
?>

Demikian contoh penggunaan mysqli extension untuk membuat koneksi dan tunggu contoh-contoh lainnya dipostingan selanjutnya.

Nah.cukup mudahkan. silahkan dicoba dan lihat hasilnya. Insya Allah bisa.. mohon maaf jika ada kesalahan, mohon sarannya jika masih ada yang perlu diperbaiki, silahkan bertanya jika ada pertanyaan, akan dijawab semaksimal mungkin yang saya bisa, dan jangan menghujat..

Wassalamu 'alaikum Wr. wb.

Read More

MACAM-MACAM QUERY (SQL) BAGIAN 2

Assalamu 'alaikum Wr.Wb

Setelah beberapa waktu lalu telah memposting macam-macam query sql bagian 1 , pada kesempatan ini akan memposting untuk kelanjutannya yaitu bagian ke 2.

1. Mengetahui jumlah baris/row dalam tabel.

SELECT COUNT(id_tabel) id_tabel  FROM nama_tabel;

2. Mengelompokkan item data berdasarkan field tabel tertentu.

SELECT DISTINCT(field_tabel) field_tabel FROM nama_tabel;

3. Menampilkan data dari 2 tabel atau lebih dengan INNER JOIN.

SELECT * FROM tabel_a INNER JOIN tabel_b 
ON tabel_a_id=tabel_b_id;

*)tabel_a_id adalah PRIMARY KEY dan tabel_b_id adalah FOREIGN KEY

4. Memasukkan /  input data kedalam tabel.

INSERT INTO nama_tabel (id_tabel,field_tabel) 
VALUES (id_tabel,field_tabel);

5. Mengubah / edit data.

UPDATE nama_tabel SET field_tabel_lama=' field_tabel_baru' 
WHERE id_tabel='id_tabel';

*)id_tabel diisi berdasarkan id_tabel yang dipilih.

6. Menghapus data.

DELETE FROM nama_tabel WHERE id_tabel='id_tabel';

Demikian contoh query pada SQL yang terangkum dalam bagian 2 dan tunggu penjelasan query-query lainya.

Nah.cukup mudahkan. silahkan dicoba dan lihat hasilnya. Insya Allah bisa.. mohon maaf jika ada kesalahan, mohon sarannya jika masih ada yang perlu diperbaiki, silahkan bertanya jika ada pertanyaan, akan dijawab semaksimal mungkin yang saya bisa, dan jangan menghujat..

Wassalamu 'alaikum Wr. wb.

Read More