PHPackages                             a-proud/twiew-bundle - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Templating & Views](/categories/templating)
4. /
5. a-proud/twiew-bundle

ActiveSymfony-bundle[Templating & Views](/categories/templating)

a-proud/twiew-bundle
====================

Provide simple and powerfull templates based on twig

06PHP

Since Jul 16Pushed 9mo ago1 watchersCompare

[ Source](https://github.com/a-proud/twiew-bundle)[ Packagist](https://packagist.org/packages/a-proud/twiew-bundle)[ RSS](/packages/a-proud-twiew-bundle/feed)WikiDiscussions main Synced 1mo ago

READMEChangelogDependenciesVersions (1)Used By (0)

A-Proud/Twiew Bundle
====================

[](#a-proudtwiew-bundle)

Provide simple and powerfull templates based on twig. The AProud\\TwiewBundle is designed to render an HTML page by settings, defined in a PHP array or YAML file. It allows you to configure your page with various settings, such as CSS, JavaScript, headers, main content, footers, and more. You can also add custom parameters and use them in your templates.

Installation
------------

[](#installation)

To install the twiew-bundle, add the following line to your composer.json file:

`"a-proud/twiew-bundle": "dev-main"`

Then, run the following command to install the bundle:

`composer install`

Configuration
-------------

[](#configuration)

First of all we have show to twig where twiew templates located. Add the path to twiew to your config/packages/twig.yaml

```
twig:
    paths:
        "%kernel.project_dir%/vendor/a-proud/twiew-bundle/templates": twiew

```

The AProud/Twiew bundle requires the following mandatory parameters:

- `default`
- `css`
- `js_top`
- `header`
- `main`
- `footer`
- `js_bottom`

You can also add any custom parameters and use them in your templates.

Usage
-----

[](#usage)

The A-Proud/Twiew bundle creates an HTML page structured into three main sections: `header`, `main`, and `footer`. You can add multiple blocks to each section. Each block must have a layout that defines how many columns it has and how they are arranged within the block.

Each block is divided into components, and each component requires a template (`tpl`) and the number of the free space in the block where it needs to be placed.

Here's an example PHP code that shows how to use the A-Proud/Twiew bundle:

```
//src/Controller/MainController.php
	namespace App\Controller;

	use Symfony\Component\HttpFoundation\Response;
	use Symfony\Component\HttpFoundation\Request;
	use Symfony\Component\Routing\Annotation\Route;
	use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
	use AProud\TwiewBundle\Twiew;

	class MainController extends AbstractController
	{

		function __construct(Twiew $twiew)
		{
			$this->view = $twiew;
			$this->view->tplSchema('', [
				'app_main_index' => [ //app_main_index key is generated by routing for this page
					'js_top' => [
						'jquery' => [
							'weight' => 5, //scripts with smaller weight will be positioned higher on the page
							'src' => './assets/jquery/dist/jquery.min.js'
						],
						'bootstrap_bundle' => [ //you can set the key for comfortable navigation
							'weight': 10,
							'src': './assets/bootstrap/dist/js/bootstrap.bundle.min.js'
						],
					],
					'js_bottom' => [
						//also works without keys
						['weight' => 5, 'src' => './assets/js/custom_script.js'],
						['weight' => 10, 'src' => './assets/js/another_custom_script.js'],
					],
					'sections' => [
						'main' => [
							[
								'layout' => '@twiew/layouts/two_columns_center.html.twig',
								'components' => [
									[
										'tpl' => 'app_main/components/heading.html.twig',
										'block' => '1',
									],
									[
										'tpl' => 'app_main/components/slider.html.twig',
										'block' => '2',
									],
								]
							],
							[
								'layout' => '@twiew/layouts/one_column_center.html.twig',
								'components' => [
									[
										'tpl' => 'app_main/components/image_gallery.html.twig',
										'block' => '1',
									],
								]
							],
						]
					],
				],
				'app_main_login' => [
					'sections' => [
						'main' => [
							[
								'layout' => '@twiew/layouts/one_column_center.html.twig',
								'class' => 'vh-100 login-col', //pass the twig variables to layout
								'components' => [
									[
										'tpl' => 'app_main/components/login_form.html.twig',
										'block' => '1',
										'my_component_variable' => 'some value',
									],
								]
							],
						],
					],
				],
			]);
		}

		/**
		 *  App index page
		 *  @Route("/")
		 *  @return Response
		 */
		public function index(): Response
		{
			return $this->view->render(); //only one string to render the whole page with setted structure
		}

		/**
		 *  Login page
		 *  @Route("/login")
		 *  @return Response
		 */
		public function login(): Response
		{
			//you can get the values in your controller
			$mainSectionClass = $this->view->tplSchema('app_main_login.sections.main.class');

			//and replace them if needed
			$this->view->tplSchema('app_main_login.sections.main.class', $mainSectionClass.' bg-gray');
			return $this->view->render();
		}

	}

```

Great! You have defined the view structure in one place and you can override this structure in controller. But it looks a little bit bulky. Also it's not a good idea to store the View things in Controller. So let's move this schema in some another place and leave the controller to do its own thing.

Store tpl schema in YAML
------------------------

[](#store-tpl-schema-in-yaml)

```