4.1.4. Arreglos

Una arreglo (array) es una estructura de datos que contienen una colección de datos del mismo tipo. Los array se utilizan como contenedores para almacenar datos relacionados ( en vez de declarar variables por separado para cada uno de los elementos del array).

Denominamos vector a los array unidimensionales y matrices a los array bidimensionales. Si bien es posible definir matrices de más de dos dimensiones después de casi tres decadas programando jamás necesite una. Los array se clasifican según su naturaleza en indexadas o asociativas.

Array indexados

Son aquellos en las que el índice es un valor numérico.

$estaciones = array ('primavera', 'verano', 'otoño', 'invierno');

$sentidos = array ('gusto', 'oido', 'olfato', 'tacto', 'vista');

$numeros = array(1,2,30, 50, 60, 70);

Para acceder un elemento del arreglo usaremos la notación genérica:

$estaciones[$i];

$sentidos[$i];

$numeros[$i];

Como índice podemos usar un número, una variable o constante que represente el elemento referenciando. Iniciando desde la posición cero.

Ejemplo:Se declara un arreglo denominado $estacion. El cual se recorre mediante un ciclo for.

<?php
  $estacion = array ('Primavera', 'Verano', 'Otoño', 'Invierno');
  echo 'Las estaciones del año son <br>';
  for($i = 0; $i <=4; $i++) 
    echo $estacion[$i].'<br />';
?>

Los arrays se ordenan usando las funciones asort(), arsort(),ksort(),rsort(), sort(), uasort() y uksort() según el tipo de ordenación.

Ejemplo: Generar un vector aleatorio de tamaño n y ordenarlo.

<!DOCTYPE html>
<html lang='es'>
<head>
  <meta charset='utf-8'>
  <meta name='viewport' content='width=device-width, initial-scale=1'>
  <meta http-equiv='x-ua-compatible' content='ie=edge'>
  <title>Vectores</title>
  <link href='http://netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css' rel='stylesheet'>
  <link href='../formValidation/css/formValidation.min.css' rel='stylesheet'>
</head>
<body>
<div class='container'>
  <form id='pacheco' class='form-horizontal' name='pacheco' method="post">
    <fieldset> 
      <legend class='text-center'>Ordenación de arreglos</legend>
      <div class='form-group'>
        <label class='control-label col-sm-2' for='n'>Elementos </label>
        <div class='col-sm-3'>
          <input id='n' class='form-control' name='n'>
        </div>
      </div>
     
      <div class="form-group"> 
        <div class="col-xs-9 col-xs-offset-3">
          <button type="submit" class="btn btn-primary">Validar</button>
          <button type="button" class="btn btn-default" id="resetButton">Reset</button>        
        </div>  
      </div>
    </fieldset>
  </form>
  <div class='row'>     
     <div class="col-sm-offset-2 col-sm-6" id="message"></div>
  </div>
</div>
<!-- Script jQuery -->
</body>
</html>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js'></script>
<script src='../formValidation/js/formValidation.js'></script>
<script src='../formValidation/js/framework/bootstrap.min.js'></script>
<script>
$(document).ready(function() {
  $('#pacheco') .formValidation({
    err: {
      container: 'tooltip'
    },
	icon: {
      valid: 'glyphicon glyphicon-ok',
      invalid: 'glyphicon glyphicon-remove',
      validating: 'glyphicon glyphicon-refresh'
    },
    fields: {
      n: {
        validators: {
		  notEmpty: { message: 'El valor no puede ser nulo'},
           between: {
             min: 50,
             max: 200,
             message: 'El número de elementos debe estar entre 50 y 200'
           }
        }
      }
    }
  })
  .on('err.field.fv', function(e, data) {
    // Get the tooltip
    var $icon = data.element.data('fv.icon'), title = $icon.data('bs.tooltip').getTitle();
   
    // Destroy the old tooltip and crete a new one positioned to the right
    $icon.tooltip('destroy').tooltip({
      html: true,
      placement: 'right',
      title: title,
      container: 'body'
    });
  })
  
  .on('success.form.fv', function(e) {
      // Prevent form submission
      e.preventDefault();

      // Get the form instance
      var $form = $(e.target);
       
      $.post('04Vector.php', $("#pacheco").serializeArray(),
	          function(data) { $('#message').html(data); }
      );
    });
	
    // Reset the Tooltip container form
    $('#resetButton').on('click', function(e) {
        var fields = $('#tooltipContainerForm').data('formValidation').getOptions().fields,
            $parent, $icon;

        for (var field in fields) {
            $parent = $('[name="' + field + '"]').parents('.form-group');
            $icon   = $parent.find('.form-control-feedback[data-fv-icon-for="' + field + '"]');
            $icon.tooltip('destroy');
        }

        // Then reset the form
        $('#tooltipContainerForm').data('formValidation').resetForm(true);
    });
	
  });
  </script>  
