Menu

Detail Artikel

Home/ Web Design/Detail Artikel

Membuat Shoutbox dengan PHP & Mysql

Mungkin anda sudah tau apa itu shoutbox dan apa kegunaan dari shoutbox, karena untuk saat ini hampir semua website atau blog memasang yang namanya shoutbox dan banyak juga shoutbox-shoutbox gratis yang bisa langsung kita pasang pada website atau blog kita.
Namun kali ini saya tidak akan membahas bagaimana cara mendaftarkan ke alamat situs penyedia shoutbox-shoutbox gratis yang dapat langsung dapat kita pasang pada website / blog kita,tetapi kita akan membahas bagaimana cara membuat shoutbox sendiri. caranya ikuti langkah-langkah yang ada pada artikel di bawah ini.

Nama database yang saya buat adalah fr_system
Buat table pada database anda dengan nama shoutbox

Nama Field Length/Value Keterangan
id Int(10) Not Null, Auto_increment
name Varchar(20)  
ip Varchar(15)  
message Text  
date Varchar(20)  

atau anda bisa juga membuat tabel dengan perintah SQL :

CREATE   TABLE   `shoutbox`   (
`id`   INT (   10   )   NOT   NULL   AUTO_INCREMENT   PRIMARY   KEY   ,
`name`   VARCHAR (   20   )   NOT   NULL   ,
`ip`   VARCHAR (   15   )   NOT   NULL   ,
`message`   TEXT   NOT   NULL   ,
`date`   VARCHAR (   20   )   NOT   NULL
)   ENGINE   =   MYISAM   ;

Atau dengan PHPMyadmin dengan cara membuka alamat http://localhost/phpmyadmin

## Jika sudah selesai buat file config.php untuk koneksi ke database

<?php
$db_host = "localhost";
$db_name = "fr_system";
$db_user = "root";
$db_pass = "";
$max_length = 150;
$dmessage = 20;
?>

## Dan buat file lagi dengan nama shoutbox.php

<script type="text/javascript">
<!--
function addsmiley(code) {
var pretext = document.forms['shoutbox_form'].shoutbox_message.value;
this.code = code;
document.forms['shoutbox_form'].shoutbox_message.value = pretext + code;
}
//-->
</script>

<style type="text/css">
/* Belows is the CSS file with some comments, edit it to your likings. */
/* This is to "trap" all shoutbox message into one content box */

div.shoutbox {
background: #F5F5F5;
padding: 5px;
width: 160px;
height: 120px;
border: 1px solid #000000;
overflow: auto;
color: #000000;
font: normal 10px verdana,tahoma,arial }
/* Smiley with no border and a cursor pointer */
img.smileys {
border: 0;
cursor: pointer; }
/* Just some styling... */
#shoutbox-message { width: 240px }
strong {
color: #000000;
font: bold 10px verdana,tahoma,arial }
/* Dont remove this style property or the messages wont display properly! */
ul {
margin: 0;
padding: 0;
list-style-type: none;
color: #000000;
font: normal 10px verdana,tahoma,arial; }
/* This is just to make the form looks nice */
.shoutinput {
padding: 0px;
border: 1px solid #000000;
background-color: #F5F5F5;
color: #000000;
font: normal 10px verdana,tahoma,arial; }
.shouttextarea {
padding: 0px;
border: 1px solid #000000;
background-color: #F5F5F5;
color: #000000;
font: normal 10px verdana,tahoma,arial; }
</style>
<?php
include("config.php");
if ($_POST['shoutbox_submit']) {
$name = $_POST['shoutbox_name'];
$ip = $_POST['shoutbox_ip'];
$message = $_POST['shoutbox_message'];
$mlen = strlen($message);
$date = date("F jS Y");
if ($name == "") {
echo "<strong>Peringatan: Silahkan Masukkan Nama Anda.</strong>";
}
else if ($message == "") {
echo "<strong>Peringatan: Tidak ada pesan yang anda kirim.</strong>";

} else if ($mlen > $max_length) {

echo "<strong>Peringatan: pesan terlalu panjang.</strong>";

} else {

$db = mysql_connect($db_host,$db_user,$db_pass);
mysql_select_db($db_name) or die("Cannot connect to database");
mysql_query("INSERT INTO shoutbox(name,ip,message,date) VALUES('$name','$ip','$message','$date')");
mysql_close($db);
}
}

