5.3. APLICACIÓN.

Un servidor web o servidor HTTP es un programa informático que procesa una aplicación del lado del servidor, realizando conexiones bidireccionales y/o unidireccionales y síncronas o asíncronas con el cliente y generando o cediendo una respuesta en cualquier lenguaje o Aplicación del lado del cliente. El código recibido por el cliente suele ser compilado y ejecutado por un navegador web. Para la transmisión de todos estos datos suele utilizarse algún protocolo. Generalmente se usa el protocolo HTTP para estas comunicaciones, perteneciente a la capa de aplicación del modelo OSI. El término también se emplea para referirse al ordenador que ejecuta el programa.

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:

index.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; 
?>


Los datos se cargan dinámicamente mediante AJAX con jQuery

$(document).ready(function() {
  $('#estado').load('comboEstado.php', function() {
  var idEstado =  $('#estado').val();
  var url = 'comboMunicipio.php?idEstado='+idEstado;
  $('#municipio').load(url, function() {
    var idMunicipio = $('#municipio').val();
    var url = 'colonias.php?idMunicipio='+idMunicipio;
    $('#colonias').load(url);
  }); 
  });
  $('#estado').change(function(event){
  var idEstado = $('#estado').val();
  var url = 'comboMunicipio.php?idEstado='+idEstado;
  $('#municipio').load(url, function() {
    var idMunicipio = $('#municipio').val();
    var url = 'colonias.php?idMunicipio='+idMunicipio;
    $('#colonias').load(url);
  });
  });
  $('#municipio').change(function(event){
  var idMunicipio = $('#municipio').val();
  var url = 'colonias.php?idMunicipio='+idMunicipio;
  $('#colonias').load(url);
  }); 
});




FUENTES:

http://ingenieriadesistemas.bligoo.com.mx/ejemplos-de-sistemas-blandos#.VVDTDY5_Oko

https://dmjo.wordpress.com/2009/04/15/53-aplicaciones/


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

Programacion Web

lunes, 11 de mayo de 2015

5.3. APLICACIÓN.

5.3. APLICACIÓN.

Combox Dinámicos

index.php

conexion.php

comboEstado.php

comboMunicipio.php

colonias.php

No hay comentarios:

Publicar un comentario