<?php 
  if( $_SERVER['REQUEST_METHOD'] == 'POST') {
	 $n  = $_POST['n'];
     $html = '<h3 class="text-center">Vector original: </h3><br>'; 
     for($i = 0; $i < $n; $i++) { // Genera un vector de tamaño n 
       $vector[$i] = mt_rand(1, 1000); //mt_rand genera números aleatorios
       $html.=  $vector[$i].' ';
     }
     sort($vector); // Ordena el vector 
     //Imprime el Vector ordenado
     $html.= '<br><h3 class="text-center">Vector ordenado: </h3><br>'; 
     for($i = 0; $i < $n; $i++) {
       $html.= $vector[$i].' ';
     }
	 echo $html;
  }  
?>

Otra función interesante es count que cuenta el número de elementos de un arreglo.

Ejemplo.Considere las temperaturas máximas registradas en la ciudad de Veracruz durante el mes de febrero del 2016.

<?php
  $temperatura = array(23, 25,27, 23, 27,26, 26, 28,27, 22, 26, 21,
                       23,24,21,18,18,19,26,28,27,27,26,18,23,26,24,27);
  sort($temperatura);
  $n = count($temperatura);
  $promedio = 0;
  for($i = 0; $i < $n; $i++)
    $promedio += $temperatura[$i]; 
  $promedio = $promedio/$n;
  $maximo =  ;
  echo "Temperatura mínima = $temperatura[0] <br>";
  echo "Temperatura media  = $promedio <br>";    
  echo "Temperatura máxima = $temperatura[$n - 1] <br>";
?>

Ejemplo: Funciones básicas en arreglos

<?php
  header('Content-Type: text/html; charset=UTF-8'); 
  $array = array(1, 2, 3, 4, 5,70,90); // Creamos un array simple.
  print_r($array); // Imprimimos el array
  echo 'Número de elementos en el array: '.count($array);
  // ahora borraremos los items pero el apuntador del array quedará intacto: 
  $n = count($array);
  for($i = 0; $i <= $n; $i++) {
    unset($array[$i]);
  }
  print_r($array);
  echo '<br>Número de elementos en el array: '.count($array);
  // Ahora sumaremos un item (observe que el nuevo índice es 7, y no 0).
  $array[] = 60;
  print_r($array);
  echo '<br>Número de elementos en el array: '.count($array).'<br>';

  // Re-index:
  $array = array_values($array);
  $array[] = 57;
  print_r($array);
  echo 'Número de elementos en el array: '.count($array).'<br>';
?>

Arrays asociativos

Un array esta formado por conjuntos de parejas índice => valor, o como suele expresarse en inglés, key, value. Los cuales se expresan comunmente con índices o keys numéricos (también conocidos como arrays escalares). Además es posible usar strings como índices, es decir, cadenas de texto. Este tipo de array es el array asociativo:

foreach

El bucle foreach nos permite iterar en cada elemento de un vector, su sintaxis es sencilla. Consiste en indentificar el índice de la matriz, mediante la expresion as y seguidamente la variable que identificará el valor del elemento:

Por ejemplo: Contenido de Potasio en embutidos. Por 100 g de sustancia comestible (sin desperdicios) y sin cocinar..

<!DOCTYPE html>
<html lang='es'>
<head>
  <meta charset='utf-8'>
  <meta name='viewport' content='width=device-width, initial-scale=1'>
  <meta http-equiv='x-ua-compatible' content='ie=edge'>
  <title>Vectores</title>
  <link href='http://netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css' rel='stylesheet'>
