I’m currently creating a movie review website in PHP an SQLite. I’m taking a very object orientated approach.

For example, all database access goes through an object. Adding a review is as simple as calling a function with the proper data.

Here is the function header:

addReview($assocArrayReviewData, $assocArrayReviewBlockData)

Each parameter is an associative array that corresponds to fields in the database. While I don’t want to get into too much detail, the second variable is actually an array of arrays, where each one holds a block of review information (eg: “What the box says”, “funny quotes”, “My thoughts”).

The best thing about is is that once I create the administration interface I can just call that one function with the correct parameters and bam, a new review.

The class also has a built-in search function (that could be used on the internal or external site).

My next class that I created for primarily for the administration area. It’s an html tag class object. You might me thinking, what’s the point of mimicking html tags? Well in my never ending quest to separate html from code, this object can be instantiated instead of writing html dispersed through the script code. Please forgive me on the naming. I’m not quite sure what to call the class yet. I first called a “form” class, then a “control” class, and then once I realized it could be used for anything… the “htmlTag” class. Well anyways, it does what I want it to do regardless of what it is called.

Here is a quick example of code that would call it:

$test = new HtmlTag('test', 'form');
$test->setAttribute('method', 'post');
$test->createSubControl('button1', 'input');
$test->subControl('button1')->setAttribute('type', 'button');
$test->subControl('button1')->setAttribute('value', 'Click Here!');
echo $test->toHtml();

Any idea what it does?

It creates this:

Pretty cool, eh? The whole class is a beefy ~220 lines. haha
Now I can create forms programmatically that can have an unlimited number of parent/children/sub-children to them. So a form can hold a select box, that holds option tags… etc.

Here is a bit of the class file:

class HtmlTag
{
    //strings:
    private $controlType; //stores the type of control (this should correspond to an actual html tag)
    private $innerHtml; //hold any text or whatever inside the control's start and end tags
    
    //associative arrays:
    private $attributes; //hold all of the attributes of the control (eg: onsubmit='' onclick='' style=''...)
    
    private $subControls; //holds sub controls (eg: form has controls inside it, select control has options inside it)

..................

 function &subControl($name)
 {
     return $this->subControls[$name];
 }

}
    

The subControl function is key to accessing children and sub-children of the main object. I wanted to keep the array subControls private, so that function is necessary.

Now that I have that class created I will start designing the administration interface, that now, is just a shell that accesses these two classes.

As I mentioned in the previous post, I made a static website in html, css, javascript, and json. It works pretty good and that’s great. The problem is my sister is the one who should be adding/editing content because it is her site. So the question is, how can I make an easily update-able site that is on a server without any server-side coding functionality?

I had figured out pretty much how I wanted it to work even before I finished coding the first version of the site. Sure, I could just write a client application that spits out html\css code and uploads it to the server, but no, that isn’t cool enough.

I wanted to break up the site data and formatting. That way the client application would only need to create json files and upload them along with any new content.

That means the json data needs to be removed from the html files and the html page now needs to allow fetching of the data whenever the person using the site needs it. What does this mean? It means that I now have a site that is comprised of: index.htm, a css file, and a javascript file. This is pretty much the whole website (not including the json files)! How can this be possible? Thank our new friend ajax (Asynchronous JavaScript and XML). What that does is allow javascript code to fetch data from the server (in my case text files containing json data) when the user does some type of action.

Lets get on to a few examples, shall we!

The whole index page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
 <link rel="stylesheet" type="text/css" href="sapphirearts.css" />
 <script src="sapphirearts.js" type="text/javascript"></script>
</head>

<body onload="getJsonFromServer('links.json', 'init');">
<div id="divcontainer">
 <div id="divbanner"></div>

 <div id="divlinks"></div>

 <div id="divbody">
   <div id="divbodycontent"></div>
 </div>

 <div id="divfooter"></div>
</div>
</body>
</html>

What happens when this page is loaded on to a client computer? The javascript function getJsonFromServer() is called. This function downloads a block of json data that defines the main links for the site. Pretty cool, eh? When you click one of these main links, they call getJsonFromServer() again, but with different parameters and ends up filling the content area of the page.

function getJsonFromServer(filename, newstate)
{
 xmlHttp = getXmlHttpObject();

 if (xmlHttp != null){
   currentState = newstate; // save the state so we can process it later
   xmlHttp.onreadystatechange = stateChanged;
   xmlHttp.open("GET", filename, true);
   xmlHttp.send(null);
 }
}

Which relies on the function:

function getXmlHttpObject(){
 var objXMLHttp = null;

 if(window.XMLHttpRequest){
   objXMLHttp = new XMLHttpRequest();
 } else if(window.ActiveXObject){
   objXMLHttp = new ActiveXObject("Microsoft.XMLHTTP");
 }

 return objXMLHttp;
}

The getXmlHttpObject() function needs to execute different functions based on what bowser the user is using. Just one of the multitude of problems getting cross browser compatibility.