WWW Framework

WWW is a PHP micro-framework that is built loosely on model-view-control architecture and factory method design pattern. It is made for web services, websites and info-systems and is built around a native API architecture, caching and smart resource management. WWW is a compact framework that does not include libraries and bloated features and is developed keeping lightweight speed and optimizations in mind.

Note that WWW Framework is currently in BETA and it is not recommended for production use yet.

Latest version of WWW Framework can be grabbed here.

Feature list of WWW Framework 2.0.7:

• Modern API-focused framework
• Secure API requests with input and token and key-based authentication
• Dynamically loaded Hierarchical MVC objects through Factory pattern
• API returns XML, CSV, JSON, HTML, native PHP and other data formats
• Compressed data output with Deflate and Gzip
• Input and output data is fully UTF-8
• PDO-specific database controller for general-use database connections
• Smart Index gateway that handles all HTTP requests
• Full cache control for all types of dynamic and static requests
• View and URL controllers that support multiple languages and clean URL’s
• On-demand dynamic image resizer and basic image editor
• On-demand resource compressing, unifying and minifying
• jQuery JavaScript framework supported
• Automatic sitemap.xml and robots.txt generation
• Optional 256bit Rijndael CBC data communication encryption
• Installation-specific MVC class and resource overrides
• API wrapper classes that make server to server API communication easy
• Request limiter that can block HTTP requests under various conditions
• Request logger that can be used for detailed performance grading of HTTP requests
• Backup, update and filesystem maintenance tools
• Compatibility script that tests support for server setup
• Supports Apache and Nginx servers in Linux and Windows environments
• Licensed under GNU Lesser General Public License Version 3

Documentation and repositories

Documentation about how to set up a system and use the API, as well as tutorials are available here. Tutorial about how to build a basic web service is already available and tutorial about how to build a simple website will be released soon.

Mercurial and Git repositories are available for developers who are interested in following the development at SourceForge, GitHub, Google Code and BitBucket. All repositories are updated as new versions are released. It is also a good idea to follow latest development and news of WWW Framework at Google+, Facebook and Twitter.

Is WWW Framework fast?

Micro-framework has its benefits! The following chart shows the performance of frameworks with and without APC extension supported. Also note that the chart has a no-cache version of WWW framework listed, which basically has WWW Framework running without internal optimizations. It was included to test the difference between WWW Framework’s internal optimizations.

Benchmark chart (click to see full chart)

• Benchmark was run on a dual-core WAMP setup over the period of two nights
• WAMP setup was EasyPHP 5.3.8.1 and The Uniform Server 8.3.1
• Pylot was used to do the HTTP load benchmarking
• Framework setup and installation for known frameworks was provided by PHPMark
• Tested frameworks WWW Framework 1.9.6, Yii Framework 1.1.4, CodeIgniter 1.7.2, Kohana 3.2.0, CakePHP 1.3.4 and Zend Framework 1.10.8
• Every benchmark-run was 20 seconds long, every framework was tested ten times with both APC turned on and off
• Apache was reset before each benchmark run and log files were deleted
• Sessions and output compression by Apache was not used
• The results below show averaged results from EasyPHP and The Uniform Server for non-APC tests and APC tests were only done on The Uniform Server
• Benchmark scores varied most when APC was on. Without APC each benchmark run was within 1% of other scores of the same benchmark
• While PHPMark includes Symfony 1.4.8, it was unable to be tested due to it crashing the testing environments Apache when run
• WWW Framework running without internal cache (‘no cache’ on the chart) means that it does do any internal optimization and was used for testing purposes

Website weight loss?

A skilled young developer posted this recently on Twitter:

Well, yes, base64-encoding and embedding the image into HTML is one way to reduce HTTP requests, but honestly, why would anyone do this?

This article will describe briefly how base64 encoding is done and what benefits it might have.

By base64 encoding images, he means inserting HTML images like this:

<img src=”data:image/png;base64,[BASE64]“/>

Where [BASE64]  is a base64 string generated from the file with a tool like this here.

What this effectively does is that it embeds the entire content of the image into the HTML itself. This means that the browser that visits the website has to do one less HTTP request that it would otherwise do to get the file. HTML file itself would be larger as a result since it also includes the image file. The reason why the question is asked though is because if the HTML itself is not cached, then every time user requests the page they have to re-download the entire content, defeating the purpose, since browsers would otherwise cache the image and make subsequent requests on the websites faster if the same image is displayed in HTML again.

So why should you do it?

