Following the tradition of numerous Programer Manuals, the basics for the creation of own modules will be shown via a simple Hello World Module. The module itself does not contain great features. It provides a text field for a short message in the backend which can be displayed in the frontend. As default message Hello world will be displayed.

Hello World (page type module)

The latest version of the Hello World Module can be found on the Add-Ons Repository.

All files contained in the module archive provides comments which explain it´s purpose and the variables or functions used. The module covers the main concepts like exchange of data from the database, usage of optional CSS or Javascript module files up to multilingual text output in back- and frontend. Where required, basic recommendations for security measures to prevent SQL-Injections or XSS attacks are provided.

File: add.php

The file is invoked when adding a new page/section of the module type via the WB backend. The file adds a database entry to the module table: mod_helloworld with the PAGE_ID and SECTION_ID of the actual page. This enables to add a hello world output text for each pages/section individually.

File: delete.php

This file is invoked when deleting a page/section of the module type via the WB backend. The file removes the corresponding database entry from the module table: mod_helloworld.

File: index.php

The index.php file prevents the listing of files and folders contained in the module directory independent of your server settings. If someone tries to access the module directory directly via: http://domain.de/module/helloworld, he will be redirected to the Website Baker start page. This is a simple measure to enhance security as no additional information about the module architecture will be displayed.

File: info.php

This file provides the required information for WebsiteBaker like module directory. This file should also be used to provide a module development history.

File: install.php

This file is invoked when the module is installed via the WB backend. The file adds the new database table mod_helloworld, used to store the output text for the frontend. In addition database entries are added to the WB search table (search). This allows to search and list for the output text stored in the module table mod_helloworld.

File: modify.php

This file is invoked whenever a page/section of the module type Hello world is displayed in the backend. The file contains the module backend functions and allows to change optional module settings.

The modify.php file of the hello world example module provides a HTML form which contains a text field and the buttons Save and Cancel. The backend styles for form and table are taken from the external module file backend.css.

The language of all text outputs and captions of the HTML elements in the backend depends on the language settings of the user loged in. The module provides a German and a English (default) language file. A click on the button Cancel redirects the user to the Pages dialogue. A click on the button Save invokes the file save.php which filters the user input passed over via the text field and stores the text output in the module table mod_helloworld.

Apart from the main function of the module, a text link is provided which invokes a external Javascript function defined in the backend.js file of the module via the onClick method. The Javascript function displays the display name of the user via an the Javascript alert method.

File: save.php

The file save.php is invoked by the user by clicking the button Save contained in modify.php. The file receives the POST variable $simple_output, removes possible HTML, Javascript and PHP tags and escapes special characters with a \ to prevent possible SQL-Injections. The filtered user input is then stored in the DB field simple_output of the table: mod_helloworld. A status message provides information whether the database action was successful or not. After that the user is redirected to the modify.php page of the module.

File: uninstall.php

This file is invoked when the hello world module is uninstalled via the WB backend. The file deletes the module database table mod_helloworld and removes the search entries for the Hello world module from the WB search table.

File: view.php

The file view.php is invoked when a page/section of the type Hello world is displayed in the frontend. The file contains the module frontend functions required to display the text output stored in the database.

The view.php file of the hello world example module outputs the text stored in the database field simple_output of the current displayed page/section. The frontend styles for the text output is taken from the external module file frontend.css. The language of all text outputs in the frontend depends on the language of the actual displayed page. The module provides a German and a English (default) language file. Apart from that a text link is provided which invokes a external Javascript function defined in the frontend.js file of the module via the onClick method.

Files: frontend.css / frontend.js

The optional files frontend.css and frontend.js contains CSS styles and Javascript functions which can be used in view.php.

Since WB 2.12.1 you can rename the files to frontendUser.css and frontendUser.js to prevent overwriting during the upgrade.

This files will automatically be linked to the <head> section of the HTML page in WebsiteBaker. This enables module developers to use external CSS and Javascript routines while creating valid (X)HTML code. Version prior to v2.6.6 stored CSS definitions in the database and outputs them into the <body> which created invalid (X)HTML markup.

To enable linking of the optional frontend.css and frontend.js module files to the <head> section, one needs to add the following PHP code lines to the index.php file of the template. 

<head>
...
<?php
if(function_exists('register_frontend_modfiles')) {
  register_frontend_modfiles('css');
  register_frontend_modfiles('js');
} ?>
</head>

Files: backend.css / backend.js

The optional files backend.css and backend.js contains CSS styles and Javascript functions which can be used in modify.php (page type modules) and tool.php (administration tools).

Since WB 2.12.1 you can rename the files to backendUser.css and backendUser.js to prevent overwriting during the upgrade.

This files will automatically be linked to the <head> section of the HTML page in WebsiteBaker without any further changes.

Example module: Administration tools

The basic concepts for the creation of own modules are explained on basis of the Hello World module. At the moment, there is no existing Hello world module available for the module type: administration tools.

However, a good starting point for the development of own administration tools is the module User Stats from the Add-Ons Repository. This module provides a list with the user names of all registerd users, the date of it´s last login, the inactive days and a mailto link with the mail address stored in the users database. Text outputs are depending on the user settings. The modules ships with a German and a English (default) language file.

The external module files backend.css and backend.js are not used by this module.

Example module: code snippets

The basic concepts for the creation of own modules are explained on basis of the Hello World module. At the moment, there is no existing Hello world module available for the module type: code snippets.

However, a good starting point for the development of own code snippets is the module Any News from the Add-Ons Repository. This module provides the additional function display_news_items(). This function allows to display News on pages/sections other than the news page itself. The function can be invoked via the index.php file of your template or a page/section of the type code. A README file is contained in the module archive which provides basic information about the parameters which can be passed to fhe function.

Note:
It is not possible to use the optional files frontend.css, frontend.js, backend.css or backend.js from a module of the type code snippet!!

Have fun while developing your own modules.