 |
 |
 |
 |
 |
 |
Free PHP Scripts
DbCon
VegUIClient - Part 3 - Building the application back-end
written by vegu on 22 Jun, 2007 01:59:10
In the previous tutorial we successfully built the front-end for our simple editor application.In this tutorial we will create the back-end part.
Go into the module directory and create a new sub-directory called simple_editor. In this directory create a new file called SimpleEditor.class.php.
This will be the library file for the SimpleEditor module on the back-end side. Open the file and add a new class that extends the VUIS_Entity class. The VUIS_Entity should be used as the base class for any VegUIServe module as it provides shared objects for database access, sessions and error handling.
code: phpclass SimpleEditor extends VUIS_Entity {
}
Inside of this class we will now create the constructor method, which basically does one thing for us in this example. It sets the javascript name that is associated with the module. Remember when we added the SimpleEditor as a child to our CustomClient object when we were working on the front end.
We added it under the name 'SimpleEditor', and by setting the property js_name to that in our back-end module we make sure that it will be able to talk to it later.
code: phpclass SimpleEditor extends VUIS_Entity {
/***************************************************************************/
/** Constructor */
function SimpleEditor() {
/* set the javascript name of the module, the javascript name needs
* to hold the name of the javascript object that represents this
* module in the client application in the client's C array
*
* so if you would access the javascript object in the client
* by Client.C['SimpleEditor'] then the js_name of this module needs
* to be 'SimpleEditor'
*/
$this->js_name = 'SimpleEditor';
}
}
We're going to need to create two more methods to our SimpleEditor class. One method that will load the contents from our text file and send it to our client and one that will save new content to the text file.
Let's start with the load function, shall we?
code: php/***************************************************************************/
/** Method: load
* This function loads the content of our text file and outputs the
* xml response to the client that will cause the client to display
* the loaded text
*/
function load() {
/* get_file is a function in the elmer_functions library and returns
* the contents of a file as a string
*/
$text = get_file(VUIS_PATH_ROOT.'/mytextfile.txt');
/* now we need to send the contents to the server. Server -> client
* communication is handled over the ui property.
*/
$this->ui->xml_push_op(
'load', array(
'text' => htmlentities($text)
), $this
);
}
I know, the text file does not exist yet, we will get to that in a bit. However the important part is the xml_push_op call. The ui object is the shared userinterface object which purpose it is to let the server send a response to the client that the client can process accordingly.
There are two communication protocols you can chose from: XML and a bitmask style protocol. XML is the default set up, and way more comfortable to use. Its drawback is bandwidth, but we dont care about that in this project :)
So basically what the xml_push_op method does is this: It pushes an xml tag called op with an attribute called 'type' and an attribute called 'text'. The type attribute will tell the server what kind of operation it is dealing with and the text attribute holds the content we retrieved from the text file.
We submit the module ($this) as a third argument to make sure the ui operation call is routed to our SimpleEditor module on the client side. Where the module's exec_xml method will process it.
So the server response to the client, in this example, would look like this:
code: xml<vegUIApplication>
<module name="SimpleEditor">
<op id="load" text="Content of our text file!"/>
</module>
</vegUIApplication>
It should be interesting to note that the xml_push_op method is a wrapper function and you could also construct this in a more manual way.
code: php$this->ui->xml_push('module', array('name' => 'SimpleEditor'));
$this->ui->xml_push('op', array('id' => 'load', text='Foo!', true);
$this->ui->xml_pop('module');
I suggest you take a closer look at the VUIS_UserInterface.class.php library as all those functions are documented there.
Finally, we add a third method to the class called 'save'.
code: php/***************************************************************************/
/** Method: save
* Save new content to our text file
*/
function save($text) {
/* create_file is a function in the elmer_functions library and
* writes content to a file
*/
create_file(VUIS_PATH_ROOT.'/mytextfile.txt', $text);
/* send a response to the client that alerts that the file has
* been successfully saved
*/
$this->ui->alert('File has been saved!');
}
Okay, save the SimpleEditor.class.php file and create another one in the same directory called init.php. Everytime the execute_script.php script is called the vegUIServe application will scan the module directory and it's sub directory and look for a file called init.php in each module directory.
As the filename suggests this file makes sure that the module it belongs to is integrated and initialized property so that we can later use it in our server application.
First we will need to define a module type for our SimpleEditor module.
code: php/* define type for the module, generally you should stick to values
* greater than 1000 so you ll never conflict with original vegui
* modules
*/
define('SIMPLE_EDITOR', 1001);
Then we will need to init the module.
code: phpvuis_module_init(SIMPLE_EDITOR, array(
'class_name' => 'SimpleEditor',
'file_name' => 'SimpleEditor.class.php',
'dir' => 'simple_editor'
));
Alright, save the init.php file.
Now, we will create the text file i keep yapping on about :). Go to the root directory of our application and create a file called mytextfile.txt and fill it with some random line like 'The quick brown fox jumped over.. the.. awww crap i can never remember', it's up to you really!
Scripting, wee!
Next stop is the script directory. In the script directory create a file called simpleedit.load.script.php. If you paid attention when we wrote the front-end application then you will remember that this script is the script that will be requested when the user clicks the load button.
It will retrieve the content from our file and respond - with it - to the server.
code: php/* loads contents from our text file */
$se = $server->get_new(SIMPLE_EDITOR);
$se->load();
Yap, that's it. We simply create an instance of the module we just created and call its load method. Save it.
Let's test it real quick. In your browser navigate to the execute_script.php and set the scr argument to 'simpleedit.load'
www.your_web_server.com/vegui_client/execute_script.php?scr=simpleedit.load
You should be presented with a XML tree as i described it to you earlier in this tutorial. If not then something went wrong and you need to re-check everything we did in this tutorial :D
You seeing some XML? Great, let's move on.
Create another file in the script directory, this time name it 'simpleedit.save.script.php' - wonder what this one will do!
When the user clicks the save button in the client application a request is sent to this script along with the new contents to be saved to the file.
code: php/* gr is a function that retrieves a value from
* $_REQUEST if the submitted key exists, if
* it does not exist it will return a default
* value, in this case NULL
*/
$text = gr('text');
if($text) {
/* text is set and not empty, create instance of
* simple editor and call save method
*/
$se = $server->get_new(SIMPLE_EDITOR);
$se->save($text);
} else {
/* text was empty, send alert with response to
* client
*/
$server->ui->alert('Cannot save empty string to file >:(');
}
Okay, it's more of the same stuff, however we do some error checking here too! We check if the text variable was sent in the POST or GET request to the script and if it wasnt or was empty the response to the client will contain an ui alert operation call that alerts that the file could not be saved. Neat.
Okay... we re almost done. In order for this to work though you will need to chmod the text file so the server can write to it.
chmod 666 mytextfile.txt should do the trick.
Okay, load our application in your browser by navigating to index.php and test it. Clicking load should load the current contents of mytextfile.txt into the editor, and clicking save should save any changes you made.
Hope this was educational. We were only scratching the surface though :) Even with this project there are many ways to extend. One thing you could do is replace the ugly alert function of the vegUIclient - which right now produces a normal javascript alert, fun! - with a vegUI window alert popup :D Or make it so you can specify in the client which file to load for editing. Stuff like that.
With this tutorial we did not get the chance to look at database related stuff, but i figure i will do that in a future tutorial :)
Related Posts
Your Comment
Comments
No comments yet.
