XML Guestbook
with PHP
         by Arjen Gosman aka Flashmatazz: 18 april 2004

Actionscript explained
I'm not going to explain every singe line of actionscript, beause a lot of it speaks for itself. Instead, I'm going to focus on the main functionality of the guestbook, namely the XML.sendAndLoad() function which has the following usage (taken from the Flash Actionscript dictionary):

myXML.sendAndLoad(url,targetXMLobject)

This method encodes the specified XML object into a XML document, sends it to the specified URL using the POST method, downloads the server's response and then loads it into the targetXMLobject specified in the parameters. The server response is loaded in the same manner used by the load method.

Now what does this mean exactly? Obviously it means that we need two XML objects in our script: the object that is sent to the specified URL - which in our case is a PHP script - and a target object that receives data back from this PHP script. The following lines create those two XML objects:

myXML = new XML();
myXML.ignoreWhite = true;
receiverXML = new XML();

Our guestbook.xml file initially is loaded into the myXML object. After it has been successfully loaded the showXML() prototype is called:

if (success){
this.showXML();
}

This prototype fills our main textfield with the data from the XML file, starting with the last entry that has been added to the guestbook. It only shows the number of entries that are defined in the variable showAmount, defined in line 2, which in our case equals 10:

var showAmount = 10;

We also want to keep track of the number of pages we need for all of our guestbook entries. Let's say we have 12 entries and only want to show 10 per page. Obviously our entries should then be divided over 2 pages. The currPage variable is used for this, together with the firstItem and lastItem variables. The first item we'd like to see is entry #12, the entry that was last added to the guestbook. So:

var firstItem = numItems - (currPage*showAmount);

and because currPage initially equals 0 (the first page) this gives us:

var firstItem = 12 - (0*10); // equals 12

the last item shown on this page should then ofcourse be 12 minus 10 = 2 which is done by:

var lastItem = firstItem - showAmount ;

Further, we don't want the previous button to be visible when we're already viewing the first page so therefore:

if (currPage == 0) previous._visible = false;

Now, if we press the next button, the currPage variable is increased by 1. After this, the showXML() function is called again. Now firstItem will equal 2:

var firstItem = 12 - (1*10); // equals 2

Subsequently, lastItem will equal 2 - 10 = -8. Obviously, in such a case where the last page would not contain the amount of entries as defined in the showAmount variable, if we would only write:

var lastItem = firstItem - showAmount ;

we'll end up with a negative value for lastItem which would mess up the for-loop that fills our textfield. Therefore we also need the following, which sets lastItem to 0 and also hides the 'next' button when viewing the last page.

if (lastItem<=0) {
lastItem = 0;
next._visible = false;
}

Having said all this, I think it will be quite clear what the previous.onRelease and next.onRelease event handlers do.

Intermezzo: the XML file
So how exactly is the XML file setup? We start out with an 'empty' file, meaning that there are no guestbook entries yet. The file looks like this:

<?xml version="1.0"?>
<guestbook>
</guestbook>

Actionscript continued
Now that we know how the XML file is setup and how the showXML() function works we come to the part where we want to add a message to our guestbook. By clicking the "add a message" button, the createMessage movieclip becomes visible. After filling out the name and message fields and clicking the send button, the following happens:

  1. The values from the two input textfields are assigned to the variables myName and myMessage:

     

    var myName = this._parent.nameField.text;
    var myMessage = this._parent.messageField.text;

     

  2. The code checks if both textfields are actually filled out. If one of them is left blank an errormessage is shown in the errorField and the cursor is placed inside the empty textfield.

     

    if (myName == ""){
    this._parent.errorField.text = "please fill out your name";
    Selection.setFocus(this._parent.nameField);
    }
    else if (myMessage == ""){
    this._parent.errorField.text = "please leave a message";
    Selection.setFocus(this._parent.messageField);
    }

     

  3. If both fields are filled out (the else statement), a new <entry> node is added to the myXML object. Note that this node is added to myXML's firstchild, which is the <guestbook> node:

     

    myXML.firstChild.appendChild(myXML.createElement("entry"));

     

    The myXML object now looks like this:

    <?xml version="1.0"?>
    <guestbook>
    <entry>
    </entry>
    </guestbook>

  4. After that, a myName attribute is added to this new <entry> node and assigned the value of the myName input textfield:

     

    myXML.firstChild.lastChild.attributes.myName = myName;

     

    Resulting in:

    <?xml version="1.0"?>
    <guestbook>
    <entry myName="Flashmatazz">
    </entry>
    </guestbook>

  5. Then a new <myText> node is created as a childnode of the newly created <entry> node:

     

    myXML.firstChild.lastChild.appendChild(myXML.createElement("myText"));

     

    Giving us the following:

    <?xml version="1.0"?>
    <guestbook>
    <entry myName="Flashmatazz">
    <myText> </myText>
    </entry>
    </guestbook>

  6. A new text node, containing the value of the myMessage input textfield is added to this newly created <myText> node:

     

    myXML.firstChild.lastChild.appendChild(myXML.createElement("myText"));

     

    which finally gives us:

    <?xml version="1.0"?>
    <guestbook>
    <entry myName="Flashmatazz">
    <myText>Here goes the text that the user wrote in the message textfield </myText>
    </entry>
    </guestbook>

  7. And now, finally, this updated myXML object is sent to the PHP script which resides on the server:

     

    myXML.sendAndLoad("processXML.php", receiverXML);

     

Curious about how this PHP script looks like? Read about it on the last page.

 

 

 




SUPPORTERS:

kirupa.com's fast and reliable hosting provided by Media Temple.