Choose your database:
AnySQL
MySQL
MS SQL Server
PostgreSQL
SQLite
Firebird
Oracle
SQL Anywhere
DB2
MaxDB

Subscribe to our news:
Partners
Testimonials
Peter Robinson: "As a tech savvy company director, I wanted an inexpensive web based database application to manage all aspects of my business. As with most humans I find developing purely by CLI very hard and do not have the will or time to invest in improving my skills. I was looking to find a nice human friendly GUI to design and build my application, which is when I came across PHP Generator for MySQL.

Whilst you still need a great understanding of logic and a small amount of programming ability to get the specific results you require, I am very happy with the speed of progress I have been making with this invaluable tool.

With all the standard libraries included, this product makes normal requirements such as JavaScript form validation, lookup selectors, on click events, auto complete, detailed searches, multiformat exports, rss feeds and username security straight forward and quick.

Having any changes made via the GUI written to the web server at the click of a button makes testing out ideas quick and easy without fear of breaking your application.

To conclude, I couldn't find any other product on the market that came close to offering the amount of options this does, and I do hope that more products like this come out in the future, with the hope of eventually eradicating the need to program all together".

Steve Morton: "First let me thank you for making this application Free. Best deal I have ever see for what it does".

More

Add your opinion

SQL Maestro Group / Products / MySQL / PHP Generator for MySQL / Resources / Investigating NBA demo. Part 1: Customizing common templates

Investigating NBA demo. Part 1: Customizing common templates

Last modified: Mar 16, 2016

Prev Next

Abstract

This article begins a series of step-by-step tutorials on how we made our NBA demo website. We'll start with the description of how to:

To see the video version of this tutorial, visit our YouTube channel.

Adding additional items to the application menu

Our first goal is to create the "Useful links" menu containing links to the demo project, product home page, etc. Let's start from a brief theoretical introduction.

To create an additional menu, you have to override the page_list_menu.tpl template. Typically additional menus are inserted in one of three places:

User menu placement optionsPicture 1. User menu placement options
  • On the left of the main menu. In this case we should include the main menu template file page_list_menu.tpl before our menu items (1);
  • On the right of the main menu. In this case we should include the main menu template file after our menu items (2);
  • On the left of the Admin menu. In this case we can include the main menu template file either before or after our items and provide our <ul> tag with the navbar-right class (3).

As we want to place our menu on the right of the main menu, our choice is the second option.

Listing 1. Adding an additional menu
{include file='page_list_menu.tpl'}
<ul class="nav navbar-nav">
    <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
           aria-expanded="false">
            Useful links
            <span class="caret"></span>
        </a>
        <ul class="dropdown-menu">
            <li><a href="http://www.sqlmaestro.com" title="Visit sqlmaestro.com"
                   target="_blank">SQL Maestro Group website</a></li>
            <li><a href="http://www.sqlmaestro.com/products/mysql/phpgenerator/"
                   title="Visit PHP Generator for MySQL home page"
                   target="_blank">PHP Generator for MySQL home page</a>
            </li>
            <li role="separator" class="divider"></li>
            <li><a href="http://www.nba.com"
                   title="Visit the official site of the National Basketball Association"
                   target="_blank">Official NBA website </a></li>
        </ul>
    </li>
</ul>

All that's left to do is to instruct PHP Generator to use this overridden template. Define the application-level OnGetCustomTemplate event handler as follows:

Listing 2.
if ($part == PagePart::PageList) {
    $result = 'custom_menu.tpl';
}

Done. The following picture demonstrates this menu in action.

Implementing run-time color theme selection

In this topic we'll describe how to allow your users to select the desired color theme. First of all, we created a custom menu as described in the previous topic:

Listing 3. Theme menu
{include file='page_list_menu.tpl'}
<ul class="nav navbar-nav navbar-right">
    <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
           aria-expanded="false">Themes
            <span class="caret"></span>
        </a>
        <ul class="dropdown-menu" id="themes">
            {foreach from=$themes item=postfix key=name}
                <li><a href="#"{if $themePostfix == $postfix} style="font-weight: 800"{/if}>{$name}</a></li>
            {/foreach}
        </ul>
    </li>
</ul>

We'll pass $themes and $themePostfix parameters to this template from the appropriate event handler (see below). Then we added a small piece of code to user-defined JavaScript to handle the theme selection:

Listing 4. User JavaScript
function setCookie(cname, cvalue, exdays) {
    var d = new Date();
        d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
    var expires = "expires=" + d.toUTCString();
            document.cookie = cname + "=" + cvalue + "; " + expires;
        }
/* This click handler sets the cookie variable 'theme' with the theme id and reloads the page. */
require(['jquery'], function() {
    $(function () {
        $("#themes").on("click", "a", function (e) {
            setCookie('theme', $(this).text(), 360);
            location.reload();
            e.preventDefault();
        });
    });
});