</head>
<body>
<?PHP
  echo '<h3 class="text-center">Contenido de Sodio en embutidos</h3>';
  $embutido['Chorizo'] =  1300;
  $embutido['Jamón Serrano'] = 2530; 
  $embutido['Jamón York'] = 960;
  $embutido['Mortadela'] = 668;
  $embutido['Salchicha Franfurt'] = 1100;
  $embutido['Salchichón'] = 1500;
  arsort($embutido); 
  echo '<table class="table table-bordered table-hover">';
  echo '<thead><tr><th>Embutido</th><th>Sodio</th></tr></thead>';
  echo '<tbody>';
  foreach( $embutido as $key =>$sodio) {
    echo '<tr>';
    echo '<td>'.$key.'</td><td>'.$sodio.'</td>';
    echo '</tr>';
  }
  echo '</tbody></table>';
?>
</body>
</html>

Ejemplo: Obtener los archivos de un directorio ordenados alfabéticamente.

<?php
  // llenar un array con todos los ítems de un directorio
   $handle = opendir('zodiaco');
   while (false !== ($archivo = readdir($handle))) {
    $archivos[] = strtolower($archivo);
   }
   closedir($handle);
   sort($archivos);
   foreach($archivos as $i => $valor) {
      echo $valor.'<br>';
   };
?>

Función range

Ejemplo:Crea un vector que contiene una secuencia de elementos.

Sintaxis

array range ( mixed $inicial , mixed $final [, number $incremento ] )

<?php
  echo '<h1>Uso de range</h1><br>';
  echo 'Vector simple<br>';
  foreach (range(0, 20) as $numero) {
    echo $numero.'<br>';
  } 
  echo 'Vector con incremento<br>';
  foreach (range(0, 200, 20) as $numero) {
    echo $numero.'<br>';
  }
  echo 'Vector de letras<br>';
  foreach (range('a', 'z') as $letra) {
    echo $letra.'<br>';
  }
  echo 'Vector de letras descendente<br>';
  foreach (range('M', 'C') as $letra) {
    echo $letra.'<br>';
  }
?>

Recorrer una tabla con índices numéricos mediante un bucle es sencillo, pero ¿cómo recorremos una tabla con índices asociados? Para ello, utilizaremos una serie de sentencias especificas para tal fin:

each() se usa normalmente de forma conjunta a list() para recorrer una matriz: por ejemplo:

<?php
   $deportivos = array('a' => 'BWM M3 Sedan', 'b' => 'Mazda Miata',
					   'c' => 'cFerrari 612 Sca glietti','d' => 'Corvette C6');
   while (list($key, $nombreDeportivo) = each($deportivos)) {
	  $foto = "deportivos/$nombreDeportivo".'.jpg';
	  echo "<img alt='' src='$foto'/>".'<br>';
      echo $nombreDeportivo.'<br>';
   }
?>

Matrices

Los arrays bidimensionales - matrices - similares a una tabla de doble entrada. Cada uno de los elementos se identifica unívocamente por un nombre ($nombre) seguido de dos ([]) que contienen los índices del array.

Los índices pueden ser de tipo escalar - equivalen al número de fila y columna que la celda ocupa en la tabla – o puede ser asociativos lo que equivaldría en alguna medida a usar como índices los nombres de la fila y de la columna.

Los elementos de un array bidimensional escalar pueden escribirse usando una de estas sintaxis:

Ejemplo: Crear e imprimir una matriz r - renglones - x c - columnas -.

<!DOCTYPE html>
<html lang='es'>
<head>
  <meta charset='utf-8'>
  <meta name='viewport' content='width=device-width, initial-scale=1'>
  <meta http-equiv='x-ua-compatible' content='ie=edge'>
  <title>Vectores</title>
  <link href='http://netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css' rel='stylesheet'>
  <link href='../formValidation/css/formValidation.min.css' rel='stylesheet'>
</head>
<body>
<div class='container'>
  <form id='pacheco' class='form-horizontal' name='pacheco' method="post">
    <fieldset> 
      <legend class='text-center'>Ordenación de arreglos</legend>
      <div class='form-group'>
        <label class='control-label col-sm-2' for='renglones'>Renglones </label>
        <div class='col-sm-3'>
          <input id='renglones' class='form-control' name='renglones'>
        </div>
      </div>
      <div class='form-group'>
        <label class='control-label col-sm-2' for='columnas'>Columnas </label>
        <div class='col-sm-3'>
          <input id='columnas' class='form-control' name='columnas'>
        </div>
      </div>
     
      <div class="form-group"> 
        <div class="col-xs-9 col-xs-offset-3">
          <button type="submit" class="btn btn-primary">Validar</button>
          <button type="button" class="btn btn-default" id="resetButton">Reset</button>        
        </div>  
      </div>
    </fieldset>
  </form>
  <div class='row'>     
     <div class="col-sm-offset-2 col-sm-6" id="message"></div>
  </div>
