IMPORTANT: Per accedir als fitxer de subversion: http://acacha.org/svn (sense password). Poc a poc s'aniran migrant els enllaços. Encara però funciona el subversion de la farga però no se sap fins quan... (usuari: prova i la paraula de pas 123456)

Implementació pròpia amb Javascript:

https://github.com/acacha/forms

PHP (Backend)

Crear objectes PHP per a gestionar els formularis:

https://laracasts.com/series/whip-monstrous-code-into-shape/episodes/1

Resources:

Javascript

Implementació:

https://github.com/edstevo/laravel-vue-form

A partir dels vídeos de:

https://laracasts.com/series/learn-vue-2-step-by-step/episodes/22

Idea (TODO) per que no utilitzar Formdata en comptes d'un array de dades per contenir ls info del formulari?

Recursos:

SparkForm

Vegeu Laravel Spark form

Recursos:

Formdata

Vegeu també Formdata

Llistat de tècniques a tenir en compte

  • Prevent default
  • etc..
  • Mètodes helper (post, put, patch delete i similars) com a variacions del mètode submit
  • Utilitzar promises per a enviar els formularis
  • No mostrar els errors un cop l'usuari començar a solucionar el problema (onkeyDown)
  • Mostrar spinner durant la carrega del formulari
  • Utilitzar Formata per crear objecte form al constructor: todo
  • Autofocus al primer camp del formulari
  • Empaquetar el paquet amb npm: suport amb Babel per fer compatible amb versions compatibles Javascript
  • Exemple tractament/wrapper vue i component Jquery com iCheck o select2.

Promises

Form objects hooks

Vegeu:

https://laracasts.com/series/learn-vue-2-step-by-step/episodes/21

i l'article Form Objects

Notes

  • Creació de l'objecte Errors. API
  • Mètode get(fieldname) per obtenir l'error associat a un camp
  • Mètode has(fielname) per comprovar si s'ha de mostrar o no l'error.
  • Mètode clear per eliminar un error. Serveix per exemple per no mostrar els errors un cop l'usuari comença a solucionar el problema (keydown)
  • Keydown es pot posar al formulari en comptes de a cada camp utilitzant event.target.name per obtenir el nom del camp
  • Mètode any:
  • Disabled del boto de submit/register si hi ha qualsevol error
  • Fem reset del camps (posar-los buits) un cop omplert el formulari?
  • Creació de l'objecte Form
  • Incloure Errors dins de form
  • Crear mòduls npm


class Errors {
    /**
     * Create a new Errors instance.
     */
    constructor() {
        this.errors = {};
    }


    /**
     * Determine if an errors exists for the given field.
     *
     * @param {string} field
     */
    has(field) {
        return this.errors.hasOwnProperty(field);
    }


    /**
     * Determine if we have any errors.
     */
    any() {
        return Object.keys(this.errors).length > 0;
    }


    /**
     * Retrieve the error message for a field.
     *
     * @param {string} field
     */
    get(field) {
        if (this.errors[field]) {
            return this.errors[field][0];
        }
    }


    /**
     * Record the new errors.
     *
     * @param {object} errors
     */
    record(errors) {
        this.errors = errors;
    }


    /**
     * Clear one or all error fields.
     *
     * @param {string|null} field
     */
    clear(field) {
        if (field) {
            delete this.errors[field];

            return;
        }

        this.errors = {};
    }
}
class Form {
    /**
     * Create a new Form instance.
     *
     * @param {object} data
     */
    constructor(data) {
        this.originalData = data;

        for (let field in data) {
            this[field] = data[field];
        }

        this.errors = new Errors();
    }


    /**
     * Fetch all relevant data for the form.
     */
    data() {
        let data = {};

        for (let property in this.originalData) {
            data[property] = this[property];
        }

        return data;
    }


    /**
     * Reset the form fields.
     */
    reset() {
        for (let field in this.originalData) {
            this[field] = '';
        }

        this.errors.clear();
    }


    /**
     * Send a POST request to the given URL.
     * .
     * @param {string} url
     */
    post(url) {
        return this.submit('post', url);
    }


    /**
     * Send a PUT request to the given URL.
     * .
     * @param {string} url
     */
    put(url) {
        return this.submit('put', url);
    }


    /**
     * Send a PATCH request to the given URL.
     * .
     * @param {string} url
     */
    patch(url) {
        return this.submit('patch', url);
    }


    /**
     * Send a DELETE request to the given URL.
     * .
     * @param {string} url
     */
    delete(url) {
        return this.submit('delete', url);
    }


    /**
     * Submit the form.
     *
     * @param {string} requestType
     * @param {string} url
     */
    submit(requestType, url) {
        return new Promise((resolve, reject) => {
            axios[requestType](url, this.data())
                .then(response => {
                    this.onSuccess(response.data);

                    resolve(response.data);
                })
                .catch(error => {
                    this.onFail(error.response.data);

                    reject(error.response.data);
                });
        });
    }


    /**
     * Handle a successful form submission.
     *
     * @param {object} data
     */
    onSuccess(data) {
        alert(data.message); // temporary

        this.reset();
    }


    /**
     * Handle a failed form submission.
     *
     * @param {object} errors
     */
    onFail(errors) {
        this.errors.record(errors);
    }
}

Apunts dels alumnes

Vegeu també

Enllaços externs