5.4. 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;
?>
ar 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:
- Google cromo
- Mozilla Firefox 4 y superiores
- Internet Explorer 9 ( IE 10 recomendado) -windows-
- 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:
- 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.
- 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
- 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
- De la misma forma en las líneas 11 al 16 se declaran las series que contendran los valores de Y
- Los posteriores elementos de dichos vectores tendrán como indice data
- 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.
- json_encode (línea 28) Retorna la representación JSON del valor dado
- <?php $conexion = mysql_connect('localhost','USUARIO','PASSWORD'); if (!$conexion) { die('Imposiblre conectarse al servidor: ' . mysql_error()); } mysql_select_db('prograwe_ejemplos', $conexion); $query = mysql_query('SELECT * FROM project_requests'); mysql_close($conexion); $category = array(); $category['name'] = 'Month'; $series1 = array(); $series1['name'] = 'Wordpress'; $series2 = array(); $series2['name'] = 'CodeIgniter'; $series3 = array(); $series3['name'] = 'Highcharts'; while($r = mysql_fetch_array($query)) { $category['data'][] = $r['month']; $series1['data'][] = $r['wordpress']; $series2['data'][] = $r['codeigniter']; $series3['data'][] = $r['highcharts']; } $result = array(); array_push($result,$category); array_push($result,$series1); array_push($result,$series2); array_push($result,$series3); print json_encode($result, JSON_NUMERIC_CHECK); ?>
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
Video:
https://www.youtube.com/watch?v=xVML0tTrPTM
No hay comentarios.:
Publicar un comentario