Example 7b # Using all features

This example is a little bit more complex and start using some base functions of the kitFramework.

The route for the kitCommand ~~ sample07b ~~:

$app->match('/command/sample07b/{parameters}', function ($parameters) use ($app) {
    $Sample = new Sample07($app, $parameters);
    return $Sample->Sample07b();
});

The response function Sample07b():

public function Sample07b()
{
    $form = $this->app['form.factory']->createBuilder('form')
    ->add('name', 'text')
    ->getForm();

    if (isset(self::$POST['form']['name'])) {
        // the form was already submitted
        $this->setMessage($this->app['translator']->trans('<p>Hello %name%, nice to meet you!</p>',
            array('%name%' => self::$POST['form']['name'])));
    }

    return $this->app['twig']->render($this->app['utils']->templateFile('@thirdParty/HelloWorld/Template', 'sample07b.twig'),
        array(
            'form' => $form->createView(),
            'action' => self::$cms['page_url'],
            'name' => (isset(self::$POST['form']['name'])) ? self::$POST['form']['name'] : '',
            'message' => $this->getMessage()
    ));
}

Lets start to explain this function.

    $form = $this->app['form.factory']->createBuilder('form')
    ->add('name', 'text')
    ->getForm();

The FormServiceProvider enable you to easy define forms and validate the submitted data. Above we define a form which contain a text input field with the name name and assign it to the variable $form.

The function Sample07b() is used to show the form but also to check the submitted data.

    if (isset(self::$POST['form']['name'])) {
        // the form was already submitted
        $this->setMessage($this->app['translator']->trans('<p>Hello %name%, nice to meet you!</p>',
            array('%name%' => self::$POST['form']['name'])));
    }

If the variable self::$POST['form']['name'] is set, the function create a message. The TranslationServiceProvider is used to translate the message into the actual set locale. Do you remember? In the article about the kitFramework Extensions we have seen, that the bootstrap.include.php loads the available language files.

The usage of the translation service within the kitFramework is: use english as native language, type all messages, labels a.s.o. in english and translate it in the additional languages you want to support.

Have a look at

/kit2/extension/thirdparty/thirdParty/HelloWorld/Data/Locale/de.php

this file contains the Hello World translations into the german language. The structure of language files are associative arrays and the strings are explaining itself. Within the strings you will find placeholders like %name% which will be replaced with actual values at runtime.

return $this->app['twig']->render($this->app['utils']->templateFile('@thirdParty/HelloWorld/Template', 'sample07b.twig'),
        array(
            'form' => $form->createView(),
            'action' => self::$cms['page_url'],
            'name' => (isset(self::$POST['form']['name'])) ? self::$POST['form']['name'] : '',
            'message' => $this->getMessage()
        ));

Render the template sample07b.twig and assign the variables form (with the form object), action (the URL of the CMS Page which contain the kitCommand), the name (if not empty) and the translated message.

Now have a look at the template:

<div class="sample_07_container">
  <h2>{{ 'Please type in your name'|trans }}</h2>
  {% if message|length > 0 %}
    <div class="message">{{ message }}</div>
  {% endif %}
  <div class="framework_form">
    <form action="{{ action }}" method="post"> 
      {{ form_widget(form) }}
      <label for="form_submit">&nbsp;</label><input id="form_submit" type="submit" value="{{ 'Submit'|trans }}" /> 
    </form>
  </div>
</div>

It's really small ... 8-)

<h2>{{ 'Please type in your name'|trans }}</h2>

use the translation service also within the templates!

{% if message|length > 0 %}
  <div class="message">{{ message }}</div>
{% endif %}

If a message is set display a container and prompt the message.

<form action="{{ action }}" method="post"> 
  {{ form_widget(form) }}
  <label for="form_submit">&nbsp;</label><input id="form_submit" type="submit" value="{{ 'Submit'|trans }}" /> 
</form>

That is the complete form with all defined fields - {{ form_widget(form) }} will do the complete job.

OK - please execute the kitCommand ~~ sample07b ~~ and look at the output. Type in a name and submit the form. It still works.

But it does not look very nice, or?

Change the kitCommand to

~~ sample07b css[helloworld,css/sample07.css] ~~

save it and reload the page. Better, or not?

The parameter css[helloworld,css/sample07.css] tells the kitFramework to search for the Template directory of helloworld and load the CSS file sample07.css from the subdirectory /css.

The CSS file will be inserted before the </head> tag of the current page. If you want that the kitFramework places CSS files at a specific position you can insert the marker

<!-- kitFramework:CSS -->

into the WebsiteBaker or LEPTON CMS Template. If this marker exists, kitFramework will place CSS files below it.

In the same way as CSS you can load JavaScript (jQuery) files, use the parameter:

js[<directory>,<file>]

The JS file will also inserted before the </head> tag of the current page. If you want to place the JS file at a specific position you can use the marker:

<!-- kitFramework:JS -->

Be aware that kitFramework does not care about dependencies of JavaScript or jQuery files, it still load the desired file.

Now you have seen some functions of the kitFramework and learned a little bit about kitCommands. Until this point all solutions where kept simple. With the next example we will try to show you who to use the kitFramework and kitCommands to create interactive applications running within your CMS.

[ Home ] [ Example 8: Start ]