Kenangan, Biarkan PHP Mengabadikannya!

Oleh: Ivan Irawan <rii@ai.co.id>

Artikel ini didedikasikan untuk salah satu pembaca artikel saya yang telah mendorong saya untuk menulis tentang bagaimana PHP dapat menyimpan dan menampilkan gambar dengan bantuan basis data MySQL. Semoga juga bermanfaat bagi pembaca yang lain. –ivan.

Bagian 1: Biarkan Seperti Apa Adanya

Kapten Piccard Marah

Anda adalah seorang officer pada USS Enterprise bagian pengolahan data. Anda bertanggung jawab terhadap basis data awak kapal. Hari ini Anda dipanggil menghadap Kapten Jean Luc Piccard. Sangat jarang Anda bisa bertemu secara khusus dengan Kapten Piccard. Anda berharap akan mendapat hal yang baik dari pertemuan ini. Benarkah?

Memasuki ruang pribadi Kapten Piccard terasa membuat bulu kuduk Anda tiba-tiba berdiri. Terasa hawa negatif ada di sekitar ruang itu. Pintu keluar tertutup, Kapten Piccard memutar duduknya sehingga berhadapan dengan Anda. Anda kaget, karena Kapten Piccard menatap Anda dengan sorot mata tajam. Ada apakah gerangan?

Setelah protokoler militer selesai, Kapten Piccard buka bicara, “Jelaskan apakah saya harus mempertahankan orang yang telah membuat kewibawaan saya jatuh di kalangan perwira Starfleet?”

Anda menjawab, “Mohon dijelaskan apa yang terjadi, Kapten. Jika itu memang kesalahan saya, maka saya bersedia mempertanggungjawabkannya.”

“Bagus!” ungkap Kapten Piccard. “Ketika acara rehat bersama perwira Starfleet, Admiral mengadakan acara kuis pengenalan foto awak kapal oleh kaptennya. Betapa memalukannya ketika saya tidak mampu mengenali beberapa foto awak kapal USS Enterprise. Kamu tahu sebabnya?”

“Siap, tahu, Kapten!” jawab Anda. “Database awak kapal kita tidak dilengkapi dengan foto, sehingga Kapten kesulitan menghafal foto awak kapal!”

Piccard kembali bicara, “Baik. Kamu sudah memahaminya. Sebagai orang yang berkompeten dalam Database awak kapal, kamu sudah tahu apa yang harus dilakukan. Lakukanlah hal itu atau kamu dapat dianggap tidak layak menjalankan tugasmu. Pertemuan selesai!”

Anda mengerti bahwa Anda harus melengkapi database awak USS Enterprise yang telah Anda buat (lihat artikel PHP? Siapa Takut! bagian 4) dengan kemampuan untuk menyimpan foto awak USS Enterprise. Taruhannya adalah karir Anda di Starfleet. Jadi apa yang harus Anda lakukan?

Kawan Lama Kita

Saat ini kita akan menyegarkan kembali ingatan kita pada database yang pernah kita buat pada saat yang lalu. Masuk ke shell dan panggil perintah untuk menggunakan MySQL Client.


$ mysql -u [namapengguna] -p

Masukkan password (jika MySQL Anda telah diset untuk menggunakan password). Tentunya Anda masih dapat mengingat nama database yang akan kita gunakan adalah uss_enterprise. Setelah muncul prompt mysql>, ketiklah:


mysql> USE uss_enterprise;

Jika Anda telah menghapus atau belum membuat database uss_enterprise dan tabelnya (awak), Anda bisa membuatnya dengan membaca kembali artikel PHP? Siapa Takut! bagian keempat. Jika semuanya beres, maka ketikan perintah berikut ini.


mysql> DESCRIBE awak;

Maka yang seharusnya muncul di layar adalah kurang lebih sebagai berikut.


+----------+-------------+------+-----+---------+----------------+
| Field    | Type        | Null | Key | Default | Extra          |
+----------+-------------+------+-----+---------+----------------+
| KODE     | int(11)     |      | PRI | NULL    | auto_increment |
| NAMA     | varchar(50) |      |     |         |                |
| PANGKAT  | varchar(50) |      |     |         |                |
| JABATAN  | varchar(50) |      |     |         |                |
| BERTUGAS | smallint(6) |      |     | 0       |                |
| EMAIL    | varchar(50) |      |     |         |                |
| HOBI     | varchar(50) |      |     |         |                |
+----------+-------------+------+-----+---------+----------------+
7 rows in set (0.06 sec)

Data terakhir yang tersimpan dalam database dapat dilihat dengan cara:


mysql> SELECT NAMA,PANGKAT,JABATAN FROM awak;

Yang muncul di layar adalah kurang lebih sebagai berikut.


+------------------+-----------+---------------+
| NAMA             | PANGKAT   | JABATAN       |
+------------------+-----------+---------------+
| Jean luc Piccard | Captain   | Captain       |
| William T. Riker | Commander | First Officer |
| Deanne Troi      | Commander | Counselor     |
+------------------+-----------+---------------+
3 rows in set (0.11 sec)