</div>
<!-- Script jQuery -->
</body>
</html>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
  <script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js'></script>
  <script src='../formValidation/js/formValidation.js'></script>
  <script src='../formValidation/js/framework/bootstrap.min.js'></script>
  <script>
$(document).ready(function() {
  $('#pacheco') .formValidation({
    err: {
      container: 'tooltip'
    },
	icon: {
      valid: 'glyphicon glyphicon-ok',
      invalid: 'glyphicon glyphicon-remove',
      validating: 'glyphicon glyphicon-refresh'
    },
    fields: {
      renglones: {
        validators: {
		  notEmpty: { message: 'El valor no puede ser nulo'},
           between: {
             min: 2,
             max: 5,
             message: 'El número de renglones debe estar entre 2 y 5'
           }
        }
      },
      columnas: {
        validators: {
		  notEmpty: { message: 'El valor no puede ser nulo'},
           between: {
             min: 2,
             max: 5,
             message: 'El número de renglones debe estar entre 2 y 5'
           }
        }
      }	  
    }
  })
  .on('err.field.fv', function(e, data) {
    // Get the tooltip
    var $icon = data.element.data('fv.icon'), title = $icon.data('bs.tooltip').getTitle();
   
    // Destroy the old tooltip and crete a new one positioned to the right
    $icon.tooltip('destroy').tooltip({
      html: true,
      placement: 'right',
      title: title,
      container: 'body'
    });
  })
  
  .on('success.form.fv', function(e) {
      // Prevent form submission
      e.preventDefault();

      // Get the form instance
      var $form = $(e.target);
       
      $.post('04ImprimirMatriz.php', $("#pacheco").serializeArray(),
	          function(data) { $('#message').html(data); }
      );
    });
	
    // Reset the Tooltip container form
    $('#resetButton').on('click', function(e) {
        var fields = $('#tooltipContainerForm').data('formValidation').getOptions().fields,
            $parent, $icon;

        for (var field in fields) {
            $parent = $('[name="' + field + '"]').parents('.form-group');
            $icon   = $parent.find('.form-control-feedback[data-fv-icon-for="' + field + '"]');
            $icon.tooltip('destroy');
        }

        // Then reset the form
        $('#tooltipContainerForm').data('formValidation').resetForm(true);
    });
	
  });
  </script>  
<?php
  if( $_SERVER['REQUEST_METHOD'] == 'POST') {	 
    $r = $_POST['renglones'] - 1;
    $c = $_POST['columnas'] - 1;
	$html = '<table class="table table-bordered table-condensed table-hover">';
	for($i = 0; $i <= $r; $i++) {
	  $html .= '<tr>';
      for($j = 0; $j <= $c; $j++) {
		$matriz[$i][$j] = mt_rand(1, 10);
        $html .= '<td>'.$matriz[$i][$j].'</td>';
	  }
	  $html .= '</tr>';
    }
	$html.= '</table>';
	echo $html;
  }
?>

Ejemplo: Suma o resta de matrices

Dadas las matrices m-por-n , A y B, su suma A + B es la matriz m-por-n calculada sumando los elementos correspondientes (i.e. (A + B)[i, j] = A[i, j] + B[i, j] ). Es decir, sumar cada uno de los elementos homálogos de las matrices a sumar. Por ejemplo:

<!DOCTYPE html>
<html lang='es'>
<head>
  <meta charset='utf-8'>
  <meta name='viewport' content='width=device-width, initial-scale=1'>
  <meta http-equiv='x-ua-compatible' content='ie=edge'>
  <title>Vectores</title>
  <link href='http://netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css' rel='stylesheet'>
  <link href='../formValidation/css/formValidation.min.css' rel='stylesheet'>
