HomePHP Page 2 - PHP and JavaScript Interaction: Storing Data in the Client, part 1
Lord of the Arrays - PHP
Modern websites demand heavy interaction between server-side and client-side programming. In the first part of this article series, we will implement a simple mechanism to make PHP and JavaScript interact, creating a function which can build an array structure and store information in it. It will allow for programmatic data manipulation without server interaction.
Historically, one of the most common methods employed by developers to store data in the client for faster processing, is the use of JavaScript arrays. This aproach has been used for years in diverse aplications, where PHP generates the necessary code to create a JavaScript array structure and stores data either from files or, more infrequently, from database records. Let's consider, for instance, the following example, which shows a rough approximation to populate a JavaScript array with database information:
<script> var rows=[]; <?php $db=mysql_connect('dbhost','username','password') or die('Error connecting to the server'); mysql_select_db('mydatabase') or die('Error selecting database'); $result=mysql_query('SELECT * FROM mytable') or die ('Error performing query'); while($row=mysql_fetch_array($result, MYSQL_ASSOC)){ ?> rows[rows.length]=<?php echo '"'.$row['name'].'"'?>; <?php } ?> </script>
In the above example, we're declaring a JavaScript "rows" array. We then use interspersed, procedural PHP code to connect to the MySQL server, extract some records from a sample table, and finally store the contents of a hypothetical "name" table field in the array. Despite the fact that the aproach is quick and dirty, it shows in a nutshell that storing server data using a PHP - JavaScript interaction is really simple.
Before I hear the loud and well-intended complaints resounding in my ears, let me say that there are serious drawbacks with this technique. First, we're mixing up PHP code with JavaScript, which may lead to undesirable bad coding habits. The second pitfall is rather obvious: what if our harmless, simple database table contains thousands of records to be displayed? Well, there may be a few upset visitors out there, watching their browsers crash. That's definitely not a very good situation!
However, the topic is not as unfavorable as it seems. There are cases where we can take advantage of JavaScript arrays to build up a less demanding application, which hopefully will run smoothly in the client's computer, avoiding unnecessary requests to the server. That sounds fairly good, doesn't it?
But before working directly with arrays, we need to address a key issue. Since we don't want to mess up our code by mixing PHP and JavaScript, we're going to keep them in separate layers, creating a PHP function that will take care of generating the corresponding JavaScript arrays, but maintaining the rest of the code pretty untouched. Also, this introduces an extra benefit. Having a generic function that creates JavaScript code and returns the proper arrays is quite portable for use in applications with this kind of client requirement. The subject is really promising. So, let's start defining the PHP function to generate the JavaScript arrays.