Desenvolvemento en PHP con Symfony

Esta guía se basa en Symfony 4.4

Instalación e Configuración

Requerimentos:

• apt install php-symfony
• apt install composer

Inicio da Aplicación

composer create-project symfony/website-skeleton:"^4.4" my_project_directory

composer create-project symfony/skeleton:"^4.4" my_project_directory

• annotations

composer require sensio/framework-extra-bundle composer require symfony/webpack-encore-bundle yarn install

After installing Encore, your app already has a few files, organized into an assets/ directory:

assets/app.js

assets/bootstrap.js

assets/controllers.json

assets/styles/app.css

assets/controllers/hello_controller.js

With Encore, think of your app.js file like a standalone JavaScript application: it will require all of the dependencies it needs (e.g. jQuery or React), including any CSS. Your app.js file is already doing this with a JavaScript import statement:

Construye el CSS y JS con webpack yarn watch || yarn dev || yarn build

Engadimos jquery yarn add jquery --dev

"Recompilamos" css y js yarn dev

/*
 * Welcome to your app's main JavaScript file!
 *
 * We recommend including the built version of this JavaScript file
 * (and its CSS file) in your base layout (base.html.twig).
 */

// any CSS you import will output into a single css file (app.css in this case)
import './styles/app.css';

// start the Stimulus application
import './bootstrap';


import $ from 'jquery'

// import funcion_exportada from "./nombrefichero"

$(document).ready(function() {
        alert("Start !");
});

Stimulus & Symfony UX

assets/controllers

Method Invoked by Stimulus… initialize() Once, when the controller is first instantiated connect() Anytime the controller is connected to the DOM disconnect() Anytime the controller is disconnected from the DOM

<div {{ stimulus_controller('say-hello') }}>
    <input type="text" {{ stimulus_target('say-hello', 'name') }}>

    <button {{ stimulus_action('say-hello', 'greet') }}>
        Greet
    </button>

    <div {{ stimulus_target('say-hello', 'output') }}></div>
</div>

<div data-controller="slideshow">
  <button data-action="slideshow#previous"> ← </button>
  <button data-action="slideshow#next"> → </button>

  <div data-slideshow-target="slide">🐵</div>
  <div data-slideshow-target="slide">🙈</div>
  <div data-slideshow-target="slide">🙉</div>
  <div data-slideshow-target="slide">🙊</div>
</div>

import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  static targets = [ "slide" ]

  initialize() {
    this.index = 0
    this.showCurrentSlide()
  }

  next() {
    this.index++
    this.showCurrentSlide()
  }

  previous() {
    this.index--
    this.showCurrentSlide()
  }

  showCurrentSlide() {
    this.slideTargets.forEach((element, index) => {
      element.hidden = index != this.index
    })
  }
}



export default class extends Controller {
    static targets = ['name', 'output']

  connect() {
    console.log("Hello, Stimulus!", this.element)
  }

    greet() {
	this.outputTarget.textContent = `Hello ${this.nameTarget.value}!`
    }
}

Programando la aplicación

bin/console make:controller MainController