Reducing the amount of HTTP requests is a seriously important issue. If your website includes a lot of different files (JavaScript, CSS, fonts and images) and has a lot of users (especially new users) at the same time, then your site will slow down very quickly and might even cause problems for the server. To help with this, a lot of frameworks combine CSS and JavaScript files automatically and it is recommended to do this yourself as well even if you don’t use a framework. But images still make a huge chunk of an average website request, so encoding some images in base64 can give you quite a bit of performance gain should your site become suddenly popular.

But  can I back up my claim?

First of all, it is not recommended to use base64 encoded images in inline HTML, unless browser is able to cache this information in any way. But there is an alternative: you can embed images and fonts inside CSS file, effectively making your entire web ‘design’ into a single CSS file. It’s not useful to do this right away and not for all files and debugging will be rather difficult once you do this, but you should do it only once you’re not ‘developing’ the site anymore and don’t need to change font or graphics files around. Basically when you are ready to deploy your website and go live. It’s useful for all little parts of your code, like custom bulletins, some repeatable background images and so on.

As a result, single images in HTML (like galleries and other content pictures) will still make their own requests while website design will be stored in a single CSS file.

Anyways, just because I was curious, I made a little test since I was worried about how this might affect the situation when Gzip is used to compress CSS (usually it is not recommended to Gzip image content since they are already compressed). I built two examples on my WWW framework which automatically Gzips non-image output sent to the browser:

Test A was done with base64 encoding used in images and Test B was done without base64 encoding. HTML of both tests were the same:

<div id=”div1″ style=”width:240px;height:240px;”></div>
… and #div2-#div10 just like above …

Test A had a CSS as follows ([BASE64] again was the long custom string generated with the tool shown above):

#div1 { background-image:url(“data:image/png;base64,[BASE64]“); }
… and #div2-#div10 just like above …

Test B had CSS like:

#div1 { background-image:url(“image1.jpg”); }
… and #div2-#div10 just like above …

Both examples included ten JPEG images of 240×240 pixels in size. This is far more picture content than you’d expect from an average website design, but works really well as an extreme example for current tests.

Results:

Test A does 8 HTTP requests, including HTML, three CSS files and four JavaScript files. Test B does 18 HTTP requests, including all of what was in Example A, but also 10 JPEG image files. In both cases, JavaScript and CSS and HTML are Gzip encoded. I did 12 tests on both scripts without cache being used. I then removed 2 tests from both sets that were the slowest, since sometimes server lags and would throw off the averages. Tests were done and measured by Google Chrome.

Test B, where base64 encoding was not used to include image files in CSS, had the average time to render the page as 668ms.

Test A, where images were encoded in base64, had the average time to render the page as 463ms, almost 30% faster while also making 10 HTTP requests less on the web server.

So the benefits are certainly there, but the benefits are there only for cases where content can be cached. As I said above, there’s no point to base64 images into HTML that is not cached. If HTML is not cached, do not use base64. No point using base64 for embedding galleries and other content pictures. But for website design? Yes. 30% victory in processing time and a lot less HTTP requests after all.

Hopefully this helped a little.

WWW Framework

I am proud to present the first complete release of WWW Framework. Goal of the project has been to create an API (Application Programming Interface) focused framework which can be used to build user-interface independent software which can be controlled from any type of interface required (be it a simple website or a mobile app). The result is this, an API-focused web and infosystems PHP micro-framework.

Project has been launched with full documentation as well as first tutorial that explains how to build a simple web service with WWW.

You can follow news related to the project on various social media channels Google+, Facebook, Twitter and source code is officially published at SourceForge, Google Code as well as BitBucket. Repository that is used is Mercurial and you can easily subscribe to it or pull the latest version.

Summary description of the project:

WWW is a PHP micro-framework that is built loosely on model-view-control architecture and factory method design pattern. It is made for web services, websites and info-systems and is built around a native API architecture, caching and smart resource management. WWW is a compact framework that does not include libraries and bloated features and is developed keeping lightweight speed and optimizations in mind.

The package comes by default with a view controller and a gateway intended for website functionality with clean URLs. Framework also incorporates a front-end JavaScript controller.

Please make sure to read documentation about how to set up a system and use the API. Complete documentation with detailed tutorials are available here at https://sourceforge.net/p/www-php/wiki/Home/

Mercurial repository is available for developers who are interested in following the development.

Waher-style Theme

If you are using Windows and use Notepad++ as one of your main source-code editors and happen to be a web developer then you might just love this.  I originally developed this for personal use for I was unhappy with other themes or found them a little inconsistent across different web development languages. By now I have used this theme in Notepad++ for more than a year now.

Thanks to this being shared in reddit, Twitter and Facebook, it has been downloaded more than ten thousand times in one day.

