BBCODE NEDİR? KENDİ BBCODE'UMUZU OLUŞTURALIM
BBCode hakkında Web'de birçok yazı mevcut, fakat ben bunlarda bir eksiklik hissettiğim için kendi bbcode'umuz nasıl oluşturacağımızı baştan sona anlatmaya çalıştım
Etiketler: oluşturulur bbcode nedir bb code kendi nasıl yapılır
İyi günler arkadaşlar;
Site hazırlarken pekçok sorunla karşılaşır ve bunlara çözümler bulmaya çalışırız. Bende yeni bir web programcısı olmam sebebiyle pekçok problem yaşıyorum. Ama bunlar arasında beni en fazla uğraştıran BBCode mantığı olmuştur.(ki hala hakim değilim)
Birçok sitede bu konu ile alakalı yazılar yazılmıştır. Fakat bu yazılanlarda sürekli bir eksiklik olduğunu hissediyordum. Ben burada baştan sona Javascript ve PHP kullanarak bu konuyu anlatmaya çalışacağım. Hatalarım yada kodları uzattığım olabilir, fakat bunu benim acemiliğime verin. Umarım iyi bir yazı olmuştur.
1.Kısım: Giriş
Google'a bbcode yazıp aratırsanız pek çok sonuç karşınıza çıkar ne olduğuna dair. Bunların da pek çoğunda aşağıdaki gibi kodlar vardır.

function bb ($text)
{
$text=nl2br(stripslashes("$text"));

$bb='/\[COLOR=(.*)\](.*)\[\/COLOR\]/';$html='<font color="#$1">$2</font>';
$text = preg_replace($bb, $html, $text);
$bb='/\[url=(.*)\](.*)\[\/URL\]/';
$html='<a href="$1">$2</a>';$text = preg_replace($bb, $html, $text);
$bb='/\[IMG\](.*)\[\/IMG\]/';
$html='<img src="$1" border="0">';
$text = preg_replace($bb, $html, $text);


return $text;

}


Yukarıdaki kod'a hiç bakmasanızda olur.
Bu gibi kodlar bana göre eksik kodlar. Çünkü yine oldukça karışık bir durum olan bbcode'ları girme işlemine değinmiyorlar.

Ben işe sıfırdan başlamayı uygun gördüm. Yani ilk önce birlikte bir form hazırlayacağız. Sonra bu forma butonlar ekleyeceğiz. Bu form onaylandığında ise bbcode dönüşümünü yapacağız.
Öncelikle aşağıdaki html dosyasını oluşturalım ve adını index.html yapalım.(NOT: Aşağıdaki kod index.html'nin sadece bir kısmınır. Dosyayı adım adım oluşturacağız. Tamamını yazının devamında bulabilirsiniz.)

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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-9" />
<title>Untitled Document</title>
</head>

<body>
<form action="donustur.php" method="post">
<input type="button" name="renk" id="renk" value="Renk" onclick="bbcode('[renk]','[/renk]','yazigirisformu')"/>
<input type="button" name="url" id="url" value="URL" onclick="urlekle()"/>
<input type="button" name="resim" id="resim" value="Resim Ekle" onclick="bbcode('[img]','[/img]','yazigir')" /><br />
<textarea name="yazimiz" id="yazigirisformu" cols="40" rows="20"></textarea><br />
<input type="submit" value="BBCode Dönüştürelim > Tıkla" />
</textarea>
</body>
</html>



Bu dosyaya henüz Javascript fonksiyonlarını eklemedik.
index.html dosyası şu şekilde bir görünüme sahip olmalı.


----------------------------------------------
2.KISIM: Html dosyamıza gerekli olan Javascript fonksiyonlarını ekleyelim
Yukarıdaki formu eğer incelediyseniz şunların farkına varmış olmalısınız.
1-)bbcode() adında bir fonksiyon olmalı. "Renk" ve "Resim" butonlarını tıkladığınız zaman bbcode() fonksiyonu çalışıyor
2-) "URL" bütonunda ise farklı bir fonksiyon var. urlekle(id)

Az sonra vereceğim bbcode fonksiyonunu ben yazmadım. Oldukça kullanışlı bir fonksiyon.
bbcode(aTag, eTag, Target) şeklinde 3 değişkene sahip. Target değişkeni id'sini belirttiğiniz form elementi oluyor. Biz burada yazigirisformu(yani textarea'mızın id kısmına verdiğimiz isim) yazmayı tercih ettik. aTag ve eTag ise butonlara tıklayınca forma eklenecek olan verileri gösteriyor.(Yani '[renk] ve [/renk]' gibi)
Fonksiyonları fazla uzatmadan yazalım:
1.Fonksiyon

