php : التعابير العادية

الببكود : أمثلة تطبيقية

آخر تحيين: 12-05-2014

ملخص التعابير العادية طريقة إنشاء الببكود


لخّصت في الجدول أسفله ، مجموعة من الببكودات التي سنراها في هذا الدّرس . وضعت أمام كل وسم ببكود ، وسم html الذي سيُعوّضه . سأعرضها أولا ، ثم سنقوم بإنشاء أنماطها . و سنختم ببكود الإبتسامات " "

الببكودالإستبدال
[b].[/b]<strong>$1</strong>
[i].[/i]<em>$1</em>
[u].[/u]<u>$1</u>
[size=.].[/size]<span style="font-size:$1px">$2</span>
[h.].[/h.]<h$1>$2</h$1>
[color=.].[/color]<span style="color:$1">$2</span>
[img].[/img]<img src="$1" alt="">
[url].[/url]<a href="$1">$1</a>
<img src="happy.png" alt="">

قسّمت الببكودات إلى أربع مجموعات ، حسب تقارب طرق إنشاء أنماطها

المجموعة الأولى: b, i, u

بالنسبة لنمط ببكود[b] [/b] . رأيناه سابقا ، نفس النمط سنستعمله لمجموعة من الببكودات الأخرى ، ك "i" و "u" و "sup" و "sub" و "s" ...إلخ. إليكم بعض الأمثلة :
أثناء الإستبدال ، حتى لا نقوم بتكرار preg_replace لكل نمط . سنستعمل متغيّرات الجداول

<?php 
$ijad = array (
      '#\[b\](.*?)\[/b\]#s',
      '#\[i\](.*?)\[/i\]#s',
      '#\[u\](.*?)\[/u\]#s',
      );
$tabdil = array (
       '<strong>$1</strong>',
       '<em>$1</em>',
       '<u>$1</u>',
       );
?>

إذا أردتم إضافة الببكودات الأخرى ، مثل "sup, sub, mark, ..." ، ما عليكم إلا أتباع نفس الطريقة .

المجموعة الثانية : h1, size, color

ننتقل للتعرف على المجموعة الثانية ، سنرى على سبيل المثال :" ببكود العناوين [h.] [/h.] ، و ببكود الألوان [color] [/color] و أيضا ببكود حجم الخط [size] [/size] " .
أضع أمامكم الأنماط ، ثم سنتحدث عن بعض الحالات :

<?php 
$ijad = array (
      '#\[size=([0-9]{1,2})\](.*?)\[/size\]#s',
      '#\[color=(.*?)\](.*?)\[/color\]#s',
      '#\[h([1-6])\](.*?)\[/h([1-6])\]#s',
      );
$tabdil = array (
      '<span style="font-size:$1px">$2</span>',
      '<span style="color:$1">$2</span>',
      '<h$1>$2</h$1>',
     );
?>

