Sabtu, 05 November 2011

query SQL dengan PHP

OK.. kali ini saya akan mencoba membahas bagaimana cara membuat query SQL yang melibatkan tabel lebih dari satu (multi tabel) dimana saling berelasi satu sama yang lain. Dalam hal ini, pembahasan hanya akan berfokus pada query berbentuk SELECT saja.
Untuk lebih jelasnya, saya berikan sampel 3 buah tabel yang saling berelasi satu sama lain beserta sampel datanya. Tabel ini merupakan studi kasus dari data perkuliahan mahasiswa.

1.CREATE TABLE `ambilmk` (
2.`nim` varchar(5),
3.`kodemk` varchar(4),
4.`nilai` float,
5.`smt` varchar(10),
6.`thajar` varchar(10),
7.PRIMARY KEY (`nim`,`kodemk`)
8.);
1.CREATE TABLE `mhs` (
2.`nim` varchar(5),
3.`namamhs` varchar(20),
4.`alamat` text,
5.`tgllhr` date,
6.PRIMARY KEY (`nim`)
7.);
1.CREATE TABLE `mk` (
2.`kodemk` varchar(4),
3.`namamk` varchar(20),
4.`sks` int(11),
5.`smt` varchar(10),
6.PRIMARY KEY (`kodemk`)
7.);
dan… berikut ini adalah sampel datanya
1.INSERT INTO `ambilmk` VALUES ('M001', 'MK01', '3', 'GANJIL', '2001-2002');
2.INSERT INTO `ambilmk` VALUES ('M001', 'MK02', '2', 'GANJIL', '2001-2002');
3.INSERT INTO `ambilmk` VALUES ('M002', 'MK01', '4', 'GANJIL', '2001-2002');
4.INSERT INTO `ambilmk` VALUES ('M003', 'MK03', '4', 'GENAP', '2001-2002');
1.INSERT INTO `mhs` VALUES ('M001', 'XXX', 'SOLO', '1990-10-01');
2.INSERT INTO `mhs` VALUES ('M002', 'YYY', 'SEMARANG', '1992-08-11');
3.INSERT INTO `mhs` VALUES ('M003', 'ZZZ', 'SOLO', '1991-04-15');
1.INSERT INTO `mk` VALUES ('MK01', 'KALKULUS I', '3', 'GANJIL');
2.INSERT INTO `mk` VALUES ('MK02', 'GEOMETRI', '2', 'GANJIL');
3.INSERT INTO `mk` VALUES ('MK03', 'KALKULUS II', '3', 'GENAP');
Berdasarkan ketiga tabel tersebut, kita bisa melihat relasi antar ketiga tabel tersebut sebagaimana tergambar pada gambar berikut ini
Relasi Tabel
Nah… selanjutnya, misalkan kita ingin menampilkan data mahasiswa (nim, nama) dari mahasiswa yang pernah mengambil matakuliah ‘MK01′. Bagaimana cara membuat query SQL nya?
Sebelum kita mulai membuat query SQL nya, terlebih dahulu harus kita tentukan ‘Di tabel manakah kita akan bekerja‘ dari ketiga tabel tersebut. OK… untuk menampilkan nim dan nama, kita bisa menggunakan tabel ‘mhs’. Sedangkan untuk prasyarat dari query yaitu ‘mahasiswa yang pernah mengambil matakuliah MK01 kita menggunakan tabel ‘ambilmk’. Dengan demikian query yang akan kita buat hanya melibatkan kedua tabel tersebut, yaitu ‘mhs’ dan ‘ambilmk’.
Eh… masih ada lagi hal yang harus diperhatikan, yaitu relasi kedua tabel tersebut. Bila Anda lihat gambar relasi di atas atau hubungan antar ketiga tabel, tabel ‘ambilmk’ dan tabel ‘mhs’ direlasikan melalui field apa? Dari gambar, kita tahu bahwa kedua tabel terhubung melalui field ‘nim’ yang ada di tabel ‘mhs’ dan field ‘nim’ yang ada di tabel ‘ambilmk’. Oleh karena itu di dalam query SQL terutama pada bagian klausa WHERE perlu adanya perintah untuk menggambarkan hubungan tersebut.
Query SQL untuk menampilkan data mahasiswa (nim, nama) dari mahasiswa yang pernah mengambil matakuliah ‘MK01′ adalah sbb:
1.SELECT mhs.nim, mhs.namamhs
2.FROM mhs, ambilmk
3.WHERE mhs.nim = ambilmk.nim AND ambilmk.kodemk = 'MK01';
Perhatikan perintah “mhs.nim = ambilmk.nim” pada query di atas. Perintah tersebut digunakan untuk merelasikan tabel ‘mhs’ dengan ‘ambilmk’ dimana kedua tabel terhubung oleh field ‘nim’ yang ada di masing-masing tabel.
Sehingga hasil dari query SQL di atas adalah
Hasil query SQL
Selanjutnya misalkan kita ingin menampilkan data mahasiswa (nim, nama) beserta nilainya dari mahasiswa yang pernah mengambil matakuliah bernama ‘KALKULUS I’. Bagaimana query SQL nya?
OK… langkah pertama, kita tentukan dulu tabel mana saja yang kita pilih. Untuk menampilkan nim dan nama, kita butuh tabel ‘mhs’. Nilai, kita butuh tabel ‘ambilmk’. Sedangkan nama matakuliah ‘KALKULUS I’ yang digunakan sebagai syarat, kita dapatkan dari tabel ‘mk’. Jadi untuk query ini, kita butuh ketiga tabel semuanya.
Setelah itu, kembali lagi kita lihat gambar relasi ketiga tabel di atas. Tabel ‘mhs’ dan ‘ambilmk’ dihubungkan dengan field ‘nim’ yang ada pada keduanya. Sedangkan tabel ‘mk’ dan ‘ambilmk’ terhubung oleh field ‘kodemk’ yang juga ada pada keduanya. Nah… selanjutnya kita bisa membuat query SQL nya
1.SELECT mhs.nim, mhs.namamhs, ambilmk.nilai
2.FROM mhs, ambilmk, mk
3.WHERE mhs.nim = ambilmk.nim AND mk.kodemk = ambilmk.kodemk AND mk.namamk = 'KALKULUS I';
Perhatikan query SQL di atas, perintah “mhs.nim = ambilmk.nim AND mk.kodemk = ambilmk.kodemk” menunjukkan relasi ketiga tabel. Gunakan operator AND bila relasi tabelnya lebih dari 1 buah. Dan… kedua perintah relasi bisa dibolak-balik (“mk.kodemk = ambilmk.kodemk AND mhs.nim = ambilmk.nim”) karena sifat operasi AND adalah komutatif.
Hasil dari query tersebut adalah
Hasil query SQL
Trus… mungkin ada yang bertanya lagi… bagaimana jika query relasi tabelnya dijalankan di script PHP? Ya… caranya sama saja, Anda tinggal jalankan query SQL untuk relasi tabel di dalam script PHP nya. Dalam hal ini relasi tabel tetap ditentukan oleh query SQL nya.
Sebagai contoh, script PHP di bawah ini akan menampilkan hasil dari query terakhir di atas.
01.<?php
02. 
03.mysql_connect("dbhost", "dbuser", "dbpass");
04.mysql_select_db("dbname");
05. 
06.$query = "SELECT mhs.nim, mhs.namamhs, ambilmk.nilai
07.FROM mhs, ambilmk, mk
08.WHERE mhs.nim = ambilmk.nim AND mk.kodemk = ambilmk.kodemk
09.AND mk.namamk = 'KALKULUS I'";
10.$hasil = mysql_query($query);
11. 
12.echo "<table border='1'>";
13.echo "<tr><td>NIM</td><td>Nama Mhs</td><td>Nilai</td></tr>";
14.while ($data = mysql_fetch_array($hasil))
15.{
16.echo "<tr><td>".$data['nim']."</td><td>".$data['namamhs']."</td><td>".$data['nilai']."</td></tr>";
17.}
18.echo "</table>";
19. 
20.?>
dan hasilnya…
Hasil query SQL dengan PHP
Dengan demikian, saya ulangi lagi bahwa dalam hal ini relasi tabel dilakukan di dalam query SQL nya dan tidak di PHP nya. Script PHP hanya menjalankan query, memfetching data hasil query dan kemudian menampilkannya di browser.