It is recommended to use this theme with Consolas font.

You can download the theme archive HERE (*.rar archive) or the theme XML directly HERE (right click and save-as). Preview is available here.

Features:

• Comfortable color scheme with a dark background and eye-friendly colors for working long hours
• The styles used are intended for a web developer and cover most common files associated with web development
• Supports Notepad++ styles for following languages and files: CSS, HTML, *.ini files, JavaScript, PHP, SQL and XML.
• Covered by GNU Free License, you can modify and redistribute it in however way you like.
• Some support for Java and Python files (recently added, might require some testing)

Install:

1. Unpack the *.rar archive into your Notepad++ installation directory under subfolder /themes/
2. Open Notepad++
3. Go to Settings -> Style Configurator
4. Select Waher-style from Select Theme dropdown
5. Click Save & Close

I hope this theme will serve you as well as it has served me!

WebViewApp

I have only recently become curious about developing for Android phones. As a web developer the most important thing for me was to provide a way to bridge the gap between web applications and native applications.

Free and open source WebViewApp application is a simple base setup for developing Android applications that communicate with web services. WebViewApp is released as open source and developers can use this base application to build their own fully functional web applications in Android.

This application is as bare bones as possible and includes commented code and some examples.

Following features are included:

• Cookie management (application stores cookies)
• Cache management (application stores cache based on web service cache lifetime and maintains it when user is not using the app)
• Javascript interface (Web service can execute commands in Java and vice versa, such as for scripting hardware keys or executing alerts from web service, displayed in Android.)
• Contained URL’s (Web service only opens its own URL’s in app, every other URL is launched in browser.)
• Online Checks (App checks if user is online, if not then shows an offline page with an option to continue and reload where user left off once internet is back)
• Sending custom user agent string to web service for testing if web service is used through Android app. Also includes a (possibly) unique device ID and application version for update checks.
• Can load local HTML pages that uses local resources
• Can be installed on SD card.
• Can save settings and preferences
• Can set background services and timed services
• Can start a service at boot time
• Can make HTTP connections to online API’s
• Can use private and public file system, read and write files
• Can use SQLite database

This application shows that it is possible to create very extensive Android applications while relying mostly on HTML and JavaScript user interface, which makes it much easier to port to other systems or create a counterpart to browser version of a website.

Please note that there is no ‘guide’ on how to change the base application into your own new application, but source package does include a short overview of all the necessary modifications. Basic knowledge of Android and web development is recommended.

The bare-bones application can be downloaded from Android Market with its name ‘WebViewApp’ or from Android Market.

Source code can be downloaded from here. This includes source code for both the Android app as well as the web service.

VERSION HISTORY:

v1.12 Database and file system examples, HTTP request examples
v1.11 Starting service at boot time
v1.10 Background services and timed services
v1.09 Notifications, settings and preferences
v1.08 Local image test for local HTML
v1.07 Activity checks and local file support
v1.06 Better examples and descriptions
v1.05 Possibility to keep previous scroll position
v1.04 Back button now works with POST variables
v1.03 Fix for back button in certain conditions
v1.02 Reload page now uses Javascript interface
v1.01 Fix for no-internet reload page
v1.00 Release

Electronic Payments

E-payment systems and bank services are everyday and common in Estonia, but both developers and companies, who implement e-payments to websites, tend to ask large sums of money for solutions that should be relatively simple. Having developed e-payment systems for years, I had not put together a single solution for this very common problem until now, when Estonia has adopted Euro as its main currency. This solution is released open source, under LGPL license.

Please note that while this e-payment system is now considered stable and has not run into major problems ever since it was released, some of the connections have been tested more often than others and it is still recommended to test the implementation and make sure it works accordingly before going live.

E-payment systems and Bank e-services that are supported with this solution:

Swedbank (Estonia)
SEB (Estonia)
Sampo (Estonia & Finland)
Nordea (Estonia & Finland)
Estcard (Estonian credit card web service, Mastercard, Visa, etc)

Requirements:

Solution is built with PHP and requires PHP support. The website or service that implements this solution should be modern and utilize UTF-8 for data encoding. This e-payment system assumes that it gets its data as UTF-8 and acts accordingly. This system may not work properly if website is not encoded in UTF-8. OpenSSL support is also required from the web server for some epayment profiles. Multibyte String extension support is required for certain UTF-8 calculations.

Files descriptions:

config.epay.php – Configuration file for each profile. This also includes testing environment access informatin, if that profile has it (read the comments). Whenever setting up a e-payment link, this file should be configured accordingly.

class.epay.php – Main class, this file also calls the configuration file and expects the file to be in the same directory as the class.epayments.php file. This file should not be edited, unless necessary for some reason.

