MyBB Codes
Comprehensive Guide On Developing MyCodes - Printable Version

+- MyBB Codes (http://www.mybbcodes.com)
+-- Forum: Mods Database (/forumdisplay.php?fid=4)
+--- Forum: MyCodes for 1.4.x and 1.6.x (/forumdisplay.php?fid=6)
+--- Thread: Comprehensive Guide On Developing MyCodes (/showthread.php?tid=260)

Comprehensive Guide On Developing MyCodes - ghazal - 09-06-2009 11:01 PM

Hello MyBBCodes.com user Smile

We are here with a new and very important tutorial. Its about MyCodes developing.

What Are MyCodes:
----------------
MyCodes are an HTML codes that are really important in forum. There importance ranges from decorating to enhancing your forum.

What Should I Know Before:
-------------------
Before starting mycode to develop, you should be able to know as much basics of HTML, CSS etc. so that you will code your own mycodes without any hasle.

The good resources for learning HTML and CSS are these;
http://www.w3schools.com/html
http://www.w3schools.com/css

Our First MyCode:
----------------
We have a code that outputs the text as shown below;

----------
[attachment=232]
----------
The code is this;

Code:[Highlight]
<table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#FF0000" width="100%">
  <tr>
    <td width="100%" bgcolor="#FFDDFF" valign="top" bordercolor="#FF0000">
    <p align="center"><b><font size="2" color="#0000FF">My Name is ghazal</font></b></td>
  </tr>
</table>

We have here different things that can be alter and change to some different values and accordingly, the output will also be different. These things are;

1. Table Border
2. Table Width
3. Text
4. Text Align
5. Text Size
6. Text Color

In the picture above, we have change all these six things to make our MyCode a more enhanced and better look. You can however change only text aswell, only text + text size OR can change text + text size + text color etc. etc.

Lets Start Coding:
----------------
Go to Admin Control Panel > Configuration > MyCode (Select the button from left) > Add New MyCode.

------------
[attachment=233]
------------


There you see page something like this;

------------
[attachment=234]
------------

Lets first know about what are the meanings of headings written their;

#-> Title: Its your MyCode Name
#-> Short Description: As name identifies, its your MyCode Description in brief
#-> Regular Expression: In different words, It is an HTML embed code. All your codes (HTML OR Video code) will be embed in between these tags. Its syntax is like this;
Code:[Highlight]
\[TAG\](.*?)\[/TAG\]
When you write your functional MyCode (functional means that you have installed correctly), the tags will be write in this syntax;
Code:[Highlight]
[TAG]YOUR TEXT[/TAG]
It searches HTML code (Replacement Code) and where ever (.*?) is called, it replaces and embed the code. Moreover, read the lines given in picture;

------------
[attachment=235]
------------
Code:[Highlight]
You must make sure the regular expression is valid and safe—no validation is performed.

It is really important; because it replaces HTML code, and giving the right to users to use HTML in their posts is nothing more then a RISK. Therefore, you should use it with extreme focusing it in your mind, and use the (.*?) in a correct way. If it is used with perfect code
(.*?) then no fear Smile It will not provide any hacker to gain access.

#-> Replacement: It replaces the tags of Regular Expression with the HTML code.
#-> Enabled: Offcourse , after adding all the inputs in their relevant boxes, You should enabled it to work properly.
#-> Parse Order: Give value what ever you want: 1, or 2, or 3, etc. etc. BUT remember,
MyCodes will be parsed in ascending order relative to other MyCodes.
#-> Test Value: Enter Regular Expression tags to test the MyCode that you have just created.
#-> HTML Result: When you hit the Test MyCode Button, after entering the MyCode's Tags, the HTML result will be shown in this box.
#-> Actual Result: This area shows the actual result when the HTML is rendered.

Most Important Things:
------------------
As we have noticed that there are two most important things when creating MyCode; these are Regular Expression and Replacement. So now we will take a deep look in only these two things.

Replacement:
--------------
We are discussing Replacement first. As we have noticed in this Guide that Replacement is an HTML code that needs to be change when Regular Expression's (.*?) is called. In the example given above we have this HTML Code.

Code:[Highlight]
<table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#FF0000" width="100%">
  <tr>
    <td width="100%" bgcolor="#FFDDFF" valign="top" bordercolor="#FF0000">
    <p align="center"><b><font size="2" color="#0000FF">My Name is ghazal</font></b></td>
  </tr>
</table>

What we have to change, its upto you, lets assume that we wants to change these 6 things;

1. Table Border
2. Table Width
3. Text
4. Text Align
5. Text Size
6. Text Color

Lets locate them first in the above mentioned Replacement (HTML) code. To locate and change it to in such a way so as to ensure that regular Expression will parse it correctly.

To change it, we have to add (.*?) in all the areas where we want to change the values. For example, if we want to change above mentioned six things, we have to insert (.*?) in all their places. The HTML Code after editing will be something like this;

Code:[Highlight]
<table border="$1" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#FF0000" width="$2%">
  <tr>
    <td width="100%" bgcolor="#FFDDFF" valign="top" bordercolor="#FF0000">
    <p align="$3"><b><font size="$4" color="$5">$6</font></b></td>
  </tr>
</table>

YUP.. we insert $1, $2, $3, $4, $5, $6 Huh ... To understand this, you must have to know that;

(.*?) = $some_value

OR you can say;

(.*?) = $1

$some_value is a variable that stores the values of (.*?) in Replacement Code.

In the code above, where we have to change the values, we add this variable in ascending oreder.

Regular Expression:
---------------
As we have learned that we use

Code:[Highlight]
\[TAG\](.*?)\[/TAG\]

for Replacing the tags, BUT you should must know that what we have written.

(.*?) = $1

Taking this into consideration, we have to use our Regular Expression Tags (.*?) as much as we have used $variables in our Replacement Code. That's , when we have to ask , in above mentioned Replacement Code, to add Regular Expression's (.*?) in TAGS, we will add this in the following format;

\[TAG=(.*?),(.*?),(.*?),(.*?),(.*?)\](.*?)\[/TAG\]

You noticed that we use 5 (.*?) inside the TAGS and one (.*?) in between the TAGS. Also we add commas in between the (.*?)

-------------
[attachment=236]
-------------

How To Write Our Code:
------------------
[TAG=border,width,align,size,color]YOUR TEXT[/TAG]

You can change the word TAG whatever you want BUT be sure to edit this in Regular Expression First.

The output of our newly made MyCode will be something like this;

----------
[attachment=237]
----------

You can use / make your own MyCode as long as you follow these simple steps. Smile

-----------
[attachment=238]
-----------

---
Enjoy...!

RE: Comprehensive Guide On Developing MyCodes - DamYam - 09-07-2009 07:17 AM

wow, I really understand now

Thnkyou

RE: Comprehensive Guide On Developing MyCodes - AndrewPH - 09-07-2009 07:51 AM

thanks ghazal! useful for those beginner mycode developer.. Smile

RE: Comprehensive Guide On Developing MyCodes - learner - 12-15-2009 01:27 PM

Now i get it what mycode means and how to use them.
thanks for such a good tutorial.

RE: Comprehensive Guide On Developing MyCodes - naqshbandios_limra - 01-05-2010 01:37 PM

Great tutorial, step by step and clean. Thankx

RE: Comprehensive Guide On Developing MyCodes - smithshn - 07-12-2010 11:15 AM

I am really appreciated of your work. Such a nice description about the require code. And I have also visited one of your mention URL as w3school. It is nice website. It has nicely explain each and every concept in easy language.