Skip to end of metadata
Go to start of metadata


This article explains how to create your PHP plugin website with the design and features from LoxBerry. For developing new plugins it is recommended to use these features.The LoxBerry template features are used to give every page it's LoxBerry design with header and footer, the navigation on the left and the help on the right side. The templates are designed responsive to make them also usable on mobile devices.

LoxBerry's template system has integrated multilingual support. ini-styled language files are used for translation. For multilingual support, follow the recommended directory structure for your plugin. This way, the LoxBerry template system will provide templates in the user's own language, or English as fallback automatically. Please see the PHP sample plugin and further documentation for details.

LoxBerry uses the jQuery Mobile HTML UI framework (version 1.4.5 is used). In the main section of your PHP you can use almost all of the jQuery Mobiles features. 

JavaScript coding is simplified by jQuery (version 1.12.4 is used).

Usage

The functions LBWeb::lbheader and LBWeb::lbfooter print the default layout of LoxBerry to your HTML. In between, your main content is placed.

As your plugin should provide a help file, or at least a help link, also a help file (that is multilingual, too) and/or help link needs to be initialized in your PHP script. You should also provide some title for the window and a header title. That is also done in your PHP code.

The function LBSystem::readlanguage collects the user's native and fallback language phrases of your plugin and gives you a language array to be used in your code. Developing your HTML in PHP, can be done by first doing everything in cleartext and later replace the text with variable tags, or you simultaneously create your PHP and language file.

For translation to multiple languages (from initial English to other languages), you can use the Translate widget. For the Translate widget, it is important to follow the directory and file layout explained below.

See this easy example:

<?php
require_once "loxberry_web.php";
 
// This will read your language files to the array $L
$L = LBSystem::readlanguage("language.ini");
$template_title = "Top Plugin";
$helplink = "http://www.loxwiki.eu:80/x/2wzL";
$helptemplate = "help.html";
 
LBWeb::lbheader($template_title, $helplink, $helptemplate);

// This is the main area for your plugin
?>
<p><?=$L['SOMEAREA.WELCOMEMESSAGE']?></p>
<p><?=$L['SOMEAREA.HOWTOMESSAGE']?></p>

<?php  
// Finally print the footer  
LBWeb::lbfooter();
?>

 

You can also print a navigation bar below the header. The navigation bar can have unlimited (possibly not, but really a lot) of elements, and it is responsive, too. The navigation bar must be defined in an array exactly called $navbar. See this example:

<?php
require_once "loxberry_web.php";
 
// This will read your language files to the array $L
$L = LBSystem::readlanguage("language.ini");
$template_title = "Top Plugin";
$helplink = "http://www.loxwiki.eu:80/x/2wzL";
$helptemplate = "help.html";

// The Navigation Bar
$navbar[1]['Name'] = $L['NAVBAR.FIRST'];
$navbar[1]['URL'] = 'index.php';

$navbar[2]['Name'] = $L['NAVBAR.SECOND'];
$navbar[2]['URL'] = 'settings.php';

$navbar[3]['Name'] = $L['NAVBAR.THIRD'];
$navbar[3]['URL'] = 'http://www.loxberry.de';
$navbar[3]['target'] = '_blank';

// Activate the first element
$navbar[1]['active'] = True;
 
// Now output the header, it will include your navigation bar
LBWeb::lbheader($template_title, $helplink, $helptemplate);

// This is the main area for your plugin
?>
<p><?=$L['SOMEAREA.WELCOMEMESSAGE']?></p>
<p><?=$L['SOMEAREA.HOWTOMESSAGE']?></p>

<?php  
// Finally print the footer  
LBWeb::lbfooter();
?>

You can copy the $navbar code from script to script, and only change the 'active' number. Nice and quick!

If you would like to have a website without panels (left menu and right help panel), sjust set $helpurl to "nopanels" and the panels will not be rendered. This feature was implemented with LoxBerry V1.2.4, so remember to set LB_MINIMUM to that LoxBerry Version in your plugin.cfg, if you would like to use it!

<?php
require_once "loxberry_web.php";
 
// This will read your language files to the array $L
$L = LBSystem::readlanguage("language.ini");
$template_title = "Top Plugin";
$helplink = "nopanels";
$helptemplate = "";
 
LBWeb::lbheader($template_title, $helplink, $helptemplate);

// This is the main area for your plugin
?>
<p><?=$L['SOMEAREA.WELCOMEMESSAGE']?></p>
<p><?=$L['SOMEAREA.HOWTOMESSAGE']?></p>

Language system

The function LBSystem::readlanguage("language.ini") seems clear, but it does magic!

Place your language file(s) to the folder template/lang/. All languages are taken from the lang folder.

Your first language should be the fallback language English, so name the file language_en.ini If you have finished the english language (usually only one langfile is required for one plugin), create your foreign language files with e.g. language_de.ini, language_fr.ini or whatever.

The language system will query the users language and request the appropriate language file. If the file is missing, or even single phrases are missing, it falls back to English completely or for missing phrases.

That's the magic.

Nice trick: You can test foreign languages everytime by simply adding ?lang=xx to the URL of your plugin in the web browser.

Help system

The second parameter of lbheader(), $helplink, is a full hyperlink you can provide. Most developers link to the Plugin page in LoxWiki. In the plugin help (shown when pressing the left-cornered i symbol) it is shown as an "Additional help" link.

If you would like to have a website without left menu and right help panel, set this to "nopanels" and the website will be rendered without the side panels (e.g. for a PopUp window). Note! Implemented in LoxBerry Version 1.2.4, so set LB_MINIMUM to this version in your plugin.cfg!

Hint: With the language system from above, you even can provide different links on different languages! Code the link url as a phrase to your language file.

$helptemplate

The third parameter, $helptemplate, is somewhat of a bit more sophisticated as you can decide how you want to deliver your help files:

Help template and language files

In this case, you create a pluginhelp.html file in the folder template/help. In the HTML, use tags written as <TMPL_VAR SECTION.TAG> where section is the [SECTION] in your language file, and tag your key. Use CAPITAL letters only..

In your template/lang folder, create a pluginhelp_en.ini and more languages. The name of the template and the language file needs to be equal.

That's it. One help ini file per language.

Help.html's for every language

The second method is, you create an HTML file for every language. We think, the other method with templates is more likely to be translated by others.

Create a folder template/en with help file pluginhelp.html (your parameter) for English.

Create a folder template/de with help file pluginhelp.html for German.

And so on. Finished.

Help template parameter examples

Function CallDescriptionHTML file placed hereLanguage file placed here
LBWeb::lbheader("Title", $url, "pluginhelp.html");
Template with<TMPL_VAR> variables (multilingual)templates/help/pluginhelp.html

templates/lang/pluginhelp_en.ini

templates/lang/pluginhelp_de.ini

LBWeb::lbheader("Title", $url, "pluginhelp.html");
Ready HTML files for every language

templates/de/pluginhelp.html

templates/en/pluginhelp.html

Does not exist
  • No labels