- Home »
- Membuat Buku Tamu Sederhana + WYSIWYG
Fatkhan
On Jumat, 04 September 2009
Oke pada kesempatan kali ini saya akan memberikan sedikit contoh bagaimana
membuat Bukutamu sederhana menggunakan PHP dan MySql...
Pertama-tama buatlah database "bukutamu"
Lalu isi dengan tabel-tabel sebagai berikut..
no_tamu (Type:int, Length/Values:3, Extra:auto_increment)
nama (Type:Varchar, Length/values:30)
email (Type:Varchar, Length/values:40)
pesan (Type:Text)
Sesuaikan dengan kebutuhan Anda saja...
Nah setelah itu buatlah koneksi.php
Code:
$my['host'] = "localhost";
$my['user'] = "root";
$my['pass'] = "password mysql anda";
$my['dbs'] = "bukutamu";
$koneksi = mysql_connect($my['host'], $my['user'], $my['pass']);
if (! $koneksi) {
echo "Gagal Koneksi Bro....";
mysql_error();
}
mysql_select_db($my['dbs'])
or die ("Database Gak Ada".mysql_error());
?>
$my['user'] = "root";
$my['pass'] = "password mysql anda";
$my['dbs'] = "bukutamu";
$koneksi = mysql_connect($my['host'], $my['user'], $my['pass']);
if (! $koneksi) {
echo "Gagal Koneksi Bro....";
mysql_error();
}
mysql_select_db($my['dbs'])
or die ("Database Gak Ada".mysql_error());
?>
Ingat Host, User, Pass, dan Database harus disesuaikan...
Nah baru kita buat Form untuk menginput buku tamu dengan nama
form_tamu.php
Code:
INPUT BUKU TAMU
Nah hasil inputan pada form_tamu.php akan dilaksanakan oleh
input_bukutamu.php
Code:
include "koneksi.php";
$txtNama = $_POST['txtNama'];
$txtEmail = $_POST['txtEmail'];
$txtPesan = $_POST['txtPesan'];
if(strlen($txtNama)<1)
{
echo "Nama Masih Kosong";
}
else if(strlen($txtEmail)<1)
{
echo "Email Masih Kosong";
}
else if(strlen($txtPesan)<1)
{
echo "Pesan Masih Kosong";
}
else {
$txtNama=strip_tags($txtNama);
$txtEmail=strip_tags($txtEmail);
$txtPesan=strip_tags($txtPesan);
$sqlSimpan = "INSERT INTO tamu(nama, email, pesan)
values('$txtNama', '$txtEmail', '$txtPesan')";
mysql_query($sqlSimpan, $koneksi)
or die ("Gagal Perintah SQL".mysql_error());
echo "PENYIMPANAN BERHASIL";
}
echo "";
?>
$txtNama = $_POST['txtNama'];
$txtEmail = $_POST['txtEmail'];
$txtPesan = $_POST['txtPesan'];
if(strlen($txtNama)<1)
{
echo "Nama Masih Kosong";
}
else if(strlen($txtEmail)<1)
{
echo "Email Masih Kosong";
}
else if(strlen($txtPesan)<1)
{
echo "Pesan Masih Kosong";
}
else {
$txtNama=strip_tags($txtNama);
$txtEmail=strip_tags($txtEmail);
$txtPesan=strip_tags($txtPesan);
$sqlSimpan = "INSERT INTO tamu(nama, email, pesan)
values('$txtNama', '$txtEmail', '$txtPesan')";
mysql_query($sqlSimpan, $koneksi)
or die ("Gagal Perintah SQL".mysql_error());
echo "PENYIMPANAN BERHASIL";
}
echo "";
?>
Perhatikan script diatas yang seperti ini...
Code:
$txtNama=strip_tags($txtNama);
$txtEmail=strip_tags($txtEmail);
$txtPesan=strip_tags($txtPesan);
$txtEmail=strip_tags($txtEmail);
$txtPesan=strip_tags($txtPesan);
Ini berguna untuk mencegah agar orang yang iseng tidak bisa menginput
script html yang berbahaya atau bahasa kerennya melakukan HTML Injection...
Betul gak tuh? Nah ente master2 disini yang lebih tau...
Selain strip_tags() juga bisa menggunakan htmlentities() atau htmlspecialchars()
Dan untuk menampilkan pesan maka harus dibuat tampil.php
Code:
No | Nama | Pesan | |
Dan jangan lupa untuk memasukkan keempat file tersebut yaitu form_tamu.php,
input_bukutamu.php, koneksi.php dan tampil.php dalam satu folder...
Maka ketika form diisi dan langsung kirim maka hasilnya seperti ini pada tampil.php
Nah agar hasil buku tamu langsung terlihat pada form_tamu tinggal tambahkan saja script berikut pada form_tamu.php
Code:
include("tampil.php");
?>
?>
Letakkan dibawah tag maka hasilnya akan seperti ini...
Jelek yah? Bodo amat, kan cuman dasar aja... Dan saya yakin pasti
anda-anda semua dah pada jago neh ngembanginnya...
Secara standar, textarea ditampilkan apa adanya, artinya teks yang diketik
tidak bisa diformat, misalnya pada kalimat tertentu ingin ditebalkan,
dimiringkan atau diatur jenis dan ukuran hurufnya. Hal ini tidak bisa
dilakukan dalam textarea standar, kecuali jika anda hafal dengan perintah
HTML dan menuliskannya secara manual di text area tersebut, namun bagi user
yang awam hal ini cukup menyulitkan.
Solusinya adalah menggunakan WYSIWYG (What You See Is What You Get) -
apa yang kau lihat adalah apa yang kau dapatkan.Menurut pengertian dari
Wikipedia, WYSIWYG adalah suatu editor yang memungkinkan user untuk
menentukan format, ukuran dan jenis huruf, menambahkan hyperlink dan tabel,
dan juga bisa mengupload file, gambar, animasi flash dan video.
Singkatnya, editor WYSIWYG sangat memudahkan kita dalam mengisi konten
website seperti layaknya mengetik di aplikasi pengolah kata seperti
Word atau OpenOffice...
Untuk lebih jelasnya anda bisa langsung ke TKP, ini ada beberapa link
- FCKEditor (http://www.fckeditor.net)
- tinyMCE (http://tinymce.moxiecode.com)
- nicEdit (http://nicedit.com)
- Wyzz (http://www/wyzz.info/home_page.html)
- Xinha (http://xinha.python-hosting.com)
- HTMLArea (http://www.htmlarea.com)
Nah dalam kasus ini saya menggunakan nicEdit... Coba aja download dulu
di situsnya maka anda akan mendapatkan 2 buah file yaitu
nicEdit.js dan niCeditorIcons.gif
Copy kedua file tersebut ke dalam folder yang sama dengan keempat file
yang tadi kita buat...
Lalu buka form_tamu.html dan sisipkan script berikut tepat dibawah
Code:
Maka hasil yang didapat adalah seperti ini...
Gak berhasil ketika pencet "kirim"?
Well, ingat kan tadi kita menggunakan
Code:
$txtNama=strip_tags($txtNama);
$txtEmail=strip_tags($txtEmail);
$txtPesan=strip_tags($txtPesan);
$txtEmail=strip_tags($txtEmail);
$txtPesan=strip_tags($txtPesan);
Untuk mencegah user melakukan input script HTML yang mungkin berbahaya?
Nah dengan sangat terpaksa kita harus nonaktifkan script berikut dengan
menambah karakter "//" tepat di depannya sehingga menjadi...
Code:
// $txtNama=strip_tags($txtNama);
// $txtEmail=strip_tags($txtEmail);
// $txtPesan=strip_tags($txtPesan);
// $txtEmail=strip_tags($txtEmail);
// $txtPesan=strip_tags($txtPesan);
Semoga berguna...