Mixing PHP and Javascript

Page 1 of 1

0 Replies - 15557 Views - Last Post: 09 June 2008 - 08:40 PM

#1 akozlik  Icon User is offline

  • D.I.C Addict
  • member icon

Reputation: 90
  • View blog
  • Posts: 798
  • Joined: 25-February 08

Mixing PHP and Javascript

Post icon  Posted 09 June 2008 - 08:40 PM

This tutorial uses the deprecated mysql extension (as of PHP 5.5.0) which should not be used for writing new code as it will be removed in the future. The mysqli (MySQL Improved) or PDO extension should be used instead.

Nevertheless, it has been decided to keep this tutorial available until such time as it has been either updated or re-written. In the meantime, if you wish to take the tutorial, then it is recommended that you change the mysql-extension code to use mysqli or PDO. (If you do this successfully then perhaps you might consider submitting a revised tutorial, contributing to dream.in.code and earning some Kudos!)

I figured I'd take a break from my marathon coding session and write a quick tutorial. Being behind schedule sucks.

This tutorial will teach how to mix PHP with Javascript. We are going to build a javascript that sets a few image.src variables based on image locatoins you have saved in your database. You could do a lot with this script if you add it to something else you're working on. By itself it won't do anything, but it's got potential for image galleries, which is what I use it in.

Sing along if you know it!

Have you ever needed to generate some Javascript that is based on values that are stored in your database? Some people may not know this, but you can use PHP to generate that Javascript! Since PHP is a server side language, and Javascript is client side, you can create the Javascript and have it run in the browser. Lets look at the following code.

We are going to assume you have a table named 'images' and has a field named 'filename' which holds the filename of the image.

// Step 1
$sql = "select filename from images where filename != ''";
$result = mysql_query($sql) or die ( mysql_error() );

// Step 2
$filenames = array();

// Step 3
while ($row = mysql_fetch_array($result)) {
     array_push($filenames, $row['filename'];

// Step 4
echo "<script language='Javascript' type='text/javascript'>\n";

// Step 5
for ($i=0; $i < sizeof($filenames); $i++) {
     echo "image" . $i . " = new Image();\n";

// Step 6
echo "\n";
for ($i=0; $i < sizeof($filenames); $i++) {
  echo "image" . $i . ".src = 'images/" . $filenames[$i] . "';\n";

Step 1:
We build our sql statement. You can change up the where clause to match your needs.

Step 2:
We create a new array named 'filenames' to store all the filenames from the database. This will keep us from needing to make multiple calls to our database, saving on server resources.

Step 3:
We loop through our sql result and pull each returned filename and push it into our 'filenames' array. If you have filenames 'dog.jpg', 'cat.jpg', 'bird.jpg' in your table, you will end up with an array like

$filenames = array ('dog.jpg', 'cat.jpg', 'bird.jpg');

But I digress.

Step 4:
We print out our <script> tag. Notice the '\n' new line at the end of the string. This will print a newline in our source code which will be great for debugging our source. Remember that you can add escape characters to format your html source code. If you didn't add these characters you would get one giant string of php generated source code.

Step 5:
We run a loop that is the length of the size of our filenames. We create a new Image() object for each image in our database. If you have 3 files in your database you'll get the result

image0 = new Image();
image1 = new Image();
image2 = new Image();

Step 6:
We put out another newline character. Again, we loop through the filename array and touch each element in the array. We then print out the source location for each image. Your result would be

image0.src = 'images/dog.jpg';
image1.src = 'images/cat.jpg';
image2.src = 'images/bird.jpg';

Do you see what we've done here? We've generated javascript code based on the contents of your database! This is very helpful if you wish to do something like an image gallery. You could then use the imagex.src variable to pull the image into your script.

Hopefully that makes sense. If anything, you now understand that you can create javascript with your PHP skills. Hopefully this will save you some time on a project and will help open up new opportunities to create various applications. As always, comments, suggestions and insults are welcome. Good luck with whatever your next project is!

This post has been edited by andrewsw: 30 January 2015 - 12:25 PM

Is This A Good Question/Topic? 0
  • +

Page 1 of 1