Kalau Anda adalah seorang yang suka ngotot, pekerja keras, dan suka meraih sesuatu dengan usaha sendiri, Anda bisa mulai mencari sendiri di Internet gambar untuk masing-masing Awak USS ENTERPRISE tersebut. Pilihan lainnya, Anda bisa mendownload paket skrip artikel ini di sini.

Sebagai seorang perwira Starfleet, Anda harus dapat memastikan semuanya berjalan sebagaimana mestinya. Lakukan tindakan-tindakan yang dianggap perlu untuk maksud tersebut. Pilihan lainnya, Anda mungkin terpaksa menikmati pensiun dini di salah satu bulan di Mars.

Jalan Bercabang dan Berliku

Ada banyak cara menyimpan gambar atau foto dalam aplikasi berbasis web. Secara umum dibedakan menjadi:

  • Disimpan dalam sistem file dan diindeks/diakses melalui informasi yang yang ada pada basis data
  • Disimpan langsung sebagai data pada basis data.

Setiap cara, memiliki kelebihan dan kekurangannya masing-masing. Melalui artikel ini Anda akan mulai mencoba menyimpan gambar langsung sebagai data pada basis data MySQL, setelah itu di bagian akhir dari seri artikel ini, Anda akan belajar menggunakan cara lebih sederhana untuk menyimpan gambar dalam sistem file.

Mengapa cara yang lebih rumit dibahas lebih dulu? Jika Anda bertanya seperti ini, maka Anda harus segera mengingat kembali pepatah lama, berakit-rakit ke hulu berenang ke tepian, bersakit-sakit dahulu bersenang-senang kemudian. Pesan saya cuma, jangan sampai keterusan sakit. Minum obat sesuai dengan anjuran dokter.

Mau Disanggul atau Diurai…

Foto, gambar, dan dokumen umumunya adalah file data biner, sementara field-field dalam database umumnya untuk menampung data ASCII. Untuk dapat menampung foto, gambar, dan dokumen, dibutuhkan field database yang dapat menyimpan data biner. MySQL dapat digunakan untuk maksud ini karena memiliki jenis field biner yaitu TINYBLOB, BLOB, MEDIUMBLOB, dan LONGBLOB. Perbedaan di antara keempatnya adalah dalam kapasitas maksimum penyimpanan data biner. Untuk kebutuhan standar, tipe field BLOB sudah cukup untuk menyimpan file image.

Anda juga memiliki pilihan lain untuk menyimpan file biner dalam MySQL dengan tetap menggunakan field-field untuk data ASCII. Untuk kebutuhan ini, diperlukan field jenis TINYTEXT, TEXT, MEDIUMTEXT, dan LONGTEXT yang dapat menampung data ASCII berukuran besar. Untuk dapat menyimpan data biner (8-bit) ke dalam field data ASCII (7-bit) dibutuhkan konversi data. Data biner dapat dikonversi dengan mudah menjadi data ASCII dengan metoda penkodean base64 yang lazim digunakan untuk melakukan pengiriman attachment file biner melalui e-mail (base64 encoding). Hasil pengkodean base64 adalah file ASCII teks yang untuk dapat dikembalikan menjadi data biner harus dikonversi balik menggunakan base64 decoder.

Cara yang pertama memiliki keunggulan dalam hal besar data yang disimpan dalam database MySQL dan juga kecepatan penyimpanan dan pembacaan data, akibat tidak adanya proses konversi dari biner ke teks ASCII maupun sebaliknya. Agar tidak menyebabkan penurunan kualitas dan kelengkapan data konversi dari 8-bit ke 7-bit membawa konsekuensi bertambahnya ukuran data hasil konversi.

Penyimpanan data biner dalam bentuk data ASCII di lain pihak memberikan keuntungan dalam portabilitas baik data maupun aplikasi. Dengan metoda konversi data ini, maka Anda dapat memastikan skrip yang Anda buat dapat diimplementasikan pada database selain MySQL bahkan pada database yang secara native tidak memiliki field untuk menampung data jenis biner. Beberapa perangkat pengembangan (development tools) memiliki kelemahan dalam mengolah data biner, misalnya Microsoft Visual Basic. Kelemahan ini bisa diatasi dengan bantuan enkoder/dekoder base64, karena Visual Basic akan lebih mudah mengolah string ASCII hasil konversi dari 8-bit ke 7-bit. Jika Anda ingin mengakses data biner pada database Anda selain dengan PHP, pertimbangnkan metode penyimpanan yang kedua ini untuk membuat skrip PHP Anda.

Kedua cara di atas akan kita bahas semuanya dalam artikel ini. Untuk pemanasan kita akan mulai dengan metode atau cara yang pertama, yakni menyimpan data biner dalam field biner MySQL.

Tambahkan Arti Hidup Ini…

Kini saatnya untuk mulai menambahkan field baru dalam tabel awak. Karena kita akan menyimpan data biner di MySQL dalam bentuk aslinya, maka diperlukan field biner (BLOB) yang akan kita namai dengan FOTO. Tambahkan field ini dengan perintah MySQL sebagai berikut:


mysql> ALTER TABLE awak ADD FOTO BLOB;