$db = mysql_connect($db_host,$db_user,$db_pass);
mysql_select_db($db_name) or die("Cannot connect to database");
$query = "SELECT * FROM shoutbox ORDER BY id DESC LIMIT $dmessage";
$result = mysql_query($query);
echo "<div class=\"shoutbox\">\n";
echo "<ul>\n";
while($r=mysql_fetch_array($result)) {
//Strips unwanted HTML from nickname
$name = $r['name'];
$name = strip_tags($name);
//Strips unwanted HTML from message
$message = $r['message'];
$message = strip_tags($message);
// Transform text to smileys =)
$message = str_replace("=(","<img src=\"smileys/sad.gif\" alt=\"=(\"/>", $message);
$message = str_replace(":(","<img src=\"smileys/sad.gif\" alt=\":(\"/>", $message);
$message = str_replace(";(","<img src=\"smileys/cry.gif\" alt=\";(\"/>", $message);
$message = str_replace(":@","<img src=\"smileys/mad.gif\" alt=\":@\"/>", $message);
$message = ereg_replace(":)","<img src=\"smileys/smile.gif\" alt=\":)\"/>", $message);
$message = ereg_replace("=)","<img src=\"smileys/smile.gif\" alt=\"=)\"/>", $message);
$message = ereg_replace(":D","<img src=\"smileys/laugh.gif\" alt=\":D\"/>", $message);
$message = ereg_replace(":d","<img src=\"smileys/laugh.gif\" alt=\":d\"/>", $message);
$message = ereg_replace(":p","<img src=\"smileys/tongue.gif\" alt=\":p\"/>", $message);
$message = ereg_replace(":P","<img src=\"smileys/tongue.gif\" alt=\":P\"/>", $message);
$message = ereg_replace(":O","<img src=\"smileys/shocked.gif\" alt=\":O\"/>", $message);
$message = ereg_replace(":o","<img src=\"smileys/shocked.gif\" alt=\":o\"/>", $message);
$message = ereg_replace(";)","<img src=\"smileys/wink.gif\" alt=\";)\"/>", $message);
$message = ereg_replace(":S","<img src=\"smileys/sick.gif\" alt=\":S\"/>", $message);
$message = ereg_replace(":s","<img src=\"smileys/sick.gif\" alt=\":s\"/>", $message);
$message = ereg_replace(":roll:","<img src=\"smileys/roll.gif\" alt=\":roll:\"/>", $message);
echo "<li title=\"Shouted on $r[date]\" style=\"cursor: pointer\"><strong>$name</strong>: $message</li>\n";
}
echo "</ul>\n";
echo "</div>\n";
mysql_close($db);
?>

<div>
<form id="shoutbox_form" action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post">
<strong>Nama:</strong><br/>
<input name="shoutbox_name" type="text" class="shoutinput" size="30" maxlength="20">
<br/>
<strong>Isi Pesan Anda:</strong><br/>
<img class="smileys" src="smileys/smile.gif" alt=":)" onclick="addsmiley(':)')"/>
<img class="smileys" src="smileys/laugh.gif" alt=":D" onclick="addsmiley(':D')"/>
<img class="smileys" src="smileys/wink.gif" alt=";)" onclick="addsmiley(';)')"/>
<img class="smileys" src="smileys/sad.gif" alt=":(" onclick="addsmiley(':(')"/>
<img class="smileys" src="smileys/shocked.gif" alt=":O" onclick="addsmiley(':O')"/>
<img class="smileys" src="smileys/tongue.gif" alt=":P" onclick="addsmiley(':P')"/>
<img class="smileys" src="smileys/sick.gif" alt=":S" onclick="addsmiley(':S')"/>
<img class="smileys" src="smileys/roll.gif" alt=":roll:" onclick="addsmiley(':roll:')"/>
<img class="smileys" src="smileys/cry.gif" alt=";(" onclick="addsmiley(';(')"/>
<img class="smileys" src="smileys/mad.gif" alt=":@" onclick="addsmiley(':@')"/><br/>
<textarea name="shoutbox_message" cols="29" rows="3" class="shouttextarea" id="shoutbox_message"></textarea>
<br/>
<input name="shoutbox_submit" type="submit" class="shoutinput" value="kirim">
<input type="hidden" name="shoutbox_ip" value="<?php echo $_SERVER['REMOTE_ADDR']; ?>">
</form>
</div>


