Aplicació de facturació trimestral - Historial de revisió

Joan: /* Entrega */

2021-12-21T09:53:47Z

Entrega

Joan a 09:17, 21 des 2021

2021-12-21T09:17:42Z

Mostra els canvis

Joan: /* Solució 2 */

2021-01-30T11:38:15Z

Solució 2

Joan: /* Solució 2 */

2021-01-29T16:07:26Z

Solució 2

Joan: /* Millores a implementar */

2021-01-29T15:54:03Z

Millores a implementar

Mostra els canvis

Joan: /* Entrega */

2021-01-11T19:44:34Z

Entrega

Joan: /* Solució parcial */

2021-01-11T19:44:22Z

Solució parcial

Joan: /* Millores a implementar */

2019-12-09T18:25:24Z

Millores a implementar

Pàgina nova

=Enunciat del problema=
[[Fitxer:Formulari aplicacio facturacio.jpg | thumbnail]]
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 l'esquerra, i un petit formulari a la dreta. 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 següents valors: 2015, 2016, 2017, 2018, 2019.
*'''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 i enviar les dades del formulari a una taula de MySQL. 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), enviarem les dades per ser inserides en la taula '''jbalmes.facturacio''' ''(sucursal, nom, year, trimestre, euros)''.

*l'aplicatiu ha de tenir
A continuació se't mostra una estructura possible de l'aplicatiu web, sense cap mena de full d'estils.
<pre>
CREATE TABLE facturacio(
sucursal varchar(30) not null,
nom varchar(30) not null,
year smallint not null,
trimestre varchar(2) not null,
euros decimal(10,2) not null
);

insert into facturacio values ('Barcelona', 'Arnau Guinovart', 2015, '1T', 1854.34);
</pre>

=Solució parcial=
'''NOTA''': El professor et presenta una possible solució. Ara bé, la teva solució ha d'incloure entre d'altres les següents millores:
*fitxer d'estils CSS extern.
*fitxer de funcions javascript extern.
*els events javascript que implementis els has de definir en un fitxer .js extern amb el mètode ''addEventListener''.

script '''facturacio.php''':
<pre>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es">
<head>
<meta charset="UTF-8" />
<title>Formulari de contactes (amb varis mails)</title>

<script>
function escriure_formulari(obj) {
console.log(obj.text);
var taula = document.getElementById("taula_sucursals");
var files = taula.rows;
for (i=1;i<files.length; i++) {
//alert(files[i].cells[0].innerHTML);
str = files[i].cells[0].innerHTML;
if (str.indexOf(obj.text) > 0) {
//document.frm_facturacio.sucursal.value = obj.text;
document.frm_facturacio.sucursal.value = obj.innerHTML;
document.frm_facturacio.nom.value = files[i].cells[1].innerHTML;
}

}
}

function validar_numero_2decimals(obj){
val = obj.value;
//alert(val);

var patro=/^\d+(\.\d{1,2})?$/;
if(!patro.test(val)){
obj.value = "";
return false;
}else{
return true;
}
}

function controlar_camps_formulari(){
forms = document.getElementsByTagName("form");
for (i=0;i<forms[0].elements.length-1;i++) {
//alert(forms[0].elements[i].value);
if (forms[0].elements[i].value=="") {
alert("camp buit: " + forms[0].elements[i].name);
return false;
}
}

}

</script>
</head>
<body>
<?php

if (isset($_POST['sucursal'])) {
$vsucursal=$_POST['sucursal'];
$vnom=$_POST['nom'];
$vyear=$_POST['year'];
$vtrimestre=$_POST['trimestre'];
$veuros=$_POST['euros'];

if ($vsucursal!="") {
include("open_db.php");

$sqlstring = "INSERT INTO facturacio ";
$sqlstring .= "(sucursal, nom, year, trimestre, euros) values (";
$sqlstring .= "'" . $vsucursal . "','" . $vnom . "'," . $vyear . ",'" . $vtrimestre . "'," . $veuros . ")";

//echo $sqlstring."<br />";
//$result = mysqli_query($conn, $sqlstring);

if (!($result = mysqli_query($conn, $sqlstring))) {
echo "Error: ".mysqli_error($conn)."<br />";
echo "NO s'ha inserit el valor a la base de dades.<br />";
} else {

echo "S'ha inserit el valor a la base de dades.<br />";
}

include("close_db.php");
}
}
?>

<h1>Facturació per delegacions</h1>
<table id="taula_sucursals" border="1">
<tr><td><b>Delegació</b></td><td><b>Nom</b></td><td><b>Telèfon</b></td><td><b>Mail</b></td></tr>
<tr><td><a href="#" onclick="escriure_formulari(this)">Barcelona</a></td><td>Arnau Guinovart</td><td>93.345.54.45</td><td>aguinovart@gmail.com</td></tr>
<tr><td><a href="#" onclick="escriure_formulari(this)">Tarragona</a></td><td>Maria Peris</td><td>977.34.34.22</td><td>mperis@gmail.com</td></tr>
<tr><td><a href="#" onclick="escriure_formulari(this)">Lleida</a></td><td>Josep Anglerill</td><td>973.33.44.55</td><td>janglerill@gmail.com</td></tr>
<tr><td><a href="#" onclick="escriure_formulari(this)">Girona</a></td><td>Montserrat Sirera</td><td>972.44.55.66</td><td>msirera@gmail.com</td></tr>
</table>
<br />
<form name="frm_facturacio" method="post" onsubmit="controlar_camps_formulari()" action="facturacio.php" >
<label>Sucursal: </label> <input type="text" name="sucursal" readonly />
<br />

<label>Nom: </label> <input type="text" name="nom" readonly />
<br />

<label>Any: </label>
<select name="year" >
<option value="2015">2015</option>
<option value="2016">2016</option>
<option value="2017">2017</option>
<option value="2018">2018</option>
</select>
<br />

<label>Trimestre: </label>
<select name="trimestre" >
<option value="1">1T</option>
<option value="2">2T</option>
<option value="3">3T</option>
<option value="4">4T</option>
</select>
<br />

<label>Facturació: </label> <input type="text" name="euros" onchange="validar_numero_2decimals(this)" /> (format: punt decimal)
<br />

<input type="submit" value="Enviar" />
</form>

</body>
</html>
</pre>
script '''open.php''':
<pre>
<?php
$conn = mysqli_connect("localhost", "alumne", "keiL2lai", "jbalmes");
if (!$conn) {
$log->error('Could not connect: ' . mysql_error());
die('Could not connect: ' . mysql_error());
}

mysqli_set_charset($conn,'utf8');
?>
</pre>
script '''close.php''':
<pre>
<?php
mysqli_close($conn);
?>
</pre>
==Solució addEventListener==
<pre>
...
<script>
...
function carregar_events(){
var enllacos = document.links;
for (i=0;i<enllacos.length; i++) {
//alert(enllacos[i].href);
enllacos[i].addEventListener("click", function(){escriure_formulari(this)});
}
}
...
</script>
...
<body onload="carregar_events()">
...
</pre>
i també ho podem fer d'una manera més genèrica, cercant els enllaços que hi ha dins de les cel.les:
<pre>
...
<script>
...
function carregar_events(){
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)});
}
}
...
</script>
...
<body onload="carregar_events()">
....
</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.

==Millores a implementar==
*Solució amb ''addEventListener''.
*Posar automàticament l'any actual (segons la data del sistema)
*Posar automàticament el trimestre actual (segons la data del sistema)
*Ficar el codi javascript en un fitxer extern
*Ficar un full d'estils extern, i treballar la capa de disseny i maquetació. Concretament, la gestió de la validació dels camps del formulari.
*Eliminar el botó Enviar. Després de posar el valor de la facturació, ja s'envien les dades del formulari al servidor.
*En el servidor, si es tornen a enviar les dades corresponents a un any i trimestre, fer un update en comptes d'un insert.
*petit script informe.php: per cada any, avariguar quina sucursal ha facturat més diners.
*etc...

=Entrega=
Els alumnes entregaran al Google Classroom tots els fitxers generats. S'empaquetaran tots aquests fitxers i es pujaran al Google Classroom dins del termini d'entrega de la pràctica.

Recorda la '''normativa''' per entregar les pràctiques al Schoology: [[ASIX-M10-UF2#Normativa_d.27entrega_de_les_pr.C3.A0ctiques_al_Schoology]]

{{Autor}}, gener 2019
[[Categoria: Institut Jaume Balmes]]
[[Categoria: Assignatura DAW-M06-WEC]]

← Versió més antiga		Revisió del 11:38, 30 gen 2021
Línia 355:		Línia 355:

	//console.log(trimestre);		//console.log(trimestre);
−	~~var sel_year = document.getElementById("year");~~
−	~~//console.log(sel_year);~~
−	~~var opcions = sel_year.childNodes;~~
−	~~//console.log(opcions)~~
−	~~for(var i=0; i<opcions.length; i++) {~~
−	~~//console.log(opcions[i].nodeType);~~
−	~~if (opcions[i].nodeType==1) {~~
−	~~//console.log(opcions[i].value);~~
−	~~if(opcions[i].value == year) { //hem de posar selected~~
−	~~opcions[i].selected = "selected"~~
−	}
−	}
−	}

	var sel_trimestre = document.getElementById("trimestre");		var sel_trimestre = document.getElementById("trimestre");

@@ Línia 269: / Línia 269: @@
 </table>
 <br />
-<form name="frm_facturacio" method="post" onsubmit="controlar_camps_formulari()" action="facturacio.php" >
+<form name="frm_facturacio" method="post" action="facturacio.php" >
 			<label>Sucursal: </label> <input type="text" name="sucursal" readonly />
 			<br />
@@ Línia 290: / Línia 290: @@
 			<br />
-			<label>Facturació: </label> <input type="text"  name="euros" onchange="validar_numero_2decimals(this)" /> (format: punt decimal)
+			<label>Facturació: </label> <input type="text"  name="euros" /> (format: punt decimal)
 			<br />
@@ Línia 305: / Línia 305: @@
 script ''script.js'':
 <pre>
-//addeventlisteners
+//s'executa quan s'ha carregat la pàgina
 document.body.addEventListener("load", inici(), false);
 function inici() {
 	var year = new Date().getFullYear()-1;
 	var month = new Date().getMonth();

@@ Línia 84: / Línia 84: @@
 </pre>
 =Entrega=
-Els alumnes entregaran al Google Classroom tots els fitxers generats. S'empaquetaran tots aquests fitxers i es pujaran al Google Classroom dins del termini d'entrega de la pràctica.
+Li ensenyaràs al professor la teva solució (nota de classe).
-Recorda la '''normativa''' per entregar les pràctiques al Schoology: [[ASIX-M10-UF2#Normativa_d.27entrega_de_les_pr.C3.A0ctiques_al_Schoology]]
+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}}, gener 2021
+{{Autor}}, desembre 2021
 [[Categoria: Institut Jaume Balmes]]
 [[Categoria: Assignatura DAW-M06-WEC]]

@@ Línia 148: / Línia 148: @@
 			<label>Any: </label>
 			<select name="year" >
 			<option value="2017">2017</option>
 			<option value="2018">2018</option>
 			</select>
 			<br />