So getting bored back in college or office, add games@gtalkbots.com and type anagram to start gaming. Play and score well. Your score will turn up on the Gtalkbots front page. They have kept this game open for the world i.e. one can play this game even without registering at Gtalkbots.

A few important points:

1. Add games@gtalkbots.com as your friend in Gtalk Messenger.
2. Type rules to read them before you start gaming.
   
3. Type anagram to start gaming.
4. You will be given a jumbled word which you needs to rearrange and reply back.
5. If your answer is correct you get 10 Points.
6. If your answer is not correct and you are finding it tough to solve it, Type hint to get a clue, and a clue will be sent to all users playing the game.
   
7. DO NOT FORGET to type exit when you are finished gaming. If you forget to do so, you will be considered as a part of next round being played and eventually your average score decreases.
8. If total number of wrong answers = 5 (including all users), the bot will automatically reply back with correct answer and moves to the next word.

So try out and enjoy.

Tags: Anagram, Gtalk, Gtalkbot, Gtalkbots, Online Gaming

In the last tutorial we saw a very basic implementation which will simply print “Hello World” on your browser screen. For those who have landed up here straight here, you may want to go through this blog post. Getting started with Symfony - A PHP Framework - Part 1 By now if you have decided to go ahead with symfony and use it for your site development, this is what you will be looking for next.

You can download the code for this tutorial from google code base.

svn checkout http://abhinavsingh.googlecode.com/svn/trunk/PHP/
Frameworks/Symfony/Authentication abhinavsingh-read-only

A Registration-Login-Logout System for your site
This is mostly the first thing you end up building for your site. To be frank, I myself haven’t made this application. I will make it as I write this blog, and note down all my steps here, so that I don’t miss any detail.

1. We will name our project as Authentication
2. Create a folder called Authentication under the Symfony directory we made in the last tutorial. For me its here C:\Workspace\Symfony\Authentication
3. Open your command line and point it to the above created folder
4. Type “symfony init-project Authentication” and it will create same directory structure that we discussed in last tutotial.
5. Lets create an application inside this, we will name it as Auth
6. Type “symfony init-app Auth” and it will create an application named Auth under the apps folder. (C:\Workspace\Symfony\Authentication\apps\Auth)
7. First we need a module called Registration, to allow our users to register.
8. Type “symfony init-module Auth Registration” and it will tell symfony to create a module named Registration inside our application Auth
9. As told in last tutorial copy the C:\php5\pear\data\symfony\web\sf folder to C:\Workspace\Symfony\Authentication\web\sf. At the end of this part, we will learn how can we skip this copying again and again
10. Open C:\Workspace\Symfony\Authentication\apps\Auth\modules\Registration\actions\actions.class.php and comment out the forwarding as discussed in last tutorial.
11. Go to your command line and type “symfony clear-cache“. Read why we do this in the last tutorial.
12. Open http://localhost/Symfony/Authentication/web/ in your browser and you must get something like this.

Figure 1

OOPS! Did we missed something? Yes we did and intentionally. We could have gone to C:\Workspace\Symfony\Authentication\apps\Auth\config\routing.yml and redirected our Authentication application to our Registration Module by default. In that case we would have seen an empty page since indexSuccess.php file inside C:\Workspace\Symfony\Authentication\apps\Auth\modules\Registration\templates is empty. But since we didn’t modified the routing.yml file, it took us to the default module of symfony.

So how do we access our Registration module without modifying routing.yml file??
http://localhost/Symfony/Authentication/web/Registration/index is the answer

As a convention
http://localhost/Symfony/Authentication/web/<Module>/<ModuleFile>
this is the standard for symfony.

Hence it went to Registration module and then indexSuccess.php page inside that. Cool so we actually just followed up from our last tutorial till here. Lets now do the actual development.