Lalu buat folder dengan nama smileys dan letakkan file-file emoticon di folder ini.
Simpan semua file lalu jalankan. Dan lihat hasilnya


Untuk download file-file pendukung,silahkan klik disini

Artikel Lainnya

Komentar Anda

MbWIB

15 Komentar

test

14-09-2013 | 03:28:38 test
sip

Njajalae

13-07-2013 | 10:33:01 [email protected]
Nice info gan tapi lumayan susah dipraktekin nih :D

wahyu

24-06-2013 | 08:21:49 [email protected]
sip

FR-SYSTEM.WEB.ID

16-11-2012 | 03:02:04 [email protected]
coba cek lg,itu masalah di koneksi jika munculnya  Access denied for user 'ODBC'@'localhost' (using password: NO) i

nofel

16-11-2012 | 09:45:09 [email protected]
waduh mas banyak warning nih, udah saya tambahin 1 field status VARCHAR(10) pada tabel shoutbox, trus saya jalankan shoutbox.phpnya, klo mas kan di shoutbox.php includenya pake koneksi.php, sudah saya ganti jg pake config.php Warning: mysql_query() [function.mysql-query]: Access denied for user 'ODBC'@'localhost' (using password: NO) in C:\xampp\htdocs\shoutbox\shoutbox.php on line 101 Warning: mysql_query() [function.mysql-query]: A link to the server could not be established in C:\xampp\htdocs\shoutbox\shoutbox.php on line 101 Warning: mysql_fetch_array() expects parameter 1 to be resource, boolean given in C:\xampp\htdocs\shoutbox\shoutbox.php on line 104 knp ya? tolong donk mas, kalo bisa lengkap kasih kodingannya beserta admin untuk accept, saya butuh bgt mas. arigato.

FR-SYSTEM.WEB.ID

14-11-2012 | 07:58:53 [email protected]

Bisa Saja, tp Saya hanya kirim file Shoutboxnya saja.

Download Disini  

nofel

14-11-2012 | 04:00:07 [email protected]
mas boleh minta source code testimonial yg mas pakai di web ini, jadi kalo kita post ga langsung ditampilin, melainkan harus sepertujuan dari admin/ diaccept admin dlu, baru muncul testimonialnya. tolong ya mas kirim ke email saya. terima kasih :)

FR-SYSTEM.WEB.ID

12-07-2012 | 09:55:23 [email protected]
maksudnya falidasi email di bukutamu yg seperti apa?
Apa misalkan ada yang mengisi bukutamu langsung otomatis ngirim komentarnya ke email sesuai dengan alamat email yg ditulis?

sy

11-07-2012 | 12:16:43 [email protected]
mw tanya,,, tau gag???? gmn caranya mem validasi e-mail di buku tamu..????

FR-SYSTEM.WEB.ID

30-04-2012 | 04:48:35 [email protected]
wah kalo blogspot ya ga bisa, tp kalo blog mengunakan Wordpress kemungkinan bisa

Iqbal

04-04-2012 | 11:55:25 [email protected]
kalau mau dimasukin di blogspot bisa ga?

FR-SYSTEM.WEB.ID

18-02-2012 | 03:03:19 [email protected]
Bisa, tidak harus ubah IP, langsung aja pake alamat http://Localhost

dede

14-02-2012 | 01:48:12 [email protected]
mas mau tanya kalo di local server settingan ip nya harus diganti ga??buat latihan

seomua

27-12-2011 | 03:54:46 [email protected]
trimakasih, salamkenal http://seomua.blogspot.com/2011/11/ban-terbaik-di-indonesia-gt-radial.html

dfd

25-08-2011 | 11:22:23 dfd
dfdfdfd

Produk Kami

Popular Post

Facebook Page

Statistik Pengunjung

  • Hari ini
    :
    364
  • Kemarin
    :
    1467
  • Bulan ini
    :
    13765
  • Tahun ini
    :
    45972
  • Total
    :
    2260073
  • Hits Count
    :
    3349546
  • Now Online
    :
    2 Users