function bbcode(aTag, eTag, Target)
{
var input = document.getElementById(Target);
input.focus();
if(typeof document.selection != 'undefined')
{
/* Einfügen des Formatierungscodes */
var range = document.selection.createRange();
var insText = range.text;
range.text = aTag + insText + eTag;
range = document.selection.createRange();
if (insText.length == 0)
{
range.move('character', -eTag.length);
}
else
{
range.moveStart('character', aTag.length + insText.length + eTag.length);
}
range.select();
}
else if(typeof input.selectionStart != 'undefined')
{
var start = input.selectionStart;


var end = input.selectionEnd;
var insText = input.value.substring(start, end);
input.value = input.value.substr(0, start) + aTag + insText + eTag + input.value.substr(end);
/* Anpassen der Cursorposition */
var pos;
if (insText.length == 0)
{
pos = start + aTag.length;
}
else
{
pos = start + aTag.length + insText.length + eTag.length;
}
input.selectionStart = pos;
input.selectionEnd = pos;
}
else
{
var pos;
var re = new RegExp('^[0-9]{0,3}$');
while(!re.test(pos))
{
pos = prompt("Einfügen an Position (0.." + input.value.length + "):", "0");
}
if(pos > input.value.length)
{
pos = input.value.length;
}
var insText = prompt("Bitte geben Sie den zu formatierenden Text ein:");
input.value = input.value.substr(0, pos) + aTag + insText + eTag + input.value.substr(pos);
}
}


2.Fonksiyon

function urlekle(id)
{
url=prompt("URL adresini Girin", "http://")
bbcode('[link='+ url +']', '[/link]' , 'yazigirisformu')
}


2.fonksiyonu kendim yazdım. Eksiklikleri olabilir çünkü düzenli ifadeler henüz tam anlamıyla hakim olamadığım bir konu. Bu fonksiyon URL butonunu tıkladığınız zaman işinize yarayacak. Az sonra neden farklı bir fonksiyona ihtiyaç duyduğumuzu belirteceğim.

Artık html dosyamız şu şekilde olmalı

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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-9" />
<title>Untitled Document</title>
<script>
function bbcode(aTag, eTag, Target)
{
var input = document.getElementById(Target);
input.focus();
if(typeof document.selection != 'undefined')
{
/* Einfügen des Formatierungscodes */
var range = document.selection.createRange();
var insText = range.text;
range.text = aTag + insText + eTag;
range = document.selection.createRange();
if (insText.length == 0)
{
range.move('character', -eTag.length);
}
else
{
range.moveStart('character', aTag.length + insText.length + eTag.length);
}
range.select();
}
else if(typeof input.selectionStart != 'undefined')
{
var start = input.selectionStart;
var end = input.selectionEnd;
var insText = input.value.substring(start, end);
input.value = input.value.substr(0, start) + aTag + insText + eTag + input.value.substr(end);
/* Anpassen der Cursorposition */
var pos;
if (insText.length == 0)
{
pos = start + aTag.length;
}
else
{
pos = start + aTag.length + insText.length + eTag.length;
}
input.selectionStart = pos;
input.selectionEnd = pos;
}
else
{
var pos;
var re = new RegExp('^[0-9]{0,3}$');
while(!re.test(pos))
{
pos = prompt("Einfügen an Position (0.." + input.value.length + "):", "0");
}
if(pos > input.value.length)
{
pos = input.value.length;
}
var insText = prompt("Bitte geben Sie den zu formatierenden Text ein:");
input.value = input.value.substr(0, pos) + aTag + insText + eTag + input.value.substr(pos);
}
}
function urlekle()
{
url=prompt("URL adresini Girin", "http://")
bbcode('[link='+ url +']', '[/link]' , 'yazigirisformu')
}
</script>
</head>

<body>
<form action="donustur.php" method="post">
<input type="button" name="renk" id="renk" value="Renk" onclick="bbcode('[renk]','[/renk]','yazigirisformu')"/>
<input type="button" name="url" id="url" value="URL" onclick="urlekle()"/>
<input type="button" name="resim" id="resim" value="Resim Ekle" onclick="bbcode('[img]','[/img]','yazigirisformu')"/><br />
<textarea name="yazimiz" id="yazigirisformu" cols="40" rows="20"></textarea><br />
<input type="submit" value="BBCode Dönüştürelim > Tıkla" />
</textarea>
</body>
</html>


3.Kısım: PHP Dosyasını Oluşturma
Şimdi ise bbcode olarak yazılmış veriyi bize düzenlenmiş şekilde gösterecek donustur.php dosyasını oluşturalım.

donustur.php
<?
$yazi=trim($_POST['yazimiz']);

