5.43 Aplicaciones
Hasta
ahora realizaos solo ejemplos que pueden orientar para aprender programación
web. Nos obstante es momento de sacarle provecho a la combinación de los
conocimientos adquiridos a lo largo del curso
Se
presentan algunas apicaciones de ellas
Combox
Dinámicos
Este
ejemplo esta basado en la base de datos de códigos postales de méxico cuya
estructura estructura y datos la puedes descar aquí. El correspodiente diagrama
entidad relación se presenta a continuación:
ndex.php
<head>
<meta charset='utf-8'/>
<title>Combox Dependientes</title>
<link href='../../../css/estilo.css' rel='stylesheet' />
<script src='js/jquery-1.10.1.min.js'></script>
<script src='js/js.js'></script>
</head>
<body>
<p><label>Estado</label>
<select class='styled-select' id='estado'></select></p>
<p><label>Municipio</label>
<select class='styled-select' id='municipio'></select></p>
<div id='colonias'>
</div>
</body>
</html>
conexion.php
<?php
$ruta = 'localhost';
$usuario = 'Usuario';
$key = 'Password';
$db = 'Tu base de datos';
$conexion = mysql_connect( $ruta, $usuario, $key) or die(mysql_error());
mysql_select_db( $db, $conexion ) or die(mysql_error());
mysql_query("SET NAMES 'utf8'");
?>
comboEstado.php
<?php
$query = 'SELECT idEstado, estado
FROM estado ORDER BY estado';
include('conexion.php');
$estados = mysql_query($query, $conexion)
or die(mysql_error());
mysql_close($conexion);
$html = '';
while ($estado = mysql_fetch_assoc($estados)) {
$html.= '<option value="'.$estado['idEstado'].'">';
$html.= $estado['estado'].'</option>';
}
echo $html;
?>
comboMunicipio.php
<?php
$idEstado = $_GET['idEstado'];
$query = 'SELECT idMunicipio, municipio FROM municipio ';
$query.= 'WHERE idEstado ='.$idEstado;
$query.= ' ORDER BY municipio';
include('conexion.php');
$municipios = mysql_query($query, $conexion)
or die(mysql_error());
mysql_close($conexion);
$html = '';
while ($municipio = mysql_fetch_assoc($municipios)) {
$html.= '<option value="'.$municipio['idMunicipio'].'">';
$html.= $municipio['municipio'].'</option>';
}
echo $html;
?>
colonias.php
<?php
$idMunicipio = $_GET['idMunicipio'];
$query = 'SELECT T.tipo, C.colonia, C.codigoPostal, Z.zona
FROM colonia C, tipo T, zona Z ';
$query.= "WHERE C.idMunicipio = $idMunicipio ";
$query.= 'AND C.idTipo = T.idTipo AND C.idZona = Z.idZona ';
$query.= 'ORDER BY C.colonia';
include('conexion.php');
$colonias = mysql_query($query, $conexion)
or die(mysql_error());
mysql_close($conexion);
$n = mysql_num_rows($colonias);
if( $n > 0 ) {
$html = '<table>';
$html.= '<thead>';
$html.= '<tr>';
$html.= '<th>Asentamiento</th>';
$html.= '<th>Nombre</th>';
$html.= '<th>C.P.</th>';
$html.= '<th>Zona</th>';
$html.= '</tr>';
$html.= '</thead>';
$html.= '<tbody';
while ($colonia = mysql_fetch_assoc($colonias)) {
$html.= '<tr>';
$html.= '<td>'.$colonia['tipo'].'</td>';
$html.= '<td>'.$colonia['colonia'].'</td>';
$html.= '<td>'.$colonia['codigoPostal'].'</td>';
$html.= '<td>'.$colonia['zona'].'</td>';
$html.= '</tr>';
}
$html.= '</tbody>';
$html.= '</table>';
} else {
$html = '<p align="center">';
$html = '<img alt="" src="../../../images/negacion.gif">';
$html.= '</p>';
}
echo $html;
?>
HTML 5 que trabaja en
forma local. Por lo tanto se requiere un navegador con soporte HTML5 . Los
siguientes son algunos de los navegadores probados para la compatibilidad con
está librería:
1.
Google cromo
2.
Mozilla Firefox 4 y superiores
3.
Internet
Explorer 9 ( IE 10 recomendado) -windows-
4.
Safari -Windows, Safari-
Gráficos de barras
Se presenta a continuación de barras con PHP, HIGHCHART, MySQL y
AJAX
index.php
<!DOCTYPE HTML>
<html lang='es'>
<head>
<meta charset='utf-8'>
<title>Column chart with data from MySQL using Highcharts</title>
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">
</script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<script src='funiciones.js'></script>
</head>
<body>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto">
</div>
</body>
</html>
funciones.js
El código esta esrito en una combinación de jQuery t JSON
(líneas 41 al 48)
JSON (JavaScript Object Notation - Notación de Objetos de
JavaScript) es un formato ligero de intercambio de datos. Leerlo y escribirlo
es simple para humanos, mientras que para las máquinas es simple interpretarlo
y generarlo. Está basado en un subconjunto del Lenguaje de Programación
JavaScript, Standard ECMA-262 3rd Edition - Diciembre 1999. JSON es un formato
de texto que es completamente independiente del lenguaje pero utiliza
convenciones que son ampliamente conocidos por los programadores de la familia
de lenguajes C, incluyendo C, C++, C#, Java, JavaScript, Perl, Python, y muchos
otros. Estas propiedades hacen que JSON sea un lenguaje ideal para el
intercambio de datos.
JSON está constituído por dos estructuras:
1.
Una colección de pares de nombre/valor. En varios lenguajes esto
es conocido como un objeto, registro, estructura, diccionario, tabla hash,
lista de claves o un arreglo asociativo.
2.
Una lista ordenada de valores. En la mayoría de los lenguajes,
esto se implementa como arreglos, vectores, listas o sequencias.
Estas son estructuras
universales; virtualmente todos los lenguajes de programación las soportan de
una forma u otra. Es razonable que un formato de intercambio de datos que es
independiente del lenguaje de programación se base en estas estructuras.
$(document).ready(function() {
var options = {
chart: {
renderTo: 'container',
type: 'column',
marginRight: 130,
marginBottom: 25
},
title: {
text: 'Project Requests',
x: -20 //center
},
subtitle: {
text: '',
x: -20
},
xAxis: { categories: [] },
yAxis: { title: {text: 'Requests'},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
formatter: function() {
return this.series.name +' '+ this.x
+ ': '+ this.y;
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -10,
y: 100,
borderWidth: 0
},
series: []
}
$.getJSON("data.php", function(json) {
options.xAxis.categories = json[0]['data'];
options.series[0] = json[1];
options.series[1] = json[2];
options.series[2] = json[3];
chart = new Highcharts.Chart(options);
});
});
El intercambio de datos se logra en formato JSON mediante un
archvo PHP que se muestra a continuación
1.
En la línea 9 declaramos un vector asociativo. Dicho vector
guarda los valores del eje X. Observe que el primer índice de
cualquier vector es name
2.
De la misma forma en las líneas 11 al 16 se declaran las series
que contendran los valores de Y
3.
Los posteriores elementos de dichos vectores tendrán como
indice data
4.
array_push() trata array
como si fuera una pila y coloca la variable que se le proporciona al final del
array. El tamaño del array será incrementado por el número de variables
insertados.
5.
json_encode (línea 28)
Retorna la representación JSON del valor dado
6.
<?php
7. $conexion = mysql_connect('localhost','USUARIO','PASSWORD');
8.
if
(!$conexion) {
9.
die('Imposiblre conectarse al servidor: ' .
mysql_error());
10.
}
11.
mysql_select_db('prograwe_ejemplos',
$conexion);
12. $query = mysql_query('SELECT * FROM
project_requests');
13.
mysql_close($conexion);
14.
$category = array();
15.
$category['name'] = 'Month';
16.
$series1 = array();
17.
$series1['name'] = 'Wordpress';
18.
$series2 = array();
19.
$series2['name'] = 'CodeIgniter';
20.
$series3 = array();
21.
$series3['name'] = 'Highcharts';
22. while($r = mysql_fetch_array($query)) {
23.
$category['data'][]
= $r['month'];
24.
$series1['data'][] = $r['wordpress'];
25.
$series2['data'][] = $r['codeigniter'];
26.
$series3['data'][] = $r['highcharts'];
27.
}
28.
$result = array();
29.
array_push($result,$category);
30.
array_push($result,$series1);
31.
array_push($result,$series2);
32.
array_push($result,$series3);
33. print json_encode($result,
JSON_NUMERIC_CHECK);
34. ?>
Gráficos de líneas
Mediante un gráfico de líneas se presenta la fluctuación del
precio del dólar con respecto al peso Mexicano. 1995 a la fecha
index.php
Observe que el archivo es similar al anterior
<!DOCTYPE html>
<html lang='es'>
<head>
<meta charset='utf-8'/>
<title>Highcharts con mySQL y PHP</title>
<script src='http://ajax.googleapis.com/ajax/libs/jquery
/1.7.1/jquery.min.js'></script>
<script src='http://code.highcharts.com/highcharts.js'></script>
<script src='http://code.highcharts.com/modules/exporting.js'></script>
<scml>ript src='data.js' ></script>
</head>
<body>
<div id='chart' style='height: 400px; margin: 0 auto; width:800px;'></div>
</body>
</html>
data.js
$(function() {
var year = [];
var Precio = [];
var switch1 = true;
$.get('dolar.php', function(data) {
data = data.split('/');
for (var i in data) {
if (switch1 == true) {
year.push(data[i]);
switch1 = false;
else {
Precio.push(parseFloat(data[i]));
switch1 = true;
}
}
year.pop();
$('#chart').highcharts({
chart : {
type : 'spline'
},
title : {
text : 'Precio del d\u00f3lar americano en pesos Mexicanos 1995 a la fecha'
},
subtitle : {
text : 'Fuente: Banxico'
},
xAxis : {
title : {
text : 'A\u00f1o'
},
categories : year
},
yAxis : {
title : {
text : 'Precio'
},
labels : {
formatter : function() {
return this.value
}
}
},
tooltip : {
crosshairs : true,
shared : true,
valueSuffix : ''
},
plotOptions : {
spline : {
marker : {
radius : 4,
lineColor : '#666666',
lineWidth : 1
}
}
},
series : [{
name : 'Precio',
data : Precio
}]
});
});
});
Gráfíco de pastel
A conituación se presenta el diagrama entidad relación sintético
del Sistema de Seguimiento de Egresados del ITV. Fuente propia
index.php
<!DOCTYPE HTML>
<html lang='es'>
<head>
<meta charset='utf-8'>
<title>Highcharts Pie Chart</title>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'>
</script>
<script src='http://code.highcharts.com/highcharts.js'></script>
<script src='http://code.highcharts.com/modules/exporting.js'></script>
<script src='funciones.js'></script>
</head>
<body>
<div id='container' style='min-width: 400px; height: 400px; margin: 0 auto'>
</div>
</body>
</html>
$(document).ready(function() {
var options = {
chart: {
renderTo: 'container',
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: { text: 'Seguimiento de Egresados ITV. Egresados registrados.
Por especialidad'},
subtitle : { text : 'Fuente: I.T.V'},
tooltip: {
formatter: function() {
return ''+ this.point.name +': '+ this.y;
}
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
color: '#000000',
connectorColor: '#000000',
formatter: function() {
return this.point.name +': '
+ this.percentage.toFixed(2) +' %';
}
}
}
},
series: [{
type: 'pie',
name: 'Browser share',
data: []
}]
}
$.getJSON("data.php", function(json) {
options.series[0].data = json;
chart = new Highcharts.Chart(options);
});
});
data.php
<?php
header('Content-Type: text/html; charset=UTF-8');
$conexion = mysql_connect("localhost","prograwe","Albatros2002");
if (!$conexion) {
die('Imposible conectarse con el servidor: ' . mysql_error());
}
mysql_select_db("prograwe_egresados", $conexion);
mysql_query("SET NAMES 'utf8'");
$query = 'SELECT COUNT(Eg.idEspecialidad) nEgresados, Es.especialidad ';
$query.= 'FROM especialidad Es, egresados Eg ';
$query.= 'WHERE Es.idEspecialidad = Eg.idEspecialidad ';
$query.= 'GROUP BY Es.idEspecialidad';
$registros = mysql_query($query)
or die('Error en la consulta: '.mysql_error());
mysql_close($conexion);
$datos = array();
while($registro = mysql_fetch_array($registros)) {
$row[0] = $registro['especialidad'];
$row[1] = $registro['nEgresados'];
array_push($datos,$row);
}
print json_encode($datos, JSON_NUMERIC_CHECK);
?>
pagina:
https://helpx.adobe.com/es/dreamweaver/using/web-applications.html
Luis Antonio Castro mendoza. (06/09/2014). Aspectos básicos de las aplicaciones Web. 11/09/2014, de adobe Dreamweaver Sitio web: https://helpx.adobe.com/es/dreamweaver/using/web-applications.html
Video:
https://www.youtube.com/watch?v=xVML0tTrPTM
No hay comentarios.:
Publicar un comentario