ShoutICC :: Izul Cyber Cafe Shoutbox

Author : Izul Cyber Cafe 6 September 2008 764 views 16 Comments

Masih menggunakan jasa Oggix atau Shoutmix untuk shoutbox di blog anda ?

Mulai sekarang bagaimana kalau beralih ke Shoutbox buatan sendiri, karena memakai karya sendiri itu lebih menyenangkan dibandingkan dengan memakai punya orang lain.
Munurut Gue…!!

Di artikel ini saya akan memberikan cara sederhana untuk membuat shoutbox sendiri, Shoutbox ini bernama “ShoutICC” atau “Izul Cyber Cafe Shoutbox”, biar resmi sedikit…!!! . Sekalian, siapa tau suatu saat bisa ngalahin Oggix atau Shoutmix, jadi tidak pusing lagi mencari nama untuk shoutbox nya..!! heheh..

Sekalian memenuhi permintaan teman-teman yang meminta cara dan script dari shoutbox seperti yang ada di kanan bawah blog ini.

Disini terdapat 5 file yang digunakan. Anda bisa copy code dibawah ini atau mendownload langsung di link yang ada di bagian bawah artikel kali ini.

Code Program.

config.php

<?php
$host = "localhost";
$user = "root";
$password = "";
$dbname = "guestbook";
mysql_connect($host,$user,$password)or die("Koneksi Gagal");
mysql_select_db($dbname)or Ddie("Gagal mengambil database");
?>

index.php

