Tutorial : Develop To-Do List App with Symfony2 – Part 1

Symfony2 has gained its pace and become more and more popular since year 2011. In order to get your hands on this new version of symfony framework, the best way is to develop a simple project and dive into it.

Today i share with you all my journey to learn symfony2, hope this will help for those are interested.

 

Step 1
In order to setup a project on your local PC/laptop, do download a copy of standard version with vendor of symfony zip file at
http://symfony.com/download

Extract the zip file to your local web server’s root directory or project folder.

 

Step 2
I rename the “Symfony” folder to the project name – “sf2todo“.

So the basic structure for the “sf2todo” project will be as below:

www/ <- your web root directory
    sf2todo/ <- the unpacked archive
        app/
            cache/
            config/
            logs/
            Resources/
            ...
        bin/
            ...
        src/
            ...
        vendor/
            ...
        web/
            app.php
            app_dev.php
            ...

 

Step 3
Now you can configure your httpd apache config file and add the project configuration at the end of file.

# /etc/httpd/conf/httpd.conf

NameVirtualHost 127.0.0.1

<VirtualHost 127.0.0.1>
  ServerName sf2todo
  DocumentRoot "/var/www/sf2todo/web"
  DirectoryIndex app.php
  <Directory "/var/www/sf2todo/web">
    AllowOverride All
    Allow from All
  </Directory>
</VirtualHost>

 

Step 4
Next you need to a new domain line to the bottom of the host file located at /etc/hosts. (Tips: you need to edit using sudo privilege at linux server or run as administrator at windows)

# /etc/hosts
127.0.0.1     sf2todo

 

Step 5
Finally, you need to restart your apache by using following command:

#1 Linux

$ sudo service httpd restart

OR

#2 Windows
Restart the apache using Services control panel.

 

Step 6
Symfony2 comes with a visual server configuration tester to help make sure your web server and PHP are configured to use Symfony. You can use the following URL to check your server configuration:

http://sf2todo/config.php

Try to fix those warnings or errors before proceed to next step.

 

Step 7
Click “Configure your Symfony Application Online” and will be redirected to the configuration page as below.

Here you need to fill up the database configuration.

 

Step 8
Click “Next Step” and you will see the Global Secret page where you can choose to generate or use the default generated secret key.

 

Step 9

Click “Next Step” and complete the process and it show the final configuration.

 

Step 10
Finally run command prompt and cd to sf2todo folder, now it is time to create a bundle named “ToDoBundle” for this application by typing following command at the command prompt:

 php app/console generate:bundle --namespace=Tsang/ToDoBundle --format=yml 

Just click Enter all the way for default settings till the bundle was generated successfully.

 

Step 11

Now we have to configure few files in order to get our basic landing page.

Open /app/config/routing.yml and write code as below:

# Internal routing configuration to handle ESI
#_internal:
#   resource: "@FrameworkBundle/Resources/config/routing/internal.xml"
#   prefix:   /_internal

_todo_bundle:
 resource: "@TsangToDoBundle/Resources/config/routing.yml"

Then updated /app/config/routing_dev.yml as below :

_demo_secured:
 resource: "@AcmeDemoBundle/Controller/SecuredController.php"
 type:     annotation

_demo:
 resource: "@AcmeDemoBundle/Controller/DemoController.php"
 type:     annotation
 prefix:   /demo

_assetic:
 resource: .
 type:     assetic

_wdt:
 resource: "@WebProfilerBundle/Resources/config/routing/wdt.xml"
 prefix:   /_wdt

_profiler:
 resource: "@WebProfilerBundle/Resources/config/routing/profiler.xml"
 prefix:   /_profiler

_configurator:
 resource: "@SensioDistributionBundle/Resources/config/routing/webconfigurator.xml"
 prefix:   /_configurator

_main:
 resource: routing.yml

The new generated bundle structure :

There are 3 files need to be updated:

1) /src/Tsang/ToDoBundle/Controller/DefaultController.php

<?php

namespace Tsang\ToDoBundle\Controller;

use Symfony\Bundle\FrameworkBundle\Controller\Controller;
use Sensio\Bundle\FrameworkExtraBundle\Configuration\Route;
use Sensio\Bundle\FrameworkExtraBundle\Configuration\Template;

class DefaultController extends Controller
{
/**
* @Route("/")
* @Template()
*/
  public function indexAction()
  {
    return $this->render('TsangToDoBundle:Default:index.html.twig');
  }
}

2) /src/Tsang/ToDoBundle/Resources/config/routing.yml

homepage:
resource: "@TsangToDoBundle/Controller/DefaultController.php"
type:     annotation
prefix:   /

3) /src/Tsang/ToDoBundle/Resources/views/Default/index.html.twig

<div align="center">
 <h2>Welcome to Sf2Todo List by Terry Tsang!</h2>
</div>

 

Final Step
After all those steps above, you need to run below command to clear cache for both dev and prod environment:

php app/console cache:clear

php app/console cache:clear --env=prod

You now can browse to http://sf2todo/ and have below temporary landing page.

If you are interested, remember to stay tuned for my next part of symfony2 tutorial, cheers!