Defining a layout for our website
Before we do any backend stuff, lets atleast get our site out of that blank page (http://localhost/Symfony/Authentication/web/Registration/index). However, If you view the source of that blank page, you will actually find that there are already some header, css, body tags in the source code. How is this coming? when we have an empty indexSuccess.php file.

From our last tutorial we saw the flow which symfony follows to finally display a page on the browser. But then I actually skipped a step to ease down the tutorial. In symfony we follow the Decorator Design Patterns (I hope i m not wrong here) , to get the front end stuff. Essentially Decorator Design Pattern consists of a Layout and a Content page.

In symfony our layout file is located under at C:\Workspace\Symfony\Authentication\apps\Auth\templates\layout.php. Open it up and you will know the answer to “How are those meta tags, head tags and body tags coming”.

Cool enough. Lets go back to our indexSuccess.php file of Registration module and design our website. With a little CSS and HTML, I came up with this design page for our site. Mostly inspired and stolen from my new site Gtalkbots.com

Figure 2

We will shift a bit of code from this page to our layout.php page later on so that we need now write the same modules again and again. Download all the code, from the my google code vault location given at the beginning and end of this tutorial.

Designing the backend database:
Now we need  a databases schema which will save our registered user’s data.  Lets create our database structure.

As talked about in last tutorial, symfony follows ORM programming technique. For this, they provide a method through which you actually need not go to your database and create tables. Symfony will do that for you. Not only this, Symfony will also allow you to skip most of the SQL queries. Lets see how.

1. Open C:\Workspace\Symfony\Authentication\config\schema.yml . From extension we know that symfony follows YAML structures which is similar to XML, but a bit easy to write. We will define our table structures in this file.
2. Type the following in the schema.yml file:

   Propel:
     users:
       id:        { type: integer, primaryKey: true, autoIncrement: true }
       username:  varchar(100)
       emailid:   varchar(100)
       password:  varchar(100)
   

3. Note the indentation, it is very very important when you are using YAML. Indentation actually decides how the YAML parsers will read and interpret the information you want to write in .yml files. In our case we have a very simple schema.yml file having only one table. We will learn about what that “Propel” is all about later, but lets focus from line 2.
4. We are trying to make a table called users having fields like id, username, emailid and password
5. Now before Symfony makes this table for you, we need to tell symfony the database username and password. For this we have a configuration file called propel.ini, located at C:\Workspace\Symfony\yahoo\config\propel.ini
6. Open it and change the lines as below:

   propel.database.createUrl  = mysql://root@localhost/
   propel.database.url        = mysql://root:password@localhost/authentication
   

   Now go to your mysql database and create a database named authentication, which symfony will use from now on.

7. Type “symfony propel-build-all” in your command line. This command will happily create a table named “users” in youy MySQL database “authentication”. Some of the possible errors which I got in the past are:
   • Your PHP must be compiled with XSLT, hence enable it by going in your php.ini file
   • In schema.yml file never use TABS. The YAML parsers don’t understand TABS. User SPACES intead of that.
8. To cross verify check your database, if the table has been created. Now a bit about Propel.

Propel is nothing but a third-party-vendor plugin which Symfony use. It helps in parsing the YAML files, creating and executing the whole ORM module including parsing of schema.yml , creating tables, creating ORM data objects. We will slowly and gradually learn a lot more about ORM.

A look at the model layer
Another thing which the propel command did was, it created the whole ORM module. If you go to C:\Workspace\Symfony\Authentication\lib\model you can see 2 folders being created and a few files too.

For every table, propel build 5 files under the model folder. These files are basically the class files, which will provide use with a database object which we can use to select or insert data in the database.

C:\Workspace\Symfony\Authentication\lib\model\om\BaseUsers.php &
C:\Workspace\Symfony\Authentication\lib\model\om\BaseUsersPeer.php are the only 2 files which will be re-created when you run the propel command again.

The file positioned at
C:\Workspace\Symfony\Authentication\lib\model\Users.php &
C:\Workspace\Symfony\Authentication\lib\model\UsersPeer.php will be as it is from this point in time. If you write your own methods in them, they will remain as it is even when you re-create your database schema.

We will use these created ORM files to insert, delete, select data from the databases. In symfony we can actually skip writing a SQL query (though we can always write a direct query too)

Writing the backend Code:
With UI and database in shape, its time to write our backend code which will handle the registration form submission. If you notice the source code of our form, the action field is set as :

<form id=”registration” action=”<?php echo url_for(”Registration/index”); ?>” method=”POST”>

In symfony we have a lot of helper functions which we can use. In this case we users url_for helper function, which helps in generating a url with <module>/<modulefile> being passed as parameter.

So we have our form being submitted to indexSuccess.php itself, i.e. SELF.
Hence lets go to executeIndex() method in action.class.php and write the code which will handle the submitted form.

Copy the modified action.class.php file from the vault location. I have documented every line inside the code, which will walk you through the code. Understand the flow and continue reading.

However before we insert any data in the database, we need to give the database parameters. Go to
C:\Workspace\Symfony\Authentication\config\databases.yml
and uncomment the lines of code in there. Finally it should be of the following structure:

all:
  propel:
    class:          sfPropelDatabase
    param:
      dsn:          mysql://root:password@localhost/authentication

Lastly open:
C:\Workspace\Symfony\Authentication\apps\Auth\config\settings.yml
and go to the last line of the file. You will find
# compat_10    off
being commented out
Uncomment it and then turn on compat_10 i.e.
compat_10    on

Clear your cache, before submitting the form (symfony clear-cache) and then try to register.

If you have followed everything, you will be able to successfully able to register and visit mainSuccess.php of the module.

I have documented all the code which you can download from the vault location. Read it, try it, play with it.

PS: The best documentation is available at symfony-project website. This tutorial was intended to
build a real life scenario application using Symfony. Though I must admit that I still haven’t used 100% possible symfony
for this application, just to make it simple but still give you a feel of how things flow in symfony.

Leave a comment if you have any doubt or difficulty in implementing the code.
Do leave a comment even if you like the code

Tags: Symfony, PHP, Framework, Tutorial, MVC, Propel

Yahoo! Social Platform (YSP)
See: http://developer.yahoo.com/social

Yahoo! Query Language (YQL)
See: http://developer.yahoo.com/yql

Yahoo! Application Platform (YAP)
See: http://developer.yahoo.com/yap

Caja, security, and user privacy
For more info on Caja: http://developer.yahoo.com/yap/caja

OAuth
See: http://developer.yahoo.com/oauth

OpenSocial Support
This launch also marks Yahoo!’s first implementation of OpenSocial support.
http://opensocialapis.blogspot.com/2008/10/launched-yahoos-first-implementation-of.html

Hats off to Yahoo!
Y!OS is out there.  Yahoo! is Open.

Tags: Yahoo, Open, Open Social, OAuth, YSP, YQL, YAP, Caja

I have been working on OpenLaszlo for quite sometime now and found it every easy to build custom flash widgets using it. In my first tutorial on OpenLaszlo, we will together learn a few specs of Openlaszlo and then code a tiny little flash media player.

Getting started with Openlaszlo:

1. Openlaszlo is a framework which allows you to build flash widgets easily and faster. Biggest advantage is that you need not write any action scripting for building your flash widget. In laszlo we write code in XML format (files saved with extension .lzx) and then Laszlo server compiles our .lzx files to output a flash .swf file. WOW!
2. Download your copy of laszlo from http://openlaszlo.org/download and install. If you are on windows, installation is simple. Just double click the downloaded .exe file and it will install everything for you. For me my installation is at C:\OpenLaszlo Server 4.0.12
3. Create a directory C:\OpenLaszlo Server 4.0.12\Server\lps-4.0.12\Workspace . I generally do all my laszlo specific development under Workspace directory. (Adjust the path as per your installation)
4. Create a folder inside Workspace named audioplayer
5. Start the laszlo server.

Building an audioplayer in laszlo:

Before we proceed you may checkout the code repository from Google Code Base:

1. As I wrote before, laszlo code files have an extension called .lzx . Lets first see a demo and then we will learn the syntaxes etc. You can find the explanation of the codes below within the code as comments
2. Create a file called main.lzx and copy paste the following lines of code in it:
   <canvas id=”miniplayer” medialoadtimeout=”120000″ bgcolor=”#FFFFFF” debug=”true”>
    
     <!– This file takes care of toggling for the play/pause button –>
     <include href=”playpausemultibutton.lzx”/>
    
     <!– Include the MP3 player class –>
     <include href=”player.lzx”/>
    
     <!– Main view containing everything within it –>
     <view x=”5″>
       <simplelayout axis=”x” spacing=”5″/>
       <!– PLAY-PAUSE BUTTON PANEL –>
       <view name=”buttonpanel” id=”buttonpanel” y=”1″ bgcolor=”#EEEEEE”>
         <multistatebutton id=”playpausetoggle” name=”playpausetoggle” bgcolor=”#EEEEEE”
         resource=”playpause_rsrc” align=”center” statenum=”0″ statelength=”2″ maxstate=”1″ onclick=”this.toggle()”>
           <method name=”toggle”>
             if (this.statenum == 0) {
               this.setStateNum(1);
               <!– if players is already loaded with a song just play it, otherwise load it again with mp3url –>
               if(audioplayer.nowplaying == false) {
                 audioplayer.setAttribute(”nowplaying”,true);
                 audioplayer.setResource(global.mp3url);
               }
               else {
                 audioplayer.play();
               }
             }
             else {
               this.setStateNum(0);
               audioplayer.stop();
             }
           </method>     
         </multistatebutton>
       </view>
      
       <!– Include the audioplayer class –>
       <player id=”audioplayer” width=”100%” height=”100%”/>
      
     </view>
   </canvas>
3. Create a file called playpausemultibutton.lzx and copy paste the following lines of code in it:
   <library>
     <resource name=”playpause_rsrc”>
        <!–  State: 0 –>
        <!– first  frame of state 1 = mouseup   image of the button –>
        <frame src=”icons/play_blue.png”/>
        <!– third  frame of state 1 = mousedown image of the button –>
        <frame src=”icons/pause_blue.png”/>

        <!–  State: 1 –>
        <!– first  frame of state 2 = mouseup image of the button –>
        <frame src=”icons/pause_blue.png”/>
        <!– third  frame of state 2 = mousedown image of the button –>
        <frame src=”icons/play_blue.png”/>
     </resource>
   </library>

4. Create a file called player.lzx and copy paste the following lines of code in it:
   <library>
    
     <!– THE AUDIOPLAYER PLAYING CLASS –>
     <class name=”player” extends=”view” visible=”true” play=”false”>
      
       <!– Attribute which captures the player nowplaying stat –>
       <attribute name=”nowplaying” value=”false”/>
      
       <!– Attribute which captures the player loading stat –>
       <attribute name=”loading” value=”false”/>
      
       <!– Write ‘onlastframe’ handler –>
       <handler name=”onlastframe”>
         this.setAttribute(”nowplaying”,false);
         this.setAttribute(”loading”,false);
         playpausetoggle.toggle();
       </handler>
      
       <!– Write ‘onloadperc’ handler –>
       <handler name=”onloadperc” args=”p”>
         if(p > 0) {
          
         }
         if(p &lt; 1) {
           audioplayer.setAttribute(”loading”,true);
         }
         else if(p == 1) {
           audioplayer.setAttribute(”loading”,”done”);
         }
       </handler>
      
       <!– Write ‘onunload’ handler –>
       <handler name=”onunload”>
         if(this.nowplaying) {
           this.setAttribute(”nowplaying”,false);
           this.stop();
         }
       </handler>
      
       <!– Write ‘onplay’ handler –>
       <handler name=”onplay”>
         this.setAttribute(”nowplaying”,true);
       </handler>
      
       <!– Write ‘onload’ handler –>
       <handler name=”onload”>
       </handler>
      
       <!– Write ‘onframe’ handler –>
       <handler name=”onframe”>
       </handler>
      
       <!– Write ‘onstop’ handler –>
       <handler name=”onstop”>
       </handler>
      
       <!– Write ‘ontimeout’ handler –>
       <handler name=”ontimeout”>
       </handler>
      
     </class>
    
   </library>
5. Create a file called mediaplayer_dev.html and copy paste the following lines of code in it: (This is development environment file, mediaplayer.html is the production environment file which you can find in code repository)
   <html>
     <head>
       <title>Flash Audio Player</title>
       <script type=”text/javascript” src=”swfobject.js”></script>
     </head>
     <body>
       <div id=”flashcontent” width=”100%”>
         This text is replaced by the Flash movie.
       </div>