Diferència entre revisions de la pàgina «Aplicació de facturació trimestral»
Salta a la navegació
Salta a la cerca
m (→Entrega) |
|||
| (Hi ha 6 revisions intermèdies del mateix usuari que no es mostren) | |||
| Línia 3: | Línia 3: | ||
Tenim una empresa amb 4 delegacions, i volem portar el control de la facturació trimestral de cadascuna de les delegacions. | Tenim una empresa amb 4 delegacions, i volem portar el control de la facturació trimestral de cadascuna de les delegacions. | ||
| − | Fer una petita aplicació web amb les següents especificacions. La interfície web consta d'una taula a | + | Fer una petita aplicació web amb les següents especificacions. La interfície web consta d'una taula a dalt, i un petit formulari a baix, tal com es veu a la imatge. La taula consta de tres camps i 4 files amb les següents dades: |
*capçalera: sucursal, nom, telefon, mail | *capçalera: sucursal, nom, telefon, mail | ||
| Línia 17: | Línia 17: | ||
*'''Sucursal. Camp de text que no es pot escriure (atribut ''readonly''). | *'''Sucursal. Camp de text que no es pot escriure (atribut ''readonly''). | ||
*'''Nom. Camp de text que no es pot escriure (atribut ''readonly''). | *'''Nom. Camp de text que no es pot escriure (atribut ''readonly''). | ||
| − | *'''Any'''. Llista desplegable amb els | + | *'''Any'''. Llista desplegable amb els quatre últims anys: 2021, 2020, 2019, 2018. |
*'''Trimestre'''. Llista desplegable amb els següents valors: 1T, 2T, 3T, 4T (que es correspon amb els 4 trimestres). | *'''Trimestre'''. Llista desplegable amb els següents valors: 1T, 2T, 3T, 4T (que es correspon amb els 4 trimestres). | ||
*'''Facturació'''. Caixa de text. Regla de validació: número que admet dues posicions decimals. | *'''Facturació'''. Caixa de text. Regla de validació: número que admet dues posicions decimals. | ||
| − | Es tracta d'omplir semi-automàticament els camps del formulari | + | Es tracta d'omplir semi-automàticament els camps del formulari clicant el link que hi ha a la taula. Quan cliquem sobre la sucursal en la taula se'ns omplirà automàticament els camps ''sucursal'' i ''nom'' del formulari. Aleshores seleccionarem un any i trimestre, posarem un valor decimal de facturació, i només quan totes les dades estiguin plenes (regla de validació global per a tot el formulari), enviaríem les dades al servidor. |
| − | + | Es fa una demostració a classe d'una possible solució. | |
| − | + | =Tasques= | |
| − | + | La teva solució ha d'incloure entre d'altres les següents millores: | |
| − | + | *fitxer d'estils CSS extern. Treballar la capa de disseny i maquetació. Concretament, la gestió de la validació dels camps del formulari. | |
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | = | ||
| − | |||
| − | *fitxer d'estils CSS extern. | ||
*fitxer de funcions javascript extern. | *fitxer de funcions javascript extern. | ||
| − | *els events | + | *els events amb''addEventListener''. |
| + | *Crear les opcions dels anys i les opcions dels trimestres programàticament (''createElement''). | ||
| + | *Posar automàticament l'any actual (segons la data del sistema), i els 3 anys anteriors, de forma programàtica. | ||
| + | *Posar automàticament el trimestre anterior (segons la data del sistema). És a dir, si estem a desembre de 2021 (estem en el 4T), hem de posar l'any 2021 i el 3T (trimestre anterior). Si fóssim el gener de 2022 posaríem 2021 i 4T. | ||
| − | + | ==Opcional== | |
| + | Enviar les dades de facturació a la taula de la base de dades FACTURACIO, en un servidor web amb servidor mysql. | ||
| + | ==Solucion parcials== | ||
| + | Per tal d'assignar de forma dinàmica els events a tots els links podem fer: | ||
<pre> | <pre> | ||
| − | + | ... | |
| − | + | var anchors = document.getElementsByTagName("a"); | |
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | var | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | + | for (var i=0; i<anchors.length; i++) { //recorrem tots els links | |
| + | //posem els events associats als links | ||
| + | anchors[i].addEventListener("click", function () {escriure_formulari(this);}); | ||
} | } | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
... | ... | ||
<body onload="carregar_events()"> | <body onload="carregar_events()"> | ||
| Línia 212: | Línia 52: | ||
<pre> | <pre> | ||
... | ... | ||
| − | |||
| − | |||
| − | |||
var taula = document.getElementById("taula_sucursals"); | var taula = document.getElementById("taula_sucursals"); | ||
var files = taula.rows; | var files = taula.rows; | ||
| Línia 222: | Línia 59: | ||
} | } | ||
... | ... | ||
| − | |||
| − | |||
| − | |||
| − | |||
</pre> | </pre> | ||
En aquest cas hem de pensar el nostre document com si fos XML (veure ''childNodes''). És la manera més general de recórrer l'estructura d'una document web. | En aquest cas hem de pensar el nostre document com si fos XML (veure ''childNodes''). És la manera més general de recórrer l'estructura d'una document web. | ||
| − | + | Per crear les opcions de la llista desplegable programàticament: | |
| − | + | <pre> | |
| − | + | ... | |
| − | + | //creem les opcions de la select | |
| − | + | var sel_year = document.getElementById("year"); | |
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| + | //Create and append the options | ||
| + | for (var i = 0; i < 4; i++) { | ||
| + | var option = document.createElement("option"); | ||
| + | option.value = year-i; | ||
| + | option.text = year-i; | ||
| + | console.log(year-i) | ||
| + | if (trimestre==4 && i==1) { | ||
| + | option.selected = "selected" | ||
| + | } else if (i==year) { | ||
| + | option.selected = "selected" | ||
| + | } | ||
| + | sel_year.appendChild(option); | ||
| + | } | ||
| + | ... | ||
| + | </pre> | ||
=Entrega= | =Entrega= | ||
| − | + | Li ensenyaràs al professor la teva solució (nota de classe). | |
| − | + | Entregaràs en el Classroom la teva solució, amb les captures de pantalla que siguin l'evidència de què has fet tu el codi, que has implementat les tasques que se't demanen, i que s'executa en la teva màquina. | |
| − | {{Autor}}, | + | {{Autor}}, desembre 2021 |
[[Categoria: Institut Jaume Balmes]] | [[Categoria: Institut Jaume Balmes]] | ||
[[Categoria: Assignatura DAW-M06-WEC]] | [[Categoria: Assignatura DAW-M06-WEC]] | ||
Revisió de 09:53, 21 des 2021
Enunciat del problema
Tenim una empresa amb 4 delegacions, i volem portar el control de la facturació trimestral de cadascuna de les delegacions.
Fer una petita aplicació web amb les següents especificacions. La interfície web consta d'una taula a dalt, i un petit formulari a baix, tal com es veu a la imatge. La taula consta de tres camps i 4 files amb les següents dades:
- capçalera: sucursal, nom, telefon, mail
- dades:
- Barcelona;Arnau Guinovart;93.345.54.45;aguinovart@gmail.com
- Tarragona;Maria Peris;977.34.34.22;mperis@gmail.com
- Lleida;Josep Anglerill;973.33.44.55;janglerill@gmail.com
- Girona;Montserrat Sirera;972.44.55.66;msirera@gmail.com
El camp sucursal és un link. Quan cliquem sobre la sucursal s'executarà la funció de Javascript: escriure_formulari().
El formulari consta dels següents camps:
- Sucursal. Camp de text que no es pot escriure (atribut readonly).
- Nom. Camp de text que no es pot escriure (atribut readonly).
- Any. Llista desplegable amb els quatre últims anys: 2021, 2020, 2019, 2018.
- Trimestre. Llista desplegable amb els següents valors: 1T, 2T, 3T, 4T (que es correspon amb els 4 trimestres).
- Facturació. Caixa de text. Regla de validació: número que admet dues posicions decimals.
Es tracta d'omplir semi-automàticament els camps del formulari clicant el link que hi ha a la taula. Quan cliquem sobre la sucursal en la taula se'ns omplirà automàticament els camps sucursal i nom del formulari. Aleshores seleccionarem un any i trimestre, posarem un valor decimal de facturació, i només quan totes les dades estiguin plenes (regla de validació global per a tot el formulari), enviaríem les dades al servidor.
Es fa una demostració a classe d'una possible solució.
Tasques
La teva solució ha d'incloure entre d'altres les següents millores:
- fitxer d'estils CSS extern. Treballar la capa de disseny i maquetació. Concretament, la gestió de la validació dels camps del formulari.
- fitxer de funcions javascript extern.
- els events ambaddEventListener.
- Crear les opcions dels anys i les opcions dels trimestres programàticament (createElement).
- Posar automàticament l'any actual (segons la data del sistema), i els 3 anys anteriors, de forma programàtica.
- Posar automàticament el trimestre anterior (segons la data del sistema). És a dir, si estem a desembre de 2021 (estem en el 4T), hem de posar l'any 2021 i el 3T (trimestre anterior). Si fóssim el gener de 2022 posaríem 2021 i 4T.
Opcional
Enviar les dades de facturació a la taula de la base de dades FACTURACIO, en un servidor web amb servidor mysql.
Solucion parcials
Per tal d'assignar de forma dinàmica els events a tots els links podem fer:
...
var anchors = document.getElementsByTagName("a");
for (var i=0; i<anchors.length; i++) { //recorrem tots els links
//posem els events associats als links
anchors[i].addEventListener("click", function () {escriure_formulari(this);});
}
...
<body onload="carregar_events()">
...
i també ho podem fer d'una manera més genèrica, cercant els enllaços que hi ha dins de les cel.les:
...
var taula = document.getElementById("taula_sucursals");
var files = taula.rows;
for (i=1;i<files.length; i++) {
files[i].children[0].children[0].addEventListener("click", function(){escriure_formulari(this)});
}
}
...
En aquest cas hem de pensar el nostre document com si fos XML (veure childNodes). És la manera més general de recórrer l'estructura d'una document web.
Per crear les opcions de la llista desplegable programàticament:
...
//creem les opcions de la select
var sel_year = document.getElementById("year");
//Create and append the options
for (var i = 0; i < 4; i++) {
var option = document.createElement("option");
option.value = year-i;
option.text = year-i;
console.log(year-i)
if (trimestre==4 && i==1) {
option.selected = "selected"
} else if (i==year) {
option.selected = "selected"
}
sel_year.appendChild(option);
}
...
Entrega
Li ensenyaràs al professor la teva solució (nota de classe).
Entregaràs en el Classroom la teva solució, amb les captures de pantalla que siguin l'evidència de què has fet tu el codi, que has implementat les tasques que se't demanen, i que s'executa en la teva màquina.
creat per Joan Quintana Compte, desembre 2021
