I Love PHPMaker

... because it gets even more powerful and flexible!!

I Love PHPMaker » Customize Template » How to Display Breadcrumb in Websites That Created With PHPMaker 8.0.3

How to Display Breadcrumb in Websites That Created With PHPMaker 8.0.3

The only way to let your users/visitors know about where they are or what is the full path of the current website page they are visitting now is to display the breadcrumb link in your website. By displaying this breadcrumb link, in addition they will not be lost about the location where they are, your users also will be easily jump to the certain parent page link of the current page, especially if your menu structure has more than one levels. Unfortunately, PHPMaker has not provided this breadcrumb feature until 8.0.3 version.

All right then. Here is the good news. I have successfully customized the PHPMaker template in order to implement this breadcrumb link feature in most of pages that generated by PHPMaker. You are also able to display or hide (disable/enable) this breadcrumb link by simply adjust the related constant value in your configuration (ewcfg*.php) file. Not only that, the style of the breadcrumb that will be displayed looks simple, yet so very very nice. This will make your website will look smarter and more professional for your users or visitors.

Another good news that you need to know is that you are able now to create unlimited breadcrumb levels, as well as the unlimited menu levels you may create that provided by PHPMaker itself. Not only that, you are also now able to display the current page title in your title bar of your browser. For example, your current page title is "Customers List" and your web application title is "My Online Shop". Instead of displaying only "My Online Shop" in the browser's title bar as the current condition that provided by PHPMaker, now you are able to display Customers List « My Online Shop in your title bar of the browser.

Updated on February 25, 2012: Now the breadcrumb also supports for multi language feature! Please re-check all steps below, especially the $rs->fields("Page_Title") syntax, make sure you have replaced it become: $Language->Phrase($rs->fields("Page_Title")). Do not hesitate to leave your comment just in case you are still having the problem to implement multi language feature for the breadcrumb.

All we have to do is customizing the PHPMaker template files. In other words, we do not modify any generated script files.

Please click on the following image below to watch the demo:

Displaying Breadcrumb Link
Displaying Breadcrumb Link

[hidepost]

  1. First of all, please follow this article or this article in order to create the breadcrumblinks table structure including the three Stored Procedures that you will need to populate the breadcrumbs link records. Afterwards, insert your breadcrumbs record by using the addnewbreadcrumb SP.
  2. Open your /Script/ewcfg.php file, and find this code:

    // Show SQL for debug
