Membuat Buku tamu


Tutorial Dreamweaver ini adalah lanjutan dari dua seri tutorial sebelumnya yakni : Tutorial Desain Web dengan Dreamweaver #1 dan Tutorial Dreamweaver #2: Membuat Template . Dan untuk kali ini kita mencoba untuk belajar membuat GuestBook atawa Buku tamu menggunakan Dreamweaver, PHP dan database MySQL.

Salah satu cara untuk mengetahui kinerja situs dan respon dari pengunjung situs adalah dengan memberi fasilitas buku tamu. Buku tamu memberikan interaktivitas antara pengunjung situs dengan pengelola situs sehingga kita bisa mengevaluasi situs yang dikelola tersebut. Buku tamu menggunakan bahasa pemrograman PHP dan database MySQL sehingga data-data yang ditampilkan bersifat dinamis atau bisa berubah ketika ada input baru.

Karena menggunakan bahasa pemrograman PHP yang bersifat serverside, maka diperlukan web server dan database server, jalankan program aplikasi server tersebut. Web server yang support PHP banyak sekali tapi yang lebih enak pake APache karena secara default memang digunakan untuk memproses PHP, kemudian untuk database server mengguankan MySQL. Untuk lebih mudahnya lebih baik menggunakan bundel server, jadinya ketika kita menginstal bundel server tersebut, kita sudah menginstall database server dan web server sekalian, enggak repot jgua untuk konfiugrasi. Ada banyak sekali penyedia bundle server. Untuk indonesia yang cukup terkenal adalah Dongkrak Server, untuk luar negeri banyak banget, yang cukup terkenal misalnya adalah: XAMPP, PHP Triad, EasyPHP, Apache2Triad. jadi intinya kalo belum punya silahken dunlut dulu…….

Setelah diinstall dan dijalankan, bukalah browser internet explorer dan ketik pada kotak address: http://localhost , jika berhasil menampilkan halaman server, maka nanti kita bisa membuat buku tamu.

  1. Membuat database buku tamu

Agar data-data buku tamu dari pengunjung bisa diubah, dihapus, diberi masukan baru dsb, maka diperlukan suatu database. Untuk membuat database, pada browser tadi masuklah ke link PHPMyAdmin / MySql.

Akan muncul form untuk memasukkan username dan password, secara default usernamenya adalah: root dan tanpa password, kemudian tekan tombol [ENTER] pada keyboard.

Setelah itu Anda akan masuk ke halaman utama PHPMyAdmin, buat database baru dengan nama pantai kemudian klik Create. Setelah database bukutamu berhasil dibuat, pada kolom sebelah kiri terdapat box database, pilih database bukutamu, Anda akan masuk ke bagian database pantai. Setelah membuat database, yang dilakukan selanjutnya adalah membuat tabel pada databe tersebut, caranya ketik bukutamu pada kotak Name, dan pada kotak Number of Fields ketik 5

Beri input pada masing-masing field dengan ketentuan seperti ini

Field Type Lebar Keterangan
id int 5 Auto Increment, primary key
Nama Varchar 30
Email Varchar 40
Alamat Varchar 40
Komentar Text

Sekarang Anda telah memiliki database dengan nama pantai dan tabel dengan nama bukutamu

  1. Koneksi database dengan file web

Agar file web buku tamu yang kita buat bisa mengakses database pantai pada tabel bukutamu, maka antara database dan file web perlu untuk disambungkan atau dikoneksikan, cara menyambungnya adalah pada panel sebelah kiri bagian Application, klik tab Database kemudian klik ikon + untuk membuat MySQL Connection

Setelah itu akan tampil konfigurasi MySql Connection, isikan nama koneksi, nama MySql server, username database, password database dan pilih database dengan cara menekan tombol Select. Sesudah itu klik OK

c. Membuat Recordset

Kegunaan recordset adalah untuk menampilkan field-field tabel database pada halaman web yang dibuat. Untuk membuat recordset, pada bagian panel Application, pindah ke tab Binding, kemudian klik ikon + Add recordset, isikan nama recordset, nama koneksi, nama tabelnya seperti gambar di bawah ini:
d. Menampilkan tabel dinamis bukutamu

Untuk menampilkan data-data isian buku tamu nantinya, perlu dibuat tabel bukutamu. Pada panel Insert, klik tab Application, pilih ikon Dynamic Tabel kemudian akan tampil jendela Dynamic Tabel, isilah seperti gambar di bawah ini:

Setelah itu, pada bagian editable region akan muncul tabel bukutamu dengan sendirinya. Ubahlah tampilannya sesuai dengan kebutuhan dan simpan filenya dengan nama misalnya: bukutamu.php

  1. Membuat form input buku tamu

Agar pengunjung bisa mengisi buku tamu, maka perlu disediakan form buku tamu , buatlah file baru dari template tadi dan beri nama dengan : isi_bukutamu.php kemudian buat recordset seperti cara di atas.

Setelah itu, buat area form untuk input buku tamu dengan cara masuk ke tab Forms pada panel Insert kemudian klik ikon form. Sesudah membuat area form, untuk mempermudah membuat input form, buat dulu sebuah tabel dengan rincian rows = 5, columns = 2, width = 450 pixel , border = 0, cellpadding = 2, cellspacing = 2.

Pada kolom sebelah kiri, untuk masing-masing sel isikan teks sebagai berikut:

Nama, Email, Alamat, Komentar.

Pada kolom sebelah kanan, isikan kotak form untuk masing-masing field dengan cara klik ikon text field pada tab Form untuk field Nama, Email, Alamat dan ikon text area pada field komentar. Ikon Button pada sel tabel paling bawah

Hasil dari pembuatan input form seperti di bawah ini:
Kemudian pada masing-masing input form beri nama pada panel property sesuai dengan namanya

f. Memasukkan input form ke bukutamu

Untuk memasukkan data yang dimasukkan user ke dalam table bukutamu database pantai, caranya adalah pada panel Application sebelah kanan, masuk ke tab Server Behaviours. Klik pada ikon + kemudian pilih insert record dan sesuaikan data seperti gambar di bawah ini:

oiya, jangan lupa juga, simpan nama file tersebut misalnya isi_bukutamu.phpYa…gitu aja….mudah kan?….Semoga bermanfaat ya

Pos ini dipublikasikan di web desain dan tag . Tandai permalink.

2 Balasan ke Membuat Buku tamu

  1. jendelakatatiti berkata:

    He..he artikelnya bagus, tapi berhubung aku gaptek nggak terlalu paham, susah nggak sih dipraktekkan? Ma kasih …jendelakatatiti.wordpress.com

  2. andi berkata:

    mantap artikelnya…

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