Logomotion: slides Symfony3 seconde journée

2017-12-27 16:12:22 +01:00
parent 63cb07d03e
commit 8d4a57ed9b
6 changed files with 1832 additions and 5 deletions
--- a/developpement/symfony3/presentation/slides.md
+++ b/developpement/symfony3/presentation/slides.md
@ -1190,7 +1190,7 @@ server {

 ## Sujets spécifiques

-### Gestion des traductions
+### Internationalisation
 ### Utilisation du micro-kernel
 ### Les tests
 ### Gestion des assets avec Webpack
@ -1198,11 +1198,12 @@ server {

 ---

-## Gestion des traductions
+## Internationalisation

 ### Installation du composant
 ### Le service `translator`
 ### Gestion des traductions
+### Exercice

 ---

@ -1393,9 +1394,6 @@ bin/console translation:update <language> --output-format=xlf --force

 ---

-## Utilisation du micro-kernel
-
---

 ## Ajout de ressources supplémentaires

@ -1408,16 +1406,419 @@ framework:
 ```
 ---

+## Exercice
+
+Créer une page de visualisation d'un mini réseau social. Celle ci devra comprendre les fonctionnalités suivantes:
+
+- Un affichage en 2 langues (français, anglais)
+- Un affichage du nombre de relations total, avec approximation pour un nombre supérieur à 20 ("Vous avez beaucoup de relations")
+- Les possibilité d'ajouter/supprimer un ami par son nom. En cas d'erreur, le message devra être également localisé. 
+
+---
+
+---
+
+## Utilisation du micro-kernel
+
+### Initialisation du projet
+### Ajout et configuration de bundles
+### Exercice
+
+---
+
+## Initialisation du projet (1)
+
+```
+mkdir my-project
+cd my-project
+composer init
+composer require symfony/symfony
+mkdir {web,var}
+```
+
+---
+
+## Initialisation du projet (2)
+
+Voir `ressources/s3-micro/index.php`
+
+---
+
+## Ajout et configuration de bundles (1)
+
+### Installation de Twig
+
+```bash
+composer require symfony/twig-bundle
+```
+
+---
+
+## Ajout et configuration de bundles (2)
+
+### Enregistrement du bundle
+
+```php
+// web/index.php
+
+// ...
+
+public function registerBundles()
+{
+  return array(
+    new Symfony\Bundle\FrameworkBundle\FrameworkBundle(),
+    new Symfony\Bundle\TwigBundle\TwigBundle(),
+  );
+}
+```
+
+---
+
+## Ajout et configuration de bundles (3)
+
+### Configuration du bundle
+
+```php
+// web/index.php
+
+// ...
+
+protected function configureContainer(
+	ContainerBuilder $c, 
+    	LoaderInterface $loader
+)
+{
+  $c->loadFromExtension('twig', [
+  	'default_path' => __DIR__.'/../templates',
+  ]);
+}
+```
+
+---
+
+## Ajout et configuration de bundles (4)
+
+### Utilisation du service Twig
+
+```php
+// web/index.php
+
+use Symfony\Component\HttpFoundation\Response;
+
+// ...
+
+public function twigAction()
+{
+  $container = $this->getContainer();
+  $twig = $container->get('twig');
+  
+  $response = new Response();
+  $response->setContent($twig->render('index.html.twig'));
+  
+  return $response;
+}
+```
+
+---
+
+## Exercice
+
+Avec le micro kernel Symfony, implémenter une API REST d'envoi de mail. Cette API devra utiliser le bundle Swiftmailer.
+
+Proposition d'appel: 
+```
+-> POST /send { "to": "...", "from": "...", "body": "..." } 
+<- 200 { sent: true }
+```
+
+---
+
 ## Les tests

+### `phpunit`
+### Tests unitaires
+### Tests fonctionnels
+### Exercice
+
+---
+
+## phpunit
+
+### Installation via Composer
+```
+composer require phpunit/phpunit
+./vendor/bin/phpunit --help
+```
+
+---
+
+## Tests unitaires (1)
+
+### Classe testée
+
+```php
+// src/AppBundle/Util/Calculator.php
+
+namespace AppBundle\Util;
+
+class Calculator
+{
+    public function add($a, $b)
+    {
+        return $a + $b;
+    }
+}
+```
+---
+
+## Tests unitaires (2)
+
+### Classe de test
+
+```php
+// tests/AppBundle/Util/CalculatorTest.php
+
+namespace Tests\AppBundle\Util;
+
+use AppBundle\Util\Calculator;
+use PHPUnit\Framework\TestCase;
+
+class CalculatorTest extends TestCase
+{
+    public function testAdd()
+    {
+        $calc = new Calculator();
+        $result = $calc->add(30, 12);
+
+        // assert that your calculator added the numbers correctly!
+        $this->assertEquals(42, $result);
+    }
+}
+```
+---
+
+## Tests fonctionnels
+
+### Créer une classe de test
+
+```php
+namespace Tests\AppBundle\Controller;
+
+use Symfony\Bundle\FrameworkBundle\Test\WebTestCase;
+
+class DefaultControllerTest extends WebTestCase
+{
+    public function testIndex()
+    {
+        $client = static::createClient();
+
+        $crawler = $client->request('GET', '/');
+
+        $this->assertEquals(200, $client->getResponse()->getStatusCode());
+        $this->assertContains(
+        	'Welcome to Symfony', 
+            	$crawler->filter('#container h1')->text()
+        );
+    }
+}
+```
+
+---
+
+## Exercice
+
+Créer un formulaire de contact basique avec les champs suivants:
+- Nom (obligatoire)
+- Prénom (obligatoire)
+- Adresse courriel (obligatoire, doit être une adresse valide)
+- Message (obligatoire, maximum 300 caractères)
+
+Tester l'application des contraintes en écrivant une classe de test pour ce formulaire.
+
+Ressource: https://symfony.com/doc/3.4/testing.html
+
 ---

 ## Gestion des assets avec Webpack

+### Installation de Webpack-Encore
+### Configuration
+### Générer les assets
+### Utilisation des assets
+### Exercice
+
+---
+
+## Installation de Webpack-Encore
+
+```bash
+npm init
+npm install @symfony/webpack-encore --save-dev
+```
+---
+
+## Configuration (1)
+
+### Création du fichier webpack.config.js
+```javascript
+// webpack.config.js
+
+var Encore = require('@symfony/webpack-encore');
+
+Encore
+  .setOutputPath('web/build/') 		// Chemin de sortie des assets
+  .setPublicPath('/build') 		// Définir le chemin d'accès aux assets
+  
+  // Activer les sources-map en dev
+  .enableSourceMaps(!Encore.isProduction())
+  
+  // Activer le versioning des assets
+  .enableVersioning() 		
+  
+  
+  .addEntry('app', './app/Resources/js/app.js') // Ajouter une entrée
+  
+;
+
+module.exports = Encore.getWebpackConfig();
+
+```
+---
+
+## Configuration (2)
+
+### Activation de la gestion des versions des assets
+```yaml
+# app/config/config.yml
+framework:
+  # ...
+  assets:
+    json_manifest_path: '%kernel.project_dir%/web/build/manifest.json'
+```
+---
+
+## Générer les assets
+
+```bash
+
+# Générer les assets pour l'environnement de dev
+./node_modules/.bin/encore dev
+
+# Générer automatiquement les assets lorsque les sources sont modifiées
+./node_modules/.bin/encore dev --watch
+
+# Générer les assets pour la production
+./node_modules/.bin/encore production
+```
+---
+
+
+## Utilisation des assets (1)
+
+### Dans les templates Twig
+
+```html+twig
+<!-- CSS -->
+<link rel="stylesheet" src="{{ asset("build/app.css") }}">
+
+<!-- Javascript -->
+<script type="text/javascript" src="{{ asset("build/app.js") }}"></script>
+```
+---
+
+## Utilisation des assets (2)
+
+### Déclarer les dépendances depuis les fichiers JS
+
+```javascript
+// app/Resources/js/app.js
+
+require('./css/app.css') // Dépendance vers la feuille de style app.css
+
+const $ = require('jquery') // Dépendance vers une librairie NPM
+
+```
+---
+
+## Exercice
+
+Mettre en place deux pages mutualisant le code de jQuery et Bootstrap via le système de "sharedEntry" proposé par Encore.
+
+Ressource: http://symfony.com/doc/3.4/frontend/encore/shared-entry.html
+
 ---

 ## Formulaires et gestion des thèmes

+### Personnaliser le thème d'un formulaire dans un template
+### Définir/créer un thème global
+### Exercice
+
+---
+
+## Personnaliser le thème d'un formulaire dans un template
+
+```html+twig
+{% extends 'base.html.twig' %}
+
+<!-- 
+	On surcharge le widget "integer" 
+   	du thème global pour le formulaire "form" 
+-->
+{% form_theme form _self %}
+
+{% block integer_widget %}
+    <div class="integer_widget">
+        {% set type = type|default('number') %}
+        {{ block('form_widget_simple') }}
+    </div>
+{% endblock %}
+
+{% block content %}
+    {{ form(form) }}
+{% endblock %}
+```
+
+---
+
+## Définir un thème global
+
+```yaml
+# app/config/config.yml
+twig:
+    form_themes:
+        - 'form/fields.html.twig'
+```
+
+---
+
+## Créer un thème global
+
+```html+twig
+<!-- app/Resources/form/fields.html.twig -->
+
+<!-- On étend un thème déjà existant -->
+{% extends 'form_div_layout.html.twig' %}
+
+<!-- On surcharge les blocs souhaités -->
+{% block form_widget_simple %}
+    {{ parent() }}
+
+    {% if help is defined %}
+        <span class="help-block">{{ help }}</span>
+    {% endif %}
+{% endblock %}
+
+```
+
+---
+
+## Exercice
+
+Créer un thème global de formulaire qui préfixe tous les messages d'erreur par le signe unicode "warning": ⚠.
+
+Ressource: https://symfony.com/doc/3.4/form/form_customization.html#customizing-error-output
+
 ---

 # Licence