How to build a login-registration system using Symfony – A PHP Framework – Part 2

Hello again,

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:WorkspaceSymfonyAuthentication
  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:WorkspaceSymfonyAuthenticationappsAuth)
  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:php5peardatasymfonywebsf folder to C:WorkspaceSymfonyAuthenticationwebsf. At the end of this part, we will learn how can we skip this copying again and again
  10. Open C:WorkspaceSymfonyAuthenticationappsAuthmodulesRegistrationactionsactions.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:WorkspaceSymfonyAuthenticationappsAuthconfigrouting.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:WorkspaceSymfonyAuthenticationappsAuthmodulesRegistrationtemplates 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:WorkspaceSymfonyAuthenticationappsAuthtemplateslayout.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:WorkspaceSymfonyAuthenticationconfigschema.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:WorkspaceSymfonyyahooconfigpropel.ini
  6. Open it and change the lines as below:
    propel.database.createUrl  = mysql://[email protected]/
    propel.database.url        = mysql://root:[email protected]/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:WorkspaceSymfonyAuthenticationlibmodel 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:WorkspaceSymfonyAuthenticationlibmodelomBaseUsers.php &
C:WorkspaceSymfonyAuthenticationlibmodelomBaseUsersPeer.php are the only 2 files which will be re-created when you run the propel command again.

The file positioned at
C:WorkspaceSymfonyAuthenticationlibmodelUsers.php &
C:WorkspaceSymfonyAuthenticationlibmodelUsersPeer.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:WorkspaceSymfonyAuthenticationconfigdatabases.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:[email protected]/authentication

Lastly open:
C:WorkspaceSymfonyAuthenticationappsAuthconfigsettings.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 😉

Y!OS Developer Release is Live. Yahoo! is open!

Today, Yahoo opened the developer interfaces to our Y!OS platform stack through the release of the Yahoo! Social Platform (YSP), Yahoo! Query Language (YQL), Yahoo! Application Platform (YAP), and the YDN developer dashboard.  This makes Y!OS a reality for an essential constituency: developers.  Now, anyone on the web has access to Yahoo!’s tools and data to start building applications for Yahoo!’s vast audience and the web beyond.  It’s a great step forward in rewiring Yahoo! with a social dimension and a platform architecture that’s open like never before.

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.


How to create a single button flash audio player using Openlaszlo?

Hello Everyone,

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.12Serverlps-4.0.12Workspace . 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:

