How to create a guestbook ?

June 1, 2009 at 5:45 am 2 comments

Bagaimana sih membuat buku tamu yang mudah ? pakai php ?

Ohhh. Langkahnya sederhana saja. Pertama siapkan dahulu web servernya. Kemudian gunakan dreamweaver agar proses pembuatannya tinggal klak klik saja. Kalaupun ditambah coding ya sedikitlah. Oke ? siapkan folder untuk menyimpan file-file webnya.

Saya menggunakan AppServ untuk web servernya, Dreamweaver untuk editornya, dan mysql untuk DBMSnya.

Berikutnya buat database dan tablenya, saya sertakan sebagai contoh DDL dan DMLnya sebagai berikut :

Create database tamu;

CREATE TABLE `bukutamu` (

`id` int(11) NOT NULL auto_increment,

`nama` varchar(35) NOT NULL,

`email` varchar(35) NOT NULL,

`komentar` mediumtext NOT NULL,

PRIMARY KEY  (`id`)

) ENGINE=MyISAM  DEFAULT CHARSET=utf8 AUTO_INCREMENT=9 ;

INSERT INTO `bukutamu` VALUES (1, ‘Hary’, ‘hary@amik-kebumen.ac.id’, ‘Hallo semua’);

INSERT INTO `bukutamu` VALUES (2, ‘Hary’, ‘harys06@yahoo.co.id’, ‘Baik baik’);

INSERT INTO `bukutamu` VALUES (3, ‘Wiwit’, ‘wiwit09@yahoo.co.id’, ‘apik apik bae\r\n’);

INSERT INTO `bukutamu` VALUES (4, ‘Agus’, ‘agus@yahoo.com’, ‘Siip\r\nah\r\n’);

INSERT INTO `bukutamu` VALUES (5, ‘Sunaryo’, ‘naryo@gmail.com’, ‘ya benar’);

INSERT INTO `bukutamu` VALUES (6, ‘Gunawan’, ‘gun99@gmail.com’, ‘Sukses selalu\r\n’);

INSERT INTO `bukutamu` VALUES (7, ‘Gun Gun’, ‘gun89@gmail.com’, ‘dadi ora ya ?’);

INSERT INTO `bukutamu` VALUES (8, ‘jejel’, ‘jel@yahoo.co.id’, ‘mlebu’);

Buat folder untuk menyimpan file-file websitenya, saya contohkan seperti berikut:

tamu1

Kelihatan bahwa saya menggunakan 3 folder dengan hirarki folder bukutamu dan image berada di dalam folder Website.

Langkah berikutnya buka Dreamweaver (saya gunakan Dreamweaver 8),   buka Menu > Site > New Site

tamu2

Isikan seperti di atas, kemudian Next. Kemudian muncul

tamu3

Set seperti di atas juga, kemudian Next.  Sehingga muncul jendela lagi

tamu4

Diset seperti di atas juga, kemudian Next. Sehingga muncul menu lagi

tamu5

Diset seperti di atas juga, kemudian Next.  Muncul jendela seperti berikut

tamu6

Diset seperti di atas juga, kemudian Next.  Muncul jendela dan ada Pilihan Yes, enable check in and check out dan No, do not enable check in and check out. Pilih No, do not enable check in and check out dan kemudian Next. Kemudian Done.

Tampilan di atas menunjukkan file-file gambar dari template Healht & Nutrition – Home Page yang sudah dipilih akan dicopykan ke folder mana ? dari tampilan diatas saya arahkan ke folder image (C:\AppServ\www\Website\image) maksudnya saya agar image-image yang saya gunakan terkumpul di folder itu dan tidak tercampur dengan yang lain. Kemudian klik tombol Copy. Sehingga hasilnya seperti berikut :

Berikutnya mulai dengan proses pembuatan website. Pertama buat dahulu web untuk Home Pagenya, langkahnya > File > New > General > Starter Pages > Healht & Nutrition – Home Page > Create, kemudian Keluar menu Save As, beri nama file index dengan of typenya adalah PHP Files. File tersebut disimpan di Folder Website  (C:\AppServ\www\Website). Kemudian keluar jendela lagi seperti berikut :tamu7

