Membuat form edit dengan value terisi otomatis di berbagai jenis input.

Selamat pagi-siang-sore-malem-dinihari (tergantung suasana hati), pemiarsah. Hehe.. Ane muncul lagi di posting ke-empat pada bulan Januari 2014, seperti resolusi saya di tahun 2014 ini, yaitu minimal 4 postingan setiap hari. Yah, walaupun masih sebatas mentaati resolusi, tapi saya tetap berusaha untuk memposting ke blog ini lebih dari empat. Nah, kalau posting 1-3 gak ada sangkut pautnya sama pemrograman, maka di posting ini saya memposting tentang tips dan trik pemrograman PHP, yang nyatanya memang lebih mudah memposting tentang pemrograman PHP daripada artikel-artikel berjenis lainnya.

Ya, sesuai judulnya, saya akan membagikan sedikit tips dan trik saya seputar manajemen data (CRUD – Create, Read, Update, Delete), khususnya yang edit data. Posting saya kali ini, kasusnya kayak gini :

1. Saat kita melakukan edit data, setelah klik link “edit”, maka akan dimunculkan form edit data. Kalau input-an yang dipakai adalah jenis “text” (<input type=”text” name=”xxx”>) itu sih masih mudah, hanya tinggal mengisikan value-nya : value=”<?php echo $data->nama; ?>” gitu sudah selesai, tapi bagaimana edit data dengan otomatis terisi pada input-an berjenis <select>, radio button, check box, tanggal dengan <select> ... ?
2. Rata-rata dalam membuat form inputan “Tambah Data” ataupun “Edit Data” adalah membuat form input sendiri-sendiri, form “Tambah Data” sendiri, dan form “Edit Data” sendiri. Nah dalam postingan saya ini, saya akan berikan tips dan trik membuat form tambah dan edit data dalam 1 form. Jadi 1 form dapat digunakan untuk tambah data maupun edit data, sehingga lebih menghemat jumlah file, memudahkan modifikasi program.

Ok, langsung ke tekape, pertama dan utama adalah membuat database. Buat database dengan nama “lab”. Disini saya memakai 2 tabel, tabel data_kota_asal sebagai tabel referensi, dan data_mahasiswa sebagai data yang akan kita otak-atik. Skripnya :

CREATE TABLE IF NOT EXISTS `data_kota_asal` (
  `id` int(2) NOT NULL AUTO_INCREMENT,
  `nama` varchar(200) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=11 ;
INSERT INTO `data_kota_asal` (`id`, `nama`) VALUES
(1, 'Yogyakarta'),
(2, 'Kulon Progo'),
(3, 'Bantul'),
(4, 'Sleman'),
(5, 'Gunung Kidul'),
(6, 'Klaten'),
(7, 'Magelang'),
(8, 'Purworejo'),
(9, 'Boyolali'),
(10, 'Kebumen');

CREATE TABLE IF NOT EXISTS `data_mahasiswa` (
  `id` int(2) NOT NULL AUTO_INCREMENT,
  `nama` varchar(30) NOT NULL,
  `jk` enum('Laki-Laki','Perempuan') NOT NULL,
  `tmp_lahir` varchar(30) NOT NULL,
  `tgl_lahir` date NOT NULL,
  `kota_asal` int(2) NOT NULL,
  `agama` enum('Islam','Kristen Katolik','Kristen Protestan','Hindu','Budha','Konghucu','Lainnya') NOT NULL,
  `hobi` varchar(150) NOT NULL,
  `foto` varchar(150) NOT NULL,
  `deskripsi` mediumtext NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=3 ;

INSERT INTO `data_mahasiswa` (`id`, `nama`, `jk`, `tmp_lahir`, `tgl_lahir`, `kota_asal`, `agama`, `hobi`, `foto`, `deskripsi`) VALUES
(1, 'Nur Akhwan', 'Laki-Laki', 'Kulon Progo', '1990-03-26', 1, 'Islam', 'Futsal-Mancing-Mapala-SMSan-FBan-Twitteran', 'Koala.jpg', 'Nothing special'),
(2, 'Akhwan Nur', 'Laki-Laki', 'Kulon Progo', '1990-03-17', 2, 'Islam', 'Futsal-Mapala-Twitteran', 'Hydrangeas.jpg', 'Ya saya ini seperti saya..');

Pertama, adalah membuat file “koneksi.php” sebagai pengaturan koneksi program dengan database. Skripnya : 

<?php 
$koneksi  = mysql_connect("localhost", "root", "");
$db   = mysql_select_db("lab");
?> 

Tidak usah saya jelaskan, sudah menjadi rahasia umum :P

Kedua, buat file “index.php” untuk menampilkan data mahasiswa, skripnya :

<?php
include "koneksi.php";
$ambil_data  = mysql_query("SELECT data_mahasiswa.*, data_kota_asal.nama AS asal_kota FROM data_mahasiswa JOIN data_kota_asal ON data_mahasiswa.kota_asal = data_kota_asal.id");
?>
<h5>Data Mahasiswa</h5>
<a href="form.php?mode=add">Tambah</a><br>
<table width="100%" border="1">
 <tr>
  <th width="10%">Nama</th>
  <th width="10%">Jenis Kelamin</th>
  <th width="10%">Tempat, Tgl. Lahir</th>
  <th width="10%">Agama</th>
  <th width="10%">Hobi</th>
  <th width="10%">Kota Asal</th>
  <th width="10%">Deskripsi</th>
  <th width="10%">Aksi</th>
 </tr>
 
 <?php
 if (mysql_num_rows($ambil_data) < 1) {
 ?>
 <tr><th colspan="7">Belum ada Data</th></tr>
 <?php
 } else {
  while ($data = mysql_fetch_array($ambil_data)) {
 ?>
  <tr>
   <td><?php echo $data['nama']; ?></td>
   <td><?php echo $data['jk']; ?></td>
   <td><?php echo $data['tmp_lahir'].", ".$data['tgl_lahir']; ?></td>
   <td><?php echo $data['agama']; ?></td>
   <td><?php echo $data['hobi']; ?></td>
   <td><?php echo $data['asal_kota']; ?></td>
   <td><?php echo $data['deskripsi']; ?></td>
   <td><a href="form.php?mode=edit&id=<?php echo $data['id']; ?>">Edit</a></td>
  </tr>
 <?php 
  }
 }
 ?>
</table> 

Tidak akan saya jelaskan, karena umumnya sudah pada tahu, gitu ya..

Ketiga, membuat sebuah form yang kita namai dengan “form.php” yang akan kita gunakan baik untuk “Tambah Data” dan “Edit Data”. Skripnya :

<?php
include "koneksi.php";
// ambil file koneksi.php untuk koneksi database

Penjelasan 3 baris dibawah komentarr 
Array data, untuk pilihan pada inputan berjenis radio <select>, <input type=”radio”> dan <input type=”checkbox”>. Ini trik-nya, dimana biasanya kita kalau memberikan option untuk input type <select>, <input type=”radio”>, dan <input type=”checkbox”> dengan menuliskan satu persatu, dengan ini kita lebih sedikit menuliskan skripnya dan memudahkan jika akan menambahkan pilihannya. $pil_jk, untuk menampung data pilihan jenis kelamin, $pil_agama, untuk menampung pilihan data agama, dan $pil_hobi, untuk menampung pilihan jenis hobi

$pil_jk   = array('Laki-Laki','Perempuan');
$pil_agama  = array('Islam','Kristen Katolik','Kristen Protestan','Hindu','Budha','Konghucu','Lainnya');
$pil_hobi  = array('Futsal','Band','Mancing','Mapala','SMSan','FBan','Twitteran');

Penjelasan 2 baris dibawah komentarr 
Disini merupakan pendeklarasian variabel URL ($_GET) yang akan MENJADI DASAR penggunaan form, apakah untuk “Tambah Data” ataupun untuk “Edit Data”. $mode, adalah menangkap variabel URL ?mode=xxxx dan $id, untuk menangkap variabel &id=xxx Saya menggunakan skrip : isset($_GET[‘mode’]) ? $_GET[‘mode’] : “”; Sebenarnya untuk menanggulangi error “Undefined index ...” pada PHP versi terbaru. $mode = isset($_GET['mode']) ? $_GET['mode'] : "", jika diartikan dalam bahasa manusia adalah : variabel $mode akan terisi bilamana $_GET[‘mode’] sudah terdefinisi, maka akan diisikan dengan $_GET[‘mode’] tersebut, jika belum maka kosong. Ini merupakan penyederhanaan dari penulisan IF .. ELSE ...

$mode   = isset($_GET['mode']) ? $_GET['mode'] : "";
$id   = isset($_GET['id']) ? $_GET['id'] : "";

Penjelasan 14 baris dibawah komentarr
Nah disinilah kuncinya trik satu form untuk dua fungsi tambah dan edit. Prinsipnya adalah setiap inputan di form telah diisikan value-nya, berdasarkan isi variabel $mode yang dideklarasikan di atas. Misalnya inputan <input type=”text” name=”nama”>, akan kita tambahi “value=”<?php echo $nama; ?>”” , dimana variabel $nama akan kita deklarasikan di bawah ini. Untuk $mode yang isinya “add” atau “Tambah data”, maka semua isi variabel di form adalah “” atau kosong.

if ($mode == "add") {
 $id   = "";
 $nama   = "";
 $jk   = "";
 $tmp_lahir  = "";
 $tgl_lahir  = "";
 $tgl_lahir_tgl  = "";
 $tgl_lahir_bln  = "";
 $tgl_lahir_thn  = "";
 $kota_asal  = "";
 $agama  = "";
 $hobi   = "";
 $foto   = "";
 $deskripsi  = "";

Penjelasan 15 baris dibawah komentarr
 Jika variabel $mode berisi “edit”maka variabel value dari setiap inputan diambil dari database, berdasarkan data yang dipilih, yang querynya di skrip : $q_data_edit = mysql_query("SELECT * FROM data_mahasiswa WHERE id = '$id'"); $data_edit = mysql_fetch_array($q_data_edit); Untuk data tanggal lahir, data yang didapatkan adalah berbentuk “YYYY-MM-DD” sehingga karena di form ini menggunakan <select> maka harus dipecah-pecah YYYY, MM dan DD nya.

} else if ($mode == "edit") {
 $q_data_edit = mysql_query("SELECT * FROM data_mahasiswa WHERE id = '$id'");
 $data_edit = mysql_fetch_array($q_data_edit);
 $id  = $data_edit['id'];
 $nama  = $data_edit['nama'];
 $jk  = $data_edit['jk'];
 $tmp_lahir = $data_edit['tmp_lahir'];
 $tgl_lahir = explode("-",$data_edit['tgl_lahir']);
 $tgl_lahir_tgl = intval($tgl_lahir[2]);
 $tgl_lahir_bln = intval($tgl_lahir[1]);
 $tgl_lahir_thn = intval($tgl_lahir[0]);
 $kota_asal = $data_edit['kota_asal'];
 $agama = $data_edit['agama'];
 $hobi  = $data_edit['hobi'];
 $foto  = $data_edit['foto'];
 $deskripsi = $data_edit['deskripsi'];
}
?>


<h5>Form Mahasiswa</h5>
<a href="index.php">Kembali</a><br><br>

Penjelasan 2 baris dibawah komentarr
Action dari form ini adalah ke file “aksi.php” dimana akan ditambahi variabel URL mode, yang akan memberitahukan ke file “aksi.php” apakah aksi untuk edit_data atau aksi untuk tambah data : aksi.php?mode=<?php echo $mode; ?>, $mode didapatkan dari skrip diatas ini. Sedangkan skrip di bawahnya (<input type=”hidden”) adalah untuk memberi input hidden, id_data, untuk tambah data isinya kosong, dan untuk edit_data, isinya merupakan id_data yang dipilih

<form method="post" action="aksi.php?mode=<?php echo $mode; ?>" enctype="multipart/form-data">
<input type="hidden" name="id_data" value="<?php echo $id; ?>">


<table width="50%">

Penjelasan 1 baris dibawah komentarr 
Ini untuk inputan jenis “text” saya kira gampan, karena tinggal menambahkan “value=”<?php echo $nama; ?>”, dimana variabel $nama ada di deklarasi di atas. */

 <tr><td width="30%">Nama</td><td><input type="text" name="nama" autofocus required value="<?php echo $nama; ?>"></td></tr>

Penjelasan baris dibawah komentarr 
Ini untuk inputan jenis “radio”. Kita akan menggunakan variabel : $pil_jk = array('Laki-Laki','Perempuan'); Yang telah dideklarasikan di atas.

 <tr><td>Jenis Kelamin</td><td> 
 <?php 

Penjelasan baris dibawah komentarr 
Perulangan untuk menuliskan <input type=”radio” beserta labelnya, berdasarkan jumlah data dari variabel $pil_jk “sizeof($pil_jk)”.

 for ($a = 0; $a < sizeof($pil_jk); $a++) {
/*

Penjelasan baris dibawah komentarr 
Nah disini skrip untuk otomatis “terpilih” pada radio button. Logikanya jika $jk (terdeklarasi di atas) sama dengan isi dari $pil_jk[$a] (mengambil dari data array), MAKA akan otomatis ada tambahan “checked”.

  if ($jk == $pil_jk[$a]) {
   echo '<label style="width: 25px; display: inline"><input type="radio" name="jk" required value="'.$pil_jk[$a].'" checked> '.$pil_jk[$a].' </label>';
  } else {

Penjelasan baris dibawah komentarr
Ini jika tidak sama isi variabel $jk dengan $pil_jk[$a]

   echo '<label style="width: 25px; display: inline"><input type="radio" name="jk" required value="'.$pil_jk[$a].'"> '.$pil_jk[$a].' </label>';
  }
 }
 ?>
 </td></tr>
 
 <tr><td>Tempat, Tanggal Lahir</td><td>
 <input type="text" name="tmp_lahir" value="<?php echo $tmp_lahir; ?>" required>, &nbsp;

Penjelasan baris dibawah komentarr
Perulangan untuk menampilkan tanggal (sampai 31), bulan (sampai 12) dan tahun (1990 – 1999). Yang dilakukan perulangan adalah <option> atau pilihannya. Nah, akan terisi terseleksi otomatis (selected) jika sama antara value $b (1-31), $c (1-12), $d(1990-1999) dengan variabel yang telah terdefinisi di atas : $tgl_lahir = explode("-",$data_edit['tgl_lahir']); $tgl_lahir_tgl = intval($tgl_lahir[2]); $tgl_lahir_bln = intval($tgl_lahir[1]); $tgl_lahir_thn = intval($tgl_lahir[0]);

<select name="tgl" required><option value="">--</option>
 <?php 
 for ($b = 1; $b <= 31; $b++) {
  if ($b == $tgl_lahir_tgl) {
   echo '<option value="'.$b.'" selected>'.$b.'</option>';
  } else {
   echo '<option value="'.$b.'">'.$b.'</option>';
  }
 }
 ?></select> - <select name="bln" required><option value="">--</option>
 <?php 
 for ($c = 1; $c <= 12; $c++) {
  if ($c == $tgl_lahir_bln) {
   echo '<option value="'.$c.'" selected>'.$c.'</option>';
  } else {
   echo '<option value="'.$c.'">'.$c.'</option>';
  }
 }
 ?></select> - <select name="thn" required><option value="">--</option>
 <?php 
 for ($x = 1990; $x <= 1999; $x++) {
  if ($x == $tgl_lahir_thn) {
   echo '<option value="'.$x.'" selected>'.$x.'</option>';
  } else {
   echo '<option value="'.$x.'">'.$x.'</option>';
  }
 }
 ?></select>
 
 </td></tr>
 
 <tr><td>Kota Asal</td><td>
 <select name="kota_asal" required><option value="">--</option>

Penjelasan baris dibawah komentarr
Ini contoh dari otomatis terseleksi (selected) dari pilihan yang diambil dari database. $q_kota_asal = mysql_query("SELECT * FROM data_kota_asal"), adalah untuk mengambil dari tabel “data_kota_asal”. Akan terseleksi otomatis (selected) jika varabel $kota asal sama dengan $d_kota_asal[‘id’] hasil dari query ambil data kota. Data yang akan kita simpan adalah id_kotanya, bukan nama kotanya. */

 <?php 
 $q_kota_asal = mysql_query("SELECT * FROM data_kota_asal");
 
 while ($d_kota_asal = mysql_fetch_array($q_kota_asal)) {
  if ($kota_asal == $d_kota_asal['id']) {
   echo '<option value="'.$d_kota_asal['id'].'" selected>'.$d_kota_asal['nama'].'</option>';
  } else {
   echo '<option value="'.$d_kota_asal['id'].'">'.$d_kota_asal['nama'].'</option>';
  }
 }
 ?>
 </select>
 </td></tr>
 
 
 <tr><td>Agama</td><td>
 <select name="agama" required><option value="">--</option>
 <?php 

Penjelasan baris dibawah komentarr 
Ini contoh dari otomatis terseleksi (selected) dari pilihan yang diambil dari variabel $pil_agama. Mirip-mirip dengan pilihan jenis kelami di atas, namun ini diterapkan pada inputan jenis “<select>”. Akan terseleksi otomatis (selected) jika varabel $agama (di atas) sama dengan $pil_agama[$d] hasil perulangan array. */

  for ($d = 0; $d < sizeof($pil_agama); $d++) {
  if ($agama == $pil_agama[$d]) {
   echo '<option value="'.$pil_agama[$d].'" selected>'.$pil_agama[$d].'</option>';
  } else {
   echo '<option value="'.$pil_agama[$d].'">'.$pil_agama[$d].'</option>';
  }
 }
 ?>
 </select>
 </td></tr>
 
 <tr><td>Hobi</td><td>

 <?php

(adsbygoogle = window.adsbygoogle || []).push({});

Penjelasan baris dibawah komentarr
Ini contoh untuk inputan berjenis checkbox. Inputan jenis checkbox mempunyai sifat boleh dipilih lebih dari 1. Disini “name” dari inputan saya tambahkan _1, _2, _3 dst.. Variabel $hobi (diambil dari database) berformat “hobi1-hobi2-hobi3”. Sebagai contoh, jika $hobi berisi “Futsal-SMS-Fban”, maka akan dipecah, sehingga menjadi “Futsal”, “SMS”, dan “Fban” yang disimpan dalam variabel array $pc_hoby. Dengan fungsi in_array berfungsi untuk mengecek keberadaan data dalam suatu array, maka inputan akan otomati ter-checked, jika data hobi berada di dalam array $pc_hobi. */

 $pc_hobi = explode("-",$hobi);
 for ($e = 0; $e < sizeof($pil_hobi); $e++) {
  if (in_array($pil_hobi[$e], $pc_hobi)) { 
   echo '<label style="display: inline; width: 200px"><input type="checkbox" value="'.$pil_hobi[$e].'" name="hobi_'.$e.'" checked> '.$pil_hobi[$e].'</label>';
  } else {
   echo '<label style="display: inline; width: 200px"><input type="checkbox" value="'.$pil_hobi[$e].'" name="hobi_'.$e.'"> '.$pil_hobi[$e].'</label>';
  }
 }
  ?>

Penjelasan baris dibawah komentarr 
Ini untuk menyimpan jumlah hobi yang ada di dalam $pil_hoby. 

 <input type="hidden" name="jumlah_cek" value="<?php echo ($e-1); ?>">
 </td></tr>

Penjelasan baris dibawah komentarr
Ini untuk sebenarnya untuk menampilkan foto jika telah diupload data fotonya. Untuk menampilkan gambarnya menggunakan tag <img>. Jika tidak ada maka gambar fotonya akan not found. */

 <tr><td width="30%">Foto</td><td><input type="file" name="foto"><br>
 <img src="foto/<?php echo $foto; ?>" style="width: 150px; height: 130px"></td></tr>

Penjelasan baris dibawah komentarr 
Untuk menampilkan data otomatis pada teksarea. Variabel $deskripsi diletakkan diantara tag <textarea></textarea>, menjadi <textarea><?php echo $deskripsi; ?></textarea>

<tr><td width="30%">Deskripsikan</td><td><textarea name="deskripsi" rows="3" cols="40" required><?php echo $deskripsi; ?></textarea></td></tr>
 <tr><td width="30%"></td><td><input type="submit" value="Simpan"></td></tr>
</table>

</form>

Akan dilanjutkan ke Bagian Kedua