Berikut adalah tampilan shoutbox yang akan kita buat, shoutbox ini dibuat dengan menggunakan PHP, jQuery Ajax, dan sedikit sentuhan CSS. Langkah-langkah dan tutorialnya akan dijelaskan dibawah.
Sebelum memulai, buatlah sebuah folder dengan nama "Shoutbox" didalam folder "htdocs" XAMPP. Folder ini nantinya yang akan memudahkan kita untuk memanage dan sebagai folder induk untuk file-file yang akan dibuat. Pada tutorial ini, admin menggunakan XAMPP sebagai web server dan mySql sebagai database. Jika XAMPP belum terinstall dikomputer anda, silahkan install terlebih dahulu.
Untuk file-file image, smileys, dan kelengkapannya dapat didownload full sourcecode-nya di http://www.mediafire.com/download/jj5rwje4jtxicsm/shoutbox.zip
- Bukalah mySql dan buatlah sebuah database dengan nama "dbshout". Didalam database tersebut, buatlah sebuah table baru dengan nama "shoutbox" melalui perintah berikut :
- Setelah database selesai dibuat, langkah selanjutnya adalah membuat file-file PHP, Javascript, CSS dan HTML. Dalam membuat file-file ini, disini admin menggunakan Notepad++ sebagai editor yang dapat anda download gratis di https://notepad-plus-plus.org/download/
- Copy-paste script dibawah ini dengan menggunakan editor Notepad++, simpan dengan nama shoutbox.php
- Setelah selesai membuat script php diatas, buat lagi sebuah file HTML yang akan digunakan sebagai file index shoutbox. Copy script dibawah ini dan simpan dengan nama index.html
- Buatlah sebuah folder dengan nama "js", lalu copy script dibawah ini dan simpan dengan nama shoutbox.js dan letakkan didalam folder "js"
- Langkah terakhir adalah membuat file style atau CSS yang akan mengatur tampilan dari shoutbox yang dibuat. Copy script dibawah ini dan simpan dengan nama style.css
CREATE TABLE `shoutbox`(
`id` int(5) NOT NULL auto_increment,
`date` timestamp NOT NULL default CURRENT_TIMESTAMP,
`user` varchar(15) NOT NULL default 'anonimous',
`message` varchar(255) NOT NULL default '',
PRIMARY KEY (`id`)
);
<?php
/************************
KONFIGURASI DATABASE
/************************/
/****************************************************/
define("HOST", "localhost"); /***** HOSTNAME *****/
define("USER", "root"); /***** USERNAME *****/
define("PASSWORD", ""); /***** PASSWORD *****/
define("DATABASE", "shoutbox"); /***** DATABASE *****/
/****************************************************/
/************************
EMOTICONS
/************************/
$smileys = array(
':merana:' => 'merana.gif',
':like:' => 'like.gif',
':putnam:' => 'putnam.gif',
':sad:' => 'nangis.gif',
':love:' => 'cinta.gif',
':/:' => 'merana.gif',
':like' => 'like.gif',
':putnam' => 'putnam.gif',
':sad' => 'nangis.gif',
':love' => 'cinta.gif',
':;):' => 'alay.gif',
':O:):' => 'ded.gif',
':0):' => 'ded.gif',
':^_^:' => 'hihihi.gif',
':3:D:' => 'hoho.gif',
':O.o:' => 'kecewa.gif',
':8:):' => 'keren.gif',
':8:D:' => 'kull.gif',
':D:' => 'nyengir.gif',
':-*:' => 'kiss.gif',
':3:' => 'kucing.gif',
':p:' => 'meled.gif',
':(:' => 'mencu.gif',
':):' => 'senyum.gif',
':oo:' => 'oo.gif',
':`(:' => 'nangis.gif',
':v:' => 'pac.gif',
':>o:' => 'sengit.gif',
':>_:' => 'sumpek.gif',
':-_-:' => 'tidur.gif',
':|]:' => 'robot.gif'
);
/************************
FUNCTIONS
/************************/
function connect($db, $user, $password){
$link = @mysql_connect($db, $user, $password);
if (!$link)
die("<p><b>Koneksi Gagal!</b></p><i>error:</i> <span style='color:red'>".mysql_error().'</span>');
else{
$db = mysql_select_db(DATABASE);
if(!$db)
die("<p><b>Nama DATABASE salah!</b></p><i>error:</i> <span style='color:red'> ".mysql_error().'</span>');
else return $link;
}
}
function getContent($link, $num){
$res = @mysql_query("SELECT date, user, message FROM shoutbox ORDER BY date DESC LIMIT ".$num, $link);
if(!$res)
die("Error: ".mysql_error());
else
return $res;
}
function insertMessage($user, $message){
$query = sprintf("INSERT INTO shoutbox(user, message) VALUES('%s', '%s');", mysql_real_escape_string(strip_tags($user)), mysql_real_escape_string(strip_tags($message)));
$res = @mysql_query($query);
if(!$res)
die("Error: ".mysql_error());
else
return $res;
}
/******************************
REQUESTS
/******************************/
if(!$_POST['action']){
header ("Location: index.html");
}
else{
$link = connect(HOST, USER, PASSWORD);
$result = "";
switch($_POST['action']){
case "update":
$res = getContent($link, 60); //Ubah angka 60 menjadi lebih besar atau lebih kecil untuk menampilkan isi shoutbox lebih banyak atau sedikit.
while($row = mysql_fetch_array($res)){
foreach($smileys as $smiley=>$image) {
$row['message'] = str_replace($smiley, '<img src="smileys/'.$image.'">', $row['message']);
}
$result .= "<li><strong>".$row['user']."</strong>: ".$row['message']."</li>";
}
echo $result;
break;
case "insert":
echo insertMessage($_POST['nick'], $_POST['message']);
break;
}
mysql_close($link);
}
?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">
<head>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/shoutbox.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<title>Shoutbox</title>
<script language="javascript">
var gOI = function(id){
return document.getElementById(id);
};
var emoticonsclick = function(tag){
var d = gOI("message");
var b = d.selectionStart, a = d.selectionEnd;
d.value = d.value.substring(0, b) + " " + tag + " " + d.value.substring(a, d.value.length);
};
</script>
</head>
<body>
<div id="shoutbox" class="container_shoutbox">
<div class="content_shoutbox">
<div id="smiley_image_shoutbox">
<div id="smiley_image_content">
<img title="close" id="smiley_image_close" src="images/close.gif" alt="close"/>
<a title=":)" class="emoticon" href="javascript:emoticonsclick(':):')" style="cursor:pointer;margin:1px;border:none"><img src="smileys/senyum.gif" style="border:none;background:none;"/></a>
<a title=":D" class="emoticon" href="javascript:emoticonsclick(':D:')" style="cursor:pointer;margin:1px;border:none"><img src="smileys/nyengir.gif" style="border:none;background:none;"/></a>
<a title=":p" class="emoticon" href="javascript:emoticonsclick(':p:')" style="cursor:pointer;margin:1px;border:none"><img src="smileys/meled.gif" style="border:none;background:none;"/></a>
<a title=":(" class="emoticon" href="javascript:emoticonsclick(':(:')" style="cursor:pointer;margin:1px;border:none"><img src="smileys/mencu.gif" style="border:none;background:none;"/></a>
<a title=":/" class="emoticon" href="javascript:emoticonsclick(':/:')" style="cursor:pointer;margin:1px;border:none"><img src="smileys/merana.gif" style="border:none;background:none;"/></a>
<a title=":`(" class="emoticon" href="javascript:emoticonsclick(':`(:')" style="cursor:pointer;margin:1px;border:none"><img src="smileys/nangis.gif" style="border:none;background:none;"/></a>
<a title="0:)" class="emoticon" href="javascript:emoticonsclick(':0):')" style="cursor:pointer;margin:1px;border:none"><img src="smileys/ded.gif" style="border:none;background:none;"/></a>
<a title="^_^" class="emoticon" href="javascript:emoticonsclick(':^_^:')" style="cursor:pointer;margin:1px;border:none"><img src="smileys/hihihi.gif" style="border:none;background:none;"/></a>
<a title="3:D" class="emoticon" href="javascript:emoticonsclick(':3:D:')" style="cursor:pointer;margin:1px;border:none"><img src="smileys/hoho.gif" style="border:none;background:none;"/></a>
<a title="O.o" class="emoticon" href="javascript:emoticonsclick(':O.o:')" style="cursor:pointer;margin:1px;border:none"><img src="smileys/kecewa.gif" style="border:none;background:none;"/></a>
<a title="8:)" class="emoticon" href="javascript:emoticonsclick(':8:):')" style="cursor:pointer;margin:1px;border:none"><img src="smileys/keren.gif" style="border:none;background:none;"/></a>
<a title=":-*" class="emoticon" href="javascript:emoticonsclick(':-*:')" style="cursor:pointer;margin:1px;border:none"><img src="smileys/kiss.gif" style="border:none;background:none;"/></a>
<a title=":3" class="emoticon" href="javascript:emoticonsclick(':3:')" style="cursor:pointer;margin:1px;border:none"><img src="smileys/kucing.gif" style="border:none;background:none;"/></a>
<a title="8:D" class="emoticon" href="javascript:emoticonsclick(':8:D:')" style="cursor:pointer;margin:1px;border:none"><img src="smileys/kull.gif" style="border:none;background:none;"/></a>
<a title=":like:" class="emoticon" href="javascript:emoticonsclick(':like:')" style="cursor:pointer;margin:1px;border:none"><img src="smileys/like.gif" style="border:none;background:none;"/></a>
<a title=":oo" class="emoticon" href="javascript:emoticonsclick(':oo:')" style="cursor:pointer;margin:1px;border:none"><img src="smileys/oo.gif" style="border:none;background:none;"/></a>
<a title=":v" class="emoticon" href="javascript:emoticonsclick(':v:')" style="cursor:pointer;margin:1px;border:none"><img src="smileys/pac.gif" style="border:none;background:none;"/></a>
<a title=":putnam:" class="emoticon" href="javascript:emoticonsclick(':putnam:')" style="cursor:pointer;margin:1px;border:none"><img src="smileys/putnam.gif" style="border:none;background:none;"/></a>
<a title=":|]" class="emoticon" href="javascript:emoticonsclick(':|]:')" style="cursor:pointer;margin:1px;border:none"><img src="smileys/robot.gif" style="border:none;background:none;"/></a>
<a title=":>o" class="emoticon" href="javascript:emoticonsclick(':>o:')" style="cursor:pointer;margin:1px;border:none"><img src="smileys/sengit.gif" style="border:none;background:none;"/></a>
<a title=":><:" class="emoticon" href="javascript:emoticonsclick(':>_:')" style="cursor:pointer;margin:1px;border:none"><img src="smileys/sumpek.gif" style="border:none;background:none;"/></a>
<a title=":-_-:" class="emoticon" href="javascript:emoticonsclick(':-_-:')" style="cursor:pointer;margin:1px;border:none"><img src="smileys/tidur.gif" style="border:none;background:none;"/></a></td>
</div>
</div>
<div id="loading_shoutbox"><img src="images/loading.gif" alt="Loading..."></div>
<ul></ul>
</div>
<div id="form">
<form method="post" id="form_input_shoutbox">
<table>
<tr>
<td><label>Nama</label></td>
<td><input class="text user" id="nick" type="text" MAXLENGTH="15" /></td>
</tr>
<tr>
<td><label>Pesan</label></td>
<td><input class="text" id="message" type="text" MAXLENGTH="255"/></td>
</tr>
<tr>
<td></td>
<td><input style="cursor:pointer;" id="send" type="submit" value="Kirim" /></td>
</tr>
</table>
</form>
</div>
</div>
</body>
</html>$(document).ready(function(){
var inputUser = $("#nick");
var inputMessage = $("#message");
var loading = $("#loading_shoutbox");
var messageList = $(".content_shoutbox>ul");
function updateShoutbox(){
loading.fadeIn();
$.ajax({
type: "POST", url: "shoutbox.php", data: "action=update",
complete: function(data){
loading.fadeOut();
messageList.html(data.responseText);
//messageList.fadeIn();
}
});
}
function checkForm(){
if(inputUser.attr("value") && inputMessage.attr("value"))
return true;
else
return false;
}
updateShoutbox();
$("#form_input_shoutbox").submit(function(){
if(checkForm()){
var nick = inputUser.attr("value");
var message = inputMessage.attr("value");
$("#send").attr({ disabled:true, value:"Mengirim..." });
$("#send").blur();
$.ajax({
type: "POST", url: "shoutbox.php", data: "action=insert&nick=" + nick + "&message=" + message,
complete: function(data){
updateShoutbox();
messageList.html();
$("#send").attr({ disabled:false, value:"Kirim" });
$("#message").val('');
}
});
}
else alert("Tolong diisi semuanya!");
return false;
});
$("#message").focus(function(){
$("#smiley_image_shoutbox").slideDown();
});
$("#smiley_image_close").click(function(){
$("#smiley_image_shoutbox").slideUp();
});
});@CHARSET "UTF-8";
/******* GENERAL RESET *******/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em,
font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody,
tfoot, thead, tr, th, td {
border:0pt none;
font-family:inherit;
font-size: 100%;
font-style:inherit;
font-weight:inherit;
margin:0pt;
padding:0pt;
vertical-align:baseline;
}
body{
line-height:12px;
font-size: 11px;
font-family: Arial;
margin:0pt;
overflow: auto;
}
html,body{
height:100%;
text-align: center;
background:transparent;
}
.clear{
clear: both;
height: 0;
display: block;
}
a:link, a img{
text-decoration: none;
outline:none;
}
img{
border:none;
}
li img{
margin-bottom:-2px;
}
strong{
font-weight: 700;
color:#005ab6;
}
#form_input_shoutbox{
width:auto;
text-align: left;
border-top:1px solid #999;
background:#f0f0f0;
position:relative;
margin:0;
padding:2px;
font-size: 11px;
}
#form_input_shoutbox label{
font-weight: 600;
}
#form_input_shoutbox input{
border: 1px solid #999;
background-color: #fff;
color: #5f95ef;
font-size: 11px;
font-weight: 700;
}
#form_input_shoutbox input.text{
font-weight: normal;
color: #555;
padding: 2px;
margin-bottom: 5px;
text-align: left;
margin:1px;
width:235px;
}
.container_shoutbox{
margin:0;
width: 290px;
/*overflow:hidden;*/
border:1px solid #999;
position:relative;
}
.container_shoutbox ul, .container_shoutbox ul li{
list-style: none !important;
list-style-position: outside;
}
.content_shoutbox{
background: #fff;
text-align: left;
/*padding-left:10px;*/
font-size: 12px;
min-height:320px;
height:350px;
width:auto;
overflow:auto;
overflow-x:hidden;
color:#232323;
position:relative;
}
.content_shoutbox ul{
/**/
background-color:#f6f6f6;
}
.content_shoutbox li{
margin:0;
border-bottom:1px inset #fff;
padding:3px 3px 3px 5px;
}
.date_shoutbox{
font-weight: normal;
font-size: 9px;
color: #aeaeae;
}
#loading_shoutbox{
position:absolute;
left:140px;
bottom:45px;
}
#smiley_image_shoutbox{
display:none;
position:absolute;
bottom:0 !important;
height:40px;
width:100%;
text-align:left;
padding:5px;
}
#smiley_image_content{
position:fixed;
width:280px;
background-color:#fff;
border:1px solid #999;
padding:5px;
left:0;
}
#smiley_image_close{
position:absolute;
right:0;
top:0;
cursor:pointer;
opacity:0.5;
filter:alpha(opacity=50); /* For IE8 and earlier */
}
#smiley_image_close:hover{
opacity:1;
filter:alpha(opacity=100); /* For IE8 and earlier */
}Note: Untuk file-file image, smileys, dan kelengkapannya dapat didownload full sourcecode-nya di [http://www.mediafire.com/download/jj5rwje4jtxicsm/shoutbox.zip] [Size:48.84 KB]