Karena Anda mungkin saja memasukkan data gambar dengan jenis yang berbeda-beda, misalkan GIF, JPEG, atau PNG, Anda membutuhkan satu field lagi untuk menyimpan informasi jenis gambar ini, agar browser Anda tidak kebingungan saat menampilkannya.


mysql> ALTER TABLE awak ADD JENIS VARCHAR(50);

Cobalah untuk melihat apakah semuanya berhasil dengan mengetik:


mysql> DESCRIBE awak;

Jika proses penambahan field berhasil dijalankan, maka yang muncul di layar adalah sebagai berikut:


+----------+-------------+------+-----+---------+----------------+
| Field    | Type        | Null | Key | Default | Extra          |
+----------+-------------+------+-----+---------+----------------+
| KODE     | int(11)     |      | PRI | NULL    | auto_increment |
| NAMA     | varchar(50) |      |     |         |                |
| PANGKAT  | varchar(50) |      |     |         |                |
| JABATAN  | varchar(50) |      |     |         |                |
| BERTUGAS | smallint(6) |      |     | 0       |                |
| EMAIL    | varchar(50) |      |     |         |                |
| HOBI     | varchar(50) |      |     |         |                |
| FOTO     | blob        | YES  |     | NULL    |                |
| JENIS    | varchar(50) | YES  |     | NULL    |                |
+----------+-------------+------+-----+---------+----------------+
9 rows in set (0.00 sec)

Kini saatnya kita keluar dari MySQL Client dan memulai perjalanan dengan PHP andalan kita. Ketikkan:


mysql> QUIT

Aku Masih Seperti Yang Dulu…

Tanpa perlu menunggu sampai akhir hidup, mari kita gunakan skrip kita yang lama sebagai dasar pembuatan aplikasi untuk menyimpan gambar/image. Skrip tersebut antara lain:

  • koneksi.inc.php
  • awakdsp.php
  • awakinput.php
  • awakedit.php
  • awakdel.php

Skrip yang pertama, koneksi.inc.php, tidak perlu diubah kecuali disesuaikan nama user dan password untuk basis data MySQL. Berikut ini adalah skripnya.

koneksi.inc.php

<?php

     // set beberapa variabel untuk mengakses basis data MySQL.

     // nama server basis data MySQL
     $server = "localhost";

     // nama pengguna basis data
     $namauser = "test"; // misalkan user adalah 'test'

     // password pengguna basis data
     $passuser = "test"; // misalkan password adalah 'test'

     // nama basis data
     $db = "uss_enterprise";

     // membuka koneksi PHP ke basis data MySQL
     $koneksi = mysql_connect($server, $namauser, $passuser)
                or die("Salah server, nama pengguna, atau passwordnya!");

?>

Mana Gambarnya?

Langkah pertama adalah memodifikasi skrip awakdsp.php agar menyediakan link untuk menampilkan gambar/foto awak. Hasilnya akan terlihat seperti di bawah ini.

awakdsp.php

<html>
<head>
<title>Menampilkan Isi Tabel Awak</title>
<basefont face="Arial">
</head>

<body>

<?php

     // ambil data koneksi dari file koneksi.inc.php
     require("koneksi.inc.php");

     // menentukan perintah SQL untuk query
     // saat tidak perlu melakukan query terhadap field FOTO
     // demi penghematan memori, cukup terhadap field JENIS saja
     $query = "SELECT KODE, NAMA, PANGKAT,
                      JABATAN, BERTUGAS, EMAIL,
                      HOBI, JENIS
               FROM awak";

     // jalankan perintah SQL untuk query
     $hasil = mysql_db_query($db, $query, $koneksi) or
                                die("Kesalahan pada query!");

     // tampilkan hasilnya di halaman html dengan tabel
     echo "<font size=5>Data Awak USS Enterprise NCC-1701-D</font>\n";
     echo "<table border=1 cellpadding=1 cellspacing=0>\n";
     echo "<tr>\n";
     echo "<td>Kode</td>\n";
     echo "<td>Nama</td>\n";
     echo "<td>Pangkat</td>\n";
     echo "<td>Jabatan</td>\n";
     echo "<td>Tugas</td>\n";
     echo "<td>Hobi</td>\n";
     echo "<td>Foto</td>\n";
     echo "<td>Pilihan</td>\n";
     echo "</tr>\n";

     // gunakan perulangan while
     // perulangan akan terjadi sepanjang masih ditemukan record
     while (list($kode,$nama,$pangkat,$jabatan,$bertugas,$email,$hobi,
                $jenis) = mysql_fetch_row($hasil))
     {
          // modifikasi beberapa variabel hasil mysql_fetch_row()
          $bertugas = $bertugas." th";
          $email = "mailto:".$email;

          // format dalam baris dan kolom tabel
          echo "<tr>\n";
          echo "<td>$kode</td>\n";
          echo "<td>";
          echo "<a href=$email>$nama</a>";
          echo "</td>\n";
          echo "<td>$pangkat</td>\n";
          echo "<td>$jabatan</td>\n";
          echo "<td>$bertugas</td>\n";
          echo "<td>$hobi</td>\n";
          if ($jenis)
          {
               // jika $jenis terisi data, tampilkan link ke fotodsp.php
               echo "<td>".
                    "<a href=\"fotodsp.php?id=$kode\">Tampilkan</a>".
                    "</td>\n";
          } else {
               // jika $jenis tidak terisi data
               echo "<td>Tidak Tersedia</td>\n";
          }
          echo "<td>";
          echo "<a href=\"awakedit.php?kodeawak=$kode\">Edit</a>";
          echo " ";
          echo "<a href=\"awakdel.php?kodeawak=$kode\">Hapus</a>";
          echo "</td>\n";
          echo "</tr>\n";

     }

     echo "</table>\n";
     echo "<center><p>";
     echo "<a href=\"awakinput.php\">Input Awak Baru</a>";
     echo "</center>\n";

     // bebaskan memori yang digunakan untuk proses
     mysql_free_result($hasil);

