Adding YUI Dialog Box of “Logout Confirmation” into Websites that Generated by PHPMaker 9.1.0

For those of you who have been implementing the customization in the article I wrote titled How to Customize Header and Footer in Websites that Created with PHPMaker 9.0.1, then you should see that there is a Logout link that located in the header of your web application. When this link is clicked by your web application users, then there is a Javascript confirmation shown up with OK and Cancel button that asking your users whether want to logout or not. Unfortunately, those two button caption cannot be translated into other languages; always using text in English all the time.

This following customization below will replace that Javascript confirmation with YUI Panel Widget confirmation message, which has two buttons: Yes and No. In addition you will see more professional and more beautiful dialog box and buttons, those two button caption also can be translated into your languages, especially if you are using multi language feature in your web application. Actually, this is my experiment results after playing with the YUI Panel Widget component. Fortunately, PHPMaker always using this YUI until now, so no need to configure anything again.

Warning and Important: Please note that before doing customization below, then you have to implement the customization in the article I mentioned above.

Updated on February 10, 2013: This customization has been implemented in PHPMaker version 9.2.0, it matches to each other, and as a result, it works properly.

Updated on June 17, 2013: This customization below has been handled by using MasinoHeaderFooter extension. You don’t need to implement the customization below if you use my extensions together with the original PHPMaker Template and Extension files.

[hidepost]

1. Open your \Script\template.php file, and find this code:

   </head>
   

   before that line, please insert the following code:

   <?php
   $asktologout = $Language->Phrase("AskToLogout");
   $yes = $Language->Phrase("Yes");
   $no = $Language->Phrase("No");
   ?>
   <script>
   YAHOO.namespace("logout.container");function init(){YAHOO.logout.container.ask=new YAHOO.widget.SimpleDialog("ask",{width:"300px",fixedcenter:true,visible:false,draggable:true,close:true,modal:true,text:"<font style='color: black; text-align: center;'><?php echo $asktologout; ?></font>",icon:YAHOO.widget.SimpleDialog.ICON_HELP,constraintoviewport:true,buttons:[{text:"<?php echo $yes ?>",handler:function(){window.location="logout.php";this.hide();this.destroy()}},{text:"<?php echo $no; ?>",handler:function(){this.hide()},isDefault:true}]});YAHOO.logout.container.ask.setHeader("Logout");YAHOO.logout.container.ask.render("container");YAHOO.util.Event.addListener("logout","click",YAHOO.logout.container.ask.show,YAHOO.logout.container.ask,true)}YAHOO.util.Event.addListener(window,"load",init);
   </script>
   

2. Still in that \Script\template.php file, find again this code:

   [ <a onclick=\"return ew_Confirm('".$Language->Phrase("AskToLogout")."');\" href=logout.php>Logout</a> ]
   

   then replace it with the following code:

   [ <a id=\"logout\" href=# onclick=\"MGJS.goTop();return false;\">Logout</a> ]
   

3. Make sure you have already had the following code in that \Script\template.php file:

   <div class="ewFooterRow" id="container">
   

   if so, then skip this step, but if not, then replace the following code:

   <div class="ewFooterRow">
   

   with the previous code above.

   This is very important, since this YUI Panel Widget dialog box depends on the container id.

4. Also, don't forget to add the following phrases into your C:\Program Files\PHPMaker 9\languages\english.xml file:

   	<phrase id="Yes" value="Yes"/>
   	<phrase id="No" value="No"/>
   

   before the following code:

   </global>
   

5. Finally, re-generate your script files using PHPMaker as always.

[/hidepost]