Menu ▾ ▴

Lesson 3: Create base template and Home page

p5chi
Attachments
Home_Page.png (133736 bytes)

The design of application will look like this:

Main Designe

If you generate bundles with Symfony2 code generator then you should have a DefaultController.php in Controllers folder else you will need to create one. So open the DefaultController.php and modify it:

<?php

namespace Xshare\GeneralBundle\Controller;

use Symfony\Bundle\FrameworkBundle\Controller\Controller;

use Sensio\Bundle\FrameworkExtraBundle\Configuration\Route;
use Sensio\Bundle\FrameworkExtraBundle\Configuration\Template;
use Xshare\ProductBundle\ProductGeneral;


class DefaultController extends Controller
{
   /**
    * render the Home page 
    * @return Response 
    * @Route("/{_locale}/", defaults={"_locale"="ro"}, requirements = {"_locale" = "ro|en"})
    * @Template()
    */
    public function indexAction()
    {

        //breadcrumbs 
        $breadcrumbs = $this->get("white_october_breadcrumbs");
        $breadcrumbs->addItem($this->get('translator')->trans('Home'), null);
        //collecting data
        $data =array('send_variable_to_view'=>”Value from controller!”);
        return $this->render('XshareGeneralBundle:Default:index.html.twig', $data ) ;
      }
   }

for routing annotations were also been used.

To learn more about annotation routing access this page:
http://symfony.com/doc/current/bundles/SensioFrameworkExtraBundle/annotations/routing.html

To make breadcrumbs you should install WhiteOctoberBreadcrumbsBundle from www.github.com
https://github.com/whiteoctober/BreadcrumbsBundle. For installation instructions read the Readme.md file
If you will look in the source code you will see that at the end of the project index controller action became more complicated.
In the next step the views will be added to the project.
Symfony 2 use TWIG template engine. You can find more information about TWIG here: http://twig.sensiolabs.org/.
Because TWIG support templates extending a base.html.twig template will be created and it will be extended for the rest of the templates.
So, the base template will look like this:

<!--app/Resources/views/base.html.twig-->
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>{% block title %}{% endblock %}</title>
        {% block stylesheets %}
            <link rel="stylesheet" href="{{ asset('css/main.css') }}" type="text/css" media="all" />
            <link rel="stylesheet" href="{{ asset('css/ui-lightness/jquery-ui-1.8.21.custom.css') }}" type="text/css" media="all" />
            <link rel="stylesheet" href="{{ asset('js/fancyBox/jquery.fancybox.css') }}" />
        {% endblock %}
        {% block javascripts %}
            <script src="{{ asset('js/jquery-1.7.2.min.js') }}"></script>
            <script src="{{ asset('js/jquery-ui-1.8.21.custom.min.js') }}"></script>
            <script src="{{ asset('js/fancyBox/jquery.fancybox.js') }}" type="text/javascript"></script>
        {% endblock %}
        <link rel="shortcut icon" href="{{ asset('favicon.ico') }}" />
    </head>
    <body>
    {% block maincontent %}
           <!-- our html structure here--> 
    {% endblock %}
    </body>
</html>

and index layout will contain this:

<!--src/Xshare/GeneralBundle/Resources/views/index.html.twig-->
{% extends '::base.html.twig' %}

{% block title %}{{ "Home"|trans }}{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    <link rel="stylesheet" href="{{ asset('bundles/xsharegeneral/css/top-categories.css') }}" type="text/css" media="all" />
{% endblock %}

{% block maincontent %}
    {{send_variable_to_view}}
{% endblock %}

this will output a variable sent by controller.
Each bundle also contain the css and javascript files for its web pages. They are located in NameSpace/NameBundle/Resources/public/css
NameSpace/NameBundle/Resources/public/js
NameSpace/NameBundle/Resources/public/images
and the layouts in
NameSpace/NameBundle/Resources/views
the css, and js files are not available in web folder until you don't install them
or copy manually to the web folder.
To install them you can use Symfony 2 code generator 

$php app/console assets:install web

after this command if you look in /web/bundles/spacenamebundlename you should see all css and js files from your bundle in the src/ folder.
Now you will be able to access them using TWIG function asset ex:

<link rel="stylesheet" href="{{ asset('bundles/xsharegeneral/css/top-categories.css') }}" type="text/css" media="all" />

to see the complete code for Xhsare, please download the sources.