Tampilan di atas menunjukkan file-file gambar dari template Healht & Nutrition – Home Page yang sudah dipilih akan dicopykan ke folder mana ? dari tampilan diatas saya arahkan ke folder image (C:\AppServ\www\Website\image) maksudnya saya agar image-image yang saya gunakan terkumpul di folder itu dan tidak tercampur dengan yang lain. Kemudian klik tombol Copy. Sehingga hasilnya seperti berikut :

tamu8

Selanjutnya pada menu food science (sebelah kiri)  diganti textnya menjadi Buku Tamu, kemudian text Buku Tamu tersebut diblok dan pada Combo Link diisikan “bukutamu/index.php” seperti jendela berikut :

tamu9rev

Setelah tampak seperti tampilan diatas, maka langkah selanjutnya file tersebut di Save As saja dengan nama index.php dan disimpan di folder bukutamu (C:\AppServ\www\Website\bukutamu)  apabila ada pesan Update Link, maka pilihannya adalah Yes. Hirarkinya bisa dilihat juga di dreamweaver seperti berikut :

tamu10

Kelihatan ada dua index.php, index.php yang bawah sebagai Home Page dan index.php yang ada di folder bukutamu adalah file web yang digunakan untuk menampilkan buku tamu. Kemudian buka  index.php yang ada pada folder buku tamu.

Hapus text WELCOME MESSAGE

Hapus text This Home Page layout makes a great starting point for your website. Virtually all of the content is customizable, including the images, the text, and the links. You can decide whether to keep the existing graphics or swap them out for pictures of your own dan seterusnya ke bawah dihapus juga.

Kemudian kursor akan berada di kiri tengah, agar kursor terletak di atas, pada Properties di bawah cari Vert dan pilih Top.  Sehingga tampak seperti berikut :

tamu11rev

Selanjutnya pada jendela Aplication (kanan atas) buka Tab Databases kemudian klik tanda + kemudian MySQL Connection sehingga muncul jendela sebagai berikut :

tamu12

Diset sesuai di atas, untuk user name dan password bisa disesuaikan dengan user  name dan password databasenya. Disini saya mencoba menggunakan root dan password rootnya.

tamu13

Hasilnya bisa dilihat seperti jendela di atas.  Setelah koneksi dibuat langkah selanjutnya adalah membuat recordset, langkahnya buka dahulu toolbar Application pada kiri  atas dan pilih Recordset

tamu14

Menu recordset sebagai berikut :

tamu15

Saya set seperti di atas, sort saya aktifkan berdasarkan id dan Descending, dengan maksud postingan terakhir akan tampil paling atas. Kemudian OK dan OK.

Selanjutnya letakkan kursor di bawah text “Silahkan mengisi buku tamu” kemudian klik Dynamic Table disebelah kanan Icon Recordset, sehingga keluar Jendela Dynamic Table seperti berikut :

tamu16

Saya set seperti di atas, pada Show saya set 10, maksudnya dalam satu halaman nantinya menampilkan 10 data saja, data yang lain ada di halaman berikutnya.

tamu17

Kemudian dari tampilan di atas dimodif menjadi seperti berikut :

tamu18

Sesuai dengan tampilan yang saya lingkari, cara memodifnya saya rubah sedikit codingnya (saya tebalkan) seperti berikut :

<?php require_once(‘../Connections/koneksi.php’); ?>

<?php

$maxRows_RecordsetTamu = 10;

$pageNum_RecordsetTamu = 0;

if (isset($_GET[‘pageNum_RecordsetTamu’])) {

$pageNum_RecordsetTamu = $_GET[‘pageNum_RecordsetTamu’];

}

$startRow_RecordsetTamu = $pageNum_RecordsetTamu * $maxRows_RecordsetTamu;

mysql_select_db($database_koneksi, $koneksi);

$query_RecordsetTamu = “SELECT nama, email, komentar FROM bukutamu ORDER BY id DESC”;

