Quick & Easy JavaScript/PHP CMS

I needed to create a website where I could update multiple pages worth of content remotely. It’s a travel blog. I could use WordPress to do this out of the gate, but I wanted to get away from the whole commoditized theme look and feel. Something where I have more control without customizing a lot.

So I created a site structure with multiple pages (one per travel day – ahead of time). Each of those PHP pages has a PHP include for the guts of the content for that day. For example

 <?php include ('day_includes/day_12.php'); ?>

Easy peasy. That PHP file contains HTML of the contents. So for each day there is a file to include. Each one could contain a lot of information, so I didn’t want to do run down the dynamic population route too far.

So that part is easy. What about editing/adding content to the PHP files remotely? Enter an admin page.

The admin page has a drop-down menu of all the PHP include files. The first one it automatically loaded into a textarea control. You can select different pages and load them into the textarea with some JavaScript.

function loadDay()
{
    var e = document.getElementById("days");
    var selectedDay = e.options[e.selectedIndex].value;
    var c = document.getElementById("content");
    c.innerHTML = "";
            
    setTimeout(function() {
        var timestamp = +new Date;
        var file = "day_includes/" + selectedDay + "?time=" + timestamp;
        $( "#content" ).load( file );
    }, 500); 
}

Easy too. However JavaScript can’t write back to the files, so we POST the text to a PHP script page and that writes to the file (filename and contents are posted).

function saveDay()
{    
    var e = document.getElementById("days");
    var selectedDay = e.options[e.selectedIndex].value;
    var fileNameToSaveAs = "day_includes/" + selectedDay;            
    var enteredText = $('#content').val();

    $.ajax({
        url:'post_data.php',
        type: 'POST',
        data: {'data':enteredText, 'fileName':fileNameToSaveAs },
        success: function(data) {
            alert(data);
        },
        error: function(data) {
            alert("There may an error on uploading. Try again later");
        },
    });  
}

Easy again. The PHP script takes the variables and uses them to save the data. So with a little PHP and a little JavaScript, we have a CMS system. It’s not robust but rather lightweight. And I have full control over all aspects of how things look, feel, and operate.

Something to consider to avoid the continued WordPress onslaught.