script untuk restore data MySQL

Pada artikel kali ini saya akan menulis artikel cara membuat script PHP untuk restore database MySQL sebagai kelanjutan dari artikel tersebut.
Adapun skenario dari script untuk restore data MySQL sebagai berikut. Andaikan kita telah memiliki file hasil dump database. Selanjutnya, untuk merestore hasil dump tersebut kita browse file dump lalu kita klik tombol prosesnya. Selesai… Namun dalam hal ini, kita sudah tentukan dulu nama databasenya.
Berikut ini adalah tampilan form untuk melakukan restore data.
restore mysql
Bagaimana dengan ide proses restorenya? Untuk proses restore data di MySQL, kita gunakan perintah
1.mysql -u[username] -p[password] dbname < filedump
dengan [username] adalah nama user untuk koneksi ke MySQL, [password] adalah password dari si user. ‘dbname‘ adalah nama database dimana kita ingin merestore data, dan ‘filedump‘ adalah nama file hasil dump (backup). Perintah ini nanti dijalankan di dalam shell.
Lantas… bagaimana dengan ide script untuk restorenya? OK idenya adalah kita lakukan proses upload file dump melalui form. File dump ini akan diupload ke dalam folder yang sama dengan script untuk restore. Setelah file dump diupload, selanjutnya file dump tersebut akan direstore menggunakan perintah di atas. Begitu proses dump selesai, kita hapus file dump yang kita upload tersebut dengan perintah unlink() supaya terhapus secara otomatis.
OK.. ide untuk membuat script restore sudah dapat, sekarang kita bisa buat scriptnya.
restore.php
<?php
// koneksi ke db mysql
$dbHost = "localhost";
$dbUser = "root";
$dbPass = "...";
$dbName = "...";
mysql_connect($dbHost, $dbUser, $dbPass);
mysql_select_db($dbName);
echo "<h1>Restore Data MySQL</h1>";
echo "DB Name: ".$dbName;
// form upload file dumo
echo "<form enctype='multipart/form-data' method='post' action='".$_SERVER['PHP_SELF']."?op=restore'>";
echo "<input type='hidden' name='MAX_FILE_SIZE' value='20000000'><input name='datafile' type='file'><input name='submit' type='submit' value='Restore'>";
echo "</form>";
// proses restore data
if ($_GET['op'] == "restore")
{
// baca nama file
$fileName = $_FILES['datafile']['name'];
// proses upload file
move_uploaded_file($_FILES['datafile']['tmp_name'], $fileName);
// membentuk string command untuk restore
// di sini diasumsikan letak file mysql.exe terletak di direktori C:\AppServ\MySQL\bin
$string = "C:\AppServ\MySQL\bin\mysql -u".$dbUser." -p".$dbPass." ".$dbName." < ".$fileName;
// menjalankan command restore di shell via PHP
exec($string);
// hapus file dump yang diupload
unlink($fileName);
}
?>
Bagaimana? mudah bukan membuatnya? nah silakan adopsi ide di atas ke dalam aplikasi yang Anda buat sendiri. Sebuah aplikasi tanpa fitur backup and restore database serasa masakan tanpa garam :-) Selamat mencoba sendiri ya…

PHP Dasar – Array

Pada artikel ini akan diperkenalkan cara mendeklarasikan array di PHP. Apa itu array? array adalah suatu tipe data dari suatu variabel yang dapat diassign dengan beberapa nilai yang berbeda. Mengapa variabel bertipe data array ini dapat diassign dengan beberapa nilai yang berbeda? Ya… karena dalam variabel tersebut terdapat semacam ruang elemen kosong yang masing-masing diberikan kunci indeks. Di ruang elemen-elemen itulah tempat disimpan beberapa nilai yang diassign.
Dalam PHP, indeks untuk array dapat berupa numerik dan dapat pula berupa suatu nilai atau yang sering disebut dengan array assosiatif.

Array Berindeks Numerik

Sintaks umum untuk menyatakan suatu array berindeks numerik beserta nilainya adalah
1.$nama_array[$key] = value;
Dalam hal ini $key berupa bilangan bulat mulai dari 0, 1, 2, …
Contoh:
1.$karyawan[0] = "Bob";
2.$karyawan[1] = "Sally";
3.$karyawan[2] = "Charlie";
4.$karyawan[3] = "Clare";
Sedangkan berikut ini adalah contoh untuk menampilkan nilai yang disimpan dalam ruang elemen dari suatu array berindeks numerik.
01.&lt;?php
02.$karyawan[0] = "Bob";
03.$karyawan[1] = "Sally";
04.$karyawan[2] = "Charlie";
05.$karyawan[3] = "Clare";
06.echo "Berikut ini adalah 2 orang karyawan saya, yaitu "
07.. $karyawan[0] . " &amp; " . $karyawan[1];
08.echo "&lt;br&gt;Dua orang karyawan saya yang lain adalah "
09.. $karyawan[2] . " &amp; " . $karyawan[3];
10.?&gt;
Array Assosiatif

Untuk array assosiatif, sintaksnya sama dengan array berindeks numerik namun perbedaannya adalah pada $key. Pada array assosiatif, $key dapat berupa suatu string. Berikut ini adalah contohnya.
1.$gaji["Bob"] = 2000;
2.$gaji["Sally"] = 4000;
3.$gaji["Charlie"] = 600;
4.$gaji["Clare"] = 0;
dan berikut ini adalah contoh kode untuk menampilkan nilai dari array assosiatif
01.&lt;?php
02.$gaji["Bob"] = 2000;
03.$gaji["Sally"] = 4000;
04.$gaji["Charlie"] = 600;
05.$gaji["Clare"] = 0;
06.echo "Bob digaji - $" . $gaji["Bob"] . "&lt;br&gt;";
07.echo "Sally digaji - $" . $gaji["Sally"] . "&lt;br&gt;";
08.echo "Charlie digaji - $" . $gaji["Charlie"] . "&lt;br&gt;";
09.echo "dan Clare digaji - $" . $gaji["Clare"];
10.?&gt;

Jumat, 04 November 2011

PHP AJAX jQuery

