Apa sih bbcode itu? pasti dalam hati kalian bertanya seperti itu! adalah sebuat kumpulan/Tag/Format penulisan kode yang fungsinya untuk menggantikan format html pada browser. Lalu kenapa tidak ditulis langsung saja format HTMLnya! tentu kalian tidak mau donk website yang sudah kalian buat diberi beberapa kode2 ilegal (format html) iya kalau tujuannya hanya memberi animasi pada tulisan - tulisan yang orang lain tulis bagaimana jika orang tersebut jahil menginputkan karakter <!--, bisa ditebakkan apa yang terjadi Smile.

kita akan coba membuat yang versi sederhana tapi kalian tetep bisa implementasikan pada website - websie yang kalian buat.

1. Buat 1 file php yang akan manjadi menampilkan Text sekaligus pemroses data yang akan dikirim (anggap index.php).

isi dari file htmlnya

 

<html>

    <head>

        <title>ISOWEB | BBCODE Sederhana</title>

        <meta name="author" content="qu4cks0ft">

        <meta name="robots" content="all">

        <link rel="stylesheet" href="style.css" type="text/css" />     // file css 

    </head>

    <body>

        <div id="container">

            <div class="header">

                <h2>BBCODE Sederhana</h2>

            </div>

            <form action="" method="post" name="frm_button" class="form" id="frm_button">

                <div class="form_row">

                    <label class="name">

                        Keterangan :

                    </label>

                    <table width="50%">

                        <tr>

                            <td width="10"><input type="button" id="bbcode" value="b" /></td>

                            <td width="20"><input type="button" id="bbcode" value="u" /></td>

                            <td width="20"><input type="button" id="bbcode" value="i" /></td>

                            <td width="20"><input type="button" id="bbcode" value="quote" /></td>

                            <td width="20"><input type="button" id="bbcode" value="url" /></td>

                            <td><input type="button" id="bbcode" value="img" /></td>

                        </tr>

                    </table>

                    <textarea name="keterangan" id="keterangan" cols="40" rows="5" class="main_textarea"></textarea>

                </div>

                <div class="form_row">

                    <label class="name"></label>

                    <input type="submit" name="submit" id="submit" class="submit" value="Submit" />

                    <input type="reset" name="cancel" id="cencel" class="button" value="Cancel" />

                </div>

            </form>            

            <br /><br />

            Contoh : 

            <ol type="1"> // tag yang sudah ditentukan

                <li>[b]bold[/b]</li>

                <li>[u]underline[/u]</li>

                <li>[i]italic[/i]</li>

                <li>[quote]quote[/quote]</li>

                <li>[img]isi url image[/img]</li>

                <li>[url]isi url link[/url]</li>

                <li>[url=isi url link]nama link[/url]</li>

            </ol>             

        </div>

    </body>

</html>

2. Buat 1 fungsi yang akan mereplace tag - tag yang sudah kita tentukan sebelumnya (taruh sebelum <form>)
<?php
function bbcode($var) {
$bbcode = array(  //Format bbcode dengan regex
'/\[b\](.*?)\[\/b\]/is',
'/\[i\](.*?)\[\/i\]/is',
'/\[u\](.*?)\[\/u\]/is',
'/\[center\](.*?)\[\/center\]/is',
'/\[img\](.*?)\[\/img\]/is',
'/\[url\](.*?)\[\/url\]/is',
'/\[url\=(.*?)\](.*?)\[\/url\]/is',
'/\[quote\](.*?)\[\/quote\]/is',
);
$replace = array( // replace kode bbcode regex diatas
'<strong>$1</strong>',
'<em>$1</em>',
'<u>$1</u>',
'<center>$1</center>',
'<img src="$1" alt="images" />',
'<a href="$1">$1</a>',
'<a href="$1">$2</a>',
'<blockquote>$1</blockquote>'
);
$var = preg_replace ($bbcode, $replace, $var); //mengganti bagian dari string($bbcode) sesuai dengan Ekspresi yg kedua ($replace).
return $var;
}
?>

3. Kemudian buat pemroses ketika disubmit

<?php

 

 if($_POST['submit']){ // proses setelah tombol submit ditekan

echo "<center>".str_replace( // fungsi untuk mereplace  karakter \n

 "\n"

,"<br />" // diganti dengan br 

,bbcode(strip_tags($_POST['keterangan'])) // fungsi yang sudah kita buat diatas

)."</center>";

}

 

?>

4. Buat sedikit javascript untuk menampilkan kode setelah klik button

 

function replace_bbcode(str){ // fungsi untuk menampilkan kode

var isVar

if(str == "b"){

isVar = "[b][/b]";

}else if(str == "u"){

isVar = "[u][/u]";

}else if(str == "i"){

isVar = "[i][/i]";

}else if(str == "quote"){

isVar = "[quote][/quote]";

}else if(str == "url"){

isVar = "[url][/url]";

}else{

isVar = "[img][/img]";

}

return isVar;

}

 

$(document).ready(function(){

$('#bbcode').live('click',function(){ // ketika Tombol di klik

var bbcode, komen, hasil;

bbcode = replace_bbcode($(this).attr('value')); // variabel yg menampung value bbcode yg di klik, replce dengan fungsi diatas

komen = $("#keterangan").val(); // variabel yg menampung isi dari textarea

hasil = komen +" "+ bbcode; // gabungkan value yg ada ditetarea dengan  hasil klik

$("#keterangan").val(hasil); // masukkan hasilnya ditextarea

});

});    

 

 

Kode lengkapnya seperti dibawah

 

<html>

    <head>

        <title>ISOWEB | BBCODE Sederhana</title>

        <meta name="author" content="qu4cks0ft">

        <meta name="robots" content="all">

        <link rel="stylesheet" href="style.css" type="text/css" />

        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

        <script type="text/javascript">

            function replace_bbcode(str){

                var isVar

 

                if(str == "b"){

                    isVar = "[b][/b]";

                }else if(str == "u"){

                    isVar = "[u][/u]";

                }else if(str == "i"){

                    isVar = "[i][/i]";

                }else if(str == "quote"){

                    isVar = "[quote][/quote]";

                }else if(str == "url"){

                    isVar = "[url][/url]";

                }else{

                    isVar = "[img][/img]";

                }                

                return isVar;

            }

 

            $(document).ready(function(){

                $('#bbcode').live('click',function(){ 

                    var bbcode, komen, hasil;                    

                    bbcode = replace_bbcode($(this).attr('value')); 

                    komen = $("#keterangan").val(); 

                    hasil = komen +" "+ bbcode;                     

                    $("#keterangan").val(hasil);

                });

            });            

        </script>

    </head>

    <body>

        <div id="container">

            <div class="header">

                <h2>BBCODE Sederhana</h2>

            </div>

            <?php

                function bbcode($var) {

                    $bbcode = array(  // kode bbcode

                            '/\[b\](.*?)\[\/b\]/is',

                            '/\[i\](.*?)\[\/i\]/is',

                            '/\[u\](.*?)\[\/u\]/is',

                            '/\[center\](.*?)\[\/center\]/is',

                            '/\[img\](.*?)\[\/img\]/is',

                            '/\[url\](.*?)\[\/url\]/is',

                            '/\[url\=(.*?)\](.*?)\[\/url\]/is',

                            '/\[quote\](.*?)\[\/quote\]/is',

                    );

 

                    $replace = array( /

                            '<strong>$1</strong>',

                            '<em>$1</em>',

                            '<u>$1</u>',

                            '<center>$1</center>',

                            '<img src="$1" alt="images" />',

                            '<a href="$1">$1</a>',

                            '<a href="$1">$2</a>',

                            '<blockquote>$1</blockquote>'

                    );

                    $var = preg_replace ($bbcode, $replace, $var);

                    return $var;

                }

 

                if($_POST['submit']){

                    echo "<center>".str_replace(

                             "\n"

                            ,"<br />"

                            ,bbcode(strip_tags($_POST['keterangan']))

                        )."</center>";

 

                }

            ?>

            <form action="" method="post" name="frm_button" class="form" id="frm_button">

                <div class="form_row">

                    <label class="name">

                        Keterangan :

                    </label>

                    <table width="50%">

                        <tr>

                            <td width="10"><input type="button" id="bbcode" value="b" /></td>

                            <td width="20"><input type="button" id="bbcode" value="u" /></td>

                            <td width="20"><input type="button" id="bbcode" value="i" /></td>

                            <td width="20"><input type="button" id="bbcode" value="quote" /></td>

                            <td width="20"><input type="button" id="bbcode" value="url" /></td>

                            <td><input type="button" id="bbcode" value="img" /></td>

                        </tr>

                    </table>

                    <textarea name="keterangan" id="keterangan" cols="40" rows="5" class="main_textarea"></textarea>

                </div>

                <div class="form_row">

                    <label class="name"></label>

                    <input type="submit" name="submit" id="submit" class="submit" value="Submit" />

                    <input type="reset" name="cancel" id="cencel" class="button" value="Cancel" />

                </div>

            </form>            

            <br /><br />

            Contoh : 

            <ol type="1">

                <li>[b]bold[/b]</li>

                <li>[u]underline[/u]</li>

                <li>[i]italic[/i]</li>

                <li>[quote]quote[/quote]</li>

                <li>[img]isi url image[/img]</li>

                <li>[url]isi url link[/url]</li>

                <li>[url=isi url link]nama link[/url]</li>

            </ol>             

        </div>

    </body>

</html>

 

Cukup mudah bukan membuatnya 

 

DEMODOWNLOAD

 

Catatan : 

Saya menggunakan jquery sebagai Framework javascript.