?>

</body>
</html>

Huruf tebal pada skrip menunjukkan bagian skrip yang diubah. Maksud dari perubahan ini adalah menambahkan daftar variabel $foto untuk menampung data biner dari field FOTO. Jika $foto terisi data, maka akan ditampilkan link untuk menampilkan foto awak USS Enterprise. Tambahan lain adalah pemberian link untuk memasukkan data awak baru. Cobalah jalankan skrip di atas, maka akan tampil sebagai berikut:

Data Awak USS Enterprise NCC-1701-D

Kode Nama Pangkat Jabatan Tugas Hobi Foto Pilihan
1 Jean luc Piccard Captain Captain 5 th Archeology Tidak Tersedia Edit Hapus
2 William T. Riker Commander First Officer 5 th Holodeck Game Tidak Tersedia Edit Hapus
3 Deanne Troi Commander Counselor 2 th Fine Art Tidak Tersedia Edit Hapus

Input Awak Baru

Tentu saja, pada kolom Foto tertulis “Tidak Tersedia”, karena kita memang belum pernah memasukkan data foto sama sekali. Untuk itulah kita buat dulu modifikasi untuk skrip awakinput.php sebagai berikut:

awakinput.php

<html>
<head>
<title>Memasukkan Awak Baru</title>
<basefont face="Arial">
</head>

<body>

<?php

     // cek apakah kondisi form terkirim atau tidak
     if (!$tambah)
     {
          // jika form tidak dalam kondisi terkirim,
          // tampilkan form pencarian nama

          ?>

          <center>
          <form action="<?php echo $PHP_SELF ?>"
          method="POST" enctype="multipart/form-data">
          <font size=5>Masukkan Data Awak USS Enterprise Baru</font>
          <p>
          <table border=0 cellspacing=2 cellpadding=2>

          <tr>
          <td>Nama Awak</td>
          <td>
          <input type="text" name="form_nama" size="50"
          maxlength="50">
          </td>
          </tr>

          <tr>
          <td>Pangkat</td>
          <td>
          <input type="text" name="form_pangkat" size="50"
          maxlength="50">
          </td>
          </tr>

          <tr>
          <td>Jabatan</td>
          <td>
          <input type="text" name="form_jabatan" size="50"
          maxlength="50">
          </td>
          </tr>

          <tr>
          <td>Lama Bertugas</td>
          <td>
          <input type="text" name="form_bertugas" size="2"
          maxlength="2"> (dalam tahun)
          </td>
          </tr>

          <tr>
          <td>e-mail</td>
          <td>
          <input type="text" name="form_email" size="50"
          maxlength="50">
          </td>
          </tr>

          <tr>
          <td>Hobi</td>
          <td>
          <input type="text" name="form_hobi" size="50"
          maxlength="50">
          </td>
          </tr>

          <tr>
          <td>File Foto</td>
          <td>
          <input type="file" name="form_foto" size="40">
          </td>
          </tr>

          <tr>
          <td colspan=2 align=center>
          <input type="submit" name="tambah" value=" Tambah ">
          </td>
          </tr>

          </table>
          </form>
          </center>

          <?php

     }
     else
     {

          // jika form dalam kondisi terkirim,
          // lakukan insert ke basis data

          // ambil variabel untuk koneksi basis data
          require("koneksi.inc.php");

          // tentukan query dan kriteria pencarian
          // masukkan data gambar hanya jika $form_foto tidak kosong
          
          If ($form_foto != null)
          {
              // Jika $form_data terisi
              // baca file yang ditunjuk oleh $form_data sebesar ukuran file
              $data = "'".
                      addslashes(fread(fopen($form_foto, "rb"),
                      filesize($form_foto))).
                      "'";

              // PHP akan secara otomatis membuat variabel $form_foto_type
              // yang terisi dengan jenis file yang dibaca.
              // Isikan nilai variabel tersebut ke variabel $jenisdata
              $jenisdata = "'".$form_foto_type."'";
          }
          else
          {
              // jika $form_foto kosong
              $data = "Null";
              $jenisdata = "Null";
          }
          
          $query = "INSERT INTO awak VALUES (
                         Null,
                         '".addslashes($form_nama)."',
                         '".addslashes($form_pangkat)."',
                         '".addslashes($form_jabatan)."',
                         $form_bertugas,
                         '".addslashes($form_email)."',
                         '".addslashes($form_hobi)."',
                         $data,
                         $jenisdata
                         )";

          // lakukan proses query
          $hasil = mysql_db_query($db,$query,$koneksi)
                         or die('Kesalahan pada proses query!');

          // Tampilkan pesan proses input telah selesai

          ?>

          <center>
          <font size=5>Proses Input Berhasil!</font><p>
          Data Awak Nama
          <b>
          <?php echo addslashes($form_nama) ?>
          </b>
          telah disimpan.

          <p>
          <a href="<?php echo $PHP_SELF ?>">Klik di sini isi data lagi</a>
          <br>
          <a href="awakdsp.php">Klik di sini jika selesai</a>
          
          </center>

          <?php

     }

