Membuat ShoutBox Sendiri

      Tak ada komentar pada Membuat ShoutBox Sendiri

sb2

Admin atau Webmaster tentu perlu balikan atau komentar dari para pengguna website-nya, fitur ini biasa dikenal sebagai shoutbox atau kotak suara. Banyak plugin yang tinggal copy-paste, misal dari http://www.shoutbox.com/, tetapi tentu kita tidak menguasai database sepenuhnya, konsekuensinya kalau ada user yang menulis tidak baik, maka admin akan kerepotan untuk menghapusnya, karena itu sebaiknya shoutbox itu dibuat dan disimpan sendiri di hosting dan databse sendiri, supaya lebih aman.

Di bawah ini akan dijelaskan bagaimana membuat ShoutBox itu.  Shoutbox ini dibuat dengan menggunakan PHP, jQuery Ajax, dan sedikit sentuhan CSS.

Semua file dalam aplikasi sudah tersimpan shoutbox.zip di https://app.box.com/s/4sdcpi1ug9r6qk5ee484eos5mlex0cu6. Silahkan unduh dan perhatikan penjelasan per bagiannya seperti di bawah ini.

  1. Setelah mendownload file shoutbox.zip maka upload-lah ke hosting anda sendiri, lalu ekstraklah dengan nama folder tertentu, misal shoutbox, sehingga nanti aksesnya tinggal seperti ini http://kasmui.com/shoutbox/.
  2. Bukalah mySql dan buatlah sebuah database dengan nama tertentu, misal "dbshout". Didalam database tersebut, buatlah sebuah table baru dengan nama "shoutbox" melalui perintah berikut :

     

     

    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`)
    );

  3. Setelah database selesai dibuat, langkah selanjutnya adalah membuat file-file PHP, Javascript, CSS dan HTML, sehingga hirarkinya sebagai berikutsb
  4. Copy-paste script dibawah ini dengan menggunakan editor, simpan dengan nama shoutbox.php 

     

     

     

     

     

    <?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, '', $row[‘message’]);
                    }               
                    $result .= "<li><strong>".$row[‘user’].”: “.$row[‘message’]."</li>";
                     
                }
                echo $result;           
                break;
            case "insert":
                echo insertMessage($_POST[‘nick’], $_POST[‘message’]);
                break;
                             
        }
        mysql_close($link);
    }
             
    ?>

  5. 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

     

     

     

     

     

    <!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>

  6. Buatlah sebuah folder dengan nama "js", lalu copy script dibawah ini dan simpan dengan nama shoutbox.js dan letakkan didalam folder "js"

     

     

     

     

     

    $(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();
        });
         
    });

  7. Langkah  berikutnya adalah membuat file style atau CSS yang akan mengatur tampilan dari shoutbox yang dibuat. Copy script dibawah ini dan simpan dengan nama style.css

     

     

     

     

    @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 */
    }

  8. Terakhir adalah memodifikasi style yang ada di file css agar sesuai dengan ruang dan warna yang diinginkan.

 

Sumber: http://blog.santoss.web.id/2015/07/membuat-shoutbox-menggunakan-php-ajax-jquery.html

 

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *