Please help with getting to know vB code all over again

[cbiweb]

While examining the HTML, PHP, JavaScript, etc., of vB's architecture, I'm stumped on a particular aspect of how it's all assembled to create a page. For this post I'll use the example of ACP > Settings > Options > Spam Management.

I viewed the HTML source of that page to get an idea of what's there, and I noticed that the form code looks like this (some values replaced with x's):

<form action="options.php?do=dooptions" method="post" onsubmit="if (!window.__cfRLUnblockHandlers) return false; return count_errors()" name="optionsform" id="optionsform" data-cf-modified-xxxxxxxxxxxxxxxxxxxxxxxx-="">
<input type="hidden" name="do" id="do" value="dooptions" />
<input type="hidden" name="adminhash" value="xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx" />
<input type="hidden" name="securitytoken" value="xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx" />

I see a data-cf-modified value, a hash value, and a security token. I also see more data-cf-modified values all through the HTML source code.

I've looked at many script files to see if I can determine how those values are generated, and can't seem wrap my head around it. So if I want to create a form for whatever reason, what scripts do I call to make everything work?
I realize it may not be a simply explanation, so I definitely appreciate the time anyone can take to explain it to me.

Thanks!

[In Omnibus]

I'd recommend taking a look at the existing vBulletin 4 form modification. It will provide you with a lot more information than anyone can post here in a reasonable amount of time.

https://vbulletin.org/forum/showthread.php?t=234385

[Wayne Luke]

vBulletin 4.X uses a very linear method of building pages. It won't output a page until everything has been created. This is different from vBulletin 5 which will draw most of the page and then use AJAX and other modern technologies to fill in the blanks. vBulletin 4 also relies on HTML tags being in a specific order to dictate the layout of the page shown to the user. vBulletin 5 does not.

You shouldn't have to worry about the data-cf-modified value. This is a timestamp inserted by Cloudflare to monitor whether to use a cached version of the form or not. If you do not use cloudflare, then you won't see this. It doesn't actually exist in the vBulletin code.

Data attributes are a method of adding information to HTML tags that do not violate the HTML 5 specification. vBulletin 4.X doesn't actually use HTML 5. It uses XHMTL 1.0. A different specification. Though, browsers should still ignore attributes they don't understand unless you're running in a strict XHTML mode. The strict mode is not recommended because the majority of websites do not comply with it and many do not use decade old technology like XHTML 1.0 anymore.

vBulletin 5 on the other hand, makes extensive use of data attributes along with Javascript hooks via CSS to build its pages.

You can find more information on data-attributes here: Using data attributes - Learn web development | MDN (mozilla.org)


The best tool to see how vBulletin 4 draws a specific AdminCP page is to look at the corresponding PHP script. Every link leads to a specific PHP file that reboots the vBulletin Engine, pulls information from the database, and initializes variables for that specific page only. Any single page doesn't know what the page before it did.

Development should occur in a non-CloudFlare environment. Using a caching service like Cloudflare on a development server can make it appear like there are errors when in fact there are none.