$query_limit_RecordsetTamu = sprintf(“%s LIMIT %d, %d”, $query_RecordsetTamu, $startRow_RecordsetTamu, $maxRows_RecordsetTamu);

$RecordsetTamu = mysql_query($query_limit_RecordsetTamu, $koneksi) or die(mysql_error());

$row_RecordsetTamu = mysql_fetch_assoc($RecordsetTamu);

if (isset($_GET[‘totalRows_RecordsetTamu’])) {

$totalRows_RecordsetTamu = $_GET[‘totalRows_RecordsetTamu’];

} else {

$all_RecordsetTamu = mysql_query($query_RecordsetTamu);

$totalRows_RecordsetTamu = mysql_num_rows($all_RecordsetTamu);

}

$totalPages_RecordsetTamu = ceil($totalRows_RecordsetTamu/$maxRows_RecordsetTamu)-1;

?><!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;

<html xmlns=”http://www.w3.org/1999/xhtml”&gt;

<!– DW6 –>

<head>

<!– Copyright 2005 Macromedia, Inc. All rights reserved. –>

<title>Home Page</title>

<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />

<link rel=”stylesheet” href=”../image/mm_health_nutr.css” type=”text/css” />

<script language=”JavaScript”>

//————— LOCALIZEABLE GLOBALS —————

var d=new Date();

var monthname=new Array(“January”,”February”,”March”,”April”,”May”,”June”,”July”,”August”,”September”,”October”,”November”,”December”);

//Ensure correct for language. English is “January 1, 2004″

var TODAY = monthname[d.getMonth()] + ” ” + d.getDate() + “, ” + d.getFullYear();

//—————   END LOCALIZEABLE   —————

</script>

</head>

<body bgcolor=”#F4FFE4″>

<table width=”100%” border=”0″ cellspacing=”0″ cellpadding=”0″>

<tr bgcolor=”#D5EDB3″>

<td width=”382″ colspan=”3″ rowspan=”2″><img src=”../image/mm_health_photo.jpg” alt=”Header image” width=”382″ height=”101″ border=”0″ /></td>

<td width=”378″ height=”50″ colspan=”3″ valign=”bottom” align=”center” nowrap=”nowrap”>insert website name</td>

<td width=”100%”>&nbsp;</td>

</tr>

<tr bgcolor=”#D5EDB3″>

<td height=”51″ colspan=”3″ valign=”top” align=”center”>OPTIONAL TAGLINE HERE</td>

<td width=”100%”>&nbsp;</td>

</tr>

<tr>

<td colspan=”7″ bgcolor=”#5C743D”><img src=”../image/mm_spacer.gif” alt=”” width=”1″ height=”2″ border=”0″ /></td>

</tr>

<tr>

<td colspan=”7″ bgcolor=”#99CC66″ background=”../image/mm_dashed_line.gif”><img src=”../image/mm_dashed_line.gif” alt=”line decor” width=”4″ height=”3″ border=”0″ /></td>

</tr>

<tr bgcolor=”#99CC66″>

<td colspan=”7″ height=”20″>&nbsp;&nbsp;<script language=”JavaScript”>

document.write(TODAY);      </script>              </td>

</tr>

<tr>

<td colspan=”7″ bgcolor=”#99CC66″ background=”../image/mm_dashed_line.gif”><img src=”../image/mm_dashed_line.gif” alt=”line decor” width=”4″ height=”3″ border=”0″ /></td>

</tr>

<tr>

<td colspan=”7″ bgcolor=”#5C743D”><img src=”../image/mm_spacer.gif” alt=”” width=”1″ height=”2″ border=”0″ /></td>

</tr>

<tr>

<td width=”165″ valign=”top” bgcolor=”#5C743D”>

<table border=”0″ cellspacing=”0″ cellpadding=”0″ width=”165″ id=”navigation”>

<tr>

<td width=”165″>&nbsp;<br />

&nbsp;<br /></td>

</tr>

<tr>

<td width=”165″><a href=”javascript:;”>topics</a></td>

</tr>

<tr>

<td width=”165″><a href=”javascript:;” class=”navText”>guidelines</a></td>

