Current time: 12-03-2022, 08:26 AM Hello There, Guest! (LoginRegister)


Announcement
We have the biggest collection of MyBB Plugins here on the Net. We have currently 175+ MyBB Exclusive Plugins, 80+ MyBB Compatible MyCodes and 16+ MyBB 1.4.x Themes (Some are still under construction...) Thus, we provide you the largest MyBB Stuff on the net including tutorials. Stay with us, you will find out some more to come.
Now you can easily create your own buttons set for MyBB! Click here to have a look...
*** You cannot do your registration behind any Proxies anymore! ***
Welcome Guest[44.201.99.222], connected from San Diego, California United States
Post Reply 
 
Thread Rating:
  • 1 Votes - 5 Average
  • 1
  • 2
  • 3
  • 4
  • 5
Comprehensive Guide On Developing MyCodes
09-06-2009, 11:01 PM
Post: #1
Heart Comprehensive Guide On Developing MyCodes
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;

----------
   
----------
The code is this;

<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.

------------
   
------------


There you see page something like this;

------------
   
------------

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;
\[TAG\](.*?)\[/TAG\]
When you write your functional MyCode (functional means that you have installed correctly), the tags will be write in this syntax;
[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;

------------
   
------------
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.

<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;

<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

\[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 (.*?)

-------------
   
-------------

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;

----------
   
----------

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

-----------
   
-----------

---
Enjoy...!

ghazal's signature *** Deleted by the administration ***
Visit this user's website Find all posts by this user
Quote this message in a reply
09-07-2009, 07:17 AM
Post: #2
RE: Comprehensive Guide On Developing MyCodes
wow, I really understand now

Thnkyou

DamYam's signature THE BIGGEST COLLECTION OF PLUGINS THEMES AND MYCODES FOR MYBB
Visit this user's website Find all posts by this user
Quote this message in a reply
09-07-2009, 07:51 AM
Post: #3
RE: Comprehensive Guide On Developing MyCodes
thanks ghazal! useful for those beginner mycode developer.. Smile

AndrewPH's signature THE BIGGEST COLLECTION OF PLUGINS THEMES AND MYCODES FOR MYBB
Visit this user's website Find all posts by this user
Quote this message in a reply
12-15-2009, 01:27 PM
Post: #4
RE: Comprehensive Guide On Developing MyCodes
Now i get it what mycode means and how to use them.
thanks for such a good tutorial.

learner's signature Cyberdigital Webmaster & downloads forum||Pagerank & Backlink checker||Youtube Videos search and download||cyberdigital Portal of websites
Visit this user's website Find all posts by this user
Quote this message in a reply
01-05-2010, 01:37 PM
Post: #5
RE: Comprehensive Guide On Developing MyCodes
Great tutorial, step by step and clean. Thankx

naqshbandios_limra's signature
Visit this user's website Find all posts by this user
Quote this message in a reply
07-12-2010, 11:15 AM
Post: #6
RE: Comprehensive Guide On Developing MyCodes
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.

smithshn's signature portable media players
Visit this user's website Find all posts by this user
Quote this message in a reply
0 member(s) viewed this thread in the last 365 days :
Post Reply 


Was This Thread Useful ?
Please Link To Us
URL
BBCode
HTML

Possibly Related Threads...
Thread: Author Replies: Views: Last Post
Lightbulb [GUIDE] User's Submitted Stuffs ghazal 2 2,675 10-30-2010 03:47 AM
Last Post: amitsystem

Forum Jump:

 
New To Site ?
Some Useful Links
  • Help

  • You Might Need To Register

  • Forum Statistics

  • Mark All Forums Read

  • Forum Staff

  • Log Out
  • Contact Us

  • Mybbcodes

  • Return to Top

  • Return to Content

  • Lite (Archive) Mode

  • RSS Syndication
  • Powered By MyBB, © 2002-2022 MyBB Group.
    Golden Crown - Designed and Published by ghazal & exdiogene of MyBBCodes.
    Hosting provided by WWWHostingServer.com