Programacion WEB: 5.3 Aplicacion

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

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);
  }); 
});



 






 




Fuente de informacion: https://helpx.adobe.com/es/dreamweaver/using/web-applications.html

Programacion WEB

miércoles, 22 de abril de 2015

5.3 Aplicacion

index.php

conexion.php

comboEstado.php

comboMunicipio.php

colonias.php

No hay comentarios:

Publicar un comentario