</tr>

<tr>

<td width=”165″><a href=”javascript:;” class=”navText”>educators</a></td>

</tr>

<tr>

<td width=”165″><a href=”javascript:;”>special needs</a></td>

</tr>

<tr>

<td width=”165″><a href=”index.php”>Buku Tamu</a> </td>

</tr>

</table>

<br />

&nbsp;<br />

&nbsp;<br />

&nbsp;<br />     </td>

<td width=”50″><img src=”../image/mm_spacer.gif” alt=”” width=”50″ height=”1″ border=”0″ /></td>

<td width=”305″ colspan=”2″ valign=”top”><img src=”../image/mm_spacer.gif” alt=”” width=”305″ height=”1″ border=”0″ /><br />

&nbsp;<br />

&nbsp;<br />

<table border=”0″ cellspacing=”0″ cellpadding=”0″ width=”305″>

<tr>

<td class=”pageName”>&nbsp;</td>

</tr>

<tr>

<td valign=”top” class=”bodyText”><p>Silahkan mengisi buku tamu</p>

<table width=”337″ border=”0″>

<tr>

<td width=”67″>&nbsp;</td>

<td width=”10″>&nbsp;</td>

<td width=”214″>&nbsp;</td>

</tr>

<?php do { ?>

<tr>

<td>Nama</td>

<td>:</td>

<td><?php echo $row_RecordsetTamu[‘nama’]; ?></td>

</tr>

<tr>

<td>Email</td>

<td>:</td>

<td><?php echo $row_RecordsetTamu[’email’]; ?></td>

</tr>

<tr>

<td>Komentar</td>

<td>:</td>

<td><?php echo $row_RecordsetTamu[‘komentar’]; ?></td>

</tr>

<tr>

<td>&nbsp;</td>

<td>&nbsp;</td>

<td>&nbsp;</td>

</tr>

<?php } while ($row_RecordsetTamu = mysql_fetch_assoc($RecordsetTamu)); ?>

</table></td>

</tr>

</table>

<br />

&nbsp;<br />     </td>

<td width=”50″><img src=”../image/mm_spacer.gif” alt=”” width=”50″ height=”1″ border=”0″ /></td>

<td width=”190″ valign=”top”><br />

&nbsp;<br />

<table border=”0″ cellspacing=”0″ cellpadding=”0″ width=”190″>

<tr>

<td width=”10″><img src=”../image/mm_spacer.gif” alt=”” width=”10″ height=”1″ border=”0″ /></td>

<td width=”170″><br />

<p><span class=”subHeader”>TITLE HERE</span><br />

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam. </p>

<p><span class=”subHeader”>TITLE HERE</span><br />

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam. </p>

<p><span class=”subHeader”>TITLE HERE</span><br />

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam. </p>

<br />

&nbsp;<br />          </td>

<td width=”10″>&nbsp;</td>

</tr>

</table>        </td>

<td width=”100%”>&nbsp;</td>

</tr>

<tr>

<td width=”165″>&nbsp;</td>

<td width=”50″>&nbsp;</td>

<td width=”167″>&nbsp;</td>

<td width=”138″>&nbsp;</td>

<td width=”50″>&nbsp;</td>

<td width=”190″>&nbsp;</td>

<td width=”100%”>&nbsp;</td>

</tr>

</table>

</body>

</html>

<?php

mysql_free_result($RecordsetTamu);

?>

Sampai sini sudah bisa dilihat di browser hasilnya seperti berikut :

tamu19

Sudah kelihatan bahwa data sudah bisa ditampilkan, langkah selanjutnya adalah membuat link untuk first prev next last, fasilitas ini disediakan oleh dreamweaver, tinggal diaktifkan saja. Cara mengaktifkannya letakkan kursor di bawah table Recordset atau table yang menampilkan buku tamu. Kemudian klik Recordset Navigation Bar seperti gambar di bawah ini

tamu20

Kemudian keluar jendela Recordset Navigation Bar, pada Recordset pilih RecordsetTamu dan pada Display using ada pilihan Text dan Images, saya mencoba memili Text kemudian klik OK.

