I Love PHPMaker

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

I Love PHPMaker » Tips and Trick » A Case Study: Inserting Calculator Javascript in Websites that Generated by PHPMaker 9.2.0

A Case Study: Inserting Calculator Javascript in Websites that Generated by PHPMaker 9.2.0

Sometimes, you want to display the calculator for your web application's users in order to help them to calculate the certain value while adding or editing data. That would be better to show the calculator in the same page while they are working, so they don't need to open any other calculator programme.

This following trick will show you how to insert a calculator javascript into websites that generated by PHPMaker. After implementing this trick, then there will be a new icon appears on the right of the certain field (let's say Price field), and when this icon is clicked, the calculator will be displayed at the bottom section of the page. Users then will be able to calculate any maths operations by using that calculator.

We will not modify any generated script files for this. We will optimize the Server Events and Client Scripts features in PHPMaker, and we're ready to go! Again, this will prove that PHPMaker gets even more powerful, yet flexible.

In this example, let's say we will add the calculator in Add and Edit pages that belong to products table. In Edit page, you will see that when you open the calculator, the default value on the textbox will be derived from the Price field. You will also learn and practice how to optimize Server Events and Client Scripts in PHPMaker at the same time.

[hidepost]

  1. Open your PHPMaker project (.pmp) file using PHPMaker.
  2. Create a new javascript (.js) file and save it as calculator.js, and put this file into your \Script\ unzipped template directory:

    calc_array = new Array();
var calcul=0;
var pas_ch=0;
function $id(id)
{
        return document.getElementById(id);
}
function f_calc(id,n)
{
        if(n=='ce')
        {
                init_calc(id);
        }
        else if(n=='=')
        {
                if(calc_array[id][0]!='=' && calc_array[id][1]!=1)
                {
                        eval('calcul='+calc_array[id][2]+calc_array[id][0]+calc_array[id][3]+';');
                        calc_array[id][0] = '=';
                        $id(id+'_result').value=calcul;
                        calc_array[id][2]=calcul;
                        calc_array[id][3]=0;
			document.getElementById("x_Importe").value=calcul;
                        document.getElementById("calculadora").style.display="none";
                        document.getElementById("transparencia").style.display="none";
                }
        }
        else if(n=='+-')
        {
                $id(id+'_result').value=$id(id+'_result').value*(-1);
                if(calc_array[id][0]=='=')
                {
                        calc_array[id][2] = $id(id+'_result').value;
                        calc_array[id][3] = 0;
                }
                else
                {
                        calc_array[id][3] = $id(id+'_result').value;
                }
                pas_ch = 1;
        }
        else if(n=='nbs')
        {
                if($id(id+'_result').value<10 && $id(id+'_result').value>-10)
                {
                        $id(id+'_result').value=0;
                }
                else
                {
                        $id(id+'_result').value=$id(id+'_result').value.slice(0,$id(id+'_result').value.length-1);
                }
                if(calc_array[id][0]=='=')
                {
                        calc_array[id][2] = $id(id+'_result').value;
                        calc_array[id][3] = 0;
                }
                else
                {
                        calc_array[id][3] = $id(id+'_result').value;
                }
        }
        else
        {
                        if(calc_array[id][0]!='=' && calc_array[id][1]!=1)
                        {
                                eval('calcul='+calc_array[id][2]+calc_array[id][0]+calc_array[id][3]+';');
                                $id(id+'_result').value=calcul;
                                calc_array[id][2]=calcul;
                                calc_array[id][3]=0;
                        }
                        calc_array[id][0] = n;
        }
        if(pas_ch==0)
        {
                calc_array[id][1] = 1;
        }
        else
        {
                pas_ch=0;
        }
        document.getElementById(id+'_result').focus();
        return true;
}
function add_calc(id,n)
{
        if(calc_array[id][1]==1)
        {
                $id(id+'_result').value=n;
        }
        else
        {
                $id(id+'_result').value+=n;
        }
        if(calc_array[id][0]=='=')
        {
                calc_array[id][2] = $id(id+'_result').value;
                calc_array[id][3] = 0;
        }
        else
        {
                calc_array[id][3] = $id(id+'_result').value;
        }
        calc_array[id][1] = 0;
        document.getElementById(id+'_result').focus();
        return true;
}
function init_calc(id)
{
        $id(id+'_result').value=0;
        calc_array[id] = new Array('=',1,'0','0',0);
        document.getElementById(id+'_result').focus();
        return true;
}
function key_detect_calc(id,evt)
{
        if((evt.keyCode>95) && (evt.keyCode<106))
        {
                var nbr = evt.keyCode-96;
                add_calc(id,nbr);
        }
        else if((evt.keyCode>47) && (evt.keyCode<58))
        {
                var nbr = evt.keyCode-48;
                add_calc(id,nbr);
        }
        else if(evt.keyCode==107)
        {
                f_calc(id,'+');
        }
        else if(evt.keyCode==109)
        {
                f_calc(id,'-');
        }
        else if(evt.keyCode==106)
        {
                f_calc(id,'*');
        }
        else if(evt.keyCode==111)
        {
                f_calc(id,'');
        }
        else if(evt.keyCode==110)
        {
                add_calc(id,'.');
        }
        else if(evt.keyCode==190)
        {
                add_calc(id,'.');
        }
        else if(evt.keyCode==188)
        {
                add_calc(id,'.');
        }
        else if(evt.keyCode==13)
        {
                f_calc(id,'=');
        }
        else if(evt.keyCode==46)
        {
                f_calc(id,'ce');
        }
        else if(evt.keyCode==8)
        {
                f_calc(id,'nbs');
        }
        return true;
}
&#91;/code&#93;
</li>

<li>
Open your <strong>\Script\control.xml</strong> file, and find this code:
[code lang="xml"]
	<!--
		Js
	 -->

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

    	<control id="calculator.js" type="copy" remark="Copy calculator.js" ofolderid="_js" ifiles="calculator.js" />
  3. Click on products table, and then click on Code (Server Events, Client Scripts and Custom Templates) tab. Expand the following location: Server Events -> Global -> All Pages -> Page_Head, then insert the following code into the code editor at the right pane:

    if (ew_CurrentPage() == "productsadd.php" || ew_CurrentPage() == "productsedit.php") {
  ew_AddClientScript("phpjs/calculator.js"); // Add JavaScript
}
  4. Make sure products table is still selected in your PHPMaker, expand the following location: Server Events -> Table-Specific -> Common -> Row_Rendered, and then insert the following code into the code editor at the right pane:

      if (CurrentPageID() == "add" || CurrentPageID() == "edit"){ // Just for add and edit page              
    $this->Price->CustomMsg = "<a href=\"#\" onclick=\"calculator()\"><img style=\"border: 0px;\" height=\"16px\" src=\"phpimages/calculator.png\" /></a>";
  }

    Please note, that you have to put your calculator.png image into the \Script\images template directory. Make sure you don't miss this step, otherwise, you will not see any image in the Edit and Add pages of the products table.

  5. Still in PHPMaker application, expand the following location: Client Scripts -> Table-Specific -> Add/Copy Page -> Startup Script, and then insert the following code into the code editor on the right pane:

    $(document).ready(function(){
   
   javascript:f_calc('calc','ce'); 
  
});

    function calculator (){
        document.getElementById("calculadora").style.display="block";
        document.getElementById("transparencia").style.display="block";
        init_calc('calc');
    }
    
    function cerrar (){
        document.getElementById("calculadora").style.display="none";
        document.getElementById("transparencia").style.display="none";
    }

    var current_key;

    document.onkeydown =
       function (e) {
       var current_key;
       if (document.all){
        current_key = event.keyCode;
        }else{
        current_key=e.which;
        }

        var teclas= /^(27)$/;

        if (teclas.test(current_key)) {
        if (document.all){
            event.keyCode = 0;
            event.returnValue = false;
            event.cancelBubble = true;
        }else{
        e.which=0;
        }
        
        if (current_key==27){
            document.getElementById("calculadora").style.display="none";
            document.getElementById("transparencia").style.display="none";
        }

        return false;
        }
        
      };

</script>

   <div id="calculadora" style="display: none;">
      <div id="tabla">
        <a href="javascript: cerrar();">Close</a>
        <table class="calculator" id="calc">
            <tr>
                <td colspan="4" class="calc_td_result">
                    <input type="text" readonly="readonly" name="calc_result" id="calc_result" class="calc_result" onload="javascript:f_calc('calc','ce');" onkeydown="javascript:key_detect_calc('calc',event);" />
                </td>
            </tr>
            <tr>
                <td class="calc_td_btn">
                        <input type="button" class="calc_btn" value="CE" onclick="javascript:f_calc('calc','ce');" />
                </td>
                <td class="calc_td_btn">
                        <input type="button" class="calc_btn" value="&larr;" onclick="javascript:f_calc('calc','nbs');" />
                </td>
                <td class="calc_td_btn">
                        <input type="button" class="calc_btn" value="%" onclick="javascript:f_calc('calc','%');" />
                </td>
                <td class="calc_td_btn">
                        <input type="button" class="calc_btn" value="+" onclick="javascript:f_calc('calc','+');" />
                </td>
            </tr>
            <tr>
                <td class="calc_td_btn">
                        <input type="button" class="calc_btn" value="7" onclick="javascript:add_calc('calc',7);" />
                </td>
                <td class="calc_td_btn">
                        <input type="button" class="calc_btn" value="8" onclick="javascript:add_calc('calc',8);" />
                </td>
                <td class="calc_td_btn">
                        <input type="button" class="calc_btn" value="9" onclick="javascript:add_calc('calc',9);" />
                </td>
                <td class="calc_td_btn">
                        <input type="button" class="calc_btn" value="-" onclick="javascript:f_calc('calc','-');" />
                </td>
            </tr>
                        <tr>
                <td class="calc_td_btn">
                        <input type="button" class="calc_btn" value="4" onclick="javascript:add_calc('calc',4);" />
                </td>
                <td class="calc_td_btn">
                        <input type="button" class="calc_btn" value="5" onclick="javascript:add_calc('calc',5);" />
                </td>
                <td class="calc_td_btn">
                        <input type="button" class="calc_btn" value="6" onclick="javascript:add_calc('calc',6);" />
                </td>
                <td class="calc_td_btn">
                        <input type="button" class="calc_btn" value="x" onclick="javascript:f_calc('calc','*');" />
                </td>
            </tr>
            <tr>
                <td class="calc_td_btn">
                        <input type="button" class="calc_btn" value="1" onclick="javascript:add_calc('calc',1);" />
                </td>
                <td class="calc_td_btn">
                        <input type="button" class="calc_btn" value="2" onclick="javascript:add_calc('calc',2);" />
                </td>
                <td class="calc_td_btn">
                        <input type="button" class="calc_btn" value="3" onclick="javascript:add_calc('calc',3);" />
                </td>
                <td class="calc_td_btn">
                        <input type="button" class="calc_btn" value="&divide;" onclick="javascript:f_calc('calc','/');" />
                </td>
            </tr>
            <tr>
                <td class="calc_td_btn">
                        <input type="button" class="calc_btn" value="0" onclick="javascript:add_calc('calc',0);" />
                </td>
                <td class="calc_td_btn">
                        <input type="button" class="calc_btn" value="&plusmn;" onclick="javascript:f_calc('calc','+-');" />
                </td>
                <td class="calc_td_btn">
                        <input type="button" class="calc_btn" value="," onclick="javascript:add_calc('calc','.');" />
                </td>
                <td class="calc_td_btn">
                        <input type="button" class="calc_btn" value="=" onclick="javascript:f_calc('calc','=');" />
                </td>
            </tr>
        </table>
      </div>
    </div>
<script type="text/javascript">
  6. Repeat the previous step also for the edit page (Client Scripts -> Table-Specific -> Edit Page -> Startup Script), afterwards, insert the following code:

      <?php
  for ($i=0; $i<strlen($products->Price->EditValue); $i++)
  {
    $schar = substr($products->Price->EditValue, $i, 1);
    if ($schar != ",") {
    ?>
    javascript:add_calc('calc', '<?php echo $schar; ?>');
    <?php
    }
  }
  ?>

    below this line:

       javascript:f_calc('calc','ce');
  7. Finally, re-generate your script files using PHPMaker as always.

[/hidepost]

Comments

  1. I am using the code. I can see the calculator but when I click on “=” at the calculator the field price is not changed. I am using PHPmaker 2017.

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