?>

</body>
</html>

Modifikasi pada skrip awakinput.php di atas bertujuan menambahkan komponen form tipe file yang dapat digunakan untuk mencari file pada komputer lokal/client dengan kode:


........
<tr>
<td>File Gambar</td>
<td>
<input type="file" name="form_foto" size="40">
</td>
</tr>
.........

Jangan pernah melupakan untuk mengisi atribut enctype=”multipart/form-data” pada tag <form> atau semua skrip Anda akan gagal melaksanakan tugasnya. Atribut ini berfungsi memastikan semua isian komponen form terkirim dengan baik sesuai dengan jenisnya.

Pada saat form ini dikirim maka akan terbentuk variabel $form_foto yang berisi path dari file yang akan dimasukkan ke dalam database dan variabel $form_foto_type yang berisikan jenis file tersebut. Meskipun diskriminasi tidak sesuai dengan hak asasi manusia, tetap saja pada kasus ini perlu dibuat diskriminasi antara $form_foto yang terisi dan yang tidak terisi agar skrip kita bisa berjalan baik. $form_foto yang tidak terisi file akan memiliki nilai null. Dalam kondisi ini maka field FOTO dan JENIS akan diisi dengan nilai Null.


........
If ($form_foto != null)
{
     // Jika $form_data terisi
     // baca file yang ditunjuk oleh $form_data sebesar ukuran file
     $data = "'".
             addslashes(fread(fopen($form_foto, "rb"),
             filesize($form_foto))).
             "'";

     // PHP akan secara otomatis membuat variabel $form_foto_type
     // yang terisi dengan jenis file yang dibaca.
     // Isikan nilai variabel tersebut ke variabel $jenisdata
     $jenisdata = "'".$form_foto_type."'";
}
else
{
     // jika $form_foto kosong
     $data = "Null";
     $jenisdata = "Null";
}
.........

Jika $form_foto terisi data, maka file yang ditunjuk oleh variabel $form_foto akan dibaca dan diisikan ke dalam variabel data dengan perintah:


........
$data = "'".
        addslashes(fread(fopen($form_foto, "rb"),
        filesize($form_foto))).
        "'";
.........

Baris perintah ini sebenarnya terdiri dari beberapa tahap, jika Anda sedikit problem untuk memahaminya, mungkin susunan perintah berikut dapat membantu Anda.


........
// buka file dengan fopen dan dengan parameter:
// rb = read and binary
// parameter b penting untuk sistem operasi non UNIX/LINUX
$pointerfile = fopen($form_foto, "rb");

// cari ukuran file
$ukuranfile = filesize($form_foto);

// baca isi file sejumlah ukuran file
$dataunformatted = fread($pointerfile,$ukuranfile);

// format hasil pembacaan agar bisa digunakan dalam
// perintah SQL dengan ditambah karakter "\"
$data = "'".addslashes($dataunformatted)."'";
.........

Terakhir gunakan variabel $data dan jenisdata untuk ditambahkan pada perintah SQL INPUT.

Kini cobalah kembali jalankan skrip awakdsp.php lalu klik link “Input Awak Baru” yang akan memanggil skrip awakinput.php. Pada browser akan tampak komponen form baru yaitu komponen file lengkap dengan tombol Browse…

Isikan data sebagai berikut:

            Nama      : Geordi LaForge
            Pangkat   : Leutenant
            Jabatan   : Engineer
            Bertugas  : 4 tahun
            email     : laforge@ncc1701d.mil.ufp
            Hobi      : Music

Untuk isian Foto, gunakan tombol Browse… untuk mencari file gambar yang akan diisikan ke database. Dalam paket file yang disertakan dalam artikel ini terdapat gambar laforge.gif yang dapat Anda gunakan untuk kelengkapan data Mas Geordi LaForge. Klik tombol Tambah dan jika proses berhasil maka klik link “Klik di sini untuk selesai” untuk kembali ke skrip awakdsp.php. Kini Anda akan mendapatkan tampilan sebagai berikut:

Data Awak USS Enterprise NCC-1701-D

Kode Nama Pangkat Jabatan Tugas Hobi Foto Pilihan
1 Jean Luc Piccard Captain Captain 5 th Archeology Tidak Tersedia Edit Hapus
2 William T. Riker Commander First Officer 5 th Holodeck Game Tidak Tersedia Edit Hapus
3 Deanne Troi Commander Counselor 2 th Fine Art Tidak Tersedia Edit Hapus
4 Geordi LaForge Leutenant Engineer 4 th Music Tampilkan Edit Hapus