</head>
<body>
<div class='container'>
  <form id='pacheco' class='form-horizontal' name='pacheco' method="post">
    <fieldset> 
      <legend class='text-center'>Suma o resta de matrices</legend>
      <div class='form-group'>
        <label class='control-label col-sm-2' for='operacion'>Operación</label>
        <div class='col-sm-3'>
          <select id='operacion' name='operacion'>
            <option value='1' selected>Suma</option>
            <option value='-1'>Resta</option>
          </select>
        </div>
      </div>

      <div class='form-group'>
        <label class='control-label col-sm-2' for='f1'>Renglones A</label>
        <div class='col-sm-3'>
          <input id='f1' class='form-control' name='f1'>
        </div>

        <label class='control-label col-sm-2' for='c1'>Columnas A</label>
        <div class='col-sm-3'>
          <input id='c1' class='form-control' name='c1'>
        </div>

      </div>
      <div class='form-group'>
        <label class='control-label col-sm-2' for='f2'>Renglones B</label>
        <div class='col-sm-3'>
          <input id='f2' class='form-control' name='f2'>
        </div>
        <label class='control-label col-sm-2' for='c2'>Columnas B</label>
        <div class='col-sm-3'>
          <input id='c2' class='form-control' name='c2'>
        </div>
      </div>
     
      <div class="form-group"> 
        <div class="col-xs-7 col-xs-offset-5">
          <button type="submit" class="btn btn-primary">Validar</button>
          <button type="button" class="btn btn-default" id="resetButton">Reset</button>        
        </div>  
      </div>
    </fieldset>
  </form>
  <div class='row'>     
     <div class="col-sm-offset-2 col-sm-6" id="message"></div>
  </div>
</div>
<!-- Script jQuery --> 
</body>
</html>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
  <script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js'></script>
  <script src='../formValidation/js/formValidation.js'></script>
  <script src='../formValidation/js/framework/bootstrap.min.js'></script>
  <script>
$(document).ready(function() {
  $('#pacheco') .formValidation({
    err: {
      container: 'tooltip'
    },
	icon: {
      valid: 'glyphicon glyphicon-ok',
      invalid: 'glyphicon glyphicon-remove',
      validating: 'glyphicon glyphicon-refresh'
    },
    fields: {
      f1: {
        validators: {
		  notEmpty: { message: 'El valor no puede ser nulo'},
           between: { min: 2, max: 5, message: 'El número de renglones debe estar entre 2 y 5'}
        }
      },
      c1: {
        validators: {
		  notEmpty: { message: 'El valor no puede ser nulo'},
           between: {min: 2, max: 5, message: 'El número de renglones debe estar entre 2 y 5'}
        }
      },
	  f2: {
        validators: {
		  notEmpty: { message: 'El valor no puede ser nulo'},
           between: { min: 2, max: 5, message: 'El número de renglones debe estar entre 2 y 5'}
        }
      },
      c2: {
        validators: {
		  notEmpty: { message: 'El valor no puede ser nulo'},
           between: { min: 2, max: 5, message: 'El número de renglones debe estar entre 2 y 5'}
        }
      }	  
    }
  })
  .on('err.field.fv', function(e, data) {
    // Get the tooltip
    var $icon = data.element.data('fv.icon'), title = $icon.data('bs.tooltip').getTitle();
   
    // Destroy the old tooltip and crete a new one positioned to the right
    $icon.tooltip('destroy').tooltip({
      html: true,
      placement: 'right',
      title: title,
      container: 'body'
    });
  })
  
  .on('success.form.fv', function(e) {
      // Prevent form submission
      e.preventDefault();

      // Get the form instance
      var $form = $(e.target);
       
      $.post('04SumaRestaMatrices.php', $("#pacheco").serializeArray(),
	          function(data) { $('#message').html(data); }
      );
    });
	
    // Reset the Tooltip container form
    $('#resetButton').on('click', function(e) {
        var fields = $('#tooltipContainerForm').data('formValidation').getOptions().fields,
            $parent, $icon;

        for (var field in fields) {
            $parent = $('[name="' + field + '"]').parents('.form-group');
            $icon   = $parent.find('.form-control-feedback[data-fv-icon-for="' + field + '"]');
            $icon.tooltip('destroy');
        }

        // Then reset the form
        $('#tooltipContainerForm').data('formValidation').resetForm(true);
    });
	
  });
  </script>