function yaziyihazirla($yazisonhali)
{
$yazisonhali=trim(nl2br(strip_tags(addslashes($yazisonhali))));
// İlk önce [renk] ve[/renk]'in dönüşümünü yapıyoruz
$yazisonhali=str_replace('[renk]','<font color=red>',$yazisonhali);
$yazisonhali=str_replace('[/renk]','</font>',$yazisonhali);


//[link]xyz[/link] tagını ayarlıyoruz
//Aşağıdaki 4 ayrı replace kodu da gerekli. adresler http://www.xyz.com şeklinde yada direk www.xyz.com şeklinde girilmiş olabilir. Bu yüzden 4 ayrı kod yazdık

$yazisonhali = preg_replace("#\[link\]([\w]+?://([\w\#$%&~/.\-;:=,?@\]+]+|\[(?!url=))*?)\[/link\]#is","<a href=\"$1\" target=\"_blank\">$1</a>",$yazisonhali);

$yazisonhali = preg_replace("#\[link\]((www|ftp)\.([\w\#$%&~/.\-;:=,?@\]+]+|\[(?!url=))*?)\[/link\]#is","<a href=\"http://$1\" target=\"_blank\">$1</a>",$yazisonhali);

$yazisonhali = preg_replace("#\[link=([\w]+?://[\w\#$%&~/.\-;:=,?@\[\]+]*?)\]([^?\n\r\t].*?)\[/link\]#is","<a href=\"$1\" target=\"_blank\">$2</a>",$yazisonhali);

$yazisonhali = preg_replace("#\[link=((www|ftp)\.[\w\#$%&~/.\-;:=,?@\[\]+]*?)\]([^?\n\r\t].*?)\[/link\]#is","<a href=\"http://$1\" target=\"_blank\">$3</a>",$yazisonhali);


//[img]http://www...... şeklindekileri resime çevir
if(preg_match("/\[img\]((http|https|ftp):\/\/[a-z0-9;\/\?:@=\&\$\-_\.\+!*'\(\),~%# ]+?)\[\/img\]/is",$yazisonhali))
{
$search = array(
"/\[img\]((http|https|ftp):\/\/[a-z0-9;\/\?:@=\&\$\-_\.\+!*'\(\),~%# ]+?)\[\/img\]/is",


);
$replace = array(
"<img src=\"$1\" usemap=\"\" class=\"ipucuresim\" />",


);
$yazisonhali = preg_replace($search, $replace, $yazisonhali);
}
else
{
//[img]xxx[/img] şeklindekileri resime çevir
$search2 = array(
"/\[img\](.*?)\[\/img\]/is",


);
$replace2 = array(
"<img src=\"http://$1\" usemap=\"\" class=\"ipucuresim\" />",


);
$yazisonhali = preg_replace($search2, $replace2, $yazisonhali);
}
return $yazisonhali;
}
$yazi=yaziyihazirla($yazi);
echo $yazi;
?>

Evet bu php dosyasındaki yaziyihazirla() fonksiyonuna dikkatinizi çekmek istiyorum. Bütün işi bu fonksiyon yapacak. Fonksiyonu inceliyelim
$yazisonhali=trim(nl2br(strip_tags(addslashes($yazisonhali))));

Burada standart bir kontrol yaptık.


// İlk önce [renk] ve[/renk]'in dönüşümünü yapıyoruz
$yazisonhali=str_replace('[renk]','<font color=red>',$yazisonhali);
$yazisonhali=str_replace('[/renk]','</font>',$yazisonhali);

Yazımızdan gelen [renk] kısmını <font color=red>'e dönüştürüyoruz. [/renk]'i ise </font>'a dönüştürüyoruz.
Gelelim karışık bir kısıma:

//link'i http ile girdiyse ve girmediyse diye 4 farklı Replace yapıyoruz
$yazisonhali = preg_replace("#\[link\]([\w]+?://([\w\#$%&~/.\-;:=,?@\]+]+|\[(?!url=))*?)\[/link\]#is","<a href=\"$1\" target=\"_blank\">$1</a>",$yazisonhali);

$yazisonhali = preg_replace("#\[link\]((www|ftp)\.([\w\#$%&~/.\-;:=,?@\]+]+|\[(?!url=))*?)\[/link\]#is","<a href=\"http://$1\" target=\"_blank\">$1</a>",$yazisonhali);

$yazisonhali = preg_replace("#\[link=([\w]+?://[\w\#$%&~/.\-;:=,?@\[\]+]*?)\]([^?\n\r\t].*?)\[/link\]#is","<a href=\"$1\" target=\"_blank\">$2</a>",$yazisonhali);

$yazisonhali = preg_replace("#\[link=((www|ftp)\.[\w\#$%&~/.\-;:=,?@\[\]+]*?)\]([^?\n\r\t].*?)\[/link\]#is","<a href=\"http://$1\" target=\"_blank\">$3</a>",$yazisonhali);

