Aplicació de facturació trimestral

De Wikijoan
Dreceres ràpides: navegació, cerca

Contingut

Enunciat del problema

Formulari aplicacio facturacio.jpg

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:

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:

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).

A continuació se't mostra una estructura possible de l'aplicatiu web, sense cap mena de full d'estils.

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);

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:

script facturacio.php:

<!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>

script open.php:

<?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');
?>

script close.php:

<?php
mysqli_close($conn);
?>

Solució addEventListener

...
<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()">
...

i també ho podem fer d'una manera més genèrica, cercant els enllaços que hi ha dins de les cel.les:

...
<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()">
....

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

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


creat per Joan Quintana Compte, gener 2019

Eines de l'usuari
Espais de noms
Variants
Accions
Navegació
Institut Jaume Balmes
Màquines recreatives
CNC
Informàtica musical
joanillo.org Planet
Eines