Tutorial PHP AJAX jQuery ini merupakan versi kedua dari Tutorial AJAX JQuery. Tutorial kedua ini dibuat karena ada banyak yang tidak mengerti dengan tutorial versi pertama. Sebelum mengikuti tutorial ini silahkan download jQuery di jQuery.com.

Seperti dijelaskan sebelumnya di Tutorial AJAX JQuery. AJAX memerlukan XMLHttpRequest Object untuk dapat me-request sebuah halaman web secara Asynchronous. Untuk membentuk object XMLHttpRequest dijelaskan di Tutorial Dasar Dasar Ajax. Dengan adanya jQuery anda tidak perlu lagi memikirkan kode javascript untuk membentuk object XMLHttpRequest. jQuery akan membuatkannya untuk anda. Sebelum mulai menggunakan jQuery AJAX anda perlu tahu sedikit tentang jQuery Selector.

jQuery Selector


Ada beberapa jQuery selector yang akan digunakan ditutorial ini.
Selector ID.
contoh: $("#nama"), setara dengan document.getElementById('nama'), untuk memilih element html dengan id="nama".
Selector Class.
contoh: $(".red"), pengganti document.getElementsByClassName('red'), untuk memilih semua element dengan class="red".
Selector Element.
contoh: $("div"), setara dengan document.getElementsByTagName('div'), untuk memilih semua element div.
Untuk lebih jelas silahkan kunjungi dokumentasi jQuery.

Menyimpan Data ke Database dengan jQuery AJAX


Misalkan anda memiliki sebuah database dengan nama 'example', dengan sebuah tabel 'pegawai' dengan struktur seperti berikut:

untuk menyimpan data pegawai ke table di atas tentunya anda memerlukan sebuah html form seperti:
  1. <form name="form1" id="form1" action="" method="post">  
  2. <p>NIP: <input type="text" name="nip" id="nip"/></p>  
  3. <p>Nama: <input type="text" name="nama" id="nama"/></p>  
  4. <p>Jenis Kelamin: <select name="jenis_kelamin" id="jenis_kelamin">  
  5.  <option value="L">Laki Laki</option>  
  6.  <option value="P">Perempuan</option>  
  7. </select></p>  
  8. <p>Tanggal Lahir: <input type="text" name="tgl_lahir" id="tgl_lahir"/></p>  
  9. <p>Alamat: <textarea name="alamat" id="alamat"></textarea></p>  
  10. <p><input type="button" value="Save" onclick="simpanPegawai(); return false;"/></p>  
  11. </form>  

tanpa menggunakan jQuery anda akan membutuhkan kode javascript panjang berikut.
  1. <form name="form1" id="form1" action="" method="post">  
  2. <p>NIP: <input type="text" name="nip" id="nip"/></p>  
  3. <p>Nama: <input type="text" name="nama" id="nama"/></p>  
  4. <p>Jenis Kelamin: <select name="jenis_kelamin" id="jenis_kelamin">  
  5.  <option value="L">Laki Laki</option>  
  6.  <option value="P">Perempuan</option>  
  7. </select></p>  
  8. <p>Tanggal Lahir: <input type="text" name="tgl_lahir" id="tgl_lahir"/></p>  
  9. <p>Alamat: <textarea name="alamat" id="alamat"></textarea></p>  
  10. <p><input type="button" value="Save" onclick="simpanPegawai(); return false;"/></p>  
  11. </form>  
  12. <div id="loading"></div>  
  13. <script type="text/javascript">  
  14. function getXMLHttpRequest(){  
  15.  if(window.ActiveXObject){  
  16.  return new ActiveXObject("Microsoft.XMLHTTP");   
  17.  }else if(window.XMLHttpRequest){  
  18.  return new XMLHttpRequest();  
  19.  }else {alert("Status : can not create XMLHttpRequest Object");}   
  20. }  
  21. function simpanPegawai(){  
  22.  var xmlhttp = getXMLHttpRequest();  
  23. /*simpan.php adalah file php yang meng-handle proses menyimpan data*/  
  24.  xmlhttp.open('POST', 'simpan.php', true);  
  25.  xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");  
  26.  document.getElementById('loading').innerHTML = 'loading...';  
  27.  xmlhttp.onreadystatechange=function(){  
  28.  if(xmlhttp.readyState == 4){  
  29.  if(xmlhttp.status == 200){  
  30.  document.getElementById('loading').innerHTML = xmlhttp.responseText;  
  31.  }  
  32.  }  
  33.  }  
  34.  var data = 'nip='+document.getElementById('nip').value;  
  35.  data += '&namanama='+document.getElementById('nama').value;  
  36.  data += '&jenis_kelaminjenis_kelamin='+document.getElementById('jenis_kelamin').value;  
  37.  data += '&tgl_lahirtgl_lahir='+document.getElementById('tgl_lahir').value;  
  38.  data += '&alamatalamat='+document.getElementById('alamat').value;  
  39.  xmlhttp.send(data);  
  40. }  
  41. </script>  

