Programacion Web : abril 2015

Unidad 5

5.1 Introducción al Lenguaje:

La Programación del lado del servidor es una tecnología que consiste en el procesamiento de una petición de un usuario mediante la interpretación de un script en el servidor web para generar páginas HTML dinámicamente como respuesta.

Todo lo que suceda dentro del servidor es llamado procesamiento del lado del servidor, o server-side processing. Cuando tu aplicación necesita interactuar con el servidor (por ejemplo, para cargar o guardar datos), ésta realiza una petición del lado del cliente (client-side request) desde el navegador, a través de la red usando invocaciones remotas a métodos (remote procedure call, RPC). Mientras se está procesando una llamada RPC, tu servidor está ejecutando código del lado del servidor.

La utilización de las diferentes aplicaciones o servicios de Internet se lleva a cabo respondiendo al llamado modelo cliente-servidor.

Cuando se utiliza un servicio en Internet, como consultar una base de datos, transferir un archivo o participar en un foro de discusión, se establece un proceso en el que entran en juego dos partes. Por un lado, el usuario, quien ejecuta una aplicación en procesador local: el denominado programa cliente. Este programa cliente se encarga de ponerse en contacto con el procesador remoto para solicitar el servicio deseado. El procesador remoto por su parte responderá a lo solicitado mediante un programa que esta ejecutando. Este último se denomina programa servidor. Los términos cliente y servidor se utilizan tanto para referirse a los programas que cumplen estas funciones, como a las computadoras donde son ejecutados esos programas.

El programa o los programas cliente que el usuario utiliza para acceder a los servicios de Internet realizan dos funciones distintas. Por una parte, se encargan de gestionar la comunicación con el computador servidor, de solicitar un servicio concreto y de recibir los datos enviados por éste; y por otra, es la herramienta que presenta al usuario los datos en pantalla y que le ofrece los comandos necesarios para utilizar las prestaciones que ofrece el servidor.

Cuando nosotros seleccionamos un enlace hipertexto, en realidad lo que pasa es que establecemos una petición de un archivo HTML residente en el servidor (una computadora que se encuentra continuamente conectado a la red) el cual es enviado e interpretado por nuestro navegador (el cliente).

Así pues, podemos hablar de lenguajes de lado servidor que son aquellos lenguajes que son reconocidos, ejecutados e interpretados por el propio servidor y que se envían al cliente en un formato comprensible para él, por ejemplo: ASP, PHP, JSP.

Por otro lado, los lenguajes de lado cliente (entre los cuales no sólo se encuentra el HTML sino también el Java y el JavaScript los cuales son simplemente incluidos en el código HTML) son aquellos que pueden ser directamente "digeridos" por el navegador y no necesitan un pretratamiento.

Cada uno de estos tipos tiene por supuesto sus ventajas y sus inconvenientes. Así, por ejemplo, un lenguaje de lado cliente es totalmente independiente del servidor, lo cual permite que la página pueda ser albergada en cualquier sitio sin necesidad de pagar más ya que, por regla general, los servidores que aceptan páginas con scripts de lado servidor son en su mayoría de pago o sus prestaciones son muy limitadas.

Inversamente, un lenguaje de lado servidor es independiente del cliente por lo que es mucho menos rígido respecto al cambio de un navegador a otro o respecto a las versiones del mismo.

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:

http://www.prograweb.com.mx/pweb/0504Aplicacion.php

Video:

https://www.youtube.com/watch?v=xVML0tTrPTM

Programacion Web

miércoles, 29 de abril de 2015

Unidad 5 programacion del lado del servidor

ndex.php

conexion.php

comboEstado.php

comboMunicipio.php

colonias.php

Gráficos de barras

index.php

funciones.js

Gráficos de líneas

index.php

data.js

Gráfíco de pastel

index.php

data.php

Archivo del Blog