http://rosihanari.

net

Tutorial WAP Membuat Katalog Buku

Tutorial kali ini menjelaskan bagaimana membuat katalog buku dengan aplikasi WAP.
Sebaiknya, perpustakaan saat ini mulai mengembangkan katalog yang bisa diakses secara
mobile oleh orang lain. So inilah pentingnya membuat aplikasi katalog dengan WAP.
OK kita mulai membuat katalog ini.
Seperti biasa, langkah awal kita siapkan dulu database dan tabelnya. Karena kasus ini
dibatasi hanya untuk katalog saja, maka diasumsikan data buku sudah tersimpan dalam
database. Berikut ini query untuk membuat tabel yang digunakan beserta beberapa record
buku.
CREATE TABLE `buku` (
`idBook` int(11) NOT NULL auto_increment,
`judul` text NOT NULL,
`pengarang` text NOT NULL,
`penerbit` text NOT NULL,
`letak` varchar(30) NOT NULL,
PRIMARY KEY (`idBook`)
);

INSERT INTO buku VALUES

(1, 'Pemrograman Komputer dengan
(2, 'Pemrograman Komputer dengan
(3, 'Pemrograman Komputer dengan
(4, 'Dasar-dasar Pemrograman Web
(5, 'Komputer dan Pemrograman ',

Pascal', 'Mr. X', 'PT. Y', 'Rak 1'),

C++', 'Mr. X', 'PT. Z', 'Rak 2'),
Delphi', 'Mr. M', 'PT. C', 'Rak 2');
PHP', 'Mr. M', 'PT. C', 'Rak 3');
'Mr. A', 'PT. D', 'Rak 4');

Diasumsikan telah terdapat 5 buah buku seperti di atas.

Untuk langkah awal pembuatan script, kita siapkan dahulu script config untuk setting
koneksi ke MySQL.
config.php
<?
$dbhost
$dbuser
$dbpass
$dbname

=
=
=
=

"localhost";
"root";
"root";
"katalog";

mysql_connect($dbhost, $dbuser, $dbpass);

mysql_select_db($dbname);
?>

16

http://rosihanari.net

Selanjutnya, kita siapkan pula file header dan footer. Kita buat sama saja dengan aplikasi
lain yang pernah kita buat.
header.php
<?
Header('Content-type:text/vnd.wap.wml'); // header untuk menghasilkan
dokumen wml
echo '<?xml version="1.0"?>';
echo '<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN"
"http://www.wapforum.org/DTD/wml_1.1.xml"> ';
?>
<wml>
<template>
</template>

Catatan:
Anda dapat menambahkan bagian template dengan menu kembali atau yang lain bila
diinginkan.
footer.php
</wml>

Nah selanjutnya kita buat script untuk interfacenya.

Dalam katalog ini nanti misalkan kita buat pencarian buku berdasarkan 2 kriteria, yaitu
judul dan pengarang. Dalam hal ini user bisa memilih kategori pencarian sesuai yang
diinginkan. Anda dapat menambahkan sendiri kategorinya bila mau, misalnya
berdasarkan penerbit, atau kata kunci. Akan tetapi untuk kata kunci, berarti Anda harus
menambahkan satu field lagi pada tabel buku untuk menyimpan data tersebut.
OK berikut ini adalah script untuk interface katalog.
index.php
<?
include "header.php";
include "config.php";
?>
<card id="index" title="Katalog Buku">
<do type="accept">
<go href="submit.php">
<postfield name="kategori" value="$(kategori)" />
<postfield name="keyword" value="$(keyword)" />
</go>
</do>
<p align="center">

17

http://rosihanari.net

<br />
<b>Perpustakaan Online</b>
<br />
</p>
<p>
<br />
Kategori pencarian :
<select name="kategori">
<option value="judul">Judul</option>
<option value="pengarang">Pengarang</option>
</select>
</p>
<p>
<br />
Keyword <input type="text" name="keyword" />
</p>
</card>
</wml>

Saya kira tidak perlu penjelasan lagi tentang script di atas, karena saya yakin Anda bisa
memahaminya dengan mudah (selama Anda memahami WML )
OK selanjutnya kita buat script untuk pencarian. Setelah user memilih kategori
pencarian dan memasukkan keyword lalu mensubmitnya, selanjutnya script submit.php
yang akan bekerja.
Karena jumlah buku hasil pencarian bisa jadi sangat banyak, maka sangat tidak
manusiawi apabila hasil pencarian tidak ditampilkan dengan menggunakan teknik paging
. Nah oleh karena itu, kita tambahkan saja teknik paging pada submit.php
submit.php
<?
include "header.php";
include "config.php";
?>
<card id="index" title="Katalog">
<p>
<small>
<?
$kategori = $_GET['kategori']; // membaca kategori dari form
$keyword = $_GET['keyword']; // membaca keyword dari form
$dataPerPage = 2;

// jumlah tampilan per halaman

if(isset($_GET['page']))
{
$pageNum = $_GET['page'];
}

18

http://rosihanari.net

else $pageNum = 1;
$offset = ($pageNum - 1) * $dataPerPage;
if ($kategori == "judul") {
// query pencarian apabila kategori berdasarkan judul
$query = "SELECT * FROM buku WHERE judul LIKE '%$keyword%'
LIMIT $offset, $dataPerPage";
}
else if ($kategori == "pengarang") {
// query pencarian apabila kategori berdasarkan pengarang
$query = "SELECT * FROM buku WHERE pengarang LIKE '%$keyword%'
LIMIT $offset, $dataPerPage";
}
$hasil = mysql_query($query);
// menampilkan data hasil pencarian
while ($data = mysql_fetch_array($hasil))
{
echo "Judul : ".$data['judul']."<br />Pengarang :
".$data['pengarang']."<br />Penerbit :
".$data['penerbit']."<br /><br />";
}
if ($kategori == "judul") {
// menghitung jumlah buku berdasarkan keyword dan kategori judul
$query = "SELECT COUNT(*) AS numrows FROM buku WHERE judul LIKE
'%$keyword%'";
}
else if ($kategori == "pengarang") {
// menghitung jumlah buku berdasarkan keyword dan kategori
// pengarang
$query = "SELECT COUNT(*) AS numrows FROM buku WHERE pengarang
LIKE '%$keyword%'";
}
$hasil
$row

= mysql_query($query) or die('Error');
= mysql_fetch_array($hasil, MYSQL_ASSOC);

$numrows = $row['numrows'];
$maxPage = ceil($numrows/$dataPerPage);
$self = $_SERVER['PHP_SELF'];

19

http://rosihanari.net

$nav

= '';

for($page = 1; $page <= $maxPage; $page++)

{
if ($page == $pageNum)
{
$nav .= "$page";
}
else
{
$nav .= "&nbsp;<a href=\"$self?page=$page&amp;
kategori=$kategori&amp;keyword=$keyword\">$page</a>&nbsp;";
}
}
echo "Page : ".$nav;
?>
</small>
</p>
</card>
<?
include "footer.php";
?>

Perhatikan code yang saya cetak merah pada script di atas.

Perintah SQL
SELECT * FROM
$dataPerPage

buku

WHERE

judul

LIKE

'%$keyword%'

LIMIT

$offset,

Digunakan untuk mencari data buku berdasarkan judul dengan keyword tertentu.
Mengapa SQL nya tidak menggunakan WHERE judul = '$keyword' ?
Penggunaaan WHERE judul LIKE '%$keyword%' dimaksudkan untuk menampilkan
buku yang judulnya mengandung kata dalam keyword.
Sebagai contoh misalkan ada 3 buah buku berjudul Pemrograman A, Pemrograman B,
Dasar-dasar Pemrograman. Apabila kita menggunakan WHERE judul LIKE
'%$keyword%' dengan $keyword = 'pemrograman', maka ketiga judul tersebut akan
muncul sebagai hasil pencariannya.
Lantas apa makna simbol % dalam perintah tersebut? Simbol % bisa berupa string atau
karakter apa saja. Sehingga apabila bentuk querynya berupa WHERE judul LIKE
'$keyword%' (tanda % paling depan dihapus) dengan $keyword = 'pemrograman',
maka hanya judul Pemrograman A dan Pemrograman B saja yang muncul. Sedangkan
apabila querynya berbentu WHERE judul LIKE '%$keyword' (tanda % paling belakang

20

http://rosihanari.net

dihapus) dengan $keyword = 'pemrograman', maka hanya judul Dasar-dasar

Pemrograman saja yang muncul. Oleh karena itu, untuk amannya kita tambahkan tanda
% di depan maupun di belakang keyword. Saya harapkan Anda paham dengan penjelasan
ini.
Penjelasan yang sama juga berlaku untuk perintah SQL
SELECT * FROM buku WHERE pengarang LIKE '%$keyword%' LIMIT $offset,
$dataPerPage

Sekarang perhatikan kode berikut ini

$nav .= "&nbsp;<a href=\"$self?page=$page&amp;
kategori=$kategori&amp;keyword=$keyword\">$page</a>&nbsp;";

Tahukah Anda makna dengan code yang dicetak merah itu? Ya.. kode itu untuk membuat
link sehubungan dengan keperluan navigasi halaman pada waktu paging. Link ini
menggunakan parameter kategori dan keyword yang telah dimasukkan user.
Mungkin Anda heran, mengapa bentuknya kok tidak seperti ini?
$nav .= "&nbsp;<a href=\"$self?page=$page&
kategori=$kategori&keyword=$keyword\">$page</a>&nbsp;";

Perhatikan perbedaan pada bagian &amp; (kode atas) dan tanda & (kode bawah).
Pernah saya coba menggunakan kode yang bawah, dan hasilnya error. Error inilah yang
pernah membuat saya frustasi berminggu-minggu, karena tidak tahu sebabnya. Secara
sintaks, tidak ada kesalahan.
Bahkan saya pernah berkesimpulan bahwa untuk aplikasi WAP tidak bisa membuat link
yang di dalamnya terdapat lebih dari 1 parameter. Padahal kita tahu bahwa untuk menulis
lebih dari satu parameter dalam link, setiap parameternya dipisahkan dengan tanda &,
misal http://.../script.php?a=5&b=6&c=8. Hal inilah yang membuat saya sempat
berpaling dari WAP
Tapi alhamdulillah saya mendapatkan ilham. (kadang seorang programmer
membutuhkannya untuk menyelesaikan permasalahan ). Terakhir tiba-tiba saya
langsung ingat bahwa WML merupakan bagian dari XML. Setahu saya, memang dalam
XML tidak mengenal tanda & di dalamnya. Jawaban atas sebab munculnya pesan
kesalahan sudah terjawab, lantas bagaimana cara mensiasatinya? Ya kita gunakan kode
&amp;. Dalam HTML dan WML, kode &amp; atau ampersand merupakan kode untuk
menampilkan tanda &. Setelah saya coba, alhamdulillah berhasil

21

http://rosihanari.net

OK dengan demikian aplikasi katalog WAP kita siap digunakan. Berikut ini beberapa
screenshotnya:

Tampilan awal

Memasukkan keyword pencarian

Memilih kategori pencarian

Hasil pencarian dengan paging

Pertanyaan seputar materi ini bisa didiskusikan via:

Email : rosihanari@gmail.com
YM : rosihanari
Forum : http://rosihanari.net/askme.php

22