Sehingga navigasinya muncul, namun sampai disini apabila dilihat di browser belum bisa muncul karena data yang masuk pada table bukutamu baru 8 data, sedangkankan pada RecordsetTamu sudah diset 10, jadi jika datanya belum lebih dari 10 tentu navigasinya belum muncul. Agar muncul navigasinya saya tambahkan datanya dengan memasukkan DML di SQL sebagai berikut :

INSERT INTO bukutamu (nama,email,komentar) VALUES (‘Hary’, ‘hary@amik-kebumen.ac.id’, ‘Alhamdulilan OL juga’);

INSERT INTO bukutamu (nama,email,komentar) VALUES (‘Aris’, ‘aris@yahoo.com’, ‘iya betul dah OL’);

INSERT INTO bukutamu (nama,email,komentar) VALUES (‘Hary’, ‘hary@amik-kebumen.ac.id’, ‘coba diposting baru’);

INSERT INTO bukutamu (nama,email,komentar) VALUES (‘wiwin’, ‘wiwin90@yahoo.co.id’, ‘aku ikut posting deh’);

INSERT INTO bukutamu (nama,email,komentar) VALUES (‘Hary’, ‘hary@amik-kebumen.ac.id’, ‘nah itu sip’);

INSERT INTO bukutamu (nama,email,komentar) VALUES (‘wiwin’, ‘wiwin90@yahoo.co.id’, ‘Kuliah lagi mulai kapan ya’);

INSERT INTO bukutamu (nama,email,komentar) VALUES (‘Hary’, ‘hary@amik-kebumen.ac.id’, ‘Oke jadwal kuliah dah aku psoting’);

INSERT INTO bukutamu (nama,email,komentar) VALUES (‘wiwin’, ‘wiwin90@yahoo.co.id’, ‘Ya trims infonya’);

INSERT INTO bukutamu (nama,email,komentar) VALUES (‘Hary’, ‘hary@amik-kebumen.ac.id’, ‘Sama-sama’);

INSERT INTO bukutamu (nama,email,komentar) VALUES (‘Ani’, ‘any908@yahoo.com’, ‘Mohon info pendaftaran donk’);

INSERT INTO bukutamu (nama,email,komentar) VALUES (‘Hary’, ‘hary@amik-kebumen.ac.id’, ‘info PMB ada diindex bisa dilihat kok’);

INSERT INTO bukutamu (nama,email,komentar) VALUES (‘Ani’, ‘any908@yahoo.com’, ‘OK trim sudah aku copy’);

INSERT INTO bukutamu (nama,email,komentar) VALUES (‘Aris’, ‘aris@yahoo.com’, ‘Sertifikasi Jeni akan dimulai kapan Pak’);

INSERT INTO bukutamu (nama,email,komentar) VALUES (‘Hary’, ‘hary@amik-kebumen.ac.id’, ‘ya besok aku psoting deh’);

INSERT INTO bukutamu (nama,email,komentar) VALUES (‘wiwin’, ‘wiwin90@yahoo.co.id’, ‘kami tunggu pak’);

INSERT INTO bukutamu (nama,email,komentar) VALUES (‘Hary’, ‘hary@amik-kebumen.ac.id’, ‘ya insya allh besok dah ada di web ini juga terpampang di Kampus’);

INSERT INTO bukutamu (nama,email,komentar) VALUES (‘wiwin’, ‘wiwin90@yahoo.co.id’, ‘Dengar-dengar ada seminar di AULA AMIK’);

INSERT INTO bukutamu (nama,email,komentar) VALUES (‘Hary’, ‘hary@amik-kebumen.ac.id’, ‘ya tapi kemarin minggu’);

INSERT INTO bukutamu (nama,email,komentar) VALUES (‘wiwin’, ‘wiwin90@yahoo.co.id’, ‘walah telat donk’);

INSERT INTO bukutamu (nama,email,komentar) VALUES (‘Hary’, ‘hary@amik-kebumen.ac.id’, ‘ya, penyelenggaranya Yayasan PGRI’);