<!-- Copyright by Izul Cyber Cafe :: Cafe para pecinta komputer .::[ http://izul.co.cc -->
<html>
<head>
<title>Izul Cyber Cafe :: Guestbook</title>
<link rel="stylesheet" href="style.css" type="text/css">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="keywords" content="Membuat Shoutbox sendiri dengan PHP & SQL, Izul Cyber Cafe, Cafe para pecinta komputer, Tips and Tricks computer, Internet, Shoutbox, PHP, SQL, Animation, Animasi, Izul,izul.co.cc, izulcybercafe, izul.site88.net, Jasakom">
	<meta name="description" content="Shoutbox ini dibuat oleh Izul Cyber Cafe :: http://izul.co.cc, Silahkan menggunakan shoutbox ini sesuka anda, anda bisa memodifikasi tampilan, ataupun seluruh isi shoutbox ini karena shoutbox ini bebas untuk dimodifikasi">
 
 
<style type="text/css">
<!--
body {
	background-color: #CCCCCC;
}
-->
</style></head>
 
<body>
<table width="320" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#605B9D">
  <tr>
    <td width="300" bgcolor="#FFFFFF"><a href="http://izul.co.cc" target="_blank"><img src="images/header.jpg" border="0"></a></td>
  </tr>
 
  <tr>
    <td><form id="form1" name="form1" method="post" action="save.php">
      <table width="100%" border="0" align="center" cellpadding="1" cellspacing="0" bgcolor="#7470C4">
        <tr>
          <td width="101" align="right" valign="middle"><span class="style1">Name</span></td>
          <td width="295" align="right" valign="top"><label>: 
            <input name="txt_name" type="text" id="txt_name" size="20" maxlength="30" class="textinput" />
          </label></td>
        </tr>
        <tr>
          <td align="right" valign="middle"><span class="style1">URL / Email</span></td>
          <td align="right" valign="top"> :
            <label>
              <input name="txt_url" type="text" id="txt_url" value="http://" size="20" class="textinput"  />
            </label></td>
        </tr>
        <tr>
          <td colspan="2" align="right" valign="top"><label>
            <textarea name="txt_comment" cols="36" id="txt_comment" class="textlarge" ></textarea>
          </label></td>
        </tr>
        <tr>
          <td colspan="2" align="center" valign="top"><label>
            <input name="submit" type="submit" id="submit" value="OK" class="btninput" />
          </label></td>
        </tr>
      </table>
    </form>
      <iframe src=guest.php width="100%,*" height="300" frameborder="0"></iframe></td>
  </tr>
  <tr>
    <td height="25" align="center" bgcolor="#3B3A66">Copyright &copy; 2008 by <a href="http://izul.co.cc" target="_blank">Izul Cyber Cafe</a> </td>
  </tr>
</table>
</body>
</html>
<!-- Copyright by Izul Cyber Cafe :: Cafe para pecinta komputer .::[ http://izul.co.cc -->

save.php

<?php
include'config.php';
if(isset($_POST['submit']) && ($_POST['submit']==='OK'))
{     
    /*--- filter input dg kombinasi fungsi trim dan strip_tags ---*/
    	$date = date("Y-n-d");
		$name = trim(strip_tags($_POST[txt_name]));
		$url = trim(strip_tags($_POST[txt_url]));
		$comment = trim(strip_tags($_POST[txt_comment]));
		$ip =  $HTTP_SERVER_VARS[REMOTE_ADDR];
 
 if(($name=='') || ($url=='') || ($comment==''))
 $error= "Data not complate.<br>";
 if(($name!='') && ($url!='') && ($comment!=''))   
 {  $queryAddGb=mysql_query("INSERT INTO data (date,name,url,comment,ip) VALUES ('$date','$name','$url','$comment','$ip')");
    if($queryAddGb)      
    {  header('location:index.php');
       exit; }      
       else
       {  echo"<br><br><br><br> <b>Please check your name or comment</b><br>";
	   	  echo"<center><a href=Javascript:history.back()><< Back</a></center>";
          echo"<meta http-equiv=\"refresh\" content=\"8; url=./index.php\"> <br><br><br><br>";
          exit; 
	   }
     }
 
     if(isset($error))
     {  echo"<br><br><br><br><b>Please check your name or comment</b><br><br>";
	    echo"<b>$error</b><br>";
		echo"<pcenter><a href=Javascript:history.back()><< Back</a></center> <br><br><br><br>";
        echo"<meta http-equiv=\"refresh\" content=\"8; url=./index.php\">";
        exit; } 
}
?>

guest.php

<!-- Copyright 2008 by Izul Cyber Cafe :: Cafe para pecinta komputer .::[ http://izul.co.cc -->
<link rel="stylesheet" href="style.css" type="text/css" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="keywords" content="Membuat Shoutbox sendiri dengan PHP & SQL, Izul Cyber Cafe, Cafe para pecinta komputer, Tip dan Trik Komputer, Ilmu Internet, Shoutbox, PHP, SQL, Animation, Animasi, Izul,izul.co.cc, izulcybercafe, izul.site88.net, Jasakom">
	<meta name="description" content="Shoutbox ini dibuat oleh Izul Cyber Cafe :: http://izul.co.cc, Silahkan menggunakan shoutbox ini sesuka anda, anda bisa memodifikasi tampilan shoutbox ini, tapi diharapkan tidak menghapus copyright yang ada dibagian bawah shoutbox :)">
 
<body bgcolor="#5B5698">
<table cellpadding=2 align=center width=100% bgcolor=#716DC4>
<?php
include "config.php";
 
$batas=10; //banyak nya entry dalam satu halaman
$halaman=$_GET['halaman'];
if(empty($halaman))
{
	$posisi=0;
	$halaman=1;
}
else
{
	$posisi = ($halaman-1) * $batas;
}
//Mengambil Database
$tampil="select * from data ORDER BY no DESC limit $posisi,$batas";
$hasil=mysql_query($tampil);
 
$no=$posisi+1;
//Menampilkan isi database
while ($r=mysql_fetch_array($hasil)){
  echo "<tr bgcolor=#5B5698><td width=10% align=center><img src=images/guest.png></td><td width=60%><a target=_blank href=$r[url]>$r[name]</a></td><td align=right>$r[date]</td>
		  <tr><td colspan=3>$r[comment]</td></tr>
		  <tr><td colspan=3><hr></td></tr>";
	$no++;
}
echo "</table><br>";
echo "<center>";
echo "<div id=pagin>";
 
//Script untuk paging
$file="guest.php";
 
$tampil2="select * from data";
$hasil2=mysql_query($tampil2);
$jmldata=mysql_num_rows($hasil2);
 
$jmlhalaman=ceil($jmldata/$batas);
 
 
//link ke halaman sebelumnya (previous)
if($halaman > 1)
{
	$previous=$halaman-1;
	echo "<A HREF=$file?halaman=1>&laquo;First</A> |
        <A HREF=$file?halaman=$previous>&#8249;Prev</A> |";
}
else
{ 
	echo "&laquo;First | &#8249;Prev |";
}
 
$angka=($halaman > 3 ? " ... " : " ");
for($i=$halaman-2;$i<$halaman;$i++)
{
  if ($i < 1) 
      continue;
  $angka .= "<a href=$file?halaman=$i>$i</A> ";
}
 
$angka .= " <b>$halaman</b> ";
for($i=$halaman+1;$i<($halaman+3);$i++)
{
  if ($i > $jmlhalaman) 
      break;
  $angka .= "<a href=$file?halaman=$i>$i</A> ";
}
 
$angka .= ($halaman+2<$jmlhalaman ? " ...  
          <a href=$file?halaman=$jmlhalaman>$jmlhalaman</A> " : " ");
 
echo "$angka";
 
//link kehalaman berikutnya (Next)
if($halaman < $jmlhalaman)
{
	$next=$halaman+1;
	echo "<A HREF=$file?halaman=$next>Next&#8250;</A> |
  <A HREF=$file?halaman=$jmlhalaman>Last&raquo;</A>";
}
else
{ 
	echo "Next&#8250; | Last&raquo;";
}
echo "</div>";
echo "<br><p>Total comments : <b>$jmldata</b></p>";
echo "</center>";
?>
<!-- Copyright 2008 by Izul Cyber Cafe :: Cafe para pecinta komputer .::[ http://izul.co.cc -->

style.css

/* CSS Document */
.style1 {color: #FFFFFF}
body,td,th {
	background-color:#999999
	margin-left: 0px;
	margin-right: 0px;
	margin-top: 0px;
	margin-bottom: 0px;
	color: #FFFFFF;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:10px;
}
a:link,active {
	color: #FFFFFF;
	font-weight: bold;
}
a:visited,hover{
	color: #CCCCCC;
	font-weight: bold;
}
.textinput{
	margin-bottom:0.5em;
	width:75%;
	color:#666;
	background-color:#FFFFCC;
}
.btninput{
	color:#FFFFFF;
	background-color:#716DC4;
	font-size:12px;
	font-weight:bold;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	border:1px solid #FFF;
	padding:7px 15px 7px 15px;
}
hr{
	border:dotted;
	border-width:1px;
	border-bottom-color:#FFFFFF;
}

sql.sql

CREATE TABLE `data` (
`no` INT( 4 ) NOT NULL AUTO_INCREMENT PRIMARY KEY ,
`date` DATE NOT NULL ,
`name` VARCHAR( 25 ) NOT NULL ,
`email_web` VARCHAR( 40 ) NOT NULL ,
`comment` VARCHAR( 300 ) NOT NULL ,
`ip` VARCHAR( 12 ) NOT NULL
) ENGINE = MYISAM ;

Download code selengkapnya disini

16 Comments »

excel said:

Mas, ini bisa gak di gunakan di blogspot?

# 7 September 2008 at 2:57 pm

imam mulya said:

thank’s om izul tutorial nya…..

# 7 September 2008 at 8:42 pm

iam said:

terima kasih info nya, mas..

# 7 September 2008 at 10:56 pm

aNGga Labyrinth™ said:

Wak niat banget nie mas izul,

ngak sekalian di buatin halaman admin nya mas?

# 8 September 2008 at 12:55 am

Izul Cyber Cafe (author) said:

#excel : bisa, tapi harus upload dulu di hosting yang support PHP kayak 000webhost atau freezoka.com.

# imam mulya : Oke…Permintaan ente terkabulkan.

# iam : yoi..sama2 atas kunjungannya..

# aNGga Labyrinth : ya niy…demi kepuasan pelanggan..!!heehee..Halaman admin, ya di phpmyadmin nya aja lah halaman adminnya…Toh cuma nama email comment doankk..
Tapi ada niat jg sih.. Nanti kali yach..

# 8 September 2008 at 5:09 am

masmoemet said:

langsung donlot mas … wah … sungguh cafe yg mencerdaskan … i like it …

# 9 September 2008 at 8:46 am

monyetgaul said:

thanks zul

eh creditnya tak hapus yoo
huehehehe
ntar deh kalo ada waktu tak donlot..

# 20 September 2008 at 4:28 am

deny said:

wuih…niat pol mas…

# 30 November 2008 at 4:10 am

Pelajar said:

wah bagus tu…. patut di coba, nanti tak coba dech… makasih ya kang Izul

# 9 December 2008 at 10:23 pm

erwan said:

tutorial yang menarik
tapi ko dah ga bs di download sekarang yah

salam kenal

(membalas kunjungan hehehe … :d)

# 10 December 2008 at 3:36 am

Izul Cyber Cafe (author) said:

Bisa kok, coba aja lagi…!!

# 10 December 2008 at 4:58 am

YNa said:

wah perlu dicoba nih. thanks syeringnya ya..
btw, kapan2 boleh ya blog ini saya review spt posting ini:
Dari Blogger untuk Blogger (1)

# 10 December 2008 at 5:20 am

tYas said:

adouh,, puyeng aku,,,,

# 11 December 2008 at 10:23 pm

barly newbie said:

asalamualaikum….

bang ijul..link downloadnya ga ada bang.. yang ada cuma izcommerce. mungkin udah kehapus bang..

eh iya satu lagi bang.. ada sedikit bug kecil di program bang ijul..
yang di sql.sql :
harusnya field email_web harus diganti namanya dengan url

atau bisa juga di file save.php..
di baris no 15 field ‘url’.. diganti dengan email_web

terimakasih bang sharing yang bermanfaat banget..

# 29 May 2009 at 7:15 pm

Izul Cyber Cafe (author) said:

#Barly : Iya maaf waktu itu folder download nya saya rubah, tapi di posting belum di ubah.

–> Bug : emang ada perubahan di field itu, kalau tidak salah update nya sudah saya berikan infonya di postingan yg lain (lupa yg mana).

Coba Download lagi aja disini :
http://izulcybercafe.com/download/shouticc.zip

sudah sama seperi yg saya pake sekarang, halaman adminya bisa di rubah sendiri.

–> Shouticc nya saya hapus, soalnya itu saya buat untuk website lain. Maaf ya..

# 30 May 2009 at 12:45 am

Cloud said:

wah wah… seep seep.. sekalian belajar belajar.. php php..

# 28 November 2009 at 11:11 pm