dan tentunya file simpan.php untuk menyimpan data ke database.
  1. <?php  
  2. /*file simpan.php*/  
  3. mysql_connect("localhost", "user", "password");  
  4. mysql_select_db("example");  
  5.   
  6. mysql_query("insert into pegawai set nip='".$_POST['nip']."',  
  7.  nama='".$_POST['nama']."', jenis_kelamin='".$_POST['jenis_kelamin']."',  
  8.  tgl_lahir='".$_POST['tgl_lahir']."', alamat='".$_POST['alamat']."'");  
  9. echo 'Data telah disimpan';  
  10. ?>  

sekarang coba bandingkan dengan menggunakan jQuery.
  1. <form name="form1" id="form1" action="" method="post">  
  2. <p>NIP: <input type="text" name="nip" id="nip"/></p>  
  3. <p>Nama: <input type="text" name="nama" id="nama"/></p>  
  4. <p>Jenis Kelamin: <select name="jenis_kelamin" id="jenis_kelamin">  
  5.  <option value="L">Laki Laki</option>  
  6.  <option value="P">Perempuan</option>  
  7. </select></p>  
  8. <p>Tanggal Lahir: <input type="text" name="tgl_lahir" id="tgl_lahir"/></p>  
  9. <p>Alamat: <textarea name="alamat" id="alamat"></textarea></p>  
  10. <p><input type="button" value="Save" onclick="simpanPegawai(); return false;"/></p>  
  11. </form>  
  12. <div id="loading"></div>  
  13. <!-- sesuaikan dengan file jquery yang anda download -->  
  14. <script type="text/javascript" src="jquery-1.4.2.min.js"></script>  
  15. <script type="text/javascript">  
  16. function simpanPegawai(){  
  17.  $("#loading").html('loading...');  
  18.  $.post('simpan.php', $("form").serialize(), function(hasil){  
  19.  $("#loading").html(hasil);  
  20.  });  
  21. }  
  22. </script>  

bisa dilihat perbedaan yang signifikan, tanpa jQuery membutuhkan 28 baris (13-14) kode javascript, sedangkan dengan jQuery hanya dibutuhkan 9 baris (14-22) kode javascript. Dibaris 14 ditambahkan library jQuery, kemudian di function savePegawai() baris ke-17 untuk menampilkan kata 'loading...' kepada user. Baris 18-20 adalah pengganti baris 24-39 kode sebelumnya yang tanpa jQuery. function jQuery $.post (bisa juga dengan jQuery.post) memiliki 3 parameter
$.post(url,data,callback_function);
url: diisi dengan url yang direquest, dalam hal ini adalah file simpan.php;
data: diisi dengan data yang dikirim ke server, kode di atas menggunakan function jQuery.serialize() untuk mengisi parameter ini. Function jQuery.serialize() mengkodekan (Encode) semua element form beserta value masing masing menjadi sebuah string data untuk dikirim ke server;
callback_function: diisi dengan function yang dipanggil setelah proses request selesai.

Menampilkan Data dengan jQuery AJAX


Untuk menampilkan data, pertama yang harus dibuat adalah file php untuk membaca data dari database. Misalnya seperti kode php di bawah.
  1. <?php  
  2. /*file tampil.php*/  
  3. mysql_connect("localhost", "user", "password");  
  4. mysql_select_db("example");  
  5. ?>  
  6. <table>  
  7.  <tr>  
  8.  <td>NIP</td>  
  9.  <td>Nama</td>  
  10.  <td>Jenis kelamin</td>  
  11.  <td>TGL Lahir</td>  
  12.  <td>Alamat</td>  
  13.  </tr>  
  14.  <?php  
  15.  $query = mysql_query("select * from pegawai");  
  16.  while($pegawai = mysql_fetch_array($query)){  
  17.  echo '<tr>';  
  18.  echo '<td>'.$pegawai['nip'].'</td>';  
  19.  echo '<td>'.$pegawai['nama'].'</td>';  
  20.  echo '<td>'.$pegawai['jenis_kelamin'].'</td>';  
  21.  echo '<td>'.$pegawai['tgl_lahir'].'</td>';  
  22.  echo '<td>'.$pegawai['alamat'].'</td>';  
  23.  echo '</tr>';  
  24.  }  
  25.  ?>  
  26. </table>  

Selanjutnya adalah menggunakan AJAX untuk request file tampil.php di atas. Tanpa jQuery anda akan membuat kode javascript seperti:
  1. <a href="javascript:loadData()">Load Data</a>  
  2. <div id="pegawai"></div>  
  3. <script type="text/javascript">  
  4.  function getXMLHttpRequest(){  
  5.  if(window.ActiveXObject){  
  6.  return new ActiveXObject("Microsoft.XMLHTTP");  
  7.  }else if(window.XMLHttpRequest){  
  8.  return new XMLHttpRequest();  
  9.  }else {alert("Status : can not create XMLHttpRequest Object");}  
  10.  }  
  11.  function loadData(){  
  12.  var xmlhttp = getXMLHttpRequest();  
  13.  document.getElementById('pegawai').innerHTML = 'loading...';  
  14.  xmlhttp.open('GET', 'tampil.php', true);  
  15.  xmlhttp.onreadystatechange = function(){  
  16.  if(xmlhttp.readyState == 4){  
  17.  if(xmlhttp.status == 200){  
  18.  document.getElementById('pegawai').innerHTML = xmlhttp.responseText;  
  19.  }  
  20.  }  
  21.  }  
  22.  xmlhttp.send(null);  
  23.  }  
  24. </script>  

Sedangkan dengan menggunakan jQuery anda hanya membutuhkan kode javascript singkat di bawah:
  1. <a href="javascript:loadData()">Load Data</a>  
  2. <div id="pegawai"></div>  
  3. <!-- sesuaikan dengan file jquery yang anda download -->  
  4. <script type="text/javascript" src="jquery-1.4.2.min.js"></script>  
  5. <script type="text/javascript">  
  6. function loadData(){  
  7.  $("#pegawai").load('tampil.php');  
  8. }  
  9. </script>  

Bisa dilihat perbedaan yang sangat siginifikan antara menampilkan data dengan jQuery AJAX dibandingkan dengan tanpa jQuery. Tanpa jQuery membutuhkan 22 baris (3-24) kode javascript, sedangkan dengan jQuery hanya dibutuhkan 6 baris. Untuk menampilkan data dengan jQuery AJAX, digunakan function jQuery.load(); function jQuery.load() memiliki dua parameter:
.load(url, [callback_function]);
url: diisi dengan url yang ingin direquest, dalam hal ini adalah file tampil.php;
callback_function: function yang dipanggil setelah proses selesai, parameter ini optional, bisa tidak diisi.
function ini setara dengan function jQuery.get().

PHP untuk pasang Indikator Status Yahoo! Messenger

Punya account di Yahoo? Sering chatting menggunakan Yahoo! Messenger? Ingin menampilkan status YM anda pada website anda? Berikut cara menampilkan indikator status YM pada website:
- ukuran kecil:
YM
<img border=0 src="http://opi.yahoo.com/online?u=yahoo_id_anda&m=g&t=0" />
- ukuran sedang:
s
<img border=0 src="http://opi.yahoo.com/online?u=yahoo_id_anda&m=g&t=1" />
-ukuran besar:
s
<img border=0 src="http://opi.yahoo.com/online?u=yahoo_id_anda&m=g&t=2" />
Ganti yahoo_id_anda dengan id yahoo yang akan ditampilkan.

Mengenal PHP

PHP merupakan salah satu bahasa pemrograman web yang paling banyak digunakan saat ini. Hasil dari NetCraft, menyatakan bahwa ada kurang lebih 52juta pengguna PHP diseluruh dunia atau kalau di persentase sekitar 70,9%. Sebuah angka yang fantastis untuk sebuah bahasa pemrograman.
Nah, sebelum terkagum-kagum dengan PHP, ada baiknya kita berkenalan dulu dengan bahasa pemrograman website yang satu ini..
Sejarah
Sejarah PHP dimulai pada Tahun 1995, ketika Rasmus Lerdorf -seorang software development contractor – mengembangkan skrip Perl/CGI untuk mengetahui jumlah pembaca online resume-nya. Skrip tersebut mengerjakan dua hal : mencatat informasi pengunjung, dan menampilkan jumlah pengunjung ke halaman web. Waktu itu belum ada tools seperti yang dibuat oleh Rasmus, sehingga banyak developer yang mengirimkan e-mail ke Rasmus, menanyakan tentang skrip yang dibuatnya. Hal itulah yang membuat Rasmus melepas skripnya, dan diberi nama PHP (Personal Home Page).
Rasmus kemudian mulai mengembangkan banyak tambahan pada PHP, salah satu diantaranya adalah mengubah data yang dimasukkan dalam form HTML menjadi sebuah variabel. Pengubahan data ini nantinya akan memungkinkan user untuk mengekspor data ke dalam sistem mereka. Untuk menyelesaikan tambahan tersebut, Rasmus lebih memilih menggunakan bahasa C daripada Perl.
Tambahan terus-menerus kepada PHP toolset memuncak pada November 1997 dengan pelepasan PHP 2.0, atau Personal Home Page — Form Interpreter (PHP-FI). Peluncuran ini juga meningkatkan popularitas PHP, yang ditandai dengan banyaknya pengembangan dan perbaikan yang dilakukan oleh programmer di seluruh dunia.
Peluncuran PHP yang sedemikian populer, membuat sebuah tim developer bergabung dengan Rasmus. Mereka menjaga konsep penyisipan kode secara langsung ke dalam HTML, dan menulis kembali parsing engine-nya. Hal ini kemudian melahirkan PHP 3.0. Pada pelepasannya -ditahun 1998-, ada 50.000 user yang menggunakan PHP pada website mereka.
Pada tahun 1999, NetCraft mencatat ada 1.000.000 lebih pengguna PHP yang membuat PHP menjadi “the most popular scripting languages in the world”.
Dua pengembang inti PHP, Zeev Suraski dan Andi Gutmans, mengambil inisiatif untuk mempelopori pemikiran kembali tentang bagaimana PHP dioperasikan, dan kemudian mengenalkan Zend scripting engine.Hasilnya dapat dilihat dari peluncuran PHP 4.
Lalu apa keuntungan menggunakan PHP?
Keuntungan menggunakan PHP
PHP terkenal dengan 4 kelebihannya :
* Practical / Praktis :
PHP adalah bahasa pemrograman yang sangat longgar dalam penulisan, dan ini meningkatkan kepraktisan buat para penggunanya. Misalnya saja programmer tidak diharuskan untuk menuliskan atau menghapus variabel. Walaupun kadang mereka juga tidak bisa mengatakan dengan mudah yang kemudian dipanggil dalam sebuah skrip, menebak formula terbaik dalam penetapan variabel secara otomatis kemudian menghapus variabel dan dan mengembalikan resource ke sistem setelah skrip berhasil di eksekusi.Pada akhirnya, PHP mampu membuat programmer lebih berpikir pada tujuan akhir dari project yang akan dibuat.
* Power
Sudah jadi rahasia umum kalau PHP mampu membuat halaman dinamis, memanipulasi form, dan dapat dihubungkan dengan database. Selain yang disebutkan tadi, ternyata PHP juga mampu melakukan hal-hal dibawah ini:
– Membuat dan memanipulasi file Macromedia Flash, gambar, dan Portable Document Format (PDF),
– Mengevaluasi sebuah password. Misal: Apakah sebuah password yang dibuat, gampang ditebak atau tidak.
– Berkomunikasi dengan LDAP
– Menguraikan string, bahkan yang kompleks sekalipun, dengan menggunakan POSIX dan Perl Based Regular Expression Library
– Berkomunikasi dengan banyak protokol, termasuk IMAP, POP3 dan NNTP
– Berkomunikasi dengan credit-card processing solution
* Possibility
Jarang ada developer PHP yang terikat pada suatu implementasi pemecahan masalah. Dilain sisi, ada banyak pilihan yang ditawarkan oleh PHP.
Contohnya ada pada database yang didukung oleh PHP. Kurang lebih semuanya ada 25 database, termasuk Adabas D, dBase, Empress, FilePro, FrontBase, Hyperwave, IBM DB2, Informix, Ingres, Interbase, mSQL, direct MS-SQL, MySQL, Oracle, Ovrimos, PostgreSQL, Solid, Sybase, Unix dbm, dan Velocis.
Kemampuan string-parsing juga bisa dianggap sebagai banyaknya kemungkinan yang ditawarkan oleh PHP. Dalam hal in, PHP memiliki lebih dari 85 function untuk memanipulasi string. Kelebihan ini tak hanya akan menawarkan keleluasaan untuk melakukan operasi string yang kompleks, namun juga menjembatani program yang memiliki fungsionalitas yang sama (seperti Python dan Perl) lewat PHP.
* Price
PHP merupakan salah satu open source software, yang dapat diartikan sebagai berikut:
* PHP dapat dimodifikasi, didistribusikan, dan diintegrasikan dengan produk lain oleh penggunanya
* Pengembangan dan auditing yang dilakukan secara terbuka.
* Semua orang bebas berpastisipasi.
Mulai tertarik? Yuk, kita lihat fitur-fitur terbarunya PHP
Fitur pada PHP 4
PHP 4 bukan merupakan versi terakhir yang sudah dikeluarkan oleh PHP, tapi versi ini masih banyak digunakan oleh para programmer website, ini dia fitur-fiturnya
* Meningkatkan penanganan pada resource yang digunakan
Kekurangan utama dari PHP 3.0 adalah skalabilitas. Para programmer masih menganggap PHP 3.0 belum mampu digunakan pada aplikasi-aplikasi berskala besar. Hal ini membuat para developer PHP berkerja keras untuk meningkatkan kemampuan penanganan resource, sehingga PHP mampu dijalankan pada aplikasi-aplikasi berskala besar.
* Dukungan pada pemrograman berorientasi objek
Fitur ini memainkan peranan penting bagi user untuk dapat bekerja dengan bahasa pemrograman berorientasi objek.
* Dukungan pada penanganan session
Penanganan pada session HTTP sebenarnya juga sudah ada pada versi PHP 3.0. Namun, masih menggunakan dukungan pihak ketiga, yaitu PHPLIB (http://phplib.sourceforge.net). nah, pada versi 4 ini, session sudah mampu ditangani langsung oleh PHP.
Fitur ini menawarkan interaksi dari website. contoh yang paling umum digunakan adalah pada proses login dan logout.
* Enkripsi
MCrypt (http://mcrypt.sourceforge.net) sudah digabung pada distribusi asli. Fitur ini menawarkan algoritma enkripsi diantaranya Blowfish, MD5, SHA1, dan tripleDES.
* Dukungan ISAPI
Fitur ini menghubungkan webserver IIS (dari Microsoft) dan PHP dan dianggap sebagai modul ISAPI.
* Dukungan COM/DCOM
Nah, kalu yang ini, anggap aja sebagai bonus buat pengguna Windows. Fitur ini memungkinkan PHP untuk mengakses objek COM dan menambah interoperabilitas dengan aplikasi yang berjalan di Windows.
* Dukungan terhadap Java
* Perl Compatible Regular Expressions (PCRE) library
Fitur pada PHP 5
PHP 5 merupakan kelanjutan dari evolusi yang berjalan pada PHP. Walaupun pada PHP 4 sudah banyak library yang ditambahkan, PHP 5 menawarkan peningkatan dari fungsionalitas dan penambahan beberapa fitur, antara lain:
* Peningkatan dari kemampuan pemrograman berorientasi objek
* Exception handling, yang menstandarisasi logika atas pemberitahuan kesalahan pemrograman.
* Peningkatan terhadap penanganan string
* Peningkatan dukungan terhadap XML dan Web Service, yang menggunakan libxml2.
* Dukungan terhadap SQLite database server

operasi – operasi dasar pada PHP MySQL

Pada tutorial kali ini, kita akan mencoba melakukan operasi – operasi dasar pada PHP MySQL.
1. Membuat koneksi

<?php
$hostmysql = “localhost”;
$username = “mysqlusername”;
$password = “mysqlpassword”;
$database = “namadatabase”;

$conn = mysql_connect(“$hostmysql”,”$username”,”$password”);
if (!$conn) die (“Koneksi gagal”);
mysql_select_db($database,$conn) or die (“Database tidak ditemukan”); >

Penjelasan Script:
a. mysql_connect
digunakan untuk membuat koneksi dari PHP ke server MySQL. Data mengenai hostname, mysql username, dan password yang digunakan telah diwakilkan oleh variabel $hostmysql, $username, $password. Penulisannya akan sama dengan:
mysql_connect(“localhost”,”username”,”password”);
b. mysql_select_db
untuk memilih database yang akan digunakan.
c. if (!$conn) die (“Koneksi gagal”);
jika koneksi gagal dibuat (!$conn), maka akan muncul pesan kesalahan
Setiap operasi PHP yang berhubungan dengan MySQL, akan membutuhkan sintaks diatas. agar lebih mudah, lebih baik disimpan terlebih dahulu dengan nama konfig.php. Jika sintaks tersebut dibutuhkan lagi, maka kita melakukan include terhadap file konfig.php tersebut.
2. Membuat tabel pada MySQL

<?php
include (“konfig.php”);
mysql_query(“CREATE TABLE user (
namadpnVARCHAR(20),
namablkg VARCHAR(20),
negara VARCHAR(20))”); ?>

Penjelasan script:
1. include (“konfig.php”);
perintah include digunakan untuk mengikut sertakan sebuah file (pada contoh diatas adalah file konfig.php).
2. mysql_query
format umum dari perintah ini adalah mysql_query(string dari query).
mysql_query akan sering dijumpai pada artikel kali ini.
3. Memasukkan data pada tabel

<?php
include (“konfig.php”);
$insert = “INSERT INTO users (namadpn,namablkg,negara)
VALUES (‘Saya’,'Sendiri’,'Indonesia’)”;
mysql_query($insert) or die (“tidak dapat memasukkan data ke tabel”);?>


4 . Menampilkan data dari tabel

<?php
include (“konfig.php”);
$query = “SELECT * FROM user”;
$result = mysql_query($query);
$numrows = mysql_num_rows($result);
while($row = mysql_fetch_array($result)){
echo “Jumlah data: $numrows <br>”;
echo “Nama Depan: $row[namadpn] <br>”;
echo “Nama Belakang: $row[namablkg] <br>”;
echo “Negara: $row[negara]“;
} ?>

Penjelasan script:
1. mysql_num_rows
digunakan untuk menghitung jumlah baris yang didapat dari hasil eksekusi query (mysql_query).
2. while ( ) {
}
digunakan untuk melakukan perulangan selama data yang yang diinginkan masih ada. (dalam contoh diatas: akan menampilkan semua isi dari table).
3. mysql_fetch_array
menampilkan data dari tabel dalam bentuk array
Untuk penggunaan lainnya (hapus, update, dsb) yang berubah hanya string query-nya saja.

Belajar Ajax dengan PHP dan Jquery

Ajax dengan PHP dan Jquery web desain grafisBanyak sekali permintaan yang datang kepada penulis perihal bagaimana cara mudahnya menghasilkan fitur ajax dengan menggunakan jquery dan php. Ajax merupakan satu fitur yang digunakan oleh para developer, baik menambah data, menghapus, mengupdate, tanpa melakukan refresh page, atau redirect page.
Banyak cara juga untuk dapat menghasilkan ajax ini, ada develepor yang membuat engine sendiri, tentunya menggunakan standarisasi ajax, ada juga yang menggunakan javascript plugin, seperti jquery misalnya.
Di tutorial kali ini, penulis akan menjelaskan sedikit saja bagaimana menghasilkan fitur ajax menggunakan php dan jquery. Caranya sangat-sangat mudah sekali. Anda cukup mengikuti syntaxnya, dan memahami alurnya. Tapi sebelumnya terlebih dahulu Anda membaca tutorial saya sebelumnya tentang pengenalan jquery.
Setidaknya diperlukan paling tidak 3 buah file minimal, pertama adalah file yang digunakan untuk mengirimdata, kemudian file yang digunakan untuk menerima data ataupun memproses data, dan yang terakhir adalah jquery librarynya itu sendiri.
Oke disini saya memiliki file index.php yang berfungsi dalam mengirimkan data
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”>
<html>
<head>
<title></title>
<meta name=”" content=”">
<script type=”text/javascript” src=”jquery-1.6.4.js”></script>
<script type=”text/javascript”>
$(document).ready(function(){
$(‘#ajaxTest’).submit(function(eve){
eve.preventDefault();


$.ajax({
url: “/function.php”,
type: “POST”,
dataType: “html”,
data: $(this).serialize(),
beforeSend: function(){
$(‘#waiting’).text(‘Mohon Tunggu Sebentar’).fadeIn(‘slow’);
},
success: function(html){
$(‘#waiting’).fadeOut(‘slow’);
$(‘#result’).text(html).fadeIn(‘slow’).fadeOut(‘slow’).fadeIn(‘slow’);
}
});
});
});      
</script>

</head>
<body>
<form method=”POST” id=”ajaxTest”>
<input type=”input” name=”ajaxInput” />
<input type=”submit” name=”ajaxBtn” value=”Test Button” />
</form>
<div id=”waiting”></div>
<div id=”result”></div>
</body>
</html>

selanjutnya adalah function.php yang digunakan dalam menerima dan memproses data berisi :

<?php
echo $_POST['ajaxInput'];
?>

dan file yang terakhir adalah file jquery itu sendiri saya menggunakan jquery versi 1.6.4. Yang perlu disorot adalah jquery script yang ada dibagian headnya :
<script type=”text/javascript” src=”jquery-1.6.4.js”></script>
<script type=”text/javascript”>
$(document).ready(function(){

$(‘#ajaxTest’).submit(function(eve){
eve.preventDefault();
$.ajax({
url: “/function.php”,
type: “POST”,
dataType: “html”,
data: $(this).serialize(),
beforeSend: function(){
$(‘#waiting’).text(‘Mohon Tunggu Sebentar’).fadeIn(‘slow’);
},
success: function(html){
$(‘#waiting’).fadeOut(‘slow’);
$(‘#result’).text(html).fadeIn(‘slow’).fadeOut(‘slow’).fadeIn(‘slow’);
}
});
});
});      
</script>

jquery action selalu diawali dengan
$(document).ready(function(){
dan di akhiri dengan
});
kemudian baris selanjutnya adalah :
$(‘#ajaxTest’).submit(function(eve){
eve.preventDefault();

ini berarti submit form yang tadinya disubmit secara langsung ke action formnya alihkan dengan menggunakan jquery ajax, jadi ketika diklik maka tidak akan berpindah ke halaman action formnya. Yang ada malahan jquery yang mengambil alih ketika button submit di klik.
kemudian baris selanjutnya adalah :
$.ajax({
url: “/function.php”,
type: “POST”,
dataType: “html”,
data: $(this).serialize(),

url berisi halaman penerima data yang akan dikirim, kemudian type POST anda sudah tahu maknanya, dataType HTML kita lewat saja, dan yang terakhir adalah data:($this).serialize() artinya kirimkan data yang datanya itu diambil dari input-input yang ada dalam form.
sedangkan baris selanjutnya penulis yakin Anda sudah paham maknanya,
beforeSend: function(){
$(‘#waiting’).text(‘Mohon Tunggu Sebentar’).fadeIn(‘slow’);
},

success: function(html){
$(‘#waiting’).fadeOut(‘slow’);
$(‘#result’).text(html).fadeIn(‘slow’).fadeOut(‘slow’).fadeIn(‘slow’);
}
});

Belajar JQuery tahap 1

WebDesigner mana yang nggak kenal dengan library javascript yang satu ini? Bahkan webdesigner dari gunung sekalipun penulis yakin sudah mengetahui library yang satu ini. Mohon maaf bagi anda webdesigner dari gunung, bukan maksud penulis mengolok-olok, tapi jangan salahkan ibu mengandung, jangan salahkan bapak mengundang. :D. Meskipun sebetulnya selain Jquery ada juga library yang sama tangguhnya, seperti mootools, scriptaculous, dan banyak lagi yang aneh-aneh, sering juga perhelatan mengenai mana yang paling bagus tetap ada hingga sekarang, penulis sendiri di tengah saja, karena masing-masing library memiliki kelebihan masing-masing, gimana seleranya aja. Yang jelas untuk menggunakan jquery dasar yang harus anda kuasai adalah, HTML, CSS, dan sedikit saja bekal pengetahuan javascript, seperlunya dan sesuai selera.
Sebetulnya apa yang menarik dari JQuery? Selain penggunaanya diketik menggunakan keyboard, library yang lengkap, manual dan tutorial yang berjibun banyaknya di internet, pluginnya pun cukup banyak sekali, bagi anda yang dikejar deadline mungkin bisa langsung membuka http://www.jqueryplugins.com untuk mendapatkan efek jquery yang di inginkan. Sementara untuk artikel yang sekarang ini penulis hanya akan mengkhususkan belajar jquery dari dasar bukan untuk menggunakan plugin jquery.
Untuk artikel kali ini penulis akan memulai pembahasan pondasi dari jquery, yakni Memulai Jquery dengan Selector.
Mengapa jquery bisa membuat efek yang begitu memukau, memainkan HTML sehingga menjadikan suatu website jadi sangat interaktif? Salah satu alasannya adalah penggunaan selector yang mudah. Apa sebetulnya selector ? Konsep selector miliki jquery bisa dibilang mengadopsi dari konsep selectornya CSS. Ada selector id, selector class, dan selector tag. Bingungkan ??? Sama dong kita. Lebih baik kita langsung terjun bebas saja untuk mempraktikan jquery. Bagaimana???
Hal pertama yang dilakukan adalah kita download terlebih dahulu JQuery, anda bisa mengunjungi http://docs.jquery.com/Downloading_jQuery untuk langsung mendownloadnya, atau bisa juga mengklik link ini http://code.jquery.com/jquery-1.4.2.js sama saja. Saya tidak sedang berusaha untuk menipu anda. :D. Oke, letakkan file tersebut misalnya di c:belajarjqueryjquery-1.4.2.js. Selesai? Lanjutkan! Lebih cepat lebih baik.
Oke, selanjutnya siapkan satu buah file html, dan letakkan satu direktori dengan jquery-1.4.2.js yang tadi kita download. Berikan namanya misalkan, latihan.selector1.html
Kemudian isi di bagian body seperti ini :
<p>Orang-orang liberal mengatakan pergerakan untuk mempersatukan kaum muslimin seluruh dunia di bawah naungan Al-Khilafah itu merupakan suatu mimpi belaka. Terlalu utopis. “Mana bisa!!”, kata mang Abdul Mosqid.
Aneh dan heran … herannya kenapa mimpi indah seperti ini nggak dibiarkan tuk tetep ada. Malah dilarang-larang. Kan aneh bin mahfuz itu namanya. Dikit-dikit dilarang … dikit-dikit dilarang. Di larang kok dikit-dikit. Haha… Yang bikin penasaran lagi kenapa begitu giatnya perjuangan mereka (orang-orang perguruan pencak silat liberal) dalam menutup gaung upaya penegakkan syariat islam lewat berbagai media. Acara ngoprek Al-Quran bareng-bareng pun jadi kegiatan keseharian. Ngopreknya nggak tanggung-tanggung, Al-Quran dicocokkin dengan akal mereka sendiri, yang nggak sesuai dikritisi, dicaci maki. Hahaha … keren-keren… Terus, kalo penegakkan syariat islam itu dibilang cuma mimpi belaka doang, Kenapa JIL harus nerbitin media kaya islamlib.com, mang Gusdur dengan wahid institutenya, dan berbagai media lainnya yang berusaha secara terang-terangan menjauhkan orang-orang islam dari gaung penegakkan syariat islam? dan bahkan nggak jarang mereka justru melencengkan arti dan makna syariat islam yang sebenarya. Heran deh gw. Heran nggak sih loh? Ada apa dibalik semua ini? Ada apa gerangan? Ada apa mang ulil meng-erang-erang? Haha…
</p>
<div id=”kotakkotaknora”></div>
<a href=”#”>Klik klik…</a>
Kemudian kita sisipkan script ini dibagian head :
<script type=”text/javascript” src=”jquery-1.4.2.js”></script>
<script type=”text/javascript”>
$(“document”).ready(function(){
$(“a”).click(function(){
$(“p.kalimat”).css(“color”, “red”);
$(“#kotakkotaknora”).addClass(“red”);
});
});
</script>
<style type=”text/css”>
.red{
height:200px;
width:200px;
background-color: red;
}
</style>
Oke, bagaimana ? masih bingung ?? Mari kita bahas javascriptnya. Pertama kita memanggil library jquery,
<script type=”text/javascript” src=”jquery-1.4.2.js”></script>
Jangan sampai pertanyaan mengapa itu ada. Apa? Ya, karena bagaimana mungkin kita bisa menggunakan fasilitas jquery tanpa kita menyisipkan jquery ke dalam tag head. Oke kita lanjut.
<script type=”text/javascript”>
$(“document”).ready(function(){
$(“a”).click(function(){
$(“p.kalimat”).css(“color”, “red”);
$(“#kotakkotaknora”).addClass(“red”);
});
});
</script>
Ketika halaman html telah di load sepenuhnya
$(“document”).ready(function(){
Dan ketika selector tag ‘a’ di halaman website tersebut di klik
$(“a”).click(function(){
Rubah kalimatnya yang berada dalam selector tag p dengan selector class samadengan kalimat menjadi warna merah
$(“p.kalimat”).css(“color”, “red”);
Kemudian berikan style untuk selector id kotakkotaknora.
$(“#kotakkotaknora”).addClass(“red”);
Penutupnya.
});
});

Sehingga yang harus di catat adalah, untuk memanggil elemen yang memiliki id, misalnya elemen div dia memiliki id, maka jquerynya memanggil dengan selector #id.
Sehingga <div id=”kotakotaknora”></div> di panggil oleh jquery dengan $(“#kotakkotaknora”).
Begitu pun halnya class dalam css, misalnya <p class=”kalimat”></p>
Lalu yang terakhir adalah tag selector, misalnya <a href=”#”> karena dia tidak memiliki id maupun class maka jquery memanggilnya dengan $(“a”).
Mudah ya? Oke kita perdalam lagi untuk tutorial selanjutnya.
Script lengkapnya adalah seperti ini, atau bisa juga download di sini
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”>
<html>
<head>
<title></title>
<meta name=”" content=”">
<meta name=”vs_targetSchema” content=”http://schemas.microsoft.com/intellisense/ie5″>
<script type=”text/javascript” src=”jquery-1.4.2.js”></script>
<script type=”text/javascript”>
$(“document”).ready(function(){
$(“a”).click(function(){
$(“p.kalimat”).css(“color”, “red”);
$(“#kotakkotaknora”).addClass(“red”);
});
});
</script>
<style type=”text/css”>
.red{
height:200px;
width:200px;
background-color: red;
}
</style>
</head>
<body>
<p>Orang-orang liberal mengatakan pergerakan untuk mempersatukan kaum muslimin seluruh dunia di bawah naungan Negara Daulah Al-Khilafah Islamiyah itu merupakan suatu mimpi belaka. Terlalu utopis. “Mana bisa!!”, kata mang Abdul Mosqid.
Aneh dan heran … herannya kenapa mimpi indah seperti ini nggak dibiarkan tuk tetep ada. Malah dilarang-larang. Kan aneh bin mahfuz itu namanya. Dikit-dikit dilarang … dikit-dikit dilarang. Di larang kok dikit-dikit. Haha… Yang bikin penasaran lagi kenapa begitu giatnya perjuangan mereka (orang-orang perguruan pencak silat liberal) dalam menutup gaung upaya penegakkan syariat islam lewat berbagai media. Acara ngoprek Al-Quran bareng-bareng pun jadi kegiatan keseharian. Ngopreknya nggak tanggung-tanggung, Al-Quran dicocokkin dengan akal mereka sendiri, yang nggak sesuai dikritisi, dicaci maki. Hahaha … keren-keren… Terus, kalo penegakkan syariat islam itu dibilang cuma mimpi belaka doang, Kenapa JIL harus nerbitin media kaya islamlib.com, mang Gusdur dengan wahid institutenya, dan berbagai media lainnya yang berusaha secara terang-terangan menjauhkan orang-orang islam dari gaung penegakkan syariat islam? dan bahkan nggak jarang mereka justru melencengkan arti dan makna syariat islam yang sebenarya. Heran deh gw. Heran nggak sih loh? Ada apa dibalik semua ini? Ada apa gerangan? Ada apa mang ulil meng-erang-erang? Haha…
</p>
<div id=”kotakkotaknora”></div>
<a href=”#”>Klik klik…</a>
</body>
</html>

Sintak Multiple Delete Record dengan checkbox

mungkin ada yang bertanya-tanya, gimana sih mendelete multiple record pada database MySQL. Gimana caranya ??!!
Dari situlah artikel ini berawal. Sebelumnya saya telah menemui kasus seperti itu, nah dari pada ilmu saya jadi basi, lebih baik saya tulis tutorial ini, iya gak ??!! :D
Langsung saja ke intinya, bentar lagi mau buka puasa. :D Sebelum mendelete record, langkah awalnya adalah membuat database itu sendiri, berikut saya sediakan databasenya :

create database contohdelete ;
use contohdelete;
create table tabledelete (id int(5) primary key auto_increment, nama varchar(50), jabatan varchar(20), kegantengan int(2));
insert into tabledelete values(”,’Loka Dwiartara’,'Admin 2′,’8′);
insert into tabledelete values(”,’Anggi Jatrasmara’,'Admin 1′,’5′);
insert into tabledelete values(”,’Johan Felisitas’,'Admin 3′,’4′);
Langkah selanjutnya adalah script untuk menampilkan database yang akan dihapus :D.
Script lengkapnya seperti ini :
<?php
/*  view.php */
$host = “localhost”;
$username = “root”;
$password = “”;
$database = “contohdelete”;
$koneksi = mysql_connect($host, $username, $password);
mysql_select_db($database, $koneksi) or die(“MysQL Error”);
$perintah = “select * from tabledelete”;
$jalankanperintah = mysql_query($perintah);
?>
<html><body>
<form action=”delete.php” method=”POST”>
<?php
print “Nama | Jabatan | Tingkat Kegantengan :D <br>”;
while ($hasil = mysql_fetch_array($jalankanperintah))
{
print “<input type=checkbox name=hapus[] id=hapus value=$hasil[id]>$hasil[nama] | $hasil[jabatan] | $hasil[kegantengan]<br>”;
}
?>
<input type=”submit” name=”hapusdong” value=”Hapus !!” id=”hapusdong”>
</form>
</body></html>
Script tersebut cukup familiar, oleh karena itu saya hanya menjelaskan sedikit saja.
Kalimat …
print “<input type=checkbox name=hapus[] id=hapus value=$hasil[id]>$hasil[nama] | $hasil[jabatan] | $hasil[kegantengan]<br>”;
sengaja saya gunakan name-nya hapus[ ] karena berbentuk array. Dan ini adalah inti yang menjembatani record database bisa di hapus.
Dan selanjutnya script untuk menghapus recordnya :
<?php
/* delete.php */
$host = “localhost”;
$username = “root”;
$password = “”;
$database = “contohdelete”;
$koneksi = mysql_connect($host, $username, $password);
mysql_select_db($database, $koneksi) or die(“MysQL Error”);
$id = $_POST[hapus];
$banyaknya = count($id);
if($_POST['hapusdong'])
{
for ($i=0; $i<$banyaknya; $i++)
{
$perintahdelete = “delete from tabledelete where id=$id[$i]“;
$jalankanperintahdelete = mysql_query($perintahdelete);
}
if ($jalankanperintahdelete)
{
print “Record berhasil didelete<br>”;
print “<a href=view.php>Klik disini untuk kembali</a>”;
}
}
?>
Di script ini pun saya akan menjelaskan sedikit, yaitu pada kalimat
$banyaknya = count($id);
if($_POST['hapusdong'])
{
for ($i=0; $i<$banyaknya; $i++)
{
$perintahdelete = “delete from tabledelete where id=$id[$i]“;
$jalankanperintahdelete = mysql_query($perintahdelete);
}
if ($jalankanperintahdelete)
{
print “Record berhasil didelete<br>”;
print “<a href=view.php>Klik disini untuk kembali</a>”;
}
}
terdapat argumen $banyaknya = count($id); berguna untuk menghitung berapa banyak record yang dipilih untuk di hapus.
ketika view.php menge-post variable $_POST['hapusdong'], yang berasal dari button submit, maka akan dilakukan looping untuk mendelete record sebanyak checkbox id yang dipilih. Dalam hal ini nilai dari banyaknya checkbox yang dipilih terdapat pada variable $banyaknya.
Yuup, mungkin itu sedikit penjelasan dari saya, mengenai penggunaan checkbox sebagai acuan untuk melakukan delete yang berulang-ulang.
Wassalam.

Sintak Dasar CSS Font Color

properti color digunakan untuk menentukan warna font. Sebenarnya properti color bukan lah bagian dari properti font.
Cara penulisan:
property -> color
value ->
nama warna – contoh: red, black, white
hexadesimal – contoh: #ff0000
RGB – contoh: rgb(0, 220, 98)
Contoh penulisan:
h1 {
font-size: 14px;
color: red;
}
h2 {
font-size: 14px;
color: #0000ff;
}
Hasil:

Ini adalah Heading 1 (H1) menggunakan warna merah

Ini adalah Heading 2 (H2) menggunakan warna biru