<?php
  function imprimeMatriz($matriz, $r, $c, $mensaje) {
	$html =  '<table class="table table-bordered table-condensed table-hover">';
	$html .= '<caption class="center-text">'.$mensaje.'</caption>';
	for($i = 0; $i < $r; $i++) {
		$html .= '<tr>';
		for($j = 0; $j < $c; $j++) {
		    $html .= '<td>'.$matriz[$i][$j].'</td>';
		}
		$html.= '</tr>';
	}
	$html.= '</table><br>';
	echo $html;	  
  }

  if( $_SERVER["REQUEST_METHOD"] == "POST") {
    $fila1     = $_POST['f1'];
	$col1      = $_POST['c1'];
	$fila2     = $_POST['f2'];
	$col2      = $_POST['c2'];
	$operacion = $_POST['operacion'];
	
	if($fila1 == $fila2 && $col1 == $col2){
		for($i = 0; $i < $fila1; $i++){
		 for($j = 0; $j < $col1; $j++){
		    $matriz[$i][$j]  = mt_rand(1,10);
		    $matriz2[$i][$j] = mt_rand(1,10);
		 }
		}
        imprimeMatriz($matriz, $fila1, $col1, 'Matriz A:');
        imprimeMatriz($matriz2, $fila2, $col2, 'Matriz B:');
        if($operacion == 1) {
		  $mensaje = 'A + B';	
		} else $mensaje = 'A - B';
		$html = '<table class="table table-bordered table-condensed table-hover">';
		$html .= '<caption class="center-text">'.$mensaje.':</caption>';
		for($i = 0; $i < $fila2; $i++) {
			$html .= '<tr>';
			for($j = 0; $j < $col2; $j++) {
			   $html .= '<td>'.($matriz[$i][$j] + $operacion*$matriz2[$i][$j]).'</td>';
			}
			$html.= '</tr>';
		}
		$html.= '</table>';
        echo $html;
    } else { 
   	  echo 'Las matrices no tienen las mismas dimensiones por lo que no se puede hacer la suma o resta';
	}
  }
?>

Ejemplo: Producto de matrices.

El producto de dos matrices se puede definir sólo si el número de columnas de la matriz izquierda es el mismo que el número de filas de la matriz derecha. Si A es una matriz m x n y B es una matriz n x p, entonces su producto matricial AB es la matriz m x p (m filas, p columnas) dada por:

para cada par i y j.

Aplicación

:
<!DOCTYPE html>
<html lang='es'>
<head>
  <meta charset='utf-8'>
  <meta name='viewport' content='width=device-width, initial-scale=1'>
  <meta http-equiv='x-ua-compatible' content='ie=edge'>
  <title>Vectores</title>
  <link href='http://netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css' rel='stylesheet'>
  <link href='../formValidation/css/formValidation.min.css' rel='stylesheet'>
</head>
<body>
<div class='container'>
  <form id='pacheco' class='form-horizontal' name='pacheco' method="post">
    <fieldset> 
      <legend class='text-center'>Multiplicación de matrices</legend>

      <div class='form-group'>
        <label class='control-label col-sm-2' for='f1'>Renglones A</label>
        <div class='col-sm-3'>
          <input id='f1' class='form-control' name='f1'>
        </div>

        <label class='control-label col-sm-2' for='c1'>Columnas A</label>
        <div class='col-sm-3'>
          <input id='c1' class='form-control' name='c1'>
        </div>
      </div>
   
      <div class='form-group'>
        <label class='control-label col-sm-2' for='f2'>Renglones B</label>
        <div class='col-sm-3'>
          <input id='f2' class='form-control' name='f2'>
        </div>
        <label class='control-label col-sm-2' for='c2'>Columnas B</label>
        <div class='col-sm-3'>
          <input id='c2' class='form-control' name='c2'>
        </div>
      </div>
     
      <div class="form-group"> 
        <div class="col-xs-7 col-xs-offset-5">
          <button type="submit" class="btn btn-primary">Validar</button>
          <button type="button" class="btn btn-default" id="resetButton">Reset</button>        
        </div>  
      </div>
    </fieldset>
  </form>
  <div class='row'>     
     <div class="col-sm-offset-2 col-sm-6" id="message"></div>
  </div>
