Tuesday 15 Jan 2008

Dynamic Javascript or CSS in PHP

PHPWe often think PHP can only create HTML web pages, but it's of course possible to create all sorts of textual contents: Javascript files, CSS or XML (including RSS feed) but also images or PDF files.

We will maybe see the rest in another article, let's start with Javascript or CSS.

Imagine I want to create a Javascript drop-down menu, I can for example, take the multi-level menu freely distributed on Dynamic Drive.
This menu is made of 2 .js files: the one containing the fonctions, the other texts to place in the meny with their depth level. There are muddled Javascript tables:

Menu1=new Array("Home","http://www.dynamicdrive.com","",0,20,138);
Menu2=new Array("News","blank.htm","",2);
Menu2_1=new Array("General","blank.htm","",5,20,150);
Menu2_1_1=new Array("CNN","http://www.cnn.com","",0,20,150);
Menu2_1_2=new Array("ABCNews","http://www.abcnews.com","",0);
Menu2_1_3=new Array("MSNBC","http://www.msnbc.com","",0);
        Menu2_1_4=new Array("CBSNews","http://www.cbsnews.com","",0);
        Menu2_1_5=new Array("Canadian News","http://news.bbc.co.uk","",2);
             Menu2_1_5_1=new Array("Vancouver Sun","http://www.vancouversun.com","",0,20,150);
             Menu2_1_5_2=new Array("CTV News","http://www.ctvnews.com","",0);
Menu2_2=new Array("Technology","blank.htm","",3);
Menu2_2_1=new Array("TechWeb","http://www.techweb.com","",0,20,200);
Menu2_2_2=new Array("News.com","http://www.news.com","",0);
Menu2_2_3=new Array("Wired News","http://www.wired.com","",0);

Ny generating all this in PHP, we can easily build some loops to read content in a database.

We create a menu.js.php file which will write this code automaticaly. This file may contain the database connection, category extraction, and some variables $i, $j to increase the depth level.

Menu<?php echo $i++; ?>=new Array("<?php echo $titre; ?>","http://<? echo $url; ?>","",0,20,138);

The goal is to rebuild in PHP the same content we would manually write, but reading category from a database. For example, this is the case in this strass accessory shop, the source code learn us
<script type='text/javascript' src='../scripts/menu_dyn.js.php'></script>

We can of course imagine a lot of other uses, and especialy in CSS where by this way we can make administrators or users choose the website colors. Then the dynamic CSS will read the color preferences in the database to build the website appearence.

The right thing to do is to precise the file type to send. The header() PHP function allows to indicate the MIME type of the file. It allows the navigator to immediatly identify the kind of data.

We easily find the .css and .js files MIME type because we write it each time we call them in HTML:

<script type="text/javascript" src="javascript.php"></script>
<link rel="stylesheet" type="text/css" href="css.php" />

So our PHP file header (it means before sending text):
header ('Content-Type: text/javascript; charset=utf-8');


header ('Content-Type: text/css; charset=utf-8');

cafĂ© Did this article help you? 
Buy me a coffee!

3 answers at “Dynamic Javascript or CSS in PHP”

  1. Backlink from javascript
  2. Backlink from Images in PHP with GD2 - Azure Dev
  3. Backlink from Javascript comments check - Azure Dev

Leave a comment (all comments are moderated, don't waste time with spam)

Azure Dev