svn checkout http://abhinavsingh.googlecode.com/svn/trunk/ abhinavsingh-read-only

  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>
        <script type=”text/javascript”>
          var so = new SWFObject(“main.lzx?lzt=swf&debug=true”, “singlebuttonplayer”, “100%”, “100%”, “7”, “#FFFFFF”);
          so.addParam(“quality”, “high”);
          so.addParam(“scale”, “exactfit”);
          so.addParam(“salign”, “LT”);
          so.addParam(“menu”, “false”);
          so.addParam(“wmode”, “opaque”);
          so.addParam(“allowScriptAccess”, “always”);
         
          //Set the mp3urlfor the song
          so.addVariable(“mp3url”,”http://127.0.0.1:8080/lps-4.0.12/Workspace/audioplayer/Liquid Tension Experiment – Acid Rain.mp3″);
         
          so.write(“flashcontent”);
        </script>
      </body>
    </html>
  6. Create a folder called icons and copy the two icons which you checked out from the code repository.
  7. Copy an mp3 file from your hard disk and copy paste it in the folder. Then edit the mp3url in above code of mediaplayer_dev.html
  8. Copy and paste the swfobject.js file which you have checked out from code repository.

That all we need to test run our single button audio player. Now simply open the following URL in your browser: (edit it as per your folder names)
http://127.0.0.1:8080/lps-4.0.12/Workspace/audioplayer/mp3player_dev.html
and you can see the audio player playing your mp3 song 🙂

Now we can see our file playing the mp3 well and we would like to generate a flash file out of our main.lzx file. For this laszlo have their inbuild compilers which will compile the flash file for you. Simply open the url:
http://127.0.0.1:8080/lps-4.0.12/Workspace/audioplayer/main.lzx
and then check swf8 at the bottom of the page under compile options and press compile

From here on you have two options:

  1. Either to use laszlo specific embedding strategy i.e. If you proceed with further steps after pressing compile, laszlo will give you a set of javascript files which you can use to embed your audio player.
  2. Or you can use swfobject.js to embed your flash files in your website. (Recommended)

I assume you will use swfobject.js and in that case you may simply stop after pressing compile. See the folders and you can see  two .swf files being generated into the folder. These are our final production level flash audio player files.

Now lets see how to use these .swf files in our pages. Simply rename them to alterplayer.swf and create a file called mediaplayer.html and copy paste the below code in it:

<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>
    <script type=”text/javascript”>
      var so = new SWFObject(“alterplayer.swf”, “singlebuttonplayer”, “100%”, “100%”, “7”, “#FFFFFF”);
      so.addParam(“quality”, “high”);
      so.addParam(“scale”, “exactfit”);
      so.addParam(“salign”, “LT”);
      so.addParam(“menu”, “false”);
      so.addParam(“wmode”, “opaque”);
      so.addParam(“allowScriptAccess”, “always”);
     
      //Set the mp3urlfor the song
      so.addVariable(“mp3url”,”http://mysite.com/songname.mp3″);
     
      so.write(“flashcontent”);
    </script>
  </body>
</html>

We did not much change from mediaplayer_dev.html. Simply replaced .lzx file with actual .swf file and the mp3url also change to your production level mp3 url.

Thats pretty much of what we actually wanted to have. 🙂

In future we will see how to build a:

  1. Single Button Player which also shows the time
  2. Single Button Player with progress bar and volume control
  3. Audio Player capable of playing a whole mp3 playlist.
  4. Audio Player with AJAX search enabled in it.

If you want to see the final version of flash player which we will slowly learn to develop, kindly visit Altertunes (my first ever site :))

Kindly let me know if you are having trouble in learning and running this player. I will more than happy to contribute and share further.

Document Reference:

  1. http://www.openlaszlo.org/lps4/docs/
  2. http://www.openlaszlo.org/lps3/docs/reference/
  3. You can find some great help from the official forum http://forum.openlaszlo.org/

Let me know your feedbacks.

Getting started with Symfony – A PHP Framework – Part 1

Hello Friends,

Since past few weeks I have been pushed into something which I have never favored i.e. using a framework for my development. Using a framework can become even more harder if you know all the actual HTML, CSS, JS, PHP coding. Then you just wonder WHY? WHY? WHY?

Anyways I had to do it using Symfony PHP framework and there was no way out. As I couldn’t find much help outside http://symfony-project.com , it made even more difficult for me to implement and understand symfony.  So I thought of writing a tutorial, which can help many others like me out there and also act as a reference for me in future. Here instead of giving a theory lecture straight up, we will learn along with little hands-on developments.

Installation:
Before installing Symfony I assume we already have Apache, PHP 5 and MySQL installed on your system. If you don’t have them already installed, read this post of mine on how to configure WAMP on your windows. How to Install Apache, PHP 5 and MySQL on Windows?

This method works equally on Windows and Unix systems. On windows open your command line and on Unix open a terminal window.

  1. Go to My Computer -> Right Click -> Click on Properties -> Advanced Tab -> Environment Variables -> Create a PATH variable if it doesn’t already exists -> Add C:PHP as the PATH variable value.
  2. Go to Start -> Run -> Type cmd -> Type C:> pear channel-discover pear.symfony-project.com
  3. Type C:> pear install symfony/symfony-1.0.18 , it will install symfony latest stable version for you. (1.0 at the time of writing this tutorial)
  4. If you are having trouble installing, post a message here or refer http://www.symfony-project.org/installation/1_0 for more details.

So now you have symfony framework installed and we will learn how to build our first project in symfony.

My first Project:
Before we go ahead in making our first php project using symfony, just a little theory without which its impossible to understand the flow. Symfony projects are designed as follows:

       My First Project –> Application 1 —-> Module 1
                                  |                              |
                                  |                              –> Module 2
                                  |
                                  -> Application 2 —-> Module 1
                                  |                              |
                                  |                              –> Module 2
                                  |                              |

                                  |                              –> Module 3
                                  |
                                  -> Application 3 —-> Module 1

So in your Project your can have multiple Applications and inside every application you can have multiple Modules.

  1. Go to your Apache Web Folder (Document Root) which in my case is C:Workspace.
  2. Create a folder called Symfony. We will keep all our symfony related development work in this folder.
  3. Go inside the folder C:WorkspaceSymfony and create another folder for our 1st project. Lets name it HelloWorld
  4. Open your command line and go to the above folder path i.e. type ‘cd C:WorkspaceSymfonyHelloWorld’ on your command line.
  5. Type ‘symfony init-project HelloWorld’ and press enter. This will automatically create the project directory structure for you. Don’t be afraid if you see some 10 folders being create by the last command.

Don’t close the command line window, we will need that throughout.

So by now we have our first symfony project folder ready (structurally). But to view this on your browser we need atleast 1 application and atleast 1 module in that application. Lets create them quickly.

  1. Type ‘symfony init-app HelloWorld’ and press enter. This will create an application folder C:WorkspaceSymfonyHelloWorldappsHelloWorld. Now lets create a module inside this application
  2. Type ‘symfony init-module HelloWorld HelloWorld’ and press enter. This command means, create a module named HelloWorld inside application HelloWorld. Generic level syntax is ‘symfony init-module [application] [module]’

So we have our first symfony project ready. Type http://localhost/Symfony/HelloWorld/web in your browser window and press enter. You will see a page like this:


Figure 1

But this is not what it should be. If you read the page, it says “If you see no image in this page, you may need to configure your web server so that it gains access to the symfony_data/web/sf directory”.

So all you need is to copy folder C:php5peardatasymfonywebsf (in my case) to C:WorkspaceSymfonyHelloWorldwebsf. If you don’t find sf folder at the specified place, kindly search for it on your system. It was created when we were installing symfony.

After copying the folder refresh your web page again and see if you see any difference. For me it looks like:


Figure 2

Well Congratulations ! You just made your first symfony project. But unfortunately you know 0% of what did. Right? Lets understand what exactly is going in the background.

A bit about MVC Architecture:
Symfony follows MVC (Model-Viewer-Controller) Architecture to the core. If you haven’t worked with MVC architectural frameworks before, it can really take sometime to get a feel of it. I took about a week to actually understand what goes in the background.

MVC Architecture is nothing but breaking your whole page code into three parts namely Model (Database) , Viewer (Frontend HTML Pages) and Controller (Which fetches data from Model i.e. database and provide it in required format to Viewer i.e. what we finally see on our browsers). This is a very layman definition which I have given. We will slowly and gradually see each aspect of MVC in Symfony.

A bit about ORM (Object Relational Mapping):
This is yet another programming technique which you will find in each and every framework. In layman language, ORM provides you an object to handle your database. You need not write a SQL Query in actual at any point in your project. You will access all your database rows using this ORM Object.

Strange it may seem at first, but consider a big project running on MySQL with a lot of INSERT queries. Now at some point in time when database size reaches > 50 Gb or so and you are finding MySQL not efficient enough to handle such a large database, you would want to change to a database like Oracle. In such a scenario, ORM takes all the headache off from you, as you need not care about the actual SQL queries that goes in the background. ORM automatically takes care of this stuff.

Understanding Symfony Directory Structure:
The Symfony directory structure of our first project will look like this:


Figure 3

Remember we still don’t have anything dealing with the databases, hence I can say that Model layer is still missing from the directory structure. But let us first complete our targeted “Hello World” application.

  1. Go to HelloWorld/apps/HelloWorld/config folder and open the file rounting.yml
  2. Change the 4th line in that file from – param: { module: default, action: index } to param: { module: HelloWorld, action: index }
  3. We will learn about all .yml files which you see, but as of now lets focus on what we just did. By default our Symfony project points to a default module created by Symfony. Thats why we see Figure 2 above. By changing the above piece of code, we are telling our HelloWorld application inside HelloWorld project that, by default point to my HelloWorld Module. Confusing! Read the last line again and continue reading 😉
  4. Go to HelloWorld/apps/HelloWorld/modules/HelloWorld/actions and open the file actions.class.php
  5. Comment the following php code $this->forward(‘default’, ‘module’); inside executeIndex() method.
  6. Go back to your command line and type: ‘symfony clear-cache’
  7. Type http://localhost/Symfony/HelloWorld/web in your browser window and press enter.

Bingo! You see a blank white page. Lets understand what we actually did. But before that just a few points on how a page is actually displayed in Symfony.

  1. When we type http://localhost/Symfony/HelloWorld/web in our browser, index.php in the web folder goes to routing.yml file
  2. Routing file then tells which module to follow by default. By following Step 2 above, we directed the flow to our HelloWorld module.
  3. Then flow goes to the actions.class.php file of the module provided by Routing file. Hence in our case it must have gone to actions.class.php file of HelloWorld module.
  4. It looks for executeIndex() method in the class file, executes it and
  5. Finally goes to indexSuccess.php file placed under the template folder of our HelloWorld Module.

But since our actions class method was already diverting the flow to the default module, flow won’t have come to step 5 above and would have gone to default symfony module. By commenting out the line in step 5 above, we actually skip this forwarding and the flow comes to indexSuccess.php file under templates module. And finally since indexSuccess.php file is a blank file, we see a blank page. 🙂

Read the above 2 point charts carefully. If you can understand this flow, you already conquered half the symfony.

Note: All this will go waste if you forget ‘symfony clear-cache’ in step 6 above. As a rule of thumb, always run this command when ever you make any changes to any of the .yml files.

My First Project “HelloWorld”
Open indexSuccess.php and type <h1>Hello World</h1> into it. Run http://localhost/Symfony/HelloWorld/web in our browser, and thats it 🙂 You will see a page like below.

And with that we completed our Part 1 of this Symfony tutorial series. In upcoming parts of the series we will learn how to manage databases and build a bit more complex application and modules. Post your doubts and comments if any.

Note: I am myself learning many parts in Symfony and I myself gather knowledge by experimentation and through various web sources. Hence if a Symfony expert is reading this and find anything wrong, kindly correct me.

Yahoo Web Analytics (Beta) – Far more better than Google Analytics

Born out of our acquisition of IndexTools in May, Yahoo! Web Analytics (beta) provides powerful data and insights reporting that help website owners evaluate their marketing performance and tweak their website designs. They’ll get custom real-time reports and graphs that help them slice and dice metrics like sales, page views, and sources of traffic and ultimately identify ways to amp up their visitor satisfaction.

The first big deployment is Yahoo! Small Business, whose 13,000 hosted e-commerce customers can get set up just in time for the holiday shopping season at the click of a button.

Read more http://ycorpblog.com/2008/10/08/introducing-yahoo-web-analytics/

A Light Weight Javascript calendar for your websites and blogs

Hello Everyone,

Well you can find a lot of such calendars out there in the market, and this is yet another one for you. I made this to embed with my scheduling calendar which you can find here. Calendar with auto notification and demo

Check out the source code from the google code repository:
svn checkout http://abhinavsingh.googlecode.com/svn/trunk/ abhinavsingh-read-only