Input Awak Baru

Anda akan dapatkan bahwa kolom “Foto” pada data Geordi LaForge akan terisi link “Tampilkan”. Link dapat digunakan untuk menampilkan foto Geordi LaForge. Cobalah klik link ini, maka Anda akan dapatkan tampilan:

HTTP 404 – File Not Found

Ups! Tentu saja, kita belum buat skrip fotodsp.php. Kalau begitu, sekarang kita buat dulu skrip untuk menampilkan gambar.

fotodsp.php.


<?php
if ($id)
{

     // ambil variabel untuk koneksi basis data
     require("koneksi.inc.php");
     mysql_select_db("uss_enterprise", $koneksi);

     // baca FOTO dan JENIS dari database sesuai permintaan KODE awak
     $query = "SELECT JENIS, FOTO FROM awak WHERE KODE=$id";
     $result = mysql_query($query);

     // masukkan hasil query ke variabel $data dan $jenis
     $data = mysql_result($result,0,"FOTO");
     $tipe = mysql_result($result,0,"JENIS");

     // header untuk mencegah cache di browser agar gambar selalu update
     header("Cache-control: private, no-cache");
     header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");
     header("Pragma: no-cache");

     // header untuk memberi tahu browser jenis data yang akan ditampilkan
     header("Content-type: $tipe");

     // data gambar/foto dikirim ke browser
     echo $data;

}
?>

Ulangi memilih link untuk menampilkan foto Pak LaForge, maka browser Anda akan menampilkan file gambar (dalam ini berformat GIF). Mungkin Anda sedikit heran, bagaimana url http://%5Bserver_anda%5D/%5Bdirektori_skrip%5D/fotodsp.php?id=4 dapat menampilkan gambar GIF, bukannya text keluaran skrip PHP. Kuncinya adalah pada perintah:


header("Content-type: $tipe");

Yang akan memaksa browser untuk menampilkankan data sesuai dengan isi variabel $tipe. Variabel $tipe memiliki nilai yang diambil dari field JENIS, yang dalam contoh di atas akan berisi image/gif. Tidak percaya? OK. Bukalah program MySQL Client Anda dan ketikkan:


mysql> select JENIS from awak WHERE KODE=4;
+-----------+
| JENIS     |
+-----------+
| image/gif |
+-----------+
1 row in set (0.99 sec)

Header Content-type: image/gif ini yang menyebabkan data hasil dari echo $data; ditampilkan sebagai gambar GIF pada browser, bukannya sebagai data biner biasa. Cobalah untuk melakukan remark terhadap perintah tersebut, hasil skrip fotodsp.php akan sangat berbeda.

Tiga header sebelumnya digunakan untuk mencegah terjadi browser caching terhadap gambar, yang dapat menyebabkan browser tidak menampilkan gambar yang terakhir/terupdate.

Skrip fotodsp.php prinsipnya sangat sederhana, mengambil data biner dari field FOTO dan data jenis gambar dari field JENIS untuk field KODE sesuai dengan variabel $id pada url-nya. Hasilnya dikirim ke browser. Anda juga dapat menggunakan skrip ini sebagai url pada tag <img src=”…”>, jadi Anda dapat membuat sebuah file HTML dengan skrip PHP, yang akan menampilkan data lengkap awak dengan fotonya. Untuk fotonya cukup digunakan perintah skrip:


<?php
    .......
    echo "<img src=\"fotodsp?id=$id\">";
    .......
?>

Dengan $id adalah variabel hasil POST/GET atau variabel dari url yang memanggil skrip tersebut.

Bagaimana Dengan Data Yang Sudah Ada?

Kini Anda perlu menambahkan foto pada data yang telah ada, misalkan dalam contoh di atas adalah foto Pak Piccard, Pak Riker, dan Ibu Deanne Troi. Tentu saja Anda dapat melakukan hal ini dengan cara yang sangat primitif, yaitu menghapus data mereka lewat MySQL Client dan mengisi kembali data lengkap dengan foto melalui skrip awakinput.php. Tetapi sebagai seorang manusia yang beradab, Anda tentu ingin melakukannya dengan cara yang lebih cerdas. OK, mari kita modifikasi skrip awakedit.php menjadi seperti ini.

awakedit.php.


<html>
<head>
<title>Mengubah Data Awak</title>
<basefont face="Arial">
</head>

<body>

