3.4.3 The "insertEntry" form.

A guestbook without an interface that allows users to insert their own entries is not a good guestbook. So let's add another keyframe or move to the next keyframe labeled "insertEntry" if you've already made it before. This frame should look like picture 3.9.

Picture 3.9

You can notice that it is a really simple form with the well known structure that I used in all the other forms I made before for this project. There is an instance of the insert_edit_message movieclip named insertMessage. Within this clip there are four Fading Cover Textbox instances and a simple multiline input textbox with a ScrollBar component instance attached and the respective labels on their left. the textboxes instance names are (from top to base): text1, text2, text3, text4 and text5. Two PushButtons instances, the error textbox and a back button complete the interface together with a label on the top of the movie that explains the user what the form is intended to. You can find all the code in the respective keyframe in the actions layer.
Let's look at it:

The first function makes a call to the previously defined checkText() function that I set in the "main" frame (do you remember? There were some function within an header that said "FORM CONTROL FUNCTIONS"): it checks if the inserted text is valid and returns it if it is, if it is not it returns an empty string.

            
function setValue(msg){
var value = checkText(msg); 
return value;
}
          

 

The postMessage() function (called by the postBtn button) validates the form and with a LoadVars() object sends data to the PHP script that will insert the new record into the iwe_gb_entries table. The onLoad event handler of the LoadVars() object is structured as usual, that is checking the succes argument and printing out the success sentence or an error. In case of a successful data loading, the script calls the showNewEntry() function.

            
function postMessage(){
for(var i = 1; i <= 5; i++){
var textBox = insertMessage["text"+i];
if(i < 5 && i <> 4){
var value = setValue(textBox.myText.text); 
textBox.myText.text = value;
setFadeOut(textBox, value);
}else if(i == 4){
var value = setValue(textBox.myText.text); 
textBox.myText.text = checkURL(value);
setFadeOut(textBox, value); 
}else textBox.text = checkText(textBox.text);
}

var insertNewMessage = new LoadVars();
insertNewMessage.name = insertMessage.text1.myText.text;
insertNewMessage.email = insertMessage.text2.myText.text;
insertNewMessage.homepage = insertMessage.text3.myText.text;
insertNewMessage.url = insertMessage.text4.myText.text;
insertNewMessage.entry = insertMessage.text5.text;
insertNewMessage.sendAndLoad("save_entry.php", insertNewMessage, 'POST');

insertNewMessage.onLoad = function(success){
if(success){
if(this.action != undefined){
setError(this.action);
intervalID = setInterval(showNewEntry, 1000);
}else if(this.error != undefined) setError(this.error);
}else{
setError("An error occured while sending or loading data"); 
}
};
}
          

 

The next function is called by the previous one if the data insert process was successful: in this case the program will go back to the "main" frame and will restart from the beginning (first page) as the last entry inserted is normally the first one to be displayed.

            
function showNewEntry(){
_global.lastRecordShown = 1;
_global.lastPageShown = 1;
_root.gotoAndStop("main");
clearInterval(intervalID);
}
          

 

The little backBtn button calls the goBack() function set in the main frame actions layer.

backBtn.onPress = goBack;

The click handler of the postBtn button is set.

postBtn.setClickHandler("postMessage");

As it won't be complete, I insert here a correction that I made in version 1.0.3 beta: in the current version (the one on which this tutorial is based on, the 1.0.1 beta) has not any cancelBtn button click handler defined. The following code is new, and you will be able to find it in the v. 1.0.3 beta that you find on my website at http://www.alessandroperrone.com/iwe_guestbook_tutorial.php.

This function simply reset the form's textfields. It is placed in the "main" frame in the "FORM CONTROL FUNCTIONS". Its following line assigns the click handler to the button.

            
function resetMessage(){
for(var i = 1; i <= 5; i++){
var textBox = insertMessage["text"+i];
if(i < 5){
textBox.myText.text = "";
setFadeOut(textBox, "");
}else textBox.text = "";
} 
}
          

 

Note: the following line is to add to the current frame!

cancelBtn.setClickHandler("resetMessage");

The returned variable is needed to reset the row2Color in the "main" frame.

returned = true;
stop();

Well, congratulations! Also this part has ended. Let's take a look to the last one: the administration interface.

3.4.4 Administrator's login and administration interface.

Here we are, this is the ending topic of this long tutorial. What is left to do is to login the Administrator and make him/her apply changes to or deleting existing messages. The administrator can login essentially for two reasons: looking at user's IP address and edit/cancel their messages. The login interface is the same used in the admin.fla file. So the code below is not new to you, it looks like the one I showed you during the explaining of that section. It differs only for one thing: the showIP variable. This value is sent went the user (the administrator in this case) clicks on the showIPBtn button in the record movieclip instances in the "main" frame. In case the login is successful the _global variable IWantIP is set to true and evalued in the "main" frame as the playhead is addressed there again. With this variable set the program will show the IP address in its textbox.

            
backBtn.onPress = goBack;

