If you are only starting with PHP and Web Development, questions like “how to execute PHP from JavaScript” are inevitable. First I must say that JavaScript and PHP are living on the different sides of the fence and are simply throwing ball over to each-other. So your JavaScript needs a request to the PHP asking it to execute some code.

Unless you want to reinvent the wheel, you should look into using some AJAX / PHP library. Agile Toolkit amongst other can be a great help when you want to build interaction between JavaScript and PHP.

JavaScript event to trigger PHP function

Before going into AJAX, here is how you could produce random numbers in plain JavaScript:

<button id=”mybutton”>Click Me</button>
<script>
$(‘#mybutton’).click( function(){
$(‘#mybutton’).text( Math.random() );
}
</script>

Agile Toolkit comes up with an elegant way in PHP:

$mybutton=$this->add(‘Button’)->setLabel(‘Click me’);
if($mybutton->isClicked()){
$mybutton->js()->text( rand() )->execute();
}

See this example in action

More information of Binding JavaScript actions to PHP

Code achieves same result, but the “Rand” value is calculated on the server. This code relies on the JavaScript function “ajaxec()” defined in JavaScript Utility library (Universal Chain).

How to make it even better?

Wouldn’t it be even greater if you could bind any action to any object like that?

$this->add(‘H3′)->set(‘Move mouse over’)->on(‘mouseover’, function(){

$this->js()->text(‘Thank you’)->execute();

});

I have asked few people in London, who was up to help me out with Screencasts. Few people responded who have some ideas they wanted to implement in Agile Toolkit. I was able to help them and recorded our sessions. I now have 8 hours of screencast footage, which I’ll be releasing to youtube.

Subscribe to my channel on YouTube to see the screencasts as soon as I publish them.

The first 6 one-hour sessions is about creating a simple Task Manager. Many thanks to Maurizio for his participations.

Screencast with me!

If you’ve got Skype and great idea for Agile Toolkit we could help each-other. I can help you move forward with your idea and I would get a material for a new screencast session. Please use contact form to send me your ideas.

Romans Malinovskis
Author of Agile Toolkit

I first have learned about Object Oriented in the age of 10, in 1990. I have already mastered BASIC and was exploring the world of Turbo Pascal. My young mind couldn’t grasp the ideas of in capsulation and polymorphism so I asked my mom to help out. She took the book and carefully kept re-reading the introduction.

“Objects. Think Objects”.

Years later I have been eager to apply the Object Oriented principles everywhere: the games I wrote, the demo-scene productions, my copy of multiplayer user dungeon. When I settled in as a Web Developer and learned PHP3.0 I was disappointed at the poor implementation of the objects.

The birth of Agile Toolkit was as soon as the Zend Engine 2.0 alpha was released. I started to re-wrote the framework I had into a new, powerful language. From the first versions the most important distinctive feature of Agile Toolkit today have been embedded into the very core of the framework.

Rendering of the Runtime Object Tree

2-3 decades have passed since the concept of Object-Oriented User Interface have been launched on the desk-top computers. The realization that the elements you can see on your screen have many similarities even through the look differently defines every Graphics User Interface today. To understand this concept Imagine a “button” and a “input field” next to each-other.

Here a two object quite distinctive in their appearance are being rendered by the operating system by calling each object’s rendering function. The system may decide to force objects to re-render or skip rendering if they are not actually visible on the screen.

The exactly same idea is in the foundation of Agile Toolkit. Because I have been creating my own User Interface in Pascal and Assembler this was to me the best possible solution to interfaces in the Web Applications – implement them as a tree of visual objects generated during the run-time of your application and then rendering the necessary components.

Making Interface More “Webby”

Initial implementation of Agile Toolkit was only good to produce back-end administration systems as it was too in-flexible to do the requirements of the creative minds of our web-designers. Many UI Frameworks are destined with the same interface style, but Agile Toolkit was able to introduce a great breakthrough.

All the objects in Agile Toolkit, no matter how complex, are producing a valid HTML code based on object templates. This approach allows to easily change HTML behind individual or all objects and finally produce the great solution for website front-ends. However the default look and feel of Agile Toolkit application gives developers a great start.

Progressive Enhancement

By the time Agile Toolkit has matured the move towards Progressive Enhancements in CSS and Scripting made it possible to create a separate JavaScript layer which would  be optional for the elements. While earlier we would need to set “onchange” and “onsubmit” handlers into HTML baking templates extremely complex, now all of the JavaScript code have gone into a separate JavaScript API based on top of jQuery UI.

This allowed to purge all the JavaScript hacks from the code and rely on a much more powerful Object-oriented interface between JavaScript and PHP.

Business Logic

With the increasing complexity of our projects, it became apparent that a Objective Model layer is necessary. It finally appeared in Agile Toolkit in 2008 as an optional component. The models in Agile Toolkit serve a different role than the Models of other ORMs and Frameworks. Instead of only offering DataBase engine transparency and populating classes from data structures models in Agile Toolkit introduce a new dimension to modeling – inheritance. You can understand the power of this when you can narrow down values in the drop-down field by simply setting the right model to the reference definition. SQL Databases could not implement such flexibility but a PHP framework can.

RoadMap for Agile Toolkit

Up till now, Agile Toolkit had been walking a different path than other frameworks. Their goal was to provide developers with “utility” or a wrench to do certain things better. Approach of Agile Toolkit is to build levels of abstractions from the very bottom up. I must admit, that I can solve any web-related task with Agile Toolkit, but if I must produce a solution in clear PHP I feel lost and confused.

The immediate road-map for Agile Toolkit is to improve the 3 strengths it has by making it easier to interact and build. The “Model Builder” is in the works, which provides a visual interface to building new model fields and actually generating a PHP file as a result. The syntax of Models is already extremely simple but it will be even more so with the builder.

Another initiative is the User Interface builder. This allows create pages and add objects on your pages with a drag-and-drop interface. Similarly the tool would be capable of outputting a valid PHP code you can then further modify.

The number of Views and Templates will be made available through an on-line repository. In a way this would be similar to WordPress extensions, but tho time you will be installing classes which will aid you in building an Interface. The available views could be either free or paid creating a possible new revenue model for developers. A good example for such an view would be a “Gallery”. You could add this to any application you’ve got and bind it with the model holding images.

Unlike add-ons in other frameworks, the unified UI, JavaScript and Model structure makes sure that the add-on you are adding will fit-in perfectly, will be easily configurable to do the job and will contain minimum amount of code.

Conclusion

I adore web applications, but today it is way too complicated to build a web application. The situation reminds me the “DOS” and with Agile Toolkit I am able to introduce a Graphical User Interface for The Web.

The question I get asked a lot is how to integrate Agile Toolkit with other frameworks.

One of the best qualities of Agile Toolkit is that it can be very nibble when you want to use it to fill the gap. So let’s scrap the whole page routing mechanics and simply create a SINGLE PHP file which would work on it’s own. For this, you will need to have most up-to-date Agile Toolkit (4.1.3).

Download “Agile Toolkit” and un-pack in the temporary directory. Copy folder “atk4″ into your wordpress directory.

Next open file test.php inside your wordpress and type the following:

<?php
include 'atk4/loader.php';
$api=new ApiWeb('sample_project');
$api->add('jUI');
$api->add('H1')->set('Subscribe to Newsletter');
$form=$api->add('Form');
$form->addField('line','email');
$form->addSubmit('ok');
if($form->isSubmitted()){
$em=$form->get('email');
$form->js()->univ()->alert('Thank you for subscribing, '.$em)->execute();
}
$api->execute();

If you open this file in your browser, you’ll see a form with a field. You can now refer to samples on agiletoolkit.org site to customize or even create your own theme, but pretty much any code should work for you.

Once in a while, I see people who are stuck with a problem and who say they have tried everything and it still does not work. I often find myself in a similar situation, but I have found a recipe to resolve it.

If your program does not work, comment/delete it completely

If you have tried everything to make your program work, have you trying to remove the source code from your file completely (you can use Undo after)? Make your program exit right away or comment out everything. Will it work? Try it.

Does it work now? Yes. Now we can’t say anymore that “nothing works”, something actually worked so we are on our way to find what breaks it.

Divide and Conquier

Next, let’s delete the half of your program. Of course commenting it out or putting “exit” in the middle of your code also would work. Comment out half of the elements especially the ones which you think are giving you trouble.

If your problem is back, then comment more of your application and continue like that until you have removed all of your application. Because removing application completely worked before, somewhere along the way the problem will go away.

If your half-commented version worked, un-comment more of the code until problem appears.

Isolate your problem

Now that we know what breaks it, let’s find out “why”. This time, remove code which is not relevant to your problem. Even if you already confirmed that it worked fine, remove it and only leave the problematic bit. This way we would know that nothing we assumed to work does not interfere with our problematic section.

When you have removed everything un-necessary and you are left with several lines of code containing the problem, there is one last thing to try.

Rewrite it

Comment your code out and start typing it again. Even if it seems silly, still re-type your code. Do a test-run of your code after each line.

Conclusion

There you have it. At one of the steps above, you would certainly have found your problem. If you did, then press “UNDO” several times to restore your program in the way how it was before.

Happy coding!