I created a page based on the technique I outlined in my earlier post about a simple CMS with PHP and Javascript serving static pages – it’s a recipe book app (I’ve always wanted to create one, I love food and cooking and I’m pretty opinionated about them), and it also demonstrates the technique pretty well. It’s a work in progress, so don’t expect great content just yet. That takes time, which I don’t have a lot of right now.
So I’m playing with PHP (it’s not so bad, but I’m not convinved its performance is up to the uses I’m seeing it put to), and I’ve thought of a cool way to do simple content management with Ajax and static pages. I don’t know if this is a common technique, but I think it would be useful in some situations. I created a top level page with a div area that I want to paste content into, and use PHP to scan a directory looking for subdirectories that start with a specific pattern (in this case “r_”), and create a menu item for each one found. For each of these I create a link to a javascript method to load a file called index.php from that directory. It’s kind of like using frames, but a lot cleaner. I never really liked frames anyway. And it’s really easy to add new items – I just add a new subdirectory containing an index.php with the content of the second div. I can also add links to other directories get loaded teh same way but that don’t get displayed in the menu. The code follows:
I’ve build a simple page with two div areas, the first contains the PHP code to scan the directory, the second will be used to display the dynamic content:
<body>
<div id="menu">
//root path containing CMS items as sub-directories
$path = ".";
//open the directory
$dir_handle = @opendir($path) or die("Unable to open $path");
//loop through directory entries
while ($file = readdir($dir_handle))
{
if (strstr($file, "r_"))
{
$file=substr($file, 2, strlen($file)-1);
echo "$file
";
}
}
//close the directory
closedir($dir_handle);
</div>
<div id="content">
</div>
And the following javascript:
//synchronous javascript request handler
function sJax (url) {
if (window.XMLHttpRequest) { // Mozilla, Safari,...
http_request = new XMLHttpRequest();
} else if (window.ActiveXObject) { // IE
try {
http_request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
http_request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
}
if (!http_request) {
alert("SJAX action failed.");
return false;
}
http_request.open('GET', url, false);
http_request.send(null);
if(http_request.status == 200) {
return http_request;
} else {
return null;
}
}
function load(url)
{
document.getElementById("content").innerHTML = sJax(url).responseText;
}
function loadlink(link)
{
var url = link + '/index.php';
load(url);
}
function loadDir(path)
{
var url = 'r_' + path + '/path.php';
load(url);
}
My old MacBook has served me well for several years now, but I think it’s time to upgrade. The power cord is looking a bit ropey (it needs twisting to get the juice running). I also need to be able to run VMWare (a new project requires me to host a linux VM image to develop against, a very cool idea). I need more speed and storage. And I want a shiny new computer. So I ordered a new MacBook Pro today from Amazon – with Prime membership and same day delivery it will arrive this evening. Incredible.
Update – yes it’s very cool. Amazingly fast. Love it.
I’ve just discovered I’m going to have to work in PHP for a while. Quite a shock – I’m not quite sure what PHP even is, beyond the fact that it’s a scripting language. All the examples I can find for it use it to generate dynamic HTML, but the job I’ve got requires it for back end processing type things. And I can’t argue with their choice of language because the people who will inherit this only use PHP. Looks like I’m in for a fun time.