بالنسبة لنمط ببكود حجم الخط "size" . أتحت فقط الأرقام من "0" إلى "99" : size=([0-9]{1,2}) .
أمّا بالنسبة لنمط الألوان ، يتيح لكم عدة خيارات منها : إمّا استعمال أسماء الألوان "red, green, blue, ..." ، مثال : [color=red]...[/color] أو إستعمال الطرق الأخرى مثال : [color=#FF0000]...[/color] .
يمكنكم ، تحديد النمط بدقة أكثر .إليكم النمط التالي :
#\[color=(\#[0-9a-f]{3}|\#[0-9a-f]{6}|[a-z-]+)\](.*?)\[/color\]#is
هذا النمط يتيح لنا إضافة الألوان إما بثلاثة حروف و أرقام مثل "FFF#" أو ستة مثل "FF09CE#" أو أسماء الألوان ، مثل "purple, green, red, blue , aqua, ...

بالنسبة لببكود العناوين : "h1, h2, h3, h4, h5, h6" . بدل إنشاء ستة أنماط ، جمعتها في نمط واحد . لهذا استعملت المصفوفة "[6-1]" لأتيح الأرقام من 1 إلى 6 فقط .
إليكم بعض الأمثلة لاستعمال هذه الببكودات أثناء تحرير النص :

[size=18]نص بحجم 18 بيكسيل[/size]
[color=green]نص بلون أخضر[/color]
[color=#0F0]نص بلون أخضر[/color]
[color=#00FF00]نص بلون أخضر[/color]
[h1]عنوان مهم[/h1]
[h2]عنوان أقل أهمية[/h2]
...   

المجموعة الثالثة : url و img

سنرى في هذه المجموعة ، مثالي ببكود عناوين الويب (الروابط و الوصلات) . و ببكود إضافة الصور .
سأختصر شيفرة النمطين ، يمكنكم لاحقا ، إنشاء أنماط خاصة بكم و تلبي حاجتكم .

<?php 
$ijad = array (
      '#\[url\]((?:ftp|https?)://.*?)\[/url\]#',
      '#\[img\](https?://.*?\.(?:jpe?g|gif|png|bmp))\[/img\]#'
      );
$tabdil = array (
      '<a href="$1">$1</a>',
      '<img src="$1" alt="" >'
     );
?>

الملاحظة الأولى ، أنني أزلت المُحوّل "s" من النمطين ، لأننا لن نحتاج إلى الرجوع للسطر أثناء كتابة الروابط .
الملاحظة الثانية : بالنسبة لببكود "url" ، أثناء استبداله بوسم html ، سيعطينا شيفرة شبيهة بهذه
<a href="http://www.yoursite.com">http://www.yoursite.com</a>
إذا أردتم كتابة نص بين وسم "<a>" بدل عنوان الويب :
<a href="http://www.yoursite.com"> أنقر هنا </a>
يمكنكم تغيير نمط url كالتالي :

'#\[url=((?:ftp|https?)://.*?)\](.*?)\[/url\]#s'

تلاحظون عودة المُحوّل "s" لأننا ربما نحتاجه للنص "2$" . لاتنسوا تغيير وسم الإستبدال ، إذ سيصبح في هذه الحالة كالتالي : <a href="$1">$2</a>

ببكود الإبتسامات

لا أظن أن أحدا منكم يجهل أو لم يستعمل من قبل الإبتسامات ، و خاصة على مواقع التواصل و الدردشة . هذه بعض الأمثلة :

للإستفادة من الإبتسامات هذا ما سنفعله : سنُعطي لكل ابتسامة رمزا خاصا ، عبارة عن نص عادي ، ثم أثناء العرض ، نقوم باستبدال كل رمز بصورة الإبتسامة الخاصة به . مثال :


<?php 
  $text = 'this text :) contains :) three :) smileys';

  $ijad = ':)';
  $tabdil = '<img src="smileys/happy.png" alt="مسرور" >';

  $text = str_replace($ijad,$tabdil,$text);
  echo $text;
?>

النتيجة : this text contains three smileys

للحصول على هذه النتيجة ، يجب أن تكون بحوزتكم صورة الإبتسامة . في مثالنا ، صورة "happy.png" توجد في ملف "smileys" .
لإجراء التجارب ، أحصلوا على بعض الإبتسامات ، مثلا الثلاثة أعلى ، أو قوموا بالبحث في google ، أو أنشئوها بأنفسكم لاحقا على برنام التصميم ، مثل الفوتوشوب .
تلاحظون ، أثناء الإستبدال ، استعملت دالة أخرى str_replace . لمن لم يسبق لهم التعامل مع هذه الدّالة ، أطمئنكم ، فهي تقوم بنفس وظيفة preg_replace كان بالإمكان ، استعمال هذه الأخيرة . إلا أنها مُخصصة للتعابير العادية . في حالنا لن نحتاج إلى التعابير العادية . كما ذكرت ، سنستعمل مكونات نص عادية لصياغة رموز الإبتسامات . لهذا str_replace ، هي المثلى ، لأن وظيفتها هي استبدال النصوص العادية .
هذا مثال عملي ، غيروا أسماء الصور ، و الملفات حسب حاجتكم ، ثم قوموا بإتمامه و إضافة جميع الإبتسامات التي تودونها :

<?php 
$ijad = array (
        ':)',
        '8)',
        ':(',
        );
$tabdil = array (
        '<img src="smileys/happy.png" alt="happy" >',
        '<img src="smileys/cool.png" alt="cool" >',
        '<img src="smileys/angry.png" alt="angry" >',
        );

$text = str_replace($ijad, $tabdil, $text);
?>

لكم الخيار في استعمال الرموز التي تفضلّونها . مثلا يمكنني كتابة رمز ابتسامة السرور كالتالي : ":happy:" أو هكذا ":مسرور:" ، أو ":]" ... إلخ .

خلاصة

كما وعدتكم في بداية هذا الجزء ، سأهديكم دالة ، تلخص كل ما رأيناه في هذا الدّرس . يمكنكم تنقيحها و إثراءها حسب حاجاتكم .
هذه الدالة تقوم بتحويل الببكودات ، إلى لغة html . قد أضفت إليها ، أيضا بعض الإبتسامات ، لا تنسوا تغيير أسماء هذه الأخيرة ، و مكان تواجدها .

ملاحظة هامة بالنسبة للمبتدئين :
استعملوا هذه الدّالة أثناء عرض البيانات عن طريق "echo" . أقول هذا ، لأن مما لا شك فيه ، أنتم تستخدمون قاعدة البيانات لتخزين المعطيات ، و أفترض أيضا ، أنكم تتعاملون معها عن طريق PD0 . لهذا لا تستعملوا هذه الدالة أثناء تخزين "INSERT INTO" أو تحيين "UPDATE" البيانات في القاعدة ، بل أثناء أخذها من القاعدة "SELECT" بغية عرضها .
<?php 
/**
 ** bbcode parser 11-05-2014
 ** http://www.dorossinet.com/developpement-web/tutorial/php-mysql/الببكود-أمثلة-تطبيقة
 ** Author : Boubker Hasni
**/
function bbcodes2html($text) 
{
    $text = trim($text);
    $text = nl2br(htmlspecialchars($text));
	
    $in = array (
         '#\[b\](.*?)\[/b\]#s',
         '#\[i\](.*?)\[/i\]#s',
         '#\[u\](.*?)\[/u\]#s',
         '#\[size=([0-9]{1,2})\](.*?)\[/size\]#s',
         '#\[color=(\#[0-9a-f]{3}|\#[0-9a-f]{6}|[a-z-]+)\](.*?)\[/color\]#is',
         '#\[h([1-6])\](.*?)\[/h([1-6])\]#s',
         '#\[url\]((?:ftp|https?)://.*?)\[/url\]#',
         '#\[img\](https?://.*?\.(?:jpe?g|gif|png|bmp))\[/img\]#'
        );
    $out = array (
         '<strong>$1</strong>',
         '<em>$1</em>',
         '<u>$1</u>',
         '<span style="font-size:$1px">$2</span>',
         '<span style="color:$1">$2</span>',
         '<h$1>$2</h$1>',
         '<a href="$1">$1</a>',
         '<img src="$1" alt="" >'
        );
    $text = preg_replace ($in, $out, $text);

  // الإبتسامات
    $in = array (
          ':)',
          '8)',
          ':('
          );
    $out = array (
          '<img src="smileys/happy.png" alt="happy" >',
          '<img src="smileys/cool.png" alt="cool" >',
          '<img src="smileys/angry.png" alt="angry" >'
          );
    $text = str_replace($in, $out, $text);

    return $text;
}
?>

تقوم الدّالة بحماية النص و تنظيفه من الفراغات في أوله و نهايته ، ثم تبديل الببكودات بوسوم html . ثم تُرجع لنا النص النهائي "return $text".
لاستعمالها أثناء العرض :

<?php echo bbcodes2html($blog['content']);?>

بما أن مثل هذه الدّوال ، ستحتاجونها على أغلب صفحات موقعكم . أنصحكم بعزلها في صفحة php خاصة بها .
للذين لا زالوا يشتغلون على موضوع "إنشاء المدونة" . و أنصحكم بذلك ، لأن الطريقة الصحيحة للتعلم السريع ، هو العمل على مشروع . إذا كان لديكم مشروعكم الخاص ، فهذا أفضل بكثير .
أدعوكم لإنشاء صفحة جديدة داخل ملف "includes" .
قوموا بتسمية الصفحة "bbcode-parser.php" على سبيل المثال . ثم ضعوا فيها محتوى الدالة السابقة .
لاستعمالها . قوموا بإقحامها في الصفحات التي تريدونها :

<?php 
include 'includes/bbcode-parser.php';

// أخذ البيانات من القاعدة ثم استعمال الدالة لعرضها

echo bbcodes2html($blog['content'] );
بالنسبة لموضوع "إنشاء المدونة" . استعملنا سابقا الدالتين nl2br و htmlspecialchars على حقول محتوى المواضيع :
<?php $content = nl2br(htmlspecialchars($blog['content']));?>

لن نحتاج إلى هذا السطر ، قوموا بحذفه . لأن الدالتين السابقتي الذكر ، موجودتين في دالتنا bbcodes2html.
نفس الشيء ينطبق على محتوى التعاليق . و جميع الحقول التي تستدعي الدالة bbcodes2html

لنأخذ النص التالي كمثال ، لتجربة دالتنا :

[h1][color=#00FF00]العنوان[/color][/h1]
هذا النص يحتوي على :
[b]خط غليظ[/b] و[i]خط مائل[/i] كذلك [u]خط تحته سطر[/u] 
و رابط : [url]http://www.mybbcodesite.com/blog.php?id=5[/url]
 و خط [size=29]بحجم  [color=red]ملون[/color] كبير[/size] :)

لتخبروا زواركم بالببكودات المتاحة على موقعكم ، لديكم طريقتان :
إمّا عرض لائحة الببكودات أسفل حقل المحتوى في الإستمارة .
أو استعمال javascript ، لعرض أيقونات الببكودات أعلى أو جنب حقل المحتوى . عندما يتم النقر على الأيقونة ، يُكتب الببكود المعني تلقائيا داخل الحقل .

الدّرس القادم ، سيكون عبارة عن ملخص لجل تعابير PCRE . بعضها رأيناه ، أما الباقي سنتعرّف عليه .