Create your First Home Page in Symfony

Environment Setup – Automatic Clear Cache

At the end of installation process will have: C:\wamp64\www\symfonytest>cd first_test_symfony

Inside the folder will be the folder structure of my project:
– app
– bin
– src
– tests
– var
– vendor
– web
– composer.json
– LICENSE etc…

Open your broser at: http://localhost/symfonytest/first_test_symfony/web/ to see the welcome page

Go to web\app.php and change the line:

$kernel = new AppKernel(‘prod’, false);

to

$kernel = new AppKernel(‘prod’, true);

This will activate – (‘prod’, true) – the production environment, this mean cache will not be saved, you can change file and reload in browser on the fly and see changes.

If – (‘prod’, false) – you can not reload from browser code changes

Go to var\cache\dev and var\cache\prod to see cache files for ‘dev’ and ‘prod’ environment.

Net Beans IDE

1. Run Net Beans IDE

2. File> New Project> PHP> PHp Application with Existing Sources> NEXT> Browse: C:\wamp64\www\symfonytest>first_test_symfony

HTML Render

1. Controller Request

Go to src\AppBundle\Controller\ -> here you will find all php codes for controllers
Open src\AppBundle\Controller\DeafaultController.php
Change the render page to indexmy.html.twig


return $this->render('default/indexmy.html.twig ...

2. .twig.html

Go to app\Resources\views\default\
and create indexmy.html.twig


{% extends 'base.html.twig' %}

{% block body %}
<h1>This is my first home page</h1>
{% endblock %}

{% block stylesheets %}
<style>
    h1 { font-size: 36px; }
</style>
{% endblock %}

Notice that {% extends ‘base.html.twig’ %}

Go to app\Resources\views\base.html.twig


<!DOCTYPE html>

<html>
    
<head>
<meta charset="UTF-8" />
        
<title> {% block title %}Welcome{% endblock %}</title>
        
	{% block stylesheets %}{% endblock %}
        
<link rel="icon" type="image/x-icon" href="{{ asset('favicon.ico') }}" />
    
</head>
    
<body>
        
	{% block body %}{% endblock %}
        
	{% block javascripts %}{% endblock %}
    
</body>

</html>

The process is:

return $this->render(‘default/indexmy.html.twig: -> call html.twig template -> extend base.html.twig

The rendered code inside the browser will be:


<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"><meta charset="UTF-8">
    <title>Welcome!</title>
	<style>
		h1 { font-size: 36px; }
	</style>
    <link rel="icon" type="image/x-icon" href="http://localhost/symfonytest/first_test_symfony/web/favicon.ico">
</head>
<body>
    <h1>This is my first home page</h1>
</body>
</html>

We can write:


{% extends 'base.html.twig' %}

{% block body %}
<h1>This is my first home page</h1>
<strong>Test</strong> HTML tags
<br>
<a href="http://www.lucedigitale.com">Visit Luce Digitale</a>
<br>
{% include 'my_code.html.twig' %}

{% endblock %}

{% block stylesheets %}
<style>
    h1 { font-size: 36px; }
</style>
{% endblock %}

Notice:
{% include ‘my_code.html.twig’ %} -> include a HTML code from a file in app\Resources\views\my_code.html.twig

Warning: you can not write native php code inside a .twig template, you need create an Extension Class (official docs at: http://symfony.com/doc/current/templating/twig_extension.html)