<?php
     // ambil variabel untuk koneksi basis data
     require("koneksi.inc.php");
     mysql_select_db($db, $koneksi);

     // cek apakah kondisi form terkirim atau tidak
     if (!$simpan)
     {

          // jika form tidak dalam kondisi terkirim,
          // tampilkan form pencarian nama
          // cek apakah variabel $kode dikirimkan
          if (!$kodeawak) {
               die('Tidak ada awak yang dipilih untuk diedit!'); }

          // Tentukan query untuk ada yang akan diambil
          $query = "SELECT KODE, NAMA, PANGKAT, JABATAN,
                    BERTUGAS, EMAIL, HOBI, JENIS FROM awak
                    WHERE KODE='$kodeawak'";

          // jalankan query
          $hasil = mysql_query($query) or
                   die('Kesalahan pada proses query!');

          // cek dan ekstrak hasil query
          $jml_rec = mysql_num_rows($hasil);
          if (!($jml_rec>0)) {
                   die('Data tidak ditemukan!'); }

          list($kode,$nama,$pangkat,$jabatan,$bertugas,$email,$hobi,
               $jenis) = mysql_fetch_row($hasil);

          ?>

          <center>
          <form action="<?php echo $PHP_SELF ?>"
          method="POST" enctype="multipart/form-data">
          <font size=5>Edit Data Awak USS Enterprise</font>

          <?php
               // Jika terdapat gambar/foto awak, maka tampilkan pada browser
               if ($jenis)
               {
                   echo "<p><img src=\"fotodsp.php?id=$kode\">";
               }
          ?>

          <p>
          <table border=0 cellspacing=2 cellpadding=2>

          <tr>
          <td>Nama Awak</td>
          <td>
          <input type="hidden" name="form_kode"
          value="<?php echo $kode ?>">
          <input type="text" name="form_nama" size="50"
          value="<?php echo $nama ?>" maxlength="50">
          </td>
          </tr>

          <tr>
          <td>Pangkat</td>
          <td>
          <input type="text" name="form_pangkat" size="50"
          value="<?php echo $pangkat ?>" maxlength="50">
          </td>
          </tr>

          <tr>
          <td>Jabatan</td>
          <td>
          <input type="text" name="form_jabatan" size="50"
          value="<?php echo $jabatan ?>" maxlength="50">
          </td>
          </tr>

          <tr>
          <td>Lama Bertugas</td>
          <td>
          <input type="text" name="form_bertugas" size="2"
          value="<?php echo $bertugas ?>" maxlength="2">
          (dalam tahun)
          </td>
          </tr>

          <tr>
          <td>e-mail</td>
          <td>
          <input type="text" name="form_email" size="50"
          value="<?php echo $email ?>" maxlength="50">
          </td>
          </tr>

          <tr>
          <td>Hobi</td>
          <td>
          <input type="text" name="form_hobi" size="50"
          value="<?php echo $hobi ?>" maxlength="50">
          </td>
          </tr>

          <tr>
          <td>File Foto</td>
          <td>
          <input type="file" name="form_foto" size="40">
          </td>
          </tr>

          <tr>
          <td colspan=2 align=center>
          <input type="submit" name="simpan" value=" Simpan ">
          </td>
          </tr>

          </table>

          </form>
          </center>

          <?php

          // bebaskan memori yang digunakan untuk proses
          mysql_free_result($hasil);

     }
     else
     {

          // jika form dalam kondisi terkirim,
          // lakukan perubahan basis data

          If ($form_foto != null)
          {
              // Jika $form_data terisi
              // baca file yang ditunjuk oleh $form_data sebesar ukuran file
              $data = ", FOTO='".
                      addslashes(fread(fopen($form_foto, "rb"),
                      filesize($form_foto))).
                      "'";

              // PHP akan secara otomatis membuat variabel $form_foto_type
              // yang terisi dengan jenis file yang dibaca.
              // Isikan nilai variabel tersebut ke variabel $jenisdata
              $jenisdata = ", JENIS='".$form_foto_type."'";
          }
          else
          {
              // jika $form_foto kosong
              $data = "";
              $jenisdata = "";
          }
          

          // tentukan query
          $query = "UPDATE awak SET
                        NAMA='".addslashes($form_nama)."',
                        PANGKAT='".addslashes($form_pangkat)."',
                        JABATAN='".addslashes($form_jabatan)."',
                        BERTUGAS=$form_bertugas,
                        EMAIL='".addslashes($form_email)."',
                        HOBI='".addslashes($form_hobi)."'
                        $data $jenisdata
                        WHERE KODE='$form_kode'";

          // lakukan proses query
          $hasil = mysql_query($query)
                             or die('Kesalahan pada proses query!');

          // Tampilkan pesan proses edit telah selesai

          ?>

          <center>
          <font size=5>Proses Edit Berhasil!</font><p>
          Data Awak Nama
          <b><?php echo addslashes($form_nama) ?></b>
          telah disimpan perubahannya.<p>
          <a href="awakdsp.php">Klik di sini untuk kembali</a>
          </center>

          <?php

     }

?>

</body>
</html>

Jalankan kembali skrip awakdsp.php dan pilih Edit untuk data Pak LaForge, maka pada browser Anda akan tampil sebagai berikut:

Gambar LaForge muncul dengan manis di bagian atas dari data LaForge. Cobalah untuk mengganti foto LaForge dengan foto Riker, misalnya, lalu simpan perubahan tersebut. Jika skrip awakedit dijalankan untuk data LaForge, maka kini yang muncul adalah foto Riker. Ganti kembali foto tersebut dengan foto LaForge dan tambahkan foto untuk data Piccard, Riker dan Deanne Troi. Nah, ternyata sangat mudah menjadi manusia beradab.

Sudah Tiada Lagi Yang Perlu Dikenang…