Burada [link] tag'ı ile girilen verileri dönüştürüyoruz. Ama dikkat ettiyseniz 4 durum var.
Sizin için bir sorun olmayabilir fakat kullanıcıların veri girişi yapabildiği bir siteniz varsa bu gerekli bir denetim. Bu şekilde yapmazsanız http://localhost/www.pc-ipuclari.net/ gibi garip bir linkle karşılaşabilirsiniz.
Ayrıca [link] tagı biraz farklı çalışıyor. URL butonunu tıkladığınızda size önce URL'yi soran bir iletişim kutusu görünüyor. Ardından ise hangi yazıyı tıklamanız gerektiğini yazıyorsunuz. Yani burayı tıklarsanız google'a gidiyorsunuz ama siz "burayı" yazısını tıkladınız. Aynen buradaki gibi yani.
Yine karışık bir kısım:


//[img]http://www...... şeklindekileri resime çevir
if(preg_match("/\[img\]((http|https|ftp):\/\/[a-z0-9;\/\?:@=\&\$\-_\.\+!*'\(\),~%# ]+?)\[\/img\]/is",$yazisonhali))
{
$search = array(
"/\[img\]((http|https|ftp):\/\/[a-z0-9;\/\?:@=\&\$\-_\.\+!*'\(\),~%# ]+?)\[\/img\]/is",







);
$replace = array(
"<img src=\"$1\" usemap=\"\" class=\"ipucuresim\" />",


);
$yazisonhali = preg_replace($search, $replace, $yazisonhali);
}
else
{
//[img]xxx[/img] şeklindekileri resime çevir
$search2 = array(
"/\[img\](.*?)\[\/img\]/is",


);
$replace2 = array(
"<img src=\"http://$1\" usemap=\"\" class=\"ipucuresim\" />",


);
$yazisonhali = preg_replace($search2, $replace2, $yazisonhali);
}

Burada da resim bbcodelarını dönüştürüyoruz.Yine http://'li olarak girilmiş mi girilmemiş mi diye 2 durumu kontrol ediyoruz. Bu fonksiyonları da bazı hazır forumları kurcalayarak buldum. Bunlarda bir eksiklik yoktur sanırım.
4.KISIM: Test Yapalım
Artık dosyalarımız tamam olduğuna göre bir test yapmanın zamanı geldi. Bu dosyaları root dizinine atın ve adres çubuğuna http://localhost/index.html yazarak testinize başlayabilirsiniz.
Şimdi index.html dosyamızı açalım ve yazı kutusuna şöyle bir giriş yapalım.
--------------------------------------

[renk]burası renkli olacak[/renk]
[link=www.pc-ipuclari.net]google[/link]
[img]http://img411.imageshack.us/img411/7993/cizgilp8.gif[/img]
OLDU MU?

----------------------------
Eğer aşağıdaki şekilde bir sonuç aldıysanız "Tebrikler"

index.html ve donustur.php dosyalarını burayı tıklayarak indirebilirsiniz
5.Kısım: Veda
Bu kısımda birkaç şeye değineceğim. Öncelikle bbcode ile alakalı bir yazı yazmak istiyorsanız vereceğiniz örnekte kendi sitenizde kullandığınız bbocode'ları kullanmayın. Yoksa yazdıklarınızı tek tek değiştirmek zorunda kalırsınız:)
Bu yazıyı yazmak benim içinde faydalı oldu çünkü yazarken birkaç hatamı düzelttim
Burası eğer bbcode kullanarak birşeyler yapmak istiyorsanız çok önemli! Mutlaka verdiğim örnekteki gibi bir yaziyihazirla() fonksiyonu yazın! Her form için tek tek kullanmayın. Çünkü yazıları sadece ilk girdiğinizde değil, daha sonra değiştirmek isterseniz de bu fonksiyona ihtiyacınız olacak. Önceden zor geldiği için tek tek yazırlıyordum fakat daha sonra benim için işin içinden çıkılmaz bir duruma dönüşmüştü.
Yazar: yunus
Bu yazıyı bildir
23.10.08
Bu İpucu İşe Yarar(4)
Bu İpucu İşe Yaramaz(0)
Yorum Yap
Bu İpucu İle Alakalı Olabilecek Diğer İpuçları
Windowsunuz kendi kendine güncelleme yapmak isteyebilir. Bu durumu ortadan kaldırmak için...
yunus - 06:10:08
YORUM EKLEYİN
Adınız (Gerekli)
Eposta Adresiniz (Gerekli)
Web Siteniz (Opsiyonel - http:// eklemeyin)
Bu yazıya yapılan yorumlardan haberdar olmak istiyorum
www.pc-ipuclari.net Hakkında Üyelerimiz