Developer

JavaScript behaviors within PHP

JavaScript and PHP may each bring great potential to any Web development effort, but they don't always play nice together. Read about the problems one member encountered while writing a PHP script for a portal site?and then see how he solved them.


Both JavaScript and PHP are popular tools for the Web developer, but putting them together may be less straightforward than you might think. While writing a PHP script for a portal site recently, my team ran into an interesting issue trying to integrate external JavaScript files and PHP. I’ll start by explaining the problem we ran into trying to integrate the two; then, I’ll how you how we worked around it.

The problem
The task at hand was to display information from a database within a JavaScript/DHTML slide-out menu system that displays multiple messages, but not simultaneously. This usually means doing something like the following to insert variable data into HTML using JavaScript and PHP:
<?
//  get $variable from database…
?>
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript1.2">
  alert('Your score is <? echo "$variable" ?> . Thank you for playing.');
</SCRIPT>
</HEAD>
<BODY>
Main text here…
</BODY>
</HTML>

However, the slide-out menu system code was in an external JavaScript source file. You can’t just add PHP code to that file, because it has a ".js" extension. And PHP wouldn't recognize files without the .php extension.

Here is the original HTML and JavaScript source:

menu.html
<HTML>
<HEAD>
<SCRIPT SRC="abc.js" LANGUAGE="JavaScript1.2"></SCRIPT>
</HEAD>
<BODY>
Main text here…
</BODY>
</HTML>
 

abc.js
    j = 23;
    k = 13;
    alert('You have ' j + k ' items in your box');
    // more code here

Learn more about PHP
Check these past articles for more information about PHP:

The workaround
We wanted to keep the JavaScript source code in a separate file, but we wanted to be able to use PHP so that we could update variables j and k through values stored in a database. This is how we would display the various messages in the database from an interface on the administrative side.

The solution required several steps:
  • We renamed menu.html to menu.php so that we could insert PHP variables as needed.
  • We renamed the external JavaScript source file from abc.js to abc.php so that we could use PHP code within it.
  • We modified abc.php to include the database call and put HTML SCRIPT tags before and after the JavaScript code.

Then, since we were making this a PHP file instead of an external JavaScript source file, we needed to include the SCRIPT tags as would be done in the main HTML file.

abc.php
  <?
    mysql_connect ("localhost", "user", "password");
    $result = mysql_db_query ("database","select * from ItemTable");
    while ($row = mysql_fetch_array ($result)) {
     $j = $row["Item1"];
      $k = $row["Item2"];
    }
    mysql_free_result ($result);
  ?>
  <SCRIPT LANGUAGE="JavaScript1.2">
     alert(' You have <? echo $j+$k ?> items in your box');
     // more JavaScript code here
  </SCRIPT>

Instead of using the following within menu.php:
     <SCRIPT SRC="abc.js" LANGUAGE="JavaScript1.2"></SCRIPT>

we changed it to:
     <?php include("abc.php") ?>

Now we had included an external PHP file rather than an external JavaScript file.

Putting it all together
The completed script came together this way:

menu.php
<HTML>
<HEAD>
  <?php include("abc.php") ?>
</HEAD>
<BODY>
Main text here…
</BODY>
</HTML>

abc.php
  <?
    mysql_connect ("localhost", "user", "password");
    $result = mysql_db_query ("database","select * from ItemTable");
    while ($row = mysql_fetch_array ($result)) {
      $j = $row["Item1"];
      $k = $row["Item2"];
    }
    mysql_free_result ($result);
  ?>
  <SCRIPT LANGUAGE="JavaScript1.2">
     alert(' You have <? echo $j+$k ?> items in your box');
     // more JavaScript code here
  </SCRIPT>

This allowed us to dynamically use data from a database rather than statically use data within the code. The only changes we had to make to our JavaScript source file were to change the extension to .php and then put:
<SCRIPT LANGUAGE="JavaScript1.2">

before the JavaScript code and:
</SCRIPT>

after it. Then, in main.php, we used a PHP include rather than an external source SCRIPT tag.

I hope that this gives you a quicker solution to an issue that will come about when integrating PHP with other Web-based languages. Even though DHTML is a great way to create exciting menu animation, it takes a little bit of tweaking to add the power of PHP and database expandability.

Editor's Picks