Bagian akhir dari seri pertama artikel ini akan membahas modifikasi terhadap skrip awakdel.php yang digunakan untuk menghapus data awak. Perubahan yang terjadi pada skrip ini sangat minimal, hanya akan menambahkan bagian untuk menampilkan gambar/foto awak sebelum dihapus. Lihatlah skrip yang telah dimodifikasi berikut ini.

awakdel.php


<html>
<head>
<title>Menghapus Data Awak</title>
<basefont face="Arial">
</head>

<body>

<?php

     // ambil variabel untuk koneksi basis data
     require("koneksi.inc.php");

     mysql_select_db($db, $koneksi);

     // cek apakah kondisi form terkirim atau tidak
     if (!$hapus)
     {
          // jika form tidak dalam kondisi terkirim,
          // tampilkan form pencarian nama

          // cek apakah variabel $kode dikirimkan
          if (!$kodeawak) {
                  die('Tidak ada awak yang dipilih untuk dihapus!'); }

          // Tentukan query untuk ada yang akan diambil
          $query = "SELECT KODE, NAMA, PANGKAT, JABATAN,
                    BERTUGAS, EMAIL, HOBI, JENIS FROM awak
                    WHERE KODE='$kodeawak'";

          // jalankan query
          $hasil = mysql_query($query) or
                 die('Kesalahan pada proses query!');

          // cek dan ekstrak hasil query
          $jml_rec = mysql_num_rows($hasil);
          if (!($jml_rec>0)) {
                die('Data tidak ditemukan!'); }

          list($kode,$nama,$pangkat,$jabatan,$bertugas,$email,$hobi,$jenis) =
                                mysql_fetch_row($hasil);

          ?>

          <center>
          <form action="<?php echo $PHP_SELF ?>" method="POST">
          <font size=5>Edit Data Awak USS Enterprise</font>

          <?php
               // Jika terdapat gambar/foto awak, maka tampilkan pada browser
               if ($jenis)
               {
                   echo "<p><img src=\"fotodsp.php?id=$kode\">";
               }
          ?>

          <p>
          <table border=0 cellspacing=2 cellpadding=2>

          <tr>
          <td>Nama Awak</td>
          <td>
          <input type="hidden" name="form_kode" value="<?php echo $kode ?>">
          <?php echo $nama ?>
          </td>
          </tr>

          <tr>
          <td>Pangkat</td>
          <td>
          <?php echo $pangkat ?>
          </td>
          </tr>

          <tr>
          <td>Jabatan</td>
          <td>
          <?php echo $jabatan ?>
          </td>
          </tr>

          <tr>
          <td>Lama Bertugas</td>
          <td>
          <?php echo $bertugas ?> tahun
          </td>
          </tr>

          <tr>
          <td>e-mail</td>
          <td>
          <?php echo $email ?>
          </td>
          </tr>

          <tr>
          <td>Hobi</td>
          <td>
          <?php echo $hobi ?>
          </td>
          </tr>

          <tr>
          <td colspan=2 align=center>
          <input type="submit" name="hapus" value=" Hapus Data ">
          </td>
          </tr>

          </table>
          </form>
          </center>

          <?php

          // bebaskan memori yang digunakan untuk proses
          mysql_free_result($hasil);

     }
     else
     {

          // jika form dalam kondisi terkirim,
          // lakukan penghapusan data

          // tentukan query
          $query = "DELETE FROM awak
                           WHERE KODE='$form_kode'";

          // lakukan proses query
          $hasil = mysql_query($query)
                           or die('Kesalahan pada proses query!');

          // Tampilkan pesan proses hapus telah selesai

          ?>

          <center>
          <font size=5>Proses Hapus Berhasil!</font><p>
          Data Awak Nama
          <b><?php echo addslashes($form_nama) ?></b>
          telah dihapus.

<p> <a href=”awakdsp.php”>Klik di sini untuk kembali</a> </center> <?php } ?> </body> </html>

Cobalah menghapus satu dua data awak dengan skrip di atas.

Menghela Nafas Sejenak

Ternyata tidak terlalu sulit menyimpan gambar/foto ke dalam database MySQL dengan menggunakan PHP. Cuma butuh trik saja. Untuk sementara ini, Anda dapat menghela nafas sejenak, karena Anda telah sedikit lepas dari tekanan pekerjaan. Apa yang diperintahkan Kapten Piccard, telah Anda kerjakan dengan baik. Kini saatnya Anda minum segelas minuman dingin dan bersiap mempresentasikan hasil karya Anda kepada Kapten. Anda tentu berharap Kapten Piccard antusias dengan kerja Anda kali ini. Benarkah? Nantikan seri kedua artikel ini….


Copyright © 2003 IlmuKomputer.Com All Rights Reserved
Supported by Gegar Technologies

Tentang belokibado251191

Tamatan dari: Sma ESSA SENIOR Teulale Baucau dan SMAN No.02 Vila Nova Baucau sekarang masih menjelang kuliah di Instituto Professional De Canossa Dili Timor Leste fakultas Technology Computer.
Pos ini dipublikasikan di Uncategorized. Tandai permalink.

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s