SQL Maestro Group / Resources / Latest resources / Investigating NBA demo. Part 1: Customizing common templates

Investigating NBA demo. Part 1: Customizing common templates

Last modified: Mar 16, 2016

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:

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

Picture 6. Source code of generated webpages

Back to resource list