And finally we implemented the application-level OnGetCustomTemplate event handler to pass the theme list and the current theme name to the menu template as well as instruct the generated application to use a style file that corresponds to the selected theme. See comments within the listing for more info.

Listing 5. OnGetCustomTemplate event handler
if ($part == PagePart::PageList ||
    $part == PagePart::Layout ||
    $part == PagePart::LoginPage) {
        /* Preparing array with theme names and trying to retrieve current theme name from cookies. */
        $themes = array(
            "Default" => "",
            "Cerulean" => "_cerulean",
            "Cosmo" => "_cosmo",
            "Cyborg" => "_cyborg",
            "Darkly" => "_darkly",
            "Facebook" => "_facebook",
            "Flatly" => "_flatly",
            "Journal" => "_journal",
            "Lumen" => "_lumen",
            "Paper" => "_paper",
            "Readable" => "_readable",
            "Sandstone" => "_sandstone",
            "Simplex" => "_simplex",
            "Slate" => "_slate",
            "Spacelab" => "_spacelab",
            "Superhero" => "_superhero",
            "United" => "_united",
            "Yeti" => "_yeti",
        );
        $themePostfix = "";
        if (isset($_COOKIE['theme']) && $_COOKIE['theme'] && isset($themes[$_COOKIE['theme']])) {
        $themePostfix = $themes[$_COOKIE['theme']];
	}
 
	if ($part == PagePart::PageList) {
        /* Passing the array and the current theme name to the custom menu template */
        $params['themes'] = $themes;
		$params['themePostfix'] = $themePostfix;
		$result = 'custom_menu.tpl';
	} else {
		 /* StyleFile is a parameter that can be passed to the common layout.tpl template */
		 /* to specify a custom style file. Its default value is components/assets/css/main.css. */
		$params['StyleFile'] = 'components/assets/css/main' . $themePostfix . '.css';
	}
}

If your application doesn't include additional styles, the deal is completed as the theme selection will work just fine. Otherwise user-defined styles will be represented correctly only in the theme that was selected in PHP Generator on creating the app as style files coming with PHP Generator know nothing about your additions.

To get user-defined styles worked with all themes, you have to recompile the appropriate style files. You can do it either with PHP Generator GUI selecting all the required themes and re-generating the application (don't forget to rename components/assets/css/main.css to components/assets/css/main_%theme_name%.css after each generation) or using an external .less compiler as described in the developer reference.

You can try the theme selection menu in action in our NBA demo application.

Customizing the login page

By default the login page looks as follows:

As this is just a demo, we want to equip this page with a table displaying the information about available logins. To do so, we customized custom_login_page.tpl as shown below and placed it in the templates/custom_templates folder.

Listing 6. Custom login page template
{capture assign="ContentBlock"}
    {* <CustomTemplate> *}
    <h1 style="text-align: center">Welcome to the PHP Generator NBA demo!</h1>
    {* </CustomTemplate> *}
 
    {$Renderer->Render($LoginControl)}
 
    {* <CustomTemplate> *}
    <h2>Login information</h2>
    <table class="table table-bordered">
        <thead>
        <tr>
            <th>Username</th>
            <th>Password</th>
            <th>Description</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>admin</td>
            <td>admin</td>
            <td>Can modify any record at any page and manage other users.</td>
        </tr>
        <!-- -->
        </tbody>
    </table>
    {* </CustomTemplate> *}
{/capture}
{include file="common/layout.tpl"}

Next we provided the OnGetCustomTemplate application-level event handler with the following PHP code to specify the generated application to use the template.

Listing 7. OnGetCustomTemplate event handler
if ($part == PagePart::LoginPage) {
    $result = 'custom_login_page.tpl';
}
The login page now looks like shown below.

Adding meta tags and a favicon

To add meta tags and a favicon to the website, we provided the OnCustomHTMLHeader application-level event handler with the following PHP code and placed the favicon file to the root folder of the generated application.

Listing 8. OnCustomHTMLHeader application-level event handler
$customHtmlHeaderText = '<meta name="author" content="SQL Maestro Group">';
$customHtmlHeaderText .= "\n";
$customHtmlHeaderText .= '<meta name="copyright" content="SQL Maestro Group" />';
$customHtmlHeaderText .= "\n";
$customHtmlHeaderText .= '<meta name="keywords" content="nba,basketball,game">';
$customHtmlHeaderText .= "\n";
$customHtmlHeaderText .= '<link rel="icon" href="favicon.ico" type="image/x-icon" />';

The screenshot below shows the Regular season games webpage with the favicon and the source code of this webpage.

Source code of webpagesPicture 6. Source code of generated webpages
Prev Next