Tutorial: Hello World - Spryker Commerce OS
Edit on GitHubThis tutorial is also available on the Spryker Training web-site. For more information and hands-on exercises, visit the Spryker Training web-site.
Challenge description
Show “Hello World!” string on a web page on your browser. To do so, build a new module called HelloWorld.
Build the HelloWorld module
The steps described in this procedure describe how to build a new module. To add a new Yves module called HelloWorld, do the following:
- Go to
/src/Pyz/Yves/
and add a new module called HelloWorld.
A new module is simply a new folder.
- Add a new controller for the module.
Add a new folder inside the HelloWorld module called
Controller
, and then add the following controller class calledIndexController
:
<?php
namespace Pyz\Yves\HelloWorld\Controller;
use Spryker\Yves\Kernel\Controller\AbstractController;
use Symfony\Component\HttpFoundation\Request;
class IndexController extends AbstractController
{
/**
* @param Request $request
*
* @return \Spryker\Yves\Kernel\View\View
*/
public function indexAction(Request $request)
{
$data = ['helloWorld' => 'Hello World!'];
return $this->view(
$data,
[],
'@HelloWorld/views/index/index.twig'
);
}
}
-
Add the route to the controller:
- Add a new folder inside the HelloWorld module called
Plugin
. - Inside the Plugin folder, add a folder called Provider.
- Add your
RouteProviderPlugin
class with the nameHelloWorldRouteProviderPlugin
:
- Add a new folder inside the HelloWorld module called
<?php
namespace Pyz\Yves\HelloWorld\Plugin\Provider;
use Spryker\Yves\Router\Plugin\RouteProvider\AbstractRouteProviderPlugin;
use Spryker\Yves\Router\Route\RouteCollection;
class HelloWorldRouteProviderPlugin extends AbstractRouteProviderPlugin
{
protected const ROUTE_HELLO_WORLD = 'hello-world';
/**
* @param \Spryker\Yves\Router\Route\RouteCollection $routeCollection
*
* @return \Spryker\Yves\Router\Route\RouteCollection
*/
public function addRoutes(RouteCollection $routeCollection): RouteCollection
{
$route = $this->buildRoute('/hello-world', 'HelloWorld', 'Index', 'indexAction');
$routeCollection->add(static::ROUTE_HELLO_WORLD, $route);
return $routeCollection;
}
}
- Register the
RouteProviderPlugin
in the application, so the application knows about your controller action. Go toRouterDependencyProvider::getRouteProvider()
method inRouter
module and addHelloWorldRouteProviderPlugin
to the array. - Finally, add the twig file to render your Hello World page. Add the following folder structure inside the HelloWorld module:
Theme/default/views/index
.
This folder structure reflects your theme and controller names. Default is the theme name, and index is the controller name. For every action there is a template with the same name.
As your action is called index, add a twig file for your action called index.twig
:
{% extends template('page-layout-main') %}
{% define data = {
helloWorld: _view.helloWorld
} %}
{% block content %}
<div><h2>{{ data.helloWorld }}</h2></div>
{% endblock %}
- Open the new page
http://www.de.suite.local/hello-world
.
Thank you!
For submitting the form