Dynamic Javascript or CSS in PHP

We 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>
or
<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');

or

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

This article was posted by David
the Tuesday 15 January 2008 at 20:16
in the category HTML & CSS, PHP with tags: Javascript, Menu, PHP. You can leave an answer, or backlink from your own website.