gate.epay.php – This is gateway file that is used to submit data to the bank service or parse the result from the service.

example-submit.php – This is example file, which generates the form that submits order data to gateway and gateway then submits it to the bank.

example-return.php – This is example return page, which receives returned information from bank.

Example:

This package has a working example that is easy and quick to set-up. Package includes SEB bank e-service testing environment. The only thing you have to do, to get the example up and running, is download the package below and upload it to your website under root or subfolder. For example, if you upload the files to:

http://www.example.com/epayment/

Then you have to change only two configuration settings in example-submit.php file, related to order information and return URL. Using the previous example, the lines should be changed accordingly:

line 22. $config['gateway-url']=’http://www.example.com/epayment/gate.epay.php’;
line 23. $config['return-url']=’http://www.example.com/epayment/example-return.php’;

Don’t forget to change the example.com website address to your own website address. Nothing else needs to be changed to test if the class works.

From example to Live implementation:

The example runs on ‘seb-est’ (SEB Estonia) profile. To use another bank, such as Swedbank, you need to assign correct payment-type before generating the form (like in example-submit.php file). Then you also need to assign proper values to config.epay.php to the profile. The settings in configuration file are commented and self-explanatory. It is important to note though that some e-payment services offer no testing environments and other epayment services cannot even be tested without the testing environment being set up by the other side first (such as the case with Estcard solutions).

Download:

waher.net e-payments solution 1.4 stable

Other notes:

As BETA, this solution does not check for errors in every location and there may be quirks as a result. These will be ironed out in future versions. Please report any bugs or problems you find either here in comments or personally to my e-mail kristo@waher.net

Version history:

1.4 stable
20.04.2011
Minor change for Nordea, switching the language keyword (estonian and english were switched)

1.3 beta
04.03.2011
VK_AUTO requests did not work with some banks, gateway now attempts a cURL request to remedy that, if cURL is enabled.

1.2 beta
31.01.2011
VK_AUTO assigned for ipizza profiles (Sampo, SEB and Swedbank) for automatic pings on success URL

1.1 beta
13.01.2011
Sampo profile now works properly, taking into account UTF-8 characters

1.0 beta
11.01.2011
First release

The Social Network

Please note that this is not review of the movie, but an opinion piece about its topics. For a review, I recommend a review from one of my most trusted reviewers, Roger Ebert of Chicago Sun-Times.

David Fincher’s ‘The Social Network’ really is more of a movie about making enemies, than making those 500 million friends. But what the trailer depicts is not what the movie is really about. After seeing the trailer, I expected something entirely different. I expected what I guess Mark Zuckerberg  – one of the creators of The Facebook – expected, a movie that paints him as a monster. Instead it was a movie about our dreams, hopes and aspirations and how, at times, we exploit, manipulate and so completely cause self-conflict because of those things we like and want to achieve. The older generation will never understand and we can only hope that our experiences will be able to serve our children better. No one was holding our hand when the internet took over the world.

The movie focuses primarily on relationships and on the business side of things, it is intertwined with internet and development of applications for the internet. I loved the subtle nuances about the role that software developers play in this world and how it so strongly conflicts with the way your traditional business used to work. By creating these castles in the air, from air, a developer is in a unique position that no other job has shared in the history of the world. There are no rules to follow, you simply need a good idea and an even better execution. A symbiosis of art and science. What the movie displays very well is that web business does not even require huge investments and resources to become a success: merely couple of thousand of dollars and a passionate codewriter were needed to push things off to a running start. Even some of the smarter business strategies were covered, which explain why Facebook did not run into problems that Friendster did (which was the first very popular Facebook-style social network).

These years media still wonders if Zuckerberg stole the idea for Facebook or not. David Fincher, being a smart director that he is, never lets that take over the role of characters in the movie. In fact, it does not even answer the question for the viewer. But in all honesty, this was not what the movie was about, it simply tied everything and everyone neatly together.

It helps that the movie takes the perspective of the most known flawed hero of this generation to carry what otherwise might end up being a cluttered movie. Zuckerberg found his creative stride during the years this so-called Web 2.0 (or simply Social Web) was catching on. Smart – but not popular. Ambitious – but not charming. He was not driven by clichèd motivations of common biographical movies, such as father issues or chase for perfection or becoming better than your competition. He wanted to become accepted and he wanted to prove to people that hurt him – and tragically himself – that making something great and popular can become something he can excuse his shortcomings with. Instead of fixing his problems, he was looking for ways to mask and excuse them.

‘I wish I was special,’ say the lyrics of the song in the trailer. So did Mark Zuckerberg and so do all of us.