</div>
<!-- Script jQuery -->
</body>
</html>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js'></script>
<script src='../formValidation/js/formValidation.js'></script>
<script src='../formValidation/js/framework/bootstrap.min.js'></script>
<script>
$(document).ready(function() {
  $('#pacheco') .formValidation({
    err: {
      container: 'tooltip'
    },
	icon: {
      valid: 'glyphicon glyphicon-ok',
      invalid: 'glyphicon glyphicon-remove',
      validating: 'glyphicon glyphicon-refresh'
    },
    fields: {
      f1: {
        validators: {
		  notEmpty: { message: 'El valor no puede ser nulo'},
           between: { min: 2, max: 5, message: 'El número de renglones debe estar entre 2 y 5'}
        }
      },
      c1: {
        validators: {
		  notEmpty: { message: 'El valor no puede ser nulo'},
           between: {min: 2, max: 5, message: 'El número de renglones debe estar entre 2 y 5'}
        }
      },
	  f2: {
        validators: {
		  notEmpty: { message: 'El valor no puede ser nulo'},
           between: { min: 2, max: 5, message: 'El número de renglones debe estar entre 2 y 5'}
        }
      },
      c2: {
        validators: {
		  notEmpty: { message: 'El valor no puede ser nulo'},
           between: { min: 2, max: 5, message: 'El número de renglones debe estar entre 2 y 5'}
        }
      }	  
    }
  })
  .on('err.field.fv', function(e, data) {
    // Get the tooltip
    var $icon = data.element.data('fv.icon'), title = $icon.data('bs.tooltip').getTitle();
   
    // Destroy the old tooltip and crete a new one positioned to the right
    $icon.tooltip('destroy').tooltip({
      html: true,
      placement: 'right',
      title: title,
      container: 'body'
    });
  })
  
  .on('success.form.fv', function(e) {
      // Prevent form submission
      e.preventDefault();

      // Get the form instance
      var $form = $(e.target);
       
      $.post('04MultiplicaMatrices.php', $("#pacheco").serializeArray(),
	          function(data) { $('#message').html(data); }
      );
    });
	
    // Reset the Tooltip container form
    $('#resetButton').on('click', function(e) {
        var fields = $('#tooltipContainerForm').data('formValidation').getOptions().fields,
            $parent, $icon;

        for (var field in fields) {
            $parent = $('[name="' + field + '"]').parents('.form-group');
            $icon   = $parent.find('.form-control-feedback[data-fv-icon-for="' + field + '"]');
            $icon.tooltip('destroy');
        }

        // Then reset the form
        $('#tooltipContainerForm').data('formValidation').resetForm(true);
    });
	
  });
  </script>  
<?php
   function imprimirMatriz($matriz, $r, $c, $mensaje) {   
     $html = '<table class="table table-bordered table-condensed table-hover">';
     $html.= '<tr><td colspan='."'$c'".'><b>'.$mensaje.'</b></td></tr>';  
     for($i = 0; $i < $r; $i++) {
        $html .= '<tr>';
        for($j = 0; $j < $c; $j++) $html .= '<td>'.$matriz[$i][$j].'</td>';
        $html.= '</tr>';
	 }  
	 $html .= '</table>';
     echo $html;
   }
   
   function multiplicaMatriz($matriz, $matriz2, $fila1, $col1, $fila2, $col2){
	  $html = '<table class="table table-bordered table-condensed table-hover">';
	  $html.= '<caption><h3>Matriz Resultante:</h3></caption>';
	  for($i = 0; $i < $fila1; $i++) {
		$html.= '<tr>';
		for($j = 0; $j < $col2; $j++) {
		  $suma = 0;
		  for($k = 0; $k < $col1; $k++){
		    $suma += $matriz[$i][$k]*$matriz2[$k][$j];
		  }
		  $html.= '<td>'.$suma.'</td>';
		}
	    $htm .= '</tr>';
	}
	$html.= '</table>';
	echo $html;
   }
   
  if( $_SERVER['REQUEST_METHOD'] == 'POST') {
     $fila1 = $_POST['f1'];
	 $col1  = $_POST['c1'];
	 $fila2 = $_POST['f2'];
	 $col2  = $_POST['c2'];
	 $suma  = 0;
     if($col1 == $fila2){
        for($i=0; $i < $fila1; $i++) 
          for($j=0; $j < $col1; $j++) $matriz[$i][$j] = mt_rand(1,10);
        imprimirMatriz($matriz, $fila1, $col1, 'Matriz A:');	
        for($i=0;$i < $fila2; $i++)
          for($j=0; $j <$col2; $j++) $matriz2[$i][$j] = mt_rand(1,10);
        imprimirMatriz($matriz2, $fila2, $col2, 'Matriz B:');	
        multiplicaMatriz($matriz, $matriz2, $fila1, $col1, $fila2, $col2);
	} else {
		$html = '<h3>Las matrices no son conformables. ';
		$html.= 'Por lo tanto no se puede hacer la multiplicacion</h3>';
        echo $html;
	}
  }
?>