INSERT INTO bukutamu (nama,email,komentar) VALUES (‘Ani’, ‘any908@yahoo.com’, ‘Pembicara dari mana’);

INSERT INTO bukutamu (nama,email,komentar) VALUES (‘Hary’, ‘hary@amik-kebumen.ac.id’, ‘UNNES’);

INSERT INTO bukutamu (nama,email,komentar) VALUES (‘Ani’, ‘any908@yahoo.com’, ‘oh, ya thanks’);

Ok sampai disini datanya sudah ada 31 tinggal dilihat di browser sudah muncul ada belum ? hasilnya seperti berikut :

tamu22

Kelihatan bahwa navigatornya muncul, bisa dicoba Next dan Last. Dalam satu halaman terlihat ada 10 postingan yang ditampilkan, namun jika saya ingin merubahnya sederhana saja, saya akan mencoba menampilkan 5 psotingan saja. Maka cukup dengan merubah coding paling atas seperti berikut :

<?php require_once(‘../Connections/koneksi.php’); ?>

<?php

$currentPage = $_SERVER[“PHP_SELF”];

$maxRows_RecordsetTamu = 5;

$pageNum_RecordsetTamu = 0;

if (isset($_GET[‘pageNum_RecordsetTamu’])) {

$pageNum_RecordsetTamu = $_GET[‘pageNum_RecordsetTamu’];

}

Hanya saya ganti nilai $maxRows_RecordsetTamu = 10; menjadi $maxRows_RecordsetTamu = 5; kemudian simpan dan coba, sehingga hasilnya bisa dilihat di browser seperti berikut :

tamu25

Sudah muncul, bisa dicoba dengan klik Next, Last, Previous, First.

Selanjutnya untuk mengentry buku tamu, perlu dibuat  page baru lagi.  Dari file index.php yang ada dalam buku tamu, saya Save As saja kemudian table yang menampilkan data dihapus, termasuk table yang didalamnya berisi Navigator sehingga menjadi seperti berikut :

tamu26

Letakkan kursor di table tengah yang kosong tersebut seperti di atas. Kemudian klik Record Insertion Form Wizard

tamu27

Kemudian keluar jendela lagi yang perlu diset seperti berikut :

tamu28

Diset seperti di atas, yang perlu diperhatikan, pada Form fields ada 4 field yaitu id, nama, email, dan komentar, khusus untuk id dihilangkan dengan cara diklik kemudian klik tanda min (-), sehingga id tidak ada dalam daftar Form fields.

Kemudian perlu dicek satu-satu mulai dari field nama, mestinya menggunakan Display as Text field, untuk email juga demikian, namun khusus untuk komentar menggunakan Display as Text area. Kemudian OK. Sehingga hasilnya seperti berikut :

tamu29

Sampai disini perlu disimpan filenya, dan kembali ke file index.php yang ada pada folder bukutamu.  Kemudian blok text mengisi dari kalimat Silahkan mengisi buku tamu. Kemudian buka menu Insert > Hyperlink sehingga muncul jendela sebagai berikut :

tamu30

Bisa diset seperti di atas dan kemudian OK. Kemudian jalankan di browser index.php, maka buku tamunya sudah jadi.

Sebagai arsip digital bisa artikel ini bisa didownload.

Entry filed under: Web Programming. Tags: .

Menambah menu Dosen dengan struts makan dan bicara

2 Comments Add your own

  • 1. rollerfebaybe  |  July 13, 2009 at 7:40 am

    Hey

    I like Your site. It is very interesting. Do You have RSS I want to add to my favorites.
    Let me know when it will be ready. Kee it UP.
    see ya Szczecin Hotele

    Reply
  • 2. autontagnink  |  October 29, 2009 at 1:47 pm

    Hmm
    LOL
    HmmBest
    Norman
    little lolita porno 13 yo

    Reply

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Trackback this post  |  Subscribe to the comments via RSS Feed


June 2009
M T W T F S S
« May   Aug »
1234567
891011121314
15161718192021
22232425262728
2930  

%d bloggers like this: