Iso Web Id Tutorial Komputer
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 
.
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>
<?phpfunction 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
DEMO | DOWNLOAD
Catatan :
Saya menggunakan jquery sebagai Framework javascript.