For those of you looking for the files directly, they can grab them here. Individual source code can be viewed here: index.htm, javascript.js, ajax.php. Note that jquery.js file is also required (1.4.2), should you copy-paste from the source code instead of downloading the archive.

The code is licensed under LGPL, so you can use it for personal as well as commercial purposes. All files are commented and a working example is provided within. You do not need a firm grasp of jQuery in order to understand this example and you do not need experience with JSON data format. PHP and jQuery handle the conversions for you. I will not explain everything step by step – for that refer to the files and the example provided – but I will give a general overview of what is happening here.

Front-end user-interface has the various actions built through a uiAction() javascript function. This is a general-use function that takes two variables, an ‘action’ that acts as an action identifier, and ‘data’ variable. Data variable can be whatever you want, it can be a string, integer, array or an object, depending on your needs. Since you will control how the ‘data’ variable will be used, it is entirely up to you. In the example files I am calling the uiAction() on a <button> element like this:

uiAction(‘alertLowercaseString’,$(‘#example’).val());

For those of you who know jQuery, know that I am sending the value of an input field with an id of ‘example’ to the function. Action’s name itself is ‘alertLowercaseString’ in that case. Then, within uiAction() function in the ‘action’-switch I am executing the function that sends data to AJAX, like this:

input['string']=data;
executeAjaxAction(action,input);

Action is, by default, the same as action identifier used to call uiAction(). executeAjaxAction() is a function that submits data to PHP backend (but you can customize it, such as have different uiAction() calls execute same function in back-end). ‘input’ is an uiAction() specific javascript object. This is defined at the start of the uiAction() function and is used for convenience in order to send specific data to AJAX. ‘executeAjaxAction()’ expects ‘input’ to be an object or an array, since this is what will be sent to PHP backend. After submitting data to executeAjaxAction() the front-end will connect PHP back-end with AJAX. In this case I am sending an ‘action’ of alertLowercaseString. PHP backend will solve the ‘input’ into a variable named $inputVariables and again – as it was in front-end, within a switch you can define what you want to take place in the back-end and what will be returned. In this example it is:

$return['action']=’alert’;
$return['message']=’Your string lowercased: ‘.strtolower($inputVariables['string']);

‘$return’ is an array that is used to create a JSON object from. ‘action’ for ‘$return’ needs to be always defined, but every other variable can be whatever you want, since – as before – you get to decide what data you need to use later on in front end. Basically everything you want to return to front-end should be placed in ‘$return’ array. PHP then creates a JSON string of the ‘$return’ array and returns it to the browser. executeAjaxAction() function will then call a javascript function parseAjaxReturn(), which will check what action PHP defined for callback (if any) and then – in this example of ‘alert’ as the action – does the following:

alert(json['message']);

And this alerts to the user the lowercased string.

This quick explanation may be difficult to understand at first, but I strongly suggest that you take a look at the fully working examples provided within. Files are fully commented and examples provided within are minimal, so you can take this into production use right away should you want.

Download fully working example files here

If you have any questions, go ahead and contact me directly or comment this article. I will get back to you as soon as possible.

All the best!

This example has a few limits, that is you can easily confuse it by clicking on two tile locations in a row. But in general it works and what I will be using this for will be something a bit different, so this limitation was of no concern to me. However the entire pathfinding calculation takes place on PHP backend. Each map is essentially a square (currently a limitation of pathfinder, but can easily be tweaked) and stored as an associative array, every tile in that array like this:

$map['1x1']['weight']=1.0;

The first key is the coordinate of the single map tile and the weight key is used to store weight of this map tile for calculations. Nothing else is needed (and an example is provided in the files below). For actual game purposes or whatnot you can store additional information on that very map as long as the coordinate and weight are assigned as shown in the example. For example, in my own tech-demo I also store the graphic tile used in the map array.

Finding the actual path is just as simple:

$map=getMap();
require(‘class.pathfinder.php’);
$path=new PathFinder(); //Create new pathfinder object
$path->setOrigin(1,1); //Set the start location
$path->setDestination(20,20); //Set the destination
$path->setMap($map); //Assign the map to use for calculations
$result=$path->returnPath(); //Returns an array of all the walked steps

Working example, as well as commented pathfinder class is available below:

Download the class and example file here

Please note that this is not a definitive pathfinder. It only takes into account one square ahead and on very large maps I am sure there are more ideal solutions. But for your basic browser based game this is a good starting point and I learned a lot by creating it. This is also easy to expand based on your needs.

If you have any other questions, let me know.

The code is shared entirely free for personal or commercial use.

Cheers!