PROGRAMACIÓN WEB
Memoria de la Actividad 4
Trabajo individual
Web de cambio de moneda
CURSO 2014 – 2015
Alfonso Cachinero Sánchez
Matrícula: 21203288
PROGRAMACIÓN WEB
CURSO 2014 – 2015
Unidad 4
Cambio de
moneda
Índice de contenidos
1 Enunciado de la actividad ....................................................... 3
2 Soluciones a los apartados del ejercicio propuesto ................ 4
2.1
Descripción .................................................................................... 4
2.2
Estructura del DOM ....................................................................... 4
2.3
Código fuente ................................................................................ 5
3 Conclusiones .......................................................................... 8
Alfonso Cachinero Sánchez
Página 2 de 8
PROGRAMACIÓN WEB
CURSO 2014 – 2015
Unidad 4
Cambio de
moneda
1 Enunciado de la actividad
El objetivo de esta práctica es elaborar una Web para mostrar el cambio de
moneda entre el Euro y el Dólar mediante la llamada a una página PHP. El código
PHP realizará el cálculo tomando como base los datos introducidos en la página
HTML y el resultado se deberá devolver y visualizar en el esa misma página. El
código PHP debe incluirse en este documento para que pueda ser visto por el
profesor.
Para realizar la entrega se debe subir el dossier al mismo dominio que se creó en
la realización de las restantes prácticas.
Alfonso Cachinero Sánchez
Página 3 de 8
PROGRAMACIÓN WEB
CURSO 2014 – 2015
Unidad 4
Cambio de
moneda
2 Soluciones a los apartados del ejercicio propuesto
Para la realización de esta práctica capturo la cantidad a cambiar y el tipo de
cambio a realizar.
2.1 Descripción
Se captura la cantidad en un campo de tipo numérico y el tipo de cambio a
realizar en un “radio button” de dos botones: Euro-Dólar y Dólar-Euro.
También he añadido un botón de “Calcular” donde hago un “submit” del
formulario con la llamada al PHP y un botón “Limpiar” donde hago un
“reset” de los campos del formulario.
2.2 Estructura del DOM
La página donde he resuelto la práctica se compone de 3 elementos:
cambio_moneda.html: contiene la estructura base de la página
donde se muestra la imagen central, el formulario y los botones de
actuación. Allí se recogen los datos del usuario.
cambio_moneda.php: aquí es donde se realiza el cálculo y donde se
compone la respuesta en formato html para que se vea en la página
web.
Cambio_moneda.css: en este fichero tengo descrito los diferentes
formatos a utilizar para cada uno de los elementos.
Alfonso Cachinero Sánchez
Página 4 de 8
PROGRAMACIÓN WEB
CURSO 2014 – 2015
Unidad 4
Cambio de
moneda
2.3 Código fuente
A continuación incluyo el código fuente de los tres componentes de la
página Web:
cambio_moneda.html
<html>
<head>
<title>Cambio Euro / Dólar</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF8" />
<link rel="stylesheet" href="cambio_moneda.css" />
<!-- Librería de JQUERY usada desde Internet -->
<script type="text/javascript"
src="http://code.jquery.com/jquery-2.1.1.js"></script>
<div id="principal">
<div id="billetes">
<img src="./cambio_files/Euro_Dolar_800x800.jpg"/>
</div>
<div id="titulo">
<div id="cabecera"></div>
<h1>Cambio Euro / Dólar</h1>
<h2>Introduzca la cantidad y el </h2>
<h2>tipo de cambio que desea</h2>
</div>
<form id="formulario" action="javascript:void(0)">
Cantidad:
<input type="number" name="cantidad"
value="1"><BR><BR>
Tipo de cambio: <input type="radio" name="tipoCambio"
value="1" checked>Euro-Dólar
<input type="radio" name="tipoCambio"
value="2">Dólar-Euro<BR><BR>
<input type="submit" name="calcular" value="Calcular"
onclick="cambioMoneda()">
<input type="reset" name="limpiar" value="Limpiar">
</form>
<div id="cambio">
<!-- Aquí vendrá a colocarse el resulado de la ejecución del
PHP -->
</div>
</div>
</head>
<body>
<script type="text/javascript">
function cambioMoneda(){
var cantidad = $('input[name=cantidad]').val();
var tipoCambio = $('input[type="radio"]:checked').val();
$.get("cambio_moneda.php?cantidad="+cantidad+"&tipoCambio="+tipoCambi
o,function recogerCambio(data) {
$("#cambio").html(data);
}
);
}
</script>
</body>
</html>
Alfonso Cachinero Sánchez
Página 5 de 8
PROGRAMACIÓN WEB
CURSO 2014 – 2015
Unidad 4
Cambio de
moneda
cambio_moneda.php
<?php
header('Content-Type: text/html; charset=UTF-8');
$cantidad = $_GET["cantidad"];
$tipoCambio = $_GET["tipoCambio"];
if ($tipoCambio == 1) {
$cambio=$cantidad*1.23910." Dólares";
echo "El cambio solicitado es de: $cambio";
}
else{
$cambio=$cantidad*0.807035." Euros";
echo "El cambio solicitado es de: $cambio";
}
?>
Alfonso Cachinero Sánchez
Página 6 de 8
PROGRAMACIÓN WEB
CURSO 2014 – 2015
Unidad 4
Cambio de
moneda
cambio_moneda.css
body{
background-color:#CCCCCC;
margin: 0px;}
#principal{
width: 800px;
height: 650px;
margin:auto;
margin-top:0px;
padding:0%;
background-color:#ffffff;
text-align: center;}
#billetes{
width:800px ;
height: 400px;
overflow-y:hidden;
margin-top: 0px;
background-color: #000000;
margin-left: auto;
margin-right: auto;}
#cabecera{
display: block;
height: 85px;}
#formulario{
position: relative;
top: -75px;
color: #000000;
font-size: small;
font-family: helvetica;}
#formulario img{
position: relative;
top: -70px;
left: 175px;}
#cambio{
position: relative;
text-align: center;
margin: 0px;
padding: 0px;
top: -75px;
color: red;
font-size: medium;
font-family: helvetica;
font-weight: bold;}
h1{
clear: both;
position: relative;
color: green;
margin: 5px;
top: -90px;
font-family: "Arial black";}
h2{
position: relative;
margin: 0px;
top: -90px;
color: #aaaaaa;
font-size: medium;
font-family: helvetica;}
Alfonso Cachinero Sánchez
Página 7 de 8
PROGRAMACIÓN WEB
CURSO 2014 – 2015
Unidad 4
Cambio de
moneda
3 Conclusiones
Con el desarrollo de esta práctica he conseguido realizar una conexión entre el
código HTML y el PHP que me va a permitir a futuro codificar funciones más
avanzadas entre las que estarán las llamadas a base de datos y otros.
Alfonso Cachinero Sánchez
Página 8 de 8
© Copyright 2024 ExpyDoc