define("EW_DEBUG_ENABLED", <!--##=ew_Val(PROJ.GetV("Debug"))##-->, TRUE); // TRUE to debug
if (EW_DEBUG_ENABLED)
	error_reporting(-1); // Report all PHP errors

    after the last line of that code, please insert this following code:

    // Show breadcrumb in all pages
define("EW_SHOW_BREADCRUMB_IN_ALL_PAGES", TRUE, TRUE);
  3. Open your /Script/list-script.php file, and find this code:

    <p class="phpmaker ewTitle"><!--##@MasterRecord##--><?php echo $<!--##=sMasterTblVar##-->->TableCaption() ?>
&nbsp;&nbsp;<?php $<!--##=sPageObj##-->->ExportOptions->Render("body"); ?>
</p>

    replace that code with the following code:

    <?php // Begin of show breadcrumb for the current page, added by Masino Sinaga, November 30, 2011 ?>
<?php if (EW_SHOW_BREADCRUMB_IN_ALL_PAGES) { ?>
<span>
<div id="ewContainer">
<ul id="breadcrumb">
<?php 
    if (isset($_GET&#91;"showmaster"&#93;)) {
	  $sSql = "SELECT C.*
			FROM breadcrumblinks AS B, breadcrumblinks AS C
			WHERE (B.Lft BETWEEN C.Lft AND C.Rgt)
			AND (B.Page_URL LIKE '".$_GET&#91;"showmaster"&#93;."')
			ORDER BY C.Lft"; // showmaster, in order to get the full path of the master record!, modified by Masino Sinaga, January 27, 2012
	} else {
	  $sSql = "SELECT C.*
			FROM breadcrumblinks AS B, breadcrumblinks AS C
			WHERE (B.Lft BETWEEN C.Lft AND C.Rgt)
			AND (B.Page_URL LIKE '".ew_CurrentPage()."')
			ORDER BY C.Lft";	
	}
	$rs = $conn->Execute($sSql);
	$recCount = $rs->RecordCount();
	$rs->MoveFirst();
	$i = 1;
	while (!$rs->EOF) {
		if ($i < $recCount) {
			if ($i==1) {
				echo "<li><a href='". $rs->fields("Page_URL")."' title='".$Language->Phrase("Home")."'><img src='./phpimages/home.png' alt='".$Language->Phrase("Home")."' class='home' /></a></li>";
			} else {
				echo "<li><a href='". $rs->fields("Page_URL")."'>".$Language->Phrase($rs->fields("Page_Title"))."</a></li>";
			}
		} else {
			echo "<li>".$Language->Phrase($rs->fields("Page_Title"))."</li>";			
		}
		$i++;
        $rs->MoveNext();
    }
    $rs->Close();
?>
</ul>
</div>
</span>
<?php } ?>
<?php // End of show breadcrumb for the current page, added by Masino Sinaga, November 30, 2011 ?>
<div id="ewContainer">
<span class="phpmaker ewTitle"><!--##@MasterRecord##--><?php echo $<!--##=sMasterTblVar##-->->TableCaption() ?>
&nbsp;&nbsp;<?php $<!--##=sPageObj##-->->ExportOptions->Render("body"); ?>
</div>
</span>
  4. Still in that file, find again this code:

    <!--## If bGridAdd Then ##-->
}
<!--## End If ##-->
?>

    after the last line of that code, please insert this following code:

    <?php // Begin of show breadcrumb for the current page, added by Masino Sinaga, November 30, 2011 ?>
<?php if (EW_SHOW_BREADCRUMB_IN_ALL_PAGES) { ?>
<span>
<div id="ewContainer">
<ul id="breadcrumb">
<?php 
	$sSql = "SELECT C.*
			FROM breadcrumblinks AS B, breadcrumblinks AS C
			WHERE (B.Lft BETWEEN C.Lft AND C.Rgt)
			AND (B.Page_URL LIKE '".ew_CurrentPage()."')
			ORDER BY C.Lft";
	$rs = $conn->Execute($sSql);
	$recCount = $rs->RecordCount();
	$rs->MoveFirst();
	$i = 1;
	while (!$rs->EOF) {
		if ($i < $recCount) {
			if ($i==1) {
				echo "<li><a href='". $rs->fields("Page_URL")."' title='".$Language->Phrase("Home")."'><img src='./phpimages/home.png' alt='".$Language->Phrase("Home")."' class='home' /></a></li>";
			} else {
				echo "<li><a href='". $rs->fields("Page_URL")."'>".$Language->Phrase($rs->fields("Page_Title"))."</a></li>";
			}
		} else {
			echo "<li>".$Language->Phrase($rs->fields("Page_Title"))."</li>";			
		}
		$i++;
        $rs->MoveNext();
    }
    $rs->Close();
?>
</ul>
</div>
</span>
<?php } ?>
<?php // End of show breadcrumb for the current page, added by Masino Sinaga, November 30, 2011 ?>
  5. Open your /Script/add-script.php file, and find this code:

    <!--##session htmtable##-->

    after the line of that code, please insert this following code:

    <?php // Begin of show breadcrumb for the current page, added by Masino Sinaga, November 30, 2011 ?>
<?php if (EW_SHOW_BREADCRUMB_IN_ALL_PAGES) { ?>
<span>
<div id="ewContainer">
<ul id="breadcrumb">
<?php 
	$sSql = "SELECT C.*
			FROM breadcrumblinks AS B, breadcrumblinks AS C
			WHERE (B.Lft BETWEEN C.Lft AND C.Rgt)
			AND (B.Page_URL LIKE '".ew_CurrentPage()."')
			ORDER BY C.Lft";
	$rs = $conn->Execute($sSql);
	$recCount = $rs->RecordCount();
	$rs->MoveFirst();
	$i = 1;
	while (!$rs->EOF) {
		if ($i < $recCount) {
			if ($i==1) {
				echo "<li><a href='". $rs->fields("Page_URL")."' title='".$Language->Phrase("Home")."'><img src='./phpimages/home.png' alt='".$Language->Phrase("Home")."' class='home' /></a></li>";
			} else {
				echo "<li><a href='". $rs->fields("Page_URL")."'>".$Language->Phrase($rs->fields("Page_Title"))."</a></li>";
			}
		} else {
			echo "<li>".$Language->Phrase($rs->fields("Page_Title"))."</li>";			
		}
		$i++;
        $rs->MoveNext();
    }
    $rs->Close();
?>
</ul>
</div>
</span>
<?php } ?>
<?php // End of show breadcrumb for the current page, added by Masino Sinaga, November 30, 2011 ?>
  6. Open your /Script/search-script.php file, and find this code:

    <!--##session htmtable##-->

    after the line of that code, please insert this following code:

    <?php // Begin of show breadcrumb for the current page, added by Masino Sinaga, November 30, 2011 ?>
<?php if (EW_SHOW_BREADCRUMB_IN_ALL_PAGES) { ?>
<span>
<div id="ewContainer">
<ul id="breadcrumb">
<?php 
	$sSql = "SELECT C.*
			FROM breadcrumblinks AS B, breadcrumblinks AS C
			WHERE (B.Lft BETWEEN C.Lft AND C.Rgt)
			AND (B.Page_URL LIKE '".ew_CurrentPage()."')
			ORDER BY C.Lft";
	$rs = $conn->Execute($sSql);
	$recCount = $rs->RecordCount();
	$rs->MoveFirst();
	$i = 1;
	while (!$rs->EOF) {
		if ($i < $recCount) {
			if ($i==1) {
				echo "<li><a href='". $rs->fields("Page_URL")."' title='".$Language->Phrase("Home")."'><img src='./phpimages/home.png' alt='".$Language->Phrase("Home")."' class='home' /></a></li>";
			} else {
				echo "<li><a href='". $rs->fields("Page_URL")."'>".$Language->Phrase($rs->fields("Page_Title"))."</a></li>";
			}
		} else {
			echo "<li>".$Language->Phrase($rs->fields("Page_Title"))."</li>";			
		}
		$i++;
        $rs->MoveNext();
    }
    $rs->Close();
?>
</ul>
</div>
</span>
<?php } ?>
<?php // End of show breadcrumb for the current page, added by Masino Sinaga, November 30, 2011 ?>
  7. Open your /Script/view-script.php file, and find this code:

    <!--##session htmtable##-->

    after that line of code, please insert this following code:

    <?php // Begin of show breadcrumb for the current page, added by Masino Sinaga, November 30, 2011 ?>
<?php if (EW_SHOW_BREADCRUMB_IN_ALL_PAGES) { ?>
<span>
<div id="ewContainer">
<ul id="breadcrumb">
<?php 
	$sSql = "SELECT C.*
			FROM breadcrumblinks AS B, breadcrumblinks AS C
			WHERE (B.Lft BETWEEN C.Lft AND C.Rgt)
			AND (B.Page_URL LIKE '".ew_CurrentPage()."')
			ORDER BY C.Lft";
	$rs = $conn->Execute($sSql);
	$recCount = $rs->RecordCount();
	$rs->MoveFirst();
	$i = 1;
	while (!$rs->EOF) {
		if ($i < $recCount) {
			if ($i==1) {
				echo "<li><a href='". $rs->fields("Page_URL")."' title='".$Language->Phrase("Home")."'><img src='./phpimages/home.png' alt='".$Language->Phrase("Home")."' class='home' /></a></li>";
			} else {
				echo "<li><a href='". $rs->fields("Page_URL")."'>".$Language->Phrase($rs->fields("Page_Title"))."</a></li>";
			}
		} else {
			echo "<li>".$Language->Phrase($rs->fields("Page_Title"))."</li>";			
		}
		$i++;
        $rs->MoveNext();
    }
    $rs->Close();
?>
</ul>
</div>
</span>
<?php } ?>
<?php // End of show breadcrumb for the current page, added by Masino Sinaga, November 30, 2011 ?>
  8. Open your /Script/edit-script.php file, and find this code:

    <!--##session htmtable##-->

    after the line of that code, please insert this following code:

    <?php // Begin of show breadcrumb for the current page, added by Masino Sinaga, November 30, 2011 ?>
<?php if (EW_SHOW_BREADCRUMB_IN_ALL_PAGES) { ?>
<span>
<div id="ewContainer">
<ul id="breadcrumb">
<?php 
	$sSql = "SELECT C.*
			FROM breadcrumblinks AS B, breadcrumblinks AS C
			WHERE (B.Lft BETWEEN C.Lft AND C.Rgt)
			AND (B.Page_URL LIKE '".ew_CurrentPage()."')
			ORDER BY C.Lft";
	$rs = $conn->Execute($sSql);
	$recCount = $rs->RecordCount();
	$rs->MoveFirst();
	$i = 1;
	while (!$rs->EOF) {
		if ($i < $recCount) {
			if ($i==1) {
				echo "<li><a href='". $rs->fields("Page_URL")."' title='".$Language->Phrase("Home")."'><img src='./phpimages/home.png' alt='".$Language->Phrase("Home")."' class='home' /></a></li>";
			} else {
				echo "<li><a href='". $rs->fields("Page_URL")."'>".$Language->Phrase($rs->fields("Page_Title"))."</a></li>";
			}
		} else {
			echo "<li>".$Language->Phrase($rs->fields("Page_Title"))."</li>";			
		}
		$i++;
        $rs->MoveNext();
    }
    $rs->Close();
?>
</ul>
</div>
</span>
<?php } ?>
<?php // End of show breadcrumb for the current page, added by Masino Sinaga, November 30, 2011 ?>
  9. Open your /Script/delete-script.php file, and find this code:

    <!--##session htmtable##-->
<?php
// Load records for display
if ($<!--##=sPageObj##-->->Recordset = $<!--##=sPageObj##-->->LoadRecordset())
	$<!--##=sPageObj##-->TotalRecs = $<!--##=sPageObj##-->->Recordset->RecordCount(); // Get record count
if ($<!--##=sPageObj##-->TotalRecs <= 0) { // No record found, exit
	if ($<!--##=sPageObj##-->->Recordset)
		$<!--##=sPageObj##-->->Recordset->Close();
	$<!--##=sPageObj##-->->Page_Terminate("<!--##=sFnList##-->"); // Return to list
}
?>

    after the last line of that code, please insert this following code:

    <?php // Begin of show breadcrumb for the current page, added by Masino Sinaga, November 30, 2011 ?>
<?php if (EW_SHOW_BREADCRUMB_IN_ALL_PAGES) { ?>
<span>
<div id="ewContainer">
<ul id="breadcrumb">
<?php 
	$sSql = "SELECT C.*
			FROM breadcrumblinks AS B, breadcrumblinks AS C
			WHERE (B.Lft BETWEEN C.Lft AND C.Rgt)
			AND (B.Page_URL LIKE '".ew_CurrentPage()."')
			ORDER BY C.Lft";
	$rs = $conn->Execute($sSql);
	$recCount = $rs->RecordCount();
	$rs->MoveFirst();
	$i = 1;
	while (!$rs->EOF) {
		if ($i < $recCount) {
			if ($i==1) {
				echo "<li><a href='". $rs->fields("Page_URL")."' title='".$Language->Phrase("Home")."'><img src='./phpimages/home.png' alt='".$Language->Phrase("Home")."' class='home' /></a></li>";
			} else {
				echo "<li><a href='". $rs->fields("Page_URL")."'>".$Language->Phrase($rs->fields("Page_Title"))."</a></li>";
			}
		} else {
			echo "<li>".$Language->Phrase($rs->fields("Page_Title"))."</li>";			
		}
		$i++;
        $rs->MoveNext();
    }
    $rs->Close();
?>
</ul>
</div>
</span>
<?php } ?>
<?php // End of show breadcrumb for the current page, added by Masino Sinaga, November 30, 2011 ?>
  10. Go to your PHPMaker project application, click on the HTML tab, and then click again on the Styles sub-tab of the current tab, then click on Edit styles button. You will see a new popup window appears, and scroll down to the bottom of the page, you will find this code:

    /*END_USER_STYLES*/

    before that line, please insert this following code:

    #breadcrumb
{
    font: 8pt Tahoma, Helvetica, sans-serif;
    background-image:url(../phpimages/bc_bg.png); 
    background-repeat:repeat-x;
    height:22px;
    line-height:22px;
    color:#9b9b9b;
    /* border:solid 1px #cacaca; */
    border-left: 1px solid #cacaca;
    border-right: 1px solid #cacaca;
    border-top: 1px solid #cacaca;
    /* border-bottom: 1px solid #9F9F9F; */
    overflow:hidden;
    margin:0px;
    padding:0px;
}
#breadcrumb li 
{
    list-style-type:none;
    float:left;
    padding-left:1px;
}
#breadcrumb a
{
    height:22px;
    display:block;
    background-image:url(../phpimages/bc_separator.png); 
    background-repeat:no-repeat; 
    background-position:right;
    padding-right: 10px;
    text-decoration: none;
    color:#454545;
}
.home
{
    border:none;
    margin: 3px 0px;
}

#breadcrumb a:hover
{
	color:#35acc5;
}

    afterwards, click on the OK button to save the changes and close the popup window.

  11. Back to your PHPMaker application, then go to the Server Events/Client Scripts -> Server Events -> Global -> All Pages -> Global Code, then add this following function in the right pane:

    function getCurrentPageTitle($pt) {
	global $CurrentPageTitle, $conn, $Language;
	$sSql = "SELECT C.*
			FROM breadcrumblinks AS B, breadcrumblinks AS C
			WHERE (B.Lft BETWEEN C.Lft AND C.Rgt)
			AND (B.Page_URL LIKE '".$pt."')
			ORDER BY C.Lft";
	$rs = $conn->Execute($sSql);
	$recCount = $rs->RecordCount();
	if ($recCount>0) {
		$rs->MoveFirst();
		$i = 1;
		while (!$rs->EOF) {
			if ($i < $recCount) {
				if ($i==1) {

					// $CurrentPageTitle = 'Home'; // skip this!
				} else {
	
					// $CurrentPageTitle .= " &raquo; ". $Language->Phrase($rs->fields("Page_Title")).""; // skip this!
				}
			} else {

				// this is the current page, just display this, no need to display its parent!
				$CurrentPageTitle .= $Language->Phrase($rs->fields("Page_Title"))."". " &laquo; " . $Language->ProjectPhrase("BodyTitle");
				return;
			}
			$i++;
			$rs->MoveNext();
		}
		$rs->Close();
	} else {
		$CurrentPageTitle = $Language->ProjectPhrase("BodyTitle");
	}
}
  12. Open your /Script/phpcommon-scripts file, and find this code:

    // Page main
$<!--##=sPageObj##-->->Page_Main();
?>

    then replace it with this following code:

    // Page main
$<!--##=sPageObj##-->->Page_Main();
getCurrentPageTitle(ew_CurrentPage());
?>
  13. Open your /Script/templates.php file, and find this code:

        <title><?php echo $Language->ProjectPhrase("BodyTitle") ?></title>

    then replace it with this following code:

        <title><?php global $CurrentPageTitle; echo $CurrentPageTitle; ?></title>
  14. Download this file (there are three files inside; they are: bc_bg.png, bc_separator.png), and home.png Extract them to your /Script/images/ sub directory of your current template. These three files are needed in order to display the breadcrumb style more beautiful and professional. Make sure you do not miss this step in order to display the breadcrumb properly.
  15. Updated on February 25, 2012: In order to support for multi language, you have to define/add all phrases that you had in your Page_Title field of breadcrumblinks table into your .xml language files that located in C:\Program Files\PHPMaker 8\languages folder.
    Define all of your breadcrumbs phrases before the following line in your .xml language files:

    </global>

    For example, one of your phrases in Page_Title field of the breadcrumblinks table is "Customers List", so define it into the english.xml file as following (just make the values in id and value are same for the simplicity):

    <phrase id="Customers List" value="Customers List"/>
  16. Re-generate all of your the relates script pages. Now the breadcrumb link should be displayed in the related page you defined in the breadcrumblinks table. Also, the current page title should be displayed in your title bar of your browser.

[/hidepost]

Comments

  2. Good Day.

    I did follow up all this instruction and applied all the necessary modification that must be done.

    my quesion will be how to call addnewbreadcrumb sp and on what particular script should i put this also the parameters to used. the instrucion on how to prepeare the sp and this is already done. missing part will be on the part on executing the SP

    • It depends on your database. In addition, you can add the code in your Page_Main() of your (for example) blankpage.php file.

      If you are using MySQL, you can use like the following code (for example):

      $rsb = $conn->Execute("CALL addnewbreadcrumb('Home','Customers','customerslist.php')");
if ($rsb->RecordCount()==0) {  
  $this->setSuccessMessage("Breadcrumb link has been successfully added.");
} else {
  $this->setFailureMessage("Failed. Please check your data.");
}

      If you are using SQL Server, you can use the following code (for example):

      $rsb = $conn->Execute("EXEC addnewbreadcrumb('Home','Customers','customerslist.php')");
if ($rsb->RecordCount()==0) {  
  $this->setSuccessMessage("Breadcrumb link has been successfully added.");
} else {
  $this->setFailureMessage("Failed. Please check your data.");
}

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Demo Website

Another Demo

The following template are not available in this site (must be purchased separately)

Demo Explanation

Stock Inventory Management is the good project for your reference, since it uses the real example in the real world. Many useful features you can use from this project, such as how to add the Thousand and Decimal separator character, and also how to calculate multiple row in Grid-Add when End-Users are entering data into the Grid-Add mode.

Categories

Articles based on version

Loading...