Giter Club home page Giter Club logo

garakdemobundle's Introduction

sfjqec

(english version below)

Questo bundle è la trasposizione in Symfony2 di un piccolo progetto, chiamato sfjqec. È stato creato a scopo didattico, per una presentazione tenuta inizialmente per il PUG Roma e poi ampliata per il phpDay. Lo scopo di questo codice è in generale mostrare come integrare correttamente Javascript e PHP, con particolare riferimento a Symfony e jQuery. Il progetto mostra un semplicissimo e-commerce, da cui il nome: sfjqec è formato da sf (Symfony) + jq (jQuery) + ec (e-commerce).

in breve

In estrema sintesi, questo progetto mostra come integrare correttamente Javascript e PHP, usando AJAX. I passi sono i seguenti:

  • scrivere l'applicazione come se Javascript non esistesse
  • legare alcuni eventi (tipicamente click di link e submit di form) a delle funzioni Javascript
  • ciascuna di queste funzioni Javascript richiama uno script PHP, tramite AJAX
  • al successo della chiamata AJAX, richiama un'altra funzione Javascript, che si occupa di manipolare il DOM

Nello specifico di jQuery e Symfony, i passi si traducono nel seguente modo:

  • scrivere il controller normalmente
  • scrivere un file Javascript che usi l'evento ready() di jQuery e che faccia il bind dei click e dei submit necessari
  • usare l'evento passato da bind nella funzione Javascript per estrarre i riferimenti necessari dal DOM
  • nel controller, effettuare le necessarie modifiche (spesso basta modificare i redirect, in modo che NON siano effettuati per le richieste AJAX)
  • nella vista, aggiungere un file del tipo NomeAzione.json.twig
  • di nuovo nel file Javascript, scrivere la funzione che deve manipolare il DOM, basandosi sulla variabile result, che a questo punto contiene un oggetto JSON, che jQuery ricava dal codice della vista del punto precedente

A questo punto il mio consiglio è quello di analizzare i passi precedenti, tenendo sott'occhio il codice di questo progetto, in particolare il controller e il file js.

installazione

Aggiungere le seguenti righe al proprio file composer.json:

    "require": {
        "garak/demo-bundle": "dev-master"
    },
    "repositories": [{
        "type": "vcs",
        "url": "http://github.com/garak/GarakDemoBundle"
    }],

Abilitare il bundle nel kernel:

<?php
// app/AppKernel.php

public function registerBundles()
{
    $bundles = array(
        // ...
        new JMS\SecurityExtraBundle\JMSSecurityExtraBundle(),
        new Stof\DoctrineExtensionsBundle\StofDoctrineExtensionsBundle(),
        new Garak\DemoBundle\GarakDemoBundle(),
    );
}

Abilitare le rotte, aggiungendo nel file app/config/routing.yml:

GarakDemoBundle:
    resource: "@GarakDemoBundle/Controller/"
    type:     annotation
    prefix:   /demo/

Infine, eseguire da terminale lo script di aggiornamento:

$ composer install

English version

This bundle is a conversion in Symfony2 of a small project, named sfjqec. It has been created for learning purpose, for a presentation held a first time for PHP User Group Roma and then, in a wider format, for phpDay. The purpose of this code is showing how to integrate in a proper way Javascript e PHP, with specific references to Symfony and jQuery. The project shows a very simple e-commerce site, so it's called "sfjqec": sf (Symfony) + jq (jQuery) + ec (e-commerce).

in short

The correct way to integrate Javascript and PHP, with AJAX, is divided in 4 steps:

  • write app as if Javascript wouldn't exist
  • tie some events (link clicks and form submits, tipically) to Javascript functions
  • each of such functions recall a PHP script, via AJAX
  • when AJAX call succeeds, Javascript calls another function, that deals with DOM manipulation

With jQuery and symfony, the steps are translated like follow:

  • write a standard controller
  • write a Javascript file using jQuery's ready() event, doing a bind of clicks and submits, where needed
  • use event passed by bind in Javascript function and extract needed references from DOM
  • in the controller, do the needed adaptations (often all you need is to change redirects, so they are NOT executed for AJAX requests)
  • in the view, add a file like ActionName.json.twig
  • again in Javascript file, write a function to manipolate DOM, based on result variabile, that is currently containing a JSON object, elaborated by jQuery from the view

My advice is to analyze those steps, while looking to project code, mainly the controller and the js file.

installation

Add the following lines in your composer.json file:

    "require": {
        "garak/demo-bundle": "dev-master"
    },
    "repositories": [{
        "type": "vcs",
        "url": "http://github.com/garak/GarakDemoBundle"
    }],

Enable the bundle in the kernel:

<?php
// app/AppKernel.php

public function registerBundles()
{
    $bundles = array(
        // ...
        new JMS\SecurityExtraBundle\JMSSecurityExtraBundle(),
        new Stof\DoctrineExtensionsBundle\StofDoctrineExtensionsBundle(),
        new Garak\DemoBundle\GarakDemoBundle(),
    );
}

Enable routes, adding to app/config/routing.yml file:

GarakDemoBundle:
    resource: "@GarakDemoBundle/Controller/"
    type:     annotation
    prefix:   /demo/

Last, update vendors from a terminal:

$ composer install

garakdemobundle's People

Contributors

garak avatar

Stargazers

Rodolfo Velasco avatar Leonardo Proietti avatar  avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.