function loginSuccessfull(){
if(showIP){
_global.IWantIP = true;
_root.gotoAndPlay("main"); 
}else{
_root.administrator = logClip.logAdmin.administrator;
_root.password = logClip.logAdmin.password; 
_root.gotoAndPlay("admin");
}
clearInterval(intervalID);
}

#include "include/set_password.as"

#include "include/read_cookie.as"

returned = true;

stop();
          

 

If the edit button was pressed rather than the showIPBtn one the script moves the playhead to the admin frame that looks again like the insertEntry one, with some little differences. Look to picture 3.10

Picture 3.10

An instance of the insert_edit_message movieclip named messageEditor is again on the Stage. A CheckBox instance named deleteBox has been inserted and the left PushButton instance is now labeled "Submit changes". The top label has been properly changed into "ADMINISTRATION PANEL - ...". This form simply shows the current record's entry information and let the administrator modify them or delete the record in case the deleteBox checkbox is checked. Select the CheckBox and assign it deleteBoxHandler as its Change Handler.
Well, look to the code for the last time :-) :

as just said above, the next fucntion is the deleteBox change handler: it shows a message to warn the user that the message will be erased.

            
function deleteBoxHandler(){
if(deleteBox.getValue() == true) setError("Caution: this message will be erased!");
else setError("");
}
          

 

The following function receives the current row ID parameter and shows the current record's data in the form's textfields.

            
function setTextFields(rowID){
for(var i = 1; i <= 5; i++){
var textBox = messageEditor["text"+i];
var currentData = entryData[rowID];
if(i < 5 && i <> 4){
if(currentData[i] == undefined) var value = "";
else var value = currentData[i]; 
textBox.myText.text = value;
setFadeOut(textBox, value);
}else if(i == 4){
textBox.myText.text = checkURL(currentData[i]);
setFadeOut(textBox, textBox.myText.text); 
}else textBox.text = currentData[i];
}

clearInterval(intervalID);
}
          

 

And this one is the "key" of the administration panel: it checks for the deleteBox value and evaluates if deleting the record or simply update the changed data setting up the server-side script to use and sending the required parameters to it. The onLoad event handler is managed in the same way I showed in all the other scripts I used before.

            
function submit(){
var deleteRow = deleteBox.getValue();

if(deleteRow == true) var manageUrl = "delete_entry.php";
else var manageUrl = "update_entry.php";

var submitLoader = new LoadVars();
submitLoader.administrator = _root.administrator;
submitLoader.password = _root.password;
submitLoader.id = entryData[_currentRowID][0];
if(!deleteRow){
submitLoader.name = checkText(messageEditor.text1.myText.text);
submitLoader.email = checkText(messageEditor.text2.myText.text);
submitLoader.homepage = checkText(messageEditor.text3.myText.text);
submitLoader.location = checkText(messageEditor.text4.myText.text);
submitLoader.entry = checkText(messageEditor.text5.text);
}

submitLoader.sendAndLoad(manageUrl, submitLoader, 'POST');

submitLoader.onLoad = function(success){
if(success){
if(this.action != undefined){
setError(this.action);
}else if(this.error != undefined){
setError(this.error);
} 
}else{
setError("There was a problem while sending or receiving data");
}
};
}
          

 

The following lines simply initialize this section, assigning handlers and calling the setTextFields() function that can so activate itself and show all data in the apposite textfields. As you can notice, an interval is used again to allow the FadingCoverTextbox instances initialize correctly and execute their own fade outs. The return variable has the same meaning that I showed before talking about the "login" frame.

            
setError("Welcome, " + _root.administrator + "!");

backBtn.onPress = goBack;

submitBtn.setClickHandler("submit");

cancelBtn.setClickHandler("resetMessage");

intervalID = setInterval(setTextFields, 500, _currentRowID);

returned = true;

stop();
          

 

Before ending and say you goodbye, let me add one more thing: the last frame, labeled "install", contains a getURL action: this frame is called from the second one in case the install_check.as file detects that the guestbook needs to be installed.

4. CONCLUSION AND USEFUL LINKS

 

Check for updates on my website at http://www.alessandroperrone.com/iwe_guestbook_tutorial.php and post messages on my Support forum at http://www.alessandroperrone.com/phpBB/ if you need assistance or you want to ask for further information. Please, if you modify or upgrade the source code (both PHP and Flash), please send me your files. I will evaluate the modifications that you applied and I will publish them with a new version. Your name will be inserted in a special "IWE Guestbook Development Volunteers Team". Remember the Open Source philosophy that took this software to life.

You can also find updated versions in my Downloads section at http://www.alessandroperrone.com/downloads but these versions are NOT the source versions: to download the source versions click on the link that I gave you before (the downloads requires your subscription to my community. note: the subscription is free).

Well, that's all, I hope that this tutorial helped you to grow a little and will also make you contribute to help the community grow better.