Kenangan, Biarkan PHP Mengabadikannya! - Bagian 1: Biarkan Seperti Apa Adanya
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://[server_anda]/[direktori_skrip]/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....
| 