HomePHP Page 5 - PHP and JavaScript Interaction: Storing Data in the Client, part 1
Getting practical: putting the "createJavaScript()" function into action - 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.
In order to see the practical uses of our newly developed function, let's create an example to illustrate its functionality. Say we need to read information from a simple text file that contains some information about music albums, and store that data in a JavaScript array, which will be processed at later time. Our "album.dat" file might look as simple as this:
Tales of Mystery and Imagination The Best of The Alan Parsons Project I Robot Eye In The Sky The Turn of a Friendly Card Stereotomy The Definitive Collection Vulture Culture The Instrumental Works Pop Classics
Now, we can call our function in the following way:
echo createJavaScript('album.dat','album');
That's really simple, right? In this example, we've invoked the function to read data from our "album.dat" file, specifying that the information has to be stored in a JavaScript array named "album." So, what's the point of that? Well, if we take a look at the document source code, we find that the function has nicely created the array structure, storing each file line as array elements, as listed below:
<script> var album=[]; album[0]="Tales of Mystery and Imagination"; album[1]="The Best of The Alan Parsons Project"; album[2]="I Robot"; album[3]="Eye In The Sky"; album[4]="The Turn of a Friendly Card"; album[5]="Stereotomy"; album[6]="The Definitive Collection"; album[7]="Vulture Culture"; album[8]="The Instrumental Works"; album[9]="Pop Classics"; </script>
I think that you understand now the capabilities of the function. With a few lines of code, the data is now available to us in a JavaScript array. Undoubtedly, we're really storing data in the client. Let's think about its possible uses and build an application to manipulate this data, without loading the server with unnecessary requests.
Summary
In this first part of this series, we've implemented a simple mechanism to make PHP and JavaScript interact, creating a function which, once fed with a data source (i.e. files of database records), builds an array structure and stores the information in it. This allows for programmatic data manipulation without server interaction.
However, we must be fair about this method and show its pitfalls too. The major issue is, definitely, its strong dependence on JavaScript. The second problem is the limited amount of stored data allowable in the client's machine, without compromising the system's stability.
However, despite its weaknesses, the method is still viable for small applications, possibly in intranet environments, where we work with controllable client factors such as scripting enabled or specific hardware requirements. But there are a couple of uses to be reviewed yet. In the second part of this tutorial, we'll use our recently developed PHP function to build a file-based JavaScript ticker, in order to show a real application. In the meantime, take your time and have some fun playing with the code. See you in the next part!